/* ═══════════════════════════════════════════════════════════════════
   LangNation — one stylesheet for the whole site.

   Design tokens are copied from the LangNation Dictionary (langnation.de)
   so the two properties read as one brand: the same navy and gold, the
   same Fraunces display face, the same paper background and the same
   light/dark behaviour.

   Structure:
     1  Tokens          6  Buttons & pills
     2  Reset & base    7  Cards & grids
     3  Layout          8  Prose (migrated HTML)
     4  Header & nav    9  Forms
     5  Hero           10  Footer, utilities, motion
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────────── */
:root {
  --paper:       #f4f6fb;
  --paper2:      #e8edf7;
  --card:        #ffffff;
  --soft:        #f0f3fb;
  --ink:         #0f1f47;
  --muted:       #5e6f90;
  --line:        #d0d8ea;
  --line2:       #b8c4dc;
  --navy:        #0B2D52;
  --navy-ink:    #ffffff;
  /* The footer is a dark band in BOTH themes, so it cannot use --navy:
     that token is an accent colour and inverts to a light blue in dark
     mode, which turned the footer into a pale panel with the white logo
     sitting on it. These two stay dark whatever the theme. */
  --footer-bg:   #0B2D52;
  --footer-ink:  #ffffff;
  /* Straight off the designer's brand sheet, so the page and the seal are
     the same two colours. --gold is the real brand gold and it is bright:
     it works as a SURFACE (with --on-gold written on it) and as ink on
     dark grounds, but at 1.94:1 it is unreadable as text on the light
     page. Gold-coloured text, borders and thin fills therefore use
     --gold-ink, the same hue darkened until it clears 4.5:1 — and which
     flips to the bright gold in dark mode, where bright is the readable
     one. So every rule can name one of the two and be right in both
     themes. */
  --gold:        #D4AF37;
  --gold-ink:    #816b22;
  --on-gold:     #0B2D52;
  --gold-soft:   #F8F1E3;
  --accent:      #1e6b8a;
  --danger:      #a3341f;
  --ok:          #1f6b4a;
  --shadow-sm:   0 1px 2px rgba(15, 31, 71, 0.06), 0 2px 8px rgba(15, 31, 71, 0.05);
  --shadow-md:   0 2px 6px rgba(15, 31, 71, 0.07), 0 12px 28px rgba(15, 31, 71, 0.09);
  --grad1:       #eef2ff;
  --grad2:       #e8edf8;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  --wrap: 1120px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(3.5rem, 9vw, 6.5rem);
}

/* The warm alternative to the cool blue ground above, switched on with
   PAGE_GROUND=cream in .env. It exists because the seal's own field is a
   warm cream (#F0E8D0 sampled off the artwork), which reads slightly like a
   sticker applied to a cool blue page.

   Every value here is set against the darkest cream surface rather than the
   page, because a card on a panel on the page is where contrast actually
   runs out: --muted had to go to #546484 to clear 4.5:1 on --gold-soft, and
   --gold-soft itself had to go deeper than the page or the gold panels
   simply vanished into it. */
:root[data-ground="cream"] {
  --paper:       #F8F1E3;
  --paper2:      #F1E8D6;
  --card:        #FFFCF5;
  --soft:        #F3EADA;
  --line:        #E0D5BE;
  --line2:       #CFC0A2;
  --muted:       #546484;
  --gold-ink:    #796520;
  --gold-soft:   #F0E4CC;
  --grad1:       #FDF8EE;
  --grad2:       #F4EBD9;
  /* Navy-tinted shadows look grey and dead over cream; these are warm. */
  --shadow-sm:   0 1px 2px rgba(74, 58, 26, 0.08), 0 2px 8px rgba(74, 58, 26, 0.06);
  --shadow-md:   0 2px 6px rgba(74, 58, 26, 0.09), 0 12px 28px rgba(74, 58, 26, 0.11);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #0a1628;
    --paper2:    #112040;
    --card:      #0e1c38;
    --soft:      #152348;
    --ink:       #e0e8f8;
    --muted:     #8c9dbb;
    --line:      #243356;
    --line2:     #2e4068;
    --navy:      #5b84c4;
    --navy-ink:  #06101f;
    --footer-bg: #08203C;
    --footer-ink:#e6edfb;
    --gold:      #D4AF37;
    --gold-ink:  #D4AF37;
    --on-gold:   #16110a;
    --gold-soft: #22305a;
    --accent:    #5aaac8;
    --danger:    #e08b76;
    --ok:        #6cc39a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.4);
    --grad1:     #112040;
    --grad2:     #0a1628;
  }
}

