/* Synapse site. Neutral greys, white and black; the Bots' colours are the only accents.
   No glass, blur, glow or translucency: depth comes from form and motion. */
/* Geist and Geist Mono, served from this site (SIL Open Font License 1.1, see fonts/OFL.txt): no third-party font requests. */
@font-face{font-family:"Geist"; font-style:normal; font-weight:400 700; font-display:swap; src:url(/assets/fonts/geist-latin-ext.58a6b173d5.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist"; font-style:normal; font-weight:400 700; font-display:swap; src:url(/assets/fonts/geist-latin.9b6f5ff45b.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geist Mono"; font-style:normal; font-weight:400 500; font-display:swap; src:url(/assets/fonts/geist-mono-latin-ext.745994b5cd.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist Mono"; font-style:normal; font-weight:400 500; font-display:swap; src:url(/assets/fonts/geist-mono-latin.5f3d6ad60f.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#FFFFFF; --surface:#F6F6F7; --surface-2:#EEEEF0; --card:#FFFFFF;
  --ink:#111110; --ink-2:#3E3E42; --muted:#646469; --faint:#A3A3A8; --line:#E6E6E9; --line-2:#D9D9DD;
  --btn:#111110; --btn-ink:#FFFFFF; --ground:#ECECEE; --wordmark:#F1F1F3;
  --spark:#ED712E; --green:#2F7A47; --red:#C8403F; --shadow:rgba(0,0,0,.22);
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0A0A; --surface:#141415; --surface-2:#1C1C1E; --card:#111112;
    --ink:#F2F2F2; --ink-2:#C9C9CD; --muted:#95959B; --faint:#5C5C61; --line:#232326; --line-2:#2E2E32;
    --btn:#F2F2F2; --btn-ink:#0A0A0A; --ground:#1A1A1C; --wordmark:#141415;
    --green:#5BB374; --red:#E0625F; --shadow:rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0A0A; --surface:#141415; --surface-2:#1C1C1E; --card:#111112;
  --ink:#F2F2F2; --ink-2:#C9C9CD; --muted:#95959B; --faint:#5C5C61; --line:#232326; --line-2:#2E2E32;
  --btn:#F2F2F2; --btn-ink:#0A0A0A; --ground:#1A1A1C; --wordmark:#141415;
  --green:#5BB374; --red:#E0625F; --shadow:rgba(0,0,0,.6);
  color-scheme:dark;
}

*{box-sizing:border-box}
/* `hidden` always wins over a component's display (the sent form and the thread's reply box stayed visible). */
[hidden]{display:none !important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
img,svg,canvas{display:block}
.wrap{max-width:1120px; margin:0 auto; padding-inline:24px}
.wrap.wide{max-width:1180px}
h1,h2,h3{text-wrap:balance}
h1{font-size:clamp(40px,6.2vw,72px); line-height:1.02; letter-spacing:-.04em; font-weight:650; margin:0}
h2{font-size:clamp(28px,3.4vw,40px); letter-spacing:-.03em; line-height:1.1; font-weight:620; margin:0 0 36px; max-width:22ch}
h3{font-size:16px; font-weight:600; margin:0; letter-spacing:-.01em}
code{font:13.5px var(--mono); background:var(--surface); padding:2px 6px; border-radius:6px}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:6px}

/* ---- header ---- */
.skip{position:absolute; left:16px; top:-60px; z-index:30; background:var(--btn); color:var(--btn-ink); padding:10px 14px; border-radius:10px; font-size:14px; text-decoration:none}
.skip:focus{top:12px}
.site-header{position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid transparent; transition:border-color .2s}
.site-header.scrolled{border-bottom-color:var(--line)}
nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:16.5px; letter-spacing:-.01em; text-decoration:none}
.brand img{width:26px; height:26px; border-radius:7px}
.nav-right{display:flex; align-items:center; gap:10px}
.navlinks{display:flex; align-items:center; gap:24px; font-size:14px; color:var(--muted); margin-right:12px}
.navlinks a{text-decoration:none; transition:color .15s} .navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--ink)}
.navlinks .gh{display:inline-flex; align-items:center; gap:7px}
.navlinks [data-stars]{font:500 12px var(--mono); color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:1px 7px; margin-left:2px}
.navlinks [data-stars][hidden]{display:none}
.theme{width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; background:none; color:var(--ink-2); cursor:pointer; padding:0; transition:border-color .15s,color .15s}
.theme:hover{border-color:var(--line-2); color:var(--ink)}
.theme svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.theme .moon{display:none}
:root[data-theme="dark"] .theme .sun{display:none} :root[data-theme="dark"] .theme .moon{display:block}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme .sun{display:none} :root:not([data-theme="light"]) .theme .moon{display:block} }

