/* Account onboarding v2 mirrors moonx-onboarding-v2.html. Hosted onboarding
   remains on its own legacy wizard surface. */
.account-onboarding {
  min-height: 100dvh;
  padding: 64px 26px 104px;
  background: var(--moonx-page);
  color: var(--moonx-text);
}

.account-onboarding-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 26px;
  background: rgb(3 5 12 / .86);
  border-bottom: var(--border-hairline) solid rgb(150 195 255 / .10);
  backdrop-filter: blur(14px);
}

.account-onboarding-brand {
  width: 92px;
  color: var(--moonx-text);
}

.account-onboarding .account-onboarding-brand .moonx-wordmark {
  width: 92px;
  height: auto;
}

.account-onboarding-progress {
  display: flex;
  gap: 5px;
  padding: 0;
  margin: 0 0 0 auto;
  list-style: none;
}

.account-onboarding-progress-tick {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: var(--radius-full);
  background: rgb(150 195 255 / .18);
}

.account-onboarding-progress .is-complete .account-onboarding-progress-tick,
.account-onboarding-progress .is-current .account-onboarding-progress-tick {
  background: var(--moonx-blue);
}

.account-onboarding-step-label {
  width: 92px;
  margin: 0 0 0 14px;
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.account-onboarding-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: center;
  gap: 52px;
  width: min(100%, 940px);
  min-height: calc(100dvh - 168px);
  margin: 0 auto;
}

.account-onboarding-panel {
  min-width: 0;
}

.account-onboarding-panel h1 {
  max-width: 16ch;
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.06;
}

