@charset "UTF-8";
/* ============================================================================
   voprosy.css — НОВЫЕ компоненты раздела /voprosy/ (хаб + страница рубрики)
   Дбрус · new_design · 2026-06-21
   ----------------------------------------------------------------------------
   ЧТО ЭТО. Один production-файл со стилями ТОЛЬКО НОВЫХ классов, которые
   используют боевые Fenom-шаблоны:
     • new_design/pages/voprosy_hub.tpl    — хаб /voprosy/
     • new_design/pages/voprosy_rubric.tpl — страница рубрики /voprosy/<slug>/

   КУДА ДОПИСАТЬ. В КОНЕЦ боевого бандла new_design/css/styles.css
   (на dbrus.ru один CSS-бандл, модульных файлов нет). Это аддитивный блок:
   ничего из существующего он не переопределяет по смыслу, только добавляет
   новые селекторы и точечные скин-оверрайды НОВЫХ раскладок.

   СВЕРКА ТОКЕНОВ ПО ЖИВОМУ БАНДЛУ — ПРОВЕДЕНА 22.06.2026.
   Источник: https://dbrus.ru/assets/template/new_design/css/styles.css (256 КБ).
     • ЕСТЬ в боевом бандле (11) — используем как есть, НЕ дублируем:
         --bg-color  --white-base  --white-mid
         --brand-main-base / -low / -mid
         --brand-second-base / -low / -mid / -strong  --brand-third-base
     • ОТСУТСТВУЮТ в боевом бандле (11) — типографика/срезы новой DS:
         --font-sans  --font-mono
         --size-headings-h1  --size-headings-h3  --size-body-m  --size-body-s
         --surface-base
         --chamfer-lg  --chamfer-md  --chamfer-sm
   Поэтому фолбэк этих 11 токенов АКТИВИРОВАН ниже (вынесен ПОСЛЕ комментария,
   значения 1:1 из dbrus-design tokens.css). Без него шрифты/срезы/кегли поедут.
   Аддитивно и безопасно: остальной сайт эти 11 токенов не объявляет и не
   использует (боевой бандл работает без них), поэтому их добавление в :root
   затронет ТОЛЬКО новые .faq-* / .rubric-* классы раздела /voprosy/.
   Когда боевой styles.css начнёт объявлять эти токены сам — фолбэк-:root удалить.

   ВКЛЮЧЁННЫЕ КОМПОНЕНТЫ (новые):
     1.  chamfer-утилита (.chamfered / --sm) — для чипов «Часто ищут»
     2.  Хаб: shell (.faq-page / .faq-hero--split + орнамент + грид + плашка-поиск)
     3.  Хаб: поиск-автокомплит (.faq-search / .faq-search__suggestions / .faq-suggest-*)
     4.  Хаб: «Часто ищут» (.faq-queries*) + теги .blog-tags/.blog-tag
         (.blog-tag — УСЛОВНО: компонент блога /poleznoe/; удалить базовый блок,
          если blog.css уже в бандле — см. пометку у блока)
     5.  Рубрики-сетка (.faq-rubrics--tiles / --tiles3 + .faq-rubric*) + ховер «уголок»
     6.  Хаб: «Самые частые» (.faq-spotlight, надстройка над .faq-list--help)
     7.  Справочный аккордеон-надстройка (.faq-list--help / .faq-answer / .faq-brief / .faq-more / .faq-tier__body)
     8.  Эксперты (.faq-experts* + .faq-author* + .faq-topic)
     9.  CTA «Не нашли ответ» (.faq-feedback*)
     10. Страница рубрики: shell (.rubric-page / .rubric-hero--compact / .rubric-body / .rubric-layout--aside / .rubric-flow)
     11. TOC sticky (.toc*) + скин навигации data-nav="Светлый"
     12. Скин аккордеона «Маткапитал» (.rubric-skin--capital .faq-list ...)
     13. Метка даты (.rubric-hero__upd--line)
     14. «Связанные темы» (.rubric-related* + ховер «уголок»)

   ИСКЛЮЧЕНО как ЖИВОЕ (уже в styles.css, имена 1:1 с боевым — НЕ дублируем):
     • Базовый аккордеон: .faq-list / .faq-item / .item-title / .item-descr /
       .item-link (+ .item-title::before номер, тоггл-крестик) — accordion.css,
       на боевом подтверждён (uploads). Здесь только НАДСТРОЙКИ-модификаторы.
     • .input-style (+ .input-style.error/.placeholder) — найден в боевом CSS
       (ipoteka.mhtml). Поле поиска переиспользует его.
     • .primary-btn, .btn-arrow, .btn-txt, .word — кнопки (button.css, live).
     • .breadcrumbs-row, .container, .section-title, .tags-section — live.
     • .icon-close / .icon-slider_arrow / .icon-btn_arrow — иконочный шрифт, live.
     • .js-faq-link — JS-хук тоггла аккордеона (common.js), стилей не требует.

   ИСКЛЮЧЕНО как НЕ-PRODUCTION (варианты прототипа, в шаблонах НЕ используются):
     faq-hero--stacked / базовый герой; .faq-top* (топ-вопросы); .faq-search--cta/__go;
     .faq-rubrics--rows / --list / --chamfer; .faq-steps/.faq-step; .faq-help*;
     .faq-tabs--col / .faq-cats*; .rubric-hero--feature/--bar/__meta* /__eyebrow/__tabs;
     .rubric-aside__cta* /__label; .rubric-answer__by*; .rubric-reading* /.rubric-read*;
     .rubric-topics/.rubric-showmore; .faq-detail*; .toc--inline; .faq-author__bio/__sep;
     .rubric-related__grid/__card (в шаблоне используется плиточный .faq-rubric, не card).
   ============================================================================ */


/* ----------------------------------------------------------------------------
   ФОЛБЭК ТОКЕНОВ НОВОЙ DS — АКТИВЕН (сверка 22.06.2026: этих 11 токенов нет
   в боевом styles.css). Значения 1:1 из dbrus-design tokens.css. Цветовые
   токены (--brand-*, --bg-color, --white-*) сюда НЕ входят — они уже в бандле.
   Удалить этот :root, когда боевой бандл начнёт объявлять токены сам.
   ---------------------------------------------------------------------------- */
:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Roboto Mono", "RobotoMono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --chamfer-lg: 2.2rem;
  --chamfer-md: 0.8rem;
  --chamfer-sm: 0.6rem;
  /* Токены в rem, НЕ px (владелец 21.07): боевой масштабирует rem через
     html{font-size:var(--size-index)} (vw), px-значения «отставали» на мобиле —
     текст выглядел мельче соседних rem-элементов. Номиналы = прежним px при 1rem=10px. */
  --surface-base: 2.4rem;
  --size-headings-h1: 8rem;
  --size-headings-h3: 2.5rem;
  --size-body-m: 1.8rem;
  --size-body-s: 1.6rem;
}
@media (max-width: 992px) {
  :root { --surface-base: 1.6rem; --size-headings-h1: 4.6rem; --size-headings-h3: 2.2rem; --size-body-m: 1.6rem; }
}
@media (max-width: 575px) {
  :root { --surface-base: 1.6rem; --size-headings-h1: 3rem; --size-headings-h3: 2rem; --size-body-m: 1.6rem; --size-body-s: 1.4rem; }
}


/* ============================================================================
   1. CHAMFER — срез углов (утилита). Чипы «Часто ищут» = .chamfered.chamfered--sm
   ============================================================================ */
.chamfered {
  --chamfer: var(--chamfer-lg);
  clip-path: polygon(
    var(--chamfer) 0,
    100% 0,
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    0 100%,
    0 var(--chamfer)
  );
}
.chamfered--sm {
  clip-path: polygon(
    var(--chamfer-sm) 0, 100% 0,
    100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%,
    0 100%, 0 var(--chamfer-sm)
  );
}


/* ============================================================================
   2. ХАБ — SHELL: .faq-page + герой .faq-hero--split (вопросы справа)
   Орнамент main_bg.svg, грид «заголовок-баннер + описание/эксперты + плашка-поиск».
   ⚠ Путь к орнаменту: на боевом — /assets/template/new_design/images/...
   ============================================================================ */
.faq-page { padding: 0; }

