/* Admissions+ for Sixth Forms — page CSS
 * ============================================================================================
 * GOAL: a FAITHFUL (1:1) reproduction of the reference
 *   "Admissions Plus for Sixth Forms.dc.html"  (16 sections, ~700 inline styles)
 * without any of its inline styles. Every value below was read out of the reference file, not
 * guessed — the reference states its own clamps, paddings and hexes in the `style` attributes.
 *
 * STRATEGY (the same one WORKFLOW.md settled on `secondary/`):
 *   the markup uses DESIGN-SYSTEM classes wherever the DS has the right component, and this
 *   file carries the package's metric DELTAS as page-scoped overrides. Tuning toward the DS
 *   later is then deleting overrides one at a time — not rewriting markup.
 *
 * Every rule is scoped under `.sixth-forms-page`, so this file is inert on any other page —
 * the pattern proven in production by /r/10 (`.about-page`).
 *
 * HOW THE REFERENCE COMPARES TO OUR TOKENS
 *   IDENTICAL, so we use ours: the ink scale (#0F1A4F ink-deep / #4D5B7F ink-soft /
 *   #8893B0 ink-mute), coral #EC634B + #FFE7DD (coral-100), #F4F5F9 page-bg, #FFFFFF paper,
 *   #E6E8EF rule, #0B1023 dark-band, #1A8A3F ok-green, #DFF1E5 ok-green-soft,
 *   #34D07F ok-green-bright, #FEF7E7 light-yellow, and the shadows
 *   0 30px 80px/.12 (shadow-deep), 0 14px 40px/.07 (shadow-soft), 0 30px 70px (shadow-dark).
 *   The reference's `--navy` is #0F1A4F, i.e. ink-deep, so navy bars use the token.
 *
 *   DIFFERENT, so declared here (owner's decision: 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  sand-2, the empty-bar grey
 *     #C2C9DB  dashed patchwork border / palest bar
 *     #D5DAE6  patchwork node border
 *     #9AA6C2  body copy ON DARK           #C9D1E6 list copy ON DARK
 *     #5C688A  caption ON DARK             #B9C3DC grader pill copy
 *     #7E8AA6  bursary caption             #E7ECF7 bursary row copy
 *     #223055  testimonial avatar disc     #31406F / #5A6890 funnel + chart navies
 *     #F2B01E / #8A6116  the results-day "REVIEW" amber dot + text
 *     #FFF6F3  the at-risk row wash        #F8D2C3 the "coming soon" hairline
 *   Shadows with no token: 0 20px 60px/.07 · /.14 · 0 12px 32px/.08 · 0 20px 50px/.08 ·
 *   0 8px 22px/.08 · 0 40px 90px rgba(4,8,24,.5) · 0 16px 40px/.1 and /.35 (hover).
 *
 *   GEOMETRY: reference container is max-width 1200px with a 24px gutter; our DS is 1224/32.
 *   Overridden here only — changing .page-container would re-render every live page.
 * ============================================================================================ */

.sixth-forms-page {
  /* reference-only values, all read off the reference */
  --dc-sand-2: #E9ECF3;          /* empty progress-bar grey */
  --dc-line-dash: #C2C9DB;       /* dashed patchwork border, palest chart bar */
  --dc-node-line: #D5DAE6;       /* patchwork node border */
  --dc-on-dark-body: var(--color-on-dark-body);    /* body copy on the dark panels/band */
  --dc-on-dark-bright: var(--color-on-dark-bright);  /* guardrail list copy on dark */
  --dc-on-dark-mute: var(--color-on-dark-faint);    /* captions on dark */
  --dc-on-dark-pill: var(--color-on-dark-bright);    /* grader pill copy */
  --dc-on-dark-cap: var(--color-ink-mute);     /* bursary caption */
  --dc-on-dark-row: #fff;     /* bursary row copy */
  --dc-avatar: #223055;          /* testimonial avatar disc */
  --dc-navy-2: #31406F;          /* funnel bar 2 */
  --dc-navy-3: #5A6890;          /* funnel bar 3 / chart bar 3 */
  --dc-amber-dot: #F2B01E;
  --dc-amber-ink: #8A6116;
  --dc-wash-risk: #FFF6F3;
  --dc-line-soon: #F8D2C3;

  --dc-shadow-panel: 0 20px 60px rgba(15, 26, 79, 0.07);
  --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-chat:  0 20px 50px rgba(15, 26, 79, 0.08);
  --dc-shadow-tile:  0 8px 22px rgba(15, 26, 79, 0.08);
  --dc-shadow-audit: 0 40px 90px rgba(4, 8, 24, 0.5);
  --dc-ease: cubic-bezier(.2, .8, .2, 1);

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

/* ── 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: hand-tuned per section in the reference ───────────────────────────── */
/* `dc-py-<top>-<bottom>` is deliberately literal, so the later normalisation pass can map each
   one to a DS step or explain why it should not. */
.sixth-forms-page .dc-py-128-72 { padding-bottom: 72px; }
.sixth-forms-page .dc-py-44-48  { padding-top: 44px;  padding-bottom: 48px; }
.sixth-forms-page .dc-py-72-80  { padding-top: 72px;  padding-bottom: 80px; }
.sixth-forms-page .dc-py-24-104 { padding-top: 24px;  padding-bottom: 104px; }
.sixth-forms-page .dc-py-104-44 { padding-top: 104px; padding-bottom: 44px; }
.sixth-forms-page .dc-py-0-96   { padding-top: 0;     padding-bottom: 96px; }
.sixth-forms-page .dc-py-104    { padding-top: 104px; padding-bottom: 104px; }
.sixth-forms-page .dc-py-96-64  { padding-top: 96px;  padding-bottom: 64px; }
.sixth-forms-page .dc-py-88     { padding-top: 88px;  padding-bottom: 88px; }
.sixth-forms-page .dc-py-0-88   { padding-top: 0;     padding-bottom: 88px; }
.sixth-forms-page .dc-py-40-96  { padding-top: 40px;  padding-bottom: 96px; }
.sixth-forms-page .dc-py-96-0   { padding-top: 96px;  padding-bottom: 0; }
.sixth-forms-page .dc-py-56-96  { padding-top: 56px;  padding-bottom: 96px; }

/* ── Display type: the reference clamps every headline individually ─────────────────────── */
/* Named by their maximum so the mapping to a DS step stays obvious. Proxima 700 throughout
   (the two `-q-` quote steps are 500); tracking is the reference's own, -0.04em..-0.005em. */
.sixth-forms-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(.sixth-forms-page [class*="dc-t-"]) {
  margin: 0;
  text-wrap: balance;
}

.sixth-forms-page .dc-t-80  { font-size: clamp(38px, 6vw,   80px); line-height: 1.0;  letter-spacing: -0.04em; }
.sixth-forms-page .dc-t-76  { font-size: clamp(44px, 5.6vw, 76px); line-height: 1.0;  letter-spacing: -0.04em; }
.sixth-forms-page .dc-t-64  { font-size: clamp(36px, 5vw,   64px); line-height: 1.02; letter-spacing: -0.035em; }
.sixth-forms-page .dc-t-56  { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.03em; }
.sixth-forms-page .dc-t-54  { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.03em; }
.sixth-forms-page .dc-t-48  { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -0.03em; }
.sixth-forms-page .dc-t-48r { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.05; letter-spacing: -0.028em; }
.sixth-forms-page .dc-t-46  { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.03em; }
.sixth-forms-page .dc-t-46f { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.025em; }
.sixth-forms-page .dc-t-42  { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1;  letter-spacing: -0.025em; }
.sixth-forms-page .dc-t-38  { font-size: clamp(24px, 3vw,   38px); line-height: 1.1;  letter-spacing: -0.025em; }
.sixth-forms-page .dc-t-34  { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.12; letter-spacing: -0.02em; }
.sixth-forms-page .dc-t-30  { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12; letter-spacing: -0.018em; }
.sixth-forms-page .dc-t-30f { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.18; letter-spacing: -0.02em; }
.sixth-forms-page .dc-t-26  { font-size: clamp(20px, 2vw,   26px); line-height: 1.15; letter-spacing: -0.015em; }
.sixth-forms-page .dc-t-40s { font-size: clamp(30px, 3vw,   40px); line-height: normal; letter-spacing: -0.02em; }
.sixth-forms-page .dc-t-20  { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }

.sixth-forms-page .dc-q-25 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.42;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

/* ── Body copy steps (Inter), named by px ───────────────────────────────────────────────── */
.sixth-forms-page .dc-lede    { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); }
.sixth-forms-page .dc-lede-18 { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; }
.sixth-forms-page .dc-lede-17 { font-size: 17px;   line-height: 1.6;  color: var(--color-ink-soft); }
.sixth-forms-page .dc-body-16h{ font-size: 16.5px; line-height: 1.6;  color: var(--color-ink-soft); }
.sixth-forms-page .dc-body-16 { font-size: 16px;   line-height: 1.6;  color: var(--color-ink-soft); }
.sixth-forms-page .dc-body-15h{ font-size: 15.5px; line-height: 1.6;  color: var(--color-ink-soft); margin: 0; }
.sixth-forms-page .dc-body-15 { font-size: 15px;   line-height: 1.6;  color: var(--color-ink-soft); }
.sixth-forms-page .dc-body-14h{ font-size: 14.5px; line-height: 1.6;  color: var(--color-ink-soft); }
.sixth-forms-page .dc-body-14 { font-size: 14px;   line-height: 1.5;  color: var(--color-ink-soft); margin: 0; }
.sixth-forms-page .dc-body-13h{ font-size: 13.5px; line-height: 1.5;  color: var(--color-ink-soft); }
.sixth-forms-page .dc-body-13 { font-size: 13px;   line-height: 1.5;  color: var(--color-ink-soft); }
.sixth-forms-page .dc-body-12h{ font-size: 12.5px; line-height: 1.45; color: var(--color-ink-soft); margin: 0; }
.sixth-forms-page .dc-body-12 { font-size: 12px;   line-height: 1.45; color: var(--color-ink-soft); margin: 0; }
.sixth-forms-page .dc-body-11h{ font-size: 11.5px; line-height: 1.45; color: var(--color-ink-soft); }
.sixth-forms-page .dc-body-11 { font-size: 11px;   line-height: 1.4;  color: var(--color-ink-soft); margin: 0; }
.sixth-forms-page .dc-body-10h{ font-size: 10.5px; line-height: 1.4;  color: var(--color-ink-soft); margin: 0; }

.sixth-forms-page .dc-closer-lede {
  font-size: clamp(17px, 2vw, 21px); line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

/* ── Mono labels (IBM Plex Mono 500) ────────────────────────────────────────────────────── */
/* Confirmed against the reference: it really is the mono face. The 12.5px / 0.08em step is
   exactly our font-label + text-label-l + tracking-label, so `dc-eyebrow` is that composition
   spelled out once. Tracking varies by size in the reference, hence the `dc-tr-*` modifiers. */
.sixth-forms-page [class*="dc-label-"],
.sixth-forms-page .dc-eyebrow {
  font-family: var(--font-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}

.sixth-forms-page .dc-eyebrow {
  display: block;
  font-size: 12.5px;
  color: var(--color-coral-500);
}

/* The hero's eyebrow is the only one that is not coral - ink-deep/60 since 2026-09-16 (the reference used ink-mute; changed site-wide so the label holds up over the hero canvas) - and 12px/0.09em. */
.sixth-forms-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: 0.09em; color: color-mix(in srgb, var(--color-ink-deep) 60%, transparent); }
.sixth-forms-page .dc-eyebrow-row  { display: inline-flex; align-items: center; gap: 11px; }

.sixth-forms-page .dc-label-11h { font-size: 11.5px; letter-spacing: 0.06em; }
.sixth-forms-page .dc-label-11  { font-size: 11px; }
.sixth-forms-page .dc-label-10h { font-size: 10.5px; }
.sixth-forms-page .dc-label-10  { font-size: 10px; }
.sixth-forms-page .dc-label-9h  { font-size: 9.5px; }
.sixth-forms-page .dc-label-9   { font-size: 9px; }

.sixth-forms-page .dc-tr-04 { letter-spacing: 0.04em; }
.sixth-forms-page .dc-tr-05 { letter-spacing: 0.05em; }
.sixth-forms-page .dc-tr-06 { letter-spacing: 0.06em; }
.sixth-forms-page .dc-tr-07 { letter-spacing: 0.07em; }
.sixth-forms-page .dc-tr-09 { letter-spacing: 0.09em; }
.sixth-forms-page .dc-tr-10 { letter-spacing: 0.1em; }

/* The stage kicker ("01 · BE FOUND") is the one BOLD mono label on the page. */
.sixth-forms-page .dc-kicker {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-coral-500);
  margin: 0;
}

/* ── Colour helpers for the dark surfaces ───────────────────────────────────────────────── */
.sixth-forms-page .dc-on-dark-body   { color: var(--dc-on-dark-body); }
.sixth-forms-page .dc-on-dark-bright { color: var(--dc-on-dark-bright); }
.sixth-forms-page .dc-on-dark-mute   { color: var(--dc-on-dark-mute); }
.sixth-forms-page .dc-on-dark-pill   { color: var(--dc-on-dark-pill); }
.sixth-forms-page .dc-on-dark-cap    { color: var(--dc-on-dark-cap); }
.sixth-forms-page .dc-ok             { color: var(--color-ok-green); }
.sixth-forms-page .dc-ok-bright      { color: var(--color-ok-green-bright); }
.sixth-forms-page .dc-coral          { color: var(--color-coral-500); }
.sixth-forms-page .dc-mute           { color: var(--color-ink-mute); }

