/* BeHonored.ai — legal pages (Privacy, Terms, SMS Terms) long-form layout.

   Legal pages load THREE stylesheets, in order:
     brand/brand.css  → tokens, focus ring, .btn*, animated logo (shared)
     styles.css       → site header/footer, .container, .skip-link, a11y helpers
     legal.css        → this file: the readable article column + callouts only
   Loading styles.css keeps the header/footer pixel-identical to the landing page
   for free; its marketing-only rules (hero, chat demo, features) simply go unused.

   Keep these pages plain HTML — no JS is required to read them. */

/* ---- Article column ---- */
.legal { padding-block: var(--space-12); }
.legal__inner { max-width: 46rem; }

.legal__kicker {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem;
  font-weight: 600; color: var(--color-accent-text);
}
.legal__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--color-primary);
  margin-top: var(--space-2);
}
.legal__updated {
  font-size: 0.875rem; color: var(--color-text-muted); margin-top: var(--space-3);
}
.legal__intro { margin-top: var(--space-6); font-size: 1.0625rem; }

/* ---- Body typography ---- */
.legal h2 {
  font-size: 1.375rem; color: var(--color-primary);
  margin-top: var(--space-12); padding-top: var(--space-2);
  scroll-margin-top: 5rem; /* clear the sticky header when jumped to via anchor */
}
.legal h3 {
  font-size: 1.0625rem; color: var(--color-primary);
  margin-top: var(--space-6);
}
.legal p { margin-top: var(--space-4); }
.legal ul, .legal ol { margin-top: var(--space-4); padding-left: var(--space-6); }
.legal li { margin-top: var(--space-2); }
.legal li::marker { color: var(--color-accent-text); }
.legal strong { color: var(--color-text); }
.legal a { color: var(--color-link); }

/* Bracketed fill-ins like [Business mailing address] read as obvious TODOs so
   they're never shipped by accident. Remove these spans once filled in. */
.legal .fill {
  background: rgba(184, 134, 11, 0.16); color: var(--color-accent-text);
  padding: 0 0.25rem; border-radius: 4px; font-style: normal; white-space: nowrap;
}

/* ---- Table of contents ---- */
.legal__toc {
  margin-top: var(--space-8); padding: var(--space-4) var(--space-6);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.legal__toc h2 {
  margin-top: 0; font-size: 0.8125rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-text-muted);
}
.legal__toc ol { margin-top: var(--space-3); columns: 2; column-gap: var(--space-8); }
.legal__toc li { margin-top: var(--space-1); break-inside: avoid; }
.legal__toc a { text-decoration: none; }
.legal__toc a:hover { text-decoration: underline; }
@media (max-width: 34rem) { .legal__toc ol { columns: 1; } }

/* ---- Callout — the gold-bordered box that draws the eye to the disclosures
   carrier/compliance reviewers look for (mobile-data carve-out, "not legal
   advice", STOP/HELP). Mirrors the gold-topped .feature card on the landing. */
.legal-callout {
  margin-top: var(--space-6); padding: var(--space-6);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.legal-callout > :first-child { margin-top: 0; }
.legal-callout h2,
.legal-callout h3 { margin-top: 0; }

/* Definition list for the SMS program summary (Twilio-style at-a-glance facts) */
.legal-facts { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.legal-facts > div {
  display: grid; grid-template-columns: 12rem 1fr; gap: var(--space-2) var(--space-6);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border);
}
.legal-facts dt { font-weight: 600; color: var(--color-primary); }
.legal-facts dd { margin: 0; color: var(--color-text); }
@media (max-width: 34rem) { .legal-facts > div { grid-template-columns: 1fr; gap: var(--space-1); } }