/* help-centre — правки по макету поверх pages.css.
   Файл подключается после pages.css, поэтому правила с той же
   специфичностью здесь выигрывают. Значения — числами из макета. */

/* ── Герой (0:2097) ────────────────────────────────────────────────────────
   0:2098 — водяной знак «HELP»: ЗАЛИТ #ff704d при прозрачности 0.15, кегль
   320/348.16. Координаты в макете заданы от фрейма страницы, а не от секции:
   знак стоит на y 92 при секции с y 132, то есть на 40 ВЫШЕ её верха и
   обрезается краем. По горизонтали он начинается на x 900 и уходит за правый
   край фрейма на 160 — потому в макете видно только «HEL» с хвостом. */
.help-hero__watermark {
  top: -40px;
  right: auto;
  left: 900px;
  font-size: 320px;
  line-height: 348.16px;
  color: var(--color-flame);
  opacity: .15;
  white-space: nowrap;
}

/* 0:2103 — лид шириной 640 (три строки), тёмный при прозрачности 0.8 */
.help-hero__lead {
  max-width: 640px;
  font-size: 18px;
  line-height: 27px;
  color: var(--color-ink);
  opacity: .8;
}

/* 0:2105 — подпись над полем 12/15.6 */
.help-search__label { font-size: 12px; line-height: 15.6px; }

/* 0:2106 — поле лежит прямо в белой плашке: своей пилюли, фона и обводки
   у него нет. В pages.css ниже по файлу его снова оформили как отдельный
   инпут — из-за этого внутри плашки рисовалась вторая рамка. */
.help-search__input {
  height: auto;
  padding-inline: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 18px;
  line-height: 23.4px;
}

.help-search__input::placeholder { color: var(--color-ink); opacity: .4; }

/* 0:2110 — кнопка внутри плашки 138×54 */
.help-search__row .btn { height: 54px; min-height: 54px; }

/* 0:2114 — текст пилюли тёмный, а не красный */
.help-search__tag { color: var(--color-ink); }
.help-search__tag:hover { background: var(--color-surface); text-decoration: none; }

/* ── Не нашли ответ (0:2314 / 4:218) ───────────────────────────────────────
   В макете над заголовком стоит кикер «STILL NEED HELP?», заголовок и кнопки
   набраны кремовым #f4e2cf, а первая кнопка — кремовая плашка с тёмным
   текстом, а не тёмная со светлым. */
.help-cta__kicker {
  font-size: 12px;
  font-weight: var(--fw-black);
  line-height: 15.6px;
  text-transform: uppercase;
  color: var(--color-paper);
}

.help-cta__text { gap: 8px; }                       /* 0:2315 — gap8 */
.help-cta__title { font-size: 48px; line-height: 52.22px; color: var(--color-paper); }

.help-cta__lead {
  max-width: 560px;
  font-size: 16px;
  line-height: 20.8px;
  text-align: center;
  color: var(--color-surface);
  opacity: .8;
}

.help-cta__actions { gap: 16px; }

/* 0:2320 — кремовая плашка, тёмный текст, обводка 2px тёмным */
.help-cta .btn--light {
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 2px var(--color-ink);
}
.help-cta .btn--light:hover { background: var(--color-surface); }

/* 0:2322 — прозрачная кнопка с кремовой обводкой 2px */
.help-cta .btn--outline {
  background: none;
  color: var(--color-paper);
  box-shadow: inset 0 0 0 2px var(--color-paper);
}
.help-cta .btn--outline:hover { background: var(--color-paper); color: var(--color-ink); }

@media (max-width: 767px) {



  /* 4:218 — pad(56,20), зазор 24, блок текста слева с зазором 12 */
  .page-help-centre .help-cta { align-items: stretch; padding: 56px 20px; gap: 24px; }
  /* 4:219 — блок текста прижат влево, а не центрирован */
  .page-help-centre .help-cta__text { gap: 12px; text-align: left; }
  .page-help-centre .help-cta__title { font-size: 34px; line-height: 36.99px; }

  .page-help-centre .help-cta__lead {
    max-width: none;
    text-align: left;
    font-size: 15px;
    line-height: 22.5px;
    opacity: .9;
  }

  /* 4:223 — кнопки колонкой во всю ширину, высота 46 */
  .page-help-centre .help-cta__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-help-centre .help-cta__actions .btn { height: 46px; }
}

