/* Admissions+ for FE Colleges — page CSS
 * ============================================================================================
 * GOAL: a FAITHFUL (1:1) reproduction of the reference
 *   "Admissions Plus for FE Colleges.dc.html"  (16 sections, 637 inline styles)
 * without those inline styles. Every value below was read out of the reference file, not
 * guessed — measured by parsing, so the clamp() expressions are the reference's own.
 *
 * STRATEGY (prototypes/WORKFLOW.md §0):
 *   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 `.fe-colleges-page`, so this file is inert on any other page.
 *
 * HOW THIS REFERENCE COMPARES TO OUR TOKENS
 *   IDENTICAL, so we use ours: the whole ink scale (#0F1A4F/#263C91/#4D5B7F/#8893B0), coral
 *   500 (#EC634B) + coral-100 (#FFE7DD accent-soft), ok-green #1A8A3F, ok-green-bright
 *   #34D07F, ok-green-soft #DFF1E5, paper, page-bg (#F4F5F9 "sand"), rule #E6E8EF,
 *   dark-band #0B1023, radii 7/16/18/22/999, and two shadows exactly:
 *     0 30px 80px rgba(15,26,79,.12) = --shadow-deep   (hero mock)
 *     0 30px 70px rgba(4,8,24,.40)   = --shadow-dark   (prompt card)
 *
 *   DIFFERENT, so declared here (owner's ruling: keep the reference's colours):
 *     ADOPTED OUR TOKEN (2026-08-14, owner decision): the hairline is now var(--color-rule)
 *     #E6E8EF everywhere. The reference's #ECEEF3 is 6/255 lighter -- imperceptible, and the
 *     package is not unanimous anyway (Demos, Events and Webinars already use #E6E8EF, and the
 *     three legal pages have no hairline at all), so it did not earn a second token.
 *     #E9ECF3  "sand-2" chip/track fill
 *     #9AA6C2  body copy ON DARK       #C9D1E6  list copy ON DARK
 *     #7E8AA6  captions ON DARK        #5C688A  footnote ON DARK
 *     #223055  avatar disc ON DARK
 *     #E9F7EE / #BFE7CC   the chat mock's success callout (our ok-green-soft is #DFF1E5)
 *     #F8D2C3  the COMING SOON callout border
 *   Five shadows have no token: /.07 panel, /.06 inset panel, /.08 chat, /.08 mock card,
 *   /.08 icon tile, plus a /.10 card-hover.
 *
 *   GEOMETRY: the reference container is max-width 1200px with a 24px section gutter; our DS
 *   is 1224px / 32px. Overridden page-locally only — .page-container and .section are untouched.
 * ============================================================================================ */

.fe-colleges-page {
  /* reference-only values, all read from the file */
  --dc-sand-2: #E9ECF3;           /* chip fill / bar track on light */
  --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);   /* guardrail list items on dark */
  --dc-on-dark-mute: var(--color-ink-mute);     /* captions on dark */
  --dc-on-dark-faint: var(--color-on-dark-faint);    /* the source footnote on dark */
  --dc-avatar-dark: #223055;      /* initials disc inside the dark quote card */
  --dc-ok-wash: #E9F7EE;          /* chat "new enquiry" callout fill */
  --dc-ok-wash-line: #BFE7CC;     /* its border */
  --dc-soon-line: #F8D2C3;        /* COMING SOON callout border */

  --dc-shadow-panel: 0 20px 60px rgba(15, 26, 79, 0.07);   /* the toolkit panel */
  --dc-shadow-inset: 0 24px 60px rgba(15, 26, 79, 0.06);   /* the three white inset panels */
  --dc-shadow-chat:  0 20px 50px rgba(15, 26, 79, 0.08);   /* the chat mock */
  --dc-shadow-mock:  0 12px 32px rgba(15, 26, 79, 0.08);   /* the journey mock cards */
  --dc-shadow-tile:  0 8px 22px  rgba(15, 26, 79, 0.08);   /* the in-year icon tiles */
  --dc-shadow-hover: 0 16px 40px rgba(15, 26, 79, 0.10);   /* resource card hover */

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

  /* Inter, explicitly. The DS's `.app` sets only the body COLOUR (components/typography.css:10)
     and preflight leaves html at ui-sans-serif, so a bare <p> inherits the SYSTEM sans unless a
     component applies font-sans itself (.check-list, .lead and friends do). The reference sets
     font-family on its own root wrapper for exactly this reason, so this mirrors it rather than
     repeating font-family on every body step. Flagged in the report as a DS observation. */
  font-family: var(--font-sans);
}

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

/* The social-proof section is the one place the reference puts the 24px gutter INSIDE the
   1200px container rather than on the section, so its logo strip is 1152px wide, not 1200. */
.fe-colleges-page .dc-inset-24 { padding-left: 24px; padding-right: 24px; }

