.new-onboarding * { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased }

html.ob, html.ob body {
  height: 100%;
  margin: 0;
  background: linear-gradient(180deg, var(--white) 0%, var(--warm-cream) 100%);
}

html.ob.coral, html.ob.coral body {
  background: linear-gradient(165deg, var(--coral) 0%, var(--coral-deep) 50%, var(--coral-darker) 100%);
}

/* The native app already supplies the device frame and navigation chrome. */
html.ob[data-native="true"] .new-onboarding .ob-screen,
html.ob[data-native="true"] .new-onboarding .pw-plan-shell {
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.new-onboarding {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-b);
  color: var(--text-primary);
}

.new-onboarding .phone {
  width: 100%;
  max-width: 393px;
  height: 100dvh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Desktop preview: cap height and center with phone frame */
@media (min-height: 853px) and (min-width: 500px) {
  .new-onboarding .phone {
    max-height: 852px;
    margin-top: calc((100dvh - 852px) / 2);
    border-radius: 44px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 25px 80px rgba(0, 0, 0, .1);
  }
}

/* Keep the account's exit control visible without covering intake actions. */
html.ob body.experience-onboarding {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}
.experience-onboarding > .new-onboarding {
  flex: 1;
  min-height: 0;
  height: auto;
}
.experience-onboarding > .experience-switch {
  flex: 0 0 auto;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  font-family: var(--font-b);
  color: var(--text-primary);
  border-top: 1px solid var(--border, #ddd);
}
.experience-onboarding > .experience-switch .experience-switch-button {
  padding: 8px 12px !important;
  min-height: 40px;
  font-size: 13px !important;
}
html.ob body.experience-onboarding .new-onboarding .ob-screen,
html.ob body.experience-onboarding .new-onboarding .phone,
html.ob body.experience-onboarding .new-onboarding .pw-plan-shell {
  height: 100%;
  max-height: 100%;
  margin-top: 0;
}