* { box-sizing: border-box; }
body { margin: 0; background: #f6f5f1; color: #20333b; font-family: "Avenir Next", "Trebuchet MS", sans-serif; line-height: 1.65; }
main { max-width: 960px; padding: 48px 24px; margin: auto; }
nav { padding: 16px 24px; }
h1 { font: 400 clamp(2.3rem, 6vw, 4rem)/1.1 Georgia, serif; margin: 18px 0; }
h2 { font-size: 1.1rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }
.lead { font-size: 1.25rem; max-width: 44rem; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0; }
.sequence { padding-left: 24px; }
.sequence li { padding: 10px 0; }
.sequence span { display: block; }
a { color: #28614f; text-underline-offset: 4px; }
.button { display: inline-block; padding: 10px 18px; margin-right: 16px; background: #28614f; color: white; border-radius: 8px; text-decoration: none; }
a:focus-visible { outline: 3px solid #9c6424; outline-offset: 4px; }
.muted { color: #596669; font-size: .9rem; }
@media (max-width: 600px) { .facts { grid-template-columns: 1fr; gap: 8px; } main { padding-top: 28px; } }
/* The citizen example uses the same calm form language as the Ergon workspace. */
form { max-width: 42rem; margin: 1.5rem 0; padding: 1.4rem; background: #fff; border: 1px solid #d8e0d9; border-radius: .6rem; }
label { display: block; font-weight: 600; margin-bottom: .6rem; }
textarea { width: 100%; min-height: 7rem; padding: .8rem; font: inherit; color: #18313a; border: 1px solid #8caaa0; border-radius: .4rem; resize: vertical; }
button.button { cursor: pointer; font: inherit; border: 0; }
:focus-visible { outline: 3px solid #9a7020; outline-offset: 3px; }