/* =============================================================================
   WEBFORGE · SITE DESIGN LAYER                      Forge DS · Kinetic 2.0
   webforgecreate.org — one stylesheet for every page of the site.
   -----------------------------------------------------------------------------
   THE FIVE RULES (page-builders: these are the law)
   1. One accent — WebForge orange. It is a FILL, or it sits on ink.
      Never accent-coloured text on chalk: .surface-chalk maps --c-accent-fg
      to ink for you. Use --c-accent for fills, --c-accent-fg for text.
   2. Components use ROLE tokens only (--c-*, --pv-*). Raw hex values and
      palette tokens (--ink-*, --chalk-*, --cw-*, --kin-*, …) live in the
      TOKENS block below and nowhere else. To change how a section looks,
      give it a surface class — never a colour.
        .surface-ink    default dark          .surface-ink-2  lifted dark
        .surface-deep   footer black          .surface-chalk  light, calm
        .surface-accent the orange band (ink text, ink buttons)
   3. Everything you can press leans forward (--lean).
   4. Every section edge rises to the right (--cut). So do the numbers.
   5. Motion is an enhancement. Content is visible with no JS and no motion.
      Reveals are ≤ 450 ms, transform + opacity only, and every motion token
      has a reduced-motion value.
   -----------------------------------------------------------------------------
   RE-COLOUR: <html data-colorway="volt|royal|kelly|flare"> or change
   --brand-accent. Surfaces, focus rings, the hero canvas and the four style
   previews all follow.
   ============================================================================= */


/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ */
:root {
  /* ── 1 · BRAND ─────────────────────────────────────────────────────────── */
  --brand-accent:     var(--cw-forge);  /* the ONE accent (fills, or on ink)  */
  --brand-accent-ink: #0A0A0B;          /* text that sits ON the accent       */
  --brand-ink:        #0A0A0B;          /* darkest surface · text on light    */
  --brand-chalk:      #F2F0E9;          /* lightest surface · text on dark    */

  /* ── 1b · COLOURWAYS — every one carries ink text at ≥ 5.3 : 1 ──────────── */
  --cw-forge: #FF5B1F;   /* WebForge orange · ink-on 6.4 : 1 */
  --cw-volt:  #D4FF1E;   /* ink-on 17 : 1  */
  --cw-royal: #5B7BFF;   /* ink-on 5.4 : 1 */
  --cw-kelly: #2FD27A;   /* ink-on 10 : 1  */
  --cw-flare: #FF4FA0;   /* ink-on 6.5 : 1 */

  /* ── 2 · PALETTE (warm-shifted neutrals) — never used by components ─────── */
  --ink-1000: #050506;
  --ink-900:  var(--brand-ink);
  --ink-850:  #101012;
  --ink-800:  #17171A;
  --ink-700:  #222226;
  --ink-300:  #A3A097;   /* dim text on ink   → 7.6 : 1 */
  --chalk-50:  var(--brand-chalk);
  --chalk-100: #E7E4DA;
  --chalk-600: #5E5B54;  /* dim text on chalk → 5.9 : 1 */
  --shadow-black: rgb(0 0 0 / 0.62);

  /* ── 2b · STYLE-PREVIEW PALETTES — the four styles' own house colours ──── */
  --kin-bg: #0A0A0B;  --kin-chrome: #17171A; --kin-text: #F2F0E9; --kin-dim: #A3A097; --kin-accent: #D4FF1E;
  --cin-void: #050506; --cin-black: #000000; --cin-chrome: #16161A; --cin-bone: #F3EDE3; --cin-dim: #B4AC9E;
  --cin-tungsten: #F5B452; --cin-ember: #FF5B2E; --cin-lume: #7FD4E2;
  --bc-paper: #FFF5E6; --bc-raised: #FFFCF6; --bc-chrome: #FCE6C4; --bc-ink: #14231F; --bc-dim: #44534D;
  --bc-tangerine: #FF6A1F; --bc-sun: #FFC233; --bc-splash: #2BB3F2; --bc-river: #0E5E57;
  --pr-bone: #F3F2EE; --pr-raised: #FCFBF9; --pr-chrome: #EAE9E4; --pr-ink: #0D0E10; --pr-dim: #66686E;
  --pr-line: #DCDBD5; --pr-accent: #EE5A1E;

  /* ── 3 · COLOUR ROLES — components only ever use these ──────────────────
     Defaults = the ink surface. Surface classes (section 3b) remap them. */
  --c-bg:          var(--ink-900);
  --c-bg-2:        var(--ink-800);   /* raised panels on this surface        */
  --c-text:        var(--chalk-50);
  --c-text-dim:    var(--ink-300);
  --c-line:        color-mix(in srgb, var(--chalk-50) 14%, transparent);
  --c-line-strong: color-mix(in srgb, var(--chalk-50) 40%, transparent);
  --c-accent:      var(--brand-accent);   /* FILLS                           */
  --c-accent-fg:   var(--brand-accent);   /* accent used as text / stroke    */
  --c-on-accent:   var(--brand-accent-ink);
  --c-focus:       var(--brand-accent);
  --c-scrim:       color-mix(in srgb, var(--ink-900) 92%, transparent);
  --c-shadow:      var(--shadow-black);

  /* ── 4 · TYPE — Archivo (variable width + weight) + JetBrains Mono ─────── */
  --font-display: "Archivo", Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Narrow", sans-serif;
  --font-body:    "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-serif:   "Bodoni 72", Didot, "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif; /* Cinematic preview only */

  --display-stretch: 62%;      /* Archivo wdth axis — 62 = extra-condensed   */
  --display-weight:  900;
  --display-leading: 0.84;
  --display-track:  -0.005em;
  --body-leading:    1.55;
  --mono-track:      0.08em;

  /* Fluid scale — min @ 360px, max @ 1440px */
  --step--2: clamp(0.75rem,  0.73rem + 0.09vw, 0.8125rem);  /* 12 → 13  mono labels */
  --step--1: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);  /* 14 → 15  small       */
  --step-0:  clamp(1rem,     0.96rem + 0.19vw, 1.125rem);   /* 16 → 18  body        */
  --step-1:  clamp(1.1875rem,1.1rem  + 0.37vw, 1.4375rem);  /* 19 → 23  lede        */
  --step-2:  clamp(1.5rem,   1.3rem  + 0.9vw,  2.125rem);   /* 24 → 34  h4          */
  --step-3:  clamp(2rem,     1.6rem  + 1.9vw,  3.25rem);    /* 32 → 52  h3          */
  --step-4:  clamp(2.5rem,   1.8rem  + 3.4vw,  5rem);       /* 40 → 80  h2 small    */
  --step-5:  clamp(3.1rem,   1.9rem  + 6vw,    7.5rem);     /* 50 → 120 section     */
  --step-score: clamp(4.5rem, 1.5rem + 9vw,    10rem);      /* scoreboard digits    */
  --hero-size: min(18.5vw, 15.5svh, 10.5rem);                 /* the hero stack       */

  /* ── 5 · SPACE ─────────────────────────────────────────────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  clamp(2.25rem, 1.8rem + 2vw,  3.5rem);
  --space-2xl: clamp(3rem,    2rem   + 4vw,  5.5rem);
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter:    clamp(1rem,    0.55rem + 2vw, 2.5rem);
  --wrap:      88rem;
  --measure:   62ch;
  --header-h:  4rem;

  /* ── 6 · GEOMETRY ──────────────────────────────────────────────────────── */
  --lean:   -10deg;                       /* the forward lean of every control */
  --cut:    clamp(2.25rem, 6vw, 6.5rem);  /* drop of every diagonal edge       */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;
  --radius-pill: 999px;

  /* ── 7 · SHADOW ────────────────────────────────────────────────────────── */
  --shadow-lift: 0 1.5rem 3rem -1.25rem var(--shadow-black);
  --shadow-tape: 0 1rem 2rem -1rem var(--shadow-black);

  /* ── 8 · MOTION ────────────────────────────────────────────────────────── */
  --dur-tap:     120ms;   /* press feedback                            */
  --dur-hover:   220ms;   /* hover colour / small moves                */
  --dur-move:    420ms;   /* sweeps, panels                            */
  --dur-reveal:  420ms;   /* on-scroll entrance — NEVER above 450ms    */
  --dur-hero:    640ms;   /* first-paint headline rise                 */
  --dur-count:  1100ms;   /* scoreboard digit roll (digits stay legible) */
  --dur-cut:     340ms;   /* in-page navigation cut                    */
  --dur-marquee:  38s;    /* one loop of a tape                        */
  --ease-launch: cubic-bezier(0.16, 1, 0.3, 1);     /* fast out, long glide */
  --ease-cut:    cubic-bezier(0.76, 0, 0.24, 1);    /* wipes & cuts         */
  --ease-snap:   cubic-bezier(0.34, 1.56, 0.64, 1); /* small overshoot       */
  --ease-odo:    cubic-bezier(0.22, 1, 0.36, 1);    /* scoreboard settle     */
  --stagger:     55ms;    /* capped at 3 steps in the reveal rule      */

  /* ── 9 · LAYERS ────────────────────────────────────────────────────────── */
  --z-raise:  2;
  --z-bar:   80;
  --z-header: 100;
  --z-top:   110;
}

/* ── 1c · COLOURWAY SWITCH — data-colorway re-points the brand accent; --club
   tells the four style previews to take the club colour too. ─────────────── */
:root[data-colorway="volt"]  { --brand-accent: var(--cw-volt);  --club: var(--cw-volt); }
:root[data-colorway="royal"] { --brand-accent: var(--cw-royal); --club: var(--cw-royal); }
:root[data-colorway="kelly"] { --brand-accent: var(--cw-kelly); --club: var(--cw-kelly); }
:root[data-colorway="flare"] { --brand-accent: var(--cw-flare); --club: var(--cw-flare); }
[data-colorway-btn="forge"] { --sw: var(--cw-forge); }
[data-colorway-btn="volt"]  { --sw: var(--cw-volt); }
[data-colorway-btn="royal"] { --sw: var(--cw-royal); }
[data-colorway-btn="kelly"] { --sw: var(--cw-kelly); }
[data-colorway-btn="flare"] { --sw: var(--cw-flare); }

/* ── 8b · MOTION, REDUCED ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-tap: 1ms; --dur-hover: 1ms; --dur-move: 1ms; --dur-reveal: 1ms; --dur-hero: 1ms; --dur-count: 1ms; --dur-cut: 1ms; --stagger: 0ms; }
}

/* ── 3b · SURFACES — remap the roles; components never change ─────────────── */
.surface-ink {
  --c-bg: var(--ink-900); --c-bg-2: var(--ink-800);
  --c-text: var(--chalk-50); --c-text-dim: var(--ink-300);
  --c-line: color-mix(in srgb, var(--chalk-50) 14%, transparent);
  --c-line-strong: color-mix(in srgb, var(--chalk-50) 40%, transparent);
  --c-accent: var(--brand-accent); --c-accent-fg: var(--brand-accent);
  --c-on-accent: var(--brand-accent-ink); --c-focus: var(--brand-accent);
  --c-scrim: color-mix(in srgb, var(--ink-900) 92%, transparent);
}
.surface-ink-2 {
  --c-bg: var(--ink-850); --c-bg-2: var(--ink-700);
  --c-text: var(--chalk-50); --c-text-dim: var(--ink-300);
  --c-line: color-mix(in srgb, var(--chalk-50) 14%, transparent);
  --c-line-strong: color-mix(in srgb, var(--chalk-50) 40%, transparent);
  --c-accent: var(--brand-accent); --c-accent-fg: var(--brand-accent);
  --c-on-accent: var(--brand-accent-ink); --c-focus: var(--brand-accent);
  --c-scrim: color-mix(in srgb, var(--ink-850) 92%, transparent);
}
.surface-deep {
  --c-bg: var(--ink-1000); --c-bg-2: var(--ink-850);
  --c-text: var(--chalk-50); --c-text-dim: var(--ink-300);
  --c-line: color-mix(in srgb, var(--chalk-50) 13%, transparent);
  --c-line-strong: color-mix(in srgb, var(--chalk-50) 30%, transparent);
  --c-accent: var(--brand-accent); --c-accent-fg: var(--brand-accent);
  --c-on-accent: var(--brand-accent-ink); --c-focus: var(--brand-accent);
}
.surface-chalk {
  --c-bg: var(--chalk-50); --c-bg-2: var(--chalk-100);
  --c-text: var(--ink-900); --c-text-dim: var(--chalk-600);
  --c-line: color-mix(in srgb, var(--ink-900) 14%, transparent);
  --c-line-strong: color-mix(in srgb, var(--ink-900) 45%, transparent);
  --c-accent: var(--brand-accent);        /* still a fill                    */
  --c-accent-fg: var(--ink-900);          /* rule 1: no accent text on chalk */
  --c-on-accent: var(--brand-accent-ink); --c-focus: var(--ink-900);
}
.surface-accent {
  --c-bg: var(--brand-accent);
  --c-bg-2: color-mix(in srgb, var(--brand-accent) 86%, var(--brand-accent-ink));
  --c-text: var(--brand-accent-ink);
  --c-text-dim: color-mix(in srgb, var(--brand-accent-ink) 84%, var(--brand-accent));
  --c-line: color-mix(in srgb, var(--brand-accent-ink) 22%, transparent);
  --c-line-strong: var(--brand-accent-ink);
  --c-accent: var(--brand-accent-ink);    /* on the band, buttons go ink     */
  --c-accent-fg: var(--brand-accent-ink);
  --c-on-accent: var(--brand-accent); --c-focus: var(--brand-accent-ink);
}
.surface-ink, .surface-ink-2, .surface-deep, .surface-chalk, .surface-accent { background-color: var(--c-bg); color: var(--c-text); }

/* ── 3c · STYLE-PREVIEW ROLES — the minis only use --pv-* ─────────────────── */
[data-style="kinetic"] {
  --pv-bg: var(--kin-bg); --pv-chrome: var(--kin-chrome); --pv-text: var(--kin-text); --pv-dim: var(--kin-dim);
  --pv-accent: var(--club, var(--kin-accent)); --pv-on-accent: var(--kin-bg);
}
[data-style="cinematic"] {
  --pv-bg: var(--cin-void); --pv-deep: var(--cin-black); --pv-chrome: var(--cin-chrome); --pv-text: var(--cin-bone); --pv-dim: var(--cin-dim);
  --pv-accent: var(--club, var(--cin-tungsten)); --pv-2: var(--cin-ember); --pv-3: var(--cin-lume);
}
[data-style="brightclub"] {
  --pv-bg: var(--bc-paper); --pv-raised: var(--bc-raised); --pv-chrome: var(--bc-chrome); --pv-text: var(--bc-ink); --pv-dim: var(--bc-dim);
  --pv-accent: var(--club, var(--bc-tangerine)); --pv-2: var(--bc-sun); --pv-3: var(--bc-splash); --pv-deep: var(--bc-river);
}
[data-style="precision"] {
  --pv-bg: var(--pr-bone); --pv-raised: var(--pr-raised); --pv-chrome: var(--pr-chrome); --pv-text: var(--pr-ink); --pv-dim: var(--pr-dim);
  --pv-line: var(--pr-line); --pv-accent: var(--club, var(--pr-accent)); --pv-on-accent: var(--pr-ink);
}
/* ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ END TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
   Below this line: zero hex values, zero palette tokens. Roles only.        */


