/* MAT Management+ — page CSS
 * ============================================================================================
 * GOAL: a FAITHFUL (1:1) reproduction of the reference
 *   "MAT Management Plus.dc.html"  (16 sections, 784 inline styles — the package's largest)
 * 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 `.mat-management-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.
 * ============================================================================================ */

.mat-management-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 */
  --dc-shadow-calc:  0 18px 48px rgba(15, 26, 79, 0.07);   /* the calculator card */
  --dc-shadow-lift:  0 16px 40px rgba(15, 26, 79, 0.09);   /* toolkit card hover */
  --dc-shadow-feat:  0 14px 40px rgba(15, 26, 79, 0.07);   /* scenario cards */
  --dc-shadow-res-dark: 0 16px 40px rgba(4, 8, 24, 0.35);  /* the dark 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. */
.mat-management-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. */
.mat-management-page .dc-py-124-64 { padding-bottom: 64px; }
.mat-management-page .dc-py-24-40  { padding-top: 24px;  padding-bottom: 40px; }
.mat-management-page .dc-py-44-48  { padding-top: 44px;  padding-bottom: 48px; }
.mat-management-page .dc-py-104-44 { padding-top: 104px; padding-bottom: 44px; }
.mat-management-page .dc-py-0-96   { padding-top: 0;     padding-bottom: 96px; }
.mat-management-page .dc-py-104    { padding-top: 104px; padding-bottom: 104px; }
.mat-management-page .dc-py-40-96  { padding-top: 40px;  padding-bottom: 96px; }
.mat-management-page .dc-py-96     { padding-top: 96px;  padding-bottom: 96px; }

/* The one section whose own padding is a clamp (the dark scale band) */

/* Two sections are hairlined top and bottom rather than tinted (journey, results) */
.mat-management-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). */
.mat-management-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(.mat-management-page [class*="dc-t-"]) {
  margin: 0;
  text-wrap: balance;
}

.mat-management-page .dc-t-80  { font-size: clamp(38px, 6vw,   80px); line-height: 1.0;  letter-spacing: -0.04em; }
.mat-management-page .dc-t-64  { font-size: clamp(36px, 5vw,   64px); line-height: 1.02; letter-spacing: -0.035em; }
.mat-management-page .dc-t-56  { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.03em; }
.mat-management-page .dc-t-54  { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.03em; }
.mat-management-page .dc-t-52  { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -0.035em; }
.mat-management-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 */
.mat-management-page .dc-t-48r { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.05; letter-spacing: -0.028em; }
/* … and the families headline the 46px maximum at -.025em */
.mat-management-page .dc-t-46f { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.025em; }
.mat-management-page .dc-t-42  { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1;  letter-spacing: -0.025em; }
.mat-management-page .dc-t-20  { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.mat-management-page .dc-t-17  { font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; }
.mat-management-page .dc-t-17-5{ font-size: 17.5px; line-height: 1.25; }
.mat-management-page .dc-t-14-5{ font-size: 14.5px; line-height: 1.3; font-weight: 600; }
.mat-management-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 */
.mat-management-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 ───────────────────────────────────────────────── */
.mat-management-page .dc-lede     { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); }
.mat-management-page .dc-lede-17  { font-size: 17px;   line-height: 1.6;  color: var(--color-ink-soft); margin: 0; }
.mat-management-page .dc-body-16-5{ font-size: 16.5px; line-height: 1.6; }
.mat-management-page .dc-body-16  { font-size: 16px;   line-height: 1.6;  color: var(--color-ink-soft); margin: 0; }
.mat-management-page .dc-body-15  { font-size: 15.5px; line-height: 1.6;  color: var(--color-ink-soft); margin: 0; }
.mat-management-page .dc-body-14  { font-size: 14px;   line-height: 1.5;  color: var(--color-ink-soft); margin: 0; }
.mat-management-page .dc-body-13  { font-size: 13.5px; line-height: 1.55; color: var(--color-ink-soft); margin: 0; }
.mat-management-page .dc-body-13t { font-size: 13.5px; line-height: 1.45; margin: 0; }
.mat-management-page .dc-body-12-5{ font-size: 12.5px; line-height: 1.5;  margin: 0; }
.mat-management-page .dc-body-12  { font-size: 12px;   line-height: 1.45; margin: 0; }
.mat-management-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. */
.mat-management-page [class*="dc-label-"],
.mat-management-page .dc-eyebrow {
  font-family: var(--font-label);
  font-weight: 500;
  text-transform: uppercase;
}

