/* Admissions+ for Secondary Schools — page CSS
 * ============================================================================================
 * GOAL: a FAITHFUL (1:1) reproduction of the reference
 *   "Admissions Plus for Secondary Schools.dc.html"
 * without its 628 inline styles. Every value below was measured off the rendered reference,
 * not guessed.
 *
 * STRATEGY, and the reason for it:
 *   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. The alternative
 *   (bespoke classes everywhere) would reproduce the reference and lose the design system.
 *
 * Every rule is scoped under `.secondary-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 (measured, 80 package custom properties):
 *   IDENTICAL, so we use ours: the whole ink scale (#0F1A4F/#263C91/#4D5B7F/#8893B0), coral
 *   500/600/700, accent-coral, info-blue, light-blue, ok-green, bad-coral, warn-amber, paper,
 *   page-bg, page-bg-soft, every gradient, the 72/56/40/24/20 type scale, radii 8/16/24/32/999,
 *   shadow-card, shadow-mock, shadow-lift, shadow-focus, and #0B1023 (our dark-band).
 *   Also exact: shadow-soft, shadow-deep, shadow-dark — 1a took them from this package.
 *
 *   DIFFERENT, so declared here (owner's call: keep the reference's colours):
 *     ADOPTED OUR TOKEN (2026-08-14, owner decision): the hairline is now var(--color-rule)
 *     #E6E8EF everywhere. The reference's #ECEEF3 is 6/255 lighter -- imperceptible, and the
 *     package is not unanimous anyway (Demos, Events and Webinars already use #E6E8EF, and the
 *     three legal pages have no hairline at all), so it did not earn a second token.
 *     #9AA6C2  body copy ON DARK       (decision 15 maps this to ink-mute)
 *     #C9D1E6  list/bright copy ON DARK
 *     #5C688A  muted copy ON DARK
 *   Two shadows have no token: 0 20px 60px /.07 and 0 20px 50px /.08.
 *
 *   GEOMETRY: reference container is max-width 1200px with a 24px section gutter; our DS is
 *   1224px / 32px. Overridden here only (owner's call) — changing .page-container would
 *   re-render all five live pages, which belongs to step 4's bundled visual-defaults deploy.
 * ============================================================================================ */

.secondary-page {
  /* reference-only values, all measured */
  --dc-on-dark-body: var(--color-on-dark-body);    /* body copy on the dark band/panels */
  --dc-on-dark-bright: var(--color-on-dark-bright);  /* list items on dark */
  --dc-on-dark-mute: var(--color-on-dark-faint);    /* captions on dark */
  --dc-shadow-panel: 0 20px 60px rgba(15, 26, 79, 0.07);
  --dc-shadow-chat: 0 20px 50px rgba(15, 26, 79, 0.08);

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

/* Journey pins from its top edge. The generic stack motion aligns a taller pin's bottom edge by
   assigning a negative top; this page explicitly wants the journey itself fixed to the top. */
.secondary-page #journey[data-pin] { top: 0; }

/* ── 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 ───────────────────────────── */
/* Not a scale — these are the reference's own values, section by section, so the DS padding
   modifiers cannot express them. `dc-py-<top>-<bottom>` is deliberately literal: when step 3
   decides what to normalise, each one maps to a DS step or explains why it should not. */
.secondary-page .dc-py-128-72 { padding-bottom: 72px; }
.secondary-page .dc-py-44-48  { padding-top: 44px;  padding-bottom: 48px; }
.secondary-page .dc-py-48-64  { padding-top: 48px;  padding-bottom: 64px; }
.secondary-page .dc-py-0-64   { padding-top: 0;     padding-bottom: 64px; }
.secondary-page .dc-py-104-44 { padding-top: 104px; padding-bottom: 44px; }
.secondary-page .dc-py-0-96   { padding-top: 0;     padding-bottom: 96px; }
.secondary-page .dc-py-96     { padding-top: 96px;  padding-bottom: 96px; }
.secondary-page .dc-py-88     { padding-top: 88px;  padding-bottom: 88px; }
.secondary-page .dc-py-0-88   { padding-top: 0;     padding-bottom: 88px; }
.secondary-page .dc-py-104    { padding-top: 104px; padding-bottom: 104px; }
.secondary-page .dc-py-40-96  { padding-top: 40px;  padding-bottom: 96px; }
.secondary-page .dc-py-96-0   { padding-top: 96px;  padding-bottom: 0; }

/* ── Display type: the reference clamps every headline individually ─────────────────────── */
/* 13 distinct steps, named by their maximum so the mapping to a DS step stays obvious.
   Proxima 700 throughout; the tracking is the reference's (-0.04em..-0.02em by size). */
.secondary-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(.secondary-page [class*="dc-t-"]) {
  margin: 0;
  text-wrap: balance;
}

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

/* ── Body copy steps (Inter) ────────────────────────────────────────────────────────────── */
/* NO `margin: 0` here, deliberately (2026-09-18). Preflight already zeroes every element's margin
   in @layer base, so the declaration bought nothing — but page CSS is unlayered and scoped
   (0-2-0), so it silently beat every `mt-*`/`mb-*` utility in the markup. 30 authored gaps on this
   page rendered flush because of it, incl. the `mt-4` under the deadline headline that was patched
   with an inline style on 2026-09-16 and rolled back. See coding-standards §2 Overrides rules 2-3:
   never restate what preflight guarantees, and never write a shorthand for a group you don't own. */
.secondary-page .dc-lede   { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); }
.secondary-page .dc-lede-17{ font-size: 17px; line-height: 1.6;  color: var(--color-ink-soft); }
.secondary-page .dc-body-16{ font-size: 16.5px; line-height: 1.6; }
.secondary-page .dc-body-15{ font-size: 15.5px; line-height: 1.6; color: var(--color-ink-soft); }
.secondary-page .dc-body-14{ font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); }
.secondary-page .dc-body-13{ font-size: 13.5px; line-height: 1.5; }
:where(.secondary-page .dc-body-13) { color: var(--color-ink-soft); }   /* default (§2 rule 5) */
.secondary-page .dc-closer-lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: rgba(255,255,255,0.92); }