.faq-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--brand-third-base);
  /* первый экран прижат к верху под фикс. шапкой; ритм 13/11/9rem */
  padding: 13rem 0 8rem;
}
/* пока открыт автокомплит — снимаем overflow:hidden, чтобы дропдаун перекрывал блок ниже */
.faq-hero:has(.faq-search__suggestions.is-active) { overflow: visible; }
@media (max-width: 992px) { .faq-hero { padding: 11rem 0 6rem; } }
@media (max-width: 575px) { .faq-hero { padding: 9rem 0 4.8rem; } }

.faq-hero__ornament {
  position: absolute; top: -8rem; right: -1.8rem;
  width: 60.7rem; height: 60.7rem;
  background: url("../images/svg/main_bg.svg") center / cover no-repeat;
  pointer-events: none; z-index: -1;
}
@media (max-width: 992px) { .faq-hero__ornament { width: 32rem; height: 32rem; top: -7rem; right: 0; } }
@media (max-width: 575px) { .faq-hero__ornament { width: 24rem; height: 24rem; } }

.faq-hero .container { position: relative; z-index: 1; }
.faq-hero .breadcrumbs-row { margin-top: 0; }

.faq-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58rem;
  column-gap: 5rem;
  align-items: start;
  margin-top: 2.8rem;
}
@media (max-width: 1200px) { .faq-hero__grid { grid-template-columns: minmax(0, 1fr) 50rem; column-gap: 3.2rem; } }
@media (max-width: 992px) {
  .faq-hero__grid { display: flex; flex-direction: column; row-gap: 3.2rem; margin-top: 2rem; }
}

.faq-hero__text { display: flex; flex-direction: column; gap: 2rem; padding-top: 0.6rem; }

.faq-hero__panel {
  --chamfer: 4rem;
  position: relative;
  background: transparent;
  padding: 4rem;
  min-height: 42rem;
  display: flex; flex-direction: column; justify-content: center; gap: 2.8rem;
}
.faq-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--white-mid);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
    0 100%
  );
  z-index: 0;
}
.faq-hero__panel > * { position: relative; z-index: 1; }
@media (max-width: 992px) { .faq-hero__panel { --chamfer: 2.8rem; } }
@media (max-width: 575px) { .faq-hero__panel { --chamfer: 2.4rem; padding: 3.2rem 2rem; min-height: 0; } }

/* лейбл-хинт над полем поиска (основной шрифт капсом, жирнее — владелец, 19.07) */
.faq-hero__panel-hint {
  margin-bottom: -1.4rem;
  font-family: var(--font-sans); font-weight: 600;
  font-size: 1.4rem; line-height: 100%; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--brand-main-base);
}
.faq-hero__panel .faq-search-hero { max-width: none; z-index: 5; }

/* поиск-линия внутри плашки: прозрачное поле + нижняя линия, фикс. высота 6rem */
.faq-hero__panel .faq-search {
  background-color: transparent; height: 6rem; padding: 0;
  border-bottom: 0.1rem solid rgba(55, 61, 66, 0.2);
}
.faq-hero__panel .faq-search:focus-within { border-bottom-color: var(--brand-main-base); }
.faq-hero__panel .faq-search .input-style { background-color: transparent; font-size: 1.8rem; }
.faq-hero__panel .faq-search__clear { width: 2.4rem; height: 2.4rem; }

/* ── Раскладка героя «Вопросы справа» (.faq-hero--split) — дефолт хаба ── */
.faq-hero--split .faq-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 92.4rem);
  column-gap: 7rem;
  align-items: start;
  grid-template-areas:
    "title title"
    "lead  panel"
    "proof panel";
  grid-template-rows: auto auto 1fr;
  margin-top: 3.2rem;
}
.faq-hero--split .faq-hero__text { display: contents; }
.faq-hero--split .faq-page__title { grid-area: title; margin: 0 0 2.4rem; }
.faq-hero--split .faq-page__lead {
  grid-area: lead; align-self: start; margin: 8rem 0 0; max-width: 52rem;
  font-size: var(--size-body-m); line-height: 132%;
}
.faq-hero--split .faq-hero__cta { display: none; }
.faq-hero--split .faq-hero__experts { grid-area: proof; align-self: end; }
.faq-hero--split .faq-hero__panel {
  grid-area: panel;
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: 2.4rem; padding: 3.2rem; min-height: 0;
  margin-top: 8rem;
}
.faq-hero--split .faq-search-hero { max-width: none; }

/* блок 3 экспертов в герое (аватары-кружки + подпись справа) */
.faq-hero__experts { display: flex; flex-direction: row; align-items: center; gap: 1.6rem; }
.faq-hero__experts-faces { flex: 0 0 auto; display: flex; }
.faq-hero__experts-faces .face {
  width: 5rem; height: 5rem; border-radius: 50%;
  border: 0.2rem solid var(--bg-color); margin-left: -1.2rem;
  overflow: hidden; filter: grayscale(1); background-color: var(--white-base);
}
.faq-hero__experts-faces .face:first-child { margin-left: 0; }
.faq-hero__experts-faces .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* основной шрифт капсом, жирнее — владелец, 19.07 */
.faq-hero__experts-cap {
  max-width: 26rem;
  font-family: var(--font-sans); font-weight: 600;
  font-size: 1.3rem; line-height: 130%; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--brand-main-mid); text-wrap: balance;
}

/* мобильный поток split-героя */
@media (max-width: 992px) {
  .faq-hero--split .faq-hero__grid {
    display: flex; flex-direction: column; row-gap: 0; margin-top: 2rem;
  }
  .faq-hero--split .faq-page__title { order: 1; margin-bottom: 1.6rem; }
  .faq-hero--split .faq-page__lead { order: 2; align-self: stretch; margin: 0 0 2.4rem; }
  .faq-hero--split .faq-hero__panel { order: 3; padding: 2.8rem 2rem; margin-top: 0; }
  .faq-hero--split .faq-hero__experts {
    order: 5; margin-top: 4rem;
    align-self: flex-start; justify-content: flex-start; margin-left: 0;
  }
  .faq-hero__experts-cap .cap-br { display: none; }
}

/* заголовок и лид хаба */
.faq-page__title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--size-headings-h1);
  line-height: 94%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--brand-main-base);
}
.faq-page__lead {
  margin: 0;
  max-width: 46rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-body-m);
  line-height: 120%;
  letter-spacing: -0.03em;
  color: var(--brand-main-mid);
  text-wrap: pretty;
}

/* стек секций под героем */
.faq-page__stack {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  margin-top: 12rem;
  /* воздух до подвала — тем же шагом, что между секциями (владелец 21.07:
     плашка «Не нашли ответ?» сливалась с подвалом) */
  margin-bottom: 8rem;
}
@media (max-width: 992px) { .faq-page__stack { gap: 4.8rem; margin-top: 7rem; margin-bottom: 4.8rem; } }

/* обёртки секций хаба */
.faq-hub__section {
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
}
.faq-hub__section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}
.faq-hub__h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 7rem;
  line-height: 94%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--brand-main-base);
}
@media (max-width: 992px) { .faq-hub__h2 { font-size: 3.8rem; } }
@media (max-width: 575px) { .faq-hub__h2 { font-size: 2.8rem; } }
.faq-hub__section-aside {
  margin: 0;
  max-width: 52rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-body-s);
  line-height: 120%;
  letter-spacing: -0.03em;
  color: var(--brand-main-mid);
  text-wrap: pretty;
}


/* ============================================================================
   3. ХАБ — ПОИСК-АВТОКОМПЛИТ: обёртка, кнопка очистки, дропдаун подсказок
   База .faq-search — НОВАЯ (бежевый блок с лупой; внутри переиспользуется
   живой .input-style). На хабе фон/высота переопределены выше (поиск-линия).
   ============================================================================ */
.faq-search {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  height: 6rem;
  padding: 0 1.6rem;
  background-color: var(--brand-third-base);
  /* I-beam над всей строкой поиска, не только над input (владелец, 21.07);
     клик в любую точку формы фокусирует input — см. voprosy.js */
  cursor: text;
}
.faq-search__clear { cursor: pointer; }
.faq-search__icon {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--brand-main-mid);
}
.faq-search__icon svg { display: block; width: 100%; height: 100%; }
.faq-search .input-style {
  flex: 1 1 auto;
  border-bottom: none;
  padding: 0;
}
/* гасим нативный крестик type="search" — у нас своя кнопка .faq-search__clear */
.faq-search .input-style::-webkit-search-cancel-button,
.faq-search .input-style::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
@media (max-width: 575px) { .faq-search { height: 5.2rem; } }