.mat-management-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 */
.mat-management-page .dc-eyebrow-row  { display: inline-flex; align-items: center; gap: 11px; }

.mat-management-page .dc-label-10-5 { font-size: 10.5px; letter-spacing: 0.08em; color: var(--color-ink-mute); }
.mat-management-page .dc-label-10   { font-size: 10px;   letter-spacing: 0.08em; color: var(--color-ink-mute); }
.mat-management-page .dc-label-10-7 { font-size: 10.5px; letter-spacing: 0.07em; color: var(--color-ink-mute); }
/* ...except the projected-intake row, which the reference prints as typed. */
.mat-management-page .dc-bar-head .dc-label-10-7 { letter-spacing: normal; text-transform: none; }
.mat-management-page .dc-label-9-5  { font-size: 9.5px;  letter-spacing: 0.06em; color: var(--color-ink-mute); }
.mat-management-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. */
.mat-management-page .dc-mt-3  { margin-top: 3px; }
.mat-management-page .dc-mt-14 { margin-top: 14px; }
.mat-management-page .dc-mt-18 { margin-top: 18px; }
.mat-management-page .dc-mt-22 { margin-top: 22px; }

.mat-management-page .dc-mb-6  { margin-bottom: 6px; }
.mat-management-page .dc-mb-10 { margin-bottom: 10px; }
.mat-management-page .dc-mb-14 { margin-bottom: 14px; }
.mat-management-page .dc-mb-18 { margin-bottom: 18px; }
.mat-management-page .dc-mb-36 { margin-bottom: 36px; }
.mat-management-page .dc-mb-44 { margin-bottom: 44px; }
.mat-management-page .dc-mb-48 { margin-bottom: 48px; }
.mat-management-page .dc-mb-56 { margin-bottom: 56px; }

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

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

