/* Landing page layout. Uses ui.css tokens only; page-specific sizes are declared here. */
:root {
  --hero-min-h: calc(90vh - var(--topbar-h));
  --fs-hero: clamp(var(--fs-hero-min), 6.4vw, var(--fs-88));
  --hero-copy-w: 34ch;
  --proof-cols: 5;
  --crop-ratio: 16 / 10;
  --crop-card-w: 300px;
  --device-phone-w: clamp(210px, 23%, 290px);
  --device-phone-w-mobile: min(72%, 280px);
  --mock-zoom: 0.62;
  --classboard-bar: 7rem;
  --compare-min-w: 34rem;
  --wordmark-bar-h: 1.1em;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  border-bottom: var(--bw) solid transparent;
  background: var(--paper);
  transition: border-color var(--t) var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; gap: var(--s-6); min-height: var(--topbar-h); }
.wordmark { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-size: var(--fs-22); font-weight: 700; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.wordmark__bar { display: inline-block; width: calc(var(--wordmark-bar-h) * 1.34); height: var(--wordmark-bar-h); flex: none; background: url("../brand/logo-mark.svg") center / contain no-repeat; }
[data-theme="dark"] .wordmark__bar { background-image: url("../brand/logo-mark-cream.svg"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wordmark__bar { background-image: url("../brand/logo-mark-cream.svg"); } }
.nav__links { display: flex; gap: var(--s-1); }
.nav__links a { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--s-3); border-radius: var(--r-control); color: var(--muted); font-weight: 500; text-decoration: none; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.nav__links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.nav__actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.nav__toggle { display: none; margin-left: auto; }

.nav-sheet {
  width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; inset: 0;
  padding: var(--s-4) var(--s-5) max(var(--s-5), env(safe-area-inset-bottom));
  border: 0; background: var(--paper); color: var(--ink);
}
.nav-sheet[open] { display: flex; flex-direction: column; animation: modal-in var(--t) var(--ease); }
.nav-sheet::backdrop { background: var(--paper); }
.nav-sheet__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--touch); }
.nav-sheet__links { display: flex; flex-direction: column; margin-top: var(--s-6); }
.nav-sheet__links a { display: flex; align-items: center; min-height: var(--s-8); border-bottom: var(--bw) solid var(--line); font-family: var(--font-display); font-size: var(--fs-36); font-weight: 700; text-decoration: none; }
.nav-sheet__actions { display: grid; gap: var(--s-3); margin-top: auto; padding-top: var(--s-6); }

/* ---------- Hero ---------- */
/* overflow-x: clip keeps the board's blurred glow (inset -6%) from widening the page on narrow screens. */
.hero { position: relative; display: grid; align-items: center; min-height: var(--hero-min-h); padding-block: var(--s-8); isolation: isolate; overflow-x: clip; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(var(--dot) var(--bw), transparent calc(var(--bw) * 1.6));
  background-size: var(--s-5) var(--s-5);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent);
  mask-image: linear-gradient(to bottom, black 55%, transparent);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.hero__title { font-size: var(--fs-hero); line-height: 0.94; letter-spacing: -0.012em; margin-top: var(--s-3); }
.hero__title-accent { display: block; color: var(--muted); }
.hero__lead { max-width: var(--hero-copy-w); margin-top: var(--s-5); font-size: var(--fs-22); line-height: var(--lh-snug); color: var(--muted); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__trust { margin-top: var(--s-5); font-size: var(--fs-14); font-weight: 500; color: var(--muted); }
.hero__trust span { margin-inline: var(--s-1); }
.hero__visual { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); min-width: 0; }
.hero__visual .board { width: 100%; }

