/* printmoney.ai homepage.
 *
 * The structure follows the shape that sells in this market, measured at
 * research/strategy/2026-09-20-fidelity-audit.md: three cycling grounds with a hairline grid, the
 * two-level type rhythm (big display against 9-12px tracked mono and almost nothing between), the
 * component kit (eyebrow, stat, live-pill, shot, price-card, timeline, compare table, faq, close),
 * the section rhythm, and the rule that the price rides inside the button label. Every word, every
 * image and every colour value here is our own.
 *
 * Our anchor hue is the proof-reader red from the old page. Taking the shape of a colour SYSTEM
 * (three grounds, one accent, one ok, one no, text in three alpha tiers) is not the same as taking
 * its hex values, and taking the values would make this a visible knock-off of one page rather
 * than a page in the genre.
 *
 * /example runs on this sheet too as of 2026-09-21. /breakdown is still the light editorial page
 * on site.css, because it is a document rather than an offer.
 */

/* Self-hosted, latin subset, 138 KB for all four. Nothing leaves the origin and the CSP stays
   shut. Archivo Black (SIL OFL, licence beside the file) carries every display role at 900: Plex
   Sans tops out at 700, and the audit measured every heading on this page landing one to two
   weights under the pages it sits beside. Plex Sans keeps the body. Newsreader ships upright only,
   so the second display voice is roman, not italic. */
@font-face {
  font-family: Archivo;
  src: url("/fonts/archivo-black.woff2") format("woff2");
  font-weight: 900;
  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: Newsreader;
  src: url("/fonts/newsreader.woff2") format("woff2");
  font-weight: 200 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;
}

:root {
  color-scheme: dark light;

  --display: Archivo, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* three grounds, cycled void -> egg -> ink; dark is the default because the page is read at
     night off a phone */
  --void: oklch(13.5% 0.003 60);
  --ink: oklch(17% 0.0035 55);
  --egg: oklch(21.5% 0.004 45);
  --end: oklch(25% 0.004 40);
  --grid-line: rgba(255, 255, 255, 0.055);

  --accent: oklch(70% 0.145 33);
  --accent-deep: oklch(78% 0.115 38);
  --accent-soft: rgba(255, 138, 106, 0.11);
  --accent-line: rgba(255, 138, 106, 0.34);
  --on-accent: oklch(16% 0.02 40);
  --ok: oklch(78% 0.17 155);
  --no: oklch(62% 0.19 25);

  --maxw: 1180px;
  --narrow: 760px;
  --gutter: 24px;
}

/* The reader's own choice wins over the OS, and it is remembered. Written twice rather than once
   because a media query and an attribute selector cannot share a block; the values themselves
   still live in one place each. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --void: oklch(98% 0.002 75);
    --ink: oklch(94.5% 0.003 70);
    --egg: oklch(21% 0.004 45);
    --end: oklch(25% 0.004 40);
    --grid-line: rgba(28, 22, 18, 0.055);

    --accent: oklch(48% 0.166 28);
    --accent-deep: oklch(41% 0.160 28);
    --accent-soft: rgba(168, 54, 26, 0.08);
    --accent-line: rgba(168, 54, 26, 0.30);
    --on-accent: #fff;
    --ok: oklch(52% 0.15 155);
    --no: oklch(50% 0.20 25);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
    --void: oklch(98% 0.002 75);
    --ink: oklch(94.5% 0.003 70);
    --egg: oklch(21% 0.004 45);
    --end: oklch(25% 0.004 40);
    --grid-line: rgba(28, 22, 18, 0.055);

    --accent: oklch(48% 0.166 28);
    --accent-deep: oklch(41% 0.160 28);
    --accent-soft: rgba(168, 54, 26, 0.08);
    --accent-line: rgba(168, 54, 26, 0.30);
    --on-accent: #fff;
    --ok: oklch(52% 0.15 155);
    --no: oklch(50% 0.20 25);
}
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--void);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 16px; }
::selection { background: var(--accent); color: var(--on-accent); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--mono); font-size: 12px; padding: 10px 16px;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- GROUNDS ----------------------------------------------------------------------
   Each ground redefines the text tiers for everything inside it, so a component can sit on any
   of the three without knowing which. The grid is 1px hairlines every 56px, masked out at the
   top and bottom of the section so bands do not butt into each other with a hard seam. */
