/*
  Login page v8.
  A desktop-first product entrance for the material workspace.
*/

.login-body.login-redesign {
  --login-bg: #040812;
  --login-ink: #f7fbff;
  --login-text: rgba(229, 239, 251, .82);
  --login-muted: rgba(171, 193, 222, .68);
  --login-line: rgba(150, 183, 226, .18);
  --login-line-strong: rgba(141, 208, 255, .38);
  --login-surface: rgba(4, 10, 21, .86);
  --login-surface-soft: rgba(8, 18, 34, .58);
  --login-cyan: #25d8ff;
  --login-blue: #256bff;
  --login-violet: #6b5cff;
  --login-orange: #ffae42;
  --module-accent: var(--login-cyan);
  --module-accent-soft: rgba(37, 216, 255, .14);
  --module-accent-line: rgba(37, 216, 255, .45);
  background:
    radial-gradient(circle at 24% 52%, rgba(37, 216, 255, .15), transparent 29%),
    radial-gradient(circle at 76% 46%, rgba(107, 92, 255, .12), transparent 28%),
    linear-gradient(135deg, #040812 0%, #071323 48%, #030711 100%) !important;
  color: var(--login-ink);
  min-height: 100svh;
  overflow: hidden;
}

.login-body.login-redesign[data-login-module="image"] {
  --module-accent: #7c5cff;
  --module-accent-soft: rgba(124, 92, 255, .16);
  --module-accent-line: rgba(124, 92, 255, .48);
}

.login-body.login-redesign[data-login-module="spanish"] {
  --module-accent: #ffae42;
  --module-accent-soft: rgba(255, 174, 66, .14);
  --module-accent-line: rgba(255, 174, 66, .46);
}

.login-body.login-redesign[data-login-module="chat"] {
  --module-accent: #28e6a1;
  --module-accent-soft: rgba(40, 230, 161, .13);
  --module-accent-line: rgba(40, 230, 161, .43);
}

.login-body.login-redesign::before {
  background:
    linear-gradient(90deg, rgba(132, 190, 255, .07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(132, 190, 255, .055) 1px, transparent 1px),
    radial-gradient(circle at var(--login-pointer-x, 62%) var(--login-pointer-y, 42%), var(--module-accent-soft), transparent 21%);
  background-size: 92px 92px, 92px 92px, auto;
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 1;
}

.login-body.login-redesign::after {
  animation: loginAmbientSweep 9s cubic-bezier(.22, 1, .36, 1) infinite alternate;
  background:
    linear-gradient(100deg, transparent 8%, rgba(37, 216, 255, .11) 30%, rgba(255, 174, 66, .07) 48%, transparent 70%),
    radial-gradient(circle at 91% 15%, rgba(255, 255, 255, .16), transparent 9%);
  content: "";
  inset: -14% -12%;
  opacity: .72;
  pointer-events: none;
  position: fixed;
  transform: translate3d(-1.5%, 0, 0);
  z-index: 2;
}

.login-redesign .login-bg-video {
  filter: saturate(.94) contrast(1.12) brightness(.43) !important;
  height: 100% !important;
  inset: 0 !important;
  object-fit: cover !important;
  opacity: .58 !important;
  position: fixed !important;
  transform: scale(1.03);
  width: 100% !important;
}

.login-redesign .login-grid,
.login-redesign .login-orbit,
.login-redesign .login-wave {
  opacity: .07 !important;
}

.login-redesign .login-particles {
  opacity: .28 !important;
  z-index: 3;
}

.login-redesign .login-cursor {
  border: 1px solid rgba(37, 216, 255, .20);
  border-radius: 50%;
  box-shadow: 0 0 60px var(--module-accent-soft);
  height: 170px;
  mix-blend-mode: screen;
  opacity: .58;
  pointer-events: none;
  position: fixed;
  width: 170px;
  z-index: 4;
}

.login-redesign .login-stage {
  align-items: center !important;
  display: grid !important;
  gap: clamp(58px, 6vw, 96px) !important;
  grid-template-columns: minmax(520px, 640px) 424px !important;
  margin: 0 auto !important;
  max-width: 1160px !important;
  min-height: 100svh !important;
  padding: 52px 54px 50px !important;
  position: relative !important;
  width: 100% !important;
  z-index: 5 !important;
}

.login-redesign .login-stage::before {
  animation: loginBeam 5.2s cubic-bezier(.16, 1, .3, 1) infinite;
  background: linear-gradient(90deg, transparent, var(--module-accent), var(--login-blue), var(--login-orange), transparent) !important;
  border-radius: 999px;
  content: "";
  height: 2px;
  left: 28%;
  opacity: .68;
  position: absolute;
  right: 28%;
  top: 44px;
}

.login-redesign .login-stage::after {
  background: linear-gradient(90deg, transparent, var(--module-accent-line), rgba(255, 174, 66, .28), transparent);
  content: "";
  height: 1px;
  left: 52.5%;
  opacity: .46;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(72px, 9vw, 150px);
}

.login-redesign .login-hero {
  align-self: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: block !important;
  max-width: 680px !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: relative !important;
  transform-style: preserve-3d;
  z-index: 2 !important;
}

.login-redesign .login-hero::before {
  background:
    radial-gradient(circle at 34% 44%, rgba(37, 216, 255, .15), transparent 34%),
    linear-gradient(128deg, rgba(37, 216, 255, .15), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 72%);
  clip-path: polygon(0 6%, 78% 0, 100% 22%, 74% 100%, 0 89%);
  content: "";
  height: 370px;
  left: -58px;
  opacity: .36;
  pointer-events: none;
  position: absolute;
  top: 58px;
  width: min(720px, 78vw);
  z-index: 0;
}

.login-redesign .login-hero::after {
  background: linear-gradient(90deg, var(--module-accent-line), transparent 64%);
  content: "";
  height: 1px;
  left: 0;
  opacity: .76;
  pointer-events: none;
  position: absolute;
  top: 118px;
  width: min(590px, 100%);
  z-index: 1;
}

.login-redesign .login-hero > * {
  position: relative !important;
  z-index: 2 !important;
}

.login-redesign .login-brand {
  align-items: center !important;
  background: rgba(4, 10, 20, .54) !important;
  border: 1px solid rgba(218, 232, 250, .14) !important;
  border-radius: 15px !important;
  box-shadow: none !important;
  display: inline-flex !important;
  gap: 13px !important;
  justify-self: start !important;
  margin: 0 0 clamp(52px, 7vh, 76px) !important;
  padding: 11px 13px !important;
}

.login-redesign .login-brand-mark {
  align-items: center !important;
  background: linear-gradient(145deg, rgba(248, 250, 252, .98), rgba(198, 219, 247, .86)) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18), 0 0 28px var(--module-accent-soft) !important;
  color: #104996 !important;
  display: inline-flex !important;
  font-size: 19px !important;
  font-weight: 880 !important;
  height: 44px !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
  width: 44px !important;
}

.login-redesign .login-brand-mark::after {
  animation: loginMarkPing 3s ease-in-out infinite;
  background: var(--module-accent-soft);
  border-radius: inherit;
  content: "";
  inset: 4px;
  opacity: 0;
  position: absolute;
}

.login-redesign .login-brand strong {
  color: #fff !important;
  display: block !important;
  font-size: 22px !important;
  line-height: 1.08 !important;
}

.login-redesign .login-brand span {
  color: rgba(218, 231, 247, .72) !important;
  display: block !important;
  font-size: 13px !important;
}

.login-redesign .login-kicker {
  color: color-mix(in srgb, var(--module-accent) 74%, white 26%) !important;
  font-size: 14px !important;
  font-weight: 780 !important;
  letter-spacing: .04em !important;
  margin: 0 0 10px !important;
  text-transform: none !important;
}

.login-redesign .login-hero h1 {
  color: var(--login-ink) !important;
  font-size: 76px !important;
  font-weight: 890 !important;
  letter-spacing: -0.032em !important;
  line-height: 1.02 !important;
  margin: 0 !important;
  max-width: 8ch !important;
  text-shadow: 0 20px 52px rgba(2, 6, 23, .48) !important;
  text-wrap: balance;
}

.login-redesign .login-copy {
  color: var(--login-text) !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  margin: 18px 0 0 !important;
  max-width: 570px !important;
}

.login-redesign .login-product-card {
  align-items: center !important;
  background: rgba(3, 8, 17, .62) !important;
  border: 1px solid rgba(157, 187, 226, .14) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), 0 18px 44px rgba(0, 0, 0, .18) !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin: 30px 0 0 !important;
  padding: 7px !important;
  width: fit-content !important;
}

