/* ==========================================================================
   Тимбилдинг — собственные блоки на телефоне (до 768px).
   Сквозные узлы (шапка, кейсы, отзывы, хвост, футер) и горизонтальные треки
   лежат в mobile.css. Здесь — программы и блок «Отдыхайте вместе с командой».
   ========================================================================== */
@media (max-width:1023px){

/* ── ПЕРВЫЙ ЭКРАН ──────────────────────────────────────────────────────── */
/* Три строки, самая длинная «с фокусом на каждого» — 3.8rem держит её целиком */
.page-biz .hero__h1{font-size:3.8rem; letter-spacing:-.114rem}
/* ~~объект-позиция 66% как временный кроп~~ [неактуально, 01.09.26 —
   кадр перегенерирован под вертикаль аутпейнтом, лежит в img/mob/tim-hero.jpg,
   подмену делает mobile.js и сам ставит позицию 50%] */

/* ── ПРОГРАММЫ ─────────────────────────────────────────────────────────── */
/* Залипающая дуга из шести карточек заменена свайп-треком (.mprog строит
   mobile.js, пин в programs.js на телефоне выключен). Шапка блока —
   подводка и заголовок — переезжает в поток над треком. */
.prog{height:auto; overflow:visible}
/* Заголовок → подводка → трек (обратка Германа 02.09: в разметке подводка
   стоит первой). Переставляем флекс-порядком. */
.prog__in{height:auto; padding:9rem 0 0; display:flex; flex-direction:column}
.prog__h2{order:1}
.prog__lead{order:2}
.prog__in .mprog{order:3}
.prog__in .mtrack-progress{order:4}
.prog__lead{position:relative; left:0; top:0; right:auto; bottom:auto;
  width:auto; margin:2rem 2rem 0; font-size:1.5rem; text-wrap:balance}
.prog__h2{position:relative; left:0; top:0; right:auto; bottom:auto;
  width:auto; margin:0 2rem;
  font-size:3.5rem; letter-spacing:-.105rem; text-wrap:balance}
/* дуга и поле карточек живут в одной системе координат под 1440 —
   на телефоне не нужны ни та, ни другое */
.prog__path,.prog__cards{display:none}

/* Кнопка и приписка под треком — по левому краю, как весь текст страницы */
/* приписка по центру относительно кнопки (обратка Германа 02.09) */
.prog-out{padding:4.4rem 2rem 0; text-align:center}
.prog-out__cta{display:flex; width:100%; height:6.3rem;
  padding:.8rem .8rem .8rem 2.4rem}
.prog-out__cta .btn__t{font-size:1.3rem}
.prog-out__note{margin-top:1.8rem; font-size:1.3rem; text-wrap:pretty}

/* ── СВЕТЛАЯ ТЕМА: ПОДПИСИ И ПОЛОСЫ ───────────────────────────────────── */
/* Страница светлая с блока кейсов. Полосы прогресса и подсказка «листайте
   вправо» пришли из общего слоя белыми — на #f2f2f2 их просто нет. */
/* «Бережём» на светлой странице — светлые карточки, как на главной. Тёмные
   карточки из mobile.css рассчитаны на чёрные страницы (обратка Германа 02.09). */
/* #e7e7ec, а не #f4f4f6: белые плашки сливались с фоном #f2f2f2 (обратка 02.09) */
.page-biz.is-light .bz-why .mwhy__card{background:#e7e7ec; border:0}
/* подпись Елены ниже: на светлом кадре она ложилась на волосы (обратка 02.09) */
.page-biz.is-light .maxim-form__name{margin-top:-4.6rem}
.page-biz.is-light .bz-why .mwhy__t{color:#131313}
.page-biz.is-light .bz-why .mwhy__d{color:rgba(19,19,19,.55)}
.page-biz.is-light .bz-why .mwhy-progress{background:rgba(0,0,0,.1)}
.page-biz.is-light .bz-why .mwhy-progress i{background:#131313}
.page-biz.is-light .case-progress,
.page-biz.is-light .mtrack-progress{background:rgba(0,0,0,.12)}
.page-biz.is-light .case-progress i,
.page-biz.is-light .mtrack-progress i{background:#0f0f0f}
.page-biz.is-light .mcases-hint{color:rgba(0,0,0,.45)}
/* «Бережём» на этой странице тоже стоит на светлом — возвращаем чёрную полосу
   поверх правила тёмных направлений из mobile.css */
.page-biz.is-light .bz-why .mwhy-progress{background:rgba(0,0,0,.12)}
.page-biz.is-light .bz-why .mwhy-progress i{background:#0f0f0f}

/* ── ОТДЫХАЙТЕ ВМЕСТЕ С КОМАНДОЙ ───────────────────────────────────────── */
/* Две колонки шапки и шесть колонок сетки — в один столбец. Линия ряда
   у каждого шага своя (::after), она же режет номер: в вертикали приём
   сохраняется без изменений, меняется только ширина. */
/* заголовок → подводка → шаги (обратка Германа 02.09) */
.care{display:flex; flex-direction:column; padding:9rem 2rem 6rem}
.care__h2{order:1; margin-top:0; font-size:3.5rem; letter-spacing:-.105rem;
  text-wrap:balance}
.care__lead{order:2; padding-bottom:0; margin-top:2rem; font-size:1.5rem; text-wrap:balance}
.care__grid{order:3}
.care__grid{display:block; margin-top:5.6rem}
.care__step,.care__step--wide{padding:0 0 5.6rem}
.care__step:nth-child(2),.care__step:nth-child(3),
.care__step:nth-child(5){padding-left:0; border-left:0}
.care__step::before{display:none}
.care__ico{margin-top:3.4rem}
.care__t{margin-top:2.4rem; font-size:2.1rem; text-wrap:balance}
.care__d{margin-top:1.2rem; font-size:1.4rem; text-wrap:pretty}
.care__step--wide .care__t,.care__step--wide .care__d{max-width:none}

}