/* ══════════════════════════════════════════════════════════════════
   css/home-hero-2x.css · Homepage hero designs A, B and C
   S.MONK · November 2026
   ══════════════════════════════════════════════════════════════════
   Three candidate heroes for the repositioning. All three answer the
   same question in the first five seconds — "which paper are you
   preparing for?" — and all three carry the same four parts:
     1. one confident headline about passing actuarial exams
     2. one sentence naming what S.MONK provides
     3. the paper picker, which is the main action
     4. one quiet line of proof

   Only ONE renders at a time, chosen by the `home_hero_variant`
   setting. The hero live since Phase 1A is untouched in
   css/home-hero.css, so switching back changes nothing but a setting.

     A — navy, two columns, picker in a white panel  (closest to today)
     B — light, material-forward, shows what you buy  (biggest change)
     C — navy, centred, the question is the headline  (most focused)

   Tokens only (css/tokens.css). No new colours.
   ══════════════════════════════════════════════════════════════════ */

/* ── Shared shell ───────────────────────────────────────────────── */
.h2x {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Slide under the fixed nav so the hero's background meets the top of
     the window, then pad the content back down. See the 900px rule at
     the bottom for mobile.

     80px, not 68. `.nav` is 80px tall (`.ni` inside it is 68), and
     `body` is padded 80px to clear it — so pulling up only 68 left a
     12px strip of plain white body background across the very top of
     the page, above the cream. The old solid-white nav painted over it
     and nobody could see it; the moment the nav stopped being painted
     it showed as a hard white band. Ravi spotted it on 9 Nov as "a lot
     of empty space at the top". `.hero` and `.page-hero` in style.css
     have always used -80; this was the odd one out.

     The air below the nav is smaller than it was, too: 68px of it on a
     big screen read as a gap rather than as breathing room. */
  margin-top: -80px;
  padding: calc(80px + clamp(22px, 2.4vw, 40px)) 0 clamp(34px, 3.4vw, 54px);
}
/* public-header.php prints a background-image overlay whenever
   $hero_bg_image is set. Each hero design owns its own background. */
.h2x::before { display: none !important; }

.h2x__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 2.5vw, 40px);
}

/* Faint grid, dark designs only. Masked so the edges fade out. */
.h2x__grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 55%, transparent 100%);
          mask-image: radial-gradient(ellipse at center, black 55%, transparent 100%);
  pointer-events: none;
}

/* ── Shared type ────────────────────────────────────────────────── */
.h2x__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.h2x__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10D87A;
  box-shadow: 0 0 0 0 rgba(16,216,122,0.6);
  animation: h2x-pulse 1.8s ease-out infinite;
  flex-shrink: 0;
}
@keyframes h2x-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(16,216,122,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(16,216,122,0);    }
  100% { box-shadow: 0 0 0 0    rgba(16,216,122,0);    }
}

.h2x__title {
  font-family: var(--f-display);
  font-weight: var(--fw-black);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 13px;
  text-wrap: balance;
}
.h2x__sub {
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: var(--lh-relaxed);
  margin: 0 0 19px;
  max-width: 54ch;
}

/* One quiet line of proof. Never a row of giant numbers — the big
   numbers already live in the navy proof strip further down. */
.h2x__proof {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 14px;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.h2x__proof b { font-weight: var(--fw-bold); }
.h2x__proof-sep { opacity: 0.4; }

/* ── Paper picker ───────────────────────────────────────────────────
   The component itself lives in css/paper-picker.css, which the
   courses page loads too — one definition, so a paper tile cannot
   look like one thing here and another there. This file only
   re-themes it for the navy designs. ──────────────────────────── */

/* ── Shared buttons ────────────────────────────────────────────── */
.h2x__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.h2x__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--t-fast), background var(--t-base),
              box-shadow var(--t-base), border-color var(--t-base);
}
.h2x__btn:hover { transform: translateY(-1px); }
/* Navy on orange, not white on orange. White on #F97316 is 3.0:1,
   under the 4.5:1 that bold 16px text has to meet, and every other
   filled orange button on the site (.ph-btn--primary, .ph-search__btn,
   .ph-buy-card__cta, .ph-form-card__cta) is already navy on orange at
   8.3:1 — so this was both the harder one to read and the odd one
   out. The orange buttons in the sections further down the homepage
   are still white-on-orange; that is a separate change. */
.h2x__btn--primary {
  background: var(--orange);
  color: var(--navy);
  box-shadow: 0 6px 18px rgba(249,115,22,0.28);
}
.h2x__btn--primary:hover { background: var(--orange-d); }


/* ══════════════════════════════════════════════════════════════════
   A — navy, two columns, picker in a white panel
   The layout students already know, with the scholarship card
   replaced by the paper picker. Lowest-risk change.
   ══════════════════════════════════════════════════════════════════ */