.login-redesign .login-product-card button {
  appearance: none !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: rgba(232, 243, 255, .78) !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  min-height: 38px !important;
  min-width: 92px !important;
  padding: 10px 17px !important;
  position: relative !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.login-redesign .login-product-card button:hover,
.login-redesign .login-product-card button:focus-visible,
.login-redesign .login-product-card button.is-active {
  background: var(--module-accent-soft) !important;
  border-color: var(--module-accent-line) !important;
  color: #fff !important;
  outline: 0 !important;
  transform: translateY(-1px);
}

.login-redesign .login-product-card button.is-active::after {
  background: var(--module-accent);
  border-radius: 999px;
  bottom: 5px;
  content: "";
  height: 2px;
  left: 18px;
  position: absolute;
  right: 18px;
}

.login-redesign .login-module-preview {
  background: rgba(4, 10, 20, .50) !important;
  border: 1px solid rgba(160, 194, 234, .14) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  display: grid !important;
  gap: 7px !important;
  margin-top: 16px !important;
  max-width: 570px !important;
  padding: 16px 20px !important;
  position: relative !important;
}

.login-redesign .login-module-preview::before {
  background: var(--module-accent);
  border-radius: 999px;
  box-shadow: 0 0 18px var(--module-accent-line);
  content: "";
  height: 7px;
  position: absolute;
  right: 18px;
  top: 18px;
  width: 7px;
}

.login-redesign .login-module-preview span {
  color: color-mix(in srgb, var(--module-accent) 76%, white 24%) !important;
  font-size: 12px !important;
  font-weight: 820 !important;
}

.login-redesign .login-module-preview strong {
  color: #f9fcff !important;
  font-size: 19px !important;
  letter-spacing: -.01em !important;
}

.login-redesign .login-module-preview small {
  color: rgba(218, 231, 247, .72) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  max-width: 58ch !important;
}

.login-redesign .login-signal-board {
  display: none !important;
}

.login-redesign .login-flow-line {
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  height: 2px !important;
  margin-top: 22px !important;
  max-width: 570px !important;
  overflow: hidden !important;
  position: relative !important;
}

.login-redesign .login-flow-line::before {
  background: linear-gradient(90deg, var(--module-accent), var(--login-orange), transparent);
  content: "";
  display: block;
  height: 100%;
  opacity: .56;
  width: 55%;
}

.login-redesign .login-flow-line i {
  background: linear-gradient(90deg, transparent, var(--module-accent), var(--login-orange), transparent) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 20px var(--module-accent-line) !important;
  display: block !important;
  height: 100% !important;
  position: absolute !important;
  width: 28% !important;
}

.login-redesign .login-panel {
  align-self: center !important;
  background: var(--login-surface) !important;
  border: 1px solid rgba(196, 222, 255, .20) !important;
  border-radius: 18px !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .48), inset 0 0 0 1px rgba(255, 255, 255, .025) !important;
  display: grid !important;
  gap: 18px !important;
  max-width: 424px !important;
  overflow: hidden !important;
  padding: 38px 36px 34px !important;
  position: relative !important;
  width: 100% !important;
  z-index: 3 !important;
}

.login-redesign .login-panel::before {
  animation: loginPanelRail 5.4s ease-in-out infinite;
  background: linear-gradient(90deg, var(--module-accent), var(--login-blue), var(--login-orange)) !important;
  border-radius: 999px !important;
  content: "" !important;
  height: 3px !important;
  left: 24px !important;
  position: absolute !important;
  right: 24px !important;
  top: 0 !important;
}

.login-redesign .login-panel::after {
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, .07), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 46%),
    radial-gradient(circle at 92% 90%, var(--module-accent-soft), transparent 32%) !important;
  content: "" !important;
  inset: 0 !important;
  opacity: .54 !important;
  pointer-events: none !important;
  position: absolute !important;
}

.login-redesign .login-panel > * {
  position: relative !important;
  z-index: 1 !important;
}

.login-redesign .login-panel-head {
  display: grid !important;
  gap: 13px !important;
}

.login-redesign .login-status {
  background: var(--module-accent-soft) !important;
  border: 1px solid var(--module-accent-line) !important;
  border-radius: 999px !important;
  color: #ddf8ff !important;
  display: inline-flex !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  justify-self: start !important;
  padding: 7px 14px !important;
}

