/* Frankly — site styles. Every colour, size and space is a token from the design system. */

/* Fonts are served from the site itself, so no page calls an outside font service.
   Both are variable fonts under the SIL Open Font License (licences sit next to the files). */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url("fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url("fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --surface: #f2f2ee;
  --surface-raised: #ffffff;
  --surface-sunken: #e4e4de;
  --ink: #15171a;
  --ink-muted: #585d64;
  --line: #c6c7c1;
  --line-strong: #15171a;
  --cobalt: #1e3ee0;
  --cobalt-strong: #1631b8;
  --on-cobalt: #ffffff;
  --cobalt-tint: #dde3fb;
  --chalk: #f2f2ee;
  --tar: #15171a;
  --success: #0d6b63;
  --warning: #9a4b00;
  --danger: #b3252b;
  --focus: #1e3ee0;

  --font-display: "Archivo", "Arial Black", Impact, system-ui, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;

  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px;  --space-8: 64px; --space-9: 112px;
  --radius-0: 0px; --radius-pill: 999px;
  --max: 1280px;
  --gutter: var(--space-4);
  --section: var(--space-8);
}
@media (min-width: 900px) {
  :root { --gutter: var(--space-6); --section: var(--space-9); }
}

/* Tar theme: posters, dark bands, footer. Fixed brand chalk and tar never change.
   With data-theme="dark" on <html> the whole page is tar and the bands invert to chalk. */
.theme-tar, :root[data-theme="dark"] {
  --surface: #15171a;
  --surface-raised: #1f2226;
  --surface-sunken: #0e0f11;
  --ink: #f2f2ee;
  --ink-muted: #a7acb3;
  --line: #363a40;
  --line-strong: #f2f2ee;
  --cobalt: #6f8cff;
  --cobalt-strong: #8ea4ff;
  --on-cobalt: #0b1030;
  --cobalt-tint: #1c2650;
  --focus: #8ea4ff;
}
:root[data-theme="dark"] .theme-tar {
  --surface: #f2f2ee;
  --surface-raised: #ffffff;
  --surface-sunken: #e4e4de;
  --ink: #15171a;
  --ink-muted: #585d64;
  --line: #c6c7c1;
  --line-strong: #15171a;
  --cobalt: #1e3ee0;
  --cobalt-strong: #1631b8;
  --on-cobalt: #ffffff;
  --cobalt-tint: #dde3fb;
  --focus: #1e3ee0;
}
.theme-tar { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] { color-scheme: dark; }

/* Wordmark files: ink letters on light ground, chalk letters on dark. */
.wm-dark { display: none; }
:root[data-theme="dark"] .wm-light, .theme-tar .wm-light { display: none; }
:root[data-theme="dark"] .wm-dark, .theme-tar .wm-dark { display: block; }
:root[data-theme="dark"] .theme-tar .wm-light { display: block; }
:root[data-theme="dark"] .theme-tar .wm-dark { display: none; }

/* Theme switch */
.nav a, .nav .btn { white-space: nowrap; }
.lang-switch { text-decoration: none; color: var(--ink-muted); padding: 0 var(--space-2); }
.lang-switch:hover { color: var(--ink); }
.drawer .lang-switch { padding: 0; }
.theme-switch { display: inline-flex; align-items: center; gap: var(--space-2); background: none; border: 1px solid var(--line); color: var(--ink-muted); padding: var(--space-1) var(--space-3); min-height: 32px; cursor: pointer; font: inherit; }
.theme-switch:hover { color: var(--ink); border-color: var(--line-strong); }
.theme-switch .dot { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--tar); border: 1px solid var(--line-strong); }
:root[data-theme="dark"] .theme-switch .dot { background: var(--chalk); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--cobalt-strong); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
p { margin: 0 0 var(--space-4); max-width: 65ch; }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.2em; max-width: 65ch; }
li { margin-bottom: var(--space-2); }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.skip { position: absolute; left: -999px; top: 0; background: var(--cobalt); color: var(--on-cobalt); padding: var(--space-2) var(--space-4); z-index: 100; }
.skip:focus { left: var(--space-4); top: var(--space-4); }

