/* Data+ — page CSS
 * ============================================================================================
 * GOAL: a FAITHFUL (1:1) reproduction of the reference "Data Plus.dc.html" (11 sections,
 * 341 inline styles) without those inline styles. Values read out of the reference by parsing.
 *
 * STRATEGY (prototypes/WORKFLOW.md §0): DS classes carry the components, this file carries the
 * package's metric DELTAS as page-scoped overrides, so tuning toward the DS later is deleting
 * overrides rather than rewriting markup. All rules scoped under `.data-plus-page`.
 *
 * THE PRODUCT-PAGE SHAPE (see the report): this is a different archetype from the audience
 * pages. Its rhythm is a flat 88px rather than the audience pages' hand-tuned 96/104/128; it
 * alternates paper and sand in runs rather than tinting per section; and it carries no logo
 * marquee, no results/testimonial section and no resources grid. Emma is a 3-card LIVE /
 * COMING SOON grid, not a prompt card, and the "journey" is a 4-row numbered stepper.
 *
 * TOKENS — identical to ours, used directly: the whole ink scale, coral-500, coral-100
 * (`accent-soft`), ok-green + ok-green-soft + ok-green-bright, page-bg (`sand`), paper,
 * rule #E6E8EF, dark-band #0B1023, radii 5/7/10/11/13/16/18/22/28/999, and one shadow exactly:
 *   0 30px 80px rgba(15,26,79,.12) = --shadow-deep (the hero mock)
 * 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.
 *   #C9D1E6 list copy on dark · #5C688A footnote on dark · #8D9AB8 guardrail strip on dark ·
 *   #F2B01E the COMING SOON amber (our warn-amber is #FEC84B — a different value)
 * Five shadows have no token: /.06 inset panel, /.14 phone, /.08 mock, /.08 icon tile,
 * /.07 feature card, plus the coral-tinted 0 10px 24px rgba(236,99,75,.28) icon glow.
 *
 * GEOMETRY: reference container is 1200px with a 24px gutter; the DS is 1224/32. Overridden
 * page-locally only — .page-container and .section are untouched.
 * ============================================================================================ */