.g-void, .g-ink, .g-egg { position: relative; }

.g-void, .g-ink {
  --t1: oklch(95% 0.008 70);
  --t2: rgba(255, 255, 255, 0.64);
  --t3: rgba(255, 255, 255, 0.44);
  --line: rgba(255, 255, 255, 0.13);
  --panel: rgba(255, 255, 255, 0.035);
  --panel-2: rgba(255, 255, 255, 0.07);
  color: var(--t1);
}
.g-egg {
  --t1: rgba(255, 255, 255, 0.95);
  --t2: rgba(255, 255, 255, 0.66);
  --t3: rgba(255, 255, 255, 0.45);
  --line: rgba(255, 255, 255, 0.14);
  --panel: rgba(255, 255, 255, 0.05);
  --panel-2: rgba(255, 255, 255, 0.09);
  color: var(--t1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .g-void, :root:not([data-theme="dark"]) .g-ink {
    --t1: oklch(21% 0.013 58);
    --t2: rgba(32, 24, 18, 0.72);
    --t3: rgba(32, 24, 18, 0.48);
    --line: rgba(32, 24, 18, 0.14);
    --panel: rgba(168, 54, 26, 0.045);
    --panel-2: rgba(168, 54, 26, 0.085);
  }
}
:root[data-theme="light"] .g-void, :root[data-theme="light"] .g-ink {
    --t1: oklch(21% 0.013 58);
    --t2: rgba(32, 24, 18, 0.72);
    --t3: rgba(32, 24, 18, 0.48);
    --line: rgba(32, 24, 18, 0.14);
    --panel: rgba(168, 54, 26, 0.045);
    --panel-2: rgba(168, 54, 26, 0.085);
}

.g-void { background-color: var(--void); }
.g-ink { background-color: var(--ink); }
.g-egg { background-color: var(--egg); }
.g-void, .g-ink, .g-egg {
  background-image:
    linear-gradient(to bottom, var(--band), transparent 9%, transparent 91%, var(--band)),
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 100% 100%, 56px 56px, 56px 56px;
  background-repeat: no-repeat, repeat, repeat;
}
.g-void { --band: var(--void); }
.g-ink { --band: var(--ink); }
.g-egg { --band: var(--egg); --grid-line: rgba(255, 255, 255, 0.06); }

section { padding: 88px var(--gutter); position: relative; overflow: hidden; scroll-margin-top: 72px; }
.wrap { max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 2; }
.narrow { max-width: var(--narrow); margin: 0 auto; position: relative; z-index: 2; }
.centre { text-align: center; }
.centre .eyebrow { justify-content: center; }
.centre .lead { margin-left: auto; margin-right: auto; }

/* ---------- TYPE -------------------------------------------------------------------------
   Two levels and almost nothing between them: display at 30-70px, labels at 9.5-12px tracked
   mono, body at 17px. That gap is what stops a page this long reading as one grey column. */
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 18px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: none; }
.centre .eyebrow::after { content: ""; width: 22px; height: 1px; background: currentColor; flex: none; }
.g-egg .eyebrow { color: var(--accent-deep); }

/* Tracking loosened from -0.042em/-0.036em when Archivo landed: the old numbers were buying back
   optical weight Plex Sans could not give, and against a real 900 they close the counters up. */
h1 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.4rem, 6.4vw, 4.65rem); line-height: 0.98;
  letter-spacing: -0.035em; margin: 0 0 22px; text-wrap: balance;
}
h2 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.04;
  letter-spacing: -0.03em; margin: 0 0 16px; text-wrap: balance;
}
/* H3 stays on the body face: at 1.22rem a 900 is a shout, and the pages in this market set their
   sub-heads at 700. */