/* Type styles */
.display { font-family: var(--font-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.92; margin: 0; text-wrap: balance; }
.display-xl { font-size: clamp(52px, 9vw, 96px); line-height: 0.9; }
/* Phones: scale with the screen so a long word (ERECTIONS., HAARUITVAL., ANTWOORDEN.) stays inside the gutters */
@media (max-width: 600px) { .display-xl { font-size: clamp(28px, 9vw, 54px); } }
.display-l  { font-size: clamp(40px, 6vw, 64px); }
@media (max-width: 600px) { .display-l { font-size: clamp(26px, 8.4vw, 40px); } }
.display-m  { font-size: clamp(30px, 4vw, 40px); line-height: 0.95; letter-spacing: -0.015em; }
.display-s  { font-size: 24px; line-height: 1; letter-spacing: -0.01em; font-stretch: 112%; font-weight: 800; }
.label { font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; }
.lead { font-size: 22px; line-height: 30px; font-weight: 500; max-width: 34em; }
.body-s { font-size: 15px; line-height: 22px; }
.caption { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.numeral { font-family: var(--font-body); font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stop { color: var(--cobalt); }
.muted { color: var(--ink-muted); }
.eyebrow { color: var(--ink-muted); margin: 0 0 var(--space-4); }

/* Layout */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section); padding-bottom: var(--section); }
.section--tight { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.section + .section { border-top: 1px solid var(--line); }
.grid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-5-7 { grid-template-columns: 5fr 7fr; align-items: start; }
  .grid-7-5 { grid-template-columns: 7fr 5fr; align-items: start; }
  .grid-4-8 { grid-template-columns: 4fr 8fr; align-items: start; }
  .span-2 { grid-column: span 2; }
}
.title-rule { border-bottom: 2px solid var(--line-strong); padding-bottom: var(--space-4); margin-bottom: var(--space-6); }
.stack > * + * { margin-top: var(--space-5); }

/* Header */
.header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 72px; }
.wordmark { display: inline-block; line-height: 0; }
.wordmark img { width: 148px; height: auto; }
.nav { display: none; align-items: center; gap: var(--space-6); }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav a[aria-current="page"] { text-decoration-color: var(--cobalt); }
.nav-toggle { display: inline-flex; align-items: center; gap: var(--space-2); background: none; border: 2px solid var(--line-strong); color: var(--ink); padding: var(--space-2) var(--space-3); cursor: pointer; font: inherit; }
.nav-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: square; }
.header-right { display: flex; align-items: center; gap: var(--space-3); }
@media (min-width: 900px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .wordmark img { width: 172px; }
  .header-right { gap: var(--space-5); }
}
.drawer { display: none; border-top: 1px solid var(--line); background: var(--surface); }
.drawer[data-open] { display: block; }
.drawer a { display: block; padding: var(--space-4) var(--gutter); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.drawer a[aria-current="page"] { color: var(--cobalt); }
@media (min-width: 900px) { .drawer { display: none !important; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: var(--space-3) var(--space-5); border: 2px solid transparent; border-radius: var(--radius-0); cursor: pointer; text-decoration: none; transition: background-color 120ms, color 120ms, border-color 120ms; font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; }
.btn-primary { background: var(--cobalt); color: var(--on-cobalt); border-color: var(--cobalt); }
.btn-primary:hover { background: var(--cobalt-strong); border-color: var(--cobalt-strong); color: var(--on-cobalt); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--ink); color: var(--surface); }
.btn-ghost { background: transparent; color: var(--cobalt); border-color: transparent; padding-left: 0; padding-right: 0; min-height: 0; }
.btn-ghost:hover { color: var(--cobalt-strong); text-decoration: underline; text-underline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Hero */
.hero { padding-top: var(--space-7); padding-bottom: var(--space-8); }
.hero .lead { margin-top: var(--space-6); }
.hero .actions { margin-top: var(--space-6); }
.hero-media { margin-top: var(--space-7); }
@media (min-width: 900px) {
  .hero { padding-top: var(--space-8); padding-bottom: var(--space-9); }
  .hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-7); align-items: end; }
  /* A long headline word must not squeeze the photo: fixed 7:5 columns, headline sized to its column.
     --fit on the h1 is 100 / (width of its longest word in em), a little under. */
  .hero-grid--fit { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hero-grid--fit > :first-child { container-type: inline-size; }
  .hero-grid--fit .display-xl { font-size: min(clamp(52px, 9vw, 96px), var(--fit, 14cqi)); }
  .hero-media { margin-top: 0; }
}
.hero-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Hero variants (see hero-variations.html) */
.hv-label { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--gutter); border-top: 2px solid var(--line-strong); border-bottom: 1px solid var(--line); background: var(--surface-sunken); }

/* B: full-bleed photo under the statement */
.hero--bleed .hero-bleed { margin-top: var(--space-7); }
.hero--bleed .hero-bleed img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 35%; }
@media (max-width: 899px) { .hero--bleed .hero-bleed img { aspect-ratio: 4 / 3; } }