/* =============================================================================
   BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--c-bg);
  /* no smooth scrolling: in-page links "cut" (script.js) instead of gliding */
}
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--body-leading);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, address, fieldset { margin: 0; padding: 0; }
address { font-style: normal; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { overflow: visible; }
[hidden] { display: none !important; }
::selection { background: var(--c-accent); color: var(--c-on-accent); }
:focus-visible { outline: var(--border-3) solid var(--c-focus); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
strong, b { font-weight: 800; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: var(--z-top);
  padding: 0.75rem 1.25rem; background: var(--c-accent); color: var(--c-on-accent);
  font-weight: 800; text-decoration: none; transform: translateY(-200%);
  transition: transform var(--dur-hover) var(--ease-launch);
}
.skip-link:focus-visible { transform: none; outline-color: var(--c-text); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.hl { color: var(--c-accent-fg); }

/* =============================================================================
   TYPE PRIMITIVES
   ============================================================================= */
.display {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: var(--display-weight); line-height: var(--display-leading);
  letter-spacing: var(--display-track); text-transform: uppercase; font-style: italic;
}
.mono {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: var(--mono-track); text-transform: uppercase; line-height: 1.45;
}

/* Section header: index · title · lede (+ optional aside) */
.sec-head { display: grid; gap: var(--space-m); margin-bottom: var(--space-2xl); }
.sec-head .sec-head { margin-bottom: 0; }
.sec-index {
  display: flex; align-items: center; gap: 0.85em; color: var(--c-text-dim);
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: var(--mono-track); text-transform: uppercase;
}
.sec-index b { color: var(--c-accent-fg); font-weight: 700; }
.sec-index::after { content: ""; width: 3.5rem; height: var(--border-2); background: currentColor; opacity: 0.5; }
.sec-title {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: var(--display-weight); font-style: italic; text-transform: uppercase;
  font-size: var(--step-5); line-height: 0.86; letter-spacing: var(--display-track);
  text-wrap: balance;
}
.sec-lede { font-size: var(--step-1); line-height: 1.45; color: var(--c-text-dim); max-width: 44ch; text-wrap: pretty; }
.sec-aside { display: grid; gap: var(--space-l); align-content: end; }
@media (min-width: 900px) {
  .sec-head--row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; column-gap: var(--space-2xl); }
  .sec-head--row > .sec-lede { padding-bottom: 0.6rem; }
}

/* =============================================================================
   CONTROLS — everything you can press leans forward
   .btn  +  .btn--accent | .btn--ghost   ·  sizes .btn--sm | .btn--lg
   ============================================================================= */
.btn {
  --btn-bg: transparent; --btn-fg: var(--c-text); --btn-border: transparent;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  min-height: 3.25rem; padding: 0.95em 1.6em;
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 800;
  font-stretch: 88%; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1;
  color: var(--btn-fg); text-decoration: none; text-align: center;
  background: none; border: 0; -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-bg); border: var(--border-2) solid var(--btn-border);
  transform: skewX(var(--lean));
  transition: transform var(--dur-hover) var(--ease-launch), background-color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.btn:hover::before { transform: skewX(calc(var(--lean) * 1.6)) scaleX(1.035); }
.btn:active::before { transform: skewX(var(--lean)) scale(0.96); transition-duration: var(--dur-tap); }
.btn__arrow { width: 1.25em; height: 0.75em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; transition: transform var(--dur-hover) var(--ease-launch); }
.btn:hover .btn__arrow { transform: translateX(0.3em); }
.btn--accent { --btn-bg: var(--c-accent); --btn-fg: var(--c-on-accent); }
.btn--accent:hover::before { box-shadow: 0 0 0 var(--border-1) color-mix(in srgb, var(--c-accent) 45%, transparent), 0 0 2.5rem -0.5rem color-mix(in srgb, var(--c-accent) 55%, transparent); }
.btn--ghost { --btn-border: var(--c-line-strong); }
.btn--ghost:hover { --btn-border: var(--c-text); --btn-bg: color-mix(in srgb, var(--c-text) 8%, transparent); }
.btn--sm { min-height: 2.6rem; padding: 0.7em 1.15em; font-size: var(--step--2); }
.btn--lg { min-height: 3.75rem; padding: 1.1em 2em; font-size: var(--step-0); }
.btn:focus-visible { outline-offset: 5px; }
@media (max-width: 419px) { .btn { white-space: normal; } }

/* Ping dot — "this is live" */
.ping { position: relative; display: inline-block; width: 0.55rem; height: 0.55rem; flex: none; border-radius: 50%; background: var(--c-accent); }
.ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-accent); animation: k-ping 1.8s var(--ease-launch) infinite; }
@keyframes k-ping { from { transform: scale(1); opacity: 0.8; } to { transform: scale(3.2); opacity: 0; } }

/* =============================================================================
   SCROLL PROGRESS
   ============================================================================= */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: var(--border-3); z-index: var(--z-top);
  background: var(--c-accent); transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0)); pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: k-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes k-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =============================================================================
   SITE HEADER  (markup: index.html, "SITE HEADER" block — copy verbatim)
   ============================================================================= */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--c-scrim);
  border-bottom: var(--border-1) solid transparent;
  transition: border-color var(--dur-move) ease, background-color var(--dur-move) ease;
}
.site-header.is-scrolled { background: var(--c-bg); border-bottom-color: var(--c-line); }
.site-header__inner {
  display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--space-m);
  max-width: var(--wrap); min-height: var(--header-h); margin-inline: auto; padding-inline: var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 2.4rem; height: auto; flex: none; }
.brand__slab { fill: var(--c-accent); }
.brand__spark { fill: none; stroke: var(--c-on-accent); stroke-width: 3.6; stroke-linecap: square; stroke-linejoin: miter; }
.brand__word { display: grid; line-height: 0.9; }
.brand__name {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.01em;
}
.brand__sub { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-text-dim); margin-top: 0.25rem; }
.brand:hover .brand__mark { transform: skewX(-4deg); }
.brand__mark { transition: transform var(--dur-hover) var(--ease-snap); }

.nav__menu { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem clamp(1rem, 2vw, 2.25rem); }
.nav__menu a:not(.btn) {
  position: relative; display: inline-flex; align-items: baseline; gap: 0.4em;
  min-height: 2.75rem; padding-block: 0.75rem; text-decoration: none;
  font-size: var(--step--1); font-weight: 700; font-stretch: 90%; letter-spacing: 0.05em; text-transform: uppercase;
}
.nav__no { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500; color: var(--c-text-dim); }
.nav__start .nav__no { color: inherit; opacity: 0.7; }
.nav__menu a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.45rem; height: var(--border-2);
  background: var(--c-accent); transform: scaleX(0) skewX(var(--lean)); transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-launch);
}
.nav__menu a:not(.btn):hover::after, .nav__menu a[aria-current="page"]::after { transform: scaleX(1) skewX(var(--lean)); }
.nav__toggle {
  display: none; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 0.25rem;
  background: none; border: 0; color: var(--c-text);
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; letter-spacing: var(--mono-track); text-transform: uppercase;
}
.nav__bars { position: relative; width: 1.4rem; height: 0.7rem; }
.nav__bars::before, .nav__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--border-2); background: currentColor;
  transition: transform var(--dur-move) var(--ease-launch);
}
.nav__bars::before { top: 0; }
.nav__bars::after { bottom: 0; right: 0.4rem; }
.menu-open .nav__bars::before { transform: translateY(0.3rem) rotate(-30deg); }
.menu-open .nav__bars::after { transform: translateY(-0.3rem) rotate(30deg); right: 0; }

@media (max-width: 899px) {
  /* without JS the menu simply wraps under the brand; with JS it becomes a panel */
  .nav { width: 100%; }
  .nav__menu { padding-bottom: 0.5rem; gap: 0 1.1rem; }
  .js .nav { width: auto; }
  .js .nav__toggle { display: inline-flex; }
  .js .nav__menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-s) var(--gutter) var(--space-l);
    background: var(--c-bg); border-bottom: var(--border-1) solid var(--c-line);
    visibility: hidden; opacity: 0; transform: translateY(-0.75rem);
    transition: opacity var(--dur-move) var(--ease-launch), transform var(--dur-move) var(--ease-launch), visibility 0s linear var(--dur-move);
  }
  .js .menu-open .nav__menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js .nav__menu li { border-bottom: var(--border-1) solid var(--c-line); }
  .js .nav__menu a:not(.btn) {
    display: flex; width: 100%; padding-block: 0.85rem; gap: 0.9rem; align-items: center;
    font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
    font-size: var(--step-4); line-height: 0.9; letter-spacing: 0;
  }
  .js .nav__menu a:not(.btn)::after { display: none; }
  .js .nav__menu a[aria-current="page"] { color: var(--c-accent-fg); }
  .js .nav__menu li.nav__start { border-bottom: 0; padding-top: var(--space-m); }
  .js .nav__start .btn { width: 100%; min-height: 3.25rem; font-size: var(--step--1); }
  .js .nav__menu li { opacity: 0; transform: translateX(-1.5rem); transition: opacity var(--dur-move) var(--ease-launch), transform var(--dur-move) var(--ease-launch); }
  .js .menu-open .nav__menu li { opacity: 1; transform: none; }
  .js .menu-open .nav__menu li:nth-child(2) { transition-delay: 30ms; }
  .js .menu-open .nav__menu li:nth-child(3) { transition-delay: 60ms; }
  .js .menu-open .nav__menu li:nth-child(4) { transition-delay: 90ms; }
  .js .menu-open .nav__menu li:nth-child(5) { transition-delay: 120ms; }
  .nav__no { align-self: center; }
}
@media (min-width: 900px) { :root { --header-h: 4.5rem; } .site-header__inner { flex-wrap: nowrap; } }
@media (max-width: 379px) {
  .site-header__inner { column-gap: var(--space-xs); }
  .brand__sub { letter-spacing: 0.16em; }
  .js .nav__toggle [data-nav-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* =============================================================================
   HERO — hollow → solid → LIT (and broken) → quiet
   ============================================================================= */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: center;
  padding-block: var(--space-xl) calc(var(--space-2xl) + 3.5rem);
}
.hero__lanes { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; }
.hero::before {               /* vignette keeps the type crisp over the lanes */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 0% 100%, color-mix(in srgb, var(--c-bg) 80%, transparent), transparent 60%),
    linear-gradient(to bottom, transparent 55%, var(--c-bg));
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; color: var(--c-text-dim); }
.hero__meta span + span::before { content: "/"; margin-right: 0.8rem; color: var(--c-accent-fg); }
@media (max-width: 439px) { .hero__meta span:nth-child(3) { display: none; } }

.hero__title {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  text-transform: uppercase; font-size: var(--hero-size); line-height: var(--display-leading); letter-spacing: var(--display-track);
}
.hero__line {
  --dx: 0%;
  display: block; overflow: clip;
  padding-top: 0.07em; margin-top: -0.07em;    /* mask headroom, zero net layout */
  padding-bottom: 0.08em; margin-bottom: -0.08em;
  padding-right: 0.14em;                       /* italic overhang */
}
.hero__line--1 { --dx: -10%; }
.hero__line--2 { padding-left: 0.3em; --dx: 7%; }
.hero__line--3 { padding-left: 0.56em; --dx: -5%; }
.hero__line--4 { padding-left: 0.2em; --dx: 9%; }
.hero__word { display: inline-block; }
.hero__line--1 .hero__word {          /* hollow */
  color: var(--c-bg);
  -webkit-text-stroke: max(2px, 0.024em) var(--c-text);
  paint-order: stroke fill;
}
.hero__line--4 .hero__word {          /* quiet: a dim outline */
  color: var(--c-bg);
  -webkit-text-stroke: max(1.5px, 0.018em) var(--c-text-dim);
  paint-order: stroke fill;
}

/* the LIT word, and the crack that runs through it */
.crack { position: relative; display: inline-block; color: var(--c-on-accent); isolation: isolate; }
.crack__a, .crack__b { display: block; padding-inline: 0.06em 0.16em; }
.crack__a::before, .crack__b::before {
  content: ""; position: absolute; z-index: -1; inset: 0.05em -0.02em 0.02em -0.04em;
  background: var(--c-accent); transform: skewX(var(--lean));
}
.crack__a, .crack__b { position: relative; z-index: 0; }
.crack__a { clip-path: polygon(-20% -30%, 63% -30%, 58.5% 36%, 65% 55%, 56% 130%, -20% 130%); }
.crack__b {
  position: absolute; inset: 0; user-select: none;
  clip-path: polygon(63% -30%, 130% -30%, 130% 130%, 56% 130%, 65% 55%, 58.5% 36%);
  transform: translate(0.03em, 0.05em) rotate(2.4deg); transform-origin: 60% 100%;
}

.hero__aside { display: grid; gap: var(--space-m); align-content: end; max-width: 34rem; }
.hero__lede { font-size: var(--step-1); line-height: 1.45; color: var(--c-text); text-wrap: pretty; }
.hero__lede strong { font-weight: 800; color: var(--c-accent-fg); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); }

/* First-paint choreography (motion only; the still state is the default) */
@media (prefers-reduced-motion: no-preference) {
  .hero__word { animation: k-rise var(--dur-hero) var(--ease-launch) both; }
  .hero__line--1 .hero__word { animation-delay: 60ms; }
  .hero__line--2 .hero__word { animation-delay: 130ms; }
  .hero__line--3 .hero__word { animation-delay: 200ms; }
  .hero__line--4 .hero__word { animation-delay: 270ms; }
  .crack__a::before, .crack__b::before { transform-origin: 0 50%; animation: k-wipe 480ms var(--ease-cut) 420ms both; }
  .crack__b { animation: k-break 520ms var(--ease-snap) 1050ms both; }
  .hero__meta, .hero__aside > * { animation: k-fade-up var(--dur-reveal) var(--ease-launch) both; }
  .hero__meta { animation-delay: 40ms; }
  .hero__aside > :nth-child(1) { animation-delay: 200ms; }
  .hero__aside > :nth-child(2) { animation-delay: 270ms; }
  .hero__aside > :nth-child(3) { animation-delay: 340ms; }
}
@keyframes k-rise  { from { transform: translateY(108%) skewY(4deg); } to { transform: none; } }
@keyframes k-wipe  { from { transform: skewX(var(--lean)) scaleX(0); } to { transform: skewX(var(--lean)) scaleX(1); } }
@keyframes k-break { from { transform: none; } to { transform: translate(0.03em, 0.05em) rotate(2.4deg); } }
@keyframes k-fade-up { from { opacity: 0; transform: translateY(1rem); } }

