/* Exams+ — page CSS
 * ============================================================================================
 * GOAL: a FAITHFUL (1:1) reproduction of the reference "Exams Plus.dc.html" (11 sections,
 * 334 inline styles) without those inline styles. Values read out of the reference by parsing.
 *
 * STRATEGY (prototypes/WORKFLOW.md §0): DS classes carry the components, this file carries the
 * package's metric DELTAS as page-scoped overrides, so tuning toward the DS later is deleting
 * overrides rather than rewriting markup. All rules scoped under `.exams-plus-page`.
 *
 * THE PRODUCT-PAGE SHAPE (see the report): the same archetype as Data+, near enough to share
 * this stylesheet's whole scaffold — flat 88px rhythm, paper/sand in runs, hairlined MIS band,
 * a 4-row numbered stepper for "how it works", a 3-card LIVE / COMING SOON Emma grid, and a
 * full-bleed coral closer. Where it diverges from Data+: a dark 16:10 VIDEO PLACEHOLDER panel beside
 * the problem, hover-lifting feature cards at a larger size, a dark tracking panel carrying a
 * fraction stat, and one large pull-quote card instead of a stat stack.
 *
 * TOKENS — identical to ours, used directly: the whole ink scale, coral-500, coral-100
 * (`accent-soft`), ok-green + ok-green-soft + ok-green-bright, page-bg (`sand`), paper,
 * rule #E6E8EF, dark-band #0B1023, radii 5/7/10/11/13/16/18/22/28/999, and one shadow exactly:
 *   0 30px 80px rgba(15,26,79,.12) = --shadow-deep (the hero mock)
 * DIFFERENT, so declared here (owner's ruling: keep the reference's colours):
 *     ADOPTED OUR TOKEN (2026-08-14, owner decision): the hairline is now var(--color-rule)
 *     #E6E8EF everywhere. The reference's #ECEEF3 is 6/255 lighter -- imperceptible, and the
 *     package is not unanimous anyway (Demos, Events and Webinars already use #E6E8EF, and the
 *     three legal pages have no hairline at all), so it did not earn a second token.
 *   #C9D1E6 list copy on dark · #5C688A footnote on dark · #8D9AB8 guardrail strip on dark ·
 *   #F2B01E the COMING SOON amber (our warn-amber is #FEC84B — a different value)
 * Five shadows have no token: /.06 inset panel, /.14 phone, /.08 mock, /.08 icon tile,
 * /.07 feature card, plus the coral-tinted 0 10px 24px rgba(236,99,75,.28) icon glow.
 *
 * GEOMETRY: reference container is 1200px with a 24px gutter; the DS is 1224/32. Overridden
 * page-locally only — .page-container and .section are untouched.
 * ============================================================================================ */

.exams-plus-page {
  --dc-sand-2: #E9ECF3;
  --dc-on-dark-body: var(--color-on-dark-body);
  --dc-on-dark-faint: var(--color-on-dark-faint);
  --dc-on-dark-strip: var(--color-ink-mute);
  --dc-soon-amber: #F2B01E;

  --dc-shadow-inset: 0 24px 60px rgba(15, 26, 79, 0.06);
  --dc-shadow-phone: 0 20px 60px rgba(15, 26, 79, 0.14);
  --dc-shadow-mock:  0 12px 32px rgba(15, 26, 79, 0.08);
  --dc-shadow-tile:  0 8px 22px  rgba(15, 26, 79, 0.08);
  --dc-shadow-feat:  0 14px 40px rgba(15, 26, 79, 0.07);
  --dc-shadow-icon:  0 10px 24px rgba(236, 99, 75, 0.30);
  --dc-shadow-feat-hover: 0 26px 60px rgba(15, 26, 79, 0.13);
  --dc-shadow-quote: 0 18px 48px rgba(15, 26, 79, 0.08);

  background: var(--color-page-bg);

  /* Inter, explicitly — `.app` sets only the body colour, so a bare <p> would inherit the
     system sans. The reference sets font-family on its own root wrapper; this mirrors that. */
  font-family: var(--font-sans);
}

