/* Форма в блоке «Первое занятие — бесплатно» */
.tb-free-form {
  max-width: 440px;
  margin-top: 200px;
}

/* Одна колонка (< 1024px): форма идёт после картинки, без большого отступа */
@media (max-width: 1023.98px) {
  .tb-free-form {
    max-width: none;
    width: 100%;
    margin-top: 0;
  }
}

/* «Как проходят занятия»: плашка «6 шагов» не ломается на две строки */
.tb-steps-lead span { white-space: nowrap; }

@media (max-width: 639.98px) {
  .tb-steps-lead {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 10px;
  }
}

/* Финальный призыв: на телефоне показываем мультяшек (они в правой части фона) */
@media (max-width: 767.98px) {
  .tb-cta {
    min-height: 600px;
    background-position: 69% 100%;
  }
  .tb-cta > .relative {
    padding-top: 64px;
    padding-bottom: 0;
  }
  .tb-cta h2,
  .tb-cta p {
    text-shadow: 0 1px 12px rgba(120, 30, 60, .45);
  }
}

/* Первый экран на телефоне: вертикальная картинка, свободная верхняя часть отдана под текст */
@media (max-width: 767.98px) {
  .tb-hero.bg-hero {
    aspect-ratio: auto;
    min-height: 162vw;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 55% 100%;
  }
  .tb-hero h1 {
    font-size: 30px;
    line-height: 1.15;
  }
  .tb-hero p {
    margin-top: 16px;
  }
  .tb-hero .btn-primary {
    margin-top: 24px;
  }
}

/* Совсем узкие телефоны: больше места под текст */
@media (max-width: 359.98px) {
  .tb-hero.bg-hero { min-height: 225vw; }
  .tb-hero h1 { font-size: 26px; }
}

/* Фиолетовые кнопки и акценты (вариант blue) */
.btn-purple { background-color: #464392; }
.btn-purple:hover { background-color: #33306d; }
.text-purple { color: #464392; }
.tb-hero h1 .tb-l { display: block; }
@media (min-width: 640px) { .tb-hero h1 .tb-l1 { white-space: nowrap; } }