/* Desktop-only height constraint — keeps phone frame from overflowing short viewports */
@media (min-width: 521px) and (max-height: 720px) {
  .phone-frame {
    height: calc(100vh - 24px);
    min-height: 620px;
  }

  header {
    padding-top: 34px;
  }
}

/* Smartphone: strip the frame, fill the screen natively */
@media (max-width: 520px) {
  body {
    padding: 0;
    background: var(--bg-color);
    align-items: flex-start;
  }

  /* position:fixed + inset:0 fills the visible viewport regardless of the
     browser toolbar state, letting the toolbar retract freely without
     causing layout shifts or the page being cut off. */
  .phone-frame {
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: unset;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .notch {
    display: none;
  }

  header {
    border-radius: 0;
    padding-top: 52px; /* space below status bar */
  }

  .content {
    padding-bottom: 96px; /* room above nav on real devices */
  }

  nav {
    border-radius: 0;
    padding-bottom: 28px; /* safe area for home indicator */
  }
}