/* The homepage (pages/index.html), rebuilt 2026-10-05 to the owner's
   reference board: "Every mark, accounted for." and "Everything works
   together." One sheet, scoped under .hp, tokens only: every colour is an
   --nb-* token or a color-mix of tokens, so both themes come from
   notebook-tokens.css. One typeface, the notes' IBM Plex Sans (the owner:
   "use the font we use in the notes"); Vollkorn appears once, as the
   examiner's verdict under the mark scheme, the one judgment moment.

   Motion lives in home-landing.js. Every hidden starting state below is
   keyed on html.hp-anim, which only the script adds, and only when motion
   is allowed: with no script, or with reduced motion, the page renders in
   its final state. */

.hp {
  --hp-wrap: 1240px;
  --hp-wrap-wide: 1440px;
  --hp-gutter: clamp(20px, 4vw, 48px);
  --hp-panel: color-mix(in srgb, var(--nb-blue) 3%, var(--nb-paper-raised));
  --hp-well: color-mix(in srgb, var(--nb-blue) 4%, var(--nb-paper));
  --hp-line: var(--nb-border);
  --hp-line-soft: color-mix(in srgb, var(--nb-border) 70%, transparent);
  --hp-ok: var(--nb-success);
  --hp-no: var(--nb-red);
  --hp-depth: var(--nb-home-depth);
  --hp-system: var(--nb-home-system);
  /* the page's display sizes: the hero H1 is the system's public hero size;
     the section headings step down from it (DESIGN.md, homepage amendment) */
  --hp-h1: clamp(2.625rem, 4.5vw, 4rem);
  --hp-h2: clamp(2rem, 3.5vw, 3rem);
  --hp-h2-xl: clamp(2.5rem, 4.2vw, 3.75rem);
  --hp-ease: var(--nb-ease);

  color: var(--nb-ink);
  font-family: var(--nb-sans);
  overflow-x: clip;
}
/* by day the sheets are the plain raised paper: a blue tint on light
   paper reads as grey */
html.theme-light .hp {
  --hp-panel: var(--nb-paper-raised);
  --hp-well: color-mix(in srgb, var(--nb-blue) 3%, var(--nb-paper));
}

:where(.hp) *,
:where(.hp) *::before,
:where(.hp) *::after { box-sizing: border-box; }

/* one-class resets: they beat the site's bare element rules (styles.css
   gives every ul a left padding and every li a bottom margin) and lose,
   by coming first, to every component rule below */
.hp :where(p, h1, h2, h3, ol, ul, li, dl, dt, dd, figure, blockquote) { margin: 0; }
.hp :where(ol, ul) { padding: 0; list-style: none; }
.hp :where(i) { font-style: normal; }

.hp-wrap {
  width: 100%;
  max-width: calc(var(--hp-wrap) + var(--hp-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--hp-gutter);
}

.hp-section { padding-block: clamp(72px, 9vw, 128px); }

/* ── Type ─────────────────────────────────────────────────────────────── */

.hp-h2 {
  font: 600 var(--hp-h2)/1.08 var(--nb-sans);
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--nb-ink);
}
.hp-h2--xl {
  font-size: var(--hp-h2-xl);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.hp-accent { color: var(--nb-blue); }

.hp-lede {
  margin-top: 18px;
  max-width: 34em;
  font: 400 var(--nb-text-md)/1.6 var(--nb-sans);
  font-size: clamp(var(--nb-text-md), 1.35vw, var(--nb-text-lg));
  color: var(--nb-ink);
  text-wrap: pretty;
}

.hp-kicker {
  margin-bottom: 20px;
  font: 600 var(--nb-text-sm)/1.2 var(--nb-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nb-blue);
}

.hp-head { margin-bottom: clamp(40px, 5vw, 64px); }
.hp-head--center { text-align: center; }
.hp-head--center .hp-lede { margin-inline: auto; }

.hp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nb-blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--nb-blue) 45%, transparent);
  transition: text-decoration-color var(--nb-dur-2) var(--hp-ease), color var(--nb-dur-2) var(--hp-ease);
}
.hp-link svg { width: 18px; height: 18px; transition: transform var(--nb-dur-2) var(--hp-ease); }
.hp-link:hover { color: var(--nb-blue-strong); text-decoration-color: currentColor; }
.hp-link:hover svg { transform: translateX(3px); }
.hp-link:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 3px; border-radius: var(--nb-r-sm); }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--nb-r-pill);
  font: 600 var(--nb-text-md)/1 var(--nb-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--nb-dur-2) var(--hp-ease), border-color var(--nb-dur-2) var(--hp-ease),
              color var(--nb-dur-2) var(--hp-ease), transform var(--nb-dur-2) var(--hp-ease),
              box-shadow var(--nb-dur-2) var(--hp-ease);
}
.hp-btn-arrow { width: 18px; height: 18px; transition: transform var(--nb-dur-2) var(--hp-ease); }
.hp-btn:hover .hp-btn-arrow { transform: translateX(3px); }
.hp-btn:active { transform: translateY(1px); }
.hp-btn:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 3px; }

.hp-btn--primary {
  background: var(--nb-blue);
  color: var(--nb-on-blue);
  box-shadow: var(--nb-shadow-1);
}
.hp-btn--primary:hover {
  background: var(--nb-blue-strong);
  color: var(--nb-on-blue);
  transform: translateY(-1px);
  box-shadow: var(--nb-shadow-2);
}