/* ── Vertical rhythm: hand-tuned per section in the reference ────────────────────────────── */
/* Not a scale — the reference's own values, section by section, which the DS padding
   modifiers cannot express. `dc-py-<top>-<bottom>` is deliberately literal so the later
   normalisation pass can map each one to a DS step or say why it should not. */
.fe-colleges-page .dc-py-128-72 { padding-bottom: 72px; }

/* The hero's 128px TOP pad, restored for the CMS. `dc-py-128-72` deliberately declares only
   the bottom: in the prototype the top comes from _shared/page-shared.css, whose selector is
   `body.app > [data-site-header] + [data-stack-group] > .section:first-child`.
   The CMS replacement in /r/24 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.fe-colleges-page > div[data-stack-group] > section#top), so neither form matches
   and the hero fell back to the DS `.section` default: measured 96px against the intended 128.
   Scoped to the FIRST stack group so later groups do not inherit it — the same guard the
   shared rule gets from its `[data-site-header] +` adjacency. Inert in the prototype, where
   `.fe-colleges-page` is <body> and its first child is the header slot, not a stack group.
   Affects every stack-group page (secondary and sixth-forms too) — see the transfer report. */
.fe-colleges-page > [data-stack-group]:first-child > .section:first-child { padding-top: 128px; }
.fe-colleges-page .dc-py-44-48  { padding-top: 44px;  padding-bottom: 48px; }
.fe-colleges-page .dc-py-48-64  { padding-top: 48px;  padding-bottom: 64px; }
.fe-colleges-page .dc-py-104-44 { padding-top: 104px; padding-bottom: 44px; }
.fe-colleges-page .dc-py-0-96   { padding-top: 0;     padding-bottom: 96px; }
.fe-colleges-page .dc-py-104    { padding-top: 104px; padding-bottom: 104px; }
.fe-colleges-page .dc-py-96-104 { padding-top: 96px;  padding-bottom: 104px; }
.fe-colleges-page .dc-py-88     { padding-top: 88px;  padding-bottom: 88px; }
.fe-colleges-page .dc-py-40-96  { padding-top: 40px;  padding-bottom: 96px; }
.fe-colleges-page .dc-py-96-0   { padding-top: 96px;  padding-bottom: 0; }
.fe-colleges-page .dc-py-96     { padding-top: 96px;  padding-bottom: 96px; }

/* The one section whose own padding is a clamp (the dark scale band) */
.fe-colleges-page .dc-py-clamp-112 {
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(72px, 8vw, 112px);
}

