/* =========================================================
   NEORANK — базовые стили
   Дизайн-система: тёмный сайдбар + светлая контентная часть,
   один акцентный цвет (зелёный), мягкие скругления, воздух.
   ========================================================= */

/* -----------------------------
   Шрифты — самостоятельный хостинг (без Google Fonts CDN):
   один DNS-запрос меньше, полный контроль над кэшированием
   и никакой утечки данных пользователей в Google при загрузке.

   Inter Tight — статичный набор начертаний (не variable-шрифт),
   поэтому на каждый вес — отдельный @font-face с font-weight,
   совпадающим с реальной насыщенностью файла.

   Soyuz Grotesk — только начертание Bold (700), формат .woff
   (файла .woff2 в комплекте нет). Остальные веса не описываем:
   для них работает фолбэк-цепочка var(--font-display) ниже.

   font-display: swap — текст рендерится системным шрифтом сразу,
   без невидимого текста (FOIT), и подменяется на веб-шрифт
   по готовности — так короче ощущается время до первой отрисовки.
------------------------------ */

@font-face {
  font-family: 'Inter Tight';
  src: url('../assets/fonts/inter-tight/InterTight-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('../assets/fonts/inter-tight/InterTight-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('../assets/fonts/inter-tight/InterTight-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('../assets/fonts/inter-tight/InterTight-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('../assets/fonts/inter-tight/InterTight-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Soyuz Grotesk';
  src: url('../assets/fonts/soyuz-grotesk/SoyuzGrotesk-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Geist Mono — единственный моноширинный шрифт сайта. Веса: 300–800.
   Используется через переменную --font-mono (см. :root).
   ========================================================================== */

@font-face { font-family: "Geist Mono";     font-style: normal; font-weight: 300; font-display: swap; src: url("../assets/fonts/geist-mono/300.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono";     font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/geist-mono/400.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono";     font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/geist-mono/500.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono";     font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/geist-mono/600.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono";     font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/geist-mono/700.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono";     font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/geist-mono/800.woff2") format("woff2"); }

:root {
  /* --- Цвет: единственный акцент + нейтральная база --- */
  --color-accent: #1DD97A;
  --color-accent-dark: #17b566;
  --color-bg: #F2F4F7;
  --color-surface: #FFFFFF;
  --color-text: #2B2F33;
  --color-text-strong: #191B1E;
  --color-muted: #6A8D92;

  /* Тёмный сайдбар живёт в собственной палитре на базе --color-text-strong */
  --sidebar-bg: #191B1E;
  --sidebar-bg-soft: #22252A;
  --sidebar-border: #2B2F33;
  --sidebar-text: #F2F4F7;
  --sidebar-text-muted: #8A9296;

  /* Единый акцент навигации в формате "R,G,B" — используется как
     rgba(var(--nav-accent-rgb), X) для подсветки категорий/ссылок */
  --nav-accent-rgb: 29, 217, 122;

  /* --- Типографика --- */
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Soyuz Grotesk', 'Inter Tight', sans-serif;
  --font-mono: 'Geist Mono', monospace;
  /* Bootstrap берёт шрифт для code/kbd/pre/samp из своей переменной —
     направляем её на тот же Geist Mono, иначе там будет системный шрифт */
  --bs-font-monospace: var(--font-mono);

  /* --- Форма --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-soft: 0 4px 24px rgba(25, 27, 30, 0.06);
  --shadow-card: 0 2px 12px rgba(25, 27, 30, 0.05);

  /* --- Раскладка --- */
  /* 333px = 300px под рекламный блок РСЯ (ровно) + 32px паддингов
     сайдбара (16px слева/справа) + 1px правого бордера сайдбара.
     Если когда-нибудь будете менять паддинги/бордер сайдбара —
     пересчитайте эту переменную, иначе рекламный блок перестанет
     быть ровно 300px или начнёт вылезать за пределы колонки. */
  --sidebar-width: 333px;
  --transition-fast: 180ms ease;
  --transition-base: 240ms ease;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* Фирменное выделение текста */
::selection {
  background: rgba(29, 217, 122, 0.35);
  color: var(--color-text-strong);
}
::-moz-selection {
  background: rgba(29, 217, 122, 0.35);
  color: var(--color-text-strong);
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  color: var(--color-text-strong);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

p { margin: 0 0 16px; color: var(--color-text); }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

img { max-width: 100%; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

/* Видимый фокус — важно для доступности, не убираем outline вслепую.
   border-radius здесь не задаём: браузеры и так ведут outline по радиусу
   самого элемента, а жёсткие 4px на время фокуса «квадратили» круглые
   кнопки и поля со скруглением 12px. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Единый фокус для полей ввода во всех инструментах.
   Раньше общий outline накладывался поверх акцентной рамки, которую
   поля получают по :focus, и вокруг активного поля возникало две
   обводки сразу. Оставляем одну: рамка плюс мягкое кольцо. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(29, 217, 122, 0.18);
}

/* =========================================================
   ТЕКСТОВЫЕ ЭЛЕМЕНТЫ — ссылки, выделение, код, клавиши.
   Одно оформление на весь сайт: инструменты, справка, «О нас»,
   статьи блога. Страничные CSS больше не рисуют свои варианты;
   то, что действительно отличается (код в шапке инструмента,
   ячейки-метки, код на тёмной плашке), описано у самого элемента
   и объяснено там же.
   ========================================================= */

:root {
  --link: #0C8247;          /* глубокий зелёный ссылки (как в «Помощи») */
  --link-line: #A5E3C2;     /* подчёркивание в покое */
  --link-wash: #E4F7ED;     /* подложка при наведении */
  --code-bg: #E7EBEF;       /* плашка встроенного кода: на белом и на сером фоне страницы */
}

/* ---------------------------------------------------------
   ССЫЛКА В ТЕКСТЕ. Любая ссылка без класса внутри <main> — это
   ссылка в тексте (в абзаце, списке, ячейке, ответе FAQ, списке
   источников). Всё остальное — компоненты и имеет свой класс:
   кнопки, карточки, пункты меню. Вид — как у ссылок в ответах
   на странице «Помощь»: глубокий зелёный, 600, толстое светлое
   подчёркивание; при наведении текст темнеет, подчёркивание
   становится фирменным зелёным и под ссылкой проступает подложка.
   Внешняя ссылка (target="_blank"), в том числе источник, —
   со стрелкой; стрелка приклеена к последнему слову
   (word joiner U+2060), чтобы не повисать на новой строке.
   Исключения: меню, крошки, подвал и заголовки (в них ссылка —
   часть компонента), цветные сообщения формы и тёмный блок
   контактов в «Помощи», тёмные сообщения об ошибке и подсказка
   в кадрировании фото (ссылка там белая — свои правила рядом с
   компонентом в image-cropper.css) и шапка списков блога на зелёном
   фоне (ссылка «на первой странице» — в blog.css).
   --------------------------------------------------------- */
main a[href]:not([class]):not(:is(nav, footer, h1, h2, h3, h4, .help-contact-mail, .contacts-success-note, .form-error, .ic-drop-error, .ic-toast, .blog-hero) a) {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: max(1.5px, 0.13em);
  text-underline-offset: 0.2em;
  border-radius: 3px;
  transition: color var(--transition-fast), background var(--transition-fast), text-decoration-color var(--transition-fast), box-shadow var(--transition-fast);
}
main a[href]:not([class]):not(:is(nav, footer, h1, h2, h3, h4, .help-contact-mail, .contacts-success-note, .form-error, .ic-drop-error, .ic-toast, .blog-hero) a):hover {
  color: var(--color-text-strong);
  text-decoration-color: var(--color-accent);
  background: var(--link-wash);
  box-shadow: 0 0 0 2px var(--link-wash);
}
main a[href]:not([class]):not(:is(nav, footer, h1, h2, h3, h4, .help-contact-mail, .contacts-success-note, .form-error, .ic-drop-error, .ic-toast, .blog-hero) a):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
main a[href][target="_blank"]:not([class]):not(:is(nav, footer, h1, h2, h3, h4, .help-contact-mail, .contacts-success-note, .form-error, .ic-drop-error, .ic-toast, .blog-hero) a)::after {
  content: "\2060\ea70";
  margin-left: 0.15em;
  font-family: remixicon, var(--font-body);
  font-size: 0.95em;
  font-weight: 400;
  text-decoration: none;
}

/* ---------------------------------------------------------
   ВЫДЕЛЕНИЕ В ТЕКСТЕ. <strong> и <b> в абзаце, списке, ячейке —
   полужирный 600 (в Bootstrap «bolder» = 700, и на разных страницах
   выходило то 600, то 700). Цвет не трогаем: он зависит от фона
   (на тёмных и цветных плашках текст белый или тёмно-зелёный).
   Блочные заголовки внутри карточек (название пункта, подпись
   поля) имеют свои размеры и свой вес — они не в счёт.
   --------------------------------------------------------- */
main :is(p, li, dd, dt, td, th) > :is(strong, b):not(.notice-slider *) { font-weight: 600; }

/* ---------------------------------------------------------
   КОД В ТЕКСТЕ — <code> в абзаце, списке, подсказке, врезке и
   ответе FAQ. Один вид: тёмно-серый моноширинный текст 500 на
   серой плашке, без цвета и рамки. Размер — в em от окружающего
   текста, но не меньше 11.5px (подсказки под полями набраны
   мелко). Плашка не рвётся на куски: не влезла в остаток строки —
   уходит на следующую целиком; ломается внутри только когда длиннее
   самой строки (тогда не вылезает за край).
   Это же перебивает розовый цвет и 400-й вес «code» из Bootstrap:
   раньше на ~20 страницах код без своего правила выходил розовым.

   Три осознанных исключения, у каждого своё правило рядом с
   компонентом:
     — код в шапке инструмента: тёмно-зелёная плашка с белым
       текстом (.tool-hero-text code, ниже в этом файле);
     — код в ячейке таблицы: тот же моноширинный текст, но без
       плашки (:is(td, th) code) — сотни плашек в таблице шумят;
     — значения-компоненты (путь в JSON-просмотрщике, коды цветов,
       карта букв): плашки с собственной геометрией у компонента.
   --------------------------------------------------------- */
code {
  /* inline-block: плашка — одно целое. Если не помещается в остаток строки,
     переходит на следующую целиком; ломается внутри только когда длиннее самой
     строки. Обычный inline рвал «Disallow: /wp-includes/» на два куска. */
  display: inline-block;
  /* запас на знак после кода («…xml.», «…txt,»): иначе при плашке во всю ширину
     точка оставалась одна на следующей строке */
  max-width: calc(100% - 0.6em);
  padding: 0.14em 0.42em;
  /* отступ плашки входит в её высоту, а у обычного inline в строку не входил:
     сверху и снизу возвращаем его отрицательным полем, межстрочный шаг не меняется */
  margin-block: -0.14em;
  background: var(--code-bg);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: max(0.875em, 11.5px);
  /* 1.4 — высота плашки как была у inline (≈1.34 em шрифта + отступы) */
  line-height: 1.4;
  font-weight: 500;
  font-style: normal;
  color: var(--color-text-strong);
  overflow-wrap: anywhere;
}
pre code {
  display: inline;
  max-width: none;
  margin-block: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  line-height: inherit;
  font-weight: inherit;
  overflow-wrap: normal;
}
:is(td, th) code {
  max-width: 100%;
  margin-block: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 0.9em;
  line-height: inherit;
  /* break-word, а не anywhere: в ячейке anywhere уменьшает минимальную ширину
     столбца, и «AddOutputFilterByType» ломалось посреди слова */
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------
   КЛАВИШИ — <kbd> выглядит как клавиша: белая «кнопка» с
   утолщённым нижним краем, моноширинный 12.5px (как в «Помощи»).
   --------------------------------------------------------- */
kbd {
  display: inline-block;
  min-width: 1.9em;
  margin: 0 1px;
  padding: 1px 7px 2px;
  background: var(--color-surface);
  border: 1px solid #CDD3DA;
  border-bottom-width: 2px;
  border-radius: 7px;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-strong);
  text-align: center;
  white-space: nowrap;
}

/* =========================================================
   СЕЛЕКТЫ — единая система для всего сайта
   Цвет, рамку, высоту и шрифт каждый инструмент задаёт у себя.
   Здесь — то, что должно быть одинаковым везде: стрелка и
   горизонтальные отступы.

   Симметрия заложена в построение: отступ текста слева и отступ
   стрелки справа — одна и та же переменная --select-pad. SVG
   стрелки обрезан ровно по контуру глифа (viewBox = границы
   фигуры), поэтому «12px» — это 12px видимого зазора до края,
   а не до невидимой рамки иконки.

   Стрелка — ri-arrow-down-s-line. Пропорции глифа фиксированы
   (12.728 × 7.778 из сетки Remix), меняется только масштаб —
   через --select-arrow-w. Картинка при наведении не подменяется
   «на лету» (новая картинка декодируется в момент наведения, и на
   первом кадре мелькает пустота):
   — Chrome/Edge (base-select): стрелка — маска, у которой плавно
     меняется только цвет;
   — Firefox/Safari: все три состояния (обычное, наведение,
     открытый список) — слои одного фона, загруженные сразу;
     переключается только размер слоя, видимым остаётся один.

   Инструмент меняет только переменные, а не сами свойства:
   --select-pad       — отступ текста слева и стрелки справа
   --select-arrow-w   — ширина глифа стрелки (высота по пропорции)
   --select-gap       — зазор между текстом и стрелкой
   --select-arrow-color / -hover / -open — цвет стрелки (Chrome/Edge)
   --select-arrow / -img-hover / -img-open — картинки стрелки
                        (Firefox/Safari)
   ========================================================= */
:root {
  --select-pad: 14px;
  --select-arrow-w: 10px;
  --select-gap: 10px;
  --select-arrow-color: var(--color-muted);
  --select-arrow-color-hover: var(--color-text-strong);
  --select-arrow-color-open: var(--color-accent-dark);
  /* ri-arrow-down-s-line, viewBox обрезан по контуру глифа */
  --select-arrow-mask: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='5.636 8.222 12.728 7.778'%3e%3cpath d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z'/%3e%3c/svg%3e");
  --select-arrow: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='5.636 8.222 12.728 7.778' fill='%236A8D92'%3e%3cpath d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z'/%3e%3c/svg%3e");
  --select-arrow-img-hover: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='5.636 8.222 12.728 7.778' fill='%23191B1E'%3e%3cpath d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z'/%3e%3c/svg%3e");
  /* ri-arrow-up-s-line — тот же глиф, развёрнутый вверх */
  --select-arrow-img-open: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='5.636 8 12.728 7.778' fill='%2317B566'%3e%3cpath d='M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8.00001L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z'/%3e%3c/svg%3e");
}

select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-left: var(--select-pad);
  padding-right: calc(var(--select-pad) + var(--select-arrow-w) + var(--select-gap));
  /* три слоя: обычная стрелка, при наведении, при открытом списке */
  background-image: var(--select-arrow), var(--select-arrow-img-hover), var(--select-arrow-img-open);
  background-repeat: no-repeat;
  background-position: right var(--select-pad) center;
  background-size: var(--select-arrow-w) auto, 0 0, 0 0; /* auto = высота строго по пропорции глифа */
  text-overflow: ellipsis;
  cursor: pointer;
}
select:not([multiple]):not([size]):hover,
select:not([multiple]):not([size]):focus-visible {
  background-size: 0 0, var(--select-arrow-w) auto, 0 0;
}
/* .is-picker-open ставит скрипт выпадающего списка (js/main.js) */
select:not([multiple]):not([size]).is-picker-open {
  background-size: 0 0, 0 0, var(--select-arrow-w) auto;
}
select:not([multiple]):not([size]):disabled {
  background-size: var(--select-arrow-w) auto, 0 0, 0 0;
  cursor: not-allowed;
}

/* Раскрывающийся список. Где браузер поддерживает настраиваемые
   селекты (appearance: base-select — Chrome и Edge), список
   получает фирменный вид: скруглённая панель с тенью, мягкая
   подсветка пунктов, галочка у выбранного, плавное появление,
   стрелка плавно темнеет при наведении и разворачивается вверх
   при открытии. Остальные браузеры показывают системный список,
   закрытый селект в них выглядит так же. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]),
  select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
  }
  /* Селект в этом режиме — флекс-строка: кнопка с подписью + стрелка.
     Подпись живёт в <button><selectedcontent> внутри каждого селекта:
     без этой разметки браузер рисует её служебным блоком, который не
     умеет обрезаться, и длинный пункт в узком селекте переносился на
     вторую строку или наезжал на стрелку. С ней — одна строка
     с многоточием, стрелка всегда на своём месте. */
  select:not([multiple]):not([size]) {
    align-items: center;
    gap: var(--select-gap);
    padding-right: var(--select-pad);
    background-image: none;
  }
  select:not([multiple]):not([size]) > button {
    display: flex;
    align-items: center;
    align-self: stretch;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-align: start;
    cursor: inherit;
  }
  select:not([multiple]):not([size]) > button:focus-visible {
    outline: none; /* фокус показывает сам селект */
  }
  select:not([multiple]):not([size]) selectedcontent {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  select:not([multiple]):not([size])::picker-icon {
    content: "";
    display: block;
    flex: none;
    margin: 0;
    width: var(--select-arrow-w);
    height: calc(var(--select-arrow-w) * 7.778 / 12.728);
    background-color: var(--select-arrow-color);
    -webkit-mask: var(--select-arrow-mask) center / 100% 100% no-repeat;
    mask: var(--select-arrow-mask) center / 100% 100% no-repeat;
    transition: rotate 200ms ease, background-color 150ms ease;
  }
  select:not([multiple]):not([size]):hover::picker-icon,
  select:not([multiple]):not([size]):focus-visible::picker-icon {
    background-color: var(--select-arrow-color-hover);
  }
  select:not([multiple]):not([size]):open::picker-icon {
    rotate: 180deg;
    background-color: var(--select-arrow-color-open);
  }
  select:not([multiple]):not([size]):disabled::picker-icon {
    background-color: var(--select-arrow-color);
  }

  select:not([multiple]):not([size])::picker(select) {
    /* Список всегда раскрывается вниз от селекта; вверх — только
       если снизу он не помещается в окно (по умолчанию браузер
       выбирает сторону, где больше места, и список «прыгал» вверх) */
    position-area: block-end span-inline-end;
    position-try-order: normal;
    /* не помещается справа (узкий селект у края экрана) — список
       выравнивается по правому краю селекта, а не уходит за экран */
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    max-inline-size: calc(100vw - 16px);
    margin-block: 6px;
    padding: 6px;
    border: 1px solid rgba(43, 47, 51, 0.1);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-text-strong);
    box-shadow: 0 20px 44px -16px rgba(25, 27, 30, 0.28), 0 2px 8px rgba(25, 27, 30, 0.06);
    max-block-size: min(340px, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain; /* докрутили до конца — страница не едет */
    scrollbar-width: thin;
    opacity: 1;
    translate: 0 0;
    transition: opacity 160ms ease, translate 160ms ease,
      display 160ms allow-discrete, overlay 160ms allow-discrete;
  }
  select:not([multiple]):not([size])::picker(select):not(:popover-open) {
    opacity: 0;
    translate: 0 -4px;
  }
  @starting-style {
    select:not([multiple]):not([size])::picker(select):popover-open {
      opacity: 0;
      translate: 0 -4px;
    }
  }

  select:not([multiple]):not([size]) option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-block-size: 36px;
    padding: 8px 10px 8px 12px;
    border-radius: 8px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-text-strong);
    background: transparent;
    cursor: pointer;
    transition: background-color 120ms ease;
  }
  select:not([multiple]):not([size]) option:hover,
  select:not([multiple]):not([size]) option:focus-visible {
    background: var(--color-bg);
    outline: none;
  }
  select:not([multiple]):not([size]) option:checked {
    background: rgba(29, 217, 122, 0.1);
    font-weight: 600;
  }
  select:not([multiple]):not([size]) option:disabled {
    color: var(--color-muted);
    cursor: not-allowed;
  }
  /* Галочка — справа и в иконке Remix, как остальные значки сайта */
  select:not([multiple]):not([size]) option::checkmark {
    order: 1;
    margin-inline-start: auto;
    content: "\eb7b"; /* ri-check-line */
    font-family: 'remixicon';
    font-size: 15px;
    font-weight: normal;
    line-height: 1;
    color: var(--color-accent-dark);
  }
}

/* Тот же список для Firefox и Safari. Их системный список CSS не
   оформить, поэтому его рисует скрипт (js/main.js, раздел
   «ВЫПАДАЮЩИЙ СПИСОК СЕЛЕКТОВ»), а вид здесь повторяет
   ::picker(select) выше один в один. */
.select-picker {
  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid rgba(43, 47, 51, 0.1);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text-strong);
  box-shadow: 0 20px 44px -16px rgba(25, 27, 30, 0.28), 0 2px 8px rgba(25, 27, 30, 0.06);
  max-height: min(340px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.select-picker.is-above { transform: translateY(4px); }
.select-picker.is-visible { opacity: 1; transform: none; }
.select-picker-group {
  padding: 8px 12px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-muted);
}
.select-picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 8px 10px 8px 12px;
  border-radius: 8px;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 120ms ease;
}
.select-picker-option-text { flex: 1 1 auto; min-width: 0; }
.select-picker-option.is-active { background: var(--color-bg); }
.select-picker-option.is-selected { background: rgba(29, 217, 122, 0.1); font-weight: 600; }
.select-picker-option.is-disabled { color: var(--color-muted); cursor: not-allowed; }
.select-picker-check {
  flex: none;
  margin-left: auto;
  font-size: 15px;
  line-height: 1;
  color: var(--color-accent-dark);
}

@media (prefers-reduced-motion: reduce) {
  .select-picker { transition: none; }
}

.container-page {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 599px) {
  .container-page { padding: 0 20px; }
}

/* =========================================================
   LAYOUT — сайдбар (ПК) + контент
   ========================================================= */
.app-shell {
  display: flex;
  flex-direction: column; /* мобильная шапка и контент идут друг под другом, а не в ряд */
  min-height: 100vh;
}

/* -----------------------------
   Сайдбар — фиксирован, виден только на ПК (≥992px)
------------------------------ */
.sidebar {
  display: none; /* включаем через media query для десктопа */
}

@media (min-width: 992px) {
  .sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    padding: 16px 16px;
    /* overflow-y здесь БОЛЬШЕ НЕ ставим: если весь сайдбар скроллится
       одним блоком, разворот 2-3 категорий в навигации уводит рекламу
       вниз за пределы видимой области — а десктопный сайдбар почти
       никто не прокручивает. Для РСЯ это означает непроходящий порог
       видимости (MRC: непрерывно ≥1 сек в кадре) и нулевую оплату
       показа. Поэтому скроллится только <nav> ниже, а не весь сайдбар */
  }

  .main-content {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
  }

  /* Логотип не сжимается и не участвует в скролле навигации —
     всегда виден первой строкой */
  .sidebar-logo {
    flex-shrink: 0;
  }

  /* Скроллится ТОЛЬКО список категорий и ссылок. min-height: 0
     обязателен для flex-элемента — без него он не сможет сжаться
     и получить собственный скролл, а будет просто раздувать
     родителя (частая причина, почему overflow в такой раскладке
     "не работает" на первый взгляд) */
  .sidebar > nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  /* "Поделиться" и рекламный блок — вне зоны скролла навигации,
     поэтому остаются в кадре ПОСТОЯННО, сколько бы категорий
     пользователь ни раскрыл. Именно это и решает проблему
     с видимостью рекламы для оплаты показов в РСЯ */
  .sidebar-share,
  .sidebar-ad {
    flex-shrink: 0;
  }
}

/* Тонкий скроллбар — теперь только у списка навигации,
   не у всего сайдбара целиком */
.sidebar > nav::-webkit-scrollbar { width: 6px; }
.sidebar > nav::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 10px; }

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  color: var(--sidebar-text);
  letter-spacing: -0.02em;
  transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-logo:hover { color: var(--color-accent); }
.sidebar-logo .dot {
  color: var(--color-accent);
  text-shadow: 0 0 14px rgba(29, 217, 122, 0.65);
}

.sidebar-nav-group {
  margin-bottom: 7px;
  --cat-rgb: var(--nav-accent-rgb);
  --cat: var(--color-accent);
}

/* =========================================================
   ВАРИАНТ «LIQUID GLASS»
   Полупрозрачные скруглённые панели с настоящим backdrop-filter
   (не имитация тенью, а реальное размытие/насыщение того, что
   под элементом), тонкая световая кромка сверху (имитация блика
   на стекле) и мягкая рассеянная тень для ощущения, что панель
   физически приподнята над поверхностью. Переходы чуть длиннее
   и плавнее обычного — материал должен ощущаться "тягучим".
   ========================================================= */

.sidebar-nav-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sidebar-text);
  padding: 7px 12px;
  border-radius: 14px;
  transition: background 320ms cubic-bezier(0.25, 0.1, 0.25, 1), color 220ms ease, box-shadow 320ms ease;
}

.sidebar-nav-toggle-label {
  min-width: 0;
  margin-right: 2px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-nav-toggle:hover,
.sidebar-nav-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}

.sidebar-nav-toggle .count {
  flex-shrink: 0;
  background: none;
  padding: 0;
  color: var(--sidebar-text-muted);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: color 220ms ease;
}

.sidebar-nav-toggle i {
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
  font-size: 13px;
  color: var(--sidebar-text-muted);
  opacity: 0.75;
  -webkit-text-stroke: 0.9px currentColor;
  transition: transform 320ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 220ms ease, color 220ms ease;
}

.sidebar-nav-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--color-accent);
}

