/* ==========================================================================
   Wenya — Legal / content page styles  (depends on tokens.css + styles.css)
   ========================================================================== */

.legal-hero {
  background: var(--color-indigo);
  color: #fff; position: relative; overflow: clip;
  padding-top: clamp(140px, 20vh, 200px);
  padding-bottom: clamp(48px, 7vw, 88px);
}
.legal-hero::before { content:""; position:absolute; inset:0; background: var(--hero-glow); pointer-events:none; }
.legal-hero .container { position: relative; z-index: 2; }
.legal-hero h1 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: var(--ls-tight); }
.legal-hero .updated { font-family: var(--font-mono); font-size: var(--fs-sm); opacity: 0.7; margin-top: var(--space-4); display: block; }

.legal-body { background: var(--bg-light); color: var(--text-on-light); padding-block: clamp(56px, 8vw, 96px); }
.legal-body .container { max-width: var(--container-narrow); }

.legal-intro { font-size: var(--fs-lead); line-height: 1.55; color: var(--color-ink); margin-bottom: var(--space-7); }

.prose h2 {
  font-size: 1.5rem; line-height: 1.25; letter-spacing: var(--ls-tight);
  margin-top: var(--space-8); margin-bottom: var(--space-4); color: var(--color-ink);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin-top: var(--space-6); margin-bottom: var(--space-3); color: var(--color-ink); }
.prose p { margin-bottom: var(--space-4); color: var(--color-grey-500); line-height: 1.6; }
.prose li { line-height: 1.6; }
.legal-intro { line-height: 1.6; }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: 1.3em; color: var(--color-grey-500); }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--color-violet); }
.prose a { color: var(--color-violet); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--color-ink); }

/* Table of contents */
.toc {
  background: #fff; border: 1px solid rgba(16,16,17,0.08); border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6); margin-bottom: var(--space-7); box-shadow: var(--shadow-sm);
}
.toc h2 { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--color-grey-500); margin: 0 0 var(--space-3); }
.toc ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: var(--space-6); }
.toc a { color: var(--color-ink); text-decoration: none; font-size: var(--fs-sm); }
.toc a:hover { color: var(--color-violet); }

.legal-note {
  border-left: 3px solid var(--color-violet); background: #fff;
  padding: var(--space-4) var(--space-5); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--space-7); font-size: var(--fs-sm); color: var(--color-grey-500);
}

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