/* ============================================================
   How-it-works page components · v1
   Uses yonda.v6.css tokens only. Loaded after distribution-flow.v2.css.
   ============================================================ */

/* Stage cards: icon header above the existing .steps typography */
.steps--icons li { position: relative; }
.step-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: color-mix(in srgb, var(--tally) 12%, transparent);
  color: var(--tally);
  margin-bottom: 1rem;
}
.step-ico svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* First-run: two cards, colour-coded once (violet) / repeats (tally) */
.firstrun { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 62rem) { .firstrun { grid-template-columns: 1fr 1fr; } }
.fr-card { background: var(--ink-2); padding: clamp(1.4rem, 2.8vw, 2rem); }
.fr-card--once .step-ico {
  background: color-mix(in srgb, var(--violet) 14%, transparent);
  color: var(--violet-lift);
}
.fr-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.9rem; }
.fr-head .step-ico { margin-bottom: 0; flex: none; }
.fr-head h3 { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.22rem); margin: 0; }
.fr-chip {
  margin-left: auto; flex: none;
  font: 600 0.68rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--tally-dim); color: var(--tally);
}
.fr-card--once .fr-chip { border-color: var(--violet-deep); color: var(--violet-lift); }
.fr-card p { font-size: 0.93rem; color: var(--text-mid); margin: 0; }

@media (max-width: 30rem) {
  .fr-head { flex-wrap: wrap; }
  .fr-chip { margin-left: 0; }
}