:root {
  color-scheme: dark;
  --navy: #06131f;
  --blue: #102b42;
  --gold: #e8b84f;
  --cream: #f7efd9;
  --muted: #b7b7ab;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--cream);
  background:
    linear-gradient(135deg, transparent 0 49%, rgba(255,255,255,.025) 49% 51%, transparent 51%) 0 0 / 34px 34px,
    radial-gradient(circle at 50% -20%, #214d68 0, var(--navy) 42%);
}

main {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
  padding: 72px 0 48px;
}

.hero { text-align: center; margin-bottom: 40px; }
.hero.compact { margin-bottom: 28px; }
.mark { color: var(--gold); font-size: 64px; transform: rotate(-90deg); line-height: 1; }
.eyebrow { color: var(--gold); font-size: 13px; font-weight: 800; letter-spacing: .28em; }
h1 { margin: 12px 0 14px; font-size: clamp(38px, 8vw, 64px); line-height: 1.02; }
.lede { max-width: 620px; margin: 0 auto; color: var(--muted); font-size: 19px; line-height: 1.6; }

.card {
  margin: 18px 0;
  padding: 26px 28px;
  border: 1px solid rgba(247,239,217,.1);
  border-radius: 22px;
  background: rgba(247,239,217,.055);
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}

h2 { margin: 0 0 12px; color: var(--gold); font-size: 21px; }
.policy h2:not(:first-child) { margin-top: 28px; }
p, li { color: var(--muted); font-size: 17px; line-height: 1.65; }
ol { margin: 0; padding-left: 24px; }
a { color: var(--gold); }
nav { text-align: center; padding: 28px 0; }

@media (max-width: 520px) {
  main { padding-top: 46px; }
  .card { padding: 22px 20px; border-radius: 18px; }
}