/* BluAkademy home page: brand tokens for the taste-skill kit, and the page CSS that sits inside visuals.
   Tokens from `start.mjs brand --page software` with the BluAkademy colours (#06BBCC, #181d38, #F0FBFC).
   Text face Heebo and display face Nunito are the brand's own (CLAUDE.md), so they replace the printed text face. */
:root {
  --p-bg: #ffffff; --p-surface: #f0fbfc; --p-ink: #181d38; --p-muted: #5b6472;
  --p-accent: #06bbcc; --p-accent-ink: #111111; --p-action: #06bbcc; --p-action-ink: #111111;
  --p-inv-bg: #181d38; --p-inv-surface: #252a45; --p-inv-ink: #ffffff; --p-inv-muted: #9ea1af;
  --p-inv-accent: #06bbcc; --p-inv-accent-ink: #111111; --p-inv-action: #06bbcc; --p-inv-action-ink: #111111;
  --font-display: "Nunito", system-ui, sans-serif;
  --font-text: "Heebo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 700;              /* the brand's rounded Nunito reads thin at 400; 700 keeps the logo's voice */
  --display-tracking: -0.02em;
  --display-tracking-xl: -0.03em;
  --teal-text: #087E8A;               /* brand teal darkened to 4.8:1 on white, for small teal text */
}

/* Logo: the brand's own icon and the two-tone word */
.nav__logo img { height: 30px; width: 30px; border-radius: 8px; }
.nav__logo b { font-weight: inherit; color: var(--teal-text); }
.close__word b { font-weight: inherit; color: var(--teal-text); }