/* ── The mono eyebrow (IBM Plex Mono 500) ───────────────────────────────────────────────── */
/* Confirmed against the reference: it really is the mono face, at 12.5px / 0.08em, which is
   exactly our font-label + text-label-l + tracking-label. The hero's is 12px and ink-deep/60 since 2026-09-16 (the reference used ink-mute; changed site-wide so the label holds up over the hero canvas); every other section's is coral. */
.secondary-page .dc-eyebrow {
  font-family: var(--font-label);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-coral-500);
  display: block;
}

.secondary-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: 0.09em; color: color-mix(in srgb, var(--color-ink-deep) 60%, transparent); }
.secondary-page .dc-eyebrow-row  { display: inline-flex; align-items: center; gap: 11px; }

.secondary-page .dc-label-10 {
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}

.secondary-page .dc-label-9 {
  font-family: var(--font-label);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}

/* ── Surfaces ───────────────────────────────────────────────────────────────────────────── */
/* The reference has one full-bleed dark band (Emma) and three inset dark PANELS. Both live
   here for now: 3 uses on one page is not yet the cross-page repetition that earns a DS class
   (decision 21). If a second page family confirms it, .cta-section-panel gets a dark sibling. */
.secondary-page .dc-panel {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: var(--radius-5\.5);
  position: relative;
  overflow: hidden;
}

/* CLAMPS RESTORED - the reference's own, not a flattened snapshot of them.
 *
 * The port had written each of the seven padding clamps below as the single value it resolves to at
 * 1440px. That is faithful at the measured width and wrong at every width under it: the reference
 * shrinks this panel's sides from 72px to 28px as the viewport narrows, and a flat 70px does not.
 *
 * It also explains the 767px/991px padding steps that were swept out of this file earlier - they
 * were crude stand-ins for these clamps, so removing them without restoring the clamps left the page
 * FURTHER from the reference below 992px rather than closer. The clamps are why the reference needs
 * no padding breakpoint at all.
 *
 * Restoring them fixed a 2px error too: this panel's sides were 70px where the clamp maxes at 72px.
 * Nine other pages flattened at least one padding clamp - see STATUS.md. */