/* ── Container: 1200px, 24px gutter — set-wide, `_shared/page-shared.css` §2 ─────────── */
/* NO BREAKPOINT HERE IN THE REFERENCE - the padding steps that were here are gone.
 * A gutter step at 767px and a section-padding step at 991px had been added right across the
 * batch. No reference has either: they pad with literal px, no clamp and no media query, all the
 * way down to a phone - and neither 767px nor 991px is even a breakpoint the package uses
 * anywhere (its own are 1080/1000/940/900/800/720/680/640/620/560). Removed to keep the port
 * faithful; the narrow-viewport squeeze that leaves is the reference's own and is recorded in
 * STATUS.md section 5 as the defect most worth fixing at source, after the port.
 */

/* ── Vertical rhythm ────────────────────────────────────────────────────────────────────── */
/* A flat 88px is the product-page rhythm, but the hero and the two "second half of a pair"
   sections break it, so the values are still literal per section. */
.exams-plus-page .dc-py-88     { padding-top: 88px;  padding-bottom: 88px; }
.exams-plus-page .dc-py-0-88   { padding-top: 0;     padding-bottom: 88px; }
.exams-plus-page .dc-py-0-96   { padding-top: 0;     padding-bottom: 96px; }
.exams-plus-page .dc-py-none   { padding-top: 0;     padding-bottom: 0; }

/* Two sections are hairlined rather than tinted */
.exams-plus-page .dc-hairline-y {
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

/* ── Display type ───────────────────────────────────────────────────────────────────────── */
/* IMPORTANT: the reference writes every heading with the `font:` SHORTHAND, which resets
   line-height to `normal` unless a /value is given. Two of its steps genuinely have no
   /value (the hero eyebrow wordmark and the mock row titles), so those are set explicitly
   here rather than inherited — that shorthand reset was the largest source of height error
   across this batch. */
.exams-plus-page [class*="dc-t-"] {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* margin + text-wrap at ZERO specificity, via :where(), so an ordinary utility can
   override them. As written before — a 0-2-0 descendant selector — this rule silently
   beat every unlayered Tailwind margin utility (0-1-0), so `mt-5` on a dc-t- heading
   did nothing at all. Same trick the design system uses for heading element defaults
   (:where(.app h3)), and the same class of bug fixed there earlier. */
:where(.exams-plus-page [class*="dc-t-"]) {
  margin: 0;
  text-wrap: balance;
}

.exams-plus-page .dc-t-84   { font-size: clamp(44px, 6vw,   84px); line-height: 1.0;  letter-spacing: -0.04em; }
.exams-plus-page .dc-t-80   { font-size: clamp(38px, 6vw,   80px); line-height: 1.0;  letter-spacing: -0.04em; }
.exams-plus-page .dc-t-54   { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -0.03em; }
.exams-plus-page .dc-t-48   { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
.exams-plus-page .dc-t-42   { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1;  letter-spacing: -0.025em; }
.exams-plus-page .dc-t-38   { font-size: clamp(24px, 3vw,   38px); line-height: 1.12; letter-spacing: -0.025em; }
.exams-plus-page .dc-t-46   { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.03em; }
.exams-plus-page .dc-t-38b  { font-size: clamp(24px, 3vw,   38px); line-height: 1.1;  letter-spacing: -0.026em; }
.exams-plus-page .dc-t-15-5 { font-size: 15.5px; line-height: 1.3; font-weight: 600; }
.exams-plus-page .dc-t-14b  { font-size: 14px;   line-height: 1.3; font-weight: 600; }
.exams-plus-page .dc-t-17-5 { font-size: 17.5px; line-height: 1.28; letter-spacing: -0.014em; }
.exams-plus-page .dc-t-17-5b{ font-size: 17.5px; line-height: 1.25; }
.exams-plus-page .dc-t-14   { font-size: 14px;   line-height: 1.2;  letter-spacing: -0.01em; text-transform: none; }
.exams-plus-page .dc-t-13   { font-size: 13px;   line-height: 1.25; font-weight: 600; }
.exams-plus-page .dc-t-12-5 { font-size: 12.5px; line-height: 1.25; font-weight: 600; }

/* ── Body copy steps, named by px ───────────────────────────────────────────────────────── */
.exams-plus-page .dc-lede       { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); }
.exams-plus-page .dc-body-16    { font-size: 16px;   line-height: 1.6;  color: var(--color-ink-soft); margin: 0; }
.exams-plus-page .dc-body-15-5  { font-size: 15.5px; line-height: 1.6;  color: var(--color-ink-soft); }
.exams-plus-page .dc-body-15    { font-size: 15px;   line-height: 1.6;  color: var(--color-ink-soft); }
.exams-plus-page .dc-body-14    { font-size: 14px;   line-height: 1.55; color: var(--color-ink-soft); margin: 0; }
.exams-plus-page .dc-body-13-5  { font-size: 13.5px; line-height: 1.55; color: var(--color-ink-soft); margin: 0; }
.exams-plus-page .dc-body-13-45 { font-size: 13.5px; line-height: 1.45; margin: 0; }
.exams-plus-page .dc-body-13    { font-size: 13px;   line-height: 1.5;  margin: 0; }
.exams-plus-page .dc-body-12-5  { font-size: 12.5px; line-height: 1.45; color: var(--color-ink-soft); margin: 0; }
.exams-plus-page .dc-body-12    { font-size: 12px;   line-height: 1.5;  color: var(--color-ink-soft); margin: 0; }
.exams-plus-page .dc-body-10-5  { font-size: 10.5px; line-height: 1.4;  color: var(--color-ink-mute); margin: 0; }
.exams-plus-page .dc-closer-lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: rgb(255 255 255 / 0.92); }

/* ── The mono label scale ───────────────────────────────────────────────────────────────── */
/* 12.5px/0.08em and 10.5px/0.08em are exactly our font-label + text-label-l / -m +
   tracking-label. The 12px/0.09em, 11px, 10px, 9.5px/0 and 9px/0.06em steps have no DS
   equivalent — the cross-page gap being counted. */
.exams-plus-page [class*="dc-label-"],
.exams-plus-page .dc-eyebrow {
  font-family: var(--font-label);
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
}

.exams-plus-page .dc-eyebrow {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--color-coral-500);
}

