
:root{--ink:#17332f;--ink2:#244741;--paper:#fbfcf8;--white:#fff;--muted:#60706c;--line:#d9e4de;--soft:#eef5f1;--warm:#fff4e9;--cta:#c86336;--cta2:#a44b27}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:#17211f;font:16px/1.72 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
a{color:#27675d}.wrap{max-width:1180px;margin:auto;padding:0 22px}.site-header{position:sticky;top:0;z-index:50;background:rgba(23,51,47,.98);color:#fff;box-shadow:0 1px 0 #ffffff17}
.header-inner{min-height:72px;display:flex;align-items:center;gap:22px}.brand{color:#fff;text-decoration:none;font-size:1.28rem;font-weight:900;letter-spacing:-.03em;white-space:nowrap}.brand b{color:#f3af87}.nav{display:flex;gap:16px;align-items:center;margin-left:auto}.nav a{color:#e9f0ed;text-decoration:none;font-size:.9rem}.header-cta{background:var(--cta)!important;color:#fff!important;padding:10px 14px;border-radius:8px;font-weight:800}
.hero{background:linear-gradient(135deg,#eaf4ef,#fff6ed);padding:68px 0 54px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-weight:850;color:#2d6d63;font-size:.76rem}.hero h1,.article h1{color:var(--ink);font-size:clamp(2.15rem,5vw,4.6rem);line-height:1.02;letter-spacing:-.05em;margin:.26em 0}.lede{font-size:1.18rem;max-width:790px;color:#42534f}
.btn{display:inline-block;background:var(--cta);color:#fff;text-decoration:none;border-radius:9px;padding:13px 18px;font-weight:850;margin:7px 8px 7px 0}.btn:hover{background:var(--cta2)}.btn.alt{background:#2f6f65}.micro{font-size:.8rem;color:var(--muted)}
main{padding:40px 0}.layout{display:grid;grid-template-columns:minmax(0,780px) 300px;gap:38px}.article h2{color:var(--ink);font-size:1.7rem;line-height:1.22;margin-top:2.15em;letter-spacing:-.02em}.article h3{color:var(--ink2);font-size:1.16rem;margin-top:1.6em}.article p{margin:1em 0}.article ul,.article ol{padding-left:1.4rem}.article li{margin:.5em 0}
.notice{background:#fff7df;border:1px solid #e6d39b;border-radius:11px;padding:15px 17px;margin:20px 0}.affiliate-note{background:#fff1e7;border:1px solid #f0c4aa}.toc{background:#f1f6f3;border-left:4px solid #2f6f65;padding:16px 19px;margin:24px 0}.toc a{display:block;margin:3px 0}
.sidebar-card{position:sticky;top:94px;background:linear-gradient(180deg,#f0f6f3,#fff7ef);border:1px solid var(--line);border-radius:15px;padding:21px;box-shadow:0 10px 28px #17332f0d}.sidebar-card h3{margin:.2em 0;color:var(--ink);font-size:1.24rem}.sidebar-card .btn{display:block;text-align:center;margin:12px 0}
.crumbs{font-size:.84rem;color:var(--muted);margin-bottom:20px}.tag{display:inline-block;background:#eaf3ef;color:#2b675e;border-radius:999px;padding:4px 9px;font-size:.75rem;font-weight:800}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:21px}.card h3{margin:.1em 0 .6em;color:var(--ink)}.cluster{margin:46px 0}
.sourcebox{background:#fff;border:1px solid var(--line);border-radius:13px;padding:19px;margin-top:32px}.sourcebox li{margin:.55em 0}
.footer{background:#102622;color:#dce8e4;padding:45px 0 80px;margin-top:55px}.footer a{color:#fff}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.mobile-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;background:#fff;border-top:1px solid var(--line);padding:9px 12px}.mobile-cta .btn{display:block;text-align:center;margin:0}
.modal-backdrop{position:fixed;inset:0;background:#102622d9;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}.modal-backdrop[hidden]{display:none}.modal{max-width:650px;background:#fff;border-radius:18px;padding:28px;box-shadow:0 25px 80px #0007}.modal-close{float:right;border:0;background:none;font-size:1.5rem;cursor:pointer}
@media(max-width:930px){.nav a:not(.header-cta){display:none}.layout{grid-template-columns:1fr}.sidebar-card{position:static}.grid,.footer-grid{grid-template-columns:1fr}.mobile-cta{display:block}.footer{padding-bottom:110px}}
@media(max-width:520px){.wrap{padding:0 16px}.header-inner{min-height:64px}.brand{font-size:1.1rem}.header-cta{font-size:.78rem;padding:9px 10px}.hero{padding:44px 0 38px}}