.secondary-page .dc-panel-dark  { background: var(--color-dark-band); padding: clamp(56px, 7vw, 96px) clamp(28px, 5vw, 72px); }
.secondary-page .dc-panel-paper { background: var(--color-paper); padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 56px); }
.secondary-page .dc-panel-soft  { background: var(--color-page-bg-soft); padding: clamp(44px, 5.5vw, 72px) clamp(28px, 5vw, 64px); }

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

.secondary-page .dc-card-lift  { border: 0; box-shadow: var(--shadow-soft); }
.secondary-page .dc-card-mock  { border: 0; box-shadow: var(--shadow-deep); border-radius: var(--radius-4\.5); padding: 24px 24px 20px; }
.secondary-page .dc-card-faith { border: 0; box-shadow: var(--shadow-soft); border-radius: var(--radius-5); padding: clamp(28px, 3.2vw, 40px) clamp(26px, 3.4vw, 44px); }

/* The faith card as a blue BAND (2026-09-17). It sits on a bg-paper section, so a white card with
   only a soft shadow read as no card at all. A separate modifier, not a restyle of .dc-card-faith,
   so this file can ship while the published page still has the white card: nothing live matches it
   until the block is published.

   Same capped ramp as the Bursary+ band on /independent: ink-royal -> #3170E5, deliberately short
   of full info-blue (#3478F7), where white is 4.06:1 and every piece of copy in this card - the
   15.5px lede, the 13.5px row copy, the 12.5px eyebrow, the 14.5px row titles - would be under AA.
   At #3170E5 white holds 4.59:1. That cap is also why nothing here is dimmed: no headroom. */
