/* Login presentation only. Brand geometry remains untouched; motion is on the background. */
.login-page { background: var(--color-light-neutral); }
.login-page .site-header { background: transparent; color: var(--color-dark-blue); min-height: 96px; padding: 0 5vw; }
.login-page .brand { color: var(--color-dark-blue); }
.login-page .brand-copy { border-color: var(--color-border); }
.login-page .brand-copy > span { color: var(--color-dark-blue); }
.login-shell { display: grid; grid-template-columns: 1.05fr 1fr; width: min(1200px, 90vw); margin: 24px auto 40px; background: white; border: 1px solid var(--color-border); border-radius: 24px; overflow: hidden; min-height: 680px; }
.login-story { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 52px; background: var(--color-dark-blue); color: white; }
.login-brand-stage { position: relative; display: grid; place-items: center; min-height: 230px; margin-bottom: 40px; }
.login-brand-stage img { width: 280px; height: auto; position: relative; }
.login-orbit { position: absolute; width: 430px; height: 430px; border: 1px solid #ffffff1f; border-radius: 50%; animation: jarvis-orbit 12s ease-in-out infinite; }
.login-orbit::before, .login-orbit::after { content: ''; position: absolute; border: 1px solid #ffffff14; border-radius: 50%; inset: 35px; }
.login-orbit::after { inset: -36px; border-color: #00edff24; }
@keyframes jarvis-orbit { 0%,100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-12px); opacity: .85; } }
.login-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .15em; margin: 0 0 18px; }
.login-story .login-eyebrow { color: var(--color-cyber-blue); }
.login-story h2 { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.22; font-variation-settings: 'wdth' 112.5; margin: 0 0 20px; letter-spacing: -.025em; }
.login-story-copy > p:last-child { font-size: 16px; line-height: 1.7; color: var(--color-light-neutral); max-width: 370px; }
.login-story-foot { font-size: 12px; margin-top: auto; padding-top: 32px; color: var(--color-light-neutral); }
.login-form-panel { width: auto; margin: 0; padding: 64px 54px 48px; align-self: center; }
.login-form-panel h1 { font-size: 36px; letter-spacing: -.035em; line-height: 1.2; margin: 0 0 14px; }
.login-intro { font-size: 15px; line-height: 1.6; margin: 0; }
.login-steps { list-style: none; display: flex; padding: 0; gap: 28px; margin: 28px 0 32px; font-size: 12px; }
.login-steps li { display: flex; align-items: center; gap: 8px; }
.login-steps span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--color-border); border-radius: 50%; }
.login-steps [aria-current] { color: var(--color-sophos-blue); font-weight: 700; }
.login-steps [aria-current] span { color: white; background: var(--color-sophos-blue); border-color: var(--color-sophos-blue); }
.login-form-panel label { font-size: 13px; margin: 0 0 20px; gap: 9px; }
.login-form-panel input[type=email], .login-form-panel input[type=password] { min-height: 50px; width: 100%; background: white; border-color: color-mix(in srgb, var(--color-dark-blue) 28%, white); }
.login-form-panel .btn { width: 100%; min-height: 50px; border-radius: 8px; margin: 4px 0 0; font-size: 15px; }
.login-form-panel :is(input,button):focus-visible { outline: 3px solid var(--color-sophos-blue); outline-offset: 4px; }
.login-help { border-top: 1px solid var(--color-border); margin-top: 28px; padding-top: 22px; font-size: 12px; line-height: 1.7; }
.login-help p { margin: 6px 0 0; }
.login-form-panel .error { border-left: 3px solid var(--color-sophos-blue); background: var(--color-light-neutral); padding: 12px; line-height: 1.5; }
.login-footer { display: flex; justify-content: space-between; width: min(1200px,90vw); margin: auto auto 28px; font-size: 12px; color: var(--color-dark-blue); }
@media(max-width: 800px) { .login-shell { grid-template-columns: 1fr; width: min(540px, calc(100% - 32px)); margin-top: 4px; border-radius: 18px; min-height: 0; } .login-story { padding: 28px; } .login-brand-stage { min-height: 100px; margin: 0; } .login-brand-stage img { width: 220px; } .login-orbit { width: 270px; height: 270px; } .login-story-copy, .login-story-foot { display: none; } .login-form-panel { padding: 34px 28px; } .login-form-panel h1 { font-size: 30px; } .login-page .site-header { min-height: 82px; padding: 0 20px; } .login-page .brand img { width: 118px; height: auto; } .login-page .brand-copy strong { font-size: 12px; } .login-page .brand-copy > span { font-size: 10px; } .login-footer { gap: 16px; font-size: 10px; } }
@media(prefers-reduced-motion: reduce) { .login-orbit { animation: none; } }