/* Briefed website v2, round 1. Every colour is a token from ../../tokens.css (generated from
   Briefed/brand/machine/tokens.dtcg.json); this file holds no hex. Type: Literata 440 for the human
   line (brand.font.display), Inter for everything else (brand.font.text). Light, always (D9). */

@font-face { font-family: "Literata"; src: url("fonts/literata-440.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --serif: "Literata", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 6.5vw, 120px);
  --max: 1200px;
  --read: 640px;
  --section: clamp(72px, 8.4vw, 120px);
  --radius-button: 10px;
  --radius-card: 14px;
  --radius-plate: 20px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --shadow-artefact: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--ink) 30%, transparent);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 26px;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--forest-tint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; border-radius: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* WhatsApp launch flag: rules.yaml whatsapp_live. Lines that need it carry data-requires="whatsapp_live";
   their pre-launch twins carry data-until="whatsapp_live". Flip the html attribute at launch. */
html[data-whatsapp-live="false"] [data-requires~="whatsapp_live"] { display: none !important; }
html[data-whatsapp-live="true"] [data-until~="whatsapp_live"] { display: none !important; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section + .section { padding-top: 0; }
.rail { background: var(--paper-deep); }
.rail + .section, .section + .rail { padding-top: var(--section); }

/* ---------- type ---------- */
.display, h1, h2, h3 { font-family: var(--serif); font-weight: 440; letter-spacing: -0.018em; text-wrap: balance; margin: 0; color: var(--ink); }
h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.04; }
h2 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.06; }
h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.12; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: clamp(18px, 1.45vw, 20px); line-height: 1.55; color: var(--ink-soft); max-width: 34em; }
.body { color: var(--ink-soft); }
.small { font-size: 14px; line-height: 20px; color: var(--ink-mute); }
.demo-label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-mute); }
.num { font-family: var(--sans); font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; }
.stack > * + * { margin-top: 20px; }
/* spacing scale (primitive.space steps 8/16/24/32/48/64/88/120): margin-top utilities, so no page carries an inline style */
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

/* ---------- actions: one verb, one Forest moment per screen ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: var(--radius-button);
  background: var(--forest); color: var(--paper-soft); font: 600 16px/1 var(--sans); letter-spacing: -0.005em; text-decoration: none;
  transition: background-color 160ms var(--ease-out), transform 90ms var(--ease-out); }
.btn:hover { background: var(--forest-deep); }
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 9px; position: relative; }
/* the nav Join is the quiet twin: one Forest moment per screen belongs to the hero CTA (principle 5) */
.nav-cta { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-mute); }
.nav-cta:hover { background: var(--paper-soft); }
.btn-sm::after { content: ""; position: absolute; inset: -4px 0; }
.link { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1.5px;
  text-underline-offset: 5px; transition: text-decoration-color 160ms var(--ease-out); }
.link:hover { text-decoration-color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.fine { font-size: 14px; line-height: 20px; color: var(--ink-mute); }

/* ---------- nav: sticky, compact, Join always reachable ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease-out); }
.nav.is-stuck { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 24px; }
.wordmark { display: block; width: 104px; height: 24px; }
.wordmark svg { display: block; width: 100%; height: 100%; }
.nav nav { margin: 0 auto 0 40px; }
.nav-links { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.nav-links a { font-size: 15px; color: var(--ink-soft); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 860px) { .nav nav { display: none; } .nav .wrap { height: 56px; } .wordmark { width: 92px; height: 21px; } }

/* ---------- the device (signed component, scaled by --dw in px, unitless) ---------- */
.phone { --dw: 300; --device-w: calc(var(--dw) * 1px); }
.phone .device { --device-w: calc(var(--dw) * 1px); margin: 0 auto; }
.phone .wa-fit { position: absolute; left: 0; top: 0; width: 393px; height: 852px; transform-origin: 0 0;
  transform: scale(calc(var(--dw) * 0.936 / 393)); }
/* ui 1.32: iOS Larger Text one step up, so the whole push fits above the composer (the ads use 1.5 on a bigger screen) */
.phone .wa { zoom: 1.32; width: 297.7px; height: 645.5px; }
.phone .wa .status { zoom: 0.7576; }
.phone .wa .avatar svg { width: 20px; height: 18px; }
.nw { white-space: nowrap; }
.phone .wa .meta-row { display: flex; justify-content: flex-end; margin: 2px -2px -4px 0; }
.phone .wa .meta-row .meta { float: none; margin: 0; }
/* the verified mark drawn as WhatsApp draws it: a green seal with a thin white tick, not a glyph */
.phone .wa .tick svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* The lock screen the morning message arrives on (motion M2). It exists in the markup for the motion
   layer only: hidden unless motion.js has armed the page, so no-JS and reduced motion get the chat. */
.phone .lock { display: none; position: absolute; inset: 0; z-index: 3; padding: 0 14px;
  background: linear-gradient(180deg, var(--linen) 0%, var(--paper-deep) 55%, var(--paper) 100%); color: var(--ink); text-align: center; }
html.armed .phone[data-morning] .lock { display: block; }
.phone .lock-time { margin-top: 92px; font: 200 92px/1 -apple-system, "SF Pro Display", var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.phone .notif { margin-top: 300px; display: grid; grid-template-columns: 38px 1fr; gap: 2px 11px; padding: 12px 14px 13px; border-radius: 22px; text-align: left;
  background: color-mix(in srgb, var(--paper-soft) 82%, transparent); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--ink) 30%, transparent); }
.phone .notif .app { grid-row: span 2; width: 38px; height: 38px; border-radius: 9px; background: var(--paper-soft); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.phone .notif .app svg { width: 22px; height: 20px; }
.phone .notif .nt { display: flex; justify-content: space-between; font: 600 15px/20px -apple-system, var(--sans); }
.phone .notif .nt span { font-weight: 400; color: var(--ink-mute); font-size: 13px; }
.phone .notif .nb { font: 400 15px/20px -apple-system, var(--sans); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.phone figcaption { margin-top: 18px; text-align: center; }
.device { flex: none; }


/* ---------- plates: signed photography, light, never a scrim ---------- */
.plate { position: relative; overflow: hidden; border-radius: var(--radius-plate); background: var(--linen); }
.plate > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- artefacts: the brief, the sheet ---------- */
.sheet { background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-artefact); }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.sheet-head b { font-weight: 600; font-size: 14px; }
.sheet-head span { font-size: 13px; color: var(--ink-mute); white-space: nowrap; }
.sheet-body { padding: 8px 20px 20px; }
.do { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--forest-tint); font-size: 15px; line-height: 22px; }
.do b { font-weight: 600; }

/* ======================================================================
   HEROES
   ====================================================================== */
.hero { padding: clamp(28px, 5vw, 72px) 0 0; }

/* Hero B: split. The line left; the room and the phone right */
.hero-b .grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-b h1 { font-size: clamp(40px, 4.5vw, 66px); line-height: 1.04; }
.hero-b .lead { margin-top: 24px; }
.hero-b .actions { margin-top: 36px; }
.hero-b .fine { margin-top: 20px; }
/* The phone sits IN FLOW, so the stage is always at least as tall as the device at every width
   (round 1 positioned it absolutely inside an aspect-ratio box and it overflowed by 155px at 1024).
   The plate is the absolute layer behind it. --dw steps with the column, never with a guess. */
.hero-b .stage { position: relative; }
.hero-b .scene { position: relative; display: flex; align-items: flex-start; padding: 64px 0 48px; }
.hero-b .scene .plate { position: absolute; inset: 0 0 0 30%; }
.hero-b .scene .plate img { object-position: 50% 75%; }
.hero-b .scene .phone { position: relative; z-index: 1; margin: 0; --dw: 262; }
.hero-b .stage .label { position: absolute; z-index: 2; right: 16px; top: 16px; padding: 6px 10px; border-radius: 8px; background: var(--paper-soft); }
@media (min-width: 1180px) { .hero-b .scene .phone { --dw: 300; } }
@media (min-width: 1600px) { .hero-b .scene .phone { --dw: 320; } }
@media (max-width: 1100px) and (min-width: 901px) { .hero-b .scene .phone { --dw: 240; } }
/* Phones: the device sinks into the bottom edge of a full-bleed plate (the scene clips it), so the
   whole message, Tonight line included, shows while the composer and the page height do not.
   The demo label sits under the scene, never on the device. */
@media (max-width: 900px) {
  .hero-b .grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-b .stage { margin: 0 calc(-1 * var(--gutter)); }
  .hero-b .scene { --hero-dw: 236; justify-content: center; padding: 0; overflow: hidden; height: calc(var(--hero-dw) * 2.099px * .78); }
  .hero-b .scene .plate { inset: 56px 0 0 0; border-radius: 0; }
  .hero-b .scene .phone { --dw: var(--hero-dw); }
  .hero-b .stage .label { position: static; margin: 12px var(--gutter) 0; padding: 0; background: none; text-align: center; }
}
@media (max-width: 359px) { .hero-b .scene { --hero-dw: 216; } }

/* Hero C: the morning message IS the headline. Literata for the human line, heavy Inter for the figures (D20) */
.hero-c .grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 88px); align-items: end; }
.hero-c .stamp { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-mute); }
.hero-c .stamp .mono { width: 28px; height: 28px; }
.hero-c h1 { margin-top: 20px; font-size: clamp(40px, 5vw, 70px); line-height: 1.04; }
.figures { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px clamp(24px, 4vw, 56px); margin-top: clamp(32px, 4vw, 48px);
  padding-top: 24px; border-top: 1px solid var(--line); }
.figures .fig b { display: block; font-weight: 700; font-size: clamp(34px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.035em; }
.figures .fig > span { display: block; margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--ink-mute); max-width: 15em; }
.hero-c .tonight { margin-top: 28px; font-size: 19px; line-height: 28px; color: var(--ink); max-width: 30em; }
.hero-c .tonight b { font-weight: 600; }
.hero-c .actions { margin-top: 32px; }
.hero-c .side { display: flex; flex-direction: column; align-items: center; }
.hero-c .phone { --dw: 280; }
@media (max-width: 900px) {
  .hero-c .grid { grid-template-columns: minmax(0, 1fr); }   /* minmax(0): the figures' min-content pushed the track 1 px past 320 */
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; }
  .figures .fig b { font-size: clamp(24px, 7vw, 40px); letter-spacing: -0.03em; }
  .figures .fig > span { font-size: 13px; line-height: 18px; }
  .hero-c .phone { --dw: 250; }
}

