/* EF campaign direction: official photography, cyan movement and navy typography. */
.login-overlay { background: #fff; align-items: stretch; overflow-y: auto; }
.login-campaign { flex: 1 1 54%; min-height: 100dvh; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 42px 48px; color: #fff; isolation: isolate; background: #007aaf; }
.login-campaign::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url('/assets/login-sport.webp') center center / cover; filter: grayscale(1); }
.login-campaign::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #06395454 0%, #00bce933 34%, #004a7c88 65%, #002c52ed 100%), linear-gradient(105deg, #008dafaa, #00b9e18c); mix-blend-mode: multiply; }
.login-campaign-top, .login-campaign-footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; font-size: 9px; font-weight: 650; letter-spacing: 1.8px; }
.login-brand-name { font-size: 14px; font-weight: 800; letter-spacing: 2px; }
.login-campaign-copy { margin-top: auto; padding: 220px 0 48px; }
.login-eyebrow { font-size: 10px; letter-spacing: 2px; font-weight: 700; margin-bottom: 22px; }
.login-campaign h2 { font-size: clamp(42px, 4.6vw, 78px); line-height: 1.04; letter-spacing: -2.6px; font-weight: 750; }
.login-campaign h2 em { color: #6ce4f7; font-style: italic; }
.login-campaign-copy > p:last-child { margin-top: 25px; color: #e2f5fc; font-size: 14px; line-height: 1.8; }
.login-campaign-footer { border-top: 1px solid #ffffff45; padding-top: 22px; font-size: 8px; }
.login-track { font-size: 28px; line-height: 1; }
.login-panel { flex: 1 1 46%; min-height: 100dvh; background: #fff; display: flex; flex-direction: column; padding: 42px 52px 28px; }
.login-panel-top, .login-panel-footer { display: flex; justify-content: space-between; gap: 16px; color: #7c8a9b; font-size: 9px; letter-spacing: 1px; }
.login-panel-top { color: #17344e; font-weight: 650; }
.login-panel-top span { color: #98a3af; font-weight: 450; }
.login-card { box-shadow: none; border-radius: 0; width: 100%; max-width: 390px; padding: 38px 0; margin: auto; background: transparent; }
.login-company-logo { width: 170px; height: 124px; object-fit: cover; object-position: center; margin: -8px 0 22px -21px; display: block; }
.login-card .login-eyebrow { color: #008cb7; font-size: 9px; margin-bottom: 14px; }
.login-card h1 { color: #103351; font-size: clamp(26px, 2.25vw, 34px); font-weight: 650; line-height: 1.25; letter-spacing: -.95px; }
.login-subtitle { color: #718294; font-size: 13px; line-height: 1.8; margin: 18px 0 32px; }
.login-label { font-size: 11px; color: #29465d; font-weight: 600; margin-bottom: 9px; }
.login-password-wrap { position: relative; }
.login-input { height: 51px; border: 1px solid #d8e2e9; background: #fcfdfe; border-radius: 6px; padding: 0 76px 0 15px; font-size: 13px; color: #17344e; }
.login-input::placeholder { color: #a0adba; }
.login-input:focus { border-color: #008db6; outline: 3px solid #008db615; outline-offset: 1px; }
.login-show-password { position: absolute; right: 12px; top: 0; height: 51px; border: 0; background: transparent; color: #597187; font-size: 10px; font-weight: 600; cursor: pointer; }
.login-error { min-height: 18px; font-size: 11px; line-height: 1.5; margin-top: 8px; }
.login-btn { display: flex; align-items: center; justify-content: space-between; height: 51px; padding: 0 18px; margin-top: 6px; border-radius: 6px; background: #006f9e; font-size: 12px; font-weight: 600; box-shadow: 0 5px 14px #00739f18; }
.login-btn:hover { background: #005a84; }
.login-btn > span:last-child { font-size: 21px; font-weight: 400; }
.login-btn:disabled { opacity: .65; cursor: wait; }
.login-help { color: #7c8b99; font-size: 10px; margin-top: 22px; line-height: 1.6; }
.login-access-note { color: #98a4b0; font-size: 9px; display: flex; align-items: center; gap: 7px; border-top: 1px solid #eaf0f4; padding-top: 23px; margin-top: 32px; }
.login-panel-footer { font-size: 8px; letter-spacing: .1px; }
@media (min-width: 1600px) { .login-panel { padding-left: 80px; padding-right: 80px; } .login-card { max-width: 420px; } }
@media (max-width: 1050px) { .login-panel { padding: 32px; } .login-campaign { padding: 32px; } .login-campaign h2 { font-size: 48px; } .login-campaign-top > span:last-child { display: none; } }
@media (max-width: 740px) { .login-overlay { flex-direction: column; } .login-campaign { flex: none; min-height: 260px; padding: 24px; background-position: center 45%; } .login-campaign::before { background-position: center 42%; } .login-campaign-copy { padding: 65px 0 0; } .login-campaign h2 { font-size: 38px; letter-spacing: -1.4px; } .login-campaign .login-eyebrow { font-size: 8px; margin-bottom: 12px; } .login-campaign-copy > p:last-child, .login-campaign-footer { display: none; } .login-panel { min-height: auto; flex: 1; padding: 28px 26px 24px; } .login-panel-top { display: none; } .login-card { padding: 0 0 30px; } .login-company-logo { height: 102px; width: 145px; margin: -9px 0 14px -18px; } .login-card h1 { font-size: 27px; } .login-subtitle { margin: 14px 0 24px; } .login-access-note { margin-top: 24px; padding-top: 18px; } .login-panel-footer { max-width: 390px; width: 100%; margin: auto; } }
@media (max-height: 700px) and (min-width: 741px) { .login-panel { padding-top: 24px; } .login-card { padding: 12px 0; } .login-company-logo { height: 90px; width: 145px; margin-bottom: 8px; } .login-subtitle { margin: 12px 0 22px; } .login-access-note { margin-top: 20px; padding-top: 16px; } .login-campaign-copy { padding-top: 150px; } }