/* "How it Works" — 3-step walkthrough, doubles as screenshot showcase.
   Steps stagger in ~150ms apart once .how-steps enters view. */

.how-it-works {
  padding-block: var(--space-8);
}

.how-it-works-heading {
  text-align: center;
  margin-bottom: var(--space-7);
}

.how-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  color: var(--color-amber-text);
  font-size: 0.9375rem;
  margin-bottom: var(--space-2);
}

.how-headline {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.how-steps {
  display: grid;
  gap: var(--space-7);
  text-align: center;
}

@media (min-width: 768px) {
  .how-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  /* Grid items default to a min-width floor of their content's intrinsic
     size; the fixed-width phone-frame below was pushing that floor past
     the track width and overflowing the viewport at 768px. */
  min-width: 0;
}

.how-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-amber-text);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
}

.how-step-word {
  font-size: 1.375rem;
}

.how-step-caption {
  max-width: 32ch;
  opacity: 0.8;
  font-size: 0.9375rem;
}

.how-step-visual {
  margin-top: var(--space-4);
  /* .how-step is a flex column with align-items: center, so this child
     shrink-wraps by default and has no definite width — the phone-frame's
     `100%` inside it then has nothing real to resolve against and
     collapses. align-self: stretch gives it the column's actual width. */
  align-self: stretch;
}

.how-step-visual .phone-frame {
  width: min(220px, 60vw, 100%);
  margin-inline: auto;
}

/* Per-step stagger, gated on the parent .how-steps carrying the
   .is-visible class set by main.js's IntersectionObserver. */
.how-steps .how-step {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}

.how-steps.is-visible .how-step {
  opacity: 1;
  transform: none;
}

.how-steps.is-visible .how-step:nth-child(1) { transition-delay: 0ms; }
.how-steps.is-visible .how-step:nth-child(2) { transition-delay: 150ms; }
.how-steps.is-visible .how-step:nth-child(3) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .how-steps .how-step {
    opacity: 1;
    transform: none;
  }
}