/* Applicaa Futures — page CSS
 * ============================================================================================
 * GOAL: a FAITHFUL (1:1) reproduction of the reference
 *   "Applicaa Futures.dc.html"  (14 sections)
 *
 * SEEDED FROM prototypes/independent/page.css — identical token block in the reference, so the
 * container geometry, padding literals, type/label scaffold, buttons, surfaces, spacing helpers,
 * the stat pill and the closer transferred unchanged. Additions below are this page's own.
 * without any inline styles. Every value below is READ OUT OF THE REFERENCE, not guessed —
 * the file was parsed section by section (see WORKFLOW.md §1).
 *
 * STRATEGY (WORKFLOW.md, and the reason it is worth the discipline):
 *   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 `.futures-page`, so this file is inert on any other page
 * (the pattern proven in production by /r/10 `.about-page`).
 *
 * HOW THE REFERENCE'S TOKENS COMPARE TO OURS (its own :root is one inline declaration on the
 * page root — line 41 of the reference):
 *   IDENTICAL, so we use ours:
 *     --ink #0F1A4F = ink-deep · --ink-soft #4D5B7F · --ink-mute #8893B0 · --accent #EC634B =
 *     coral-500 · --accent-soft #FFE7DD = coral-100 · --paper #FFFFFF · --sand #F4F5F9 =
 *     page-bg · --rule #E6E8EF = rule · --dark #0B1023 = dark-band · --navy #0F1A4F ·
 *     --mono 'IBM Plex Mono' = font-label. Status greens/ambers/reds match ok-green,
 *     ok-green-bright (#34D07F), warn/ light-yellow. shadow-dark (0 30px 70px rgba(4,8,24,.4))
 *     is an exact match.
 *   DIFFERENT, so declared below (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 grey (no token)
 *     #9AA6C2  body copy ON DARK        (decision 15 maps this to ink-mute)
 *     #C9D1E6  list/bright copy ON DARK
 *     #7E8AA6  dim mono labels ON DARK
 *     #5C688A  the dimmest copy ON DARK
 *     #B9C3DC  the audit pill's text ON DARK
 *     grade chips: #8A6116/#FEF7E7 (C) and #B3402C/#FCE6E1 (D) — no tokens for either pair
 *     chat success strip: #E9F7EE / #BFE7CC
 *   Seven shadows have no token (listed as --dc-shadow-* below).
 *
 *   GEOMETRY: the reference container is max-width 1200px with a 24px section gutter; our DS
 *   is 1224px / 32px. Overridden HERE only — never in app/.
 * ============================================================================================ */

.futures-page {
  /* reference-only values, all read off the file */
  --dc-sand-2: #E9ECF3;           /* chip fills, progress tracks */
  --dc-on-dark-body: var(--color-on-dark-body);     /* body copy on dark */
  --dc-on-dark-bright: var(--color-on-dark-bright);   /* list items on dark */
  --dc-on-dark-mute: var(--color-on-dark-faint);     /* the dimmest caption on dark */

  --dc-shadow-hero:  0 30px 80px rgba(15, 26, 79, 0.14);  /* hero mock (our shadow-deep is .12) */
  --dc-shadow-panel: 0 24px 60px rgba(15, 26, 79, 0.06);  /* the white inset panels */
  --dc-shadow-panel-8: 0 24px 60px rgba(15, 26, 79, 0.08);
  --dc-shadow-tool:  0 20px 60px rgba(15, 26, 79, 0.07);  /* toolkit panel */
  --dc-shadow-chat:  0 20px 50px rgba(15, 26, 79, 0.08);  /* the family chat mock */
  --dc-shadow-card:  0 14px 40px rgba(15, 26, 79, 0.07);  /* journey + bursary cards */
  --dc-shadow-flat:  0 10px 30px rgba(15, 26, 79, 0.05);  /* the Bursary+ strip */
  --dc-shadow-tile:  0 8px 22px rgba(15, 26, 79, 0.08);   /* in-year icon tiles */
  --dc-shadow-audit: 0 40px 90px rgba(4, 8, 24, 0.5);     /* the audit card, on dark */
  --dc-shadow-hover: 0 16px 40px rgba(15, 26, 79, 0.1);   /* resource card hover */

  --dc-ease: cubic-bezier(.2, .8, .2, 1);

  /* The reference sets the body face on its page root; the DS does not set Inter on body/.app
     (a decided non-issue), so without this every paragraph falls back to the system sans. */
  font-family: var(--font-sans);
  background: var(--color-page-bg);
}

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

/* ── Vertical rhythm: hand-tuned per section in the reference ────────────────────────────── */
/* Not a scale — the reference's own values, section by section, which our padding modifiers
   cannot express. `dc-py-<top>-<bottom>` is deliberately literal so a later normalisation pass
   maps each one to a DS step or explains why it should not. */

.futures-page .dc-py-0-96 { padding-top: 0;     padding-bottom: 96px; }

.futures-page .dc-py-88 { padding-top: 88px;  padding-bottom: 88px; }

