/* ============================================================
   GETAX — responsive layer (tablet / mobile)
   ------------------------------------------------------------
   The Claude Design source is desktop-only and styles every
   element inline. These rules override the inline styles with
   !important, targeting them by their inline-style substrings so
   no template edits are needed (except the header menu button).
   ============================================================ */

/* Mobile menu button — hidden on desktop, shown from 900px down */
#getax-burger{
  display:none; margin-left:auto; flex:none;
  align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  background:transparent; border:1px solid #E3E8EF; border-radius:8px;
  color:#14203A; cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
#getax-burger:hover{ background:#F6F8FB; border-color:#cbd5e1; }
#getax-burger:focus-visible{ outline:2px solid #1F3C88; outline-offset:2px; }

/* ---------------- Tablet & below (<= 900px) ---------------- */
@media (max-width: 900px){
  #getax-burger{ display:inline-flex; }

  /* Header collapses into a toggled panel */
  header .getax-hdr-inner{
    flex-wrap:wrap !important;
    height:auto !important;
    min-height:64px;
    padding:10px 20px !important;
    row-gap:0;
  }
  header nav{
    order:3; flex-basis:100% !important;
    flex-direction:column; align-items:stretch !important;
    gap:0 !important; margin:0 !important;
    background:#fff;
    max-height:0; overflow:hidden;
    transition:max-height .34s cubic-bezier(.16,1,.3,1);
  }
  header [data-mcta]{
    order:4; flex-basis:100% !important;
    flex-direction:column; align-items:stretch !important;
    gap:10px !important;
    background:#fff;
    max-height:0; overflow:hidden; padding:0;
    transition:max-height .34s cubic-bezier(.16,1,.3,1);
  }
  header.nav-open nav{ max-height:70vh; overflow:auto; padding:6px 0 4px; }
  header.nav-open [data-mcta]{ max-height:220px; padding:8px 0 14px; }
  header nav a{
    padding:14px 6px !important;
    border-bottom:1px solid #eef1f6;
    font-size:16px !important;
  }
  header nav a::after{ display:none !important; }         /* underline anim off in the panel */
  header [data-mcta] a{ justify-content:center; padding:14px 16px !important; font-size:14px !important; }

  /* 3- and 4-column grids → 2 columns */
  main [style*="grid-template-columns:repeat(3"]{ grid-template-columns:repeat(2,1fr) !important; }
  main [style*="grid-template-columns:repeat(4"]{ grid-template-columns:repeat(2,1fr) !important; }
}

/* ---------------- Phone (<= 600px) ---------------- */
@media (max-width: 600px){
  /* Stack every grid (multi-col, asymmetric, footer) */
  main [style*="grid-template-columns"],
  footer [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }

  /* Container side padding */
  main [style*="max-width:1180px"],
  main [style*="max-width:940px"],
  footer [style*="max-width:1180px"]{
    padding-left:20px !important; padding-right:20px !important;
  }

  /* Fluid headings & lead text */
  main h1[style]{ font-size:clamp(30px,8.5vw,42px) !important; line-height:1.08 !important; letter-spacing:-.02em !important; }
  main h2[style]{ font-size:clamp(23px,6.4vw,32px) !important; line-height:1.16 !important; }
  main p[style*="font-size:31px"]{ font-size:19px !important; line-height:1.5 !important; }
  main p[style*="font-size:19px"],
  main p[style*="font-size:18.5px"]{ font-size:16px !important; }

  /* Hero heights */
  main [style*="min-height:620px"]{ min-height:80vh !important; }
  main [style*="min-height:460px"]{ min-height:auto !important; }

  /* Sticky side columns shouldn't stick once stacked */
  main [style*="position:sticky"]{ position:static !important; }
}