/* The homepage (pages/index.html), rebuilt 2026-10-05 to the owner's
   reference board and redrawn 2026-10-21 after the AI-look audit (owner's
   answers to the 18 points on the Desktop). 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 for every word,
   the notes' IBM Plex Sans (owner: "use the font we use in the notes", and
   of Sora on 2026-10-21: "it makes the entire website look off, AI
   generated"). The hero's picture is a marked answer drawn as the product
   shows one (second pass, same day: the red pen and the notebook were
   "ugly"), so no serif and no examiner red are left on the page.

   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-gutter: clamp(20px, 4vw, 48px);
  --hp-panel: color-mix(in srgb, var(--nb-blue) 3%, var(--nb-paper-raised));
  --hp-line: var(--nb-border);
  --hp-line-soft: color-mix(in srgb, var(--nb-border) 70%, transparent);
  /* the hero's headline is the largest type on the page; section headings
     step down from it (audit point 17) */
  --hp-h1: clamp(2.5rem, 4.2vw, 3.375rem);
  --hp-h2: clamp(1.875rem, 3.2vw, 2.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);
}

/* plain paper behind the homepage (audit point 12): the notebook's dot grid
   stays on the study pages, where it means a page of notes */
html.theme-light body:has(.hp),
html:not(.theme-light) body:has(.hp) { background-image: none; }

: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);
}

/* about 96px between related sections (audit point 9); pricing gets the one
   longer pause, below */
.hp-section { padding-block: clamp(36px, 4vw, 48px); }

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

.hp-h2 {
  font: 600 var(--hp-h2)/1.1 var(--nb-sans);
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--nb-ink);
}

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

.hp-head { margin-bottom: clamp(28px, 3.5vw, 44px); }
.hp-head--center { text-align: center; }
.hp-head--center .hp-lede { margin-inline: auto; }

.hp-link {
  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:hover { color: var(--nb-blue-strong); text-decoration-color: currentColor; }
.hp-link:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 3px; border-radius: var(--nb-r-sm); }

/* ── Buttons: one shape, the rounded rectangle (audit point 11) ───────── */

.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-md);
  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);
}
/* the arrow rides on a filled button only (audit point 15) */
.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); }
.hp-btn--primary:hover { background: var(--nb-blue-strong); color: var(--nb-on-blue); }

.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); }

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

.hp-hero { padding-block: clamp(24px, 3vw, 44px) clamp(48px, 5.5vw, 80px); }

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

.hp-hero-title {
  font: 600 var(--hp-h1)/1.04 var(--nb-sans);
  letter-spacing: -0.03em;
  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);
}

/* the library in one sentence, figures in weight, there from the first
   paint (owner, 2026-10-21: "show immediately", "drop the dashboard look") */
.hp-hero-count {
  margin-top: 28px;
  max-width: 32em;
  font: 400 var(--nb-text-base)/1.6 var(--nb-sans);
  color: var(--nb-ink);
  text-wrap: pretty;
}
.hp-hero-count b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── The molecule ──────────────────────────────────────────────────────
   Question 14 and a lit ball-and-stick triglyceride the answer builds
   (owner, 2026-10-21: "4 is nice"). home-molecule.js projects the model into
   the svg; these rules give it its materials. The atoms' colours are tokens:
   carbon in the ink, oxygen in the blue, hydrogen near white, every bond in
   a mix of the ink. The light is from the top left, the same light as every
   lit object on the site (nb-lit.css). */

