/* ─────────────────────────────────────────────────────────────────────────
   Advizel — public site stylesheet.

   ── THE DESIGN, IN ONE PARAGRAPH ──────────────────────────────────────────
   The page is a product page: the app carries it, the words get out of the
   way. Full-bleed BANDS alternate ink / paper / vellum, and each band holds
   one thing — a phone at real size beside a headline and a single line. The
   cover is ink: a display headline, the Today screen at near-half-width, and
   beneath both, a four-cell DECK that states the whole proposition in fifteen
   words (it is this page's own og:description, split at its commas). Detail
   does not live in paragraphs; it lives in two structures borrowed from the
   app itself — the ledger row (label left, value right, tabular figures) and
   the disclosure (the FAQ). The serif is reserved for display sizes, the deck,
   the price, and the names of screens (in italic). Amber is a mark — a 2px
   tick, a step numeral, a link — never a surface and never a large field.

   ── HARD RULES CARRIED FROM CLAUDE.md AND THE PRODUCT CONSTITUTION ────────
     1. NO RED, EVER. Hard information is warm amber. There is no red hex in
        this file and none may be added — `colors.risk` is deliberately
        aliased to amber in the app and the same holds here.
     2. Warm ink / amber / serif. Background is warm off-white (paper, morning
        light) — never stark white, never pure black.
     3. No emoji, no drop-shadow soup. Two shadows exist on this page: the
        device frame's, and nothing else. The one gradient is the warm glow on
        the ink bands, which is the app's own dark-card surface, not
        decoration — see the measured contrast table below, which is computed
        against the COMPOSITED colour, not the flat ink.

   ── CONTRAST, MEASURED (every text/background pair on the site) ───────────
   On paper #F7F4ED:
     ink        #1C1B17  15.69:1   body, headings, ink buttons
     ink-2      #57544E   6.87:1   secondary text, labels, eyebrows, captions
     amber-text #8A5C2B   5.24:1   links, step numerals — the ONLY amber text
   On vellum #EFEAE0:
     ink        #1C1B17  14.37:1
     ink-2      #57544E   6.29:1
     amber-text #8A5C2B   4.80:1
   On ink #1C1B17:
     paper      #F7F4ED  15.69:1   headings, body, primary button fill
     paper-2    #C7C4BE   9.90:1   secondary text, nav, captions
     amber-dark #D89A5C   7.14:1   the cover eyebrow and the pending-CTA rule
   On ink AT THE BRIGHTEST POINT OF THE WARM GLOW — the worst case anywhere on
   an ink band, composited #322920 (ink under rgba(184,128,75,0.14)):
     paper      #F7F4ED  12.99:1
     paper-2    #C7C4BE   9.17:1
     amber-dark #D89A5C   5.91:1
   The glow peaks behind the phone, well right of any text, so real text sits
   nearer the flat-ink figures than the worst case — but the worst case is what
   is stated, and it clears AA for both normal and large text.
   --amber #B8804B is DECORATIVE ONLY (deck ticks, the pending-CTA top rule).
   It is 3.07:1 on paper and is never used for text or to carry meaning alone.
   --amber-text is a web-only darkening of the app's colors.accentPressed
   (#94632F), identical hue (31 degrees), one step deeper: #94632F measures
   4.39:1 on vellum, just under AA, and the text that sits there is small.

   ── FONTS ────────────────────────────────────────────────────────────────
   Newsreader (display) and Inter (UI) are the app's own faces. They are
   served from THIS origin as subsetted WOFF2 (~49 KB for all four files),
   built offline from the copies already vendored in the repo's
   node_modules/@expo-google-fonts. Both are SIL OFL; the licences sit beside
   the files in /assets/fonts/. NOTHING is fetched from Google Fonts or any
   other third party at runtime, and `font-src 'self'` in _headers enforces
   that. System stacks remain behind them as fallbacks.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Faces ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Advizel Newsreader";
  src: url("/assets/fonts/newsreader-600.10b07a4c.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Advizel Newsreader";
  src: url("/assets/fonts/newsreader-400italic.6741a830.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Advizel Inter";
  src: url("/assets/fonts/inter-400.9643b48a.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Advizel Inter";
  src: url("/assets/fonts/inter-600.3d39b518.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────────────────── */