.hp-btn--ghost {
  color: var(--nb-ink);
  border-color: var(--hp-line);
  background: transparent;
}
.hp-btn--ghost:hover { border-color: var(--nb-blue); color: var(--nb-blue); }

.hp-btn--outline {
  min-height: 48px;
  padding: 0 22px;
  color: var(--nb-ink);
  border-color: color-mix(in srgb, var(--nb-ink) 22%, transparent);
  background: color-mix(in srgb, var(--nb-paper-raised) 60%, transparent);
}
.hp-btn--outline:hover { border-color: var(--nb-blue); color: var(--nb-blue); }

/* ── Shared panel grammar ─────────────────────────────────────────────── */

.hp-panel {
  position: relative;
  background: var(--hp-panel);
  border: 1px solid var(--hp-line);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-shadow-1);
}

.hp-panel-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hp-panel-titles { display: grid; gap: 4px; }
.hp-panel-kicker {
  font: 600 var(--nb-text-xs)/1.2 var(--nb-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nb-blue);
}
.hp-panel-title { font: 500 var(--nb-text-lg)/1.25 var(--nb-sans); letter-spacing: -0.01em; }
.hp-panel-title i,
.hp-answer-foot i,
.hp-programmes i,
.hp-sheet-crumb i,
.hp-mini-subject i { padding-inline: 0.35em; color: var(--nb-blue); }

/* the icon plate: a soft wash of the plate's hue behind a line icon */
.hp-plate {
  --hp-hue: var(--nb-blue);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--nb-r-lg);
  color: var(--hp-hue);
  background: color-mix(in srgb, var(--hp-hue) 12%, var(--nb-paper-raised));
  border: 1px solid color-mix(in srgb, var(--hp-hue) 26%, transparent);
}
.hp-plate svg { width: 24px; height: 24px; }
.hp-plate--blue { --hp-hue: var(--nb-blue); }
.hp-plate--depth { --hp-hue: var(--hp-depth); }
.hp-plate--system { --hp-hue: var(--hp-system); }
.hp-plate--green { --hp-hue: var(--hp-ok); }

/* verdict discs: green tick, red cross */
.hp-verdict {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.hp-verdict svg { width: 16px; height: 16px; }
.hp-verdict--yes { background: var(--hp-ok); color: var(--nb-paper); }
.hp-verdict--no { background: var(--hp-no); color: var(--nb-paper); }

/* ═══ Hero ═══════════════════════════════════════════════════════════════ */

.hp-hero { padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 104px); }

.hp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
}

.hp-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 var(--nb-text-base)/1.2 var(--nb-sans);
  color: var(--nb-ink);
}
.hp-hero-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: var(--nb-r-sm);
  background: var(--nb-blue);
}

.hp-hero-title {
  margin-top: 24px;
  font: 600 var(--hp-h1)/1.02 var(--nb-sans);
  letter-spacing: -0.038em;
  text-wrap: balance;
  color: var(--nb-ink);
}

.hp-hero-sub {
  margin-top: 24px;
  max-width: 31em;
  font: 400 clamp(var(--nb-text-md), 1.4vw, var(--nb-text-lg))/1.6 var(--nb-sans);
  text-wrap: pretty;
}

.hp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.hp-hero-note {
  margin-top: 16px;
  font: 400 var(--nb-text-sm)/1.5 var(--nb-sans);
}

.hp-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--hp-line);
  max-width: 34em;
}
.hp-fact { display: grid; gap: 4px; }
.hp-fact dt { order: 2; font: 500 var(--nb-text-sm)/1.3 var(--nb-sans); }
.hp-fact dd {
  order: 1;
  font: 600 var(--nb-text-xl)/1.1 var(--nb-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ── The stage ── */

.hp-stage {
  position: relative;
  height: 548px;
  --hp-px: 0px;
}

/* the note sheet on the left; the flashcard and the MCQ stacked on the
   right, over the sheet's padding only, so no word of the note is hidden */
.hp-sheet {
  position: absolute;
  left: 0;
  top: 8px;
  width: 58%;
  background: var(--hp-panel);
  border: 1px solid var(--hp-line);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-shadow-2);
  overflow: hidden;
}

.hp-sheet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--hp-line);
  background: var(--hp-well);
}
.hp-sheet-crumb { font: 600 var(--nb-text-xs)/1.2 var(--nb-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.hp-sheet-crumb i { padding-inline: 0.2em; }
.hp-sheet-tabs { display: flex; gap: 18px; font: 500 var(--nb-text-xs)/1 var(--nb-sans); }
.hp-sheet-tabs b {
  font-weight: 600;
  color: var(--nb-blue);
  box-shadow: 0 7px 0 -5px var(--nb-blue);
  padding-bottom: 2px;
}

.hp-sheet-body { padding: 22px 30px 24px 24px; }
.hp-sheet-title { font: 600 var(--nb-text-lg)/1.25 var(--nb-sans); letter-spacing: -0.015em; }
.hp-sheet-h {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--hp-line);
  font: 600 var(--nb-text-base)/1.3 var(--nb-sans);
}
.hp-sheet-p { margin-top: 8px; font: 400 var(--nb-text-sm)/1.6 var(--nb-sans); }
.hp mark {
  color: inherit;
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--nb-blue) 26%, transparent) 58%);
  padding-inline: 1px;
}

