/* Legal pages (terms.html, privacy.html) - long-form prose with a sticky
   section index. Hero styling is reused from contact.css, as support.html does;
   this file only adds the prose layout. */

.legal-layout {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-5xl); align-items: start;
}

/* ── Section index ───────────────────────────────────────────── */
/* nav.top is `position: sticky; top: 0; z-index: 50`, so anything else that
   sticks has to clear it or it slides underneath the bar and the section index
   appears to sit inside the menu. Its height is its own vertical padding x2 +
   the 48px brand lockup + the 1px hairline border. The same offset keeps a
   clicked heading from landing behind the bar (see scroll-margin-top below);
   site-motion.js scrolls with scrollIntoView, which honours that property. */
:root { --legal-nav-h: 81px; }          /* .bar padding: var(--space-base) */
@media (max-width: 920px) {
  :root { --legal-nav-h: 73px; }        /* .bar padding drops to var(--space-md) */
}

.legal-toc { position: sticky; top: calc(var(--legal-nav-h) + var(--space-lg)); }
.legal-toc h2 {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-base); color: var(--color-ink);
}
.legal-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; padding: var(--space-xs) 0; }
.legal-toc a {
  display: block; font-size: var(--text-body-sm); line-height: 1.35;
  color: var(--color-ink); opacity: 0.72; text-decoration: none;
  border-left: 2px solid transparent; padding-left: var(--space-md);
  transition: opacity var(--motion-fast) var(--ease-pathway),
              border-color var(--motion-fast) var(--ease-pathway);
}
.legal-toc a::before { content: counter(toc) ". "; }
.legal-toc a:hover, .legal-toc a:focus-visible {
  opacity: 1; border-left-color: var(--color-coral);
}

/* ── Prose ───────────────────────────────────────────────────── */
.legal-body { max-width: 760px; font-size: var(--text-body); line-height: 1.65; }
.legal-body p { margin: 0 0 var(--space-lg); color: var(--color-on-bone); }
.legal-body strong { font-weight: var(--weight-semibold); }

.legal-body h2 {
  font-size: var(--text-h3); line-height: 1.25;
  font-weight: var(--weight-semibold); letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: var(--space-5xl) 0 var(--space-base);
  padding-top: var(--space-lg); border-top: 1px solid var(--color-line);
  scroll-margin-top: calc(var(--legal-nav-h) + var(--space-base));
}
.legal-body > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal-body h3 {
  font-size: var(--text-body-lg); line-height: 1.3;
  font-weight: var(--weight-semibold); color: var(--color-ink);
  margin: var(--space-2xl) 0 var(--space-md);
  scroll-margin-top: calc(var(--legal-nav-h) + var(--space-base));
}

.legal-updated {
  font-size: var(--text-body-sm); letter-spacing: 0.02em;
  color: var(--color-ink); opacity: 0.7;
  margin: 0 0 var(--space-2xl) !important;
}

.legal-body ul, .legal-body ol { margin: 0 0 var(--space-lg); padding-left: var(--space-xl); }
.legal-body li { margin-bottom: var(--space-md); }
/* Word numbers these a) b) c); the text cross-references those letters. */
.legal-alpha-list { list-style: lower-alpha; }
.legal-alpha-list li::marker { color: var(--color-ink); opacity: 0.6; }
/* Subsection letters carried over from the source document.
   coral-deep, not coral: the letters are small text and must clear WCAG AA
   (plain coral on bone is 2.98:1). */
.legal-alpha { color: var(--color-coral-deep); font-weight: var(--weight-semibold); }

.legal-body a { color: var(--color-bluex-deep); text-underline-offset: 2px; }
.legal-body a:hover { color: var(--color-coral-deep); }

.legal-address { font-style: normal; }

/* All-caps statutory blocks (disclaimers, limitation of liability) read as
   shouting at body size - hold them slightly smaller and looser. */
.legal-body p.legal-caps {
  font-size: var(--text-body-sm); line-height: 1.7; letter-spacing: 0.01em;
}

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .legal-toc { position: static; }
  .legal-toc ol {
    columns: 2; column-gap: var(--space-xl);
    padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-line);
  }
}
@media (max-width: 560px) {
  .legal-toc ol { columns: 1; }
}