.phone-showcase{--size:max(5px, 1vmin);--height:80em;--pad:1.25em;--border-radius:6.666em;--gutter:calc(var(--pad) * 2);--button-width:.333em;--notch-height:3.33em;--notch-width:33.3%;--notch-radius:calc(var(--border-radius) - calc(var(--pad) * 2));--notch-duration:.333s;--ease:cubic-bezier(.666, 0, .4, 1);--ease-spring:cubic-bezier(.6666, 0, .4, 1.2);--ease-out:cubic-bezier(.15, 0, .333, 1);--border-width:.4em;--deep-purple:284;--gold:30;--space-black:215;--silver:254;--c-h:var(--gold);--c-s:100%;--c-1:50%;font-size:var(--size);justify-content:center;align-items:center;padding:4rem 0;display:flex;position:relative}@media (width<=640px){.phone-showcase{--size:max(7.1px, 1.85vmin);padding-top:0}}@media (width>=641px) and (width<=1024px){.phone-showcase{--size:max(4px, .85vmin)}}@media (width>=1025px){.phone-showcase{--size:9.99px;padding-top:0}}@keyframes phone-appear{to{opacity:1;transform:scale(1)}}@keyframes phone-bg-test{0%{transform:scale(1)translate(0)}to{transform:scale3d(2,2,2)translate3d(5em,5em,5em)}}.phone-showcase .phone{z-index:2;aspect-ratio:37/76;height:var(--height);border-radius:var(--border-radius);box-sizing:border-box;box-shadow:0 0 .1em .25em hsl(var(--c-h), 20%, 25%), 0 0 0 var(--border-width) hsl(var(--c-h), 30%, 85%);opacity:0;animation:phone-appear 1s var(--ease-out) forwards;-webkit-backface-visibility:hidden;background:#000;position:relative;transform:scale(1.1)}.phone-showcase .phone:before{content:"";top:var(--border-radius);right:calc(var(--border-width) * -1);bottom:var(--border-radius);left:calc(var(--border-width) * -1);border:.5em solid hsl(var(--c-h), 20%, 25%);border-left-width:0;border-right-width:0;position:absolute}.phone-showcase .buttons{inset:calc(var(--border-width) * -1);pointer-events:none;position:absolute}.phone-showcase .buttons .left,.phone-showcase .buttons .right{width:var(--button-width);flex-direction:column;align-items:stretch;gap:1.5em;display:flex;position:absolute}.phone-showcase .buttons .left{right:100%;top:calc(var(--border-radius) * 2)}.phone-showcase .buttons .left .button:first-child{height:3em;margin-bottom:.5em}.phone-showcase .buttons .right{left:100%;top:calc(var(--border-radius) * 3);transform:scaleX(-1)}.phone-showcase .buttons .right .button{height:9.5em}.phone-showcase .buttons .button{background:hsl(var(--c-h), 20%, 95%);height:6em;box-shadow:inset -.15em 0 .1em black, inset 0 0 .1em hsl(var(--c-h), 30%, 90%), inset 0 .2em .1em hsl(var(--c-h), 30%, 90%), inset 0 -.2em .1em hsl(var(--c-h), 30%, 90%), inset -.1em .333em .1em #00000080, inset -.1em -.333em .1em #00000080;border-top-left-radius:.2em;border-bottom-left-radius:.2em}.phone-showcase .screen-container{border-radius:var(--border-radius);border:var(--pad) solid black;align-items:center;gap:calc(var(--pad) * 2);flex-direction:column;display:flex;position:absolute;inset:0}.phone-showcase .screen-container:before{content:"";z-index:2;width:36.6%;bottom:calc(var(--pad) * .75);height:calc(var(--pad) * .5);border-radius:calc(var(--pad) * .25);filter:drop-shadow(0 .1em .25em #0000001a);background:#fff;position:absolute}.phone-showcase .bg{border-radius:calc(var(--border-radius) - var(--pad));background:#000;position:absolute;inset:0;overflow:hidden}.phone-showcase .bg>*{opacity:0;transition:opacity 1s var(--ease-out) .5s;flex-direction:column;display:flex;position:absolute;inset:0}.phone-showcase .bg .gold{opacity:1;z-index:2;transition-delay:0s}@keyframes gold-pulse{0%,to{opacity:1}50%{opacity:.4}}.phone-showcase .bg .gold.gold-pulsing{animation:1.2s ease-in-out infinite gold-pulse}.phone-showcase .bg .gold.gold-fading{opacity:0;pointer-events:none;transition:opacity 2.5s}.phone-showcase .bg.bg-peach{background:linear-gradient(#fddcb5 0%,#fee8d0 40%,#fff3e8 75%,#fffaf5 100%);transition:background 2.5s}.phone-showcase .showcase-content{z-index:3;border-radius:calc(var(--border-radius) - var(--pad));opacity:0;padding-top:5em;padding-left:1em;padding-right:1em;animation:.8s ease-out .8s forwards fade-in-showcase;position:absolute;inset:0;overflow:hidden}.phone-showcase .showcase-slide{height:75%;transition:transform 1.5s cubic-bezier(.4,0,.2,1),opacity 1.5s;position:absolute;top:5em;left:1em;right:1em}.phone-showcase .showcase-slide.slide-active{opacity:1;transform:translateY(0)}.phone-showcase .showcase-slide.slide-exit{opacity:0;transform:translateY(-100%)}.phone-showcase .showcase-slide.slide-waiting{opacity:0;transform:translateY(calc(100% + 15em))}.phone-showcase .showcase-slide.slide-peek{opacity:1;transform:translateY(calc(100% + 1.5em))}.phone-showcase .showcase-slide.slide-enter{opacity:1;transform:translateY(0)}.phone-showcase .showcase-img{object-fit:contain;border-radius:1em;width:100%;height:auto}@keyframes fade-in-showcase{0%{opacity:0}to{opacity:1}}.phone-showcase .bg .gold .section:before{transition-delay:0s;animation:1s infinite alternate-reverse phone-bg-test;transform:scale(1)translate(0)}.phone-showcase .bg .section{--g-h:var(--c-h);--g-s:var(--c-s);--g-1:var(--c-1);border-radius:calc(var(--border-radius) - var(--pad));border-bottom-right-radius:20em;border-bottom-left-radius:20em;flex-grow:1;position:relative;overflow:hidden}.phone-showcase .bg .section:before{content:"";border-radius:inherit;background:radial-gradient(85% 125% at 50% 140%, black 66.6%, transparent), radial-gradient(120% 120% at 50% 145%, hsl(calc(var(--g-h) - 45), 100%, 50%) 50%, transparent), radial-gradient(150% 100% at 50% 80%, transparent 35%, hsl(calc(var(--g-h) + 50), 100%, 99%));background-color:hsl(var(--g-h), var(--g-s), var(--g-1));transform-origin:bottom;transition:transform 1s var(--ease-out) .5s;position:absolute;inset:0;transform:scale(1.1,1.25)}.phone-showcase .bg .section:after{content:"";border:var(--border-width) solid #fffc;border-radius:inherit;filter:blur(.05em);position:absolute;inset:0;-webkit-mask-image:radial-gradient(100% 100% at 50% 70%,#000 30%,#0000 50%);mask-image:radial-gradient(100% 100% at 50% 70%,#000 30%,#0000 50%)}.phone-showcase .bg .section .glow{border-radius:inherit;mix-blend-mode:overlay;z-index:1;background:radial-gradient(80% 150% at 50% 100%, hsl(var(--g-h), 100%, var(--g-1)), transparent 70%);position:absolute;inset:0}.phone-showcase .bg .section:last-of-type{--g-h:calc(var(--c-h) - var(--g-hue-adjust,0));--g-s:calc(var(--c-s) - 25%);--g-l:calc(var(--c-1) + 20%);transform:scaleY(-1)translateZ(1px)}.phone-showcase .bg .section:last-of-type:before{background:radial-gradient(85% 125% at 50% 140%, black 66.6%, transparent), radial-gradient(120% 120% at 50% 145%, hsl(calc(var(--g-h) - var(--g-hue-adjust-2,var(--g-hue-adjust,0))), 100%, 50%) 50%, transparent), radial-gradient(150% 100% at 50% 95%, transparent 15%, hsl(calc(var(--g-h) + 5), 100%, var(--g-lightness,100%)));background-color:hsl(var(--g-h), var(--g-s), var(--g-l))}.phone-showcase .gold{--c-h:var(--gold);--g-hue-adjust-2:-100}.phone-showcase .notch-static{z-index:3;top:var(--pad);right:var(--pad);left:var(--pad);pointer-events:none;justify-content:center;display:flex;position:absolute}.phone-showcase .notch-static .notch{border-radius:var(--notch-radius);width:var(--notch-width);height:var(--notch-height);background:#000}.phone-showcase .camera{height:var(--notch-height);aspect-ratio:1;pointer-events:none;z-index:4;top:calc(var(--pad) * 2);right:calc(50% - calc(var(--notch-width) * .5));margin-right:calc(var(--pad) * .333);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute}.phone-showcase .phone>.phone-cta-overlay{z-index:10;width:680px;position:absolute;bottom:110px;left:50%;overflow:visible;transform:translate(-50%)}.phone-showcase .phone-cta-card{background:#fff;border-radius:16px;flex-direction:column;justify-content:space-between;height:100%;padding:16px 20px;display:flex;box-shadow:0 8px 30px #0000001f,0 2px 8px #0000000f}.phone-showcase .phone-cta-header{align-items:flex-start;gap:10px;display:flex}.phone-showcase .phone-cta-icon{color:#000;flex-shrink:0;font-size:20px;line-height:1.4}.phone-showcase .phone-cta-text{color:#000;margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:500;line-height:1.4;animation:.5s ease-out cta-text-fade}@keyframes cta-text-fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.phone-showcase .phone-cta-row{align-items:center;gap:12px;display:flex}.phone-showcase .phone-cta-input{color:#333;background:#f5f5f5;border:none;border-radius:10px;outline:none;flex:1;min-width:0;padding:12px 14px;font-family:inherit;font-size:15px}.phone-showcase .phone-cta-input::placeholder{color:#aaa}.phone-showcase .phone-cta-divider{background:#e0e0e0;flex-shrink:0;width:1px;height:28px}.phone-showcase .phone-cta-button{color:#fff;cursor:pointer;white-space:nowrap;background:#000;border:none;border-radius:10px;padding:12px 20px;font-family:inherit;font-size:14px;font-weight:600;transition:background .2s}.phone-showcase .phone-cta-button:hover{background:#222}@media (width<=640px){.phone-showcase .phone>.phone-cta-overlay{width:calc(100% + 40px);height:auto;bottom:80px}.phone-showcase .phone-cta-card{gap:0;height:auto;padding:12px 14px}.phone-showcase .phone-cta-header{display:none}.phone-showcase .phone-cta-row{gap:8px}.phone-showcase .phone-cta-input{border-radius:10px;padding:10px 12px;font-size:13px}.phone-showcase .phone-cta-button{border-radius:50%;justify-content:center;align-items:center;width:40px;min-width:40px;height:40px;padding:0;font-size:0;display:flex}.phone-showcase .phone-cta-button span{font-size:18px}}.phone-showcase .phone-cta-dropdown{z-index:9999;background:#fff;border-radius:12px;max-height:200px;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow:hidden auto;box-shadow:0 8px 30px #00000026,0 2px 8px #00000014}.phone-showcase .phone-cta-dropdown-item{cursor:pointer;text-align:left;background:#fff;border:none;border-bottom:1px solid #f0f0f0;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:10px 14px;font-family:inherit;transition:background .15s;display:flex}.phone-showcase .phone-cta-dropdown-item:last-child{border-bottom:none}.phone-showcase .phone-cta-dropdown-item:hover{background:#f5f5f5}.phone-showcase .phone-cta-dropdown-name{color:#111;font-size:13px;font-weight:600;line-height:1.3;display:block}.phone-showcase .phone-cta-dropdown-address{color:#888;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:11px;line-height:1.3;display:block;overflow:hidden}.phone-showcase .phone-cta-dropdown-loading{color:#999;text-align:center;padding:12px 14px;font-size:13px}.phone-showcase .camera:before{content:"";aspect-ratio:1;border-radius:inherit;background:radial-gradient(#6667ac,#0000 50%) 33.3% 10%/75% 50% no-repeat,#080928 radial-gradient(#454680,#0000 50%) 60% 85%/50% 50% no-repeat;height:33.3%;box-shadow:inset 0 0 .25em #4c4da3}
