/* Shared styling for the legal pages (privacy, sms-terms).
   Kept in its own file rather than duplicated inline into both: these two pages
   are read by a carrier reviewer and by nobody else on a good day, so they want
   to be plain, fast and identical to each other, not another copy of the
   marketing page's 2000 lines of CSS. Variables mirror index.html so the pages
   still look like the same company. */

:root {
  --bg: #000000;
  --surface: #0a0a0f;
  --surface-2: #121218;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #f8f9fc;
  --muted: #8a8f9e;
  --dim: #5a5f72;
  --purple: #b44dff;
  --purple-hot: #d478ff;
  --max: 780px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(var(--max), calc(100% - 44px)); margin: 0 auto; }

header.legal-nav {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  margin-bottom: 46px;
}
header.legal-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
header.legal-nav img { height: 34px; width: auto; display: block; }
header.legal-nav a.back {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.86rem;
}
header.legal-nav a.back:hover { color: var(--purple-hot); }

h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.updated {
  color: var(--dim);
  font-size: 0.84rem;
  margin: 0 0 38px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

h2 {
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
  color: var(--text);
}

p, li { color: #cfd2dc; }
p { margin: 0 0 14px; }
ul { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 7px; }

a { color: var(--purple-hot); }

strong, b { color: var(--text); font-weight: 600; }

/* The consent and opt-out disclosures are what a carrier reviewer is looking
   for, so they are visually separated rather than buried in a paragraph. */
.callout {
  border: 1px solid rgba(180, 77, 255, 0.28);
  background: rgba(180, 77, 255, 0.06);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 22px 0 26px;
}
.callout p:last-child { margin-bottom: 0; }
.callout .h {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple-hot);
  font-weight: 600;
  margin-bottom: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 0.92rem;
}
th, td {
  text-align: left;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th { color: var(--muted); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; }
td { color: #cfd2dc; }

footer.legal-foot {
  margin-top: 60px;
  padding: 26px 0 50px;
  border-top: 1px solid var(--border);
  color: var(--dim);
  font-size: 0.82rem;
}
footer.legal-foot a { color: var(--muted); text-decoration: none; margin-right: 16px; }
footer.legal-foot a:hover { color: var(--purple-hot); }