:root{--paper:#F2F5F4;--ink:#12202A;--slate:#4B5B66;--rule:#D3DCDA;--signal:#0B7A6B;--tick:#4FB6E8;--amber:#C9821A;--bubble:#D5F0DE;--night:#10222B;--night2:#1A3441}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 "Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;line-height:1.1;margin:0;letter-spacing:-.02em}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--tick);outline-offset:3px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header.site{padding:20px 0}
header.site .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.brand{font:800 1.15rem "Bricolage Grotesque",sans-serif;text-decoration:none;letter-spacing:-.02em}
nav{display:flex;gap:22px;flex:1;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--slate);padding:2px 0;border-bottom:2px solid transparent}
nav a:hover{color:var(--ink)}nav a[aria-current=page]{color:var(--ink);border-color:var(--signal)}
.gh{font-weight:600;text-decoration:none;border:1.5px solid var(--ink);padding:6px 14px;border-radius:6px}
.gh:hover{background:var(--ink);color:var(--paper)}
/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:56px 0 72px}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.1rem);font-weight:800;max-width:14ch}
.hero p.lead{font-size:1.2rem;color:var(--slate);max-width:34em;margin:22px 0 30px}
.cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.btn{background:var(--ink);color:var(--paper);padding:13px 22px;border-radius:7px;text-decoration:none;font-weight:600}
.btn:hover{background:var(--signal)}
.link{font-weight:600;text-underline-offset:4px}
.note{margin-top:26px;font-size:.95rem;color:var(--slate);max-width:36em}
/* demo */
.demo{background:var(--night);color:#E8F3EF;border-radius:22px 22px 22px 4px;padding:18px;box-shadow:0 24px 50px -24px rgba(16,34,43,.6)}
.demo .chat{background:var(--night2);border-radius:14px;padding:14px}
.bubble{background:var(--bubble);color:#0E1A17;border-radius:12px 2px 12px 12px;padding:9px 12px 6px;font-size:.92rem;line-height:1.45;margin-left:auto;max-width:92%}
.bubble b{font-weight:700}.bubble .t{display:block;text-align:right;font-size:.72rem;color:#5F7A70}.bubble .t i{color:#2C9BD0;font-style:normal}
.queue{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px}
.queue li{display:flex;justify-content:space-between;gap:12px;padding:8px 6px;font-size:.9rem;border-radius:6px}
.queue li span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st{font-size:.8rem;white-space:nowrap;color:#8CA3AD}
.queue li[data-s=sending]{background:rgba(255,255,255,.06)}
.queue li[data-s=sending] .st{color:#F0B25A}
.queue li[data-s=sent] .st{color:var(--tick)}
.demo .cap{margin:14px 4px 2px;font-size:.82rem;color:#8CA3AD}
.demo .meter{display:flex;justify-content:space-between;margin:12px 4px 0;font-size:.85rem;color:#C5D6DD}
/* rows */
section.block{padding:8px 0 64px}
section.block>h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:12px}
.rows{display:grid}
.row{display:grid;grid-template-columns:240px 1fr;gap:12px 40px;padding:24px 0;border-top:1px solid var(--rule)}
.row h3{font-size:1.2rem}
.row p{margin:0;max-width:60ch;color:var(--slate)}
.row p+p{margin-top:10px}
/* page head */
.pagehead{padding:36px 0 40px}
.pagehead h1{font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:800;max-width:18ch}
.pagehead p{font-size:1.15rem;color:var(--slate);max-width:44em;margin:18px 0 0}
.steps{counter-reset:s;list-style:none;margin:0;padding:0}
.steps>li{counter-increment:s;display:grid;grid-template-columns:240px 1fr;gap:12px 40px;padding:24px 0;border-top:1px solid var(--rule)}
.steps>li::before{content:counter(s);grid-column:1;font:800 2.2rem "Bricolage Grotesque",sans-serif;color:var(--signal);line-height:1}
.steps h3{grid-column:1;grid-row:1;margin-left:2.4rem;align-self:center;font-size:1.15rem}
.steps .body{grid-column:2;grid-row:1}
.steps .body p{margin:0 0 10px;color:var(--slate);max-width:60ch}
pre{background:var(--night);color:#E6F2EE;padding:14px 16px;border-radius:10px;overflow:auto;font:14px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;margin:10px 0 0}
code{font:.92em ui-monospace,SFMono-Regular,Menlo,monospace;background:#E3EAE8;padding:1px 6px;border-radius:4px}
pre code{background:none;padding:0}
.warnbox{border-left:4px solid var(--amber);padding:6px 0 6px 18px;margin:0 0 28px;max-width:60ch}
.warnbox p{margin:0;color:var(--ink)}
footer.site{border-top:1px solid var(--rule);padding:28px 0 44px;color:var(--slate);font-size:.9rem}
footer.site .wrap{display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap}
footer.site p{margin:0;max-width:56ch}
@media(max-width:820px){.hero{grid-template-columns:1fr;gap:36px;padding-top:28px}.row,.steps>li{grid-template-columns:1fr}.steps>li::before{grid-row:1}.steps h3{grid-row:1;margin-left:2.4rem}.steps .body{grid-column:1;grid-row:2}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}