/* ─────────────────────────────────────────────────────────────────
   Firmori — getfirmori.com
   Tokens are lifted verbatim from the studio skin (GenStudio/public/app.css)
   so the marketing site and the product read as one object. Two rules carry
   over: surfaces stay near-neutral, and the accent is reserved — it marks the
   one action that matters on a screen, nothing else.

   The palette: verdigris over near-black with a cool stone cast. Firmus —
   steadfast, unmoved — so the accent is the colour a metal turns after decades
   of not going anywhere, and bronze is the same alloy earlier in its life.
   The mark's gradient runs bronze at the anchor to patina at the weight.

   Dark only, deliberately. The product is a grading surface; a light chrome
   would misrepresent it.
   ───────────────────────────────────────────────────────────────── */

:root {
  --bg: #07090A;
  --bg-lift: #0B0E0F;
  --panel: #101315;
  --panel-2: #161A1C;
  --glass: rgba(255, 255, 255, .045);
  --glass-2: rgba(255, 255, 255, .075);
  --line: rgba(255, 255, 255, .085);
  --line-2: rgba(255, 255, 255, .16);
  --text: #EEF1F1;
  --muted: #8A9291;
  --faint: #576260;
  --accent: #4F9D8B;
  --accent-hi: #7CC5B2;
  --ink: #04110D;
  --accent-soft: rgba(79, 157, 139, .14);
  --alt: #B98A4E;
  --alt-line: rgba(185, 138, 78, .32);
  --alt-soft: rgba(185, 138, 78, .06);
  --mark-a: #B98A4E;
  --mark-b: #4F9D8B;
  --ok: #6FD8A6;
  --danger: #DD6570;

  --r-xs: 8px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --shadow-lg: 0 32px 90px rgba(0, 0, 0, .7);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", Consolas, monospace;

  /* fluid scale — 1.25 ratio, tight on display sizes */
  --t-h1: clamp(2.55rem, 1.6rem + 3.9vw, 4.6rem);
  --t-h2: clamp(1.85rem, 1.3rem + 2.1vw, 2.85rem);
  --t-h3: clamp(1.03rem, .97rem + .25vw, 1.17rem);
  --t-lede: clamp(1.03rem, .96rem + .4vw, 1.22rem);
  --t-body: clamp(.95rem, .92rem + .16vw, 1.03rem);

  --gutter: clamp(1.25rem, .6rem + 3vw, 4.5rem);
  --stack: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --wrap: 1220px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  background: var(--accent); color: var(--ink); padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 600; z-index: 100;
  transition: top .18s var(--ease);
}
.skip:focus { top: 0; }

/* ─────────── type ─────────── */

h1, h2, h3 { font-weight: 640; letter-spacing: -.025em; line-height: 1.06; }
h1 { font-size: var(--t-h1); }
h1 em { font-style: normal; color: var(--accent); }
h2 { font-size: var(--t-h2); line-height: 1.1; }
h3 { font-size: var(--t-h3); letter-spacing: -.01em; line-height: 1.3; }

.eyebrow {
  font-family: var(--mono); font-size: .705rem; text-transform: uppercase;
  letter-spacing: .17em; color: var(--faint); margin-bottom: 1.1rem;
}
.lede, .section-lede { font-size: var(--t-lede); color: var(--muted); max-width: 56ch; }

/* ─────────── buttons ─────────── */

.btn {
  display: inline-flex; align-items: center; gap: .5em; justify-content: center;
  padding: .82em 1.5em; border-radius: var(--r-pill); border: 1px solid transparent;
  font: inherit; font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease);
}
.btn-sm { padding: .6em 1.15em; font-size: .875rem; }
.btn-accent {
  background: var(--accent); color: var(--ink); position: relative; overflow: hidden;
}
.btn-accent:hover { background: var(--accent-hi); transform: translateY(-1px); }
/* One specular sheen, reused from the studio: a skewed band crossing the metal.
   Slow — a glint, not a strobe. */
.btn-accent::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34%; left: -70%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg); pointer-events: none; animation: sheen 7s linear infinite;
}
.btn-accent:hover::after { animation-duration: 2.2s; }
@keyframes sheen { 0% { left: -70%; } 14% { left: 140%; } 100% { left: 140%; } }

.btn-ghost { border-color: var(--line-2); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-hi); background: var(--accent-soft); }

