@charset "UTF-8";
/* ============================================================================
   DRIPMAX — LANDING PAGE STYLESHEET
   Owner: ui-styling agent.  Consumes design-system/dripmax/MASTER.md (tokens)
   and docs/ux-spec.md (interaction, motion, responsive, a11y).

   Emission order follows MASTER §11:
     1 layers + reset            5 composed type roles
     2 primitives                6 component tokens
     3 scale / spacing / motion  7 component rules  (var() only, zero raw hex)
     4 semantics + .on-ink       8 responsive · focus · reduced-motion

   Cascade layers are used so that the four breakpoint blocks always win over
   component rules regardless of selector specificity. This is the single,
   consistent section-spacing strategy: ONE rule (`main > section`) owns all
   vertical section padding; individual sections never re-declare it.
   ========================================================================= */

@layer reset, tokens, base, components, responsive, focus, motion;

/* ==========================================================================
   1 · RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  :root { color-scheme: only light; }

  html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote {
    margin: 0;
    padding: 0;
  }

  ul, ol { list-style: none; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100dvh;
    /* Safety net only — a real horizontal scrollbar is a bug to fix at source
       (ux-spec §D.5). `clip` keeps position:sticky working; `hidden` would not. */
    overflow-x: clip;
  }

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

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

  button {
    background: none;
    border: 0;
    cursor: pointer;
    touch-action: manipulation;
  }

  a {
    color: inherit;
    touch-action: manipulation;
  }

  strong { font-weight: var(--dm-weight-700); }

  ::selection {
    background: var(--dm-a-crimson-20);
    color: var(--dm-ink);
  }
}

/* ==========================================================================
   2 · TOKENS
   ========================================================================== */