/* Results remains hairlined top and bottom rather than tinted. */
.fe-colleges-page .dc-hairline-y {
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

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

.fe-colleges-page .dc-t-80  { font-size: clamp(38px, 6vw,   80px); line-height: 1.0;  letter-spacing: -0.04em; }
.fe-colleges-page .dc-t-78  { font-size: clamp(44px, 5.6vw, 78px); line-height: 0.95; letter-spacing: -0.045em; }
.fe-colleges-page .dc-t-76  { font-size: clamp(44px, 5.6vw, 76px); line-height: 1.0;  letter-spacing: -0.04em; }
.fe-colleges-page .dc-t-64  { font-size: clamp(36px, 5vw,   64px); line-height: 1.02; letter-spacing: -0.035em; }
.fe-colleges-page .dc-t-56  { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.03em; }
.fe-colleges-page .dc-t-54  { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.03em; }
.fe-colleges-page .dc-t-52  { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -0.035em; }
.fe-colleges-page .dc-t-48  { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
/* the resources headline shares the 48px maximum but is set a touch looser and tighter-tracked */
.fe-colleges-page .dc-t-48r { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.05; letter-spacing: -0.028em; }
.fe-colleges-page .dc-t-46  { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.03em; }
/* … and the families headline the 46px maximum at -.025em */
.fe-colleges-page .dc-t-46f { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.025em; }
.fe-colleges-page .dc-t-42  { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1;  letter-spacing: -0.025em; }
.fe-colleges-page .dc-t-40  { font-size: clamp(30px, 3vw,   40px); line-height: 1.15; letter-spacing: -0.02em; }
.fe-colleges-page .dc-t-36  { font-size: clamp(24px, 2.9vw, 36px); line-height: 1.1;  letter-spacing: -0.022em; }
.fe-colleges-page .dc-t-30  { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12; letter-spacing: -0.018em; }
.fe-colleges-page .dc-t-20  { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.fe-colleges-page .dc-t-17  { font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; }
.fe-colleges-page .dc-t-17-5{ font-size: 17.5px; line-height: 1.25; }
.fe-colleges-page .dc-t-14-5{ font-size: 14.5px; line-height: 1.3; font-weight: 600; }
.fe-colleges-page .dc-t-13  { font-size: 13px; line-height: 1.3; font-weight: 600; }

/* The pull quote is Proxima at 500, not 700 — the one display step that is not bold */
.fe-colleges-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;
  margin: 0;
  text-wrap: pretty;
}

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

/* ── The mono label scale (IBM Plex Mono 500 = our font-label) ───────────────────────────── */
/* Confirmed against the reference: it really is the mono face. 12.5px/.08em is exactly our
   font-label + text-label-l + tracking-label; the smaller steps have no DS utility. */
.fe-colleges-page [class*="dc-label-"],
.fe-colleges-page .dc-eyebrow {
  font-family: var(--font-label);
  font-weight: 500;
  text-transform: uppercase;
}

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

/* The hero's eyebrow is the only one that is smaller and ink-mute rather than coral */
.fe-colleges-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: 0.09em; color: var(--color-ink-mute); }
.fe-colleges-page .dc-eyebrow-row  { display: inline-flex; align-items: center; gap: 11px; }

.fe-colleges-page .dc-label-11   { font-size: 11px;   letter-spacing: 0.08em; color: var(--color-coral-500); }
.fe-colleges-page .dc-label-10-5 { font-size: 10.5px; letter-spacing: 0.08em; color: var(--color-ink-mute); }
.fe-colleges-page .dc-label-10   { font-size: 10px;   letter-spacing: 0.08em; color: var(--color-ink-mute); }
.fe-colleges-page .dc-label-10-7 { font-size: 10.5px; letter-spacing: 0.07em; color: var(--color-ink-mute); }
.fe-colleges-page .dc-label-9-5  { font-size: 9.5px;  letter-spacing: 0.06em; color: var(--color-ink-mute); }
.fe-colleges-page .dc-label-9    { font-size: 9px;    letter-spacing: 0.07em; color: var(--color-ink-mute); }

/* ── The gaps Tailwind's 4px scale cannot express ────────────────────────────────────────── */
/* The reference's rhythm inside a section is on odd values — 3, 5, 6, 10, 14, 18, 22, 30, 34,
   36, 44, 56 — so roughly half of its margins have no utility. Where a value DOES land on the
   scale the markup uses the utility (mt-5 = 20px, mb-4 = 16px, mt-10 = 40px …); these carry only
   the ones that do not, named by px like everything else here. Deleting one later means the
   reference and the DS agreed on that step after all. */
.fe-colleges-page .dc-mt-3  { margin-top: 3px; }
.fe-colleges-page .dc-mt-5  { margin-top: 5px; }
.fe-colleges-page .dc-mt-6  { margin-top: 6px; }
.fe-colleges-page .dc-mt-14 { margin-top: 14px; }
.fe-colleges-page .dc-mt-18 { margin-top: 18px; }
.fe-colleges-page .dc-mt-22 { margin-top: 22px; }
.fe-colleges-page .dc-mt-30 { margin-top: 30px; }

.fe-colleges-page .dc-mb-6  { margin-bottom: 6px; }
.fe-colleges-page .dc-mb-10 { margin-bottom: 10px; }
.fe-colleges-page .dc-mb-14 { margin-bottom: 14px; }
.fe-colleges-page .dc-mb-18 { margin-bottom: 18px; }
.fe-colleges-page .dc-mb-32 { margin-bottom: 32px; }
.fe-colleges-page .dc-mb-34 { margin-bottom: 34px; }
.fe-colleges-page .dc-mb-36 { margin-bottom: 36px; }
.fe-colleges-page .dc-mb-40 { margin-bottom: 40px; }
.fe-colleges-page .dc-mb-44 { margin-bottom: 44px; }
.fe-colleges-page .dc-mb-48 { margin-bottom: 48px; }
.fe-colleges-page .dc-mb-56 { margin-bottom: 56px; }

/* the one gap the reference clamps (the patchwork comparison) */
.fe-colleges-page .dc-mt-clamp-52 { margin-top: clamp(36px, 4.5vw, 52px); }

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

.fe-colleges-page .dc-grid-hero     { grid-template-columns: 1.15fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.fe-colleges-page .dc-grid-scale    { grid-template-columns: 1.35fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.fe-colleges-page .dc-grid-problem  { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: clamp(14px, 2vw, 26px); align-items: stretch; }
.fe-colleges-page .dc-grid-chapter  { grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.fe-colleges-page .dc-grid-emma     { grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.fe-colleges-page .dc-grid-families { grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.fe-colleges-page .dc-grid-results  { grid-template-columns: 1.35fr 1fr; gap: clamp(20px, 2.5vw, 32px); align-items: stretch; }
.fe-colleges-page .dc-grid-data     { grid-template-columns: minmax(0, 1fr) clamp(340px, 34vw, 420px); gap: clamp(28px, 4vw, 56px); align-items: center; }
.fe-colleges-page .dc-grid-support  { grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.fe-colleges-page .dc-grid-3        { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fe-colleges-page .dc-grid-2        { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fe-colleges-page .dc-grid-inyear   { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.fe-colleges-page .dc-grid-bullets  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.fe-colleges-page .dc-grid-res      { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: stretch; }

/* The chapter stack: the reference alternates which side the mock sits on (chapters 2 and 4
   put it left) using `order`, while keeping the COPY FIRST in the DOM on every chapter — so a
   screen reader always hears the heading before the illustrative mock. Reproduced with
   nth-child so the markup order never depends on the index (a CMS loop could not do that). */
.fe-colleges-page .dc-chapters { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 96px); }

/* UNCONDITIONAL, as the reference has it: `order: 2` / `order: 0` are inline on chapters 2 and 4
   with no media query anywhere near them, and the chapter grid stays `1fr 1fr` at every width, so
   there is no width at which the alternation should stop. It was wrapped in a 992px min-width only
   to survive a grid collapse this page should never have had (see the breakpoint note below). */
.fe-colleges-page .dc-chapters > :nth-child(even) > *:first-child { order: 2; }
.fe-colleges-page .dc-chapters > :nth-child(even) > *:last-child  { order: 1; }

/* Measures. The reference sets most of them in `ch`, which is the right unit for a reading
   width, so they are reproduced in `ch` rather than converted to px. */
.fe-colleges-page .dc-measure-62ch { max-width: 62ch; }
.fe-colleges-page .dc-measure-58ch { max-width: 58ch; }
.fe-colleges-page .dc-measure-56ch { max-width: 56ch; }
.fe-colleges-page .dc-measure-54ch { max-width: 54ch; }
.fe-colleges-page .dc-measure-52ch { max-width: 52ch; }
.fe-colleges-page .dc-measure-50ch { max-width: 50ch; }
.fe-colleges-page .dc-measure-46ch { max-width: 46ch; }
.fe-colleges-page .dc-measure-44ch { max-width: 44ch; }
.fe-colleges-page .dc-measure-24ch { max-width: 24ch; }
.fe-colleges-page .dc-measure-820  { max-width: 820px; }
.fe-colleges-page .dc-measure-780  { max-width: 780px; }
.fe-colleges-page .dc-measure-720  { max-width: 720px; }

/* BREAKPOINTS: THE ORIGINAL REFERENCE COLLAPSES EXACTLY ONE GRID, AND THIS IS IT.
 *
 * Its only content-level media query is `[data-inyeargrid] { grid-template-columns: 1fr }` at
 * 900px. The other four it declares are chrome we do not render (nav at 1120/940, footer at
 * 1080/560). Every other grid on the page — hero, scale, toolkit, chapter, emma, families,
 * results, data, support, the 3-up, the 2-up, the patchwork comparison, the bullet pairs — stays
 * fixed all the way down, so a card genuinely does squeeze on a phone.
 *
 * A 991px block collapsing eleven of them and a 640px block collapsing the bullet pairs were
 * therefore divergences, not improvements: neither width appears anywhere in the reference. Both
 * are removed rather than moved, because there is no reference rule to move them to. The squeeze
 * that remains is the reference's own and is recorded in STATUS.md §5, not smuggled into the port.
 *
 * The redesigned patchwork diagram below is the one later exception: it uses Sixth Forms' existing
 * 800px diagram breakpoint so neither illustrated card is compressed into an unreadable column. */
@media (max-width: 900px) {
  .fe-colleges-page .dc-grid-inyear { grid-template-columns: minmax(0, 1fr); }
}

/* ── Surfaces ───────────────────────────────────────────────────────────────────────────── */
/* The reference has TWO full-bleed dark bands (the scale band and Emma) plus ONE inset dark
   panel (the problem) — see the report: that is a departure from "the dark band is a moment,
   not a texture". Both live here for now; three uses on one page is not the cross-page
   repetition that earns a DS class. */
.fe-colleges-page .dc-panel {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: var(--radius-5\.5);
  position: relative;
  overflow: hidden;
}

.fe-colleges-page .dc-panel-dark {
  background: var(--color-dark-band);
  padding: clamp(56px, 7vw, 96px) clamp(28px, 5vw, 72px);
}

/* The three white inset panels. Same shell, three different paddings in the reference. */
.fe-colleges-page .dc-panel-paper {
  background: var(--color-paper);
  box-shadow: var(--dc-shadow-inset);
}

.fe-colleges-page .dc-pad-families { padding: clamp(44px, 5.5vw, 72px) clamp(28px, 5vw, 64px); }
.fe-colleges-page .dc-pad-data     { padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 56px); }
.fe-colleges-page .dc-pad-support  { padding: clamp(36px, 4.5vw, 64px) clamp(28px, 4vw, 56px); }

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

/* The hero's illustrative mock — 0 30px 80px rgba(15,26,79,.12) IS our shadow-deep */
.fe-colleges-page .dc-card-mock {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-4\.5);
  box-shadow: var(--shadow-deep);
  padding: 24px 24px 20px;
}

/* On any dark surface the reference switches the copy colours */
.fe-colleges-page .dc-panel-dark,
.fe-colleges-page .dc-quote-card,
.fe-colleges-page .dc-band-dark { color: #fff; }

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

/* The glows. The DS .section-glow is 520px in a corner; the reference sizes each one
   differently, so only the geometry is nudged here — the gradient stays the DS one. */
.fe-colleges-page .dc-glow-760 { width: 760px; height: 760px; right: -260px; top: -310px; }
.fe-colleges-page .dc-glow-700 { width: 700px; height: 700px; left: -180px;  top: -260px; }
.fe-colleges-page .dc-glow-560 { width: 560px; height: 560px; right: -160px; top: -220px; }


/* The live dot is deliberately static — the reference never animates it (only its colour
   changes: ok-green-bright on dark, ok-green on light). */
.fe-colleges-page .dc-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-ok-green-bright);
}

.fe-colleges-page .dc-dot-6 { width: 6px; height: 6px; }

/* ── 1 · Hero: the pipeline funnel mock ─────────────────────────────────────────────────── */
/* The reference animates each bar's width in from 0 on load. Here the widths are declared in
   CSS at their final value, so the mock is correct with JS off; page.js only replays the grow. */
.fe-colleges-page .dc-funnel { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.fe-colleges-page .dc-funnel-row { display: flex; align-items: center; gap: 14px; }
.fe-colleges-page .dc-funnel-label { flex: none; width: 92px; text-align: right; letter-spacing: 0.05em; }
.fe-colleges-page .dc-funnel-track {
  flex: 1;
  height: 34px;
  border-radius: var(--radius-2);
  background: var(--color-page-bg);
  overflow: hidden;
}
.fe-colleges-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;
  transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fe-colleges-page .dc-funnel-1 { width: 100%; background: var(--color-ink-deep); }
.fe-colleges-page .dc-funnel-2 { width: 66%;  background: #31406F; }
.fe-colleges-page .dc-funnel-3 { width: 46%;  background: #31406F; }
.fe-colleges-page .dc-funnel-4 { width: 35%;  background: #5A6890; }
.fe-colleges-page .dc-funnel-5 { width: 18%;  background: var(--color-coral-500); }

/* the footer line inside a mock card (Emma's note), with the reference's hairline above */
.fe-colleges-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);
}

/* ── 2 · Social proof: the logo marquee ─────────────────────────────────────────────────── */
/* The DS owns the unframed row, equal-height cards, gap and edge fade. The artwork remains
   152 x 58 and this page retains its 55s cycle. */
.fe-colleges-page .marquee-track { animation-duration: 55s; }
.fe-colleges-page .marquee-item img { width: 152px; height: 58px; object-fit: contain; }

/* ── 3 · The dark scale band ────────────────────────────────────────────────────────────── */
.fe-colleges-page .dc-stat-row { display: flex; flex-wrap: wrap; gap: 32px 26px; }
.fe-colleges-page .dc-stat-col { flex: 1 1 190px; }

.fe-colleges-page .dc-stat-label {
  margin-top: 10px;
}

/* The glass panel on the dark band */
.fe-colleges-page .dc-glass {
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-4\.5);
  padding: 26px 28px;
  background: rgb(255 255 255 / 0.03);
}

.fe-colleges-page .dc-glass-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  color: var(--dc-on-dark-body);
}

/* Bar rows. Three heights in the reference (6px on dark, 8px in a mock, 10px in the data
   panel), so the height is the modifier and the rest is shared. */
.fe-colleges-page .dc-bars { display: flex; flex-direction: column; gap: 14px; }
.fe-colleges-page .dc-bar-head { display: flex; justify-content: space-between; gap: 12px;
  /* The reference is `font: 500 10.5px var(--mono)` with NO caps and NO tracking - the course
     names read as typed. dc-label-10-5 supplies the face and size; the blanket
     [class*="dc-label-"] rule was adding uppercase + 0.08em on top. */
  text-transform: none; letter-spacing: normal; }
/* display: block matters — the bars are <span>s (a <div> inside a <p> would be invalid), and an
   inline element ignores height, so without this every bar measured 0 x 0 and vanished. */
.fe-colleges-page .dc-bar {
  display: block;
  height: 6px;
  border-radius: var(--radius-1);
  margin-top: 6px;
  overflow: hidden;
  background: rgb(255 255 255 / 0.1);
}
.fe-colleges-page .dc-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-1);
  background: var(--color-coral-500);
  transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fe-colleges-page .dc-bar-light { background: var(--dc-sand-2); }
.fe-colleges-page .dc-bar-8  { height: 8px; margin-top: 5px; }
.fe-colleges-page .dc-bar-10 { height: 10px; border-radius: var(--radius-1\.5); }
.fe-colleges-page .dc-bar-10 .dc-bar-fill { border-radius: var(--radius-1\.5); }

.fe-colleges-page .dc-fill-navy  { background: var(--color-ink-deep); }
.fe-colleges-page .dc-fill-green { background: var(--color-ok-green); }
.fe-colleges-page .dc-fill-slate { background: #5A6890; }

.fe-colleges-page .dc-w-92 { width: 92%; }
.fe-colleges-page .dc-w-71 { width: 71%; }
.fe-colleges-page .dc-w-62 { width: 62%; }
.fe-colleges-page .dc-w-56 { width: 56%; }
.fe-colleges-page .dc-w-46 { width: 46%; }
.fe-colleges-page .dc-w-38 { width: 38%; }
.fe-colleges-page .dc-w-27 { width: 27%; }
.fe-colleges-page .dc-w-21 { width: 21%; }
.fe-colleges-page .dc-w-16 { width: 16%; }
.fe-colleges-page .dc-w-6  { width: 6%; }
.fe-colleges-page .dc-w-100 { width: 100%; }

/* ── 4 · The patchwork problem: broken hand-offs → one pipeline ─────────────────────────── */
/* Page artwork adapted from Sixth Forms for the inset dark surface. Both halves share one
   hierarchy; colour, connectors and the diagrams distinguish fragmented from connected. */
.fe-colleges-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;
}

.fe-colleges-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;
}

.fe-colleges-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;
}

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

.fe-colleges-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;
}

.fe-colleges-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;
}

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

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

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

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

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

.fe-colleges-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;
}