/* Раскрытая категория — настоящая стеклянная панель: полупрозрачная
   заливка + blur того, что "под" ней + тонкий световой контур сверху
   + мягкая тень, будто панель приподнята над поверхностью сайдбара */
.sidebar-nav-toggle[aria-expanded="true"] {
  background: rgba(var(--nav-accent-rgb), 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 6px 16px rgba(0, 0, 0, 0.22);
}
.sidebar-nav-toggle[aria-expanded="true"] .count { color: var(--color-accent); }

/* Свёрнутая категория: содержимое скрыто через visibility, а не только
   обрезано высотой. Раньше ссылки закрытых категорий (31 на странице)
   оставались в порядке Tab — фокус уходил в невидимое — и читались
   экранными читалками. Скрытие срабатывает после закрытия (задержка
   равна времени анимации), показ — сразу при открытии. */
.sidebar-nav-content {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height var(--transition-base), visibility 0s linear var(--transition-base);
  margin: 4px 2px 2px;
  border-radius: 14px;
}
.sidebar-nav-content.is-open {
  visibility: visible;
  transition: max-height var(--transition-base), visibility 0s;
  background: var(--sidebar-bg-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 6px 11px;
  margin: 2px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sidebar-text-muted);
  transition: background 260ms cubic-bezier(0.25, 0.1, 0.25, 1), color 200ms ease, box-shadow 260ms ease;
}

.sidebar-link-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Иконка — стеклянная капсула с лёгким бликом сверху */
.sidebar-link i {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  color: var(--sidebar-text-muted);
  transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: var(--sidebar-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.sidebar-link:hover i,
.sidebar-link:focus-visible i {
  background: rgba(var(--nav-accent-rgb), 0.22);
  color: var(--color-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.sidebar-link.is-active {
  background: rgba(var(--nav-accent-rgb), 0.14);
  color: var(--sidebar-text);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 10px rgba(0, 0, 0, 0.18);
}
.sidebar-link.is-active i {
  background: var(--color-accent);
  color: var(--sidebar-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.sidebar-divider {
  height: 1px;
  background: var(--sidebar-border);
  margin: 12px 8px;
}

.sidebar-pages { margin-bottom: 4px; }
.sidebar-pages .sidebar-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sidebar-text-muted);
}
.sidebar-pages .sidebar-link:hover { color: var(--sidebar-text); }
/* Без этого правила активная ссылка на текущую страницу (Блог/Помощь/...)
   оставалась приглушённо-серой поверх зелёной подсветки — .sidebar-pages
   .sidebar-link и .sidebar-link.is-active имеют одинаковый вес (2 класса),
   и это правило, идущее позже в файле, перебивало цвет активного состояния. */
.sidebar-pages .sidebar-link.is-active { color: var(--sidebar-text); }

/* -----------------------------
   Круглая иконка-кнопка внутри поповера "Поделиться" — общий
   стиль и для десктопного варианта (у логотипа), и для мобильного
   (у бургер-меню). Один источник правды, переиспользуется в обоих.
------------------------------ */
.sidebar-share-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sidebar-text-muted);
  border: 1px solid var(--sidebar-border);
  background: var(--sidebar-bg-soft);
  transition: color var(--transition-fast), background var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast);
}
.sidebar-share-icon:hover,
.sidebar-share-icon:focus-visible {
  color: var(--sidebar-bg);
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

/* Иконки соцсетей — собственные SVG (лежат в /assets/img/ui/icons/),
   подключены через CSS mask, а не <img>. Так они красятся через
   background-color: currentColor и подхватывают hover-переход
   .sidebar-share-icon выше автоматически — как обычный шрифт-icon,
   хотя это полноценный самостоятельный SVG-файл. Требование к файлам:
   квадратный viewBox, ОДНОЦВЕТНАЯ заливка (fill), без градиентов —
   маска использует только форму (альфа-канал), а не исходный цвет. */
.share-icon-glyph {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.share-icon-glyph--x {
  -webkit-mask-image: url('/assets/img/ui/icons/twitter.svg');
  mask-image: url('/assets/img/ui/icons/twitter.svg');
}
.share-icon-glyph--telegram {
  -webkit-mask-image: url('/assets/img/ui/icons/telegram.svg');
  mask-image: url('/assets/img/ui/icons/telegram.svg');
}
.share-icon-glyph--vk {
  -webkit-mask-image: url('/assets/img/ui/icons/vk.svg');
  mask-image: url('/assets/img/ui/icons/vk.svg');
}
.share-icon-glyph--ok {
  -webkit-mask-image: url('/assets/img/ui/icons/ok.svg');
  mask-image: url('/assets/img/ui/icons/ok.svg');
}
.share-icon-glyph--whatsapp {
  -webkit-mask-image: url('/assets/img/ui/icons/whatsapp.svg');
  mask-image: url('/assets/img/ui/icons/whatsapp.svg');
}

/* -----------------------------
   Рекламный блок Яндекс РСЯ — десктопный сайдбар (R-A-19646389-3).
   Стоит после <nav>, у которого flex: 1 — навигация сама забирает
   всё свободное место и прижимает рекламу к низу сайдбара. Сайдбар
   зафиксирован, поэтому блок в кадре всё время, пока открыта
   страница: так видимых показов больше всего — закрепить блок
   в сайдбаре рекомендует сам Яндекс.

   Размер 300×400 задан прямо на контейнере с id блока: блок
   «адаптивный», и Яндекс подбирает объявление ровно под размер
   контейнера. Поэтому у контейнера нет ни padding, ни border —
   иначе место под рекламу стало бы меньше заявленного. Ширина
   сайдбара (--sidebar-width) подобрана так, чтобы внутри было
   ровно 300 px.

   Вызов блока — в разметке страницы (стандартный код Яндекса), и
   только на экранах от 992 px шириной и от 560 px высотой: то же
   условие, что и в правилах ниже. Если объявления нет, место
   остаётся (его может заполнить автообновление РСЯ), а фон-заглушка
   убирается (.is-empty). Если загрузчик заблокирован, main.js ставит
   .is-blocked, и место отдаётся навигации.
------------------------------ */
.sidebar-ad {
  padding-top: 16px;
  flex-shrink: 0;
}
.sidebar-ad.is-blocked,
.sidebar-ad.is-unused { display: none; } /* is-unused: окно перешло через 992 px после загрузки, блок для этого места не вызывался (main.js) */
/* Окно ниже 560 px (маленький экран или сильное увеличение): блок
   300×400 не поместился бы в сайдбар целиком, а обрезанный показ
   не засчитывается видимым. Место скрыто — блок не вызывается
   (то же условие проверяет вызов в разметке). Условие записано как
   точное дополнение к вызову: при увеличении страницы высота окна бывает
   дробной (559,5 px), и пара min-height: 560px / max-height: 559px
   оставляла щель, где место показано, а блок не вызван */
@media (min-width: 992px) {
  @media not all and (min-height: 560px) {
    .sidebar-ad { display: none; }
  }
}
.sidebar-ad-box {
  width: 300px;
  height: 400px;
  /* Фон виден лишь долю секунды, пока объявление грузится */
  background: var(--sidebar-bg-soft);
  border-radius: var(--radius-sm);
  /* Слои объявления (z-index внутри рекламы) не выходят за пределы
     блока и не лягут поверх элементов сайта. overflow: hidden здесь
     нет намеренно: скругление обрезало бы углы объявления, а там
     пометка «Реклама» и значок информации — скрывать их нельзя */
  isolation: isolate;
}
/* Объявления нет: место остаётся, но без фона — если в РСЯ включено
   автообновление, загрузчик заполнит его при следующем показе */
.sidebar-ad.is-empty .sidebar-ad-box { background: none; }

/* -----------------------------
   Рекламный блок для мобильной версии (R-A-19646389-4).
   Стоит сразу под hero: на втором экране, а не над первым. Так советует
   Яндекс для телефонов (первый экран и место над шапкой — только
   фиксированные контейнеры), и так блок попадает в кадр тогда, когда
   страница уже загружена и объявление уже на месте: вверху страницы окно
   внимания посетителя совпадает с временем загрузки самой рекламы, а
   видимым показ считается лишь при 50 % площади в кадре не меньше двух
   секунд. Первым элементом колонки снова стоят хлебные крошки, как на ПК.

   Отступы симметричны: сверху — нижний отступ самого hero (свой верхний
   отступ у блока нулевой, и они схлопываются), снизу — такой же, как у
   hero этого типа (48 / 40 px; у hero блога — 32 / 24 px, правила в
   blog.css рядом с его отступами). Когда блок убран (display: none),
   отступы возвращаются к тем, что были у страницы без рекламы.

   Высота. Блок «адаптивный с ограничениями»: Яндекс подбирает объявление
   под размер контейнера. Пока объявления нет, контейнер держит высоту
   --content-ad-height (250 px — вмещает самый востребованный формат
   300×250), и текст страницы не прыгает, когда реклама загрузится.
   Объявление может быть ниже (320×100 и т. п.) — тогда main.js, когда
   блока нет в кадре, ставит класс .is-fit: контейнер сжимается до высоты
   объявления, и пустой плашки под ним не остаётся. Пока блок в кадре,
   ничего не меняется — прыжков на глазах нет. Пока контейнер выше
   объявления, оно стоит по центру: белое поле делится поровну сверху и снизу.

   Вызов блока — в разметке страницы (стандартный код Яндекса), и только
   там, где нет сайдбара. Условие записано как not all and (min-width: 992px)
   — точное дополнение к порогу сайдбара, без щели на дробных ширинах.
   Если объявления нет (.is-empty) или загрузчик не загрузился
   (.is-blocked), main.js убирает блок целиком, но только пока посетитель
   его не видит.
------------------------------ */
.content-ad {
  display: none;
}
@media not all and (min-width: 992px) {
  .content-ad {
    --content-ad-height: 250px;
    display: block;
    margin: 0 0 40px;
  }
  .hero + .content-ad { margin-bottom: 48px; }
  .tool-hero + .content-ad,
  .article-hero + .content-ad { margin-bottom: 40px; }
  .content-ad.is-empty,
  .content-ad.is-blocked,
  .content-ad.is-unused { display: none; }
  .content-ad-box {
    height: var(--content-ad-height);
    /* Объявление ниже 250 px стоит по центру контейнера, а не прижато к верху:
       белое поле делится поровну сверху и снизу и читается как карточка.
       Центрирует сам контейнер, а не отступы у объявления: у корня объявления
       Яндекс задаёт margin: 0 своим правилом, и оно перебивает наше. Вторая
       строка (safe) нужна на случай объявления выше контейнера: оно тогда
       растёт вниз, как раньше, а не вылезает вверх; браузер, не знающий
       safe, пропускает её и оставляет обычное center */
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    /* Фон виден лишь долю секунды, пока объявление грузится */
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    /* Слои объявления не выходят за пределы блока: без этого при
       прокрутке реклама ложилась поверх липкой шапки сайта. Без
       overflow: hidden — углы объявления с пометкой «Реклама»
       не обрезаются */
    isolation: isolate;
  }
  /* Объявление не сжимается под контейнер: выше 250 px оно, как и раньше,
     выходит за его нижний край, а не ужимается */
  .content-ad-box > * { flex-shrink: 0; }
  /* Объявление ниже контейнера: высота по объявлению (ставит main.js) */
  .content-ad.is-fit .content-ad-box { height: auto; }
}
/* -----------------------------
   Функция "Поделиться" — единый компонент для десктопа и мобилки.
   На десктопе стоит рядом с логотипом в сайдбаре (.sidebar-top),
   на мобильной — рядом с бургер-меню (.mobile-header-actions).
   Разметка и класcы идентичны в обоих местах, только контекст
   разный — поэтому один набор правил обслуживает сразу оба места.
------------------------------ */
.mobile-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-widget {
  position: relative;
}

.share-trigger {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  color: var(--sidebar-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.share-trigger:hover,
.share-trigger[aria-expanded="true"] {
  color: var(--sidebar-bg);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.share-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 80;
}
.share-popover.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =========================================================
   MOBILE HEADER + NAV (< 992px)
   ========================================================= */
.mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--sidebar-bg);
  padding: 14px 20px;
  position: sticky;
  top: 0;
  z-index: 60;
}

.mobile-logo {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--sidebar-text);
}
.mobile-logo .dot { color: var(--color-accent); }

.mobile-burger {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--sidebar-bg-soft);
  border: 1px solid var(--sidebar-border);
  color: var(--sidebar-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.mobile-burger:hover { background: rgba(255, 255, 255, 0.1); }

@media (min-width: 992px) {
  .mobile-header { display: none; }
}

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 19, 21, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
  z-index: 70;
}

.mobile-nav-panel {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: min(320px, 86vw);
  background: var(--sidebar-bg);
  transform: translateX(-100%);
  transition: transform var(--transition-base);
  z-index: 80;
  overflow-y: auto;
  padding: 18px 16px 24px;
}

.mobile-nav-open .mobile-nav-overlay { opacity: 1; pointer-events: auto; }
.mobile-nav-open .mobile-nav-panel { transform: translateX(0); }
.mobile-nav-open { overflow: hidden; }

.mobile-nav-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: var(--sidebar-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: background var(--transition-fast);
  margin-bottom: 8px;
}
.mobile-nav-close:hover { background: rgba(255, 255, 255, 0.09); }

@media (min-width: 992px) {
  .mobile-nav-overlay, .mobile-nav-panel { display: none; }
}

/* =========================================================
   BREADCRUMBS
   ========================================================= */
.breadcrumbs {
  font-size: 13.5px;
  color: var(--color-muted);
  padding: 20px 0 4px;
}
/* Список ol/li — так крошки читаются как «список из N пунктов», а не как
   строка со слэшами; текущая страница помечена aria-current в разметке.
   Разделитель — псевдоэлемент с пустым альтернативным текстом, чтобы
   экранные читалки не произносили «косая черта» */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;                    /* расстояние между крошками (крошка / крошка) — поджато */
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 4px;
}
.breadcrumbs li:not(:last-child)::after {
  content: "/";
  content: "/" / "";
  color: var(--color-muted);
  opacity: .35;
}
.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;                    /* вернул как было — иконка домика не должна липнуть к тексту */
  color: var(--color-text);
  font-weight: 500;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.breadcrumbs a:hover {
  color: var(--color-text-strong);
  text-decoration: underline;
  text-decoration-color: currentColor;
}
.breadcrumbs .current { color: var(--color-muted); font-weight: 400; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  background: linear-gradient(160deg, var(--color-accent) 0%, #16b869 100%);
  border-radius: var(--radius-lg);
  --pt: 56px;   /* поля hero вынесены в переменные: от них считается зона значка (см. ниже) */
  --pr: 44px;
  padding: var(--pt) var(--pr);
  margin: 16px 0 48px;
  color: #06231a;
  position: relative;
  overflow: hidden;
}

/* =========================================================
   ЗНАЧОК В УГЛУ HERO (общий для .hero и .tool-hero)
   Фраза по кругу шрифтом Old Soviet, белый с непрозрачностью 20% — она записана в самом
   файле assets/img/ui/badge.svg. Раньше на этом месте был светлый круг.

   Значок не должен налезать на текст никогда. Поэтому он не просто лежит поверх: текстовый
   столбец hero (.hero-inner, .tool-hero-text) обтекает его через невидимый «поплавок»
   ::before. Размер поплавка считается из тех же переменных, что и значок, и из ширины
   самого hero (единицы cqw), поэтому слепой зоны нет ни на какой ширине экрана и ни при
   какой длине заголовка: строки в зоне значка просто короче и переносятся раньше.
   Если текст короче и до значка не дотягивается, поплавок получает нулевую ширину.

   Переменные:
     --bs, --bi, --bg  размер значка, отступ от верхнего и правого края, зазор до текста
     --pt, --pr        верхнее и боковое поле hero (задаются у каждого вида hero)
     --tcap            насколько вправо от левого поля тянется текстовый столбец
                       (его max-width плюс то, что левее: у инструментов — значок
                       инструмента 60 px и зазор 20 px)
     --top0            насколько столбец ниже верхнего поля (у инструментов на
                       телефоне он стоит под значком инструмента)
   Ниже 380 px значок убран: все три размера обнуляются, зона исчезает вместе с ним.
   Браузеры без единиц cqw значок не получают вовсе (см. @supports ниже).
   ========================================================= */
.hero,
.tool-hero {
  container: hero / inline-size;
  --bs: 112px;
  --bi: 24px;
  --bg: 14px;
}
@media (max-width: 991px) {
  .hero, .tool-hero { --bs: 88px; --bi: 18px; }
}
@media (max-width: 599px) {
  .hero, .tool-hero { --bs: 64px; --bi: 14px; }
}
@media (max-width: 379px) {
  .hero, .tool-hero { --bs: 0px; --bi: 0px; --bg: 0px; }
}

.hero::after,
.tool-hero::after {
  content: "";
  position: absolute;
  top: var(--bi);
  right: var(--bi);
  width: var(--bs);
  height: var(--bs);
  background: url("../assets/img/ui/badge.svg") center / contain no-repeat;
  pointer-events: none;
}

/* --cw — ширина зоны значка внутри текстового столбца (то, что не должен занимать текст) */
.hero-inner,
.tool-hero-text {
  --cw: max(0px, min(var(--tcap) - 100cqw, 0px) + var(--bi) + var(--bs) + var(--bg) - var(--pr));
}
.hero-inner::before,
.tool-hero-text::before {
  content: "";
  float: right;
  width: var(--cw);
  height: max(0px, var(--bi) + var(--bs) + var(--bg) - var(--pt) - var(--top0, 0px));
}
/* Плашка над заголовком — неразрывный блок: не поместившись рядом с зоной значка, она
   «уехала» бы под неё и сдвинула весь заголовок вниз на высоту значка. Поэтому ей
   запрещено быть шире свободного места, и длинный текст плашки переносится внутри неё */
.hero-eyebrow,
.tool-hero-eyebrow { max-width: calc(100% - var(--cw, 0px) - 1px); }

@supports not (width: 1cqw) {
  .hero::after,
  .tool-hero::after { display: none; }
}
/* Отступы 56px 44px были одинаковы на любой ширине — на телефоне
   вместе с 20px паддингом .container-page это съедало 128px по
   бокам, оставляя тексту всего ~247px из 375px экрана (66% ширины
   уходило в поля). Внутренние поля сокращаем, .hero-inner при этом
   и так растягивается на всю доступную ширину — просто она была
   слишком узкой. */
@media (max-width: 640px) {
  .hero { --pt: 32px; --pr: 24px; border-radius: var(--radius-md); }
}
@media (max-width: 420px) {
  .hero { --pt: 28px; --pr: 18px; }
}

.hero-inner { position: relative; max-width: 640px; --tcap: 640px; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 35, 26, 0.12);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}
.hero-eyebrow-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #06231a;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero h1 {
  color: #06231a;
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 16px;
}

.hero-highlight {
  color: #06231a;
  text-decoration: underline;
  text-decoration-color: rgba(6, 35, 26, 0.35);
  text-underline-offset: 4px;
}

.hero p.lead {
  color: rgba(6, 35, 26, 0.82);
  font-size: 17px;
  max-width: 520px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn:hover { transform: translateY(-1px); }

.btn-dark {
  background: var(--color-text-strong);
  color: #fff;
}
.btn-dark:hover { background: #000; color: #fff; }

.btn-outline {
  background: transparent;
  border-color: rgba(6, 35, 26, 0.35);
  color: #06231a;
}
.btn-outline:hover { background: rgba(6, 35, 26, 0.08); color: #06231a; }

.hero-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 36px;
  position: relative;
}
@media (max-width: 767px) {
  .hero-benefits { grid-template-columns: 1fr; }
}
.hero-benefit {
  background: rgba(255,255,255,0.16);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-benefit i { font-size: 18px; color: #06231a; }
.hero-benefit strong { font-size: 14px; font-weight: 600; }

.hero-proof {
  margin: 24px 0 0;
  font-size: 14.5px;
  color: rgba(6, 35, 26, 0.82);
}
.hero-proof span {
  font-family: var(--font-display);
  font-weight: 700;
  color: #06231a;
  font-size: 17px;
  margin-right: 4px;
}

/* =========================================================
   SECTIONS / CARDS
   ========================================================= */
.section { margin-bottom: 56px; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.section-head .eyebrow {
  color: var(--color-accent-dark);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  display: block;
}

.section-head p { color: var(--color-muted); max-width: 560px; margin: 0; }

.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 991px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .tools-grid { grid-template-columns: 1fr; } }

.tool-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(43, 47, 51, 0.06);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
  height: 100%;
}
.tool-card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
  border-color: rgba(29, 217, 122, 0.35);
}

.tool-card-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #06231a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 8px 18px -8px rgba(29, 217, 122, 0.5);
}

.tool-card h3 { font-size: 16.5px; margin-bottom: 6px; }
.tool-card p { font-size: 14px; color: var(--color-muted); margin-bottom: 12px; }
.tool-card .tool-link { font-size: 13.5px; font-weight: 600; color: var(--color-text-strong); display: inline-flex; align-items: center; gap: 6px; }
.tool-card .tool-link i { font-size: 13px; transition: transform var(--transition-fast); }
.tool-card:hover .tool-link { color: var(--color-accent-dark); }
.tool-card:hover .tool-link i { transform: translateX(3px); }

.category-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

/* Блок "Почему Neorank" — простые строки-преимущества */
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px;
}
@media (max-width: 699px) { .reasons-grid { grid-template-columns: 1fr; } }

.reason-item { display: flex; gap: 14px; }
.reason-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--color-accent);
  color: #06231a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 14px -6px rgba(29, 217, 122, 0.55);
}
.reason-item h3 { font-size: 15.5px; margin-bottom: 4px; }
.reason-item p { font-size: 14px; color: var(--color-muted); margin: 0; }

