/* ==========================================================================
   Smart Sifty - marketing site design system (prototype, phase 1)
   --------------------------------------------------------------------------
   Layers ........ reset, tokens, base, layout, components, pages, utilities.
                   Page fragments add CSS only inside
                   @layer pages { @scope ([data-page="<route>"]) { ... } }.
   Themes ........ light on bare :root; dark under prefers-color-scheme (when
                   not forced light) and under :root[data-theme="dark"].
                   Components never use literal colours - tokens only.
   Surfaces ...... .band (navy) and .on-accent (electric blue) re-map the
                   tokens locally, so every component below works inside them.

   COMPONENT VOCABULARY
   Layout ........ .wrap  .section (--tint --surface --band --tight --flush)
                   .stack (--gap: <len>)  .cluster  .split (--wide-left --wide-right --center)
                   .grid (--2 --3 --4)  .auto-grid (--min: <len>)
   Type .......... .eyebrow (+ .eyebrow__num)  .display-1  .display-2  .h2  .h3  .h4
                   .lede  .small  .mono  .accent-text  .source  .legal-note  .kicker
   Section head .. .section-head (+ --split)  __title via .h2, __lede via .lede
   Buttons ....... .btn --primary --secondary --ghost --on-accent --outline-light --lg --sm --block
                   .icon-btn  .link-arrow  .quiet-link  .copy-field (__lead __text __btn)
   Chips ......... .chip --good --warn --critical --info --neutral --accent (+ .chip__dot)
                   .label-chip --blue --teal --violet --amber --slate --green
                   .badge --sample --accent --outline --band   .model-chip (+ .ai-icon)
   Evidence ...... .ev-badge[data-kind="research|result|illustrative|sample"] - one quiet badge per
                   figure or mock; the kind sets tint + marker: research (external survey or study,
                   accent, filled dot) | result (Smart Sifty's own reported outcome, green, diamond) |
                   illustrative (modelled scenario or calculator, neutral, hollow dot) | sample
                   (fictional mock data, amber, hollow square). Text: Research | Result |
                   Illustrative | Sample data. On blue/navy surfaces the tint drops to neutral and
                   the marker alone tells the kinds apart.
   Cards ......... .card --tint --raised --accent --band --interactive --flat  .card__title .card__foot
   Stats ......... .stat (__figure __label __note __source)  .stat-grid  .hero-stat (brochure blue card)
   Callouts ...... .callout --band --accent --rule  (+ .callout__label .callout__text)
   CTA band ...... .cta-band (+ __inner __title __lede __actions)
   Tables ........ .table-wrap  .data-table (--stack: stacks rows below 440px of container,
                   cells need data-label)  td/th.is-hl
   Lists ......... .check-list  .cross-list  .compare (+ .compare__col --without --with)
                   .num-steps (numbered sequence with scroll-linked progress line, --n: <count>)
   Charts ........ .chart (__title __legend __note __canvas)  .bars (.bar .bar__seg --2, --v: 0-100)
                   .meter (--v)  .ring (--target: 0-100, --size)  .vs-bars (two-bar comparison)
                   JS: SS.charts.line(el, opts); on navy surfaces the series uses --accent-text
   Calculator .... .calc  .field (__label __hint)  .input (--auto: field-sizing)  .range
                   .seg (segmented radio group)  .result (__figure __rows)
   Disclosure .... .faq (details[name] accordion, animated height)  .tabs (__list, [role=tab], [role=tabpanel])
   Product mocks . .app-frame (__bar __crumbs __body)  .kpi (__label __value __delta)
                   .lb (leaderboard; JS: SS.leaderboard.mount)  .drawer (shared evidence dialog)
                   .audit (mono decision log)  .report-doc
   Pricing ....... [data-plans] shared block (Home 07 + Pricing; JS: SS.pricing.mount): .billing (.seg Monthly |
                   Annual + __save) > .tiers > .tier (__head __top __kicker __badge __name __price __amount __per
                   __bill __runs (__cline credits + __vs, __or; or custom volume + __diff extras) __what (__ai:
                   __sub + __evals > __eval (mark + name, .is-off: __eoff); __mods: __sub + __mlist > li.is-on
                   (included modules only: __ficon __fname, add-ons tagged __perrun)) __act __alt; --featured) > .tiers-note > .tiers-foot (.incl
                   "Included in every plan" + .tiers-talk). .price--monthly / .price--annual anywhere on the page
                   follow the page's switch (:has on [data-page], data-billing fallback)
   Page hero ..... .page-hero (__grid __copy)  .hero-stat
   Stubs ......... .stub-banner  .stub-plan  .stub-item  .skeleton (--cols --h; --chart --table)
   Motion ........ .stagger (children enter with sibling-index() delays)
   Utilities ..... .sr-only  .nowrap  .tabular  .center  .mt-0 .mt-s .mt-m .mt-l  .max-prose

   ROUND 5 KIT - the "alive" layer, one language on every page (guide: _temp/site-kit-round5.md)
   K1 Stage ...... .section--stage (deep-navy stage: fine grid + one slow glow; re-maps tokens like .band;
                   --glow-x --glow-y move the glow, --grid-x --grid-y the grid focus)  .stage-surface (re-map only)
   K2 Headings ... .tone (the accent "turn" of a heading, words already in it)  .tone--nl (turn on a new line;
                   below 560px no forced break, the heading balances instead);
                   .display-1 .display-2 .h2 .cta-band__title: Montserrat 700, -0.03em; eyebrows are mono
   K3 Figures .... .fig-grid (--min)  .fig (__head __kicker __index __value __unit __label __signal)
                   [data-signal="1-4"] decorative bar strip (deprecated in round 6, P4: do not use)  [data-count] count-up
   K4 Flow ....... .flow-panel (dark canvas, container "flow")  .flow-canvas (gridded area)  .flow-node (__tile
                   __title __meta, --hub pulses)  .flow-graph (__col; collapses to a list below 540px of panel)
                   .flow-band (__row __end __icon __title __text __core __tag --in --out)  .flow-anchor (--out)
                   JS: [data-flow][data-flow-links="a>hub hub>b"] draws flowing dashed connectors (SS.flow.mount)
   K5 Stepper .... .stepper[data-stepper][data-interval] (__track __list __tab __dot __label __toggle __panel
                   __copy __kicker __title __text)  .mini-panel (__head __icon __crumb __body __foot __time __event)
                   .skel (--w, --accent)  .mini-row  .mini-bars  JS: SS.stepper(el) - tabs + auto-advance + pause
   K6 Hub ........ .hub[data-tabs][data-flow] (__nodes [role=tablist] __node [role=tab] __center __panel __icon
                   __kicker __title __text __note; option .hub--pulse = slow concentric rings); a vertical list +
                   the centre card at 720px and below. Panels are not [hidden] in the HTML: SS.tabs hides them
   K7 Live dot ... .live-dot (a live state, e.g. "from today") - slow pulse; never a bare "Interactive" (round 6 P3)
   K8 Details .... .card--detail (+ .card__head .card__kicker .card__icon; bottom hairline fills on hover / in view)
   K9 Callout .... .callout-strip (__icon __text __go[data-jump]) - one per page, sentence already on the site
   K10 Watermark . .watermark (--left --top) - one per page, aria-hidden, the host section clips it
   K11 Pricing ... .tier--featured is a dark card with the accent CTA; .tier__amount is mono; .seg active pill is dark
   K12 FAQ ....... .faq-split (__aside __note) + .faq (numbers itself, open item in the accent)  .link-rule
   K13 Final CTA . .cta-band = shared dark stage, centred, network injected by JS (+ __note: mono line); it blends
                   into the footer (--close) as one dark close; .net = solid fading curves, clean nodes, soft pulses
   K14 Motion .... [data-reveal] [data-reveal-stagger] [data-count] [data-bars] [data-draw] (SS.charts) [data-ambient]
                   JS: SS.motion.scan(root) | settle(root) | replay(root) | allowed(); reduced motion = final state
                   settle() also dispatches "ss:settle" on document (page-owned loops jump to their final state)

   ROUND 6 - mocks follow the real app (_temp/site-product-facts.md); usage guide: _temp/site-kit-round5.md
   Tabs .......... .tabs__list = segmented control with a sliding pill (JS appends span.tabs-ind)
                   .line-tabs[data-indicator] = slim one-line underline tabs with a sliding accent line
   Leaderboard ... .lb: # | Score (%) | Name | Status | Tags | Labels | view (no avatars, no rings; mono rank,
                   accent rail on the top row; Tags/Labels disappear when empty) + .lb-hint (P3 hint, built in)
                   + .lb-filters ("Edit Filters": Min Score, Show Top, Recent Only, Labels, Reset All)
   Small parts ... .tag-chip (--amber; group tags such as Internal group)  .label-dot--<tone>  .switch  .seg--sm
   Drawer ........ .drawer = candidate detail: .dr-profile .dr-overall .breakdown .dr-sum .dr-labels .notes
                   .note-form .dr-integ (.audit / .review-form kept as legacy styles only)
   ========================================================================== */

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

/* Registered custom properties (animatable) */
@property --score {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --fill {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ol[class], ul[class] { list-style: none; padding: 0; }
  img, svg, video { display: block; max-width: 100%; }
  svg { flex-shrink: 0; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
  legend { padding: 0; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
}

/* ----------------------------------------------------------------- tokens */
@layer tokens {
  /* Theme-invariant tokens: type, space, radii, motion, brand marks */
  :root {
    --font-display: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --step--2: 0.75rem;
    --step--1: 0.875rem;
    --step-0: 1.0625rem;
    --step-1: clamp(1.125rem, 1.06rem + 0.3vw, 1.3rem);
    --step-2: clamp(1.3rem, 1.15rem + 0.65vw, 1.7rem);
    --step-3: clamp(1.7rem, 1.25rem + 1.55vw, 2.6rem);
    --step-4: clamp(2rem, 1.45rem + 2.3vw, 3.25rem);
    --step-hero: clamp(2.1rem, 1.25rem + 3.4vw, 3.55rem);

    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
    --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

    --page-max: 75rem;
    --gutter: clamp(16px, 4vw, 48px);
    --section-pad: clamp(56px, 7.5vw, 112px);
    --header-h: 68px;

    --r-xs: 6px; --r-sm: 8px; --r-md: 11px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);
    --dur-1: 140ms; --dur-2: 240ms; --dur-3: 420ms; --dur-4: 900ms;

    /* Brand anchors from the brochures */
    --navy: oklch(0.264 0.077 265.9);
    --blue: oklch(0.568 0.238 261.8);
    --white: oklch(1 0 0);

    /* AI evaluator marks (model brand accents, same in both themes) */
    --aurora-1: oklch(0.839 0.115 198.7);
    --aurora-2: oklch(0.678 0.18 287.1);
    --aurora-3: oklch(0.735 0.163 21.9);
    --meridian-1: oklch(0.652 0.19 253.2);
    --meridian-2: oklch(0.293 0.062 237);
    --ai-glyph: oklch(1 0 0);

    /* Label chip palette (solid chips, like the product) */
    --label-blue: oklch(0.54 0.21 262);
    --label-teal: oklch(0.52 0.09 195);
    --label-violet: oklch(0.52 0.17 295);
    --label-amber: oklch(0.84 0.14 82);
    --label-slate: oklch(0.5 0.03 265);
    --label-green: oklch(0.52 0.12 155);
    --label-ink-dark: oklch(0.264 0.077 265.9);
    --label-ink-light: oklch(1 0 0);
  }

  /* Light theme (brand default) */
  :root {
    color-scheme: light;
    --bg: oklch(0.988 0.005 262);
    --surface: oklch(1 0 0);
    --surface-2: oklch(0.972 0.011 262);
    --surface-3: oklch(0.944 0.02 262);
    --line: oklch(0.915 0.017 262);
    --line-strong: oklch(0.84 0.025 262);
    --ink: oklch(0.264 0.077 265.9);
    --ink-2: oklch(0.4 0.045 265);
    --ink-3: oklch(0.5 0.03 265);
    --accent: oklch(0.568 0.238 261.8);
    --accent-hover: oklch(0.5 0.23 262);
    --accent-text: oklch(0.52 0.22 262);
    --accent-soft: oklch(0.955 0.03 262);
    --accent-soft-2: oklch(0.905 0.06 262);
    --on-accent: oklch(1 0 0);
    --on-accent-2: oklch(0.93 0.035 262);
    --band: oklch(0.264 0.077 265.9);
    --band-2: oklch(0.315 0.082 265);
    --band-3: oklch(0.36 0.08 265);
    --band-line: oklch(0.4 0.07 265);
    --band-ink: oklch(0.985 0.005 262);
    --band-ink-2: oklch(0.86 0.03 262);
    --band-ink-3: oklch(0.76 0.04 262);
    --band-accent: oklch(0.76 0.13 258);
    --good: oklch(0.5 0.12 155);
    --good-soft: oklch(0.955 0.04 155);
    --warn: oklch(0.5 0.11 65);
    --warn-soft: oklch(0.962 0.05 85);
    --critical: oklch(0.52 0.19 25);
    --critical-soft: oklch(0.955 0.03 25);
    --focus: oklch(0.568 0.238 261.8);
    --shadow-c: oklch(0.264 0.077 265.9 / 0.07);
    --shadow-c2: oklch(0.264 0.077 265.9 / 0.14);
    --scrim: oklch(0.22 0.06 265 / 0.42);
    --glass: oklch(0.988 0.005 262 / 0.82);
    --hatch: oklch(0.264 0.077 265.9 / 0.05);
    /* K1 stage + dark kit panels (light theme: deep navy islands on a light page) */
    --stage: oklch(0.235 0.068 265.5);
    --stage-2: oklch(0.285 0.072 265);
    --stage-3: oklch(0.33 0.075 265);
    --stage-line: oklch(0.375 0.066 265);
    --stage-line-2: oklch(0.47 0.07 264);
    --stage-edge: oklch(0.235 0.068 265.5);
    --stage-grid: oklch(0.74 0.09 262 / 0.085);
    --stage-glow: oklch(0.58 0.22 262 / 0.46);
    --stage-ink: oklch(0.985 0.005 262);
    --stage-ink-2: oklch(0.88 0.025 262);
    --stage-ink-3: oklch(0.78 0.035 262);
    --stage-accent: oklch(0.79 0.12 258);
    --stage-accent-soft: oklch(0.34 0.1 262);
    --stage-accent-soft-2: oklch(0.42 0.13 262);
    --stage-good: oklch(0.83 0.13 155);
    --stage-good-soft: oklch(0.33 0.06 155);
    --stage-warn: oklch(0.86 0.12 80);
    --stage-warn-soft: oklch(0.34 0.05 75);
    --panel: oklch(0.235 0.068 265.5);
    /* K13 close: the footer's navy, which the final CTA blends into (light: the stage itself) */
    --close: oklch(0.235 0.068 265.5);
  }

  /* Dark theme - system preference, unless the visitor forced light */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: oklch(0.175 0.04 265);
      --surface: oklch(0.215 0.045 265);
      --surface-2: oklch(0.245 0.05 265);
      --surface-3: oklch(0.29 0.055 265);
      --line: oklch(0.32 0.045 265);
      --line-strong: oklch(0.42 0.05 265);
      --ink: oklch(0.97 0.008 262);
      --ink-2: oklch(0.85 0.02 262);
      --ink-3: oklch(0.72 0.03 262);
      --accent: oklch(0.568 0.238 261.8);
      --accent-hover: oklch(0.62 0.21 261);
      --accent-text: oklch(0.77 0.135 258);
      --accent-soft: oklch(0.28 0.08 262);
      --accent-soft-2: oklch(0.35 0.11 262);
      --on-accent: oklch(1 0 0);
      --on-accent-2: oklch(0.93 0.035 262);
      --band: oklch(0.135 0.035 265);
      --band-2: oklch(0.2 0.05 265);
      --band-3: oklch(0.25 0.06 265);
      --band-line: oklch(0.3 0.05 265);
      --band-ink: oklch(0.97 0.008 262);
      --band-ink-2: oklch(0.85 0.02 262);
      --band-ink-3: oklch(0.72 0.03 262);
      --band-accent: oklch(0.77 0.135 258);
      --good: oklch(0.8 0.13 155);
      --good-soft: oklch(0.28 0.05 155);
      --warn: oklch(0.84 0.12 80);
      --warn-soft: oklch(0.3 0.05 75);
      --critical: oklch(0.77 0.13 25);
      --critical-soft: oklch(0.29 0.06 25);
      --focus: oklch(0.77 0.135 258);
      --shadow-c: oklch(0.05 0.02 265 / 0.35);
      --shadow-c2: oklch(0.05 0.02 265 / 0.55);
      --scrim: oklch(0.08 0.03 265 / 0.62);
      --glass: oklch(0.175 0.04 265 / 0.8);
      --hatch: oklch(0.97 0.008 262 / 0.05);
      /* Stages sit one step above the page (edge + glow); panels sit one step below it */
      --stage: oklch(0.232 0.058 265.5);
      --stage-2: oklch(0.275 0.064 265);
      --stage-3: oklch(0.32 0.07 265);
      --stage-line: oklch(0.36 0.06 265);
      --stage-line-2: oklch(0.46 0.065 264);
      --stage-edge: oklch(0.34 0.07 265);
      --stage-grid: oklch(0.76 0.08 262 / 0.07);
      --stage-glow: oklch(0.58 0.2 262 / 0.32);
      --panel: oklch(0.15 0.034 265);
      --close: oklch(0.135 0.035 265);
    }
  }

  /* Dark theme - explicit choice */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: oklch(0.175 0.04 265);
    --surface: oklch(0.215 0.045 265);
    --surface-2: oklch(0.245 0.05 265);
    --surface-3: oklch(0.29 0.055 265);
    --line: oklch(0.32 0.045 265);
    --line-strong: oklch(0.42 0.05 265);
    --ink: oklch(0.97 0.008 262);
    --ink-2: oklch(0.85 0.02 262);
    --ink-3: oklch(0.72 0.03 262);
    --accent: oklch(0.568 0.238 261.8);
    --accent-hover: oklch(0.62 0.21 261);
    --accent-text: oklch(0.77 0.135 258);
    --accent-soft: oklch(0.28 0.08 262);
    --accent-soft-2: oklch(0.35 0.11 262);
    --on-accent: oklch(1 0 0);
    --on-accent-2: oklch(0.93 0.035 262);
    --band: oklch(0.135 0.035 265);
    --band-2: oklch(0.2 0.05 265);
    --band-3: oklch(0.25 0.06 265);
    --band-line: oklch(0.3 0.05 265);
    --band-ink: oklch(0.97 0.008 262);
    --band-ink-2: oklch(0.85 0.02 262);
    --band-ink-3: oklch(0.72 0.03 262);
    --band-accent: oklch(0.77 0.135 258);
    --good: oklch(0.8 0.13 155);
    --good-soft: oklch(0.28 0.05 155);
    --warn: oklch(0.84 0.12 80);
    --warn-soft: oklch(0.3 0.05 75);
    --critical: oklch(0.77 0.13 25);
    --critical-soft: oklch(0.29 0.06 25);
    --focus: oklch(0.77 0.135 258);
    --shadow-c: oklch(0.05 0.02 265 / 0.35);
    --shadow-c2: oklch(0.05 0.02 265 / 0.55);
    --scrim: oklch(0.08 0.03 265 / 0.62);
    --glass: oklch(0.175 0.04 265 / 0.8);
    --hatch: oklch(0.97 0.008 262 / 0.05);
    --stage: oklch(0.232 0.058 265.5);
    --stage-2: oklch(0.275 0.064 265);
    --stage-3: oklch(0.32 0.07 265);
    --stage-line: oklch(0.36 0.06 265);
    --stage-line-2: oklch(0.46 0.065 264);
    --stage-edge: oklch(0.34 0.07 265);
    --stage-grid: oklch(0.76 0.08 262 / 0.07);
    --stage-glow: oklch(0.58 0.2 262 / 0.32);
    --panel: oklch(0.15 0.034 265);
    --close: oklch(0.135 0.035 265);
  }

  /* Derived tokens (theme-aware because they reference the tokens above) */
  :root {
    --shadow-1: 0 1px 2px var(--shadow-c);
    --shadow-2: 0 1px 2px var(--shadow-c), 0 8px 24px -8px var(--shadow-c2);
    --shadow-3: 0 2px 6px var(--shadow-c), 0 24px 56px -16px var(--shadow-c2);
    --accent-glow: color-mix(in oklch, var(--accent) 22%, transparent);
    --ring-halo: 0 0 0 4px color-mix(in oklch, var(--focus) 28%, transparent);
  }
  /* Relative colour syntax where available: halo derived from the live accent */
  @supports (color: oklch(from red l c h)) {
    :root {
      --accent-glow: oklch(from var(--accent) l c h / 0.22);
      --ring-halo: 0 0 0 4px oklch(from var(--focus) l c h / 0.3);
    }
  }
}