.data-plus-page {
  --dc-sand-2: #E9ECF3;
  --dc-on-dark-body: var(--color-on-dark-body);
  --dc-on-dark-bright: var(--color-on-dark-bright);
  --dc-on-dark-faint: var(--color-on-dark-faint);
  --dc-on-dark-strip: var(--color-ink-mute);
  --dc-soon-amber: #F2B01E;

  --dc-shadow-inset: 0 24px 60px rgba(15, 26, 79, 0.06);
  --dc-shadow-phone: 0 20px 60px rgba(15, 26, 79, 0.14);
  --dc-shadow-mock:  0 12px 32px rgba(15, 26, 79, 0.08);
  --dc-shadow-tile:  0 8px 22px  rgba(15, 26, 79, 0.08);
  --dc-shadow-feat:  0 14px 40px rgba(15, 26, 79, 0.07);
  --dc-shadow-icon:  0 10px 24px rgba(236, 99, 75, 0.28);

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

  /* Inter, explicitly — `.app` sets only the body colour, so a bare <p> would inherit the
     system sans. The reference sets font-family on its own root wrapper; this mirrors that. */
  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.
 */

/* ── Vertical rhythm ────────────────────────────────────────────────────────────────────── */
/* A flat 88px is the product-page rhythm, but the hero and the two "second half of a pair"
   sections break it, so the values are still literal per section. */
.data-plus-page .dc-py-88     { padding-top: 88px;  padding-bottom: 88px; }
.data-plus-page .dc-py-0-88   { padding-top: 0;     padding-bottom: 88px; }
.data-plus-page .dc-py-0-96   { padding-top: 0;     padding-bottom: 96px; }
.data-plus-page .dc-py-none   { padding-top: 0;     padding-bottom: 0; }

/* Two sections are hairlined rather than tinted */
.data-plus-page .dc-hairline-y {
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

/* ── Display type ───────────────────────────────────────────────────────────────────────── */
/* IMPORTANT: the reference writes every heading with the `font:` SHORTHAND, which resets
   line-height to `normal` unless a /value is given. Two of its steps genuinely have no
   /value (the hero eyebrow wordmark and the mock row titles), so those are set explicitly
   here rather than inherited — that shorthand reset was the largest source of height error
   across this batch. */
.data-plus-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(.data-plus-page [class*="dc-t-"]) {
  margin: 0;
  text-wrap: balance;
}

.data-plus-page .dc-t-84   { font-size: clamp(44px, 6vw,   84px); line-height: 1.0;  letter-spacing: -0.04em; }
.data-plus-page .dc-t-80   { font-size: clamp(38px, 6vw,   80px); line-height: 1.0;  letter-spacing: -0.04em; }
.data-plus-page .dc-t-54   { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -0.03em; }
.data-plus-page .dc-t-48   { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
.data-plus-page .dc-t-42   { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1;  letter-spacing: -0.025em; }
.data-plus-page .dc-t-38   { font-size: clamp(24px, 3vw,   38px); line-height: 1.12; letter-spacing: -0.025em; }
.data-plus-page .dc-t-26   { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.2;  letter-spacing: -0.018em; }
.data-plus-page .dc-t-17-5 { font-size: 17.5px; line-height: 1.28; letter-spacing: -0.014em; }
.data-plus-page .dc-t-17-5b{ font-size: 17.5px; line-height: 1.25; }
.data-plus-page .dc-t-16-5 { font-size: 16.5px; line-height: 1.28; letter-spacing: -0.012em; }
.data-plus-page .dc-t-14   { font-size: 14px;   line-height: 1.2;  letter-spacing: -0.01em; text-transform: none; }
.data-plus-page .dc-t-13   { font-size: 13px;   line-height: 1.25; font-weight: 600; }
.data-plus-page .dc-t-12-5 { font-size: 12.5px; line-height: 1.25; font-weight: 600; }

/* ── Body copy steps, named by px ───────────────────────────────────────────────────────── */
.data-plus-page .dc-lede       { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); }
.data-plus-page .dc-body-16    { font-size: 16px;   line-height: 1.6;  color: var(--color-ink-soft); margin: 0; }
.data-plus-page .dc-body-15-5  { font-size: 15.5px; line-height: 1.6;  color: var(--color-ink-soft); }
.data-plus-page .dc-body-15    { font-size: 15px;   line-height: 1.6;  color: var(--color-ink-soft); }
.data-plus-page .dc-body-14-5  { font-size: 14.5px; line-height: 1.55; margin: 0; }
.data-plus-page .dc-body-14    { font-size: 14px;   line-height: 1.55; color: var(--color-ink-soft); margin: 0; }
.data-plus-page .dc-body-14-6  { font-size: 14px;   line-height: 1.6;  color: var(--color-ink-soft); }
.data-plus-page .dc-body-13-5  { font-size: 13.5px; line-height: 1.55; color: var(--color-ink-soft); margin: 0; }
.data-plus-page .dc-body-13-5t { font-size: 13.5px; line-height: 1.5;  color: var(--color-ink-soft); margin: 0; }
.data-plus-page .dc-body-13-45 { font-size: 13.5px; line-height: 1.45; margin: 0; }
.data-plus-page .dc-body-13    { font-size: 13px;   line-height: 1.5;  margin: 0; }
.data-plus-page .dc-body-12-5  { font-size: 12.5px; line-height: 1.45; color: var(--color-ink-soft); margin: 0; }
.data-plus-page .dc-body-12    { font-size: 12px;   line-height: 1.5;  color: var(--color-ink-soft); margin: 0; }
.data-plus-page .dc-body-11    { font-size: 11px;   line-height: 1.4;  margin: 0; }
/* Colour declared at zero specificity so a per-instance colour utility still wins (the sanctioned
   default-not-decree pattern, coding-standards §2 rule 5). As a plain 0-2-0 descendant rule it beat
   `.text-primary` on the exception line, which is how that coral was lost. */
:where(.data-plus-page .dc-body-11) { color: var(--color-ink-mute); }
.data-plus-page .dc-body-10-5  { font-size: 10.5px; line-height: 1.4;  color: var(--color-ink-mute); margin: 0; }
.data-plus-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 ───────────────────────────────────────────────────────────────── */
/* 12.5px/0.08em and 10.5px/0.08em are exactly our font-label + text-label-l / -m +
   tracking-label. The 12px/0.09em, 11px, 10px, 9.5px/0 and 9px/0.06em steps have no DS
   equivalent — the cross-page gap being counted. */
.data-plus-page [class*="dc-label-"],
.data-plus-page .dc-eyebrow {
  font-family: var(--font-label);
  font-weight: 500;
  text-transform: uppercase;
}

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

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

.data-plus-page .dc-label-11   { font-size: 11px;   letter-spacing: 0.08em; color: var(--color-coral-500); }
.data-plus-page .dc-label-10   { font-size: 10px;   letter-spacing: 0.08em; }
:where(.data-plus-page .dc-label-10) { color: var(--color-ink-mute); }  /* default, overridable (§2 rule 5) */
.data-plus-page .dc-label-10-7 { font-size: 10px;   letter-spacing: 0.07em; color: var(--color-ink-mute); }
.data-plus-page .dc-label-9-5  { font-size: 9.5px;  letter-spacing: 0;      color: var(--color-ink-mute); }
.data-plus-page .dc-label-9    { font-size: 9px;    letter-spacing: 0.07em; color: var(--color-ink-mute); }
.data-plus-page .dc-label-9-06 { font-size: 9px;    letter-spacing: 0.06em; color: var(--color-ink-mute); }
.data-plus-page .dc-label-8-5  { font-size: 8.5px;  letter-spacing: 0;      color: var(--color-ink-mute); }

/* ── Gaps Tailwind's 4px scale cannot express ───────────────────────────────────────────── */
.data-plus-page .dc-mt-3  { margin-top: 3px; }
.data-plus-page .dc-mt-14 { margin-top: 14px; }
.data-plus-page .dc-mt-18 { margin-top: 18px; }
.data-plus-page .dc-mt-22 { margin-top: 22px; }
.data-plus-page .dc-mt-28 { margin-top: 28px; }
.data-plus-page .dc-mt-30 { margin-top: 30px; }
.data-plus-page .dc-mb-6  { margin-bottom: 6px; }
.data-plus-page .dc-mb-7  { margin-bottom: 7px; }
.data-plus-page .dc-mb-14 { margin-bottom: 14px; }
.data-plus-page .dc-mb-24 { margin-bottom: 24px; }
.data-plus-page .dc-mb-28 { margin-bottom: 28px; }

/* ── Grids / measures ───────────────────────────────────────────────────────────────────── */
.data-plus-page .dc-grid { display: grid; }
.data-plus-page .dc-grid-halves { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.data-plus-page .dc-grid-review { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.data-plus-page .dc-grid-collect{ grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.data-plus-page .dc-grid-feat   { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.data-plus-page .dc-grid-split  { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.data-plus-page .dc-grid-emma   { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.data-plus-page .dc-grid-step   { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 6px 28px; align-items: baseline; }

.data-plus-page .dc-measure-62ch { max-width: 62ch; }
.data-plus-page .dc-measure-58ch { max-width: 58ch; }
.data-plus-page .dc-measure-54ch { max-width: 54ch; }
.data-plus-page .dc-measure-52ch { max-width: 52ch; }
.data-plus-page .dc-measure-44ch { max-width: 44ch; }
.data-plus-page .dc-measure-780  { max-width: 780px; }
.data-plus-page .dc-measure-760  { max-width: 760px; }
.data-plus-page .dc-measure-560  { max-width: 560px; }

/* MOVED FROM 991px TO THE REFERENCE'S OWN 1080px, AND TRIMMED TO WHAT IT ACTUALLY COLLAPSES.
 * The reference has exactly one grid-collapse breakpoint and it is 1080px:
 *   [data-dpfeat]     (§7 features 4-up)      -> repeat(2, …)   = .dc-grid-feat
 *   [data-dprow]      (§5 stepper title rows) -> 1 col          = .dc-grid-step
 *   [data-dpsplit]    (§7 2-up split)         -> 1 col          = .dc-grid-split
 *   [data-collectgrid](§6 dark panel 0.9/1.1) -> 1 col          = .dc-grid-collect
 * Three selectors that were in the 991px block collapse NOWHERE in the reference and have been
 * removed: .dc-grid-halves (§3), .dc-grid-review (§4) and .dc-grid-emma (its 3-up stays three
 * columns all the way down). Their narrow-viewport squeeze is the reference's own — STATUS.md §5. */
@media (max-width: 1080px) {
  .data-plus-page .dc-grid-collect,
  .data-plus-page .dc-grid-split { grid-template-columns: minmax(0, 1fr); }
  .data-plus-page .dc-grid-feat  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-plus-page .dc-grid-step  { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* The reference breaks its feature row to one column at 640px — matched exactly. */
@media (max-width: 640px) {
  .data-plus-page .dc-grid-feat { grid-template-columns: minmax(0, 1fr); }
}

/* The DS .section-glow with the reference's geometry: 720px centred on the top edge, unblurred,
   so none of the four corner-placement classes applies. */
.data-plus-page .dc-glow-top {
  width: 720px; height: 720px; left: 50%; top: -420px;
  transform: translateX(-50%); filter: none;
}

.data-plus-page .dc-hero-mock {
  max-width: 760px;
  margin: 44px auto 0;
  padding: 22px 26px;
  text-align: left;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-4\.5);
  box-shadow: var(--shadow-deep);
}

.data-plus-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);
}

/* Bar rows. display:block matters — these are <span>s (a <div> inside a <p> would be invalid)
   and an inline element ignores height. */
.data-plus-page .dc-bars { display: flex; flex-direction: column; gap: 10px; }
.data-plus-page .dc-bar-head { display: flex; justify-content: space-between; gap: 12px; }

.data-plus-page .dc-bar {
  display: block;
  height: 9px;
  margin-top: 5px;
  border-radius: var(--radius-1\.5);
  overflow: hidden;
  background: var(--dc-sand-2);
}

.data-plus-page .dc-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-1\.5);
  background: var(--color-coral-500);
  transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.data-plus-page .dc-fill-green { background: var(--color-ok-green); }
.data-plus-page .dc-fill-navy  { background: var(--color-ink-deep); }
.data-plus-page .dc-w-73 { width: 73%; }
.data-plus-page .dc-w-18 { width: 18%; }
.data-plus-page .dc-w-12 { width: 12%; }

/* THE ARMED STATE CARRIES NO TRANSITION — the trap reveal.css documents. A transition uses the
   properties of the state being moved TO, so leaving the 1.1s here makes arming animate: the
   bars paint full width on load and visibly shrink to zero. */
.data-plus-page .dc-grow-armed .dc-bar-fill { width: 0; transition: none; }


/* The live dot — static, as the reference draws it */
.data-plus-page .dc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok-green-bright); }

/* ── 2 · The problem: the struck-chip row ───────────────────────────────────────────────── */
/* This IS the DS .badge-struck device (brand-voice §7) at exactly the DS's own metrics —
   7px 14px, 12.5px, font-heading semibold, page-bg fill, coral line-through. The only delta is
   the border colour (#ECEEF3 here vs our --color-rule) and the reference's 1px decoration
   against the DS's 2px. */
.data-plus-page .badge-struck { border-color: var(--color-rule); text-decoration-thickness: 1px; }

/* ── 3 · The parent phone mock ──────────────────────────────────────────────────────────── */
.data-plus-page .dc-phone-tray {
  display: flex;
  justify-content: center;
  padding: 36px 0;
  border-radius: var(--radius-4);
  background: var(--color-page-bg);
}

.data-plus-page .dc-phone {
  width: 290px;
  padding: 20px 18px;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-7);
  box-shadow: var(--dc-shadow-phone);
}

.data-plus-page .dc-phone-head { display: flex; justify-content: space-between; gap: 10px; }

.data-plus-page .dc-phone-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  padding: 11px 13px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-2\.5);
}

/* the one row the reference highlights — a 1.5px coral border over the coral wash */
.data-plus-page .dc-phone-row-hi { border: 1.5px solid var(--color-coral-500); background: var(--color-coral-100); }
.data-plus-page .dc-phone-row-note { background: var(--color-page-bg); }
.data-plus-page .dc-phone-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; }
.data-plus-page .dc-phone-foot i { font-size: 9px; }

