/* ==========================================================================
   LEGAL-PAGE.CSS — shared across privacy.php, terms.php, cookies.php,
   accessibility.php. Loaded via $extraStyles, not as a per-page stylesheet,
   since all four share one literal layout (same reasoning as service-page.css).

   Dark-mode note: this template's wrapper never sets background:transparent,
   but that turned out NOT to mean it sits on the opaque --paper background —
   a fixed, position:fixed/z-index:-1 element (the hero video layer in
   header.php) paints ABOVE a static body's own background in the browser's
   stacking order, not below it, so the dark video is the actual visible
   backdrop here exactly like every other page. An earlier pass on this file
   got that backwards and set dark ink-on-ink text; confirmed against a real
   screenshot and reverted. Every text color below is now a proper
   light-on-dark value, matching how the rest of the site's dark mode works.
   ========================================================================== */

.legal-hero{ padding:150px 0 40px; max-width:720px; }
.legal-hero h1{ font-size:clamp(2rem, 1.7rem + 1.4vw, 2.8rem); margin-bottom:14px; }
.legal-hero .lead{ color:var(--ink-soft); line-height:1.65; }
.legal-hero .legal-updated{ display:block; font-family:var(--font-label); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--graphite); margin-bottom:20px; }

.legal-body{ max-width:760px; }
.legal-section{ padding:30px 0; border-top:1px solid var(--paper-line); }
.legal-section:first-child{ padding-top:0; border-top:none; }
.legal-section h2{ color:var(--ink); font-size:1.32rem; font-weight:700; letter-spacing:-0.01em; margin-bottom:14px; }
.legal-section p{ color:var(--ink-soft); font-size:0.98rem; line-height:1.75; }

.legal-body .legal-disclaimer{ margin-top:40px; padding-top:26px; border-top:1px solid var(--paper-line); font-size:0.82rem; color:var(--graphite); font-style:italic; line-height:1.6; }

/* Dark-mode text — this is the real fix. Body copy at 0.78 alpha (matches
   the readable-but-secondary weight used for paragraph text elsewhere on
   the site, e.g. founder-hero description), headings near-full white with a
   soft two-layer glow so they read clearly against the moving video/particle
   backdrop instead of flattening into it. */
.site--dark .legal-hero .lead{ color:rgba(255,255,255,0.8); }
.site--dark .legal-hero .legal-updated{ color:rgba(255,255,255,0.5); }
.site--dark .legal-section{ border-top-color:rgba(255,255,255,0.12); }
.site--dark .legal-section h2{
  color:#F7F6F1;
  text-shadow:0 2px 16px rgba(163,255,71,0.18), 0 2px 10px rgba(11,11,8,0.7);
}
.site--dark .legal-section p{ color:rgba(255,255,255,0.78); }
.site--dark .legal-body .legal-disclaimer{ border-top-color:rgba(255,255,255,0.12); color:rgba(255,255,255,0.45); }
.site--dark .legal-hero h1{ text-shadow:0 2px 16px rgba(163,255,71,0.18), 0 2px 10px rgba(11,11,8,0.7); }

@media (min-width:940px){
  .legal-hero{ padding:190px 0 50px; }
}

/* Desktop: center the hero title block — was left-aligned at every width,
   which read as unfinished/off-balance on a wide viewport. Mobile/tablet
   (<980px) are completely untouched. */
@media (min-width:980px){
  .legal-hero{ max-width:820px; margin-inline:auto; text-align:center; }
  .legal-hero .legal-updated{ display:flex; justify-content:center; }
  .legal-hero .lead{ margin-inline:auto; }
}