/* C: poster bands */
.hero--poster .poster-top { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.hero--poster .poster-top .display-xl { font-size: clamp(56px, 11vw, 136px); max-width: none; }
.hero--poster .poster-bottom { padding-top: var(--space-7); padding-bottom: var(--space-8); }
.hero--poster .poster-grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .hero--poster .poster-grid { grid-template-columns: 7fr 5fr; align-items: center; } }

/* D: split, photo full height */
.hero--split { padding: 0; }
.hero--split .split { display: grid; }
.hero--split .split-copy { padding: var(--space-8) 0; }
.hero--split .split-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 900px) {
  .hero--split .split { grid-template-columns: 6fr 6fr; gap: var(--space-7); align-items: center; }
  .hero--split .split-copy { padding: var(--space-9) 0; }
  .hero--split .split-photo { align-self: stretch; }
  .hero--split .split-photo img { height: 100%; aspect-ratio: auto; min-height: 560px; max-height: 760px; }
}

/* E: type only, facts under a rule */
.hero--type .display-xl { font-size: clamp(60px, 13.5vw, 176px); line-height: 0.86; max-width: none; }
.hero--type .type-row { display: grid; gap: var(--space-6); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 2px solid var(--line-strong); }
@media (min-width: 900px) { .hero--type .type-row { grid-template-columns: 7fr 5fr; align-items: start; } }
.hero--type .type-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-7); }
.hero--type .type-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.hero-note { margin: var(--space-4) 0 0; max-width: 56ch; }
.hero-proof { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); color: var(--ink-muted); }
.hero-proof li { display: flex; align-items: center; gap: var(--space-2); }
.hero-proof li::before { content: ""; width: 6px; height: 6px; background: var(--cobalt); flex: none; }
.hero-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (min-width: 900px) { .hero-options { grid-template-columns: repeat(6, 1fr); gap: var(--space-4); } }

/* F: tar panel over the photo */
.hero--panel { padding: 0; position: relative; }
.hero--panel .panel-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 75% 40%; }
.hero--panel .panel { padding: var(--space-6) var(--gutter) var(--space-7); }
@media (min-width: 900px) {
  .hero--panel .panel-photo img { aspect-ratio: 21 / 9; min-height: 620px; }
  .hero--panel .panel { position: absolute; left: var(--gutter); bottom: var(--space-8); width: min(560px, 48%); padding: var(--space-6); }
}
.hero--panel .panel .display-l { font-size: clamp(40px, 5vw, 56px); }
.photo { position: relative; }
.photo img { width: 100%; object-fit: cover; }
.photo--portrait img { aspect-ratio: 4 / 5; }
.photo--wide img { aspect-ratio: 3 / 2; }
.photo--square img { aspect-ratio: 1 / 1; }
.photo figcaption { margin-top: var(--space-2); }

/* Trust bar */
.trust { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding: var(--space-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; margin: 0; max-width: none; }
.trust li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; font-weight: 500; margin: 0; }
.trust svg { width: 18px; height: 18px; stroke: var(--cobalt); fill: none; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; flex: none; }

/* Programme cards */
.prog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }
.prog { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-4); padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); min-height: 280px; min-width: 0; }
.prog h3 { font-size: 20px; font-stretch: 100%; font-weight: 800; letter-spacing: 0; line-height: 1.1; white-space: nowrap; overflow-wrap: normal; }
.prog p { margin: 0; }
.prog-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.prog--soon { background: var(--surface-sunken); }

/* Tag */
.tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); white-space: nowrap; }
.tag-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: currentColor; }
.tag--cobalt { color: var(--cobalt); border-color: var(--cobalt); background: var(--cobalt-tint); }
.tag--success { color: var(--success); border-color: var(--success); }

/* Pathway */
.path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--line-strong); }
.path-step { padding: var(--space-5) var(--space-4) var(--space-5) 0; display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.path-step + .path-step { padding-left: var(--space-4); border-left: 1px solid var(--line); }
.path-marker { width: 28px; height: 28px; border-radius: var(--radius-pill); border: 2px solid var(--line-strong); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--ink); background: var(--surface); }
.path-step--active .path-marker { background: var(--cobalt); border-color: var(--cobalt); color: var(--on-cobalt); }
.path-role { color: var(--ink-muted); }
.path-who { font-size: 24px; line-height: 1; letter-spacing: -0.01em; font-stretch: 112%; font-weight: 800; }
.path-does { margin: 0; font-size: 15px; line-height: 22px; }
.path-sentence { margin: var(--space-4) 0 0; grid-column: 1 / -1; }
@media (max-width: 640px) {
  .path { grid-template-columns: 1fr; border-top: 0; }
  .path-step { padding: var(--space-4) 0; border-top: 2px solid var(--line-strong); }
  .path-step + .path-step { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .path[data-reveal] .path-step { opacity: 0; transform: translateY(6px); transition: opacity 240ms ease, transform 240ms ease; }
  .path[data-reveal] .path-step:nth-child(2) { transition-delay: 80ms; }
  .path[data-reveal] .path-step:nth-child(3) { transition-delay: 160ms; }
  .path[data-reveal="done"] .path-step { opacity: 1; transform: none; }
}

/* Facts (numerals) */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-5); border-top: 2px solid var(--line-strong); padding-top: var(--space-5); }
.facts .numeral { display: block; margin-bottom: var(--space-2); }
.facts p { margin: 0; }

