/* drivequiz.app. Deliberately simple and token-driven: every colour, font, size and space is a
   custom property in :root below, so a later pass can reskin the site from packages/ui tokens by
   changing this block only. Same design DNA as kortklar.app (signage type, one accent, the
   night-asphalt dark mode); DriveQuiz's accent is guide-sign green, the colour of direction signs
   on UK primary routes and of US guide signs.
   CSP is style-src 'self': no inline styles anywhere, everything lives here. */

@font-face {
  font-family: "Overpass";
  src: url("/fonts/overpass-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: optional; /* no late swap, so no layout shift on slow phones */
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: optional; /* no late swap, so no layout shift on slow phones */
}

:root {
  color-scheme: light dark;
  /* Colour */
  --bg: #ffffff;
  --surface: #f2f4f3;
  --ink: #141816;
  --muted: #4f5a55;
  --brand-blue: #0b57a4;    /* shared Veiviser lower arm */
  --frame: #17140a;         /* the lean mark's structure and upper arm (sign black) */
  --line: #dde3e0;
  --accent: #0a6640;        /* guide-sign green: links, kicker, emphasis */
  --accent-ink: #ffffff;    /* text on accent */
  --btn: #0a6640;
  --btn-hover: #085535;
  --focus: #0a6640;
  --screen: #141816;        /* game preview: asphalt */
  --screen-ink: #f1efe6;
  --screen-muted: #b9b6aa;
  --right: #17703f;
  --winner: var(--ans-b);
  --dock-clear: rgb(255 255 255 / 0);
  --clear: transparent;
  --screen-option: rgb(255 255 255 / 0.08);
  --screen-line: rgb(255 255 255 / 0.15);
  --pro-column: color-mix(in srgb, var(--accent) 7%, var(--bg));
  --dock-height: 12rem;
  --answer-right: color-mix(in srgb, var(--right) 13%, var(--bg));
  /* Road-sign colours (content illustrations only) */
  --sign-red: #c8102e;
  --sign-blue: #0055a4;
  --sign-green: #00703c;
  --sign-yellow: #ffd200;
  --sign-fyg: #c6e82a;
  --sign-white: #ffffff;
  --sign-ink: #141816;
  /* Type */
  --font-display: "Overpass", "Arial Narrow", system-ui, sans-serif;
  --font-text: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-base: 1.0625rem;
  --text-small: 0.9rem;
  --text-lead: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --h1: clamp(2.3rem, 1.5rem + 4vw, 4.4rem);
  --h2: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
  --h3: 1.25rem;
  /* Space and shape */
  --gutter: 1rem;
  --wrap: 72rem;
  --narrow: 46rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --section: clamp(2.5rem, 1.5rem + 4vw, 6rem);
  --radius: 12px;
  --radius-pill: 999px;
  --radius-button: 14px;    /* packages/ui radius.button */
  --radius-card: 18px;      /* packages/ui radius.card */
  --tap: 2.75rem;           /* 44 px minimum touch target */
  /* Answer identity colours, the same as the app's answer cards (packages/ui color.answer). Identity,
     never meaning: right and wrong are always shown with a word and an outline. */
  --ans-a: #0b57a4;
  --ans-a-ink: #ffffff;
  --ans-b: #f3c018;
  --ans-b-ink: #17140a;
  --ans-c: #b3202a;
  --ans-c-ink: #ffffff;
  --ans-d: #1e6b4a;
  --ans-d-ink: #ffffff;
  --btn-edge: #053c25;      /* the app's "kerb": a solid edge under the primary button, no blur */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121417;
    --dock-clear: rgb(18 20 23 / 0);
    --surface: #1a1d21;
    --ink: #eeeadf;
    --muted: #aba79b;
    --frame: #efeadb;       /* lane white on dark */
    --line: #2c3137;
    --accent: #6fd39f;
    --accent-ink: #ffffff;
    --btn: #13804f;
    --btn-hover: #19945d;
    --btn-edge: #0a4a2e;
    --focus: #6fd39f;
    --screen: #0b0d0f;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--text-base)/1.6 var(--font-text); overflow-x: clip; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; margin: 0 0 var(--space-2); text-wrap: balance; }
h1 { font-weight: 900; font-size: var(--h1); letter-spacing: -0.03em; }
h2 { font-weight: 900; font-size: var(--h2); letter-spacing: -0.02em; }
h3 { font-weight: 800; font-size: var(--h3); }
p { margin: 0 0 var(--space-2); }
h1 em { font-style: normal; color: var(--accent); }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--gutter), var(--narrow)); margin-inline: auto; }
.lead { font-size: var(--text-lead); color: var(--muted); max-width: 38rem; }
.small, .fine { font-size: var(--text-small); color: var(--muted); }
.kicker { font: 800 0.8rem/1.2 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-2); }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--space-2); top: var(--space-2); background: var(--btn); color: var(--accent-ink); padding: var(--space-1) var(--space-2); z-index: 20; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- Brand: the mark (Veiviser, shared with Kortklar) and the outlined DriveQuiz wordmark ---------- */
/* The lean glyph on its yellow app-icon tile, as in the app: fixed colours in both schemes, 1.3x the wordmark box. */
.brand .mark, .brand-line .mark { width: 2.066rem; height: 2.066rem; flex: none; }
.brand .word, .brand-line .word { width: auto; height: 1.589286rem; fill: currentColor; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding-block: var(--space-1); }
.brand { text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); }
.switch { margin-left: auto; display: flex; align-items: center; gap: 0.15rem; font: 800 0.95rem/1 var(--font-display); }
.switch a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); color: var(--muted); text-decoration: none; border-radius: var(--radius-pill); }
.switch a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.35em; text-decoration-color: var(--accent); }
.switch a:hover { color: var(--accent); }
.switch .dot { color: var(--muted); }
.menu-label { order: 3; display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); padding: 0 0.85rem; border: 2px solid var(--line); border-radius: var(--radius-button); font: 800 0.95rem/1 var(--font-text); background: var(--bg); color: var(--ink); cursor: pointer; }
.menu-toggle:focus-visible + .menu-label { outline: 3px solid var(--focus); outline-offset: 3px; }
.menu-toggle:checked + .menu-label { border-color: var(--ink); background: var(--surface); }
.nav { display: none; flex-direction: column; width: 100%; order: 4; padding: var(--space-1) 0 var(--space-2); font-weight: 700; }
.menu-toggle:checked ~ .nav, .nav.is-open { display: flex; }
.nav a { color: var(--ink); text-decoration: none; min-height: var(--tap); display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.nav a[aria-current], .nav a.is-section, .nav a:hover { color: var(--accent); }
@media (min-width: 52rem) {
  .menu-toggle, .menu-label { display: none; }
  .nav, .menu-toggle:checked ~ .nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 var(--space-3); width: auto; order: 2; padding: 0; font-weight: 600; }
  .nav a { border-bottom: 0; }
  .switch { order: 3; }
}

