/* Security — page CSS
 * ============================================================================================
 * GOAL: a FAITHFUL (1:1) reproduction of the reference "Security.dc.html" without its inline
 * styles. Every value below was read off the reference, not guessed.
 *
 * STRATEGY (WORKFLOW.md): the markup uses DESIGN-SYSTEM classes wherever the DS has the right
 * component (.section, .page-container, .btn/.btn-ink/.btn-light/.btn-outline-light,
 * .cta-section + .cta-section-flat, .section-glow*, .orange-title), and this file carries the
 * reference's metric DELTAS as page-scoped overrides. Tuning toward the DS later is deleting
 * overrides one at a time, not rewriting markup.
 *
 * Every rule is scoped under `.security-page`, so this file is inert on any other page.
 *
 * WHAT THE REFERENCE SHARES WITH OUR TOKENS (its :root block, compared):
 *   IDENTICAL, so we use ours — ink #0F1A4F / #4D5B7F / #8893B0, accent #EC634B,
 *   accent-soft #FFE7DD, paper #FFFFFF, sand #F4F5F9 (page-bg), rule #E6E8EF, dark #0B1023,
 *   and the mono face (IBM Plex Mono = our --font-label).
 *   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)
 *     #E9ECF3  sand-2             (declared by the reference, unused on this page)
 *   Three shadows have no token: 0 14px 40px /.07 (the prose card), 0 24px 60px /.14 (the
 *   screenshot frame) and 0 10px 24px coral/.28 (the icon tile).
 *
 * GEOMETRY: the reference container is 1200px with a 24px gutter; ours is 1224/32. Overridden
 * here only — .page-container and .section in app/ are untouched.
 * ============================================================================================ */

.security-page {
  --dc-on-dark-body: var(--color-on-dark-body);     /* body copy on the dark paperwork card */
  --dc-shadow-card: 0 14px 40px rgba(15, 26, 79, 0.07);   /* the prose card */
  --dc-shadow-shot: 0 24px 60px rgba(15, 26, 79, 0.14);   /* the screenshot frame */
  --dc-shadow-tile: 0 10px 24px rgba(236, 99, 75, 0.28);  /* the coral icon tile */

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

  /* The reference sets `font-family: var(--font-body)` on its root element, and so must we:
     `.app` declares only `text-ink-soft`, NOT a font family, so body copy on a marketing page
     falls through to Tailwind's generic `ui-sans-serif, system-ui` stack rather than Inter
     unless an element carries an explicit font class. Measured, not assumed — it re-wrapped a
     hero paragraph from 5 lines to 4 (−28px). Flagged in the report as a production issue;
     fixed page-locally here because this file may not touch app/. */
  font-family: var(--font-sans);
}

/* ── Container: 1200px, 24px gutter — set-wide, `_shared/page-shared.css` §2 ─────────── */
/* ── Vertical rhythm — the reference's own per-section values ────────────────────────────── */
/* Deliberately literal (`dc-py-<top>-<bottom>`) so a later normalisation pass maps each one to
   a DS step or explains why not. The reference does NOT step these down on mobile — the fixed
   nav is the same height at every width — so neither do we. */
.security-page .dc-py-148-40 { padding-bottom: 40px; }
.security-page .dc-py-40-88  { padding-top: 40px;  padding-bottom: 88px; }

/* The closer is a full-bleed band: .cta-section supplies it, only the padding is the
   reference's (clamp 64 → 120, 24px sides) rather than our 96px default. */
.security-page .cta-section { padding: clamp(64px, 9vw, 120px) 24px; }

/* ── Display type — the reference clamps each headline individually ──────────────────────── */
.security-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. Written as a plain descendant selector (0-2-0) this silently beat every unlayered
   Tailwind margin utility — WORKFLOW §4b trap 1. Same trick the DS uses for :where(.app h3). */
:where(.security-page [class*="dc-t-"]) {
  margin: 0;
  text-wrap: balance;
}

.security-page .dc-t-74 { font-size: clamp(38px, 5.4vw, 74px); line-height: 1.02; letter-spacing: -0.04em; }
.security-page .dc-t-66 { font-size: clamp(32px, 5vw,   66px); line-height: 1.02; letter-spacing: -0.04em; }