/* ---- buttons ---- */
.cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; padding:0 22px; border-radius:12px; font:500 15.5px var(--sans); text-decoration:none; border:1px solid transparent; transition:transform .2s var(--ease), background-color .15s, border-color .15s}
.btn.primary{background:var(--btn); color:var(--btn-ink)}
.btn.ghost{border-color:var(--line-2); color:var(--ink)}
.btn.ghost:hover{border-color:var(--faint)}
.btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0) scale(.98)}
.btn.sm{height:34px; padding:0 14px; border-radius:9px; font-size:14px}

/* ---- sections ---- */
main section{padding-top:100px}
main section.tight{padding-top:88px}
.head-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px 24px; flex-wrap:wrap; margin-bottom:36px}
.head-row h2{margin:0}
.head-row .count{font:500 13px var(--mono); color:var(--muted); text-decoration:none}
a.count:hover{color:var(--ink)}

/* ---- Bots (inline SVG from build.mjs): flat body, black face, motion only ---- */
.bot{width:100%; height:auto; overflow:visible}
.bot .bb{transform-box:fill-box; transform-origin:50% 100%; animation:breathe 4.6s ease-in-out infinite; animation-delay:var(--d,0s)}
.bot .eye{transform-box:fill-box; transform-origin:center; animation:blink var(--bl,5s) linear infinite; animation-delay:var(--d,0s)}
@keyframes breathe{0%,100%{transform:scale(1,1)} 50%{transform:scale(1.012,1.03)}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)} 95.5%{transform:scaleY(.1)}}
.bot.sm{width:22px; flex:none} .bot.xs{width:18px; flex:none} .bot.md{width:40px}
.bot.sm .bb,.bot.xs .bb,.bot.sm .eye,.bot.xs .eye{animation:none}

/* ---- hero ---- */
.hero{padding-top:64px; text-align:center}
.hero h1{max-width:none; margin:30px auto 0}
.lede{font-size:19px; color:var(--ink-2); max-width:40ch; margin:20px auto 32px; line-height:1.5}
.hero .cta{justify-content:center}
.fine{margin:16px 0 0; font:13px var(--mono); color:var(--muted)}
.crew{display:flex; justify-content:center; align-items:flex-end; gap:clamp(12px,2.4vw,26px); height:92px}
.mate{position:relative; width:62px; display:block; padding:0; border:0; background:none; color:inherit; font:inherit; animation:float 6s ease-in-out infinite; animation-delay:var(--d,0s)}
.mate::after{content:""; position:absolute; left:20%; right:20%; bottom:-8px; height:5px; border-radius:50%; background:var(--ground); z-index:-1}
.mate.lead{width:82px; cursor:pointer}
.mate .bot{transition:transform .35s var(--ease)}
.mate:hover .bot{transform:translateY(-4px)}
@keyframes float{0%,100%{translate:0 0} 50%{translate:0 -3px}}
.crew.cheer .mate:not(.lead) .bot{animation:hop .6s var(--ease) calc(var(--i) * 90ms) both}
@keyframes hop{0%{transform:none} 35%{transform:translateY(-12px) scale(.97,1.04)} 70%{transform:translateY(0) scale(1.05,.95)} 100%{transform:none}}
.mate.lead canvas{position:absolute; left:50%; top:50%; width:300%; height:300%; translate:-50% -50%; pointer-events:none}
.mate.lead.pre .bot{visibility:hidden}

