/* ══════════════════════════════════════════════════════════════════
   СТАТЬЯ БЛОГА, РАСКЛАДКА v2

   Подключается только к статьям с 'layout' => 'v2' в data.php.
   Остальные одиннадцать статей продолжают жить на css/blog.css,
   и ни одно правило отсюда их не касается: все селекторы под av2__.

   Палитра и гарнитура — проектные, не прототипные. В макете акцент
   #4C3DF7 и Manrope; здесь #3C4AFA и Montserrat, как на остальном
   сайте и в шапке с подвалом, которые мы не трогаем. Раскладка,
   размеры, отступы и радиусы — по ТЗ.

   Тени не используются: иерархия держится на фонах и рамках.
   ══════════════════════════════════════════════════════════════════ */

.av2 {
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--av-ink-900);
  display: block;
  /* Верхний отступ держит фиксированную шапку сайта, нижний — липкую
     плашку CTA, чтобы она не закрывала последний экран. */
  padding: 96px 0 88px;
  -webkit-font-smoothing: antialiased;
}

.av2 ::selection { background: var(--av-brand-100); }

.av2__wrap {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Ссылка в тексте. Вес селектора 0-1-1 — выше, чем у одиночного
   класса, поэтому у компонентов со своим цветом класс продублирован:
   .av2__btn.av2__btn даёт 0-2-0 и перебивает это правило, оставаясь
   при этом рабочим за пределами .av2 — например, у липкой плашки. */
.av2 a { color: var(--av-brand); text-decoration: none; }
.av2 a:hover { color: var(--av-brand-dark); text-decoration: underline; }
.av2 :focus-visible { outline: 2px solid var(--av-brand); outline-offset: 2px; border-radius: 4px; }

/* ── Полоса прогресса чтения ── */
.av2__progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
  background: transparent;
}
.av2__progress-fill {
  display: block;
  height: 3px;
  width: 0;
  background: var(--av-brand);
  transition: width .1s linear;
}

/* ── Хлебные крошки ──
   Разметку отдаёт общий breadcrumbsHtml(), поэтому классы чужие,
   bl__crumbs. Перекрашиваем их только внутри .av2. */
.av2 .bl__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  font-size: 14px;
  color: var(--av-ink-300);
}
/* li флексом с зазором: без него слеш прилипал к следующему пункту —
   отступ давал только gap у ol, то есть с одной стороны. У крошек
   каталога (.cc, .cp, .cx) это правило было с самого начала. */
.av2 .bl__crumbs li { display: flex; align-items: center; gap: 8px; }
.av2 .bl__crumbs li + li::before { content: '/'; color: var(--av-ink-100); }
.av2 .bl__crumbs a { color: var(--av-ink-300); }
.av2 .bl__crumbs a:hover { color: var(--av-brand); text-decoration: none; }
.av2 .bl__crumbs [aria-current] { color: var(--av-ink-900); }

/* ── Хиро ── */
.av2__hero {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 40px 0 8px;
}
.av2__hero-main { flex: 1 1 560px; min-width: 0; }

.av2__tags { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 22px; }
.av2__tag {
  background: var(--av-brand-050);
  color: var(--av-brand-text);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 999px;
}
.av2__tag--warn { background: var(--av-warn-bg); color: var(--av-warn); }

.av2__h1 {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 800;
  text-wrap: balance;
  color: var(--av-ink-900);
}
.av2__h1-tail {
  display: block;
  margin-top: 14px;
  font-size: clamp(21px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 600;
  color: var(--av-ink-500);
  text-wrap: pretty;
}

.av2__lead {
  margin: 26px 0 0;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
  color: var(--av-ink-600);
  max-width: 62ch;
  text-wrap: pretty;
}

.av2__byline {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--av-line-100);
}
.av2__byline-pic { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; display: block; }
.av2__byline-pic--logo { border-radius: 12px; background: var(--av-brand-050); padding: 7px; box-sizing: border-box; }
.av2__byline-text { display: flex; flex-direction: column; gap: 2px; }
.av2__byline-name.av2__byline-name { font-weight: 700; font-size: 15px; color: var(--av-ink-900); }
a.av2__byline-name.av2__byline-name:hover { color: var(--av-brand); text-decoration: none; }
.av2__byline-meta { font-size: 14px; color: var(--av-ink-300); }

/* ── Карточка «Коротко» ── */
.av2__short {
  flex: 1 1 320px;
  min-width: 0;
  background: var(--av-ink-900);
  color: #fff;
  border-radius: 24px;
  padding: 30px;
}
.av2__short-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--av-ink-200);
}
.av2__short-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.av2__short-list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.5;
  color: #E7E9EE;
}
.av2__short-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--av-brand-300);
}
.av2__short-btn.av2__short-btn {
  display: inline-block;
  margin-top: 26px;
  background: #fff;
  color: var(--av-ink-900);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 20px;
  border-radius: 999px;
}
.av2__short-btn.av2__short-btn:hover { color: var(--av-ink-900); text-decoration: none; background: #EDEFF3; }

/* ── Полоса цифр ── */
.av2__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--av-line-100);
  border: 1px solid var(--av-line-100);
  border-radius: 20px;
  overflow: hidden;
  margin: 44px 0 8px;
}
.av2__stat { background: #fff; padding: 24px 22px; }
.av2__stat-value {
  margin: 0;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--av-ink-900);
}
.av2__stat-value--accent { color: var(--av-brand); }
.av2__stat-label { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--av-ink-400); }

/* ── Две колонки: оглавление и текст ── */
.av2__cols {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 64px);
  align-items: flex-start;
  padding: 48px 0 0;
}
.av2__aside { flex: 1 1 220px; min-width: 0; max-width: 300px; position: sticky; top: 96px; }

.av2__toc-label {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--av-ink-300);
}
.av2__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--av-line-100);
}
.av2__toc-item a {
  display: flex;
  gap: 10px;
  padding: 9px 0 9px 16px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  color: #7A828F;
}
.av2__toc-item a:hover { color: var(--av-ink-900); text-decoration: none; }
.av2__toc-item a[aria-current] { color: var(--av-ink-900); font-weight: 700; border-left-color: var(--av-brand); }
.av2__toc-num { flex: 0 0 auto; font-weight: 700; color: var(--av-ink-100); font-variant-numeric: tabular-nums; }

.av2__text {
  flex: 1 1 520px;
  min-width: 0;
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.68;
  color: var(--av-ink-700);
}

/* ── Разделы и заголовки ── */
.av2__section { scroll-margin-top: 110px; }
.av2__section + .av2__section { padding-top: 28px; }
.av2__section--faq { padding-top: 48px; }

.av2__rule { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.av2__rule-num { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--av-brand); }
.av2__rule-line { flex: 1 1 auto; height: 1px; background: var(--av-line-100); }

.av2__h2 {
  margin: 0 0 20px;
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 800;
  text-wrap: balance;
  color: var(--av-ink-900);
}
.av2__h2--plain { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -.02em; }
.av2__h3 {
  margin: 28px 0 12px;
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.3;
  letter-spacing: -.015em;
  font-weight: 700;
  color: var(--av-ink-900);
}

/* Подзаголовок с чипом-счётчиком: им размечены подразделы внутри
   раздела. Чип и заголовок стоят в одной строке и переносятся вместе,
   поэтому обёртка — flex с переносом, а не «чип строкой выше». */
.av2__h3-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 36px 0 16px;
}
.av2__h3-chip {
  flex: 0 0 auto;
  background: var(--av-brand-050);
  color: var(--av-brand-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
/* В строке с чипом у заголовка своих отступов нет — их держит обёртка. */
.av2__h3-row .av2__h3--sub {
  margin: 0;
  font-size: clamp(20px, 2vw, 23px);
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 800;
}

.av2__p { margin: 0 0 20px; text-wrap: pretty; }

/* ── Списки ── */
.av2__list { margin: 0 0 20px; padding-left: 24px; }
.av2__list li { margin-bottom: 10px; }
.av2__list li::marker { color: var(--av-brand); font-weight: 700; }

/* ── Врезка-примечание ── */
.av2__note {
  background: var(--av-surface-100);
  border-radius: 16px;
  padding: 22px 24px;
  margin: 28px 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--av-ink-600);
}
.av2__note-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--av-ink-300);
}
.av2__warning {
  background: var(--av-warn-bg);
  border-radius: 16px;
  padding: 22px 24px;
  margin: 28px 0;
  font-size: 16px;
  line-height: 1.6;
  color: #6B3405;
}

/* ── Случай из практики ── */
.av2__case { border-left: 3px solid var(--av-brand); padding: 4px 0 4px 22px; margin: 28px 0; }
.av2__case-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--av-brand);
}
.av2__case-p { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--av-ink-600); text-wrap: pretty; }
.av2__case-p:last-child { margin-bottom: 0; }

/* ── Сетка фактов ── */
.av2__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 28px 0;
}
.av2__fact { border: 1px solid var(--av-line-200); border-radius: 16px; padding: 20px; }
.av2__fact-title { margin: 0 0 8px; font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--av-ink-900); }
.av2__fact-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--av-ink-500); }

