.gpb{overflow:hidden}
.gpb .gpb__head{max-width:900px;margin-bottom:clamp(40px,5vw,76px)}
.gpb .gpb__head .eyebrow{margin:0 0 16px}
.gpb .gpb__head h2{font-size:clamp(34px,4.6vw,66px);line-height:1.02;letter-spacing:-.03em;margin:0 0 20px}
.gpb.bg-black .gpb__head h2{color:var(--w)}
.gpb .gpb__head .lead{max-width:60ch;margin:0}
.gpb__stage{position:relative;padding-bottom:clamp(30px,5vw,80px);perspective:1800px}
.gpb__glow{position:absolute;z-index:0;inset:6% 0 -4% 18%;background:radial-gradient(closest-side,rgba(255,218,3,.30),rgba(255,218,3,0));filter:blur(24px);pointer-events:none}
.bg-white .gpb__glow,.bg-cloud .gpb__glow{background:radial-gradient(closest-side,rgba(255,218,3,.45),rgba(255,218,3,0))}
.gpb__browser{position:relative;z-index:1;width:86%;margin:0 0 0 auto;border-radius:16px;overflow:hidden;background:var(--w);box-shadow:0 50px 100px -40px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08);transform-origin:50% 100%;transition:transform 1.3s cubic-bezier(.2,.8,.2,1),opacity 1s ease}
.bg-white .gpb__browser,.bg-cloud .gpb__browser{box-shadow:0 50px 100px -40px rgba(0,0,0,.35),0 0 0 1px var(--mist)}
.gpb__bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 16px;background:#f2f3f4;border-bottom:1px solid #e4e5e6}
.gpb__bar i{flex:none;width:10px;height:10px;border-radius:50%;background:#d3d5d7}
.gpb__url{margin:0 auto;transform:translateX(-24px);font-size:12px;line-height:1;color:#6b6b6b;background:var(--w);border:1px solid #e4e5e6;border-radius:999px;padding:6px 18px;min-width:36%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gpb__screen{position:relative;aspect-ratio:1920/1296;background:#f7f8f9;overflow:hidden}
.gpb__screen img,.gpb__screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
.gpb__vid{opacity:0;transition:opacity .6s ease}
.gpb__vid.is-playing{opacity:1}
.gpb__phone{position:absolute;z-index:3;right:-1%;bottom:0;width:clamp(150px,19%,250px);aspect-ratio:762/1666;margin:0;filter:drop-shadow(0 34px 40px rgba(0,0,0,.5));transition:transform 1.2s cubic-bezier(.2,.8,.2,1) .25s,opacity .9s ease .25s}
.gpb__phone-in{position:absolute;inset:0;overflow:hidden;border-radius:19%/8.7%;z-index:2}
.gpb .gpb__phone-in video{position:absolute;width:141.73%;max-width:none;max-height:none;height:auto;left:-20.87%;top:-7.62%;object-fit:fill}
.gpb__phone-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;transition:opacity .4s}
.gpb__phone.is-live .gpb__phone-poster{opacity:0}
.gpb__toasts{position:absolute;z-index:4;left:0;top:clamp(36px,4vw,56px);bottom:auto;width:clamp(230px,25%,310px);height:auto;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;pointer-events:none}
.gpb__toasts li{display:none;position:relative;background:var(--w);color:var(--k);border-radius:14px;padding:12px 16px 12px 48px;box-shadow:0 20px 44px -18px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.05);font-size:14px;line-height:1.3;opacity:0;transform:translateY(18px) scale(.96);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.gpb__toasts li::before{content:"";position:absolute;left:14px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--y)}
.gpb__toasts li::after{content:"";position:absolute;left:22px;top:50%;width:6px;height:11px;margin-top:-7px;border:solid var(--k);border-width:0 2px 2px 0;transform:rotate(45deg)}
.gpb__toasts li b{display:block;font-weight:700;font-size:14px}
.gpb__toasts li span{display:block;color:#6b6b6b;font-size:13px;margin-top:2px}
.gpb__toasts li.is-shown{display:block}
.gpb__toasts li.is-on{opacity:1;transform:none}
.gpb__toasts li.is-out{opacity:0;transform:translateY(-12px) scale(.97)}
.gpb__stage.is-armed .gpb__browser{transform:rotateX(16deg) translateY(70px) scale(.94);opacity:.35}
.gpb__stage.is-armed .gpb__phone{transform:translateY(120px);opacity:0}
.gpb__stage.is-armed.is-in .gpb__browser{transform:none;opacity:1}
.gpb__stage.is-armed.is-in .gpb__phone{transform:translateY(var(--gpb-py,0px));opacity:1;transition:transform .2s linear,opacity .9s ease .25s}
.gpb__cap{margin:clamp(18px,2vw,26px) 0 0;font-size:13px;color:#8a8a8a}
.gpb.bg-black .gpb__cap{color:#8f8f8f}
.gpb__cta{margin:22px 0 0}
@media (min-width:761px) and (max-width:1180px){.gpb__toasts{top:24px;gap:5px}.gpb__toasts li{font-size:12px;padding:7px 12px 7px 38px;border-radius:10px}.gpb__toasts li b{font-size:12px}.gpb__toasts li span{font-size:11px;margin-top:1px}.gpb__toasts li::before{left:10px;width:20px;height:20px;margin-top:-10px}.gpb__toasts li::after{left:17px;width:5px;height:9px;margin-top:-6px}}
@media (max-width:760px){
.gpb__browser{width:100%;border-radius:12px}
.gpb__bar{height:28px;padding:0 10px;gap:5px}.gpb__bar i{width:7px;height:7px}.gpb__url{font-size:10px;padding:4px 10px;transform:translateX(-12px)}
.gpb__stage{padding-bottom:calc(30vw + 10px)}
.gpb__phone{width:34%;right:2%;bottom:0}
.gpb__toasts{left:10px;top:40px;bottom:auto;width:62%;height:auto;max-width:250px;gap:6px}
.gpb__toasts li{font-size:12px;padding:8px 10px 8px 36px;border-radius:10px}
.gpb__toasts li b{font-size:12px}.gpb__toasts li span{font-size:11px}
.gpb__toasts li::before{left:9px;width:18px;height:18px;margin-top:-9px}.gpb__toasts li::after{left:15px;width:4px;height:8px;margin-top:-5px}
}
@media (prefers-reduced-motion:reduce){.gpb__browser,.gpb__phone,.gpb__toasts li{transition:none}.gpb__stage.is-armed .gpb__browser,.gpb__stage.is-armed .gpb__phone{transform:none;opacity:1}}