/* the mono status pill used in the phone, the review mock and the write-back rows */
.data-plus-page .dc-pill {
  flex: none;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 9.5px;
  border-radius: var(--radius-full);
  padding: 4px 9px;
  white-space: nowrap;
}

.data-plus-page .dc-pill-wide   { padding: 4px 10px; }
.data-plus-page .dc-pill-green  { color: var(--color-ok-green); background: var(--color-ok-green-soft); }
.data-plus-page .dc-pill-coral  { color: #fff; background: var(--color-coral-500); }
.data-plus-page .dc-pill-neutral{ color: var(--color-ink-soft); background: var(--dc-sand-2); }

/* ── 4 · Review and write-back ──────────────────────────────────────────────────────────── */
/* Note the inversion: on this page the inset panel is SAND on a PAPER section, where the
   audience pages put a white panel on a sand section. Same shell, opposite fill. */
.data-plus-page .dc-panel {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: var(--radius-5\.5);
  position: relative;
  overflow: hidden;
}

.data-plus-page .dc-panel-sand { background: var(--color-page-bg); box-shadow: var(--dc-shadow-inset); padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 56px); }
.data-plus-page .dc-panel-dark { background: var(--color-dark-band); color: #fff; padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 52px); }

.data-plus-page .dc-mock {
  padding: 20px 22px;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-4);
  box-shadow: var(--dc-shadow-mock);
}

