/* How it works (how.html): "who are you?", then the agent video, or a short word for agencies and developers */
.who-hero{padding:clamp(40px,7vw,96px) 0 clamp(70px,9vw,120px)}
.who-hero h1{margin-bottom:clamp(28px,4vw,48px)}
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.pick{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:26px 26px 74px;border:0;border-radius:28px;background:var(--white);color:var(--ink);text-align:left;cursor:pointer;box-shadow:0 18px 40px -28px rgba(22,24,31,.45);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.pick:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(22,24,31,.5)}
.pick.on{box-shadow:0 0 0 3px var(--c),0 26px 50px -28px rgba(22,24,31,.5)}
.pick .pk-ic{width:56px;height:56px;border-radius:50%;background:var(--c);display:grid;place-items:center;margin-bottom:10px}
.pick .pk-ic svg{width:28px;height:28px;fill:none;stroke:var(--c-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pick b{font:800 clamp(24px,2.4vw,32px)/1.05 var(--display);letter-spacing:-.03em}
.pick small{font:500 15px var(--sans);color:var(--soft)}
.pick .pk-go{position:absolute;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff}
.pick .pk-go svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:0}
.pick[data-who="agency"] .pk-go svg,.pick[data-who="developer"] .pk-go svg{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.panel{margin-top:clamp(24px,3vw,36px);padding:clamp(26px,3.4vw,44px);border-radius:28px;background:var(--white);box-shadow:inset 0 6px 0 var(--c),0 18px 40px -28px rgba(22,24,31,.45);animation:pnIn .5s cubic-bezier(.2,.8,.2,1)}
.panel h2{font-size:clamp(28px,3.4vw,44px);max-width:20em}
.panel .pts{list-style:none;counter-reset:p;margin:24px 0 8px;padding:0;display:grid;gap:14px;max-width:46em}
.panel .pts li{counter-increment:p;position:relative;padding-left:52px;min-height:34px;font-size:18px;line-height:1.5}
.panel .pts li:before{content:counter(p);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--c);color:var(--c-ink);display:grid;place-items:center;font:800 16px var(--display)}
@keyframes pnIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:860px){.picks{grid-template-columns:1fr}.pick{padding-bottom:26px;padding-right:90px}.pick .pk-go{top:50%;bottom:auto;margin-top:-23px}}