/* ---------- Hero collage pieces (page CSS inside the visual) ---------- */
.pc { padding: 16px 18px; background: #fff; color: var(--ink); font-size: 14px; line-height: 1.45; }
.pc .lbl { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.pc strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--ink); }
.pc-q .stem { margin: 2px 0 12px; font-size: 15px; }
.pc-q .opt { display: flex; align-items: center; gap: 10px; border: 1.5px solid #e2e6ea; border-radius: 8px; padding: 6px 10px; margin-top: 6px; }
.pc-q .opt b { width: 22px; height: 22px; border-radius: 50%; background: #eef2f6; display: grid; place-items: center; font-size: 12px; }
.pc-q .opt.sel { border-color: var(--teal-text); background: var(--p-surface); }
.pc-q .opt.sel b { background: var(--teal-text); color: #fff; }
.pc-score .big { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pc-score .big span { font-size: 15px; color: var(--muted); font-weight: 400; }
.pc-score .up { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 500; color: #1a7f37; background: #e6f4ea; border-radius: 999px; padding: 2px 10px; }
.pc-list .row { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid #edf0f2; }
.pc-list .row:first-of-type { margin-top: 8px; }
.pc-list .ok { color: #1a7f37; font-weight: 500; white-space: nowrap; }
.pc-list .no { color: #b42318; font-weight: 500; white-space: nowrap; }
.pc-list .todo { color: var(--muted); white-space: nowrap; }
.pc-bar { height: 8px; border-radius: 999px; background: #e6eef0; overflow: hidden; margin-top: 10px; }
.pc-bar i { display: block; height: 100%; width: var(--w, 60%); background: var(--teal-text); border-radius: inherit; }

/* ---------- App frame: the exam list beside the open question (sections-library.md, app-frame) ---------- */
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}

/* The open pane: one CBT question as the portal draws it (portal/css/portal.css .cbt-*) */
.cbt { display: flex; flex-direction: column; height: 100%; background: #f6f8fa; font-size: 15px; }
.cbt__top { display: flex; align-items: center; gap: 16px; background: var(--p-ink); color: #fff; padding: 10px 18px; }
.cbt__top b { font-weight: 500; }
.cbt__tabs { display: flex; gap: 4px; flex: 1; min-width: 0; overflow: hidden; }
.cbt__tabs span { padding: 4px 12px; border-radius: 999px; color: #c9cee0; white-space: nowrap; font-size: 14px; }
.cbt__tabs span.on { background: rgb(255 255 255 / .14); color: #fff; }
.cbt__timer { font-family: var(--font-mono); font-weight: 500; font-size: 17px; background: rgb(255 255 255 / .12); border-radius: 6px; padding: 2px 10px; }
.cbt__body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 16px; padding: 18px; flex: 1; min-height: 0; }
.cbt__q { background: #fff; border: 1px solid #e7eaee; border-radius: 10px; padding: 18px 20px; }
.cbt__n { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.cbt__stem { font-size: 17px; color: var(--ink); margin: 0 0 14px; }
.cbt__opt { display: flex; align-items: center; gap: 12px; border: 2px solid #e7eaee; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; color: var(--ink); }
.cbt__opt b { width: 26px; height: 26px; border-radius: 50%; background: #eef2f6; display: grid; place-items: center; font-size: 13px; flex: none; }
.cbt__opt.sel { border-color: var(--teal-text); background: var(--p-surface); }
.cbt__opt.sel b { background: var(--teal-text); color: #fff; }
.cbt__why { margin-top: 12px; border-left: 3px solid #1a7f37; background: #f1f8f3; border-radius: 0 8px 8px 0; padding: 10px 14px; color: var(--ink); }
.cbt__why strong { color: #1a7f37; font-weight: 500; }
.cbt__side { background: #fff; border: 1px solid #e7eaee; border-radius: 10px; padding: 14px; align-self: start; }
.cbt__side p { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.cbt__pal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.cbt__pal i { font-style: normal; height: 30px; border: 1px solid #cbd5e1; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 500; position: relative; }
.cbt__pal i.a { background: var(--teal-text); border-color: var(--teal-text); color: #fff; }
.cbt__pal i.c { outline: 2px solid var(--p-ink); outline-offset: 1px; }
.cbt__pal i.f::after { content: ""; position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
@media (max-width: 1279px) { .cbt__body { grid-template-columns: minmax(0, 1fr); } .cbt__side { display: none; } }
@media (max-width: 1023px) { .cbt__tabs { display: none; } }

/* Step 3 of the term: the report card, drawn (pinned-chapters takes a picture or a drawn window) */
.report { width: 100%; height: 100%; background: var(--p-surface); display: grid; place-items: center; padding: 6%; }
.report__card { width: min(100%, 460px); background: #fff; border: 1px solid #e7eaee; border-radius: 14px; padding: 22px 24px; color: var(--ink); box-shadow: 0 18px 40px -24px rgb(24 29 56 / .35); }
.report__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #edf0f2; }
.report__head strong { font-family: var(--font-display); font-size: 19px; }
.report__head span { font-size: 13px; color: var(--muted); }
.report__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f1f3f5; font-variant-numeric: tabular-nums; }
.report__row em { font-style: normal; color: var(--muted); }
.report__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.report__foot b { font-family: var(--font-display); font-size: 26px; }
.report__pill { background: #e6f4ea; color: #1a7f37; font-weight: 500; font-size: 14px; border-radius: 999px; padding: 4px 12px; }

/* Plans: the check list */
.plan-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.plan-list li { padding-left: 26px; position: relative; }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--teal-text); border-bottom: 2px solid var(--teal-text); transform: rotate(-45deg); }

/* Footer credit for the studio */
.footer__legal .made a { text-decoration: underline; text-underline-offset: 3px; }

/* The lit ground in the brand's teal family (the kit's sky leans grey-violet) */
html[data-ground="sky"] { --ground-bg: #cdeaee; --ground-surface: #def3f5; --ground-ink: #15303a; --ground-muted: #3f5a63; --ground-accent: #087E8A; }
#faq.bg-band { --tone: #d6f0f3; }

/* A band keeps the section's own screen height (backgrounds.css sets 88svh) */
.section.bg-band, .section.bg-halo { --g-screen: calc(var(--h, 1) * 100svh); }

/* Admission: the diagram's frame takes the section's height beside the words */
#admission .grid { height: 100%; align-items: stretch; }
#admission .match-frame { height: 100%; min-height: 420px; display: grid; place-items: center; }
#admission .match-frame > .dg { width: 100%; }
@media (max-width: 1023px) { #admission .grid { height: auto; } #admission .match-frame { height: 440px; } }

/* Tablet (640 to 1023): the four-card and three-card rows and the plans stack into two screens */
@media (min-width: 640px) and (max-width: 1023px) { #families, #prices { --h: 2; } }

/* The name set across the wrap: hand-set for the phone so it never runs past the right line */
@media (max-width: 639px) { .close__word { font-size: 14vw; } }
/* Tablet: the level tiles keep their names, the lines go, so the row fits one screen */
@media (min-width: 640px) and (max-width: 1023px) { #classes .tile > p { display: none; } }
/* A tall tablet holds the static steps on one screen */
@media (min-width: 640px) and (max-width: 1023px) and (min-height: 1150px) { #term { --h: 1 !important; } }

/* Phone: the three account photos at 16:9 so the section stays one screen */
@media (max-width: 639px) { #families .tile__media { --tile-ratio: 16 / 9; } }

/* Phone bar: the brand icon at the kit mark size so name, button and menu fit 342px */
@media (max-width: 639px) { .nav__logo img { width: 22px; height: 22px; border-radius: 6px; } .nav:not(.is-open) .nav__actions .btn { padding-inline: 10px; } }

/* Admission: the graduate photograph fills the column under the words */
#admission .span-5 { display: flex; flex-direction: column; }
#admission .grad-photo { flex: 1 1 0; min-height: 0; margin-top: var(--s-6); border-radius: var(--r-lg); overflow: hidden; }
#admission .grad-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 1023px) { #admission .grad-photo { display: none; } }

/* Phone hero: one card and one photograph a set, the card wider */
@media (max-width: 639px) {
  .ly-collage .pc-minor { display: none; }
  .ly-collage .pc-main { width: 70% !important; left: 4% !important; font-size: 13px; }
}
#admission .span-5 > .link { align-self: flex-start; }

/* The name in the close: room for Nunito's ascenders, sized so "BluAkademy" holds the wrap */
.close__word { font-size: clamp(56px, 12.4vw, 180px); line-height: 1.02; padding-top: .06em; }
@media (max-width: 639px) { .close__word { font-size: 13.5vw; } }
/* 1024 to 1279: the question keeps its four options; the explanation shows from 1280 */
@media (max-width: 1279px) { .cbt__why { display: none; } }
/* 1024 to 1279: the diagram takes seven columns so its labels fit */
@media (min-width: 1024px) and (max-width: 1279px) { #admission .span-5 { grid-column: 1 / span 5; } #admission .span-6.start-7 { grid-column: 6 / span 7; } }
/* Phone: the account tiles as rows, a square photograph beside the words */
@media (max-width: 639px) {
  #families .tile { grid-column: 1 / -1; grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--s-3); row-gap: var(--s-1); }
  #families .tile__media { grid-row: 1 / span 2; aspect-ratio: 1; --tile-ratio: 1; }
  #families .tile > p { font-size: 16px; line-height: 1.5; }
}

/* =================================================================== v4: denser, catalogue-style page
   The client asked for Udemy-level detail and less space between sections, so below the hero the
   sections take their content's height with even padding, instead of one or two full screens. */
main > section.section:not(#term) { height: auto !important; min-height: 0 !important; padding-top: 72px; padding-bottom: 72px; }
main > section.section.section--tight { padding-top: 64px; padding-bottom: 64px; }
.section.bg-band, .section.bg-halo { --g-screen: 0px; }
@media (max-width: 639px) { main > section.section:not(#term), main > section.section.section--tight { padding-top: 48px; padding-bottom: 48px; } }
.section-head { margin-bottom: var(--s-7); }
.section-head--row { display: flex; align-items: end; justify-content: space-between; gap: var(--s-5) var(--s-7); flex-wrap: wrap; }
.section-head--row > div { max-width: 62ch; }
.section-head--row > .link { flex: none; margin-bottom: 6px; }

/* Facts band right under the hero */
.facts-band { padding-top: 0 !important; padding-bottom: 40px !important; }
.facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0; }
.facts > div { padding: 24px 24px 22px 0; display: flex; flex-direction: column-reverse; gap: 4px; }
.facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.facts dt { font-size: 14px; color: var(--muted); }
.facts dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .facts > div:nth-child(4) { padding-left: 0; border-left: 0; } .facts > div:nth-child(n+4) { border-top: 1px solid var(--line); } }
@media (max-width: 639px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts > div { padding: 16px 12px 14px 0 !important; border-left: 0 !important; } .facts > div:nth-child(n+3) { border-top: 1px solid var(--line); } .facts dd { font-size: 24px; } .facts > div:last-child { grid-column: 1 / -1; } }

/* Icon glyph from a local ui: file, in the text colour (CSS mask) */
.sic { display: inline-block; flex: none; width: 24px; height: 24px; background-color: currentColor;
       -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

/* Catalogue: course cards */
#catalogue .tabs { margin-bottom: var(--s-6); }
.catalogue__grid { row-gap: var(--s-5); }
.course.card { display: flex; flex-direction: column; gap: 8px; padding: 20px; min-height: 196px; color: var(--ink); }
.course__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--p-surface); color: var(--teal-text); display: grid; place-items: center; margin-bottom: 6px; }
.course__icon .sic { width: 24px; height: 24px; }
.course h3 { font-family: var(--font-text); font-weight: 500; font-size: 17px; line-height: 1.35; margin: 0; }
.course__meta { font-size: 14px; color: var(--muted); }
.tier { align-self: flex-start; margin-top: auto; font-size: 13px; font-weight: 500; border-radius: 999px; padding: 2px 10px; background: #eef2f6; color: #374151; }
.tier--premium { background: #fef3c7; color: #92400e; }
@media (min-width: 640px) and (max-width: 1023px) { .catalogue__grid > .course { grid-column: span 6; } }

/* Subjects: icon chips */
.subjects { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.subject { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); color: var(--ink); font-weight: 500;
           transition: transform 180ms var(--ease, ease), border-color 140ms; }
.subject .sic { color: var(--teal-text); }
.subject span:last-child { min-width: 0; }
@media (hover: hover) { .subject:hover { transform: translateY(-2px); border-color: var(--line-strong); } }
@media (max-width: 1279px) { .subjects { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Trades */
.trades { row-gap: var(--s-5); }
.trade { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.trade__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--p-surface); color: var(--teal-text); display: grid; place-items: center; margin-bottom: 4px; }
.trade h3 { font-family: var(--font-text); font-weight: 500; font-size: 18px; margin: 0; }
.trade p { margin: 0; color: var(--ink); }
@media (min-width: 640px) and (max-width: 1023px) { .trades > .trade { grid-column: span 6; } }

/* Points list (offline, schools) */
.points { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: grid; gap: var(--s-4); }
.points li { display: flex; gap: 14px; align-items: flex-start; }
.points li > .sic { color: var(--teal-text); margin-top: 2px; }
.points strong { display: block; font-weight: 500; }
.points span { color: var(--ink); }
#schools .btn { align-self: flex-start; margin-top: var(--s-3); }

/* Offline: a phone holding a saved lesson */
.phone-frame { min-height: 520px; display: grid; place-items: center; padding: 40px 24px; }
.phone { width: 300px; border-radius: 36px; background: #fff; border: 10px solid #181d38; box-shadow: 0 30px 60px -30px rgb(24 29 56 / .45); overflow: hidden; }
.phone__bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; font-size: 13px; font-weight: 500; color: var(--ink); }
.phone__off { display: inline-flex; align-items: center; gap: 6px; color: #9a6700; }
.phone__off .sic, .phone__saved .sic { width: 16px; height: 16px; }
.phone__body { padding: 8px 18px 22px; display: grid; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.phone__body p { margin: 0; }
.phone__crumb { font-size: 13px; color: var(--muted); }
.phone__title { font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.phone__eq { background: var(--p-surface); border-radius: 10px; padding: 10px 12px; font-family: var(--font-mono); font-size: 13px; }
.phone__saved { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #1a7f37; font-weight: 500; }

/* Schools: the score sheet */
.sheet { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 48px -32px rgb(24 29 56 / .35); }
.sheet__head, .sheet__foot { display: flex; justify-content: space-between; gap: 12px; padding: 16px 20px; font-size: 14px; }
.sheet__head { border-bottom: 1px solid var(--line); }
.sheet__head span, .sheet__foot span:first-child { color: var(--muted); }
.sheet__foot { border-top: 1px solid var(--line); }
.sheet__ok { display: inline-flex; align-items: center; gap: 6px; color: #1a7f37; font-weight: 500; }
.sheet__ok .sic { width: 16px; height: 16px; }
.sheet table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sheet th { text-align: left; font-size: 13px; font-weight: 500; color: var(--muted); padding: 12px 20px; background: #f8fafb; }
.sheet td { padding: 13px 20px; border-top: 1px solid #edf0f2; }
.g { display: inline-block; min-width: 36px; text-align: center; font-size: 13px; border-radius: 999px; padding: 2px 8px; background: #eef2f6; }
.g--a { background: #e6f4ea; color: #1a7f37; }
.g--d { background: #fdecea; color: #b42318; }
@media (max-width: 639px) { .sheet th, .sheet td { padding: 10px 10px; } }

/* The close: one compact row instead of the big name */
.footer.closing { height: auto !important; min-height: 0 !important; padding-top: 72px; }
.close--slim .section-head--split { align-items: center; padding: 40px 48px; border-radius: var(--r-lg); background: var(--p-surface); }
.close--slim #close-h { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.15; }
.close--slim .t-lead { font-size: 17px; margin-top: 6px; }
.closing__links { margin-top: 56px; }
@media (max-width: 639px) { .close--slim .section-head--split { padding: 28px 24px; } }

.facts > div:last-child dd { font-size: 22px; line-height: 1.25; }
.section-head { margin-bottom: var(--s-6); }

/* Phone: course and trade cards as compact rows (icon, words, tier) */
@media (max-width: 639px) {
  .catalogue__grid { row-gap: 10px; }
  .course.card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; min-height: 0; padding: 12px 14px; }
  .course__icon { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
  .course h3 { grid-column: 2; font-size: 16px; }
  .course__meta { grid-column: 2; font-size: 13px; }
  .tier { grid-column: 3; grid-row: 1 / span 2; margin: 0; align-self: center; }
  .trades { row-gap: 10px; }
  .trade { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 14px; }
  .trade__icon { grid-row: 1 / span 2; margin: 0; }
  .trade p { font-size: 16px; line-height: 1.5; }
}

/* =================================================================== v8: art direction from the client's mockup
   (hero-direction.html). Deliberate overrides of the skill, used ONLY in the two places below:
   the exercise-book hero background, and #exams (Bricolage Grotesque 800, red-pen underline and tick,
   IBM Plex Mono labels). Don't "correct" these back to the skill defaults. */
:root { --paper: #F6F1E6; --rule: #D6E1E8; --margin: #E2A49B; --red-pen: #C8352B; --ink-2: #4A4E63; }

/* 1. Hero: ruled exercise-book page; the red margin line sits in the gutter, 16-18px left of the content */
.hero.hero--paper {
  background:
    linear-gradient(90deg, transparent calc(var(--gut) - 18px), var(--margin) calc(var(--gut) - 18px), var(--margin) calc(var(--gut) - 16px), transparent calc(var(--gut) - 16px)),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px),
    var(--paper);
}

/* 2. #exams: the exam-paper composition */
#exams { --mono-x: "IBM Plex Mono", ui-monospace, Menlo, monospace; }
#exams > .wrap.ex-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ex-text { grid-column: 1 / 7; padding-top: 8px; }
.ex-h { font: 800 clamp(44px, 5.2vw, 76px)/.95 "Bricolage Grotesque", var(--font-display); letter-spacing: -0.035em; margin: 0 0 24px; text-wrap: balance; color: var(--ink); }
.ex-h em { font-style: normal; color: var(--teal-text); position: relative; white-space: nowrap; }
.ex-h em svg { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .32em; overflow: visible; }
.ex-lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 30em; margin: 0 0 20px; }
#exams .link { display: inline-flex; margin-bottom: 32px; }

/* the JAMB answer sheet: shaded bubbles */
.ex-sheet { border: 1.5px solid var(--ink); border-radius: 4px; background: #FBF8F1; max-width: 540px; }
.ex-sheet__head { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1.5px solid var(--ink); font: 500 13px/1.3 var(--mono-x); }
.ex-sheet__body { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: 8px 12px; padding: 12px 14px; }
#exams .q { display: flex; align-items: center; gap: 5px; font: 500 13px/1 var(--mono-x); }
#exams .q > span { width: 18px; color: var(--ink-2); }
#exams .b { display: inline-block; width: 15px; height: 15px; border: 1.2px solid var(--ink); border-radius: 50%; font: 500 8px/13px var(--mono-x); font-style: normal; text-align: center; color: var(--ink-2); }
#exams .b.on { background: var(--ink); color: transparent; }

/* the classroom photo with the printed question over its lower left */
.ex-pic { grid-column: 7 / 13; position: relative; }
.ex-photo { margin: 0; border-radius: 4px; overflow: hidden; aspect-ratio: 5 / 6; background: #EDE5D4; }
.ex-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; transition: transform 600ms var(--ease, ease); }
@media (hover: hover) { .ex-pic:hover .ex-photo img { transform: scale(1.03); } }
.ex-card { position: absolute; left: -96px; bottom: 32px; width: 360px; background: #FFFDF8; border: 1.5px solid var(--ink); border-radius: 4px; padding: 18px 20px 16px; box-shadow: 6px 6px 0 var(--ink); color: var(--ink); }
.ex-card__top { display: flex; justify-content: space-between; font: 500 13px/1 var(--mono-x); color: var(--ink-2); padding-bottom: 12px; border-bottom: 1px dashed var(--line); margin-bottom: 14px; }
.ex-card__top b { color: var(--red-pen); font-weight: 500; }
.ex-card__stem { font: 500 18px/1.4 var(--font-text); margin: 0 0 14px; }
.ex-card__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.ex-card__opts li { display: flex; align-items: center; gap: 10px; font-size: 16px; }
#exams .ex-card__opts .b { width: 22px; height: 22px; font-size: 11px; line-height: 20px; }
#exams .ex-card__opts .b.on { background: var(--teal-text); border-color: var(--teal-text); color: #fff; }
.ex-card__tick { position: absolute; left: 236px; top: 78px; width: 44px; height: 40px; color: var(--red-pen); }
.ex-card__why { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 15px; color: var(--ink-2); }
.ex-card__why strong { color: var(--red-pen); font-weight: 500; }

@media (min-width: 1024px) and (max-width: 1279px) { .ex-card { left: -64px; width: 340px; } .ex-card__tick { left: 222px; } }
@media (max-width: 1023px) {
  .ex-text, .ex-pic { grid-column: 1 / -1; }
  .ex-pic { margin-top: 16px; margin-bottom: 64px; }
  .ex-photo { aspect-ratio: 16 / 10; }
  .ex-card { left: auto; right: 24px; bottom: -56px; }
}
@media (max-width: 639px) {
  .ex-lead { font-size: 18px; }
  .ex-sheet__body { grid-template-columns: repeat(2, max-content); }
  .ex-pic { margin-bottom: 0; }
  .ex-photo { aspect-ratio: 4 / 5; }
  .ex-card { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: -64px 12px 0; box-shadow: 4px 4px 0 var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .ex-photo img { transition: none; } }


/* =================================================================== v12: the swap and the grounds
   Grounds down the page (no two neighbours alike, each one flat):
   hero cream (ruled) · facts white · overview white · catalogue white · classes white · subjects white ·
   term cream · trades white · admission white · offline teal · families white · schools teal ·
   fees cream · FAQ teal · close cream. Ruled lines and the red margin only in the hero. */
:root { --paper-2: #EDE5D4; }
.ground-paper { background: var(--paper) !important; --teal-text: #07707B; --card: var(--paper-2); --surface: var(--paper-2); }  /* #087E8A is 4.3:1 on cream; #07707B is 5.1:1 */
.ground-teal { background: var(--p-surface) !important; }

/* Hero: the exam paper, exactly one screen */
.hero--paper .hero-text.ex-grid { height: 100%; min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.hero--paper .ex-text { grid-column: 1 / 7; align-self: center; padding-top: 0; display: flex; flex-direction: column; }
.hero--paper .ex-h { font-size: clamp(40px, 4.6vw, 72px); margin-bottom: 20px; }
.hero--paper .ex-lead { margin-bottom: 24px; font-size: 18px; }
.hero--paper .btn-row { margin-bottom: 28px; }
.hero--paper .ex-pic { grid-column: 7 / 13; height: 100%; min-height: 0; margin: 0; }
.hero--paper .ex-photo { height: 100%; aspect-ratio: auto; }
/* the card sits on the photo, never over the answer sheet in the text column */
.hero--paper .ex-card { left: 24px; bottom: 24px; }
@media (max-width: 1279px) { .hero--paper .ex-card { left: 16px; bottom: 16px; width: min(340px, calc(100% - 32px)); } .hero--paper .ex-card__tick { left: 216px; } }
@media (max-height: 820px) and (min-width: 1024px) { .hero--paper .ex-lead { display: none; } }
@media (max-width: 1023px) {
  .hero--paper .hero-text.ex-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 20px; }
  .hero--paper .ex-text, .hero--paper .ex-pic { grid-column: 1 / -1; }
  .hero--paper .ex-text { align-self: start; }
  .hero--paper .ex-photo { aspect-ratio: auto; height: 100%; }
  .hero--paper .ex-card { left: auto; right: 16px; bottom: 16px; }
}
@media (max-width: 639px) {
  .hero--paper .ex-sheet { display: none; }
  .hero--paper .ex-lead { font-size: 16px; margin-bottom: 16px; }
  .hero--paper .btn-row { margin-bottom: 0; }
  .hero--paper .ex-h { font-size: clamp(34px, 9.6vw, 44px); margin-bottom: 14px; }
  .hero--paper .ex-pic { position: relative; }
  .hero--paper .ex-photo { position: absolute; inset: 0; }
  .hero--paper .ex-card { position: absolute; left: 12px; right: 12px; bottom: 12px; width: auto; margin: 0; padding: 14px 16px 12px; box-shadow: 4px 4px 0 var(--ink); }
  .hero--paper .ex-card__stem { font-size: 16px; margin-bottom: 10px; }
  .hero--paper .ex-card__why { display: none; }
  .hero--paper .ex-card__tick { left: auto; right: 14%; top: 64px; }
}

/* Overview: the former hero as a regular section, words left, collage right */
#overview .grid { align-items: center; }
#overview .ly-collage { height: 560px; }
#overview .overview__text .btn { align-self: flex-start; }
@media (max-width: 1023px) { #overview .overview__text, #overview .ly-collage { grid-column: 1 / -1; } #overview .ly-collage { height: 480px; margin: 0; } }
@media (max-width: 639px) { #overview .ly-collage { height: 400px; } }

/* On cream: panels are paper-2 or a hairline, never white boxes */
#term .report { background: var(--paper-2); }
#term .report__card { background: var(--paper); border-color: var(--line-strong); }
#term .mo-pc__visuals, #term .frame { background: var(--paper-2); }
footer.closing.ground-paper .close--slim .section-head--split { background: var(--paper-2); }

/* Fees: a school-fees table */
.fees { width: 100%; border-collapse: collapse; font-size: 16px; }
.fees th { font: 500 13px/1.3 "IBM Plex Mono", ui-monospace, Menlo, monospace; color: var(--ink-2); text-align: left; padding: 0 16px 12px 0; border-bottom: 1.5px solid var(--ink); }
.fees td { padding: 22px 16px 22px 0; border-bottom: 1px solid var(--line-strong); vertical-align: top; color: var(--ink); }
.fees__plan { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; width: 22%; }
.fees__price { font-family: var(--font-display); font-weight: 700; font-size: 26px; white-space: nowrap; width: 14%; font-variant-numeric: tabular-nums; }
.fees__go { text-align: right; white-space: nowrap; }
.fees__go .link { color: var(--teal-text); font-weight: 500; }
.fees__pick { background: var(--paper-2); }
.fees__pick td:first-child { box-shadow: inset 3px 0 0 var(--teal-text); padding-left: 16px; }
.fees__pick td:last-child { padding-right: 16px; }
.fees__tag { display: inline-block; margin-left: 8px; font: 500 12px/1 "IBM Plex Mono", ui-monospace, Menlo, monospace; padding: 5px 7px; border: 1px solid var(--teal-text); color: var(--teal-text); border-radius: 3px; vertical-align: middle; }
@media (max-width: 767px) {
  .fees, .fees tbody, .fees tr, .fees td { display: block; width: auto !important; }
  .fees thead { display: none; }
  .fees tr { padding: 18px 0; border-bottom: 1px solid var(--line-strong); }
  .fees__pick { padding: 18px 16px !important; }
  .fees td { border: 0; padding: 3px 0; }
  .fees__pick td:first-child { box-shadow: none; padding-left: 0; }
  .fees__go { text-align: left; padding-top: 10px !important; }
}
@media (min-width: 640px) and (max-width: 1279px) {
  .hero--paper .ex-sheet__body { gap: 8px 6px; padding: 12px 10px; }
  .hero--paper .q { gap: 3px; }
  .hero--paper .q > span { width: 14px; }
}

#overview .overview__text .btn--secondary, #schools .btn--secondary { padding-inline: 0; }

/* =================================================================== v16: the hero carousel
   (mockups/hero-carousel.html; js/hero-carousel.js). Deliberate art direction: the carousel, Bricolage 800
   headlines, red-pen accents and IBM Plex Mono labels. The paper ground stays still; the slides change. */
main > .hero--carousel { padding: calc(var(--nav) + 40px) 0 28px; }
.hero--carousel > .wrap { grid-template-rows: minmax(0, 1fr) auto; row-gap: 20px; }
.hc-slides { position: relative; display: grid; min-height: 0; }
.hc-slide { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; min-height: 0;
            opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.hc-slide[hidden] { display: grid; }               /* stays in the grid cell; visibility hides it from AT and the tab order */
.hc-slide.on { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.hc-text { grid-column: 1 / 7; min-width: 0; }

/* entrance on the incoming slide (only after the first switch, so the first paint shows the words at once) */
.hc-anim .hc-slide.on .hc-text > * { animation: hc-up .6s ease both; }
.hc-anim .hc-slide.on .hc-text > :nth-child(2) { animation-delay: .06s; }
.hc-anim .hc-slide.on .hc-text > :nth-child(3) { animation-delay: .12s; }
.hc-anim .hc-slide.on .hc-text > :nth-child(4) { animation-delay: .18s; }
.hc-anim .hc-slide.on .hc-text > :nth-child(5) { animation-delay: .24s; }
@keyframes hc-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hc-kicker { font: 500 13px/1.4 "IBM Plex Mono", ui-monospace, Menlo, monospace; color: var(--ink-2); margin: 0 0 18px; }
.hc-h { font: 800 clamp(44px, 5.4vw, 80px)/.95 "Bricolage Grotesque", var(--font-display); letter-spacing: -0.035em; margin: 0 0 24px; color: var(--ink); text-wrap: balance; }
.hc-h em { font-style: normal; color: #087E8A; position: relative; white-space: nowrap; }
.hc-h em svg { position: absolute; left: -2%; bottom: -.14em; width: 104%; height: .3em; overflow: visible; }
.hc-h em path { stroke-dasharray: 320; stroke-dashoffset: 0; }
.hc-anim .hc-slide.on .hc-h em path { stroke-dashoffset: 320; animation: hc-draw .7s .45s ease forwards; }
@keyframes hc-draw { to { stroke-dashoffset: 0; } }
.hc-lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 31em; margin: 0 0 28px; }
.hc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-bottom: 32px; }
.hc-actions .btn { height: 48px; }
.hc-link { font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--line-strong); padding-bottom: 2px; transition: border-color .14s; }
.hc-link:hover { border-color: var(--ink); color: var(--ink); }

/* slide 1: the classes as exercise-book tabs */
.hc-levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1.5px solid var(--ink); border-radius: 4px; background: #FBF8F1; max-width: 560px; }
.hc-levels a { padding: 12px 14px; color: var(--ink); border-left: 1px solid var(--line-strong); transition: background-color .14s; }
.hc-levels a:first-child { border-left: 0; }
.hc-levels a:hover { background: var(--paper-2); color: var(--ink); }
.hc-levels b { display: block; font: 800 20px/1.1 "Bricolage Grotesque", var(--font-display); letter-spacing: -0.02em; }
.hc-levels span { font: 500 13px/1.4 "IBM Plex Mono", ui-monospace, Menlo, monospace; color: var(--ink-2); }

/* slide 2: the answer sheet */
.hc-sheet { border: 1.5px solid var(--ink); border-radius: 4px; background: #FBF8F1; max-width: 560px; }
.hc-sheet .ex-sheet__head { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1.5px solid var(--ink); font: 500 13px/1.3 "IBM Plex Mono", ui-monospace, Menlo, monospace; }
.hc-sheet .ex-sheet__body { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: 6px 12px; padding: 12px 14px; }
.hero--carousel .q { display: flex; align-items: center; gap: 5px; font: 500 13px/1 "IBM Plex Mono", ui-monospace, Menlo, monospace; }
.hero--carousel .q > span { width: 14px; color: var(--ink-2); }
.hero--carousel .b { display: inline-block; width: 15px; height: 15px; border: 1.2px solid var(--ink); border-radius: 50%; font: 500 8px/13px "IBM Plex Mono", ui-monospace, monospace; font-style: normal; text-align: center; color: var(--ink-2); }
.hero--carousel .b.on { background: var(--ink); color: transparent; }

/* pictures and their cards */
.hc-pic { grid-column: 7 / 13; position: relative; height: 100%; max-height: 640px; min-height: 0; display: flex; align-items: center; }
.hc-photo { margin: 0 0 0 auto; width: 86%; height: 100%; border-radius: 4px; overflow: hidden; background: var(--paper-2); }
.hc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
@media (hover: hover) { .hc-pic:hover .hc-photo img { transform: scale(1.03); } }
.hc-anim .hc-slide.on .hc-photo img { animation: hc-settle 1.2s ease both; }
@keyframes hc-settle { from { transform: scale(1.06); } to { transform: none; } }
.hc-card { position: absolute; left: 0; bottom: 28px; width: 340px; background: #FFFDF8; border: 1.5px solid var(--ink); border-radius: 4px; padding: 16px 18px 14px; box-shadow: 6px 6px 0 var(--ink); color: var(--ink); }
.hc-anim .hc-slide.on .hc-card { animation: hc-up .6s .35s ease both; }
.hc-card__top { display: flex; justify-content: space-between; font: 500 13px/1 "IBM Plex Mono", ui-monospace, Menlo, monospace; color: var(--ink-2); padding-bottom: 10px; border-bottom: 1px dashed var(--line-strong); margin-bottom: 12px; }
.hc-card__top b { color: var(--red-pen); font-weight: 500; }
.hc-card__h { font: 800 24px/1.1 "Bricolage Grotesque", var(--font-display); letter-spacing: -0.02em; margin: 0 0 6px; }
.hc-card__p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.hc-card__eq { margin: 10px 0; padding: 8px 12px; background: #F0FBFC; border-radius: 4px; font: 500 14px/1.4 "IBM Plex Mono", ui-monospace, Menlo, monospace; }
.hc-card__ok { margin: 10px 0 0; font-size: 13px; color: #1a7f37; font-weight: 500; }
.hc-card__stem { font: 500 17px/1.4 var(--font-text); margin: 0 0 12px; }
.hc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.hc-opts li { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.hero--carousel .hc-opts .b { width: 22px; height: 22px; font-size: 11px; line-height: 20px; }
.hero--carousel .hc-opts .b.on { background: #087E8A; border-color: #087E8A; color: #fff; }
.hc-tick { position: absolute; left: 220px; top: 74px; width: 42px; height: 38px; color: var(--red-pen); }
.hc-tick path { stroke-dasharray: 90; stroke-dashoffset: 0; }
.hc-anim .hc-slide.on .hc-tick path { stroke-dashoffset: 90; animation: hc-draw .5s 1s ease forwards; }
.hc-card__why { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line-strong); font-size: 14px; color: var(--ink-2); }
.hc-card__why strong { color: var(--red-pen); font-weight: 500; }

/* tabs that say what each slide is, with a progress line, and the pause button */
.hc-bar { display: flex; align-items: center; gap: 16px; }
.hc-tabs { display: flex; gap: 16px; }
.hc-tab { position: relative; width: 220px; background: none; border: 0; padding: 12px 0 0; cursor: pointer; text-align: left; font: 500 14px/1.3 var(--font-text); color: var(--ink-2); min-height: 44px; }
.hc-tab::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line-strong); }
.hc-tab i { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--ink); }
.hc-tab[aria-selected="true"] { color: var(--ink); }
.hc-tab[aria-selected="true"] i { animation: hc-fill 7s linear forwards; }
.hc-tabs.paused .hc-tab i { animation-play-state: paused; }
.hc-tabs.stopped .hc-tab[aria-selected="true"] i { animation: none; width: 100%; }
@keyframes hc-fill { to { width: 100%; } }
.hc-tab:focus-visible, .hc-pause:focus-visible { outline: 2px solid var(--teal-text); outline-offset: 3px; }
.hc-pause { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: #FBF8F1; color: var(--ink); cursor: pointer; display: grid; place-items: center; flex: none; }
.hc-pause svg { width: 12px; height: 12px; }

/* 1024 to 1279: the card stays on the photo, clear of the answer sheet */
@media (max-width: 1279px) {
  .hc-card { left: calc(14% + 16px); width: min(320px, calc(86% - 32px)); }
  .hc-tick { left: 200px; }
  .hc-sheet .ex-sheet__body { gap: 6px 6px; padding: 12px 10px; }
  .hero--carousel .q { gap: 3px; }
  .hc-levels a { padding: 10px; }
}
/* tablet: stacked, the hero still fills the first screen; the picture takes what is left */
@media (max-width: 1023px) {
  .hc-slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 20px; }
  .hc-text, .hc-pic { grid-column: 1 / -1; }
  .hc-pic { height: auto; max-height: none; min-height: 240px; }
  .hc-photo { width: 100%; }
  .hc-card { left: 16px; bottom: 16px; width: 340px; }
  .hc-tick { left: 220px; }
  .hc-actions { margin-bottom: 24px; }
  .hc-lead { margin-bottom: 22px; }
}
/* phone: as close to one screen as it goes; the cards drop their paragraph and sit on the photo's lower part */
@media (max-width: 639px) {
  main > .hero--carousel { height: auto; min-height: 0; padding: calc(var(--nav) + 24px) 0 20px; }
  .hc-kicker { margin-bottom: 10px; }
  .hc-h { font-size: clamp(38px, 11vw, 44px); margin-bottom: 14px; }
  .hc-lead { font-size: 16px; margin-bottom: 16px; }
  .hc-actions { gap: 12px 20px; margin-bottom: 16px; }
  .hc-actions .btn { flex: 1 1 100%; justify-content: center; }
  .hc-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-levels a:nth-child(3) { border-left: 0; }
  .hc-levels a:nth-child(n+3) { border-top: 1px solid var(--line-strong); }
  .hc-levels a { padding: 8px 12px; }
  .hc-sheet { display: none; }
  .hc-slide { gap: 14px; grid-template-rows: auto minmax(300px, 1fr); }
  .hc-pic { height: auto; min-height: 300px; }
  .hc-card { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 12px 14px; box-shadow: 4px 4px 0 var(--ink); }
  .hc-card__p, .hc-card__ok, .hc-card__why { display: none; }
  .hc-card__h { font-size: 20px; }
  .hc-card__eq { margin: 8px 0 0; }
  .hc-card__top { padding-bottom: 8px; margin-bottom: 8px; }
  .hc-tick { left: auto; right: 18%; top: 58px; }
  .hc-tab { width: auto; flex: 1; }
  .hc-tabs { flex: 1; }
}
/* reduced motion: slide 1, still, the underline drawn, no progress line moving */
@media (prefers-reduced-motion: reduce) {
  .hero--carousel *, .hero--carousel *::before, .hero--carousel *::after { animation: none !important; transition: none !important; }
  .hc-h em path, .hc-tick path { stroke-dashoffset: 0 !important; }
}

/* the photo on the grid (columns 8 to 12), the card hanging 88px off its left edge as in the mockup,
   always clear of the text column (which ends a column and a gutter earlier) */
@media (min-width: 1024px) {
  .hc-pic { grid-column: 8 / 13; }
  .hc-photo { width: 100%; }
  .hc-card { left: -88px; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .hc-card { left: -88px; width: 300px; } .hc-tick { left: 206px; } .hc-card__stem { font-size: 16px; } }
/* phone: tighter rhythm */
@media (max-width: 639px) {
  main > .hero--carousel { padding: calc(var(--nav) + 16px) 0 16px; }
  .hero--carousel > .wrap { row-gap: 12px; }
  .hc-kicker { margin-bottom: 6px; }
  .hc-h { margin-bottom: 10px; }
  .hc-lead { margin-bottom: 12px; line-height: 1.5; }
  .hc-actions { margin-bottom: 12px; gap: 10px 20px; }
  .hc-slide { gap: 12px; grid-template-rows: auto minmax(240px, 1fr); }
  .hc-pic { min-height: 240px; }
}
@media (max-width: 639px) { main > .hero--carousel { height: 100svh; } }
main > .hero--carousel > .wrap { display: grid; grid-template-rows: minmax(0, 1fr) auto; row-gap: 20px; height: 100%; }
main > .hero--carousel > .wrap > .hc-slides { height: 100%; }
@media (max-width: 639px) {
  main > .hero--carousel > .wrap { row-gap: 12px; }
  .hc-tab { font-size: 13px; padding-top: 10px; }
}

@media (min-width: 1280px) { .hc-levels { max-width: 600px; } }

@media (max-width: 639px) { main > .hero--carousel { padding-bottom: 26px; } }

/* =================================================================== v22: no overlap in short windows
   The hero is at least one screen and grows when its content needs more (a short laptop window or a
   small phone), so the answer sheet never runs under the tabs or out of the hero. The headline also
   scales with the window's height, so it stays one screen in most windows. */
main > .hero--carousel { height: auto !important; min-height: 100svh; display: flex; flex-direction: column; }
main > .hero--carousel > .wrap { flex: 1 0 auto; height: auto; grid-template-rows: 1fr auto; }
main > .hero--carousel > .wrap > .hc-slides { height: auto; }
.hc-slide { align-self: stretch; }
.hc-h { font-size: clamp(36px, min(5.4vw, 8.4svh), 80px); }
@media (max-height: 800px) and (min-width: 640px) {
  main > .hero--carousel { padding-top: calc(var(--nav) + 28px); }
  .hc-kicker { margin-bottom: 12px; }
  .hc-h { margin-bottom: 18px; }
  .hc-lead { font-size: 17px; margin-bottom: 20px; }
  .hc-actions { margin-bottom: 22px; }
}
@media (max-width: 1023px) {
  .hc-slide { grid-template-rows: auto minmax(240px, 1fr); }
}
@media (max-width: 639px) {
  main > .hero--carousel { min-height: 100svh; }
  .hc-h { font-size: clamp(32px, min(10.5vw, 6.4svh), 44px); }
  .hc-slide { grid-template-rows: auto minmax(220px, 1fr); }
  .hc-pic { min-height: 220px; }
}
@media (min-width: 640px) and (max-width: 1023px) { .hc-slide { grid-template-rows: auto minmax(170px, 1fr); } .hc-pic { min-height: 170px; } }
@media (max-height: 700px) and (min-width: 1024px) { .hc-h { font-size: clamp(36px, min(5.4vw, 7.4svh), 80px); } .hc-lead { margin-bottom: 16px; } .hc-actions { margin-bottom: 18px; } }
/* small phones (under 700px tall): the levels strip as one compact row, a lower photo floor */
@media (max-width: 639px) and (max-height: 760px) {
  .hc-levels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hc-levels a { border-top: 0 !important; border-left: 1px solid var(--line-strong) !important; padding: 8px 6px; text-align: center; }
  .hc-levels a:first-child { border-left: 0 !important; }
  .hc-levels b { font-size: 16px; }
  .hc-levels span { display: none; }
  .hc-lead { font-size: 15px; }
  .hc-slide { grid-template-rows: auto minmax(180px, 1fr); }
  .hc-pic { min-height: 180px; }
  .hc-h { font-size: clamp(30px, 9.6vw, 38px); }
}
/* narrow phones: the logo, the main button and the menu button fit on one line */
@media (max-width: 400px) {
  .nav:not(.is-open) .nav__actions .btn { padding-inline: 10px; font-size: 13px; }
  .nav__logo { font-size: 17px; }
  .nav__logo img { width: 20px; height: 20px; }
}
/* specificity over the kit's hero h1 size, so the height-aware sizes apply */
main > .hero--carousel .hc-h { font-size: clamp(36px, min(5.4vw, 8.4svh), 80px); }
@media (max-height: 700px) and (min-width: 1024px) { main > .hero--carousel .hc-h { font-size: clamp(36px, min(5.4vw, 7.4svh), 80px); } }
@media (max-width: 639px) { main > .hero--carousel .hc-h { font-size: clamp(32px, 10.2vw, 42px); } }
@media (max-width: 639px) and (max-height: 760px) { main > .hero--carousel .hc-h { font-size: clamp(30px, 9.2vw, 36px); } }
/* stacked layouts: the photo fills what is left instead of sizing the slide by its own ratio */
@media (max-width: 1023px) {
  .hc-pic { position: relative; }
  .hc-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
}
@media (max-width: 370px) {
  .nav:not(.is-open) .nav__actions .btn { padding-inline: 8px; font-size: 12px; }
  .nav__bar { gap: 6px; }
}
/* beats system.css "main > :is(section,.section) > :is(.wrap,.container):not(.grid)" (flex column) */
main > .hero.hero--carousel > .wrap:not(.grid) { display: grid; grid-template-rows: 1fr auto; row-gap: 20px; flex: 1 0 auto; }
@media (max-width: 639px) { main > .hero.hero--carousel > .wrap:not(.grid) { row-gap: 12px; } }

/* =================================================================== v26: the offline phone, animated
   A realistic phone running a lesson: it saves for offline, the network drops, a toast says so, and the
   reading carries on (the page scrolls). One 12 s CSS loop with a pause button (js/phone-demo.js);
   under reduced motion it rests on the finished, offline frame. */
.phone-stage { position: relative; min-height: 600px; display: grid; place-items: center; padding: 44px 24px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 18%, #e3f5f7 0%, #cdeaee 55%, #bfe2e7 100%); }
.device { --w: 290px; position: relative; width: var(--w); aspect-ratio: 9 / 19.2; border-radius: 48px; padding: 11px;
  background: linear-gradient(145deg, #2a3150 0%, #181d38 45%, #0f1328 100%);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .14), inset 0 0 0 5px #0d1022, 0 2px 4px rgb(24 29 56 / .25), 0 40px 80px -30px rgb(24 29 56 / .55), 0 18px 30px -18px rgb(24 29 56 / .35); }
.device__btn { position: absolute; width: 4px; border-radius: 2px; background: #232a48; }
.device__btn--a { left: -3px; top: 120px; height: 34px; }
.device__btn--b { left: -3px; top: 168px; height: 56px; }
.device__btn--c { right: -3px; top: 150px; height: 78px; }
.device__screen { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.device__island { position: absolute; left: 50%; top: 10px; width: 92px; height: 26px; margin-left: -46px; border-radius: 14px; background: #0b0d18; z-index: 3; }
.device__status { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 6px 28px; font: 600 13px/1 var(--font-text); color: var(--ink); min-height: 44px; }
.device__icons { display: inline-flex; align-items: center; gap: 6px; }
.sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.sig b { width: 3px; background: var(--ink); border-radius: 1px; }
.sig b:nth-child(1) { height: 4px; } .sig b:nth-child(2) { height: 6px; } .sig b:nth-child(3) { height: 8px; } .sig b:nth-child(4) { height: 11px; }
.net { display: inline-flex; } .net .sic { width: 15px; height: 15px; }
.net--off { display: none; color: #9a6700; }
.bat { position: relative; width: 24px; height: 11px; border: 1.5px solid var(--ink); border-radius: 3px; padding: 1px; }
.bat::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: var(--ink); }
.bat b { display: block; height: 100%; width: 72%; background: var(--ink); border-radius: 1px; }

.app { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.app__bar { display: flex; align-items: center; gap: 8px; padding: 6px 18px 10px; border-bottom: 1px solid var(--line); font: 700 15px/1 var(--font-display); color: var(--ink); }
.app__bar img { border-radius: 5px; }
.app__bar b { color: var(--teal-text); font-weight: inherit; }
.app__chip { margin-left: auto; font: 500 11px/1 var(--font-text); padding: 4px 8px; border-radius: 999px; background: var(--p-surface); color: var(--teal-text); }
.app__scroll { padding: 14px 18px 24px; display: grid; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.app__scroll p { margin: 0; }
.app__crumb { font-size: 12px; color: var(--muted); }
.app__title { font: 800 26px/1.05 "Bricolage Grotesque", var(--font-display); letter-spacing: -0.02em; }
.app__save { position: relative; display: grid; gap: 6px; font-size: 12px; font-weight: 500; }
.app__save-label { color: var(--muted); }
.app__save-done { display: none; align-items: center; gap: 5px; color: #1a7f37; }
.app__save-done .sic { width: 14px; height: 14px; }
.app__save-bar { display: block; height: 4px; border-radius: 2px; background: #e6eef0; overflow: hidden; }
.app__save-bar b { display: block; height: 100%; width: 100%; background: var(--teal-text); }
.app__eq { padding: 10px 12px; border-radius: 10px; background: var(--p-surface); font: 500 13px/1.4 "IBM Plex Mono", ui-monospace, monospace; }
.app__laws { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.5px; }
.app__q { border: 1.5px dashed var(--line-strong); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.app__q span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.app__q b { color: #1a7f37; }
.app__toast { position: absolute; left: 12px; right: 12px; bottom: 26px; display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 14px;
  background: var(--ink); color: #fff; font-size: 12px; line-height: 1.35; box-shadow: 0 10px 24px -10px rgb(24 29 56 / .6); opacity: 0; transform: translateY(16px); }
.app__toast .sic { width: 16px; height: 16px; color: #ffd27a; flex: none; }
.app__toast b { font-weight: 600; }
.device__home { position: absolute; left: 50%; bottom: 8px; width: 110px; height: 4px; margin-left: -55px; border-radius: 2px; background: #181d38; opacity: .85; }
.phone-pause { position: absolute; right: 16px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.phone-pause svg { width: 12px; height: 12px; }
.phone-pause:focus-visible { outline: 2px solid var(--teal-text); outline-offset: 3px; }

/* the 12 s story: swaps by opacity on stacked pairs, so every browser shows one state at a time */
.device__icons { position: relative; }
.netpair { position: relative; display: inline-block; width: 15px; height: 15px; }
.netpair .net { position: absolute; inset: 0; display: inline-flex; }
.net--off { opacity: 0; }
.app__save-row { display: grid; }
.app__save-row > * { grid-area: 1 / 1; }
.app__save-done { display: inline-flex; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  [data-phone-demo] .app__save-bar b { animation: ph-save 12s linear infinite; }
  [data-phone-demo] .app__save-label { animation: ph-a 12s steps(1, end) infinite; }
  [data-phone-demo] .app__save-done { animation: ph-b 12s steps(1, end) infinite; }
  [data-phone-demo] .net--on { animation: ph-on 12s steps(1, end) infinite; }
  [data-phone-demo] .net--off { animation: ph-off 12s steps(1, end) infinite; }
  [data-phone-demo] .app__toast { animation: ph-toast 12s cubic-bezier(.2,.8,.2,1) infinite; }
  [data-phone-demo] .app__scroll { animation: ph-scroll 12s cubic-bezier(.65,0,.35,1) infinite; }
  [data-phone-demo].is-paused * { animation-play-state: paused !important; }
}
@keyframes ph-save  { 0% { width: 0; } 16% { width: 100%; } 100% { width: 100%; } }
@keyframes ph-a     { 0% { opacity: 1; } 17% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ph-b     { 0% { opacity: 0; } 17% { opacity: 1; } 100% { opacity: 1; } }
@keyframes ph-on    { 0% { opacity: 1; } 28% { opacity: 0; } 96% { opacity: 1; } 100% { opacity: 1; } }
@keyframes ph-off   { 0% { opacity: 0; } 28% { opacity: 1; } 96% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ph-toast { 0%, 28% { opacity: 0; transform: translateY(16px); } 32%, 58% { opacity: 1; transform: none; } 63%, 100% { opacity: 0; transform: translateY(16px); } }
@keyframes ph-scroll { 0%, 40% { transform: none; } 78%, 90% { transform: translateY(-120px); } 97%, 100% { transform: none; } }
/* reduced motion: the finished, offline frame */
@media (prefers-reduced-motion: reduce) {
  .app__save-label, .net--on { opacity: 0; }
  .app__save-done, .net--off { opacity: 1; }
  .app__toast { opacity: 1; transform: none; }
  .phone-pause { display: none; }
}
@media (max-width: 639px) { .phone-stage { min-height: 520px; padding: 32px 12px; } .device { --w: 252px; } }
/* the phone stage holds the phone at its own height (the kit's .frame adds a ratio and a lit look) */
#offline .phone-stage { --ratio: 0px; min-height: 0; height: auto; padding: 48px 24px; }
#offline .grid { align-items: center; }
/* admission: the graduate photograph keeps a real height now that sections take their content's height */
#admission .grad-photo { flex: none; aspect-ratio: 16 / 10; height: auto; }