h3 { font-family: var(--body); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.015em; margin: 0 0 10px; }
h2.voice {
  font-family: var(--serif); font-weight: 600; font-style: italic;
  font-size: clamp(2.3rem, 5.6vw, 3.7rem); line-height: 1.08;
  letter-spacing: -0.012em; text-transform: none;
}
.vo { font-family: var(--serif); font-weight: 700; font-style: italic; letter-spacing: -0.012em; color: var(--accent); }
.lead { font-size: 1.1rem; color: var(--t1); max-width: 60ch; margin: 0 0 32px; text-wrap: pretty; }
.lead.dim { color: var(--t2); }
.lead b { font-weight: 600; color: var(--t1); }
.lead b.vo { color: var(--accent); font-weight: 700; }
.mono { font-family: var(--mono); }
.note { font-family: var(--mono); font-size: 11.5px; line-height: 1.7; letter-spacing: 0.04em; color: var(--t3); }

/* ---------- NAV --------------------------------------------------------------------------
   Sticky at every width, and the price is in the button, so the offer is never more than a
   thumb away from wherever the reader stopped. This replaces the old bottom bar. */
nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--void) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  --t1: oklch(95% 0.008 70); --line: rgba(255, 255, 255, 0.13); --t3: rgba(255, 255, 255, 0.44);
  color: var(--t1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) nav { --t1: oklch(21% 0.013 58); --line: rgba(32, 24, 18, 0.14); --t3: rgba(32, 24, 18, 0.48); }
}
:root[data-theme="light"] nav { --t1: oklch(21% 0.013 58); --line: rgba(32, 24, 18, 0.14); --t3: rgba(32, 24, 18, 0.48); }
.nav-in { max-width: var(--maxw); margin: 0 auto; padding: 13px var(--gutter); display: flex; align-items: center; gap: 26px; }
.brand { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.2em; font-weight: 600; text-decoration: none; }
.brand b { color: var(--accent); font-weight: inherit; }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.theme {
  width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: 3px; color: var(--t3);
  font-family: var(--mono); font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
  transition: color 0.18s, border-color 0.18s;
}
.theme:hover { color: var(--t1); border-color: var(--accent); }
.theme svg { display: block; }
.theme .sun { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme .sun { display: inline; } :root:not([data-theme="dark"]) .theme .moon { display: none; } }
:root[data-theme="light"] .theme .sun { display: inline; }
:root[data-theme="light"] .theme .moon { display: none; }
:root[data-theme="dark"] .theme .sun { display: none; }
:root[data-theme="dark"] .theme .moon { display: inline; }
.nav-links a {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t3); text-decoration: none; transition: color 0.18s;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--t1); }
@media (max-width: 860px) { .nav-links { display: none; } .nav-in { gap: 12px; } .theme { margin-left: auto; } }

/* ---------- BUTTONS ----------------------------------------------------------------------
   Mono, uppercase, tracked, 3px radius, and the price lives inside the label. 44px minimum
   target on every one of them. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.13em;
  text-transform: uppercase; font-weight: 600;
  min-height: 48px; padding: 14px 26px; border-radius: 3px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.16s, box-shadow 0.16s, background 0.16s, border-color 0.16s;
}
.btn b { font-weight: 700; font-variant-numeric: tabular-nums; }
.btn-solid { background: var(--accent); color: var(--on-accent); position: relative; overflow: hidden; isolation: isolate; }
/* A 100-degree white sweep running across the face every 3.4s. Every page in this market that has
   one solid buy button has this on it. Off under reduced motion, and never over the label. */