/* Night hero: deep navy with the board lifted off the page. data-theme="dark" swaps the text tokens. */
.hero--night[data-theme] { background: radial-gradient(110% 90% at 82% 8%, color-mix(in srgb, var(--board-row) 78%, var(--board-text) 10%) 0%, var(--board-row) 30%, var(--board-bg) 68%); color: var(--board-text); border-bottom: var(--bw) solid var(--board-line); }
.hero--night::before { background-image: radial-gradient(color-mix(in srgb, var(--board-text) 7%, transparent) var(--bw), transparent calc(var(--bw) * 1.6)); }
.hero--night .hero__title { color: var(--board-text); }
.hero--night .hero__title-accent { color: var(--board-time); }
.hero--night .hero__lead, .hero--night .hero__trust { color: var(--board-muted); }
.hero--night .hero__cta .btn { min-height: var(--s-8); padding-inline: var(--s-6); border-radius: var(--r-pill); }
.hero__badge { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-4); border: var(--bw) solid color-mix(in srgb, var(--board-time) 45%, transparent); border-radius: var(--r-pill); color: var(--board-time); font-size: var(--fs-14); }
.hero__badge-dot { width: var(--s-2); height: var(--s-2); flex: none; border-radius: 50%; background: var(--board-time); box-shadow: 0 0 0 var(--s-1) color-mix(in srgb, var(--board-time) 22%, transparent); }
.hero--night .hero__trust { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); padding: 0; list-style: none; }
.hero--night .hero__trust li { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero--night .hero__trust .icon { color: var(--board-time); }
.hero__stage { position: relative; width: 100%; isolation: isolate; }
.hero__stage::before { content: ""; position: absolute; inset: 12% -6% -8% 10%; z-index: -1; border-radius: var(--s-7); background: color-mix(in srgb, var(--board-time) 16%, transparent); filter: blur(var(--s-7)); }
.hero--night .board--hero { border: var(--bw) solid color-mix(in srgb, var(--board-text) 10%, transparent); border-radius: var(--s-5); overflow: hidden; background: var(--board-tile); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.6), inset 0 var(--bw) 0 color-mix(in srgb, var(--board-text) 8%, transparent); }
.hero--night .board--hero .board__row.is-now { background: color-mix(in srgb, var(--board-time) 9%, var(--board-tile)); }
.hero--night .hero__goals { border-color: var(--board-line); background: color-mix(in srgb, var(--board-text) 6%, transparent); }

/* ---------- Proof strip ---------- */
.proof { border-block: var(--bw) solid var(--line); background: var(--card); padding-block: var(--s-6); }
.proof__list { display: grid; grid-template-columns: repeat(var(--proof-cols), minmax(0, 1fr)); }
.proof__list > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-1); padding: var(--s-2) var(--s-5); border-left: var(--bw) solid var(--line); }
.proof__list > div:first-child { border-left: 0; padding-left: 0; }
.proof__list dd { margin: 0; font-size: var(--fs-48); font-variant-numeric: tabular-nums; }
.proof__list dt { font-size: var(--fs-16); color: var(--muted); line-height: var(--lh-snug); }
.proof__note { margin-top: var(--s-4); font-size: var(--fs-14); color: var(--muted); }

/* ---------- Sections ---------- */
.section { padding-block: var(--s-9); }
.section--sunk { border-block: var(--bw) solid var(--line); background: var(--paper-sunk); }
.section__head { max-width: var(--w-lesson); margin-bottom: var(--s-7); }
.section__head h2 { margin-top: var(--s-2); font-size: var(--fs-48); }
.section__head .lead { margin-top: var(--s-4); }
.section__head--center { display: flex; flex-direction: column; align-items: center; margin-inline: auto; text-align: center; }

/* ---------- Line map ---------- */
.linemap--landing { padding: var(--s-5) var(--s-5) var(--s-6); border: var(--bw) solid var(--line); border-radius: var(--r-card); background: var(--card); }
.linemap--landing .linemap__badge { position: static; margin-bottom: var(--s-2); }
.linemap__label { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }
.linemap--landing .linemap__panel { margin-top: var(--s-4); }
.linemap--landing .linemap__detail { background: var(--paper); align-items: center; }
.station__can { margin-top: var(--s-2); font-size: var(--fs-18); max-width: var(--w-prose); }
@container linemap (max-width: 620px) {
  .linemap__label { align-items: flex-start; flex-direction: row; align-items: baseline; gap: var(--s-3); }
  .linemap--landing .linemap__code { font-size: var(--fs-28); }
  .linemap--landing .linemap__detail { align-items: start; }
}

/* ---------- Pathways ---------- */
.pathways-fallback { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: var(--s-5); border: var(--bw) solid var(--line); border-radius: var(--r-card); background: var(--card); list-style: none; }
.pathways-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.pathways-note { margin-top: var(--s-4); max-width: var(--w-prose); }