/* ── Display type: the reference clamps every headline individually ──────────────────────── */
/* Proxima 700 throughout (the quote is 500 — see .dc-q-24). Named by the clamp maximum; where
   two sections share a maximum but differ in tracking or minimum, the second carries a suffix
   rather than being silently rounded into the first. */
.futures-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(.futures-page [class*="dc-t-"]) {
  margin: 0;
  text-wrap: balance;
}

.futures-page .dc-t-80 { font-size: clamp(38px, 6vw,   80px); line-height: 1.0;  letter-spacing: -0.04em; }   /* closer */
   /* hero h1 */
  /* toolkit · journey · results */
   /* journey stage number */
   /* Emma */
   /* the problem */
   /* agents & boarding */
  /* Bursary+ */
.futures-page .dc-t-48 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -0.03em; }   /* audit */
  /* resources */
   /* in-year */
  /* Emma for families */
.futures-page .dc-t-42 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1;  letter-spacing: -0.025em; }  /* a day in the life */
   /* journey stage title */
  /* toolkit panel title */
                        /* "one pipeline" card */
                       /* card / strip titles */
                      /* resource card titles */
                     /* in-year feature titles */
                        /* Bursary+ step titles */
                        /* the Bursary+ strip title */

/* ── Body copy steps (Inter), named by px ───────────────────────────────────────────────── */
.futures-page .dc-lede { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); }

.futures-page .dc-body-165 { font-size: 16.5px; line-height: 1.6;  margin: 0; }
.futures-page .dc-body-16 { font-size: 16px;   line-height: 1.6;  color: var(--color-ink-soft); margin: 0; }
.futures-page .dc-body-155 { font-size: 15.5px; line-height: 1.6;  color: var(--color-ink-soft); margin: 0; }

.futures-page .dc-body-135 { font-size: 13.5px; line-height: 1.5;  color: var(--color-ink-soft); margin: 0; }
.futures-page .dc-body-13 { font-size: 13px;   line-height: 1.5;  color: var(--color-ink-soft); margin: 0; }
.futures-page .dc-body-125 { font-size: 12.5px; line-height: 1.45; color: var(--color-ink-soft); margin: 0; }

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

/* ── The mono labels (IBM Plex Mono 500 = our font-label) ────────────────────────────────── */
/* Confirmed against the reference: the eyebrow really is the mono face at 12.5px / 0.08em,
   which is exactly font-label + text-label-l + tracking-label. Only the hero's is different
   (12px, 0.09em, ink-mute); every other section eyebrow is coral. */
.futures-page [class*="dc-label-"],
.futures-page .dc-eyebrow {
  font-family: var(--font-label);
  font-weight: 500;
  text-transform: uppercase;
}

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

.futures-page .dc-eyebrow-hero { font-size: 12px;   letter-spacing: 0.09em; color: var(--color-ink-mute); }
.futures-page .dc-eyebrow-row { display: inline-flex; align-items: center; gap: 11px; }

.futures-page .dc-label-105 { font-size: 10.5px; letter-spacing: 0.08em; color: var(--color-ink-mute); }
.futures-page .dc-label-10 { font-size: 10px;   letter-spacing: 0.08em; color: var(--color-ink-mute); }
.futures-page .dc-label-95 { font-size: 9.5px;  letter-spacing: 0.07em; color: var(--color-ink-mute); }
.futures-page .dc-label-9 { font-size: 9px;    letter-spacing: 0.07em; color: var(--color-ink-mute); }

/* the criteria line under the audit lede — mono, wide leading, not uppercase-transformed
   (the copy is already uppercase in the reference) */

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

   /* the four Bursary+ cards */

/* on-dark copy colours */
.futures-page .dc-on-dark-body { color: var(--dc-on-dark-body); }
.futures-page .dc-on-dark-bright { color: var(--dc-on-dark-bright); }

.futures-page .dc-on-dark-mute { color: var(--dc-on-dark-mute); }

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

.futures-page .dc-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }

.futures-page .dc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.futures-page .dc-measure-820 { max-width: 820px; }
.futures-page .dc-measure-780 { max-width: 780px; }

/* the reference measures several paragraphs in `ch` rather than px — kept as `ch` so the
   wrap point matches at any size */

.futures-page .dc-measure-52c { max-width: 52ch; }

.futures-page .dc-measure-56c { max-width: 56ch; }
.futures-page .dc-measure-58c { max-width: 58ch; }
.futures-page .dc-measure-62c { max-width: 62ch; }
.futures-page .dc-measure-44c { max-width: 44ch; }

/* This 991px block was dead as well as invented: every rule in it was re-stated by the second
   991px block further down (which is the one that survives, moved to the reference's own 1080px).
   The reference has no 991px rule at all. */