/* Check card — what the free check looks at; a scan line runs down it */
.check-card {
  position: relative; overflow: clip; display: grid; gap: 0.6rem;
  padding: 1rem 1.15rem 1.05rem;
  background: color-mix(in srgb, var(--c-bg-2) 86%, transparent);
  border: var(--border-1) solid var(--c-line); border-left: var(--border-3) solid var(--c-accent);
}
.check-card__label { display: flex; align-items: center; gap: 0.6rem; color: var(--c-text-dim); }
.check-card__list { list-style: none; display: grid; }
.check-card__list li {
  display: flex; align-items: baseline; gap: 0.75rem; padding-block: 0.4rem;
  border-bottom: var(--border-1) solid var(--c-line);
  font-weight: 700; font-stretch: 92%; font-size: var(--step--1); line-height: 1.3;
}
.check-card__list .mono { color: var(--c-accent-fg); font-weight: 700; }
.check-card__foot { color: var(--c-text-dim); font-size: 0.75rem; }   /* was 10.9px — too small on a phone */
.check-card__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2.2rem; pointer-events: none;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--c-accent) 16%, transparent) 70%, color-mix(in srgb, var(--c-accent) 70%, transparent) 96%, transparent);
  transform: translateY(-120%); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .check-card__scan { animation: k-scan 3.6s var(--ease-cut) 1.2s infinite; }
}
@keyframes k-scan { 0% { transform: translateY(-120%); opacity: 1; } 55% { opacity: 1; } 70%, 100% { transform: translateY(13rem); opacity: 0; } }

@media (min-width: 700px) and (max-width: 1199px) {
  :root { --hero-size: min(16vw, 12.5svh, 9rem); }
  .hero__aside { max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--space-xl); align-items: start; }
  .hero__lede { grid-column: 1; }
  .hero__ctas { grid-column: 1; }
  .check-card { grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 1200px) {
  /* side by side: the stack is sized from the width the aside leaves it */
  :root { --hero-size: min(calc((min(100vw, var(--wrap)) - 2 * var(--gutter) - 26rem - var(--space-xl)) / 4.9), 16.5svh, 10.5rem); }
  .hero { justify-content: flex-end; padding-bottom: calc(var(--space-2xl) + 4.5rem); }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 26rem;
    grid-template-areas: "meta meta" "title aside";
    align-items: end; column-gap: var(--space-xl); row-gap: var(--space-l);
  }
  .hero__meta { grid-area: meta; }
  .hero__title { grid-area: title; }
  .hero__aside { grid-area: aside; padding-bottom: 0.4rem; }
}
@media (max-width: 599px) {
  .hero { padding-top: var(--space-l); justify-content: flex-start; }
  .hero__ctas .btn { flex: 1 1 auto; }
  .hero__line--2 { padding-left: 0.16em; }
  .hero__line--3 { padding-left: 0.32em; }
  .hero__line--4 { padding-left: 0.08em; }
}

/* =============================================================================
   TAPES — two marquees crossing in an X (speed + lean follow your scroll)
   Give each .tape a surface class; the track inherits its colours.
   ============================================================================= */
.tapes {
  --tapes-h: clamp(8rem, 4rem + 12vw, 15rem);
  position: relative; z-index: var(--z-raise);
  height: var(--tapes-h); margin-block: calc(var(--tapes-h) * -0.5);
  overflow: clip; pointer-events: none;
}
.tape {
  position: absolute; left: -10%; width: 120%; top: 50%;
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 3.2rem); line-height: 1; text-transform: uppercase;
  padding-block: 0.32em 0.28em;
}
.tape--front { transform: translateY(-50%) rotate(-3.5deg); z-index: 2; box-shadow: var(--shadow-tape); }
.tape--back  { transform: translateY(-50%) rotate(2.6deg); }
.tape__lean { will-change: transform; }
.tape__track { display: flex; width: max-content; }
.tape__track > span { display: inline-flex; align-items: center; padding-right: 0.55em; white-space: nowrap; }
.tape__track i { display: inline-block; flex: none; width: 0.45em; height: 0.45em; margin-right: 0.55em; background: currentColor; transform: skewX(var(--lean)); }
.tape--back .tape__track i { width: 0.9em; height: 0.12em; }
@media (prefers-reduced-motion: no-preference) {
  .tape__track { animation: k-marquee var(--dur-marquee) linear infinite; }
  .tape--back .tape__track { animation-direction: reverse; animation-duration: calc(var(--dur-marquee) * 1.3); }
}
@keyframes k-marquee { to { transform: translateX(-50%); } }

/* =============================================================================
   01 · AUDIT — head · scoreboard band · finding lanes · thesis
   ============================================================================= */
.audit__head { padding-block: calc(var(--space-section) + 2rem) calc(var(--space-xl) + var(--cut)); }
.audit__head .sec-head { margin-bottom: 0; }

/* SCOREBOARD — the accent band; four numbers roll and climb to the right */
.score {
  position: relative; z-index: var(--z-raise);
  margin-block: calc(var(--cut) * -1);
  padding-block: calc(var(--space-xl) + var(--cut)) calc(var(--space-l) + var(--cut));
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.score__eyebrow { margin-bottom: var(--space-xl); color: var(--c-text-dim); display: flex; gap: 0.5rem 1rem; flex-wrap: wrap; justify-content: space-between; font-weight: 700; }
.score__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-m); }
.stat { display: grid; gap: var(--space-xs); align-content: start; }
.stat__num {
  display: flex; align-items: flex-start;
  font-family: var(--font-display); font-stretch: 70%; font-weight: 900; font-style: normal;
  font-size: var(--step-score); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat__unit { font-size: 0.4em; line-height: 1; margin-top: 0.16em; margin-left: 0.06em; letter-spacing: 0; }
.stat__label {
  padding-top: var(--space-xs); border-top: var(--border-3) solid var(--c-text);
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase; max-width: 24ch; line-height: 1.35;
}
.stat__label span { display: block; font-weight: 500; color: var(--c-text-dim); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: var(--step--1); margin-top: 0.3rem; }
.stat:nth-child(odd) { translate: 0 var(--space-xl); }       /* phone: each pair climbs */
.score__list { padding-bottom: var(--space-xl); }
@media (min-width: 900px) {
  .score__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-l); padding-bottom: calc(var(--space-2xl) * 1.2); }
  .stat:nth-child(1) { translate: 0 calc(var(--space-2xl) * 1.2); }
  .stat:nth-child(2) { translate: 0 calc(var(--space-2xl) * 0.8); }
  .stat:nth-child(3) { translate: 0 calc(var(--space-2xl) * 0.4); }
  .stat:nth-child(4) { translate: none; }
}

/* ODOMETER — built by script.js. The FINAL number is the default state;
   it only rolls up from zero if it was below the fold when the page loaded. */
.odo { display: inline-flex; }
.odo__col { display: inline-block; height: 1em; overflow: clip; }
.odo__strip { display: flex; flex-direction: column; transform: translateY(calc(var(--to) * -100%)); }
.odo__strip > span { display: block; height: 1em; line-height: 1; text-align: center; }
.is-armed .odo__strip { transform: translateY(0); transition: none; }
.is-in .odo__strip { transition: transform var(--dur-count) var(--ease-odo); transition-delay: calc(80ms + var(--c, 0) * 110ms); }

/* LANES — the system's list. Never a card grid. (findings, styles, prices) */
.findings { padding-block: calc(var(--space-2xl) + var(--cut)) calc(var(--space-2xl) + var(--cut)); }
.findings__label { color: var(--c-text-dim); margin-bottom: var(--space-l); }
.lanes { list-style: none; border-bottom: var(--border-1) solid var(--c-line); }
.lane {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-m); row-gap: var(--space-xs);
  padding-block: var(--space-l); border-top: var(--border-1) solid var(--c-line);
}
.lane::after {                /* the accent rule that draws across on entry */
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--border-1) * -1); height: var(--border-2);
  background: var(--c-accent); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none;
}
.lane.is-in::after { animation: k-rule 900ms var(--ease-launch) both; }
@keyframes k-rule { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.lane__no {
  grid-row: 1 / span 2; font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: var(--step-3); line-height: 0.8; color: transparent;
  -webkit-text-stroke: 1.5px var(--c-line-strong); paint-order: stroke fill;
  transition: -webkit-text-stroke-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.lane__head { display: grid; gap: 0.4rem; align-content: start; }
.lane__name {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: var(--step-3); line-height: 0.9; text-transform: uppercase; text-wrap: balance;
}
.lane__tag { color: var(--c-accent-fg); font-weight: 700; }
.lane__body { grid-column: 2; display: grid; gap: var(--space-2xs); justify-items: start; }
.lane__text { color: var(--c-text-dim); max-width: 46ch; }
.lane__art {
  display: none; width: 100%; max-width: 10rem; height: auto;
  fill: none; stroke: var(--c-text); stroke-width: 2.25; stroke-linecap: square; stroke-linejoin: miter;
}
.lane__art > * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.lane__art .art-spark, .lane__art .art-load, .lane__art .art-web, .lane__art .art-twin { stroke: var(--c-accent-fg); }
.lane.is-armed .lane__art > * { stroke-dashoffset: 1; }
.lane.is-in .lane__art > * { transition: stroke-dashoffset 640ms var(--ease-launch) 100ms; }
.lane:hover .lane__no { -webkit-text-stroke-color: var(--c-accent-fg); }
.art-spark, .art-twin { transform-box: fill-box; transform-origin: center; transition: transform var(--dur-move) var(--ease-snap); }
.lane:hover .art-spark { transform: scale(1.35); }
.lane:hover .art-twin { transform: translate(-6px, -4px); }
@media (min-width: 800px) {
  .lane {
    grid-template-columns: 5.5rem minmax(0, 1.25fr) minmax(0, 1fr) minmax(7rem, 9rem);
    align-items: center; column-gap: var(--space-l); padding-block: var(--space-xl);
  }
  .lane__no { grid-row: auto; font-size: var(--step-4); align-self: start; }
  .lane__body { grid-column: 3; }
  .lane__art { display: block; grid-column: 4; justify-self: end; }
}

/* THESIS — the calm, legible statement */
.thesis {
  position: relative; z-index: var(--z-raise);
  margin-top: calc(var(--cut) * -1);
  padding-block: calc(var(--space-2xl) + var(--cut)) calc(var(--space-2xl) + var(--cut));
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}
.thesis__inner { display: grid; gap: var(--space-l); }
.thesis__title {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: clamp(2.6rem, 1.2rem + 6.2vw, 7.25rem); line-height: 0.88; text-transform: uppercase; letter-spacing: var(--display-track);
}
.thesis__row { display: block; }
.thesis__row--2 { padding-left: clamp(0.3em, 5vw, 1.2em); }
.strike { position: relative; display: inline-block; text-decoration: none; color: var(--c-text-dim); }
.strike::after {
  content: ""; position: absolute; left: -0.06em; right: -0.08em; top: 46%; height: 0.15em;
  background: var(--c-accent); transform: skewX(var(--lean)) rotate(-5deg); transform-origin: 0 50%;
}
.thesis__title.is-armed .strike::after { transform: skewX(var(--lean)) rotate(-5deg) scaleX(0); }
.thesis__title.is-in .strike::after { transition: transform 420ms var(--ease-cut) 260ms; }
.thesis__body { display: grid; gap: var(--space-s); max-width: 46rem; }
.thesis__quote {
  font-family: var(--font-body); font-style: italic; font-weight: 700; font-stretch: 82%;
  font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance;
}
.thesis__body p:not(.thesis__quote) { color: var(--c-text-dim); font-size: var(--step-1); line-height: 1.45; }
@media (min-width: 1000px) {
  .thesis__body { margin-left: auto; max-width: 40rem; grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   02 · STYLES — four styles as lanes; each draws its own mini site
   ============================================================================= */
.styles {
  position: relative; z-index: var(--z-raise);
  margin-top: calc(var(--cut) * -1);
  padding-block: calc(var(--space-2xl) + var(--cut) * 1.4) var(--space-section);
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}

/* Colourway switch */
.colorway { display: grid; gap: var(--space-s); }
.colorway__label { color: var(--c-text-dim); max-width: 46ch; }
.colorway__label b { color: var(--c-text); font-weight: 700; }
.swatches { display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; }
.swatch {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 2.75rem; padding: 0.5em 1em 0.5em 0.7em; background: none; border: 0; color: var(--c-text);
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; letter-spacing: var(--mono-track); text-transform: uppercase;
}
.swatch::before { content: ""; position: absolute; inset: 0; z-index: -1; border: var(--border-2) solid var(--c-line); transform: skewX(var(--lean)); transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease; }
.swatch i { width: 1.3rem; height: 1.3rem; background: var(--sw); transform: skewX(var(--lean)); transition: transform var(--dur-hover) var(--ease-snap); }
.swatch:hover::before { border-color: var(--c-line-strong); }
.swatch:hover i { transform: skewX(var(--lean)) scale(1.15); }
.swatch[aria-pressed="true"]::before { border-color: var(--c-text); background: color-mix(in srgb, var(--c-text) 10%, transparent); }
@media (max-width: 479px) { .swatches { gap: 0.5rem 0.55rem; } .swatch { padding: 0.5em 0.75em 0.5em 0.55em; gap: 0.45rem; } .swatch i { width: 1rem; height: 1rem; } }

.demo-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  margin-bottom: var(--space-l); color: var(--c-text-dim); text-transform: none; letter-spacing: 0.02em;
}
.demo-note b { color: var(--c-text); }
.demo-note__flag {
  padding: 0.3em 0.6em 0.25em; background: var(--c-text); color: var(--c-bg);
  font-weight: 700; letter-spacing: var(--mono-track); text-transform: uppercase; transform: skewX(var(--lean));
}

.style-lanes { list-style: none; border-bottom: var(--border-1) solid var(--c-line); }
.style-lane {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-m); row-gap: var(--space-l);
  padding-block: var(--space-xl); border-top: var(--border-1) solid var(--c-line);
  transition: color var(--dur-hover) ease;
}
.style-lane::before {          /* the accent sweep (it is a link — so it may sweep) */
  content: ""; position: absolute; z-index: -1; inset: calc(var(--border-1) * -1) calc(var(--gutter) * -1);
  background: var(--c-accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-move) var(--ease-cut);
}
.style-lane::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--border-1) * -1); height: var(--border-2);
  background: var(--c-accent); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none;
}
.style-lane.is-in::after { animation: k-rule 900ms var(--ease-launch) both; }
.style-lane .lane__no { grid-row: 1; }
.style-lane__body { grid-column: 2; display: grid; gap: var(--space-xs); justify-items: start; align-content: start; }
.style-lane__name {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: var(--step-5); line-height: 0.84; text-transform: uppercase;
  transition: transform var(--dur-move) var(--ease-launch);
}
/* each style's name is set in that style's own voice */
.style-lane[data-style="cinematic"] .style-lane__name { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; text-transform: none; letter-spacing: -0.02em; line-height: 0.9; }
.style-lane[data-style="brightclub"] .style-lane__name { font-style: normal; font-stretch: 80%; font-weight: 900; text-transform: none; letter-spacing: -0.04em; line-height: 0.88; }
.style-lane[data-style="precision"] .style-lane__name { font-family: var(--font-body); font-style: normal; font-stretch: 78%; font-weight: 600; text-transform: none; letter-spacing: -0.05em; line-height: 0.9; }
.style-lane__line { font-size: var(--step-1); line-height: 1.4; max-width: 34ch; text-wrap: pretty; }
.style-lane__fit { color: var(--c-text-dim); }
.style-lane__here { color: var(--c-accent-fg); font-weight: 700; }
.style-lane__link {
  display: inline-flex; align-items: center; gap: 0.6em; min-height: 2.75rem; margin-top: var(--space-2xs);
  text-decoration: none; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700;
  letter-spacing: var(--mono-track); text-transform: uppercase;
  border-bottom: var(--border-2) solid var(--c-accent);
}
.style-lane__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* whole lane is the target */
.style-lane__link .btn__arrow { transition: transform var(--dur-move) var(--ease-launch); }
.style-lane__link:focus-visible { outline: none; }
.style-lane:has(.style-lane__link:focus-visible) { outline: var(--border-3) solid var(--c-focus); outline-offset: 4px; }
.style-lane .mini { grid-column: 1 / -1; }