/* ---------- Method ---------- */
.section__head--split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: var(--s-4) var(--s-8); max-width: none; }
.section__head--split .lead { margin-top: 0; }
.method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.method__tile { display: flex; flex-direction: column; padding: var(--s-3) var(--s-3) var(--s-5); border: var(--bw) solid var(--line); border-radius: var(--s-5); background: var(--card); box-shadow: 0 1px 0 var(--line); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.method__tile:not(.method__feature):hover { transform: translateY(calc(-1 * var(--s-1))); box-shadow: var(--shadow-float); }
.method__tile .method__crop { border-radius: var(--s-4); }
/* The word-order tile becomes a navy feature panel: copy on one side, the live diagram on the other. */
.method__feature[data-theme] { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: var(--s-7); padding: var(--s-7); border-color: var(--board-bg); border-radius: var(--s-6); background: radial-gradient(110% 120% at 0% 0%, color-mix(in srgb, var(--board-row) 80%, var(--board-text) 8%) 0%, var(--board-bg) 62%); color: var(--board-text); box-shadow: 0 32px 64px -36px rgb(11 31 58 / 0.6); }
.method__feature .method__feature-copy h3 { margin: var(--s-2) 0 0; font-size: var(--fs-48); line-height: 1; color: var(--board-text); }
.method__feature .method__feature-copy > p:not(.eyebrow) { margin: var(--s-4) 0 0; font-size: var(--fs-18); line-height: var(--lh-body, 1.6); color: var(--board-muted); }
.method__kicker { color: var(--board-time); }
.method__feature .method__satz { border: var(--bw) solid color-mix(in srgb, var(--board-text) 10%, transparent); border-radius: var(--s-5); background: color-mix(in srgb, var(--board-text) 5%, var(--board-bg)); }
.method__tile h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-5) var(--s-3) 0; font-family: var(--font-display); font-size: var(--fs-28); font-weight: 700; line-height: var(--lh-tight); }
.method__tile h3 .pill { font-family: var(--font-body); }
.method__tile > p { margin: var(--s-2) var(--s-3) 0; font-size: var(--fs-16); color: var(--muted); }
.method__tile--wide { grid-column: 1 / -1; }
.method__satz { min-height: calc(var(--s-9) * 2); padding: var(--s-5); border-radius: var(--r-control); background: var(--paper-sunk); }
.method__satz .satz__chips { background: var(--card); }
.method__crop { display: grid; place-items: center; aspect-ratio: var(--crop-ratio); padding: var(--s-4); overflow: hidden; border-radius: var(--r-control); background: var(--paper-sunk); }

