/* Hallmark · genre: editorial · macrostructure: 3D cylinder hero + argued-document body
 * design-system: ~/LioDesign/design.md v3.0 · designed-as-app · nav: N5 floating pill · footer: rounded gradient card + wordmark
 * theme: TTA dark (tokens.json), light preview via ?theme=light · accent: #71F287 ≤10% per viewport · enrichment: cylinder, video band
 * Hallmark · pre-emit critique: P4 H5 E5 S4 R5 V4
 */

/* Local additions allowed by design.md §3.8 and v3 §3.4, §4.5. Everything else comes from tokens.css + bundle.css. */
:root {
  --ease-micro: cubic-bezier(.4, 0, .2, 1);
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --measure: 68ch;
  --page-pad: var(--space-6);
  --section-pad: var(--space-12);
  --content-max: 1200px;
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  /* near-black at the top to a saturated green at the bottom, with a soft glow bottom-right (after vetsocial.nl).
     The brightest stop (#2a8048) keeps white text at 4.9:1, so the strip at the bottom of the hero stays readable. */
  --grad-brand:
    radial-gradient(90% 60% at 78% 100%, rgb(42 128 72 / .55) 0%, rgb(42 128 72 / 0) 70%),
    linear-gradient(180deg, #030604 0%, #071509 18%, #0e361a 44%, #1a5f32 72%, #2a8048 100%);
  /* third-party brand colours and fixed scrims, named so the rules below never carry raw values */
  --wa-green: #25d366;
  --on-wa: var(--white);
  --scrim: rgb(0 0 0 / .6);
  --scrim-deep: rgb(0 0 0 / .88);
  --hairline-on-dark: rgb(255 255 255 / .16);
  --hairline-on-light: rgb(0 0 0 / .12);
  --ink-on-light-muted: rgb(0 0 0 / .55);
  --ink-on-dark-muted: rgb(255 255 255 / .72);
  --ink-on-dark-body: rgb(255 255 255 / .82);
  --tile-fill-dark: rgb(0 0 0 / .32);
  --hairline-on-dark-soft: rgb(255 255 255 / .12);
  --hairline-on-dark-strong: rgb(255 255 255 / .32);
  --rail-on-dark: rgb(255 255 255 / .2);
  --glow-on-dark: rgb(255 255 255 / .07);
  --dc-blurple: #5865f2;
  --dc-name: #f2f3f5;
  --dc-mention-bg: rgb(88 101 242 / .3);
  --dc-mention-ink: #c9cdfb;
}
@media (min-width: 40rem) { :root { --page-pad: var(--space-12); } }
@media (min-width: 60rem) { :root { --page-pad: calc(var(--space-16) + var(--space-4)); --section-pad: var(--space-16); } }
[data-theme="dark"] {
  --surface-1: #0b0b0e;
  --surface-3: #2a2a33;
  --surface-nav: rgb(30 30 36 / .92);
}
[data-theme="light"] {
  --surface-1: var(--cloud);
  --surface-3: var(--smoke);
  --surface-nav: rgb(255 255 255 / .92);
}
/* Gradient surfaces (hero, footer card) carry their own dark scope; muted text steps up to cloud for 7:1 on the gradient. */
.hero, .foot__card { --ink-muted: var(--cloud); color: var(--ink); }

/* Logo per theme: white lockups on dark grounds, black on light (design.md §2.4) */
[data-theme="dark"] .logo--light, [data-theme="light"] .logo--dark { display: none !important; }

/* Lenis (own rules: the vendor sheet blocks iframes for as long as smoothing is on) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3 { font-style: normal; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }
.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--action); color: var(--on-action); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--space-4); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type roles (tokens.json scale, one responsive step) ---------- */
.t-display { font-size: 44px; line-height: 48px; font-weight: 400; letter-spacing: -0.02em; }
.t-h1 { font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; }
@media (min-width: 40rem) {
  .t-display { font-size: 72px; line-height: 76px; }
  .t-h1 { font-size: 44px; line-height: 50px; }
}
.t-h2 { font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -0.01em; }
.t-h3 { font-size: 20px; line-height: 26px; font-weight: 600; }
.t-lead { font-size: 17px; line-height: 26px; }
.t-label { font-size: 14px; line-height: 20px; font-weight: 600; }
.t-eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.t-legal { font-size: 14px; line-height: 21px; font-weight: 400; }
.muted { color: var(--ink-muted); }
.accent-word { color: var(--accent-text); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--content-max) + 2 * var(--page-pad)); margin-inline: auto; padding-inline: var(--page-pad); }
.band { padding-block: var(--section-pad); scroll-margin-top: 96px; }
.band--l0 { background: var(--surface); }
.band--l1 { background: var(--surface-1); }
.band + .band { border-top: 1px solid var(--surface-1); }
.head { text-align: center; max-width: 46rem; margin: 0 auto var(--space-12); display: grid; gap: var(--space-4); }
.head p { color: var(--ink-muted); max-width: 60ch; margin-inline: auto; }
/* a page that opens on a .head (no hero) clears the absolute top bar */
.head--clear { padding-top: var(--space-12); }
.prose { max-width: var(--measure); display: grid; gap: var(--space-4); }
/* long URLs and emails break instead of widening the grid track (audit 13 Oct 2026: Terms clipped at 320-375) */
.prose, .doc { overflow-wrap: anywhere; }
.prose > *, .doc > *, .doc ul > *, .doc ol > * { min-width: 0; }
.closer { text-align: center; margin-top: var(--space-12); display: grid; justify-items: center; gap: var(--space-4); }

/* ---------- buttons (bundle.css base + page modifiers) ---------- */
.tta-btn { white-space: nowrap; transition: filter 150ms var(--ease-micro), border-color 150ms var(--ease-micro); }
.tta-btn--lg { padding: var(--space-4) var(--space-8); }
.tta-btn:not(.tta-btn--ghost):hover { filter: brightness(1.08); }
.tta-btn--ghost:hover { border-color: var(--accent); }
.tta-btn:active { filter: brightness(.95); }
.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; transition: text-decoration-color 150ms var(--ease-micro); white-space: nowrap; }
.link:hover { text-decoration-color: var(--ink); }
.prose .link, .t-legal .link, .doc .link { white-space: normal; }

