@font-face{font-family:"Inter Display";font-weight:900;font-display:swap;src:url(InterDisplay-Black.woff) format("woff")}
@font-face{font-family:"Inter Display";font-weight:800;font-display:swap;src:url(InterDisplay-ExtraBold.woff) format("woff")}
:root{--plum:#1F1233;--plum2:#2B1A47;--pink:#EE3A8C;--purple:#7A3EE6;--yellow:#FFD43B;--ink:#1F1233;--mute:#6A6078;--bg:#FBF9FE;--card:#fff;--line:#E9E4F0;--r:18px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 17px/1.6 "Avenir Next",ui-rounded,"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
a{color:var(--purple)}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:var(--yellow);color:var(--plum);padding:8px 14px;z-index:9}
.skip:focus{left:8px;top:8px}
h1,h2,h3{font-family:"Inter Display","Avenir Next",system-ui,sans-serif;font-weight:900;line-height:1;letter-spacing:-.035em;margin:0 0 .4em}
h1{font-size:clamp(46px,11vw,112px);line-height:.92;letter-spacing:-.045em}
.wordmark{font-size:clamp(64px,16vw,150px)}
.tag{font-size:clamp(20px,3vw,28px);font-weight:800;margin:0 0 14px;color:#fff;font-family:"Inter Display",system-ui,sans-serif}
h2{font-size:clamp(28px,4.5vw,44px)}
h3{font-size:20px;letter-spacing:-.01em}
.dot{color:var(--yellow)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#F06AB0;margin:0 0 14px}
.hero{background:var(--plum);color:#fff;position:relative;overflow:hidden}
.hero .wrap{padding-top:28px;padding-bottom:72px;position:relative;z-index:1}
.hero:before{content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px;border-radius:50%;background:var(--pink)}
.hero:after{content:"";position:absolute;right:120px;top:60px;width:280px;height:280px;border-radius:50%;background:var(--purple);mix-blend-mode:screen}
.nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:64px;font-weight:700;letter-spacing:.14em;font-size:13px}
.nav a{color:#fff;text-decoration:none}
.nav .pill{background:var(--yellow);color:var(--plum);padding:9px 16px;border-radius:99px;letter-spacing:.06em}
.lead{font-size:clamp(18px,2.4vw,22px);color:#E4DAF5;max-width:620px;margin:0 0 28px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px;padding:0;list-style:none}
.badges li{border-radius:99px;padding:7px 14px;font-size:13px;font-weight:800;letter-spacing:.06em;color:#fff}
.b1{background:var(--pink)}.b2{background:var(--purple)}.b3{background:#2B1A47;border:1px solid #4a3470}
form.join{display:flex;gap:10px;flex-wrap:wrap;max-width:560px}
form.join input[type=email]{flex:1 1 240px;font:inherit;padding:15px 18px;border-radius:14px;border:2px solid transparent;background:#fff;color:var(--ink);min-width:0}
form.join input[type=email]:focus{outline:3px solid var(--yellow)}
form.join button{font:inherit;font-weight:800;padding:15px 24px;border:0;border-radius:14px;background:var(--yellow);color:var(--plum);cursor:pointer}
form.join button:hover{filter:brightness(1.05)}
.hp{position:absolute;left:-9999px}
.note{font-size:14px;color:#BBAAD6;margin:12px 0 0}
.msg{margin:12px 0 0;font-weight:700;color:var(--yellow);min-height:1.5em}
section{padding:72px 0}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.card .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:900;margin-bottom:14px}
.card p{margin:0;color:var(--mute)}
.mock{max-width:420px;margin:0 auto;background:#fff;border-radius:22px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(31,18,51,.14);overflow:hidden}
.mock .top{background:var(--plum);color:#fff;padding:22px}
.mock .top b{font-size:40px;line-height:.95;letter-spacing:-.04em;display:block;font-family:"Inter Display",sans-serif;font-weight:900}
.mock .band{padding:9px 22px;color:#fff;font-size:13px;font-weight:700}
.mock .body{padding:18px}
.ev{border-left:6px solid;border-radius:12px;padding:10px 14px;margin:0 0 10px;font-size:15px}
.ev small{display:block;font-size:11px;letter-spacing:.16em;font-weight:800}
.ev.a{background:#FFE4F1;border-color:var(--pink);color:#8F0F50}
.ev.e{background:#EEE4FF;border-color:var(--purple);color:#3E1A93}
.ev.m{background:var(--plum);border-color:var(--yellow);color:#fff}
.split{display:grid;gap:40px;grid-template-columns:1.1fr .9fr;align-items:center}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;padding:0 0 18px 54px;position:relative}
.steps li:before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--plum);color:var(--yellow);display:grid;place-items:center;font-weight:900}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:0 0 10px}
.faq summary{font-weight:800;cursor:pointer}
.faq p{margin:10px 0 0;color:var(--mute)}
.cta{background:var(--plum);color:#fff;text-align:center}
.cta .lead{margin-left:auto;margin-right:auto}
.cta form.join{margin:0 auto;justify-content:center}
footer{background:#150C25;color:#BBAAD6;font-size:14px;padding:32px 0}
footer a{color:#E4DAF5}
@media(max-width:760px){.split{grid-template-columns:1fr}.hero:before{width:300px;height:300px;right:-110px;top:-110px}.hero:after{width:180px;height:180px;right:40px;top:40px}.nav{margin-bottom:40px}section{padding:52px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Demo hero: sources -> agents -> weekly email, as one piece */
.hero-flow:before,.hero-flow:after{display:none}
.hero-flow .wrap{padding-bottom:64px}
.hero-flow .nav{margin-bottom:48px}
.intro{text-align:center;max-width:760px;margin:0 auto 44px}
.hl{font-size:clamp(30px,6.4vw,68px);line-height:1;letter-spacing:-.04em;margin:0 0 18px}
.intro .lead{margin:0 auto}
.hero-join{display:flex;flex-direction:column;align-items:center;margin-top:44px;text-align:center}
.hero-join form.join{justify-content:center;width:100%}
.dg{display:grid;grid-template-columns:minmax(0,1fr) 64px auto 64px minmax(0,1fr);align-items:stretch;background:var(--plum2);border:1px solid #3A2760;border-radius:26px;padding:26px}
.col{display:flex;flex-direction:column;min-width:0}
.col.mid{align-items:center}
.stage{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.06em;color:#E4DAF5;white-space:nowrap}
.stage b{width:24px;height:24px;border-radius:50%;background:var(--yellow);color:var(--plum);display:grid;place-items:center;font-size:13px;flex:none}
.dg-src{display:grid;gap:10px;flex:1}
.src{background:#fff;color:var(--ink);border-radius:14px;padding:10px 12px}
.src-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px}
.src-h .cnt{margin-left:auto;background:#FFE4F1;color:#8F0F50;border-radius:99px;padding:1px 8px;font-size:11px;font-weight:800;white-space:nowrap}
.src i{width:18px;height:18px;border-radius:5px;flex:none;display:inline-block}
.ic-chat{background:#2BB673;border-radius:50% 50% 50% 4px!important}
.ic-doc{background:var(--pink)}
.ic-web{background:var(--purple);border-radius:50%!important}
.ic-cal{background:var(--yellow);border-top:5px solid var(--plum)}
.ic-mail{background:#fff;border:3px solid var(--purple);border-radius:4px!important}
.feed{height:19px;overflow:hidden;margin-top:4px}
.roll{animation:roll 6s steps(4) infinite}
.src:nth-child(2) .roll{animation-duration:7.5s}.src:nth-child(5) .roll{animation-duration:6.8s}.src:nth-child(3) .roll{animation-duration:9s}.src:nth-child(4) .roll{animation-duration:8s}
.roll p{margin:0;font-size:12.5px;line-height:19px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes roll{to{transform:translateY(-50%)}}
.pipe{position:relative;margin-top:38px}
.pipe span{position:absolute;top:var(--y,50%);left:0;width:11px;height:11px;border-radius:50%;background:#B9A6DA;opacity:0;animation:inx 2.4s linear infinite}
.pipe.in span:nth-child(1){--y:12%;animation-delay:0s}.pipe.in span:nth-child(2){--y:37%;animation-delay:.4s}.pipe.in span:nth-child(3){--y:62%;animation-delay:.8s}.pipe.in span:nth-child(4){--y:88%;animation-delay:1.2s}.pipe.in span:nth-child(5){--y:25%;animation-delay:1.6s}.pipe.in span:nth-child(6){--y:75%;animation-delay:2s}
.pipe.out span{background:var(--yellow);--y:50%;animation-name:flowx;animation-duration:2s;box-shadow:0 0 12px rgba(255,212,59,.7)}
.pipe.out span:nth-child(2){animation-delay:.5s}.pipe.out span:nth-child(3){animation-delay:1s}.pipe.out span:nth-child(4){animation-delay:1.5s}
@keyframes inx{0%{opacity:0;transform:translate(0,-50%)}15%{opacity:1}100%{opacity:0;left:100%;top:50%;transform:translate(-100%,-50%) scale(.5)}}
@keyframes flowx{0%{opacity:0;transform:translate(0,-50%)}20%,80%{opacity:1}100%{opacity:0;left:100%;transform:translate(-100%,-50%)}}
.agent{position:relative;width:148px;height:148px;display:grid;place-items:center;margin:auto 0 0}
.agent .ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--pink),var(--purple),var(--yellow),var(--pink));animation:spin 4s linear infinite;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px))}
.agent .core{width:120px;height:120px;border-radius:50%;background:var(--plum);display:grid;place-content:center;text-align:center;animation:pulse 2s ease-in-out infinite}
.agent .core b{font-family:"Inter Display",sans-serif;font-weight:900;font-size:20px;letter-spacing:-.02em}
.agent .core small{font-size:11px;color:#BBAAD6}
.bin{margin:14px 0 auto;text-align:center;font-size:13px;line-height:1.45;color:#BBAAD6}
.bin s{color:#8E7BAE}.bin span{color:var(--yellow);font-weight:800}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(238,58,140,.12)}}
.dg-mail{background:#fff;color:var(--ink);border-radius:16px;overflow:hidden;margin:auto 0}
.mtop{background:var(--plum);padding:12px 14px;border-bottom:4px solid var(--pink)}
.mtop small{display:block;font-size:10px;letter-spacing:.16em;font-weight:800;color:#F06AB0}
.mtop b{font-family:"Inter Display",sans-serif;font-weight:900;font-size:22px;letter-spacing:-.03em;color:#fff}
.mrow{margin:9px 11px;border-left:5px solid;border-radius:10px;padding:6px 10px;font-size:13.5px;opacity:0;transform:translateY(8px);animation:row 8s ease-out infinite}
.mrow:last-child{margin-bottom:12px}
.mrow small{display:block;font-size:10px;letter-spacing:.14em;font-weight:800}
.mrow.a{background:#FFE4F1;border-color:var(--pink);color:#8F0F50}
.mrow.e{background:#EEE4FF;border-color:var(--purple);color:#3E1A93}
.mrow.m{background:var(--plum);border-color:var(--yellow);color:#fff}.mrow.m small{color:var(--yellow)}
.r2{animation-delay:.6s!important}.r3{animation-delay:1.2s!important}.r4{animation-delay:1.8s!important}
@keyframes row{0%,12%{opacity:0;transform:translateY(8px)}20%,88%{opacity:1;transform:none}100%{opacity:0}}
@media(max-width:860px){
.dg{grid-template-columns:1fr;padding:18px;border-radius:22px}
.col.mid{order:0}
.pipe{margin:0;height:52px}
.pipe span{left:var(--x,50%);top:0}
.pipe.in span:nth-child(1){--x:12%}.pipe.in span:nth-child(2){--x:36%}.pipe.in span:nth-child(3){--x:64%}.pipe.in span:nth-child(4){--x:88%}.pipe.in span:nth-child(5){--x:24%}.pipe.in span:nth-child(6){--x:76%}
.pipe.out span{--x:50%}
@keyframes inx{0%{opacity:0;transform:translate(-50%,0)}15%{opacity:1}100%{opacity:0;top:100%;left:50%;transform:translate(-50%,-100%) scale(.5)}}
@keyframes flowx{0%{opacity:0;transform:translate(-50%,0)}20%,80%{opacity:1}100%{opacity:0;top:100%;transform:translate(-50%,-100%)}}
.stage{justify-content:center}
.dg-src{grid-template-columns:1fr 1fr}
.src:last-child:nth-child(odd){grid-column:1/-1}
.agent{margin:0}.bin{margin:12px 0 0}
}
@media(max-width:480px){.dg-src{grid-template-columns:1fr}.intro{text-align:left}.hero-join{align-items:stretch;text-align:left}}
/* Reduce Motion handling for the flow lives under html.calm below */
/* Demo page: story sections */
.kicker{display:inline-block;margin:0 0 22px;padding:7px 14px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:700;color:#E4DAF5;letter-spacing:.02em}
.hero-flow .lead{color:#D9CCEF}
.hero-join .note{color:#A996C8}
.dot.pk{color:var(--pink)}
.pain{background:var(--bg);padding:96px 0 88px}
.pain h2{max-width:680px}
.notes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 16px;row-gap:30px;margin:36px 0 56px}
.note-c{margin:0;background:#fff;border:1px solid var(--line);border-radius:20px 20px 20px 6px;padding:20px 20px 22px;box-shadow:0 1px 0 var(--line),0 12px 28px rgba(31,18,51,.06)}
.note-c:nth-child(even){transform:translateY(14px)}
.when{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:10px}
.note-c blockquote{margin:0;font-family:"Inter Display",system-ui,sans-serif;font-weight:800;font-size:19px;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.note-c em{font-style:normal;background:linear-gradient(transparent 60%,#FFE88A 60%)}
.punch{font-family:"Inter Display",system-ui,sans-serif;font-weight:800;font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;line-height:1.2;margin:0;color:var(--mute)}
.punch b{color:var(--ink);font-weight:900}
.anatomy{background:#fff;padding:96px 0}
.split2{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.big-mail{background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 30px 70px rgba(31,18,51,.16);max-width:420px;width:100%;justify-self:center;padding-bottom:10px}
.big-mail .mtop{padding:20px 22px;border-bottom:5px solid var(--pink)}
.big-mail .mtop b{font-size:32px}
.kids{display:flex;gap:8px;padding:16px 20px 2px}
.k{font-size:12px;font-weight:800;border-radius:99px;padding:5px 11px;color:#fff}.k.a{background:var(--pink)}.k.e{background:var(--purple)}
.sec{margin:16px 20px 8px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.big-mail .ev{margin:0 18px 10px}
.ev.m small{color:var(--yellow)}
.callouts{list-style:none;counter-reset:c;padding:0;margin:28px 0 0}
.callouts li{counter-increment:c;position:relative;padding:0 0 22px 56px;color:var(--mute);font-size:17px}
.callouts li b{display:block;color:var(--ink);font-size:19px;font-family:"Inter Display",system-ui,sans-serif;font-weight:800;letter-spacing:-.01em;margin-bottom:2px}
.callouts li:before{content:counter(c);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:900;color:#fff;background:var(--pink)}
.callouts li:nth-child(2):before{background:var(--plum);color:var(--yellow)}.callouts li:nth-child(3):before{background:var(--purple)}.callouts li:nth-child(4):before{background:var(--yellow);color:var(--plum)}
.trust{background:var(--bg);padding:96px 0}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.t{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}
.t h3{margin:14px 0 6px}.t p{margin:0;color:var(--mute)}
.ti{display:block;width:44px;height:44px;border-radius:14px;position:relative}
.t1{background:#FFE4F1}.t1:after{content:"";position:absolute;inset:13px;border:3px solid var(--pink);border-radius:50%}
.t2{background:#EEE4FF}.t2:after{content:"";position:absolute;left:12px;right:12px;top:20px;height:4px;border-radius:2px;background:var(--purple)}
.t3{background:#FFF4C7}.t3:after{content:"";position:absolute;left:15px;top:11px;width:9px;height:17px;border:solid var(--plum);border-width:0 4px 4px 0;transform:rotate(45deg)}
.faq{background:#fff}
.faq details{background:var(--bg)}
.cta{padding:104px 0}
.cta h2{font-size:clamp(34px,5.5vw,56px)}
html.js-rv .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
html.js-rv .rv.in{opacity:1;transform:none}
html.js-rv .note-c.rv.in:nth-child(even){transform:translateY(14px)}
@media(max-width:900px){.notes{grid-template-columns:1fr 1fr}.split2{grid-template-columns:1fr;gap:44px}.split2 .big-mail{order:2}.tgrid{grid-template-columns:1fr}}
@media(max-width:560px){.notes{grid-template-columns:1fr}.note-c:nth-child(even),html.js-rv .note-c.rv.in:nth-child(even){transform:none}.pain,.anatomy,.trust{padding:64px 0}.cta{padding:72px 0}}
.foot{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.cta .kicker{margin-bottom:18px}
.oops{list-style:none;padding:0;margin:0 auto 40px;max-width:780px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.oops li{position:relative;padding:10px 18px;border-radius:12px;background:var(--pink);font-weight:800;font-size:16px;color:#fff;transform:rotate(var(--r,-2deg));box-shadow:0 8px 18px rgba(0,0,0,.25)}
.oops li:nth-child(3n+2){background:var(--purple)}.oops li:nth-child(3n){background:var(--yellow);color:var(--plum)}
.oops li:nth-child(2){--r:1.5deg}.oops li:nth-child(3){--r:-1deg}.oops li:nth-child(4){--r:2deg}.oops li:nth-child(5){--r:-1.5deg}.oops li:nth-child(6){--r:1deg}
.oops li:after{content:"";position:absolute;left:10px;right:10px;top:50%;height:3px;border-radius:2px;background:var(--plum);transform:scaleX(0);transform-origin:left;transition:transform .5s ease .5s}
.oops li.in:after,html:not(.js-rv) .oops li:after{transform:scaleX(1)}
html.js-rv .oops li.rv{transform:translateY(18px) rotate(var(--r,-2deg))}html.js-rv .oops li.rv.in{transform:rotate(var(--r,-2deg))}

@media(max-width:560px){.notes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;margin:28px -20px 40px;padding:4px 20px 18px;scrollbar-width:none}.notes::-webkit-scrollbar{display:none}.note-c{scroll-snap-align:start}}
.nw{white-space:nowrap}
/* Joke: part-time scribbled out to full-time */
.scrib{position:relative;display:inline-block}
.scrib svg{position:absolute;left:-6%;top:12%;width:112%;height:80%;overflow:visible}
.scrib path{fill:none;stroke:var(--pink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.full{display:inline-block;color:var(--pink);font-style:italic;transform:rotate(-4deg);margin:0 .06em 0 .14em}
html.js-rv .joke .scrib path{stroke-dashoffset:1;transition:stroke-dashoffset .7s ease-in-out .7s}
html.js-rv .joke.in .scrib path{stroke-dashoffset:0}
html.js-rv .joke .full{max-width:0;opacity:0;overflow:clip;overflow-clip-margin:.3em;margin:0;transform:rotate(-4deg) scale(.4);transition:max-width .45s ease 1.4s,margin .45s ease 1.4s,opacity .2s ease 1.5s,transform .5s cubic-bezier(.3,1.8,.5,1) 1.5s}
html.js-rv .joke.in .full{max-width:3.2em;opacity:1;margin:0 .06em 0 .14em;transform:rotate(-4deg) scale(1)}
html.js-rv .joke.in .scrib{color:#A99FB6;transition:color .3s ease 1.2s}
/* Playful note cards: tilt, bouncy pop-in, marker swipe, hover wiggle */
.note-c{--tilt:-1.2deg;transform:rotate(var(--tilt));transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .3s ease}
.note-c:nth-child(even){--tilt:1.4deg;transform:translateY(14px) rotate(var(--tilt))}
.note-c:nth-child(3n){--tilt:-.6deg}.note-c:nth-child(5n){--tilt:1.8deg}
.note-c:hover{transform:translateY(-4px) rotate(0) scale(1.03);box-shadow:0 20px 40px rgba(31,18,51,.12)}
.note-c em{background:linear-gradient(transparent 58%,#FFE88A 58%) no-repeat 0 0/100% 100%}
html.js-rv .note-c.rv{opacity:0;transform:translateY(30px) rotate(calc(var(--tilt) * -4)) scale(.9);transition:opacity .4s ease,transform .6s cubic-bezier(.3,1.6,.5,1),box-shadow .3s ease}
html.js-rv .note-c.rv.in{opacity:1;transform:rotate(var(--tilt))}
html.js-rv .note-c.rv.in:nth-child(even){transform:translateY(14px) rotate(var(--tilt))}
html.js-rv .note-c.rv.in:hover{transform:translateY(-4px) rotate(0) scale(1.03)}
html.js-rv .note-c em{background-size:0 100%;transition:background-size .5s ease .6s}
html.js-rv .note-c.in em{background-size:100% 100%}
@media(max-width:560px){.note-c,.note-c:nth-child(even),html.js-rv .note-c.rv.in,html.js-rv .note-c.rv.in:nth-child(even){transform:none}}
html.js-rv .joke .scrib path{opacity:0;transition:stroke-dashoffset .7s ease-in-out .7s,opacity 0s linear .7s}
html.js-rv .joke.in .scrib path{opacity:1}
/* Blue jumper saga */
.jumper{background:var(--plum);color:#fff;padding:96px 0 40px}
.jumper h2{color:#fff;font-size:clamp(40px,7vw,80px)}
.jlead{font-size:clamp(18px,2.2vw,21px);color:#D9CCEF;max-width:440px;margin:0 0 22px}
.jcount{font-family:"Inter Display",system-ui,sans-serif;font-weight:800;font-size:clamp(20px,2.6vw,26px);letter-spacing:-.01em;color:#BBAAD6;margin:0}
.jcount b{color:var(--yellow);font-weight:900}
.jsplit{grid-template-columns:1fr 1fr}
.phone{width:100%;max-width:370px;justify-self:center;background:#150C25;border-radius:38px;padding:10px;box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 0 0 2px #3A2760}
.ph-top{display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:28px 28px 0 0;padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.ph-top i{width:34px;height:34px;flex:none}
.ph-top b{display:block;font-size:15px}.ph-top small{display:block;font-size:11.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}
.unread{margin-left:auto;background:var(--pink);color:#fff;font-weight:800;font-size:12px;border-radius:99px;padding:3px 9px;animation:pulse2 1.6s ease-in-out infinite}
@keyframes pulse2{50%{transform:scale(1.12)}}
.thread{height:470px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;background:#F3EEF9;border-radius:0 0 28px 28px;padding:12px 12px 16px}
.bb{align-self:flex-start;max-width:86%;background:#fff;color:#2D2440;border-radius:14px 14px 14px 4px;padding:6px 11px 7px;font-size:14px;line-height:1.35;box-shadow:0 1px 1px rgba(31,18,51,.08);flex:none}
.bb b{display:block;font-size:12px;font-weight:800}
.c1 b{color:#C2186B}.c2 b{color:#5B2BC4}.c3 b{color:#0E8A5F}.c4 b{color:#B86A00}.c5 b{color:#1A6FB5}.c6 b{color:#8A3FA0}.c7 b{color:#B3261E}.c8 b{color:#2C7A7B}
html.js-rv .phone.rv{transform:translateY(30px) rotate(-3deg)}html.js-rv .phone.rv.in{transform:rotate(-2deg)}
html.js-rv .bb{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-6px;transform:scale(.85);transform-origin:left bottom}
html.js-rv .phone.in .bb{animation:bub .38s cubic-bezier(.3,1.5,.5,1) both}
@keyframes bub{from{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-6px;transform:scale(.85)}to{opacity:1;max-height:120px;padding-top:6px;padding-bottom:7px;margin-top:0;transform:none}}
.jumper+.cta{padding-top:64px}
.cta h2{max-width:860px;margin-left:auto;margin-right:auto}
@media(max-width:900px){.jsplit{grid-template-columns:1fr}.jumper{padding:64px 0 24px}}
@media(max-width:420px){.thread{height:420px}}
@media(prefers-reduced-motion:reduce){.unread{animation:none}}
/* Hero v3: chaos phone */
.hgrid{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center}
.htext .hl{font-size:clamp(34px,4.3vw,54px)}
.htext .hero-join{align-items:flex-start;text-align:left;margin-top:30px}
.htext .hero-join form.join{justify-content:flex-start}
.hvis{display:flex;flex-direction:column;align-items:center}
.hvis .jcount{margin-top:22px;text-align:center;font-size:clamp(17px,2vw,20px)}
.hphone{position:relative}
.nstack{position:absolute;left:18px;right:18px;top:16px;z-index:3;display:flex;flex-direction:column-reverse;gap:6px}
.nb{display:flex;gap:9px;align-items:flex-start;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:16px;padding:9px 11px;box-shadow:0 10px 26px rgba(31,18,51,.28);color:var(--ink)}
.nb i{width:26px;height:26px;border-radius:7px;flex:none}
.nb i.ic-cal{border-top-width:7px}.nb i.ic-mail{border-width:4px}
.nb>div{min-width:0;flex:1}
.nb b{display:flex;justify-content:space-between;font-size:12.5px}
.nb b span{font-weight:600;font-size:11px;color:var(--mute)}
.nb p{margin:1px 0 0;font-size:13px;line-height:1.3;color:#463C55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.how{background:var(--plum);color:#fff;padding:96px 0}
.how h2{color:#fff;max-width:760px}
.how-sub{color:#D9CCEF;font-size:clamp(17px,2.2vw,20px);max-width:640px;margin:0 0 36px}
@media(max-width:900px){.hgrid{grid-template-columns:1fr;gap:40px}.how{padding:64px 0}}
@media(max-width:480px){.htext .hero-join{align-items:stretch}.nstack{left:12px;right:12px}}

/* Hero chat saga timing (48 messages, ~30s) */
html.js-rv .phone.in .bb:nth-child(1){animation-delay:0.80s}
html.js-rv .phone.in .bb:nth-child(2){animation-delay:1.32s}
html.js-rv .phone.in .bb:nth-child(3){animation-delay:1.84s}
html.js-rv .phone.in .bb:nth-child(4){animation-delay:2.36s}
html.js-rv .phone.in .bb:nth-child(5){animation-delay:2.88s}
html.js-rv .phone.in .bb:nth-child(6){animation-delay:3.40s}
html.js-rv .phone.in .bb:nth-child(7){animation-delay:3.92s}
html.js-rv .phone.in .bb:nth-child(8){animation-delay:4.44s}
html.js-rv .phone.in .bb:nth-child(9){animation-delay:4.96s}
html.js-rv .phone.in .bb:nth-child(10){animation-delay:5.48s}
html.js-rv .phone.in .bb:nth-child(11){animation-delay:6.00s}
html.js-rv .phone.in .bb:nth-child(12){animation-delay:6.52s}
html.js-rv .phone.in .bb:nth-child(13){animation-delay:7.04s}
html.js-rv .phone.in .bb:nth-child(14){animation-delay:7.56s}
html.js-rv .phone.in .bb:nth-child(15){animation-delay:8.08s}
html.js-rv .phone.in .bb:nth-child(16){animation-delay:8.60s}
html.js-rv .phone.in .bb:nth-child(17){animation-delay:9.12s}
html.js-rv .phone.in .bb:nth-child(18){animation-delay:9.64s}
html.js-rv .phone.in .bb:nth-child(19){animation-delay:10.16s}
html.js-rv .phone.in .bb:nth-child(20){animation-delay:10.68s}
html.js-rv .phone.in .bb:nth-child(21){animation-delay:11.20s}
html.js-rv .phone.in .bb:nth-child(22){animation-delay:11.72s}
html.js-rv .phone.in .bb:nth-child(23){animation-delay:12.24s}
html.js-rv .phone.in .bb:nth-child(24){animation-delay:12.76s}
html.js-rv .phone.in .bb:nth-child(25){animation-delay:13.28s}
html.js-rv .phone.in .bb:nth-child(26){animation-delay:13.80s}
html.js-rv .phone.in .bb:nth-child(27){animation-delay:14.32s}
html.js-rv .phone.in .bb:nth-child(28){animation-delay:14.84s}
html.js-rv .phone.in .bb:nth-child(29){animation-delay:15.36s}
html.js-rv .phone.in .bb:nth-child(30){animation-delay:15.88s}
html.js-rv .phone.in .bb:nth-child(31){animation-delay:18.68s}
html.js-rv .phone.in .bb:nth-child(32){animation-delay:21.48s}
html.js-rv .phone.in .bb:nth-child(33){animation-delay:22.00s}
html.js-rv .phone.in .bb:nth-child(34){animation-delay:22.52s}
html.js-rv .phone.in .bb:nth-child(35){animation-delay:23.04s}
html.js-rv .phone.in .bb:nth-child(36){animation-delay:23.56s}
html.js-rv .phone.in .bb:nth-child(37){animation-delay:24.08s}
html.js-rv .phone.in .bb:nth-child(38){animation-delay:24.60s}
html.js-rv .phone.in .bb:nth-child(39){animation-delay:25.12s}
html.js-rv .phone.in .bb:nth-child(40){animation-delay:25.64s}
html.js-rv .phone.in .bb:nth-child(41){animation-delay:26.16s}
html.js-rv .phone.in .bb:nth-child(42){animation-delay:26.68s}
html.js-rv .phone.in .bb:nth-child(43){animation-delay:27.20s}
html.js-rv .phone.in .bb:nth-child(44){animation-delay:27.72s}
html.js-rv .phone.in .bb:nth-child(45){animation-delay:28.24s}
html.js-rv .phone.in .bb:nth-child(46){animation-delay:28.76s}
html.js-rv .phone.in .bb:nth-child(47){animation-delay:29.28s}
html.js-rv .phone.in .bb:nth-child(48){animation-delay:29.80s}
html.js-rv .phone.in .bb.long{animation-name:bubL}
@keyframes bubL{from{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-6px;transform:scale(.85)}to{opacity:1;max-height:900px;padding-top:6px;padding-bottom:7px;margin-top:0;transform:none}}
.bb.long{max-width:94%;font-size:13.5px;background:#FFF7FB;border:1px solid #F7C6DD}
.bb .caps{display:inline;font-size:inherit;color:#C2186B;letter-spacing:.02em}
.c9>b{color:#C2186B}
.qt{display:block;margin:3px 0 5px;padding:4px 8px;border-left:3px solid #C9B8E6;background:#F3EEF9;border-radius:6px;font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.qt b{display:block;font-size:11px}
/* Hero alerts: one banner at a time, stacked, with a climbing count */
.nstack{display:block;height:58px}
.nstack:before,.nstack:after{content:"";position:absolute;left:10px;right:10px;top:8px;height:52px;border-radius:16px;background:rgba(255,255,255,.55);box-shadow:0 6px 14px rgba(31,18,51,.18);opacity:0;transition:opacity .3s,transform .3s}
.nstack:after{left:20px;right:20px;top:16px;background:rgba(255,255,255,.35)}
.nstack.multi:before{opacity:1;transform:translateY(4px)}.nstack.multi:after{opacity:1;transform:translateY(6px)}
.nstack .nb{position:absolute;left:0;right:0;top:0;z-index:2}
.nb.in{animation:nbDrop .45s cubic-bezier(.3,1.4,.5,1) both}
.nb.leave{animation:nbLeave .35s ease both;z-index:1}
@keyframes nbDrop{from{opacity:0;transform:translateY(-26px) scale(.96)}}
@keyframes nbLeave{to{opacity:0;transform:translateY(10px) scale(.92)}}
.ncount{position:absolute;left:-4px;top:-8px;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--pink);color:#fff;font-style:normal;font-weight:800;font-size:12px;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.ncount.bump{animation:bump .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes bump{50%{transform:scale(1.35)}}
.unread.bump{animation:bump .35s cubic-bezier(.3,1.8,.5,1)}
/* Phone explosion -> clean email */
.phwrap{position:relative;width:100%;display:flex;justify-content:center}
.hphone.shake{animation:shk .25s linear infinite}
.hphone.shake2{animation:shk2 .09s linear infinite}
@keyframes shk{0%,100%{transform:rotate(-2deg)}25%{transform:rotate(-3deg) translateX(-2px)}75%{transform:rotate(-1deg) translateX(2px)}}
@keyframes shk2{0%{transform:rotate(-4deg) translate(-6px,2px) scale(1.03)}50%{transform:rotate(0) translate(6px,-3px) scale(1.06)}100%{transform:rotate(-4deg) translate(-6px,2px) scale(1.03)}}
.hphone.gone{animation:none;transform:scale(1.35);opacity:0;filter:brightness(3);transition:transform .18s ease-out,opacity .18s ease-out,filter .18s}
.boom{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:visible}
.flash{position:fixed;inset:0;background:radial-gradient(circle at 70% 40%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%);opacity:0;pointer-events:none;z-index:30;animation:flash .45s ease-out}
@keyframes flash{15%{opacity:1}100%{opacity:0}}
@keyframes fly{0%{transform:translate(-50%,-50%) rotate(0) scale(.4);opacity:1}80%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(1);opacity:0}}
.hmail{width:100%;max-width:370px;animation:mailIn .7s cubic-bezier(.3,1.5,.5,1) both}
.hmail .mrow{opacity:1;transform:none;animation:none}
@keyframes mailIn{0%{opacity:0;transform:scale(.3) rotate(8deg)}100%{opacity:1;transform:none}}
.hmail .ok{display:flex;align-items:center;gap:8px;margin:0 12px 14px;font-size:13px;font-weight:700;color:#0E8A5F}
.stopbtn{margin-top:18px;font:inherit;font-weight:800;font-size:15px;padding:11px 20px;border-radius:99px;border:2px solid var(--yellow);background:transparent;color:var(--yellow);cursor:pointer;transition:background .2s,color .2s,transform .2s}
.stopbtn:hover{background:var(--yellow);color:var(--plum);transform:scale(1.04)}
.stopbtn.urgent{animation:bump 1s ease-in-out infinite}
/* Scrollable hero chat: newest at the bottom, scroll up to read the banter */
.hphone .thread{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#C9B8E6 transparent;-webkit-overflow-scrolling:touch}
.hphone .thread:before{content:"";margin-top:auto}
.hphone .thread::-webkit-scrollbar{width:5px}.hphone .thread::-webkit-scrollbar-thumb{background:#C9B8E6;border-radius:3px}
.hphone .bb{overflow:hidden}
/* Explosion v2: clean rings, chat-bubble shards and brand confetti */
.shock{position:absolute;left:50%;top:45%;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;border:3px solid var(--pink);opacity:0;animation:shock 1s cubic-bezier(.1,.7,.3,1) forwards}
.shock.r2{border-color:var(--purple);border-width:2px;animation-delay:.07s}
.shock.r3{border-color:var(--yellow);border-width:2px;animation-delay:.14s}
@keyframes shock{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(9)}}
.core-flash{position:absolute;left:50%;top:45%;width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,212,59,.9) 25%,rgba(238,58,140,.5) 50%,rgba(122,62,230,0) 70%);animation:core .6s ease-out forwards}
@keyframes core{0%{transform:scale(.3);opacity:1}100%{transform:scale(2.6);opacity:0}}
.frag{position:absolute;left:50%;top:45%;will-change:transform;animation:fly var(--t,1.2s) cubic-bezier(.12,.75,.3,1) forwards}
.frag.chip{width:var(--w);height:var(--h);border-radius:var(--r);background:var(--c)}
.frag.bub{width:var(--w);height:30px;padding:7px 9px;border-radius:12px 12px 12px 3px;background:#fff;box-shadow:0 6px 14px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:5px}
.frag.bub i{display:block;height:5px;border-radius:3px;background:#D9CFEA}.frag.bub i:first-child{width:45%;background:var(--pink);opacity:.7}
/* Footer sign-off */
footer{padding:72px 0 28px}
.love{font-family:"Inter Display",system-ui,sans-serif;font-weight:900;font-size:clamp(28px,4.6vw,54px);line-height:1.08;letter-spacing:-.035em;color:#fff;max-width:900px;margin:0 0 48px}
.heart{display:inline-block;color:var(--pink);animation:beat 1.4s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.22)}30%{transform:scale(1)}45%{transform:scale(1.14)}}
.nu{background:linear-gradient(transparent 62%,rgba(238,58,140,.55) 62%)}
.foot{border-top:1px solid #2B1A47;padding-top:20px}
@media(prefers-reduced-motion:reduce){.heart{animation:none}}
/* Logo: chat bubble + envelope fold + notification dot, lowercase wordmark with the yellow full stop */
.logo{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;letter-spacing:0}
.lm-mark{width:38px;height:38px;flex:none;overflow:visible;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.lm-ping{transform-origin:33.5px 7px;animation:lmPing 3.2s ease-in-out infinite}
@keyframes lmPing{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.35)}86%{transform:scale(.92)}}
.logo:hover .lm-mark{transform:rotate(-8deg) scale(1.06)}
.lm-word{font-family:"Inter Display",system-ui,sans-serif;font-weight:900;font-size:21px;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.lm-b{color:#F7A8CF}
.lm-dot{color:var(--yellow)}
.lm-tld{font-weight:800;color:#BBAAD6;letter-spacing:-.02em}
.logo.sm .lm-mark{width:26px;height:26px}.logo.sm .lm-word{font-size:16px}
.foot-l{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.foot{align-items:center}
@media(max-width:560px){.lm-word{font-size:18px}.lm-mark{width:32px;height:32px}.pl-long{display:none}.nav .pill{padding:9px 18px}}
@media(max-width:360px){.lm-tld,.lm-dot{display:none}}
@media(prefers-reduced-motion:reduce){.lm-ping{animation:none}}
/* Hero layout: text top-left, bottom-left, phone right (desktop); phone under the headline on phones */
.hgrid{grid-template-areas:"top vis" "bot vis";row-gap:0}
.htop{grid-area:top;align-self:end}.hbot{grid-area:bot;align-self:start}.hvis{grid-area:vis}
@media(max-width:900px){.hgrid{grid-template-columns:1fr;grid-template-areas:"top" "vis" "bot";row-gap:28px}.htop .hl{margin-bottom:0}}
/* Reduce Motion: keep the story with fades only */
html.calm .rv,html.calm .rv.in,html.calm .note-c.rv,html.calm .note-c.rv.in,html.calm .phone.rv,html.calm .phone.rv.in{transform:none!important;transition:opacity .4s ease}
html.calm .phone.in .bb,html.calm .phone.in .bb.long{animation-name:bubCalm}
@keyframes bubCalm{from{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-6px}to{opacity:1;max-height:900px;padding-top:6px;padding-bottom:7px;margin-top:0}}
html.calm .nb.in{animation:fadeIn .4s ease both}html.calm .nb.leave{animation:fadeOut .3s ease both}
@keyframes fadeIn{from{opacity:0}}@keyframes fadeOut{to{opacity:0}}
html.calm .hphone.gone{transform:none;filter:none;transition:opacity .45s ease}
html.calm .hmail{animation:fadeIn .5s ease both}
html.calm .unread.bump,html.calm .ncount.bump{animation:none}
html.calm .oops li.rv,html.calm .oops li.rv.in{transform:rotate(var(--r,-2deg))!important}
/* AI agents ring without CSS masks (Safari didn't render the masked ring) */
.agent .ring{-webkit-mask:none;mask:none}
.agent .ring:before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--plum2)}
.agent .core{position:relative;z-index:1}
/* Reduce Motion: the flow still reads, with pulses and fades instead of movement */
html.calm .agent .ring{animation:none}
html.calm .agent .core{animation:none}
html.calm .pipe span{animation-name:calmBlink!important;animation-timing-function:ease-in-out!important;left:var(--px,50%)!important;top:var(--y,50%)!important;transform:translate(-50%,-50%)!important}
html.calm .pipe.in span:nth-child(1){--px:15%}html.calm .pipe.in span:nth-child(2){--px:45%}html.calm .pipe.in span:nth-child(3){--px:75%}html.calm .pipe.in span:nth-child(4){--px:30%}html.calm .pipe.in span:nth-child(5){--px:60%}html.calm .pipe.in span:nth-child(6){--px:90%}
html.calm .pipe.out span:nth-child(1){--px:15%}html.calm .pipe.out span:nth-child(2){--px:38%}html.calm .pipe.out span:nth-child(3){--px:62%}html.calm .pipe.out span:nth-child(4){--px:85%}
@keyframes calmBlink{0%,100%{opacity:0}40%,60%{opacity:1}}
html.calm .mrow{animation-name:rowCalm}
@keyframes rowCalm{0%,12%{opacity:0}20%,88%{opacity:1}100%{opacity:0}}
@media(max-width:860px){html.calm .pipe span{left:var(--x,50%)!important;top:var(--px,50%)!important}}