.spot{padding-top:clamp(28px,4vw,56px)}.spot-defs{position:absolute;width:0;height:0;overflow:hidden}.spot-panel{position:relative;isolation:isolate;overflow:hidden;border-radius:40px;padding:clamp(28px,5vw,72px);background:radial-gradient(55% 60%at 76% 46%,#fffc,#fff0 72%),linear-gradient(160deg,#ecf6f1 0%,var(--sage-hi) 100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-areas:"head stage""steps stage""foot stage";column-gap:clamp(32px,5vw,80px);row-gap:30px;align-items:start}.spot-panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:.55;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath stroke-width='7' d='M-10 70H270M84-10V270M-10 196L270 150'/%3E%3Cpath stroke-width='3.5' d='M180-10V270M-10 128H84M84 232H270'/%3E%3C/g%3E%3C/svg%3E")0 0/260px 260px}.spot-head{grid-area:head;align-self:end}.spot-head .h-sec{max-width:9.5em}.spot-head .lead{margin-top:20px}.spot-stage{grid-area:stage;align-self:center;display:flex;flex-direction:column;align-items:center;gap:22px;min-width:0}.spot-steps{grid-area:steps;list-style:none;margin:0;padding:0;display:grid;gap:18px}.spot-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}.spot-n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--forest);color:var(--on-night);font-family:var(--display);font-size:20px;font-weight:500}.spot-steps h3{font-size:21px;line-height:1.2;margin-top:2px}.spot-steps p{color:var(--soft);font-size:16px;margin-top:4px}.spot-foot{grid-area:foot}.spot-cta{display:flex;flex-wrap:wrap;gap:12px}.spot-note{margin-top:16px;font-size:13px;line-height:1.5;color:var(--soft);max-width:36em}.spot-seg{background:#ffffff9e}.spot-seg .seg-btn{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.15;padding:9px 26px}.spot-seg .seg-btn small{font-size:12px;font-weight:500;color:var(--soft)}.spot-phones{--you:#2F7CF6;position:relative;width:min(100%,540px);aspect-ratio:1/1.16;perspective:1600px;cursor:pointer}.spot-phone{position:absolute;top:0;width:50%;aspect-ratio:27.8/58.1;container-type:inline-size;padding:3.24%;border-radius:15.5%/7.4%;background:linear-gradient(150deg,#323634 0,#121413 45%,#2a2e2c);box-shadow:inset 0 0 0 1.5px #474c4a,inset 0 0 0 4px #161817,0 46px 80px -34px #10221c99,0 20px 40px -22px #10221c80;transition:transform .8s var(--spring),filter .6s,z-index 0s .25s;transform-style:preserve-3d}.spot-ios{left:3%;top:6%;z-index:3;transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) rotate(-4deg)}.spot-and{left:47%;top:0;z-index:1;border-radius:13%/6.2%;background:linear-gradient(150deg,#45494d 0,#1d1f21,#383b3e);box-shadow:inset 0 0 0 1.5px #55595d,inset 0 0 0 3.5px #1b1d1f,0 46px 80px -34px #10221c99,0 20px 40px -22px #10221c80;transform:translate(3%) rotate(5deg) scale(.93);filter:brightness(.97) saturate(.88)}.spot[data-front=android] .spot-ios{z-index:1;transform:translate(-3%) rotate(-6deg) scale(.93);filter:brightness(.97) saturate(.88)}.spot[data-front=android] .spot-and{z-index:3;transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) rotate(3deg);filter:none}.sp-scr{position:relative;height:100%;overflow:hidden;font-size:calc(100cqw/26);border-radius:3.9em;background:#fff;color:#111;font-family:var(--text);line-height:1.2;-webkit-user-select:none;user-select:none}.spot-and .sp-scr{border-radius:3em}.spot-ios{--m-land:#F5F0E6;--m-block:#EAE3D5;--m-park:#CDE6C0;--m-tree:#B1D5A0;--m-water:#B1D9F0;--m-road:#fff;--m-case:#E0D6C4;--m-main:#fff;--m-main-case:#D6CAB2;--m-path:#F5F0E6}.spot-and{--you:#1A73E8;--m-land:#EEF1F3;--m-block:#E2E6EA;--m-park:#C6E8CB;--m-tree:#A9D9B1;--m-water:#A5D3F6;--m-road:#fff;--m-case:#D5D9DD;--m-main:#FCE08E;--m-main-case:#EBC155;--m-path:#EEF1F3}.sp-map{position:absolute;left:0;right:0;top:0;aspect-ratio:300/440}.sp-map svg{display:block;width:100%;height:100%}.sp-acc{fill:#4e9c8429;stroke:#4e9c8480;stroke-width:1.2}.sp-route{fill:none;stroke:var(--you);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:0 8.5;opacity:0;transition:opacity .6s .9s}.spot.is-in .sp-route{opacity:1;animation:spRoute 1.1s linear infinite}@keyframes spRoute{to{stroke-dashoffset:-17}}.sp-you{position:absolute;left:var(--x);top:var(--y);width:1.6em;height:1.6em;margin:-.8em 0 0 -.8em;border-radius:50%;background:var(--you);box-shadow:0 0 0 .34em #fff,0 .25em .7em #0000004d;z-index:1}.sp-you:before{content:"";position:absolute;top:-1.5em;right:-1.5em;bottom:-1.5em;left:-1.5em;border-radius:50%;background:var(--you);opacity:.16;animation:spYou 2.6s ease-in-out infinite}@keyframes spYou{50%{transform:scale(.7);opacity:.26}}.sp-pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0;z-index:2}.sp-ring{position:absolute;left:-2.8em;top:-2.8em;width:5.6em;height:5.6em;border-radius:50%;border:.24em solid var(--sage-deep);opacity:0}.spot.is-in .sp-ring{animation:spRing 2.8s ease-out infinite}.spot.is-in .sp-ring+.sp-ring{animation-delay:1.4s}@keyframes spRing{0%{transform:scale(.4);opacity:.8}to{transform:scale(2.3);opacity:0}}.sp-body{position:absolute;left:0;bottom:.7em;width:5.8em;height:5.8em;margin-left:-2.9em;transform-origin:50% 115%;opacity:0;transform:translateY(-3.5em) scale(.6)}.spot.is-in .sp-body{animation:spDrop .9s cubic-bezier(.3,1.5,.5,1) .25s both}.spot-and .sp-body{animation-delay:.55s!important}.spot-phone.is-re .sp-body{animation:spDrop2 .9s cubic-bezier(.3,1.5,.5,1) both!important}@keyframes spDrop{0%{opacity:0;transform:translateY(-3.5em) scale(.6)}35%{opacity:1}to{opacity:1;transform:none}}@keyframes spDrop2{0%{opacity:0;transform:translateY(-3.5em) scale(.6)}35%{opacity:1}to{opacity:1;transform:none}}.sp-ava{position:relative;display:block;width:5.8em;height:5.8em;border-radius:50%;overflow:hidden;border:.34em solid #fff;background:#d9d4c9;box-shadow:0 .6em 1.4em -.2em #10221c73;z-index:1}.sp-ava img{width:100%;height:100%;object-fit:cover;object-position:var(--o);transform:scale(var(--z));transform-origin:var(--o)}.sp-dog{--o:30% 40%;--z:1.2}.sp-cat{--o:50% 24%;--z:1.45}.sp-tail{position:absolute;left:50%;bottom:-.55em;width:1.3em;height:1.3em;margin-left:-.65em;background:#fff;border-radius:.2em;transform:rotate(45deg);box-shadow:.25em .25em .5em -.1em #10221c4d}.sp-tag{position:absolute;right:-.7em;bottom:-.1em;width:2.5em;height:2.5em;border-radius:50%;z-index:2;background:radial-gradient(circle at 34% 28%,#5a605e 0,#1b1e1e 46%,#060707);box-shadow:0 0 0 .24em #fff,0 .3em .6em #0006}.sp-tag:before{content:"";position:absolute;top:.42em;right:.42em;bottom:.42em;left:.42em;border-radius:50%;border:1px solid rgba(255,255,255,.14)}.sp-tag:after{content:"";position:absolute;top:-.3em;right:-.3em;bottom:-.3em;left:-.3em;border-radius:50%;border:.22em solid var(--honey);opacity:0}.sp-bar{position:absolute;left:0;right:0;top:0;height:5em;display:flex;align-items:center;justify-content:space-between;padding:0 2.3em 0 2.9em;z-index:3;background:linear-gradient(#ffffffd9,#fff0)}.sp-bar b{font-size:1.45em;font-weight:700;letter-spacing:-.01em}.sp-ico svg{display:block;width:3.4em;height:1.2em;fill:currentColor}.sp-isl{position:absolute;left:50%;top:1.15em;width:8.4em;height:2.5em;margin-left:-4.2em;border-radius:1.25em;background:#050505}.sp-cam{position:absolute;left:50%;top:1.45em;width:1.7em;height:1.7em;margin-left:-.85em;border-radius:50%;background:#0b0b0c}.spot-and .sp-bar{height:4.6em;padding:0 2.1em}.spot-and .sp-bar b{font-size:1.3em;font-weight:500}.sp-fab{position:absolute;right:1.3em;top:6em;width:3.8em;height:3.8em;border-radius:1em;background:#fffffff2;box-shadow:0 .3em 1em #00000029;display:grid;place-items:center;z-index:2}.sp-fab svg{width:1.8em;height:1.8em;fill:var(--you)}.spot-and .sp-fab{border-radius:50%}.spot-and .sp-fab svg{fill:none;stroke:#3c4043;stroke-width:1.9}.spot-and .sp-fab circle:first-child{fill:var(--you);stroke:none}.sp-sheet{position:absolute;left:0;right:0;bottom:0;top:36.2em;z-index:3;display:flex;flex-direction:column;gap:1.15em;padding:1em 1.7em 0;background:#fff;border-radius:2.3em 2.3em 0 0;box-shadow:0 -.4em 2em #10221c29}.spot-and .sp-sheet{background:#f6f8fb;border-radius:2.8em 2.8em 0 0}.sp-grab{display:block;width:3.8em;height:.5em;border-radius:1em;background:#d3d6d4;margin:0 auto}.sp-row{display:flex;align-items:center;gap:1.2em;min-width:0}.sp-ava.sp-mini{flex:none;width:4.4em;height:4.4em;border-width:0;box-shadow:none}.sp-txt{display:flex;flex-direction:column;min-width:0}.sp-txt b{font-size:2em;line-height:1.1;font-weight:700;letter-spacing:-.01em;margin-bottom:.15em}.sp-txt span{font-size:1.2em;line-height:1.35;color:#6a6f6d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sp-acts{display:grid;grid-template-columns:1fr 1fr;gap:.9em}.sp-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;height:4.9em;padding:0 .4em;border-radius:1.05em;background:#f0eee9;color:var(--forest);font-size:1.12em;font-weight:600;line-height:1.1;text-align:center;transition:transform .2s,background-color .3s}.sp-btn svg{width:1.8em;height:1.8em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sp-play{background:var(--sage-deep);color:#fff;cursor:pointer}.sp-play svg path:first-child{fill:currentColor}.spot-and .sp-btn{flex-direction:row;height:3.7em;border-radius:999px;background:#dcefe8;font-size:1.05em}.spot-and .sp-play{background:var(--forest);color:#fff}.spot-and .sp-btn svg{width:1.6em;height:1.6em;flex:none}.sp-status{display:flex;align-items:center;gap:.6em;font-size:1.1em;font-weight:600;color:var(--sage-deep);opacity:0;transform:translateY(.4em);transition:opacity .3s,transform .3s}.sp-status span{width:.7em;height:.7em;border-radius:50%;background:var(--honey);flex:none}.sp-home{position:absolute;left:50%;bottom:.8em;width:10em;height:.45em;margin-left:-5em;border-radius:1em;background:#111}.spot-and .sp-home{width:7.5em;margin-left:-3.75em;height:.36em;background:#7d8185}.spot-phone.is-ringing .sp-status{opacity:1;transform:none}.spot-phone.is-ringing .sp-status span{animation:spBlink .6s ease-in-out infinite alternate}.spot-phone.is-ringing .sp-play{transform:scale(.96)}.spot-phone.is-ringing .sp-play .w1{animation:spBlink .5s ease-in-out infinite alternate}.spot-phone.is-ringing .sp-play .w2{animation:spBlink .5s .25s ease-in-out infinite alternate}.spot-phone.is-ringing .sp-tag{animation:spWig .36s ease-in-out infinite}.spot-phone.is-ringing .sp-tag:after{animation:spWave 1s ease-out infinite}@keyframes spBlink{0%{opacity:.25}to{opacity:1}}@keyframes spWig{25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}@keyframes spWave{0%{transform:scale(.9);opacity:.95}to{transform:scale(2.4);opacity:0}}@media(max-width:899px){.spot-panel{grid-template-columns:minmax(0,1fr);grid-template-areas:"head""stage""steps""foot";border-radius:30px;padding:30px 20px 28px;row-gap:26px}.spot-head .lead{font-size:18px;margin-top:14px}.spot-phones{width:min(100%,440px);aspect-ratio:1/1.3}.spot-phone{width:58%}.spot-ios{left:1%;top:5%}.spot-and{left:41%}.spot-cta .btn{flex:1 1 auto;justify-content:center}}@media(max-width:480px){.spot-cta .btn-line,.spot-cta .js-from{display:none}.spot-cta .btn{width:100%;justify-content:space-between}.spot-steps h3{font-size:19px}}@media(prefers-reduced-motion:reduce){.spot-phone,.sp-route,.sp-status{transition:none}.spot .sp-ring,.sp-you:before,.spot.is-in .sp-route{animation:none}.spot .sp-body{animation:none!important;opacity:1;transform:none}.spot-phone.is-ringing .sp-tag,.spot-phone.is-ringing .sp-tag:after{animation:none}}
/*# sourceMappingURL=/cdn/shop/t/21/assets/hoopet-e.css.map */