/* ---------- nav v4 (13 Oct 2026, Rutger, after vetsocial.nl): top bar that scrolls away + bottom dock menu ---------- */
.topbar {
  position: absolute; top: var(--space-2); left: var(--space-2); right: var(--space-2); z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-4) 0; color: var(--ink);
}
@media (min-width: 48rem) { .topbar { top: var(--space-4); left: var(--space-4); right: var(--space-4); padding: var(--space-6) var(--space-6) 0; } }
.topbar__proof { justify-self: start; display: none; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; }
.topbar__proof svg { color: var(--ink-muted); }
@media (min-width: 64rem) { .topbar__proof { display: inline-flex; } }
.topbar__logo { grid-column: 2; display: flex; }
.topbar__logo img { height: 24px; width: auto; }
.topbar__mark { display: none; }
@media (max-width: 29.99rem) { .topbar__logo img:not(.topbar__mark) { display: none !important; } .topbar__mark { display: block; height: 22px; } }
@media (min-width: 48rem) { .topbar__logo img { height: 32px; } }
@media (max-width: 63.99rem) { .topbar { grid-template-columns: auto 1fr; gap: var(--space-2); } .topbar__logo { grid-column: 1; } }
@media (max-width: 47.99rem) { .topbar { padding: var(--space-4) var(--space-4) 0; } }
.topbar__actions { justify-self: end; display: flex; align-items: center; gap: var(--space-2); }
/* WhatsApp and Apply stay on screen while the rest of the top bar scrolls away (13 Oct 2026, Rutger);
   pinned at the bar's own offset (top/right = bar inset + bar padding) so nothing jumps on load */
.topbar { grid-template-rows: 44px; } /* keeps the logo centred on the pinned 44px buttons */
.topbar__actions { position: fixed; z-index: 45; top: calc(var(--space-2) + var(--space-4)); right: calc(var(--space-2) + var(--space-4)); }
@media (min-width: 48rem) { .topbar__actions { top: calc(var(--space-4) + var(--space-6)); right: calc(var(--space-4) + var(--space-6)); } }
/* WhatsApp green pill (Rutger, 13 Oct 2026: green like vetsocial; overrides the one-green-in-the-hero rule for this button) */
.topbar__wa { flex: none; width: 64px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-pill); color: var(--on-wa); background: var(--wa-green); transition: filter 150ms var(--ease-micro); }
.topbar__wa svg { width: 22px; height: 22px; }
.topbar__wa:hover { filter: brightness(1.06); }
/* CTA pill with three coach faces (topbar and footer) */
.cta-pill { display: inline-flex; align-items: center; gap: var(--space-3); height: 44px; padding: 0 var(--space-4) 0 6px; border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; background: var(--surface-nav); border: 1px solid var(--border-strong); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color 150ms var(--ease-micro); }
.cta-pill:hover { border-color: var(--ink-muted); }
.cta-pill:focus-visible, .topbar__wa:focus-visible, .topbar__proof:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.faces { display: flex; flex: none; }
.cta-pill svg { flex: none; }
.faces img { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); background: var(--surface-3); }
.faces img + img { margin-left: -10px; }
@media (max-width: 47.99rem) { .faces img:nth-child(n+2) { display: none; } .cta-pill { gap: var(--space-2); padding-right: var(--space-3); font-size: 14px; } }
@media (max-width: 22rem) { .cta-pill__more { display: none; } }
.nav__theme { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: border-color 150ms var(--ease-micro); }
.nav__theme:hover { border-color: var(--border-strong); }
.nav__theme:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.nav__moon { display: none; }
[data-theme="light"] .nav__sun { display: none; }
[data-theme="light"] .nav__moon { display: block; }

/* bottom dock: logo button + white Menu pill that opens into a card (clip-path from the pill, design.md §7 item 28) */
.dock {
  --pill: 236px; --card: min(25rem, calc(100vw - 2 * var(--space-4) - 60px)); --bar: 52px;
  position: fixed; z-index: 60; bottom: var(--space-4); left: 50%;
  display: flex; align-items: flex-end; gap: 8px;
  transform: translateX(calc((52px + 8px + var(--pill)) / -2));
  transition: transform 450ms var(--ease-enter);
}
.dock.is-open { transform: translateX(calc((52px + 8px + var(--card)) / -2)); }
/* audit 13 Oct 2026: the dock slides out of the way while the application form is on screen (site.js §10b);
   the WhatsApp/Apply pills stay pinned for the whole page */
.dock { transition-property: transform, translate, opacity; }
.dock { transition-duration: 450ms, 300ms, 200ms; transition-timing-function: var(--ease-enter); }
.dock.is-tucked { translate: 0 calc(100% + var(--space-8)); opacity: 0; }
.dock.is-tucked, .dock.is-tucked * { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .dock.is-tucked { translate: none; }
}
/* the closed card is invisible but still takes up space: only the logo circle and the visible pill/card catch clicks,
   so the hero coach panels behind the dock stay clickable */
.dock { pointer-events: none; }
.dock__mark, .dock__box { pointer-events: auto; }
.dock__mark { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--black); border: 1px solid var(--hairline-on-dark); }
.dock__mark img { width: 30px; height: auto; }
.dock__box {
  width: var(--card); background: var(--white); color: var(--black); border-radius: 26px; overflow: hidden;
  clip-path: inset(calc(100% - var(--bar)) calc(100% - var(--pill)) 0 0 round 26px);
  transition: clip-path 450ms var(--ease-enter);
}
.dock.is-open .dock__box { clip-path: inset(0 0 0 0 round 26px); }
.dock__panel { padding: var(--space-6) var(--space-6) var(--space-4); visibility: hidden; transition: visibility 0s 450ms; }
.dock.is-open .dock__panel { visibility: visible; transition: none; }
.dock__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dock__links a { display: block; font-size: 30px; line-height: 38px; font-weight: 600; letter-spacing: -0.02em; color: var(--black); text-decoration: none; }
.dock__links a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.dock__meta { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--hairline-on-light); display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); }
.dock__meta > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
.dock__meta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dock__meta a { color: var(--black); text-decoration: none; font-size: 14px; line-height: 20px; }
.dock__meta a:hover { text-decoration: underline; }
.dock__h { font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-on-light-muted); margin: 0 0 var(--space-2); }
.dock__theme .nav__theme { color: var(--black); border-color: var(--hairline-on-light); }
.dock__toggle { position: relative; display: flex; align-items: center; width: 100%; height: var(--bar); padding: 0 var(--space-6); border: 0; background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--black); cursor: pointer; }
.dock__toggle:focus-visible { outline: 2px solid var(--black); outline-offset: -6px; border-radius: 26px; }
.dock__icon { position: absolute; top: 50%; left: calc(var(--pill) - 44px); width: 20px; height: 12px; margin-top: -6px; transition: transform 450ms var(--ease-enter); }
.dock.is-open .dock__icon { transform: translateX(calc(var(--card) - var(--pill))); }
.dock__icon i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 300ms var(--ease-enter); }
.dock__icon i:first-child { top: 2px; }
.dock__icon i:last-child { bottom: 2px; }
.dock.is-open .dock__icon i:first-child { transform: translateY(3px) rotate(45deg); }
.dock.is-open .dock__icon i:last-child { transform: translateY(-3px) rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
  .dock.is-open .dock__links li { animation: dock-in 500ms var(--ease-enter) both; }
  .dock.is-open .dock__links li:nth-child(2) { animation-delay: 40ms; } .dock.is-open .dock__links li:nth-child(3) { animation-delay: 80ms; }
  .dock.is-open .dock__links li:nth-child(4) { animation-delay: 120ms; } .dock.is-open .dock__links li:nth-child(5) { animation-delay: 160ms; }
  .dock.is-open .dock__links li:nth-child(6) { animation-delay: 200ms; } .dock.is-open .dock__links li:nth-child(7) { animation-delay: 240ms; }
}
@keyframes dock-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .dock, .dock__box, .dock__icon, .dock__icon i { transition: none; } }
/* no JS: the menu stays a plain open card above the page bottom */
html:not(.js) .dock__box { clip-path: none; }
html:not(.js) .dock__panel { visibility: visible; }
html:not(.js) .dock { position: static; transform: none; margin: var(--space-6) auto; width: max-content; }
html:not(.js) .dock__toggle { display: none; }

