/* Approved annotation: large transparent left-side logo; 20% frosted-glass form. */
.auth-shell.login-page {
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(40px, 7vw, 120px);
  row-gap: 38px;
  padding: 38px clamp(32px, 5vw, 88px) 30px;
  background: #222426;
}
.login-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #222426; pointer-events: none; }
.login-poster, .login-video { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.login-video[hidden] { display: none; }
.login-backdrop-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #00000005 15%, #08090b24 45%, #08090bb8 100%); }
.login-brand { grid-column: 1 / -1; display: flex; align-items: center; min-height: 62px; }
.login-brand-caption { color: #242629; font-size: 12px; font-weight: 550; letter-spacing: 3px; }
.login-hero-logo { width: 100%; max-width: 1240px; margin: clamp(0px, 3vh, 40px) 0 auto; background: transparent; }
.login-hero-logo img { display: block; width: 100%; height: auto; }
.login-page .auth-brand-panel { grid-column: 1; grid-row: 2; min-height: 0; border: 0; background: transparent; padding: 0 0 35px; align-self: stretch; }
.login-page .auth-brand-copy { margin: 0; color: #fff; text-shadow: 0 2px 22px #00000024; }
.login-page .auth-brand-copy .section-eyebrow { color: #eeeff1; font-size: 11px; font-weight: 500; letter-spacing: 4px; }
.login-page .auth-brand-copy h1 { font-size: clamp(38px, 4.2vw, 64px); font-weight: 550; line-height: 1.32; letter-spacing: -.04em; margin: 22px 0 20px; }
.login-page .auth-brand-copy p { color: #f0f0f1; font-size: 13px; line-height: 2; margin: 0; }
.login-page .auth-form-panel { grid-column: 2; grid-row: 2; align-self: center; display: block; min-height: 0; padding: 36px 36px 28px; border: 1px solid #ffffff55; border-radius: 12px; background: rgb(255 255 255 / 20%); backdrop-filter: blur(28px) brightness(.32); -webkit-backdrop-filter: blur(28px) brightness(.32); color: #fff; box-shadow: 0 22px 70px #00000024; }
.login-page .auth-form-wrap { max-width: none; }
.login-page .auth-form-icon { width: 36px; height: 36px; border-radius: 9px; border-color: #ffffff70; }
.login-page .auth-form-icon svg { width: 19px; height: 19px; }
.login-page .auth-form-wrap h2 { font-size: 25px; margin: 20px 0 7px; }
.login-page .auth-form-wrap > p { color: #f2f3f5; font-size: 12px; margin-bottom: 25px; }
.login-page input { height: 46px; background: #ffffffd9; }
.login-page .auth-primary { min-height: 46px; margin-top: 3px; }
.login-page .auth-form-links { margin: 20px 0 25px; }
.login-page .auth-form-links button, .login-page .auth-back { color: #fff; }
.login-page .auth-disclosure { color: #f2f3f5!important; font-size: 10px!important; margin-bottom: 0!important; }
.login-page .auth-footer { display: block; position: static; margin-top: 25px; padding-top: 18px; border-top: 1px solid #ffffff35; color: #f2f3f5; letter-spacing: 1.7px; font-size: 8px; }
.login-page .auth-trust { grid-row: 3; grid-column: 1 / -1; align-self: end; padding-right: 145px; color: #f0f0f1; font-size: 11px; letter-spacing: .5px; }
.login-motion-control, .login-motion-status { position: absolute; bottom: 27px; right: clamp(32px, 5vw, 88px); color: #fff; font: inherit; font-size: 11px; }
.login-motion-control { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 7px 12px; border: 1px solid #ffffff50; border-radius: 5px; background: #11182065; cursor: pointer; }
.login-motion-control:hover { background: #111820aa; }
.login-motion-control:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.login-page .auth-form-links button:focus-visible, .login-page .auth-back:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.login-page input:focus { outline-color: #fff; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .login-page .auth-form-panel { background: #383a3ef2; } }
@media (min-width: 1500px) { .login-page .auth-form-panel { margin-right: 1vw; } }
@media (max-width: 1000px) {
  .auth-shell.login-page { grid-template-columns: minmax(0, 1fr) 370px; column-gap: 32px; padding-inline: 32px; }
  .login-page .auth-form-panel { padding: 30px 28px 25px; }
  .login-page .auth-brand-copy h1 { font-size: 38px; }
  .login-motion-control, .login-motion-status { right: 32px; }
}
@media (max-width: 760px) {
  .auth-shell.login-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; row-gap: 18px; padding: 25px 20px 25px; }
  .login-brand { min-height: 14px; }
  .login-brand-caption { font-size: 10px; letter-spacing: 2px; }
  .login-hero-logo { max-width: 410px; margin: -15px auto -20px; }
  .login-page .auth-brand-panel { display: flex; padding: 0; }
  .login-page .auth-brand-copy { display: none; }
  .login-page .auth-form-panel { grid-column: 1; grid-row: 3; width: min(100%, 410px); justify-self: center; margin: 8px 0; padding: 29px 27px 25px; }
  .login-page .auth-trust { grid-row: 4; display: flex; min-height: 36px; font-size: 9px; gap: 6px; padding-right: 112px; }
  .login-page .auth-trust svg { flex-shrink: 0; width: 16px; }
  .login-motion-control, .login-motion-status { right: 20px; bottom: 25px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .login-page *, .login-page *::before, .login-page *::after { scroll-behavior: auto; transition: none; animation: none; } }
