/* ═══════════════════════════════════════════════════════════════════
   Перенесённые разделы: модели, профессии, блог, решения.

   Эти страницы пришли с боевого сайта — там они набраны сплошным текстом
   с карточками, без крупных сцен главной. Поэтому здесь не «ещё один
   лендинг», а читаемый документ: одна колонка, мера строки под чтение,
   карточки и таблицы шириной чуть больше текста.

   Токены и кнопки берутся из sayt.css — этот файл только про содержимое.
   ═══════════════════════════════════════════════════════════════════ */

.st{ padding-top:var(--s12); }
.st .wrap{ max-width:1200px; }

/* Мера строки. Текст читают, а не сканируют, поэтому колонка узкая; карточки
   и таблицы ниже разрешают себе выйти шире — им нужна ширина, тексту нет. */
.st-telo{ display:flex; flex-direction:column; gap:var(--s6); }
.st-telo > *{ max-width:70ch; }
.st-telo > .st-karty,
.st-telo > .tarify,
.st-telo > .modeli,
.st-telo > .st-scroll,
.st-telo > .st-faq,
.st-telo > .st-forma,
.st-telo > .proba{ max-width:none; }

/* ───────── Крошки ───────── */
.krohi{ display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-size:13.5px; color:var(--ink-faint); margin-bottom:var(--s4); }
.krohi a{ color:var(--ink-dim); text-decoration:none; }
.krohi a:hover{ color:var(--accent); }
.krohi > * + *::before{ content:'/'; margin-right:6px; color:var(--line-2); }

/* ───────── Заголовки и текст ───────── */
.st-h1{ margin:0; font-size:48px; line-height:1.06; font-weight:500;
  letter-spacing:-0.032em; max-width:20ch; text-wrap:balance; }
.st-lead{ margin:var(--s4) 0 0; font-size:19px; line-height:1.55;
  color:var(--ink-dim); max-width:60ch; }
.st-telo{ margin-top:var(--s12); }

.st-h2{ margin:var(--s6) 0 0; font-size:28px; line-height:1.2; font-weight:500;
  letter-spacing:-0.026em; text-wrap:balance; }
.st-h3{ margin:var(--s4) 0 0; font-size:20px; line-height:1.3; font-weight:500;
  letter-spacing:-0.02em; }
.st-h2:first-child, .st-h3:first-child{ margin-top:0; }

.st-p{ margin:0; font-size:17px; line-height:1.65; color:var(--ink-dim); }
.st-p a{ color:var(--accent); }
.st-p b, .st-p strong{ color:var(--ink); font-weight:500; }

.st-spisok{ margin:0; padding-left:1.25em; display:flex; flex-direction:column;
  gap:8px; font-size:17px; line-height:1.6; color:var(--ink-dim); }
.st-spisok li::marker{ color:var(--line-2); }
.st-spisok a{ color:var(--accent); }

/* Врезка: на боевом это выделенный вывод в конце раздела */
.st-vrezka{ margin:0; padding:var(--s4) var(--s6); border-left:3px solid var(--accent);
  background:var(--accent-soft); border-radius:0 var(--r-surface) var(--r-surface) 0;
  font-size:17px; line-height:1.6; color:var(--ink); }

/* ───────── Карточки ───────── */
.st-karty{ display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.st-karta{ display:flex; flex-direction:column; gap:8px; padding:var(--s4) var(--s4);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-surface); }
.st-karta b{ font-size:16px; font-weight:500; letter-spacing:-0.018em; color:var(--ink); }
.st-karta span{ font-size:14.5px; line-height:1.5; color:var(--ink-dim); }

/* ───────── Вопросы и ответы ───────── */
.st-faq{ display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-surface);
  background:var(--surface); overflow:hidden; }
.st-faq details + details{ border-top:1px solid var(--line); }
.st-faq summary{ list-style:none; cursor:pointer; padding:16px var(--s4);
  font-size:16.5px; font-weight:500; letter-spacing:-0.015em; color:var(--ink);
  display:flex; align-items:center; gap:12px; }
