/* Cipher release console - page styles.
   Generated from scrollcraft/builds/cipher-release-console/index.html
   Edit there, then re-run the port. */
/* ═══════════════════════════════════════════════════════════════════════════
   CIPHER SOLUTIONS · release console
   Grammar: live surface. The page is an instrument, not a brochure.
   Tokens mirror brand/tokens.css. Colour is test state, never decoration.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --sc-canvas:     #08080B;
  --sc-surface:    #14141A;
  --sc-ink:        #F4F1EA;
  --sc-ink-soft:   #9C9A95;
  --sc-accent:     #B8FF2E;
  --sc-accent-ink: #08080B;

  --sc-font-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --sc-font-text:    Archivo, "Helvetica Neue", system-ui, sans-serif;
  --sc-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Nothing on this brand is rounded. 2px is the house edge. */
  --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 4px;

  /* Semantic state. Load-bearing, per BRAND-GUIDELINES.md 4. */
  --pass:    #B8FF2E;
  --fail:    #FF2E7E;
  --blocked: #FFB020;
  --running: #22E3FF;
  --faint:   #8C8A85;

  --ink-700: #14141A;
  --ink-600: #1E1E27;

  --rail-w: 13.5rem;
  --bar-h:  3.25rem;

  /* Tighter than the engine default: this page is dense on purpose and the
     document acts sit between pinned stages that already supply the breathing
     room, so full section padding read as dead scroll between them. */
  --sc-section: clamp(3.25rem, 6vw, 7.5rem);
}

/* A phone should not inherit desktop air, and this page has three flow
   sections whose padding was costing half a viewport-height on mobile. */
@media (max-width: 899px) { :root { --sc-section: 3.5rem; } }

/* Light text on dark needs compensation: more leading, more tracking, one
   step more weight. Dark type set with light metrics reads thin. */
body { font-family: var(--sc-font-text); letter-spacing: 0.005em;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* A class that sets display beats the hidden attribute's UA rule, which had
   silently disabled the console's boot hold, its verdict gate and the phone
   row-collapse. Every toggle on this page goes through the attribute. */
[hidden] { display: none !important; }

/* ── App chrome ──────────────────────────────────────────────────────────── */
.chrome {
  position: fixed; z-index: 60; inset: 0 auto 0 0;
  width: var(--rail-w);
  display: flex; flex-direction: column;
  background: color-mix(in oklab, var(--sc-canvas) 86%, transparent);
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-mono);
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.chrome__head { padding: 1.25rem 1rem 1rem; border-bottom: 1px solid var(--sc-hairline); }
.chrome__mark { display: flex; align-items: center; gap: 0.5rem; color: var(--sc-ink); text-decoration: none; }
.chrome__mark svg { width: 26px; height: 17px; flex: none; color: var(--pass); }
.chrome__mark b { font-weight: 500; letter-spacing: 0.16em; }
.chrome__mark b span { color: var(--faint); }
.chrome__run { display: block; margin-top: 0.6rem; color: var(--faint); font-size: 0.625rem; letter-spacing: 0.1em; }
.chrome__now { display: none; }

.stations { list-style: none; margin: 0; padding: 0.75rem 0; flex: 1 1 auto; overflow-y: auto; }
.stations li { margin: 0; }
.station {
  display: grid; grid-template-columns: 0.5rem 1fr auto; align-items: center; gap: 0.6rem;
  padding: 0.5rem 1rem; color: var(--faint); text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
.station__dot { width: 0.5rem; height: 0.5rem; border: 1px solid currentColor; }
.station__st { font-size: 0.5625rem; letter-spacing: 0.1em; opacity: 0; transition: opacity 140ms; }
.station:hover { color: var(--sc-ink-soft); }
.station:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: -2px; }
.station[data-state="running"] { color: var(--running); border-left-color: var(--running); }
.station[data-state="running"] .station__dot { background: currentColor; }
.station[data-state="running"] .station__st { opacity: 1; }
.station[data-state="pass"] { color: var(--sc-ink-soft); }
.station[data-state="pass"] .station__dot { background: var(--pass); border-color: var(--pass); }

.chrome__foot { padding: 0.9rem 1rem 1.1rem; border-top: 1px solid var(--sc-hairline); }
.verdict-readout { display: grid; gap: 0.25rem; margin: 0; color: var(--faint); }
.verdict-readout b { font-weight: 500; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--blocked); }
.chrome__cta {
  display: block; margin-top: 0.8rem; padding: 0.6rem 0.5rem; text-align: center;
  background: var(--sc-accent); color: var(--sc-accent-ink); text-decoration: none;
  font-weight: 500; letter-spacing: 0.1em; border-radius: var(--sc-r-sm);
  transition: transform 120ms var(--sc-ease-out), filter 120ms var(--sc-ease-out);
}
.chrome__cta:hover { filter: brightness(1.08); }
.chrome__cta:active { transform: translateY(1px); }
.chrome__cta:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; }