/* ======================================================================
   HOMEPAGE BEATS
   ====================================================================== */
.head { max-width: 760px; }
.head .lead { margin-top: 20px; }
.head.center { margin: 0 auto; text-align: center; }
.head.center .lead { margin-left: auto; margin-right: auto; }

/* beat 2: the session behind the message */
.session { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
.session .stage { position: relative; aspect-ratio: 4 / 4.4; }
.session .stage .plate { position: absolute; inset: 0 22% 0 0; }
.session .stage .plate img { object-position: 30% 60%; }
/* lead ruling (i), 1 Nov 2026: the session shows the signed phone, never a label/figure sheet, until D77. The device
   stands on the room's left, clear of her face (FACES e4-f1), and sinks into the plate's bottom edge so the one message
   shows and the empty lower chat never does (the same sink as the hero and the capability panes). */
.session .stage .phone { position: absolute; left: 0; top: 16%; margin: 0; --dw: 236; }
@media (max-width: 1100px) { .session .stage .phone { --dw: 184; } }   /* the stage narrows to about 330 px at 901; layoutcheck proves the device clears her face */
@media (max-width: 900px) {
  .session { grid-template-columns: 1fr; }
  .session .stage { aspect-ratio: auto; height: 500px; }
  .session .stage .plate { inset: 0; }
  .session .stage .phone { left: 12px; top: 190px; --dw: 200; }
}

/* beat 3: how it starts, a real sequence so it is numbered */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; padding-top: 24px; border-top: 1px solid var(--ink); }
.steps li::before { content: counter(step); display: block; font: 600 15px/1 var(--sans); color: var(--ink-mute); margin-bottom: 28px; font-variant-numeric: tabular-nums; }
.steps h3 { font-size: clamp(22px, 1.9vw, 26px); }
.steps p { margin-top: 12px; color: var(--ink-soft); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; gap: 36px; } .steps li::before { margin-bottom: 16px; } }

/* beat 4: capability rows, one build, fixed rhythm, alternating sides */
.rows { display: grid; gap: clamp(72px, 7vw, 96px); margin-top: clamp(48px, 5vw, 72px); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
.row:nth-child(even) .row-copy { order: 2; }
.row-copy h3 { max-width: 14em; }
.row-copy > p { margin-top: 16px; color: var(--ink-soft); max-width: 30em; }
.points { margin: 28px 0 0; padding: 0; list-style: none; max-width: 30em; }
.points li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 24px; color: var(--ink-soft); }
.points li:last-child { border-bottom: 1px solid var(--line); }
.row-art { position: relative; aspect-ratio: 5 / 3.6; }
.row-art .plate { position: absolute; inset: 0; }
.row-art .sheet { position: absolute; left: 8%; right: 8%; bottom: 8%; }
.row-art .phone { position: absolute; left: 50%; top: max(9%, 56px); transform: translateX(-50%); --dw: 240; }
.row-art:has(.phone) { overflow: hidden; border-radius: var(--radius-plate); }
.row-art .label { position: absolute; right: 14px; top: 14px; padding: 5px 9px; border-radius: 8px; background: var(--paper-soft); }
.row-art.plain { background: var(--paper-deep); border-radius: var(--radius-plate); display: grid; place-items: center; padding: 8%; }
.row-art.plain .sheet { position: static; width: 100%; }
@media (max-width: 900px) {
  .row { grid-template-columns: 1fr; gap: 28px; }
  .row .row-art { order: -1; }
  .row:nth-child(even) .row-copy { order: 0; }
  .row-art { aspect-ratio: 4 / 4.4; }
  .row-art .sheet { left: 16px; right: 16px; bottom: 16px; }
}

.sources { display: grid; gap: 0; }
.sources div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.sources b { font-weight: 600; font-size: 22px; letter-spacing: -0.015em; }
.sources span { font-size: 15px; color: var(--ink-soft); text-align: right; }
.sources .joined { border-bottom: 0; padding-bottom: 4px; }
.sources .joined b { font-size: 17px; letter-spacing: 0; }
.agenda li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 22px; display: grid; grid-template-columns: 22px 1fr; }
.agenda { margin: 0; padding: 0; list-style: none; counter-reset: ag; }
.agenda li { counter-increment: ag; }
.agenda li::before { content: counter(ag); color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.agenda li:last-child { border-bottom: 0; }

/* beat 5: the money. Proof numbers in heavy Inter (D20) */
.money { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 104px); align-items: start; }
.money .plate { aspect-ratio: 4 / 4.6; position: sticky; top: 96px; }
.money .plate img { object-position: 40% 50%; }
.proof { display: grid; gap: clamp(40px, 4vw, 56px); margin-top: clamp(40px, 4vw, 56px); }
.proof h3 { font-size: clamp(22px, 1.9vw, 26px); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.pair b { display: block; font-weight: 700; font-size: clamp(40px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.04em; }
.pair span { display: block; margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.pair .muted b { color: var(--ink-mute); }
.proof > div > .link { margin-top: 18px; display: inline-block; }
@media (max-width: 900px) { .money { grid-template-columns: 1fr; } .money .plate { aspect-ratio: 4 / 3.4; } }

/* beat 6: built by an operator */
.operator { max-width: 900px; margin: 0; }
.operator blockquote { margin: 0; font-family: var(--serif); font-weight: 440; font-size: clamp(28px, 3.3vw, 42px); line-height: 1.18; letter-spacing: -0.015em; text-wrap: balance; }
.operator .by { margin-top: 28px; display: flex; align-items: center; gap: 14px; }
.operator .by .mono { width: 40px; height: 40px; }
.operator .by b { display: block; font-weight: 600; font-size: 16px; }
.operator .by span { display: block; font-size: 14px; color: var(--ink-mute); }
.operator .body { margin-top: 28px; max-width: 34em; }

/* beat 7: one price */
.price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 104px); align-items: start; }
.offer { padding: clamp(28px, 3.4vw, 44px); background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius-plate); box-shadow: var(--shadow-artefact); }
.offer .amount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.offer .amount b { font-weight: 700; font-size: clamp(56px, 6vw, 76px); line-height: 1; letter-spacing: -0.045em; }
.offer .amount span { font-size: 17px; color: var(--ink-soft); }
.offer .per { margin-top: 8px; font-size: 15px; color: var(--ink-mute); }
.ticks { margin: 28px 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding: 12px 0 12px 32px; border-top: 1px solid var(--line); font-size: 16px; line-height: 24px; color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 12px; height: 7px; border-left: 2px solid var(--forest); border-bottom: 2px solid var(--forest); transform: rotate(-45deg); }
.offer .founding { margin: 0 0 24px; padding: 16px 18px; border-radius: 12px; background: var(--linen); font-size: 15px; line-height: 23px; color: var(--ink); }
.offer .tier { font-weight: 600; font-size: 15px; color: var(--forest-deep); margin-bottom: 14px; }
.offer .after { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.offer .trial { margin: 0 0 20px; font-size: 15px; line-height: 22px; color: var(--ink); }
.price-line b { font-weight: 600; color: var(--ink); }
.offer .btn { width: 100%; }
.offer .fine { margin-top: 14px; text-align: center; }
@media (max-width: 900px) { .price { grid-template-columns: 1fr; } }

/* beat 8: questions */
.faq { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 104px); }
.qa details { border-top: 1px solid var(--line); }
.qa details:last-child { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-weight: 600; font-size: 17px; line-height: 25px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-top: 6px; border-right: 1.5px solid var(--ink-mute); border-bottom: 1.5px solid var(--ink-mute); transform: rotate(45deg); transition: transform 200ms var(--ease-out); }
.qa details[open] summary::after { transform: rotate(-135deg); margin-top: 10px; }
.qa details p { padding: 0 0 24px; color: var(--ink-soft); max-width: 36em; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }

/* bookend */
.bookend { position: relative; }
.bookend .plate { aspect-ratio: 16 / 5.4; }
.bookend .plate img { object-position: 50% 58%; }
.bookend .copy { text-align: center; margin-top: clamp(40px, 5vw, 64px); }
.bookend h2 { font-size: clamp(44px, 6vw, 84px); line-height: 1.02; }
.bookend .lead { margin: 18px auto 0; text-align: center; }
.bookend .actions { justify-content: center; margin-top: 32px; }
@media (max-width: 700px) { .bookend .plate { aspect-ratio: 4 / 3.6; margin: 0 calc(-1 * var(--gutter)); border-radius: 0; } }

/* footer, on paper */
.foot { padding: 64px 0 48px; border-top: 1px solid var(--line); margin-top: var(--section); }
.foot .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot p, .foot a { font-size: 14px; line-height: 22px; color: var(--ink-soft); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot h4 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot .legal { margin-top: 48px; font-size: 13px; color: var(--ink-mute); }
.foot .tagline { margin-top: 14px; max-width: 22em; }
@media (max-width: 800px) { .foot .cols { grid-template-columns: 1fr 1fr; } .foot .cols > :first-child { grid-column: 1 / -1; } }

/* sticky phone Join: appears once the hero CTA scrolls away (principle 10) */
.dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; display: none; }
@media (max-width: 700px) {
  .dock { display: block; transform: translateY(140%); transition: transform 280ms var(--ease-out); }
  .dock.on { transform: none; }
  .dock .btn { width: 100%; box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--ink) 45%, transparent); }
  .dock.on.away { transform: translateY(140%); }
}

/* ======================================================================
   AD LANDING PAGES (round 2): /last-night, /prepared-week, /money, /how-it-starts.
   One hero frame for the three plate pages; the artefact overlaps its plate by a fifth at most,
   so a card never sits on a face (panel seat 2.3).
   ====================================================================== */