.hp-mol {
  --hp-c-hi: color-mix(in srgb, var(--nb-ink) 88%, white);
  --hp-c-mid: color-mix(in srgb, var(--nb-ink) 52%, var(--nb-paper));
  --hp-c-lo: color-mix(in srgb, var(--nb-ink) 20%, var(--nb-paper));
  --hp-o-hi: color-mix(in srgb, var(--nb-blue) 45%, white);
  --hp-o-mid: var(--nb-blue);
  --hp-o-lo: color-mix(in srgb, var(--nb-blue) 50%, black);
  --hp-h-hi: white;
  --hp-h-mid: color-mix(in srgb, var(--nb-ink) 80%, var(--nb-paper));
  --hp-h-lo: color-mix(in srgb, var(--nb-ink) 40%, var(--nb-paper));
  --hp-bond: color-mix(in srgb, var(--nb-ink) 55%, var(--nb-paper));
  --hp-floor: color-mix(in srgb, black 65%, transparent);
  --hp-o-label: var(--nb-paper);
  position: relative;
}
html.theme-light .hp-mol {
  --hp-c-hi: color-mix(in srgb, var(--nb-ink) 52%, white);
  --hp-c-mid: color-mix(in srgb, var(--nb-ink) 92%, white);
  --hp-c-lo: color-mix(in srgb, var(--nb-ink) 70%, black);
  --hp-o-hi: color-mix(in srgb, var(--nb-blue) 42%, white);
  --hp-o-lo: color-mix(in srgb, var(--nb-blue) 55%, black);
  --hp-h-mid: color-mix(in srgb, var(--nb-ink) 10%, white);
  --hp-h-lo: color-mix(in srgb, var(--nb-ink) 42%, white);
  --hp-bond: color-mix(in srgb, var(--nb-ink) 70%, white);
  --hp-floor: color-mix(in srgb, var(--nb-ink) 18%, transparent);
  --hp-o-label: white;
}
.hp-mol-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font: 500 var(--nb-text-sm)/1.4 var(--nb-sans);
  color: var(--nb-soft);
}
.hp-tally { display: inline-flex; align-items: center; gap: 10px; color: var(--nb-ink); font: 600 var(--nb-text-md)/1 var(--nb-sans); white-space: nowrap; }
.hp-tally span { display: inline-grid; grid-template-columns: repeat(4, 16px); gap: 3px; }
.hp-tally i { height: 7px; border-radius: 2px; background: color-mix(in srgb, var(--nb-ink) 14%, transparent); }
.hp-tally i.is-on { background: var(--nb-success); }
.hp-mol-q { margin-top: 8px; font: 600 clamp(var(--nb-text-md), 1.35vw, 1.1875rem)/1.4 var(--nb-sans); letter-spacing: -0.01em; text-wrap: pretty; }

