/* ============================================================
   legal.css — shared styles for OrgLens legal / trust pages
   (terms, privacy, trust, dmca). Inherits tokens.css + marketing.css.
   Mobile-first; light + dark via [data-theme] tokens.
   ============================================================ */

.legal-page {
  background:
    radial-gradient(120% 80% at 100% -10%, var(--primary-tint), transparent 60%),
    var(--bg);
  padding: 40px 20px 96px;
  min-height: 70vh;
}

.legal-container {
  max-width: 760px;
  margin: 0 auto;
}

/* ── Draft banner ─────────────────────────────────────────── */
.legal-draft-banner {
  display: block;
  border: 1px solid color-mix(in oklab, var(--warning, #c98a14) 45%, var(--border));
  background: color-mix(in oklab, var(--warning, #c98a14) 10%, var(--surface));
  color: var(--text-2);
  border-radius: var(--r-md, 12px);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 36px;
}
.legal-draft-banner strong { color: var(--text); }
.legal-draft-banner a { color: var(--primary); font-weight: 500; }

/* ── Page head ────────────────────────────────────────────── */
.legal-head { margin-bottom: 32px; }
.legal-eyebrow {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 10px;
}
.legal-title {
  font-family: var(--font-display, "Fraunces", serif);
  font-weight: 500;
  font-size: clamp(34px, 7vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 14px;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono, monospace);
  font-size: 12.5px;
  color: var(--text-3);
  margin: 0 0 22px;
}
.legal-meta span[aria-hidden] { opacity: 0.5; }
.legal-lede {
  font-size: clamp(17px, 2.4vw, 19px);
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}

/* ── Table of contents ────────────────────────────────────── */
.legal-toc {
  border: 1px solid var(--border);
  border-radius: var(--r-md, 12px);
  background: var(--surface);
  padding: 18px 22px;
  margin: 0 0 44px;
}
.legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 28px;
}
@media (max-width: 560px) { .legal-toc ol { columns: 1; } }
.legal-toc li { margin: 5px 0; break-inside: avoid; }
.legal-toc a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.legal-toc a:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* ── Sections / prose ─────────────────────────────────────── */
.legal-section { margin: 0 0 36px; scroll-margin-top: 90px; }
.legal-section h2 {
  font-family: var(--font-display, "Fraunces", serif);
  font-weight: 500;
  font-size: clamp(22px, 4vw, 27px);
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.legal-section h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 24px 0 8px;
}
.legal-section p,
.legal-section li {
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-2);
}
.legal-section p { margin: 0 0 16px; }
.legal-section ul,
.legal-section ol { margin: 0 0 16px; padding-left: 22px; }
.legal-section li { margin: 6px 0; }
.legal-section a { color: var(--primary); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--primary) 35%, transparent); }
.legal-section a:hover { border-bottom-color: var(--primary); }
.legal-section strong { color: var(--text); font-weight: 600; }
.legal-section em { font-style: italic; color: var(--text); }
.legal-contact { color: var(--text-2); }

/* ── Definition / sub-processor table ─────────────────────── */
.legal-table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; margin: 0 0 20px; border: 1px solid var(--border); border-radius: var(--r-md, 12px); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.legal-table th, .legal-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; }
.legal-table th { background: var(--surface-2); color: var(--text); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; }
.legal-table tr:last-child td { border-bottom: none; }

/* ── Trust cards ──────────────────────────────────────────── */
.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0 0 32px; }
@media (max-width: 560px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-md, 12px);
  padding: 18px 20px;
}
.trust-card h3 { display:flex; align-items:center; gap:8px; margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--text); }
.trust-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.trust-card .trust-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success, #2f9e44); flex-shrink: 0; }

/* ── Cross-links ──────────────────────────────────────────── */
.legal-crosslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.legal-crosslinks a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}
.legal-crosslinks a:hover { text-decoration: underline; }

/* ── Footer (minimal on legal pages) ──────────────────────── */
.legal-page + .site-footer .footer-bottom a { color: var(--text-3); text-decoration: none; }
.legal-page + .site-footer .footer-bottom a:hover { color: var(--primary); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--primary); color: #fff; padding: 8px 14px; border-radius: 0 0 8px 0; z-index: 100;
}
.skip-link:focus { left: 0; }