/* ── Literal spacing helpers ─────────────────────────────────────────────────────────────── */
/* The reference's rhythm is full of odd values (18, 22, 26, 30, 34px) that the 4px Tailwind
   scale cannot express, and `mt-4.5`-style dynamic steps are not in the compiled surface
   because prototypes/ is not a Tailwind scan source (WORKFLOW.md §4 — the same constraint a
   CMS block has). So the odd ones are literal here; every EVEN multiple-of-4 gap in the markup
   still uses a plain utility. */
/* The class audit (WORKFLOW.md §4) showed which "ordinary" steps are NOT in the compiled
   surface either: mt-1.5 / mt-2.5 / mt-7 / mt-9 / mt-11 / mb-1.5 / mb-2.5 / mb-9 / gap-7 /
   pt-7 all render as nothing, as do arbitrary values like max-w-[130px]. They are literal here
   for the same reason — this is what a CMS block would hit. */
.futures-page .dc-mt-6 { margin-top: 6px; }
.futures-page .dc-mt-10 { margin-top: 10px; }
.futures-page .dc-mt-14 { margin-top: 14px; }
.futures-page .dc-mt-18 { margin-top: 18px; }
.futures-page .dc-mt-22 { margin-top: 22px; }

.futures-page .dc-mt-30 { margin-top: 30px; }
.futures-page .dc-mt-36 { margin-top: 36px; }

.futures-page .dc-mb-6 { margin-bottom: 6px; }

.futures-page .dc-mb-14 { margin-bottom: 14px; }

.futures-page .dc-gap-9 { gap: 9px; }

/* ── Glows: the DS .section-glow with the reference's sizes, corners and blurs ───────────── */
/* .section-glow is a fixed 520px at -140/-180; this page uses five different sizes and one
   bottom-anchored corner. The coral alpha stays the DS 16% everywhere except the hero, which is
   visibly lighter in the reference (11%). */
.futures-page .dc-glow-720 { width: 720px; height: 720px; }
.futures-page .dc-glow-520 { width: 520px; height: 520px; }

.futures-page .dc-glow-560 { width: 560px; height: 560px; }

/* ── Small shared devices ────────────────────────────────────────────────────────────────── */

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


/* Emma's note inside a card / panel — light grey strip, coral disc, one line.
   Carries no margin of its own: the reference uses 22px in the journey and 24px in the toolkit,
   so the gap is set at the use site with one of the literal spacing helpers below. */

/* the hairline-topped footer line inside a mock card */

/* icon tile — a rounded square holding one coral glyph (in-year, Bursary+, the journey strip) */

/* icon + copy row (in-year, the widget's four points, the toolkit bullets) */

/* the "your team never" crosses inside the journey's dark card */

/* chips — the reference's pill vocabulary. Coloured variants for the two dark panels. */

/* None of the reference's chips, flags or grade pills declares a line-height, so they render at
   `normal`; the DS .badge they ride on sets one, which would quietly make every chip row taller. */

/* the two badge-shaped section openers (audit, agents, Bursary+, "NEW") */

/* ── 1 · Hero: the offer mock ───────────────────────────────────────────────────────────── */

/* the hero's "grade your journey" link */

.futures-page .dc-link-inline { color: var(--color-coral-500); font-weight: 600; white-space: nowrap; }

/* ── 2 · Social proof: the marquee ──────────────────────────────────────────────────────── */
/* The DS .marquee pattern supplies the seamless loop and the 8%/92% edge mask — identical to
   the reference. Only the cell metrics differ (62px tall, 132px wide, 48px gap, 55s). */

/* ── 3 · The patchwork problem ──────────────────────────────────────────────────────────── */

/* ── 4 · A day in the life: the two timelines ───────────────────────────────────────────── */

/* the reference sets no line-height on these labels (so: `normal`), and 1.4 on the very last
   row of the Admissions+ card only — measured, and worth keeping because 13px × 4 rows × 2
   cards is where a wrong leading shows up as a whole section running long */

/* ── 5 · Admissions audit ───────────────────────────────────────────────────────────────── */
/* The search row is a real <input> — the DS .input is a full-width bordered field, and this is
   a borderless field inside a white pill with the button attached, so it is written here. */

/* the reference's amber and red grade chips have no token pair of ours that matches */

/* the same chip as a pill — the toolkit's ADD-ON / AUTUMN 2026 tags */

/* ── 6 · The toolkit: a pill tablist over one panel ─────────────────────────────────────── */
/* The DS tabs controller drives it from markup (aria-selected + hidden panels); these are the
   reference's pill metrics. Inactive = white on rule, active = navy fill with a coral icon. */

/* The reference mixes 7 real tabs with 2 plain links (Bursary+, Agents & Boarding) in ONE
   wrapping row. `display: contents` lets the [role=tablist] hold only the tabs — which is what
   the role means — while its children still wrap in the outer row alongside the two links. */

/* the classes the tabs controller toggles. They must exist HERE and be named in the markup's
   data-* attributes — a class only ever named in JS would never be styled. */

