/* ─────────────────────────────────────────────────────────────
   trener.css — надстройка над automy.css для страницы «AI-тренер».
   Общий automy.css не трогаем: он общий для сопровождения и разбора,
   правка в нём уедет на соседние страницы следующим rsync.
   ───────────────────────────────────────────────────────────── */

/* ---------- Две цены в hero ---------- */
/* У Синапта они стоят строкой над заголовком. На тёмном Automy читаются хуже,
   поэтому уводим под кнопку: сначала обещание, потом цена. */
.hero-prices{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:clamp(22px,2.6vw,34px);
}
.hprice{
  display:flex;align-items:baseline;gap:9px;
  background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:999px;
  padding:clamp(9px,1vw,13px) clamp(16px,1.6vw,22px);
  transition:border-color .3s,background .3s;
}
.hprice:hover{border-color:var(--line2);background:rgba(255,255,255,.07);}
.hprice b{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(16px,1.5vw,21px);color:var(--orange);white-space:nowrap;
}
.hprice span{color:var(--muted);font-size:clamp(13px,1.15vw,15.5px);line-height:1.3;}
@media (max-width:560px){
  /* в столбик, иначе «44 900 ₽ тренер для команды» рвётся посередине */
  .hero-prices{flex-direction:column;align-items:stretch;gap:8px;}
  .hprice{justify-content:space-between;border-radius:14px;}
}

/* ---------- Секция «Когда подходит» ---------- */
.fits{padding:var(--sec-y) 0;}
.fits .inc{min-height:clamp(150px,13vw,190px);justify-content:flex-start;
  /* цифра-фон 01/02/03 сидит в нижнем углу: без этого поля последняя строка
     текста ложится прямо на неё (видно на 1440 в плитках 01 и 03) */
  padding-bottom:clamp(40px,4vw,56px);}
.fits .inc p{
  color:var(--muted);font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.5;
  max-width:36ch;
}
@media (max-width:860px){
  .fits .inc-grid{grid-template-columns:1fr;}
  /* низ отдаём цифре-фону: без него последняя строка текста ложится прямо на «03» */
  .fits .inc{min-height:0;padding-bottom:40px;}
  .fits .inc p{max-width:none;}
}

/* ---------- Сноска внутри карточки тарифа ---------- */
.plan .pnote{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13px;line-height:1.45;opacity:.85;
}
/* кнопка прижата к низу карточки (.plans .plan .btn{margin-top:auto}),
   но после сноски и строки-результата auto схлопывается в ноль и текст
   прилипает к кнопке — специфичность тут выше, отступ возвращаем */
.plans .plan .pnote + .btn,
.plans .plan .presult + .btn,
.plans .plan .pclub + .btn{margin-top:clamp(18px,2vw,24px);}
/* «Плюс доступ в закрытое сообщество» — отдельной плашкой, а не шестым пунктом:
   это не часть состава формата, а общий бонус двух тарифов */
.plan .pclub{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:12px;padding:8px 13px;border-radius:999px;
  background:rgba(237,126,47,.1);border:1px solid rgba(237,126,47,.24);
  color:#f0c39a;font-size:13px;font-weight:600;line-height:1.3;
}
.plan .pclub svg{width:14px;height:14px;flex:0 0 14px;fill:var(--orange);}