/* ── Чек-лист ── */
.av2__check { border: 1px solid var(--av-line-200); border-radius: 22px; overflow: hidden; margin: 24px 0; }
.av2__check-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: var(--av-surface-100);
  border-bottom: 1px solid var(--av-line-200);
}
.av2__check-track { flex: 1 1 auto; height: 6px; border-radius: 999px; background: #E0E3E9; overflow: hidden; }
.av2__check-fill { display: block; height: 6px; background: var(--av-brand); transition: width .25s ease; }
.av2__check-count { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--av-brand); }

.av2__check-row { display: flex; gap: 16px; align-items: flex-start; padding: 18px 22px; border-bottom: 1px solid var(--av-line-100); }
.av2__check-row:last-child { border-bottom: none; }
.av2__check-box {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  border-radius: 7px;
  border: 2px solid #D3D7DE;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.av2__check-box::after {
  content: '';
  width: 11px;
  height: 6px;
  border: 2px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}
.av2__check-box:checked { background: var(--av-brand); border-color: var(--av-brand); }
.av2__check-box:checked::after { opacity: 1; }
.av2__check-label { font-size: 16px; line-height: 1.55; color: var(--av-ink-700); cursor: pointer; }
.av2__check-row:has(.av2__check-box:checked) { background: var(--av-surface-050); }
.av2__check-row:has(.av2__check-box:checked) .av2__check-label { color: var(--av-ink-300); }

/* ── Цитаты ── */
.av2__quote { margin: 28px 0; background: var(--av-brand-050); border-radius: 20px; padding: 28px; }
.av2__quote blockquote {
  margin: 0;
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--av-ink-800);
  text-wrap: pretty;
}
.av2__quote--dark { background: var(--av-ink-900); padding: 30px; }
.av2__quote--dark blockquote { color: #fff; font-size: clamp(19px, 2.1vw, 23px); line-height: 1.4; letter-spacing: -.015em; }
.av2__quote--dark .av2__quote-name { color: #fff; }
.av2__quote--dark .av2__quote-role { color: #9AA2B1; }

.av2__quote--compact {
  background: none;
  border-left: 3px solid var(--av-brand);
  border-radius: 0;
  padding: 2px 0 2px 22px;
}
.av2__quote--compact blockquote { font-size: 18px; line-height: 1.5; }
.av2__quote-line { font-size: 14px; color: var(--av-ink-300); margin-top: 12px; }
.av2__quote-line strong { color: var(--av-ink-700); }

.av2__quote-by { display: flex; align-items: center; gap: 13px; margin-top: 22px; }
.av2__quote-pic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 999px; overflow: hidden; display: block; }
.av2__quote-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av2__quote-pic--letters {
  display: grid;
  place-content: center;
  background: var(--av-brand-100);
  color: var(--av-brand-text);
  font-weight: 800;
  font-size: 14px;
}
.av2__quote-who { display: flex; flex-direction: column; }
.av2__quote-name { font-weight: 700; font-size: 15px; color: var(--av-ink-900); }
.av2__quote-role { font-size: 14px; color: var(--av-ink-300); }

/* ── Таблица ── */
.av2__table-wrap { overflow-x: auto; margin: 28px 0 10px; border: 1px solid var(--av-line-200); border-radius: 16px; }
/* Кегль таблиц: 17px против 19px основного текста. Было 16 — при
   девятнадцатом абзаце таблица читалась как сноска, а в статье
   про пошлину по весу таблицы и есть содержание.
   Шапка того же кегля, что и строки: отличается насыщенностью
   и цветом, а не размером. Было 14 при 16 у строк — и только
   на десктопе: мобильное правило ниже уравнивало оба до 15,
   так что заголовок на телефоне выглядел крупнее, чем на экране. */
.av2__table { width: 100%; border-collapse: collapse; font-size: 17px; }
.av2__table th, .av2__table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--av-line-100); }
.av2__table th { font-weight: 700; font-size: 17px; color: var(--av-ink-400); }
.av2__table tbody tr:last-child td { border-bottom: none; }
/* Числовые колонки: моноширинные цифры, чтобы разряды вставали
   друг под другом. В прежней раскладке это было у .bl__td--right
   с самого начала, в v2 доехало только выравнивание.
   white-space: nowrap оттуда НЕ переносим: у прежней раскладки
   таблицы и так прокручивались всегда, а здесь запрет переноса
   добавил таблице одежды 174 px и выбил её из колонки на 1440.
   Числа с единицами связаны неразрывным пробелом в самих данных,
   так что рваться им всё равно нечем. */
/* Селектор с тегом, а не одиночный класс: выше стоит
   «.av2__table th, .av2__table td { text-align: left }» весом 0-1-1,
   и одиночный .av2__td--right (0-1-0) его не перебивал. Правое
   выравнивание в таблицах v2 не работало ни разу — просто до статьи
   про пошлину по весу таблиц в этой раскладке не было. Та же ловушка,
   что с .av2 a у кнопок и с .bl__body .bl__table-caption. */
.av2__table th.av2__td--right,
.av2__table td.av2__td--right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Подпись на тон темнее: --av-ink-200 давала контраст 3.1 при норме
   4.5 для мелкого текста, а подпись несёт расшифровку колонок,
   а не украшение. --av-ink-300 даёт 4.78. */
.av2__table-caption { margin: 0 0 28px; font-size: 14px; line-height: 1.5; color: var(--av-ink-300); }

/* ── Картинка ── */
.av2__figure { margin: 28px 0; }
.av2__figure img { width: 100%; height: auto; display: block; border-radius: 16px; }
.av2__figure figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--av-ink-200); }

/* ── FAQ ── */
.av2__faq { display: flex; flex-direction: column; gap: 10px; }
.av2__faq-item { border: 1px solid var(--av-line-200); border-radius: 16px; background: #fff; overflow: hidden; }
.av2__faq-item[open] { background: var(--av-surface-050); }
.av2__faq-q {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.av2__faq-q::-webkit-details-marker { display: none; }
.av2__faq-sign {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--av-brand-050);
  color: var(--av-brand);
  display: grid;
  place-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.av2__faq-sign::before { content: '+'; }
.av2__faq-item[open] .av2__faq-sign::before { content: '−'; }
.av2__faq-a { padding: 0 22px 20px; font-size: 16px; line-height: 1.6; color: var(--av-ink-500); }

/* ── Сноска ── */
.av2__footnote {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--av-line-100);
  font-size: 14px;
  line-height: 1.6;
  color: var(--av-ink-300);
  font-style: italic;
}

/* ── Кнопки ── */
.av2__btn.av2__btn {
  display: inline-block;
  background: var(--av-brand);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  padding: 16px 32px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
.av2__btn.av2__btn:hover { background: var(--av-brand-dark); color: #fff; text-decoration: none; }
.av2__btn--sm.av2__btn--sm { font-size: 15px; padding: 11px 22px; }
.av2__btn--wide.av2__btn--wide { display: block; width: 100%; font-size: 16px; padding: 16px; }

/* ── CTA эксперта ── */
.av2__cta {
  scroll-margin-top: 110px;
  margin: 64px 0 0;
  background: var(--av-brand-050);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
}
.av2__cta-main { flex: 1 1 420px; min-width: 0; }
.av2__cta-title {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 800;
  text-wrap: balance;
  color: var(--av-ink-900);
}
.av2__cta-sub { margin: 16px 0 22px; font-size: 17px; line-height: 1.55; color: var(--av-ink-600); max-width: 52ch; }
.av2__cta-points { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.av2__cta-points li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--av-ink-700);
}
.av2__cta-points li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--av-brand);
  font-weight: 800;
}
.av2__cta-act { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 0; }
.av2__cta-note { font-size: 15px; color: var(--av-ink-400); }

.av2__cta-person { flex: 0 1 280px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.av2__cta-face {
  width: clamp(140px, 18vw, 190px);
  height: clamp(140px, 18vw, 190px);
  border-radius: 999px;
  overflow: hidden;
  display: block;
}
.av2__cta-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av2__cta-face--letters {
  display: grid;
  place-content: center;
  background: var(--av-brand-100);
  color: var(--av-brand-text);
  font-size: clamp(38px, 5vw, 52px);
  font-weight: 800;
}
.av2__cta-who { margin: 0; font-weight: 700; font-size: 16px; color: var(--av-ink-900); }
.av2__cta-role { margin: 0; font-size: 14px; color: var(--av-ink-300); }

/* ── Калькулятор ── */
.av2__calc {
  margin: 20px 0 0;
  border: 1px solid var(--av-line-200);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.av2__calc-main { flex: 1 1 380px; min-width: 0; }
.av2__calc-title {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 800;
  text-wrap: balance;
  color: var(--av-ink-900);
}
.av2__calc-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 24px; }
.av2__chip { background: var(--av-ok-bg); color: var(--av-ok); font-weight: 700; font-size: 13px; padding: 7px 13px; border-radius: 999px; }
.av2__calc-label {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--av-ink-200);
}
.av2__calc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.av2__calc-list li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.45; color: var(--av-ink-700); }
.av2__calc-list li::before { content: '✓'; position: absolute; left: 0; color: var(--av-brand); font-weight: 800; }

