/* ════════════════════════════════════════════════════════════════════════════
   ZERO · landing/engage.css · THE INSTRUMENTS · rendered full-bleed on the surface
   ────────────────────────────────────────────────────────────────────────────
   No card, no border, no box. Each state's dominant object is laid directly onto
   the dark, spanning the surface, in the Söhne specimen idiom: a hero figure in
   ZERO Wide, metadata in tracked Mono, hairline rules between rows, tabular
   slashed-zero numerals, the ONE acid signal (live sense-sweep · settled fill ·
   anchored hash), amber the operator accent, everything else bone/green/red/blue.
   The instruments render into .instrument (#th-slot); state lives on .stage, so
   the WHOLE page reads the engagement. Loads after landing.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* the rest hero subtitle (the claim is in landing.css) */
/* shared row vocabulary */
.k-label { font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--bone-4); font-feature-settings: var(--feat-mono); white-space: nowrap; }
.instrument .v-num { font-variant-numeric: tabular-nums slashed-zero; }

/* the instrument recompose · TRANSFORM-ONLY so it shows even if the surface's
   ambient RAF pins the timeline at frame 0 (visibility never gates on motion) */
.instrument > div { animation: tk-rise var(--dur-settle) var(--ease-zero); /* motion-allow: instrument recompose */ }
@keyframes tk-rise { from { transform: translateY(8px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .instrument > div { animation: none; } }

/* ════════════════ REST · the claim subtitle ═══════════════════════════════ */
.tk-rest { display: flex; flex-direction: column; }

/* ════════════════ INTERPRET · ZERO reads the intent back ═══════════════════ */
.tk-interpret { gap: clamp(16px, 2.4vh, 26px); }
.ip-goal { display: flex; flex-direction: column; gap: 10px; }
.ip-goal-v { font-family: var(--display); font-weight: var(--fw-fett, 800); font-size: clamp(30px, 4.8vw, 68px); line-height: 0.96; letter-spacing: -0.02em; color: var(--bone-0); max-width: 19ch; text-wrap: balance; }
.ip-scope { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; font-family: var(--mono); font-size: var(--fs-12); color: var(--bone-3); }
.ip-chip { display: inline-flex; align-items: baseline; }
.ip-chip:not(:last-child)::after { content: "·"; margin: 0 16px; color: var(--bone-5); }
.ip-conf { display: grid; grid-template-columns: clamp(96px,12vw,140px) 1fr 56px; align-items: center; gap: clamp(14px,2vw,24px); max-width: 560px; border-top: 1px solid var(--hair-2); padding-top: 14px; }
.ip-cbar { position: relative; height: 5px; background: var(--ink-3); overflow: hidden; }
.ip-cbar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v,0) * 1%); background: var(--blue); }
.ip-cv { text-align: right; font-size: var(--fs-16); color: var(--bone-1); font-variant-numeric: tabular-nums slashed-zero; }

/* ════════════════ SENSE · the surface perceives the world ══════════════════ */
.tk-sense { position: relative; gap: clamp(9px, 1.5vh, 15px); }
.tk-sense::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(237,248,0,0.08), transparent); width: 28%; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .stage[data-track="sense"] .tk-sense::after { animation: sense-sweep 1.9s var(--ease-zero) infinite; /* motion-allow: perception sweep */ }
}
@keyframes sense-sweep { 0% { left: -28%; opacity: 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.sense-row { display: grid; grid-template-columns: clamp(120px,16vw,210px) 1fr clamp(92px,10vw,140px); align-items: center; gap: clamp(16px,2.6vw,36px);
  border-top: 1px solid var(--hair-2); padding-top: clamp(9px,1.4vh,15px); }
.sense-row .sg-bar { position: relative; height: 5px; background: var(--ink-3); overflow: hidden; }
.sense-row .sg-bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v,0) * 1%); background: var(--blue); }
.sense-row .sg-v { text-align: right; font-size: clamp(15px,1.7vw,21px); color: var(--bone-0); font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: var(--feat-mono); white-space: nowrap; }
.sense-row .sg-v[data-tone="up"] { color: var(--green); } .sense-row .sg-v[data-tone="down"] { color: var(--red-text); }

