/* Playgrounds — shared styles for SEO/content pages. Landing page keeps its own inline CSS. */
:root{--bone:#F7F2E9; --linen:#F4EEE1; --sand:#ECE3D2; --stone:#7E7361; --ink2:#6F6557; --bark:#2C2A22;
--forest:#182D09; --moss:#3D5E24; --leaf:#5C8A3A; --sage:#A9C195; --wash:rgba(61,94,36,.10);
--hair:rgba(44,42,34,.12); --char:#1E1F1B}
/* --ink2 is the AA-safe secondary for body-adjacent text on light; --stone stays for large/decorative only */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Hanken Grotesk',system-ui,sans-serif; background:var(--bone); color:var(--bark); line-height:1.6}
.wrap{max-width:1180px; margin:0 auto; padding:0 40px}
.mono{font-family:'Geist Mono',ui-monospace,monospace}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--moss); outline-offset:3px; border-radius:4px}

nav{position:sticky; top:0; z-index:40; background:rgba(247,242,233,.88); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%); border-bottom:1px solid var(--hair)}
nav .wrap{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; gap:26px}
nav img{height:28px; display:block}
nav a{font-size:13.5px; color:var(--bark); opacity:.85; text-decoration:none; transition:opacity .3s}
nav a:hover{opacity:1}
nav .logo{justify-self:start}
nav .navlinks{display:flex; align-items:center; justify-content:center; gap:26px}
nav .navcta{display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; justify-self:end}
.btn{display:inline-flex; align-items:center; gap:.5em; font-size:14px; font-weight:500; border-radius:999px;
padding:.6em 1.35em; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .3s, box-shadow .3s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--forest); color:var(--bone); box-shadow:0 4px 16px rgba(24,45,9,.18)}
.btn.ghost{border-color:var(--hair); color:var(--bark); background:transparent}

.page{padding:72px 0 96px}
.page .wrap{max-width:820px}
.crumbs{font-family:'Geist Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink2); margin-bottom:34px}
.crumbs a{color:var(--moss); text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.eyebrow{font-family:'Geist Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--moss); margin-bottom:16px; display:flex; align-items:center; gap:12px}
.eyebrow::after{content:''; flex:0 0 44px; height:1px; background:var(--hair)}
h1{font-weight:600; font-size:clamp(30px,4.2vw,42px); letter-spacing:-.03em; line-height:1.12}
h1 em{font-style:normal; color:var(--forest)}
.lead{margin-top:16px; font-size:16.5px; color:var(--ink2); max-width:58ch}
article h2{font-weight:600; font-size:clamp(21px,2.6vw,27px); letter-spacing:-.02em; margin:52px 0 14px}
article h3{font-weight:600; font-size:16.5px; margin:26px 0 8px}
article p{font-size:15.5px; max-width:68ch; margin-bottom:14px}
article ul{margin:0 0 14px 1.2em; max-width:66ch}
article li{font-size:15.5px; margin-bottom:8px}
article li b{font-weight:600}
article a{color:var(--moss); text-decoration:underline; text-decoration-color:rgba(61,94,36,.35); text-underline-offset:3px}
article a:hover{text-decoration-color:var(--moss)}

.steps{counter-reset:step; display:grid; gap:0; margin:22px 0 8px; border-top:1px solid var(--hair)}
.step{counter-increment:step; display:grid; grid-template-columns:64px 1fr; gap:18px; padding:22px 0; border-bottom:1px solid var(--hair)}
.step::before{content:'0' counter(step); font-family:'Geist Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.14em; color:var(--moss); padding-top:4px}
.step b{display:block; font-size:16.5px; font-weight:600; margin-bottom:4px}
.step p{margin:0}

.callout{background:var(--linen); border:1px solid var(--hair); border-radius:14px; padding:22px 26px; margin:22px 0}
.callout p{margin:0}
.callout .punch{font-weight:600; color:var(--forest)}

figure.mock{background:rgba(255,255,255,.45); border:1px solid var(--hair); border-radius:16px; padding:22px; margin:30px 0}
.mockbar{display:flex; gap:5px; margin-bottom:16px}
.mockbar i{width:7px; height:7px; border-radius:99px; background:var(--sand)}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.kpi{background:var(--linen); border:1px solid var(--hair); border-radius:10px; padding:12px 14px}
.kpi .kl{font-family:'Geist Mono',ui-monospace,monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2)}
.kpi .kv{font-size:19px; font-weight:600; letter-spacing:-.02em; margin-top:3px}
.mrows{margin-top:14px; display:grid; gap:8px}
.mrow{display:grid; grid-template-columns:130px 1fr; align-items:center; gap:12px}
.mrow .ml{font-family:'Geist Mono',ui-monospace,monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2)}
.mrow .mb{height:8px; border-radius:99px; background:var(--wash); overflow:hidden}
.mrow .mb i{display:block; height:100%; border-radius:99px; background:var(--leaf)}
figcaption{font-family:'Geist Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2); margin-top:14px}

.faq{margin-top:10px; border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair); padding:2px 0}
.faq summary{font-size:15.5px; font-weight:600; padding:16px 0; cursor:pointer; list-style-position:outside}
.faq p{font-size:15px; max-width:66ch; margin:0 0 16px; color:var(--bark)}

.ctaband{background:var(--forest); color:#F0EADD; border-radius:18px; padding:38px 40px; margin:56px 0 8px}
.ctaband p{font-size:16px; max-width:56ch; margin:8px 0 22px; color:rgba(240,234,221,.8)}
.ctaband b{font-size:21px; font-weight:600; letter-spacing:-.02em}
.ctaband .btn.primary{background:var(--sage); color:var(--char); box-shadow:none}
.ctaband .btn.ghost{border-color:rgba(240,234,221,.3); color:#F0EADD}
.related{margin-top:34px}
.related .rt{font-family:'Geist Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink2); margin-bottom:10px}
.related a{display:block; width:fit-content; font-size:14.5px; color:var(--moss); text-decoration:none; padding:4px 0}
.related a:hover{text-decoration:underline}

footer{background:var(--char); margin-top:80px; padding:44px 0 34px; font-family:'Geist Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase}
footer .fcols{display:flex; flex-wrap:wrap; gap:56px}
footer .fcol{display:grid; gap:9px; align-content:start}
footer .fcol b{color:rgba(247,242,233,.85); font-weight:500; margin-bottom:3px}
footer .fcol a{color:rgba(240,234,221,.68); text-decoration:none}
footer .fcol a:hover{color:var(--bone)}
footer .fbar{display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:36px; padding-top:24px; border-top:1px solid rgba(247,242,233,.15); color:rgba(247,242,233,.55)}
footer .fbar img{height:15px}
footer .fbar a{color:inherit; text-decoration:none}
footer .fbar a:hover{color:var(--bone)}

@media(max-width:960px){nav .wrap{gap:18px} nav .navlinks{gap:18px}}
@media(max-width:640px){
nav .navlinks{display:none}
.wrap{padding:0 22px}
.page{padding:48px 0 72px}
.kpis{grid-template-columns:1fr 1fr}
.step{grid-template-columns:44px 1fr; gap:12px}
.ctaband{padding:28px 24px}
footer .fcols{gap:32px}
footer .fbar{flex-direction:column; align-items:flex-start; gap:12px}
}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}