/* ---------- 2 hero: gradient, display face, cylinder, marquee ---------- */
/* the hero is a rounded card inset from the page edge (after vetsocial.nl) */
.hero {
  position: relative; overflow: clip; background: var(--grad-brand); text-align: center;
  margin: var(--space-2) var(--space-2) 0; border-radius: 24px;
  min-height: calc(100svh - var(--space-2)); display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--space-16) + var(--space-12)); padding-bottom: 0;
}
@media (min-width: 48rem) { .hero { margin: var(--space-4) var(--space-4) 0; border-radius: 32px; min-height: calc(100svh - var(--space-4)); } }
.hero__copy { display: grid; gap: var(--space-6); justify-items: center; }
.t-hero { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
@media (max-width: 24.99rem) { .t-hero { font-size: 40px; } }
.t-hero {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(48px, 6.4vw, 100px); line-height: .92; letter-spacing: -0.005em; max-width: 20ch;
}
.t-hero .hl { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.t-hero .hl > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .t-hero .hl > span { animation: hl-rise 1100ms cubic-bezier(.16,1,.3,1) both; }
  .js .t-hero .hl + .hl > span { animation-delay: 120ms; }
}
@keyframes hl-rise { from { transform: translateY(105%); } }
.hero__sub { max-width: 60ch; color: var(--ink-muted); }
.hero__cta { display: grid; justify-items: center; gap: var(--space-4); }

.cyl { --pw: 172px; --ph: calc(var(--pw) * 5 / 3); margin-top: var(--space-12); }
@media (min-width: 48rem) { .cyl { --pw: 340px; } }
.cyl__stage { height: calc(var(--ph) * 1.2); display: grid; place-items: center; perspective: 2400px; }
/* static fallback: a fanned row of the first five panels */
.cyl__wrap { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.cyl__panel { flex: none; width: var(--pw); height: var(--ph); margin-inline: calc(var(--pw) * .04); position: relative; }
.cyl__panel:nth-child(n+6) { display: none; }
.cyl__panel:nth-child(1) { transform: rotate(-8deg) translateY(14px); z-index: 1; }
.cyl__panel:nth-child(2) { transform: rotate(-4deg) translateY(4px); z-index: 2; }
.cyl__panel:nth-child(3) { z-index: 3; }
.cyl__panel:nth-child(4) { transform: rotate(4deg) translateY(4px); z-index: 2; }
.cyl__panel:nth-child(5) { transform: rotate(8deg) translateY(14px); z-index: 1; }
/* 3D mode, set by motion.js */
.cyl--3d .cyl__wrap { display: block; position: relative; width: var(--pw); height: var(--ph); transform-style: preserve-3d; }
.cyl--3d .cyl__panel, .cyl--3d .cyl__panel:nth-child(n) { display: block; position: absolute; inset: 0; margin: 0; transform: none; z-index: auto; }
.cyl__card {
  display: block; position: relative; width: 100%; height: 100%; overflow: hidden; text-decoration: none; color: var(--ink);
  border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-1);
  -webkit-tap-highlight-color: transparent; user-select: none; backface-visibility: hidden;
}
.cyl__card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cyl__media { position: absolute; inset: 0; }
.cyl__media img, .cyl__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cyl__media video:not([src]) { display: none; }

/* silhouette: stand-in until a real 9:16 headshot exists */
.sil { position: absolute; inset: 0; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-muted); font-size: 48px; line-height: 1; font-weight: 600; }
@media (min-width: 48rem) { .cyl .sil { font-size: 88px; } }

/* marquee strip: static by default, CSS loop when JS is on and motion is allowed */
.marquee { margin-top: var(--space-8); border-top: 1px solid var(--border); display: flex; justify-content: center; overflow: hidden; }
.strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; flex: none; max-width: 100%; }
.strip li { padding: var(--space-4) var(--space-6); font-size: 14px; line-height: 20px; font-weight: 500; position: relative; }
.strip--dup { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .marquee { justify-content: flex-start; }
  .js .marquee .strip { flex-wrap: nowrap; max-width: none; animation: marquee 40s linear infinite; }
  .js .marquee .strip--dup { display: flex; }
  .js .marquee .strip li { white-space: nowrap; padding-inline: var(--space-8); }
  .js .marquee .strip li::after { content: ""; position: absolute; right: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-muted); transform: translate(50%, -50%); }
  .marquee:hover .strip { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- 3 VSL band ---------- */
.vsl { margin: 0 auto; max-width: 960px; }
.vsl__frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden;
  background: var(--surface-raised); border: 1px solid var(--border);
}
.vsl__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.55) brightness(.8); }
.vsl__frame iframe { border: 0; }
.vsl__embed { z-index: 1; }
.vsl figcaption { margin-top: var(--space-3); color: var(--ink-muted); font-size: 14px; line-height: 20px; text-align: center; }

