/* Match the Employer feature strip to the exact rectangle baked into the
   Driver artwork (x 326..1338 / y 711..921 on the 1672 x 941 master).
   The desktop artwork is height-driven under background-size: cover, so vh
   keeps both strips pixel-aligned across normal desktop browser widths. */
@media (min-width:901px){
  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand{
    background-image:url('/login-career-visual-v223.png')!important;
  }
  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip{
    /* Exact Driver feature-strip geometry. The Employer background uses a
       clean artwork variant, so there is no second strip underneath it. */
    left:15.55%!important;
    right:12.9%!important;
    bottom:2.1vh!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    height:clamp(188px,22.3vh,222px)!important;
    box-sizing:border-box!important;
    padding:10px 18px!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:stretch!important;
    border:1px solid rgba(255,255,255,.9)!important;
    border-radius:26px!important;
    background:linear-gradient(90deg,#eff4f2,#e7eeeb)!important;
    box-shadow:0 18px 55px rgba(3,47,43,.14)!important;
    outline:2px solid #eef3f1!important;
    outline-offset:-1px!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    clip-path:none!important;
    transform:none!important;
    overflow:hidden!important;
  }
  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip article{
    box-sizing:border-box!important;width:auto!important;min-width:0!important;min-height:0!important;height:100%!important;
    display:grid!important;place-items:center!important;align-content:center!important;gap:6px!important;padding:0 14px!important;border-left:1px solid #c1ceca!important;
  }
  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip article:first-child{border-left:0!important}
  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip i{width:clamp(48px,3.35vw,64px)!important;height:clamp(48px,3.35vw,64px)!important;background:radial-gradient(circle at 35% 28%,#0a5a4c 0%,#003c35 72%)!important;color:#d8f1ea!important;font-size:clamp(21px,1.35vw,26px)!important}
  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip b{font-size:clamp(13px,.94vw,18px)!important;line-height:1.15!important}
  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip span{font-size:clamp(11px,.78vw,15px)!important;line-height:1.35!important}
}

/* Cross-browser/mobile lock for Chrome, Edge, Firefox and mobile Safari. */
@media (max-width:900px){
  .loginShell.loginShell .loginBrand.loginBrand,
  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand{
    background-image:url('/login-career-visual-v223.png')!important;
  }
  .loginShell.loginShell .loginBrand.loginBrand,
  .loginShell.loginShell .loginPanel{
    min-height:auto!important;
  }
  .loginShell.loginShell .loginBrand.loginBrand{
    padding:max(18px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 42px max(14px,env(safe-area-inset-left))!important;
    background-size:cover!important;
    background-position:36% center!important;
  }
  .loginShell.loginShell .loginPanel{
    padding:24px max(14px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important;
  }
  .loginShell.loginShell .loginPanel .loginBox{
    box-sizing:border-box!important;
    margin:auto!important;
  }
  .loginShell .loginBrandInner,.loginShell .employerBrandInner{
    overflow-wrap:anywhere!important;
  }
  .loginShell .annualValue,.loginShell .employerAnnualValue{
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;
  }
}

@media (max-width:520px){
  .loginShell.loginShell .loginBrand.loginBrand{
    min-height:660px!important;
    background-position:31% center!important;
  }
  .loginShell.loginShell .loginBrand.loginBrand .popupFloatingWordmark{
    width:min(270px,100%)!important;
    margin-bottom:34px!important;
  }
  .loginShell.loginShell .loginBrand.loginBrand .loginBrandInner,
  .loginShell.loginShell .loginBrand.loginBrand .employerBrandInner{
    margin-top:66px!important;
    padding:17px!important;
    border-radius:20px!important;
  }
  .loginShell.loginShell .loginBrand.loginBrand .loginBrandInner h1,
  .loginShell.loginShell .loginBrand.loginBrand .employerBrandInner h1{
    font-size:clamp(31px,9vw,40px)!important;
    line-height:1.02!important;
  }
  .loginShell .loginBenefits,.loginShell .employerBenefits{
    gap:6px!important;
  }
  .loginShell .loginBenefits span,.loginShell .employerBenefits span{
    min-height:0!important;
  }
}