/* =============================================================================
   launchfulcrum.com v5 — "the stage". Every value comes from brand/tokens.css:
   no hex, no raw font-size, no raw radius, no alpha colour function in this file.
   Grounds are declared per section ([data-ground]); the page root is ink because
   the first thing on it is a stage, and paper is declared where the page is read.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--body);
  font-family: var(--f-sans); font-size: var(--t-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
[data-ground] { background: var(--ground); color: var(--body); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: var(--r-sm); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

:root {
  --nav-h: calc(var(--s6) + var(--s5));
  --shell: 1160px;
  --bd: var(--s3);                       /* the page-scale band depth: every cut on this page is built from it */
  --m-film: calc(var(--m-slow) * 2);
}
.wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--s5); }

/* ---------- buttons ---------- */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control-h); padding: 0 var(--s5); border: var(--hairline) solid transparent; border-radius: var(--r-pill);
  font-size: var(--t-small); font-weight: var(--w-label); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--m-fast) var(--ease), background var(--m-fast) var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-gold { background: var(--accent); color: var(--on-accent); }
.btn-lg { min-height: calc(var(--control-h) + var(--s3)); padding: 0 calc(var(--s5) + var(--s2)); font-size: var(--t-body); }
/* a slow sweep of light across the one gold control */
.btn-gold::after {
  content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, var(--surface) 50%, transparent 62%);
  transform: translateX(-120%); animation: sweep calc(var(--m-slow) * 20) var(--ease) infinite;
}
[data-ground="paper"] .btn-gold::after { opacity: .5; }
@keyframes sweep { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: calc(var(--nav-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--s5), calc((100vw - var(--shell)) / 2 + var(--s5))) 0;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: var(--hairline) solid transparent;
  transition: background var(--m-slow) var(--ease), border-color var(--m-slow) var(--ease);
}
.nav.solid { background: var(--ground); border-bottom-color: var(--rule); }
.lockup { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--ink); }
.lockup-mark { width: calc(var(--s5) + var(--s1)); height: calc(var(--s5) + var(--s1)); }
.lockup-word { font-family: var(--f-display); font-size: var(--t-head); font-variation-settings: 'opsz' 8, 'wght' 700; letter-spacing: var(--track-wordmark); line-height: 1; }
.lockup-f { color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: var(--s4); }
.nav-link { font-size: var(--t-small); color: var(--body); text-decoration: none; padding: var(--s3) var(--s1); }
.nav-link:hover { color: var(--ink); }
.nav-cta { display: none; }   /* takes no room until the film is behind the reader */
.nav.past .nav-cta { display: inline-flex; animation: navIn var(--m-slow) var(--ease) both; }
@keyframes navIn { from { opacity: 0; transform: translateY(calc(var(--s1) * -1)); } }

/* =============================================================================
   THE FILM
   ========================================================================== */
.runway { height: 460vh; }
.stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: radial-gradient(ellipse 70% 80% at 71% 46%, var(--surface) 0%, var(--ground) 52%, var(--sunk) 100%);
}
/* the picture gives way to the copy column: whatever drifts left falls off into the ground, so type never sits on the subject */
#scene {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 24%, black 50%); mask-image: linear-gradient(to right, transparent 24%, black 50%);
}
.stage-fallback { display: none; }
.no-gl #scene { display: none; }
.no-gl .stage-fallback { display: block; position: absolute; right: 14%; top: 50%; width: min(34vw, 420px); transform: translateY(-50%); }
.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* the copy has ONE home: a composed column with a slate, a headline, a body and an instrument
   readout under a rule. It never sits on the subject. */
