:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #183247;
  background: #f2f8fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --navy: #12304a;
  --blue: #d9f0fa;
  --accent: #f5c84c;
}
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; min-height: 100vh; }
a { color: #075b83; }
.topbar { min-height: 64px; padding: 12px clamp(16px, 5vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--navy); color: white; }
.topbar a { color: white; text-decoration: none; }
.brand { font-size: 1.1rem; font-weight: 750; }
nav a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 12px; border-radius: 8px; }
nav a:hover, nav a:focus-visible { background: #ffffff24; }
.container { width: min(100% - 32px, 760px); margin: 28px auto; }
.hero, .card { padding: clamp(20px, 5vw, 36px); border: 1px solid #d5e5ed; border-radius: 18px; background: white; box-shadow: 0 8px 28px #1832470c; }
.hero { background: linear-gradient(145deg, white 55%, var(--blue)); }
.eyebrow { margin: 0 0 8px; color: #0878a7; font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
h1 { margin: 0; color: var(--navy); font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.2; overflow-wrap: anywhere; }
h2 { margin-top: 0; color: var(--navy); }
.intro { max-width: 56ch; line-height: 1.75; }
button, .button-link { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; margin-top: 8px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--navy); color: white; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
button:hover, .button-link:hover { filter: brightness(1.15); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.status { min-height: 1.5em; color: #476477; }
.card { margin-top: 18px; }
.card p { line-height: 1.65; }
footer { padding: 18px 16px 28px; text-align: center; color: #587184; }
@media (max-width: 600px) {
  .topbar { min-height: 60px; padding: 8px 14px; }
  .container { width: min(100% - 24px, 760px); margin: 14px auto; }
  .hero, .card { border-radius: 14px; }
  button, .button-link { width: 100%; }
}