/* Как это работает — шаги (реальная последовательность, поэтому нумерация уместна) */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: step;
}
@media (max-width: 767px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 22px;
  border: 1px solid rgba(43,47,51,0.06);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}
.step h3 { font-size: 15.5px; }
.step p { font-size: 14px; color: var(--color-muted); margin: 0; }

/* CTA-полоса перед футером */
/* Светло-серая утопленная панель — тот же фон, что у строки
   уведомлений (#E8E9EC). Тень — тонкая и прицельная (1–2px
   блюра, не размытое пятно), плюс едва заметный светлый блик
   по нижнему краю — так поверхность читается вжатой, а не
   просто тёмной каймой по контуру. */
.cta-strip {
  background: #E8E9EC;
  box-shadow:
    inset 0 1px 2px rgba(15, 17, 20, 0.08),
    inset 0 1.5px 0 rgba(15, 17, 20, 0.03),
    inset 0 -1px 0 rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 30px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.cta-strip h2 { color: var(--color-text-strong); margin-bottom: 4px; font-size: 21px; }
.cta-strip p { color: var(--color-muted); margin: 0; font-size: 14.5px; }

/* Кнопка — приподнятая (лёгкая тень наружу), нарочный контраст
   с вжатой панелью под ней: одна поверхность утоплена, другая
   выступает. Радиус чуть крупнее стандартного .btn — ближе к
   скруглению самой панели, чтобы формы не спорили друг с другом. */
.cta-strip .btn-accent {
  background: var(--color-accent);
  color: #06231a;
  /* Нажатая кнопка. Bootstrap красит её через --bs-btn-active-*, а у нашей
     .btn их нет: рамка брала цвет текста (тонкая тёмная обводка, пока держишь
     мышь), цвет надписи на миг менялся. Задаём то же, что у кнопки под курсором */
  --bs-btn-active-color: #06231a;
  --bs-btn-active-bg: var(--color-accent-dark);
  --bs-btn-active-border-color: transparent;
  border-radius: 12px;
  padding: 13px 24px;
  box-shadow: 0 1px 2px rgba(15, 17, 20, 0.06), 0 5px 14px -5px rgba(29, 217, 122, 0.5);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.cta-strip .btn-accent:hover {
  background: var(--color-accent-dark);
  box-shadow: 0 2px 4px rgba(15, 17, 20, 0.08), 0 7px 18px -5px rgba(29, 217, 122, 0.6);
  transform: translateY(-1px);
}
.cta-strip .btn-accent:active { transform: translateY(0); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--sidebar-bg);
  color: var(--sidebar-text-muted);
  margin-top: 40px;
  padding: 56px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 36px;
}
@media (max-width: 899px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-logo {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--sidebar-text);
  display: inline-block;
  margin-bottom: 12px;
}
.footer-logo:hover { color: var(--color-accent); }
.footer-logo .dot { color: var(--color-accent); }
.footer-about { font-size: 14px; max-width: 260px; color: var(--sidebar-text-muted); }

.footer-col-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sidebar-text);
  margin-bottom: 14px;
}
.footer-col li { margin-bottom: 9px; }
.footer-col a { font-size: 14px; color: var(--sidebar-text-muted); }
.footer-col a:hover { color: var(--color-accent); }

