/* RedPrepper marketing site v3.3: "The marked-up page" (docs/design/direction-v3.md).
   Tokens from the brief live on :root. Mobile first. System fonts, plus one self-hosted hand font (Kalam) for the red-pen notes only. */

@font-face {
  font-family: 'Kalam';
  src: url('/fonts/kalam-regular-subset.woff2') format('woff2');  /* Indian Type Foundry, SIL OFL; subset, see /fonts/OFL.txt */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brief tokens */
  --paper: #f6f1e7;
  --sheet: #fffdf8;
  --rule: #e3d9c6;
  --rule-lines: #efe6d6;
  --ink: #1f1b17;
  --ink-soft: #3d362e;
  --muted: #74685a;          /* brief: #7a6d5c, darkened to pass 4.5:1 on --paper at small sizes */
  --red: #a8322d;
  --red-wash: #f6e8e5;
  --panel: #ffffff;

  /* Derived: states, inside the product panel, shadows, focus */
  --red-deep: #8a2823;
  --panel-rail: #f7f6f3;
  --panel-rule: #e9e6e0;
  --panel-soft: #f4f3ef;
  --shadow-sheet: 0 1px 2px rgba(60, 40, 20, 0.06), 0 12px 32px rgba(60, 40, 20, 0.10); /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
  --shadow-panel: 0 2px 4px rgba(0, 0, 0, 0.04), 0 24px 60px rgba(0, 0, 0, 0.10); /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
  --focus: var(--ink);

  /* Type */
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Noto Serif', serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-hand: 'Kalam', var(--font-display);                 /* red-pen notes only */
  --size-h1: clamp(2.5rem, 1.6rem + 3.3vw, 4.25rem);        /* 40 → 68 */
  --size-h2: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);        /* 30 → 44 */
  --size-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);        /* 20 → 24 */
  --size-body: 1.0625rem;                                   /* 17 */
  --size-small: 0.9375rem;                                  /* 15 */
  --size-micro: 0.8125rem;                                 /* 13: the floor for anything read */

  /* Space and shape */
  --gutter: clamp(1rem, 6.25vw, 5rem);                      /* 16 → 80 */
  --section: clamp(4.5rem, 3rem + 5vw, 7.5rem);             /* 72 → 120 */
  --control: 2.75rem;                                       /* 44: button height = wordmark lettering height */
  --radius-button: 6px;
  --radius-panel: 14px;
  --header-h: 4.375rem;                                     /* sticky header: 44 control + 24 padding + 1 rule */
}
@media (max-width: 47.99em) { :root { --header-h: 3.875rem; } }  /* phones: 62px at most */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: var(--header-h); }   /* focus and anchors stay clear of the sticky header */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: var(--red); text-underline-offset: 0.15em; text-decoration-thickness: from-font; }
a:hover { color: var(--red-deep); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: rgba(168, 50, 45, 0.15); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--red-wash); color: var(--ink); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 100; padding: 0.75rem 1rem; background: var(--ink); color: var(--paper); border-radius: var(--radius-button); }
.skip-link:focus { top: 0.5rem; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--size-h1); line-height: 1.04; }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); line-height: 1.2; }
h1 em, h2 em { font-style: italic; color: var(--red); }
p { text-wrap: pretty; }
section[id], #sample-lesson, #lesson-panel, [id].tabpanel { scroll-margin-top: 1rem; }   /* on top of html's scroll-padding: anchors land 1rem below the sticky header */

.wrap { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow { /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 29.99em) { .eyebrow { letter-spacing: 0.08em; } } /* taste-skill-ignore: brief */

/* Buttons and links */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.5rem; background: var(--red); color: #fff;
  font-weight: 600; font-size: var(--size-body); line-height: 1.2; text-decoration: none; white-space: nowrap;
  border-radius: var(--radius-button);
  transition: background-color 150ms ease, transform 150ms ease;
}
.button:hover { background: var(--red-deep); color: #fff; }

.button-large { min-height: 3.25rem; padding-inline: 1.75rem; font-size: 1.125rem; }
.text-link { font-weight: 600; color: var(--red); display: inline-block; padding-block: 0.75rem; }
.text-link:hover { color: var(--red-deep); }

/* Sheets: square corners, a rule, a soft shadow */ /* taste-skill-ignore: brief */
.sheet { background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--shadow-sheet); } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */

/* ---------- The red pen: Kalam for the words, filled tapered paths for the marks (three variants each), everything above the content ---------- */
.pen-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pen { position: relative; z-index: 5; color: var(--red); font-family: var(--font-hand); font-weight: 400; font-style: normal; line-height: 1.2; letter-spacing: 0; pointer-events: none; }
.pen-note { font-size: 1.0625rem; text-wrap: balance; }
.pen-mark { color: var(--red); fill: currentColor; fill-opacity: 0.9; overflow: visible; display: inline-block; vertical-align: middle; flex: none; }
.pen-mark use, .pen-mark path { fill: inherit; stroke: none; }
.pen-arrow { width: 3.25rem; height: 1.3rem; }
.pen-arrow.flip { transform: scaleX(-1); }
.pen-tick { width: 1.125rem; height: 1.125rem; }
.pen-down-arrow { width: 2.25rem; height: 3.15rem; }
.pen-up-arrow { width: 1.25rem; height: 2.1rem; }
.pen-circle { position: relative; display: inline-block; white-space: nowrap; }
.pen-circle-faq { padding-inline: 0.05em; margin-inline-end: 0.5em; }
.pen-circle .pen-circle-mark { position: absolute; left: -0.42em; top: -0.36em; width: calc(100% + 0.84em); height: calc(100% + 0.72em); transform: rotate(-2deg); }
.pen-circle-faq .pen-ring-mark { position: absolute; left: -0.55em; top: -0.3em; width: calc(100% + 1.1em); height: calc(100% + 0.6em); transform: rotate(-4deg); }
.pen-underline { position: relative; display: inline-block; white-space: nowrap; }
.pen-underline .pen-underline-mark { position: absolute; left: -0.1em; bottom: -0.32em; height: 0.42em; width: calc(100% + 0.4em); }
.pen-desktop { display: none; }
.pen-mobile { display: inline-block; }
@media (min-width: 37.5em) {
  .pen-desktop { display: inline-block; }
  .pen-mobile { display: none; }
  .pen-note { font-size: 1.25rem; }
  .hero-proof .pen-circle { padding-inline: 0.05em; margin-inline: 0.2em; }   /* room for the circle only when it is drawn */
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--rule); background: var(--paper); } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
.header-inner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; column-gap: 0.75rem; min-height: calc(var(--control) + 1.5rem); padding-block: 0.75rem; }
.wordmark { display: inline-flex; flex: none; position: relative; }
.wordmark img { height: var(--control); width: auto; }
.wordmark::after { content: ""; position: absolute; inset: -6px; }     /* 44px hit area at every size */
.site-nav { display: none; }
.site-nav ul { display: flex; gap: 1.75rem; align-items: center; }
.site-nav a { color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: var(--size-small); padding: 0.75rem 0; display: inline-block; white-space: nowrap; }
.site-nav a:hover { color: var(--red); }
.site-nav .nav-outlined { color: var(--red); font-weight: 600; border: 1px solid var(--red); border-radius: var(--radius-button); padding: 0.45rem 0.85rem; line-height: 1.2; } /* taste-skill-ignore: brief (outlined secondary nav link) */
.site-nav .nav-outlined:hover { background: var(--red-wash); color: var(--red-deep); }
.site-nav a[aria-current="page"]:not(.nav-outlined) { color: var(--ink); text-decoration: underline 2px var(--red); text-underline-offset: 0.45em; }   /* the page you are on */
.site-nav .nav-outlined[aria-current="page"] { background: var(--red-wash); }
.button-header { grid-column: 3; min-height: var(--control); font-size: var(--size-small); padding-inline: 1rem; }
.menu-toggle { grid-column: 4; position: relative; flex: none; width: var(--control); height: var(--control); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius-button); background: var(--sheet); } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
.menu-toggle::after { content: ""; position: absolute; inset: -6px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
.js .menu-toggle { display: inline-flex; }

/* Below 1024px: wordmark and CTA stay; links go into a menu */
@media (max-width: 63.99em) {
  .js .site-nav { display: none; }
  .js .site-nav.open { display: block; grid-column: 1 / -1; grid-row: 2; padding: 0.5rem 0 0.25rem; border-top: 1px solid var(--rule); margin-top: 0.5rem; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; } /* taste-skill-ignore: brief */
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { display: block; padding: 0.75rem 0; font-size: var(--size-body); min-height: 2.75rem; }
  .site-nav .nav-home { order: -2; }                                                     /* Home first, then For schools, in the phone menu */
  .site-nav .nav-schools { order: -1; padding: 0.25rem 0 0.5rem; }
  .site-nav .nav-outlined { display: inline-block; padding: 0.55rem 0.9rem; }
  html:not(.js) .site-nav { display: block; grid-column: 1 / -1; grid-row: 2; }
  html:not(.js) .site-nav ul { flex-direction: row; flex-wrap: wrap; gap: 0 1.25rem; }
}
@media (max-width: 47.99em) {
  .header-inner { min-height: 0; padding-block: 0.5rem; }        /* sticky header stays under 64px on phones */
}
@media (max-width: 29.99em) {
  :root { --control: 2.125rem; }  /* 34px controls on narrow phones; hit areas stay 44 via ::after */
  .button-header { font-size: 0.8125rem; padding-inline: 0.6rem; position: relative; }
  .button-header::after { content: ""; position: absolute; inset: -5px 0; }
  .header-inner { column-gap: 0.5rem; }
}
@media (max-width: 23.74em) {
  :root { --control: 1.875rem; }  /* 30px controls below 380px; hit areas stay 44 via ::after */
  .button-header { font-size: 0.75rem; padding-inline: 0.5rem; }
  .header-inner { column-gap: 0.4rem; }
}
@media (min-width: 64em) {
  .header-inner { grid-template-columns: auto 1fr auto; }
  .site-nav { display: block; justify-self: end; }
  .menu-toggle, .js .menu-toggle { display: none; }
}

/* ---------- 1. Hero: text only, centred, generous space ---------- */
.hero { padding-block: 2.5rem 3.5rem; text-align: center; }
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: 0.875rem; max-width: 46rem; margin-inline: auto; }
.hero h1 { margin-top: 0.25rem; letter-spacing: -0.02em; max-width: 12em; }
.hero-payoff { font-size: 1.125rem; }
.hero-sub { font-size: var(--size-body); color: var(--ink-soft); max-width: 32em; }
.hero-proof { font-size: var(--size-small); font-weight: 600; color: var(--ink-soft); max-width: 32em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; padding-top: 0.25rem; }
.hero-free { color: var(--muted); font-size: var(--size-micro); margin-top: -0.25rem; }   /* same style as the final CTA footnote */
.hero-schools { font-size: var(--size-small); color: var(--muted); }
.hero-schools a { font-weight: 600; text-decoration: none; }
.hero-schools a:hover { text-decoration: underline; }
@media (min-width: 48em) {
  .hero { padding-block: 4rem 4.5rem; }
  .hero-sub { font-size: 1.125rem; }
  .hero-proof { font-size: 1rem; }
}
@media (min-width: 64em) {
  .hero { padding-block: 5.5rem 5.5rem; }
  .hero-copy { gap: 1.25rem; max-width: 50rem; }
  .hero-sub { font-size: 1.1875rem; }
  .hero-payoff { font-size: 1.25rem; }
  .hero-proof { font-size: 1.0625rem; }
}

