/* Keep the content readable before enhancement and in the still view. */
#features.scene { height: auto; }
#features .features-stage {
 position: relative;
 top: auto;
 height: auto;
 min-height: 0;
 padding: 40px 0 72px;
 overflow: visible;
}
#features .rail-clip { overflow: visible; }
#features .rail { display: grid; gap: 0; will-change: auto; }
#features .feature { padding-block: 48px; margin: 0; scroll-margin-top: calc(var(--feature-header, 58px) + 24px); }
#features .product-mock { transform: none; --detail: 1; }
#features .feature-controls { display: flex; justify-content: center; margin: 20px auto 0; padding: 0 20px; }
#features .feature-controls .stage-nav { display: flex; flex-wrap: nowrap; margin: 0; max-width: 100%; }
#features .scene-foot { position: relative; margin-top: 32px; }
#features .rail-clip:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* The sticky viewport follows browser-native scrolling. Only the rail moves. */
#features.feature-scroll-ready:not(.feature-static) { height: 420svh; }
#features.feature-scroll-ready:not(.feature-static) .features-stage {
 position: sticky;
 top: var(--feature-header, 58px);
 height: calc(100svh - var(--feature-header, 58px));
 min-height: 0;
 overflow: hidden;
 padding: 24px 0 76px;
 justify-content: center;
}
#features.feature-scroll-ready:not(.feature-static) .rail-clip { overflow: hidden; }
#features.feature-scroll-ready:not(.feature-static) .rail { display: flex; gap: 0; will-change: transform; }
#features.feature-scroll-ready:not(.feature-static) .feature { padding-block: 12px; border: 0; }
#features.feature-scroll-ready:not(.feature-static) .scene-foot { position: absolute; margin-top: 0; }
#features.feature-static .rail { transform: none !important; }
#features.feature-static .feature { border: 0; border-bottom: 1px solid #ffffff40; }
#features.feature-static .feature-illustration { max-height: none; }
#features.feature-static .feature-controls { display: none; }

@media (max-width: 900px) {
 #features.feature-scroll-ready:not(.feature-static) .features-stage { padding: 22px 0 72px; }
 #features .feature-controls { margin-top: 20px; }
}
@media (max-width: 540px) {
 #features.feature-scroll-ready:not(.feature-static) .features-stage { padding: 20px 0 66px; }
 #features .feature-controls { margin-top: 20px; padding-inline: 16px; width: 100%; }
 #features .feature-controls .stage-nav { padding: 4px; gap: 0; }
 #features .stage-nav button { padding: 9px 17px; min-height: 42px; font-size: 12px; }
 #features.feature-static .feature { padding: 40px 24px; }
}
@media (max-height: 750px) and (max-width: 540px) {
 #features.feature-scroll-ready:not(.feature-static) .features-stage { padding-top: 12px; padding-bottom: 60px; }
 #features .feature-controls { margin-top: 12px; }
}
/* A media-query fallback also works before the controller has started. */
@media (prefers-reduced-motion: reduce) {
 #features.feature-scroll-ready { height: auto !important; }
 #features.feature-scroll-ready .features-stage { position: relative !important; top: auto !important; height: auto !important; overflow: visible !important; }
 #features .rail { display: grid !important; transform: none !important; will-change: auto !important; }
 #features .rail-clip { overflow: visible !important; }
 #features .feature { padding-block: 40px !important; }
 #features .feature-controls { display: none; }
}