.hero-lp .grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-lp h1 { font-size: clamp(40px, 5vw, 70px); line-height: 1.03; }
.hero-lp .lead { margin-top: 24px; }
.hero-lp .actions { margin-top: 36px; }
.hero-lp .fine { margin-top: 20px; }
.hero-lp .stage { position: relative; padding-bottom: 40px; }
.hero-lp .stage .plate { aspect-ratio: 4 / 4.4; margin-left: 16%; }
.hero-lp .stage .sheet { position: absolute; left: 0; bottom: 0; width: min(360px, 66%); }
.hero-lp .stage .label { position: absolute; right: 14px; top: 14px; padding: 5px 9px; border-radius: 8px; background: var(--paper-soft); }
.hero-lp .big { margin-top: 28px; }
.hero-lp .big b { display: inline-block; font-weight: 700; font-size: clamp(88px, 12vw, 168px); line-height: .9; letter-spacing: -0.05em; }
@media (max-width: 900px) {
  .hero-lp .grid { grid-template-columns: minmax(0, 1fr); }
  .hero-lp .stage .plate { margin-left: 0; aspect-ratio: 4 / 3.6; }
  .hero-lp .stage { padding-bottom: 0; }
  .hero-lp .stage .sheet { position: relative; left: auto; bottom: auto; width: auto; margin: -56px 16px 0; }
}
.lp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
.lp-art { display: flex; justify-content: center; }
.lp-art .phone { --dw: 260; }
.lp-art.plain { background: var(--paper-deep); border-radius: var(--radius-plate); padding: 8%; display: block; }
.rail .lp-art.plain { background: var(--paper); }
@media (max-width: 900px) { .lp { grid-template-columns: 1fr; } }
.lp-proof { max-width: 720px; }
.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.tools a { display: block; height: 100%; padding: 24px; border-radius: var(--radius-card); background: var(--paper-soft); border: 1px solid var(--line); text-decoration: none;
  transition: border-color 160ms var(--ease-out), transform 200ms var(--ease-settle); }
.tools a:hover { border-color: var(--ink-mute); transform: translateY(-2px); }
.tools b { display: block; font-family: var(--serif); font-weight: 440; font-size: 24px; line-height: 1.15; }
.tools span { display: block; margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
@media (max-width: 800px) { .tools { grid-template-columns: 1fr; } }
.hero-c .price-line { margin-top: 20px; }
.hero-c .lead { margin-top: 22px; }

/* ======================================================================
   MOTION AND FINISH (round 2). Recipes: website-r2-inputs/02-MOTION-AND-STACK.md.
   The JS half is assets/motion.js. Everything here is either answer-a-hand (hover, press, focus,
   open) or compositor-only scroll-linked, and all of it stops under prefers-reduced-motion.
   ====================================================================== */
:root { --ease-settle: cubic-bezier(.22, 1, .36, 1); interpolate-size: allow-keywords; }
html { -webkit-tap-highlight-color: transparent; }
a, button, summary { touch-action: manipulation; }

/* the hero start state, held only while motion.js plays (html.armed), so nothing flashes before it starts */
html.armed .hero .phone[data-morning] .device, html.armed .hero .copy > :not(h1) { opacity: 0; }

/* M5: a figure rolls onto its tabular digits. The ghost keeps the box, so nothing reflows (CLS 0) */
.roll { position: relative; display: inline-block; }
.roll .ghost { visibility: hidden; }
.roll .reel { position: absolute; inset: 0; display: flex; overflow: hidden; }
.roll .col { display: block; height: 1em; overflow: hidden; line-height: 1; }
.roll .col > span { display: flex; flex-direction: column; }
.roll .col i { font-style: normal; height: 1em; line-height: 1; display: block; }
.roll .ch { display: block; }
.pair .roll span, .offer .amount .roll span { margin: 0; font-size: inherit; line-height: 1; color: inherit; }
.fig .roll { line-height: 1; }

/* M6: the offer's ticks draw in turn as the card arrives */
.offer[data-ticks] .ticks li::before { transition: clip-path 360ms var(--ease-settle); }
.offer[data-ticks="armed"] .ticks li::before { clip-path: inset(0 100% 0 0); }
.offer[data-ticks="drawn"] .ticks li::before { clip-path: inset(0 0 0 0); }
.offer[data-ticks] .ticks li:nth-child(2)::before { transition-delay: 70ms; }
.offer[data-ticks] .ticks li:nth-child(3)::before { transition-delay: 140ms; }
.offer[data-ticks] .ticks li:nth-child(4)::before { transition-delay: 210ms; }
.offer[data-ticks] .ticks li:nth-child(5)::before { transition-delay: 280ms; }
.offer[data-ticks] .ticks li:nth-child(6)::before { transition-delay: 350ms; }

/* M7 / X3: the CTA answers a hand. Fill 160 ms, a soft Forest lift on hover, press .97 in 90 ms, back in 200 ms */
.btn { transition: background-color 160ms var(--ease-out), transform 200ms var(--ease-settle), box-shadow 200ms var(--ease-out); }
.btn:not(.nav-cta):hover { box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--forest) 80%, transparent); }
.btn:active { transform: scale(.97); transition-duration: 90ms; }

/* X1: the link underline draws left to right on hover and recedes on leave */
.link { text-decoration: none; padding-bottom: 4px; background:
  linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat, linear-gradient(var(--line), var(--line)) 0 100% / 100% 1.5px no-repeat;
  transition: background-size 320ms var(--ease-settle); }
.link:hover { background-size: 100% 1.5px, 100% 1.5px; }

/* X2: the focus ring eases out from the edge, keyboard only */
:focus-visible { outline-offset: 4px; transition: outline-offset 160ms var(--ease-settle); }
.btn:focus-visible { outline-offset: 3px; }

/* X4: the nav hairline arrives over the first 80 px of scroll, no listener where the browser can do it */
@supports (animation-timeline: scroll()) {
  .nav { animation: hairline linear both; animation-timeline: scroll(root); animation-range: 0 80px; }
  @keyframes hairline { from { border-bottom-color: transparent; } to { border-bottom-color: var(--line); } }
}

/* M8 / X13: questions open to their real height (Chrome 131+, instant elsewhere); rows answer the pointer */
.qa details::details-content { block-size: 0; overflow: clip; opacity: 0;
  transition: block-size 320ms var(--ease-settle), opacity 240ms 60ms var(--ease-settle), content-visibility 320ms allow-discrete; }
.qa details[open]::details-content { block-size: auto; opacity: 1; }
.qa summary { transition: color 120ms var(--ease-out); }
.qa summary:hover { color: var(--forest-deep); }
.qa summary::after { transition: transform 240ms var(--ease-settle); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }                                   /* X11 */
  /* M3 plate drift removed (lead ruling on Astra read 2, item 6): motion lives only in the morning hero and the
     pinned story; every other photograph is still (prompt section 5: never parallax on every section). */
}

/* X14: the footer ends the page twice: one invitation line, then the wordmark set large and quiet */
.foot .bigmark { display: block; width: 100%; height: auto; margin-top: clamp(48px, 7vw, 96px); color: var(--ink); opacity: .9; }
.foot .bigmark svg { display: block; width: 100%; height: auto; }
.foot .invite { margin-bottom: clamp(40px, 5vw, 64px); font-family: var(--serif); font-weight: 440; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); }
.foot .invite a { font: inherit; color: inherit; }