/* ------------------------------------------------------------------- base */
@layer base {
  html {
    scrollbar-gutter: stable;
    scroll-padding-top: calc(var(--header-h) + 24px);
    hanging-punctuation: first last;
  }
  html:has(.drawer[open]) { overflow: hidden; }

  body {
    background: var(--bg);
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100dvh;
    overflow-x: clip;
  }
  /* Safe-area band behind a notch, matching the sticky header */
  body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: env(safe-area-inset-top, 0px);
    background: var(--bg);
    z-index: 60;
    pointer-events: none;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  h3, h4 { letter-spacing: -0.01em; }
  p, li, dd { text-wrap: pretty; }
  strong, b { font-weight: 650; color: var(--ink); }

  a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  a:hover { text-decoration-thickness: 2px; }

  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }
  ::selection { background: var(--accent-soft-2); color: var(--ink); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ----------------------------------------------------------------- layout */
@layer layout {
  .wrap {
    width: 100%;
    max-width: calc(var(--page-max) + 2 * var(--gutter));
    margin-inline: auto;
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  }

  .section { padding-block: var(--section-pad); position: relative; }
  .section--tight { padding-block: calc(var(--section-pad) * 0.6); }
  .section--flush { padding-top: 0; }
  .section--tint { background: var(--surface-2); }
  .section--surface { background: var(--surface); }
  .section--tint, .section--surface { border-block: 1px solid var(--line); }

  .stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-5)); }
  .stack > * { margin: 0; }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-3)); }

  .split {
    display: grid;
    gap: var(--gap, clamp(28px, 4vw, 64px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .split--center { align-items: center; }
  @media (width < 900px) {
    .split, .split--wide-left, .split--wide-right { grid-template-columns: minmax(0, 1fr); }
  }

  .grid { display: grid; gap: var(--gap, var(--space-4)); grid-template-columns: minmax(0, 1fr); }
  @media (width >= 640px) {
    .grid--2, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (width >= 900px) {
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .auto-grid {
    display: grid;
    gap: var(--gap, var(--space-4));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 240px)), 1fr));
  }

  /* Header */
  .masthead {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 50;
    container: masthead / scroll-state;
  }
  /* The view-transition name sits on the glass element itself, not on .masthead: an element with a
     view-transition-name is a Backdrop Root, so on an ancestor it would cut the blur off from the page
     (the backdrop-filter would sample nothing and the content would read through the tint). */
  .masthead__inner {
    view-transition-name: masthead;
    background: var(--glass);
    -webkit-backdrop-filter: saturate(1.5) blur(16px);
    backdrop-filter: saturate(1.5) blur(16px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow var(--dur-2), border-color var(--dur-2), background-color var(--dur-2);
    position: relative;
  }
  .masthead__bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--header-h);
    transition: min-height var(--dur-2) var(--ease-out);
  }
  .masthead__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
  .masthead__progress { display: none; }

  /* Scroll-state query: transparent at rest; once stuck, frosted with a shadow and slightly shorter
     (the full lockup, tagline included, still fits) */
  @supports (container-type: scroll-state) {
    .masthead__inner { border-bottom-color: transparent; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
    @container masthead scroll-state(stuck: top) {
      .masthead__inner {
        background: var(--glass);
        -webkit-backdrop-filter: saturate(1.5) blur(16px);
        backdrop-filter: saturate(1.5) blur(16px);
        border-bottom-color: var(--line);
        box-shadow: var(--shadow-2);
      }
      .masthead__bar { min-height: 58px; }
    }
  }

  /* Scroll-linked reading progress under the header */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      .masthead__progress {
        display: block;
        position: absolute;
        inset: auto 0 -1px 0;
        height: 2px;
        background: var(--accent);
        transform-origin: 0 50%;
        scale: 0 1;
        animation: progress-x linear both;
        animation-timeline: scroll(root block);
      }
    }
  }
  @keyframes progress-x { from { scale: 0 1; } to { scale: 1 1; } }

  #view { display: block; min-height: 60vh; outline: none; view-transition-name: page; }

  /* Footer */
  .site-footer { padding-block: var(--space-8) var(--space-6); }
  .footer-grid {
    display: grid;
    gap: var(--space-6) var(--space-5);
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  }
  @media (width < 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
  @media (width < 480px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
  .site-footer .quiet-link { text-decoration: none; color: var(--ink-2); }
  .site-footer .quiet-link:hover { text-decoration: underline; color: var(--ink); }
  .footer-base {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    align-items: center;
    font-size: var(--step--1);
    color: var(--ink-3);
  }
}

/* ------------------------------------------------------------- components */
@layer components {

  /* Local surfaces: re-map tokens so every component adapts */
  .band, .section--band, .card--band, .callout--band {
    --surface: var(--band-2);
    --surface-2: var(--band-2);
    --surface-3: var(--band-3);
    --line: var(--band-line);
    --line-strong: var(--band-line);
    --ink: var(--band-ink);
    --ink-2: var(--band-ink-2);
    --ink-3: var(--band-ink-3);
    --accent-text: var(--band-accent);
    --accent-soft: var(--band-3);
    --focus: var(--band-accent);
    background: var(--band);
    color: var(--ink-2);
  }
  /* The footer continues the final CTA (K13) as one dark close: same base navy, no seam. When the page ends
     with that CTA, one hairline at the content width (like the footer's own base line) marks the footer. */
  .site-footer.band { background: var(--close); }
  #view:has(> [data-page] > .cta-band:last-child) ~ .site-footer { padding-top: 0; }
  #view:has(> [data-page] > .cta-band:last-child) ~ .site-footer .footer-grid { border-top: 1px solid var(--line); padding-top: var(--space-7); }
  .on-accent, .card--accent, .hero-stat, .result {
    --ink: var(--on-accent);
    --ink-2: var(--on-accent-2);
    --ink-3: var(--on-accent-2);
    --accent-text: var(--on-accent);
    --line: color-mix(in oklch, var(--on-accent) 28%, transparent);
    --focus: var(--on-accent);
    background: var(--accent);
    color: var(--ink-2);
  }

  /* Brand lockup */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
    flex-shrink: 0;
  }
  .brand__mark { width: 34px; height: 34px; color: var(--accent); }
  .brand__text { display: grid; line-height: 1; }
  .brand__word { font: 800 1.28rem/1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
  .brand__smart { color: var(--ink); }
  .brand__sifty { color: var(--accent-text); }
  .band .brand__sifty { color: var(--band-accent); }
  .brand__tag {
    font: 600 0.52rem/1 var(--font-display);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 5px;
  }
  @media (width < 420px) { .brand__tag { display: none; } .brand__mark { width: 30px; height: 30px; } }

  /* Type */
  /* K2: eyebrows in mono (number in the accent, label in ink); an eyebrow without a number stays accent */
  .eyebrow {
    font: 500 0.76rem/1.35 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .eyebrow:not(:has(.eyebrow__num)) { color: var(--accent-text); }
  .eyebrow__num { font-weight: 600; color: var(--accent-text); font-variant-numeric: tabular-nums; }
  .eyebrow__num::after { content: "\0000A0\0000B7\000020"; color: var(--ink-3); font-weight: 500; }
  .kicker { font: 700 0.72rem/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
  /* K2: large headings are Montserrat 700 with tighter tracking */
  .display-1 { font-size: var(--step-hero); line-height: 0.98; font-weight: 700; letter-spacing: -0.03em; }
  .display-2 { font-size: var(--step-4); line-height: 1.02; font-weight: 700; letter-spacing: -0.03em; }
  .h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; }
  /* K2: the accent "turn" of a heading; --nl starts it on a new line */
  .tone { color: var(--accent-text); }
  .tone--nl::before { content: "\A"; white-space: pre; }
  /* Narrow screens: no forced break (it orphans the last word); the heading balances its lines instead */
  @media (width < 560px) {
    .tone--nl::before { content: none; }
    :has(> .tone--nl) { text-wrap: balance; }
  }
  .h3 { font-size: var(--step-2); }
  .h4 { font-size: var(--step-1); }
  .lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
  .small { font-size: var(--step--1); }
  .mono { font-family: var(--font-mono); font-size: 0.86em; letter-spacing: -0.01em; }
  .accent-text { color: var(--accent-text); }
  .source { font-size: var(--step--2); line-height: 1.5; color: var(--ink-3); max-width: 90ch; }
  .legal-note {
    font-size: var(--step--1);
    color: var(--ink-3);
    border-left: 2px solid var(--line-strong);
    padding-left: var(--space-3);
    max-width: 80ch;
  }

  @supports (text-box: trim-both cap alphabetic) {
    .display-1, .display-2, .h2, .stat__figure, .hero-stat__figure, .result__figure, .figure-trim {
      text-box: trim-both cap alphabetic;
    }
  }

  /* Section header */
  .section-head { display: grid; gap: var(--space-4); max-width: 46rem; }
  .section-head .h2 { margin-top: var(--space-1); }
  .section-head--split {
    max-width: none;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-4) clamp(24px, 5vw, 80px);
  }
  .section-head--split > :first-child { display: grid; gap: var(--space-4); }
  @media (width < 900px) { .section-head--split { grid-template-columns: minmax(0, 1fr); } }

  /* Buttons */
  .btn {
    --btn-bg: var(--surface);
    --btn-ink: var(--ink);
    --btn-line: var(--line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 44px;
    padding: 0.62em 1.15em;
    border-radius: var(--r-md);
    border: 1px solid var(--btn-line);
    background: var(--btn-bg);
    color: var(--btn-ink);
    font: 700 0.92rem/1.1 var(--font-display);
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1), translate var(--dur-1), box-shadow var(--dur-1);
  }
  .btn:hover { text-decoration: none; translate: 0 -1px; }
  .btn:active { translate: 0 0; }
  .btn svg { width: 1.05em; height: 1.05em; }
  .btn--primary { --btn-bg: var(--accent); --btn-ink: var(--on-accent); --btn-line: var(--accent); box-shadow: 0 6px 18px -8px var(--accent-glow); }
  .btn--primary:hover { --btn-bg: var(--accent-hover); --btn-line: var(--accent-hover); }
  .btn--secondary:hover { --btn-line: var(--accent); --btn-ink: var(--accent-text); }
  .btn--ghost { --btn-bg: transparent; --btn-line: transparent; --btn-ink: var(--accent-text); padding-inline: 0.6em; }
  .btn--ghost:hover { --btn-bg: var(--accent-soft); }
  .btn--on-accent { --btn-bg: var(--white); --btn-ink: var(--navy); --btn-line: var(--white); }
  .btn--on-accent:hover { --btn-bg: var(--on-accent-2); }
  .btn--outline-light { --btn-bg: transparent; --btn-ink: var(--ink); --btn-line: color-mix(in oklch, var(--ink) 55%, transparent); }
  .btn--outline-light:hover { --btn-line: var(--ink); --btn-ink: var(--ink); }
  .btn--lg { min-height: 52px; padding: 0.8em 1.4em; font-size: 1rem; border-radius: var(--r-md); }
  .btn--sm { min-height: 38px; padding: 0.45em 0.9em; font-size: 0.84rem; }
  .btn--block { width: 100%; }
  .btn:focus-visible { box-shadow: var(--ring-halo); }

  .icon-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    transition: border-color var(--dur-1), background-color var(--dur-1);
  }
  .icon-btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
  .icon-btn svg { width: 18px; height: 18px; }

  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font: 700 0.92rem/1.2 var(--font-display);
    color: var(--accent-text);
    text-decoration: none;
  }
  button.link-arrow { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
  .link-arrow svg { width: 1em; height: 1em; transition: translate var(--dur-1); }
  .link-arrow:hover svg { translate: 3px 0; }
  .quiet-link { font-size: var(--step--1); color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line-strong); }
  .quiet-link:hover { color: var(--accent-text); }

  /* Copyable address (replaces mailto actions; JS: SS.copyField, [data-copy-email]) */
  .copy-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--step--1); color: var(--ink-3); max-width: 100%; }
  .copy-field__text { font-family: var(--font-mono); font-size: 0.92em; color: var(--ink); user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
  .copy-field__btn {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.15em 0.7em;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--accent-text);
    font: 700 0.76rem/1.2 var(--font-display);
    transition: border-color var(--dur-1), background-color var(--dur-1);
  }
  .copy-field__btn:hover { border-color: var(--accent); background: var(--accent-soft); }

  /* Chips */
  .chip {
    --chip-ink: var(--ink-2);
    --chip-bg: var(--surface-3);
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.22em 0.62em;
    border-radius: var(--r-pill);
    background: var(--chip-bg);
    color: var(--chip-ink);
    font: 600 0.76rem/1.3 var(--font-body);
    white-space: nowrap;
  }
  .chip svg { width: 0.95em; height: 0.95em; }
  .chip__dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; flex: none; }
  .chip__dot--hollow { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
  .chip--good { --chip-ink: var(--good); --chip-bg: var(--good-soft); }
  .chip--warn { --chip-ink: var(--warn); --chip-bg: var(--warn-soft); }
  .chip--critical { --chip-ink: var(--critical); --chip-bg: var(--critical-soft); }
  .chip--info, .chip--accent { --chip-ink: var(--accent-text); --chip-bg: var(--accent-soft); }
  .chip--solid { --chip-ink: var(--on-accent); --chip-bg: var(--accent); }
  .chip--neutral { --chip-ink: var(--ink-3); --chip-bg: var(--surface-3); }

  .label-chip {
    --chip: var(--label-slate);
    --chip-ink: var(--label-ink-light);
    display: inline-flex;
    align-items: center;
    padding: 0.18em 0.55em;
    border-radius: var(--r-xs);
    background: var(--chip);
    color: var(--chip-ink);
    font: 650 0.72rem/1.35 var(--font-body);
    white-space: nowrap;
  }
  .label-chip--blue { --chip: var(--label-blue); }
  .label-chip--teal { --chip: var(--label-teal); }
  .label-chip--violet { --chip: var(--label-violet); }
  .label-chip--green { --chip: var(--label-green); }
  .label-chip--slate { --chip: var(--label-slate); }
  .label-chip--amber { --chip: var(--label-amber); --chip-ink: var(--label-ink-dark); }
  @supports (color: contrast-color(red)) {
    .label-chip { color: contrast-color(var(--chip)); }
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.3em 0.7em;
    border-radius: var(--r-pill);
    font: 700 0.66rem/1.2 var(--font-display);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--surface-3);
    color: var(--ink-2);
  }
  .badge svg { width: 1.1em; height: 1.1em; }
  .badge--sample { background: var(--warn-soft); color: var(--warn); }
  .badge--accent { background: var(--accent); color: var(--on-accent); }
  .badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); }
  .badge--band { background: var(--band); color: var(--band-ink); }
  .footer-base .badge { white-space: normal; text-align: left; line-height: 1.4; }

  /* Evidence badges: one restrained family; the kind sets a tint and a marker shape */
  .ev-badge {
    --ev-tone: var(--ink-3);
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.2em 0.55em 0.2em 0.5em;
    border-radius: var(--r-xs);
    background: color-mix(in oklch, var(--ev-tone) 9%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ev-tone) 22%, transparent);
    color: var(--ev-tone);
    font: 650 0.62rem/1.3 var(--font-display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none;
  }
  .ev-badge::before {
    content: "";
    flex: none;
    width: 0.62em;
    height: 0.62em;
    border-radius: 50%;
    background: currentColor;
  }
  .ev-badge[data-kind="research"] { --ev-tone: var(--accent-text); }
  .ev-badge[data-kind="result"] { --ev-tone: var(--good); }
  .ev-badge[data-kind="result"]::before { border-radius: 1px; rotate: 45deg; scale: 0.85; }
  .ev-badge[data-kind="illustrative"] { --ev-tone: var(--ink-3); }
  .ev-badge[data-kind="illustrative"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
  .ev-badge[data-kind="sample"] { --ev-tone: var(--warn); }
  .ev-badge[data-kind="sample"]::before { border-radius: 1.5px; background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
  /* Coloured surfaces re-map the ink tokens: stay neutral there, the marker tells the kinds apart */
  :is(.band, .section--band, .card--band, .callout--band, .on-accent, .card--accent, .hero-stat, .cta-band, .result,
    .section--stage, .stage-surface, .flow-panel, .mini-panel, .flow-band__core) .ev-badge { --ev-tone: var(--ink-2); }
  .app-frame__bar .ev-badge { margin-left: auto; }

  .model-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.2em 0.7em 0.2em 0.25em;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font: 650 0.76rem/1.3 var(--font-body);
    white-space: nowrap;
  }
  .ai-icon { width: 20px; height: 20px; color: var(--ai-glyph); border-radius: 50%; }
  .ai-icon--lg { width: 44px; height: 44px; }

  /* Cards */
  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--card-pad, clamp(20px, 2.2vw, 28px));
    color: var(--ink-2);
    min-width: 0;
  }
  .card--tint { background: var(--surface-2); }
  .card--raised { box-shadow: var(--shadow-3); border-color: color-mix(in oklch, var(--line) 70%, transparent); }
  .card--flat { border-color: transparent; background: var(--surface-2); }
  /* .card (above) resets background to --surface, so the accent and band fills are restated here */
  .card--accent { border-color: transparent; background: var(--accent); }
  .card--band { border-color: var(--band-line); background: var(--band); }
  .card--interactive { transition: border-color var(--dur-2), box-shadow var(--dur-2), translate var(--dur-2) var(--ease-out); }
  .card--interactive:hover { border-color: var(--accent); box-shadow: var(--shadow-2); translate: 0 -2px; }
  .card__title { font: 800 var(--step-1)/1.2 var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
  .card__foot { margin-top: auto; padding-top: var(--space-4); }

  @supports (corner-shape: squircle) {
    .card, .app-frame, .hero-stat, .callout, .table-wrap, .result, .menu {
      corner-shape: squircle;
    }
    .card, .callout, .table-wrap { border-radius: 28px; }
    .app-frame, .hero-stat, .result { border-radius: 36px; }
    .menu { border-radius: 26px; }
  }

  /* Stats */
  .stat { display: flex; flex-direction: column; gap: var(--space-2); }
  .stat__figure {
    font: 800 var(--fig-size, clamp(2.2rem, 1.7rem + 1.8vw, 3rem))/0.95 var(--font-display);
    letter-spacing: -0.035em;
    color: var(--accent-text);
    font-variant-numeric: lining-nums tabular-nums;
    margin-bottom: var(--space-2);
  }
  .stat__label { font: 700 1rem/1.3 var(--font-display); color: var(--ink); }
  .stat__note { font-size: 0.96rem; line-height: 1.45; color: var(--ink-2); }
  .stat__source {
    margin-top: auto;
    padding-top: var(--space-2);
    font: 500 0.66rem/1.4 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .stat-grid {
    display: grid;
    gap: var(--gap, var(--space-4));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 220px)), 1fr));
  }

  .hero-stat {
    border-radius: var(--r-xl);
    padding: clamp(22px, 3vw, 34px);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    box-shadow: 0 30px 60px -30px var(--accent-glow);
  }
  .hero-stat__label { font: 700 0.75rem/1.3 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
  .hero-stat__figure {
    font: 800 clamp(3.2rem, 2.2rem + 4vw, 5.4rem)/0.9 var(--font-display);
    letter-spacing: -0.045em;
    color: var(--ink);
    font-variant-numeric: lining-nums;
    margin-block: var(--space-2);
  }
  .hero-stat__unit { font: 800 1.3rem/1.1 var(--font-display); color: var(--ink); }
  .hero-stat__note { font: 650 1.02rem/1.4 var(--font-display); color: var(--ink-2); }
  .hero-stat__source { font: 500 0.66rem/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

  /* Callouts */
  .callout {
    border-radius: var(--r-lg);
    padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 36px);
    background: var(--surface-2);
    border: 1px solid var(--line);
    display: grid;
    gap: var(--space-2);
  }
  .callout--band { border-color: transparent; }
  .callout--accent { --ink: var(--on-accent); --ink-2: var(--on-accent-2); --accent-text: var(--on-accent); background: var(--accent); border-color: transparent; }
  .callout--rule { background: transparent; border: 0; border-left: 3px solid var(--accent); border-radius: 0; padding-block: var(--space-2); }
  .callout__label { font: 700 0.72rem/1.3 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); }
  .callout__text { font: 650 var(--step-1)/1.45 var(--font-display); color: var(--ink); letter-spacing: -0.01em; max-width: 70ch; }

  /* K13 Final CTA: one shared dark stage on every page (same markup as before: __inner > div + __actions).
     Grid + glow come from the K1 stage rules in the kit block; JS injects the network (.net). It runs into
     the footer as one dark close: no bottom edge, its lower part fades into --close (the footer's navy). */
  .cta-band { padding-block: clamp(64px, 6vw, 96px); }
  .cta-band__inner {
    display: grid;
    justify-items: center;
    gap: clamp(22px, 2.6vw, 30px);
    text-align: center;
  }
  .cta-band__inner > :first-child { display: grid; justify-items: center; }
  .cta-band__title {
    font: 700 clamp(2.2rem, 1.35rem + 3.3vw, 4.1rem)/1.02 var(--font-display);
    color: var(--ink);
    letter-spacing: -0.035em;
    max-width: 20ch;
    text-wrap: balance;
  }
  .cta-band__lede { margin-top: var(--space-4); font-size: var(--step-1); color: var(--ink-2); max-width: 64ch; }
  .cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
  /* The page's primary is accent-filled on the stage (legacy .btn--on-accent maps to it); the secondary stays quiet */
  .cta-band :is(.btn--on-accent, .btn--primary) {
    --btn-bg: var(--accent);
    --btn-ink: var(--on-accent);
    --btn-line: var(--accent);
    box-shadow: 0 12px 34px -12px var(--accent-glow);
  }
  .cta-band :is(.btn--on-accent, .btn--primary):hover { --btn-bg: var(--accent-hover); --btn-line: var(--accent-hover); }
  .cta-band :is(.btn--outline-light, .btn--secondary) {
    --btn-bg: color-mix(in oklch, var(--stage-2) 55%, transparent);
    --btn-ink: var(--ink);
    --btn-line: var(--stage-line-2);
  }
  .cta-band :is(.btn--outline-light, .btn--secondary):hover { --btn-line: var(--ink-2); }
  .cta-band__note {
    max-width: 92ch;
    font: 500 0.72rem/1.6 var(--font-mono);
    letter-spacing: 0.04em;
    color: var(--ink-3);
    text-wrap: balance;
  }
  .cta-band__note svg { display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -3px; color: var(--accent-text); }

  /* Tables */
  .table-wrap {
    container: table / inline-size;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
  }
  .data-table { width: 100%; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
  .data-table caption { text-align: left; padding: var(--space-4) var(--space-4) 0; font: 700 0.9rem var(--font-display); color: var(--ink); }
  .data-table th, .data-table td { padding: 0.8em 1.1em; text-align: left; vertical-align: top; }
  .data-table thead th {
    background: var(--band);
    color: var(--band-ink);
    font: 700 0.8rem/1.3 var(--font-display);
    letter-spacing: 0.01em;
  }
  .data-table tbody tr + tr > * { border-top: 1px solid var(--line); }
  .data-table tbody th { font: 700 0.92rem/1.4 var(--font-display); color: var(--ink); }
  .data-table .num { text-align: right; }
  .data-table .is-hl { background: var(--accent-soft); color: var(--ink); font-weight: 700; }
  .data-table--zebra tbody tr:nth-child(even) > * { background: var(--surface-2); }
  .data-table--compact th, .data-table--compact td { padding: 0.55em 0.8em; font-size: 0.88rem; }
  .data-table tfoot td, .data-table tfoot th { border-top: 2px solid var(--line-strong); font-weight: 700; color: var(--ink); background: var(--accent-soft); }

  @container table (width < 440px) {
    .data-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .data-table--stack, .data-table--stack tbody, .data-table--stack tfoot, .data-table--stack tr { display: block; }
    .data-table--stack tr { padding: var(--space-3) var(--space-4); }
    .data-table--stack tbody tr + tr { border-top: 1px solid var(--line); }
    .data-table--stack tbody tr + tr > * { border-top: 0; }
    .data-table--stack th, .data-table--stack td { display: flex; justify-content: space-between; gap: var(--space-4); padding: 0.3em 0; text-align: right; }
    .data-table--stack th { text-align: left; }
    .data-table--stack td::before { content: attr(data-label); font-weight: 600; color: var(--ink-3); text-align: left; }
    .data-table--stack .is-hl { background: transparent; color: var(--accent-text); }
  }

  /* Lists */
  .check-list, .cross-list { display: grid; gap: 0.6em; }
  .check-list > li, .cross-list > li { position: relative; padding-left: 1.7em; line-height: 1.45; }
  .check-list > li::before {
    content: "";
    position: absolute;
    left: 0.25em;
    top: 0.2em;
    width: 0.42em;
    height: 0.78em;
    border: solid var(--accent-text);
    border-width: 0 2.5px 2.5px 0;
    rotate: 40deg;
  }
  .cross-list > li { color: var(--ink-2); }
  .cross-list > li::before {
    content: "";
    position: absolute;
    left: 0.1em;
    top: 0.32em;
    width: 0.8em;
    height: 0.8em;
    background:
      linear-gradient(45deg, transparent calc(50% - 1px), var(--ink-3) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
      linear-gradient(-45deg, transparent calc(50% - 1px), var(--ink-3) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  }
  .check-list--plain > li::before { border-color: var(--good); }

  .compare { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
  .compare__col { border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--line); display: grid; gap: var(--space-4); align-content: start; }
  .compare__col--without { background: var(--surface-2); }
  .compare__col--with { background: var(--accent-soft); border-color: var(--accent-soft-2); }
  .compare__title { font: 700 0.78rem/1.3 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
  .compare__col--with .compare__title { color: var(--accent-text); }

  /* Numbered sequence with scroll-linked progress line */
  .num-steps {
    --n: 5;
    --dot: 44px;
    --col-gap: var(--space-4);
    position: relative;
    display: grid;
    gap: var(--space-5) var(--col-gap);
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    counter-reset: step;
    view-timeline: --steps block;
  }
  .num-steps::before, .num-steps::after {
    content: "";
    position: absolute;
    top: calc(var(--dot) / 2 - 1px);
    left: calc(var(--dot) / 2);
    right: calc((100% - (var(--n) - 1) * var(--col-gap)) / var(--n) - var(--dot) / 2);
    height: 2px;
    border-radius: 2px;
    background: var(--line);
  }
  .num-steps::after { background: var(--accent); transform-origin: 0 50%; }
  .num-steps > li { position: relative; counter-increment: step; display: grid; gap: var(--space-2); align-content: start; }
  .num-steps > li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font: 800 1rem/1 var(--font-display);
    position: relative;
    z-index: 1;
    margin-bottom: var(--space-3);
    box-shadow: 0 0 0 6px var(--bg);
  }
  .num-steps__title { font: 800 1.08rem/1.25 var(--font-display); color: var(--ink); }
  .num-steps__text { font-size: 0.96rem; line-height: 1.5; color: var(--ink-2); }
  @media (width < 900px) {
    .num-steps { grid-template-columns: minmax(0, 1fr); padding-left: calc(var(--dot) + var(--space-4)); }
    .num-steps::before, .num-steps::after { top: calc(var(--dot) / 2); bottom: calc(var(--dot) / 2); left: calc(var(--dot) / 2 - 1px); right: auto; width: 2px; height: auto; }
    .num-steps::after { transform-origin: 50% 0; }
    .num-steps > li::before { position: absolute; left: calc(-1 * (var(--dot) + var(--space-4))); top: -8px; margin: 0; }
  }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .num-steps::after { animation: grow-x linear both; animation-timeline: --steps; animation-range: entry 60% cover 55%; }
      @media (width < 900px) { .num-steps::after { animation-name: grow-y; animation-range: entry 30% cover 70%; } }
    }
  }
  @keyframes grow-x { from { scale: 0.04 1; } to { scale: 1 1; } }
  @keyframes grow-y { from { scale: 1 0.04; } to { scale: 1 1; } }

  /* Charts */
  .chart { display: grid; gap: var(--space-3); min-width: 0; }
  .chart__title { font: 700 0.9rem/1.3 var(--font-display); color: var(--ink); }
  .chart__note { font-size: var(--step--2); color: var(--ink-3); }
  .chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 0.78rem; color: var(--ink-2); }
  .chart__legend span { display: inline-flex; align-items: center; gap: 6px; }
  .chart__legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
  .chart__legend i.is-2 { background: var(--accent-soft-2); }
  .chart__canvas { position: relative; width: 100%; min-height: 160px; }
  .chart__canvas svg { width: 100%; height: auto; overflow: visible; }
  .chart-svg text { font-family: var(--font-body); font-size: 11px; fill: var(--ink-3); }
  .chart-svg .grid-line { stroke: var(--line); stroke-width: 1; }
  .chart-svg .axis-line { stroke: var(--line-strong); stroke-width: 1; }
  .chart-svg .series { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
  .chart-svg .series-area { fill: var(--accent); fill-opacity: 0.08; stroke: none; }
  .chart-svg .pt { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
  .chart-svg .avg { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
  .chart-svg .avg--after { stroke: var(--accent); }
  .chart-svg .marker { stroke: var(--ink); stroke-width: 1.5; }
  .chart-svg .marker-tag { fill: var(--ink); }
  .chart-svg .marker-text { fill: var(--surface); font-weight: 700; font-size: 11px; }
  .chart-svg .lbl-strong { fill: var(--ink); font-weight: 700; }
  .chart-svg .lbl-accent { fill: var(--accent-text); font-weight: 700; }
  /* On navy surfaces (stages, panels, bands) the series uses the light accent: --accent is too weak on navy */
  :is(.section--stage, .stage-surface, .flow-panel, .mini-panel, .cta-band, .band, .section--band) .chart-svg :is(.series, .pt, .avg--after) { stroke: var(--accent-text); }
  :is(.section--stage, .stage-surface, .flow-panel, .mini-panel, .cta-band, .band, .section--band) .chart-svg .series-area { fill: var(--accent-text); fill-opacity: 0.1; }
  :is(.section--stage, .stage-surface, .flow-panel, .mini-panel, .cta-band, .band, .section--band) .chart__legend i:not(.is-2) { background: var(--accent-text); }

  .bars {
    --h: 150px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: clamp(4px, 1.4vw, 12px);
    align-items: end;
    height: var(--h);
    padding-top: 8px;
    border-bottom: 1px solid var(--line-strong);
    background: repeating-linear-gradient(to top, var(--line) 0 1px, transparent 1px calc(var(--h) / 4));
  }
  .bar { display: flex; flex-direction: column-reverse; height: 100%; justify-content: flex-start; gap: 2px; }
  .bar__seg { height: calc(var(--v, 0) * 1%); background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
  .bar__seg--2 { background: var(--accent-soft-2); border-radius: 3px 3px 0 0; }
  .bar__seg + .bar__seg { border-radius: 3px 3px 0 0; }
  .bars-x { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(4px, 1.4vw, 12px); font-size: 0.7rem; color: var(--ink-3); text-align: center; }

  .meter { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
  .meter > span { display: block; height: 100%; width: calc(var(--v, 0) * 1%); border-radius: inherit; background: var(--accent); }

  .ring {
    --size: 40px;
    --thick: 4px;
    --score: var(--target, 0);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    flex: none;
    background: conic-gradient(var(--accent) calc(var(--score) * 1%), var(--accent-soft-2) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), currentColor calc(100% - var(--thick) + 0.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), currentColor calc(100% - var(--thick) + 0.5px));
  }
  @media (prefers-reduced-motion: no-preference) {
    .ring { transition: --score var(--dur-4) var(--ease-out); }
    @starting-style { .ring { --score: 0; } }
  }

  .vs-bars { display: grid; gap: var(--space-3); }
  .vs-bars__row { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; font-size: 0.86rem; }
  .vs-bars__track { height: 12px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
  .vs-bars__track > span { display: block; height: 100%; width: calc(var(--v) * 1%); min-width: 6px; border-radius: inherit; background: var(--ink-3); }
  .vs-bars__row--good .vs-bars__track > span { background: var(--accent); }
  .vs-bars__val { font: 800 0.95rem var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }

  /* Calculator */
  .calc { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
  @media (width < 900px) { .calc { grid-template-columns: minmax(0, 1fr); } }
  .calc__inputs { display: grid; gap: var(--space-5); align-content: start; }
  .field { display: grid; gap: var(--space-2); }
  .field__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
  .field__label { font: 700 0.92rem/1.3 var(--font-display); color: var(--ink); }
  .field__hint { font-size: var(--step--2); color: var(--ink-3); }
  .field__error { font-size: var(--step--1); color: var(--critical); font-weight: 600; }
  .input {
    min-height: 44px;
    padding: 0.5em 0.75em;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    font: 600 1rem/1.3 var(--font-mono);
    font-variant-numeric: tabular-nums;
    max-width: 100%;
  }
  .input:hover { border-color: var(--ink-3); }
  .input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; box-shadow: var(--ring-halo); }
  .input[aria-invalid="true"] { border-color: var(--critical); }
  textarea.input { font-family: var(--font-body); font-weight: 400; line-height: 1.5; resize: vertical; min-height: 4.5em; width: 100%; }
  .input--auto { width: 9ch; }
  .input-affix { display: inline-flex; align-items: center; gap: 0.35em; color: var(--ink-3); font-weight: 600; }
  @supports (field-sizing: content) {
    .input--auto { field-sizing: content; width: auto; min-width: 4ch; max-width: 14ch; }
    textarea.input { field-sizing: content; min-height: 3.2lh; max-height: 12lh; }
  }
  .range { width: 100%; accent-color: var(--accent); height: 28px; margin: 0; cursor: pointer; }

  .seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    border: 1px solid var(--line);
    max-width: 100%;
  }
  .seg label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 1em;
    border-radius: var(--r-pill);
    font: 700 0.86rem/1.2 var(--font-display);
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color var(--dur-1), color var(--dur-1), box-shadow var(--dur-1);
  }
  .seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .seg label:hover { color: var(--ink); }
  /* K11: the active segment is a dark pill (inverts on dark surfaces) */
  .seg label:has(input:checked) { background: var(--ink); color: var(--surface); box-shadow: var(--shadow-1); }
  .seg label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
  .seg--block { display: flex; border-radius: var(--r-md); }
  .seg--block label { flex: 1; justify-content: center; border-radius: var(--r-sm); }

  .result {
    border-radius: var(--r-xl);
    padding: clamp(24px, 3vw, 36px);
    display: grid;
    gap: var(--space-4);
    align-content: start;
  }
  .result__figure {
    font: 800 clamp(2.8rem, 2rem + 3.4vw, 4.6rem)/0.92 var(--font-display);
    letter-spacing: -0.045em;
    color: var(--ink);
    font-variant-numeric: tabular-nums lining-nums;
  }
  .result__rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
  .result__rows > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: 0.65em 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
  .result__rows dt { color: var(--ink-2); }
  .result__rows dd { font: 700 1rem var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }

  /* FAQ (exclusive accordion; animated height where supported) */
  /* K12: numbered rows (mono 01...), chevron, the open question in the accent. A lone item is not numbered. */
  .faq { --faq-num: 2.4rem; border-top: 1px solid var(--line); counter-reset: faq; }
  .faq details { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; counter-increment: faq; }
  .faq summary {
    list-style: none;
    display: grid;
    grid-template-columns: var(--faq-num) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-3);
    padding: 1.2em 0.25em;
    font: 650 1.04rem/1.4 var(--font-display);
    letter-spacing: -0.01em;
    color: var(--ink);
    cursor: pointer;
    border-radius: var(--r-xs);
    transition: color var(--dur-1);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::before {
    content: counter(faq, decimal-leading-zero);
    font: 500 0.72rem/1 var(--font-mono);
    letter-spacing: 0.06em;
    color: var(--accent-text);
  }
  .faq summary::after {
    content: "";
    width: 9px;
    height: 9px;
    margin: 0 8px 4px 12px;
    border: solid var(--ink-3);
    border-width: 0 2px 2px 0;
    rotate: 45deg;
    transition: rotate var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out), border-color var(--dur-1);
  }
  .faq details[open] summary { color: var(--accent-text); }
  .faq details[open] summary::after { rotate: -135deg; translate: 0 5px; border-color: var(--accent-text); }
  .faq summary:hover { color: var(--accent-text); }
  .faq summary:hover::after { border-color: var(--accent-text); }
  .faq__body { padding: 0 0.25em 1.35em calc(var(--faq-num) + var(--space-3) + 0.25em); color: var(--ink-2); max-width: 76ch; display: grid; gap: 0.7em; }
  .faq:has(> details:only-child) summary { grid-template-columns: minmax(0, 1fr) auto; }
  .faq:has(> details:only-child) summary::before { content: none; }
  .faq:has(> details:only-child) .faq__body { padding-left: 0.25em; }
  @media (width < 480px) { .faq { --faq-num: 1.6rem; } .faq__body { padding-left: 0.25em; } }
  @media (prefers-reduced-motion: no-preference) {
    @supports selector(::details-content) {
      .faq details::details-content {
        block-size: 0;
        overflow-y: clip;
        transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
      }
      .faq details[open]::details-content { block-size: auto; }
    }
  }

  /* Tabs - round 6: a segmented control with a sliding pill (JS adds span.tabs-ind to every .tabs__list
     and to any tablist with [data-indicator]). Without JS the selected tab paints its own pill. */
  .tabs { display: grid; gap: var(--space-5); }
  .tabs__list {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    background: color-mix(in oklab, var(--surface-3) 80%, var(--line));
    box-shadow: inset 0 1px 2px var(--shadow-c);
    width: fit-content;
    max-width: 100%;
  }
  .tabs__list [role="tab"] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    min-height: 40px;
    border: 0;
    background: transparent;
    padding: 0.55em 1.15em;
    border-radius: var(--r-pill);
    font: 650 0.88rem/1.2 var(--font-display);
    letter-spacing: -0.005em;
    color: var(--ink-2);
    transition: color var(--dur-2);
  }
  .tabs__list [role="tab"] svg { width: 16px; height: 16px; opacity: 0.85; }
  .tabs__list [role="tab"]:hover { color: var(--ink); }
  .tabs__list [role="tab"][aria-selected="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
  .tabs__list [role="tab"][aria-selected="true"] svg { color: var(--accent-text); opacity: 1; }
  .tabs__list [role="tab"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
  /* With the indicator, the pill slides instead of each tab painting its own */
  .tabs__list.has-ind [role="tab"][aria-selected="true"] { background: transparent; box-shadow: none; }
  .tabs-ind {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: var(--ind-w, 0);
    height: var(--ind-h, 0);
    transform: translate(var(--ind-x, 0), var(--ind-y, 0));
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: 0 1px 2px var(--shadow-c), 0 4px 14px -6px var(--shadow-c2), 0 0 0 1px var(--line);
    pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .tabs-ind { transition: transform 420ms var(--ease-out), width 420ms var(--ease-out), height 420ms var(--ease-out); }
  }
  .is-ind-instant .tabs-ind { transition: none; }
  /* .line-tabs[data-indicator]: slim underline tabs (one line each) with a sliding accent line */
  .line-tabs { position: relative; display: flex; gap: clamp(16px, 3vw, 40px); border-bottom: 1px solid var(--line-strong); max-width: 100%; }
  .line-tabs [role="tab"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    min-height: 48px;
    padding: 0 2px;
    border: 0;
    background: none;
    font: 650 0.98rem/1.2 var(--font-display);
    letter-spacing: -0.01em;
    color: var(--ink-3);
    white-space: nowrap;
    transition: color var(--dur-2);
  }
  .line-tabs [role="tab"]:hover { color: var(--ink); }
  .line-tabs [role="tab"][aria-selected="true"] { color: var(--ink); }
  .line-tabs [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
  .line-tabs.has-ind [role="tab"][aria-selected="true"]::after { content: none; }
  .line-tabs [role="tab"]:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--r-xs); }
  .line-tabs .tabs-ind { top: auto; bottom: -1px; height: 2px; transform: translateX(var(--ind-x, 0)); border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
  @media (prefers-reduced-motion: no-preference) {
    [role="tabpanel"] { transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out); }
    @starting-style { [role="tabpanel"] { opacity: 0; translate: 0 6px; } }
  }

  /* App frame (coded product mock) */
  .app-frame {
    container: frame / inline-size;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-3);
    overflow: hidden;
    min-width: 0;
  }
  .app-frame__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    background: light-dark(var(--surface-2), var(--surface-3));
    font-size: 0.8rem;
    color: var(--ink-3);
    min-width: 0;
  }
  .app-frame__bar .brand__mark { width: 20px; height: 20px; }
  .app-frame__crumbs { display: flex; gap: 0.4em; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .app-frame__crumbs b { color: var(--ink); font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
  .app-frame__bar .badge { margin-left: auto; }
  .app-frame__body { padding: clamp(14px, 2vw, 22px); display: grid; gap: var(--space-4); min-width: 0; }

  .kpi { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; background: var(--surface); display: grid; gap: 4px; min-width: 0; }
  .kpi__label { font-size: 0.74rem; color: var(--ink-3); font-weight: 600; }
  .kpi__value { font: 800 1.45rem/1.1 var(--font-display); color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .kpi__delta { font-size: 0.72rem; color: var(--ink-3); }

  /* Small form controls shared by mocks: compact segmented group, switch */
  .seg--sm { padding: 3px; }
  .seg--sm label { padding: 0.34em 0.85em; font-size: 0.78rem; }
  .switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 30px; cursor: pointer; }
  .switch input { position: absolute; inset: 0; z-index: 1; opacity: 0; margin: 0; cursor: pointer; }
  .switch__track { position: relative; width: 38px; height: 22px; border-radius: var(--r-pill); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color var(--dur-2), box-shadow var(--dur-2); }
  .switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px oklch(0.2 0.05 265 / 0.3); transition: transform var(--dur-2) var(--ease-out); }
  .switch input:checked + .switch__track { background: var(--accent); box-shadow: none; }
  .switch input:checked + .switch__track::after { transform: translateX(16px); }
  .switch input:focus-visible + .switch__track { outline: 3px solid var(--focus); outline-offset: 2px; }

  /* Label dots (the label's colour in front of its name) and group tags (outlined, like the app's Tags) */
  :is(.lb-lbl__dot, .dr-label i, [class*="label-dot--"]) { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--chip, var(--label-slate)); }
  .label-dot--blue { --chip: var(--label-blue); }
  .label-dot--teal { --chip: var(--label-teal); }
  .label-dot--violet { --chip: var(--label-violet); }
  .label-dot--amber { --chip: var(--label-amber); }
  .label-dot--green { --chip: var(--label-green); }
  .label-dot--slate { --chip: var(--label-slate); }
  .tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.14em 0.55em;
    border-radius: var(--r-xs);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    color: var(--ink-2);
    font: 600 0.72rem/1.35 var(--font-body);
    white-space: nowrap;
  }
  .tag-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--label-slate); }
  .tag-chip--amber::before { background: var(--label-amber); }

  /* ---------------------------------------------------------- Leaderboard */
  /* Round 6, mirrors the app: # | Score (%) | Name | Status | Tags | Labels | view. No avatars, no rings;
     mono rank 01/02/03 with an accent rail on the top row. Tags / Labels disappear when no visible row
     uses them. Container "lb": columns >= 720px; chips fold under the name below; a card layout < 520px. */
  .lb {
    container: lb / inline-size;
    --col-tags: max-content;
    --col-labels: max-content;
    display: grid;
    gap: 0;
    min-width: 0;
  }
  .lb__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; padding: 2px 4px 14px; flex-wrap: wrap; }
  .lb__title { display: grid; gap: 3px; min-width: 0; }
  .lb__job { font: 700 1.08rem/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
  .lb__meta { margin-top: 3px; font-size: 0.8rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 0.35em 0.9em; align-items: center; }

  /* P3 hint: hand icon + verb line; a soft pulse on the top row; gone after the first candidate opens */
  .lb-hint {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 14px 5px 5px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent);
    color: var(--accent-text);
    font: 650 0.8rem/1.2 var(--font-display);
    letter-spacing: -0.005em;
  }
  .lb-hint__icon { position: relative; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
  .lb-hint__icon svg { width: 15px; height: 15px; }
  .lb-hint__icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--accent); opacity: 0; pointer-events: none; }
  .lb-list > li.is-hinted > .lb-row::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: var(--r-sm);
    box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--accent) 55%, transparent), 0 0 0 5px color-mix(in oklab, var(--accent) 12%, transparent);
    opacity: 0.6;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .lb-hint__icon svg { animation: hint-tap 2.6s var(--ease-in-out) infinite; }
    .lb-hint__icon::after { animation: hint-ripple 2.6s var(--ease-out) infinite; }
    .lb-list > li.is-hinted > .lb-row::after { animation: row-invite 2.6s var(--ease-in-out) infinite; }
  }
  @keyframes hint-tap { 0%, 50%, 100% { transform: translateY(0) scale(1); } 20% { transform: translateY(1.5px) scale(0.84); } }
  @keyframes hint-ripple { 0%, 16% { transform: scale(0.7); opacity: 0; } 22% { opacity: 0.75; } 72%, 100% { transform: scale(1.9); opacity: 0; } }
  @keyframes row-invite { 0%, 100% { opacity: 0.25; } 22% { opacity: 1; } 60% { opacity: 0.45; } }

  /* "Edit Filters" (full variant): Min Score, Show Top, Recent Only, Labels, Reset All */
  .lb-filters { display: grid; gap: 10px; margin: 0 0 14px; padding: 12px 16px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
  .lb-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .lb-filters__title { display: inline-flex; align-items: center; gap: 8px; font: 500 0.68rem/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
  .lb-filters__title svg { width: 15px; height: 15px; color: var(--accent-text); }
  .lb-reset { min-height: 28px; padding: 2px 4px; border: 0; background: none; font: 650 0.8rem/1.2 var(--font-display); color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
  .lb-reset:disabled { color: var(--ink-3); text-decoration: none; cursor: default; }
  .lb-filters__row { display: grid; grid-template-columns: minmax(140px, 1.1fr) auto auto minmax(0, 2fr); gap: 10px clamp(14px, 2.6cqi, 26px); align-items: end; }
  .lb-f { display: grid; gap: 7px; min-width: 0; align-content: end; }
  .lb-f__label { font: 600 0.74rem/1.2 var(--font-body); color: var(--ink-3); }
  .lb-f__ctl { display: flex; align-items: center; gap: 10px; min-height: 32px; }
  .lb-f__ctl .range { height: 22px; min-width: 0; }
  .lb-f__out { min-width: 2.2ch; font: 600 0.82rem/1 var(--font-mono); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
  .lb-f .seg, .lb-f .switch { justify-self: start; }
  .lb-f__chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .lb-lbl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0.3em 0.8em;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-2);
    font: 600 0.78rem/1.2 var(--font-body);
    transition: border-color var(--dur-1), background-color var(--dur-1), color var(--dur-1);
  }
  .lb-lbl:hover { border-color: var(--accent); color: var(--ink); }
  .lb-lbl[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
  @container lb (width < 700px) {
    .lb-filters__row { grid-template-columns: repeat(3, auto); justify-content: start; }
    .lb-f--labels { grid-column: 1 / -1; }
  }
  @container lb (width < 420px) {
    .lb-filters__row { grid-template-columns: minmax(0, 1fr) auto; }
    .lb-f:first-child { grid-column: 1 / -1; }
  }

  /* The list */
  .lb-grid {
    display: grid;
    grid-template-columns: [rank] 2.2rem [score] 5rem [cand] minmax(0, 1fr) [status] max-content [tags] var(--col-tags) [labels] var(--col-labels) [view] 30px;
    column-gap: 14px;
  }
  .lb-cols, .lb-list, .lb-list > li, .lb-row { grid-column: 1 / -1; display: grid; grid-template-columns: 2.2rem 5rem minmax(0, 1fr) 7rem 7.4rem 8rem 30px; column-gap: 14px; }
  @supports (grid-template-columns: subgrid) {
    .lb-cols, .lb-list, .lb-list > li, .lb-row { grid-template-columns: subgrid; }
  }
  .lb-cols {
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--line-strong);
    font: 500 0.64rem/1.2 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    align-items: end;
  }
  .lb-col-rank { grid-column: rank; }
  .lb-col-score { grid-column: score; }
  .lb-col-cand { grid-column: cand; }
  .lb-col-status { grid-column: status; }
  .lb-col-tags { grid-column: tags; }
  .lb-col-labels { grid-column: labels; }
  .lb-list { margin: 0; padding: 0; list-style: none; }
  .lb-list > li + li { border-top: 1px solid var(--line); }
  .lb-row {
    view-transition-class: lb-row;
    position: relative;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 13px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    border-radius: var(--r-sm);
    transition: background-color var(--dur-1);
  }
  .lb-row:hover { background: var(--surface-2); }
  .lb-row:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
  .lb-rank { grid-column: rank; font: 500 0.82rem/1 var(--font-mono); letter-spacing: 0.02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .lb-list > li:nth-child(-n + 3) .lb-rank { color: var(--ink); font-weight: 600; }
  .lb-score { grid-column: score; font: 600 0.96rem/1 var(--font-mono); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
  .lb-cand { grid-column: cand; min-width: 0; }
  .lb-name { display: block; font: 650 0.94rem/1.3 var(--font-display); letter-spacing: -0.005em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lb-status { grid-column: status; display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ink-2); white-space: nowrap; }
  .lb-status__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in oklch, var(--good) 18%, transparent); }
  .lb-chips { display: contents; }
  /* Legacy initials avatar (no longer used by the leaderboard; kept for page markup that still has it) */
  .avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--accent-soft); color: var(--accent-text); font: 800 0.74rem/1 var(--font-display); letter-spacing: 0.02em; }
  .lb-tags { grid-column: tags; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
  .lb-labels { grid-column: labels; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
  .lb-view { grid-column: view; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--ink-3); transition: color var(--dur-1), border-color var(--dur-1), background-color var(--dur-1); }
  .lb-view svg { width: 15px; height: 15px; }
  .lb-row:hover .lb-view, .lb-row:focus-visible .lb-view { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }
  /* The top row: an accent rail and a faint accent wash (business style, no medals) */
  .lb-list > li.is-top > .lb-row { background: linear-gradient(to right, color-mix(in oklab, var(--accent) 8%, transparent), transparent 70%); }
  .lb-list > li.is-top > .lb-row:hover { background-color: var(--surface-2); }
  .lb-list > li.is-top > .lb-row::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
  .lb-list > li.is-top .lb-rank { color: var(--accent-text); }
  .lb__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-top: 4px; padding: 12px 4px 0; border-top: 1px solid var(--line); font: 500 0.7rem/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-3); }
  .lb__empty { padding: 28px 8px; text-align: center; color: var(--ink-3); font-size: 0.9rem; border-top: 1px solid var(--line); }

  /* Optional empty columns disappear (Tags, Labels) */
  .lb:not(:has(.lb-list > li:not([hidden]) .tag-chip)) { --col-tags: 0px; }
  .lb:not(:has(.lb-list > li:not([hidden]) .tag-chip)) :is(.lb-col-tags, .lb-tags) { display: none; }
  .lb:not(:has(.lb-list > li:not([hidden]) .label-chip)) { --col-labels: 0px; }
  .lb:not(:has(.lb-list > li:not([hidden]) .label-chip)) :is(.lb-col-labels, .lb-labels) { display: none; }

  /* Style query: compact density when a host asks for it */
  @container style(--lb-density: compact) {
    .lb-row { padding-block: 9px; }
  }

  /* Medium container: tags and labels fold under the name */
  @container lb (width < 720px) {
    .lb-grid { grid-template-columns: [rank] 2rem [score] 4.6rem [cand] minmax(0, 1fr) [status] max-content [tags] 0 [labels] 0 [view] 30px; column-gap: 12px; }
    .lb-cols, .lb-list, .lb-list > li, .lb-row { column-gap: 12px; }
    .lb-cols > :is(.lb-col-tags, .lb-col-labels) { display: none; }
    .lb-row { row-gap: 7px; }
    .lb-chips { grid-column: cand / view; grid-row: 2; display: flex; flex-wrap: wrap; gap: 4px; }
    .lb-chips:not(:has(.tag-chip, .label-chip)) { display: none; }
    .lb .lb-chips .lb-tags, .lb .lb-chips .lb-labels { display: contents; }
    .lb-rank, .lb-score, .lb-status, .lb-view { grid-row: 1; }
    .lb-cand { grid-row: 1; }
  }
  /* Narrow container: card layout, nothing scrolls sideways */
  @container lb (width < 520px) {
    .lb-grid { display: block; }
    .lb-cols { display: none; }
    .lb-list, .lb-list > li { display: block; }
    .lb-row {
      display: grid;
      grid-template-columns: 1.8rem auto minmax(0, 1fr) auto;
      grid-template-areas: "rank name name score" "rank status chips chips";
      padding: 12px 8px 12px 12px;
      column-gap: 10px;
      row-gap: 6px;
    }
    .lb-rank { grid-area: rank; align-self: start; margin-top: 3px; }
    .lb-cand { grid-area: name; }
    .lb-score { grid-area: score; }
    .lb-status { grid-area: status; font-size: 0.76rem; }
    .lb-chips { grid-area: chips; }
    .lb-view { display: none; }
  }

  /* View transition styling for every leaderboard row at once */
  ::view-transition-group(*.lb-row) { animation-duration: var(--dur-3); animation-timing-function: var(--ease-out); }

  /* ------------------------------------------------- Candidate (evidence) drawer dialog */
  /* Round 6: structured like the app's candidate detail - profile, Overall Score, Score Breakdown,
     Summary, Labels, Recruiter notes, optional Sifty Integrity (a first-pass screen). */
  .drawer {
    position: fixed;
    inset: 0 0 0 auto;
    margin: 0;
    width: min(560px, 100vw);
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    box-shadow: var(--shadow-3);
    overflow: auto;
    overscroll-behavior: contain;
    translate: 100% 0;
    transition: translate var(--dur-3) var(--ease-out), overlay var(--dur-3) allow-discrete, display var(--dur-3) allow-discrete;
  }
  .drawer[open] { translate: 0 0; }
  @starting-style { .drawer[open] { translate: 100% 0; } }
  .drawer::backdrop { background: var(--scrim); transition: opacity var(--dur-3), overlay var(--dur-3) allow-discrete, display var(--dur-3) allow-discrete; opacity: 0; }
  .drawer[open]::backdrop { opacity: 1; }
  @starting-style { .drawer[open]::backdrop { opacity: 0; } }
  .drawer.is-vt, .drawer.is-vt::backdrop { transition: none; }
  .drawer.is-vt { view-transition-name: drawer; }
  ::view-transition-new(drawer) { animation: drawer-in var(--dur-3) var(--ease-out) both; }
  ::view-transition-old(drawer) { animation: none; display: none; }
  ::view-transition-group(cand-focus) { animation-duration: var(--dur-3); animation-timing-function: var(--ease-out); z-index: 2; }
  @keyframes drawer-in { from { translate: 60px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }

  .drawer__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: calc(18px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 16px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .drawer__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .drawer__kicker { font: 500 0.66rem/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
  .drawer__name { margin-top: 4px; font: 700 1.36rem/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--ink); width: fit-content; }
  .drawer__sub { font-size: 0.84rem; color: var(--ink-3); margin-top: 4px; }
  .drawer__body { padding: 18px max(24px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) 24px; display: grid; gap: 24px; }
  .drawer__flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .drawer__section { display: grid; gap: 12px; align-content: start; }
  .drawer__section + .drawer__section, .dr-scores + .drawer__section { padding-top: 22px; border-top: 1px solid var(--line); }
  .drawer__section > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 0.7rem/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
  .drawer__section > h3 svg { width: 15px; height: 15px; color: var(--accent-text); }
  .dr-opt { margin-left: auto; padding: 0.2em 0.6em; border-radius: var(--r-pill); background: var(--surface-3); font: 600 0.62rem/1.3 var(--font-body); letter-spacing: 0.02em; text-transform: none; color: var(--ink-2); }
  .dr-sub { font: 650 0.8rem/1.3 var(--font-display); color: var(--ink); }

  /* Contact info, location, languages */
  .dr-profile { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px 18px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); }
  .dr-profile__wide { grid-column: 1 / -1; }
  .dr-profile dt { font: 500 0.62rem/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
  .dr-profile dd { margin: 4px 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
  .dr-profile dd small { display: block; font-size: 0.76rem; color: var(--ink-3); }
  .dr-profile__mail { font-family: var(--font-mono); font-size: 0.76rem !important; }
  @media (width < 440px) { .dr-profile { grid-template-columns: minmax(0, 1fr); } }

  /* Overall Score (one decimal + bar) and Score Breakdown (eight categories, whole %, bars) */
  .dr-scores { display: grid; gap: 22px; }
  .dr-overall { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
  .dr-overall__num { font: 600 2.4rem/1 var(--font-mono); letter-spacing: -0.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
  .dr-overall__num span { margin-left: 2px; font-size: 0.5em; letter-spacing: 0; color: var(--accent-text); }
  .meter--lg { height: 10px; }
  .breakdown { display: grid; gap: 10px 26px; }
  @media (width >= 560px) { .breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .breakdown > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; font-size: 0.84rem; }
  .breakdown dt { color: var(--ink-2); }
  .breakdown dd { margin: 0; text-align: right; font: 600 0.8rem var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
  .breakdown .meter { grid-column: 1 / -1; height: 5px; }

  /* Summary */
  .dr-sum { display: grid; gap: 14px; }
  .dr-sum > div { display: grid; gap: 6px; }
  .dr-list { display: grid; gap: 6px; }
  .dr-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 0.88rem; line-height: 1.45; color: var(--ink-2); }
  .dr-list svg { width: 16px; height: 16px; margin-top: 2px; }
  .dr-list--good svg { color: var(--good); }
  .dr-list--gap svg { color: var(--warn); }

  /* Labels: toggle buttons in the label's colour */
  .dr-labels { display: flex; flex-wrap: wrap; gap: 8px; }
  .dr-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0.35em 0.85em;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-2);
    font: 600 0.82rem/1.2 var(--font-body);
    transition: border-color var(--dur-1), background-color var(--dur-1), color var(--dur-1);
  }
  .dr-label:hover { border-color: var(--accent); color: var(--ink); }
  .dr-label[aria-pressed="true"] { border-style: solid; border-color: transparent; background: var(--surface-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .dr-label[aria-pressed="true"]::after { content: ""; width: 10px; height: 6px; margin-left: 2px; border: solid var(--accent-text); border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -2px; }

  /* Recruiter notes (with history) */
  .notes { display: grid; gap: 8px; }
  .note { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border-left: 2px solid var(--accent); display: grid; gap: 3px; }
  .note__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 0.78rem; color: var(--ink-3); }
  .note__meta b { font: 650 0.8rem/1.3 var(--font-display); color: var(--ink); }
  .note__meta time { font-family: var(--font-mono); font-size: 0.72rem; }
  .note__text { font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
  .note--empty { border-left-color: var(--line-strong); font-size: 0.84rem; color: var(--ink-3); }
  .note-form { display: grid; gap: 8px; }
  .note-form__status { font-size: 0.82rem; color: var(--good); font-weight: 600; min-height: 1.2em; }
  @media (prefers-reduced-motion: no-preference) {
    .note.is-new { transition: background-color 1.2s var(--ease-out); }
    @starting-style { .note.is-new { background-color: var(--accent-soft); } }
  }

  /* Sifty Integrity (optional first-pass screen) */
  .dr-integ { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
  .dr-integ__score { position: relative; display: grid; place-items: center; }
  .dr-integ__score .ring { --size: 64px; --thick: 6px; }
  .dr-integ__score b { position: absolute; font: 600 1.1rem/1 var(--font-mono); color: var(--ink); }
  .dr-integ__body { display: grid; gap: 6px; justify-items: start; }
  .claim { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; display: grid; gap: 6px; background: var(--surface-2); }
  .claim__title { display: flex; align-items: center; gap: 8px; font: 700 0.9rem/1.3 var(--font-display); color: var(--ink); flex-wrap: wrap; }
  .claim__q { font-size: 0.86rem; color: var(--ink-2); }
  .claim__q b { color: var(--ink); font-weight: 650; }

  /* Legacy decision form and decision log (kept for any page markup that still uses them) */
  .review-form { display: grid; gap: 12px; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); }
  .review-form .seg { background: var(--surface-3); }
  .review-form__suggest { font-size: 0.84rem; color: var(--ink-2); }
  .override-flag { display: none; gap: 8px; align-items: flex-start; font-size: 0.84rem; color: var(--warn); background: var(--warn-soft); padding: 8px 10px; border-radius: var(--r-sm); }
  .override-flag svg { width: 16px; height: 16px; margin-top: 2px; }
  .review-form:has(input[name="decision"]:checked:not([data-suggested])) .override-flag { display: flex; }
  .review-form__status { font-size: 0.84rem; color: var(--good); font-weight: 600; min-height: 1.3em; }

  .audit { display: grid; gap: 0; font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.5; border-left: 2px solid var(--line); }
  .audit > li { position: relative; padding: 0 0 12px 16px; display: grid; gap: 2px; }
  .audit > li::before { content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-strong); }
  .audit > li.is-human::before { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
  .audit > li.is-new::before { background: var(--accent); box-shadow: none; }
  .audit time { color: var(--ink-3); }
  .audit__actor { color: var(--accent-text); font-weight: 600; }
  .audit__event { color: var(--ink); font-family: var(--font-body); font-size: 0.84rem; overflow-wrap: anywhere; }
  @media (prefers-reduced-motion: no-preference) {
    .audit > li.is-new { transition: background-color 1.2s var(--ease-out); }
    @starting-style { .audit > li.is-new { background-color: var(--accent-soft); } }
  }

  /* Report document mock */
  .report-doc { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: clamp(14px, 2vw, 22px); display: grid; gap: 14px; }

  /* Dropdown menu + sheets (Popover API, anchor positioning with JS fallback) */
  .menu {
    position: fixed;
    inset: auto;
    margin: 0;
    width: min(400px, calc(100vw - 32px));
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--ink-2);
    box-shadow: var(--shadow-3);
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--dur-2), translate var(--dur-2) var(--ease-out), overlay var(--dur-2) allow-discrete, display var(--dur-2) allow-discrete;
  }
  .menu:not(:popover-open) { opacity: 0; translate: 0 -6px; }
  @starting-style { .menu:popover-open { opacity: 0; translate: 0 -6px; } }
  @supports (anchor-name: --a) {
    .nav-trigger { anchor-name: --platform-trigger; }
    #platform-menu { position-anchor: --platform-trigger; top: calc(anchor(bottom) + 12px); left: anchor(left); position-try-fallbacks: flip-inline; }
  }
  .menu__item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 4px 12px;
    align-items: start;
    padding: 12px;
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--ink-2);
  }
  .menu__item:hover, .menu__item[aria-current="page"] { background: var(--surface-2); text-decoration: none; }
  .menu__icon { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-text); }
  .menu__icon svg { width: 20px; height: 20px; }
  .menu__title { font: 700 0.95rem/1.3 var(--font-display); color: var(--ink); }
  .menu__desc { font-size: 0.82rem; line-height: 1.4; color: var(--ink-3); }
  .menu__foot { margin-top: 6px; padding: 10px 12px 6px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--ink-3); }
  /* Brochure headline as the subtitle; the foundation item sits under its own divider */
  .menu__group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
  .menu__group > .kicker { padding: 6px 12px 0; }
  .menu__item--foundation .menu__icon { background: var(--band); color: var(--band-accent); }

  .tip {
    position: fixed;
    inset: auto;
    margin: 0;
    max-width: min(300px, calc(100vw - 32px));
    padding: 10px 12px;
    border: 1px solid var(--band-line);
    border-radius: var(--r-sm);
    background: var(--band);
    color: var(--band-ink-2);
    font: 500 0.8rem/1.45 var(--font-body);
    letter-spacing: 0;
    text-transform: none;
    box-shadow: var(--shadow-3);
  }
  .tip b { color: var(--band-ink); }
  @supports (anchor-name: --a) {
    .tip { position-area: top; margin-bottom: 8px; position-try-fallbacks: flip-block, flip-inline; }
  }
  .tip-btn { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); }
  .tip-btn:hover { color: var(--accent-text); }
  .tip-btn svg { width: 14px; height: 14px; }

  /* Navigation */
  .primary-nav { display: flex; align-items: center; gap: 2px; margin-left: var(--space-5); }
  .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.55em 0.8em;
    border-radius: var(--r-sm);
    border: 0;
    background: transparent;
    font: 650 0.92rem/1.2 var(--font-display);
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
  }
  .nav-link:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
  .nav-link[aria-current="page"], .nav-trigger[data-active] { color: var(--accent-text); }
  .nav-link svg { width: 14px; height: 14px; transition: rotate var(--dur-2); }
  body:has(#platform-menu:popover-open) .nav-trigger svg { rotate: 180deg; }
  .menu-toggle { display: none; }
  .theme-toggle .i-moon { display: none; }
  :root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
  :root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
  @media (width < 1120px) {
    .primary-nav, .nav-signin, .nav-demo { display: none; }
    .menu-toggle { display: inline-grid; }
  }

  @media (width < 390px) {
    .masthead__bar { padding-inline: 12px; gap: 4px; }
    .masthead__actions { gap: 4px; }
    .masthead .brand { gap: 6px; }
    .masthead .brand__mark { width: 24px; height: 24px; }
    .masthead .brand__word { font-size: 1rem; }
    .masthead__actions .btn--sm { padding-inline: 0.5em; }
  }

  .sheet {
    position: fixed;
    inset: auto 0 auto 0;
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    margin: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
    width: auto;
    max-height: calc(100dvh - 88px);
    overflow: auto;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--ink-2);
    box-shadow: var(--shadow-3);
    transition: opacity var(--dur-2), translate var(--dur-2) var(--ease-out), overlay var(--dur-2) allow-discrete, display var(--dur-2) allow-discrete;
  }
  .sheet:not(:popover-open) { opacity: 0; translate: 0 -8px; }
  @starting-style { .sheet:popover-open { opacity: 0; translate: 0 -8px; } }
  .sheet__group { display: grid; gap: 2px; padding: 6px 0; }
  .sheet__group + .sheet__group { border-top: 1px solid var(--line); }
  .sheet__label { padding: 8px 12px 4px; }
  .sheet .nav-link { width: 100%; padding: 0.8em 0.75em; font-size: 1rem; }
  .nav-link--sub { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; }
  .sheet .nav-link--sub { padding-block: 0.55em; }
  .nav-link__sub { font: 400 0.84rem/1.35 var(--font-body); color: var(--ink-3); }
  .sheet__actions { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }

  .skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100;
    translate: 0 -150%;
    padding: 0.6em 1em;
    border-radius: var(--r-sm);
    border: 0;
    background: var(--accent);
    color: var(--on-accent);
    font: 700 0.9rem var(--font-display);
  }
  .skip-link:focus-visible { translate: 0 0; }

  /* Page hero (brochure navy band + blue stat card) */
  .page-hero { padding-block: clamp(48px, 7vw, 96px); position: relative; overflow: hidden; isolation: isolate; }
  .page-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 720px;
    aspect-ratio: 1;
    right: -260px;
    top: -280px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at center, transparent 0 34px, color-mix(in oklch, var(--band-accent) 14%, transparent) 34px 36px);
    -webkit-mask: radial-gradient(circle, currentColor 35%, transparent 70%);
    mask: radial-gradient(circle, currentColor 35%, transparent 70%);
  }
  .page-hero__grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); align-items: center; }
  .page-hero__copy { display: grid; gap: var(--space-5); }
  .page-hero__copy .lede { color: var(--ink-2); }
  @media (width < 900px) { .page-hero__grid { grid-template-columns: minmax(0, 1fr); } }

  /* Stubs (phase-1 placeholders for phase-2 pages) */
  .stub-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    margin-bottom: var(--space-6);
  }
  .stub-banner p { font-size: var(--step--1); color: var(--ink-2); }
  .stub-plan { display: grid; gap: var(--space-3); counter-reset: stub; }
  .stub-item {
    counter-increment: stub;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-4) var(--space-5);
    align-items: center;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
  }
  .stub-item::before {
    content: counter(stub, decimal-leading-zero);
    font: 800 0.95rem/1 var(--font-display);
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
    align-self: start;
    padding-top: 4px;
  }
  .stub-item__text { display: grid; gap: 6px; }
  .stub-item__text p { font-size: 0.92rem; color: var(--ink-3); }
  @media (width < 760px) { .stub-item { grid-template-columns: 2.4rem minmax(0, 1fr); } .skeleton { grid-column: 2; } }
  .skeleton { display: grid; gap: 8px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
  .skeleton > span {
    min-height: var(--h, 56px);
    border-radius: var(--r-sm);
    border: 1px dashed var(--line-strong);
    background: repeating-linear-gradient(-45deg, var(--hatch) 0 6px, transparent 6px 12px), var(--surface-2);
  }
  .skeleton--chart > span { --h: 96px; }
  .skeleton--chart { grid-template-columns: minmax(0, 1fr); }
  .skeleton--table > span { min-height: 18px; }
  .skeleton--table { grid-template-columns: minmax(0, 1fr); gap: 5px; }

  /* Entry stagger: children enter once, delayed by their index where sibling-index() exists */
  @media (prefers-reduced-motion: no-preference) {
    .stagger > * { transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out); }
    @starting-style { .stagger > * { opacity: 0; translate: 0 10px; } }
    @supports (transition-delay: calc(sibling-index() * 1ms)) {
      .stagger > * { transition-delay: calc((sibling-index() - 1) * 70ms); }
    }
  }

  /* Engineered-for-2026 feature report popover */
  .feature-report { width: min(420px, calc(100vw - 32px)); max-height: min(70dvh, 560px); overflow: auto; }
  @supports (anchor-name: --a) {
    .feature-report-btn { anchor-name: --feature-btn; }
    #feature-report { position-anchor: --feature-btn; bottom: calc(anchor(top) + 10px); left: anchor(left); top: auto; position-try-fallbacks: flip-inline; }
  }
  .feature-list { display: grid; gap: 2px; font-size: 0.82rem; }
  .feature-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
  .feature-list li span:first-child { color: var(--ink); }
  .feature-report-btn { border: 0; background: transparent; padding: 0; font: inherit; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
  .feature-report-btn:hover { color: var(--ink); }

  /* Error panel for failed page loads */
  .load-error { padding: var(--space-9) 0; display: grid; gap: var(--space-4); max-width: 44rem; }
}

