/* A shared, restrained depth response for the page's boxed surfaces. */
.float-surface{isolation:isolate;transform-origin:center;transition:transform .32s cubic-bezier(.2,.7,.25,1),box-shadow .32s,border-color .32s,opacity .5s;transition-delay:0s!important}
.float-surface.is-floating{transform:perspective(1500px) translate3d(0,var(--surface-lift,-9px),0) rotateX(var(--surface-rx,0deg)) rotateY(var(--surface-ry,0deg))!important;border-color:#ffefc478;box-shadow:inset 0 1px 0 #fff7df4d,0 34px 56px -20px #2113009c,0 9px 18px -12px #190e0099;transition-duration:.16s;will-change:transform}
.float-shine{position:absolute;inset:0;z-index:8;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(ellipse at var(--surface-x,50%) var(--surface-y,50%),#fff5d126,transparent 67%),linear-gradient(130deg,#fff8de09,transparent 55%);transition:opacity .25s}
.float-surface.is-floating>.float-shine{opacity:1}
.float-surface:focus-within{border-color:#ffefc478}
/* Leave enough room for the phone's rotation and perspective at the page edge. */
.hero-phone{right:8%;bottom:-8%;width:clamp(128px,12vw,168px)}
@media(max-width:900px){.hero-phone{right:4%;bottom:-6%;width:34%}}
@media(pointer:coarse){.float-shine{display:none}}