/* Final responsive launch lock: stable sizing across desktop and mobile browsers. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body,
.loginShell,
.loginBrand,
.loginPanel {
  max-width: 100%;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

button,
input,
select,
textarea {
  min-width: 0;
}

@media (min-width: 901px) {
  .loginShell.loginShell {
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    height: auto !important;
    grid-template-columns: minmax(0, 72%) minmax(360px, 28%) !important;
    overflow: visible !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand,
  .loginShell.loginShell .loginPanel {
    min-height: 100vh !important;
    min-height: 100svh !important;
    height: auto !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand {
    overflow: visible !important;
  }

  .loginShell.loginShell .loginPanel {
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  /* One Employer strip only: this opaque panel fully covers the Driver artwork strip beneath it. */
  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip {
    left: 15.55% !important;
    right: 12.9% !important;
    bottom: 2.1vh !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 188px !important;
    height: clamp(188px, 22.3vh, 222px) !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,.92) !important;
    border-radius: 26px !important;
    background: linear-gradient(90deg,#d2dcda 0%,#e1e8e6 42%,#eef3f1 100%) !important;
    box-shadow: 0 18px 55px rgba(3,47,43,.14) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    clip-path: 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 #b9c8c4 !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;
  }

  .loginShell.loginShell .loginBrand.loginBrand .qualifiedBoardPreview {
    z-index: 1000 !important;
  }
}

@media (max-width: 900px) {
  body {
    overflow-x: hidden !important;
  }

  .loginShell.loginShell {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    height: auto !important;
    overflow: visible !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 760px !important;
    height: auto !important;
    padding: 18px 14px 54px !important;
    display: block !important;
    overflow: hidden !important;
    background-image: url('/login-career-visual-v223.png') !important;
    background-size: auto 100% !important;
    background-position: 43% center !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand .popupFloatingWordmark {
    position: relative !important;
    inset: auto !important;
    width: min(300px, calc(100vw - 28px)) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 42px !important;
    transform: none !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand::after,
  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand::after {
    left: 14px !important;
    right: auto !important;
    top: 104px !important;
    width: min(300px, calc(100vw - 28px)) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand .loginBrandInner,
  .loginShell.loginShell .loginBrand.loginBrand .employerBrandInner {
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: min(620px, 100%) !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 74px auto 0 !important;
    padding: 22px !important;
    zoom: 1 !important;
    transform: none !important;
    overflow: visible !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand .loginBrandInner h1,
  .loginShell.loginShell .loginBrand.loginBrand .employerBrandInner h1 {
    font-size: clamp(34px, 9.4vw, 48px) !important;
    letter-spacing: -1.7px !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand .popupPhoneVault,
  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip {
    display: none !important;
  }

  .loginShell.loginShell .loginPanel {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    height: auto !important;
    padding: 18px 14px !important;
    overflow: visible !important;
  }

  .loginShell.loginShell .loginPanel .loginBox {
    width: min(590px, 100%) !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 520px) {
  .loginShell.loginShell .loginBrand.loginBrand {
    min-height: 700px !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand .loginBrandInner,
  .loginShell.loginShell .loginBrand.loginBrand .employerBrandInner {
    padding: 18px !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand .loginBenefits,
  .loginShell.loginShell .loginBrand.loginBrand .employerBenefits {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}