/* ============================================================
   JST MVE — design system
   Strict monochrome. Black rooms, white rooms, one hairline.
   Display: Agrandir Grand Black. Body: Archivo. Spec/HUD: Space Mono.
   ============================================================ */

/* ---------------------------------------------------------------
   THE BRAND FACE — Agrandir Grand Black (Pangram Pangram).
   Drop the licensed webfont in at the path below and it takes over
   everywhere, automatically. Until then the browser skips this rule
   (the file 404s) and falls through to the stand-in underneath.
   --------------------------------------------------------------- */
@font-face {
  font-family: 'Agrandir Grand';
  src: url('../../_shared/fonts/AgrandirGrand-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

/* The stand-in: Archivo's variable font pushed to its widest cut and
   its heaviest weight. Same genre as Agrandir Grand Black, so the
   display sizes below are tuned once and hold for both. */
@font-face {
  font-family: 'Archivo Expanded';
  src: url('../../_shared/fonts/ArchivoVariable.woff2') format('woff2-variations');
  font-weight: 900;
  font-stretch: 125%;
  font-display: swap;
}
@font-face { font-family: 'Archivo'; src: url('../../_shared/fonts/Archivo-400.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../../_shared/fonts/SpaceMono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../../_shared/fonts/SpaceMono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../../_shared/fonts/SpaceMono-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --ink: #0a0a0b;          /* the black room */
  --jet: #131315;          /* elevated black */
  --white: #ffffff;        /* the white room */
  --paper: #f1f1ef;        /* elevated white */
  --grey: #93939a;         /* supporting text on black */
  --slate: #5c5c63;        /* supporting text on white */
  --line-w: rgba(255,255,255,.16);
  --line-b: rgba(10,10,11,.16);
  --display: 'Agrandir Grand', 'Archivo Expanded', 'Arial Black', sans-serif;
  --body: 'Archivo', 'Helvetica Neue', sans-serif;
  --mono: 'Space Mono', 'Courier New', monospace;
  --ease-slam: cubic-bezier(.16, 1, .3, 1);
  --ease-hard: cubic-bezier(.83, 0, .17, 1);
  --pad: clamp(20px, 4.5vw, 64px);
  --topbar-h: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
html.has-lerp { scroll-behavior: auto; }
body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--body);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--white); color: var(--ink); }
.room--white ::selection, .room--white::selection { background: var(--ink); color: var(--white); }

/* ---------- type scale ---------- */
.d1 { font-family: var(--display); font-size: clamp(38px, 7.4vw, 112px); line-height: .92; letter-spacing: -.018em; text-transform: uppercase; font-weight: 900; }
.d2 { font-family: var(--display); font-size: clamp(28px, 4.4vw, 66px); line-height: .95; letter-spacing: -.016em; text-transform: uppercase; font-weight: 900; }
.d3 { font-family: var(--display); font-size: clamp(21px, 2.6vw, 37px); line-height: 1; letter-spacing: -.012em; text-transform: uppercase; font-weight: 900; }
.d4 { font-family: var(--display); font-size: clamp(16px, 1.6vw, 23px); line-height: 1.08; letter-spacing: -.004em; text-transform: uppercase; font-weight: 900; }
.spec { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
.spec--dim { color: var(--grey); }
.room--white .spec--dim { color: var(--slate); }
.lede { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; font-weight: 500; }
.muted { color: var(--grey); }
.room--white .muted { color: var(--slate); }

/* outlined display word — the "ghost rep" */
.ghost { color: transparent; -webkit-text-stroke: 2px var(--stroke, var(--white)); }
.room--black, .room--flush { --stroke: var(--white); }
.room--white { --stroke: var(--ink); }
@media (max-width: 700px) { .ghost { -webkit-text-stroke-width: 1.3px; } .band .bit em { -webkit-text-stroke-width: 1.1px; } }

/* ---------- rooms (sections) ---------- */
.room { position: relative; padding: clamp(84px, 11vh, 150px) var(--pad); }
.room--black { background: var(--ink); color: var(--white); }
.room--white { background: var(--white); color: var(--ink); }
.room--flush { padding: 0; }
.wrap { max-width: 1280px; margin: 0 auto; position: relative; }
.wrap--wide { max-width: 1440px; }

/* chapter plate: mono chapter tag pinned at top of each room */
.plate { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(36px, 5vh, 64px); }
.plate::after { content: ''; height: 1px; flex: 1; background: var(--line-w); }
.room--white .plate::after { background: var(--line-b); }
.plate .spec { white-space: nowrap; }

/* ============================================================
   MVE KIT — motion patterns
   ============================================================ */

/* [1] SLAM — display lines rise out of a hard clip, letter-staggered */
.slam .sl-line { display: block; overflow: hidden; }
.slam .sl-inner { display: inline-block; transform: translateY(115%) rotate(.4deg); }
.on .slam .sl-inner, .slam.on .sl-inner { animation: slam .9s var(--ease-slam) forwards; animation-delay: var(--sd, 0s); }
@keyframes slam { to { transform: translateY(0) rotate(0); } }

/* [2] VOWEL DRIVE — vowels arrive late into the stripped word */
.vd .vd-c { display: inline-block; }
.vd .vd-v { display: inline-block; opacity: 0; transform: translateY(.28em) scaleY(.4); transform-origin: bottom; }
.vd.on .vd-v { animation: vowel .55s var(--ease-slam) forwards; animation-delay: var(--vd, 0s); }
@keyframes vowel { to { opacity: 1; transform: none; } }

/* [3] RISE — standard content reveal */
.rise { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease-slam), transform .8s var(--ease-slam); transition-delay: var(--rd, 0s); }
.on .rise, .rise.on { opacity: 1; transform: none; }

/* [4] FRAME — the brand box draws itself around what matters */
.frame { position: relative; }
.frame svg.frame-draw { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.frame svg.frame-draw rect { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.frame.on svg.frame-draw rect { animation: draw 1.1s var(--ease-hard) forwards; animation-delay: var(--fd, .15s); }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* [5] BAND — velocity-reactive marquee */
.band { overflow: clip; white-space: nowrap; user-select: none; padding: 18px 0; border-top: 1px solid var(--line-w); border-bottom: 1px solid var(--line-w); }
.room--white .band, .band--onwhite { border-color: var(--line-b); }
.band-track { display: inline-flex; gap: 0; will-change: transform; }
.band .bit { font-family: var(--display); text-transform: uppercase; font-weight: 900; font-size: clamp(18px, 2.3vw, 34px); line-height: 1; letter-spacing: -.01em; padding: 0 .4em; }
.band .bit em { font-style: normal; color: transparent; -webkit-text-stroke: 1.6px var(--stroke, var(--white)); }
.band .dot { align-self: center; width: 9px; height: 9px; background: currentColor; margin: 0 .5em; flex: none; }

/* [6] WIPE — inversion seam between rooms */
.seam { position: relative; height: clamp(70px, 10vw, 130px); overflow: clip; }
.seam svg { position: absolute; inset: -1px 0; width: 100%; height: calc(100% + 2px); display: block; }

/* [7] PULSE — energy trace that draws with scroll */
.pulse-wrap { position: relative; height: 120px; margin: 0 auto; }
.pulse-wrap svg { width: 100%; height: 100%; overflow: visible; }
.pulse-wrap path { fill: none; stroke: currentColor; stroke-width: 2; }

/* [8] KEN — slow pan on stills */
.ken { overflow: clip; position: relative; }
.ken > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }

/* [9] REEL — portrait video cards, tap for sound */
.reel { position: relative; aspect-ratio: 9 / 16; overflow: clip; background: var(--jet); cursor: pointer; }
.reel video, .reel img.reel-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel .reel-chip { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--white); padding: 9px 13px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; transition: background .25s, color .25s; }
.reel .reel-chip::before { content: ''; width: 7px; height: 7px; background: currentColor; }
.reel:hover .reel-chip { background: var(--white); color: var(--ink); }
.reel.playing .reel-chip::before { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.reel .reel-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--white); z-index: 4; }
.reel-tag { position: absolute; top: 12px; left: 12px; z-index: 3; background: var(--white); color: var(--ink); padding: 7px 11px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* [10] cursor */
.cursor { position: fixed; z-index: 9999; top: 0; left: 0; width: 34px; height: 34px; border: 1.5px solid var(--white); pointer-events: none; transform: translate(-50%, -50%); mix-blend-mode: difference; transition: width .25s, height .25s, background .25s; display: none; }
.cursor.big { width: 68px; height: 68px; background: rgba(255,255,255,.95); }
@media (pointer: fine) { .cursor { display: block; } }

/* ============================================================
   HUD — the MVE meter
   ============================================================ */
.hud-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200; background: transparent; }
.hud-progress i { display: block; height: 100%; background: var(--white); transform-origin: left; transform: scaleX(0); mix-blend-mode: difference; }
.hud { position: fixed; left: 18px; bottom: 16px; z-index: 1100; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; mix-blend-mode: difference; color: #fff; display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.hud b { font-weight: 700; }
@media (max-width: 760px) { .hud { display: none; } }

/* journey rail */
.rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 1100; display: flex; flex-direction: column; gap: 14px; mix-blend-mode: difference; }
.rail a { display: block; width: 22px; height: 2px; background: #fff; opacity: .35; transition: opacity .3s, width .3s; }
.rail a.act { opacity: 1; width: 34px; }
@media (max-width: 1000px) { .rail { display: none; } }

/* ============================================================
   chrome — topbar, buttons, footer
   ============================================================ */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); height: var(--topbar-h); transition: background .3s, border-color .3s; background: color-mix(in srgb, var(--ink) 72%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
.topbar.show { background: color-mix(in srgb, var(--ink) 88%, transparent); backdrop-filter: blur(12px); border-bottom-color: var(--line-w); }
.topbar .tb-logo { height: 34px; width: auto; }
.topbar nav { display: flex; gap: 26px; }
.topbar nav a { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; opacity: .75; transition: opacity .25s; }
.topbar nav a:hover { opacity: 1; }
@media (max-width: 900px) {
  .topbar nav { display: none; }
  /* phones: the bar is position: sticky, not fixed. Android Chrome mis-clips
     fixed top bars while its URL bar collapses on downward scrolls (it
     painted as a half-height sliver); sticky elements live in the page flow
     and repaint correctly. The negative margin keeps layout identical. */
  .topbar { position: sticky; top: 0; margin-bottom: calc(-1 * var(--topbar-h)); transform: none !important; transition: none; background: rgba(10, 10, 11, .97); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--line-w); }
  .topbar.show { background: rgba(10, 10, 11, .97); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .topbar .btn { mix-blend-mode: normal; color: var(--white); }
  .topbar .btn:hover { color: var(--ink); }
}

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding: 18px 30px; border: 2px solid currentColor; overflow: clip; transition: color .28s var(--ease-hard); z-index: 0; white-space: nowrap; }
.btn::before { content: ''; position: absolute; inset: 0; background: currentColor; transform: scaleY(0); transform-origin: bottom; transition: transform .28s var(--ease-hard); z-index: -1; }
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.btn .bi { transition: transform .28s var(--ease-hard); }
.btn:hover .bi { transform: translateX(5px); }
.btn--solid-w { background: var(--white); color: var(--ink) !important; border-color: var(--white); }
.btn--solid-w:hover { color: var(--white) !important; }
.btn--solid-w::before { background: var(--ink); }
.btn--solid-b { background: var(--ink); color: var(--white) !important; border-color: var(--ink); }
.btn--solid-b:hover { color: var(--ink) !important; }
.btn--solid-b::before { background: var(--white); }
.btn--onblack { color: var(--white); }
.btn--onblack:hover { color: var(--ink); }
.btn--onwhite { color: var(--ink); }
.btn--onwhite:hover { color: var(--white); }
.btn--sm { padding: 12px 20px; font-size: 10px; }

