/* The walkthrough fills the available width. Short windows scroll the screen
   inside the device instead of scaling all its text and buttons down. */
.demo-brand { display: inline-flex; flex: none; align-items: center; }
.demo-brand img { display: block; width: 139px; height: auto; }
.demo-wrap header.top { height: 64px; }
.demo-wrap .nav-cta { min-height: 44px; }
.demo-stage { flex: none; align-items: center; }
.demo-device { justify-content: flex-start; min-height: 0; }
.stage { width: 100%; max-width: 430px; }
.stage-shell { width: 100%; }
.stage-screen {
  width: 100%;
  height: clamp(560px, calc(100svh - 160px), 844px);
}
.stage-screen iframe { width: 100%; height: 100%; transform: none; }

@media (max-width: 860px) {
  .demo-wrap {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: env(safe-area-inset-top) 12px max(8px, env(safe-area-inset-bottom));
  }
  .demo-wrap header.top { flex: 0 0 52px; height: 52px; gap: 12px; padding-inline: 4px; }
  .demo-stage { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); gap: 0; padding: 0; }
  .demo-rail { display: none; }
  .demo-device, .stage, .stage-shell, .stage-screen { height: 100%; min-height: 0; }
  .stage-shell { border-width: 3px; border-radius: 18px; }
  .stage-screen { border-radius: 14px; }
}

@media (max-width: 360px) {
  .demo-brand img { width: 126px; }
  .demo-wrap .nav-cta { padding-inline: 10px; }
}