/* Bursary+ — page CSS
 * ============================================================================================
 * GOAL: a FAITHFUL (1:1) reproduction of the reference "Bursary Plus.dc.html"
 *   (10 sections, 348 inline styles) without its inline styles.
 *
 * STRATEGY (prototypes/WORKFLOW.md): design-system 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. Scoped under `.bursary-page`.
 *
 * THE PAIR: Bursary+ and Bursary16+ are the same page shape with different content — the same
 * centred hero + illustrative mock, the same problem split with struck chips, the same dark Emma
 * band with a video placeholder and three glass cards, the same "Into the MIS" strip, closer and
 * "Related" footer strip. This file is therefore written as the SHARED scaffold: prototypes/
 * bursary16/page.css starts from it and adds only what that page has extra (the DfE checklist
 * tabs, the cost calculator, the staggered capability grid, the testimonial carousel).
 *
 * THE TWO TRAPS, APPLIED FROM THE START:
 *   1. The reference styles every heading and label with the CSS `font:` SHORTHAND, which RESETS
 *      line-height to `normal`. Inheriting our 1.5 body leading makes each one 3-12px taller and
 *      compounds down the page. Every fixed-size heading here sets `line-height: normal`, and so
 *      does `.font-label` — note that merely omitting a DS leading utility is NOT enough,
 *      because the label then inherits the body's 1.5 and is wrong the other way.
 *      FIXED IN THE DS (2026-08-14): `leading-label` = `normal` now exists, so new work
 *      composes it in the markup and needs no page-local override.
 *   2. A page class like `.dc-t-48 { margin: 0 }` is specificity 0-2-0 and BEATS an unlayered
 *      Tailwind `mt-4` utility (0-1-0). Spacing next to those classes therefore uses px-named
 *      page classes declared LATER in this file, never `mt-*`.
 *
 * REFERENCE vs OUR TOKENS (measured):
 *   IDENTICAL, so we use ours: the ink scale (#0F1A4F / #4D5B7F / #8893B0), coral-500 #EC634B,
 *   accent-soft #FFE7DD (= coral-100), paper, page-bg #F4F5F9, rule #E6E8EF, dark #0B1023
 *   (= dark-band), ok-green #1A8A3F, ok-green-bright #34D07F, shadow-deep (0 30px 80px /.12),
 *   shadow-soft (0 14px 40px /.07).
 *   DIFFERENT, so declared below (owner's call: 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.
 *     #E9ECF3  the "sand-2" fill behind progress bars and avatars
 *     #F0F1F5  the tracker-mock row hairline
 *     #9AA6C2  body copy ON DARK    · #C9D1E6 the criteria pills on dark
 *     #5C688A  captions ON DARK     · #8D9AB8 the guardrail strip on dark
 *     #F2B01E  the "COMING SOON" amber (our warn-amber is #FEC84B — NOT the same)
 *   Shadows with no token: 0 24px 60px /.06 · 0 14px 40px /.09 · 0 26px 60px /.13 ·
 *   0 32px 76px rgba(4,8,24,.42) · 0 8px 22px /.08 · 0 10px 24px rgba(236,99,75,.3) ·
 *   0 12px 30px rgba(236,99,75,.42) · 0 14px 36px rgba(236,99,75,.42).
 *
 *   GEOMETRY: the reference container is 1200px with a 24px gutter (ours is 1224/32), plus a
 *   page-local 1100px hero column.
 *
 * BODY FONT: the reference sets `font-family: var(--font-body)` on its own root and the DS does
 * not set Inter on `body`/`.app`, so the family is set on the page root exactly as the reference
 * does (owner's decision: leave the DS alone for now).
 * ============================================================================================ */

