.screenshot-showcase{min-width:0}
.screenshot-stage{position:relative;width:100%;min-width:0;aspect-ratio:1.72;min-height:270px;border:1px solid #e0e4d7;border-radius:18px;isolation:isolate;overflow:hidden;background:#edf0e6;perspective:1500px;transition:background-color .8s ease}
.screenshot-stage[data-product=soidei]{background:#edecf4}
.screenshot-stage[data-product=sableops]{background:#e7ece6}
.screenshot-controls{position:absolute;right:16px;top:16px;z-index:10;display:flex;gap:6px}
.screenshot-nav-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;padding:0;border:1px solid #d4ddcb;border-radius:50%;background:#fff;color:#44523a;box-shadow:0 3px 12px #20282308;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.screenshot-nav-button:hover{background:#f7f9f2;color:var(--orange);border-color:#aebca1}
.screenshot-nav-button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.screenshot-nav-button svg{transition:translate .2s ease;pointer-events:none}
.screenshot-nav-button:first-child:hover svg{translate:-2px 0}.screenshot-nav-button:last-child:hover svg{translate:2px 0}
.screenshot-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.showcase-grid{position:absolute;inset:0;background-image:linear-gradient(#bdc5b51f 1px,transparent 1px),linear-gradient(90deg,#bdc5b51f 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse,black,transparent 75%)}
.showcase-shape{position:absolute;width:280px;height:280px;border:55px solid #e9b4943d;right:-90px;top:-100px;border-radius:50%;pointer-events:none}
.showcase-shape:after{content:'';position:absolute;left:-800px;top:460px;width:110px;height:110px;border:22px solid #c6d0b66b;border-radius:28px;transform:rotate(-24deg)}
.screenshot-deck{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--deck-y,0deg)) rotateY(var(--deck-x,0deg));transition:transform .7s cubic-bezier(.2,.8,.2,1);animation:screenshot-float 10s ease-in-out infinite}
.screenshot-pane{position:absolute;left:50%;top:35px;width:78%;border:1px solid #d6ddcc;border-radius:10px;background:#fff;overflow:hidden;box-shadow:0 22px 55px #26311d1a;transform-origin:center;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .7s ease,filter .7s ease;backface-visibility:hidden}
.screenshot-pane img{display:block;width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;object-position:top;background:#f3f5ef}
.screenshot-pane.is-active{z-index:3;opacity:1;filter:none;transform:translate3d(-50%,0,32px) rotate(0deg);pointer-events:auto}
.screenshot-pane.is-before{z-index:1;opacity:.65;filter:saturate(.6);transform:translate3d(-65%,20px,-90px) rotate(-7deg);pointer-events:none}
.screenshot-pane.is-after{z-index:2;opacity:.65;filter:saturate(.6);transform:translate3d(-35%,20px,-90px) rotate(7deg);pointer-events:none}
.showcase-awaiting .screenshot-pane.is-before,.showcase-awaiting .screenshot-pane.is-after{transform:translate3d(-50%,35px,-90px) rotate(0deg)}
.screenshot-chrome{height:34px;background:#fdfefa;border-bottom:1px solid #e1e5da;display:flex;align-items:center;justify-content:space-between;padding:0 13px;gap:12px;color:#5d6756;font:500 10px/1.5 'DM Sans',sans-serif}
.window-dots{display:flex;align-items:center;gap:4px;min-width:30px}.window-dots i{width:5px;height:5px;background:#d6ddce;border-radius:50%}.window-dots i:first-child{background:#e0bba8}
.window-title{display:flex;gap:5px;align-items:center;letter-spacing:.1px}.window-title>span{color:#99a08f;font-weight:400}
.window-preview{font-size:9px;color:#89937d}
.showcase-corner-label{position:absolute;bottom:18px;left:24px;right:24px;text-align:center;font-size:10px;color:#7c876f;letter-spacing:1.7px;pointer-events:none}
.screenshot-captions{padding:27px 4px 0}
.screenshot-caption{display:flex;justify-content:space-between;align-items:center;gap:24px}
.screenshot-caption[hidden]{display:none}
.screenshot-caption h3{display:flex;align-items:center;gap:15px;flex-wrap:wrap;font:650 23px/1.4 'Manrope',sans-serif;letter-spacing:-.5px;margin:0 0 9px}
.screenshot-caption h3 span{border:1px solid #dce1d2;border-radius:20px;padding:4px 10px;color:#64715a;font:400 13px/1.4 'DM Sans',sans-serif;letter-spacing:0}
.screenshot-caption p{font-size:16px;color:var(--muted);line-height:1.7;margin:0;max-width:650px}
.screenshot-caption>.text-link{flex-shrink:0}
.screenshot-showcase>.sample-note{margin-top:18px}
@keyframes screenshot-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media(max-width:1200px){.screenshot-pane{width:79%;top:76px}.screenshot-stage{aspect-ratio:1.5;min-height:350px}.showcase-corner-label{display:none}.screenshot-caption{align-items:flex-start}.screenshot-caption p{max-width:500px}}
@media(max-width:760px){.screenshot-controls{top:14px;right:14px}.screenshot-stage{aspect-ratio:1.25;min-height:310px;border-radius:12px;perspective:1000px}.screenshot-pane{top:76px;width:83%;border-radius:7px}.screenshot-chrome{height:25px;padding:0 8px;font-size:8px;gap:5px}.window-dots{gap:3px;min-width:20px}.window-dots i{width:4px;height:4px}.window-preview{display:none}.showcase-shape{width:170px;height:170px;right:-80px;top:-90px;border-width:35px}.screenshot-captions{padding:23px 0 0}.screenshot-caption{flex-direction:column;gap:16px}.screenshot-caption h3{font-size:22px;gap:10px}.screenshot-caption p{font-size:16px}.screenshot-caption>.text-link{min-height:40px}.screenshot-pane.is-before{transform:translate3d(-63%,13px,-60px) rotate(-6deg)}.screenshot-pane.is-after{transform:translate3d(-37%,13px,-60px) rotate(6deg)}}
@media(max-width:380px){.screenshot-stage{min-height:280px}.screenshot-pane{width:85%}}
@media(prefers-reduced-motion:reduce){.screenshot-deck{animation:none;transform:none}.screenshot-pane,.screenshot-stage,.screenshot-deck,.screenshot-nav-button,.screenshot-nav-button svg{transition:none}.showcase-awaiting .screenshot-pane.is-before{transform:translate3d(-65%,20px,-90px) rotate(-7deg)}.showcase-awaiting .screenshot-pane.is-after{transform:translate3d(-35%,20px,-90px) rotate(7deg)}}