/* =========================================================
   СТРАНИЦА "ПОМОЩЬ" — стили, специфичные для страницы.
   Hero, .cta-strip и строка уведомлений — общие компоненты сайта,
   здесь не описаны.

   Язык оформления — тот же, что у каталога инструментов (tools.css):
   белая карточка на каждый раздел, плитка с иконкой в заголовке,
   строки, разделённые волосяными линиями, а не стена одинаковых
   рамок. На широком экране слева — липкое оглавление разделов,
   справа — вопросы.

   Логика поиска и аккордеона (main.js) завязана на классы
   .faq-item/.faq-question/.faq-answer/.faq-category, на .faq-jump-chip
   с .faq-jump-count и на id полей поиска — они не переименованы.

   Ответ раскрывается чистым CSS (grid-template-rows 0fr → 1fr), без
   измерения высоты скриптом: нет пересчёта на каждый кадр, нет
   устаревших высот после поворота экрана, смены шрифта или увеличения
   масштаба, и не нужен ResizeObserver на каждый открытый ответ.
   ========================================================= */

:root {
  /* Основной текст ответов: тёмнее --color-muted (у него на белом
     контраст около 3,6:1, для длинного текста мало), но мягче
     заголовков вопросов, чтобы сохранялась иерархия */
  --help-text: #3A4046;
  /* Второстепенный текст (счётчики, подписи): тот же тон, что у
     --color-muted, но с контрастом от 5:1 */
  --help-soft: #5D6E72;
  /* Ссылки в тексте: --color-accent-dark на белом даёт контраст
     около 2,6:1, поэтому берём более глубокий зелёный того же тона */
  --help-link: #0C8247;
  --help-line: rgba(43, 47, 51, 0.08);
}

/* =========================================================
   Каркас: поиск сверху, ниже — оглавление и вопросы
   ========================================================= */
/* Одна ширина на всё: поиск, оглавление и карточки. В одну колонку блок
   не шире 900px (ширина карточек); на широком экране ширину считают
   те же переменные, из которых собрана сетка, — иначе поиск торчал бы
   правее карточек (так было, когда предел сетки был задан отдельным
   числом). */
.help-layout {
  --help-rail: 236px;
  --help-gap: 40px;
  --help-content: 900px;
  max-width: var(--help-content);
  margin-bottom: 56px;
}

.help-search { margin-bottom: 20px; }

.faq-container {
  /* Браузерная «привязка прокрутки» пыталась удержать на месте
     произвольный элемент страницы, пока ответ раскрывается, и
     подправляла прокрутку на доли пикселя — текст дёргался. Внутри
     списка вопросов она не нужна. */
  overflow-anchor: none;
}

/* -----------------------------------------------------------
   Поиск
   ----------------------------------------------------------- */
.faq-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.faq-search-icon {
  position: absolute;
  left: 20px;
  color: var(--help-soft);
  font-size: 18px;
  pointer-events: none;
}

.faq-search-input {
  width: 100%;
  height: 58px;
  padding: 0 54px;
  background: var(--color-surface);
  border: 1.5px solid rgba(43, 47, 51, 0.1);
  border-radius: 16px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--color-text-strong);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.faq-search-input:hover { border-color: rgba(43, 47, 51, 0.2); }
.faq-search-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(29, 217, 122, 0.16);
}
/* Сайтовое общее правило input:focus-visible добавляет свой нативный
   outline поверх — вместе с локальным box-shadow это давало двойную
   рамку. Здесь фокус уже полностью показан через border+glow. */
.faq-search-input:focus-visible { outline: none; }
/* Подсказка темнее общего --color-muted: у него на белом контраст
   3,6:1, а здесь текст читают прежде, чем начнут вводить */