.exams-plus-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: 0.09em; color: var(--color-ink-mute); }
.exams-plus-page .dc-eyebrow-row  { display: inline-flex; align-items: center; gap: 9px; }
.exams-plus-page .dc-eyebrow-row-10 { display: inline-flex; align-items: center; gap: 10px; }

.exams-plus-page .dc-label-10   { font-size: 10px;   letter-spacing: 0.08em; color: var(--color-ink-mute); }
.exams-plus-page .dc-label-10-7 { font-size: 10px;   letter-spacing: 0.07em; color: var(--color-ink-mute); }
.exams-plus-page .dc-label-10-5 { font-size: 10.5px; letter-spacing: 0.07em; color: var(--color-ink-mute); }
.exams-plus-page .dc-label-11-white { font-size: 11px; letter-spacing: 0.08em; color: #fff; }
.exams-plus-page .dc-label-9-5-7 { font-size: 9.5px; letter-spacing: 0.07em; color: var(--color-ink-mute); }
.exams-plus-page .dc-label-9-5  { font-size: 9.5px;  letter-spacing: 0;      color: var(--color-ink-mute); }
.exams-plus-page .dc-label-9    { font-size: 9px;    letter-spacing: 0.07em; color: var(--color-ink-mute); }
.exams-plus-page .dc-label-9-06 { font-size: 9px;    letter-spacing: 0.06em; color: var(--color-ink-mute); }
.exams-plus-page .dc-label-8-5  { font-size: 8.5px;  letter-spacing: 0;      color: var(--color-ink-mute); }

/* ── Gaps Tailwind's 4px scale cannot express ───────────────────────────────────────────── */
.exams-plus-page .dc-mt-3  { margin-top: 3px; }
.exams-plus-page .dc-mt-7  { margin-top: 7px; }
.exams-plus-page .dc-mt-14 { margin-top: 14px; }
.exams-plus-page .dc-mt-18 { margin-top: 18px; }
.exams-plus-page .dc-mt-22 { margin-top: 22px; }
.exams-plus-page .dc-mt-28 { margin-top: 28px; }
.exams-plus-page .dc-mt-30 { margin-top: 30px; }
.exams-plus-page .dc-mb-6  { margin-bottom: 6px; }
.exams-plus-page .dc-mb-14 { margin-bottom: 14px; }
.exams-plus-page .dc-mb-18 { margin-bottom: 18px; }
.exams-plus-page .dc-mb-24 { margin-bottom: 24px; }
.exams-plus-page .dc-mb-32 { margin-bottom: 32px; }
.exams-plus-page .dc-mb-28 { margin-bottom: 28px; }

/* ── Grids / measures ───────────────────────────────────────────────────────────────────── */
.exams-plus-page .dc-grid { display: grid; }
.exams-plus-page .dc-grid-problem { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.exams-plus-page .dc-grid-halves { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.exams-plus-page .dc-grid-review { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.exams-plus-page .dc-grid-feat   { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.exams-plus-page .dc-grid-emma   { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.exams-plus-page .dc-grid-step   { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 6px 28px; align-items: baseline; }

.exams-plus-page .dc-measure-62ch { max-width: 62ch; }
.exams-plus-page .dc-measure-58ch { max-width: 58ch; }
.exams-plus-page .dc-measure-56ch { max-width: 56ch; }
.exams-plus-page .dc-measure-54ch { max-width: 54ch; }
.exams-plus-page .dc-measure-46ch { max-width: 46ch; }
.exams-plus-page .dc-measure-52ch { max-width: 52ch; }
.exams-plus-page .dc-measure-44ch { max-width: 44ch; }
.exams-plus-page .dc-measure-760  { max-width: 760px; }
.exams-plus-page .dc-measure-560  { max-width: 560px; }

/* MOVED FROM 991px TO THE REFERENCE'S OWN 1080px, AND TRIMMED TO WHAT IT ACTUALLY COLLAPSES.
 * The reference has exactly one grid-collapse breakpoint and it is 1080px:
 *   [data-featgrid] (§6 features 4-up)      -> repeat(2, …)   = .dc-grid-feat
 *   [data-howrow]   (§3 stepper title rows) -> 1 col          = .dc-grid-step
 *   [data-probgrid] (§2 copy + video 1/0.9) -> 1 col          = .dc-grid-problem
 *   [data-trackgrid](§9 dark panel 0.9/1.1) -> 1 col          = .dc-grid-track
 * Three selectors that were in the 991px block collapse NOWHERE in the reference and have been
 * removed: .dc-grid-halves (§4), .dc-grid-review (§5) and .dc-grid-emma (its 3-up stays three
 * columns all the way down). Their narrow-viewport squeeze is the reference's own — STATUS.md §5. */
@media (max-width: 1080px) {
  .exams-plus-page .dc-grid-problem { grid-template-columns: minmax(0, 1fr); }
  .exams-plus-page .dc-grid-feat  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exams-plus-page .dc-grid-step  { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* The reference breaks its feature row to one column at 640px — matched exactly. */
@media (max-width: 640px) {
  .exams-plus-page .dc-grid-feat { grid-template-columns: minmax(0, 1fr); }
}

/* The DS .section-glow with the reference's geometry: 720px centred on the top edge, unblurred,
   so none of the four corner-placement classes applies. */
.exams-plus-page .dc-glow-top {
  width: 720px; height: 720px; left: 50%; top: -420px;
  transform: translateX(-50%); filter: none;
}

.exams-plus-page .dc-hero-mock {
  max-width: 760px;
  margin: 44px auto 0;
  padding: 22px 26px;
  text-align: left;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-4\.5);
  box-shadow: var(--shadow-deep);
}

.exams-plus-page .dc-mock-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-rule);
}

/* Bar rows. display:block matters — these are <span>s (a <div> inside a <p> would be invalid)
   and an inline element ignores height. */
.exams-plus-page .dc-bars { display: flex; flex-direction: column; gap: 10px; }
.exams-plus-page .dc-bar-head { display: flex; justify-content: space-between; gap: 12px; }

.exams-plus-page .dc-bar {
  display: block;
  height: 9px;
  margin-top: 5px;
  border-radius: var(--radius-1\.5);
  overflow: hidden;
  background: var(--dc-sand-2);
}

.exams-plus-page .dc-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-1\.5);
  background: var(--color-coral-500);
  transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.exams-plus-page .dc-fill-green { background: var(--color-ok-green); }
.exams-plus-page .dc-fill-navy  { background: var(--color-ink-deep); }
.exams-plus-page .dc-w-71 { width: 71%; }
.exams-plus-page .dc-w-68 { width: 68%; }
.exams-plus-page .dc-w-4  { width: 4%; }

/* THE ARMED STATE CARRIES NO TRANSITION — the trap reveal.css documents. A transition uses the
   properties of the state being moved TO, so leaving the 1.1s here makes arming animate: the
   bars paint full width on load and visibly shrink to zero. */
.exams-plus-page .dc-grow-armed .dc-bar-fill { width: 0; transition: none; }


/* The live dot — static, as the reference draws it */
.exams-plus-page .dc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok-green-bright); }

/* ── 2 · The problem: the struck-chip row ───────────────────────────────────────────────── */
/* This IS the DS .badge-struck device (brand-voice §7) at exactly the DS's own metrics —
   7px 14px, 12.5px, font-heading semibold, page-bg fill, coral line-through. The only delta is
   the border colour (#ECEEF3 here vs our --color-rule) and the reference's 1px decoration
   against the DS's 2px. */
.exams-plus-page .badge-struck { border-color: var(--color-rule); text-decoration-thickness: 1px; }

/* ── 3 · The parent phone mock ──────────────────────────────────────────────────────────── */
.exams-plus-page .dc-phone-tray {
  display: flex;
  justify-content: center;
  padding: 36px 0;
  border-radius: var(--radius-4);
  background: var(--color-page-bg);
}

.exams-plus-page .dc-phone {
  width: 290px;
  padding: 20px 18px;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-7);
  box-shadow: var(--dc-shadow-phone);
}

.exams-plus-page .dc-phone-head { display: flex; justify-content: space-between; gap: 10px; }

.exams-plus-page .dc-phone-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  padding: 11px 13px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-2\.5);
}