.h2x--a { background: linear-gradient(135deg, var(--navy) 0%, var(--c-navy-700) 100%); }
.h2x--a .h2x__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: center;
}
.h2x--a .h2x__eyebrow {
  padding: 6px 14px;
  background: rgba(20,163,181,0.12);
  border: 1px solid rgba(20,163,181,0.35);
  color: var(--c-teal-400);
  border-radius: var(--radius-full);
}
.h2x--a .h2x__title { color: #fff; font-size: clamp(2.125rem, 4.2vw, 3.375rem); }
.h2x--a .h2x__title em { font-style: normal; color: var(--c-orange-300); }
.h2x--a .h2x__sub   { color: rgba(255,255,255,0.80); }
.h2x--a .h2x__proof { color: rgba(255,255,255,0.62); }
.h2x--a .h2x__proof b { color: #fff; }

/* The white panel is the main action: it is the brightest thing in
   the hero, so the eye lands on the papers. */
.h2x-panel {
  background: #fff;
  border-radius: 20px;
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow: 0 24px 60px rgba(4,10,28,0.34);
}
.h2x-panel__head {
  font-family: var(--f-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-ink-900);
  margin: 0 0 4px;
}
.h2x-panel__note {
  font-size: var(--text-base);
  line-height: var(--lh-snug);
  color: var(--c-ink-600);
  margin: 0 0 18px;
}
.h2x--a .h2x-paper {
  background: var(--c-ink-50);
  border-color: var(--c-ink-200);
  color: var(--c-ink-900);
}
.h2x--a .h2x-paper:hover {
  background: var(--c-orange-50);
  border-color: var(--c-orange-300);
  box-shadow: 0 6px 16px rgba(10,20,50,0.08);
}
.h2x--a .h2x-paper__name { color: var(--c-ink-600); }
.h2x--a .h2x-pick__all   { color: var(--orange-ink); }
/* Divider + the five things, inside the panel so one card answers
   "what do I get" straight after "which paper". */
.h2x-panel__rule { height: 1px; background: var(--c-ink-100); margin: 20px 0 16px; }
.h2x-incl { display: flex; flex-wrap: wrap; gap: 8px; }
.h2x-incl span {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-700);
  background: var(--c-ink-50);
  border: 1px solid var(--c-ink-100);
  border-radius: var(--radius-full);
  padding: 5px 11px;
}


/* ══════════════════════════════════════════════════════════════════
   B — light, material-forward
   A shelf of study material rather than a classroom. The right side
   shows what the student actually buys. Biggest visual change.
   ══════════════════════════════════════════════════════════════════ */
.h2x--b {
  background:
    radial-gradient(1100px 520px at 88% -8%, var(--c-orange-50) 0%, transparent 62%),
    linear-gradient(180deg, var(--c-surface-warm) 0%, #fff 72%);
  border-bottom: 1px solid var(--c-ink-100);
}
.h2x--b .h2x__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: center;
}
.h2x--b .h2x__eyebrow { color: var(--orange-ink); }
.h2x--b .h2x__title {
  color: var(--c-ink-900);
  font-size: clamp(2rem, 3.9vw, 3.125rem);
}
.h2x--b .h2x__title em { font-style: normal; color: var(--orange-ink); }
.h2x--b .h2x__sub   { color: var(--c-ink-600); }
.h2x--b .h2x__proof { color: var(--c-ink-500); }
.h2x--b .h2x__proof b { color: var(--c-ink-900); }
.h2x--b .h2x-pick__label { color: var(--c-ink-500); }
.h2x--b .h2x-papers { max-width: 520px; margin-bottom: 22px; }
.h2x--b .h2x-paper {
  background: #fff;
  border-color: var(--c-ink-200);
  color: var(--c-ink-900);
  box-shadow: var(--shadow-sm);
}
.h2x--b .h2x-paper:hover {
  border-color: var(--orange);
  box-shadow: 0 8px 20px rgba(249,115,22,0.16);
}
.h2x--b .h2x-paper__name { color: var(--c-ink-500); }
.h2x--b .h2x-pick__all   { color: var(--orange-ink); }

/* ── B's composition: a study text, a phone running the AI Tutor, and
   a mock paper behind them. Drawn in CSS so it is honest today — no
   stock photo — and a real photograph of the printed material can
   replace this whole block when the pictures arrive. ───────────── */
/* Tall enough that the mock paper clears the top of the phone — the
   three things have to read as three things. */
.h2x-show { position: relative; min-height: 464px; }
.h2x-show__sheet {
  position: absolute; top: 0; right: 1%;
  width: 190px; height: 250px;
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  transform: rotate(6deg);
  padding: 18px 16px;
  overflow: hidden;
}
.h2x-show__sheet b {
  display: block;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-500);
  margin-bottom: 12px;
}
.h2x-show__line { height: 6px; border-radius: 3px; background: var(--c-ink-100); margin-bottom: 8px; }
.h2x-show__line:nth-of-type(2) { width: 86%; }
.h2x-show__line:nth-of-type(4) { width: 72%; }
.h2x-show__line:nth-of-type(6) { width: 90%; }
.h2x-show__line:nth-of-type(8) { width: 64%; }

/* The study text */
.h2x-book {
  position: absolute; left: 0; bottom: 2%;
  width: 232px; height: 304px;
  border-radius: 4px 10px 10px 4px;
  background: linear-gradient(135deg, var(--c-navy-800) 0%, var(--navy) 55%, #081630 100%);
  box-shadow: 0 26px 54px rgba(4,10,28,0.30), 0 2px 0 rgba(255,255,255,0.08) inset;
  transform: rotate(-3deg);
  padding: 26px 22px 22px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* spine */
.h2x-book::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 13px;
  background: linear-gradient(90deg, rgba(0,0,0,0.42), rgba(255,255,255,0.07));
}
.h2x-book__brand {
  font-family: var(--f-display);
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
}
.h2x-book__rule { width: 42px; height: 3px; background: var(--orange); margin: 14px 0 auto; }
.h2x-book__code {
  font-family: var(--f-display);
  font-size: 54px;
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}
.h2x-book__name {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: rgba(255,255,255,0.80);
  margin-top: 8px;
}
.h2x-book__kind {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-orange-300);
  margin-top: 14px;
}

/* The phone, running the AI Tutor */
.h2x-phone {
  position: absolute; right: 4%; bottom: 0;
  width: 208px; height: 358px;
  border-radius: 34px;
  background: #0A0F1C;
  padding: 9px;
  box-shadow: 0 30px 60px rgba(4,10,28,0.34);
  transform: rotate(2deg);
}
.h2x-phone__screen {
  position: relative;
  height: 100%;
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.h2x-phone__bar {
  flex-shrink: 0;
  padding: 13px 14px 10px;
  border-bottom: 1px solid var(--c-ink-100);
  font-family: var(--f-display);
  font-size: 11.5px;
  font-weight: var(--fw-black);
  letter-spacing: 0.04em;
  color: var(--c-ink-900);
  display: flex; align-items: center; gap: 6px;
}
.h2x-phone__bar i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10D87A; flex-shrink: 0;
}
.h2x-phone__body { flex: 1; padding: 12px 11px; display: flex; flex-direction: column; gap: 9px; }
.h2x-bub {
  max-width: 86%;
  font-size: 10.5px;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 12px;
}
.h2x-bub--me {
  align-self: flex-end;
  background: var(--navy);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.h2x-bub--ai {
  align-self: flex-start;
  background: var(--c-ink-50);
  color: var(--c-ink-800);
  border: 1px solid var(--c-ink-100);
  border-bottom-left-radius: 4px;
}
.h2x-bub--ai em {
  display: block;
  font-style: normal;
  font-family: 'Times New Roman', serif;
  font-size: 12.5px;
  color: var(--c-ink-900);
  text-align: center;
  margin: 7px 0 3px;
}
.h2x-phone__composer {
  flex-shrink: 0;
  margin: 0 11px 12px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--c-ink-50);
  border: 1px solid var(--c-ink-200);
  display: flex; align-items: center;
  padding: 0 11px;
  font-size: 10px;
  color: var(--c-ink-400);
}