.fe-colleges-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;
}

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

.fe-colleges-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%);
}

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

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

.fe-colleges-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;
}

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

.fe-colleges-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;
}

.fe-colleges-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;
}

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

.fe-colleges-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;
}

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

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

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

.fe-colleges-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;
}

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

/* Reused by the chapter feature chips below; the patchwork no longer uses this row. */
.fe-colleges-page .dc-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* the two-column tick list inside the tool panel and the families panel */
.fe-colleges-page .dc-tick { display: flex; gap: 10px; align-items: flex-start; }
.fe-colleges-page .dc-tick > i { flex: none; margin-top: 5px; font-size: 11px; color: var(--color-coral-500); }

/* ── 7 · The journey chapters ───────────────────────────────────────────────────────────── */
.fe-colleges-page .dc-journey-gradient {
  background: linear-gradient(to bottom, transparent 0%, var(--color-paper) 8%, var(--color-paper) 100%);
}

.fe-colleges-page .dc-journey-stack {
  background-color: transparent;
}

.fe-colleges-page .dc-chapter-no {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--dc-sand-2);
}

.fe-colleges-page .dc-chapter-head { display: flex; align-items: baseline; gap: 12px; }

.fe-colleges-page .dc-chapter-kicker {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-coral-500);
}

/* the pale pill row under each chapter's copy */
.fe-colleges-page .dc-chip {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-ink-soft);
  background: var(--dc-sand-2);
  border-radius: var(--radius-full);
  padding: 6px 12px;
}