/* ─────────── header ─────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1rem var(--gutter);
  background: rgba(7, 9, 10, .72);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .62rem; text-decoration: none; margin-right: auto; }
.brand-mark, .cover-mark {
  fill: none; stroke: url(#g-mark); stroke-width: 1.7; stroke-linecap: round;
  color: var(--accent);   /* the bob's fill rides currentColor */
}
.brand-mark { width: 26px; height: 26px; flex: none; }
.wordmark { font-size: 1.22rem; font-weight: 680; letter-spacing: -.025em; }
.wordmark span { color: var(--accent); font-weight: 400; }

.site-nav { display: flex; gap: 1.8rem; }
.site-nav a {
  text-decoration: none; color: var(--muted); font-size: .92rem;
  transition: color .16s var(--ease);
}
.site-nav a:hover { color: var(--text); }

/* ─────────── hero ─────────── */

.hero {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center;
  padding: clamp(3rem, 2rem + 5vw, 6.5rem) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem);
  max-width: var(--wrap); margin: 0 auto;
}
/* A single faint pool of accent behind the fold — the background reads as lit
   rather than painted. */
.hero::before {
  content: ""; position: absolute; inset: -20% -10% 0; pointer-events: none; z-index: -1;
  background: radial-gradient(58% 52% at 62% 8%, var(--accent-soft), transparent 62%),
              radial-gradient(40% 40% at 18% 0%, var(--alt-soft), transparent 65%);
}
/* ── the film ──
   The hero doubles as a scroll stage. `.js` is set by the script, so with no
   JS the track has no extra height, nothing pins, and this is an ordinary hero
   with an ordinary page under it. Same for reduced motion, at the bottom. */
.film-track { position: relative; }
html.js .film-track { height: 560vh; }
html.js .hero { position: sticky; top: 0; min-height: 100vh; align-content: center; }

/* the three copy layers share one grid cell and crossfade */
.hero-copy { display: grid; }
.hero-copy > .film-layer { grid-area: 1 / 1; }
.film-layer { transition: opacity .45s var(--ease), transform .45s var(--ease); }
html.js .film-beats, html.js .film-offer { opacity: 0; transform: translateY(14px); pointer-events: none; }
html.js .film-layer.is-on { opacity: 1; transform: none; pointer-events: auto; }
html.js .film-layer.is-off { opacity: 0; transform: translateY(-14px); pointer-events: none; }

.film-beats { align-self: center; }
.film-beats .beat {
  grid-area: 1 / 1; font-size: var(--t-lede); color: var(--muted);
  max-width: 44ch; opacity: 0; transition: opacity .4s var(--ease);
}
.film-beats { display: grid; }
.film-beats .beat.is-on { opacity: 1; }
.film-beats .beat strong { color: var(--text); font-weight: 640; display: block; margin-bottom: .3rem; font-size: 1.35em; letter-spacing: -.02em; }
.beat-no {
  display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .2em;
  color: var(--accent); margin-bottom: .9rem;
}
.offer-h { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); margin-bottom: 1.1rem; }

.film-hint {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint); pointer-events: none;
  transition: opacity .4s var(--ease);
}
html:not(.js) .film-hint { display: none; }
.film-hint.is-gone { opacity: 0; }

.hero-copy h1 { margin-bottom: 1.4rem; }
.hero .lede { margin-bottom: 2.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.5rem; }
.hero-note {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}

/* ─────────── the plumb ─────────── */

.stage { margin: 0; }
.plumb { width: 100%; height: auto; display: block; overflow: visible; }

.plate { transition: opacity .4s var(--ease); }
.plate-bg { fill: var(--panel); stroke: var(--line); stroke-width: 1.2; transition: stroke .4s var(--ease), fill .4s var(--ease); }
/* The frames sit back a stop until the bob is over them — a candidate under
   consideration should be the brightest thing on the arc. */
.plate .frame { opacity: .62; transition: opacity .4s var(--ease); }
.plate.is-active .frame, .plate.is-anchor .frame { opacity: 1; }
.plate-id {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  fill: var(--muted); text-transform: uppercase;
}
.plate-verdict { font-family: var(--mono); font-size: 10px; fill: var(--faint); }
.plate .grade rect { fill: var(--danger); opacity: .16; stroke: var(--danger); stroke-width: 1.2; }
.plate .grade text {
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
  fill: var(--danger); text-anchor: middle; font-weight: 600;
}
.plate .grade.pass rect { fill: var(--ok); opacity: .14; stroke: var(--ok); }
.plate .grade.pass text { fill: var(--ok); }
/* The DEFAULT state is the finished one — every verdict stamped, the anchor
   locked, the bob hanging true. That is what a visitor sees with scripts off or
   motion reduced, and nothing about the story is missing. The `is-animating`
   class below is added by JS only when it is actually going to play the sweep,
   and it is what hides the verdicts so they can land one at a time. */