.style-lane:hover, .style-lane:focus-within { color: var(--c-on-accent); }
.style-lane:hover::before, .style-lane:focus-within::before { transform: scaleX(1); }
.style-lane:hover .lane__no, .style-lane:focus-within .lane__no { -webkit-text-stroke-color: var(--c-on-accent); }
.style-lane:hover .style-lane__fit, .style-lane:hover .style-lane__here,
.style-lane:focus-within .style-lane__fit, .style-lane:focus-within .style-lane__here { color: var(--c-on-accent); }
.style-lane:hover .style-lane__link, .style-lane:focus-within .style-lane__link { border-bottom-color: var(--c-on-accent); }
.style-lane:hover .style-lane__name, .style-lane:focus-within .style-lane__name { transform: translateX(0.08em); }
.style-lane:hover .style-lane__link .btn__arrow, .style-lane:focus-within .style-lane__link .btn__arrow { transform: translateX(0.5em); }
.style-lane:hover .mini, .style-lane:focus-within .mini { transform: translate(-0.35rem, -0.35rem); box-shadow: 0.7rem 0.7rem 0 0 var(--c-on-accent); }
@media (min-width: 1000px) {
  .style-lane {
    grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center; column-gap: var(--space-xl); padding-block: var(--space-xl);
  }
  .style-lane .lane__no { font-size: var(--step-4); align-self: start; }
  .style-lane .mini { grid-column: 3; }
}

/* ── MINI SITES — drawn entirely in CSS/SVG, sized in container units ───── */
.mini {
  container-type: inline-size;
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr);
  aspect-ratio: 16 / 10; overflow: clip;
  background: var(--pv-bg); color: var(--pv-text);
  border: var(--border-1) solid var(--c-line-strong);
  box-shadow: var(--shadow-lift);
  transition: transform var(--dur-move) var(--ease-launch), box-shadow var(--dur-move) var(--ease-launch);
  font-size: 2cqi; line-height: 1.2;
}
.mini__bar {
  display: flex; align-items: center; gap: 1cqi; height: 5.5cqi; padding-inline: 2.2cqi;
  background: var(--pv-chrome); color: var(--pv-dim);
  font-family: var(--font-mono); font-size: 1.7cqi; font-weight: 500; letter-spacing: 0.06em;
}
.mini__bar i { width: 1.2cqi; height: 1.2cqi; border-radius: 50%; background: currentColor; opacity: 0.5; }
.mini__bar span { margin-inline: auto; padding: 0.5cqi 2.4cqi; border-radius: var(--radius-pill); background: color-mix(in srgb, currentColor 14%, transparent); }
.mini__stage { position: relative; overflow: clip; }
.mini p { margin: 0; }

/* Kinetic mini */
.mk-lines { position: absolute; inset: -30%; background: repeating-linear-gradient(-8deg, transparent 0 6.5cqi, color-mix(in srgb, var(--pv-text) 8%, transparent) 6.5cqi calc(6.5cqi + 1px)); }
.mk-run { position: absolute; height: 0.35cqi; width: 22cqi; background: linear-gradient(90deg, transparent, var(--pv-accent)); transform: rotate(-8deg) translateX(-30cqi); opacity: 0.85; }
.mk-run--1 { top: 18%; left: 0; }
.mk-run--2 { top: 62%; left: 30%; width: 14cqi; background: linear-gradient(90deg, transparent, var(--pv-text)); opacity: 0.4; }
.mk-meta { position: absolute; left: 5cqi; top: 4.5cqi; font-family: var(--font-mono); font-size: 1.6cqi; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pv-dim); }
.mk-head {
  position: absolute; left: 4.5cqi; top: 9cqi; display: grid;
  font-family: var(--font-display); font-stretch: 62%; font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: 9.6cqi; line-height: 0.86;
}
.mk-hollow { color: var(--pv-bg); -webkit-text-stroke: 0.22cqi var(--pv-text); paint-order: stroke fill; }
.mk-solid { padding-left: 0.3em; }
.mk-lit { position: relative; z-index: 0; justify-self: start; margin-left: 0.6em; padding-inline: 0.05em 0.12em; color: var(--pv-on-accent); }
.mk-lit::before { content: ""; position: absolute; z-index: -1; inset: 0.05em -0.04em 0.02em -0.04em; background: var(--pv-accent); transform: skewX(var(--lean)); }
.mk-btn {
  position: absolute; right: 6cqi; top: 13cqi; z-index: 0; padding: 1.4cqi 2.4cqi;
  font-weight: 800; font-stretch: 88%; font-size: 1.7cqi; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pv-on-accent);
}
.mk-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pv-accent); transform: skewX(var(--lean)); }
.mk-tape {
  position: absolute; left: -6%; width: 112%; bottom: 7cqi; z-index: 2;
  padding-block: 1cqi 0.8cqi; background: var(--pv-accent); color: var(--pv-on-accent);
  transform: rotate(-4deg); box-shadow: 0 1.5cqi 3cqi -1.5cqi var(--c-shadow);
  font-family: var(--font-display); font-stretch: 62%; font-weight: 900; font-style: italic; font-size: 3.8cqi; line-height: 1; text-transform: uppercase;
}
.mk-tape--back { z-index: 1; bottom: 8.5cqi; background: var(--pv-text); color: var(--pv-bg); transform: rotate(3deg); font-size: 2.8cqi; box-shadow: none; }
.mk-track { display: flex; width: max-content; white-space: nowrap; }

/* Cinematic mini */
.mini--cinematic .mini__stage { background: var(--pv-bg); }
.mc-light {
  position: absolute; inset: -10%;
  background:
    radial-gradient(42% 55% at 22% 58%, color-mix(in srgb, var(--pv-2) 52%, transparent), transparent 72%),
    radial-gradient(38% 60% at 80% 22%, color-mix(in srgb, var(--pv-accent) 62%, transparent), transparent 70%),
    linear-gradient(115deg, transparent 52%, color-mix(in srgb, var(--pv-accent) 18%, transparent) 64%, transparent 76%);
}
.mc-flare {
  position: absolute; left: 20%; right: -10%; top: 30%; height: 0.25cqi;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pv-3) 70%, transparent) 55%, var(--pv-text) 78%, transparent);
  transform-origin: 78% 50%;
}
.mc-dust { position: absolute; inset: 0; background: radial-gradient(circle, color-mix(in srgb, var(--pv-text) 55%, transparent) 0.12cqi, transparent 0.3cqi) 0 0 / 9cqi 7cqi; opacity: 0.35; -webkit-mask-image: radial-gradient(40% 60% at 80% 30%, currentColor, transparent); mask-image: radial-gradient(40% 60% at 80% 30%, currentColor, transparent); }
.mc-bars::before, .mc-bars::after { content: ""; position: absolute; left: 0; right: 0; height: 9%; background: var(--pv-deep); z-index: 3; }
.mc-bars::before { top: 0; }
.mc-bars::after { bottom: 0; }
/* cqw, not cqi: in vertical writing mode "inline" is the card's height, which isn't
   a queryable size, so cqi fell back to the viewport height and the timecode
   grew, wrapped into two columns and ran into the title on phones. */
.mc-tc {
  position: absolute; left: 3.4cqw; top: 50%; z-index: 2; display: flex; align-items: center; gap: 1cqw;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); white-space: nowrap;
  font-family: var(--font-mono); font-size: 1.4cqw; letter-spacing: 0.22em; color: var(--pv-dim);
}
.mc-tc b { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--pv-2); }
.mc-title { position: absolute; left: 10cqi; bottom: 17%; z-index: 2; display: grid; gap: 1.6cqi; }
.mc-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 10.5cqi; line-height: 0.9; letter-spacing: -0.01em; color: var(--pv-text); }
.mc-title span { font-family: var(--font-body); font-stretch: 125%; font-weight: 400; font-size: 1.5cqi; letter-spacing: 0.42em; text-transform: uppercase; color: var(--pv-dim); }
.mc-btn {
  position: absolute; right: 6cqi; bottom: 18%; z-index: 2; padding: 1.3cqi 2.4cqi;
  border: 0.15cqi solid color-mix(in srgb, var(--pv-accent) 75%, transparent); color: var(--pv-accent);
  font-stretch: 112%; font-weight: 600; font-size: 1.45cqi; letter-spacing: 0.24em; text-transform: uppercase;
}

/* Bright Club mini */
.mini--bright .mini__stage { background: var(--pv-bg); font-family: var(--font-body); }
.mb-wave { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--pv-2); stroke-width: 12; stroke-linecap: round; opacity: 0.55; }
.mb-head {
  position: absolute; left: 5cqi; top: 7cqi; width: 54cqi;
  font-stretch: 80%; font-weight: 900; font-size: 7.4cqi; line-height: 0.95; letter-spacing: -0.035em; color: var(--pv-text);
}
.mb-sticker {
  display: inline-block; margin-top: 1.2cqi; padding: 0.3cqi 1.6cqi 0.9cqi;
  background: var(--pv-accent); color: var(--pv-text);
  border: 0.55cqi solid var(--pv-text); border-radius: 1.8cqi; box-shadow: 0.7cqi 0.8cqi 0 var(--pv-text);
  transform: rotate(-2deg);
}
.mb-btn {
  position: absolute; left: 5cqi; bottom: 7cqi; padding: 1.5cqi 3cqi;
  background: var(--pv-accent); color: var(--pv-text); border: 0.45cqi solid var(--pv-text); border-radius: var(--radius-pill);
  box-shadow: 0 0.7cqi 0 var(--pv-text); font-weight: 800; font-size: 1.9cqi;
}
.mb-court {
  position: absolute; right: 16cqi; top: 27cqi; width: 30cqi; height: 19cqi;
  background: var(--pv-deep); border: 0.45cqi solid var(--pv-text); border-radius: 1.6cqi; transform: rotate(-8deg);
}
.mb-court::before { content: ""; position: absolute; inset: 2.2cqi; border: 0.35cqi solid color-mix(in srgb, var(--pv-bg) 60%, transparent); border-radius: 0.6cqi; }
.mb-ticket {
  position: absolute; right: 8cqi; top: 6cqi; width: 22cqi; padding: 6cqi 2cqi 2cqi; display: grid; gap: 1cqi;
  background: var(--pv-raised); border: 0.45cqi solid var(--pv-text); border-radius: 2cqi; overflow: clip;
  box-shadow: 0.9cqi 0.9cqi 0 var(--pv-text); transform: rotate(7deg);
}
.mb-ticket::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4cqi; background: var(--pv-accent); border-bottom: 0.45cqi solid var(--pv-text); }
.mb-ticket b { font-stretch: 70%; font-weight: 900; font-size: 4.4cqi; line-height: 0.88; text-transform: uppercase; letter-spacing: -0.02em; }
.mb-ticket span { font-size: 1.4cqi; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pv-dim); border-bottom: 0.25cqi dashed var(--pv-dim); padding-bottom: 1cqi; }
.mb-ticket i { height: 4cqi; background: repeating-linear-gradient(90deg, var(--pv-text) 0 0.35cqi, transparent 0.35cqi 0.8cqi, var(--pv-text) 0.8cqi 1.4cqi, transparent 1.4cqi 1.8cqi); }
.mb-burst { position: absolute; right: 3.5cqi; bottom: 6cqi; width: 13cqi; aspect-ratio: 1; display: grid; place-items: center; }
.mb-burst::before {
  content: ""; position: absolute; inset: 0; background: var(--pv-3);
  clip-path: polygon(50% 0%, 59.8% 13.3%, 75% 6.7%, 76.9% 23.1%, 93.3% 25%, 86.7% 40.2%, 100% 50%, 86.7% 59.8%, 93.3% 75%, 76.9% 76.9%, 75% 93.3%, 59.8% 86.7%, 50% 100%, 40.2% 86.7%, 25% 93.3%, 23.1% 76.9%, 6.7% 75%, 13.3% 59.8%, 0% 50%, 13.3% 40.2%, 6.7% 25%, 23.1% 23.1%, 25% 6.7%, 40.2% 13.3%);
}
.mb-burst b { position: relative; font-stretch: 75%; font-weight: 900; font-size: 3.2cqi; color: var(--pv-text); transform: rotate(-10deg); }

/* Precision mini */
.mini--precision .mini__stage { background: var(--pv-bg); }
.mp-grid {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(12.5cqi - 1px), color-mix(in srgb, var(--pv-line) 85%, transparent) calc(12.5cqi - 1px) 12.5cqi);
}
.mp-grid::after { content: ""; position: absolute; left: 5cqi; right: 5cqi; top: 8cqi; height: 1px; background: var(--pv-line); }
.mp-meta {
  position: absolute; left: 5cqi; top: 13cqi; display: flex; align-items: center; gap: 1.2cqi;
  font-family: var(--font-mono); font-size: 1.5cqi; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pv-dim);
}
.mp-meta::before { content: ""; width: 2.4cqi; height: 0.25cqi; background: var(--pv-accent); }
.mp-head {
  position: absolute; left: 5cqi; top: 18cqi; width: 50cqi;
  font-family: var(--font-body); font-stretch: 78%; font-weight: 700; font-size: 8.4cqi; line-height: 0.92; letter-spacing: -0.045em; color: var(--pv-text);
}
.mp-head b { color: var(--pv-accent); }
.mp-btn {
  position: absolute; left: 5cqi; bottom: 8cqi; padding: 1.5cqi 2.6cqi;
  background: var(--pv-accent); color: var(--pv-on-accent); border-radius: 0.5cqi;
  box-shadow: 0 0.6cqi 1.4cqi -0.6cqi color-mix(in srgb, var(--pv-accent) 70%, transparent);
  font-weight: 600; font-size: 1.8cqi;
}
.mp-dial { position: absolute; right: 5cqi; top: 50%; width: 36cqi; height: auto; transform: translateY(-50%); }
.mp-ticks { fill: none; stroke: var(--pv-dim); stroke-width: 3; stroke-dasharray: 0.35 1.65; opacity: 0.6; }
.mp-track { fill: none; stroke: var(--pv-line); stroke-width: 8; }
.mp-arc { fill: none; stroke-width: 8; transform-box: view-box; transform-origin: 50% 50%; transform: rotate(-90deg); }
.mp-arc--ink { stroke: var(--pv-text); stroke-dasharray: 30 70; stroke-dashoffset: -38; }
.mp-arc--hot { stroke: var(--pv-accent); stroke-dasharray: 12 88; stroke-dashoffset: -72; }
.mp-face { fill: var(--pv-raised); stroke: var(--pv-text); stroke-width: 0.8; }
.mp-dial text { text-anchor: middle; fill: var(--pv-text); }
.mp-dial .mp-t1 { font-family: var(--font-mono); font-size: 5px; letter-spacing: 0.12em; fill: var(--pv-dim); }
.mp-t2 { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: -0.03em; }
.mp-t3 { font-family: var(--font-body); font-size: 6px; font-weight: 600; }
.mp-needle { transform-box: view-box; transform-origin: 50% 50%; transform: rotate(118deg); }
.mp-needle path { stroke: var(--pv-accent); stroke-width: 1.4; }
.mp-needle circle { fill: var(--pv-accent); }