/* panel a11y: a skip link that appears on focus; 24px minimum targets in the nav and footer */
.skip { position: absolute; left: 12px; top: -60px; z-index: 40; padding: 10px 14px; border-radius: 9px; background: var(--ink); color: var(--paper-soft); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.nav-links a, .foot ul a { display: inline-block; padding-block: 4px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ======================================================================
   ROUND 3 FINISH. Review: NOW/plans/2026-10-28_brand-brain-sprint/website-r3/review.html.
   Later rules here deliberately override the round 1/2 rules above at equal specificity.
   ====================================================================== */

/* X10: the metric-matched fallbacks (inlined in <head> from assets/fonts/fallback.css) sit second in each stack */
:root {
  --serif: "Literata", "Literata Fallback", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* M9: page to page. A 240 ms cross-fade on the house curve; the nav and the dock hold still across it */
@view-transition { navigation: auto; }
.nav { view-transition-name: nav; }
.dock { view-transition-name: dock; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Nav: paper that frosts once the page moves under it (navbar.gallery: quiet bar, the content shows through) */
.nav { background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); }
.nav-links a[aria-current="page"] { color: var(--ink); }
:target, h2[id], section[id] { scroll-margin-top: 80px; }

/* X3: the arrow is the only icon on a button, and it is the part that answers the hand */
.btn:not(.btn-sm)::after { content: ""; flex: none; width: 15px; height: 15px; margin: 0 -2px 0 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate 220ms var(--ease-settle); }
.btn:not(.btn-sm):hover::after { translate: 3px 0; }

/* the WhatsApp screen is shared by the drawn phone and the phone in hand */
.hand .wa { zoom: 1.32; width: 297.7px; height: 645.5px; }
.hand .wa .status { zoom: 0.7576; }
.hand .wa .avatar svg { width: 20px; height: 18px; }
.hand .wa .meta-row { display: flex; justify-content: flex-end; margin: 2px -2px -4px 0; }
.hand .wa .meta-row .meta { float: none; margin: 0; }
.hand .wa .tick svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* the move for tonight breaks into even lines, not a long line and a widow */
.wa .bub p.focus { text-wrap: balance; }
/* tabular figures are for the figures; a hyphen in a label set tabular reads as "4 - week" */
.figures .fig > span, .pair span, .kv dt, .kv .note { font-variant-numeric: normal; font-feature-settings: normal; }

/* The lock screen: the hero room itself as the wallpaper, softened (images.py, ~5 KB, loads only when armed) */
.phone .lock { background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 22%, transparent) 0%, transparent 34%),
  url("img/lock-wall.webp") 50% 50% / cover no-repeat, var(--linen); color: var(--paper-soft); }
.phone .lock-time { text-shadow: 0 1px 18px color-mix(in srgb, var(--ink) 25%, transparent); }
.phone .notif { background: color-mix(in srgb, var(--paper-soft) 74%, transparent); color: var(--ink);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }

/* ---------- item 1: an artefact never covers a face (layoutcheck.mjs proves it from data-faces) ----------
   The card hangs off the plate's edge and overlaps only its lower corner, where the room is, not the people. */
.row-art:has(> .sheet) { aspect-ratio: auto; padding-bottom: 88px; }
.row-art:has(> .sheet) .plate { position: relative; inset: auto; aspect-ratio: 5 / 4; margin-left: 14%; }
.row-art:has(> .sheet) .sheet { left: 0; right: auto; bottom: 0; width: min(340px, 60%); }
.row-art .plate img[src*="c1-f1"] { object-position: 50% 30%; }
.row-art .plate img[src*="e3-f1"] { object-position: 50% 85%; }
.session .stage { aspect-ratio: auto; padding-bottom: 0; overflow: hidden; border-radius: var(--radius-plate); }
.session .stage .plate { position: relative; inset: auto; aspect-ratio: 4 / 4.6; margin-left: 22%; }
.session .stage .plate img { object-position: 50% 50%; }
/* the Ask row: the phone stands left of her, never over her */
.row-art .phone { left: 7%; transform: none; }
@media (max-width: 900px) {
  .row-art:has(> .sheet) { padding-bottom: 0; }
  .row-art:has(> .sheet) .plate { margin-left: 0; aspect-ratio: 4 / 3.3; }
  .row-art:has(> .sheet) .sheet { position: relative; left: auto; bottom: auto; width: auto; margin: -40px 16px 0; }
  .session .stage { height: auto; }
  .session .stage .plate { margin-left: 0; aspect-ratio: 4 / 3.8; }
  .session .stage .sheet { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: -48px 16px 0; }
  /* the whole message shows on a phone (Astra read 3): the device steps out of the absolute slot, which the plate's
     shorter frame cut off at the header, and stands centred in the flow, overlapping only the plate's foot (layoutcheck:
     the session bubble is never clipped at 480 and below) */
  .session .stage .phone { position: relative; left: auto; top: auto; margin: -64px auto 24px; --dw: 200; }
  /* on a phone the plate is cropped to its left side, so she sits at the frame's edge and the device stands clear */
  .row-art:has(.phone) .plate img { width: 142%; max-width: none; object-position: 0 50%; }
  .row-art .phone { left: 5%; --dw: 190; }
}
@media (max-width: 1280px) and (min-width: 901px) { .row-art .phone { left: 5%; --dw: 210; } }
@media (max-width: 1100px) and (min-width: 901px) {
  .row-art:has(.phone) .plate img { width: 142%; max-width: none; object-position: 0 50%; }
  .row-art .phone { --dw: 200; }
  .row-art:has(.phone) .label { right: auto; left: 14px; }
}
@media (max-width: 420px) { .row-art .phone { left: 3%; --dw: 180; } }
/* laptops and tablets: two columns but narrow ones, so the card steps below the plate and overlaps only its foot */
@media (max-width: 1200px) and (min-width: 901px) {
  .row-art:has(> .sheet), .hero-lp .stage:has(.sheet) { padding-bottom: 0; }
  .row-art:has(> .sheet) .plate, .hero-lp .stage:has(.sheet) .plate { margin-left: 0; aspect-ratio: 4 / 3.4; }
  .row-art:has(> .sheet) .sheet, .hero-lp .stage:has(.sheet) .sheet { position: relative; left: auto; bottom: auto; width: auto; margin: -40px 20px 0; }
  .session .stage .plate { margin-left: 0; aspect-ratio: 4 / 3.8; }
  .session .stage .sheet { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: -48px 20px 0; }
}
/* phones: the operator slot shows only once the real photo exists (D70); a placeholder there is height with no news */
@media (max-width: 900px) { .op-grid > .op-photo.is-waiting { display: none; } }
/* phones: the price card's ask stays on one line with its arrow */
@media (max-width: 420px) {
  .price .offer-main, .price .offer-side { padding: 24px 22px; }
  .price .offer .btn { padding: 0 18px; font-size: 15px; white-space: nowrap; }
}

/* ---------- item 2: the operator beat takes Johnny's photo (D70); the placeholder is designed, never broken ---------- */
.op-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.op-photo { aspect-ratio: 4 / 5; }
.op-photo.is-waiting { display: grid; place-items: center; background: var(--linen); }
.op-photo .op-mark { width: 34%; height: auto; opacity: .14; color: var(--ink); }
.operator blockquote p { hanging-punctuation: first last; }
.operator blockquote p::before { content: "\201C"; margin-left: -0.44em; }
.operator blockquote p::after { content: "\201D"; }
@supports (hanging-punctuation: first) { .operator blockquote p::before { margin-left: 0; } }
@media (max-width: 900px) {
  .op-grid { grid-template-columns: 1fr; }
  .op-photo { aspect-ratio: 5 / 4; }
  .operator blockquote p::before { margin-left: 0; }
}

/* ---------- item 2: the price beat. Head centred above one wide card: the price and the ask, then what is in it ---------- */
.price { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 4.4vw, 56px); }   /* minmax(0): a 1fr track grew to the button's min-content at 320 and scrolled the page sideways */
.price .offer { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.offer-main, .offer-side { padding: clamp(28px, 3.4vw, 48px); }
.offer-side { border-left: 1px solid var(--line); }
.offer .incl { font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 14px; }
.offer-side .ticks { margin: 0; }
.offer-side .ticks li:last-child { border-bottom: 1px solid var(--line); }
.offer-main .trial { margin-top: 20px; }
@media (max-width: 900px) {
  .price .offer { grid-template-columns: 1fr; }
  .offer-side { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- item 12: your data (D74) ---------- */
.trust { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 104px); }
.trust-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.trust-list > div { padding: 22px 0 26px; border-top: 1px solid var(--line); }
.trust-list dt { font-weight: 600; font-size: 16px; line-height: 24px; color: var(--ink); }
.trust-list dd { margin: 8px 0 0; font-size: 16px; line-height: 25px; color: var(--ink-soft); }
@media (max-width: 900px) { .trust { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .trust-list { grid-template-columns: 1fr; } }

/* ---------- item 11: the D1 ad's photo on /last-night, the live message on its screen ---------- */
.hand { --hw: 420; margin: 0; width: calc(var(--hw) * 1px); max-width: 100%; }
/* the frame is a window on the plate (x 150-930, y 210-1210 of the 1080 px plate), so the phone reads at arm's length */
.hand-frame { position: relative; width: calc(var(--hw) * 1px); aspect-ratio: 780 / 1000; overflow: hidden; border-radius: var(--radius-plate); background: var(--linen); }
.hand-k { position: absolute; left: 0; top: 0; width: 1080px; height: 1424px; transform-origin: 0 0; transform: scale(calc(var(--hw) / 780)) translate(-150px, -210px); }
.hand-k img { width: 1080px; height: 1424px; max-width: none; }
.hand-screen { position: absolute; left: 0; top: 0; width: 393px; height: 852px; transform-origin: 0 0; overflow: hidden; border-radius: 44px; }
.hand-lit { position: absolute; inset: 0; background: var(--paper); mix-blend-mode: multiply; opacity: .4; pointer-events: none; }
.hero-c .side { align-items: flex-end; }
@media (max-width: 1359px) and (min-width: 1101px) { .hand { --hw: 330; } }
@media (max-width: 1100px) and (min-width: 901px) { .hand { --hw: 270; } }
.hero-lp .stage:has(.sheet) { padding-bottom: 88px; }
.hero-lp .stage .plate img[src*="e3-f1"] { object-position: 50% 85%; }
@media (max-width: 900px) { .hero-lp .stage:has(.sheet) { padding-bottom: 0; } }
@media (max-width: 900px) { .hero-c .side { align-items: center; } .hand { --hw: 340; } }
@media (max-width: 380px) { .hand { --hw: 300; } }

/* ---------- X8: the 404 ---------- */
.lost .grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 88px); align-items: center; min-height: min(72vh, 720px); }
.lost h1 { font-size: clamp(44px, 6vw, 84px); line-height: 1.02; }
.lost .lead { margin-top: 24px; }
.lost .actions { margin-top: 36px; }
.lost .side { display: flex; justify-content: center; padding-bottom: 40px; }
.lost .phone { --dw: 260; }
@media (max-width: 900px) { .lost .grid { grid-template-columns: 1fr; min-height: 0; } .lost .phone { --dw: 230; } }

/* ---------- X13: rows answer the pointer with a 100 ms wash ---------- */
.qa summary { margin: 0 -14px; padding-inline: 14px; border-radius: 10px; transition: color 120ms var(--ease-out), background-color 100ms var(--ease-out); }
.qa summary:hover { background: color-mix(in srgb, var(--paper-deep) 70%, transparent); }

/* footer invitation: the page ends twice (footer.design), a human line first, then the wordmark */
.foot .invite { font-size: clamp(24px, 2.6vw, 34px); }
.foot .invite a { white-space: nowrap; }

/* ======================================================================
   ROUND 4. Spec: NOW/plans/2026-10-28_brand-brain-sprint/website-r4/RECONCILE.md (Fable proposes, Astra attacks,
   Opus reconciles) over PROMPT-website-r4-world-class.md section 5. Later rules override rounds 1 to 3 at equal
   specificity, as round 3 did. Every colour is a token.
   ====================================================================== */

/* ---------- nav: wordmark, three links in a quiet pill, the Log in slot, the outline Join. 64 px at every width ---------- */
.nav .wrap { height: 64px; justify-content: space-between; position: relative; }
.nav nav { margin: 0; position: absolute; left: 50%; transform: translateX(-50%); }
.nav-links.pill { gap: 2px; padding: 4px; border-radius: 999px; background: var(--paper-deep); box-shadow: inset 0 0 0 1px var(--line); }
.nav-links.pill a { display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: 14px; line-height: 18px; transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.nav-links.pill a:hover { background: var(--paper-soft); color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-login { font-size: 14px; color: var(--ink-soft); }
.nav-cta { border-radius: var(--radius-button); }
.nav-cta[aria-hidden="true"] { visibility: hidden; }
.wordmark { min-height: 24px; }
/* frosted paper, so the page shows through the bar instead of a solid band over a rail (defect 4). The hairline is a
   shadow, not a border, so the bar's outer height is exactly 64 px (Astra read 2, item 9); X4 scrubs --nav-line. */
@property --nav-line { syntax: "<color>"; inherits: false; initial-value: transparent; }
.nav { background: color-mix(in srgb, var(--paper) 80%, transparent); border-bottom: 0; box-shadow: 0 1px 0 var(--nav-line);
  transition: transform 200ms var(--ease-out), --nav-line 200ms var(--ease-out); animation: none; }
.nav.is-stuck { --nav-line: var(--line); }
@supports (animation-timeline: scroll()) {
  .nav { animation: navline linear both; animation-timeline: scroll(root); animation-range: 0 80px; }
  @keyframes navline { from { --nav-line: transparent; } to { --nav-line: var(--line); } }
}
@media (max-width: 860px) { .nav .wrap { height: 64px; } .wordmark { width: 104px; height: 24px; } }
/* phones: the bar steps away on scroll down and returns on scroll up (chrome.js), never while a link has focus */
@media (max-width: 700px) { .nav.nav-away:not(:focus-within) { transform: translateY(-100%); } }

/* ---------- hero: Fable's two-line H1 inside the 68 px cap; the phone stands in the room and sinks into the plate's bottom edge ---------- */
/* Q11 (Johnny, 31 Oct ~22:50): the photo and the phone get the width. Equal columns, the H1 still two lines at 1440
   under the 68 px cap, and the stage bleeds to the page edge on wide screens.
   Astra read 2 item 8: the scene is a 4:3 box, the same ratio as the desktop crop images.py cuts (e5-f1-wide), so
   the served LCP image is the designed landscape, never a slice of a portrait. The device sinks into the box's bottom
   edge; measured at 1024/1440/1920 the 7:02 meta line stays inside the box (64/72/70% of the device shows). */
.hero-b .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); }
.hero-b h1 { font-size: clamp(40px, 3.9vw, 58px); }   /* 58 keeps two lines in the 572 px column the 1200 px wrap allows; under the 68 cap */
.hero-b .lead { max-width: 30em; }
@media (min-width: 901px) { .hero-b .stage { margin-right: calc(-1 * var(--gutter)); } .hero-b .stage .label { right: calc(var(--gutter) + 16px); } }
.hero-b .scene { --hero-dw: 280; justify-content: flex-start; padding: 48px 0 0 10%; overflow: hidden; border-radius: var(--radius-plate) 0 0 var(--radius-plate);
  aspect-ratio: 4 / 3; }
.hero-b .scene .plate { inset: 0; border-radius: inherit; }
.hero-b .scene .plate img { object-position: 50% 50%; }
.hero-b .scene .phone { --dw: var(--hero-dw); }
/* paper under the plate on wide screens, so the device sinks into the plate's edge, not into the Night beat below */
@media (min-width: 901px) { .hero-b { padding-bottom: clamp(28px, 5vw, 72px); } }
@media (min-width: 1180px) { .hero-b .scene { --hero-dw: 300; } }
@media (min-width: 1600px) { .hero-b .scene { --hero-dw: 320; } }
@media (max-width: 1100px) and (min-width: 901px) { .hero-b .scene { --hero-dw: 240; } }
/* the morning never withholds the H1, the lead, the CTA, the price or the plate; only the device rises */
html.armed .hero .copy > :not(h1) { opacity: 1; }
html.armed section:not(.hero) .phone .lock { display: none; }
/* phones (Astra): tighter gaps, the full-width button, so the whole message and its move sit above the fold */
@media (max-width: 900px) {
  .hero-b .grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-b .lead { margin-top: 16px; }
  .hero-b .actions { gap: 12px; margin-top: 20px; }
  .hero-b .actions .btn { width: 100%; }
  .hero-b .fine { margin-top: 16px; }
  /* the 4:3 landscape ratio is desktop only (Q11): with the phone's definite height it would set the scene's WIDTH to
     515 px at 390 and push the whole hero 125 px past the viewport (Astra read 3, item 1) */
  .hero-b .scene { --hero-dw: 236; aspect-ratio: auto; justify-content: center; padding: 0; border-radius: 0; height: calc(var(--hero-dw) * 2.099px * .78); }
  .hero-b .scene .plate { inset: 56px 0 0 0; border-radius: 0; }
  .hero-b .scene .plate img { object-position: 50% 70%; }
}
@media (max-width: 359px) { .hero-b .scene { --hero-dw: 216; } }

/* ---------- art-directed plates: a <picture> inside the frame behaves exactly as the bare <img> did ---------- */
.plate > picture { display: contents; }
.plate picture > img { width: 100%; height: 100%; object-fit: cover; }
.bookend .plate picture > img { object-position: 50% 50%; }


/* ---------- the capability system: one artefact, three readers (native radios, no JS), the 1-2-3 ladder beside it ---------- */
.seg-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(32px, 6vw, 104px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.seg { position: relative; display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 4px; border: 0; min-width: 0; width: max-content; max-width: 100%;
  border-radius: var(--radius-card); background: var(--paper-deep); box-shadow: inset 0 0 0 1px var(--line); }
.seg > span { display: contents; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: var(--radius-button); font-size: 14px; line-height: 18px; font-weight: 500;
  color: var(--ink-soft); cursor: pointer; transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.seg input:checked + label { background: var(--paper-soft); color: var(--ink); box-shadow: var(--shadow-artefact); }
.seg input:focus-visible + label { outline: 2px solid var(--forest); outline-offset: 2px; }
.seg-stage { margin-top: 28px; }
.pane { display: none; }
.seg-wrap:has(#seg-1:checked) .pane-1, .seg-wrap:has(#seg-2:checked) .pane-2, .seg-wrap:has(#seg-3:checked) .pane-3 { display: block; }
.seg-stage .phone { --dw: 260; margin: 0 auto; }
/* the phone panes: a linen tile the device sinks into (as it sinks into the hero plate), so the one message shows and
   the empty lower chat and the composer never do (review 31 Oct, craft (b)); 66% of the device clears the 7:02 meta line */
.pane-art { display: flex; justify-content: center; align-items: flex-start; overflow: hidden; padding: 40px 0 0;
  height: calc(40px + 260 * 2.099px * .66); background: var(--paper-deep); border-radius: var(--radius-plate); }
.pane-art .phone { margin: 0; --dw: 260; }
.seg-stage .sheet { max-width: 440px; margin: 0 auto; }
.seg-stage .demo-label { margin-top: 18px; text-align: center; }
.ladder { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; list-style: none; counter-reset: lad; }
.ladder li { counter-increment: lad; padding: 26px 0 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 40px 1fr; gap: 8px 16px; align-items: baseline; }
.ladder li::before { content: counter(lad); font: 600 15px/1 var(--sans); color: var(--ink-mute); font-variant-numeric: tabular-nums; grid-row: span 2; }
.ladder h3 { font-size: clamp(24px, 2vw, 28px); }
.ladder p { grid-column: 2; color: var(--ink-soft); max-width: 30em; }
.ladder li:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 900px) {
  .seg-wrap { grid-template-columns: 1fr; }
  .seg { width: 100%; }
  .ladder { grid-column: 1; grid-row: auto; margin-top: 40px; }
}

/* ---------- what's coming: the honest strip, one quiet list on the rail, no cards, no tags (every item is "coming") ---------- */
.coming { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.coming li { padding: 22px 0 26px; border-top: 1px solid var(--line); }
.coming h3 { font-size: clamp(22px, 1.9vw, 26px); }
.coming p { margin-top: 10px; color: var(--ink-soft); }
.coming-foot { margin-top: clamp(28px, 3vw, 40px); max-width: 640px; color: var(--ink-soft); }
.coming-foot .link { color: var(--ink); }
@media (max-width: 800px) { .coming { grid-template-columns: 1fr; gap: 0; } }

/* ---------- the founder beat: the fact, no quote (Q3) ---------- */
.operator .lead { margin-top: 20px; }

/* ---------- type: the H3 floor is 24 px everywhere (Astra's correction to the measured scale) ---------- */
.steps h3, .proof h3, .row-copy h3 { font-size: clamp(24px, 2vw, 28px); }

/* ---------- footer: the lock-up (invitation left, four columns right), the join link on the invitation's line ---------- */
.foot .lockup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 96px); align-items: start; }
.foot .invite { margin-bottom: 12px; font-size: clamp(26px, 3vw, 38px); }
.foot .invite .link { font: 500 16px/24px var(--sans); color: var(--ink); white-space: nowrap; margin-left: 14px; vertical-align: 0.28em; }
.foot .tagline { margin-top: 0; max-width: 26em; }
.foot .cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.foot a:not(.wordmark) { display: inline-block; min-height: 24px; }
.foot a[href^="mailto:"] { overflow-wrap: anywhere; }
@media (max-width: 800px) { .foot .lockup { grid-template-columns: 1fr; } .foot .cols { grid-template-columns: 1fr 1fr; } .foot .cols > :first-child { grid-column: auto; } }

/* ---------- 404: the numeric eyebrow ---------- */
.lost .copy > .demo-label { margin-bottom: 16px; }

/* ---------- the night-to-morning story (Q8): the one Night beat the page is allowed, spent where it carries night to morning.
   Desktop only. Scrubbed by CSS scroll-driven animations (zero JS); static stacked panels under reduced motion or
   where scroll timelines are not supported. ---------- */
.story { display: none; }
@media (min-width: 901px) {
  .story { display: block; background: var(--night); color: var(--paper); }
  /* the phone stands in the night and sinks into the panel's bottom edge, so the empty lower chat never shows */
  .story-pin { position: relative; padding: var(--section) 0 0; overflow: hidden; }
  .story-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
  .story-grid > .story-phone { align-self: end; margin: 48px auto calc(-0.36 * 300 * 2.099px); }
  .story-captions { padding-bottom: var(--section); }
  .story-captions { display: grid; gap: 40px; }
  .story-cap { margin: 0; }
  .story-when { display: block; font-family: var(--serif); font-weight: 440; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -0.018em; text-wrap: balance; }
  .story-when.num { font-family: var(--sans); font-weight: 600; letter-spacing: -0.03em; }
  .story-line { display: block; margin-top: 14px; font-size: clamp(18px, 1.45vw, 20px); line-height: 1.55; max-width: 26em; color: color-mix(in srgb, var(--paper) 78%, transparent); }
  .story-phone { --dw: 300; margin: 0 auto; }
  .story-label { position: absolute; left: max(var(--gutter), calc((100% - var(--max)) / 2)); bottom: 24px; margin: 0; color: color-mix(in srgb, var(--paper) 60%, transparent); }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.armed .story { height: 220vh; background: none; view-timeline: --story block; }
    html.armed .story-pin { position: sticky; top: 0; height: 100vh; padding: 0; display: grid; align-content: end; overflow: hidden; background: var(--night);
      animation: dawn linear both; animation-timeline: --story; animation-range: contain 0% contain 100%; }
    html.armed .story-grid { height: 100vh; }
    html.armed .story-captions { grid-template-areas: "cap"; gap: 0; padding-bottom: 0; }
    html.armed .story-cap { grid-area: cap; opacity: 0; animation: linear both; animation-timeline: --story; animation-range: contain 0% contain 100%; }
    html.armed .cap-1 { animation-name: cap-first; }
    html.armed .cap-2 { animation-name: cap-mid; }
    html.armed .cap-3 { animation-name: cap-last; color: var(--ink); }
    html.armed .cap-3 .story-line { color: var(--ink-soft); }
    html.armed .story-pin .story-label { animation: label-dawn linear both; animation-timeline: --story; animation-range: contain 0% contain 100%; }
  }
}
@keyframes dawn { 0%, 55% { background-color: var(--night); } 82%, 100% { background-color: var(--paper); } }
@keyframes cap-first { 0%, 26% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes cap-mid { 0%, 30% { opacity: 0; } 40%, 62% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes cap-last { 0%, 76% { opacity: 0; } 86%, 100% { opacity: 1; } }
@keyframes label-dawn { 0%, 55% { color: color-mix(in srgb, var(--paper) 60%, transparent); } 82%, 100% { color: var(--ink-mute); } }

/* the narrowest phones (320): the one Join button may take two lines rather than push the page sideways
   (layoutcheck, sideways scroll at 320 on five pages once the check measured the layout viewport) */
@media (max-width: 359px) { .price .offer .btn, .dock .btn { white-space: normal; padding: 10px 16px; line-height: 1.25; text-align: center; } }

/* ---------- the honest additions (LIVE-SITE-REVIEW section 3, 1 Nov 2026) ----------
   One rule set, the site's own vocabulary: hairlines from the token, labels 13/500, H3 floor 24, body 17/26 on ink-soft,
   Forest only on the button. Nothing here is a card over a tint; the facts sit on the paper. */
/* item 1: the spec strip, a hairline band straight under the hero */
.spec { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; }
.spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px clamp(24px, 4vw, 56px); margin: 0 auto; }
.spec-grid dt { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-mute); }
.spec-grid dd { margin: 6px 0 0; font-size: 17px; line-height: 26px; color: var(--ink); text-wrap: pretty; }
@media (max-width: 700px) { .spec { margin-top: 32px; padding: 20px 0; } .spec-grid { grid-template-columns: 1fr; gap: 16px; } }
/* item 3: the annotated brief, three notes with a source chip each */
.notes { margin: 28px 0 0; padding: 0; list-style: none; max-width: 32em; }
.notes li { padding: 18px 0 20px; border-top: 1px solid var(--line); }
.notes li:last-child { border-bottom: 1px solid var(--line); }
.chip { display: inline-block; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-soft); padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.notes h3 { margin-top: 10px; font-size: clamp(24px, 2vw, 28px); }
.notes p { margin-top: 8px; color: var(--ink-soft); }
.notes p b { color: var(--ink); font-weight: 600; }
/* item 7: the loaded line inside the ladder keeps its figures in Inter */
.ladder .num { font-weight: 600; color: var(--ink); }
.ladder .link { display: inline-block; margin-top: 10px; }
/* item 6: the two readers of the same night */
.readers { margin-top: clamp(48px, 5vw, 72px); padding-top: clamp(32px, 3vw, 40px); border-top: 1px solid var(--ink); }
.readers .head h3 { font-size: clamp(24px, 2.2vw, 30px); }
.readers-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 56px); margin-top: 24px; }
.readers-grid .who { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-mute); }
.readers-grid p + p { margin-top: 8px; color: var(--ink-soft); max-width: 30em; }
@media (max-width: 700px) { .readers-grid { grid-template-columns: 1fr; } }
/* items 8 and 4: how the move is chosen, then what a move looks like */
.method-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; counter-reset: meth; }
.method-list li { counter-increment: meth; padding: 22px 0 26px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 40px 1fr; gap: 0 12px; }
.method-list li::before { content: counter(meth); font: 600 15px/1.3 var(--sans); color: var(--ink-mute); font-variant-numeric: tabular-nums; grid-row: span 2; padding-top: 6px; }
.method-list h3 { font-size: clamp(24px, 2vw, 28px); }
.method-list p { grid-column: 2; margin-top: 8px; color: var(--ink-soft); max-width: 28em; }
.named-move { margin: clamp(40px, 5vw, 64px) 0 0; padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--ink); max-width: 760px; }
.named-move blockquote { margin: 0; }
.named-move blockquote p { font-family: var(--serif); font-weight: 440; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.2; letter-spacing: -0.018em; text-wrap: balance; hanging-punctuation: first last; }
.named-move .num { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; }
.named-move figcaption { margin-top: 18px; font-size: 16px; line-height: 25px; color: var(--ink-soft); }
.named-move figcaption b { color: var(--ink); font-weight: 600; }
.named-move figcaption .demo-label { display: block; margin-top: 8px; }
.decide { margin-top: clamp(32px, 4vw, 48px); font-family: var(--serif); font-weight: 440; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; letter-spacing: -0.018em; max-width: 24em; }
@media (max-width: 700px) { .method-list { grid-template-columns: 1fr; } }
/* item 5: the cadence ladder, from the same flag list as the coming strip */
.cadence { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(20px, 2.6vw, 36px); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.cadence li { position: relative; padding: 20px 0 24px; border-top: 1px solid var(--line); }
.cadence li.is-live { border-top-color: var(--ink); }
.cadence h3 { font-size: clamp(24px, 2vw, 28px); }
.cadence li.is-coming h3 { color: var(--ink-soft); }
.cadence p { margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.cadence .when { display: inline-block; margin-top: 12px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-mute); }
.coming-h { margin-top: clamp(48px, 5vw, 72px); font-size: clamp(24px, 2vw, 28px); }
.coming-h + .coming { margin-top: 20px; }
@media (max-width: 1000px) { .cadence { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cadence { grid-template-columns: 1fr; } .cadence li { padding: 16px 0 18px; } }
/* item 12: the five calculators and the Health Score door */
.tools-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tools-5 b { font-size: 22px; }
.score { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px clamp(24px, 4vw, 56px); align-items: end; margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line); }
.score h3 { font-size: clamp(24px, 2vw, 28px); max-width: 22em; }
.score p { margin-top: 8px; color: var(--ink-soft); max-width: 32em; }
@media (max-width: 1100px) { .tools-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .tools-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .score { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 480px) { .tools-5 { grid-template-columns: 1fr; } }
/* item 9: the five-step version on /how-it-starts reads as the sequence it is */
.steps-vertical { grid-template-columns: 1fr; gap: 0; max-width: 720px; }
.steps-vertical li { display: grid; grid-template-columns: 40px 1fr; gap: 0 12px; padding: 22px 0 26px; border-top: 1px solid var(--line); }
.steps-vertical li:first-child { border-top-color: var(--ink); }
.steps-vertical li::before { margin-bottom: 0; padding-top: 7px; grid-row: span 2; }
.steps-vertical p { grid-column: 2; max-width: 30em; }

/* ---------- truth lane (Johnny 1 Nov): one artifact per device ----------
   #session shows the daily brief as the .sheet (browser view), not the phone again; the story phone is the lock screen
   only; #what opens on Monday's agenda and hides its tab bar while it has a single tab. */
.sheet.brief { margin: 0; }
.brief .kv { margin: 0; }
.brief .kv > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "s v"; gap: 2px 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.brief .kv dt { grid-area: k; margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.brief .kv dd { margin: 0; }
.brief .kv .num { grid-area: v; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; text-align: right; }
.brief .kv .src { grid-area: s; font-size: 13px; line-height: 18px; color: var(--ink-mute); }
/* wide screens: the brief sheet steps below the plate and overlaps only its foot, as it already does at 901 to 1200 */
@media (min-width: 1201px) {
  .session .stage .plate { margin-left: 0; aspect-ratio: 4 / 3.8; }
  .session .stage .brief { position: relative; width: auto; margin: -48px 20px 0; }
}
/* the story phone shows the lock screen the message arrives on: the one place a .lock is visible outside the hero */
html .story .story-phone .lock, html.armed section.story .story-phone .lock { display: block; }
.story-phone .lock-time { margin-top: 92px; }
.story-phone .notif { margin-top: 200px; }
/* #what: with whatsapp_live false the tab bar has one tab, so it is not drawn (the pane stands on its own) */
.seg:not(:has(> span)) { display: none; }
.seg-wrap:not(:has(.seg > span)) .seg-stage { margin-top: 0; }
.offer-side .coming-link { margin-top: 18px; font-size: 15px; }
/* ======================================================================
   HERO ROUND (1 Nov 2026, Fable 5.1, Johnny 09:09: "Typography in sections could be better"). The type scale, three
   roles with contrast between them, measured by the DOM audit, never by eye:
     display  the H1 (and the bookend): one step up, leading 1.0, tracking -0.026em
     section  every H2: bigger and tighter than round 4 (34 to 54), with more air under it before the lead
     sub      the H3 inside a list (steps, ladder, method, notes, coming, cadence, tools): Inter 600 at 18/26, so the
              serif is spent on the human line and the sans carries the job words. Weight contrast, not just size.
     mid      a beat's own sub-heading (money proof, the two readers, coming-h, the score): Literata one step under the H2
   Later rules override rounds 1 to 4 at equal specificity, as every round did. Every colour is a token.
   ====================================================================== */
h1 { font-size: clamp(42px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.026em; }
.hero-b h1 { font-size: clamp(42px, 4vw, 58px); line-height: 1; letter-spacing: -0.026em; }   /* 58 is the top of two lines in the 572 px column at 1440 (60 measured three, h1_lines); RECONCILE keeps two */
@media (min-width: 901px) { .hero-b .lead { margin-top: 26px; } .hero-b .actions { margin-top: 40px; } }   /* phones keep Astra's tighter fold */
h2 { font-size: clamp(34px, 3.9vw, 54px); line-height: 1.04; letter-spacing: -0.022em; }
.head { max-width: 800px; }
.head .lead { margin-top: 24px; }
/* the lead under a head carries one step more size than body, so the three levels read as three */
.lead { font-size: clamp(18px, 1.5vw, 21px); }
/* sub: the job words inside a list */
.steps h3, .steps-vertical h3, .ladder h3, .method-list h3, .notes h3, .coming h3, .cadence h3, .tools b, .trust-list dt {
  font-family: var(--sans); font-weight: 600; font-size: 18px; line-height: 26px; letter-spacing: -0.012em; text-wrap: pretty; }
.steps li::before { margin-bottom: 18px; }
.method-list li::before { padding-top: 4px; }
.ladder li { align-items: start; }
.ladder li::before { padding-top: 6px; }
/* mid: a beat's own sub-heading, Literata one step under the H2 */
.proof h3, .readers .head h3, .coming-h, .score h3, .row-copy h3 { font-family: var(--serif); font-weight: 440; font-size: clamp(26px, 2.3vw, 32px); line-height: 1.1; letter-spacing: -0.018em; }

/* ======================================================================
   BRAND HOMEPAGE (1 Nov 2026, Fable 5.1). Spec: NOW/plans/2026-10-28_brand-brain-sprint/website-r4/BRAND-HOMEPAGE.md,
   acceptance: DESIGN-BENCHMARK.md sections 4 and 5. Johnny: "make Briefed look like a million dollar brand from the off
   and sell it as a product, not one of each feature." Scoped to main.home and the brand hero, so the landing pages keep
   the round 4 rules. Every colour is a token. Spacing on the 4/8 scale only (benchmark principle 9).
   Section padding encodes weight (principle 4): three values, supporting / standard / turning point.
   ====================================================================== */
:root { --pad-s: clamp(48px, 5vw, 72px); --pad-m: clamp(72px, 8.4vw, 120px); --pad-l: clamp(104px, 12.2vw, 176px); }
.home .section.pad-s { padding: var(--pad-s) 0; }
.home .section.pad-m { padding: var(--pad-m) 0; }
.home .section.pad-l { padding: var(--pad-l) 0; }
.home .section.pad-s + .section.pad-s { padding-top: 0; }
.home .section#how { padding-top: var(--pad-l); }                /* after the turning point, the page breathes longest */
.home .section#data { padding: var(--pad-s) 0; }
.home .section#faq { padding-bottom: 0; }
.home .bookend { padding-top: var(--pad-l); }

/* scale makes the hierarchy (principle 5): H1 72, H2 50 (1.44), one tracked-caps eyebrow, body 17, lead 18 to 20 */
.home h1 { font-size: clamp(42px, 5vw, 72px); line-height: 1; letter-spacing: -0.026em; }
.home h2 { font-size: clamp(30px, 3.5vw, 50px); line-height: 1.04; letter-spacing: -0.022em; }
.home .lead { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; }
.home .mid { font-family: var(--serif); font-weight: 440; font-size: clamp(26px, 2.3vw, 32px); line-height: 1.1; letter-spacing: -0.018em; }
.eyebrow { margin: 0; font: 500 13px/18px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); font-variant-numeric: normal; }
.home .head .eyebrow, .band-copy .eyebrow { margin-bottom: 16px; }
.home .head .lead { margin-top: 20px; }
.home .demo-label.center { text-align: center; margin-top: 24px; }
/* surface tints collapse to two (gap 3): the paper and white. The nav pill goes white page-wide. */
.nav-links.pill { background: var(--paper-soft); }

/* ---------- the brand hero: type centred over a 3:2 scene inside the grid (gap 2), the live device in it (gap 1) ---------- */
.hero-brand { padding: clamp(40px, 5vw, 72px) 0 0; }
.hero-brand .copy { text-align: center; max-width: 880px; margin: 0 auto; }
.hero-brand .copy .eyebrow { margin-bottom: 16px; }
.hero-brand h1 { text-wrap: balance; }
.hero-brand .lead { margin: 24px auto 0; max-width: 32em; }
.hero-brand .actions { justify-content: center; margin-top: 32px; }
.hero-brand .price-line { margin: 16px auto 0; max-width: 36em; }
.hero-brand .stage { position: relative; margin: clamp(40px, 5vw, 64px) auto 0; max-width: 960px; }
.hero-brand .scene { position: relative; display: flex; justify-content: flex-start; align-items: flex-start; padding: 72px 0 0 8%;
  aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-plate); }
.hero-brand .scene .plate { position: absolute; inset: 0; border-radius: inherit; }
.hero-brand .scene .plate img { object-position: 50% 50%; }
.hero-brand .scene .phone { position: relative; z-index: 1; margin: 0; --dw: 300; }
.hero-brand .stage .label { position: absolute; z-index: 2; right: 16px; top: 16px; padding: 8px 12px; border-radius: 8px; background: var(--paper-soft); }
@media (max-width: 1240px) { .hero-brand .stage { max-width: none; } }
@media (max-width: 1100px) and (min-width: 901px) { .hero-brand .scene .phone { --dw: 260; } }
@media (max-width: 900px) {
  .hero-brand .lead { margin-top: 16px; }
  .hero-brand .actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 24px; }
  .hero-brand .actions .btn { width: 100%; }
  .hero-brand .actions .link { align-self: center; }
  .hero-brand .price-line { margin-top: 16px; }
  /* the scene bleeds to the page edge on both sides (principle 2) and the device sinks into its bottom edge, so the whole
     message and its move show while the composer and the page height do not (the production hero's own recipe) */
  .hero-brand .stage { margin: 32px calc(-1 * var(--gutter)) 0; max-width: none; }
  .hero-brand .scene { --hero-dw: 236; aspect-ratio: auto; justify-content: center; padding: 0; border-radius: 0; height: calc(var(--hero-dw) * 2.099px * .78); }
  .hero-brand .scene .plate { inset: 56px 0 0 0; border-radius: 0; }
  .hero-brand .scene .plate img { object-position: 50% 100%; }
  .hero-brand .scene .phone { --dw: var(--hero-dw); }
  .hero-brand .stage .label { position: static; margin: 12px var(--gutter) 0; padding: 0; background: none; text-align: center; }
}
@media (max-width: 359px) { .hero-brand .scene { --hero-dw: 216; } }

/* ---------- (2) the product as one advisor: two artifacts side by side, each under its eyebrow (gaps 6 and 7) ---------- */
.pair-art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 5vw, 64px); margin-top: clamp(40px, 5vw, 64px); }
.pair-art .art { display: grid; gap: 16px; align-content: start; justify-items: start; }
.pair-art .sheet { width: 100%; max-width: 560px; margin: 0; justify-self: stretch; }
.pair-art .under { color: var(--ink-soft); max-width: 30em; }
@media (max-width: 800px) { .pair-art { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- (3) the turning point: a full-bleed photograph, the money line on the wall above the team ---------- */
.band { position: relative; overflow: hidden; min-height: min(78vh, 760px); display: grid; align-content: start; }
.band-plate { position: absolute; inset: 0; background: var(--paper-soft); }
.band-plate picture { display: contents; }
.band-plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.band-copy { position: relative; z-index: 1; padding-top: clamp(40px, 5vw, 64px); }
.band-copy h2 { max-width: 12em; }
.band-copy .lead { margin-top: 16px; max-width: 26em; color: var(--ink); }
.band-copy .actions { margin-top: 24px; }
.band-copy .demo-label { margin-top: 16px; }
@media (max-width: 700px) {
  /* phones: the photograph stands full bleed and the line sits under it on paper, never over a face */
  .band { min-height: 0; display: block; }
  .band-plate { position: relative; inset: auto; aspect-ratio: 4 / 4.2; }
  .band-copy { padding-top: 32px; }
}

/* ---------- (4) how it starts, then the offer under a hairline, the signed card centred ---------- */
.price-home { margin-top: var(--pad-m); padding-top: var(--pad-m); border-top: 1px solid var(--line); }
.price-home .head { margin: 0 auto; text-align: center; }
.price-home .head .mid { margin-top: 0; }
.price-home .head .lead { margin: 16px auto 0; }
.price-home .offer { width: 100%; max-width: 1000px; margin: 40px auto 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
@media (max-width: 900px) { .price-home .offer { grid-template-columns: 1fr; } }

/* ---------- (6) what comes next, the strip compact ---------- */
.coming-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin-top: 40px; }
.coming-compact li { padding: 16px 0 20px; }
.coming-compact h3 { font: 600 17px/24px var(--sans); letter-spacing: -0.012em; }
.coming-compact p { margin-top: 4px; font-size: 15px; line-height: 22px; }
@media (max-width: 800px) { .coming-compact { grid-template-columns: 1fr; gap: 0; } }

/* the 4/8 scale on the home (principle 9, measured by brandcheck.mjs): the round 1 to 4 fixed values 2, 10, 14, 18, 22
   and 26 that the shared artefacts and lists carried are moved to the grid here, for the home and the brand hero only */
.home .sheet-head { padding: 16px 20px; }
.home .brief .kv > div { gap: 4px 16px; padding: 16px 0 12px; }
.home .do { padding: 16px; }
.home .offer .amount { gap: 8px; }
.home .offer .tier { margin-bottom: 16px; }
.home .offer .after { padding-top: 16px; }
.home .offer .fine { margin-top: 16px; }
.home .trust-list > div { padding: 24px 0; }
.home .qa summary { margin: 0 -16px; padding: 24px 16px; }
.home .bookend .lead { margin-top: 16px; }
.home .steps li::before { margin-bottom: 16px; }
.home .hero-brand .scene { padding-left: 80px; }
.home .plate, .home .band-plate { background: var(--paper-soft); }
@media (max-width: 900px) { .home .hero-brand .scene { padding-left: 0; } }

/* fix loop 1 (measured: layoutcheck 13 face hits at 768 to 1100, brandcheck 3 fixed off-grid values; the 1440 shot
   showed the composer's top edge at the scene's foot): the band copy stands under the photograph up to 1100 and over
   the wall from 1101, with a block short enough to end above the first face at every width from 1101 (face top is
   0.3 x viewport width: 330 px at 1101, 432 at 1440); the demo label becomes the corner chip; the device sinks 96 px. */
.hero-brand .scene { padding-top: 96px; }
.band-copy { padding-top: clamp(32px, 9.4vw - 72px, 64px); }
.band-copy .lead { max-width: 24em; }
.band .label { position: absolute; z-index: 2; right: 16px; bottom: 16px; padding: 8px 12px; border-radius: 8px; background: var(--paper-soft); }
@media (max-width: 1100px) {
  .band { min-height: 0; display: block; }
  .band-plate { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .band-copy { padding-top: 32px; }
  .band .label { bottom: auto; top: 16px; }
}
@media (max-width: 700px) { .band-plate { aspect-ratio: 4 / 4.2; } }
.home .phone figcaption { margin-top: 16px; }
.home .offer .incl { margin-bottom: 16px; }
.home .trust-list { gap: 0 48px; }

/* fix loop 2 (layoutcheck: the corner chip sat on the right face at 1680 and 1920): the chip stands in the top right
   corner at every width, on the wall; the copy owns the left. One last fixed off-grid value to 16. */
.band .label { bottom: auto; top: 16px; }
.home .offer-side .coming-link { margin-top: 16px; }

/* IA pass (lead, DESIGN-BENCHMARK section 6): the coming strip sits right under the price as its own short beat; the
   founder is the proof beat (standard weight); the steps carry their door to /how-it-starts. */
.home .section.coming-home { padding-top: 0; }
.home .section#operator { padding: var(--pad-m) 0; }
.home .section#operator + .section#data { padding-top: 0; }
.home .steps-more { margin-top: 32px; }
.home .operator .actions { margin-top: 24px; }
.home .operator .eyebrow { margin-bottom: 16px; }

/* ======================================================================
   SELL ROUND (1 Nov 2026 11:30, Johnny picked the brand page): the phone demo, the typographic money band, the pains,
   the WhatsApp companion and the held sections. Every colour a token; spacing on the 4/8 scale.
   ====================================================================== */

/* ---------- the pains: four quoted lines, each answered ---------- */
.pains { margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); }
.pains > div { padding: 24px 0 32px; border-top: 1px solid var(--ink); }
.pains dt { font-family: var(--serif); font-weight: 440; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; max-width: 18em; }
.pains dd { margin: 16px 0 0; color: var(--ink-soft); max-width: 30em; }
@media (max-width: 800px) { .pains { grid-template-columns: 1fr; } .pains > div { padding: 20px 0 24px; } }

/* ---------- the phone demo: captions as controls on the left, the device on the right ---------- */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 104px); align-items: center; margin-top: clamp(40px, 5vw, 64px); }
.demo-steps { margin: 0; padding: 0; border: 0; min-width: 0; }
.demo-steps .step { position: relative; border-top: 1px solid var(--line); }
.demo-steps .step:last-of-type { border-bottom: 1px solid var(--line); }
.demo-steps input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.demo-steps label { display: grid; gap: 4px; padding: 20px 16px 24px 48px; cursor: pointer; border-radius: var(--radius-card); position: relative;
  color: var(--ink-mute); transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.demo-steps label::before { content: ""; position: absolute; left: 16px; top: 26px; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-mute); transition: background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.demo-steps label b { font-family: var(--serif); font-weight: 440; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.15; letter-spacing: -0.015em; color: inherit; }
.demo-steps label > span:last-child { color: inherit; max-width: 28em; }
.demo-steps label .eyebrow { color: inherit; }
.demo-steps label:hover { color: var(--ink-soft); }
.demo-steps input:checked + label { color: var(--ink); }
.demo-steps input:checked + label > span:last-child { color: var(--ink-soft); }
.demo-steps input:checked + label::before { background: var(--forest); box-shadow: inset 0 0 0 1.5px var(--forest); }
.demo-steps input:focus-visible + label { outline: 2px solid var(--forest); outline-offset: 2px; }
.demo-foot { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; margin-top: 24px; }
.demo-replay { font: inherit; background: none; border: 0; padding: 0 0 4px; cursor: pointer; color: var(--ink); }
.demo-phone { --dw: 300; margin: 0 auto; }
@media (max-width: 1100px) and (min-width: 901px) { .demo-phone { --dw: 260; } }
@media (max-width: 900px) { .demo { grid-template-columns: 1fr; } .demo-phone { --dw: 236; order: -1; } }
/* the three screens, stacked in the 393 x 852 screen box; the checked radio shows its screen (no JS needed) */
.demo-phone .ds { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity 320ms var(--ease-settle), transform 320ms var(--ease-settle); pointer-events: none; overflow: hidden; }
.demo:has(#ds-1:checked) .ds-1, .demo:has(#ds-2:checked) .ds-2, .demo:has(#ds-3:checked) .ds-3 { opacity: 1; transform: none; }
.demo-phone .ds-1 { padding: 0 14px; text-align: center; color: var(--paper-soft);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 22%, transparent) 0%, transparent 34%), url("img/lock-wall.webp") 50% 50% / cover no-repeat, var(--linen); }
.demo-phone .ds-1 .notif { margin-top: 220px; text-align: left; }
.demo-phone .ds-web { background: var(--paper); color: var(--ink); font-family: var(--sans); }
.demo-phone .ds-status { height: 64px; display: flex; justify-content: space-between; align-items: center; padding: 0 30px 0 40px; font-weight: 600; font-size: 17px; }
.demo-phone .ds-icons { display: flex; gap: 6px; align-items: center; }
.demo-phone .ds-icons .bars { width: 18px; height: 11px; background: linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 5px, var(--ink) 5px 8px, transparent 8px 10px, var(--ink) 10px 13px, transparent 13px 15px, var(--ink) 15px 18px); }
.demo-phone .ds-icons .batt { width: 25px; height: 12px; border: 1.5px solid var(--ink); border-radius: 4px; position: relative; }
.demo-phone .ds-icons .batt::after { content: ""; position: absolute; inset: 1.5px; right: 5px; background: var(--ink); border-radius: 1.5px; }
.demo-phone .ds-url { margin: 4px 16px 0; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--paper-soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; color: var(--ink-soft); }
.demo-phone .ds-page { padding: 16px; zoom: 1.12; }
.demo-phone .ds-page .sheet { margin: 0; box-shadow: none; }