.plate .grade { opacity: 1; transition: opacity .45s var(--ease); }
.plate:not(.is-anchor) { opacity: .8; }
.plate.is-anchor .plate-bg { stroke: var(--accent); filter: drop-shadow(0 0 14px rgba(79, 157, 139, .4)); }
.plate.is-anchor .plate-id { fill: var(--alt); }
.plate.is-anchor .grade rect { fill: var(--accent); opacity: .16; stroke: var(--accent); }
.plate.is-anchor .grade text { fill: var(--accent-hi); }

/* considered — the bob is over this plate right now */
.plate.is-active { opacity: 1; }
.plate.is-active .plate-bg { stroke: var(--line-2); fill: var(--panel-2); }

/* mid-sweep: verdicts are withheld until the bob has hung over the plate */
.plumb.is-animating .plate .grade { opacity: 0; }
.plumb.is-animating .plate.is-graded .grade { opacity: 1; }
.plumb.is-animating .plate.is-anchor .plate-bg { stroke: var(--alt-line); filter: none; }
.plumb.is-animating .plate.is-anchor.is-locked .plate-bg {
  stroke: var(--accent); filter: drop-shadow(0 0 14px rgba(79, 157, 139, .4));
}

/* the swing scale — a gauge face for the instrument to travel across */
.scale-arc { fill: none; stroke: var(--line); stroke-width: 1.2; }
.tick { stroke: var(--line-2); stroke-width: 1.4; stroke-linecap: round; }
.tick.is-true { stroke: var(--alt); stroke-width: 2; opacity: .85; }
.scale-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  fill: var(--alt); text-anchor: middle; opacity: .8;
}

.cord { stroke: var(--line-2); stroke-width: 1.4; fill: none; }
.bob-face { fill: url(#g-plumb); opacity: .34; }
.bob-edge { fill: none; stroke: url(#g-plumb); stroke-width: 2.8; stroke-linejoin: round; }
.bob-shoulder { stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.pendulum {
  transform-box: view-box; transform-origin: 450px 16px;
  transition: transform 1.15s cubic-bezier(.37, .06, .28, 1);
}
/* a slow breathing glow on the bob, as in the studio */
.bob { filter: drop-shadow(0 0 10px rgba(79, 157, 139, .28)); animation: breathe 5.5s var(--ease) infinite; }
@keyframes breathe { 0%, 100% { opacity: .92; } 50% { opacity: 1; } }
.pendulum.is-settled .bob { filter: drop-shadow(0 0 20px rgba(79, 157, 139, .55)); }

.stage-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .19em;
  fill: var(--faint); text-anchor: middle;
}
.stage-caption {
  margin-top: 1rem; font-size: .875rem; color: var(--muted);
  max-width: 52ch; margin-inline: auto; text-align: center;
}

/* ─────────── proof ─────────── */

.proof {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) var(--stack);
}
.proof-list {
  list-style: none; display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r);
  grid-template-columns: repeat(4, 1fr); overflow: hidden;
}
.proof-list li {
  background: var(--bg-lift); padding: 1.6rem 1.35rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.proof-list strong {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem); font-weight: 640;
  letter-spacing: -.03em; color: var(--accent-hi); line-height: 1;
}
.proof-list span { font-size: .855rem; color: var(--muted); line-height: 1.45; }
.proof-note {
  margin-top: 1rem; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .06em; color: var(--faint); text-align: center;
}

/* ─────────── bands ─────────── */

.band {
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--gutter) var(--stack);
}
.band-alt {
  max-width: none; background: var(--bg-lift);
  border-block: 1px solid var(--line);
  padding-block: var(--stack);
}
.band-alt > * { max-width: var(--wrap); margin-inline: auto; }
.section-head { max-width: 62ch; margin-bottom: 3rem; }
.section-head h2 { margin-bottom: 1.1rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.25rem; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.6rem; transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.card h3 { margin-bottom: .7rem; color: var(--text); }
.card p { color: var(--muted); font-size: .93rem; }
.card em { font-style: italic; color: var(--accent-hi); }

/* the priority ladder */
.ladder {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; margin-bottom: 3rem;
}
.ladder li { background: var(--panel); padding: 1.5rem 1.35rem; }
.ladder .rung {
  display: inline-block; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--accent); border: 1px solid var(--accent-soft); background: var(--accent-soft);
  border-radius: var(--r-xs); padding: .2em .6em; margin-bottom: .85rem;
}
.ladder li:nth-child(1) .rung { color: var(--alt); background: var(--alt-soft); border-color: var(--alt-line); }
.ladder h3 { margin-bottom: .45rem; }
.ladder p { color: var(--muted); font-size: .88rem; }

.steps ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem;
}
.steps li {
  display: flex; align-items: center; gap: .6rem; flex: 1 1 190px;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: .65rem 1.15rem; font-size: .9rem; color: var(--text);
}
.steps li span { font-family: var(--mono); font-size: .76rem; color: var(--accent); }

