/* v2-how.css — плотность секции «Как это работает» (#how).

   Зачем файл: лента из четырёх шагов друг под другом занимала 1600px — два
   экрана на один блок (прямое замечание фаундера). Текст шагов трогать нельзя,
   поэтому уплотняем раскладкой: четыре шага встают в ряд одной высоты — та же
   грамматика, что у тарифов #prices, — а график кейса уходит под ленту и делит
   строку с подписью. Базовые правила .flow живут в v2-hero.css; здесь только
   десктопные переопределения, мобильная лента остаётся вертикальной. */

@media (min-width: 900px) {
  /* Четыре шага в ряд. Сетка на 1px-фоне: разделители между шагами берёт
     на себя фон контейнера, у карточек нет собственных рамок и полей. */
  .flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--rule-dark);
    border: 1px solid var(--rule-dark);
    margin: 1.5rem 0 0;
  }

  .flow-step {
    display: block;
    background: var(--ink);
    padding: 1.25rem 1.125rem;
    border-top: 0;
  }
  .flow-step:last-child { border-bottom: 0; }

  /* Бесплатный шаг сохраняет акцентную заливку, но без выступа за колонку:
     в сетке отрицательные поля сломали бы разделители. */
  .flow-free {
    margin-inline: 0;
    padding-inline: 1.125rem;
    border-radius: 0;
  }

  /* Номер и цена — в одну строку над заголовком, а не отдельной колонкой:
     колонка 200px забирала треть ширины ради двух коротких подписей. */
  .flow-head {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
  }
  /* Заголовки всех четырёх шагов должны начинаться на одной линии. Ломала её
     ровно одна причина — самая длинная подпись, см. правило ниже; при равной
     высоте шапок выравнивание даёт обычный поток, без subgrid. */
  /* Самая длинная подпись («290 ₽/мес · по желанию») при трекинге .12em
     не помещается рядом с номером и переносится на свою строку — тогда пустая
     полоса резервируется во всех четырёх шагах. Чуть плотнее трекинг только
     в этой строке: подпись встаёт рядом с номером, шапки снова в одну строку. */
  .flow-head .chip { letter-spacing: .06em; }

  .flow-step h3 { font-size: 1.0625rem; margin: 0 0 .375rem; }
  .flow-step p { font-size: .8125rem; line-height: 1.45; margin-bottom: .5rem; }
  .flow-out { font-size: .8125rem; }
  /* Подпись «На выходе» отдельной строкой — в узкой колонке она иначе
     отрывает первое слово абзаца. */
  .flow-out-label { display: block; margin: 0 0 .125rem; }

  /* График и его подпись — рядом, а не друг под другом: подпись короткая,
     под графиком она оставляла пустую полосу во всю ширину. */
  .flow-figure {
    display: grid;
    grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    margin-top: 1.25rem;
  }
  .flow-figure .score-chart { padding: .75rem; }
  .flow-figure figcaption { margin-top: 0; }
}

/* Подсветка бесплатного шага «вытекает» к краям контейнера отрицательными
   боковыми отступами. На узком экране внутренний отступ страницы меньше вылета,
   и блок выходил за viewport — страница получала 6px горизонтальной прокрутки.
   На мобильном вылет не нужен: контейнер и так во всю ширину. */
@media (max-width: 700px) {
  .flow-free { margin-inline: 0; }
}

/* От 900 до 1023px колонка шага около 200px — туда не помещается рядом
   с номером даже уплотнённая подпись, и она переносится на свою строку.
   Переносится только у четвёртого шага, поэтому его заголовок оказывался
   ниже трёх остальных. В этом диапазоне ставим подпись под номер во всех
   четырёх шагах: шапки снова одинаковой высоты, заголовки на одной линии. */
@media (min-width: 900px) and (max-width: 1023px) {
  .flow-head {
    flex-direction: column;
    align-items: flex-start;
    gap: .375rem;
  }
  /* На самой узкой колонке диапазона (900px) даже уплотнённая подпись
     переносилась внутри самого чипа — трекинг и поля ужимаем до минимума. */
  .flow-head .chip { letter-spacing: .02em; padding-inline: .5rem; }
}