.st-faq summary::-webkit-details-marker{ display:none; }
.st-faq summary::after{ content:''; margin-left:auto; flex:none; width:8px; height:8px;
  border-right:1.6px solid var(--line-2); border-bottom:1.6px solid var(--line-2);
  transform:rotate(45deg) translateY(-2px); transition:transform .18s ease; }
.st-faq details[open] summary::after{ transform:rotate(225deg) translateY(-2px); }
.st-faq summary:hover{ color:var(--accent); }
.st-faq p{ margin:0; padding:0 var(--s4) 18px; font-size:16px; line-height:1.6;
  color:var(--ink-dim); max-width:70ch; }

/* ───────── Таблица ───────── */
.st-scroll{ overflow-x:auto; }
.st-tablica{ border-collapse:collapse; width:100%; font-size:15px; }
.st-tablica th{ text-align:left; padding:0 var(--s4) 10px 0; white-space:nowrap;
  font-size:11.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); border-bottom:1px solid var(--line-2); }
.st-tablica td{ padding:11px var(--s4) 11px 0; border-bottom:1px solid var(--line);
  color:var(--ink-dim); vertical-align:baseline; }
.st-tablica tr:last-child td{ border-bottom:0; }
.st-tablica td:first-child{ color:var(--ink); }

/* ───────── Заявка ─────────
   Единственная форма на сайте, на странице для юротделов. Бэкенда за ней
   нет: скрипт собирает письмо и открывает почтовый клиент. */
.st-forma{ display:grid; gap:var(--s3); padding:var(--s6);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-surface); max-width:640px; }
.st-forma > b{ font-size:19px; font-weight:500; letter-spacing:-0.022em; }
.st-pole{ display:flex; flex-direction:column; gap:6px; }
.st-pole span{ font-size:14px; color:var(--ink-dim); }
.st-pole input, .st-pole textarea{ font:inherit; font-size:16px; color:var(--ink);
  padding:12px 14px; background:var(--paper); border:1px solid var(--line);
  border-radius:10px; resize:vertical; }
.st-pole input:focus, .st-pole textarea:focus{ outline:2px solid var(--accent);
  outline-offset:1px; border-color:transparent; }
.st-forma button{ justify-self:start; }
.st-forma__note{ margin:0; font-size:13.5px; line-height:1.5; color:var(--ink-faint); }


@media (max-width:720px){
  .st{ padding-top:var(--s8); }
  .st-h1{ font-size:34px; }
  .st-lead{ font-size:17px; }
  .st-h2{ font-size:24px; }
}

/* Кнопки, унаследованные от старого сайта: «Все роли», «Тарифы»,
   «Оставить заявку». Абзацем они выглядели обрывком текста. */
.st-knopki{ display:flex; flex-wrap:wrap; gap:12px; }
.st-karta__spisok{ margin:2px 0 0; padding:0; list-style:none; display:flex;
  flex-direction:column; gap:6px; font-size:14px; line-height:1.45; color:var(--ink-dim); }
.st-karta__spisok li{ padding-left:16px; position:relative; }
.st-karta__spisok li::before{ content:''; position:absolute; left:0; top:.58em;
  width:5px; height:5px; border-radius:50%; background:var(--line-2); }

/* Карточка-ссылка: так на боевом свёрстан список статей блога и подборки
   моделей. Кнопкой такой список уезжал за край экрана. */
.st-karta--ssylka{ text-decoration:none; transition:border-color .18s ease, box-shadow .18s ease; }
.st-karta--ssylka:hover{ border-color:var(--line-2); box-shadow:var(--sh-raise); }
.st-karta--ssylka:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* Ряд меток: «PDF · DOCX · XLSX», «ФИО · Телефоны · ИНН». */
.st-metki{ display:flex; flex-wrap:wrap; gap:8px; }
.st-metki span{ font-size:14px; color:var(--ink-dim); padding:6px 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); }

