/* Admissions+ for Nursery and Primary — page CSS
 * ============================================================================================
 * GOAL: a FAITHFUL (1:1) reproduction of the reference
 *   "Admissions Plus for Nursery and Primary.dc.html"  (15 sections, 501 inline styles)
 * without its inline styles. Every value below was PARSED out of the reference, not guessed.
 *
 * STRATEGY (same as prototypes/secondary — see prototypes/WORKFLOW.md):
 *   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 `.nursery-primary-page`, so this file is inert on any other page
 * (the pattern proven in production by /r/10 `.about-page`).
 *
 * HOW THE REFERENCE COMPARES TO OUR TOKENS (measured):
 *   IDENTICAL, so we use ours: the whole ink scale (#0F1A4F / #4D5B7F / #8893B0), coral-500
 *   #EC634B, accent-soft #FFE7DD (= coral-100), paper, page-bg #F4F5F9, rule #E6E8EF,
 *   dark #0B1023 (= dark-band), ok-green #1A8A3F, ok-green-bright #34D07F, and the shadows
 *   0 14px 40px /.07 (= shadow-soft), 0 30px 80px /.12 (= shadow-deep),
 *   0 30px 70px rgba(4,8,24,.4) (= shadow-dark).
 *
 *   DIFFERENT, so declared below (owner's call: keep the reference's colours):
 *     ADOPTED OUR TOKEN (2026-08-14, owner decision): the hairline is now var(--color-rule)
 *     #E6E8EF everywhere. The reference's #ECEEF3 is 6/255 lighter -- imperceptible, and the
 *     package is not unanimous anyway (Demos, Events and Webinars already use #E6E8EF, and the
 *     three legal pages have no hairline at all), so it did not earn a second token.
 *     #9AA6C2  body copy ON DARK          (decision 15 maps this to ink-mute)
 *     #C9D1E6  guardrail copy ON DARK
 *     #5C688A  captions ON DARK
 *     #7E8AA6  the dark panel's own label grey
 *     #616D90  the "MIS module" column in the comparison table  (deliberately duller than
 *              ink-soft: the reference greys the competitor column)
 *     #223055  the testimonial avatar disc on the dark card
 *     #E9F7EE / #BFE7CC  the "new enquiry created" success banner in the chat mock
 *              (near, but NOT equal, to our ok-green-soft #DFF1E5)
 *     #C2C9DB / #DEE3EE  the paper-form line art in the "one click" illustration
 *   Shadows with no token: 0 24px 60px /.06 · 0 20px 60px /.07 · 0 20px 50px /.08 ·
 *   0 12px 32px /.06 · 0 16px 40px /.10 · 0 16px 40px rgba(4,8,24,.35).
 *
 *   GEOMETRY: the reference container is max-width 1200px with a 24px section gutter; our DS
 *   is 1224px / 32px. Overridden here only — .page-container / .section stay untouched.
 * ============================================================================================ */

.nursery-primary-page {
  /* reference-only values, all measured */
  --dc-on-dark-body: var(--color-on-dark-body);    /* body copy on the dark band/panels */
  --dc-on-dark-bright: var(--color-on-dark-bright);  /* guardrail items on dark */
  --dc-on-dark-mute: var(--color-on-dark-faint);    /* captions on dark */
  --dc-on-dark-label: var(--color-ink-mute);   /* "THE PATCHWORK" label inside the dark panel */
  --dc-cell-mis: #616D90;        /* the MIS-module column in the comparison table */
  --dc-avatar-dark: #223055;     /* testimonial avatar disc on the dark card */
  --dc-ok-bg: #E9F7EE;           /* chat mock success banner fill */
  --dc-ok-border: #BFE7CC;       /* chat mock success banner hairline */
  --dc-art-line: #C2C9DB;        /* illustration: paper outline */
  --dc-art-rule: #DEE3EE;        /* illustration: ruled lines on the paper */
  --dc-art-btn-sub: #FBD3C8;     /* illustration: the coral tint on the button's sub-label */
  --dc-shadow-panel-soft: 0 24px 60px rgba(15, 26, 79, 0.06);
  --dc-shadow-panel: 0 20px 60px rgba(15, 26, 79, 0.07);
  --dc-shadow-chat: 0 20px 50px rgba(15, 26, 79, 0.08);
  --dc-shadow-step: 0 12px 32px rgba(15, 26, 79, 0.06);
  --dc-shadow-hover: 0 16px 40px rgba(15, 26, 79, 0.10);
  --dc-shadow-hover-dark: 0 16px 40px rgba(4, 8, 24, 0.35);
  --dc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  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 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 explain why not. */
.nursery-primary-page .dc-py-128-72 { padding-bottom: 72px; }
.nursery-primary-page .dc-py-44-48  { padding-top: 44px;  padding-bottom: 48px; }
.nursery-primary-page .dc-py-48-64  { padding-top: 48px;  padding-bottom: 64px; }
.nursery-primary-page .dc-py-0-64   { padding-top: 0;     padding-bottom: 64px; }
.nursery-primary-page .dc-py-104-44 { padding-top: 104px; padding-bottom: 44px; }
.nursery-primary-page .dc-py-0-96   { padding-top: 0;     padding-bottom: 96px; }
.nursery-primary-page .dc-py-104    { padding-top: 104px; padding-bottom: 104px; }
.nursery-primary-page .dc-py-88     { padding-top: 88px;  padding-bottom: 88px; }
.nursery-primary-page .dc-py-40-96  { padding-top: 40px;  padding-bottom: 96px; }
.nursery-primary-page .dc-py-96-0   { padding-top: 96px;  padding-bottom: 0; }
.nursery-primary-page .dc-py-96     { padding-top: 96px;  padding-bottom: 96px; }

/* ── Display type: the reference clamps every headline individually ─────────────────────── */
/* Named by the maximum, so the mapping to a DS step stays obvious. Proxima 700 throughout;
   tracking is the reference's own (-0.04em .. -0.015em by size). Where two headlines share a
   maximum but differ in leading/tracking, the second carries a letter suffix. */
.nursery-primary-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(.nursery-primary-page [class*="dc-t-"]) {
  margin: 0;
  text-wrap: balance;
}

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

/* The testimonial quote — Proxima 500, not 700, so it sits outside the dc-t- scale. */
.nursery-primary-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;
}

