*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--neutral-100);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
button{font-family:inherit}

.noscroll::-webkit-scrollbar{width:0;height:0}
.noscroll{scrollbar-width:none}

@keyframes ipvSpin{to{transform:rotate(360deg)}}
@keyframes ipvPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}}
@keyframes ipvFlash{0%{opacity:.92}100%{opacity:0}}
@keyframes ipvUp{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes ipvSheet{from{transform:translateY(102%)}to{transform:translateY(0)}}
@keyframes ipvGuide{0%,100%{border-color:rgba(255,255,255,.55)}50%{border-color:rgba(255,255,255,.95)}}

/* stage: phone frame centered on desktop */
.stage{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:28px 16px}
.phone{position:relative;width:390px;height:844px;background:#0b0d12;border-radius:54px;padding:11px;box-shadow:var(--shadow-xl),0 0 0 2px rgba(0,0,0,.35)}
.phone-inner{position:relative;width:100%;height:100%;border-radius:43px;overflow:hidden;display:flex;flex-direction:column}
.caption{font-size:12px;color:var(--fg-3);text-align:center}

/* on a real phone: fill the viewport, drop the bezel */
@media (max-width:440px){
  .stage{padding:0;gap:0;min-height:100dvh}
  .phone{width:100%;height:100dvh;border-radius:0;padding:0;background:transparent;box-shadow:none}
  .phone-inner{border-radius:0}
  .caption{display:none}
}