/* the model's stage: it never leaves it (the script limits the turn too) */
.hp-mol-stage {
  position: relative;
  height: 310px;
  margin-top: 14px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.hp-mol-stage.is-grabbing { cursor: grabbing; }
.hp-mol-stage::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 10%;
  bottom: 6px;
  height: 46px;
  background: radial-gradient(closest-side, var(--hp-floor), transparent);
  filter: blur(4px);
}
.hp-mol-model { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hp-mol-model .bond { stroke: var(--hp-bond); stroke-linecap: round; }
.hp-mol-model .ghost { fill: none; stroke: var(--nb-error); stroke-width: 1.6; stroke-dasharray: 3 3; }
.hp-mol-model .gbond { stroke: var(--nb-error); stroke-linecap: round; stroke-dasharray: 2 5; }
.hp-mol-model .site { fill: none; stroke: var(--nb-success); stroke-width: 2; }
.hp-mol-model .ring { fill: none; stroke: var(--nb-success); stroke-width: 2; }
.hp-mol-model .ring.no { stroke: var(--nb-error); }
.hp-mol-model .callout circle { fill: var(--nb-paper); stroke-width: 1.5; }
.hp-mol-model .callout text { font: 700 11px var(--nb-sans); text-anchor: middle; dominant-baseline: central; }
.hp-mol-model .callout.ok circle,
.hp-mol-model .callout.ok line { stroke: var(--nb-success); }
.hp-mol-model .callout.ok text { fill: var(--nb-success); }
.hp-mol-model .callout.no circle,
.hp-mol-model .callout.no line { stroke: var(--nb-error); }
.hp-mol-model .callout.no text { fill: var(--nb-error); }
.hp-mol-model .o-lbl { font: 700 11px var(--nb-sans); fill: var(--hp-o-label); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
/* the line from a part to its words, drawn over the whole column */
.hp-mol-overlay { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.hp-mol-overlay .leader { fill: none; stroke: var(--nb-success); stroke-width: 1.5; stroke-dasharray: 4 4; }
.hp-mol-overlay .leader.no { stroke: var(--nb-error); }
.hp-mol-overlay .dot { fill: var(--nb-success); }
.hp-mol-overlay .dot.no { fill: var(--nb-error); }

/* the answer: each credited phrase on a green band with its point number, the lost one on a red band */
.hp-mol-ans { margin-top: 4px; font: 400 clamp(var(--nb-text-base), 1.2vw, 1.03125rem)/1.85 var(--nb-sans); text-wrap: pretty; }
.hp-pt {
  padding: 2px 3px;
  margin-inline: -3px;
  border-radius: var(--nb-r-sm);
  background: color-mix(in srgb, var(--nb-success) 14%, transparent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color var(--nb-dur-2) var(--hp-ease);
  cursor: default;
}
.hp-pt--miss { background: color-mix(in srgb, var(--nb-error) 12%, transparent); }
.hp-pt.is-lit { background: color-mix(in srgb, var(--nb-success) 30%, transparent); }
.hp-pt--miss.is-lit { background: color-mix(in srgb, var(--nb-error) 24%, transparent); }
.hp-pt sup {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  vertical-align: 4px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--nb-success);
  color: var(--nb-success);
  font: 700 10px/1 var(--nb-sans);
}
.hp-pt--miss sup { box-shadow: inset 0 0 0 1.5px var(--nb-error); color: var(--nb-error); }

/* the mark scheme: a row per point, its number and the mark it earned */
.hp-mol-scheme { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; margin-top: 16px; }
.hp-mol-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  padding: 10px 8px;
  margin-inline: -8px;
  border-top: 1px solid var(--hp-line);
  border-radius: var(--nb-r-md);
  font: 400 var(--nb-text-sm)/1.4 var(--nb-sans);
  cursor: pointer;
  transition: background-color var(--nb-dur-2) var(--hp-ease);
}
.hp-mol-row b { font-weight: 700; color: var(--nb-success); font-variant-numeric: tabular-nums; }
.hp-mol-row small { font: 600 var(--nb-text-xs)/1 var(--nb-sans); color: var(--nb-success); white-space: nowrap; }
.hp-mol-row em { display: block; font-style: normal; font-size: var(--nb-text-xs); color: var(--nb-soft); }
.hp-mol-row--miss b,
.hp-mol-row--miss small { color: var(--nb-error); }
.hp-mol-row.is-lit { background: color-mix(in srgb, var(--nb-success) 10%, transparent); }
.hp-mol-row--miss.is-lit { background: color-mix(in srgb, var(--nb-error) 9%, transparent); }
.hp-mol-foot {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 400 var(--nb-text-sm)/1.4 var(--nb-sans);
  color: var(--nb-soft);
}
.hp-mol-foot .hp-link { font-size: var(--nb-text-base); }

/* ═══ 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: 24px 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 {
  color: var(--nb-blue);
  font: 600 var(--nb-text-base)/1.2 var(--nb-sans);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--nb-dur-2) var(--hp-ease);
}
.hp-course:hover .hp-course-go { text-decoration-color: currentColor; }

/* ═══ Pricing: the Premium card, the page's lit object (nb-lit.css) ═══
   The owner's ten answers, 2026-10-21: one card with a switch, the price big
   and light, Get Premium, what Premium includes as one quiet line, and under
   the card secure checkout, cancel any time and the currency line. */

/* the page's one longer pause comes before the price */
.hp-price { padding-top: clamp(64px, 7vw, 96px); }
.hp-plan-stage { max-width: 760px; margin-inline: auto; }
.hp-plan { padding: 40px clamp(22px, 5vw, 64px); text-align: center; }
.hp-plan-price { margin-top: 32px; }
/* the price a month, "/ month" beside it on the figure's baseline, and under it a small remark of what is charged and
   how often (owner, 2026-10-22: "$8 / month", "$96 billed yearly"; the same as /pricing/ and the Premium dialog) */
.hp-plan .nb-price-unit { margin-left: 10px; }
/* the page's paragraph reset (.hp :where(p)) would take the card's own spacing away: give it back */
.hp-plan .nb-price-per { margin-top: 14px; font-size: var(--nb-text-base); }
.hp-plan .nb-price-tax { margin-top: 6px; }
.hp-plan .nb-plan-inc { margin: 36px auto 0; }
.hp-plan .nb-plan-inc-h { margin-bottom: 14px; }
.hp-plan form { margin-top: 30px; }
.hp-plan .hp-btn { min-width: 280px; min-height: 58px; font-size: var(--nb-text-md); }
.hp-plan-fine {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
  font: 400 var(--nb-text-sm)/1.5 var(--nb-sans);
  color: var(--nb-soft);
}
.hp-plan-fine span { display: inline-flex; align-items: center; gap: 5px; }
/* words only under the card, parted by a dot (owner, 2026-10-23: "im sure you can make this better") */
.hp-plan-fine > span + span::before { content: "\00B7"; margin: 0 7px 0 12px; }
.hp-plan-fine .hp-link { font-weight: 400; color: inherit; }
.hp-plan-renew { margin-top: 6px; text-align: center; font: 400 var(--nb-text-sm)/1.5 var(--nb-sans); color: var(--nb-soft); }

/* ═══ 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; }

/* ═══ The daily task: what "Practise free every day" means (plan B2.10) ═══
   One flat section between the courses and the price: the words, and beside them a flat picture of the dashboard's card in its
   own grammar (the steps as coloured words: a step done green, the one to do now blue; the ink line with its nib). Flat on
   purpose: the page's lit objects are the molecule and the Premium card. */

.hp-task-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.hp-task-head { margin-bottom: 0; }
.hp-task-head .hp-btn { margin-top: 28px; }
.hp .hp-task-streak { margin-top: 12px; }
.hp-task-sheet {
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--nb-r-lg);
  background: var(--hp-panel);
}
.hp-task-label { font: 600 var(--nb-text-sm)/1.3 var(--nb-sans); color: var(--nb-soft); }
.hp-task-title { margin-top: 10px; font: 600 clamp(1.5rem, 2.4vw, 1.875rem)/1.2 var(--nb-sans); letter-spacing: -0.02em; }
.hp-task-sub { margin-top: 6px; font: 400 var(--nb-text-base)/1.5 var(--nb-sans); color: var(--nb-soft); }
/* the dashboard card's track (the owner's pick 3B, 2026-10-25): a stretch per step as long as its items, filled to what is done,
   done green, the one under way blue, the rest ink; the streak's figure in its red; two study buddies under it, as the Overview
   lists them, between hairlines, the ringed initials kept */
.hp-task-fig { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--nb-m-flame); }
.hp-task-sep { color: var(--nb-soft); }
.hp-task-count { margin-top: 14px; font: 500 var(--nb-text-sm)/1.3 var(--nb-sans); font-variant-numeric: tabular-nums; }
.hp-task-count b { font-weight: 600; }
/* the steps keep one row while their words fit, and wrap only when they do not (round 5: on a phone the last step ran past the
   card's edge), as the dashboard card's track does */
