/* Marketing landing (/www and "/" on the www. host). Own sheet, not app.css:
   the app's utility CSS is the wrong voice for a brand surface.
   System serif stack for display type — no font CDN (GDPR: no third-party requests). */
*{box-sizing:border-box}
:root{--cream:oklch(96.5% .02 95);--ink:oklch(25% .015 90);--green:oklch(33% .07 152);--green-deep:oklch(27% .06 152);--leaf:oklch(50% .11 152)}
body{margin:0;font:16px/1.6 system-ui,sans-serif;background:var(--cream);color:var(--ink)}
h1,h2,.num{font-family:"Iowan Old Style",Georgia,"Times New Roman",serif;font-weight:600}
a{color:var(--leaf)}
:where(a,button):focus-visible{outline:2px solid currentColor;outline-offset:3px}
.hero{background:var(--green);color:var(--cream)}
.hero a{color:inherit}
nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;max-width:64rem;margin:0 auto;padding:1.1rem 1.25rem}
nav .wm{font-weight:650;font-size:1.05rem;text-decoration:none}
nav .side{display:flex;gap:1rem;align-items:center;font-size:.85rem}
nav .side a{text-decoration:none;opacity:.85}
nav .side a:hover{opacity:1}
.hero-in{max-width:64rem;margin:0 auto;padding:clamp(2rem,6vw,4.5rem) 1.25rem clamp(3rem,8vw,5.5rem);display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center}
@media(min-width:52rem){.hero-in{grid-template-columns:1.15fr .85fr}}
h1{font-size:clamp(2.15rem,5.5vw,3.5rem);line-height:1.12;letter-spacing:-.015em;margin:0;max-width:16ch}
.sub{margin:1.2rem 0 1.8rem;font-size:1.05rem;opacity:.88;max-width:44ch}
a.cta{display:inline-block;background:var(--cream);color:var(--green);font-weight:650;font-size:1.05rem;padding:.85rem 1.6rem;border-radius:12px;text-decoration:none}
.cta:hover{background:oklch(92% .035 95)}
.note{display:block;margin-top:.7rem;font-size:.85rem;opacity:.7}
.chat{margin:0;background:oklch(98.5% .008 95);color:var(--ink);border-radius:18px;padding:1.1rem 1.1rem .8rem;box-shadow:0 18px 50px oklch(15% .05 152/.45);max-width:23rem;width:100%;justify-self:center}
.msg{max-width:88%;width:fit-content;padding:.55rem .85rem;border-radius:15px;margin:.5rem 0;font-size:.92rem;line-height:1.45}
.msg.u{background:oklch(90% .055 152);margin-left:auto;border-bottom-right-radius:4px}
.msg.a{background:oklch(93.5% .012 95);border-bottom-left-radius:4px}
.chat figcaption{font-size:.75rem;color:oklch(54% .015 150);text-align:center;margin-top:.6rem}
main{max-width:64rem;margin:0 auto;padding:0 1.25rem}
h2{font-size:clamp(1.5rem,3.2vw,2.15rem);letter-spacing:-.01em;margin:0 0 clamp(1.2rem,3vw,2rem)}
section{padding:clamp(2.5rem,6vw,4.5rem) 0}
.why ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.2rem,3vw,2rem)}
@media(min-width:44rem){.why ul{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,4rem)}}
.why li{display:flex;gap:.9rem;align-items:flex-start}
.why .ic{font-size:1.5rem;line-height:1.3}
.why p,.how p{margin:0;max-width:52ch}
.how ol{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
@media(min-width:44rem){.how ol{grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem)}}
.how .num{display:block;font-size:2.6rem;line-height:1;color:var(--leaf);margin-bottom:.5rem}
.band{background:var(--green-deep);color:var(--cream);text-align:center;padding:clamp(3rem,7vw,4.5rem) 1.25rem}
.band h2{margin-bottom:1.6rem}
footer{max-width:64rem;margin:0 auto;padding:1.4rem 1.25rem 2rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.82rem;color:oklch(50% .015 150)}
footer a{color:inherit}
@media(prefers-reduced-motion:no-preference){
.hero-in>*{animation:up .7s cubic-bezier(.16,1,.3,1) both}
.hero-in>:nth-child(2){animation-delay:.15s}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}