.mat-management-page .dc-grid-emma     { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.mat-management-page .dc-grid-families { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.mat-management-page .dc-grid-results  { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 2.5vw, 32px); align-items: stretch; }
.mat-management-page .dc-grid-3        { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mat-management-page .dc-grid-2-16    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mat-management-page .dc-grid-3-16    { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mat-management-page .dc-grid-4-16    { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mat-management-page .dc-grid-bullets  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }

/* 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).
   The rule itself lives with the other journey styles further down; an empty `@media` block sat
   here doing nothing and has been removed. */

/* 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. */
.mat-management-page .dc-measure-62ch { max-width: 62ch; }
.mat-management-page .dc-measure-58ch { max-width: 58ch; }
.mat-management-page .dc-measure-54ch { max-width: 54ch; }
.mat-management-page .dc-measure-52ch { max-width: 52ch; }
.mat-management-page .dc-measure-46ch { max-width: 46ch; }
.mat-management-page .dc-measure-24ch { max-width: 24ch; }
.mat-management-page .dc-measure-820  { max-width: 820px; }
.mat-management-page .dc-measure-780  { max-width: 780px; }
.mat-management-page .dc-measure-720  { max-width: 720px; }

/* ── The reference's OWN collapse breakpoints: 1180px, 1000px and 560px ──────────────────────
   It has three content rules and no others (its 1120 and 940 hide nav items and its 1080/560 pair
   reflows the footer grid — chrome we do not port), so those three values are the whole scale:

     1180  #scenarios [data-stagger], #problem [data-stagger]  → 2 columns
     1000  #why-now [data-stagger], #revenue [data-stagger],
           [data-calcgrid], [data-opgrid], [data-herogrid]     → 1 column
      560  #scenarios [data-stagger], #problem [data-stagger]  → 1 column

   Both staggered 4-ups are `.dc-grid-4-16`; why-now's is `.dc-grid-3-16`; revenue's (and the
   hidden operating-model grid, the reference's `data-opgrid`) is `.dc-grid-2-16`. */
@media (max-width: 1180px) {
  .mat-management-page .dc-grid-4-16 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .mat-management-page .dc-grid-3-16,
  .mat-management-page .dc-grid-2-16 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .mat-management-page .dc-grid-4-16 { grid-template-columns: minmax(0, 1fr); }
}

/* The current Audience Emma treatment follows Secondary's phone composition. Other fixed grids
   retain the reference's original squeeze. */
@media (max-width: 640px) {
  .mat-management-page .dc-grid-emma { grid-template-columns: minmax(0, 1fr); }
  .mat-management-page .dc-emma-tabs .tab { flex-basis: calc(50% - 2px); }
}

/* ── 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. */
.mat-management-page .dc-panel {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: var(--radius-5\.5);
  position: relative;
  overflow: hidden;
}

.mat-management-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. */
.mat-management-page .dc-panel-paper {
  background: var(--color-paper);
  box-shadow: var(--dc-shadow-inset);
}

.mat-management-page .dc-pad-families { padding: clamp(44px, 5.5vw, 72px) clamp(28px, 5vw, 64px); }

.mat-management-page .dc-panel-dark,
.mat-management-page .dc-quote-card,
.mat-management-page .dc-band-dark { color: #fff; }

.mat-management-page .dc-on-dark-body   { color: var(--dc-on-dark-body); }
.mat-management-page .dc-on-dark-bright { color: var(--dc-on-dark-bright); }
.mat-management-page .dc-on-dark-mute   { color: var(--dc-on-dark-mute); }
.mat-management-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. */
.mat-management-page .dc-glow-bl-640 { width: 640px; height: 640px; left: -200px; bottom: -240px; }
.mat-management-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). */
.mat-management-page .dc-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-ok-green-bright);
}

.mat-management-page .dc-dot-6 { width: 6px; height: 6px; }

/* ── 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. */
.mat-management-page .marquee-track { animation-duration: 55s; }

/* ── 7 · The journey chapters ───────────────────────────────────────────────────────────── */

/* the pale pill row under each chapter's copy */
/* the mock: a sand tray holding a white card */
.mat-management-page .dc-mock-tray { background: var(--color-page-bg); border-radius: var(--radius-4); padding: 28px; }

.mat-management-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);
}

.mat-management-page .dc-mock-pad { padding: 20px 22px; }

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

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

.mat-management-page .dc-mock-row > span:first-child {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.5px;
}
/* Colour at zero specificity so the NEET-risk row can be coral, as it is in the reference
   (coding-standards §2 rule 5); at 0-3-1 this rule beat that instance's `.text-primary`. */
:where(.mat-management-page .dc-mock-row > span:first-child) { color: var(--color-ink-deep); }

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

.mat-management-page .dc-mock-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-weight: 400;   /* ref 400 / ink-soft - it is a note, not a heading */
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-ink-soft);
}

/* the mono status pill used inside every mock */
.mat-management-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;
}

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

/* the COMING SOON flag and its callout */
.mat-management-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;
}

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

.mat-management-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);
}

.mat-management-page .dc-guardrails { padding: 8px 4px 0; }
.mat-management-page .dc-guardrails .check-list { gap: 15px; }
.mat-management-page .dc-link-coral { color: var(--color-coral-500); font-weight: 600; white-space: nowrap; }
.mat-management-page .dc-emma-tabs { flex-wrap: wrap; }
.mat-management-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 ──────────────────────────────────────────────── */
.mat-management-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);
}

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

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

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

.mat-management-page .dc-bubble-us   { align-self: flex-end; max-width: 88%; background: var(--color-ink-deep); color: #fff; }
.mat-management-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); }

.mat-management-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;
}

.mat-management-page .dc-source i { font-size: 8px; }

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

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

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

.mat-management-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);
}

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

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

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

.mat-management-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;
}

.mat-management-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 */
.mat-management-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);
}

.mat-management-page .dc-ticker-label { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.mat-management-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; }
.mat-management-page .dc-ticker-end   { flex: none; }

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

.mat-management-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;
}

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

.mat-management-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;
}