/* ══════════════════════════════════════════════════════════════════
   D — the chosen hero: A's words on B's page
   Inherits everything from .h2x--b; this block only covers what the
   choice changed. The picker names a few papers and hands the rest to
   the courses page, because S.MONK is heading for all thirteen exams
   plus whatever IAI adds — a fixed grid would have to be re-cut every
   time. Six tiles sit as 3x2 beside the deck at every width, so the
   layout does not move when a paper is switched on.
   ══════════════════════════════════════════════════════════════════ */
.h2x--d .h2x-papers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 480px;
  margin-bottom: 13px;
}
/* The button carries the real total, so it is wider than a chip and
   needs to read as the way through to everything else. */
.h2x--d .h2x-pick__more {
  padding: 11px 22px;
  font-size: var(--text-base);
}
.h2x--d .h2x__proof { margin-top: 18px; }


/* ══════════════════════════════════════════════════════════════════
   D's deck — what a student gets, one card at a time
   ------------------------------------------------------------------
   A single still picture could only ever show three things. Ravi asked
   for as many features as the space can carry and for a visitor to be
   able to move through them, so the right-hand side is a track you can
   swipe on a phone, drag with a mouse, step with the arrows, or jump
   with the dots.

   It is built to work with no JavaScript: the track is an ordinary
   horizontal scroller, so every card is reachable by swiping or by
   tabbing to the track and using the arrow keys. js/home-interactive.js
   then unhides the arrows and dots and adds the slow auto-advance.
   The art inside each card is drawn in CSS and marked aria-hidden; the
   words beside it carry the meaning.
   ══════════════════════════════════════════════════════════════════ */
.h2x-deck { position: relative; min-width: 0; }

.h2x-deck__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 11px; padding: 0 4px;
}
.h2x-deck__eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-500);
}
.h2x-deck__arrows { display: flex; gap: 6px; }
.h2x-deck__arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--c-ink-200);
  background: #fff;
  color: var(--c-ink-700);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.h2x-deck__arrow:hover:not(:disabled) {
  border-color: var(--orange);
  color: var(--orange-ink);
  box-shadow: 0 4px 12px rgba(249,115,22,0.18);
}
.h2x-deck__arrow:disabled { opacity: 0.32; cursor: default; }

/* The track. scroll-snap does the work on touch; the script only
   nudges scrollLeft, so swiping and the buttons can never disagree. */
.h2x-deck__track {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 4px 4px 16px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.h2x-deck__track::-webkit-scrollbar { display: none; }
.h2x-deck__track:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 20px;
}
/* While a mouse drag is in progress snapping has to be off, or the
   card fights the pointer. */
.h2x-deck__track.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
.h2x-deck__track.is-dragging a { pointer-events: none; }
/* Snapping off for the length of a slide. With scroll-snap-type:x
   mandatory the browser re-snaps every time the script writes
   scrollLeft, so every frame of the tween was being yanked to the
   nearest card and the move read as one card being swapped for the
   next rather than sliding to it — Ravi, 9 Nov: "1 card simply gets
   replaced by another. it should look like proper sliding." */
.h2x-deck__track.is-sliding { scroll-snap-type: none; }

.h2x-card {
  flex: 0 0 auto;
  width: 272px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: 15px;
  /* A white card on a cream page needs a real shadow or it sinks into
     the background — Ravi, 9 Nov: "ubhar ke nahi aa raha". Two
     shadows: a tight one to hold the edge, a wide soft one for lift. */
  box-shadow: 0 1px 2px rgba(11,29,63,0.05), 0 10px 26px rgba(11,29,63,0.10);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
/* The AI Tutor card carries a real doubt and a real answer, so it is
   given the room to be read rather than squeezed to match the others. */
.h2x-card--wide { width: 356px; }
/* Its art grows to whatever the answer needs instead of clipping it.
   A fixed box looked right on this laptop and would have cut the last
   line off the first time a font fell back a size.

   It also takes up whatever height the tallest card in the row leaves
   over — every card in a flex row is as tall as the tallest, and this
   one has the shortest words under the picture, so without `flex` it
   ended with 70px of empty card below the text. The chat panel inside
   stretches with it and its composer settles at the bottom, which is
   where a chat's composer belongs anyway. */
.h2x-card--wide .h2x-card__art {
  flex: 1 1 auto;
  height: auto;
  min-height: 218px;
  /* stretch, not the base rule's centre: the chat has to fill the box,
     not float in the middle of it. */
  display: flex;
  align-items: stretch;
  padding: 10px;
}
.h2x-card--wide .h2x-chat { position: static; height: auto; flex: 1; }
.h2x-card.is-active {
  border-color: var(--orange);
  box-shadow: 0 1px 2px rgba(11,29,63,0.06), 0 20px 46px rgba(11,29,63,0.17);
}

.h2x-card__art {
  position: relative;
  height: 218px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--c-surface-warm) 0%, #fff 100%);
  border-bottom: 1px solid var(--c-ink-100);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.h2x-card__body {
  flex: 1;
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 5px;
}
.h2x-card__tag {
  font-size: 9.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.h2x-card__title {
  font-family: var(--f-display);
  font-size: 15.5px;
  font-weight: var(--fw-black);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-ink-900);
  margin: 0;
}
.h2x-card__line {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--c-ink-600);
  margin: 0;
}
.h2x-card__note {
  margin-top: auto; padding-top: 7px;
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  color: var(--orange-ink);
  text-decoration: none;
}
.h2x-card__note:hover { text-decoration: underline; }