/* the mock: a sand tray holding a white card */
.fe-colleges-page .dc-mock-tray { background: var(--color-page-bg); border-radius: var(--radius-4); padding: 28px; }

.fe-colleges-page .dc-mock {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-3\.5);
  overflow: hidden;
  box-shadow: var(--dc-shadow-mock);
}

.fe-colleges-page .dc-mock-pad { padding: 20px 22px; }

.fe-colleges-page .dc-mock-head,
.fe-colleges-page .dc-mock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--color-rule);
}

.fe-colleges-page .dc-mock-head { padding: 13px 18px; }
.fe-colleges-page .dc-mock-row  { padding: 12px 18px; }
.fe-colleges-page .dc-mock-row:last-child { border-bottom: 0; }

.fe-colleges-page .dc-mock-row > span:first-child {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--color-ink-deep);
}

.fe-colleges-page .dc-mock-row > span:first-child i { font-size: 11px; color: var(--color-ink-mute); margin-right: 9px; }

.fe-colleges-page .dc-mock-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-ink-deep);
}

/* the mono status pill used inside every mock */
.fe-colleges-page .dc-pill {
  flex: none;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0;
  border-radius: var(--radius-full);
  padding: 4px 10px;
  white-space: nowrap;
}

.fe-colleges-page .dc-pill-green   { color: var(--color-ok-green); background: var(--color-ok-green-soft); }
.fe-colleges-page .dc-pill-neutral { color: var(--color-ink-soft); background: var(--dc-sand-2); }
.fe-colleges-page .dc-pill-coral   { color: var(--color-coral-500); background: var(--color-coral-100); }