.data-plus-page .dc-mock-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.data-plus-page .dc-mock-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

.data-plus-page .dc-mock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-2\.5);
}

.data-plus-page .dc-mock-row-hi { border: 1.5px solid var(--color-coral-500); background: var(--color-coral-100); }
.data-plus-page .dc-mock-note { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--color-rule); }

/* ── 5 · How it works: the numbered stepper ─────────────────────────────────────────────── */
/* Four rows divided by hairlines, each an icon tile with a navy number badge pinned to its
   corner, then a two-column title/description grid aligned on the baseline. */
.data-plus-page .dc-steps { border-top: 1px solid var(--color-rule); }

.data-plus-page .dc-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-rule);
}

.data-plus-page .dc-step:last-child { border-bottom: 0; }

.data-plus-page .dc-step-tile {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-3\.5);
  background: var(--color-paper);
  box-shadow: var(--dc-shadow-tile);
}

.data-plus-page .dc-step-tile > i { font-size: 16px; color: var(--color-coral-500); }

.data-plus-page .dc-step-no {
  position: absolute;
  top: -7px;
  right: -7px;
  padding: 3px 6px;
  border-radius: var(--radius-full);
  background: var(--color-ink-deep);
  color: #fff;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
}

.data-plus-page .dc-step-body { flex: 1; min-width: 0; }