/* Fixed-size display headings (no clamp in the reference) */
.nursery-primary-page .dc-h-21   { font-family: var(--font-heading); font-weight: 700; font-size: 21px;   letter-spacing: -0.015em; margin: 0; }
.nursery-primary-page .dc-h-18   { font-family: var(--font-heading); font-weight: 700; font-size: 18px;   line-height: 1.25; letter-spacing: -0.012em; margin: 0; }
.nursery-primary-page .dc-h-175  { font-family: var(--font-heading); font-weight: 700; font-size: 17.5px; line-height: 1.25; }
.nursery-primary-page .dc-h-17   { font-family: var(--font-heading); font-weight: 700; font-size: 17px;   line-height: 1.2;  letter-spacing: -0.01em; margin: 0; }
.nursery-primary-page .dc-h-17f  { font-family: var(--font-heading); font-weight: 700; font-size: 17px;   letter-spacing: -0.01em; margin: 0; }
.nursery-primary-page .dc-h-155  { font-family: var(--font-heading); font-weight: 700; font-size: 15.5px; line-height: 1.3;  letter-spacing: -0.01em; margin: 0; }
.nursery-primary-page .dc-h-145  { font-family: var(--font-heading); font-weight: 700; font-size: 14.5px; letter-spacing: -0.012em; margin: 0; }
.nursery-primary-page .dc-h-20   { font-family: var(--font-heading); font-weight: 700; font-size: 20px;   line-height: 1.3;  letter-spacing: -0.01em; margin: 0; }

/* ── Body copy steps (Inter) ────────────────────────────────────────────────────────────── */
/* Named by px; where the reference uses one size at two leadings, both numbers are in the name
   (that is the honest thing — the difference is real and measured). Colour is a utility. */
.nursery-primary-page .dc-lede        { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; }
.nursery-primary-page .dc-lede-17     { font-size: 17px;   line-height: 1.6; }
.nursery-primary-page .dc-closer-lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.nursery-primary-page .dc-body-165    { font-size: 16.5px; line-height: 1.6; }
.nursery-primary-page .dc-body-16     { font-size: 16px;   line-height: 1.6; }
.nursery-primary-page .dc-body-155    { font-size: 15.5px; line-height: 1.6; }
.nursery-primary-page .dc-body-15     { font-size: 15px;   line-height: 1.6; }
.nursery-primary-page .dc-body-145    { font-size: 14.5px; line-height: 1.55; margin: 0; }
.nursery-primary-page .dc-body-145t   { font-size: 14.5px; line-height: 1.6; }
.nursery-primary-page .dc-body-14m    { font-size: 14px;   line-height: 1.45; font-weight: 500; margin: 0; }
.nursery-primary-page .dc-body-135    { font-size: 13.5px; line-height: 1.55; }
.nursery-primary-page .dc-body-135-15 { font-size: 13.5px; line-height: 1.5;  margin: 0; }
.nursery-primary-page .dc-body-135-145{ font-size: 13.5px; line-height: 1.45; margin: 0; }
.nursery-primary-page .dc-body-13     { font-size: 13px;   line-height: 1.5; }
.nursery-primary-page .dc-body-125    { font-size: 12.5px; line-height: 1.45; margin: 0; }
.nursery-primary-page .dc-body-12m    { font-size: 12px;   line-height: 1.45; font-weight: 500; margin: 0; }
.nursery-primary-page .dc-body-11     { font-size: 11px;   font-weight: 400; }

/* Semibold display text at sizes the DS scale does not carry (attribution + chat header) */
.nursery-primary-page .dc-name      { font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; }
.nursery-primary-page .dc-chat-name { font-family: var(--font-heading); font-weight: 600; font-size: 13px; }

/* Measures. The reference sets them in `ch` of its body face; these are the px widths those
   `ch` values actually render at (read off the rendered reference at 1280px), so the line
   breaks land in the same place. Named by px, with the reference's own ch value in the comment. */