/* ---- the app demo (HTML, readable) ---- */
.demo{margin:72px auto 0; max-width:1040px; text-align:left}
.win{display:grid; grid-template-columns:232px minmax(0,1fr); height:480px; border:1px solid var(--line-2); border-radius:16px; overflow:hidden; background:var(--card); box-shadow:0 40px 80px -48px var(--shadow)}
.win-side{background:var(--surface); border-right:1px solid var(--line); padding:14px 10px; font-size:13px}
.lights{display:flex; gap:7px; padding:2px 6px 16px} .lights i{width:11px; height:11px; border-radius:50%; background:var(--line-2)}
.search{display:flex; justify-content:space-between; align-items:center; height:30px; padding:0 10px; border-radius:8px; background:var(--card); border:1px solid var(--line); color:var(--muted)}
.search kbd{font:11px var(--mono); color:var(--muted)}
.grp{font-size:12px; color:var(--muted); margin:16px 8px 6px}
.row{display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:9px}
.row.on{background:var(--surface-2)}
.row div{display:flex; flex-direction:column; min-width:0; line-height:1.3}
.row b{font-weight:500; font-size:13px} .row span{color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.win-main{display:flex; flex-direction:column; min-width:0}
.win-head{display:flex; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--line)}
.win-head .bot{width:26px}
.win-head div{display:flex; flex-direction:column; line-height:1.25}
.win-head b{font-size:14px; font-weight:600}
.status{font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:6px}
.status::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--green)}
.status.wait::before{background:var(--spark)} .status.done::before{background:var(--faint)}
.pill{margin-left:auto; font:12px var(--mono); color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:3px 10px}
.thread{flex:1; display:flex; flex-direction:column; gap:12px; padding:22px 26px; overflow:hidden; font-size:14px; transition:opacity .4s}
.msg.user{align-self:flex-end; background:var(--surface-2); border-radius:14px; padding:9px 14px; max-width:70%}
.worklog{list-style:none; margin:0; padding:10px 14px; display:flex; flex-direction:column; gap:7px; border:1px solid var(--line); border-radius:12px; max-width:420px; color:var(--ink-2); font-size:13.5px}
.worklog li{display:flex; align-items:center; gap:10px}
.worklog li i{width:14px; height:14px; border-radius:50%; flex:none; border:1.5px solid var(--green); background:var(--green); position:relative}
.worklog li i::after{content:""; position:absolute; left:3.5px; top:1.2px; width:3px; height:6px; border:solid var(--bg); border-width:0 1.6px 1.6px 0; rotate:45deg}
.demo.js .worklog li i{border-color:var(--line-2); background:none}
.demo.js .worklog li i::after{display:none}
.demo.js .worklog li.run i{border-top-color:var(--ink); animation:spin .8s linear infinite}
.demo.js .worklog li.ok i{border-color:var(--green); background:var(--green)}
.demo.js .worklog li.ok i::after{display:block}
.worklog code{font-size:12.5px; padding:1px 5px}
@keyframes spin{to{rotate:360deg}}
.approve{background:var(--surface); border-radius:12px; padding:12px 14px; max-width:420px; display:flex; flex-direction:column; gap:2px}
.approve b{font-weight:600; font-size:14px}
.approve .what{font:12.5px var(--mono); color:var(--muted)}
.acts{display:flex; flex-wrap:wrap; gap:4px; margin-top:10px; font-size:13px}
.acts span{padding:5px 11px; border-radius:8px; color:var(--ink-2); transition:background-color .2s, color .2s, transform .2s var(--ease)}
.acts .a1{background:var(--surface-2); color:var(--ink)}
.acts .a1.press{background:var(--btn); color:var(--btn-ink); transform:scale(.96)}
.msg.bot p{margin:0 0 8px; max-width:52ch}
.pr{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:8px 12px; max-width:470px; font-size:13px}
.pr svg,.prc svg{width:15px; height:15px; flex:none; fill:none; stroke:var(--green); stroke-width:1.5}
.pr span{color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.pr em{margin-left:auto; font:12px var(--mono); font-style:normal; white-space:nowrap}
ins{color:var(--green); text-decoration:none} del{color:var(--red); text-decoration:none}
.composer{margin:0 18px 16px; border:1px solid var(--line); border-radius:12px; padding:12px 14px; color:var(--muted); font-size:14px}
/* the script: hidden steps keep their space, so nothing jumps */
.demo.js [data-step]{opacity:0; transform:translateY(6px); transition:opacity .45s var(--ease), transform .45s var(--ease)}
.demo.js [data-step].show{opacity:1; transform:none}
.demo.fade .thread{opacity:0}

/* ---- features ---- */
.features{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.feature{border:1px solid var(--line); border-radius:16px; padding:8px 8px 22px; background:var(--card)}
.feature h3{margin:18px 14px 6px}
.feature p{margin:0 14px; color:var(--muted); font-size:14.5px; line-height:1.55}
.vig{height:168px; border-radius:10px; background:var(--surface); position:relative; overflow:hidden; display:grid; place-items:center}
[data-anim]:not(.on) *, [data-anim]:not(.on)::before, [data-anim]:not(.on)::after{animation-play-state:paused!important}
/* team: a hand-off travels, each Bot catches it */
.v-team{grid-template-columns:repeat(3,52px); justify-content:center; gap:40px; align-content:end; padding-bottom:36px}
.v-team span{display:block; animation:catch 4.5s var(--ease) infinite}
.v-team .t1{animation-delay:.5s} .v-team .t2{animation-delay:2s} .v-team .t3{animation-delay:3.5s}
@keyframes catch{0%,4%,22%,100%{transform:none} 8%{transform:translateY(2px) scale(1.07,.93)} 14%{transform:translateY(-6px)}}
.v-team .orb{position:absolute; left:50%; top:44px; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--ink); translate:-92px 0; animation:pass 4.5s var(--ease) infinite}
@keyframes pass{0%{translate:-92px 0; opacity:0} 6%{opacity:1} 12%,33%{translate:-92px 0} 45%,66%{translate:0 0} 78%,92%{translate:92px 0; opacity:1} 97%,100%{translate:92px 0; opacity:0}}
/* computer: a terminal */
.term{width:80%; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px 12px; display:flex; flex-direction:column; gap:3px}
.term .tl{font:11px var(--mono); color:var(--muted); margin-bottom:4px}
.term code{background:none; padding:0; font-size:12.5px; color:var(--ink-2); animation:6s steps(1) infinite}
.term code b{color:var(--faint); font-weight:400}
.term .ok{color:var(--green)}
.term .l2{animation-name:line2} .term .l3{animation-name:line3} .term .l4{animation-name:line4}
@keyframes line2{0%,15%{opacity:0} 16%,100%{opacity:1}}
@keyframes line3{0%,40%{opacity:0} 41%,100%{opacity:1}}
@keyframes line4{0%,55%{opacity:0} 56%,100%{opacity:1}}
.term u{display:inline-block; width:7px; height:13px; background:var(--ink-2); vertical-align:-2px; text-decoration:none; animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
/* code: a diff becomes a pull request */
.diff,.prc{position:absolute}
.diff{display:flex; flex-direction:column; gap:2px; width:82%; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 0; animation:diff 6s var(--ease) infinite}
.diff code{background:none; border-radius:0; font-size:12px; padding:2px 12px; white-space:nowrap; overflow:hidden}
.diff .del{color:var(--red); background:color-mix(in srgb, var(--red) 9%, var(--card))}
.diff .add{color:var(--green); background:color-mix(in srgb, var(--green) 10%, var(--card))}
.prc{display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:13.5px; color:var(--ink-2); opacity:0; animation:prc 6s var(--ease) infinite}
.prc b{color:var(--ink)}
@keyframes diff{0%,45%{opacity:1; transform:none} 55%,92%{opacity:0; transform:scale(.92)} 100%{opacity:1; transform:none}}
@keyframes prc{0%,48%{opacity:0; transform:scale(.9) translateY(8px)} 58%,88%{opacity:1; transform:none} 96%,100%{opacity:0; transform:scale(.96)}}
/* voice: a Bot talking, a waveform */
.v-call{grid-template-columns:auto; gap:12px; align-content:center}
.v-call .bot{width:52px; margin:0 auto}
.v-call .mouth{transform-box:fill-box; transform-origin:center; animation:talk .45s ease-in-out infinite alternate}
@keyframes talk{to{transform:scaleY(2.4)}}
.wave{display:flex; align-items:center; gap:3px; height:26px}
.wave i{width:3px; height:100%; border-radius:2px; background:var(--ink-2); transform:scaleY(.35); animation:wave 1.1s ease-in-out infinite alternate}
.wave i:nth-child(3n){animation-delay:-.3s; animation-duration:.9s} .wave i:nth-child(3n+1){animation-delay:-.7s} .wave i:nth-child(4n){animation-delay:-.5s; animation-duration:1.3s} .wave i:nth-child(5n){animation-delay:-.1s}
@keyframes wave{0%{transform:scaleY(.2)} 100%{transform:scaleY(1)}}
.clock{font:12px var(--mono); color:var(--muted); text-align:center}
/* approval: Allow once is pressed, then it goes through */
.v-ask .card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; width:86%; display:flex; flex-direction:column; gap:1px}
.v-ask b{font-size:14px} .v-ask .card>span{font-size:12.5px; color:var(--muted)}
.v-ask .acts{font-size:12.5px} .v-ask .acts span{padding:4px 9px}
.v-ask .a1{animation:press 4s var(--ease) infinite}
@keyframes press{0%,45%{background:var(--surface-2); color:var(--ink); transform:none} 50%{background:var(--btn); color:var(--btn-ink); transform:scale(.94)} 56%,85%{background:var(--btn); color:var(--btn-ink); transform:none} 92%,100%{background:var(--surface-2); color:var(--ink)}}
/* spend: the meter fills, one Bot at a time */
.v-spend{place-items:center stretch; padding:0 24px; align-content:center; gap:12px}
.meter-top{display:flex; align-items:baseline; gap:8px} .meter-top b{font:600 22px var(--sans); letter-spacing:-.02em} .meter-top span{font-size:13px; color:var(--muted)}
.meter{display:flex; height:10px; border-radius:999px; background:var(--surface-2); overflow:hidden; gap:2px}
.meter i{height:100%; transform-origin:left; animation:fill 5s var(--ease) infinite}
.meter .s1{width:30%; background:#3674d8} .meter .s2{width:20%; background:#ec7431; animation-name:fill2} .meter .s3{width:14%; background:#7b53d7; animation-name:fill3}
@keyframes fill{0%{transform:scaleX(0)} 18%,90%{transform:scaleX(1)} 100%{transform:scaleX(0)}}
@keyframes fill2{0%,15%{transform:scaleX(0)} 32%,90%{transform:scaleX(1)} 100%{transform:scaleX(0)}}
@keyframes fill3{0%,29%{transform:scaleX(0)} 45%,90%{transform:scaleX(1)} 100%{transform:scaleX(0)}}
.keys{display:flex; gap:6px 12px; flex-wrap:wrap; font-size:12px; color:var(--muted)}
.keys span{display:inline-flex; align-items:center; gap:6px} .keys i{width:8px; height:8px; border-radius:2px}
/* proof: the real app */
.pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px}
.pair figure{margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--card)}
.pair img{width:100%; height:auto}
.pair figcaption{padding:12px 18px; font-size:14px; color:var(--muted); border-top:1px solid var(--line)}