/* the COMING SOON flag and its callout */
.fe-colleges-page .dc-soon {
  flex: none;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-coral-500);
  border-radius: var(--radius-full);
  padding: 4px 9px;
  white-space: nowrap;
}

.fe-colleges-page .dc-soon-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  background: var(--color-coral-100);
  border: 1px solid var(--dc-soon-line);
  border-radius: var(--radius-3);
  padding: 14px 18px;
}

/* ── 8 · Built for every learner ────────────────────────────────────────────────────────── */
/* The middle card is the differentiator: a 1.5px coral border instead of the hairline. */
.fe-colleges-page .dc-card-hi   { border: 1.5px solid var(--color-coral-500); }
.fe-colleges-page .dc-card-soon { border: 1px dashed var(--color-rule); display: flex; align-items: center; justify-content: space-between; gap: 14px; }

/* ── 9 · In-year admissions ─────────────────────────────────────────────────────────────── */
/* Item styling is shared with Meet Emma through `.dc-grid-cap`, `.dc-tile-icon`,
   `.dc-t-20c` and `.dc-body-145t` in `_shared/page-shared.css`. */

/* ── 10 · Emma ──────────────────────────────────────────────────────────────────────────── */
.fe-colleges-page .dc-stat-pill {
  display: inline-flex; align-items: center; gap: 18px;
}

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

