* { box-sizing: border-box; }
body { margin: 0; background: #fafbf8; color: #182b29;
    font: 16px/1.65 system-ui, sans-serif; }
.page { max-width: 44rem; margin: 0 auto; padding: 28px 20px 56px;
    overflow-wrap: anywhere; }
header { margin-bottom: 40px; }
header a { font-size: 1.125rem; font-weight: 700; text-decoration: none; }
h1 { margin: 0 0 24px; font-size: clamp(2rem, 6vw, 2.5rem);
    line-height: 1.2; letter-spacing: -0.025em; }
h2 { margin: 36px 0 12px; font-size: 1.375rem; line-height: 1.35; }
p { margin: 0 0 18px; }
ul { margin: 0 0 20px; padding-left: 24px; }
li { margin-bottom: 10px; }
a { color: #176b54; }
a:focus-visible { outline: 3px solid #176b54; outline-offset: 4px; }
.button { display: inline-block; max-width: 100%; margin-top: 16px;
    padding: 12px 20px; border-radius: 6px; background: #176b54;
    color: white; font-weight: 600; text-align: center; text-decoration: none; }
.button:hover { background: #125640; }
.button + p { margin-top: 12px; }

ol { margin: 0 0 20px; padding-left: 24px; }
.template { white-space: pre-wrap; background: #f0f3ec; border: 1px solid #b6c7bb; padding: 20px; border-radius: 6px; }