:root {
  --ink: #0f1f2e;
  --ink-soft: #3a5068;
  --sky-mid: #b8d5ee;
  --white: #f8fbfe;
  --accent: #2d6e9e;
  --line: rgba(74, 139, 181, 0.18);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: "DM Sans", sans-serif; font-weight: 300; }
.legal-nav { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem clamp(1.25rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.legal-logo { color: var(--ink); font: 400 1.4rem/1 "Cormorant Garamond", serif; text-decoration: none; }
.legal-logo span { color: var(--accent); }
.legal-nav-links { display: flex; gap: 1rem; }
.legal-nav-links a { color: var(--ink-soft); font-size: 0.78rem; text-decoration: none; }
.legal-nav-links a:hover { color: var(--accent); }
.legal-main { width: min(100% - 2.5rem, 780px); margin: 0 auto; padding: 4rem 0 5rem; }
.legal-eyebrow { margin: 0 0 0.65rem; color: var(--accent); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; }
.legal-main h1 { margin: 0; font: 500 clamp(2.4rem, 8vw, 3.8rem)/1 "Cormorant Garamond", serif; }
.legal-updated { margin: 0.7rem 0 2.5rem; color: var(--ink-soft); font-size: 0.78rem; }
.legal-summary { padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: 13px; background: rgba(218, 234, 247, 0.22); }
.legal-main h2 { margin: 2.3rem 0 0.7rem; font: 500 1.45rem/1.2 "Cormorant Garamond", serif; }
.legal-main p, .legal-main li { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.75; }
.legal-main ul { padding-left: 1.25rem; }
.legal-main a { color: var(--accent); }
.legal-callout { margin-top: 2rem; padding: 1rem 1.15rem; border-left: 3px solid var(--accent); background: rgba(218, 234, 247, 0.25); }
.legal-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem clamp(1.25rem, 5vw, 4rem); border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.72rem; }
.legal-footer a { color: inherit; text-decoration: none; }

@media (max-width: 520px) {
  .legal-nav-links a:first-child { display: none; }
  .legal-main { padding-top: 2.5rem; }
  .legal-footer { flex-direction: column; }
}