/* the typefaces, served from this site: Geist for the site, Geist Mono inside the app (SIL Open Font License: fonts/OFL.txt) */
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/geist-latin-ext.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-20C4, 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(fonts/geist-latin.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 700;font-display:swap;src:url(fonts/geist-mono-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/geist-mono-latin.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}

/* Chorana's site, in Bone + Blue: ink #181818, bone #F8F6F1, blue #2547D0, gray #96938E,
   sand #E9E5DD. Bone paper and ink around the product, which is shown as it really looks (app.css): light windows
   on bone, hairline panes, its mono type, its pixel avatars and its blue "Start work". Every text colour passes
   WCAG AA on the background it sits on: --mute for small text, --faint for large text only, the palette's gray on
   the dark waitlist block */
:root{
  --bg:#F8F6F1; --bg-soft:#F2EFE8; --panel:#E9E5DD; --line:#E2DDD3; --line-strong:#CFCAC0;
  --ink:#181818; --body:#3A3835; --mute:#66635E; --faint:#85827D; --gray:#96938E;
  --go:#2547D0; --go-hover:#1D3BB3; --go-ink:#F8F6F1; --ok:#2547D0; --go-soft:#E6EBFA;   /* bone on blue buttons; blue text is 6.8:1 on bone */
  /* the app, as app.css draws it: white windows (asked for white, so --app steps off the palette to #FFF), a bone
     sidebar and title bar, hairlines, agents' names in blue */
  --app:#FFFFFF; --app-deep:#F8F6F1; --app-head:#F8F6F1; --app-hi:#FFFFFF; --app-line:#E2DDD3; --app-text:#3A3835; --app-dim:#66635E; --app-faint:#66635E; --app-name:#2547D0; --app-white:#181818;
  /* the dark waitlist block */
  --dark:#181818; --dark-head:#1E1E1D; --dark-line:#2E2D2B; --dark-edge:#3A3836; --dark-dim:#96938E; --dark-white:#F8F6F1;
  --font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px;
  --shadow-sm:0 1px 2px rgba(24,24,24,.06);
  --shadow:0 1px 2px rgba(24,24,24,.04),0 10px 30px -12px rgba(24,24,24,.16);
  --shadow-app:0 1px 2px rgba(24,24,24,.05),0 16px 36px -20px rgba(24,24,24,.14);
  --max:1200px; --gutter:24px; --header:80px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px;overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3{font-weight:600;letter-spacing:-.04em;line-height:1.08;text-wrap:balance}
p{text-wrap:pretty}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
b,strong{font-weight:600}
::selection{background:var(--go);color:var(--go-ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-100px;z-index:100;padding:10px 14px;border-radius:var(--r-sm);background:var(--ink);color:var(--bg);font-size:14px;font-weight:600}
.skip:focus{top:12px}
.container{width:100%;max-width:calc(var(--max) + var(--gutter) * 2);margin:0 auto;padding:0 max(var(--gutter),env(safe-area-inset-right,0px)) 0 max(var(--gutter),env(safe-area-inset-left,0px))}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 18px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);
  font-size:15px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-sm);transition:background .15s,border-color .15s,transform .1s,opacity .15s}
.btn:hover{background:var(--panel)}
.btn:active{transform:scale(.98)}
.btn-go{background:var(--go);border-color:var(--go);color:var(--go-ink)}
.btn-go:hover{background:var(--go-hover);border-color:var(--go-hover)}
.btn-go::before{content:'';border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor;transition:transform .2s var(--ease)}
.btn-go:hover::before{transform:translateX(2px)}
.btn-lg{height:50px;padding:0 24px;font-size:16px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- the header: the logo, two links, two buttons ----------
   It sits at the top of the page and scrolls away with it */
.site-header{position:relative;z-index:60;background:var(--bg)}
.site-header .container{position:relative;display:flex;align-items:center;gap:28px;height:var(--header)}
.logo{display:block;flex:none}
.logo img{width:auto;height:48px}
/* the links: plain words, and a blue dot that pops up under the link you point at, springs to the next one as you
   move, and otherwise rests under the section you're reading (site.js) */
.nav{position:relative;display:flex;align-items:center;gap:2px;margin:0 auto}
.nav a{position:relative;z-index:1;padding:10px 18px;border-radius:999px;color:var(--mute);font-size:17px;font-weight:500;letter-spacing:-.015em;transition:color .2s}
.nav a:hover,.nav a[aria-current=true]{color:var(--ink)}
.nav-dot{position:absolute;left:0;top:0;z-index:2;width:6px;height:6px;pointer-events:none;transition:transform .55s cubic-bezier(.3,1.5,.5,1)}
.nav-dot::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--go);transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.nav-dot.on::before{transform:scale(1)}
.nav .nav-cta{display:none}
/* two buttons: Try Chorana (ink) and Book a demo (bone). On hover each fills with colour from the point the pointer
   came in at, and drains back out the side it leaves by; Try Chorana also leans toward the pointer (site.js) */