.faq-search-hero {
  position: relative;
  max-width: 72rem;
}
.faq-search__clear {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--brand-main-mid);
  cursor: pointer;
  transition: color 0.3s;
}
.faq-search__clear.is-visible { display: inline-flex; }
.faq-search__clear:hover { color: var(--brand-main-base); }
.faq-search__clear .icon-close { font-size: 1.2rem; line-height: 1; }

/* дропдаун автокомплита */
.faq-search__suggestions {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 20;
  display: none;
  max-height: 42rem;
  overflow-y: auto;
  background-color: var(--white-base);
  border: 0.1rem solid var(--brand-main-low);
}
.faq-search__suggestions.is-active { display: block; }
.faq-suggest-group {
  padding: 1.2rem 1.6rem 0.6rem;
  /* основной шрифт капсом, жирнее — владелец, 19.07 */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 100%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--brand-main-mid);
}
.faq-suggest-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.6rem;
  padding: 1.2rem 1.6rem;
  text-decoration: none;
  color: var(--brand-main-base);
  cursor: pointer;
  transition: background-color 0.15s;
}
.faq-suggest-item:hover,
.faq-suggest-item.is-highlight {
  background-color: var(--brand-second-low);
}
.faq-suggest-item__text {
  min-width: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--brand-main-base);
}
.faq-suggest-item__text mark {
  background-color: var(--brand-second-mid);
  color: var(--brand-main-base);
  font-weight: 600;
  padding: 0 0.1rem;
}
.faq-suggest-item__meta {
  flex: 0 0 auto;
  /* основной шрифт капсом, жирнее — владелец, 19.07 */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 100%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--brand-main-mid);
  white-space: nowrap;
}
.faq-suggest-empty {
  padding: 2rem 1.6rem;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  line-height: 130%;
  letter-spacing: -0.02em;
  color: var(--brand-main-mid);
}
@media (max-width: 575px) {
  .faq-suggest-item__text { font-size: 1.4rem; }
}


/* ============================================================================
   4. ХАБ — «ЧАСТО ИЩУТ» (.faq-queries*) + чипы-теги .blog-tags / .blog-tag
   ============================================================================ */
.faq-queries {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 1.6rem;
  align-self: stretch;
  width: 100%;
}
.faq-queries__label {
  /* основной шрифт капсом, жирнее — владелец, 19.07 */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 100%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--brand-main-mid);
}
.faq-queries .blog-tags { gap: 0.8rem; }

/* тело панели «Часто ищут» (теги по левому краю + CTA) — раскладка хаба */
.faq-hero__panel .faq-queries {
  width: auto; display: flex; flex-direction: column;
  align-items: flex-start; text-align: left; margin-top: 3.2rem;
}
.faq-hero__panel .faq-queries__label { width: 100%; text-align: left; }
.faq-hero__panel .faq-queries .blog-tags { margin-top: 1.2rem; }
@media (max-width: 575px) { .faq-hero__panel .faq-queries { margin-top: 1.6rem; } }

.faq-queries__cta { margin-top: 4.8rem; width: 100%; max-width: none; justify-content: center; }
@media (max-width: 575px) { .faq-queries__cta { margin-top: 2.8rem; } }

/* чипы «Часто ищут» в плашке: серые → беж на ховере */
.faq-hero__panel .blog-tag { background-color: var(--brand-third-base); color: var(--brand-main-base); }
.faq-hero__panel .blog-tag:hover { background-color: var(--brand-second-mid); color: var(--brand-main-base); }

/* ⚠ УСЛОВНЫЙ БЛОК (provenance .blog-tag). Базовые правила .blog-tags/.blog-tag —
   это компонент блога /poleznoe/ (blog.css). На момент сдачи раздел /poleznoe/
   ещё не опубликован (404), поэтому в боевом styles.css этих правил может НЕ быть —
   оставляем их здесь, чтобы чипы «Часто ищут» отрисовались автономно.
   ЕСЛИ blog.css уже влит в бандл (опубликован /poleznoe/) — УДАЛИТЬ этот базовый
   блок (.blog-tags/.blog-tag/:hover/--active + @media), оставив только
   скоуп-оверрайды выше (.faq-queries .blog-tags / .faq-hero__panel .blog-tag),
   чтобы не задвоить живой класс. Сверить базовые свойства с боевым перед удалением. */
.blog-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.2rem;
  padding: 0 1.6rem;
  background-color: var(--brand-second-base);
  color: var(--brand-main-base);
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: 100%;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s;
}
.blog-tag:hover,
.blog-tag--active { background-color: var(--brand-second-mid); }
@media (max-width: 575px) { .blog-tag { font-size: 1.4rem; } }


/* ============================================================================
   5. РУБРИКИ-СЕТКА (.faq-rubrics--tiles / --tiles3) + карточка .faq-rubric*
   Хаб = --tiles (2 в ряд), «Связанные темы» рубрики = --tiles3 (3 в ряд).
   ============================================================================ */
.faq-rubric {
  text-decoration: none;
  color: var(--brand-main-base);
  background-color: var(--white-base);
  transition: background-color 0.3s;
}
.faq-rubric:hover,
.faq-rubric:focus-visible { background-color: var(--brand-third-base); }

.faq-rubric__title {
  grid-area: title;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 2rem;
  line-height: 100%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--brand-main-base);
}
.faq-rubric__count {
  grid-area: count;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 100%;
  letter-spacing: -0.02em;
  color: var(--brand-main-mid);
  white-space: nowrap;
}
.faq-rubric__desc {
  grid-area: desc;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 130%;
  letter-spacing: -0.02em;
  color: var(--brand-main-mid);
  text-wrap: pretty;
}
.faq-rubric__arrow {
  grid-area: arrow;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--brand-main-base);
  overflow: visible;
}
.faq-rubric__arrow .icon { font-size: 1.8rem; line-height: 1; }
.faq-rubric:hover .icon-btn_arrow::before {
  animation: 0.3s forwards MoveRightInitial,
             0.5s 0.3s forwards MoveRightEnd;
}
@media (max-width: 575px) { .faq-rubric__title { font-size: 1.8rem; } }

/* --tiles — карточки 2-в-ряд */
.faq-rubrics--tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: stretch;
}
.faq-rubrics--tiles .faq-rubric {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "title title"
    "desc  desc"
    "count arrow";
  column-gap: 1.6rem;
  row-gap: 1.6rem;
  padding: 2.8rem;
}
.faq-rubrics--tiles .faq-rubric__desc {
  align-self: stretch;
  border-bottom: 0.1rem solid var(--brand-main-low);
  padding-bottom: 1.6rem;
}
.faq-rubrics--tiles .faq-rubric__count { align-self: center; }
.faq-rubrics--tiles .faq-rubric__arrow { justify-self: end; align-self: center; }
@media (max-width: 768px) { .faq-rubrics--tiles { grid-template-columns: 1fr; } }

/* --tiles3 — плитки 3-в-ряд (блок «Связанные темы») */
.faq-rubrics--tiles3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: stretch;
}
.faq-rubrics--tiles3 .faq-rubric {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "title title" "desc desc" "count arrow";
  column-gap: 1.6rem;
  row-gap: 1.4rem;
  padding: 2.4rem;
}
.faq-rubrics--tiles3 .faq-rubric__desc { align-self: stretch; border-bottom: 0.1rem solid var(--brand-main-low); padding-bottom: 1.4rem; }
.faq-rubrics--tiles3 .faq-rubric__count { align-self: center; }
.faq-rubrics--tiles3 .faq-rubric__arrow { justify-self: end; align-self: center; }
@media (max-width: 992px) { .faq-rubrics--tiles3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .faq-rubrics--tiles3 { grid-template-columns: 1fr; } }

/* Ховер плиток рубрик хаба — «уголок сертификата»: квадрат в цвет фона прячет
   правый верхний угол и уезжает поворотом, открывая диагональную стрелку (\e800). */