/* Bands */
.band { padding-top: var(--section); padding-bottom: var(--section); }
.band .display { max-width: 12ch; }
.band-grid { display: grid; gap: var(--space-7); }
@media (min-width: 900px) {
  .band-grid { grid-template-columns: 6fr 6fr; align-items: center; }
  .band-grid--media { grid-template-columns: 5fr 7fr; align-items: end; }
}

/* Checklist / definition lists */
.list-plain { list-style: none; padding: 0; margin: 0; max-width: none; }
.list-plain li { padding: var(--space-4) 0; border-top: 1px solid var(--line); margin: 0; display: grid; gap: var(--space-1); }
.list-plain li:last-child { border-bottom: 1px solid var(--line); }
.list-plain strong { font-weight: 600; }
.two-col { columns: 1; }
@media (min-width: 900px) { .two-col { columns: 2; column-gap: var(--space-7); } .two-col p { break-inside: avoid; } }

/* FAQ */
.faq { border-top: 2px solid var(--line-strong); max-width: none; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-weight: 700; color: var(--cobalt); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 0 var(--space-5); }
.faq .answer p:last-child { margin-bottom: 0; }

/* Price table */
.price { border-top: 2px solid var(--line-strong); max-width: none; }
.price-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.price-row .numeral { font-size: 28px; line-height: 32px; }
.price-row p { margin: 0; }

/* Note */
.note { background: var(--cobalt-tint); color: var(--ink); padding: var(--space-4) var(--space-5); border-left: 0; }
.note p { margin: 0; }

/* Form */
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.input { font: inherit; font-size: 17px; line-height: 26px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line); padding: var(--space-3) var(--space-4); width: 100%; min-height: 52px; }
.input:focus { border: 2px solid var(--line-strong); padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px); outline: none; }
.help { color: var(--ink-muted); }
.choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--line); background: var(--surface-raised); cursor: pointer; font-size: 15px; line-height: 22px; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice:has(input:checked) { border: 2px solid var(--cobalt); background: var(--cobalt-tint); padding: calc(var(--space-2) - 1px) calc(var(--space-4) - 1px); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.check { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: start; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--cobalt); }

/* Footer */
.footer { padding-top: var(--space-8); padding-bottom: var(--space-7); }
.footer-grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer h4 { margin: 0 0 var(--space-3); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin: 0 0 var(--space-2); }
.footer a { color: var(--ink); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .wordmark img { width: 172px; }
.legal { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); display: grid; gap: var(--space-3); }
.legal p { max-width: 80ch; margin: 0; }

/* Photo directions page */
.dir-grid { display: grid; gap: var(--space-5); }
.dir-copy p { margin-top: var(--space-4); }
.dir-copy .caption { color: var(--ink-muted); }
@media (min-width: 900px) { .dir-grid { grid-template-columns: 4fr 4fr 4fr; gap: var(--space-6); align-items: start; } }

/* Pre-check, Frank talk and legal pages */
.precheck .result[hidden] { display: none; }
.precheck .result { margin-top: var(--space-6); outline: none; }
.precheck .result h2 { margin-bottom: var(--space-3); }
.kb { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.kb li { border-bottom: 1px solid var(--line); }
.kb a { display: block; padding: var(--space-5) 0; color: inherit; text-decoration: none; }
.kb a:hover h3 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--cobalt); }
.kb p { margin-top: var(--space-2); }
.article { max-width: 70ch; }
.article p + p { margin-top: var(--space-4); }
.legal-doc { max-width: 76ch; }
.legal-doc h2 { margin-top: var(--space-7); }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc p { margin-top: var(--space-3); }
.legal-doc .list-plain { margin-top: var(--space-4); }

/* Hero entry on the home page: a question, one button per open programme, a reassurance line */
.hero-pick { margin-top: var(--space-6); }
.hero-pick .label { color: var(--ink-muted); }
.hero-pick .actions { margin-top: var(--space-3); }
.hero-pick .body-s { margin: var(--space-4) 0 0; }