/* ═══════════════════════════════════════════
   Onboarding Page
   ═══════════════════════════════════════════ */
#onboarding-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--warm), var(--sage-p)); padding: 2rem;
}
.onb-card {
  background: white; border-radius: 28px; padding: 3rem;
  max-width: 520px; width: 100%; box-shadow: var(--shadow-lg);
}
.onb-step-dots { display: flex; gap: .5rem; margin-bottom: 2rem }
.onb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: all .3s }
.onb-dot.active { background: var(--rose); width: 24px; border-radius: 100px }
.onb-dot.done { background: var(--sage) }
.onb-title { font-family: var(--serif); font-size: 2rem; font-weight: 400; margin-bottom: .5rem }
.onb-sub { color: var(--mid); font-size: .92rem; margin-bottom: 2rem; line-height: 1.7 }
.onb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem }
.onb-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem }
.btn-onb-back {
  padding: .7rem 1.5rem; background: transparent; border: 1.5px solid var(--border);
  border-radius: 10px; font-size: .85rem; font-weight: 500; color: var(--mid); transition: all .2s;
}
.btn-onb-back:hover { border-color: var(--mid) }
.btn-onb-next {
  padding: .7rem 1.8rem; background: var(--rose); color: white; border: none;
  border-radius: 10px; font-size: .85rem; font-weight: 600; transition: all .2s;
}
.btn-onb-next:hover { background: #c0667a; transform: translateY(-1px) }
.week-slider-wrap { margin-bottom: 1.5rem }
.week-slider { width: 100%; accent-color: var(--rose); height: 6px; margin: .75rem 0 }
.week-display { text-align: center; font-family: var(--serif); font-size: 3rem; font-weight: 500; color: var(--rose) }
.week-display span { font-size: 1rem; color: var(--mid); font-family: var(--sans) }