/* ---- safe by design ---- */
.safe{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.safe>div{background:var(--bg); padding:24px 20px 26px}
.safe svg{width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:18px}
.safe h3{margin-bottom:6px; font-size:15px}
.safe p{margin:0; font-size:14px; color:var(--muted); line-height:1.5}

/* ---- while you sleep ---- */
.jobs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.job{border:1px solid var(--line); border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; gap:6px; transition:border-color .2s}
.job:hover{border-color:var(--line-2)}
.job time{font:500 12.5px var(--mono); color:var(--muted)}
.job p{margin:0 0 8px; font-size:15.5px; font-weight:500; letter-spacing:-.01em; line-height:1.4}
.job>span{margin-top:auto; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted)}

/* ---- starter Bots ---- */
.starters{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.starter{border:1px solid var(--line); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:6px; background:var(--card); transition:border-color .2s}
.starter:hover{border-color:var(--line-2)}
.starter .bot{margin-bottom:10px}
.starter:hover .bot .bb{animation:hopin .6s var(--ease)}
@keyframes hopin{35%{transform:translateY(-5px) scale(.97,1.04)} 70%{transform:scale(1.04,.96)}}
.starter p{margin:0; color:var(--muted); font-size:14px; line-height:1.5}
.starter>span{margin-top:auto; padding-top:10px; font:12px var(--mono); color:var(--muted)}

/* ---- built in the open ---- */
.proof{display:flex; justify-content:space-between; align-items:center; gap:28px 32px; flex-wrap:wrap; border-block:1px solid var(--line); padding-block:40px}
.proof h2{margin:0}
.stats{display:flex; gap:48px; flex-wrap:wrap}
.stats a{text-decoration:none; display:flex; flex-direction:column}
.stats a[hidden]{display:none}
.stats b{font:600 28px var(--sans); letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums}
.stats span{font-size:13px; color:var(--muted)}
.stats a:hover span{color:var(--ink)}
.stats a.gh-card{flex-direction:row; align-items:center; gap:12px; border:1px solid var(--line-2); border-radius:12px; padding:14px 18px; transition:border-color .15s}
.gh-card b{font:500 15px var(--mono); letter-spacing:0}
.gh-card i{font-style:normal; color:var(--muted); transition:transform .2s var(--ease)}
.gh-card:hover{border-color:var(--faint)} .gh-card:hover i{transform:translateX(3px); color:var(--ink)}
@media (max-width:640px){.stats a.gh-card{flex-basis:100%} .gh-card i{margin-left:auto}}

/* ---- install ---- */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
.step{border-top:1px solid var(--line-2); padding-top:18px}
.step b{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--surface-2); font:500 13px var(--mono); margin-bottom:14px}
.step h3{font-size:17px; margin-bottom:6px}
.step p{margin:0; color:var(--muted); font-size:15px}
.req{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:40px}
.req div{background:var(--bg); padding:16px 20px}
.req b{display:block; font:500 12px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.req span{font-size:15px}

/* ---- FAQ ---- */
.faq{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:48px}
details{border-bottom:1px solid var(--line); padding-block:16px}
details:first-child{border-top:1px solid var(--line)}
details summary{cursor:pointer; font-weight:500; list-style:none; display:flex; justify-content:space-between; gap:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; color:var(--muted); font-weight:400; transition:rotate .25s var(--ease)}
details[open] summary::after{rotate:45deg}
details p{color:var(--muted); margin:10px 0 0; max-width:64ch}

/* ---- final ---- */
.final{text-align:center; padding-bottom:120px}
.final h2{margin:30px auto 28px}
.final .cta{justify-content:center}
.crew.small{height:60px; gap:18px} .crew.small .mate{width:46px}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--line); padding-top:48px; overflow:hidden}
.foot{display:grid; grid-template-columns:1.6fr repeat(3,minmax(0,1fr)); gap:32px; font-size:14px}
.foot h2{font:500 12px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 12px}
.foot a{display:block; text-decoration:none; color:var(--ink-2); padding:3px 0}
.foot a:hover{color:var(--ink)}
.foot .brand{display:flex}
.legal{margin:40px 0 0; font-size:13px; color:var(--muted)}
.wordmark{font-weight:700; font-size:clamp(88px,21vw,272px); letter-spacing:-.06em; line-height:.8; color:var(--wordmark); margin:32px 0 -.08em; text-align:center; user-select:none; white-space:nowrap}