/* Соцсети в столбце «Контакты» (ВКонтакте, Telegram): знак каждой сам
   по себе цельная фигура (скруглённый квадрат, круг), поэтому без
   подложки — в тоне текста, при наведении вместе с подписью
   становится фирменно-зелёным */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-social i {
  font-size: 18px;
  line-height: 1;
}

.footer-col-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-accent) !important;
  font-weight: 600;
}
.footer-col-cta i {
  font-size: 12px;
  transition: transform var(--transition-fast);
}
.footer-col-cta:hover i { transform: translateX(3px); }

.footer-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid var(--sidebar-border);
  font-size: 13.5px;
  color: var(--sidebar-text-muted);
}
.footer-badge i { color: var(--color-accent); font-size: 20px; }
.footer-badge strong { color: var(--sidebar-text); font-weight: 600; }

/* Овал с логотипом Wadline — полупрозрачный светлый фон, потому что
   футер тёмный. Логотипу задана ЯВНАЯ высота 24px напрямую на самом
   <img> — ширина auto, чтобы пропорции сохранились. Раньше размер
   задавался только через object-fit:contain в тесном контейнере,
   из-за чего видимая область картинки получалась мельче, чем нужно.
   Овал теперь сам подстраивается под ширину лого через padding,
   а не имеет фиксированную ширину. */