.login-redesign .login-panel h2 {
  color: #fff !important;
  font-size: 46px !important;
  font-weight: 860 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.login-redesign .login-panel p {
  color: rgba(218, 231, 247, .72) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

.login-redesign .login-panel label {
  color: rgba(246, 251, 255, .92) !important;
  display: grid !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  gap: 8px !important;
}

.login-redesign .login-panel input {
  background: rgba(2, 6, 23, .66) !important;
  border: 1px solid rgba(155, 184, 219, .30) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 16px !important;
  height: 58px !important;
  padding: 0 16px !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.login-redesign .login-panel input::placeholder {
  color: rgba(218, 231, 247, .62) !important;
}

.login-redesign .login-panel input:focus {
  background: rgba(2, 6, 23, .82) !important;
  border-color: var(--module-accent) !important;
  box-shadow: 0 0 0 3px var(--module-accent-soft), 0 0 34px var(--module-accent-soft) !important;
  outline: 0 !important;
}

.login-redesign .login-panel button {
  background: linear-gradient(135deg, var(--module-accent), #2268ff 60%, #6857ff) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 34px rgba(34, 104, 255, .28) !important;
  color: #fff !important;
  cursor: pointer !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  height: 62px !important;
  margin-top: 2px !important;
  overflow: hidden !important;
  transition: filter .18s ease, box-shadow .18s ease, transform .18s ease;
}

.login-redesign .login-panel button:hover,
.login-redesign .login-panel button:focus-visible {
  box-shadow: 0 18px 42px rgba(34, 104, 255, .34) !important;
  filter: saturate(1.08) brightness(1.04) !important;
  outline: 0 !important;
  transform: translateY(-1px);
}

.login-redesign .login-panel button:active {
  transform: translateY(0) scale(.99);
}

.login-redesign .login-panel button::after {
  animation: loginButtonSweep 2.8s ease-in-out infinite;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent) !important;
}

.login-redesign .login-footnote {
  color: rgba(218, 231, 247, .60) !important;
  font-size: 12px !important;
  text-align: center !important;
}

.login-redesign .login-icp {
  background: rgba(5, 10, 20, .68) !important;
  border: 1px solid rgba(148, 184, 229, .16) !important;
  border-radius: 999px !important;
  bottom: 14px !important;
  box-shadow: none !important;
  left: 50% !important;
  padding: 6px 12px !important;
  position: fixed !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 8 !important;
}

.login-redesign .login-icp a {
  color: rgba(218, 231, 247, .70) !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

@keyframes loginAmbientSweep {
  from { transform: translate3d(-3%, -1%, 0) rotate(-.6deg); }
  to { transform: translate3d(3%, 1%, 0) rotate(.6deg); }
}

@keyframes loginBeam {
  0%, 100% { opacity: .34; transform: scaleX(.62); }
  45% { opacity: .86; transform: scaleX(1); }
}

@keyframes loginMarkPing {
  0%, 72%, 100% { opacity: 0; transform: scale(.72); }
  30% { opacity: .76; transform: scale(1.18); }
}

@keyframes loginPanelRail {
  0%, 100% { filter: hue-rotate(0deg); opacity: .82; }
  50% { filter: hue-rotate(22deg); opacity: 1; }
}

@keyframes loginButtonSweep {
  0%, 42% { transform: translateX(-130%); }
  72%, 100% { transform: translateX(130%); }
}

@media (max-height: 820px) and (min-width: 981px) {
  .login-redesign .login-stage {
    grid-template-columns: minmax(500px, 1fr) 410px !important;
    min-height: 790px !important;
    padding-top: 46px !important;
  }

  .login-redesign .login-brand {
    margin-bottom: 44px !important;
  }

  .login-redesign .login-hero h1 {
    font-size: 66px !important;
  }

  .login-redesign .login-module-preview {
    max-width: 570px !important;
  }
}

@media (max-width: 980px) {
  .login-body.login-redesign {
    overflow-y: auto;
  }

  .login-redesign .login-stage {
    gap: 34px !important;
    grid-template-columns: 1fr !important;
    min-height: 100svh !important;
    padding: 40px 22px 86px !important;
  }

  .login-redesign .login-stage::after {
    display: none;
  }

  .login-redesign .login-brand {
    margin-bottom: 42px !important;
  }

  .login-redesign .login-hero h1 {
    font-size: 48px !important;
    max-width: 9ch !important;
  }

  .login-redesign .login-product-card {
    border-radius: 16px !important;
    width: 100% !important;
  }

  .login-redesign .login-product-card button {
    flex: 1 1 42% !important;
  }

  .login-redesign .login-panel {
    max-width: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-redesign *,
  .login-redesign *::before,
  .login-redesign *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/*
  Login page v8.
  Final high-specificity overrides that neutralize older login layers from the
  shared CSS files and make the entrance feel like one product surface.
*/

body.login-body.dynamic-login.login-redesign {
  --login-shell-left: minmax(560px, 680px);
  --login-shell-right: 420px;
  background:
    radial-gradient(circle at 49% 43%, rgba(36, 184, 255, .14), transparent 28%),
    radial-gradient(circle at 78% 55%, rgba(103, 87, 255, .10), transparent 25%),
    linear-gradient(135deg, #03070f 0%, #061324 52%, #02050c 100%) !important;
}

body.login-body.dynamic-login.login-redesign::before {
  background:
    linear-gradient(90deg, rgba(127, 190, 255, .055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(127, 190, 255, .04) 1px, transparent 1px),
    radial-gradient(circle at var(--login-pointer-x, 58%) var(--login-pointer-y, 42%), var(--module-accent-soft), transparent 18%) !important;
  background-size: 104px 104px, 104px 104px, auto !important;
}

body.login-body.dynamic-login.login-redesign::after {
  opacity: .46 !important;
}

body.login-body.dynamic-login.login-redesign .login-bg-video {
  filter: saturate(.9) contrast(1.14) brightness(.38) !important;
  opacity: .62 !important;
}

body.login-body.dynamic-login.login-redesign .login-particles {
  opacity: .22 !important;
}

body.login-body.dynamic-login.login-redesign .login-cursor {
  opacity: .42 !important;
}

body.login-body.dynamic-login.login-redesign .login-stage {
  align-items: center !important;
  display: grid !important;
  gap: clamp(56px, 5vw, 78px) !important;
  grid-template-columns: var(--login-shell-left) var(--login-shell-right) !important;
  margin: 0 auto !important;
  max-width: 1240px !important;
  min-height: 100svh !important;
  padding: clamp(42px, 6vh, 72px) 48px !important;
  width: 100% !important;
}

body.login-body.dynamic-login.login-redesign .login-stage::before {
  left: 16px !important;
  right: 16px !important;
  top: clamp(32px, 6vh, 58px) !important;
}

body.login-body.dynamic-login.login-redesign .login-stage::after {
  background:
    linear-gradient(90deg, transparent, rgba(37, 216, 255, .32), rgba(255, 174, 66, .22), transparent) !important;
  left: 54.2% !important;
  top: 49% !important;
  width: clamp(84px, 8vw, 128px) !important;
}

body.login-body.dynamic-login.login-redesign .login-hero {
  align-self: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

body.login-body.dynamic-login.login-redesign .login-hero::before {
  background:
    radial-gradient(circle at 28% 45%, rgba(37, 216, 255, .18), transparent 34%),
    linear-gradient(120deg, rgba(37, 216, 255, .13), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 60%) !important;
  border: 1px solid rgba(164, 199, 241, .09) !important;
  border-radius: 28px !important;
  clip-path: none !important;
  height: 430px !important;
  left: -26px !important;
  opacity: .24 !important;
  top: 42px !important;
  width: min(660px, 74vw) !important;
}

body.login-body.dynamic-login.login-redesign .login-hero::after {
  left: 0 !important;
  opacity: .82 !important;
  top: 116px !important;
  width: min(520px, 92%) !important;
}

body.login-body.dynamic-login.login-redesign .login-brand {
  background: rgba(5, 11, 22, .58) !important;
  border: 1px solid rgba(210, 229, 255, .13) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  margin: 0 0 clamp(58px, 7vh, 82px) !important;
  padding: 10px 12px !important;
}

body.login-body.dynamic-login.login-redesign .login-brand strong {
  font-size: 21px !important;
  letter-spacing: -.01em !important;
}

body.login-body.dynamic-login.login-redesign .login-brand span {
  font-size: 13px !important;
}

body.login-body.dynamic-login.login-redesign .login-kicker {
  color: color-mix(in srgb, var(--module-accent) 82%, white 18%) !important;
  font-size: 14px !important;
  letter-spacing: .02em !important;
  margin-bottom: 10px !important;
}

body.login-body.dynamic-login.login-redesign .login-hero h1 {
  font-size: 68px !important;
  letter-spacing: -.028em !important;
  line-height: 1.05 !important;
  max-width: none !important;
  white-space: nowrap !important;
}

body.login-body.dynamic-login.login-redesign .login-copy {
  color: rgba(224, 237, 250, .80) !important;
  font-size: 18px !important;
  line-height: 1.62 !important;
  margin-top: 18px !important;
  max-width: 520px !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card {
  background: rgba(3, 9, 19, .72) !important;
  border: 1px solid rgba(163, 196, 237, .16) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035) !important;
  gap: 6px !important;
  margin-top: 34px !important;
  padding: 6px !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button {
  min-height: 40px !important;
  min-width: 100px !important;
}

body.login-body.dynamic-login.login-redesign .login-module-preview {
  background: rgba(3, 9, 20, .58) !important;
  border: 1px solid rgba(159, 195, 241, .16) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  margin-top: 18px !important;
  max-width: 520px !important;
  padding: 17px 19px !important;
}

body.login-body.dynamic-login.login-redesign .login-module-preview strong {
  font-size: 20px !important;
}

body.login-body.dynamic-login.login-redesign .login-module-preview small {
  color: rgba(219, 233, 249, .72) !important;
}

body.login-body.dynamic-login.login-redesign .login-signal-board {
  display: none !important;
}

body.login-body.dynamic-login.login-redesign .login-flow-line {
  margin-top: 24px !important;
  max-width: 520px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel {
  align-self: center !important;
  background: rgba(3, 7, 17, .88) !important;
  border: 1px solid rgba(195, 220, 255, .18) !important;
  border-radius: 20px !important;
  box-shadow:
    0 30px 76px rgba(0, 0, 0, .46),
    inset 0 0 0 1px rgba(255, 255, 255, .028) !important;
  gap: 18px !important;
  max-width: 420px !important;
  padding: 36px 34px 32px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel::before {
  left: 28px !important;
  right: 28px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel::after {
  background:
    radial-gradient(circle at 26% 4%, rgba(255, 255, 255, .065), transparent 32%),
    radial-gradient(circle at 85% 80%, var(--module-accent-soft), transparent 30%) !important;
  opacity: .54 !important;
}

body.login-body.dynamic-login.login-redesign .login-status {
  color: #dff8ff !important;
  font-size: 12px !important;
  padding: 7px 14px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel h2 {
  font-size: 44px !important;
  line-height: 1.04 !important;
}

body.login-body.dynamic-login.login-redesign .login-panel p {
  color: rgba(220, 234, 250, .72) !important;
  font-size: 14px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel label {
  color: rgba(246, 251, 255, .92) !important;
}

body.login-body.dynamic-login.login-redesign .login-panel input {
  border-radius: 13px !important;
  height: 58px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel button {
  border-radius: 13px !important;
  height: 60px !important;
}

body.login-body.dynamic-login.login-redesign .login-icp {
  bottom: 16px !important;
}

@media (max-height: 860px) and (min-width: 981px) {
  body.login-body.dynamic-login.login-redesign .login-stage {
    grid-template-columns: minmax(520px, 640px) 410px !important;
    min-height: 760px !important;
    padding-bottom: 58px !important;
    padding-top: 48px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-brand {
    margin-bottom: 50px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-hero h1 {
    font-size: 60px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-copy {
    font-size: 17px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-product-card {
    margin-top: 26px !important;
  }
}

@media (max-width: 980px) {
  body.login-body.dynamic-login.login-redesign .login-stage {
    grid-template-columns: 1fr !important;
  }

  body.login-body.dynamic-login.login-redesign .login-hero h1 {
    font-size: 46px !important;
    white-space: normal !important;
  }

  body.login-body.dynamic-login.login-redesign .login-product-card {
    border-radius: 16px !important;
  }
}

/*
  Login page v9.
  Tighten the entrance into a composed product cockpit: less poster glass,
  clearer focus, better alignment, and motion that supports the login task.
*/

body.login-body.dynamic-login.login-redesign {
  --login-shell-left: minmax(540px, 610px);
  --login-shell-right: 410px;
  --login-stage-gap: clamp(68px, 7vw, 118px);
  background:
    radial-gradient(circle at 35% 44%, rgba(34, 197, 255, .14), transparent 23%),
    radial-gradient(circle at 73% 42%, rgba(88, 101, 242, .12), transparent 22%),
    linear-gradient(135deg, #02050c 0%, #071624 48%, #030711 100%) !important;
}

body.login-body.dynamic-login.login-redesign::before {
  background:
    linear-gradient(90deg, rgba(135, 202, 255, .052) 1px, transparent 1px),
    linear-gradient(180deg, rgba(135, 202, 255, .040) 1px, transparent 1px),
    radial-gradient(circle at var(--login-pointer-x, 56%) var(--login-pointer-y, 43%), rgba(37, 216, 255, .11), transparent 17%) !important;
  background-size: 112px 112px, 112px 112px, auto !important;
}

body.login-body.dynamic-login.login-redesign::after {
  animation: loginV9Atmosphere 11s cubic-bezier(.22, 1, .36, 1) infinite alternate !important;
  background:
    linear-gradient(102deg, transparent 11%, rgba(36, 211, 255, .10) 36%, rgba(255, 174, 66, .075) 52%, transparent 72%),
    radial-gradient(circle at 92% 16%, rgba(172, 216, 255, .12), transparent 10%) !important;
  opacity: .52 !important;
}

body.login-body.dynamic-login.login-redesign .login-bg-video {
  filter: saturate(.88) contrast(1.16) brightness(.34) !important;
  opacity: .64 !important;
  transform: scale(1.035) !important;
}

body.login-body.dynamic-login.login-redesign .login-particles {
  opacity: .18 !important;
}

body.login-body.dynamic-login.login-redesign .login-cursor {
  height: 132px !important;
  opacity: .34 !important;
  width: 132px !important;
}

body.login-body.dynamic-login.login-redesign .login-stage {
  align-items: center !important;
  gap: var(--login-stage-gap) !important;
  grid-template-columns: var(--login-shell-left) var(--login-shell-right) !important;
  max-width: 1180px !important;
  padding: clamp(44px, 6vh, 72px) 52px 58px !important;
}

body.login-body.dynamic-login.login-redesign .login-stage::before {
  left: 52px !important;
  opacity: .72 !important;
  right: 52px !important;
  top: clamp(36px, 6vh, 62px) !important;
}

body.login-body.dynamic-login.login-redesign .login-stage::after {
  background:
    linear-gradient(90deg, transparent, rgba(37, 216, 255, .38), rgba(255, 174, 66, .25), transparent) !important;
  left: calc(50% + 38px) !important;
  opacity: .55 !important;
  top: 49.5% !important;
  width: clamp(76px, 7vw, 118px) !important;
}

body.login-body.dynamic-login.login-redesign .login-hero {
  max-width: 610px !important;
  padding: 0 !important;
}

body.login-body.dynamic-login.login-redesign .login-hero::before {
  backdrop-filter: blur(10px) !important;
  background:
    radial-gradient(circle at 26% 34%, rgba(37, 216, 255, .15), transparent 33%),
    linear-gradient(135deg, rgba(6, 18, 34, .78), rgba(5, 11, 24, .40)) !important;
  border: 1px solid rgba(170, 205, 246, .12) !important;
  border-radius: 18px !important;
  bottom: -24px !important;
  clip-path: none !important;
  height: auto !important;
  left: -26px !important;
  opacity: .78 !important;
  right: -22px !important;
  top: -22px !important;
  width: auto !important;
}

body.login-body.dynamic-login.login-redesign .login-hero::after {
  background:
    linear-gradient(90deg, var(--module-accent), rgba(255, 174, 66, .38), transparent) !important;
  height: 1px !important;
  left: -2px !important;
  opacity: .72 !important;
  top: 126px !important;
  width: min(470px, 82%) !important;
}

body.login-body.dynamic-login.login-redesign .login-brand {
  background: rgba(3, 8, 18, .70) !important;
  border-color: rgba(218, 235, 255, .16) !important;
  border-radius: 14px !important;
  margin: 0 0 clamp(42px, 5.8vh, 58px) !important;
  padding: 10px 12px !important;
}

body.login-body.dynamic-login.login-redesign .login-brand-mark {
  border-radius: 10px !important;
  height: 42px !important;
  width: 42px !important;
}

body.login-body.dynamic-login.login-redesign .login-brand strong {
  font-size: 20px !important;
}

body.login-body.dynamic-login.login-redesign .login-kicker {
  color: color-mix(in srgb, var(--module-accent) 86%, white 14%) !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  letter-spacing: .01em !important;
  margin: 0 0 12px !important;
}

body.login-body.dynamic-login.login-redesign .login-hero h1 {
  color: #f9fcff !important;
  font-size: clamp(58px, 5.3vw, 74px) !important;
  font-weight: 900 !important;
  letter-spacing: -.024em !important;
  line-height: .98 !important;
  max-width: 8ch !important;
  text-shadow: 0 22px 54px rgba(0, 0, 0, .44) !important;
  white-space: normal !important;
}

body.login-body.dynamic-login.login-redesign .login-copy {
  color: rgba(226, 238, 251, .82) !important;
  font-size: 17px !important;
  line-height: 1.66 !important;
  margin-top: 18px !important;
  max-width: 520px !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card {
  background: rgba(3, 8, 18, .78) !important;
  border-color: rgba(165, 199, 240, .17) !important;
  border-radius: 17px !important;
  display: grid !important;
  gap: 7px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin-top: 28px !important;
  max-width: 520px !important;
  padding: 7px !important;
  width: 100% !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button {
  border-radius: 12px !important;
  color: rgba(229, 241, 255, .78) !important;
  font-size: 13px !important;
  min-height: 42px !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button:hover,
body.login-body.dynamic-login.login-redesign .login-product-card button:focus-visible,
body.login-body.dynamic-login.login-redesign .login-product-card button.is-active {
  background:
    linear-gradient(180deg, var(--module-accent-soft), rgba(255, 255, 255, .035)) !important;
  border-color: var(--module-accent-line) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255, 255, 255, .035) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button.is-active::after {
  bottom: 6px !important;
  left: 18px !important;
  right: 18px !important;
}

body.login-body.dynamic-login.login-redesign .login-module-preview {
  background:
    linear-gradient(180deg, rgba(8, 22, 42, .72), rgba(4, 11, 24, .58)) !important;
  border-color: rgba(160, 196, 241, .18) !important;
  border-radius: 16px !important;
  margin-top: 14px !important;
  max-width: 520px !important;
  min-height: 118px !important;
  padding: 18px 20px !important;
}

body.login-body.dynamic-login.login-redesign .login-module-preview::after {
  background:
    linear-gradient(90deg, var(--module-accent), rgba(255, 174, 66, .42), transparent) !important;
  border-radius: 999px !important;
  bottom: -10px !important;
  content: "" !important;
  height: 3px !important;
  left: 0 !important;
  opacity: .62 !important;
  position: absolute !important;
  width: 48% !important;
}

body.login-body.dynamic-login.login-redesign .login-module-preview strong {
  font-size: 21px !important;
}

body.login-body.dynamic-login.login-redesign .login-signal-board {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-top: 22px !important;
  max-width: 520px !important;
}

body.login-body.dynamic-login.login-redesign .login-signal-board span {
  background: rgba(3, 9, 20, .52) !important;
  border: 1px solid rgba(160, 195, 238, .14) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 13px 14px !important;
}

body.login-body.dynamic-login.login-redesign .login-signal-board span::before {
  background: var(--module-accent) !important;
  box-shadow: 0 0 16px var(--module-accent-line) !important;
  height: 7px !important;
  right: 12px !important;
  top: 13px !important;
  width: 7px !important;
}

body.login-body.dynamic-login.login-redesign .login-signal-board strong {
  color: rgba(250, 253, 255, .96) !important;
  font-size: 13px !important;
  margin-bottom: 5px !important;
}

body.login-body.dynamic-login.login-redesign .login-signal-board small {
  color: rgba(212, 228, 246, .68) !important;
  font-size: 12px !important;
}

body.login-body.dynamic-login.login-redesign .login-flow-line {
  height: 4px !important;
  margin-top: 18px !important;
  max-width: 520px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel {
  background:
    linear-gradient(180deg, rgba(7, 14, 29, .94), rgba(3, 7, 17, .90)) !important;
  border-color: rgba(200, 225, 255, .20) !important;
  border-radius: 18px !important;
  box-shadow:
    0 32px 78px rgba(0, 0, 0, .50),
    0 0 44px rgba(37, 216, 255, .08),
    inset 0 0 0 1px rgba(255, 255, 255, .030) !important;
  gap: 17px !important;
  max-width: 410px !important;
  padding: 34px 32px 30px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel::before {
  animation: loginV9PanelRail 5.6s ease-in-out infinite !important;
  height: 3px !important;
  left: 24px !important;
  right: 24px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel::after {
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, .075), transparent 26%),
    linear-gradient(135deg, rgba(37, 216, 255, .055), transparent 32%),
    radial-gradient(circle at 88% 86%, var(--module-accent-soft), transparent 30%) !important;
  opacity: .62 !important;
}

body.login-body.dynamic-login.login-redesign .login-panel-head {
  gap: 12px !important;
}

body.login-body.dynamic-login.login-redesign .login-status {
  background: rgba(37, 216, 255, .095) !important;
  border-color: rgba(37, 216, 255, .34) !important;
  border-radius: 999px !important;
  color: #ddf9ff !important;
  font-size: 12px !important;
  padding: 7px 13px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel h2 {
  font-size: 45px !important;
  letter-spacing: -.018em !important;
}

body.login-body.dynamic-login.login-redesign .login-panel p {
  color: rgba(223, 236, 250, .72) !important;
  font-size: 14px !important;
  line-height: 1.62 !important;
}

body.login-body.dynamic-login.login-redesign .login-panel label {
  color: rgba(247, 251, 255, .92) !important;
  font-size: 14px !important;
  gap: 8px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel input {
  background: rgba(1, 6, 18, .76) !important;
  border-color: rgba(154, 186, 224, .30) !important;
  border-radius: 12px !important;
  height: 56px !important;
  padding: 0 16px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel input:focus {
  border-color: var(--module-accent) !important;
  box-shadow: 0 0 0 3px var(--module-accent-soft), 0 0 26px var(--module-accent-soft) !important;
}

body.login-body.dynamic-login.login-redesign .login-panel button {
  border-radius: 12px !important;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .30), inset 0 1px 0 rgba(255, 255, 255, .20) !important;
  height: 58px !important;
}

body.login-body.dynamic-login.login-redesign .login-footnote {
  color: rgba(220, 233, 248, .58) !important;
}

body.login-body.dynamic-login.login-redesign .login-icp {
  background: rgba(2, 6, 17, .56) !important;
  border-color: rgba(160, 195, 238, .16) !important;
  bottom: 14px !important;
}

@keyframes loginV9Atmosphere {
  from { transform: translate3d(-2.4%, -.8%, 0) rotate(-.35deg); }
  to { transform: translate3d(2.4%, .8%, 0) rotate(.35deg); }
}

@keyframes loginV9PanelRail {
  0%, 100% { opacity: .78; transform: scaleX(.74); }
  48% { opacity: 1; transform: scaleX(1); }
}

@media (max-height: 860px) and (min-width: 981px) {
  body.login-body.dynamic-login.login-redesign .login-stage {
    gap: clamp(54px, 5vw, 78px) !important;
    grid-template-columns: minmax(500px, 580px) 398px !important;
    min-height: 760px !important;
    padding-bottom: 56px !important;
    padding-top: 46px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-brand {
    margin-bottom: 40px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-hero h1 {
    font-size: 56px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-copy {
    font-size: 16px !important;
    margin-top: 14px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-product-card {
    margin-top: 22px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-module-preview {
    min-height: 104px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-signal-board {
    margin-top: 16px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-panel {
    padding: 30px 30px 28px !important;
  }
}

@media (max-width: 980px) {
  body.login-body.dynamic-login.login-redesign {
    overflow-y: auto !important;
  }

  body.login-body.dynamic-login.login-redesign .login-stage {
    gap: 28px !important;
    grid-template-columns: 1fr !important;
    padding: 38px 22px 84px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-stage::after {
    display: none !important;
  }

  body.login-body.dynamic-login.login-redesign .login-hero h1 {
    font-size: 46px !important;
    line-height: 1.05 !important;
  }

  body.login-body.dynamic-login.login-redesign .login-product-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.login-body.dynamic-login.login-redesign .login-signal-board {
    grid-template-columns: 1fr !important;
  }
}

/* Login page v10: desktop presence pass. */
@media (min-width: 1440px) and (min-height: 900px) {
  body.login-body.dynamic-login.login-redesign .login-stage {
    gap: clamp(92px, 6.2vw, 128px) !important;
    grid-template-columns: minmax(650px, 710px) 440px !important;
    max-width: 1360px !important;
    padding-left: 64px !important;
    padding-right: 64px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-stage::after {
    left: calc(50% + 44px) !important;
    width: clamp(96px, 8vw, 146px) !important;
  }

  body.login-body.dynamic-login.login-redesign .login-hero::before {
    left: -34px !important;
    right: -30px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-brand {
    margin-bottom: 56px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-hero h1 {
    font-size: 78px !important;
    max-width: 9ch !important;
  }

  body.login-body.dynamic-login.login-redesign .login-copy {
    font-size: 18px !important;
    max-width: 560px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-product-card,
  body.login-body.dynamic-login.login-redesign .login-module-preview,
  body.login-body.dynamic-login.login-redesign .login-signal-board,
  body.login-body.dynamic-login.login-redesign .login-flow-line {
    max-width: 570px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-module-preview {
    min-height: 126px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-panel {
    max-width: 440px !important;
    padding: 38px 36px 34px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-panel h2 {
    font-size: 48px !important;
  }
}

/*
  Login page v11.
  Final composition layer: one deliberate cockpit, cleaner alignment, and
  lighter motion materials that do not fight the video background.
*/

body.login-body.dynamic-login.login-redesign {
  --login-shell-left: minmax(560px, 620px);
  --login-shell-right: 420px;
  --login-stage-gap: clamp(72px, 6vw, 102px);
  background:
    radial-gradient(circle at 31% 42%, rgba(37, 216, 255, .16), transparent 24%),
    radial-gradient(circle at 72% 46%, rgba(91, 111, 255, .12), transparent 23%),
    linear-gradient(135deg, #02050b 0%, #061322 50%, #030712 100%) !important;
}

body.login-body.dynamic-login.login-redesign::before {
  background:
    linear-gradient(90deg, rgba(142, 205, 255, .050) 1px, transparent 1px),
    linear-gradient(180deg, rgba(142, 205, 255, .038) 1px, transparent 1px),
    radial-gradient(circle at var(--login-pointer-x, 54%) var(--login-pointer-y, 44%), rgba(37, 216, 255, .10), transparent 16%) !important;
  background-size: 118px 118px, 118px 118px, auto !important;
}

body.login-body.dynamic-login.login-redesign::after {
  background:
    linear-gradient(103deg, transparent 10%, rgba(37, 216, 255, .09) 36%, rgba(255, 174, 66, .075) 51%, transparent 73%),
    radial-gradient(circle at 90% 15%, rgba(201, 229, 255, .10), transparent 10%) !important;
  opacity: .48 !important;
}

body.login-body.dynamic-login.login-redesign .login-bg-video {
  filter: saturate(.92) contrast(1.18) brightness(.32) !important;
  opacity: .66 !important;
  transform: scale(1.04) !important;
}

body.login-body.dynamic-login.login-redesign .login-particles {
  opacity: .20 !important;
}

body.login-body.dynamic-login.login-redesign .login-cursor {
  height: 142px !important;
  opacity: .38 !important;
  width: 142px !important;
  will-change: transform;
}

body.login-body.dynamic-login.login-redesign .login-stage {
  align-items: center !important;
  gap: var(--login-stage-gap) !important;
  grid-template-columns: var(--login-shell-left) var(--login-shell-right) !important;
  max-width: 1210px !important;
  padding: 54px 54px 60px !important;
}

body.login-body.dynamic-login.login-redesign .login-stage::before {
  left: 9% !important;
  opacity: .68 !important;
  right: 9% !important;
  top: 48px !important;
}

body.login-body.dynamic-login.login-redesign .login-stage::after {
  background: linear-gradient(90deg, transparent, rgba(37, 216, 255, .30), rgba(255, 174, 66, .20), transparent) !important;
  left: calc(50% + 26px) !important;
  opacity: .38 !important;
  top: 50% !important;
  width: clamp(74px, 6vw, 108px) !important;
}

body.login-body.dynamic-login.login-redesign .login-hero {
  max-width: 620px !important;
  padding: 42px 38px 36px !important;
}

body.login-body.dynamic-login.login-redesign .login-hero::before {
  backdrop-filter: blur(12px) !important;
  background:
    radial-gradient(circle at 24% 24%, rgba(37, 216, 255, .16), transparent 34%),
    linear-gradient(135deg, rgba(8, 21, 39, .82), rgba(3, 9, 20, .56)) !important;
  border: 1px solid rgba(176, 209, 248, .16) !important;
  border-radius: 22px !important;
  bottom: 0 !important;
  box-shadow: 0 30px 82px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(255, 255, 255, .026) !important;
  clip-path: none !important;
  height: auto !important;
  left: 0 !important;
  opacity: .82 !important;
  right: 0 !important;
  top: 0 !important;
  width: auto !important;
}

body.login-body.dynamic-login.login-redesign .login-hero::after {
  background: linear-gradient(90deg, var(--module-accent), rgba(255, 174, 66, .36), transparent) !important;
  left: 38px !important;
  opacity: .62 !important;
  top: 149px !important;
  width: 74% !important;
}

body.login-body.dynamic-login.login-redesign .login-brand {
  margin: 0 0 42px !important;
}

body.login-body.dynamic-login.login-redesign .login-kicker {
  margin-bottom: 11px !important;
}

body.login-body.dynamic-login.login-redesign .login-hero h1 {
  font-size: 62px !important;
  letter-spacing: -.022em !important;
  line-height: 1.02 !important;
  max-width: none !important;
  white-space: nowrap !important;
}

body.login-body.dynamic-login.login-redesign .login-copy {
  font-size: 17px !important;
  line-height: 1.62 !important;
  margin-top: 16px !important;
  max-width: 510px !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card {
  border-radius: 15px !important;
  margin-top: 28px !important;
  max-width: none !important;
  width: 100% !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button {
  min-height: 41px !important;
}

body.login-body.dynamic-login.login-redesign .login-module-preview {
  border-radius: 15px !important;
  margin-top: 14px !important;
  max-width: none !important;
  min-height: 110px !important;
}

body.login-body.dynamic-login.login-redesign .login-signal-board {
  gap: 9px !important;
  margin-top: 20px !important;
  max-width: none !important;
}

body.login-body.dynamic-login.login-redesign .login-signal-board span {
  background: rgba(2, 7, 18, .48) !important;
  border-color: rgba(162, 197, 239, .13) !important;
  border-radius: 13px !important;
  padding: 12px 13px !important;
}

body.login-body.dynamic-login.login-redesign .login-flow-line {
  margin-top: 17px !important;
  max-width: 72% !important;
}

body.login-body.dynamic-login.login-redesign .login-panel {
  background: linear-gradient(180deg, rgba(6, 13, 28, .95), rgba(2, 6, 16, .92)) !important;
  border-color: rgba(201, 226, 255, .20) !important;
  border-radius: 19px !important;
  box-shadow:
    0 32px 82px rgba(0, 0, 0, .50),
    0 0 46px rgba(37, 216, 255, .075),
    inset 0 0 0 1px rgba(255, 255, 255, .030) !important;
  gap: 17px !important;
  max-width: 420px !important;
  padding: 34px 32px 30px !important;
  transform-style: preserve-3d;
  will-change: transform;
}

body.login-body.dynamic-login.login-redesign .login-panel h2 {
  font-size: 44px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel input {
  background: rgba(1, 6, 18, .78) !important;
  height: 56px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel button {
  height: 58px !important;
}

body.login-body.dynamic-login.login-redesign .login-icp {
  bottom: 16px !important;
}

/* Login v12: keep module switch labels legible inside the dark/blue rail. */
body.login-body.dynamic-login.login-redesign .login-product-card {
  background:
    linear-gradient(180deg, rgba(3, 10, 24, .88), rgba(2, 7, 18, .78)) !important;
  border-color: rgba(166, 204, 249, .24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 18px 42px rgba(0, 0, 0, .22) !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(188, 218, 255, .16) !important;
  color: rgba(241, 248, 255, .91) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .28) !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button:hover,
body.login-body.dynamic-login.login-redesign .login-product-card button:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045)) !important;
  border-color: var(--module-accent-line) !important;
  color: #ffffff !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button.is-active {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--module-accent) 38%, #0b1630 62%), rgba(54, 94, 234, .34)) !important;
  border-color: color-mix(in srgb, var(--module-accent) 68%, white 32%) !important;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--module-accent) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  color: #ffffff !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button.is-active::after {
  background: color-mix(in srgb, var(--module-accent) 82%, white 18%) !important;
  bottom: 5px !important;
  box-shadow: 0 0 14px var(--module-accent-line) !important;
  height: 3px !important;
}

@media (min-width: 1440px) and (min-height: 900px) {
  body.login-body.dynamic-login.login-redesign .login-stage {
    gap: clamp(84px, 5.7vw, 112px) !important;
    grid-template-columns: minmax(620px, 660px) 430px !important;
    max-width: 1300px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-hero h1 {
    font-size: 68px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-panel {
    max-width: 430px !important;
  }
}

@media (max-height: 860px) and (min-width: 981px) {
  body.login-body.dynamic-login.login-redesign .login-stage {
    gap: 58px !important;
    grid-template-columns: minmax(520px, 580px) 398px !important;
    padding-bottom: 56px !important;
    padding-top: 46px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-hero {
    padding: 34px 32px 30px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-hero::after {
    left: 32px !important;
    top: 128px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-brand {
    margin-bottom: 32px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-hero h1 {
    font-size: 52px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-module-preview {
    min-height: 100px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-panel {
    padding: 30px 30px 28px !important;
  }
}

@media (max-width: 980px) {
  body.login-body.dynamic-login.login-redesign .login-stage {
    grid-template-columns: 1fr !important;
  }

  body.login-body.dynamic-login.login-redesign .login-hero {
    padding: 30px 24px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-hero h1 {
    font-size: 44px !important;
    white-space: normal !important;
  }
}

/* Login v14: unified cockpit layout, tighter hierarchy, clearer module controls. */
body.login-body.dynamic-login.login-redesign {
  --login-shell-left: minmax(560px, 660px);
  --login-shell-right: 430px;
  --login-stage-gap: clamp(58px, 5.4vw, 92px);
  background:
    radial-gradient(circle at 26% 52%, rgba(37, 216, 255, .14), transparent 27%),
    radial-gradient(circle at 76% 40%, rgba(92, 93, 255, .10), transparent 25%),
    linear-gradient(135deg, #030712 0%, #071522 48%, #02050c 100%) !important;
}

body.login-body.dynamic-login.login-redesign::before {
  background:
    linear-gradient(90deg, rgba(142, 205, 255, .040) 1px, transparent 1px),
    linear-gradient(180deg, rgba(142, 205, 255, .030) 1px, transparent 1px),
    radial-gradient(circle at var(--login-pointer-x, 56%) var(--login-pointer-y, 44%), var(--module-accent-soft), transparent 15%) !important;
  background-size: 116px 116px, 116px 116px, auto !important;
}

body.login-body.dynamic-login.login-redesign::after {
  opacity: .34 !important;
}

body.login-body.dynamic-login.login-redesign .login-bg-video {
  filter: saturate(.88) contrast(1.16) brightness(.30) !important;
  opacity: .58 !important;
}

body.login-body.dynamic-login.login-redesign .login-stage {
  gap: var(--login-stage-gap) !important;
  grid-template-columns: var(--login-shell-left) var(--login-shell-right) !important;
  max-width: 1260px !important;
  min-height: 100svh !important;
  padding: 54px 44px 54px !important;
}

body.login-body.dynamic-login.login-redesign .login-stage::before {
  left: 12% !important;
  opacity: .44 !important;
  right: 12% !important;
  top: 48px !important;
}

body.login-body.dynamic-login.login-redesign .login-stage::after {
  display: none !important;
}

body.login-body.dynamic-login.login-redesign .login-hero {
  max-width: 660px !important;
  padding: 30px 34px 30px !important;
}

body.login-body.dynamic-login.login-redesign .login-hero::before {
  background:
    radial-gradient(circle at 20% 34%, rgba(37, 216, 255, .14), transparent 34%),
    linear-gradient(135deg, rgba(8, 20, 39, .80), rgba(4, 10, 21, .58)) !important;
  border: 1px solid rgba(176, 209, 248, .14) !important;
  border-radius: 20px !important;
  bottom: 0 !important;
  box-shadow:
    0 26px 72px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .045) !important;
  clip-path: none !important;
  height: auto !important;
  left: 0 !important;
  opacity: .78 !important;
  right: 0 !important;
  top: 0 !important;
  width: auto !important;
}

body.login-body.dynamic-login.login-redesign .login-hero::after {
  background: linear-gradient(90deg, var(--module-accent), rgba(255, 174, 66, .34), transparent) !important;
  left: 34px !important;
  opacity: .58 !important;
  top: 118px !important;
  width: 70% !important;
}

body.login-body.dynamic-login.login-redesign .login-brand {
  background: rgba(2, 8, 19, .48) !important;
  border-color: rgba(220, 236, 255, .13) !important;
  border-radius: 14px !important;
  margin: 0 0 32px !important;
  padding: 10px 12px !important;
}

body.login-body.dynamic-login.login-redesign .login-brand-mark {
  height: 42px !important;
  width: 42px !important;
}

body.login-body.dynamic-login.login-redesign .login-kicker {
  color: color-mix(in srgb, var(--module-accent) 78%, white 22%) !important;
  font-size: 13px !important;
  margin-bottom: 10px !important;
}

body.login-body.dynamic-login.login-redesign .login-hero h1 {
  font-size: 58px !important;
  letter-spacing: -.018em !important;
  line-height: 1.04 !important;
  max-width: none !important;
  text-shadow: 0 18px 46px rgba(2, 6, 23, .38) !important;
  white-space: nowrap !important;
}

body.login-body.dynamic-login.login-redesign .login-copy {
  color: rgba(229, 239, 251, .78) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  margin-top: 15px !important;
  max-width: 520px !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card {
  background: rgba(2, 8, 19, .72) !important;
  border-color: rgba(185, 217, 255, .20) !important;
  border-radius: 14px !important;
  display: grid !important;
  gap: 6px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin-top: 26px !important;
  padding: 6px !important;
  width: 100% !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(188, 218, 255, .13) !important;
  color: rgba(241, 248, 255, .90) !important;
  min-height: 40px !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  text-align: center !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button.is-active {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--module-accent) 35%, #101c33 65%), rgba(45, 91, 232, .30)) !important;
  border-color: color-mix(in srgb, var(--module-accent) 62%, white 38%) !important;
  color: #fff !important;
}

body.login-body.dynamic-login.login-redesign .login-module-preview {
  background: rgba(2, 8, 19, .48) !important;
  border-color: rgba(185, 217, 255, .15) !important;
  border-radius: 14px !important;
  margin-top: 13px !important;
  min-height: 94px !important;
  padding: 15px 18px !important;
}

body.login-body.dynamic-login.login-redesign .login-module-preview strong {
  font-size: 22px !important;
}

body.login-body.dynamic-login.login-redesign .login-module-preview small {
  color: rgba(218, 231, 247, .74) !important;
  font-size: 13px !important;
}

body.login-body.dynamic-login.login-redesign .login-signal-board {
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-top: 13px !important;
}

body.login-body.dynamic-login.login-redesign .login-signal-board span {
  background: rgba(2, 8, 19, .46) !important;
  border: 1px solid rgba(185, 217, 255, .13) !important;
  border-radius: 12px !important;
  padding: 11px 12px !important;
}

body.login-body.dynamic-login.login-redesign .login-signal-board strong {
  color: rgba(246, 251, 255, .94) !important;
  font-size: 13px !important;
}

body.login-body.dynamic-login.login-redesign .login-signal-board small {
  color: rgba(190, 209, 232, .66) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body.login-body.dynamic-login.login-redesign .login-flow-line {
  height: 2px !important;
  margin-top: 14px !important;
  max-width: 72% !important;
}

body.login-body.dynamic-login.login-redesign .login-panel {
  background:
    radial-gradient(circle at 18% 0, rgba(37, 216, 255, .10), transparent 28%),
    linear-gradient(180deg, rgba(6, 13, 29, .97), rgba(2, 6, 17, .94)) !important;
  border-color: rgba(201, 226, 255, .22) !important;
  border-radius: 18px !important;
  box-shadow:
    0 28px 78px rgba(0, 0, 0, .46),
    0 0 42px rgba(37, 216, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  gap: 16px !important;
  max-width: 430px !important;
  padding: 34px 32px 30px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel::after {
  opacity: .38 !important;
}

body.login-body.dynamic-login.login-redesign .login-status {
  font-size: 12px !important;
  padding: 7px 13px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel h2 {
  font-size: 42px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel p {
  color: rgba(218, 231, 247, .70) !important;
  font-size: 14px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel label {
  gap: 7px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel input {
  border-color: rgba(155, 184, 219, .28) !important;
  border-radius: 11px !important;
  height: 54px !important;
}

body.login-body.dynamic-login.login-redesign .login-panel button {
  border-radius: 11px !important;
  height: 56px !important;
}

body.login-body.dynamic-login.login-redesign .login-icp {
  background: rgba(5, 10, 20, .72) !important;
  bottom: 12px !important;
}

@media (min-width: 1440px) and (min-height: 900px) {
  body.login-body.dynamic-login.login-redesign .login-stage {
    grid-template-columns: minmax(600px, 660px) 430px !important;
    max-width: 1260px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-hero h1 {
    font-size: 60px !important;
  }
}

@media (max-height: 860px) and (min-width: 981px) {
  body.login-body.dynamic-login.login-redesign .login-stage {
    gap: 54px !important;
    grid-template-columns: minmax(520px, 600px) 404px !important;
    padding-bottom: 46px !important;
    padding-top: 44px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-hero {
    padding: 28px 30px 26px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-hero::after {
    left: 30px !important;
    top: 110px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-brand {
    margin-bottom: 28px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-hero h1 {
    font-size: 50px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-copy {
    font-size: 16px !important;
    margin-top: 12px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-module-preview {
    min-height: 88px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-panel {
    padding: 30px 30px 28px !important;
  }
}

/* Login v15: readable module controls and one tighter product composition. */
body.login-body.dynamic-login.login-redesign {
  --login-shell-left: minmax(580px, 660px);
  --login-shell-right: 420px;
  --login-stage-gap: clamp(62px, 5vw, 86px);
}

body.login-body.dynamic-login.login-redesign .login-stage {
  gap: var(--login-stage-gap) !important;
  max-width: 1250px !important;
}

body.login-body.dynamic-login.login-redesign .login-hero {
  padding: 32px 34px 32px !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card {
  background:
    linear-gradient(180deg, rgba(7, 18, 37, .88), rgba(2, 8, 20, .82)) !important;
  border: 1px solid rgba(174, 211, 255, .24) !important;
  border-radius: 18px !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  gap: 8px !important;
  margin-top: 26px !important;
  padding: 8px !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button {
  align-items: center !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)) !important;
  border: 1px solid rgba(194, 224, 255, .22) !important;
  border-radius: 13px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
  color: rgba(247, 251, 255, .96) !important;
  display: inline-flex !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  min-height: 46px !important;
  padding: 11px 10px !important;
  text-shadow: none !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button::before {
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 8px !important;
  color: currentColor !important;
  display: inline-flex !important;
  flex: 0 0 22px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  height: 22px !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin-right: 7px !important;
  place-items: center !important;
  width: 22px !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button[data-login-module="voice"]::before {
  content: "VO";
}

body.login-body.dynamic-login.login-redesign .login-product-card button[data-login-module="image"]::before {
  content: "IM";
}

body.login-body.dynamic-login.login-redesign .login-product-card button[data-login-module="spanish"]::before {
  content: "ES";
}

body.login-body.dynamic-login.login-redesign .login-product-card button[data-login-module="chat"]::before {
  content: "AI";
}

body.login-body.dynamic-login.login-redesign .login-product-card button:hover,
body.login-body.dynamic-login.login-redesign .login-product-card button:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .055)) !important;
  border-color: color-mix(in srgb, var(--module-accent) 58%, white 42%) !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button.is-active {
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .20), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--module-accent) 46%, #0d1a33 54%), rgba(55, 92, 235, .40)) !important;
  border-color: color-mix(in srgb, var(--module-accent) 72%, white 28%) !important;
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--module-accent) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
  color: #ffffff !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button.is-active::before {
  background: rgba(255, 255, 255, .18) !important;
  border-color: rgba(255, 255, 255, .24) !important;
}

body.login-body.dynamic-login.login-redesign .login-product-card button.is-active::after {
  background: color-mix(in srgb, var(--module-accent) 86%, white 14%) !important;
  bottom: 5px !important;
  box-shadow: 0 0 18px var(--module-accent-line) !important;
  height: 3px !important;
  left: 34px !important;
  right: 16px !important;
}

body.login-body.dynamic-login.login-redesign .login-module-preview {
  background:
    radial-gradient(circle at 92% 12%, var(--module-accent-soft), transparent 25%),
    linear-gradient(180deg, rgba(6, 17, 35, .74), rgba(2, 8, 19, .60)) !important;
  border-color: rgba(185, 217, 255, .20) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

body.login-body.dynamic-login.login-redesign .login-panel {
  max-width: 420px !important;
}

@media (max-height: 860px) and (min-width: 981px) {
  body.login-body.dynamic-login.login-redesign .login-stage {
    grid-template-columns: minmax(540px, 610px) 404px !important;
  }

  body.login-body.dynamic-login.login-redesign .login-product-card button {
    font-size: 13px !important;
    min-height: 42px !important;
  }
}

@media (max-width: 980px) {
  body.login-body.dynamic-login.login-redesign .login-product-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}