/* The phone mockup with the simulator video: landing page hero and /sim-racing. */
/* Phone artwork coordinates are 1142 × 1216. Keep the frame and screen together
   in this scaled stage so the perspective remains aligned at every viewport. */
.hero-phones { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1142 / 1216; justify-self: center; isolation: isolate; }
.hero-phones__stage { position: absolute; top: 0; left: 0; width: 1142px; height: 1216px; transform: scale(var(--phone-scale, 0)); transform-origin: 0 0; }
.hero-phones__screen { position: absolute; left: 0; top: 0; width: 390px; height: 1000px; overflow: hidden; border-radius: 64px; background: #000; transform-origin: 0 0;
  /* Project the four screen corners onto (675,149), (1047,223), (788,1190), (427,1075). */
  transform: matrix3d(.840005514345,.165496729563,0,-.00010873031471,-.247979713465,.926051072658,0,.0000000475094491015,0,0,1,0,675,149,0,1);
}
/* Fill the screen while retaining every control in the supplied recording. */
.hero-phones__video { display: block; width: 100%; height: 100%; object-fit: fill; }
.hero-phones__frame { position: absolute; inset: 0; z-index: 1; width: 1142px; height: 1216px; pointer-events: none; }
.hero-phones__toggle { position: absolute; bottom: 0; left: 0; z-index: 2; border: 1px solid var(--line); background: var(--ink); color: var(--muted); padding: 7px 10px; font: 600 12px var(--body); cursor: pointer; }
.hero-phones__toggle:hover { color: var(--text); border-color: var(--flag); }