/* TextSupport site. Brand "The Answer" (decision 0011, docs/brand/brand-bible-v2.md): the brand is the reply.
   Every hex below is copied from direction A's own :root blocks (site/variants/a.html, Ariel's pick 2026-10-23).
   One accent, lantern amber #F7B24B, and amber only ever sits on dusk #182232 (or is a fill under dusk ink).
   Contrast (WCAG 2.x, computed from these hexes; test/site/brand.test.mjs re-checks them):
     light  text #182232 on canvas #FCF9F2 15.20, on surface #F2ECE0 13.59 | quiet #1F5E55 on canvas 7.16
            (quiet text is never set on surface: .surface turns it back to --text-primary)
            ticket and buttons: #FCF9F2 on #182232 15.20, amber #F7B24B on #182232 8.70
     dark   text #FCF9F2 on canvas #182232 15.20, on surface #233146 12.49, on #344763 8.97 | quiet #A7D7CE 10.09 / 8.29
            buttons: #182232 on amber #F7B24B 8.70; the "you" bubble #182232 on #FCF9F2 15.20
   Type: Newsreader 700 (display, prices), Atkinson Hyperlegible 400/700 (text), IBM Plex Mono 500/700 (only the
   number and typed keywords). Atkinson slashes its zero, so "0" alone comes from TS Zero, a plain zero cut from
   Atkinson itself (docs/brand/fonts/make-plain-zero.py). Plex Mono dots its zero: no zero is ever set in mono.
   Scale (px): h1 48/34, h2 34/26, h3 22, lede 22, body 20/18, small 18 (the floor), number 56/36.
   Spacing 4 8 12 16 24 32 48 72. Radius 6 focus, 14 ticket, 20 bubbles and keys (6 on the tail corner). */