/* ── Surfaces: the inset panels and cards ───────────────────────────────────────────────── */
/* The page has ONE full-bleed dark band (Emma) plus two inset dark PANELS (grader, Bursary16+)
   and one full-bleed coral band (the closer). Both panel forms live here for now: a handful of
   uses on one page is not the cross-page repetition that earns a DS class. */
.sixth-forms-page .dc-panel {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: var(--radius-5\.5);
  position: relative;
  overflow: hidden;
}

.sixth-forms-page .dc-panel-bursary { background: var(--color-dark-band); padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 64px); }

.sixth-forms-page .dc-card {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-4\.5);
}

.sixth-forms-page .dc-card-mock  { border-radius: var(--radius-4\.5); padding: 24px 24px 20px; border: 1px solid var(--color-rule); box-shadow: var(--shadow-deep); }
.sixth-forms-page .dc-card-faith { border: 0; border-radius: var(--radius-5); box-shadow: var(--shadow-soft); padding: clamp(28px, 3.2vw, 40px) clamp(26px, 3.4vw, 44px); }
.sixth-forms-page .dc-card-mis   { border-radius: var(--radius-4\.5); padding: 28px 36px; }

/* the panel that frames a mock inside a journey stage */
.sixth-forms-page .dc-frame      { background: var(--color-page-bg); border-radius: var(--radius-4); padding: 28px; }
.sixth-forms-page .dc-frame-col  { display: flex; flex-direction: column; gap: 12px; }
.sixth-forms-page .dc-frame-phone{ background: var(--color-page-bg); border-radius: var(--radius-4); padding: 32px 0 0; overflow: hidden; display: flex; justify-content: center; }

/* the small elevated mock cards inside a frame */
.sixth-forms-page .dc-mock {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-3\.5);
  box-shadow: var(--dc-shadow-mock);
}
.sixth-forms-page .dc-mock-pad   { padding: 18px 20px; }
.sixth-forms-page .dc-mock-pad-s { padding: 16px 20px; }
.sixth-forms-page .dc-mock-pad-l { padding: 20px 22px; }
.sixth-forms-page .dc-mock-clip  { overflow: hidden; }

/* the phone shell used by stages 01 and 04 */
.sixth-forms-page .dc-phone {
  width: 290px;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-bottom: 0;
  border-radius: var(--radius-7) var(--radius-7) 0 0;
  box-shadow: var(--dc-shadow-phone);
}
.sixth-forms-page .dc-phone-a { padding: 18px 16px 0; }
.sixth-forms-page .dc-phone-b { padding: 20px 18px 0; }

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

.sixth-forms-page .dc-grid-hero    { grid-template-columns: 1.15fr 1fr;   gap: clamp(36px, 5vw, 72px); align-items: center; }
.sixth-forms-page .dc-grid-problem { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: clamp(14px, 2vw, 26px); align-items: stretch; }
.sixth-forms-page .dc-grid-stakes  { grid-template-columns: 1fr 340px;     gap: clamp(28px, 4vw, 56px); align-items: center; }
.sixth-forms-page .dc-grid-stage   { grid-template-columns: 1fr 1fr;       gap: clamp(28px, 4vw, 64px); align-items: center; }
/* minmax(0, …), not a bare `fr`: a bare track keeps an implicit auto (min-content) minimum, so
   these two columns held 336px + 229px of min-content inside a narrower panel and overflowed
   it. Below 640 the collapse hid that; between 641 and 653 nothing did, and the panel clipped
   5 text nodes. A minmax correction has no boundary to be wrong at - raising the breakpoint
   would only move the window to a width nobody has measured. */
.sixth-forms-page .dc-grid-faith   { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 3.5vw, 48px); align-items: center; }
.sixth-forms-page .dc-grid-emma    { grid-template-columns: 1.15fr 1fr;    gap: clamp(28px, 4vw, 56px); align-items: start; }
.sixth-forms-page .dc-grid-families{ grid-template-columns: 1.1fr 1fr;     gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.sixth-forms-page .dc-grid-results { grid-template-columns: 1.35fr 1fr;    gap: clamp(20px, 2.5vw, 32px); align-items: stretch; }
.sixth-forms-page .dc-grid-bursary { grid-template-columns: 1.05fr 1fr;    gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.sixth-forms-page .dc-grid-3       { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.sixth-forms-page .dc-grid-2       { grid-template-columns: 1fr 1fr; gap: 10px 22px; }

.sixth-forms-page .dc-measure-820 { max-width: 820px; }
.sixth-forms-page .dc-measure-780 { max-width: 780px; }
.sixth-forms-page .dc-measure-720 { max-width: 720px; }
/* character measures, exactly as the reference expresses them */
.sixth-forms-page .dc-ch-62 { max-width: 62ch; }
.sixth-forms-page .dc-ch-58 { max-width: 58ch; }
.sixth-forms-page .dc-ch-56 { max-width: 56ch; }
.sixth-forms-page .dc-ch-54 { max-width: 54ch; }
.sixth-forms-page .dc-ch-52 { max-width: 52ch; }
.sixth-forms-page .dc-ch-50 { max-width: 50ch; }
.sixth-forms-page .dc-ch-46 { max-width: 46ch; }
.sixth-forms-page .dc-ch-44 { max-width: 44ch; }
.sixth-forms-page .dc-ch-24 { max-width: 24ch; }
.sixth-forms-page .dc-ch-20 { max-width: 20ch; }

/* THE REFERENCE COLLAPSES EXACTLY TWO GRIDS, AND BOTH AT 900px:
 *   @media (max-width: 900px) { [data-faithgrid]  { grid-template-columns: minmax(0,1fr) } }
 *   @media (max-width: 900px) { [data-inyeargrid] { grid-template-columns: minmax(0,1fr) } }
 * Its other four @media rules are chrome we do not port (nav at 1120/940, footer grid at
 * 1080/560). Everything else — hero, stakes, toolkit, stage, grader, emma, families, results,
 * bursary, resources, the problem comparison, the toolkit's 2-up bullets, and both inset panels'
 * padding — keeps its fixed columns and its clamp padding all the way down to a phone. So this
 * block used to collapse thirteen grids at a breakpoint (991px) the package never uses; only the
 * two below are real, and they move to the reference's own 900px. The narrow squeeze that leaves
 * is the reference's own and is recorded in STATUS.md section 5, as with the gutter/padding steps.
 *
 * The `.dc-order-2 { order: 0 }` reset that was here went with the collapse — the reference swaps
 * stage sides with `order` and never unswaps it. It had also never worked: it sat at the same
 * specificity as the `.dc-order-2 { order: 2 }` rule DECLARED BELOW this block, so source order
 * won and `order: 2` applied at every width regardless. */
@media (max-width: 900px) {
  .sixth-forms-page .dc-grid-faith { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sixth-forms-page .dc-grid-3     { grid-template-columns: minmax(0, 1fr); }
}

.sixth-forms-page .dc-order-2 { order: 2; }

/* ── Logo marquee: page artwork over the shared unframed card pattern ───────────────────── */
/* The DS owns the equal-height cards, gap, edge fade and motion behaviour. The crests remain
   152x58 and this page retains its 74s cycle. */
.sixth-forms-page .marquee-track     { animation-duration: 74s; }
.sixth-forms-page .marquee-item img  { width: 152px; height: 58px; }

/* The artwork stays 152x58; the shared cards handle the narrow viewport. */

/* ── The patchwork problem: disconnected map → connected workflow ───────────────────────── */
/* This is page artwork, not a reusable card or workflow component. Both halves share the same
   hierarchy; their inner diagrams carry the contrast between fragmented and connected. */
.sixth-forms-page .dc-problem-gradient {
  background: linear-gradient(to bottom, transparent 0%, var(--color-paper) 20%, var(--color-paper) 100%);
}

.sixth-forms-page .dc-problem-stack {
  background-color: transparent;
}

.sixth-forms-page .dc-compare-old {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: 1px dashed var(--dc-line-dash);
  border-radius: var(--radius-4);
  padding: 26px;
}

.sixth-forms-page .dc-compare-new {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: color-mix(in oklab, var(--color-coral-100) 60%, var(--color-paper));
  border: 1px solid color-mix(in oklab, var(--color-coral-500) 48%, transparent);
  border-radius: var(--radius-4);
  padding: 26px;
}

.sixth-forms-page .dc-compare-new::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -72px;
  top: -92px;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-coral-500) 10%, transparent);
  pointer-events: none;
}

.sixth-forms-page .dc-compare-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.sixth-forms-page .dc-compare-title {
  margin: 5px 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--color-ink-deep);
}

.sixth-forms-page .dc-compare-state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-full);
  padding: 6px 9px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  color: var(--color-ink-mute);
  background: var(--color-page-bg);
}

.sixth-forms-page .dc-compare-state-live {
  color: var(--color-ok-green);
  background: var(--color-ok-green-soft);
}

.sixth-forms-page .dc-patchwork-map {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin-top: auto;
  padding: 18px 16px;
  border-radius: var(--radius-3);
  background-color: var(--color-page-bg);
  background-image: radial-gradient(circle, color-mix(in oklab, var(--color-ink-mute) 20%, transparent) 1px, transparent 1px);
  background-size: 16px 16px;
}

.sixth-forms-page .dc-patchwork-map::before,
.sixth-forms-page .dc-patchwork-map::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-color: var(--dc-line-dash);
  border-style: dashed;
}

.sixth-forms-page .dc-patchwork-map::before {
  top: 18%;
  bottom: 18%;
  left: 50%;
  border-width: 0 0 0 1px;
}

.sixth-forms-page .dc-patchwork-map::after {
  top: 50%;
  right: 16%;
  left: 16%;
  border-width: 1px 0 0;
}

.sixth-forms-page .dc-patch-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--dc-node-line);
  border-radius: var(--radius-2);
  background: var(--color-paper);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.15;
  color: var(--color-ink-soft);
}

.sixth-forms-page .dc-patch-node > i {
  flex: none;
  width: 18px;
  color: var(--color-ink-mute);
  font-size: 15px;
  text-align: center;
}

.sixth-forms-page .dc-patch-node-mis {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(82%, 310px);
}

.sixth-forms-page .dc-patch-break {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-coral-500);
  background: var(--color-paper);
  border: 1px solid color-mix(in oklab, var(--color-coral-500) 28%, transparent);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
}

.sixth-forms-page .dc-compare-arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.sixth-forms-page .dc-compare-arrow::before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--dc-line-dash), var(--color-coral-500));
}

.sixth-forms-page .dc-compare-arrow > i {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 5px solid var(--color-page-bg);
  border-radius: var(--radius-full);
  background: var(--color-coral-500);
  font-size: 14px;
}

.sixth-forms-page .dc-pipeline-copy {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 46ch;
}

.sixth-forms-page .dc-pipeline-flow {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: auto;
  padding-top: 24px;
}

.sixth-forms-page .dc-pipeline-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: 12px;
  line-height: 1.1;
  color: var(--color-ink-deep);
  text-align: center;
}

.sixth-forms-page .dc-pipeline-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 20px;
  left: calc(50% + 20px);
  width: calc(100% - 40px);
  height: 2px;
  background: var(--color-coral-500);
}

.sixth-forms-page .dc-pipeline-step > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--color-coral-500);
  background: var(--color-paper);
  border: 1px solid color-mix(in oklab, var(--color-coral-500) 32%, transparent);
  border-radius: var(--radius-full);
  font-size: 16px;
}

.sixth-forms-page .dc-pipeline-emma {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 20px;
  padding: 11px 13px;
  background: var(--color-paper);
  border: 1px solid color-mix(in oklab, var(--color-ink-deep) 10%, transparent);
  border-radius: var(--radius-3);
}

.sixth-forms-page .dc-pipeline-emma .icon-emma {
  flex: none;
  width: 32px;
  height: 32px;
}

.sixth-forms-page .dc-pipeline-emma > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  color: var(--color-ink-deep);
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 1.2;
}

.sixth-forms-page .dc-pipeline-emma small {
  color: var(--color-ink-soft);
  font-family: var(--font-sans);
  font-size: 11px;
}

/* ── Classroom funding scene ────────────────────────────────────────────────────────────── */
/* A page-specific illustration rather than an icon grid: room context, desk surfaces,
   occupied places, vacant chairs, cohort capacity and the existing funding-impact figure. */
.sixth-forms-page .dc-classroom {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.sixth-forms-page .dc-classroom-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sixth-forms-page .dc-classroom-head > div,
.sixth-forms-page .dc-classroom-impact > span {
  display: flex;
  flex-direction: column;
}

.sixth-forms-page .dc-classroom-head > div { gap: 3px; }

.sixth-forms-page .dc-classroom-head > div > strong {
  color: var(--color-ink-deep);
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.1;
}

.sixth-forms-page .dc-classroom-capacity {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  flex: none;
  color: var(--color-ink-soft);
  background: var(--color-page-bg);
  border-radius: var(--radius-full);
  padding: 6px 9px;
  font-family: var(--font-heading);
  font-size: 11px;
  line-height: 1;
}

.sixth-forms-page .dc-classroom-capacity strong {
  color: var(--color-ink-deep);
  font-size: 13px;
}

.sixth-forms-page .dc-classroom-meter {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  background: color-mix(in oklab, var(--color-coral-500) 18%, transparent);
  border-radius: var(--radius-full);
}

.sixth-forms-page .dc-classroom-meter > span {
  display: block;
  width: 75%;
  height: 100%;
  background: var(--color-ink-royal);
  border-radius: inherit;
}

.sixth-forms-page .dc-classroom-scene {
  margin-top: 10px;
  padding: 10px;
  overflow: hidden;
  background-color: var(--color-page-bg);
  background-image: radial-gradient(circle, color-mix(in oklab, var(--color-ink-mute) 18%, transparent) 1px, transparent 1px);
  background-size: 16px 16px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-3);
}

