/* ExamStudyAid — the homepage's shelf pass (owner, 2026-10-08: "can you do anything about the home page?").

   A layer over home-landing.css, loaded after it, carrying the language the rest of the site took on this week: the
   headings in Sora with one word in the desk blue, buttons as rounded rectangles (owner: "i hate pill"), no shadow
   under a button, each programme's subjects as a small shelf of books in their own colours that rise one after
   another when the row is pointed at. (The tutor section left the homepage, owner 2026-10-08.)
   Every rule hangs off html .hp so it outranks the page's sheet. Tokens only, both themes; reduced motion keeps
   every picture still. */

/* ── Type: the headings in the display face ───────────────────────────── */
html .hp :is(.hp-hero-title, .hp-h2) { font-family: var(--nb-display); font-weight: 700; }
/* Sora runs wider than Plex: the hero line keeps its two lines at a touch smaller size */
html .hp .hp-hero-title { font-size: calc(var(--hp-h1) * 0.86); letter-spacing: -0.035em; }
html .hp .hp-h2 { letter-spacing: -0.028em; }
html .hp :is(.hp-fact dd, .hp-score-figure, .hp-course-name b) { font-family: var(--nb-display); }

/* ── No capsules, no shadow under a button ────────────────────────────── */
html .hp .hp-btn { border-radius: var(--nb-r-md); box-shadow: none; }
html .hp .hp-btn:hover { box-shadow: none; }
html .hp .lp-pricing-card .lp-pricing-cta-primary,
html .hp .lp-pricing-card .lp-pricing-cta-primary:hover { border-radius: var(--nb-r-md); box-shadow: none; }
html .hp :is(.hp-bot-btn) { border-radius: var(--nb-r-md); }
html .hp .hp-quiz-ok { border-radius: var(--nb-r-sm); }

/* ── Find your exact course: each programme's subjects as a shelf ─────── */
html .hp .hp-course { grid-template-columns: minmax(180px, 0.8fr) auto minmax(0, 1.8fr) auto; }
html .hp .hp-course-shelf {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 46px;
  padding: 0 4px 5px;
}
html .hp .hp-course-shelf::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 0;
  height: 4px;
  border-radius: var(--nb-r-sm);
  background: color-mix(in srgb, var(--nb-ink) 18%, transparent);
}
html .hp .hp-course-shelf i {
  display: block;
  width: 9px;
  height: 78%;
  border-radius: var(--nb-r-sm) var(--nb-r-sm) 0 0;
  background: color-mix(in srgb, var(--subject-hue, var(--nb-blue)) 78%, var(--nb-paper));
  transform-origin: 50% 100%;
  transition: translate 260ms var(--hp-ease, ease), rotate 300ms var(--hp-ease, ease);
  transition-delay: calc(var(--hp-b, 0) * 35ms);
}
html .hp .hp-course-shelf i:nth-child(3n + 2) { height: 92%; width: 8px; }
html .hp .hp-course-shelf i:nth-child(3n) { height: 66%; width: 10px; }
html .hp .hp-course-shelf i:nth-child(2) { --hp-b: 1; }
html .hp .hp-course-shelf i:nth-child(3) { --hp-b: 2; }
html .hp .hp-course-shelf i:nth-child(4) { --hp-b: 3; }
html .hp .hp-course-shelf i:nth-child(5) { --hp-b: 4; }
html .hp .hp-course-shelf i:nth-child(6) { --hp-b: 5; }
html .hp .hp-course-shelf i:nth-child(7) { --hp-b: 6; }
html .hp .hp-course-shelf i:nth-child(n + 8) { --hp-b: 7; }
/* the bookend */
html .hp .hp-course-shelf b {
  display: block;
  width: 4px;
  height: 58%;
  margin-left: 4px;
  border-radius: var(--nb-r-sm) var(--nb-r-sm) 0 0;
  background: color-mix(in srgb, var(--nb-ink) 70%, transparent);
}
@media (hover: hover) {
  html .hp .hp-course:hover .hp-course-shelf i { translate: 0 -5px; }
  html .hp .hp-course:hover .hp-course-shelf i:nth-child(odd) { rotate: -3deg; }
}
@media (max-width: 960px) {
  html .hp .hp-course { grid-template-columns: minmax(0, 1fr) auto auto; }
  html .hp .hp-course-shelf { grid-row: 1; grid-column: 2; }
}
@media (max-width: 560px) {
  html .hp .hp-course-shelf { display: none; }
}