@layer tokens {

  /* ---- MASTER §1 · Layer 1 — primitives ---------------------------------- */
  :root {
    /* Brand palette — verbatim from constants/colors.ts */
    --dm-ink:            #1a1413;
    --dm-ink-2:          #3d2f2c;
    --dm-muted:          #8c7f79;  /* UI boundaries only — NEVER body text */
    --dm-crimson:        #a22d2c;
    --dm-crimson-deep:   #871f1e;
    --dm-glow:           #ec8b80;
    --dm-cream:          #f6efe9;
    --dm-base:           #f4f3ef;
    --dm-hair:           #e7e0d6;
    --dm-stage:          #dcd6cc;
    --dm-white:          #ffffff;
    --dm-slate:          #3a4250;
    --dm-axis-ink:       #14171a;

    /* Accessibility-derived warm ramp — MASTER §9.4.
       CORRECTED CONTRAST TOKENS. --dm-muted #8c7f79 is 3.49:1 on the oat base
       and FAILS AA as text; both the design-system and ux agents flagged it.
       All muted body copy on light surfaces uses --dm-warm-700 (5.05:1);
       on the ink stage it uses --dm-warm-300 (7.49:1). --dm-muted survives
       only as --border-strong, where 3.49:1 clears the 3:1 non-text floor. */
    --dm-warm-700:       #726560;
    --dm-warm-300:       #b0a49d;
    --dm-glow-lift:      #f2a79d;

    /* Alpha primitives */
    --dm-a-ink-04:       rgba(20, 23, 26, 0.04);
    --dm-a-ink-08:       rgba(20, 23, 26, 0.08);
    --dm-a-ink-10:       rgba(20, 23, 26, 0.10);
    --dm-a-ink-16:       rgba(20, 23, 26, 0.16);
    --dm-a-ink-28:       rgba(20, 23, 26, 0.28);
    --dm-a-ink-72:       rgba(20, 23, 26, 0.72);
    --dm-a-crimson-12:   rgba(162, 45, 44, 0.12);
    --dm-a-crimson-20:   rgba(162, 45, 44, 0.20);
    --dm-a-crimson-32:   rgba(162, 45, 44, 0.32);
    --dm-a-glow-24:      rgba(236, 139, 128, 0.24);
    --dm-a-glow-40:      rgba(236, 139, 128, 0.40);
    --dm-a-cream-12:     rgba(246, 239, 233, 0.12);
    --dm-a-cream-18:     rgba(246, 239, 233, 0.18);
    --dm-a-white-64:     rgba(255, 255, 255, 0.64);
    --dm-a-white-88:     rgba(255, 255, 255, 0.88);

    /* Product data colours — constants/scoring.ts */
    --dm-axis-fit:       #14171a;
    --dm-axis-color:     #871f1e;
    --dm-axis-cohesion:  #3a4250;
    --dm-axis-details:   #a22d2c;

    --dm-band-high:      #a22d2c;
    --dm-band-mid:       #3a4250;
    --dm-band-low:       #14171a;

    /* Typefaces — constants/tokens.ts FontFamily */
    --dm-font-display: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
    --dm-font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --dm-font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

    --dm-weight-400: 400;
    --dm-weight-500: 500;
    --dm-weight-600: 600;
    --dm-weight-700: 700;
    --dm-weight-800: 800;
  }

  /* ---- MASTER §3.1 · Type scale ------------------------------------------ */
  :root {
    --font-size-display-2xl: clamp(2.7500rem, 1.6937rem + 4.5070vw, 5.7500rem); /* 44 → 92 */
    --font-size-display-xl:  clamp(2.3750rem, 1.7148rem + 2.8169vw, 4.2500rem); /* 38 → 68 */
    --font-size-display-lg:  clamp(2.0000rem, 1.5599rem + 1.8779vw, 3.2500rem); /* 32 → 52 */
    --font-size-heading-xl:  clamp(1.7500rem, 1.4859rem + 1.1268vw, 2.5000rem); /* 28 → 40 */
    --font-size-heading-lg:  clamp(1.5000rem, 1.3239rem + 0.7512vw, 2.0000rem); /* 24 → 32 */
    --font-size-heading-md:  clamp(1.2500rem, 1.1620rem + 0.3756vw, 1.5000rem); /* 20 → 24 */
    --font-size-heading-sm:  clamp(1.1250rem, 1.0810rem + 0.1878vw, 1.2500rem); /* 18 → 20 */
    --font-size-body-lg:     clamp(1.0625rem, 1.0185rem + 0.1878vw, 1.1875rem); /* 17 → 19 */
    --font-size-body-md:     clamp(1.0000rem, 0.9780rem + 0.0939vw, 1.0625rem); /* 16 → 17 */
    --font-size-body-sm:     clamp(0.8750rem, 0.8530rem + 0.0939vw, 0.9375rem); /* 14 → 15 */
    --font-size-label-lg:    0.9375rem;
    --font-size-label-md:    0.8125rem;
    --font-size-eyebrow:     clamp(0.7500rem, 0.7280rem + 0.0939vw, 0.8125rem); /* 12 → 13 */

    --leading-crush:   0.94;
    --leading-tight:   1.02;
    --leading-snug:    1.14;
    --leading-heading: 1.22;
    --leading-body:    1.58;
    --leading-relaxed: 1.66;
    --leading-flat:    1.00;

    --tracking-display-2xl: -0.030em;
    --tracking-display-xl:  -0.032em;
    --tracking-display-lg:  -0.034em;
    --tracking-heading-xl:  -0.026em;
    --tracking-heading-lg:  -0.022em;
    --tracking-heading-md:  -0.018em;
    --tracking-heading-sm:  -0.014em;
    --tracking-body:        -0.004em;
    --tracking-label:        0.010em;
    --tracking-eyebrow:      0.140em;
    --tracking-wordmark:    -0.040em;

    --measure-prose:   62ch;
    --measure-lede:    46ch;
    --measure-display: 18ch;
  }

  /* ---- MASTER §4 · Spacing & layout -------------------------------------- */
  :root {
    --space-0:   0;
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-7:   1.75rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-14:  3.5rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-28:  7rem;
    --space-32:  8rem;

    --space-section:    clamp(4.0000rem, 2.5915rem + 6.0094vw, 8.0000rem);
    --space-section-lg: clamp(5.5000rem, 3.9155rem + 6.7606vw, 10.0000rem);
    --space-stack:      clamp(2.0000rem, 1.4718rem + 2.2535vw, 3.5000rem);
    --space-gutter:     clamp(1.2500rem, 0.8099rem + 1.8779vw, 2.5000rem);

    --spacing-inline:    var(--space-2);
    --spacing-tight:     var(--space-3);
    --spacing-component: var(--space-6);
    --spacing-card:      var(--space-8);
    --spacing-card-lg:   var(--space-10);
    --spacing-block:     var(--space-stack);
    --spacing-section:   var(--space-section);
    --spacing-page-x:    var(--space-gutter);

    --container-max:    75rem;
    --container-narrow: 46rem;
    --container-wide:   82.5rem;
    --grid-gap:         var(--space-6);
    --grid-gap-lg:      var(--space-10);
    --touch-min:        2.75rem;   /* 44px — BRIEF §11.5 floor */

    /* Breakpoint-driven layout dial — ux-spec §D. Custom properties cannot be
       used inside @media, so the four breakpoints are hardcoded in the
       `responsive` layer and only these four values change there. */
    --shell-max: 100%;
    --gutter:    1.25rem;  /* 20px */
    --nav-h:     4rem;     /* 64px */
    --sec-pad:   3.5rem;   /* 56px */

    --icon-sm: 1.25rem;    /* 20px */
    --icon-md: 1.5rem;     /* 24px */
    --icon-lg: 2rem;       /* 32px */
  }

  /* ---- MASTER §5 · Radius ------------------------------------------------ */
  :root {
    --radius-xs:   0.375rem;
    --radius-sm:   0.75rem;
    --radius-md:   1.125rem;
    --radius-lg:   1.75rem;
    --radius-xl:   2.25rem;
    --radius-pill: 999px;
    --radius-full: 50%;
  }

  /* ---- MASTER §6 · Elevation --------------------------------------------- */
  :root {
    --shadow-none:   none;
    --shadow-hair:   0 0 0 1px var(--dm-a-ink-08);
    --shadow-card:   0 6px 16px rgba(20, 23, 26, 0.10);   /* shipped app shadow */
    --shadow-pop:    0 18px 24px rgba(20, 23, 26, 0.28);  /* shipped app shadow */
    --shadow-lift:   0 12px 28px rgba(20, 23, 26, 0.14);
    --shadow-press:  0 2px 6px rgba(20, 23, 26, 0.16);
    --shadow-accent: 0 10px 24px var(--dm-a-crimson-32);
    --shadow-glow:   0 0 0 1px var(--dm-a-glow-40), 0 12px 32px var(--dm-a-glow-24);
    --shadow-inset:  inset 0 1px 0 var(--dm-a-white-64);

    --glass-bg:     var(--dm-a-cream-12);
    --glass-border: 1px solid var(--dm-a-cream-18);
    --glass-blur:   saturate(140%) blur(18px);
    --glass-shadow: var(--shadow-pop);

    --z-base:    0;
    --z-raised:  10;
    --z-sticky:  100;
    --z-overlay: 200;
    --z-modal:   300;
    --z-toast:   400;
  }

  /* ---- MASTER §7 · Motion ------------------------------------------------ */
  :root {
    --duration-instant: 90ms;
    --duration-fast:    160ms;
    --duration-base:    240ms;
    --duration-slow:    380ms;
    --duration-slower:  560ms;
    --duration-scene:   820ms;
    --duration-ticker: 1100ms;

    --ease-standard:  cubic-bezier(0.20, 0.00, 0.00, 1.00);
    --ease-out:       cubic-bezier(0.16, 1.00, 0.30, 1.00);
    --ease-in:        cubic-bezier(0.55, 0.00, 1.00, 0.45);
    --ease-in-out:    cubic-bezier(0.65, 0.00, 0.35, 1.00);
    --ease-linear:    linear;

    --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1.00);
    --ease-spring-soft: cubic-bezier(0.34, 1.28, 0.64, 1.00);
    --ease-spring-big:  cubic-bezier(0.22, 1.84, 0.36, 1.00);
    --ease-anticipate:  cubic-bezier(0.68, -0.40, 0.27, 1.45);

    --transition-color:     color var(--duration-instant) var(--ease-standard),
                            background-color var(--duration-fast) var(--ease-standard),
                            border-color var(--duration-fast) var(--ease-standard);
    --transition-transform: transform var(--duration-base) var(--ease-spring);
    --transition-lift:      transform var(--duration-fast) var(--ease-spring-soft),
                            box-shadow var(--duration-fast) var(--ease-standard);
    --transition-reveal:    opacity var(--duration-slow) var(--ease-out),
                            transform var(--duration-slow) var(--ease-spring-soft);

    --stagger-step:  60ms;
    --stagger-axis: 110ms;
    --reveal-offset: 18px;
    --reveal-scale: 0.94;
    --tilt-chip:   -2.5deg;
    --tilt-chip-alt: 3deg;
    --hover-lift:  -3px;
    --press-scale: 0.975;
  }

  /* ---- ux-spec §0 · Scorer motion contract -------------------------------
     The interaction spec names its own duration/easing set. Two of its names
     collide with MASTER §7 (`--ease-out`, `--ease-in`) with different curves,
     so the ux-spec curves are suffixed `-ux` and the scorer rules below use
     those exclusively. Everything else keeps the ux-spec's exact names.
     No raw cubic-bezier() is ever inlined outside this block.               */
  :root {
    --t-micro:  140ms;
    --t-fast:   220ms;
    --t-base:   320ms;
    --t-slow:   460ms;
    --t-sweep: 1200ms;

    --ease-out-ux: cubic-bezier(0.22, 1.00, 0.36, 1.00); /* expo-out           */
    --ease-in-ux:  cubic-bezier(0.40, 0.00, 1.00, 1.00); /* exits only         */
    --ease-std:    cubic-bezier(0.40, 0.00, 0.20, 1.00); /* material standard  */
    --ease-pop:    cubic-bezier(0.34, 1.40, 0.64, 1.00); /* mild overshoot     */
    --ease-stamp:  cubic-bezier(0.20, 1.60, 0.40, 1.00); /* hard overshoot     */
    --ease-sweep:  cubic-bezier(0.37, 0.00, 0.63, 1.00); /* sine in-out — beam */

    /* Reveal-phase offsets, all relative to `data-state="revealing"` entry.
       ux-spec §B.3 subtracts 1000ms from every row at t≥2400 on repeat runs —
       which is exactly when revealing begins — so these offsets are identical
       for the first-run and fast profiles. That is why they can live in CSS. */
    --rv-verdict-dur:   380ms;
    --rv-band-delay:    780ms;
    --rv-band-dur:      240ms;
    --rv-ring-delay:    820ms;
    --rv-ring-dur:      320ms;
    --rv-arch-delay:    860ms;
    --rv-arch-dur:      260ms;
    --rv-axis-delay:    900ms;
    --rv-axis-dur:      420ms;
    --rv-axis-stagger:   70ms;
    --rv-read-delay:   1240ms;
    --rv-read-dur:      280ms;
  }

  /* ---- MASTER §2 · Layer 2 — semantic tokens (light "oat" context) -------- */
  :root {
    --surface-page:        var(--dm-base);
    --surface-raised:      var(--dm-white);
    --surface-sunken:      var(--dm-stage);
    --surface-warm:        var(--dm-hair);
    --surface-inverse:     var(--dm-ink);
    --surface-inverse-alt: var(--dm-axis-ink);
    --surface-accent:      var(--dm-crimson);
    --surface-accent-soft: var(--dm-a-crimson-12);
    --surface-glass:       var(--dm-a-cream-12);
    --surface-scrim:       var(--dm-a-ink-72);

    --text-primary:       var(--dm-ink);
    --text-secondary:     var(--dm-ink-2);
    --text-muted:         var(--dm-warm-700);   /* CORRECTED — 5.05:1 */
    --text-accent:        var(--dm-crimson);
    --text-accent-strong: var(--dm-crimson-deep);
    --text-data:          var(--dm-slate);
    --text-on-accent:     var(--dm-cream);
    --text-inverse:       var(--dm-base);

    --border-hairline: var(--dm-hair);
    --border-soft:     var(--dm-stage);
    --border-strong:   var(--dm-muted);
    --border-accent:   var(--dm-crimson);
    --border-inverse:  var(--dm-a-cream-18);

    --focus-ring:        var(--dm-crimson);
    --focus-ring-width:  3px;
    --focus-ring-offset: 3px;
    --focus-ring-style:  solid;

    --data-band-high:     var(--dm-band-high);
    --data-band-mid:      var(--dm-band-mid);
    --data-band-low:      var(--dm-band-low);
    --data-track:         var(--dm-hair);
    --data-track-inverse: var(--dm-a-cream-12);
  }

  /* ---- MASTER §2 · Dark "ink stage" context ------------------------------
     `.on-ink` is the canonical hook. The additional selectors below are the
     page's dark surfaces; listing them here means the remapping holds whether
     or not the coordinator adds class="on-ink" to the markup. Crimson becomes
     glow for every text/focus role automatically (MASTER §9.4 correction 3).  */
  .on-ink,
  .axes-sec,
  .get,
  .foot,
  .plan-pro,
  .verdict {
    --surface-page:        var(--dm-ink);
    --surface-raised:      var(--dm-a-cream-12);
    --surface-sunken:      var(--dm-axis-ink);
    --surface-warm:        var(--dm-a-cream-12);
    --surface-inverse:     var(--dm-base);
    --surface-inverse-alt: var(--dm-white);
    --surface-accent:      var(--dm-crimson);
    --surface-accent-soft: var(--dm-a-glow-24);
    --surface-glass:       var(--dm-a-cream-12);

    --text-primary:       var(--dm-base);
    --text-secondary:     var(--dm-stage);
    --text-muted:         var(--dm-warm-300);   /* CORRECTED — 7.49:1 */
    --text-accent:        var(--dm-glow);
    --text-accent-strong: var(--dm-glow);
    --text-data:          var(--dm-hair);
    --text-on-accent:     var(--dm-cream);
    --text-inverse:       var(--dm-ink);

    --border-hairline: var(--dm-a-cream-12);
    --border-soft:     var(--dm-a-cream-18);
    --border-strong:   var(--dm-muted);
    --border-accent:   var(--dm-glow);
    --border-inverse:  var(--dm-a-ink-28);

    --focus-ring: var(--dm-glow);

    --data-track:     var(--dm-a-cream-12);
    --data-band-high: var(--dm-glow);
    --data-band-mid:  var(--dm-stage);
    --data-band-low:  var(--dm-muted);

    -webkit-font-smoothing: antialiased;
  }

  /* ---- MASTER §3.2 · Composed type roles ---------------------------------- */
  :root {
    --type-display-2xl: var(--dm-weight-800) var(--font-size-display-2xl)/var(--leading-crush) var(--dm-font-display);
    --type-display-xl:  var(--dm-weight-800) var(--font-size-display-xl)/var(--leading-tight)  var(--dm-font-display);
    --type-display-lg:  var(--dm-weight-800) var(--font-size-display-lg)/var(--leading-tight)  var(--dm-font-display);

    --type-heading-xl: var(--dm-weight-700) var(--font-size-heading-xl)/var(--leading-snug)    var(--dm-font-display);
    --type-heading-lg: var(--dm-weight-700) var(--font-size-heading-lg)/var(--leading-snug)    var(--dm-font-display);
    --type-heading-md: var(--dm-weight-700) var(--font-size-heading-md)/var(--leading-heading) var(--dm-font-display);
    --type-heading-sm: var(--dm-weight-700) var(--font-size-heading-sm)/var(--leading-heading) var(--dm-font-display);

    --type-body-lg: var(--dm-weight-400) var(--font-size-body-lg)/var(--leading-relaxed) var(--dm-font-body);
    --type-body-md: var(--dm-weight-400) var(--font-size-body-md)/var(--leading-body)    var(--dm-font-body);
    --type-body-sm: var(--dm-weight-400) var(--font-size-body-sm)/var(--leading-body)    var(--dm-font-body);

    --type-label-lg: var(--dm-weight-600) var(--font-size-label-lg)/var(--leading-snug) var(--dm-font-body);
    --type-label-md: var(--dm-weight-600) var(--font-size-label-md)/var(--leading-snug) var(--dm-font-body);
    --type-eyebrow:  var(--dm-weight-700) var(--font-size-eyebrow)/var(--leading-snug)  var(--dm-font-body);

    --type-numeric: var(--dm-weight-800) var(--font-size-display-lg)/var(--leading-flat) var(--dm-font-display);
  }

  /* ---- MASTER §8 · Layer 3 — component tokens ----------------------------- */
  :root {
    /* 8.1 Button */
    --button-font:             var(--type-label-lg);
    --button-radius:           var(--radius-pill);
    --button-radius-square:    var(--radius-md);
    --button-padding-y:        var(--space-4);
    --button-padding-x:        var(--space-8);
    --button-padding-y-sm:     var(--space-3);
    --button-padding-x-sm:     var(--space-5);
    --button-padding-y-lg:     var(--space-5);
    --button-padding-x-lg:     var(--space-10);
    --button-gap:              var(--spacing-inline);
    --button-min-height:       var(--touch-min);
    --button-min-height-lg:    3.5rem;
    --button-border-width:     1.5px;
    --button-icon-size:        var(--icon-sm);
    --button-hover-lift:       var(--hover-lift);
    --button-press-scale:      var(--press-scale);
    --button-disabled-opacity: 0.45;

    --button-crimson-bg:            var(--dm-crimson);
    --button-crimson-fg:            var(--dm-cream);
    --button-crimson-border:        transparent;
    --button-crimson-shadow:        var(--shadow-accent);
    --button-crimson-bg-hover:      var(--dm-crimson-deep);
    --button-crimson-shadow-hover:  0 16px 32px var(--dm-a-crimson-32);
    --button-crimson-bg-active:     var(--dm-crimson-deep);
    --button-crimson-shadow-active: var(--shadow-press);

    --button-ink-bg:            var(--dm-ink);
    --button-ink-fg:            var(--dm-base);
    --button-ink-border:        transparent;
    --button-ink-shadow:        var(--shadow-card);
    --button-ink-bg-hover:      var(--dm-ink-2);
    --button-ink-shadow-hover:  var(--shadow-lift);
    --button-ink-bg-active:     var(--dm-ink);
    --button-ink-shadow-active: var(--shadow-press);

    --button-ghost-bg:            transparent;
    --button-ghost-fg:            var(--text-primary);
    --button-ghost-border:        var(--border-strong);
    --button-ghost-bg-hover:      var(--surface-accent-soft);
    --button-ghost-fg-hover:      var(--text-accent);
    --button-ghost-border-hover:  var(--border-accent);
    --button-ghost-bg-active:     var(--dm-a-crimson-20);

    --button-glow-bg:            var(--dm-glow);
    --button-glow-fg:            var(--dm-ink);
    --button-glow-border:        transparent;
    --button-glow-shadow:        var(--shadow-glow);
    --button-glow-bg-hover:      var(--dm-glow-lift);
    --button-glow-shadow-hover:  0 0 0 1px var(--dm-a-glow-40), 0 18px 40px var(--dm-a-glow-40);
    --button-glow-bg-active:     var(--dm-glow);
    --button-glow-shadow-active: var(--shadow-press);

    /* 8.2 Card */
    --card-bg:              var(--surface-raised);
    --card-fg:              var(--text-primary);
    --card-border:          1px solid var(--border-soft);
    --card-radius:          var(--radius-lg);
    --card-padding:         var(--spacing-card);
    --card-padding-lg:      var(--spacing-card-lg);
    --card-padding-compact: var(--space-6);
    --card-gap:             var(--space-4);
    --card-shadow:          var(--shadow-card);
    --card-shadow-hover:    var(--shadow-lift);
    --card-transition:      var(--transition-lift);
    --card-hover-lift:      var(--hover-lift);
    --card-media-radius:    var(--radius-md);
    --card-icon-size:       2.75rem;
    --card-icon-bg:         var(--surface-accent-soft);
    --card-icon-fg:         var(--text-accent);
    --card-icon-radius:     var(--radius-md);

    /* 8.3 Chip */
    --chip-font:           var(--type-label-md);
    --chip-radius:         var(--radius-pill);
    --chip-padding-y:      var(--space-2);
    --chip-padding-x:      var(--space-4);
    --chip-gap:            var(--space-2);
    --chip-min-height:     1.75rem;
    --chip-border-width:   1.5px;
    --chip-tilt:           var(--tilt-chip);
    --chip-tilt-alt:       var(--tilt-chip-alt);
    --chip-shadow:         var(--shadow-hair);
    --chip-hover-tilt:     0deg;
    --chip-hover-scale:    1.06;
    --chip-bg:             var(--surface-raised);
    --chip-fg:             var(--text-secondary);
    --chip-border:         var(--border-soft);
    --chip-accent-bg:      var(--surface-accent-soft);
    --chip-accent-fg:      var(--text-accent-strong);
    --chip-accent-border:  var(--dm-a-crimson-20);
    --chip-solid-bg:       var(--dm-crimson);
    --chip-solid-fg:       var(--dm-cream);
    --chip-glass-bg:       var(--dm-a-cream-12);
    --chip-glass-fg:       var(--dm-base);
    --chip-glass-border:   var(--dm-a-cream-18);

    /* 8.4 Axis bar */
    --axisbar-track-bg:      var(--data-track);
    --axisbar-track-height:  0.625rem;
    --axisbar-track-radius:  var(--radius-pill);
    --axisbar-row-gap:       var(--space-5);
    --axisbar-label-font:    var(--type-label-lg);
    --axisbar-label-fg:      var(--text-primary);
    --axisbar-value-font:    var(--type-label-md);
    --axisbar-value-fg:      var(--text-data);
    --axisbar-fit-fill:      var(--dm-axis-fit);
    --axisbar-color-fill:    var(--dm-axis-color);
    --axisbar-cohesion-fill: var(--dm-axis-cohesion);
    --axisbar-details-fill:  var(--dm-axis-details);

    /* 8.5 Score gauge */
    --gauge-size:        6.5rem;   /* 104px — sized for the phone frame it sits in */
    --gauge-stroke-u:    9;        /* SVG user units against the 120 viewBox       */
    --gauge-track:       var(--data-track);
    --gauge-circumference: 326.726;/* 2π × r52 — the dasharray constant            */
    --gauge-number-fg:   var(--text-primary);
    --gauge-fill-ease:   var(--ease-out-ux);
    /* NOTE — the gauge arc and the drip divider deliberately read
       --data-band-* / --surface-inverse *at the use site* instead of through a
       component token. A component token declared here resolves its var()s
       against :root, so it would freeze the LIGHT value and never pick up the
       .on-ink remapping — and both of those elements live on a dark surface. */

    /* 8.6 Plan card */
    --plan-radius:        var(--radius-lg);
    --plan-padding:       var(--spacing-card-lg);
    --plan-padding-sm:    var(--spacing-card);
    --plan-gap:           var(--space-5);
    --plan-check-size:    var(--icon-sm);
    --plan-badge-bg:      var(--dm-crimson);
    --plan-badge-fg:      var(--dm-cream);
    --plan-badge-tilt:    var(--tilt-chip-alt);

    /* 8.7 Nav */
    --nav-bg:              var(--dm-a-white-88);
    --nav-blur:            var(--glass-blur);
    --nav-border:          1px solid transparent;
    --nav-border-scrolled: 1px solid var(--border-hairline);
    --nav-shadow-scrolled: var(--shadow-card);
    --nav-link-fg:         var(--text-secondary);
    --nav-link-fg-hover:   var(--text-primary);
    --nav-link-radius:     var(--radius-sm);

    /* 8.8 Shared */
    --link-fg:               var(--text-accent);
    --link-fg-hover:         var(--text-accent-strong);
    --link-underline-offset: 0.18em;
    --divider:               1px solid var(--border-hairline);
    --drip-divider-height:   3.5rem;
  }
}