/* the one row the reference highlights — a 1.5px coral border over the coral wash */
.exams-plus-page .dc-phone-row-note { background: var(--color-page-bg); }

/* Exams+ outlines two rows in coral rather than washing one (Data+ does the opposite) */
.exams-plus-page .dc-phone-row-outline { border: 1.5px solid var(--color-coral-500); }
.exams-plus-page .dc-tick-coral { font-size: 14px; color: var(--color-coral-500); }

/* the one SQUARE chip on the page — 4px radius, not the 999px pill */
.exams-plus-page .dc-chip-green {
  flex: none;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  padding: 3px 7px;
  border-radius: var(--radius-1);
  color: var(--color-ok-green);
  background: var(--color-ok-green-soft);
  white-space: nowrap;
}

/* leading icons inside a mock row */
.exams-plus-page .dc-row-icon { font-size: 11px; color: var(--color-ink-mute); margin-right: 9px; }
.exams-plus-page .dc-row-icon-green { font-size: 11px; color: var(--color-ok-green); margin-right: 9px; }
.exams-plus-page .dc-phone-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; }
.exams-plus-page .dc-phone-foot i { font-size: 9px; }

/* the mono status pill used in the phone, the review mock and the write-back rows */
.exams-plus-page .dc-pill {
  flex: none;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 9.5px;
  border-radius: var(--radius-full);
  padding: 4px 9px;
  white-space: nowrap;
}

