/* Smooth cross-page transitions (View Transitions API; ignored by older browsers) */
  @view-transition { navigation: auto; }
  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) { animation: 180ms cubic-bezier(.4,0,1,1) both vt-fade-out; }
    ::view-transition-new(root) { animation: 300ms cubic-bezier(0,0,.2,1) both vt-fade-in; }
  }
  @keyframes vt-fade-out { to { opacity: 0; } }
  @keyframes vt-fade-in  { from { opacity: 0; } }

    /* ── Leaf on dark ──────────────────────────────
       On cream, --green carries the emphasis: the italic half of a
       headline, the check glyphs, the eyebrows. On the dark bands green
       has nothing to push against, so --leaf takes over that job.
       Interaction still resolves to leaf everywhere; here it also marks
       the one word in each band that has to land. */

    /* Headline highlight */
    .on-dark h1 em, .on-dark h2 em, .on-dark h3 em,
    .dark-sec h1 em, .dark-sec h2 em, .dark-sec h3 em,
    .on-dark .h-hl, .dark-sec .h-hl,
    .on-dark .cta-h2 span, .dark-sec .cta-h2 span,
    .on-dark .guar-h2 span, .dark-sec .guar-h2 span,
    .on-dark .tl-promise-q em,
    .on-dark .why-quote-mark, .dark-sec .why-quote-mark { color: var(--leaf); }

    /* Micro-labels and eyebrows */
    .on-dark .emp-eyebrow, .on-dark .dor-truth-label, .on-dark .tl-promise-label { color: var(--leaf); }
    .on-dark .emp-fact dt, .on-dark .footer-col-h, .dark-sec .footer-col-h { color: rgba(219,223,101,.82); }

    /* Affirmative glyphs */
    .on-dark .guar-ck, .dark-sec .guar-ck {
      background: rgba(219,223,101,.12);
      border-color: rgba(219,223,101,.32);
      color: var(--leaf);
    }

    /* Before / after: the payoff side is the one that goes chartreuse */
    .ba-chip-after { background: var(--leaf); color: var(--ink); }
    .on-dark .ba-bridge-num, .dark-sec .ba-bridge-num { color: var(--leaf); }
    .on-dark .ba-tab.active, .dark-sec .ba-tab.active {
      background: var(--leaf); color: var(--ink);
      box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 18px -8px rgba(219,223,101,.4);
    }

    /* A green button on a green band is invisible: on dark it takes the light
       treatment, so it still flips to leaf on hover like everywhere else */
    .on-dark .btn-green, .dark-sec .btn-green {
      background: var(--paper); color: var(--ink);
      box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 16px 34px -16px rgba(0,0,0,.55);
    }
    .on-dark .btn-green:hover, .dark-sec .btn-green:hover {
      background: var(--leaf); color: var(--ink);
      box-shadow: 0 2px 4px rgba(24,32,25,.1), 0 18px 34px -16px rgba(219,223,101,.45);
    }

    /* Links on dark resolve to leaf, same as every other interactive thing */
    .on-dark .footer-nav a:hover, .dark-sec .footer-nav a:hover,
    .on-dark .footer-contact a:hover, .dark-sec .footer-contact a:hover,
    .on-dark .footer-legal a:hover, .dark-sec .footer-legal a:hover,
    .on-dark .footer-top:hover, .dark-sec .footer-top:hover { color: var(--leaf); }
    .on-dark .footer-nav a::before, .dark-sec .footer-nav a::before { background: var(--leaf); }

    /* Footer wordmark: a chartreuse fade reads on the ink where green did not */
    .on-dark .footer-giant, .dark-sec .footer-giant {
      background: linear-gradient(180deg, rgba(219,223,101,.24), rgba(219,223,101,.03) 88%);
      -webkit-background-clip: text; background-clip: text;
    }