.secondary-page .dc-card-faith-band {
  background-color: var(--color-ink-royal);
  background-image: linear-gradient(120deg, var(--color-ink-royal) 0%, #3170E5 100%);
}
.secondary-page .dc-card-faith-band .dc-t-30f,
.secondary-page .dc-card-faith-band .dc-body-15,
.secondary-page .dc-card-faith-band .dc-faith-title,
.secondary-page .dc-card-faith-band .dc-body-13 { color: #fff; }
/* The eyebrow and the headline highlight keep their coral relationship, tinted for the dark
   surface: coral-500 is 1.25:1 on this blue and would vanish; coral-100 measures 8.3:1 where each
   of them sits, both being in the card's darker left half. */
.secondary-page .dc-card-faith-band .dc-eyebrow,
.secondary-page .dc-card-faith-band .orange-title { color: var(--color-coral-100); }
.secondary-page .dc-card-faith-band .dc-tile-sand {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.secondary-page .dc-card-faith-band .dc-tile-sand > i { color: #fff; }
.secondary-page .dc-card-dark  { background: var(--color-dark-band); border: 0; border-radius: var(--radius-5); padding: clamp(32px, 4vw, 48px); }
.secondary-page .dc-card-flat  { background: var(--color-page-bg); border: 1px solid var(--color-rule); border-radius: var(--radius-4); }

/* On any dark surface the reference switches the copy colours (and our ok-green-bright is its
   tick colour, which is why 1a added that token). */
.secondary-page .dc-panel-dark,
.secondary-page .dc-card-dark,
.secondary-page .dc-band-dark { color: #fff; }

.secondary-page .dc-on-dark-body   { color: var(--dc-on-dark-body); }
.secondary-page .dc-on-dark-bright { color: var(--dc-on-dark-bright); }
.secondary-page .dc-on-dark-mute   { color: var(--dc-on-dark-mute); }

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

.secondary-page .dc-grid-hero     { grid-template-columns: 1.15fr 1fr; gap: 70px; align-items: center; }
.secondary-page .dc-grid-problem  { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: clamp(14px, 2vw, 26px); align-items: stretch; }
.secondary-page .dc-grid-deadline { grid-template-columns: minmax(0, 692px) 340px; gap: 56px; align-items: center; }
.secondary-page .dc-grid-3        { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.secondary-page .dc-grid-cards-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.secondary-page .dc-grid-faith    { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 3.5vw, 48px); align-items: center; }
.secondary-page .dc-grid-emma     { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
.secondary-page .dc-grid-families { grid-template-columns: 1.1fr 1fr; gap: 63px; align-items: center; }
.secondary-page .dc-grid-results  { grid-template-columns: minmax(0, 671px) minmax(0, 1fr); gap: 32px; align-items: stretch; }

.secondary-page .dc-measure-820 { max-width: 820px; }
.secondary-page .dc-measure-780 { max-width: 780px; }
.secondary-page .dc-measure-720 { max-width: 720px; }
.secondary-page .dc-measure-640 { max-width: 640px; }
.secondary-page .dc-measure-620 { max-width: 620px; }
.secondary-page .dc-measure-595 { max-width: 595px; }
.secondary-page .dc-measure-545 { max-width: 545px; }

/* THE ORIGINAL 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, deadline, toolkit, emma, families, results, resources, the
 * problem comparison, the cross-sell cards, every panel's padding — keeps its fixed columns and
 * literal padding all the way down to a phone. So this block used to collapse eleven grids and
 * three panels at a breakpoint (991px) the package never uses; only the two below are real, and
 * they are moved 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 noted above.
 *
 * `dc-grid-3` is `[data-inyeargrid]`; the faith card's right-hand list is a flex column at every
 * width, matching Sixth Forms. The redesigned problem diagram is the one later exception: it
 * stacks at Sixth Forms' existing 800px diagram breakpoint so both illustrated cards stay legible. */
@media (max-width: 900px) {
  /* The 671px max track leaves the stat column ~0 below ~880, crushing .dc-stat-card to 50px
     and running the page 120px wide at 740. One column from here down. */
  .secondary-page .dc-grid-results { grid-template-columns: minmax(0, 1fr); }
  .secondary-page .dc-grid-faith { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .secondary-page .dc-grid-3     { grid-template-columns: minmax(0, 1fr); }
}

/* ── Hero: the illustrative funnel mock ─────────────────────────────────────────────────── */
.secondary-page .dc-funnel { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.secondary-page .dc-funnel-row { display: flex; align-items: center; gap: 14px; }
.secondary-page .dc-funnel-label { flex: none; width: 116px; }
.secondary-page .dc-funnel-track { flex: 1; height: 26px; border-radius: var(--radius-1\.5); background: var(--color-page-bg); overflow: hidden; }
.secondary-page .dc-funnel-fill { display: flex; align-items: center; justify-content: flex-end; height: 100%; border-radius: var(--radius-1\.5); padding-right: 8px;
  font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: #fff; }
.secondary-page .dc-funnel-1 { width: 100%; background: var(--color-ink-deep); }
.secondary-page .dc-funnel-2, .secondary-page .dc-funnel-3 { width: 60%; background: #31406F; }
.secondary-page .dc-funnel-4 { width: 36%; background: #5A6890; }
.secondary-page .dc-funnel-5 { width: 30%; background: var(--color-coral-500); }

/* The live dot is deliberately static — the reference never animates it. */
.secondary-page .dc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok-green); }

/* ── The patchwork problem: broken hand-offs → one pupil record ─────────────────────────── */
/* Page artwork adapted from Sixth Forms and FE Colleges for the secondary transition. Both
   halves share one hierarchy; colour, connectors and the diagrams distinguish the two states. */
.secondary-page .dc-problem-gradient {
  background: linear-gradient(to bottom, transparent 0%, var(--color-page-bg) 20%, var(--color-page-bg) 100%);
}

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

.secondary-page .dc-compare-old {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: rgb(255 255 255 / 0.025);
  border: 1px dashed rgb(255 255 255 / 0.2);
  border-radius: var(--radius-4);
  padding: 26px;
}

.secondary-page .dc-compare-new {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: rgb(236 99 75 / 0.1);
  border: 1px solid rgb(236 99 75 / 0.48);
  border-radius: var(--radius-4);
  padding: 26px;
}

.secondary-page .dc-compare-new::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  top: -96px;
  right: -76px;
  background-color: rgb(236 99 75 / 0.1);
  border-radius: var(--radius-full);
  pointer-events: none;
}

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

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

.secondary-page .dc-compare-state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  color: var(--dc-on-dark-mute);
  background-color: rgb(255 255 255 / 0.06);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
}

.secondary-page .dc-compare-state-live {
  color: var(--color-ok-green-bright);
  background-color: rgb(52 208 127 / 0.12);
}

.secondary-page .dc-patchwork-map {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin-top: auto;
  padding: 16px;
  background-color: rgb(255 255 255 / 0.035);
  background-image: radial-gradient(circle, rgb(255 255 255 / 0.12) 1px, transparent 1px);
  background-size: 16px 16px;
  border-radius: var(--radius-3);
}

.secondary-page .dc-patchwork-map::before,
.secondary-page .dc-patchwork-map::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-color: rgb(255 255 255 / 0.2);
  border-style: dashed;
}

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

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

.secondary-page .dc-patch-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px 11px;
  color: var(--dc-on-dark-body);
  background-color: color-mix(in oklab, var(--color-dark-band) 78%, var(--color-ink-royal));
  border: 1px solid rgb(255 255 255 / 0.13);
  border-radius: var(--radius-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.15;
}

.secondary-page .dc-patch-node > i {
  --fa-primary-color: var(--dc-on-dark-body);
  --fa-secondary-color: var(--dc-on-dark-mute);
  --fa-secondary-opacity: 0.75;
  flex: none;
  width: 18px;
  color: var(--dc-on-dark-mute);
  font-size: 14px;
  text-align: center;
}

.secondary-page .dc-patch-node-mis {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(88%, 320px);
}

.secondary-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-color: var(--color-dark-band);
  border: 1px solid rgb(236 99 75 / 0.35);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
}

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

.secondary-page .dc-compare-arrow::before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 2px;
  background-image: linear-gradient(90deg, rgb(255 255 255 / 0.2), var(--color-coral-500));
}

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

.secondary-page .dc-pipeline-copy {
  position: relative;
  z-index: 1;
  max-width: 48ch;
  color: var(--dc-on-dark-body);
}

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

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

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

.secondary-page .dc-pipeline-step > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-coral-500);
  background-color: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(236 99 75 / 0.42);
  border-radius: var(--radius-full);
  font-size: 15px;
}

.secondary-page .dc-pipeline-step > span > i {
  --fa-primary-color: var(--color-coral-500);
  --fa-secondary-color: var(--color-paper);
  --fa-secondary-opacity: 0.75;
}

.secondary-page .dc-pipeline-emma {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 20px;
  padding: 11px 13px;
  background-color: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.11);
  border-radius: var(--radius-3);
}

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

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

.secondary-page .dc-pipeline-emma small {
  color: var(--dc-on-dark-body);
  font-family: var(--font-sans);
  font-size: 11px;
}

/* ── Journey: a horizontal CAROUSEL, not a vertical stack ───────────────────────────────── */
/* Measured off the reference, which is why this is a carousel at all: the section is 916px tall
   there against 2358px when stacked, because its seven stages sit side by side at a 1056px
   pitch — slides 1032px wide with a 24px gap, so the next one peeks by 144px in the 1200px
   viewport. The reference alternates the slides' DOM order but then uses `order` to normalise
   it, so visually the mock is ALWAYS left and the copy ALWAYS right. No alternation.

   The unenhanced rail and phone layout use scroll-snap. Once page JS binds above 640px it
   translates the full visible track instead, so the next stage still peeks beyond the section
   while desktop navigation stays control-only and scrollbar-free. */
.secondary-page .dc-carousel {
  overflow-x: auto;
  padding-bottom: 32px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;            /* the arrows and counter are the affordance */
  -ms-overflow-style: none;
}
.secondary-page .dc-carousel::-webkit-scrollbar { display: none; }

/* Full-viewport carousel frame: the track escapes the content container, then fades and clips at
   the screen edges using the same 8% mask as the DS logo marquee. Vertical card shadows stay free. */
.secondary-page .dc-carousel-viewport {
  width: 100vw;
  margin-inline-start: calc(50% - 50vw);
  padding-inline: max(24px, calc((100vw - 1200px) / 2));
  overflow-x: clip;
  overflow-y: visible;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.secondary-page .dc-carousel-track { display: flex; gap: 72px; }

.secondary-page .dc-slide {
  flex: 0 0 86%;                    /* 1032 of 1200 — keeps the reference's peek at any width */
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* Copy stays FIRST in the DOM (a screen reader gets the heading before the illustrative mock)
   and is placed on the right visually — the reference's own layout, reached without making the
   markup order depend on the slide index, which a CMS loop could not do anyway. */
/* Unconditional, and no collapse below it. The reference's slide is
   `flex: 0 0 86%; grid-template-columns: 1fr 1fr` with NO media query, so it keeps two columns
   and its peek at every width; the 991px block that made slides full-width single-column, and
   the 992px floor under this ordering, were both invented. Making the ordering unconditional
   changes nothing at 1440 and avoids the copy jumping sides at a breakpoint the reference has
   no equivalent for. */
.secondary-page .dc-slide > *:first-child { order: 2; }
.secondary-page .dc-slide > *:last-child  { order: 1; }

@media (min-width: 641px) {
  .secondary-page .dc-carousel.dc-carousel-desktop {
    overflow: visible;
    scroll-snap-type: none;
    scroll-behavior: auto;
  }

  .secondary-page .dc-carousel-desktop .dc-carousel-track {
    transition-property: transform;
    transition-duration: 480ms;
    transition-timing-function: ease;
  }

  .secondary-page .dc-carousel-desktop[data-journey-index="0"] .dc-carousel-track { transform: translateX(0); }
  .secondary-page .dc-carousel-desktop[data-journey-index="1"] .dc-carousel-track { transform: translateX(calc(-86% - 72px)); }
  .secondary-page .dc-carousel-desktop[data-journey-index="2"] .dc-carousel-track { transform: translateX(calc(-172% - 144px)); }
  .secondary-page .dc-carousel-desktop[data-journey-index="3"] .dc-carousel-track { transform: translateX(calc(-258% - 216px)); }
  .secondary-page .dc-carousel-desktop[data-journey-index="4"] .dc-carousel-track { transform: translateX(calc(-344% - 288px)); }
  .secondary-page .dc-carousel-desktop[data-journey-index="5"] .dc-carousel-track { transform: translateX(calc(-430% - 360px)); }
  .secondary-page .dc-carousel-desktop[data-journey-index="6"] .dc-carousel-track { transform: translateX(calc(-516% - 432px)); }
}

.secondary-page .dc-carousel-controls {
  display: flex; align-items: center; gap: 12px;
}

.secondary-page .dc-carousel-count {
  font-family: var(--font-label); font-size: 11px; font-weight: 700;   /* ref 700 */
  letter-spacing: 0.08em; color: var(--color-ink-mute);
  margin-inline-end: auto;
}

.secondary-page .dc-mock-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--color-rule);
}
.secondary-page .dc-mock-row:last-of-type { border-bottom: 0; }
/* Row labels are ink-deep / 500 in the reference. Colour behind :where() so the one coral row
   (the preference deadline) can opt out with a utility (§2 rule 5). */
/* The completion counter is ok-green 600, as typed, on a success tint (reference). */
.secondary-page .dc-count-ok { color: var(--color-ok-green); font-weight: 600; letter-spacing: normal; text-transform: none; }
.secondary-page .dc-mock-row .dc-body-13 { font-weight: 500; }
/* Declared after the .dc-body-13 default above, both at zero specificity, so this wins for rows
   while a per-instance utility (the coral deadline) still beats both. */
:where(.secondary-page .dc-mock-row .dc-body-13) { color: var(--color-ink-deep); }

/* ── Emma: the stat pill on the dark band ───────────────────────────────────────────────── */
.secondary-page .dc-stat-pill {
  display: inline-flex; align-items: center; gap: 18px;
}

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

/* ── Results: the stat cards beside the dark quote ──────────────────────────────────────── */
.secondary-page .dc-stat-card {
  background: var(--color-page-bg); border: 1px solid var(--color-rule);
  border-radius: var(--radius-4); padding: 20px 24px;
}
.secondary-page .dc-stat-num {
  font-family: var(--font-heading); font-weight: 700;
  /* The reference is clamp(30px,3vw,40px) on all three stats; the port shipped one step down,
     which is what made the coral `.orange-title` half of each stat read smaller than its stem. */
  font-size: clamp(30px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--color-ink-deep); margin: 0;
}
.secondary-page .dc-emma-strip {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 26px; margin-top: 32px;
  border-radius: var(--radius-4); background: var(--color-page-bg); border: 1px solid var(--color-rule);
}

/* ADDED 2026-09-16 (Nicola): the "What schools ask Emma to do" strip rotates through several
   illustrative examples instead of showing one static line. All lines share one grid cell
   (the standard crossfade trick) so the strip never changes height as it cycles; JS in
   secondary.js toggles `.dc-strip-line-active` on an interval and no-ops under
   prefers-reduced-motion (see initEmmaStripRotator). */
.secondary-page .dc-strip-lines {
  position: relative;
  display: grid;
  flex: 1 1 240px;
  min-width: 0;
}
.secondary-page .dc-strip-lines > .dc-strip-line {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 420ms ease;
}
.secondary-page .dc-strip-lines > .dc-strip-line.dc-strip-line-active {
  opacity: 1;
}

/* ── Resources ──────────────────────────────────────────────────────────────────────────── */
.secondary-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;
  /* LONGHANDS, NOT THE `transition` SHORTHAND. This element is a direct child of a
     .reveal-stagger container (the cross-sell grid), and the stagger works by setting per-child
     transition-delay. The shorthand RESETS transition-delay to 0s, and page CSS is unlayered
     while reveal.css compiles into @layer components — so unlayered wins regardless of
     specificity and every child animated at once. Same trap reveal.css's own header documents,
     reached from the child's side. The hover behaviour is unchanged: there was no delay to keep. */
  transition-property: box-shadow, transform;
  transition-duration: 200ms, 150ms;
  transition-timing-function: cubic-bezier(.2, .8, .2, 1), ease;
}
.secondary-page .dc-res:hover { box-shadow: var(--dc-shadow-panel); transform: translateY(-2px); }
/* ── Closer ─────────────────────────────────────────────────────────────────────────────── */
/* Uses the shared full-bleed flat coral CTA without page-specific geometry. */

