/* ─────────────────────────────────────────────────────────────────
   Legal pages — /privacy, /terms, /refunds
   Long-form prose layout with clear hierarchy + comfortable measure.
   ───────────────────────────────────────────────────────────────── */

.page-legal .legal-head {
  background:
    radial-gradient(circle at 90% 0%, rgba(29,78,216,0.05), transparent 50%),
    var(--bg-page);
  padding: var(--sp-7) 0 var(--sp-5);
}
@media (min-width: 768px) { .page-legal .legal-head { padding: var(--sp-8) 0 var(--sp-6); } }

.page-legal .legal-head h1 { font-size: clamp(36px, 6vw, 56px); }
.page-legal .legal-head p   { color: var(--text-secondary); margin-top: var(--sp-3); max-width: 60ch; }
.page-legal .legal-head time {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  margin-top: var(--sp-2);
  display: inline-block;
}

.page-legal .legal-body { padding: var(--sp-6) 0 var(--sp-8); }
.page-legal .legal-prose { max-width: 72ch; }
.page-legal .legal-prose h2 {
  font-size: var(--fs-xl);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-default);
}
.page-legal .legal-prose h2:first-child { margin-top: 0; }
.page-legal .legal-prose h3 {
  font-size: var(--fs-lg);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
}
.page-legal .legal-prose p,
.page-legal .legal-prose ul,
.page-legal .legal-prose ol {
  margin-bottom: var(--sp-3);
  line-height: 1.7;
  color: var(--text-secondary);
}
.page-legal .legal-prose ul,
.page-legal .legal-prose ol { padding-left: 1.5em; }
.page-legal .legal-prose li { margin-bottom: var(--sp-2); }
.page-legal .legal-prose strong { color: var(--text-primary); }
.page-legal .legal-prose a { color: var(--brand); text-decoration: underline; }
.page-legal .legal-prose code {
  background: var(--bg-tertiary, #f1f5f9);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}

.page-legal .legal-callout {
  background: #fff7ed;
  border-left: 3px solid #fb923c;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 var(--radius-2) var(--radius-2) 0;
  margin: var(--sp-4) 0;
  font-size: var(--fs-sm);
  color: #9a3412;
}
.page-legal .legal-callout strong { color: #7c2d12; }

.page-legal .legal-toc {
  background: var(--bg-tertiary, #f1f5f9);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2);
  padding: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.page-legal .legal-toc h6 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-2);
}
.page-legal .legal-toc ul { margin: 0; padding-left: 0; list-style: none; }
.page-legal .legal-toc li { margin-bottom: var(--sp-1); }
.page-legal .legal-toc a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.page-legal .legal-toc a:hover { color: var(--brand); }