/* ---- narrower ---- */
@media (max-width:980px){
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .safe{grid-template-columns:repeat(2,minmax(0,1fr))} .safe>div:last-child{grid-column:1/-1}
  .starters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jobs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .wrap{padding-inline:16px}
  .navlinks{display:none}
  main section{padding-top:80px}
  main section.tight{padding-top:64px}
  .hero{padding-top:36px}
  .crew{height:70px; gap:12px} .mate{width:46px} .mate.lead{width:60px}
  .lede{font-size:17px}
  .demo{margin-top:44px}
  .win{grid-template-columns:1fr; height:auto}
  .win-side{display:none}
  .thread{padding:16px 14px; gap:10px; font-size:13.5px}
  .win-head{padding:10px 14px}
  .composer{margin:0 12px 12px}
  .msg.user{max-width:88%}
  .pr span{display:none}
  .features,.pair,.jobs,.steps,.faq{grid-template-columns:1fr}
  .faq{gap:0} .faq h2{margin-bottom:24px}
  .pair{gap:12px}
  .req{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot{grid-template-columns:repeat(3,minmax(0,1fr))} .foot-brand{grid-column:1/-1}
  .stats{gap:28px}
  .fine{font-size:12px; line-height:1.6; max-width:34ch; margin-inline:auto}
}
@media (max-width:480px){
  .starters{gap:10px} .starter{padding:16px} .starter>span{display:none}
  .safe{grid-template-columns:1fr} .safe>div:last-child{grid-column:auto}
  .safe>div{display:grid; grid-template-columns:22px 1fr; column-gap:14px; padding:18px}
  .safe svg{margin:2px 0 0; grid-row:span 2}
  .hero .cta .btn{flex:1 1 100%}
}

/* ---- docs and changelog ---- */
.page{display:grid; grid-template-columns:220px minmax(0,1fr); gap:56px; padding-block:24px 96px}
.toc{position:sticky; top:84px; align-self:start; display:flex; flex-direction:column; gap:0; font-size:14px}
.toc a{text-decoration:none; color:var(--muted); padding:5px 0 5px 12px; border-left:1px solid var(--line)}
.toc a:hover{color:var(--ink)}
.toc a.active{color:var(--ink); border-left-color:var(--ink)}
.toc .grp,.toc .eyebrow{font:500 11.5px var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin:18px 0 6px}
.toc .grp:first-child,.toc .eyebrow:first-child{margin-top:0}
.eyebrow{font:500 12.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 12px}
.crumb{font:13px var(--mono); color:var(--muted); margin:0 0 14px}
.doc{max-width:70ch}
.doc.nf{padding-block:clamp(64px,12vw,128px)}
.doc.nf h1{margin-bottom:32px}
.doc h1{font-size:clamp(34px,4.4vw,48px); margin:0 0 14px}
.doc .intro{font-size:18px; color:var(--ink-2); margin:0 0 40px}
.doc h2{font-size:26px; max-width:none; border-top:1px solid var(--line); padding-top:40px; margin:48px 0 14px; scroll-margin-top:84px}
.doc h2.sec{border:0; padding:0; margin:64px 0 4px; font:500 12px var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.doc h2.sec + h2{margin-top:10px}
.doc h3{font-size:18px; margin:28px 0 8px}
.doc p,.doc li{color:var(--ink-2)}
.doc ol,.doc ul{padding-left:22px; display:flex; flex-direction:column; gap:8px}
.doc .note{border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:14px 16px; color:var(--ink-2); font-size:15px; margin:18px 0}
.doc .path{font:14px var(--mono); background:var(--surface); padding:2px 6px; border-radius:6px; white-space:nowrap}
.doc table{border-collapse:collapse; width:100%; font-size:15px; margin:12px 0}
.doc th,.doc td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.doc th{font-weight:600; color:var(--ink)}
.doc pre{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; overflow-x:auto; margin:12px 0; width:0; min-width:100%}
.doc pre code{background:none; padding:0}
.doc .scroll-x{overflow-x:auto; margin:12px 0; width:0; min-width:100%}
.doc .scroll-x table{margin:0; min-width:560px}
/* A small table that fits a phone without its own scroll (the Works with price tables). */
@media (max-width:480px){.doc table.fit th,.doc table.fit td{padding:10px 6px} .doc table.fit th:first-child,.doc table.fit td:first-child{padding-left:0}}
.doc td .id{display:block; font:500 12px var(--mono); color:var(--muted); margin-bottom:2px}
.doc a{text-underline-offset:3px; text-decoration-color:var(--line-2)}
.doc a:hover{text-decoration-color:var(--ink)}
.release{display:grid; grid-template-columns:150px minmax(0,1fr); gap:28px; border-top:1px solid var(--line); padding-top:32px; margin-top:32px}
section.release{padding-block:32px 8px; margin-top:0}
.release .when{display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.release .when time{font:13px var(--mono); color:var(--muted)}
.release .body h2{margin:0 0 10px; font-size:26px; border:0; padding:0}
.tag{font:500 12px var(--mono); border:1px solid var(--line); border-radius:999px; padding:3px 9px; color:var(--muted)}
.tag.next{border-color:var(--spark); color:var(--spark)}
@media (max-width:860px){
  .page{grid-template-columns:1fr; gap:24px}
  .toc{position:static; flex-direction:row; flex-wrap:wrap; gap:4px 14px}
  .toc .grp,.toc .eyebrow{width:100%}
  .toc a{border-left:0; padding-left:0}
  .release{grid-template-columns:1fr; gap:10px}
}

/* ---- reduced motion: every vignette rests on its meaningful frame ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
  .diff{opacity:0} .prc{opacity:1}
  .v-ask .a1{background:var(--btn); color:var(--btn-ink)}
  .wave i{transform:scaleY(.6)} .wave i:nth-child(odd){transform:scaleY(.9)}
  .v-team .orb{translate:0 0}
}

/* ---- /feedback ---- */
.fb{max-width:620px; padding-block:24px 96px}
.fb-form{display:flex; flex-direction:column; gap:22px; align-items:flex-start}
.fb-types{border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.fb-types legend{font-size:14px; color:var(--muted); margin-bottom:8px; padding:0}
.fb-types label{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border:1px solid var(--line-2); border-radius:10px; font-size:15px; color:var(--ink-2); cursor:pointer; transition:border-color .15s, background-color .15s}
.fb-types label:hover{border-color:var(--faint)}
.fb-types label:has(input:checked){border-color:var(--ink); color:var(--ink); background:var(--surface)}
.fb-types input{accent-color:var(--ink); margin:0}
.fb-field{display:flex; flex-direction:column; gap:8px; width:100%}
.fb-field span{font-size:14px; color:var(--muted)}
.fb-field textarea,.fb-field input{width:100%; box-sizing:border-box; font:16px/1.5 var(--sans); color:var(--ink); background:var(--card); border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; outline:none; transition:border-color .15s}
.fb-field textarea{resize:vertical; min-height:150px}
.fb-field textarea:focus,.fb-field input:focus{border-color:var(--ink)}
.fb-field textarea:focus-visible,.fb-field input:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.fb-hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.fb-error{margin:0; color:var(--red); font-size:15px}
.fb-done,.fb-failed{display:none; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:18px 20px; margin:0 0 28px; outline:none}
.fb-done h2{border:0; padding:0; margin:0 0 6px; font-size:22px}
.fb-done p,.fb-failed p{margin:0}
.fb-done.on,.fb-failed.on,.fb-done:target,.fb-failed:target{display:block}
.fb-done:target ~ .fb-form{display:none}
.fb-hide{margin:-8px 0 0; font-size:14px; color:var(--muted)}
.fb-thread{min-height:460px}
@media (max-width:640px){.fb-thread{min-height:560px}}
.fb-keep{border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:0 0 28px}
.fb-keep p{margin:0}
.fb-link{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:8px !important}
.fb-link code{overflow-wrap:anywhere}
.fb-msgs{list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:12px}
.fb-msg{display:flex; flex-direction:column; gap:4px; max-width:90%; padding:12px 14px; border-radius:12px; background:var(--surface)}
.fb-msg.you{align-self:flex-end; background:var(--surface-2)}
.fb-msg-from{font-size:13px; color:var(--muted)}
.fb-msg-text{white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink)}
.fb-done[data-sent].on{display:block}
.fb-empty{margin:-16px 0 28px; font-size:14px; color:var(--muted)}

/* ---- /bot: one shared Bot ---- */
.bp{max-width:720px; padding-block:32px 96px}
.bp-line{margin:0 0 20px; font-size:17px; color:var(--ink-2)}
.bp-pending{margin:0 0 28px}
.bp-head{display:flex; align-items:center; gap:24px; margin:0 0 28px}
.bp-face{width:112px; flex:none}
.bp-face .bot{width:112px}
.bot.lg .bb{animation-duration:5.2s}
.bp-id{min-width:0}
.bp h1{font-size:clamp(32px,4.6vw,48px); margin:0; overflow-wrap:anywhere}
.bp-title{margin:4px 0 0; font-size:17px; color:var(--muted); overflow-wrap:anywhere}
.bp-actions{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 10px}
.bp-actions .btn{cursor:pointer}
.bp-actions [hidden]{display:none}
.bp-note{margin:4px 0 0; font-size:14px; color:var(--muted)}
.bp-note a{color:var(--ink); text-underline-offset:3px}
.bp-rows{margin:32px 0 0; border-top:1px solid var(--line)}
.bp-rows>div{display:grid; grid-template-columns:140px minmax(0,1fr); gap:16px; padding:14px 0; border-bottom:1px solid var(--line)}
.bp-rows>div[hidden]{display:none}
.bp-rows dt{font-size:14px; color:var(--muted)}
.bp-rows dd{margin:0; min-width:0}
.bp-chips{display:flex; flex-wrap:wrap; gap:6px}
.bp-chip{display:inline-flex; align-items:center; height:26px; padding:0 10px; border:1px solid var(--line-2); border-radius:999px; font-size:13px; color:var(--ink-2); white-space:nowrap}
.bp-chip.warn{border-color:var(--line-2); background:var(--surface); color:var(--ink)}
.bp-skill{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:2px 0}
.bp-skill+.bp-skill{margin-top:6px}
.bp-section{margin:32px 0 0}
.bp-section[hidden]{display:none}
.bp-h{font-size:14px; font-weight:500; color:var(--muted); margin:0 0 10px; letter-spacing:0}
.bp-instructions{margin:0; padding:16px 18px; background:var(--surface); border-radius:12px; font:14.5px/1.6 var(--sans); color:var(--ink-2); white-space:pre-wrap; overflow-wrap:anywhere; max-height:60vh; overflow:auto}
@media (max-width:600px){
  .bp{padding-block:16px 64px}
  .bp-head{gap:16px}
  .bp-face,.bp-face .bot{width:80px}
  .bp-actions .btn{flex:1 1 100%}
  .bp-rows>div{grid-template-columns:1fr; gap:6px}
}

/* ---- /bots: the curated catalogue ---- */
.bots{padding-block:32px 96px}
.bots h1{font-size:clamp(34px,4.4vw,48px); margin:0 0 24px}
.bots-bar{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 24px}
.bots-search{flex:0 1 320px; min-width:0; height:40px; padding:0 14px; font:15px var(--sans); color:var(--ink); background:var(--card); border:1px solid var(--line-2); border-radius:10px; outline:none; transition:border-color .15s}
.bots-search:focus{border-color:var(--ink)}
.bchips{display:flex; flex-wrap:wrap; gap:6px}
.bchip{height:32px; padding:0 12px; border:1px solid var(--line-2); border-radius:999px; background:none; color:var(--ink-2); font:13.5px var(--sans); cursor:pointer; transition:border-color .15s, background-color .15s}
.bchip:hover{border-color:var(--faint)}
.bchip[aria-pressed="true"]{background:var(--btn); border-color:var(--btn); color:var(--btn-ink)}
.bgrid .bcard[hidden]{display:none}
.bcard-a{height:100%; border:1px solid var(--line); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:6px; background:var(--card); text-decoration:none; transition:border-color .2s}
.bcard-a:hover{border-color:var(--line-2)}
.bcard-a:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.bcard-a .bot{margin-bottom:10px}
.bcard-a:hover .bot .bb{animation:hopin .6s var(--ease)}
.bcard-a h3{overflow-wrap:anywhere}
.bcard-a p{margin:0; color:var(--muted); font-size:14px; line-height:1.5; overflow-wrap:anywhere}
.bcard-by{margin-top:auto; padding-top:10px; font:12px var(--mono); color:var(--faint)}
.bdialog{width:min(640px, calc(100% - 32px)); max-height:calc(100dvh - 48px); padding:0; border:1px solid var(--line-2); border-radius:16px; background:var(--bg); color:var(--ink); overflow:auto}
.bdialog::backdrop{background:rgba(10,10,10,.28)}
.bdialog[open]{animation:bd-in .22s var(--ease)}
@keyframes bd-in{from{transform:translateY(8px) scale(.98)} to{transform:none}}
.bdialog-top{position:sticky; top:0; display:flex; justify-content:flex-end; padding:12px 12px 0; margin:0}
.bdialog-x{width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--ink-2); cursor:pointer}
.bdialog-x:hover{border-color:var(--line-2); color:var(--ink)}
.bdialog .bp-card{padding:0 28px 28px}
.bdialog .bp-name{font-size:28px; letter-spacing:-.02em; margin:0; overflow-wrap:anywhere; max-width:none}
.bdialog .bp-face,.bdialog .bp-face .bot{width:88px}
.bdialog .bp-rows{margin-top:24px}
.bdialog .bp-section{margin-top:24px}
.bdialog .bp-instructions{max-height:40vh}
@media (max-width:600px){
  .bots{padding-block:16px 64px}
  .bots-search{flex:1 1 100%}
  .bdialog .bp-card{padding:0 18px 20px}
  .bdialog .bp-face,.bdialog .bp-face .bot{width:64px}
}
.fb-legal{margin:-8px 0 0; font-size:14px; color:var(--muted)}
.fb-legal a{color:var(--ink-2); text-underline-offset:3px; text-decoration-color:var(--line-2)}

/* ---- /privacy and /terms ---- */
.legal-doc .effective{font:13px var(--mono); color:var(--muted); margin:0 0 32px}
.legal-doc .summary{border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:18px 20px}
.legal-doc .summary h2{border:0; padding:0; margin:0 0 10px; font:500 12px var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.legal-doc .summary ul{margin:0; padding-left:20px}
.legal-doc .summary li{color:var(--ink)}
.legal-doc th a{color:var(--ink)}