/* No padding step: the reference writes this padding as `clamp(56px,8vw,104px) 40px` — a clamp,
   not a breakpoint. Ours is the flattened 1440px value (the port's standing treatment of the
   package's clamps, STATUS.md section 5), so the 767px step was neither the reference's value nor
   its mechanism. */

/* ── Reduced motion ─────────────────────────────────────────────────────────────────────── */
/* No blanket `* { animation-duration: .01ms !important }` here. This page defines no @keyframes
   of its own: every animation on it comes from a design-system component (section-glow-drift,
   marquee, prompt-card, reveal), and each of those already neutralises itself under
   prefers-reduced-motion. The blanket rule broke the no-!important rule (coding-standards §6)
   to do a job the DS had already done. If this page ever gains its own animation, give that
   class an `animation: none` in the block below instead. */

/* ── Remaining measured details, grouped by where they appear ───────────────────────────── */

/* extra measures used by the reference */
.secondary-page .dc-measure-800 { max-width: 800px; }
.secondary-page .dc-measure-460 { max-width: 462px; }

/* Logo strip: shared equal-height cards around the reference's 152 x 58 artwork. */
.secondary-page .marquee-item img { width: 152px; height: 58px; object-fit: contain; }

/* the footer line inside a mock card (Emma's note), with the reference's hairline above */
.secondary-page .dc-mock-foot {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 0; padding-top: 14px;
  border-top: 1px solid var(--color-rule);
  color: var(--color-ink-soft);
}