.bursary-page {
  /* reference-only values, all measured */
  --dc-fill: #E9ECF3;
  --dc-row-line: #F0F1F5;
  --dc-on-dark-body: var(--color-on-dark-body);
  --dc-on-dark-bright: var(--color-on-dark-bright);
  --dc-on-dark-mute: var(--color-on-dark-faint);
  --dc-on-dark-strip: var(--color-ink-mute);
  --dc-amber: #F2B01E;
  --dc-shadow-panel-soft: 0 24px 60px rgba(15, 26, 79, 0.06);
  --dc-shadow-mock: 0 14px 40px rgba(15, 26, 79, 0.09);
  --dc-shadow-lift: 0 26px 60px rgba(15, 26, 79, 0.13);
  --dc-shadow-lift-dark: 0 32px 76px rgba(4, 8, 24, 0.42);
  --dc-shadow-tile-sm: 0 8px 22px rgba(15, 26, 79, 0.08);
  --dc-shadow-tile: 0 10px 24px rgba(236, 99, 75, 0.3);
  --dc-shadow-tile-lg: 0 12px 30px rgba(236, 99, 75, 0.42);
  --dc-shadow-play: 0 14px 36px rgba(236, 99, 75, 0.42);
  --dc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  background: var(--color-page-bg);
  font-family: var(--font-sans);
}

/* 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: the reference's own per-section values ─────────────────────────────── */
.bursary-page .dc-py-96-64  { padding-top: 96px;  padding-bottom: 64px; }
.bursary-page .dc-py-24-96  { padding-top: 24px;  padding-bottom: 96px; }
.bursary-page .dc-py-96-0   { padding-top: 96px;  padding-bottom: 0; }
.bursary-page .dc-py-96     { padding-top: 96px;  padding-bottom: 96px; }
.bursary-page .dc-py-0-96   { padding-top: 0;     padding-bottom: 96px; }
.bursary-page .dc-py-0-72   { padding-top: 0;     padding-bottom: 72px; }

/* ── Display type: the reference clamps every headline individually ─────────────────────── */
.bursary-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(.bursary-page [class*="dc-t-"]) {
  margin: 0;
  text-wrap: balance;
}

.bursary-page .dc-t-84 { font-size: clamp(44px, 6vw,   84px); line-height: 1.0;  letter-spacing: -0.04em; }
.bursary-page .dc-t-80 { font-size: clamp(38px, 6vw,   80px); line-height: 1.0;  letter-spacing: -0.04em; }
.bursary-page .dc-t-54 { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -0.03em; }
.bursary-page .dc-t-48 { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
.bursary-page .dc-t-44 { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -0.03em; }
.bursary-page .dc-t-42 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1;  letter-spacing: -0.025em; }
.bursary-page .dc-t-38 { font-size: clamp(24px, 3vw,   38px); line-height: 1.12; letter-spacing: -0.025em; }
.bursary-page .dc-t-30 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.16; letter-spacing: -0.024em; }
.bursary-page .dc-t-28 { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2;  letter-spacing: -0.018em; }

/* Big numerals */
.bursary-page .dc-num-22 { font-family: var(--font-heading); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: -0.02em; }

/* Fixed-size display headings — line-height per the reference, `normal` where it uses the
   `font:` shorthand without one (trap 1) */
.bursary-page .dc-h-175 { font-family: var(--font-heading); font-weight: 700; font-size: 17.5px; line-height: 1.28; letter-spacing: -0.014em; margin: 0; }
.bursary-page .dc-h-175t{ font-family: var(--font-heading); font-weight: 700; font-size: 17.5px; line-height: 1.25; margin: 0; }
.bursary-page .dc-h-165 { font-family: var(--font-heading); font-weight: 700; font-size: 16.5px; line-height: 1.28; letter-spacing: -0.014em; margin: 0; }
.bursary-page .dc-hs-155{ font-family: var(--font-heading); font-weight: 600; font-size: 15.5px; line-height: normal; }
.bursary-page .dc-normal-case { text-transform: none; }
.bursary-page .dc-hs-125{ font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: normal; }

/* ── Body copy steps (Inter), named by px ───────────────────────────────────────────────── */
.bursary-page .dc-lede-19  { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; margin: 0; }
.bursary-page .dc-closer-lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; margin: 0; color: rgba(255, 255, 255, 0.92); }
.bursary-page .dc-body-16  { font-size: 16px;   line-height: 1.6;  margin: 0; }
.bursary-page .dc-body-155 { font-size: 15.5px; line-height: 1.6;  margin: 0; }
.bursary-page .dc-body-15  { font-size: 15px;   line-height: 1.6;  margin: 0; }
.bursary-page .dc-body-145 { font-size: 14.5px; line-height: 1.55; margin: 0; }
.bursary-page .dc-body-14  { font-size: 14px;   line-height: 1.55; margin: 0; }
.bursary-page .dc-body-135 { font-size: 13.5px; line-height: 1.55; margin: 0; }
.bursary-page .dc-body-135q{ font-size: 13.5px; line-height: 1.45; margin: 0; }
.bursary-page .dc-body-13  { font-size: 13px;   line-height: 1.5;  margin: 0; }
.bursary-page .dc-body-125 { font-size: 12.5px; line-height: 1.45; margin: 0; }
.bursary-page .dc-body-12  { font-size: 12px;   line-height: 1.5;  margin: 0; }