.exams-plus-page .dc-pill-wide   { padding: 4px 10px; }
.exams-plus-page .dc-pill-green  { color: var(--color-ok-green); background: var(--color-ok-green-soft); }
.exams-plus-page .dc-pill-coral  { color: #fff; background: var(--color-coral-500); }
.exams-plus-page .dc-pill-neutral{ color: var(--color-ink-soft); background: var(--dc-sand-2); }

/* ── 4 · Review and write-back ──────────────────────────────────────────────────────────── */
/* Note the inversion: on this page the inset panel is SAND on a PAPER section, where the
   audience pages put a white panel on a sand section. Same shell, opposite fill. */
.exams-plus-page .dc-panel {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: var(--radius-5\.5);
  position: relative;
  overflow: hidden;
}

.exams-plus-page .dc-panel-sand { background: var(--color-page-bg); box-shadow: var(--dc-shadow-inset); padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 56px); }
.exams-plus-page .dc-panel-dark { background: var(--color-dark-band); color: #fff; padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 52px); }

.exams-plus-page .dc-mock {
  padding: 20px 22px;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-4);
  box-shadow: var(--dc-shadow-mock);
}

.exams-plus-page .dc-mock-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.exams-plus-page .dc-mock-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

.exams-plus-page .dc-mock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-2\.5);
}