/* ── 8 · Journey: a 7-stage stepper (NOT a stack, and not a carousel) ───────────────────── */
/* Measured: one stage is shown at a time behind a 7-node progress rail with prev/next, so the
   section is ~1030px in the reference rather than the ~5,000px a stacked list would be. Built
   on the DS tabs controller (nodes = tabs, stages = panels): with JS off stage 01 shows and the
   rail is static, which is the correct progressive-enhancement floor. */

/* toggled by the tabs controller */

/* the Bursary+ cross-sell strip at the foot of the journey panel */

/* ── 9 · Agents & Boarding: the two locked mocks ────────────────────────────────────────── */

/* ── 11 · Emma: the stat pill on the dark band ──────────────────────────────────────────── */
.futures-page .dc-stat-pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 13px 20px 13px 16px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.16);
}
.futures-page .dc-stat-pill-num {
  flex: none; font-family: var(--font-heading); font-weight: 700; font-size: 22px;
  line-height: 1; letter-spacing: -0.02em; color: var(--color-coral-500);
}

/* The DS .prompt-card was extracted from exactly this device, so it already matches the
   reference: 18px radius, shadow-dark, the mono label, the pulsing 34px coral avatar, the
   min-height on the typed line, the caret, the reply chip and 12.5px pills above a rule. The
   only measurable delta on this page is the card's own padding (DS 20/24/16 → 22/24/18). */

/* the guardrail list: the reference's on-dark cross is #9AA6C2, one step brighter than the DS
   ink-mute, and its rows sit 15px apart rather than 16 */
.futures-page .section-dark .check-list-no > i { color: var(--dc-on-dark-body); }

/* ── 12 · Emma for families: the chat mock ──────────────────────────────────────────────── */

/* the "new enquiry created" confirmation — a soft green strip with no matching token pair */

/* ── 13 · Results: quote carousel + stat column + ticker ────────────────────────────────── */

/* ── 14 · Bursary+ ──────────────────────────────────────────────────────────────────────── */

/* ── 15 · Resources ─────────────────────────────────────────────────────────────────────── */

/* ── 16 · Closer ────────────────────────────────────────────────────────────────────────── */
.futures-page .dc-closer-actions { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 34px; flex-wrap: wrap; }
/* A 480px override narrowing those 40px sides to 24 was removed: 480px is not one of the package's
   breakpoints (they are 1080/1000/940/900/800/720/680/640/620/560) and the reference keeps the 40px
   sides at every width. */

/* ── Reduced motion ─────────────────────────────────────────────────────────────────────── */
/* No blanket `* { animation: none !important }` here: every animation on this page comes from a
   DS component (.marquee-track, .section-glow-drift, .prompt-card-ring/-caret) and each of those
   already stops itself under reduced motion. All that is left is the hover lifts. */

/* ════════════════════════════════════════════════════════════════════════════════════════════
 * APPLICAA FUTURES — this page's own devices. Every value read out of "Applicaa Futures.dc.html".
 * The page's rhythm is 88px, not the 96 the rest of the batch uses.
 * `line-height: normal` below is deliberate wherever the reference used the `font:` shorthand
 * without a `/lh` — the shorthand resets it.
 * ════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Padding steps ─────────────────────────────────────────────────────────────────────────── */
.futures-page .dc-py-88 { padding-top: 88px;  padding-bottom: 88px; }
.futures-page .dc-py-0-88 { padding-top: 0;     padding-bottom: 88px; }
.futures-page .dc-py-0-72 { padding-top: 0;     padding-bottom: 72px; }
.futures-page .dc-py-0 { padding-top: 0;     padding-bottom: 0; }

/* ── Display steps ─────────────────────────────────────────────────────────────────────────── */
.futures-page .dc-t-84 { font-size: clamp(44px, 6vw,   84px); line-height: 1.0;  letter-spacing: -0.04em; }
.futures-page .dc-t-54f { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -0.03em; }
.futures-page .dc-t-52f { font-size: clamp(28px, 4vw,   52px); line-height: 1.04; letter-spacing: -0.03em; }
.futures-page .dc-t-50 { font-size: clamp(28px, 3.8vw, 50px); line-height: 1.06; letter-spacing: -0.032em; }
.futures-page .dc-t-48 { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
.futures-page .dc-t-44f { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.03em; }
.futures-page .dc-t-42 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1;  letter-spacing: -0.025em; }
/* The NEET stat numbers are WHITE on the dark glass, not coral — the coral here was a port slip.
   Used 3x, all in the one block. */