/* Measures read off the RENDERED reference (it sets them in `ch`; the reference's own value is
   in the comment). */
.bursary-page .dc-measure-760 { max-width: 760px; }   /* section heads, px */
.bursary-page .dc-measure-720 { max-width: 720px; }   /* the how-it-works head, px */
.bursary-page .dc-measure-666 { max-width: 666px; margin-left: auto; margin-right: auto; }  /* 56ch @19px */
.bursary-page .dc-measure-598 { max-width: 598px; }   /* 62ch @15.5px */
.bursary-page .dc-measure-584 { max-width: 584px; }   /* 58ch @16px */
.bursary-page .dc-measure-577 { max-width: 577px; margin-left: auto; margin-right: auto; }  /* 44ch @21px */
.bursary-page .dc-measure-566 { max-width: 566px; }   /* 58ch @15.5px */
.bursary-page .dc-measure-560 { max-width: 560px; }   /* the MIS strip copy, px */
.bursary-page .dc-measure-507 { max-width: 507px; }   /* 52ch @15.5px */
.bursary-page .dc-measure-321 { max-width: 321px; }   /* 34ch @15px */

/* ── Spacing steps the compiled utility surface does not carry ───────────────────────────── */
/* prototypes/ is not a Tailwind scan source, so a step nothing else in the repo uses produces no
   CSS (mb-11 compiles, mt-11 does not; the `.5` steps are patchy). These are also what makes
   spacing beside a `dc-t-*`/`dc-h-*` class work at all — see trap 2. Named in px. */
.bursary-page .dc-mt-2px  { margin-top: 2px; }
.bursary-page .dc-mt-6px  { margin-top: 6px; }
.bursary-page .dc-mt-7px  { margin-top: 7px; }
.bursary-page .dc-mt-8px  { margin-top: 8px; }
.bursary-page .dc-mt-12px { margin-top: 12px; }
.bursary-page .dc-mt-14px { margin-top: 14px; }
.bursary-page .dc-mt-16px { margin-top: 16px; }
.bursary-page .dc-mt-18px { margin-top: 18px; }
.bursary-page .dc-mt-20px { margin-top: 20px; }
.bursary-page .dc-mt-22px { margin-top: 22px; }
.bursary-page .dc-mt-24px { margin-top: 24px; }
.bursary-page .dc-mt-28px { margin-top: 28px; }
.bursary-page .dc-mt-30px { margin-top: 30px; }
.bursary-page .dc-mt-32px { margin-top: 32px; }
.bursary-page .dc-mt-34px { margin-top: 34px; }
.bursary-page .dc-mt-40px { margin-top: 40px; }
.bursary-page .dc-mt-44px { margin-top: 44px; }
.bursary-page .dc-mb-12px { margin-bottom: 12px; }
.bursary-page .dc-mb-14px { margin-bottom: 14px; }
.bursary-page .dc-mb-16px { margin-bottom: 16px; }
.bursary-page .dc-mb-32px { margin-bottom: 32px; }

/* ── Mono labels ────────────────────────────────────────────────────────────────────────── */
/* The reference's mono eyebrow IS our font-label at 12.5px/0.08em — composed in the markup from
   font-label + text-label-l + tracking-label. Only the sizes and trackings the DS lacks are here
   (DS carries 9.5/10.5/12.5px and 0.08em). The line-height rule is trap 1: the reference's
   `font:` shorthand means `normal`, and omitting `leading-eyebrow` alone would inherit 1.5. */
