/* Self-hosted, no external requests. The ledger has to outlive fashions.
   Two registers share one stylesheet: the ledger pages (paper, light) and the landing page
   (`body.landing`: ink, dark). Everything under "landing" is scoped to that class. */

/* ---------------------------------------------------------------- fonts (vendored) */
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/InstrumentSerif-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/InstrumentSerif-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/InstrumentSans-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
}

:root {
  /* One palette for the whole site. The landing set the register; the record follows it,
     so a visitor crossing from the landing into the ledger stays in the same room. */
  --bg: #101411;
  --bg-2: #181e18;
  --bg-3: #151a14;
  --line: #333b31;
  --line-strong: #4e5d3e;
  --ink: #f1f3e9;
  --ink-2: #bdc6b8;
  --muted: #a4ada0;
  --muted-2: #86917f;
  --lime: #d4f58a;
  --lime-soft: #a0b38e;
  --accent: var(--lime);
  --pass: #9ee37d;
  --warn: #e6b85c;
  --fail: #ff7a6d;
  --paper: var(--bg);
  --rule: var(--line);
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: var(--bg);
  font: 16px/1.55 var(--sans);
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--lime); color: var(--bg); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
/* The record pages: masthead and footer run full width like the landing's, so the nav is
   the same object on every page; the reading column sits inside on the same gutter. */