/* ---------- the money band, typographic: full bleed between hairlines on the white surface ---------- */
.band-type { background: var(--paper-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 0; display: block; overflow: visible; }
.band-type .band-copy { padding: var(--pad-m) var(--gutter); }
.big-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(32px, 5vw, 80px); margin-top: 24px; }
.big-pair p { display: grid; gap: 12px; }
.big-pair b { font-weight: 700; font-size: clamp(64px, 10vw, 152px); line-height: .92; letter-spacing: -0.05em; color: var(--ink); }
.big-pair .muted b { color: var(--ink-mute); }
.big-pair span { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; color: var(--ink-soft); font-variant-numeric: normal; font-feature-settings: normal; }
.band-type h2 { margin-top: clamp(32px, 4vw, 48px); max-width: 14em; }
.band-type .lead { margin-top: 16px; max-width: 30em; color: var(--ink-soft); }
.band-type .actions { margin-top: 24px; }
.band-type .demo-label { margin-top: 16px; }
@media (max-width: 700px) { .big-pair { grid-template-columns: 1fr; gap: 24px; } .big-pair b { font-size: clamp(56px, 17vw, 72px); } }

/* ---------- WhatsApp companion (held on whatsapp_live) ---------- */
.ask { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px clamp(32px, 6vw, 104px); align-items: center; }
.ask .copy .eyebrow { margin-bottom: 16px; }
.ask .copy .lead { margin-top: 20px; }
.plain-list { margin: 24px 0 0; padding: 0; list-style: none; max-width: 30em; }
.plain-list li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-soft); }
.plain-list li:last-child { border-bottom: 1px solid var(--line); }
.ask .copy .actions { margin-top: 24px; }
.ask .copy .demo-label { margin-top: 16px; }
.ask .art { display: flex; justify-content: center; }
.ask .art .phone { --dw: 280; }
@media (max-width: 900px) { .ask { grid-template-columns: 1fr; } .ask .art .phone { --dw: 236; } }