/* ==========================================================================
   3 · BASE — element defaults, containers, the one section-spacing rule
   ========================================================================== */
@layer base {

  html {
    scroll-padding-top: calc(var(--nav-h) + 1rem);
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    background: var(--surface-page);
    color: var(--text-primary);
    font: var(--type-body-md);
    letter-spacing: var(--tracking-body);
    text-wrap: pretty;
  }

  h1, h2, h3, h4 {
    text-wrap: balance;
    color: var(--text-primary);
  }

  p { color: var(--text-secondary); }

  a { text-underline-offset: var(--link-underline-offset); }

  /* ---- Containers -------------------------------------------------------- */
  .shell {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* ---- THE section-spacing strategy --------------------------------------
     One rule owns every section's vertical rhythm. No section rule below is
     allowed to declare padding-block / margin-block on itself; the only
     permitted overrides are the three deliberate exceptions right here.     */
  main > section { padding-block: var(--sec-pad); }

  /* The nav is sticky, i.e. still in flow, so the hero needs no nav offset —
     only a slightly tighter top so the h1 sits high in the first viewport. */
  /* overflow-x: clip contains the scorer bloom's blur bleed without touching
     the block axis (so nothing sticky or shadowed is affected) — belt and
     braces on top of the glow's own box being pinned to the container. */
  main > section.hero {
    padding-block-start: var(--space-10);
    overflow-x: clip;
    overflow-y: visible;
  }
  main > section.marquee-wrap  { padding-block: 0; }
  main > section.axes-sec      { padding-block-start: calc(var(--sec-pad) + var(--drip-divider-height)); }

  /* Anchor targets must clear the sticky nav. */
  #main, #top, #how, #axes, #pricing, #get {
    scroll-margin-top: calc(var(--nav-h) + 1rem);
  }

  /* ---- Utilities --------------------------------------------------------- */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--type-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-accent);
  }
  .eyebrow-dark { color: var(--text-data); }
  .eyebrow-glow { color: var(--text-accent); }

  .sec-head {
    display: grid;
    gap: var(--space-4);
    margin-block-end: var(--space-stack);
    max-width: var(--measure-prose);
  }
  .sec-head-center {
    justify-items: center;
    text-align: center;
    margin-inline: auto;
  }
  .sec-title {
    font: var(--type-heading-xl);
    letter-spacing: var(--tracking-heading-xl);
    max-width: var(--measure-display);
  }
  .sec-title-light { color: var(--text-primary); }
  .sec-sub {
    font: var(--type-body-lg);
    color: var(--text-secondary);
    max-width: 52ch;
  }
}

