/* ==========================================================================
   Legal pages (privacy policy, terms of use)

   These two pages used to be React Router routes inside a separate Vite app
   whose only remaining job was to render them. That app is gone; this is the
   styling that replaced it. Shared by privacy.html and terms.html so the two
   never drift apart.

   The ground is the same monochrome galaxy the login page and the homepage
   footer use, so arriving here from the footer does not feel like leaving
   the site.
   ========================================================================== */

:root {
  --lg-ink: #f2f4f8;
  --lg-dim: rgba(226, 231, 240, 0.72);
  --lg-faint: rgba(226, 231, 240, 0.46);
  --lg-line: rgba(255, 255, 255, 0.12);
  --lg-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --lg-display: "Clash Display", "Sora", system-ui, sans-serif;
  --lg-body: "Sora", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--lg-body);
  color: var(--lg-ink);
  background: #05060a;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- galaxy backdrop ----------
   Star positions are generated at load (see initStars in the page) rather
   than hand-authored: several hundred box-shadow coordinates is not
   something worth maintaining by hand. */
.stars-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(38vw 38vw at 22% 28%, rgba(232, 236, 243, 0.15), transparent 62%),
    radial-gradient(46vw 40vw at 78% 72%, rgba(198, 205, 216, 0.12), transparent 65%),
    radial-gradient(80vw 46vw at 50% 50%, rgba(120, 126, 138, 0.1), transparent 70%),
    linear-gradient(146deg, #05060a 0%, #101217 42%, #0a0b0f 70%, #030406 100%);
}
.stars-bg::after {
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(122deg, transparent 38%, rgba(226, 231, 240, 0.09) 47%, rgba(226, 231, 240, 0.14) 50%, rgba(226, 231, 240, 0.08) 53%, transparent 63%);
  filter: blur(46px);
  pointer-events: none;
}
.stars-bg .layer, .stars-bg .layer::after {
  content: ""; position: absolute; top: 0; left: 0;
  background: transparent;
  box-shadow: var(--stars, none);
}
.stars-bg .layer::after { top: 2000px; }
.stars-bg .layer.sm { width: 1px; height: 1px; animation: star-drift 60s linear infinite; opacity: 0.8; }
.stars-bg .layer.md { width: 2px; height: 2px; animation: star-drift 110s linear infinite; opacity: 0.7; }
.stars-bg .layer.lg { width: 3px; height: 3px; animation: star-drift 170s linear infinite; opacity: 0.6; }
@keyframes star-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-2000px); }
}

/* ---------- top bar ---------- */
.legal-nav {
  position: relative; z-index: 2;
  max-width: 900px; margin: 0 auto;
  padding: 30px 26px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
/* The canonical wordmark: lowercase "aegis" in the display face plus a
   trailing dot. Identical on every page of the site. */
.wordmark {
  font-family: var(--lg-display);
  font-weight: 700; letter-spacing: -0.015em; text-transform: lowercase;
  color: #fff; text-decoration: none; font-size: 1.5rem;
  display: inline-flex; align-items: center; gap: 0.16em; line-height: 1;
}
.wordmark::after {
  content: ""; width: 0.19em; height: 0.19em; border-radius: 50%;
  background: currentColor; transform: translateY(0.06em);
}
.legal-nav .back {
  font-family: var(--lg-mono);
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--lg-faint); text-decoration: none;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--lg-line);
  background: rgba(255, 255, 255, 0.04);
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.legal-nav .back:hover { color: #fff; border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.09); }

/* ---------- the sheet ---------- */
.legal-wrap { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; padding: 42px 26px 90px; }

.legal-eyebrow {
  font-family: var(--lg-mono);
  font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--lg-faint); margin-bottom: 18px;
}
.legal-eyebrow b { color: rgba(226, 231, 240, 0.8); font-weight: 400; }

h1 {
  font-family: var(--lg-display);
  font-size: clamp(2.3rem, 6vw, 3.6rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.02;
  margin: 0 0 14px; text-wrap: balance;
}
.updated { font-size: 0.82rem; color: var(--lg-faint); margin: 0 0 34px; }

.sheet {
  border: 1px solid var(--lg-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  padding: clamp(26px, 4.5vw, 46px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.sheet h2 {
  font-family: var(--lg-display);
  font-size: 1.16rem; font-weight: 600; letter-spacing: -0.01em;
  margin: 38px 0 12px; color: #fff;
}
.sheet h2:first-child { margin-top: 0; }
.sheet p, .sheet li { color: var(--lg-dim); line-height: 1.75; font-size: 0.95rem; }
.sheet p { margin: 0 0 12px; max-width: 68ch; }
.sheet ul, .sheet ol { margin: 0 0 12px; padding-left: 24px; max-width: 68ch; }
.sheet li { margin-bottom: 9px; }
.sheet ol { counter-reset: clause; list-style: none; padding-left: 0; }
.sheet ol > li {
  counter-increment: clause;
  position: relative; padding-left: 46px; margin-bottom: 20px;
}
.sheet ol > li::before {
  content: counter(clause, decimal-leading-zero);
  position: absolute; left: 0; top: 0.16em;
  font-family: var(--lg-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  color: var(--lg-faint);
}
.sheet b, .sheet strong { color: #fff; font-weight: 600; }
.sheet a { color: #fff; text-underline-offset: 3px; }

/* A placeholder nobody has filled in yet. Marked rather than hidden: an
   unfilled retention period on a biometric policy should be impossible to
   mistake for a real one. */
.ph {
  font-family: var(--lg-mono); font-size: 0.86em;
  color: #ffd9a0;
  border-bottom: 1px dashed rgba(255, 217, 160, 0.5);
  padding-bottom: 1px;
}

.note {
  margin-top: 26px; padding: 16px 18px;
  border: 1px dashed rgba(255, 217, 160, 0.34);
  border-radius: 14px;
  background: rgba(255, 217, 160, 0.05);
  font-size: 0.85rem; line-height: 1.65; color: rgba(255, 231, 197, 0.86);
}

/* ---------- footing ---------- */
.legal-foot {
  max-width: 900px; margin: 0 auto; padding: 0 26px 60px;
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--lg-mono); font-size: 0.58rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--lg-faint);
}
.legal-foot a { color: var(--lg-faint); text-decoration: none; transition: color 0.18s; }
.legal-foot a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .stars-bg .layer { animation: none; }
}