/* ---------------------------------------------- pricing: shared plans block (Home 07 + Pricing) */
/* Round 7: the approved Pricing-page cards (Version 9) moved out of the page scope, so Home and Pricing
   show the same block (JS: [data-plans="<id>"] / SS.pricing.mount). Polish only: one neutral marker for
   price facts, and the Enterprise email in its own row under the CTA so all four CTAs share one line. */
@layer components {
  /* Billing switch: the page root shows one of each .price--monthly / .price--annual pair on the page
     (the plan cards). :has() on the page root; data-billing is the no-:has fallback. */
  .price--annual { display: none; }
  [data-page]:is([data-billing="annual"], :has(.billing input[value="annual"]:checked)) .price--monthly { display: none; }
  [data-page]:is([data-billing="annual"], :has(.billing input[value="annual"]:checked)) .price--annual { display: inline-block; }
  .tier .price--monthly, .tier .price--annual { vertical-align: baseline; }
  @media (prefers-reduced-motion: no-preference) {
    .tier :is(.price--monthly, .price--annual) { transition: opacity 360ms var(--ease-out), translate 360ms var(--ease-out); }
    @starting-style { .tier :is(.price--monthly, .price--annual) { opacity: 0; translate: 0 0.35em; } }
  }

  [data-plans] { display: grid; }
  .billing { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .billing .seg label { padding: 0.62em 1.3em; }
  .billing__save { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.88rem; color: var(--ink-2); }
  .billing__save b { font: 600 0.78rem/1.3 var(--font-mono); letter-spacing: 0.04em; color: var(--accent-text); transition: color var(--dur-2); }
  .billing__save svg { width: 16px; height: 16px; color: var(--accent-text); }
  [data-page]:is([data-billing="annual"], :has(.billing input[value="annual"]:checked)) .billing__save b { color: var(--good); }
  @media (width < 560px) {
    .billing .seg { flex: 1 1 100%; display: flex; }
    .billing .seg label { flex: 1; justify-content: center; }
  }

  /* Four clean cards, one hierarchy (name > price > runs > what differs > one action).
     Subgrid keeps every row level across the cards. Business is the dark featured card. */
  .tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); align-items: stretch; margin-top: clamp(20px, 2.4vw, 30px); }
  @media (width < 1100px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (width < 640px) { .tiers { grid-template-columns: minmax(0, 1fr); } }
  .tier {
    position: relative;
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    row-gap: 0;
    min-width: 0;
    padding: clamp(22px, 2.2vw, 30px);
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 1px 0 var(--surface) inset, 0 18px 40px -32px var(--shadow-c2);
    color: var(--ink-2);
  }
  @supports not (grid-template-rows: subgrid) { .tier { grid-template-rows: none; } }
  @media (width < 640px) { .tier { grid-row: auto; grid-template-rows: none; } }
  .tier__head { display: grid; gap: 6px; align-content: start; padding-bottom: 22px; }
  .tier__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 1.4em; }
  .tier__kicker { font: 500 0.68rem/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
  .tier__badge { display: inline-flex; align-items: center; gap: 6px; font: 600 0.68rem/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
  .tier__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in oklab, currentColor 22%, transparent); }
  .tier__name { font: 700 1.12rem/1.25 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
  .tier__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; white-space: nowrap; }
  .tier__amount { font: 500 clamp(2.2rem, 1.6rem + 1.5vw, 2.85rem)/1 var(--font-mono); letter-spacing: -0.06em; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
  .tier__per { font: 500 0.78rem/1 var(--font-mono); color: var(--ink-3); }
  .tier__bill { padding-top: 8px; padding-bottom: 22px; font-size: 0.84rem; color: var(--ink-3); }
  .tier__runs { display: grid; gap: 3px; align-content: start; padding-block: 18px; border-top: 1px solid var(--line); }
  .tier__runs b { font: 700 1.6rem/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
  .tier__runs b.is-text { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.02em; }
  .tier__runs b small { font: 600 0.92rem/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--ink); margin-left: 6px; }
  .tier__runs span { font-size: 0.84rem; line-height: 1.4; color: var(--ink-3); }
  /* the credits line; a plan whose difference is volume adds an accent tag ("4x the credits of Basic") */
  .tier__cline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
  .tier__vs { padding: 0.2em 0.6em; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font: 600 0.74rem/1.3 var(--font-body); font-style: normal; white-space: nowrap; }
  /* what the credits correspond to ("125 analysis runs with Aurora"), under the credits note */
  .tier__runs .tier__or { margin-top: 6px; font: 600 0.9rem/1.35 var(--font-body); color: var(--ink); }
  /* the plan's extras, under the custom volume they qualify */
  .tier__runs .tier__diff { margin-top: 14px; }
  .tier__runs .tier__diff span { font-size: inherit; line-height: inherit; color: inherit; }
  .tier__what { display: grid; gap: 18px; align-content: start; padding-bottom: 22px; }
  .tier__diff { display: grid; gap: 8px; align-content: start; font-size: 0.9rem; line-height: 1.35; }
  .tier__sub { font: 500 0.68rem/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
  /* AI evaluators: each evaluator's own mark + name, side by side on one row, no price */
  .tier__ai { display: grid; gap: 8px; }
  .tier__evals { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .tier__evals li { display: flex; }
  .tier__eval { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font: 600 0.9rem/1.3 var(--font-body); color: var(--ink); }
  .tier__eval .ai-icon { width: 20px; height: 20px; }
  /* Modules: each card lists only what its plan includes, with icon tile + name at full strength. */
  .tier__mods { display: grid; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--line); }
  .tier__mlist { display: grid; gap: 7px; }
  .tier__mlist li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 26px; }
  .tier__ficon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); }
  .tier__ficon svg { width: 15px; height: 15px; }
  .tier__fname { font: 650 0.88rem/1.3 var(--font-body); color: var(--ink); }
  .tier__perrun { margin-left: 4px; padding: 0.1em 0.5em; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font: 500 0.64rem/1.3 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-3); white-space: nowrap; vertical-align: 0.1em; }
  /* Not-included evaluators: an empty dashed mark, muted name and "(not included)" for assistive tech. */
  .tier__eoff::before { content: ""; width: 8px; height: 1.5px; border-radius: 1px; background: var(--ink-3); }
  .tier__eval.is-off { font-weight: 450; color: var(--ink-3); }
  .tier__eoff { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px dashed var(--line-strong); }
  .tier__diff li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink-2); }
  .tier__diff li svg { width: 16px; height: 16px; margin-top: 1px; color: var(--accent-text); }
  .tier__act { display: grid; align-content: start; }
  /* sits partly in the card's bottom padding, so the cards without it keep a tight bottom edge */
  .tier__alt { display: flex; justify-content: center; padding-top: 10px; margin-bottom: -14px; }
  .tier__alt .copy-field { justify-content: center; font-size: 0.82rem; }

  /* the featured card: dark navy, lifted, accent action (K11) */
  .tier.tier--featured {
    background: var(--panel);
    border-color: color-mix(in oklab, var(--stage-accent) 30%, var(--panel));
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent), 0 40px 70px -36px oklch(0.4 0.2 262 / 0.6);
  }
  .tier--featured::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(90% 55% at 80% 0%, color-mix(in oklab, var(--accent) 34%, transparent), transparent 70%);
    pointer-events: none;
  }
  .tier--featured > * { position: relative; }
  @media (width >= 1100px) { .tier--featured { translate: 0 -10px; } }

  /* below the cards: the shared features once, and one shared meeting line */
  .tiers-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 40px; align-items: center; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
  @media (width < 900px) { .tiers-foot { grid-template-columns: minmax(0, 1fr); } }
  .incl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
  .incl__label { font: 500 0.7rem/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
  .incl ul { display: contents; }
  .incl li { display: inline-flex; align-items: center; gap: 7px; font: 600 0.88rem/1.35 var(--font-body); color: var(--ink); }
  .incl li svg { width: 15px; height: 15px; color: var(--accent-text); }
  /* the credits sentence, once, right under the cards */
  .tiers-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; font-size: 0.88rem; line-height: 1.45; color: var(--ink-2); }
  .tiers-note svg { width: 16px; height: 16px; flex: none; margin-top: 0.15em; color: var(--accent-text); }
  .tiers-talk { font-size: 0.92rem; color: var(--ink-2); white-space: nowrap; }
  @media (width < 560px) { .tiers-talk { white-space: normal; } }
}

