:root { --bg:#f7f6f1; --ink:#132724; --muted:#59716c; --line:#d6e2dc; --green:#155c48; --lime:#c8f075; --card:#fffefb; --cream:#ffecd0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.65; }
a { color:var(--green); }
a:focus-visible, button:focus-visible { outline:3px solid #4a9c7a; outline-offset:3px; }
.container { max-width:1060px; margin:0 auto; padding:0 24px; }
header { background:#fffefb; border-bottom:1px solid var(--line); position:sticky; z-index:3; top:0; }
.nav { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { font-size:1.03rem; letter-spacing:-.03em; color:var(--ink); font-weight:800; text-decoration:none; }
.brand-mark { display:inline-grid; place-items:center; height:29px; width:29px; background:var(--green); color:white; border-radius:8px; margin-right:8px; }
nav { display:flex; gap:25px; align-items:center; }
nav a { font-weight:600; text-decoration:none; font-size:.89rem; }
nav a:hover { text-decoration:underline; }
.hero { padding:88px 0 76px; background:radial-gradient(circle at 86% 21%, #d8f2c4 0%,transparent 30%), linear-gradient(130deg,#f7f6f1,#eaf3e9); }
.eyebrow { color:var(--green); font-size:.77rem; text-transform:uppercase; letter-spacing:.13em; font-weight:850; }
h1 { font-size:clamp(2.6rem,5.3vw,4.75rem); line-height:1.08; letter-spacing:-.06em; max-width:920px; margin:18px 0 24px; }
h2 { font-size:clamp(1.8rem,3.3vw,2.6rem); line-height:1.18; letter-spacing:-.045em; margin:0 0 20px; }
h3 { font-size:1.16rem; letter-spacing:-.023em; margin:0 0 10px; }
.lede { max-width:710px; color:#3b5550; font-size:1.18rem; margin:0 0 32px; }
.buttons { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--green); padding:14px 21px; text-align:center; border:1px solid var(--green); border-radius:10px; color:white; font-weight:750; text-decoration:none; transition:transform .15s ease; }
.btn:hover { transform:translateY(-1px); }
.btn.secondary { background:transparent; color:var(--green); }
.helper { font-size:.86rem; color:var(--muted); margin-top:16px; }
.section { padding:68px 0; }
.section.alt { background:#eff3ed; border-block:1px solid var(--line); }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px; }
.card p { color:var(--muted); margin:0; }
.num { font-size:.76rem; font-weight:900; color:var(--green); background:#dcf5dc; display:inline-block; border-radius:100px; padding:4px 11px; margin-bottom:16px; }
.feature { background:var(--green); color:white; display:grid; grid-template-columns:1.3fr .7fr; gap:36px; border-radius:20px; padding:39px; }
.feature p { color:#d4e6df; }
.feature h2 { margin-top:10px; }
.feature .btn { background:var(--lime); color:var(--ink); border-color:var(--lime); }
.sample { background:#ffffff13; border:1px solid #ffffff38; border-radius:14px; padding:22px; font-size:.91rem; white-space:pre-wrap; line-height:1.55; }
.tag { display:inline-block; background:var(--cream); border-radius:99px; padding:5px 12px; font-size:.77rem; font-weight:800; }
.article { max-width:780px; margin:0 auto; padding:70px 24px; }
.article h1 { font-size:clamp(2.5rem,4.4vw,3.8rem); }
.article h2 { margin-top:43px; font-size:1.75rem; }
.article p, .article li { color:#38534d; }
.article li { margin-bottom:9px; }
.article ul, .article ol { padding-left:23px; }
.callout { background:#e4f2dd; border-left:4px solid var(--green); padding:18px 20px; border-radius:0 10px 10px 0; margin:24px 0; }
.callout p { margin:0; }
footer { background:#142b25; color:#e2ebe5; padding:35px 0; }
footer .footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; font-size:.86rem; }
footer a { color:#d2efb7; }
.small { font-size:.88rem; color:var(--muted); }
.disclosure { font-size:.85rem; color:var(--muted); max-width:780px; margin-top:19px; }
@media(max-width:750px) { .nav { padding:15px 0; align-items:flex-start; } nav { gap:12px; flex-wrap:wrap; justify-content:flex-end; } nav a { font-size:.82rem; } .hero { padding:62px 0; } .grid { grid-template-columns:1fr; } .feature { grid-template-columns:1fr; padding:27px; } .section { padding:48px 0; } }
@media(max-width:420px) { .nav { flex-direction:column; align-items:flex-start; } .brand { font-size:.97rem; } nav { gap:18px; } .container { padding:0 18px; } }