/* ── 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. */
.mat-management-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. */
.mat-management-page .dc-grow-armed .dc-bar-fill { width: 0; transition: none; }

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

/* ══ MAT-specific devices ═════════════════════════════════════════════════════════════════ */

/* ── 1 · The hero's dark revenue mock ───────────────────────────────────────────────────── */
/* Unlike the audience pages, MAT's hero mock is DARK — a revenue statement, not a funnel. Its
   shadow (0 30px 70px rgba(4,8,24,.28)) is our --shadow-dark at a lower alpha, so it is
   declared rather than borrowed. */
.mat-management-page .dc-card-revenue {
  background: var(--color-dark-band);
  border-radius: var(--radius-4\.5);
  padding: 26px 28px;
  box-shadow: 0 30px 70px rgba(4, 8, 24, 0.28);
  color: #fff;
}

.mat-management-page .dc-revenue-total {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 50px);
  line-height: 1;
  letter-spacing: -0.038em;
  color: var(--color-coral-500);
  margin: 14px 0 6px;
}

.mat-management-page .dc-revenue-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgb(255 255 255 / 0.13);
}

.mat-management-page .dc-revenue-val {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 14.5px;
  color: #fff;
  white-space: nowrap;
}

.mat-management-page .dc-on-dark-bright2 { color: #E8EAF0; }

.mat-management-page .dc-revenue-foot {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid rgb(255 255 255 / 0.13);
}

.mat-management-page .dc-grid-hero-mat { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(32px, 4.5vw, 60px); align-items: center; }
.mat-management-page .dc-glow-680 { width: 680px; height: 680px; right: -180px; top: -280px; }

/* ── 3 · Why now: three sand stat cards, centred opener ─────────────────────────────────── */
.mat-management-page .dc-opener-centre { max-width: 740px; margin-left: auto; margin-right: auto; text-align: center; }

.mat-management-page .dc-why-card { background: var(--color-page-bg); border-radius: var(--radius-4); padding: 28px 30px; }

.mat-management-page .dc-why-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--color-coral-500);
  margin: 0;
}

/* ── 4 · Where the revenue is: four bordered cards ──────────────────────────────────────── */
/* Transparent fill with a #DDE1EC hairline — a fourth line colour on this page, and the only
   place in the batch that uses it. */
.mat-management-page .dc-lever {
  background: transparent;
  border: 1px solid #DDE1EC;
  border-radius: var(--radius-4);
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
}

.mat-management-page .dc-lever-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }

.mat-management-page .dc-lever-no {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #C9CFDF;
}

.mat-management-page .dc-lever-foot {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-rule);
}

.mat-management-page .dc-lever-foot strong { color: var(--color-ink-deep); }

/* ── 5 · The calculator (the page's one interactive device) ─────────────────────────────── */
/* The whole section sits on the coral wash with coral hairlines — the only non-sand, non-paper,
   non-dark section background in the batch. */
.mat-management-page .dc-band-coral {
  background: var(--color-coral-100);
  border-top: 1px solid #F6D6C8;
  border-bottom: 1px solid #F6D6C8;
}

.mat-management-page .dc-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--color-coral-500);
  color: #fff;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.mat-management-page .dc-pill-badge i { font-size: 10px; }

.mat-management-page .dc-calc {
  padding: clamp(28px, 3.4vw, 40px);
  border-radius: var(--radius-5);
  background: var(--color-paper);
  box-shadow: var(--dc-shadow-calc);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
}

.mat-management-page .dc-calc-field { margin-bottom: 22px; }
.mat-management-page .dc-calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.mat-management-page .dc-calc-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--color-ink-deep);
}

.mat-management-page .dc-calc-hint {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 11px;
  color: var(--color-ink-mute);
  text-transform: none;
}

.mat-management-page .dc-calc-out {
  flex: none;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-coral-500);
}

/* The range input keeps the platform control and only recolours its track — no custom thumb, so
   keyboard and touch behaviour stay native. */
.mat-management-page .dc-calc-range { width: 100%; margin-top: 10px; accent-color: var(--color-coral-500); }

.mat-management-page .dc-phase-row { display: flex; width: 100%; margin-top: 10px; }
.mat-management-page .dc-phase { flex: 1; }