.notes p { margin: var(--space-2) 0 0; padding: var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

/* ---------- Buttons and store chips ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-3) 0 var(--space-2); }
.btn { display: inline-flex; align-items: center; text-wrap: balance; justify-content: center; text-align: center; gap: var(--space-1); min-height: 3.25rem; padding: 0 var(--space-3); border-radius: var(--radius-button); border: 0; background: var(--btn); color: var(--accent-ink); font: 800 1.05rem/1.2 var(--font-text); text-decoration: none; cursor: pointer; box-shadow: 0 4px 0 var(--btn-edge); margin-bottom: 4px; }
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-edge); }
.btn.ghost { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.btn.ghost:active { transform: none; }
.btn .tag { font-size: 0.8rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: var(--radius-pill); background: var(--bg); color: var(--ink); }
.join-note { font-size: var(--text-small); color: var(--muted); }
.store-art { display: inline-flex; align-items: center; }
.store-art img { width: auto; }
.store-art[data-store="ios"] img { height: 40px; }
.store-art[data-store="android"] img { height: 58px; }
.stores { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0; }
.store { display: inline-flex; flex-direction: column; justify-content: center; min-width: 8.5rem; min-height: 3.25rem; padding: 0.35rem 0.9rem; border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); text-decoration: none; line-height: 1.15; }
.store strong { font: 800 1.05rem/1.15 var(--font-display); }
.store small { order: -1; font-size: 0.8rem; color: var(--muted); }
.store.is-primary { order: -1; }
.app-soon { margin: var(--space-2) 0; font-size: var(--text-small); color: var(--muted); }
.app-soon strong { color: var(--ink); }
.store[href] { background: var(--ink); color: var(--bg); box-shadow: none; }
.store[href] small { color: inherit; }
.textlink { font-weight: 700; }

/* ---------- Home hero and game preview ---------- */
.hero { padding-block: var(--space-4) var(--section); }
.hero-grid { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 60rem) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; } }
.preview { margin: 0; }
.preview figcaption { max-width: 24rem; margin: var(--space-1) auto 0; font-size: var(--text-small); color: var(--muted); }
@media (prefers-color-scheme: dark) { .screen { outline: 1px solid var(--line); } }
.screen { background: var(--screen); color: var(--screen-ink); border-radius: 24px; padding: var(--space-3); max-width: 24rem; margin-inline: auto; }
.screen-meta { display: flex; justify-content: space-between; font: 700 0.85rem/1 var(--font-display); color: var(--screen-muted); }
.timer { color: var(--screen-ink); }
.screen-sign .sign-ico { width: 4.5rem; margin: 0 auto var(--space-2); }
.screen-q { font: 800 1.2rem/1.25 var(--font-display); }
.screen-answers { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: var(--space-1); }
.screen-answers li { display: flex; gap: var(--space-1); align-items: center; padding: 0.6rem; border-radius: 10px; background: var(--screen-option); }
.screen-answers b { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 6px; background: var(--ans-a); color: var(--ans-a-ink); font-family: var(--font-display); }
.screen-answers li:nth-child(2) b { background: var(--ans-b); color: var(--ans-b-ink); }
.screen-answers li:nth-child(3) b { background: var(--ans-c); color: var(--ans-c-ink); }
.screen-answers li:nth-child(4) b { background: var(--ans-d); color: var(--ans-d-ink); }
.screen-answers li.is-right { background: var(--right); }
.screen-answers li.is-right::after { content: "Right"; margin-left: auto; font-weight: 700; font-size: 0.85rem; }
.screen-scores { list-style: none; margin: 0; padding: var(--space-1) 0 0; border-top: 1px solid var(--screen-line); }
.screen-scores li { display: flex; gap: var(--space-1); padding: 0.3rem 0; font-variant-numeric: tabular-nums; }
.screen-scores li span:first-child { flex: 1; }
.screen-scores .badge { display: inline-flex; align-items: center; justify-content: center; background: var(--winner); color: var(--sign-ink); border-radius: var(--radius-pill); padding: 0 0.5rem; font: 800 0.8rem/1 var(--font-display); }