.btn-solid::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%);
  background-size: 200% 100%; background-repeat: no-repeat;
  animation: shine 3.4s linear infinite;
}
@keyframes shine { from { background-position: 180% 0; } to { background-position: -80% 0; } }
@media (prefers-reduced-motion: reduce) { .btn-solid::after { animation: none; opacity: 0; } }
.btn-solid:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 10px 34px var(--accent-soft); }
.btn-solid:active { transform: translateY(0); }
.btn-ghost { border-color: var(--line); color: var(--t1); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-nav { min-height: 40px; padding: 10px 16px; font-size: 11px; }
.btn .arw { font-weight: 400; margin-left: -2px; }
.btn-full { width: 100%; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.link { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link:hover { color: var(--accent-deep); }

/* ---------- HERO -------------------------------------------------------------------------- */
.hero { padding-top: 74px; padding-bottom: 80px; }
.hero-grid { display: grid; grid-template-columns: 1.45fr 0.75fr; gap: 60px; align-items: center; }
@media (max-width: 1040px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } }
.hero .lead { font-size: 1.16rem; line-height: 1.55; max-width: 54ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 30px; }
/* The second option, at body weight with no border. One filled button and one plain mono link is
   the shape every page in this market uses; two buttons of near-equal weight split the eye and
   push the counters below the fold. */
.hero-secondary {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--t3); text-decoration: none; transition: color 0.18s; white-space: nowrap;
}
.hero-secondary:hover, .hero-secondary:focus-visible { color: var(--t1); }
.hero-secondary .arw { color: var(--accent); }
/* The artefact is a long file, so the frame crops it from the top and the caption bar stays in
   view. A screenshot whose caption has scrolled off is a picture of nothing in particular. */
.hero-shot { max-width: 420px; margin: 0 auto; width: 100%; }
.hero-shot .shot img { max-height: 620px; object-fit: cover; object-position: top; }
@media (max-width: 1040px) { .hero-shot { max-width: 460px; } .hero-shot .shot img { max-height: 540px; } }

/* ---------- STATS ------------------------------------------------------------------------- */
.stat-row { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.centre .stat-row { margin-top: 30px; gap: 54px; }
.centre .stat-row { justify-content: center; }
.stat b {
  display: block; font-family: var(--display); font-weight: 700; font-size: 1.85rem;
  letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums;
}
.stat span {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--t3); margin-top: 7px;
}
@media (max-width: 620px) {
  .stat-row { gap: 22px 26px; }
  .stat-row .stat { flex: 0 0 calc(50% - 13px); }
  .centre .stat-row { gap: 22px 26px; }
  /* Three counters wrap to 2 + 1, which is the same orphan the offer grid had. Three across on a
     phone, because there are three true numbers and a fourth would have to be invented. */
  .hero .stat-row { gap: 18px; }
  .hero .stat-row .stat { flex: 1 1 0; min-width: 0; }
}

.live-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 30px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--t2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: pulse 2s ease-in-out infinite; flex: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

/* ---------- SHOT FRAME -------------------------------------------------------------------- */
.shot { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #0d0d0d; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); position: relative; }
/* height:auto is load-bearing: the width/height attributes on these elements are presentational
   hints, so without it a 1080x1920 video lays out 1920px tall and the section grows by 5000px. */
.shot img, .shot video { width: 100%; height: auto; display: block; }
.shot-cap {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.44); padding: 10px 14px; border-top: 1px solid rgba(255, 255, 255, 0.13);
  display: flex; justify-content: space-between; gap: 12px;
}
.shot-cap b { color: var(--accent); font-weight: 500; }
.shot-wide { margin: 40px auto 0; max-width: 860px; }
.shot-wide img { max-height: 600px; object-fit: cover; object-position: top; }
.shot-wide .shot-cap { font-size: 10px; padding: 12px 16px; }

/* A still that opens a video on click. The frame owns the one control; the browser's own strip
   never appears, because the <video> is only written into the page once the reader asks for it. */
.shot-play {
  position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0;
  background: rgba(8, 6, 5, 0.22); cursor: pointer;
}
.shot-play i {
  width: 62px; height: 62px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-style: normal; font-size: 17px; padding-left: 4px;
  box-shadow: 0 10px 38px rgba(0, 0, 0, 0.5); transition: transform 0.16s;
}
.shot-play:hover i { transform: scale(1.06); }

/* ---------- EVIDENCE, READ OUT ---------------------------------------------------------------
   A screenshot of a text file is texture at 390 px, and every reader we have arrives on a phone.
   So the finding comes out of the artefact as real selectable text at body size, and the picture
   sits underneath as the thing you check it against rather than as the message. The mono marker
   is where in the file the line came from, so a reader with the download open can find it. */
.ev { margin: 40px 0 0; text-align: left; }
.centre .ev { max-width: 860px; margin-inline: auto; }
.ev-lines { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid var(--line); }
.ev-lines li {
  display: flex; gap: 14px; align-items: baseline; padding: 11px 2px;
  border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.55; color: var(--t1);
}
.ev-lines .m {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--accent); flex: none; min-width: 52px;
}
.g-egg .ev-lines .m { color: var(--accent-deep); }
.ev .shot, .ev .shot-wide { margin-top: 0; }
@media (max-width: 620px) {
  .ev-lines li { flex-direction: column; gap: 5px; padding: 13px 2px; font-size: 15px; }
  .ev-lines .m { min-width: 0; }
}

