/* Privacy page. Builds on site.css (tokens, nav, buttons, footer). */

.legal-hero {
  position: relative; overflow: hidden; color: #fff;
  background: var(--navy-950);
  margin-top: -69px; padding: 141px 0 72px;
}
.legal-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(143, 210, 255, .14) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at 30% 30%, #000 15%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 15%, transparent 70%);
}
.legal-hero .hero-glow { inset: -10% auto auto -15%; width: 80%; height: 90%; }
.legal-hero-inner { position: relative; max-width: 860px; }
.legal-hero h1 { font-size: clamp(38px, 5vw, 60px); font-weight: 800; letter-spacing: -.035em; margin: 18px 0 20px; }
.legal-hero .lead { max-width: 680px; }
.legal-date { margin-top: 22px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.55); }

.legal-body { padding: 64px 0 104px; scroll-margin-top: 68px; }
.legal-wrap { max-width: 860px; }

.legal-promise-title { font-size: 26px; font-weight: 800; }
.promises {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin: 20px 0 64px;
}
@media (max-width: 720px) { .promises { grid-template-columns: 1fr; } }
.promises li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; border-radius: 16px;
  background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 15.5px; color: var(--ink-2);
}
.promises b { color: var(--ink); }
.promises .ic { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--ok); }

.legal-text { color: var(--ink-2); }
.legal-text h2 { font-size: 28px; font-weight: 800; color: var(--ink); margin: 56px 0 14px; scroll-margin-top: 84px; }
.legal-text h2:first-child { margin-top: 0; }
.legal-text h3 { font-size: 19px; font-weight: 800; color: var(--ink); margin: 28px 0 8px; }
.legal-text p + p { margin-top: 14px; }
.legal-text a { color: var(--blue-700); }

.bullets { display: grid; gap: 10px; }
.bullets li { position: relative; padding-left: 22px; }
.bullets li::before {
  content: ""; position: absolute; left: 4px; top: .7em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
}
.bullets b { color: var(--ink); }

.apps-data { margin: 18px 0; display: grid; gap: 4px; }
.apps-data dt { font-weight: 800; color: var(--ink); margin-top: 14px; }
.apps-data dd { margin: 2px 0 0; }

.table-scroll { overflow-x: auto; margin: 18px 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.providers { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.providers th, .providers td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.providers th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg-alt); }
.providers tr:last-child td { border-bottom: 0; }
.providers td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }

.footer-base a { color: inherit; }
.footer-base a:hover { color: #fff; }