:root { color-scheme: light; --ink:#15212b; --muted:#52616d; --paper:#f6f2ea; --panel:#fffdf8; --line:#d7d0c4; --accent:#0d6b5f; --accent-dark:#084a42; --warm:#a83f2d; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:system-ui,-apple-system,"Hiragino Sans","Yu Gothic",sans-serif; line-height:1.75; }
.hero, main, footer { width:min(920px,calc(100% - 40px)); margin-inline:auto; }
.hero { padding:88px 0 64px; }
.eyebrow { color:var(--accent); font-weight:700; letter-spacing:.08em; }
h1 { max-width:720px; margin:12px 0 20px; font-size:clamp(2.5rem,7vw,5rem); line-height:1.05; letter-spacing:-.04em; }
.lead { max-width:700px; color:var(--muted); font-size:1.15rem; }
.download { display:inline-block; margin-top:22px; padding:14px 24px; border-radius:8px; color:white; background:var(--accent); font-weight:800; text-decoration:none; }
.download:hover,.download:focus-visible { background:var(--accent-dark); }
.file-note { color:var(--muted); font-size:.9rem; }
main { padding-bottom:56px; }
section { padding:48px 0; border-top:1px solid var(--line); }
h2 { margin:0 0 24px; font-size:clamp(1.65rem,4vw,2.3rem); }
h3 { margin-top:8px; line-height:1.4; }
.comparison { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.comparison article,.proof { padding:26px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.label { display:inline-block; margin:0; padding:2px 10px; border-radius:99px; font-size:.82rem; font-weight:800; }
.before { color:var(--warm); background:#f7e8e4; }
.after { color:var(--accent); background:#ddf2ed; }
.steps { display:grid; gap:14px; padding:0; list-style:none; counter-reset:steps; }
.steps li { display:grid; grid-template-columns:180px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); counter-increment:steps; }
.steps strong::before { content:"0" counter(steps) "  "; color:var(--accent); }
.proof { border-top:1px solid var(--line); }
code { padding:2px 6px; background:#ece7dc; border-radius:4px; }
.text-link { color:var(--accent-dark); font-weight:700; }
footer { padding:28px 0 48px; color:var(--muted); border-top:1px solid var(--line); }
@media (max-width:680px) { .hero{padding-top:56px}.comparison{grid-template-columns:1fr}.steps li{grid-template-columns:1fr;gap:4px} }