/* =====================================================================
   screamingface.ai — landing surface layer. Tokens only.
   Everything structural (.rail, .wrap, .note, .kv, .deltawrap, .btn
   family, .eyebrow, .foot, h1/h2, pre) comes from the vendored SFDS
   stylesheets (/sfds/). This file carries only what is unique to the
   landing surface. No raw colors, fonts, or sizes (the 1140px band
   constant mirrors the system's own .band width).
   ===================================================================== */

/* ---- rail links (surface-local; mirrors leaderboard-mvp) ----------- */
.rail-link {
  font-family: var(--f-mono); font-size: var(--text-micro);
  color: var(--ink-2); text-decoration: none;
  margin-left: var(--space-4);
}
.rail-link:hover { color: var(--ink); }
/* the mode toggle is position:fixed at the viewport's top-right (system rule),
   so the last rail link clears it rather than sitting under it */
.rail-link:last-of-type { margin-right: var(--space-7); }
/* the lockup reads a step larger than the rail's chrome, and links home */
.rail .brand { font-size: var(--text-sm); }
.rail .brand .m { font-size: var(--text-title); }
.rail a.brand { text-decoration: none; }
.rail a.brand:hover { color: var(--ink); }

/* ---- hero: one document flow — claim → context → action → evidence --
   Marketing register: Parastoo at --text-hero, weight-display, air.
   Everything hangs on one left axis (SFDS: left-aligned, document-like).
   The fusion ground mounts on the section (data-fusion-ground) as the
   page's one atmospheric moment. No overflow clip here: the ground's
   bleed runway extends below the section so its tails fade behind the
   neighbors — clipping it cuts a hard luminance edge. Horizontal
   containment is handled at the body level. */
body { overflow-x: clip; }
.hero { position: relative; }
.hero-band { max-width: 1140px; padding-top: var(--space-12); padding-bottom: var(--space-11); }
.hero h1 {
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  margin-bottom: var(--space-7);
}
/* the three-line masthead is composed, not a widow patch: the breaks land on
   the clause seams where the clamp gives them room. Above the cutoff the hard
   breaks own the composition; below it they yield and balance takes over. */
@media (max-width: 720px) { .hero-br { display: none; } }
.hero .eyebrow { display: block; margin-bottom: var(--space-7); color: var(--accent-text-low); }
.hero .lead { max-width: 34em; color: var(--ink-2); }

/* CTA pairs (hero + coda) */
.cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-7); }

/* full-band rule under the CTAs: the seam between the claim and the evidence */
.hero-rule { border: 0; border-top: var(--border-hairline) solid var(--line); margin: var(--space-10) 0 0; }

/* ---- the evidence (Figure 1) ----------------------------------------
   One instrument: the terminal carries the run, the board, and the delta
   readout. Product-register island, centered on the prose column so it
   shares width and axis with the numbered sections below. */
.proof-figure { max-width: calc(var(--col) - 2 * var(--space-5)); margin: var(--space-10) auto 0; }
.proof-figure .note { margin: 0; }
/* board rows never wrap, and every column is FIXED so the two rows are one
   comparable chart: bars share an origin and an end, receipts align */
.proof-figure .nb-row { grid-template-columns: 1.5ch 25ch minmax(0, 1fr) 4.5ch 13ch; }
.proof-figure .nb-receipt { white-space: nowrap; }
.proof-figure .nb-name { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2); }
.proof-figure .nb-ico { font-size: var(--text-body); line-height: 1; }
.proof-figure .model-ico { width: 16px; height: 16px; }
/* the terminal's title-bar mention of the board is a real link, quietly —
   the underline sits at the text's own tone, faded */
.proof-figure .note > .kicker a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.proof-figure .note > .kicker a:hover { text-decoration-color: currentColor; }

/* the win's receipt is the system's verified badge (its own green contract) */
/* the win bar carries the fusion gradient in its flowing form (the system's
   sf-flow treatment, same as the board's winning score-fill) */
.proof-figure .nb-row--win .nb-bar i {
  background: var(--fusion-grad-flow);
  background-size: 200% 100%;
  animation: sf-flow 14s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .proof-figure .nb-row--win .nb-bar i { animation: none; background: var(--fusion-grad); }
}