/* ==========================================================================
   4 · COMPONENTS — var() only, zero literal hex past this line
   ========================================================================== */
@layer components {

  /* ---------------------------------------------------------------- SKIP LINK */
  .skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: var(--z-modal);
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    padding-inline: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--dm-crimson);
    color: var(--dm-cream);
    font: var(--type-label-lg);
    letter-spacing: var(--tracking-label);
    text-decoration: none;
    box-shadow: var(--shadow-pop);
    /* Clipped, never display:none — it must stay in the tab order. */
    transform: translateY(-200%);
    transition: transform var(--duration-fast) var(--ease-out);
  }
  .skip-link:focus { transform: translateY(0); }

  /* --------------------------------------------------------------- WORDMARK */
  .wordmark {
    display: inline-flex;
    align-items: center;
    font-family: var(--dm-font-display);
    font-weight: var(--dm-weight-800);
    font-size: 1.5rem;
    line-height: var(--leading-flat);
    letter-spacing: var(--tracking-wordmark);
    text-decoration: none;
    padding-block: var(--space-2);
  }
  .wordmark-drip { color: var(--text-primary); }
  .wordmark-max {
    position: relative;
    color: var(--text-accent);
  }
  .drop {
    position: absolute;
    inset-block-start: -0.30em;
    inset-inline-end: -0.34em;
    width: 0.30em;
    height: 0.30em;
    background: var(--dm-crimson);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
  }
  .wordmark-light .wordmark-drip { color: var(--text-primary); }
  .wordmark-light .wordmark-max  { color: var(--text-accent); }
  .wordmark-light .drop          { background: var(--dm-glow); }

  /* -------------------------------------------------------------------- NAV */
  .nav {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    background: var(--nav-bg);
    border-block-end: var(--nav-border);
    transition: background-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard),
                border-color var(--duration-base) var(--ease-standard);
  }
  @supports (backdrop-filter: blur(1px)) {
    .nav { backdrop-filter: var(--nav-blur); }
  }
  .nav.is-scrolled {
    border-block-end: var(--nav-border-scrolled);
    box-shadow: var(--nav-shadow-scrolled);
  }

  .nav-inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--nav-h);
  }

  .nav-links {
    display: none;
    margin-inline-start: auto;
    gap: var(--space-6);
  }
  .nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--nav-link-radius);
    font: var(--type-label-lg);
    letter-spacing: var(--tracking-label);
    color: var(--nav-link-fg);
    text-decoration: none;
    transition: var(--transition-color);
  }
  .nav-links a:hover { color: var(--nav-link-fg-hover); }

  /* <768 the links are hidden, so the CTA takes the auto margin and stays
     right-aligned; ≥768 the links take it and the CTA just gets a gap. */
  .nav-inner .btn-sm { margin-inline-start: auto; }

  /* ----------------------------------------------------------------- BUTTON */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    min-height: var(--button-min-height);
    padding: var(--button-padding-y) var(--button-padding-x);
    border: var(--button-border-width) solid transparent;
    border-radius: var(--button-radius);
    font: var(--button-font);
    letter-spacing: var(--tracking-label);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-color), var(--transition-lift);
  }
  .btn .ico {
    inline-size: var(--button-icon-size);
    block-size: var(--button-icon-size);
    fill: currentColor;
    flex: none;
  }
  .btn:hover { transform: translateY(var(--button-hover-lift)); }
  /* ux-spec §0 — press feedback is pure CSS so it lands inside 100ms. */
  .btn:active {
    transform: scale(var(--button-press-scale));
    transition: transform 120ms var(--ease-in-ux);
  }

  .btn-sm {
    min-height: var(--touch-min);
    padding: var(--button-padding-y-sm) var(--button-padding-x-sm);
  }
  .btn-lg {
    min-height: var(--button-min-height-lg);
    padding: var(--button-padding-y-lg) var(--button-padding-x-lg);
    font-size: var(--font-size-body-md);
    font-weight: var(--dm-weight-700);
  }
  .btn-block {
    display: flex;
    width: 100%;
  }

  .btn-crimson {
    background: var(--button-crimson-bg);
    color: var(--button-crimson-fg);
    border-color: var(--button-crimson-border);
    box-shadow: var(--button-crimson-shadow);
  }
  .btn-crimson:hover {
    background: var(--button-crimson-bg-hover);
    box-shadow: var(--button-crimson-shadow-hover);
  }
  .btn-crimson:active {
    background: var(--button-crimson-bg-active);
    box-shadow: var(--button-crimson-shadow-active);
  }

  .btn-ink {
    background: var(--button-ink-bg);
    color: var(--button-ink-fg);
    border-color: var(--button-ink-border);
    box-shadow: var(--button-ink-shadow);
  }
  .btn-ink:hover {
    background: var(--button-ink-bg-hover);
    box-shadow: var(--button-ink-shadow-hover);
  }
  .btn-ink:active {
    background: var(--button-ink-bg-active);
    box-shadow: var(--button-ink-shadow-active);
  }

  .btn-ghost {
    background: var(--button-ghost-bg);
    color: var(--button-ghost-fg);
    border-color: var(--button-ghost-border);
  }
  .btn-ghost:hover {
    background: var(--button-ghost-bg-hover);
    color: var(--button-ghost-fg-hover);
    border-color: var(--button-ghost-border-hover);
  }
  .btn-ghost:active { background: var(--button-ghost-bg-active); }

  .btn-glow {
    background: var(--button-glow-bg);
    color: var(--button-glow-fg);
    border-color: var(--button-glow-border);
    box-shadow: var(--button-glow-shadow);
  }
  .btn-glow:hover {
    background: var(--button-glow-bg-hover);
    box-shadow: var(--button-glow-shadow-hover);
  }
  .btn-glow:active {
    background: var(--button-glow-bg-active);
    box-shadow: var(--button-glow-shadow-active);
  }

  /* ------------------------------------------------------------------- HERO */
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
  }

  .hero-copy { display: grid; gap: var(--space-5); justify-items: start; }

  .pulse {
    position: relative;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--dm-crimson);
    flex: none;
  }
  .pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--dm-crimson);
    animation: dm-pulse 2200ms var(--ease-out) infinite;
  }
  @keyframes dm-pulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(3.2); opacity: 0; }
    100% { transform: scale(3.2); opacity: 0; }
  }

  .hero-title {
    /* display-xl, not display-2xl: at 92px the locked two-sentence headline
       overflows the 46fr hero column. display-xl lands 38→68px, inside the
       ux-spec §D band (34→64px) while staying a MASTER token. */
    font: var(--type-display-xl);
    letter-spacing: var(--tracking-display-xl);
    max-width: var(--measure-display);
  }
  .hero-title-accent { color: var(--text-accent); }

  .hero-sub {
    font: var(--type-body-lg);
    color: var(--text-secondary);
    max-width: 34ch;
  }

  .hero-actions { display: grid; gap: var(--space-3); justify-items: start; }
  .hero-note {
    font: var(--type-body-sm);
    color: var(--text-muted);   /* CORRECTED muted token — 5.05:1 */
  }

  /* ============================ THE HERO SCORER ============================
     All state lives on #scorer[data-state] / [data-fit] / [data-motion].
     CSS never keys off a JS-added class. [data-snap] is the one-frame
     "no transitions" escape hatch used by the instant-reveal paths.        */

  .scorer {
    position: relative;
    display: grid;
    gap: var(--space-4);
    justify-items: center;
  }

  /* Decorative bloom. Its box is pinned to the container's own edges — at 375
     the old `min(120%, 30rem)` centred box was 402px wide inside a 335px
     column and pushed document scrollWidth to 389. A bloom must never be able
     to widen the document; the blur alone gives it all the spread it needs,
     and .hero clips whatever bleeds past the gutter. */
  .scorer-glow {
    position: absolute;
    inset-block-start: -6%;
    inset-inline: 0;
    block-size: min(100%, 30rem);
    max-inline-size: 100%;
    border-radius: var(--radius-full);
    background: radial-gradient(circle at 50% 40%,
                var(--dm-a-crimson-20) 0%,
                var(--dm-a-glow-24) 42%,
                transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: var(--z-base);
  }

  #scorer[data-snap],
  #scorer[data-snap] *,
  #scorer[data-snap] *::before,
  #scorer[data-snap] *::after {
    transition: none !important;
    animation: none !important;
  }

  /* ---- phone frame ---- */
  .phone {
    position: relative;
    z-index: var(--z-raised);
    inline-size: 100%;
    max-width: 16.25rem;                 /* 260px */
    padding: var(--space-2);
    border-radius: var(--radius-xl);
    background: var(--surface-inverse);
    border: 1px solid var(--border-inverse);
    box-shadow: var(--shadow-pop);
  }
  .phone-notch {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 30%;
    block-size: 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--dm-a-cream-18);
    z-index: var(--z-raised);
  }
  .phone-screen {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--dm-axis-ink);
    /* The box exists before the bytes arrive ⇒ zero CLS (ux-spec §E.5). */
    aspect-ratio: 9 / 19.5;
  }
  .fit-photo {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    filter: saturate(1) brightness(1);
    transition: filter 260ms var(--ease-out-ux), opacity var(--t-micro) var(--ease-in-ux);
  }
  #scorer[data-state="scanning"] .fit-photo {
    filter: saturate(0.72) brightness(0.90);
    transition-duration: 180ms;
    transition-timing-function: var(--ease-std);
  }
  #scorer[data-state="swapping"] .fit-photo { opacity: 0.35; }

  /* ---- scan layer ---- */
  .scan {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast) var(--ease-std);
  }
  #scorer[data-state="scanning"] .scan { opacity: 1; }
  #scorer[data-motion="reduced"] .scan { display: none; }

  .scan-beam {
    position: absolute;
    inset-inline: 0;
    block-size: 26%;
    transform: translateY(-12%);
    background: linear-gradient(to bottom,
                transparent 0%,
                var(--dm-a-glow-24) 35%,
                var(--dm-a-glow-40) 50%,
                var(--dm-a-glow-24) 65%,
                transparent 100%);
    border-block-end: 1px solid var(--dm-glow);
  }
  #scorer[data-state="revealing"] .scan-beam,
  #scorer[data-state="revealed"] .scan-beam {
    opacity: 0;
    transform: scaleY(0.06);
    transition: opacity 200ms var(--ease-std), transform 200ms var(--ease-std);
  }

  .scan-status {
    position: absolute;
    inset-block-start: var(--space-5);
    inset-inline: var(--space-3);
    min-height: 1.4em;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--dm-a-ink-72);
    color: var(--dm-base);
    font: var(--type-label-md);
    letter-spacing: var(--tracking-label);
    text-align: center;
    opacity: 0;
    transition: opacity 160ms var(--ease-out-ux);
  }
  #scorer[data-state="scanning"] .scan-status,
  #scorer[data-motion="reduced"] .scan-status { opacity: 1; }
  @supports (backdrop-filter: blur(1px)) {
    .scan-status { backdrop-filter: var(--glass-blur); }
  }

  /* ---- verdict glass panel (inherits the .on-ink remap) ---- */
  .verdict {
    position: absolute;
    inset-inline: var(--space-2);
    inset-block-end: var(--space-2);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    min-height: 7.5rem;                 /* box pre-reserved — never display:none */
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    border: var(--glass-border);
    box-shadow: var(--shadow-pop);
    color: var(--text-primary);
    opacity: 1;
    transform: none;
    transition: opacity var(--rv-verdict-dur) var(--ease-pop),
                transform var(--rv-verdict-dur) var(--ease-pop);
  }
  /* Liquid glass, but over an ink scrim rather than a cream one: the panel
     floats on an arbitrary photograph, and --dm-a-cream-12 over a bright fit
     would drop --text-primary below AA. At 72% ink the worst case (pure white
     behind) still measures ~7.4:1 for --dm-base text. */
  @supports (backdrop-filter: blur(1px)) {
    .verdict {
      background: var(--surface-scrim);
      backdrop-filter: var(--glass-blur);
    }
  }
  #scorer[data-state="idle"] .verdict,
  #scorer[data-state="scanning"] .verdict {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
    transition-duration: 0ms;
  }
  #scorer[data-state="swapping"] .verdict {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity var(--t-micro) var(--ease-in-ux),
                transform var(--t-micro) var(--ease-in-ux);
  }

  /* ---- gauge ---- */
  .gauge {
    position: relative;
    inline-size: var(--gauge-size);
    block-size: var(--gauge-size);
    flex: none;
  }
  .gauge svg {
    inline-size: 100%;
    block-size: 100%;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }
  .gauge-track,
  .gauge-fill {
    fill: none;
    stroke-width: var(--gauge-stroke-u);
    stroke-linecap: round;
  }
  .gauge-track { stroke: var(--data-track); }
  /* Band-driven arc colour. Read from --data-band-* directly so the .on-ink
     remap applies: on the dark verdict panel crimson is only 2.56:1, so the
     high band becomes glow (7.43:1) automatically. */
  .gauge-fill {
    stroke: var(--data-band-high);
    stroke-dasharray: 326.726;
    /* Default = the shipped revealed frame (91). No-JS visitors see the arc
       already at 91 because 326.726 × (1 − 0.91) = 29.405. */
    stroke-dashoffset: var(--gauge-offset, 29.405);
  }
  #scorer[data-state="idle"] .gauge-fill,
  #scorer[data-state="scanning"] .gauge-fill,
  #scorer[data-state="swapping"] .gauge-fill { stroke-dashoffset: 326.726; }

  #scorer[data-band="mid"] .gauge-fill { stroke: var(--data-band-mid); }
  #scorer[data-band="low"] .gauge-fill { stroke: var(--data-band-low); }

  .gauge-num {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: var(--type-heading-xl);
    letter-spacing: var(--tracking-heading-xl);
    color: var(--gauge-number-fg);
    font-variant-numeric: tabular-nums;
  }
  .gauge-num span {
    min-width: 3ch;
    text-align: center;
  }

  .verdict-labels { display: grid; gap: var(--space-2); justify-items: start; }

  .band-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--chip-min-height);
    padding: var(--chip-padding-y) var(--chip-padding-x);
    border-radius: var(--chip-radius);
    background: var(--chip-solid-bg);
    color: var(--chip-solid-fg);
    font: var(--chip-font);
    letter-spacing: var(--tracking-label);
    transform: rotate(var(--chip-tilt));
    transform-origin: 50% 50%;
    transition: opacity var(--rv-band-dur) var(--ease-stamp),
                transform var(--rv-band-dur) var(--ease-stamp);
  }
  /* The chip stays crimson in every band. On the dark verdict panel a #14171a
     "Incoherent" chip would vanish, and the band WORD is what carries the
     meaning (color-not-only) — the arc colour does the tier encoding. */

  .band-chip::after {                    /* impact ring */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1.5px solid var(--dm-glow);
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
  }

  #scorer[data-state="idle"] .band-chip,
  #scorer[data-state="scanning"] .band-chip,
  #scorer[data-state="swapping"] .band-chip {
    opacity: 0;
    transform: rotate(4deg) scale(1.55);
    transition-duration: 0ms;
  }
  #scorer[data-state="revealing"] .band-chip,
  #scorer[data-state="revealed"] .band-chip {
    opacity: 1;
    transform: rotate(var(--chip-tilt)) scale(1);
    transition-delay: var(--rv-band-delay);
  }
  #scorer[data-state="revealing"] .band-chip::after {
    animation: dm-impact-ring var(--rv-ring-dur) var(--ease-out-ux) var(--rv-ring-delay) 1 both;
  }
  @keyframes dm-impact-ring {
    from { opacity: 0.5; transform: scale(1); }
    to   { opacity: 0;   transform: scale(1.5); }
  }

  .archetype {
    font: var(--type-label-md);
    letter-spacing: var(--tracking-label);
    color: var(--text-secondary);
    opacity: 1;
    transform: none;
    transition: opacity var(--rv-arch-dur) var(--ease-out-ux),
                transform var(--rv-arch-dur) var(--ease-out-ux);
  }
  #scorer[data-state="idle"] .archetype,
  #scorer[data-state="scanning"] .archetype,
  #scorer[data-state="swapping"] .archetype {
    opacity: 0;
    transform: translateY(10px);
    transition-duration: 0ms;
  }
  #scorer[data-state="revealing"] .archetype,
  #scorer[data-state="revealed"] .archetype { transition-delay: var(--rv-arch-delay); }

  /* ---- readout card ---- */
  .readout {
    position: relative;
    z-index: var(--z-raised);
    inline-size: 100%;
    padding: var(--card-padding-compact);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
    opacity: 1;
    transition: opacity var(--t-micro) var(--ease-in-ux);
  }
  #scorer[data-state="swapping"] .readout { opacity: 0; }

  .readout-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-5);
    padding-block-end: var(--space-3);
    border-block-end: var(--divider);
  }
  .readout-head h2,
  .readout-head h3 {
    font: var(--type-heading-sm);
    letter-spacing: var(--tracking-heading-sm);
  }
  .readout-time {
    font: var(--type-label-md);
    letter-spacing: var(--tracking-label);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }
  .readout-time #elapsed {
    display: inline-block;
    min-width: 2.5ch;
    text-align: end;
  }

  .axes { display: grid; gap: var(--axisbar-row-gap); }
  .axis { display: grid; gap: var(--space-2); min-height: 2.75rem; }
  .axis-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .axis-name {
    font: var(--axisbar-label-font);
    letter-spacing: var(--tracking-label);
    color: var(--axisbar-label-fg);
  }
  .axis-val {
    font: var(--axisbar-value-font);
    letter-spacing: var(--tracking-label);
    color: var(--axisbar-value-fg);
    font-variant-numeric: tabular-nums;
    min-width: 2.5ch;
    text-align: end;
  }
  .axis-track {
    block-size: var(--axisbar-track-height);
    border-radius: var(--axisbar-track-radius);
    background: var(--axisbar-track-bg);
    overflow: hidden;
  }
  .axis-bar {
    block-size: 100%;
    border-radius: var(--axisbar-track-radius);
    background: var(--axis-fill-color, var(--axisbar-fit-fill));
    transform-origin: left center;
    /* scaleX only — never width (ux-spec §F.5). --axis-fill is written by JS;
       the per-axis fallback is the shipped revealed frame for slay_after. */
    transform: scaleX(var(--axis-fill, var(--axis-fill-fallback, 1)));
    transition: transform var(--rv-axis-dur) var(--ease-out-ux);
  }
  .axis:nth-child(1) .axis-bar { --axis-fill-color: var(--axisbar-fit-fill);      --axis-fill-fallback: 0.88; --axis-order: 0; }
  .axis:nth-child(2) .axis-bar { --axis-fill-color: var(--axisbar-color-fill);    --axis-fill-fallback: 0.95; --axis-order: 1; }
  .axis:nth-child(3) .axis-bar { --axis-fill-color: var(--axisbar-cohesion-fill); --axis-fill-fallback: 0.92; --axis-order: 2; }
  .axis:nth-child(4) .axis-bar { --axis-fill-color: var(--axisbar-details-fill);  --axis-fill-fallback: 0.89; --axis-order: 3; }

  #scorer[data-state="idle"] .axis-bar,
  #scorer[data-state="scanning"] .axis-bar,
  #scorer[data-state="swapping"] .axis-bar {
    transform: scaleX(0);
    transition-duration: 0ms;
  }
  #scorer[data-state="revealing"] .axis-bar,
  #scorer[data-state="revealed"] .axis-bar {
    transition-delay: calc(var(--rv-axis-delay) + var(--axis-order) * var(--rv-axis-stagger));
  }

  .readout-read {
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-4);
    border-block-start: var(--divider);
    min-height: 2.8em;                   /* reserved from first paint — CLS */
    font: var(--type-body-sm);
    color: var(--text-secondary);
    opacity: 1;
    transform: none;
    transition: opacity var(--rv-read-dur) var(--ease-out-ux),
                transform var(--rv-read-dur) var(--ease-out-ux);
  }
  #scorer[data-state="idle"] .readout-read,
  #scorer[data-state="scanning"] .readout-read,
  #scorer[data-state="swapping"] .readout-read {
    opacity: 0;
    transform: translateY(8px);
    transition-duration: 0ms;
  }
  #scorer[data-state="revealing"] .readout-read,
  #scorer[data-state="revealed"] .readout-read { transition-delay: var(--rv-read-delay); }

  /* ---- fit switcher ---- */
  .switcher {
    position: relative;
    z-index: var(--z-raised);
    inline-size: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }
  .switcher-label {
    flex-basis: 100%;
    font: var(--type-label-md);
    letter-spacing: var(--tracking-label);
    color: var(--text-muted);
  }
  .switcher-thumbs {
    display: flex;
    gap: var(--space-3);                 /* 12px — ux-spec §B.7 */
  }
  .switcher-thumbs button {
    position: relative;
    inline-size: 4rem;                   /* 64px */
    block-size: 5rem;                    /* 80px */
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
    border: var(--chip-border-width) solid var(--border-soft);
    background: var(--surface-sunken);
    transition: var(--transition-color), transform var(--duration-fast) var(--ease-spring-soft);
  }
  .switcher-thumbs img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .switcher-thumbs button:hover { transform: translateY(var(--hover-lift)); }
  .switcher-thumbs button[aria-checked="true"] {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px var(--dm-a-crimson-32);
  }
  .switcher-thumbs button[aria-checked="true"]::after {
    content: "";
    position: absolute;
    inset-block-end: var(--space-1);
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 1.25rem;
    block-size: 0.25rem;
    border-radius: var(--radius-pill);
    background: var(--dm-crimson);
  }

  .scorer-replay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--touch-min);
    block-size: var(--touch-min);
    margin-inline-start: var(--space-4);
    border-radius: var(--radius-pill);
    border: var(--chip-border-width) solid var(--border-strong);
    color: var(--text-secondary);
    transition: var(--transition-color), transform var(--duration-fast) var(--ease-spring-soft);
  }
  .scorer-replay svg {
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .scorer-replay:hover {
    color: var(--text-accent);
    border-color: var(--border-accent);
    background: var(--surface-accent-soft);
  }
  .scorer-replay:active { transform: scale(var(--press-scale)); }
  #scorer[data-motion="reduced"] .scorer-replay { display: none; }

  .scorer-note {
    flex-basis: 100%;
    margin: 0;
    font: var(--type-body-sm);
    color: var(--text-muted);            /* CORRECTED muted token */
  }

  /* --------------------------------------------------------- BAND MARQUEE */
  .marquee-wrap {
    overflow: hidden;
    background: var(--surface-sunken);
    border-block: 1px solid var(--border-hairline);
  }
  /* The band height is reserved unconditionally — hiding an empty row and
     revealing it once JS builds the chips would be a guaranteed layout shift.
     The seven chips should be server-rendered into #marqueeRow; JS only
     clones the row for the loop. */

  .marquee {
    display: flex;
    inline-size: max-content;
    animation: dm-marquee 34s var(--ease-linear) infinite;
  }
  .marquee:hover,
  .marquee:focus-within { animation-play-state: paused; }

  @keyframes dm-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }

  .marquee-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-2);
    block-size: 5.5rem;                  /* fixed row height — no CLS */
  }

  .marquee-item {
    display: inline-flex;
    align-items: center;
    gap: var(--chip-gap);
    flex: none;
    min-height: var(--chip-min-height);
    padding: var(--chip-padding-y) var(--chip-padding-x);
    border-radius: var(--chip-radius);
    background: var(--chip-bg);
    color: var(--chip-fg);
    border: var(--chip-border-width) solid var(--chip-border);
    box-shadow: var(--chip-shadow);
    font: var(--chip-font);
    letter-spacing: var(--tracking-label);
    white-space: nowrap;
    transform: rotate(var(--chip-tilt));
  }
  .marquee-item:nth-child(even) { transform: rotate(var(--chip-tilt-alt)); }
  .marquee-item::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--band-dot, var(--data-band-mid));
    flex: none;
  }
  .marquee-item[data-band="high"] { --band-dot: var(--dm-band-high); }
  .marquee-item[data-band="mid"]  { --band-dot: var(--dm-band-mid); }
  .marquee-item[data-band="low"]  { --band-dot: var(--dm-band-low); }

  /* ------------------------------------------------------- HOW IT WORKS */
  .steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    counter-reset: step;
  }
  .step {
    position: relative;
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: var(--card-padding-compact);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
  }
  .step:hover {
    transform: translateY(var(--card-hover-lift));
    box-shadow: var(--card-shadow-hover);
  }
  .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--card-icon-size);
    block-size: var(--card-icon-size);
    border-radius: var(--card-icon-radius);
    background: var(--card-icon-bg);
    color: var(--card-icon-fg);
    font: var(--type-heading-sm);
    letter-spacing: var(--tracking-heading-sm);
    transform: rotate(var(--chip-tilt));
  }
  .step h3 {
    font: var(--type-heading-md);
    letter-spacing: var(--tracking-heading-md);
  }
  .step p { font: var(--type-body-sm); color: var(--text-secondary); }

  /* ---------------------------------------------------- THE FOUR AXES */
  .axes-sec {
    position: relative;
    background: var(--surface-page);
    color: var(--text-primary);
  }
  .drip-edge {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--drip-divider-height);
    line-height: 0;
    pointer-events: none;
    overflow: clip;                      /* tidies the path's 4px geometry bleed */
  }
  .drip-edge svg {
    inline-size: 100%;
    block-size: 100%;
  }
  /* Resolved inside .axes-sec, where .on-ink maps --surface-inverse back to
     the oat base — so the drips read as the light section pouring downward. */
  .drip-edge path { fill: var(--surface-inverse); }

  .axis-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  .axis-card {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: var(--card-padding-compact);
    border-radius: var(--card-radius);
    background: var(--surface-raised);
    border: 1px solid var(--border-soft);
    transition: var(--card-transition);
  }
  @supports (backdrop-filter: blur(1px)) {
    .axis-card { backdrop-filter: var(--glass-blur); }
  }
  .axis-card:hover {
    transform: translateY(var(--card-hover-lift));
    border-color: var(--border-accent);
  }
  .axis-ico {
    inline-size: var(--icon-lg);
    block-size: var(--icon-lg);
    fill: none;
    stroke: var(--text-accent);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .axis-ico .dot { fill: var(--text-accent); stroke: none; }
  .axis-card h3 {
    font: var(--type-heading-md);
    letter-spacing: var(--tracking-heading-md);
  }
  .axis-card p { font: var(--type-body-sm); color: var(--text-secondary); }

  /* The arithmetic proof line closing .axes-sec. It carries .sec-sub as well,
     so it must sit in this layer (base loses to components) and it must win on
     source order. It is a footnote, not a paragraph: quieter, smaller, centred
     under the centred header, and clearly separated from the card grid. */
  .sec-sub-note {
    margin-block-start: var(--space-10);
    margin-inline: auto;
    max-width: 46ch;
    font: var(--type-body-sm);
    color: var(--text-muted);
    text-align: center;
    text-wrap: balance;
  }

  /* ------------------------------------------------------- SCORE BANDS */
  /* A ranked ladder, not a list: one continuous left rail runs the full height
     of the card, stepping crimson → slate → ink as the bands descend from
     Editorial to Incoherent. Colour comes from data-band (BRIEF §3) but never
     carries the meaning on its own — the band word and its description do.
     No numeric ranges: the cut-offs are not verified (copy-deck §B.4). */
  .band-list {
    display: grid;
    border-radius: var(--card-radius);
    background: var(--surface-raised);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
    overflow: hidden;                    /* keeps the rail inside the radius */
  }

  .band-row {
    --band-rail: var(--dm-band-mid);
    position: relative;
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-4);
    padding-inline: calc(var(--space-5) + var(--space-2)) var(--space-5);
  }
  .band-row[data-band="high"] { --band-rail: var(--dm-band-high); }
  .band-row[data-band="mid"]  { --band-rail: var(--dm-band-mid); }
  .band-row[data-band="low"]  { --band-rail: var(--dm-band-low); }

  .band-row::before {                    /* the rail segment */
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 0.25rem;
    background: var(--band-rail);
  }
  /* The divider starts *after* the rail so the ladder reads as one unbroken
     line rather than seven detached ticks. */
  .band-row + .band-row::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0.25rem 0;
    block-size: 1px;
    background: var(--border-hairline);
  }

  .band-name {
    font: var(--type-heading-sm);
    letter-spacing: var(--tracking-heading-sm);
    color: var(--band-rail);             /* 7.12 / 10.1 / 18.6:1 on white */
  }
  .band-desc {
    font: var(--type-body-sm);
    color: var(--text-secondary);
  }

  /* ---------------------------------------------------------- FEATURES */
  .feats-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  .feat {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: var(--card-padding-compact);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
  }
  .feat:hover {
    transform: translateY(var(--card-hover-lift));
    box-shadow: var(--card-shadow-hover);
  }
  .feat h3 {
    font: var(--type-heading-md);
    letter-spacing: var(--tracking-heading-md);
  }
  .feat p { font: var(--type-body-sm); color: var(--text-secondary); }
  .feat-meta {
    font: var(--type-label-md);
    letter-spacing: var(--tracking-label);
    color: var(--text-muted);            /* CORRECTED muted token */
  }
  .spark {
    margin-block-start: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--card-media-radius);
    background: var(--surface-page);
    border: 1px solid var(--border-hairline);
  }
  .spark svg {
    inline-size: 100%;
    block-size: 4.5rem;
  }
  .spark-line {
    fill: none;
    stroke: var(--text-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .spark-legend {
    display: flex;
    justify-content: space-between;
    margin-block-start: var(--space-2);
    font: var(--type-label-md);
    letter-spacing: var(--tracking-label);
    color: var(--text-muted);
  }

  /* ----------------------------------------------------------- PRICING */
  .plans {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: stretch;
  }
  .plan {
    position: relative;
    display: grid;
    gap: var(--plan-gap);
    align-content: start;
    padding: var(--plan-padding-sm);
    border-radius: var(--plan-radius);
    background: var(--surface-raised);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
    transition: var(--transition-lift);
  }
  .plan:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-lift);
  }
  .plan-pro {
    background: var(--dm-ink);
    border: 1.5px solid var(--border-soft);
    box-shadow: var(--shadow-pop);
  }
  .plan-flag {
    position: absolute;
    inset-block-start: -0.75rem;
    inset-inline-end: var(--space-6);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--plan-badge-bg);
    color: var(--plan-badge-fg);
    font: var(--type-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    transform: rotate(var(--plan-badge-tilt));
  }
  .plan-name {
    font: var(--type-heading-lg);
    letter-spacing: var(--tracking-heading-lg);
    color: var(--text-primary);
  }
  .plan-price {
    font: var(--type-display-lg);
    letter-spacing: var(--tracking-display-lg);
    color: var(--text-primary);
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .plan-price span {
    font: var(--type-label-lg);
    letter-spacing: var(--tracking-label);
    color: var(--text-muted);
  }
  .plan-list { display: grid; gap: var(--space-3); }
  .plan-list li {
    position: relative;
    padding-inline-start: calc(var(--plan-check-size) + var(--space-3));
    font: var(--type-body-sm);
    color: var(--text-secondary);
  }
  .plan-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.28em;
    inline-size: var(--plan-check-size);
    block-size: var(--plan-check-size);
    background: currentColor;
    color: var(--text-accent);
    /* SVG tick as a mask — no emoji, no extra HTTP request. */
    -webkit-mask: var(--tick-mask) center / contain no-repeat;
    mask: var(--tick-mask) center / contain no-repeat;
  }
  .plan-list li strong { color: var(--text-primary); }
  .plan .btn { margin-block-start: var(--space-2); }

  :root {
    --tick-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.6 17 4 11.4'/%3E%3C/svg%3E");
  }

  /* ------------------------------------------------------- DOWNLOAD CTA */
  .get {
    background: var(--surface-page);
    color: var(--text-primary);
  }
  .get-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
  }
  .get-copy { display: grid; gap: var(--space-5); justify-items: start; }
  .get-title {
    font: var(--type-display-lg);
    letter-spacing: var(--tracking-display-lg);
    max-width: var(--measure-display);
  }
  .get-title-accent { color: var(--text-accent); }
  .get-sub {
    font: var(--type-body-lg);
    color: var(--text-secondary);
    max-width: 46ch;
  }
  /* Second paragraph — same role, one step quieter than the lede above it.
     Carries .get-sub too, so it relies on source order to win. */
  .get-sub-body {
    font: var(--type-body-md);
    color: var(--text-muted);
    max-width: 52ch;
  }

  .get-actions { display: grid; gap: var(--space-3); justify-items: start; }
  .get-meta {
    font: var(--type-body-sm);
    color: var(--text-muted);            /* CORRECTED muted token — 7.49:1 on ink */
  }

  /* Three verified facts standing in for the social proof we refuse to invent.
     Stacked on mobile, an inline ticked row from 768 up — deliberately not a
     bulleted list: these read as claims, not as features. */
  .get-proof {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
  }
  .get-proof li {
    position: relative;
    padding-inline-start: calc(var(--icon-sm) + var(--space-3));
    font: var(--type-body-sm);
    color: var(--text-secondary);
  }
  .get-proof li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.24em;
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
    background: currentColor;
    color: var(--text-accent);           /* glow on ink */
    -webkit-mask: var(--tick-mask) center / contain no-repeat;
    mask: var(--tick-mask) center / contain no-repeat;
  }

  /* The brand's own joke. Set apart by a short glow rule rather than a border
     or a box — a wink, not a legal footnote. */
  .get-close {
    position: relative;
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-4);
    font: var(--type-body-sm);
    color: var(--text-muted);
    letter-spacing: var(--tracking-body);
  }
  .get-close::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 2rem;
    block-size: 2px;
    border-radius: var(--radius-pill);
    background: var(--text-accent);
  }

  /* Decorative brand mark. It is a <div>, and the 384KB PNG is attached as a
     background *inside the ≥1024 query where the element is actually shown* —
     a background in an unmatched media query is never fetched, whereas
     display:none on an <img src> does not reliably prevent the request. */
  .get-mark {
    display: none;
    inline-size: 100%;
    max-width: 22rem;
    justify-self: center;
    aspect-ratio: 585 / 764;             /* true intrinsic — no distortion */
    opacity: 0.92;
  }

  /* -------------------------------------------------------------- FOOTER */
  .foot {
    background: var(--dm-axis-ink);
    color: var(--text-primary);
    padding-block: var(--sec-pad);
    border-block-start: 1px solid var(--border-hairline);
  }
  .foot-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .foot-brand { display: grid; gap: var(--space-3); justify-items: start; }
  /* The tagline. :not() keeps it from also claiming .foot-org — `.foot-brand p`
     is (0,1,1) and would otherwise outrank a bare `.foot-org` (0,1,0). */
  .foot-brand p:not(.foot-org) {
    font: var(--type-body-md);
    color: var(--text-secondary);        /* 12.60:1 — the louder of the two */
    max-width: 34ch;
  }
  /* The org paragraph sits a clear step below the tagline: smaller, quieter,
     wider measure because it is a longer read. 7.9:1 on the footer's axis-ink. */
  .foot-org {
    font: var(--type-body-sm);
    color: var(--text-muted);
    max-width: 46ch;
  }
  .foot-col { display: grid; gap: var(--space-1); align-content: start; }
  .foot-col h4,
  .foot-col-title {
    margin-block-end: var(--space-2);
    font: var(--type-label-md);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .foot-col a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    font: var(--type-body-sm);
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition-color);
  }
  .foot-col a:hover {
    color: var(--text-accent);
    text-decoration: underline;
  }
  .foot-base {
    display: grid;
    gap: var(--space-2);
    margin-block-start: var(--space-10);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--border-hairline);
  }
  .foot-base p {
    font: var(--type-body-sm);
    color: var(--text-muted);            /* CORRECTED muted token */
  }

  /* ------------------------------------------- SCROLL REVEAL (JS-added) */
  [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--duration-slow) var(--ease-out-ux)
                calc(var(--reveal-i, 0) * var(--stagger-step)),
                transform var(--duration-slow) var(--ease-out-ux)
                calc(var(--reveal-i, 0) * var(--stagger-step));
  }
  [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   5 · RESPONSIVE — ux-spec §D. Four breakpoints, min-width only.
   Lives in its own layer so it always wins over `components`.
   ========================================================================== */
@layer responsive {

  /* ---------------------------------------------------------------- 375+ */
  @media (min-width: 375px) {
    :root { --gutter: 1.25rem; }
  }

  /* ---------------------------------------------------------------- 768+ */
  @media (min-width: 768px) {
    :root {
      --shell-max: 45rem;    /* 720px */
      --gutter:    2rem;     /* 32px  */
      --nav-h:     4rem;     /* 64px  */
      --sec-pad:   4.5rem;   /* 72px  */
      --drip-divider-height: 4.5rem;
    }

    .nav-links { display: flex; }
    .nav-inner .btn-sm { margin-inline-start: var(--space-4); }

    .hero-copy { max-width: 40rem; }

    /* Scorer goes internally two-up: phone left, readout right. */
    .scorer {
      grid-template-columns: 16.25rem minmax(0, 1fr);
      gap: var(--space-6);
      align-items: start;
      justify-items: stretch;
    }
    .switcher { grid-column: 1 / -1; }
    .switcher-thumbs button { inline-size: 3.5rem; block-size: 4.5rem; }

    .steps      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .axis-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }

    /* Band name and description sit side by side, names aligned in a column so
       the seven-rung ladder reads as one scale. */
    .band-row {
      grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
      gap: var(--space-5);
      align-items: baseline;
      padding-block: var(--space-5);
    }

    /* Three facts on one line, wrapping only if they must. */
    .get-proof {
      flex-direction: row;
      flex-wrap: wrap;
      column-gap: var(--space-6);
      row-gap: var(--space-3);
    }

    .feats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feat-wide  { grid-column: 1 / -1; }

    .plans {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-6);
    }
    .plan { padding: var(--plan-padding); }

    .foot-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .foot-brand { grid-column: 1 / -1; }
    .foot-base  { grid-template-columns: auto auto; justify-content: space-between; }
  }

  /* --------------------------------------------------------------- 1024+ */
  @media (min-width: 1024px) {
    :root {
      --shell-max: 67.5rem;  /* 1080px */
      --gutter:    2.5rem;   /* 40px   */
      --nav-h:     4.5rem;   /* 72px   */
      --sec-pad:   6rem;     /* 96px   */
      --drip-divider-height: 5.625rem;
      --gauge-size: 7.5rem;  /* 120px  */
    }

    .hero-grid {
      grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
      gap: var(--space-12);
    }
    .hero-copy { max-width: none; }

    .scorer { grid-template-columns: 17.5rem minmax(0, 1fr); }   /* phone 280 */
    .phone  { max-width: 17.5rem; }
    .scorer-glow { filter: blur(80px); }

    /* At 1024 the phone is 280px wide → ~586px tall, and the readout's own
       content is ~630px: the card is already the taller of the two, so tops
       align and nothing needs balancing. */
    .readout {
      align-self: start;
      padding: var(--card-padding);
    }
    .readout-head { margin-block-end: var(--space-6); }

    .axis-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* The seven one-liners are short; at the full 1080/1200 shell the card
       leaves a dead zone to the right of every description. Capped and centred
       on the same rhythm as .plans. */
    .band-list { max-width: 55rem; margin-inline: auto; }
    .band-row  { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }

    .feats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .plans {
      gap: var(--space-8);
      max-width: 55rem;      /* 880px */
      margin-inline: auto;
    }

    .get-inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
      gap: var(--space-12);
    }
    /* The only place dripmax_mark.png is referenced. Below 1024 this rule does
       not match, so the 384KB PNG is never requested. */
    .get-mark {
      display: block;
      background-image: url("../img/dripmax_mark.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    /* auto-fit rather than a hardcoded 4 tracks: the Legal column was dropped
       (no Privacy/Terms pages yet), and a fixed count left a dead track on the
       right. Empty tracks collapse, so this stays correct at 2, 3 or 4 navs. */
    .foot-inner { grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(8rem, 1fr)); }
    .foot-brand { grid-column: auto; }
  }

  /* --------------------------------------------------------------- 1440+ */
  @media (min-width: 1440px) {
    :root {
      --shell-max: 75rem;    /* 1200px — hard cap */
      --gutter:    3rem;     /* 48px   */
      --sec-pad:   7rem;     /* 112px  */
    }

    .hero-grid {
      grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
      gap: 4.5rem;           /* 72px */
    }
    .scorer { grid-template-columns: 20rem minmax(0, 1fr); }      /* phone 320 */
    .phone  { max-width: 20rem; }

    /* Only here does the phone (320px wide → ~672px tall) outgrow the readout.
       A roomier axis rhythm absorbs most of the difference and centring splits
       what is left evenly above and below, so the card reads as deliberately
       balanced against the phone rather than half-empty beside it. */
    .readout {
      align-self: center;
      --axisbar-row-gap: var(--space-7);
    }

    .axis-cards { gap: var(--space-6); }
    .plans      { gap: var(--space-10); max-width: 60rem; }        /* 960px */
    .band-list  { max-width: 60rem; }
  }

  /* Landscape phone: never lock the hero to viewport height. */
  @media (max-height: 480px) and (orientation: landscape) {
    main > section.hero { padding-block-start: calc(var(--nav-h) + var(--space-8)); }
  }
}