/* ---------- 2 metrics: ledger row, not tiles ---------- */
.metrics { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.metrics li { padding: var(--space-6) var(--space-4) var(--space-6) 0; display: grid; grid-template-rows: auto 1fr; gap: var(--space-2); border-bottom: 1px solid var(--border); }
.metrics li:nth-child(odd) { padding-right: var(--space-6); }
.metrics li:nth-child(even) { padding-left: var(--space-6); border-left: 1px solid var(--border); }
.metrics .fig { align-self: end; font-family: var(--font-sans); font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--accent-text); margin-left: -0.05em; }
@media (max-width: 29.99rem) {
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .metrics li, .metrics li:nth-child(odd), .metrics li:nth-child(even) { padding: var(--space-6) 0; border-left: 0; }
}
@media (min-width: 60rem) {
  .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
  .metrics li, .metrics li:nth-child(odd), .metrics li:nth-child(even) { padding: var(--space-8) var(--space-6); border-bottom: 0; border-left: 1px solid var(--border); }
  .metrics li:first-child { border-left: 0; padding-left: 0; }
  .metrics .fig { font-size: clamp(34px, 3.6vw, 64px); }
}
.metrics-note { margin: var(--space-8) auto 0; max-width: var(--measure); text-align: center; }
/* brands we own: logo tiles; 3D stand-up on scroll and pointer tilt come from motion.js (design.md §7 item 14) */
.brands { margin-top: var(--space-16); display: grid; gap: var(--space-6); justify-items: center; text-align: center; }
.brands__grid { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); perspective: 1400px; }
@media (min-width: 48rem) { .brands__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* TTA Capital wraps the three brands: one gradient card, fund line on top, brand tiles inside (21st.dev Logo Cloud with CTA Card, ported) */
.brands__fund { --ink-muted: var(--cloud); width: 100%; display: grid; gap: var(--space-8); padding: var(--space-8) var(--space-4) var(--space-4); background: var(--grad-brand); border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--ink); }
@media (min-width: 48rem) { .brands__fund { padding: var(--space-12) var(--space-6) var(--space-6); } }
.brands__fund-head { display: grid; gap: var(--space-3); justify-items: center; }
.brands__fund-head .t-eyebrow { color: var(--cloud); }
.brands__fund-logo { width: auto; height: 44px; max-width: 82%; }
.brands__fund .brand-tile__face { background: var(--tile-fill-dark); border-color: var(--hairline-on-dark-soft); }
.brands__fund .brand-tile__link:hover { border-color: var(--hairline-on-dark-strong); }
/* the card is always dark, so it keeps the white lockups in light theme too */
[data-theme="light"] .brands__fund .logo--light { display: none !important; }
[data-theme="light"] .brands__fund .logo--dark { display: block !important; }
.brand-tile { transform-style: preserve-3d; }
.brand-tile__face {
  position: relative; display: grid; place-items: center; gap: var(--space-3); min-height: 168px; padding: var(--space-8) var(--space-6);
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
  transform-style: preserve-3d;
}
/* a soft sheen that follows the tilt; transform and opacity only */
.brand-tile__face::after { content: ""; position: absolute; inset: -40%; background: radial-gradient(closest-side, var(--glow-on-dark), transparent 70%); transform: translate3d(var(--sx, 0), var(--sy, 0), 0); opacity: var(--so, 0); pointer-events: none; }
.brand-tile__link { color: inherit; text-decoration: none; transition: border-color 150ms cubic-bezier(.4,0,.2,1); }
.brand-tile__link:hover { border-color: var(--border-strong); }
.brand-tile__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.results-cta { margin-top: var(--space-12); display: flex; justify-content: center; }
.brand-tile__logo { width: auto; height: 34px; max-width: 82%; object-fit: contain; transform: translateZ(40px); }
.brand-tile:nth-child(2) .brand-tile__logo { height: 52px; }
.brand-tile:nth-child(3) .brand-tile__logo { height: 30px; }
.brand-tile__note { color: var(--cloud); font-size: 15px; line-height: 22px; }

/* ---------- 5 video band ---------- */
/* hidden until BAND_VIDEO has a source (13 Oct 2026, Rutger) */
.vband:has(.vband__video[data-src=""]) { display: none; }
.vband { position: relative; min-height: 80svh; display: grid; place-items: center; overflow: hidden; background: var(--surface-1); color: var(--ink); }
.vband__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vband__video:not([src]):not([poster]) { display: none; }
.vband__scrim { position: absolute; inset: 0; background: var(--scrim); }

/* ---------- 6 who: sticky title + two-column ledger ---------- */
.sticky { display: grid; gap: var(--space-8); }
.sticky__head { text-align: center; }
.sticky__body { min-width: 0; }
@media (min-width: 48rem) {
  .sticky { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-12); align-items: start; }
  .sticky__head { position: sticky; top: 120px; text-align: left; }
  .sticky .fit { grid-template-columns: minmax(0, 1fr); }
  .sticky .fit-close { text-align: left; margin-left: 0; }
}

