/* ═══ LEGAL DOCUMENT TYPE SCALE ═══ (2026-08-17)
 *
 * One type scale for the six legal-document pages: privacy-policy,
 * terms-of-service, privacy-employee, privacy-applicant, privacy-biometric,
 * accessibility. Loaded per-template via @push('styles') AFTER each
 * *-page.css, so it settles the cascade instead of competing with it.
 *
 * WHY THIS EXISTS
 * The six pages were ported from standalone HTML prototypes at different
 * times. Each shipped its own *-page.css written with bare element selectors
 * (h2 {...}, p {...}), which lose to the higher-specificity global system CSS
 * in unpredictable ways. The result was five different type systems across
 * six pages. Measured before this file (desktop @1280px):
 *
 *   privacy-policy     p 15px  li 17px  h2 23.2 w700  h3 INTER 15 w700
 *   terms-of-service   p 15px  li 17px  h2 23.2 w700  h3 INTER 15 w700
 *   privacy-employee   p 17px  li 17px  h2 33.3 w600  h3 -
 *   privacy-applicant  p 17px  li 17px  h2 33.3 w600  h3 -
 *   privacy-biometric  p 17px  li -     h2 33.3 w600  h3 -
 *   accessibility      p 17px  li -     h2 24   w600  h3 20.5 w600
 *
 * Two of those were outright bugs, not just drift:
 *   1. h3 rendered in Inter on privacy-policy/terms (.policy-section h3 set
 *      font-family:var(--font-b)). Every other h3 on the site is Poppins.
 *   2. Paragraphs sat at 15px while bullets sat at 17px on the SAME page:
 *      .policy-section ul/ol sized the CONTAINER, but svc-components.css's
 *      global `body main p, body main li` rule targets the ITEM and outranks
 *      inheritance. Paragraphs were defended by `.policy-section p` (class
 *      beats type); list items had no class-level rule and lost.
 *
 * SCOPE
 * `#main-content section` is the document body on all six pages — the notice
 * family uses bare <section>, accessibility uses <section class="section">,
 * and policy/terms use <section class="policy-section">. The table of
 * contents (.toc-card / .toc-accordion) sits OUTSIDE any <section> on
 * policy/terms, so it is untouched. .policy-hero IS a <section>, so it is
 * excluded explicitly.
 *
 * Deliberately NOT covered: /security/, which is a marketing page (hero +
 * cards) already sitting on the sitewide scale, and <table> text, which stays
 * at its denser 14px.
 */

/* Sizes are px, not rem, ON PURPOSE. The root font-size is not stable across
 * these pages — several of the ported *-page.css files set `html{font-size:16px}`.
 * px removes the dependency so the scale is identical on every legal page.
 *
 * KNOWN LIMIT — h2 below 480px: site.css carries a sitewide
 *   @media (max-width:480px) { h2 { font-size: clamp(20px,5.5vw,28px) !important } }
 * which outranks everything here regardless of specificity. Deliberately NOT
 * fought: it is the site's intentional mobile heading treatment, it applies
 * equally to all six pages (so they stay consistent with each other, which is
 * the point of this file), and matching it with a counter-!important would
 * start a cascade war and split legal pages off from the site's mobile scale.
 * Net effect: --legal-h2-size governs 481px and up; below that the sitewide
 * mobile floor takes over uniformly. Verified by _qa/legal-type-audit.mjs and
 * _qa/legal-type-regression.mjs. */
:root {
  --legal-body-size: 17px;
  --legal-body-lh: 1.7;
  --legal-h2-size: clamp(22px, 2.6vw, 28px); /* 22px mobile → 28px desktop */
  --legal-h3-size: 18px;
  --legal-h4-size: 16px;
}

/* ── Body copy ──────────────────────────────────────────────────────────
   `li` is listed explicitly: sizing only the ul/ol lets the global
   `body main li` rule win on the item and reopen the 15/17 split. */
#main-content section:not(.policy-hero) p,
#main-content section:not(.policy-hero) li {
  font-family: var(--font-b, "Inter", system-ui, sans-serif);
  font-size: var(--legal-body-size);
  line-height: var(--legal-body-lh);
}

/* Keep the container in sync so any unstyled inline descendants inherit the
   same size rather than falling back to the page CSS value. */
#main-content section:not(.policy-hero) ul,
#main-content section:not(.policy-hero) ol {
  font-size: var(--legal-body-size);
  line-height: var(--legal-body-lh);
}

/* ── Headings ───────────────────────────────────────────────────────────
   All Poppins. Weight 700 across h2/h3/h4 — the pre-existing mix of w600
   and w800 was drift, not intent. */
#main-content section:not(.policy-hero) h2 {
  font-family: var(--font-h, "Poppins", system-ui, sans-serif);
  font-size: var(--legal-h2-size);
  font-weight: 700;
  line-height: 1.25;
}

#main-content section:not(.policy-hero) h3 {
  font-family: var(--font-h, "Poppins", system-ui, sans-serif);
  font-size: var(--legal-h3-size);
  font-weight: 700;
  line-height: 1.35;
}

#main-content section:not(.policy-hero) h4 {
  font-family: var(--font-h, "Poppins", system-ui, sans-serif);
  font-size: var(--legal-h4-size);
  font-weight: 700;
  line-height: 1.4;
}