.hp-particles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.hp-particles figure {
  display: grid;
  gap: 4px;
  padding: 8px 6px 7px;
  border: 1px solid var(--hp-line);
  border-radius: var(--nb-r-md);
  background: var(--hp-well);
  text-align: center;
}
.hp-particles svg { width: 100%; height: auto; display: block; }
.hp-particles figcaption { font: 600 var(--nb-text-xs)/1.2 var(--nb-sans); }
.hp-particles circle {
  fill: color-mix(in srgb, var(--nb-blue) 82%, var(--nb-paper));
  stroke: var(--nb-paper-raised);
  stroke-width: 1.2;
}
.hp-p-trail path { stroke: color-mix(in srgb, var(--nb-blue) 55%, transparent); stroke-width: 1.4; stroke-linecap: round; fill: none; }

.hp-cue {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  font: 400 var(--nb-text-sm)/1.55 var(--nb-sans);
}
.hp-cue b { color: var(--hp-ok); font-weight: 600; margin-right: 4px; }
.hp-cue-tick {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  color: var(--hp-ok);
  background: color-mix(in srgb, var(--hp-ok) 16%, transparent);
}
.hp-cue-tick svg { width: 12px; height: 12px; }

/* the flashcard: two faces, turned on hover, focus or tap */
.hp-flash {
  position: absolute;
  right: 0;
  top: 30px;
  width: 45%;
  height: 176px;
  perspective: 1400px;
  z-index: 2;
  translate: 0 calc(var(--hp-px) * -0.6);
}
.hp-flash-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 780ms var(--hp-ease);
  transform: rotate(2.2deg);
  cursor: pointer;
}
.hp-flash-card.is-turned { transform: rotate(2.2deg) rotateY(180deg); }
.hp-flash-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border-radius: var(--nb-r-lg);
  border: 1px solid var(--hp-line);
  background: var(--nb-paper-raised);
  box-shadow: var(--nb-shadow-3);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hp-flash-face p { font: 500 var(--nb-text-lg)/1.35 var(--nb-sans); letter-spacing: -0.015em; }
.hp-flash-face--back { transform: rotateY(180deg); }
.hp-flash-face--back p { font: 400 var(--nb-text-sm)/1.55 var(--nb-sans); letter-spacing: 0; }
.hp-flash-label {
  font: 600 var(--nb-text-xs)/1.2 var(--nb-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nb-blue);
}
.hp-flash-label i { margin-left: 6px; letter-spacing: 0.04em; color: var(--nb-ink); font-weight: 500; text-transform: none; }
.hp-flash-label--answer { color: var(--hp-ok); }
.hp-flash-hint {
  margin-top: auto;
  font: 500 var(--nb-text-xs)/1.2 var(--nb-sans);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hp-flash-hint::before {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
}

/* the answered MCQ */
.hp-quiz {
  position: absolute;
  right: 0;
  top: 236px;
  width: 45%;
  padding: 16px 16px 14px;
  border-radius: var(--nb-r-lg);
  border: 1px solid var(--hp-line);
  background: var(--nb-paper-raised);
  box-shadow: var(--nb-shadow-3);
  z-index: 3;
  translate: 0 calc(var(--hp-px) * -1.1);
}
.hp-quiz-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 600 var(--nb-text-xs)/1.2 var(--nb-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nb-blue);
}
.hp-quiz-meta i { margin-left: 6px; letter-spacing: 0.04em; color: var(--nb-ink); font-weight: 500; text-transform: none; }
.hp-quiz-ok {
  padding: 4px 10px;
  border-radius: var(--nb-r-pill);
  color: var(--hp-ok);
  background: color-mix(in srgb, var(--hp-ok) 14%, transparent);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: var(--nb-text-xs);
}
.hp-quiz-q { margin-top: 10px; font: 500 var(--nb-text-sm)/1.45 var(--nb-sans); }
.hp-quiz-opts { display: grid; gap: 6px; margin-top: 12px; }
.hp-quiz-opts li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--hp-line);
  border-radius: var(--nb-r-md);
  font: 400 var(--nb-text-xs)/1.35 var(--nb-sans);
}
.hp-quiz-opts b {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--hp-line);
  font: 600 var(--nb-text-xs)/1 var(--nb-sans);
}
.hp-quiz-opts li.is-right {
  border-color: color-mix(in srgb, var(--hp-ok) 55%, transparent);
  background: color-mix(in srgb, var(--hp-ok) 11%, transparent);
  font-weight: 500;
}
.hp-quiz-opts li.is-right b { border-color: transparent; background: var(--hp-ok); color: var(--nb-paper); }
.hp-quiz-tick { margin-left: auto; width: 16px; height: 16px; color: var(--hp-ok); flex: none; }

.hp-sheet { translate: 0 calc(var(--hp-px) * 0.25); }

/* ═══ Every mark, accounted for ═════════════════════════════════════════ */

.hp-mark .hp-wrap { --hp-wrap: 1180px; }

.hp-mark-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.04fr);
  align-items: stretch;
}
.hp-answer { display: flex; flex-direction: column; align-self: center; }

.hp-answer,
.hp-eval { padding: clamp(24px, 2.6vw, 34px); }

.hp-answer .hp-panel-head,
.hp-eval .hp-panel-head {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hp-line);
}

