/* The tilted phone and its real screens. Colours come only from site.css tokens. */
.reel-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); perspective: 1600px; }

/* Turned slightly toward the waitlist box: on a computer the phone sits to the
   form's right, so its right edge comes forward and the screen faces left, at
   the form. Stacked on a phone, the same turn, gentler. */
.phone {
  position: relative; width: 300px; max-width: 78vw; padding: 11px;
  background: var(--ink-900); border-radius: 46px;
  transform: rotateY(-8deg) rotateX(2deg);
  transform-style: preserve-3d;
  box-shadow:
    24px 30px 60px -28px rgba(16, 32, 26, 0.45),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.08);
}
@media (min-width: 900px) {
  .phone { width: 320px; transform: rotateY(-18deg) rotateX(3deg) translateX(-6px); }
}
.phone-notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 14px; background: var(--ink-900); z-index: 2; }
/* The recording is made at exactly this shape (the captured 390 × 844 screen
   under a status-bar strip for the island, 640 × 1450), so it fills the screen
   edge to edge: no crop, no letterbox, and nothing zooms. */
.phone-screen { aspect-ratio: 640 / 1450; border-radius: 36px; overflow: hidden; background: var(--paper-bg); }
.r-video, .r-still { display: block; width: 100%; height: 100%; object-fit: fill; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .phone { transform: none; }
}