/* ==========================================================================
   The Undeniable Stack: legal-page styles
   Loaded by privacy.html, terms.html and 404.html.
   Brand rule holds: sharp rectangular edges only, no rounded corners.
   Every value comes from tokens.css; nothing hard-codes a colour.

   WHY THIS IS SEPARATE FROM forms.css. These rules used to live at the bottom
   of forms.css, so every legal page also downloaded ~4KB of opt-in form CSS
   for a form that moved to GoHighLevel and no longer exists on this host. The
   form rules are retained (see forms-retired.css) rather than deleted, because
   the matching scripts and thanks.html are retained too; they are simply no
   longer in the load path of any published page.
   ========================================================================== */

/* ---- Legal pages (privacy, terms) -------------------------------------- */

.legal {
  padding-block: var(--space-8) var(--space-9);
}

.legal h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}

.legal .updated {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 var(--space-6);
}

.legal h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  margin: var(--space-7) 0 var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border-hairline) solid var(--border);
}

.legal h3 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-2);
}

.legal p,
.legal li {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  max-width: var(--measure);
}

.legal p {
  margin: 0 0 var(--space-4);
}

.legal ul,
.legal ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.legal li {
  margin-bottom: var(--space-2);
}

.legal a {
  color: var(--accent);
}

.legal a:hover {
  color: var(--accent-hover);
}

/* Tables carry the processor list and the data-use mapping. They must scroll
   inside their own container so the page body never scrolls horizontally. */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 var(--space-5);
  border: var(--border-hairline) solid var(--border);
}

.legal table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: var(--text-sm);
}

.legal th,
.legal td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3);
  border-bottom: var(--border-hairline) solid var(--border);
  color: var(--text);
}

.legal th {
  font-weight: 600;
  background: var(--surface-2);
  white-space: nowrap;
}

.legal tbody tr:last-child td {
  border-bottom: 0;
}

/* Back link at the top of a legal page. */
.legal .backlink {
  display: inline-block;
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.legal .backlink:hover {
  color: var(--accent);
}

/* ---- Footer legal nav -------------------------------------------------- */

/* .footer-legal-nav was defined HERE and again in offer.css, and the legal
   pages load both, so this block won (later sheet). The same component
   rendered two ways: 16px accent links on the homepage against 14px muted
   links at a different gap on privacy, terms and 404.

   The single definition now lives in offer.css, which every page loads.
   Do not re-add a copy here. If the footer nav needs changing, change it in
   one place. */