/* The phone opening is composed around one product plane, with normal scrolling. */
@media (max-width:800px) {
  #hero-story { height:auto; }
  .hero-sticky { position:relative; height:max(740px,100svh); min-height:0; }
  .hero-stage { min-height:0; }
  .hero-intro { top:132px; width:calc(100% - var(--gutter)*2); }
  .hero-title { font-size:clamp(54px,15.2vw,88px); line-height:1.04; margin:22px 0 20px; }
  .hero-intro > p { font-size:14px; line-height:1.65; margin-bottom:16px; }
  .hero-cta { min-height:44px; padding-block:10px; }
  .hero-art { inset:8% -30% -8% -28%; }
  .hero-art img { object-position:64% center; }
  .hero-scrim { background:linear-gradient(180deg,#171817f5,#17181730 50%,#171817 100%),linear-gradient(90deg,#17181777,transparent 90%); }
  .hero-mobile-motion .hero-interface-scene { display:block; perspective:900px; }
  .hero-mobile-motion .hero-panel[data-panel="1"] { top:auto; bottom:82px; right:calc(var(--gutter) + 8px); width:288px; height:192px; border-radius:9px; opacity:1; box-shadow:0 24px 70px #0009; }
  .hero-mobile-motion .hero-panel > [data-interface] { width:480px; height:320px; transform:scale(.6); transform-origin:top left; }
  .hero-mobile-motion .hero-panel[data-panel="2"],
  .hero-mobile-motion .hero-panel[data-panel="3"] { display:none; }
  .hero-bottom { bottom:24px; }
}
@media (min-width:601px) and (max-width:800px) {
  .hero-intro { top:130px; width:85%; }
  .hero-mobile-motion .hero-panel[data-panel="1"] { right:12%; bottom:72px; width:384px; height:256px; }
  .hero-mobile-motion .hero-panel > [data-interface] { transform:scale(.8); }
}
@media (max-width:800px) and (prefers-reduced-motion:reduce) {
  .hero-interface-scene { display:none; }
  .hero-art { will-change:auto; }
}