.av2__form { flex: 1 1 320px; min-width: 0; background: var(--av-surface-100); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.av2__field { display: flex; flex-direction: column; gap: 7px; }
.av2__field-label { font-size: 14px; font-weight: 600; color: var(--av-ink-400); }
.av2__field input {
  font-family: inherit;
  font-size: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #DCDFE5;
  background: #fff;
  color: var(--av-ink-900);
  width: 100%;
  box-sizing: border-box;
}
.av2__field input:focus { outline: 2px solid var(--av-brand); outline-offset: 1px; }
.av2__field-row { display: flex; gap: 12px; }
.av2__field-row .av2__field { flex: 1 1 0; min-width: 0; }
.av2__form-alt { margin: 0; font-size: 14px; color: var(--av-ink-300); text-align: center; }

/* ── Читайте также ── */
.av2__related { padding: 72px 0 0; }
.av2__related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.av2__related-head .av2__h2 { margin: 0; }
.av2__related-all { font-weight: 700; font-size: 15px; }
.av2__related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.av2__card.av2__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--av-line-200);
  border-radius: 22px;
  padding: 24px;
  color: var(--av-ink-900);
  transition: border-color .15s ease;
}
.av2__card.av2__card:hover { border-color: var(--av-brand); color: var(--av-ink-900); text-decoration: none; }
.av2__card-rubric { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--av-brand); }
.av2__card-title { font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; text-wrap: pretty; }
.av2__card-sub { font-size: 15px; line-height: 1.5; color: var(--av-ink-400); }
.av2__card-time { font-size: 14px; color: var(--av-ink-200); margin-top: auto; }

/* ── Липкая нижняя плашка ── */
.av2__bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--av-line-200);
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.av2__bar[hidden] { display: none; }
.av2__bar-text { font-size: 15px; font-weight: 600; color: var(--av-ink-700); }

/* ══ Адаптив ══ */

@media (max-width: 1199px) {
  .av2__cols { gap: 36px; }
  .av2__text { max-width: 700px; }
}

/* До 1024 одна колонка: оглавление переезжает над статьёй
   раскрывающимся блоком, sticky отключается. */
@media (max-width: 1023px) {
  .av2__cols { flex-direction: column; }
  .av2__aside { position: static; max-width: none; width: 100%; flex: 1 1 auto; }
  .av2__text { max-width: none; width: 100%; }
  .av2__toc {
    border: 1px solid var(--av-line-200);
    border-radius: 16px;
    padding: 18px 20px;
  }
  .av2__short { flex-basis: 100%; }
}

@media (max-width: 767px) {
  .av2 { padding: 80px 0 96px; }
  .av2__wrap { padding: 0 16px; }
  .av2__hero { gap: 32px; padding: 28px 0 0; }
  .av2__stats { grid-template-columns: repeat(2, 1fr); margin: 32px 0 0; }
  .av2__cols { padding: 36px 0 0; }
  .av2__text { font-size: 17px; }
  .av2__quote, .av2__quote--dark { padding: 22px; }
  .av2__short { padding: 24px; border-radius: 20px; }
  .av2__cta { gap: 28px; margin-top: 48px; }
  .av2__cta-person { flex-basis: 100%; }
  .av2__calc { gap: 28px; }
  .av2__form { flex-basis: 100%; }
  .av2__field-row { flex-direction: column; gap: 14px; }
  .av2__related { padding-top: 48px; }
  .av2__check-row { padding: 16px 18px; gap: 14px; }
  .av2__note, .av2__warning { padding: 18px 20px; }
  .av2__table th, .av2__table td { padding: 12px 14px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .av2__progress-fill, .av2__check-fill, .av2__card { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   КОМПОНЕНТЫ РЕДИЗАЙНА СТАТЬИ

   Все включаются полями data.php и на статьях без этих полей
   не печатаются вовсе — вывод двух прежних статей v2 не меняется.

   Палитра — токены av-tokens.css. В макете стоял свой синий
   #4C3DF7 и гарнитура Manrope: первый рядом с кнопками сайта
   читался бы вторым акцентом, второй на сайте не подключён вовсе
   и молча уводил бы блок в системный шрифт.

   Классы компонентов продублированы там, где внутри есть p и a:
   .av2 a весит 0-1-1 и перебивает одиночный класс — та же ловушка,
   что у .av2__btn.
   ══════════════════════════════════════════════════════════════════ */

/* ── Тёмная карточка долей в хиро ── */
.av2__hero-card {
  flex: 1 1 320px;
  min-width: 0;
  box-sizing: border-box;
  background: var(--av-ink-900);
  color: #fff;
  border-radius: 24px;
  padding: 30px;
}
.av2__hero-card-label.av2__hero-card-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--av-ink-200);
}
.av2__hero-rows { display: flex; flex-direction: column; gap: 20px; margin-top: 22px; }
.av2__hero-row { display: flex; flex-direction: column; gap: 8px; }
.av2__hero-row-top.av2__hero-row-top {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* wrap обязателен: сумма набрана 26-м с неразрывными пробелами
     и не переносится внутри себя. На 320 строка «Пропустили — новый
     сертификат» вместе с «210–230 тыс. ₽» не помещалась, и сумма
     уезжала за край карточки. Там, где строка влезает, правило
     ничего не меняет. */
  flex-wrap: wrap;
  gap: 4px 12px;
}
.av2__hero-name { font-size: 16px; font-weight: 600; color: #E7E9EE; }
.av2__hero-share {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  /* nowrap безусловно: пара «число + ₽» не должна разрываться ни
     на одной ширине. Неразрывные пробелы в data.php это уже держат,
     но полагаться на них нельзя — в новой статье их могут забыть. */
  white-space: nowrap;
  color: var(--av-brand-300);
}
/* Первая строка — самая крупная доля, её и подсвечиваем ярче.
   Порядок строк задаёт data.php, сортировки в шаблоне нет. */
.av2__hero-row:first-child .av2__hero-share { color: #FFB27A; }
.av2__hero-bar { display: block; height: 6px; border-radius: 999px; background: #23262E; overflow: hidden; }
.av2__hero-bar-fill { display: block; height: 6px; border-radius: 999px; background: var(--av-brand-300); }
.av2__hero-row:first-child .av2__hero-bar-fill { background: #FFB27A; }
.av2__hero-rate { font-size: 13px; color: var(--av-ink-200); }
.av2__hero-card-btn.av2__hero-card-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 26px;
  background: #fff;
  color: var(--av-ink-900);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 20px;
  border-radius: 999px;
  text-decoration: none;
}
.av2__hero-card-btn.av2__hero-card-btn:hover { background: var(--av-brand-050); color: var(--av-ink-900); text-decoration: none; }

/* ── Карточка эксперта под оглавлением ── */
.av2__aside-cta {
  margin-top: 28px;
  padding: 20px;
  background: var(--av-brand-050);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.av2__aside-who { display: flex; align-items: center; gap: 12px; }
.av2__aside-face { flex: 0 0 auto; width: 52px; height: 52px; }
.av2__aside-face img {
  width: 52px; height: 52px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  background: var(--av-brand-100);
}
.av2__aside-names { display: flex; flex-direction: column; min-width: 0; }
.av2__aside-name { font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--av-ink-700); }
.av2__aside-role { font-size: 13px; line-height: 1.35; color: var(--av-ink-400); }
.av2__aside-title.av2__aside-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--av-ink-900);
  text-wrap: balance;
}
.av2__aside-btn.av2__aside-btn {
  display: flex;
  justify-content: center;
  background: var(--av-brand);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
}
.av2__aside-btn.av2__aside-btn:hover { background: var(--av-brand-dark); color: #fff; text-decoration: none; }
.av2__aside-note { font-size: 13px; line-height: 1.4; color: var(--av-ink-400); text-align: center; }

/* ── Карточки вместо списка ── */
.av2__cards { display: flex; flex-direction: column; gap: 14px; margin: 24px 0 28px; }
.av2__card2 {
  position: relative;
  border: 1px solid var(--av-line-200);
  border-radius: 18px;
  padding: 20px 22px;
  background: #fff;
}
.av2__card2--accent { border-color: var(--av-brand-100); background: var(--av-surface-050); }
.av2__card2-num {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--av-brand-text);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.av2__card2-title.av2__card2-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--av-ink-900);
}
/* Кегль описания — тот же clamp, что у основного текста статьи:
   карточка заменила собой абзацы списка и мельчить не должна.
   Вариант на 1px меньше — clamp(16px, 1.25vw, 18px) — держит
   высоту страницы на 375 ровно как было, но разрыв с текстом
   остаётся заметен; разница между ними на 375 всего 192px
   при странице 18 200.
   Строка-источник ниже остаётся мелкой: это ссылка на примечание
   к группе ТН ВЭД, а не часть описания. */
.av2__card2-text.av2__card2-text { margin: 0; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; color: var(--av-ink-600); }
.av2__card2-note.av2__card2-note { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--av-ink-300); }

