/* GUREXA_GLOBAL_RESPONSIVE_HAMBURGER_V4_0 */

html{
  max-width:100%;
  overflow-x:hidden;
}

body{
  max-width:100%;
  overflow-x:hidden;
}

img,
svg,
video,
canvas,
iframe{
  max-width:100%;
  height:auto;
}

table{
  max-width:100%;
}

pre,
code{
  max-width:100%;
}

.gx-mobile-menu-button,
.gx-mobile-menu-backdrop{
  display:none;
}

@media (max-width: 768px){

  html{
    -webkit-text-size-adjust:100%;
  }

  body{
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  /*
   * Generic page-shell safety
   */
  main,
  section,
  article,
  aside,
  header,
  footer,
  nav,
  div{
    min-width:0;
  }

  /*
   * Global outer spacing.
   * Existing page-specific mobile CSS can override this where needed.
   */
  main{
    width:100% !important;
    max-width:100% !important;
  }

  section{
    max-width:100% !important;
  }

  /*
   * Responsive text.
   */
  h1{
    font-size:clamp(2rem,10vw,3rem) !important;
    line-height:1.05 !important;
    overflow-wrap:anywhere;
  }

  h2{
    font-size:clamp(1.55rem,7.5vw,2.3rem) !important;
    line-height:1.1 !important;
    overflow-wrap:anywhere;
  }

  h3{
    overflow-wrap:anywhere;
  }

  p,
  li,
  a,
  button,
  input,
  select,
  textarea{
    overflow-wrap:anywhere;
  }

  /*
   * Controls should remain usable on touch devices.
   */
  button,
  input,
  select,
  textarea{
    max-width:100%;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea{
    width:100%;
  }

  /*
   * Generic desktop multi-column systems.
   */
  [class*="grid"],
  [class*="cards"],
  [class*="columns"],
  [class*="layout"],
  [class*="split"],
  [class*="two-col"],
  [class*="three-col"],
  [class*="four-col"]{
    max-width:100%;
  }

  /*
   * Known Gurexa landing/page grids.
   */
  .objective-grid,
  .universe-grid,
  .demo-strip,
  .trust-grid,
  .footer-grid,
  .cards,
  .levels,
  .code-grid,
  .api-grid{
    grid-template-columns:1fr !important;
  }

  /*
   * Known Gurexa split layouts.
   */
  .gx-hero,
  .gx-athena-intro,
  .gx-demos,
  .gx-build,
  .hero{
    grid-template-columns:1fr !important;
  }

  /*
   * Landing hero.
   */
  .gx-hero{
    padding:24px 18px 20px !important;
    min-height:auto !important;
    gap:18px !important;
  }

  .gx-hero-copy{
    width:100% !important;
    max-width:100% !important;
  }

  .gx-hero-copy h1{
    font-size:38px !important;
    max-width:none !important;
  }

  .gx-hero-copy>p{
    font-size:15px !important;
    max-width:none !important;
  }

  .gx-hero-buttons,
  .actions{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .gx-btn,
  .button{
    width:100%;
    min-height:44px;
  }

  .gx-orbit{
    width:100% !important;
    min-width:0 !important;
    max-width:520px !important;
    margin:0 auto !important;
    transform:scale(.72) !important;
    transform-origin:top center !important;
    height:390px !important;
  }

  /*
   * Header / navbar.
   */
  .gx-header,
  header{
    max-width:100% !important;
  }

  .gx-header{
    height:68px !important;
    padding:0 16px !important;
  }

  .gx-brand-name{
    font-size:21px !important;
  }

  .gx-header-actions{
    gap:8px !important;
  }

  /*
   * Hide desktop nav only after JS has enabled the mobile controller.
   */
  html.gx-mobile-nav-ready .gx-nav,
  html.gx-mobile-nav-ready header nav{
    position:fixed !important;
    top:0 !important;
    right:-88vw !important;
    width:min(86vw,360px) !important;
    height:100dvh !important;
    z-index:10020 !important;
    background:#fff !important;
    border-left:1.5px solid #aeb9c6 !important;
    box-shadow:-18px 0 50px rgba(8,23,47,.16) !important;
    padding:84px 22px 30px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    overflow-y:auto !important;
    transition:right .22s ease !important;
  }

  html.gx-mobile-nav-ready.gx-menu-open .gx-nav,
  html.gx-mobile-nav-ready.gx-menu-open header nav{
    right:0 !important;
  }

  html.gx-mobile-nav-ready .gx-nav a,
  html.gx-mobile-nav-ready header nav a{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    padding:15px 4px !important;
    border-bottom:1px solid #d4dbe3 !important;
    font-size:16px !important;
    font-weight:650 !important;
    color:#08172f !important;
  }

  .gx-mobile-menu-button{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border:1.5px solid #8795a6;
    border-radius:8px;
    background:#fff;
    display:none;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:10030;
    cursor:pointer;
    padding:0;
  }

  html.gx-mobile-nav-ready .gx-mobile-menu-button{
    display:flex;
  }

  .gx-mobile-menu-button span,
  .gx-mobile-menu-button::before,
  .gx-mobile-menu-button::after{
    content:"";
    width:20px;
    height:2px;
    border-radius:2px;
    background:#08172f;
    position:absolute;
    transition:.2s ease;
  }

  .gx-mobile-menu-button::before{
    transform:translateY(-6px);
  }

  .gx-mobile-menu-button::after{
    transform:translateY(6px);
  }

  html.gx-menu-open .gx-mobile-menu-button span{
    opacity:0;
  }

  html.gx-menu-open .gx-mobile-menu-button::before{
    transform:rotate(45deg);
  }

  html.gx-menu-open .gx-mobile-menu-button::after{
    transform:rotate(-45deg);
  }

  .gx-mobile-menu-backdrop{
    position:fixed;
    inset:0;
    z-index:10010;
    background:rgba(8,23,47,.36);
    backdrop-filter:blur(1px);
  }

  html.gx-menu-open .gx-mobile-menu-backdrop{
    display:block;
  }

  html.gx-menu-open,
  html.gx-menu-open body{
    overflow:hidden !important;
  }

  /*
   * Hide secondary desktop header actions to leave room for hamburger.
   * Keep the strongest CTA.
   */
  .gx-header-actions .gx-search,
  .gx-header-actions .gx-btn-light{
    display:none !important;
  }

  /*
   * Landing cards and frames.
   */
  .objective-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
    padding:0 !important;
  }

  .objective-card{
    min-height:90px !important;
  }

  .universe-grid{
    grid-template-columns:1fr !important;
  }

  .gx-athena-intro{
    padding:20px 18px !important;
  }

  .athena-flow{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px 10px !important;
  }

  .athena-flow>span{
    display:none !important;
  }

  .gx-universe,
  .gx-demos,
  .gx-build,
  .gx-trust-section{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .demo-strip{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .demo-next{
    display:none !important;
  }

  .platform-flow{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .platform-flow>span{
    display:none !important;
  }

  .platform-links{
    flex-wrap:wrap !important;
  }

  .platform-links a{
    flex:1 1 42% !important;
  }

  .trust-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:15px !important;
  }

  /*
   * Footer.
   */
  .footer-cta{
    padding:0 0 14px !important;
    display:block !important;
  }

  .footer-cta>div:last-child{
    margin-top:14px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:22px 16px !important;
  }

  .footer-grid>div>a{
    font-size:12px !important;
    padding:3px 0 !important;
  }

  .footer-legal{
    display:block !important;
  }

  .footer-legal span:last-child{
    margin-top:8px !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:12px !important;
  }

  /*
   * Tables and code.
   */
  table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }

  pre{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  /*
   * Dialogs and panels.
   */
  [role="dialog"],
  .modal,
  .dialog,
  .drawer,
  .panel{
    max-width:calc(100vw - 24px) !important;
  }
}

@media (max-width: 430px){

  .objective-grid,
  .demo-strip,
  .trust-grid,
  .footer-grid{
    grid-template-columns:1fr !important;
  }

  .athena-flow,
  .platform-flow{
    grid-template-columns:1fr !important;
  }

  .gx-orbit{
    transform:scale(.64) !important;
    margin-bottom:-110px !important;
  }

  .gx-hero-copy h1{
    font-size:34px !important;
  }
}