@font-face { font-family: 'TS Zero'; src: url('/fonts/ts-zero-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0030; }
@font-face { font-family: 'TS Zero'; src: url('/fonts/ts-zero-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0030; }

:root {
  --bg-canvas: #FCF9F2; --bg-surface: #F2ECE0; --text-primary: #182232; --text-muted: #1F5E55;
  --border-subtle: #E2DBC8; --focus: #182232;
  --mark-b: #182232; --mark-d: #F7B24B;
  --ticket-bg: #182232; --ticket-ink: #FCF9F2; --ticket-glow: #F7B24B;
  --btn-bg: #182232; --btn-ink: #FCF9F2; --btn-icon: #F7B24B;
  --screen: #FCF9F2; --bub-in: #F2ECE0; --bub-in-ink: #182232; --bub-out: #182232; --bub-out-ink: #FCF9F2;
  --bezel: #182232; --halo: #F7B24B; --h1: 40%; --h2: 24%; --h3: 11%;
  --font-display: 'Newsreader', Georgia, serif;
  --font-sans: 'TS Zero', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas: #182232; --bg-surface: #233146; --text-primary: #FCF9F2; --text-muted: #A7D7CE;
    --border-subtle: #344763; --focus: #F7B24B;
    --mark-b: #F7B24B; --mark-d: #182232;
    --ticket-bg: #233146; --ticket-ink: #FCF9F2; --ticket-glow: #F7B24B;
    --btn-bg: #F7B24B; --btn-ink: #182232; --btn-icon: #182232;
    --screen: #233146; --bub-in: #344763; --bub-in-ink: #FCF9F2; --bub-out: #FCF9F2; --bub-out-ink: #182232;
    --bezel: #0E151F; --halo: #F7B24B; --h1: 0%; --h2: 0%; --h3: 0%;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg-canvas: #182232; --bg-surface: #233146; --text-primary: #FCF9F2; --text-muted: #A7D7CE;
  --border-subtle: #344763; --focus: #F7B24B;
  --mark-b: #F7B24B; --mark-d: #182232;
  --ticket-bg: #233146; --ticket-ink: #FCF9F2; --ticket-glow: #F7B24B;
  --btn-bg: #F7B24B; --btn-ink: #182232; --btn-icon: #182232;
  --screen: #233146; --bub-in: #344763; --bub-in-ink: #FCF9F2; --bub-out: #FCF9F2; --bub-out-ink: #182232;
  --bezel: #0E151F; --halo: #F7B24B; --h1: 0%; --h2: 0%; --h3: 0%;
  color-scheme: dark;
}

/* Base: body 20/1.6, 18 on phones. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg-canvas); color: var(--text-primary); font-family: var(--font-sans); font-size: 1.25rem; line-height: 1.6; overflow-wrap: break-word; }
@media (max-width: 720px) { body { font-size: 1.125rem; } }
svg { display: block; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; text-wrap: balance; }
h1 { font-size: 3rem; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: 2.125rem; line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: 1.375rem; line-height: 1.3; }
@media (max-width: 720px) { h1 { font-size: 2.125rem; line-height: 1.15; } h2 { font-size: 1.625rem; line-height: 1.25; } }
p, li, dd { text-wrap: pretty; }
p { margin: 0; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.mono, kbd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
kbd { font-weight: 700; font-size: 1em; }
.nw { white-space: nowrap; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html:not(.js) .js-only { display: none !important; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
@media (max-width: 720px) { .wrap { padding: 0 1rem; } }
.skip { position: absolute; left: 1rem; top: -5rem; z-index: 5; background: var(--text-primary); color: var(--bg-canvas); padding: 0.75rem 1rem; }
.skip:focus { top: 1rem; }

/* The mark: a reply bubble with the three "typing" dots. Amber only ever sits on dusk. */
.mk-b { fill: var(--mark-b); } .mk-d { fill: var(--mark-d); }

/* Header */
.head .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--text-primary); text-decoration: none; margin-right: auto; }
.brand .mark { width: 40px; height: 40px; flex: none; }
.brand b { font-family: var(--font-display); font-weight: 700; font-size: 1.8125rem; line-height: 1; letter-spacing: -0.01em; }
.head nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.head nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; font-size: 1.125rem; }
.theme-toggle { display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 2px solid var(--border-subtle); border-radius: 50%; background: none; color: var(--text-primary); cursor: pointer; }
.theme-toggle:hover { border-color: var(--text-primary); }
.theme-toggle svg { width: 20px; height: 20px; }
@media (max-width: 720px) {
  .head nav { order: 3; width: 100%; gap: 0 1rem; }
  .brand b { font-size: 1.5rem; }
}

/* Hero: the conversation is the picture */
.hero { overflow-x: clip; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 3rem; align-items: center; padding-top: 1rem; padding-bottom: 2rem; }
.hero h1 { max-width: 14ch; }
.lede { margin-top: 0.875rem; max-width: 40ch; font-size: 1.375rem; line-height: 1.5; }
.ticket { display: block; margin-top: 1.75rem; max-width: 34rem; padding: 1.25rem 1.75rem 1.375rem; border-radius: 14px; background: var(--ticket-bg); color: var(--ticket-ink); text-decoration: none; }
.ticket .label { display: block; font-size: 1.125rem; font-weight: 700; }
.ticket .num { display: block; margin-top: 0.125rem; font-family: var(--font-mono); font-weight: 700; font-size: clamp(2.25rem, 4.2vw, 3.5rem); line-height: 1.08; letter-spacing: -0.01em; }
.ticket .num .tx { color: var(--ticket-glow); }
.ticket .dial { display: block; margin-top: 0.375rem; font-size: 1.125rem; }
.ticket .go { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.875rem; font-weight: 700; font-size: 1.1875rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.ticket .go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.ticket:hover .go { text-decoration-thickness: 3px; }
.ticket:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }
.computer { margin-top: 0.875rem; font-size: 1.125rem; }
.optin { margin-top: 1rem; max-width: 34rem; font-size: 1.125rem; line-height: 1.5; color: var(--text-muted); }

/* The phone */
.scene { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; }
.scene::before { /* the lantern's stepped halo */
  content: ""; position: absolute; z-index: 0; left: 50%; top: 46%; width: 132%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--halo) var(--h1), transparent) 0 30%, color-mix(in srgb, var(--halo) var(--h2), transparent) 30% 45%, color-mix(in srgb, var(--halo) var(--h3), transparent) 45% 60%, transparent 60%);
}
.phone { position: relative; z-index: 1; width: min(100%, 392px); padding: 12px; border-radius: 48px; background: var(--bezel); box-shadow: 0 30px 60px -30px rgba(24, 34, 50, 0.45); }
.screen { border-radius: 37px; background: var(--screen); color: var(--bub-in-ink); overflow: hidden; }
.bar { display: flex; justify-content: space-between; align-items: center; padding: 0.625rem 1.5rem 0; font-size: 0.9375rem; font-weight: 700; }
.bar svg { width: 46px; height: 12px; fill: currentColor; }
.who { display: flex; flex-direction: column; align-items: center; padding: 0.375rem 1rem 0.625rem; border-bottom: 1px solid var(--border-subtle); line-height: 1.3; }
.who .mark { width: 44px; height: 44px; }
.who b { font-size: 1.125rem; margin-top: 0.25rem; }
.who span { font-size: 1.125rem; }
.thread { list-style: none; margin: 0; padding: 0.75rem 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.thread .when { align-self: center; font-size: 0.9375rem; font-weight: 700; padding-bottom: 0.125rem; }
.msg { max-width: 86%; padding: 0.5rem 0.875rem 0.5625rem; border-radius: 20px; font-size: 1.125rem; line-height: 1.38; }
.msg.you { align-self: flex-end; background: var(--bub-out); color: var(--bub-out-ink); border-bottom-right-radius: 6px; }
.msg.ts { align-self: flex-start; background: var(--bub-in); color: var(--bub-in-ink); border-bottom-left-radius: 6px; }
.msg.done { font-weight: 700; }
.thread .seen { align-self: flex-end; font-size: 0.9375rem; font-weight: 700; margin-top: -0.25rem; }
.scene figcaption { position: relative; z-index: 1; margin-top: 1rem; font-size: 1.125rem; text-align: center; }

/* Three facts */
.facts { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); }
.facts ul { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 1rem 2rem; padding-top: 1.125rem; padding-bottom: 1.125rem; }
.facts li { display: flex; align-items: center; gap: 0.875rem; font-weight: 700; font-size: 1.25rem; line-height: 1.35; }
.facts svg { flex: none; width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

/* Sections */
.sec { padding: 4.5rem 0; }
.sec + .sec { border-top: 1px solid var(--border-subtle); }
.sec-head { max-width: 44rem; margin-bottom: 2rem; }
.sub { margin-top: 0.75rem; max-width: 36ch; }
.sec-head .sub { max-width: 44ch; }
.two { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: start; }
.stack > * + * { margin-top: 1.25rem; }
.stack h3 + p { margin-top: 0.25rem; }
.more a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }
/* On a surface panel the quiet colour would fall under 7:1 (light 6.40), so quiet text goes back to full ink. */
.surface { background: var(--bg-surface); --text-muted: var(--text-primary); }

