@font-face{font-family:'Instrument Serif';src:url(/fonts/instrument-serif-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(/fonts/instrument-serif-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Geist';src:url(/fonts/geist-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(/fonts/geist-mono-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{
  --bg:#FCFCFD;--bg2:#EEEFF7;--sf:#FFFFFF;--sf2:#F6F7FA;--ln:#E3E5EC;--ln2:#C6C9D4;
  --tx:#16143A;--tx2:#2B2950;--mu:#55536E;--mu-inv:#C9C6E6;--ac:#4B3BD6;--ach:#5D4EE6;--ac2:#B9B0FF;--act:#4B3BD6;--on:#FFFFFF;--c2:#4B3BD6;--c2t:#4B3BD6;--c3:#4B3BD6;
  --bt:#5B47E8;--bth:#6A58F5;--bton:#FFFFFF;--focus:#4B3BD6;--focus-inv:#B9B0FF;--link:#4B3BD6;--inb:#8A8677;--ph:#6B6976;
  --ok:#1F9D63;--ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --r:12px;--rc:16px;--br:999px;--max:1240px;
  --font-d:'Instrument Serif',Georgia,serif;--font-b:'Geist',system-ui,sans-serif;--font-m:'Geist Mono',ui-monospace,monospace;
  --dw:400;--hw:400;--h3w:500;--dls:-.02em;--hls:-.025em;--h3ls:-.01em;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--tx);font:400 17px/1.6 var(--font-b);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,.d{font-family:var(--font-d);letter-spacing:-.03em;line-height:1.1}
h2{font-size:clamp(32px,4vw,52px);font-weight:700;text-wrap:balance}
h3{font-size:19px;font-weight:600;letter-spacing:-.015em}
p{text-wrap:pretty}
.mono{font-family:var(--font-m);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.wrap{width:min(var(--max),100% - 44px);margin-inline:auto}
.skip{position:absolute;left:12px;top:-60px;background:var(--bt);color:var(--on);padding:10px 16px;border-radius:10px;z-index:99;font-weight:600}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--ach);outline-offset:3px;border-radius:8px}

/* nav */
.nav{position:fixed;top:16px;left:0;right:0;margin-inline:auto;width:min(1180px,calc(100% - 24px));display:flex;align-items:center;gap:28px;padding:9px 10px 9px 18px;border:1px solid var(--ln);border-radius:999px;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:50;transition:background .3s,border-color .3s,box-shadow .3s}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 90%,transparent);box-shadow:0 12px 40px -18px #000}
.nav .logo{display:flex;align-items:center;flex:none}.nav .logo img{height:30px;width:auto}
.nav .links{display:flex;gap:6px;margin-left:auto;list-style:none}
.nav .links a{display:block;padding:8px 12px;border-radius:999px;color:var(--mu);font-size:15px;text-decoration:none;transition:color .2s,background .2s}
.nav .links a:hover,.nav .links a[aria-current="true"]{color:var(--tx);background:var(--sf)}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border-radius:999px;border:1px solid var(--ln);background:var(--sf);color:var(--tx);cursor:pointer;align-items:center;justify-content:center}
.menu-btn span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .3s var(--ease-out)}
.menu-btn span::before,.menu-btn span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease-out)}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:76px 12px auto;z-index:49;background:var(--sf);border:1px solid var(--ln);border-radius:22px;padding:12px;display:none;box-shadow:0 30px 80px -30px #000}
.mobile-menu.open{display:block;animation:pop .35s var(--ease-out)}
.mobile-menu a{display:block;padding:14px 16px;border-radius:12px;text-decoration:none;font-size:17px}
.mobile-menu a:hover{background:var(--sf2)}
.mobile-menu .btn{margin-top:8px;justify-content:center;width:100%}

/* buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:13px 22px;min-height:46px;border-radius:999px;border:0;background:var(--bt);color:var(--on);font:600 15px var(--font-b);text-decoration:none;cursor:pointer;position:relative;overflow:hidden;transition:background .2s,transform .25s var(--ease-out),box-shadow .3s}
.btn:hover{background:var(--bth);transform:translateY(-1px);box-shadow:0 10px 30px -8px rgba(106,88,245,.75)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .arr{transition:transform .25s var(--ease-out)}.btn:hover .arr{transform:translateX(3px)}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--ln2)}
.btn.ghost:hover{background:var(--sf);box-shadow:none}
.btn[disabled]{opacity:.7;cursor:progress}

/* hero */
.hero{position:relative;padding:150px 0 90px;isolation:isolate;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;min-height:min(720px,calc(100vh - 200px))}
.pill{display:inline-flex;gap:10px;align-items:center;padding:6px 14px 6px 6px;border:1px solid var(--ln);border-radius:999px;background:var(--sf);color:var(--mu);font-size:14px}
.pill b{background:var(--bt);color:var(--on);padding:3px 10px;border-radius:999px;font-weight:600;font-size:12px}
.hero h1{font-size:clamp(38px,4.3vw,62px);line-height:1.03;font-weight:700;margin:22px 0;text-wrap:balance}
.hero h1 .w{display:inline-block}
.lead{color:var(--mu);font-size:19px;max-width:540px}
.ctas{display:flex;gap:12px;margin:32px 0 18px;flex-wrap:wrap}
.fine{color:var(--mu);font-size:14px}
.fine b{color:var(--tx);font-weight:600}
.js .anim-in{opacity:0}