:root {
  --paper: #f7f4ed;
  --vellum: #efeae0;
  --ink: #1c1b17;
  --ink-2: #57544e;
  --paper-2: #c7c4be;
  --amber: #b8804b;
  --amber-text: #8a5c2b;
  --amber-dark: #d89a5c;

  --line: rgba(28, 27, 23, 0.13);
  --line-strong: rgba(28, 27, 23, 0.26);
  --line-on-dark: rgba(247, 244, 237, 0.16);
  --line-on-dark-strong: rgba(247, 244, 237, 0.3);

  --serif: "Advizel Newsreader", "Iowan Old Style", "Palatino Linotype",
    Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: "Advizel Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --gutter: clamp(1.15rem, 4vw, 3rem);
  --wide: 74rem;
  --measure: 34rem;
  --r: 4px;
  --band-y: clamp(3.75rem, 9vw, 7.5rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--amber-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--ink); }

/* --amber-text is tuned for paper (5.24:1) and measures 1.9:1 on ink. Any
   plain link that lands on an ink band takes the on-dark amber instead
   (7.14:1 on flat ink, 5.91:1 at the brightest point of the warm glow). The
   live case is the waitlist's mailto fallback, which is what a visitor with
   JavaScript off sees in the cover and the closing call to action. */
.band--ink a:not(.btn):not(.wordmark),
.cover a:not(.btn):not(.wordmark) { color: var(--amber-dark); }
.band--ink a:not(.btn):not(.wordmark):hover,
.cover a:not(.btn):not(.wordmark):hover { color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--amber-text);
  outline-offset: 3px;
  border-radius: 2px;
}
/* The default ring is tuned for paper. Anywhere it would be drawn ON ink it
   takes the on-dark amber instead: --amber-text is 1.9:1 against ink, and a
   focus indicator owes 3:1 against what it sits on (WCAG 2.2 non-text
   contrast); --amber-dark is 7.14:1 there. `.skip` is included even though it
   is a child of <body>, because the surface it lands on when focused is the
   ink masthead — its own paper chip does not help, the ring is drawn outside
   it. */
.masthead :focus-visible,
.band--ink :focus-visible,
.cover :focus-visible,
.site-foot :focus-visible,
.doc-head :focus-visible,
.skip:focus-visible,
.skip:focus {
  outline-color: var(--amber-dark);
}

/* Clipped rather than pushed off-canvas: a negative `left` can widen the
   scroll box on narrow viewports. */
.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  /* Paper on ink, not ink on ink: the first surface it lands on is the dark
     masthead, where an ink-filled box is invisible. */
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  z-index: 30;
}
.skip:focus {
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  padding: 0.75rem 1.125rem;
  overflow: visible;
  clip-path: none;
}

/* ── Type scale ────────────────────────────────────────────────────────── */

h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  margin: 0 0 0.4em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  line-height: 1.0;
  letter-spacing: -0.026em;
}
h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.021em;
}

p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Screen names and in-app labels are set in the serif italic — the same
   convention a publication uses for the title of a work. */
em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.06em;
}

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The lower half of the page has no screenshots, so it uses the same grid the
   shelves do: a heading in one half, the structured content in the other. A
   single measure-limited column here left ~350px of dead gutter at 1280 and
   made every band below the fold look left-weighted. */
.split { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 58rem) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
}
.split-head { max-width: 34rem; }
.split-body { max-width: 36rem; }
/* Utilities carry their own top margin for the single-column case; in the
   second cell of the grid that margin becomes a stray gap. */
.split-body > :first-child { margin-top: 0; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 1.1rem;
}
/* The amber tick. Decorative — it carries nothing a screen reader needs. */
.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 1.75rem;
  height: 2px;
  background: var(--amber);
}
.eyebrow--dark { color: var(--amber-dark); }
.eyebrow--dark::before { background: var(--amber-dark); }

.lede {
  font-size: clamp(1.12rem, 1.75vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: var(--measure);
}

.note {
  margin-top: 1.6rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: var(--measure);
}

/* ── Masthead ──────────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
  /* On the band, not on the inner wrap — a rule that stops at the measure
     reads as a stray line rather than the edge of a bar. */
  border-bottom: 1px solid var(--line-on-dark);
}
.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 2rem;
  padding-block: 0.9rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--paper);
  text-decoration: none;
  flex: 0 0 auto;
}
.wordmark:hover { color: var(--paper); }