.fit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 48rem) { .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fit__col { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-8) var(--space-6); }
.fit__col h3 { margin-bottom: var(--space-4); }
.fit__col ul { list-style: none; padding: 0; }
.fit__col li { padding: var(--space-3) 0 var(--space-3) var(--space-6); border-top: 1px solid var(--border); position: relative; font-size: 15px; line-height: 22px; }
.fit__col li::before { content: ""; position: absolute; left: 0; top: 17px; width: 12px; height: 12px; background: var(--ink); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat;
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fit__no li::before { background: var(--ink-muted); --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fit__no { background: transparent; }
.fit-close { margin: var(--space-8) auto 0; max-width: var(--measure); text-align: center; color: var(--ink-muted); }

/* ---------- 4 problem: prose + three-column text row ---------- */
.problem { display: grid; gap: var(--space-12); justify-items: center; }
.problem .prose { margin-inline: auto; }
.problem .prose p { font-size: 17px; line-height: 28px; }
.triad { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); width: 100%; border-top: 1px solid var(--border); padding-top: var(--space-8); }
@media (min-width: 52rem) { .triad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 40rem) and (max-width: 63.99rem) { .triad--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .triad--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.problem__pull { font-size: 24px !important; line-height: 32px !important; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; padding-block: var(--space-2); }
.triad strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: var(--space-2); color: var(--ink); }
.triad p { color: var(--ink-muted); }
/* problem v3.3: short lead, cost line, four-card stack (21st.dev "Stacking Cards" pattern, ported to GSAP; design.md §7 item 18) */
.problem__lead, .problem__cost, .pstack, .problem__out { max-width: 40rem !important; width: 100%; }
.problem__lead { text-align: left; }
.problem__cost { max-width: var(--measure); display: grid; gap: var(--space-2); text-align: left; width: 100%; }
.problem__cost p:last-child { color: var(--ink-muted); }
.problem__out { max-width: var(--measure); width: 100%; font-size: 17px; line-height: 28px; font-weight: 600; color: var(--ink); }
.pstack { list-style: none; padding: 0; margin: 0; width: 100%; max-width: var(--measure); display: grid; gap: var(--space-4); }
.pstack__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-1, 4px); align-items: baseline; align-content: center; transform-origin: 50% 0; }
.pstack__num { grid-row: span 2; font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.pstack__card strong { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); }
.pstack__card p { color: var(--ink-muted); }
@media (prefers-reduced-motion: no-preference) {
  .js .pstack { gap: var(--space-6); padding-bottom: var(--space-8); }
  .js .pstack__card { position: sticky; top: calc(96px + var(--i) * 14px); min-height: 9.5rem; }
}
/* mobile card stacks: the problem-stack fold on the other card lists (design.md §7 item 22) */
@media (prefers-reduced-motion: no-preference) and (max-width: 47.99rem) {
  .js [data-stack] > * { position: sticky; top: calc(96px + var(--i, 0) * 14px); transform-origin: 50% 0; }
  .js [data-stack] > :nth-child(2) { --i: 1; }
  .js [data-stack] > :nth-child(3) { --i: 2; }
  .js [data-stack] > :nth-child(4) { --i: 3; }
  .js [data-stack] > :nth-child(5) { --i: 4; }
  .js [data-stack] > :nth-child(6) { --i: 5; }
  .js [data-stack] { padding-bottom: var(--space-8); }
  .js .fit[data-stack] .fit__no { background: var(--surface); }
  .js .brands__grid[data-stack] { perspective: none; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
  .js .pstack { gap: var(--space-8); }
  .js .pstack__card { top: calc(120px + var(--i) * 16px); padding: var(--space-8); }
}

/* ---------- 5 included: definition ledger (two columns, hairlines) ---------- */
.ledger { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-12); border-top: 1px solid var(--border); }
@media (min-width: 52rem) { .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ledger__item { padding: var(--space-6) 0; border-bottom: 1px solid var(--border); display: grid; gap: var(--space-2); align-content: start; }
.ledger__item h3 { font-size: 17px; line-height: 24px; font-weight: 600; }
.ledger__item p { color: var(--ink-muted); }
.track-note { margin: var(--space-8) auto 0; max-width: var(--measure); }
/* the offer under What is included (13 Oct 2026, Rutger): weekly 1-on-1 + 10 live sessions a week */
.offer { margin-top: var(--space-12); display: grid; gap: var(--space-4); justify-items: center; }
.offer__list { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 52rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 40rem) { .offer__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.offer__item { background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); display: grid; gap: var(--space-3); align-content: start; }
.offer__big { font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.offer__item p { font-size: 17px; line-height: 26px; color: var(--ink); max-width: 26ch; }
/* offer stage (13 Oct 2026, Rutger; design.md §7 item 30): motion.js turns What you get into a full-screen scroll scene per
   bento tile and offer item, with a Higgsfield loop behind a scrim of at least .6. The stage is decorative (aria-hidden); the bento
   and offer stay in the page for screen readers. Without JS, GSAP or under reduced motion the stage is never built. */
.ostage { position: relative; height: calc(var(--n) * 100svh); margin-top: var(--space-12); }
.ostage__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--black); color: var(--white); }
.ostage__scene { position: absolute; inset: 0; display: grid; align-items: end; }
.ostage__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ostage__scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--scrim-deep) 0%, var(--scrim) 55%, var(--scrim) 100%); }
.ostage__copy { position: relative; width: 100%; max-width: calc(var(--content-max) + 2 * var(--page-pad)); margin-inline: auto; padding: 0 var(--page-pad) clamp(150px, 22vh, 210px); display: grid; gap: var(--space-4); justify-items: start; }
.ostage__tag { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-on-dark-muted); }
.ostage__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(44px, 7vw, 124px); line-height: .9; max-width: 17ch; text-wrap: balance; }
.ostage__big { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(120px, 22vw, 300px); line-height: .82; }
.ostage__copy p { font-size: 18px; line-height: 28px; max-width: 34ch; color: var(--ink-on-dark-body); }
.ostage__hud { position: absolute; left: 0; right: 0; bottom: 0; max-width: calc(var(--content-max) + 2 * var(--page-pad)); margin-inline: auto; padding: 0 var(--page-pad) clamp(100px, 14vh, 130px); display: flex; align-items: center; gap: var(--space-4); font-size: 13px; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--ink-on-dark-muted); }
.ostage__rail { flex: 1; height: 1px; background: var(--rail-on-dark); overflow: hidden; }
.ostage__rail i { display: block; height: 100%; background: var(--white); transform-origin: 0 50%; transform: scaleX(0); }
#included.is-staged { padding-bottom: 0; }
.is-staged .bento, .is-staged .offer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* what is included v3.3: bento (21st.dev "bento grid 01" layout, hover lift from "Bento Grid"; design.md §7 item 19) */
.bento { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 40rem) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento__tile--lead { grid-column: span 2; } }
@media (min-width: 64rem) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento__tile--lead { grid-column: span 2; grid-row: span 2; }
  .bento__tile--wide, .bento__tile--half { grid-column: span 2; }
  .bento__tile--full { grid-column: 1 / -1; }
}
.bento__tile { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-2); align-content: end; min-height: 10rem; transition: transform 150ms cubic-bezier(.4,0,.2,1), border-color 150ms cubic-bezier(.4,0,.2,1); }
.bento__tag { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: auto; padding-bottom: var(--space-6); }
.bento__tile h3 { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); }
.bento__tile p { color: var(--ink-muted); }
.bento__tile--lead h3 { font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; }
@media (min-width: 64rem) { .bento__tile--lead h3 { font-size: 44px; } .bento__tile--lead { padding: var(--space-8); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .bento__tile:hover { transform: translateY(-4px); border-color: var(--border-strong); } }

/* ---------- 9 coaches: twelve cards ---------- */
.people { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8) var(--space-6); }
@media (min-width: 25rem) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-4); } }
@media (min-width: 60rem) { .people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); } }
@media (min-width: 75rem) { .people { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* coaches in one row (Rutger, 13 Oct 2026): swipeable without motion; with motion the row slides sideways as the
   section scrolls past and the cards bob up and down in alternation (motion.js, design.md §7 item 16) */
.people-row { margin-inline: calc(var(--page-pad) * -1); padding: var(--space-12) var(--page-pad) var(--space-16); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.people-row::-webkit-scrollbar { display: none; }
.people--row { display: flex; gap: var(--space-4); width: max-content; grid-template-columns: none; }
/* explicit width as well as flex-basis: Safari sized the max-content row from the 720px photos (10,368px instead of
   ~2,900px), which threw the coach slide off screen (13 Oct 2026, ?debug=coaches) */
.people--row .person { flex: 0 0 168px; width: 168px; scroll-snap-align: start; scroll-margin-inline: var(--page-pad); gap: var(--space-2); }
@media (min-width: 48rem) { .people--row .person { flex-basis: 220px; width: 220px; } .people--row { gap: var(--space-6); } }
.people--row .person:nth-child(even) { transform: translateY(var(--space-12)); }
.people--row .person__spec { display: none; }
.people--row .person > p:last-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 20px; }
.people--row .person .t-h3 { font-size: 17px; line-height: 24px; }
.people--row .chip { justify-self: start; }
/* scroll slide (motion.js): the row stops being a scroller, the carousel controls hide */
.people-row.is-scrub { overflow: visible; scroll-snap-type: none; cursor: grab; touch-action: pan-y; }
.people-row.is-scrub.is-dragging { cursor: grabbing; user-select: none; }
.people-row.is-scrub + .carousel-nav { display: none; }
.people-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; border-radius: var(--radius-md); }
@media (hover: hover) and (pointer: fine) { .people-row { cursor: grab; } }
.people-row.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.people-row.is-dragging img { pointer-events: none; }
/* coach carousel controls (21st.dev "Snap Carousel"; design.md §7 item 16 v2) */
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: calc(var(--space-4) * -1); }
.carousel-nav[hidden] { display: none; }
.carousel-nav__btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--ink); cursor: pointer; transition: border-color 150ms var(--ease-micro), opacity 150ms var(--ease-micro); }
.carousel-nav__btn:hover:not(:disabled) { border-color: var(--ink-muted); }
.carousel-nav__btn:disabled { opacity: .35; cursor: default; }
.carousel-nav__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.carousel-nav__dots { display: flex; gap: 6px; align-items: center; }
.carousel-nav__dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--border-strong); transition: width 200ms var(--ease-micro), background-color 200ms var(--ease-micro); }
.carousel-nav__dots span.is-on { width: 20px; background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .carousel-nav__dots span, .carousel-nav__btn { transition: none; } }
#coaches { overflow: clip; }
.person { display: grid; gap: var(--space-3); align-content: start; scroll-margin-top: 120px; min-width: 0; }
.chip { justify-self: start; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-3); border-radius: var(--radius-sm); padding: 4px 10px; overflow-wrap: anywhere; }
.chip--todo { background: transparent; border: 1px dashed var(--border-strong); letter-spacing: 0; text-transform: none; }
/* coach media box: photo (or silhouette) with an optional clip on top; motion.js shows the clip from the start */
.person__media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface-3); }
.person__media .sil--card { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; }
.person__media img, .person__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; border: 0; border-radius: 0; aspect-ratio: auto; }
.coach-clip:not([src]) { display: none; }
.cyl__media video, .person__media video { opacity: 0; transition: opacity 600ms cubic-bezier(.4,0,.2,1); }
.is-clip video { opacity: 1; }
/* the 9:16 clip has the coach name on top and captions below: show the whole frame, letterboxed */
.cyl__media video, .person__media video { object-fit: contain; object-position: 50% 50%; background: var(--black); }
.person img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); }
.sil--card { position: relative; inset: auto; aspect-ratio: 4 / 5; border-radius: var(--radius-md); border: 1px solid var(--border); font-size: 64px; }
.person p { color: var(--ink-muted); }
.person__spec { line-height: 16px; }
.person__ig { justify-self: start; font-size: 14px; line-height: 20px; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; }
.person__ig:hover { color: var(--ink); }
.person__clients { font-size: 14px; line-height: 20px; color: var(--ink); }
.todo--eyebrow { font-size: 12px; }
.person .todo { overflow-wrap: anywhere; }
.risk { margin-top: var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); background: var(--surface); color: var(--ink-muted); max-width: none; }

