/* Small-screen fixes for the marketing and legal pages.
   The app shell lives in /static/mobile.css. */
@media (max-width: 900px) {
  html, body { overscroll-behavior-y: none; overflow-x: clip; }
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    min-height: 100dvh;
  }
  .slab-scope, .hero-frame, .hero-clip, .hero-foot {
    overflow-x: clip;
    max-width: 100%;
  }
  .hero-foot { overflow: hidden; }
  header, header > div, .bar {
    height: auto;
    min-height: calc(56px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    box-sizing: border-box;
  }
  main, .legal, .shell, article {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  header button, header a, .links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  input, select, textarea { font-size: 16px; }
  .legal a, main a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 2px;
  }
  .hero-line, h1, p, li { overflow-wrap: anywhere; }
}

/* Touch: the Solutions menu is a hover target in the built page. */
@media (hover: none), (pointer: coarse) {
  header .relative > .hidden.is-open,
  header .relative > div.is-open {
    display: block;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
  }
}