/* deadline timeline box */
.secondary-page .dc-timeline { padding: 18px; display: flex; align-items: center; }

/* toolkit: the classes the tabs controller toggles. They must exist in CSS AND appear in the
   markup's data-* attributes — a class only ever named in JS would never be styled. */
/* Opaque paper surface so the whole toolkit band covers the pinned dark group. */
.secondary-page #toolkit { background-color: var(--color-paper); }

/* The deadline remains opaque while the Problem section's gradient supplies its own fill. */
.secondary-page #deadline { background-color: var(--color-page-bg); }

/* MIS strip */
.secondary-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 4px;
}

/* Faith feature rows match Sixth Forms' compact vertical list. */
.secondary-page .dc-feature-body { flex: 1; min-width: 0; }
.secondary-page .dc-faith-list { display: flex; flex-direction: column; gap: 16px; }
.secondary-page .dc-faith-row { display: flex; gap: 13px; align-items: flex-start; }
.secondary-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);
}
.secondary-page .dc-tile-sand > i { font-size: 14px; color: var(--color-coral-500); }
.secondary-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;
}

/* Emma band */
.secondary-page .dc-link-coral { color: var(--color-coral-500); font-weight: 600; white-space: nowrap; }
.secondary-page .dc-emma-tabs { flex-wrap: wrap; }
.secondary-page .dc-emma-tabs .tab { white-space: nowrap; }
/* The reference renders this as an inline coral link with a trailing arrow, NOT as a button -
   `display: inline-flex; gap: 9px; font: 600 14.5px; color: accent; text-decoration: none`. */