/* Buttons: one primary (a dusk plate in light, an amber plate with dusk ink in dark) and one quiet. */
.btn { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 56px; padding: 0.75rem 1.375rem; border-radius: 14px; border: 2px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink); font: 700 1.1875rem/1.3 var(--font-sans); text-decoration: none; text-align: left; cursor: pointer; }
.btn svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--btn-icon); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.btn-quiet { background: transparent; color: var(--text-primary); border-color: var(--text-primary); }
.btn-quiet svg { stroke: currentColor; }
.cta { margin-top: 1.5rem; }
.cta .optin { margin-top: 0.75rem; }

/* 2. What's going wrong: the problem keys. A key is your own text; pressing it shows the reply (:target, no JS). */
.keys-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: start; }
.keys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.key { display: flex; align-items: center; gap: 0.875rem; height: 100%; min-height: 76px; padding: 0.75rem 1rem; border: 2px solid var(--text-primary); border-radius: 20px 20px 6px 20px; background: var(--bg-canvas); color: var(--text-primary); font-weight: 700; font-size: 1.1875rem; line-height: 1.25; text-decoration: none; }
.key span { text-wrap: balance; }
.key svg { flex: none; width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.key svg .heavy { stroke-width: 4; } .key svg .fill { fill: currentColor; stroke: none; }
.key:hover { background: var(--bg-surface); text-decoration: underline; text-decoration-thickness: 2px; }
body:has(#p-printer:target) a[href="#p-printer"], body:has(#p-wifi:target) a[href="#p-wifi"], body:has(#p-text:target) a[href="#p-text"], body:has(#p-popup:target) a[href="#p-popup"],
body:has(#p-email:target) a[href="#p-email"], body:has(#p-full:target) a[href="#p-full"], body:has(#p-scam:target) a[href="#p-scam"], body:has(#p-slow:target) a[href="#p-slow"] {
  background: var(--bub-out); color: var(--bub-out-ink); border-color: var(--bub-out);
}
.answer { display: none; scroll-margin-top: 1.5rem; padding: 1.5rem; border-radius: 20px 20px 20px 6px; background: var(--bg-surface); --text-muted: var(--text-primary); }
.answer:target { display: block; }
.answer-hint { padding: 1.5rem; border: 2px dashed var(--border-subtle); border-radius: 20px 20px 20px 6px; }
.answer-hint p + p { margin-top: 0.75rem; }
.answers:has(.answer:target) .answer-hint { display: none; }
.answer .you { display: inline-block; margin: 0 0 1rem; padding: 0.375rem 1rem 0.4375rem; border-radius: 20px 20px 6px 20px; background: var(--bub-out); color: var(--bub-out-ink); font: 700 1.1875rem/1.35 var(--font-sans); }
.answer .from { font-weight: 700; }
.answer .reply { margin-top: 0.375rem; font-size: 1.375rem; line-height: 1.5; }
.answer dl { margin: 0.75rem 0 0; display: grid; gap: 0.75rem; }
.answer dt { font-weight: 700; }
.answer dd { margin: 0; }
.answer .after { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle); }
.answer .back a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }

/* How it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 3rem; counter-reset: s; }
.steps li { display: grid; gap: 0.5rem; align-content: start; counter-increment: s; }
.steps li::before { content: counter(s); font-family: var(--font-display); font-weight: 700; font-size: 2.75rem; line-height: 1; }
.steps p { margin-top: 0.25rem; }
.who-answers { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border-subtle); }
.who-answers p { margin-top: 0.5rem; }
.kw { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.kw li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.kw kbd { display: inline-block; min-width: 8rem; padding: 0.125rem 0.75rem; border: 2px solid var(--border-subtle); border-radius: 20px 20px 6px 20px; text-align: center; }

/* What it costs */
.price-big { margin-top: 0.75rem; font-family: var(--font-display); font-weight: 700; font-size: 2.75rem; line-height: 1.1; }
.price-big span { font-size: 1.375rem; }
.receipt { margin-top: 1.5rem; width: 100%; max-width: 22rem; border-collapse: collapse; }
.receipt caption { text-align: left; font-weight: 700; padding-bottom: 0.375rem; }
.receipt th { text-align: left; font-weight: 400; }
.receipt th, .receipt td { padding: 0.375rem 0; border-bottom: 1px solid var(--border-subtle); }
.receipt td { text-align: right; }
.receipt tfoot th, .receipt tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--text-primary); }

/* Our 7 promises */
.promises { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.promises li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border-subtle); counter-increment: p; }
.promises li:first-child { padding-top: 0; }
.promises li::before { content: counter(p); grid-row: span 2; font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1.1; }
.promises p { margin-top: 0.25rem; }

/* I help someone else */
.family { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.family p { margin-top: 0.375rem; }
.family .btn { margin-top: 0.5rem; }
.try { margin-top: 2rem; font-weight: 700; }
.try + .cta { margin-top: 0.75rem; }

/* Being scammed right now */
.now h2 { font-size: 2.5rem; }
.now-steps { margin: 0; padding-left: 1.5rem; display: grid; gap: 0.75rem; }
.now-steps li::marker { font-weight: 700; }

/* Footer */
.foot { padding: 3rem 0 4rem; border-top: 1px solid var(--border-subtle); font-size: 1.125rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0.75rem 0 1rem; }
.foot nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; }
.foot p { max-width: 60rem; }
.foot p + p { margin-top: 0.75rem; }

/* Text pages (terms, privacy, safety, pricing, opt-in, 404) */
.prose { max-width: 46rem; margin: 0 auto; padding: 2.5rem 2rem 4.5rem; }
@media (max-width: 720px) { .prose { padding: 2rem 1rem 3.25rem; } }
.prose h1 { margin-bottom: 1rem; }
.prose h2 { margin: 2em 0 0.5em; }
.prose h3 { margin: 1.6em 0 0.4em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
.prose li { margin-bottom: 0.4em; }
.prose table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; margin: 0 0 1.4em; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); }
.prose th { border-bottom: 2px solid var(--text-primary); }
/* The fee table becomes one card per amount on narrow screens, each figure with its own label
   The labels carry no percentage, so they cannot drift from the policy; the hidden header row
   still gives screen readers the full column names. No inline styles, so a strict CSP holds. */