/* ---------- Sections ---------- */
.band { padding-block: var(--section); border-top: 1px solid var(--line); }
.steps { list-style: none; counter-reset: step; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: step; }
.steps h3::before { content: counter(step) ". "; color: var(--accent); }
.facts { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
@media (min-width: 40rem) { .facts { grid-template-columns: 1fr 1fr; } }
.facts div { padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); }
.facts dt { font: 900 2rem/1 var(--font-display); color: var(--accent); }
.facts dd { margin: var(--space-1) 0 0; }
.cards { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.cards a { display: grid; gap: 0.25rem; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.cards a:hover { border-color: var(--accent); }
.cards strong { font: 800 1.15rem/1.2 var(--font-display); color: var(--accent); }
.cards span { color: var(--muted); }

/* ---------- Demo game ---------- */
.demo-questions { padding-left: 1.25rem; }
.demo-questions > li { margin-bottom: var(--space-3); }
.demo-questions .q { font-weight: 700; }
.demo { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); background: var(--surface); }
.demo-bar { display: flex; justify-content: space-between; gap: var(--space-2); font: 700 0.95rem/1.3 var(--font-display); font-variant-numeric: tabular-nums; margin-bottom: var(--space-2); }
.demo-q { font: 800 1.25rem/1.3 var(--font-display); }
.demo-opts { list-style: none; padding: 0; margin: 0 0 var(--space-2); display: grid; gap: var(--space-1); }
.demo-opts button { width: 100%; min-height: var(--tap); display: flex; gap: var(--space-1); align-items: center; text-align: left; padding: 0.6rem 0.8rem; border-radius: 10px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: 600 1rem/1.3 var(--font-text); cursor: pointer; }
.demo-opts button:hover:not(:disabled) { border-color: var(--accent); }
.demo-opts button b { display: inline-grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 6px; background: var(--ink); color: var(--bg); font-family: var(--font-display); }
.demo-opts button.is-right { border-color: var(--accent); }
.demo-opts button.is-right::after { content: "Right answer"; margin-left: auto; font-size: 0.85rem; font-weight: 700; color: var(--accent); }
.demo-opts button.is-picked:not(.is-right)::after { content: "Your answer"; margin-left: auto; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.demo-feedback { min-height: 1.6em; }
.demo-scores { list-style: none; padding: 0; margin: 0 0 var(--space-2); }
.demo-scores li { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.demo-scores li.is-winner { font-weight: 800; }

/* ---------- Country chooser ---------- */
.chooser { padding-block: var(--space-4) var(--section); }
.choices { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-2); }
.choice a { display: grid; gap: 0.2rem; padding: var(--space-3); border: 2px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; min-height: var(--tap); }
.choice a:hover { border-color: var(--accent); }
.choice strong { font: 900 1.6rem/1.1 var(--font-display); }
.choice span { color: var(--muted); }
.choice .badge { display: none; justify-self: start; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); background: var(--btn); color: var(--accent-ink); font: 800 0.8rem/1.4 var(--font-display); }
.choices[data-suggested="uk"] [data-choice="uk"],
.choices[data-suggested="us"] [data-choice="us"] { order: -1; }
.choices[data-suggested="uk"] [data-choice="uk"] a,
.choices[data-suggested="us"] [data-choice="us"] a { border-color: var(--accent); border-width: 3px; background: var(--surface); }
.choices[data-reason="location"][data-suggested="uk"] [data-choice="uk"] .badge-location,
.choices[data-reason="location"][data-suggested="us"] [data-choice="us"] .badge-location,
.choices[data-reason="saved"][data-suggested="uk"] [data-choice="uk"] .badge-saved,
.choices[data-reason="saved"][data-suggested="us"] [data-choice="us"] .badge-saved { display: inline-block; }

/* ---------- Inner pages and guides ---------- */
.answer-box { border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: var(--radius-card); background: var(--surface); padding: var(--space-2) var(--space-3); margin: var(--space-2) 0; }
.answer-box-title { font: 800 0.8rem/1.2 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-1); }
.answer-box > p:nth-child(2) { font-size: var(--text-lead); }
.answer-box p:last-child { margin: 0; font-size: var(--text-small); color: var(--muted); }
.checker { display: grid; gap: var(--space-1); margin: var(--space-2) 0; }
.checker input, .checker select { width: 100%; min-height: var(--tap); padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: inherit; }
.checker output { display: block; margin-top: var(--space-1); }
.page-hero { position: relative; padding-block: var(--space-4) var(--space-3); margin-bottom: var(--space-2); }
.page-hero.is-quiz { padding-block: var(--space-2) var(--space-1); }
.page-hero h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3.2rem); }
.page-hero.is-quiz .lead { font-size: 1.05rem; line-height: 1.45; }
.page-hero.is-quiz .updated { margin-bottom: 0; }
.page-hero.is-quiz .actions { margin-block: var(--space-1); }
.has-print .print-hint { display: none; }
@media (max-width: 40rem) {
  .crumbs li[aria-current] { display: none; }
  .crumbs li[aria-current]::before { content: none; }
}
@media (max-width: 30rem) {
  .actions .btn, .hero-cta .btn, .hero .actions .btn { width: 100%; }
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0 0 var(--space-2); font-size: var(--text-small); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; }
.updated { font-size: var(--text-small); color: var(--muted); }
.prose { padding-bottom: var(--section); }
.prose h2 { font-size: 1.6rem; margin-top: var(--space-4); }
.prose li { margin-bottom: 0.4rem; }
.note { padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: var(--space-2); }
.table-wrap { overflow-x: auto; margin: var(--space-2) 0; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
caption { text-align: left; font-weight: 700; margin-bottom: var(--space-1); }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-family: var(--font-display); }
.sign-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.sign-list li { display: flex; gap: var(--space-2); align-items: center; }
.sign-ico { width: 3.5rem; flex: none; }
.check > li { margin-bottom: var(--space-2); }
.check .opts { color: var(--muted); margin-bottom: 0.3rem; }
details summary { cursor: pointer; font-weight: 700; color: var(--accent); min-height: var(--tap); display: flex; align-items: center; }
.sources { font-size: var(--text-small); }
.cta-band { background: var(--surface); }