#faq-rubrics .faq-rubric { position: relative; overflow: hidden; }
#faq-rubrics .faq-rubric,
#faq-rubrics .faq-rubric:hover,
#faq-rubrics .faq-rubric:focus-visible { background-color: var(--white-mid); }
#faq-rubrics .faq-rubric > * { position: relative; z-index: 1; }
#faq-rubrics .faq-rubric__desc { font-size: 1.6rem; }
#faq-rubrics .faq-rubric::after {
  content: "";
  display: block; width: 6.4rem; height: 6.4rem;
  position: absolute; top: -3.2rem; right: -3.2rem;
  background-color: var(--bg-color);
  /* Покой = боевой docs-item (ипотека): hover анимирует только translate,
     уголок уезжает по прямой без докрута на 180° (владелец, 19.07). */
  transform: rotate(-135deg); transition: transform 0.5s; z-index: 2;
}
#faq-rubrics .faq-rubric:hover::after,
#faq-rubrics .faq-rubric:focus-visible::after {
  transform: rotate(-135deg) translateX(4rem) translateY(4rem);
}
#faq-rubrics .faq-rubric::before {
  content: "\e800";
  font-family: "fontello"; font-style: normal; font-weight: normal;
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 0.9rem; right: 0.9rem;
  width: 3rem; height: 3rem; font-size: 1.8rem; line-height: 1;
  color: var(--brand-main-base); transform: rotate(-45deg);
  opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 3;
}
#faq-rubrics .faq-rubric:hover::before,
#faq-rubrics .faq-rubric:focus-visible::before { opacity: 1; }
#faq-rubrics .faq-rubric__arrow { display: none; }
/* стрелку-аффорданс прячем (ведёт угол), счётчику даём воздух справа */
#faq-rubrics.faq-rubrics--tiles .faq-rubric__desc { padding-right: 7%; }
#faq-rubrics.faq-rubrics--tiles .faq-rubric { grid-template-columns: 1fr auto; }
/* счётчик «N вопросов» — основной шрифт капсом, жирнее (владелец, 19.07) */
#faq-rubrics.faq-rubrics--tiles .faq-rubric__count {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 1.1rem; text-transform: uppercase; justify-self: start;
}


/* ============================================================================
   6. ХАБ — «САМЫЕ ЧАСТЫЕ» (.faq-spotlight) — надстройка над .faq-list--help
   Чистый нумерованный аккордеон в рамке, на десктопе пункт в 2 колонки.
   ============================================================================ */
.faq-spotlight .faq-hub__section { gap: 4.4rem; }
.faq-spotlight .faq-hub__section-head { gap: 2.4rem; }
.faq-spotlight .faq-list--help { border: 0.1rem solid var(--brand-main-low); }
.faq-spotlight .faq-list--help .faq-item { border-top-color: rgba(55, 61, 66, 0.2); }
.faq-spotlight .faq-list--help .item-title { align-items: flex-start; }
.faq-spotlight .faq-answer { display: block; }
.faq-spotlight .faq-brief {
  flex: 1 1 auto; max-width: none; padding: 0;
  background: none; border: none;
  font-size: 1.7rem; line-height: 132%;
  color: var(--brand-main-mid);
}
@media (min-width: 993px) {
  .faq-spotlight .faq-list--help .faq-item {
    display: grid; position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 4rem; align-items: start;
  }
  .faq-spotlight .faq-list--help .item-title { grid-column: 1; padding-right: 2.4rem; }
  .faq-spotlight .faq-list--help .item-descr { grid-column: 2; margin-top: 0; padding-right: 6.4rem; max-width: 90%; }
}
@media (max-width: 575px) { .faq-spotlight .faq-brief { font-size: 1.6rem; } }


/* ============================================================================
   7. СПРАВОЧНЫЙ АККОРДЕОН — надстройка .faq-list--help над живым .faq-list
   Живой каркас (accordion.css) НЕ дублируем; здесь только модификатор раскладки
   и тело ответа (.faq-answer / .faq-brief / .faq-more / .faq-tier__body).
   ============================================================================ */
.faq-list--help .faq-item {
  display: block;
  padding: 3.2rem 1.6rem;
  border-top: 0.1rem solid var(--brand-third-base);
}
.faq-list--help .item-title {
  min-height: 4.8rem;
  column-gap: 1.6rem;
  padding-right: 6.4rem;
}
.faq-list--help .item-link {
  top: 3.2rem;
  right: 1.6rem;
}
.faq-list--help .item-descr {
  max-width: none;
  margin-top: 3.2rem;
}
/* display открытого ответа НЕ трогаем по .active — им владеет jQuery-инлайн
   (slideDown/slideUp боевого common.js), иначе анимация умирает (§15).
   Интервалы детей — margin-правила §15, не gap. */

/* тело ответа: бриф | (на хабе — простой текст) */
.faq-answer {
  display: flex;
  align-items: flex-start;
  gap: 3.2rem;
  width: 100%;
}

/* выноска-резюме (бежевая, левый акцент 4px) */
.faq-brief {
  flex: 0 0 42rem;
  max-width: 42rem;
  padding: 2rem 2.4rem;
  background-color: rgba(235, 211, 175, 0.3);
  border: 0.1rem solid var(--brand-second-mid);
  border-left-width: 0.4rem;
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: 110%;
  letter-spacing: -0.03em;
  color: var(--brand-main-base);
}
.faq-brief p { font: inherit; color: inherit; }
.faq-brief p + p { margin-top: 1.6rem; }

/* инлайн-ссылка «подробнее» + стрелка */
.faq-more {
  display: block;
  align-self: flex-start;
  /* основной шрифт капсом, жирнее — владелец, 19.07; 1.4→1.3rem («чуть меньше», владелец 19.07 v3) */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--brand-second-strong);
  text-decoration: none;
  transition: color 0.3s;
}
.faq-more .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  top: -0.06em;
  margin-left: 1rem;
  width: 1.2rem;
  height: 1.6rem;
  font-size: 1.2rem;
  line-height: 1;
  overflow: hidden;
}
.faq-more .icon-slider_arrow::before { display: block; }
.faq-more:hover { color: var(--brand-main-base); }
.faq-more:hover .icon-slider_arrow::before {
  animation: 0.3s forwards MoveRightInitial,
             0.5s 0.3s forwards MoveRightEnd;
}

/* расширенный ответ под капсулой (в рубрике — item_detail) */
.faq-tier__body { display: flex; flex-direction: column; gap: 1.6rem; }
.faq-tier__body p {
  margin: 0;
  font-family: var(--font-sans); font-weight: 400;
  font-size: 1.7rem; line-height: 140%; letter-spacing: -0.02em;
  color: var(--brand-main-base); max-width: none;
}
@media (max-width: 575px) { .faq-tier__body p { font-size: 1.5rem; } }

/* Раскладка ответа рубрики (порт demo rubric-page.css — потерялась при сборке файла):
   .faq-tiers растягивает капсулу на всю колонку; без неё .faq-brief падает
   в спотлайтовый стиль 42rem и выглядит «сжатым». */
.faq-tiers { display: flex; flex-direction: column; gap: 2.8rem; }
.faq-tiers .faq-tier--quick .faq-brief {
  flex: none; max-width: none; width: 100%;
  font-size: 1.7rem; line-height: 132%;
}
.faq-tiers + .faq-more { margin-top: 2.6rem; }
@media (max-width: 575px) {
  .faq-tiers { gap: 2.2rem; }
  .faq-tiers .faq-tier--quick .faq-brief { font-size: 1.6rem; }
}

/* Якоря #qN / #rubrics-title: шапка боевого fixed ≈5.3rem — без отступа
   вопрос уезжает под неё при переходе по ссылке оглавления. */
.rubric-page .faq-item[id],
.faq-page #rubrics-title { scroll-margin-top: 8rem; }

/* адаптив справочного аккордеона + брифа/ссылки */
@media (max-width: 992px) {
  .faq-list--help .faq-item { padding: 2rem 1.6rem; }
  .faq-list--help .item-title { min-height: 3.2rem; padding-right: 4.8rem; }
  .faq-list--help .item-link { top: 2rem; right: 1.6rem; }
  .faq-list--help .item-descr { margin-top: 2rem; padding-left: 0; padding-right: 0; }
  .faq-more .icon { margin-left: 0.45rem; }
  .faq-answer { flex-direction: column; gap: 2rem; }
  .faq-brief { flex: none; width: 100%; max-width: none; padding: 1.6rem; }
}
@media (max-width: 575px) {
  .faq-brief { font-size: 1.4rem; }
}