/* ---------- 7 proof ---------- */
.proofs { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 52rem) { .proofs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.proof { background: var(--surface-raised); min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; }
.proof .fig { font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.proof__mech { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.proof__disc { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.todo { color: var(--ink-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 2px 6px; font-size: 14px; }
/* student interviews: click-to-play YouTube, thumbnail until clicked */
.interviews { margin-top: var(--space-12); display: grid; gap: var(--space-4); }
.interviews__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 48rem) { .interviews__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.interview { display: grid; gap: var(--space-2); align-content: start; }
.yt { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-1); }
.yt img, .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.yt img { filter: saturate(.55) brightness(.8); transition: filter 150ms cubic-bezier(.4,0,.2,1); }
.yt:hover img, .yt:focus-visible img { filter: saturate(.8) brightness(.9); }
.yt:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.yt__play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--scrim); border: 1px solid var(--border-strong); }
.yt__play::after { content: ""; position: absolute; left: 22px; top: 18px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--white); }
/* From the Discord: approved results from data/results.json, rendered by build.mjs */
.wall { margin-bottom: var(--space-12); display: grid; gap: var(--space-4); }
.wall__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 40rem) { .wall__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .wall__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wall__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); }
.wall__head .muted { margin-top: var(--space-2); }
.wall__pause { padding: var(--space-2) var(--space-4); }
.wall__list--dup { display: none; }
/* moving row: only with JS, motion allowed and four or more results; otherwise the static grid above */
@media (prefers-reduced-motion: no-preference) {
  .js .wall--motion .wall__track {
    display: flex; overflow: hidden; margin-inline: calc(var(--page-pad) * -1);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .js .wall--motion .wall__list { display: flex; flex: none; align-items: flex-start; gap: var(--space-4); padding-right: var(--space-4); animation: wall-loop var(--wall-dur, 60s) linear infinite; }
  .js .wall--motion .wall__list--dup { display: flex; }
  .js .wall--motion .wall__item { flex: none; width: min(420px, 86vw); }
  .wall--motion .wall__track:hover .wall__list,
  .wall--motion .wall__track:focus-within .wall__list,
  .js .wall--motion.wall--paused .wall__list { animation-play-state: paused; }
}
@keyframes wall-loop { to { transform: translateX(-100%); } }
/* Discord-style card, Discord's own dark palette (not the site tokens) so it reads as a Discord message */
.dc {
  --dc-bg: #313338; --dc-line: #3f4147; --dc-text: #dbdee1; --dc-muted: #949ba4; --dc-chip: #2b2d31;
  background: var(--dc-bg); border: 1px solid var(--dc-line); border-radius: var(--radius-md); color: var(--dc-text);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3); display: grid; grid-template-columns: 40px minmax(0, 1fr);
  column-gap: var(--space-3); align-content: start; min-width: 0;
}
.dc__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--dc-blurple); color: var(--white); font-weight: 600; font-size: 17px; }
.dc__body { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.dc__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); line-height: 22px; }
.dc__name { font-weight: 600; font-size: 16px; color: var(--dc-name); }
.dc__time { font-size: 12px; color: var(--dc-muted); }
.dc .dc__text { color: var(--dc-text); font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.dc__text strong { font-weight: 600; color: var(--dc-name); }
.dc__mention { background: var(--dc-mention-bg); color: var(--dc-mention-ink); border-radius: 3px; padding: 0 2px; font-weight: 500; }
.dc__emoji { width: 22px; height: 22px; vertical-align: -5px; display: inline-block; }
.dc__shot { width: 100%; max-height: 300px; object-fit: cover; object-position: top; border-radius: 8px; margin-top: 4px; background: var(--dc-chip); }
.dc__reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.dc__react .dc__emoji { width: 18px; height: 18px; vertical-align: 0; }
.dc__react { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 8px; background: var(--dc-chip); border: 1px solid var(--dc-line); font-size: 14px; line-height: 20px; color: var(--dc-text); }
.wall__disc { margin-top: var(--space-2); }

/* ---------- 10 results: stacked deck (motion.js adds .deck--on) ---------- */
.t-face { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(48px, 7vw, 96px); line-height: .92; letter-spacing: 0; }
.deck--on .proofs { grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-inline: auto; padding-bottom: var(--space-6); }
.deck--on .proof { grid-area: 1 / 1; cursor: grab; touch-action: pan-y; user-select: none; }
.deck--on .proof:active { cursor: grabbing; }
.deck__nav { display: flex; justify-content: center; align-items: center; gap: var(--space-6); margin-top: var(--space-6); }
.deck__nav[hidden] { display: none; }
.deck__count { color: var(--ink-muted); font-variant-numeric: tabular-nums; min-width: 9ch; text-align: center; }

/* ---------- 11 how: vertical numbered timeline ---------- */
.steps { list-style: none; padding: 0; max-width: 46rem; margin-inline: auto; counter-reset: step; }
.step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-6); padding-bottom: var(--space-8); position: relative; }
.step::before { counter-increment: step; content: "0" counter(step); grid-row: 1 / span 2; font-size: 14px; font-weight: 600; color: var(--ink-muted); padding-top: 3px; font-variant-numeric: tabular-nums; }
.step::after { content: ""; position: absolute; left: 10px; top: 32px; bottom: 8px; width: 1px; background: var(--border); }
.step:last-child::after { display: none; }
.step { z-index: 1; }
.steps.has-rail .step::after { display: none; }
.step::before { position: relative; z-index: 2; background: var(--surface-1); align-self: start; padding-bottom: 4px; }
.step__dot { position: absolute; left: 6px; top: 28px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); z-index: 1; }
.step h3 { margin-bottom: var(--space-2); }
.step p { color: var(--ink-muted); }
/* coach faces next to a step title, same stack as the Apply pill (13 Oct 2026, Rutger): Kimi on the call, Luuk and Ozkar on onboarding */
.step__title { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); row-gap: var(--space-2); }
.step .faces img { border-color: var(--surface-1); }
.step .faces img:nth-child(n+2) { display: block; }
.after { max-width: 46rem; margin: var(--space-8) auto 0; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-8) var(--space-6); background: var(--surface); display: grid; gap: var(--space-3); }

