/* Hallmark · genre: editorial · macrostructure: Conversational FAQ (opened by H2 Split Diptych)
 * theme: Newsprint · tone: plain, first-person, unhedged · anchor hue: 75 paper / 28 accent
 * nav: N9 edge-aligned minimal · footer: Ft4 dense colophon · enrichment: none (typography only)
 * H2 knobs: ratio=7/5, right side=proof column, divider=hairline
 * F3 knobs: columns=3 (name/what/footnote), rules=every row, numbers=tabular
 * C1 knobs: shape=slab, density=spacious, adornment=none
 * Ft4 knobs: family=mono, layout=single block, includes=date + contact + disclosure
 * pre-emit critique: P5 H5 E4 S5 R4 V5
 *
 * WHY THIS SHAPE, in one paragraph, because the next person to touch this will want to know.
 * The old page was nine slabs of equal height, each with a heading at the same size, on one dark
 * surface. Nothing was dominant so nothing landed. The buyer arrives suspicious off a Reel and,
 * measured, goes hunting for the downside before deciding. So the page is now an interview: the
 * questions are the biggest type on the page, the answers are small, and the awkward questions
 * are asked in the words a sceptic would use. That gives the page a real second level, it puts
 * the negative signal on the page instead of leaving it out, and it means the rhythm changes on
 * every screen instead of repeating.
 */

@import url("/tokens.css");

/* Three families, self-hosted so nothing leaves the origin and the CSP stays shut.
   Variable fonts, latin subset, 132 KB for all three. */
@font-face {
  font-family: Newsreader;
  src: url("/fonts/newsreader.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/plex-sans.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

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

/* clip, never hidden: hidden makes a new scroll container and kills position: sticky below it */
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }

body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.62;
  padding-inline: max(var(--page-gutter), env(safe-area-inset-left));
  -webkit-tap-highlight-color: var(--color-tap);
}
@media (prefers-color-scheme: dark) { body { font-weight: 350; } }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;               /* roman at every size, no exceptions */
  margin: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
  letter-spacing: -0.021em;
}

p { margin: 0; }
a { color: inherit; }

::selection { background: var(--color-accent-soft); color: var(--color-ink); }

/* Focus rings appear instantly. Never transition the ring: a keyboard user needs it at frame one. */
:focus-visible {
  outline: var(--rule-heavy) solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--color-paper);
  color: var(--color-ink);
  padding: var(--space-sm) var(--space-md);
  z-index: var(--z-sticky);
}
.skip:focus { left: var(--page-gutter); top: var(--space-xs); }

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

/* ─── the shell ────────────────────────────────────────────────────────────────────────────
   One measure for prose (62ch), a wider one for the page. The FAQ answers sit at the prose
   measure; the questions escape it. That escape is the one deliberate grid-break on the page. */
.wrap { max-width: 78rem; margin-inline: auto; }

/* ─── C3 · the typographic link. A word, a rule under it, nothing else. ─────────────────── */
.link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--color-accent); text-decoration-thickness: 2px; }
}

/* On a phone a three-column table is a lie, so each row becomes a small stacked block: the name,
   what it is, then the footnote. The per-cell widths and the lead row's roomier padding both have
   to be unset by name, or specificity keeps the desktop values and the footnote column wraps into
   a 24%-wide ribbon down the side. */

/* ─── the buyer's own words. Verbatim, unparaphrased, with the count beside each. ─────────
   This is the one place a pull-quote escapes the prose measure. */
.said { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.said li { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-md); max-width: 62ch; }
.said q {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.3;
  quotes: "\201C" "\201D";
}
.said span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-neutral);
  margin-top: var(--space-xs);
}

/* ─── Ft4 · the colophon. One block of small mono: who made it, when, and how to reach me. ─
   The refund promise points here, so the contact route on this page is load-bearing and it has
   to stay real. */
.foot {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-xl) var(--space-3xl);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.75;
  color: var(--color-neutral);
}
.foot p { max-width: 74ch; }
.foot p + p { margin-top: var(--space-sm); }
.foot a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; white-space: nowrap; }

/* ─── /breakdown and /example: the reading pages ──────────────────────────────────────────
   Same tokens, one measure, no interview shape. These are documents and they read as documents. */