@media (max-width: 560px) {
  .prose table.fees { display: block; overflow: visible; }
  .prose .fees thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prose .fees tbody, .prose .fees tr { display: block; }
  .prose .fees tr { padding: 0.5rem 0; border-bottom: 2px solid var(--border-subtle); }
  .prose .fees td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; border: 0; }
  .prose .fees td::before { font-weight: 400; }
  .prose .fees td:nth-child(1)::before { content: "Credit"; }
  .prose .fees td:nth-child(2)::before { content: "Service fee"; }
  .prose .fees td:nth-child(3)::before { content: "Card fee"; }
  .prose .fees td:nth-child(4)::before { content: "Sales tax"; }
  .prose .fees td:nth-child(5)::before { content: "You pay"; font-weight: 700; }
}
/* The deck texts are messages, not something people type, so they stay in the text face (no mono zero). */
.prose pre { white-space: pre-wrap; margin: 0 0 1.25em; padding: 1rem 1.25rem; border-radius: 20px 20px 20px 6px; background: var(--bub-in); color: var(--bub-in-ink); font: 400 1.125rem/1.5 var(--font-sans); }
.prose code { font-family: var(--font-sans); font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 2em 0; }

@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero h1 { max-width: 18ch; }
  .facts ul, .two, .steps, .keys-grid { grid-template-columns: minmax(0, 1fr); }
  .facts ul { justify-content: stretch; }
  .steps li { grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1rem; }
  .steps li::before { grid-row: span 2; }
}
@media (max-width: 720px) {
  .lede { font-size: 1.1875rem; }
  .ticket { padding: 1rem 1.125rem 1.125rem; }
  .ticket .num { font-size: min(2.25rem, 8.2vw); white-space: nowrap; }
  .computer { display: none; }
  .sec { padding: 3.25rem 0; }
  .now h2 { font-size: 1.875rem; }
  .price-big { font-size: 2.25rem; }
  .facts li { font-size: 1.125rem; }
  .answer, .answer-hint { padding: 1.125rem; }
  .answer .reply { font-size: 1.25rem; }
  .key { font-size: 1.125rem; min-height: 68px; padding: 0.625rem 0.75rem; gap: 0.625rem; }
  .key svg { width: 32px; height: 32px; }
}
@media (max-width: 440px) { .keys { grid-template-columns: minmax(0, 1fr); } .key { min-height: 56px; } }
@media (prefers-reduced-motion: no-preference) { .key { transition: background-color 120ms ease, color 120ms ease; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Print: the fridge card only. */
.print-sheet { display: none; }
@media print {
  @page { size: letter; margin: 0.5in; }
  html, body { background: #FFFFFF !important; color: #182232 !important; font-size: 12pt; }
  body > *:not(.print-sheet) { display: none !important; }
  .print-sheet { display: block !important; color: #182232; font-family: var(--font-sans); }
  .print-sheet .mk-b { fill: #182232; } .print-sheet .mk-d { fill: #F7B24B; }
  .ps-head { display: flex; align-items: center; gap: 10pt; border: 2pt solid #182232; border-radius: 10pt; padding: 10pt 14pt; }
  .ps-head .mark { width: 30pt; height: 30pt; }
  .ps-head b { font-family: var(--font-display); font-size: 26pt; margin-right: auto; }
  .ps-head span { font-weight: 700; font-size: 12pt; }
  .ps-title { font-family: var(--font-display); font-weight: 700; font-size: 24pt; line-height: 1.15; margin: 16pt 0 4pt; }
  .ps-box { border: 2.5pt solid #182232; border-radius: 12pt; padding: 12pt 16pt; margin: 12pt 0; text-align: center; }
  .ps-box .k { font-weight: 700; font-size: 12pt; }
  .ps-box .n { font-family: var(--font-mono); font-weight: 700; font-size: 38pt; line-height: 1.1; }
  .ps-box .d { font-weight: 700; font-size: 15pt; }
  .ps-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16pt; font-size: 11.5pt; line-height: 1.45; }
  .ps-cols h3 { font-size: 15pt; margin: 0 0 4pt; }
  .ps-cols ol { margin: 0; padding-left: 16pt; }
  .ps-terms { font-size: 9.5pt; line-height: 1.4; margin: 10pt 0 0; }
  .ps-cut { border-top: 2pt dashed #182232; margin-top: 14pt; padding-top: 4pt; font-size: 9pt; font-weight: 700; }
  .ps-strip { border: 2.5pt solid #182232; border-radius: 10pt; padding: 10pt 14pt; margin-top: 8pt; break-inside: avoid; }
  .ps-strip .n { font-family: var(--font-mono); font-weight: 700; font-size: 20pt; }
  .ps-strip .d { font-weight: 700; font-size: 14pt; }
  .ps-strip p { font-size: 10pt; margin: 4pt 0 0; }
}