/* FileMyAccounts. Bright and friendly: white and pale-blue sections, rounded cards, pill buttons.
   The one bold element is the company number in 8 paper-form boxes.
   Mobile first. WCAG 2.2 AA. */
/* OpenDyslexic (Bitstream Vera licence, see /fonts/OpenDyslexic-LICENSE.txt).
   Only downloaded when a visitor turns on the dyslexia-friendly font. */
@font-face { font-family: "OpenDyslexic"; src: url("/fonts/OpenDyslexic-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/fonts/OpenDyslexic-Bold.otf") format("opentype"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenDyslexic Mono"; src: url("/fonts/OpenDyslexicMono-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --text: #0f1f3d;            /* navy ink, 16:1 on white */
  --muted: #4b5a73;           /* 7:1 on white */
  --bg: #ffffff;
  --surface: #ffffff;
  --tint: #f2f6fe;            /* pale-blue sections */
  --hero: #e6eefd;
  --panel: #eef3fc;
  --cell: #c9d6ee;            /* paper-form box lines (decorative) */
  --line: #dde5f3;
  --border: #6b7a95;          /* 4.5:1, UI parts */
  --brand: #1a56db;           /* royal blue, 5.9:1 on white */
  --brand-dark: #1442a8;
  --on-brand: #ffffff;
  --navy: #0f1f3d;
  --link: #1a56db;
  --link-visited: #5b3a9e;
  --error: #b3261e;
  --warn-bg: #fff4d6;
  --highlight: #ffe14d;
  --ok: #17663a;              /* 7:1 on --ok-bg */
  --ok-bg: #e2f4e8;
  --soon: #7a4d00;
  --soon-bg: #fff0c7;
  --error-bg: #fde6e4;
  --focus: #0f1f3d;
  --focus-halo: #ffe14d;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(15, 31, 61, 0.06), 0 8px 24px -12px rgba(15, 31, 61, 0.18);
  --shadow-lg: 0 2px 4px rgba(15, 31, 61, 0.05), 0 30px 60px -24px rgba(15, 31, 61, 0.35);
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --display: "Bricolage Grotesque", var(--font);
  /* Bento tiles: flat colours, ink text on all of them (7:1 or better) */
  --frame: #0f1f3d;
  --tile-yellow: #ffe14d;
  --tile-mint: #c6f0d8;
  --tile-lilac: #dcd5ff;
  --tile-sky: #cde6ff;
  --tile-peach: #ffd9c4;
  --tile-white: #ffffff;
  --tile-ink: #0f1f3d;
  --tile-radius: 36px;
}

/* Light is the default. Dark only when chosen in Display settings, or with "Match device" on a dark device. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --text: #edf2fb;
  --muted: #b4c0d4;
  --bg: #0c1529;
  --surface: #142039;
  --tint: #101b33;
  --hero: #13213f;
  --panel: #1a2847;
  --cell: #34466b;
  --line: #26365a;
  --border: #8d9bb5;
  --brand: #8fb3ff;
  --brand-dark: #b3cbff;
  --on-brand: #0c1529;
  --navy: #070e1f;
  --link: #9cc0ff;
  --link-visited: #c9b3ef;
  --error: #ff9d94;
  --warn-bg: #3a3215;
  --ok: #8fe0ad;
  --ok-bg: #143323;
  --soon: #ffcf66;
  --soon-bg: #3a2e10;
  --error-bg: #3b1715;
  --focus: #ffe14d;
  --focus-halo: #0c1529;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --text: #edf2fb;
    --muted: #b4c0d4;
    --bg: #0c1529;
    --surface: #142039;
    --tint: #101b33;
    --hero: #13213f;
    --panel: #1a2847;
    --cell: #34466b;
    --line: #26365a;
    --border: #8d9bb5;
    --brand: #8fb3ff;
    --brand-dark: #b3cbff;
    --on-brand: #0c1529;
    --navy: #070e1f;
    --link: #9cc0ff;
    --link-visited: #c9b3ef;
    --error: #ff9d94;
    --warn-bg: #3a3215;
    --ok: #8fe0ad;
    --ok-bg: #143323;
    --soon: #ffcf66;
    --soon-bg: #3a2e10;
    --error-bg: #3b1715;
    --focus: #ffe14d;
    --focus-halo: #0c1529;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 44rem; margin: 0 auto; padding: 0 1rem; }
.wrap--wide { max-width: 72rem; }

h1, h2, h3 { line-height: 1.12; margin: 1.5em 0 0.5em; font-weight: 700; letter-spacing: -0.025em; }
h1 { font-size: 2.1rem; margin-top: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
p, ul, ol, dl, table { margin: 0 0 1rem; max-width: 38rem; }
ul, ol { padding-left: 1.5rem; }
li { margin-bottom: 0.35rem; }
.lead { font-size: 1.2rem; color: var(--muted); }

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:visited { color: var(--link-visited); }
a:hover { text-decoration-thickness: 2px; }
.ext { display: inline-block; margin-left: 0.15em; font-size: 0.85em; text-decoration: none; }

/* Visible focus for everything (WCAG 2.4.7, 2.4.11, 2.4.13) */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}
[tabindex="-1"]:focus { outline: none; box-shadow: none; }