.header-cta{display:flex;gap:8px;flex:none}
.header-cta .btn{height:46px;padding:0 22px;border-radius:999px;font-size:16px;box-shadow:none}
.btn-dark{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn-dark:hover{background:var(--body);border-color:var(--body)}
.btn-fill{position:relative;overflow:hidden;isolation:isolate;transition:color .35s var(--ease),border-color .35s,transform .35s var(--ease)}
.btn-fill::after{content:'';position:absolute;left:var(--x,50%);top:var(--y,50%);z-index:-1;width:var(--d,240px);height:var(--d,240px);border-radius:50%;
  transform:translate(-50%,-50%) scale(0);transition:transform .55s var(--ease);pointer-events:none}
.btn-fill:hover::after{transform:translate(-50%,-50%) scale(1)}
.btn-fill.btn-dark::after{background:var(--go)}
.btn-fill.btn-dark:hover{background:var(--ink);border-color:var(--go);color:var(--go-ink)}
.btn-fill.btn-demo::after{background:var(--ink)}
.btn-fill.btn-demo:hover{background:var(--bg);border-color:var(--ink);color:var(--bg)}
.btn-demo span{transition:transform .35s var(--ease)}
.btn-demo::before{content:'\2192';position:absolute;right:15px;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .35s var(--ease)}
.btn-demo:hover span{transform:translateX(-12px)}
.btn-demo:hover::before{opacity:1;transform:none}
/* everything in the header comes into focus, one after another, as the page opens */
@keyframes drop{from{opacity:0;transform:translateY(-10px);filter:blur(8px)}}
.site-header .logo,.nav a,.header-cta,.menu-btn{animation:drop .8s var(--ease) both}
.nav a:nth-of-type(1){animation-delay:.08s}
.nav a:nth-of-type(2){animation-delay:.16s}
.nav a:nth-of-type(3){animation-delay:.24s}
.nav a:nth-of-type(4),.header-cta,.menu-btn{animation-delay:.32s}
/* the phone menu button: three lines that fold into an X */
.menu-btn{display:none;position:relative;flex:none;width:44px;height:44px;margin-left:auto;border:1px solid var(--line-strong);border-radius:999px;background:var(--bg)}
.menu-btn span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.menu-btn span:nth-child(1){top:14px}
.menu-btn span:nth-child(2){top:20px}
.menu-btn span:nth-child(3){top:26px}
.menu-open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- sections ---------- */
.section{padding:clamp(96px,11vw,144px) 0 0}
.hero + .section{padding-top:clamp(40px,4vw,56px)}  /* the windows already end the first screen with room to spare */
.section-head{max-width:880px;margin:0 auto clamp(32px,4vw,48px);text-align:center}  /* like the first screen: centred, one quiet line, then mono */
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
h2{font-size:clamp(32px,4.2vw,52px)}
.section-head h2,.cta h2{font:400 clamp(34px,4.3vw,56px)/1.08 var(--font);letter-spacing:-.035em;color:var(--ink)}
.sub{margin-top:20px;font:400 clamp(16px,1.35vw,19px)/1.6 var(--mono);letter-spacing:-.01em;color:var(--body);text-wrap:balance}
.sub a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- the first screen ---------- */
.hero{padding:clamp(48px,6.5vw,88px) 0 0}
/* plain: a crowd of faces, then a one-line title at an ordinary weight, centred */
/* a crowd of faces streams across above the title, solid in the middle and dissolving to nothing by the header's
   edges (the logo's left, the last button's right) over an eased 240px, so there's no line where it starts or ends
   (site.js draws them). --edge is where the header's content starts */
.crowd{--edge:max(var(--gutter),calc(50vw - var(--max) / 2));margin:0 calc(50% - 50vw);padding:30px 0 4px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) calc(var(--edge) + 0px),rgba(0,0,0,0.03) calc(var(--edge) + 30px),rgba(0,0,0,0.1) calc(var(--edge) + 60px),rgba(0,0,0,0.22) calc(var(--edge) + 90px),rgba(0,0,0,0.4) calc(var(--edge) + 120px),rgba(0,0,0,0.6) calc(var(--edge) + 150px),rgba(0,0,0,0.78) calc(var(--edge) + 180px),rgba(0,0,0,0.92) calc(var(--edge) + 210px),rgba(0,0,0,1) calc(var(--edge) + 240px),rgba(0,0,0,1) calc(100% - var(--edge) - 240px),rgba(0,0,0,0.92) calc(100% - var(--edge) - 210px),rgba(0,0,0,0.78) calc(100% - var(--edge) - 180px),rgba(0,0,0,0.6) calc(100% - var(--edge) - 150px),rgba(0,0,0,0.4) calc(100% - var(--edge) - 120px),rgba(0,0,0,0.22) calc(100% - var(--edge) - 90px),rgba(0,0,0,0.1) calc(100% - var(--edge) - 60px),rgba(0,0,0,0.03) calc(100% - var(--edge) - 30px),rgba(0,0,0,0) calc(100% - var(--edge) - 0px));
  mask-image:linear-gradient(90deg,rgba(0,0,0,0) calc(var(--edge) + 0px),rgba(0,0,0,0.03) calc(var(--edge) + 30px),rgba(0,0,0,0.1) calc(var(--edge) + 60px),rgba(0,0,0,0.22) calc(var(--edge) + 90px),rgba(0,0,0,0.4) calc(var(--edge) + 120px),rgba(0,0,0,0.6) calc(var(--edge) + 150px),rgba(0,0,0,0.78) calc(var(--edge) + 180px),rgba(0,0,0,0.92) calc(var(--edge) + 210px),rgba(0,0,0,1) calc(var(--edge) + 240px),rgba(0,0,0,1) calc(100% - var(--edge) - 240px),rgba(0,0,0,0.92) calc(100% - var(--edge) - 210px),rgba(0,0,0,0.78) calc(100% - var(--edge) - 180px),rgba(0,0,0,0.6) calc(100% - var(--edge) - 150px),rgba(0,0,0,0.4) calc(100% - var(--edge) - 120px),rgba(0,0,0,0.22) calc(100% - var(--edge) - 90px),rgba(0,0,0,0.1) calc(100% - var(--edge) - 60px),rgba(0,0,0,0.03) calc(100% - var(--edge) - 30px),rgba(0,0,0,0) calc(100% - var(--edge) - 0px))}
