/* ════════════════════════════════════════════════════════════════
   Слой посадки /transkribatsiya. Долг закрыт 21.07.2026: общие компоненты уехали
   в библиотеку (tf-vs, tf-flow, tf-price → css/tarify.css; FAQ и карточки → tf-faq/tf-cards).
   Здесь остались только полосы-секции этой страницы: фоны, отступы, головы, hero,
   блок боли, скрины и сплит «скрин ↔ вывод».
   Новую посадку собираем из библиотеки, а не отсюда — flyu-site/README.md ШАГ 0.
   ────────────────────────────────────────────────────────────────
   transkribatsiya.css — посадка «Транскрибация звонков».
   Подключается ПОСЛЕ home.css (токены, .reveal, .how, .pricing)
   и kak-rabotaet.css (.kr-hero-split, .kr-frame, .kr-eyebrow, .kr-em).
   и tarify.css (.tf-faq — канон вопрос-ответа).
   Головы секций — по канону: центр, колонка 720px, подзаголовок ПОД заголовком.
   Принцип ритма: тёмная полоса (--bg) ↔ светлая полоса (--surface),
   центр ↔ лево/право, текст ↔ визуал. Двух одинаковых секций подряд нет.
   ════════════════════════════════════════════════════════════════ */

/* ──────── общий заголовок секции (лево-выровненный) ──────── */
.tr-h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 600; line-height: 1.1; letter-spacing: -1.2px; color: var(--text);
}
.tr-h2-sm { font-size: clamp(23px, 2.6vw, 31px); letter-spacing: -0.9px; }

/* ════════════ 1. HERO-СПЛИТ ════════════ */
.tr-hero { padding-bottom: 88px; }
.tr-hero .kr-hero-split-inner {
  max-width: 1200px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 52px;
}
.tr-hero .kr-h1 { font-size: clamp(30px, 3.7vw, 46px); }
.tr-hero .kr-lead { max-width: 560px; }

/* CTA в hero НЕТ — по правилу STANDARDS §2.10 кнопки живут только в финальном блоке. */

/* ──────── скрин в рамке + подпись ──────── */
.tr-shot { margin: 0 auto; max-width: 100%; }
.tr-shot .kr-frame { max-width: 100%; }
.tr-shot img { max-width: 100%; height: auto; }
.tr-cap {
  margin: 14px auto 0; max-width: 640px;
  font-size: 13.5px; line-height: 1.55; color: var(--muted); letter-spacing: -0.05px;
}
.tr-shot-hero .tr-cap { text-align: left; margin-left: 0; }
/* Скрины сняты в узком кадре (607 CSS-px) ради читаемого кегля — растягивать их
   шире исходника нельзя, иначе текст на картинке мылит. */
.tr-shot-verdict { max-width: 607px; }

/* ════════════ 2. БОЛЬ — светлая полоса, проза одной колонкой ════════════
   Ритм: после hero-сплита идёт узкая колонка текста по центру. Ни панелей,
   ни карточек, ни второго скрина — смена дыхания перед механикой. */
.tr-why {
  position: relative; padding: 92px 28px;
  background: var(--surface); border-top: 1px solid var(--border);
}
.tr-why-inner { max-width: 720px; margin: 0 auto; }
.tr-why-inner .kr-eyebrow,
.tr-why-inner .tr-h2 { text-align: center; }
.tr-why-inner .tr-h2 { margin-bottom: 30px; }
.tr-why-inner p { font-size: 17px; line-height: 1.75; color: var(--muted2); letter-spacing: -0.1px; }
.tr-why-inner p + p { margin-top: 20px; }
.tr-why-inner strong { color: var(--text); font-weight: 600; }

/* ════════════ 3. КАК ПОЛУЧАЕТСЯ ТЕКСТ — тёмная полоса, лента шагов ════════════ */
.tr-show {
  position: relative; padding: 84px 28px 88px;
  background: var(--bg); border-top: 1px solid var(--border);
}
.tr-show-inner { max-width: 1080px; margin: 0 auto; }
/* КАНОН головы секции (21.07.2026): центр, колонка 720px, подзаголовок ПОД заголовком.
   Двухколоночной головы «заголовок слева / подзаголовок справа» на сайте нет. */
.tr-show-head { max-width: 720px; margin: 0 auto 12px; text-align: center; }
.tr-show-sub {
  margin: 18px auto 0; max-width: 700px;
  font-size: 16px; line-height: 1.65; color: var(--muted2); letter-spacing: -0.1px;
}