.footer-badge-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.footer-badge-logo {
  display: block;
  height: 24px;
  width: auto;
}

.footer-bottom {
  border-top: 1px solid var(--sidebar-border);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}
.footer-bottom a:hover { color: var(--color-accent); }

/* Группировка нескольких ссылок на политики в один флекс-блок —
   чтобы justify-content: space-between у .footer-bottom оставался
   двухзонным (копирайт слева, ссылки справа), а не расползался
   на три неравномерных элемента при добавлении второй ссылки */
.footer-links-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.footer-legal {
  font-size: 11.5px;
  color: #565c60;
  margin-top: 14px;
  line-height: 1.5;
}

/* Миссия: двухколончная раскладка */
.mission-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: start;
  margin: 0;
}
@media (max-width: 991px) {
  .mission-grid { grid-template-columns: 1fr; gap: 36px; }
}

.mission-left h2 { font-size: clamp(24px, 4vw, 32px); margin-bottom: 22px; }
.mission-left p { font-size: 15px; line-height: 1.7; margin-bottom: 18px; }
.mission-left p:last-child { margin-bottom: 0; }

/* Статистика: 2х2 или 4 в ряд */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 767px) {
  .stats-grid { grid-template-columns: 1fr; }
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid rgba(29, 217, 122, 0.15);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 700;
  color: var(--color-accent-dark);
  letter-spacing: -0.02em;
}