.bursary-page .font-label { line-height: normal; }
.bursary-page .dc-ms-85 { font-size: 8.5px; }
.bursary-page .dc-ms-9  { font-size: 9px; }
.bursary-page .dc-ms-10 { font-size: 10px; }
.bursary-page .dc-ms-11 { font-size: 11px; }
.bursary-page .dc-ms-12 { font-size: 12px; }
.bursary-page .dc-tr-06 { letter-spacing: 0.06em; }
.bursary-page .dc-tr-07 { letter-spacing: 0.07em; }
.bursary-page .dc-tr-09 { letter-spacing: 0.09em; }

/* A coral text link with a chevron (used on dark and on light) */
.bursary-page .dc-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-heading); font-weight: 600; font-size: 14.5px;
  color: var(--color-coral-500); text-decoration: none;
}
.bursary-page .dc-link:hover { color: var(--color-ink-deep); }
.bursary-page .dc-link i { font-size: 10px; }

/* ── Surfaces ───────────────────────────────────────────────────────────────────────────── */
.bursary-page .dc-panel { max-width: 1200px; margin: 0 auto; border-radius: var(--radius-5\.5); position: relative; overflow: hidden; }
.bursary-page .dc-panel-paper { background: var(--color-paper); box-shadow: var(--dc-shadow-panel-soft); padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 56px); }
.bursary-page .dc-panel-dark  { background: var(--color-dark-band); color: #fff; padding: clamp(36px, 4.5vw, 60px) clamp(28px, 4vw, 56px); }

.bursary-page .dc-card { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-4\.5); padding: 26px 28px; }
.bursary-page .dc-card-mock  { border: 0; box-shadow: var(--shadow-deep); border-radius: var(--radius-4\.5); padding: 22px 26px; text-align: left; max-width: 760px; margin-left: auto; margin-right: auto; }
/* LONGHANDS, not `transition:`, and that is load-bearing. These cards are the children of the
   bento's `reveal-stagger` grid, and the DS supplies the walk-in as per-child `transition-delay`
   rules; a `transition` SHORTHAND here resets that delay to 0 and the stagger silently does nothing
   (measured: all seven cards at "0s" before this change). `opacity` joins the list so the fade
   staggers with the rise rather than snapping in all at once. reveal.css's own header warns about
   exactly this. */
.bursary-page .dc-card-lift  {
  border: 0; box-shadow: var(--shadow-soft); border-radius: var(--radius-4\.5); padding: 28px 30px;
  transition-property: opacity, transform, box-shadow;
  transition-duration: 600ms, 250ms, 250ms;
  transition-timing-function: var(--dc-ease), var(--dc-ease), ease;
}
.bursary-page .dc-card-lift:hover { transform: translateY(-5px); box-shadow: var(--dc-shadow-lift); }
.bursary-page .dc-card-panel { border: 0; box-shadow: var(--shadow-soft); border-radius: var(--radius-4\.5); padding: clamp(28px, 3.2vw, 36px) clamp(26px, 3.4vw, 40px); }

/* On dark */
.bursary-page .dc-on-dark-body   { color: var(--dc-on-dark-body); }
.bursary-page .dc-on-dark-mute   { color: var(--dc-on-dark-mute); }
.bursary-page .dc-on-dark-strip  { color: var(--dc-on-dark-strip); }
.bursary-page .dc-amber          { color: var(--dc-amber); }

.bursary-page .dc-glass { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-4\.5); padding: 26px; }
.bursary-page .dc-glass-dashed { border-style: dashed; border-color: rgba(255, 255, 255, 0.25); }
.bursary-page .dc-stat-pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 13px 20px 13px 16px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Icon tiles */
.bursary-page .dc-tile {
  flex: none; 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-tile);
}
.bursary-page .dc-tile i { font-size: 16px; color: #fff; }
.bursary-page .dc-tile-50 { width: 50px; height: 50px; border-radius: var(--radius-3\.5); box-shadow: var(--dc-shadow-tile-lg); }
.bursary-page .dc-tile-50 i { font-size: 19px; }
.bursary-page .dc-tile-paper {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-3);
  background: var(--color-paper); box-shadow: var(--dc-shadow-tile-sm);
}
.bursary-page .dc-tile-paper i { font-size: 16px; color: var(--color-coral-500); }
.bursary-page .dc-tile-glass {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-3); background: rgba(255, 255, 255, 0.08);
}
.bursary-page .dc-tile-glass i { font-size: 15px; color: var(--color-coral-500); }