/* the player */
.player{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:16px;background:rgba(22,24,31,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.player[hidden]{display:none}
.pl-box{position:relative;width:min(1100px,92vw,calc((100vh - 150px) * 16 / 9))}
.reel{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--paper);container-type:inline-size;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.pl-bar{height:5px;margin-top:14px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.pl-bar i{display:block;height:100%;width:0;background:var(--coral)}
.pl-x{position:absolute;top:-52px;right:0;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font:400 26px/1 var(--sans);cursor:pointer}
.pl-skip{position:absolute;z-index:6;top:16px;right:16px;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:30px;background:var(--coral);color:#fff;font:700 15px var(--display);text-decoration:none;box-shadow:0 12px 26px -12px rgba(235,81,51,.8)}
.pl-skip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pl-skip:hover{transform:translateY(-1px)}

/* scenes: the words on top like subtitles, the picture big under them */
.sc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:3.4cqw 4cqw 2.4cqw;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.sc.on{opacity:1;visibility:visible}
.sc.center{justify-content:center;text-align:center}
.cap{text-align:center;max-width:86%;opacity:0}
.sc.on .cap{animation:hwIn .5s cubic-bezier(.2,.8,.2,1) .05s both}
.cap .lab{display:inline-block;font:700 1.3cqw var(--display);color:#fff;background:var(--coral);padding:.5cqw 1.3cqw;border-radius:3cqw}
.cap h2{font:800 3.7cqw/1.05 var(--display);letter-spacing:-.04em;margin:1.1cqw 0 0}
.cap h2 em{font-style:normal;color:var(--coral)}
@keyframes hwIn{from{opacity:0;transform:translateY(1.2cqw)}to{opacity:1;transform:none}}
.sc .vis{position:relative;flex:1;width:100%;margin-top:1.6cqw}
.sc .big{font:800 8.8cqw/.95 var(--display);letter-spacing:-.055em;margin:0}
.sc .big .wd{display:inline-block;white-space:nowrap}
.sc .big .lt{display:inline-block;opacity:0}
.sc.on .big .lt{animation:dwDrop 1s calc(.1s + var(--i) * .06s) both}

/* the opening: three quick beats */
.beat{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0}
.sc.on .hb1{animation:bt1 2.1s ease both}
.sc.on .hb2{animation:bt 2.1s ease 1.95s both}
.sc.on .hb3{animation:bt3 1.6s ease 3.95s both}
@keyframes bt1{0%,88%{opacity:1}100%{opacity:0;transform:translateY(-2cqw)}}
@keyframes bt{0%{opacity:0;transform:scale(.9)}12%,85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-2cqw)}}
@keyframes bt3{0%{opacity:0;transform:scale(.9)}15%,100%{opacity:1;transform:none}}
.sc .mid{font:800 6.2cqw/1 var(--display);letter-spacing:-.05em;margin:0}
.pdfc{position:relative;width:9cqw;height:11.5cqw;margin-bottom:2.4cqw;border-radius:1.4cqw;background:var(--white);box-shadow:0 1.6cqw 3.4cqw -1.6cqw rgba(22,24,31,.45);display:flex;align-items:flex-end;justify-content:center;padding-bottom:1.4cqw;font:800 2.2cqw var(--display);color:var(--soft)}
.pdfc:before{content:'';position:absolute;left:1.6cqw;right:1.6cqw;top:2cqw;height:4.4cqw;background:repeating-linear-gradient(rgba(22,24,31,.14) 0 .45cqw,transparent .45cqw 1.1cqw)}
.pdfc:after{content:'';position:absolute;left:-1.5cqw;right:-1.5cqw;top:50%;height:.8cqw;border-radius:.4cqw;background:var(--coral);transform:rotate(-14deg) scaleX(0)}
.sc.on .hb2 .pdfc{animation:pdfShake .5s ease 2.25s}
.sc.on .hb2 .pdfc:after{animation:pdfX .35s cubic-bezier(.7,0,.2,1) 2.85s forwards}
@keyframes pdfShake{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes pdfX{to{transform:rotate(-14deg) scaleX(1)}}
.rm{position:relative;color:var(--coral)}
.rm .sw{position:absolute;left:0;right:0;bottom:-.12em;width:100%;height:.25em;overflow:visible}
.rm .sw path{fill:none;stroke:var(--sun);stroke-width:9;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.sc.on .hb3 .sw path{animation:swDraw .55s cubic-bezier(.6,0,.2,1) 4.55s forwards}
@keyframes swDraw{to{stroke-dashoffset:0}}

/* step 1: the brochure (mandatory) and the extras (optional), then what Pitch Room builds */
.drop{position:absolute;left:50%;top:50%;width:52cqw;transform:translate(-50%,-50%);padding:2.2cqw;border-radius:2.4cqw;background:var(--white);box-shadow:0 2.4cqw 5cqw -2.6cqw rgba(22,24,31,.4)}
.drop .row{display:flex;align-items:center;gap:1.2cqw;padding:1.2cqw 1.4cqw;border-radius:1.4cqw;font:700 1.7cqw var(--display)}
.drop .row b{flex:1;font-weight:700}
.drop .row.main{border:.3cqw dashed rgba(22,24,31,.22);padding:1.6cqw 1.4cqw;font-size:2cqw}
.sc.on .drop .row.main{animation:hzGot .35s ease 1s forwards}
@keyframes hzGot{to{border-style:solid;border-color:var(--lagoon);background:rgba(19,154,136,.08)}}
.drop .fi{width:3.6cqw;height:3.6cqw;flex:none;border-radius:1cqw;display:grid;place-items:center;color:#fff;background:var(--c,var(--ocean));font:800 1.3cqw var(--display)}
.drop .fi.pdf{background:var(--coral)}
.sc.on .drop .fi.pdf{animation:pdfIn .7s cubic-bezier(.3,.9,.3,1.3) .3s both}
@keyframes pdfIn{from{opacity:0;transform:translate(6cqw,-6cqw) rotate(20deg)}to{opacity:1;transform:none}}
.drop .tag{font:700 1.1cqw var(--sans);padding:.45cqw 1cqw;border-radius:2cqw;background:var(--paper);color:var(--soft)}
.drop .tag.must{background:var(--coral);color:#fff}
.drop .row.o{margin-top:.8cqw;background:var(--paper);opacity:0}
.sc.on .drop .row.o{animation:hwIn .4s ease calc(1.4s + var(--i) * .35s) both}
.drop .ticks{list-style:none;margin:1.6cqw 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.9cqw 1.8cqw}
.drop .ticks li{display:flex;align-items:center;gap:.8cqw;font:600 1.45cqw var(--sans);opacity:0}
.drop .ticks li:before{content:'';width:2cqw;height:2cqw;flex:none;border-radius:50%;background:var(--lagoon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/62% no-repeat}
.sc.on .drop .ticks li{animation:hwIn .35s ease calc(3s + var(--i) * .22s) both}

/* a laptop and a phone */
.mlap{position:absolute;left:50%;top:50%;width:48cqw;transform:translate(-60%,-52%)}
.mlap .ms{position:relative;aspect-ratio:16/10;border:.9cqw solid #16181F;border-radius:1.4cqw 1.4cqw .4cqw .4cqw;background:radial-gradient(80% 70% at 50% 55%,#16224F 0%,#0B1230 70%);overflow:hidden;display:grid;place-items:center}
.mlap .mbase{height:1.4cqw;margin:0 -2.4cqw;border-radius:0 0 1.4cqw 1.4cqw;background:linear-gradient(#E4DED3,#BDB6AA)}
.mph{position:absolute;left:50%;bottom:0;width:12.5cqw;margin-left:16cqw;padding:.6cqw;border-radius:2.2cqw;background:#16181F;box-shadow:0 2.4cqw 5cqw -2cqw rgba(22,24,31,.5)}
.mph .mps{position:relative;aspect-ratio:390/844;border-radius:1.7cqw;overflow:hidden;background:var(--paper);display:flex;flex-direction:column;padding:1.3cqw .9cqw}
.mtop{display:flex;align-items:center;justify-content:space-between;font:800 .95cqw var(--display)}
.mtop b{display:flex;align-items:center;gap:.2cqw}.mtop b i{width:.4cqw;height:.4cqw;border-radius:50%;background:var(--coral)}
.mtop em{font:700 .7cqw var(--sans);font-style:normal;padding:.2cqw .5cqw;border-radius:1cqw;background:var(--white)}
/* step 2: scan the QR */
.qrbox{width:12cqw;padding:.8cqw;border-radius:1cqw;background:#fff}
.qrbox .qr{display:block;width:100%}
.sc.on .qrbox{animation:hFade .3s ease 2.6s forwards}
.mlap .ok{position:absolute;font:800 2.6cqw var(--display);color:#fff;opacity:0;display:flex;align-items:center;gap:1cqw;text-shadow:0 0 1.6cqw var(--lagoon)}
.mlap .ok:before{content:'';width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--lagoon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/62% no-repeat;box-shadow:0 0 2cqw var(--lagoon)}
.sc.on .mlap .ok{animation:hwIn .5s cubic-bezier(.2,.9,.3,1.3) 2.75s both}
.mph.scan{opacity:0;transform:translateX(6cqw) rotate(6deg)}
.sc.on .mph.scan{animation:hScanIn .6s cubic-bezier(.2,.8,.2,1) .35s forwards}
@keyframes hScanIn{to{opacity:1;transform:translate(-4cqw,-6cqw) rotate(-10deg)}}
.mph.scan .mps{background:#1B1F2A}
.mph.scan .mtop{opacity:0}
.mph.scan .cam{position:absolute;left:18%;right:18%;top:32%;aspect-ratio:1;border:.35cqw solid rgba(255,255,255,.85);border-radius:1cqw}
.mph.scan .scanl{position:absolute;left:20%;right:20%;top:34%;height:.3cqw;background:var(--lagoon);box-shadow:0 0 1.2cqw var(--lagoon)}
.sc.on .mph.scan .scanl{animation:hScanL .8s ease-in-out .9s 2 alternate}
@keyframes hScanL{to{top:62%}}
.sc.on .mph.scan .mps{animation:hLive .4s ease 2.7s forwards}
@keyframes hLive{to{background:var(--paper)}}
.sc.on .mph.scan .cam{animation:hFade .3s ease 2.6s forwards}
@keyframes hFade{to{opacity:0}}
/* step 3: the buttons, and the real screens on the laptop */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:.6cqw;margin-top:1.2cqw}
.mb{display:flex;flex-direction:column;align-items:center;gap:.4cqw;padding:.8cqw .4cqw;border-radius:1cqw;background:var(--white);font:700 .78cqw var(--display);text-align:center;transition:background .2s,color .2s,transform .12s}
.mb .ic{width:2.3cqw;height:2.3cqw;border-radius:50%;background:var(--c);display:grid;place-items:center}
.mb .ic svg{width:1.25cqw;height:1.25cqw;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mb.on{background:var(--c);color:var(--c-ink)}
.mb.on .ic{background:rgba(255,255,255,.25)}
.mb.press{transform:scale(.9)}
.mlap.real .ms{background:#0B1230}
.mlap .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .45s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.mlap .shot.on{opacity:1;transform:none}
.mlap .flash{position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--c,var(--coral));transition:box-shadow .25s;pointer-events:none}
.mlap .flash.go{box-shadow:inset 0 0 0 .5cqw var(--c,var(--coral))}
.finger{position:absolute;z-index:3;width:3.2cqw;height:3.2cqw;margin:-1.6cqw 0 0 -1.6cqw;border-radius:50%;background:rgba(22,24,31,.24);border:.35cqw solid #fff;box-shadow:0 .6cqw 1.4cqw rgba(22,24,31,.35);opacity:0;transition:left .4s cubic-bezier(.65,0,.35,1),top .4s cubic-bezier(.65,0,.35,1),transform .12s,opacity .3s}
.finger.on{opacity:1}.finger.down{transform:scale(.78)}
.mlap .w{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2cqw;color:#fff;animation:hWord .55s cubic-bezier(.6,0,.2,1) both}
.mlap .w.out{animation:hFade .15s ease forwards}
.mlap .w b{font:800 3.8cqw/1 var(--display);letter-spacing:-.04em;text-shadow:0 0 1.4cqw var(--c),0 0 3.4cqw var(--c);white-space:nowrap}
@keyframes hWord{from{clip-path:inset(0 0 100% 0);filter:blur(.5cqw)}to{clip-path:inset(0);filter:none}}
.sc .beam{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4;opacity:0;transition:opacity .2s}
.sc .beam.on{opacity:1}
.sc .beam .bl{fill:none;stroke-width:.35cqw;stroke-linecap:round;filter:drop-shadow(0 0 .6cqw #fff)}
/* step 4: WhatsApp, the message Pitch Room sends the client */
.wchat{position:absolute;left:50%;top:0;width:44cqw;transform:translateX(-50%);border-radius:2cqw;overflow:hidden;background:#EFEAE2;box-shadow:0 2.4cqw 5cqw -2.6cqw rgba(22,24,31,.45)}
.wchat .wh{display:flex;align-items:center;gap:1cqw;padding:1.1cqw 1.4cqw;background:#075E54;color:#fff}
.wchat .av{width:3cqw;height:3cqw;flex:none;border-radius:50%;background:var(--ocean);display:grid;place-items:center;font:800 1.05cqw var(--display)}
.wchat .who{flex:1;line-height:1.15}.wchat .who b{display:block;font:700 1.35cqw var(--sans)}.wchat .who small{font:500 .95cqw var(--sans);opacity:.8}
.wchat .wic{width:2cqw;height:2cqw;fill:none;stroke:#25D366;stroke-width:2}
.wchat .wb{display:flex;flex-direction:column;gap:.8cqw;padding:1.3cqw 1.4cqw 1.6cqw}
.wchat .m{position:relative;max-width:78%;padding:.9cqw 1cqw 1.9cqw;border-radius:1.2cqw;font:500 1.25cqw/1.38 var(--sans);color:#111;box-shadow:0 1px 1px rgba(0,0,0,.06);opacity:0}
.wchat .m.out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:.3cqw}
.wchat .m.in{align-self:flex-start;background:#fff;border-top-left-radius:.3cqw}
.wchat .tm{position:absolute;right:.9cqw;bottom:.5cqw;font:500 .85cqw var(--sans);color:rgba(0,0,0,.45)}
.wchat .tm i{font-style:normal;letter-spacing:-.2em}
.sc.on .wchat .m.out{animation:hwIn .45s cubic-bezier(.2,.8,.2,1) .5s both}
.sc.on .wchat .m.out .tm i{animation:waRead .3s ease 1.4s forwards}
@keyframes waRead{to{color:#34B7F1}}
.wlk{display:block;margin-top:.7cqw;border-radius:.9cqw;overflow:hidden;background:rgba(255,255,255,.75)}
.wth{display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3;padding:1cqw;background:radial-gradient(circle at 88% 22%,var(--sun) 0 16%,transparent 17%),linear-gradient(135deg,var(--coral),#FF7A52);color:#fff}
.wth .tw{display:flex;align-items:center;gap:.3cqw;font:800 1.6cqw var(--display);letter-spacing:-.02em}.wth .tw i{width:.5cqw;height:.5cqw;border-radius:50%;background:#fff}
.wth .ts{font:600 .95cqw var(--sans);opacity:.9}
.wlk b{display:block;font:700 1.1cqw var(--sans);padding:.6cqw .8cqw 0}.wlk small{display:block;font:500 .9cqw var(--sans);color:rgba(0,0,0,.5);padding:0 .8cqw .7cqw}
.wtyping{align-self:flex-start;display:flex;align-items:center;gap:.35cqw;padding:0 1cqw;max-height:0;border-radius:1.2cqw;background:#fff;overflow:hidden;opacity:0}
.wtyping i{width:.55cqw;height:.55cqw;border-radius:50%;background:rgba(0,0,0,.3);animation:chDot 1s ease-in-out infinite}
.wtyping i:nth-child(2){animation-delay:.15s}.wtyping i:nth-child(3){animation-delay:.3s}
.sc.on .wtyping{animation:waType 1.2s ease 1.9s both}
@keyframes waType{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}15%,85%{opacity:1;max-height:4cqw;padding-top:.9cqw;padding-bottom:.9cqw}100%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}}
.sc.on .wchat .m.in{animation:hwIn .45s cubic-bezier(.2,.8,.2,1) 3.1s both}
/* step 5: my clients */
.crm{position:absolute;left:50%;top:50%;width:52cqw;transform:translate(-50%,-50%);padding:2.2cqw 2.4cqw;border-radius:2.2cqw;background:var(--white);box-shadow:0 2.4cqw 5cqw -2.6cqw rgba(22,24,31,.4)}
.crm-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.6cqw}
.crm-h b{font:800 2.4cqw var(--display);letter-spacing:-.03em}
.crm-h span{font:700 1.3cqw var(--sans);color:var(--coral)}
.crm .row{display:flex;align-items:center;gap:1.3cqw;padding:1.3cqw 0;border-top:1px solid var(--line);opacity:0}
.sc.on .crm .row{animation:hRow .45s cubic-bezier(.2,.8,.2,1) calc(.5s + var(--i) * .3s) both}
@keyframes hRow{from{opacity:0;transform:translateX(3cqw)}to{opacity:1;transform:none}}
.crm .av{width:3.8cqw;height:3.8cqw;flex:none;border-radius:50%;background:var(--c);color:var(--c-ink);display:grid;place-items:center;font:800 1.3cqw var(--display)}
.crm .nm{flex:1;min-width:0}
.crm .nm b,.crm .nm small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm .nm b{font:700 1.6cqw var(--sans)}.crm .nm small{font:500 1.2cqw var(--sans);color:var(--soft)}
.crm .st{flex:none;font:700 1.15cqw var(--sans);padding:.6cqw 1.2cqw;border-radius:3cqw;white-space:nowrap}
.crm .s1{background:rgba(19,154,136,.16);color:#0B7F70}.crm .s2{background:rgba(242,189,44,.28);color:#7A5600}.crm .s3{background:rgba(107,91,214,.16);color:#5A45D6}
/* upload once */
.home{position:absolute;left:50%;top:50%;width:50cqw;transform:translate(-50%,-50%)}
.hm-h b{font:800 2.6cqw var(--display);letter-spacing:-.03em}
.home .card{display:grid;grid-template-columns:1fr auto;align-items:center;margin-top:1.1cqw;padding:1.4cqw 1.8cqw;border-radius:1.8cqw;background:var(--white);box-shadow:0 1.4cqw 3cqw -2cqw rgba(22,24,31,.4);opacity:0}
.sc.on .home .card{animation:hRow .45s cubic-bezier(.2,.8,.2,1) calc(.4s + var(--i) * .28s) both}
.home .card b{font:800 1.9cqw var(--display);letter-spacing:-.02em}.home .card small{display:block;font:500 1.2cqw var(--sans);color:var(--soft)}
.home .go{grid-row:1/3;grid-column:2;padding:.9cqw 1.8cqw;border-radius:1.1cqw;background:var(--lagoon);color:var(--ink);font:700 1.35cqw var(--display)}
.sc.on .home .card:first-of-type .go{animation:hPress .5s ease 2.1s,hGlow 1s ease 2.4s}
@keyframes hPress{50%{transform:scale(.88)}}
@keyframes hGlow{50%{box-shadow:0 0 0 1cqw rgba(19,154,136,.25)}}
/* switch projects */
.plist{display:flex;flex-direction:column;gap:.7cqw;margin-top:1.4cqw}
.plist .pl-h{font:800 1.15cqw var(--display);letter-spacing:-.01em}
.plist .pr{padding:.9cqw 1cqw;border-radius:1cqw;background:var(--white);font:700 1cqw var(--display);transition:box-shadow .2s}
.plist .pr small{display:block;font:500 .75cqw var(--sans);color:var(--soft)}
.plist .pr.on{box-shadow:0 0 0 .25cqw var(--coral)}
/* the end */
.vers{display:flex;gap:2cqw;margin-top:3cqw}
.vers .v{display:flex;flex-direction:column;gap:.4cqw;min-width:17cqw;padding:2cqw 2.4cqw;border-radius:2cqw;background:var(--white);text-align:left;box-shadow:0 1.6cqw 3.4cqw -2.4cqw rgba(22,24,31,.45);opacity:0}
.vers .v b{font:800 2.6cqw var(--display);letter-spacing:-.03em;color:var(--c)}.vers .v small{font:500 1.3cqw var(--sans);color:var(--soft)}
.vers .v.best{background:var(--ink)}.vers .v.best b{color:#fff}.vers .v.best small{color:rgba(255,255,255,.7)}
.sc.on .vers .v{animation:hwIn .5s cubic-bezier(.2,.9,.3,1.3) calc(.6s + var(--i) * .18s) both}
.sc.on .vers .v.best{animation:hwIn .5s cubic-bezier(.2,.9,.3,1.3) .78s both,hBest .6s ease 1.6s}
@keyframes hBest{50%{transform:scale(1.06)}}
.sc .endgo{margin-top:3cqw;font-size:clamp(15px,1.6cqw,20px);opacity:0}
.sc.on .endgo{animation:hwIn .5s ease 1.4s both}

/* on a phone: the video stands up */
@media (max-width:700px){
  .pl-box{width:min(92vw,calc((100vh - 140px) * 9 / 15))}
  .reel{aspect-ratio:9/15}
  .sc{padding:16cqw 6cqw 6cqw}
  .cap{max-width:100%}
  .cap .lab{font-size:3.4cqw;padding:1.2cqw 3cqw}
  .cap h2{font-size:7.6cqw}
  .sc .big{font-size:15cqw}
  .sc .mid{font-size:10cqw}
  .pdfc{zoom:1.8}
  .wchat{width:50cqw}
  .sc .vis{zoom:1.8}
  .sc.center .vers{zoom:1.9;flex-direction:column;gap:1.4cqw;margin-top:2cqw}
  .sc .endgo{font-size:15px;margin-top:6cqw}
  .drop,.crm,.home{width:48cqw}
  .mlap{width:44cqw;transform:translate(-50%,-62%)}
  .mph{margin-left:2cqw;width:13cqw}
  .pl-skip{top:10px;right:10px;padding:9px 14px;font-size:13px}
}

/* the real brochure in step 1, and the real photo in the WhatsApp preview */
.drop .cov{width:4.4cqw;height:5.8cqw;flex:none;border-radius:.6cqw;object-fit:cover;box-shadow:0 .8cqw 1.6cqw -.8cqw rgba(22,24,31,.5)}
.sc.on .drop .cov{animation:pdfIn .7s cubic-bezier(.3,.9,.3,1.3) .3s both}
.drop .row b small{display:block;font:500 1.15cqw var(--sans);color:var(--soft);margin-top:.2cqw}
.drop .row.o.must{background:rgba(235,81,51,.08)}
.wth{position:relative;overflow:hidden;background:#333}
.wth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wth:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.6))}
.wth .tw,.wth .ts{position:relative;z-index:1}
.wth .tw{font-size:1.5cqw}
/* the phone fits: its screen keeps its shape, and the buttons are a bit tighter */
.mph .mps{min-height:0}
.mph{bottom:3%}
.mgrid{gap:.45cqw;margin-top:.9cqw}
.mb{padding:.55cqw .3cqw;gap:.25cqw}
.mb .ic{width:2cqw;height:2cqw}

/* the pills in the video are dark, not orange */
.pl-skip{background:var(--ink);box-shadow:0 12px 26px -12px rgba(22,24,31,.7)}
.cap .lab{background:var(--ink)}
.drop .tag.must{background:var(--ink)}
.drop .row.o.must{background:var(--paper)}

/* ---------- the agency and developer videos ---------- */
.reel[hidden]{display:none}
.sc .endsub{font:500 1.8cqw/1.4 var(--sans);color:var(--soft);margin:1.6cqw 0 0;opacity:0}
.sc.on .endsub{animation:hwIn .5s ease 1.1s both}
/* your logo on the client's screen */
.mlap .brand{position:absolute;left:1.2cqw;top:1.1cqw;z-index:2;display:flex;align-items:center;gap:.7cqw;padding:.7cqw 1.3cqw .7cqw .8cqw;border-radius:2cqw;background:#fff;color:var(--ink);font:800 1.15cqw var(--display);letter-spacing:.06em;box-shadow:0 .8cqw 2cqw -.6cqw rgba(0,0,0,.45);opacity:0}
.mlap .brand i{width:2cqw;height:2cqw;border-radius:.6cqw;background:linear-gradient(135deg,var(--ocean),var(--lilac))}
.sc.on .mlap .brand{animation:brandIn .6s cubic-bezier(.2,.9,.3,1.35) .8s both}
.mlap .brand.sm{left:1cqw;top:.9cqw;font-size:.85cqw;padding:.5cqw 1cqw .5cqw .6cqw}
.mlap .brand.sm i{width:1.5cqw;height:1.5cqw}
.sc.on .mlap .brand.sm{animation:none;opacity:1}
@keyframes brandIn{0%{opacity:0;transform:scale(1.8);filter:blur(6px)}60%{opacity:1;transform:scale(.95);filter:none}100%{opacity:1;transform:none}}
/* one project in the middle, the team (or the brokers) around it */
.hub{position:absolute;left:50%;top:50%;width:58cqw;height:34cqw;transform:translate(-50%,-50%)}
.hub .links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
.hub .links path{fill:none;stroke:rgba(22,24,31,.18);stroke-width:.35;stroke-dasharray:100;stroke-dashoffset:100;vector-effect:non-scaling-stroke}
.hub .links path{stroke-width:2}
.sc.on .hub .links path{animation:linkDraw .5s ease calc(.7s + var(--i) * .22s) forwards}
@keyframes linkDraw{to{stroke-dashoffset:0}}
.hub .pc{position:absolute;left:50%;top:50%;z-index:2;width:17cqw;transform:translate(-50%,-50%);border-radius:1.6cqw;overflow:hidden;background:var(--white);box-shadow:0 2cqw 4cqw -2cqw rgba(22,24,31,.5);opacity:0}
.sc.on .hub .pc{animation:pcIn .55s cubic-bezier(.2,.9,.3,1.3) .2s both}
@keyframes pcIn{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%)}}
.hub .pc img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.hub .pc b{display:block;font:800 1.5cqw var(--display);padding:.9cqw 1.1cqw 0}.hub .pc small{display:block;font:600 1.05cqw var(--sans);color:#0B7F70;padding:0 1.1cqw 1cqw}
.hub .ag{position:absolute;z-index:1;display:flex;align-items:center;gap:.8cqw;padding:.7cqw 1.2cqw .7cqw .7cqw;border-radius:3cqw;background:var(--white);box-shadow:0 1cqw 2.4cqw -1.4cqw rgba(22,24,31,.45);opacity:0;transform:translate(-50%,-50%)}
.sc.on .hub .ag{animation:agIn .45s cubic-bezier(.2,.9,.3,1.3) calc(.9s + var(--i) * .22s) both}
@keyframes agIn{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%)}}
.hub .a0{left:12%;top:16%}.hub .a1{left:88%;top:16%}.hub .a2{left:8%;top:84%}.hub .a3{left:92%;top:84%}.hub .a4{left:50%;top:97%}
.hub .av{width:3cqw;height:3cqw;border-radius:50%;background:var(--c);color:var(--c-ink);display:grid;place-items:center;font:800 1cqw var(--display)}
.hub .ag b{font:700 1.25cqw var(--sans)}
.hub .ag em{font:700 .95cqw var(--sans);font-style:normal;color:#0B7F70;background:rgba(19,154,136,.14);padding:.3cqw .8cqw;border-radius:2cqw;opacity:0}
.sc.on .hub .ag em{animation:hwIn .35s ease calc(1.9s + var(--i) * .22s) both}
/* the agency record */
.crm.rec .st,.crm.avl .st{opacity:1}
/* seats */
.seats{position:absolute;left:50%;top:50%;width:46cqw;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(6,1fr);gap:1.4cqw;padding:2.4cqw;border-radius:2.4cqw;background:var(--white);box-shadow:0 2.4cqw 5cqw -2.6cqw rgba(22,24,31,.4)}
.seat{aspect-ratio:1;border-radius:50%;background:var(--paper);display:grid;place-items:center;opacity:.4}
.seat i{width:42%;height:42%;border-radius:50%;background:rgba(22,24,31,.18);position:relative;top:-12%}
.seat i:after{content:'';position:absolute;left:-40%;right:-40%;top:120%;height:70%;border-radius:1cqw 1cqw .3cqw .3cqw;background:inherit}
.sc.on .seat{animation:seatOn .35s cubic-bezier(.2,.9,.3,1.4) calc(.5s + var(--i) * .1s) forwards}
.sc.on .seat i{animation:seatInk .35s ease calc(.5s + var(--i) * .1s) forwards}
@keyframes seatOn{0%{opacity:.4;transform:scale(.8)}100%{opacity:1;transform:none;background:rgba(36,71,188,.1)}}
@keyframes seatInk{to{background:var(--ocean)}}
.seats .sc-n{grid-column:1/-1;text-align:center;font:800 3cqw var(--display);letter-spacing:-.03em;margin-top:.6cqw}
/* developers: the brochure scrolls on the laptop as the finger swipes on the phone */
.mlap.broch .ms{display:block;background:#0B1230}
.mlap.broch .pages{position:absolute;left:12%;width:76%;top:0;transform:translateY(0)}
.sc.on .mlap.broch .pages{animation:pgScroll 4.2s cubic-bezier(.45,0,.25,1) 1s both}
@keyframes pgScroll{0%{transform:translateY(4%)}100%{transform:translateY(-62%)}}
.pages-ph{position:relative;flex:1;margin-top:.8cqw;border-radius:1cqw;overflow:hidden;background:#0B1230}
.pages-ph img{position:absolute;left:0;width:100%;top:0}
.sc.on .pages-ph img{animation:pgScroll 4.2s cubic-bezier(.45,0,.25,1) 1s both}
.finger.swipe{left:50%;top:70%}
.sc.on .finger.swipe{animation:swipeUp 1.4s cubic-bezier(.5,0,.3,1) .9s 3 both}
@keyframes swipeUp{0%{opacity:0;top:74%}15%{opacity:1;top:74%}80%{opacity:1;top:30%}100%{opacity:0;top:28%}}
/* availability: a unit sells */
.crm.avl .u{width:5cqw;flex:none;font:800 1.9cqw var(--display);letter-spacing:-.02em}
.crm .s0{background:rgba(22,24,31,.08);color:var(--soft)}
.crm.avl .cnt{color:#0B7F70}
.crm.avl .row{transition:background .3s}
.crm.avl .row.hit{background:rgba(242,189,44,.18);border-radius:1cqw}
.crm.avl .st.flip{transition:transform .25s}
.crm.avl .row.hit .st.flip{animation:hPress .4s ease}
.crm.avl{padding-bottom:3.4cqw}
.crm.avl .toast{position:absolute;left:50%;bottom:-2.2cqw;transform:translate(-50%,1cqw);padding:.9cqw 1.8cqw;border-radius:3cqw;background:var(--ink);color:#fff;font:700 1.3cqw var(--sans);white-space:nowrap;opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.3,1.3)}
.crm.avl .toast:before{content:'';display:inline-block;width:1cqw;height:1cqw;margin-right:.8cqw;border-radius:50%;background:var(--lagoon)}
.crm.avl .toast.in{opacity:1;transform:translate(-50%,0)}
.drop .fi.c-sun{color:var(--ink)}
@media (max-width:700px){
  .hub{width:44cqw;height:40cqw}
  .seats{width:48cqw}
  .sc .endsub{font-size:4cqw;margin-top:4cqw}
}

.hub .ag b{white-space:nowrap}
/* the developer setup card holds five rows */
.sc[data-n="setup"] .drop .row{padding:.85cqw 1.3cqw;font-size:1.55cqw}
.sc[data-n="setup"] .drop .row.main{padding:1.1cqw 1.3cqw}
.sc[data-n="setup"] .drop .row.o{margin-top:.6cqw}
.sc[data-n="setup"] .drop .fi{width:3cqw;height:3cqw}
.sc[data-n="setup"] .drop .cov{width:3.6cqw;height:4.8cqw}

/* agencies and developers: "Hi there." then the one line */
.sc.two.on .hb3{animation-delay:1.95s}
.sc.two.on .hb3 .sw path{animation-delay:2.55s}

/* the QR step: the app's real pairing screen, the phone scans it, the laptop opens the presentation */
.mlap.pairing .pq{transition:opacity .4s}
.sc.on .mlap.pairing .pq{animation:hFade .35s ease 2.7s forwards}
.mlap.pairing .pt{opacity:0}
.sc.on .mlap.pairing .pt{animation:ptIn .5s ease 2.75s forwards}
@keyframes ptIn{to{opacity:1;transform:none}}
.mlap.pairing .ok{top:1.4cqw;left:50%;transform:translateX(-50%);font-size:1.6cqw;padding:.6cqw 1.4cqw;border-radius:3cqw;background:rgba(22,24,31,.72);text-shadow:none;z-index:3}
.mlap.pairing .ok:before{width:1.6cqw;height:1.6cqw}
.sc.on .mlap.pairing .ok{animation:hwIn .4s cubic-bezier(.2,.9,.3,1.3) 2.85s both}
.sc .role{position:absolute;z-index:5;padding:.7cqw 1.4cqw;border-radius:3cqw;background:var(--ink);color:#fff;font:700 1.35cqw var(--sans);white-space:nowrap;opacity:0}
.sc .role:before{content:'';display:inline-block;width:.9cqw;height:.9cqw;margin-right:.7cqw;border-radius:50%;background:var(--sun);vertical-align:middle}
.sc .role.r2:before{background:var(--coral)}
.sc .role.r1{left:50%;top:-1%;transform:translateX(-80%)}
.sc .role.r2{left:50%;bottom:-2%;margin-left:12cqw}
.sc.on .role.r1{animation:hwIn .45s cubic-bezier(.2,.9,.3,1.3) 3.5s both}
.sc.on .role.r2{animation:hwIn .45s cubic-bezier(.2,.9,.3,1.3) 3.9s both}
@media (max-width:700px){.sc .role{font-size:3.2cqw;padding:1.4cqw 2.6cqw}.sc .role.r1{top:-6%}.sc .role.r2{margin-left:4cqw;bottom:-8%}}
/* once connected, the phone shows its buttons */
.mph.scan .mgrid.after{opacity:0}
.sc.on .mph.scan .mgrid.after{animation:ptIn .4s ease 2.85s forwards}
.sc.on .mph.scan .mtop{animation:ptIn .3s ease 2.85s forwards}
.sc .role.r1{left:14%;top:-1%;transform:none}

@media (max-width:700px){.sc .role.r1{left:6%;top:3%}.sc .role.r2{left:auto;right:3%;margin:0;bottom:-3%}}
.sc.on .mph.scan .scanl{animation:hScanL .8s ease-in-out .9s 2 alternate,hFade .2s ease 2.6s forwards}