/* Три карточки способов встают в ряд, когда колонка это позволяет:
   запрос контейнерный, потому что колонка статьи сужается раньше окна. */
@supports (container-type: inline-size) {
  .av2__text { container-type: inline-size; }
  @container (min-width: 680px) {
    .av2__cards:not(.av2__cards--num):not(.av2__cards--steps) { flex-direction: row; }
    .av2__cards:not(.av2__cards--num):not(.av2__cards--steps) > .av2__card2 { flex: 1 1 0; min-width: 0; }
  }
}

/* ── Тёмная врезка с формулой ── */
.av2__formula {
  margin: 24px 0 28px;
  background: var(--av-ink-900);
  color: #fff;
  border-radius: 18px;
  padding: 24px 26px;
}
.av2__formula-main.av2__formula-main {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  text-wrap: pretty;
}
.av2__formula-note.av2__formula-note {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--av-ink-100);
  font-variant-numeric: tabular-nums;
}

/* ── Шкала в колонке таблицы и чип «что применили» ──
   Имена av2__meter и av2__cell-tag, а не av2__bar и av2__tag: оба
   уже заняты. .av2__bar — липкая нижняя плашка, и js/article-v2.js
   берёт её через querySelector('.av2__bar'), то есть ПЕРВУЮ в DOM;
   мои шкалы стоят выше по документу, скрипт хватал их и вешал hidden
   на первую же ячейку таблицы, а сама плашка переставала работать.
   .av2__tag — чип рубрики в шапке. */