/* The app icon is a dark tile, so on an ink band the tile itself has almost
   no edge. Two fixes, both deliberate: set it big enough that the amber path
   and the apex dot resolve (34px, not the 20px a favicon-sized mark would
   want), and give it a hairline paper ring so the tile reads as an object
   rather than a smudge. */
.mark {
  flex: 0 0 auto;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 24%;
  box-shadow: 0 0 0 1px rgba(247, 244, 237, 0.24);
}
.wordmark--foot .mark { width: 2rem; height: 2rem; }

/* Below 48rem the four section links cannot fit on one line beside the
   wordmark, and wrapping them makes a 135px STICKY bar that eats a seventh of
   a phone screen on every scroll. The page is one short vertical read with a
   closing call to action, so on a phone the scroll is the navigation. */
.masthead nav { display: none; }
@media (min-width: 48rem) {
  .masthead nav {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1.6rem;
    font-size: 0.9rem;
  }
}
.masthead nav a {
  color: var(--paper-2);
  text-decoration: none;
  padding-block: 0.15rem;
  border-bottom: 1px solid transparent;
}
.masthead nav a:hover {
  color: var(--paper);
  border-bottom-color: var(--amber-dark);
}

/* Anchor targets must clear the sticky masthead. */
section[id] { scroll-margin-top: 4.5rem; }

/* ── Bands: the full-bleed surfaces the page is built from ─────────────── */

.band,
.cover {
  position: relative;
  padding-block: var(--band-y);
}
.band--paper { background: var(--paper); }
.band--vellum { background: var(--vellum); }
.band--ink,
.cover {
  background: var(--ink);
  color: var(--paper);
}
.band--ink h2,
.cover h1 { color: var(--paper); }
.band--ink .lede,
.band--ink .note,
.cover .lede { color: var(--paper-2); }

/* The warm glow. This is the app's own dark-card surface, not decoration —
   the Today card and the app header both carry it. It peaks behind the phone
   and fades to nothing across the text column. Contrast is stated above
   against the composited worst case, not the flat ink. */
.band--ink::before,
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    115% 85% at 78% 18%,
    rgba(184, 128, 75, 0.14),
    rgba(184, 128, 75, 0) 62%
  );
  pointer-events: none;
}
.band > .wrap,
.cover > .wrap { position: relative; z-index: 1; }

/* ── Cover ─────────────────────────────────────────────────────────────── */

.cover { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem); }