.sixth-forms-page .dc-classroom-scene :where(i, em) { font-style: normal; }

.sixth-forms-page .dc-classroom-front {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 36px;
  align-items: stretch;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-rule);
}

.sixth-forms-page .dc-classroom-window {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 4px;
  background: var(--color-paper);
  border: 1px solid var(--dc-node-line);
  border-radius: var(--radius-1\.5);
}

.sixth-forms-page .dc-classroom-window > i {
  background: color-mix(in oklab, var(--color-secondary) 15%, var(--color-paper));
  border-radius: 2px;
}

.sixth-forms-page .dc-classroom-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  color: var(--color-white);
  background: var(--color-ink-deep);
  border: 3px solid var(--color-paper);
  border-radius: var(--radius-1\.5);
  box-shadow: 0 0 0 1px var(--dc-node-line);
  font-family: var(--font-heading);
  line-height: 1.05;
}

.sixth-forms-page .dc-classroom-board strong { font-size: 10px; }
.sixth-forms-page .dc-classroom-board small {
  margin-top: 2px;
  color: var(--color-on-dark-body);
  font-size: 7px;
}

.sixth-forms-page .dc-classroom-door {
  position: relative;
  background: var(--color-paper);
  border: 1px solid var(--dc-node-line);
  border-radius: var(--radius-1\.5) var(--radius-1\.5) 0 0;
}

.sixth-forms-page .dc-classroom-door > i {
  position: absolute;
  right: 5px;
  top: 50%;
  width: 3px;
  height: 3px;
  background: var(--color-coral-500);
  border-radius: var(--radius-full);
}

.sixth-forms-page .dc-classroom-seats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px 8px;
  margin-top: 10px;
}

.sixth-forms-page .dc-classroom-seat {
  position: relative;
  display: block;
  min-width: 0;
  height: 42px;
}

.sixth-forms-page .dc-student {
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 50%;
  width: 22px;
  height: 19px;
  background: var(--color-ink-royal);
  border: 2px solid var(--color-paper);
  border-radius: 10px 10px 5px 5px;
  transform: translateX(-50%);
}

.sixth-forms-page .dc-student::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  background: var(--color-coral-100);
  border: 2px solid var(--color-paper);
  border-radius: var(--radius-full);
  transform: translateX(-50%);
}

.sixth-forms-page .dc-student::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 5px;
  background: var(--color-ink-deep);
  border-radius: 8px 8px 2px 2px;
  transform: translateX(-50%);
}

.sixth-forms-page .dc-student > i {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 8px;
  height: 2px;
  background: color-mix(in oklab, var(--color-white) 65%, transparent);
  border-radius: var(--radius-full);
  transform: translateX(-50%);
}

.sixth-forms-page .dc-seat-filled:nth-child(4n + 2) .dc-student { background: var(--dc-navy-3); }
.sixth-forms-page .dc-seat-filled:nth-child(4n + 3) .dc-student { background: var(--color-secondary); }

.sixth-forms-page .dc-desk {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 18px;
  background: var(--color-paper);
  border: 1px solid var(--dc-node-line);
  border-radius: var(--radius-1\.5);
  box-shadow: 0 5px 8px color-mix(in oklab, var(--color-ink-deep) 8%, transparent);
}

.sixth-forms-page .dc-desk::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 5px;
  left: 5px;
  height: 4px;
  border-right: 1px solid var(--dc-node-line);
  border-left: 1px solid var(--dc-node-line);
}

.sixth-forms-page .dc-desk > i {
  position: absolute;
  top: 4px;
  left: 6px;
  width: 13px;
  height: 8px;
  background: var(--color-page-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
}

.sixth-forms-page .dc-desk > b {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 2px;
  height: 9px;
  background: var(--color-coral-500);
  border-radius: var(--radius-full);
  transform: rotate(18deg);
}

.sixth-forms-page .dc-seat-empty {
  background: color-mix(in oklab, var(--color-coral-500) 8%, transparent);
  border: 1px dashed color-mix(in oklab, var(--color-coral-500) 42%, transparent);
  border-radius: var(--radius-2);
}

.sixth-forms-page .dc-seat-empty > em {
  position: absolute;
  z-index: 3;
  top: 3px;
  right: 3px;
  color: var(--color-coral-500);
  font-family: var(--font-label);
  font-size: 5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sixth-forms-page .dc-chair {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 21px;
  height: 20px;
  border: 2px solid color-mix(in oklab, var(--color-coral-500) 58%, transparent);
  border-radius: 9px 9px 4px 4px;
  transform: translateX(-50%);
}

.sixth-forms-page .dc-seat-empty .dc-desk {
  right: 4px;
  bottom: 4px;
  left: 4px;
  background: color-mix(in oklab, var(--color-coral-100) 55%, var(--color-paper));
  border-color: color-mix(in oklab, var(--color-coral-500) 42%, transparent);
  box-shadow: none;
}

.sixth-forms-page .dc-classroom-impact {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-rule);
}

.sixth-forms-page .dc-classroom-impact > span:first-child { gap: 2px; }
.sixth-forms-page .dc-classroom-impact > span:last-child {
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}

.sixth-forms-page .dc-classroom-impact strong {
  color: var(--color-ink-deep);
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 1.1;
}

.sixth-forms-page .dc-classroom-impact small {
  color: var(--color-ink-mute);
  font-size: 8px;
  line-height: 1.3;
}

.sixth-forms-page .dc-classroom-impact > span:last-child > strong {
  color: var(--color-coral-500);
  font-size: 21px;
}

/* MIS copy treatment; layout and logo cards are shared in `_shared/cards.css`. */
.sixth-forms-page .dc-mis-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em; color: var(--color-ink-deep); margin: 0 0 5px;
}

/* ── The journey: 7 stages, ONE VISIBLE AT A TIME ───────────────────────────────────────── */
/* Measured off the reference: the stages are display:grid / display:none, driven by the step
   pills — a STEPPER, not the horizontal carousel Secondary's journey turned out to be. So it
   maps onto the DS `tabs` controller exactly as the toolkit does, and needs no page JS. */
/* 4fr + 3fr so all seven pills share one container width (each = 1/7). Same 8px
   gap between the two halves as between pills, so they read as one even strip. */
.sixth-forms-page .dc-steps {
  display: grid;
  grid-template-columns: 4fr 3fr;
  gap: 24px 8px;
  align-items: start;
}
.sixth-forms-page .dc-steps-half,
.sixth-forms-page .dc-steps-half-b { min-width: 0; }
.sixth-forms-page .dc-steps-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.sixth-forms-page .dc-steps-half-b .dc-steps-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sixth-forms-page .dc-step {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; min-width: 0;
  text-align: left; cursor: pointer;
  background: var(--color-paper); border: 1px solid var(--color-rule);
  border-radius: var(--radius-2\.5); padding: 9px 14px 11px; color: var(--color-ink-soft);
  transition: border-color 200ms ease;
}
.sixth-forms-page .dc-step::before,
.sixth-forms-page .dc-step::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
}
.sixth-forms-page .dc-step::before {
  background: color-mix(in srgb, var(--color-rule) 80%, transparent);
}
.sixth-forms-page .dc-step[aria-selected="true"]::before {
  background: color-mix(in srgb, #fff 22%, transparent);
}
.sixth-forms-page .dc-step::after {
  background: var(--color-coral-500);
  transform: scaleX(0);
  transform-origin: left center;
}
/* `is-playing` / `is-paused` and `--tabs-autoplay-ms` are the tabs controller's autoplay contract
   (docs/components/tabs.md). The fallback duration is only a safety net - the controller writes the
   property from the same number it runs its own timer on, so bar and timer cannot drift. */
.sixth-forms-page .dc-step.is-playing::after {
  animation: dc-step-progress var(--tabs-autoplay-ms, 4.5s) linear forwards;
}
.sixth-forms-page .dc-step.is-paused::after { animation-play-state: paused; }
@keyframes dc-step-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.sixth-forms-page .dc-step:hover { border-color: var(--color-ink-soft); }

.sixth-forms-page .dc-step-num {
  font-family: var(--font-label); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--color-ink-mute);
}
.sixth-forms-page .dc-step-label {
  font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: 1.2;
  color: inherit;
}

.sixth-forms-page .dc-step[aria-selected="true"] { background: var(--color-ink-deep); border-color: var(--color-ink-deep); color: #fff; }
.sixth-forms-page .dc-step[aria-selected="true"] .dc-step-num { color: var(--color-coral-500); }

.sixth-forms-page .dc-step-hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--color-ink-mute);
}
.sixth-forms-page .dc-step-hint i { transform: rotate(180deg); }

.sixth-forms-page .dc-stages {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-4\.5);
}

/* a stage is a grid when shown; the HTML `hidden` attribute is what hides the rest.
   Author `display: grid` would otherwise beat both `.hidden` and the UA [hidden] rule. */
.sixth-forms-page .dc-stage { display: grid; }
.sixth-forms-page .dc-stage[hidden] { display: none; }

/* ── Mock atoms shared across the stage mocks ───────────────────────────────────────────── */
.sixth-forms-page .dc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--color-rule);
}
.sixth-forms-page .dc-row:last-child { border-bottom: 0; }
.sixth-forms-page .dc-row-head { padding: 13px 18px; border-bottom: 1px solid var(--color-rule); }
.sixth-forms-page .dc-row-risk { background: var(--dc-wash-risk); }
.sixth-forms-page .dc-row-dark { background: var(--color-dark-band); }

.sixth-forms-page .dc-name {
  font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; line-height: normal;
  color: var(--color-ink-deep); margin: 0;
}
.sixth-forms-page .dc-name-b { font-weight: 700; font-size: 15px; color: var(--color-ink-deep); }
.sixth-forms-page .dc-name-b-13 { font-size: 13px; }   /* ref sizes these per instance */

/* status chips: mono, so they are NOT the DS .badge (which is Inter semibold) */
.sixth-forms-page .dc-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-label); font-weight: 600; font-size: 9.5px;
  letter-spacing: 0.02em; border-radius: var(--radius-full); padding: 4px 10px; white-space: nowrap;
}
.sixth-forms-page .dc-pill-ok    { color: var(--color-ok-green); background: var(--color-ok-green-soft); }
.sixth-forms-page .dc-pill-risk  { color: var(--color-coral-500); background: var(--color-coral-100); }
.sixth-forms-page .dc-pill-new   { color: var(--color-ink-soft); background: var(--dc-sand-2); }
.sixth-forms-page .dc-pill-warn  { color: var(--dc-amber-ink); background: var(--color-light-yellow); }

.sixth-forms-page .dc-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-label); font-weight: 500; font-size: 9px;
  border-radius: var(--radius-1); padding: 3px 7px; white-space: nowrap;
}
.sixth-forms-page .dc-tag-ok { color: var(--color-ok-green); background: var(--color-ok-green-soft); }

.sixth-forms-page .dc-dot     { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok-green-bright); }
.sixth-forms-page .dc-dot-9   { width: 9px; height: 9px; }
.sixth-forms-page .dc-dot-6   { width: 6px; height: 6px; }
.sixth-forms-page .dc-dot-warn{ background: var(--dc-amber-dot); }

.sixth-forms-page .dc-emma-line {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 12px; line-height: 1.45; font-weight: 500; color: var(--color-ink-deep);
}
.sixth-forms-page .dc-emma-line-top {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--color-rule);
}

/* progress bars */
.sixth-forms-page .dc-bar      { height: 8px; background: var(--dc-sand-2); border-radius: var(--radius-1); overflow: hidden; }
.sixth-forms-page .dc-bar-fill { height: 100%; border-radius: var(--radius-1); background: var(--color-coral-500); }
.sixth-forms-page .dc-bar-86   { width: 86%; }

/* the 5-segment application stepper */
.sixth-forms-page .dc-seg      { display: flex; gap: 4px; }
.sixth-forms-page .dc-seg > span { flex: 1; height: 4px; border-radius: var(--radius-0\.5); background: var(--dc-sand-2); }
/* one extra class rather than !important, so the "on" segment simply out-specifies the base */
.sixth-forms-page .dc-seg > .dc-seg-on { background: var(--color-coral-500); }

