/* RustSentinel public pages (home/features/purchase/etc.) — phone + in-app layout fixes.
   Applied under BOTH a width media-query (phone browsers) and html.rs-app (the mobile app's
   WebView, which can report a desktop-width viewport so media queries alone don't fire). */

/* ---- shared rule-set, duplicated for the two gates ---- */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }
  body { padding: 1rem !important; }
  nav { flex-wrap: wrap !important; row-gap: 0.4rem !important; }
  nav a { padding: 0.5rem 0.7rem !important; }
  section { padding: 1rem !important; }
  h1 { font-size: 1.5rem !important; }
  .grid { grid-template-columns: 1fr !important; }
  img, svg, video, table, pre { max-width: 100%; }
  button, .btn { min-height: 42px; }
  #steam-login-banner { flex-wrap: wrap; }
}

html.rs-app, html.rs-app body { overflow-x: hidden; }
html.rs-app body { padding: 1rem !important; padding-top: calc(max(env(safe-area-inset-top, 0px), 30px) + 8px) !important; }
html.rs-app nav { flex-wrap: wrap !important; row-gap: 0.4rem !important; }
html.rs-app nav a { padding: 0.5rem 0.7rem !important; }
html.rs-app section { padding: 1rem !important; }
html.rs-app h1 { font-size: 1.5rem !important; }
html.rs-app .grid { grid-template-columns: 1fr !important; }
html.rs-app img, html.rs-app svg, html.rs-app video, html.rs-app table, html.rs-app pre { max-width: 100%; }
html.rs-app button, html.rs-app .btn { min-height: 42px; }
html.rs-app #steam-login-banner { flex-wrap: wrap; }