.mat-management-page .dc-calc-result {
  background: var(--color-dark-band);
  border-radius: var(--radius-4);
  padding: clamp(26px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.mat-management-page .dc-calc-total {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.038em;
  color: var(--color-coral-500);
  margin: 10px 0 6px;
}

.mat-management-page .dc-calc-lines {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mat-management-page .dc-calc-line { display: flex; justify-content: space-between; gap: 12px; margin: 0; }
.mat-management-page .dc-calc-line span:last-child { font-family: var(--font-label); font-weight: 500; color: #fff; }

.mat-management-page .dc-calc-emma {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.mat-management-page .dc-calc-note {
  grid-column: 1 / -1;
  padding-top: 18px;
  border-top: 1px solid var(--color-rule);
  line-height: 1.6;
}

/* ── 8 · The toolkit: six cards + a dark compliance panel ───────────────────────────────── */
/* NOT the FE page's tool RAIL — MAT shows all six modules at once as cards, because the trust
   buyer is scanning for coverage rather than drilling into one tool. */
/* LONGHANDS, NOT THE `transition` SHORTHAND. These cards are direct children of a
   `.reveal-stagger` container (the toolkit grid), and the stagger works by setting a per-child
   `transition-delay`. The shorthand RESETS `transition-delay` to 0s — and page CSS is unlayered
   while reveal.css compiles into `@layer components`, so unlayered wins regardless of specificity
   and every card animated at once. There is no intentional delay here, so splitting the shorthand
   leaves the hover behaviour identical. */
.mat-management-page .dc-tk-card {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-4\.5);
  padding: 26px;
  display: flex;
  flex-direction: column;
  transition-property: transform, box-shadow;
  transition-duration: 200ms, 200ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), ease;
}

.mat-management-page .dc-tk-card:hover { transform: translateY(-3px); box-shadow: var(--dc-shadow-lift); }

.mat-management-page .dc-tile-40 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-2\.5);
  background: var(--color-page-bg);
}

.mat-management-page .dc-tile-40 > i { font-size: 15px; color: var(--color-ink-deep); }
.mat-management-page .dc-tile-40-dark { background: rgb(255 255 255 / 0.08); }
.mat-management-page .dc-tile-40-dark > i { color: var(--color-coral-500); }

.mat-management-page .dc-tk-emma {
  margin: auto 0 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 13px;
  background: var(--color-page-bg);
  border-radius: var(--radius-2\.5);
  color: var(--color-ink-deep);
}
/* The prompt itself is 500 in the reference (the "E" avatar keeps its own weight). Set on the
   component so every Ask-Emma line matches, including the one too long for the text-diff to key on. */
.mat-management-page .dc-tk-emma > span:last-child { font-weight: 500; }

.mat-management-page .dc-compliance {
  margin-top: 14px;
  background: var(--color-dark-band);
  border-radius: var(--radius-4\.5);
  padding: 26px 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  color: #fff;
}

/* ── 10 · The journey: a sticky progress rail + seven stages ────────────────────────────── */
/* THE MECHANISM (measured, not assumed): a 240px rail that sticks at 96px beside a column of
   seven stages, with two chapter dividers inside the column. Stages 2, 4 and 6 put the mock
   first in the DOM, which is the reference's own alternation — reproduced with nth-of-type so
   the markup order does not depend on the index. */
.mat-management-page .dc-grid-journey { grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }

.mat-management-page .dc-jrail {
  position: sticky;
  top: 96px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mat-management-page .dc-jrail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-2\.5);
  text-decoration: none;
  background: transparent;
  transition: background 250ms ease;
}

.mat-management-page .dc-jrail-no { font-family: var(--font-label); font-weight: 700; font-size: 11px; color: var(--color-ink-mute); }
.mat-management-page .dc-jrail-label { font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; color: var(--color-ink-soft); }

/* The active rail row. Declared for the class page.js toggles, which is named in the markup. */
.mat-management-page .dc-jrail-on { background: var(--color-page-bg); }
.mat-management-page .dc-jrail-on .dc-jrail-no { color: var(--color-coral-500); }
.mat-management-page .dc-jrail-on .dc-jrail-label { color: var(--color-ink-deep); }