/* ── Dots ───────────────────────────────────────────────────────── */
.h2x-deck__dots { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.h2x-deck__dot {
  width: 22px; height: 5px;
  padding: 0; border: 0; border-radius: 3px;
  background: var(--c-ink-200);
  cursor: pointer;
  transition: background .2s, width .2s;
}
.h2x-deck__dot:hover { background: var(--c-ink-400); }
.h2x-deck__dot[aria-current="true"] { background: var(--orange); width: 32px; }
.h2x-deck__dot:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ══ Card art ══════════════════════════════════════════════════════
   Drawn, never photographed. Each block below is self-contained so a
   real photograph can replace one card without touching the others.
   ══════════════════════════════════════════════════════════════════ */

/* 1. AI Tutor — a real CS2 doubt. The question has to look like
      something a student would actually be stuck on, so it is the
      Cox model one, and the answer is the one a tutor would give. */
.h2x-chat {
  position: absolute; inset: 10px;
  background: #fff;
  border: 1px solid var(--c-ink-100);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.h2x-chat__bar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--c-ink-100);
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: var(--fw-black);
  letter-spacing: 0.06em;
  color: var(--c-ink-900);
}
.h2x-chat__bar i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10D87A; flex-shrink: 0;
}
.h2x-chat__bar span {
  margin-left: auto;
  font-family: var(--f);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--orange-ink);
  background: var(--c-orange-50);
  border-radius: var(--radius-full);
  padding: 2px 7px;
}
.h2x-chat__body {
  flex: 1; min-height: 0;
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  overflow: hidden;
}
.h2x-chat .h2x-bub {
  max-width: 93%;
  margin: 0;
  font-size: 10.5px;
  line-height: 1.45;
  padding: 7px 9px;
  border-radius: 11px;
}
.h2x-chat .h2x-bub--me {
  align-self: flex-end;
  background: var(--navy);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.h2x-chat .h2x-bub--ai {
  align-self: flex-start;
  background: var(--c-ink-50);
  color: var(--c-ink-800);
  border: 1px solid var(--c-ink-100);
  border-bottom-left-radius: 3px;
}
/* Inline, not the block formula B's phone used: these symbols belong
   inside the sentence. */
.h2x-chat .h2x-bub--ai em {
  display: inline;
  font-style: normal;
  font-family: 'Times New Roman', serif;
  font-size: 12px;
  color: var(--c-ink-900);
  white-space: nowrap;
  margin: 0;
}
.h2x-chat__composer {
  flex-shrink: 0;
  margin: 0 8px 8px;
  height: 25px;
  border-radius: var(--radius-full);
  background: var(--c-ink-50);
  border: 1px solid var(--c-ink-200);
  display: flex; align-items: center;
  padding: 0 10px;
  font-size: 9.5px;
  color: var(--c-ink-400);
}
/* The answer arrives after the question, but only when the card is on
   screen and only when the visitor has not asked for less motion —
   the script adds .is-anim, so with no JS both are simply there. */
.h2x-chat [data-tutor-q],
.h2x-chat [data-tutor-a] { transition: opacity .45s ease, transform .45s ease; }
.h2x-chat.is-anim [data-tutor-q],
.h2x-chat.is-anim [data-tutor-a] { opacity: 0; transform: translateY(7px); }
.h2x-chat.is-anim.is-step1 [data-tutor-q],
.h2x-chat.is-anim.is-step2 [data-tutor-q] { opacity: 1; transform: none; }
/* Only while the answer is still coming. is-step1 is never taken off
   again, so without the :not() the composer would read "typing" for
   as long as the page is open. */
.h2x-chat.is-anim.is-step1:not(.is-step2) .h2x-chat__composer::after {
  content: "typing";
  margin-left: auto;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.h2x-chat.is-anim.is-step2 [data-tutor-a] { opacity: 1; transform: none; }

/* 2. The study text */
.h2x-card__art .h2x-book {
  position: static;
  width: 126px; height: 168px;
  padding: 15px 13px 13px;
  border-radius: 3px 8px 8px 3px;
  box-shadow: 0 18px 34px rgba(4,10,28,0.28), 0 2px 0 rgba(255,255,255,0.08) inset;
}
.h2x-card__art .h2x-book::before { width: 8px; }
.h2x-card__art .h2x-book__brand { font-size: 7.5px; letter-spacing: 0.2em; }
.h2x-card__art .h2x-book__rule { width: 26px; height: 2px; margin: 9px 0 auto; }
.h2x-card__art .h2x-book__code { font-size: 32px; }
.h2x-card__art .h2x-book__name { font-size: 8.5px; margin-top: 5px; }
.h2x-card__art .h2x-book__kind { font-size: 7px; letter-spacing: 0.14em; margin-top: 8px; }

/* 3. A marked mock paper */
.h2x-sheet {
  position: relative;
  width: 136px; height: 172px;
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: 5px;
  box-shadow: var(--shadow-md);
  transform: rotate(-2.5deg);
  padding: 14px 13px;
  overflow: hidden;
}
.h2x-sheet b {
  display: block;
  font-family: var(--f-display);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-500);
  margin-bottom: 12px;
}
.h2x-sheet__l {
  display: block; height: 5px; border-radius: 3px;
  background: var(--c-ink-100); margin-bottom: 8px;
}
.h2x-sheet__l:nth-child(3) { width: 84%; }
.h2x-sheet__l:nth-child(5) { width: 70%; }
.h2x-sheet__l:nth-child(6) { width: 88%; }
.h2x-sheet__mark {
  position: absolute; right: 8px; bottom: 11px;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: var(--fw-black);
  color: #D6453A;
  border: 2px solid #D6453A;
  border-radius: var(--radius-full);
  padding: 3px 8px;
  background: #fff;
  transform: rotate(-8deg);
}

/* 4. A small live batch */
.h2x-tiles { display: grid; grid-template-columns: repeat(3, 44px); gap: 7px; }
.h2x-tiles span {
  height: 32px; border-radius: 5px;
  background: var(--c-ink-100);
  border: 1px solid var(--c-ink-200);
}
.h2x-tiles span.is-live {
  background: linear-gradient(135deg, var(--c-navy-700), var(--navy));
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.26);
}

