/*
 * iOS Safari can move the visual viewport while its browser chrome collapses.
 * Keep mobile headers on one opaque layer and extend that layer above the
 * header so scrolling content cannot enter the temporary viewport gap.
 */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .site-header,
  .site-header.scrolled,
  .marketing-header {
    z-index: 150;
    isolation: isolate;
    background: #07101c;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-header,
  .site-header.scrolled {
    top: 0;
    left: 0;
    width: 100%;
    transform: none;
  }

  .site-header::before,
  .marketing-header::before {
    position: absolute;
    right: 0;
    bottom: calc(100% - 1px);
    left: 0;
    height: calc(8rem + env(safe-area-inset-top, 0px));
    background: #07101c;
    content: "";
    pointer-events: none;
  }
}