.brand-side {
  position: relative;
  width: var(--left-w);
  flex: 0 0 var(--left-w);
  min-height: 100vh;
  background: var(--brand-yellow);
  overflow: hidden;
  border-bottom-right-radius: 25.2px;
}

.q-stage-wrapper {
  position: absolute;
  left: -67.2px;
  top: 9.25vh;
  width: 504.7px;
  height: 504.7px;
  pointer-events: none;
  transform-origin: 252px 252px;
  will-change: transform;
}

.q-bg-main {
  position: absolute;
  left: 0;
  top: 0;
  width: 504.7px;
  height: 504.7px;
  border-radius: 50%;
  background: rgba(255,255,255,.42);
  will-change: transform;
}

.q-bg-main::before {
  content: "";
  position: absolute;
  left: 67.9px;
  top: 70px;
  width: 367.5px;
  height: 367.5px;
  border-radius: 50%;
  background: var(--brand-yellow);
}

.q-top-orb {
  position: absolute;
  left: -42px;
  top: 2.1px;
  width: 189.504px;
  height: 189.504px;
  border-radius: 50%;
  background: rgba(255,255,255,.52);
  will-change: transform;
}

.q-tail-capsule {
  position: absolute;
  left: 0;
  top: 0;
  width: 73.5px;
  height: 147px;
  border-radius: 40.6px;
  background: rgba(255,255,255,.48);
  transform-origin: 50% 50%;
  will-change: transform;
}

.q-core-dot {
  position: absolute;
  left: 438.9px;
  top: 370.3px;
  width: 45.164px;
  height: 45.164px;
  border-radius: 50%;
  background: #ffd200;
  will-change: transform;
}

.brand-copy {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 41.9vh;
  width: 100%;
  text-align: center;
  user-select: none;
  pointer-events: none;
}

.brand-copy h1 {
  margin: 0;
  font-size: 25.9px;
  line-height: 1.18;
  font-weight: 400;
  letter-spacing: 5.18px;
  color: #000000;
}

.brand-copy p {
  margin: 21.7px 0 0;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  color: #000000;
}




/* DESKTOP_AUTH_BRAND_PREVIOUS: match reference desktop auth visual without changing mobile. */
@media (min-width: 901px) {
  body[data-route="login"] .brand-side,
  body[data-route="forgot-password"] .brand-side,
  body[data-route="register"] .brand-side,
  body[data-route="wallet-login"] .brand-side,
  body[data-route="demo"] .brand-side {
    border-bottom-right-radius: 50px;
  }

  body[data-route="login"] .q-stage-wrapper,
  body[data-route="forgot-password"] .q-stage-wrapper,
  body[data-route="register"] .q-stage-wrapper,
  body[data-route="wallet-login"] .q-stage-wrapper,
  body[data-route="demo"] .q-stage-wrapper {
    left: clamp(78px, 8.8vw, 162px);
    top: clamp(110px, 18.6vh, 164px);
    scale: clamp(1.18, 0.082vw, 1.52);
  }

  body[data-route="login"] .q-top-orb,
  body[data-route="forgot-password"] .q-top-orb,
  body[data-route="register"] .q-top-orb,
  body[data-route="wallet-login"] .q-top-orb,
  body[data-route="demo"] .q-top-orb {
    top: -20px;
  }

  body[data-route="login"] .brand-copy,
  body[data-route="forgot-password"] .brand-copy,
  body[data-route="register"] .brand-copy,
  body[data-route="wallet-login"] .brand-copy,
  body[data-route="demo"] .brand-copy {
    top: 39.1vh;
  }

  body[data-route="login"] .brand-copy h1,
  body[data-route="forgot-password"] .brand-copy h1,
  body[data-route="register"] .brand-copy h1,
  body[data-route="wallet-login"] .brand-copy h1,
  body[data-route="demo"] .brand-copy h1 {
    font-size: clamp(34px, 2.34vw, 43px);
    line-height: 1.18;
    letter-spacing: clamp(3px, .24vw, 4.4px);
  }

  body[data-route="login"] .brand-copy p,
  body[data-route="forgot-password"] .brand-copy p,
  body[data-route="register"] .brand-copy p,
  body[data-route="wallet-login"] .brand-copy p,
  body[data-route="demo"] .brand-copy p {
    margin-top: 32px;
    font-size: clamp(20px, 1.3vw, 24px);
  }
}

