/* ===========================================================================
   LEGAL PAGES — Privacy Policy · Spotlight Privacy Policy · Terms & Conditions ·
   SMS Terms  (9/17)
   ---------------------------------------------------------------------------
   Built by scripts/build-legal.py from the live site's copy. Scoped to
   .page-legal and legal-* classes. Tokens only; verify.js reads this sheet,
   comments included.

   1 hero light blue · 2 document white, pulled up with a single top-left
   corner (the 1->2 join is single, per page-sections.css).
   Contrast: ink on --sky-soft 12.3 · ink on white 13.3 · ink-muted on white
   above 5.
   =========================================================================== */

/* ---------------------------------------------------------------- 1. hero */
/* 🔁 9/17 RESPONSIVE PASS — THE HERO'S TOP MATCHES THE REST OF THE SITE.
   Every page built before these used `--section-pad * 0.5 + 43px` on the hero's top (direction-d-v3.css `.hero`,
   and `.pr-hero` / `.ss-hero` / `.lp-hero` were moved onto it by the 9/16 pass for exactly this reason: the
   header is STICKY, the 43px is its clearance, and without it the gap under the header changes from page to page).
   These pages were built with their own multiples and were the tight ones — at 390 the measured air was 45px
   against the site's 71. Bottom padding is untouched. */
.legal-hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: clip;
  padding-block: calc(var(--section-pad) * 0.5 + 43px) calc(var(--section-pad) * 0.8 + var(--corner-1));
  background-color: var(--sky-soft);
}
.legal-hero__inner { position: relative; z-index: 1; }
.legal-hero__pattern { z-index: 0; width: clamp(260px, 30vw, 520px); aspect-ratio: 1; top: -30%; right: -8%; }
/* ONE LINE, always (Brees 9/17: "make sure the titles of those pages are on a single line"). The shared hero size,
   capped by the room the longest title needs: "Digital Empathy privacy policy" measures 14.1x its font size in All
   Round Gothic, so /15 leaves ~6% air inside the container at every width (320 -> 21px, 390 -> 23px, then the
   shared clamp takes over from ~560px). A longer title needs a new divisor - re-measure, don't guess. */
.legal-hero__h1 {
  max-width: none;
  margin: 0;
  white-space: nowrap;
  font-size: min(clamp(2rem, 3.2vw, 3.25rem), calc((100vw - 2 * var(--container-pad)) / 15));
}
@media (max-width: 599px) {
  .legal-hero__pattern { width: 200px; top: -90px; right: -110px; }
}

/* ------------------------------------------------------------ 2. document */
.legal {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--corner-1));
  padding-block: calc(var(--section-pad) * 0.8) var(--section-pad);
  border-top-left-radius: var(--corner-1);
  background-color: var(--white);
}
.legal__grid { display: grid; gap: var(--s-6); }
@media (min-width: 1100px) {
  .legal--toc .legal__grid { grid-template-columns: 17rem minmax(0, 46rem); column-gap: clamp(48px, 6vw, 112px); align-items: start; }
  .legal__toc { position: sticky; top: calc(var(--hdr-h-min, 114px) + 24px); max-height: calc(100vh - var(--hdr-h-min, 114px) - 48px); overflow-y: auto; }
}
.legal__doc { max-width: 46rem; color: var(--ink); font-size: 1.0625rem; line-height: 1.7; }

.legal__doc h2 {
  margin: var(--s-5) 0 var(--s-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  scroll-margin-top: calc(var(--hdr-h-min, 114px) + 24px);
}
.legal__doc h3 { margin: var(--s-4) 0 var(--s-1); color: var(--ink); font-family: var(--font-body); font-size: 1.1875rem; font-weight: 600; line-height: 1.35; }
.legal__doc h4 { margin: var(--s-3) 0 var(--s-1); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; }
.legal__doc > :first-child { margin-top: 0; }
.legal__doc p { margin: 0 0 var(--s-2); }
.legal__doc ul, .legal__doc ol { margin: 0 0 var(--s-3); padding-left: 1.25em; }
.legal__doc ul { list-style: disc; }
.legal__doc ol { list-style: decimal; }
.legal__doc li { margin-bottom: var(--s-1); }
.legal__doc li::marker { color: var(--ink); }
.legal__doc a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; overflow-wrap: anywhere; }
.legal__doc a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 3px; }

.legal__toc-h { margin: 0 0 var(--s-2); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.legal__toc ol { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--sky); }
.legal__toc li { margin: 0; }
.legal__toc a { display: block; padding: 6px 0 6px var(--s-2); color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.4; text-decoration: none; }
.legal__toc a:hover { color: var(--ink); text-decoration: underline; }
.legal__toc a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 3px; color: var(--ink); }
@media (max-width: 1099px) {
  .legal__toc { padding: var(--s-3); border-radius: var(--corner-1); background-color: var(--sky-soft); }
  .legal__toc a { color: var(--ink); }
  .legal__toc ol { border-left-color: var(--ink); }
  /* 🔁 9/17 responsive pass — 44px ROWS. Below 1100 the contents list stops being a sticky desktop rail and
     becomes a box of thumb targets stacked 2px apart; the rows measured 230x33 at every width the sweep calls a
     touch width. Same call as the 9/16 pass made on the footer's link rows. The desktop rail above 1100 keeps
     its 33px rows on purpose — mouse target, and it clears WCAG 2.5.8's 24px floor. */
  .legal__toc a { display: flex; align-items: center; min-height: 44px; padding: 4px 0 4px var(--s-2); }
}