/* Launch-day layout corrections. Kept separate to provide a fresh production asset. */
@media (min-width: 901px) {
  .loginShell.loginShell .loginBrand.loginBrand .popupFloatingWordmark {
    left: var(--popup-brand-left, 10px) !important;
    right: auto !important;
    top: var(--popup-brand-top, 14px) !important;
    box-sizing: border-box !important;
    width: 226px !important;
    min-width: 226px !important;
    max-width: 226px !important;
    padding: 7px 10px 7px 7px !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    transform: none !important;
    transform-origin: top left !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand .popupFloatingWordmark .towLogo {
    width: 60px !important;
    height: 60px !important;
    flex: 0 0 60px !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand .popupFloatingWordmark strong {
    font-size: 25px !important;
    line-height: 1 !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand .popupFloatingWordmark small {
    margin-top: 4px !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
    letter-spacing: 1.45px !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand::after,
  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand::after {
    left: var(--popup-brand-left, 10px) !important;
    right: auto !important;
    top: var(--popup-slogan-top, 94px) !important;
    box-sizing: border-box !important;
    width: 226px !important;
    min-width: 226px !important;
    max-width: 226px !important;
    padding: 7px 9px !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    transform: none !important;
  }
}

@media (min-width: 1001px) {
  .resumePage .resumeBuilder {
    grid-template-columns: minmax(720px, 1.15fr) minmax(440px, .85fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  .resumePage .resumeForm {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    column-count: 2 !important;
    column-gap: 18px !important;
    column-rule: 1px solid var(--line) !important;
    padding: 18px !important;
  }

  .resumePage .resumeForm > .resumeGuidePrompt {
    column-span: all !important;
    margin-bottom: 12px !important;
  }

  .resumePage .resumeForm > h2,
  .resumePage .resumeForm > .formGrid,
  .resumePage .resumeForm > label,
  .resumePage .resumeForm > .workExperienceBuilder,
  .resumePage .resumeForm > .languagePicker,
  .resumePage .resumeForm > .uploadIntro,
  .resumePage .resumeForm > .openVault,
  .resumePage .resumeForm > .uploads {
    break-inside: avoid-column !important;
  }

  .resumePage .resumeForm > h2 {
    break-after: avoid-column !important;
    margin-top: 0 !important;
    padding-top: 10px !important;
  }

  .resumePage .workExperienceBuilder .formGrid {
    grid-template-columns: 1fr !important;
  }

  .resumePage .resumePreview {
    position: sticky !important;
    top: 18px !important;
    max-height: none !important;
  }

  .resumePage .resumePreview #tow-resume {
    min-height: 0 !important;
    padding: 32px 34px !important;
  }
}

/* Transparent brand lockups requested for the member header and both access screens. */
.headerInner.headerInner > .brand {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.headerInner.headerInner > .brand .towLogo {
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.headerInner.headerInner > .brand strong {
  color: var(--deep) !important;
  text-shadow: none !important;
}

.headerInner.headerInner > .brand small {
  color: #6f847d !important;
  text-shadow: none !important;
}

.loginShell.loginShell .loginBrand.loginBrand .popupFloatingWordmark {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.loginShell.loginShell .loginBrand.loginBrand .popupFloatingWordmark .towLogo {
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.loginShell.loginShell .loginBrand.loginBrand .popupFloatingWordmark strong {
  color: var(--deep) !important;
  text-shadow: none !important;
}

.loginShell.loginShell .loginBrand.loginBrand .popupFloatingWordmark small {
  color: #6f847d !important;
  text-shadow: none !important;
}

/* Version 222 preview: larger, clearer left-side presentation. */
@media (min-width: 1200px) {
  .loginShell.loginShell .loginBrand.loginBrand .popupFloatingWordmark {
    left: 20px !important;
    right: auto !important;
    top: 18px !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    padding: 8px 11px 8px 8px !important;
    gap: 12px !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand .popupFloatingWordmark .towLogo {
    width: 68px !important;
    height: 68px !important;
    flex: 0 0 68px !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand .popupFloatingWordmark strong {
    font-size: 30px !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand .popupFloatingWordmark small {
    margin-top: 5px !important;
    font-size: 9px !important;
    letter-spacing: 1.7px !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand::after,
  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand::after {
    left: 20px !important;
    right: auto !important;
    top: 112px !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    padding: 8px 10px !important;
    font-size: 8.5px !important;
  }
}

/* Version 224: one shared access-screen composition for Driver and Employer. */
@media (min-width: 1200px) {
  .loginShell.loginShell .loginBrand.loginBrand .loginBrandInner,
  .loginShell.loginShell .loginBrand.loginBrand .employerBrandInner {
    left: 30% !important;
    right: auto !important;
    top: 30px !important;
    box-sizing: border-box !important;
    width: min(780px, 55%) !important;
    max-width: none !important;
    padding: 20px 26px !important;
    zoom: .9 !important;
    transform: none !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip {
    left: 16.4% !important;
    right: 12.8% !important;
    bottom: 14px !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-height: 192px !important;
    height: 192px !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(255,255,255,.68) !important;
    border-radius: 24px !important;
    background: rgba(246,251,249,.88) !important;
    box-shadow: 0 18px 55px rgba(3,47,43,.14) !important;
    backdrop-filter: blur(14px) !important;
    transform: none !important;
  }
}

/* Version 225: keep both access cards inside the approved safe area and align both feature strips. */
@media (min-width: 1200px) {
  .loginShell.loginShell .loginBrand.loginBrand .loginBrandInner,
  .loginShell.loginShell .loginBrand.loginBrand .employerBrandInner {
    left: 25.7% !important;
    right: auto !important;
    top: 30px !important;
    box-sizing: border-box !important;
    width: 54.5% !important;
    max-width: none !important;
    padding: 16px 26px !important;
    zoom: .9 !important;
    transform: none !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip {
    left: 16.35% !important;
    right: 12.8% !important;
    bottom: 12px !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-height: 205px !important;
    height: 205px !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(255,255,255,.68) !important;
    border-radius: 24px !important;
    background: rgba(246,251,249,.90) !important;
    box-shadow: 0 18px 55px rgba(3,47,43,.14) !important;
    backdrop-filter: blur(14px) !important;
    transform: none !important;
  }
}

/* Version 226: match the Employer feature strip to the baked Driver reference. */
@media (min-width: 1200px) {
  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip {
    left: calc(38% - 32.32vh) !important;
    right: auto !important;
    bottom: 2.2vh !important;
    box-sizing: border-box !important;
    width: 105.66vh !important;
    min-height: 0 !important;
    height: 22.3vh !important;
    padding: 18px 20px !important;
    border: 1px solid rgba(255,255,255,.82) !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;
    backdrop-filter: blur(14px) !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip article {
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: 76% !important;
    gap: 8px !important;
    padding: 0 20px !important;
    border-left-color: #b9c8c4 !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip i {
    width: 64px !important;
    height: 64px !important;
    background: radial-gradient(circle at 35% 28%,#0a5a4c 0%,#003c35 72%) !important;
    color: #d8f1ea !important;
    font-size: 26px !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip b {
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip span {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
}

/* Version 229: exact Driver-strip proportions and a verified top-layer Job Board overlay. */
@media (min-width: 1200px) {
  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip {
    align-items: stretch !important;
    padding: 10px 18px !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip article {
    height: 100% !important;
    min-height: 0 !important;
    align-content: center !important;
    gap: 6px !important;
    padding: 0 16px !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand {
    z-index: 100 !important;
    overflow: visible !important;
  }

  .loginShell.loginShell .loginPanel {
    position: relative !important;
    z-index: 50 !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand .loginBrandInner,
  .loginShell.loginShell .loginBrand.loginBrand .employerBrandInner {
    z-index: 100 !important;
  }

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

  .loginShell.loginShell .loginBrand.loginBrand .popupPhoneVault {
    clip-path: inset(0 180px 0 0) !important;
  }

  .loginShell.loginShell .loginBrand.loginBrand.employerLoginBrand .employerPopupFeatureStrip {
    clip-path: inset(0 max(0px, calc(73.34vh - 62%)) 0 0) !important;
  }
}