/* Mini motion — only while the section is on screen (script.js adds .is-live) */
@media (prefers-reduced-motion: no-preference) {
  .mk-track { animation: k-marquee 9s linear infinite; }
  .mk-tape--back .mk-track { animation-direction: reverse; animation-duration: 12s; }
  .mk-run--1 { animation: k-runner 2.4s linear infinite; }
  .mk-run--2 { animation: k-runner 3.6s linear 0.8s infinite; }
  .mc-flare { animation: k-flare 5.5s var(--ease-cut) infinite; }
  .mc-light { animation: k-breathe 7s ease-in-out infinite alternate; }
  .mb-ticket { animation: k-bob 3.2s ease-in-out infinite; }
  .mb-burst::before { animation: k-spin 18s linear infinite; }
  .mp-needle { animation: k-needle 9s var(--ease-odo) infinite; }
  .js .styles:not(.is-live) .mini *, .js .styles:not(.is-live) .mini *::before { animation-play-state: paused; }
}
@keyframes k-runner { from { transform: rotate(-8deg) translateX(-40cqi); } to { transform: rotate(-8deg) translateX(110cqi); } }
@keyframes k-flare { 0%, 100% { transform: scaleX(0.35); opacity: 0.4; } 45% { transform: scaleX(1); opacity: 1; } }
@keyframes k-breathe { to { transform: translate(-3%, 2%) scale(1.06); } }
@keyframes k-bob { 0%, 100% { transform: rotate(7deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-1.2cqi); } }
@keyframes k-spin { to { transform: rotate(360deg); } }
@keyframes k-needle { 0%, 12% { transform: rotate(118deg); } 50%, 62% { transform: rotate(250deg); } 100% { transform: rotate(478deg); } }

/* =============================================================================
   03 · HOW IT WORKS — four steps that climb to the right
   ============================================================================= */
.how {
  position: relative; z-index: var(--z-raise);
  margin-top: calc(var(--cut) * -1);
  padding-block: calc(var(--space-section) + var(--cut)) var(--space-section);
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}
.steps { list-style: none; display: grid; gap: var(--space-xl); counter-reset: step; }
.step { position: relative; display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-s); border-top: var(--border-3) solid var(--c-text); }
.step__no {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: var(--step-5); line-height: 0.8; color: var(--c-bg);
  -webkit-text-stroke: max(1.5px, 0.02em) var(--c-text); paint-order: stroke fill;
}
.step__tag {
  justify-self: start; position: relative; z-index: 0; padding: 0.35em 0.75em 0.3em; margin-top: var(--space-2xs);
  color: var(--c-on-accent); font-weight: 700;
}
.step__tag::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-accent); transform: skewX(var(--lean)); }
.step__title {
  font-family: var(--font-display); font-stretch: 75%; font-weight: 900; font-style: italic;
  font-size: var(--step-2); line-height: 1; text-transform: uppercase; text-wrap: balance;
}
.step__text { color: var(--c-text-dim); max-width: 34ch; }
@media (min-width: 640px) and (max-width: 999px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-l); } .step:nth-child(odd) { translate: 0 var(--space-xl); } .steps { padding-bottom: var(--space-xl); } }
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-l); }
  .step:nth-child(1) { translate: 0 calc(var(--space-2xl) * 1.5); }
  .step:nth-child(2) { translate: 0 calc(var(--space-2xl) * 1); }
  .step:nth-child(3) { translate: 0 calc(var(--space-2xl) * 0.5); }
  .steps { padding-bottom: calc(var(--space-2xl) * 1.5); }
}

/* Heads-up stamp — an honest caveat, said plainly */
.heads-up {
  display: grid; gap: var(--space-s); margin-top: var(--space-2xl); max-width: 60rem;
  padding: var(--space-m) var(--space-m) var(--space-m) var(--space-l);
  border: var(--border-2) dashed var(--c-text); position: relative;
}
.heads-up__stamp { justify-self: start; padding: 0.3em 0.6em 0.25em; background: var(--c-text); color: var(--c-bg); font-weight: 700; transform: rotate(-2deg); }
.heads-up__text { font-size: var(--step-1); line-height: 1.45; text-wrap: pretty; }
@media (min-width: 800px) { .heads-up { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: var(--space-l); } }

/* =============================================================================
   04 · PRICING — price lanes and the lit $0
   ============================================================================= */
.pricing { position: relative; padding-block: var(--space-section) calc(var(--space-2xl) + var(--cut)); }
.prices { list-style: none; border-bottom: var(--border-1) solid var(--c-line); }
.price {
  position: relative; display: grid; gap: var(--space-xs) var(--space-l);
  padding-block: var(--space-l); border-top: var(--border-1) solid var(--c-line);
}
.price::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--border-1) * -1); height: var(--border-2);
  background: var(--c-accent); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none;
}
.price.is-in::after { animation: k-rule 900ms var(--ease-launch) both; }
.price__amt {
  display: flex; align-items: flex-start;
  font-family: var(--font-display); font-stretch: 70%; font-weight: 900; font-style: normal;
  font-size: var(--step-5); line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.price__cur { font-size: 0.42em; margin-top: 0.1em; margin-right: 0.04em; color: var(--c-accent-fg); }
.price__cents, .price__per { font-size: 0.42em; margin-top: 0.1em; letter-spacing: 0; }
.price__per { color: var(--c-text-dim); align-self: flex-end; margin-bottom: 0.2em; margin-left: 0.1em; }
.price__head { display: grid; gap: 0.35rem; align-content: start; }
.price__name {
  font-family: var(--font-display); font-stretch: 75%; font-weight: 900; font-style: italic;
  font-size: var(--step-2); line-height: 1; text-transform: uppercase;
}
.price__when { color: var(--c-accent-fg); font-weight: 700; }
.price__text { color: var(--c-text-dim); max-width: 46ch; }
@media (min-width: 900px) {
  .price { grid-template-columns: minmax(13rem, 0.8fr) minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; padding-block: var(--space-xl); }
}

.zero {
  position: relative; display: grid; gap: var(--space-m); align-items: center;
  margin-top: var(--space-2xl); padding: var(--space-l) 0;
}
.zero__num {
  font-family: var(--font-display); font-stretch: 70%; font-weight: 900; font-style: italic;
  font-size: clamp(6rem, 3rem + 14vw, 15rem); line-height: 0.82; letter-spacing: -0.02em;
}
.zero__lit { position: relative; z-index: 0; display: inline-block; padding-inline: 0.08em 0.18em; color: var(--c-on-accent); }
.zero__lit::before { content: ""; position: absolute; z-index: -1; inset: 0.04em -0.02em 0.02em -0.04em; background: var(--c-accent); transform: skewX(var(--lean)); transform-origin: 0 50%; }
.zero.is-armed .zero__lit::before { transform: skewX(var(--lean)) scaleX(0); }
.zero.is-in .zero__lit::before { transition: transform 440ms var(--ease-cut) 120ms; }
.zero__body { display: grid; gap: var(--space-2xs); max-width: 30rem; }
.zero__title {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: var(--step-4); line-height: 0.9; text-transform: uppercase;
}
.zero__text { font-size: var(--step-1); line-height: 1.45; color: var(--c-text-dim); }
.zero__text strong { color: var(--c-text); }
@media (min-width: 800px) { .zero { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-xl); } }

.pricing__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m) var(--space-xl); margin-top: var(--space-xl); }
.pricing__note { color: var(--c-text-dim); max-width: 44ch; }

/* =============================================================================
   05 · CTA BAND — the free check, on the accent
   ============================================================================= */
.cta-band {
  position: relative; z-index: var(--z-raise); overflow: clip;
  margin-block: calc(var(--cut) * -1);
  padding-block: calc(var(--space-section) + var(--cut));
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.cta-band__title {
  margin-block: var(--space-m) var(--space-xl);
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: clamp(4rem, 1rem + 15vw, 15rem); line-height: 0.82; text-transform: uppercase; letter-spacing: -0.01em;
}
.cta-band__row { display: block; }
.cta-band__row--2 { padding-left: clamp(0.3em, 4vw, 0.6em); }
.cta-band__row--3 { padding-left: clamp(0.6em, 8vw, 1.2em); color: var(--c-bg); -webkit-text-stroke: max(2px, 0.02em) var(--c-text); paint-order: stroke fill; }
.cta-band__grid { display: grid; gap: var(--space-l); align-items: end; }
.cta-band__lede { font-size: var(--step-1); line-height: 1.45; max-width: 46ch; font-weight: 500; }
.cta-band__act { display: grid; gap: var(--space-s); justify-items: start; }
.cta-band__note { color: var(--c-text-dim); font-weight: 700; }
@media (min-width: 900px) { .cta-band__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--space-2xl); } }
@media (min-width: 1100px) {
  .cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--space-2xl); align-items: end; }
  .cta-band .sec-index { grid-column: 1 / -1; }
  .cta-band__title { margin-bottom: 0; font-size: min(11vw, 11rem); }
  .cta-band__row--2 { padding-left: 0.3em; }
  .cta-band__row--3 { padding-left: 0.6em; }
  .cta-band__grid { grid-template-columns: minmax(0, 1fr); padding-bottom: 1rem; }
}

/* =============================================================================
   06 · FOUNDER — one person, said plainly
   ============================================================================= */
.founder { position: relative; padding-block: calc(var(--space-2xl) + var(--cut) * 1.5) var(--space-2xl); }
.founder__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.founder__body { display: grid; gap: var(--space-m); justify-items: start; }
.founder__title { font-size: var(--step-4); max-width: 14ch; }
.founder__lede { font-size: var(--step-1); line-height: 1.45; max-width: 44ch; }
.founder__text { color: var(--c-text-dim); max-width: var(--measure); }
.founder__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); margin-top: var(--space-2xs); }
.founder__mail { color: var(--c-text-dim); overflow-wrap: anywhere; }
.founder__mail a { color: var(--c-text); font-weight: 700; }
.founder__mail a:hover { color: var(--c-accent-fg); }

.jersey { display: grid; gap: var(--space-s); justify-items: center; max-width: 24rem; width: 100%; margin-inline: auto; }
.jersey__svg { width: 100%; height: auto; }
.jersey__body { fill: var(--c-bg-2); stroke: var(--c-text); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.jersey__trim { fill: none; stroke: var(--c-accent); stroke-width: 6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.jersey__name { fill: var(--c-text); font-family: var(--font-mono); font-size: 17px; font-weight: 700; letter-spacing: 0.28em; text-anchor: middle; }
.jersey__no {
  fill: var(--c-accent); stroke: var(--c-text); stroke-width: 2.5; paint-order: stroke fill;
  font-family: var(--font-display); font-stretch: 62%; font-weight: 900; font-style: italic; font-size: 130px; text-anchor: middle;
}
.jersey.is-armed .jersey__body, .jersey.is-armed .jersey__trim { stroke-dashoffset: 1; }
.jersey.is-in .jersey__body, .jersey.is-in .jersey__trim { transition: stroke-dashoffset 700ms var(--ease-launch); }
.jersey__cap { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.8rem; color: var(--c-text-dim); text-align: center; }
.jersey__cap b { color: var(--c-accent-fg); }
@media (min-width: 900px) { .founder__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: var(--space-2xl); } }

/* =============================================================================
   SITE FOOTER  (markup: index.html, "SITE FOOTER" block — copy verbatim)
   ============================================================================= */
.site-footer { position: relative; padding-top: var(--space-2xl); overflow: clip; }
/* A page that ends on the tapes (404): the tapes hang half into whatever follows, so give the footer that half back */
main:has(> .tapes:last-child) + .site-footer { padding-top: calc(var(--space-2xl) + clamp(4rem, 2rem + 6vw, 7.5rem)); }
.footer__top { display: grid; gap: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: var(--border-1) solid var(--c-line); }
.footer__brand { display: grid; gap: var(--space-s); justify-items: start; }
.footer__line { color: var(--c-text-dim); max-width: 40ch; }
.footer__mail a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 800; font-size: var(--step-1); text-decoration-color: var(--c-accent); text-decoration-thickness: var(--border-2); overflow-wrap: anywhere; }
.footer__mail a:hover { color: var(--c-accent-fg); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; align-content: start; }
.footer__nav a { display: inline-flex; min-height: 2.75rem; align-items: center; font-weight: 700; font-stretch: 90%; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--step--1); text-decoration: none; }
.footer__nav a:hover { color: var(--c-accent-fg); }
@media (min-width: 900px) {
  .footer__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
  .footer__nav { justify-content: flex-end; }
}
.footer__word {
  display: block; margin-block: var(--space-l) -0.16em; white-space: nowrap;
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: 23vw; line-height: 0.8; text-transform: uppercase; letter-spacing: -0.01em; text-align: center;
  color: var(--c-bg); -webkit-text-stroke: max(1.5px, 0.006em) color-mix(in srgb, var(--c-text) 26%, transparent); paint-order: stroke fill;
  user-select: none;
}
.footer__meta { position: relative; z-index: 1; background: var(--c-bg); border-top: var(--border-1) solid var(--c-line); }
.footer__meta-inner { display: grid; gap: 0.5rem 2rem; padding-block: var(--space-m) calc(var(--space-m) + env(safe-area-inset-bottom)); color: var(--c-text-dim); font-size: var(--step--1); }
@media (min-width: 900px) { .footer__meta-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: start; } }
@media (max-width: 699px) { .site-footer { padding-bottom: 4.5rem; } }   /* room for the action bar */

/* Phone action bar — the one thing a director came for, one thumb away */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0.75rem;
  padding: 0.65rem var(--gutter) calc(0.65rem + env(safe-area-inset-bottom));
  background: var(--c-bg); border-top: var(--border-1) solid var(--c-line);   /* solid: the scrim let page text ghost through the ghost button */
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--dur-move) var(--ease-launch), visibility 0s linear var(--dur-move);
}
.action-bar.is-shown { transform: none; visibility: visible; transition-delay: 0s; }
.action-bar .btn { min-height: 3rem; padding-inline: 0.8em; font-size: var(--step--2); }
@media (min-width: 700px) { .action-bar { display: none; } }

/* =============================================================================
   REVEALS — content is visible by default. script.js only "arms" elements
   that start below the fold; they come in within 450 ms, and anything the
   observer misses on a fast scroll is shown instantly. Nothing waits.
   ============================================================================= */
[data-reveal] { transition: opacity var(--dur-reveal) var(--ease-launch), transform var(--dur-reveal) var(--ease-launch); transition-delay: calc(min(var(--i, 0), 3) * var(--stagger)); }
[data-reveal].is-armed { opacity: 0; transform: translateY(1.5rem); transition: none; }
.lane[data-reveal].is-armed, .style-lane[data-reveal].is-armed, .price[data-reveal].is-armed { transform: translateX(-2rem); }
[data-reveal].is-instant, [data-reveal].is-instant * { transition: none !important; }
.style-lane[data-reveal].is-in, .style-lane[data-reveal] { transition: opacity var(--dur-reveal) var(--ease-launch), transform var(--dur-reveal) var(--ease-launch), color var(--dur-hover) ease; }

