/* Mobile browser chrome, notches and short screens should never trap a story demo. */
@media(max-width:760px){
  .marketing-site{overflow-x:hidden}
  .marketing-nav{top:env(safe-area-inset-top,0px)}
  .nfc-demo-backdrop,.round-demo-backdrop,.water-story-backdrop{align-items:start;overflow-y:auto;padding:8px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom));overscroll-behavior:contain}
  .nfc-demo-modal,.round-demo-modal,.water-story-modal{width:100%;max-height:calc(100dvh - 16px);margin:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .nfc-demo-modal>header,.round-demo-modal>header,.water-story-modal>header{position:sticky;z-index:4;top:0}
  .nfc-demo-modal>header button,.round-demo-modal>header button,.water-story-modal>header button{width:44px;height:44px;flex:0 0 44px}
  .nfc-demo-modal>footer,.round-demo-modal>footer,.water-story-modal>footer{position:sticky;z-index:3;bottom:0;padding-bottom:max(14px,env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(16,35,26,.08)}
  .nfc-demo-modal>footer button,.round-demo-modal>footer button,.water-story-modal>footer button{min-width:76px;min-height:44px}
  .tap-story nav button,.round-demo-modal>nav button,.water-story-modal>nav button{min-height:44px}
  .nfc-demo-phone{max-width:100%}
  .round-demo-screen,.water-story-scene>aside{max-width:100%;min-width:0}
  .hero-actions>a,.product-hero-actions>button,.product-bridge>a,.founding-section aside>a{min-height:48px}
}

@media(max-width:420px){
  .marketing-hero h1{font-size:40px;line-height:1.03}
  .product-page-hero h1{font-size:46px}
  .tap-story h2,.round-demo-body h2,.water-story-scene h2{font-size:28px}
  .nfc-demo-stage{padding-right:14px;padding-left:14px}
  .nfc-demo-phone{width:100%}
  .round-demo-modal>nav,.water-story-modal>nav{gap:4px;padding-right:7px;padding-left:7px}
  .round-demo-modal>footer>div,.water-story-modal>footer>div,.nfc-demo-modal>footer>div{width:100%}
  .round-demo-modal>footer button,.water-story-modal>footer button,.nfc-demo-modal>footer button{flex:1}
}

@media(max-height:680px) and (max-width:760px){
  .nfc-demo-modal,.round-demo-modal,.water-story-modal{border-radius:10px}
  .nfc-demo-modal>header,.round-demo-modal>header,.water-story-modal>header{padding-top:10px;padding-bottom:10px}
}