/* HIW — figure anchored to section right (matches .faq-character--right) */

/* Yellow / purple radial glow sitting behind the GTA character (Figma accent) */
@media (min-width: 769px) {
  .hiw-stage::after {
    content: '';
    position: absolute;
    right: max(-80px, -5.5vw);
    bottom: -40px;
    width: min(760px, 55vw);
    height: min(920px, 72vw);
    background:
      radial-gradient(ellipse 52% 60% at 56% 52%, rgba(253, 224, 71, 0.44) 0%, transparent 58%),
      radial-gradient(ellipse 68% 50% at 50% 36%, rgba(147, 51, 234, 0.52) 0%, transparent 62%),
      radial-gradient(ellipse 45% 45% at 62% 62%, rgba(240, 171, 252, 0.28) 0%, transparent 60%);
    filter: blur(40px);
    mix-blend-mode: screen;
    z-index: 2;
    pointer-events: none;
  }
}

.hiw-stage {
  width: min(var(--figma-hiw-max), calc(100% - 2 * var(--container-px))) !important;
  max-width: var(--figma-hiw-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
}

.hiw-content,
.hiw-inner,
.hiw-steps {
  max-width: var(--figma-hiw-steps) !important;
}

@media (min-width: 769px) {
  .hiw-steps-col,
  .hiw-content,
  .hiw-inner {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 769px) {
  #how-it-works,
  .mb-hiw-promo-bridge {
    overflow: visible !important;
  }

  .mb-hiw-promo-bridge > .hiw-figure,
  .mb-hiw-promo-bridge > .hiw-figure--right,
  .mb-hiw-promo-bridge > .mb-gta-figure {
    position: absolute !important;
    right: max(-64px, -4vw) !important;
    left: auto !important;
    bottom: 0 !important;
    transform: none !important;
    height: 100% !important;
    width: auto !important;
    max-width: var(--hiw-figure-width) !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    z-index: 5 !important;
  }

  #how-it-works .mb-shade--hiw {
    position: absolute !important;
    right: max(-48px, -3vw) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
}

@media (max-width: 768px) {
  #how-it-works,
  .mb-hiw-promo-bridge {
    overflow: visible !important;
  }

  .mb-hiw-promo-bridge {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    width: 100% !important;
    max-width: none !important;
    padding-right: 0 !important;
  }

  .mb-hiw-promo-bridge > .hiw-figure,
  .mb-hiw-promo-bridge > .hiw-figure--right,
  .mb-hiw-promo-bridge > .mb-gta-figure,
  #how-it-works .hiw-figure,
  #how-it-works .hiw-figure--right {
    position: relative !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: min(300px, 78vw) !important;
    max-width: none !important;
    max-height: min(380px, 48vh) !important;
    height: auto !important;
    margin: 28px 0 0 !important;
    object-position: right bottom !important;
    display: block !important;
    z-index: 1 !important;
  }

  #how-it-works .mb-shade--hiw {
    display: none !important;
  }

  .hiw-inner {
    padding-right: 0 !important;
  }
}