/* Main hero is a larger, caption-free product scene. Keep an icon-only motion control. */
.testfit-layout .hero-reference .reference-frame{position:relative;padding:0;border:0;background:transparent}
.testfit-layout .hero-reference .reference-screen{border:0;aspect-ratio:1000/760}
.testfit-layout .hero-reference .reference-playback{position:absolute;right:12px;bottom:12px;margin:0;padding:0;border:0;min-height:0;background:transparent}
.testfit-layout .hero-reference .motion-toggle{font-size:0!important;width:38px;min-height:38px;padding:0;border:1px solid #ffffff60;border-radius:50%;background:#17365a80;display:grid;place-items:center}
.testfit-layout .hero-reference .motion-toggle>span{font-size:18px;line-height:1}
@media(min-width:1101px){
 .testfit-layout .hero-reference>.wrap{width:min(1440px,calc(100% - 112px))}
 .testfit-layout .hero-reference .reference-grid{grid-template-columns:minmax(520px,.88fr) minmax(0,1.12fr);gap:40px}
}

.hero-final-cg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;transition:opacity 1.2s ease}
.testfit-layout .hero-reference .reference-screen{transition:background-color 1.2s ease}
.testfit-layout .hero-reference .reference-frame.is-finished .reference-screen{background:#e5ebef}
.reference-frame.is-finished .hero-final-cg{opacity:1}
.reference-frame.is-finished .motion-toggle{background:#19375abd}
@media(prefers-reduced-motion:reduce){.hero-final-cg,.testfit-layout .hero-reference .reference-screen{transition:none}}