.exams-plus-page .dc-mock-row-hi { border: 1.5px solid var(--color-coral-500); background: var(--color-coral-100); }
.exams-plus-page .dc-mock-note { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--color-rule); }

/* ── 5 · How it works: the numbered stepper ─────────────────────────────────────────────── */
/* Four rows divided by hairlines, each an icon tile with a navy number badge pinned to its
   corner, then a two-column title/description grid aligned on the baseline. */
.exams-plus-page .dc-steps { border-top: 1px solid var(--color-rule); }

.exams-plus-page .dc-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-rule);
}

.exams-plus-page .dc-step:last-child { border-bottom: 0; }

.exams-plus-page .dc-step-tile {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-3\.5);
  background: var(--color-paper);
  box-shadow: var(--dc-shadow-tile);
}

.exams-plus-page .dc-step-tile > i { font-size: 16px; color: var(--color-coral-500); }

.exams-plus-page .dc-step-no {
  position: absolute;
  top: -7px;
  right: -7px;
  padding: 3px 6px;
  border-radius: var(--radius-full);
  background: var(--color-ink-deep);
  color: #fff;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
}

.exams-plus-page .dc-step-body { flex: 1; min-width: 0; }

/* ── The dark-panel glow (§9 tracking) ──────────────────────────────────────────────────── */
.exams-plus-page .dc-glow-bl-520 { width: 520px; height: 520px; left: -190px; bottom: -230px; }  /* LONGHANDS, NOT THE `transition` SHORTHAND. This element is a direct child of a
     .reveal-stagger container, and the stagger works by setting per-child
     transition-delay. The shorthand RESETS transition-delay to 0s, and page CSS is
     unlayered while reveal.css compiles into @layer components — so unlayered wins
     regardless of specificity and every child animated at once. Same trap reveal.css's
     own header documents, reached from the child's side. */

/* ── 7 · Features ───────────────────────────────────────────────────────────────────────── */
.exams-plus-page .dc-feat {
  padding: 28px 30px;
  border-radius: var(--radius-4\.5);
  background: var(--color-paper);
  box-shadow: var(--dc-shadow-feat);
  transition-property: transform, box-shadow;
  transition-duration: 250ms, 250ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), ease;
}

/* Exams+ lifts its feature cards on hover; Data+ does not. */
.exams-plus-page .dc-feat:hover { transform: translateY(-5px); box-shadow: var(--dc-shadow-feat-hover); }

/* The icon tile here is a CORAL FILL with a coral-tinted glow — the one place on the page the
   reference puts coral behind a white glyph rather than using coral as the glyph colour. */
.exams-plus-page .dc-feat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-3);
  background: var(--color-coral-500);
  box-shadow: var(--dc-shadow-icon);
}

.exams-plus-page .dc-feat-icon > i { font-size: 16px; color: #fff; }

/* ── 8 · Emma: the three-card LIVE / COMING SOON grid ───────────────────────────────────── */
.exams-plus-page .dc-glow-tr-560 { width: 560px; height: 560px; right: -180px; top: -260px; }

.exams-plus-page .dc-emma-card {
  padding: 26px;
  border-radius: var(--radius-4\.5);
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.12);
}

/* the third card is dashed, and its label is amber rather than coral */
.exams-plus-page .dc-emma-card-soon { border: 1px dashed rgb(255 255 255 / 0.25); }
.exams-plus-page .dc-label-soon { color: var(--dc-soon-amber); }

.exams-plus-page .dc-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px 13px 16px;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.16);
}

.exams-plus-page .dc-stat-pill-num {
  flex: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-coral-500);
}

/* The guardrail strip is a wrapped inline row here, not the DS .check-list column — the
   wording is still the contractual wording (brand-voice §6). */
.exams-plus-page .dc-guard-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  color: var(--dc-on-dark-strip);
}

.exams-plus-page .dc-guard-strip i { margin-right: 7px; font-size: 10px; color: var(--color-ok-green-bright); }

/* on-dark copy colours */
.exams-plus-page .dc-on-dark-body   { color: var(--dc-on-dark-body); }
.exams-plus-page .dc-on-dark-faint  { color: var(--dc-on-dark-faint); }