@media (max-width: 1023px) {
  .chrome {
    inset: auto 0 0 0; width: auto; height: auto; min-height: var(--bar-h);
    flex-direction: row; align-items: center; gap: 0.7rem;
    border-right: 0; border-top: 1px solid var(--sc-hairline);
    padding: 0.4rem 0.75rem calc(0.4rem + env(safe-area-inset-bottom));
  }
  .chrome__head, .chrome__foot { padding: 0; border: 0; }
  .chrome__run, .stations, .verdict-readout span { display: none; }
  .chrome__head { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
  .chrome__mark { min-height: 44px; display: flex; align-items: center; }
  .chrome__mark b span { display: none; }          /* icon + "Cipher" only */
  .chrome__now { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: var(--running); font-size: 0.5625rem; }
  .chrome__now::before { content: "/ "; color: var(--faint); }
  .chrome__foot { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; }
  .verdict-readout b { font-size: 0.5625rem; }
  .chrome__cta { margin-top: 0; padding: 0.7rem 0.8rem; min-height: 44px;
    display: flex; align-items: center; white-space: nowrap; }
}
/* A phone bar holds three things at most. The verdict readout is the one that
   repeats what the console already says on its face, so it goes first. */
@media (max-width: 560px) {
  .verdict-readout { display: none; }
  .chrome__cta { font-size: 0.5625rem; padding: 0.7rem 0.65rem; letter-spacing: 0.08em; }
  .chrome__now { flex: 1 1 auto; }
}
/* The smallest phones still in use (320x568) get one more step down. */
@media (max-height: 620px) {
  .run-intro h1 { font-size: 1.4rem; }
  .run-intro .prose { font-size: 0.75rem; }
  .run-intro .prose br { display: none; }
  .panel__foot { font-size: 0.5rem; padding: 0.45rem 0.8rem; }
}
/* Short phones: the hero has to land on one screen, so the sample run shows
   four rows instead of six. It is a sample, and the count is not the point. */
@media (max-height: 700px) {
  .run-intro .prose { font-size: 0.8125rem; line-height: 1.5; }
  .motto { margin-top: 0.8rem; font-size: 0.625rem; }
  .panel__foot { padding: 0.5rem 0.9rem; }
}

.shell { padding-left: var(--rail-w); }
@media (max-width: 1023px) {
  .shell { padding-left: 0; padding-bottom: var(--bar-h); }
  /* Pinned stages are 100svh and the bar floats over them, so their content
     needs the bar's height back as padding or it is clipped from below. */
  .stage-pad { padding-bottom: calc(var(--bar-h) + 0.75rem); }
}

/* The brand asks for visible structure rather than hidden structure: a column
   grid you can see, with the run metadata sitting in the margin. */
.gridlines { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(to right,
    var(--sc-hairline) 0 1px, transparent 1px calc(100% / 12));
  background-size: 100% 100%; opacity: 0.5; mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
@media (max-width: 899px) { .gridlines { display: none; } }
.sc-section { position: relative; }
.sc-wrap { position: relative; z-index: 1; }

/* ── Surface panels. Raised, edge-lit, hairlined. Never a soft card. ─────── */
.panel {
  background: linear-gradient(180deg, var(--ink-700), color-mix(in oklab, var(--ink-700) 92%, var(--sc-canvas)));
  border: 1px solid var(--sc-hairline);
  border-top-color: var(--sc-hairline-strong);
  border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e2);
}
.panel__bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-mono); font-size: 0.625rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
}
.panel__bar .spacer { margin-left: auto; }
.panel__foot {
  padding: 0.7rem 0.9rem; border-top: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-mono); font-size: 0.625rem; line-height: 1.7;
  letter-spacing: 0.04em; color: var(--faint);
}

.chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--sc-font-mono); font-size: 0.5625rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.28em 0.6em; border-radius: 999px; border: 1px solid currentColor;
}
.chip::before { content: ""; width: 0.42em; height: 0.42em; background: currentColor; border-radius: 999px; }
.chip--pass    { color: var(--pass); }
.chip--fail    { color: var(--fail); }
.chip--blocked { color: var(--blocked); }
.chip--running { color: var(--running); }
.chip--muted   { color: var(--faint); }

/* ── Type in the surface idiom. No 6rem display headings on this page. ──── */
.label { font-family: var(--sc-font-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.h-surface {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.6rem); line-height: 0.98;
  letter-spacing: 0.005em; text-transform: uppercase; margin: 0; text-wrap: balance;
}
.h-surface .q { color: var(--sc-accent); }
.h-surface .qf { color: var(--fail); }
.prose { color: var(--sc-ink-soft); max-width: 58ch; line-height: 1.68; text-wrap: pretty; margin: 0; }
.h-surface + .prose { margin-top: 1.35rem; }
.prose strong { color: var(--sc-ink); font-weight: 600; }
a { color: var(--sc-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }


/* ── Act 1 · the run already in flight ──────────────────────────────────── */
.stage-pad { position: absolute; inset: 0; display: grid; align-content: center; padding: var(--sc-6) var(--sc-gutter); }
.run-watermark { position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; translate: -50% -50%;
  width: min(105vh, 62rem); max-width: 130%; color: var(--pass); }
.run-watermark { mask-image: radial-gradient(115% 105% at 72% 50%, #000 22%, transparent 76%); }
.run-watermark .orbit-mark  { opacity: 0.07; }
.run-watermark .orbit-pills { opacity: 0.10; }
@media (max-width: 899px) {
  .run-watermark { width: 172%; mask-image: radial-gradient(100% 100% at 50% 62%, #000 18%, transparent 72%); }
  .run-watermark .orbit-mark { opacity: 0.07; }
  .run-watermark .orbit-pills { opacity: 0.10; }
}
@media (prefers-reduced-motion: no-preference) {
  .run-watermark .orbit-pills > g { transform: translateY(calc(var(--sc-p, 0) * -18px)); transition: none; }
}
.run-grid { position: relative; z-index: 1; display: grid; gap: var(--sc-6); align-items: center; width: 100%; max-width: 74rem; margin-inline: auto; }
@media (min-width: 900px) { .run-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sc-7); } }

.run-intro h1 { font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.1rem); line-height: 0.92; letter-spacing: -0.01em;
  margin: 0.9rem 0 0; text-wrap: balance; }
.run-intro h1 em { font-style: normal; color: var(--sc-accent); }
.run-intro .prose { margin-top: 1.1rem; font-size: 0.95rem; }
.motto { font-family: var(--sc-font-mono); font-size: 0.6875rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sc-accent); margin: 1.4rem 0 0; }
/* Phone hero: a document section, not a pinned stage. */
@media (max-width: 899px) {
  #run [data-sc-stage] { position: static; height: auto; overflow: visible; }
  #run .stage-pad { position: static; inset: auto;
    padding-block: calc(var(--sc-7) + 0.5rem) var(--sc-6); }
}
@media (max-width: 899px) {
  .run-intro .prose { font-size: 0.875rem; line-height: 1.55; margin-top: 0.9rem; }
  .run-intro h1 { font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2rem); }
  .motto { margin-top: 1rem; }
  .run-grid { gap: var(--sc-5); }
  .runrow { padding: 0.4rem 0.75rem; font-size: 0.6875rem; }
  .panel__foot { font-size: 0.5625rem; }
}

.runrow { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0.75rem; align-items: center;
  padding: 0.5rem 0.9rem; border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 6%, transparent);
  font-family: var(--sc-font-mono); font-size: 0.75rem; }