.fe-colleges-page .dc-guardrails { padding: 8px 4px 0; }
.fe-colleges-page .dc-guardrails .check-list { gap: 15px; }
.fe-colleges-page .dc-link-coral { color: var(--color-coral-500); font-weight: 600; white-space: nowrap; }
.fe-colleges-page .dc-emma-tabs { flex-wrap: wrap; }
.fe-colleges-page .dc-emma-tabs .tab { white-space: nowrap; }

/* The prompt card is the DS component; only the label colour differs (the reference uses
   ink-mute for "SAY THIS TO EMMA", which is what the DS already does) — nothing to override
   except the pills' wrap, which the reference lets run to four lines. */

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

.fe-colleges-page .dc-chat-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 4px 12px;
  border-bottom: 1px solid var(--color-rule);
}

.fe-colleges-page .dc-chat-online { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--color-ok-green); }
.fe-colleges-page .dc-chat-body   { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; }

.fe-colleges-page .dc-bubble {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-3\.5);
  font-size: 13.5px;
  line-height: 1.5;
}

.fe-colleges-page .dc-bubble-us   { align-self: flex-end; max-width: 88%; background: var(--color-ink-deep); color: #fff; }
.fe-colleges-page .dc-bubble-them { align-self: flex-start; max-width: 92%; background: var(--color-paper); border: 1px solid var(--color-rule); color: var(--color-ink-deep); }

.fe-colleges-page .dc-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  background: var(--color-coral-100);
  color: var(--color-coral-500);
  text-decoration: none;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 10.5px;
  text-transform: uppercase;
}

.fe-colleges-page .dc-source i { font-size: 8px; }

.fe-colleges-page .dc-quick { align-self: flex-start; display: flex; gap: 7px; flex-wrap: wrap; }

.fe-colleges-page .dc-quick > span {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  border-radius: var(--radius-full);
  padding: 7px 14px;
}

.fe-colleges-page .dc-quick-yes { background: var(--color-coral-500); color: #fff; }
.fe-colleges-page .dc-quick-no  { background: var(--color-paper); border: 1px solid var(--color-rule); color: var(--color-ink-soft); }

.fe-colleges-page .dc-chat-lead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 13px;
  border-radius: var(--radius-3);
  background: var(--dc-ok-wash);
  border: 1px solid var(--dc-ok-wash-line);
  color: var(--color-ink-deep);
}

.fe-colleges-page .dc-chat-lead i { flex: none; font-size: 12px; color: var(--color-ok-green); }
.fe-colleges-page .dc-chat-foot { text-align: center; padding-top: 12px; margin: 0; letter-spacing: 0.05em; }

/* ── 12 · Results ───────────────────────────────────────────────────────────────────────── */
.fe-colleges-page .dc-quote-card {
  background: var(--color-dark-band);
  border-radius: var(--radius-5);
  padding: clamp(32px, 4vw, 48px);
  display: flex;
  flex-direction: column;
}

.fe-colleges-page .dc-quote-by { margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 14px; }

.fe-colleges-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-dark);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
}

.fe-colleges-page .dc-stat-stack { display: flex; flex-direction: column; gap: 12px; }

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

/* the Emma ticker strip under the results grid */
.fe-colleges-page .dc-ticker {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 18px 26px;
  border-radius: var(--radius-4);
  background: var(--color-page-bg);
  border: 1px solid var(--color-rule);
}

