/* ============ legal pages (privacy policy / terms of use) ============ */
/* Reuses design-system tokens/fonts/#topbar/.wordmark/.top-cta from main.css — this file only holds
   what's unique to these two pages: the shared charcoal+grid backdrop (same look as the intro section,
   per explicit request) and the long-form article typography neither page had a pattern for yet. */

.legal-body { min-height: 100vh; display: flex; flex-direction: column; background: #161618; }

/* Reuses .intro-grid-canvas's own class — site/js/intro-grid.js wires up window.__introGrid via a
   fixed `document.querySelector('.intro-grid-canvas')` selector, so adding this second class (rather
   than touching that selector or the file) is what lets these pages plug into the exact same grid
   instance/effect with zero JS changes. .legal-grid-canvas overrides its position/sizing here: intro's
   own version is absolute/inset:0 within .intro-box's own 148vh scroll-panel, but there's no equivalent
   container on a plain static page — a fixed full-viewport layer behind the scrollable content is the
   direct equivalent. Loaded after main.css in both HTML files, so this wins the position/inset/width/
   height tie against .intro-grid-canvas's own rule at equal selector specificity. */
.legal-grid-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; }

.legal-main {
  position: relative; z-index: 1;   /* explicit stacking above the fixed z-index:0 canvas — see above */
  flex: 1;
  display: flex; justify-content: center;
  padding: clamp(120px, 16vh, 170px) clamp(24px, 6vw, 56px) clamp(60px, 8vh, 96px);
}

.legal-card {
  width: 100%; max-width: 760px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--structure);
  border-radius: 20px;
  padding: clamp(32px, 5vw, 64px);
}

.legal-kicker {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.legal-title {
  font-family: var(--display);
  font-weight: 500; /* real loaded weight (Cabinet Grotesk's only weight is 500) — avoids synthetic
     bold on this <h1>, same fix applied throughout main.css's own --display usages */
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
  color: #fff;
  text-transform: uppercase;
}

.legal-updated { margin-top: 14px; font-size: 13px; color: var(--fog); opacity: .7; }

.legal-copy { margin-top: 40px; max-width: 68ch; }
.legal-copy h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.3;
  color: #fff;
  text-transform: none;   /* these are full sentences/phrases, not short punchy labels — unlike the
                              rest of the site's uppercase --display headings, uppercase here would
                              hurt readability more than it adds impact */
  margin-top: 40px;
}
.legal-copy h2:first-child { margin-top: 0; }
.legal-copy p { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--fog); }
.legal-copy ul { margin-top: 14px; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.legal-copy li { font-size: 15px; line-height: 1.6; color: var(--fog); }
.legal-copy li::marker { color: var(--gold); }
.legal-copy a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 600px) {
  .legal-card { padding: clamp(24px, 8vw, 40px) 20px; }
}