.secondary-page .dc-link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-heading); font-size: 14.5px; text-decoration: none;
}
.secondary-page .dc-link-arrow:hover { color: var(--color-ink-deep); }

/* The chat's two replies are non-interactive SPAN chips in the reference (`font: 600 12px`,
   999px radius, 7px 14px), not buttons. They were `.btn .btn-sm`, which is why they rendered at
   14.5px against the reference's 12px - the component was wrong, not the size. */
.secondary-page .dc-stat-pill-num {
  font-family: var(--font-heading); font-weight: 700; font-size: 40px; line-height: 1;
  letter-spacing: -0.02em; color: var(--color-coral-500); flex: none;
}
.secondary-page .dc-guardrails { padding: 8px 4px 0; }

/* results */
.secondary-page .dc-card-dark { display: flex; flex-direction: column; justify-content: space-between; }
.secondary-page .dc-quote-by { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.secondary-page .dc-avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
}

/* ADDED 2026-09-16 (Nicola: "add this on as another testimonial for Year 7"): the single static
   Twynham quote is now a 2-slide crossfade carousel with a real second testimonial (Noel Baker
   Academy). Ported the exact mechanism already proven on /emma-ai (meet-emma.js/css's
   `[data-quotes]` / `[data-quote]` / `[data-quote-dot]` / `[data-quote-prev]` / `[data-quote-next]`,
   one grid cell per stage so the crossfade never changes the dark card's height) rather than
   inventing a new pattern - copied here because meet-emma.css is page-scoped, not shared.
   `.dc-quote-dot`'s active colour needs no extra rule: `.btn-pagination-dot[aria-current=true]`
   is already a core DS rule (goes coral), same as on /emma-ai. */
