/* ===== Legal page prose (Terms / Privacy) ===== */
.legal-hero {
  padding: calc(var(--s-24) + 2rem) 0 var(--s-8);
}
.legal-hero .eyebrow { display: block; margin-bottom: var(--s-3); }
.legal-hero h1 { font-size: var(--t-2xl); margin-bottom: var(--s-3); }
.legal-updated { color: var(--text-low); font-size: var(--t-xs); }

.legal-body {
  padding-bottom: var(--s-24);
}
.legal-panel {
  padding: var(--s-8) var(--s-8);
  max-width: 840px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .legal-panel { padding: var(--s-6) var(--s-4); }
}

.legal-panel h2 {
  font-size: var(--t-lg);
  margin-top: var(--s-12);
  margin-bottom: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--glass-border);
}
.legal-panel h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-panel h3 {
  font-size: var(--t-base);
  color: var(--text-hi);
  margin-top: var(--s-6);
  margin-bottom: var(--s-2);
}
.legal-panel p { margin-bottom: var(--s-4); }
.legal-panel p:last-child { margin-bottom: 0; }
.legal-panel ul, .legal-panel ol {
  margin: 0 0 var(--s-4) 0;
  padding-left: 1.3em;
  list-style: disc;
}
.legal-panel ol { list-style: decimal; }
.legal-panel li { margin-bottom: var(--s-2); }
.legal-panel li::marker { color: var(--accent); }
.legal-panel a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-panel a:hover { color: var(--text-hi); }
.legal-panel strong { color: var(--text-hi); }

.legal-toc {
  margin-bottom: var(--s-8);
}
.legal-toc p { margin-bottom: var(--s-2); color: var(--text-hi); font-weight: 600; }
.legal-toc ol {
  columns: 2;
  column-gap: var(--s-8);
  list-style: decimal;
  padding-left: 1.3em;
}
@media (max-width: 640px) {
  .legal-toc ol { columns: 1; }
}
.legal-toc a { color: var(--text-mid); text-decoration: none; }
.legal-toc a:hover { color: var(--accent); }

.legal-table-wrap { overflow-x: auto; margin-bottom: var(--s-4); }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-xs);
  min-width: 480px;
}
.legal-table th, .legal-table td {
  text-align: left;
  padding: var(--s-3);
  border-bottom: 1px solid var(--glass-border);
}
.legal-table th { color: var(--text-hi); font-weight: 600; }

.legal-callout {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-4);
  margin-bottom: var(--s-4);
  font-size: var(--t-xs);
  color: var(--text-mid);
}

.legal-crosslink {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-8);
}