/* =====================================================
   App Shell — mobile-first.
   - On narrow screens, fills the whole viewport.
   - On wider screens, becomes a 9:16 portrait "phone"
     centered on the #212121 backdrop (per spec).
   ===================================================== */
body {
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-height: 100svh;
}

.app-shell {
  width: 100%;
  min-height: 100svh;
  background: var(--color-bg);
  position: relative;
  overflow-x: hidden;
}

@media (min-width: 520px) {
  .app-shell {
    width: min(100vw, calc(100vh * 9 / 16));
    max-width: 440px;
    height: 100vh;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  }
}

/* Hide scrollbar visually but keep scrolling functional */
.app-shell::-webkit-scrollbar { width: 0; }
.app-shell { scrollbar-width: none; }

/* =====================================================
   Page stack — everything below the hero
   ===================================================== */
.page-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 0 0;
}

.bottom-spacer {
  height: 80px; /* reserves room above the floating bottom nav */
}