.stat-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted);
}

/* Принципы: 4 блока с нумерацией */
.principles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.principle-item {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 28px;
  border: 1px solid rgba(43, 47, 51, 0.06);
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 599px) {
  .principle-item {
    grid-template-columns: 50px 1fr;
    gap: 18px;
    padding: 22px;
  }
}

.principle-marker {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent-dark);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.principle-item h3 { font-size: 16px; margin-bottom: 8px; }
.principle-item p { font-size: 14.5px; color: var(--color-muted); margin-bottom: 0; line-height: 1.65; }

/* =========================================================
   PRELOADER
   Анимируются только transform и opacity: их ведёт видеокарта, поэтому
   вращение не замирает, пока основной поток занят (скрипты рекламы,
   счётчики, разбор страницы). Ни фильтров, ни масок, ни размытия.
   Разметка одинакова на всех страницах, скрытие ставит js/main.js.
   ========================================================= */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  /* Страховка на чистом CSS: если скрипт не выполнится, оверлей уйдёт
     сам через 4 с и не оставит страницу перекрытой */
  animation: preloader-out 300ms ease 4s forwards;
}
@keyframes preloader-out {
  to { opacity: 0; visibility: hidden; }
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  /* visibility переключается после того, как оверлей растворился */
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}

.preloader-mark {
  position: relative;
  width: 96px;
  height: 96px;
}

/* Знак лежит поверх вращающегося диска. Заливка .preloader-cover
   (цвет оверлея) закрывает диск целиком, кроме узкого кольца вокруг
   знака: свет виден только там */
.preloader-mark svg {
  position: relative;
  display: block;
}
.preloader-cover { fill: var(--color-surface); }
.preloader-letter {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  fill: #fff;
}

.preloader-spin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Голова светлой полосы ведёт, хвост плавно гаснет; вращение по часовой */
  background: conic-gradient(from 0deg,
    rgba(29, 217, 122, 0) 0deg,
    rgba(29, 217, 122, 0) 268deg,
    rgba(29, 217, 122, 0.35) 312deg,
    #1DD97A 346deg,
    #1DD97A 356deg,
    rgba(29, 217, 122, 0) 360deg);
  animation: preloader-spin 2.4s linear infinite;
}
@keyframes preloader-spin {
  to { transform: rotate(360deg); }
}
/* Скрытый оверлей ничего не считает: анимация замирает на месте */
.preloader.is-hidden .preloader-spin { animation-play-state: paused; }

/* Системная настройка «уменьшить движение»: свет не вращается */
@media (prefers-reduced-motion: reduce) {
  .preloader-spin { animation: none; transform: rotate(-45deg); }
  .preloader, .preloader.is-hidden { transition-duration: 1ms; transition-delay: 0s; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   SCROLLBAR — кастомный стиль синий и серый
   ========================================================= */

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #f3f4f6;
}

::-webkit-scrollbar-thumb {
  background: #5B7F84;
  border-radius: 6px;
  border: 2px solid #f3f4f6;
  transition: background 0.2s, box-shadow 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: #4a6a70;
  box-shadow: inset 0 0 3px rgba(91, 127, 132, 0.5);
}

/* Scrollbar для сайдбара — темный */
.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: #383e48;
  border-radius: 4px;
  border: none;
  transition: background 0.2s;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: #5B7F84;
  box-shadow: none;
}

/* Firefox scrollbar */
* {
  scrollbar-color: #5B7F84 #f3f4f6;
  scrollbar-width: thin;
}

*:hover {
  scrollbar-color: #4a6a70 #e5e7eb;
}

.sidebar > nav {
  scrollbar-color: #383e48 transparent;
}

.sidebar > nav:hover {
  scrollbar-color: #5B7F84 transparent;
}

/* =========================================================
   Утилиты
   ========================================================= */

.mt-0 { margin-top: 0; }
.text-muted { color: var(--color-muted); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   TOOL HERO — универсальный hero для страниц инструментов
   ========================================================= */

.tool-hero {
  margin: 16px 0 40px;
  --pt: 40px;
  --pr: 40px;
  padding: var(--pt) var(--pr);
  background: linear-gradient(160deg, var(--color-accent) 0%, #16b869 100%);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .tool-hero { --pt: 24px; --pr: 20px; }
}


.tool-hero-top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
}

@media (max-width: 640px) {
  .tool-hero-top { flex-direction: column; align-items: flex-start; gap: 16px; }
}

.tool-hero-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background: rgba(6, 35, 26, 0.12);
  color: #06231a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.tool-hero-text { max-width: 720px; position: relative; --tcap: 800px; /* 720 + значок инструмента 60 + зазор 20 */ }
@media (max-width: 640px) {
  .tool-hero-text { --tcap: 720px; --top0: 76px; /* столбец под значком инструмента: 60 + зазор 16 */ }
}

.tool-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(6, 35, 26, 0.12);
  color: #06231a;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 14px;
}

.tool-hero h1 {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.25;
  color: #06231a;
  margin: 0 0 14px 0;
}

/* Инлайн-код в hero. Hero залит зелёным градиентом, поэтому обычная
   «зелёная» подсветка кода со страницы здесь сливается с фоном.
   Даём тёмное облачко в цвет заголовка с белым текстом — читается
   на любом участке градиента. Правило общее для всех инструментов. */
.tool-hero-lead code,
.tool-hero-text code {
  max-width: none;
  margin-block: 0;
  padding: 2px 7px;
  background: #06231a;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 0.86em;
  line-height: 1.4;
  color: #fff;
  white-space: nowrap;
}

.tool-hero-highlight {
  color: #06231a;
  text-decoration: underline;
  text-decoration-color: rgba(6, 35, 26, 0.35);
  text-underline-offset: 4px;
}

.tool-hero-lead {
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(6, 35, 26, 0.82);
  margin: 0;
  max-width: 640px;
}

/* Ключевые преимущества — считываются мгновенно */
.tool-hero-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  gap: 12px;
  margin-top: 28px;
  position: relative;
}

.tool-hero-benefit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.tool-hero-benefit i {
  flex-shrink: 0;
  font-size: 17px;
  color: #06231a;
  /* высота строки = первой строке заголовка (13.5px × 1.4): иконка по её центру */
  line-height: 18.9px;
}

