/* The approved Radio Express login: a cyan diagonal, audio covers and a clear form. */
.login-page{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse at 38% 48%,#10445d35,transparent 58%),#0c1e2e;color:#effaff;display:flex;flex-direction:column}
.login-diagonal{position:absolute;z-index:-1;inset:0 0 auto;height:clamp(205px,17.5vw,320px);background:linear-gradient(110deg,#09b6d5,#10c3dc);clip-path:polygon(0 0,100% 0,100% 0,0 100%)}
.login-brandbar{position:relative;padding:34px clamp(28px,4.3vw,90px) 0;min-height:145px;display:flex;align-items:flex-start}
.login-brand{display:flex;align-items:center;gap:14px;max-width:100%;color:white;text-decoration:none;width:max-content}
.login-brand-symbol{display:block;position:relative;overflow:hidden;flex:0 0 100px;width:100px;height:78px}
.login-brand-symbol img{position:absolute;width:164px;height:164px;max-width:none;left:-32px;top:-29px;object-fit:contain;filter:brightness(0) invert(1)}
.login-brand-copy{display:flex;flex-direction:column;gap:6px;line-height:1}
.login-brand-copy small{font-size:15px;letter-spacing:8px;font-weight:500}
.login-brand-copy strong{font-size:35px;letter-spacing:-1.4px;font-weight:900}
.login-layout{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr 1.12fr minmax(340px,.97fr);align-items:center;gap:clamp(18px,1.9vw,36px);width:calc(100% - clamp(56px,8.6vw,180px));max-width:1800px;margin:0 auto;flex:1;padding:0 0 24px;min-width:0}
.login-intro{min-width:0;padding:32px 0 0}
.login-intro h1{margin:0 0 28px;font-family:Arial,Helvetica,sans-serif;font-size:clamp(50px,5.25vw,97px);font-weight:800;font-style:italic;line-height:1.12;letter-spacing:-3px;text-transform:uppercase}
.login-intro h1>span,.login-intro h1>em{display:block;width:max-content;transform:scaleX(.84);transform-origin:left center;white-space:nowrap}
.login-intro h1>span{color:transparent;-webkit-text-stroke:1.6px #effaff}
.login-intro h1>em{color:#10bad7;font-style:italic;letter-spacing:-4px;font-weight:900;font-size:1.1em;margin-top:4px}
.login-intro>p{font-size:clamp(16px,1.35vw,23px);line-height:1.6;color:#e1eaf0;margin:0;max-width:430px}
.login-weekly{display:flex;align-items:center;gap:16px;color:#39d9ec;font-size:10px;letter-spacing:2.6px;line-height:1.6;text-transform:uppercase;margin-top:64px;white-space:nowrap}
.login-weekly>span{height:2px;width:38px;background:#27cde5;flex:0 0 38px}
.login-collage{position:relative;align-self:center;margin:-22px -24px 0 -25px;min-width:0;pointer-events:none;animation:login-cover-float 9s ease-in-out infinite}
.login-collage img{display:block;width:100%;height:auto;max-height:750px;object-fit:contain;filter:drop-shadow(0 18px 18px #0002)}
.access-card{position:relative;width:100%;max-width:510px;justify-self:end;min-width:0;margin:0;padding:clamp(26px,2.8vw,48px);background:#f1f8fb;border:1px solid #f4fcff;border-radius:21px;color:#0d2035;box-shadow:0 20px 65px #020e1e3b}
.access-eyebrow{display:block;font-size:10px;font-weight:600;letter-spacing:3.6px;line-height:1.5;text-transform:uppercase;color:#48647a;margin-bottom:24px}
.access-card h2{font-size:clamp(35px,3vw,52px);line-height:1.03;letter-spacing:-1.8px;font-weight:800;color:#07192e;margin:0 0 14px}
.access-card .access-subtitle{margin:0 0 32px;font-size:15px;line-height:1.5;color:#61768b}
.access-field{margin:0 0 20px}
.access-field label{display:block;font-size:13px;font-weight:500;color:#0a2034;margin:0 0 8px;line-height:1.4}
.access-field input{display:block;width:100%;min-width:0;min-height:52px;padding:14px 16px;border:1px solid #b9d5e3;border-radius:9px;background:#f4faff;color:#112d42;font:inherit;font-size:14px;box-shadow:inset 0 1px 2px #0d3c5410}
.access-field input::placeholder{color:#70879a;opacity:1}
.access-password{position:relative}
.access-password input{padding-right:50px}
.access-password button{position:absolute;right:7px;top:6px;display:grid;place-items:center;width:40px;height:40px;padding:8px;border:0;border-radius:6px;background:transparent;color:#172d46}
.access-password button:hover{background:#dfedf5}
.access-password button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7}
.access-password .eye-slash{display:none}
.access-password [aria-pressed=true] .eye-slash{display:block}
.access-submit{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:15px 22px;margin-top:28px;border:0;border-radius:11px;background:#08adce;color:#fff;font:inherit;font-size:14px;font-weight:500;letter-spacing:1px;line-height:1.4;text-align:left;text-transform:uppercase;box-shadow:0 6px 18px #08adce15;transition:background .2s,transform .2s}
.access-submit svg{width:25px;height:25px;flex:0 0 25px;fill:none;stroke:currentColor;stroke-width:1.7}
.access-submit:hover{background:#0699b8;transform:translateY(-1px)}
.access-card .access-help{margin:18px 0 0;font-size:11px;line-height:1.7;color:#708196}
.access-back{display:inline-block;font-size:13px;line-height:1.5;color:#069fbd;text-decoration:none;margin-top:27px}
.access-back:hover{text-decoration:underline;text-underline-offset:4px}
.login-page a:focus-visible,.login-page button:focus-visible,.login-page input:focus-visible{outline:3px solid #09b4d4;outline-offset:3px}
.access-card .access-error{color:#8f283d;background:#ffe9ed;border:1px solid #e9b9c5;border-radius:8px;font-size:13px;line-height:1.5;padding:11px 13px;margin:0 0 20px}
.access-field input[aria-invalid=true]{border-color:#b75c72}
.login-background-wave{position:absolute;z-index:-1;bottom:0;left:0;right:0;height:160px;pointer-events:none;opacity:.3;mask-image:linear-gradient(to right,#000 0%,#000 54%,transparent 88%)}
.login-background-wave svg{width:100%;height:100%;fill:#1a9ec8}
.login-footer{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:20px;width:calc(100% - clamp(56px,8.6vw,180px));max-width:1800px;margin:0 auto;padding:22px 0 28px;color:#c7dae5;font-size:11px;letter-spacing:2.4px}
.login-footer>span{width:38px;height:2px;background:#19bedb}
@keyframes login-cover-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(min-width:1101px) and (max-height:850px){.login-brandbar{padding-top:25px;min-height:117px}.login-layout{padding-bottom:8px}.access-card{padding:28px 30px}.access-eyebrow{margin-bottom:18px}.access-card h2{font-size:40px}.access-card .access-subtitle{margin-bottom:24px;font-size:14px}.access-field{margin-bottom:16px}.access-field input{min-height:48px;padding-top:12px;padding-bottom:12px}.access-password button{top:4px}.access-submit{margin-top:22px;min-height:52px;padding:13px 18px;font-size:12px}.access-card .access-help{margin-top:16px}.access-back{margin-top:20px}.login-collage img{max-height:600px}.login-weekly{margin-top:42px;font-size:9px;letter-spacing:2px}.login-footer{padding-top:15px;padding-bottom:20px}}
@media(max-width:1250px) and (min-width:1101px){.login-layout{grid-template-columns:.97fr 1fr minmax(330px,1fr);gap:18px;width:calc(100% - 64px)}.login-intro h1{font-size:5.1vw;letter-spacing:-2px}.login-intro>p{font-size:16px}.login-weekly{font-size:8px;letter-spacing:1.6px;gap:10px}.login-weekly>span{width:25px;flex-basis:25px}.access-card{padding:29px}.access-card h2{font-size:38px}.access-card .access-subtitle{font-size:13px}}
@media(max-width:1100px){.login-brandbar{padding:30px 36px 0;min-height:150px}.login-layout{grid-template-columns:minmax(0,1fr) minmax(330px,420px);width:calc(100% - 72px);gap:35px;padding-bottom:25px}.login-intro{grid-column:1;grid-row:1;align-self:center;z-index:1}.login-intro h1{font-size:clamp(52px,7.7vw,82px)}.login-intro>p{font-size:17px;max-width:340px}.login-desktop-break{display:none}.login-weekly{font-size:8px;letter-spacing:1.5px;gap:10px;margin-top:42px;white-space:normal}.login-weekly>span{width:25px;flex-basis:25px}.login-collage{position:absolute;z-index:-1;left:7%;bottom:0;width:38%;margin:0;opacity:.13}.access-card{grid-column:2;grid-row:1;padding:30px;max-width:none}.access-card h2{font-size:40px}.access-card .access-subtitle{font-size:14px}.access-eyebrow{font-size:9px;letter-spacing:3px}.access-submit{font-size:12px;padding-left:16px;padding-right:16px}.login-footer{width:calc(100% - 72px)}}
@media(max-width:760px){.login-diagonal{height:190px;clip-path:polygon(0 0,100% 0,100% 28%,0 100%)}.login-brandbar{padding:23px 24px 0;min-height:134px}.login-brand{gap:10px}.login-brand-symbol{width:75px;height:60px;flex-basis:75px}.login-brand-symbol img{width:125px;height:125px;left:-25px;top:-23px}.login-brand-copy{gap:5px}.login-brand-copy small{font-size:11px;letter-spacing:6px}.login-brand-copy strong{font-size:28px;letter-spacing:-1.1px}.login-layout{grid-template-columns:1fr;width:calc(100% - 40px);max-width:500px;gap:0;padding:0 0 12px;flex:0 0 auto}.access-card{grid-column:1;grid-row:1;padding:30px;border-radius:17px}.access-card h2{font-size:39px}.access-card .access-subtitle{font-size:14px;margin-bottom:27px}.access-eyebrow{margin-bottom:20px}.access-submit{min-height:54px;font-size:12px;letter-spacing:.7px}.login-intro{grid-column:1;grid-row:2;padding:45px 10px 0;justify-self:center;max-width:100%;width:100%;text-align:left}.login-intro h1{font-size:clamp(53px,13vw,76px);line-height:1.05;margin-bottom:22px}.login-intro>p{font-size:17px;max-width:370px}.login-weekly{margin-top:25px;font-size:8px;letter-spacing:1.7px}.login-collage{position:relative;grid-column:1;grid-row:3;justify-self:center;left:auto;bottom:auto;width:85%;max-width:360px;opacity:1;z-index:0;margin:25px 0 0}.login-background-wave{height:155px;opacity:.23;mask-image:linear-gradient(to top,#000,transparent)}.login-footer{width:calc(100% - 48px);padding:18px 0 25px;justify-content:center;font-size:9px;letter-spacing:1.7px;margin-top:auto}}
@media(max-width:380px){.login-layout{width:calc(100% - 28px)}.access-card{padding:25px 22px}.access-card h2{font-size:36px}.access-card .access-subtitle{font-size:13px}.access-submit{font-size:11px;letter-spacing:.4px}.access-card .access-help{font-size:10px}}
@media(prefers-reduced-motion:reduce){.login-collage{animation:none}.access-submit{transition:none}}

/* Preserve the approved responsive sizes; only shrink when the content exceeds the viewport. */
.login-viewport{min-height:100vh;min-height:100svh;background:#0c1e2e}
@media(min-width:761px){
 .login-viewport.is-fitted{position:relative;width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden}
 .login-viewport.is-fitted .login-page{position:absolute;left:50%;top:50%;width:100%;min-height:100vh;min-height:100dvh;transform:translate(-50%,-50%) scale(var(--login-scale,1));transform-origin:center}
}