/* topbar CTA stays readable over both rooms */
.topbar .btn { mix-blend-mode: difference; color: #fff; }
.topbar .btn:hover { color: #000; }

.footer { background: var(--ink); color: var(--white); padding: clamp(70px, 9vh, 120px) var(--pad) 40px; border-top: 1px solid var(--line-w); }
.footer .f-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; max-width: 1280px; margin: 0 auto; }
.footer .f-logo { width: 150px; }
.footer h5 { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--grey); margin-bottom: 18px; }
.footer a { text-decoration: none; }
.footer li { list-style: none; margin-bottom: 10px; }
.footer .f-base { max-width: 1280px; margin: 64px auto 0; padding-top: 22px; border-top: 1px solid var(--line-w); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--grey); font-size: 13px; }
@media (max-width: 860px) { .footer .f-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ============================================================
   reduced motion — the site stands still, fully readable
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slam .sl-inner, .vd .vd-v { transform: none !important; opacity: 1 !important; animation: none !important; }
  .rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  .frame svg.frame-draw rect { stroke-dashoffset: 0 !important; animation: none !important; }
  .ken > img { transform: none !important; }
  .band-track { animation: none !important; transform: none !important; }
  .cursor { display: none !important; }
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* ============================================================
   MVE KIT VOL.2 — THE BOX EDITION
   ============================================================ */

/* [11] VBOX — the travelling viewfinder. The logo's square, alive. */
.vbox { position: fixed; top: 0; left: 0; z-index: 1250; pointer-events: none; border: 2.5px solid #fff; mix-blend-mode: difference; opacity: 0; will-change: transform, width, height; }
.vbox .vbox-label { position: absolute; top: -24px; left: -3px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.vbox::before, .vbox::after { content: ''; position: absolute; width: 7px; height: 7px; background: #fff; }
.vbox::before { top: -5px; left: -5px; }
.vbox::after { bottom: -5px; right: -5px; }
@media (max-width: 1000px), (pointer: coarse) { .vbox { display: none; } }

/* [12] PIN — generic pinned scrub scene */
.pin { position: relative; }
.pin-stage { position: sticky; top: 0; height: 100svh; overflow: clip; display: flex; flex-direction: column; justify-content: center; }

/* [13] RIPPLE — square pulse where you touch the site */
.sq-ripple { position: fixed; z-index: 1400; width: 44px; height: 44px; border: 2px solid #fff; mix-blend-mode: difference; pointer-events: none; transform: translate(-50%, -50%) scale(.2); animation: sqr .55s var(--ease-slam) forwards; }
@keyframes sqr { to { transform: translate(-50%, -50%) scale(1.7); opacity: 0; } }

/* [14] TILT — media leans toward the pointer */
.tilt-wrap { perspective: 900px; }
.reel { transform-style: preserve-3d; will-change: transform; }

/* [15] FIELD — interactive square-field canvas */
.field-canvas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* square cursor upgrade */
.cursor { border-radius: 0; }

/* velocity-stretch targets */
.vel-type { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .vbox, .sq-ripple, .field-canvas { display: none !important; }
  .pin { height: auto !important; }
  .pin-stage { position: static; height: auto; }
}

/* ============================================================
   VOL.2.1 — triad slam states, touch focus, stats, fair questions
   ============================================================ */

/* [16] TRIAD V2 — each state slams in as a beat, not a fade */
html.js .tri { transition: opacity .25s; }
html.js .tri.act { opacity: 1; pointer-events: auto; }
.tri-ghost { position: absolute; z-index: 0; right: -2%; top: 50%; transform: translateY(-50%); font-family: var(--display); font-weight: 900; font-size: clamp(200px, 52svh, 560px); line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(10,10,11,.07); pointer-events: none; user-select: none; }
.tri > *:not(.tri-ghost) { position: relative; z-index: 1; }
.tri.act .tri-letter { animation: triLetter .6s var(--ease-slam) both; }
.tri.act .tri-body h3 { animation: triWord .55s .07s var(--ease-slam) both; }
.tri.act .tri-body .tri-sub { animation: triBit .5s .16s var(--ease-slam) both; }
.tri.act .tri-body p.muted { animation: triBit .5s .24s var(--ease-slam) both; }
@keyframes triLetter { from { opacity: 0; transform: translateY(22%) scaleY(1.25); } }
@keyframes triWord { from { opacity: 0; transform: translateX(-28px); } }
@keyframes triBit { from { opacity: 0; transform: translateY(14px); } }
/* mobile: same beats fire as each chapter scrolls into view */
@media (max-width: 760px) {
  html.js .tri:not(.on) .tri-letter, html.js .tri:not(.on) .tri-body h3, html.js .tri:not(.on) .tri-body .tri-sub, html.js .tri:not(.on) .tri-body p.muted { opacity: 0; }
  html.js .tri.on .tri-letter { animation: triLetter .6s var(--ease-slam) both; }
  html.js .tri.on .tri-body h3 { animation: triWord .55s .07s var(--ease-slam) both; }
  html.js .tri.on .tri-body .tri-sub { animation: triBit .5s .16s var(--ease-slam) both; }
  html.js .tri.on .tri-body p.muted { animation: triBit .5s .24s var(--ease-slam) both; }
  .tri-ghost { font-size: 38vw; right: -6%; -webkit-text-stroke-color: rgba(10,10,11,.06); }
}

/* [17] FOCUS — on touch, the section you're on wakes up by itself */
.reel .reel-poster, .reel video { transition: transform .7s var(--ease-slam); }
.reel:hover .reel-poster, .reel:hover video, .reel.focus .reel-poster, .reel.focus video { transform: scale(1.05); }
.reel.focus .reel-chip { background: var(--white); color: var(--ink); }
.svc.focus { background: var(--ink); color: var(--white); }
.svc.focus .muted { color: var(--grey); }
.svc.focus .s-ix { color: var(--grey); }
.proof-item img.still.focus { filter: grayscale(0) contrast(1.02); }
.inc { transition: background .35s var(--ease-hard); }
.inc:hover, .inc.focus { background: var(--jet); }
.step .st-n { transition: color .35s; }
.step:hover .st-n, .step.focus .st-n { color: var(--ink); -webkit-text-stroke-color: transparent; }

/* [18] STAT STRIP — the numbers that matter, counted up */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); margin-top: clamp(48px, 7vh, 84px); }
.stat { padding: 26px 20px 6px 0; border-right: 1px solid var(--line-b); margin-right: 20px; }
.stat:last-child { border-right: 0; }
.stat .st-v { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3.7vw, 56px); line-height: 1; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 4px; }
.stat .st-v em { font-style: normal; font-size: .55em; }
.stat .st-l { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); margin-top: 8px; }
@media (max-width: 760px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } .stat { margin-bottom: 20px; } .stat:nth-child(2n) { border-right: 0; } }