/* live channel window */
.board{position:relative;border:1px solid var(--ln);border-radius:24px;background:linear-gradient(180deg,color-mix(in srgb,var(--sf) 92%,transparent),color-mix(in srgb,var(--bg2) 92%,transparent));box-shadow:0 40px 120px -40px #000,inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}
.board-top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--ln)}
.board-top .ch{font:600 16px var(--font-d);color:var(--tx)}
.board-top .live{display:inline-flex;align-items:center;gap:8px;margin-left:auto;color:var(--mu)}
.board-top .live i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:live 2s infinite}
.chat-body{display:grid;grid-template-columns:196px minmax(0,1fr)}
.side{padding:14px 10px;border-right:1px solid var(--ln);display:grid;gap:4px;align-content:start;font-size:13.5px}
.side .h{color:var(--mu);font-size:10.5px;margin:8px 8px 4px}
.side span{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:8px;color:var(--mu)}
.side span.on{background:var(--sf2);color:var(--tx)}
.side .badge{font:600 11px var(--font-b);background:var(--bt);color:#fff;border-radius:999px;padding:0 7px;line-height:18px;transition:transform .3s}
.side .guest{font-size:10px;color:var(--c2t);border:1px solid color-mix(in srgb,var(--c2t) 50%,transparent);border-radius:999px;padding:0 6px}
.side span{gap:6px;white-space:nowrap;min-width:0}.side .nm{font-style:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}.side .guest,.side .badge{flex-shrink:0;font-style:normal}
.msgs{list-style:none;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;height:380px;overflow:hidden;mask-image:linear-gradient(transparent,#000 14%);-webkit-mask-image:linear-gradient(transparent,#000 14%)}
.msg{display:flex;gap:10px;align-items:flex-start}
.av{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font:700 12px var(--font-b);color:#0C0B2A}
.msg .who{font-size:13px;font-weight:600}.msg .who small{color:var(--mu);font-weight:400;margin-left:6px}
.msg .who .gtag{font-size:10px;color:var(--c2t);border:1px solid color-mix(in srgb,var(--c2t) 50%,transparent);border-radius:999px;padding:0 6px;margin-left:6px}
.msg p{font-size:14px;line-height:1.45;color:var(--tx);margin-top:2px}
.msg .men{color:var(--ac);font-weight:600}
.msg .pin{display:inline-block;margin-top:6px;font-size:11.5px;color:var(--mu);border:1px solid var(--ln2);border-radius:8px;padding:2px 8px}
.typing{display:flex;gap:4px;padding:8px 12px;border-radius:12px;background:var(--sf2);width:max-content;margin-left:40px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--mu);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
.compose{margin:0 16px 16px;padding:12px 14px;border:1px solid var(--ln2);border-radius:14px;background:var(--bg);color:var(--mu);font-size:14px;display:flex;justify-content:space-between;align-items:center}
.compose b{font:600 12px var(--font-b);background:var(--bt);color:#fff;border-radius:8px;padding:5px 10px}
.float{position:absolute;padding:10px 14px;border:1px solid var(--ln2);border-radius:14px;background:color-mix(in srgb,var(--sf2) 94%,transparent);backdrop-filter:blur(8px);font-size:13px;box-shadow:0 20px 50px -20px #000;z-index:2}
.float .mono{display:block;color:var(--ac);font-size:10.5px}
.board-wrap{position:relative}
.board-wrap .f1{top:64px;right:-20px}.board-wrap .f2{bottom:-20px;left:-22px}

/* sections */
section{position:relative}
.sec{padding:120px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--ac);margin-bottom:16px}
.eyebrow::before{content:'';width:18px;height:2px;background:currentColor;border-radius:2px}
.sec-head{max-width:none;margin-bottom:56px}.sec-head p{max-width:720px}.sec-head.center p{margin-inline:auto}
.sec.alt{background:var(--bg2);border-block:1px solid var(--ln)}
@media (min-width:1081px){.sec-head h2{white-space:nowrap}}
.sec-head p{color:var(--mu);font-size:19px;margin-top:18px}
.center{text-align:center;margin-inline:auto}

/* features */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.f{grid-column:span 2;position:relative;padding:28px;border:1px solid var(--ln);border-radius:var(--r);background:linear-gradient(180deg,var(--sf),var(--bg2));overflow:hidden;transition:border-color .3s,transform .4s var(--ease-out)}
.f::before{content:'';position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(91,71,232,.14),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.f:hover{border-color:var(--ln2)}.f:hover::before{opacity:1}
.f.wide{grid-column:span 3}
.f .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c2) 16%,transparent);color:var(--c2t);margin-bottom:18px}
.f .ic.amber{background:color-mix(in srgb,var(--ac) 16%,transparent);color:var(--ac)}
.f p{color:var(--mu);font-size:15.5px;margin-top:8px}
.f ul{margin-top:12px;padding-left:18px;color:var(--mu);font-size:15px}
.f ul li+li{margin-top:4px}
.soon{display:inline-block;margin-left:8px;vertical-align:middle;font:500 10.5px var(--font-m);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;color:var(--tx);border:1px solid var(--ln2);background:var(--sf2)}
.addon{display:inline-block;font:500 10.5px var(--font-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ac);margin-bottom:10px}
.split{margin-top:18px;display:grid;gap:8px}
.split .row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mu)}
.split .bar{flex:1;height:8px;border-radius:99px;background:var(--bg);overflow:hidden}
.split .bar i{display:block;height:100%;width:33.3%;border-radius:99px;background:linear-gradient(90deg,var(--c2),var(--ac));transform-origin:left}
.list-more{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--ln);border-radius:var(--r);overflow:hidden}
.list-more div{padding:22px 24px;border-right:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.list-more div:nth-child(3n){border-right:0}
.list-more div:nth-last-child(-n+3){border-bottom:0}
.list-more b{display:block;font-weight:600;font-size:15.5px}
.list-more span{color:var(--mu);font-size:14.5px}

/* how */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s;position:relative}
.steps .line{position:absolute;top:27px;left:28px;right:28px;height:2px;background:var(--ln);overflow:hidden;border-radius:2px}
.steps .line i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--c2),var(--ac));transform:scaleX(var(--p,0));transform-origin:left}
.step{position:relative;padding-top:76px}
.step .n{position:absolute;top:0;left:0;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--sf);border:1px solid var(--ln2);font:600 15px var(--font-m);color:var(--ac)}
.step p{color:var(--mu);font-size:15.5px;margin-top:8px}

