:root {
  color-scheme: light;
  --navy: #071f36;
  --blue: #0d4e8f;
  --sky: #d8efff;
  --mint: #4fd3b3;
  --yellow: #ffbd21;
  --paper: #f7fbff;
  --ink: #10253a;
  --muted: #50677e;
  --line: #c8dae9;
  --max: 70rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}

a { color: var(--blue); text-underline-offset: .18em; }
a:focus-visible, .button:focus-visible { outline: .2rem solid var(--yellow); outline-offset: .2rem; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.15rem clamp(1rem, 4vw, 2.5rem);
}

.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--navy); font-weight: 850; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--yellow); }
nav { display: flex; gap: 1rem; }
nav a { color: var(--navy); font-weight: 750; text-decoration: none; }
nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: .16rem; }

main { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem) 4rem; }

.hero {
  overflow: hidden;
  padding: clamp(2.5rem, 8vw, 6rem) clamp(1.25rem, 5vw, 4rem);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 86% 18%, rgba(79, 211, 179, .7), transparent 25%),
    linear-gradient(145deg, var(--navy), var(--blue));
  color: white;
  box-shadow: 0 1.5rem 4rem rgba(7, 31, 54, .18);
}

.eyebrow { margin: 0 0 .7rem; color: var(--yellow); font-size: .8rem; font-weight: 900; letter-spacing: .15em; }
h1 { max-width: 17ch; margin: 0 0 1rem; font-size: clamp(2.35rem, 8vw, 5.4rem); line-height: .98; letter-spacing: -.035em; }
.lede { max-width: 44rem; margin: 0; font-size: clamp(1.05rem, 2.5vw, 1.35rem); color: rgba(255,255,255,.84); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .75rem 1.1rem; border-radius: 999px; font-weight: 850; text-decoration: none; }
.button.primary { background: var(--yellow); color: var(--navy); }
.button.secondary { border: .1rem solid rgba(255,255,255,.55); color: white; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.card, .notice, .support-block { padding: 1.35rem; border: .08rem solid var(--line); border-radius: 1.25rem; background: white; }
.card-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem; background: var(--sky); color: var(--blue); font-size: 1.35rem; font-weight: 900; }
h2 { margin: 0 0 .5rem; font-size: 1.3rem; line-height: 1.25; }
.card p, .notice p, .support-block p { margin: 0; color: var(--muted); }
.notice { margin-top: 1rem; border-color: var(--mint); background: #eafbf7; }

.document { max-width: 50rem; padding-top: clamp(2rem, 6vw, 5rem); }
.document h1 { color: var(--navy); }
.document h2 { margin-top: 2.2rem; color: var(--navy); }
.document p { font-size: 1.05rem; }
.updated { color: var(--muted); font-weight: 700; }
.support-block { margin-top: 1rem; }
.support-block h2 { margin-top: 0; }
.support-block .button { margin-top: 1rem; }
.privacy-warning { margin-top: .8rem !important; padding: .8rem; border-radius: .7rem; background: #fff4d2; color: var(--ink) !important; }

footer { padding: 2rem 1rem 3rem; text-align: center; color: var(--muted); }

@media (max-width: 44rem) {
  .site-header { align-items: flex-start; }
  .brand span:last-child { max-width: 9rem; line-height: 1.2; }
  nav { flex-direction: column; gap: .25rem; text-align: right; }
  .grid { grid-template-columns: 1fr; }
  .hero { border-radius: 1.35rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .button { transition: transform .18s ease, box-shadow .18s ease; }
  .button:hover { transform: translateY(-.12rem); box-shadow: 0 .6rem 1.4rem rgba(7,31,54,.16); }
}