/* [19] FAIR QUESTIONS — the FAQ, no drama */
.faq-list { max-width: 860px; margin-top: clamp(36px, 5vh, 56px); border-top: 1px solid var(--line-w); }
.room--white .faq-list { border-color: var(--line-b); }
.faq { border-bottom: 1px solid var(--line-w); }
.room--white .faq { border-color: var(--line-b); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-weight: 600; font-size: clamp(16px, 1.4vw, 19px); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .fq-box { flex: none; width: 30px; height: 30px; border: 2px solid currentColor; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; transition: transform .35s var(--ease-slam), background .3s, color .3s; }
.faq[open] summary .fq-box { transform: rotate(45deg); background: var(--white); color: var(--ink); }
.room--white .faq[open] summary .fq-box { background: var(--ink); color: var(--white); }
.faq .fq-a { padding: 0 0 24px; max-width: 640px; color: var(--grey); animation: faqIn .4s var(--ease-slam); }
.room--white .faq .fq-a { color: var(--slate); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-8px); } }

/* [20] FIT — this sounds like me / honestly, maybe not */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); margin-top: clamp(36px, 5vh, 56px); }
.fit-col { border-top: 2px solid var(--ink); padding-top: 22px; }
.fit-col h3 { margin-bottom: 18px; }
.fit-col li { list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; padding: 10px 0; }
.fit-col .fi { font-family: var(--mono); font-weight: 700; font-size: 12px; }
.fit-col--no { opacity: .82; }
@media (max-width: 760px) { .fit-grid { grid-template-columns: 1fr; } }