.slot {
  position: absolute; top: 0; bottom: 0; left: max(var(--s5), calc((100vw - var(--shell)) / 2 + var(--s5)));
  width: min(40vw, 500px); padding-top: var(--nav-h);
  display: flex; flex-direction: column; justify-content: center;
}
.acts { display: grid; }
.act {
  grid-area: 1 / 1; align-self: end; opacity: 0; transform: translateY(var(--s4)); pointer-events: none;
  transition: opacity var(--m-film) var(--ease), transform var(--m-film) var(--ease);
}
.stage[data-act="0"] .act[data-i="0"], .stage[data-act="1"] .act[data-i="1"], .stage[data-act="2"] .act[data-i="2"] { opacity: 1; transform: none; pointer-events: auto; }
.slate {
  display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5);
  font-size: var(--t-eyebrow); font-weight: var(--w-label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted);
}
.slate-n { font-family: var(--f-mono); font-weight: var(--w-medium); color: var(--accent); letter-spacing: 0; }
.slate-rule { width: var(--s6); height: var(--hairline); background: var(--rule); }
.act-h {
  font-family: var(--f-display); font-weight: var(--w-medium); font-size: var(--t-display); line-height: var(--lh-flat);
  letter-spacing: -.012em; color: var(--ink); text-wrap: balance;
}
.act-lede { margin-top: var(--s4); font-family: var(--f-display); font-style: italic; font-size: var(--t-title); line-height: var(--lh-tight); color: var(--accent); text-wrap: balance; }
.act-body { margin-top: var(--s5); max-width: 40ch; color: var(--body); }
.act-cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s5); }
.act-note { font-size: var(--t-small); color: var(--muted); }

