/* Main-site changes stay scoped. The approved beta is unchanged. */
.main-page{overflow-x:clip}
/* Rasterise the nearby phone once, then move its composited layer. */
@media(prefers-reduced-motion:no-preference){
 .main-page [data-motion-active] :is([data-hero-device],[data-collection-device],[data-recipe-device],[data-equipment-phone],[data-equipment-back],[data-equipment-front],[data-recall-phone],[data-recall-intro-layer],[data-recall-copy-layer],[data-new-reveal]){will-change:transform}
 .motion-journey .main-page .journey[data-motion-active] .journey-device,
 .flow-depth .main-page .journey[data-motion-active] .journey-device>.phone{will-change:transform}
}
.main-page .hero-sticky{row-gap:30px}.main-page .hero-front{margin-top:14px}.main-page .hero-bottom{padding-top:12px}
.main-page :is(.recall-copy,.library-copy) h3{font-weight:500}
.main-page .library-heading>p{max-width:530px}
@media(max-width:700px){
 .main-page .hero-sticky{row-gap:28px}.main-page .hero-front{margin-top:18px}.main-page .hero-bottom{padding-top:6px}
 /* Retain approach, recession and parallax without nested 3D clipping surfaces. */
 .main-page .phone{backface-visibility:hidden}
 .main-page .equipment-story .equipment-front{text-shadow:0 2px 8px #171310b3}
 .main-page .collection-stage{height:540px}
 .main-page .library{--library-panel-width:clamp(240px,calc(100vw - 72px),340px);--library-gap:20px}
 .main-page .library-copy{padding-top:28px}
}
@media(prefers-reduced-motion:reduce){.main-page [data-motion-active] *{will-change:auto!important}}

@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 .main-page :is(.hero-devices,.collection-layout,.collection-stage,.journey-stage,.word-reel,.recall-shot,.equipment-scene,.library-visual){perspective:none}
 html.flow-depth:not(.motion-journey) .main-page .journey-device{perspective:none}
}