.hp-answer-q {
  margin-top: 24px;
  font: 600 var(--nb-text-md)/1.45 var(--nb-sans);
}
.hp-answer-text {
  margin-block: 16px 28px;
  padding-left: 0;
}
.hp-answer-text p {
  font: 400 clamp(var(--nb-text-md), 1.5vw, var(--nb-text-xl))/1.75 var(--nb-sans);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.hp-answer-foot {
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid var(--hp-line);
  font: 500 var(--nb-text-xs)/1.4 var(--nb-sans);
}
.hp-answer-foot i { padding-inline: 0.25em; }

/* the phrases in the answer that the rows point at */
.hp-hit {
  --hp-hue: var(--hp-ok);
  padding: 0.04em 0.12em;
  margin-inline: -0.12em;
  border-radius: var(--nb-r-sm);
  background-color: color-mix(in srgb, var(--hp-hue) var(--hp-wash, 15%), transparent);
  transition: background-color var(--nb-dur-3) var(--hp-ease), text-decoration-color var(--nb-dur-3) var(--hp-ease);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  cursor: default;
}
.hp-hit--miss {
  --hp-hue: var(--hp-no);
  text-decoration: underline wavy var(--hp-no);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}
.hp-hit sup {
  margin-left: 2px;
  font: 700 var(--nb-text-xs)/0 var(--nb-sans);
  color: var(--nb-ink);
}
.hp-hit.is-lit { --hp-wash: 32%; }

.hp-mark-arrow {
  align-self: center;
  display: grid;
  place-items: center;
  color: var(--nb-blue);
}
.hp-mark-arrow svg { width: 40px; height: 20px; transition: rotate var(--nb-dur-3) var(--hp-ease); }

.hp-eval-rows { margin-top: 6px; }
.hp-eval-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 16px 10px;
  margin-inline: -10px;
  border-radius: var(--nb-r-md);
  border-bottom: 1px solid var(--hp-line-soft);
  transition: background-color var(--nb-dur-2) var(--hp-ease);
}
.hp-eval-row:last-child { border-bottom: 0; }
.hp-eval-row.is-lit { background: color-mix(in srgb, var(--hp-ok) 8%, transparent); }
.hp-eval-row--miss.is-lit { background: color-mix(in srgb, var(--hp-no) 8%, transparent); }
.hp-eval-text { display: grid; gap: 4px; padding-top: 4px; }
.hp-eval-text b { font: 500 var(--nb-text-md)/1.35 var(--nb-sans); }
.hp-eval-text span { font: 400 var(--nb-text-sm)/1.5 var(--nb-sans); }
.hp-eval-score {
  padding-top: 5px;
  font: 600 var(--nb-text-md)/1.2 var(--nb-sans);
  font-variant-numeric: tabular-nums;
}
.hp-eval-row--miss .hp-eval-score { color: var(--hp-no); }

.hp-score {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: var(--nb-r-lg);
  border: 1px solid var(--hp-line);
  background: var(--hp-well);
}
.hp-ring { width: 52px; height: 52px; display: block; }
.hp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hp-ring circle { fill: none; stroke-width: 4.5; }
.hp-ring-track { stroke: color-mix(in srgb, var(--nb-blue) 18%, transparent); }
.hp-ring-fill {
  stroke: var(--nb-blue);
  stroke-linecap: round;
  stroke-dasharray: 75 100;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1100ms var(--hp-ease);
}
.hp-score-figure {
  font: 500 var(--nb-text-xl)/1 var(--nb-sans);
  white-space: nowrap;
  padding-right: 18px;
  border-right: 1px solid var(--hp-line);
}
.hp-score-figure b {
  font-size: var(--nb-text-3xl);
  font-weight: 500;
  color: var(--nb-blue);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hp-score-note {
  font: 500 var(--nb-text-base)/1.5 var(--nb-sans);
  color: var(--hp-no);
  text-wrap: pretty;
}

.hp-mark-try { margin-top: 32px; text-align: center; font-size: var(--nb-text-md); }

/* ═══ Everything works together ═════════════════════════════════════════ */

.hp-flow .hp-wrap { --hp-wrap: var(--hp-wrap-wide); }

.hp-flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "steps" "points";
}
.hp-flow-copy { grid-area: copy; }
.hp-flow-steps { grid-area: steps; }
.hp-points { grid-area: points; }

