/* Секция «как это работает»: шесть шагов и пунктирная дорожка между ними.
   На 1440 своих вертикальных отступов у секции нет — их дают соседи. */

.how {
  position: relative;
}

.how__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.how__steps {
  position: relative;
  display: grid;
  gap: var(--space-6);
}

/* Дорожка шире контейнера и уходит влево за его край. */
.how__path { display: none; }

/* На мобильном кнопка блока прижата влево, как и весь контент колонки.
   С планшета она уходит вправо - это общий приём блоков «как это работает». */
.how__cta { align-self: flex-start; }

@media (min-width: 768px) {
  .how__cta { align-self: flex-end; }
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.step__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.step__label {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.step__number {
  font-weight: 700;
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-overline);
  /* Было --text-disabled: контраст 2.82 при норме 4.5 для мелкого текста.
     Соседний шаг той же нейтральной шкалы даёт 4.93. */
  color: var(--text-muted);
}

.step__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--text-strong);
}

@media (min-width: 768px) {
  .step__title { font-size: var(--fs-h3); }
}

/* Крупная светлая цифра справа: чисто декоративная, для скринридера скрыта. */
.step__ghost {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  flex: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sand-200);
}

.step__text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

@media (min-width: 768px) {
  .how__inner { gap: var(--space-10); }

  .step { gap: var(--space-5); }

  .step__label { gap: 10px; }

  .step__ghost {
    position: static;
    font-size: 60px;
  }

  .how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (min-width: 1024px) {
  .step__ghost { font-size: 88px; }

  /* На главной секция стоит между двумя панелями и отступ ей дают соседи.
     На продуктовых страницах она обычная, поэтому обнуление — модификатор. */
  .how--flush { padding-block: 0; }

  .how__inner { gap: var(--space-14); }

  .how__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-16) var(--space-10);
  }

  .how__path {
    position: absolute;
    top: 0;
    inset-inline-start: -21.78px;
    display: block;
    width: calc(100% + 21.78px);
    height: 384px;
    background-image: var(--decor-image, url("../../img/step-path.svg"));
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
  }
}