/* Mobile & tablet responsiveness overrides.
   The site's layout is written with inline styles, so these rules use
   attribute selectors that match those inline style strings and use
   !important to win the cascade against them. Nothing here changes the
   desktop appearance (all rules are inside media queries). */

/* ---------- Tablet & phone (<=900px) ---------- */
@media (max-width:900px){

  /* tighten the shared 1240px container's side padding */
  [style*="max-width:1240px;margin:0 auto;padding:"]{
    padding-left:22px !important;
    padding-right:22px !important;
  }

  /* header: let the logo row and nav wrap instead of overflowing */
  header div[style*="height:78px"]{
    flex-wrap:wrap !important;
    height:auto !important;
    row-gap:12px !important;
    padding-top:14px !important;
    padding-bottom:14px !important;
  }
  header nav{
    flex-wrap:wrap !important;
    width:100%;
    gap:2px 4px !important;
  }
  header nav a{
    padding:6px 10px !important;
    font-size:13px !important;
  }
  header nav a[style*="margin-left:16px"]{
    margin-left:0 !important;
  }

  /* collapse every fixed-width layout grid to a single column */
  [style*="grid-template-columns:1fr 420px"],
  [style*="grid-template-columns:1fr 400px"],
  [style*="grid-template-columns:90px 1fr 1.2fr"],
  [style*="grid-template-columns:1.4fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:150px 1fr"],
  [style*="grid-template-columns:340px 1fr"],
  [style*="grid-template-columns:220px 1fr"],
  [style*="grid-template-columns:180px 1fr 1fr"],
  [style*="grid-template-columns:360px 1fr"],
  [style*="grid-template-columns:380px 1fr"],
  [style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:1fr !important;
  }

  /* card/feature grids: 3-up becomes 2-up at tablet width */
  [style*="grid-template-columns:repeat(3,1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
  }

  /* comfortable row spacing once stacked */
  [style*="grid-template-columns:90px 1fr 1.2fr"]{ row-gap:8px !important; }
  [style*="grid-template-columns:180px 1fr 1fr"]{ row-gap:6px !important; }
  [style*="grid-template-columns:150px 1fr"]{ row-gap:6px !important; }
  [style*="grid-template-columns:220px 1fr"]{ row-gap:6px !important; }
  [style*="grid-template-columns:340px 1fr"],
  [style*="grid-template-columns:360px 1fr"],
  [style*="grid-template-columns:380px 1fr"]{ row-gap:28px !important; }
  [style*="grid-template-columns:1.4fr 1fr 1fr"]{ row-gap:36px !important; }
  [style*="gap:64px;align-items:start"]{ row-gap:36px !important; }

  /* stats bar: drop the vertical dividers, use a bottom rule instead */
  [style*="grid-template-columns:repeat(4,1fr)"] > div{
    padding:16px 0 !important;
    border-right:none !important;
    border-bottom:1px solid rgba(245,241,232,.18) !important;
  }

  /* two-column hero sections: stack image below text, drop the divider */
  [style*="padding:96px 64px 88px 0"],
  [style*="padding:80px 64px 72px 0"]{
    padding:36px 0 30px !important;
    border-right:none !important;
    border-bottom:1px solid rgba(245,241,232,.18) !important;
  }
  [style*="padding:48px 0 48px 40px"]{
    padding:30px 0 36px !important;
  }

  /* let CTA button rows and title/tag rows wrap instead of overflowing */
  [style*="display:flex;gap:18px;margin-top:34px;align-items:center;"],
  [style*="display:flex;gap:18px;margin-top:38px;align-items:center;"],
  [style*="display:flex;gap:18px;margin-top:44px;align-items:center;"],
  [style*="display:flex;align-items:baseline;justify-content:space-between;gap:16px;"],
  [style*="display:flex;align-items:baseline;justify-content:space-between;gap:24px;"]{
    flex-wrap:wrap !important;
    row-gap:10px !important;
  }
}

/* ---------- Phone (<=640px) ---------- */
@media (max-width:640px){
  [style*="grid-template-columns:repeat(3,1fr)"]{
    grid-template-columns:1fr !important;
  }
  [style*="max-width:1240px;margin:0 auto;padding:"]{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}

/* ---------- Small phone (<=380px) ---------- */
@media (max-width:380px){
  header span[style*="font-size:10.5px"]{
    display:none !important;
  }
  .g-recaptcha{
    transform:scale(.86);
    transform-origin:0 0;
  }
}