/* ── The steps: a number, not an icon tile ────────────────────────────── */
html .hp .hp-step-head { gap: 14px; }
html .hp .hp-step-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--nb-blue);
  color: var(--nb-blue);
  font: 700 var(--nb-text-sm)/1 var(--nb-display);
}
html .hp .hp-step-head b { font: 700 var(--nb-text-md)/1.2 var(--nb-display); letter-spacing: -0.01em; text-transform: none; }
html .hp .hp-step-head > span:last-child > span { color: var(--nb-soft); }

/* ── The mark scheme's two panels: their heads without icon tiles ────── */
html .hp .hp-panel-head { gap: 0; }

/* ── The three steps: the note, the question, the feedback, drawn ─────── */
/* Owner, 2026-10-08: "can we do anything about this? it looks so bad". The dense screenshots become three cards in
   the page's own type, one height, the same real chapter 1 content at a size that reads. With motion they play once
   as the section arrives (home-landing.js adds .is-in): A is pressed, the verdict lands, the reason follows. */
html .hp .hp-flow-steps { grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr); }
html .hp .hp-step > .hp-demo { flex: 1; }
html .hp .hp-demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 400px;
  padding: 22px 22px 20px;
  color: var(--nb-ink);
  text-decoration: none;
  box-shadow: none;
  transition: border-color var(--nb-dur-2) var(--hp-ease), transform var(--nb-dur-2) var(--hp-ease);
}
@media (hover: hover) {
  html .hp .hp-demo:hover { border-color: color-mix(in srgb, var(--nb-blue) 55%, transparent); transform: translateY(-3px); }
}
html .hp .hp-demo:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 3px; }
html .hp .hp-demo-crumb {
  font: 600 var(--nb-text-xs)/1.2 var(--nb-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nb-soft);
}
html .hp .hp-demo-crumb i { padding-inline: 0.25em; font-style: normal; }
html .hp .hp-demo-title { font: 700 var(--nb-text-lg)/1.25 var(--nb-display); letter-spacing: -0.015em; }
html .hp .hp-demo-p { font: 400 var(--nb-text-sm)/1.6 var(--nb-sans); }
html .hp .hp-demo-p mark {
  padding: 0 2px;
  border-radius: var(--nb-r-sm);
  background: color-mix(in srgb, var(--nb-blue) 18%, transparent);
  color: inherit;
  font-weight: 600;
}
html .hp .hp-demo-more {
  margin-top: auto;
  font: 600 var(--nb-text-sm)/1.2 var(--nb-sans);
  color: var(--nb-blue);
}
html .hp .hp-demo-more::after { content: " \2192"; }
html .hp .hp-demo-q { font: 600 var(--nb-text-base)/1.45 var(--nb-sans); }
html .hp .hp-demo-opts { display: grid; gap: 8px; }
html .hp .hp-demo-opt {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px 8px 10px;
  border: 1px solid var(--hp-line);
  border-radius: var(--nb-r-md);
  font: 500 var(--nb-text-sm)/1.4 var(--nb-sans);
}
html .hp .hp-demo-opt > b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--nb-r-sm);
  background: color-mix(in srgb, var(--nb-ink) 8%, transparent);
  font: 600 var(--nb-text-xs)/1 var(--nb-sans);
}
html .hp .hp-demo-opt > i { display: grid; place-items: center; width: 18px; height: 18px; font-style: normal; }
html .hp .hp-demo-opt > i svg { width: 14px; height: 14px; }
html .hp .hp-demo-opt.is-picked { border-color: var(--nb-blue); background: color-mix(in srgb, var(--nb-blue) 10%, transparent); }
html .hp .hp-demo-opt.is-picked > b { background: var(--nb-blue); color: var(--nb-on-blue); }
html .hp .hp-demo-opt.is-wrong { border-color: color-mix(in srgb, var(--hp-no) 60%, transparent); background: color-mix(in srgb, var(--hp-no) 9%, transparent); }
html .hp .hp-demo-opt.is-wrong > b, html .hp .hp-demo-opt.is-wrong > i { color: var(--hp-no); }
html .hp .hp-demo-opt.is-right { border-color: color-mix(in srgb, var(--hp-ok) 60%, transparent); background: color-mix(in srgb, var(--hp-ok) 10%, transparent); }
html .hp .hp-demo-opt.is-right > b, html .hp .hp-demo-opt.is-right > i { color: var(--hp-ok); }
html .hp .hp-demo-verdict { display: flex; align-items: center; gap: 12px; }
/* the verdict's mark is a bare red cross, not a tile (owner, same day: no icon tags) */
html .hp .hp-demo-x { display: grid; place-items: center; flex: none; color: var(--hp-no); }
html .hp .hp-demo-x svg { width: 22px; height: 22px; }
html .hp .hp-demo-verdict > span:last-child { display: grid; gap: 2px; }
html .hp .hp-demo-verdict b { font: 700 var(--nb-text-lg)/1.2 var(--nb-display); color: var(--hp-no); }
html .hp .hp-demo-verdict > span:last-child > span { font: 500 var(--nb-text-xs)/1.3 var(--nb-sans); color: var(--nb-soft); }
html .hp .hp-demo-verdict i { padding-inline: 0.3em; font-style: normal; }
html .hp .hp-demo-why {
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding: 12px 14px;
  border-radius: var(--nb-r-md);
  background: color-mix(in srgb, var(--hp-ok) 8%, transparent);
  font: 400 var(--nb-text-sm)/1.55 var(--nb-sans);
}
html .hp .hp-demo-why b { font-weight: 600; color: var(--hp-ok); }