/* ── 6 · Accurate and reliable (the dark panel) ─────────────────────────────────────────── */
.data-plus-page .dc-glow-bl-520 { width: 520px; height: 520px; left: -190px; bottom: -240px; }
.data-plus-page .dc-checks { display: flex; flex-direction: column; gap: 14px; position: relative; }
.data-plus-page .dc-check { display: flex; gap: 12px; align-items: flex-start; }
.data-plus-page .dc-check > i { flex: none; margin-top: 5px; font-size: 11px; color: var(--color-coral-500); }

.data-plus-page .dc-link-coral {
  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;
}

.data-plus-page .dc-link-coral i { font-size: 10px; }
.data-plus-page .dc-link-coral:hover { color: #fff; }
.data-plus-page .dc-link-coral-ink { font-size: 14px; }
.data-plus-page .dc-link-coral-ink:hover { color: var(--color-ink-deep); }

/* ── 7 · Features ───────────────────────────────────────────────────────────────────────── */
.data-plus-page .dc-feat {
  padding: 24px 26px;
  border-radius: var(--radius-4);
  background: var(--color-paper);
  box-shadow: var(--dc-shadow-feat);
}

/* The icon tile here is a CORAL FILL with a coral-tinted glow — the one place on the page the
   reference puts coral behind a white glyph rather than using coral as the glyph colour. */
.data-plus-page .dc-feat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-3);
  background: var(--color-coral-500);
  box-shadow: var(--dc-shadow-icon);
}