:root[data-theme="dark"] {
  --paper:     #0a1628;
  --paper2:    #112040;
  --card:      #0e1c38;
  --soft:      #152348;
  --ink:       #e0e8f8;
  --muted:     #8c9dbb;
  --line:      #243356;
  --line2:     #2e4068;
  --navy:      #5b84c4;
  --navy-ink:  #06101f;
  --footer-bg: #08203C;
  --footer-ink:#e6edfb;
  --gold:      #D4AF37;
  --gold-ink:  #D4AF37;
  --on-gold:   #16110a;
  --gold-soft: #22305a;
  --accent:    #5aaac8;
  --danger:    #e08b76;
  --ok:        #6cc39a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.4);
  --grad1:     #112040;
  --grad2:     #0a1628;
}

/* ── 2. Reset & base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, var(--grad1) 0%, transparent 60%),
    radial-gradient(1000px 500px at 110% 0%, var(--grad2) 0%, transparent 55%),
    var(--paper);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
h4 { font-size: 1.05rem; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--gold); color: var(--on-gold); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--navy-ink);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ── 3. Layout ───────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: 760px; }

.section { padding-block: var(--section); }
.section-tight { padding-block: clamp(2.5rem, 6vw, 4rem); }
.section-alt { background: var(--paper2); }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.75rem;
}

.lead {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--muted);
  max-width: 62ch;
  text-wrap: pretty;
}

.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 + .lead { margin-top: 0.85rem; }

.rule {
  height: 1px;
  border: 0;
  background: var(--line);
  margin-block: clamp(2rem, 5vw, 3.5rem);
}

/* ── 4. Header & navigation ──────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--paper); }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 84px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex: 0 0 auto;
  margin-right: auto;
}

/* The logo carries the wordmark, so height is the only dimension that
   matters; width follows the artwork's 2.54:1 ratio. */
.brand img {
  height: 60px;
  width: auto;
  max-width: none;
}

/* Both versions are in the markup and CSS picks one, so the correct logo is
   painted on the very first frame — swapping `src` from JavaScript would show
   the wrong one until the script ran. The two files are built to the same
   canvas by tools/build-logos.js, so the header keeps its width either way. */
.brand .logo-dark { display: none; }
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .logo-light { display: none; }
  :root:not([data-theme="light"]) .brand .logo-dark { display: block; }
}

/* The footer is navy in both themes, so it always shows the white logo. */
.brand-footer img { height: 68px; display: block !important; }

