/* How It Works — mockup pumtl23-how-it-works-desktop [3:912].
 * Hero [3:939] with a visual path, then four steps, alternating text / UI example. */

.hero--doc { padding-block: var(--space-80); }
.hero__path { display: flex; flex-direction: column; gap: var(--space-16); width: 320px; flex: none; }
.eyebrow--muted { color: var(--color-muted); }
.path { display: grid; gap: var(--space-12); }
.path__step { display: flex; align-items: center; gap: var(--space-12); }
.path__step::after { content: ""; width: 24px; height: 1px; background: var(--color-brand); }
.path__step:last-child::after { display: none; }
.glass-card {
  display: inline-flex; align-items: center; padding: var(--space-10) var(--space-14, 14px);
  border-radius: var(--radius-xl);
  background: var(--fill-glass);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .102);
  font-size: var(--fs-caption); font-weight: 700; line-height: 15.31px;
  text-transform: uppercase; color: var(--color-white);
}

.step { padding: var(--space-80) var(--container-pad); }

.step__split { display: flex; gap: var(--space-64); align-items: flex-start; }
.step__text { width: 520px; flex: none; display: flex; flex-direction: column; gap: var(--space-16); }
.step__num {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h4); line-height: 41px; color: var(--color-brand);
}
.step__title {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); line-height: 51px; text-transform: uppercase; color: var(--color-white);
}
.step__body { margin: 0; font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }
.step__caption { margin: 0; font-size: var(--fs-small); line-height: 17px; color: var(--color-muted-2); }

.step__visual { flex: 1; display: flex; flex-direction: column; gap: var(--space-16); }
.example-card {
  display: grid; gap: var(--space-8);
  padding: var(--space-20); border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border-brand);
}
.example-card--light { background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-border-light); }
.example-card__row {
  display: flex; justify-content: space-between; margin: 0;
  font-size: var(--fs-small); line-height: 17px; color: var(--color-muted);
}
.example-card .market-row__odds { margin-top: var(--space-8); }
.odd--selected { background: var(--color-brand); box-shadow: none; }
.odd--selected .odd__name { color: rgba(255, 255, 255, .8); }
.odd--selected .odd__value { color: #fff; }

.checklist { display: grid; gap: var(--space-12); }
.checklist li {
  display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-16); border-radius: var(--radius-xl);
  background: var(--fill-glass-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  font-size: var(--fs-ui); line-height: 18px; color: var(--color-white);
}
.checklist li::before {
  content: "✓"; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: rgba(124, 58, 237, .2); color: var(--color-brand-light); font-size: var(--fs-caption);
}

@media (max-width: 1199px) {
  .step__split { flex-direction: column; }
  .step__text { width: 100%; }
  .hero__path { width: 100%; }
}

/* ── мобильный фрейм [115:125] ────────────────────────────────────────────
   Герой pad 48/16 gap 24, заголовок 40/42; шаг pad 48/16 gap 24, номер 44/56,
   заголовок шага 32/36.8, текст 14/21, демо-карточка pad 16 gap 16. */
@media (max-width: 767px) {
  .hero--doc { padding: var(--space-48) var(--container-pad-mobile); }
  .hero--doc .hero__headline { gap: var(--space-4); font-size: 40px; line-height: 42px; }
  .hero--doc .hero__lead { font-size: var(--fs-ui); line-height: 21px; }
  .hero__watermark { font-size: 72px; line-height: 92px; top: 8px; }
  .hero__path { width: 100%; }

  .step { padding: var(--space-48) var(--container-pad-mobile); }
  .step__split { flex-direction: column; gap: var(--space-24); }
  .step__text { width: 100%; gap: var(--space-16); }
  .step__num { font-size: 44px; line-height: 56.14px; }
  .step__title { font-size: var(--fs-h4); line-height: 36.8px; }
  .step__body { font-size: var(--fs-ui); line-height: 21px; }
  .step__visual { gap: var(--space-8); }
  .example-card { padding: var(--space-16); gap: var(--space-16); }
  .checklist li { padding: var(--space-12) var(--space-16); font-size: var(--fs-small); }
}

@media (max-width: 767px) {
  /* Мобильный фрейм героя несёт только заголовок и лид: схема «visual path»
     и демонстрация купона на шаге 03 в него не входят. */
  .hero__path { display: none; }
  .step:nth-of-type(3) .step__visual { display: none; }
  /* Чек-лист шага 04: строки 44px с зазором 10, без карточного фона. */
  .checklist { gap: var(--space-10); }
  .checklist li {
    min-height: 44px; padding: 0 var(--space-16); gap: var(--space-12);
    font-size: var(--fs-small); line-height: 17px;
  }
}

@media (max-width: 767px) {
  /* В колонке flex-start ужимает ширину по контенту — демо-карточка должна
     занимать всю колонку, как в мобильном фрейме (358). */
  .step__split { align-items: stretch; }
  .step--slip .step__visual { display: none; }
  .example-card .odd { min-height: 44px; padding: 5px var(--space-12); }
}