.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%);
}

.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);
  }
}