.tool-hero-benefit-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #06231a;
  line-height: 1.4;
}
.tool-hero-benefit-text span {
  display: block;
  font-size: 12.5px;
  color: rgba(6, 35, 26, 0.72);
  line-height: 1.4;
  margin-top: 2px;
}

/* Строка доверия — E-E-A-T: экспертность, актуальность, прозрачность */
.tool-hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(6, 35, 26, 0.15);
  position: relative;
}

.tool-hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(6, 35, 26, 0.75);
}
.tool-hero-trust-item i {
  color: #06231a;
  font-size: 14px;
}
.tool-hero-trust-item strong {
  color: #06231a;
  font-weight: 600;
}

/* =========================================================
   TOOL SEO GRID — 4 плитки экспертного текста об инструменте
   ========================================================= */

.tool-seo {
  margin: 56px 0;
}

.tool-seo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 28px;
}

@media (max-width: 768px) {
  .tool-seo-grid { grid-template-columns: 1fr; }
}

.tool-seo-tile {
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.06);
  border-radius: var(--radius-md);
  padding: 26px;
}

.tool-seo-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(29, 217, 122, 0.1);
  color: var(--color-accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
}

.tool-seo-tile h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-strong);
  margin: 0 0 10px 0;
}

.tool-seo-tile p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0;
}

.tool-seo-tile p + p { margin-top: 10px; }

/* Ссылки в SEO-текстах и ответах FAQ оформляет общий стандарт ссылок
   (блок «ТЕКСТОВЫЕ ЭЛЕМЕНТЫ» выше) — своих правил здесь нет. */

/* =========================================================
   TOOL FAQ — универсальный блок частых вопросов
   ========================================================= */

.tool-faq {
  margin: 56px 0;
}

.tool-faq-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tool-faq-item {
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.06);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Разметка вопроса — образец WAI-ARIA для аккордеона: заголовок h3
   (уровень под h2 «Частые вопросы»), внутри него кнопка. Раньше
   заголовок лежал внутри кнопки, а по стандарту HTML в кнопке заголовков
   быть не может: читалки экрана теряли структуру, а поисковики видели
   вопросы не как заголовки раздела. Вид остался прежним: шрифт
   заголовков сайта, 15.5px, полужирный. */
.tool-faq-heading {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
}

.tool-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  /* Шрифт, размер, цвет и трекинг берутся у заголовка вокруг кнопки */
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Кольцо фокуса — внутрь: карточка обрезает всё, что выходит за её край
   (overflow: hidden), а общее кольцо сайта рисуется снаружи кнопки, и у
   вопросов оно было невидимо — пользователь клавиатуры не видел, где он. */
.tool-faq-question:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-radius: calc(var(--radius-md) - 1px);
}
.tool-faq-question i {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-accent-dark);
  transition: transform var(--transition-base);
}

.tool-faq-item.is-open .tool-faq-question i {
  transform: rotate(180deg);
}

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

.tool-faq-answer-inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.2s;
}
.tool-faq-item.is-open > .tool-faq-answer > .tool-faq-answer-inner {
  visibility: visible;
  transition-delay: 0s;
}

/* Отступы держат абзацы, а не обёртка: поля обёртки не сжимались бы до
   нуля вместе со строкой сетки и оставляли бы щель под закрытым вопросом */
.tool-faq-answer-inner > p {
  margin: 0;
  padding: 0 22px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--color-text);
}
.tool-faq-answer-inner > p + p { margin-top: 10px; }
.tool-faq-answer-inner > :last-child { margin-bottom: 20px; }

/* «Уменьшить движение» в системе: ответы раскрываются мгновенно */
@media (prefers-reduced-motion: reduce) {
  .tool-faq-answer,
  .tool-faq-answer-inner,
  .tool-faq-question i { transition: none; }
}

/* Печать и браузер без JavaScript: кнопки не сработают, поэтому все
   ответы показаны раскрытыми — текст не должен пропасть с бумаги и из
   страницы. */
@media print, (scripting: none) {
  .tool-faq-answer { grid-template-rows: 1fr; }
  .tool-faq-answer-inner { visibility: visible; }
}

/* =========================================================
   БЛОК "ПОХОЖИЕ ИНСТРУМЕНТЫ" — перелинковка между инструментами.
   Общий компонент, используется на всех страницах инструментов.
   ========================================================= */

.related-tools {
  margin: 8px 0 32px 0;
  container: related-tools / inline-size;
}

.related-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* Три карточки — только если колонке хватает места (иначе текст сжимался до 50 px): ниже порога карточки идут в один столбец */
@container related-tools (max-width: 740px) {
  .related-tools-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 800px) {
  .related-tools-grid {
    grid-template-columns: 1fr;
  }
}

.related-tool-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  min-width: 0; /* элемент грида по умолчанию не сжимается уже min-content
                   контента (иконка + текст) — на промежуточных ширинах
                   (когда виден сайдбар, но колонок ещё три) это реально
                   выталкивало карточку за пределы страницы на ~12px */
  background: var(--color-surface);
  border: 1.5px solid rgba(43, 47, 51, 0.06);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.related-tool-card:hover {
  border-color: rgba(29, 217, 122, 0.35);
  background: rgba(29, 217, 122, 0.03);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* Единственное отличие от исходной версии: заливка сплошным
   фирменным зелёным вместо бледной 10%-тонировки — иконка
   инструмента заметнее на белой карточке. Тёмно-зелёный текст
   поверх сплошного акцента — та же контрастная пара, что уже
   используется по сайту на активных/выбранных элементах. */
.related-tool-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: #06231a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}

.related-tool-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}

.related-tool-text strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text-strong);
  font-family: var(--font-display);
}

.related-tool-text span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-muted);
}

.related-tool-arrow {
  color: var(--color-muted);
  font-size: 14px;
  flex-shrink: 0;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.related-tool-card:hover .related-tool-arrow {
  transform: translateX(3px);
  color: var(--color-accent-dark);
}

/* "Скоро" — тизер ещё не выпущенного инструмента среди похожих.
   Ведёт на реальный URL будущей страницы (честно, не заглушка-плейсхолдер
   в никуда), но визуально отмечен как отличающийся от остальных —
   рабочих прямо сейчас — карточек. Переиспользуемый паттерн: пригодится
   на других страницах, ссылающихся на тот же ещё не готовый инструмент. */
.related-tool-soon-badge {
  display: inline-block;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-accent-dark); background: rgba(29, 217, 122, 0.12);
  padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 2px;
}
.related-tool-card--soon { opacity: 0.88; }
.related-tool-card--soon:hover { opacity: 1; }

/* =========================================================
   NOTICE SLIDER — тонкая системная полоса уведомлений на всю
   ширину контентной области. Универсальный компонент для всех
   страниц сайта.

   Дизайн-логика: ровный светло-серый тон, заметно отличающийся
   от фона страницы (--color-bg), но лёгкий и воздушный — без
   тёмных заливок и плотных теней. Полоса без скруглений и на
   всю ширину читается как тонкий системный элемент интерфейса,
   а не как карточка контента.

   Внешний блок — full-bleed фон. Внутренний .notice-slider-inner
   выровнен по той же сетке, что .container-page (max-width + padding),
   поэтому текст полосы визуально стыкуется с заголовком страницы ниже.
   ========================================================= */

.notice-slider {
  position: relative;
  background: #E8E9EC;
  /* Очень мягкая внутренняя тень у нижнего края — едва уловимая глубина
     без жёсткой линии, в духе аккуратного flat-дизайна */
  box-shadow: inset 0 -1px 3px rgba(15, 17, 20, 0.045);
  z-index: 5;
}

.notice-slider-inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 599px) {
  .notice-slider-inner { padding: 0 20px; }
}

/* Текст выровнен по тому же левому краю, что заголовок и хлебные крошки
   ниже — поэтому начало текста в полосе визуально совпадает с началом
   остального контента страницы, а не "плавает" по центру между стрелками. */
.notice-slider-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.notice-slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.notice-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 6px 0;
  text-align: left;
}

.notice-slide-icon {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-accent-dark);
}

.notice-slide-text {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--color-muted);
  /* Длинный текст переносится, а не обрезается — читаемость важнее компактности */
  overflow-wrap: break-word;
}

.notice-slide-text strong {
  font-weight: 700;
  color: var(--color-text);
}

/* Единая группа управления справа: точки + стрелки. Компактный кластер,
   не растянутый по краям — не мешает тексту слева держать общую сетку. */
.notice-slider-controls {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 16px;
  margin-left: 16px;
  border-left: 1px solid rgba(15, 17, 20, 0.08);
}

.notice-slider-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  margin-right: 10px;
}