.brand-sub {
  font-size: 0.63rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav { display: none; }

/* Direct child only. `.nav ul` would also match the dropdown lists — they
   are <ul>s inside .nav too — and lay them out as an inline flex row, which
   is exactly what happened the first time. */
.nav > ul { display: flex; align-items: center; gap: 0.15rem; list-style: none; }
.nav > ul > li { list-style: none; }
.nav a {
  display: block;
  padding: 0.55rem 0.8rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.nav a:hover { background: var(--soft); }
.nav a[aria-current="page"] { color: var(--navy); background: var(--soft); }
:root[data-theme="dark"] .nav a[aria-current="page"],
:root:not([data-theme="light"]) .nav a[aria-current="page"] { color: var(--gold); }

/* ── Dropdown groups ─────────────────────────────────────────────────
   The trigger is a <button>, so it is reachable by keyboard and announced
   as a menu — the old site used dead "#" links that went nowhere. Opens on
   hover for mice and on click/Enter for everything else. */
.has-menu { position: relative; }

.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.55rem 0.7rem;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.menu-trigger svg { width: 13px; height: 13px; opacity: 0.55; transition: transform 0.15s ease; }
.menu-trigger:hover { background: var(--soft); }
.menu-trigger[data-current] { color: var(--navy); background: var(--soft); }
:root[data-theme="dark"] .menu-trigger[data-current] { color: var(--gold); }
.menu-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav .submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 120;
  min-width: 232px;
  padding: 0.4rem;
  margin: 0;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  display: none;
}
.nav .has-menu:hover .submenu,
.nav .has-menu:focus-within .submenu,
.nav .menu-trigger[aria-expanded="true"] + .submenu { display: block; }

.nav .submenu li { display: block; list-style: none; }
.nav .submenu a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav .submenu a:hover { background: var(--soft); }
.nav .submenu a[aria-current="page"] { color: var(--navy); background: var(--soft); }
:root[data-theme="dark"] .nav .submenu a[aria-current="page"] { color: var(--gold); }

/* Separates a related-but-different item, e.g. the placement test under
   the course list. */
.nav .submenu-divider { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid var(--line); }

/* Keep the last menu from opening off the right edge. */
.nav > ul > li:last-of-type .submenu,
.nav > ul > li:nth-last-of-type(2) .submenu { left: auto; right: 0; }

.header-actions { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink);
}
.icon-btn:hover { border-color: var(--line2); }
.icon-btn svg { width: 18px; height: 18px; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 40px;
  padding-inline: 0.7rem;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.lang-btn:hover { border-color: var(--line2); }

.nav-toggle { display: inline-grid; }

/* Mobile drawer.
   A <dialog> gets `width/height: fit-content; margin: auto` from the UA
   stylesheet, which collapses an absolutely-positioned child to nothing.
   Every one of these declarations is undoing that. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  color: var(--ink);
}
.drawer[open] { display: block; }
.drawer::backdrop { background: rgba(10, 22, 40, 0.5); }
.drawer-panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(340px, 88vw);
  background: var(--paper);
  border-left: 1px solid var(--line);
  padding: 1.25rem var(--gutter) 2rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  animation: slide-in 0.22s ease;
}
@keyframes slide-in { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .drawer-panel { animation: none; } }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.drawer-head img { height: 38px; width: auto; max-width: none; }
.drawer-head .logo-dark { display: none; }
:root[data-theme="dark"] .drawer-head .logo-light { display: none; }
:root[data-theme="dark"] .drawer-head .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .drawer-head .logo-light { display: none; }
  :root:not([data-theme="light"]) .drawer-head .logo-dark { display: block; }
}
.drawer a.drawer-link {
  display: block;
  padding: 0.8rem 0.6rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.drawer a.drawer-link:hover { background: var(--soft); }

/* Drawer groups use <details>, so they open and close without any script. */
.drawer-group { border-bottom: 1px solid var(--line); }
.drawer-group > summary {
  padding: 0.8rem 0.6rem;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 500;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer-group > summary::-webkit-details-marker { display: none; }
.drawer-group > summary::after {
  content: "+";
  color: var(--gold-ink);
  font-size: 1.3rem;
  line-height: 1;
}
.drawer-group[open] > summary::after { content: "−"; }
.drawer-group > summary:hover { background: var(--soft); }

.drawer a.drawer-sublink {
  display: block;
  padding: 0.6rem 0.6rem 0.6rem 1.5rem;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--muted);
  border-radius: var(--r-sm);
}
.drawer a.drawer-sublink:hover { background: var(--soft); color: var(--ink); }
.drawer a.drawer-sublink[aria-current="page"] { color: var(--navy); font-weight: 600; }
:root[data-theme="dark"] .drawer a.drawer-sublink[aria-current="page"] { color: var(--gold); }
.drawer .btn { margin-top: 1rem; }

@media (min-width: 1040px) {
  .nav { display: block; }
  .nav-toggle { display: none; }
}

/* Below the desktop breakpoint the header has to fit brand + actions on a
   360px phone. Everything hidden here is still reachable in the drawer, so
   nothing is lost — it just stops the row overflowing. */
@media (max-width: 1039px) {
  .lang-btn { display: none; }
}
@media (max-width: 560px) {
  .brand img { height: 48px; }
  .brand-sub { display: none; }
  .header-inner { min-height: 60px; gap: .5rem; }
  .header-actions { gap: .3rem; }
}
@media (max-width: 400px) {
  /* The drawer's full-width "Request a call back" takes over from here. */
  .header-actions > .btn { display: none; }
}

/* ── 5. Hero ─────────────────────────────────────────────────────── */
.hero { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.5rem, 6vw, 4rem); }
.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}
.hero h1 span { color: var(--gold-ink); display: block; }
.hero .lead { margin-top: 1.15rem; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.9rem;
}