/* ---------- two readers (held on claim_c20_live), the longer views and more (held) ---------- */
.home .readers-grid { margin-top: clamp(40px, 5vw, 64px); gap: 24px clamp(32px, 5vw, 80px); }
.home .readers-grid > div { padding-top: 24px; border-top: 1px solid var(--ink); }
.home .readers-grid h3 { margin-top: 8px; font-family: var(--serif); font-weight: 440; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.2; letter-spacing: -0.015em; }
.home .readers-grid h3 + p { margin-top: 12px; color: var(--ink-soft); max-width: 30em; }
.home .cadence { margin-top: clamp(40px, 5vw, 64px); }
.home .cadence li { padding: 20px 0 24px; }
.home .cadence .when { margin-top: 12px; }

/* sell round fix loop 1 (layoutcheck on the all-flags preview: sideways scroll at 320 on the home's #ask and at 320/360
   on /last-night's #ask): a bare 1fr track grows to its min-content (the same lesson as .price); minmax(0, 1fr). */
@media (max-width: 900px) { .ask, .lp { grid-template-columns: minmax(0, 1fr); } }

/* the WhatsApp phone drops the user-agent figure margin (brandcheck on the preview: 17 px off the grid) */
.ask .art .phone { margin: 0; }

/* ---------- at rest, everything reads (Johnny 1 Nov 12:22, "$9,896 isn't loading properly") ----------
   Cause: motion.js builds a rolled figure out of spans (ghost, reel, columns), and the band's descendant rule
   `.big-pair span` (the label under the figure) restyled those spans to 19 px inside a 144 px figure. The roll's parts
   now inherit the figure's font wherever the roll stands, and the band's label rule reaches only the label. Every
   reveal is a progressive enhancement: nothing on the page rests at opacity 0 waiting for a trigger (motion.js). */
.roll > span, .roll .reel, .roll .col, .roll .col > span, .roll .col i, .roll .ch { font: inherit; line-height: 1; color: inherit; margin: 0; letter-spacing: inherit; }
.roll .col { height: 1em; }
.big-pair p > span { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; color: var(--ink-soft); }
.big-pair b { line-height: 1; }
/* a browser without :has() shows the brief screen of the demo (the checked default), never an empty phone */
@supports not selector(:has(a)) { .demo-phone .ds-2 { opacity: 1; transform: none; } }