.bursary-page .dc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok-green-bright); }

/* ── Grids, measured off the reference ──────────────────────────────────────────────────── */
.bursary-page .dc-grid { display: grid; }

.bursary-page .dc-grid-problem  { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.bursary-page .dc-grid-bento    { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bursary-page .dc-grid-2        { grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.bursary-page .dc-grid-4        { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.bursary-page .dc-grid-emma     { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.bursary-page .dc-grid-3        { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bursary-page .dc-grid-man      { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 6px 28px; align-items: baseline; }
.bursary-page .dc-grid-comms    { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 3.5vw, 48px); align-items: center; }
.bursary-page .dc-grid-rephead  { grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end; justify-items: start; }
/* the tracker mock's 4-column table */
.bursary-page .dc-grid-track    { grid-template-columns: minmax(0, 1.1fr) auto auto auto; gap: 12px; }

/* the bento's spans */
.bursary-page .dc-bento-hero { grid-column: span 2; grid-row: span 2; }
.bursary-page .dc-bento-wide { grid-column: span 2; }

/* ── Responsive: the reference's own breakpoints, not ours ───────────────────────────────────
 * This was one 991px block. The reference uses 991px nowhere — its values are 1000 and 640 (plus
 * 1120/940/1080/560, all of which target chrome we do not port). Each rule below is the reference's
 * own, moved to its own breakpoint:
 *   1000px  [data-probgrid] [data-emmagrid] [data-commsgrid] [data-manrow] [data-repheadgrid]
 *           [data-emmacards] → 1 column · [data-fgrid] (the bento) + [data-repgrid] (Reporting's
 *           4-up) → 2 columns · [data-fcard] (every bento card, wides included) → span 1
 *   640px   [data-fgrid] and [data-repgrid] → 1 column
 * REMOVED, because the reference has no rule for them at any width (WORKFLOW.md §5b — a breakpoint
 * we added is a divergence): the Renewals panel split (`.dc-grid-2`, a bare `1fr 1fr` with no data
 * hook), and the panel-padding override — reference panels pad with `clamp()`, so they need none. */
@media (max-width: 1000px) {
  .bursary-page .dc-grid-problem,
  .bursary-page .dc-grid-emma,
  .bursary-page .dc-grid-comms,
  .bursary-page .dc-grid-man,
  .bursary-page .dc-grid-rephead,
  .bursary-page .dc-grid-3 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bursary-page .dc-grid-bento,
  .bursary-page .dc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bursary-page .dc-bento-hero, .bursary-page .dc-bento-wide { grid-column: span 1; grid-row: span 1; }
}

@media (max-width: 640px) {
  .bursary-page .dc-grid-bento,
  .bursary-page .dc-grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ── Struck chips: the DS .badge-struck / .badge-row are exactly this device ─────────────── */
/* Only the hairline colour differs (the reference uses #ECEEF3, our token is #E6E8EF). */
.bursary-page .badge-struck { border-color: var(--color-rule); }

/* ── 1 · Hero ───────────────────────────────────────────────────────────────────────────── */
/* A 720px coral wash bled off the top centre — a centred bleed the DS .section-glow corner
   placements cannot express, so it is page-local. Same recipe as the DS glow. */
.bursary-page .dc-glow-top {
  position: absolute; width: 720px; height: 720px;
  left: 50%; top: -420px; transform: translateX(-50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-coral-500) 10%, transparent), transparent 62%);
}

.bursary-page .dc-bars { display: flex; flex-direction: column; gap: 10px; }
.bursary-page .dc-bar-head { display: flex; justify-content: space-between; }
.bursary-page .dc-bar-track { height: 9px; border-radius: var(--radius-1\.5); background: var(--dc-fill); margin-top: 5px; }
.bursary-page .dc-bar-fill { height: 100%; border-radius: var(--radius-1\.5); background: var(--color-ink-deep); }
.bursary-page .dc-bar-fill-coral { background: var(--color-coral-500); }
.bursary-page .dc-bar-92 { width: 92%; }
.bursary-page .dc-bar-65 { width: 65%; }
.bursary-page .dc-bar-8  { width: 8%; }

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

/* ── 2 · The problem: the spreadsheet-tracker mock ──────────────────────────────────────── */
.bursary-page .dc-mock-frame { background: var(--color-page-bg); border-radius: var(--radius-4\.5); padding: clamp(22px, 2.6vw, 30px); }
.bursary-page .dc-mock-card  { background: var(--color-paper); border-radius: var(--radius-3\.5); box-shadow: var(--dc-shadow-mock); padding: 20px 22px; }
.bursary-page .dc-mock-head  { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-rule); }
.bursary-page .dc-track-head { padding: 10px 0 6px; }
.bursary-page .dc-track-row  { align-items: center; padding: 11px 0; border-bottom: 1px solid var(--dc-row-line); }
.bursary-page .dc-track-num  { text-align: right; min-width: 52px; }
.bursary-page .dc-track-mark { text-align: center; min-width: 22px; }
.bursary-page .dc-mock-warn  { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--color-rule); }
.bursary-page .dc-mock-warn > i { flex: none; margin-top: 2px; font-size: 12px; color: var(--color-coral-500); }

/* ── 3 · How it works: the bento's dark hero card ───────────────────────────────────────── */
.bursary-page .dc-bento-dark {
  background: var(--color-dark-band); color: #fff;
  border-radius: var(--radius-4\.5); padding: clamp(30px, 3.2vw, 40px);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  /* Longhands for the same reason as .dc-card-lift above: this is the bento's first child, and a
     `transition` shorthand would wipe the stagger's per-child delay. */
  transition-property: opacity, transform, box-shadow;
  transition-duration: 600ms, 250ms, 250ms;
  transition-timing-function: var(--dc-ease), var(--dc-ease), ease;
}
.bursary-page .dc-bento-dark:hover { transform: translateY(-5px); box-shadow: var(--dc-shadow-lift-dark); }
.bursary-page .dc-badge-glass {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-label); font-weight: 600; font-size: 10px; line-height: normal;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  background: rgba(255, 255, 255, 0.12); border-radius: var(--radius-full); padding: 6px 12px;
}
.bursary-page .dc-criteria { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.bursary-page .dc-criteria-pill {
  font-family: var(--font-label); font-weight: 500; font-size: 11px; line-height: normal;
  letter-spacing: 0.05em; color: var(--dc-on-dark-bright);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-full); padding: 6px 12px;
}

/* ── 5 · Reporting: the dark panel's head rule ──────────────────────────────────────────── */
.bursary-page .dc-rephead { padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }

/* ── 6 · Managing the round: the hairline rows ──────────────────────────────────────────── */
.bursary-page .dc-rows { border-top: 1px solid var(--color-rule); }
.bursary-page .dc-row  { display: flex; gap: 18px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--color-rule); }
.bursary-page .dc-row:last-child { border-bottom: 0; }