/* ============================================================================
   8. ЭКСПЕРТЫ (.faq-experts*) + строка автора (.faq-author*) + чип темы (.faq-topic)
   ============================================================================ */
.faq-experts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: var(--surface-base);
  background-color: var(--white-mid);
  border: 0.1rem solid var(--brand-main-low);
}
.faq-experts__header {
  margin: 0;
  align-self: stretch;
  padding-bottom: var(--surface-base);
  border-bottom: 0.1rem solid var(--brand-main-low);
  /* основной шрифт капсом, жирнее — владелец, 19.07 */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 100%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--brand-main-base);
}
.faq-experts__list {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  width: 100%;
}
.faq-experts__row {
  display: flex;
  flex-wrap: nowrap;            /* теги НЕ уходят вниз: текст роли переносится, чипы держатся справа */
  align-items: center;
  gap: 1.6rem 1.2rem;
  padding: 1.2rem 0;
  border-bottom: 0.1rem solid var(--brand-main-low);
}
.faq-experts__row .faq-author {
  flex: 1 1 auto;
  min-width: 0;                 /* позволяет тексту роли переноситься, а не выталкивать чипы вниз */
  align-items: center;
}
.faq-experts__topics {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
  flex: 0 1 auto;
  max-width: 50%;               /* чипы прижаты справа, при избытке переносятся в ряды в своей колонке */
}
.faq-experts__note {
  margin: 0;
  margin-top: 2.4rem;
  align-self: stretch;
  /* ширина 85% — владелец, 19.07 (68rem было слишком сжато) */
  max-width: 85%;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 120%;
  letter-spacing: -0.03em;
  color: var(--brand-main-mid);
}

/* строка автора: аватар-кружок + имя + роль */
.faq-author {
  display: inline-flex;
  align-items: center;
  column-gap: 1.2rem;
}
.faq-author__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  flex: 0 0 4rem;
  border-radius: 50%;
  background-color: var(--brand-main-base);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--brand-second-mid);
  overflow: hidden;
}
.faq-author__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.faq-author__info {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  min-width: 14rem;
}
.faq-author__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 100%;
  letter-spacing: -0.04em;
  color: var(--brand-main-base);
}
.faq-author__role {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 110%;
  letter-spacing: -0.03em;
  color: var(--brand-main-mid);
}

/* чип темы (sentence case — НЕ живой .tag); ссылкой — на рубрики эксперта, как в демо */
.faq-topic {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1rem;  /* вертикаль 0.4→0.6rem — чипы были узкие (владелец, 19.07) */
  background-color: var(--brand-third-base);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand-main-base);
  white-space: nowrap;
}
a.faq-topic {
  text-decoration: none;
  transition: background-color 0.3s;
}
a.faq-topic:hover {
  background-color: var(--brand-second-mid);
  color: var(--brand-main-base);
}

@media (max-width: 992px) {
  .faq-experts__note { font-size: 1.4rem; margin-top: 2rem; }
  /* воздух блока эксперта на мобиле (владелец, 21.07): --surface-base тут 1.6rem —
     вертикаль карточки и отбивку заголовка поднимаем отдельно от горизонтали */
  .faq-experts { padding: 2.4rem 1.6rem; }
  .faq-experts__header { padding-top: 0.4rem; padding-bottom: 2rem; }
}
@media (max-width: 575px) {
  .faq-experts__header { font-size: 1.2rem; }
  .faq-experts__row { flex-direction: column; align-items: flex-start; gap: 1.6rem; padding: 2.4rem 0; }
  /* max-width: none обязателен — базовое правило держит 50% и складывает чипы столбиком */
  .faq-experts__topics { flex: 1 1 100%; width: 100%; min-width: 0; max-width: none; justify-content: flex-start; }
  .faq-author__name { font-size: 1.6rem; }
  .faq-author__role { font-size: 1.4rem; }
}


/* ============================================================================
   9. CTA «НЕ НАШЛИ ОТВЕТ» (.faq-feedback*). Кнопка внутри — живой .primary-btn.
   Раскладка «два пути» (владелец, 19.07 — вариант A; блок СКВОЗНОЙ, единый
   на хабе и 9 рубриках): заголовок сверху, под ним две колонки-пути —
   «Спросить» (текст + телефон/Max/Telegram) и «Увидеть своими глазами»
   (текст + кнопка экскурсии). Контакты/кнопка прижаты к низу колонок.
   ============================================================================ */
.faq-feedback {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  width: 100%;
  padding: 2.4rem;
  background-color: var(--brand-third-base);
}
.faq-feedback__heading {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 7rem;
  line-height: 94%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--brand-main-base);
}
.faq-feedback__paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
.faq-feedback__path {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
}
/* лейбл пути — основной шрифт капсом (примерка 19.07 v2, владелец) */
.faq-feedback__path-label {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 1.4rem; line-height: 100%; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--brand-main-base);
}
.faq-feedback__sub {
  /* поджато по ширине — владелец, 19.07 */
  max-width: 56rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-body-m);
  line-height: 110%;
  letter-spacing: -0.04em;
  color: var(--brand-main-mid);
}
.faq-feedback__contacts {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
}
.faq-feedback__phone {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-headings-h3);
  line-height: 104%;
  letter-spacing: -0.03em;
  color: var(--brand-main-base);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s;
}
.faq-feedback__phone:hover { color: var(--brand-second-strong); }
.faq-feedback__path .primary-btn { margin-top: auto; }

@media (max-width: 992px) {
  .faq-feedback { gap: 2.4rem; padding: 2rem; }
  /* gap 3.2→4.8rem — «Telegram» и «Посмотрите дома» сливались на мобиле (владелец 21.07) */
  .faq-feedback__paths { grid-template-columns: 1fr; gap: 4.8rem; }
  .faq-feedback__heading { font-size: 3.8rem; }
  .faq-feedback__path .primary-btn { align-self: stretch; }
}
@media (max-width: 575px) {
  .faq-feedback { padding: 1.6rem; }
  .faq-feedback__heading { font-size: 2.8rem; }
  .faq-feedback__path .primary-btn { min-width: 0; padding: 0 1.6rem; height: auto; min-height: 5.2rem; }
  /* Одна строка всегда (владелец 21.07: кнопка «скакала в два этажа» при ховер-скрэмбле).
     Перенос убран: живой nowrap/overflow:hidden возвращается сам; текст 1.4rem — живой
     мобильный паттерн кнопок (styles.css: .btn-txt 1.4rem @моб), влезает с запасом. */
  .faq-feedback__path .primary-btn .btn-txt { font-size: 1.4rem; }
}

/* отбивка CTA на хабе (1:1 со страницей рубрики) */
.faq-page .faq-feedback { padding-top: 5.6rem; padding-bottom: 5.6rem; }
@media (max-width: 992px) { .faq-page .faq-feedback { padding-top: 4rem; padding-bottom: 4rem; } }
@media (max-width: 575px) { .faq-page .faq-feedback { padding-top: 3.2rem; padding-bottom: 3.2rem; } }


/* ============================================================================
   10. СТРАНИЦА РУБРИКИ — SHELL: .rubric-page / герой / тело / sticky-сайдбар
   ============================================================================ */
.rubric-page { padding: 0; }

/* герой рубрики */
.rubric-hero { position: relative; overflow: hidden; }
.rubric-hero .container { position: relative; z-index: 1; }
.rubric-hero__inner { padding: 13rem 0 5rem; }
@media (max-width: 992px) { .rubric-hero__inner { padding: 11rem 0 4rem; } }
@media (max-width: 575px) { .rubric-hero__inner { padding: 9rem 0 3.2rem; } }
.rubric-hero .breadcrumbs-row { margin-top: 0; }
/* ≤575 крошки уезжали за правый край (live nowrap) — переносим на вторую строку
   (решение владельца 21.07: перенос, не троеточие) */
@media (max-width: 575px) {
  :where(.faq-page, .rubric-page) .breadcrumbs-row ol { flex-wrap: wrap; row-gap: 0.8rem; }
}