/* ════════════════ THESIS · the proposal assembles ═════════════════════════ */
.tk-thesis { gap: clamp(16px, 2.6vh, 30px); }
.th-inst { display: flex; align-items: baseline; gap: clamp(14px,2vw,24px); flex-wrap: wrap; }
.th-inst .ti-sym { font-family: var(--display); font-weight: var(--fw-fett, 800); font-size: clamp(40px,6.6vw,104px); color: var(--bone-0); letter-spacing: -0.03em; line-height: 0.88; }
.th-inst .ti-side { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: var(--fs-13); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--bone-3); }
.th-inst .ti-side::before { content: ""; width: 0; height: 0; flex: none; }
.th-inst .ti-side[data-side="long"]::before { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--green); }
.th-inst .ti-side[data-side="short"]::before { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid var(--red-text); }
.th-inst .ti-side[data-side="long"] { color: var(--green); } .th-inst .ti-side[data-side="short"] { color: var(--red-text); }
.thesis-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px,2.6vw,44px); }
.thesis-grid > div { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--hair-2); padding-top: 12px; }
.thesis-grid .tg-v { font-size: clamp(16px,1.9vw,24px); color: var(--bone-0); font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: var(--feat-mono); white-space: nowrap; }
.lens-row { display: flex; align-items: center; gap: clamp(12px,1.8vw,22px); flex-wrap: wrap; }
.lens-row .ll { font-family: var(--mono); font-size: var(--fs-10); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--bone-5); }
.lens { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: var(--fs-12); color: var(--bone-4); font-feature-settings: var(--feat-mono); }
.lens::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: transparent; box-shadow: inset 0 0 0 1.5px var(--bone-5); }
.lens[data-on="true"] { color: var(--bone-2); } .lens[data-on="true"]::before { background: var(--blue); box-shadow: none; }

/* ════════════════ RAIL · the rails test the request ═══════════════════════ */
.tk-rail { gap: clamp(18px, 2.8vh, 32px); }
.rail-dial { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.rl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.rl-head .rl-k { font-family: var(--mono); font-weight: var(--fw-medium); font-size: var(--fs-11); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--bone-3); }
.rl-head .rl-read { font-size: clamp(14px,1.5vw,18px); color: var(--bone-1); font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: var(--feat-mono); }
.rl-track { position: relative; height: 10px; background: var(--ink-3); }
.rl-fill { position: absolute; inset: 0 auto 0 0; height: 100%; width: calc(var(--w,0) * 1%); background: var(--amber); }
.stage[data-tier="T1"] .rl-fill { background: var(--blue); }
.tk-rail[data-breach="true"] .rl-fill { background: var(--red); }
.rl-ceil { position: absolute; top: -4px; bottom: -4px; width: 2px; left: calc(var(--c,80) * 1%); background: var(--bone-2); }
.rl-ceil::after { content: "ceiling"; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-4); white-space: nowrap; }
.caps { display: grid; gap: clamp(9px,1.4vh,13px); max-width: 820px; }
.cap { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: clamp(12px,1.6vw,18px); font-family: var(--mono); font-size: clamp(12px,1.4vw,15px); font-feature-settings: var(--feat-mono); border-top: 1px solid var(--hair-1); padding-top: 9px; }
.cap .cap-mark { width: 13px; height: 13px; flex: none; position: relative; }
.cap[data-pass="true"] .cap-mark { background: var(--green); }
.cap[data-pass="true"] .cap-mark::after { content: ""; position: absolute; left: 3px; top: 1px; width: 4px; height: 8px; border: solid var(--ink-0); border-width: 0 1.5px 1.5px 0; transform: rotate(42deg); }
.cap[data-pass="false"] .cap-mark { background: transparent; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--red); }
.cap[data-pass="false"] .cap-mark::after { content: ""; position: absolute; inset: 3px; background: var(--red); border-radius: 50%; }
.cap .cap-k { color: var(--bone-2); } .cap[data-pass="false"] .cap-k { color: var(--red-text); }
.cap .cap-v { text-align: right; color: var(--bone-3); font-variant-numeric: tabular-nums slashed-zero; white-space: nowrap; }
.cap[data-pass="false"] .cap-v { color: var(--red-text); }

