/* ════════════════════════════════════════════════════
       GLOBAL NAV — frosted bar + sliding mega menu
    ════════════════════════════════════════════════════ */
    /* The sticky root stays filter-free: the frost lives on .site-nav-bar
       and the mega panel is its SIBLING, not its child. A backdrop-filter
       (or transform/opacity/filter) ancestor would make the mega's own
       blur sample that ancestor's composited layer instead of the page —
       the panel reads more transparent than the bar. Keep it this way. */
    /* OVERLAY nav: fixed, out of the document flow. Pages are authored
       against this — heroes pad their own top by --global-nav-offset,
       sticky elements + anchor scroll offset by it (design-system.css).
       Do NOT make this sticky/static: in-flow it pushes every page down
       by the bar height and breaks 100svh heroes. */
    .site-nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
    }
    .site-nav-bar {
      /* Nav frost runs lighter than the 80% --frost-bg standard. */
      background: color-mix(in srgb, var(--color-bg-primary) 70%, transparent);
      -webkit-backdrop-filter: var(--frost-blur);
              backdrop-filter: var(--frost-blur);
      border-bottom: var(--border-thin) solid var(--color-border-secondary);
    }
    .site-nav-inner {
      display: flex;
      align-items: center;
      height: 72px;   /* bar height — mirror in --global-nav-offset on integration */
    }

    .site-nav-logo { display: inline-flex; flex: none; }
    .site-nav-logo img { height: 32px; width: auto; }
    @media (min-width: 1024px) {
      .site-nav-logo img { height: 40px; }
    }

    /* ── Menu items (left-aligned after the logo) ── */
    .site-nav-menu {
      display: none;
      align-items: center;
      gap: var(--spacing-xs);
      margin-left: var(--spacing-lg);
    }
    @media (min-width: 1024px) {
      .site-nav-menu { display: flex; }
    }

    :where(.site-nav) .nav-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;   /* label ↔ chevron; sub-8px micro-adjustment */
      padding: 8px 14px;
      border: none;
      border-radius: var(--radius-full);
      background: transparent;
      font-family: var(--font-primary);
      font-size: var(--font-size-body-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      cursor: pointer;
      transition: background var(--transition-fast);
    }
    /* Hover / open state: pill fill one step up from cloud — mist. */
    :where(.site-nav) .nav-item.is-active,
    :where(.site-nav) .nav-item:hover { background: var(--color-mist); }

    /* Label ticker — same metrics as the button ticker. */
    :where(.site-nav) .nav-item-tick {
      display: flex;
      flex-direction: column;
      height: 1.4em;
      overflow: hidden;
    }
    :where(.site-nav) .nav-item-text {
      display: block;
      line-height: 1.4;
      white-space: nowrap;
      transition: transform var(--transition-base);
    }
    :where(.site-nav) .nav-item:hover .nav-item-text,
    :where(.site-nav) .nav-item.is-active .nav-item-text { transform: translateY(-100%); }

    :where(.site-nav) .nav-item-chev {
      width: 14px;
      height: 14px;
      flex: none;
      transition: transform var(--transition-base);
    }
    :where(.site-nav) .nav-item.is-active .nav-item-chev { transform: rotate(180deg); }

    /* ── Right-aligned CTAs ── */
    .site-nav-ctas {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      margin-left: auto;
    }
    .site-nav-ctas .tc-btn { display: none; }
    @media (min-width: 1024px) {
      .site-nav-ctas .tc-btn { display: inline-flex; }
    }

    /* ════════════════════════════════════════════════════
       MEGA MENU — one shared panel, three tabs in a
       sliding track (hovering across items swipes between
       tabs; the panel height eases to fit).
    ════════════════════════════════════════════════════ */
    :where(.site-nav) .nav-mega {
      position: absolute;
      top: 100%;   /* flush against the bar's separator */
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      width: min(900px, calc(100vw - var(--container-padding-tablet) * 2));
      border-radius: var(--radius-lg);
      border: var(--border-thin) solid var(--color-border-secondary);
      background: color-mix(in srgb, var(--color-bg-primary) 70%, transparent);   /* matches the bar's 70% frost */
      -webkit-backdrop-filter: var(--frost-blur);
              backdrop-filter: var(--frost-blur);
      /* Deepened beyond --shadow-lg so the open panel visibly lifts off
         the page (same rgba basis as the shadow tokens — decorative). */
      box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.22),
        0 4px 16px rgba(0, 0, 0, 0.10);
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transition:
        opacity var(--transition-base),
        transform var(--transition-base),
        height var(--transition-slow);
    }
    :where(.site-nav) .nav-mega.is-open {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    /* Port addition: pre-promote the mega's compositing layer. At opacity:0
       Chromium skips painting it, so the first open creates the
       backdrop-filter layer mid-transition — which can flash the whole page
       (Windows/Chromium backdrop-filter quirk). will-change keeps the layer
       alive from load so opening is a pure opacity/transform composite. */
    :where(.site-nav) .nav-mega { will-change: opacity, transform; }

    :where(.site-nav) .nav-mega-track {
      display: flex;
      align-items: flex-start;
      width: 300%;
      transition: transform var(--transition-slow);
    }
    :where(.site-nav) .nav-mega-panel {
      flex: 0 0 33.3333%;
      padding: var(--spacing-lg);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--spacing-lg) var(--gap-cards);
      align-content: start;
    }
    /* Resources tab runs 30-30-40 so the partner cards get more room. */
    :where(.site-nav) .nav-panel-resources { grid-template-columns: 3fr 3fr 4fr; }
    /* Products tab gets wider gutters between its columns. */
    :where(.site-nav) .nav-panel-products { column-gap: var(--spacing-lg); }

    /* ── Shared: link-hover arrow (footer treatment) ── */
    :where(.site-nav) .nav-arrow::after {
      content: '';
      width: 0.8em;
      height: 0.8em;
      margin-left: var(--spacing-xs);
      flex: none;
      background: currentColor;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
              mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
      opacity: 0;
      transform: translateX(-4px);
      transition: opacity var(--transition-base), transform var(--transition-base);
    }

    /* ── Shared: column group header + text links ── */
    :where(.site-nav) .nav-group-h {
      font-size: var(--font-size-tiny);
      font-weight: var(--font-weight-regular);
      color: var(--color-text-muted);
      margin-bottom: 12px;   /* same 12px basis as the button gap exception */
    }
    :where(.site-nav) .nav-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);   /* generous rhythm so link tabs sit closer to the Products tab's height */
    }
    :where(.site-nav) .nav-link {
      display: inline-flex;
      align-items: center;
      font-size: var(--font-size-body-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-secondary);
      transition: color var(--transition-fast), transform var(--transition-base);
    }
    :where(.site-nav) .nav-link:hover {
      color: var(--color-text-primary);
      transform: translateX(2px);
    }
    :where(.site-nav) .nav-link:hover::after { opacity: 1; transform: translateX(0); }

    /* External-link variant — swaps the hover arrow's mask for the
       Lucide external-link glyph (same fade/drift behaviour). */
    :where(.site-nav) .nav-arrow-ext::after {
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") center / contain no-repeat;
              mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    /* "New" pill — footer treatment. */
    :where(.site-nav) .nav-new-tag {
      font-size: 11px;   /* micro-label, below --font-size-tiny */
      line-height: 1;
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      background: color-mix(in srgb, var(--color-success) 18%, transparent);
      border-radius: var(--radius-full);
      padding: 2px 6px;
      margin-left: 6px;
    }

    /* ── Products tab ── */
    :where(.site-nav) .nav-prod {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 12px;   /* 12px basis exception */
      align-items: start;
    }
    :where(.site-nav) .nav-prod + .nav-prod { margin-top: var(--spacing-sm); }
    /* Icon spans both text rows, so the name aligns to the icon's top
       and the subtext sits directly beneath the name. */
    :where(.site-nav) .nav-prod-icon {
      grid-row: 1 / 3;
      width: 40px;
      height: 40px;
      border-radius: var(--radius-base);
      transition: transform var(--transition-base);
    }
    :where(.site-nav) .nav-prod:hover .nav-prod-icon { transform: rotate(-10deg); }
    :where(.site-nav) .nav-prod-name {
      display: inline-flex;
      align-items: center;
      font-size: var(--font-size-body-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      transition: transform var(--transition-base);
    }
    :where(.site-nav) .nav-prod:hover .nav-prod-name { transform: translateX(2px); }
    :where(.site-nav) .nav-prod:hover .nav-prod-name::after { opacity: 1; transform: translateX(0); }
    :where(.site-nav) .nav-prod-desc {
      grid-column: 2;
      font-size: var(--font-size-tiny);
      color: var(--color-text-muted);
      line-height: var(--line-height-snug);
      margin-top: 2px;
    }

    /* Coming-soon products — not links: no arrow, no pointer; a small
       "Coming soon" note fades in beside the name on hover instead. */
    :where(.site-nav) .nav-prod-soon { cursor: default; }
    :where(.site-nav) .nav-prod-soon .nav-prod-name::after { display: none; }
    :where(.site-nav) .nav-soon {
      font-size: var(--font-size-tiny);
      font-weight: var(--font-weight-regular);
      color: var(--color-text-muted);
      margin-left: var(--spacing-xs);
      opacity: 0;
      transition: opacity var(--transition-base);
    }
    :where(.site-nav) .nav-prod-soon:hover .nav-soon { opacity: 1; }

    /* Seller 365 block — spans columns 2–3, but is itself a two-column
       grid matching the panel's gutter, so the header sits in the first
       inner column and wraps/spaces exactly like the single-column
       products; the tool list spans both inner columns below. */
    :where(.site-nav) .nav-s365 {
      grid-column: 2 / 4;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--spacing-lg);
      /* Pack rows at the top: the panel grid stretches this block to the
         first column's height, and without this the slack redistributes
         into the header's rows — pushing the desc below the name. */
      align-content: start;
    }
    :where(.site-nav) .nav-s365-head {
      grid-column: 1 / 2;
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 12px;
      align-items: start;
      margin-bottom: var(--spacing-sm);
    }
    :where(.site-nav) .nav-s365-list {
      grid-column: 1 / -1;
      list-style: none;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      /* Column-first order: items run 1–5 down the first column. */
      grid-auto-flow: column;
      grid-template-rows: repeat(5, auto);
      gap: 14px var(--spacing-lg);   /* scoped rhythm value */
    }
    :where(.site-nav) .nav-s365-item {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-xs);
      font-size: var(--font-size-tiny);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-secondary);
      transition: color var(--transition-fast);
    }
    :where(.site-nav) .nav-s365-item img {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-base);
      flex: none;
      transition: transform var(--transition-base);
    }
    :where(.site-nav) .nav-s365-item .nav-s365-name {
      display: inline-flex;
      align-items: center;
      transition: transform var(--transition-base);
    }
    :where(.site-nav) .nav-s365-item:hover { color: var(--color-text-primary); }
    :where(.site-nav) .nav-s365-item:hover img { transform: rotate(-10deg); }
    :where(.site-nav) .nav-s365-item:hover .nav-s365-name { transform: translateX(2px); }
    :where(.site-nav) .nav-s365-item:hover .nav-s365-name::after { opacity: 1; transform: translateX(0); }

    /* ── Case-study / partner cards (home fam-case treatment, compact) ── */
    :where(.site-nav) .nav-case-row {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;   /* tighter card-to-card gap; 12px basis exception */
    }
    :where(.site-nav) .nav-case {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-md);
      background-image: var(--case-img);
      background-color: var(--color-graphite);
      background-size: cover;
      background-position: center;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: var(--spacing-sm);
      min-height: 168px;
      transition: transform var(--transition-base), box-shadow var(--transition-base);
    }
    :where(.site-nav) .nav-case:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }
    :where(.site-nav) .nav-case::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: linear-gradient(to bottom,
        color-mix(in srgb, var(--color-graphite) 30%, transparent) 0%,
        color-mix(in srgb, var(--color-graphite) 42%, transparent) 34%,
        color-mix(in srgb, var(--color-graphite) 80%, transparent) 55%,
        color-mix(in srgb, var(--color-graphite) 96%, transparent) 100%);
      transition: opacity var(--transition-fast);
    }
    :where(.site-nav) .nav-case:hover::after { opacity: 0.89; }
    :where(.site-nav) .nav-case > * { position: relative; z-index: 1; }
    :where(.site-nav) .nav-case-title {
      font-size: var(--font-size-body-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--color-white);
      line-height: var(--line-height-snug);
    }

    /* Frosted pill base — tag / corner arrow / CTA all share the dark
       frosted capsule + gradient ring (home fam-case treatment). */
    :where(.site-nav) .nav-case-tag,
    :where(.site-nav) .nav-case-cta {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-full);
      background: color-mix(in srgb, var(--color-graphite) 22%, transparent);
      -webkit-backdrop-filter: blur(8px);
              backdrop-filter: blur(8px);
      color: var(--color-white);
      line-height: 1;
    }
    /* "Case Study" micro-tag, top-left (a step smaller than the CTA pill). */
    :where(.site-nav) .nav-case-tag {
      position: absolute;
      top: var(--spacing-sm);
      left: var(--spacing-sm);
      height: 24px;
      padding: 0 10px;
      font-size: 10px;   /* micro-label, below --font-size-tiny (fam-case basis) */
      font-weight: var(--font-weight-bold);
      letter-spacing: var(--letter-spacing-wide);
      text-transform: uppercase;
    }
    /* CTA pill (partner cards) — sits in the bottom row, right-aligned. */
    :where(.site-nav) .nav-case-cta {
      flex: none;
      height: 28px;
      padding: 0 12px;
      font-size: var(--font-size-tiny);
      font-weight: var(--font-weight-semibold);
    }
    /* Bottom row: title left, CTA right, both bottom-aligned. */
    :where(.site-nav) .nav-case-foot {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--spacing-xs);
    }
    :where(.site-nav) .nav-case-tag::before,
    :where(.site-nav) .nav-case-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-white) 72%, transparent) 0%,
        color-mix(in srgb, var(--color-white) 6%, transparent) 28%,
        color-mix(in srgb, var(--color-white) 6%, transparent) 72%,
        color-mix(in srgb, var(--color-white) 72%, transparent) 100%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask-composite: exclude;
      pointer-events: none;
    }

    /* Resources tab — stacked partner cards in column 3, spanning both
       grid rows (the trust row below only spans columns 1–2). */
    :where(.site-nav) .nav-partner-stack {
      display: flex;
      flex-direction: column;
      gap: 12px;   /* matches the case-row card gap */
      grid-column: 3;
      grid-row: 1 / 3;
      /* Pull toward the panel's top/right/bottom edges — cards sit a
         16px inset from the card border instead of the full padding.
         (Default grid stretch sizes the stack; no explicit height.) */
      margin:
        calc(var(--spacing-sm) - var(--spacing-lg))
        calc(var(--spacing-sm) - var(--spacing-lg))
        calc(var(--spacing-sm) - var(--spacing-lg))
        0;
    }
    /* Review-platform trust row — short band under the link columns
       (icon + stars + rating per platform, one line). Brand hexes on
       marks/stars are the documented reviews-wall exception. */
    :where(.site-nav) .nav-trust-row {
      grid-column: 1 / 3;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-md);
      /* Thin 48px band pinned to the panel's bottom edge — escapes the
         tab's bottom padding so only the separator + one line remain.
         align-self:end matters: the partner stack spans both rows and
         inflates this track, so without it the band floats at the
         track's top and the space under the line grows. */
      height: 48px;
      align-self: end;
      margin-bottom: calc(-1 * var(--spacing-lg));
      /* Widen the gutter to the partner cards beyond the panel's 20px
         column gap. */
      margin-right: var(--spacing-sm);
    }
    :where(.site-nav) .nav-trust-row::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: var(--border-thin);
      background: linear-gradient(to right, transparent, var(--color-bg-stroke) 12%, var(--color-bg-stroke) 88%, transparent);
    }
    :where(.site-nav) .nav-trust {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-xs);
      line-height: 1;
    }
    :where(.site-nav) .nav-trust svg { flex: none; display: block; }
    :where(.site-nav) .nav-trust-stars {
      font-size: var(--font-size-body-sm);
      letter-spacing: var(--letter-spacing-wide);
    }
    :where(.site-nav) .nav-trust-score {
      font-size: var(--font-size-tiny);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
    }
    /* Half-filled final star — left half solid brand colour (currentColor),
       right half a faint tint of it, clipped to the glyph. */
    :where(.site-nav) .nav-trust-star-half {
      background: linear-gradient(90deg,
        currentColor 50%,
        color-mix(in srgb, currentColor 30%, transparent) 50%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    :where(.site-nav) .nav-partner-stack .nav-case {
      flex: 1;
      min-height: 132px;
    }

    /* ════════════════════════════════════════════════════
       MOBILE (<1024px) — hamburger + stacked frosted panel
    ════════════════════════════════════════════════════ */
    .site-nav-burger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      margin-left: var(--spacing-xs);
      border: none;
      background: transparent;
      border-radius: var(--radius-full);
      color: var(--color-text-primary);
      cursor: pointer;
    }
    .site-nav-burger {
      flex-direction: column;
      justify-content: center;
      gap: 5px;   /* line spacing; sub-8px micro-adjustment */
    }
    :where(.site-nav) .burger-line {
      width: 18px;
      height: 2px;
      border-radius: var(--radius-full);
      background: currentColor;
      transition: transform var(--transition-base);
    }
    /* Lines fold into an X: each travels half the 7px centre distance. */
    .site-nav.is-mobile-open .burger-line:first-child { transform: translateY(3.5px) rotate(45deg); }
    .site-nav.is-mobile-open .burger-line:last-child { transform: translateY(-3.5px) rotate(-45deg); }
    @media (min-width: 1024px) {
      .site-nav-burger { display: none; }
    }

    .site-nav-mobile {
      display: none;
      position: relative;
      max-height: calc(100vh - 72px);
      overflow-y: auto;
      padding: 0 0 var(--spacing-lg);
    }
    /* Faded-end separator between the bar row and the open panel. */
    .site-nav-mobile::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: var(--border-thin);
      background: linear-gradient(to right, transparent, var(--color-bg-stroke) 12%, var(--color-bg-stroke) 88%, transparent);
    }
    .site-nav.is-mobile-open .site-nav-mobile { display: block; }
    .site-nav.is-mobile-open .site-nav-bar { box-shadow: var(--shadow-md); }
    @media (min-width: 1024px) {
      .site-nav.is-mobile-open .site-nav-mobile { display: none; }
    }
    /* Accordion rows — Products / Solutions / Resources fold out;
       Pricing is a plain link row in the same style. */
    :where(.site-nav) .nav-macc { position: relative; }
    /* Faded-end hairline separators (home hero sep treatment). */
    :where(.site-nav) .nav-macc::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: var(--border-thin);
      background: linear-gradient(to right, transparent, var(--color-bg-stroke) 12%, var(--color-bg-stroke) 88%, transparent);
    }
    :where(.site-nav) .nav-macc-head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;   /* midpoint of --spacing-sm/md — roomier touch row */
      border: none;
      background: transparent;
      font-family: var(--font-primary);
      font-size: var(--font-size-body);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      cursor: pointer;
      transition: color var(--transition-fast);
    }
    /* Open row's title steps back so the links inside stand out. */
    :where(.site-nav) .nav-macc.is-open .nav-macc-head { color: var(--color-text-muted); }
    :where(.site-nav) .nav-macc-chev {
      width: 16px;
      height: 16px;
      flex: none;
      transition: transform var(--transition-base);
    }
    :where(.site-nav) .nav-macc.is-open .nav-macc-chev { transform: rotate(180deg); }
    :where(.site-nav) .nav-macc-body {
      overflow: hidden;
      max-height: 0;
      transition: max-height var(--transition-slow);
    }
    :where(.site-nav) .nav-macc-body .nav-links {
      padding: var(--spacing-xs) 0 var(--spacing-sm);
      gap: var(--spacing-sm);
    }
    .site-nav-mobile .nav-link { font-size: var(--font-size-body); }
    .site-nav-mobile .nav-link img {
      width: 28px;
      height: 28px;
      border-radius: var(--radius-sm);
      flex: none;
      margin-right: var(--spacing-xs);
    }
    /* No hover on touch — coming-soon notes render visible. */
    .site-nav-mobile .nav-soon { opacity: 1; }
    /* CTAs side by side below the accordion. */
    .site-nav-mobile-ctas {
      display: flex;
      gap: var(--spacing-xs);
      margin-top: var(--spacing-lg);
    }
    .site-nav-mobile-ctas .tc-btn { flex: 1; justify-content: center; }

    @media (prefers-reduced-motion: reduce) {
      :where(.site-nav) .nav-mega,
      :where(.site-nav) .nav-mega-track { transition: none; }
    }

/* ── SvelteKit port additions (not in Ben's source) ─────────────────── */
/* The .tc scope class lives on the nav root (not <body>) in our app; the
   .tc base rule paints --color-bg-primary, which would put an opaque layer
   behind the frosted bar. Nav root must stay transparent. */
.site-nav.tc { background: transparent; }