.futures-page .dc-t-42n { font-family: var(--font-heading); font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); line-height: 1; letter-spacing: -0.03em; color: var(--color-paper); margin: 0; }
.futures-page .dc-t-38 { font-size: clamp(24px, 3vw,   38px); line-height: 1.12; letter-spacing: -0.025em; }
.futures-page .dc-t-26n { font-family: var(--font-heading); font-weight: 700; font-size: 26px; line-height: normal; color: var(--color-ink-deep); margin: 0; }
.futures-page .dc-t-18j { font-size: 18px;   line-height: normal; letter-spacing: -0.016em; }
.futures-page .dc-t-175f { font-size: 17.5px; line-height: 1.28; letter-spacing: -0.014em; }
.futures-page .dc-t-175e { font-size: 17.5px; line-height: 1.25; }
.futures-page .dc-t-16r { font-size: 16px;   line-height: 1.28; letter-spacing: -0.012em; }
.futures-page .dc-t-16t { font-size: 16px;   line-height: normal; letter-spacing: -0.014em; }
.futures-page .dc-t-135n { font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; line-height: 1.45; margin: 0; }
.futures-page .dc-t-125b { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: normal; }
/* Colour as an overridable default (§2 rule 5): "Tutor inputs" is ink-soft in the reference,
   its two siblings in the same row group are ink-deep. */
:where(.futures-page .dc-t-125b) { color: var(--color-ink-deep); }
.futures-page .dc-t-12b { font-family: var(--font-heading); font-weight: 600; font-size: 12px; line-height: normal; color: var(--color-ink-deep); margin: 0; }

/* the small-type steps opt out of the scaffold's blanket text-wrap: balance — the reference
   balances only its section headings (`wrap` is the reset; `auto` is not a valid value) */
.futures-page .dc-t-18j, .futures-page .dc-t-175f, .futures-page .dc-t-175e,
.futures-page .dc-t-16r, .futures-page .dc-t-16t, .futures-page .dc-t-135n,
.futures-page .dc-t-125b, .futures-page .dc-t-12b, .futures-page .dc-t-26n { text-wrap: wrap; }

.futures-page .dc-q-15 {
  font-family: var(--font-heading); font-weight: 500; font-size: 15px; line-height: 1.5;
  color: var(--color-ink-deep); margin: 0; text-wrap: pretty;
}

/* ── Body steps ────────────────────────────────────────────────────────────────────────────── */
.futures-page .dc-body-15 { font-size: 15px;   line-height: 1.6;  margin: 0; }
.futures-page .dc-body-14-155 { font-size: 14px;   line-height: 1.55; color: var(--color-ink-soft); margin: 0; }
.futures-page .dc-body-135-155 { font-size: 13.5px; line-height: 1.55; margin: 0; }
.futures-page .dc-label-85 { font-family: var(--font-label); font-weight: 500; font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-mute); margin: 0; }

/* ── Measures ──────────────────────────────────────────────────────────────────────────────── */
.futures-page .dc-measure-820 { max-width: 820px; }
.futures-page .dc-measure-800 { max-width: 800px; }
.futures-page .dc-measure-780 { max-width: 780px; }
.futures-page .dc-measure-760 { max-width: 760px; }
.futures-page .dc-measure-660 { max-width: 660px; }
.futures-page .dc-measure-560 { max-width: 560px; }
.futures-page .dc-measure-56c { max-width: 56ch; }
.futures-page .dc-measure-58c { max-width: 58ch; }
.futures-page .dc-measure-62c { max-width: 62ch; }

/* ── Spacing additions ─────────────────────────────────────────────────────────────────────── */
.futures-page .dc-mt-3 { margin-top: 3px; }
.futures-page .dc-mt-8 { margin-top: 8px; }
.futures-page .dc-mt-15 { margin-top: 15px; }
.futures-page .dc-mt-16 { margin-top: 16px; }
.futures-page .dc-mt-20 { margin-top: 20px; }
.futures-page .dc-mt-24 { margin-top: 24px; }
.futures-page .dc-mt-40 { margin-top: 40px; }
.futures-page .dc-mt-56 { margin-top: 56px; }
.futures-page .dc-mt-12 { margin-top: 12px; }
.futures-page .dc-mt-10 { margin-top: 10px; }
.futures-page .dc-mt-6 { margin-top: 6px; }
.futures-page .dc-mb-16 { margin-bottom: 16px; }
.futures-page .dc-mb-24 { margin-bottom: 24px; }
.futures-page .dc-mb-30 { margin-bottom: 30px; }
.futures-page .dc-mb-6 { margin-bottom: 6px; }

/* ── Glows ─────────────────────────────────────────────────────────────────────────────────── */
.futures-page .dc-glow-720 { width: 720px; height: 720px; }
.futures-page .dc-glow-300 { width: 300px; height: 300px; }
.futures-page .dc-glow-top {
  left: 50%; top: -420px; right: auto; transform: translateX(-50%); filter: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-coral-500) 10%, transparent), transparent 62%);
}
.futures-page .dc-glow-track { right: -160px; top: -220px; filter: blur(14px); }
.futures-page .dc-glow-one { right: -190px; top: -240px; filter: blur(12px); }
/* the glow inside a CARD, not a section — 22% coral, no blur */
.futures-page .dc-glow-job {
  right: -120px; bottom: -150px; left: auto; top: auto; filter: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-coral-500) 22%, transparent), transparent 62%);
}