/* ---------- CHECKABLE LIST (the proof band) ----------------------------------------------- */
/* The heading above this is centred, the rows are not: a four-line centred paragraph is a
   ragged blob on a phone and these rows are the part that has to actually be read. */
.checks { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); text-align: left; }
.checks li { border-bottom: 1px solid var(--line); }
.checks a { display: block; padding: 20px 2px; text-decoration: none; transition: background 0.16s; }
.checks a:hover { background: var(--panel); }
.checks .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 8px; }
.checks h3 { margin: 0 0 6px; font-size: 1.08rem; }
.checks p { margin: 0; font-size: 14.5px; color: var(--t3); max-width: 62ch; }

/* ---------- THE OFFER, STEP BY STEP ------------------------------------------------------------
   The offer used to be five cards nine sections down, which read as a feature grid and arrived
   after the reader had already decided. It is the second thing on the page now, and it is ordered
   rather than grouped, because the question it answers is "then what happens", not "what is in
   the box". Same hairline-and-mono kit as .checks; the number is the only ornament. */
.steps { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--line); text-align: left; }
.steps li { border-bottom: 1px solid var(--line); padding: 20px 2px; display: grid; grid-template-columns: 52px 1fr; align-items: baseline; }
.steps .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--accent); }
.g-egg .steps .k { color: var(--accent-deep); }
.steps h3 { margin: 0 0 6px; font-size: 1.14rem; }
.steps p { margin: 0; font-size: 15px; color: var(--t2); max-width: 62ch; }
@media (max-width: 560px) { .steps li { grid-template-columns: 1fr; row-gap: 8px; } }

/* The price, said once at the bottom of the steps, before the button. Mono at body size rather
   than display size: the hero has already shouted it, and this one has to be read. */
.sum { margin-top: 26px; max-width: 760px; border: 1px solid var(--line); border-radius: 6px; padding: 22px 24px; background: var(--panel); text-align: left; }
.sum b { display: block; font-family: var(--display); font-size: 1.5rem; letter-spacing: -0.02em; color: var(--t1); }
.sum span { display: block; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; letter-spacing: 0.03em; color: var(--t2); margin-top: 10px; max-width: 62ch; }

