@charset "UTF-8";
/* ==========================================================================
   Balance Sheep — balancesheep.net
   Hand-authored. No framework, no build step.

   Layer order is the cascade contract: later layers win regardless of
   specificity, so component styles never need !important to beat base.
   ========================================================================== */

@layer reset, tokens, base, layout, components, motion, utilities;

/* ==========================================================================
   FONT — self-hosted Figtree variable, latin subset, 20KB
   ========================================================================== */
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-var-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallback so a slow font swap cannot re-wrap a line.
   size-adjust was measured, not guessed: it brings the fallback to within
   0.06% of Figtree's width at the same nominal size. Block height already
   matched exactly, because every line-height here is a unitless multiplier. */
@font-face {
  font-family: 'Figtree Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Segoe UI'), local('Roboto');
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
  size-adjust: 98%;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

  img, picture, svg, video, canvas { display: block; max-width: 100%; }
  img, video { height: auto; }

  input, button, textarea, select { font: inherit; color: inherit; }

  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
  h1, h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; }

  ul[class], ol[class] { list-style: none; padding: 0; }

  /* Reset only the chrome — <details> keyboard behaviour stays native. */
  summary { cursor: pointer; list-style: none; }
  summary::-webkit-details-marker { display: none; }

  table { border-collapse: collapse; width: 100%; }

  :target { scroll-margin-top: 6rem; }
}

@layer tokens {
  :root {
    /* ---- Brand constants -----------------------------------------------
       These are the ink of the brand and do NOT flip between modes. A navy
       band is navy in both; only the semantic roles below change. Keeping
       the two apart is what stops dark mode from turning headings into
       backgrounds.
    -------------------------------------------------------------------- */
    --navy:      #0B2B44;
    --navy-deep: #071B2C;
    --teal:      #0096A9;
    --teal-ink:  #00707F;   /* white-on-fill 5.8:1 */
    --ember:     #DD8344;
    /* The dark ember, kept for exactly TWO jobs — the accent word in a light
       section's heading, and the Founding Member label. Both are ember type on
       a pale ground, where --ember itself measures 2.72:1 and misses even the
       3:1 large-text bar; this reads 6.32:1. It is deliberately NOT wired to
       --ember-text, so the eyebrow pills, FAQ hovers and icons keep the
       brighter --ember. Only .sec-head .accent-o and .founding-line b use it —
       grep BACKTRACK-EMBER for both. */
    --ember-deep:#93481D;
    --ember-light:#E9A472;  /* tint of --ember for text on the dark gradient */
    /* Teal Pale — the one light teal. Legible as text on every dark ground
       (10.5:1 on --navy-deep, 8.7:1 behind navy labels) and the same value the
       hero headline already uses, so the palette has a single light teal. */
    --teal-pale:  #7FD6E2;
    --teal-light: var(--teal-pale);   /* alias — folded into --teal-pale */
    /* The one light ink for copy sitting directly on a navy band: 11.5:1 on
       --navy. Replaces the four near-identical pale blue-greys. */
    --ink-light:  #DCE6EC;

    /* ---- Semantic roles — these flip in dark mode ---------------------- */
    --bg:         #FBFAF8;  /* soft white, never pure */
    --surface:    #FFFFFF;
    --heading:    var(--navy);
    --body:       #3A3A3A;
    /* Secondary copy gets its own grey again rather than --body at reduced
       opacity: a real colour is predictable on every ground, where a
       translucent one shifts with whatever sits behind it. 5.9:1 on white. */
    --muted:      #646463;
    /* One border colour, not two. --line-soft is kept as an alias so the many
       component rules that ask for the lighter hairline still resolve. */
    --line:       #E4E6E5;
    --line-soft:  var(--line);
    --teal-text:  var(--teal-ink);   /* teal that is legal as small text */
    /* The bright ember, for eyebrow pills, FAQ hovers and icons. The two places
       that need the darker one reach for --ember-deep directly. */
    --ember-text: var(--ember);
    --btn-bg:     var(--teal-ink);
    --btn-fg:     #FFFFFF;

    --teal-wash:  color-mix(in srgb, var(--teal) 7%,  var(--bg));
    --teal-veil:  color-mix(in srgb, var(--teal) 13%, var(--bg));
    --teal-line:  color-mix(in srgb, var(--teal) 26%, var(--bg));
    --ember-wash: color-mix(in srgb, var(--ember) 10%, var(--bg));
    --ember-veil: color-mix(in srgb, var(--ember) 18%, var(--bg));
    --tint:       color-mix(in srgb, var(--navy) 4%,  var(--bg));

    --grad-dark: linear-gradient(148deg,
                   color-mix(in srgb, var(--teal) 22%, var(--navy)) 0%,
                   var(--navy) 52%,
                   var(--navy-deep) 100%);
    --grad-ember: linear-gradient(135deg, var(--ember) 0%, #C9662B 100%);

    /* ---- Type ---------------------------------------------------------- */
    --font: 'Figtree', 'Figtree Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --t-display: clamp(2.375rem, 1.35rem + 4.38vw, 5.25rem);  /* 38 → 84 */
    --t-h2:      clamp(1.75rem,  1.28rem + 2.01vw, 3.125rem); /* 28 → 50 */
    --t-h3:      clamp(1.0625rem, 1.03rem + 0.16vw, 1.1875rem);
    /* Between h3 and h2 — for the two headers that introduce a whole block
       rather than label a card. */
    --t-h3-lg:   clamp(1.375rem, 1.16rem + 0.92vw, 1.875rem);
    --t-lead:    clamp(1.0625rem, 0.99rem + 0.31vw, 1.25rem);
    --t-body:    clamp(1rem, 0.96rem + 0.19vw, 1.0625rem);
    --t-sm:      0.9375rem;
    --t-xs:      0.8125rem;

    --lh-display: 1.02;
    --lh-heading: 1.13;
    --lh-body:    1.62;

    /* ---- Space --------------------------------------------------------- */
    --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
    --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3rem;
    --s-9: 4rem;     --s-10: 5rem;   --s-11: 6rem;

    --section-y: 3.25rem;
    --gutter: 1.25rem;
    --measure: 58ch;
    --maxw: 76rem;

    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

    --sh-1: 0 1px 2px color-mix(in srgb, var(--navy) 6%, transparent),
            0 1px 3px color-mix(in srgb, var(--navy) 4%, transparent);
    --sh-2: 0 2px 4px color-mix(in srgb, var(--navy) 5%, transparent),
            0 6px 16px color-mix(in srgb, var(--navy) 7%, transparent);
    --sh-3: 0 4px 8px color-mix(in srgb, var(--navy) 5%, transparent),
            0 16px 40px color-mix(in srgb, var(--navy) 10%, transparent);

    --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-weigh:  cubic-bezier(0.34, 1.3, 0.64, 1);
    /* easeOutBack — overshoots the resting point, then settles. This is the
       curve a spring animation traces, without shipping a physics library. */
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --d-press: 180ms; --d-state: 320ms; --d-enter: 620ms;

    --nav-h: 4.5rem;
  }

  /* ---- Dark mode -------------------------------------------------------
     Only the semantic roles move. Teal has to lighten to stay legible on a
     dark ground for exactly the same reason it had to darken to be legible
     on white — #0096A9 sits in the middle and fails at both ends.
     The [data-theme] hooks mean a manual toggle is a few lines away, but
     none ships: the brief asks for "dark mode friendly", which is this.
  --------------------------------------------------------------------- */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      --bg:         var(--navy-deep);
      --surface:    var(--navy);
      --heading:    #FFFFFF;
      --body:       var(--ink-light);
      --muted:      #93A6B3;   /* 6.9:1 on --bg, 5.8:1 on --surface */
      /* ONE border colour for dark mode, and it adds no new hex: a translucent
         white hairline, the same device the navy-band dividers already use. A
         border built from --navy would have been invisible against a --navy
         card. --line-soft is an alias, so the two old tones (#1E4055,
         #16344A) collapse to this single value. */
      --line:       color-mix(in srgb, #FFFFFF 15%, transparent);
      --line-soft:  var(--line);
      --teal-text:  var(--teal-pale);   /* 10.5:1 on --bg */
      --ember-text: var(--ember-light); /* 8.3:1 on --bg */
      --btn-bg:     var(--teal-pale);
      --btn-fg:     var(--navy); /* 8.7:1 on --teal-pale */

      --sh-1: 0 1px 2px rgba(0,0,0,.34);
      --sh-2: 0 2px 4px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.34);
      --sh-3: 0 4px 8px rgba(0,0,0,.32), 0 16px 40px rgba(0,0,0,.42);
    }
  }
  :root[data-theme='dark'] {
    --bg: var(--navy-deep); --surface: var(--navy); --heading: #FFFFFF; --body: var(--ink-light);
    --muted: #93A6B3;
    --line: color-mix(in srgb, #FFFFFF 15%, transparent); --line-soft: var(--line);
    --teal-text: var(--teal-pale); --ember-text: var(--ember-light);
    --btn-bg: var(--teal-pale); --btn-fg: var(--navy);
  }

  @media (min-width: 48rem) { :root { --section-y: 4.25rem; --gutter: 2rem; } }
  @media (min-width: 64rem) { :root { --section-y: 5.5rem;  --gutter: 2.5rem; } }

  html.lite { --d-press: 0ms; --d-state: 0ms; --d-enter: 0ms; }
}