/* ── Body copy steps (Inter) ────────────────────────────────────────────────────────────── */
.security-page .dc-lede-17 { font-size: clamp(15.5px, 1.7vw, 17.5px); line-height: 1.6; color: var(--color-ink-soft); margin: 0; }
.security-page .dc-body-13 { font-size: 13.5px; line-height: 1.5; margin: 0; }
.security-page .dc-closer-lede {
  font-size: clamp(17px, 2vw, 21px); line-height: 1.5;
  color: rgba(255, 255, 255, 0.92); margin: 0 auto;
}

/* ── Mono labels (IBM Plex Mono 500 = our --font-label) ──────────────────────────────────── */
/* The reference declares every label with the `font:` SHORTHAND and no `/line-height`, so they
   all compute to `normal`. Inheriting our 1.5 instead makes each label row taller — WORKFLOW
   §4b trap 2, the single biggest source of height error in every batch. Declared once here. */
.security-page .dc-eyebrow,
.security-page .dc-label-10,
.security-page .dc-label-9,
.security-page .dc-toc-title {
  font-family: var(--font-label);
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  display: block;
}

.security-page .dc-eyebrow    { font-size: 12px;   letter-spacing: 0.09em; }
.security-page .dc-eyebrow-hero { color: var(--color-ink-mute); }   /* hero eyebrow is ink-mute, not coral */
.security-page .dc-label-10   { font-size: 10.5px; letter-spacing: 0.07em; }
.security-page .dc-label-9    { font-size: 9.5px;  letter-spacing: 0.07em; }
.security-page .dc-toc-title  { font-size: 10.5px; letter-spacing: 0.08em; }

/* The claims strip already carries its copy in capitals, so no case change is applied twice. */
.security-page .dc-claims {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--color-rule);
}
.security-page .dc-claims .dc-label-10 { display: inline-block; }

/* ── Hero ───────────────────────────────────────────────────────────────────────────────── */
/* The TOP-CENTRED hero glow — 700px, pulled up so only the falloff shows. Our .section-glow is
   520px with four CORNER placements, so it cannot express this one; it is the package's most
   common hero glow (19/38 pages) and is the strongest case after the card hairline for a DS
   placement modifier. Colour is color-mix over the token, which is exactly rgba(236,99,75,.1). */
.security-page .dc-glow-top {
  position: absolute;
  width: 700px; height: 700px;
  left: 50%; top: -440px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-coral-500) 10%, transparent), transparent 62%);
}

/* The Trust Centre screenshot frame. */
.security-page .dc-shot {
  border-radius: var(--radius-4\.5);
  overflow: hidden;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  box-shadow: var(--dc-shadow-shot);
}
.security-page .dc-shot img { display: block; width: 100%; height: auto; }

/* ── Grids, measured off the reference ───────────────────────────────────────────────────── */
.security-page .dc-grid { display: grid; }
.security-page .dc-grid-hero   { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.security-page .dc-grid-detail { grid-template-columns: 230px minmax(0, 1fr);                gap: clamp(28px, 4vw, 56px); align-items: start; }

.security-page .dc-measure-22ch { max-width: 22ch; }
.security-page .dc-measure-46ch { max-width: 46ch; }

/* ── The table of contents ──────────────────────────────────────────────────────────────── */
.security-page .dc-toc-wrap { position: sticky; top: 96px; }
.security-page .dc-toc      { display: flex; flex-direction: column; gap: 2px; }

.security-page .dc-toc-link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  padding: 8px 14px;
  color: var(--color-ink-soft);
  border-left: 2px solid var(--color-rule);
  transition: color 200ms cubic-bezier(.2, .8, .2, 1), border-color 200ms cubic-bezier(.2, .8, .2, 1);
}
.security-page .dc-toc-link:hover { color: var(--color-ink-deep); }

/* `.is-on` is set in the markup for the first entry AND toggled by page.js scroll-spy, so it
   is styled here and present in the markup — a class only ever named in JS would never
   be styled at all (WORKFLOW §4). */
.security-page .dc-toc-link.is-on {
  color: var(--color-ink-deep);
  border-left-color: var(--color-coral-500);
  font-weight: 700;
}

