/* Наши правки поверх дизайнерской сборки.
   Отдельным файлом намеренно: css/site.css и css/fx.css принадлежат дизайнеру
   и при следующей итерации приедут целиком заново. Всё, что правим сами, —
   только здесь, тогда перенос новой версии не затирает наши исправления. */

/* Тёмная карточка в первом экране.
   На ширинах 721–980 px герой ещё двухколоночный: правая колонка ~250 px,
   карточка растягивается по высоте левой (у неё min-height 500 px), а
   justify-content: space-between разносит текст и кнопки по краям — между ними
   получается пустота в четверть экрана. Плюс в узкой колонке фраза ломается
   на три строки, и точка-разделитель уезжает в начало строки.

   Лечим причину, а не следствие: на этих ширинах герой переводим в одну
   колонку. Карточка становится во всю ширину, текст укладывается в строку-две,
   кнопки встают рядом, растягивать по высоте больше нечего. */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-aside { grid-template-rows: auto; }
  .platform-note { min-height: 0; gap: 20px; }
  .platform-note p { max-width: 46ch; }
  /* Кнопки в карточке по умолчанию стоят колонкой во всю ширину — это нужно
     было узкой колонке. Во всю ширину экрана они смотрятся лучше в ряд. */
  .platform-note .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .platform-note .button { width: auto; flex: 1 1 220px; }
}

/* На телефоне ряд снова разворачиваем в колонку: две кнопки рядом
   на 390 px дают по 10 символов в строку. */
@media (max-width: 560px) {
  .platform-note .hero-actions { flex-direction: column; }
  .platform-note .button { width: 100%; flex: none; }
}