/* ── Hero funnel mock ───────────────────────────────────────────────────────────────────── */
.sixth-forms-page .dc-funnel       { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.sixth-forms-page .dc-funnel-row   { display: flex; align-items: center; gap: 14px; }
.sixth-forms-page .dc-funnel-label { flex: none; width: 92px; text-align: right; }
.sixth-forms-page .dc-funnel-track { flex: 1; height: 34px; background: var(--color-page-bg); border-radius: var(--radius-2); overflow: hidden; }
.sixth-forms-page .dc-funnel-fill {
  display: flex; align-items: center; justify-content: flex-end; height: 100%;
  border-radius: var(--radius-2); padding-right: 10px;
  font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: #fff;
}
/* the reference animates these widths in; a prototype with no JS shows them at rest */
.sixth-forms-page .dc-funnel-1 { width: 100%; background: var(--color-ink-deep); }
.sixth-forms-page .dc-funnel-2 { width: 78%;  background: var(--dc-navy-2); }
.sixth-forms-page .dc-funnel-3 { width: 62%;  background: var(--dc-navy-3); }
.sixth-forms-page .dc-funnel-4 { width: 47%;  background: var(--color-coral-500); }
.sixth-forms-page .dc-funnel-5 { width: 40%;  background: var(--color-ok-green); }

.sixth-forms-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);
  color: var(--color-ink-soft);
}

/* ── Stage 01: the ApplicaaOne search mock ──────────────────────────────────────────────── */
.sixth-forms-page .dc-one-logo {
  display: block;
  height: 28px;
  width: auto;
}
.sixth-forms-page .dc-pill-outline {
  display: inline-flex; align-items: center;
  border: 1px solid var(--color-rule); border-radius: var(--radius-full); padding: 4px 10px;
}
.sixth-forms-page .dc-phone .dc-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--color-page-bg); border-radius: var(--radius-2\.5); padding: 9px 12px;
  font-size: 12.5px; color: var(--color-ink-soft);
}
.sixth-forms-page .dc-result-on  { border: 1.5px solid var(--color-coral-500); border-radius: var(--radius-3); padding: 12px 13px; background: var(--color-paper); }
.sixth-forms-page .dc-result-off { border: 1px solid var(--color-rule); border-radius: var(--radius-3); padding: 12px 13px; margin-top: 8px; opacity: 0.55; }
.sixth-forms-page .dc-quick {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
  background: var(--color-coral-500); color: #fff; border-radius: var(--radius-1\.5); padding: 7px 13px;
  font-family: var(--font-heading); font-weight: 600; font-size: 11.5px;
}
.sixth-forms-page .dc-tag-ofsted {
  font-family: var(--font-label); font-weight: 500; font-size: 8.5px;
  color: var(--color-ok-green); background: var(--color-ok-green-soft);
  border-radius: var(--radius-1); padding: 2px 6px; white-space: nowrap;
}
.sixth-forms-page .dc-stat-inline {
  font-family: var(--font-heading); font-weight: 700; font-size: 19px; color: var(--color-ink-deep);
}

/* ── Stage 02: the QR ticket mock ───────────────────────────────────────────────────────── */
.sixth-forms-page .dc-qr      { font-size: 44px; color: var(--color-ink-deep); flex: none; }
.sixth-forms-page .dc-qr-body { flex: 1; border-left: 1.5px dashed var(--color-rule); padding-left: 16px; }

/* ── Stage quote cards ──────────────────────────────────────────────────────────────────── */
.sixth-forms-page .dc-quote-card {
  font-family: var(--font-heading); font-weight: 500; font-size: 14.5px; line-height: 1.55;
  letter-spacing: -0.005em; color: var(--color-ink-deep);
  margin: 18px 0 0; padding: 16px 20px;
  background: var(--color-page-bg); border-radius: var(--radius-3);
}
.sixth-forms-page .dc-quote-by { display: block; margin-top: 8px; }

/* ── Stage 04: the course-choice rows ───────────────────────────────────────────────────── */
.sixth-forms-page .dc-choice {
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--color-coral-500); border-radius: var(--radius-2\.5); padding: 11px 13px; margin-top: 7px;
}
.sixth-forms-page .dc-choice-off { border: 1px solid var(--color-rule); opacity: 0.6; }
.sixth-forms-page .dc-choice-label { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; color: var(--color-ink-deep); }
.sixth-forms-page .dc-radio { display: inline-block; width: 14px; height: 14px; border: 1.5px solid var(--color-rule); border-radius: 50%; }

/* ── Stage 06: the blurred, locked market chart ─────────────────────────────────────────── */
.sixth-forms-page .dc-locked      { position: relative; border-radius: var(--radius-4); overflow: hidden; }
.sixth-forms-page .dc-locked-body {
  aspect-ratio: 16 / 10; width: 100%; padding: 28px;
  display: flex; flex-direction: column;
  background: var(--color-paper); border: 1px solid var(--color-rule);
  filter: blur(7px); transform: scale(1.04);
}
.sixth-forms-page .dc-locked-over {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; padding: 16px; text-align: center;
}
.sixth-forms-page .dc-locked-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(11, 16, 35, 0.82); color: #fff;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  border-radius: var(--radius-full); padding: 11px 20px;
}
.sixth-forms-page .dc-cols     { flex: 1; display: flex; align-items: flex-end; gap: 18px; margin-top: 18px; }
.sixth-forms-page .dc-col      { flex: 1; border-radius: var(--radius-2) var(--radius-2) 0 0; }
.sixth-forms-page .dc-col-1    { height: 82%; background: var(--color-coral-500); }
.sixth-forms-page .dc-col-2    { height: 58%; background: var(--color-ink-deep); }
.sixth-forms-page .dc-col-3    { height: 44%; background: var(--dc-navy-3); }
.sixth-forms-page .dc-col-4    { height: 30%; background: var(--color-ink-mute); }
.sixth-forms-page .dc-col-5    { height: 21%; background: var(--dc-line-dash); }

/* ── Stage 07: the conversion chart + the "coming soon" note ─────────────────────────────── */
.sixth-forms-page .dc-chart { display: flex; align-items: flex-end; gap: 14px; height: 130px; margin-top: 18px; }
.sixth-forms-page .dc-chart-col {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  height: 100%; justify-content: flex-end; position: relative;
}
.sixth-forms-page .dc-chart-bar  { width: 100%; border-radius: var(--radius-1\.5) var(--radius-1\.5) 0 0; background: var(--color-ink-deep); }
.sixth-forms-page .dc-chart-88   { height: 88%; }
.sixth-forms-page .dc-chart-70   { height: 70%; }
.sixth-forms-page .dc-chart-38   { height: 38%; background: var(--color-coral-500); }
.sixth-forms-page .dc-chart-34   { height: 34%; }
.sixth-forms-page .dc-chart-30   { height: 30%; background: var(--color-ok-green); }
.sixth-forms-page .dc-chart-flag { position: absolute; top: 6px; font-family: var(--font-label); font-weight: 600; font-size: 8.5px; color: var(--color-coral-500); white-space: nowrap; }

.sixth-forms-page .dc-soon {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 18px;
  background: var(--color-coral-100); border: 1px solid var(--dc-line-soon);
  border-radius: var(--radius-3); padding: 14px 18px;
}
.sixth-forms-page .dc-soon-tag {
  flex: none; margin-top: 2px;
  font-family: var(--font-label); font-weight: 500; font-size: 9px; letter-spacing: 0.07em;
  color: #fff; background: var(--color-coral-500); border-radius: var(--radius-full); padding: 4px 9px;
}

/* ── Faith: icon-tile feature rows ────────────────────────────────────────────────────────
 * The in-year features now reuse `_shared/page-shared.css` §4's unwrapped capability grid. */
.sixth-forms-page .dc-feature { display: flex; gap: 14px; align-items: flex-start; }
.sixth-forms-page .dc-feature-body { flex: 1; min-width: 0; }

.sixth-forms-page .dc-faith-list  { display: flex; flex-direction: column; gap: 16px; }
.sixth-forms-page .dc-faith-row   { display: flex; gap: 13px; align-items: flex-start; }
.sixth-forms-page .dc-tile-sand   {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-2\.5); background: var(--color-page-bg);
}
.sixth-forms-page .dc-tile-sand > i { font-size: 14px; color: var(--color-coral-500); }
.sixth-forms-page .dc-faith-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 14.5px;
  letter-spacing: -0.012em; color: var(--color-ink-deep); margin: 0 0 3px;
}
.sixth-forms-page .dc-link-coral {
  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;
}
.sixth-forms-page .dc-link-coral:hover { color: var(--color-ink-deep); }

/* ── Emma band ──────────────────────────────────────────────────────────────────────────── */
.sixth-forms-page .dc-stat-pill {
  display: inline-flex; align-items: center; gap: 18px;
}
.sixth-forms-page .dc-stat-pill-num {
  flex: none; font-family: var(--font-heading); font-weight: 700; font-size: 40px;
  line-height: 1; letter-spacing: -0.02em; color: var(--color-coral-500);
}
.sixth-forms-page .dc-link-white {
  color: #fff; font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}
.sixth-forms-page .dc-guardrails { padding: 8px 4px 0; }
/* the reference's guardrail list is 15px-gapped with a 14px body — tighter than .check-list */
.sixth-forms-page .dc-guardrails .check-list { gap: 15px; }
.sixth-forms-page .dc-guardrails .check-list > li { font-size: 14px; line-height: 1.5; }
.sixth-forms-page .dc-emma-tabs { flex-wrap: wrap; }
.sixth-forms-page .dc-emma-tabs .tab { white-space: nowrap; }

/* prompt-card: the DS component already carries the reference's 18px radius, shadow-dark, the
   34px pulsing avatar, the caret and the pill row. Only the reply's mono-free metrics differ. */
.sixth-forms-page .prompt-card { padding: 22px 24px 18px; }
.sixth-forms-page .prompt-card-line { font-size: 16px; }
.sixth-forms-page .prompt-card-reply { border-color: var(--color-rule); }

/* ── Emma for families: the chat mock ───────────────────────────────────────────────────── */
.sixth-forms-page .dc-chat {
  background: var(--color-paper); border: 1px solid var(--color-rule);
  border-radius: var(--radius-4\.5); padding: 18px; box-shadow: var(--dc-shadow-chat);
}

/* ── Results: the testimonial slider + the stat stack ───────────────────────────────────── */
.sixth-forms-page .dc-results-band { background: var(--color-paper); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }

.sixth-forms-page .dc-quote-panel {
  background: var(--color-dark-band); border-radius: var(--radius-5);
  padding: clamp(32px, 4vw, 48px);
  display: flex; flex-direction: column; min-height: 360px;
}
.sixth-forms-page .dc-quote { display: flex; flex-direction: column; flex: 1; }
.sixth-forms-page .dc-quote-foot { margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 14px; }
.sixth-forms-page .dc-avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--dc-avatar); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
}
.sixth-forms-page .dc-quote-name { font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; color: #fff; }

.sixth-forms-page .dc-quote-nav {
  display: flex; align-items: center; gap: 16px;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.sixth-forms-page .dc-quote-dots { display: flex; gap: 0; }
.sixth-forms-page .dc-quote-arrows { margin-left: auto; display: flex; gap: 8px; }

.sixth-forms-page .dc-stat-col  { display: flex; flex-direction: column; gap: 12px; }
.sixth-forms-page .dc-stat-card {
  flex: 1; background: var(--color-page-bg); border-radius: var(--radius-4); padding: 24px 26px;
  display: flex; flex-direction: column; justify-content: center;
}

.sixth-forms-page .dc-ticker {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 14px;
  background: var(--color-page-bg); border: 1px solid var(--color-rule);
  border-radius: var(--radius-4); padding: 18px 26px;
}
.sixth-forms-page .dc-ticker-label { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.sixth-forms-page .dc-ticker-item  { flex: 1; min-width: 260px; font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--color-ink-deep); }
.sixth-forms-page .dc-ticker-end   { flex: none; margin-inline-start: auto; }

/* ── Resources ──────────────────────────────────────────────────────────────────────────── */
.sixth-forms-page .dc-res-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sixth-forms-page .dc-res {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 22px; border-radius: var(--radius-4\.5);
  background: var(--color-paper); border: 1px solid var(--color-rule);
  text-decoration: none; color: inherit;
  transition-property: box-shadow, transform;
  transition-duration: 200ms, 150ms;
  transition-timing-function: cubic-bezier(.2, .8, .2, 1), ease;
}
.sixth-forms-page .dc-res:hover { box-shadow: var(--dc-shadow-panel); transform: translateY(-2px); }
.sixth-forms-page .dc-res-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 17px;
  line-height: 1.18; letter-spacing: -0.01em; color: var(--color-ink-deep);
}

/* ── Bursary16+ panel ───────────────────────────────────────────────────────────────────── */
.sixth-forms-page .dc-bursary-card {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-4); padding: 20px 22px;
}
.sixth-forms-page .dc-bursary-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-2\.5);
}
.sixth-forms-page .dc-bursary-row-on {
  border: 1.5px solid var(--color-coral-500); background: rgba(236, 99, 75, 0.1);
}
.sixth-forms-page .dc-bursary-row > span:first-child { font-size: 12.5px; font-weight: 500; color: var(--dc-on-dark-row); }
.sixth-forms-page .dc-bursary-row-on > span:first-child { font-family: var(--font-heading); font-weight: 600; color: #fff; }
.sixth-forms-page .dc-bursary-tag {
  font-family: var(--font-label); font-weight: 600; font-size: 9px;
  border-radius: var(--radius-1); padding: 3px 7px; white-space: nowrap;
}
.sixth-forms-page .dc-bursary-tag-ok   { color: var(--color-ok-green-bright); background: rgba(52, 208, 127, 0.14); }
.sixth-forms-page .dc-bursary-tag-on   { color: #fff; background: var(--color-coral-500); }
.sixth-forms-page .dc-bursary-tag-flat { color: var(--dc-on-dark-body); }
.sixth-forms-page .dc-bursary-note {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sixth-forms-page .dc-bursary-pill {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-full); padding: 5px 11px;
}
.sixth-forms-page .dc-bursary-logo { height: 30px; width: auto; }

/* ── Closer ─────────────────────────────────────────────────────────────────────────────── */
/* The standard full-bleed flat coral band; only this page's taller clamp is nudged. */
.sixth-forms-page .cta-section { padding: clamp(80px, 11vw, 150px) 24px; }

/* ── Three spacing steps the build does not carry ───────────────────────────────────────── */
/* `prototypes/` is deliberately not a Tailwind scan source, so mt-1.5 / mt-3.5 / mt-14 produce
   no CSS here — the same failure a CMS block would hit. Declared page-locally, named by px. */
.sixth-forms-page .dc-mt-6  { margin-top: 6px; }
.sixth-forms-page .dc-mt-14 { margin-top: 14px; }
.sixth-forms-page .dc-mt-56 { margin-top: 56px; }

/* ── Reduced motion ─────────────────────────────────────────────────────────────────────── */
/* No blanket `* { animation-duration: .01ms !important }` here - it broke the no-!important rule
   (coding-standards §6) to do a job the design system had already done for its own components
   (section-glow-drift, marquee, prompt-card, reveal each neutralise themselves).

   This page DOES declare keyframes of its own - `dc-step-progress` above, and the whole journey
   preview build at the foot of this file. The build sits inside a
   `@media (prefers-reduced-motion: no-preference)` query, so under `reduce` those rules do not
   exist at all. That is the shape to copy if this page gains another animation - a query the
   rules live inside, not an override that has to outrank them.

   `dc-step-progress` is the exception, because JS decides when it runs: the tabs controller does
   not add `is-playing` under `reduce`, so the animation has no selector to attach to. The rule
   below is belt and braces for that one - if the class ever arrives some other way, the bar still
   holds still. */
@media (prefers-reduced-motion: reduce) {
  .sixth-forms-page .dc-step.is-playing::after { animation: none; }
}

/* .dc-q-25 is a <blockquote>: the DS re-adds a default margin for that element type, so this
   reset is load-bearing and must survive - at ZERO specificity, via :where(), so a
   margin utility can still override it (coding-standards section 2 rule 5). */
:where(.sixth-forms-page .dc-q-25) { margin: 0; }

/* The diagram needs more horizontal room than the page's text-only grids. 800px is an existing
   package step and prevents both cards being compressed into unreadable 250–312px columns. */
@media (max-width: 800px) {
  .sixth-forms-page .dc-grid-problem {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .sixth-forms-page .dc-compare-arrow { min-height: 60px; }
  .sixth-forms-page .dc-compare-arrow::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--dc-line-dash), var(--color-coral-500));
    transform: translateX(-50%);
  }
  .sixth-forms-page .dc-compare-arrow > i { transform: rotate(90deg); }
}