/* =============================================================================
   VIEW TRANSITIONS
   · wipe — colourway change: a circle grows from the swatch (clip set in JS)
   · cut  — in-page links: a leaning diagonal wipe, ~340 ms, no long glide
   · page — page-to-page navigation uses the same cut
   ============================================================================= */
html[data-vt="wipe"]::view-transition-old(root), html[data-vt="wipe"]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html[data-vt="cut"]::view-transition-old(root) { animation: k-cut-old var(--dur-cut) var(--ease-cut) both; }
html[data-vt="cut"]::view-transition-new(root) { animation: k-cut-new var(--dur-cut) var(--ease-cut) both; }
@keyframes k-cut-old { to { transform: translateX(-4%); opacity: 0.35; } }
@keyframes k-cut-new {
  from { clip-path: polygon(116% 0, 140% 0, 140% 100%, 100% 100%); }
  to   { clip-path: polygon(0% 0, 140% 0, 140% 100%, -16% 100%); }
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: k-cut-old var(--dur-cut) var(--ease-cut) both; }
  ::view-transition-new(root) { animation: k-cut-new var(--dur-cut) var(--ease-cut) both; }
}

/* =============================================================================
   SCROLL-DRIVEN DRIFT (native where supported; JS fallback sets --p)
   Purely decorative travel — never hides anything.
   ============================================================================= */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero__line { animation: k-drift linear both; animation-timeline: scroll(root block); animation-range: 0 90vh; }
    .stat__num { animation: k-stat linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
    .cta-band__row { animation: k-row linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .cta-band__row--2 { --from: -7%; }   /* -16% pushed "site" off the left edge on phones while the band scrolled in */
    .footer__word { animation: k-word linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
  .no-sda .hero__line { transform: translateX(calc(var(--dx) * var(--p, 0))); }
}
@keyframes k-drift { to { transform: translateX(var(--dx)); } }
@keyframes k-stat { from { transform: skewX(9deg); transform-origin: 0 100%; } to { transform: none; transform-origin: 0 100%; } }
@keyframes k-row { from { transform: translateX(var(--from, 12%)); } to { transform: none; } }
@keyframes k-word { from { transform: translateX(20%); } to { transform: none; } }

/* =============================================================================
   REDUCED MOTION — every animation has a still state
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .ping::after { animation: none; }
  .tape__lean { transform: none !important; }
  [data-reveal], [data-reveal].is-armed { opacity: 1; transform: none; transition: none; }
  .lane.is-in::after, .style-lane.is-in::after, .price.is-in::after { animation: none; }
  .btn:hover::before { transform: skewX(var(--lean)); }
  .mini, .style-lane__name { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}


/* =============================================================================
   PAGE · PRICING  (pricing.html only — every selector here is page-scoped)
   Reuses .hero, .tapes, .score, .prices, .thesis, .zero, .lanes, .heads-up,
   .cta-band as-is. These rules only size them for this page's longer copy
   and add two small pieces: the sum ($19.99 + $750 =) and the struck fees.
   Role tokens only.
   ============================================================================= */

/* Hero — the headline is a sentence, so the stack is sized to its longest line */
.hero--pricing { --hero-size: min(17.5vw, 13svh, 8.5rem); }
@media (min-width: 700px) and (max-width: 1199px) { .hero--pricing { --hero-size: min(16vw, 12svh, 8.5rem); } }
@media (min-width: 1200px) { .hero--pricing { --hero-size: min(calc((min(100vw, var(--wrap)) - 2 * var(--gutter) - 26rem - var(--space-xl)) / 5.3), 14.5svh, 9.5rem); } }
.hero--pricing .zero__lit { padding-inline: 0.06em 0.16em; }
@media (prefers-reduced-motion: no-preference) {
  .hero--pricing .zero__lit::before { animation: k-wipe 480ms var(--ease-cut) 360ms both; }
}

/* Scoreboard — "$" sits in front of the number */
.pr-score .pr-cur { margin-left: 0; margin-right: 0.04em; }

/* Price lanes — each tier has two short paragraphs */
.pr-tiers .price__text { display: grid; gap: var(--space-2xs); }
.pr-tiers .price__text strong { color: var(--c-text); }
.pr-tiers .price__text a { color: var(--c-text); font-weight: 700; text-decoration-color: var(--c-accent); text-decoration-thickness: var(--border-2); }
.pr-tiers .price__text a:hover { color: var(--c-accent-fg); }

/* The whole number — $19.99 + $750 = the lit total */
.pr-whole .thesis__inner { gap: var(--space-xl); }
.pr-sum { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2xs) clamp(0.75rem, 0.4rem + 1.5vw, 1.5rem); }
.pr-sum__term { display: grid; gap: 0.35rem; }
.pr-sum__term b, .pr-sum__op {
  font-family: var(--font-display); font-stretch: 70%; font-weight: 900; font-style: italic;
  font-size: clamp(2rem, 1.15rem + 3.6vw, 5rem); line-height: 0.86; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.pr-sum__term .mono { color: var(--c-text-dim); font-weight: 700; }
.pr-sum__op { display: block; padding-bottom: 1.6rem; color: var(--c-text-dim); font-style: normal; }
.pr-total { margin-top: 0; padding-block: 0; }
.pr-total .zero__num { font-size: clamp(4.25rem, 0.6rem + 19.5vw, 15rem); }
.pr-total .zero__lit { padding-inline: 0.06em 0.16em; }
.pr-total .zero__lit::before { inset: -0.03em -0.02em -0.02em -0.04em; }
.pr-total .zero__body { max-width: 34rem; }
@media (min-width: 800px) and (max-width: 1199px) { .pr-total { grid-template-columns: minmax(0, 1fr); } }

.pr-whole__grid { display: grid; gap: var(--space-xl); }
.pr-nofee { display: grid; gap: var(--space-s); align-content: start; }
.pr-nofee__label { color: var(--c-text); font-weight: 700; }
.pr-nofee__list { list-style: none; display: grid; gap: var(--space-2xs); }
.pr-nofee__list li {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: var(--step-3); line-height: 1; text-transform: uppercase;
}
.pr-nofee__list li:nth-child(2) { padding-left: 0.4em; }
.pr-nofee__list li:nth-child(3) { padding-left: 0.8em; }
.pr-nofee.is-armed .strike::after { transform: skewX(var(--lean)) rotate(-5deg) scaleX(0); }
.pr-nofee.is-in .strike::after { transition: transform 360ms var(--ease-cut) calc(160ms + var(--n, 0) * 100ms); }
.pr-whole__act { margin-top: var(--space-2xs); }
@media (min-width: 1000px) {
  .pr-whole__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: var(--space-2xl); }
  .pr-whole__grid .thesis__body { margin-left: 0; }
}

/* What "small" means — the rule, said once, next to the honest note */
.pr-rule { display: grid; gap: var(--space-xl); margin-top: var(--space-2xl); }
.pr-rule .thesis__quote { max-width: 30ch; }
.pr-rule .heads-up { margin-top: 0; }
@media (min-width: 1000px) { .pr-rule { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; column-gap: var(--space-2xl); } .pr-rule .heads-up { grid-template-columns: minmax(0, 1fr); } }

/* The page ends on the accent band: give the footer room under its diagonal */
.cta-band__note a { color: inherit; text-decoration-thickness: var(--border-2); }
main:has(> .pr-end:last-child) + .site-footer { padding-top: calc(var(--space-2xl) + var(--cut)); }

@media (prefers-reduced-motion: reduce) {
  .pr-nofee.is-armed .strike::after { transform: skewX(var(--lean)) rotate(-5deg); }
}
/* ═══════════════════════════ END PAGE · PRICING ═══════════════════════════ */


/* =============================================================================
   PAGE · WORK / STYLES  (work.html only — every selector here is page-scoped)
   Reuses .hero, .tapes, .styles + .style-lanes + .mini, .thesis, .steps,
   .heads-up, .cta-band and .founder as-is. One modifier, nothing new to learn.
   Role tokens only.
   ============================================================================= */

/* .styles straight after the .tapes band (the way .audit follows it on the
   home page): no negative overlap and no z-raise, so the crossing tapes paint
   over its top edge instead of the section's diagonal covering them. */
.styles--after-tapes { z-index: auto; margin-top: 0; clip-path: none; padding-top: calc(var(--space-section) + 2rem); }
/* ═══════════════════════════ END PAGE · WORK / STYLES ═══════════════════════════ */


/* =============================================================================
   PAGE · WHAT YOU GET  (what-you-get.html only — every selector here is
   page-scoped: .wyg-* or a page modifier)
   Reuses .hero, .tapes, .sec-head, .thesis__quote/__body, .pricing__foot,
   .step__no/__tag, .price__amt, .heads-up, .check-card, .styles + .mini,
   .lanes, .strike, .zero__lit and .cta-band as-is. Adds: the hero's small
   kicker line, the itemized bill, the step chapters (sticky head + ticked
   list), the $375 / $375 split, the change-size table, and the four styles
   as lanes with live thumbnails. Role tokens only.
   ============================================================================= */

/* Hero — a sub-page hero: a little shorter, with a small kicker line in the stack */
.hero--wyg { min-height: min(calc(100svh - var(--header-h)), 50rem); }
.hero__line--kicker { --dx: 12%; font-size: 0.4em; line-height: 1; padding: 0.3em 0.14em 0.24em 1.2em; margin-block: 0; }
.hero__line--kicker .hero__word { color: var(--c-text-dim); font-stretch: 85%; letter-spacing: 0.03em; }
.hero--wyg .zero__lit { padding-inline: 0.06em 0.16em; }
.wyg-toc .check-card__list li { padding-block: 0; }
.wyg-toc .check-card__list a { flex: 1; display: flex; align-items: center; min-height: 2.5rem; text-decoration: none; }
.wyg-toc .check-card__list a:hover { color: var(--c-accent-fg); }
@media (min-width: 700px) and (max-width: 1199px) {
  .hero--wyg .hero__aside { grid-template-rows: auto 1fr; }   /* the tall page index must not push the buttons down */
}
@media (prefers-reduced-motion: no-preference) {
  .hero__line--kicker .hero__word { animation-delay: 165ms; }
  .hero--wyg .zero__lit::before { animation: k-wipe 480ms var(--ease-cut) 380ms both; }
}

/* A band whose top edge rises to the right (rule 4) */
.wyg-cut {
  position: relative; z-index: var(--z-raise);
  margin-top: calc(var(--cut) * -1);
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}

/* 01 · The whole price — copy on the left, the itemized bill on the right */
.wyg-whole { position: relative; padding-block: calc(var(--space-section) + 2rem) calc(var(--space-xl) + var(--cut) * 1.2); }
.wyg-whole__grid { display: grid; gap: var(--space-2xl); align-items: start; }
.wyg-whole__copy { display: grid; gap: var(--space-l); justify-items: start; }
.wyg-whole__copy .sec-head { margin-bottom: 0; }
.wyg-whole__copy .thesis__quote { max-width: 32ch; }
.wyg-whole .pricing__foot { margin-top: 0; }
.wyg-em { color: var(--c-text); font-weight: 800; }
@media (min-width: 1000px) { .wyg-whole__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); column-gap: var(--space-2xl); align-items: center; } }

.wyg-bill {
  position: relative; display: grid; gap: var(--space-s);
  width: 100%; max-width: 36rem; justify-self: center;
  padding: var(--space-l) var(--space-l) var(--space-m);
  border-top: var(--border-3) solid var(--c-accent);
  box-shadow: var(--shadow-lift);
}
.wyg-bill::after {                /* the torn edge: the paper ends in teeth */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.55rem;
  background: conic-gradient(from -45deg at 50% 100%, var(--c-bg) 90deg, transparent 0) 0 0 / 1.1rem 100% repeat-x;
}
@media (min-width: 700px) { .wyg-bill { rotate: -1.5deg; } }
.wyg-bill__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding-bottom: var(--space-s); border-bottom: var(--border-2) dashed var(--c-line-strong); color: var(--c-text-dim); font-weight: 700; }
.wyg-bill__list { display: grid; }
.wyg-bill__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-m); padding-block: var(--space-s); border-bottom: var(--border-1) solid var(--c-line); }
.wyg-bill__row dt { display: grid; gap: 0.2rem; font-weight: 800; font-stretch: 88%; font-size: var(--step-0); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; }
.wyg-bill__row dt b { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; letter-spacing: var(--mono-track); color: var(--c-text-dim); }
.wyg-bill__row dt span { font-weight: 500; font-stretch: 100%; font-size: var(--step--1); text-transform: none; letter-spacing: 0; color: var(--c-text-dim); }
.wyg-bill__row dd {
  margin: 0; white-space: nowrap;
  font-family: var(--font-display); font-stretch: 70%; font-weight: 900; font-size: var(--step-3);
  line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.wyg-bill__row dd small { font-size: 0.45em; color: var(--c-text-dim); margin-left: 0.04em; }
.wyg-bill__row--zero .zero__lit { padding-inline: 0.1em 0.18em; }
.wyg-bill__row--total { margin-top: var(--space-2xs); border-top: var(--border-3) solid var(--c-text); border-bottom: var(--border-3) solid var(--c-text); }
.wyg-bill__row--total dt { font-family: var(--font-display); font-stretch: 75%; font-weight: 900; font-style: italic; font-size: var(--step-1); line-height: 1; }
.wyg-bill__row--total dd { font-size: var(--step-4); }
.wyg-bill__row--opt { border-bottom: 0; }
.wyg-bill__row--opt dd { color: var(--c-text-dim); }
.wyg-bill__foot { padding-top: var(--space-s); border-top: var(--border-2) dashed var(--c-line-strong); color: var(--c-text-dim); font-size: 0.75rem; }   /* the "payments aren't on" line must be readable */
.wyg-bill.is-armed .zero__lit::before { transform: skewX(var(--lean)) scaleX(0); }
.wyg-bill.is-in .zero__lit::before { transition: transform 440ms var(--ease-cut) 300ms; }

/* 02 · The detail — one chapter per step: head on the left (sticky on desktop), the list on the right */
.wyg-step { padding-block: calc(var(--space-2xl) + var(--cut)) calc(var(--space-2xl) + var(--cut)); }
.wyg-detail > .wyg-step:first-child { padding-top: calc(var(--space-2xl) + var(--cut) * 1.4); }
.wyg-step__grid { display: grid; gap: var(--space-xl); }
.wyg-step__head { display: grid; gap: var(--space-s); align-content: start; justify-items: start; padding-top: var(--space-s); border-top: var(--border-3) solid var(--c-text); }
.wyg-step__top { display: flex; align-items: flex-end; gap: var(--space-m); }
.wyg-step__top .step__tag { margin: 0 0 0.5em; }
.wyg-step__title {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: var(--step-4); line-height: 0.88; text-transform: uppercase; text-wrap: balance;
}
.wyg-step__head .price__amt { margin-top: var(--space-2xs); }
.wyg-step__body { display: grid; gap: var(--space-l); align-content: start; }
.wyg-step__lede { font-size: var(--step-1); line-height: 1.45; max-width: 44ch; text-wrap: pretty; }
.wyg-step__text { color: var(--c-text-dim); max-width: var(--measure); }
.wyg-step__text strong { color: var(--c-text); }
.wyg-step__body .heads-up, .wyg-care__notes .heads-up { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .wyg-step__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: var(--space-2xl); align-items: start; }
  .wyg-step__grid:not(.wyg-step__grid--flat) .wyg-step__head { position: sticky; top: calc(var(--header-h) + var(--space-l)); }
  .wyg-step__grid--flat { align-items: end; }
}