/* small screens: buttons may wrap, never overflow */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; padding: 16px 22px; }
}

/* hero reassurance note */
.hero-note { margin-top: 18px; font-size: 13.5px; color: var(--grey); max-width: 430px; }
.rev-line { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; }
.rev-line .stars { letter-spacing: .18em; }

/* [20b] THE HONEST WORD — lines arrive one by one; affirm the left, cross off the right */
html.js .fit-col li { opacity: 0; }
html.js .fit-col li.on { animation: fitIn .55s var(--ease-slam) both; animation-delay: calc(var(--i, 0) * 90ms); }
html.js .fit-col--no li.on { animation-name: fitInR; }
@keyframes fitIn { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes fitInR { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.fit-col li { transition: background .3s var(--ease-hard), color .3s var(--ease-hard), padding .3s var(--ease-hard); }
.fit-col .fi { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 2px solid currentColor; font-size: 12px; transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease-slam); }
html.js .fit-col li.on .fi { animation: fiPop .45s var(--ease-slam) both; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }
@keyframes fiPop { 0% { opacity: 0; transform: scale(.3) rotate(-100deg); } 60% { transform: scale(1.18) rotate(8deg); } 100% { opacity: 1; transform: none; } }
/* affirm: sounds-like-me lines invert like a highlighter */
.fit-col--yes li:hover, .fit-col--yes li.focus { background: var(--ink); color: var(--white); padding-left: 14px; padding-right: 14px; }
.fit-col--yes li:hover .fi, .fit-col--yes li.focus .fi { background: var(--white); color: var(--ink); border-color: var(--white); }
/* cross off: honestly-not lines get struck through */
.fit-col--no .ft { width: fit-content; background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0% 2px; transition: background-size .5s var(--ease-hard); }
.fit-col--no li:hover .ft, .fit-col--no li.focus .ft { background-size: 100% 2px; }
.fit-col--no li:hover .fi, .fit-col--no li.focus .fi { transform: rotate(90deg) scale(1.12); background: var(--ink); color: var(--white); border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  html.js .fit-col li, html.js .fit-col li .fi { opacity: 1 !important; animation: none !important; transform: none !important; }
}