.phone-hardware{padding:0 5px;background:#181b21;border:4px solid #393c43;border-radius:42px;box-shadow:0 28px 65px #40261f30,0 0 0 1px #111;position:relative;overflow:visible}.phone-hardware:before{content:"";position:absolute;left:-7px;top:100px;width:3px;height:62px;background:#393c43;border-radius:3px}.phone-hardware:after{content:"";position:absolute;right:-7px;top:140px;width:3px;height:48px;background:#393c43;border-radius:3px}.phone-status{height:36px;background:#fff;border-radius:34px 34px 0 0;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-family:system-ui,sans-serif;font-size:11px;font-weight:700;position:relative;margin-top:5px}.phone-camera{position:absolute;left:50%;transform:translateX(-50%);width:85px;height:20px;background:#181b21;border-radius:15px;top:5px}.phone-home{height:23px;background:#fff;border-radius:0 0 34px 34px;margin-bottom:5px;display:grid;place-items:center}.phone-home:after{content:"";width:95px;height:4px;background:#17191f;border-radius:4px}
.phone-screen{margin:5px 0;border-radius:34px;overflow:hidden;background:#fff}.phone-screen .phone-status,.phone-screen .phone-home{margin:0;border-radius:0}

.story-product.phone-hardware{width:340px;max-width:84%;padding:0 5px;border:4px solid #393c43;border-radius:42px;background:#181b21;overflow:visible;box-shadow:0 28px 65px #40261f30,0 0 0 1px #111}.story-product .phone-screen{display:flex;flex-direction:column;min-height:530px}.story-product .scene-app-content{flex:1;background:var(--background)}.story-product .scene-app-header,.story-product .scene-app-dock{background:var(--surface)}.story-art:has(.story-product.phone-hardware){height:620px}@media(max-width:767px){.story-product.phone-hardware{width:300px}.story-product .phone-screen{min-height:450px}.story-art:has(.story-product.phone-hardware){height:530px}}

/* Keep the entire display on one composited rounded surface when angled. */
.phone-screen{transform:translateZ(0);backface-visibility:hidden;isolation:isolate;clip-path:inset(0 round 34px)}
.phone-status,.phone-home{background:var(--surface,#fff);color:var(--text-primary,#17191f)}
.phone-home:after{background:currentColor}
/* Identical device proportions; content never changes the hardware height. */
.phone-hardware,.story-product.phone-hardware{box-sizing:border-box;width:340px;max-width:84%;height:auto;aspect-ratio:1/2;margin-inline:auto}
.phone-hardware .phone-screen{display:flex;flex-direction:column;height:calc(100% - 10px);min-height:0}
.phone-status,.phone-home,.scene-app-header,.scene-app-dock{flex-shrink:0}
.phone-hardware .phone-app{flex:1;min-height:0;height:auto}
.story-product .scene-app-content{min-height:0;overflow:auto;scrollbar-width:none}
.story-art:has(.story-product.phone-hardware){height:740px}
@media(max-width:767px){.phone-hardware,.story-product.phone-hardware{width:300px}.story-art:has(.story-product.phone-hardware){height:650px}}

/* Size the scene to the viewport, then scale identical hardware inside it. */
.story-hero{height:calc(100svh - var(--header-height));min-height:0}
.story-track,.story-slide{min-height:0}
.story-inner{height:100%;min-height:0;margin:0 auto;padding-block:20px}
.story-art:has(.story-product.phone-hardware){height:100%;min-height:0;margin:0;max-width:none}
.story-product.phone-hardware{position:absolute;left:50%;top:50%;translate:-50% -50%;scale:var(--phone-hero-scale,.65);width:340px;max-width:none}
.scene-child-portrait{object-fit:cover}
.story-controls{flex-shrink:0}
@media(max-width:767px){.story-inner{grid-template-rows:auto minmax(0,1fr);gap:12px;padding-block:12px}.story-copy>p{font-size:.9rem;line-height:1.45;margin-bottom:12px}.story-title{font-size:clamp(1.8rem,7vw,2.4rem);margin-block:8px}.story-actions{gap:12px}.story-controls{row-gap:4px!important}.story-choices button{padding-block:6px}.story-product.phone-hardware{width:340px}.story-art:has(.story-product.phone-hardware){height:100%;margin:0}}
@media(max-width:767px) and (max-height:690px){.story-inner{padding-block:8px;gap:6px}.story-title{font-size:1.55rem}.story-copy>p{font-size:.78rem;line-height:1.35;margin-bottom:8px}.story-actions .button{padding:9px 12px;font-size:.75rem}.story-demo{font-size:.75rem}}
@media(max-width:767px){:root .landing-page .story-choices{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:8px}:root .landing-page .story-choices button{flex-shrink:0;white-space:nowrap;padding-inline:8px}}
@media(max-width:767px){.story-transport{position:relative;width:100%;justify-content:center}.story-counter{position:absolute;left:0;margin-right:0}}

/* Interactive demos use the same hardware as the hero; desktop remains a window. */
.showcase-stage[data-device=phone] .preview-device.phone-hardware{width:340px;max-width:calc(100% - 16px);padding:0 5px;border:4px solid #393c43;border-radius:42px;background:#181b21;aspect-ratio:1/2;box-shadow:0 28px 65px #40261f30,0 0 0 1px #111}
.showcase-stage[data-device=phone] .preview-screen.phone-screen{background:var(--sc-paper)}
.showcase-stage[data-device=phone] .preview-layout{flex:1;min-height:0;height:auto}
.showcase-stage[data-device=phone] .preview-header{flex-shrink:0}
.showcase-stage .phone-status,.showcase-stage .phone-home{background:var(--sc-paper);color:var(--sc-ink)}
.showcase-stage[data-device=desktop] .preview-device.phone-hardware{width:auto;max-width:1100px;aspect-ratio:auto;border:1px solid var(--sc-line);border-radius:12px;padding:8px;background:var(--sc-paper);box-shadow:0 18px 65px #163b4310}
.showcase-stage[data-device=desktop] .preview-device:before,.showcase-stage[data-device=desktop] .preview-device:after,.showcase-stage[data-device=desktop] .phone-status,.showcase-stage[data-device=desktop] .phone-home{display:none}
.showcase-stage[data-device=desktop] .preview-screen.phone-screen{display:block;height:auto;margin:0;border-radius:8px;clip-path:none}
@media(max-width:767px){.showcase-stage[data-device=phone] .preview-device.phone-hardware{width:300px}}