/* DESKTOP_AUTH_BRAND_V407: keep right login panel unchanged; center the 67% scaled left yellow visual group and enable left-side motion. */
@media (min-width: 901px) {
  body[data-route="login"] .brand-side {
    border-bottom-right-radius: 50px !important;
  }

  /* Center the scaled yellow visual group inside the left half.
     The wrapper is 504.7px and uses a center transform-origin, so 50% - 252px keeps the visual center aligned. */
  body[data-route="login"] .q-stage-wrapper {
    left: calc(50% - 252px) !important;
    top: calc(50vh - 252px) !important;
    scale: 1.08071 !important;
  }

  body[data-route="login"] .q-top-orb {
    left: -42px !important;
    top: -20px !important;
  }

  body[data-route="login"] .q-tail-capsule {
    transform: translate3d(407px, 350px, 0) rotate(-16deg) scaleX(1.02);
  }

  body[data-route="login"] .q-core-dot {
    transform: translate3d(0, 0, 0);
  }

  /* The text was scaled down to 67%; center the scaled text group as a whole. */
  body[data-route="login"] .brand-copy {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  body[data-route="login"] .brand-copy h1 {
    font-size: 25.125px !important;
    line-height: 1.16 !important;
    letter-spacing: 2.613px !important;
    font-weight: 400 !important;
  }

  body[data-route="login"] .brand-copy p {
    margin-top: 17.42px !important;
    font-size: 13.735px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }
}

/* DESKTOP_AUTH_LEFT_UNIFIED_V411: make every desktop auth left yellow side exactly match the current login/homepage left side. */
@media (min-width: 901px) {
  body[data-route="login"] .brand-side,
  body[data-route="forgot-password"] .brand-side,
  body[data-route="register"] .brand-side,
  body[data-route="wallet-login"] .brand-side,
  body[data-route="demo"] .brand-side {
    border-bottom-right-radius: 50px !important;
  }

  body[data-route="login"] .q-stage-wrapper,
  body[data-route="forgot-password"] .q-stage-wrapper,
  body[data-route="register"] .q-stage-wrapper,
  body[data-route="wallet-login"] .q-stage-wrapper,
  body[data-route="demo"] .q-stage-wrapper {
    left: calc(50% - 252px) !important;
    top: calc(50vh - 252px) !important;
    scale: 1.08071 !important;
  }

  body[data-route="login"] .q-top-orb,
  body[data-route="forgot-password"] .q-top-orb,
  body[data-route="register"] .q-top-orb,
  body[data-route="wallet-login"] .q-top-orb,
  body[data-route="demo"] .q-top-orb {
    left: -42px !important;
    top: -20px !important;
  }

  body[data-route="login"] .q-tail-capsule,
  body[data-route="forgot-password"] .q-tail-capsule,
  body[data-route="register"] .q-tail-capsule,
  body[data-route="wallet-login"] .q-tail-capsule,
  body[data-route="demo"] .q-tail-capsule {
    transform: translate3d(407px, 350px, 0) rotate(-16deg) scaleX(1.02);
  }

  body[data-route="login"] .q-core-dot,
  body[data-route="forgot-password"] .q-core-dot,
  body[data-route="register"] .q-core-dot,
  body[data-route="wallet-login"] .q-core-dot,
  body[data-route="demo"] .q-core-dot {
    transform: translate3d(0, 0, 0);
  }

  body[data-route="login"] .brand-copy,
  body[data-route="forgot-password"] .brand-copy,
  body[data-route="register"] .brand-copy,
  body[data-route="wallet-login"] .brand-copy,
  body[data-route="demo"] .brand-copy {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  body[data-route="login"] .brand-copy h1,
  body[data-route="forgot-password"] .brand-copy h1,
  body[data-route="register"] .brand-copy h1,
  body[data-route="wallet-login"] .brand-copy h1,
  body[data-route="demo"] .brand-copy h1 {
    font-size: 25.125px !important;
    line-height: 1.16 !important;
    letter-spacing: 2.613px !important;
    font-weight: 400 !important;
  }

  body[data-route="login"] .brand-copy p,
  body[data-route="forgot-password"] .brand-copy p,
  body[data-route="register"] .brand-copy p,
  body[data-route="wallet-login"] .brand-copy p,
  body[data-route="demo"] .brand-copy p {
    margin-top: 17.42px !important;
    font-size: 13.735px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }
}