/* ==========================================================================
   HOW IT WORKS — 3 steps, horizontal flow with connectors
   ========================================================================== */

.how-it-works {
  background: var(--bg-1);
  padding: var(--space-section) 0;
}

.how-it-works .section-title {
  text-align: center;
}

.how-it-works .section-title::after {
  margin-left: auto;
  margin-right: auto;
}

/* Steps row */
.how-it-works__steps {
  display: flex;
  justify-content: space-between;
  position: relative;
}

/* ==========================================================================
   STEP CARD
   ========================================================================== */

.step {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 0 var(--space-lg);
}

/* Connector line between steps (desktop) */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 2.5rem;
  right: 0;
  width: calc(100% - 4rem);
  height: 1px;
  background: var(--border);
  transform: translateX(50%);
}

/* Large step number — watermark style */
.step__number {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--primary);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: var(--space-sm);
}

/* Step title */
.step__title {
  font-family: var(--font-heading);
  font-size: var(--text-subsection);
  font-weight: 600;
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

/* Step description */
.step__desc {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  margin-top: var(--space-sm);
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   RESPONSIVE — Vertical stack on mobile
   ========================================================================== */

@media (max-width: 768px) {
  .how-it-works__steps {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .step {
    padding: 0;
    padding-left: var(--space-xl);
    text-align: left;
  }

  /* Vertical connector on mobile */
  .step:not(:last-child)::after {
    top: auto;
    right: auto;
    left: 0.75rem;
    bottom: calc(var(--space-xl) * -1);
    width: 1px;
    height: var(--space-xl);
    transform: none;
  }

  .step__desc {
    margin-left: 0;
  }
}