.skip-link {
  position: absolute; left: 1rem; top: -100px;
  background: var(--surface); color: var(--text);
  padding: 0.75rem 1rem; z-index: 10; border: 2px solid var(--text); border-radius: var(--radius);
}
.skip-link:focus { top: 0.5rem; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Header: stays at the top, so Display settings and the waitlist are always in reach */
html { scroll-padding-top: 5rem; }
.site-header {
  position: sticky; top: 0; z-index: 18;
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 18px -14px rgba(15, 31, 61, 0.45);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 700; font-size: 1.2rem; letter-spacing: -0.03em; color: var(--text); text-decoration: none; padding: 0.25rem 0;
}
.brand:visited { color: var(--text); }
.brand:hover { text-decoration: underline; }
.brand-mark { width: 1.75rem; height: 1.75rem; color: var(--brand); flex: none; }

main { padding-bottom: 3rem; }
main.main--full { padding-bottom: 0; }
main:focus { outline: none; }

/* Buttons: pills */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 650; cursor: pointer; line-height: 1.2;
  background: var(--brand); color: var(--on-brand); border: 2px solid var(--brand);
  border-radius: 999px; padding: 0.7rem 1.5rem; min-height: 3rem;
  text-decoration: none;
}
.button:visited { color: var(--on-brand); }
.button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.button--small { min-height: 2.6rem; padding: 0.45rem 1.1rem; font-size: 0.95rem; white-space: nowrap; }
.button--secondary { background: transparent; color: var(--brand); border-color: var(--brand); }
.button--secondary:visited { color: var(--brand); }
.button--secondary:hover { background: var(--panel); }
.button[disabled] { opacity: 0.7; cursor: wait; }

/* Hero: the free tool, with an example result beside it */
.hero { background: var(--hero); padding: 2.5rem 0 3rem; overflow: hidden; }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 7.5vw, 3.6rem); line-height: 1.04; letter-spacing: -0.035em; margin: 0.9rem 0 1rem; max-width: 15ch; }
.hero .lead { margin-bottom: 1.5rem; }
.pill {
  display: inline-block; margin: 0; padding: 0.3rem 0.85rem; border-radius: 999px;
  background: var(--surface); color: var(--brand); font-weight: 650; font-size: 0.9rem;
  box-shadow: var(--shadow);
}
.slip {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.25rem; max-width: 34rem;
}
.slip label { font-size: 1rem; }
.slip .hint { margin-bottom: 0.7rem; }
.hero-note { color: var(--muted); font-size: 0.95rem; margin: 1rem 0 0; }

.example { margin: 0; position: relative; }
.example::before {
  content: ""; position: absolute; z-index: 0; inset: -10% -25% -10% 10%;
  background: radial-gradient(closest-side, rgba(26, 86, 219, 0.16), transparent);
  border-radius: 50%;
}
.example figcaption { position: relative; z-index: 1; font-size: 0.9rem; font-weight: 600; color: var(--muted); margin-bottom: 0.6rem; }
.example-card {
  position: relative; z-index: 1;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 1.5rem; max-width: 26rem;
}
.example-card p { margin: 0; }
.example-name { font-weight: 700; font-size: 1.15rem; }
.example-card .example-number { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.25rem; }
.example-label { font-size: 0.95rem; color: var(--muted); }
.example-card .example-date { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; margin: 0.1rem 0 1.25rem; }
mark { background: var(--highlight); color: #0f1f3d; padding: 0 0.15em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.example-rows { margin: 0; }
.example-rows div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-top: 1px solid var(--line); font-size: 0.95rem; }
.example-rows dt { color: var(--muted); }
.example-rows dd { margin: 0; font-weight: 600; }