/* pricing */
.prices{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:16px;align-items:stretch}
.plan{position:relative;padding:32px;border:1px solid var(--ln);border-radius:22px;background:var(--sf);display:flex;flex-direction:column}
.plan.feat{background:linear-gradient(180deg,#221D66,var(--sf));border-color:color-mix(in srgb,var(--ac) 50%,var(--ln))}
.plan .k{color:var(--mu)}
.plan .amt{display:flex;align-items:baseline;gap:6px;margin:14px 0 6px}
.plan .amt .d{font-size:52px;font-weight:700}
.plan .amt span:not(.d){color:var(--mu)}
.plan .unit{color:var(--mu);font-size:14px}
.plan ul{list-style:none;margin:22px 0 28px;display:grid;gap:10px;font-size:15.5px}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li svg{flex:none;margin-top:4px;color:var(--ac)}
.plan .btn{margin-top:auto;justify-content:center}
.plan .plus{font-size:15px;color:var(--mu)}
.addons{display:grid;gap:16px}
.addons .plan{padding:26px}
.addons .plan .amt .d{font-size:38px}
.bundle{margin-top:16px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:24px 32px;border:1px dashed var(--ln2);border-radius:22px;background:var(--bg2)}
.bundle .d{font-size:30px;font-weight:700}
.bundle p{color:var(--mu);font-size:15px;flex:1;min-width:240px}
.note{color:var(--mu);font-size:14px;margin-top:18px;text-align:center;margin-inline:auto}

/* demo form */
.demo-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;border:1px solid var(--ln);border-radius:28px;background:var(--sf);overflow:hidden}
.demo-side{padding:48px;background:radial-gradient(600px 400px at 0% 0%,rgba(169,155,255,.25),transparent 60%),radial-gradient(500px 400px at 100% 100%,rgba(232,121,249,.14),transparent 60%),var(--bg2);border-right:1px solid var(--ln)}
.demo-side p{color:var(--mu);margin-top:16px}
.demo-side ul{list-style:none;margin-top:28px;display:grid;gap:14px}
.demo-side li{display:flex;gap:12px;color:var(--tx);font-size:15.5px}
.demo-side li svg{flex:none;color:var(--ac);margin-top:4px}
form.demo{padding:44px 48px;display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.seg{grid-column:1/-1;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--bg);border:1px solid var(--ln);position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{position:relative;z-index:1;text-align:center;padding:10px 14px;border-radius:999px;cursor:pointer;font-weight:600;font-size:15px;color:var(--mu);transition:color .25s}
.seg input:checked+label{color:var(--on)}
.seg input:focus-visible+label{outline:2px solid var(--ach);outline-offset:2px}
.seg .thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--bt);transition:transform .4s var(--ease-out)}
.seg[data-v="beta"] .thumb{transform:translateX(100%)}
.field{display:grid;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:14px;font-weight:500}
.field label .opt{color:var(--mu);font-weight:400}
.field input,.field select{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid #6E68C4;background:var(--bg);color:var(--tx);font:400 16px var(--font-b);transition:border-color .2s,box-shadow .2s}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B0ACD6' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.field input::placeholder{color:#8E8ABD}
.field input:hover,.field select:hover{border-color:#8A84DA}
.field input:focus,.field select:focus{outline:none;border-color:var(--c2t);box-shadow:0 0 0 4px rgba(169,155,255,.25)}
.field[data-invalid] input,.field[data-invalid] select{border-color:#FF8A8A}
.err{color:#FF9B9B;font-size:13px;min-height:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.form-foot .fine{flex:1;min-width:220px}
.form-foot .fine a{color:var(--tx)}
.status{grid-column:1/-1;padding:14px 16px;border-radius:12px;font-size:15px;display:none}
.status.show{display:block;animation:pop .4s var(--ease-out)}
.status.ok{background:rgba(61,214,140,.12);border:1px solid rgba(61,214,140,.45)}
.status.bad{background:rgba(255,138,138,.1);border:1px solid rgba(255,138,138,.45)}
.spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;display:none}
.btn[disabled] .spin{display:inline-block}

/* faq */
.faq{max-width:820px;margin-inline:auto;border-top:1px solid var(--ln)}
.faq details{border-bottom:1px solid var(--ln)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font:600 18px var(--font-d);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--ln2);position:relative;transition:transform .35s var(--ease-out),background .2s}
.faq summary .pm::before,.faq summary .pm::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:2px;background:var(--tx);transform:translate(-50%,-50%);border-radius:2px}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .pm{transform:rotate(45deg);background:var(--sf)}
.faq summary:hover .pm{background:var(--sf)}
.faq .a{padding:0 4px 22px;color:var(--mu);max-width:700px}

/* cta band */
.cta-band{position:relative;margin:0 auto 120px;padding:72px 48px;border-radius:32px;text-align:center;overflow:hidden;border:1px solid var(--ln);background:radial-gradient(700px 300px at 50% 0%,rgba(91,71,232,.28),transparent 70%),var(--sf)}
.cta-band p{color:var(--mu);margin:16px auto 30px;max-width:540px}
.cta-band .ctas{justify-content:center;margin:0}

/* footer */
footer{border-top:1px solid var(--ln);padding:64px 0 40px;background:var(--bg2)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot img{height:30px;width:auto}
.foot p{color:var(--mu);font-size:14.5px;margin-top:14px;max-width:340px}
.foot h4{font:500 12px var(--font-m);letter-spacing:.08em;text-transform:uppercase;color:var(--mu);margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:8px;font-size:15px}
.foot a{text-decoration:none;color:var(--tx)}
.foot a:hover{color:var(--ach);text-decoration:underline}
.legal-line{margin-top:48px;padding-top:24px;border-top:1px solid var(--ln);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;color:var(--mu);font-size:13.5px}
.legal-line a{color:var(--tx)}
.disc{color:var(--mu);font-size:13px;margin-top:14px;max-width:900px}

/* legal pages */
.legal{padding:150px 0 100px}
.legal .wrap{max-width:780px}
.legal h1{font-size:clamp(36px,5vw,54px);font-weight:700}
.legal .upd{color:var(--mu);margin:14px 0 40px}
.legal h2{font-size:24px;margin:40px 0 12px}
.legal p,.legal li{color:#D4D1EE;font-size:16.5px}
.legal p+p{margin-top:12px}
.legal ul{padding-left:22px;margin-top:10px;display:grid;gap:6px}
.legal a{color:var(--ach)}
.legal .callout{padding:16px 18px;border:1px solid var(--ln2);border-radius:14px;background:var(--sf);margin-bottom:32px;font-size:15px;color:var(--mu)}
.nf{min-height:100vh;display:grid;place-items:center;text-align:center;padding:120px 22px}
.nf .code{font:700 120px/1 var(--font-d);background:linear-gradient(100deg,var(--c2t),var(--ac));-webkit-background-clip:text;background-clip:text;color:transparent}
.nf p{color:var(--mu);margin:14px 0 28px}
.nf .ctas{justify-content:center}

@keyframes shine{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes float{to{transform:translate(60px,40px) scale(1.15)}}
@keyframes pan{to{background-position:100% 0}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ping{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(61,214,140,.6)}70%{box-shadow:0 0 0 8px rgba(61,214,140,0)}100%{box-shadow:0 0 0 0 rgba(61,214,140,0)}}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:1080px){
  .hero .wrap{grid-template-columns:1fr;min-height:0}
  .bento{grid-template-columns:repeat(2,1fr)}.f,.f.wide{grid-column:span 1}
  .prices{grid-template-columns:1fr 1fr}.prices>.plan:first-child{grid-column:1/-1}
  .demo-card{grid-template-columns:1fr}.demo-side{border-right:0;border-bottom:1px solid var(--ln)}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav .links,.nav .nav-cta{display:none}.menu-btn{display:inline-flex}
}
@media (max-width:760px){
  body{font-size:16px}
  .hero{padding:112px 0 56px}.lead{font-size:17px}
  .sec{padding:80px 0}.sec-head{margin-bottom:40px}.sec-head p{font-size:17px}
  .chat-body{grid-template-columns:1fr}.side{display:none}.msgs{height:330px}
  .board-wrap .f1{right:8px;top:60px}.board-wrap .f2{left:auto;right:8px;bottom:-26px}.compose{margin-bottom:34px}
  .bento,.prices,.steps{grid-template-columns:1fr}
  .steps .line{display:none}.step{padding-top:0;padding-left:76px;min-height:56px}
  .list-more{grid-template-columns:1fr}.list-more div{border-right:0!important;border-bottom:1px solid var(--ln)!important}.list-more div:last-child{border-bottom:0!important}
  .demo-side{padding:32px 24px}form.demo{padding:28px 22px;grid-template-columns:1fr}
  .plan{padding:26px}
  .cta-band{padding:52px 22px;margin-bottom:80px;border-radius:24px}
  .foot{grid-template-columns:1fr}
  .bundle{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .anim-in{opacity:1!important;transform:none!important}
}

/* spacebooks band */
.sb{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sb .f{grid-column:auto}
.save{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:10px 18px;border-radius:999px;border:1px solid var(--ln2);background:var(--sf);font-weight:600}
.save b{color:var(--ac)}
@media (max-width:760px){.sb{grid-template-columns:1fr}}
.prices.two{grid-template-columns:1fr 1fr;max-width:880px;margin-inline:auto}
@media (max-width:1080px){.prices.two>.plan:first-child{grid-column:auto}}
@media (max-width:760px){.prices.two{grid-template-columns:1fr}}

/* ==========================================================================
   v2 "unslop" editorial light layer (review 12)
   refs: Refero Styles (Brex/Ramp/Intercom paper palettes), Unsection (section-first
   editorial layouts), Animmaster/60fps (mask text reveals, state micro-motion),
   Skiper UI / Vengeance UI (magnetic CTA, precise hover), Nielsen heuristics.
   ========================================================================== */
body{background:var(--bg);color:var(--tx);font:400 17px/1.62 var(--font-b);font-feature-settings:"ss01","cv11"}
::selection{background:var(--ac);color:var(--on)}
h1,h2,h3,.d{font-family:var(--font-d)}
h2{font-weight:var(--dw);letter-spacing:var(--dls);line-height:1.02}
.mono{font-family:var(--font-m)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.skip{background:var(--tx);color:var(--bg)}

/* nav: flat bar + hairline (no floating glass pill) */
.nav{top:0;width:100%;max-width:none;border:0;border-bottom:1px solid transparent;border-radius:0;padding:14px max(22px,calc((100% - var(--max))/2));background:color-mix(in srgb,var(--bg) 0%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom-color:var(--ln);box-shadow:none}
.nav .links a{color:var(--mu);border-radius:6px}
.nav .links a:hover,.nav .links a[aria-current="true"]{color:var(--tx);background:transparent;box-shadow:inset 0 -2px 0 var(--ac)}
.menu-btn{background:var(--sf);border-color:var(--ln2);border-radius:10px}
.mobile-menu{background:var(--sf);border-color:var(--ln);border-radius:14px;box-shadow:0 24px 60px -30px rgba(10,18,48,.35)}
.mobile-menu a:hover{background:var(--bg2)}

/* buttons: solid, square-ish, no shine */
.btn{border-radius:var(--br);background:var(--bt);color:var(--bton);font-weight:600;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);transition:background .2s,transform .35s var(--ease-out),box-shadow .2s}
.btn:hover{background:var(--bth);transform:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.16)}
.btn.magnetic{will-change:transform;transition:background .2s,transform .5s var(--ease-out)}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--tx);box-shadow:none}
.btn.ghost:hover{background:var(--tx);color:var(--bg)}

/* hero: editorial — giant headline row, then copy + product */
.hero{padding:150px 0 110px;overflow:visible}
.hero .wrap.hero-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"copy copy" "side board";gap:56px 64px;align-items:start;min-height:0}
.hero-copy{grid-area:copy}.hero-side{grid-area:side;padding-top:8px;border-top:1px solid var(--tx)}
.hero .board,.hero .board-wrap{grid-area:board}
.hero h1{font-size:clamp(46px,7.4vw,112px);line-height:.94;letter-spacing:var(--hls);font-weight:var(--hw);margin:28px 0 0;max-width:15ch;text-wrap:balance}
.hero h1 .wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .w{display:inline-block}
.pill{background:transparent;border:0;padding:0;color:var(--mu);font:500 13px var(--font-m);letter-spacing:.08em;text-transform:uppercase}
.pill b{background:var(--tx);color:var(--bg);border-radius:4px;font:600 11px var(--font-m);letter-spacing:.08em;padding:4px 8px}
.lead{color:var(--tx);font-size:20px;line-height:1.5;margin-top:22px;max-width:30ch}
.ctas{margin:30px 0 20px}
.fine{color:var(--mu)}.fine b{color:var(--tx)}

/* product UI cards: real UI chrome on paper */
.board{background:var(--sf);border:1px solid var(--ln2);border-radius:14px;box-shadow:0 1px 0 var(--ln),0 30px 60px -36px rgba(10,18,48,.35),0 12px 24px -18px rgba(10,18,48,.18);transform-origin:50% 0;transform-style:preserve-3d}
.board-top{background:var(--bg2);border-bottom-color:var(--ln)}
.board-top::before{content:'';width:42px;height:10px;flex:none;background:radial-gradient(circle 5px at 5px 5px,var(--ln2) 98%,transparent) 0 0/16px 10px repeat-x}
.board-top .live{color:var(--tx)}
.job,.chip{background:var(--sf);border-color:var(--ln)}
.job.active{border-color:var(--tx);background:var(--bg2)}
.tag{border-color:var(--ln2);color:var(--mu)}
.toast{background:var(--tx);color:var(--bg);border:0;box-shadow:0 18px 40px -24px rgba(10,18,48,.6);backdrop-filter:none}
.toast .mono{color:var(--ac2)}

/* sections */
.sec{padding:140px 0}
.sec.alt{background:var(--bg2);border-block:1px solid var(--ln)}
.eyebrow{color:var(--mu);font-size:12px}
.eyebrow::before{content:counter(secn,decimal-leading-zero) " /";counter-increment:secn;width:auto;height:auto;background:none;color:var(--act);font-weight:600}
main{counter-reset:secn}
.sec-head h2{white-space:normal!important;font-size:clamp(36px,4.6vw,64px);max-width:18ch}
.sec-head.center h2{margin-inline:auto}
.sec-head p{color:var(--mu)}

/* features: editorial index rows instead of identical rounded cards */
@media (min-width:1081px){
  #features>.wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:0 72px;align-items:start}
  #features .sec-head{position:sticky;top:120px;margin:0}
  #features .bento,#features .list-more{grid-column:2}
}
.bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;counter-reset:feat;border-top:1px solid var(--tx)}
.f,.f.wide{grid-column:auto;background:none;border:0;border-bottom:1px solid var(--ln2);border-radius:0;padding:28px 0 32px 0;overflow:visible;counter-increment:feat}
.f.wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px}
.f.wide>*{grid-column:1}.f.wide>.split{grid-column:2;grid-row:1/span 4;align-self:center;margin:0}
.f::before{content:counter(feat,decimal-leading-zero);position:static;inset:auto;display:block;background:none;opacity:1;font:500 12px var(--font-m);letter-spacing:.08em;color:var(--mu);margin-bottom:14px;transition:color .4s}
.f.seen::before{color:var(--act)}
.f:hover{border-color:var(--tx)}.f:hover::before{opacity:1}
.f .ic{display:none}
.f h3{font-size:22px;letter-spacing:var(--h3ls);font-weight:var(--h3w)}
.f p,.f ul{color:var(--mu)}
.addon{color:var(--act)}
.soon{background:transparent;border:1px solid var(--ln2);color:var(--tx);border-radius:4px}
.split .bar{background:var(--bg2);height:10px;border-radius:2px}.split .bar i{background:var(--tx);border-radius:2px}
.split .row:nth-child(2) .bar i{background:var(--ac)}
.list-more{border:0;border-top:1px solid var(--tx);border-radius:0;grid-template-columns:repeat(2,1fr)}
.list-more div{border-right:0!important;border-bottom:1px solid var(--ln)!important;padding:18px 0}
.list-more div:nth-child(odd){padding-right:24px}

