/* GAMBIT V242 — mobile public page stabilization
   Scope: public site only. Does not touch cabinet logic or desktop layout. */

@media (max-width: 760px){
  *,*::before,*::after{box-sizing:border-box!important}
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body{min-width:0!important}
  img,svg,video,canvas{max-width:100%!important}

  /* HEADER: no overlap with hero */
  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
    width:100%!important;
    min-width:0!important;
    padding-top:max(6px,env(safe-area-inset-top))!important;
    background:rgba(7,9,11,.96)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
  }
  .site-header .wrap.nav{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:66px!important;
    padding:7px 12px!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:minmax(82px,1fr) auto auto!important;
    gap:7px!important;
    align-items:center!important;
  }
  .site-header .brand{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    margin:0!important;
    width:102px!important;
    min-width:0!important;
    max-width:102px!important;
    height:52px!important;
    display:flex!important;
    align-items:center!important;
    overflow:visible!important;
  }
  .site-header .brand img{
    position:static!important;
    transform:none!important;
    display:block!important;
    width:102px!important;
    max-width:102px!important;
    height:auto!important;
    max-height:50px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  .main-nav{display:none!important}
  .nav-actions{
    position:static!important;
    transform:none!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    min-width:0!important;
  }
  .lang-switch{
    width:78px!important;
    min-width:78px!important;
    height:40px!important;
    padding:3px!important;
    border-radius:14px!important;
    flex:none!important;
  }
  .lang-switch button{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    padding:0!important;
    font-size:12px!important;
  }
  .cabinet-pill{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    padding:0!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    flex:none!important;
  }
  .cabinet-pill span:not(.cabinet-icon){display:none!important}
  .cabinet-pill .cabinet-icon{margin:0!important}
  .mobile-menu{
    position:static!important;
    transform:none!important;
    display:grid!important;
    place-items:center!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    padding:0!important;
    margin:0!important;
    font-size:25px!important;
    line-height:1!important;
    border-radius:13px!important;
  }

  /* HERO: force all content inside viewport */
  .hero{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:auto!important;
    padding:20px 0 28px!important;
    overflow:hidden!important;
  }
  .hero .wrap,.hero-inner{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-left:18px!important;
    padding-right:18px!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  .hero-copy{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-top:0!important;
    margin:0!important;
  }
  .eyebrow{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    font-size:10px!important;
    line-height:1.38!important;
    letter-spacing:.11em!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .hero h1{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:18px 0 22px!important;
    padding:0!important;
    font-size:clamp(34px,10.2vw,44px)!important;
    line-height:.96!important;
    letter-spacing:-.045em!important;
    white-space:normal!important;
    overflow:visible!important;
  }
  .hero h1 span,.hero h1 strong{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  .benefits{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:16px 14px!important;
    margin:0 0 22px!important;
  }
  .benefits>div{min-width:0!important;width:auto!important;gap:9px!important;align-items:flex-start!important}
  .benefits i{flex:0 0 auto!important;font-size:22px!important;line-height:1!important}
  .benefits span{min-width:0!important;font-size:13px!important;line-height:1.22!important;white-space:normal!important}

  /* Search remains one line but scales to phone width */
  .hero-search{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:58px!important;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr) 96px!important;
    border-radius:30px!important;
    overflow:hidden!important;
  }
  .hero-search .search-icon{width:38px!important;display:grid!important;place-items:center!important}
  .hero-search input{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    padding:0 6px!important;
    font-size:12px!important;
    text-overflow:ellipsis!important;
  }
  .hero-search button{
    width:96px!important;
    min-width:96px!important;
    max-width:96px!important;
    padding:0 8px!important;
    font-size:14px!important;
    white-space:nowrap!important;
  }
  .hero-search button b{font-size:24px!important}
  .hero-example{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:9px 6px 0!important;
    font-size:10px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
  }
  .mobile-hero-cabinet{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:66px!important;
    margin:22px 0 0!important;
    padding:0 18px!important;
    border-radius:18px!important;
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
  }
  .mobile-hero-cabinet b{margin-left:auto!important;flex:none!important}

  .hero-car{
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    background-position:60% 100%!important;
    background-size:auto 50%!important;
    opacity:.72!important;
  }

  /* Remaining sections */
  .wrap{max-width:100%!important}
  .section,.brands,.footer{width:100%!important;max-width:100%!important;overflow:hidden!important}
  .section>.wrap,.brands>.wrap,.footer>.wrap{width:100%!important;max-width:100%!important;padding-left:16px!important;padding-right:16px!important}
  .section-head,.excel-grid,.feature-grid,.contact-grid,.footer-grid{min-width:0!important}
}

@media (max-width: 390px){
  .site-header .wrap.nav{padding-left:10px!important;padding-right:10px!important;gap:5px!important;grid-template-columns:minmax(74px,1fr) auto auto!important}
  .site-header .brand,.site-header .brand img{width:92px!important;max-width:92px!important}
  .site-header .brand{height:48px!important}
  .lang-switch{width:72px!important;min-width:72px!important}
  .lang-switch button{width:31px!important;min-width:31px!important}
  .cabinet-pill{width:38px!important;height:38px!important;min-width:38px!important}
  .mobile-menu{width:42px!important;height:42px!important;min-width:42px!important}
  .hero .wrap,.hero-inner{padding-left:14px!important;padding-right:14px!important}
  .hero h1{font-size:clamp(32px,9.8vw,39px)!important;letter-spacing:-.05em!important}
  .benefits{gap:14px 10px!important}
  .benefits span{font-size:12px!important}
  .hero-search{grid-template-columns:34px minmax(0,1fr) 88px!important;height:56px!important}
  .hero-search .search-icon{width:34px!important}
  .hero-search button{width:88px!important;min-width:88px!important;max-width:88px!important;font-size:13px!important;padding:0 6px!important}
  .hero-search input{font-size:11px!important;padding:0 4px!important}
}

@media (max-width: 350px){
  .site-header .brand,.site-header .brand img{width:80px!important;max-width:80px!important}
  .lang-switch{width:66px!important;min-width:66px!important}.lang-switch button{width:28px!important;min-width:28px!important;font-size:11px!important}
  .hero h1{font-size:31px!important}
  .hero-search{grid-template-columns:32px minmax(0,1fr) 82px!important}.hero-search button{width:82px!important;min-width:82px!important;max-width:82px!important}
}