.hero-art {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  background: var(--soft);
}
.hero-art img { width: 100%; height: 100%; object-fit: cover; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.stat {
  background: var(--card);
  padding: 1.15rem 1rem;
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
}
:root[data-theme="dark"] .stat b { color: var(--gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat b { color: var(--gold); }
}
.stat span {
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── 6. Buttons & pills ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: var(--navy);
  color: var(--navy-ink);
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
  min-height: 46px;
}
.btn:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line2);
}
.btn-ghost:hover { background: var(--card); }

.btn-gold { background: var(--gold); color: var(--on-gold); }
:root[data-theme="dark"] .btn-gold { color: #16110a; }

.btn-block { width: 100%; }
.btn-sm { padding: 0.5rem 0.95rem; min-height: 38px; font-size: 0.86rem; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.24rem 0.62rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--line2);
  background: var(--soft);
  color: var(--muted);
  white-space: nowrap;
}
.pill-level { background: var(--gold-soft); border-color: var(--gold-ink); color: var(--gold-ink); }
.pill-live { background: var(--soft); border-color: var(--ok); color: var(--ok); }

/* Filter chips */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.filter-group { display: flex; flex-direction: column; gap: 0.55rem; }
.filter-group > span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--card);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink);
  min-height: 36px;
}
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--navy-ink);
}

/* ── 7. Cards & grids ────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.18s ease, border-color 0.15s ease;
}
a.card { text-decoration: none; color: inherit; }
a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line2);
}
@media (prefers-reduced-motion: reduce) { a.card:hover { transform: none; } }

.card-media {
  aspect-ratio: 16 / 10;
  background: var(--soft);
  overflow: hidden;
  position: relative;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media .pill { position: absolute; top: 0.7rem; left: 0.7rem; background: var(--card); }

/* Keeps a card without a photo the same height as its neighbours. */
.card-media-blank {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--soft), var(--paper2));
  border-bottom: 1px solid var(--line);
}
.card-media-blank img { width: 48px; height: 48px; object-fit: contain; opacity: 0.35; }

.card-body {
  padding: 1.15rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.card-body h3 { font-size: 1.18rem; }
.card-body p { color: var(--muted); font-size: 0.92rem; }
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.55rem;
}
.card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  margin-top: 0.35rem;
}
.price {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
}
:root[data-theme="dark"] .price { color: var(--gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .price { color: var(--gold); }
}
.price small { font-size: 0.72rem; font-weight: 500; color: var(--muted); font-family: var(--ui); }
.card-foot .go { font-size: 0.85rem; font-weight: 600; color: var(--accent); }

/* Feature list */
.feature {
  display: flex;
  gap: 0.9rem;
  padding: 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.feature-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--gold-soft);
  color: var(--gold-ink);
}
.feature-icon svg { width: 20px; height: 20px; }
.feature h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.feature p { font-size: 0.9rem; color: var(--muted); }

/* Testimonials */
.quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  break-inside: avoid;
}
.quote blockquote {
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.7;
}
.quote blockquote::before { content: "\201C"; color: var(--gold-ink); font-family: var(--display); font-size: 1.6em; line-height: 0; vertical-align: -0.25em; margin-right: 0.1em; }
.quote figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.quote img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.quote .who { line-height: 1.3; }
.quote .who b { display: block; font-size: 0.92rem; }
.quote .who span { font-size: 0.8rem; color: var(--muted); }