body.page main { max-width: 82.5rem; margin: 0 auto; padding: 2.5rem clamp(1.25rem, 4vw, 3.5rem) 4rem; }
body.page main p, body.page main li { max-width: 74ch; }
body.page .site-footer { max-width: 82.5rem; margin: 0 auto; padding: 1.25rem clamp(1.25rem, 4vw, 3.5rem) 3rem; }
body.page h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); margin: 0 0 0.7rem; }
body.page h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin: 2.5rem 0 0.6rem; }
.masthead {
  display: flex;
  position: relative; z-index: 5; min-height: 92px;
  border-bottom: 1px solid var(--line);
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
  align-items: center; flex-wrap: nowrap; justify-content: space-between; gap: 30px;
  background: var(--bg);
}
.brand { color: var(--ink); font-size: 23px; font-weight: 600; letter-spacing: -1px; text-decoration: none; display: inline-flex; align-items: center; gap: 0.7rem; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 30px; height: 28px; color: var(--lime); flex-shrink: 0; display: block; }
.masthead nav { display: flex; gap: 32px; }
nav a { margin: 0; color: var(--ink-2); font-size: 14px; text-decoration: none; }
nav a:hover { color: var(--lime); text-decoration: none; }
a:hover { text-decoration: underline; }
.masthead-cta {
  margin-left: 0; padding: 8px 0; border: 0; border-bottom: 1px solid #77836d; border-radius: 0;
  color: var(--ink); font-size: 14px; font-weight: 400; text-decoration: none;
  display: inline-flex; align-items: center; gap: 22px; white-space: nowrap;
}
.masthead-cta::after { content: "\2197"; font-family: var(--mono); font-size: 0.95em; }
.masthead-cta:hover { background: none; color: var(--lime); border-color: var(--lime); text-decoration: none; }
a { color: var(--ink); }
/* sans headings, tight; the turn of phrase in serif italic */
h1, h2 { font-family: var(--sans); font-weight: 400; color: var(--ink); letter-spacing: -0.035em; line-height: 1.1; }
h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--lime-soft); letter-spacing: -0.02em; }
h1 { font-size: 2.4rem; margin: 2rem 0 0.6rem; }
h2 { font-size: 1.7rem; line-height: 1.2; margin: 2.25rem 0 0.5rem; }
h3 { font-family: var(--sans); font-weight: 400; font-size: 1.05rem; letter-spacing: -0.005em; margin: 1.5rem 0 0.4rem; color: var(--ink); }
h4 { font-size: 0.95rem; margin: 1.1rem 0 0.3rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.lede { color: var(--muted); max-width: 48rem; font-size: 1.05rem; }
.muted { color: var(--muted); font-size: 0.85rem; }
.empty { color: var(--muted); font-style: italic; }
code, pre, .hash { font-family: var(--mono); font-size: 0.85rem; }
pre.bartext {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--lime);
  padding: 0.9rem 1rem;
}
table.ledger { border-collapse: collapse; width: 100%; margin: 0.75rem 0 1.5rem; }
table.ledger th, table.ledger td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--rule);
}
table.ledger th { font-family: var(--mono); font-weight: 500; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
table.ledger td.quote { max-width: 32rem; }
.table-scroll { overflow-x: auto; }
blockquote.catalyst {
  margin: 0 0 0.4rem;
  padding: 0.5rem 0 0.5rem 1rem;
  border-left: 3px solid var(--rule);
  max-width: 48rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.35;
}
table.receipts td { font-size: 0.92rem; }
.bucket { font-family: var(--mono); font-weight: 500; letter-spacing: 0.04em; }
.bucket-BEAT, .bucket-IN_LINE { color: var(--pass); }
.bucket-THIN, .bucket-PARTIAL { color: var(--warn); }
.bucket-MISS, .bucket-SPIN, .bucket-NO_CALL, .bucket-INSUFFICIENT_DISCLOSURE { color: var(--fail); }
dl.facts { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 0.25rem 1rem; margin: 0.75rem 0 1.5rem; }
dl.facts dt { color: var(--muted); font-size: 0.85rem; }
dl.facts dd { margin: 0; word-break: break-word; }
dl.buckets { display: grid; grid-template-columns: minmax(8rem, 16rem) 1fr; gap: 0.25rem 1rem; }
dl.buckets dt { font-family: var(--mono); font-weight: 500; font-size: 0.85rem; }
dl.buckets dd { margin: 0; color: var(--muted); }
.flag { color: var(--warn); font-size: 0.8rem; }
section.verdict { border-top: 1px solid var(--rule); padding-top: 0.5rem; }
textarea { width: 100%; font-family: var(--mono); font-size: 0.85rem; padding: 0.6rem; border: 1px solid var(--rule); background: var(--bg-2); color: var(--ink); }
label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.25rem; }
button { margin-top: 0.6rem; padding: 0.5rem 1rem; font: inherit; background: var(--lime); color: #182310; border: 0; cursor: pointer; font-weight: 600; }
.result { margin-top: 1.25rem; }
.match-yes { color: var(--pass); font-weight: 700; }
.match-no { color: var(--fail); font-weight: 700; }
ul.proof li { margin-bottom: 0.3rem; }
.site-footer { border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: 1rem; }
.disclaimer { color: var(--muted); font-size: 0.82rem; max-width: 52rem; }
.disclaimer.standing { color: var(--ink); font-size: 1rem; border-left: 3px solid var(--lime); padding-left: 1rem; }
.built { color: var(--muted); font-size: 0.78rem; }

/* Subscribe (offer page) */
.subscribe { border: 1px solid var(--rule); border-left: 4px solid var(--accent); padding: 1rem 1.25rem; margin: 1rem 0; }
.subscribe .price { font-family: var(--serif); font-size: 1.6rem; margin: 0 0 0.6rem; }
.subscribe .price span { font-weight: 700; font-variant-numeric: tabular-nums; }
.subscribe-button {
  display: inline-block; background: var(--lime); color: #182310;
  padding: 0.55rem 1.1rem; text-decoration: none; font-weight: 600; border-radius: 0;
}
.subscribe-button:hover { text-decoration: none; background: #e2ffac; color: #182310; }
.subscribe-button[aria-disabled="true"] { background: var(--muted-2); color: var(--bg); cursor: not-allowed; }
.subscribe-note { color: var(--muted); font-size: 0.9rem; margin: 0.6rem 0 0; }

/* Scorecard (dossier + event page) */
.scorecard { border: 1px solid var(--rule); border-left: 4px solid var(--accent); padding: 0.75rem 1rem; margin: 0 0 1rem; }
.scorecard p { margin: 0.3rem 0; }
.scorecard .muted, .muted { color: var(--muted); }

/* The public seal (publish/reveal.py): a committed event whose text is not public yet. */
.bucket-SEALED { color: var(--muted); }
.sealed { border: 1px solid var(--rule); border-left: 4px solid var(--accent);
          padding: 0.75rem 1rem; margin: 0 0 1rem; background: var(--bg-2); }
.sealed p { margin: 0; }

/* Subscribe form (offer page) */
.subscribe .field {
  display: block; width: 100%; max-width: 24rem; margin: 0.25rem 0 0.75rem;
  padding: 0.5rem 0.6rem; font: inherit; border: 1px solid var(--rule); background: var(--bg-2); color: var(--ink);
}
.subscribe label { font-size: 0.85rem; color: var(--muted); }
.subscribe button.subscribe-button { border: 0; cursor: pointer; font: inherit; }

/* Shared building blocks (how-it-works, offer, landing) */
.eyebrow {
  margin: 0 0 0.75rem; color: var(--accent);
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
}
.page-eyebrow { margin-top: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.ghost-button {
  display: inline-block; padding: 0.55rem 1.1rem; border: 1px solid var(--line-strong);
  color: var(--ink); text-decoration: none; font-weight: 600; border-radius: 0;
}
.ghost-button:hover { border-color: var(--lime); color: var(--lime); text-decoration: none; }
ol.steps { list-style: none; margin: 1rem 0 0; padding: 0;
           display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
ol.steps li { position: relative; padding-top: 1.75rem; border-top: 2px solid var(--line-strong); }
.step-n {
  position: absolute; top: -0.85rem; left: 0; background: var(--bg);
  padding-right: 0.6rem; color: var(--accent);
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em;
}
ol.steps h3 { margin: 0 0 0.4rem; font-size: 1rem; }
ol.steps p { margin: 0; color: var(--muted); }
.why-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 1rem; }
.why-grid h3 { margin-top: 0; }
.why-grid p { margin: 0 0 0.5rem; }
.example-panel { border: 1px solid var(--rule); border-left: 4px solid var(--accent); padding: 1rem 1.25rem; margin: 2rem 0; }
.example-panel h2 { margin-top: 0.25rem; }
ul.upcoming-list { list-style: none; margin: 1rem 0; padding: 0; }
ul.upcoming-list li { padding: 0.45rem 0; border-bottom: 1px solid var(--rule); }
ul.terms-brief { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--muted); }
ul.terms-brief li { margin-bottom: 0.3rem; }
details.evidence summary { cursor: pointer; color: var(--accent); }

/* ================================================================ landing page */
/* The one page written for someone who has never heard of this. Ink, not paper: the
   instrument in front of the record. Every rule below is scoped to body.landing.
   Palette and type follow the catalyst-landing design: moss black, lime, sans headings
   with a serif italic turn, mono kickers, a grain over everything. */
body.landing {
  --bg: #101411;
  --bg-2: #181e18;
  --bg-3: #151a14;
  --line: #333b31;
  --line-strong: #4e5d3e;
  --ink: #f1f3e9;
  --ink-2: #bdc6b8;
  --muted: #a4ada0;
  --muted-2: #86917f;
  --lime: #d4f58a;
  --lime-soft: #a0b38e;
  --accent: var(--lime);
  --pass: #9ee37d;
  --warn: #e6b85c;
  --fail: #ff7a6d;
  --paper: var(--bg);
  --rule: var(--line);
  color: var(--ink);
  background: var(--bg);
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.landing::after {
  content: ""; position: fixed; pointer-events: none; inset: 0; opacity: 0.022; z-index: 30;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.8' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.landing ::selection { background: var(--lime); color: var(--bg); }
body.landing :focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
body.landing main, body.landing .masthead, body.landing .site-footer { max-width: none; margin: 0; }
body.landing .wrap { max-width: 82.5rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3.5rem); }
body.landing a { color: var(--ink); }
body.landing a:hover { color: var(--lime); text-decoration: none; }
body.landing .ic { width: 1em; height: 1em; flex-shrink: 0; }

/* masthead: a static bar, the brand's three tilted strokes, a text CTA on a rule */
body.landing .masthead {
  position: relative; z-index: 5; min-height: 92px;
  border-bottom: 1px solid var(--line);
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
  align-items: center; flex-wrap: nowrap; justify-content: space-between; gap: 30px;
  background: var(--bg);
}
body.landing .brand { color: var(--ink); font-size: 23px; font-weight: 600; letter-spacing: -1px; gap: 0.7rem; white-space: nowrap; }
body.landing .brand:hover { color: var(--ink); }
body.landing .brand-mark { color: var(--lime); }
body.landing .masthead nav { display: flex; gap: 32px; }
body.landing nav a { margin: 0; color: var(--ink-2); font-size: 14px; }
body.landing nav a:hover { color: var(--lime); text-decoration: none; }
body.landing .masthead-cta {
  margin-left: 0; padding: 8px 0; border: 0; border-bottom: 1px solid #77836d; border-radius: 0;
  color: var(--ink); font-size: 14px; font-weight: 400; display: inline-flex; align-items: center; gap: 22px;
}
body.landing .masthead-cta::after { content: "↗"; font-family: var(--mono); font-size: 0.95em; }
body.landing .masthead-cta:hover { background: none; color: var(--lime); border-color: var(--lime); }

/* type: sans headings, tight; the turn of phrase in serif italic */
body.landing h1, body.landing h2 { font-family: var(--sans); font-weight: 400; color: var(--ink); letter-spacing: -0.035em; }
body.landing h1 em, body.landing h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--lime-soft); letter-spacing: -0.02em; }
body.landing h2 { font-size: clamp(2.6rem, 4.8vw, 4.6rem); line-height: 1.08; margin: 0.4rem 0 1rem; max-width: 16em; }
body.landing h3 { font-family: var(--sans); font-weight: 400; font-size: 1.05rem; letter-spacing: -0.005em; margin: 0 0 0.5rem; color: var(--ink); }
body.landing .kicker, body.landing .eyebrow {
  display: block; margin: 0; color: var(--muted);
  font-family: var(--mono); font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: 1.2px; text-transform: uppercase;
}
body.landing .lede { color: var(--ink-2); font-size: 1.1rem; max-width: 42em; }
body.landing .muted { color: var(--muted); }
body.landing p { max-width: 62ch; }
body.landing .mono { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; }
body.landing .num { font-family: var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
body.landing .status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px rgba(199, 239, 106, 0.27); flex-shrink: 0; }

/* buttons: the lime block and the text link */
body.landing .subscribe-button, body.landing .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 34px; min-height: 53px;
  background: var(--lime); color: #182310; border: 1px solid transparent; border-radius: 0;
  padding: 15px 22px; font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
body.landing .subscribe-button:hover, body.landing .btn-primary:hover { background: #e2ffac; color: #182310; filter: none; transform: translateY(-2px); box-shadow: none; }
body.landing .ghost-button, body.landing .btn-ghost, body.landing .text-link {
  display: inline-flex; align-items: center; gap: 14px; padding: 0; border: 0; border-radius: 0;
  color: var(--ink); font-size: 14px; font-weight: 400; text-decoration: none; transition: color 0.2s;
}
body.landing .ghost-button:hover, body.landing .btn-ghost:hover, body.landing .text-link:hover { color: var(--lime); background: none; border-color: transparent; }
body.landing .arrow { font-family: var(--mono); font-size: 0.95em; }
body.landing .btn-primary .arrow { margin-left: auto; }

/* hero */
body.landing .hero {
  position: relative; min-height: calc(100svh - 92px); display: flex; flex-direction: column; justify-content: center;
  padding: 30px 0 3rem; overflow: hidden; isolation: isolate;
}
body.landing .hero-scene { position: absolute; top: 0; right: 0; bottom: 0; width: 68%; }
body.landing .hero-scene canvas { display: block; width: 100%; height: 100%; }
body.landing .hero-scene.no-webgl { display: none; }
body.landing .hero::before {
  /* the scrim: copy on the left, scene on the right, one gradient between them */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, var(--bg) 30%, rgba(16, 20, 17, 0.82) 44%, rgba(16, 20, 17, 0) 62%),
    linear-gradient(0deg, var(--bg) 0%, rgba(16, 20, 17, 0) 22%),
    radial-gradient(60% 50% at 70% 40%, rgba(212, 245, 138, 0.07), rgba(16, 20, 17, 0) 70%);
}
body.landing .hero .wrap { position: relative; z-index: 2; width: 100%; }
body.landing .hero-topline {
  display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 clamp(2.5rem, 6vh, 4.5rem);
  font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: 1.2px; text-transform: uppercase; color: #adb5a8;
}
body.landing .hero-topline span:first-child { display: flex; gap: 11px; align-items: center; }
body.landing .hero-topline span:last-child { color: #788671; }
body.landing .hero-copy { max-width: 46rem; }
body.landing .hero-copy h1 {
  margin: 0; font-size: clamp(4.4rem, 8.4vw, 8rem); line-height: 0.93; letter-spacing: -0.055em; white-space: nowrap;
}
body.landing .hero-copy h1 em { color: var(--lime); font-size: 1.095em; letter-spacing: -0.03em; line-height: 1.1; }
body.landing .hero-lede { max-width: 418px; font-size: 17px; line-height: 1.7; color: #aeb7a9; margin: 28px 0 0; }
body.landing .hero-note { margin: 36px 0 0; color: var(--muted-2); font-size: 12px; max-width: none; display: flex; align-items: center; gap: 9px; }
body.landing .hero-note .mini-lines { color: #b0c99a; font-size: 17px; }
body.landing .hero-actions { margin-top: 32px; gap: 1rem 29px; align-items: center; }
body.landing .rail { padding-left: 0;
  display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin: 3rem 0 0; padding-top: 1.4rem; max-width: 38rem;
  border-top: 1px solid var(--line); list-style: none;
}
body.landing .rail li { flex: 1 1 0; min-width: 0; }
body.landing .rail .num { display: block; font-size: 2.3rem; line-height: 1; }
body.landing .rail .lbl { display: block; margin-top: 0.5rem; color: var(--muted-2); font-family: var(--mono); font-size: 0.66rem; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; }

/* scene labels: real typography projected onto a 3-D scene by hero.js */
.scene-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.scene-label {
  position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity;
  transition: opacity 0.55s ease;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500; line-height: 1.5;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.scene-label.is-on { opacity: 1; }
.scene-label > span { display: block; }
.scene-label.anchor-above > span { transform: translate(-50%, calc(-100% - 12px)); text-align: center; }
.scene-label.anchor-below > span { transform: translate(-50%, 14px); text-align: center; }
.scene-label.anchor-right > span { transform: translate(14px, -50%); text-align: left; }
.scene-label.anchor-left > span { transform: translate(calc(-100% - 14px), -50%); text-align: right; }
.scene-label .kick { display: block; color: var(--muted); }
.scene-label .sub { display: block; }
.scene-label .big { display: block; font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: var(--ink); line-height: 1.15; }
.scene-label .hash { display: block; color: var(--accent); letter-spacing: 0.06em; }
.scene-label .hash.locked { color: var(--ink); }
.scene-label.is-pass .big { color: var(--pass); }
.scene-label.is-warn .big { color: var(--warn); }
.scene-label .tick { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 0.45rem; vertical-align: 1px; }
/* over the busy field, hero labels sit on a dark chip so they read at any angle */
body.landing .hero-scene .scene-label .kick, body.landing .hero-scene .scene-label .big,
body.landing .hero-scene .scene-label .sub, body.landing .hero-scene .scene-label .hash {
  width: fit-content; padding: 0.08em 0.5em; border-radius: 3px;
  background: rgba(16, 20, 17, 0.82); box-shadow: 0 0 0 1px rgba(241, 243, 233, 0.06);
}
body.landing .hero-scene .anchor-above > span > *, body.landing .hero-scene .anchor-below > span > * { margin-inline: auto; }
body.landing .hero-scene .scene-label .sub { margin-top: 0.2rem; }
body.landing .hero-scene .scene-label .big { font-size: 1.25rem; padding: 0.02em 0.45em 0.08em; }
body.landing .hero-scene .scene-label .kick { font-size: 0.62rem; letter-spacing: 0.14em; color: var(--ink-2); }

/* the standing key: the scene names three objects, so the page names them too — for the
   visitor who scrolls past in two seconds and never sees a full cycle of the animation. */
body.landing .scene-key { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
body.landing .scene-key li {
  display: flex; align-items: center; gap: 0.7rem; max-width: 42em;
  color: var(--muted); font-size: 0.82rem; line-height: 1.35;
}
body.landing .key-mark { flex: 0 0 22px; height: 12px; position: relative; }
body.landing .key-cloud {
  background-image: radial-gradient(circle, var(--lime) 1px, transparent 1.2px);
  background-size: 5px 5px; opacity: 0.85;
}
body.landing .key-bar::before {
  content: ""; position: absolute; inset: 0; margin: auto 0; height: 2px;
  background: var(--lime); box-shadow: 0 0 8px rgba(212, 245, 138, 0.5);
}
body.landing .key-dot::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px;
  border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px rgba(212, 245, 138, 0.55);
}
@media (max-width: 720px) { body.landing .scene-key { display: none; } }

/* sections */
body.landing .band { padding: clamp(4rem, 8vw, 110px) 0; border-top: 1px solid var(--line); }
body.landing h2.band-head { margin: 0 0 2.25rem; max-width: none; }
body.landing .section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 52px; }
body.landing .section-heading > p { margin: 0; font-size: 13px; line-height: 1.7; color: #8e9b85; text-align: right; }

/* 01 / the approach: the headline and the question under it */
body.landing .approach-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 100px; }
body.landing .approach-body h2 { margin: 0; }
body.landing .approach-summary { padding-top: 5px; color: #a3ae9b; font-size: 16px; }
body.landing .approach-summary p { margin: 0; }
body.landing .approach-summary p + p { margin-top: 19px; }
body.landing .principles { display: flex; gap: 35px; margin-top: 65px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line); }
body.landing .principles span { display: flex; gap: 8px; font-size: 12px; color: #a0ac96; align-items: center; }
body.landing .principles .ic { width: 15px; height: 15px; color: var(--lime); }

/* 02 / inside the research: a light room, a note pinned in it, before and after */
body.landing .example-section { background: #cdd4bc; color: #253021; padding: 108px 0; position: relative; border-top: 0; }
body.landing .example-section .kicker { color: #546047; }
body.landing .example-section a, body.landing .example-section h3 { color: inherit; }
body.landing .example-grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: 110px; align-items: center; }
body.landing .example-copy h2 { margin: 30px 0 25px; color: #253021; font-size: clamp(2.6rem, 4.4vw, 4.2rem); }
body.landing .example-copy h2 em { color: #61764e; }
body.landing .example-copy > p { font-size: 16px; color: #56614c; max-width: 335px; margin: 0; }
body.landing .example-tabs { display: flex; gap: 0; border: 1px solid #9aa88a; width: fit-content; padding: 4px; margin-top: 30px; }
body.landing .example-tabs button {
  margin: 0; padding: 10px 15px; border: 0; border-radius: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; color: #4e5f40; transition: background 0.2s, color 0.2s;
}
body.landing .example-tabs button.active { background: #27351e; color: #e3edce; }
body.landing .example-tabs button:focus-visible { outline-color: #344e24; }
body.landing .example-disclaimer { font-size: 13px; line-height: 1.7; margin: 28px 0 0; color: #657257; max-width: 340px; }
body.landing .sample-legend { display: flex; align-items: center; gap: 12px; margin-top: 40px; padding-top: 23px; border-top: 1px solid #abb69b; font-size: 13px; color: #69785a; }
body.landing .sample-legend .ic { width: 19px; height: 19px; }
body.landing .sample-legend strong { color: #405333; font-weight: 500; }
body.landing .research-paper {
  background: #f8f9f2; color: #293223; padding: 34px; position: relative;
  transform: rotate(1.4deg); box-shadow: 0 18px 50px rgba(57, 71, 43, 0.13); transition: transform 0.4s;
}
body.landing .research-paper:hover { transform: rotate(0); }
body.landing .research-paper::before { content: ""; position: absolute; inset: 7px -7px -7px 7px; border: 1px solid rgba(137, 151, 117, 0.36); z-index: -1; }
body.landing .research-paper p { max-width: none; margin: 0; }
body.landing .paper-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #d8ddcf; padding-bottom: 20px; }
body.landing .paper-brand { font-size: 15px; font-weight: 600; letter-spacing: -0.6px; }
body.landing .paper-top > span:last-child { font-family: var(--mono); font-size: 10px; color: #8c937f; }
body.landing .paper-meta { display: flex; justify-content: space-between; margin-top: 27px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px; color: #7d8b6e; }
body.landing .research-paper h3 { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.05; margin: 19px 0 0; letter-spacing: -0.5px; color: #293223; }
body.landing .paper-subtitle { font-size: 13px; color: #879078; margin-top: 13px; }
body.landing .result-banner { display: flex; align-items: center; gap: 8px; padding: 12px 10px; background: #eef0e2; margin-top: 26px; font-size: 13px; font-weight: 500; color: #52603b; }
body.landing .result-banner > span:last-child { margin-left: auto; font-family: var(--mono); font-size: 10px; background: #e2e7ce; padding: 3px 6px; }
body.landing .result-dot { width: 5px; height: 5px; background: #829753; border-radius: 50%; flex-shrink: 0; }
body.landing .measure-head, body.landing .measure-row { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr; column-gap: 14px; align-items: center; }
body.landing .measure-head { font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; color: #909981; padding-top: 23px; padding-bottom: 10px; border-bottom: 1px solid #dde2d5; }
body.landing .measure-row { padding: 15px 0; border-bottom: 1px solid #e3e7dc; font-size: 13px; line-height: 1.5; }
body.landing .measure-row strong { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 4px; }
body.landing .measure-row .ic { width: 14px; height: 14px; }
body.landing .positive { color: #67824a; }
body.landing .negative { color: #a16c26; }
body.landing .paper-takeaway { padding-top: 23px; }
body.landing .paper-takeaway > p { font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; color: #879478; margin-bottom: 10px; }
body.landing .paper-takeaway > div { font-family: var(--serif); font-size: 20px; line-height: 1.4; color: #4e5d3d; }
body.landing .paper-footer { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #dce2d1; padding-top: 17px; margin-top: 23px; font-size: 10px; color: #8b967c; }
body.landing .paper-footer > span:first-child { display: flex; align-items: center; gap: 5px; }
body.landing .paper-footer .ic { width: 13px; height: 13px; }
/* the two states of the note: the section's data-sample decides which lines show */
body.landing .example-section[data-sample="before"] .only-after { display: none; }
body.landing .example-section[data-sample="after"] .only-before { display: none; }
body.landing .example-section[data-sample="before"] .measure-head,
body.landing .example-section[data-sample="before"] .measure-row { grid-template-columns: 1.3fr 1fr; }

/* documents in, verdicts out: the flow scene */
body.landing .flow-scene { position: relative; height: clamp(380px, 40vw, 540px); }
body.landing .flow-scene canvas { display: block; width: 100%; height: 100%; }
body.landing .flow-scene .scene-label { color: var(--ink-2); font-size: 0.72rem; }
body.landing .flow-scene .scene-label .sub { color: var(--muted); font-size: 0.62rem; letter-spacing: 0.08em; white-space: normal; max-width: 15rem; }
body.landing .flow-scene .scene-label .big { font-size: 1.35rem; margin-bottom: 0.1rem; }
body.landing .flow-scene .scene-label[data-node="hub"] .sub { max-width: none; }
body.landing .flow-fallback { display: none; }
body.landing .flow-scene.no-webgl { height: auto; }
body.landing .flow-scene.no-webgl canvas, body.landing .flow-scene.no-webgl .scene-labels { display: none; }
body.landing .flow-scene.no-webgl .flow-fallback { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
body.landing .flow-fallback ul { margin: 0; padding-left: 1.1rem; color: var(--ink-2); }
body.landing .flow-fallback h3 { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); }

/* the flow scene and the watcher's log, side by side: 60 / 40 */
body.landing .flowlog { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; }
body.landing .flowlog .flow-scene { height: 30rem; }   /* the terminal's height: tops and bottoms align */
body.landing .flowlog .flow-scene .scene-label[data-node="hub"] .sub { display: none; }
body.landing .term { background: #0d110e; height: 30rem; border: 1px solid var(--line); border-radius: 0; overflow: hidden; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; }
body.landing .term-bar { display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 0.9rem; background: var(--bg-2); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
body.landing .term-bar .dots { display: inline-flex; gap: 0.4rem; }
body.landing .term-bar .dots i { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: block; }
body.landing .term-bar .dots i:nth-child(1) { background: #ff5f57; } body.landing .term-bar .dots i:nth-child(2) { background: #febc2e; } body.landing .term-bar .dots i:nth-child(3) { background: #28c840; }
body.landing .term-title { flex: 1; text-align: center; color: var(--ink-2); }
body.landing .term-live { color: var(--pass); }
body.landing .term-body { padding: 1.1rem 1.2rem 1.4rem; font-family: var(--mono); font-size: 0.8rem; line-height: 1.55; color: var(--ink-2); flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(241, 243, 233, 0.18) transparent; }
body.landing .term-body::-webkit-scrollbar { width: 8px; }
body.landing .term-body::-webkit-scrollbar-thumb { background: rgba(241, 243, 233, 0.18); border-radius: 4px; }
body.landing .term-body .l { display: grid; grid-template-columns: 5.4rem 1fr; gap: 0.8rem; padding: 0.45rem 0; border-bottom: 1px dashed rgba(241, 243, 233, 0.07); }
body.landing .term-body .l:last-child { border-bottom: 0; }
body.landing .term-body .t { color: var(--muted); }
body.landing .term-body b { color: var(--ink); font-weight: 500; }
body.landing .term-body b.ok { color: var(--pass); }
body.landing .term-body .cursor { display: inline-block; width: 0.55em; height: 1em; background: var(--lime); vertical-align: -0.15em; animation: term-blink 1s steps(1) infinite; margin-left: 0.25em; }
@keyframes term-blink { 50% { opacity: 0; } }

/* the life of an event */
body.landing ol.lifecycle { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1.25rem; }
body.landing ol.lifecycle::before, body.landing ol.lifecycle::after {
  content: ""; position: absolute; left: 0; right: 0; top: 2.25rem; height: 1px; background: var(--line);
}
body.landing ol.lifecycle::after { background: linear-gradient(90deg, var(--lime), var(--pass)); transform: scaleX(0); transform-origin: left; transition: transform 2.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
body.landing ol.lifecycle.is-in::after { transform: scaleX(1); }
body.landing ol.lifecycle li { position: relative; padding-top: 3.4rem; opacity: 0.38; transition: opacity 0.5s ease calc(0.2s + var(--i) * 0.38s); }
body.landing ol.lifecycle.is-in li { opacity: 1; }
body.landing ol.lifecycle .when { position: absolute; top: 0; left: 0; color: var(--lime); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
body.landing ol.lifecycle .node {
  position: absolute; top: 1.9rem; left: 0; width: 0.75rem; height: 0.75rem; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--bg);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; transition-delay: calc(0.2s + var(--i) * 0.38s);
}
body.landing ol.lifecycle.is-in .node { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 0 4px rgba(212, 245, 138, 0.16), 0 0 16px rgba(212, 245, 138, 0.5); }
body.landing ol.lifecycle.is-in li:last-child .node { background: var(--pass); border-color: var(--pass); box-shadow: 0 0 0 4px rgba(158, 227, 125, 0.16), 0 0 16px rgba(158, 227, 125, 0.5); }
body.landing ol.lifecycle h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; margin: 0 0 0.35rem; }
body.landing ol.lifecycle p { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.45; }
body.landing #lifecycle .muted { margin-top: 2rem; font-size: 0.85rem; }

/* proof + the slate */
body.landing ul.research-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); background: var(--line); border: 1px solid var(--line); }
body.landing ul.research-cards li { background: var(--bg); padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
body.landing ul.research-cards h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; margin: 0; }
body.landing ul.research-cards h3 a { text-decoration: none; }
body.landing ul.research-cards .meta { color: var(--muted); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
body.landing ul.research-cards .bucket { font-size: 0.8rem; }
body.landing .bucket-BEAT, body.landing .bucket-IN_LINE { color: var(--pass); }
body.landing .bucket-THIN, body.landing .bucket-PARTIAL { color: var(--warn); }
body.landing .bucket-MISS, body.landing .bucket-SPIN, body.landing .bucket-NO_CALL, body.landing .bucket-INSUFFICIENT_DISCLOSURE { color: var(--fail); }
body.landing .empty-line { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.3; color: var(--ink-2); margin: 0; max-width: 34em; }
body.landing .empty-line .num { font-family: var(--serif); color: var(--lime); }
body.landing .sub-head { margin: 2.5rem 0 0; padding-bottom: 0.75rem; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
body.landing ul.upcoming-list { margin: 0; border-top: 1px solid var(--line); }
body.landing ul.upcoming-list li { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line); }
body.landing ul.upcoming-list a { font-family: var(--serif); font-size: 1.35rem; text-decoration: none; letter-spacing: -0.01em; }
body.landing ul.upcoming-list .meta { color: var(--muted); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
body.landing .badge { display: inline-block; padding: 0.25rem 0.55rem; border: 1px solid var(--line-strong); border-radius: 0; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
body.landing .badge-free { border-color: #5d7346; color: #c5dc9f; }
body.landing .slate-foot { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-top: 1.5rem; max-width: none; }
body.landing .slate-foot .text-link { border-bottom: 1px solid #6e7c60; padding-bottom: 4px; }

/* membership: two plans, one price each */
body.landing .pricing-band { background: var(--bg); }
body.landing .membership-intro { color: #9aa991; max-width: 510px; margin: 0 0 48px; font-size: 16px; }
body.landing .plans { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); background: none; border: 0; border-radius: 0; overflow: visible; }
body.landing .plan { position: relative; background: #131911; border: 1px solid #374330; padding: 36px; }
body.landing .plan-paid { background: linear-gradient(140deg, #28361e, #1b2715); border-color: #657d46; }
body.landing .plan .subscribe { border: 0; padding: 0; margin: 0; background: transparent; box-shadow: none; border-radius: 0; }
body.landing .plan-name { margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
body.landing .plan-paid .plan-name { color: #c5dc9f; }
body.landing .plan-price { margin: 28px 0 0; font-family: var(--sans); font-size: 39px; font-weight: 400; line-height: 1.2; letter-spacing: -1px; color: var(--ink); display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
body.landing .plan-price .num { font-weight: 400; }
body.landing .plan-price .per { font-family: var(--sans); font-size: 13px; color: #90a27e; margin-left: 5px; letter-spacing: 0; }
body.landing .plan-list { list-style: none; margin: 30px 0; padding: 0; }
body.landing .plan-list li { display: flex; align-items: flex-start; gap: 11px; padding: 0; margin-bottom: 15px; border: 0; color: #b6c2ab; font-size: 14px; }
body.landing .plan-list li::before {
  content: ""; flex-shrink: 0; width: 15px; height: 15px; margin: 3px 0 0; color: #accc7e;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.landing .plan .btn-ghost { border-bottom: 1px solid #6e7c60; padding-bottom: 4px; }
body.landing .subscribe label { color: var(--muted); font-size: 13px; }
body.landing .subscribe .field { background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 0; padding: 0.8rem 0.9rem; max-width: 100%; }
body.landing .subscribe .field:focus { outline: 2px solid var(--lime); outline-offset: 1px; border-color: var(--lime); }
body.landing .subscribe button.subscribe-button { margin-top: 0; width: 100%; }
body.landing .subscribe .subscribe-note { color: #aabb96; font-size: 13px; line-height: 1.7; }
body.landing .subscribe .subscribe-note a { color: var(--ink-2); }
body.landing .quote-panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #5d7346; }
body.landing .quote-panel .price { font-family: var(--sans); font-size: 2rem; margin: 0 0 0.3rem; color: var(--ink); }
body.landing .access-note { display: grid; grid-template-columns: 1fr 2fr; gap: 45px; margin-top: 28px; }
body.landing .access-note > span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; padding-top: 5px; color: #8fa07e; }
body.landing .access-note > p { margin: 0; font-size: 12px; line-height: 1.8; color: #8e9c81; max-width: 620px; }
body.landing .access-note > p a { color: var(--ink-2); }

/* a few things, explained */
body.landing .faq-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 100px; }
body.landing .faq-grid h2 { font-size: clamp(2.6rem, 4vw, 3.45rem); margin: 24px 0 0; }
body.landing .faq-grid h2 em { color: #92a482; }
body.landing .faq-list { margin: 0; }
body.landing .faq-item { border-bottom: 1px solid var(--line); }
body.landing .faq-item summary {
  display: flex; gap: 30px; align-items: center; justify-content: space-between; cursor: pointer; list-style: none;
  font-size: 15px; padding: 22px 0; color: var(--ink); transition: color 0.2s;
}
body.landing .faq-item summary::-webkit-details-marker { display: none; }
body.landing .faq-item summary::after { content: "+"; flex-shrink: 0; font-family: var(--mono); font-size: 19px; line-height: 1; color: #859976; }
body.landing .faq-item[open] summary { color: var(--lime); }
body.landing .faq-item[open] summary::after { content: "−"; }
body.landing .faq-item summary:hover { color: var(--lime); }
body.landing .faq-item p { margin: 0; font-size: 13px; line-height: 1.8; color: #9cab91; padding: 0 30px 24px 0; max-width: none; }

/* look closer */
body.landing .closing { position: relative; text-align: center; padding: 105px 0 115px; overflow: hidden; }
body.landing .closing .kicker { color: #879d73; }
body.landing .closing h2 { font-size: clamp(5rem, 11vw, 10rem); letter-spacing: -0.04em; line-height: 1; margin: 25px auto 33px; max-width: none; position: relative; z-index: 1; }
body.landing .closing h2 em { color: var(--lime); }
body.landing .closing .btn-primary { position: relative; z-index: 2; }
body.landing .closing-line {
  position: absolute; width: 230px; height: 230px; border: 1px solid rgba(128, 150, 90, 0.16); border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%, -50%) scaleX(1.8) rotate(-30deg); pointer-events: none;
}
body.landing .closing-line::after { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(128, 150, 90, 0.125); border-radius: 50%; }

/* footer */
body.landing .site-footer { border-top: 1px solid var(--line); margin: 0; padding: 42px clamp(1.25rem, 4vw, 3.5rem) 32px; color: #75866b; font-size: 12px; line-height: 1.8; }
body.landing .site-footer .disclaimer { color: #75866b; font-size: 12px; max-width: 70ch; }
body.landing .site-footer .built { color: #75866b; font-size: 12px; }
body.landing .site-footer a { color: #b4c1a6; }
body.landing .site-footer a:hover { color: var(--lime); }

/* scroll reveal: a small rise, only where the visitor's system allows motion */
.js body.landing .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js body.landing .reveal.is-in { opacity: 1; transform: none; }
.js body.landing .reveal.d1 { transition-delay: 0.08s; }
.js body.landing .reveal.d2 { transition-delay: 0.16s; }
.js body.landing .reveal.d3 { transition-delay: 0.24s; }

@media (max-width: 72rem) {
  body.landing .approach-body { gap: 50px; }
  body.landing .example-grid { gap: 60px; }
  body.landing .research-paper { padding: 25px; }
  body.landing .research-paper h3 { font-size: 32px; }
  body.landing .plan { padding: 28px; }
  body.landing .plan-price { font-size: 33px; }
  body.landing .faq-grid { gap: 60px; }
  body.landing .masthead nav { gap: 20px; }
}
@media (max-width: 64rem) {
  /* the stage no longer overlays the copy: it sits below it, centred (hero.js reads this) */
  body.landing .hero { min-height: 0; display: flex; flex-direction: column; padding: 30px 0 2.5rem; }
  body.landing .hero .wrap { order: 1; }
  body.landing .hero-scene { order: 2; position: relative; width: 100%; height: clamp(320px, 60vw, 520px); margin-top: 1.5rem; }
  body.landing .hero::before { background: linear-gradient(0deg, var(--bg) 0%, rgba(16, 20, 17, 0) 10%); }
  body.landing .hero-copy { max-width: 46rem; }
  body.landing .rail { max-width: 46rem; }
  /* a centred stage is tighter: the prints keep their values and verdicts, not their sub-lines */
  .scene-label[data-label^="print-"] .sub, .scene-label[data-label^="verdict-"] .sub { display: none; }
  body.landing ol.lifecycle { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 2.5rem; }
  body.landing .flowlog { grid-template-columns: 1fr; }
  body.landing .flowlog .flow-scene { height: clamp(380px, 46vw, 520px); }
  body.landing .term { height: 24rem; }
  body.landing ol.lifecycle::before, body.landing ol.lifecycle::after { display: none; }
  body.landing .approach-body { grid-template-columns: 1fr; gap: 25px; }
  body.landing .principles { margin-top: 36px; gap: 12px 25px; }
  body.landing .example-section { padding: 65px 0; }
  body.landing .example-grid { grid-template-columns: 1fr; gap: 40px; }
  body.landing .example-copy h2 { margin: 20px 0; }
  body.landing .example-copy > p, body.landing .example-disclaimer { max-width: 450px; }
  body.landing .research-paper { max-width: 540px; width: calc(100% - 12px); margin: auto; padding: 30px; }
  body.landing .faq-grid { grid-template-columns: 1fr; gap: 30px; }
  body.landing .access-note { grid-template-columns: 1fr; gap: 12px; }
  body.landing .section-heading { margin-bottom: 32px; }
  body.landing .section-heading > p { font-size: 12px; }
}
@media (max-width: 56rem) {
  body.landing .hero { padding-top: 1.5rem; }
  body.landing .hero-topline span:last-child { display: none; }
  body.landing .hero-scene { height: clamp(320px, 88vw, 460px); }
  body.landing .hero-copy h1 { font-size: clamp(3.6rem, 15vw, 6rem); letter-spacing: -0.05em; }
  body.landing .rail { gap: 1.25rem 1.5rem; }
  body.landing .rail li { flex: 1 1 40%; }
  .scene-label { font-size: 0.6rem; }
  .scene-label .big { font-size: 1rem; }
  body.landing .flow-scene, body.landing .flowlog .flow-scene { height: clamp(420px, 120vw, 640px); }
  body.landing .term-body .l { grid-template-columns: 4.4rem 1fr; }
  body.landing .flow-scene .scene-label .sub { display: none; }
  body.landing .flow-scene .scene-label .big { font-size: 1.05rem; }
  body.landing ol.lifecycle { grid-template-columns: 1fr; row-gap: 1.5rem; padding-left: 2rem; }
  body.landing ol.lifecycle::before, body.landing ol.lifecycle::after { display: block; left: 0.35rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  body.landing ol.lifecycle::after { transform: scaleY(0); transform-origin: top; background: linear-gradient(180deg, var(--lime), var(--pass)); }
  body.landing ol.lifecycle.is-in::after { transform: scaleY(1); }
  body.landing ol.lifecycle li { padding-top: 1.4rem; }
  body.landing ol.lifecycle .node { left: -2rem; top: 1.55rem; }
  body.landing ul.upcoming-list li { grid-template-columns: 1fr; gap: 0.35rem; }
  body.landing ul.upcoming-list .badge { justify-self: start; }
  body.landing .masthead { min-height: 76px; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding-top: 0.9rem; padding-bottom: 0.9rem; }
  body.landing .masthead nav { order: 3; width: 100%; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
  body.landing .masthead-cta { margin-left: auto; font-size: 12px; gap: 9px; }
  body.landing .brand { font-size: 21px; }
  body.landing .section-heading { flex-direction: column; gap: 12px; }
  body.landing .section-heading > p { text-align: left; }
  body.landing .sample-legend { display: none; }
  body.landing .research-paper { padding: 23px; transform: rotate(0.8deg); }
  body.landing .research-paper h3 { font-size: 34px; }
  body.landing .measure-head, body.landing .measure-row { column-gap: 10px; }
  body.landing .measure-row, body.landing .measure-row strong, body.landing .result-banner { font-size: 11px; }
  body.landing .plan { padding: 24px 20px; }
  body.landing .plan-price { font-size: 30px; }
  body.landing .faq-item summary { font-size: 14px; }
  body.landing .closing { padding: 72px 0; }
  body.landing .closing h2 { font-size: clamp(3.6rem, 16vw, 6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .js body.landing .reveal { opacity: 1; transform: none; transition: none; }
  .scene-label { transition: none; }
  body.landing .subscribe-button, body.landing .btn-primary { transition: none; }
  body.landing .btn-primary:hover { transform: none; }
  body.landing .research-paper { transform: none; }
  body.landing ol.lifecycle::after { transition: none; }
  body.landing ol.lifecycle li, body.landing ol.lifecycle .node { transition: none; }
}