/* ---------- PRICING ------------------------------------------------------------------------ */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 900px; margin: 44px auto 0; align-items: stretch; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }
.price-card { border: 1px solid var(--line); border-radius: 6px; padding: 34px 30px; background: var(--panel); position: relative; display: flex; flex-direction: column; text-align: left; }
.price-card.pop { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 24px 70px var(--accent-soft); }
.price-tag {
  position: absolute; top: -11px; left: 30px; background: var(--accent); color: var(--on-accent);
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 3px;
}
.price-tier { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t3); margin-bottom: 14px; }
.price-new { font-family: var(--display); font-size: 3.2rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1; margin: 2px 0 6px; }
.price-note { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); margin-bottom: 22px; }
.feat { list-style: none; padding: 0; margin: 0 0 26px; flex: 1 0 auto; }
.feat li { display: flex; gap: 11px; font-size: 13px; line-height: 1.5; color: var(--t2); padding: 6.5px 0; align-items: flex-start; }
.feat .ck { color: var(--accent); flex: none; margin-top: 4px; }
.feat b { color: var(--t1); font-weight: 600; }
.covers { text-align: center; margin: 0 0 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.covers b { display: block; font-family: var(--mono); font-weight: 600; font-size: 12.5px; line-height: 1.5; color: var(--t1); letter-spacing: 0.04em; }
.covers span { display: block; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--t3); margin-top: 5px; letter-spacing: 0.04em; }
.microcopy { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--t3); text-align: center; margin: 12px 0 0; line-height: 1.7; }

/* ---------- CARD GRIDS ---------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 40px; text-align: left; }
/* No fill. A translucent panel over the hairline grid covers the grid, and a row of them covers
   a fifth of the page. The halo is the ground's own colour blown out behind the card, which lifts
   it off the grid without painting a lighter rectangle on top of it. */
.card { border: 1px solid var(--line); border-radius: 6px; padding: 26px 24px; background: transparent; box-shadow: 0 0 26px 16px var(--band); }
.card .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 14px; display: block; }
.g-egg .card .n { color: var(--accent-deep); }
.card p { font-size: 14.8px; color: var(--t2); margin: 0; }
.card p + p { margin-top: 10px; }
/* The plain-mono footnotes under a card grid. Capped at a readable measure, because .wrap is
   1180px wide and 11.5px mono across all of it is a line nobody finishes. */
.cards + .note { margin: 34px 0 0; max-width: 84ch; }
.note + .note { margin-top: 12px; max-width: 84ch; }

/* ---------- TIMELINE ------------------------------------------------------------------------ */
.tl { max-width: 620px; margin: 44px auto 0; position: relative; padding-left: 34px; list-style: none; text-align: left; }
.tl::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 34px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -33px; top: 6px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--void); border: 2px solid var(--accent); box-shadow: 0 0 16px var(--accent-soft);
}
.g-egg .tl-item::before { background: var(--egg); }
.tl-date { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
.tl-item h3 { font-size: 1.1rem; margin-bottom: 4px; }
.tl-item p { font-size: 14.5px; color: var(--t3); margin: 0; }

/* ---------- THE THING IT MADE ----------------------------------------------------------------- */
.made { border: 1px solid var(--line); border-radius: 6px; background: var(--band); box-shadow: 0 0 26px 16px var(--band); padding: 30px 26px; margin-top: 40px; text-align: left; }
.made-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-bottom: 6px; }
.made-head h3 { margin: 0; font-size: 1.5rem; }
.made-price { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); }
/* The three finished videos, each shown as its own hook frame. The markup ships a still and one
   button and no <video> at all: the element is written in on the click (site.js), which is what
   keeps Chrome's control strip off a page where every other pixel is ours, and what keeps three
   10MB files off a phone that may never scroll this far.
   The frame holds the aspect so the grid does not jump while the posters load. 3:4 crops the
   1080x1920 still to its middle, which is where the words are; the video is 9:16 and gets the
   constraint dropped the moment it is in, because by then the reader is looking at it. */