.hp-task-track { display: flex; flex-wrap: wrap; gap: 14px 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.hp-task-track > li { flex: var(--n, 1) 1 0; min-width: max-content; }
.hp-task-track i { position: relative; display: block; height: 6px; overflow: hidden; border-radius: var(--nb-r-sm); background: color-mix(in srgb, var(--nb-ink) 9%, transparent); }
.hp-task-track i b { position: absolute; inset: 0; border-radius: inherit; background: var(--nb-blue); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
.hp-task-track > li[data-ui-state="done"] i b { background: var(--nb-success); }
.hp-task-track > li[data-ui-state="now"] i { background: color-mix(in srgb, var(--nb-blue) 16%, transparent); }
.hp-task-track span { display: block; margin-top: 8px; font: 600 var(--nb-text-sm)/1.3 var(--nb-sans); white-space: nowrap; }
.hp-task-track span b { margin-left: 2px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--nb-soft); }
.hp-task-track > li[data-ui-state="done"] span, .hp-task-track > li[data-ui-state="done"] span b { color: var(--nb-success); }
.hp-task-track > li[data-ui-state="now"] span, .hp-task-track > li[data-ui-state="now"] span b { color: var(--nb-blue); }
.hp-task-buddies { margin: 22px 0 0; padding: 0; list-style: none; box-shadow: inset 0 1px 0 var(--nb-border); }
.hp-task-buddies li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; box-shadow: inset 0 -1px 0 var(--nb-border); }
.hp-task-ring { --c: var(--nb-blue); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 600 var(--nb-text-xs)/1 var(--nb-sans); color: var(--c); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent); }
.hp-task-ring--teal { --c: var(--nb-m-dot-teal); }
.hp-task-ring--green { --c: var(--nb-success); }
.hp-task-who { font: 400 var(--nb-text-sm)/1.4 var(--nb-sans); color: var(--nb-soft); }
.hp-task-who b { margin-right: 6px; font-weight: 600; color: var(--nb-ink); }
.hp-task-buddies em { font: 600 var(--nb-text-sm)/1 var(--nb-sans); font-style: normal; color: var(--nb-ink); }
.hp-task-buddies em.hp-task-kept { color: var(--nb-success); }