.secondary-page .dc-quote-stage { display: grid; }
.secondary-page .dc-quote-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition-property: opacity, transform, visibility;
  transition-duration: 300ms, 300ms, 0ms;
  transition-timing-function: ease-out;
  transition-delay: 0ms, 0ms, 300ms;
}
.secondary-page .dc-quote-slide-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0ms;
}
@media (prefers-reduced-motion: reduce) {
  .secondary-page .dc-quote-slide {
    transform: none;
    transition-duration: 0.01ms;
  }
}
.secondary-page .dc-proof-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.secondary-page .dc-stat-col { display: flex; flex-direction: column; gap: 12px; }
.secondary-page .dc-strip-label { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.secondary-page .dc-strip-end { margin-inline-start: auto; }

/* resources */
.secondary-page .dc-res-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.secondary-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);
}

/* closer */
.secondary-page .dc-closer-measure { max-width: 575px; margin-left: auto; margin-right: auto; }

/* ── 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: 800px) {
  .secondary-page .dc-grid-problem {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .secondary-page .dc-compare-arrow { min-height: 60px; }

  .secondary-page .dc-compare-arrow::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: auto;
    background-image: linear-gradient(180deg, rgb(255 255 255 / 0.2), var(--color-coral-500));
    transform: translateX(-50%);
  }

  .secondary-page .dc-compare-arrow > i { transform: rotate(90deg); }
}

@media (max-width: 640px) {
  .secondary-page .dc-grid-emma,
  .secondary-page .dc-grid-cards-3,
  .secondary-page .dc-grid-deadline,
  .secondary-page .dc-grid-families,
  .secondary-page .dc-grid-hero,
  .secondary-page .dc-grid-results {
    grid-template-columns: minmax(0, 1fr);
  }
  .secondary-page .dc-emma-tabs .tab { flex-basis: calc(50% - 2px); }

  .secondary-page .dc-pipeline-step {
    font-size: 9.5px;
    letter-spacing: -0.01em;
  }

  .secondary-page .dc-pipeline-step > span {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .secondary-page .dc-pipeline-step:not(:last-child)::after {
    top: 17px;
    left: calc(50% + 17px);
    width: calc(100% - 34px);
  }
}

/* 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.secondary-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 `.secondary-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. */
.secondary-page > [data-stack-group]:first-child > .section:first-child { padding-top: 128px; }