:root{color-scheme:light dark;--bg:#fff;--grouped:#f2f2f7;--card:#fff;--label:#111114;--label2:#6c6c72;--sep:rgba(60,60,67,.18);--fill:#ebebf0;--user:#f0f0f4;--tint:#12804a;--on-tint:#fff;--danger:#ff3b30;--blur:saturate(180%) blur(22px);
--font:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,system-ui,sans-serif;--spring:cubic-bezier(.2,.9,.25,1)}
@media(prefers-color-scheme:dark){:root{--bg:#131314;--grouped:#000;--card:#1c1c1e;--label:#f5f5f7;--label2:#9a9aa1;--sep:rgba(120,120,128,.36);--fill:#2c2c2e;--user:#2a2a2d;--tint:#34d17d;--on-tint:#04210f}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;cursor:default}
body{margin:0;background:var(--bg);color:var(--label);font:400 1.0625rem/1.47 var(--font);-webkit-font-smoothing:antialiased}
a,a:any-link,button,label,summary,select,[role=button]{cursor:default}
input,textarea{cursor:text}
a{color:var(--tint);text-decoration:none}
:focus-visible{outline:3px solid color-mix(in srgb,var(--tint) 55%,transparent);outline-offset:2px;border-radius:.5rem}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem}
header.site{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.brand{font-weight:700;font-size:1.25rem;letter-spacing:-.02em;color:var(--label)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 1.35rem;border-radius:999px;background:var(--tint);color:var(--on-tint);font:600 1.0625rem var(--font);border:0;transition:transform .18s var(--spring),opacity .18s}
.btn:active{transform:scale(.96);opacity:.85}
.btn.ghost{background:var(--fill);color:var(--label)}
.hero{display:grid;gap:2rem;padding:2.5rem 0 3rem}
h1{font-size:clamp(2.3rem,8vw,3.8rem);line-height:1.04;margin:0 0 1rem;letter-spacing:-.03em;font-weight:800}
h2{font-size:1.65rem;letter-spacing:-.025em;margin:0 0 .6rem;font-weight:700}
h3{font-size:1.1rem;margin:0 0 .25rem}
.lead{font-size:1.25rem;color:var(--label2);max-width:34rem;margin:0 0 1.5rem}
.chat{background:var(--grouped);border-radius:1.75rem;padding:1.1rem;display:grid;gap:.6rem;max-width:26rem}
.chat p{margin:0}.chat .me{justify-self:end;background:var(--user);border-radius:1.4rem;padding:.6rem 1rem;max-width:85%}
.chat .padi{padding:.2rem .25rem}.chat small{color:var(--label2)}
section.block{padding:2.25rem 0}
.cols{display:grid;gap:.9rem}
ol.cols{list-style:none;padding:0;margin:0;counter-reset:s}
ol.cols li,.cols>div{background:var(--grouped);border-radius:1.4rem;padding:1.15rem 1.2rem}
ol.cols li{counter-increment:s}
ol.cols li::before{content:counter(s);display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;margin-bottom:.55rem;border-radius:50%;background:var(--tint);color:var(--on-tint);font-weight:700;font-size:.95rem}
ol.cols li strong{display:block}
section.block p{color:var(--label2);margin:.2rem 0 0}
footer{padding:2rem 0 3rem;color:var(--label2);font-size:.9rem}
.sk{position:relative;display:block;overflow:hidden;background:var(--fill);border-radius:.6rem}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:shimmer 1.25s infinite}
@media(prefers-color-scheme:dark){.sk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}}
@keyframes shimmer{to{transform:translateX(100%)}}
@media(min-width:48rem){.hero{grid-template-columns:1.2fr 1fr;align-items:center}.cols{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.hero>div:first-child>*{animation:rise .7s var(--spring) both}.hero>div:first-child>.lead{animation-delay:.08s}.hero>div:first-child>.btn{animation-delay:.16s}
.chat>*{animation:rise .6s var(--spring) both}.chat>:nth-child(2){animation-delay:.25s}.chat>:nth-child(3){animation-delay:.5s}.chat>:nth-child(4){animation-delay:.75s}
.cols>*{animation:rise .6s var(--spring) both}.cols>:nth-child(2){animation-delay:.08s}.cols>:nth-child(3){animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}