:root {
  --navy: #061c48;
  --midnight: #020d26;
  --paper: #f7f7f2;
  --lime: #8dff00;
  --coral: #ff5c45;
  --ink: #17243c;
  --muted: #627088;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  line-height: 1.7;
}
a { color: inherit; }
.legal-header {
  padding: 22px clamp(20px, 6vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  background: var(--midnight);
}
.legal-brand { display: flex; align-items: center; gap: 12px; font-size: 1.4rem; font-weight: 900; text-decoration: none; }
.legal-brand img { width: 46px; height: 46px; object-fit: contain; border-radius: 13px; }
.back-link { color: var(--lime); font-weight: 800; text-decoration: none; }
.legal-hero {
  padding: clamp(60px, 9vw, 110px) 24px;
  color: white;
  background: radial-gradient(circle at 80% 15%, rgba(141,255,0,.14), transparent 25%), linear-gradient(135deg, var(--navy), #0b3978);
}
.legal-hero div, .legal-content { width: min(820px, 100%); margin: auto; }
.legal-hero small { color: var(--lime); font-weight: 900; letter-spacing: .15em; }
.legal-hero h1 { margin: 12px 0 14px; font-size: clamp(2.5rem, 6vw, 4.8rem); line-height: 1; letter-spacing: -.055em; }
.legal-hero p { max-width: 690px; color: rgba(255,255,255,.76); font-size: 1.08rem; }
.legal-content { padding: 54px 24px 90px; }
.legal-content h2 { margin-top: 38px; color: var(--navy); font-size: 1.45rem; }
.legal-content h3 { margin-top: 26px; color: var(--navy); }
.legal-content p, .legal-content li { color: var(--muted); }
.legal-content strong { color: var(--ink); }
.legal-content code { padding: 2px 7px; border-radius: 7px; color: var(--navy); background: #edf2e8; font-family: "Courier New", monospace; }
.legal-callout { margin: 0 0 34px; padding: 20px 22px; border-left: 5px solid var(--lime); border-radius: 0 18px 18px 0; color: var(--muted); background: #fff; box-shadow: 0 14px 38px rgba(2,13,38,.07); }
.legal-content li + li { margin-top: 8px; }
.legal-card { margin: 28px 0; padding: 24px; border: 1px solid rgba(6,28,72,.12); border-radius: 24px; background: white; box-shadow: 0 18px 45px rgba(2,13,38,.08); }
.legal-button { display: inline-flex; padding: 14px 20px; color: white; background: var(--coral); border-radius: 14px; font-weight: 900; text-decoration: none; }
.legal-footer { padding: 32px 24px; color: rgba(255,255,255,.65); text-align: center; background: var(--midnight); }
@media (max-width: 580px) { .legal-header { align-items: flex-start; gap: 16px; } .back-link { font-size: .82rem; } }