/* ============================================================
   HOW IT WORKS — drei Schritte (mobile 1-Spalte, Tablet+ 3 Spalten)
   ============================================================ */

.how { padding: 64px 20px; background: var(--surface2); }
.how__list {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
.how__list li {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 24px;
  box-shadow: var(--sh);
}
.how__num {
  position: absolute; top: 16px; right: 16px;
  font-size: 11px; font-weight: 600; color: var(--text3);
  font-family: var(--mono);
}
.how__emoji { display: block; font-size: 28px; line-height: 1; margin-bottom: 14px; }
.how h3 { margin-bottom: 8px; color: var(--text); }
.how p { font-size: 15px; line-height: 1.6; color: var(--text2); margin: 0; }

/* ─── Responsive ──────────────────────────────────────────── */
@media (min-width: 640px) {
  .how__list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .how { padding: 96px 24px; }
}