/* ── Phone: single column at 640 ─────────────────────────────────────────────────────────── */
/* DEPARTURE FROM THE REFERENCES, owner-approved 2026-08-17. The package does not adapt below
   ~1000px at all - that is the defect being fixed, so breakpoint fidelity is not the goal here;
   readability at 390 is. 640 is a value from the package's OWN inventory
   (1080/1000/940/900/800/720/680/640/620/560), so nothing is invented - it is a step this page's
   reference does not use, which is a much weaker objection than the invented 767/991 that STATUS
   section 5 records being swept out. Collapsing is keyed on the MEASURED column count, never the
   class name: several `dc-grid-2` computed 4 columns. */
@media (max-width: 640px) {
  .sixth-forms-page .dc-emma-tabs .tab { flex-basis: calc(50% - 2px); }
  .sixth-forms-page .dc-grid-emma,
  .sixth-forms-page .dc-grid-stage,
  .sixth-forms-page .dc-grid-2,
  .sixth-forms-page .dc-grid-bursary,
  .sixth-forms-page .dc-grid-families,
  .sixth-forms-page .dc-grid-hero,
  .sixth-forms-page .dc-grid-problem,
  .sixth-forms-page .dc-grid-results,
  .sixth-forms-page .dc-grid-stakes {
    grid-template-columns: minmax(0, 1fr);
  }
  .sixth-forms-page .dc-compare-old,
  .sixth-forms-page .dc-compare-new { padding: 22px; }
  .sixth-forms-page .dc-steps { grid-template-columns: minmax(0, 1fr); }
}

/* The hero's 128px TOP pad, restored for the CMS. `dc-py-128-72` declares only the bottom: in the
   prototype the top comes from _shared/page-shared.css via
   `body.app > [data-site-header] + [data-stack-group] > .section:first-child`.
   /r/24's CMS replacement is `main > .section:first-of-type, main > div > .section:first-of-type`
   — depth 1 and 2 only. This page nests the hero THREE deep
   (main > div.sixth-forms-page > div[data-stack-group] > section#top), so neither form matches and the hero
   falls back to the DS `.section` default of 96px. Scoped to the FIRST stack group so later groups
   do not inherit 128px — the CMS equivalent of the shared rule's `[data-site-header] +` adjacency
   guard. Inert in the prototype, where `.sixth-forms-page` is <body> and its first child is the header slot.
   Found on fe-colleges (2026-08-28 round 4); applies to every stack-group page. */
.sixth-forms-page > [data-stack-group]:first-child > .section:first-child { padding-top: 128px; }

/* ════════════════════════════════════════════════════════════════════════════════════════════
 * JOURNEY STAGE PREVIEWS  (`jp-`)                                              2026-09-17
 * The seven "screenshot" mocks in section 7's tabs, rebuilt on blue + ink and locked to ONE
 * 16:10 frame so the seven read as one product. Replaces the old `.dc-frame*` / `.dc-phone*` /
 * `.dc-mock*` / `.dc-locked` treatments, which were per-stage and had no shared ratio.
 *
 *   FRAME   every stage is `.jp-pv`, aspect-ratio 16/10, filling the stage column (583px at
 *           1440, so 583x364). The ground rotates through four washes - blue, amber, royal,
 *           coral - so no two neighbouring tabs sit on the same colour.
 *   SCALE   one knob: `.jp-pv` is a size container and `.jp-pv-in` sets `font-size: 1.72cqw`,
 *           so every measurement inside is `em` and the whole mock scales with the column.
 *   SHELL   a phone hung 32px from the top (01, 04); a browser inset 32px on three sides and
 *           bled off the bottom, square-cornered there (02, 03, 05); or loose overlapping
 *           cards (06, 07). All borderless, lifted on an ink-deep/24 shadow.
 *   COLOUR  info blue carries every action, selection and meter; charts run five hues from the
 *           product palette; coral is rationed to the at-risk row and the -11% delta. Quick
 *           Apply is #2C7ECD, ApplicaaOne's own button blue (owner, 2026-09-17) - the one
 *           colour here with no token, which is why it is a literal.
 *   OVERLAP in 06 and 07 the cards overlap, and every overlap lands on card padding or bar
 *           track, never on a number - which is why the bar values sit LEFT of the track.
 * ════════════════════════════════════════════════════════════════════════════════════════════ */