.mat-management-page .dc-jrail-foot { margin-top: 14px; padding: 0 12px; line-height: 1.8; }

.mat-management-page .dc-jstages { display: flex; flex-direction: column; gap: 56px; min-width: 0; }

.mat-management-page .dc-jdivider { display: flex; align-items: center; gap: 16px; }
.mat-management-page .dc-jdivider-kicker { flex: none; font-family: var(--font-label); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-coral-500); }
.mat-management-page .dc-jdivider-title { flex: none; font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--color-ink-deep); }
.mat-management-page .dc-jdivider-rule { flex: 1; height: 2px; background: linear-gradient(90deg, var(--color-coral-500), var(--color-rule)); }

.mat-management-page .dc-jstage {
  scroll-margin-top: 90px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  min-width: 0;
}

@media (min-width: 992px) {
  .mat-management-page .dc-jstage-flip > *:first-child { order: 2; }
  .mat-management-page .dc-jstage-flip > *:last-child  { order: 1; }
}

.mat-management-page .dc-jstage-no { font-family: var(--font-label); font-weight: 700; font-size: 13px; color: var(--color-coral-500); }

.mat-management-page .dc-jquote {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--color-ink-deep);
  margin: 18px 0 0;
  padding: 16px 20px;
  background: var(--color-page-bg);
  border-radius: var(--radius-3);
}

.mat-management-page .dc-jquote span { display: block; margin-top: 8px; }

/* The stage-3 screenshot slot is an image-slot placeholder in the reference — kept as a labelled
   slot rather than invented artwork. */
.mat-management-page .dc-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding: 24px;
  border: 1px dashed var(--color-rule);
  border-radius: var(--radius-4);
  background: var(--color-page-bg);
  text-align: center;
}

/* a school row inside a stage mock */
.mat-management-page .dc-school-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-rule);
}

.mat-management-page .dc-school-row:last-child { border-bottom: 0; }
.mat-management-page .dc-school-row > div { flex: 1; min-width: 0; }

.mat-management-page .dc-tile-28 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-2);
  background: var(--color-page-bg);
}

.mat-management-page .dc-tile-28 > i { font-size: 12px; color: var(--color-ink-soft); }

/* ── 11 · Scenarios: four before/now cards ──────────────────────────────────────────────── */
.mat-management-page .dc-scenario {
  background: var(--color-paper);
  border-radius: var(--radius-4\.5);
  box-shadow: var(--dc-shadow-feat);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
}

.mat-management-page .dc-tile-38 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-2\.5);
  background: var(--color-page-bg);
}

.mat-management-page .dc-tile-38 > i { font-size: 15px; color: var(--color-coral-500); }

.mat-management-page .dc-beforenow { display: flex; gap: 12px; align-items: flex-start; }
.mat-management-page .dc-beforenow-before { padding-bottom: 14px; border-bottom: 1px solid var(--color-rule); }
.mat-management-page .dc-beforenow-now { padding-top: 14px; }
.mat-management-page .dc-beforenow-label { flex: none; width: 46px; padding-top: 2px; }
.mat-management-page .dc-body-13-grey { font-size: 13.5px; line-height: 1.55; color: #616D90; margin: 0; }

.mat-management-page .dc-scenario-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; }

/* ── 14 · Results: the quote slider ─────────────────────────────────────────────────────── */
/* Four quotes in one dark card, one visible at a time, with dots and arrows. The non-visible
   quotes carry the `hidden` attribute so with JS off the first quote reads and the rest are
   not stacked — the same contract the DS tabs controller uses. */
.mat-management-page .dc-quote-card { min-height: 360px; }
.mat-management-page .dc-quote-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.mat-management-page .dc-quote-dots { display: flex; align-items: center; gap: 0; }
.mat-management-page .dc-quote-arrows { display: flex; gap: 8px; }

/* ── 16 · Closer ────────────────────────────────────────────────────────────────────────── */
/* MAT's closer is the INSET coral panel (unlike FE's full-bleed), and it is the one closer in
   the batch that carries an eyebrow above the headline AND the DS .cta-section-contact strip. */
