/* qx-layout-fix.css — правки вёрстки, часть 2 (2026-08-15).
   Подключается последним в <head>, поэтому при равной специфичности
   перебивает постраничные <style>. Ничего, кроме перечисленных дефектов,
   не трогает.

   1. Декоративное свечение за заголовком расширяло документ на узком экране.
   2. Подсказка «?» в модалке была шире модалки.
   3. Длинные слова в заголовках не переносились и вылезали за экран.
   4. Полоса статистики складывалась лесенкой 2+1.
   5. Сетки на about, вынесенные из инлайновых стилей.
   6. Блок «Авторитетный источник» под статьёй.
*/

/* ------------------------------------------------------------------ *
 * 1. Свечение (h1::before на статичных страницах, main::before на калькуляторе).
 *    На широком экране оставляем как было (-15% с обеих сторон),
 *    на узком прижимаем к краям контейнера: иначе документ становится
 *    шире вьюпорта, а фиксированные шапка и бургер уезжают за экран.
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
  main#main-content > h1:first-child::before,
  main::before {
    left: 0;
    right: 0;
  }
}
/* Шапка блога широкая, поэтому её свечение вылезало и на десктопе. */
.blog-hub-hero h1::before {
  left: 0;
  right: 0;
}

/* ------------------------------------------------------------------ *
 * 2. Подсказка «?» в лид-форме.
 *    Была: position:absolute от значка «?», ширина 260px — вылезала
 *    из модалки (350px на экране 390px) и тянула страницу вбок.
 *    Стало: привязана к полю формы, ширина равна ширине поля.
 * ------------------------------------------------------------------ */
.modal-field { position: relative; }
.modal-field .tooltip-wrap { position: static; }
.modal-field .tooltip-box {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
}
/* Страховка для подсказок вне модалки (поиск на калькуляторе и главной). */
.tooltip-box { max-width: calc(100vw - 32px); }

/* ------------------------------------------------------------------ *
 * 3. Длинные слова в заголовках («конфиденциальности» — 497px при
 *    контейнере 350px).
 * ------------------------------------------------------------------ */
h1, h2, h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ------------------------------------------------------------------ *
 * 4. Полоса статистики в статьях: на узком экране одна колонка
 *    вместо 2+1 «лесенкой».
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .stats-row { grid-template-columns: 1fr; }
  .stats-row .stat-item:last-child { grid-column: auto; }
}

/* ------------------------------------------------------------------ *
 * 5. Сетки на странице «О компании» — были инлайновыми, поэтому
 *    не поддавались медиазапросам.
 * ------------------------------------------------------------------ */
