/* Onboarding — pre-flow welcome/intro screen.
   NOT a numbered step: shown once on boot before Step 0 (city), does not
   consume a progress-bar segment. Reuses .panel / .panel-inner base from
   core.css; adds intro-specific layout + the value rows + CTA.
   While the intro is up, core hides #progress-bar + #ld-toggle so the
   "N/5" frame only appears once the real flow starts. */

#intro-panel.panel {
  /* No fixed progress bar above the intro, so pull the top padding back
     to a hero-airy value rather than the step's 70px progress-bar offset. */
  padding:calc(env(safe-area-inset-top) + 48px) 0 calc(env(safe-area-inset-bottom) + 40px);
  justify-content:center;
}

.intro-inner {
  width:100%; max-width:480px; margin:0 auto;
  padding:0 20px; flex:1;
  display:flex; flex-direction:column; justify-content:center;
}

.intro-eyebrow {
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--coral);
  margin-bottom:18px;
}

.intro-title {
  font-family:var(--font-display); font-size:34px; font-weight:700;
  letter-spacing:-0.6px; color:var(--white);
  line-height:1.15; margin-bottom:14px;
}

.intro-lede {
  font-size:16px; color:var(--muted); line-height:1.55;
  margin-bottom:30px; max-width:24em;
}

/* Value rows — "what you'll get". Mono index + tight one-liner. */
.intro-values {
  display:flex; flex-direction:column; gap:16px;
  margin-bottom:32px;
}
.intro-value {
  display:flex; align-items:flex-start; gap:14px;
}
.intro-value-num {
  font-family:var(--font-mono); font-size:12px; color:var(--coral);
  flex:0 0 auto; padding-top:3px; letter-spacing:0.04em;
}
.intro-value-text {
  font-size:15px; color:var(--white); line-height:1.45;
}
.intro-value-text .iv-sub {
  display:block; font-size:13px; color:var(--muted2); margin-top:2px;
}

/* Effort line — sets the low bar before the first question. */
.intro-effort {
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em;
  color:var(--muted2);
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:26px;
}
.intro-effort .ie-dot {
  width:5px; height:5px; border-radius:50%; background:var(--coral);
  flex:0 0 auto;
}

/* CTA — reuses the coral primary look from core.css's .btn-primary but
   sits inline in the panel rather than the fixed footer (no footer on intro). */
.intro-cta {
  width:100%; padding:16px; border-radius:var(--radius-md);
  background:var(--coral); border:none; color:#fff;
  font-family:var(--font-body); font-size:16px; font-weight:600;
  cursor:pointer; transition:opacity 0.15s, transform 0.1s;
  max-width:480px;
}
.intro-cta:hover { opacity:0.88; }
.intro-cta:active { transform:scale(0.985); }

/* Subtle entrance. Gated by prefers-reduced-motion below. */
.intro-inner > * {
  opacity:0; transform:translateY(8px);
  animation:intro-rise 0.5s var(--ease-out) forwards;
}
.intro-inner > *:nth-child(1) { animation-delay:0.02s; }
.intro-inner > *:nth-child(2) { animation-delay:0.08s; }
.intro-inner > *:nth-child(3) { animation-delay:0.14s; }
.intro-inner > *:nth-child(4) { animation-delay:0.20s; }
.intro-inner > *:nth-child(5) { animation-delay:0.26s; }

@keyframes intro-rise {
  to { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-inner > * {
    opacity:1; transform:none; animation:none;
  }
}

@media (min-width:600px) {
  .intro-inner { padding:0 32px; }
  .intro-title { font-size:40px; }
}