/* ═══ Final call: one line and the button, on the page (audit point 14) ══ */

.hp-final { padding-block: clamp(56px, 6vw, 88px) clamp(72px, 8vw, 112px); }
.hp-final-inner {
  display: grid;
  justify-items: center;
  text-align: center;
}
.hp-final-inner .hp-lede { margin-inline: auto; }
.hp-final-inner .hp-btn { margin-top: 28px; }

/* ═══ 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="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-layer] {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 900ms var(--hp-ease) 160ms, transform 1100ms var(--hp-ease) 160ms;
}
html.hp-anim.hp-in .hp [data-hp-load],
html.hp-anim.hp-in .hp [data-hp-layer] { opacity: 1; transform: none; }

/* scroll reveals: a soft rise */
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; }

@media (prefers-reduced-motion: reduce) {
  .hp-pt,
  .hp-mol-row,
  .hp-btn,
  .hp-btn-arrow { transition: none; }
}

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

@media (max-width: 1080px) {
  .hp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-hero-copy { max-width: 40em; }
  .hp-mol { max-width: 680px; width: 100%; margin-inline: auto; }
  .hp-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-faq-grid .hp-head { position: static; margin-bottom: 8px; }
}

@media (max-width: 960px) {
  .hp-task-grid { 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; }
}

@media (max-width: 640px) {
  .hp-section { padding-block: 32px; }
  .hp-price { padding-top: 56px; }
  .hp-hero { padding-top: 28px; }
  .hp-hero-title { letter-spacing: -0.028em; }
  .hp-hero-actions .hp-btn { flex: 1 1 100%; }
  .hp-task-head .hp-btn { width: 100%; }

  .hp-mol-head { flex-direction: column; gap: 4px; }
  .hp-mol-stage { height: 230px; }
  .hp-mol-scheme { grid-template-columns: minmax(0, 1fr); }
  .hp-mol-foot { flex-direction: column; }
  .hp-plan { padding: 28px 16px 30px; }
  .hp-plan .hp-btn { width: 100%; min-width: 0; }
  .hp-plan-fine { flex-direction: column; align-items: center; gap: 4px; }
  .hp-plan-fine > span + span::before { content: none; }

  .hp-course { padding: 22px 12px; margin-inline: -12px; }
  .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; }
}