.nursery-primary-page .dc-measure-820 { max-width: 820px; }   /* section head, px in the reference */
.nursery-primary-page .dc-measure-803 { max-width: 803px; }   /* 24ch @ 54px — the problem headline */
.nursery-primary-page .dc-measure-780 { max-width: 780px; }   /* section head, px */
.nursery-primary-page .dc-measure-760 { max-width: 760px; }   /* section head, px */
.nursery-primary-page .dc-measure-720 { max-width: 720px; }   /* section head, px */
.nursery-primary-page .dc-measure-643 { max-width: 643px; }   /* 62ch @ 16.5px — dark-panel body */
.nursery-primary-page .dc-measure-640 { max-width: 640px; }   /* 60ch @ 17px   — vs-MIS lede */
.nursery-primary-page .dc-measure-619 { max-width: 619px; }   /* 58ch @ 17px   — section ledes */
.nursery-primary-page .dc-measure-605 { max-width: 605px; }   /* 62ch @ 15.5px — tool-panel body */
.nursery-primary-page .dc-measure-595 { max-width: 595px; }   /* 50ch @ 19px   — hero lede */
.nursery-primary-page .dc-measure-577 { max-width: 577px; }   /* 44ch @ 21px   — closer lede */
.nursery-primary-page .dc-measure-546 { max-width: 546px; }   /* 56ch @ 15.5px — one-click body */
.nursery-primary-page .dc-measure-531 { max-width: 531px; }   /* 54ch @ 16px   — families body */
.nursery-primary-page .dc-measure-529 { max-width: 529px; }   /* 56ch @ 15px   — Data+ body */
.nursery-primary-page .dc-measure-463 { max-width: 463px; }   /* 46ch @ 16px   — MIS strip copy */
.nursery-primary-page .dc-measure-402 { max-width: 402px; }   /* 44ch @ 14.5px — faith body */

.nursery-primary-page .dc-centre { margin-left: auto; margin-right: auto; }

/* ── Spacing steps the compiled utility surface does not carry ───────────────────────────── */
/* prototypes/ is deliberately not a Tailwind scan source, so a utility nothing else in the repo
   uses produces no CSS — the same failure a CMS block would hit. mb-11 compiles but mt-11 does
   not; mt-3.5 and mb-2.5 do not; the ".5" steps are patchy. Rather than round the reference's
   spacing to whatever happens to be compiled, its exact values are declared here, named in px so
   they can never be confused with a Tailwind step. */
.nursery-primary-page .dc-mt-6px  { margin-top: 6px; }
.nursery-primary-page .dc-mt-14px { margin-top: 14px; }
.nursery-primary-page .dc-mt-34px { margin-top: 34px; }
.nursery-primary-page .dc-mt-36px { margin-top: 36px; }
.nursery-primary-page .dc-mt-44px { margin-top: 44px; }
.nursery-primary-page .dc-mt-56px { margin-top: 56px; }
.nursery-primary-page .dc-mb-6px  { margin-bottom: 6px; }
.nursery-primary-page .dc-mb-10px { margin-bottom: 10px; }
.nursery-primary-page .dc-mb-14px { margin-bottom: 14px; }

/* ── Mono labels ────────────────────────────────────────────────────────────────────────── */
/* The reference's mono eyebrow IS our font-label (IBM Plex Mono 500) at 12.5px / 0.08em, i.e.
   `font-label text-label-l tracking-label leading-label uppercase font-medium` — so the
   markup composes it from the DS and only the sizes and trackings the DS does not have live
   here. DS covers 9.5px (label-s), 10.5px (label-m), 12.5px (label-l) and 0.08em
   (tracking-label). These are the rest. */
.nursery-primary-page .dc-ms-9  { font-size: 9px; }
.nursery-primary-page .dc-ms-10 { font-size: 10px; }
.nursery-primary-page .dc-ms-11 { font-size: 11px; }
.nursery-primary-page .dc-ms-12 { font-size: 12px; }

.nursery-primary-page .dc-tr-05 { letter-spacing: 0.05em; }
.nursery-primary-page .dc-tr-06 { letter-spacing: 0.06em; }
.nursery-primary-page .dc-tr-07 { letter-spacing: 0.07em; }
.nursery-primary-page .dc-tr-09 { letter-spacing: 0.09em; }
.nursery-primary-page .dc-tr-10 { letter-spacing: 0.1em; }

/* The hero eyebrow is the one that is ink-mute rather than coral, and 12px / 0.09em. */

/* A coral text link with a chevron (the faith card's call to action is a link, not a button) */
.nursery-primary-page .dc-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-heading); font-weight: 600; font-size: 14.5px;
  color: var(--color-coral-500); text-decoration: none;
}
.nursery-primary-page .dc-link:hover { color: var(--color-ink-deep); }
.nursery-primary-page .dc-link i { font-size: 10px; }
.nursery-primary-page .dc-link-coral { color: var(--color-coral-500); font-weight: 600; white-space: nowrap; }

/* ── Surfaces ───────────────────────────────────────────────────────────────────────────── */
/* The reference has one full-bleed dark band (Emma) and inset panels everywhere else. The
   inset panel lives here for now: it earns a DS class only when several pages confirm it
   (WORKFLOW decision table). */
