:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #18201d; background: #f4f7f4; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
main { width: min(94vw, 680px); }
header { display: flex; align-items: center; justify-content: space-between; padding: 1rem .25rem; color: #58635f; }
.brand { color: #183e31; font-size: 1.25rem; font-weight: 800; text-decoration: none; }
.card { background: #fff; border: 1px solid #dce5df; border-radius: 1.25rem; padding: clamp(1.5rem, 5vw, 3.5rem); box-shadow: 0 18px 50px rgb(21 60 45 / 8%); }
.eyebrow { color: #287454; font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: .5rem 0 1rem; font-size: clamp(2rem, 7vw, 3.25rem); line-height: 1.05; letter-spacing: -.04em; }
p { line-height: 1.65; }
.actions, form { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2rem; }
.button, button { border: 0; border-radius: .7rem; background: #246b4d; color: #fff; cursor: pointer; display: inline-block; font: inherit; font-weight: 700; padding: .85rem 1.1rem; text-decoration: none; }
.secondary { background: #e3eee8; color: #1d533d; }
a { color: #246b4d; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; }
dt { color: #64716c; } dd { margin: 0; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) { :root { color: #e9f2ed; background: #101713; } .card { background: #17221d; border-color: #2a3b33; } header { color: #9aaba3; } .brand, a { color: #74d0a8; } }