.av2__cell-num { display: block; }
.av2__meter {
  display: block;
  height: 4px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--av-line-200);
  overflow: hidden;
}
.av2__meter-fill { display: block; height: 4px; border-radius: 999px; background: var(--av-brand); }
.av2__td--strong { font-weight: 800; color: var(--av-ink-900); }
.av2__cell-tag {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.av2__cell-tag--warm { background: var(--av-warn-bg); color: var(--av-warn); }
.av2__cell-tag--brand { background: var(--av-brand-050); color: var(--av-brand-text); }

@media (max-width: 767px) {
  .av2__hero-card { padding: 24px 20px; }
  .av2__hero-share { font-size: 23px; }
  .av2__card2 { padding: 18px 18px; }
  .av2__formula { padding: 20px 20px; }
  .av2__formula-main.av2__formula-main { font-size: 17px; }
}

/* ══════════════════════════════════════════════════════════════════
   БЛОКИ СТАТЬИ ПРО ОТКАЗНОЕ ПИСЬМО

   Всё ниже — опциональные части раскладки v2: без своих полей
   в data.php они не печатаются вовсе, и вывод трёх прежних статей
   не меняется ни на байт.

   Янтарные значения локальные, а не новые токены в av-tokens.css:
   в общей палитре уже есть пара --av-warn / --av-warn-bg, и заводить
   рядом ещё три оттенка ради одной статьи значило бы расширить
   палитру всего сайта. Гарнитуру блоки не объявляют: Montserrat
   приходит наследованием, Manrope из макета на сайте не подключён.
   ══════════════════════════════════════════════════════════════════ */

.av2 {
  --av2-warn-line: #FFD3B0;
  --av2-warn-soft: #FFF7F0;
  --av2-warn-chip: #FFE7D4;
}

/* ── Колонка хиро: карточка плюс сноска под ней ──
   Обёртка появляется только при поле hero_note. Без неё абзац стал бы
   третьим элементом флекса хиро и встал бы рядом с карточкой. */
.av2__hero-side {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.av2__hero-side > .av2__hero-card { flex: 0 0 auto; }
.av2__hero-note.av2__hero-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
  color: var(--av-ink-300);
}

.av2__hero-chips.av2__hero-chips {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.av2__hero-chip {
  font-size: 14px;
  line-height: 1.3;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid #2C3038;
  color: #C9CED8;
}
.av2__hero-chip--warn { border-color: #5A3A20; color: #FFB27A; }

/* ── Чип и янтарный тон у карточек ──
   Чип — span, а не p: внутри карточки он стоит в потоке флекса
   и своей ширины не занимает больше текста. */
.av2__card2-chip {
  /* fit-content, а не только align-self: у шагов карточка — сетка,
     а там за поперечную ось отвечает justify-self, и чип растягивался
     на всю колонку. */
  align-self: flex-start;
  width: fit-content;
  background: var(--av-surface-100);
  color: var(--av-ink-600);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.av2__card2--accent .av2__card2-chip { background: var(--av-brand-050); color: var(--av-brand-text); }
.av2__card2--warn { border-color: var(--av2-warn-line); background: var(--av2-warn-soft); }
.av2__card2--warn .av2__card2-chip { background: var(--av2-warn-chip); color: var(--av-warn); }

/* ── Полоса цифр внутри текста ──
   Классы av2__figs/av2__fig, а не av2__stats/av2__stat: последние
   уже заняты полосой цифр в шапке статьи (article-v2.php, секция
   «Цифры материала»), и общее имя давало блоку чужие фон, рамку
   и overflow. Та же ловушка, что была с av2__bar. */
.av2__figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 24px 0 28px;
}
.av2__fig {
  background: var(--av-surface-100);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.av2__fig--warn { background: var(--av-warn-bg); }
.av2__fig-value {
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--av-ink-900);
}
.av2__fig--warn .av2__fig-value { color: var(--av-warn); }
.av2__fig-label { font-size: 14px; line-height: 1.45; color: var(--av-ink-400); }

/* ── Тёмная карточка сравнения ── */
.av2__cmp {
  margin: 24px 0 28px;
  background: var(--av-ink-900);
  color: #fff;
  border-radius: 20px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.av2__cmp-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--av-ink-200);
}
.av2__cmp-row { display: flex; flex-direction: column; gap: 8px; }
.av2__cmp-top.av2__cmp-top {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.av2__cmp-name { font-size: 16px; color: #C9CED8; }
.av2__cmp-value {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--av-brand-300);
}
.av2__cmp-bar { display: block; height: 8px; border-radius: 999px; background: var(--av-brand-300); }
/* Первая строка — дорогой вариант, её и подсвечиваем янтарным:
   тот же приём, что у первой строки карточки хиро. */
.av2__cmp-row:first-of-type .av2__cmp-value { color: #FF9F5A; }
.av2__cmp-row:first-of-type .av2__cmp-bar { background: #FF9F5A; }

@media (max-width: 640px) {
  .av2__cmp { padding: 20px; }
  .av2__fig { padding: 18px; }
}

/* ── Шаги «Что делать» ──
   Не вариант .av2__cards--num: там номер — служебная метка 13-м
   кеглем над заголовком, здесь он сам ведёт счёт действиям и стоит
   слева от текста. Карточка без рамки, на тонированной подложке. */
.av2__cards--steps { gap: 12px; }
.av2__cards--steps > .av2__card2 {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border: 0;
  background: var(--av-surface-050);
  padding: 20px 22px;
}
.av2__card2-step {
  flex: 0 0 auto;
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--av-brand-text);
  font-variant-numeric: tabular-nums;
}
.av2__cards--steps .av2__card2-text.av2__card2-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--av-ink-900);
}

/* ══════════════════════════════════════════════════════════════════
   БЛОКИ СТАТЬИ ПРО ТАМОЖЕННЫЙ ДОСМОТР

   Как и всё выше — опциональные части раскладки: без своих полей
   в data.php ничего не печатается, вывод прежних статей не меняется.
   Янтарные и сиреневые значения берутся из уже заведённых локальных
   переменных блока и токенов av-tokens.css.
   ══════════════════════════════════════════════════════════════════ */

.av2 {
  --av2-violet: #B3A9FF;
  --av2-orange: #FF9F5A;
  --av2-ok: #12693B;
}

/* ── Чип-метка у янтарной врезки ── */
.av2__warning-label {
  /* block + fit-content, а не inline-block: врезка не флекс-контейнер,
     и align-self в ней ничего не делает — чип вставал бы в строку
     с первым предложением. */
  display: block;
  width: fit-content;
  background: var(--av2-warn-chip);
  color: var(--av-warn);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 10px;
}

/* ── Плашки «бесплатно / платно» ── */
.av2__flags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 24px 0 28px;
}
.av2__flag {
  background: var(--av-surface-100);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.av2__flag--warn { background: var(--av-warn-bg); }
.av2__flag-label { font-size: 13px; font-weight: 700; color: var(--av2-ok); }
.av2__flag--warn .av2__flag-label { color: var(--av-warn); }
.av2__flag-text { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--av-ink-900); }

/* ── Тёмный вариант полосы цифр ──
   Коробка отдельным классом: у тёмного варианта есть заголовок,
   и он должен лежать внутри подложки, а сетка цифр — под ним. */
.av2__figbox {
  margin: 24px 0 12px;
  background: var(--av-ink-900);
  color: #fff;
  border-radius: 20px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.av2__figbox-label.av2__figbox-label {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--av-ink-100);
  text-wrap: pretty;
}
.av2__figbox-note.av2__figbox-note {
  margin: 0 0 28px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--av-ink-300);
}
.av2__figbox .av2__figs { margin: 0; }
.av2__figs--dark { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.av2__figs--dark .av2__fig {
  background: transparent;
  border: 1px solid #2C3038;
  border-radius: 16px;
  padding: 18px;
}
.av2__figs--dark .av2__fig--warn { background: transparent; border-color: #5A3A20; }
.av2__figs--dark .av2__fig-value { color: var(--av2-violet); font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.02em; }
.av2__figs--dark .av2__fig--warn .av2__fig-value { color: var(--av2-orange); }
.av2__figs--dark .av2__fig-label { color: #C9CED8; }
/* nowrap: иначе «на машину» разрывается посередине и хвост уезжает
   под число отдельным словом. */
.av2__fig-unit { font-size: 16px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
/* Тёмный блок без рамок у ячеек — когда в нём одни факты, без заголовка. */
.av2__figbox--plain .av2__figs--dark .av2__fig { border: 0; padding: 0; }

/* ── Шкала хронологии ── */
.av2__tl { margin: 24px 0 28px; }
.av2__tl-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.av2__tl-seg { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.av2__tl-line { display: block; height: 10px; border-radius: 999px; background: var(--av-brand); }
.av2__tl-seg--warn .av2__tl-line { background: #FFB27A; }
.av2__tl-cap { font-size: 13px; font-weight: 700; color: var(--av-brand-text); }
.av2__tl-seg--warn .av2__tl-cap { color: var(--av-warn); }
.av2__tl-items { display: flex; flex-direction: column; gap: 10px; }
.av2__tl-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--av-line-200);
  border-radius: 16px;
  padding: 16px 20px;
}
.av2__tl-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--av-brand);
}
.av2__tl-dot--warn { background: #FFB27A; }
.av2__tl-text.av2__tl-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--av-ink-600);
  text-wrap: pretty;
}
.av2__tl-text strong { color: var(--av-ink-900); }

/* ── Разбор расходов списком карточек ──
   Не таблица: у строки четыре величины, и в три колонки на 320
   они не помещаются. */
.av2__costs-fig { margin: 24px 0 28px; }
.av2__costs { border: 1px solid var(--av-line-200); border-radius: 18px; overflow: hidden; }
.av2__cost {
  padding: 16px 20px;
  border-bottom: 1px solid var(--av-line-100);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.av2__cost-top.av2__cost-top {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.av2__cost-name { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--av-ink-900); }
.av2__cost-sum {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--av-ink-900);
}
.av2__cost-share { font-size: 13px; font-weight: 600; color: var(--av-ink-300); margin-left: 8px; }
.av2__cost-bar { display: block; height: 6px; border-radius: 999px; background: var(--av-line-100); overflow: hidden; }
.av2__cost-fill { display: block; height: 6px; border-radius: 999px; background: var(--av-brand); }
.av2__cost-fill--warn { background: var(--av2-orange); }
.av2__cost-note { font-size: 14px; line-height: 1.5; color: var(--av-ink-400); text-wrap: pretty; }
.av2__cost--total {
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 0;
  background: var(--av-ink-900);
  color: #fff;
}
.av2__cost--total .av2__cost-name { font-size: 17px; font-weight: 800; color: #fff; }
.av2__cost--total .av2__cost-note { color: var(--av-ink-200); font-size: 13px; }
.av2__cost-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.av2__cost-total-sum {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* ── Хиро: крупная сумма над строками и ряд портретов ── */
.av2__hero-total.av2__hero-total {
  margin: 20px 0 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.av2__hero-total-sum {
  font-size: clamp(38px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.av2__byline-faces { display: flex; flex: 0 0 auto; }
.av2__byline-face {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid #fff;
  background: var(--av-brand-050);
}
.av2__byline-face + .av2__byline-face { margin-left: -10px; }
.av2__byline-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 640px) {
  .av2__figbox { padding: 20px; }
  .av2__cost, .av2__cost--total { padding: 14px 16px; }
}

/* Тон строки тёмной карточки хиро. Правила стоят после
   .av2__hero-row:first-child, но одного класса мало: то правило весит
   0-3-0 за счёт псевдокласса, и при равном порядке побеждало бы оно.
   Поэтому класс продублирован — приём тот же, что у .av2__btn. */
.av2__hero-row--brand.av2__hero-row--brand .av2__hero-share { color: var(--av-brand-300); }
.av2__hero-row--brand.av2__hero-row--brand .av2__hero-bar-fill { background: var(--av-brand-300); }
.av2__hero-row--lilac.av2__hero-row--lilac .av2__hero-share { color: var(--av2-violet); }
.av2__hero-row--lilac.av2__hero-row--lilac .av2__hero-bar-fill { background: var(--av2-violet); }
.av2__hero-row--warn.av2__hero-row--warn .av2__hero-share { color: var(--av2-orange); }
.av2__hero-row--warn.av2__hero-row--warn .av2__hero-bar-fill { background: var(--av2-orange); }
.av2__hero-row--violet.av2__hero-row--violet .av2__hero-share { color: #8B7CFF; }
.av2__hero-row--violet.av2__hero-row--violet .av2__hero-bar-fill { background: #8B7CFF; }
.av2__hero-row--soft.av2__hero-row--soft .av2__hero-share { color: #FFB27A; }
.av2__hero-row--soft.av2__hero-row--soft .av2__hero-bar-fill { background: #FFB27A; }

/* Шаги — сетка, а не строка: у карточки может быть и тезис, и текст,
   и в флексе они встали бы тремя колонками рядом с номером. */
.av2__cards--steps > .av2__card2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  /* row-gap обязательно в ноль: выше у этого же селектора стоит
     gap: 18px из флексового варианта, и восемь пустых строк,
     которые остаются от span 10, набирали бы по 18px каждая. */
  gap: 0 18px;
}
/* span 10, а не 1 / -1: явных строк у сетки нет, и −1 указывает
   на первую же линию — номер переставал занимать колонку, а тезис
   и текст разъезжались по разным строкам. */
.av2__cards--steps .av2__card2-step { grid-column: 1; grid-row: 1 / span 10; align-self: start; }
.av2__cards--steps .av2__card2-chip,
.av2__cards--steps .av2__card2-title,
.av2__cards--steps .av2__card2-text,
.av2__cards--steps .av2__card2-note { grid-column: 2; }
.av2__cards--steps .av2__card2-title.av2__card2-title { font-size: 16px; margin-bottom: 2px; }

/* ══════════════════════════════════════════════════════════════════
   БЛОКИ СТАТЬИ ПРО ПОЖАР В КОЛЕДИНО
   Опциональные, как и всё выше: без своих полей не печатаются.
   ══════════════════════════════════════════════════════════════════ */

.av2__cards-caption.av2__cards-caption {
  margin: -16px 0 28px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--av-ink-300);
}

/* Четыре короткие выгоды столбиком растягивают раздел, поэтому
   у num-grid карточки встают сеткой. Контейнерного запроса здесь
   не нужно: minmax сам схлопывается в одну колонку. */
.av2__cards--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

/* ── Карточка требований со шкалой этапов ── */
.av2__panel {
  margin: 24px 0 28px;
  border: 1px solid var(--av-line-200);
  border-radius: 20px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.av2__panel-title.av2__panel-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--av-ink-300);
}
.av2__panel-chips.av2__panel-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.av2__panel-chip {
  background: var(--av-surface-100);
  color: var(--av-ink-600);
  font-size: 14px;
  line-height: 1.3;
  padding: 8px 14px;
  border-radius: 999px;
}
.av2__panel-chip--accent { background: var(--av-brand-050); color: var(--av-brand-text); font-weight: 700; }
.av2__panel-stages {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--av-line-100);
}
.av2__panel-stage { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.av2__panel-line { display: block; height: 8px; border-radius: 999px; background: var(--av-brand); }
.av2__panel-stage--soft .av2__panel-line { background: var(--av2-violet); }
.av2__panel-stage--violet .av2__panel-line { background: #8B7CFF; }
.av2__panel-stage--warn .av2__panel-line { background: var(--av2-orange); }
.av2__panel-cap { font-size: 14px; font-weight: 700; color: var(--av-ink-900); }

/* ── Полоса распределения партии ── */
.av2__split {
  margin: 24px 0 28px;
  background: var(--av-surface-050);
  border-radius: 20px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.av2__split-title.av2__split-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--av-brand-text);
}
.av2__split-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 3px; }
.av2__split-seg { display: block; flex-basis: 0; background: var(--av-brand); }
.av2__split-seg--violet { background: #8B7CFF; }
.av2__split-seg--soft { background: #FFB27A; }
.av2__split-seg--warn { background: var(--av2-orange); }
.av2__split-legend.av2__split-legend {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 15px;
  color: var(--av-ink-600);
}
.av2__split-item { display: flex; align-items: center; gap: 8px; }
.av2__split-item strong { color: var(--av-ink-900); }
.av2__split-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--av-brand); flex: 0 0 auto; }
.av2__split-dot--violet { background: #8B7CFF; }
.av2__split-dot--soft { background: #FFB27A; }
.av2__split-dot--warn { background: var(--av2-orange); }
.av2__split-text.av2__split-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--av-ink-600); }

/* ── Список маршрутов ──
   Делит разметку с разбором расходов: там суммы и доли, здесь сроки.
   Тон у срока — по типу плеча. */
.av2__cost--accent { background: var(--av-surface-050); }
.av2__cost-sum--brand { color: var(--av-brand-text); }
.av2__cost-sum--warn { color: var(--av-warn); }
.av2__cost-sum--ink { color: var(--av-ink-900); }
/* У разбора расходов последняя строка — тёмный итог, и рамку снизу
   снимает он сам. У маршрутов итога нет, поэтому снимаем у последней. */
.av2__costs > .av2__cost:last-child { border-bottom: 0; }
/* Блок routes печатает .av2__costs без обёртки, и отступа снизу
   у него не было вовсе: следующий абзац прилипал к рамке. У costs
   отступ держит .av2__costs-fig, и его это правило не трогает.
   Тот же зазор чинится и в статье про пожар в Коледино — там
   дефект был с выката. */
.av2__section > .av2__costs { margin: 0 0 28px; }

/* ══════════════════════════════════════════════════════════════════
   БЛОКИ СТАТЬИ ПРО СЕРТИФИКАТ
   ══════════════════════════════════════════════════════════════════ */

/* ── Как менялась цена ── */
.av2__shift-fig { margin: 24px 0 28px; }
.av2__shift { border: 1px solid var(--av-line-200); border-radius: 18px; overflow: hidden; }
.av2__shift-row {
  padding: 16px 20px;
  border-bottom: 1px solid var(--av-line-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 18px;
  flex-wrap: wrap;
}
.av2__shift-row:last-child { border-bottom: 0; }
.av2__shift-name { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--av-ink-900); min-width: 0; }
.av2__shift-pair { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.av2__shift-was,
.av2__shift-now {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.av2__shift-was { background: var(--av-surface-100); color: var(--av-ink-600); font-size: 15px; }
.av2__shift-now { background: var(--av-warn-bg); color: var(--av-warn); font-size: 15px; font-weight: 800; }
.av2__shift-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--av-ink-300);
}
.av2__shift-now .av2__shift-tag { color: var(--av-warn); opacity: .75; }
.av2__shift-arrow { color: var(--av-ink-300); font-size: 15px; }

/* ── Строка итога у тёмной карточки сравнения ── */
.av2__cmp-total.av2__cmp-total {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid #2C3038;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.av2__cmp-total .av2__cmp-name { color: #E7E9EE; font-weight: 700; }
.av2__cmp-total .av2__cmp-value { color: #fff; }

@media (max-width: 640px) {
  .av2__shift-row { padding: 14px 16px; }
}

/* Тона отрезков и точек хронологии. Без них у сегмента остаётся
   акцент раскладки, и три этапа читаются как один. */
.av2__tl-seg--lilac .av2__tl-line { background: var(--av2-violet); }
.av2__tl-seg--lilac .av2__tl-cap { color: var(--av-brand-text); }
.av2__tl-seg--soft .av2__tl-line { background: #FFB27A; }
.av2__tl-seg--soft .av2__tl-cap { color: var(--av-warn); }
.av2__tl-dot--lilac { background: var(--av2-violet); }
.av2__tl-dot--soft { background: #FFB27A; }

/* ══════════════════════════════════════════════════════════════════
   БЛОКИ СТАТЬИ ПРО ИНСПЕКЦИОННЫЙ КОНТРОЛЬ
   ══════════════════════════════════════════════════════════════════ */

/* Шкала равными долями: у пяти лет жизни сертификата важны сами годы,
   а не пропорции. Сетка, а не флекс: на узких ширинах ячейки
   переносятся по две-три, и годы не сжимаются в полоски. */
.av2__tl-bar--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
}
.av2__tl-bar--grid .av2__tl-seg { flex: none; }
.av2__tl-sub { font-size: 12px; line-height: 1.35; color: var(--av-ink-300); }
.av2__tl-note.av2__tl-note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--av-line-100);
  font-size: 13px;
  line-height: 1.5;
  color: var(--av-ink-300);
}

/* Прежнее значение рядом с новым. <s>, а не span: зачёркивание тут
   смысловое — цена больше не действует. */
.av2__fig-was {
  font-size: .62em;
  font-weight: 600;
  color: var(--av-ink-200);
  text-decoration-thickness: 1px;
  margin-right: 4px;
}
.av2__figs--dark .av2__fig-was { color: #8A93A1; }

/* Приписка под строками тёмной карточки сравнения. */
.av2__cmp-note.av2__cmp-note {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #FFB27A;
}

/* Цепочка шагов: кружок с номером и линия между ними. Наследует
   сетку у шагов, меняет только вид номера. */
.av2__cards--chain { gap: 0; }
.av2__cards--chain > .av2__card2 {
  background: transparent;
  padding: 0 0 22px;
  position: relative;
  column-gap: 16px;
}
.av2__cards--chain > .av2__card2:last-child { padding-bottom: 0; }
.av2__cards--chain .av2__card2-step {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--av-brand);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.av2__cards--chain > .av2__card2:last-child .av2__card2-step { background: var(--av2-orange); }
/* Линия идёт от кружка вниз до следующего: рисуем её псевдоэлементом
   самой карточки, чтобы не заводить лишнюю разметку. */
.av2__cards--chain > .av2__card2:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: var(--av-line-200);
}
.av2__cards--chain .av2__card2-title.av2__card2-title { font-size: 17px; margin-bottom: 4px; }
/* Тон «off» — год, который уже прошёл: серая полоса и приглушённая
   подпись. Нужен там, где шкала показывает не доли, а сами этапы. */
.av2__tl-seg--off .av2__tl-line { background: var(--av-line-200); }
.av2__tl-seg--off .av2__tl-cap { color: var(--av-ink-300); }
/* Тон строки тёмной карточки сравнения. Класс продублирован: правило
   «первая строка янтарная» весит 0-3-0 за счёт :first-of-type, и одного
   класса мало. Нужен там, где первой идёт дешёвая строка, а не дорогая. */
.av2__cmp-row--lilac.av2__cmp-row--lilac .av2__cmp-value { color: var(--av2-violet); }
.av2__cmp-row--lilac.av2__cmp-row--lilac .av2__cmp-bar { background: var(--av2-violet); }
.av2__cmp-row--warn.av2__cmp-row--warn .av2__cmp-value { color: var(--av2-orange); }
.av2__cmp-row--warn.av2__cmp-row--warn .av2__cmp-bar { background: var(--av2-orange); }

/* ── Две параллельные дорожки на одной шкале ──
   Отрезки позиционируются абсолютно от левого края трека: только так
   видно, что вторая дорожка начинается одновременно с первой, а не
   после неё. Флекс здесь не подходит — он выстраивает в ряд. */
.av2__trk {
  margin: 24px 0 28px;
  background: var(--av-surface-100);
  border-radius: 20px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.av2__trk-title.av2__trk-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--av-ink-300);
}
.av2__trk-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; }
.av2__trk-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.av2__trk-name { font-size: 15px; font-weight: 700; color: var(--av-ink-900); }
.av2__trk-note { font-size: 13px; color: var(--av-ink-300); }
.av2__trk-track { position: relative; display: block; height: 32px; }
.av2__trk-seg {
  position: absolute;
  top: 0;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  background: var(--av-brand);
}
.av2__trk-seg--soft { background: #FFB27A; color: var(--av-ink-900); }
.av2__trk-seg--warn { background: var(--av2-orange); color: var(--av-ink-900); }
.av2__trk-seg--lilac { background: var(--av2-violet); color: var(--av-ink-900); }
.av2__trk-seg--mute { background: #8A93A1; }
.av2__trk-row--ruler { align-items: start; }
.av2__trk-ruler { display: flex; font-size: 11px; color: var(--av-ink-200); }
.av2__trk-ruler span { flex: 1 1 0; text-align: left; }
.av2__trk-foot.av2__trk-foot {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--av-ink-400);
}

/* Ниже 620 подпись дорожки встаёт над треком: в 150px она перестаёт
   помещаться. Там же подпись отрезка выходит из самого отрезка
   и встаёт над ним: на 320 «испытания 20 р.д.» просит 137px,
   а отрезок даёт 110 — внутри полосы текст обрезался бы. Слева
   подпись привязана к началу своего отрезка, поэтому шкала
   продолжает читаться. */
@media (max-width: 620px) {
  .av2__trk-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .av2__trk-row--ruler .av2__trk-label { display: none; }
  .av2__trk { padding: 20px 16px; }
  .av2__trk-track { height: 46px; }
  .av2__trk-seg { top: 22px; height: 24px; padding: 0; overflow: visible; }
  .av2__trk-seg-txt {
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px);
    font-size: 12px;
    font-weight: 700;
    color: var(--av-ink-600);
  }
}

/* ── Карточка случая: тон, заголовок и пара «сейчас / потом» ──
   Поля tone, title и pair у блока case. Без них правила ниже
   не срабатывают и врезка остаётся полоской слева. */
.av2__case--warn,
.av2__case--violet,
.av2__case--plain {
  border-left: 0;
  border-radius: 20px;
  padding: 24px 26px;
}
.av2__case--warn { background: var(--av2-warn-soft); border: 1px solid var(--av2-warn-line); }
.av2__case--violet { background: #F7F5FF; border: 1px solid #CFC7FD; }
/* Нейтральная карточка — пара к тонированной: две подряд врезки
   с полоской слева и с заливкой читаются как разные по важности,
   хотя это два равных способа. */
.av2__case--plain { background: #fff; border: 1px solid var(--av-line-200); }
.av2__case--plain .av2__case-label { color: var(--av-ink-300); }
.av2__case--warn .av2__case-label { color: var(--av-warn); }
.av2__case--violet .av2__case-label { color: var(--av-brand-text); }

.av2__case-title.av2__case-title {
  margin: 8px 0 12px;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.25;
  letter-spacing: -.015em;
  font-weight: 800;
  color: var(--av-ink-900);
}

.av2__case-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.av2__case-half {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--av2-warn-line);
}
.av2__case-half-label { font-size: 13px; font-weight: 700; color: var(--av-warn); }
.av2__case-half-text { font-size: 15px; line-height: 1.5; font-weight: 700; color: var(--av-ink-900); }
/* Тёмная половина — «та же правка потом». Класс продублирован:
   .av2 a весит 0-1-1 и перебил бы одиночный класс, если внутри
   когда-нибудь окажется ссылка. */
.av2__case-half--dark.av2__case-half--dark {
  background: var(--av-ink-900);
  border-color: var(--av-ink-900);
}
.av2__case-half--dark .av2__case-half-label { color: var(--av2-orange); }
.av2__case-half--dark .av2__case-half-text { color: #fff; }

/* Янтарная карточка в списке шагов. Правило .av2__cards--steps
   стоит ниже .av2__card2--warn и при равном весе забирало фон
   обратно на серый. */
.av2__cards--steps > .av2__card2--warn {
  background: var(--av2-warn-soft);
  border: 1px solid var(--av2-warn-line);
}
.av2__cards--steps > .av2__card2--warn .av2__card2-step { color: var(--av-warn); }

/* ══════════════════════════════════════════════════════════════════
   БЛОКИ ГАЙДА ПО СЕБЕСТОИМОСТИ
   Опциональные, как и всё выше: без своих полей в data.php
   не печатаются, вывод прежних статей не меняется ни на байт.
   ══════════════════════════════════════════════════════════════════ */

/* Тона тёмной полосы цифр, кроме янтарного. mute гасит число, которое
   в блоке нарочно второстепенно: вес партии ковриков назван, но
   перевозку считают по объёму, и равный по яркости вес спорил бы
   с этим. brand обводит то число, по которому считают. */
.av2__figs--dark .av2__fig--mute .av2__fig-value { color: var(--av-ink-200); }
.av2__figs--dark .av2__fig--brand { border-color: var(--av-brand); }

/* Второй абзац карточки: у .av2__card2-text margin: 0, и два абзаца
   подряд слипались в один блок текста. */
.av2__card2-text + .av2__card2-text { margin-top: 12px; }

/* Сиреневая карточка — пара к янтарной: ОСНО и УСН стоят рядом
   и различаются тоном, а не порядком. */
.av2__card2--violet { border-color: #CFC7FD; background: #F7F5FF; }
.av2__card2--violet .av2__card2-chip { background: var(--av-brand-050); color: var(--av-brand-text); }

/* Снимок внутри карточки шага. Без --plain кадр режется в 4:3:
   фотографии в макете так и стоят. --plain оставляет пропорции
   файла и добавляет рамку — так показан экран калькулятора,
   у которого обрезка съела бы половину таблицы. */
.av2__card2-fig { margin: 14px 0 0; }
.av2__card2-fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}
.av2__card2-fig--plain img {
  aspect-ratio: auto;
  object-fit: contain;
  border: 1px solid var(--av-line-200);
}
.av2__card2-fig figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--av-ink-300);
  text-align: center;
}

/* Срок под ценой в карточке сертификации. Прижат вправо, под своё
   значение: слева в той же строке стоит название документа. */
.av2__cost-sub.av2__cost-sub {
  margin: 2px 0 0;
  text-align: right;
  font-size: 13px;
  line-height: 1.4;
  color: var(--av-ink-300);
}

/* Светлые варианты формулы. Тёмная остаётся значением по умолчанию:
   поля style нет — печатается ровно то, что было. */
.av2__formula--tint { background: #F7F5FF; border: 1px solid #CFC7FD; color: var(--av-ink-900); }
.av2__formula--plain { background: var(--av-surface-100); border: 1px solid var(--av-line-200); color: var(--av-ink-900); }
.av2__formula--tint .av2__formula-main.av2__formula-main,
.av2__formula--plain .av2__formula-main.av2__formula-main { color: var(--av-ink-900); }
.av2__formula--tint .av2__formula-note.av2__formula-note,
.av2__formula--plain .av2__formula-note.av2__formula-note { color: var(--av-ink-400); }

.av2__formula-label.av2__formula-label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--av-ink-300);
}
.av2__formula--tint .av2__formula-label.av2__formula-label { color: var(--av-brand-text); }

/* Формула чипами. Перенос по словам обязателен: на 320 в строку
   помещается один чип, и без wrap «маркировка «Честным знаком»»
   ушла бы за край. */
.av2__formula-chips.av2__formula-chips {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.av2__formula-item { display: inline-flex; align-items: center; gap: 10px; }
.av2__formula-chip {
  background: #fff;
  border: 1px solid #DED8FE;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--av-ink-900);
}
.av2__formula-chip--brand { background: var(--av-brand); border-color: var(--av-brand); color: #fff; }
.av2__formula-op { font-size: 16px; font-weight: 800; color: #8B7CFF; }
.av2__formula--plain .av2__formula-chip { border-color: var(--av-line-200); }
.av2__formula--plain .av2__formula-op { color: var(--av-ink-200); }

/* Подпись над чипами хиро — поле hero_chips_label. */
.av2__hero-chips-label.av2__hero-chips-label {
  margin: 18px 0 -4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--av-ink-200);
}

/* ══════════════════════════════════════════════════════════════════
   ДИАЛОГ ЭКСПЕРТОВ И ВСТАВКИ СТАТЬИ ПРО КОРРЕКТИРОВКУ
   Опциональные, как и всё выше: без своих полей в data.php
   не печатаются, вывод прежних статей не меняется ни на байт.
   ══════════════════════════════════════════════════════════════════ */

.av2__chat { display: flex; flex-direction: column; gap: 18px; margin: 24px 0 28px; }
.av2__chat-row { display: flex; gap: 12px; align-items: flex-start; }
/* Ведущий — справа: строка разворачивается, а не выравнивается
   по краю, иначе аватар оказался бы слева от правого пузыря. */
.av2__chat-row--host { flex-direction: row-reverse; }
/* Продолжение одного говорящего: аватар остаётся местом, но не виден,
   иначе колонка пузырей съезжает влево на его ширину. */
.av2__chat-row--same .av2__chat-pic { visibility: hidden; }
/* Подтягивается только реплика, идущая следом за другой репликой.
   Первая строка блока тоже бывает продолжением — после вставки
   между репликами, — и там подтягивать не к чему: сверху стоит
   не пузырь, а перечень или карточка. */
.av2__chat-row + .av2__chat-row--same { margin-top: -12px; }
.av2__chat-pic {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--av-brand-050);
  display: block;
}
.av2__chat-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av2__chat-pic--letters {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--av-brand-text);
}
.av2__chat-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 92%; }
.av2__chat-row--host .av2__chat-col { max-width: 82%; align-items: flex-end; }
.av2__chat-by.av2__chat-by { margin: 0 0 2px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; line-height: 1.3; }
.av2__chat-name { font-weight: 700; color: var(--av-ink-700); }
.av2__chat-role { color: var(--av-ink-300); }
.av2__chat-bubble {
  background: var(--av-surface-100);
  border: 1px solid var(--av-line-100);
  border-radius: 4px 18px 18px 18px;
  padding: 14px 18px;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--av-ink-700);
  text-wrap: pretty;
}
.av2__chat-row--host .av2__chat-bubble {
  background: var(--av-brand-050);
  border-color: #DED8FE;
  border-radius: 18px 4px 18px 18px;
}
/* Списки и ссылки внутри реплики: текст выводится как есть. */
.av2__chat-bubble ul, .av2__chat-bubble ol { margin: 10px 0 0; padding-left: 22px; }
.av2__chat-bubble li { margin: 0 0 6px; }
.av2__chat-bubble p { margin: 0 0 10px; }
.av2__chat-bubble p:last-child { margin-bottom: 0; }

/* Тёмный пузырь с перечнем — «Резюмируем». Он продолжает реплику,
   поэтому и радиус у него тот же, что у обычного пузыря слева. */
.av2__chat-bubble--dark.av2__chat-bubble--dark {
  background: var(--av-ink-900);
  border-color: var(--av-ink-900);
  color: #E7E9EE;
}
.av2__chat-sum-title.av2__chat-sum-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}
.av2__chat-sum { margin: 0; padding: 0; list-style: none; counter-reset: sum; }
.av2__chat-sum li {
  counter-increment: sum;
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #23262E;
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}
.av2__chat-sum li::before {
  content: counter(sum);
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--av2-violet);
  font-variant-numeric: tabular-nums;
}
.av2__chat-note.av2__chat-note {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
  color: var(--av-ink-300);
}