.rubric-hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 6rem;
  align-items: end;
  margin-top: 2.8rem;
}
@media (max-width: 992px) {
  .rubric-hero__head { grid-template-columns: 1fr; row-gap: 2.4rem; align-items: start; margin-top: 2rem; }
}
.rubric-hero__titleblock { display: flex; flex-direction: column; gap: 1.8rem; }
.rubric-hero__title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  /* H1 рубрики крупнее заголовков секций (тир .page-title 8/4.6/3rem). */
  font-size: 8rem;
  line-height: 96%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--brand-main-base);
}
@media (max-width: 992px) { .rubric-hero__title { font-size: 4.6rem; } }
@media (max-width: 575px) { .rubric-hero__title { font-size: 3rem; } }
.rubric-hero__lead {
  margin: 0;
  max-width: 56ch;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-body-m);
  line-height: 120%;
  letter-spacing: -0.03em;
  color: var(--brand-main-mid);
  text-wrap: pretty;
}

/* модификатор компактного героя: бежевая полоса + орнамент в правом верхнем углу */
.rubric-hero--compact { background-color: var(--brand-third-base); }
.rubric-hero--compact .rubric-hero__inner { padding-bottom: 4rem; }
@media (max-width: 575px) { .rubric-hero--compact .rubric-hero__inner { padding-bottom: 2.8rem; } }
.rubric-hero--compact::before {
  content: "";
  position: absolute;
  top: -8rem; right: -1.8rem;
  width: 60.7rem; height: 60.7rem;
  background: url("../images/svg/main_bg.svg") center / cover no-repeat;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 992px) {
  .rubric-hero--compact::before { width: 32rem; height: 32rem; top: -7rem; right: -1rem; }
}
@media (max-width: 575px) {
  .rubric-hero--compact::before { width: 24rem; height: 24rem; }
}

/* тело страницы */
.rubric-body { padding-block: 5rem 7rem; }
@media (max-width: 992px) { .rubric-body { padding-block: 3.6rem 5rem; } }
.rubric-body__stack { display: flex; flex-direction: column; gap: 6rem; }
@media (max-width: 992px) { .rubric-body__stack { gap: 4.4rem; } }
/* ≤575 секции хвоста слипались (владелец, 21.07) — держим отбивку ближе к десктопной */
@media (max-width: 575px) { .rubric-body__stack { gap: 5.6rem; } }

/* раскладка «sticky-сайдбар (TOC) + список вопросов» */
.rubric-layout--aside {
  display: grid;
  /* граница «навигация → вопросы» на направляющей 47.6rem (41.6 + gap 6) */
  grid-template-columns: 41.6rem minmax(0, 1fr);
  column-gap: 6rem;
  align-items: start;
}
@media (max-width: 1200px) { .rubric-layout--aside { column-gap: 4rem; } }
@media (max-width: 992px) { .rubric-layout--aside { grid-template-columns: 1fr; row-gap: 3.6rem; } }

.rubric-aside {
  position: sticky;
  top: 6.5rem;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}
@media (max-width: 992px) { .rubric-aside { position: static; top: auto; } }

/* заголовок-блок списка вопросов */
.rubric-list__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.8rem;
}
.rubric-list__title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  /* размер H3-секции (иерархия: H1 hero 8rem → H2 CTA 7rem → H3 секции). */
  font-size: var(--size-headings-h3);
  line-height: 104%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--brand-main-base);
}
.rubric-list__hint {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 100%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--brand-main-mid);
}
@media (max-width: 575px) {
  .rubric-list__head { flex-direction: column; gap: 0.8rem; margin-bottom: 2rem; }
  .rubric-list__title { font-size: 2rem; }
}

/* .rubric-flow — одноколоночный аккордеон во всю ширину колонки вопросов */
.rubric-flow { max-width: 96rem; }
.rubric-flow .faq-list .faq-item { grid-template-columns: 1fr; }
.rubric-flow .faq-list .item-descr {
  grid-column: 1 / -1;
  max-width: none;
  margin-top: 2.4rem;
}
/* display по .active не задаём — см. §15 (jQuery-инлайн владеет показом). */
@media (max-width: 992px) {
  .rubric-flow .faq-list .item-descr { padding: 0; margin-top: 2rem; }
}

/* отбивка CTA «Не нашли ответ» на странице рубрики (больше воздуха) */
.rubric-page .faq-feedback { padding-top: 5.6rem; padding-bottom: 5.6rem; }
@media (max-width: 992px) { .rubric-page .faq-feedback { padding-top: 4rem; padding-bottom: 4rem; } }
@media (max-width: 575px) { .rubric-page .faq-feedback { padding-top: 3.2rem; padding-bottom: 3.2rem; } }


/* ============================================================================
   11. TOC (sticky-оглавление рубрики) + скин навигации data-nav="Светлый"
   ============================================================================ */
.toc {
  position: sticky;
  top: 11rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 2.4rem;
  background-color: var(--brand-second-base);
}
/* внутри уже sticky-сайдбара TOC делаем static (без двойного липкого) */
.rubric-aside .toc { position: static; top: auto; }
.toc__head {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--brand-main-base);
}
.toc__list { display: flex; flex-direction: column; }
.toc__item {
  display: flex;
  align-items: stretch;
  gap: 1.6rem;
  padding: 1.6rem;
  text-decoration: none;
  transition: background-color 0.3s;
}
.toc__indicator {
  flex: 0 0 0.2rem;
  width: 0.2rem;
  background-color: var(--brand-main-low);
  transition: background-color 0.3s, flex-basis 0.3s;
}
.toc__label { display: flex; align-items: flex-start; gap: 1.2rem; }
.toc__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--brand-main-mid);
  transition: color 0.3s;
}
.toc__title {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--brand-main-mid);
  transition: color 0.3s;
}
.toc__item:hover { background-color: var(--white-mid); }
.toc__item.is-active { background-color: var(--brand-second-mid); }
.toc__item.is-active .toc__indicator {
  background-color: var(--brand-main-base);
  flex-basis: 0.3rem;
  width: 0.3rem;
}
.toc__item.is-active .toc__num,
.toc__item.is-active .toc__title { color: var(--brand-main-base); }
@media (max-width: 992px) {
  .toc { position: relative; top: 0; padding: 1.6rem; }
}

/* скин навигации «Светлый» (data-nav на .rubric-page — production-дефолт шаблона) */
.rubric-page[data-nav="Светлый"] .toc {
  background-color: color-mix(in oklab, var(--brand-third-base) 50%, var(--white-base));
}


/* ============================================================================
   12. СКИН АККОРДЕОНА «МАТКАПИТАЛ» (.rubric-skin--capital)
   Панели как use-accordion: без рамки и номеров, светлые с зазором, открытый
   пункт залит бежевым, тоггл сохранён. Привязано к реальному селектору шаблона:
   .rubric-page .faq-list (список = .faq-list[data-accordion="single"], атрибута
   data-rubric-list в production НЕТ — заменено на .rubric-page .faq-list).
   ============================================================================ */
.rubric-skin--capital .faq-list { border: none; }
.rubric-skin--capital .faq-list .faq-item {
  margin-top: 0.4rem;
  border-top: none;
  padding: 2.8rem 8rem 2.8rem 4rem;
  background-color: var(--white-mid);
  transition: background-color 0.3s;
}
.rubric-skin--capital .faq-list .faq-item:first-child { margin-top: 0; }
.rubric-skin--capital .faq-list .faq-item.active {
  background-color: color-mix(in oklab, var(--brand-third-base) 50%, var(--white-base));
}
/* без номерной плашки → ответ выравнивается прямо под текстом вопроса */
.rubric-skin--capital .faq-list .item-title::before { display: none; }
.rubric-skin--capital .faq-list .item-title { column-gap: 0; min-height: 4.8rem; }
.rubric-skin--capital .faq-list .item-descr { padding-left: 0; }
/* крестик по центру строки заголовка */
.rubric-skin--capital .faq-list .item-link { top: 2.8rem; }
/* ховер тоггла: нутро сливается с фоном СВОЕГО вопроса (владелец 21.07 — «без цвета»).
   ВАЖНО: --white-mid = rgba(255,255,255,.5) — ПОЛУПРОЗРАЧНЫЙ; напрямую в ::before он
   ложится на персиковый фон кнопки и даёт желтоватый крем (инцидент 21.07). Поэтому
   композитим НЕПРОЗРАЧНО: 50% белого поверх фона страницы (--bg-color = #eeebe5 =
   --brand-third-mid) = #f7f5f2 — живая тема хардкодит ровно его (.use-section hover). */