/* Ticked list — each tick draws itself as its line comes in */
.wyg-ticks { list-style: none; display: grid; border-top: var(--border-1) solid var(--c-line); }
.wyg-ticks li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-s); align-items: start; padding-block: var(--space-s); border-bottom: var(--border-1) solid var(--c-line); }
.wyg-ticks li > span { max-width: 58ch; text-wrap: pretty; }
.wyg-tick { width: 1.4rem; height: auto; margin-top: 0.3em; fill: none; stroke: var(--c-accent-fg); stroke-width: 2.6; stroke-linecap: square; stroke-linejoin: miter; }
.wyg-tick path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.wyg-ticks li.is-armed .wyg-tick path { stroke-dashoffset: 1; }
.wyg-ticks li.is-in .wyg-tick path { transition: stroke-dashoffset 380ms var(--ease-launch) 140ms; }

/* $375 / $375 — two leaning slabs */
.wyg-split { display: grid; gap: var(--space-s); justify-items: start; }
.wyg-split__label { color: var(--c-text-dim); font-weight: 700; }
.wyg-split__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 11rem)); gap: var(--space-m); padding-left: 0.5rem; }
.wyg-split__list li { position: relative; isolation: isolate; display: grid; gap: 0.35rem; padding: var(--space-s) var(--space-m); }
.wyg-split__list li::before { content: ""; position: absolute; inset: 0; z-index: -1; border: var(--border-2) solid var(--c-text); transform: skewX(var(--lean)); }
.wyg-split__list li:first-child { color: var(--c-on-accent); }
.wyg-split__list li:first-child::before { background: var(--c-accent); border-color: var(--c-accent); }
.wyg-split__list b {
  font-family: var(--font-display); font-stretch: 70%; font-weight: 900; font-style: italic;
  font-size: var(--step-3); line-height: 0.9; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.wyg-split__list .mono { font-weight: 700; }

/* Step three — the change-size table (a real table; stacks into rows on a phone) */
.wyg-sizes-wrap { margin-top: var(--space-2xl); }
.wyg-sizes { width: 100%; border-collapse: collapse; text-align: left; }
.wyg-sizes caption { caption-side: top; text-align: left; padding-bottom: var(--space-m); max-width: 52ch; font-size: var(--step-1); line-height: 1.5; text-wrap: pretty; }
.wyg-stamp { display: inline-block; margin-right: 0.25em; padding: 0.3em 0.6em 0.25em; background: var(--c-text); color: var(--c-bg); font-weight: 700; transform: rotate(-2deg); vertical-align: 0.2em; }
.wyg-sizes thead th {
  padding: 0 var(--space-m) var(--space-xs) 0; border-bottom: var(--border-3) solid var(--c-text);
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; letter-spacing: var(--mono-track); text-transform: uppercase; color: var(--c-text-dim);
}
.wyg-sizes tbody th, .wyg-sizes td { padding: var(--space-m) var(--space-m) var(--space-m) 0; border-bottom: var(--border-1) solid var(--c-line); vertical-align: top; font-weight: 400; }
.wyg-sizes td { color: var(--c-text-dim); }
.wyg-sizes td strong { color: var(--c-text); }
.wyg-sizes td:last-child { color: var(--c-text); font-weight: 700; }
.wyg-sizes .step__tag { display: inline-block; margin-top: 0; }
.wyg-size { display: block; font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic; font-size: var(--step-3); line-height: 0.9; text-transform: uppercase; }
.wyg-meter { display: flex; gap: 0.35rem; margin-top: 0.55rem; }
.wyg-meter i { width: 0.85rem; height: 0.85rem; border: var(--border-2) solid var(--c-line-strong); transform: skewX(var(--lean)); }
.wyg-meter[data-n="1"] i:nth-child(-n + 1), .wyg-meter[data-n="2"] i:nth-child(-n + 2), .wyg-meter[data-n="3"] i { background: var(--c-accent); border-color: var(--c-accent); }
@media (min-width: 900px) {
  .wyg-sizes thead th:first-child { width: 22%; }
  .wyg-sizes thead th:nth-child(3) { width: 24%; }
  .wyg-sizes thead th:last-child { width: 18%; padding-right: 0; }
  .wyg-sizes td:last-child { padding-right: 0; }
}
@media (max-width: 899px) {
  .wyg-sizes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wyg-sizes, .wyg-sizes caption, .wyg-sizes tbody, .wyg-sizes tr, .wyg-sizes th, .wyg-sizes td { display: block; }
  .wyg-sizes tbody tr { padding-block: var(--space-m) var(--space-2xs); border-top: var(--border-3) solid var(--c-text); }
  .wyg-sizes tbody th { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding: 0 0 var(--space-xs); border: 0; }
  .wyg-sizes tbody th .wyg-meter { margin-top: 0; }
  .wyg-sizes td { display: grid; grid-template-columns: minmax(6.5rem, 0.42fr) minmax(0, 1fr); gap: var(--space-s); padding: var(--space-xs) 0; }
  .wyg-sizes td:last-child { border-bottom: 0; }
  .wyg-sizes td::before {
    content: attr(data-label); padding-top: 0.25em; color: var(--c-text-dim);
    font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; letter-spacing: var(--mono-track); text-transform: uppercase; line-height: 1.4;
  }
}

/* Monitoring card + the two honest notes */
.wyg-care__grid { display: grid; gap: var(--space-xl); margin-top: var(--space-2xl); align-items: start; }
.wyg-care__lead { color: var(--c-text-dim); font-size: var(--step--1); font-weight: 700; }
.wyg-care__notes { display: grid; gap: var(--space-l); }
.wyg-care__grid .check-card { grid-column: auto; grid-row: auto; }   /* undo the hero's 700–1199px card placement */
@media (min-width: 900px) { .wyg-care__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: var(--space-2xl); align-items: center; } }

/* 03 · Four styles — lanes, each with a live thumbnail; names in their own voice */
.wyg-looks { margin-bottom: var(--space-xl); }
.wyg-looks .lane { align-items: start; }
.wyg-thumb { grid-column: 2; width: 100%; max-width: 24rem; margin-top: var(--space-xs); }
.wyg-looks .lane:hover .wyg-thumb { transform: translate(-0.3rem, -0.3rem); box-shadow: 0.6rem 0.6rem 0 0 var(--c-accent); }
.wyg-looks [data-style="cinematic"] .lane__name { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; text-transform: none; letter-spacing: -0.02em; }
.wyg-looks [data-style="brightclub"] .lane__name { font-style: normal; font-stretch: 80%; text-transform: none; letter-spacing: -0.04em; }
.wyg-looks [data-style="precision"] .lane__name { font-family: var(--font-body); font-style: normal; font-stretch: 78%; font-weight: 600; text-transform: none; letter-spacing: -0.05em; }
@media (min-width: 800px) {
  .wyg-looks .lane { grid-template-columns: 5.5rem minmax(0, 1fr) minmax(15rem, 0.8fr); align-items: start; }
  .wyg-looks .lane__no { grid-row: 1 / span 2; }
  .wyg-looks .lane__body { grid-column: 2; }
  .wyg-thumb { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; max-width: none; }
}
@media (min-width: 1100px) {
  .wyg-looks .lane { grid-template-columns: 5.5rem minmax(0, 1.1fr) minmax(0, 1fr) minmax(15rem, 18rem); align-items: center; }
  .wyg-looks .lane__no { grid-row: auto; }
  .wyg-looks .lane__body { grid-column: 3; }
  .wyg-thumb { grid-column: 4; grid-row: auto; }
}

/* 04 · The limits — each denial's key word is struck through as its lane comes in */
.wyg-limits { padding-block: calc(var(--space-section) + var(--cut)) calc(var(--space-section) + var(--cut)); }
.wyg-limits .strike { white-space: nowrap; }
.wyg-limits .strike::after { top: 50%; height: 0.085em; transform: skewX(var(--lean)) rotate(-3deg); }   /* thinner: the struck word stays readable */
.wyg-limits .lane.is-armed .strike::after { transform: skewX(var(--lean)) rotate(-3deg) scaleX(0); }
.wyg-limits .lane.is-in .strike::after { transition: transform 380ms var(--ease-cut) 220ms; }
.wyg-limits .lane__art .art-no { stroke: var(--c-accent); stroke-width: 4; }
.wyg-limits__close { margin-top: var(--space-2xl); }

/* The page ends on the accent band: give the footer room under its diagonal */
main:has(> .wyg-end:last-child) + .site-footer { padding-top: calc(var(--space-2xl) + var(--cut)); }

@media (prefers-reduced-motion: reduce) {
  .wyg-limits .lane.is-armed .strike::after { transform: skewX(var(--lean)) rotate(-3deg); }
  .wyg-ticks li.is-armed .wyg-tick path { stroke-dashoffset: 0; }
  .wyg-bill.is-armed .zero__lit::before { transform: skewX(var(--lean)); }
  .wyg-thumb { transition: none; }
}
/* ═════════════════════════ END PAGE · WHAT YOU GET ═════════════════════════ */


/* =============================================================================
   PAGE · START  (start.html only — every selector here is page-scoped: .st-*,
   .hero--start, .st-next, or the Start button's own aria-current)
   Reuses .hero, .tapes, .check-card, .sec-head, .heads-up, .demo-note,
   .swatches/.swatch (as answer chips), .mini (as the style picker),
   .how + .steps and .btn as-is. Adds what the system had no piece for:
   form fields, the composed-email box, the one-question-at-a-time intake
   with its progress rail, and the style picker. Role tokens only.
   Behaviour: start.js.
   ============================================================================= */

/* Header — on this page the current link IS the Start button: keep its ink
   text on the accent fill in the phone menu (the shared rule tints it). */
.js .nav__menu .nav__start a.btn[aria-current="page"] { color: var(--btn-fg); }

/* Hero — the lit word ("club.") wipes in like the home page's "break" */
.hero--start .zero__lit { -webkit-text-stroke: 0; padding-inline: 0.06em 0.16em; }
@media (prefers-reduced-motion: no-preference) {
  .hero--start .zero__lit::before { animation: k-wipe 480ms var(--ease-cut) 420ms both; }
}

/* ── 01 · FREE SITE CHECK ─────────────────────────────────────────────── */
.st-check { position: relative; padding-block: calc(var(--space-section) + 2rem) calc(var(--space-section) + var(--cut)); }
.st-check__grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 1000px) { .st-check__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--space-2xl); } }

/* ── FORM FIELDS — a leaning accent rule sweeps under the field you're in ─ */
.st-form { display: grid; gap: var(--space-m); min-width: 0; }
.st-form__row { display: grid; gap: var(--space-m); }
@media (min-width: 640px) { .st-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); margin-top: var(--space-2xs); }
.st-fine { color: var(--c-text-dim); font-size: var(--step--1); line-height: 1.5; max-width: 62ch; text-wrap: pretty; }
.st-fine strong { color: var(--c-text); }

.st-field { display: grid; gap: var(--space-2xs); align-content: start; min-width: 0; }
.st-field__label {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700;
  letter-spacing: var(--mono-track); text-transform: uppercase; color: var(--c-text);
}
.st-field__label span { color: var(--c-text-dim); font-weight: 500; text-transform: none; letter-spacing: 0.02em; }
.st-field__hint { color: var(--c-text-dim); font-size: var(--step--1); line-height: 1.5; max-width: 62ch; text-wrap: pretty; }
.st-field__ctl { position: relative; }
.st-field__ctl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--border-3); pointer-events: none;
  background: var(--c-accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-move) var(--ease-cut);
}
.st-field__ctl:focus-within::after { transform: scaleX(1); }
.st-field__input {
  display: block; width: 100%; min-height: 3.25rem; margin: 0; padding: 0.8rem 1rem;
  border: var(--border-1) solid var(--c-line); border-bottom: var(--border-3) solid var(--c-line-strong); border-radius: 0;
  background: color-mix(in srgb, var(--c-text) 5%, transparent); color: var(--c-text);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.45;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease;
}
textarea.st-field__input { min-height: 9.5rem; resize: vertical; }
.st-field__input::placeholder { color: var(--c-text-dim); opacity: 1; }
.st-field__input:hover { border-color: var(--c-line-strong); }
.st-field__input:focus { background: color-mix(in srgb, var(--c-text) 8%, transparent); }
.st-field__input:focus-visible { outline-offset: 2px; }
.st-field__err {
  justify-self: start; display: inline-flex; align-items: baseline; gap: 0.55em;
  padding: 0.35em 0.7em 0.3em; background: var(--c-text); color: var(--c-bg);
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.03em; line-height: 1.35;
  transform: rotate(-1.2deg); transform-origin: 0 50%;
}
.st-field.is-invalid .st-field__input { border-color: var(--c-text); border-bottom-style: dashed; }
@media (prefers-reduced-motion: no-preference) {
  .st-field__err:not([hidden]) { animation: k-fade-up var(--dur-reveal) var(--ease-snap) both; }
}

/* ── THE COMPOSED EMAIL — always readable, always copyable ───────────────── */
.st-compose {
  position: relative; display: grid; gap: var(--space-s); min-width: 0;
  padding: var(--space-m); background: var(--c-bg-2);
  border: var(--border-1) solid var(--c-line); border-left: var(--border-3) solid var(--c-accent);
}
.st-compose::after {            /* the "it's ready" flash (opacity + scale only) */
  content: ""; position: absolute; inset: calc(var(--border-3) * -1); pointer-events: none;
  border: var(--border-3) solid var(--c-accent); opacity: 0;
}
.st-compose__label { display: flex; align-items: center; gap: 0.6rem; color: var(--c-text-dim); }
.st-compose__meta { display: grid; gap: 0.2rem; font-size: var(--step--1); overflow-wrap: anywhere; }
.st-compose__meta .mono { display: inline-block; min-width: 6em; color: var(--c-text-dim); }
.st-compose__meta a { font-weight: 700; text-decoration-color: var(--c-accent); text-decoration-thickness: var(--border-2); }
.st-compose__text {
  display: block; width: 100%; min-height: 11rem; max-height: 28rem; margin: 0; padding: 0.85rem 1rem; resize: vertical;
  border: var(--border-1) solid var(--c-line); border-radius: 0; background: var(--c-bg); color: var(--c-text);
  font-family: var(--font-mono); font-size: var(--step--1); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}
.st-compose__text:focus-visible { outline-offset: 2px; }
.st-compose__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); }
.st-compose__status { font-weight: 700; line-height: 1.45; max-width: 60ch; }
.st-compose__status:empty { min-height: 0; }
.st-compose__alt { color: var(--c-text-dim); font-size: var(--step--1); line-height: 1.5; overflow-wrap: anywhere; max-width: 52ch; }
.st-compose__alt a { color: var(--c-text); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .st-compose.is-flash::after { animation: k-st-flash 900ms var(--ease-launch) both; }
}
@keyframes k-st-flash { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.025); } }