.hp-flow-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: "kicker kicker" "title lede" "title cta";
  column-gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 4.5vw, 64px);
}
.hp-flow-copy .hp-kicker { grid-area: kicker; }
.hp-flow-copy .hp-h2 { grid-area: title; }
.hp-flow-copy .hp-lede { grid-area: lede; margin-top: 0; }
.hp-flow-copy .hp-btn { grid-area: cta; justify-self: start; margin-top: 24px; }
.hp-programmes {
  margin-top: 36px;
  font: 600 var(--nb-text-xs)/1.2 var(--nb-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hp-programmes i { padding-inline: 0.5em; }

.hp-flow-steps {
  display: grid;
  /* the columns share the pictures' widths, so all three show at one scale */
  grid-template-columns: minmax(0, 880fr) 32px minmax(0, 804fr) 32px minmax(0, 978fr);
  align-items: stretch;
}

.hp-step { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hp-step-head { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.hp-step-head .hp-plate { width: 42px; height: 42px; border-radius: var(--nb-r-md); }
.hp-step-head .hp-plate svg { width: 21px; height: 21px; }
.hp-step-head > span:last-child { display: grid; gap: 3px; }
.hp-step-head b {
  font: 600 var(--nb-text-xs)/1.2 var(--nb-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hp-step-head > span:last-child > span { font: 400 var(--nb-text-sm)/1.4 var(--nb-sans); }

.hp-flow-arrow {
  display: grid;
  place-items: center;
  padding-top: 60px;
  color: var(--nb-blue);
}
.hp-flow-arrow svg { width: 22px; height: 22px; }

/* the three steps are the real pages, captured from chapter 1 (A Level
   Edexcel Biology 1.1.1): the note, the MCQ under its Topic Questions /
   Multiple Choice Questions bar, and the answer feedback with the
   misconception notice. One picture per theme. Re-shoot after a study-page
   redesign (scratchpad real_caps.py, 900px at 2x). */
.hp-shot {
  display: block;
  overflow: hidden;
  aspect-ratio: 880 / 760;
  transition: border-color var(--nb-dur-2) var(--hp-ease), box-shadow var(--nb-dur-2) var(--hp-ease), transform var(--nb-dur-2) var(--hp-ease);
}
.hp-shot--practice { aspect-ratio: 804 / 760; }
.hp-shot--feedback { aspect-ratio: 978 / 760; }
.hp-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hp-shot-light { display: none !important; }
html.theme-light .hp-shot-dark { display: none !important; }
html.theme-light .hp-shot-light { display: block !important; }
.hp-shot:hover { border-color: color-mix(in srgb, var(--nb-blue) 55%, transparent); box-shadow: var(--nb-shadow-2); transform: translateY(-2px); }
.hp-shot:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 3px; }

.hp-mini-link-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--nb-r-md);
  color: var(--nb-blue);
  background: color-mix(in srgb, var(--nb-blue) 12%, transparent);
}
.hp-mini-link-icon svg { width: 16px; height: 16px; }

/* the three points under the steps */
.hp-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 48px;
  margin-top: clamp(56px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--hp-line);
}
.hp-points li { display: flex; gap: 16px; align-items: flex-start; }
.hp-points li > span:last-child { display: grid; gap: 4px; padding-top: 2px; }
.hp-points b { font: 600 var(--nb-text-md)/1.3 var(--nb-sans); }
.hp-points li > span:last-child > span { font: 400 var(--nb-text-base)/1.5 var(--nb-sans); }

/* ═══ The tutor ═════════════════════════════════════════════════════════ */

.hp-tutor-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.hp-asks { display: grid; gap: 8px; margin-top: 36px; max-width: 28em; }
.hp-ask {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  border: 1px solid var(--hp-line);
  border-radius: var(--nb-r-lg);
  background: transparent;
  color: var(--nb-ink);
  font: 500 var(--nb-text-md)/1.3 var(--nb-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--nb-dur-2) var(--hp-ease), background-color var(--nb-dur-2) var(--hp-ease),
              transform var(--nb-dur-2) var(--hp-ease);
}
.hp-ask::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--nb-blue);
  transition: background-color var(--nb-dur-2) var(--hp-ease);
}
.hp-ask:hover { border-color: color-mix(in srgb, var(--nb-blue) 60%, transparent); }
.hp-ask:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 2px; }
.hp-ask.is-on {
  border-color: var(--nb-blue);
  background: color-mix(in srgb, var(--nb-blue) 10%, transparent);
}
.hp-ask.is-on::before { background: var(--nb-blue); }

.hp-chat { padding: 22px 24px 26px; }
.hp-chat-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--hp-line); }
.hp-chat-head .hp-plate { width: 42px; height: 42px; border-radius: var(--nb-r-md); }
.hp-chat-head .hp-plate svg { width: 21px; height: 21px; }
.hp-chat-head .hp-panel-title { font-size: var(--nb-text-md); }

.hp-chat-log { display: grid; margin-top: 22px; min-height: 272px; }
.hp-turn { grid-area: 1 / 1; display: none; flex-direction: column; gap: 14px; }
.hp-turn.is-on { display: flex; }

.hp-me {
  align-self: flex-end;
  max-width: 80%;
  padding: 10px 16px;
  border-radius: var(--nb-r-lg) var(--nb-r-lg) var(--nb-r-sm) var(--nb-r-lg);
  background: var(--nb-blue);
  color: var(--nb-on-blue);
  font: 500 var(--nb-text-base)/1.4 var(--nb-sans);
}
.hp-bot {
  align-self: flex-start;
  display: grid;
  gap: 12px;
  max-width: 92%;
  padding: 14px 16px;
  border-radius: var(--nb-r-lg) var(--nb-r-lg) var(--nb-r-lg) var(--nb-r-sm);
  border: 1px solid var(--hp-line);
  background: var(--hp-well);
  font: 400 var(--nb-text-base)/1.6 var(--nb-sans);
}
.hp-bot b { font-weight: 600; }
.hp-bot-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--nb-r-md);
  border: 1px solid var(--hp-line);
  background: var(--nb-paper-raised);
  line-height: 1.35;
}
.hp-bot-card > span:last-child { display: grid; gap: 2px; }
.hp-bot-card > span:last-child span { font-size: var(--nb-text-sm); }
.hp-bot-card--quiz { grid-template-columns: minmax(0, 1fr) auto; }
.hp-bot-card--quiz > span:first-child { display: grid; gap: 2px; }
.hp-bot-card--quiz > span:first-child span { font-size: var(--nb-text-sm); }
.hp-bot-card--quiz i { padding-inline: 0.3em; color: var(--nb-blue); }
.hp-bot-btn {
  padding: 9px 14px;
  border-radius: var(--nb-r-pill);
  background: var(--nb-blue);
  color: var(--nb-on-blue);
  font: 600 var(--nb-text-sm)/1 var(--nb-sans);
  white-space: nowrap;
}
.hp-bot-cue { display: flex; gap: 10px; align-items: flex-start; font-size: var(--nb-text-sm); line-height: 1.55; }
.hp-bot-cue b { color: var(--hp-ok); margin-right: 4px; }
.hp-bot-cue i { font-style: italic; }