.runrow:last-of-type { border-bottom: 0; }
.runrow .n { color: var(--faint); font-size: 0.625rem; }
.runrow .nm { color: var(--sc-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runrow .st { font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.runrow[data-st="pass"]    .st { color: var(--pass); }
.runrow[data-st="running"] .st { color: var(--running); }
.runrow[data-st="blocked"] .st { color: var(--blocked); }
.runrow[data-st="pass"]    .nm { color: var(--sc-ink); }

/* ── Act 3 · what breaks. Full-bleed wipes, the loudest colour on the page. */
.breaks { position: absolute; inset: 0; }
.brk { position: absolute; inset: 0; display: grid; align-content: center;
  padding: var(--sc-6) var(--sc-gutter); background: var(--sc-canvas); }
.brk__inner { width: 100%; max-width: 52rem; margin-inline: auto; padding-left: 0; }
.brk .label { color: var(--fail); }
.brk p { font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.9rem); line-height: 0.94; letter-spacing: -0.01em;
  margin: 0.8rem 0 0; color: var(--sc-ink); text-wrap: balance; }
.brk p em { font-style: normal; color: var(--fail); }
.brk small { display: block; margin-top: 1rem; font-family: var(--sc-font-mono);
  font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--sc-ink-soft); line-height: 1.7; max-width: 46ch; }

/* ── Act 4 · coverage. The quietest act on the page. Density is the argument. */
.cov { display: grid; grid-template-columns: 1fr; gap: var(--sc-6) var(--sc-6); align-items: start; }
@media (min-width: 720px)  { .cov { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .cov { grid-template-columns: repeat(3, 1fr); } }
.cov__group { break-inside: avoid; }
.cov__head { display: flex; align-items: baseline; gap: 0.5rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--sc-hairline); cursor: default; list-style: none; }
.cov__head::-webkit-details-marker { display: none; }
@media (max-width: 899px) {
  .cov__head { cursor: pointer; padding-block: 0.85rem 0.8rem; min-height: 44px; align-items: center; }
  .cov__head h3::after { content: " +"; color: var(--sc-accent); }
  .cov__group[open] .cov__head h3::after { content: " \2212"; }
  .cov li { font-size: 0.8125rem; padding-block: 0.34rem; }
}
.cov__head:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.cov__head h3 { font-family: var(--sc-font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink); margin: 0; }
.cov__head .n { margin-left: auto; font-family: var(--sc-font-mono); font-size: 0.625rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.cov ul { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.cov li { font-size: 0.8125rem; line-height: 1.55; color: var(--sc-ink-soft); padding: 0.28rem 0 0.28rem 0.9rem; position: relative; }
.cov li::before { content: ""; position: absolute; left: 0; top: 0.72rem; width: 4px; height: 1px; background: var(--faint); }

/* ── Act 5 · THE CONSOLE. The peak. ─────────────────────────────────────── */
.console { width: 100%; max-width: 60rem; margin-inline: auto; }
.console__boot { font-family: var(--sc-font-mono); font-size: 0.8125rem; color: var(--sc-ink-soft); padding: 0.9rem; }
.caret { display: inline-block; width: 0.5em; height: 1em; background: var(--sc-accent);
  vertical-align: -0.12em; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

.ctrl { padding: 0.9rem; display: grid; gap: 0.9rem; }
.ctrl fieldset { border: 0; margin: 0; padding: 0; }
.ctrl legend { padding: 0; margin-bottom: 0.55rem; font-family: var(--sc-font-mono);
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.opts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt span {
  display: block; padding: 0.42rem 0.7rem; border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-sm); font-family: var(--sc-font-mono); font-size: 0.6875rem;
  letter-spacing: 0.06em; color: var(--sc-ink-soft); background: var(--sc-canvas);
  transition: color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), background 140ms var(--sc-ease-out);
}
.opt input:hover + span { color: var(--sc-ink); border-color: var(--sc-ink-soft); }
.opt input:checked + span { color: var(--sc-accent-ink); background: var(--sc-accent); border-color: var(--sc-accent); }
.opt input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.opt input:active + span { transform: translateY(1px); }

.poll { border-top: 1px solid var(--sc-hairline); }
.poll__row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 0.75rem; align-items: baseline;
  padding: 0.42rem 0.9rem; border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 5%, transparent);
  font-family: var(--sc-font-mono); font-size: 0.75rem; }
.poll__row .nm { color: var(--faint); transition: color 200ms var(--sc-ease-out); }
.poll__row[data-called="1"] .nm { color: var(--sc-ink-soft); }
.poll__row .st { font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.poll__row[data-r="go"]   .st { color: var(--faint); }
.poll__row[data-r="hold"] .st { color: var(--blocked); }
.poll__row[data-r="hold"] .nm { color: var(--sc-ink); }
.poll__row .why { grid-column: 1 / -1; font-size: 0.6875rem; line-height: 1.6; color: var(--faint); margin: 0; }

@media (max-width: 899px) {
  .ctrl { padding: 0.7rem; gap: 0.85rem; }
  .opt span { padding: 0.72rem 0.7rem; font-size: 0.6875rem; min-height: 44px;
    display: flex; align-items: center; }
  .poll__row { padding: 0.32rem 0.7rem; font-size: 0.6875rem; }
  .poll__row .why { display: none; }
  .console__boot { font-size: 0.75rem; }
}
.poll__sum { margin: 0; padding: 0.42rem 0.9rem; border-bottom: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-mono); font-size: 0.625rem; letter-spacing: 0.06em; color: var(--faint); }
.verdict { display: grid; gap: 0.75rem; padding: 1rem 0.9rem; border-top: 1px solid var(--sc-hairline-strong); }
@media (min-width: 640px) { .verdict { grid-template-columns: auto 1fr; align-items: center; gap: 1.25rem; } }
.stamp {
  justify-self: start; display: grid; place-items: center; text-align: center;
  padding: 0.7rem 1rem; border: 2px solid var(--blocked); border-radius: var(--sc-r-sm);
  color: var(--blocked); font-family: var(--sc-font-display); font-weight: 800;
  text-transform: uppercase; line-height: 0.9; letter-spacing: 0.02em;
  transform: rotate(-1.6deg);
}
.stamp b { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); display: block; }
.stamp span { font-family: var(--sc-font-mono); font-weight: 500; font-size: 0.5625rem; letter-spacing: 0.18em; margin-top: 0.3rem; }
.verdict__say { font-size: 0.875rem; line-height: 1.65; color: var(--sc-ink); margin: 0; }
.verdict__say b { color: var(--blocked); font-variant-numeric: tabular-nums; }
.verdict__say small { display: block; margin-top: 0.5rem; font-size: 0.75rem; color: var(--faint); line-height: 1.6; }
@media (max-height: 620px) {
  .verdict__say small { display: none; }   /* the label above the poll already says it */
  .poll__row { padding: 0.26rem 0.7rem; }
  .ctrl { gap: 0.6rem; }
}
@media (max-width: 899px) {
  .verdict { padding: 0.8rem 0.7rem; gap: 0.6rem; }
  .stamp { padding: 0.5rem 0.8rem; }
  .stamp b { font-size: 1.4rem; }
  .verdict__say { font-size: 0.8125rem; }
  .verdict__say small { font-size: 0.6875rem; }
}