.notice-dot {
  width: 5px;
  height: 5px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(15, 17, 20, 0.16);
  cursor: pointer;
  transition: background 220ms cubic-bezier(0.4, 0, 0.2, 1), width 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.notice-dot.is-active {
  width: 13px;
  border-radius: 3px;
  background: var(--color-accent-dark);
}

/* Стрелки — компактные самостоятельные кнопки с мягкой подложкой,
   а не флеш-зоны тулбара. */
.notice-slider-arrow {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: rgba(15, 17, 20, 0.38);
  font-size: 11.5px;
  cursor: pointer;
  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.notice-slider-arrow:hover {
  background: rgba(15, 17, 20, 0.06);
  color: rgba(15, 17, 20, 0.75);
}

.notice-slider-arrow:active { transform: scale(0.88); }

@media (max-width: 640px) {
  .notice-slider-controls { padding-left: 10px; margin-left: 10px; }
  .notice-slider-arrow { width: 20px; height: 20px; font-size: 11px; }
  .notice-slide { padding: 6px 0; gap: 6px; }
  .notice-slide-text { font-size: 11px; line-height: 1.4; }
  .notice-slider-dots { display: none; } /* На мобильном стрелок + текста достаточно, точки экономим место */
}
/* =========================================================
   ЦЕНТРИРОВАНИЕ ШРИФТОВЫХ ИКОНОК В КНОПКАХ НАВИГАЦИИ
   У инлайновых иконок центрируется строчная коробка, а не сам
   глиф — из-за собственных метрик шрифта значок садится на
   пиксель-другой выше или ниже. Флекс по обеим осям с
   line-height:1 убирает зависимость от метрик.
   ========================================================= */
.sidebar-nav-toggle i,
.share-trigger i,
.sidebar-share-icon i,
.mobile-nav-close i,
.mobile-burger i,
.notice-slider-arrow i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* =========================================================
   ПЛАВНАЯ ПРОКРУТКА
   ========================================================= */

/* Якорная ссылка останавливает раздел не вплотную к краю экрана,
   а с отступом; на телефоне — ниже липкой шапки (64 px) */
[id] { scroll-margin-top: 24px; }
@media (max-width: 991.98px) {
  [id] { scroll-margin-top: 84px; }
}

/* Пока страница плавно едет, колесо над встроенным фреймом (реклама,
   видео) не должно перехватываться фреймом и обрывать прокрутку */
.lenis.lenis-smooth iframe { pointer-events: none; }

/* «Уменьшить движение» в системе — прокрутка без анимации */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =========================================================
   РУЧКА ИЗМЕНЕНИЯ ВЫСОТЫ ПОЛЕЙ
   Ставит скрипт (js/main.js, «Поля ввода: ручка изменения высоты»):
   тонкая «пилюля» по центру нижнего края поля. Штатный уголок
   resize она заменяет, поэтому у подключённого поля он гасится.
   Если скрипт не сработал, атрибута data-rz у поля нет и остаётся
   обычный resize из CSS инструмента.
   ========================================================= */
textarea[data-rz] {
  /* !important: у инструментов свои правила resize, в том числе более
     специфичные, чем этот селектор */
  resize: none !important;
}

.rz-handle {
  position: absolute;
  left: 0;
  top: 0;                   /* точное место ставит скрипт */
  width: 76px;
  height: 26px;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  cursor: ns-resize;
  touch-action: none;       /* палец тянет ручку, а не прокручивает страницу */
  overflow-anchor: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.rz-handle[hidden] { display: none; }

/* Сам знак. Область нажатия заметно больше него — в ручку легко попасть */
.rz-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 2px;
  background: rgba(43, 47, 51, 0.26);
  transition:
    width var(--transition-fast),
    height var(--transition-fast),
    margin-left var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
@media (hover: hover) {
  .rz-handle:hover::before {
    width: 52px;
    margin-left: -26px;
    background: var(--color-accent-dark);
  }
}
.rz-handle:focus-visible {
  /* кольцо внутри области ручки: не заезжает на рамку самого поля */
  outline: 2px solid var(--color-accent);
  outline-offset: -3px;
}
.rz-handle:focus-visible::before {
  width: 52px;
  margin-left: -26px;
  background: var(--color-accent-dark);
}
.rz-handle.is-active::before {
  width: 60px;
  height: 5px;
  margin-left: -30px;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px rgba(29, 217, 122, 0.16);
}

/* Перетаскивание: одинаковый курсор над чем угодно, без выделения
   текста, прокрутка у края экрана — мгновенная */
html.rz-dragging { scroll-behavior: auto !important; }
html.rz-dragging,
html.rz-dragging * {
  cursor: ns-resize !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Палец: область нажатия 132 × 44 px (рекомендация Apple и Material — от 44) */
@media (pointer: coarse) {
  .rz-handle {
    width: 132px;
    height: 44px;
    border-radius: 14px;
  }
  .rz-handle::before {
    bottom: 14px;
    width: 52px;
    height: 5px;
    margin-left: -26px;
    border-radius: 3px;
  }
  .rz-handle.is-active::before {
    width: 68px;
    height: 6px;
    margin-left: -34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rz-handle::before { transition: none; }
}
@media (forced-colors: active) {
  .rz-handle::before { background: CanvasText; }
  .rz-handle:focus-visible { outline-color: Highlight; }
}
@media print {
  .rz-handle { display: none !important; }
}

/* =========================================================
   УВЕДОМЛЕНИЕ О COOKIE
   Разметку создаёт js/main.js (блок «УВЕДОМЛЕНИЕ О COOKIE»); здесь
   только вид. Тёмная карточка в цвет боковой панели: заголовок,
   текст и в один ряд у левого края две кнопки одной высоты и с
   одинаковым скруглением — зелёная «Принять» и серая «Подробнее»;
   крестик в углу. Закреплена в правом нижнем углу и не сдвигает
   вёрстку. z-index 60 — выше контента, но ниже мобильного меню (70),
   полноэкранных инструментов (до 2000) и их всплывающих сообщений
   (2100): те всегда поверх. Рекламные блоки (левый сайдбар на
   компьютере, верх колонки на телефоне) карточка не закрывает.
   Тень тонкая: кольцо 0,5 px, контактная и короткая мягкая — карточка
   лежит на странице, а не парит над ней. Анимация только opacity и
   transform — вёрстку не пересчитывает.

   Отступы держит одна переменная --cn-pad: слева, справа, сверху и
   снизу до края текста, кнопок и значка крестика одно и то же
   расстояние. Крестик ставится от неё же: его центр лежит на линии
   заголовка, а сам значок упирается в правое поле. Высота кнопок —
   --cn-h, размер крестика — --cn-x; на телефоне они меняются, а
   область нажатия остаётся не меньше 36–44 px за счёт ::before.
   ========================================================= */
.cookie-note {
  --cn-pad: 14px;
  --cn-x: 24px;
  --cn-h: 30px;
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  box-sizing: border-box;
  width: min(336px, calc(100vw - 32px)); /* текст в 3 строки при 320-352+ px; 336 — середина с запасом на запасной шрифт */
  padding: var(--cn-pad);
  background: var(--sidebar-bg);
  color: #b8bfc6;
  border-radius: 16px;
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 6px 18px -6px rgba(0, 0, 0, 0.4);
  font-family: var(--font-body);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cookie-note.is-in {
  opacity: 1;
  transform: translateY(0); /* не none: иначе Firefox в конце анимации снимает слой и сдвигает строки текста на 1 px */
}

.cookie-note-title {
  margin: 0;
  padding-right: calc(var(--cn-x) + 8px); /* место под крестик */
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: #fff;
}
.cookie-note-text {
  margin: 3px 0 10px;
  font-size: 13px;
  line-height: 1.4;
  color: #b8bfc6; /* явно: общее правило для p иначе перекрашивает текст */
  text-wrap: pretty;
}

.cookie-note-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.cookie-note-accept,
.cookie-note-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--cn-h);
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.cookie-note-accept::before,
.cookie-note-more::before { /* область нажатия выше видимой кнопки */
  content: "";
  position: absolute;
  inset: -5px 0; /* 34 px на телефоне + 10 = 44 px по высоте */
}
.cookie-note-accept:active,
.cookie-note-more:active { transform: scale(0.97); }
.cookie-note-accept {
  background: var(--color-accent);
  color: #06231a;
}
.cookie-note-accept:hover { background: var(--color-accent-dark); }
.cookie-note-more {
  background: rgba(255, 255, 255, 0.1);
  color: #e6e9ec;
}
.cookie-note-more:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.cookie-note-more i { margin-right: -2px; font-size: 14px; }

.cookie-note-close {
  position: absolute;
  /* центр — на линии заголовка (pad + 9), значок 14 px упирается в правое поле */
  top: calc(var(--cn-pad) + 9px - var(--cn-x) / 2);
  right: calc(var(--cn-pad) - (var(--cn-x) - 14px) / 2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cn-x);
  height: var(--cn-x);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #8a939b;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.cookie-note-close::before { /* область нажатия шире видимого круга */
  content: "";
  position: absolute;
  inset: -6px;
}
.cookie-note-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* Телефон: карточка во всю ширину экрана с небольшими полями,
   отступы и высота кнопок подобраны под палец */
@media (max-width: 600px) {
  .cookie-note {
    --cn-pad: 12px;
    --cn-h: 34px;
    left: calc(10px + env(safe-area-inset-left, 0px));
    right: calc(10px + env(safe-area-inset-right, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto;
    border-radius: 14px;
  }
}
@media (pointer: coarse) {
  .cookie-note { --cn-x: 32px; --cn-h: 34px; }
}
@media (max-width: 340px) {
  .cookie-note-text { font-size: 12.5px; }
}

/* Телефон в горизонтали: карточка шире, текст идёт в две строки (420-520 px) */
@media (min-width: 601px) and (max-height: 480px) {
  .cookie-note { width: min(460px, calc(100vw - 32px)); }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-note { transform: none; transition: opacity 0.15s linear; }
  .cookie-note-accept, .cookie-note-more { transition: none; }
}
@media (forced-colors: active) {
  .cookie-note { border: 1px solid CanvasText; }
  .cookie-note-more { border: 1px solid CanvasText; }
}
@media print {
  .cookie-note { display: none !important; }
}
/* Пакет 2 (18.10.2026): бейдж Wadline как ссылка, ссылки в плашке, пояснение под H1, оговорки рядом с результатом */
a.footer-badge { text-decoration: none; }
a.footer-badge:hover strong, a.footer-badge:focus-visible strong { color: var(--color-accent); }
.tool-hero-note { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(6, 35, 26, 0.75); max-width: 640px; }
.tool-caveat { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: rgba(6, 35, 26, 0.8); max-width: 760px; }
.tool-caveat i { flex-shrink: 0; font-size: 17px; line-height: 1.4; }
.faq-category-lead { margin: 0 0 16px; font-size: 15px; line-height: 1.65; color: var(--color-text); }
.legal-note { font-size: 12px; line-height: 1.6; color: var(--color-muted); margin: 10px 0 0; }
.tool-caveat--result { max-width: none; margin: 18px 0 0; color: var(--color-text); }
.footer-disclaimer { font-size: 12px; line-height: 1.6; color: #7d8388; margin: 14px 0 0; max-width: 760px; }
.footer-disclaimer + .footer-legal { margin-top: 8px; }
.faq-disclaimer { margin: 4px 0 24px; text-align: center; }