@media (max-width: 560px) {
  .av2__chat-col,
  .av2__chat-row--host .av2__chat-col { max-width: 100%; }
}

/* Перечень с галочками — ul style=check. Интерактива нет: это список
   того, что показывают, а не чек-лист дел. */
.av2__list--check.av2__list--check {
  list-style: none;
  padding: 0;
  margin: 24px 0 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 20px;
}
.av2__list--check li { position: relative; padding-left: 26px; }
.av2__list--check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: var(--av-brand);
}
.av2__list-note.av2__list-note {
  margin: 0 0 28px;
  padding-top: 12px;
  border-top: 1px solid var(--av-line-100);
  font-size: 15px;
  line-height: 1.55;
  color: var(--av-ink-600);
}

/* Тон lilac у полосы распределения: у сегментов он был не заведён,
   и строка с ним уходила в акцентный синий. Имена тонов одни
   на все блоки — warn, violet, lilac, soft, brand. */
.av2__split-seg--lilac { background: var(--av2-violet); }
.av2__split-dot--lilac { background: var(--av2-violet); }

/* Тёмный вариант полосы распределения. */
.av2__split--dark { background: var(--av-ink-900); color: #fff; }
.av2__split--dark .av2__split-title.av2__split-title { color: var(--av-ink-200); }
.av2__split--dark .av2__split-legend { color: #C9CED8; }
.av2__split--dark .av2__split-legend strong { color: #fff; }
.av2__split--dark .av2__split-text.av2__split-text { color: #FFB27A; }

/* Пояснение под полосой строки сравнения. */
.av2__cmp-row-note.av2__cmp-row-note {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #C9CED8;
}

/* Плитки значений и вторая строка этапа у карточки panel. */
.av2__panel-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.av2__panel-tile {
  background: var(--av-surface-100);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.av2__panel-tile-label { font-size: 14px; color: var(--av-ink-400); }
.av2__panel-tile-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--av-ink-900);
}
.av2__panel-sub { font-size: 13px; line-height: 1.4; color: var(--av-ink-400); }
.av2__panel-note.av2__panel-note {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--av-line-100);
  font-size: 15px;
  line-height: 1.55;
  color: var(--av-ink-600);
  text-wrap: pretty;
}

/* Строки тёмной карточки хиро чипами, а не полосами: значение
   в них — не величина, а исход («ниже рынка → корректировка»),
   и шкале сравнивать нечего. */
.av2__hero-rows--chips .av2__hero-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
.av2__hero-rows--chips .av2__hero-row-top { flex: 1 1 auto; }
.av2__hero-rows--chips .av2__hero-bar { display: none; }
.av2__hero-rows--chips .av2__hero-share.av2__hero-share {
  font-size: 14px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #2C3038;
}

/* Карточка участников разговора — блок people. */
.av2__people {
  margin: 24px 0 28px;
  border: 1px solid var(--av-line-200);
  border-radius: 20px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.av2__people-title.av2__people-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--av-ink-300);
}
.av2__people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 20px; }
.av2__person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.av2__person-pic {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--av-brand-050);
  display: block;
}
.av2__person-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av2__person-pic--letters { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--av-brand-text); }
.av2__person-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.av2__person-name { font-size: 15px; font-weight: 700; color: var(--av-ink-700); }
.av2__person-role { font-size: 13px; line-height: 1.35; color: var(--av-ink-300); }