.crop-card { width: min(100%, var(--crop-card-w)); padding: var(--s-4); border: var(--bw) solid var(--line); border-radius: var(--r-card); background: var(--card); font-size: var(--fs-16); }
.crop-card--flash { display: grid; justify-items: center; gap: var(--s-1); text-align: center; }
.crop-card__art { font-family: var(--font-display); font-size: var(--fs-22); font-weight: 700; line-height: 1; }
.crop-card__word { font-family: var(--font-display); font-size: var(--fs-36); font-weight: 700; line-height: 1; }
.crop-card__sub { font-size: var(--fs-14); color: var(--muted); }
.crop-card__acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); width: 100%; margin-top: var(--s-3); }
.crop-btn { padding: var(--s-1) var(--s-2); border: var(--bw-strong) solid; border-radius: var(--r-control); font-size: var(--fs-14); font-weight: 600; text-align: center; }
.crop-btn--no { border-color: var(--danger); color: var(--danger); }
.crop-btn--yes { border-color: var(--mastery); color: var(--mastery); }
.crop-q { font-size: var(--fs-18); font-weight: 500; line-height: var(--lh-snug); }
.crop-gap { display: inline-block; width: var(--s-7); border-bottom: 2px solid var(--ink); }
.crop-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
.crop-opt { padding: var(--s-2) var(--s-1); border: var(--bw-strong) solid var(--line-strong); border-radius: var(--r-control); font-weight: 600; text-align: center; }
.crop-opt.is-right { border-color: var(--mastery); background: color-mix(in srgb, var(--mastery) var(--tint), var(--card)); }
.crop-opt.is-wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) var(--tint), var(--card)); text-decoration: line-through; }
.crop-skills { display: grid; gap: var(--s-3); }
.crop-skill { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) 2.5em; align-items: center; gap: var(--s-2); font-size: var(--fs-14); font-weight: 500; }
.crop-skill i { display: block; height: var(--s-2); overflow: hidden; border-radius: var(--r-pill); background: var(--paper-sunk); }
.crop-skill b { display: block; height: 100%; border-radius: inherit; background: var(--mastery); }
.crop-skill b.is-low { background: var(--signal); }
.crop-skill em { font-family: var(--font-display); font-size: var(--fs-16); font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.w-48 { width: 48%; } .w-58 { width: 58%; } .w-64 { width: 64%; } .w-72 { width: 72%; }
.crop-writing { display: grid; gap: var(--s-1); }
.crop-writing__score { font-size: var(--fs-14); color: var(--muted); }
.crop-writing__score b { font-family: var(--font-display); font-size: var(--fs-22); color: var(--ink); }
.crop-writing__line del { color: var(--danger); text-decoration-thickness: var(--bw); }
.crop-writing__line ins { color: var(--mastery); font-weight: 600; text-decoration: none; }
.crop-writing__why { margin-top: var(--s-1); padding-left: var(--s-2); border-left: var(--focus-w) solid var(--der); font-size: var(--fs-14); color: var(--muted); }
.crop-speak { display: flex; align-items: center; gap: var(--s-3); }
.crop-speak__mic { display: grid; place-items: center; width: var(--touch); height: var(--touch); flex: none; border-radius: 50%; background: var(--danger); color: var(--on-accent); }
.crop-speak__meter { flex: 1; display: flex; align-items: center; gap: var(--s-1); height: var(--s-6); }
.crop-speak__meter i { flex: 1; height: 30%; border-radius: var(--r-pill); background: var(--ink); }
.crop-speak__meter i:nth-child(3n + 1) { height: 70%; }
.crop-speak__meter i:nth-child(4n + 2) { height: 100%; }
.crop-speak__meter i:nth-child(5n) { height: 45%; }
.crop-speak__time { font-family: var(--font-display); font-size: var(--fs-18); font-weight: 700; font-variant-numeric: tabular-nums; }
.crop-notebook { display: grid; }
.crop-notebook__row { display: flex; justify-content: space-between; gap: var(--s-2); padding-block: var(--s-2); border-bottom: var(--bw) solid var(--line); font-weight: 600; }
.crop-notebook__row:last-child { border-bottom: 0; }
.crop-notebook__row em { font-size: var(--fs-14); font-style: normal; font-weight: 400; color: var(--muted); }

/* ---------- Readiness demo ---------- */
.readiness { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: center; }
.readiness__copy { margin-bottom: 0; }
.readiness__card { padding: var(--s-6); }
.readiness__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.readiness__inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
.readiness__inputs > .field { margin-top: 0; }
.readiness__minutes { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-width: 0; }
.readiness__minutes .segmented { display: flex; }
.readiness__minutes .segmented label { flex: 1; justify-content: center; }
.readiness__verdict { display: flex; gap: var(--s-2); margin-top: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-control); background: color-mix(in srgb, var(--mastery) var(--tint), transparent); font-size: var(--fs-16); }
.readiness__verdict .icon { flex: none; color: var(--mastery); }
[data-readiness][data-state="late"] .readiness__verdict { background: color-mix(in srgb, var(--danger) var(--tint), transparent); }
[data-readiness][data-state="late"] .readiness__verdict .icon { color: var(--danger); }

/* ---------- Product tour ---------- */
.tour .section__head { margin-bottom: var(--s-5); }
.tour__panels { margin-top: var(--s-6); }
.tour__panel:focus-visible { outline-offset: var(--s-2); border-radius: var(--r-card); }
.tour__devices { position: relative; padding-right: calc(var(--device-phone-w) - var(--s-4)); padding-bottom: var(--s-6); }
.device-laptop__screen { aspect-ratio: 16 / 10; overflow: hidden; border: var(--s-3) solid var(--board-bg); border-bottom-width: var(--s-4); border-radius: var(--r-card) var(--r-card) 0 0; background: var(--paper); }
.device-laptop__base { height: var(--s-4); margin-inline: calc(-1 * var(--s-6)); border-radius: 0 0 var(--r-card) var(--r-card); background: var(--line-strong); }
.device-phone { position: absolute; right: 0; bottom: 0; width: var(--device-phone-w); aspect-ratio: 9 / 19; overflow: hidden; border: var(--s-2) solid var(--board-bg); border-radius: var(--s-6); background: var(--paper); }
.device-phone__screen, .device-laptop__screen > .mock { height: 100%; }
.tour__caption { margin-top: var(--s-5); text-align: center; color: var(--muted); }
.tour__caption b { color: var(--ink); }
.tour__dots { display: none; justify-content: center; gap: var(--s-2); margin-top: var(--s-4); }
.tour__dots span { width: var(--s-2); height: var(--s-2); border-radius: 50%; background: var(--line-strong); transition: background-color var(--t) var(--ease), width var(--t) var(--ease); }
.tour__dots span.is-on { width: var(--s-5); border-radius: var(--r-pill); background: var(--ink); }

