:root{--bg:#fbf8f1;--ink:#1d2823;--muted:#5d6b63;--accent:#2a7a55;--accent-d:#1d5c3f;--warm:#e8833a;--card:#ffffff;--line:#e6e1d3;--soft:#eef5ef;--shadow:0 6px 24px rgba(30,60,45,.08)}
@media (prefers-color-scheme:dark){:root{--bg:#121815;--ink:#e9eeeb;--muted:#9aa9a0;--accent:#6fcf9d;--accent-d:#9de0bd;--warm:#f0a064;--card:#1a221e;--line:#29342e;--soft:#1b2a22;--shadow:0 6px 24px rgba(0,0,0,.35)}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.75 Georgia,'Times New Roman',serif}
a{color:var(--accent)}a:hover{color:var(--accent-d)}
.wrap{max-width:760px;margin:0 auto;padding:0 18px}
.wide{max-width:1040px;margin:0 auto;padding:0 18px}
header.site{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
header.site .wrap{max-width:1040px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 18px}
.brand{font:800 1.3rem system-ui,sans-serif;text-decoration:none;color:var(--accent);letter-spacing:-.01em}
.brand:before{content:"\1F33E";margin-right:6px}
nav a{font:600 .95rem system-ui,sans-serif;margin-left:18px;text-decoration:none;color:var(--ink)}
nav a:hover{color:var(--accent)}
.progress{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--accent),var(--warm));z-index:50}
h1{font:800 2.1rem/1.2 system-ui,sans-serif;margin:32px 0 10px;letter-spacing:-.02em}
h2{font:700 1.45rem/1.3 system-ui,sans-serif;margin:36px 0 8px}
h3{font:700 1.1rem system-ui,sans-serif}
.lede{color:var(--muted);font-size:1.15rem}
.meta{color:var(--muted);font:.9rem system-ui,sans-serif}
.pill{display:inline-block;font:700 .72rem system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;background:var(--soft);color:var(--accent);padding:3px 10px;border-radius:99px}
.hero{background:linear-gradient(135deg,#1f6b49 0%,#2f8f64 55%,#e8833a 140%);color:#fff;padding:64px 0 72px}
.hero h1{font-size:2.8rem;margin:10px 0 14px;max-width:700px}
.hero p{font:1.2rem/1.6 system-ui,sans-serif;max-width:620px;opacity:.95;margin:0 0 24px}
.hero .pill{background:rgba(255,255,255,.18);color:#fff}
.btn{display:inline-block;font:700 1rem system-ui,sans-serif;background:#fff;color:#1d5c3f;padding:13px 24px;border-radius:10px;text-decoration:none;margin:0 10px 10px 0;border:0;cursor:pointer}
.btn:hover{transform:translateY(-1px);color:#1d5c3f}
.btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7)}
.btn.ghost:hover{color:#fff;background:rgba(255,255,255,.12)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:-36px auto 0;position:relative}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font:800 2rem system-ui,sans-serif;color:var(--accent)}
.stat span{font:.9rem system-ui,sans-serif;color:var(--muted)}
.calc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;margin:40px 0;box-shadow:var(--shadow)}
.calc h2{margin-top:0}
.calc input[type=range]{width:100%;accent-color:var(--accent)}
.calc .out{font:800 2.4rem system-ui,sans-serif;color:var(--accent);margin:6px 0}
.calc .row{display:flex;justify-content:space-between;font:.9rem system-ui,sans-serif;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px}
.chip{font:600 .9rem system-ui,sans-serif;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:7px 16px;border-radius:99px;cursor:pointer}
.chip.on,.chip:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.tile{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:14px;padding:20px;box-shadow:var(--shadow);transition:transform .15s}
.tile:hover{transform:translateY(-3px)}
.tile .ico{font-size:2rem}
.tile h3{margin:8px 0 6px;font-size:1.12rem;line-height:1.35}
.tile h3 a{text-decoration:none;color:var(--ink)}
.tile h3 a:hover{color:var(--accent)}
.tile p{font:.95rem/1.55 system-ui,sans-serif;color:var(--muted);margin:0 0 10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:16px 0}
.note{border-left:4px solid var(--accent);background:var(--soft);padding:12px 16px;font-size:.95rem;margin:28px 0;border-radius:0 8px 8px 0}
.takeaways{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:6px 20px 10px;margin:22px 0}
.takeaways h2{margin:12px 0 4px;font-size:1.1rem;color:var(--accent)}
.takeaways ul{margin:6px 0;padding-left:20px}
table{border-collapse:collapse;width:100%;font:.95rem system-ui,sans-serif;margin:16px 0;background:var(--card);border-radius:10px;overflow:hidden}
th{background:var(--soft);text-align:left}
th,td{border-bottom:1px solid var(--line);padding:9px 12px;text-align:left}
.related{margin-top:44px;border-top:1px solid var(--line);padding-top:8px}
.cta{background:linear-gradient(135deg,var(--soft),var(--card));border:1px solid var(--line);border-radius:14px;padding:22px;margin:36px 0;text-align:center}
footer.site{border-top:1px solid var(--line);margin-top:64px;padding:28px 0;font:.9rem system-ui,sans-serif;color:var(--muted)}
footer.site a{margin-right:14px;color:var(--muted)}
.consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;max-width:760px;margin:0 auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 10px 40px rgba(0,0,0,.25);font:.92rem/1.5 system-ui,sans-serif}
.consent p{margin:0 0 12px}
.consent button{font:700 .92rem system-ui,sans-serif;padding:10px 18px;border-radius:9px;border:1px solid var(--accent);cursor:pointer;margin-right:8px;background:var(--accent);color:#fff}
.consent button.alt{background:transparent;color:var(--accent)}
@media (max-width:640px){body{font-size:17px}h1{font-size:1.7rem}.hero h1{font-size:2rem}.hero{padding:44px 0 56px}.stats{grid-template-columns:1fr;margin-top:-28px}nav a{margin-left:12px}}