/* 2028 band */
.band { background: var(--navy); color: #ffffff; padding: 3rem 0; }
.band h2 { margin-top: 0.25rem; color: #ffffff; }
.band p { color: #d6e0f2; }
.band a, .band a:visited { color: #b9cfff; }
.band .band-date { font-size: clamp(2.4rem, 8vw, 3.6rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 0; color: var(--highlight); }
.band-grid { display: grid; gap: 2rem; align-items: start; }
.card {
  background: var(--surface); color: var(--text); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.5rem 1.25rem 0.5rem;
}
.card h3 { margin: 0 0 1rem; font-size: 1.3rem; }
.band .card p { color: var(--muted); }
.band .card a, .band .card a:visited { color: var(--link); }
.band .card .error-message { color: var(--error); }

/* Sections */
.section { padding: 3rem 0; }
.section h2 { margin-top: 0; }
.section--tint { background: var(--tint); }

.features { list-style: none; padding: 0; margin: 1.5rem 0; max-width: none; display: grid; gap: 1rem; }
.features li {
  margin: 0; background: var(--tint); border-radius: var(--radius-lg); padding: 1.25rem 1.25rem 1rem 4rem;
  position: relative;
}
.features li::before {
  content: "✓"; position: absolute; left: 1.25rem; top: 1.2rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--brand); color: var(--on-brand); font-weight: 700;
  display: grid; place-items: center; font-size: 1rem;
}
.features h3 { margin: 0.15rem 0 0.25rem; }
.features p { margin: 0; color: var(--muted); }

.faq-grid { display: grid; gap: 1rem; }
.faq details { border-bottom: 1px solid var(--cell); padding: 0.4rem 0; }
.faq details:first-of-type { border-top: 1px solid var(--cell); }
.faq summary {
  cursor: pointer; font-weight: 650; padding: 0.6rem 2rem 0.6rem 0; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--brand); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-bottom: 0.8rem; }

.inline-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; }
.inline-row input { flex: 1 1 14rem; }
.inline-row .cn-input { flex: 0 1 auto; }

.panel {
  background: var(--panel); border-left: 6px solid var(--brand);
  padding: 0.25rem 1.25rem 0.5rem; margin: 2rem 0; border-radius: var(--radius);
}
.panel--plain { border-left-color: var(--cell); background: var(--surface); }
.panel h2 { margin-top: 1rem; }

.small-print { color: var(--muted); font-size: 0.95rem; }

/* Forms */
.field { margin-bottom: 1.25rem; }
.field--error { border-left: 5px solid var(--error); padding-left: 0.9rem; }
label { display: block; font-weight: 650; margin-bottom: 0.2rem; }
.hint { color: var(--muted); margin: 0 0 0.5rem; font-size: 0.95rem; }
input[type="email"], input[type="text"] {
  display: block; width: 100%; max-width: 30rem;
  font: inherit; color: var(--text); background: var(--surface);
  border: 2px solid var(--border); border-radius: var(--radius); padding: 0.55rem 0.8rem; min-height: 3rem;
}
input[type="email"]:hover, input[type="text"]:hover { border-color: var(--text); }
input[aria-invalid="true"] { border-color: var(--error); border-width: 3px; }
.error-message { color: var(--error); font-weight: 600; margin: 0 0 0.5rem; }

/* Company number in 8 boxes, like a Companies House paper form.
   Each cell is 1.6ch: 1ch glyph + 0.6ch letter-spacing, centred by 0.3ch padding. */
input.cn-input {
  font-family: var(--mono);
  font-size: 1.75rem;
  letter-spacing: 0.6ch;
  text-transform: uppercase;
  width: calc(8 * 1.6ch + 0.3ch + 4px);
  max-width: 100%;
  padding: 0.35rem 0 0.35rem 0.3ch;
  min-height: 3.4rem;
  border-color: var(--text);
  border-radius: 8px;
  background-color: var(--surface);
  background-image: linear-gradient(90deg, transparent calc(1.6ch - 1px), var(--cell) calc(1.6ch - 1px));
  background-size: 1.6ch 100%;
  background-repeat: repeat-x;
}
.inline-row .button { min-height: 3.4rem; }

.checkbox { display: flex; gap: 0.75rem; align-items: flex-start; }
.checkbox input { width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; flex: none; accent-color: var(--brand); }
.checkbox label { font-weight: normal; margin: 0; }

/* Honeypot: hidden from people and screen readers */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Error summary + notices */
.error-summary {
  border: 4px solid var(--error); border-radius: var(--radius); padding: 0.25rem 1rem 0.5rem; margin: 1.5rem 0; background: var(--surface);
}
.error-summary h2 { margin-top: 0.75rem; }
.error-summary a { color: var(--error); font-weight: 600; }
.notice, .message, .draft-note {
  border: 1px solid var(--line); border-top: 6px solid var(--brand); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
  padding: 0.25rem 1.25rem 0.5rem; margin: 1.5rem 0;
}
.notice { border-top-color: var(--error); }
.draft-note { border-top-color: #8a6d00; background: var(--warn-bg); }
.message h1 { margin-top: 0.75rem; }

/* Results: the deadline gets the highlighter */
.summary { margin: 0 0 1.5rem; }
.summary > div { display: flex; flex-wrap: wrap; gap: 0 1rem; border-bottom: 1px solid var(--line); padding: 0.6rem 0; }
.summary dt { font-weight: 600; flex: 1 1 12rem; }
.summary dd { margin: 0; flex: 2 1 14rem; }
.badge { display: inline-block; padding: 0.05rem 0.6rem; border-radius: 999px; border: 2px solid currentColor; }
.badge--overdue { color: var(--error); }
.badge--today, .badge--soon { color: #7a4d00; }
.badge--upcoming { color: #0f1f3d; background: var(--highlight); border-color: var(--highlight); }
.badge--today, .badge--soon { color: var(--soon); }
.result h2 { margin-top: 1.25rem; }

table { border-collapse: collapse; width: 100%; }
caption { text-align: left; font-weight: 600; padding-bottom: 0.5rem; }
th, td { text-align: left; padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }

.ticks { list-style: none; padding-left: 0; }
.ticks li { padding-left: 1.6rem; position: relative; }
.ticks li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--brand); }

.site-footer { border-top: 1px solid var(--line); background: var(--tint); padding: 2rem 0 2.5rem; font-size: 0.95rem; color: var(--muted); }
.footer-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer-links a { display: inline-block; padding: 0.25rem 0; }

/* ---------- Results: one glance, one answer ---------- */
.wrap--mid { max-width: 58rem; }
.hero--tool h1 { max-width: 18ch; }
.hero--tool .slip { margin-top: 0.5rem; }
.slip .field { margin-bottom: 0; }

.result-top { background: var(--hero); padding: 1.5rem 0 2.5rem; }
.result-back { margin: 0 0 1rem; font-size: 0.95rem; }
.result-top h1 { font-size: clamp(1.9rem, 6vw, 2.8rem); letter-spacing: -0.03em; margin: 0 0 0.75rem; }

.chips { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: none; }
.chips li {
  margin: 0; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--surface);
  font-size: 0.92rem; font-weight: 600; box-shadow: var(--shadow);
}
.chips .chip--ok::before, .chips .chip--warn::before {
  content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  margin-right: 0.45rem; vertical-align: 0.08em; background: var(--ok);
}
.chips .chip--warn::before { background: var(--error); }

.deadlines { display: grid; gap: 1rem; }
.deadline {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.25rem 1.25rem 1.1rem; border-top: 6px solid var(--line);
}
.deadline--main { box-shadow: var(--shadow-lg); border-top-color: var(--brand); }
.deadline--soon, .deadline--today { border-top-color: var(--soon); }
.deadline--overdue { border-top-color: var(--error); }
.deadline h2 { font-size: 1.05rem; margin: 0 0 0.9rem; color: var(--muted); letter-spacing: 0; }
.deadline p { margin: 0; }
.deadline-label { font-size: 0.95rem; color: var(--muted); }
.deadline .deadline-date { margin: 0.1rem 0 0.9rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; font-size: 1.6rem; }
.deadline--main .deadline-date { font-size: clamp(2rem, 7vw, 2.7rem); }
.deadline--overdue mark { background: var(--error-bg); color: var(--error); }
.deadline .deadline-note { margin-top: 0.9rem; color: var(--muted); font-size: 0.98rem; max-width: 32rem; }
.deadline .deadline-note strong { color: var(--text); }

.status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.9rem 0.35rem 0.55rem; border-radius: 999px; font-size: 1rem;
}
.status svg { width: 1.25rem; height: 1.25rem; flex: none; }
.status--upcoming { background: var(--ok-bg); color: var(--ok); }
.status--soon, .status--today { background: var(--soon-bg); color: var(--soon); }
.status--overdue { background: var(--error-bg); color: var(--error); }

.section--tight { padding: 2.5rem 0; }

.timeline { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; max-width: 34rem; }
.timeline-item {
  position: relative; margin: 0; padding: 0 0 1.4rem 2.2rem;
  display: flex; flex-direction: column;
}
.timeline-item::before {
  content: ""; position: absolute; left: 0.3rem; top: 0.35rem;
  width: 0.9rem; height: 0.9rem; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--brand);
}
.timeline-item::after {
  content: ""; position: absolute; left: 0.69rem; top: 1.5rem; bottom: 0.1rem;
  width: 2px; background: var(--cell);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:last-child::after { display: none; }
.timeline-item--today::before { background: var(--highlight); border-color: var(--text); }
.timeline-item--past::before { border-color: var(--border); }
.timeline-item--past .timeline-date, .timeline-item--past .timeline-label { color: var(--muted); font-weight: 400; }
.timeline-date { font-weight: 700; }
.timeline-label { color: var(--muted); }
.timeline-item--today .timeline-label { color: var(--text); font-weight: 600; }

.tip {
  background: var(--warn-bg); border-radius: var(--radius); padding: 0.8rem 1rem; max-width: 34rem;
}

.more { margin-top: 2rem; max-width: 40rem; }
.more details { border-bottom: 1px solid var(--cell); padding: 0.4rem 0; }
.more details:first-child { border-top: 1px solid var(--cell); }
.more summary { cursor: pointer; font-weight: 650; padding: 0.6rem 2rem 0.6rem 0; list-style: none; position: relative; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--brand); line-height: 1;
}
.more details[open] summary::after { content: "\2212"; }
.more details[open] { padding-bottom: 1rem; }