@media (min-width: 760px) {
  .quotes { columns: 2; column-gap: 1.5rem; }
  .quotes .quote { margin-bottom: 1.5rem; }
}
@media (min-width: 1040px) {
  .quotes { columns: 3; }
}

/* Call-to-action band */
.band {
  background: var(--navy);
  color: var(--navy-ink);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.band h2 { color: inherit; }
.band p { color: color-mix(in srgb, var(--navy-ink) 78%, transparent); margin: 0.9rem auto 1.8rem; max-width: 52ch; }
.band .btn { background: var(--gold); color: var(--on-gold); }

/* Course detail sidebar */
.detail-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 960px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
  .detail-aside { position: sticky; top: 92px; }
}
.facts {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.facts h3 { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
.facts dl { display: grid; }
.facts div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.72rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.facts dt { color: var(--muted); }
.facts dd { font-weight: 600; text-align: right; }
.facts .facts-cta { padding: 1.15rem 1.25rem; border-bottom: 0; display: block; }

/* Tabs on the course page */
.tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 1.75rem; }
.tab {
  padding: 0.7rem 1.05rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--muted);
}
.tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--gold-ink); }
:root[data-theme="dark"] .tab[aria-selected="true"] { color: var(--gold); }
.tab-panel[hidden] { display: none; }

/* Accordion (FAQ) */
.acc { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow: hidden; }
.acc details { border-bottom: 1px solid var(--line); }
.acc details:last-child { border-bottom: 0; }
.acc summary {
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.98rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; color: var(--gold-ink); font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }
.acc details[open] summary::after { content: "\2212"; }
.acc summary:hover { background: var(--soft); }
.acc .acc-body { padding: 0 1.25rem 1.25rem; }

/* ── Team ────────────────────────────────────────────────────────── */
.person { overflow: hidden; }
.person-photo {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--soft), var(--paper2));
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-photo .person-fallback { width: 64px; height: 64px; object-fit: contain; opacity: 0.3; }
.person-name { font-size: 1.1rem; }
.person-role {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.person-bio { font-size: 0.88rem; color: var(--muted); }
.person-links { display: flex; gap: 0.45rem; margin-top: auto; padding-top: 0.9rem; }
.person-links a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
}
.person-links a:hover { border-color: var(--navy); color: var(--navy); }
.person-links svg { width: 15px; height: 15px; }