/* ════════════════ BOOK · the weights move ═════════════════════════════════ */
.tk-book { gap: clamp(8px, 1.4vh, 13px); }
.bk-head { font-family: var(--mono); font-size: var(--fs-10); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--bone-5); margin-bottom: 4px; }
.bk-row { display: grid; grid-template-columns: clamp(96px,12vw,160px) 1fr clamp(54px,6vw,82px) clamp(50px,5vw,72px); align-items: center; gap: clamp(14px,2vw,30px);
  font-family: var(--mono); font-size: clamp(12px,1.4vw,15px); color: var(--bone-2); font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: var(--feat-mono);
  border-top: 1px solid var(--hair-1); padding-top: clamp(7px,1.1vh,11px); }
.bk-row .bk-s { color: var(--bone-3); white-space: nowrap; }
.bk-row .bk-track { position: relative; height: 6px; background: var(--ink-3); overflow: hidden; }
.bk-row .bk-track i { position: absolute; inset: 0 auto 0 0; width: calc(var(--w,0) * 1%); background: var(--bone-4); }
.bk-row.cash .bk-track i { background: var(--bone-6); }
.bk-row.is-moving .bk-track i { background: var(--amber); box-shadow: 0 0 7px rgba(214,166,74,0.5); }
.stage[data-tier="T1"] .bk-row.is-moving .bk-track i { background: var(--blue); }
.bk-row.is-settled .bk-track i { background: var(--acid); box-shadow: var(--glow-acid); }
.bk-row .bk-w { text-align: right; color: var(--bone-0); }
.bk-row .bk-d { text-align: right; font-size: var(--fs-11); color: transparent; }
.bk-row.is-moving .bk-d { color: var(--amber); } .bk-row.is-settled .bk-d { color: var(--green); }

/* ════════════════ PLAN · the composed treasury plan (multi-leg) ════════════ */
.tk-plan { gap: clamp(14px, 2.2vh, 22px); }
.pl-goal { display: flex; flex-direction: column; gap: 8px; }
.pl-goal-v { font-family: var(--sans); font-weight: var(--fw-semibold); font-size: clamp(24px,3.2vw,44px); line-height: 1.04; letter-spacing: -0.02em; color: var(--bone-0); max-width: 22ch; }
.pl-legs { display: flex; flex-direction: column; }
.pl-leg { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 1px solid var(--hair-2); padding: clamp(9px,1.4vh,13px) 0;
  font-family: var(--mono); font-size: clamp(13px,1.5vw,17px); font-feature-settings: var(--feat-mono); }
.pl-flow { display: inline-flex; align-items: baseline; gap: 12px; min-width: 0; }
.pl-from { color: var(--bone-4); } .pl-arrow { color: var(--amber); } .pl-to { color: var(--bone-1); white-space: nowrap; }
.pl-amt { color: var(--bone-0); font-variant-numeric: tabular-nums slashed-zero; white-space: nowrap; }
.pl-sum { display: flex; gap: clamp(20px,3vw,44px); flex-wrap: wrap; border-top: 1px solid var(--hair-3); padding-top: 13px;
  font-family: var(--mono); font-size: var(--fs-11); color: var(--bone-4); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.pl-sum b { color: var(--bone-1); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums slashed-zero; }

/* ════════════════ LEDGER · the x402 rail fires · status is the singleton ════ */
.tk-ledger { gap: clamp(7px, 1.2vh, 11px); }
.lg-row { display: grid; grid-template-columns: 12px 1fr auto clamp(72px,8vw,96px); align-items: center; gap: clamp(14px,1.8vw,22px);
  font-family: var(--mono); font-size: clamp(12px,1.4vw,15px); font-feature-settings: var(--feat-mono); border-top: 1px solid var(--hair-1); padding-top: clamp(8px,1.2vh,12px); }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--bone-4); }
