/* Site fixes — responsive header so the tab nav and the Request Access button
   never clip at common desktop widths. The Request Access CTA lives INSIDE the
   <nav>, so we make the nav scroll horizontally and pin the CTA to the right
   edge (sticky) with a solid backing — tabs scroll beneath it, CTA stays visible.
   Mobile (<=768px) keeps each page's existing stacked/scrollable header. */
@media (min-width: 769px){
  header{ gap: 16px; }
  header .logo{ flex: 0 0 auto; }
  header nav{
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  }
  header nav::-webkit-scrollbar{ display: none; height: 0; }
  header nav a{ padding: 8px 10px; white-space: nowrap; flex: 0 0 auto; }
  header nav a.nav-cta{
    position: sticky; right: 0; margin-left: auto; z-index: 2;
    background: #141f33;                       /* opaque so scrolling tabs don't bleed through */
    box-shadow: -20px 0 16px -8px #0b1019;     /* fade the tabs into the pinned CTA */
  }
}

/* Mobile fixes.
   1) The header <nav> doesn't shrink on phones: its flex items keep their
      content width, so the nav grows to ~1000px, forcing the whole page wider
      than the viewport and clipping every section on the right. Constrain the
      nav to the viewport and let it scroll horizontally (min-width:0 is the key
      that lets a flex item shrink below its content size).
   2) Several pages set the hero's desktop side margins/padding inline
      (margin:-32px; padding:0 48px), wider than the 16px mobile <main> padding.
      Pull the hero flush to the gutter and tighten its inner padding. */
@media (max-width: 768px){
  header{ flex-direction: column; align-items: stretch; }
  header nav{
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  header nav a{ flex: 0 0 auto; }
  .hero{
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    overflow-wrap: break-word;
  }
}

/* Beta badge in the site logo (product is in beta) */
.logo .beta{
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #06121f;
  background: linear-gradient(135deg, #38bdf8, #22d3ee);
  padding: 2px 7px;
  border-radius: 6px;
  vertical-align: middle;
  margin-left: 8px;
}