.rubric-skin--capital .faq-list .item-link:hover::before {
  background-color: color-mix(in srgb, var(--white-base) 50%, var(--brand-third-mid));
}
.rubric-skin--capital .faq-list .faq-item.active .item-link:hover::before {
  background-color: color-mix(in oklab, var(--brand-third-base) 50%, var(--white-base));
}
@media (max-width: 575px) {
  .rubric-skin--capital .faq-list .faq-item { padding: 2rem 1.6rem; }
  .rubric-skin--capital .faq-list .item-link { top: 2rem; }
}


/* ============================================================================
   13. МЕТКА ДАТЫ под H1 рубрики (.rubric-hero__upd--line)
   Условная подпись «Опубликовано / Обновлено» (см. project_dbrus_date_label_rule).
   ============================================================================ */
.rubric-hero__upd--line {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 1rem;
  margin-top: 2.6rem; padding-top: 1.6rem;
  border-top: 0.1rem solid var(--brand-main-low);
  /* «обычный, не заголовочный» (владелец 21.07) = Inter 600 капсом, не mono */
  font-family: var(--font-sans); font-weight: 600; font-size: 1.4rem;
  line-height: 100%; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--brand-main-mid);
}
.rubric-hero__upd--line b { color: var(--brand-main-base); font-weight: 600; }


/* ============================================================================
   14. «СВЯЗАННЫЕ ТЕМЫ» (.rubric-related) — плитки .faq-rubric (--tiles3)
   с ховером «уголок сертификата» (тот же приём, что у плиток рубрик хаба).
   ============================================================================ */
.rubric-related__rubrics .faq-rubric { position: relative; overflow: hidden; }
.rubric-related__rubrics .faq-rubric,
.rubric-related__rubrics .faq-rubric:hover,
.rubric-related__rubrics .faq-rubric:focus-visible { background-color: var(--white-mid); }
.rubric-related__rubrics .faq-rubric > * { position: relative; z-index: 1; }
.rubric-related__rubrics .faq-rubric__title { padding-right: 3.6rem; }
/* счётчик «N вопросов» / «Статья» — как на карточках хаба (владелец, 19.07) */
.rubric-related__rubrics .faq-rubric__count {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 1.1rem; text-transform: uppercase;
}
.rubric-related__rubrics .faq-rubric::after {
  content: "";
  display: block;
  width: 6.4rem; height: 6.4rem;
  position: absolute; top: -3.2rem; right: -3.2rem;
  background-color: var(--bg-color);
  /* покой = боевой docs-item: hover анимирует только translate (19.07) */
  transform: rotate(-135deg);
  transition: transform 0.5s;
  z-index: 2;
}
.rubric-related__rubrics .faq-rubric:hover::after,
.rubric-related__rubrics .faq-rubric:focus-visible::after {
  transform: rotate(-135deg) translateX(4rem) translateY(4rem);
}
.rubric-related__rubrics .faq-rubric::before {
  content: "\e800";
  font-family: "fontello"; font-style: normal; font-weight: normal;
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 0.9rem; right: 0.9rem;
  width: 3rem; height: 3rem;
  font-size: 1.8rem; line-height: 1;
  color: var(--brand-main-base);
  transform: rotate(-45deg);
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none; z-index: 3;
}
.rubric-related__rubrics .faq-rubric:hover::before,
.rubric-related__rubrics .faq-rubric:focus-visible::before { opacity: 1; }
.rubric-related__rubrics .faq-rubric__arrow { display: none; }

/* ============================================================================
   КОНЕЦ voprosy.css
   ============================================================================ */


/* ============================================================================
   15. ПОРТ ЖИВЫХ КОМПОНЕНТОВ (сверка с боевым styles.css 21.07.2026)
   Правила, которые на боевом ЕСТЬ, но скоупнуты под чужие корни
   (.faq-section__content / .faq-main__content / .use-section__content),
   либо которых на боевом нет вовсе. Всё — только внутри .faq-page/.rubric-page.
   :where() снижает специфичность на класс, чтобы модификаторы §6-§12 выше
   продолжали выигрывать (порядок каскада как в демо: accordion.css → модификаторы).
   ============================================================================ */

/* --- 15.1 Каркас аккордеона (боевой даёт его только внутри .faq-section__content) --- */
:where(.faq-page, .rubric-page) :where(.faq-list) { counter-reset: item 0; }

/* position:relative — опора для абсолютного тоггла; counter — нумерация «Самых частых» */
:where(.faq-page, .rubric-page) :where(.faq-list) .faq-item {
  position: relative;
  counter-increment: item 1;
}
:where(.faq-page, .rubric-page) :where(.faq-list) .faq-item:first-child { border-top: none; }

/* Вопрос: без этого правила h2/h3 падает в 1.6rem обычного начертания цветом --txt-main */
:where(.faq-page, .rubric-page) :where(.faq-list) .item-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  column-gap: 3.2rem;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 2rem;
  line-height: 100%;
  font-weight: 600;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--brand-main-base);
  cursor: pointer;
}
:where(.faq-page, .rubric-page) :where(.faq-list) .item-title:hover { color: var(--brand-second-strong); }
@media (max-width: 992px) {
  :where(.faq-page, .rubric-page) :where(.faq-list) .item-title {
    padding: 0 4rem 0 0; font-size: 1.8rem; column-gap: 1.6rem;
  }
}
@media (max-width: 575px) {
  :where(.faq-page, .rubric-page) :where(.faq-list) .item-title { font-size: 1.6rem; line-height: 120%; }
}

/* Номерная плашка. На рубрике её гасит .rubric-skin--capital … ::before (0,3,1) — специфичность выше, порядок сохранён */
:where(.faq-page, .rubric-page) :where(.faq-list) .item-title::before {
  content: counter(item);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  flex: 0 0 2.8rem;
  border: 0.1rem solid var(--brand-main-low);
  background-color: var(--brand-main-low);
  font-family: var(--font-mono);
  font-size: 1.4rem;
  line-height: 100%;
  letter-spacing: -0.02em;
  color: var(--brand-main-base);
}
@media (max-width: 992px) {
  :where(.faq-page, .rubric-page) :where(.faq-list) .item-title::before {
    width: 2.7rem; height: 2.7rem; flex: 0 0 2.7rem;
  }
}

/* Закрытое состояние ответа. Без него ВСЕ ответы раскрыты при загрузке */
:where(.faq-page, .rubric-page) :where(.faq-list) .item-descr { display: none; }

/* Открытое состояние: CSS-правила display по .active НЕТ — намеренно.
   Показом владеет ТОЛЬКО jQuery-инлайн боевого common.js (slideDown/slideUp
   по .item-descr): класс .active переключается в том же клике мгновенно,
   и любое CSS-правило display по нему делает элемент видимым/скрытым ДО
   старта слайда — slideDown видит уже видимый элемент и не анимирует
   (баг «аккордеон щёлкает», найден владельцем 21.07).
   Стартово открытые вопросы получают style="display:block" в tpl.
   Интервалы детей — margin-правила ниже (gap под инлайновым block мёртв). */
.faq-page .faq-list--help .faq-item .item-descr > * + * { margin-top: 3.2rem; }
.rubric-page .rubric-flow .faq-list .faq-item .item-descr > * + * { margin-top: 2rem; }
@media (max-width: 992px) {
  .faq-page .faq-list--help .faq-item .item-descr > * + * { margin-top: 2rem; }
}
/* .faq-more объявлен display:block + align-self:flex-start; под block-родителем
   align-self не работает и ссылка растягивается на всю ширину — возвращаем по контенту */
.faq-page .faq-list .item-descr > .faq-more,
.rubric-page .faq-list .item-descr > .faq-more { width: -moz-fit-content; width: fit-content; }