.lg-row[data-state="settled"] .lg-dot { background: var(--green); }
.lg-row[data-state="streaming"] .lg-dot { background: var(--acid); box-shadow: var(--glow-acid); }
.lg-row[data-state="pending"] .lg-dot { background: var(--amber); }
.lg-row[data-state="capped"] .lg-dot { background: var(--amber); border-radius: 1px; }
.lg-row[data-state="blocked"] .lg-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--red); }
.lg-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-label { color: var(--bone-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-sub { font-size: var(--fs-10); color: var(--bone-5); letter-spacing: 0.02em; text-transform: uppercase; }
.lg-amt { color: var(--bone-0); font-variant-numeric: tabular-nums slashed-zero; white-space: nowrap; text-align: right; }
.lg-st { font-size: var(--fs-10); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--bone-4); white-space: nowrap; text-align: right; }
.lg-row[data-state="settled"] .lg-st { color: var(--green); }
.lg-row[data-state="streaming"] .lg-st { color: var(--bone-1); }
.lg-row[data-state="pending"] .lg-st, .lg-row[data-state="capped"] .lg-st { color: var(--amber); }
.lg-row[data-state="blocked"] .lg-st { color: var(--red-text); }

/* ════════════════ CONSENT · explain-before-sign · mode escalation ══════════ */
.tk-consent { gap: clamp(16px, 2.4vh, 26px); }
.cs-head { display: flex; align-items: baseline; justify-content: space-between; gap: clamp(16px,3vw,40px); flex-wrap: wrap; }
.cs-scope { font-family: var(--sans); font-weight: var(--fw-semibold); font-size: clamp(22px,3vw,40px); line-height: 1.04; letter-spacing: -0.02em; color: var(--bone-0); min-width: 0; max-width: 22ch; }
.cs-quorum { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.cs-pips { display: inline-flex; gap: 5px; }
.cs-pip { width: 11px; height: 11px; border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--bone-5); }
.cs-pip.on { background: var(--amber); box-shadow: none; }
.tk-consent.is-met .cs-pip.on { background: var(--green); }
.cs-qlabel { font-family: var(--mono); font-size: var(--fs-10); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--bone-4); white-space: nowrap; }
.cs-lines { display: grid; gap: 0; margin: 0; }
.cs-line { display: grid; grid-template-columns: clamp(120px,15vw,180px) 1fr; gap: clamp(16px,2.4vw,30px); align-items: baseline; border-top: 1px solid var(--hair-2); padding: clamp(9px,1.4vh,13px) 0; }
.cs-line dt { font-family: var(--mono); font-size: var(--fs-10); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--bone-4); margin: 0; white-space: nowrap; }
.cs-line dd { margin: 0; font-family: var(--mono); font-size: clamp(13px,1.5vw,16px); color: var(--bone-1); }
.cs-line[data-kind="policy"] dd { color: var(--amber); }
.cs-line[data-kind="stop"] dd { color: var(--red-text); }
.cs-line[data-kind="ok"] dd { color: var(--green); }