.table-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1rem 1.25rem 0.25rem; max-width: 34rem; }
.table-card table { margin-bottom: 1rem; }
td:last-child { font-weight: 600; }

.cta { padding: 2.5rem 0; }
.cta-card {
  background: var(--navy); color: #ffffff; border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem; display: grid; gap: 1.25rem; align-items: center;
}
.cta-card h2 { margin: 0 0 0.4rem; color: #ffffff; font-size: 1.4rem; }
.cta-card p { margin: 0; color: #d6e0f2; }
.button--light, .button--light:visited { background: var(--highlight); border-color: var(--highlight); color: #0f1f3d; justify-self: start; }
.button--light:hover { background: #ffd21a; border-color: #ffd21a; }

.about-data { padding: 1rem 0 3rem; }
.about-data h2 { font-size: 1rem; margin: 0 0 0.4rem; color: var(--text); }

/* ---------- Display settings (set on <html> by prefs.js / app.js) ---------- */
/* Text size */
:root[data-text="large"] { font-size: 118.75%; }
:root[data-text="xlarge"] { font-size: 137.5%; }

/* Dyslexia-friendly font: weighted letter bottoms help stop letters flipping or swapping */
:root[data-font="dyslexic"] { --font: "OpenDyslexic", system-ui, sans-serif; --mono: "OpenDyslexic Mono", ui-monospace, monospace; }
:root[data-font="dyslexic"] h1, :root[data-font="dyslexic"] h2, :root[data-font="dyslexic"] h3 { letter-spacing: 0; line-height: 1.3; }
:root[data-font="dyslexic"] .hero h1 { font-size: clamp(1.9rem, 6vw, 2.9rem); }

/* Wider spacing: WCAG 1.4.12 text spacing values */
:root[data-spacing="wide"] body { line-height: 1.9; letter-spacing: 0.06em; word-spacing: 0.16em; }
:root[data-spacing="wide"] p { margin-bottom: 1.5em; }
:root[data-spacing="wide"] h1, :root[data-spacing="wide"] h2, :root[data-spacing="wide"] h3 { letter-spacing: 0.02em; line-height: 1.35; }

/* High contrast: pure black and white, solid borders, no shadows, every link underlined */
:root[data-contrast="high"] {
  --text: #000000; --muted: #000000; --bg: #ffffff; --surface: #ffffff; --tint: #ffffff; --hero: #ffffff;
  --panel: #ffffff; --cell: #000000; --line: #000000; --border: #000000;
  --brand: #0033cc; --brand-dark: #001f80; --on-brand: #ffffff; --navy: #000000;
  --link: #0033cc; --link-visited: #551a8b; --ok: #00561f; --ok-bg: #ffffff; --soon: #5c3a00; --soon-bg: #ffffff;
  --error: #a00000; --error-bg: #ffffff; --warn-bg: #ffffff; --shadow: none; --shadow-lg: none;
}
:root[data-contrast="high"][data-theme="dark"] {
  --text: #ffffff; --muted: #ffffff; --bg: #000000; --surface: #000000; --tint: #000000; --hero: #000000;
  --panel: #000000; --cell: #ffffff; --line: #ffffff; --border: #ffffff;
  --brand: #ffe14d; --brand-dark: #fff09e; --on-brand: #000000; --navy: #000000;
  --link: #ffe14d; --link-visited: #ffb3ff; --ok: #7dff9e; --ok-bg: #000000; --soon: #ffd060; --soon-bg: #000000;
  --error: #ff8a80; --error-bg: #000000; --warn-bg: #000000; --focus: #ffffff; --focus-halo: #000000;
}
@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"][data-theme="auto"] {
    --text: #ffffff; --muted: #ffffff; --bg: #000000; --surface: #000000; --tint: #000000; --hero: #000000;
    --panel: #000000; --cell: #ffffff; --line: #ffffff; --border: #ffffff;
    --brand: #ffe14d; --brand-dark: #fff09e; --on-brand: #000000; --navy: #000000;
    --link: #ffe14d; --link-visited: #ffb3ff; --ok: #7dff9e; --ok-bg: #000000; --soon: #ffd060; --soon-bg: #000000;
    --error: #ff8a80; --error-bg: #000000; --warn-bg: #000000; --focus: #ffffff; --focus-halo: #000000;
  }
}
:root[data-contrast="high"] a { text-decoration-thickness: 2px; }
:root[data-contrast="high"] .slip, :root[data-contrast="high"] .card, :root[data-contrast="high"] .deadline,
:root[data-contrast="high"] .example-card, :root[data-contrast="high"] .features li, :root[data-contrast="high"] .tip,
:root[data-contrast="high"] .chips li, :root[data-contrast="high"] .pill, :root[data-contrast="high"] .table-card,
:root[data-contrast="high"] .cta-card, :root[data-contrast="high"] .status, :root[data-contrast="high"] .prefs-panel { border: 2px solid var(--text); }
:root[data-contrast="high"] .band, :root[data-contrast="high"] .cta-card { color: var(--text); background: var(--bg); }
:root[data-contrast="high"] .band { border-top: 2px solid var(--text); border-bottom: 2px solid var(--text); }
:root[data-contrast="high"] .band h2, :root[data-contrast="high"] .band p, :root[data-contrast="high"] .cta-card h2, :root[data-contrast="high"] .cta-card p { color: var(--text); }
:root[data-contrast="high"] .band a, :root[data-contrast="high"] .band a:visited { color: var(--link); }
:root[data-contrast="high"] .band .band-date { color: var(--text); }
:root[data-contrast="high"] .example::before { display: none; }
:root[data-contrast="high"] mark { outline: 2px solid #000000; }

/* Header button + panel */
.site-header .wrap { position: relative; }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.prefs-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.6rem; padding: 0.4rem 0.8rem;
  font: inherit; font-weight: 650; font-size: 0.95rem; color: var(--text); cursor: pointer;
  background: var(--surface); border: 2px solid var(--line); border-radius: 999px;
}
.prefs-toggle:hover { border-color: var(--text); }
.prefs-toggle[aria-expanded="true"] { border-color: var(--brand); background: var(--panel); }
.prefs-toggle svg { width: 1.3rem; height: 1.3rem; flex: none; }
.prefs-toggle-text { display: none; }
/* Phones: keep both buttons; shorten the label and the logo text to fit */
@media (max-width: 29.99rem) {
  .cta-the { display: none; }
  .brand { font-size: 1.05rem; gap: 0.4rem; }
  .header-cta { padding-left: 0.85rem; padding-right: 0.85rem; }
  .header-actions { gap: 0.35rem; }
}
@media (max-width: 24rem) {
  .brand { font-size: 1rem; }
  .brand-mark { display: none; }
  .prefs-toggle { padding-left: 0.6rem; padding-right: 0.6rem; }
}
@media (max-width: 21rem) {
  .brand-mark { display: block; }
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

.prefs-panel {
  position: fixed; z-index: 20; left: 0.5rem; right: 0.5rem; top: 4rem;
  max-height: calc(100vh - 4.5rem); max-height: calc(100dvh - 4.5rem); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--text); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line); padding: 1.1rem 1.1rem 1.25rem;
}
.prefs-panel[hidden] { display: none; }
.prefs-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.prefs-head h2 { font-size: 1.2rem; margin: 0; }
.prefs-close {
  font: inherit; font-weight: 650; font-size: 0.95rem; cursor: pointer; color: var(--text);
  background: transparent; border: 2px solid var(--line); border-radius: 999px; min-height: 2.5rem; padding: 0.3rem 0.9rem;
}
.prefs-close:hover { border-color: var(--text); }
.prefs-group { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.prefs-group legend { font-weight: 650; padding: 0; margin-bottom: 0.45rem; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.3rem; background: var(--tint); padding: 0.3rem; border-radius: 999px; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label {
  margin: 0; text-align: center; font-weight: 600; font-size: 0.95rem; cursor: pointer;
  padding: 0.5rem 0.4rem; min-height: 2.5rem; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 2px solid transparent;
}
.segmented input:checked + label { background: var(--surface); border-color: var(--brand); box-shadow: var(--shadow); }
.segmented input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.segmented .size-2 { font-size: 1.1rem; }
.segmented .size-3 { font-size: 1.3rem; }

.switches { list-style: none; padding: 0; margin: 0 0 1rem; max-width: none; }
.switches li { margin: 0; border-top: 1px solid var(--line); }
.switches li:last-child { border-bottom: 1px solid var(--line); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; margin: 0; cursor: pointer; font-weight: 600; }
.switch small { display: block; font-weight: 400; color: var(--muted); font-size: 0.88rem; }
.switch input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; cursor: pointer;
  width: 3.1rem; height: 1.8rem; border-radius: 999px; background: var(--border); position: relative;
}
.switch input::after {
  content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: #ffffff; transition: transform 0.15s;
}
.switch input:checked { background: var(--brand); }
.switch input:checked::after { transform: translateX(1.3rem); background: var(--on-brand); }
.prefs-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.prefs-foot p { margin: 0; font-size: 0.88rem; color: var(--muted); }
.prefs-reset { font: inherit; font-weight: 650; color: var(--link); background: none; border: 0; padding: 0.4rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; }

/* Reading mask: dims the page above and below a band that follows the pointer or finger */
.reading-mask { position: fixed; left: 0; right: 0; z-index: 15; pointer-events: none; background: rgba(5, 10, 25, 0.62); }
.reading-mask--top { top: 0; height: 40vh; }
.reading-mask--bottom { bottom: 0; height: 40vh; }
.reading-mask[hidden] { display: none; }

/* ---------- Admin console ---------- */
.admin-auth { max-width: 30rem; margin: 3rem auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.75rem 1.5rem; }
.admin-auth h1 { margin-top: 0; font-size: 1.8rem; }
.admin-status { min-height: 1.6em; margin: 0.9rem 0 0; color: var(--muted); }
.admin-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 1rem; }
.admin-top h1 { margin: 0; }
.stat-row { list-style: none; padding: 0; margin: 0 0 0.75rem; max-width: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.stat { margin: 0; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 0.9rem 1rem; display: flex; flex-direction: column; }
.stat-num { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.stat-label { color: var(--muted); font-size: 0.92rem; }
.admin-table { max-width: none; padding: 0.5rem 1rem 0.25rem; margin: 1.25rem 0 2rem; overflow-x: auto; }
.admin-table td:first-child { font-weight: 600; word-break: break-all; }
.admin-table td:last-child { font-weight: 400; }
.status-tag { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.9rem; font-weight: 650; }
.status-tag--ok { background: var(--ok-bg); color: var(--ok); }
.status-tag--wait { background: var(--soon-bg); color: var(--soon); }
:root[data-contrast="high"] .status-tag, :root[data-contrast="high"] .stat, :root[data-contrast="high"] .admin-auth { border: 2px solid var(--text); }
@media (max-width: 39.99rem) {
  /* Phones: each sign-up becomes a small card with labels */
  .admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .admin-table tr { display: block; border-bottom: 1px solid var(--line); padding: 0.6rem 0; }
  .admin-table td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: 0.2rem 0; }
  .admin-table td::before { content: attr(data-label); color: var(--muted); font-weight: 400; }
  .admin-table td[colspan] { display: block; }
  .admin-table td[colspan]::before { content: none; }
}

/* ---------- Bento skin: every page sits in rounded tiles on the navy frame ---------- */
.skin { background: var(--frame); }
.skin .site-header { background: var(--frame); border-bottom-color: transparent; box-shadow: none; }
.skin .brand, .skin .brand:visited { color: #ffffff; }
.skin .brand-mark { color: var(--tile-yellow); }
.skin .brand-mark path:first-of-type { fill: var(--frame); }
.skin .prefs-toggle { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.35); }
.skin .prefs-toggle:hover, .skin .prefs-toggle[aria-expanded="true"] { border-color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.skin .header-cta, .skin .header-cta:visited { background: var(--tile-yellow); border-color: var(--tile-yellow); color: var(--tile-ink); }
.skin .site-footer { background: var(--frame); color: #c9d3e6; border-top: 0; }
.skin .site-footer a, .skin .site-footer a:visited { color: #ffffff; }

.bento {
  display: grid; gap: 10px; padding: 10px;
  max-width: 88rem; margin: 0 auto;
}
.tile {
  --tile-bg: var(--tile-white);
  background: var(--tile-bg); color: var(--tile-ink);
  border-radius: var(--tile-radius);
  padding: 1.75rem 1.25rem;
  position: relative; overflow: hidden; min-width: 0;
}
.tile--yellow { --tile-bg: var(--tile-yellow); }
.tile--mint { --tile-bg: var(--tile-mint); }
.tile--lilac { --tile-bg: var(--tile-lilac); }
.tile--sky { --tile-bg: var(--tile-sky); }
.tile--white { --tile-bg: var(--tile-white); }
.tile h1, .tile h2, .tile h3 { font-family: var(--display); color: var(--tile-ink); }
.tile p, .tile .small-print, .tile .hint, .tile .lead { color: var(--tile-ink); }
.tile a, .tile a:visited { color: var(--tile-ink); text-decoration-thickness: 2px; }
.tile .card a, .tile .card a:visited, .tile .slip a, .tile .slip a:visited { color: var(--link); }
.tile .error-summary a { color: var(--error); }

/* Hero tile */
.tile--hero { display: grid; gap: 1rem; padding-top: 2.25rem; }
.tile--hero h1 {
  font-size: clamp(2.5rem, 9vw, 4.6rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em;
  font-stretch: 85%; margin: 1rem 0 1rem; max-width: 13ch;
}
.tile--hero .lead { font-size: 1.2rem; max-width: 30rem; }
.tile--hero .pill { background: var(--tile-ink); color: var(--tile-yellow); box-shadow: none; }
.tile--hero .slip { box-shadow: none; border: 3px solid var(--tile-ink); border-radius: 24px; }
.tile--hero .hero-note { color: var(--tile-ink); }
.doodle { display: block; height: auto; max-width: 100%; pointer-events: none; user-select: none; }
.doodle--hero { width: min(100%, 30rem); justify-self: center; margin-bottom: -1.75rem; }

/* Example tile */
.tile--example { display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.tile-kicker { font-size: 1.5rem; margin: 0; font-weight: 800; }
.tile--example .example-card { border: 3px solid var(--tile-ink); box-shadow: none; border-radius: 24px; max-width: none; }

/* 2028 + waitlist tile */
.tile--waitlist { display: grid; gap: 1.5rem; align-items: center; }
.tile--waitlist .band-date {
  font-family: var(--display); font-size: clamp(3rem, 12vw, 6rem); font-weight: 800; line-height: 0.95;
  letter-spacing: -0.04em; font-stretch: 80%; margin: 0; color: var(--tile-ink);
}
.tile--waitlist h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0.4rem 0 0.75rem; font-weight: 800; }
.tile--waitlist .card { box-shadow: none; border: 3px solid var(--tile-ink); border-radius: 24px; }
.doodle--calm { width: min(100%, 22rem); margin: 0.5rem 0 -1.75rem; }

/* Features tile */
.tile--features h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; margin: 0 0 1rem; }
.tile--features .features { margin: 0 0 1rem; }
.tile--features .feature { border-radius: 24px; padding: 1.4rem 1.25rem; padding-left: 1.25rem; }
.tile--features .feature::before { display: none; }
.tile--features .feature h3 { font-size: 1.45rem; font-weight: 800; margin: 0 0 0.35rem; line-height: 1.1; }
.tile--features .feature p { color: var(--tile-ink); }
.tile--features .feature--peach { background: var(--tile-peach); }
.tile--features .feature--sky { background: var(--tile-sky); }
.tile--features .feature--yellow { background: var(--tile-yellow); }
.skin .site-header .wrap, .skin .site-footer .wrap { max-width: 88rem; padding-left: calc(10px + 1.25rem); padding-right: calc(10px + 1.25rem); }

/* FAQ tile */
.tile--faq { display: grid; gap: 1rem; }
.tile--faq h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; margin: 0; }
.tile--faq details { border-color: var(--tile-ink); }
.tile--faq summary::after { color: var(--tile-ink); }
.doodle--faq { width: min(100%, 18rem); margin-top: 0.5rem; }

/* Tool, results and text pages inside tiles */
.tile > .wrap { padding-left: 0; padding-right: 0; }
.tile--page h1 { font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.tile--tool h1 { font-size: clamp(2.4rem, 8vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; font-stretch: 85%; max-width: 14ch; }
.tile--tool .pill { background: var(--tile-ink); color: var(--tile-yellow); box-shadow: none; }
.tile--tool .slip, .result-top .deadline, #again .slip { box-shadow: none; border: 3px solid var(--tile-ink); border-radius: 24px; }
.result-top h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); font-weight: 800; letter-spacing: -0.035em; font-stretch: 85%; }
.result-top .chips li { box-shadow: none; border: 2px solid var(--tile-ink); }
.result-top .deadline--main { box-shadow: none; }
.tile h2 { font-weight: 800; }
.tile .cta-card { background: transparent; color: var(--tile-ink); padding: 0; border-radius: 0; }
.tile .cta-card .button--light, .tile .cta-card .button--light:visited { background: var(--tile-ink); border-color: var(--tile-ink); color: #ffffff; }
.tile .table-card { box-shadow: none; border: 3px solid var(--tile-ink); border-radius: 24px; }
.tile.about-data h2 { font-size: 1.1rem; }
.tile .tip { border: 2px solid var(--tile-ink); }

/* Inside the tiles everything stays light, in every theme: the tiles are bright,
   so their forms and cards keep light surfaces and dark text. */
.bento {
  color-scheme: light;
  --bg: #ffffff; --text: #0f1f3d; --muted: #4b5a73; --surface: #ffffff; --tint: #f2f6fe; --panel: #eef3fc;
  --cell: #c9d6ee; --line: #dde5f3; --border: #6b7a95;
  --brand: #1a56db; --brand-dark: #1442a8; --on-brand: #ffffff;
  --link: #1a56db; --link-visited: #5b3a9e; --error: #b3261e; --error-bg: #fde6e4; --warn-bg: #fff4d6;
  --ok: #17663a; --ok-bg: #e2f4e8; --soon: #7a4d00; --soon-bg: #fff0c7;
  --focus: #0f1f3d; --focus-halo: #ffe14d;
  --shadow: 0 1px 2px rgba(15, 31, 61, 0.06), 0 8px 24px -12px rgba(15, 31, 61, 0.18);
}
/* White boxes inside a tile always use dark ink, whatever the tile colour. */
.tile .slip, .tile .card, .tile .example-card { --tile-ink: var(--text); color: var(--text); }
:root[data-contrast="high"] .tile--hero .pill { background: var(--tile-ink); color: var(--tile-bg); }
:root[data-contrast="high"] .bento { --text: #000000; --muted: #000000; --cell: #000000; --line: #000000; --border: #000000; --brand: #0033cc; --link: #0033cc; --tile-ink: #000000; }

/* Dark mode: the frame goes near-black; tiles stay bright (they're the brand) */
:root[data-theme="dark"] { --frame: #070e1f; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --frame: #070e1f; } }
/* High contrast: white tiles, black text and outlines, in light and dark (dark only changes the frame) */
:root[data-contrast="high"] .tile { --tile-bg: #ffffff; border: 3px solid #000000; }
:root[data-contrast="high"] .tile--features .feature { background: var(--tile-bg); border: 2px solid var(--tile-ink); }

@media (min-width: 40rem) {
  .bento { gap: 12px; padding: 12px; }
  .tile { padding: 2.5rem 2.25rem; }
  .wrap { padding: 0 1.5rem; }
  .prefs-toggle-text { display: inline; }
  .prefs-panel { left: auto; right: max(1rem, calc((100vw - 72rem) / 2 + 1.5rem)); width: 25rem; top: 4.25rem; }
  h1 { font-size: 2.5rem; }
  .slip { padding: 1.5rem 1.75rem; }
  .features { grid-template-columns: repeat(3, 1fr); }
  .card { padding: 2rem 2rem 0.75rem; }
  .deadlines { grid-template-columns: 1.35fr 1fr; align-items: start; }
  .deadline { padding: 1.5rem 1.75rem 1.4rem; }
  .cta-card { grid-template-columns: 1fr auto; padding: 2rem 2.25rem; }
}

@media (min-width: 60rem) {
  .bento { grid-template-columns: repeat(12, 1fr); }
  .tile { grid-column: 1 / -1; }
  .tile { padding: 3rem 3rem; }
  .tile--hero { grid-column: span 8; grid-template-columns: 1.3fr 1fr; align-items: end; padding-top: 3.25rem; }
  .doodle--hero { margin-bottom: -3rem; align-self: end; }
  .tile--example { grid-column: span 4; }
  .tile--waitlist { grid-column: span 12; grid-template-columns: 1.1fr 1fr; gap: 3rem; }
  .doodle--calm { margin-bottom: -3rem; }
  .tile--features { grid-column: span 7; }
  .tile--features .features { grid-template-columns: 1fr; }
  .tile--faq { grid-column: span 5; grid-template-columns: 1fr; }
  .hero { padding: 4.5rem 0 5rem; }
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; }
  .band { padding: 4.5rem 0; }
  .band-grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
  .section { padding: 4.5rem 0; }
  .faq-grid { grid-template-columns: 1fr 2fr; gap: 4rem; }
}

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

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

@media print {
  .site-header, .site-footer, form, .panel, .example, .band, .cta, .result-back, .prefs-panel, .reading-mask { display: none; }
}