/* ── Events ──────────────────────────────────────────────────────── */
.events-heading {
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.event { flex-direction: row; align-items: stretch; }
.event-date {
  flex: 0 0 88px;
  display: grid;
  place-content: center;
  gap: 0.1rem;
  text-align: center;
  background: var(--navy);
  color: var(--navy-ink);
  padding: 1rem 0.5rem;
}
.event-day { font-family: var(--display); font-size: 1.9rem; font-weight: 600; line-height: 1; }
.event-month { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.event-year { font-size: 0.68rem; opacity: 0.6; }
.event-body { padding: 1.15rem 1.35rem 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.event-text { max-width: none; font-size: 0.9rem; }
.event-text p { color: var(--muted); }

@media (max-width: 520px) {
  .event { flex-direction: column; }
  .event-date { flex: none; flex-direction: row; gap: 0.4rem; padding: 0.6rem; grid-auto-flow: column; place-content: center; }
  .event-day { font-size: 1.2rem; }
}

/* ── Gallery ─────────────────────────────────────────────────────── */
.gallery { columns: 1; column-gap: clamp(0.75rem, 2vw, 1.25rem); }
@media (min-width: 600px) { .gallery { columns: 2; } }
@media (min-width: 900px) { .gallery { columns: 3; } }

.gallery-item {
  break-inside: avoid;
  margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.gallery-item img { width: 100%; height: auto; }
.gallery-item figcaption {
  padding: 0.7rem 0.95rem 0.85rem;
  display: grid;
  gap: 0.15rem;
  font-size: 0.85rem;
}
.gallery-item figcaption span { color: var(--muted); font-size: 0.8rem; }

/* ── Placement test: track chooser ───────────────────────────────── */
.track-card .card-body { gap: 0.75rem; }
.track-range {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
}
:root[data-theme="dark"] .track-range { color: var(--gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .track-range { color: var(--gold); }
}

/* ── Placement test: step indicator ──────────────────────────────── */
.steps {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  flex-wrap: wrap;
}
.steps li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.steps li + li::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--line2);
  margin-right: 0.35rem;
}
.step-n {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  background: var(--card);
  font-size: 0.75rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.step-n svg { width: 12px; height: 12px; }
.steps .now { color: var(--ink); font-weight: 600; }
.steps .now .step-n { background: var(--navy); border-color: var(--navy); color: var(--navy-ink); }
.steps .done .step-n { background: var(--ok); border-color: var(--ok); color: #fff; }

@media (max-width: 460px) {
  .step-label { display: none; }
  .steps li + li::before { width: 14px; }
}

/* ── Placement test: the terms ───────────────────────────────────── */
/* Scrollable rather than a link, so accepting them means having had them
   in front of you. */
.terms-box {
  max-width: none;
  max-height: 46vh;
  overflow-y: auto;
  padding: 1.25rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  font-size: 0.9rem;
  -webkit-overflow-scrolling: touch;
}
.terms-box h2, .terms-box h3 { font-size: 1.05rem; margin-top: 1.4em; }
.terms-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Placement test: the paper ───────────────────────────────────── */
.quiz-progress {
  position: sticky;
  top: 68px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.quiz-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.quiz-bar > span { display: block; height: 100%; width: 0; background: var(--gold-ink); transition: width 0.25s ease; }

.quiz { list-style: none; display: grid; gap: 1rem; margin-top: 0.5rem; }

/* The reading text, printed once above the questions that follow it. */
.quiz-passage { list-style: none; margin-top: 1.25rem; }
.quiz-passage article {
  padding: 1.35rem 1.5rem 1.5rem;
  background: var(--soft);
  border: 1px solid var(--line2);
  border-left: 3px solid var(--gold-ink);
  border-radius: var(--r);
}
.quiz-passage h2 { font-size: 1.15rem; margin-bottom: 0.7rem; }
.quiz-passage p { font-size: 0.98rem; line-height: 1.75; white-space: pre-line; }
.quiz-passage p + p { margin-top: 0.85em; }

/* Questions that belong to a passage sit visibly under it. */
.quiz-item.is-reading fieldset { border-left: 3px solid var(--line2); }
.quiz-item fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  padding: 1.1rem 1.25rem 1.25rem;
}
/* A question the visitor has answered recedes, so the eye lands on what
   is still outstanding. */
.quiz-item[data-answered] fieldset { border-color: var(--line); opacity: 0.62; }
.quiz-item[data-answered]:hover fieldset,
.quiz-item[data-answered]:focus-within fieldset { opacity: 1; }

.quiz-item legend { display: flex; gap: 0.65rem; align-items: baseline; padding: 0; }
.quiz-n {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--soft);
  border: 1px solid var(--line2);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  flex: 0 0 auto;
}
.quiz-item[data-answered] .quiz-n { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.quiz-prompt { font-size: 1rem; font-weight: 500; line-height: 1.5; }

.quiz-options { display: grid; gap: 0.4rem; margin-top: 0.9rem; }
.quiz-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 0.94rem;
  min-height: 44px;
}
.quiz-option:hover { border-color: var(--line2); background: var(--soft); }
.quiz-option input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--navy); }
.quiz-option:has(input:checked) {
  border-color: var(--navy);
  background: color-mix(in srgb, var(--navy) 7%, transparent);
  font-weight: 500;
}

@media (min-width: 620px) {
  .quiz-options { grid-template-columns: 1fr 1fr; }
}

/* ── Placement test: the result ──────────────────────────────────── */
.level-card {
  display: grid;
  gap: 0.3rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--navy);
  color: var(--navy-ink);
  border-radius: var(--r-lg);
  margin: 1.5rem 0 2rem;
  text-align: center;
}
.level-label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.72; }
.level-value { font-family: var(--display); font-size: clamp(3.5rem, 12vw, 5.5rem); font-weight: 600; line-height: 1; }
.level-score { font-size: 0.95rem; opacity: 0.85; }
.level-mastered { font-size: 0.85rem; opacity: 0.65; }

