/* Стили блоков, добавленных для поиска: вводный абзац, вопросы-ответы,
   перелинковка и статический перечень инструментов на главной.
   ВАЖНО: в этой дизайн-системе шрифт задаётся по компонентам, а не на
   body, — блок без font: наследует Times New Roman. Поэтому каждый блок
   здесь набран токенами (кегль, начертание, цвет), по образцу
   toolhead__sub и searchzone__lede.
   Ловушка: токен --text-body в tokens.css — это ЦВЕТ (второе объявление
   в блоке темы перебивает кегль), внутри font: он делает правило
   невалидным. Кегли берутся только из --text-body-lg / --text-body-sm. */
/* Ширину лида задаёт колонка, а не число знаков: предел в 68ch обрывал
   абзац на середине, а панель под ним шла во всю ширину — текст читался
   как сбитый влево. Ровно то же решение уже принято для .toolhead__sub
   в css/tool.css.
   Предел сначала сняли только там, где колонку и так обрезают кнопки
   справа (`:has(.toolhead__acts)`) — ошибка: кнопки есть лишь на трёх
   страницах из 25, на остальных 22 лид остался обрезанным, и владелец
   перечислил их все поимённо. Исключений здесь быть не должно. */
/* design-bold: описание под названием — мелким и приглушённым, во всю
   ширину; это подпись к работе, а не вводный абзац. */
.toolhead__lede {
  margin: 0;
  font: var(--fw-regular) var(--text-body-sm)/1.5 var(--font-ui);
  color: var(--text-faint);
}
/* Вводный абзац главной предел сохраняет: он стоит под каталогом, рядом
   с ним нет ни кнопок, ни панелей, и растянуть его на всю ширину
   монитора не даст ничего, кроме строки в 150 знаков. */
.searchzone__intro {
  margin: 0 0 var(--space-7);
  max-width: 68ch;
  font: var(--fw-regular) var(--text-body-lg)/1.55 var(--font-ui);
  color: var(--text-muted);
}
/* Заголовок главной: был 24px при основном тексте 16px — разница в полтора
   раза, глаз не видел иерархии. Стало 48/16, трёхкратная разница, нижняя
   граница планки (design/bar.md). Вес semibold, а не bold: эталоны выше
   500 не поднимаются вовсе, а у нас 700 оставлен логотипу. */
/* design-bold: заголовок главной в одну строку 36px — над полем поиска
   он подпись, а не афиша; главное на экране — само поле и каталог. */
.searchzone__h1 {
  margin: 0 0 var(--space-6);
  font: var(--fw-semibold) var(--text-display)/1.1 var(--font-display);
  letter-spacing: -.02em;
  color: var(--text-heading);
}
@media (max-width: 720px) {
  .searchzone__h1 { font-size: calc(27px * var(--fs-scale)) }
}
.seo-faq .faq__q {
  margin: var(--space-5) 0 var(--space-2);
  font: var(--fw-semibold) var(--text-body-lg)/1.35 var(--font-ui);
  color: var(--text-heading);
}
.seo-faq .faq__a {
  margin: 0;
  font: var(--fw-regular) var(--text-body-sm)/1.6 var(--font-ui);
  color: var(--text-faint);
}
.seo-rel__list,
.prerender__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3) var(--space-5);
  font: var(--fw-regular) var(--text-body-sm)/1.5 var(--font-ui);
  color: var(--text-faint);
}
/* Перелинковка — ряд кнопок, как .pane__acts; grid тут не нужен. */
.seo-rel__list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.prerender { margin: var(--space-12) 0 0; }   /* владелец: «пониже от карточек, сантиметра на два» */
.prerender__h2 {
  margin: 0 0 var(--space-4);
  font: var(--fw-semibold) var(--text-body-lg)/1.3 var(--font-ui);
  color: var(--text-heading);
}

/* Бегущая лента чипсов вместо списка с описаниями (решение владельца:
   «не писать пять страниц текста в подвале»). Ссылки остаются в DOM —
   поисковик их видит; вторая копия трека нужна только для бесшовной
   петли и закрыта от роботов и скринридеров (aria-hidden, tabindex=-1).
   Две группы одинаковой ширины (gap внутри + такой же padding-right),
   поэтому translateX(-50%) сдвигает ровно на одну группу — шва нет.
   Наведение ставит анимацию на паузу; при prefers-reduced-motion лента
   превращается в обычный перенос чипсов. Фоновую вкладку браузер
   приостанавливает сам. */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 54s linear infinite;   /* владелец: «медленнее на 20%» */
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  list-style: none;
  font: var(--fw-regular) var(--text-body-sm)/1.4 var(--font-ui);
}
.marquee__group li { flex: 0 0 auto; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; width: auto; flex-wrap: wrap; }
  .marquee__group { flex-wrap: wrap; }
  .marquee__group[aria-hidden="true"] { display: none; }
}

/* Длинный вводный текст уехал под каталог: на первом экране он занимал
   шесть строк на десктопе и пятнадцать на телефоне и отодвигал
   инструменты, ради которых человек пришёл. Слова сохранены целиком —
   для поиска важно, что они на странице, а не то, что они сверху. */
.seo-about {
  /* width:100% обязателен: body — флекс-колонка, и без явной ширины
     `margin: 0 auto` ужимает блок по содержимому и центрирует его.
     Ровно так же устроены .searchzone и .toolhead.
     Один абзац во всю ширину подвала, без предела длины строки и без
     деления на колонки — решение владельца. */
  width: 100%;
  max-width: var(--maxw-content);
  margin: 0 auto;
  padding: var(--space-12) var(--gutter-page) 0;
}
.seo-about__p {
  margin: 0;
  font: var(--fw-regular) var(--text-body-sm)/1.6 var(--font-ui);
  color: var(--text-faint);
}