/* ── 1 · Hero: the wordmark and the loop card ─────────────────────────────────────────────── */
.futures-page .dc-futures-mark {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: 1;
  letter-spacing: -0.01em; color: var(--color-ink-deep); text-transform: none;
}
.futures-page .dc-loop-card {
  max-width: 760px; margin: 44px auto 0;
  background: #fff; border: 1px solid var(--color-rule); border-radius: var(--radius-4\.5);
  box-shadow: 0 30px 80px rgba(15, 26, 79, 0.12); padding: 22px 26px;
}
.futures-page .dc-grid-loopcard { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.futures-page .dc-loop-box { border: 1px solid var(--color-rule); border-radius: var(--radius-3); padding: 14px 12px; text-align: center; }
.futures-page .dc-loop-box-on { border: 1.5px solid var(--color-coral-500); }
.futures-page .dc-loop-box-icon { font-size: 15px; color: var(--color-coral-500); }
.futures-page .dc-loop-box-icon-navy { color: var(--color-ink-deep); }
.futures-page .dc-loop-box-icon-ok { color: var(--color-ok-green); }
.futures-page .dc-loop-arrow { color: var(--color-ink-mute); font-size: 13px; }
.futures-page .dc-loop-note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px 0 0; padding: 9px 13px;
  border: 1px dashed var(--color-rule); border-radius: var(--radius-2\.5); background: var(--color-coral-100);
  font-family: var(--font-label); font-weight: 500; font-size: 9.5px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-coral-500);
}
.futures-page .dc-loop-note i { font-size: 10px; }

/* ── 2 · The struck chip row — the DS .badge-struck with the reference's metrics ───────────── */
.futures-page .dc-chip-struck {
  font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: normal;
  color: var(--color-ink-soft); background: var(--color-page-bg); border: 1px solid var(--color-rule);
  border-radius: var(--radius-full); padding: 7px 14px;
}

/* ── 3 · The two jobs ─────────────────────────────────────────────────────────────────────── */
.futures-page .dc-grid-jobs {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px; align-items: stretch;
}
.futures-page .dc-job {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--color-paper); border-radius: var(--radius-4\.5);
  box-shadow: 0 14px 40px rgba(15, 26, 79, 0.07); padding: 26px 28px;
  transition: transform 220ms var(--dc-ease), box-shadow 220ms ease;
}
.futures-page .dc-job:hover { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(15, 26, 79, 0.13); }
.futures-page .dc-job-dark { background: var(--color-dark-band); box-shadow: 0 24px 56px rgba(4, 8, 24, 0.3); }
.futures-page .dc-job-dark:hover { box-shadow: 0 32px 70px rgba(4, 8, 24, 0.42); }
.futures-page .dc-job-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: var(--font-label); font-weight: 500; font-size: 9.5px;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-coral-500);
}
.futures-page .dc-job-more {
  margin-top: auto; padding-top: 14px;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px; color: var(--color-coral-500);
}
.futures-page .dc-job-more i { font-size: 9px; }
.futures-page .dc-job-arrow { display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--color-ink-mute); }
.futures-page .dc-tile-coral-42 {
  display: inline-flex; width: 42px; height: 42px; border-radius: var(--radius-3);
  background: var(--color-coral-500); align-items: center; justify-content: center;
}
.futures-page .dc-tile-coral-42 i { font-size: 15px; color: #fff; }
/* the reference's own pale green pill — #E4F6EA has no token */
.futures-page .dc-pill-free-sm {
  font-family: var(--font-label); font-weight: 600; font-size: 8.5px; line-height: normal;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-ok-green); background: #E4F6EA; border-radius: var(--radius-full); padding: 3px 8px;
}
.futures-page .dc-pill-upgrade {
  font-family: var(--font-label); font-weight: 600; font-size: 9.5px; line-height: normal;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-coral-500); background: var(--color-coral-100);
  border-radius: var(--radius-full); padding: 4px 10px;
}

/* ── 4 · Part one ─────────────────────────────────────────────────────────────────────────── */
.futures-page .dc-grid-part { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.futures-page .dc-tray { display: flex; justify-content: center; background: var(--color-page-bg); border-radius: var(--radius-4); padding: 32px 0; }
.futures-page .dc-refcard {
  width: 290px; background: #fff; border: 1px solid var(--color-rule); border-radius: var(--radius-7);
  box-shadow: 0 20px 60px rgba(15, 26, 79, 0.14); padding: 20px 18px;
}
.futures-page .dc-ref-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--color-rule); border-radius: var(--radius-3); padding: 11px 13px;
}
.futures-page .dc-ref-note {
  font-family: var(--font-label); font-weight: 500; font-size: 9px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-ink-mute);
  margin: 8px 0 0; padding: 0 2px;
}
.futures-page .dc-ref-foot {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--color-rule);
  /* Reference: 10.5px / 400 / ink-mute, as typed - not an 8.5px uppercase coral label. */
  font-family: var(--font-label); font-weight: 400; font-size: 10.5px;
  letter-spacing: normal; text-transform: none; color: var(--color-ink-mute);
}
.futures-page .dc-card-ref { background: var(--color-paper); border-radius: var(--radius-4); box-shadow: var(--dc-shadow-card); padding: 24px 26px; }
.futures-page .dc-tile-40s {
  display: inline-flex; width: 40px; height: 40px; border-radius: var(--radius-3);
  background: var(--color-page-bg); align-items: center; justify-content: center;
}
.futures-page .dc-tile-40s i { font-size: 15px; color: var(--color-coral-500); }