.cover-grid {
  display: grid;
  gap: clamp(2.75rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .cover-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

.cover-text .lede { max-width: 28rem; }
.cover-figure { justify-self: center; }

/* The deck: the whole proposition, four fragments, no sentence to read. */
.deck {
  list-style: none;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding: clamp(2.25rem, 4vw, 3rem) 0 0;
  border-top: 1px solid var(--line-on-dark);
  display: grid;
  gap: 1.75rem 2.5rem;
}
@media (min-width: 30rem) { .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .deck { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.deck > li {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--paper);
  padding-top: 1rem;
  border-top: 2px solid var(--amber-dark);
}

/* ── Device frame ──────────────────────────────────────────────────────── */

.device {
  width: min(var(--dev-w, 20rem), 100%);
  margin-inline: auto;
  padding: 0.35rem;
  background: #100f0c;
  border-radius: 1.75rem;
  box-shadow:
    0 0 0 1px rgba(28, 27, 23, 0.08),
    0 34px 60px -32px rgba(28, 27, 23, 0.55);
}
.device img {
  display: block;
  width: 100%;
  border-radius: 1.45rem;
  background: var(--paper);
}
.device--hero {
  --dev-w: clamp(15rem, 28vw, 21.5rem);
  box-shadow:
    0 0 0 1px rgba(247, 244, 237, 0.14),
    0 48px 80px -44px rgba(0, 0, 0, 0.9);
}
.band--ink .device {
  box-shadow:
    0 0 0 1px rgba(247, 244, 237, 0.14),
    0 44px 74px -42px rgba(0, 0, 0, 0.9);
}

/* A screenshot shown from the top down. Square bottom corners and no bottom
   bezel so the crop reads as a crop, not as a short phone. */
.device--peek {
  padding-bottom: 0;
  border-radius: 1.75rem 1.75rem 0 0;
}
.device--peek img {
  aspect-ratio: 560 / 700;
  object-fit: cover;
  object-position: top center;
  border-radius: 1.45rem 1.45rem 0 0;
}

figure { margin: 0; }

figcaption {
  margin-top: 1.1rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-2);
  text-align: center;
}
.cover figcaption,
.band--ink figcaption { color: var(--paper-2); }

/* ── Shelf: one phone, one headline, one line ──────────────────────────── */

.shelf {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
/* Equal halves. Unequal columns left a dead gutter on one side at 1280+ —
   with halves, the phone centres in one and the text fills the other, and the
   composition balances at every width above the breakpoint. `.shelf--flip`
   needs no rule: the markup simply puts the text first. */
@media (min-width: 58rem) {
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.shelf-figure { justify-self: center; }
.shelf-figure .device { --dev-w: clamp(15rem, 26vw, 20.5rem); }
.shelf-text { max-width: 34rem; }

/* ── Steps: a real sequence, so the numerals earn their place ──────────── */

.steps {
  list-style: none;
  counter-reset: step;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.steps > li {
  position: relative;
  padding: 1.15rem 0 1.15rem 3rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  font-weight: 600;
  line-height: 1.4;
}
.steps > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.4rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--amber-text);
}

/* ── Ledger rows: the app's own grammar, at page width ─────────────────── */

/* Label left, value right, tabular figures. Per CLAUDE.md's FactRow rule the
   TEXT-valued side is the one allowed to take its own line. */
.facts {
  margin: clamp(1.75rem, 4vw, 2.25rem) 0 0;
  border-top: 1px solid var(--line-strong);
}
.facts > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.5rem;
  justify-content: space-between;
  padding: 0.78rem 0;
  border-bottom: 1px solid var(--line);
}
/* CLAUDE.md's FactRow rule, money-valued form: the LABEL is the side allowed
   to shrink and wrap, the VALUE never is. Every value in these ledgers is
   short and definitive ("Encrypted", "None, ever", "Any time") — the earlier
   text-valued form, with `min-width: 55%` on the value, forced "Street
   address, SSN, government ID / Not collected" onto two lines for no reason. */
.facts dt {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--ink-2);
  font-size: 0.97rem;
}
.facts dd {
  flex: 0 0 auto;
  margin: 0;
  text-align: right;
  font-weight: 600;
  font-size: 0.97rem;
  font-variant-numeric: tabular-nums;
}

/* Ledger rows on an ink band: the hairlines and the two text weights invert.
   Measured against the composited worst case in the header table — paper is
   12.99:1 there and paper-2 is 9.17:1. */
.band--ink .facts,
.cover .facts { border-top-color: var(--line-on-dark-strong); }
.band--ink .facts > div,
.cover .facts > div { border-bottom-color: var(--line-on-dark); }
.band--ink .facts dt,
.cover .facts dt { color: var(--paper-2); }
.band--ink .facts dd,
.cover .facts dd { color: var(--paper); }

/* The feature index: what it is, and what it gives you. Two columns of an
   index, never a stack of paragraphs. */
.ledger {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  border-top: 1px solid var(--line-strong);
}
.ledger > div {
  display: grid;
  gap: 0.2rem 2.5rem;
  padding: clamp(1rem, 2vw, 1.4rem) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 48rem) {
  .ledger > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: baseline;
  }
}
.ledger dt {
  margin: 0;
  font-weight: 600;
  font-size: clamp(1rem, 1.35vw, 1.1rem);
  line-height: 1.35;
}
.ledger dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.97rem;
  line-height: 1.55;
}

/* ── Pricing ───────────────────────────────────────────────────────────── */

.price {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6.5vw, 4.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.026em;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0.5rem;
}
.price-figure { font-variant-numeric: tabular-nums; }
.price-sub {
  margin: 0;
  color: var(--ink-2);
  font-size: 1.02rem;
}
/* --ink-2 measures 2.2:1 on ink, so every utility that defaults to it MUST be
   inverted for the ink bands. The complete set is: .lede, .note, .price-sub,
   .price-anchor, .facts dt, figcaption, .trust-line, .also-line, .wl-status,
   and the plain link colour (see below). Add a new one and it belongs here
   too — this is the list, not an example. */