.hp-weak { display: grid; gap: 10px; }
.hp-weak li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  font-size: var(--nb-text-sm);
}
.hp-weak b { font-variant-numeric: tabular-nums; }
.hp-weak i {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: var(--nb-r-sm);
  background: color-mix(in srgb, var(--nb-blue) 16%, transparent);
  position: relative;
  overflow: hidden;
}
.hp-weak i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--hp-w);
  border-radius: inherit;
  background: var(--nb-blue);
}

.hp-plan { display: grid; gap: 8px; }
.hp-plan li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--nb-r-md);
  border: 1px solid var(--hp-line);
  background: var(--nb-paper-raised);
  font-size: var(--nb-text-sm);
  line-height: 1.45;
}
.hp-plan b { color: var(--nb-blue); }

/* ═══ Courses ═══════════════════════════════════════════════════════════ */

.hp-course-rows { border-top: 1px solid var(--hp-line); }
.hp-course-rows li { border-bottom: 1px solid var(--hp-line); }
.hp-course {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(0, 2fr) auto;
  gap: 16px 40px;
  align-items: center;
  padding: 26px 16px;
  margin-inline: -16px;
  border-radius: var(--nb-r-lg);
  color: var(--nb-ink);
  text-decoration: none;
  transition: background-color var(--nb-dur-2) var(--hp-ease);
}
.hp-course:hover { background: color-mix(in srgb, var(--nb-blue) 6%, transparent); }
.hp-course:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: -2px; }
.hp-course-name { display: grid; gap: 4px; }
.hp-course-name b { font: 600 var(--nb-text-2xl)/1.1 var(--nb-sans); letter-spacing: -0.02em; }
.hp-course-name span { font: 400 var(--nb-text-sm)/1.3 var(--nb-sans); }
.hp-course-subjects { font: 400 var(--nb-text-md)/1.6 var(--nb-sans); text-wrap: pretty; }
.hp-course-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nb-blue);
  font: 600 var(--nb-text-base)/1.2 var(--nb-sans);
  white-space: nowrap;
}
.hp-course-go svg { width: 18px; height: 18px; transition: transform var(--nb-dur-2) var(--hp-ease); }
.hp-course:hover .hp-course-go svg { transform: translateX(4px); }

/* ═══ Pricing: the shared panel, dressed as this page's sheet ═════════ */

.hp-price { padding-inline: 0; }
.hp-price .lp-pricing-card {
  max-width: 1080px;
  margin-inline: auto;
  border: 1px solid var(--hp-line);
  border-radius: var(--nb-r-lg);
  background: var(--hp-panel);
  box-shadow: var(--nb-shadow-2);
  padding: clamp(24px, 3vw, 40px);
}
/* The panel keeps its words and its form (Website list v1.0, item 5); only
   its dress changes here: the periods become three tiles, the price the
   page's figure, the button the page's pill. (0,3,1) beats the public
   skin's html .lp-pricing-card rules (0,2,1) without touching them, so
   /pricing/ is unchanged. */
html .hp .lp-pricing-card .lp-pricing-badge {
  font: 600 var(--nb-text-xs)/1.2 var(--nb-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nb-blue);
}
html .hp .lp-pricing-card .lp-plan-selector { gap: 10px; }
html .hp .lp-pricing-card .lp-plan-btn {
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--hp-line);
  border-radius: var(--nb-r-md);
  background: transparent;
  color: var(--nb-ink);
  transition: border-color var(--nb-dur-2) var(--hp-ease), background-color var(--nb-dur-2) var(--hp-ease);
}
html .hp .lp-pricing-card .lp-plan-btn:hover { border-color: color-mix(in srgb, var(--nb-blue) 60%, transparent); }
html .hp .lp-pricing-card .lp-plan-btn--active,
html .hp .lp-pricing-card .lp-plan-btn--active:hover {
  border-color: var(--nb-blue);
  background: color-mix(in srgb, var(--nb-blue) 10%, transparent);
  box-shadow: inset 0 0 0 1px var(--nb-blue);
}
html .hp .lp-pricing-card .lp-plan-check { color: var(--nb-blue); }
html .hp .lp-pricing-card .lp-pricing-amount { margin-top: 28px; }
html .hp .lp-pricing-card .lp-pricing-price {
  font: 600 clamp(3.25rem, 5.5vw, 4.5rem)/0.95 var(--nb-sans);
  letter-spacing: -0.045em;
  color: var(--nb-ink);
}
html .hp .lp-pricing-card .lp-pricing-period { font: 500 var(--nb-text-lg)/1.2 var(--nb-sans); }
html .hp .lp-pricing-card .lp-pricing-cta-primary {
  min-height: 54px;
  border-radius: var(--nb-r-pill);
  font: 600 var(--nb-text-md)/1 var(--nb-sans);
  box-shadow: var(--nb-shadow-1);
}
html .hp .lp-pricing-card .lp-pricing-cta-primary:hover { transform: translateY(-1px); box-shadow: var(--nb-shadow-2); }
html .hp .lp-pricing-card .lp-pricing-card-right-label {
  font: 600 var(--nb-text-xs)/1.2 var(--nb-sans);
  letter-spacing: 0.12em;
  color: var(--nb-blue);
}
html .hp .lp-pricing-card .lp-plan-btn .lp-plan-tax,
html .hp .lp-pricing-card .lp-pricing-tax,
html .hp .lp-pricing-card .lp-pricing-fine {
  color: var(--nb-quiet-2);
  font-size: var(--nb-text-xs);
  font-weight: 400;
}
html .hp .lp-pricing-card .lp-plan-btn .lp-plan-tax { font-size: 0.6875rem; }
/* What's included runs the full height of its column: the rows spread out,
   one hairline each, instead of stopping halfway down */