/* ── Act 6 · the model. Lateral travel reads as breadth. ────────────────── */
.rail { display: flex; gap: var(--sc-5); align-items: stretch; padding-inline: var(--sc-gutter); }
.rail__card { flex: 0 0 auto; width: min(22rem, 78vw); display: flex; flex-direction: column; }
.rail__lead { width: min(26rem, 82vw); justify-content: center; }
.step { flex: 1; padding: 1.25rem; min-height: min(52vh, 30rem); }
.step .n { font-family: var(--sc-font-mono); font-size: 0.625rem; letter-spacing: 0.16em; color: var(--running); }
.step h3 { font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.5rem; line-height: 0.96; margin: 0.6rem 0 0; letter-spacing: -0.01em; }
.step p { margin: 0.7rem 0 0; font-size: 0.875rem; line-height: 1.62; color: var(--sc-ink-soft); }
.step .when { display: block; margin-top: auto; padding-top: 0.9rem; font-family: var(--sc-font-mono);
  font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
/* On a phone a 304px card floats in a 664px stage. Fill the screen instead,
   and narrow the card so the next one peeks in and reads as a rail. */
@media (max-width: 899px) {
  .rail { gap: var(--sc-4); }
  .rail__card { width: min(19rem, 80vw); }
  .rail__lead { width: min(21rem, 84vw); }
  .step { min-height: 58vh; padding: 1.1rem; }
  .step h3 { font-size: 1.35rem; }
}

/* ── Act 7 · who and how much ───────────────────────────────────────────── */
.who { display: grid; gap: var(--sc-6); }
@media (min-width: 900px) { .who { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sc-7); } }
.plans { display: grid; gap: 1px; background: var(--sc-hairline); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-lg); overflow: hidden; }
@media (min-width: 370px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { background: var(--ink-700); padding: 1rem; }
@media (max-width: 559px) { .plan { padding: 0.75rem; } .plan p { font-size: 0.75rem; line-height: 1.5; } }
.plan h3 { font-family: var(--sc-font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0; color: var(--sc-ink); }
.plan .amt { display: block; margin-top: 0.5rem; font-family: var(--sc-font-display); font-weight: 700;
  font-size: 1.35rem; text-transform: uppercase; line-height: 1; }
.plan .unit { display: block; margin-top: 0.3rem; font-family: var(--sc-font-mono); font-size: 0.625rem; color: var(--faint); }
.plan p { margin: 0.7rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--sc-ink-soft); }
.plan[data-core] { background: var(--ink-600); box-shadow: inset 2px 0 0 var(--pass); }
.plan[data-core] h3 { color: var(--pass); }

.founder { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 1rem; border-bottom: 1px solid var(--sc-hairline); }
.founder__id b { display: block; font-size: 0.95rem; }
.founder__id span { font-family: var(--sc-font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.avatar { width: 3rem; height: 3rem; flex: none; display: grid; place-items: center;
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm);
  font-family: var(--sc-font-display); font-weight: 700; font-size: 1.1rem; color: var(--sc-accent); }

/* ── Act 8 · the close is an input, not a button ────────────────────────── */
.close-invert {
  background: var(--pass);
  /* `color` is inherited as a computed value, so redefining the tokens alone
     leaves every wrapper on this subtree still carrying the page's bone ink.
     Restate colour wherever the token is restated. */
  color: var(--sc-accent-ink);
  --sc-ink: #08080B; --sc-ink-soft: #23300B; --faint: #2F3A12;
}
.close-invert .label       { color: #2F3A12; }
.close-invert .h-surface   { color: var(--sc-accent-ink); }
.close-invert .h-surface .q{ color: #2F3A12; }
.close-invert .prose       { color: #23300B; }
.close-invert .prose a     { color: var(--sc-accent-ink); text-decoration-thickness: 2px; }
.close-invert .field label { color: #2F3A12; }
.close-invert .field textarea {
  background: rgba(8, 8, 11, 0.07); color: var(--sc-accent-ink);
  border-color: rgba(8, 8, 11, 0.38); caret-color: var(--sc-accent-ink); }
.close-invert .field textarea::placeholder { color: #4A5722; }
.close-invert .field textarea:focus-visible { outline-color: var(--sc-accent-ink); border-color: var(--sc-accent-ink); }
.close-invert .submit { background: var(--sc-accent-ink); color: var(--pass); }
.close-invert .foot { color: #2F3A12; border-top-color: rgba(8, 8, 11, 0.22); }
.close-invert .foot a { color: var(--sc-accent-ink); }
.close-invert ::selection { background: var(--sc-accent-ink); color: var(--pass); }

.open-form { display: grid; gap: 0.6rem; margin-top: 1.1rem; }
@media (min-width: 640px) { .open-form { grid-template-columns: 1fr auto; align-items: start; } }
@media (max-width: 639px) { .submit { width: 100%; } }
.submit { min-height: 44px; }
.field { display: grid; gap: 0.4rem; }
.field label { font-family: var(--sc-font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.field textarea {
  width: 100%; min-height: 5.5rem; resize: vertical;
  background: var(--sc-canvas); color: var(--sc-ink);
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm);
  padding: 0.7rem 0.8rem; font-family: var(--sc-font-mono); font-size: 0.8125rem; line-height: 1.6;
  caret-color: var(--sc-accent);
}
.field textarea::placeholder { color: var(--faint); }
.field textarea:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: var(--sc-accent); }
.submit {
  align-self: end; padding: 0.75rem 1.1rem; border: 0; border-radius: var(--sc-r-sm);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: filter 120ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.submit:hover { filter: brightness(1.08); }
.submit:active { transform: translateY(1px); }
.foot { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-mono); font-size: 0.625rem; letter-spacing: 0.06em; color: var(--faint); line-height: 1.8; }
.foot a { color: var(--sc-ink-soft); }