/* 5. The recording */
.h2x-player { width: 170px; }
.h2x-player__screen {
  position: relative; height: 100px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--c-navy-700) 0%, #081630 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.h2x-player__play {
  width: 0; height: 0;
  margin-left: 5px;
  border-left: 17px solid #fff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.h2x-player__bar {
  margin-top: 10px; height: 5px; border-radius: 3px;
  background: var(--c-ink-200); overflow: hidden;
}
.h2x-player__bar i { display: block; height: 100%; width: 38%; background: var(--orange); border-radius: 3px; }

/* 6. Practice questions, two marked and one still open */
.h2x-qs { width: 172px; display: flex; flex-direction: column; gap: 8px; }
.h2x-q {
  display: flex; align-items: center; gap: 9px;
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: 9px;
  padding: 9px 10px;
  box-shadow: var(--shadow-sm);
}
.h2x-q b { font-family: var(--f-display); font-size: 10px; color: var(--c-ink-500); }
.h2x-q span { flex: 1; height: 5px; border-radius: 3px; background: var(--c-ink-100); }
.h2x-q i {
  position: relative; flex-shrink: 0;
  width: 15px; height: 15px; border-radius: 50%;
  background: #15803D;
}
.h2x-q i::after {
  content: ""; position: absolute; left: 5px; top: 3px;
  width: 4px; height: 7px;
  border: solid #fff; border-width: 0 1.7px 1.7px 0;
  transform: rotate(42deg);
}
.h2x-q--open {
  border-color: var(--c-orange-300);
  box-shadow: 0 6px 16px rgba(249,115,22,0.16);
}

/* 7. Excel and R */
.h2x-grid-art {
  width: 162px;
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.h2x-grid-art__head { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--c-ink-50); }
.h2x-grid-art__head span {
  padding: 5px 0; text-align: center;
  font-size: 9px; font-weight: var(--fw-bold);
  color: var(--c-ink-500);
  border-right: 1px solid var(--c-ink-200);
  border-bottom: 1px solid var(--c-ink-200);
}
.h2x-grid-art__rows { display: grid; grid-template-columns: repeat(3, 1fr); }
.h2x-grid-art__rows i {
  position: relative; height: 22px;
  border-right: 1px solid var(--c-ink-100);
  border-bottom: 1px solid var(--c-ink-100);
}
.h2x-grid-art__rows i::after {
  content: ""; position: absolute; left: 7px; right: 7px; top: 9px;
  height: 4px; border-radius: 2px; background: var(--c-ink-100);
}
.h2x-grid-art__rows i:nth-child(5)::after { background: var(--c-teal-400); }

/* 8. A job with a match score */
.h2x-job {
  width: 180px;
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}
.h2x-job__ring {
  position: relative; flex-shrink: 0;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--c-teal-500) 0 92%, var(--c-ink-100) 92% 100%);
}
.h2x-job__ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.h2x-job__ring b {
  position: relative;
  font-family: var(--f-display);
  font-size: 15px; font-weight: var(--fw-black);
  color: var(--c-ink-900);
}
.h2x-job__ring small { font-size: 8px; }
.h2x-job__lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.h2x-job__lines span { height: 6px; border-radius: 3px; background: var(--c-ink-100); }
.h2x-job__lines span:last-child { width: 62%; }

/* 9. Pay once until you pass */
.h2x-badge {
  width: 94px; height: 94px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 32% 26%, #fff 0%, var(--c-orange-50) 100%);
  border: 1px solid var(--c-orange-300);
  color: var(--orange-ink);
  box-shadow: 0 14px 30px rgba(249,115,22,0.18);
}
.h2x-badge svg { width: 46px; height: 46px; }

/* A caption pinned under the drawing, for the cards that need one. */
.h2x-art__chip {
  position: absolute; left: 50%; bottom: 12px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--c-ink-600);
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  box-shadow: var(--shadow-sm);
}
.h2x-art__chip--r {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--navy);
  border-color: var(--navy);
  color: #5EEAD4;
}

/* ── The deck on a desktop screen ───────────────────────────────────
   Ravi, 9 Nov, looking at it live on a laptop: "right hand side
   sliders can be made large. right now it looks childish." He is
   right — a 272px card in a 510px column read as a widget rather than
   as the thing being shown. On anything laptop-sized the cards take
   most of the column, keeping only enough of the next one showing to
   say there is more, and the type inside grows with them.
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .h2x-deck__track { gap: 16px; }

  .h2x-card        { width: 330px; }
  .h2x-card--wide  { width: 418px; }

  .h2x-card__art               { height: 252px; }
  .h2x-card--wide .h2x-card__art { min-height: 252px; }

  .h2x-card__body  { padding: 16px 19px 18px; gap: 6px; }
  .h2x-card__tag   { font-size: 10px; }
  .h2x-card__title { font-size: 17.5px; }
  .h2x-card__line  { font-size: 13.5px; }
  .h2x-card__note  { font-size: 12.5px; }

  /* The drawings keep pace, or a bigger card is just a bigger margin. */
  .h2x-chat .h2x-bub          { font-size: 12px; padding: 8px 11px; border-radius: 12px; }
  .h2x-chat .h2x-bub--ai em   { font-size: 13.5px; }
  .h2x-chat__bar              { font-size: 11px; padding: 9px 11px; }
  .h2x-chat__bar span         { font-size: 10px; }
  .h2x-chat__composer         { height: 29px; font-size: 10.5px; }

  .h2x-card__art .h2x-book       { width: 148px; height: 198px; padding: 18px 15px 15px; }
  .h2x-card__art .h2x-book__code { font-size: 38px; }
  .h2x-card__art .h2x-book__name { font-size: 9.5px; }

  .h2x-sheet        { width: 158px; height: 200px; }
  .h2x-sheet__mark  { font-size: 14px; }
  .h2x-tiles        { grid-template-columns: repeat(3, 52px); }
  .h2x-tiles span   { height: 38px; }
  .h2x-player       { width: 200px; }
  .h2x-player__screen { height: 118px; }
  .h2x-qs           { width: 202px; }
  .h2x-grid-art     { width: 190px; }
  .h2x-grid-art__rows i { height: 26px; }
  .h2x-job          { width: 212px; }
  .h2x-job__ring    { width: 62px; height: 62px; }
  .h2x-job__ring b  { font-size: 17px; }
  .h2x-badge        { width: 110px; height: 110px; }
  .h2x-badge svg    { width: 54px; height: 54px; }
  .h2x-art__chip    { font-size: 10.5px; padding: 5px 12px; }
}

