/* Depth belongs to the screenshots; navigation and reading surfaces stay steady. */
.showcase-stage{perspective:1200px;background:radial-gradient(ellipse at 45% 40%,#36343d,#252528 76%);box-shadow:inset 0 1px 0 #ffffff0b,0 24px 65px -44px #000;transition:border-color .35s,box-shadow .35s}
.showcase-stage:before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,35%),color-mix(in srgb,var(--app-color) 18%,transparent),transparent 68%);opacity:.7;transition:opacity .4s}
.showcase-stage:after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:linear-gradient(130deg,#ffffff08,transparent 35%,transparent 68%,#ffffff04)}
.showcase-stage.is-tracking{border-color:#62616a;box-shadow:inset 0 1px 0 #ffffff12,0 30px 70px -44px #000}
.showcase-stage.is-tracking:before{opacity:1}
.showcase-object{position:relative;z-index:1;width:100%;display:flex;align-items:center;justify-content:center;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.is-tracking .showcase-object{transition-duration:.13s}
.showcase-image{outline:1px solid #ffffff16;box-shadow:0 30px 45px -16px #000b,0 2px 8px #0005;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.showcase-image:hover{box-shadow:0 35px 55px -16px #000c,0 0 0 1px #ffffff38}
.dual-stage .showcase-object,.guide-stage .showcase-object{position:absolute;inset:0}
.guide-stage{min-height:480px}
.guide-shot{position:absolute;left:4%;top:9%;width:92%;transform:perspective(1200px) rotateY(-4deg) rotateZ(-1.5deg)}
.guide-shot:hover{transform:perspective(1200px) rotateY(-2deg) rotateZ(-.5deg) translateY(-3px)}
.export-shot{position:absolute;width:35%;aspect-ratio:3/2;right:4%;bottom:12%;overflow:hidden;background:#282828;transform:translateZ(32px) rotate(3deg);border:1px solid #64646c;border-radius:8px}
.export-shot:hover{transform:translateZ(32px) rotate(1deg) translateY(-4px)}
.export-shot img{position:absolute;left:0;top:0;width:426.666667%;max-width:none;transform:translate(-30.078125%,-18.154762%);border-radius:0}
.network-stage .showcase-object{width:min(100%,440px)}
.network-stage .wide-shot{position:relative;aspect-ratio:680/610;overflow:hidden;background:#0a1119}
.network-stage .wide-shot img{position:absolute;left:0;top:0;width:188.235294%;max-width:none;transform:translate(-32.8125%,-8.928571%);border-radius:0}
.product-visual{perspective:1400px;transition:box-shadow .4s,border-color .4s}
.product-visual .screenshot-button{transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-origin:center}
.product-visual.is-tracking{border-color:#64616f;box-shadow:0 22px 60px -40px #000}
.product-visual.is-tracking .screenshot-button{transition-duration:.13s}
.app-choice{transition:background .25s,color .25s}
.app-choice img{transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .3s,opacity .3s}
.app-choice.is-selected:after{box-shadow:0 -3px 18px color-mix(in srgb,var(--app-color) 25%,transparent)}
.button.primary{box-shadow:0 2px 0 #fff2 inset,0 4px 14px #0002;transition:background .2s,transform .25s,box-shadow .25s}
.text-link>span,.comparison-row>span:last-child,.mini-app>span:last-child{transition:transform .3s}
.comparison-row,.mini-app{transition:background .25s,border-color .25s}
.faq-list summary>span{transition:transform .25s}
#image-viewer[open]{animation:viewer-enter .24s ease-out}
@keyframes viewer-enter{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){
  .app-choice:hover img{transform:perspective(200px) translateY(-4px) rotateY(-12deg) rotateZ(-4deg);filter:saturate(1.1)}
  .button.primary:hover{transform:translateY(-2px);box-shadow:0 2px 0 #fff4 inset,0 9px 22px #0004}
  .text-link:hover>span,.comparison-row:hover>span:last-child,.mini-app:hover>span:last-child{transform:translate(3px,-2px)}
  .comparison-row:hover{border-color:#626168;background:#252529}
}
@media(min-width:1400px){.guide-stage{min-height:520px}}
@media(max-width:900px){.guide-stage{min-height:470px}.guide-shot{width:86%;left:5%;top:7%}.export-shot{width:31%;right:7%;bottom:9%}}
@media(max-width:620px){.guide-stage{min-height:285px}.guide-shot{width:92%;left:4%;top:8%}.export-shot{width:38%;right:5%;bottom:15%}.network-stage{padding:20px 25px 42px}.network-stage .showcase-object{max-width:390px}.network-stage .wide-shot{aspect-ratio:680/610}}
@media(max-width:400px){.guide-stage{min-height:235px}.export-shot{bottom:16%}}
@media(prefers-reduced-motion:reduce){
  .showcase-object,.product-visual .screenshot-button{transform:none!important}
  .showcase-stage:before{background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--app-color) 12%,transparent),transparent 68%)}
  *,*:before,*:after{animation:none!important;transition:none!important}
}