/* the delta readout, terminal-native: a ruled result line inside the window */
.note-delta {
  display: flex; align-items: baseline; gap: var(--space-5);
  border-top: var(--border-hairline) solid var(--terminal-line);
  margin: var(--space-5) 0 var(--space-4); padding-top: var(--space-4);
  font-variant-numeric: tabular-nums slashed-zero;
}
.nd-k {
  display: block; font-size: var(--text-label); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--terminal-dim); margin-bottom: var(--space-1);
}
.nd-v { font-size: var(--text-metric); font-weight: var(--weight-semibold); color: var(--terminal-ink); }
.nd-v.nd-win { color: var(--terminal-strong); }
.nd-arrow { color: var(--terminal-dim); align-self: center; }
.nd-delta {
  margin-left: auto; align-self: center;
  font-size: var(--text-lead); font-weight: var(--weight-semibold);
  color: var(--terminal-accent);
}
@media (max-width: 560px) { .note-delta { gap: var(--space-3); } .nd-v { font-size: var(--text-title); } }

.proof-caption {
  font-size: var(--text-sm); color: var(--ink-2);
  line-height: var(--leading-snug); margin: var(--space-4) 0 0;
}

/* kv definitions read at body size, same as the surrounding prose
   (the system default is --text-sm, tuned for dense product surfaces) */
section.wrap .kv dd { font-size: var(--text-body); line-height: var(--leading-body); }

/* ---- inline prose links take the register's accent (gold here) ------
   Scoped to running text (paragraphs + kv definitions) so chrome links
   (rail, foot) and buttons keep their own contracts. Inside a
   data-brand="app" island the same rule would read blue — correct. */
section.wrap p a, section.wrap dd a {
  color: var(--accent-text-low);
  text-decoration-color: var(--alpha-accent-40);
}
section.wrap p a:hover, section.wrap dd a:hover {
  color: var(--accent-text-high);
  text-decoration-color: var(--accent-text-high);
}

/* ---- numbered section headings -------------------------------------
   The label role carries the number; the heading stays sans semibold. */
h2 .secnum {
  font-family: var(--f-mono); font-size: var(--text-label);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-label);
  color: var(--ink-2); vertical-align: super;
  margin-right: var(--space-4);
}

/* ---- verification steps ---------------------------------------------
   Intentional list setting: the number is a label-role column (leading-zero
   mono, echoing the section numbers), flush with the paragraph edge; text
   and its wrap lines share one axis. */
.method { max-width: 42em; list-style: none; padding-left: 0; counter-reset: step; }
.method li {
  counter-increment: step;
  display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr);
  margin: var(--space-4) 0;
}
.method li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--f-mono); font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--ink-2); line-height: var(--leading-body); padding-top: 1px;
}

/* ---- the loop strip ------------------------------------------------- */
.loop {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3);
  font-family: var(--f-mono); font-size: var(--text-sm);
  border-top: var(--border-hairline) solid var(--line);
  border-bottom: var(--border-hairline) solid var(--line);
  padding: var(--space-4) 0; margin: var(--space-6) 0;
  color: var(--ink);
}
.loop .loop-sep { color: var(--ink-2); }

/* ---- coda ----------------------------------------------------------- */
.coda { padding-bottom: var(--space-10); }
.coda-install { max-width: 34em; }
.coda .cta-row { margin-top: var(--space-6); }

/* results mailing CTA — left-aligned in the document column */
.results-cta { margin-top: var(--space-9); border-top: var(--border-hairline) solid var(--line); padding-top: var(--space-7); }
/* the CTA's headline takes the display serif — a marketing moment, not a section */
.results-cta-head {
  font-family: var(--f-display); font-weight: var(--weight-display);
  font-size: var(--text-display); line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}
.results-cta-lede { max-width: 42em; color: var(--ink-2); }
.results-cta .signup { justify-content: flex-start; margin: var(--space-5) 0 0; }
.results-cta-done { font-family: var(--f-mono); font-size: var(--text-sm); color: var(--success-text-low); margin-top: var(--space-5); }

/* ---- footer: rides the same band as the hero ------------------------ */
footer.wrap { max-width: 1140px; }
.foot-mark { font-size: var(--text-body); }
.foot-links { display: flex; gap: var(--space-4); }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }

/* ---- section rhythm (marketing intervals) --------------------------- */
section.wrap { padding-top: 0; padding-bottom: var(--space-9); }
section.wrap h2:first-child { margin-top: 0; }