/* mock screens (decorative, aria-hidden) */
.mock { height: 100%; overflow: hidden; background: var(--paper); color: var(--ink); font-size: var(--fs-16); zoom: var(--mock-zoom); pointer-events: none; user-select: none; }
.mock__app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); height: 100%; }
.mock__rail { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-5) var(--s-3); background: var(--inverse-bg); color: var(--inverse-muted); }
.mock__brand { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); padding-inline: var(--s-3); font-family: var(--font-display); font-size: var(--fs-22); font-weight: 700; color: var(--inverse-text); }
.mock__link { position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: var(--touch); padding: 0 var(--s-3); border-radius: var(--r-control); font-weight: 500; }
.mock__link.is-active { background: var(--inverse-raised); color: var(--inverse-text); }
.mock__link.is-active::before { content: ""; position: absolute; left: 0; top: var(--s-2); bottom: var(--s-2); width: var(--indicator-w); border-radius: var(--r-pill); background: var(--signal); }
.mock__main { display: flex; flex-direction: column; min-width: 0; }
.mock__top { display: flex; align-items: center; gap: var(--s-4); min-height: var(--topbar-h); padding: 0 var(--s-6); border-bottom: var(--bw) solid var(--line); background: var(--card); }
.mock__search { display: flex; flex: 0 1 var(--w-form); align-items: center; gap: var(--s-2); min-height: var(--control-h-sm); margin-right: auto; padding: 0 var(--s-3); border: var(--bw) solid var(--line); border-radius: var(--r-control); color: var(--muted); }
.mock__stat { display: flex; align-items: center; gap: var(--s-1); font-family: var(--font-display); font-size: var(--fs-18); font-weight: 700; white-space: nowrap; }
.mock--phone .mock__stat--minutes { display: none; }
.mock__stat .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--muted); }
.mock__body { display: flex; flex-direction: column; gap: var(--s-5); min-height: 0; padding: var(--s-6); overflow: hidden; }
.mock__body > * { flex: none; }
.mock__greet { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); }
.mock__greet h4 { font-size: var(--fs-36); font-weight: 700; }
.mock__greet p, .mock__muted { color: var(--muted); }
.mock__board .board__row { min-height: var(--s-8); }
.mock__cards { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-4); }
.mock__cards .card { display: grid; align-content: start; gap: var(--s-3); }
.mock__cards .btn { justify-self: start; }
.mock__tabbar { display: none; }
.mock__lesson { display: flex; flex-direction: column; height: 100%; }
.mock__qbar { display: flex; align-items: center; gap: var(--s-4); min-height: var(--topbar-h); padding: 0 var(--s-6); border-bottom: var(--bw) solid var(--line); background: var(--card); }
.mock__qbar .progress { flex: 1; }
.mock__qbar .num { font-size: var(--fs-18); }
.mock__speed { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); border: var(--bw) solid var(--line); border-radius: var(--r-pill); font-size: var(--fs-14); font-weight: 600; }
.mock__speed .icon { width: var(--icon-sm); height: var(--icon-sm); }
.mock__qbody { flex: 1; display: grid; align-content: start; gap: var(--s-4); width: min(100% - 2 * var(--s-5), var(--w-lesson)); margin: 0 auto; padding-top: var(--s-7); }
.mock__qbody .qtext { font-size: var(--fs-28); }
.mock__lesson .feedback { width: min(100% - 2 * var(--s-5), var(--w-lesson)); margin: 0 auto var(--s-6); }
.mock__lesson .feedback .btn { margin-top: var(--s-3); }
.mock__result { display: grid; gap: var(--s-4); max-width: var(--w-lesson); }
.mock__score { display: flex; align-items: center; gap: var(--s-4); }
.mock__score .num { font-size: var(--fs-88); }
.mock__skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); }

