/* 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) ────────────────────────────────────────────────────────────── */
.secondary-page .dc-lede   { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); margin: 0; }
.secondary-page .dc-lede-17{ font-size: 17px; line-height: 1.6;  color: var(--color-ink-soft); margin: 0; }
.secondary-page .dc-body-16{ font-size: 16.5px; line-height: 1.6; margin: 0; }
.secondary-page .dc-body-15{ font-size: 15.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; }
.secondary-page .dc-body-14{ font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); margin: 0; }
.secondary-page .dc-body-13{ font-size: 13.5px; line-height: 1.5; margin: 0; }
: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-mute;
   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: var(--color-ink-mute); }
.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); }
.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);
}

/* ── 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;
}
.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; }