/* steps */
.step .n{background:none;border:0;width:auto;height:auto;font:var(--hw) 56px/1 var(--font-d);color:var(--tx);letter-spacing:-.04em}
.steps .line{top:auto;bottom:auto;top:76px;left:0;right:0;background:var(--ln2)}
.steps .line i{background:var(--ac)}
.step{padding-top:100px}

/* pricing */
.plan{background:var(--sf);border:1px solid var(--ln2);border-radius:var(--rc)}
.plan.feat{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.plan.feat .k,.plan.feat .unit,.plan.feat .amt span:not(.d){color:var(--mu-inv)}
.plan.feat li svg{color:var(--ac2)}
.plan.feat .btn{background:var(--ac);color:var(--on)}
.plan.feat .btn:hover{background:var(--ach)}
.plan .amt .d{font-family:var(--font-d);font-weight:var(--hw);letter-spacing:-.03em;font-size:64px}
.plan li svg{color:var(--act)}
.bundle{background:var(--sf);border:1px solid var(--tx);border-radius:var(--rc)}
.save{background:var(--sf);border-color:var(--ln2);border-radius:var(--br)}
.save b{color:var(--act)}

/* form */
.demo-card{background:var(--sf);border:1px solid var(--ln2);border-radius:var(--rc)}
.demo-side{background:var(--bg2);border-color:var(--ln)}
.demo-side li svg{color:var(--act)}
.seg{background:var(--bg2);border-color:var(--ln2);border-radius:var(--br)}
.seg label{border-radius:calc(var(--br) - 2px);color:var(--mu)}
.seg input:checked+label{color:var(--bg)}
.seg .thumb{background:var(--tx);border-radius:calc(var(--br) - 2px)}
.field input,.field select{background:var(--sf);border:1px solid var(--inb);border-radius:8px;color:var(--tx)}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555B70' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.field input::placeholder{color:var(--ph)}
.field input:hover,.field select:hover{border-color:var(--tx)}
.field input:focus,.field select:focus{border-color:var(--tx);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 45%,transparent)}
.field[data-invalid] input,.field[data-invalid] select{border-color:#B42318}
.err{color:#B42318}
.status.ok{background:#ECF7F0;border-color:#1F7A4D;color:#14532D}
.status.bad{background:#FDF0EE;border-color:#B42318;color:#7A1A12}
.form-foot .fine a{color:var(--tx)}

/* faq */
.faq{border-top:1px solid var(--tx)}
.faq details{border-color:var(--ln2)}
.faq summary{font-family:var(--font-d);font-weight:var(--h3w);font-size:21px}
.faq summary .pm{border-color:var(--ln2)}
.faq summary .pm::before,.faq summary .pm::after{background:var(--tx)}
.faq details[open] .pm,.faq summary:hover .pm{background:var(--ac);border-color:var(--ac)}
.faq .a{color:var(--mu)}

/* closing CTA: big typographic statement, no glow */
.cta-band{background:var(--bg2);border:0;border-top:1px solid var(--tx);border-radius:0;text-align:left;padding:96px 0 120px;margin-bottom:0;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px 64px;align-items:end;box-shadow:0 0 0 100vmax var(--bg2);clip-path:inset(0 -100vmax)}
.cta-band h2{font-size:clamp(40px,6vw,88px);grid-row:span 2;max-width:14ch}
.cta-band p{margin:0;color:var(--mu)}
.cta-band .ctas{justify-content:flex-start}

/* footer & legal */
footer{background:var(--bg);border-top:1px solid var(--ln2)}
.foot h4{color:var(--mu)}
.foot a{color:var(--tx)}.foot a:hover{color:var(--tx);text-decoration-color:var(--ac);text-decoration-thickness:2px}
.legal-line{border-color:var(--ln)}
.legal p,.legal li{color:var(--tx2)}
.legal a{color:var(--link)}
.legal .callout{background:var(--sf);border-color:var(--ln2)}
.nf .code{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--tx);font-weight:var(--hw)}

@media (max-width:1080px){
  .hero .wrap.hero-grid{grid-template-columns:1fr;grid-template-areas:"copy" "side" "board";gap:36px}
  .cta-band{grid-template-columns:1fr}.cta-band h2{grid-row:auto}
}
@media (max-width:760px){
  .hero{padding:112px 0 64px}.hero h1{font-size:clamp(42px,12vw,64px)}
  .sec{padding:88px 0}
  .bento{grid-template-columns:1fr}.f.wide{grid-template-columns:1fr}.f.wide>.split{grid-column:1;grid-row:auto;margin-top:18px}
  .list-more{grid-template-columns:1fr}
  .step{padding-top:0}.step .n{font-size:36px;width:56px}
  .cta-band{padding:64px 0 80px}
}
@media (prefers-reduced-motion:reduce){.hero h1 .w{transform:none!important}}

/* Chat specifics: italic serif payoff in the single indigo accent (replaces gradient text) */
.hl{font-style:italic;color:var(--ac)}
.hero h1{font-size:clamp(52px,8.4vw,128px)}
.float{background:var(--sf);border:1px solid var(--ln2);border-radius:10px;box-shadow:0 14px 30px -20px rgba(22,20,58,.35);backdrop-filter:none}
.float .mono{color:var(--act)}
.side span.on{background:var(--bg2);color:var(--tx)}
.side .badge,.compose b{background:var(--ac);color:#fff}
.side .guest,.msg .who .gtag{color:var(--act);border-color:color-mix(in srgb,var(--act) 45%,transparent)}
.av{color:var(--tx)}
.msg p{color:var(--tx)}.msg .men{color:var(--act);background:#ECEAFD;border-radius:4px;padding:0 3px}
.msg .pin{display:inline-flex;align-items:center;gap:5px;border-color:var(--ln2)}
.typing{background:var(--bg2)}
.compose{background:var(--sf);border-color:var(--ln2)}
.sb{border-top:1px solid var(--tx);gap:0 40px}
.sb .f{border-bottom:0}
.sb .f::before{content:none}
.seg[data-v="demo"] .thumb{transform:translateX(100%)}
.field select{background-repeat:no-repeat;background-position:right 14px center}

/* review13: one-line section headings on desktop (Victor), AA focus indicators */
@media (min-width:1081px){
  .sec-head h2{white-space:nowrap!important;max-width:none;font-size:clamp(36px,3.3vw,48px)}
  #features>.wrap{display:block}
  #features .sec-head{position:static;margin:0 0 56px}
  #features .bento,#features .list-more{grid-column:auto}
}
.seg input:focus-visible+label{outline:2px solid var(--focus);outline-offset:2px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.plan.feat :focus-visible{outline-color:var(--focus-inv)}

/* review14: Jon's button colors (#5B47E8 / hover #6A58F5, white text 5.98 / 4.85); one radius scale (8 inner / 12 control / 16 card / pill) */
.plan.feat .btn{background:var(--bt);color:var(--bton)}
.plan.feat .btn:hover{background:var(--bth)}
.board,.mobile-menu{border-radius:var(--rc)}
.compose,.float,.menu-btn,.field input,.field select{border-radius:var(--r)}

/* review15: hero copy + product side by side above the fold (Kauã), more presence without glows */
@media (min-width:961px){
  .hero{padding:116px 0 72px}
  .hero .wrap.hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"copy board" "side board";grid-template-rows:auto auto;gap:28px 64px;align-items:center;min-height:min(680px,calc(100vh - 150px));align-content:center}
  .hero-copy{align-self:end}.hero-side{align-self:start}
  .hero h1{font-size:clamp(44px,5.2vw,86px);max-width:13ch}
}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--ln) 1px,transparent 1px),linear-gradient(90deg,var(--ln) 1px,transparent 1px);background-size:56px 56px;opacity:.55;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 100%)}
.hero .board{box-shadow:14px 14px 0 -1px color-mix(in srgb,var(--ac) 22%,var(--bg)),14px 14px 0 0 var(--tx)}
@media (min-width:961px) and (prefers-reduced-motion:no-preference){
  .hero .board{animation:r15tilt 1.2s cubic-bezier(.2,.8,.2,1) .25s both}
  @keyframes r15tilt{from{transform:perspective(1400px) rotateY(-9deg) rotateX(4deg) translateY(24px)}to{transform:none}}
}
/* review16: quieter blueprint grid (fades out behind the copy), tighter offset shadow */
.hero::before{background-size:64px 64px;opacity:.32;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 72% 40%,#000 0,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 72% 40%,#000 0,transparent 75%)}
.hero .board{box-shadow:10px 10px 0 -1px color-mix(in srgb,var(--ac) 16%,var(--bg)),10px 10px 0 0 color-mix(in srgb,var(--tx) 70%,var(--bg))}
@media (max-width:960px){.hero .board{box-shadow:6px 6px 0 -1px color-mix(in srgb,var(--ac) 16%,var(--bg)),6px 6px 0 0 color-mix(in srgb,var(--tx) 70%,var(--bg))}}
/* review16: floating cards stay inside the mockup on narrow desktops */
@media (min-width:961px) and (max-width:1280px){.board-wrap .f1{right:12px;top:56px}.board-wrap .f2{left:12px;bottom:12px}}
/* review17: Calls & video card bottom 12px (was -18px, overhung mockup) */