.mock--phone .mock__app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.mock--phone .mock__rail, .mock--phone .mock__search { display: none; }
.mock--phone .mock__top { gap: var(--s-3); padding: 0 var(--s-4); }
.mock--phone .mock__top .level-btn { margin-right: auto; }
.mock--phone .mock__body { gap: var(--s-4); padding: var(--s-4); }
.mock--phone .mock__greet { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.mock--phone .mock__greet h4 { font-size: var(--fs-28); }
.mock--phone .mock__cards { grid-template-columns: minmax(0, 1fr); }
.mock--phone .mock__tabbar { display: flex; justify-content: space-around; padding: var(--s-2) 0 var(--s-3); border-top: var(--bw) solid var(--line); background: var(--card); }
.mock--phone .mock__tabbar span { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); font-size: var(--fs-14); color: var(--muted); }
.mock--phone .mock__tabbar .is-active { color: var(--ink); font-weight: 600; }
.mock--phone .mock__qbar { gap: var(--s-3); padding: 0 var(--s-4); }
.mock--phone .mock__qbody { padding-top: var(--s-5); }
.mock--phone .mock__qbody .qtext { font-size: var(--fs-22); }
.mock--phone .mock__lesson .feedback { width: 100%; margin: 0; border-radius: var(--r-card) var(--r-card) 0 0; border-inline: 0; border-bottom: 0; }
.mock--phone .mock__score .num { font-size: var(--fs-64); }
.mock--phone .mock__skills { grid-template-columns: minmax(0, 1fr); }

/* ---------- Pricing ---------- */
.pricing__period { margin-top: var(--s-5); }
.pricing__period .pill { margin-left: var(--s-2); }
.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-items: stretch; }
.compare { margin-top: var(--s-8); }
.compare__title { margin-bottom: var(--s-4); font-size: var(--fs-28); font-weight: 700; }
.compare__table th[scope="row"] { font-weight: 500; }
.compare__table thead th:not(:first-child), .compare__table td { width: 18%; text-align: center; }
.compare__table .yes { color: var(--mastery); font-weight: 600; }
.compare__note { margin-top: var(--s-3); font-size: var(--fs-14); color: var(--muted); }

/* ---------- Ink bands (dark theme scope) ---------- */
.band[data-theme] { padding-block: var(--s-9); border-block: var(--bw) solid var(--line); background: var(--board-bg); }
.schools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.schools h2 { margin-top: var(--s-2); font-size: var(--fs-48); }
.schools__list { display: grid; gap: var(--s-4); margin-top: var(--s-6); padding: 0; list-style: none; color: var(--muted); }
.schools__list li { display: flex; gap: var(--s-3); }
.schools__list .icon { flex: none; margin-top: var(--s-1); color: var(--mastery); }
.schools__list b { color: var(--ink); }
.schools__price { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5); border-top: var(--bw) solid var(--line); color: var(--muted); }
.schools__amount { font-size: var(--fs-64); color: var(--ink); }

.classboard { overflow: hidden; border: var(--bw) solid var(--line); border-radius: var(--r-card); background: var(--card); }
.classboard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-5); border-bottom: var(--bw) solid var(--line); }
.classboard__kicker { font-family: var(--font-display); font-size: var(--fs-14); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); }
.classboard__head h3 { font-family: var(--font-display); font-size: var(--fs-28); font-weight: 700; }
.classboard__rows { margin: 0; padding: 0; list-style: none; }
.classboard__rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) var(--classboard-bar) auto; align-items: center; gap: var(--s-3); min-height: var(--s-8); padding: var(--s-2) var(--s-5); border-bottom: var(--bw) solid var(--line); }
.classboard__who { display: flex; flex-direction: column; min-width: 0; }
.classboard__who b { font-size: var(--fs-16); }
.classboard__who small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.classboard__rows .status-pill { justify-self: end; }
.classboard__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); padding: var(--s-4) var(--s-5); font-size: var(--fs-14); color: var(--muted); }
.classboard__foot .num { font-size: var(--fs-18); color: var(--ink); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-7); }
.faq .section__head { margin-bottom: 0; }
.faq__item { border-bottom: var(--bw) solid var(--line); }
.faq__item:first-child { border-top: var(--bw) solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--s-8); padding-block: var(--s-3); font-size: var(--fs-18); font-weight: 600; list-style: none; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: none; width: var(--s-2); height: var(--s-2); margin-right: var(--s-2); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform var(--t) var(--ease); }
.faq__item[open] summary::after { transform: translateY(25%) rotate(-135deg); }
.faq__item summary:hover { color: var(--muted); }
.faq__item p { max-width: var(--w-prose); padding-bottom: var(--s-5); color: var(--muted); }

