.brand-logo .brand { height: 92px; flex-basis: 92px; }
.brand-logo .topbar { height: 92px; }
.brand-logo .brand-mark { width: 46px; height: 56px; flex: 0 0 46px; border-radius: 0; background: transparent; }
.brand-logo .brand-mark img { display: block; width: 46px; height: 56px; }
.brand-intro-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; }
html.brand-ui-anim-on .brand-intro-hidden { visibility: hidden; }
.account-login.brand-logo { background: #f4f4f2; align-items: start; padding-top: calc(50vh + 150px); }
#brand-login-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
.account-login.brand-logo .account-card { transition: opacity .9s, transform .9s; }
html.brand-login-anim-on .account-login.brand-logo .account-card { opacity: 0; visibility: hidden; transform: translateY(8px); }
.account-login.brand-logo .account-card.brand-login-ready { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html.brand-login-anim-on .account-login.brand-logo .account-card,
  .account-login.brand-logo .account-card { opacity: 1; visibility: visible; transform: none; transition: none; }
  html.brand-ui-anim-on .brand-intro-hidden { visibility: visible; }
}