/* ========================================
   How It Works — editorial, heavy display typography
   ======================================== */

.how-it-works {
  background: var(--theme-bg);
}

/* Body — extended narrative with pull-quote */
.how-it-works__body {
  border-top: 1px solid var(--theme-border-color);
  padding-top: var(--space-10);
}

@media (min-width: 768px) {
  .how-it-works__body {
    padding-top: var(--space-12);
  }
}

.how-it-works__para {
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--theme-text-primary);
  font-weight: var(--font-medium);
  margin: 0 0 var(--space-8);
}

@media (min-width: 768px) {
  .how-it-works__para {
    margin-bottom: var(--space-10);
  }
}

.how-it-works__para strong {
  font-weight: var(--font-bold);
}

/* Pull-quote — left vertical bar, larger weight */
.how-it-works__quote {
  margin: var(--space-10) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: 4px solid var(--theme-border-color);
  font-size: var(--text-heading);
  font-weight: var(--font-semibold);
  line-height: 1.4;
  color: var(--theme-text-primary);
  letter-spacing: -0.015em;
}

@media (min-width: 768px) {
  .how-it-works__quote {
    margin: var(--space-12) 0;
    padding-left: var(--space-8);
  }
}

.how-it-works__quote strong {
  font-weight: var(--font-bold);
}

/* Closer — final statement, slightly bigger weight, top divider */
.how-it-works__closer {
  margin: var(--space-10) 0 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--theme-border-color);
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  line-height: 1.55;
  color: var(--theme-text-primary);
}

@media (min-width: 768px) {
  .how-it-works__closer {
    padding-top: var(--space-10);
  }
}