/* ---------- 2. What you get: one sheet with the heading, the seven ticked items and the closing line ---------- */
.promise { padding-block: 0.5rem var(--section); }
.promise-sheet { padding: 1.5rem 1.25rem 1.625rem; }
.promise-lead { font-weight: 700; margin-bottom: 0.75rem; }
.promise-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.25rem; color: var(--ink-soft); font-size: var(--size-small); }
.promise-list li { display: flex; align-items: flex-start; gap: 0.4rem; }
.promise-list .pen-tick { margin-top: 0.15em; transform: rotate(-8deg); }
.promise-list li:nth-child(3n+2) .pen-tick { transform: rotate(5deg) scale(1.05); }
.promise-list li:nth-child(3n) .pen-tick { transform: rotate(-2deg) scale(0.95); }
.promise-close-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin-top: 1.25rem; }
.promise-close { font-size: 1.125rem; max-width: 34em; }
.pen-note-3 { align-items: center; gap: 0.4rem; flex: 1 1 12rem; max-width: 18em; transform: rotate(1.5deg); }
@media (min-width: 37.5em) { .pen-note-3 { display: inline-flex; } }
@media (min-width: 48em) {
  .promise-sheet { padding: 2rem 2.5rem 2.125rem; }
  .promise-list { display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; }
  .promise-list li { align-items: baseline; font-size: var(--size-body); }
  .promise-close-row { margin-top: 1.5rem; }
  .promise-close { font-size: 1.25rem; }
}
@media (min-width: 64em) {
  .promise-sheet { padding: 2.25rem 3rem 2.375rem; }
  .promise-list { gap: 0.875rem 2.5rem; }
}

/* ---------- 3. Problem ---------- */
.problem { padding-block: 0 var(--section); }
.problem-sheet { padding: 2rem 1.25rem 2.25rem; }
.problem-sheet h2 { margin-bottom: 1.75rem; }
.problem-title-main { display: block; }
.problem-title-rest { display: block; font-size: 0.5em; font-weight: 500; color: var(--ink-soft); line-height: 1.3; letter-spacing: 0; margin-top: 0.6rem; max-width: 20em; text-wrap: pretty; }
.margin-list { counter-reset: pain; display: grid; gap: 1rem; }
.margin-list li { counter-increment: pain; display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.75rem; align-items: baseline; position: relative; }
.margin-list li.has-pen .pen-note-4 { grid-column: 2; }
.margin-list li::before { content: counter(pain) "."; color: var(--red); font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.375rem; line-height: 1; text-align: right; }
.margin-list p { color: var(--ink); font-size: 1.125rem; }
.margin-list strong { color: var(--ink); }
.problem-close { margin-top: 2rem; font-family: var(--font-display); font-style: italic; font-size: 1.25rem; line-height: 1.35; max-width: 30em; }
/* red pen 4: in flow directly below pain 4, indented to its text; from 1024px with a short arrow up to it */
.pen-note-4 { margin-top: 0.25rem; display: inline-flex; align-items: center; gap: 0.4rem; transform: rotate(-1deg); justify-self: start; }
.pen-note-4 .pen-wide { display: none; }
@media (min-width: 48em) {
  .problem-sheet { padding: 3rem 3rem 3.25rem; }
  .margin-list { gap: 1.5rem; max-width: 46em; }
  .margin-list li { grid-template-columns: 3rem 1fr; gap: 1.25rem; }
  .margin-list li::before { font-size: 1.5rem; }
  .problem-close { font-size: 1.5rem; margin-top: 2.5rem; }
}
@media (min-width: 64em) {
  .problem-sheet { padding: 3.75rem 4rem 4rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; }
  .problem-sheet h2 { grid-column: 1; margin: 0; }
  .margin-list { grid-column: 2; }
  .problem-close { grid-column: 2; }
  .pen-note-4 { margin-top: 0.5rem; }
  .pen-note-4 .pen-wide { display: inline-block; width: 1.1rem; height: 1.8rem; margin-top: -0.3rem; }
}

/* ---------- 4. How it works: one sheet, three numbered step cards (illustration on top, circled numeral, title, text) ----------
   Stacked below 900px with a dotted pen line between cards, under the numerals; from 900px three equal cards in a row
   (subgrid keeps the illustrations one height) joined by dotted pen arrows level with the numerals. */