.faq-search-input::placeholder { color: #66777B; }

.faq-search-clear {
  position: absolute;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg);
  color: var(--help-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.faq-search-clear:hover { background: #FBE9E9; color: #C94747; }

.faq-search-empty {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14.5px;
  color: #56666A;
  padding: 22px;
  background: var(--color-surface);
  border: 1px dashed rgba(43, 47, 51, 0.18);
  border-radius: var(--radius-md);
}

/* -----------------------------------------------------------
   Оглавление разделов
   Телефон и планшет — ряд чипов; узкий ПК — тот же ряд с переносом;
   широкий ПК — липкая колонка слева (см. media ниже).
   ----------------------------------------------------------- */
.faq-jump-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.help-rail-title,
.help-rail-cta { display: none; }

.faq-jump-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.09);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-strong);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
}
.faq-jump-chip:hover { background: #ECEEF1; border-color: rgba(43, 47, 51, 0.16); }
.faq-jump-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.faq-jump-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text-strong);
  font-size: 14px;
}
.faq-jump-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--help-soft);
  font-variant-numeric: tabular-nums;
}

/* Единственный акцентный чип — «Типовые ошибки», основной ценностный
   раздел: сплошная заливка, чтобы взгляд цеплялся за него первым */
.faq-jump-chip--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #06231a;
}
.faq-jump-chip--accent .faq-jump-icon { background: #06231a; color: var(--color-accent); }
.faq-jump-chip--accent .faq-jump-count { color: #06231a; }
.faq-jump-chip--accent:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }

/* Раздел, который сейчас на экране (в колонке слева оформлен отдельно) */
.faq-jump-chip[aria-current="true"] { border-color: var(--color-text-strong); }
.faq-jump-chip[aria-current="true"] .faq-jump-icon { background: var(--color-accent); color: #06231a; }

/* Раздел без совпадений при поиске */
.faq-jump-chip.is-empty { opacity: 0.4; }

/* -----------------------------------------------------------
   Раздел = белая карточка: заголовок с иконкой и строки-вопросы
   ----------------------------------------------------------- */
.faq-category {
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.07);
  border-radius: var(--radius-lg);
  padding: 26px 28px 10px;
  margin-bottom: 20px;
}

.faq-category-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
}
.faq-category-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-text-strong);
  font-size: 20px;
}
.faq-category--accent .faq-category-icon { background: var(--color-accent); color: #06231a; }

.faq-category-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-strong);
}
.faq-category-count {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--help-soft);
  font-size: 12px;
  font-weight: 700;
}

/* -----------------------------------------------------------
   Вопрос-ответ
   Строки разделены волосяной линией; у каждой отрицательные поля,
   чтобы фон при наведении заходил чуть за текст, как в каталоге.
   ----------------------------------------------------------- */
.faq-item {
  margin: 0 -12px;
  border-top: 1px solid var(--help-line);
}

/* Вопрос — заголовок h3 (под h2 раздела) с кнопкой внутри. Общие правила
   сайта для h3 (шрифт заголовков, поля, трекинг) здесь сброшены: вид
   строки задаёт кнопка ниже. */
.faq-heading {
  margin: 0;
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
  color: inherit;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-strong);
  text-align: left;
  transition: background var(--transition-fast);
}
.faq-question:hover { background: var(--color-bg); }
.faq-question:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.faq-question i {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Кружок темнее карточки: на белом --color-bg почти не виден, а при
     наведении на строку сливался бы с её фоном */
  background: #ECEFF2;
  color: var(--color-text-strong);
  font-size: 13px;
  transition: transform var(--transition-base), background var(--transition-fast), color var(--transition-fast);
}
.faq-question:hover i { background: #DFE3E8; }
.faq-question[aria-expanded="true"] i,
.faq-question[aria-expanded="true"]:hover i {
  transform: rotate(45deg);
  background: var(--color-accent);
  color: #06231a;
}

/* Раскрытие: строка сетки растёт от 0 до высоты содержимого. Состояние
   держит класс .is-open на .faq-item (его ставит main.js вместе с
   aria-expanded): кнопка лежит внутри h3, поэтому «соседний» селектор
   кнопка + ответ уже не работает. Открытие мягче (0,3 с), закрытие чуть
   резче (0,2 с). У текста нет ни прозрачности, ни сдвига: при их смене
   он на время анимации рисуется иначе и в конце «щёлкает». Пока ответ
   свёрнут, его содержимое скрыто visibility — ссылки внутри не попадают
   в порядок Tab, а читалки экрана не зачитывают невидимый текст. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.is-open > .faq-answer {
  grid-template-rows: 1fr;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

.faq-answer-body {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.2s;
}
.faq-item.is-open > .faq-answer > .faq-answer-body {
  visibility: visible;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .faq-answer, .faq-answer-body, .faq-question i { transition: none; }
}
/* Печать и браузер без JavaScript: все ответы показаны раскрытыми */
@media print, (scripting: none) {
  .faq-answer { grid-template-rows: 1fr; }
  .faq-answer-body { visibility: visible; }
}

/* -----------------------------------------------------------
   Текст ответа
   Один вертикальный шаг между абзацами, списками и заметками;
   ширина строки ограничена — длинная строка на широком экране
   читается хуже.
   ----------------------------------------------------------- */
.faq-answer-body > * {
  margin: 0;
  padding: 0 12px;
  max-width: 744px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--help-text);
}
.faq-answer-body > * + * { margin-top: 14px; }
.faq-answer-body > :last-child { margin-bottom: 22px; }