.result-h2 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); margin: 2.25rem 0 1rem; }

.level-rows { list-style: none; display: grid; gap: 0.5rem; }
.level-rows li {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.level-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.level-bar > span { display: block; height: 100%; border-radius: 3px; }
.level-num { font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.level-verdict { font-size: 0.78rem; color: var(--muted); min-width: 68px; text-align: right; }

@media (max-width: 480px) {
  .level-rows li { grid-template-columns: auto 1fr auto; }
  .level-verdict { display: none; }
}

/* ── Placement test (legacy free-text sections, kept for reference) ─ */
.test-section {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  padding: 1.25rem 1.4rem 1.5rem;
  margin-bottom: 1.5rem;
}
.test-section legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0 0.5rem;
}
.test-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-gold);
  font-family: var(--ui);
  font-size: 0.8rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.test-question { max-width: none; font-size: 0.92rem; margin: 1rem 0 0.85rem; }
.test-question p { margin-top: 0.5em; }
.test-section .field + .prose { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.test-section textarea { font-family: var(--ui); min-height: 76px; }

/* Download lists (practice exams, study material) */
.publisher {
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.4rem 0 0.6rem;
}
.publisher:first-child { margin-top: 0; }

.papers { list-style: none; display: grid; gap: 0.5rem; }
.papers li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.7rem 0.95rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.papers .paper-name { font-size: 0.92rem; font-weight: 500; min-width: 0; }
.papers .paper-links { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.papers .btn { gap: 0.35rem; }

/* Inside a card the rows are already on a panel — lighten them. */
.card .papers li { background: var(--soft); }

@media (max-width: 460px) {
  .papers li { flex-direction: column; align-items: stretch; }
  .papers .paper-links { justify-content: flex-start; }
}

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.84rem; color: var(--muted); margin-bottom: 1.15rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span::after { content: "/"; margin-left: 0.4rem; opacity: 0.5; }

/* Notice */
.notice {
  display: flex;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line2);
  border-left: 3px solid var(--gold-ink);
  background: var(--soft);
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.notice-ok { border-left-color: var(--ok); }
.notice-bad { border-left-color: var(--danger); color: var(--danger); }

/* ── 8. Prose (migrated HTML lives here) ─────────────────────────── */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 2em; }
.prose h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); margin-top: 1.8em; }
.prose h4 { margin-top: 1.5em; }
.prose p { text-wrap: pretty; }
.prose a { color: var(--accent); text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose img { border-radius: var(--r-sm); margin-inline: auto; }
.prose strong, .prose b { font-weight: 650; }
.prose blockquote {
  border-left: 3px solid var(--gold-ink);
  padding: 0.4rem 0 0.4rem 1.15rem;
  color: var(--muted);
  font-style: italic;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2em; }
.prose code {
  background: var(--soft);
  padding: 0.12em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Migrated tables must scroll rather than break the page */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-sm); }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.9rem; min-width: 480px; }
.prose th, .prose td { padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose thead th { background: var(--soft); font-weight: 650; }
.prose tbody tr:last-child td { border-bottom: 0; }

.embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--soft); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── 9. Forms ────────────────────────────────────────────────────── */
.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .form-row-2 { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.86rem; font-weight: 600; }
.field .req { color: var(--danger); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  background: var(--card);
  font-size: 1rem; /* 16px keeps iOS from zooming on focus */
  min-height: 46px;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.75; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
  outline-offset: 0;
}
.field .err { font-size: 0.8rem; color: var(--danger); }
.field[data-invalid] input,
.field[data-invalid] select,
.field[data-invalid] textarea { border-color: var(--danger); }