/* ════════════════ RANK · the operator brief · three ranked moves ═══════════ */
.tk-rank { gap: clamp(8px, 1.4vh, 14px); }
.rk-item { display: grid; grid-template-columns: clamp(28px,3vw,40px) 1fr auto; align-items: baseline; gap: clamp(14px,2vw,26px); border-top: 1px solid var(--hair-2); padding-top: clamp(10px,1.6vh,16px); }
.rk-n { font-family: var(--display); font-weight: var(--fw-fett, 800); font-size: clamp(22px,2.8vw,40px); color: var(--bone-3); line-height: 0.9; }
.rk-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rk-move { font-family: var(--mono); font-size: clamp(14px,1.6vw,19px); color: var(--bone-0); }
.rk-why { font-family: var(--mono); font-size: clamp(11px,1.2vw,13px); color: var(--bone-4); text-wrap: pretty; }
.rk-tags { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.rk-urg, .rk-auth { font-family: var(--mono); font-size: var(--fs-10); letter-spacing: var(--ls-wide); text-transform: uppercase; white-space: nowrap; }
.rk-urg { color: var(--bone-3); } .rk-auth { color: var(--bone-5); }
.rk-item[data-lean="do"] .rk-n, .rk-item[data-lean="do"] .rk-urg { color: var(--amber); }
.rk-item[data-lean="you"] .rk-n { color: var(--bone-0); }
.rk-item[data-lean="skip"] .rk-n { color: var(--bone-5); }

/* ════════════════ PROOF · the anchor ══════════════════════════════════════ */
.tk-proof { gap: clamp(16px, 2.6vh, 28px); }
.pf-main { display: flex; flex-direction: column; gap: 10px; }
.pf-main .pf-k { font-family: var(--mono); font-weight: var(--fw-medium); font-size: var(--fs-11); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--green); }
.pf-main .pf-v { font-family: var(--display); font-weight: var(--fw-fett, 800); font-size: clamp(26px,3.6vw,52px); line-height: 0.98; letter-spacing: -0.02em; color: var(--bone-0); text-wrap: balance; max-width: 22ch; }
.pf-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2.6vw,40px); max-width: 900px; }
.pf-meta > div { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--hair-2); padding-top: 12px; }
.pf-meta .pf-mv { font-size: clamp(14px,1.6vw,19px); color: var(--bone-1); font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: var(--feat-mono); white-space: nowrap; }
.pf-meta .pf-mv.pf-ok { color: var(--green); } .pf-meta .pf-mv.pf-acid { color: var(--acid); } .pf-meta .pf-mv.pf-amber { color: var(--amber); } .pf-meta .pf-mv.pf-red { color: var(--red-text); }

/* ════════════════ REFUSE · the covenant holds the line ════════════════════ */
.tk-refuse { gap: clamp(16px, 2.4vh, 26px); }
.rf-req { font-family: var(--display); font-weight: var(--fw-fett, 800); font-size: clamp(28px,4vw,60px); line-height: 0.96; letter-spacing: -0.025em; color: var(--bone-3); }
.rf-req .rf-strike { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.rf-caps { display: flex; flex-direction: column; }
.rf-cap { display: flex; align-items: center; gap: 13px; font-family: var(--mono); font-size: clamp(13px,1.5vw,16px); color: var(--red-text); font-feature-settings: var(--feat-mono);
  border-top: 1px solid var(--hair-1); padding: 9px 0; white-space: nowrap; }
.rf-cap .rf-mark { width: 12px; height: 12px; flex: none; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--red); }
.rf-note { font-family: var(--mono); font-size: var(--fs-12); color: var(--bone-3); border-top: 1px solid var(--hair-3); padding-top: 12px; }

/* ════════════════ HALT · the surface stands down ══════════════════════════ */
.tk-halt { gap: clamp(16px, 2.4vh, 26px); }
.hl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px,1.6vh,14px) clamp(28px,5vw,80px); max-width: 820px; }
.hl-grid > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--hair-1); padding-bottom: 10px; }
.hl-grid .hl-v { font-family: var(--mono); font-size: clamp(15px,1.7vw,21px); color: var(--red-text); font-variant-numeric: tabular-nums slashed-zero; white-space: nowrap; }
.hl-note { font-family: var(--mono); font-size: var(--fs-12); color: var(--bone-3); }
.hl-note code { color: var(--bone-1); background: var(--ink-2); padding: 1px 6px; border-radius: 2px; }