/* Тоггл-крестик: на боевом позиционирование/плашка живут только в .faq-section__content */
:where(.faq-page, .rubric-page) :where(.faq-list) .item-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  background-color: var(--brand-second-mid);
  color: var(--brand-main-base);
  border: none;
  position: absolute;
  top: 3.1rem;
  right: 1.4rem;
  cursor: pointer;
  clip-path: polygon(16% 0%, 100% 0, 100% 0, 100% 84%, 84% 100%, 0 100%, 0 100%, 0% 16%);
}
:where(.faq-page, .rubric-page) :where(.faq-list) .item-link::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: calc(100% - 0.4rem);
  height: calc(100% - 0.4rem);
  background-color: var(--brand-second-mid);
  clip-path: polygon(16% 0%, 100% 0, 100% 0, 100% 84%, 84% 100%, 0 100%, 0 100%, 0% 16%);
  transition: background-color 0.3s;
  pointer-events: none;
}
:where(.faq-page, .rubric-page) :where(.faq-list) .item-link:hover::before {
  background-color: var(--brand-third-mid);
}
@media (max-width: 992px) {
  :where(.faq-page, .rubric-page) :where(.faq-list) .item-link {
    width: 3.2rem; height: 3.2rem; top: 1.5rem; right: 1.6rem;
  }
}

/* Глиф креста: в покое повёрнут в «+», в .active — в «×» */
:where(.faq-page, .rubric-page) :where(.faq-list) .item-link .icon {
  pointer-events: none;
  position: relative;
  z-index: 1;
  font-size: 1.8rem;
  line-height: 1.8rem;
  color: var(--brand-main-base);
  transform: rotate(45deg);
  transition: transform 0.3s;
}
@media (max-width: 992px) {
  :where(.faq-page, .rubric-page) :where(.faq-list) .item-link .icon { font-size: 1.4rem; line-height: 1.4rem; }
}
.faq-page .faq-list .faq-item.active .item-link .icon,
.rubric-page .faq-list .faq-item.active .item-link .icon { transform: rotate(0deg); }


/* --- 15.2 .primary-btn: на боевом у класса padding:0 и НЕТ ни min-width, ни min-height
   (габариты боевые страницы задают per-instance: height:6rem / 5.2rem ≤575px).
   Без этого текст уезжает под срез clip-path 2.2rem, кнопка схлопывается по строке. --- */
:where(.faq-page, .rubric-page) .primary-btn {
  padding: 0 3.2rem;
  min-width: 28rem;
  min-height: 6rem;
  font-family: var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}
/* Анти-дребезг скрэмбла TextAnimator (боевой common.js вешает его на все .primary-btn):
   как на боевом — у каждой кнопки СВОЯ фиксированная ширина .btn-txt, коробка не меняет
   габариты при подмене букв; nowrap / overflow:hidden / text-align:left уже даёт
   глобальное боевое правило .primary-btn .btn-txt. Ширины замерены на боевой
   типографике 21.07.2026 (18.44 / 20.54 / 24.53rem) + запас до целого rem. */
.faq-page .faq-hero__cta .btn-txt { width: 19rem; }
.faq-page .faq-queries__cta .btn-txt { width: 21rem; }
:where(.faq-page, .rubric-page) .faq-feedback__path .primary-btn .btn-txt { width: 25rem; }
/* ≤575px текст одной строкой 1.4rem (§9), фикс-ширина пересчитана: 24.53rem замера
   боевой типографики (1.6rem) × 1.4/1.6 ≈ 21.5 → 22rem с запасом. Именно фикс-ширина +
   живой justify-content:center дают боевой вид: пара «текст+стрелка» по центру кнопки,
   скрэмбл ничего не двигает. flex:1 не годится — прижимал текст к левому краю (владелец 21.07). */
@media (max-width: 575px) {
  :where(.faq-page, .rubric-page) .faq-feedback__path .primary-btn .btn-txt { width: 22rem; }
}
/* бокс стрелки: на боевом задан только font-size/line-height */
:where(.faq-page, .rubric-page) .primary-btn .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
:where(.faq-page, .rubric-page) .primary-btn .icon::before {
  display: inline-block;
  font-size: 1.8rem;
  line-height: 1;
  vertical-align: middle;
}


/* --- 15.3 Утилита .icon: на боевом глобального правила .icon НЕТ ВООБЩЕ --- */
:where(.faq-page, .rubric-page) .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  color: currentColor;
}
/* боевой [class^=icon-]:before не задаёт display/width — глиф не в 1em-боксе */
:where(.faq-page, .rubric-page) [class^="icon-"]::before,
:where(.faq-page, .rubric-page) [class*=" icon-"]::before {
  display: inline-block;
  width: 1em;
  text-align: center;
}


/* --- 15.4 Первый экран хаба: боевое main > section:nth-of-type(1){padding-top:12rem}
   имеет специфичность (0,1,2) и перебивает .faq-hero{padding:13rem 0 8rem} (0,1,0).
   Возвращаем заложенный ритм 13/11/9rem, не трогая остальной сайт. --- */
main.faq-page > section:nth-of-type(1) { padding-top: 13rem; }
@media (max-width: 992px) { main.faq-page > section:nth-of-type(1) { padding-top: 11rem; } }
@media (max-width: 575px) { main.faq-page > section:nth-of-type(1) { padding-top: 9rem; } }

/* ============================================================================
   КОНЕЦ ПОРТА ЖИВЫХ КОМПОНЕНТОВ
   ============================================================================ */

/* ============================================================================
   16. МОБИЛЬНЫЕ ПРАВКИ ВЛАДЕЛЬЦА (22.07) — по семи скринам с телефона.
   Каждое значение подобрано замером на живом dbrus.ru при 390×844 (Playwright),
   в скобках — было → стало.
   ============================================================================ */

/* --- 16.1 Подсказки поиска: на телефоне одна колонка вместо двух.
   Базовый grid «minmax(0,1fr) auto» отдавал рубрике (white-space:nowrap) 116px
   из 314px, и вопрос сыпался по одному слову. Рубрика уходит второй строкой.
   (ширина текста 148px → 285px, высота карточки 95px → 78px) --- */
@media (max-width: 575px) {
  .faq-suggest-item {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.6rem;
    padding: 1.2rem 1.4rem;
  }
  .faq-suggest-item__meta { white-space: normal; font-size: 1.1rem; }
}

/* --- 16.2 Номерная плашка вопроса: на телефоне гасим, заголовку нужна ширина.
   Специфичность (0,3,1) — выше базового :where(...)-правила (0,1,1).
   На рубрике плашки и так нет (её гасит .rubric-skin--capital), правило безвредно.
   (ширина заголовка 318px без плашки и без column-gap) --- */
@media (max-width: 575px) {
  .faq-page .faq-list .item-title::before,
  .rubric-page .faq-list .item-title::before { display: none; }
  .faq-page .faq-list .item-title,
  .rubric-page .faq-list .item-title { column-gap: 0; }
}

/* --- 16.3 Теги эксперта: от левого края текста, а не от края аватара.
   5.2rem = аватар 4rem + gap 1.2rem (замер: имя x=87, чипы были x=33 → стали 87) --- */
@media (max-width: 575px) {
  .faq-experts__topics { padding-left: 5.2rem; }
}

/* --- 16.4 Воздух в шапке страницы: крошки → H1 → лид.
   Хаб и рубрика одинаково (21px → 33px и 17px → 25px) --- */
@media (max-width: 992px) {
  .faq-hero--split .faq-hero__grid { margin-top: 3.2rem; }
  .faq-hero--split .faq-page__title { margin-bottom: 2.4rem; }
  .rubric-hero__head { margin-top: 3.2rem; }
  .rubric-hero__titleblock { gap: 2.4rem; }
}

/* --- 16.5 Плейсхолдер поиска: многоточие вместо резкого обрыва слова.
   Без медиа-запроса: на широких экранах строка и так помещается --- */
.faq-search .input-style { text-overflow: ellipsis; }

/* --- 16.6 Примечание под экспертами: на телефоне во всю ширину контейнера
   (базовые 85% давали 270px из 320px) --- */
@media (max-width: 575px) {
  .faq-experts__note { max-width: none; }
}

/* --- 16.7 Кнопка экскурсии в CTA «Не нашли ответ»: отбивка от текста
   (17px → 33px — кнопка слипалась с абзацем) --- */
@media (max-width: 575px) {
  .faq-feedback__path .primary-btn { margin-top: 1.6rem; }
}