/* ---------- Организационный блок про оплату ---------- */
.payinfo{padding:0 0 var(--sec-y);}
.payinfo .pi-box{
  border:1px solid var(--line);border-radius:20px;background:var(--card);
  padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,34px);
}
.payinfo p{
  color:var(--muted);font-size:clamp(13.5px,1.15vw,15.5px);line-height:1.62;margin:0;
}
.payinfo p + p{margin-top:10px;}
.payinfo a{color:#e8c4a2;text-decoration:underline;text-underline-offset:3px;}
.payinfo a:hover{color:var(--orange);}

/* ---------- Мелкие правки под эту страницу ---------- */
/* три формата: у второго состав длиннее, кнопки держим на одной линии */
.plans .plan{display:flex;flex-direction:column;}
.plans .plan .btn{margin-top:auto;}

/* ---------- Подзаголовок hero ---------- */
/* у сопровождения hero был без подзаголовка: там продукт объяснялся тарифами.
   Тут первый экран обязан развести два формата, иначе цена в чипах без контекста */
.hero-sub{
  margin:clamp(16px,1.8vw,24px) auto 0;max-width:58ch;
  color:var(--muted);font-size:clamp(15.5px,1.4vw,20px);line-height:1.5;
}

/* ---------- Лид секции ---------- */
.sec-lead{
  margin-top:14px;max-width:62ch;
  color:var(--muted);font-size:clamp(15px,1.3vw,18px);line-height:1.55;
}

/* ---------- Строка-результат в карточке тарифа ---------- */
.plan .presult{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  color:#e8c4a2;font-size:clamp(13.5px,1.15vw,15px);line-height:1.5;
}
/* подвал секции тарифов */
.plans-foot{
  margin-top:clamp(18px,2vw,26px);color:var(--muted);
  font-size:clamp(13.5px,1.15vw,15.5px);line-height:1.55;
}

/* ---------- Раскрытие форматов ---------- */
.mod-result{
  margin-top:clamp(20px,2.2vw,28px);font-weight:700;line-height:1.45;
  font-size:clamp(15px,1.3vw,18px);color:#fff;
}
.mod--light .mod-result{color:#15120e;}
.mod--dark .mod-result{color:var(--orange);}
.mod-cta{margin-top:clamp(20px,2.2vw,28px);}
/* на оранжевой и светлой сцене белая кнопка сливается с фоном: даём тёмную */
.btn-dark{background:#1a1c20;color:#f4f0e8;box-shadow:0 14px 40px -16px rgba(0,0,0,.6);}
.btn-dark:hover{color:#fff;}
.acc-example{
  margin-top:clamp(18px,2vw,26px);color:var(--muted);
  font-size:clamp(13px,1.1vw,14.5px);line-height:1.55;max-width:80ch;
}

/* ---------- Финал ---------- */
.final-sub{
  margin:clamp(14px,1.6vw,20px) auto 0;max-width:56ch;
  color:var(--muted);font-size:clamp(15px,1.3vw,18px);line-height:1.55;
}
.final-note{
  margin-top:clamp(14px,1.5vw,18px);color:var(--muted);
  font-size:clamp(13px,1.1vw,14.5px);line-height:1.5;
}

/* ---------- Мобильные ---------- */
@media (max-width:860px){
  /* пункты внутри раскрытия в одну колонку: в две на телефоне остаётся 2-3 слова в строке */
  .mod-points{grid-template-columns:1fr;}
}

/* ---------- Реквизиты в подвале ---------- */
/* footer .wrap — flex со space-between, поэтому реквизиты уводим на отдельную
   строку целиком, иначе они встают четвёртой колонкой и ломают ряд логотипа */
footer .f-legal{
  flex:1 0 100%;order:9;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13px;line-height:1.6;
}
footer .f-legal a{color:#e8c4a2;text-decoration:underline;text-underline-offset:3px;word-break:break-word;}
footer .f-legal a:hover{color:var(--orange);}
@media (max-width:560px){
  footer .wrap{justify-content:center;text-align:center;}
  footer .f-legal{text-align:left;}
}

/* ---------- Как начинается работа ---------- */
/* тот же грид карточек, что в «Когда подходит», но нумерация другая:
   цифра-фон 01/02/03 там уже занята, повтор приёма читался бы как дубль секции */
.steps{padding:0 0 var(--sec-y);}
.steps .inc{min-height:0;}
.steps .step-n{
  display:inline-block;margin-bottom:12px;
  font-family:var(--f-mono,inherit);font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange);
}
.steps .inc p{color:var(--muted);font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.5;}
.steps-foot{
  margin-top:clamp(18px,2vw,26px);color:var(--muted);
  font-size:clamp(13.5px,1.15vw,15.5px);line-height:1.55;max-width:70ch;
}
@media (max-width:860px){.steps .inc-grid{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════════════════════════════
   Правки по дизайн-ревью 20.09.2026 (замеры контраста и тач-целей
   снимались с живого превью через CDP). Всё здесь, automy.css не трогаем.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- 1. Белый текст на оранжевой сцене «Разовая консультация» ---------- */
/* белый по #f08a3a давал 2.06-2.50 при норме 4.5: текст физически размывался.
   Притеняем сцену и плашки, оранж как цвет сцены сохраняется */
.mod:not(.mod--light):not(.mod--dark){position:relative;}
.mod:not(.mod--light):not(.mod--dark)::after{
  content:"";position:absolute;inset:0;background:rgba(20,12,4,.22);pointer-events:none;border-radius:inherit;
}
.mod:not(.mod--light):not(.mod--dark) > *{position:relative;z-index:1;}
.mod:not(.mod--light):not(.mod--dark) .mp{
  background:rgba(20,12,4,.55);border-color:rgba(255,255,255,.18);
}
.mod:not(.mod--light):not(.mod--dark) .mp .mp-idx{color:rgba(255,255,255,.55);}

/* ---------- 2. Главная кнопка оплаты в модалке ---------- */
/* белый на #ED7E2F = 2.75. Это кнопка, на которой заканчивается воронка */
#modal .pay-main{background:#b8520f;}
#modal .pay-main:hover{background:#c96016;}

/* ---------- 3. Плейсхолдеры формы ---------- */
/* видимых label нет, плейсхолдер — единственная подпись поля, 2.72 недопустимо */
#modal input::placeholder{color:#a39c90;opacity:1;}

/* ---------- 4. Сноска в карточке тарифа ---------- */
.plan .pnote{opacity:1;color:#a39c90;}

/* ---------- 5-6. Тач-цели в модалке ---------- */
#modal .modal-x{width:44px;height:44px;}
#modal .chk{min-height:44px;align-items:center;gap:12px;}
#modal .chk input{width:24px;height:24px;flex:0 0 24px;margin:0;}
#modal .mback{min-height:44px;}
/* ссылки внутри абзаца: поднимаем межстрочник до тач-высоты 24px */
.payinfo p{line-height:1.8;}

/* ---------- 7. Модалка должна скроллиться ---------- */
/* во встроенном браузере Telegram клавиатура съедает ~300px высоты,
   и кнопка «Отправить» становится недостижимой: прокрутки не было вообще */
#modal .modal-hold{
  max-height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:max(16px,env(safe-area-inset-bottom));
}

/* ---------- 9. Микрокопия у кнопки на планшете ---------- */
/* automy.css гасит .hero-note при ≤1100 и возвращает только при ≤620:
   на всём планшетном диапазоне подпись пропадала */
@media (max-width:1100px) and (min-width:621px){
  .hero-note{display:flex;position:static;transform:none;white-space:normal;justify-content:center;margin:0;}
  .hero-note .hn-arrow{display:none;}
  .hero-note .hn-txt{text-align:center;font-size:14.5px;color:rgba(255,255,255,.66);}
}

/* ---------- 10. Тарифы на планшете ---------- */
/* .price-grid схлопывался в одну колонку уже при ≤980 и уезжал по центру,
   теряя выравнивание с заголовком секции; на 834 спокойно влезают две */
@media (min-width:700px) and (max-width:980px){
  .plans .price-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;margin:0;}
}

/* ---------- 11. «Когда подходит» на планшете ---------- */
/* одна колонка при ≤860 растягивала строку до 96 символов */
@media (min-width:701px) and (max-width:980px){
  .fits .inc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fits .inc p{max-width:48ch;}
  .steps .inc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------- 12. Плашки сообщества на одной линии ---------- */
/* в карточках разное число пунктов, прибита была только кнопка */
@media (min-width:981px){
  .plans .plan ul{flex:1 1 auto;margin-bottom:0;}
  .plans .plan .pclub{margin-top:auto;}
}

/* ---------- 13. Заголовок тарифа ---------- */
.plan .pname{line-height:1.15;}

/* ---------- 14-16. Мобильные ---------- */
@media (max-width:560px){
  /* лид раскрытия сидел в узкой колонке рядом с цифрой и терял 28% ширины */
  .mod-num{grid-row:1;}
  .mod-lead{grid-column:1/-1;grid-row:3;}
  /* вторая строка чипа центрировалась под первой, прижатой вправо */
  .hprice span{text-align:right;}
  /* край радиального пятна на узкой карточке читался как жёсткий шов */
  .mod--dark::before{width:140%;right:-40%;background:radial-gradient(circle,rgba(237,126,47,.28),transparent 72%);}
  .mod--dark::after{display:none;}
}

/* ═══════════ Второй круг ревью: правка правок ═══════════ */

/* ОТКАТ: своя прокрутка у .modal-hold была лишней.
   Скролл уже есть у .modal (overflow-y:auto в automy.css), а overflow на коробке
   включал и overflow-x, который срезал стикер, висящий выше её верхней границы */
#modal .modal-hold{max-height:none;overflow:visible;padding-bottom:0;}

/* .mod-lead на оранжевой сцене давал 3.56 при норме 4.5.
   На этом градиенте даже чистый белый упирается в 3.61, поэтому притеняем сцену сильнее */
.mod:not(.mod--light):not(.mod--dark)::after{background:rgba(20,12,4,.32);}

/* Плашки «Доступ в сообщество» расходились на 22px: виноват не список,
   а .presult разной высоты — три строки против двух. Фиксируем высоту по длинной */
@media (min-width:981px){
  .plans .plan .presult{min-height:83px;}
}

/* Новая секция шагов: карточки центрировали содержимое по высоте ряда,
   из-за чего надписи «ШАГ N» стояли на разной высоте */
.steps .inc{justify-content:flex-start;}
.steps{padding-top:var(--sec-y);}

/* Планшет 700-980: три карточки в две колонки давали сироту с пустотой справа.
   Текстовым секциям возвращаем одну колонку, но со строкой не длиннее 60ch;
   тарифам оставляем два ряда, третий формат занимает всю ширину */
@media (min-width:701px) and (max-width:980px){
  .fits .inc-grid, .steps .inc-grid{grid-template-columns:1fr;}
  .fits .inc p, .steps .inc p{max-width:60ch;}
  .fits .inc{min-height:0;padding-bottom:40px;}
  .plans .price-grid .plan:nth-child(3){grid-column:1 / -1;}
}

/* Край радиального пятна попадал внутрь карточки и читался как жёсткий шов.
   Уводим круг за правую границу и растягиваем затухание до самого края */
.mod::before{width:90%;right:-30%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 78%);}
.mod--light::before{background:radial-gradient(circle,rgba(237,126,47,.16),transparent 78%);}
@media (max-width:560px){
  .mod--dark::before{width:170%;right:-60%;background:radial-gradient(circle,rgba(237,126,47,.26),transparent 80%);}
}

/* Инлайновые ссылки не берут высоту от line-height: бокс оставался 17px.
   inline-block с вертикальным полем даёт палец 25px */
.payinfo a, footer .f-legal a{padding:4px 0;}

/* ═══════════ Третий круг: добивка ═══════════ */

/* .mod-lead держался на 4.36 при норме 4.5 — упирался не в фон, а в прозрачность
   самого текста: rgba(255,255,255,.94). Чистый белый на той же сцене даёт 4.56 */
.mod:not(.mod--light):not(.mod--dark) .mod-lead{color:#fff;}

/* inline-block растил строчный бокс и рвал интерлиньяж абзаца со ссылками
   (29-32px против 24-25px у соседнего). Отрицательное поле возвращает шаг строк,
   тач-цель считается по margin-box и остаётся 25px */
/* ОТКАТ: inline-block делал ссылку неразрывным блоком — «политикой обработки
   персональных данных» переставала переноситься по словам и занимала всю ширину.
   Тач-высоту здесь даёт line-height:1.8 (24px), инлайновая ссылка внутри абзаца —
   штатное исключение критерия размера цели. В подвале ссылки короткие, там блок безопасен */
.payinfo a{display:inline;padding:0;margin:0;}
footer .f-legal a{display:inline-block;padding:4px 0;margin:-4px 0;}

/* смягчённое пятно тёмной сцены жило только на телефонах, а на 834 и 1440
   тёмная карточка брала общее белое пятно .2, край которого читался дугой */
.mod--dark::before{
  width:170%;right:-60%;
  background:radial-gradient(circle,rgba(237,126,47,.26),transparent 80%);
}