/* ════════════════ REFLECT · what changed / why it mattered / what next ═════ */
.tk-reflect { gap: 0; }
.rx-line { display: grid; grid-template-columns: clamp(120px,14vw,170px) 1fr; gap: clamp(16px,2.4vw,32px); align-items: baseline; border-top: 1px solid var(--hair-2); padding: clamp(11px,1.8vh,17px) 0; }
.rx-k { padding-top: 2px; }
.rx-v { font-family: var(--sans); font-size: clamp(15px,1.7vw,21px); line-height: 1.4; color: var(--bone-1); text-wrap: pretty; max-width: 64ch; }
.tk-reflect .rx-line:first-child .rx-v { color: var(--bone-0); }

@media (max-width: 760px) {
  .thesis-grid, .pf-meta { grid-template-columns: 1fr 1fr; }
  .hl-grid { grid-template-columns: 1fr; }
  .cs-line, .rx-line { grid-template-columns: 1fr; gap: 4px; }
}

/* ════════════════════════════════════════════════════════════════════════
   THE CAPTURE LINE · every engagement ends in a kept artifact · value first
   ────────────────────────────────────────────────────────────────────────
   Not a tray, not a box — a line on the surface, in the same idiom as the
   composer. Replaces the voice at the end. Email only · never linked to a
   wallet (ONBOARDING-DOCTRINE: no email gate before value).
   ════════════════════════════════════════════════════════════════════════ */
.capture { display: none; flex-direction: column; gap: 12px; padding-top: 13px; margin-top: 2px; border-top: 1px solid color-mix(in oklab, var(--green) 40%, transparent); }
.stage[data-capture="true"] .capture { display: flex; animation: cap-in var(--dur-travel) var(--ease-zero); /* motion-allow: the conversion reveal · transform-only */ }
@keyframes cap-in { from { transform: translateY(7px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .stage[data-capture="true"] .capture { animation: none; } }
.cap-head { display: flex; align-items: baseline; gap: 14px; }
.cap-head .cap-k { font-family: var(--mono); font-size: var(--fs-10); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--green); flex: none; }
.cap-artifact { font-family: var(--display); font-weight: var(--fw-fett, 800); font-size: clamp(20px,2.4vw,32px); color: var(--bone-0); letter-spacing: -0.02em; line-height: 1.04; }
.cap-form { display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--hair-3); padding-bottom: 9px; }
.cap-form[hidden], .cap-foot[hidden] { display: none; }
.cap-caret { width: 7px; height: 15px; background: var(--acid); flex: none; }
.cap-email { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--bone-0); font-family: var(--mono); font-size: clamp(15px,1.7vw,19px); padding: 2px 0; }
.cap-email::placeholder { color: var(--bone-5); }
.cap-email[data-invalid="true"]::placeholder { color: var(--red-text); }
.cap-cta { flex: none; font-family: var(--mono); font-size: var(--fs-12); letter-spacing: var(--ls-wide); text-transform: uppercase; border: 0; background: transparent; color: var(--amber); cursor: pointer; padding: 4px 0; white-space: nowrap; transition: color var(--dur-quick) var(--ease-zero); }
.cap-cta:hover { color: var(--acid); }
.cap-foot { display: flex; align-items: center; gap: 14px; }
.cap-note { font-family: var(--mono); font-size: var(--fs-10); color: var(--bone-5); flex: 1; min-width: 0; }
.cap-acts { display: inline-flex; gap: 14px; flex: none; }
.cap-again, .cap-reset { font-family: var(--mono); font-size: var(--fs-10); letter-spacing: var(--ls-wide); text-transform: uppercase; background: transparent; border: 0; cursor: pointer; padding: 2px 0; color: var(--bone-4); transition: color var(--dur-quick) var(--ease-zero); }
.cap-again:hover { color: var(--bone-1); } .cap-reset:hover { color: var(--bone-2); }
.cap-done { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cap-done-k { font-family: var(--mono); font-size: var(--fs-10); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--green); flex: none; }
.cap-done-v { font-family: var(--mono); font-size: var(--fs-12); line-height: 1.5; color: var(--bone-2); flex: 1; min-width: 0; }
.cap-done-v b { color: var(--bone-0); }
.cap-done .cap-again { margin-left: auto; }