.how { padding-block: 0 var(--section); }
.how-sheet { padding: 1.5rem 1.25rem 1.75rem; }
.how-sheet h2 { margin-bottom: 1.5rem; }
.steps { display: grid; gap: 2.75rem; }
.step { display: flex; flex-direction: column; border: 1px solid var(--rule); background: var(--sheet); } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
.step-body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.125rem 1.375rem; }
.step-body p { color: var(--ink-soft); max-width: 26em; }
.step-num { position: relative; display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; width: 2.75rem; height: 2.25rem; margin-left: -0.25rem; font-size: 1.5rem; line-height: 1; }
.step-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-5deg); }
.step:nth-child(2) .step-ring { transform: rotate(3deg); }
.step:nth-child(3) .step-ring { transform: rotate(-2deg) scaleX(1.04); }
.step-link { position: absolute; z-index: 5; pointer-events: none; }
.step-link-across { display: none; }
/* stacked: from the card's bottom edge to the next card's top edge, under the numeral (no text in the way) */
.step-link-down { left: calc(1.125rem - 0.25rem + 1.375rem - 0.25rem); top: calc(100% + 1px + 0.4rem); width: 0.5rem; height: calc(2.75rem - 0.8rem); }
.step-art { min-height: 12.5rem; background: var(--sheet); border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; padding: 1.25rem 1.125rem; font-size: 0.8125rem; color: var(--ink-soft); } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
@media (min-width: 48em) {
  .how-sheet { padding: 2rem 2.5rem 2.25rem; }
  .how-sheet h2 { margin-bottom: 2rem; }
  .step-art { padding: 1.25rem 1.5rem; }
  .step-body { padding: 1.125rem 1.5rem 1.5rem; }
  .step-link-down { left: calc(1.5rem - 0.25rem + 1.375rem - 0.25rem); }
}
@media (min-width: 56.25em) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 2.5rem; row-gap: 0; }
  .step { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
  .step-art { padding: 1.25rem 1rem; }
  .step-body { padding: 1.125rem 1.25rem 1.5rem; }
  .step-link-down { display: none; }
  .step-link-across { display: block; left: calc(100% + 1px + 0.3rem); top: calc(1.125rem + 1.125rem - 0.625rem); width: calc(2.5rem - 0.6rem); height: 1.25rem; }
}
@media (min-width: 64em) {
  .how-sheet { padding: 2.25rem 3rem 2.5rem; }
  .steps { column-gap: 3.5rem; }
  .step-art { padding: 1.25rem 1.5rem; }
  .step-body { padding: 1.25rem 1.5rem 1.625rem; }
  .step-link-across { top: calc(1.25rem + 1.125rem - 0.75rem); height: 1.5rem; width: calc(3.5rem - 0.8rem); left: calc(100% + 1px + 0.4rem); }
}
.mini-selects { display: flex; gap: 0.5rem; }
.mini-select { display: inline-flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; padding: 0.45rem 0.6rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; white-space: nowrap; color: var(--ink); } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
.mini-select svg { color: var(--muted); }
.mini-topic { display: inline-flex; justify-content: space-between; align-items: center; gap: 0.75rem; width: 100%; padding: 0.5rem 0.7rem; background: var(--red-wash); border: 1px solid #e5c9c4; border-radius: 4px; color: var(--red); font-weight: 600; } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
.mini-label { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: 0.25rem; } /* taste-skill-ignore: decorative step card label */
.mini-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.mini-chip { font-size: 0.75rem; padding: 0.3rem 0.55rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; color: var(--ink); display: inline-flex; align-items: center; gap: 0.35rem; } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
.mini-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.art-review { background: var(--paper); align-items: center; }
.mini-paper { width: min(11.5rem, 74%); background: var(--sheet); border: 1px solid var(--rule); padding: 0.75rem 0.875rem 0.875rem; transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(60, 40, 20, 0.08); display: flex; flex-direction: column; gap: 0.45rem; position: relative; z-index: 1; margin-right: min(2.5rem, 14%); } /* taste-skill-ignore: brief */
.mini-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-top: 0.2rem; } /* taste-skill-ignore: decorative step card label */
.mini-head i { font-style: normal; color: var(--red); background: var(--red-wash); padding: 0.1rem 0.4rem; border-radius: 3px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.mini-line { display: block; height: 4px; background: var(--rule); border-radius: 2px; }
.w80 { width: 80%; } .w70 { width: 70%; } .w60 { width: 60%; } .w55 { width: 55%; } .w45 { width: 45%; }
.mini-request { position: absolute; right: 1rem; bottom: 1.25rem; z-index: 2; background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px 8px 0 8px; padding: 0.5rem 0.75rem; font-size: 0.8125rem; color: var(--ink); box-shadow: 0 1px 2px rgba(60, 40, 20, 0.08); max-width: 9.5rem; } /* taste-skill-ignore: brief */
.art-homework { background: var(--rule-lines); align-items: center; }
.mini-sheet { width: min(12.5rem, 100%); background: var(--sheet); border: 1px solid var(--rule); padding: 0 0.875rem 0.875rem; display: flex; flex-direction: column; gap: 0.6rem; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.08); } /* taste-skill-ignore: brief */
.mini-tabs { display: flex; gap: 1rem; border-bottom: 1px solid var(--rule); margin: 0 -0.875rem 0.25rem; padding: 0 0.875rem; font-size: 0.75rem; font-weight: 600; color: var(--muted); } /* taste-skill-ignore: brief */
.mini-tabs span { padding: 0.55rem 0 0.45rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.mini-tabs .on { color: var(--red); border-bottom-color: var(--red); }
.mini-tabs svg { display: inline-block; vertical-align: -1px; margin-left: 0.3rem; }
.mini-q { display: grid; grid-template-columns: 4.25rem 1fr; gap: 0.5rem; align-items: center; }
.mini-q em { font-style: normal; font-size: 0.6875rem; font-weight: 700; color: var(--red); letter-spacing: 0.04em; text-transform: uppercase; } /* taste-skill-ignore: decorative step card label */

/* ---------- 6. Sample lesson (Direction C: the one white, rounded object) ---------- */
.sample { padding-block: 0 var(--section); }
.sample-wrap { position: relative; }
.sample-intro { display: flex; flex-direction: column; gap: 1rem; max-width: 40em; margin-bottom: 1.25rem; }
/* red pen 6: in flow above the panel on phones and tablets; top right of the section, pointing down at the panel, from 1024px */
.pen-note-6 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; transform: rotate(1deg); }
.pen-note-6 .pen-down-arrow { width: 1.5rem; height: 2.1rem; }
.lesson-hint { font-size: 0.8125rem; color: #6f6f6f; padding: 0 1rem 0.5rem; }
.panel-cta { margin-top: 1rem; }
.sample-body { color: var(--ink-soft); font-size: 1.0625rem; }
.panel { background: var(--panel); color: #161616; border: 1px solid #e6e6e6; border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); font-size: var(--size-small); } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
.panel-rail { background: var(--panel-rail); border-bottom: 1px solid var(--panel-rule); display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0 0; } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
.lesson-select { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0 1rem 0.25rem; scrollbar-width: none; }
.lesson-select::-webkit-scrollbar { display: none; }
.lesson-pick { flex: none; min-height: 2.75rem; padding: 0.5rem 0.9rem; border-radius: var(--radius-button); font-weight: 600; color: #555; border: 1px solid transparent; text-align: start; } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
.lesson-pick[aria-pressed="true"] { background: #f3e4e2; color: var(--red); }
.lesson-pick:hover { color: var(--red); }
/* the tab bar scrolls sideways on phones and tablets; the trailing spacer keeps the last tab clear of the edge */
.tabs { display: flex; gap: 0.25rem; overflow-x: auto; padding: 0 0.75rem; scrollbar-width: none; border-top: 1px solid var(--panel-rule); scroll-padding-inline: 0.75rem; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
.tabs::-webkit-scrollbar { display: none; }
.tabs::after { content: ""; flex: none; width: 0.5rem; }
.tab { flex: none; min-height: 2.75rem; padding: 0.6rem 0.75rem; color: #555; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--red); border-bottom-color: var(--red); font-weight: 600; }
.tab:hover { color: var(--red); }
.tab:focus-visible { outline-offset: -3px; }
.panel-content { padding: 1.25rem 1rem 1.5rem; min-height: 18rem; }
.panel-head { margin-bottom: 1.125rem; }
.panel-meta { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6f6f6f; font-weight: 600; margin-bottom: 0.5rem; }
.panel-titlerow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; }
.panel-title { font-family: var(--font-body); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; text-wrap: balance; }
.panel-duration { font-size: var(--size-small); color: #6f6f6f; white-space: nowrap; }
.tabpanel { display: flex; flex-direction: column; gap: 1.25rem; line-height: 1.5; }
.tabpanel h4 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6f6f6f; margin-bottom: 0.5rem; }
.tabpanel ul { display: grid; gap: 0.5rem; }
.tabpanel ul.bullets li { padding-inline-start: 1rem; position: relative; }
.tabpanel ul.bullets li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.plan-list { display: grid; gap: 1rem; }
.plan-list li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 0.75rem; align-items: baseline; }
.plan-list .timing { font-size: 0.875rem; }
.plan-title { font-weight: 600; }
.plan-list .takeaway { color: #555; font-size: 0.875rem; margin-top: 0.15rem; }
.boardwork { color: #333; font-size: 0.875rem; margin-top: 0.4rem; }
.boardwork .label { font-weight: 600; color: #444; }
.panel-box { background: var(--panel-soft); border-radius: 8px; padding: 1rem 1.125rem; }
.panel-box h4 { color: #444; }
.panel-box ul { gap: 0.625rem; }
.misconception { color: #333; }
.misconception strong { color: #161616; display: block; }
.seg-head { display: flex; align-items: baseline; gap: 0.75rem; font-weight: 600; font-size: 1rem; }
.seg-head .timing { font-size: 0.8125rem; flex: none; min-width: 3rem; }
.seg { display: block; }   /* block, not flex: WebKit used to paint closed <details> children laid out by flex */
.seg + .seg, .seg + .seg-box { border-top: 1px solid var(--panel-rule); padding-top: 1rem; } /* taste-skill-ignore: product panel (data-ui) segment divider */
details.seg > summary, details.seg-box > summary { list-style: none; display: flex; align-items: baseline; gap: 0.75rem; cursor: pointer; min-height: 2.75rem; padding-block: 0.25rem; }
details.seg > summary::-webkit-details-marker, details.seg-box > summary::-webkit-details-marker { display: none; }
details.seg > summary .seg-head { flex: 1; }
details.seg > * + * { margin-top: 0.75rem; }   /* spacing inside an open segment, whatever the browser does with flex on details */
details.seg > summary + * { margin-top: 0.25rem; }
details.seg > summary .chev, details.seg-box > summary .chev { flex: none; color: var(--red); align-self: center; transition: transform 200ms ease; }
details[open] > summary .chev { transform: rotate(180deg); }
details.seg > summary:hover .seg-title, details.seg-box > summary:hover h4 { color: var(--red); }
details.seg-box { padding: 0.25rem 1.125rem 0.5rem; }
details.seg-box[open] { padding-bottom: 1rem; }
details.seg-box > summary h4 { margin: 0; flex: 1; }
details.seg-box > ul { margin-top: 0.25rem; }
.panel-section.sub h4 { margin-bottom: 0.35rem; }
.activity-steps { counter-reset: fac; display: grid; gap: 0.5rem; }
.activity-steps li { counter-increment: fac; display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.5rem; }
.activity-steps li::before { content: counter(fac) "."; color: var(--red); font-weight: 600; }
.example { display: flex; flex-direction: column; gap: 0.5rem; background: var(--panel-soft); border-radius: 8px; padding: 0.875rem 1rem; }
.example h4 { margin-bottom: 0; color: #444; }
.example .question { font-weight: 600; }
.example ol { counter-reset: st; display: grid; gap: 0.375rem; color: #333; }
.example ol li { counter-increment: st; display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.5rem; }
.example ol li::before { content: counter(st) "."; color: #6f6f6f; }
.example .answer { color: #333; }
.question-note { color: #333; margin-bottom: 0.25rem; }
.question-group { display: flex; flex-direction: column; gap: 0.625rem; }
.question-group ol { display: grid; gap: 0.625rem; }
.question-group li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: baseline; }
.tier { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); background: #f3e4e2; padding: 0.15rem 0.4rem; border-radius: 3px; white-space: nowrap; } /* taste-skill-ignore: product UI badge, from the lesson data */
.suggested-questions .q-answer { display: block; color: #6f6f6f; font-size: 0.875rem; margin-top: 0.15rem; }
.panel-empty { color: #555; }
/* Below 768px: a long tab is capped at about 560px with a fade to the panel colour, and a button opens it (site.js adds .is-capped only when the tab is taller) */
.panel-more-row { margin-top: 0.5rem; }
.panel-more { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.25rem; color: var(--red); font-weight: 600; }
.panel-more:hover { color: var(--red-deep); }
.panel-more .chev { transition: transform 200ms ease; }
.panel-more[aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (max-width: 47.99em) {
  .panel.is-capped .tabpanel:not([hidden]) { max-height: 35rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent); }
}
/* The lesson picker and the tab bar scroll sideways below 1024px: a right-edge fade shows while items are off-screen */
.lesson-select.has-more, .tabs.has-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
.panel-note { margin-top: 1.25rem; color: var(--muted); font-size: var(--size-small); }

@media (min-width: 48em) {
  .panel-content { padding: 1.75rem 2rem 2rem; }
  .panel-title { font-size: 1.5rem; }
  .plan-list li { grid-template-columns: 4.5rem 1fr; gap: 1rem; }
  .panel { font-size: 1rem; }
}
@media (min-width: 64em) {
  .panel { grid-template-columns: 16.25rem minmax(0, 1fr); }
  .panel-rail { border-bottom: 0; border-right: 1px solid var(--panel-rule); padding: 1.5rem 1.25rem; gap: 1rem; } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
  .lesson-select { flex-direction: column; overflow: visible; padding: 0; gap: 0.25rem; }
  .lesson-pick { min-height: 2.75rem; padding: 0.5rem 0.75rem; white-space: normal; }
  .tabs { flex-direction: column; overflow: visible; border-top: 1px solid var(--panel-rule); padding: 1rem 0 0; gap: 0.125rem; } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
  .tabs::after { display: none; }
  .lesson-select.has-more, .tabs.has-more { -webkit-mask-image: none; mask-image: none; }
  .tab { text-align: start; padding: 0.55rem 0.75rem; border-bottom: 0; border-radius: var(--radius-button); margin: 0; white-space: normal; }
  .tab[aria-selected="true"] { background: #f3e4e2; }
  .tab:focus-visible { outline-offset: 2px; }
  .panel-content { padding: 2rem 2.25rem 2.25rem; min-height: 26rem; }
  .sample-intro { margin-bottom: 2.5rem; }
  .pen-note-6 { position: absolute; right: var(--gutter); top: 4.5rem; width: 14rem; margin: 0; flex-direction: column; align-items: flex-end; text-align: right; gap: 0.125rem; transform: rotate(2deg); }
  .pen-note-6 .pen-down-arrow { width: 2.25rem; height: 3.15rem; margin-right: 1.5rem; }
  .lesson-hint { padding: 0 0.75rem; }
}

/* ---------- 7. Comparison: a table on a sheet from 600px up; one card per row below ---------- */
.compare { padding-block: 0 var(--section); }
.compare-sheet { padding: 2rem 1.25rem 2.25rem; }
.compare-sheet h2 { margin-bottom: 1.5rem; }
.compare-tablewrap { position: relative; }
.compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare-table .c-label { width: 19%; }
.compare-table .c-rp, .compare-table .c-ai, .compare-table .c-gb { width: 27%; }
.compare-table th, .compare-table td { text-align: start; vertical-align: top; }
.compare-close { margin-top: 2rem; font-family: var(--font-display); font-style: italic; font-size: 1.375rem; line-height: 1.35; max-width: 30em; }
.compare-cards { display: none; }
.compare.is-collapsed .compare-more { display: none; }
.compare-toggle-row { margin-top: 1rem; }
.compare-toggle { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.25rem; color: var(--red); font-weight: 600; }
.compare-toggle:hover { color: var(--red-deep); }
.compare-toggle .chev { transition: transform 200ms ease; }
.compare-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Below 600px: one card per row (row label in small caps, RedPrepper's answer larger on red-wash with a tick, two grey lines). No table, no switch, nothing scrolls sideways. */
@media (max-width: 37.49em) {
  .compare-tablewrap { display: none; }
  .compare-cards { display: grid; gap: 1rem; }
  .compare-card { border-top: 1px solid var(--rule); padding-top: 0.875rem; display: grid; gap: 0.5rem; } /* taste-skill-ignore: brief */
  .card-label { font-variant-caps: all-small-caps; letter-spacing: 0.06em; font-size: 1rem; font-weight: 600; color: var(--muted); line-height: 1.2; } /* taste-skill-ignore: copy v3.3 asks for small caps */
  .card-rp { display: grid; grid-template-columns: 1.125rem 1fr; gap: 0.5rem; align-items: start; background: var(--red-wash); padding: 0.75rem 0.875rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
  .card-rp .pen-tick { margin-top: 0.2rem; }
  .card-alt { color: var(--muted); font-size: var(--size-small); line-height: 1.4; padding-inline: 0.125rem; }
  .card-key { font-weight: 600; color: var(--ink-soft); }
  .compare-sheet { padding: 1.5rem 1rem 1.5rem; }
  .compare-sheet h2 { margin-bottom: 1rem; font-size: 1.75rem; }
  .compare-close { font-size: 1.125rem; margin-top: 1rem; }
  .compare-toggle-row { margin-top: 0.75rem; }
}
@media (min-width: 37.5em) {
  .compare-sheet h2 { margin-bottom: 0.5rem; }
  .compare-tablewrap { padding-top: 5.5rem; }          /* room for red pen 7 above the table, so the header row keeps its height */
  .pen-note-7 { position: absolute; left: 58%; right: 2%; top: 0.25rem; display: block; transform: none; }
  .pen-note-7-words { display: inline-block; transform: rotate(-1.5deg); white-space: nowrap; }
  .pen-note-7 .pen-sweep-arrow { position: absolute; left: var(--n7-left, 2%); top: var(--n7-top, 1.6rem); width: var(--n7-width, 30%); height: var(--n7-height, 2.6rem); }
  .compare-table th, .compare-table td { padding: 1rem 0.875rem; border-top: 1px solid var(--rule); font-size: var(--size-small); } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
  .compare-table thead th { border-top: 0; padding-top: 0; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.25; font-weight: 600; vertical-align: bottom; }
  .compare-table thead th.col-rp { color: var(--red); background: var(--red-wash); }
  .compare-table tbody th { font-weight: 600; color: var(--ink); padding-inline-start: 0; }
  .compare-table td { color: var(--ink-soft); }
  .compare-table td.col-rp { background: var(--red-wash); color: var(--ink); }
  .compare-table tr > *:last-child { padding-inline-end: 0; }
}
@media (min-width: 48em) {
  .compare-sheet { padding: 3rem 3rem 3.25rem; }
  .compare-table th, .compare-table td { padding: 1.125rem 1.125rem; font-size: 1rem; }
  .compare-table thead th { font-size: 1.25rem; }
  .compare-close { font-size: 1.5rem; margin-top: 2.5rem; }
}
@media (min-width: 64em) {
  .compare-sheet { padding: 3.75rem 4rem 4rem; }
  .compare-sheet h2 { margin-bottom: 1rem; }
}

/* ---------- 8. Trust: three statements in a row, stacked on phones ---------- */
.trust { padding-block: 0 var(--section); }
.trust h2 { margin-bottom: 1.75rem; }
.trust-grid { display: grid; gap: 1.25rem; }
.trust-grid li { display: grid; grid-template-columns: 1.375rem 1fr; gap: 0.75rem; align-items: start; }
.trust-grid .pen-tick { width: 1.25rem; height: 1.25rem; margin-top: 0.25rem; }
.trust-grid li:nth-child(2) .pen-tick { transform: rotate(6deg); }
.trust-grid li:nth-child(3) .pen-tick { transform: rotate(-5deg); }
.trust-grid p { color: var(--ink-soft); max-width: 32em; }
@media (min-width: 48em) {
  .trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 2.5rem; }
  .trust h2 { margin-bottom: 2.25rem; }
}
@media (min-width: 64em) {
  .trust-grid { gap: 2rem 3.5rem; }
  .trust-grid p { font-size: 1.125rem; }
}

/* ---------- 9. Schools strip (home) and the /schools page (designer's school banner, recoloured) ---------- */
.schools { padding-block: 0 var(--section); }
.schools-page .schools { padding-top: 2.5rem; }
.school-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.schools-page .school-copy h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); max-width: 14em; }
.school-points-full { display: grid; gap: 0.75rem; color: var(--ink-soft); max-width: 32em; }
.school-points-full li { display: grid; grid-template-columns: 1.125rem 1fr; gap: 0.6rem; align-items: start; }
.school-points-full .pen-tick { margin-top: 0.3rem; }
.school-points-full strong { color: var(--ink); }
.school-banner { background: var(--red-wash); border: 1px solid #e9d3cf; padding: 1.75rem 1rem 2rem; display: grid; gap: 2rem; overflow: hidden; } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
.school-copy { display: flex; flex-direction: column; gap: 1rem; }
.school-copy h2 { font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.25rem); max-width: 16em; }
.school-copy p:not(.eyebrow):not(.school-cta) { color: var(--ink-soft); max-width: 30em; }
.school-points { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-weight: 600; font-size: var(--size-small); }
.school-points li { display: inline-flex; align-items: center; gap: 0.5rem; }
.school-points li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.school-cta { margin-top: 0.5rem; }
.school-illustration { position: relative; height: 13rem; width: 100%; max-width: 17rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.school-illustration::before { content: ""; position: absolute; width: 11rem; height: 11rem; border-radius: 50%; background: var(--sheet); top: 0.25rem; }
.school-roof { width: 0; border-left: 5.5rem solid transparent; border-right: 5.5rem solid transparent; border-bottom: 3.25rem solid var(--red); position: relative; z-index: 1; }
.school-building { position: relative; z-index: 2; width: 9.75rem; height: 6.75rem; background: var(--sheet); border: 1px solid var(--rule); display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; padding: 1.25rem 1.25rem 0.75rem; } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
.school-window { width: 1.25rem; height: 1.5rem; background: var(--red-wash); border: 2px solid var(--rule); position: relative; }
.school-window:nth-of-type(even) { justify-self: end; }
.school-window::before { content: ""; position: absolute; left: 50%; top: 0; height: 100%; border-left: 2px solid var(--rule); }
.school-door { position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 1.5rem; height: 2.5rem; background: var(--red); border: 2px solid var(--sheet); border-bottom: 0; border-radius: 10px 10px 0 0; }
.school-ground { position: relative; z-index: 2; width: 15rem; height: 1px; background: var(--rule); } /* taste-skill-ignore: illustration ground line */
.school-ground::before, .school-ground::after { content: ""; position: absolute; bottom: 0; left: 0; width: 1.75rem; height: 3.5rem; border-radius: 50% 50% 20% 20%; background: #e5c9c4; }
.school-ground::after { left: auto; right: 0.25rem; height: 4.5rem; background: #ead6d2; }
.school-cta-top { margin-top: 0.25rem; }
.schools-more { padding: 1.75rem 1.25rem 2rem; margin-top: 1.5rem; display: grid; gap: 1.75rem; }
.schools-more section { display: flex; flex-direction: column; gap: 0.5rem; }
.schools-more h2 { font-size: var(--size-h3); }
.schools-more p { color: var(--ink-soft); max-width: 34em; }
.schools-more a { font-weight: 600; }
.schools-final { margin-top: 2rem; }
@media (min-width: 48em) {
  .schools-more { padding: 2.5rem 3rem 2.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 3rem; margin-top: 2rem; }
}
@media (min-width: 48em) {
  .school-banner { padding: 3rem; }
  .schools-page .schools { padding-top: 3.5rem; }
  .school-illustration { margin-inline: 0; }
}
@media (min-width: 64em) {
  .school-banner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: 4rem; padding: 3.5rem 4rem; }
  .school-illustration { margin-inline: auto; }
}

/* ---------- 12. FAQ ---------- */
.faq { padding-block: 0 var(--section); }
.faq h1, .faq h2 { margin-bottom: 1.5rem; }
.faq h1 { font-size: var(--size-h2); }
.faq-page { padding-top: 2.5rem; }
@media (min-width: 48em) { .faq-page { padding-top: 3.5rem; } }
.faq-cta { margin-top: 1.5rem; }
.faq-sheet { padding: 0.5rem 1.25rem; }
.faq details { border-top: 1px solid var(--rule); } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
.faq details:first-child { border-top: 0; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.125rem 0; font-weight: 600; cursor: pointer; font-size: 1.0625rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: none; color: var(--red); transition: transform 200ms ease; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details p { color: var(--ink-soft); padding: 0 0 1.25rem; max-width: 40em; }
.faq summary:hover { color: var(--red); }
@media (min-width: 48em) {
  .faq-sheet { padding: 0.75rem 2.5rem; }
  .faq summary { padding: 1.375rem 0; font-size: 1.125rem; }
}
@media (min-width: 64em) {
  .faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: start; }
  .faq h1, .faq h2 { margin: 0; }
  .faq-cta { grid-column: 2; }
  .faq-page { display: block; max-width: 56rem; }           /* /questions: the heading above the sheet, no empty column */
  .faq-page h1 { margin-bottom: 1.75rem; }
}

/* ---------- 13. Final CTA: the one centred moment ---------- */
.final { text-align: center; padding-block: 1rem var(--section); display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.final h2 { font-size: var(--size-h1); max-width: 14em; }
@media (max-width: 29.99em) { .final h2 { font-size: 2rem; } .school-copy h2 { font-size: 1.25rem; } }
@media (max-width: 24.99em) { h1 { font-size: 2.25rem; } }
@media (max-width: 37.49em) { .school-illustration { display: none; } }
.final-body { color: var(--ink-soft); max-width: 30em; font-size: 1.125rem; }
.final-cta { margin-top: 0.5rem; }
.final-footnote { color: var(--muted); font-size: var(--size-micro); }
.final-questions { font-size: var(--size-small); }
.final-questions a { font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--rule); } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2rem; padding-block: 2rem 2.5rem; }
.footer-brand { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-brand .wordmark img { height: 2.125rem; }
.tagline { font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; color: var(--ink-soft); }
.footer-legal { color: var(--muted); font-size: var(--size-small); display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.footer-legal a { color: var(--ink-soft); padding: 0.75rem 0.25rem; display: inline-block; }
.footer-legal a:hover { color: var(--red); }
.footer-legal a[aria-current="page"] { color: var(--ink); text-decoration: none; }
@media (max-width: 29.99em) { .footer-legal > span[aria-hidden]:nth-last-child(2) { display: none; } .footer-legal > span:last-child { flex-basis: 100%; } }   /* phones: © on its own line, no stray dot */

/* ---------- Motion: one subtle rise as the hero arrives, feedback on controls, nothing under reduced motion.
   No scroll-triggered reveals: on a slow phone a block that waits for a script or a scroll timeline can stay invisible. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > * { animation: rise 600ms cubic-bezier(0.2, 0, 0, 1) both; }
  .js .hero-copy > *:nth-child(2) { animation-delay: 60ms; }
  .js .hero-copy > *:nth-child(3) { animation-delay: 120ms; }
  .js .hero-copy > *:nth-child(4) { animation-delay: 180ms; }
  .js .hero-copy > *:nth-child(5) { animation-delay: 240ms; }
  .js .hero-copy > *:nth-child(6) { animation-delay: 300ms; }
  .js .hero-copy > *:nth-child(7) { animation-delay: 360ms; }
  .js .hero-copy > *:nth-child(8) { animation-delay: 420ms; }
  .button:active { transform: scale(0.98); }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
}


/* ---------- Early-access page: the form on a sheet, "Coming next" on a sheet beside it ---------- */
.ea { padding-block: 2.5rem var(--section); display: grid; gap: 2rem; align-items: start; }
.ea h1 { font-size: var(--size-h2); margin-bottom: 0.75rem; }
.ea-lead { color: var(--ink-soft); margin-bottom: 1.25rem; max-width: 34em; }
.field-hint { margin-top: 0.3rem; color: var(--muted); font-size: var(--size-small); }
.field-hint:empty { display: none; }
.ea-main { max-width: 34rem; }
.form-sheet { padding: 1.5rem 1.25rem 1.75rem; }
.form-sheet h2 { font-size: var(--size-h3); margin-bottom: 0.5rem; }
.form-sheet h2 + p { color: var(--ink-soft); margin-bottom: 1.25rem; }
.mode-switch { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.segmented { display: flex; border: 1px solid var(--rule); background: var(--sheet); padding: 3px; border-radius: var(--radius-button); gap: 3px; } /* taste-skill-ignore: form control */
.segmented label { flex: 1; position: relative; display: flex; }
.segmented input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segmented span { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 2.5rem; padding: 0.4rem 0.6rem; border-radius: 4px; font-weight: 600; font-size: var(--size-small); color: var(--ink-soft); line-height: 1.25; }
.segmented input:checked + span { background: var(--red); color: #fff; }
.segmented input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.field { margin-bottom: 1.125rem; }
.field label { display: block; margin-bottom: 0.3rem; font-weight: 600; font-size: var(--size-small); }
.field input, .field select { width: 100%; min-height: 2.75rem; padding: 0 0.75rem; font: inherit; font-size: 1rem; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-button); } /* taste-skill-ignore: form control */
.field select { appearance: none; -webkit-appearance: none; padding-inline-end: 2.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%233d362e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; }
.field input::placeholder { color: var(--muted); opacity: 1; }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.field-error, .form-error { margin-top: 0.375rem; color: var(--red); font-size: var(--size-small); font-weight: 600; }
.form-error { margin-top: 1rem; }
.form-row { margin-top: 0.75rem; }
.hp { position: absolute; left: -9999px; width: 0; height: 0; overflow: hidden; }
.cf-turnstile { margin: 0.25rem 0 1.25rem; min-height: 4.1rem; }
@media (max-width: 24.99em) {   /* the Turnstile widget is a fixed 300px: give it the sheet's side padding so a 360px phone does not scroll sideways */
  .form-sheet { padding-inline: 0.875rem; }
  .cf-turnstile { margin-inline: -0.875rem; display: flex; justify-content: center; }
}
.field .check-label { display: flex; align-items: flex-start; gap: 0.625rem; margin: 0; font-weight: 400; color: var(--ink-soft); font-size: var(--size-small); cursor: pointer; }
.field .check-label input { flex: none; width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0.15rem 0 0; padding: 0; accent-color: var(--red); }
.check-label input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.link-button { font: inherit; font-weight: 600; color: var(--red); text-decoration: underline; text-underline-offset: 0.15em; min-height: 2.75rem; }
.link-button:hover { color: var(--red-deep); }
.link-button:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.button:disabled { opacity: 0.6; cursor: default; }
#done p { color: var(--ink-soft); }
.next-steps { margin-top: 2rem; }
.next-steps h2 { font-size: var(--size-h3); margin-bottom: 0.5rem; }
.next-steps p { color: var(--ink-soft); max-width: 34em; }
.coming-sheet { padding: 1.5rem 1.25rem 1.625rem; }
.coming-sheet h2 { font-size: var(--size-h3); margin-bottom: 0.25rem; }
.coming-list li { padding: 0.75rem 0; border-top: 1px solid var(--rule); color: var(--ink-soft); } /* taste-skill-ignore: brief (sheet rule, shadow, ruling or eyebrow) */
.coming-list li:first-child { border-top: 0; }
.coming-line { margin-top: 1rem; font-weight: 600; }
@media (min-width: 48em) {
  .ea { grid-template-columns: minmax(0, 34rem) minmax(16rem, 22rem); column-gap: 3.5rem; justify-content: space-between; padding-top: 3.5rem; }
  .form-sheet { padding: 2rem 2rem 2.25rem; }
  .coming-sheet { margin-top: 4.9rem; padding: 1.75rem 1.75rem 1.875rem; }
}

/* ---------- 404 page ---------- */
.not-found { padding-block: 4rem var(--section); display: flex; flex-direction: column; gap: 1.25rem; min-height: 50vh; }
.not-found p { color: var(--ink-soft); max-width: 34em; font-size: 1.125rem; }
.not-found-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }