/* ============================================================
 * RebateRight brand.css — the canonical shared stylesheet.
 *
 * SINGLE SOURCE. Edit here only (RebateRight.Brand/assets/css/brand.css),
 * then copy byte-identical to each consumer (manual; never edit a copy):
 *   - RebateRight.App/RebateRight.App/wwwroot/css/brand.css
 *   - RebateRight.Website/public/brand.css
 *
 * Token specs live in canon/visual/ (colour-palette, typography,
 * layout-grid, motion-principles, data-visualisation).
 *
 * Cascade is read-order (no @layer): web fonts → tokens → reset / element
 * defaults → layout primitives → brand components → shared components →
 * type-scale utilities (last, so they win on tied specificity) → media-
 * feature responses (prefers-reduced-motion / -contrast, print).
 *
 * Page-agnostic by rule: no selectors reference a specific page, product,
 * or site, so any surface can apply these primitives unchanged.
 *
 * Site chrome lives elsewhere: the header, nav, and footer are
 * site-specific, so they are NOT here — each consuming site keeps its own
 * chrome stylesheet (e.g. RebateRight.Website/public/site-chrome.css),
 * loaded right after brand.css.
 *
 * Fonts: self-hosted woff2 (Latin subset) — consumers must serve
 * /fonts/{dm-serif-display,inter,jetbrains-mono}.woff2.
 * ============================================================ */


/* ============================================================ */
/* 1 · WEB FONTS — self-hosted, Latin subset, woff2               */
/* ============================================================ */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-serif-display.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/jetbrains-mono.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================ */
/* 2 · TOKENS                                                     */
/* ============================================================ */
:root {
  /* === Colour palette (per canon/visual/colour-palette.md) === */
  --color-midnight:   #001E45;
  --color-navy:       #003780;
  --color-royal:      #0067AF;
  --color-sky:        #1296DF;
  --color-mist:       #E8F3FB;
  --color-paper:      #FAF8F4;
  --color-paper-dark: #F0EDE6;
  --color-stone-90:   #25272E;
  --color-stone-60:   #5C5E64;
  --color-stone-40:   #8E8F94;
  --color-stone-20:   #CFCFCF;
  --color-stone-05:   #F1EFEC;

  /* === Functional UI palette (per colour-palette.md §"Functional UI layer").
     Each role pairs a 600 foreground with a 50 background, WCAG AA at native sizes.
     Never used as marketing decoration; never as full-section backgrounds. */
  --color-error-600:    #B42424;
  --color-error-50:     #FCEBEB;
  --color-warning-600:  #B07A1A;
  --color-warning-50:   #FCF3DF;
  --color-success-600:  #2A6E48;
  --color-success-50:   #E8F1EB;
  --color-info-600:     #4A5B72;
  --color-info-50:      #EEF1F5;

  /* === Eligibility verdict layer (per colour-palette.md §"Eligibility verdicts").
     Semantic aliases: a Medicare answer is never an error. Only Eligible earns a
     hue; Not eligible leads in Navy (not red); Cannot determine is Info-slate; Not
     checked is muted; red is reserved for our own failures (error card only). */
  --verdict-eligible:          var(--color-success-600);
  --verdict-not-eligible:      var(--color-navy);
  --verdict-cannot-determine:  var(--color-info-600);
  --verdict-not-checked:       var(--color-stone-60);
  --verdict-error:             var(--color-error-600);

  /* === Type families (per typography.md) === */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* === Type scale (per typography.md) ===
     Role-tier-size pattern (Material 3 / Polaris / Atlassian convention).
     Display sizes are fluid; functional sizes are fixed for predictability.
       display-*  — DM Serif Display, editorial moments
       title-*    — Inter, semantic in-flow headings (paired with h1/h2/h3)
       body-*     — Inter, prose
       label-*    — Inter, micro / metadata / eyebrows
       (canonical exceptions: tagline, hero-num, wordmark, mono) */
  --type-display-xl: clamp(2.75rem, 4.5vw + 1rem, 4rem);   /* 44 → 64 — page hero */
  --type-display-l:  clamp(2.25rem, 3vw + 1rem, 3rem);     /* 36 → 48 — section opener */
  --type-title-l:    2rem;       /* 32 — page title (non-hero) */
  --type-title-m:    1.5rem;     /* 24 — subsection */
  --type-title-s:    1.25rem;    /* 20 — card / in-body */
  --type-body-l:     1.125rem;   /* 18 — marketing body, lede */
  --type-body-m:     1rem;       /* 16 — default body */
  --type-body-s:     0.875rem;   /* 14 — secondary text */
  --type-label-m:    0.75rem;    /* 12 — caption, metadata */
  --type-label-s:    0.6875rem;  /* 11 — eyebrow uppercase tracked */
  --type-tagline:    clamp(1.25rem, 1vw + 0.875rem, 1.75rem); /* 20 → 28 — sub-hero italic */
  --type-quote:      clamp(1.5rem, 2vw + 1rem, 2.25rem);      /* 24 → 36 — customer pull-quote */
  --type-hero-num:   clamp(2.5rem, 3vw + 1rem, 3.5rem);       /* 40 → 56 — big-number heroes */

  /* === Line-heights — keyed to scale, not value === */
  --lh-display-xl:   1.05;
  --lh-display-l:    1.08;
  --lh-title-l:      1.2;
  --lh-title-m:      1.25;
  --lh-title-s:      1.3;
  --lh-tagline:      1.4;
  --lh-quote:        1.3;
  --lh-label:        1.4;
  --lh-body:         1.55;       /* default body prose */
  --lh-body-relaxed: 1.65;       /* lede, ledes, longer prose */
  --lh-body-loose:   1.7;        /* legal/docs long-form */

  /* === Letter-spacing tokens === */
  --track-tight:    -0.015em;    /* display scale */
  --track-snug:     -0.005em;    /* h1-h3 + body emphasis */
  --track-normal:    0;
  --track-eyebrow:   0.08em;     /* uppercase labels */

  /* === Spacing scale — 4-based, 11 steps (per layout-grid.md) ===
     Half-steps (4, 12, 20) earn their place; full steps are canon.
     Cross-component spacing picks from this scale. Below-scale
     component-internal micro-values (1–3px alignment, 6px pill gaps)
     may live as literals; promote to a token only if used 3+ times
     across unrelated components (Curtis threshold). See layout-grid.md
     §1 for the policy. */
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-20:  1.25rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-48:  3rem;
  --space-64:  4rem;
  --space-96:  6rem;
  --space-128: 8rem;
  --space-200: 12.5rem;

  /* Section padding — fluid clamp() */
  --space-section-tight:    clamp(2rem, 4vw + 1rem, 3rem);
  --space-section-standard: clamp(3rem, 6vw + 1rem, 5rem);
  --space-section-generous: clamp(5rem, 10vw + 1.5rem, 8rem);
  --space-section-reset:    clamp(8rem, 16vw + 2rem, 12.5rem);

  /* === Container widths (per layout-grid.md) === */
  --container-reading:  720px;
  --container-content:  960px;
  --container-standard: 1200px;
  --container-wide:     1440px;

  /* === Radius (per layout-grid.md) === */
  --radius-xs:      4px;     /* inline code chips, micro badges */
  --radius-default: 12px;
  --radius-soft:    24px;
  --radius-pill:    9999px;

  /* === Shadows — tokenised with color-mix so they breathe with the palette ===
     Card elevation: "Prefer Mist background over a shadow. Shadows allowed only
     when background contrast won't carry — a single subtle shadow, never stacked."
     (canon/visual/layout-grid.md) */
  --shadow-card:          0 1px 2px color-mix(in srgb, var(--color-midnight) 4%, transparent);
  --shadow-card-elevated: 0 4px 12px color-mix(in srgb, var(--color-midnight) 6%, transparent);
  --shadow-card-hero:     0 8px 24px color-mix(in srgb, var(--color-midnight) 8%, transparent);

  /* === Z-index ladder — flat, named === */
  --z-base:   0;
  --z-header: 10;
  --z-toast:  20;
  --z-modal:  30;

  /* === Viewport breakpoints (per canon/visual/layout-grid.md):
     sm 640 · md 1024 · lg 1440. Three, not five. CSS @media can't read
     custom properties, so the values are documented here for reference and
     applied directly in media queries below. Container queries are layered
     on components (`@container`) where appropriate. */

  /* === Duration + easing (per motion-principles.md) === */
  --duration-instant: 100ms;
  --duration-short:   200ms;
  --duration-medium:  300ms;
  --duration-long:    400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* default — both ends pinned */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);    /* element enters */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);    /* element exits */
}


/* ============================================================ */
/* 3 · RESET + ELEMENT DEFAULTS                                   */
/* ============================================================ */

/* Modern reset — Andy Bell flavour, trimmed to what we use. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  color-scheme: light;   /* form controls and scrollbars render light */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  min-block-size: 100vh;
  background: var(--color-paper);
  color: var(--color-midnight);
  font-family: var(--font-sans);
  font-size: var(--type-body-m);
  line-height: var(--lh-body);
  font-feature-settings: "tnum" 1;        /* tabular figures by default */
}
img, svg, video, picture { display: block; max-inline-size: 100%; block-size: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; color: inherit; }

/* Links — Royal default, Navy hover, underlined on focus-visible for accessibility. */
a {
  color: var(--color-royal);
  text-decoration: none;
  transition: color var(--duration-instant) var(--ease-standard);
}
a:hover { color: var(--color-navy); }

/* Content links — the ONE place links underline at rest. Scoped to .copy (the
   rich-text / prose region), never to a bare <p>: a layout <p> used as a
   container must not underline its links. Colour alone fails WCAG 1.4.1 (Royal
   sits ~1.1:1 on Stone-60 body text), so prose links carry an underline; colour
   + Navy hover come from the base `a` rule. :not([class]) leaves styled
   components (.link-arrow, buttons) untouched even inside prose. */
.copy a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

/* Paragraph defaults — soft body color, body line-height.
   Pages override for specific surfaces (emphasis copy, quotes, etc.). */
p { color: var(--color-stone-60); line-height: var(--lh-body); }

/* === Bare heading element defaults — paired with title-* utility classes.
   Semantic h1/h2/h3 carry the title-* size; apply .title-l/.title-m/.title-s on
   any non-heading element that needs the same styling explicitly. */
h1, .title-l {
  font-family: var(--font-sans);
  font-size: var(--type-title-l);
  line-height: var(--lh-title-l);
  font-weight: 600;
  letter-spacing: var(--track-snug);
  color: var(--color-midnight);
  text-wrap: balance;
}
h2, .title-m {
  font-family: var(--font-sans);
  font-size: var(--type-title-m);
  line-height: var(--lh-title-m);
  font-weight: 600;
  letter-spacing: var(--track-snug);
  color: var(--color-midnight);
  text-wrap: balance;
}
h3, .title-s {
  font-family: var(--font-sans);
  font-size: var(--type-title-s);
  line-height: var(--lh-title-s);
  font-weight: 600;
  letter-spacing: var(--track-snug);
  color: var(--color-midnight);
  text-wrap: balance;
}
h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--track-snug);
  color: var(--color-midnight);
}

/* === Blockquote — customer pull-quote primitive.
   DM Serif Display upright with a 3px Navy left rule is the canonical
   "this is a quoted human voice" treatment (variant C, locked 2026-05-26).
   Serif-shift is the primary signal; the left rule is the
   secondary; width constraint is the tertiary — three orthogonal cues.

   The semantic structure is <blockquote><p>...</p><footer><cite>...</cite>
   </footer></blockquote> per Adrian Roselli's 2023 screen-reader testing
   — footer is correctly scoped inside blockquote without redundancy.

   Component-scoped variants (e.g. .about-founders .founder-quote callout-
   in-card, .eligibility-card .finding-reason product result) override
   this default at higher specificity in page CSS and keep their own
   treatment intact. */
blockquote {
  font-family: var(--font-display);
  font-size: var(--type-quote);
  line-height: var(--lh-quote);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  color: var(--color-midnight);
  max-inline-size: 36rem;          /* 576px — pull-quote breath, font-independent
                                       (ch resolves wide on DM Serif Display) */
  border-inline-start: 3px solid var(--color-navy);
  padding-inline-start: var(--space-32);
  text-wrap: balance;
}
blockquote p + p { margin-block-start: var(--space-16); }
blockquote footer {
  margin-block-start: var(--space-24);
  font-family: var(--font-sans);
  font-size: var(--type-body-s);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh-body);
  color: var(--color-stone-60);
  letter-spacing: normal;
}
blockquote footer cite {
  font-style: normal;
}

/* === Selection — Navy on Paper. === */
::selection {
  background: var(--color-navy);
  color: var(--color-paper);
}

/* === Focus — single canonical ring for any interactive element.
   Keyboard-only by design (`:focus-visible`); mouse clicks don't trigger it.
   Pages can override on a specific component if a tighter ring is needed. */
:focus-visible {
  outline: 2px solid var(--color-royal);
  outline-offset: 2px;
}


/* ============================================================ */
/* 4 · LAYOUT PRIMITIVES                                          */
/* ============================================================ */

/* Containers — choose by content width. Body text never runs past 720px
   without a deliberate reason (60–75 char measure is sacred). */
.container         { max-inline-size: var(--container-standard); margin-inline: auto; padding-inline: var(--space-24); }
.container-reading { max-inline-size: var(--container-reading);  margin-inline: auto; padding-inline: var(--space-24); }
.container-content { max-inline-size: var(--container-content);  margin-inline: auto; padding-inline: var(--space-24); }
.container-wide    { max-inline-size: var(--container-wide);     margin-inline: auto; padding-inline: var(--space-24); }

/* Default section rhythm — every <section> gets standard padding.
   Modifiers tighten or relax. Page CSS can override per-section if needed. */
section { padding-block: var(--space-section-standard); }
section.tight    { padding-block: var(--space-section-tight); }
section.generous { padding-block: var(--space-section-generous); }
section.mist       { background: var(--color-mist); }
section.paper-dark { background: var(--color-paper-dark); }

/* Stack — vertical-rhythm utility. Applies margin-top to every direct child
   except the first. */
.stack-8  > * + * { margin-block-start: var(--space-8); }
.stack-16 > * + * { margin-block-start: var(--space-16); }
.stack-24 > * + * { margin-block-start: var(--space-24); }
.stack-32 > * + * { margin-block-start: var(--space-32); }
.stack-48 > * + * { margin-block-start: var(--space-48); }


/* ============================================================ */
/* 5 · BRAND COMPONENTS                                           */
/* ============================================================ */

/* === Buttons === */
.button-primary {
  display: inline-flex; align-items: center; gap: var(--space-8);
  background: var(--color-royal);
  color: var(--color-paper);
  padding-block: 0.875rem;          /* 14px — between space-12 and space-16; deliberate */
  padding-inline: var(--space-24);
  border-radius: var(--radius-default);
  font-weight: 500;
  font-size: var(--type-body-s);    /* 14px */
  transition: background var(--duration-instant) var(--ease-standard);
}
.button-primary:hover  { background: var(--color-navy); color: var(--color-paper); }
.button-primary:active { background: var(--color-midnight); }
.button-primary:focus-visible { outline-color: var(--color-navy); outline-offset: 3px; }

.button-secondary {
  display: inline-flex; align-items: center; gap: var(--space-8);
  color: var(--color-royal);
  padding-block: 0.875rem;
  padding-inline: 0;
  font-weight: 500;
  font-size: var(--type-body-s);
  transition: color var(--duration-instant) var(--ease-standard);
}
.button-secondary:hover  { color: var(--color-navy); }
.button-secondary:active { color: var(--color-midnight); }
.button-secondary:focus-visible { outline-offset: 4px; }

/* === Arrow links — a text link with a trailing "go" arrow, sharing the exact
   glyph and motion as .button-secondary. Classed, so the .copy content-underline
   never touches them. .link-arrow = forward (CTAs); .link-arrow-back = backward
   ("previous" navigation). The arrow lives in CSS; never hardcode → / ← in
   markup — use these classes so links and underlines never collide. === */
.link-arrow,
.link-arrow-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-royal);
  font-weight: 500;
  font-size: var(--type-body-s);
  text-decoration: none;
  transition: color var(--duration-instant) var(--ease-standard);
}
.link-arrow:hover,
.link-arrow-back:hover { color: var(--color-navy); }
.link-arrow:active,
.link-arrow-back:active { color: var(--color-midnight); }

.button-secondary::after,
.link-arrow::after { content: "→"; transition: transform var(--duration-instant) var(--ease-standard); }
.button-secondary:hover::after,
.link-arrow:hover::after { transform: translateX(2px); }

.link-arrow-back::before { content: "←"; transition: transform var(--duration-instant) var(--ease-standard); }
.link-arrow-back:hover::before { transform: translateX(-2px); }

/* === Badge — pill with optional icon. === */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding-block: var(--space-4); padding-inline: var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--color-mist);
  color: var(--color-navy);
  font-size: var(--type-label-m);
  font-weight: 500;
}
.badge svg { inline-size: 14px; block-size: 14px; }

/* === Big-number hero — DM Serif Display for impact figures only.
   Per data-visualisation.md: "DM Serif Display for big-number heroes only." */
.hero-number {
  font-family: var(--font-display);
  font-size: var(--type-hero-num);
  line-height: var(--lh-display-xl);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  color: var(--color-navy);
}


/* ============================================================ */
/* 6 · SITE CHROME — moved out of the shared system               */
/* ============================================================ */
/* The site header, nav, and footer are site-specific (not
   page-agnostic), so they no longer live here. Each consuming site
   keeps its own chrome stylesheet, loaded right after brand.css:
     - RebateRight.Website/public/site-chrome.css
   Moved out 2026-06-14. */

/* ============================================================ */
/* 7 · SHARED COMPONENTS                                          */
/* ============================================================
   Patterns reused across 2+ surfaces. Pages apply by class name;
   page CSS keeps only page-specific modifiers (variant copy,
   layout overrides, content-specific UI like rows or data tables).
   ============================================================ */

/* === Section heading — eyebrow label + h2 + optional lede. === */
.section-heading {
  max-inline-size: 720px;
  margin: 0 0 var(--space-48);
}
.section-heading .label-s { display: block; margin-block-end: var(--space-12); }
.section-heading .lede {
  margin-block-start: var(--space-20);
  font-size: var(--type-body-l);
  line-height: var(--lh-body-relaxed);
  max-inline-size: 58ch;
}
/* Centered variant — used in posture sections (about, security, legal). */
.section-heading--center {
  text-align: center;
  margin-block-end: var(--space-64);
  margin-inline: auto;
}
.section-heading--center h2 { margin-block-start: var(--space-16); }

/* === Tagline — DM Serif Display Navy sub-hero text. Carries the brand
   promise under every page hero in the same typeface as the hero itself.
   Locked 2026-05-26 (extends the serif boundary to include .tagline).
   Footer override below reverts to Inter italic for legibility at 14px. */
.tagline {
  font-family: var(--font-display);
  font-size: var(--type-tagline);
  line-height: var(--lh-tagline);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  color: var(--color-navy);
  margin-block-start: var(--space-16);
}

/* === Eyebrow label — small uppercase tracked tag.
   Used above headings, in card metadata, on stats. === */
.label-s {
  font-family: var(--font-sans);
  font-size: var(--type-label-s);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-stone-60);
}

/* === CTA row — wrap + center, used on bottom CTAs across pages. === */
.cta-options {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-16) var(--space-32);
  align-items: center;
}
.cta-lede {
  font-size: var(--type-body-l);
  line-height: var(--lh-body-relaxed);
  margin-block-end: var(--space-32);
  max-inline-size: 48ch;
  margin-inline: auto;
}

/* === Product hero — 50/50 two-column at desktop, stacked at narrow.
   Generic; any page can apply by setting class="product-hero" on its hero section.
   Includes optional .crumb (breadcrumb), .micro-proof (cert strip), and
   .descriptor / .card-caption / .hero-text / .hero-visual children. */
.product-hero {
  padding-block: var(--space-section-generous) var(--space-section-standard);
}
.product-hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-64);
  align-items: center;
}
@media (min-width: 1024px) {
  .product-hero .container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-96);
  }
}
.product-hero .hero-text .label-s { display: block; margin-block-end: var(--space-16); }
.product-hero h1 { margin-block-end: var(--space-16); }
.product-hero .descriptor {
  font-size: var(--type-body-l);
  line-height: var(--lh-body);
  max-inline-size: 52ch;
  margin-block-start: var(--space-24);
  margin-block-end: var(--space-32);
}
.product-hero .cta-row {
  display: flex; flex-wrap: wrap;
  gap: var(--space-16) var(--space-24);
  align-items: center;
}
.product-hero .hero-visual { min-inline-size: 0; }
.product-hero .card-caption {
  margin-block-start: var(--space-16);
  font-size: var(--type-body-s);
  color: var(--color-stone-60);
  text-align: center;
  font-style: italic;
}
.product-hero .crumb {
  grid-column: 1 / -1;
  font-size: var(--type-body-s);
  color: var(--color-stone-40);
  margin-block-end: var(--space-24);
}
/* The crumb is a <p> with a link + adjacent text, i.e. a link in a text block,
   so it keeps an underline — colour alone fails WCAG / Lighthouse link-in-text-block. */
.product-hero .crumb a {
  color: var(--color-stone-60);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-instant) var(--ease-standard);
}
.product-hero .crumb a:hover { color: var(--color-royal); }
.product-hero .crumb span { color: var(--color-midnight); font-weight: 500; }
.product-hero .micro-proof {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  margin-block-start: var(--space-48);
  padding-block-start: var(--space-32);
  border-block-start: 1px solid var(--color-stone-20);
  font-size: var(--type-body-s);
  color: var(--color-stone-60);
}
.product-hero .micro-proof .cert {
  display: inline-flex; align-items: center; gap: var(--space-8);
  color: var(--color-navy);
  font-weight: 500;
}
.product-hero .micro-proof .cert svg { inline-size: 16px; block-size: 16px; }
.product-hero .micro-proof .sep {
  inline-size: 4px; block-size: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-stone-20);
}

/* === Doc hero — reading-width hero for document-style pages.
   Used by /security, /legal/privacy, /legal/terms, future doc pages. */
.doc-hero {
  padding-block: var(--space-section-generous) var(--space-section-tight);
}
.doc-hero h1 { margin-block-start: var(--space-16); }
.doc-hero .last-updated {
  margin-block-start: var(--space-24);
  font-family: var(--font-mono);
  font-size: var(--type-body-s);
  color: var(--color-stone-60);
}
.doc-hero .lede {
  margin-block-start: var(--space-32);
  font-size: var(--type-body-l);
  line-height: var(--lh-body-relaxed);
  color: var(--color-stone-90);
  max-inline-size: 56ch;
}

/* === Doc posture — card grid for "Our posture" / "Things we hold to". === */
.doc-posture { padding-block: var(--space-section-generous); }
.doc-posture .section-heading {
  text-align: center;
  margin-block-end: var(--space-64);
}
.doc-posture .section-heading h2 { margin-block-start: var(--space-16); }
.doc-posture .posture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-32);
  list-style: none;
  max-inline-size: var(--container-standard);
  margin-inline: auto;
}
.doc-posture .posture-card {
  background: var(--color-paper);
  padding: var(--space-32);
  border-radius: var(--radius-default);
  border: 1px solid var(--color-stone-20);
}
.doc-posture .posture-card h3 {
  font-size: var(--type-title-s);
  line-height: var(--lh-title-s);
  color: var(--color-navy);
  margin-block-end: var(--space-16);
}
.doc-posture .posture-card p {
  font-size: var(--type-body-s);
  line-height: var(--lh-body-relaxed);
}

/* === Doc body — reading-width body sections with sans-serif Navy h2s. === */
.doc-body {
  padding-block: var(--space-section-tight) var(--space-section-generous);
}
.doc-section { margin-block-start: var(--space-32); }
.doc-section:first-of-type { margin-block-start: 0; }
.doc-section h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--type-title-m);
  line-height: var(--lh-title-s);
  color: var(--color-navy);
  letter-spacing: var(--track-snug);
  margin-block-end: var(--space-24);
  scroll-margin-top: var(--space-96);
}
.doc-section h3, .doc-section h4 { scroll-margin-top: var(--space-128); }
.doc-section p {
  font-size: var(--type-body-m);
  line-height: var(--lh-body-loose);
  color: var(--color-stone-90);
}
.doc-section p + p { margin-block-start: var(--space-16); }
.doc-section strong { font-weight: 600; color: var(--color-midnight); }
.doc-section em { font-style: italic; }
.doc-section ul {
  margin-block: var(--space-16);
  padding-inline-start: var(--space-24);
  display: grid;
  gap: var(--space-12);
}
.doc-section ul li {
  font-size: var(--type-body-m);
  line-height: var(--lh-body-relaxed);
  color: var(--color-stone-90);
}
.doc-section ul li::marker { color: var(--color-stone-40); }
/* Inline links in doc bodies underline via the shared .copy rule near the top —
   the doc hero/posture/section wrappers carry .copy. No doc-specific link rule. */

/* === Data card — chrome for hero cards (imm-card, ec-card, int-card, mbs-card).
   Apply via class="data-card"; per-page card class adds content rules. */
.data-card {
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-soft);
  padding: var(--space-24) var(--space-24) var(--space-20);
  display: grid;
  gap: var(--space-8);
  box-shadow: var(--shadow-card);
}
.data-card .card-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-block-end: var(--space-12);
  border-block-end: 1px solid var(--color-stone-20);
  margin-block-end: var(--space-4);
  gap: var(--space-12);
}
.data-card .card-meta .meta-left {
  display: inline-flex; align-items: center; gap: var(--space-12);
  color: var(--color-navy);
  min-inline-size: 0;
}
.data-card .brand-mark { inline-size: 22px; block-size: 22px; flex-shrink: 0; }
.data-card .card-meta .label-s { color: var(--color-navy); font-size: var(--type-label-s); }
.data-card .card-meta time,
.data-card .card-meta .count {
  font-family: var(--font-mono);
  font-size: var(--type-label-s);
  color: var(--color-stone-60);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 639.98px) {
  .data-card .card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .data-card .card-meta time,
  .data-card .card-meta .count { letter-spacing: 0; }
}

/* === Trust strip / proof bar — two variants share .proof-bar. ===
   Default (.proof-bar)             — centered pills, success-green icon. Homepage + pricing.
   Modifier (.proof-bar.tight)      — left-aligned vertical 3-col, navy icon. Product pages. */

/* Default: centered pill variant */
.proof-bar { padding-block: var(--space-section-tight); }
.proof-bar .container { display: grid; gap: var(--space-32); }
.proof-bar .badges {
  display: flex; flex-wrap: wrap;
  gap: var(--space-16);
  justify-content: center;
}
.proof-bar .compliance-badge {
  display: inline-flex; align-items: center; gap: var(--space-12);
  padding-block: var(--space-16); padding-inline: var(--space-24);
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
}
.proof-bar .compliance-badge svg {
  inline-size: 24px; block-size: 24px;
  color: var(--color-navy);
  flex-shrink: 0;
}
.proof-bar .compliance-badge .name {
  font-weight: 500;
  font-size: var(--type-body-s);
  color: var(--color-midnight);
}
.proof-bar .compliance-badge .sub {
  font-size: var(--type-label-m);
  color: var(--color-stone-60);
  margin-block-start: 2px;
}

/* Modifier: tight / trust-strip variant */
.proof-bar.tight .container { display: block; }
.proof-bar.tight .badges {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}
@media (min-width: 640px) {
  .proof-bar.tight .badges { grid-template-columns: repeat(3, 1fr); }
}
.proof-bar.tight .compliance-badge {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
.proof-bar.tight .compliance-badge svg {
  inline-size: 28px; block-size: 28px;
  color: var(--color-navy);
  margin-block-start: 2px;
}
.proof-bar.tight .compliance-badge .name {
  font-size: 0.9375rem;       /* 15px */
  font-weight: 600;
  line-height: var(--lh-title-s);
}
.proof-bar.tight .compliance-badge .sub {
  margin-block-start: 4px;
  font-size: var(--type-body-s);
  line-height: var(--lh-tagline);
}

/* === Audience grid — 3+3 responsive grid with border-left hover. === */
.aud-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}
@media (min-width: 640px) {
  .aud-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .aud-grid { grid-template-columns: repeat(3, 1fr); }
}
.aud-card {
  padding: var(--space-24) 0 var(--space-24) var(--space-24);
  border-inline-start: 2px solid var(--color-mist);
  transition: border-color var(--duration-instant) var(--ease-standard);
}
.aud-card:hover { border-inline-start-color: var(--color-royal); }
.aud-card h3 {
  font-size: var(--type-body-l);
  line-height: var(--lh-title-s);
  margin-block-end: var(--space-8);
}
.aud-card p { font-size: var(--type-body-s); }

/* === Capability grid — Paper-bg card grid for capability lists. === */
.cap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}
@media (min-width: 640px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-32); }
}
.cap-card {
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  padding: var(--space-32);
  display: grid;
  gap: var(--space-16);
  align-content: start;
}
.cap-icon {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 40px; block-size: 40px;
  color: var(--color-royal);
  margin-block-end: var(--space-4);
}
.cap-icon svg { inline-size: 28px; block-size: 28px; }

/* === Bullet list — royal dot. === */
.bullet-list {
  list-style: none;
  display: grid;
  gap: var(--space-12);
  padding: 0; margin: 0;
}
.bullet-list li {
  position: relative;
  padding-inline-start: var(--space-20);
  font-size: 0.90625rem;       /* 14.5px */
  line-height: var(--lh-body);
}
.bullet-list li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.6em;
  inset-inline-start: 0;
  inline-size: 6px; block-size: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-royal);
}
.bullet-list li code {
  font-family: var(--font-mono);
  font-size: var(--type-label-m);
  background: var(--color-mist);
  color: var(--color-navy);
  padding-block: 1px; padding-inline: 5px;
  border-radius: var(--radius-xs);
}

/* === FAQ list — native <details>/<summary>, zero JS, royal +/− toggle. === */
.faq-list {
  max-inline-size: 720px;
  margin-inline: auto;
  display: grid;
  gap: 0;
}
.faq-list details {
  border-block-end: 1px solid var(--color-stone-20);
  padding-block: var(--space-24);
}
.faq-list details:first-of-type { border-block-start: 1px solid var(--color-stone-20); }
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: block;
  font-size: 1.0625rem;        /* 17px */
  font-weight: 600;
  color: var(--color-midnight);
  line-height: var(--lh-title-m);
  padding-inline-end: var(--space-32);
  position: relative;
  transition: color var(--duration-instant) var(--ease-standard);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 0; inset-block-start: -2px;
  font-family: var(--font-sans);
  font-size: var(--type-title-m);
  font-weight: 300;
  color: var(--color-royal);
  line-height: 1;
  transition: transform var(--duration-short) var(--ease-standard);
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list summary:hover { color: var(--color-royal); }
.faq-list summary em {
  font-style: italic;
  color: var(--color-stone-60);
  font-weight: 500;
}
.faq-list .answer {
  margin-block-start: var(--space-16);
  font-size: 0.9375rem;        /* 15px */
  line-height: var(--lh-body-relaxed);
  max-inline-size: 64ch;
}
/* FAQ answer links underline via the shared .copy rule — .faq-list .answer carries .copy. */
.faq-list .answer code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;        /* 13px */
  background: var(--color-mist);
  color: var(--color-navy);
  padding-block: 1px; padding-inline: 5px;
  border-radius: var(--radius-xs);
}


/* ============================================================ */
/* 8 · TYPE-SCALE UTILITIES (apply by class)                      */
/* ============================================================
   Pages apply these classes on the element; pages do not set
   font-family or font-size for type tokens in page CSS.

   Serif boundary: DM Serif Display on .display-xl (page hero) and
   .display-l (section opener). Everything else is Inter. Canonical
   DM Serif exceptions (.hero-number, footer .wordmark, specimen card
   numbers) are documented separately and scoped to their components.

   Element pairing: .title-l/.title-m/.title-s are paired with bare
   h1/h2/h3 element defaults under §3, so semantic HTML renders sensibly
   even without explicit class application.
   ============================================================ */

/* Display tier — DM Serif Display, editorial moments. */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--type-display-xl);
  line-height: var(--lh-display-xl);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  color: var(--color-midnight);
  text-wrap: balance;
}
.display-l {
  font-family: var(--font-display);
  font-size: var(--type-display-l);
  line-height: var(--lh-display-l);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  color: var(--color-midnight);
  text-wrap: balance;
}

/* Body tier — Inter, prose. */
.body-l { font-family: var(--font-sans); font-size: var(--type-body-l); line-height: var(--lh-body); }
.body-m { font-family: var(--font-sans); font-size: var(--type-body-m); line-height: var(--lh-body); }
.body-s { font-family: var(--font-sans); font-size: var(--type-body-s); line-height: var(--lh-body); }

/* Label tier — Inter, micro / metadata.
   .label-s (the eyebrow) is defined under §7 Shared Components since it
   carries shared uppercase + tracked styling reused by .product-hero and
   .data-card; .label-m lives here as a routine type utility. */
.label-m {
  font-family: var(--font-sans);
  font-size: var(--type-label-m);
  line-height: var(--lh-label);
  font-weight: 500;
  color: var(--color-stone-60);
}

/* Mono — JetBrains Mono. Utility; size inherits from context. */
.mono { font-family: var(--font-mono); }


/* ============================================================ */
/* 9 · MEDIA-FEATURE RESPONSES                                    */
/* ============================================================ */

/* === Reduced motion — global guarantee. Important transitions still
   communicate state, but through opacity, not position. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === High contrast — bump link underlines, darken body color. */
@media (prefers-contrast: more) {
  body { color: #000; }
  a { text-decoration: underline; text-decoration-color: currentColor; }
  :focus-visible { outline-width: 3px; outline-color: var(--color-midnight); }
}

/* === Print — strip chrome, expand links inline, no shadows. === */
@media print {
  html { color-scheme: light; }
  body { background: #fff; color: #000; }
  .cta-options, .button-primary, .button-secondary { display: none; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; }
  .doc-hero, .doc-posture, .doc-body, .product-hero { padding-block: 1em; }
  .data-card, .cap-card, .doc-posture .posture-card { box-shadow: none; border: 1px solid #aaa; }
  details[open] summary::after, details summary::after { display: none; }
  details summary { font-weight: 600; }
}