/* the play, once, as the section arrives */
@keyframes hp-demo-press { 0%, 100% { scale: 1; } 40% { scale: 0.97; } }
@keyframes hp-demo-land { from { opacity: 0; translate: 0 8px; } }
html.hp-anim .hp .hp-flow:not(.is-in) .hp-demo-opt.is-picked { border-color: var(--hp-line); background: transparent; }
html.hp-anim .hp .hp-flow:not(.is-in) .hp-demo-opt.is-picked > b { background: color-mix(in srgb, var(--nb-ink) 8%, transparent); color: inherit; }
html.hp-anim .hp .hp-flow.is-in .hp-demo-opt.is-picked { animation: hp-demo-press 360ms var(--hp-ease) 700ms both; transition: background-color 200ms ease 700ms, border-color 200ms ease 700ms; }
html.hp-anim .hp .hp-flow.is-in .hp-demo-opt.is-picked > b { transition: background-color 200ms ease 700ms, color 200ms ease 700ms; }
html.hp-anim .hp .hp-flow:not(.is-in) :is(.hp-demo-verdict, .hp-demo--feedback .hp-demo-opt, .hp-demo-why) { opacity: 0; }
html.hp-anim .hp .hp-flow.is-in .hp-demo-verdict { animation: hp-demo-land 480ms var(--hp-ease) 1200ms backwards; }
html.hp-anim .hp .hp-flow.is-in .hp-demo--feedback .hp-demo-opt { animation: hp-demo-land 480ms var(--hp-ease) 1400ms backwards; }
html.hp-anim .hp .hp-flow.is-in .hp-demo--feedback .hp-demo-opt + .hp-demo-opt { animation-delay: 1520ms; }
html.hp-anim .hp .hp-flow.is-in .hp-demo-why { animation: hp-demo-land 520ms var(--hp-ease) 1750ms backwards; }
@media (max-width: 960px) {
  html .hp .hp-flow-steps { grid-template-columns: minmax(0, 1fr); }
  html .hp .hp-demo { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html .hp .hp-demo,
  html .hp .hp-demo * { animation: none; transition: none; }
}

/* ── The price: one card, the plan's shelf, a sliding choice ──────────── */
/* Owner, 2026-10-08: "can we make this nicer? go crazy and make it nicer but keep the legal stuff". The words, the
   three periods in their order, each price with its tax note beside it, the currency line and the form are the
   panel's own and untouched (Website list v1.0, item 5: no per-month figure, no saving). What changes is the dress:
   the left half on the notebook's dotted paper with a book for every subject the plan opens, set down one by one;
   the periods as one segmented control whose blue thumb slides to the one chosen; the figure turning over when the
   period changes; the included list's ticks drawing in one after another. */
html .hp .lp-pricing-card.lp-pricing-card--wide {
  max-width: 1120px;
  padding: 0;
  overflow: hidden;
  box-shadow: none;
}
html .hp .lp-pricing-card .lp-pricing-card-left {
  padding: clamp(24px, 3vw, 40px);
  background:
    radial-gradient(circle at 1px 1px, var(--nb-grid-dot) 1px, transparent 1.5px) 9px 9px / 18px 18px,
    color-mix(in srgb, var(--nb-paper) 60%, var(--hp-panel));
}
html .hp .lp-pricing-card .lp-pricing-card-right { padding: clamp(24px, 3vw, 40px); border-color: var(--hp-line); }

/* the plan's shelf */
html .hp .hp-pshelf { display: grid; gap: 10px; margin: 18px 0 26px; }
html .hp .hp-pshelf-books {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 64px;
  padding: 0 4px 6px;
}
html .hp .hp-pshelf-books::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: 0;
  height: 5px;
  border-radius: var(--nb-r-sm);
  background: color-mix(in srgb, var(--nb-ink) 18%, transparent);
}
html .hp .hp-pshelf-books i {
  display: block;
  flex: 1 1 0;
  max-width: 16px;
  height: 80%;
  border-radius: var(--nb-r-sm) var(--nb-r-sm) 0 0;
  background: color-mix(in srgb, var(--subject-hue, var(--nb-blue)) 80%, var(--nb-paper));
  transform-origin: 50% 100%;
}
html .hp .hp-pshelf-books i:nth-child(3n + 2) { height: 94%; }
html .hp .hp-pshelf-books i:nth-child(3n) { height: 70%; }
html .hp .hp-pshelf-books i:nth-child(5n + 4) { height: 86%; rotate: 4deg; }
html .hp .hp-pshelf-books b {
  display: block;
  flex: none;
  width: 5px;
  height: 62%;
  margin-left: 4px;
  border-radius: var(--nb-r-sm) var(--nb-r-sm) 0 0;
  background: color-mix(in srgb, var(--nb-ink) 70%, transparent);
}
html .hp .hp-pshelf-cap { font: 600 var(--nb-text-sm)/1.3 var(--nb-display); color: var(--nb-ink); }
@keyframes hp-pbook { from { opacity: 0; translate: 0 -18px; rotate: -8deg; } 60% { opacity: 1; } }
html.hp-anim .hp .lp-pricing-card:not(.is-in) .hp-pshelf-books i { opacity: 0; }
html.hp-anim .hp .lp-pricing-card.is-in .hp-pshelf-books i { animation: hp-pbook 520ms var(--hp-ease, ease) backwards; animation-delay: calc(var(--hp-pi, 0) * 40ms + 120ms); }

