/* Desktop and mobile launch-page design canvases. */
.vision-layouts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.26fr);align-items:start;gap:24px;margin-top:32px}
.story .vision-layouts figure{margin:0;padding:0;background:transparent;min-width:0}
.vision-canvas{position:relative;overflow:hidden;background:#040b1a;border-radius:4px}
.vision-art{position:absolute;top:0;left:0;transform-origin:top left;color:#fff}
.vision-art *{box-sizing:border-box}
.story .vision-art p{margin:0;max-width:none;color:inherit;font-size:inherit;line-height:inherit}
.story .vision-art img{border-radius:0;max-height:none;max-width:none;margin:0}
.story .vision-art img[src$=".svg"]{width:auto!important;height:auto!important}
.vision-layouts figcaption{margin-top:12px}
@media(max-width:700px){.vision-layouts{grid-template-columns:1fr}.vision-layouts figure:last-child{width:min(90%,337.5px);margin:0 auto}}

/* Trim fractional-pixel edge artifacts from the scaled mockup canvases. */
.vision-layouts .vision-canvas{clip-path:inset(1px round 4px)}

.vision-coming-phone{display:contents}.vision-phone-status{display:none}
@media(max-width:700px){
 .vision-layouts .vision-coming-phone{display:flex;flex-direction:column;position:relative;width:100%;aspect-ratio:521/1081;padding:6px;background:#222;border-radius:12% / 6%;overflow:hidden}
 .vision-phone-status{display:flex;position:relative;flex-shrink:0;align-items:center;justify-content:space-between;height:38px;padding:0 22px;background:#040b1a;color:#fff;border-radius:34px 34px 0 0;font-size:11px;font-weight:600}
 .vision-phone-status i{position:absolute;width:28%;height:20px;left:36%;top:8px;border-radius:20px;background:#000}
 .vision-phone-status svg{width:48px;height:14px}
 .vision-layouts .vision-coming-phone .vision-canvas{flex:1;min-height:0;aspect-ratio:auto!important;overflow-y:auto;clip-path:none;border-radius:0 0 10% 10%;scrollbar-width:none;overscroll-behavior:contain}
 .vision-coming-phone .vision-canvas::-webkit-scrollbar{display:none}
 .vision-coming-phone .vision-art{position:relative;width:100%}
 .vision-coming-phone .vision-art>div{transform:scale(var(--phone-content-scale,1));transform-origin:top left}
}

/* Reuse the original brand-systems artwork for exact frame and status details. */
.vision-phone-original-frame{display:none}
@media(max-width:700px){
 .vision-layouts .vision-coming-phone{display:block;padding:0;background:#040b1a;border-radius:12% / 6%}
 .vision-phone-original-frame{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
 .vision-layouts .vision-coming-phone .vision-canvas{position:absolute;inset:1.8501% 3.8388% 1.9426%;padding-top:13.4357%;box-sizing:border-box;border-radius:8.524% / 3.9423%}
}

@media(max-width:700px){.vision-phone-original-frame{clip-path:inset(1px round 12% / 6%)}}

/* Let Coming Soon occupy almost the entire initial phone viewport. */
@media(max-width:700px){
 .vision-coming-phone [data-node-id="2518:3998"]{height:1744px!important}
 .vision-coming-phone [data-node-id="2518:4026"]{display:block!important;position:absolute;top:180px!important;left:0;width:375px}
 .vision-coming-phone [data-node-id="2518:3999"]{top:1285px!important}
 .vision-coming-phone [data-node-id="2518:4054"]{height:719px!important}
 .vision-coming-phone [data-node-id="2518:4059"]{top:173px!important}
 .vision-coming-phone [data-node-id="2518:4058"]{top:242px!important}
 .vision-coming-phone [data-node-id="2518:4055"]{top:358px!important}
 .vision-coming-phone [data-node-id="2518:4056"]{top:695px!important}
}

/* Blend the scenic artwork directly into the Coming Soon background. */
@media(max-width:700px){
 .vision-coming-phone [data-node-id="2518:4031"]{left:0!important;top:538px!important;width:375px!important;height:220px!important;background:linear-gradient(to bottom,#040b1a 0%,rgba(4,11,26,.98) 12%,rgba(4,11,26,.85) 35%,rgba(4,11,26,.5) 62%,rgba(4,11,26,0) 100%);mask:none!important;pointer-events:none}
 .vision-coming-phone [data-node-id="2518:4031"]>div{display:none}
}

/* Use the native mobile launch layout in the same phone shell. */
.vision-launch-mobile{display:none}
@media(max-width:700px){
 #launch-demo .vision-browser-demo{display:none}
 .vision-layouts.vision-launch-mobile{display:block}
 .vision-layouts .vision-coming-phone iframe.vision-canvas{width:92.3224%;height:96.2073%;padding:0;border:0;display:block;background:#040b1a}
}

@media(max-width:700px){#vision-pro .vision-layouts>figure:first-child{display:none}}

/* Frost the scrolling content beneath the phone status bar, preserving sharp icons. */
@media(max-width:700px){
 .vision-layouts .vision-coming-phone::after{content:"";position:absolute;z-index:1;pointer-events:none;top:1.8501%;left:3.8388%;right:3.8388%;height:7.8%;border-radius:8.524% 8.524% 0 0 / 48.6% 48.6% 0 0;background:rgba(4,11,26,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.85) 72%,rgba(0,0,0,.35) 88%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.85) 72%,rgba(0,0,0,.35) 88%,transparent 100%)}
}