/* 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 */
.subs-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.subs { width: 100%; border-collapse: collapse; min-width: 780px; }
.subs th, .subs td { text-align: left; padding: 14px 18px; font-size: 14px; line-height: 1.5; }
.subs thead th {
  font-size: 11px; 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); white-space: nowrap; }
.subs td:nth-child(3) { white-space: nowrap; }        /* Location on one line */
.subs td { color: var(--ink-60); vertical-align: top; }
.subs a { color: var(--accent); font-weight: 600; white-space: nowrap; transition: opacity 0.2s ease; }  /* URLs on one line */
.subs a:hover { text-decoration: underline; }

/* ---------- 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; }
}