/* ── 5 · The dark ApplicaaOne panel ───────────────────────────────────────────────────────── */
.futures-page .dc-panel-dark-one {
  background: var(--color-dark-band); color: #fff; border-radius: var(--radius-5\.5);
  padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 52px);
}
.futures-page .dc-glass-sm {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-4); padding: 24px 26px;
}
.futures-page .dc-tile-glass {
  display: inline-flex; width: 40px; height: 40px; border-radius: var(--radius-3);
  background: rgba(255, 255, 255, 0.08); align-items: center; justify-content: center;
}
.futures-page .dc-tile-glass i { font-size: 15px; color: var(--color-coral-500); }

/* ── 6 · The destinations card ────────────────────────────────────────────────────────────── */
.futures-page .dc-panel-white {
  background: var(--color-paper); border-radius: var(--radius-5\.5);
  box-shadow: 0 24px 60px rgba(15, 26, 79, 0.06);
  padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 56px);
}
.futures-page .dc-grid-half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.futures-page .dc-destcard {
  background: #fff; border: 1px solid var(--color-rule); border-radius: var(--radius-4);
  padding: 20px 22px; box-shadow: 0 12px 32px rgba(15, 26, 79, 0.08);
}
.futures-page .dc-dest-box { border: 1px solid var(--color-rule); border-radius: var(--radius-3); padding: 14px; }
.futures-page .dc-dest-box-risk { border: 1.5px solid var(--color-coral-500); position: relative; }
.futures-page .dc-pill-act {
  position: absolute; top: -9px; right: 10px;
  font-family: var(--font-label); font-weight: 600; font-size: 8.5px; line-height: normal;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
  background: var(--color-coral-500); border-radius: var(--radius-full); padding: 3px 8px;
}
.futures-page .dc-destcard-foot {
  font-size: 12px; line-height: 1.5; color: var(--color-ink-soft);
  margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--color-rule);
}

/* ── 7 · The statutory band ───────────────────────────────────────────────────────────────── */
.futures-page .dc-glass-neet { padding: 24px 26px; }
.futures-page .dc-sources {
  display: flex; align-items: flex-start; gap: 10px; margin: 24px 0 0;
  color: var(--dc-on-dark-mute);
}
.futures-page .dc-sources > i { flex: none; margin-top: 3px; font-size: 12px; }
.futures-page .dc-sources .dc-body-125 { color: var(--dc-on-dark-mute); }

/* ── 8 · The two tiers ────────────────────────────────────────────────────────────────────── */
.futures-page .dc-tier {
  background: var(--color-paper); border-radius: var(--radius-4\.5);
  box-shadow: 0 14px 40px rgba(15, 26, 79, 0.07); padding: 26px 28px;
}
.futures-page .dc-tier-dark { background: var(--color-dark-band); box-shadow: 0 24px 56px rgba(4, 8, 24, 0.3); }
.futures-page .dc-tier-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.futures-page .dc-tier-tick { font-size: 10px; color: var(--color-ok-green); margin-right: 9px; }
.futures-page .dc-tier-plus { font-size: 10px; color: var(--color-coral-500); margin-right: 9px; }

/* ── 9 · The numbered steps ───────────────────────────────────────────────────────────────── */
.futures-page .dc-steps-list { border-top: 1px solid var(--color-rule); }
.futures-page .dc-step-row {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 22px 0; border-bottom: 1px solid var(--color-rule);
}
.futures-page .dc-grid-steprow {
  flex: 1; min-width: 0;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 6px 28px; align-items: baseline;
}
.futures-page .dc-tile-46n {
  flex: none; position: relative; display: inline-flex; width: 46px; height: 46px;
  border-radius: var(--radius-3\.5); background: var(--color-paper);
  align-items: center; justify-content: center; box-shadow: var(--dc-shadow-tile);
}
.futures-page .dc-tile-46n > i { font-size: 16px; color: var(--color-coral-500); }
.futures-page .dc-step-badge {
  position: absolute; top: -7px; right: -7px;
  font-family: var(--font-label); font-weight: 700; font-size: 9px; line-height: normal;
  color: #fff; background: var(--color-ink-deep); border-radius: var(--radius-full); padding: 3px 6px;
}

/* ── 10 · Student quotes ──────────────────────────────────────────────────────────────────── */
.futures-page .dc-squote {
  margin: 0; background: var(--color-paper); border-radius: var(--radius-4);
  box-shadow: 0 14px 40px rgba(15, 26, 79, 0.07); padding: 26px 28px;
}
.futures-page .dc-quote-mark { font-size: 14px; color: var(--color-coral-500); }