/* ---------- Final CTA ---------- */
.cta__inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center; }
.cta__inner h2 { font-size: var(--fs-64); }
.cta__inner p { max-width: var(--w-prose); font-size: var(--fs-18); color: var(--muted); }
.cta__inner .btn { margin-top: var(--s-3); }

/* ---------- Footer ---------- */
.footer { padding-block: var(--s-6) max(var(--s-6), env(safe-area-inset-bottom)); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); }
.footer__brand { display: grid; gap: var(--s-1); }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); font-size: var(--fs-14); }
.footer__links a, .footer__links .linkish { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--muted); text-decoration: none; }
.footer__links a:hover, .footer__links .linkish:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero__grid { gap: var(--s-6); }
  .method { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method__feature[data-theme] { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}
@media (max-width: 960px) {
  .nav__links, .nav__actions { display: none; }
  .nav__toggle { display: inline-grid; }
  .hero { min-height: 0; padding-block: var(--s-7) var(--s-8); }
  .hero__grid, .readiness, .schools, .faq { grid-template-columns: minmax(0, 1fr); }
  .hero__lead { max-width: var(--w-prose); }
  .readiness { gap: var(--s-5); }
  .proof__list { --proof-cols: 3; row-gap: var(--s-4); }
  .proof__list > div:nth-child(4) { border-left: 0; padding-left: 0; }
  .tickets { grid-template-columns: minmax(0, 1fr); max-width: var(--w-form); margin-inline: auto; }
  .ticket--featured { order: -1; }
  .schools { gap: var(--s-7); }
}
@media (max-width: 767px) {
  .section, .band[data-theme] { padding-block: var(--s-8); }
  .section__head { margin-bottom: var(--s-6); }
  .section__head h2, .schools h2 { font-size: var(--fs-36); }
  .cta__inner h2 { font-size: var(--fs-48); }
  .hero__lead { font-size: var(--fs-18); }
  .hero__goals { width: 100%; }
  .hero__goals label { flex: auto; justify-content: center; padding-inline: var(--s-2); }
  .compare__table { min-width: var(--compare-min-w); }
  .proof__list { --proof-cols: 2; gap: var(--s-4); }
  .proof__list > div:nth-child(n) { padding: 0; border-left: 0; }
  .proof__list > div:first-child { grid-column: 1 / -1; }
  .proof__list dd { font-size: var(--fs-36); }
  .method { grid-template-columns: minmax(0, 1fr); }
  .method__feature[data-theme] { padding: var(--s-5); }
  .method__feature .method__feature-copy h3 { font-size: var(--fs-36); }
  .section__head--split { grid-template-columns: minmax(0, 1fr); }
  .readiness__card { padding: var(--s-5) var(--s-4); }
  .readiness__inputs { grid-template-columns: minmax(0, 1fr); }
  .track { margin-inline: var(--s-6); }
  .tour__tabs { display: none; }
  .tour__panels { display: flex; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .tour__panels::-webkit-scrollbar { display: none; }
  .tour .tour__panel, .tour .tour__panel[hidden] { display: block !important; flex: 0 0 100%; scroll-snap-align: center; }
  .tour__devices { padding: 0; }
  .device-laptop { display: none; }
  .device-phone { position: relative; width: var(--device-phone-w-mobile); margin-inline: auto; }
  .tour__dots { display: flex; }
  .classboard__rows li { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: var(--s-4); }
  .classboard__rows .progress { display: none; }
  .classboard__head, .classboard__foot { padding-inline: var(--s-4); }
  .schools__price { flex-direction: column; align-items: stretch; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}

/* Field names follow the selected language and can be longer than the German originals. */
body.landing .satz__label,
body.landing .satz-chip__role { white-space: normal; line-height: 1.2; }