/* ==========================================================================
   6 · FOCUS — one contract, every interactive element, both contexts
   ========================================================================== */
@layer focus {
  :where(a, button, [role="button"], [role="radio"], input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: inherit;
  }

  /* The thumbs sit on top of photography — add an inner hairline so the ring
     reads against any image (ux-spec §B.7). */
  .switcher-thumbs button:focus-visible {
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--dm-cream) inset;
  }

  .skip-link:focus-visible {
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--dm-ink);
    outline-offset: var(--focus-ring-offset);
  }

  /* Browsers without :focus-visible must still get a ring on plain :focus. */
  @supports not selector(:focus-visible) {
    a:focus, button:focus, [role="button"]:focus, [role="radio"]:focus,
    input:focus, select:focus, textarea:focus, summary:focus, [tabindex]:focus {
      outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }
}

/* ==========================================================================
   7 · REDUCED MOTION — BRIEF §11.5, a hard requirement.
   Neutralises every animation, transition, tilt, stagger and overshoot.
   ========================================================================== */
@layer motion {
  @media (prefers-reduced-motion: reduce) {

    /* MASTER §7 token collapse */
    :root {
      --duration-instant: 1ms; --duration-fast: 1ms;   --duration-base: 1ms;
      --duration-slow:    1ms; --duration-slower: 1ms; --duration-scene: 1ms;
      --duration-ticker:  1ms;

      --t-micro: 1ms; --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; --t-sweep: 1ms;

      --ease-spring: linear; --ease-spring-soft: linear;
      --ease-spring-big: linear; --ease-anticipate: linear;
      --ease-pop: linear; --ease-stamp: linear; --ease-sweep: linear;

      --stagger-step: 0ms; --stagger-axis: 0ms;
      --reveal-offset: 0px; --reveal-scale: 1;
      --hover-lift: 0px; --press-scale: 1;
      --tilt-chip: 0deg; --tilt-chip-alt: 0deg;

      /* Scorer reveal choreography collapses to a single frame. */
      --rv-verdict-dur: 0ms; --rv-band-delay: 0ms; --rv-band-dur: 0ms;
      --rv-ring-delay:  0ms; --rv-ring-dur:   0ms;
      --rv-arch-delay:  0ms; --rv-arch-dur:   0ms;
      --rv-axis-delay:  0ms; --rv-axis-dur:   0ms; --rv-axis-stagger: 0ms;
      --rv-read-delay:  0ms; --rv-read-dur:   0ms;
    }

    /* Belt-and-braces global reset (ux-spec §B.6). */
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      transition-delay: 0ms !important;
      animation-delay: 0ms !important;
      scroll-behavior: auto !important;
    }

    html { scroll-behavior: auto !important; }

    /* No lift, no press-scale, no hover translate anywhere. */
    .btn:hover, .btn:active,
    .step:hover, .feat:hover, .plan:hover, .axis-card:hover,
    .switcher-thumbs button:hover, .scorer-replay:active {
      transform: none !important;
    }

    /* Static tilt is style, not motion — but the *sticker* tilt on chips that
       also animate is removed so nothing reads as mid-flight. The band chip
       keeps its resting −3deg per ux-spec §B.6 (it is rendered, not stamped). */
    .marquee-item,
    .marquee-item:nth-child(even),
    .step-num,
    .plan-flag { transform: none !important; }

    /* Decorative infinite animations must stop (continuous-animation rule). */
    .pulse::after { animation: none !important; opacity: 0 !important; }
    .band-chip::after { animation: none !important; opacity: 0 !important; }

    /* Marquee becomes a static wrapped tag list; the duplicate row is hidden
       so the seven band names are never rendered twice. */
    .marquee {
      animation: none !important;
      inline-size: 100%;
      flex-wrap: wrap;
    }
    .marquee-row[aria-hidden="true"] { display: none; }
    .marquee-row {
      flex-wrap: wrap;
      block-size: auto;
      inline-size: 100%;
      justify-content: center;
      padding-inline: var(--gutter);
    }
    .marquee-wrap { overflow: visible; }

    /* The scan phase does not exist under reduced motion. */
    .scan, .scan-beam { display: none !important; }

    /* Scroll reveals are skipped entirely — content visible from first paint. */
    [data-reveal] { opacity: 1 !important; transform: none !important; }

    .skip-link { transition: none !important; }
  }
}

/* ==========================================================================
   9 · APP SCREENS (.shots) — App Store screenshot strip.
   Mobile: horizontal scroll-snap rail. ≥1024px: static 4-up grid.
   ========================================================================== */
@layer components {
  .shots-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(68vw, 17rem);
    gap: var(--space-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--space-5);
    /* let phones peek past the shell edge on small screens */
    scroll-padding-inline: var(--space-5);
    -webkit-overflow-scrolling: touch;
  }

  .shot { scroll-snap-align: center; }

  .shot img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }
}

@layer responsive {
  @media (min-width: 1024px) {
    .shots-row {
      grid-auto-flow: row;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-auto-columns: unset;
      overflow-x: visible;
      scroll-snap-type: none;
      padding-block-end: 0;
    }
  }
}