/* legal.css — shared design system for the Selfbased legal pages
   (Privacy Policy, Terms of Service, Subprocessors). Tokens, grain, nav and
   footer are lifted verbatim from index.html so the pages feel like one site. */

:root {
  --paper: #fafaf7;
  --paper-soft: #f2f2ee;
  --ink: #16181d;
  --ink-60: rgba(22, 24, 29, 0.62);
  --ink-40: rgba(22, 24, 29, 0.42);
  --line: rgba(22, 24, 29, 0.10);
  --card: #ffffff;

  --health: #ef4444;
  --physical: #f97316;
  --mastery: #ec4899;
  --wealth: #eab308;
  --recovery: #a855f7;
  --appearance: #3b82f6;
  --bond: #22c55e;
  --accent: #3b82f6;

  --radius-lg: 28px;
  --radius-md: 18px;
  --maxw: 1120px;

  --display: "Manrope", "Segoe UI", sans-serif;
  --sans: "Manrope", "Segoe UI", sans-serif;
  --brico: "Bricolage Grotesque", "Manrope", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: rgba(59, 130, 246, 0.22); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- grain ---------- */
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.028 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- nav ---------- */
.nav { position: relative; background: transparent; }
.nav-inner { display: flex; align-items: center; justify-content: flex-start; gap: 44px; padding: 20px 0; }
.nav-brand { display: flex; align-items: center; gap: 2px; font-weight: 900; letter-spacing: -0.005em; font-size: 25px; }
.nav-brand img { width: 24px; height: 24px; border-radius: 6px; }
.nav-links { display: flex; gap: 26px; font-size: 14px; font-weight: 500; color: var(--ink-60); }
.nav-links a { transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { margin-left: auto; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  cursor: pointer; border: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-dark { background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(22, 24, 29, 0.22); }
.btn-dark:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(22, 24, 29, 0.28); }

/* ---------- legal page ---------- */
.legal-hero { position: relative; padding: 40px 0 30px; }
.legal-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-40);
}
.legal-eyebrow a { color: var(--ink-40); transition: color 0.2s; }
.legal-eyebrow a:hover { color: var(--ink); }
.legal-hero h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.03em;
  margin-top: 16px;
}
.legal-updated { margin-top: 14px; font-size: 14px; color: var(--ink-40); }

.legal {
  max-width: 760px; margin: 0 auto; padding: 8px 0 40px;
}
/* subprocessors page: let the content (especially the wide table) fill the page,
   while text stays capped at a readable measure */
.legal-wide { max-width: none; }
.legal-wide > .lede,
.legal-wide > section > h2,
.legal-wide > section > p,
.legal-wide > section > ul { max-width: 720px; }
.legal .lede { font-size: 17px; line-height: 1.65; color: var(--ink-60); margin-bottom: 8px; }
.legal section { padding-top: 34px; }
.legal h2 {
  font-family: var(--display); font-weight: 800;
  font-size: 21px; letter-spacing: -0.015em; margin-bottom: 12px;
}
.legal h3 { font-size: 15.5px; font-weight: 700; margin: 20px 0 8px; }
.legal p { font-size: 15px; line-height: 1.72; color: var(--ink-60); margin-bottom: 14px; }
.legal p strong, .legal li strong { color: var(--ink); font-weight: 700; }
.legal a.inline { color: var(--accent); font-weight: 600; }
.legal a.inline:hover { text-decoration: underline; }
.legal ul { list-style: none; margin: 0 0 14px; padding: 0; }
.legal li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  font-size: 15px; line-height: 1.7; color: var(--ink-60);
}
.legal li::before {
  content: ""; position: absolute; left: 4px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* callout card — same flat white card idiom as the site */
.legal-note {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 18px 20px; margin: 8px 0 4px;
}
.legal-note p:last-child { margin-bottom: 0; }

/* subprocessor table: fixed layout + wrapping cells so all five columns fit
   the container with no horizontal scroll (subs-wrap keeps overflow-x as a
   very-narrow-viewport fallback only) */
.subs-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.subs { width: 100%; border-collapse: collapse; table-layout: fixed; }
.subs th, .subs td { text-align: left; padding: 13px 14px; font-size: 13.5px; line-height: 1.5; overflow-wrap: break-word; }
.subs th:nth-child(1) { width: 14%; }
.subs th:nth-child(2) { width: 24%; }
.subs th:nth-child(3) { width: 30%; }
.subs th:nth-child(4) { width: 14%; }
.subs th:nth-child(5) { width: 18%; }
.subs thead th {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-40); border-bottom: 1px solid var(--line); background: var(--paper-soft);
}
.subs tbody tr + tr td { border-top: 1px solid var(--line); }
.subs td:first-child { font-weight: 700; color: var(--ink); }
.subs td { color: var(--ink-60); vertical-align: top; }
.subs a { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; transition: opacity 0.2s ease; }
.subs a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .subs th, .subs td { padding: 10px 8px; font-size: 12px; }
}

/* ---------- footer ---------- */
footer { position: relative; z-index: 2; margin-top: 80px; border-top: 1px solid rgba(22, 24, 29, 0.12); padding-top: 40px; }
.foot-grid { display: grid; grid-template-columns: 1fr 170px 150px 170px; gap: 24px; padding-bottom: 120px; }
.foot-brand { display: flex; align-items: center; gap: 3px; align-self: start; justify-self: start; font-weight: 700; letter-spacing: 0.01em; font-size: 24px; cursor: pointer; transition: opacity 0.2s; }
.foot-brand:hover { opacity: 0.7; }
.foot-brand img { width: 26px; height: 26px; border-radius: 7px; }
.foot-col h4 { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.foot-col a { display: block; font-size: 14px; color: var(--ink-60); margin-bottom: 10px; transition: color 0.2s; }
.foot-col a:hover { color: var(--ink); }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; padding: 0 0 6px; font-size: 13px; color: var(--ink-40); }
.foot-socials { display: flex; align-items: center; gap: 18px; }
.foot-socials a { display: inline-flex; color: var(--ink); opacity: 0.85; transition: opacity 0.2s; }
.foot-socials a:hover { opacity: 0.45; }
.foot-socials svg { width: 18px; height: 18px; }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; padding-bottom: 64px; }
  .foot-grid .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
}