.crowd{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.crowd.held{cursor:grabbing}
.crowd-track{display:flex;align-items:center;width:max-content;padding-left:var(--edge)}
.crowd-track.on{padding-left:0;will-change:transform}
.crowd-track > img{flex:none;width:34px;height:34px;margin-right:-6px;border-radius:7px;box-shadow:0 0 0 3px var(--bg);image-rendering:pixelated}  /* without JS */
/* each person: no background, just them. Near the pointer they swell like the Dock (site.js sets --z), the one
   pointed at to your size, showing who they are above: their name in blue, their job in grey */
.crowd .p{position:relative;flex:none;margin-right:-4px}
.crowd .p img{display:block;width:var(--z,34px);height:var(--z,34px);image-rendering:pixelated;transition:width .2s var(--ease),height .2s var(--ease),transform .25s var(--ease)}
.crowd .tag{position:absolute;left:50%;bottom:calc(100% + 4px);display:flex;align-items:baseline;gap:5px;white-space:nowrap;
  color:var(--gray);font:400 13px/1 var(--font);letter-spacing:0;opacity:0;transform:translate(-50%,4px);transition:opacity .15s,transform .25s var(--ease);pointer-events:none}
.crowd .tag b{color:var(--go);font-weight:600;font-size:13px}
.crowd .p:hover{z-index:2}
.crowd .p:hover img{width:56px;height:56px}  /* on touch, where there's no pointer to follow */
.crowd .p:hover .tag{opacity:1;transform:translate(-50%,0)}
/* held, everyone squeezes a little in the grip */
.crowd.held .p img{transform:scale(.9)}
/* you: your size, in front, and always marked */
.crowd .me{z-index:1;margin:0 4px 0 6px}
.crowd .me img{width:56px;height:56px}
.crowd .me .tag{opacity:1;transform:translate(-50%,0)}
.crowd .me .tag b{color:var(--ink);font-size:14px}
/* one line: the title is about 13.5 times as wide as its size, so on narrow screens it shrinks to fit */
.hero h1{margin-top:22px;text-align:center;font:400 min(60px,calc((100vw - var(--gutter) * 2) / 13.8))/1.08 var(--font);letter-spacing:-.035em;color:var(--ink);white-space:nowrap}
/* what Chorana is, under the title: as wide as the nav bar (the container), in the previews' typeface */
.hero-sub{margin-top:22px;text-align:center;text-wrap:balance;font:400 clamp(17px,1.55vw,21px)/1.6 var(--mono);letter-spacing:-.01em;color:var(--body)}
@media (min-width:801px){.hero-sub{text-align:justify;text-align-last:center;text-wrap:wrap}}  /* the first line runs from the logo to the last button */
/* agents can also write text in, under a blinking blue underline with their name below it (.js-type, site.js) */
.hero .container{position:relative}
.ch.wait{visibility:hidden}
.caret{position:absolute;left:0;top:0;z-index:2;height:4px;pointer-events:none;opacity:0;transition:opacity .2s}
.caret.on{opacity:1}
.caret::before{content:'';position:absolute;inset:0;border-radius:2px;background:var(--go)}
.caret.blink::before{animation:blink 1.1s steps(1) infinite}
.caret.typing::before{animation:none}
.caret.typing{transition:opacity .2s,transform .07s linear,width .07s linear}  /* glides from letter to letter */
@keyframes blink{50%{opacity:0}}
.flag{position:absolute;left:0;top:calc(100% + 10px);display:flex;align-items:center;gap:10px;width:max-content;
  white-space:nowrap;letter-spacing:0;text-align:left;transform:translateY(-4px);transition:transform .25s var(--ease)}
.caret.on .flag{transform:none}
/* near the right edge the name goes on the face's left instead */
.caret.flip .flag img{order:1}
.flag img{width:34px;height:34px;image-rendering:pixelated}
.flag b{font:600 18px/1 var(--font);letter-spacing:-.015em;color:var(--go)}
.flag small{font:400 15px/1 var(--font);color:var(--gray)}
/* in body text, a finer caret and a smaller flag */
.caret.sm{height:2px}
.caret.sm .flag{top:calc(100% + 6px);gap:8px}
.caret.sm .flag img{width:24px;height:24px}
.caret.sm .flag b{font-size:15px}
.caret.sm .flag small{font-size:13px}
/* pasted text gets a wash that fades */
.pasted{animation:pasted 1.6s var(--ease)}
@keyframes pasted{from{background:rgba(37,71,208,.14)}}
.hero-note{margin-top:16px;font-size:13.5px;color:var(--mute)}

/* ---------- the app, as it looks: light windows, hairline panes, Chorana's Geist type (mono for times), pixel avatars ---------- */
.app,.win{overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--app);color:var(--app-text);font:400 14px/1.6 var(--font);letter-spacing:-.006em;text-align:left;box-shadow:var(--shadow-app)}
.app-chrome{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-bottom:1px solid var(--app-line);background:var(--app-deep);font-size:12.5px;color:var(--app-dim)}
.app-chrome i{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.app-chrome .chrome-mark{width:11px;height:13px;margin-left:10px;fill:var(--ink)}
.app-chrome span{margin-left:2px}
.app-body{display:grid;grid-template-columns:240px minmax(0,1fr);height:600px}
.ava{flex:none;width:36px;height:36px;border-radius:3px;image-rendering:pixelated;background:var(--panel)}
.ava-sm{width:30px;height:30px}
.ava-group{display:grid;place-items:center;border:1px solid var(--line-strong);color:var(--app-dim)}
.ava-group svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.side{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--app-line);background:var(--app-deep)}
/* the company at the top of the sidebar, as in the app */
.side-co{display:flex;align-items:center;gap:9px;margin:14px 10px 6px;padding:5px 8px;font-size:14px;font-weight:600;color:var(--app-white)}
.side-co svg{width:12px;height:12px;margin-left:auto;fill:none;stroke:var(--app-dim);stroke-width:1.6}
.side-top{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 6px;font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--app-dim)}
.side-top small{font-weight:400;font-size:12px;letter-spacing:0;text-transform:none;color:var(--app-dim)}
.side-search{margin:0 12px 8px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:3px;background:var(--app);color:var(--app-faint);font-size:13px}
.chats{padding:0 6px;overflow:hidden}
.chats li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;padding:7px 8px;border-radius:3px}
.chats li.on{background:var(--app-hi);box-shadow:0 0 0 1px var(--line-strong)}
.chats .top{display:flex;justify-content:space-between;gap:8px;font-size:13.5px;font-weight:600;color:var(--app-white)}
.chats .top small{font:400 11.5px var(--mono);letter-spacing:0;color:var(--app-faint)}
.chats .last{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;color:var(--app-dim)}
.panes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));min-width:0;min-height:0}
.pane{display:flex;flex-direction:column;min-width:0;min-height:0;border-left:1px solid var(--app-line);border-bottom:1px solid var(--app-line)}
.panes .pane:nth-child(odd){border-left:0}
.panes .pane:nth-child(n+3){border-bottom:0}
.pane-head{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--app-line);background:var(--app)}
.pane-head > span{min-width:0}
.pane-head b{display:block;font-size:14.5px;color:var(--app-white)}
.pane-head small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;color:var(--app-dim)}
.pane-head .tools{display:flex;flex:none;gap:12px;margin-left:auto;color:var(--app-faint)}
.pane-head .tools svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pane-body{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0;padding:14px 16px;overflow:hidden}
.label{font-size:12.5px;color:var(--app-dim)}
.goal{padding-bottom:10px;border-bottom:1px solid var(--app-line)}
.goal div{margin-top:2px;color:var(--app-white)}
.msg{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px}
.msg time{font:400 12px/1.85 var(--mono);letter-spacing:0;color:var(--app-faint)}
.msg p b{margin-right:8px;color:var(--app-name);font-weight:600}
.msg.me p b{color:var(--app-white)}
.go-btn{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:2px;background:var(--go);color:var(--go-ink);font-size:13px;font-weight:600}
.go-btn::before{content:'';border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent currentColor}
.go-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:12.5px;color:var(--app-dim)}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--app-line);border-radius:2px;color:var(--app-text);font-size:12.5px}
.chip.ok{border-color:var(--go-soft);background:var(--go-soft);color:var(--ok)}
.chip.wait{border-color:var(--line-strong);color:var(--app-white)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pane-input{display:flex;align-items:center;gap:12px;height:40px;margin:0 10px 10px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--app);color:var(--app-faint)}
.pane-input::before{content:'>';color:var(--app-dim);font-weight:700}
.pane-input svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pane-input svg:first-of-type{margin-left:auto}
.pane-input svg:last-of-type{color:var(--ok)}
.file{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:3px;background:var(--app-head);font-size:12.5px}
.file svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--app-dim);stroke-width:1.6}
.file span{margin-left:auto;color:var(--app-dim)}
/* the first screen's app is live (site.js): agents type, post, attach files, and the sidebar keeps up */
.msg.new{animation:msg-in .45s var(--ease) both}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)}}
.dots{display:inline-flex;gap:4px;vertical-align:middle}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--app-dim);animation:dot 1.1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-2px)}}
.chats li.ping{animation:ping 1.8s var(--ease)}
@keyframes ping{from{background:rgba(37,71,208,.1)}}
.go-btn{transition:transform .15s var(--ease)}
.go-btn.press{transform:scale(.92)}

