:root { color-scheme: light dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #17211b; background: #edf2ea; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.62; }
a { color: #12623f; text-underline-offset: 3px; }
header { background: #173d2b; color: #f5faed; padding: 48px 24px 42px; }
header > div, main, footer { width: min(880px, calc(100% - 40px)); margin: 0 auto; }
.brand { margin: 0 0 10px; color: #badb98; font-weight: 700; }
h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.08; letter-spacing: 0; }
header p { max-width: 620px; margin: 16px 0 0; color: #d6e8ce; }
main { padding: 42px 0 60px; }
section { border-top: 1px solid #bfd0be; padding: 28px 0; }
section:first-child { border-top: 0; padding-top: 0; }
h2 { margin: 0 0 10px; font-size: 1.3rem; letter-spacing: 0; }
p, li { max-width: 760px; }
ul { padding-left: 22px; }
.notice { padding: 18px 20px; border-left: 4px solid #2e8255; background: #e1eddf; }
.button { display: inline-block; border: 0; border-radius: 6px; background: #17653f; color: white; padding: 12px 16px; font-weight: 700; text-decoration: none; }
footer { padding: 28px 0 42px; color: #536358; font-size: .9rem; }
@media (prefers-color-scheme: dark) {
  :root { color: #e1eadc; background: #101713; }
  header { background: #0b2619; }
  section { border-color: #385040; }
  .notice { background: #172820; border-color: #6eaf76; }
  a { color: #9bd7a0; }
  footer { color: #aebcaf; }
}