.gauge {
  margin-top: var(--s6); padding-top: var(--s4); border-top: var(--hairline) solid var(--rule);
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--s4); row-gap: var(--s4);
}
.gauge-cell { display: flex; flex-direction: column; gap: var(--s1); }
.gauge-n { font-family: var(--f-mono); font-size: var(--t-title); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; transition: color var(--m-slow) var(--ease); }
.gauge-l { font-size: var(--t-eyebrow); font-weight: var(--w-label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.gauge-cell[data-k="lost"] .gauge-n { color: var(--bad); }
.stage[data-fixed="1"] .gauge-cell[data-k="lost"] .gauge-n { color: var(--muted); }
.stage[data-fixed="1"] .gauge-cell[data-k="through"] .gauge-n { color: var(--accent); }
.gauge-bars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.gauge-bars i { display: block; height: calc(var(--hairline) * 2); background: linear-gradient(to right, var(--accent) calc(var(--f, 0) * 100%), var(--rule) 0); }

.cue {
  position: absolute; left: 71%; bottom: var(--s5); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  font-size: var(--t-eyebrow); font-weight: var(--w-label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted);
  transition: opacity var(--m-film) var(--ease);
}
.cue i { width: var(--hairline); height: var(--s6); background: linear-gradient(var(--accent), transparent); animation: cue calc(var(--m-slow) * 8) var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.stage[data-moved="1"] .cue { opacity: 0; }

/* =============================================================================
   SECTIONS
   ========================================================================== */
.sec { padding-block: calc(var(--s6) * 3); }
.sec-head { max-width: 760px; }
.eyebrow { font-size: var(--t-eyebrow); font-weight: var(--w-label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.sec-h { margin-top: var(--s4); font-family: var(--f-display); font-weight: var(--w-medium); font-size: var(--t-title); line-height: var(--lh-tight); letter-spacing: -.008em; color: var(--ink); text-wrap: balance; }
.sec-body { margin-top: var(--s5); max-width: 60ch; }

.rvl { opacity: 0; transform: translateY(var(--s5)); transition: opacity var(--m-film) var(--ease), transform var(--m-film) var(--ease); }
.rvl.on { opacity: 1; transform: none; }

/* ---------- the cut: the mark's own line, used as the seam between grounds ---------- */
.cut { position: relative; height: calc(var(--bd) * 5); --c: 68%; }
.cut-flip { --c: 32%; }
.cut-top, .cut-band { position: absolute; inset: 0; }
/* the upper ground overlaps the section above by one hairline, so no seam of the lower ground can show between them */
.cut-top {
  top: calc(var(--hairline) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(var(--bd) * 1.5 + var(--hairline)), calc(var(--c) + var(--bd) / 2) calc(var(--bd) * 1.5 + var(--hairline)),
                     calc(var(--c) - var(--bd) / 2) calc(var(--bd) * 2.5 + var(--hairline)), 0 calc(var(--bd) * 2.5 + var(--hairline)));
}
.cut-band {
  background: var(--accent);
  clip-path: polygon(0 calc(var(--bd) * 2.5), calc(var(--c) - var(--bd) / 2) calc(var(--bd) * 2.5), calc(var(--c) + var(--bd) / 2) calc(var(--bd) * 1.5), 100% calc(var(--bd) * 1.5),
                     100% calc(var(--bd) * 2.5), calc(var(--c) + var(--bd) / 2) calc(var(--bd) * 2.5), calc(var(--c) - var(--bd) / 2) calc(var(--bd) * 3.5), 0 calc(var(--bd) * 3.5));
}

/* ---------- what we build: the cockpit ---------- */
.rig { position: relative; margin-top: calc(var(--s6) * 1.5); perspective: 1800px; }
.rig::before {   /* a pool of light under the instrument, so it sits on something */
  content: ""; position: absolute; inset: calc(var(--s6) * -2) calc(var(--s6) * -1); pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 40%, var(--surface) 0%, transparent 70%);
}
.cockpit {
  --k: 0; position: relative; border: var(--hairline) solid var(--rule); border-radius: var(--r-md); background: var(--sunk); overflow: hidden;
  transform-origin: 50% 0; transform: rotateX(calc(var(--k) * 14deg)) scale(calc(1 - var(--k) * .06)); will-change: transform;
  box-shadow: var(--e-modal);
}
.beam {
  position: absolute; inset: 0; border-radius: inherit; border: var(--hairline) solid transparent; pointer-events: none; z-index: 3;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(black, black); mask: linear-gradient(transparent, transparent), linear-gradient(black, black);
  -webkit-mask-clip: padding-box, border-box; mask-clip: padding-box, border-box; -webkit-mask-composite: source-in; mask-composite: intersect;
}
.beam i {
  position: absolute; width: calc(var(--s6) * 5); aspect-ratio: 1; offset-path: rect(0 auto auto 0 round var(--r-md)); offset-anchor: 90% 50%;
  background: linear-gradient(to left, var(--accent), transparent); animation: beam calc(var(--m-slow) * 34) linear infinite;
}
@keyframes beam { to { offset-distance: 100%; } }
.ck-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s4); border-bottom: var(--hairline) solid var(--rule); background: var(--surface); }
.ck-url { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); }
.ck-sample { font-size: var(--t-micro); color: var(--muted); border: var(--hairline) solid var(--rule); border-radius: var(--r-pill); padding: var(--s1) var(--s3); }
.ck-body { display: grid; grid-template-columns: 184px minmax(0, 1fr) 232px; min-height: 500px; }
.ck-rail { border-right: var(--hairline) solid var(--rule); padding: var(--s5) var(--s3); }
.ck-brand { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3) var(--s5); font-size: var(--t-small); font-weight: var(--w-label); color: var(--ink); }
.ck-brand i { width: var(--s5); height: var(--s5); border-radius: var(--r-pill); border: var(--hairline) dashed var(--muted); }
.ck-rail li { padding: var(--s2) var(--s3); border-radius: var(--r-sm); font-size: var(--t-small); color: var(--muted); }
.ck-rail li.on { background: var(--selected); color: var(--ink); box-shadow: inset calc(var(--hairline) * 2) 0 0 var(--ink); }
.ck-main { padding: var(--s4); min-width: 0; }
.ck-goal { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); border: var(--hairline) solid var(--rule); border-radius: var(--r-md); background: var(--surface); font-size: var(--t-small); }
.ck-money { white-space: nowrap; color: var(--muted); }
.ck-money b { font-family: var(--f-mono); font-size: var(--t-head); font-weight: var(--w-medium); color: var(--ink); font-variant-numeric: tabular-nums; }
.ck-money em { font-style: normal; }
.ck-track { flex: 1; min-width: var(--s6); height: var(--s1); border-radius: var(--r-pill); background: var(--rule); overflow: hidden; }
.ck-track i { display: block; height: 100%; width: 40%; border-radius: inherit; background: var(--ink); transition: width calc(var(--m-slow) * 4) var(--ease); }
.ck-chip { white-space: nowrap; font-size: var(--t-micro); color: var(--body); border: var(--hairline) solid var(--rule); border-radius: var(--r-pill); padding: var(--s1) var(--s3); }
.ck-chip b { color: var(--ink); }
.ck-chip.hot b { color: var(--attention); }
.ck-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.ck-col h4 { display: flex; justify-content: space-between; padding: 0 var(--s1) var(--s3); font-size: var(--t-eyebrow); font-weight: var(--w-label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.ck-col h4 span { font-family: var(--f-mono); letter-spacing: 0; }
.ck-cards { display: grid; gap: var(--s2); align-content: start; }
.ck-card { padding: var(--s3); border: var(--hairline) solid var(--rule); border-radius: var(--r-md); background: var(--surface); animation: cardIn var(--m-film) var(--ease) both; }
.ck-card.out { animation: cardOut var(--m-slow) var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(calc(var(--s3) * -1)) scale(.97); } }
@keyframes cardOut { to { opacity: 0; transform: translateX(var(--s4)) scale(.97); } }
.ck-name { font-size: var(--t-small); font-weight: var(--w-medium); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-meta { font-size: var(--t-micro); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s2); }
.ck-val { font-family: var(--f-mono); font-size: var(--t-small); color: var(--body); font-variant-numeric: tabular-nums; }
.ck-temp { font-size: var(--t-micro); border-radius: var(--r-pill); padding: 0 var(--s2); border: var(--hairline) solid currentColor; line-height: 1.6; }
.ck-temp.hot { color: var(--attention); } .ck-temp.warm { color: var(--info); } .ck-temp.cold { color: var(--muted); } .ck-temp.won { color: var(--good); }
.ck-auto { display: flex; align-items: center; gap: var(--s1); margin-top: var(--s2); font-size: var(--t-micro); color: var(--good); }
.ck-auto::before { content: ""; width: var(--s1); height: var(--s1); border-radius: var(--r-pill); background: currentColor; }
.ck-side { border-left: var(--hairline) solid var(--rule); padding: var(--s5) var(--s4); display: flex; flex-direction: column; }
.ck-side h4 { font-size: var(--t-eyebrow); font-weight: var(--w-label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); padding-bottom: var(--s3); }
.ck-side li { padding: var(--s3) 0; border-top: var(--hairline) solid var(--rule); font-size: var(--t-micro); color: var(--body); line-height: var(--lh-head); }
.ck-side li b { display: block; font-size: var(--t-small); color: var(--ink); font-weight: var(--w-medium); }
.ck-side li em { font-style: normal; color: var(--muted); }
.ck-toast { margin-top: auto; display: flex; align-items: center; gap: var(--s2); padding: var(--s3); border: var(--hairline) solid var(--rule); border-radius: var(--r-md); background: var(--surface); font-size: var(--t-micro); color: var(--ink); opacity: 0; transform: translateY(var(--s2)); transition: opacity var(--m-slow) var(--ease), transform var(--m-slow) var(--ease); }
.ck-toast.on { opacity: 1; transform: none; }
.ck-toast i { flex: none; width: var(--s2); height: var(--s2); border-radius: var(--r-pill); background: var(--good); }

.calls { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); margin-top: calc(var(--s6) * 1.5); }
.calls li { border-top: var(--hairline) solid var(--rule); padding-top: var(--s4); }
.calls-n { font-family: var(--f-mono); font-size: var(--t-small); color: var(--accent); }
.calls h3 { margin-top: var(--s2); font-family: var(--f-display); font-weight: var(--w-medium); font-size: var(--t-head); line-height: var(--lh-head); color: var(--ink); }
.calls p { margin-top: var(--s2); font-size: var(--t-small); color: var(--body); }