/* ── 7 · Emma: the video placeholder ────────────────────────────────────────────────────── */
/* The reference ships this as an empty 16/10 frame with a play disc and a "DROP THE DEMO CLIP
   HERE" caption. Reproduced as-is rather than substituting an image that does not exist. */
.bursary-page .dc-video {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-4\.5); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.bursary-page .dc-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--color-coral-500); box-shadow: var(--dc-shadow-play);
}
.bursary-page .dc-play i { font-size: 20px; color: #fff; margin-left: 3px; }

/* The on-dark guardrail strip (a flowing row, not a list) */
.bursary-page .dc-guardrails { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.bursary-page .dc-guardrails > span > i { margin-right: 7px; font-size: 10px; color: var(--color-ok-green-bright); }

/* ── 10 · Related: the centred cross-link strip ─────────────────────────────────────────── */
.bursary-page .dc-related {
  max-width: 1200px; margin: 0 auto;
  border-top: 1px solid var(--color-rule); padding-top: 28px;
  display: flex; align-items: center; justify-content: center; gap: 12px 16px;
  flex-wrap: wrap; text-align: center;
}

/* ── Feature tick rows ──────────────────────────────────────────────────────────────────── */
.bursary-page .dc-tick { display: flex; gap: 11px; align-items: flex-start; }
.bursary-page .dc-tick > i { flex: none; margin-top: 5px; font-size: 11px; color: var(--color-coral-500); }