/* ── The prose cards ────────────────────────────────────────────────────────────────────── */
/* The reference styles these through a `[data-legal]` attribute context rather than classing
   every element, and this is genuinely prose — so it is reproduced as a page-scoped context.
   The same block appears on four package pages (Security, Cookie, Privacy, T&Cs), which makes
   "legal prose card" a real DS candidate once the other two are ported. */
.security-page .dc-stack { display: flex; flex-direction: column; gap: 16px; }

.security-page .dc-legal {
  background: var(--color-paper);
  border-radius: var(--radius-4\.5);
  box-shadow: var(--dc-shadow-card);
  padding: clamp(26px, 3vw, 36px) clamp(26px, 3.2vw, 40px);
  scroll-margin-top: 96px;
}

.security-page .dc-legal h2 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.22; letter-spacing: -0.02em;
  margin: 0 0 12px; color: var(--color-ink-deep);
}
.security-page .dc-legal h3 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 15.5px; line-height: 1.3; letter-spacing: -0.012em;
  margin: 22px 0 8px; color: var(--color-ink-deep);
}
.security-page .dc-legal p {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 15px; line-height: 1.7;
  margin: 0 0 14px; color: var(--color-ink-soft);
}
.security-page .dc-legal p:last-child { margin-bottom: 0; }

/* On this page the reference sets `a { color: #0F1A4F }` with a coral hover (the Cookie
   reference inverts it), so the prose links are ink-deep. */
.security-page .dc-legal a          { color: var(--color-ink-deep); }
.security-page .dc-legal a:hover    { color: var(--color-coral-500); }

/* The coral icon tile that opens each card. 8–10 package pages use this device at six sizes;
   noted as a size-modifier DS candidate, not built here. */
.security-page .dc-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--radius-3);
  background: var(--color-coral-500);
  box-shadow: var(--dc-shadow-tile);
  margin-bottom: 18px;
}
.security-page .dc-tile i { font-size: 16px; color: #fff; }

.security-page .dc-tile-flat { border-radius: var(--radius-3); box-shadow: none; margin-bottom: 0; flex: none; }
.security-page .dc-tile-flat i { font-size: 15px; }

/* ── The dark "paperwork" card ──────────────────────────────────────────────────────────── */
.security-page .dc-paperwork {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 18px 28px;
  background: var(--color-dark-band);
  border-radius: var(--radius-4\.5);
  padding: clamp(26px, 3vw, 36px) clamp(26px, 3.2vw, 40px);
}
.security-page .dc-paperwork-body { flex: 1; min-width: 280px; }
.security-page .dc-paperwork-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 16.5px; letter-spacing: -0.012em; color: #fff;
  /* `font:` shorthand with no `/line-height` again — inheriting 1.5 made this card +9px. */
  line-height: normal;
}
.security-page .dc-on-dark-body { color: var(--dc-on-dark-body); }
.security-page .dc-shrink-0 { flex: none; }

/* ── Exact spacing steps ────────────────────────────────────────────────────────────────── */
/* Named by px so they can never be confused with a Tailwind step. Tailwind's compiled spacing
   surface is patchy here (mt-11 compiles, mt-9/mt-14 do not — WORKFLOW §4b trap 4), and these
   are the reference's own values, so they are declared rather than rounded. Declared AFTER the
   type/body blocks so they win the equal-specificity tie against their `margin: 0`. */
.security-page .dc-mt-3  { margin-top: 3px; }
.security-page .dc-mt-14 { margin-top: 14px; }
.security-page .dc-mt-20 { margin-top: 20px; }
.security-page .dc-mt-24 { margin-top: 24px; }
.security-page .dc-mt-26 { margin-top: 26px; }
.security-page .dc-mt-34 { margin-top: 34px; }
.security-page .dc-mb-14 { margin-bottom: 14px; }

/* ── Reflow — the reference's own breakpoint (1000px) ────────────────────────────────────── */
@media (max-width: 1000px) {
  .security-page .dc-grid-hero,
  .security-page .dc-grid-detail { grid-template-columns: minmax(0, 1fr); }
  .security-page .dc-toc-wrap    { position: static; }
}

/* 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.
 */