.check { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.87rem; color: var(--muted); }
.check input { width: 20px; height: 20px; min-height: 0; flex: 0 0 auto; margin-top: 0.15rem; accent-color: var(--navy); }

/* Honeypot — hidden from people, visible to naive bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Calculator result */
.result {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.35rem 1.5rem;
  background: var(--navy);
  color: var(--navy-ink);
  border-radius: var(--r);
  margin-top: 1.25rem;
}
.result b { font-family: var(--display); font-size: 2.4rem; font-weight: 600; line-height: 1; }
.result span { font-size: 0.9rem; opacity: 0.85; }

/* ── 10. Footer, utilities, motion ───────────────────────────────── */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  margin-top: var(--section);
}
.footer-grid {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.footer-brand { max-width: 34ch; }
.footer-brand p { font-size: 0.88rem; opacity: 0.75; margin-top: 0.85rem; }
.site-footer h4 {
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.62;
  margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; display: grid; gap: 0.55rem; }
.site-footer a { text-decoration: none; font-size: 0.9rem; opacity: 0.9; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }
.footer-bottom {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--footer-ink) 18%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.82rem;
  opacity: 0.72;
}

.social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--footer-ink) 28%, transparent);
}
.social svg { width: 16px; height: 16px; }

/* Utilities */
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.muted { color: var(--muted); }
.stack { display: grid; gap: 1rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.mt-2 { margin-top: 2rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* Reveal on scroll. Scoped to .js because it starts at opacity 0 — without
   the script to finish it, these sections would simply never appear. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Fraunces only loads on wide screens where the display face earns its bytes;
   phones fall back to the system serif, which is already installed. */
@media (max-width: 560px) {
  h1, h2, h3, h4, .price, .result b, .stat b {
    font-family: Georgia, "Times New Roman", serif;
  }
}

@media print {
  .site-header, .site-footer, .hero-actions, .drawer { display: none; }
  body { background: #fff; color: #000; }
}

/* ── Guide pages ──────────────────────────────────────────────────────
   The living-in-Germany pages are procedural: do this, then this, and
   here is what it costs. Three components carry that, and nothing on
   these pages is a wall of paragraphs.

   .keyfacts  — what you need before you start, answered at a glance
   .guide     — the numbered sequence of steps
   .cost      — what it costs, where a figure is worth isolating

   `.steps` was already taken by the placement-test breadcrumb, hence
   `.guide` for the numbered list. */

.keyfacts {
  display: grid;
  /* Four facts, four columns: auto-fit left a 3+1 row with a dead cell. */
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.75rem 0 2rem;
}
.keyfacts > div { background: var(--card); padding: 0.95rem 1.15rem; }
.keyfacts dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.keyfacts dd { margin: 0; font-weight: 600; font-size: 0.95rem; line-height: 1.4; }

.guide { list-style: none; margin: 1.5rem 0 2rem; padding: 0; counter-reset: guide; }
.guide > li {
  counter-increment: guide;
  position: relative;
  padding: 0 0 1.4rem 3rem;
  /* The line joining one step to the next. Removed on the last item so
     the sequence ends rather than trailing off. */
  border-left: 1px solid var(--line);
  margin-left: 0.85rem;
}
.guide > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.guide > li::before {
  content: counter(guide);
  position: absolute;
  left: -0.85rem;
  top: -0.15rem;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.guide > li > strong { display: block; margin-bottom: 0.3rem; font-size: 1.02rem; }
.guide > li > p:last-child { margin-bottom: 0; }

.cost {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 0.9rem 1.15rem;
  margin: 1.25rem 0;
  background: var(--soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-ink);
  border-radius: var(--r-sm);
}
.cost b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.cost span { font-size: 0.87rem; color: var(--muted); }

@media (max-width: 700px) {
  .keyfacts { grid-template-columns: 1fr 1fr; }
}