* { box-sizing: border-box; }
:root { color-scheme: light; --navy: #063963; --blue: #073b66; --text: #183044; --muted: #526779; }
html { min-height: 100%; background: #f3f6f8; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--text); line-height: 1.6; }
.page { width: min(100% - 32px, 760px); margin: 32px auto; background: #fff; border-top: 8px solid var(--navy); box-shadow: 0 8px 28px rgba(0, 25, 45, .08); }
.site-header { width: 100%; }
.banner { display: block; width: 100%; height: auto; }
.brand { padding: 24px 28px 20px; text-align: center; }
.logo { display: block; width: min(100%, 180px); height: auto; margin: 0 auto; }
.tagline { margin: -6px 0 18px; font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1.15rem; line-height: 1.6; color: var(--navy); }
.message { padding: 12px 32px 38px; }
h1 { margin: 0 0 14px; color: var(--navy); font-size: clamp(1.65rem, 4vw, 2.15rem); line-height: 1.2; }
h2 { margin: 28px 0 8px; color: var(--navy); font-size: 1.15rem; }
.lead { font-size: 1.18rem; }
a { color: var(--navy); }
a:focus-visible, .button:focus-visible { outline: 3px solid #d49b28; outline-offset: 3px; }
.button { display: inline-block; padding: 12px 18px; background: var(--navy); color: #fff; text-decoration: none; border-radius: 3px; font-weight: 700; }
.button:hover { background: #0b4c80; }
footer { padding: 18px 28px; background: #eef2f5; text-align: center; display: flex; justify-content: center; gap: 12px; }
.legal { padding: 28px 32px 40px; }
.legal h1 { margin-bottom: 24px; }
.legal h2 { margin-top: 24px; }
.notice { padding: 12px 14px; border-left: 4px solid #c18b20; background: #fff7e6; color: #553d0c; }
@media (max-width: 520px) {
  .page { width: 100%; margin: 0 auto; min-height: 100vh; }
  .brand { padding: 20px 20px 14px; }
  .message, .legal { padding-left: 22px; padding-right: 22px; }
  footer { padding: 18px 16px; }
}