/* ---------- 9 costs ---------- */
/* FAQ: native details, answer fades and rises in, chevron turns (21st.dev "Accordion"; design.md §7 item 27) */
.faq { max-width: 46rem; margin-inline: auto; border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-6) 0; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted); transform: translateY(-3px) rotate(45deg); transition: transform 200ms var(--ease-micro); }
.faq__item[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq__item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.faq__a { padding: 0 var(--space-8) var(--space-6) 0; color: var(--ink-muted); max-width: var(--measure); }
@media (prefers-reduced-motion: no-preference) { .faq__item[open] .faq__a { animation: panel-in 200ms var(--ease-micro); } }
@media (prefers-reduced-motion: reduce) { .faq__item summary::after { transition: none; } }
.costs-intro { max-width: var(--measure); margin: 0 auto var(--space-12); font-size: 17px; line-height: 26px; }
.costs { display: grid; gap: var(--space-4); max-width: 52rem; margin-inline: auto; }
.cost { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-8) var(--space-6); display: grid; gap: var(--space-2); }
@media (min-width: 48rem) { .cost { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--space-8); } }
.cost h3 { font-size: 20px; line-height: 26px; font-weight: 600; }
.cost p { color: var(--ink-muted); }

/* ---------- 10 apply ---------- */
.apply-panel { max-width: 720px; margin-inline: auto; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; min-height: 640px; position: relative; }
@media (min-width: 40rem) { .apply-panel { min-height: 560px; } }
.apply-panel iframe { display: block; width: 100%; height: 640px; border: 0; }
@media (min-width: 40rem) { .apply-panel iframe { height: 560px; } }
.apply-pending { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--space-8); color: var(--ink-muted); }
.apply-micro { text-align: center; margin-top: var(--space-4); color: var(--ink-muted); }