.doc { padding-block: var(--space-lg) var(--space-3xl); max-width: 64ch; margin-inline: auto; }
.doc__back { font-size: var(--text-xs); font-weight: 600; text-decoration-color: var(--color-accent); white-space: nowrap; }
.doc__kick {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--color-neutral);
  margin-block: var(--space-xl) var(--space-sm);
}
.doc h1 { font-size: var(--text-display-s); font-weight: 600; line-height: 1.06; margin-bottom: var(--space-lg); }
.doc h2 {
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.2;
  margin-block: var(--space-2xl) var(--space-sm);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.doc h3 { font-size: var(--text-md); font-weight: 600; margin-block: var(--space-lg) var(--space-xs); }
.doc p + p, .doc ul + p, .doc ol + p, .doc p + ul, .doc p + ol { margin-top: var(--space-md); }
.doc .lede { font-size: var(--text-md); line-height: 1.5; }
.doc ul, .doc ol { padding-left: 1.15em; margin: var(--space-md) 0 0; }
.doc li { margin-bottom: var(--space-xs); }
.doc .price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-neutral); }
.doc figure { margin: var(--space-lg) 0 0; }
.doc figcaption { font-size: var(--text-sm); color: var(--color-neutral); margin-top: var(--space-xs); }
.doc video { width: 100%; height: auto; display: block; background: var(--color-paper-3); }
.doc__note { font-size: var(--text-sm); color: var(--color-neutral); margin-top: var(--space-md); }
.doc__note a { color: var(--color-ink); }

/* a hairline-ruled list: what people already pay for, and what the buyers said. The source and
   the count ride under each item in mono, because a number without a source is a number to doubt. */
.sells { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.sells li { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-md); }
.sells a { text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
.sells span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  color: var(--color-neutral);
  margin-top: var(--space-2xs);
}

/* what is inside the thing it wrote */
.inside { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.inside li { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-sm); }
.inside li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }

/* the product itself, quoted at length. Tighter measure, since this is the one long read. */
.read { max-width: 60ch; }
.read h3 { margin-block: var(--space-2xl) var(--space-sm); }
.read p + p, .read ol + p, .read ul + p, .read p + ol, .read p + ul { margin-top: var(--space-md); }
.read ol, .read ul { padding-left: 1.15em; margin: var(--space-md) 0 0; }
.read li { margin-bottom: var(--space-xs); }

/* the twelve-row table. Scrolls inside its own box rather than pushing the document sideways. */
.grid { overflow-x: auto; margin-top: var(--space-md); }
.grid table { border-collapse: collapse; min-width: 44rem; font-size: var(--text-sm); }
.grid th, .grid td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}
.grid thead th { border-top: var(--rule-heavy) solid var(--color-ink); font-weight: 600; }

/* the three videos, with the caption and the reply you send. */
.vids { list-style: none; margin: var(--space-lg) 0 0; padding: 0; }
.vid { border-top: var(--rule-heavy) solid var(--color-ink); padding-block: var(--space-lg) var(--space-xl); }
.vid video { width: 100%; max-width: 20rem; height: auto; aspect-ratio: 9 / 16; display: block; background: var(--color-paper-3); margin-bottom: var(--space-md); }
.vid h3 { margin-block: 0 var(--space-md); }
.vid pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0 0 var(--space-md);
  padding: var(--space-md);
  background: var(--color-paper-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.k {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--color-neutral);
  margin-bottom: var(--space-2xs);
}

/* a code block gets a typographic frame: a rule, a label, a rule. Never a drawn window with
   traffic-light dots, because the reader already has a real terminal. */
.cmd { margin-top: var(--space-md); border-block: var(--rule-hair) solid var(--color-rule-strong); }
.cmd pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0;
  padding-block: var(--space-md);
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cmd button {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-sm);
  margin-bottom: var(--space-sm);
  background: none;
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule-strong);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cmd button:hover { background: var(--color-ink); color: var(--color-paper); }
}
.chain {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin: var(--space-md) 0 0;
  padding: var(--space-md);
  background: var(--color-paper-2);
  overflow-x: auto;
}

/* the ask on /breakdown */
.keep { margin-top: var(--space-2xl); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule-strong); }
.keep h2 { margin-top: 0; border-top: 0; padding-top: 0; }
.keep form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); }
.keep input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 48px;
  padding: var(--space-xs) var(--space-sm);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-none);
}
.keep input[type="email"]::placeholder { color: var(--color-neutral); }
.keep button[type="submit"] {
  min-height: 48px;
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  white-space: nowrap;
  background: var(--color-ink);
  color: var(--color-paper);
  border: var(--rule-heavy) solid var(--color-ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .keep button[type="submit"]:hover { background: var(--color-accent); border-color: var(--color-accent); }
}
.keep button[type="submit"]:disabled { border-style: dashed; opacity: 0.6; cursor: wait; }
.keep .said { font-size: var(--text-sm); margin-top: var(--space-sm); border: 0; padding: 0; list-style: none; min-height: 1lh; }
.keep .said[hidden] { display: block; visibility: hidden; }   /* the slot is held open, so an answer never shoves the page down */
.keep .said.bad { color: var(--color-accent); }
.trap { position: absolute; left: -9999px; }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 120ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
  }
  .rise { animation: fade 120ms linear both; animation-delay: 0ms; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

/* The one purchase link on this page, at the end, after the reader has been paid twice over.
   Set like the homepage's buttons rather than like this page's prose, because it is the one
   element here that belongs to the offer. */
.buy {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 14px 26px;
  border-radius: 3px; text-decoration: none;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  background: var(--color-accent); color: var(--color-paper);
  transition: transform 0.16s, box-shadow 0.16s;
}
.buy:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); }