/* ============================================================
   LEGAL PAGE
   A reading page: a typographic header, then a sticky contents list
   beside a single measured column of text.
   ============================================================ */
.page-legal { background: radial-gradient(ellipse 70% 50% at 80% 0, rgba(87, 16, 35, .28), transparent 60%), #0b0e14; }

.doc-hero {
  padding: clamp(150px, 16vw, 210px) var(--gutter) clamp(50px, 6vw, 80px);
  border-bottom: 1px solid var(--edge-soft, rgba(233, 238, 245, .12));
}
.doc-hero h1 { margin: 22px 0 28px; font-size: clamp(76px, 11vw, 176px); line-height: .9; }
.doc-hero__lede { max-width: 46ch; margin: 0; color: #d3d9e0; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.45; }
.doc-hero__date { margin: 26px 0 0; font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #8f9aa8; }

.doc-body {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 720px);
  justify-content: space-between;
  gap: clamp(40px, 6vw, 120px);
  padding: clamp(60px, 7vw, 100px) var(--gutter) clamp(100px, 10vw, 150px);
}
.doc-toc { position: sticky; top: 100px; align-self: start; }
.doc-toc ol { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: toc; }
.doc-toc li { counter-increment: toc; }
.doc-toc a {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--edge-soft, rgba(233, 238, 245, .12));
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c7ced7;
  text-decoration: none;
}
.doc-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--red); }
.doc-toc a:hover, .doc-toc a:focus-visible { color: #fff; }

.doc-text section { position: relative; padding-bottom: clamp(50px, 5vw, 70px); scroll-margin-top: 90px; }
.doc-text section + section { padding-top: clamp(50px, 5vw, 70px); border-top: 1px solid var(--edge-soft, rgba(233, 238, 245, .12)); }
.doc-num { font: 500 10px/1 var(--mono); letter-spacing: .2em; color: var(--red); }
.doc-text h2 { margin: 12px 0 24px; font-size: clamp(42px, 5vw, 72px); line-height: .95; text-transform: uppercase; }
.doc-text h3 { margin: 32px 0 10px; font: 600 15px/1.3 var(--body); letter-spacing: .01em; color: #f1f4f8; }
.doc-text p { margin: 0 0 16px; color: #c3cad3; font-size: 17px; line-height: 1.65; }
.doc-text a { color: #fff; text-decoration: underline; text-decoration-color: rgba(214, 48, 76, .7); text-underline-offset: 4px; }
.doc-text a:hover { text-decoration-color: #fff; }
.doc-callout {
  padding: 20px 22px;
  border: 1px solid var(--edge-soft, rgba(233, 238, 245, .12));
  border-left: 2px solid var(--red);
  border-radius: var(--r-sm, 14px);
  background: rgba(255, 255, 255, .03);
  color: #eef1f5 !important;
}
.doc-facts { margin: 24px 0 0; border-top: 1px solid var(--edge-soft, rgba(233, 238, 245, .12)); }
.doc-facts div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--edge-soft, rgba(233, 238, 245, .12));
}
.doc-facts dt { font: 500 10px/1.8 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8f9aa8; }
.doc-facts dd { margin: 0; color: #eef1f5; font-size: 16px; }

@media (max-width: 860px) {
  .doc-body { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { position: static; }
  .doc-facts div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}