/* Initial scene exists before enhancement or user input; dimensions stay stable. */
.hero-story .stage-world{--scene-top:52svh}
@media(max-width:600px){
 .hero-story .stage-world{--scene-x:0px;--scene-top:71svh;width:100%;height:100svh;will-change:auto}
 .hero-story{--product-width:min(87vw,44.8svh);--product-height:min(54.375vw,28svh)}
 .hero-story .machine-product{transform-style:flat}
 .hero-story .device-back{display:none}
 /* A single 2D plane keeps the embedded document out of nested 3D/paint
    containment on phones. Z tilt and scroll-driven assembly remain intact. */
 .hero-story .stage-world,.hero-story .world-float{perspective:none}
 .hero-story .world-float{animation:none!important;translate:none;rotate:none}
 .hero-story .machine-product{transform:translate(-50%,-50%) rotate(var(--rz));will-change:auto}
 .hero-story .product-shell{transform:none;transform-style:flat}
 .hero-story .client-viewport,.hero-story .client-viewport iframe{contain:none}
 /* Release permanent backing-surface hints and oversized atmospheric paint.
    The page/background coverage and stable scroll coordinates stay intact. */
 .hero-story .environment{will-change:auto}
 .hero-story .atmosphere{inset:0;transform:none;will-change:auto;animation:none!important}
 .hero-story .surface-reflection{will-change:auto;animation:none!important}
 .range-showroom,.range-products{perspective:none}
 .range-showroom .showcase{will-change:auto}
 .inside-product-layers{transform-style:flat}
}
/* The Free Demo is an illustration, not an interactive third-party surface.
   Ordinary images avoid lazy embedded-page loading and container-unit scaling. */
.screen-face>picture.northline-illustration{display:block;position:absolute;inset:0;pointer-events:none}
.northline-illustration>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#101619}
/* A cheap black alpha layer gives the same brightness reveal without a
   continuously changing filter on the large SVG photograph, also on desktop. */
.architecture-art image{filter:none}
.architecture::before{content:"";position:absolute;inset:0;background:#000;opacity:calc((1 - var(--design))*.4);z-index:1;pointer-events:none}
/* Avoid filtering/animating a large decoded raster on the OUTER phone viewport.
   Loaded from within Northline as well; other documents unaffected. */
.outer-mobile .architecture{filter:none}
.outer-mobile .architecture-art image{filter:none}
.outer-mobile .architecture::before{content:"";position:absolute;inset:0;background:#101619;opacity:calc((1 - var(--design))*.36);z-index:1;pointer-events:none}
.outer-mobile .roofline{filter:none}
.outer-mobile .architecture-art{will-change:auto;animation:none}
.outer-mobile .window-glow{opacity:calc(.15 + var(--design)*.35)}
/* Reserve the existing caption/control zone in short phone viewports.
   The card's upper edge stays at 25.5svh; the lower edge leaves 32px
   above the existing 78px footer clearance and 66.6px control group. */
@media(max-width:600px) and (max-height:650px){
 .hero-story .stage-world{--scene-top:70svh}
 .range-showroom .showcase{top:calc(62.75svh - 88.5px);height:calc(74.5svh - 177px)}
 .range-context{bottom:calc(74.5svh + 16px)}
}
/* An inherited flex-shrink:0 was widening the pricing footer on small phones. */
/* Section 2 can still be easing out after a fast reverse jump into the opening.
   Retain the hero heading's own visibility gate during that shared handoff. */
.inside-active .story-heading{opacity:calc(var(--heading,0)*(1 - var(--inside-hero-fade)))!important}
@media(max-width:400px){
 .purchase-footer .purchase-demo{flex:1 1 0;min-width:0}
}