/* 4:19 — на мобильном в макете вместо «HELP» стоит одна «H» кеглем 280 при
   прозрачности 0.12, прижатая к правому краю; её верх на 20 выше секции. */
@media (max-width: 767px) {
  .page-help-centre .help-hero__watermark {
    top: -20px;
    left: auto;
    right: 0;
    font-size: 280px;
    line-height: 304.64px;
    opacity: .12;
  }
  .page-help-centre .help-hero__watermark-rest { display: none; }
}

/* ── Каталог тем и статьи (0:2151) ─────────────────────────────────────────
   0:2158 — номер темы Geist Mono 700 12/15.6 тёмным при прозрачности 0.4,
   название Archivo Narrow 700 14/18.86. Справа в каждой строке стоит
   стрелка 12x12 (0:2161) — её в вёрстке не было вовсе. */
.help-topic__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 15.6px;
  color: var(--color-ink);
  opacity: .4;
}

.help-topic__name {
  font-family: var(--font-narrow);
  font-weight: var(--fw-bold);
  font-size: 14px;
  line-height: 18.86px;
}

.help-topic.is-active .help-topic__num { color: var(--color-brand); opacity: 1; }

.help-topic__arrow { flex: none; width: 12px; height: 12px; margin-left: auto; }

/* 0:2244 — номер вопроса Geist Mono 800 14/18.2 брендовым */
.faq__num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--fw-extrabold);
  line-height: 18.2px;
  color: var(--color-brand);
}

/* 0:2246 / 0:2260 — переключатель это плюс 11.67 обводкой 2, у раскрытого
   вопроса вертикальная палка убирается и остаётся минус. Разворот шеврона
   к этому знаку не применяется. */
.faq__toggle { flex: none; width: 20px; height: 20px; }
.faq__q[aria-expanded="true"] .faq__toggle { color: var(--color-brand); }
.faq__q[aria-expanded="true"] .faq__toggle .icon-plus-bar { display: none; }

/* 0:2276 — «Still having trouble?» это плашка 59 с обводкой 1.5 и радиусом 8,
   а не строка текста: подпись слева, ссылка справа, обе Archivo Narrow 700 */
.faq__more {
  justify-content: space-between;
  min-height: 59px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

.faq__more-label,
.faq__more .link-arrow {
  font-family: var(--font-narrow);
  font-size: 14px;
  font-weight: var(--fw-bold);
  line-height: 18.86px;
  text-transform: uppercase;
}

.faq__more .link-arrow { color: var(--color-brand); }

/* 0:2236 — шапка колонки статей: зазор 8, лид тёмный при прозрачности 0.8 */
.help-articles__head { gap: 8px; }
.help-articles__lead { color: var(--color-ink); opacity: .8; }

/* 0:2256 — шапка раскрытого вопроса 70 при паддинге 24, а не 63 при 20;
   0:2262 — тело 32 с зазором 24. Итог карточки прежний, 357. */
.faq__q[aria-expanded="true"] { height: 70px; padding-inline: 24px; }
.faq__item:has(.faq__q[aria-expanded="true"]) .faq__a { padding: 32px; gap: 24px; min-height: 287px; }

/* 0:2263 — список шагов: зазор 16, строка 23 (15/22.5), номер Geist Mono */
.faq__steps { gap: 16px; }
.faq__steps li { gap: 16px; font-size: 15px; line-height: 22.5px; }

.faq__step-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--fw-extrabold);
  line-height: 18.2px;
  color: var(--color-brand);
}

@media (min-width: 1024px) {
  /* 0:2153 — подпись и заголовок сайдбара это отдельная группа с зазором 8,
     а до списка тем уже 32. Общий зазор 32 разводил их на 24 лишних. */
  .help-topics { gap: 8px; }
  .help-topics__list { margin-top: 24px; }
}

/* ── Поиск по справке на мобильном фрейме (4:26) ───────────────────────────
   В макете это ДВА блока: плашка 358×52 с лупой 20 и подсказкой 14/18.2 и
   отдельная чернильная кнопка 358×48 под ней (4:31), а не одна строка с
   красной кнопкой внутри. Раньше кнопка не влезала в строку, та переносилась
   в три ряда, и секция шла 284 вместо 164 — расхождение 47.75%. */
