.information-page{max-width:760px;margin-inline:auto;padding-top:36px}
.information-page>h1{margin:0 0 24px;font-size:clamp(36px,7vw,56px)}
.information-page>p{max-width:62ch;margin:16px 0;color:var(--muted)}
.information-page h2{margin:32px 0 12px}
.information-page h3{margin:24px 0 10px;font-size:18px}
.information-page section{margin-block:28px}
.information-page section p,.information-page li{margin-block:12px;max-width:65ch}
.information-page ul,.information-page ol{padding-left:24px}
.information-page .button{text-decoration:none;margin-block:20px;max-width:420px}
.information-page footer{margin-top:48px;border-top:1px solid var(--rule);padding-top:16px}
.information-page footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.information-page footer a{display:inline-flex;align-items:center;min-height:44px}
.information-page .notice{padding:18px;border:1px solid var(--control-rule);border-radius:var(--radius-panel);background:color-mix(in srgb,var(--fresh) 22%,transparent)}
.information-page .notice p{margin:0}
.demo-question{padding:24px;border-radius:var(--radius-panel);background:var(--night);color:var(--chalk)}
.demo-question h2{margin-top:0;font-size:clamp(24px,5vw,32px)}
.demo-question p{color:var(--chalk)}
.demo-answers{display:grid;gap:16px;margin-block:20px}
.demo-answers .example-points{font-size:36px;font-weight:700;color:var(--pitch);line-height:1.2}
.demo-answers > section { margin: 0; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.demo-answers > section h3 { margin: 0 0 16px; }
.demo-answers > section p:last-child { margin-bottom: 0; }
.information-page label{display:block;font-weight:700;margin:20px 0 8px}
.information-page select,.information-page input,.information-page textarea{font:inherit;width:100%;min-height:48px;padding:12px;border:1px solid var(--control-rule);border-radius:var(--radius-control);color:var(--ink);background:var(--bg)}
.information-page textarea{min-height:140px;resize:vertical}
.information-page .field-help{font-size:13px;margin-top:8px;color:var(--muted)}
.information-page fieldset{border:0;padding:0;margin:0;min-width:0}
.information-page #draft-preview{border-top:2px solid var(--pitch);padding-top:12px}
.information-page #draft-body{font-size:14px;min-height:230px}
.information-page #draft-heading:focus{outline:none}
.information-page #draft-status{margin:20px 0;min-height:24px}
.information-page .email-address{overflow-wrap:anywhere;font-weight:700}
select:focus-visible{outline:3px solid var(--pitch);outline-offset:4px}
[hidden]{display:none!important}
@media(min-width:640px){.demo-answers{grid-template-columns:1fr 1fr}}

/* Keep the example and its next action together; extra rules stay available. */
.demo-play { margin: 20px 0 24px; }
.information-page .demo-play .button { margin: 0 0 10px; }
.demo-play p { margin: 0; max-width: 52ch; color: var(--muted); }
.page-details { border-top: 1px solid var(--rule); padding-top: 8px; }
.page-details > p, .page-details > ul { margin: 0 0 18px; font-size: 14px; line-height: 1.55; }
.information-page .example-note { font-size: 12px; line-height: 1.5; margin-block: 12px 16px; }
@media(max-width:639px) {
 .information-page { padding-top: 20px; }
 .information-page > h1 { margin-bottom: 16px; font-size: 36px; }
 .information-page .demo-question { padding: 18px; margin-block: 20px 12px; }
 .demo-question h2 { font-size: 24px; }
 .demo-question p { font-size: 14px; margin-bottom: 0; }
 .demo-answers { gap: 8px; margin-block: 12px; }
}