@layer base {
  body {
    background: var(--bg);
    color: var(--body);
    font-family: var(--font);
    font-size: var(--t-body);
    line-height: var(--lh-body);
    font-weight: 400;
    font-synthesis-weight: none;
    /* Every figure on this page is financial. Tabular by default keeps price
       columns and ledger rows aligned on the decimal without opt-in. */
    font-variant-numeric: tabular-nums;
  }

  h1, h2, h3, h4 {
    color: var(--heading);
    font-weight: 700;
    line-height: var(--lh-heading);
    letter-spacing: -0.02em;
  }
  h1 { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: -0.035em; }
  h2 { font-size: var(--t-h2); }
  h3 { font-size: var(--t-h3); font-weight: 650; letter-spacing: -0.01em; }

  p { max-width: var(--measure); }

  a { color: var(--teal-text); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  a:hover { color: var(--heading); }
  strong, b { font-weight: 650; color: var(--heading); }

  /* Focus is a first-class visual. Two-tone so it stays visible on both
     paper and navy grounds. */
  :focus-visible { outline: 2px solid var(--teal-text); outline-offset: 3px; border-radius: 3px; }
  .band-navy :focus-visible, .foot :focus-visible { outline-color: #FFFFFF; }

  ::selection { background: var(--teal-veil); color: var(--heading); }
}

@layer layout {
  .wrap { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; }
  .section { padding-block: var(--section-y); }

  .skip {
    position: absolute; left: var(--s-4); top: var(--s-4); z-index: 200;
    padding: var(--s-3) var(--s-5);
    background: var(--navy); color: #FFFFFF;
    border-radius: var(--r-sm); font-weight: 600; text-decoration: none;
    transform: translateY(-150%);
    transition: transform var(--d-state) var(--ease-settle);
  }
  .skip:focus-visible { transform: translateY(0); color: #FFFFFF; }
}

@layer components {

  /* ---- Buttons -------------------------------------------------------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 2.875rem; padding: 0.75rem var(--s-6);
    border: 1px solid transparent; border-radius: var(--r-pill);
    font-size: var(--t-body); font-weight: 650; letter-spacing: -0.005em;
    text-decoration: none; cursor: pointer;
    transition: background-color var(--d-press) var(--ease-settle),
                border-color var(--d-press) var(--ease-settle),
                color var(--d-press) var(--ease-settle),
                box-shadow var(--d-press) var(--ease-settle),
                transform var(--d-press) var(--ease-settle);
  }
  .btn-lg { min-height: 3.25rem; padding: 0.9375rem var(--s-7); font-size: var(--t-lead); }
  .btn-sm { min-height: 2.375rem; padding: 0.4375rem var(--s-4); font-size: var(--t-sm); }

  .btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--sh-2); }
  .btn-primary:hover { background: color-mix(in srgb, var(--btn-bg) 88%, var(--navy)); color: var(--btn-fg); box-shadow: var(--sh-3); }
  /* Settles down like a physical key. No scale bounce — that reads template. */
  .btn-primary:active { transform: translateY(1px); box-shadow: var(--sh-1); }

  .btn-ghost { background: transparent; color: var(--heading); border-color: var(--line); }
  .btn-ghost:hover { background: var(--teal-wash); border-color: var(--teal-line); color: var(--heading); }
  .btn-ghost:active { transform: translateY(1px); }

  .btn-on-navy { background: #FFFFFF; color: var(--navy); border-color: #FFFFFF; }
  /* Inverts on hover: navy fill, white label, white edge. */
  .btn-on-navy:hover { background: var(--navy); color: #FFFFFF; border-color: #FFFFFF; }

  /* ---- Eyebrow -------------------------------------------------------- */
  .eyebrow {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--teal-veil); color: var(--teal-text);
    border-radius: var(--r-pill);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    width: max-content; max-width: 100%;
  }
  .eyebrow-o { background: var(--ember-veil); color: var(--ember-text); }
  .band-navy .eyebrow {
    background: color-mix(in srgb, var(--navy-deep) 72%, transparent);
    color: color-mix(in srgb, var(--teal) 45%, #FFFFFF);
  }
  .band-navy .eyebrow-o {
    background: color-mix(in srgb, var(--navy-deep) 72%, transparent);
    color: var(--ember);
  }
  /* Phone: drop the capsule. At 375px it runs nearly edge to edge and starts
     competing with the headline for first read. */
  @media (max-width: 47.99rem) {
    .eyebrow { background: none; padding: 0; border-radius: 0; }
    .eyebrow::before { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--teal); flex: none; }
    .eyebrow-o::before { background: var(--ember); }
    .band-navy .eyebrow { color: color-mix(in srgb, var(--teal) 45%, #FFFFFF); }
    .band-navy .eyebrow-o { color: var(--ember); }
  }

  /* ---- Section header -------------------------------------------------- */
  .sec-head { max-width: 40rem; margin-inline: auto; text-align: center; margin-bottom: var(--s-7); }
  .sec-head .eyebrow { margin-inline: auto; margin-bottom: var(--s-3); }
  /* :not(.eyebrow) is load-bearing — the eyebrow is a <p> in here, and a bare
     `.sec-head p` (0-1-1) outranks `.eyebrow` (0-1-0) and repaints it muted. */
  .sec-head p:not(.eyebrow) { color: var(--muted); margin-top: var(--s-3); margin-inline: auto; }
  .sec-head .accent { color: var(--teal-text); }
  /* BACKTRACK-EMBER (1 of 2) — the accent word in a light section's heading:
     "don't have to.", "making things.", "free one?". Uses --ember-deep rather
     than --ember-text so it stays at 6.32:1 while the eyebrow pills, which do
     follow --ember-text, keep the brighter ember. The .band-navy rule below
     still overrides this on dark bands (equal specificity, later in source),
     so "tie out." on the navy band remains --ember-light. */
  .sec-head .accent-o { color: var(--ember-deep); }
  .band-navy .sec-head p:not(.eyebrow) { color: color-mix(in srgb, #FFFFFF 76%, var(--navy)); }
  .band-navy .accent-o { color: var(--ember-light); }
  .band-navy .accent { color: color-mix(in srgb, var(--teal) 45%, #FFFFFF); }
  @media (min-width: 48rem) { .sec-head { margin-bottom: var(--s-8); } }

  /* ---- Bands ----------------------------------------------------------- */
  .band-tint { background: var(--tint); }
  .band-teal { background: var(--teal-wash); }
  .band-navy {
    background: var(--grad-dark);
    color: color-mix(in srgb, #FFFFFF 84%, var(--navy));
    position: relative; overflow: clip;
  }
  .band-navy h2, .band-navy h3 { color: #FFFFFF; }
  .band-navy strong, .band-navy b { color: #FFFFFF; }
  .band-wool {
    position: absolute; inset: auto -8% -32% auto;
    width: min(34rem, 70vw); aspect-ratio: 1;
    color: var(--ember); opacity: 0.13; pointer-events: none; z-index: 0;
    -webkit-mask-image: radial-gradient(closest-side, #000 34%, transparent 88%);
    mask-image: radial-gradient(closest-side, #000 34%, transparent 88%);
  }
  .band-navy > .wrap { position: relative; z-index: 1; }

  /* ==========================================================================
     NAV
     The blur lives on a pseudo-element, not on .nav. backdrop-filter creates a
     containing block for fixed-position descendants, which trapped the mobile
     menu's full-screen overlay inside the 72px header.
     ========================================================================== */
  .nav { position: sticky; top: 0; z-index: 100; }
  .nav::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    border-bottom: 1px solid transparent;
    transition: background-color var(--d-state) var(--ease-settle),
                border-color var(--d-state) var(--ease-settle),
                box-shadow var(--d-state) var(--ease-settle);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .nav::before { -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav::before { background: var(--bg); }
  }
  .nav.is-stuck::before {
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    border-bottom-color: var(--line-soft);
    box-shadow: var(--sh-1);
  }

  .nav-inner { position: relative; display: flex; align-items: center; gap: var(--s-5); height: var(--nav-h);
               transition: height var(--d-state) var(--ease-settle); }
  .nav.is-stuck .nav-inner { height: 3.875rem; }

  .nav-logo { display: block; flex: none; margin-right: auto; border-radius: var(--r-sm); }
  .nav-logo img { height: 2.75rem; width: auto; transition: height var(--d-state) var(--ease-settle); }
  .nav.is-stuck .nav-logo img { height: 2.375rem; }
  /* Dark mode gets the all-white lockup, matching the one in the footer.
     brightness(0) crushes every colour in the artwork to black while keeping
     the alpha channel, then invert(1) lifts it to white — so the teal mark and
     the black wordmark end up the same white, which a plain invert() would not
     do (it left the sheep a rotated colour).

     Both triggers are needed: the media query for visitors following their OS,
     and the explicit attribute for the manual toggle on the legal pages —
     without the second, choosing dark on a light-mode machine left a black
     wordmark on a navy bar. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .nav-logo img { filter: brightness(0) invert(1); }
  }
  :root[data-theme='dark'] .nav-logo img { filter: brightness(0) invert(1); }

  .nav-links { display: none; align-items: center; gap: var(--s-6); }
  .nav-links a { color: var(--body); text-decoration: none; font-size: var(--t-sm); font-weight: 550; padding-block: var(--s-2); position: relative; }
  .nav-links a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
    background: var(--teal); border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--d-press) var(--ease-settle);
  }
  .nav-links a:hover { color: var(--heading); }
  .nav-links a:hover::after { transform: scaleX(1); }

  .nav-cta { display: none; }
  .nav-cta.btn { min-height: 2.5rem; padding: 0.5rem 1.125rem; font-size: var(--t-sm); }
  /* Hover empties the fill: dark-blue edge, teal label. --heading rather than a
     literal navy so the border stays visible in dark mode, where a navy edge on
     a navy bar would disappear. */
  .nav-cta.btn-primary:hover {
    background: transparent;
    color: var(--teal-text);
    border-color: var(--heading);
    box-shadow: none;
  }

  /* Dark mode reverses the Log-in button: it RESTS as the outline the light
     button only shows on hover (white edge, teal-pale label), and FILLS teal
     on hover with a white label. Two triggers, matching the palette's
     dark-mode pattern — the media query for OS-dark visitors, the attribute
     for the legal-page toggle. teal-ink, not bright --teal: white on #00707F
     is 5.8:1, white on #0096A9 only 3.5:1 and fails for the small label. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .nav-cta.btn-primary {
      background: transparent; color: var(--teal-text);
      border-color: #FFFFFF; box-shadow: none;
    }
    :root:not([data-theme='light']) .nav-cta.btn-primary:hover {
      background: var(--teal-ink); color: #FFFFFF; border-color: var(--teal-ink);
    }
  }
  :root[data-theme='dark'] .nav-cta.btn-primary {
    background: transparent; color: var(--teal-text);
    border-color: #FFFFFF; box-shadow: none;
  }
  :root[data-theme='dark'] .nav-cta.btn-primary:hover {
    background: var(--teal-ink); color: #FFFFFF; border-color: var(--teal-ink);
  }

  @media (min-width: 62rem) { .nav-links { display: flex; } .nav-cta { display: inline-flex; } }

  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: transparent; color: var(--heading);
  }
  .nav-toggle:hover { background: var(--teal-wash); border-color: var(--teal-line); }
  .nav-toggle svg { width: 1.25rem; height: 1.25rem; }
  .nav-sheet[open] .nav-toggle .i-open { display: none; }
  .nav-sheet:not([open]) .nav-toggle .i-close { display: none; }
  .nav-sheet > summary { list-style: none; }

  /* Explicit, because relying on the UA to hide non-summary <details> content
     is not enough for a position:fixed child — it stayed laid out AND in the
     tab order, so a keyboard user tabbed through five invisible menu links. */
  .nav-sheet:not([open]) .nav-sheet-panel { display: none; }

  .nav-sheet-panel {
    position: fixed; inset: var(--nav-h) 0 0;
    background: var(--bg); padding: var(--s-6) var(--gutter) var(--s-9);
    display: flex; flex-direction: column; gap: var(--s-2);
    overflow-y: auto; border-top: 1px solid var(--line-soft);
  }
  /* :not(.btn) matters — without it this rule (0-1-1) out-ranks .btn-primary
     (0-1-0) and repaints the menu's CTA navy-on-teal at 2.5:1. */
  .nav-sheet-panel a:not(.btn) {
    display: flex; align-items: center; min-height: 3.5rem;
    padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--line-soft);
    color: var(--heading); font-size: 1.125rem; font-weight: 600; text-decoration: none;
  }
  .nav-sheet-panel a:not(.btn):active { background: var(--teal-wash); }
  .nav-sheet-panel .btn { margin-top: var(--s-5); }
  @media (min-width: 62rem) { .nav-sheet { display: none; } }

  /* ==========================================================================
     HERO — banner video, left-aligned text

     The scrim is asymmetric on purpose: heaviest on the left, where the copy
     sits, and lightest on the right, where the sheep are. That keeps white
     text well clear of AA without flattening the footage into mud.
     ========================================================================== */
  .hero {
    position: relative;
    isolation: isolate;
    padding-block: var(--s-10) calc(var(--s-11) + 2.5rem);
    overflow: clip;
    text-align: left;
    background: var(--navy-deep);
  }
  .hero-media { position: absolute; inset: 0; z-index: -1; }
  .hero-media img,
  .hero-media video {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 62% 50%;
    display: block;
  }
  /* The video fades over the poster once it can actually play, so there is
     never a flash of empty black between the two. */
  .hero-media video {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 600ms var(--ease-settle);
  }
  .hero-media video.is-ready { opacity: 1; }

  .hero-scrim {
    position: absolute; inset: 0;
    background:
      linear-gradient(96deg,
        color-mix(in srgb, var(--navy-deep) 94%, transparent) 0%,
        color-mix(in srgb, var(--navy-deep) 88%, transparent) 34%,
        color-mix(in srgb, var(--navy-deep) 58%, transparent) 62%,
        color-mix(in srgb, var(--navy-deep) 30%, transparent) 100%),
      linear-gradient(to bottom,
        color-mix(in srgb, var(--navy-deep) 55%, transparent) 0%,
        transparent 26%,
        transparent 62%,
        color-mix(in srgb, var(--navy-deep) 72%, transparent) 100%);
  }

  /* No max-width here. .hero-inner IS the .wrap, and .wrap centres itself with
     margin-inline:auto — so constraining it narrowed the wrap and re-centred
     the whole column instead of left-aligning it. The measure lives on the
     children instead, which keeps the copy flush to the page's left edge. */
  .hero-inner {
    position: relative;
    display: grid;
    justify-items: start;
    gap: var(--s-5);
  }
  .hero-h1 { color: #FFFFFF; }
  /* nowrap only where there is room. Below 48rem the line legitimately needs
     to wrap, and forcing it would push the page into horizontal scroll. */
  @media (min-width: 48rem) { .h1-line { white-space: nowrap; } }
  .hero-h1 .accent { color: #7FD6E2; }   /* lightened teal — 8.9:1 on the scrim */
  .hero-lead {
    max-width: 52ch;
    font-size: var(--t-lead);
    color: color-mix(in srgb, #FFFFFF 88%, var(--navy-deep));
    margin-inline: 0;
  }
  .hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-start; }
  /* justify-items:center is what centres the note on the button rather than on
     the whole row. Gap has come down 0.75rem -> 0.5rem -> 0.375rem. */
  .cta-main { display: grid; justify-items: center; gap: 0.375rem; }
  /* 86%, not 74% — sampled against the brightest pixel the scrim lets through
     under the copy, 74% measured 4.18:1 and missed AA for small text. */
  .hero-note { font-size: var(--t-xs); color: color-mix(in srgb, #FFFFFF 86%, var(--navy-deep)); font-weight: 550; }

  /* Eyebrow on video needs its own ground — the ember pill tint is built from
     --bg, which is paper, and would glow on the footage. */
  .hero .eyebrow-o {
    background: color-mix(in srgb, var(--navy-deep) 34%, transparent);
    color: #FFFFFF;
    border: 1px solid color-mix(in srgb, #FFFFFF 52%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  /* The pill stays on the video at every width — dropping it to bare text
     would put small ember type straight onto moving footage. */
  @media (max-width: 47.99rem) {
    .hero .eyebrow-o {
      background: color-mix(in srgb, var(--navy-deep) 34%, transparent);
      color: #FFFFFF;
      padding: var(--s-2) var(--s-4);
      border-radius: var(--r-pill);
    }
    .hero .eyebrow-o::before { display: none; }
  }

  /* Buttons on footage: solid white reads at any brightness, and the ghost
     gets a white edge rather than the paper-derived --line. */
  /* Teal fill, inverting to white on hover. --teal-ink not --teal: white on
     #0096A9 is 3.5:1 and fails for a button label; on #00707F it is 5.8:1. */
  .btn-on-video { background: var(--ember); color: #FFFFFF; box-shadow: var(--sh-2); }
  .btn-on-video:hover { background: var(--teal-ink); color: #FFFFFF; box-shadow: var(--sh-3); }
  .btn-on-video:active { transform: translateY(1px); }
  .btn-ghost-video {
    background: color-mix(in srgb, var(--navy-deep) 34%, transparent);
    color: #FFFFFF;
    border-color: color-mix(in srgb, #FFFFFF 52%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .btn-ghost-video:hover { background: var(--teal-ink); color: #FFFFFF; border-color: var(--teal-ink); }
  .btn-ghost-video:active { transform: translateY(1px); }
  .hero :focus-visible { outline-color: #FFFFFF; }

  @media (max-width: 30rem) {
    .hero-actions { display: grid; width: 100%; }
    .hero-actions .btn { width: 100%; }
  }

  /* contain:paint, not just overflow:hidden. The track's transform is
     compositor-promoted while it animates, and a promoted layer can paint
     outside an inline-block's overflow clip — which showed the neighbouring
     words spilling above and below the line mid-rotation. Paint containment
     forces the clip to be honoured on the compositor too. */
  .rot {
    display: inline-block;
    overflow: hidden;
    contain: paint;
    height: 1.16em;
    max-width: 100%;          /* hard guard — the slot can never exceed the line */
    vertical-align: -0.26em;
  }
  /* flex-start, not the default stretch — otherwise every word is as wide as
     the widest and the script cannot measure them individually. */
  .rot-track { display: flex; flex-direction: column; align-items: flex-start; }
  .rot-track > span { display: block; height: 1.16em; line-height: 1.16em; color: var(--ember-light); white-space: nowrap; }

  /* When the rotator will never run — JS off, or lite from the pre-paint gate,
     which is where prefers-reduced-motion lands — the script never measures the
     slot, so it sits at its natural width: the widest word, "ecommerce". That
     left "Etsy" followed by a 250px hole before "books,". Dropping the words
     that will never be shown lets the slot shrink to the one that is. Only
     :not(.motion-ok) — under a runtime fps demotion the rotator is already
     running and still needs its stack. */
  html:not(.motion-ok) .rot-track > span:not(:first-child) { display: none; }

  /* ---- Flow strip ------------------------------------------------------
     Pulled up so it overlaps the bottom of the banner and the two read as
     one composition rather than a video with a card parked underneath. */
  /* Matches the features band (band-teal / --teal-wash) so the flow card and
     the "What it does" section read as one continuous ground with no seam. */
  .flow-band {
    background: var(--teal-wash);
    padding-bottom: var(--s-3);
  }
  .flow-wrap { margin-top: -3.25rem; position: relative; z-index: 2; }
  .flow {
    position: relative; width: 100%;
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--r-xl); box-shadow: var(--sh-3);
    padding: var(--s-5); display: grid; gap: var(--s-4); align-items: center;
  }
  @media (min-width: 62rem) {
    .flow { grid-template-columns: minmax(0,auto) minmax(0,1fr) minmax(0,auto); gap: var(--s-6); padding: var(--s-6) var(--s-7); }
  }
  /* A white plate under each partner mark. Etsy's and Intuit's brand
     guidelines both expect their logo on a light ground, and in dark mode the
     card itself is navy — so the plate keeps the marks correct in both modes
     and will still be right when the official SVGs replace the stand-ins. */
  .flow-end {
    min-width: 0;
    display: grid; place-items: center;
    background: #FFFFFF;
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-5);
  }

  /* Plain-text platform labels, set in Figtree in our own navy. Etsy's API
     Terms of Use let us name Etsy in text but not use their logo or anything
     resembling it — so no brand colours and no official SVGs here, ever. */
  .brand-mark {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-weight: 800; letter-spacing: -0.02em; line-height: 1;
    white-space: nowrap;
  }
  .brand-mark.is-etsy { font-size: 2rem; color: var(--navy); }
  .brand-mark.is-qbo  { font-size: 1.375rem; color: var(--navy); }

  /* The mask fades packets in and out at the lane ends. Without it they are
     sliced clean in half against the logos, which reads as a clipping bug
     rather than movement. */
  .flow-lane {
    position: relative; height: 3.5rem;
    container-type: inline-size; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
  .lane-rule {
    position: absolute; left: 0; right: 0; top: 50%; height: 2px; translate: 0 -50%;
    background: repeating-linear-gradient(90deg, var(--teal-line) 0 8px, transparent 8px 16px);
    opacity: .8;
  }
  .pkt {
    position: absolute; top: 50%; left: 0; translate: 0 -50%;
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-3); border-radius: var(--r-pill);
    background: var(--surface); border: 1px solid var(--teal-line);
    box-shadow: var(--sh-1);
    font-size: var(--t-xs); color: var(--body); white-space: nowrap;
  }
  .pkt b { color: var(--heading); }
  /* Resting state is ONE visible packet at the start of the lane. `~` and not
     :not(:first-child) — the lane's first child is .lane-rule, so first-child
     matched every packet and left the lane blank whenever motion did not run. */
  .pkt ~ .pkt { visibility: hidden; }

  .flow-gate {
    justify-self: center; display: grid; place-items: center;
    width: 4.5rem; height: 4.5rem; border-radius: 50%;
    background: var(--teal-veil); border: 2px solid var(--teal-line);
  }
  .flow-gate img { width: 2.25rem; height: 2.25rem; }
  @media (min-width: 62rem) {
    .flow-gate { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3; }
  }

  /* ==========================================================================
     FEATURES — eight, airy
     ========================================================================== */
  /* The flow strip above already carries generous space; trim the section's
     own top padding 15% so the "What it does" bubble sits a touch closer. */
  #features { padding-top: calc(var(--section-y) * 0.85); }

  /* ---- What it does -----------------------------------------------------
     A checklist, not a card grid: each item sits straight on the teal band
     with a white check badge, so the section reads as one list of promises
     rather than eight boxes. Four across keeps eight items in two clean rows. */
  .feat-grid { list-style: none; display: grid; gap: var(--s-6) var(--s-5); }
  @media (min-width: 40rem) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 68rem) { .feat-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-7) var(--s-5); } }

  /* Badge in its own column spanning both rows, so the description aligns to
     the title's left edge rather than tucking under the badge. */
  .feat {
    display: grid; grid-template-columns: auto 1fr;
    column-gap: var(--s-4); row-gap: var(--s-1);
    align-content: start;
  }
  .feat-check {
    grid-row: 1 / span 2; align-self: start;
    display: grid; place-items: center;
    width: 2.25rem; height: 2.25rem; border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--teal-line);
    color: var(--teal-text); box-shadow: var(--sh-1);
    transition: transform var(--d-press) var(--ease-settle),
                border-color var(--d-press) var(--ease-settle);
  }
  .feat-check svg { width: 1.125rem; height: 1.125rem; stroke-width: 3.5; }
  .feat:hover .feat-check {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--teal) 46%, var(--bg));
  }

  .feat h3 { grid-column: 2; font-size: var(--t-h3); margin-bottom: 0; }
  .feat p { grid-column: 2; color: var(--muted); font-size: var(--t-sm); line-height: 1.5; }

  /* ==========================================================================
     HOW IT WORKS
     ========================================================================== */
  .steps { position: relative; display: grid; gap: var(--s-6); }
  @media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }
  .step { position: relative; z-index: 1; text-align: center; }
  .step-n {
    position: relative; z-index: 1;
    /* Same hover lift as the .feat-check badges, on the bounce curve so the
       number overshoots slightly and settles. */
    transition: transform var(--d-state) var(--ease-bounce),
                box-shadow var(--d-press) var(--ease-settle);
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
    margin: 0 auto var(--s-4); border-radius: 50%;
    /* Deep gradient disc, palette-only. The numeral is now WHITE, which
       inverts the constraint: white wants a DARK field, so the disc drops into
       ember-deep territory — a genuinely richer lozenge than the navy-numeral
       version could carry. White stays legal throughout (4.8:1 light end,
       6.6:1 dark end). */
    background: linear-gradient(150deg,
                color-mix(in srgb, var(--ember) 35%, var(--ember-deep)) 0%,
                var(--ember-deep) 100%);
    color: #FFFFFF;
    font-weight: 750; font-size: var(--t-body);
    /* halo of page-bg so the dashed line stops cleanly at each node */
    box-shadow: 0 0 0 7px var(--bg);
  }
  /* Middle node keeps its teal identity, matched to the same white-numeral
     depth: teal-ink falling into a navy-tinted teal. White 5.8:1 → 6.6:1. */
  .step:nth-child(2) .step-n {
    background: linear-gradient(150deg, var(--teal-ink) 0%,
                color-mix(in srgb, var(--teal) 55%, var(--navy)) 100%);
    color: #FFFFFF;
  }
  .step:hover .step-n { transform: translateY(-4px) scale(1.06); }

  .step h3 { margin-bottom: var(--s-2); }
  .step p { color: var(--muted); font-size: var(--t-sm); margin-inline: auto; max-width: 32ch; }

  /* Dashed connector, same teal rule as the hero flow lane. Hidden on the
     single-column stack; only drawn once the steps sit in a row. It ends tuck
     behind nodes 1 and 3, so the visible dashes span exactly between them. */
  .steps-line {
    display: none;
    position: absolute; z-index: 0;
    top: 1.375rem; translate: 0 -50%;
    left: calc(100% / 6); right: calc(100% / 6);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--teal-line) 0 8px, transparent 8px 16px);
    opacity: .85;
  }
  @media (min-width: 48rem) { .steps-line { display: block; } }

  /* ==========================================================================
     AUTO-RECONCILE SPOTLIGHT
     ========================================================================== */
  .split { display: grid; gap: var(--s-7); align-items: center; }
  @media (min-width: 62rem) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-9); } }
  .split h2 { margin-bottom: var(--s-4); }
  .split .eyebrow { margin-bottom: var(--s-4); }
  .rec-note { margin-top: var(--s-5); font-size: var(--t-sm); color: var(--ember-light); font-weight: 650; }

  /* Product screenshot on the dark band. The PNG carries its own transparent
     backdrop and soft shadow, so it just sits on the gradient at full width. */
  .rec-shot img { width: 100%; height: auto; }

  /* ==========================================================================
     WHO IT'S FOR
     ========================================================================== */
  .who-grid { display: grid; gap: var(--s-5); }
  @media (min-width: 48rem) { .who-grid { grid-template-columns: repeat(3, 1fr); } }
  .who-photo {
    border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 2;
    margin-bottom: var(--s-4); background: var(--teal-veil); box-shadow: var(--sh-1);
  }
  .who-photo img { width: 100%; height: 100%; object-fit: cover; }
  .who h3 { margin-bottom: var(--s-2); }
  .who p { color: var(--muted); font-size: var(--t-sm); }

  /* Partner callout — the pricing "claim" box, adapted for this light section:
     teal-tinted panel, icon, full width of the image row. */
  .who-partner { margin-top: var(--s-7); }
  .claim-light {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-5) var(--s-6); border-radius: var(--r-lg);
    background: var(--teal-wash); border: 1px solid var(--teal-line);
    color: var(--body); font-size: var(--t-body); line-height: 1.5; max-width: none;
  }
  .claim-light svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--teal-text); }
  /* Solid, full-bleed brand icons (globe, scale, maple, calculator) read
     optically smaller than the stroke set at the same box, because they carry
     no surrounding whitespace — so they get their own, larger size. */
  .claim .ic-solid, .claim-light .ic-solid { width: 2.5rem; height: 2.5rem; }
  /* The maple leaf is the only icon in the comparison claim. Sized to the
     height of the two text lines beside it: 2 lines × var(--t-body) at the
     panel's 1.5 line-height ≈ 3.2rem. */
  .vs-claim .ic-solid { width: 3.2rem; height: 3.2rem; }
  .claim-light b { color: var(--heading); font-weight: 750; }
  .claim-light a { color: var(--teal-text); font-weight: 700; text-underline-offset: 2px; }
  .claim-light a:hover { text-decoration-thickness: 2px; }
  @media (max-width: 34rem) {
    .claim-light { flex-direction: column; align-items: flex-start; }
  }

  /* ==========================================================================
     PRICING
     ========================================================================== */
  /* Four cards, at every width — no table view to swap to. Each card is the
     same object as the feature cards: soft surface, hairline, one-step lift on
     hover, so the pricing block reads as part of the same page. */
  .pcards { display: grid; gap: var(--s-5); align-items: stretch; }
  @media (min-width: 34rem) { .pcards { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 66rem) { .pcards { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }

  .pcard {
    position: relative; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--r-lg); padding: var(--s-6) var(--s-5);
    box-shadow: var(--sh-1);
    transition: transform var(--d-press) var(--ease-settle),
                box-shadow var(--d-press) var(--ease-settle),
                border-color var(--d-press) var(--ease-settle);
  }
  .pcard:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--teal-line); }
  /* Same ember sweep the feature cards use, so the two grids behave alike. */
  .pcard::after {
    content: ''; position: absolute; left: var(--s-5); right: var(--s-5); top: 0; height: 2px;
    background: var(--grad-ember); border-radius: 0 0 2px 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--d-state) var(--ease-settle);
  }
  .pcard:hover::after { transform: scaleX(1); }
  /* The hover sweep runs the full card and passes BEHIND the "Most popular"
     flag — z-index keeps the flag on top of the moving line. */
  .pcard::after { z-index: 1; }
  .flag { z-index: 2; }
  .pcard.is-featured { border-color: var(--ember); box-shadow: var(--sh-2); }
  .pcard.is-featured:hover { border-color: var(--ember); box-shadow: var(--sh-3); }

  .pcard h3 { font-size: var(--t-h3); margin-bottom: var(--s-4); }

  .pcard-p { display: flex; align-items: baseline; gap: 2px; }
  .pcard-p b { font-size: 2.375rem; font-weight: 700; color: var(--heading); letter-spacing: -0.03em; line-height: 1; }
  .pcard-p i { font-size: var(--t-sm); font-style: normal; color: var(--muted); font-weight: 600; }
  .pcard-p .from { font-size: var(--t-sm); color: var(--muted); font-weight: 600; margin-right: 3px; }
  /* min-height holds the row steady when the billing line swaps to the one-word
     "billed monthly" — without it every card shifts up as you toggle. */
  .pcard-bill { font-size: var(--t-xs); color: var(--muted); margin-top: var(--s-2); min-height: 2.4em; }

  .pcard-spec {
    display: grid; gap: var(--s-2);
    margin: var(--s-4) 0 var(--s-5);
    padding-top: var(--s-4); border-top: 1px solid var(--line-soft);
    font-size: var(--t-sm); color: var(--muted);
  }
  .pcard-spec b { color: var(--heading); font-weight: 650; }

  /* auto pushes every button to the bottom, so they line up across cards of
     different heights instead of floating under their own content. */
  .pcard .btn { margin-top: auto; width: 100%; }

  /* Tier buttons (scoped to the cards, so the hero buttons are untouched).
     Ghost rests as a navy outline with teal text and fills teal on hover;
     the featured primary does the reverse — teal fill that inverts on hover. */
  .pcard .btn-ghost { border-color: var(--navy); color: var(--teal-text); }
  .pcard .btn-ghost:hover { background: var(--teal-ink); border-color: var(--teal-ink); color: #FFFFFF; }
  .pcard .btn-primary:hover {
    background: var(--surface); border-color: var(--navy); color: var(--teal-text);
    box-shadow: var(--sh-2);
  }

  .flag {
    position: absolute; top: 0; right: var(--s-5); transform: translateY(-50%);
    display: inline-block; padding: 3px var(--s-3); border-radius: var(--r-pill);
    background: var(--ember); color: var(--navy);
    font-size: 0.625rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase;
  }

  .pnotes { display: grid; gap: var(--s-3); max-width: 46rem; margin: var(--s-7) auto 0; }
  .pnotes li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-sm); color: var(--muted); }
  .pnotes svg { width: 1rem; height: 1rem; color: var(--teal-text); flex: none; margin-top: 0.28rem; }
  .pnotes li:nth-child(2) svg { color: var(--ember-text); }

  /* ==========================================================================
     FAQ
     ========================================================================== */
  /* Only the two words "customer support" carry the emphasis: they alone are
     teal and underlined, while "Contact our … team" inherits the paragraph's
     default muted colour so the link reads as one phrase with a highlight. */
  .faq-contact { color: inherit; text-decoration: none; }
  .faq-contact span { color: var(--teal-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .faq-contact:hover { color: inherit; }
  .faq-contact:hover span { color: var(--heading); }

  .faq { max-width: 46rem; margin-inline: auto; display: grid; gap: var(--s-2); }
  .qa { border-bottom: 1px solid var(--line-soft); }
  .qa summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-5) var(--s-2);
    font-weight: 650; color: var(--heading); font-size: var(--t-body); min-height: 3.5rem;
  }
  /* Hover turns the whole row ember, icon included. */
  .qa summary:hover { color: var(--ember-text); }
  .qa summary:hover .qa-plus { color: var(--ember-text); }
  .qa-plus { flex: none; width: 1.25rem; height: 1.25rem; color: var(--teal-text); transition: transform var(--d-state) var(--ease-settle), color var(--d-press) var(--ease-settle); }
  .qa[open] .qa-plus { transform: rotate(45deg); color: var(--ember-text); }
  /* 0fr → 1fr animates a natural height with no JS measuring. */
  .qa-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-state) var(--ease-settle); }
  .qa[open] .qa-body { grid-template-rows: 1fr; }
  .qa-body > div { overflow: hidden; }
  /* max-width:none so the answer runs the full width of the FAQ column rather
     than stopping at the default measure cap. */
  .qa-body p { max-width: none; color: var(--muted); font-size: var(--t-sm); padding: 0 var(--s-2) var(--s-5); }

  /* ==========================================================================
     CLOSING CTA + FOOTER
     ========================================================================== */
  .cta-band {
    background: radial-gradient(88% 130% at 50% -10%, color-mix(in srgb, var(--teal) 30%, var(--navy)) 0%, transparent 68%), var(--navy);
  }
  .close-cta { text-align: center; max-width: 42rem; margin-inline: auto; }
  .close-logo { width: auto; height: 10rem; margin: 0 auto var(--s-5); }
  .close-cta h2 { margin-bottom: var(--s-4); }
  /* The two accent words carry the exact hero-headline tints — the rotating
     word's light orange and the "balanced." light teal — so the closing line
     rhymes with the opening one. Beats .band-navy h2's blanket white. */
  .close-cta h2 .cta-o { color: var(--ember-light); }   /* #E9A472 — hero orange */
  .close-cta h2 .cta-t { color: #7FD6E2; }              /* hero "balanced." teal */
  /* CTA button: ember fill, white label, inverting to a teal fill on hover —
     the same key press the hero's primary button uses. Scoped to .cta-band so
     the shared .btn-on-navy elsewhere is untouched. */
  .cta-band .btn-on-navy { background: var(--ember); color: #FFFFFF; border-color: transparent; }
  .cta-band .btn-on-navy:hover { background: var(--teal-ink); color: #FFFFFF; border-color: transparent; }
  .close-cta p { color: color-mix(in srgb, #FFFFFF 78%, var(--navy)); margin-inline: auto; margin-bottom: var(--s-6); }
  /* Tucked right under the button, matching the hero note's 0.375rem gap. */
  .close-note { font-size: var(--t-xs); color: color-mix(in srgb, #FFFFFF 66%, var(--navy)); margin-top: 0.375rem; }

  /* Deep navy, flat, with an ember hairline. The band above is a gradient;
     without the change of value and that rule the two merge into one slab. */
  .foot {
    background: var(--navy-deep);
    color: color-mix(in srgb, #FFFFFF 74%, var(--navy-deep));
    padding-block: var(--s-8) var(--s-5);
    border-top: 3px solid var(--ember);
  }
  .foot-grid { display: grid; gap: var(--s-7); }
  @media (min-width: 48rem) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-6); } }
  /* Horizontal lockup — the wordmark sits beside the mark, so it needs far
     less height than the stacked version to read at the same type size. */
  .foot-logo img { height: 2rem; width: auto; }
  .foot-tag { font-size: var(--t-sm); margin-top: var(--s-4); max-width: 26ch; color: color-mix(in srgb, #FFFFFF 72%, var(--navy-deep)); }
  .foot h3 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: #FFFFFF; margin-bottom: var(--s-4); font-weight: 700; }
  /* gap:0 — the per-link padding-block below already provides the breathing
     room and the 24px target height, so the list rows sit tight without it. */
  .foot ul { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
  /* inline-block + padding takes these from 18px to 24px tall, clearing WCAG
     2.2 target size outright rather than relying on the spacing exception. */
  /* line-height 1.2 + 3px padding = a flat 24px per link — the tightest the
     rows can go while still meeting the WCAG 2.2 tap-target minimum. */
  .foot a { color: color-mix(in srgb, #FFFFFF 80%, var(--navy-deep)); text-decoration: none; font-size: var(--t-sm); line-height: 1.2; display: inline-block; padding-block: 3px; }
  .foot a:hover { color: #FFFFFF; text-decoration: underline; }
  .foot-legal { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid color-mix(in srgb, #FFFFFF 16%, transparent); display: grid; gap: var(--s-4); font-size: var(--t-xs); line-height: 1.6; }
  .foot-legal p { max-width: none; color: color-mix(in srgb, #FFFFFF 68%, var(--navy-deep)); }
  /* Desktop: the two notices sit on one row — the long Etsy/Intuit disclaimer
     to the left, capped so it wraps to two lines, and the copyright pushed to
     the right edge. Below this width they fall back to the stacked grid. */
  @media (min-width: 62rem) {
    /* align-items:start so the copyright's baseline lines up with the FIRST
       line of the disclaimer, not its last. */
    .foot-legal { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-8); align-items: start; }
    .foot-legal > p { max-width: 58rem; }
    .foot-bottom { justify-self: end; text-align: right; }
    .foot-bottom p { text-align: right; }
  }

  /* ==========================================================================
     SUBPAGES — legal documents and the 404

     Deliberately plain: the landing page does the selling, these do the
     reading. They borrow the nav, the footer and every token, and add only a
     navy masthead plus one measured prose column. No reveal animation, so
     there is nothing to wait for and nothing to degrade.
     ========================================================================== */
  /* ---- Simplified nav for the legal pages ------------------------------
     Features / How it works / Pricing / FAQ are landing-page anchors and mean
     nothing here, so they are replaced by one "Back to home" link. Both it and
     the sign-in button stay visible at every width, which is why the hamburger
     is dropped from these pages entirely rather than hidden. */
  .nav-back {
    display: inline-flex; align-items: center; gap: var(--s-2);
    color: var(--body); text-decoration: none;
    font-size: var(--t-sm); font-weight: 550;
    padding: var(--s-2) 0; border-radius: var(--r-sm);
  }
  .nav-back:hover { color: var(--heading); }
  .nav-back svg { width: 1rem; height: 1rem; flex: none; }
  /* The arrow, not the label, carries the motion — a label that slides is
     harder to hit. */
  .nav-back svg { transition: transform var(--d-press) var(--ease-settle); }
  .nav-back:hover svg { transform: translateX(-2px); }
  .nav-simple .nav-cta { display: inline-flex; }

  /* ---- Theme toggle ----------------------------------------------------
     The [data-theme] hooks were built into the token layer from the start;
     this is the control that finally uses them. Both glyphs ship in the
     markup and CSS shows one, so switching costs no request and no reflow. */
  .theme-toggle {
    display: inline-grid; place-items: center; flex: none;
    width: 2.5rem; height: 2.5rem;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: transparent; color: var(--heading); cursor: pointer;
    transition: background-color var(--d-press) var(--ease-settle),
                border-color var(--d-press) var(--ease-settle);
  }
  .theme-toggle:hover { background: var(--teal-wash); border-color: var(--teal-line); }
  .theme-toggle svg { width: 1.125rem; height: 1.125rem; }
  /* Default (no data-theme yet, or JS off) shows the moon: the page is light,
     so the offer is "go dark". */
  .theme-toggle .i-sun { display: none; }
  :root[data-theme='dark'] .theme-toggle .i-moon { display: none; }
  :root[data-theme='dark'] .theme-toggle .i-sun  { display: block; }

  /* Pairs with .band-navy on the element, so the eyebrow pill, the heading
     white and the focus-ring colour all come from rules that already exist. */
  .page-head { padding-block: var(--s-9) var(--s-8); text-align: center; }
  .page-head h1 { color: #FFFFFF; font-size: var(--t-h2); line-height: var(--lh-heading); letter-spacing: -0.02em; }
  .page-head .eyebrow { margin-inline: auto; margin-bottom: var(--s-4); }
  .page-head p { margin: var(--s-4) auto 0; color: color-mix(in srgb, #FFFFFF 76%, var(--navy)); font-size: var(--t-sm); }

  /* 68ch, wider than the landing page's 58ch measure: legal prose is read in
     long passes rather than scanned, and a narrower column doubles its height. */
  .prose { max-width: 68ch; margin-inline: auto; padding-block: var(--s-9); }
  .prose > * + * { margin-top: var(--s-5); }
  .prose h2 {
    font-size: var(--t-h3-lg); margin-top: var(--s-8);
    padding-bottom: var(--s-3); border-bottom: 1px solid var(--line);
  }
  .prose h2:first-child { margin-top: 0; }
  .prose h3 { font-size: var(--t-h3); margin-top: var(--s-6); }
  /* max-width:none is load-bearing. The base layer caps every <p> at the 58ch
     reading measure, which inside this 68ch column left the text wrapping a
     full 10ch short of the heading rules above it. Legal prose is set to the
     column, so paragraphs and list items run the same width as the rules. */
  .prose p, .prose li { color: var(--body); max-width: none; }
  .prose ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: var(--s-2); }
  .prose li::marker { color: var(--teal-text); }
  .prose a { font-weight: 600; }
  /* Effective-date line. */
  .prose .stamp { font-size: var(--t-sm); color: var(--muted); }
  /* Subprocessor table. Wrapped in .table-wrap so a narrow phone scrolls the
     table itself rather than the whole page. */
  .prose .table-wrap { overflow-x: auto; }
  .prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 30rem; }
  .prose th, .prose td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
  .prose th { color: var(--heading); font-weight: 700; border-bottom: 2px solid var(--line); }
  .prose td { color: var(--body); }
  .prose tr:last-child td { border-bottom: 0; }
  /* The all-caps liability paragraphs read as a wall; a touch more leading and
     a hair less size keeps them scannable without changing a word. */
  .prose .legalese { font-size: var(--t-sm); line-height: 1.7; }
  /* Deep-linked headings (e.g. /privacy/#security) need to clear the sticky nav. */
  .prose h2[id] { scroll-margin-top: 6rem; }

  /* ---- 404 -------------------------------------------------------------- */
  .nf { text-align: center; max-width: 34rem; margin-inline: auto; padding-block: var(--s-10); }
  .nf-code {
    display: block; font-size: clamp(4rem, 2rem + 9vw, 7rem); font-weight: 800;
    line-height: 1; letter-spacing: -0.04em; color: var(--teal-text);
  }
  .nf h1 { font-size: var(--t-h2); margin-top: var(--s-4); }
  .nf p { color: var(--muted); margin: var(--s-4) auto 0; }
  .nf-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-7); }
  .nf-links { margin-top: var(--s-9); padding-top: var(--s-5); border-top: 1px solid var(--line); }
  .nf-links h2 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
  .nf-links ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); justify-content: center; margin-top: var(--s-4); }
}

@layer motion {
  /* ==========================================================================
     THE ANTI-AOS CONTRACT

     Every rule that hides something is nested under html.motion-ok, a class
     the pre-paint script adds. With JS off, blocked, or broken, none of these
     apply and the page renders complete — never the blank-page-waiting-for-a
     -script failure that fade-up libraries produce.

     Entrance movement is capped at 10px. 40px fade-ups are the tell.
     ========================================================================== */
  html.motion-ok .reveal { opacity: 0; transform: translateY(10px); }
  html.motion-ok .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity var(--d-enter) var(--ease-settle), transform var(--d-enter) var(--ease-settle);
  }

  /* ---- What it does: bounce-in ----------------------------------------
     Each item springs up from below with a slight overshoot and settles,
     cascading across the grid. The travel is bigger than the standard reveal
     (24px vs 10px) and adds a scale, because these are the section's only
     visual — but it is still one gesture, not a fade-up library.

     The stagger comes from nth-child delays, not from JS: every item in a row
     crosses the observer threshold at the same moment, so the delay is what
     turns a simultaneous reveal into a cascade. */
  html.motion-ok .feat-grid .feat { opacity: 0; transform: translateY(24px) scale(.96); }
  html.motion-ok .feat-grid .feat.is-in {
    opacity: 1; transform: none;
    transition: opacity 460ms var(--ease-settle),
                transform 620ms var(--ease-bounce);
  }
  /* "Who it's for" cards use the same entrance as the feature checklist, so
     the two grids read as one motion language. Three items, same 70ms beat. */
  html.motion-ok .who-grid .who { opacity: 0; transform: translateY(24px) scale(.96); }
  html.motion-ok .who-grid .who.is-in {
    opacity: 1; transform: none;
    transition: opacity 460ms var(--ease-settle),
                transform 620ms var(--ease-bounce);
  }
  html.motion-ok .who-grid .who:nth-child(1).is-in { transition-delay: 0ms; }
  html.motion-ok .who-grid .who:nth-child(2).is-in { transition-delay: 70ms; }
  html.motion-ok .who-grid .who:nth-child(3).is-in { transition-delay: 140ms; }

  /* The reconcile screenshot and every FAQ question share the "Who it's for"
     entrance — the bigger 24px travel + scale on the overshoot curve, not the
     standard 10px reveal. Both carry .reveal, and .rec-shot / .qa match its
     specificity, so these rules must sit AFTER the base .reveal to win on
     source order. The FAQ items are stacked and individually observed, so the
     stagger only shows when several sit on screen at once; that is enough to
     keep them from snapping in as one block. */
  html.motion-ok .rec-shot,
  html.motion-ok .faq .qa { opacity: 0; transform: translateY(24px) scale(.96); }
  html.motion-ok .rec-shot.is-in,
  html.motion-ok .faq .qa.is-in {
    opacity: 1; transform: none;
    transition: opacity 460ms var(--ease-settle),
                transform 620ms var(--ease-bounce);
  }
  html.motion-ok .faq .qa:nth-child(1).is-in { transition-delay: 0ms; }
  html.motion-ok .faq .qa:nth-child(2).is-in { transition-delay: 70ms; }
  html.motion-ok .faq .qa:nth-child(3).is-in { transition-delay: 140ms; }
  html.motion-ok .faq .qa:nth-child(4).is-in { transition-delay: 210ms; }
  html.motion-ok .faq .qa:nth-child(5).is-in { transition-delay: 280ms; }
  html.motion-ok .faq .qa:nth-child(6).is-in { transition-delay: 350ms; }
  html.motion-ok .faq .qa:nth-child(7).is-in { transition-delay: 420ms; }

  /* Pricing cards and comparison cards use the same bounce-in as the
     "Who it's for" images — larger travel + scale on the overshoot curve,
     staggered across the row — rather than the standard 10px reveal. */
  html.motion-ok .pcards .pcard,
  html.motion-ok .versus .vs-card { opacity: 0; transform: translateY(24px) scale(.96); }
  html.motion-ok .pcards .pcard.is-in,
  html.motion-ok .versus .vs-card.is-in {
    opacity: 1; transform: none;
    transition: opacity 460ms var(--ease-settle),
                transform 620ms var(--ease-bounce);
  }
  html.motion-ok .pcards .pcard:nth-child(1).is-in { transition-delay: 0ms; }
  html.motion-ok .pcards .pcard:nth-child(2).is-in { transition-delay: 70ms; }
  html.motion-ok .pcards .pcard:nth-child(3).is-in { transition-delay: 140ms; }
  html.motion-ok .pcards .pcard:nth-child(4).is-in { transition-delay: 210ms; }
  html.motion-ok .versus .vs-card:nth-child(1).is-in { transition-delay: 0ms; }
  html.motion-ok .versus .vs-card:nth-child(2).is-in { transition-delay: 70ms; }

  html.motion-ok .feat-grid .feat:nth-child(1).is-in  { transition-delay: 0ms; }
  html.motion-ok .feat-grid .feat:nth-child(2).is-in  { transition-delay: 70ms; }
  html.motion-ok .feat-grid .feat:nth-child(3).is-in  { transition-delay: 140ms; }
  html.motion-ok .feat-grid .feat:nth-child(4).is-in  { transition-delay: 210ms; }
  html.motion-ok .feat-grid .feat:nth-child(5).is-in  { transition-delay: 280ms; }
  html.motion-ok .feat-grid .feat:nth-child(6).is-in  { transition-delay: 350ms; }
  html.motion-ok .feat-grid .feat:nth-child(7).is-in  { transition-delay: 420ms; }
  html.motion-ok .feat-grid .feat:nth-child(8).is-in  { transition-delay: 490ms; }

  /* ---- Rotating headline word -----------------------------------------
     Base state is track position 0, so no-JS reads "Your Etsy books". */
  html.motion-ok .rot-track { transition: transform 560ms var(--ease-settle); }
  /* The slot is sized to the widest word until the script measures each one.
     Without this the shorter words float in a gap the width of "ecommerce". */
  html.motion-ok .rot { transition: width 560ms var(--ease-settle); }

  /* ---- Flow lane -------------------------------------------------------
     Packets travel exactly the lane's width using container query units, so
     there is no JS measurement and nothing that triggers layout. Four
     packets share one 13s cycle on staggered delays, which keeps one or two
     in flight at a time — a calm drift, not a marquee. */
  @supports (width: 100cqw) {
    /* opacity:0 lives here, not on .pkt — a packet must be invisible only
       while it is waiting for its staggered turn, which only happens when
       the animation is actually running. */
    html.motion-ok .flow-lane .pkt { opacity: 0; visibility: visible; animation: drift 13s linear infinite; }
    html.motion-ok .pkt:nth-child(2) { animation-delay: 0s; }
    html.motion-ok .pkt:nth-child(3) { animation-delay: 3.25s; }
    html.motion-ok .pkt:nth-child(4) { animation-delay: 6.5s; }
    html.motion-ok .pkt:nth-child(5) { animation-delay: 9.75s; }
  }
  @keyframes drift {
    0%   { translate: -6rem -50%; opacity: 0; }
    12%  { opacity: 1; }
    46%  { opacity: 1; }
    54%  { opacity: .25; }          /* passing behind the gate */
    62%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { translate: 100cqw -50%; opacity: 0; }
  }
  .flow:hover .pkt { animation-play-state: paused; }

  /* ---- Steps connector ------------------------------------------------
     The dashes march from step 1 toward step 3. One 16px period per loop, so
     the shift is seamless. Static (visible) with no JS or in lite. */
  html.motion-ok .steps-line { animation: step-march 1s linear infinite; }
  @keyframes step-march { to { background-position: 16px 0; } }

  html.motion-ok .flow-gate { transition: box-shadow var(--d-state) var(--ease-settle); }

  /* ---- Lite: the single restore point ---------------------------------
     Reached three ways — the head script's capability check, the runtime
     frame-rate backstop, or the watchdog when main.js never initialises.
     The backstop can fire while html.motion-ok is still set, so every rule
     here must out-rank the arming rules above. The !important flags are
     load-bearing, not laziness. */
  html.lite .reveal { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0ms !important; }
  html.lite .rot-track { transition: none !important; transform: none !important; }
  html.lite .pkt { animation: none !important; opacity: 1 !important; }
  html.lite .steps-line { animation: none !important; }
  html.lite .sym { display: none; }
  html.lite .pkt ~ .pkt { visibility: hidden !important; }
  html.lite .hero-wool, html.lite .band-wool { display: none; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .rot-track { transform: none !important; }
    .pkt { animation: none !important; opacity: 1 !important; }
    .pkt ~ .pkt { visibility: hidden !important; }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .center { text-align: center; margin-inline: auto; }
  .no-wrap { white-space: nowrap; }
}

/* ==========================================================================
   PRICING v3 — one price per tier, monthly/annual toggle
   No colour or font tokens are introduced here; everything reuses the
   existing palette.
   ========================================================================== */
@layer components {

  /* ---- Billing switch --------------------------------------------------
     Row, not stack: the promo sits beside the control it belongs to and points
     back at it. On a phone it drops under the toggle rather than squeezing. */
  .bill-switch {
    display: grid; justify-items: center; gap: var(--s-3);
    margin-bottom: var(--s-7);
  }

  .toggle {
    display: inline-flex; align-items: center; gap: 0;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 4px;
    box-shadow: var(--sh-1); position: relative;
  }
  .toggle input { position: absolute; opacity: 0; pointer-events: none; }
  .toggle label {
    position: relative; z-index: 1;
    padding: var(--s-2) var(--s-6); border-radius: var(--r-pill);
    font-size: var(--t-sm); font-weight: 650; color: var(--muted);
    cursor: pointer; min-height: 2.5rem; display: inline-flex; align-items: center;
    white-space: nowrap;
    transition: color var(--d-state) var(--ease-settle);
  }
  /* The checked label paints its own fill, so with JS off the selected period
     is still obvious. Once the script has measured and placed the sliding
     pill it adds .has-pill and hands the fill over — without this the no-JS
     state would be white text on white. */
  .toggle input:checked + label { color: var(--btn-fg); background: var(--btn-bg); }
  .toggle.has-pill input:checked + label { background: transparent; }
  .toggle input:focus-visible + label { outline: 2px solid var(--teal-text); outline-offset: 2px; }

  .toggle-pill { display: none; }
  .toggle.has-pill .toggle-pill {
    display: block; position: absolute; z-index: 0;
    top: 4px; bottom: 4px; left: 0;
    border-radius: var(--r-pill); background: var(--btn-bg);
    transition: transform var(--d-state) var(--ease-settle), width var(--d-state) var(--ease-settle);
  }

  .save-flag {
    position: relative;
    padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
    background: var(--ember); color: var(--navy);
    font-size: var(--t-xs); font-weight: 750; letter-spacing: 0.02em;
    white-space: nowrap;
  }
  /* The notch points up at the control it belongs to. */
  .save-flag::before {
    content: ''; position: absolute; left: 50%; top: -4px; translate: -50% 0;
    width: 10px; height: 10px; background: var(--ember); rotate: 45deg;
    border-radius: 2px;
  }
  .save-flag[hidden] { display: none; }

  /* ---- Included in every plan — sits straight on the dark band ---------- */
  .pincludes { margin-top: var(--s-9); }
  .pincludes h3 {
    text-align: center; color: #FFFFFF; font-size: var(--t-h3-lg);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid color-mix(in srgb, #FFFFFF 16%, transparent);
  }
  .pincludes .accent-l { color: var(--ember-light); }
  .pincludes ul { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-5); }
  @media (min-width: 34rem) { .pincludes ul { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } }
  @media (min-width: 60rem) { .pincludes ul { grid-template-columns: repeat(3, 1fr); } }
  .pincludes li {
    display: flex; align-items: flex-start; gap: var(--s-3);
    font-size: var(--t-sm); color: var(--ink-light); line-height: 1.45;
  }
  /* An <svg> with no intrinsic size falls back to 300x150 — eleven of those
     turned this list into a 2000px column. */
  .pincludes li svg {
    width: 1.125rem; height: 1.125rem; flex: none;
    margin-top: 0.15em; color: var(--teal-light);
    stroke-width: 4;   /* chunkier tick than the symbol's baked-in 3 */
  }

  /* ---- The two reassurance claims ---------------------------------------
     One treatment, side by side: the tax claim is the shorter of the pair, so
     stretching them to a shared height is what makes them read as a set. */
  .claims { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
  @media (min-width: 48rem) { .claims { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }

  .claim {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    /* --r-lg, not the pill radius the single claim used to carry: once the
       longer one wraps to three lines a pill reads as a lozenge. */
    border-radius: var(--r-lg);
    background: color-mix(in srgb, #FFFFFF 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--teal-light) 40%, transparent);
    color: #FFFFFF; font-size: var(--t-sm); line-height: 1.5;
    max-width: none;
  }
  .claim svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--teal-light); }
  .claim b { font-weight: 750; }

  /* ---- Light islands on the dark band ---------------------------------
     #pricing is a dark section now, but the cards, the founding strip, the
     overage note and the add-on tiles are all light objects sitting on it.
     Rather than overriding a colour per element, each island re-declares the
     semantic roles locally: everything inside then resolves exactly as it
     would on a paper background, in BOTH schemes, because the dark ground is
     fixed and does not flip. The brand constants are already scheme-neutral,
     so none of them are touched. */
  .pcard, .founding {
    --surface:    #FFFFFF;
    --heading:    var(--navy);
    --body:       #3A3A3A;
    /* Islands re-declare the roles locally — the dark band would otherwise
       hand a pricing card the dark-mode muted. */
    --muted:      #646463;
    --line:       #E4E6E5;
    --line-soft:  var(--line);
    --teal-text:  var(--teal-ink);
    --ember-text: var(--ember);      /* bright ember — see the :root note */
    --teal-wash:  color-mix(in srgb, var(--teal) 7%,  #FBFAF8);
    --teal-veil:  color-mix(in srgb, var(--teal) 13%, #FBFAF8);
    --teal-line:  color-mix(in srgb, var(--teal) 26%, #FBFAF8);
    --ember-wash: color-mix(in srgb, var(--ember) 10%, #FBFAF8);
    --ember-veil: color-mix(in srgb, var(--ember) 18%, #FBFAF8);
    --btn-bg:     var(--teal-ink);
    --btn-fg:     #FFFFFF;
    color: var(--body);
  }
  /* .band-navy paints every h3/b/strong white for the copy that sits directly
     on the gradient; inside an island that would be white on white. */
  .band-navy :is(.pcard, .founding) :is(h3, b, strong) { color: var(--heading); }

  /* ---- Founding member strip ------------------------------------------
     A <details>, so the offer is one line and the terms are one click away
     without any script. Same disclosure primitive as the FAQ. Full width,
     matching the card grid it sits above. */
  .founding {
    margin: 0 0 var(--s-6);
    border: 1.5px solid var(--ember); border-radius: var(--r-lg);
    background: linear-gradient(105deg, var(--ember-veil) 0%, var(--ember-wash) 46%, var(--teal-wash) 100%);
    /* A warm halo on the dark band — this is the promo, so it earns a glow. */
    box-shadow: 0 10px 34px color-mix(in srgb, var(--ember) 30%, transparent);
    overflow: hidden;
  }
  .founding summary {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    font-size: var(--t-sm); color: var(--body);
  }
  .founding summary::-webkit-details-marker { display: none; }
  .founding-line { flex: 1 1 auto; }
  /* BACKTRACK-EMBER (2 of 2) — the Founding Member label, 5.75:1 on its warm
     panel. Same reasoning as .sec-head .accent-o: --ember-deep directly, not
     --ember-text, so the chevron beside it still takes the brighter ember. */
  .founding .founding-line b { color: var(--ember-deep); font-weight: 800; }

  /* Sheep badge, left of the offer line. Two glyphs stacked in the same slot;
     the plain sheep shows at rest and the smiling one on hover/focus of the
     whole strip — a small reward for reaching for the promo. */
  .founding-ic {
    flex: none; position: relative;
    width: 2.25rem; height: 2.25rem;
    color: var(--ember);
  }
  .founding-ic svg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    transition: opacity var(--d-state) var(--ease-settle);
  }
  /* The plain sheep never moves or fades. Cross-fading the two dipped the
     composite opacity through the midpoint and read as a flicker; because the
     smiling sheep is the same body with a mouth added, stacking it on top and
     fading only it in means the silhouette stays solid the whole way. */
  .founding-ic .ic-sheep-smile { opacity: 0; }
  .founding:hover .founding-ic .ic-sheep-smile,
  .founding:focus-within .founding-ic .ic-sheep-smile { opacity: 1; }
  .founding .seats {
    flex: none; padding: var(--s-1) var(--s-4); border-radius: var(--r-pill);
    background: var(--ember); border: 0; color: var(--navy);
    font-size: var(--t-xs); font-weight: 750; letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--ember) 45%, transparent);
  }
  /* Chevron drawn in CSS — one less sprite lookup for an 8px decoration. */
  .founding-chev {
    flex: none; width: 8px; height: 8px;
    border-right: 2px solid var(--ember-text); border-bottom: 2px solid var(--ember-text);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--d-state) var(--ease-settle);
  }
  .founding[open] .founding-chev { transform: rotate(225deg) translate(-2px, -2px); }

  /* Text left, action right — the same reading order as the summary line
     above it, so the eye lands in the same place twice. */
  .founding-more {
    display: flex; align-items: center; gap: var(--s-6);
    padding: var(--s-4) var(--s-5) var(--s-5);
    border-top: 1px solid color-mix(in srgb, var(--ember) 24%, transparent);
  }
  .founding-more p { flex: 1 1 auto; max-width: none; font-size: var(--t-sm); color: var(--body); }
  .founding-more .btn { flex: none; }
  @media (max-width: 40rem) {
    .founding summary { flex-wrap: wrap; }
    .founding-line { flex-basis: 100%; }
    .founding-more { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  }

  /* ---- Add-ons ---------------------------------------------------------
     Tiles rather than table rows: each extra gets an icon, a line saying what
     it actually buys you, and a price that reads as a price. */
  .addons { margin-top: var(--s-9); }
  .addons h3 {
    text-align: center; font-size: var(--t-h3-lg); color: var(--ember-light);
    padding-bottom: var(--s-4); margin-bottom: var(--s-5);
    border-bottom: 1px solid color-mix(in srgb, #FFFFFF 16%, transparent);
  }

  /* ---- Add-on tiles ----------------------------------------------------
     A number-forward strip: the price is the figure, in a soft tinted box,
     with a short label beside it. Sits straight on the dark band — no card. */
  .addon-grid { list-style: none; display: grid; gap: var(--s-6); }
  @media (min-width: 44rem) { .addon-grid { grid-template-columns: repeat(3, 1fr); } }


  /* Number and suffix inline, centred as a unit; the title sits below. */
  .addon-fig { display: inline-flex; align-items: baseline; justify-content: center; gap: 0.4rem; }
  /* No box — the number sits straight on the dark band. Flat --teal-pale now
     rather than a mint-to-teal gradient: once the light teals folded into one
     value the two stops were near-identical, so the gradient was buying an
     extra colour for an effect you could no longer see. 10.5:1 on the band. */
  .addon-fig b {
    font-size: 2.375rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
    color: var(--teal-pale);
  }
  .addon-fig i {
    font-style: normal; font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.03em; text-transform: uppercase;
    color: color-mix(in srgb, var(--teal-light) 45%, #FFFFFF);
  }

  .addon-label {
    font-size: var(--t-body); font-weight: 650; line-height: 1.3;
    color: var(--ink-light); text-align: center;
  }

  .addon {
    display: grid; justify-items: center; text-align: center; gap: var(--s-3);
    transition: transform var(--d-press) var(--ease-settle);
  }
  .addon:hover { transform: translateY(-2px); }

  .price-note {
    text-align: right; font-size: var(--t-xs);
    /* Full width so the right edge lands under the last card; the default
       measure cap would otherwise strand it mid-row. */
    max-width: none; margin: 0.375rem 0 0;
    color: color-mix(in srgb, #FFFFFF 66%, var(--navy));
  }

  /* ---- Comparison ------------------------------------------------------ */
  .versus { display: grid; gap: var(--s-4); }
  @media (min-width: 48rem) { .versus { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }
  .vs-card {
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--sh-1);
  }
  .vs-card h3 { margin-bottom: var(--s-3); }
  .vs-card p { color: var(--muted); font-size: var(--t-sm); }
  /* Reuses .claim-light from the "Who it's for" section verbatim; this only
     places it under the pair and lets the title sit on its own line. */
  .vs-claim { margin-top: var(--s-5); }
  .vs-claim .claim-light b { display: block; margin-bottom: 2px; }

  .vs-card .vs-verdict {
    margin-top: var(--s-4); padding-top: var(--s-4);
    border-top: 1px solid var(--line-soft);
    font-weight: 650; color: var(--heading); font-size: var(--t-sm);
  }

  /* ---- Accounting-symbol burst around the partner CTA -------------------
     Currency and arithmetic marks scatter out from behind the button on
     hover or keyboard focus. Offsets are hand-placed in px rather than
     generated on a ring: the point is that it looks tossed, not orbital, so
     radius, angle, size, tilt and delay all differ per symbol. */
  .sym-burst { position: relative; display: inline-block; }
  .sym-burst .btn { position: relative; z-index: 1; }
  .sym {
    position: absolute; top: 50%; left: 50%; z-index: 0;
    pointer-events: none; user-select: none;
    font-weight: 800; line-height: 1; letter-spacing: 0;
    font-size: 1.5rem; color: #FFFFFF;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.3) rotate(0deg);
    transition: transform 560ms var(--ease-bounce), opacity 320ms var(--ease-settle);
  }

  /* x / y = px offset from the button's centre; s = scale; r = tilt; o = final
     opacity; d = stagger. Deliberately uneven on every axis. */
  /* Nothing reaches far above the button: the lead paragraph sits directly
     overhead and centred, and symbols drifting up into it read as a collision
     rather than a flourish. The scatter runs wide instead of tall. */
  .sym:nth-child(1) { --x:-168px; --y: -44px; --s:1.15; --r:-14deg; --o:.62; --d:  0ms; }
  .sym:nth-child(2) { --x: 150px; --y: -40px; --s:1.30; --r: 11deg; --o:.66; --d: 90ms; }
  .sym:nth-child(3) { --x:-266px; --y: -18px; --s: .80; --r: -6deg; --o:.42; --d: 40ms; }
  .sym:nth-child(4) { --x: 214px; --y:  34px; --s: .95; --r: 15deg; --o:.48; --d:165ms; }
  .sym:nth-child(5) { --x:-116px; --y:  64px; --s: .72; --r: -9deg; --o:.38; --d: 55ms; }
  .sym:nth-child(6) { --x:  68px; --y:  76px; --s: .88; --r: 18deg; --o:.46; --d:200ms; }
  .sym:nth-child(7) { --x:-214px; --y:  48px; --s:1.05; --r:-13deg; --o:.54; --d:125ms; }
  .sym:nth-child(8) { --x: 292px; --y: -14px; --s: .78; --r:  8deg; --o:.44; --d:235ms; }
  /* The two sheep sit inside the scatter at the same weight as the glyphs —
     one low-left between the "+" and the "÷", one low-right past the "x".
     Sized to read as part of the same set, not as a pair of mascots. */
  .sym:nth-child(9)  { --x:-202px; --y:   0px; --s: .95; --r:-12deg; --o:.62; --d:150ms; }
  .sym:nth-child(10) { --x: 127px; --y:  46px; --s:1.08; --r: 10deg; --o:.72; --d: 80ms; }

  /* Sheep are drawn from the sprite, not a glyph — size the SVG and let it
     inherit the span's colour. */
  .sym-sheep svg { width: 1.25rem; height: 1.25rem; }
  .sym-sheep:nth-child(9) { color: var(--ember-light); }

  /* A little colour so it does not read as one grey cloud of glyphs. */
  .sym:nth-child(2), .sym:nth-child(7) { color: var(--teal-light); }
  .sym:nth-child(4) { color: var(--ember-light); }

  .sym-burst:hover .sym,
  .sym-burst:focus-within .sym {
    opacity: var(--o, .5);
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)))
               scale(var(--s)) rotate(var(--r));
    transition-delay: var(--d, 0ms);
  }

  /* ---- Partner CTA ----------------------------------------------------- */
  .partner { text-align: center; max-width: 44rem; margin-inline: auto; }
  .partner .eyebrow { margin: 0 auto var(--s-4); }
  .partner h2 { margin-bottom: var(--s-3); }
  .partner p { color: var(--body); margin-inline: auto; margin-bottom: var(--s-6); }
  .band-navy .partner p { color: color-mix(in srgb, #FFFFFF 80%, var(--navy)); }
}