/* ---------- 14 footer: rounded gradient card + typeset wordmark ---------- */
.foot { padding: var(--space-12) var(--space-2) var(--space-2); background: var(--surface); color: var(--ink-muted); }
@media (min-width: 48rem) { .foot { padding: var(--space-16) var(--space-4) var(--space-4); } }
.foot__card {
  position: relative; overflow: hidden; container-type: inline-size; color: var(--ink);
  background: var(--grad-brand); border-radius: 24px; padding: var(--space-12) var(--space-6) 0;
}
@media (min-width: 48rem) { .foot__card { border-radius: 32px; padding: var(--space-16) clamp(var(--space-8), 8vw, 10rem) 0; } }
.foot__top { display: grid; gap: var(--space-12); }
@media (min-width: 60rem) { .foot__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.foot__brand { display: grid; gap: var(--space-4); justify-items: start; align-content: start; }
.foot__brand > img { height: 36px; width: auto; }
.foot__brand p { max-width: 26ch; color: var(--ink-muted); font-size: 16px; line-height: 26px; }
.foot__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
.foot__cols > :nth-child(3) { grid-column: 1 / -1; }
@media (min-width: 40rem) { .foot__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.5fr); } .foot__cols > :nth-child(3) { grid-column: auto; } }
.foot__h { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink-muted); margin: 0 0 var(--space-4); }
.foot__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.foot__links a { color: var(--ink); text-decoration: none; font-size: 15px; line-height: 22px; }
.foot__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__risk { margin-top: var(--space-12); max-width: var(--measure); color: var(--ink-muted); }
.foot__base { margin-top: var(--space-4); font-size: 14px; color: var(--ink-muted); }
.foot__word { display: block; width: 100%; height: auto; margin: var(--space-12) 0 -9%; opacity: .95; }

/* ---------- thank-you + content pages ---------- */
.page-head { padding-top: calc(var(--space-16) + var(--space-12)); text-align: center; display: grid; gap: var(--space-4); justify-items: center; }
.page-head p { max-width: 60ch; color: var(--ink-muted); }
.page-head--spaced { margin-bottom: var(--space-12); }
.cal-panel { max-width: 960px; margin: var(--space-12) auto 0; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); min-height: 700px; overflow: hidden; position: relative; }
.cal-panel iframe { display: block; width: 100%; height: 760px; border: 0; }
.prep { max-width: 46rem; margin: var(--space-12) auto 0; display: grid; gap: var(--space-4); }
.prep ol { padding-left: var(--space-6); display: grid; gap: var(--space-3); }
.prep li { padding-left: var(--space-2); }
.prep .vsl { width: 100%; } /* auto margins inside the .prep grid would shrink the video frame to nothing */
.doc { max-width: var(--measure); margin-inline: auto; display: grid; gap: var(--space-4); font-size: 15px; line-height: 24px; }
.doc h2 { font-size: 20px; line-height: 26px; font-weight: 600; margin-top: var(--space-8); }
.doc h3 { font-size: 17px; line-height: 24px; font-weight: 600; margin-top: var(--space-4); }
.doc ul, .doc ol { padding-left: var(--space-6); display: grid; gap: var(--space-2); }
.doc p, .doc li { color: var(--ink); }
.doc .muted { color: var(--ink-muted); }

/* ---------- entrance (design.md §7: entrance only, script-added, reduced-motion off) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 400ms var(--ease-enter), transform 400ms var(--ease-enter); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .tta-btn, .link, .nav__links a { transition: none; }
}

/* ---------- v3.1 scroll motion helpers (motion.js) ---------- */
.steps { position: relative; }
.steps__rail { position: absolute; left: 10px; top: 32px; bottom: 40px; width: 1px; background: var(--ink); transform: scaleY(0); transform-origin: 50% 0; pointer-events: none; }
.scroll-bar { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; background: var(--ink); opacity: .6; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---------- booked: What to prepare, five steps left to right (design.md §7 item 18; track and node pattern from 21st.dev "8bit Timeline Horizontal") ---------- */
.prep--wide { max-width: 72rem; }
.prep .prepline { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-8); position: relative; }
.prep .prepline__step { position: relative; z-index: 1; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-2); padding-left: 0; }
.prepline__node { grid-column: 1; grid-row: 1 / span 3; align-self: start; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.prepline__img { grid-column: 2; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-raised); }
.prepline__title { grid-column: 2; font-size: 17px; line-height: 24px; font-weight: 600; margin-top: var(--space-2); }
.prepline__step p { grid-column: 2; color: var(--ink-muted); font-size: 15px; line-height: 24px; }
/* the track (::before) and its drawn line (::after) run through the node centres: down on phones, across from 960px */
.prepline::before, .prepline::after { content: ""; position: absolute; left: 20px; top: 20px; bottom: 20px; width: 1px; pointer-events: none; }
.prepline::before { background: var(--border); }
.prepline::after { background: var(--ink); transform-origin: 50% 0; }
@media (min-width: 60rem) {
  .prep .prepline { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); }
  .prep .prepline__step { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .prepline__node, .prepline__img, .prepline__title, .prepline__step p { grid-column: 1; grid-row: auto; }
  .prepline__node { order: -1; margin-bottom: var(--space-4); }
  .prepline::before, .prepline::after { left: 20px; right: calc((100% - 4 * var(--space-6)) / 5 - 20px); bottom: auto; width: auto; height: 1px; }
  .prepline::after { transform-origin: 0 50%; }
}
/* armed by the inline script only (no reduced motion, IntersectionObserver present): the line draws left to right, each step arrives as the line reaches it */
.prepline--armed::after { transform: scaleY(0); transition: transform 1800ms cubic-bezier(.65,0,.35,1); }
@media (min-width: 60rem) { .prepline--armed::after { transform: scaleX(0); } }
.prepline--armed .prepline__step { opacity: 0; transform: translateX(-32px); transition: opacity 600ms var(--ease-enter), transform 900ms var(--ease-enter); transition-delay: calc(var(--i) * 340ms + 100ms); }
.prepline--armed .prepline__img { clip-path: inset(0 100% 0 0 round var(--radius-md)); transition: clip-path 900ms cubic-bezier(.65,0,.35,1); transition-delay: calc(var(--i) * 340ms + 200ms); }
.prepline--armed .prepline__node { transition: background-color 300ms var(--ease-micro), color 300ms var(--ease-micro), border-color 300ms var(--ease-micro); transition-delay: calc(var(--i) * 340ms + 380ms); }
.prepline--armed.is-on::after { transform: none; }
.prepline--armed.is-on .prepline__step { opacity: 1; transform: none; }
.prepline--armed.is-on .prepline__img { clip-path: inset(0 0 0 0 round var(--radius-md)); }
.prepline--armed.is-on .prepline__node { background: var(--ink); color: var(--surface-1); border-color: var(--ink); }