/* Onboarding pages — sunrise gradient shell, shared across all 3 steps. */

.sunrise-onb {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFE9D6 0%, #FDF6F0 50%, #FDF6F0 100%);
  font-family: 'Inter', -apple-system, sans-serif;
  color: #5C3A2E;
  position: relative; overflow: hidden;
}
.sunrise-onb-blob {
  position: absolute; top: -200px; right: -200px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, #FFD4B8 0%, transparent 65%);
  border-radius: 50%; filter: blur(40px); pointer-events: none;
}

/* -- Nav -- */
.sunrise-onb-nav {
  padding: 24px 32px;
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 2;
}
.sunrise-onb-brand { display: flex; align-items: center; gap: 10px; }
.sunrise-onb-brand-mark {
  width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(135deg, #FFD4B8 0%, #FFEFE2 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(224,141,111,0.2);
}
.sunrise-onb-brand-name {
  font-size: 16px; font-weight: 600; color: #3D2419; letter-spacing: -0.01em;
}
.sunrise-onb-skip {
  font-size: 13px; color: #8C5E4D; text-decoration: none;
}
.sunrise-onb-skip:hover { color: #3D2419; }

/* -- Progress -- */
.sunrise-onb-progress {
  display: flex; gap: 8px; justify-content: center; margin-top: 16px;
  position: relative; z-index: 2;
}
.sunrise-onb-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(168,122,101,0.25);
  transition: all 0.3s ease;
}
.sunrise-onb-dot.is-current {
  width: 28px;
  background: linear-gradient(135deg, #E08D6F 0%, #F4A261 100%);
}
.sunrise-onb-dot.is-done { background: #E9B384; }

/* -- Shell -- */
.sunrise-onb-inner {
  padding: 40px 32px 80px;
  max-width: 720px; margin: 0 auto;
  position: relative; z-index: 1;
}
.sunrise-onb-hero { text-align: center; margin-bottom: 32px; }
.sunrise-onb-title {
  font-family: 'Fraunces', 'Lora', serif;
  font-size: 38px; font-weight: 500;
  color: #3D2419; letter-spacing: -0.03em;
  margin: 18px 0 0; line-height: 1.05;
}
.sunrise-onb-title--mid { font-size: 30px; line-height: 1.15; }
.sunrise-onb-em {
  font-style: italic;
  background: linear-gradient(135deg, #E08D6F 0%, #F4A261 50%, #E9B384 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sunrise-onb-em-soft { font-style: italic; color: #A56D58; }
.sunrise-onb-lede {
  font-size: 16px; color: #5C3A2E; line-height: 1.6;
  margin: 22px auto 0; max-width: 540px;
}

/* -- Frame card (step 1) -- */
.sunrise-onb-frame {
  background: white; border-radius: 20px; padding: 28px;
  box-shadow: 0 4px 14px rgba(92,58,46,0.06), 0 1px 3px rgba(92,58,46,0.04);
  border: 1px solid rgba(224,141,111,0.18);
  margin-bottom: 20px;
}
.sunrise-onb-frame-grid {
  display: grid; grid-template-columns: 1fr; gap: 28px;
}
.sunrise-onb-frame-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 10px;
}
.sunrise-onb-frame-eyebrow.is-positive { color: #3D6A4F; }
.sunrise-onb-frame-eyebrow.is-warning  { color: #8E5F1F; }
.sunrise-onb-frame-list {
  list-style: none; padding: 0; margin: 0;
  font-size: 14px; color: #5C3A2E; line-height: 1.7;
}
.sunrise-onb-frame-list li { padding: 4px 0; }

/* -- Privacy strip -- */
.sunrise-onb-privacy {
  font-size: 13px; color: #8C5E4D; line-height: 1.55;
  padding: 12px 16px; background: rgba(255, 245, 235, 0.6);
  border-radius: 12px; margin-bottom: 28px; text-align: center;
  border: 1px solid rgba(224, 141, 111, 0.18);
}
.sunrise-onb-privacy--detail {
  text-align: left; background: #FFFAF4;
  padding: 14px 18px; line-height: 1.6;
}
.sunrise-onb-privacy strong { color: #3D2419; }

/* -- CTAs -- */
.sunrise-cta-large {
  font-family: inherit; font-size: 15px; font-weight: 600;
  background: linear-gradient(135deg, #E08D6F 0%, #F4A261 100%);
  color: white; border: none;
  padding: 14px 36px; border-radius: 999px;
  cursor: pointer; box-shadow: 0 8px 24px rgba(224,141,111,0.25);
  display: inline-block; text-decoration: none;
}
.sunrise-cta-large:hover { box-shadow: 0 12px 28px rgba(224,141,111,0.32); }

.sunrise-onb-actions { display: flex; align-items: center; }
.sunrise-onb-actions--center  { justify-content: center; }
.sunrise-onb-actions--split   { justify-content: space-between; }
.sunrise-onb-actions--gap     { gap: 12px; }
.sunrise-onb-back {
  font-size: 14px; color: #8C5E4D; font-weight: 500;
  padding: 12px 4px; text-decoration: none;
}
.sunrise-onb-back:hover { color: #3D2419; }
.sunrise-onb-soft-link {
  font-size: 14px; color: #8C5E4D; font-weight: 500;
  padding: 12px 16px; text-decoration: none;
}
.sunrise-onb-soft-link:hover { color: #3D2419; }

/* -- Track list (step 2) -- */
.sunrise-onb-track-list {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px;
}
.sunrise-onb-track-row {
  display: grid; grid-template-columns: 44px 1fr 56px;
  gap: 16px; align-items: center; padding: 18px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(92,58,46,0.08);
  border-radius: 16px; cursor: pointer;
  transition: all 0.2s ease;
}
.sunrise-onb-track-row.is-on {
  background: white;
  border: 2px solid #E9B384; padding: 17px;
  box-shadow: 0 4px 14px rgba(224,141,111,0.12);
}
.sunrise-onb-track-glyph {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
}
.sunrise-onb-track-label {
  font-size: 15px; font-weight: 600; color: #3D2419; margin-bottom: 4px;
}
.sunrise-onb-track-desc {
  font-size: 13px; color: #8C5E4D; line-height: 1.5;
}
.sunrise-toggle {
  width: 48px; height: 28px; border-radius: 999px;
  background: rgba(168,122,101,0.25);
  position: relative; transition: all 0.2s ease;
  margin-left: auto;
}
.sunrise-toggle.is-on {
  background: linear-gradient(135deg, #E08D6F 0%, #F4A261 100%);
}
.sunrise-toggle-knob {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: white; transition: left 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.sunrise-toggle.is-on .sunrise-toggle-knob { left: 23px; }

/* -- Scale preview (step 3) -- */
.sunrise-onb-scale {
  background: white; border-radius: 20px; padding: 32px;
  box-shadow: 0 4px 14px rgba(92,58,46,0.06), 0 1px 3px rgba(92,58,46,0.04);
  border: 1px solid rgba(224,141,111,0.18);
  margin-bottom: 20px;
}
.sunrise-onb-scale-head { text-align: center; margin-bottom: 14px; }
.sunrise-onb-scale-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 14px;
}
.sunrise-onb-scale-cell {
  padding: 14px 6px;
  background: #FFFAF4;
  border: 1px solid rgba(92,58,46,0.08);
  border-radius: 12px; text-align: center;
}
.sunrise-onb-scale-cell.is-active {
  background: #FFEFE2; border: 2px solid #E9B384; padding: 13px 5px;
}
.sunrise-onb-scale-glyph { font-size: 24px; margin-bottom: 4px; }
.sunrise-onb-scale-label { font-size: 10px; font-weight: 600; color: #8C5E4D; }
.sunrise-onb-scale-foot {
  font-size: 12px; color: #8C5E4D; text-align: center; font-style: italic;
}

.sunrise-onb-meta {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  padding: 16px; background: rgba(255, 245, 235, 0.5);
  border-radius: 12px; margin-bottom: 28px;
  font-size: 13px; color: #5C3A2E;
}
.sunrise-onb-meta-sep { display: none; color: #A87A65; }

/* -- Generic eyebrow -- */
.sunrise-eyebrow {
  font-size: 12px; font-weight: 600; color: #8C5E4D;
  letter-spacing: 0.15em; text-transform: uppercase;
}

/* -- Desktop scale-up -- */
@media (min-width: 769px) {
  .sunrise-onb-title { font-size: 56px; }
  .sunrise-onb-title--mid { font-size: 40px; }
  .sunrise-onb-frame-grid { grid-template-columns: 1fr 1fr; }
  .sunrise-onb-scale-row { grid-template-columns: repeat(7, 1fr); }
  .sunrise-onb-meta { flex-wrap: nowrap; }
  .sunrise-onb-meta-sep { display: inline; }
}