/* Calibrated to the original 1024 × 1536 handset photograph. Native screens
   retain their aspect ratio; the frame never stretches the app interface. */
.native-phone {
  --device-width: 356px;
  position: relative;
  width: var(--device-width);
  aspect-ratio: 632 / 1312;
  isolation: isolate;
}
.native-hardware {
  position: absolute;
  z-index: 0;
  width: 162.0253%;
  max-width: none;
  height: auto;
  left: -31.0127%;
  top: -7.7744%;
  pointer-events: none;
  user-select: none;
}
.native-display {
  position: absolute;
  z-index: 1;
  left: 3.9557%;
  top: 1.8674%;
  width: 92.0886%;
  aspect-ratio: 393 / 852;
  border-radius: 16.5% / 7.61%;
  overflow: hidden;
  background: #f0f5ef;
  container-type: inline-size;
}
.native-screen { position: absolute; inset: 0; }
.native-screen > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.native-glass {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.065), transparent 32%, transparent 81%, rgba(255,255,255,.035));
  box-shadow: inset 0 0 1px rgba(255,255,255,.35);
}
.native-status { margin: 0 auto 12px; min-height: 22px; text-align: center; color: var(--public-muted); font-size: 14px; }
.native-showcase .device-story { scroll-margin-top: 86px; height: 840px; margin-top: 48px; }
.native-showcase .device-halo { width: 790px; height: 700px; opacity: .55; }
.native-showcase .feature-note-left { top: 31%; }
.native-showcase .feature-note-right { top: 53%; }
.native-showcase .product-disclosure { max-width: 620px; }
@media (max-width: 900px) {
  .native-phone { --device-width: 326px; }
  .native-showcase .device-story { height: 760px; }
}
@media (max-width: 650px) {
  .native-phone { --device-width: min(304px, calc(100vw - 58px)); }
  .native-showcase .device-story { height: min(704px, calc((100vw - 58px) * 2.07595 + 64px)); margin-top: 20px; }
  .native-showcase .device-halo { width: 490px; height: 650px; }
  .native-showcase .app-selector { flex-wrap: wrap; border-radius: 28px; width: max-content; }
  .native-showcase .app-selector button { min-height: 44px; padding: 10px 12px; }
  .native-status { font-size: 12px; }
}