/* Section 9 only. Ten existing e-ink screens recede toward a clear product center. */
.rotation-page .rotation-stage{isolation:isolate;background:#fff}
.rotation-page .preorder-depth{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:layout paint;perspective:1100px}
.rotation-page .preorder-depth:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 26% 72% at 50% 50%,#fff 25%,rgba(255,255,255,.98) 53%,rgba(255,255,255,.25) 82%,transparent 100%);pointer-events:none}
.rotation-page .depth-screen{position:absolute;display:block;margin:0;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:2/3;transform:translate(-50%,-50%) perspective(900px) rotateY(var(--yaw)) rotateZ(var(--tilt));transform-origin:center;filter:blur(var(--blur));opacity:var(--alpha);border:1px solid #bfc3b9;background:#eeeee8;box-shadow:0 3px 0 #d5d8ce,0 12px 25px #2a342418;border-radius:3px;overflow:hidden}
.rotation-page .depth-screen img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);border-radius:2px}
/* Near: crisp, widely spaced screen edges. */
.rotation-page .depth-screen:nth-child(1){--x:5%;--y:27%;--w:clamp(150px,18vw,280px);--yaw:25deg;--tilt:-13deg;--blur:0px;--alpha:.8}
.rotation-page .depth-screen:nth-child(2){--x:95%;--y:66%;--w:clamp(150px,18vw,280px);--yaw:-25deg;--tilt:13deg;--blur:0px;--alpha:.8}
.rotation-page .depth-screen:nth-child(3){--x:7%;--y:85%;--w:clamp(115px,13vw,200px);--yaw:24deg;--tilt:10deg;--blur:.25px;--alpha:.68}
.rotation-page .depth-screen:nth-child(4){--x:94%;--y:7%;--w:clamp(115px,13vw,200px);--yaw:-24deg;--tilt:-10deg;--blur:.25px;--alpha:.68}
/* Middle: smaller screens, softer detail, a shared vanishing point. */
.rotation-page .depth-screen:nth-child(5){--x:22%;--y:46%;--w:clamp(90px,10.5vw,160px);--yaw:29deg;--tilt:-8deg;--blur:1.1px;--alpha:.57}
.rotation-page .depth-screen:nth-child(6){--x:78%;--y:41%;--w:clamp(90px,10.5vw,160px);--yaw:-29deg;--tilt:8deg;--blur:1.1px;--alpha:.57}
.rotation-page .depth-screen:nth-child(7){--x:25%;--y:83%;--w:clamp(72px,8.5vw,130px);--yaw:24deg;--tilt:9deg;--blur:1.8px;--alpha:.46}
.rotation-page .depth-screen:nth-child(8){--x:75%;--y:13%;--w:clamp(72px,8.5vw,130px);--yaw:-24deg;--tilt:-9deg;--blur:1.8px;--alpha:.46}
/* Far: gentle blur stays on the background screens, never on the product or copy. */
.rotation-page .depth-screen:nth-child(9){--x:35%;--y:37%;--w:clamp(58px,6.4vw,98px);--yaw:31deg;--tilt:-6deg;--blur:3.2px;--alpha:.34}
.rotation-page .depth-screen:nth-child(10){--x:65%;--y:67%;--w:clamp(58px,6.4vw,98px);--yaw:-31deg;--tilt:6deg;--blur:3.2px;--alpha:.34}
.rotation-page .turn-headline,.rotation-page .rotation-visual,.rotation-page .closing-order{position:relative;z-index:1;filter:none}
.rotation-page .rotation-visual{flex-shrink:0;mix-blend-mode:multiply}
.rotation-page .preorder-offer-limit{margin:12px 0 0;color:#435e4c;font-size:13px;line-height:1.4;letter-spacing:.005em}
.rotation-page .preorder-offer-limit strong{font-weight:650}
.rotation-page .preorder-price>span{font-size:12px}
.rotation-page #final-preorder:focus-visible{outline:3px solid #27704b;outline-offset:5px}
@media(max-width:1000px){
 .rotation-page .preorder-depth:after{background:radial-gradient(ellipse 37% 70% at 50% 49%,#fff 25%,#fffffff5 56%,#ffffff35 83%,transparent 100%)}
}
@media(max-width:700px){
 .rotation-page .preorder-depth:after{background:radial-gradient(ellipse 46% 61% at 50% 48%,#fff 33%,#fffffff5 65%,#ffffff55 88%,transparent 100%)}
 .rotation-page .depth-screen:nth-child(1){--x:-6%;--y:30%;--w:142px;--alpha:.65}
 .rotation-page .depth-screen:nth-child(2){--x:107%;--y:65%;--w:142px;--alpha:.65}
 .rotation-page .depth-screen:nth-child(3){--x:3%;--y:86%;--w:92px;--alpha:.48}
 .rotation-page .depth-screen:nth-child(4){--x:98%;--y:5%;--w:92px;--alpha:.48}
 .rotation-page .depth-screen:nth-child(5){--x:12%;--y:50%;--w:76px;--alpha:.4}
 .rotation-page .depth-screen:nth-child(6){--x:87%;--y:36%;--w:76px;--alpha:.4}
 .rotation-page .depth-screen:nth-child(7){--x:17%;--y:77%;--w:61px;--alpha:.3}
 .rotation-page .depth-screen:nth-child(8){--x:82%;--y:16%;--w:61px;--alpha:.3}
 .rotation-page .depth-screen:nth-child(9){--x:25%;--y:38%;--w:49px;--alpha:.25}
 .rotation-page .depth-screen:nth-child(10){--x:74%;--y:65%;--w:49px;--alpha:.25}
 .rotation-page .preorder-offer-limit{font-size:12px;margin-top:10px}
 .rotation-page .rotation-stage{min-height:calc(100svh - var(--s4-nav,60px));height:auto;padding-block:24px;gap:16px}
 .rotation-page .rotation-stage .rotation-visual{width:min(88vw,max(160px,calc(100svh - var(--s4-nav,60px) - 310px)))}
}
@media(max-height:600px) and (min-width:701px){
 .rotation-page .preorder-depth:after{background:radial-gradient(ellipse 30% 100% at 50% 50%,#fff 36%,#fffffff5 65%,transparent 100%)}
}
@media(prefers-reduced-motion:reduce){
 .rotation-page .preorder-depth,.rotation-page .depth-screen{animation:none;transition:none}
 .rotation-page .rotation-visual>canvas{display:none}
 .rotation-page .rotation-visual>img{visibility:visible}
}

/* Short landscape keeps the full offer visible during the existing rotation pin. */
@media (max-height:500px) and (min-width:701px) {
 .rotation-page .rotation-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:auto auto;align-content:center;justify-items:center;gap:12px 32px;height:calc(100svh - var(--s4-nav,60px));min-height:0;padding:12px 6%;overflow:hidden}
 .rotation-page .turn-headline{grid-column:2;grid-row:1;align-self:end}
 .rotation-page .rotation-stage .rotation-visual{grid-column:1;grid-row:1 / 3;width:min(30vw,calc(100svh - var(--s4-nav,60px) - 36px),260px);min-width:0}
 .rotation-page .closing-order{grid-column:2;grid-row:2;align-self:start}
 .rotation-page .preorder-depth:after{background:radial-gradient(ellipse 60% 110% at 51% 50%,#fff 30%,#fffffff5 61%,#ffffff55 88%,transparent 100%)}
}

/* Reserve the full offer in medium-height laptop windows. */
@media(min-width:701px) and (min-height:501px) and (max-height:740px){
 .rotation-page .rotation-stage{gap:16px;padding-block:20px}
 .rotation-page .rotation-stage .rotation-visual{width:min(62vw,calc(100svh - 340px),400px)}
}