/* One clipped viewport per device. The protected page moves inside the frame. */
.mobile-story .product-section .product-scroll-demo{display:flex;align-items:center;justify-content:center;position:relative}
.demo-device{background:#bac2ce;padding:7px;border:1px solid #78818e;border-radius:18px;box-shadow:0 18px 45px -32px #161b27;width:100%;max-height:100%;aspect-ratio:1280/850;overflow:hidden}
.demo-device[hidden]{display:none!important}.demo-device[data-demo-device=tablet]{aspect-ratio:820/1050;width:auto;height:100%;max-width:100%;border-radius:22px}
.demo-device[data-demo-device=mobile]{aspect-ratio:390/844;width:auto;height:100%;max-width:100%;padding:6px;border-radius:25px;background:#20252c}
.demo-window{overflow:hidden;border-radius:11px;width:100%;height:100%;background:#e7e8ea;position:relative}
.demo-device[data-demo-device=mobile] .demo-window{border-radius:19px}
.mobile-story .demo-strip img{display:block;width:100%;height:auto;max-height:none;object-fit:initial;aspect-ratio:auto;margin:0;border:0;border-radius:0;box-shadow:none}
.demo-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;text-align:center}
.mobile-story .demo-toolbar .preview-caption{margin:0}.demo-toggle{font:inherit;font-size:11px;color:#535c68;background:transparent;border:1px solid #737e8e55;padding:7px 11px;border-radius:999px;cursor:pointer;white-space:nowrap;min-height:32px}
.demo-toggle:focus-visible{outline:2px solid #171b22;outline-offset:3px}
.mobile-story .setup-screen{position:relative;aspect-ratio:760/1100;overflow:hidden;padding:7px;border:1px solid #7b8595;border-radius:21px;background:#b7c1d0}
.setup-frame{position:absolute;inset:7px;border-radius:14px;overflow:hidden;opacity:0;transition:opacity 650ms cubic-bezier(.16,1,.3,1)}
.setup-frame[hidden]{display:none!important}.setup-frame.is-current{opacity:1}
.mobile-story .setup-frame img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;max-height:none;aspect-ratio:760/1100;border:0;border-radius:0}
.setup-frame img+img{opacity:0;transition:opacity 700ms cubic-bezier(.16,1,.3,1)}.setup-frame.is-selected img+img{opacity:1}
.mobile-story .setup-demo figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:50px;text-align:left;font-size:11px}
/* Reserve a steady stage across all three formats. */
@media(min-width:1000px){.mobile-story .product-section .workspace-preview{grid-template-rows:auto 440px auto auto}}
@media(max-width:999px){.mobile-story .product-section .workspace-preview{grid-template-rows:auto 440px auto auto}}
@media(max-width:699px){.mobile-story .product-section .workspace-preview{grid-template-rows:auto min(112vw,440px) auto auto}.demo-device[data-demo-device=desktop]{height:auto;max-height:100%}}
@media(prefers-reduced-motion:reduce){.setup-frame,.setup-frame img+img{transition:none!important}.demo-strip{transform:none!important}}