@import url('font.css');
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    :root {
      --bg: #f6f7f9;
      --surface: #ffffff;
      --surface-hover: #fafbfc;
      --border: #e5e7eb;
      --border-strong: #d9dce1;
      --text: #181a1f;
      --text-secondary: #626873;
      --text-muted: #8a9099;
      --accent: #181a1f;
      --accent-soft: #f0f1f3;
      --icon-box-bg: #f8f9fa;
    }

    body {
      min-height: 100vh;
      background: var(--bg);
      color: var(--text);
      font-size: 15px;
      -webkit-font-smoothing: antialiased;
    }

    .app-shell {
      width: 100%;
      max-width: 1080px;
      margin: 0 auto;
      padding: 0 24px 48px;
    }

    .topbar {
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      text-decoration: none;
      color: var(--text);
    }

    .brand-mark {
      width: 30px;
      height: 30px;
      border: 1px solid var(--border-strong);
      background: var(--surface);
      display: grid;
      place-items: center;
      border-radius: 7px;
    }

    .brand-mark img {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }

    .brand-name {
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .brand-name span {
      color: var(--text-muted);
      font-weight: 400;
    }

    .topbar-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-muted);
      font-size: 13px;
    }

    .suite-header {
      padding: 34px 0 30px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
    }

    .suite-heading {
      min-width: 0;
    }

    .eyebrow {
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .suite-heading h1 {
      font-size: 28px;
      line-height: 1.15;
      font-weight: 600;
      letter-spacing: -0.035em;
    }

    .suite-heading p {
      margin-top: 8px;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.5;
      max-width: 520px;
    }

    .section {
      margin-bottom: 30px;
    }

    .section-header {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 11px;
      padding: 0 2px;
    }

    .section-header .section-icon {
      width: 16px;
      height: 16px;
      object-fit: contain;
      opacity: 0.75;
    }

    .section-header h2 {
      font-size: 13px;
      line-height: 1;
      font-weight: 600;
      color: var(--text-secondary);
      letter-spacing: 0.01em;
    }

    .section-count {
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 400;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    /* Product Card */
    .product {
      position: relative;
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 82px;
      padding: 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--text);
      text-decoration: none;
      transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
    }

    .product:hover {
      background: var(--surface-hover);
      border-color: var(--border-strong);
      transform: translateY(-1px);
    }

    .product:active {
      transform: translateY(0);
    }

    /* Automated Arrow via Pure CSS */
    .product::after {
      content: "";
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      border-radius: 7px;
      border: 1px solid transparent;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a9099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 16px;
      transition: background-color 0.18s ease, border-color 0.18s ease, background-image 0.18s ease;
    }

    .product:hover::after {
      background-color: var(--accent-soft);
      border-color: var(--border);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23181a1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
    }

    /* Reusable Icon Containers */
    .product-icon {
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      display: grid;
      place-items: center;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--icon-box-bg);
    }

    .product-icon .icon {
      width: 30px;
      height: 30px;
      object-fit: contain;
      display: block;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: auto;
    }

    .product-content {
      min-width: 0;
      flex: 1;
    }

    .product-name {
      font-size: 15px;
      line-height: 1.35;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .product-description {
      margin-top: 3px;
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .product-footer {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-top: 7px;
    }

    .product-type {
      color: var(--text-muted);
      font-size: 11px;
      line-height: 1;
    }

    .product-divider {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--border-strong);
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-top: 42px;
      padding-top: 18px;
      border-top: 1px solid var(--border);
      color: var(--text-muted);
      font-size: 12px;
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .footer-brand img {
      width: 20px;
      height: 20px;
      opacity: 0.65;
    }

    .footer-links {
      display: flex;
      gap: 16px;
    }

    .footer-links a {
      color: inherit;
      text-decoration: none;
    }

    .footer-links a:hover {
      color: var(--text);
    }

    @media (max-width: 680px) {
      .app-shell {
        padding: 0 16px 32px;
      }

      .topbar {
        height: 60px;
      }

      .topbar-meta {
        display: none;
      }

      .suite-header {
        padding: 27px 0 25px;
        align-items: flex-start;
      }

      .suite-heading h1 {
        font-size: 24px;
      }

      .suite-heading p {
        font-size: 14px;
      }

      .product-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .product {
        min-height: 78px;
        padding: 13px;
      }

      .product-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
      }

      .product-name {
        font-size: 15px;
      }

      .product-description {
        font-size: 13px;
      }

      .footer {
        margin-top: 32px;
      }
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #101114;
        --surface: #17191d;
        --surface-hover: #1b1e23;
        --border: #292d33;
        --border-strong: #363b43;
        --text: #f1f3f5;
        --text-secondary: #a1a7b0;
        --text-muted: #707781;
        --accent: #f1f3f5;
        --accent-soft: #24282e;
        --icon-box-bg: #14161a;
      }

      .product::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23707781' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
      }

      .product:hover::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f1f3f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
      }
    .section-header .section-icon {
      filter: invert(1);
    }
    .product-icon .icon {
      filter: invert(1) brightness(0.9);
    }
    .invert-icon {
      filter: invert(1) brightness(0.9);
    }
    }