:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #183044; background: #f5f7f5; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
.page { max-width: 1120px; min-height: 100vh; margin: auto; padding: 0 clamp(1.25rem, 5vw, 4rem); display: flex; flex-direction: column; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 2rem 0; border-bottom: 1px solid #d9e0dc; }
.wordmark { text-decoration: none; font-size: 1.55rem; font-weight: 760; letter-spacing: -.07em; }
.wordmark span { color: #398a74; }
.wordmark small { margin-left: .55rem; font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #617c78; }
.eyebrow, .kicker { text-transform: uppercase; letter-spacing: .16em; font-size: .73rem; font-weight: 750; color: #397565; }
.eyebrow { border: 1px solid #a5c5b8; border-radius: 999px; padding: .55rem .8rem; white-space: nowrap; }
main { flex: 1; }
.hero { max-width: 760px; padding: clamp(3.5rem, 10vw, 7rem) 0 4rem; }
h1 { font-size: clamp(2.8rem, 7vw, 5.8rem); line-height: 1.04; letter-spacing: -.065em; max-width: 720px; margin: 1.1rem 0 1.6rem; }
.intro { font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.58; color: #405b63; max-width: 670px; }
.notice { margin: 2.5rem 0 2rem; padding: 1.3rem 1.5rem; background: #e7f0eb; border-left: 4px solid #398a74; border-radius: 0 .7rem .7rem 0; line-height: 1.55; }
.notice p { margin: .35rem 0 0; color: #405b63; }
.button { display: inline-flex; align-items: center; gap: .9rem; min-height: 3.2rem; padding: .8rem 1.3rem; border-radius: .55rem; background: #183f3d; color: white; font-weight: 700; text-decoration: none; }
.button:hover { background: #286658; }
.button:focus-visible, .wordmark:focus-visible { outline: 3px solid #177b77; outline-offset: 4px; }
.details { border-top: 1px solid #d9e0dc; padding: 2rem 0 3rem; max-width: 690px; }
.details h2 { font-size: 1.3rem; letter-spacing: -.025em; }
.details p { color: #405b63; line-height: 1.6; }
footer { padding: 1.5rem 0 2rem; border-top: 1px solid #d9e0dc; color: #587078; font-size: .85rem; }
@media (max-width: 520px) { .masthead { align-items: flex-start; flex-direction: column; } .hero { padding-top: 3rem; } }