.brand-auth-page .brand-auth {
  min-height: 100vh;
  min-height: 100svh;
}

.brand-auth-page .brand-auth-story,
.brand-auth-page .brand-auth-content {
  display: grid;
  grid-template-rows: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
  align-items: start;
  gap: 16px;
  min-height: 0;
}

.brand-auth-page .brand-auth-content {
  justify-items: center;
}

.brand-auth-page .brand-auth-language {
  justify-self: end;
  align-self: start;
  margin: 0;
}

.brand-auth-page :is(.brand-auth-story-footer, .brand-auth-content > footer) {
  align-self: end;
  margin: 0;
}

.brand-auth-motion {
  display: block;
  margin: 8px auto 0;
  border: 0;
  padding: 4px 8px;
  background: transparent;
  color: #d3dde1;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.brand-auth-motion[hidden] {
  display: none;
}

.brand-auth-page .brand-auth-story {
  min-height: 0;
}

.brand-auth-page .brand-auth-story {
  background-image:
    radial-gradient(ellipse at 45% 76%, rgb(55 118 137 / 26%), transparent 58%),
    radial-gradient(circle, rgb(187 222 230 / 17%) .65px, transparent 1px);
  background-size: auto, 12px 12px;
  padding-block: 24px;
  gap: 16px;
}

.brand-auth-page .brand-auth-story-copy {
  margin-top: 0;
}

.brand-auth-page .brand-auth-art {
  display: block;
  width: min(100%, 360px);
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.brand-auth-page .brand-auth-art::before,
.brand-auth-page .brand-auth-art::after {
  content: none;
}

.auth-circuit-links { fill: none; stroke: #87b9c8; stroke-width: 1.7; }
.auth-circuit-node { fill: #1a3c4e; stroke: #7da4b6; stroke-width: 1.6; }
.auth-circuit-divider { fill: none; stroke: #a8cadc; stroke-opacity: .65; stroke-width: 2; stroke-linecap: round; }
.auth-circuit-symbol { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.auth-circuit-highlight { fill: currentColor; fill-opacity: .14; stroke: currentColor; stroke-width: 2.6; filter: drop-shadow(0 0 5px currentColor); }
.auth-circuit-pulse { fill: var(--swapps-yellow); filter: drop-shadow(0 0 4px var(--swapps-yellow)); }

.brand-auth-art:not(.brand-auth-art--animated) .auth-circuit-pulse { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .brand-auth-motion,
  .auth-circuit-activation,
  .auth-circuit-pulse { display: none; }
}

.brand-auth-page .brand-auth-content {
  padding: 18px 24px;
}

.brand-auth-page .brand-auth-form {
  margin-top: 0;
}

.brand-auth-page .brand-auth-logo {
  width: 88px;
  margin-bottom: 12px;
}

.brand-auth-page .brand-auth-subtitle,
.brand-auth-page .brand-auth-form .field {
  margin-bottom: 10px;
}

.brand-auth-page .brand-auth-method {
  min-height: 44px;
  padding-block: 7px;
}

.brand-auth-page .brand-auth-divider,
.brand-auth-page .brand-auth-remember {
  margin-block: 12px;
}

.brand-auth-page .brand-auth-signup {
  margin: 12px 0 0;
}

@media (max-width: 900px) {
  .brand-auth-page .brand-auth-story {
    display: none;
  }
}