/* ─────────── guide ─────────── */

.guide {
  display: grid; grid-template-columns: minmax(0, .68fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center;
  padding-top: var(--stack);
}
.guide-cover {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden;
  background:
    radial-gradient(85% 55% at 50% 22%, rgba(79, 157, 139, .16), transparent 68%),
    radial-gradient(120% 80% at 20% 0%, rgba(185, 138, 78, .13), transparent 60%),
    linear-gradient(158deg, var(--panel-2), #06080A);
  border: 1px solid var(--alt-line); box-shadow: var(--shadow-lg);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.3rem);
  display: flex; flex-direction: column;
}
.cover-kicker {
  font-family: var(--mono); font-size: .63rem; letter-spacing: .19em;
  color: var(--alt); text-transform: uppercase;
}
/* the instrument hangs from the top edge, as it does in the hero */
.cover-plumb { flex: 1; display: flex; flex-direction: column; align-items: center; min-height: 0; margin: .4rem 0 1.2rem; }
.cover-cord { flex: 1; width: 1px; background: var(--line-2); min-height: 12px; }
/* Sized off the cover's WIDTH, which is always definite — a percentage height
   inside a flex column has nothing to resolve against and collapses to nothing. */
.cover-plumb img {
  width: 21%; height: auto; flex: none; max-width: none;
  filter: drop-shadow(0 0 26px rgba(79, 157, 139, .3));
}
.cover-foot { margin-top: auto; }
.cover-title {
  font-size: clamp(1.75rem, 1rem + 3.4vw, 2.9rem); font-weight: 700;
  letter-spacing: -.035em; line-height: .98;
}
.cover-rule { width: 44px; height: 2px; background: var(--alt); margin: .9rem 0; border-radius: 2px; }
.cover-sub { font-size: .88rem; color: var(--muted); line-height: 1.4; }

.guide-copy h2 { margin-bottom: 1.1rem; }
.chapters { list-style: none; margin: 1.9rem 0; display: grid; gap: .6rem; }
.chapters li {
  position: relative; padding-left: 1.7rem; color: var(--muted); font-size: .93rem;
}
.chapters li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px;
  border: 1px solid var(--accent); border-radius: 2px; transform: rotate(45deg);
  background: var(--accent-soft);
}
.guide-status {
  border-left: 2px solid var(--alt); padding-left: 1.1rem;
  font-size: .92rem; color: var(--muted);
}
.guide-status strong { color: var(--text); }

/* ─────────── waitlist ─────────── */

.waitlist {
  max-width: 780px; text-align: center; padding-top: var(--stack);
}
.wl-head { margin-bottom: 2.4rem; }
.wl-head .section-lede { margin-inline: auto; }
.wl-head h2 { margin-bottom: 1.1rem; }