.fe-colleges-page .dc-ticker-label { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.fe-colleges-page .dc-ticker-line  { flex: 1; min-width: 260px; font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--color-ink-deep); margin: 0; }
.fe-colleges-page .dc-ticker-end   { flex: none; }

/* ── 13 · What the data says ────────────────────────────────────────────────────────────── */
.fe-colleges-page .dc-data-panel {
  --dc-data-pull-inline: clamp(12px, 2vw, 28px);
  --dc-data-pull-block: clamp(8px, 1.2vw, 16px);
  background: var(--color-page-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-4);
  overflow: hidden;
  width: calc(100% + var(--dc-data-pull-inline));
  margin-block: calc(-1 * var(--dc-data-pull-block));
  margin-right: calc(-1 * var(--dc-data-pull-inline));
}

.fe-colleges-page .dc-data-pad { padding: 28px 26px; }
.fe-colleges-page .dc-data-bars { display: flex; flex-direction: column; gap: 16px; }

.fe-colleges-page .dc-pp {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--color-ink-deep);
  margin: 0;
}

.fe-colleges-page .dc-pp span { font-size: 15px; }

.fe-colleges-page .dc-data-rule { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-rule); }

.fe-colleges-page .dc-link-arrow {
  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;
}

.fe-colleges-page .dc-link-arrow:hover { color: var(--color-ink-deep); }
.fe-colleges-page .dc-link-arrow i { font-size: 11px; }

/* ── 14 · Resources ─────────────────────────────────────────────────────────────────────── */
.fe-colleges-page .dc-res-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }

.fe-colleges-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: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease, border-color 200ms ease;
}

.fe-colleges-page .dc-res:hover { transform: translateY(-4px); box-shadow: var(--dc-shadow-hover); border-color: var(--color-coral-500); }

.fe-colleges-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);
  margin: 0;
}

.fe-colleges-page .dc-res-cta {
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--color-coral-500);
}

.fe-colleges-page .dc-res-cta i { font-size: 10px; }

/* ── 15 · Getting started ───────────────────────────────────────────────────────────────── */
.fe-colleges-page .dc-support-list { display: flex; flex-direction: column; gap: 12px; }

.fe-colleges-page .dc-support-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius-3\.5);
  background: var(--color-page-bg);
}

.fe-colleges-page .dc-support-row > i { flex: none; font-size: 15px; color: var(--color-coral-500); }

/* ── 16 · Closer ────────────────────────────────────────────────────────────────────────── */
/* The DS .cta-section-flat is exactly this module (full-bleed flat coral, .btn-light +
   .btn-outline-light). Two nudges: the reference's own padding, and no reading-width cap on
   the headline — it runs the full container width with text-wrap: balance. */
.fe-colleges-page .cta-section        { padding: clamp(80px, 11vw, 150px) 24px; }
.fe-colleges-page .cta-section-actions{ margin-top: 34px; }

/* ── The grow-in armed state (page.js) ──────────────────────────────────────────────────── */
/* Same progressive-enhancement shape as the DS .reveal-armed: the ZERO width is applied by a
   class that only JavaScript ever adds, so with JS off every bar renders at its final width
   (which is declared in the .dc-w-* classes above, never as an inline style). page.js arms on
   connect and disarms when the section scrolls into view. */
/* THE ARMED STATE CARRIES NO TRANSITION — the same trap reveal.css documents. A transition uses
   the properties of the state being moved TO, so leaving the 1.1s on here made arming animate:
   every bar painted at its full width on load and then visibly shrank to zero. Declaring
   `transition: none` on the hidden state makes arming instant and growing animated. */
.fe-colleges-page .dc-grow-armed .dc-bar-fill,
.fe-colleges-page .dc-grow-armed .dc-funnel-fill { width: 0; transition: none; }

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

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

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

  .fe-colleges-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%);
  }

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

@media (max-width: 640px) {
  .fe-colleges-page .dc-emma-tabs .tab { flex-basis: calc(50% - 2px); }
  .fe-colleges-page .dc-grid-results,
  .fe-colleges-page .dc-grid-emma,
  .fe-colleges-page .dc-grid-2,
  .fe-colleges-page .dc-grid-3,
  .fe-colleges-page .dc-grid-bullets,
  .fe-colleges-page .dc-grid-chapter,
  .fe-colleges-page .dc-grid-data,
  .fe-colleges-page .dc-grid-families,
  .fe-colleges-page .dc-grid-hero,
  .fe-colleges-page .dc-grid-problem,
  .fe-colleges-page .dc-grid-scale,
  .fe-colleges-page .dc-grid-support {
    grid-template-columns: minmax(0, 1fr);
  }

  .fe-colleges-page .dc-data-panel {
    width: 100%;
    margin: 0;
  }

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

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

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