/* ── 11 · Emma cards ──────────────────────────────────────────────────────────────────────── */
.futures-page .dc-glass-emma { border-radius: var(--radius-4\.5); padding: 26px; }
.futures-page .dc-glass-held { border-style: dashed; border-color: rgba(255, 255, 255, 0.25); }
/* the amber "held" label — the reference's own #F2B01E, no token matches */
.futures-page .dc-held { color: #F2B01E; }

/* ── 14 · The related strip ───────────────────────────────────────────────────────────────── */
.futures-page .dc-related {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 12px 16px; text-align: center; margin: 0;
  border-top: 1px solid var(--color-rule); padding-top: 28px;
  font-size: 14.5px; line-height: 1.5; color: var(--color-ink-soft);
}
.futures-page .dc-related-link {
  font-family: var(--font-heading); font-weight: 600; font-size: 14.5px;
  color: var(--color-coral-500); text-decoration: none;
}
.futures-page .dc-related-link:hover { color: var(--color-ink-deep); }
.futures-page .dc-related-link i { font-size: 10px; }

/* ── Grids used across sections ───────────────────────────────────────────────────────────── */
.futures-page .dc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.futures-page .dc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.futures-page .dc-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }

/* ── Responsive: the reference's own breakpoints, not ours ───────────────────────────────────
 * This was a 991px block; the reference uses 991px nowhere. Its collapse happens at 1080px, and
 * every rule below is one of the reference's own, moved to it:
 *   [data-jobsgrid] → 1 col · [data-afpartgrid] → 1 col · [data-afrow] (the step rows) → 1 col ·
 *   [data-aftier] → 1 col · [data-afneet] [data-aftrack] [data-afquote] → 1 col ·
 *   [data-afgrid] [data-afstudent] → 2 cols (then 1 col at 640, below) ·
 *   [data-jobsgrid] > [aria-hidden] → display: none
 * Three changes fall out of that:
 *   · the chevrons between the three job cards are HIDDEN at 1080, not rotated 90° (we rotated);
 *   · `.dc-grid-2` is scoped to #tracker, because only the tier pair is `[data-aftier]` — the
 *     dest-box pair inside the destination card has no hook and the reference never collapses it;
 *   · the `.dc-panel-dark-one` padding override is gone — reference panels pad with `clamp()`, so
 *     there is no rule to move (WORKFLOW.md §5b: a breakpoint we added is a divergence).
 * `.dc-grid-half` is dropped for the same reason: the "Destinations tracked" panel is a bare
 * `1fr 1fr` with no data hook and no media rule at any width. */
@media (max-width: 1080px) {
  .futures-page .dc-grid-jobs,
  .futures-page .dc-grid-part,
  .futures-page .dc-grid-3,
  .futures-page .dc-grid-steprow,
  .futures-page #tracker .dc-grid-2 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .futures-page .dc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .futures-page .dc-job-arrow { display: none; }
}

/* 640px IS one of the reference's breakpoints, and `[data-afgrid], [data-afstudent] → 1 column` is
   its rule (our `.dc-grid-4`). The other three here are ours, kept because they are phone-only and
   this is a real package breakpoint — but they are extras: the reference collapses neither the
   dest-box pair nor the hero loop card at any width. */
@media (max-width: 640px) {
  .futures-page .dc-grid-4, .futures-page .dc-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .futures-page .dc-grid-loopcard { grid-template-columns: minmax(0, 1fr); }
  .futures-page .dc-loop-arrow { transform: rotate(90deg); }
}

/* ── The closer's headline is FULL PANEL WIDTH ────────────────────────────────────────────── */
/* Measured: the reference's closing h2 has no max-width, so it spans the panel's 1120px inner and
   wraps to two lines. This page is where that first bit: the old DS `.cta-section-inner` capped at
   720px, which pushed this long headline ("Ready to end reference season as you know it?") to three
   lines and the section 84px long, so this file cancelled the cap. The other three closers in the
   batch have short headlines, so only this one exposed it.
   RESOLVED IN THE DS (2026-08-14): `.cta-section-inner` is gone, the band centres itself, and the
   44ch measure moved onto `.cta-section-desc` — which is what the reference caps. The override this
   comment used to introduce has been deleted; nothing page-local is needed here any more. */
/* the hero loop card's Emma line, on a hairline above (missed on the first pass and worth 40px) */
.futures-page .dc-loop-emma {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--color-rule);
  font-size: 12.5px; line-height: 1.45; color: var(--color-ink-soft);
}

/* ── PHONE (≤640) — beyond the reference, deliberately ───────────────────────────────────── */
/* The references pad in literal px with no media query at all, so at 390px they clip their own
   content (STATUS §5 records that as the defect most worth fixing at source). These rules fix the
   text loss WITHOUT hiding anything: the half-split panel stacks. */
@media (max-width: 640px) {
  .futures-page .dc-grid-half { grid-template-columns: minmax(0, 1fr); }
}