.wl-form {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.4rem); box-shadow: var(--shadow);
}
.wl-intent { border: 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.2rem; }
.wl-intent legend {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--faint); margin-bottom: .8rem; width: 100%; text-align: center;
}
.wl-intent label { cursor: pointer; }
.wl-intent input { position: absolute; opacity: 0; width: 0; height: 0; }
.wl-intent span {
  display: inline-block; padding: .5em 1.05em; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); font-size: .875rem; color: var(--muted);
  transition: all .16s var(--ease);
}
.wl-intent input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hi); }
.wl-intent input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.wl-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.wl-row input {
  flex: 1 1 240px; background: rgba(0, 0, 0, .32); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: .85em 1.25em; font: inherit; font-size: .97rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.wl-row input::placeholder { color: var(--faint); }
.wl-row input:focus {
  outline: none; border-color: rgba(79, 157, 139, .55); box-shadow: 0 0 0 3px var(--accent-soft);
}
.wl-row input[aria-invalid="true"] { border-color: var(--danger); }
.wl-row .btn { flex: 0 0 auto; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Was --faint at .8rem: the one line that sets the expectation before anyone
   types, rendered as the dimmest text in the section. Nudged up so it is read
   rather than skimmed — it is not decoration, it is the instruction. */
.wl-fine { margin-top: 1.1rem; font-size: .85rem; color: var(--muted); }

/* The post-submit panel. Occupies the room the form gives up, because that is
   the moment the message actually has to land. */
.wl-done {
  margin-top: 1.2rem; padding: 1.25rem 1.35rem;
  border: 1px solid var(--ok); border-radius: 14px;
  background: color-mix(in srgb, var(--ok) 7%, transparent);
}
.wl-done h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.wl-done p { font-size: .95rem; line-height: 1.6; }
.wl-done p + p { margin-top: .7rem; }
.wl-done .wl-why { font-size: .85rem; color: var(--muted); }
.wl-msg { margin-top: .9rem; font-size: .9rem; min-height: 1.4em; }
.wl-msg.ok { color: var(--ok); }
.wl-msg.err { color: var(--danger); }
.wl-form.is-done .wl-row, .wl-form.is-done .wl-intent, .wl-form.is-done .wl-fine { display: none; }

/* ─────────── faq ─────────── */

.faq-list { display: grid; gap: .75rem; max-width: 900px; }
.faq-list details {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.15rem 1.4rem; transition: border-color .2s var(--ease);
}
.faq-list details[open] { border-color: var(--line-2); }
.faq-list summary {
  cursor: pointer; font-weight: 600; font-size: 1rem; letter-spacing: -.01em;
  list-style: none; display: flex; align-items: flex-start; gap: .8rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before {
  content: "+"; font-family: var(--mono); color: var(--accent); flex: none;
  font-size: 1.05rem; line-height: 1.5; transition: transform .2s var(--ease);
}
.faq-list details[open] summary::before { content: "−"; }
.faq-list p { margin-top: .85rem; padding-left: 1.75rem; color: var(--muted); font-size: .93rem; }

/* ─────────── closing + footer ─────────── */

.closing {
  text-align: center; padding: var(--stack) var(--gutter);
  border-top: 1px solid var(--line);
  background: radial-gradient(60% 100% at 50% 100%, var(--accent-soft), transparent 70%);
}
.closing h2 { margin-bottom: 2rem; max-width: 20ch; margin-inline: auto; }

.site-footer {
  border-top: 1px solid var(--line); padding: 2.6rem var(--gutter);
  text-align: center; color: var(--muted); font-size: .875rem;
  display: grid; gap: .6rem; justify-items: center;
}
.foot-brand { display: flex; align-items: center; gap: .55rem; }
.foot-brand .brand-mark { width: 22px; height: 22px; }
.foot-brand .wordmark { font-size: 1.05rem; }
.foot-fine { color: var(--faint); font-size: .8rem; max-width: 62ch; }
.foot-fine a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.foot-fine a:hover { color: var(--accent-hi); }

/* ─────────── responsive ─────────── */

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .stage { order: 2; }
  .guide { grid-template-columns: 1fr; }
  .guide-cover { max-width: 340px; margin-inline: auto; }
  .proof-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .site-nav { display: none; }
  .proof-list { grid-template-columns: 1fr; }
  .steps li { flex-basis: 100%; }

  /* No film on a phone. A pinned 900-unit-wide instrument in a 375px viewport
     is a worse experience than the still, and the still already carries the
     whole story. The script reads this off the layout and stands down. */
  html.js .film-track { height: auto; }
  html.js .hero { position: static; }
  html.js .film-beats, html.js .film-offer { display: none; }
  html.js .film-intro { opacity: 1; transform: none; }
  html.js .film-hint { display: none; }
}

/* ─────────── motion ───────────
   The static state below IS the finished story: the bob hangs true over the
   anchor and every verdict is stamped. JS only adds the swing that gets there,
   so the graphic is complete without scripts and without motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* no pinning, no scrubbing — the hero is just a hero and the instrument is
     already at rest with every verdict stamped */
  html.js .film-track { height: auto; }
  html.js .hero { position: static; }
  html.js .film-beats, html.js .film-offer { display: none; }
  html.js .film-intro { opacity: 1; transform: none; }
  html.js .film-hint { display: none; }
}

/* the instrument steps back when the offer takes the stage */
.stage { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.stage.is-receding { opacity: .3; transform: scale(.92); }

/* ── guide: coming-soon marking ──────────────────────────────────────────────
   The page already said "Ships September 2026", but only in prose below the
   chapter list — by which point a reader has had a minute to form the
   impression the guide is on sale today. These put the state where the eye
   actually lands: on the cover, and at the head of the section. */
.soon {
  display: inline-block; margin-right: .6em; padding: .16em .62em;
  border: 1px solid currentColor; border-radius: 999px;
  font-size: .82em; letter-spacing: .06em; opacity: .85;
}
.cover-soon {
  /* Normal flow, directly under the kicker it belongs with. An absolutely
     positioned version at a guessed `top` overlapped the kicker by a few
     pixels — and a hand-tuned offset would only hold until the kicker's font
     or padding changed. Letting it stack cannot overlap by construction. */
  margin-top: .45rem;
  /* left, like the kicker it sits under — centring it read as a stray element */
  font-size: 10.5px; letter-spacing: .18em;
  opacity: .7;
}

/* Guide purchase button. Empty and hidden until checkout.js flips it on, so this
   costs nothing while the guide is still "coming soon". In normal flow rather
   than positioned — an absolutely-positioned badge here once overlapped the
   kicker by 5px, and flow layout cannot do that. */
.guide-buy { margin: 1.4rem 0 0; }
.guide-buy[hidden] { display: none; }
.guide-buy .btn { text-decoration: none; }

/* ── Plain-English lede, and who-does-what ─────────────────────────────────
   Added after an outside reader read the whole page and still could not say
   what Firmori was. The poetry that used to open still exists, immediately
   below — it earned its place, just not first. */
.lede-plain {
  color: var(--text);          /* brighter than .lede: this is the load-bearing sentence */
  max-width: 62ch;
}
.lede-plain strong { font-weight: 600; }
/* Three colours for three parties, reused by the numbered steps below, so the
   division of labour is the same shape in both places. */
.pl-you   { color: var(--accent-hi); }
.pl-prov  { color: var(--muted); }
.pl-firm  { color: var(--text); border-bottom: 1px solid var(--accent); }
.lede-kicker {
  font-family: var(--mono); font-size: .82rem; color: var(--accent-hi);
  margin-top: .85rem; letter-spacing: .01em;
}

.labour { list-style: none; margin: 0 0 2.6rem; padding: 0; display: grid; gap: .55rem; max-width: 70ch; }
.labour li {
  display: grid; grid-template-columns: 1.6rem 8.5rem 1fr; gap: .9rem; align-items: baseline;
  padding: .8rem .95rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-lift);
}
.lb-n    { font-family: var(--mono); font-size: .78rem; color: var(--faint); }
.lb-who  { font-weight: 600; color: var(--text); font-size: .95rem; }
.lb-what { color: var(--muted); font-size: .95rem; line-height: 1.5; }
/* Step 3 is the one nothing automates, so it is the one that looks different. */
.labour li.is-you { border-color: var(--accent); background: var(--accent-soft); }
.labour li.is-you .lb-who { color: var(--accent-hi); }
.labour li.is-you .lb-what strong { color: var(--text); }
@media (max-width: 620px) {
  .labour li { grid-template-columns: 1.5rem 1fr; }
  .lb-what { grid-column: 2; }
}

/* Short viewports: keep the waitlist button above the fold.
   Leading with the plain-English statement added real height to the hero, and
   on a 720px-tall window that pushed the CTA 92px out of sight — a regression
   against the version that had no statement at all. Rather than cut the copy
   that fixed the comprehension problem, compress the hero only where the
   constraint actually bites. Tall screens are unaffected. */
@media (max-height: 820px) {
  .hero-copy h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.03; }
  .hero-copy .lede-plain { font-size: .96rem; line-height: 1.5; }
  .hero-copy .lede-kicker { margin-top: .55rem; font-size: .78rem; }
  .hero-copy .hero-actions { margin-top: 1rem; }
  .hero-copy .lede:not(.lede-plain) { margin-top: 1rem; }
}