/* Keep the desktop phone preview, but let the browser own vertical scrolling on mobile. */
#home .hero-art{width:134px;height:137px;right:0;bottom:0;opacity:1;overflow:hidden;pointer-events:none}
#home .hero-art img{display:block;width:100%;height:auto;max-width:none}
#home .hero h2,#home .hero p{position:relative;z-index:1;text-shadow:0 1px 8px #122b5040}

/* iOS Safari zooms focused form controls below 16px. */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]),textarea,select,
  #app input:not([type=checkbox]):not([type=radio]),#app textarea,#app select{font-size:16px!important}
}
@media(max-width:840px){
  html,body{height:auto!important;min-height:100%;overflow-x:clip;overflow-y:auto}
  .desktop-shell{min-height:0!important;height:auto!important;overflow:visible!important}
  .phone{height:auto!important;min-height:100dvh!important;overflow:visible!important;position:relative}
  .app{height:auto!important;min-height:100dvh!important;overflow:visible!important;overscroll-behavior:auto;padding-bottom:0!important}
  .modal{position:fixed;inset:0;z-index:1900;align-items:flex-end}
  .sheet{max-height:80dvh;overflow-y:auto}
}