@media (max-width:820px){
  .nav-inner{padding:16px 24px; flex-wrap:wrap;}
  .menu-toggle{display:block;}

  .main-navigation{
    position:absolute; top:82px; left:0; width:100%;
    background:#fff; border-top:1px solid var(--sand-200);
    display:none; box-shadow:0 10px 30px rgba(31,45,65,.12);
  }
  .main-navigation.active{display:block;}
  .main-navigation ul{flex-direction:column; align-items:flex-start; gap:0; padding:12px 0;}
  .main-navigation li{width:100%;}
  .main-navigation a{width:100%; padding:14px 24px; justify-content:space-between;}

  .sub-menu{
    position:static; display:none; border:none; border-radius:0;
    box-shadow:none; background:#f8fbfd; padding:0; min-width:100%;
  }
  .menu-item-has-children.open > .sub-menu{display:block;}
  .menu-item-has-children:hover > .sub-menu{display:none;}
  .menu-item-has-children.open:hover > .sub-menu{display:block;}
  .sub-menu a{padding:12px 42px; font-size:14px;}

  .header-cta{display:none;}

  .hero .wrap,
  .split{grid-template-columns:1fr;}
  .card-grid,
  .api-detail .wrap{grid-template-columns:1fr;}
  .step-grid{grid-template-columns:1fr 1fr;}
  .access .wrap{grid-template-columns:1fr;}

  .page-header-banner h1{font-size:1.7rem;}
  .page-header-banner{padding:52px 0 48px;}
  .cta{padding:36px 24px;}
}

@media (max-width:520px){
  .step-grid{grid-template-columns:1fr;}
  .footer-widgets .wrap{grid-template-columns:1fr;}
}

/* SiteOrigin Page Builder rows stack automatically on mobile via the
   plugin's own responsive CSS. These rules just keep our custom row
   classes (see layout.css) comfortable at small widths. */
@media (max-width:600px){
  .panel-row-style.gwm-row,
  .panel-row-style.gwm-hero-row{padding-top:40px; padding-bottom:40px;}
}