/* ════════════ 4. СРАВНЕНИЕ — светлая полоса, две контрастные карточки ════════════ */
.tr-vs-sec {
  position: relative; padding: 84px 28px;
  background: var(--surface); border-top: 1px solid var(--border);
}
.tr-vs-inner { max-width: 1000px; margin: 0 auto; }
.tr-vs-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }  /* КАНОН: центр, 720px */
.tr-vs-head .tr-h2 { margin-bottom: 16px; }
.tr-vs-sub {
  margin: 0 auto; max-width: 700px;
  font-size: 16px; line-height: 1.65; color: var(--muted2); letter-spacing: -0.1px;
}
/* ════════════ 6. КАЧЕСТВО — карточки светлее полосы ════════════ */
.tr-quality {
  position: relative; padding: 84px 28px;
  background: var(--surface); border-top: 1px solid var(--border);
}
.tr-quality-inner { max-width: 1060px; margin: 0 auto; }
.tr-quality-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }  /* КАНОН: центр, 720px */
.tr-quality-head .tr-h2 { margin-bottom: 16px; }
.tr-quality-sub {
  margin: 0 auto; max-width: 700px;
  font-size: 16px; line-height: 1.65; color: var(--muted2); letter-spacing: -0.1px;
}
/* Карточки — канон .tf-cards из css/tarify.css. Своя реализация с индексом 01/02
   убрана 21.07.2026 по решению Романа. */

/* ════════════ 7. СВЕРХ ТЕКСТА — реальный скрин оценки слева, вывод справа ════════════ */
.tr-verdict {
  position: relative; padding: 88px 28px;
  border-top: 1px solid var(--border); background: var(--bg);
}
.tr-verdict-inner {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 52px; align-items: center;
}
.tr-verdict-text .tr-h2 { margin-bottom: 20px; }
.tr-verdict-text p { font-size: 16.5px; line-height: 1.72; color: var(--muted2); letter-spacing: -0.1px; }
.tr-verdict-text p + p { margin-top: 18px; }
.tr-verdict-text a { color: var(--accent); }
.tr-verdict-text a:hover { color: var(--accent-2); }

.tr-verdict .kr-frame { box-shadow: 0 30px 80px -34px rgba(0,0,0,0.85); }
.tr-verdict .tr-cap { text-align: left; margin-left: 0; }

/* ════════════ 8. ЦЕНА — панель с цифрами ════════════ */
.tr-price { position: relative; padding: 84px 28px; border-top: 1px solid var(--border); }
/* ════════════ 9. FAQ — две колонки ════════════ */
.tr-faq-sec {
  position: relative; padding: 84px 28px;
  background: var(--surface); border-top: 1px solid var(--border);
}
.tr-faq-inner { max-width: 1060px; margin: 0 auto; }
.tr-faq-head { max-width: 720px; margin: 0 auto 38px; text-align: center; }  /* КАНОН: центр, 720px */
/* FAQ — канон .tf-faq из css/tarify.css (одна колонка 800px, разделители).
   Собственная реализация в две колонки убрана 21.07.2026 по решению Романа. */

/* ════════════ 10. CTA ════════════ */
.tr-cta-sec .pricing-head { margin-bottom: 32px; max-width: 860px; }
.tr-cta-sec .pricing-title { font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -1.8px; }

/* ════════════ АДАПТИВ ════════════ */
@media (max-width: 1024px) {
  .tr-show, .tr-why, .tr-vs-sec, .tr-quality, .tr-verdict, .tr-price, .tr-faq-sec {
    padding-left: 24px; padding-right: 24px;
  }
  .tr-verdict-inner { gap: 40px; }
}
@media (max-width: 900px) {
  .tr-hero .kr-hero-split-inner { grid-template-columns: 1fr; gap: 38px; }
  .tr-shot-hero { max-width: 620px; margin: 0 auto; }
  .tr-shot-hero .tr-cap { text-align: center; margin-left: auto; }
  .tr-verdict-inner { grid-template-columns: 1fr; }
  .tr-shot-verdict { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 720px) {
}
@media (max-width: 600px) {
  .tr-hero { padding-bottom: 62px; }
  .tr-show, .tr-why, .tr-vs-sec, .tr-quality, .tr-verdict, .tr-price, .tr-faq-sec {
    padding-top: 62px; padding-bottom: 62px;
  }
  .tr-why-inner p { font-size: 16.5px; }
}

/* Скрины открываются в полном размере — на телефоне кегль внутри картинки
   мельчает до нечитаемого, тап по кадру спасает. */
.tr-shot-zoom { display: block; cursor: zoom-in; }
.tr-shot-zoom img { display: block; }