/* ---------- how it runs: four runs, three ramps ---------- */
.stairs { position: relative; margin-top: calc(var(--s6) * 2); --draw: 0; }
.stairs-line { position: absolute; left: 0; top: calc(var(--s4) * -1); width: 100%; height: calc(var(--s5) * 4); overflow: visible; }
.stairs-line path { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw)); }
.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2.4%; align-items: start; }
.stagecard { margin-top: calc((3 - var(--i)) * var(--s5)); padding: var(--s5) var(--s4) 0 0; opacity: 0; transform: translateY(var(--s4)); transition: opacity var(--m-film) var(--ease), transform var(--m-film) var(--ease); transition-delay: calc(var(--i) * var(--m-step) * 4); }
.stairs.on .stagecard { opacity: 1; transform: none; }
.stage-n { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-eyebrow); }
.stagecard h3 { margin-top: var(--s2); font-family: var(--f-display); font-weight: var(--w-medium); font-size: var(--t-title); line-height: var(--lh-tight); color: var(--ink); }
.stage-k { margin-top: var(--s3); font-weight: var(--w-medium); color: var(--ink); }
.stagecard p:last-child { margin-top: var(--s2); font-size: var(--t-small); color: var(--body); }

/* ---------- proof ---------- */
.proof { background: var(--sunk); border-block: var(--hairline) solid var(--rule); padding-block: calc(var(--s6) * 1.5); }
.proof-in { display: grid; grid-template-columns: 184px 1fr; gap: var(--s5); align-items: baseline; }
.proof-line { font-family: var(--f-display); font-size: var(--t-title); line-height: var(--lh-tight); color: var(--ink); max-width: 30ch; text-wrap: balance; }
.proof-num { color: var(--accent); font-style: italic; }