/* ---------- Road-sign library ---------- */
/* Sign images sit on a light "plate" in both colour schemes: the DfT images have white
   backgrounds, and a sign is always seen against its own background colour. */
.sign-figure { margin: 0 0 var(--space-3); }
.sign-figure img { width: auto; max-width: min(100%, 14rem); padding: var(--space-2); background: var(--sign-white); border: 1px solid var(--line); border-radius: var(--radius); }
.sign-figure.is-diagram img { width: 100%; max-width: 24rem; padding: 0; overflow: hidden; }
.sign-figure figcaption { margin-top: var(--space-1); font-size: var(--text-small); color: var(--muted); }
.sign-extra { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sign-extra img { width: auto; max-width: 6rem; padding: var(--space-1); background: var(--sign-white); border: 1px solid var(--line); border-radius: var(--radius); }
.sign-grid { list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-3); display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.sign-grid li { margin: 0; min-width: 0; }
.sign-grid a { display: flex; flex-direction: column; gap: 0.3rem; height: 100%; padding: var(--space-1) var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.sign-grid a:hover { border-color: var(--accent); }
.sign-grid .thumb { display: block; height: 6.5rem; padding: var(--space-1); background: var(--sign-white); border-radius: calc(var(--radius) - 4px); overflow: hidden; }
.sign-grid .thumb img { width: 100%; height: 100%; object-fit: contain; }
.sign-grid .thumb.is-diagram { padding: 0; }
.sign-grid .thumb.is-diagram img { object-fit: cover; }
.sign-grid strong { font: 800 1rem/1.2 var(--font-display); color: var(--accent); }
.sign-grid span:last-child { font-size: var(--text-small); color: var(--muted); line-height: 1.4; }

/* ---------- Quizzes ---------- */
.quiz { padding-left: 1.5rem; }
.quiz > li { margin-bottom: var(--space-3); }
.quiz-q { margin-bottom: var(--space-2); }
.quiz-q .q { font-weight: 700; margin-bottom: 0.4rem; }
.quiz-q .opts { margin: 0 0 0.3rem; padding-left: 1.5rem; }
.quiz-q .opts li { margin-bottom: 0.2rem; }
.quiz-q details p { padding: var(--space-1) var(--space-2); border-radius: var(--radius); background: var(--surface); }

/* Interactive practice quizzes (site/quiz.mjs, assets/quiz.js). One question at a time: the first
   question shows before the script runs, so nothing moves when it does; without JavaScript,
   assets/noscript.css shows every question. Options are <span>s in the HTML and become <button>s
   with the same box. */
.qz-quiz { margin: var(--space-2) 0 var(--space-4); scroll-margin-top: 6rem; }
.qz-quiz > h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); }
.qz-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.qz-list > .qz { display: none; }
.qz-list > .qz:first-child { display: block; }
html:has(.qz-dock.is-on) { scroll-padding-bottom: calc(var(--dock-height) + 1rem); }
.qz-quiz.is-js .qz-list > .qz { display: none; }
.qz-quiz.is-js .qz-list > .qz.is-current { display: block; }
.qz { margin: 0 0 var(--space-2); padding: var(--space-3) var(--space-2); border: 2px solid var(--line); border-radius: var(--radius-card); background: var(--bg); scroll-margin-top: var(--space-2); }
.qz-n { display: block; font: 800 0.85rem/1.4 var(--font-display); color: var(--muted); margin-bottom: var(--space-1); }
.qz .q { font: 700 1.19rem/1.35 var(--font-text); margin-bottom: var(--space-2); }
.qz .q:focus { outline: none; }
.qz .q:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.qz-img { margin: 0 0 var(--space-2); }
.qz-img img { width: auto; max-width: min(100%, 9rem); max-height: 9rem; padding: var(--space-1); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.qz-opts { list-style: none; padding: 0; margin: 0 0 var(--space-1); display: grid; gap: 0.6rem; }
.qz-opts li { margin: 0; }
.qz-opts .opt { width: 100%; min-height: 3.25rem; display: flex; flex-wrap: wrap; gap: 0.25rem var(--space-1); align-items: center; text-align: left; padding: 0.6rem 0.8rem; border-radius: var(--radius-button); border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: 600 1rem/1.35 var(--font-text); box-shadow: 0 3px 0 var(--line); }
.qz-opts .opt > span { flex: 1; min-width: 0; }
.qz-opts .opt b { display: inline-grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 6px; background: var(--ans-a); color: var(--ans-a-ink); font: 900 1rem/1 var(--font-display); }
.qz-opts li:nth-child(2) .opt b { background: var(--ans-b); color: var(--ans-b-ink); }
.qz-opts li:nth-child(3) .opt b { background: var(--ans-c); color: var(--ans-c-ink); }
.qz-opts li:nth-child(4) .opt b { background: var(--ans-d); color: var(--ans-d-ink); }
/* Once answered, every letter is neutral; the outline and words mark the right answer. */
.qz.is-answered button.opt b { background: var(--line); color: var(--muted); }
button.opt { cursor: pointer; }
button.opt:hover:not([aria-disabled]) { border-color: var(--ink); }
button.opt:active:not([aria-disabled]) { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
button.opt[aria-disabled] { cursor: default; }
/* Test mode: the chosen answer, before marking */
.qz.is-selected .opt.is-picked { border-color: var(--ink); background: var(--surface); }
/* Marked: right is a tinted fill, a thick outline and a word; wrong is dashed and a word. */
.qz-opts .opt.is-right { border-color: var(--right); border-width: 3px; background: var(--answer-right); box-shadow: none; }
.qz-opts .opt.is-right::after, .qz-opts .opt.is-picked:not(.is-right)::after { flex-basis: 100%; margin-left: calc(1.9rem + var(--space-1)); font-size: 0.85rem; font-weight: 800; }
.qz-opts .opt.is-right::after { content: "✓ Right answer"; color: var(--accent); }
.qz.is-answered .qz-opts .opt.is-picked:not(.is-right) { border-color: var(--ink); border-style: dashed; box-shadow: none; }
.qz.is-answered .qz-opts .opt.is-picked:not(.is-right)::after { content: "✕ Your answer"; color: var(--muted); }
.qz.is-selected .qz-opts .opt.is-picked::after { content: none; }
.qz.is-answered button.opt:not(.is-right):not(.is-picked) > span { color: var(--muted); }
.qz.is-answered button.opt { box-shadow: none; }
.qz-verdict { font: 800 1.05rem/1.3 var(--font-text); margin: var(--space-2) 0 0; }
.qz.is-correct .qz-verdict { color: var(--accent); }
.qz-why { margin-top: var(--space-1); }
/* Timed test: no peeking at the reasons until the round is marked. */
.is-testing .qz-why { display: none; }
.qz-why p { margin: 0.3rem 0 0; padding: var(--space-1) var(--space-2); border-radius: var(--radius); background: var(--surface); }
.qz-src { display: block; margin-top: 0.3rem; font-size: var(--text-small); color: var(--muted); }

/* Practice or timed test (UK mocks). Space reserved; shown when the script runs. */
.qz-modes { display: flex; gap: var(--space-1); min-height: 4rem; margin: var(--space-1) 0 0; visibility: hidden; }
.qz-modes.is-on { visibility: visible; }
.qz-mode { flex: 1; min-height: var(--tap); padding: 0.5rem 0.7rem; border: 2px solid var(--line); border-radius: var(--radius-button); background: var(--bg); color: var(--ink); font: 700 0.95rem/1.25 var(--font-text); text-align: left; cursor: pointer; }
.qz-mode.is-active { border-color: var(--accent); background: var(--surface); color: var(--ink); }
.qz-mode.is-active::before { content: "✓ "; color: var(--accent); }

/* The dock: back, where you are on the road, next. Sticky at the bottom while you work. */
.qz-dock { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(calc(100% - 2 * var(--space-2)), var(--narrow)); z-index: 5; display: none; flex-wrap: nowrap; align-items: center; gap: var(--space-1) var(--space-2); height: 4.5rem; max-height: 4.5rem; margin: 0; padding: 0.6rem 0; border-top: 1px solid var(--line); background: var(--bg); visibility: hidden; }
.qz-dock.is-on { display: flex; visibility: visible; }
.qz-dock::before { content: ""; position: absolute; inset: -1.5rem 0 auto; height: 1.5rem; background: linear-gradient(to bottom, var(--dock-clear), var(--bg)); pointer-events: none; }
.qz-mid { position: relative; flex: 1; min-width: 0; }
.qz-status { margin: 0; font: 800 0.95rem/1.3 var(--font-display); font-variant-numeric: tabular-nums; }
.qz-time { position: absolute; bottom: 0.85rem; left: 0; margin: 0; font: 800 0.8rem/1 var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.qz-nav { min-width: 4.5rem; min-height: var(--tap); padding: 0 0.9rem; border: 2px solid var(--line); border-radius: var(--radius-button); background: var(--bg); color: var(--ink); font: 800 1rem/1 var(--font-text); cursor: pointer; }
.qz-nav:disabled { opacity: 0.45; cursor: default; }
.qz-prev:disabled { visibility: hidden; }
.qz-nav.is-ready { background: var(--btn); border-color: var(--btn); color: var(--accent-ink); box-shadow: 0 3px 0 var(--btn-edge); }
.qz-finish { margin-block: var(--space-2); justify-content: center; }
/* Progress as a road: asphalt, a dashed centre line, a green fill and a yellow tick at the pass mark. */
.qz-road { position: relative; height: 0.8rem; border-radius: 0.4rem; background: var(--screen); overflow: visible; margin-top: 1rem; }
.qz-road::before { content: ""; position: absolute; left: 0.4rem; right: 0.4rem; top: calc(50% - 1px); border-top: 2px dashed var(--screen-muted); }
.qz-road-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--right); }
.qz-road-pass { font-size: 0; position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: var(--ans-b); }

/* The result */
.qz-result { margin: 0 0 var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: var(--radius-card); background: var(--surface); }
.qz-result-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.qz-result-words { flex: 1; min-width: 12rem; }
.qz-result h3 { font-size: 1.5rem; margin-bottom: var(--space-1); }
/* UK: the score in a speed-limit roundel. US: on a speed-limit plate. */
.qz-score { flex: none; display: grid; place-items: center; align-content: center; background: var(--sign-white); color: var(--sign-ink); text-align: center; }
.qz-score-uk { width: 7rem; height: 7rem; border-radius: 50%; border: 0.75rem solid var(--sign-red); }
.qz-score-us { width: 6.25rem; min-height: 7.5rem; padding: 0.5rem 0.3rem; border-radius: 10px; border: 3px solid var(--sign-white); outline: 3px solid var(--sign-ink); outline-offset: -8px; }
.qz-score-uk.is-pass { border-color: var(--ans-d); }
.qz-score-us.is-pass { border-color: var(--ans-d); outline-color: var(--ans-d); }
@media (prefers-reduced-motion: no-preference) {
  .qz-score { animation: score-pass 250ms ease-out; }
  @keyframes score-pass {
    from { transform: scale(0.9); }
    to { transform: scale(1); }
  }
}
@media (prefers-color-scheme: dark) {
  /* 3:1+ against the dock background. */
  .qz-road { background: var(--line); box-shadow: inset 0 0 0 1px var(--muted); }
}
.qz-score-label { font: 900 0.8rem/1.1 var(--font-display); letter-spacing: 0.04em; }
.qz-score-n { font: 900 2.6rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.qz-score-of { font: 800 0.8rem/1.2 var(--font-display); }
.qz-pass { display: inline-block; margin: 0 0 var(--space-1); font: 900 1rem/1.2 var(--font-display); }
.qz-pass.is-pass { color: var(--accent); }
.qz-review-title { font-weight: 800; margin-bottom: var(--space-1); }
.qz-review { list-style: none; padding: 0; margin: 0 0 var(--space-2); display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-1); }
.qz-review li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-1); min-height: var(--tap); padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.qz-review a { color: var(--ink); font-weight: 700; text-decoration: none; }
.qz-review a:hover { text-decoration: underline; }
.qz-review-n { margin-left: auto; min-width: 1.6rem; padding: 0 0.4rem; border-radius: 6px; background: var(--ink); color: var(--bg); font: 900 0.85rem/1.6 var(--font-display); text-align: center; }
.qz-review .qz-review-guide { font-size: var(--text-small); color: var(--accent); }
.qz-next { margin: 0 0 var(--space-4); padding: var(--space-3); border-radius: var(--radius-card); background: var(--screen); color: var(--screen-ink); }
.qz-next h3, .qz-next .app-soon strong { color: var(--screen-ink); }
.qz-next .small { color: var(--screen-muted); }
.qz-next .store[href] { background: var(--screen-ink); color: var(--screen); }
.qz-next .store[href] small, .qz-next .store[href] strong { color: var(--screen); }
.qz-next a:not(.btn) { color: var(--screen-ink); }
.qz-next .btn.ghost { background: var(--clear); color: var(--screen-ink); box-shadow: inset 0 0 0 2px var(--screen-muted); }
.qz-next .app-soon { color: var(--screen-muted); }