.data-plus-page .dc-feat-icon > i { font-size: 15px; color: #fff; }

.data-plus-page .dc-split {
  padding: 28px 30px;
  border-radius: var(--radius-4\.5);
  background: var(--color-paper);
  box-shadow: var(--dc-shadow-feat);
}

.data-plus-page .dc-split-list { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.data-plus-page .dc-split-list .dc-check > i { margin-top: 4px; }

/* ── 8 · Emma: the three-card LIVE / COMING SOON grid ───────────────────────────────────── */
.data-plus-page .dc-glow-tr-560 { width: 560px; height: 560px; right: -180px; top: -260px; }

.data-plus-page .dc-emma-card {
  padding: 26px;
  border-radius: var(--radius-4\.5);
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.12);
}

/* the third card is dashed, and its label is amber rather than coral */
.data-plus-page .dc-emma-card-soon { border: 1px dashed rgb(255 255 255 / 0.25); }
.data-plus-page .dc-label-soon { color: var(--dc-soon-amber); }

.data-plus-page .dc-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px 13px 16px;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.16);
}

.data-plus-page .dc-stat-pill-num {
  flex: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-coral-500);
}

/* The guardrail strip is a wrapped inline row here, not the DS .check-list column — the
   wording is still the contractual wording (brand-voice §6). */
.data-plus-page .dc-guard-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  color: var(--dc-on-dark-strip);
}

.data-plus-page .dc-guard-strip i { margin-right: 7px; font-size: 10px; color: var(--color-ok-green-bright); }

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

/* ── 10 · Related ───────────────────────────────────────────────────────────────────────── */
.data-plus-page .dc-related {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--color-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  flex-wrap: wrap;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.data-plus-page .dc-related-sep { color: var(--color-rule); }

/* ── 11 · Closer ────────────────────────────────────────────────────────────────────────── */
.data-plus-page .cta-section-actions{ margin-top: 34px; }

/* No narrow override for the closer panel: the reference holds its 40px sides at EVERY width
   (`clamp(56px,8vw,104px) 40px` - only the vertical is fluid), so the 480px step that was
   here was invented. The base rule above already IS the reference's clamp. */

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

/* ── PHONE (≤640) — beyond the reference, deliberately ───────────────────────────────────── */
/* The references pad in literal px with no media query at all, so at 390px they clip their own
   content (STATUS §5 records that as the defect most worth fixing at source). These rules fix the
   text loss WITHOUT hiding anything: the review panel stacks, and the phone mock scales instead of overflowing. */
@media (max-width: 640px) {
  .data-plus-page .dc-grid-review { grid-template-columns: minmax(0, 1fr); }
  /* the device mock is a fixed-aspect frame - scale it proportionally, never just cap its width */
  .data-plus-page .dc-phone { width: 100%; max-width: 195px; height: auto; }
}