/* ---------- the spec sheet ---------- */
.sheet { margin-top: var(--s6); counter-reset: row; border-bottom: var(--hairline) solid var(--rule); }
.sheet-row { counter-increment: row; display: grid; grid-template-columns: 64px 280px 1fr; gap: var(--s5); align-items: baseline; padding-block: var(--s5); border-top: var(--hairline) solid var(--rule); }
.sheet-row::before { content: counter(row, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--t-small); color: var(--accent); }
.sheet dt { font-family: var(--f-mono); font-size: var(--t-small); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sheet dd { font-family: var(--f-display); font-size: var(--t-head); line-height: var(--lh-head); color: var(--ink); }

/* ---------- the price ---------- */
.price { padding-block: calc(var(--s6) * 4); }
.price-line { margin-top: var(--s5); max-width: 19ch; font-family: var(--f-display); font-weight: var(--w-medium); font-size: var(--t-display); line-height: var(--lh-flat); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.price-turn { color: var(--accent); font-style: italic; font-weight: var(--w-regular); }

/* ---------- operator ---------- */
.operator-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: calc(var(--s6) * 2); align-items: start; }
.operator-body p + p { margin-top: var(--s4); }
.operator-body { max-width: 56ch; }
.sig { margin-top: var(--s5) !important; font-family: var(--f-signature); font-style: italic; font-size: var(--t-title); color: var(--ink); }

/* ---------- the ask ---------- */
.cta { padding-block: calc(var(--s6) * 4); background: radial-gradient(ellipse 60% 70% at 50% 40%, var(--surface) 0%, var(--ground) 60%); }
.cta-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta-mark { width: calc(var(--s6) * 1.6); height: calc(var(--s6) * 1.6); }
.cta-head { margin-top: var(--s5); font-family: var(--f-display); font-weight: var(--w-medium); font-size: var(--t-display); line-height: var(--lh-flat); letter-spacing: -.012em; color: var(--ink); }
.cta-form { display: flex; gap: var(--s3); margin-top: var(--s6); width: min(100%, 520px); }
.cta-input { flex: 1; min-width: 0; min-height: calc(var(--control-h) + var(--s3)); padding: 0 var(--s4); border: var(--hairline) solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--t-body); }
.cta-input::placeholder { color: var(--muted); }
.cta-input:focus { outline: var(--ring); outline-offset: var(--ring-offset); }
.cta-sub, .cta-err, .cta-done { margin-top: var(--s4); font-size: var(--t-small); color: var(--muted); max-width: 48ch; }
.cta-err { color: var(--bad); }
.cta-done { font-family: var(--f-display); font-size: var(--t-head); color: var(--ink); }