/* ── The deck on smaller screens ────────────────────────────────── */
@media (max-width: 900px) {
  /* The deck is content, not decoration, so unlike B's still picture
     it stays on a phone — it just sits under the paper picker, where
     it cannot push the main action off the screen. */
  .h2x--d .h2x-deck { margin-top: 2px; }
  .h2x-card { width: 258px; }
  .h2x-card--wide { width: 300px; }
}

@media (max-width: 600px) {
  .h2x--d .h2x-papers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
  /* A card and a slice of the next one: the slice is what tells a
     thumb there is more to the right. */
  .h2x-card { width: 76vw; max-width: 272px; }
  .h2x-card--wide { width: 84vw; max-width: 304px; }
  .h2x-card__art { height: 186px; }
}


/* ══════════════════════════════════════════════════════════════════
   C — navy, centred, the question is the headline
   One column, nothing to look at but the question and the papers.
   Most focused on the five-second job.
   ══════════════════════════════════════════════════════════════════ */
.h2x--c {
  background:
    radial-gradient(900px 440px at 50% -10%, rgba(20,163,181,0.22) 0%, transparent 60%),
    linear-gradient(170deg, var(--c-navy-800) 0%, var(--navy) 46%, #060F24 100%);
  text-align: center;
}
.h2x--c .h2x__inner { max-width: 880px; }
.h2x--c .h2x__eyebrow { color: var(--c-teal-400); justify-content: center; }
.h2x--c .h2x__title {
  color: #fff;
  font-size: clamp(2.125rem, 4.6vw, 3.5rem);
  margin-bottom: 16px;
}
.h2x--c .h2x__sub {
  color: rgba(255,255,255,0.78);
  max-width: 60ch;
  margin-left: auto; margin-right: auto;
  margin-bottom: 30px;
}
.h2x--c .h2x-pick__label { color: rgba(255,255,255,0.52); }
/* Centred design, so the picker is flex rather than grid: with seven
   papers in six columns a grid leaves the last tile stranded on the
   left of its own row. Flex lets the final row centre under the rest. */
.h2x--c .h2x-papers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 760px;
  margin: 0 auto 18px;
  text-align: left;
}
.h2x--c .h2x-papers > li { flex: 0 1 112px; }
.h2x--c .h2x-paper {
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.16);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.h2x--c .h2x-paper:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--c-orange-300);
}
.h2x--c .h2x-paper__name { color: rgba(255,255,255,0.62); }
.h2x--c .h2x-pick__all { color: var(--c-orange-300); margin-bottom: 30px; }