.qx-about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
}
.qx-about-two,
.qx-about-two-tight {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.qx-about-two { gap: 14px; }
.qx-about-two-tight { gap: 12px; }
.qx-about-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  column-gap: 22px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.qx-about-step--last { border-bottom: 1px solid rgba(255,255,255,0.1); }

@media (max-width: 640px) {
  .qx-about-stats,
  .qx-about-two,
  .qx-about-two-tight { grid-template-columns: 1fr; }
  .qx-about-step {
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
  }
}
@media (max-width: 420px) {
  .qx-about-step {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
}

/* ------------------------------------------------------------------ *
 * 6. Строка «Авторитетный источник» под статьёй: раньше стояла
 *    за пределами .container и растягивалась на всю ширину экрана.
 * ------------------------------------------------------------------ */
.article-source {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 16px;
}
.article-source a { color: rgba(200,255,0,0.7); }

/* ------------------------------------------------------------------ *
 * 7. Стрелка на кнопках — часть 3, 2026-08-19.
 *    Было: два разных способа. В шапке (.qx-btn-nav) — <svg> с
 *    aria-hidden, то есть декоративная и молчаливая для скринридера.
 *    Во всех остальных 144 кнопках символ → стоял прямо в подписи
 *    и читался вслух: «Получить оценку стрелка вправо».
 *    Стало: символ убран из текста, рисуется стилями.
 *    Запись content: "→" / "" задаёт пустой альтернативный текст,
 *    поэтому стрелка не попадает в доступное имя кнопки.
 *    В старых браузерах, не знающих этот синтаксис, поведение
 *    остаётся прежним — хуже не становится.
 * ------------------------------------------------------------------ */
.qx-arrow::after {
  content: "→" / "";
  margin-left: 0.4em;
  display: inline-block;
}

/* ------------------------------------------------------------------ *
 * 8. Значок «?» подсказки — 2026-08-19.
 *    line-height наследовался от окружения: на главной 16px × 1.1 =
 *    17.6px, на прочих страницах 11px × 1.65 = 18.15px. Разница 0.55px
 *    сдвигала символ внутри кружка. Задаём явно по образцу главной,
 *    чтобы значок выглядел одинаково везде.
 * ------------------------------------------------------------------ */
.tooltip-icon { line-height: 17.6px; }

/* ------------------------------------------------------------------ *
 * 9. Единая шкала заголовков h1 — 2026-08-20.
 *
 *    Было: у каждой страницы свой механизм и свой размер. На 1440px
 *    about 96px (инлайновый style на элементе), калькулятор 64px,
 *    главная 60px — и это при ОДИННАДЦАТИ конкурирующих правилах
 *    .hero h1, накопившихся от редизайнов; девять из них перекрыты
 *    и ни на что не влияли. На 390px разброс был ещё шире: 27px
 *    на главной против 48px на about.
 *
 *    Стало: два уровня — витрины и материалы. Значения вынесены
 *    в переменные, менять размер теперь нужно в одном месте.
 *    !important здесь вынужденный: на about размер задан атрибутом
 *    style, а на главной десять правил объявлены до подключения
 *    этого файла.
 * ------------------------------------------------------------------ */
:root{
  --qx-h1-showcase: clamp(44px, 6.4vw, 84px);   /* главная, about, калькулятор */
  --qx-h1-hub:      clamp(35.2px, 4vw, 54.4px); /* хаб блога */
  --qx-h1-article:  clamp(30.4px, 5vw, 44.8px); /* статьи */
}

.hero h1,
main h1,
body.page-about h1 { font-size: var(--qx-h1-showcase) !important; }

/* Поле заголовка — только на калькуляторе. Там ограничение в 568px
   при родителе 880px было произвольным, а длинное русское слово
   «Калькулятор» при 84px занимает 724px и рвалось переносом посреди
   слова. Расширяем поле до 860px.
   На других страницах ширина заголовка не трогается: на about она
   задана вместе с остальной типографикой и является частью вёрстки. */
.qx-h1-wide { max-width: min(100%, 860px) !important; }

.blog-hub-hero h1  { font-size: var(--qx-h1-hub) !important; }
.article-hero h1   { font-size: var(--qx-h1-article) !important; }

/* Юридические страницы сохраняют свой мелкий размер — он задан
   правилом main#main-content > h1:first-child и специфичнее нашего. */

/* ------------------------------------------------------------------ *
 * 10. Типографика формы заявки — 2026-08-20.
 *
 *    Форма не задавала свою типографику и наследовала её от страницы,
 *    на которой открыта. У главных body{line-height:1.6}, у остальных
 *    56 страниц 1.65, а на «О компании» вдобавок letter-spacing:-0.08px.
 *    Из-за этого одна и та же форма имела разную высоту карточки
 *    (806.36px против 809.30px), полей и подписей — при полностью
 *    совпадающей разметке и всех прочих стилях.
 *
 *    Закрепляем типографику на самой модалке: теперь форма выглядит
 *    одинаково независимо от страницы. Наследование внутрь работает
 *    как на эталоне — подпись поля получает 11px × 1.6 = 17.6px.
 * ------------------------------------------------------------------ */
#modal {
  line-height: 1.6;
  letter-spacing: normal;
  /* Дополнено 20.08. Эталон — форма на about. Там в body объявлены
     text-rendering:optimizeLegibility и p{text-wrap:pretty}; на главных
     тоже, а на калькуляторе и 26 статьях блога их нет вовсе. Форма
     наследовала это от страницы и различалась начертанием и переносами.
     Объявляем на самой модалке, чтобы она не зависела от страницы. */
  text-rendering: optimizeLegibility;
}

#modal p { text-wrap: pretty; }
