/* Shared only by the homepage and AI-creator phone galleries. */
.phone-carousel{background:var(--surface);--phone-stage-height:clamp(680px,50vw,760px)}
.phone-carousel .rail-heading{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.phone-carousel .rail-heading>div:first-child{width:100%;max-width:880px}
.phone-carousel .rail-heading h2{font-size:clamp(38px,4.7vw,70px);font-weight:800;letter-spacing:-.035em;line-height:1.06;text-align:center;margin-inline:auto}
.phone-carousel .rail-heading p{max-width:620px;margin:20px auto 0}
.phone-carousel .phone-controls{display:none}
.phone-carousel .phone-controls .icon-button{width:52px;height:52px;border:1px solid var(--line);border-radius:50%;transition:background-color 180ms,color 180ms,transform 180ms cubic-bezier(.23,1,.32,1)}
.phone-carousel .phone-controls .icon-button:hover{background:var(--ink);color:var(--paper)}
.phone-carousel .phone-controls .icon-button:active{transform:scale(.94)}
.phone-carousel .phone-position{position:absolute;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.phone-carousel .phone-stage{display:flex;align-items:center;gap:26px;height:var(--phone-stage-height);box-sizing:border-box;margin-top:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:12px;padding:36px 12px 12px;scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
.phone-carousel .phone-stage>.video-block{flex:0 0 clamp(240px,24vw,330px);max-width:calc((var(--phone-stage-height) - 60px)/2);scroll-snap-align:start;margin-top:0;min-width:0}
.phone-carousel .phone-stage .video-screen{aspect-ratio:9/18;background:#121713}
.phone-carousel .phone-stage .video-screen img{object-fit:cover}
.phone-carousel[data-phone-state=ready] .phone-stage{display:block;position:relative;padding:0;overflow:clip;touch-action:pan-y pinch-zoom;cursor:grab;scroll-snap-type:none;isolation:isolate;outline-offset:-7px}
.phone-carousel .phone-stage.is-dragging{cursor:grabbing}
.phone-carousel .phone-dom{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Body, screen and controls share one flattened, opaque Three.js surface.
   No descendant can escape into a nearer phone's stacking plane. */
.phone-carousel .phone-object{box-sizing:border-box;width:280px;height:552px;padding:8px;border:2px solid #515b55;border-radius:38px;background:#171e19;isolation:isolate;transform-style:flat;overflow:hidden;backface-visibility:hidden;touch-action:pan-y pinch-zoom}
.phone-carousel .phone-object::after{content:"";position:absolute;inset:8px;border-radius:30px;background:rgb(0 0 0 / var(--phone-shade,0));pointer-events:none;z-index:6}
.phone-carousel .phone-object>.video-block{position:relative;width:100%;height:100%;margin:0;max-width:none;border-radius:28px;overflow:hidden}
.phone-carousel .phone-object .video-screen{width:100%;height:100%;aspect-ratio:auto;border-radius:28px;background:#111613}
.phone-carousel .phone-object .video-screen img{object-fit:cover;pointer-events:none;user-select:none;transform:none!important}
.phone-carousel .phone-object .phone-playback-controls{transform:translateX(-50%) scale(var(--phone-controls-scale,1));transform-origin:center bottom}
.phone-carousel .phone-object .video-play{background:transparent;touch-action:pan-y pinch-zoom}
.phone-carousel .phone-object .video-play>span{width:64px;height:64px;box-shadow:0 5px 18px #0002}
.phone-carousel .phone-object .video-play:active>span{transform:scale(.95)}
.phone-carousel .phone-object:not(.is-selected) .video-play>span{opacity:0}
.phone-carousel .phone-pick{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;border-radius:38px;touch-action:pan-y pinch-zoom;z-index:7}
@media(hover:hover) and (pointer:fine){.phone-carousel .phone-object .video-play:hover>span{transform:scale(1.07)}}
@media(max-width:900px){.phone-carousel{--phone-stage-height:580px}.phone-carousel .phone-controls{gap:8px}.phone-carousel .phone-position{margin-right:4px}}
@media(max-width:639px){.phone-carousel{--phone-stage-height:430px}.phone-carousel .rail-heading{gap:24px}.phone-carousel .phone-stage{padding-inline:8px;scroll-padding-inline:8px;margin-top:12px}.phone-carousel .phone-stage>.video-block{flex-basis:76%}}
@media(prefers-reduced-motion:reduce){.phone-carousel .phone-controls .icon-button,.phone-carousel .phone-object .video-play>span{transition:none}}