.account-onboarding-kicker {
  margin: 0;
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.account-onboarding-copy {
  max-width: 44ch;
  margin: 13px 0 0;
  color: var(--moonx-text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.62;
}

.account-onboarding-field {
  margin-top: 22px;
}

.account-onboarding-actions {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.account-onboarding-actions .mx-btn {
  min-width: 160px;
}

.account-onboarding-roll {
  margin: 0;
  color: var(--moonx-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.account-onboarding-roll::first-letter {
  color: var(--moonx-text-secondary);
}

.account-onboarding-roll:hover {
  color: var(--moonx-blue-high);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.account-onboarding-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 5 / 7;
  width: 360px;
  padding: 22px 18px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #0e1a2e, #0a0a12 70%);
  border: var(--border-hairline) solid var(--moonx-line-strong);
  border-radius: var(--radius-20);
}

.account-onboarding-card-serial {
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
}

.account-onboarding-card-name {
  min-height: 24px;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

.account-onboarding-card-sky {
  width: 100%;
  margin: auto 0;
}

.account-onboarding-card-sky svg {
  display: block;
  width: 100%;
}

.account-onboarding-card-flair {
  position: absolute;
  inset: 0;
  display: grid;
  padding: 0 5% 17% 0;
  pointer-events: none;
  place-items: end;
}

.account-onboarding-card[data-account-onboarding-card-step="wallet_ready"] .account-onboarding-card-flair::after {
  display: grid;
  width: 40px;
  height: 40px;
  border: var(--border-hairline) solid rgb(166 255 61 / .42);
  border-radius: var(--radius-10);
  background: rgb(3 5 12 / .72);
  color: var(--moonx-green);
  content: "🔒";
  font-size: 16px;
  place-items: center;
}

.account-onboarding-card[data-account-onboarding-card-step="pin_locked"] .account-onboarding-card-flair::after {
  padding: 7px 10px;
  border: var(--border-hairline) solid var(--moonx-line-strong);
  border-radius: var(--radius-full);
  background: rgb(3 5 12 / .72);
  color: var(--moonx-blue-high);
  content: "● ● ● ● ● ●";
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
}

.account-onboarding-card[data-account-onboarding-card-step="complete"] .account-onboarding-card-flair::after {
  padding: 8px 11px;
  border: 2px solid rgb(166 255 61 / .8);
  border-radius: var(--radius-10);
  background: rgb(3 5 12 / .62);
  color: var(--moonx-green);
  content: "APPROVED";
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  transform: rotate(-8deg);
}

.account-onboarding-card-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
  border-top: var(--border-hairline) solid rgb(150 195 255 / .12);
}

.account-onboarding-card-pips {
  display: flex;
  gap: 5px;
}

.account-onboarding-card-pips i {
  width: 12px;
  height: 2px;
  border-radius: 99px;
  background: rgb(150 195 255 / .20);
  transition: background .3s ease;
}

.account-onboarding-card-word {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--moonx-text-secondary);
  text-align: right;
  white-space: nowrap;
}

.account-onboarding-card-word::after {
  content: "First light";
}

.account-onboarding-card[data-account-onboarding-card-step="wallet"] .account-onboarding-card-pips i:nth-child(-n+1),
.account-onboarding-card[data-account-onboarding-card-step="wallet_ready"] .account-onboarding-card-pips i:nth-child(-n+2),
.account-onboarding-card[data-account-onboarding-card-step="pin_intro"] .account-onboarding-card-pips i:nth-child(-n+2),
.account-onboarding-card[data-account-onboarding-card-step="pin"] .account-onboarding-card-pips i:nth-child(-n+2),
.account-onboarding-card[data-account-onboarding-card-step="pin_locked"] .account-onboarding-card-pips i:nth-child(-n+3),
.account-onboarding-card[data-account-onboarding-card-step="polymarket_approve"] .account-onboarding-card-pips i:nth-child(-n+4),
.account-onboarding-card[data-account-onboarding-card-step="complete"] .account-onboarding-card-pips i {
  background: var(--moonx-green);
}

.account-onboarding-card[data-account-onboarding-card-step="wallet"] .account-onboarding-card-word::after {
  content: "Unsealed";
}

.account-onboarding-card[data-account-onboarding-card-step="wallet_ready"] .account-onboarding-card-word::after,
.account-onboarding-card[data-account-onboarding-card-step="pin_intro"] .account-onboarding-card-word::after,
.account-onboarding-card[data-account-onboarding-card-step="pin"] .account-onboarding-card-word::after {
  content: "Sealed";
}

.account-onboarding-card[data-account-onboarding-card-step="pin_locked"] .account-onboarding-card-word::after {
  content: "Locked";
}

.account-onboarding-card[data-account-onboarding-card-step="polymarket_approve"] .account-onboarding-card-word::after {
  content: "Wired";
}

.account-onboarding-card[data-account-onboarding-card-step="complete"] .account-onboarding-card-word::after {
  content: "Cleared";
}

.account-onboarding-card[data-account-onboarding-card-step="wallet_ready"] .account-onboarding-card-word,
.account-onboarding-card[data-account-onboarding-card-step="pin_locked"] .account-onboarding-card-word,
.account-onboarding-card[data-account-onboarding-card-step="complete"] .account-onboarding-card-word {
  color: var(--moonx-green);
}

.account-onboarding-panel--center {
  width: min(100%, 620px);
  text-align: center;
}

.account-onboarding-panel--center h1 {
  max-width: none;
}

.account-onboarding-panel--center .account-onboarding-copy {
  margin-inline: auto;
}

.account-onboarding-status {
  margin-top: 26px;
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* The preparation state is one idea, centred: no duplicate fund card. */
.account-onboarding--polymarket-wallet .account-onboarding-body {
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
}

.account-onboarding--polymarket-wallet .account-onboarding-body>.account-onboarding-card {
  display: none;
}

.account-onboarding-launchpad .polymarket-wallet-stage {
  padding-top: 0;
}

.account-onboarding-launchpad .polymarket-wallet-connection {
  width: min(100%, 540px);
  margin: 30px auto 0;
}

.account-onboarding-launchpad .polymarket-wallet-status {
  margin: 26px 0 0;
}

.account-onboarding-launchpad .polymarket-wallet-note {
  max-width: 44ch;
  margin: 20px auto 0;
  color: var(--moonx-text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.62;
}

.account-onboarding-launchpad .polymarket-wallet-security-note {
  display: none;
}

@media (max-width: 860px) {
  .account-onboarding-launchpad .polymarket-wallet-connection {
    grid-template-columns: 1fr;
    justify-items: center;
    max-width: 300px;
  }

  .account-onboarding-launchpad .polymarket-wallet-brand {
    width: 100%;
  }

  .account-onboarding-launchpad .polymarket-wallet-signal {
    width: 2px;
    height: 52px;
    background: linear-gradient(180deg, #252936, #4d8aff 50%, #252936);
  }

  .account-onboarding-launchpad .polymarket-wallet-signal span {
    top: -8px;
    left: 50%;
    animation-name: account-onboarding-polymarket-wallet-transfer-vertical;
    transform: translate(-50%, 0);
  }

  @keyframes account-onboarding-polymarket-wallet-transfer-vertical {
    0% {
      opacity: 0;
      transform: translate(-50%, -2px);
    }

    18% {
      opacity: 1;
    }

    82% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate(-50%, 54px);
    }
  }
}

/* Approval keeps the source mockup's left-aligned signature panel beside the fund card. */
.account-onboarding-approval {
  max-width: 420px;
}

.account-onboarding-approval .polymarket-wallet-stage {
  padding-top: 0;
}

.account-onboarding-approval .polymarket-approval-fallback {
  width: min(100%, 420px);
  margin-top: 24px;
  padding: 30px 26px;
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: var(--radius-20);
  background: var(--moonx-card);
  box-shadow: none;
  text-align: center;
}

.account-onboarding-approval .polymarket-approval-logo {
  width: 146px;
  max-width: none;
  margin: 0 auto;
}

.account-onboarding-approval .polymarket-approval-title {
  max-width: 16ch;
  margin: 12px 0 0;
  color: var(--moonx-text);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.06;
}

.account-onboarding-approval .polymarket-approval-copy {
  max-width: 44ch;
  margin-top: 13px;
  color: var(--moonx-text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.62;
}

.account-onboarding-approval .polymarket-approval-spinner {
  display: block;
  width: 30px;
  height: 30px;
  margin: 24px auto;
  border: 2.4px solid rgb(45 123 255 / .28);
  border-top-color: var(--moonx-blue-high);
}

.account-onboarding-approval .polymarket-approval-status {
  color: var(--moonx-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

/* Completion is a compact, centred launch state. */
.account-onboarding--complete .account-onboarding-body {
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
}

.account-onboarding--complete .account-onboarding-body>.account-onboarding-card {
  display: none;
}

.account-onboarding--complete .account-onboarding-complete {
  width: 100%;
}

.account-onboarding-complete-card {
  width: min(100%, 214px);
  margin: 0 auto 26px;
}

.account-onboarding-complete-card .account-onboarding-card {
  width: 100%;
  padding: 16px 14px;
}

.account-onboarding-complete-card .account-onboarding-card-name {
  min-height: 19px;
  margin-top: 10px;
  font-size: 16px;
}

.account-onboarding-complete-card .account-onboarding-card-state {
  padding-top: 10px;
}

.account-onboarding-complete-card .account-onboarding-card-flair {
  padding: 0 7% 25% 0;
}

.account-onboarding-complete-card .account-onboarding-card[data-account-onboarding-card-step="complete"] .account-onboarding-card-flair::after {
  padding: 7px 12px;
  font-size: 8px;
}

.account-onboarding-ready {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  margin-top: 20px;
  padding: 12px 18px;
  border: var(--border-hairline) solid rgb(166 255 61 / .30);
  border-radius: var(--radius-14);
  background: rgb(166 255 61 / .09);
}

.account-onboarding-ready span {
  flex: none;
  color: var(--moonx-green);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.account-onboarding-ready p {
  margin: 0;
  color: var(--moonx-text);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
}

.account-onboarding-fine {
  max-width: 44ch;
  margin: 12px auto 0;
  color: var(--moonx-text-secondary);
  font-size: 11.5px;
  line-height: 1.55;
}

.account-onboarding-complete .mx-btn {
  margin-top: 28px;
  padding-inline: 30px;
}

/* Account wallet retains the secure controller but uses the v2 backup surface. */
.account-onboarding--wallet {
  padding: 64px 26px 104px;
}

.account-onboarding--wallet .account-onboarding-header {
  position: fixed;
}

.account-onboarding-body--wallet {
  align-items: center;
}

.account-onboarding-wallet {
  min-width: 0;
}

.account-onboarding-wallet .hosted-wizard-content {
  width: 100%;
}

.account-onboarding-wallet .hosted-wizard-title {
  max-width: none;
  margin: 12px 0 0;
  color: var(--moonx-text);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.06;
}

.account-onboarding-wallet .hosted-wizard-subtitle {
  max-width: 44ch;
  margin: 13px 0 0;
  color: var(--moonx-text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.62;
}

.account-onboarding-wallet .hosted-wallet-security-note {
  display: none;
}

.account-onboarding-wallet-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 16px;
  padding: 13px 16px;
  border: var(--border-hairline) solid rgb(255 59 107 / .54);
  border-radius: var(--radius-14);
  background: rgb(255 59 107 / .10);
  color: #ffb4c5;
  font-size: 12px;
  font-weight: 700;
}

.account-onboarding-wallet-warning-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--moonx-red);
}

.account-onboarding-wallet .hosted-wallet-surface {
  width: 100%;
  margin: 0;
  padding: 18px;
  border: var(--border-hairline) solid var(--moonx-line-strong);
  border-radius: var(--radius-20);
  background: transparent;
  box-shadow: none;
}

.account-onboarding-wallet .hosted-wallet-address {
  margin: 0;
  padding-bottom: 4px;
  border-bottom: var(--border-hairline) solid var(--moonx-line);
}

.account-onboarding-wallet .hosted-wallet-address-head {
  margin-bottom: 10px;
}

.account-onboarding-wallet .hosted-wallet-address-label,
.account-onboarding-wallet .hosted-wallet-password-label {
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.account-onboarding-wallet .hosted-wallet-address-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.account-onboarding-wallet .hosted-wallet-address-value {
  color: var(--moonx-text);
  font-size: 13px;
}

.account-onboarding-wallet .hosted-wallet-address-row .btn {
  flex: none;
  min-height: 38px;
  padding-inline: 16px;
  border: var(--border-hairline) solid var(--moonx-line-strong);
  border-radius: var(--radius-10);
  background: var(--moonx-raised);
  color: var(--moonx-text);
  font-size: 12px;
  font-weight: 700;
}

.account-onboarding-wallet [data-hosted-wallet-target="recoveryFields"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 0;
}

.account-onboarding-wallet-password-help {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--moonx-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.account-onboarding-wallet [data-hosted-wallet-target="recoveryFields"]>.hosted-wallet-strength {
  grid-column: 1;
  grid-row: 3;
  margin: -10px 0 0;
}

.account-onboarding-wallet .hosted-wallet-password-confirmation {
  grid-column: 2;
  grid-row: 2 / span 2;
  margin: 0;
}

/* Overrides the shared post-download `margin-top: 12px` bump (application.css)
   that only makes sense on the non-grid hosted-wizard layout — here it would
   drop the confirm field out of alignment with the meter row beside it. */
.account-onboarding-wallet .hosted-wallet-surface:has([data-hosted-wallet-target="confirmation"]:not([hidden])) .hosted-wallet-password-confirmation {
  margin-top: 0;
}

.account-onboarding-wallet .hosted-wallet-password-row {
  margin-top: 8px;
}

.account-onboarding-wallet .hosted-wallet-strength {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 0;
}

.account-onboarding-wallet .hosted-wallet-strength-heading {
  display: none;
}

.account-onboarding-wallet .hosted-wallet-strength-bars {
  width: 112px;
}

.account-onboarding-wallet .hosted-wallet-strength-label {
  color: var(--moonx-text-secondary);
  font-size: 11px;
}

.account-onboarding-wallet .hosted-wallet-strength-feedback {
  display: none;
}

.account-onboarding-wallet .hosted-wallet-download {
  margin-top: 14px;
}

.account-onboarding-wallet .hosted-wallet-download-note {
  display: none;
}

/* [dismiss][commit], exit on the left — same row rule as the design system's
   Ghost skin doc. "Download again" (ghost) stays its own width; "I saved my
   backup" (tinted) fills the rest. */
.account-onboarding-wallet .hosted-wallet-download--confirming {
  flex-direction: row;
  align-items: stretch;
}

.account-onboarding-wallet .hosted-wallet-download--confirming .hosted-wallet-download-primary {
  flex: 0 0 auto;
  width: auto;
}

.account-onboarding-wallet .hosted-wallet-download--confirming [data-hosted-wallet-target="export"] {
  width: auto;
  padding-inline: 22px;
  white-space: nowrap;
}

.account-onboarding-wallet .hosted-wallet-download--confirming [data-hosted-wallet-target="confirmation"] {
  flex: 1 1 auto;
  min-width: 0;
}

.account-onboarding-wallet-fine {
  margin: 12px 0 0;
  color: var(--moonx-text-secondary);
  font-size: 11.5px;
  line-height: 1.55;
}

.account-onboarding-wallet .hosted-wallet-fields+.hosted-wallet-handoff {
  margin-top: 24px;
}

.account-onboarding--wallet>.account-onboarding-card {
  display: none;
}

/* application.css imports this file before the shared hosted-wallet rules.
   Keep the source mockup's compact layout by explicitly winning only over
   those shared rules for the account screen. */
.account-onboarding.account-onboarding--wallet .account-onboarding-wallet .hosted-wizard-title {
  font-style: normal;
}

.account-onboarding.account-onboarding--wallet .account-onboarding-wallet .hosted-wallet-surface {
  display: block;
}

.account-onboarding.account-onboarding--wallet .account-onboarding-wallet .hosted-wallet-surface .hosted-wallet-address {
  margin: 0;
  padding-bottom: 12px;
}

.account-onboarding.account-onboarding--wallet .account-onboarding-wallet [data-hosted-wallet-target="recoveryFields"] {
  margin-top: var(--space-16);
}

.account-onboarding.account-onboarding--wallet .account-onboarding-wallet .hosted-wallet-download {
  margin-top: var(--space-24);
}

.account-onboarding-pin-intro {
  max-width: 360px;
}

.account-onboarding-pin-intro h2 {
  max-width: 16ch;
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.06;
}

.account-onboarding-pin-intro>p:not(.account-onboarding-kicker):not(.account-onboarding-pin-lock) {
  max-width: 34ch;
  margin: 13px 0 0;
  color: var(--moonx-text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.62;
}

.account-onboarding-pin-lock {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  color: var(--moonx-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
}

.account-onboarding-pin-lock svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--moonx-blue-high);
}

.account-onboarding-pin-intro .mx-btn {
  margin-top: 28px;
  padding-inline: 30px;
}

.account-onboarding-wallet:has(.account-onboarding-pin-intro:not([hidden])) .account-onboarding-wallet-fine {
  display: none;
}

.account-onboarding-wallet .hosted-wallet-surface:has(.account-onboarding-pin-intro:not([hidden])) {
  padding: 0;
  border: 0;
  background: transparent;
}

/* Onboarding's PIN sheet is a plain element, not a native <dialog>, so it
   supplies its own scrim and positioning — shape (Bottom Sheet below
   920px, Modal above, the fixed 452px desktop width) comes from `.mx-modal`
   / `.mx-pin-sheet` (core-components.css) since this container isn't
   wrapped in `.mx-modal-overlay`. The scrim hangs off `.account-
   onboarding--wallet` (the page's own <main>), not <body>: `.account-
   onboarding` is a stacking context (`position: relative; z-index: 1`), so
   a body-level scrim would paint over the sheet no matter the sheet's own
   z-index. */
.account-onboarding--wallet:has(.hosted-wallet-pin:not([hidden]))::before {
  position: fixed;
  inset: 0;
  z-index: 60;
  content: "";
  background: var(--moonx-overlay);
  backdrop-filter: blur(2.5px);
}

.account-onboarding--wallet .hosted-wallet-pin:not([hidden]) {
  position: fixed;
  z-index: 61;
  inset: auto 0 0 50%;
  transform: translateX(-50%);
}

@media (min-width: 920px) {
  .account-onboarding--wallet .hosted-wallet-pin:not([hidden]) {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 860px) {
  .account-onboarding-body--wallet {
    grid-template-columns: 1fr;
  }

  .account-onboarding-wallet [data-hosted-wallet-target="recoveryFields"] {
    grid-template-columns: 1fr;
  }

  .account-onboarding-wallet .hosted-wallet-password-confirmation {
    grid-column: auto;
    grid-row: auto;
  }

  .account-onboarding-wallet [data-hosted-wallet-target="resumeFields"] .hosted-wallet-download .mx-btn {
    width: 100%;
  }

  .account-onboarding-wallet .hosted-wallet-address-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .account-onboarding-wallet .hosted-wallet-address-row [data-hosted-wallet-target="regenerate"] {
    align-self: flex-start;
    width: 100%;
  }

  .account-onboarding-wallet .hosted-wallet-download {
    margin-top: 24px;
  }

  .account-onboarding-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .account-onboarding-actions .mx-btn {
    width: 100%;
  }

  .account-onboarding-roll {
    text-align: center;
  }
}

@media (max-width: 900px) {
  .account-onboarding-wallet [data-hosted-wallet-target="recoveryFields"] {
    grid-template-columns: 1fr;
  }

  .account-onboarding-wallet .hosted-wallet-password-confirmation {
    grid-column: auto;
    grid-row: auto;
  }

  .account-onboarding-wallet .hosted-wallet-download--confirming {
    flex-direction: column;
  }

  .account-onboarding-wallet .hosted-wallet-download--confirming .hosted-wallet-download-primary,
  .account-onboarding-wallet .hosted-wallet-download--confirming [data-hosted-wallet-target="export"] {
    width: 100%;
  }
}

@media (max-width: 860px) {
  .account-onboarding {
    padding: 80px 20px 108px;
  }

  .account-onboarding-body {
    grid-template-columns: 1fr;
    gap: 30px;
    width: min(100%, 620px);
  }

  .account-onboarding-card {
    order: 2;
    width: min(100%, 300px);
    margin-inline: auto;
  }

  .account-onboarding-header {
    padding-inline: 18px;
  }

  .account-onboarding-step-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-onboarding * {
    transition: none !important;
    animation: none !important;
  }
}