:root { --ink:#17243a; --paper:#fffdf6; --warm:#f6f0e5; --coral:#c96745; --green:#2a6759; }
* { box-sizing:border-box; }
body { margin:0; background:var(--warm); color:var(--ink); font-family:Arial, sans-serif; line-height:1.5; }
main { width:min(100%, 860px); margin:auto; padding:28px 18px 72px; }
section, .intro { background:var(--paper); border:1px solid #ddd4c4; border-radius:18px; padding:24px; margin:20px 0; }
.intro { border-top:8px solid var(--coral); }
.eyebrow { color:var(--coral); font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:.82rem; }
h1 { max-width:19ch; margin:.2em 0; font-size:clamp(2.1rem, 8vw, 4rem); line-height:1.05; }
h2 { margin-top:0; font-size:clamp(1.35rem, 5vw, 2rem); }
.lede { font-size:1.25rem; font-weight:700; }
.promise-map { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:18px 0; color:#173e35; font-size:.95rem; }
.promise-map span:not([aria-hidden]) { background:#eaf3ef; border-radius:999px; padding:8px 12px; }
.promise-map strong { color:var(--coral); font-size:.78em; letter-spacing:.04em; }
.neutral-cta { display:inline-block; margin:2px 0 14px; padding:12px 16px; border-radius:10px; background:var(--green); color:var(--paper); font-weight:700; text-decoration:none; }
.neutral-cta:hover, .neutral-cta:focus { background:#173e35; }
.scope { color:#52616b; font-size:.92rem; }
.manga { display:block; width:100%; height:auto; border:10px solid #111; }
.recap { border-left:8px solid var(--green); font-size:1.12rem; }
.steps { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; padding:0; list-style:none; counter-reset:step; }
.steps li { counter-increment:step; background:#eaf3ef; padding:16px; border-radius:12px; }
.steps li::before { content:counter(step); display:block; color:var(--coral); font-size:1.4rem; font-weight:700; }
.steps span { display:block; margin-top:6px; }
.checklist ul { padding-left:1.3em; }
.checklist li { margin:.55em 0; }
.next { background:#17243a; color:var(--paper); }
@media (max-width:560px) { main { padding:12px 0 42px; } section, .intro { border-radius:0; margin:10px 0; padding:20px; } .steps { grid-template-columns:1fr; } .manga { border-width:4px; } .promise-map { align-items:flex-start; flex-direction:column; } .promise-map span[aria-hidden="true"] { margin-left:18px; transform:rotate(90deg); } }