/* Mock and test switcher ("All mock tests: Mock 1 · Mock 2 · Mock 3") */
.mock-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; margin: 0 0 var(--space-2); font-weight: 700; }
.mock-nav span { color: var(--muted); font-weight: 600; }
.mock-nav a, .mock-nav strong { display: inline-flex; align-items: center; min-height: var(--tap); }

/* Visible FAQ sections (the same Q&A feed FAQPage markup) */
.faq h3 { margin-top: var(--space-3); font-size: 1.2rem; }
.faq h3 + p { margin-top: 0; }

/* At-a-glance tables and state comparison */
.glance th { width: 40%; }

/* Conversion band at the end of inner pages, and the "free quiz" link at the top */
.convert { background: var(--surface); }
.convert h2 { font-size: var(--h2); }
.hero-cta { margin: var(--space-3) 0 var(--space-1); }
.page-hero .sign-figure { margin: var(--space-2) 0 var(--space-2); }

/* Pro: the price card and the free-vs-Pro table */
.pro-price { max-width: 28rem; margin: var(--space-1) 0 var(--space-4); padding: var(--space-3); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: var(--radius-card); background: var(--surface); }
.pro-price .price { font: 900 var(--h2)/1.1 var(--font-display); margin-bottom: var(--space-1); }
.pro-price .small { margin: var(--space-1) 0 0; }
.pro-screens { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.pro-screens .screen { max-width: none; }
.pro-screens > li { min-width: 0; }
.pro-screens figcaption { margin-top: var(--space-1); font-size: var(--text-small); color: var(--muted); }
.screen-title { font: 900 1.15rem/1.2 var(--font-display); margin-bottom: var(--space-2); }
.topic-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.topic-rows li { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.6rem; font-weight: 700; }
.topic-rows .n { font: 800 0.9rem/1.3 var(--font-display); color: var(--screen-muted); font-variant-numeric: tabular-nums; }
.topic-rows .bar { grid-column: 1 / -1; height: 0.5rem; border-radius: 0.25rem; background: var(--screen-muted); overflow: hidden; }
.topic-rows .bar span { display: block; height: 100%; background: var(--right); }
.topic-rows .w20 { width: 20%; } .topic-rows .w35 { width: 35%; } .topic-rows .w60 { width: 60%; } .topic-rows .w80 { width: 80%; } .topic-rows .w100 { width: 100%; }
.screen-tag { display: inline-block; margin-bottom: var(--space-1); padding: 0.1rem 0.5rem; border-radius: 6px; background: var(--ans-b); color: var(--ans-b-ink); font: 900 0.8rem/1.5 var(--font-display); }
.pro-amount { margin-bottom: var(--space-1); }
.pro-amount strong { display: block; font: 900 3.25rem/1 var(--font-display); letter-spacing: -0.02em; }
.pro-amount span { font-weight: 800; }
.compare td:last-child, .compare th:last-child { background: var(--pro-column); }
.compare td:last-child { font-weight: 800; }
.compare th[scope="row"] { font-weight: 600; }

/* Sign illustration fills (content colours, same in light and dark) */
.s-red { fill: var(--sign-red); }
.s-blue { fill: var(--sign-blue); }
.s-green { fill: var(--sign-green); }
.s-yellow { fill: var(--sign-yellow); }
.s-fyg { fill: var(--sign-fyg); }
.s-white { fill: var(--sign-white); }
.s-ink { fill: var(--sign-ink); }
.s-frame { fill: none; stroke: var(--sign-white); stroke-width: 3; }
.s-frame-ink { fill: none; stroke: var(--sign-ink); stroke-width: 3; }
.s-text { fill: var(--sign-ink); font-family: var(--font-display); font-weight: 900; }
.s-white-text { fill: var(--sign-white); font-family: var(--font-display); font-weight: 900; }
.s-red-text { fill: var(--sign-red); font-family: var(--font-display); font-weight: 900; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--space-4); font-size: var(--text-small); }
.site-footer .cols { display: grid; gap: var(--space-3); }
@media (min-width: 48rem) { .site-footer .cols { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer h2 { font-size: 1rem; margin-bottom: var(--space-1); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li a { display: inline-flex; min-height: var(--tap); align-items: center; }
.brand-line { margin-bottom: var(--space-1); display: flex; align-items: center; gap: 0.5rem; color: var(--ink); }

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

/* Printable test-day lists: decorative boxes can be ticked on paper. */
.prose .checklist {
  list-style: none;
  padding-inline-start: 0;
}
.checklist li {
  position: relative;
  padding-inline-start: var(--space-4);
  margin-block: var(--space-2);
}
.checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: var(--space-1);
  width: var(--space-2);
  height: var(--space-2);
  border: 2px solid var(--ink);
  border-radius: 4px;
}
@media print {
  .site-header, .site-footer, .convert, .notes, .hero-cta, .qz-next, .crumbs, [data-print], .print-hint { display: none; }
  body:has(.sheet) { color-scheme: light; background: var(--sign-white); color: var(--sign-ink); font-size: 9pt; line-height: 1.25; }
  body:has(.sheet) .page-hero { padding-block: 0 0.5rem; }
  body:has(.sheet) .page-hero h1 { font-size: 20pt; margin-bottom: 0.25rem; }
  body:has(.sheet) .page-hero .lead, body:has(.sheet) .updated, body:has(.sheet) .answer-box-title { display: none; }
  body:has(.sheet) .answer-box { border: 0; background: none; padding: 0; margin: 0; }
  body:has(.sheet) .answer-box p { font-size: 9pt; margin-bottom: 0.25rem; }
  .sheet .faq { display: none; }
  .sheet { columns: 2; column-gap: 1.5rem; padding-bottom: 0; }
  .sheet h2 { font-size: 11pt; margin: 0.5rem 0 0.15rem; break-after: avoid; }
  .sheet p { margin-bottom: 0.3rem; }
  .sheet ul, .sheet ol { padding-left: 1rem; margin-block: 0.25rem 0.4rem; }
  .sheet ul { break-inside: avoid; }
  .sheet li { margin-bottom: 0.1rem; }
  .sheet .sources, .sheet .small { font-size: 7pt; }
}

/* Guide-sign plates and lane markings carry the brand onto inner pages. */
.page-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: repeating-linear-gradient(to right, var(--accent) 0 1.5rem, var(--bg) 1.5rem 2.5rem); opacity: 0.6; }
.page-hero .crumbs, .page-hero .kicker { max-width: 100%; padding: 0; border: 0; background: none; }
.hero-sign { float: right; width: 12rem; margin: 0 0 var(--space-1) var(--space-2); }
.hero-sign img { background: var(--sign-white); padding: 0.4rem; border-radius: var(--radius); display: block; width: auto; max-width: 100%; height: 5rem; margin-inline: auto; object-fit: contain; }
.hero-sign figcaption { margin-top: 0.4rem; font-size: 0.8rem; line-height: 1.3; color: var(--muted); }
.page-hero .crumbs { margin-bottom: var(--space-2); }
.page-hero .crumbs ol { margin-bottom: 0; }
.page-hero .narrow::after { content: ""; display: block; clear: both; }
.qz-review { grid-template-columns: 1fr; }
.qz-review .qz-review-question { flex: none; font-size: var(--text-small); color: var(--accent); text-decoration: underline; }
.qz-review-topic { min-width: 0; font-weight: 700; }
.qz-review-more { margin-bottom: var(--space-2); }
.qz-result-links { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: var(--text-small); }
.qz-burst { position: absolute; left: 3.5rem; top: 3.5rem; pointer-events: none; }
.qz-confetti { position: absolute; width: 0.5rem; height: 0.5rem; opacity: 0; background: var(--ans-a); }
.qz-confetti-1 { background: var(--ans-b); }
.qz-confetti-2 { background: var(--ans-c); }
.qz-confetti-3 { background: var(--ans-d); }
@media (prefers-reduced-motion: no-preference) {
  .qz-confetti { animation: confetti-burst 700ms ease-out both; }
  @keyframes confetti-burst {
    from { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    to { opacity: 0; transform: translate(var(--burst-x), var(--burst-y)) rotate(var(--burst-turn)); }
  }
}
@media (max-width: 40rem) {
  .page-hero { padding-block: var(--space-2); }
  .hero-sign { float: none; display: flex; align-items: center; gap: var(--space-2); width: auto; margin: 0 0 var(--space-2); }
  .hero-sign img { flex: none; width: 3.5rem; height: 3.5rem; margin: 0; }
  .hero-sign figcaption { max-width: 24rem; margin-top: 0; }
  .qz-result { padding: var(--space-2); }

}

/* Result and practice feedback: reserved space keeps the dock steady. */
.qz-streak { position: absolute; bottom: 0.85rem; left: 0; font: 800 0.8rem/1 var(--font-display); color: var(--accent); visibility: hidden; }
.qz-streak.is-visible { visibility: visible; }
.state-chooser.band { padding-block: var(--space-3); }
.state-chooser h2 { font-size: var(--h3); }
.state-chooser p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .qz.is-practice-answer .opt.is-right { animation: answer-pop 180ms ease-out; }
  @keyframes answer-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
}
@media (min-width: 60rem) {
  .page-hero:has(.pro-intro-grid) .narrow { width: min(100% - 2 * var(--gutter), var(--wrap)); }
  .pro-intro-grid { display: grid; grid-template-columns: minmax(18rem, 1fr) 1.7fr; gap: var(--space-3); align-items: start; }
  .pro-intro-grid .pro-screens { margin-top: 0; }
  .pro-intro-grid .pro-price { margin: 0; }
}
@media (width < 40rem) {
  .page-hero.is-quiz { padding-block: 0.65rem 0.35rem; margin-bottom: 0; }
  .page-hero.is-quiz h1 { font-size: 1.7rem; margin-bottom: 0.4rem; }
  .page-hero.is-quiz .narrow > :not(h1):not(.lead):not(.updated):not(.kicker):not(.christmas-shapes):not(.christmas-live) { display: none; }
  .page-hero.is-quiz .lead { font-size: 0.95rem; margin-bottom: 0; }
  .page-hero .crumbs { padding: 0; border: 0; border-radius: 0; background: none; }
  .crumbs li { display: none; }
  .crumbs li:nth-last-child(2) { display: block; }
  .crumbs li + li::before { content: none; }
  .crumbs li:nth-last-child(2) a::before { content: "‹ "; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare caption { display: block; width: auto; }
  .compare thead { display: none; }
  .compare tr { margin-bottom: var(--space-2); padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .compare th, .compare td { padding: 0.25rem 0; border: 0; }
  .compare td::before { content: attr(data-label) ": "; font-weight: 700; }
}

.qz-road-pass::before { content: "Pass"; position: absolute; bottom: 100%; right: -0.6rem; font: 700 0.8rem/1 var(--font-display); color: var(--ink); padding-bottom: 0.2rem; }
.qz-dock:not(.is-on) .qz-streak { visibility: hidden; }
.qz-quiz.is-js .qz:not(.is-answered) .qz-why { display: none; }
.demo-opts button:nth-child(2) b, .pro-screens .screen-answers b { background: var(--ans-b); color: var(--ans-b-ink); }
.qz-result-links > * { white-space: nowrap; }
.qz-score { position: relative; z-index: 1; }
.qz-burst { z-index: 0; }
.quick-facts > li { padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.quick-facts a { display: inline; padding: 0; border: 0; color: var(--accent); text-decoration: underline; }
.preview-play { max-width: 24rem; margin-inline: auto; display: flex; margin-top: var(--space-2); justify-content: center; }
.choices[data-suggested="uk"] [data-choice="uk"], .choices[data-suggested="us"] [data-choice="us"] { border-color: var(--accent); background: var(--surface); }
@media (min-width: 40rem) { .topic-cards, .quick-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .topic-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: no-preference) {
  .qz-road-fill { transition: width 0.25s; }
  .qz.is-answered .opt.is-right::after { animation: tick-bounce 280ms ease-out; }
  @keyframes tick-bounce { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-0.25rem); } }
}

.choice:has(.choice-practice) { border: 2px solid var(--line); border-radius: var(--radius-card); }
.choice:has(.choice-practice) > a:first-child { border: 0; }
.choice .choice-practice { display: flex; justify-content: center; margin: 0 var(--space-3) var(--space-3); padding: var(--space-1); color: var(--accent-ink); background: var(--btn); border-color: var(--btn); }
.choice .choice-practice:hover { background: var(--btn-hover); border-color: var(--btn-hover); }

/* State choices use the same quiet, generous targets as quiz navigation. */
.state-chips { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-1); }
.state-chips a { display: flex; align-items: center; min-height: 44px; padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-button); background: var(--surface); color: var(--ink); text-decoration: none; }
.state-chips a:hover { border-color: var(--accent); color: var(--accent); }
.qz-pass-needed { display: inline-block; padding: 0.25rem 0.65rem; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 0.85rem; background: var(--bg); }
.christmas-shapes { display: flex; align-items: center; gap: 0.7rem; margin-block: var(--space-1); }
.christmas-shapes span { display: block; width: 1.1rem; height: 1.1rem; background: var(--ans-a); }
.christmas-shapes .sign-circle { border-radius: 50%; }
.christmas-shapes .sign-triangle { background: var(--ans-b); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.christmas-shapes .sign-diamond { background: var(--ans-c); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.christmas-shapes .sign-octagon { background: var(--ans-d); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }

.home-grid .demo-band > .narrow { width: min(100% - 2 * var(--gutter), var(--wrap)); }