html .hp .lp-pricing-card .lp-pricing-card-right { display: flex; flex-direction: column; }
html .hp .lp-pricing-card .lp-pricing-benefits {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
html .hp .lp-pricing-card .lp-pricing-benefit {
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--hp-line-soft);
  font-size: var(--nb-text-md);
}
html .hp .lp-pricing-card .lp-pricing-benefit:last-child { border-bottom: 0; }
html .hp .lp-pricing-card .lp-pricing-benefit-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--hp-ok);
  background: color-mix(in srgb, var(--hp-ok) 15%, transparent);
}

/* ═══ Questions ═════════════════════════════════════════════════════════ */

.hp-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.hp-faq-grid .hp-head { margin-bottom: 0; position: sticky; top: calc(var(--nb-chrome-h) + 32px); }
.hp-faq-list { border-top: 1px solid var(--hp-line); }
.hp-qa { border-bottom: 1px solid var(--hp-line); }
.hp-qa summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 72px;
  padding: 20px 0;
  font: 500 var(--nb-text-lg)/1.35 var(--nb-sans);
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.hp-qa summary::-webkit-details-marker { display: none; }
.hp-qa summary svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--nb-blue);
  transition: transform var(--nb-dur-3) var(--hp-ease);
}
.hp-qa[open] summary svg { transform: rotate(45deg); }
.hp-qa summary:hover { color: var(--nb-blue); }
.hp-qa summary:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 4px; border-radius: var(--nb-r-sm); }
.hp-qa p {
  padding: 0 48px 26px 0;
  max-width: 40em;
  font: 400 var(--nb-text-md)/1.65 var(--nb-sans);
}
.hp-qa .hp-link { display: inline; }

/* ═══ Final call ════════════════════════════════════════════════════════ */

.hp-final { padding-top: 0; }
.hp-final-sheet {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: clamp(56px, 8vw, 104px) clamp(24px, 5vw, 64px);
  border-radius: var(--nb-r-lg);
  border: 1px solid var(--hp-line);
  background:
    radial-gradient(var(--nb-grid-dot) 1px, transparent 1px) 0 0 / var(--nb-grid-size) var(--nb-grid-size),
    var(--hp-panel);
  box-shadow: var(--nb-shadow-2);
}
.hp-final-sheet .hp-lede { margin-inline: auto; }
.hp-final-sheet .hp-btn { margin-top: 32px; }

/* ═══ Motion (html.hp-anim is set by home-landing.js only) ══════════════ */

/* the hero's one load choreography (PRODUCT.md, the sanctioned exception) */
html.hp-anim .hp [data-hp-load] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 760ms var(--hp-ease), transform 900ms var(--hp-ease);
  transition-delay: calc(var(--hp-i, 0) * 90ms);
}
html.hp-anim .hp [data-hp-load="1"] { --hp-i: 0; }
html.hp-anim .hp [data-hp-load="2"] { --hp-i: 1; }
html.hp-anim .hp [data-hp-load="3"] { --hp-i: 2; }
html.hp-anim .hp [data-hp-load="4"] { --hp-i: 3; }
html.hp-anim .hp [data-hp-load="5"] { --hp-i: 4; }

html.hp-anim .hp [data-hp-layer] {
  opacity: 0;
  transition: opacity 900ms var(--hp-ease), transform 1100ms var(--hp-ease);
}
html.hp-anim .hp [data-hp-layer="sheet"] { transform: translateY(28px) scale(0.985); transition-delay: 160ms; }
html.hp-anim .hp [data-hp-layer="flash"] { transform: translate(24px, -16px); transition-delay: 460ms; }
html.hp-anim .hp [data-hp-layer="quiz"] { transform: translate(-24px, 28px); transition-delay: 640ms; }

html.hp-anim.hp-in .hp [data-hp-load],
html.hp-anim.hp-in .hp [data-hp-layer] { opacity: 1; transform: none; }

/* the answered option: the tick draws once the card has landed */
html.hp-anim .hp-quiz-tick path { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 520ms var(--hp-ease) 1500ms; }
html.hp-anim.hp-in .hp-quiz-tick path { stroke-dashoffset: 0; }

/* scroll reveals: each fits what it reveals */
html.hp-anim .hp [data-hp-rise] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 800ms var(--hp-ease), transform 900ms var(--hp-ease);
  transition-delay: calc(var(--hp-d, 0) * 1ms);
}
html.hp-anim .hp [data-hp-rise].is-in { opacity: 1; transform: none; }