/* ------------------------------------------------ Round 5 kit (K1-K14) */
@layer components {

  /* Every dark navy surface of the kit re-maps the tokens, so all components work inside it */
  .section--stage, .cta-band, .stage-surface, .flow-panel, .mini-panel, .flow-band__core {
    --surface: var(--stage-2);
    --surface-2: var(--stage-2);
    --surface-3: var(--stage-3);
    --line: var(--stage-line);
    --line-strong: var(--stage-line-2);
    --ink: var(--stage-ink);
    --ink-2: var(--stage-ink-2);
    --ink-3: var(--stage-ink-3);
    --accent-text: var(--stage-accent);
    --accent-soft: var(--stage-accent-soft);
    --accent-soft-2: var(--stage-accent-soft-2);
    --focus: var(--stage-accent);
    --good: var(--stage-good);
    --good-soft: var(--stage-good-soft);
    --warn: var(--stage-warn);
    --warn-soft: var(--stage-warn-soft);
    --bg: var(--stage);
    background-color: var(--stage);
    color: var(--ink-2);
  }
  /* Panels inside a section: the same navy in light; one step below the page in dark */
  .flow-panel, .mini-panel, .flow-band__core { --bg: var(--panel); background-color: var(--panel); }

  /* ---------- K1 Stage section: fine grid faded by a radial mask + one slow drifting glow */
  .section--stage, .cta-band {
    position: relative;
    isolation: isolate;
    overflow: clip;
    border-block: 1px solid var(--stage-edge);
  }
  .section--stage::before, .cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      linear-gradient(to right, var(--stage-grid) 1px, transparent 1px),
      linear-gradient(to bottom, var(--stage-grid) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: 50% 0;
    -webkit-mask: radial-gradient(ellipse 70% 85% at var(--grid-x, 50%) var(--grid-y, 30%), currentColor 12%, transparent 78%);
    mask: radial-gradient(ellipse 70% 85% at var(--grid-x, 50%) var(--grid-y, 30%), currentColor 12%, transparent 78%);
  }
  .section--stage::after, .cta-band::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    left: var(--glow-x, 74%);
    top: var(--glow-y, 8%);
    width: min(1040px, 130vw);
    aspect-ratio: 1.45;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--stage-glow), transparent);
  }
  @media (prefers-reduced-motion: no-preference) {
    .section--stage::after, .cta-band::after { animation: stage-drift 30s var(--ease-in-out) infinite alternate; }
  }
  @keyframes stage-drift {
    from { transform: translate3d(-6%, -5%, 0) scale(0.94); opacity: 0.82; }
    to { transform: translate3d(7%, 10%, 0) scale(1.06); opacity: 1; }
  }

  /* K13 close: the glow sits high and fades out well before the band ends; the band's lower part blends
     into the footer's navy (--close), with no bottom edge, so CTA + footer read as one dark block. */
  .cta-band {
    --glow-x: 50%; --glow-y: 38%; --grid-y: 42%;
    border-bottom: 0;
    background-image: linear-gradient(to bottom, transparent 40%, var(--close));
  }
  .cta-band::after { width: min(980px, 120vw); aspect-ratio: 2; }

  /* K13 network (injected by JS into every .cta-band and [data-network]): solid hairline curves that end at
     a node's edge or fade out, clean nodes (halo + opaque disc with one ring + glowing dot), a soft pulse
     travelling along each link. The whole SVG fades out toward every edge of the band. */
  .net {
    position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
    color: var(--stage-accent);
    -webkit-mask: linear-gradient(to bottom, transparent 2%, #000 22%, #000 62%, transparent 92%), linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(to bottom, transparent 2%, #000 22%, #000 62%, transparent 92%), linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
    mask-composite: intersect;
  }
  .net stop { stop-color: currentColor; }
  .net__glow stop { stop-color: var(--accent); }
  .net__line { fill: none; stroke-width: 1; stroke-linecap: round; }
  .net__halo { transform-box: fill-box; transform-origin: center; opacity: 0.75; }
  .net__disc { fill: var(--stage-2); stroke: color-mix(in oklch, var(--stage-accent) 42%, transparent); stroke-width: 1; }
  .net__spark { fill: var(--stage-accent); opacity: 0.2; }
  .net__core { fill: var(--stage-accent); }
  .net__pulse { display: none; }
  .net__pulse path { fill: none; stroke: var(--stage-accent); stroke-linecap: round; stroke-dasharray: 0.06 2; stroke-dashoffset: 0.06; opacity: 0; }
  .net__pulse-glow { stroke-width: 5; --pulse-o: 0.2; }
  .net__pulse-core { stroke-width: 1.6; --pulse-o: 0.9; }
  @media (prefers-reduced-motion: no-preference) {
    .net__pulse { display: inline; }
    .net__pulse path { animation: net-travel var(--dur, 9s) linear infinite; animation-delay: var(--delay, 0s); }
    .net__halo { animation: net-breathe 7s var(--ease-in-out) infinite; animation-delay: var(--d, 0s); }
  }
  /* one soft light travels the link, then rests; never more than one per link */
  @keyframes net-travel {
    0% { stroke-dashoffset: 0.06; opacity: 0; }
    5% { opacity: var(--pulse-o); }
    50% { opacity: var(--pulse-o); }
    56% { stroke-dashoffset: -1; opacity: 0; }
    100% { stroke-dashoffset: -1; opacity: 0; }
  }
  @keyframes net-breathe { 0%, 100% { transform: scale(0.88); opacity: 0.55; } 50% { transform: scale(1.06); opacity: 0.9; } }
  @media (width < 720px) { .net--far { display: none; } }

  /* ---------- K3 Figure cards: mono kicker + index, big number with the unit in the accent, signal strip */
  .fig-grid {
    display: grid;
    gap: var(--gap, clamp(12px, 1.4vw, 18px));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 230px)), 1fr));
  }
  .fig {
    --_pad: clamp(18px, 1.9vw, 24px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: var(--_pad) var(--_pad) 0;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: linear-gradient(to bottom, var(--surface), color-mix(in oklch, var(--surface) 55%, transparent));
    overflow: hidden;
  }
  .fig__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font: 500 0.68rem/1.4 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .fig__kicker { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; text-wrap: pretty; }
  .fig__index { flex: none; font-variant-numeric: tabular-nums; opacity: 0.8; }
  .fig__value {
    margin-top: clamp(10px, 1.4vw, 18px);
    font: 700 var(--fig-size, clamp(2.6rem, 1.9rem + 2.1vw, 3.6rem))/0.92 var(--font-display);
    letter-spacing: -0.045em;
    word-spacing: -0.2em;
    color: var(--ink);
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
  }
  .fig__unit { font: 500 0.36em/1 var(--font-mono); letter-spacing: 0; word-spacing: normal; color: var(--accent-text); margin-left: 0.1em; }
  .fig__unit:first-child { margin: 0 0.06em 0 0; }
  .fig__label { margin-top: 4px; font-size: 0.93rem; line-height: 1.45; color: var(--ink-2); max-width: 32ch; }
  .fig > .ev-badge { align-self: flex-start; margin-top: 4px; }
  .fig__signal {
    display: flex;
    align-items: flex-end;
    gap: clamp(3px, 0.45vw, 6px);
    height: calc(var(--signal-h, 50px) + 18px);
    margin-top: auto;
    padding-top: 18px;
  }
  .fig__signal > i {
    flex: 1;
    height: calc(var(--h, 50) * 1%);
    border-radius: 2px 2px 0 0;
    background: color-mix(in oklch, var(--ink-3) 24%, transparent);
  }
  .fig__signal > i.is-hi { background: linear-gradient(to top, color-mix(in oklch, var(--accent) 60%, transparent), color-mix(in oklch, var(--accent-text) 78%, transparent)); }

  /* ---------- K4 Flow primitives */
  .flow-panel {
    container: flow / inline-size;
    position: relative;
    isolation: isolate;
    border: 1px solid var(--stage-line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-3);
  }
  .flow-canvas, .flow-band__core {
    background-image:
      linear-gradient(to right, var(--stage-grid) 1px, transparent 1px),
      linear-gradient(to bottom, var(--stage-grid) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: 50% 50%;
  }
  .flow-canvas {
    position: relative;
    padding: clamp(16px, 4cqi, 30px) clamp(14px, 3.4cqi, 26px);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }
  [data-flow] { position: relative; }
  :where([data-flow]) > :not(.flow-svg, .flow-anchor) { position: relative; z-index: 1; }
  .flow-svg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .flow-line {
    fill: none;
    stroke: color-mix(in oklch, var(--accent-text) 58%, transparent);
    stroke-width: 1.5;
    stroke-dasharray: 4 6;
    stroke-linecap: round;
  }
  .flow-line.is-active { stroke: var(--accent-text); stroke-width: 2; }
  .flow-end { fill: color-mix(in oklch, var(--accent-text) 80%, transparent); }
  @media (prefers-reduced-motion: no-preference) {
    .flow-line { animation: flow-dash 1.8s linear infinite; }
    .flow-line--rev { animation-direction: reverse; }
  }
  @keyframes flow-dash { to { stroke-dashoffset: -20; } }

  .flow-node {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: 0 12px 26px -16px var(--shadow-c2);
  }
  .flow-node__tile {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--accent-text);
    font: 600 0.72rem/1 var(--font-mono);
    letter-spacing: 0.04em;
  }
  .flow-node__tile svg { width: 18px; height: 18px; }
  .flow-node__title { min-width: 0; font: 650 0.86rem/1.25 var(--font-display); color: var(--ink); }
  .flow-node__meta { min-width: 0; font-size: 0.75rem; line-height: 1.35; color: var(--ink-3); }
  .flow-node__meta .label-chip { font-size: 0.66rem; }
  .flow-node--hub {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 3px;
    padding: 18px 16px 16px;
    text-align: center;
    border-color: color-mix(in oklab, var(--accent) 60%, var(--line));
    background: color-mix(in oklab, var(--accent) 18%, var(--surface));
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 10%, transparent), 0 26px 60px -24px var(--accent-glow);
  }
  .flow-node--hub .flow-node__tile { grid-row: auto; width: 40px; height: 40px; margin-bottom: 6px; background: color-mix(in oklab, var(--accent) 30%, var(--surface)); }
  .flow-node--hub .flow-node__tile svg { width: 22px; height: 22px; }
  .flow-node--hub .flow-node__title { font-size: 0.95rem; }
  .flow-node--hub::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid var(--accent-text);
    opacity: 0;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .flow-node--hub::before { animation: hub-pulse 3.6s var(--ease-out) infinite; }
  }
  @keyframes hub-pulse { 0% { opacity: 0.55; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.1, 1.16); } }

  /* Node graph: inputs | hub | outcomes (ref: node-graph concept); a list in a narrow panel */
  .flow-graph {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1fr);
    column-gap: clamp(26px, 8cqi, 84px);
    align-items: center;
  }
  .flow-graph__col { display: grid; gap: clamp(20px, 6cqi, 54px); align-content: center; }
  @container flow (width < 540px) {
    .flow-graph { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
    .flow-graph > .flow-svg { display: none; }
    .flow-graph__col { gap: 8px; }
    .flow-graph > :not(.flow-svg, :last-child)::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -15px;
      height: 14px;
      border-left: 1.5px dashed color-mix(in oklch, var(--accent-text) 60%, transparent);
    }
    .flow-node--hub { padding-block: 12px; }
    .flow-node--hub .flow-node__tile { display: none; }
  }

  /* Anchors: invisible line ends on a container edge (e.g. lines entering a dark core) */
  .flow-anchor { position: absolute; left: 0; top: var(--y, 50%); width: 1px; height: 1px; pointer-events: none; }
  .flow-anchor--out { left: auto; right: 0; }

  /* Flow band: source (light) -> Smart Sifty (dark core, flowing lines) -> outcome (light) */
  .flow-band { container: fband / inline-size; min-width: 0; }
  .flow-band__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    overflow: hidden;
  }
  .flow-band__end { display: grid; align-content: center; justify-items: start; gap: 6px; padding: clamp(18px, 3.4cqi, 28px); }
  .flow-band__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--accent-text);
  }
  .flow-band__icon svg { width: 22px; height: 22px; }
  .flow-band__title { font: 700 1.04rem/1.3 var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
  .flow-band__text { font-size: 0.86rem; line-height: 1.45; color: var(--ink-2); }
  .flow-band__core { position: relative; display: grid; place-items: center; min-height: 220px; padding: 44px clamp(24px, 6cqi, 48px); }
  .flow-band__core .flow-node--hub { width: min(100%, 220px); }
  .flow-band__tag {
    position: absolute;
    font: 500 0.62rem/1.2 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .flow-band__tag--in { left: 14px; top: 14px; }
  .flow-band__tag--out { right: 14px; bottom: 14px; }
  @container fband (width < 600px) {
    .flow-band__row { grid-template-columns: minmax(0, 1fr); }
    .flow-band__core { min-height: 230px; padding-block: 52px; }
    .flow-band__core .flow-anchor { left: var(--x, 50%); top: 0; }
    .flow-band__core .flow-anchor--out { top: auto; bottom: 0; right: auto; }
  }

  /* ---------- K5 Stepper: numbered circles on a line, active halo + underline, a panel that swaps */
  .stepper { --dot: 40px; display: grid; gap: clamp(20px, 2.4vw, 28px); }
  .stepper__track { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-4); }
  .stepper__list { --n: 5; --progress: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  .stepper__list::before, .stepper__list::after {
    content: "";
    position: absolute;
    top: calc(var(--dot) / 2);
    left: calc(50% / var(--n));
    right: calc(50% / var(--n));
    height: 1px;
    background: var(--line-strong);
  }
  .stepper__list::after { height: 2px; margin-top: -0.5px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--progress)); transition: transform var(--dur-4) var(--ease-out); }
  .stepper__tab {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 0 4px 14px;
    border: 0;
    background: none;
    color: var(--ink-2);
    font: 500 0.86rem/1.3 var(--font-body);
    text-align: center;
  }
  .stepper__dot {
    display: grid;
    place-items: center;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--bg);
    color: var(--ink-2);
    font: 500 0.74rem/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
    transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-3) var(--ease-out);
  }
  .stepper__tab.is-done .stepper__dot { border-color: var(--accent); color: var(--accent-text); }
  .stepper__tab:hover .stepper__dot { border-color: var(--accent); }
  .stepper__tab[aria-selected="true"] { color: var(--ink); font-weight: 650; }
  .stepper__tab[aria-selected="true"] .stepper__dot {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 0 0 7px color-mix(in oklch, var(--accent) 16%, transparent);
  }
  .stepper__tab::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(64px, 70%);
    height: 2px;
    translate: -50% 0;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--dur-3) var(--ease-out);
  }
  .stepper__tab[aria-selected="true"]::after { transform: scaleX(1); }
  .stepper__tab:focus-visible { outline: none; }
  .stepper__tab:focus-visible .stepper__dot { outline: 3px solid var(--focus); outline-offset: 3px; }
  /* While auto-advancing, the active underline doubles as the timer (paused = full) */
  @media (prefers-reduced-motion: no-preference) {
    .stepper[data-playing] .stepper__tab[aria-selected="true"]::after { animation: step-timer var(--step-interval, 6s) linear both; }
  }
  @keyframes step-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .stepper__toggle {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-top: calc((var(--dot) - 36px) / 2);
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    transition: border-color var(--dur-1), background-color var(--dur-1);
  }
  .stepper__toggle:hover { border-color: var(--accent); }
  .stepper__toggle svg { width: 14px; height: 14px; }
  .stepper__toggle .i-play, .stepper__toggle.is-paused .i-pause { display: none; }
  .stepper__toggle.is-paused .i-play { display: block; }
  .stepper__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding: clamp(18px, 2.6vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--shadow-2);
  }
  .stepper__copy { display: grid; gap: 12px; justify-items: start; align-content: center; }
  .stepper__kicker { font: 500 0.7rem/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
  .stepper__title { font: 700 clamp(1.55rem, 1.15rem + 1.5vw, 2.4rem)/1.05 var(--font-display); letter-spacing: -0.035em; color: var(--ink); }
  .stepper__text { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
  @media (width < 720px) {
    .stepper { --dot: 36px; }
    .stepper__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .stepper__tab { padding-bottom: 10px; }
    .stepper__panel { grid-template-columns: minmax(0, 1fr); }
  }

  /* Small dark product panel with a status line (used by K5 panels, reusable anywhere) */
  .mini-panel { display: grid; min-width: 0; border: 1px solid var(--stage-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-3); }
  .mini-panel__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font: 500 0.66rem/1.3 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .mini-panel__icon { display: inline-grid; color: var(--accent-text); }
  .mini-panel__icon svg { width: 16px; height: 16px; }
  .mini-panel__head > :last-child:not(:first-child) { margin-left: auto; }
  .mini-panel__body { display: grid; gap: 12px; align-content: center; min-height: 100px; padding: 16px; }
  .mini-panel__foot { display: grid; gap: 4px; padding: 12px 16px 14px; border-top: 1px solid var(--line); }
  .mini-panel__time { font: 500 0.66rem/1.45 var(--font-mono); letter-spacing: 0.02em; color: var(--ink-3); }
  .mini-panel__event { font-size: 0.88rem; line-height: 1.4; color: var(--ink); }
  .mini-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .mini-row > svg { width: 16px; height: 16px; flex: none; color: var(--accent-text); }
  .skel { display: block; flex: 0 1 auto; width: var(--w, 100%); height: 8px; border-radius: var(--r-pill); background: var(--surface-3); }
  .skel--accent { background: color-mix(in oklch, var(--accent-text) 55%, transparent); }
  .mini-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
  .mini-bars > i {
    flex: 1;
    height: calc(var(--h, 50) * 1%);
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, color-mix(in oklch, var(--accent) 65%, transparent), color-mix(in oklch, var(--accent-text) 90%, transparent));
  }

  /* ---------- K6 Hub-and-spoke: a centre card + six nodes joined by dashed connectors (tabs semantics) */
  .hub {
    --hub-gap: clamp(36px, 6vw, 96px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 20px var(--hub-gap);
    align-items: center;
  }
  .hub__nodes {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 20px var(--hub-gap);
    align-items: center;
    counter-reset: hub;
  }
  @supports (grid-template-columns: subgrid) {
    .hub__nodes { grid-template-columns: subgrid; grid-template-rows: subgrid; }
  }
  .hub__node {
    counter-increment: hub;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 56px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    font: 600 0.9rem/1.3 var(--font-display);
    text-align: left;
    transition: border-color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-2);
  }
  .hub__node::before { content: counter(hub, decimal-leading-zero); flex: none; font: 500 0.68rem/1 var(--font-mono); color: var(--ink-3); }
  .hub__node::after { content: ""; flex: none; width: 9px; height: 9px; margin-left: auto; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: background-color var(--dur-2), box-shadow var(--dur-2); }
  .hub__node:hover { border-color: var(--line-strong); }
  .hub__node[aria-selected="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent), 0 14px 30px -18px var(--accent-glow);
  }
  .hub__node[aria-selected="true"]::before { color: var(--accent-text); }
  .hub__node[aria-selected="true"]::after { background: var(--accent-text); box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent); }
  .hub__node:nth-child(-n + 3) { grid-column: 1; }
  .hub__node:nth-child(n + 4) { grid-column: 3; }
  .hub__node:nth-child(3n + 1) { grid-row: 1; }
  .hub__node:nth-child(3n + 2) { grid-row: 2; }
  .hub__node:nth-child(3n) { grid-row: 3; }
  .hub__center { grid-column: 2; grid-row: 1 / -1; z-index: 2; align-self: center; min-width: 0; }
  .hub__panel {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: clamp(22px, 3vw, 36px);
    border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--line));
    border-radius: var(--r-xl);
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--accent) 14%, var(--surface)), var(--surface));
    box-shadow: 0 0 0 8px color-mix(in oklch, var(--accent) 6%, transparent), 0 30px 70px -30px var(--accent-glow);
    text-align: center;
  }
  .hub__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--accent-soft); color: var(--accent-text); }
  .hub__icon svg { width: 24px; height: 24px; }
  .hub__kicker { font: 500 0.66rem/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
  .hub__title { font: 700 clamp(1.3rem, 1rem + 1vw, 1.75rem)/1.15 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
  .hub__text { font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); max-width: 42ch; }
  .hub__note { display: inline-flex; align-items: center; gap: 6px; font: 600 0.78rem/1.3 var(--font-display); color: var(--good); }
  .hub__note svg { width: 15px; height: 15px; }
  @media (width <= 720px) {
    .hub { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 16px; }
    .hub__nodes { grid-column: 1; grid-row: 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 8px; }
    .hub__node:nth-child(n) { grid-column: 1; grid-row: auto; }
    .hub__center { grid-column: 1; grid-row: 2; }
    .hub > .flow-svg { display: none; }
  }
  /* Option .hub--pulse: two soft concentric rings behind the centre card, breathing slowly
     (static rings under reduced motion; paused off-screen with the hub; hidden in the list layout) */
  .hub--pulse .hub__center { position: relative; }
  .hub--pulse .hub__center::before, .hub--pulse .hub__center::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -16px;
    border-radius: calc(var(--r-xl) + 16px);
    border: 1px solid color-mix(in oklch, var(--accent) 24%, transparent);
    pointer-events: none;
  }
  .hub--pulse .hub__center::after { inset: -32px; border-radius: calc(var(--r-xl) + 32px); border-color: color-mix(in oklch, var(--accent) 12%, transparent); }
  @supports (corner-shape: squircle) {
    .hub--pulse .hub__center::before { corner-shape: squircle; border-radius: 52px; }
    .hub--pulse .hub__center::after { corner-shape: squircle; border-radius: 68px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .hub--pulse .hub__center::before { animation: hub-ring 5.6s var(--ease-in-out) infinite; }
    .hub--pulse .hub__center::after { animation: hub-ring 5.6s var(--ease-in-out) 1.4s infinite; }
  }
  @keyframes hub-ring { 0%, 100% { transform: scale(0.985); opacity: 0.55; } 50% { transform: scale(1.015); opacity: 1; } }
  @media (width <= 720px) { .hub--pulse .hub__center::before, .hub--pulse .hub__center::after { display: none; } }

  /* ---------- K7 Live status dot */
  .live-dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 500 0.66rem/1.2 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--good);
  }
  .live-dot::before, .live-dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
  .live-dot::after { position: absolute; left: 0; top: 50%; margin-top: -3.5px; opacity: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .live-dot::after { animation: live-pulse 2.6s var(--ease-out) infinite; }
  }
  @keyframes live-pulse { 0% { transform: scale(1); opacity: 0.55; } 75%, 100% { transform: scale(2.8); opacity: 0; } }
  .app-frame__bar .live-dot { margin-left: auto; }

  /* ---------- K8 Card details: mono kicker, icon tile top-right, bottom hairline that fills */
  .card--detail {
    --_pad: var(--card-pad, clamp(20px, 2.2vw, 28px));
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: calc(var(--_pad) + 16px);
    transition: border-color var(--dur-2), box-shadow var(--dur-2);
  }
  .card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .card__kicker { font: 500 0.68rem/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
  .card__icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--accent-soft); color: var(--accent-text); }
  .card__icon svg { width: 19px; height: 19px; }
  .card--detail::before, .card--detail::after {
    content: "";
    position: absolute;
    left: var(--_pad);
    right: var(--_pad);
    bottom: calc(var(--_pad) * 0.7);
    height: 2px;
    border-radius: 2px;
    background: var(--line);
  }
  .card--detail::after { background: var(--accent); transform-origin: 0 50%; transform: scaleX(0.32); transition: transform 700ms var(--ease-out); }
  .card--detail:is(:hover, :focus-within)::after { transform: scaleX(1); }
  .card--detail:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
  @media (prefers-reduced-motion: no-preference) {
    .card--detail[data-motion="armed"]::after, [data-motion="armed"] > .card--detail::after { transform: scaleX(0); }
  }

  /* ---------- K9 Callout strip: icon tile + one sentence + round arrow to the next section */
  .callout-strip {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 22px);
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: color-mix(in oklch, var(--surface) 72%, transparent);
  }
  .callout-strip__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--accent-soft); color: var(--accent-text); }
  .callout-strip__icon svg { width: 21px; height: 21px; }
  .callout-strip__text { flex: 1; min-width: 0; font: 400 clamp(1rem, 0.94rem + 0.35vw, 1.22rem)/1.4 var(--font-display); letter-spacing: -0.012em; color: var(--ink-2); }
  .callout-strip__text b { font-weight: 650; color: var(--ink); }
  .callout-strip__go {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--ink);
    transition: border-color var(--dur-1), background-color var(--dur-1), translate var(--dur-2) var(--ease-out);
  }
  .callout-strip__go svg { width: 18px; height: 18px; rotate: 90deg; }
  .callout-strip__go:hover { border-color: var(--accent-text); background: var(--accent-soft); translate: 0 2px; }
  @media (width < 560px) { .callout-strip { align-items: flex-start; } .callout-strip__icon { display: none; } }

  /* ---------- K10 Watermark word: huge, very faint, behind its section */
  :where(section, .section):has(> .watermark, > .wrap > .watermark) { isolation: isolate; overflow: clip; }
  .watermark {
    position: absolute;
    z-index: -1;
    right: -0.04em;
    bottom: -0.2em;
    font: 800 clamp(5.5rem, 2rem + 15vw, 17rem)/0.8 var(--font-display);
    letter-spacing: -0.055em;
    white-space: nowrap;
    color: var(--ink);
    opacity: 0.04;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .watermark--left { right: auto; left: -0.04em; }
  .watermark--top { bottom: auto; top: 0.05em; }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .watermark { animation: watermark-drift linear both; animation-timeline: view(); animation-range: cover; }
    }
  }
  @keyframes watermark-drift { from { transform: translateX(4%); } to { transform: translateX(-4%); } }

  /* ---------- K12 FAQ split: sticky left column + numbered accordion */
  .faq-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
  .faq-split__aside { position: sticky; top: calc(var(--header-h) + 36px); display: grid; gap: 18px; justify-items: start; }
  .faq-split__aside .h2 { margin-top: var(--space-1); }
  .faq-split__note { font-size: var(--step-0); color: var(--ink-2); }
  @media (width < 900px) { .faq-split { grid-template-columns: minmax(0, 1fr); } .faq-split__aside { position: static; } }
  .link-rule {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-strong);
    font: 700 0.92rem/1.2 var(--font-display);
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--dur-1), color var(--dur-1);
  }
  .link-rule:hover { color: var(--accent-text); border-color: var(--accent-text); text-decoration: none; }
  .link-rule svg { width: 1em; height: 1em; color: var(--accent-text); }

  /* squircle corners for the kit's large surfaces (declared after their radii) */
  @supports (corner-shape: squircle) {
    .flow-panel, .stepper__panel, .flow-band__row, .hub__panel { corner-shape: squircle; border-radius: 36px; }
    .fig, .mini-panel, .callout-strip, .flow-canvas { corner-shape: squircle; border-radius: 26px; }
  }

  /* ---------- K14 Motion kit (JS arms elements only when motion is allowed; no JS = final state) */
  [data-bars] > * { transform-origin: 50% 100%; }
  @media (prefers-reduced-motion: no-preference) {
    :is([data-reveal], [data-reveal-stagger] > *)[data-motion="armed"] { opacity: 0; transform: translate3d(0, 18px, 0); }
    :is([data-reveal], [data-reveal-stagger] > *)[data-motion="in"] {
      transition: opacity 700ms var(--ease-out), transform 820ms var(--ease-out);
      transition-delay: calc(var(--reveal-i, 0) * 85ms);
    }
    [data-bars][data-motion="armed"] > * { transform: scaleY(0); }
    [data-bars][data-motion="in"] > * {
      transition: transform 900ms var(--ease-out);
      transition-delay: calc(var(--bar-i, 0) * 45ms);
    }
    [data-draw-path][data-motion="armed"] { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
    [data-draw-path][data-motion="in"] { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--ease-out); }
    .chart-svg:has([data-draw-path][data-motion="armed"]) :is(.pt, .series-area) { opacity: 0; }
    .chart-svg:has([data-draw-path][data-motion="in"]) :is(.pt, .series-area) { transition: opacity 600ms var(--ease-out) 1100ms; }
  }
  /* Ambient motion pauses off-screen ([data-ambient="paused"], set by SS.motion) and on a hidden tab */
  [data-ambient="paused"], [data-ambient="paused"] *, [data-ambient="paused"]::before, [data-ambient="paused"]::after,
  [data-ambient="paused"] *::before, [data-ambient="paused"] *::after,
  :root[data-tab-hidden] *, :root[data-tab-hidden] *::before, :root[data-tab-hidden] *::after {
    animation-play-state: paused !important;
  }
}