/* the periods: one segmented control, a blue thumb sliding to the one chosen */
html .hp .lp-pricing-card .lp-plan-selector {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 4px;
  border: 1px solid var(--hp-line);
  border-radius: var(--nb-r-lg);
  background: color-mix(in srgb, var(--nb-ink) 4%, var(--hp-panel));
}
html .hp .lp-pricing-card .lp-plan-selector::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  border: 1px solid var(--nb-blue);
  border-radius: var(--nb-r-md);
  background: color-mix(in srgb, var(--nb-blue) 12%, var(--hp-panel));
  translate: calc(var(--hp-seg, 2) * 100%) 0;
  transition: translate 420ms var(--hp-ease, ease);
}
html .hp .lp-pricing-card .lp-plan-btn,
html .hp .lp-pricing-card .lp-plan-btn:hover,
html .hp .lp-pricing-card .lp-plan-btn--active,
html .hp .lp-pricing-card .lp-plan-btn--active:hover {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--nb-r-md);
  background: transparent;
  box-shadow: none;
  text-align: left;
}
html .hp .lp-pricing-card .lp-plan-btn:not(.lp-plan-btn--active):hover { background: color-mix(in srgb, var(--nb-ink) 4%, transparent); }
html .hp .lp-pricing-card .lp-plan-main { order: -1; justify-content: flex-start; text-align: left; font: 600 var(--nb-text-sm)/1.2 var(--nb-sans); }
html .hp .lp-pricing-card .lp-plan-price { font: 700 var(--nb-text-md)/1.2 var(--nb-display); }
html .hp .lp-pricing-card .lp-plan-period { font: 500 var(--nb-text-xs)/1.2 var(--nb-sans); }
html .hp .lp-pricing-card .lp-plan-btn .lp-plan-tax { color: var(--nb-soft); }
html .hp .lp-pricing-card .lp-plan-check { display: none; }
html .hp .lp-pricing-card .lp-plan-btn--active .lp-plan-main { color: var(--nb-blue); }