/* Надзаголовок раздела — «01 / AI-ЧАТ». Отдельным абзацем читался обрывком. */
.st-nad{ display:block; margin-bottom:6px; font-size:11.5px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--accent); }

/* ───────── Тарифы и каталог моделей ─────────
   Содержимое этих блоков собирает scripts/prays-sobrat.py из боевого API:
   цены, лимиты и признаки тарифов живут в базе и меняются без правок сайта.
   Руками числа сюда не вписывать — следующая выкладка их перезапишет. */
.tarify{ display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.tarif{ display:flex; flex-direction:column; gap:var(--s3);
  padding:var(--s6) var(--s4) var(--s4); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-surface); }
.tarif--vydelen{ border-color:var(--accent); }
.tarif__hd{ margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.tarif__hd b{ font-size:18px; font-weight:500; letter-spacing:-0.02em; color:var(--ink); }
.tarif__metka{ font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); padding:4px 9px; border-radius:var(--r-pill); }
.tarif__opis{ margin:0; font-size:14.5px; line-height:1.45; color:var(--ink-dim); }
.tarif__cena{ margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; }
.tarif__cena b{ font-size:30px; font-weight:500; letter-spacing:-0.03em; color:var(--ink); }
.tarif__cena span{ font-size:14px; color:var(--ink-faint); }
.tarif__spisok{ flex:1; margin:0; padding:0; list-style:none; display:flex;
  flex-direction:column; gap:9px; font-size:14.5px; line-height:1.4; color:var(--ink-dim); }
.tarif__spisok li{ padding-left:23px; position:relative; }
/* Галочка и прочерк нарисованы рамкой: спрайт со знаками на перенесённых
   страницах не подключён, а без различия карточка обещала лишнее — на боевом
   недоступное показано серым с прочерком, при переносе это потерялось. */
.tarif__da::before{ content:''; position:absolute; left:1px; top:.34em;
  width:9px; height:5px; border-left:1.7px solid var(--accent);
  border-bottom:1.7px solid var(--accent); transform:rotate(-45deg); }
.tarif__net{ color:var(--ink-faint); }
.tarif__net::before{ content:''; position:absolute; left:0; top:.66em;
  width:11px; height:1.5px; background:var(--line-2); }
.tarif .btn{ justify-content:center; }

/* Сравнение: колонок семь, поэтому цифры по центру, а не по левому краю */
.st-tablica--sravnenie th + th, .st-tablica--sravnenie td + td{ text-align:center;
  padding-right:var(--s3); }
.st-tablica--sravnenie td.da{ color:var(--accent); }
.st-tablica--sravnenie td.net{ color:var(--ink-faint); }
.st-tablica__grupa td{ padding-top:var(--s4); font-size:11.5px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint);
  border-bottom:1px solid var(--line-2); text-align:left; }
.st-tablica--ceny td + td{ text-align:right; padding-right:var(--s3);
  font-variant-numeric:tabular-nums; }
.st-tablica--ceny th + th{ text-align:right; padding-right:var(--s3); }

.modeli{ display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); }
.model{ display:flex; flex-direction:column; gap:10px; padding:var(--s4);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-surface); text-decoration:none; }
.model--ssylka{ transition:border-color .18s ease, box-shadow .18s ease; }
.model--ssylka:hover{ border-color:var(--line-2); box-shadow:var(--sh-raise); }
.model--ssylka:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.model__t{ font-size:16px; font-weight:500; letter-spacing:-0.018em; color:var(--ink); }
.model__ceny{ margin:0; display:flex; flex-wrap:wrap; gap:4px var(--s4); }
.model__ceny span{ display:flex; flex-direction:column; gap:2px; }
.model__ceny i{ font-style:normal; font-size:11.5px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-faint); }
.model__ceny b{ font-size:15px; font-weight:500; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.model__za{ margin:0; font-size:13px; color:var(--ink-faint); }