.faq-answer-body strong { color: var(--color-text-strong); font-weight: 700; }

/* Ссылки, встроенный код и клавиши (^Ctrl+F5^ в источнике текста) оформлены общим
   стандартом сайта — блок «ТЕКСТОВЫЕ ЭЛЕМЕНТЫ» в style.css; ссылки в ответах взяты
   из этой страницы за образец. Здесь остаётся только контекст: плашка кода на
   тёмно-светлой подложке списка определений (ниже). */

/* -----------------------------------------------------------
   Списки. Общее правило сайта сбрасывает у ul/ol маркеры и поля,
   поэтому все три вида оформлены здесь.
   1) ul — короткие пункты с фирменной точкой;
   2) ul.faq-list-defs — пункты «термин: пояснение», каждый строкой;
   3) ol.faq-steps — шаги: нумерованные кружки, соединённые линией.
   ----------------------------------------------------------- */
.faq-answer-body ul,
.faq-answer-body ol { list-style: none; }

.faq-answer-body ul > li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--help-text);
}
.faq-answer-body ul > li + li { margin-top: 9px; }
.faq-answer-body ul > li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent-dark);
}

.faq-answer-body ul.faq-list-defs > li {
  padding: 13px 18px 13px 20px;
  background: #F5F7F9;
  border-left: 3px solid var(--color-accent);
  border-radius: 4px 12px 12px 4px;
}
.faq-answer-body ul.faq-list-defs > li + li { margin-top: 8px; }
.faq-answer-body ul.faq-list-defs > li::before { display: none; }
.faq-answer-body ul.faq-list-defs code { background: var(--color-surface); }

.faq-answer-body ol.faq-steps { counter-reset: faq-step; }
.faq-answer-body ol.faq-steps > li {
  position: relative;
  min-height: 28px;
  padding: 2px 0 0 44px;
  counter-increment: faq-step;
  font-size: 15px;
  line-height: 1.7;
  color: var(--help-text);
}
.faq-answer-body ol.faq-steps > li + li { margin-top: 18px; }
.faq-answer-body ol.faq-steps > li::before {
  content: counter(faq-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-accent);
  color: #06231a;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}
.faq-answer-body ol.faq-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 34px;
  bottom: -14px;
  width: 2px;
  border-radius: 2px;
  background: #E1E5E9;
}

/* Заметки: «! текст» — совет, «!! текст» — предупреждение */
.faq-answer-body > .faq-note {
  position: relative;
  margin-left: 12px;
  margin-right: 12px;
  padding: 14px 18px 14px 48px;
  background: #EDF7F1;
  border: 1px solid #CFE8DA;
  border-radius: 12px;
}
.faq-answer-body > .faq-note::before {
  content: "\eea9";
  position: absolute;
  left: 17px;
  top: 14px;
  font-family: remixicon;
  font-size: 19px;
  line-height: 1.5;
  color: var(--help-link);
}
.faq-answer-body > .faq-note--warn {
  background: #FFF6E3;
  border-color: #F2E0B0;
}
.faq-answer-body > .faq-note--warn::before {
  content: "\ea21";
  color: #B0700F;
}

/* Подсветка найденного при поиске */
mark.faq-mark {
  margin: 0 -2px;
  padding: 0 2px;
  background: #FDEFA6;
  color: inherit;
  border-radius: 3px;
}

/* -----------------------------------------------------------
   Блок «Не нашли ответ?» — плоская графитовая карточка в цвет
   сайдбара и подвала (--sidebar-bg), без градиентов и декора.
   Зелёный — только у главной кнопки, как у кнопки в полосе
   «Готовы работать?» ниже.
   ----------------------------------------------------------- */
/* Двойной класс: иначе на телефоне общее правило .faq-category / .faq-item
   из блока «до 599px» вернуло бы белую рамку и отрицательные поля */
.faq-category.faq-category--contact {
  padding: 0;
  margin-bottom: 0;
  background: none;
  border: 0;
}
.faq-item.faq-item-contact { margin: 0; border: 0; }

.faq-contact-box {
  padding: 40px 44px 38px;
  background: var(--sidebar-bg);
  border-radius: var(--radius-lg);
  color: var(--sidebar-text);
}

.help-contact-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  padding: 6px 13px 6px 10px;
  background: var(--sidebar-border);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #DCE1E5;
}
.help-contact-badge i { color: var(--color-accent); font-size: 14px; }
.help-contact-title {
  margin: 0 0 10px;
  max-width: 520px;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #fff;
}
.help-contact-lead {
  margin: 0 0 22px;
  max-width: 560px;
  font-size: 15.5px;
  line-height: 1.65;
  color: #B4BCC2;
}

.help-contact-steps {
  max-width: 640px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: contact-step;
}
.help-contact-steps li {
  position: relative;
  padding: 3px 0 0 42px;
  counter-increment: contact-step;
  font-size: 15px;
  line-height: 1.65;
  color: #D5DBE0;
}
.help-contact-steps li + li { margin-top: 16px; }
.help-contact-steps li::before {
  content: counter(contact-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sidebar-border);
  color: var(--sidebar-text);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}
.help-contact-steps strong { color: #fff; font-weight: 700; }

.help-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.help-contact-links .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.help-contact-links .btn i { font-size: 19px; }
.help-contact-links .btn-accent {
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: #06231a;
}
.help-contact-links .btn-accent:hover {
  background: #4AE39A;
  border-color: #4AE39A;
  color: #06231a;
  transform: translateY(-1px);
}
.help-contact-links .btn-outline-light {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}
.help-contact-links .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  transform: translateY(-1px);
}
.help-contact-links .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.help-contact-mail {
  margin: 22px 0 0;
  font-size: 14px;
  color: #9CA6AD;
}
.help-contact-mail i { margin-right: 4px; color: #B4BCC2; }
.help-contact-mail a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #5A6167;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast);
}
.help-contact-mail a:hover { text-decoration-color: var(--color-accent); }

/* =========================================================
   Широкий ПК (≥1360px): слева липкое оглавление, справа вопросы
   ========================================================= */