/* the figure, turning over when the period changes */
html .hp .lp-pricing-card .lp-pricing-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 30px; }
html .hp .lp-pricing-card .lp-pricing-price {
  display: inline-block;
  font: 700 clamp(3.5rem, 6vw, 5rem)/0.95 var(--nb-display);
  letter-spacing: -0.04em;
}
html .hp .lp-pricing-card .lp-pricing-period { font: 500 var(--nb-text-lg)/1.2 var(--nb-sans); color: var(--nb-soft); }
@keyframes hp-flip { 0% { opacity: 0; translate: 0 0.35em; } 100% { opacity: 1; translate: 0 0; } }
html .hp .lp-pricing-card .lp-pricing-price.is-flip,
html .hp .lp-pricing-card .lp-pricing-period.is-flip { animation: hp-flip 360ms var(--hp-ease, ease); }
html .hp .lp-pricing-card .lp-pricing-tax { margin-top: 10px; }
html .hp .lp-pricing-card .lp-pricing-cta-footer { margin-top: 26px; }
html .hp .lp-pricing-card .lp-pricing-cta-primary { min-height: 56px; }
html .hp .lp-pricing-card .lp-pricing-cta-primary span:last-child { transition: translate 220ms var(--hp-ease, ease); }
@media (hover: hover) {
  html .hp .lp-pricing-card .lp-pricing-cta-primary:hover span:last-child { translate: 4px 0; }
}
/* the two notes under the button: their words, without icon tiles */
html .hp .lp-pricing-card :is(.lp-pricing-meta-icon, .lp-pricing-note-icon) { display: none; }
html .hp .lp-pricing-card :is(.lp-pricing-tagline, .lp-pricing-note) { margin-top: 8px; padding: 0; gap: 0; }

/* what's included: a heading's voice, ticks that draw in */
html .hp .lp-pricing-card .lp-pricing-card-right-sub { font: 700 var(--nb-text-xl)/1.25 var(--nb-display); color: var(--nb-ink); letter-spacing: -0.015em; }
/* the disc sized to its tick (owner, 2026-10-08: "the circles are too big compared to the checkmark"): a 20px disc around a
   13px tick drawn a step heavier, so the mark fills it rather than floating in it */
html .hp .lp-pricing-card .lp-pricing-benefit-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--nb-blue) 16%, transparent);
  color: var(--nb-blue);
}
html .hp .lp-pricing-card .lp-pricing-benefit-icon svg {
  width: 13px;
  height: 13px;
  stroke-width: 3.4;
}
html .hp .lp-pricing-card .lp-pricing-benefit-text { font: 500 var(--nb-text-md)/1.35 var(--nb-sans); }
/* the list fills the column with every row the same height, its words centred in it, so each hairline sits halfway between
   two lines of words (the column's space-between left every gap under a hairline, none over it) */
html .hp .lp-pricing-card .lp-pricing-benefit {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}
@keyframes hp-tick { from { opacity: 0; scale: 0.4; } 70% { scale: 1.15; } }
html.hp-anim .hp .lp-pricing-card:not(.is-in) .lp-pricing-benefit-icon { opacity: 0; }
html.hp-anim .hp .lp-pricing-card.is-in .lp-pricing-benefit-icon { animation: hp-tick 380ms var(--hp-ease, ease) backwards; animation-delay: calc(500ms + var(--hp-ti, 0) * 90ms); }
html .hp .lp-pricing-benefit:nth-child(2) { --hp-ti: 1; }
html .hp .lp-pricing-benefit:nth-child(3) { --hp-ti: 2; }
html .hp .lp-pricing-benefit:nth-child(4) { --hp-ti: 3; }
html .hp .lp-pricing-benefit:nth-child(5) { --hp-ti: 4; }
html .hp .lp-pricing-benefit:nth-child(6) { --hp-ti: 5; }
html .hp .lp-pricing-benefit:nth-child(n + 7) { --hp-ti: 6; }
@media (max-width: 560px) {
  html .hp .lp-pricing-card .lp-plan-btn { padding: 10px 8px; }
  html .hp .lp-pricing-card .lp-plan-btn .lp-plan-tax { font-size: 0.625rem; }
}

/* ── Reduced motion: every picture still ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html .hp .hp-course-shelf i { transition: none; }
  html .hp .lp-pricing-card .lp-plan-selector::before { transition: none; }
  html .hp .lp-pricing-card :is(.lp-pricing-price, .lp-pricing-period, .lp-pricing-benefit-icon, .hp-pshelf-books i) { animation: none; }
  html .hp .hp-course:hover .hp-course-shelf i { translate: none; rotate: none; }
}