/* The five things, as one quiet row under the papers. */
.h2x-five {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  margin: 0 auto 24px;
  padding: 0;
  list-style: none;
  max-width: 760px;
}
.h2x-five li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.86);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius-full);
  padding: 7px 14px;
}
.h2x-five svg { flex-shrink: 0; color: var(--c-teal-400); }
.h2x--c .h2x__proof { justify-content: center; color: rgba(255,255,255,0.58); }
.h2x--c .h2x__proof b { color: #fff; }


/* ══════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════ */
/* Stack the two-column designs when the picker and the composition
   stop having room to sit side by side. */
@media (max-width: 900px) {
  .h2x--a .h2x__inner,
  .h2x--b .h2x__inner { grid-template-columns: 1fr; gap: 32px; }
  .h2x--a .h2x__sub,
  .h2x--b .h2x__sub { max-width: none; }
  .h2x--b .h2x-papers { max-width: none; }
  /* The nav is 60px below 900px (style.css), not 80px — and body is
     padded 60px to match, so there is no strip to close here. */
  .h2x {
    margin-top: -60px;
    padding-top: calc(60px + clamp(26px, 5.5vw, 52px));
  }
  /* The drawn composition is decoration: below the headline it would
     only push the papers off the screen, so it goes. */
  .h2x-show { display: none; }
}

@media (max-width: 600px) {
  .h2x { padding-bottom: clamp(36px, 7vw, 56px); }
  /* Scoped per variant on purpose: the A/B/C rules above are
     `.h2x--a .h2x__title`, so a bare `.h2x__title` here would lose on
     specificity and the clamp floor (34px) would win instead. */
  .h2x--a .h2x__title,
  .h2x--b .h2x__title,
  .h2x--c .h2x__title { font-size: 30px; }
  .h2x__sub { font-size: 0.9375rem; margin-bottom: 22px; }
  .h2x-panel { padding: 20px 18px; border-radius: 16px; }
  .h2x__btn { width: 100%; justify-content: center; }
  .h2x-five { gap: 8px; }
  .h2x-five li { font-size: 11.5px; padding: 6px 11px; }
  /* The proof line always wraps on a phone, and a wrap straight after
     a middot leaves it stranded at the end of a line. The gap alone
     separates the facts well enough at this width. */
  .h2x__proof { gap: 3px 14px; }
  .h2x__proof-sep { display: none; }
}

@media (max-width: 380px) {
  .h2x--a .h2x__title,
  .h2x--b .h2x__title,
  .h2x--c .h2x__title { font-size: 27px; }
}

/* Reduced motion: no pulse, no lift. */
@media (prefers-reduced-motion: reduce) {
  .h2x__dot { animation: none; }
  .h2x-paper, .h2x__btn { transition: none; }
  .h2x-paper:hover, .h2x__btn:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   The deck's pictures, with something happening in them
   ------------------------------------------------------------------
   Ravi, 9 Nov: the cards were "getting mixed with the colour of the
   website" and the drawings inside them needed to "pull a lot of
   attention". Two answers here.

   One: every picture now sits on its own tinted ground rather than on
   the same near-white as the page, so the card reads as a card.

   Two: each picture does something — but ONLY on the card you are
   looking at. The deck already marks that card .is-active, so this
   costs nothing for the eight cards you are not looking at, and
   nothing at all for a visitor who asked for less motion.
   ══════════════════════════════════════════════════════════════════ */

/* ── Tinted grounds, one per card ───────────────────────────────── */
.h2x-card__art--tutor  { background: linear-gradient(165deg, #EAF6FF 0%, #F7FBFF 70%); }
.h2x-card__art--text   { background: linear-gradient(165deg, #E9EEF8 0%, #F8FAFD 72%); }
.h2x-card__art--mock   { background: linear-gradient(165deg, #FFF1E8 0%, #FFFAF6 72%); }
.h2x-card__art--live   { background: linear-gradient(165deg, #E7F6F4 0%, #F7FCFB 72%); }
.h2x-card__art--replay { background: linear-gradient(165deg, #ECEBFB 0%, #FAF9FE 72%); }
.h2x-card__art--bank   { background: linear-gradient(165deg, #E9F5EC 0%, #F8FCF9 72%); }
.h2x-card__art--tools  { background: linear-gradient(165deg, #E6F4F7 0%, #F7FCFD 72%); }
.h2x-card__art--jobs   { background: linear-gradient(165deg, #EAF2FB 0%, #F8FBFE 72%); }
.h2x-card__art--pass   { background: linear-gradient(165deg, #FFF0E4 0%, #FFFAF5 72%); }

/* A soft disc behind each drawing, so the object has somewhere to sit
   instead of floating on a flat panel. */
.h2x-card__art::after {
  content: "";
  position: absolute;
  left: 50%; top: 52%;
  width: 168px; height: 168px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
  z-index: 0;
}
.h2x-card__art > * { position: relative; z-index: 1; }
.h2x-card--wide .h2x-card__art::after { display: none; }

/* ── The generated picture, laid over the drawing ────────────────────
   Ravi, 9 Nov: the pictures in the cards have to "pull a lot of
   attention". Each card now carries an illustration made for it. It
   fills the whole picture area and brings its own navy ground, so it
   looks the same whichever dress the deck is wearing — white cards on
   the navy slab, or navy cards in `alt` and `dark`.

   It is laid OVER the CSS drawing rather than replacing it. If an
   image is ever slow, blocked or missing, the drawing underneath is
   what a visitor sees, so a card can never come up empty. That also
   means one file is all it takes to change one card's picture.
   ─────────────────────────────────────────────────────────────── */
.h2x-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;                 /* above the drawing (1) and the disc (0) */
  /* No background colour here on purpose: a broken <img> still paints
     its own background, which would hide the drawing it is supposed to
     be falling back to. Until the picture arrives, the drawing is what
     shows, which is exactly what we want. */
}

/* ── The study text: a second volume behind the first ───────────── */
.h2x-card__art--text { perspective: 700px; }
.h2x-card__art .h2x-book {
  box-shadow: 0 18px 34px rgba(4,10,28,0.30), 0 2px 0 rgba(255,255,255,0.08) inset,
              -14px 10px 0 -4px rgba(11,29,63,0.16);
}
.h2x-card.is-active .h2x-card__art .h2x-book { animation: h2x-breathe 5.5s ease-in-out infinite; }
@keyframes h2x-breathe {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(-7px); }
}

/* ── The marked mock: the score stamps on ───────────────────────── */
.h2x-card.is-active .h2x-sheet__mark { animation: h2x-stamp 4.5s ease-in-out infinite; }
@keyframes h2x-stamp {
  0%, 12%  { transform: rotate(-8deg) scale(1.9); opacity: 0; }
  22%, 86% { transform: rotate(-8deg) scale(1);   opacity: 1; }
  100%     { transform: rotate(-8deg) scale(1);   opacity: 1; }
}

/* ── The live batch: the seats fill, one light stays on ─────────── */
.h2x-card.is-active .h2x-tiles span { animation: h2x-seat 3.6s ease-in-out infinite; }
.h2x-card.is-active .h2x-tiles span:nth-child(2) { animation-delay: .12s; }
.h2x-card.is-active .h2x-tiles span:nth-child(4) { animation-delay: .24s; }
.h2x-card.is-active .h2x-tiles span:nth-child(5) { animation-delay: .36s; }
.h2x-card.is-active .h2x-tiles span:nth-child(7) { animation-delay: .48s; }
.h2x-card.is-active .h2x-tiles span:nth-child(9) { animation-delay: .6s; }
@keyframes h2x-seat {
  0%, 70%, 100% { opacity: 1; }
  35%           { opacity: .45; }
}
.h2x-card.is-active .h2x-tiles span.is-live { animation: h2x-onair 2.2s ease-in-out infinite; }
@keyframes h2x-onair {
  0%, 100% { box-shadow: 0 0 0 3px rgba(249,115,22,0.26); }
  50%      { box-shadow: 0 0 0 7px rgba(249,115,22,0.10); }
}

/* ── The recording: the bar runs ────────────────────────────────── */
.h2x-card.is-active .h2x-player__bar i { animation: h2x-playhead 6s linear infinite; }
@keyframes h2x-playhead { 0% { width: 8%; } 100% { width: 92%; } }
.h2x-card.is-active .h2x-player__play { animation: h2x-pulse-play 2.4s ease-in-out infinite; }
@keyframes h2x-pulse-play {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .72; transform: scale(1.1); }
}

/* ── Practice questions: they get ticked ────────────────────────── */
.h2x-card.is-active .h2x-q i { animation: h2x-tick 4.2s ease-in-out infinite; }
.h2x-card.is-active .h2x-q:nth-child(2) i { animation-delay: .5s; }
@keyframes h2x-tick {
  0%, 10%  { transform: scale(0); opacity: 0; }
  24%      { transform: scale(1.25); opacity: 1; }
  32%, 90% { transform: scale(1); opacity: 1; }
  100%     { transform: scale(1); opacity: 1; }
}
.h2x-card.is-active .h2x-q--open { animation: h2x-nudge 4.2s ease-in-out infinite; }
@keyframes h2x-nudge {
  0%, 60%, 100% { transform: translateX(0); }
  70%           { transform: translateX(4px); }
  80%           { transform: translateX(0); }
}

/* ── Excel and R: a cell computes ───────────────────────────────── */
.h2x-card.is-active .h2x-grid-art__rows i:nth-child(5)::after { animation: h2x-cell 3.4s ease-in-out infinite; }
@keyframes h2x-cell {
  0%, 100% { background: var(--c-teal-400); transform: scaleX(1); }
  50%      { background: var(--orange);     transform: scaleX(.6); }
}
.h2x-card.is-active .h2x-art__chip--r { animation: h2x-caret 1.6s steps(1) infinite; }
@keyframes h2x-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: .55; } }

/* ── The jobs portal: the match score sweeps up ─────────────────── */
.h2x-card.is-active .h2x-job__ring { animation: h2x-score 5s ease-out infinite; }
@keyframes h2x-score {
  0%       { background: conic-gradient(var(--c-teal-500) 0 0%,  var(--c-ink-100) 0% 100%); }
  45%, 100%{ background: conic-gradient(var(--c-teal-500) 0 92%, var(--c-ink-100) 92% 100%); }
}

/* ── Pay once until you pass: a sheen crosses the badge ─────────── */
.h2x-badge { position: relative; overflow: hidden; }
.h2x-badge::before {
  content: "";
  position: absolute; inset: -40%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.85) 50%, transparent 58%);
  transform: translateX(-120%);
}
.h2x-card.is-active .h2x-badge::before { animation: h2x-sheen 4.6s ease-in-out infinite; }
@keyframes h2x-sheen {
  0%, 55%  { transform: translateX(-120%); }
  85%, 100%{ transform: translateX(120%); }
}

/* Nothing above runs for anyone who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .h2x-card.is-active .h2x-card__art .h2x-book,
  .h2x-card.is-active .h2x-sheet__mark,
  .h2x-card.is-active .h2x-tiles span,
  .h2x-card.is-active .h2x-tiles span.is-live,
  .h2x-card.is-active .h2x-player__bar i,
  .h2x-card.is-active .h2x-player__play,
  .h2x-card.is-active .h2x-q i,
  .h2x-card.is-active .h2x-q--open,
  .h2x-card.is-active .h2x-grid-art__rows i:nth-child(5)::after,
  .h2x-card.is-active .h2x-art__chip--r,
  .h2x-card.is-active .h2x-job__ring,
  .h2x-card.is-active .h2x-badge::before { animation: none !important; }
  .h2x-badge::before { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Three darker dresses for the deck
   ------------------------------------------------------------------
   Ravi, 9 Nov: the cards still blend into the page — "can't we make
   it dark background? or different cards of different colours, light
   then dark then light". Three answers, all previewable with ?deck=
   and all settable from `home_deck_style` with no deploy:

     slab   the deck sits on a navy panel; the white cards lift off it
            hard, and the hero around it stays light.
     alt    the cards alternate light and navy down the track.
     dark   every card is navy with light type.

   Each dresses the SAME markup — no card is rebuilt, so whichever is
   chosen, nothing about the content or the behaviour changes.
   ══════════════════════════════════════════════════════════════════ */

/* ── slab ───────────────────────────────────────────────────────── */
.h2x-deck--slab {
  background: linear-gradient(165deg, var(--c-navy-700) 0%, var(--navy) 55%, #0A1733 100%);
  border-radius: 22px;
  padding: 18px 0 16px 18px;
  box-shadow: 0 26px 60px rgba(4,10,28,0.26);
}
.h2x-deck--slab .h2x-deck__head { padding-right: 18px; }
.h2x-deck--slab .h2x-deck__eyebrow { color: rgba(255,255,255,0.62); }
.h2x-deck--slab .h2x-deck__arrow {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}
.h2x-deck--slab .h2x-deck__arrow:hover:not(:disabled) {
  background: rgba(255,255,255,0.18);
  border-color: var(--orange);
  color: #fff;
}
.h2x-deck--slab .h2x-deck__dot { background: rgba(255,255,255,0.26); }
.h2x-deck--slab .h2x-deck__dot[aria-current="true"] { background: var(--orange); }
.h2x-deck--slab .h2x-card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.18), 0 16px 34px rgba(0,0,0,0.30);
  border-color: transparent;
}
.h2x-deck--slab .h2x-card.is-active {
  border-color: var(--orange);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 24px 50px rgba(0,0,0,0.42);
}

/* ── a navy card, used by `alt` and `dark` ──────────────────────── */
.h2x-card--onnavy {
  background: linear-gradient(165deg, var(--c-navy-700) 0%, var(--navy) 100%);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 2px 4px rgba(4,10,28,0.16), 0 14px 32px rgba(4,10,28,0.26);
}
.h2x-card--onnavy .h2x-card__art {
  background: linear-gradient(165deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 100%) !important;
  border-bottom-color: rgba(255,255,255,0.10);
}
.h2x-card--onnavy .h2x-card__art::after {
  background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%);
}
.h2x-card--onnavy .h2x-card__tag   { color: var(--c-orange-300); }
.h2x-card--onnavy .h2x-card__title { color: #fff; }
.h2x-card--onnavy .h2x-card__line  { color: rgba(255,255,255,0.70); }
.h2x-card--onnavy .h2x-card__note  { color: var(--c-orange-300); }
/* the drawings need lifting off the navy too */
.h2x-card--onnavy .h2x-sheet,
.h2x-card--onnavy .h2x-q,
.h2x-card--onnavy .h2x-job,
.h2x-card--onnavy .h2x-grid-art,
.h2x-card--onnavy .h2x-art__chip { box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.h2x-card--onnavy .h2x-tiles span { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.10); }
.h2x-card--onnavy .h2x-player__bar { background: rgba(255,255,255,0.20); }
.h2x-card--onnavy .h2x-badge { background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.18) 0%, rgba(249,115,22,0.16) 100%); }
.h2x-card--onnavy.is-active { border-color: var(--orange); }

/* ── alt: every second card goes navy ───────────────────────────── */
/* (the class is put on by the script, so the pattern survives any
   number of cards and needs no edit when one is added) */

/* ── dark: all of them ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .h2x-deck--slab { transition: none; }
}