.band--ink .price-sub,
.cover .price-sub { color: var(--paper-2); }
/* The anchor figure. Set as a note, not as a headline — it is the sample
   account's number, and it must never read as the visitor's. */
.price-anchor {
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  max-width: var(--measure);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.band--ink .price-anchor {
  border-top-color: var(--line-on-dark);
  color: var(--paper-2);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  max-width: 100%;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Primary = INK, per the app (the amber is for attention, not for buttons). */
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: #000; color: var(--paper); }

.btn--on-dark { background: var(--paper); color: var(--ink); }
.btn--on-dark:hover { background: #fff; color: var(--ink); }

.btn--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--quiet:hover { background: rgba(28, 27, 23, 0.05); color: var(--ink); }

.btn--quiet-on-dark {
  color: var(--paper);
  border-color: var(--line-on-dark-strong);
}
.btn--quiet-on-dark:hover {
  background: rgba(247, 244, 237, 0.08);
  color: var(--paper);
}

/* The pre-launch state of the Download button. It is a <span>, not a link:
   there is nothing to go to yet, and a dead link is worse than a plain
   statement. It reads as a STATEMENT rather than a control — no fill, a
   single amber rule along the top edge, default cursor. See the LISTING_LIVE
   flag at the top of index.html. */
.btn--pending {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--amber);
  border-radius: 0 0 var(--r) var(--r);
  cursor: default;
}
.btn--pending-on-dark {
  color: var(--paper);
  border-color: var(--line-on-dark-strong);
  border-top-color: var(--amber-dark);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}
/* On a phone, auto-width controls stack at four different widths and read as
   debris. Below 30rem every control takes the full measure. */
@media (max-width: 30rem) {
  .cta-row .btn,
  .wl-input,
  .wl-btn { width: 100%; flex-basis: 100%; }
}

/* ── Waitlist ──────────────────────────────────────────────────────────── */

/* Shown only when BOTH JavaScript and an endpoint exist (`.js .wl` are set by
   the SITE CONFIG script). Otherwise the mailto fallback below stands in, so
   a visitor never meets a control that quietly does nothing. */
.waitlist { display: none; }
.wl .waitlist {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.6rem;
  max-width: 29rem;
  margin-top: 1.15rem;
}
.waitlist-fallback { margin-top: 1.15rem; }
.wl .waitlist-fallback { display: none; }

/* Field fill measures #2B2A26 composited on flat ink and #403727 at the
   glow's brightest point. Paper text is 13.09:1 and 10.62:1 on those; the
   paper-2 placeholder is 9.24:1 and 7.50:1. Both clear AA everywhere. */
.wl-input {
  flex: 1 1 11rem;
  min-width: 0;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: rgba(28, 27, 23, 0.04);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.3;
}
.wl-input::placeholder { color: var(--ink-2); opacity: 1; }
.waitlist--on-dark .wl-input {
  border-color: var(--line-on-dark-strong);
  background: rgba(247, 244, 237, 0.07);
  color: var(--paper);
}
.waitlist--on-dark .wl-input::placeholder { color: var(--paper-2); }

.wl-btn { flex: 0 0 auto; }

.wl-status {
  flex: 1 0 100%;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.wl-status:empty { display: none; }
.waitlist--on-dark .wl-status { color: var(--paper-2); }
/* Trouble is amber, never red — same rule as the app. */
.waitlist[data-state="error"] .wl-status { color: var(--amber-text); }
.waitlist--on-dark[data-state="error"] .wl-status { color: var(--amber-dark); }
.waitlist[data-state="done"] .wl-status { color: var(--ink); font-weight: 600; }
.waitlist--on-dark[data-state="done"] .wl-status { color: var(--paper); font-weight: 600; }

/* Once they're on the list there is nothing left to press. */
.waitlist[data-state="done"] .wl-input,
.waitlist[data-state="done"] .wl-btn { display: none; }
.wl-btn[disabled] { opacity: 0.6; cursor: default; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.trust-line {
  margin-top: 1.15rem;
  font-size: 0.93rem;
  color: var(--ink-2);
}
.also-line {
  margin-top: 0.3rem;
  font-size: 0.87rem;
  color: var(--ink-2);
}
.cover .trust-line,
.cover .also-line,
.band--ink .trust-line,
.band--ink .also-line { color: var(--paper-2); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line-strong);
}
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 2.5rem 1.1rem 0;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.4;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 1.05rem;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 400;
  color: var(--amber-text);
}
.faq details[open] summary::after { content: "\2013"; }
.faq .answer {
  padding: 0 0 1.35rem;
  color: var(--ink-2);
  font-size: 0.98rem;
  max-width: var(--measure);
}

/* ── Closing ───────────────────────────────────────────────────────────── */

.closing-inner { max-width: 42rem; }
.closing h2 { font-size: clamp(2.2rem, 5.4vw, 3.5rem); margin-bottom: 0; }

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-foot {
  background: var(--ink);
  color: var(--paper-2);
  /* The closing CTA is also ink, so without this the two run together into
     one undifferentiated slab. */
  border-top: 1px solid var(--line-on-dark);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.93rem;
}
.site-foot a {
  color: var(--paper-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-foot a:hover {
  color: var(--paper);
  border-bottom-color: var(--amber-dark);
}

.foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem 2.5rem;
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line-on-dark);
}
.wordmark--foot { font-size: 1.3rem; }

.foot-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
}

.foot-fine { padding-top: clamp(1.35rem, 3vw, 1.75rem); }
.site-foot .fine {
  font-size: 0.79rem;
  line-height: 1.6;
  color: var(--paper-2);
}
.foot-fine .fine { max-width: 52rem; }
.site-foot .fine + .fine { margin-top: 0.85rem; }

/* The generated legal pages emit a simpler footer (two bare <p> children).
   Give those the document's own measure so the footer keeps the same left
   edge as the policy text above it — no extra markup required. */
.site-foot > p {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  font-size: 0.79rem;
  line-height: 1.6;
}
.site-foot > p + p { margin-top: 0.85rem; }

/* ── Legal document pages ──────────────────────────────────────────────── */

/* The generated legal pages have no inner wrapper inside <header>, so the ink
   band is full-bleed and its CONTENT is centred with padding instead — same
   measure as .prose below it, no extra markup required. */
.doc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  background: var(--ink);
  padding: 1.25rem max(var(--gutter), calc((100% - 46rem) / 2 + var(--gutter)));
}
.doc { background: var(--paper); }
.doc-head .wordmark { color: var(--paper); }
.doc-head nav { margin-left: auto; font-size: 0.92rem; }
.doc-head nav a {
  color: var(--paper-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.doc-head nav a:hover { color: var(--paper); border-bottom-color: var(--amber-dark); }

.prose {
  background: var(--paper);
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(3rem, 7vw, 5rem);
}
.prose .eyebrow { margin-bottom: 1rem; }
.prose h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.25rem);
  margin-bottom: 0.6rem;
}
.prose h2 {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  margin-top: 2.5rem;
  margin-bottom: 0.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.prose .meta {
  color: var(--ink-2);
  font-size: 0.92rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-strong);
}
.prose .lede {
  font-size: clamp(1.09rem, 1.6vw, 1.24rem);
  color: var(--ink);
  margin-bottom: 1.5rem;
  max-width: none;
}
.prose p { color: var(--ink-2); }
.prose ul { padding-left: 1.15rem; margin: 0 0 1rem; color: var(--ink-2); }
.prose li { margin-bottom: 0.5rem; }
.prose section { margin-bottom: 0.5rem; }

/* ── Motion ────────────────────────────────────────────────────────────── */

/* Opt-IN. `.reveal-on` is added by a script in index.html only when
   prefers-reduced-motion is NOT set, so with JavaScript off — or with reduced
   motion on — none of these rules exist and everything is simply visible. */
.reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
.reveal-on [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.65, 0.25, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Print ─────────────────────────────────────────────────────────────── */

@media print {
  .skip, .masthead nav, .doc-head nav, .foot-nav { display: none; }
  body, .prose { background: #fff; }
  .masthead, .cover, .band--ink, .site-foot, .doc { background: #fff; color: #000; }
  .masthead .wordmark, .doc-head .wordmark, .cover h1, .cover .lede,
  .band--ink h2, .band--ink .lede, .deck > li,
  .site-foot, .site-foot a, .site-foot .fine { color: #000; }
  .cover::before, .band--ink::before { display: none; }
  .device { box-shadow: none; }
  .reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; }
}