/* ── the preview stage (the shared-ratio box) ─────────────────────────────── */
.sixth-forms-page .jp-pv{
  --p-ink:var(--color-ink-deep);--p-royal:var(--color-ink-royal);--p-soft:var(--color-ink-soft);--p-mute:var(--color-ink-mute);
  --p-blue:var(--color-info-blue);--p-blue-d:#2A63D8;--p-blue-soft:var(--color-info-blue-soft);--p-blue-wash:var(--color-light-blue);
  --p-paper:var(--color-paper);--p-bg:var(--color-page-bg);--p-bg2:var(--color-page-bg-soft);--p-rule:var(--color-rule);
  --p-green:var(--color-ok-green);--p-green-soft:var(--color-ok-green-soft);
  --p-amber:#8A5A00;--p-amber-soft:var(--color-light-yellow);
  --p-coral:var(--color-coral-600);--p-coral-soft:var(--color-bad-coral-soft);
  container-type:inline-size;
  aspect-ratio:16/10;width:100%;
  /* No border and no shadow (owner, 2026-09-17): the phone, window and card shells inside carry
     the depth, so the frame stays a clean ground. `clip` not `hidden` - a translated descendant
     can make an `overflow:hidden` box scrollable, and one find-in-page then leaves a panel
     permanently offset with no scrollbar to correct it. */
  border-radius:20px;overflow:clip;position:relative;isolation:isolate;
  background:
    radial-gradient(115% 88% at 84% 4%,var(--wash-a),transparent 60%),
    radial-gradient(95% 72% at 4% 100%,var(--wash-b),transparent 62%),
    linear-gradient(162deg,var(--wash-1) 0%,var(--wash-2) 50%,var(--wash-3) 100%);
}
.sixth-forms-page .jp-pv-blue  {--wash-a:rgba(52,120,247,.22);--wash-b:rgba(52,120,247,.10);
           --wash-1:#E7EFFC;--wash-2:#F3F7FE;--wash-3:#FDFEFF}
.sixth-forms-page .jp-pv-royal {--wash-a:rgba(38,60,145,.24);--wash-b:rgba(38,60,145,.12);
           --wash-1:#E7E9F7;--wash-2:#F1F3FB;--wash-3:#FCFDFF}
.sixth-forms-page .jp-pv-coral {--wash-a:rgba(236,99,75,.20);--wash-b:rgba(236,99,75,.09);
           --wash-1:#FCEBE5;--wash-2:#FEF5F1;--wash-3:#FFFDFC}
.sixth-forms-page .jp-pv-amber {--wash-a:rgba(254,200,75,.34);--wash-b:rgba(236,99,75,.08);
           --wash-1:#FDF5E2;--wash-2:#FEFAEF;--wash-3:#FFFEFB}
.sixth-forms-page .jp-pv::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(15,26,79,.055) 1px,transparent 1px);
  background-size:16px 16px;opacity:.5}
.sixth-forms-page .jp-pv-in{position:absolute;inset:0;font-size:1.72cqw;font-family:var(--font-sans);color:var(--p-soft);
       display:flex;line-height:1.45;z-index:1}

/* window mock ------------------------------------------------------------- */
.sixth-forms-page .jp-win{background:var(--p-paper);border-radius:1.25em;
     box-shadow:0 2.6em 5.2em rgba(15,26,79,.24),0 .6em 1.4em rgba(15,26,79,.10);
     overflow:hidden;display:flex;flex-direction:column;min-height:0}
.sixth-forms-page .jp-win-bleed{margin:3.2em 3.2em 0;flex:1;align-self:stretch;border-radius:1.25em 1.25em 0 0}
.sixth-forms-page .jp-chrome{display:flex;align-items:center;gap:.8em;padding:.75em 1.1em;background:var(--p-bg2);
        border-bottom:1px solid var(--p-rule);flex:none}
.sixth-forms-page .jp-dots{display:flex;gap:.38em}
.sixth-forms-page .jp-dots i{width:.62em;height:.62em;border-radius:50%;background:#DDE2EE;display:block}
.sixth-forms-page .jp-dots i:first-child{background:#E8CFC9}
.sixth-forms-page .jp-crumb{font-family:var(--font-label);font-size:.9em;letter-spacing:.02em;color:var(--p-mute)}
.sixth-forms-page .jp-crumb b{color:var(--p-royal);font-weight:500}
.sixth-forms-page .jp-chrome .jp-who{margin-left:auto;width:1.5em;height:1.5em;border-radius:50%;
             background:linear-gradient(140deg,var(--color-info-blue),var(--color-ink-royal));color:#fff;font-size:.72em;
             font-weight:700;display:grid;place-items:center;letter-spacing:.02em}
.sixth-forms-page .jp-fcard{position:absolute;background:var(--p-paper);border-radius:1em;padding:1em 1.1em;
        display:flex;flex-direction:column;gap:.7em;z-index:2}
.sixth-forms-page .jp-fcard-lg{box-shadow:0 2.6em 5.2em rgba(15,26,79,.19),0 .6em 1.4em rgba(15,26,79,.08);z-index:2}
.sixth-forms-page .jp-fcard-md{box-shadow:0 2em 4em rgba(15,26,79,.22),0 .5em 1.2em rgba(15,26,79,.11);z-index:3}
.sixth-forms-page .jp-fcard-sm{box-shadow:0 1.4em 2.8em rgba(15,26,79,.18),0 .4em .9em rgba(15,26,79,.08);z-index:4}
.sixth-forms-page .jp-body{padding:1.15em 1.3em;display:flex;flex-direction:column;gap:.95em;flex:1;min-height:0}

/* phone mock -------------------------------------------------------------- */
.sixth-forms-page .jp-phone-wrap{flex:1;display:flex;justify-content:center;align-items:stretch;padding:3.2em 0 0}
.sixth-forms-page .jp-phone{width:26.5em;background:var(--p-paper);border-radius:2.4em 2.4em 0 0;
       box-shadow:0 2.8em 5.6em rgba(15,26,79,.24),0 .7em 1.6em rgba(15,26,79,.10);
       padding:.75em .75em 0;display:flex;flex-direction:column;overflow:hidden}
.sixth-forms-page .jp-status{display:flex;align-items:center;padding:.35em .9em .55em;font-family:var(--font-label);
        font-size:.82em;font-weight:500;color:var(--p-ink);letter-spacing:.02em}
.sixth-forms-page .jp-status .jp-sg{margin-left:auto;display:flex;align-items:center;gap:.4em;color:var(--p-ink)}
.sixth-forms-page .jp-status i{width:1.05em;height:1.05em}
.sixth-forms-page .jp-screen{padding:.4em 1.05em 0;display:flex;flex-direction:column;gap:.8em;flex:1;min-height:0}

/* shared atoms ------------------------------------------------------------ */
.sixth-forms-page .jp-lbl{font-family:var(--font-label);font-size:.88em;font-weight:500;letter-spacing:.1em;
     text-transform:uppercase;color:var(--p-mute)}
.sixth-forms-page .jp-lbl-b{color:var(--p-blue)}
.sixth-forms-page .jp-ttl{font-family:var(--font-heading);font-weight:700;color:var(--p-ink);letter-spacing:-.01em}
.sixth-forms-page .jp-t13{font-size:1.32em;line-height:1.25}
.sixth-forms-page .jp-t11{font-size:1.14em;line-height:1.3}
.sixth-forms-page .jp-sm{font-size:1.02em}
.sixth-forms-page .jp-xs{font-size:.92em;color:var(--p-mute)}
.sixth-forms-page .jp-mono{font-family:var(--font-label);letter-spacing:.01em}
.sixth-forms-page .jp-row{display:flex;align-items:center;gap:.7em}
.sixth-forms-page .jp-between{display:flex;align-items:center;justify-content:space-between;gap:.7em}
.sixth-forms-page .jp-grow{flex:1;min-width:0}

.sixth-forms-page .jp-pill{font-family:var(--font-label);font-size:.82em;font-weight:500;letter-spacing:.06em;
      text-transform:uppercase;border-radius:999px;padding:.32em .7em;white-space:nowrap;
      display:inline-flex;align-items:center;gap:.35em}
.sixth-forms-page .jp-pill-ok{background:var(--p-green-soft);color:var(--p-green)}
.sixth-forms-page .jp-pill-new{background:var(--p-blue-soft);color:var(--p-royal)}
.sixth-forms-page .jp-pill-warn{background:var(--p-amber-soft);color:var(--p-amber)}
.sixth-forms-page .jp-pill-risk{background:var(--p-coral-soft);color:var(--p-coral)}
.sixth-forms-page .jp-pill-line{background:none;border:1px solid var(--p-rule);color:var(--p-mute)}

.sixth-forms-page .jp-dot{width:.5em;height:.5em;border-radius:50%;background:var(--p-green);flex:none;
     box-shadow:0 0 0 .22em rgba(19,122,53,.16)}

.sixth-forms-page .jp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;
     font-family:var(--font-heading);font-weight:600;font-size:1.02em;color:#fff;
     background:linear-gradient(180deg,var(--p-blue),var(--p-blue-d));
     border-radius:.65em;padding:.62em 1.05em;
     box-shadow:0 .5em 1.1em rgba(52,120,247,.30)}
.sixth-forms-page .jp-btn i{width:1em;height:1em}
.sixth-forms-page .jp-btn-block{width:100%}

.sixth-forms-page .jp-av{width:2.05em;height:2.05em;border-radius:.62em;flex:none;display:grid;place-items:center;
    font-family:var(--font-heading);font-size:.92em;font-weight:700;letter-spacing:.02em;color:#fff}
.sixth-forms-page .jp-av-1{background:linear-gradient(145deg,var(--color-info-blue),#2450B8)}
.sixth-forms-page .jp-av-2{background:linear-gradient(145deg,#5B93FF,#2C6BE0)}
.sixth-forms-page .jp-av-3{background:linear-gradient(145deg,var(--color-ink-royal),#16265E)}
.sixth-forms-page .jp-av-4{background:linear-gradient(145deg,#6E8BD6,#3A55A8)}

.sixth-forms-page .jp-tile{width:2.3em;height:2.3em;border-radius:.62em;display:grid;place-items:center;flex:none;
      background:var(--p-blue-wash);color:var(--p-blue)}
.sixth-forms-page .jp-tile i{width:1.15em;height:1.15em}

.sixth-forms-page .jp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em}
.sixth-forms-page .jp-stat{background:var(--p-bg2);border:1px solid var(--p-rule);border-radius:.7em;padding:.62em .75em}
.sixth-forms-page .jp-stat b{display:block;font-family:var(--font-heading);font-size:1.5em;font-weight:700;color:var(--p-ink);
        line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sixth-forms-page .jp-stat span{font-family:var(--font-label);font-size:.8em;letter-spacing:.07em;text-transform:uppercase;color:var(--p-mute)}

.sixth-forms-page .jp-emma{display:flex;align-items:center;gap:.6em;background:var(--p-blue-wash);
      border:1px solid rgba(52,120,247,.16);border-radius:.7em;padding:.6em .75em;
      font-size:.98em;color:var(--p-royal)}
.sixth-forms-page .jp-emma img{width:1.35em;height:1.35em;flex:none}

.sixth-forms-page .jp-lrow{display:flex;align-items:center;gap:.75em;padding:.62em .2em;border-top:1px solid var(--p-rule)}
.sixth-forms-page .jp-lrow:first-of-type{border-top:0}
.sixth-forms-page .jp-lrow-hl{background:linear-gradient(90deg,rgba(217,73,47,.055),transparent 62%);
         box-shadow:inset .2em 0 0 var(--p-coral);border-radius:.3em;padding-left:.75em}
.sixth-forms-page .jp-lrow-wn{background:linear-gradient(90deg,rgba(138,90,0,.055),transparent 62%);
         box-shadow:inset .2em 0 0 #E8A33D;border-radius:.3em;padding-left:.75em}
.sixth-forms-page .jp-fade{position:absolute;left:0;right:0;bottom:0;height:4.2em;pointer-events:none;
      background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 78%)}
.sixth-forms-page .jp-clip{position:relative;flex:1;min-height:0;overflow:hidden}

.sixth-forms-page i.jp-ic{flex:none;line-height:1}



.sixth-forms-page .jp-pv-in p{margin:0}
.sixth-forms-page .jp-mute{color:var(--p-mute)}.jp-blue{color:var(--p-blue)}.jp-coral{color:var(--p-coral)}.jp-ink{color:var(--p-ink)}.jp-royal{color:var(--p-royal)}
.sixth-forms-page .jp-g4{gap:.4em}.jp-nw{white-space:nowrap}.jp-mt{margin-top:.3em}.jp-col-g{display:flex;flex-direction:column;gap:.75em}
.sixth-forms-page .jp-a1{height:1.45em;width:auto;display:block}
.sixth-forms-page .jp-btn-a1{background:linear-gradient(180deg,#3B8BD9,#2C7ECD);box-shadow:0 .5em 1.1em rgba(44,126,205,.32)}

/* 01 search */
.sixth-forms-page .jp-srch{display:flex;align-items:center;gap:.55em;background:#fff;border:1px solid var(--p-rule);
      border-radius:.7em;padding:.6em .75em;font-size:1.02em;color:var(--p-ink)}
.sixth-forms-page .jp-srch i{color:var(--p-mute)}
.sixth-forms-page .jp-chips{display:flex;gap:.35em}
.sixth-forms-page .jp-chip{font-family:var(--font-label);font-size:.82em;letter-spacing:.02em;border:1px solid var(--p-rule);
      border-radius:999px;padding:.28em .6em;color:var(--p-soft);white-space:nowrap;background:#fff}
.sixth-forms-page .jp-chip-on{background:var(--p-royal);border-color:var(--p-royal);color:#fff}
.sixth-forms-page .jp-res{border:1px solid var(--p-rule);border-radius:.85em;padding:.7em .75em;background:#fff;
     display:flex;flex-direction:column;gap:.55em}
.sixth-forms-page .jp-res-on{border:1.5px solid var(--p-blue);background:linear-gradient(180deg,#F6FAFF,#fff);
        box-shadow:0 .7em 1.7em rgba(52,120,247,.15)}
.sixth-forms-page .jp-crest{width:2.4em;height:2.4em;border-radius:.6em;flex:none;display:grid;place-items:center;
       font-family:var(--font-heading);font-weight:800;font-size:.92em;color:#fff;letter-spacing:.02em}

/* 02 meter */
.sixth-forms-page .jp-card-s{background:var(--p-bg2);border:1px solid var(--p-rule);border-radius:.8em;padding:.85em .9em .95em}
.sixth-forms-page .jp-bar-t{display:block;height:.5em;border-radius:999px;background:#E4E9F4;overflow:hidden;margin:.6em 0 .5em}
.sixth-forms-page .jp-bar-f{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2C7ECD,#5B93FF)}
.sixth-forms-page .jp-w86{width:86%}.jp-w100{width:100%}.jp-w63{width:63%}.jp-w42{width:42%}.jp-w32{width:32%}.jp-w26{width:26%}
.sixth-forms-page .jp-w70{width:70%}.jp-w38{width:38%}.jp-w34{width:34%}.jp-w30{width:30%}

/* 03 toolbar */
.sixth-forms-page .jp-tbar{display:flex;align-items:center;gap:.5em}
.sixth-forms-page .jp-srch-s{display:flex;align-items:center;gap:.45em;background:var(--p-bg2);border:1px solid var(--p-rule);
        border-radius:.55em;padding:.4em .6em;font-size:.92em;color:var(--p-mute);flex:1;max-width:13em}
.sixth-forms-page .jp-thead{display:flex;gap:.75em;padding:.3em .2em;border-bottom:1px solid var(--p-rule)}
.sixth-forms-page .jp-thead span:last-child{margin-left:auto}

/* 04 wizard */
.sixth-forms-page .jp-seg5{display:flex;gap:.3em}
.sixth-forms-page .jp-seg5 span{height:.38em;flex:1;border-radius:999px;background:#E4E9F4}
.sixth-forms-page .jp-seg5 .jp-on{background:var(--p-blue)}
.sixth-forms-page .jp-opt{display:flex;align-items:center;gap:.6em;border:1px solid var(--p-rule);border-radius:.7em;
     padding:.58em .7em;background:#fff}
.sixth-forms-page .jp-opt-on{border:1.5px solid var(--p-blue);background:#F5F9FF}
.sixth-forms-page .jp-bx{width:1.3em;height:1.3em;border-radius:.4em;border:1.5px solid #CBD3E4;display:grid;
    place-items:center;flex:none;color:transparent}
.sixth-forms-page .jp-opt-on .jp-bx{background:var(--p-blue);border-color:var(--p-blue);color:#fff}
.sixth-forms-page .jp-bx i{font-size:.72em}

/* 05 embargo */
.sixth-forms-page .jp-dark{background:linear-gradient(115deg,#0F1A4F,#22347C);color:#fff;border-radius:.75em;
      padding:.62em .8em;display:flex;align-items:center;gap:.55em}
.sixth-forms-page .jp-dark .jp-lbl{color:rgba(255,255,255,.66)}
.sixth-forms-page .jp-cd{margin-left:auto;font-family:var(--font-label);font-size:1.05em;font-weight:600;letter-spacing:.06em;
    color:#fff;font-variant-numeric:tabular-nums}
.sixth-forms-page .jp-gr{display:flex;gap:.2em}
.sixth-forms-page .jp-gr span{font-family:var(--font-label);font-size:.8em;font-weight:600;color:var(--p-royal);
         background:var(--p-blue-soft);border-radius:.3em;padding:.1em .38em;min-width:1.45em;text-align:center}
.sixth-forms-page .jp-gr .jp-lo{background:var(--p-amber-soft);color:var(--p-amber)}.jp-h64{height:64%}.jp-h38{height:38%}
.sixth-forms-page .jp-fhead{display:flex;flex-direction:column;gap:.15em}
.sixth-forms-page .jp-klist{display:flex;flex-direction:column;gap:.3em}
.sixth-forms-page .jp-klist span{display:flex;align-items:center;gap:.42em;font-size:.86em;color:var(--p-soft)}
.sixth-forms-page .jp-klist i{width:.58em;height:.58em;border-radius:.18em;flex:none}
.sixth-forms-page .jp-klist b{margin-left:auto;font-family:var(--font-label);font-size:.95em;font-weight:600;color:var(--p-royal)}
.sixth-forms-page .jp-bignum{font-family:var(--font-heading);font-size:2.7em;font-weight:700;color:var(--p-coral);
        letter-spacing:-.03em;line-height:1}
.sixth-forms-page .jp-minibars{display:flex;gap:.55em;height:10em;align-items:flex-end;margin-top:.15em}
.sixth-forms-page .jp-mb{flex:1;display:flex;flex-direction:column;align-items:center;gap:.28em;height:100%;justify-content:flex-end}
.sixth-forms-page .jp-mb-b{width:100%;border-radius:.3em .3em 0 0}
.sixth-forms-page .jp-mb-last{background:#EAEFF9;border:1px solid #D7E0F1}
.sixth-forms-page .jp-mb-now{background:linear-gradient(180deg,#F08A73,#D9492F)}
.sixth-forms-page .jp-emma-mark{width:1.9em;height:1.9em;flex:none}
.sixth-forms-page .jp-btn-xs{padding:.45em .8em;font-size:.95em;flex:none}
/* the scatter - sized by weight, offset so they overlap a little */
.sixth-forms-page .jp-f6a{left:4.2em;top:3.3em;width:37.3em;z-index:2}
.sixth-forms-page .jp-f6c{left:21.5em;top:11.1em;width:32.4em;z-index:3}
.sixth-forms-page .jp-f6b{left:15.9em;top:14em;width:23.1em;z-index:4}
.sixth-forms-page .jp-f7b{left:4em;top:4.8em;width:18.4em;z-index:3}
.sixth-forms-page .jp-f7a{right:4em;top:7.4em;width:32.4em;z-index:2}
.sixth-forms-page .jp-f7c{left:10em;top:23.6em;width:36em;z-index:4}
.sixth-forms-page .jp-push{margin-top:auto}
.sixth-forms-page .jp-hb{display:flex;flex-direction:column;gap:.95em}
.sixth-forms-page .jp-hb-row{display:flex;align-items:center;gap:.55em}
.sixth-forms-page .jp-hb-n{width:6.9em;font-size:.95em;color:var(--p-ink);white-space:nowrap;overflow:hidden;
      text-overflow:ellipsis;flex:none}
.sixth-forms-page .jp-hb-t{flex:1;height:.72em;background:#EDF1F9;border-radius:999px;overflow:hidden}
.sixth-forms-page .jp-hb-f{display:block;height:100%;border-radius:999px}
.sixth-forms-page .jp-hb-v{font-family:var(--font-label);font-size:.85em;font-weight:600;color:var(--p-royal);width:2.5em;
      text-align:right;flex:none;font-variant-numeric:tabular-nums;margin-right:.1em}
.sixth-forms-page .jp-c1{background:linear-gradient(90deg,#2C7ECD,#4093DE)}
.sixth-forms-page .jp-c2{background:linear-gradient(90deg,var(--color-product-teal),#5ADDCE)}
.sixth-forms-page .jp-c3{background:linear-gradient(90deg,var(--color-product-purple),#A87AEC)}
.sixth-forms-page .jp-c4{background:linear-gradient(90deg,#F0B32E,var(--color-warn-amber))}
.sixth-forms-page .jp-c5{background:linear-gradient(90deg,var(--color-coral-500),#F58267)}
.sixth-forms-page .jp-donut{width:8.4em;height:8.4em;border-radius:50%;position:relative;margin:0 auto;
  background:conic-gradient(#2C7ECD 0 46%,var(--color-product-teal) 46% 70%,var(--color-product-purple) 70% 86%,var(--color-warn-amber) 86% 100%)}
.sixth-forms-page .jp-donut span{position:absolute;inset:1.85em;border-radius:50%;background:#fff;display:grid;
  place-content:center;text-align:center;line-height:1.08}
.sixth-forms-page .jp-donut b{font-family:var(--font-heading);font-size:1.5em;font-weight:700;color:var(--p-ink);letter-spacing:-.02em}
.sixth-forms-page .jp-keys{display:flex;flex-wrap:wrap;gap:.15em .6em;justify-content:center}
.sixth-forms-page .jp-keys-r{justify-content:flex-end;flex-wrap:nowrap}
.sixth-forms-page .jp-keys span{font-size:.82em;color:var(--p-soft);display:inline-flex;align-items:center;gap:.3em;white-space:nowrap}
.sixth-forms-page .jp-keys i{width:.58em;height:.58em;border-radius:.18em;display:inline-block;flex:none}
.sixth-forms-page .jp-spark{width:100%;height:9.6em;display:block}
.sixth-forms-page .jp-spark polyline:nth-of-type(1){stroke:#2C7ECD}
.sixth-forms-page .jp-spark polyline:nth-of-type(2){stroke:var(--color-product-teal)}
.sixth-forms-page .jp-spark polyline:nth-of-type(3){stroke:var(--color-product-purple)}
.sixth-forms-page .jp-spark polyline{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
/* 07 funnel */
.sixth-forms-page .jp-fn{display:flex;flex-direction:column;gap:.8em}
.sixth-forms-page .jp-fn-row{display:flex;align-items:center;gap:.55em}
.sixth-forms-page .jp-fn-l{width:5.5em;font-family:var(--font-label);font-size:.85em;letter-spacing:.04em;color:var(--p-soft);flex:none}
.sixth-forms-page .jp-fn-t{flex:1;display:flex;justify-content:center}
.sixth-forms-page .jp-fn-b{height:2em;border-radius:.36em}
.sixth-forms-page .jp-fn-c{font-family:var(--font-label);font-size:.88em;font-weight:600;color:var(--p-ink);width:3em;
      text-align:right;flex:none;font-variant-numeric:tabular-nums}
.sixth-forms-page .jp-dl{font-family:var(--font-label);font-size:.78em;font-weight:600;border-radius:.3em;padding:.14em .3em;
    width:3.2em;text-align:center;flex:none}
.sixth-forms-page .jp-dl-up{background:#DEF1E4;color:#137A35}
.sixth-forms-page .jp-dl-dn{background:#FCE5DF;color:#D9492F}
.sixth-forms-page .jp-dl-na{visibility:hidden}
.sixth-forms-page .jp-f1{background:linear-gradient(90deg,var(--color-ink-royal),#33499F)}
.sixth-forms-page .jp-f2{background:linear-gradient(90deg,#2C7ECD,#3E8FDD)}
.sixth-forms-page .jp-f3{background:linear-gradient(90deg,var(--color-product-sky),#4AB7F0)}
.sixth-forms-page .jp-f4{background:linear-gradient(90deg,var(--color-product-teal),#58DDCE)}
.sixth-forms-page .jp-f5{background:linear-gradient(90deg,var(--color-product-green),#67D232)}

/* Folded-in inline styles (the block carries no `style=` attribute). */
.sixth-forms-page .jp-block  { display: block; }
.sixth-forms-page .jp-center { justify-content: center; }
.sixth-forms-page .jp-auto   { margin-left: auto; }
.sixth-forms-page .jp-indent { padding-left: 2.5em; }
.sixth-forms-page .jp-foot   { gap: .55em; padding-bottom: 1em; }
/* Donut key swatches - same four hues as the conic, in order. */
.sixth-forms-page .jp-k1 { background: #2C7ECD; }
.sixth-forms-page .jp-k2 { background: var(--color-product-teal); }
.sixth-forms-page .jp-k3 { background: var(--color-product-purple); }
.sixth-forms-page .jp-k4 { background: var(--color-warn-amber); }


/* ════════════════════════════════════════════════════════════════════════════════════════════
 * JOURNEY STAGE PREVIEWS — THE OPENING BUILD                                      2026-09-17
 * Each stage builds itself from a blank ground: the shell arrives, the furniture fills, then
 * the data draws itself — bars grow, the query types, the donut sweeps, the sparkline is wiped
 * in. One accent beat per stage lands last.
 *
 *   WHEN IT RUNS  `tabs_controller` hides an inactive panel with the `hidden` class AND the
 *                 `hidden` attribute, so `display:none`, so a CSS animation inside it RESTARTS
 *                 from 0% every time that panel is re-displayed. That is the whole of "plays
 *                 when you open a tab, replays when you come back" — no JavaScript, and there
 *                 is no event to listen for (the controller dispatches none).
 *   FIRST PLAY    gated on `.reveal-in`, which the journey's tabs root gains when the section
 *                 scrolls into view (it is itself a `data-reveal-target="item"`). Reveal is
 *                 one-shot, so scrolling away and back does NOT replay — only a tab change does.
 *   NOTHING HIDES the from-state exists only as an animation's backwards fill, never as a
 *                 static rule, and the whole block sits inside a `no-preference` query — so
 *                 under reduced motion these rules do not exist and every panel renders
 *                 finished. That is why there is no `!important` here and nothing to neutralise.
 *   ONE KNOB      `--spd` scales every duration and delay; `--step` is the 80ms stagger grid and
 *                 `--e` the design system's own cubic-bezier(.2,.8,.2,1).
 *   FROM-ONLY     keyframes omit their `to` wherever the value lives in another rule: the
 *                 implicit 100% keyframe reads the element's own value, so `.jp-w63` and friends
 *                 stay the single source of truth and "finished" is identical either way.
 *   THE NUMBERS   are the one part CSS cannot do; they live in `/r/56` and restart from the same
 *                 signal (see its "journey previews" section).
 * ════════════════════════════════════════════════════════════════════════════════════════════ */

/* ONE advancing boundary, `--p` — the donut is drawn by a hand sweeping round, not by
 * four wedges widening at once. It is an OVERLAY THAT RETREATS rather than a rewritten
 * gradient: the donut's own conic is left exactly as authored, and at --jp-p:100% the
 * overlay is fully transparent, so the resting pixel is the original one. (Rewriting the
 * gradient with min() was measured first and moved 2069 pixels — a ten-stop conic
 * feathers its seam where an eight-stop one does not.)
 * The at-rule is what makes it interpolate. Without @property support the value would step
 * rather than sweep - the track would sit over the chart for half the duration and then clear -
 * so the degradation is a plain reveal, not a wrong colour. */
@property --jp-p { syntax:'<percentage>'; inherits:false; initial-value:100% }

.sixth-forms-page .jp-pv{ --spd:1; --step:80ms; --e:cubic-bezier(.2,.8,.2,1) }

@media (prefers-reduced-motion: no-preference){

/* ── the vocabulary ──────────────────────────────────────────────────────────── */
@keyframes jp-rise  { from{ opacity:0; transform:translateY(6.2cqw) } }
@keyframes jp-in    { from{ opacity:0; transform:translateY(1.45cqw) } }
@keyframes jp-land  { from{ opacity:0; transform:translate(var(--dx,0),var(--dy,0)) scale(.965) } }
@keyframes jp-pop   { from{ opacity:0; transform:scale(.86) } 68%{ opacity:1; transform:scale(1.04) } }
@keyframes jp-grow-w{ from{ width:0 } }
@keyframes jp-grow-h{ from{ height:0 } }
@keyframes jp-scale-x{ from{ transform:scaleX(0) } }
/* The sparkline is wiped, not dashed. With `vector-effect: non-scaling-stroke` the dash
 * pattern is measured in SCREEN space while the geometry is in a non-uniformly scaled
 * user space, so no dasharray - normalised by pathLength or not - covers the whole line:
 * it drew to about 70% and stopped, at rest as well as mid-flight. Measured, both ways.
 * The negative insets keep the reference box clear of the stroke, so the resting state
 * clips nothing at all. */
@keyframes jp-draw  { from{ clip-path:inset(-60% 100% -60% -60%) }
                      to  { clip-path:inset(-60% -12% -60% -60%) } }
@keyframes jp-tick  { from{ stroke-dashoffset:22 } }
/* The cap is the TEXT's own width, measured at runtime into `--jp-q-w` (set by /r/56) - an em constant cannot do
 * this job, because it is only correct for one cut of Inter: the same 9.75em that fitted the
 * webfont here clipped the last glyph by 3.5px against the self-hosted Inter on the live site.
 * The em fallback is deliberately generous, so with no script the caret overshoots slightly
 * rather than the text being cut. It is max-width, not width, so the resting box is still
 * sized by its own content either way. */
@keyframes jp-type  { from{ max-width:0;                   border-right-color:var(--p-blue) }
                      to  { max-width:var(--jp-q-w, 10.6em);  border-right-color:var(--p-blue) } }
@keyframes jp-caret-off { to{ border-right-color:transparent } }
@keyframes jp-dotpulse { 0%,100%{ box-shadow:0 0 0 .22em rgba(19,122,53,.16) }
                         45%{ box-shadow:0 0 0 .62em rgba(19,122,53,.30) } }
@keyframes jp-edge  { from{ box-shadow:inset 0 0 0 var(--p-coral) } }
@keyframes jp-sweep { from{ --jp-p:0%; opacity:1 } 99%{ opacity:1 } to{ --jp-p:100%; opacity:0 } }

/* ── 1 · the shell arrives ───────────────────────────────────────────────────── */
.sixth-forms-page .reveal-in .jp-pv .jp-phone,
.sixth-forms-page .reveal-in .jp-pv .jp-win        { animation:jp-rise calc(680ms*var(--spd)) var(--e) calc(40ms*var(--spd)) both }

.sixth-forms-page .reveal-in .jp-pv .jp-fcard      { animation:jp-land calc(640ms*var(--spd)) var(--e) both }
.sixth-forms-page .reveal-in .jp-pv .jp-f6a        { --dx:-1.9cqw; --dy:-1.2cqw; animation-delay:calc(100ms*var(--spd)) }
.sixth-forms-page .reveal-in .jp-pv .jp-f6c        { --dx:2.6cqw;  --dy:.5cqw;  animation-delay:calc(260ms*var(--spd)) }
.sixth-forms-page .reveal-in .jp-pv .jp-f6b        { --dx:0;      --dy:2.75cqw; animation-delay:calc(420ms*var(--spd)) }
.sixth-forms-page .reveal-in .jp-pv .jp-f7a        { --dx:2.9cqw;  --dy:-.35cqw; animation-delay:calc(100ms*var(--spd)) }
.sixth-forms-page .reveal-in .jp-pv .jp-f7b        { --dx:-2.6cqw; --dy:0;     animation-delay:calc(260ms*var(--spd)) }
.sixth-forms-page .reveal-in .jp-pv .jp-f7c        { --dx:0;      --dy:3.25cqw; animation-delay:calc(940ms*var(--spd)) }

/* ── 2 · the furniture fills ─────────────────────────────────────────────────── */
.sixth-forms-page .reveal-in .jp-pv :is(.jp-screen,.jp-body) > *,
.sixth-forms-page .reveal-in .jp-pv .jp-col-g > .jp-opt,
.sixth-forms-page .reveal-in .jp-pv .jp-clip > .jp-lrow {
  animation:jp-in calc(520ms*var(--spd)) var(--e) both;
  animation-delay:calc((var(--base,420ms) + var(--k,0)*var(--step))*var(--spd));
}
.sixth-forms-page .reveal-in .jp-pv :is(.jp-screen,.jp-body) > *:nth-child(1){ --k:0 }
.sixth-forms-page .reveal-in .jp-pv :is(.jp-screen,.jp-body) > *:nth-child(2){ --k:1 }
.sixth-forms-page .reveal-in .jp-pv :is(.jp-screen,.jp-body) > *:nth-child(3){ --k:2 }
.sixth-forms-page .reveal-in .jp-pv :is(.jp-screen,.jp-body) > *:nth-child(4){ --k:3 }
.sixth-forms-page .reveal-in .jp-pv :is(.jp-screen,.jp-body) > *:nth-child(5){ --k:4 }
.sixth-forms-page .reveal-in .jp-pv :is(.jp-screen,.jp-body) > *:nth-child(6){ --k:5 }
.sixth-forms-page .reveal-in .jp-pv :is(.jp-screen,.jp-body) > *:nth-child(7){ --k:6 }
.sixth-forms-page .reveal-in .jp-pv :is(.jp-screen,.jp-body) > *:nth-child(n+8){ --k:7 }

/* the clipped list is a container, not a row — its rows carry the motion instead,
 * continuing the stagger from the slot the list itself occupies. */
.sixth-forms-page .reveal-in .jp-pv .jp-clip{ animation-name:none }
.sixth-forms-page .reveal-in .jp-pv .jp-clip > .jp-lrow{ --base:580ms }
.sixth-forms-page .reveal-in .jp-pv .jp-clip > .jp-lrow:nth-of-type(1){ --k:0 }
.sixth-forms-page .reveal-in .jp-pv .jp-clip > .jp-lrow:nth-of-type(2){ --k:1 }
.sixth-forms-page .reveal-in .jp-pv .jp-clip > .jp-lrow:nth-of-type(3){ --k:2 }
.sixth-forms-page .reveal-in .jp-pv .jp-clip > .jp-lrow:nth-of-type(4){ --k:3 }

/* 04's option rows stagger inside their slot rather than arriving as one block */
.sixth-forms-page .reveal-in .jp-pv .jp-col-g:not(.jp-push){ animation-name:none }
.sixth-forms-page .reveal-in .jp-pv .jp-col-g > .jp-opt{ --base:680ms }
.sixth-forms-page .reveal-in .jp-pv .jp-col-g > .jp-opt:nth-child(1){ --k:0 }
.sixth-forms-page .reveal-in .jp-pv .jp-col-g > .jp-opt:nth-child(2){ --k:1 }
.sixth-forms-page .reveal-in .jp-pv .jp-col-g > .jp-opt:nth-child(3){ --k:2 }
.sixth-forms-page .reveal-in .jp-pv .jp-col-g > .jp-opt:nth-child(4){ --k:3 }

/* small things that pop rather than rise */
.sixth-forms-page .reveal-in .jp-pv .jp-chips .jp-chip,
.sixth-forms-page .reveal-in .jp-pv .jp-tbar .jp-pill-new,
.sixth-forms-page .reveal-in .jp-pv .jp-gr span,
.sixth-forms-page .reveal-in .jp-pv .jp-dl:not(.jp-dl-na){
  animation:jp-pop calc(420ms*var(--spd)) var(--e) both;
  animation-delay:calc((var(--base,700ms) + var(--k,0)*50ms)*var(--spd));
}
.sixth-forms-page .reveal-in .jp-pv .jp-chips{ --base:1580ms }
.sixth-forms-page .reveal-in .jp-pv .jp-chips .jp-chip:nth-child(1){ --k:0 }
.sixth-forms-page .reveal-in .jp-pv .jp-chips .jp-chip:nth-child(2){ --k:1 }
.sixth-forms-page .reveal-in .jp-pv .jp-chips .jp-chip:nth-child(3){ --k:2 }
.sixth-forms-page .reveal-in .jp-pv .jp-tbar .jp-pill-new{ --base:640ms }
.sixth-forms-page .reveal-in .jp-pv .jp-gr span:nth-child(1){ --k:0 }
.sixth-forms-page .reveal-in .jp-pv .jp-gr span:nth-child(2){ --k:1 }
.sixth-forms-page .reveal-in .jp-pv .jp-gr span:nth-child(3){ --k:2 }
.sixth-forms-page .reveal-in .jp-pv .jp-gr span:nth-child(4){ --k:3 }
.sixth-forms-page .reveal-in .jp-pv .jp-clip > .jp-lrow:nth-of-type(1) .jp-gr span{ --base:820ms }
.sixth-forms-page .reveal-in .jp-pv .jp-clip > .jp-lrow:nth-of-type(2) .jp-gr span{ --base:900ms }
.sixth-forms-page .reveal-in .jp-pv .jp-clip > .jp-lrow:nth-of-type(3) .jp-gr span{ --base:980ms }

/* ── 3 · the data draws itself ───────────────────────────────────────────────── */

/* 02 · "172 / 200" - lock the digit box so `/ 200` does not shuffle while it counts.
   IBM Plex Mono, so 3ch is exactly the finished width and the resting layout is unmoved. */
.sixth-forms-page .reveal-in .jp-pv .jp-mono.jp-ink b{ display:inline-block; min-width:3ch; text-align:right }

/* 02 · capacity meter */
.sixth-forms-page .reveal-in .jp-pv .jp-bar-f{ animation:jp-grow-w calc(940ms*var(--spd)) var(--e) calc(860ms*var(--spd)) both }

/* 04 · the three filled progress segments, left to right */
.sixth-forms-page .reveal-in .jp-pv .jp-seg5 .jp-on{ transform-origin:left center;
  animation:jp-scale-x calc(340ms*var(--spd)) var(--e) both;
  animation-delay:calc((560ms + var(--k,0)*140ms)*var(--spd)) }
.sixth-forms-page .reveal-in .jp-pv .jp-seg5 .jp-on:nth-child(1){ --k:0 }
.sixth-forms-page .reveal-in .jp-pv .jp-seg5 .jp-on:nth-child(2){ --k:1 }
.sixth-forms-page .reveal-in .jp-pv .jp-seg5 .jp-on:nth-child(3){ --k:2 }

/* 04 · the two ticks draw */
.sixth-forms-page .reveal-in .jp-pv .jp-opt-on .jp-bx i{ stroke-dasharray:22;
  animation:jp-tick calc(360ms*var(--spd)) var(--e) both;
  animation-delay:calc((1020ms + var(--k,0)*var(--step))*var(--spd)) }
.sixth-forms-page .reveal-in .jp-pv .jp-col-g > .jp-opt:nth-child(2) .jp-bx i{ --k:1 }

/* 06 · competitor bars */
.sixth-forms-page .reveal-in .jp-pv .jp-hb-f{ animation:jp-grow-w calc(760ms*var(--spd)) var(--e) both;
  animation-delay:calc((560ms + var(--k,0)*var(--step))*var(--spd)) }
.sixth-forms-page .reveal-in .jp-pv .jp-hb-row:nth-child(1) .jp-hb-f{ --k:0 }
.sixth-forms-page .reveal-in .jp-pv .jp-hb-row:nth-child(2) .jp-hb-f{ --k:1 }
.sixth-forms-page .reveal-in .jp-pv .jp-hb-row:nth-child(3) .jp-hb-f{ --k:2 }
.sixth-forms-page .reveal-in .jp-pv .jp-hb-row:nth-child(4) .jp-hb-f{ --k:3 }
.sixth-forms-page .reveal-in .jp-pv .jp-hb-row:nth-child(5) .jp-hb-f{ --k:4 }

/* 06 · the sparkline draws, one stroke at a time */
.sixth-forms-page .reveal-in .jp-pv .jp-spark polyline{
  animation:jp-draw calc(900ms*var(--spd)) var(--e) both;
  animation-delay:calc((640ms + var(--k,0)*120ms)*var(--spd)) }
.sixth-forms-page .reveal-in .jp-pv .jp-spark polyline:nth-of-type(1){ --k:0 }
.sixth-forms-page .reveal-in .jp-pv .jp-spark polyline:nth-of-type(2){ --k:1 }
.sixth-forms-page .reveal-in .jp-pv .jp-spark polyline:nth-of-type(3){ --k:2 }

/* 06 · the donut sweeps — the track retreats clockwise off the finished chart */
.sixth-forms-page .reveal-in .jp-pv .jp-donut::before{
  content:""; position:absolute; inset:0; border-radius:50%; z-index:0; opacity:0;
  background:conic-gradient(#0000 0 var(--jp-p), #EDF1F9 var(--jp-p) 100%);
  animation:jp-sweep calc(1020ms*var(--spd)) var(--e) calc(700ms*var(--spd)) both }
/* it ends at opacity 0 rather than merely transparent: a second border-radius:50% clip
   over the same circle re-antialiases the whole ring, which measured as 2069 changed
   pixels even with nothing painted in it. */

/* 07 · five funnel bars grow from the centre */
.sixth-forms-page .reveal-in .jp-pv .jp-fn-b{ animation:jp-grow-w calc(700ms*var(--spd)) var(--e) both;
  animation-delay:calc((520ms + var(--k,0)*var(--step))*var(--spd)) }
.sixth-forms-page .reveal-in .jp-pv .jp-fn-row:nth-child(1) .jp-fn-b{ --k:0 }
.sixth-forms-page .reveal-in .jp-pv .jp-fn-row:nth-child(2) .jp-fn-b{ --k:1 }
.sixth-forms-page .reveal-in .jp-pv .jp-fn-row:nth-child(3) .jp-fn-b{ --k:2 }
.sixth-forms-page .reveal-in .jp-pv .jp-fn-row:nth-child(4) .jp-fn-b{ --k:3 }
.sixth-forms-page .reveal-in .jp-pv .jp-fn-row:nth-child(5) .jp-fn-b{ --k:4 }
.sixth-forms-page .reveal-in .jp-pv .jp-fn-row:nth-child(1) .jp-dl{ --base:900ms }
.sixth-forms-page .reveal-in .jp-pv .jp-fn-row:nth-child(2) .jp-dl{ --base:980ms }
.sixth-forms-page .reveal-in .jp-pv .jp-fn-row:nth-child(3) .jp-dl{ --base:1060ms }
.sixth-forms-page .reveal-in .jp-pv .jp-fn-row:nth-child(4) .jp-dl{ --base:1140ms }
.sixth-forms-page .reveal-in .jp-pv .jp-fn-row:nth-child(5) .jp-dl{ --base:1220ms }

/* 07 · the two mini bars grow up */
.sixth-forms-page .reveal-in .jp-pv .jp-mb-b{ animation:jp-grow-h calc(620ms*var(--spd)) var(--e) both;
  animation-delay:calc((760ms + var(--k,0)*120ms)*var(--spd)) }
.sixth-forms-page .reveal-in .jp-pv .jp-mb:nth-child(2) .jp-mb-b{ --k:1 }

/* ── 4 · the accent beat ─────────────────────────────────────────────────────── */

/* 01 · the query types itself, then the primary action lands */
.sixth-forms-page .reveal-in .jp-pv .jp-q{ display:block; overflow:hidden; white-space:nowrap;
  /* content-box so the cap below is the TEXT's width: under the inherited border-box the caret's
     own border ate into it and clipped the last glyph by about a pixel. */
  box-sizing:content-box; border-right:.1em solid transparent;
  animation:jp-type calc(760ms*var(--spd)) steps(20,end) calc(880ms*var(--spd)) both,
            jp-caret-off calc(1ms*var(--spd)) linear calc(1700ms*var(--spd)) forwards }
.sixth-forms-page .reveal-in .jp-pv .jp-srch{ animation:jp-in calc(520ms*var(--spd)) var(--e) calc(500ms*var(--spd)) both }
.sixth-forms-page .reveal-in .jp-pv .jp-btn-a1{ animation:jp-pop calc(460ms*var(--spd)) var(--e) calc(1600ms*var(--spd)) both }

/* 02 · the live dot pulses twice, once the meter has landed */
.sixth-forms-page .reveal-in .jp-pv .jp-pill-ok .jp-dot{ animation:jp-dotpulse calc(900ms*var(--spd)) var(--e) calc(1700ms*var(--spd)) both }

/* 03 · the at-risk edge wipes in, then its pill pops */
.sixth-forms-page .reveal-in .jp-pv .jp-clip > .jp-lrow.jp-lrow-hl{
  animation:jp-in calc(520ms*var(--spd)) var(--e) calc((var(--base,420ms) + var(--k,0)*var(--step))*var(--spd)) both,
            jp-edge calc(480ms*var(--spd)) var(--e) calc(1040ms*var(--spd)) both }
.sixth-forms-page .reveal-in .jp-pv .jp-lrow-hl .jp-pill-risk{ animation:jp-pop calc(420ms*var(--spd)) var(--e) calc(1280ms*var(--spd)) both }

/* 05 · the embargo banner lands with a little more weight than the rows above it */
.sixth-forms-page .reveal-in .jp-pv .jp-dark{ animation:jp-land calc(600ms*var(--spd)) var(--e) calc(440ms*var(--spd)) both;
                   --dy:1.2cqw }
}