@media (min-width: 1360px) {
  .help-layout {
    display: grid;
    grid-template-columns: var(--help-rail) minmax(0, 1fr);
    column-gap: var(--help-gap);
    align-items: start;
    max-width: calc(var(--help-rail) + var(--help-gap) + var(--help-content));
  }
  .help-search { grid-column: 1 / -1; margin-bottom: 28px; }

  .faq-jump-row {
    grid-column: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
    margin: 0;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .faq-jump-row::-webkit-scrollbar { display: none; }
  .faq-container { grid-column: 2; }

  .help-rail-title {
    display: block;
    padding: 0 12px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--help-soft);
  }

  .faq-jump-chip {
    gap: 12px;
    padding: 7px 12px 7px 8px;
    background: transparent;
    border-color: transparent;
    border-radius: 14px;
    font-size: 14px;
  }
  .faq-jump-chip:hover { background: #E7EAEE; border-color: transparent; }
  .faq-jump-label { flex: 1 1 auto; }
  .faq-jump-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--color-surface);
    font-size: 16px;
  }
  /* Раздел, который сейчас на экране */
  .faq-jump-chip[aria-current="true"] {
    background: var(--color-surface);
    border-color: rgba(43, 47, 51, 0.08);
    box-shadow: 0 1px 2px rgba(25, 27, 30, 0.05);
  }
  .faq-jump-chip[aria-current="true"] .faq-jump-icon { background: var(--color-accent); color: #06231a; }
  .faq-jump-chip--accent,
  .faq-jump-chip--accent:hover { background: transparent; border-color: transparent; color: var(--color-text-strong); }
  .faq-jump-chip--accent:hover { background: #E7EAEE; }
  .faq-jump-chip--accent .faq-jump-icon { background: var(--color-accent); color: #06231a; }
  .faq-jump-chip--accent .faq-jump-count { color: var(--help-soft); }
  .faq-jump-chip--accent[aria-current="true"] { background: var(--color-surface); border-color: rgba(43, 47, 51, 0.08); }

  .help-rail-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 12px 12px 12px 12px;
    background: var(--color-surface);
    border: 1px solid rgba(43, 47, 51, 0.08);
    border-radius: 14px;
    color: var(--color-text-strong);
    text-decoration: none;
    transition: border-color var(--transition-fast);
  }
  .help-rail-cta:hover { border-color: var(--color-accent); }
  .help-rail-cta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .help-rail-cta-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--sidebar-bg);
    color: var(--color-accent);
    font-size: 17px;
  }
  .help-rail-cta-text { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.3; }
  .help-rail-cta-text strong { font-size: 14px; font-weight: 700; }
  .help-rail-cta-text span { font-size: 12.5px; color: var(--help-soft); }
  .help-rail-cta > i { flex-shrink: 0; font-size: 15px; color: var(--help-soft); transition: transform var(--transition-fast), color var(--transition-fast); }
  .help-rail-cta:hover > i { color: var(--help-link); transform: translateX(2px); }
}

/* =========================================================
   Телефон и узкий планшет (до 599px)
   ========================================================= */
@media (max-width: 599px) {
  .help-layout { margin-bottom: 44px; }
  .faq-search-input { height: 54px; border-radius: 14px; font-size: 15px; }

  /* Разделы на телефоне — сетка 2×4: все восемь видны сразу, ничего не
     уезжает за край экрана и не требует листать вбок (ряд с прокруткой
     оказался неудобным). Длинное название переносится на вторую строку
     внутри плитки, высота плиток в ряду одинаковая. */
  .faq-jump-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 20px;
  }
  .faq-jump-chip {
    min-width: 0;
    min-height: 50px;
    padding: 7px 12px 7px 7px;
    gap: 8px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.25;
  }
  .faq-jump-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .faq-jump-count { margin-left: auto; }

  .faq-category { padding: 20px 16px 6px; border-radius: 18px; margin-bottom: 16px; }
  .faq-category-head { gap: 12px; padding-bottom: 14px; }
  .faq-category-icon { width: 40px; height: 40px; font-size: 18px; }
  .faq-category-title { font-size: 18px; }

  .faq-item { margin: 0 -8px; }
  .faq-question { padding: 15px 8px; font-size: 15px; }
  .faq-answer-body > * { padding: 0 8px; font-size: 14.5px; }
  .faq-answer-body ul > li,
  .faq-answer-body ol.faq-steps > li { font-size: 14.5px; }
  .faq-answer-body > .faq-note { margin-left: 8px; margin-right: 8px; padding: 12px 14px 12px 44px; }
  .faq-answer-body > .faq-note::before { left: 14px; top: 12px; }
  .faq-answer-body ul.faq-list-defs > li { padding: 12px 14px 12px 16px; }
  .faq-answer-body ol.faq-steps > li { padding-left: 40px; }

  .faq-contact-box { padding: 28px 22px 26px; }
  .help-contact-title { font-size: 23px; }
  .help-contact-links .btn { flex: 1 1 100%; }
}

/* Узкие экраны (до 369px, например 360px и 320px): рядом с иконкой не
   помещается слово «Безопасность» целиком, оно наезжало бы на счётчик,
   поэтому иконка в плитке скрыта. От 370px (в том числе 375 и 390) она
   на месте: граница подобрана замером, слово влезает с запасом. */
@media (max-width: 369px) {
  .faq-jump-icon { display: none; }
  .faq-jump-chip { padding-left: 14px; }
}