/* === HOW block (isolated) — do not touch other components === */
.how{ padding: 8px 0 24px !important; }
.how h2{ margin: 0 0 12px !important; }

/* Horizontal "pills" layout */
.how .how__list{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.how .how__list li{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 9999px !important; /* ovals */
  box-shadow: 0 2px 10px rgba(0,0,0,.03) !important;
}
.how .how__list li::marker{ content: '' !important; } /* remove native OL numbers */

.how .how__list li span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid #ddd !important;
  font-weight: 600 !important;
  background: #f9f9f9 !important;
  flex: 0 0 28px !important;
}

/* Responsive */
@media (max-width: 900px){
  .how .how__list{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px){
  .how .how__list{ grid-template-columns: 1fr !important; }
}