/* ---------- footer ---------- */
.foot { border-top: var(--hairline) solid var(--rule); padding-block: var(--s6) calc(var(--s6) + env(safe-area-inset-bottom)); }
.foot-in { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--s4); }
.setline { font-family: var(--f-display); font-style: italic; font-size: var(--t-small); color: var(--muted); }
.footlink { font-size: var(--t-small); color: var(--muted); }
.footlink a { text-decoration: none; } .footlink a:hover { color: var(--ink); }
.foot-dot { margin-inline: var(--s2); }

/* =============================================================================
   THE LOAD REVEAL — the page is cut open along the mark's line. CSS only, one clock.
   The parting waits for the stage (html.stage-ready); the long delay is the failsafe.
   ========================================================================== */
#reveal { position: fixed; inset: 0; z-index: 90; --c: 50%; --rb: var(--s4); animation: rvGone var(--m-fast) linear calc(var(--m-slow) * 17) forwards; }
.no-rv #reveal { display: none; }
.rv-half { position: absolute; inset: 0; background: var(--ground); }
.rv-top { clip-path: polygon(0 0, 100% 0, 100% calc(50% - var(--rb) / 2), calc(var(--c) + var(--rb) / 2) calc(50% - var(--rb) / 2), calc(var(--c) - var(--rb) / 2) calc(50% + var(--rb) / 2), 0 calc(50% + var(--rb) / 2)); animation: rvUp calc(var(--m-slow) * 4) var(--ease) calc(var(--m-slow) * 13) forwards; }
.rv-bot { clip-path: polygon(0 calc(50% + var(--rb) / 2), calc(var(--c) - var(--rb) / 2) calc(50% + var(--rb) / 2), calc(var(--c) + var(--rb) / 2) calc(50% - var(--rb) / 2), 100% calc(50% - var(--rb) / 2), 100% 100%, 0 100%); animation: rvDown calc(var(--m-slow) * 4) var(--ease) calc(var(--m-slow) * 13) forwards; }
.rv-bandwrap { position: absolute; inset: 0; overflow: hidden; animation: rvFade var(--m-film) linear calc(var(--m-slow) * 13) forwards; }
.rv-band {
  position: absolute; inset: 0; background: var(--accent); transform: translateX(-101%); animation: rvWipe calc(var(--m-slow) * 3) var(--ease) var(--m-slow) forwards;
  clip-path: polygon(0 50%, calc(var(--c) - var(--rb) / 2) 50%, calc(var(--c) + var(--rb) / 2) calc(50% - var(--rb)), 100% calc(50% - var(--rb)),
                     100% 50%, calc(var(--c) + var(--rb) / 2) 50%, calc(var(--c) - var(--rb) / 2) calc(50% + var(--rb)), 0 calc(50% + var(--rb)));
}
.stage-ready .rv-top { animation: rvUpNow calc(var(--m-slow) * 4) var(--ease) forwards; }
.stage-ready .rv-bot { animation: rvDownNow calc(var(--m-slow) * 4) var(--ease) forwards; }
.stage-ready .rv-bandwrap { animation: rvFadeNow var(--m-film) linear forwards; }
.stage-ready #reveal { animation: rvGoneNow var(--m-fast) linear calc(var(--m-slow) * 4) forwards; }
@keyframes rvWipe { to { transform: none; } }
@keyframes rvUp { to { transform: translateY(-101%); } } @keyframes rvUpNow { to { transform: translateY(-101%); } }
@keyframes rvDown { to { transform: translateY(101%); } } @keyframes rvDownNow { to { transform: translateY(101%); } }
@keyframes rvFade { to { opacity: 0; } } @keyframes rvFadeNow { to { opacity: 0; } }
@keyframes rvGone { to { visibility: hidden; } } @keyframes rvGoneNow { to { visibility: hidden; } }