/* ══════════════════════════════════════════════════════════════════
   БЛОКИ СТАТЬИ ПРО МАРКИРОВКУ
   Опциональные, как и всё выше: без своих полей в data.php
   не печатаются, вывод прежних статей не меняется ни на байт.
   ══════════════════════════════════════════════════════════════════ */

/* Карточка-ссылка. Класс продублирован: .av2 a весит 0-1-1
   и перекрасил бы заголовок карточки в цвет ссылки. */
.av2__card2--link.av2__card2--link {
  color: var(--av-ink-900);
  text-decoration: none;
  transition: border-color .15s;
}
.av2__card2--link.av2__card2--link:hover { text-decoration: none; border-color: var(--av-brand); }
.av2__card2--link.av2__card2--warn:hover { border-color: var(--av2-orange); }

/* Тёмная карточка в паре со светлой — «известно точно» против
   «зависит от случая». Классы продублированы по той же причине. */
.av2__card2--dark.av2__card2--dark {
  background: var(--av-ink-900);
  border-color: var(--av-ink-900);
  color: #E7E9EE;
}
.av2__card2--dark .av2__card2-chip { background: #23262E; color: var(--av-ink-100); }
.av2__card2--dark .av2__card2-title.av2__card2-title { color: var(--av2-orange); font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; }
.av2__card2--dark .av2__card2-text.av2__card2-text { color: #C9CED8; }
.av2__card2--dark .av2__card2-note.av2__card2-note { color: #FFB27A; }

/* Подпись над суммой в тёмной карточке хиро. */
.av2__hero-total-label.av2__hero-total-label {
  margin: 18px 0 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--av-ink-200);
}

/* Сумма в карточке с плитками мельче: у неё не число, а «300–500 тыс. ₽»
   одним неразрывным куском, и в прежнем кегле она вылезала за край
   карточки на 320. Правило привязано к варианту, а не к самой сумме:
   у остальных статей там короткое число, и мельчить его незачем. */
.av2__hero-card--tiles .av2__hero-total-sum { font-size: clamp(30px, 3.4vw, 40px); }

/* Строки тёмной карточки плитками: подпись сверху, значение под ней
   в рамке. Нужны там, где в строке не величина, а состояние —
   «до 9 августа» и «с 9 августа». */
.av2__hero-rows--tiles { display: flex; flex-direction: column; gap: 10px; }
.av2__hero-rows--tiles .av2__hero-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid #2C3038;
  border-radius: 16px;
  padding: 14px 16px;
}
.av2__hero-rows--tiles .av2__hero-row--warn.av2__hero-row--warn { border-color: #5A3A20; }
.av2__hero-rows--tiles .av2__hero-row-top { display: flex; flex-direction: column; gap: 4px; }
.av2__hero-rows--tiles .av2__hero-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--av-ink-200);
}
.av2__hero-rows--tiles .av2__hero-share.av2__hero-share {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #E7E9EE;
  /* В плитке значение — фраза, а не число: базовый nowrap здесь
     не даёт ей переноситься, и она уходит за край карточки. */
  white-space: normal;
}
.av2__hero-rows--tiles .av2__hero-row--warn.av2__hero-row--warn .av2__hero-share { color: #FFB27A; }
.av2__hero-rows--tiles .av2__hero-bar { display: none; }

/* ══════════════════════════════════════════════════════════════════
   БЛОКИ СТАТЬИ ПРО ОДИН СЕРТИФИКАТ НА НЕСКОЛЬКО ТОВАРОВ
   Опциональные, как и всё выше.
   ══════════════════════════════════════════════════════════════════ */

/* Подпись над шкалой — поле title у блока timeline. */
.av2__tl-title.av2__tl-title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--av-ink-300);
}

/* Коды-плашки в заголовке карточки: схема кодов ТН ВЭД. Моноширинный
   шрифт объявлен явно — в вёрстке свои гарнитуры, и наследование
   привело бы к Montserrat. Первые четыре знака выделены <b>: это
   группа, по которой и проходит граница между объединением
   и доп-протоколом. */
.av2__card2-title code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px 8px 0;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--av-line-200);
  border-radius: 8px;
  background: #fff;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--av-ink-600);
}
.av2__card2-title code b {
  background: var(--av-brand);
  color: #fff;
  border-radius: 5px;
  padding: 3px 8px;
  font-weight: 700;
}
.av2__card2--warn .av2__card2-title code { border-color: var(--av2-warn-line); }