@media (max-width: 767px) {
  .page-help-centre .help-search__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  /* 4:28 — плашка поля: 52 высотой, поля по 16, обводка 1.5, радиус 6 */
  .page-help-centre .help-search__field {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    height: 52px;
    padding-inline: var(--space-8);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1.5px var(--color-ink);
  }

  .page-help-centre .help-search__field:focus-within { outline: var(--focus-ring); outline-offset: 2px; }
  .page-help-centre .help-search__row:focus-within { outline: none; }

  /* 4:310 — лупа 20×20 при прозрачности 0.6 */
  .page-help-centre .help-search__icon { width: 20px; height: 20px; opacity: .6; }

  /* 4:30 — подсказка 14/18.2 приглушённым */
  .page-help-centre .help-search__input { font-size: 14px; line-height: 18px; }
  .page-help-centre .help-search__input::placeholder { color: var(--color-muted); opacity: 1; }

  /* 4:31 — кнопка чернильная во всю ширину, 48 высотой, радиус 6 */
  .page-help-centre .help-search__row .btn {
    width: 100%;
    min-height: 48px;
    padding: var(--space-6) 0;
    border-radius: var(--radius-md);
    background: var(--color-ink);
    color: var(--color-white);
    box-shadow: none;
    font-size: 14px;
    line-height: 18px;
  }
}

/* ── Герой справки на мобильном фрейме (4:22) ──────────────────────────────
   В макете заголовок набран ДВУМЯ строками по 42/44 с зазором 4, вторая —
   красная («HOW CAN» / «WE HELP?»), а на широкой ширине это одна чернильная
   строка (0:2102). У нас акцент шёл в поток и рвался как «HOW CAN WE» /
   «HELP?». Молния в плашке тоже только на мобильном (4:21 против 0:2101). */
@media (max-width: 767px) {
  .page-help-centre .help-hero__title { font-size: 42px; line-height: 44px; }
  .page-help-centre .help-hero__title-accent { display: block; margin-top: var(--space-2); }
}

/* ── Шапка раздела справки на мобильном (4:144) ────────────────────────────
   Числа макета: кикер 12/15.6, заголовок 36/39.17, лид 15/22.5 при 0.8.
   У нас заголовок шёл 28/30, а лид 16/24 — строка лида переносилась не там,
   где в макете, и вся шапка читалась мельче. */
@media (max-width: 767px) {
  .page-help-centre .help-articles__title { font-size: 36px; line-height: 39px; }
  .page-help-centre .help-articles__lead { font-size: 15px; line-height: 23px; }
}

/* ── Аккордеон вопросов на мобильном фрейме (4:148) ────────────────────────
   Мобильный фрейм — отдельный макет: номер шага там красный КРУЖОК 20×20
   с белой цифрой Geist Mono 900 10/13 (4:170), плашка «Still having
   trouble?» набрана в столбик (4:185), а тело раскрытого вопроса имеет
   паддинг 20 и зазор 20 против десктопных 32 и 24. Из-за десктопных чисел
   карточка шла 486 вместо 436. */
@media (max-width: 767px) {
  /* 4:150 — свёрнутая строка 54: паддинг 16 сверху и снизу, вопрос 17/22.1 */
  .page-help-centre .faq__q { padding: var(--space-8) 0; gap: var(--space-6); }
  .page-help-centre .faq__q .faq__text { font-size: 17px; line-height: 22px; }

  /* 4:162 — шапка раскрытого вопроса 72 с паддингом 16 */
  .page-help-centre .faq__q[aria-expanded="true"] { height: 72px; padding-inline: var(--space-8); }
  .page-help-centre .faq__item:has(.faq__q[aria-expanded="true"]) .faq__a {
    min-height: 0;
    padding: var(--space-9);
    gap: var(--space-9);
  }

  /* 4:168 — шаги: между шагами 14, от кружка до текста 12, текст 15/22.5 */
  .page-help-centre .faq__steps { gap: 14px; }
  .page-help-centre .faq__steps li { gap: var(--space-6); align-items: flex-start; line-height: 23px; color: var(--color-ink); }

  /* 4:170 — номер шага в красном кружке */
  .page-help-centre .faq__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-pill);
    background: var(--color-brand);
    color: var(--color-white);
    font-size: 10px;
    line-height: 13px;
    font-weight: var(--fw-black);
  }

  /* 4:185 — плашка помощи в столбик: паддинг 16, зазор 8 */
  .page-help-centre .faq__more {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    min-height: 0;
    padding: var(--space-8);
  }
}