/* checks only (?flat=1): the film unpinned at a fixed height */
.flat .runway { height: auto; }
.flat .stage { position: relative; height: calc(var(--s6) * 22); }

/* =============================================================================
   REDUCED MOTION — not a degraded page, a composed one: the finished mark, then the three acts read in order.
   ========================================================================== */
.rm .runway { height: auto; }
.rm .stage { position: relative; height: auto; min-height: 100svh; display: flex; flex-direction: column; }
.rm #scene { position: relative; height: 56svh; flex: none; -webkit-mask-image: none; mask-image: none; }
.rm .slot { position: relative; inset: auto; left: auto; width: auto; max-width: var(--shell); margin-inline: auto; padding: var(--s6) var(--s5); }
.rm .acts { display: block; }
.rm .act { opacity: 1; transform: none; pointer-events: auto; margin-bottom: var(--s6); }
.rm .cue, .rm .gauge { display: none; }
.rm .rvl, .rm .stagecard { opacity: 1; transform: none; }
.rm .cockpit { transform: none; }
.rm .stairs { --draw: 1; }

/* =============================================================================
   PHONE
   ========================================================================== */
@media (max-width: 859.98px) {
  .sec { padding-block: calc(var(--s6) * 2); }
  .wrap { padding-inline: var(--gutter); }
  .nav { padding-inline: var(--gutter); }
  .stage { background: radial-gradient(ellipse 110% 50% at 50% 26%, var(--surface) 0%, var(--ground) 60%, var(--sunk) 100%); }
  #scene { -webkit-mask-image: none; mask-image: none; }
  /* the copy gets a solid band under the picture: it never sits on the subject */
  .slot {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; padding: var(--s5) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom));
    background: var(--ground); border-top: var(--hairline) solid var(--rule); justify-content: flex-start;
  }
  .slate { margin-bottom: var(--s3); }
  .act { align-self: start; }
  .act-lede { margin-top: var(--s2); font-size: var(--t-head); }
  .act-body { margin-top: var(--s3); font-size: var(--t-small); }
  .act-cta { margin-top: var(--s4); }
  .act-note { display: none; }
  .gauge { margin-top: var(--s4); padding-top: var(--s3); row-gap: var(--s3); }
  .gauge-n { font-size: var(--t-head); }
  .cue { display: none; }
  .ck-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ck-rail, .ck-side { display: none; }
  .ck-goal { flex-wrap: wrap; gap: var(--s2) var(--s3); }
  .ck-track { flex-basis: 100%; order: 3; }
  .ck-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-col[data-col="contacted"], .ck-col[data-col="quoted"] { display: none; }
  .cockpit { transform: rotateX(calc(var(--k) * 8deg)) scale(calc(1 - var(--k) * .04)); }
  .calls { grid-template-columns: 1fr; gap: var(--s5); }
  .stairs-line { display: none; }
  .stages { grid-template-columns: 1fr; row-gap: var(--s5); }
  .stagecard { margin-top: 0; padding: 0 0 0 var(--s4); border-left: calc(var(--hairline) * 2) solid var(--accent); }
  .proof-in { grid-template-columns: 1fr; gap: var(--s3); }
  .sheet-row { grid-template-columns: var(--s6) 1fr; row-gap: var(--s2); }
  .sheet dd { grid-column: 2; }
  .operator-in { grid-template-columns: 1fr; gap: var(--s5); }
  .price, .cta { padding-block: calc(var(--s6) * 2.5); }
  .cta-form { flex-direction: column; }
  .cut { --c: 62%; } .cut-flip { --c: 38%; }
}