/* the mark scheme reads itself: rows tick down, the ring fills, the score counts */
html.hp-anim .hp-mark .hp-eval-row { opacity: 0.001; transform: translateX(10px); transition: opacity 600ms var(--hp-ease), transform 700ms var(--hp-ease), background-color var(--nb-dur-2) var(--hp-ease); }
html.hp-anim .hp-mark .hp-eval-row.is-in { opacity: 1; transform: none; }
html.hp-anim .hp-mark .hp-verdict { transform: scale(0.4); opacity: 0; transition: transform 520ms var(--hp-ease), opacity 300ms var(--hp-ease); }
html.hp-anim .hp-mark .hp-eval-row.is-in .hp-verdict { transform: none; opacity: 1; }
html.hp-anim .hp-mark .hp-ring-fill { stroke-dashoffset: 75; }
html.hp-anim .hp-mark.is-scored .hp-ring-fill { stroke-dashoffset: 0; }
html.hp-anim .hp-mark .hp-hit { --hp-wash: 0%; }
html.hp-anim .hp-mark .hp-hit--miss { text-decoration-color: transparent; }
html.hp-anim .hp-mark .hp-hit sup { opacity: 0; transition: opacity var(--nb-dur-3) var(--hp-ease); }
html.hp-anim .hp-mark .hp-hit.is-shown { --hp-wash: 15%; }
html.hp-anim .hp-mark .hp-hit.is-shown sup { opacity: 1; }
html.hp-anim .hp-mark .hp-hit--miss.is-shown { text-decoration-color: var(--hp-no); }
html.hp-anim .hp-mark .hp-hit.is-lit { --hp-wash: 32%; }

/* the flow's arrows draw themselves */
html.hp-anim .hp-flow-arrow svg path { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset 700ms var(--hp-ease) var(--hp-ad, 0ms); }
html.hp-anim .hp-flow.is-in .hp-flow-arrow svg path { stroke-dashoffset: 0; }

/* the tutor's reply arrives after the question */
html.hp-anim .hp-turn.is-on .hp-me { animation: hp-pop 420ms var(--hp-ease) both; }
html.hp-anim .hp-turn.is-on .hp-bot { animation: hp-pop 520ms var(--hp-ease) 260ms both; }
@keyframes hp-pop {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-flash-card { transition-duration: 0ms; }
  .hp-ring-fill { transition-duration: 0ms; }
}

/* ═══ Responsive ════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .hp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-hero-copy { max-width: 40em; }
  .hp-stage { max-width: 680px; width: 100%; margin-inline: auto; }
  .hp-mark-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hp-mark-arrow { padding-block: 14px; }
  .hp-mark-arrow svg { rotate: 90deg; }
  .hp-tutor-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-faq-grid .hp-head { position: static; margin-bottom: 8px; }
}

@media (max-width: 960px) {
  .hp-flow-steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }
  .hp-flow-arrow { padding: 12px 0; }
  .hp-flow-arrow svg { rotate: 90deg; }

  .hp-points { grid-template-columns: minmax(0, 1fr); }
  .hp-course { grid-template-columns: minmax(0, 1fr) auto; }
  .hp-course-subjects { grid-column: 1 / -1; grid-row: 2; }
  .hp-flow-copy {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kicker" "title" "lede" "cta";
    align-items: start;
  }
  .hp-flow-copy .hp-lede { margin-top: 18px; }
}

@media (max-width: 640px) {
  .hp-section { padding-block: 64px; }
  .hp-hero { padding-top: 28px; }
  .hp-hero-title { margin-top: 18px; letter-spacing: -0.032em; }
  .hp-hero-actions .hp-btn { flex: 1 1 100%; }
  .hp-hero-facts { gap: 12px 28px; }

  .hp-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .hp-fact dd { font-size: var(--nb-text-lg); }
  .hp-fact dt { font-size: var(--nb-text-xs); }

  /* the stage becomes a short stack: each card overlaps the one above by
     its own padding only */
  .hp-stage { height: auto; display: grid; padding-top: 0; }
  .hp-sheet { position: relative; top: 0; width: 100%; }
  .hp-sheet-bar { padding: 12px 16px; }
  .hp-sheet-body { padding: 18px 18px 46px; }
  .hp-flash {
    position: relative;
    top: auto;
    right: auto;
    width: 86%;
    height: 168px;
    margin: -28px 0 0 auto;
  }
  .hp-quiz {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 94%;
    margin: -12px 0 0 0;
  }
  .hp-quiz-opts li { font-size: var(--nb-text-sm); }
  .hp-flash, .hp-quiz, .hp-sheet { translate: none; }

  .hp-answer-text p { font-size: var(--nb-text-md); }
  .hp-score { grid-template-columns: auto minmax(0, 1fr); }
  .hp-score-figure { border-right: 0; padding-right: 0; }
  .hp-score-note { grid-column: 1 / -1; }
  .hp-eval-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; }
  .hp-verdict { width: 28px; height: 28px; }


  .hp-chat { padding: 18px 16px 20px; }
  .hp-chat-log { min-height: 340px; }
  .hp-bot, .hp-me { max-width: 100%; }

  .hp-course { padding: 22px 12px; margin-inline: -12px; }
  .hp-price .lp-pricing-card { padding: 22px 18px; }
  html .hp .lp-pricing-card .lp-pricing-cta-primary { white-space: nowrap; }
  .hp-course-name b { font-size: var(--nb-text-xl); }
  .hp-qa summary { font-size: var(--nb-text-md); min-height: 64px; }
  .hp-qa p { padding-right: 0; }
}