/* ── 11 · Closer ────────────────────────────────────────────────────────────────────────── */
.exams-plus-page .cta-section-actions{ margin-top: 34px; }

/* No narrow override for the closer panel: the reference holds its 40px sides at EVERY width
   (`clamp(56px,8vw,104px) 40px` - only the vertical is fluid), so the 480px step that was
   here was invented. The base rule above already IS the reference's clamp. */

/* ── Reduced motion ─────────────────────────────────────────────────────────────────────── */

/* ── 2 · The video placeholder panel (Exams+ only) ──────────────────────────────────────── */
/* A dark 16:10 panel with a coral play disc. It is explicitly a PLACEHOLDER in the reference —
   the caption says so — so it stays a placeholder here rather than being dressed up. */
.exams-plus-page .dc-video {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-4\.5);
  overflow: hidden;
  background: var(--color-dark-band);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.exams-plus-page .dc-video-glow { width: 420px; height: 420px; right: -140px; bottom: -190px; filter: none; }

.exams-plus-page .dc-video-play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--color-coral-500);
  box-shadow: 0 14px 36px rgba(236, 99, 75, 0.42);
}

.exams-plus-page .dc-video-play > i { font-size: 20px; color: #fff; margin-left: 3px; }
.exams-plus-page .dc-video-copy { position: relative; padding: 0 24px; }

/* ── 9 · Tracking and comms (the dark panel) ────────────────────────────────────────────── */
.exams-plus-page .dc-grid-track { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(30px, 4vw, 56px); align-items: center; position: relative; }

/* THE COLLAPSE LIVES HERE, NOT IN THE GRID BLOCK NEAR THE TOP — and that is a fix, not a taste.
 * `.dc-grid-track` is declared 400 lines below that block at the same specificity, so a collapse
 * written up there lost on source order and the reference's `[data-trackgrid]` rule (1 column at
 * 1080px) never applied at any width. Measured at 1040px: two columns before, one after. */
@media (max-width: 1080px) {
  .exams-plus-page .dc-grid-track { grid-template-columns: minmax(0, 1fr); }
}

.exams-plus-page .dc-track-stat {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.exams-plus-page .dc-track-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: #fff;
}

.exams-plus-page .dc-track-num span { color: var(--dc-on-dark-faint); }

.exams-plus-page .dc-comm { display: flex; gap: 13px; align-items: flex-start; }

.exams-plus-page .dc-comm-tile {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-2\.5);
  background: rgb(255 255 255 / 0.08);
}

.exams-plus-page .dc-comm-tile > i { font-size: 13px; color: var(--color-coral-500); }
.exams-plus-page .dc-comm-list { display: flex; flex-direction: column; gap: 16px; }

/* ── 10 · The pull-quote card ───────────────────────────────────────────────────────────── */
.exams-plus-page .dc-quote {
  margin: 0;
  max-width: 900px;
  padding: clamp(30px, 3.6vw, 44px) clamp(28px, 3.6vw, 48px);
  border-radius: var(--radius-5);
  background: var(--color-paper);
  box-shadow: var(--dc-shadow-quote);
}

.exams-plus-page .dc-quote > i { font-size: 17px; color: var(--color-coral-500); }

.exams-plus-page .dc-q-23 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--color-ink-deep);
  margin: 0;
  text-wrap: pretty;
}

.exams-plus-page .dc-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--dc-sand-2);
  color: var(--color-ink-deep);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
}

.exams-plus-page .dc-quote-by { display: flex; align-items: center; gap: 13px; margin-top: 26px; }

/* ── PHONE (≤640) — beyond the reference, deliberately ───────────────────────────────────── */
/* The references pad in literal px with no media query at all, so at 390px they clip their own
   content (STATUS §5 records that as the defect most worth fixing at source). These rules fix the
   text loss WITHOUT hiding anything: the review panel stacks, and the phone mock scales instead of overflowing. */
@media (max-width: 640px) {
  .exams-plus-page .dc-grid-review { grid-template-columns: minmax(0, 1fr); }
  /* the device mock is a fixed-aspect frame - scale it proportionally, never just cap its width */
  .exams-plus-page .dc-phone { width: 100%; max-width: 195px; height: auto; }
}