/* ------------------------------------------------- route view transitions */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(page) { animation: page-out var(--dur-2) var(--ease-in-out) both; }
  ::view-transition-new(page) { animation: page-in var(--dur-3) var(--ease-out) both; }
}
::view-transition-group(masthead) { animation: none; z-index: 10; }
/* Local transitions (rows, drawer) keep the page still */
html.vt-local::view-transition-old(page) { display: none; }
html.vt-local::view-transition-new(page) { animation: none; }
/* Theme switch: one circular reveal over the whole document */
html.vt-theme #view, html.vt-theme .masthead__inner { view-transition-name: none; }
html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@keyframes page-out { to { opacity: 0; translate: 0 -8px; } }
@keyframes page-in { from { opacity: 0; translate: 0 14px; } }

/* Artifact contract: at publish the host wraps the page in a skeleton whose unlayered
   rules (:root color-scheme, html scroll-padding, body font/colour/background) beat
   every layer above. These unlayered rules, tokens only, restore the design system. */
body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
}
:root { scroll-padding-top: calc(var(--header-h) + 24px + env(safe-area-inset-top, 0px)); }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

/* -------------------------------------------------------------- utilities */
@layer utilities {
  .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .nowrap { white-space: nowrap; }
  .tabular { font-variant-numeric: tabular-nums; }
  .center { text-align: center; }
  .mt-0 { margin-top: 0; }
  .mt-s { margin-top: var(--space-3); }
  .mt-m { margin-top: var(--space-5); }
  .mt-l { margin-top: var(--space-7); }
  .max-prose { max-width: 66ch; }
  .ink { color: var(--ink); }
  .muted { color: var(--ink-3); }
}