.mat-management-page .dc-closer-eyebrow {
  display: block;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.86);
  margin-bottom: 20px;
}

.mat-management-page .cta-section-actions{ margin-top: 34px; }

/* The reference's closer padding is the fluid `clamp(56px, 8vw, 104px) 40px` above and it has no
   breakpoint of its own, so the invented 480px squeeze that sat here has gone. */

/* ── Responsive collapse for the MAT-only grids ─────────────────────────────────────────────
   Only the hero split and the calculator have a reference rule, and both collapse at the
   reference's OWN 1000px (`data-herogrid` / `data-calcgrid`), not at an invented 991. */
@media (max-width: 1000px) {
  .mat-management-page .dc-grid-hero-mat,
  .mat-management-page .dc-calc { grid-template-columns: minmax(0, 1fr); }
}

/* DELIBERATELY ABSENT: `.dc-grid-journey`, `.dc-jstage`, `.dc-compliance` and the `.dc-jrail`
   un-stick. The reference collapses none of them and keeps the rail `position: sticky; top: 96px`
   at every width — so the rail stays sticky here too. Recorded as a squeeze to review after the
   port rather than fixed with a breakpoint the package does not have. */

/* ══ MAT type + label steps not on the FE scale ═══════════════════════════════════════════ */
.mat-management-page .dc-t-72   { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.0;  letter-spacing: -0.038em; }
.mat-management-page .dc-t-34   { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.12; letter-spacing: -0.02em; }
.mat-management-page .dc-t-26   { font-size: clamp(20px, 2vw,   26px); line-height: 1.15; letter-spacing: -0.02em; }
.mat-management-page .dc-t-19   { font-size: 19px;   line-height: 1.25; letter-spacing: -0.01em; }
.mat-management-page .dc-t-18-5 { font-size: 18.5px; line-height: 1.25; letter-spacing: -0.012em; }

.mat-management-page .dc-eyebrow-12    { font-size: 12px; letter-spacing: 0.09em; }
.mat-management-page .dc-label-10-5-9  { font-size: 10.5px; letter-spacing: 0.09em; color: var(--color-coral-500); }
.mat-management-page .dc-label-10-4    { font-size: 10.5px; letter-spacing: 0.04em; color: var(--color-ink-mute); line-height: 1.6; }
.mat-management-page .dc-label-10-3    { font-size: 10.5px; letter-spacing: 0.03em; color: var(--color-ink-mute); text-transform: uppercase; }
.mat-management-page .dc-label-9-4     { font-size: 9.5px;  letter-spacing: 0.04em; color: var(--color-ink-mute); }

.mat-management-page .dc-body-14-5   { font-size: 14.5px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; }
.mat-management-page .dc-body-14-5-6 { font-size: 14.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; }
.mat-management-page .dc-body-13-5   { font-size: 13.5px; line-height: 1.55; margin: 0; }
/* Default at zero specificity - it sat AFTER .dc-on-dark-bright2 at equal specificity and won
   on source order, dropping an on-dark line to ink-soft (2.8:1 there - the documented trap). */
:where(.mat-management-page .dc-body-13-5) { color: var(--color-ink-soft); }
.mat-management-page .dc-body-11     { font-size: 11px;   line-height: 1.4; margin: 0; }
/* Zero-specificity default so a per-instance colour utility wins (coding-standards §2 rule 5) —
   the campaign line is coral in the reference. */
:where(.mat-management-page .dc-body-11) { color: var(--color-ink-mute); }

.mat-management-page .dc-mt-2  { margin-top: 2px; }
.mat-management-page .dc-mt-10 { margin-top: 10px; }
.mat-management-page .dc-mt-16 { margin-top: 16px; }
.mat-management-page .dc-mt-28 { margin-top: 28px; }
.mat-management-page .dc-mt-36 { margin-top: 36px; }
.mat-management-page .dc-mb-8  { margin-bottom: 8px; }
.mat-management-page .dc-mb-16 { margin-bottom: 16px; }

.mat-management-page .dc-measure-760 { max-width: 760px; }
.mat-management-page .dc-measure-60ch { max-width: 60ch; }