/* ---------- the first screen's windows ----------
   Two app windows side by side, neither covering the other: the Launch room, where the founders and their agents
   work together, and #booking-app, where the agents talk to each other as they work. On wide screens, as you
   scroll, the agents' chat glides up into place while the room settles (site.js sets --p from 0 to 1; without JS
   they rest in place). Narrower, they stack */
.stage{--p:1;position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:clamp(24px,2.6vw,36px)}
@keyframes win-in{from{opacity:0;transform:translateY(32px)}}
.stage > *{animation:win-in 1s var(--ease) both}
.stage > :nth-child(1){animation-delay:.25s}
.stage > :nth-child(2){animation-delay:.55s}
/* one roomy chat instead of four, its lines kept short */
.panes.one{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.panes.one .pane{border:0}
.panes.one .pane-body{padding:18px 20px;gap:14px}
/* a group chat's face: two people, one over the other's corner */
.stack{position:relative;flex:none;width:30px;height:30px}
.stack img{position:absolute;width:20px;height:20px;border-radius:3px;image-rendering:pixelated;background:var(--app-head)}
.stack img:first-child{left:0;top:0}
.stack img:last-child{right:0;bottom:0;box-shadow:0 0 0 2px var(--app-deep)}
.stack.lg{width:36px;height:36px}
.stack.lg img{width:24px;height:24px}
.pane-head .stack img:last-child{box-shadow:0 0 0 2px var(--app)}
.chats + .side-top{margin-top:6px}
/* the agents' own chat: the founders read along */
.win-agents .pane{border:0}
.win-agents .pane-body{flex:none;height:250px;padding:16px 18px}
.win-agents .msg p{max-width:none}
.pane-foot{padding:10px 18px 12px;border-top:1px solid var(--app-line);font-size:12.5px;color:var(--app-dim)}

/* wide: the agents' chat stands beside the room, centred on it, and both settle a little as you scroll */
@media (min-width:1081px){
  .stage{grid-template-columns:minmax(0,1fr) minmax(0,380px);align-items:start;gap:20px;padding:0 0 24px}
  .win-main{transform-origin:50% 0;scale:calc(.97 + var(--p) * .03)}  /* grows from its top edge, so it starts right under the words */
  .win-main .app-body{grid-template-columns:230px minmax(0,1fr);height:600px}
  .win-agents{align-self:center;box-shadow:0 1px 2px rgba(24,24,24,.06),0 20px 40px -20px rgba(24,24,24,.16);
    translate:0 calc((1 - var(--p)) * 28px)}
  .win-agents .pane-body{height:360px}
}

/* ---------- features: words on one side, a piece of the app on the other ---------- */
/* held to the width of the heading above, so each pair sits under it as one piece instead of out at the edges */
.features{display:flex;flex-direction:column;gap:clamp(56px,6vw,80px);max-width:1080px;margin:0 auto}
.feature{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(32px,4.5vw,56px);align-items:center}
.feature:nth-child(even){grid-template-columns:minmax(0,6fr) minmax(0,4fr)}
.feature:nth-child(even) .feature-copy{order:2}
.feature h3{font:400 clamp(26px,2.7vw,36px)/1.1 var(--font);letter-spacing:-.03em}
.feature-copy p{margin-top:18px;font:400 16.5px/1.7 var(--mono);letter-spacing:-.01em;color:var(--body)}
.feature-copy ul{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.feature-copy li{display:flex;gap:12px;font:400 15.5px/1.6 var(--mono);color:var(--body)}
.feature-copy li::before{content:'';flex:none;width:7px;height:7px;margin-top:10px;border-radius:2px;background:var(--go)}
.shot .app{box-shadow:var(--shadow-app)}  /* windows straight on the page, like the first screen's */
.shot .pane{border:0}  /* each window hugs its chat: no empty space above the input */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.duo .pane + .pane{border-left:1px solid var(--app-line)}

/* ---------- the waitlist ---------- */
.cta{display:flex;flex-direction:column;align-items:center;margin-top:clamp(64px,7vw,96px);text-align:center}
.cta-faces{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:6px 10px}
.cta-faces img{width:64px;height:64px;image-rendering:pixelated}
.cta-faces .us{display:flex;flex-direction:column;align-items:center;gap:6px;margin-right:6px}
.cta-faces .us img{width:88px;height:88px}
.cta-faces .us b{font-size:14px;font-weight:600;color:var(--ink)}
.cta h2{margin-top:36px}
.cta > p{max-width:56ch;margin-top:18px;font:400 clamp(16px,1.35vw,19px)/1.6 var(--mono);letter-spacing:-.01em;color:var(--body)}
.ask{position:relative;width:100%;max-width:560px;margin-top:36px;border:1px solid var(--line-strong);border-radius:var(--r);background:#fff;text-align:left;box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
.ask:focus-within{border-color:var(--go);box-shadow:0 0 0 3px rgba(37,71,208,.22)}
.ask-row{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 16px;font-family:var(--mono)}
.ask-row::before{content:'>';flex:none;color:var(--go);font-weight:700}
.ask input[type=email]{flex:1;min-width:0;height:44px;padding:0 6px;border:0;outline:0;background:transparent;color:var(--ink);font:400 15px var(--mono)}
.ask input::placeholder{color:var(--mute)}
.ask input:focus-visible{outline:0}
.ask .btn{flex:none;height:44px;font-family:var(--font)}
.ask .step-done{display:none}
.ask[data-step="3"] .step-two{display:none}
.ask[data-step="3"] .step-done{display:flex}
.step-done{align-items:center;gap:12px;padding:16px;font-size:15px;color:var(--ink)}
.tick{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:4px;background:var(--go);color:var(--go-ink)}
.tick svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.form-error{display:none;padding:2px 16px 12px;font-size:13.5px;color:var(--ok)}
.form-error.on{display:block}
.form-error a{text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.busy .btn[type=submit]{opacity:.6;pointer-events:none}
.cta .hero-note{margin-top:14px;font:400 14px var(--mono);color:var(--mute)}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
.cta-actions .btn{height:50px;padding:0 26px;border-radius:999px;font-size:16px;box-shadow:none}

/* ---------- the footer ---------- */
.site-footer{margin-top:clamp(56px,6vw,80px)}
.site-footer .container{display:flex;align-items:center;flex-wrap:wrap;gap:16px 32px;padding-top:32px;padding-bottom:32px}
.site-footer .logo img{height:34px}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-left:auto}
.footer-links a{font-size:15px;font-weight:500;color:var(--mute);transition:color .15s}
.footer-links a:hover{color:var(--ink)}

/* ---------- long text: privacy, terms ---------- */
.doc{max-width:760px;margin:0 auto;padding:clamp(48px,7vw,88px) 0 0}
.doc h1{font-size:clamp(38px,4.6vw,56px);letter-spacing:-.05em}
.doc .updated{margin-top:14px;font:500 13px var(--mono);color:var(--mute)}
.doc .lede{margin-top:24px;font-size:18px;line-height:1.65;color:var(--mute)}
.doc h2{margin:48px 0 12px;font-size:22px;letter-spacing:-.03em}
.doc p,.doc li{font-size:16px;line-height:1.75;color:var(--body)}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:20px;list-style:disc}
.doc li{margin-bottom:6px}
.doc a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.doc b,.doc .ch{color:var(--ink);font-weight:600}

/* ---------- the 404 ---------- */
.lost{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:58vh;padding:64px 0;text-align:center}
.lost .code-404{font:600 13px var(--mono);letter-spacing:.08em;color:var(--ok)}
.lost h1{margin-top:16px;font-size:clamp(40px,6vw,64px);letter-spacing:-.05em}
.lost p{margin-top:16px;font-size:18px;color:var(--mute)}
.lost .btn{margin-top:28px}

/* ---------- motion as you scroll (classes and --i added by site.js, so without it everything simply shows) ----------
   Headings come in line by line; each feature's words slide in from their side while its window rises and its chat
   fills in message by message; the faces at the end pop up one by one before the last call. Windows also drift a
   little against the scroll (site.js sets their translate) */
.rv{--spring:cubic-bezier(.34,1.5,.64,1)}
.rv .st{opacity:0;transform:translateY(22px);transition:opacity .6s ease-out,transform .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.feature.rv .feature-copy .st{transform:translateX(-28px)}
.feature.rv:nth-child(even) .feature-copy .st{transform:translateX(28px)}
.feature.rv .shot .app{opacity:0;transform:translateY(48px) scale(.95);transition:opacity .7s ease-out,transform 1.1s var(--ease)}
.feature.rv .pane-body > *{opacity:0;transform:translateY(10px);transition:opacity .45s ease-out,transform .6s var(--ease);transition-delay:calc(450ms + var(--i,0) * 160ms)}
.cta.rv .cta-faces > *{opacity:0;transform:translateY(28px) scale(.6);transition:opacity .35s ease-out,transform .7s var(--spring);transition-delay:calc(var(--i,0) * 55ms)}
.cta.rv > .st{transition-delay:calc(380ms + var(--i,0) * 90ms)}
.rv.in .st,.feature.rv.in .feature-copy .st,.feature.rv.in .shot .app,.feature.rv.in .pane-body > *,.cta.rv.in .cta-faces > *{opacity:1;transform:none}
.shot .app{will-change:translate}

/* ---------- smaller screens ---------- */
@media (max-width:1080px){
  .app-body{grid-template-columns:minmax(0,1fr)}
  .app-body > .side{display:none}
}
@media (max-width:900px){
  .nav,.header-cta{display:none}
  .menu-btn{display:block}
  .menu-open .nav{display:flex;position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% + 6px);flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:8px;
    border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--bg);box-shadow:var(--shadow);transform-origin:top right;animation:menu-in .3s var(--ease) both}
  @keyframes menu-in{from{opacity:0;transform:translateY(-6px) scale(.98)}}
  .nav-dot{display:none}
  .menu-open .nav a{padding:13px 14px;border-radius:var(--r-sm);color:var(--ink);font-size:18px}
  .menu-open .nav a:hover{background:var(--panel)}
  .menu-open .nav .nav-cta{display:flex;height:48px;border-radius:999px;font-size:16px}
  .menu-open .nav .nav-cta.btn-dark{margin-top:6px;color:var(--bg)}
  .menu-open .nav .nav-cta.btn-dark:hover{background:var(--body)}
  .feature,.feature:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .feature:nth-child(even) .feature-copy{order:0}
}
@media (max-width:720px){
  .app-body{height:auto}
  .panes{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .panes .pane{border-left:0}
  .panes .pane:nth-child(2){border-bottom:0}
  .panes .pane:nth-child(n+3){display:none}
  .stage .pane-body{min-height:220px}
  .duo{grid-template-columns:minmax(0,1fr)}
  .duo .pane + .pane{border-left:0;border-top:1px solid var(--app-line)}
}
@media (max-width:640px){
  :root{--gutter:16px;--header:68px}
  .logo img{height:40px}
  .cta-faces{gap:4px 2px}
  .cta-faces img{width:28px;height:28px}
  .cta-faces .us{margin-right:2px}
  .cta-faces .us img{width:42px;height:42px}
  .cta-faces .us b{font-size:12px}
  .ask-row{flex-wrap:wrap;padding:6px 8px 8px 14px}
  .ask input[type=email]{flex-basis:calc(100% - 24px)}
  .ask .btn{width:100%}
  .footer-links{margin-left:0}
  .pane-body{padding:12px}
  .msg{grid-template-columns:minmax(0,1fr);gap:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv *{opacity:1!important;transform:none!important}
}