.nursery-primary-page .dc-panel {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: var(--radius-5\.5);
  position: relative;
  overflow: hidden;
}

.nursery-primary-page .dc-panel-dark  { background: var(--color-dark-band); color: #fff; padding: clamp(56px, 7vw, 96px) clamp(28px, 5vw, 72px); }
.nursery-primary-page .dc-panel-paper { background: var(--color-paper); box-shadow: var(--dc-shadow-panel-soft); padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 56px); }
.nursery-primary-page .dc-panel-wide  { background: var(--color-paper); box-shadow: var(--dc-shadow-panel-soft); padding: clamp(44px, 5.5vw, 72px) clamp(28px, 5vw, 64px); }

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

.nursery-primary-page .dc-card-mock  { border: 0; box-shadow: var(--shadow-deep); padding: 24px 24px 20px; }
.nursery-primary-page .dc-card-faith { border: 0; border-radius: var(--radius-5); box-shadow: var(--shadow-soft); padding: clamp(28px, 3.2vw, 40px) clamp(26px, 3.4vw, 44px); }
.nursery-primary-page .dc-card-dark  { background: var(--color-dark-band); border: 0; border-radius: var(--radius-5); color: #fff; padding: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; }
.nursery-primary-page .dc-card-step  { border: 0; border-radius: var(--radius-4); box-shadow: var(--dc-shadow-step); padding: 24px; }
.nursery-primary-page .dc-card-strip { border-radius: var(--radius-4\.5); padding: 24px 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

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

/* An icon tile — a rounded sand square holding one coral glyph. Three sizes in the reference. */
.nursery-primary-page .dc-tile {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-page-bg);
}
.nursery-primary-page .dc-tile-36 { width: 36px; height: 36px; border-radius: var(--radius-2\.5); }
.nursery-primary-page .dc-tile-40 { width: 40px; height: 40px; border-radius: var(--radius-3); }
.nursery-primary-page .dc-tile-44 { width: 44px; height: 44px; border-radius: var(--radius-3); }
.nursery-primary-page .dc-tile i  { font-size: 15px; color: var(--color-coral-500); }
.nursery-primary-page .dc-tile-36 i { font-size: 14px; }
.nursery-primary-page .dc-tile-44 i { font-size: 16px; color: var(--color-ink-deep); }

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

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

.nursery-primary-page .dc-grid-hero     { grid-template-columns: 1.15fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.nursery-primary-page .dc-grid-problem  { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: clamp(14px, 2vw, 26px); align-items: stretch; }
.nursery-primary-page .dc-grid-button   { grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: center; }
.nursery-primary-page .dc-grid-table    { grid-template-columns: 1.1fr 1fr 1fr; gap: 0 clamp(20px, 3vw, 44px); }
.nursery-primary-page .dc-grid-steps    { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.nursery-primary-page .dc-grid-faith    { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 3.5vw, 48px); align-items: center; }
.nursery-primary-page .dc-grid-emma     { grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.nursery-primary-page .dc-grid-families { grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.nursery-primary-page .dc-grid-results  { grid-template-columns: 1.35fr 1fr; gap: clamp(20px, 2.5vw, 32px); align-items: stretch; }
.nursery-primary-page .dc-grid-crosssell{ grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
/* the two-column bullet pairs inside the toolkit panel and the families panel */
.nursery-primary-page .dc-grid-pairs    { grid-template-columns: 1fr 1fr; gap: 10px 22px; }

/* RESPONSIVENESS: THE REFERENCE HAS EXACTLY ONE COLLAPSE, AND THIS IS IT.
   Its only content media query is `[data-faithgrid]` at 900px; the other four are the nav and
   footer chrome, which this prototype does not own (the site-header/footer globals do). Every
   other grid on the page — hero, the button panel, the toolkit rail, Emma, families, results,
   resources, the cross-sell, the patchwork compare — stays at its desktop columns all the way
   down in the reference.
   Three blocks that used to sit here (991px collapsing eight grids and two panel paddings,
   768px re-metricking the marquee, 767px stacking the bullet pairs) were REMOVED: none of them
   maps to any rule in this page's reference, and an invented breakpoint is a divergence even
   when it makes a phone nicer. The squeeze at narrow widths is a tuning decision for after the
   port, not something to smuggle in during it. */
@media (max-width: 900px) {
  .nursery-primary-page .dc-grid-faith { grid-template-columns: minmax(0, 1fr); }
}

/* ── 1 · Hero: the illustrative funnel mock ─────────────────────────────────────────────── */
/* Reference metrics: 92px right-aligned mono labels, 34px tracks at 8px radius (taller than
   the secondary page's 26px), the count right-aligned inside the fill. */
.nursery-primary-page .dc-funnel { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.nursery-primary-page .dc-funnel-row { display: flex; align-items: center; gap: 14px; }
.nursery-primary-page .dc-funnel-label { flex: none; width: 92px; text-align: right; }
.nursery-primary-page .dc-funnel-track { flex: 1; height: 34px; border-radius: var(--radius-2); background: var(--color-page-bg); overflow: hidden; }
.nursery-primary-page .dc-funnel-fill {
  display: flex; align-items: center; justify-content: flex-end;
  height: 100%; border-radius: var(--radius-2); padding-right: 10px;
  font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: #fff;
}
.nursery-primary-page .dc-funnel-1 { width: 100%; background: var(--color-ink-deep); }
.nursery-primary-page .dc-funnel-2 { width: 65%;  background: #31406F; }   /* the package's on-dark navy; no token */
.nursery-primary-page .dc-funnel-3 { width: 50%;  background: #31406F; }
.nursery-primary-page .dc-funnel-4 { width: 42%;  background: #5A6890; }
.nursery-primary-page .dc-funnel-5 { width: 30%;  background: var(--color-coral-500); }

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

/* ── 2 · Social proof: the logo marquee ─────────────────────────────────────────────────── */
/* The DS owns the unframed row, equal-height logo cards, gap, edge mask and motion behaviour.
   This page retains the reference's 152x58 logo artwork and 42s cycle. */
.nursery-primary-page .marquee-track { animation-duration: 42s; }
.nursery-primary-page .marquee-item img { width: 152px; height: 58px; object-fit: contain; }

/* No breakpoint: the artwork stays 152x58 and the shared cards handle the narrow viewport. */

/* ── 3 · The patchwork problem: broken hand-offs → one family record ────────────────────── */
.nursery-primary-page .dc-compare-old {
  position: relative; display: flex; flex-direction: column;
  background-color: rgb(255 255 255 / 0.025);
  border: 1px dashed rgb(255 255 255 / 0.2);
  border-radius: var(--radius-4);
  padding: 26px;
}
.nursery-primary-page .dc-compare-new {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background-color: rgb(236 99 75 / 0.1);
  border: 1px solid rgb(236 99 75 / 0.48);
  border-radius: var(--radius-4);
  padding: 26px;
}
.nursery-primary-page .dc-compare-new::before {
  content: ""; position: absolute; width: 190px; height: 190px; top: -96px; right: -76px;
  background-color: rgb(236 99 75 / 0.1); border-radius: var(--radius-full); pointer-events: none;
}
.nursery-primary-page .dc-compare-head {
  position: relative; z-index: 1; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 14px; margin-bottom: 20px;
}
.nursery-primary-page .dc-compare-title {
  margin: 5px 0 0; color: var(--color-paper); font-family: var(--font-heading);
  font-weight: 700; font-size: 20px; line-height: 1.15; letter-spacing: -0.012em;
}
.nursery-primary-page .dc-compare-state {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px;
  color: var(--dc-on-dark-label); background-color: rgb(255 255 255 / 0.06);
  border-radius: var(--radius-full); font-family: var(--font-heading); font-weight: 600;
  font-size: 11px; line-height: 1;
}
.nursery-primary-page .dc-compare-state-live {
  color: var(--color-ok-green-bright); background-color: rgb(52 208 127 / 0.12);
}
.nursery-primary-page .dc-patchwork-map {
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px;
  margin-top: auto; padding: 16px; background-color: rgb(255 255 255 / 0.035);
  background-image: radial-gradient(circle, rgb(255 255 255 / 0.12) 1px, transparent 1px);
  background-size: 16px 16px; border-radius: var(--radius-3);
}
.nursery-primary-page .dc-patchwork-map::before,
.nursery-primary-page .dc-patchwork-map::after {
  content: ""; position: absolute; z-index: 0; border-color: rgb(255 255 255 / 0.2); border-style: dashed;
}
.nursery-primary-page .dc-patchwork-map::before { top: 16%; bottom: 16%; left: 50%; border-width: 0 0 0 1px; }
.nursery-primary-page .dc-patchwork-map::after { top: 50%; right: 16%; left: 16%; border-width: 1px 0 0; }
.nursery-primary-page .dc-patch-node {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 10px 11px; color: var(--dc-on-dark-body);
  background-color: color-mix(in oklab, var(--color-dark-band) 78%, var(--color-ink-royal));
  border: 1px solid rgb(255 255 255 / 0.13); border-radius: var(--radius-2);
  font-family: var(--font-heading); font-weight: 600; font-size: 12px; line-height: 1.15;
}
.nursery-primary-page .dc-patch-node > i {
  --fa-primary-color: var(--dc-on-dark-body); --fa-secondary-color: var(--dc-on-dark-label);
  --fa-secondary-opacity: 0.75; flex: none; width: 18px; color: var(--dc-on-dark-label);
  font-size: 14px; text-align: center;
}
.nursery-primary-page .dc-patch-node-mis { grid-column: 1 / -1; justify-self: center; width: min(88%, 320px); }
.nursery-primary-page .dc-patch-break {
  position: absolute; z-index: 2; top: 50%; left: 50%; display: inline-flex;
  align-items: center; justify-content: center; width: 28px; height: 28px;
  color: var(--color-coral-500); background-color: var(--color-dark-band);
  border: 1px solid rgb(236 99 75 / 0.35); border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
}
.nursery-primary-page .dc-compare-arrow {
  position: relative; display: flex; align-items: center; justify-content: center; color: var(--color-paper);
}
.nursery-primary-page .dc-compare-arrow::before {
  content: ""; position: absolute; right: 0; left: 0; height: 2px;
  background-image: linear-gradient(90deg, rgb(255 255 255 / 0.2), var(--color-coral-500));
}
.nursery-primary-page .dc-compare-arrow > i {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; background-color: var(--color-coral-500);
  border: 5px solid var(--color-dark-band); border-radius: var(--radius-full); font-size: 14px;
}
.nursery-primary-page .dc-pipeline-copy { position: relative; z-index: 1; max-width: 48ch; color: var(--dc-on-dark-body); }
.nursery-primary-page .dc-pipeline-flow {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: auto; padding-top: 24px;
}
.nursery-primary-page .dc-pipeline-step {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  gap: 8px; min-width: 0; color: var(--color-paper); font-family: var(--font-heading);
  font-size: 11.5px; line-height: 1.1; text-align: center;
}
.nursery-primary-page .dc-pipeline-step:not(:last-child)::after {
  content: ""; position: absolute; z-index: -1; top: 19px; left: calc(50% + 19px);
  width: calc(100% - 38px); height: 2px; background-color: var(--color-coral-500);
}
.nursery-primary-page .dc-pipeline-step > span {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  color: var(--color-coral-500); background-color: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(236 99 75 / 0.42); border-radius: var(--radius-full); font-size: 15px;
}
.nursery-primary-page .dc-pipeline-step > span > i {
  --fa-primary-color: var(--color-coral-500); --fa-secondary-color: var(--color-paper); --fa-secondary-opacity: 0.75;
}
.nursery-primary-page .dc-pipeline-emma {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 11px;
  margin-top: 20px; padding: 11px 13px; background-color: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.11); border-radius: var(--radius-3);
}
.nursery-primary-page .dc-pipeline-emma .icon-emma { flex: none; width: 32px; height: 32px; }
.nursery-primary-page .dc-pipeline-emma > span {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; color: var(--color-paper);
  font-family: var(--font-heading); font-size: 13px; line-height: 1.2;
}
.nursery-primary-page .dc-pipeline-emma small { color: var(--dc-on-dark-body); font-family: var(--font-sans); font-size: 11px; }

/* ── 4 · Sixty packs, one button ────────────────────────────────────────────────────────── */
.nursery-primary-page .dc-quote-inset {
  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: 0; padding: 16px 20px;
  background: var(--color-page-bg); border-radius: var(--radius-3);
}

/* The illustration frame + the inline SVG inside it (a bespoke diagram, not an icon — the
   house icon rule's carve-out for custom artwork). */
.nursery-primary-page .dc-art { background: var(--color-page-bg); border: 1px solid var(--color-rule); border-radius: var(--radius-4); overflow: hidden; }
.nursery-primary-page .dc-art svg { display: block; width: 100%; height: auto; }

/* The illustration's own palette. Kept out of the markup so the prototype has no raw hex in its
   HTML at all: SVG presentation attributes are CSS declarations, so a class works exactly as the
   attribute did. Two of these colours have no token (the paper outline greys and the coral tint
   on the button's sub-label) and are declared at the top of this file. */
.nursery-primary-page .dc-art-bg        { fill: var(--color-page-bg); }
.nursery-primary-page .dc-art-paper     { fill: var(--color-paper); stroke: var(--dc-art-line); }
.nursery-primary-page .dc-art-rules     { stroke: var(--dc-art-rule); }
.nursery-primary-page .dc-art-label     { fill: var(--color-ink-mute); }
.nursery-primary-page .dc-art-arrow     { stroke: var(--color-coral-500); }
.nursery-primary-page .dc-art-btn       { fill: var(--color-coral-500); }
.nursery-primary-page .dc-art-btn-label { fill: var(--color-paper); }
.nursery-primary-page .dc-art-btn-sub   { fill: var(--dc-art-btn-sub); }
.nursery-primary-page .dc-art-ok        { fill: var(--color-ok-green); }

/* The toolkit's bullet pairs use coral ticks, not the DS green — coral is this page's accent
   inside a white panel, and the reference keeps them coral throughout. */
.nursery-primary-page .dc-tick { display: flex; gap: 10px; align-items: flex-start; }
.nursery-primary-page .dc-tick > i { flex: none; margin-top: 5px; font-size: 11px; color: var(--color-coral-500); }

/* ── 7 · Why not the MIS module: the comparison table ───────────────────────────────────── */
/* A three-column grid, not a <table> — that is how the reference builds it, and the cells are
   prose rather than data. The shared `.card.card-large` owns the surface, radius, padding and
   shadow; page CSS owns only the table geometry. Header rule 2px ink; row rules 1px hairline. */
.nursery-primary-page .dc-table-head { align-items: end; padding-bottom: 14px; border-bottom: 2px solid var(--color-ink-deep); }
.nursery-primary-page .dc-table-row  { align-items: start; padding: 22px 0; border-bottom: 1px solid var(--color-rule); }
.nursery-primary-page .dc-table-row:last-child { border-bottom: 0; }
.nursery-primary-page .dc-cell-mis { color: var(--dc-cell-mis); }

/* No breakpoint: the reference's comparison grid stays 1.1fr/1fr/1fr at every width — the three
   prose columns simply get narrow. Stacking them (and hiding the header row) was ours, not the
   package's, so it goes; note it in STATUS.md as a squeeze rather than re-adding it here. */

/* ── 8 · Journey: two phases of numbered step cards ─────────────────────────────────────── */
/* NOT a carousel (the secondary page's journey is; this one is a plain responsive card grid,
   confirmed by measuring the reference's section height). */
.nursery-primary-page .dc-phases { display: flex; flex-direction: column; gap: 44px; }
.nursery-primary-page .dc-phase-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 4px; }
.nursery-primary-page .dc-step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.nursery-primary-page .dc-step-num { font-family: var(--font-label); font-weight: 700; font-size: 12px; color: var(--color-ink-mute); }

/* ── 9 · Faith schools ──────────────────────────────────────────────────────────────────── */
.nursery-primary-page .dc-feature { display: flex; gap: 13px; align-items: flex-start; }
.nursery-primary-page .dc-feature-body { flex: 1; min-width: 0; }

/* ── 10 · Emma: the stat pill on the dark band ──────────────────────────────────────────── */
.nursery-primary-page .dc-stat-pill {
  display: inline-flex; align-items: center; gap: 18px;
}
.nursery-primary-page .dc-stat-pill-num {
  font-family: var(--font-heading); font-weight: 700; font-size: 40px; line-height: 1;
  letter-spacing: -0.02em; color: var(--color-coral-500); flex: none;
}
.nursery-primary-page .dc-guardrails { padding: 8px 4px 0; }
.nursery-primary-page .dc-emma-tabs { flex-wrap: wrap; }
.nursery-primary-page .dc-emma-tabs .tab { white-space: nowrap; }

/* ── 11 · Emma for families: the chat mock ──────────────────────────────────────────────── */
.nursery-primary-page .dc-chat {
  padding: 18px; border-radius: var(--radius-4\.5);
  background: var(--color-page-bg); border: 1px solid var(--color-rule);
  box-shadow: var(--dc-shadow-chat);
}
.nursery-primary-page .dc-chat-head { display: flex; align-items: center; gap: 9px; padding: 0 4px 12px; border-bottom: 1px solid var(--color-rule); }
.nursery-primary-page .dc-chat-online { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--color-ok-green); }
.nursery-primary-page .dc-chat-body { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; }
.nursery-primary-page .dc-bubble { border-radius: var(--radius-3\.5); padding: 10px 14px; margin: 0; }
.nursery-primary-page .dc-bubble-us { align-self: flex-end; max-width: 88%; background: var(--color-ink-deep); color: #fff; }
.nursery-primary-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); }
.nursery-primary-page .dc-source {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
  font-family: var(--font-label); font-weight: 500; font-size: 10.5px;
  color: var(--color-coral-500); text-decoration: none;
  background: var(--color-coral-100); border-radius: var(--radius-full); padding: 4px 11px;
}
.nursery-primary-page .dc-source i { font-size: 8px; }
.nursery-primary-page .dc-quick { align-self: flex-start; display: flex; gap: 7px; flex-wrap: wrap; }
.nursery-primary-page .dc-quick-pill {
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  border-radius: var(--radius-full); padding: 7px 14px;
}
.nursery-primary-page .dc-quick-yes { background: var(--color-coral-500); color: #fff; }
.nursery-primary-page .dc-quick-no  { background: var(--color-paper); border: 1px solid var(--color-rule); color: var(--color-ink-soft); }
.nursery-primary-page .dc-chat-ok {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 0;
  padding: 10px 13px; border-radius: var(--radius-3);
  background: var(--dc-ok-bg); border: 1px solid var(--dc-ok-border);
  color: var(--color-ink-deep);
}
.nursery-primary-page .dc-chat-ok i { flex: none; font-size: 12px; color: var(--color-ok-green); }
.nursery-primary-page .dc-chat-foot { text-align: center; padding-top: 12px; margin: 0; }

/* ── 12 · Results ───────────────────────────────────────────────────────────────────────── */
/* The testimonial keeps a semantic <blockquote>, but the DS .blockquote carries a 4px neutral
   left rule and a 20px size, and the reference's quote has neither — it is unadorned Proxima 500
   at clamp(19,2.1vw,25). Stripped page-locally rather than dropping the element. */
.nursery-primary-page .dc-card-dark .blockquote { padding-left: 0; border-left: 0; margin-bottom: 0; }

.nursery-primary-page .dc-quote-by { margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 14px; }
.nursery-primary-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;
}
.nursery-primary-page .dc-stat-col { display: flex; flex-direction: column; gap: 12px; }
.nursery-primary-page .dc-stat-card {
  flex: 1; background: var(--color-page-bg); border-radius: var(--radius-4); padding: 24px 26px;
  display: flex; flex-direction: column; justify-content: center;
}
.nursery-primary-page .dc-stat-num {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(30px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--color-ink-deep); margin: 0;
}
.nursery-primary-page .dc-emma-strip {
  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);
}
.nursery-primary-page .dc-strip-label { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.nursery-primary-page .dc-strip-mid { flex: 1; min-width: 260px; }
.nursery-primary-page .dc-strip-end { flex: none; }

/* ── 13 · Resources ─────────────────────────────────────────────────────────────────────── */
.nursery-primary-page .dc-res-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.nursery-primary-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 var(--dc-ease), box-shadow 200ms ease, border-color 200ms ease;
}
.nursery-primary-page .dc-res:hover { transform: translateY(-4px); box-shadow: var(--dc-shadow-hover); border-color: var(--color-coral-500); }
.nursery-primary-page .dc-res .dc-h-18 { font-size: 17px; line-height: 1.18; }
.nursery-primary-page .dc-res-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; color: var(--color-coral-500); }
.nursery-primary-page .dc-res-more i { font-size: 10px; }

/* ── 14 · Data+ cross-sell: screenshot first, copy second ───────────────────────────────── */
.nursery-primary-page .dc-crosssell-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.nursery-primary-page .dc-data-shot {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  aspect-ratio: 16 / 10;
  background: var(--color-page-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-4);
  box-shadow: 0 16px 36px rgb(15 26 79 / 0.08);
}

.nursery-primary-page .dc-data-shot-bar {
  display: flex;
  flex: none;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  color: var(--color-ink-mute);
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-rule);
}

.nursery-primary-page .dc-data-shot-bar > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nursery-primary-page .dc-data-shot-bar i {
  display: block;
  width: 7px;
  height: 7px;
  background: var(--color-ink-mute);
  border-radius: var(--radius-full);
}

.nursery-primary-page .dc-data-shot-bar i:first-child { background: var(--color-coral-500); }

.nursery-primary-page .dc-data-shot-placeholder {
  display: flex;
  flex: 1;
  min-height: 0;
  margin: 14px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  color: var(--color-ink-mute);
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--color-ink-mute) 42%, transparent);
  border-radius: var(--radius-3);
}

