/* ============================================================
   legal.css — Privacy Policy & Terms of Use
   Loaded AFTER site.css, only by privacy.html and terms.html.
   Nothing here is referenced by index.html.

   These pages are documents, not marketing. They inherit the
   palette, fonts, nav and footer from site.css, then override
   for long-form reading: a narrow measure, generous leading,
   and a solid nav (there is no hero behind it here).
   ============================================================ */

/* ---------- 1. PAGE GROUND ---------- */
/* index.html paints a radial gradient via body::before sized to the
   hero. A flat ground reads calmer behind a wall of text. */
.legal-page::before{
  background:linear-gradient(180deg, #0d1436 0%, var(--ink) 22%, var(--ink-deep) 100%);
}

/* ---------- 2. SKIP LINK ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  padding:12px 18px; border-radius:0 0 var(--r-sm) 0;
  background:var(--card-hi); color:var(--cream);
  font-size:14px; border:1px solid var(--gold-dim);
}
.skip:focus{ left:0; }

/* ---------- 3. NAV ---------- */
/* site.js toggles .is-solid past 40px of scroll on the homepage; these pages
   hardcode it in the markup because there is no hero to fade over. The
   background, blur and border all come from site.css so the bar looks
   identical on every page — the only change needed here is the position:
   .nav is fixed on the homepage (the hero sits under it), but a document
   should flow beneath the bar rather than start behind it. */
.nav.is-solid{
  position:sticky;
  top:0;
}

/* ---------- 4. DOCUMENT SHELL ---------- */
.doc{
  padding:clamp(44px, 7vw, 92px) var(--pad) clamp(70px, 9vw, 120px);
}
.doc-wrap{
  max-width:720px;
  margin:0 auto;
}

/* ---------- 5. BACK LINKS ---------- */
.doc-back{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; letter-spacing:.02em; color:var(--muted);
  transition:color .3s ease;
}
.doc-back:hover{ color:var(--gold-light); }
.doc-back svg{ width:12px; height:12px; flex:none; }

.doc-foot-nav{
  display:flex; flex-wrap:wrap; gap:18px 28px;
  justify-content:space-between; align-items:center;
  margin-top:56px; padding-top:26px;
  border-top:1px solid var(--line);
}

/* ---------- 6. DOCUMENT HEAD ---------- */
.doc-head{ margin:26px 0 44px; }
.doc-head .eyebrow{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:14px;
}
.doc-head h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(34px, 6vw, 52px); line-height:1.12;
  letter-spacing:-.01em; color:var(--cream);
  text-wrap:balance;
}
.doc-dates{
  margin-top:16px; padding-top:16px;
  border-top:1px solid var(--line);
  font-size:13px; color:var(--muted);
}

/* ---------- 7. LONG-FORM TYPE ---------- */
.doc h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(21px, 3vw, 26px); line-height:1.3;
  color:var(--gold-light);
  margin:46px 0 16px;
  text-wrap:balance;
}
.doc h2:first-of-type{ margin-top:0; }

.doc p{
  font-size:16px; line-height:1.7; color:var(--cream);
  margin-bottom:18px;
  max-width:66ch;
}
.doc p strong{ color:#fff; font-weight:600; }

.doc ul{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  max-width:66ch;
}
.doc ul li{
  position:relative;
  padding-left:22px;
  margin-bottom:9px;
  font-size:16px; line-height:1.7; color:var(--cream);
}
.doc ul li::before{
  content:""; position:absolute;
  left:2px; top:.72em;
  width:5px; height:5px; border-radius:50%;
  background:var(--gold); opacity:.75;
}

.doc a{
  color:var(--gold-light);
  text-decoration:underline;
  text-decoration-color:var(--gold-dim);
  text-underline-offset:3px;
  transition:text-decoration-color .3s ease, color .3s ease;
}
.doc a:hover{ text-decoration-color:var(--gold-light); }
.doc-back, .doc-foot-nav a{ text-decoration:none; }

.doc-contact{
  padding:22px 24px;
  border:1px solid var(--line);
  border-left:2px solid var(--gold);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);
  line-height:1.9;
}

/* ---------- 8. SHARE TABLE ---------- */
/* Reuses .tablewrap + .addon-table, but these cells hold prose,
   so the nowrap from the add-ons table has to come off or the
   second column becomes a horizontal scroll on a phone. */
.doc-table{ margin:0; }
.doc-table th,
.doc-table td{
  white-space:normal;
  vertical-align:top;
  line-height:1.6;
}
.doc-table td:first-child{
  color:var(--gold-light);
  font-weight:600;
  white-space:nowrap;
}
.doc-table th:last-child{ text-align:left; }
.tablewrap:has(.doc-table){ margin:0 0 24px; }

/* ---------- 9. FOOTER LEGAL LINKS ---------- */
.foot-bot a{
  color:var(--muted);
  transition:color .3s ease;
}
.foot-bot a:hover{ color:var(--gold-light); }

/* ---------- 10. RESPONSIVE ---------- */
@media (max-width:640px){
  .doc{ padding-top:34px; }
  .doc-head{ margin:20px 0 34px; }
  .doc h2{ margin:38px 0 14px; }
  .doc p, .doc ul li{ font-size:15.5px; }
  .doc-table th, .doc-table td{ padding:13px 15px; font-size:14px; }
  .doc-table td:first-child{ white-space:normal; }
  .doc-foot-nav{ gap:14px; }
}

/* ---------- 11. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .doc-back, .doc a, .foot-bot a{ transition:none; }
}