/* bar widths this page needs */
.mat-management-page .dc-w-96 { width: 96%; }
.mat-management-page .dc-w-92 { width: 92%; }
.mat-management-page .dc-w-91 { width: 91%; }
.mat-management-page .dc-w-84 { width: 84%; }
.mat-management-page .dc-w-75 { width: 75%; }
.mat-management-page .dc-w-72 { width: 72%; }

/* the quote-slider mark, the stat cards and the resources grid */
.mat-management-page .dc-quote-mark { font-size: 14px; color: var(--color-coral-500); }

.mat-management-page .dc-stat-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-ink-deep);
  margin: 0;
}

/* ══ Bar rows, ticks and small shared bits ════════════════════════════════════════════════ */
/* display:block matters — the bars are <span>s (a <div> inside a <p> would be invalid) and an
   inline element ignores height, so without it every bar measures 0 x 0 and vanishes. */
.mat-management-page .dc-bars { display: flex; flex-direction: column; gap: 12px; }
.mat-management-page .dc-bar-head { display: flex; justify-content: space-between; gap: 12px; }

.mat-management-page .dc-bar {
  display: block;
  height: 6px;
  border-radius: var(--radius-1);
  margin-top: 6px;
  overflow: hidden;
  background: rgb(255 255 255 / 0.1);
}

.mat-management-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);
}

.mat-management-page .dc-bar-light { background: var(--dc-sand-2); }
.mat-management-page .dc-bar-8 { height: 8px; margin-top: 5px; }
.mat-management-page .dc-fill-navy  { background: var(--color-ink-deep); }
.mat-management-page .dc-fill-slate { background: #5A6890; }

/* icon + copy row (the hidden operating-model section) */
.mat-management-page .dc-feature { display: flex; gap: 14px; align-items: flex-start; margin: 0; }
.mat-management-page .dc-feature > i { flex: none; margin-top: 4px; font-size: 15px; color: var(--color-coral-500); }

/* two-column tick list (the hidden families section) */
.mat-management-page .dc-tick { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.mat-management-page .dc-tick > i { flex: none; margin-top: 5px; font-size: 11px; color: var(--color-coral-500); }

/* the results stat column */
.mat-management-page .dc-stat-col { display: flex; flex-direction: column; gap: 12px; }

/* ── PHONE (≤900 / ≤640) — beyond the reference, deliberately ────────────────────────────── */
/* The hardest page in the set at 390px: 108px of drift and 45 lost text nodes. The diagnosis that
   mattered: the journey mocks were NOT overflowing on their own - their grid track had collapsed
   to 2px (`.dc-mock@2`, `.dc-mock-pad@46`), so every pill and label inside stuck out of a element
   with almost no width. Give the track the full column and the mock internals resolve themselves;
   no per-mock scale-down was needed. */
@media (max-width: 900px) {
  .mat-management-page .dc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The journey stages must collapse HERE, not at 640: between 641 and 899 the two-column stage
     still crushes the mock track (10 text nodes lost at 740). The 641-899 band is the gap between
     each page's existing 900 query and the new 640 one - nobody was measuring it. */
  .mat-management-page .dc-jstage,
  .mat-management-page .dc-grid-journey { grid-template-columns: minmax(0, 1fr); }
  .mat-management-page .dc-jstage-flip > *:first-child,
  .mat-management-page .dc-jstage-flip > *:last-child { order: 0; }
}

@media (max-width: 640px) {
  .mat-management-page .dc-jstage,          /* the crushed 2px track - the whole 45-node clip */
  .mat-management-page .dc-grid-journey,    /* 240px rail + content */
  .mat-management-page .dc-grid-results,
  .mat-management-page .dc-grid-families,
  .mat-management-page .dc-grid-bullets,
  .mat-management-page .dc-grid-3,
  .mat-management-page .dc-compliance { grid-template-columns: minmax(0, 1fr); }

  /* `.dc-jstage-flip` reverses its two children at ≥992px; in one column the order must go back
     to source order or every other stage reads mock-then-copy. */
  .mat-management-page .dc-jstage-flip > *:first-child,
  .mat-management-page .dc-jstage-flip > *:last-child { order: 0; }
}