.nursery-primary-page .dc-data-shot-placeholder > i {
  margin-bottom: 4px;
  color: var(--color-coral-500);
  font-size: 28px;
}

.nursery-primary-page .dc-data-shot-placeholder > strong {
  color: var(--color-ink-deep);
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.2;
}

.nursery-primary-page .dc-data-shot-placeholder > small {
  font-size: 12px;
  line-height: 1.4;
}

/* ── 15 · Closer ────────────────────────────────────────────────────────────────────────── */
/* Uses the shared full-bleed flat coral CTA without page-specific geometry. */

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

/* .dc-h-175 is a <h3>: the DS re-adds a default margin for that element type, so this
   reset is load-bearing and must survive - at ZERO specificity, via :where(), so a
   margin utility can still override it (coding-standards section 2 rule 5). */
:where(.nursery-primary-page .dc-h-175) { margin: 0; }

/* The comparison becomes a vertical story before the phone squeeze. */
@media (max-width: 800px) {
  .nursery-primary-page .dc-grid-problem { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .nursery-primary-page .dc-compare-arrow { min-height: 60px; }
  .nursery-primary-page .dc-compare-arrow::before {
    top: 0; right: auto; bottom: 0; left: 50%; width: 2px; height: auto;
    background-image: linear-gradient(180deg, rgb(255 255 255 / 0.2), var(--color-coral-500));
    transform: translateX(-50%);
  }
  .nursery-primary-page .dc-compare-arrow > i { transform: rotate(90deg); }
}

/* ── Phone: single column at 640 ─────────────────────────────────────────────────────────── */
/* DEPARTURE FROM THE REFERENCES, owner-approved 2026-08-17. The package does not adapt below
   ~1000px at all - that is the defect being fixed, so breakpoint fidelity is not the goal here;
   readability at 390 is. 640 is a value from the package's OWN inventory
   (1080/1000/940/900/800/720/680/640/620/560), so nothing is invented - it is a step this page's
   reference does not use, which is a much weaker objection than the invented 767/991 that STATUS
   section 5 records being swept out. Collapsing is keyed on the MEASURED column count, never the
   class name: several `dc-grid-2` computed 4 columns. */
@media (max-width: 640px) {
  .nursery-primary-page .dc-emma-tabs .tab { flex-basis: calc(50% - 2px); }
  .nursery-primary-page .dc-grid-emma,
  .nursery-primary-page .dc-grid-families,
  .nursery-primary-page .dc-grid-results,
  .nursery-primary-page .dc-grid-button,
  .nursery-primary-page .dc-grid-crosssell,
  .nursery-primary-page .dc-grid-hero,
  .nursery-primary-page .dc-grid-pairs,
  .nursery-primary-page .dc-grid-table {
    grid-template-columns: minmax(0, 1fr);
  }

  .nursery-primary-page .dc-pipeline-step { font-size: 9.5px; letter-spacing: -0.01em; }
  .nursery-primary-page .dc-pipeline-step > span { width: 36px; height: 36px; font-size: 13px; }
  .nursery-primary-page .dc-pipeline-step:not(:last-child)::after {
    top: 17px; left: calc(50% + 17px); width: calc(100% - 34px);
  }

  .nursery-primary-page .dc-data-shot {
    aspect-ratio: 4 / 3;
  }
}