/* Document layout for legal pages (terms.html, privacy.html). */

.legal-hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 50%, var(--dark-3) 100%);
  padding: 64px 48px 48px;
  text-align: center;
}
.legal-hero h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}
.legal-hero .legal-updated {
  color: var(--text-dim);
  font-size: 13px;
}

.legal-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}
.legal-body section { margin-bottom: 40px; scroll-margin-top: 84px; }
.legal-body h2 {
  font-size: 20px;
  font-weight: 700;
  color: #0a0f1e;
  letter-spacing: -0.2px;
  margin-bottom: 12px;
}
.legal-body p, .legal-body li {
  font-size: 15px;
  color: #333;
  line-height: 1.75;
}
.legal-body p { margin-bottom: 12px; }
.legal-body ul {
  padding-left: 22px;
  margin-bottom: 12px;
}
.legal-body li { margin-bottom: 6px; }
.legal-body a { color: var(--primary); }
.legal-body strong { color: #0a0f1e; }

.legal-toc {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 0;
}
.legal-toc ol {
  columns: 2;
  column-gap: 32px;
  padding-left: 20px;
  font-size: 14px;
}
.legal-toc li { margin-bottom: 8px; }
.legal-toc a { color: var(--primary); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .legal-toc ol { columns: 1; }
}