/* ── 02 · THE INTAKE — chalk, cut in on the diagonal ─────────────────────── */
.st-intake {
  position: relative; z-index: var(--z-raise);
  margin-top: calc(var(--cut) * -1);
  padding-block: calc(var(--space-section) + var(--cut)) calc(var(--space-section) + var(--cut));
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}
.st-intake .heads-up { margin-top: 0; margin-bottom: var(--space-xl); }
.st-intake .heads-up a { font-weight: 700; }
.st-app { display: grid; gap: var(--space-l); align-items: start; min-width: 0; }
@media (min-width: 1000px) {
  .js .st-app { grid-template-columns: 16rem minmax(0, 1fr); column-gap: var(--space-2xl); }
  .js .st-rail { grid-column: 1; position: sticky; top: calc(var(--header-h) + var(--space-m)); }
  .js .st-stage { grid-column: 2; grid-row: 1; }   /* holds its column before start.js shows the rail */
}
/* without JavaScript: every question listed, full width; the chips need JS */
html:not(.js) .st-chips { display: none; }

/* Progress rail — phone: a segmented bar of buttons · desktop: the step list */
.st-rail { display: grid; gap: var(--space-s); align-content: start; min-width: 0; }
.st-status { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem var(--space-s); }
.st-count { display: flex; align-items: baseline; gap: 0.6rem; }
.st-count__num {
  display: inline-block; font-family: var(--font-display); font-stretch: 70%; font-weight: 900;
  font-size: var(--step-4); line-height: 0.85; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.st-count__of { color: var(--c-text-dim); font-weight: 700; }
.st-saved { display: flex; align-items: center; gap: 0.5rem; color: var(--c-text-dim); }
.st-saved::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; background: var(--c-accent); transform: skewX(var(--lean)); }
.st-saved.is-off::before { background: transparent; border: var(--border-2) solid var(--c-text-dim); }
.st-bar { position: relative; height: 0.5rem; overflow: clip; background: var(--c-line); transform: skewX(var(--lean)); }
.st-bar span { position: absolute; inset: 0; background: var(--c-accent); transform: scaleX(var(--fill, 0)); transform-origin: 0 50%; transition: transform var(--dur-move) var(--ease-launch); }
.st-steps { list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.3rem; }
.st-step {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 0.7rem;
  width: 100%; min-height: 2.75rem; padding: 0; background: none; border: 0; color: var(--c-text); text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.st-step__no, .st-step__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.st-step::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0.4rem; margin-top: -0.2rem;
  background: var(--c-line-strong); opacity: 0.5; transform: skewX(var(--lean));
  transition: opacity var(--dur-hover) ease, transform var(--dur-move) var(--ease-snap);
}
.st-step.is-done::after { background: var(--c-text); opacity: 1; }
.st-step[aria-current="step"]::after { background: var(--c-accent); opacity: 1; transform: skewX(var(--lean)) scaleY(2.2); }
.st-step:hover::after { opacity: 1; }
.st-clear {
  justify-self: start; min-height: 2.75rem; padding: 0; background: none; border: 0;
  color: var(--c-text-dim); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
.st-clear:hover { color: var(--c-text); }
.st-clear.is-confirm { color: var(--c-text); font-weight: 700; text-decoration-color: var(--c-accent); text-decoration-thickness: var(--border-2); }
@media (max-width: 999px) {     /* phone + tablet: count / saved + clear / segments */
  .st-bar { display: none; }
  .st-rail { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-m); }
  .st-status { display: contents; }
  .st-count { grid-column: 1 / -1; grid-row: 1; }
  .st-saved { grid-column: 1; grid-row: 2; align-self: center; align-items: baseline; }
  .st-saved::before { transform: skewX(var(--lean)) translateY(-0.1em); }
  .st-clear { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; min-height: 2.75rem; }
  .st-steps { grid-column: 1 / -1; grid-row: 3; }
}
@media (min-width: 1000px) {
  .st-status { display: grid; gap: var(--space-2xs); }
  .st-steps { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: var(--border-1) solid var(--c-line); margin-top: var(--space-2xs); }
  .st-steps li { border-bottom: var(--border-1) solid var(--c-line); }
  .st-step { min-height: 2.5rem; padding: 0.3rem 0.65rem; }
  .st-step::before {             /* the accent sweep behind the current step */
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-accent);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-move) var(--ease-cut);
  }
  .st-step__no, .st-step__name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .st-step__no { flex: none; width: 2.1em; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 700; color: var(--c-text-dim); }
  .st-step__name { flex: 1; font-size: var(--step--1); font-weight: 700; font-stretch: 90%; line-height: 1.2; }
  .st-step::after {              /* the "answered" mark */
    position: static; flex: none; width: 0.65rem; height: 0.65rem; margin: 0;
    background: transparent; border: var(--border-2) solid var(--c-line-strong); opacity: 1;
  }
  .st-step.is-done::after { background: var(--c-text); border-color: var(--c-text); }
  .st-step--go::after { visibility: hidden; }
  .st-step:hover .st-step__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
  .st-step[aria-current="step"] { color: var(--c-on-accent); }
  .st-step[aria-current="step"]::before { transform: scaleX(1); }
  .st-step[aria-current="step"] .st-step__no { color: inherit; }
  .st-step[aria-current="step"]::after { transform: skewX(var(--lean)); border-color: var(--c-on-accent); }
  .st-step[aria-current="step"].is-done::after { background: var(--c-on-accent); }
}

/* The stage — one question at a time (start.js hides the rest) */
.st-stage { display: grid; gap: var(--space-l); min-width: 0; }
.st-q { display: grid; gap: var(--space-m); align-content: start; min-width: 0; }
html:not(.js) .st-q ~ .st-q { padding-top: var(--space-xl); border-top: var(--border-3) solid var(--c-text); }
.st-q__kicker { display: flex; align-items: center; gap: 0.85em; color: var(--c-text-dim); font-weight: 700; }
.st-q__kicker::after { content: ""; width: 3rem; height: var(--border-2); background: currentColor; opacity: 0.5; }
.st-q__title {
  display: flex; align-items: flex-end; gap: 0.12em;
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: var(--step-4); line-height: 0.88; letter-spacing: var(--display-track); text-transform: uppercase;
}
.st-q__title:focus { outline: none; }
.st-q__mask { flex: none; display: block; overflow: clip; padding: 0.06em 0.1em 0.04em 0; margin-bottom: -0.04em; }
.st-q__no {
  display: block; font-size: 1.55em; line-height: 0.8; color: var(--c-bg);
  -webkit-text-stroke: max(1.5px, 0.018em) var(--c-text); paint-order: stroke fill;
}
.st-q__name { min-width: 0; padding-bottom: 0.04em; text-wrap: balance; }
.st-q__prompt { display: block; font-size: var(--step-1); line-height: 1.35; font-weight: 700; max-width: 42ch; text-wrap: pretty; }
.st-q .st-field { gap: var(--space-xs); }
.st-chips { display: grid; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.st-chips__label { color: var(--c-text-dim); }
.st-chips .swatch { padding-inline: 0.85em 1em; }
.st-chips .swatch::after { content: "+"; order: -1; font-weight: 700; color: var(--c-text-dim); }
.st-chips .swatch.is-pop::before { border-color: var(--c-text); background: color-mix(in srgb, var(--c-accent) 30%, transparent); }
.st-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m);
  padding-top: var(--space-m); border-top: var(--border-1) solid var(--c-line);
}
.st-nav [data-next] { margin-left: auto; }
.st-keys { color: var(--c-text-dim); }
@media (pointer: coarse), (max-width: 699px) { .st-keys { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .st-q.is-enter-fwd  { animation: k-st-in var(--dur-reveal) var(--ease-launch) both; }
  .st-q.is-enter-back { animation: k-st-in-back var(--dur-reveal) var(--ease-launch) both; }
  .st-q.is-enter-fwd .st-q__no, .st-q.is-enter-back .st-q__no { animation: k-rise var(--dur-reveal) var(--ease-launch) 40ms both; }
  .st-count__num.is-bump { animation: k-fade-up var(--dur-reveal) var(--ease-snap) both; }
  .st-chips .swatch.is-pop { animation: k-st-pop 260ms var(--ease-snap); }
}
@keyframes k-st-in { from { opacity: 0; transform: translateX(2.5rem) skewX(-4deg); } }
@keyframes k-st-in-back { from { opacity: 0; transform: translateX(-2.5rem) skewX(4deg); } }
@keyframes k-st-pop { 50% { transform: scale(1.06); } }

/* Q9 · the style picker — the same mini sites as the home page, as radios */
.st-picks { display: grid; gap: var(--space-s); min-width: 0; margin: 0; padding: 0; border: 0; }
.st-picks__legend { padding: 0; margin-bottom: var(--space-2xs); }
.st-picks__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) var(--space-m); padding: var(--space-2xs); }
@media (min-width: 1200px) { .st-picks__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.st-pick { position: relative; display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.st-pick .mini { order: -1; box-shadow: none; margin-bottom: 0.25rem; }
.st-pick__label { display: grid; gap: 0.2rem; cursor: pointer; }
.st-pick__label::after {        /* the whole tile is the target */
  content: ""; position: absolute; z-index: 1; inset: calc(var(--space-2xs) * -1);
  border: var(--border-2) solid transparent; transition: border-color var(--dur-hover) ease;
}
.st-pick__name {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: var(--step-2); line-height: 0.95; text-transform: uppercase;
}
.st-pick[data-style="cinematic"] .st-pick__name { font-family: var(--font-serif); font-weight: 400; font-stretch: 100%; text-transform: none; letter-spacing: -0.02em; }
.st-pick[data-style="brightclub"] .st-pick__name { font-style: normal; font-stretch: 80%; text-transform: none; letter-spacing: -0.04em; }
.st-pick[data-style="precision"] .st-pick__name { font-family: var(--font-body); font-style: normal; font-stretch: 78%; font-weight: 600; text-transform: none; letter-spacing: -0.05em; }
.st-pick__line { color: var(--c-text-dim); font-size: var(--step--1); line-height: 1.35; }
.st-pick__tick {              /* sits on the preview's corner, so tiles keep one height */
  display: none; position: absolute; z-index: 2; top: 0.55rem; left: 0.55rem; padding: 0.25em 0.6em 0.2em;
  background: var(--c-accent); color: var(--c-on-accent); font-weight: 700; transform: skewX(var(--lean));
  box-shadow: 0 0 0 var(--border-2) var(--c-bg);
}
.st-pick__demo {
  position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 2.75rem; text-decoration: none; font-weight: 700; border-bottom: var(--border-2) solid var(--c-accent);
}
.st-pick__demo .btn__arrow { transform: rotate(-45deg); transition: transform var(--dur-hover) var(--ease-launch); }
.st-pick__demo:hover .btn__arrow { transform: rotate(-45deg) translateX(0.25em); }
.st-pick .mini { transition: transform var(--dur-move) var(--ease-launch), box-shadow var(--dur-move) var(--ease-launch); }
.st-pick:hover .st-pick__label::after { border-color: var(--c-line); }
.st-pick__input:focus-visible + .st-pick__label::after { outline: var(--border-3) solid var(--c-focus); outline-offset: 2px; }
.st-pick__input:checked + .st-pick__label::after { border-color: var(--c-text); }
.st-pick__input:checked + .st-pick__label .st-pick__tick { display: inline-block; }
.st-pick__input:checked ~ .mini { transform: translate(-0.3rem, -0.3rem); box-shadow: 0.55rem 0.55rem 0 0 var(--c-accent); }
@media (prefers-reduced-motion: no-preference) {
  .st-pick__input:checked + .st-pick__label .st-pick__tick { animation: k-fade-up var(--dur-reveal) var(--ease-snap) both; }
}
/* "Not sure — you pick" spans the row */
.st-pick--any { grid-column: 1 / -1; padding: var(--space-s) var(--space-m); border: var(--border-2) dashed var(--c-line-strong); }
.st-pick--any .st-pick__label { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-m); align-items: center; }
.st-pick--any .st-pick__label::after { inset: calc(var(--border-2) * -1); }
.st-pick--any .st-pick__name { font-size: var(--step-1); }
.st-pick__q {
  grid-row: 1 / span 3; font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 900; font-style: italic;
  font-size: var(--step-4); line-height: 0.8; color: var(--c-bg); -webkit-text-stroke: max(1.5px, 0.02em) var(--c-text); paint-order: stroke fill;
}
.st-pick--any .st-pick__line { grid-column: 2; }
.st-pick--any .st-pick__tick { top: auto; left: auto; right: var(--space-s); bottom: var(--space-s); }
.st-picks .demo-note { margin-bottom: 0; }

/* Club colour — tints the four previews (start.js sets --club on .st-picks) */
.st-color {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-m);
  padding-block: var(--space-s); border-block: var(--border-1) solid var(--c-line);
}
.st-color .st-field__label { flex-basis: 100%; }
.st-color__input {
  -webkit-appearance: none; appearance: none; flex: none; width: 3.5rem; height: 2.75rem; padding: 0.2rem;
  border: var(--border-2) solid var(--c-line-strong); border-radius: 0; background: none; cursor: pointer; transform: skewX(var(--lean));
}
.st-color__input::-webkit-color-swatch-wrapper { padding: 0; }
.st-color__input::-webkit-color-swatch { border: 0; border-radius: 0; }
.st-color__input::-moz-color-swatch { border: 0; border-radius: 0; }
.st-color__value { color: var(--c-text-dim); text-transform: none; letter-spacing: 0.02em; }
/* a dark club colour: flip the previews' text on the fill so it stays legible */
.st-picks.is-dark-club [data-style="kinetic"] { --pv-on-accent: var(--pv-text); }
.st-picks.is-dark-club [data-style="precision"] { --pv-on-accent: var(--pv-bg); }
.st-picks.is-dark-club .mb-btn, .st-picks.is-dark-club .mb-sticker { color: var(--pv-raised); }
.st-picks.is-dark-club .mc-btn { color: var(--pv-text); border-color: var(--pv-text); }

/* Review and send */
.st-review { display: grid; gap: var(--space-s); }
.st-review__sum { font-size: var(--step-1); line-height: 1.4; max-width: 46ch; text-wrap: pretty; }
.st-review__sum strong { font-weight: 800; }
.st-review__todo { list-style: none; }
.st-review__todo .swatch { text-transform: none; letter-spacing: 0.02em; }
.st-review__todo .swatch b { color: var(--c-text-dim); }
@media (max-width: 699px) {   /* phone: the numbers alone, the names stay for screen readers */
  .st-review__todo .swatch { min-width: 2.75rem; justify-content: center; padding-inline: 0.75em; }
  .st-review__todo .swatch b { color: var(--c-text); }
  .st-review__todo-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.st-review__warn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); }
.st-compose--demo .st-compose__text { min-height: 16rem; }

/* ── 03 · WHAT HAPPENS NEXT (.how on the accent) ─────────────────────────── */
.st-next .heads-up { margin-top: var(--space-2xl); }
.st-mail { margin-top: var(--space-xl); font-size: var(--step-1); font-weight: 500; overflow-wrap: anywhere; }
.st-mail a { font-weight: 800; text-decoration-thickness: var(--border-2); text-underline-offset: 0.18em; }
.st-mail a:hover { text-decoration-thickness: var(--border-3); }

@media (prefers-reduced-motion: reduce) {
  .st-field__ctl::after, .st-step::before, .st-bar span, .st-pick .mini { transition: none; }
}
/* ═══════════════════════════ END PAGE · START ═══════════════════════════ */