.reel { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0 0; padding: 0; }
@media (max-width: 720px) { .reel { grid-template-columns: 1fr; } }
.reel .frame { position: relative; display: block; aspect-ratio: 3 / 4; background: #000; }
/* 40% rather than centre: the crop has to keep the product's name at the top of the frame, which
   a centred window cuts in half. The sentence stays near the middle of the tile either way. */
.reel .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* The whole still is the click target, but the icon goes to a corner. Centred, it lands on top of
   the sentence, which is the one thing the still is there to show. */
.reel .shot-play { place-items: end start; padding: 14px; background: rgba(8, 6, 5, 0.14); }
.reel .frame.playing { aspect-ratio: auto; }
.reel .frame video { width: 100%; height: auto; display: block; }
.reel .shot-cap { font-size: 9px; letter-spacing: 0.12em; padding: 9px 12px; }
@media (max-width: 720px) { .reel .frame { aspect-ratio: 4 / 5; } .reel .shot-cap { font-size: 9.5px; } }

/* ---------- QUOTED THREAD TITLES ---------------------------------------------------------------- */
.said { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--line); text-align: left; }
.said q { color: var(--t1); }
.said li { border-bottom: 1px solid var(--line); padding: 16px 0; }
.said q { display: block; font-size: 14.5px; color: var(--t2); quotes: "\201C" "\201D"; max-width: 68ch; }
.said span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t3); margin-top: 8px; }

/* ---------- LEDGER ---------------------------------------------------------------------------
   A long list of real figures read off other people's pages. Same grid as the compare table so the
   two read as one component family, and the numbers are tabular so the column lines up. */
.ledger { margin: 40px auto 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; text-align: left; background: var(--band); box-shadow: 0 0 26px 16px var(--band); }
.led-row { display: grid; grid-template-columns: 1fr 108px 104px; align-items: baseline; border-bottom: 1px solid var(--line); }
.led-row:last-child { border-bottom: none; }
.led-row > div { padding: 11px 16px; font-size: 14px; color: var(--t2); }
.led-row.head { background: var(--panel-2); }
.led-row.head div { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t3); padding: 13px 16px; }
.led-row .num { font-family: var(--mono); font-size: 13px; color: var(--t1); text-align: right; font-variant-numeric: tabular-nums; }
.led-row .wh { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); }
@media (max-width: 560px) { .led-row { grid-template-columns: 1fr 78px; } .led-row .wh { display: none; } .led-row > div { padding: 10px 12px; font-size: 13px; } }

/* ---------- FAQ ------------------------------------------------------------------------------------ */
.faq { max-width: 760px; margin: 40px auto 0; text-align: left; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 34px 20px 0; position: relative;
  font-family: var(--body); font-weight: 700; font-size: 1.04rem; letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: 1.45; margin: 0; font-family: inherit; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 17px; font-family: var(--mono);
  font-size: 19px; color: var(--accent); transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 0 22px; font-size: 15px; color: var(--t2); max-width: 64ch; }
.faq .ans ul { margin: 0 0 14px; padding-left: 1.15em; }
.faq .ans li { margin-bottom: 7px; }
.faq .ans b { color: var(--t1); font-weight: 600; }

/* ---------- MID-PAGE CTA ---------------------------------------------------------------------
   Every page in this market puts a button between the argument and the closer. Ours had 13,600 px
   of phone scroll with nothing to press. */
.mid { margin-top: 44px; text-align: center; }
.mid .microcopy { margin-top: 14px; }

/* ---------- CLOSE + FOOTER -------------------------------------------------------------------------- */
.close-sec { text-align: center; padding: 110px var(--gutter); }
.close-sec h2 { font-size: clamp(2.4rem, 7vw, 4.2rem); margin-bottom: 18px; }
.close-sec .lead { margin: 0 auto 34px; }
.close-sec .microcopy { margin-top: 18px; }
.close-sec .note { max-width: 58ch; margin: 22px auto 0; text-align: center; }

/* One strip, its own colour, so the page has an ending rather than a third egg band. */
footer {
  border-top: 1px solid rgba(255, 255, 255, 0.14); padding: 26px var(--gutter);
  background: var(--end); color: rgba(255, 255, 255, 0.45);
}
.foot-in {
  max-width: var(--maxw); margin: 0 auto;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; line-height: 1.9;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
  display: flex; flex-wrap: wrap; gap: 4px 26px; align-items: baseline;
}
.foot-in p { margin: 0; }
.foot-in a { color: rgba(255, 255, 255, 0.75); }

/* The live line only appears once it has real numbers in it, so the page never shows a row of
   ellipses to a reader whose network dropped the request. */
[hidden] { display: none !important; }