/**
 * Статья: вёрстка один-в-один с референсом (index.html, макет статьи Migra-Pro).
 *
 * Правила извлечены из референса и заскоуплены под `.art`, чтобы общие имена
 * (.btn, .faq, .panel, .wrap) не задевали шапку, подвал и остальной сайт.
 * Подключается условно из functions.php — только на страницах/записях с блоками статьи.
 *
 * Ниже, после извлечённого блока, — дополнения темы: варианты списков из Carbon Fields,
 * состояния оглавления для scripts/article.js и мелкие правки под нашу разметку.
 */


:root {
      --mp-primary: #1a4fb0;
      --mp-primary-dark: #1a4694;
      --mp-primary-light: #eaf1f6;
      --mp-accent: #cc0a0a;
      --mp-accent-hover: #a30808;
      --mp-link: #50b3ff;
      --mp-text: #1a1b1d;
      --mp-muted: #5c6570;
      --mp-border: #dde3e8;
      --mp-bg: #f6f8fa;
      --mp-white: #fff;
      --mp-radius: 16px;
      --mp-radius-sm: 12px;
      --mp-shadow: 0 2px 10px rgba(20, 33, 61, 0.06), 0 8px 24px rgba(33, 84, 178, 0.08);
      --mp-shadow-lg: 0 16px 48px rgba(20, 33, 61, 0.16);
      --mp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      --mp-max: 1120px;
}

.art .wrap { width: min(100% - 40px, var(--mp-max)); margin-inline: auto;
}

.art .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 8px; padding: 12px 20px; border-radius: 999px;
      font-weight: 700; font-size: 0.95rem; text-decoration: none;
      border: 2px solid transparent; cursor: pointer; transition: 0.15s ease;
      font-family: inherit;
}

.art .btn--sm { padding: 10px 16px; font-size: 0.88rem;
}

.art .btn--primary { background: var(--mp-accent); color: #fff;
}

.art .btn--primary:hover { background: var(--mp-accent-hover);
}

.art .btn--secondary {
      background: transparent; color: var(--mp-primary);
      border-color: var(--mp-primary);
}

.art .btn--secondary:hover { background: var(--mp-primary-light);
}

.art .btn--ghost {
      background: rgba(255,255,255,0.14); color: #fff;
      border-color: rgba(255,255,255,0.35);
}

.art .btn--ghost:hover { background: rgba(255,255,255,0.22);
}

.art .btn--light { background: #fff; color: var(--mp-primary);
}

.art .btn--light:hover { background: var(--mp-primary-light);
}

.art .btn--block { width: 100%;
}

.art .req {
      background: #fff3cd; color: #6b5500;
      border-radius: 5px; padding: 0 5px;
      font-weight: 700; white-space: nowrap;
}

.art .terms-note {
      margin: 18px 0 0; padding: 16px 18px;
      background: var(--mp-primary-light);
      border-radius: var(--mp-radius-sm);
      color: var(--mp-text); font-size: 0.95rem;
}

.art .faq { display: grid; gap: 10px; max-width: 52rem;
}

.art .faq details {
      background: var(--mp-white);
      border: 1px solid var(--mp-border);
      border-radius: var(--mp-radius-sm);
      padding: 16px 20px;
}

.art .faq summary {
      cursor: pointer; font-weight: 700; font-size: 1rem;
      list-style: none;
}

.art .faq summary::-webkit-details-marker { display: none;
}

.art .faq summary::after {
      content: "+"; float: right; color: var(--mp-primary); font-size: 1.2rem; line-height: 1;
}

.art .faq details[open] summary::after { content: "–";
}

.art .faq p { margin: 12px 0 0; color: var(--mp-muted); font-size: 0.95rem;
}

.art .section__head { margin-bottom: 28px; max-width: 40rem;
}

.art .section__head h2 {
      margin: 0 0 8px; font-size: clamp(1.4rem, 3vw, 1.85rem);
      letter-spacing: -0.02em;
}

.art .section__head p { margin: 0; color: var(--mp-muted);
}

.art .lead-form { display: grid; gap: 10px;
}

.art .lead-form__row { display: grid; gap: 10px;
}

@media (min-width: 560px) {
.art .lead-form__row { grid-template-columns: 1fr 1fr;
}
}

.art .lead-form input[type="text"],
.art .lead-form input[type="tel"] {
      width: 100%; box-sizing: border-box;
      margin-top: 6px; padding: 13px 14px; border-radius: 12px;
      border: 1px solid var(--mp-border); background: var(--mp-white);
      font: inherit; font-size: 0.95rem; line-height: 1.25; color: var(--mp-text);
}

.art .lead-form input::placeholder { color: #9aa4b0;
}

.art .lead-form input:focus {
      outline: none; border-color: var(--mp-primary);
      box-shadow: 0 0 0 3px rgba(33, 84, 178, 0.15);
}

.art .lead-form .btn { width: 100%;
}

.art .lead-form__agree {
      display: flex; gap: 9px; align-items: flex-start;
      font-size: 0.78rem; line-height: 1.4; color: var(--mp-muted);
}

.art .lead-form__agree input { margin-top: 2px; width: 16px; height: 16px; flex: none;
}

.art .lead-form__agree a { color: inherit; text-decoration: underline;
}

.art .lead-form__note { margin: 0; font-size: 0.8rem; color: var(--mp-muted);
}

.art .lead-form__done {
      display: none; padding: 16px; border-radius: 12px;
      background: rgba(98, 197, 132, 0.14); border: 1px solid #62c584;
      color: #1c6b3a; font-size: 0.92rem; line-height: 1.45;
}

.art .lead-form.is-sent .lead-form__done { display: block;
}

.art .lead-form.is-sent .lead-form__row,
.art .lead-form.is-sent .lead-form__agree,
.art .lead-form.is-sent .lead-form__note,
.art .lead-form.is-sent .btn { display: none;
}

.art .panel { background: var(--mp-white); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-sm); padding: 24px;
}

.art .panel h3 { margin: 0 0 12px; font-size: 1.05rem;
}

.art .panel ul { margin: 0; padding-left: 20px; color: var(--mp-muted);
}

.art .panel ul li { margin-bottom: 7px;
}

.art .panel ul li:last-child { margin-bottom: 0;
}

.art .duo { display: grid; gap: 16px; grid-template-columns: 1fr;
}

@media (min-width: 800px) {
.art .duo { grid-template-columns: 1fr 1fr;
}
}

.art .checklist { display: grid; gap: 10px 24px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none;
}

@media (min-width: 760px) {
.art .checklist { grid-template-columns: 1fr 1fr;
}
}

.art .checklist li { position: relative; padding-left: 28px; color: var(--mp-text); font-size: 0.97rem;
}

.art .checklist li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 50%; background: #e8f6ed; color: #2f9e5b; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

.art { padding: 32px 0 8px;
}

.art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start;
}

.art-main { min-width: 0;
}

.art-side { position: sticky; top: 160px;
}

.art .crumbs { font-size: 14px; color: var(--mp-muted); margin-bottom: 16px;
}

.art .crumbs a { color: var(--mp-muted); text-decoration: none;
}

.art .crumbs a:hover { color: var(--mp-primary);
}

.art h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.2; margin: 0 0 20px;
}

.art-answer { background: var(--mp-primary-light); border-radius: var(--mp-radius);
                  padding: 20px 24px; margin-bottom: 24px;
}

.art-answer p { margin: 0 0 12px; font-size: 18px; line-height: 1.6;
}

.art-answer p:last-child { margin-bottom: 0;
}

.art-meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
                justify-content: space-between; border-top: 1px solid var(--mp-border);
                border-bottom: 1px solid var(--mp-border); padding: 14px 0; margin-bottom: 28px;
}

.art-meta__author { display: flex; gap: 12px; align-items: center; font-size: 15px;
}

.art-meta__ava { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px;
                     background: var(--mp-primary); color: #fff; font-weight: 600;
                     display: flex; align-items: center; justify-content: center; letter-spacing: .5px;
}

.art-meta__role { color: var(--mp-muted); font-size: 14px;
}

.art-meta__dates { color: var(--mp-muted); font-size: 14px; display: flex; gap: 8px;
}

.art .toc { background: var(--mp-bg); border: 1px solid var(--mp-border);
           border-radius: var(--mp-radius); padding: 18px 20px;
           max-height: calc(100vh - 48px); overflow: auto;
}

.art .toc__title { margin: 0 0 10px; font-weight: 600; font-size: 15px;
                  text-transform: uppercase; letter-spacing: .04em; color: var(--mp-muted);
}

.art .toc ol { margin: 0; padding-left: 20px;
}

.art .toc li { margin: 7px 0;
}

.art .toc a { color: var(--mp-text); text-decoration: none; font-size: 15px; line-height: 1.4;
}

.art .toc a:hover { color: var(--mp-primary); text-decoration: underline;
}

.art .toc__ask { display: block; margin-top: 16px; padding-top: 14px;
                border-top: 1px solid var(--mp-border); font-size: 15px; font-weight: 600;
                color: var(--mp-primary); text-decoration: none;
}

.art .toc__ask:hover { text-decoration: underline;
}

/* Кнопка «Посмотреть полностью» нужна только свёрнутому оглавлению до 1080px
   (см. медиазапрос ниже); на десктопе оглавление всегда целиком. */
.art .toc__more { display: none;
}

.art-section { margin: 0 0 36px;
}

.art-section h2 { font-size: clamp(23px, 2.6vw, 30px); line-height: 1.25; margin: 0 0 14px;
}

.art-section h3 { font-size: 20px; margin: 0 0 10px;
}

.art-section p { font-size: 17px; line-height: 1.7; margin: 0 0 14px;
}

.art-section .checklist li,
.art .risk-list li,
.art .norms li { font-size: 17px; line-height: 1.65; margin: 8px 0;
}

.art .risk-list { padding-left: 22px;
}

.art .norms { list-style: none; padding: 0;
}

.art .norms li { padding-left: 18px; position: relative; color: var(--mp-text);
}

.art .norms li::before { content: "§"; position: absolute; left: 0; color: var(--mp-primary); font-weight: 600;
}

.art .callout { border-left: 4px solid var(--mp-primary); background: var(--mp-primary-light);
               border-radius: 0 var(--mp-radius-sm) var(--mp-radius-sm) 0; padding: 16px 20px; margin: 18px 0;
}

.art .callout p { margin: 0; font-size: 16px; line-height: 1.6;
}

.art .callout--money { border-left-color: var(--mp-accent); background: #fdf1f1;
}

.art .table-wrap { overflow-x: auto;
}

.art table.cmp { width: 100%; border-collapse: collapse; font-size: 16px; background: var(--mp-white);
                border-radius: var(--mp-radius-sm); overflow: hidden; box-shadow: var(--mp-shadow);
}

.art table.cmp th,
.art table.cmp td { padding: 12px 14px; text-align: left; vertical-align: top;
                                 border-bottom: 1px solid var(--mp-border);
}

.art table.cmp thead th { background: var(--mp-primary); color: #fff; font-weight: 600;
                         border-bottom: 0; line-height: 1.3;
}

.art table.cmp thead th span { display: block; font-weight: 400; font-size: 13px; opacity: .8;
}

.art table.cmp thead .cmp__axis { background: var(--mp-primary-dark); font-weight: 500; font-size: 14px;
                                 text-transform: uppercase; letter-spacing: .03em; opacity: .95;
}

.art table.cmp thead .cmp__a { border-left: 1px solid rgba(255,255,255,.25);
}

.art table.cmp thead .cmp__b { border-left: 1px solid rgba(255,255,255,.25);
}

.art table.cmp td.cmp__axis { font-weight: 600; width: 26%; background: var(--mp-bg);
}

.art table.cmp td.cmp__a { background: rgba(26, 79, 176, .05); border-left: 1px solid var(--mp-border);
}

.art table.cmp td.cmp__b { background: rgba(92, 101, 112, .05); border-left: 1px solid var(--mp-border);
}

.art table.cmp tr.cmp__group td { background: var(--mp-primary-light); color: var(--mp-primary-dark);
                                 font-weight: 700; font-size: 13px; text-transform: uppercase;
                                 letter-spacing: .04em; padding: 8px 14px;
}

.art table.cmp tr.cmp__group--same td { background: var(--mp-bg); color: var(--mp-muted);
}

.art table.cmp tr.cmp__same td[colspan] { color: var(--mp-muted); border-left: 1px solid var(--mp-border);
}

.art table.cmp tbody tr:last-child td { border-bottom: 0;
}

.art .capture { background: var(--mp-bg); border: 1px solid var(--mp-border);
               border-left: 4px solid var(--mp-primary); border-radius: var(--mp-radius-sm);
               padding: 20px 22px; margin: 28px 0;
}

.art .capture h3 { margin: 0 0 8px; font-size: 19px;
}

.art .capture p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; color: var(--mp-text);
}

.art .capture--quiet { display: grid; grid-template-columns: 1fr; gap: 12px;
}

.art .capture--link { display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
                     justify-content: space-between;
}

.art .capture--link .capture__text { flex: 1 1 320px;
}

.art .capture--link .capture__text p { margin: 0;
}

.art .capture__action { display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}

.art .capture__note { font-size: 13px; color: var(--mp-muted);
}

.art .lead-form--inline label { display: block; font-size: 14px; color: var(--mp-muted);
}

.art .lead-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;
}

.art .lead-form--inline input { width: 100%; margin-top: 4px; padding: 11px 13px; font-family: inherit;
                               font-size: 16px; border: 1px solid var(--mp-border);
                               border-radius: var(--mp-radius-sm); background: var(--mp-white);
}

.art .lead-form--inline .btn { width: auto;
}

.art .btn--brand { background: var(--mp-primary); color: #fff;
}

.art .btn--brand:hover { background: var(--mp-primary-dark);
}

.art .capture--final { display: block; background: var(--mp-primary-light); border: 0;
                      border-radius: var(--mp-radius); padding: 32px; margin: 40px 0;
}

.art .capture--final .section__head h2 { margin-top: 0;
}

.art-video { margin: 0 0 36px;
}

.art-video__head h2 { font-size: clamp(23px, 2.6vw, 30px); margin: 0 0 8px;
}

.art-video__head p { font-size: 16px; color: var(--mp-muted); margin: 0 0 14px;
}

.art-video__player { position: relative; padding-top: 56.25%; border-radius: var(--mp-radius);
                         overflow: hidden; background: #0d1116; box-shadow: var(--mp-shadow);
}

.art-video__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* Заглушка плеера: обложка и кнопка. iframe подставляет scripts/article.js;
   пока он грузится, заглушка лежит поверх, после загрузки — скрывается. */
.art-video__poster { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%;
                     padding: 0; border: 0; background: #0d1116; cursor: pointer;
}

.art-video__poster img { width: 100%; height: 100%; object-fit: cover;
}

.art-video__play { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; translate: -50% -50%;
                   border-radius: 50%; background: rgba(255, 255, 255, .92);
                   box-shadow: 0 6px 20px rgba(0, 0, 0, .3); transition: transform .2s ease;
}

.art-video__play::before { content: ""; position: absolute; top: 50%; left: 54%; translate: -50% -50%;
                           border-style: solid; border-width: 13px 0 13px 22px;
                           border-color: transparent transparent transparent var(--mp-primary);
}

.art-video__poster:hover .art-video__play { transform: scale(1.06);
}

.art-video__poster:focus-visible { outline: 3px solid var(--mp-primary); outline-offset: -3px;
}

.art-video__player.is-loaded .art-video__poster { display: none;
}

/* Без JavaScript плеер не подставится — поверх заглушки ссылка на ролик. */
.art-video__noscript { position: absolute; left: 50%; bottom: 16px; z-index: 2; translate: -50% 0;
                       color: #fff; font-weight: 600;
}

.art-video__links { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
                        margin-top: 12px; font-size: 15px; color: var(--mp-muted);
}

.art-video__links a { color: var(--mp-primary); text-decoration: none; font-weight: 600;
}

.art-video__links a:hover { text-decoration: underline;
}

.art .next__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}

.art .next__card { display: block; padding: 18px 20px; border: 1px solid var(--mp-border);
                  border-radius: var(--mp-radius-sm); text-decoration: none; color: var(--mp-text);
                  background: var(--mp-white); transition: border-color .15s, transform .15s;
}

.art .next__card:hover { border-color: var(--mp-primary); transform: translateY(-2px);
}

.art .next__card strong { display: block; margin-bottom: 6px; color: var(--mp-primary);
}

.art .next__card span { font-size: 15px; color: var(--mp-muted);
}

.art .lead-form select,
.art .lead-form textarea {
      width: 100%; box-sizing: border-box; margin-top: 6px; padding: 13px 14px;
      border: 1px solid var(--mp-border); background: var(--mp-white);
      border-radius: 12px; font: inherit; font-size: 0.95rem; line-height: 1.25; color: var(--mp-text);
}

.art .lead-form textarea { resize: vertical;
}

.art .lead-form select:focus,
.art .lead-form textarea:focus {
      outline: none; border-color: var(--mp-primary); box-shadow: 0 0 0 3px rgba(33, 84, 178, 0.15);
}

.cta-widget { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 320px;
                  background: var(--mp-white); border: 1px solid var(--mp-border);
                  border-radius: var(--mp-radius); box-shadow: var(--mp-shadow-lg);
                  overflow: hidden; font-size: 15px;
}

.cta-widget[hidden] { display: none;
}

.art .cta-widget__close { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px;
                         border: 0; background: transparent; color: var(--mp-muted);
                         font-size: 20px; line-height: 1; cursor: pointer;
}

.art .cta-widget__close:hover { color: var(--mp-text);
}

.art .cta-widget__row { display: flex; gap: 12px; align-items: center; padding: 14px 16px;
                       text-decoration: none; color: var(--mp-text);
}

.art .cta-widget__row--call { border-bottom: 1px solid var(--mp-border);
}

.art .cta-widget__row--expert { background: var(--mp-primary); color: #fff;
}

.art .cta-widget__row--expert:hover { background: var(--mp-primary-dark);
}

.art .cta-widget__icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
                        background: #e8f6ed; color: #1e9e57; display: flex;
                        align-items: center; justify-content: center;
}

.art .cta-widget__ava { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
                       background: rgba(255,255,255,.2); color: #fff; font-weight: 600;
                       display: flex; align-items: center; justify-content: center; font-size: 14px;
}

.art .cta-widget__text { display: flex; flex-direction: column; line-height: 1.35;
}

.art .cta-widget__text strong { font-size: 15px;
}

.art .cta-widget__text span { font-size: 13px; opacity: .85;
}

.art .cta-widget__channels { display: flex; gap: 12px; align-items: center; padding: 10px 16px;
                            background: var(--mp-bg); font-size: 13px; color: var(--mp-muted);
}

.art .cta-widget__channels a { color: var(--mp-primary); font-weight: 600; text-decoration: none;
}

.art .cta-widget__channels a:hover { text-decoration: underline;
}

@media (max-width: 720px) {
.cta-widget { right: 10px; left: 10px; bottom: 10px; width: auto;
}
.art .cta-widget__row { padding: 10px 14px;
}
.art .cta-widget__row--call .cta-widget__text span { display: none;
}
}

@media (max-width: 1080px) {
.art-layout { grid-template-columns: 1fr; gap: 24px;
}
.art-side { position: static; order: -1;
}
.art .toc { max-height: none;
}
.art .toc ol { columns: 2; column-gap: 28px;
}
.art .toc li { break-inside: avoid;
}

/* Свёрнутое оглавление: пункты сверх лимита скрыты, пока не нажата кнопка
   (.is-expanded ставит scripts/article.js). Лимит задаётся в «Статья: шапка». */
.art .toc--collapsible:not(.is-expanded) .toc__extra { display: none;
}
.art .toc__more { display: inline-block; margin-top: 12px;
                  padding: 10px 18px; border: 1px solid var(--mp-border); border-radius: 999px;
                  background: var(--mp-white); cursor: pointer;
                  font-family: inherit; font-size: 15px; font-weight: 600;
                  color: var(--mp-primary);
}
.art .toc__more:hover { background: var(--mp-primary-light); border-color: var(--mp-primary);
}
.art .toc.is-expanded .toc__more { display: none;
}
}

@media (max-width: 720px) {
.art .next__grid { grid-template-columns: 1fr;
}
.art .lead-form__pair { grid-template-columns: 1fr;
}
.art .toc ol { columns: 1;
}
.art .capture--final { padding: 22px 18px;
}
}

.art .req {display:inline-block;background:#fff3bf;color:#7a4b00;border:1px solid #f0c000;
         border-radius:4px;padding:1px 6px;font-size:14px;font-weight:600;line-height:1.35
}

/* ============================================================
   Дополнения темы: компенсация reset.css

   У референса своего reset нет — он полагается на дефолт браузера
   (маркеры списков, цвет ссылок, поля форм). styles/reset.css темы
   обнуляет это глобально, поэтому возвращаем ровно то, что макет ожидает.
   ============================================================ */

/* Нумерация и маркеры: reset.css гасит list-style у всех ul/ol. */
.art .toc ol {
  list-style: decimal;
}

.art .risk-list {
  list-style: decimal;
}

.art .duo .panel ul {
  list-style: disc;
}

/* Списки внутри текста статьи (rich_text) — своих классов у них нет. */
.art .art-section ul:not([class]),
.art .art-section ol:not([class]) {
  margin: 12px 0;
  padding-left: 22px;
  list-style: revert;
}

.art .art-section li {
  margin-bottom: 6px;
}

/* Таблицы внутри текста статьи (rich_text): без отступов ячейки слипаются.
   Таблица сравнения (table.cmp) оформлена отдельно. */
.art .art-section table:not(.cmp) {
  margin: 16px 0;
}

.art .art-section table:not(.cmp) th,
.art .art-section table:not(.cmp) td {
  padding: 8px 12px;
}

.art .art-section table:not(.cmp) th:first-child,
.art .art-section table:not(.cmp) td:first-child {
  padding-left: 0;
}

/* На телефоне таблица из трёх колонок не помещается даже без отступов —
   длинные слова не переносятся. Прокручиваем её вбок, как таблицу сравнения. */
@media (max-width: 720px) {
  .art .art-section table:not(.cmp) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .art .art-section table:not(.cmp) th,
  .art .art-section table:not(.cmp) td {
    padding: 8px;
  }
}

/* Ссылки в тексте: reset.css делает их color: inherit без подчёркивания,
   а базовое правило референса `a { color: var(--mp-primary) }` глобальным
   у нас быть не может — оно бы задело шапку и подвал. */
.art .art-section a:not([class]),
.art .art-answer a,
.art .callout a,
.art .faq a,
.art .terms-note a {
  color: var(--mp-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.art .art-section a:not([class]):hover,
.art .art-answer a:hover,
.art .callout a:hover,
.art .faq a:hover,
.art .terms-note a:hover {
  color: var(--mp-primary-dark);
}


/* ============================================================
   Дополнения темы: чего в референсе нет
   ============================================================ */

/* Подпись поля видна только скринридерам — в макете хватает плейсхолдера. */
.art .lead-form--inline .sr-hint {
  font-size: 0;
  gap: 0;
}

/* Варианты списка из поля list_type: в референсе есть только checklist. */
.art .simple-list,
.art .exempt-list,
.art .exclusion-list {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.art .simple-list li,
.art .exempt-list li,
.art .exclusion-list li {
  position: relative;
  padding-left: 30px;
}

.art .simple-list li::before,
.art .exempt-list li::before,
.art .exclusion-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.art .simple-list li::before {
  content: '•';
  color: var(--mp-muted);
}

.art .exempt-list li::before {
  content: '✓';
  color: #1a7f37;
}

.art .exclusion-list li::before {
  content: '✕';
  color: var(--mp-accent);
}

/* Ответ FAQ обёрнут в .faq__answer — в референсе абзацы лежат прямо в <details>. */
.art .faq__answer p {
  margin: 12px 0 0;
}

/* Активный пункт оглавления проставляет scripts/article.js. */
.art .toc a.is-active {
  color: var(--mp-primary);
  font-weight: 600;
}

/* Референс задаёт select те же рамки и паддинги, что текстовым полям, но
   стрелку оставляет системной — она отличается по размеру и цвету в каждой ОС.
   Рисуем свою: chevron из --mp-muted, inline-SVG, чтобы не тянуть файл. */
.art .lead-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235c6570' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}

.art .lead-form select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231a4fb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Поле «Коротко о вашей ситуации» ниже одной строки не сжимается. */
.art .lead-form textarea {
  min-height: 96px;
}


/* ─────────────────────────────────────────────────────────────────────────
   Тултипы: подсказка к отдельному слову.
   Разметка — <span class="tip" data-tip="…">слово</span> из
   migropro_article_tooltips() (functions.php) или кнопки «Тултип» в редакторе.
   Пузырь .tip__bubble создаёт scripts/article-tooltip.js — реальный элемент,
   а не ::after, чтобы скрипт мог измерить его и не дать вылезти за экран.
   ───────────────────────────────────────────────────────────────────────── */

.art .tip {
      position: relative;
      color: var(--mp-primary);
      border-bottom: 1px dashed currentColor;
      cursor: help;
}

.art .tip:focus-visible {
      outline: 2px solid var(--mp-primary);
      outline-offset: 2px;
      border-radius: 3px;
}

.art .tip__bubble {
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%) translateX(var(--tip-shift, 0px));
      z-index: 30;
      width: max-content;
      max-width: min(280px, calc(100vw - 32px));
      padding: 10px 12px;
      border-radius: var(--mp-radius-sm);
      background: var(--mp-text);
      color: var(--mp-white);
      font-size: 0.85rem;
      font-weight: 400;
      line-height: 1.45;
      text-align: left;
      white-space: normal;
      box-shadow: var(--mp-shadow-lg);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.15s ease, visibility 0.15s ease;
      pointer-events: none;
      cursor: auto;
}

/* Хвостик пузыря: держится под словом, поэтому компенсирует сдвиг пузыря. */
.art .tip__bubble::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateX(calc(-1 * var(--tip-shift, 0px)));
      border: 6px solid transparent;
      border-top-color: var(--mp-text);
}

/* Пузырь под словом, когда сверху не помещается (класс ставит скрипт). */
.art .tip--below .tip__bubble {
      bottom: auto;
      top: calc(100% + 10px);
}

.art .tip--below .tip__bubble::after {
      top: auto;
      bottom: 100%;
      border-top-color: transparent;
      border-bottom-color: var(--mp-text);
}

.art .tip:hover .tip__bubble,
.art .tip:focus-visible .tip__bubble,
.art .tip.is-open .tip__bubble {
      opacity: 1;
      visibility: visible;
}

/* На тач-устройствах наведение эмулируется и «залипает» — открываем только по тапу. */
@media (hover: none) {
      .art .tip:hover .tip__bubble {
            opacity: 0;
            visibility: hidden;
      }

      .art .tip.is-open .tip__bubble {
            opacity: 1;
            visibility: visible;
      }
}

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

/* ============================================================
   Плавающее оглавление (только до 1080px)

   Выше 1080px оглавление sticky и едет со страницей само — вкладка не нужна
   и скрыта. Ниже сайдбар становится статичным (см. медиазапрос выше), поэтому
   у правого края появляется вкладка с теми же пунктами; показывает её
   scripts/article.js, когда сайдбар прокручен за верх экрана.

   Раскладка: .toc-dock прибит к правому краю (right: 0) и растёт влево по
   содержимому. Закрытая панель убрана отрицательным margin-right на свою же
   ширину — на ширину дока она не влияет, и вкладка стоит у самого края.
   При открытии margin обнуляется, док растёт влево, вкладка едет вместе с ним.

   z-index: 70 — выше .cta-widget (60), ниже фиксированной шапки (100).
   ============================================================ */

@media (min-width: 1081px) {
.toc-dock { display: none;
}
}

@media (max-width: 1080px) {
.toc-dock { --toc-dock-w: min(320px, 86vw);
           position: fixed; right: 0; top: 50%; z-index: 70;
           display: flex; align-items: center; pointer-events: none;
           transform: translateY(-50%);
           animation: toc-dock-in .25s ease both;
}

/* Обязательно после правила выше: display из авторских стилей перебивает
   браузерное [hidden]{display:none}, и без этой строки скрыть вкладку
   атрибутом hidden из article.js не получается — она видна всегда. */
.toc-dock[hidden] { display: none;
}

@keyframes toc-dock-in {
from { transform: translateY(-50%) translateX(100%);
}
to { transform: translateY(-50%) translateX(0);
}
}

.toc-dock__tab { pointer-events: auto; flex: 0 0 auto; order: 1;
                writing-mode: vertical-rl; cursor: pointer;
                padding: 18px 11px; border: 0;
                border-radius: var(--mp-radius-sm) 0 0 var(--mp-radius-sm);
                background: var(--mp-primary); color: var(--mp-white);
                font-family: inherit; font-size: 13px; font-weight: 700;
                text-transform: uppercase; letter-spacing: .09em;
                box-shadow: var(--mp-shadow-lg);
                transition: background-color .15s ease;
}

.toc-dock__tab:hover { background: var(--mp-primary-dark);
}

.toc-dock__tab:focus-visible { outline: 2px solid var(--mp-white);
                              outline-offset: -5px;
}

.toc-dock__panel { pointer-events: auto; order: 2;
                  width: var(--toc-dock-w); max-height: min(60vh, 480px); overflow: auto;
                  margin-right: calc(-1 * var(--toc-dock-w));
                  background: var(--mp-white);
                  border: 1px solid var(--mp-border); border-right: 0;
                  border-radius: var(--mp-radius) 0 0 var(--mp-radius);
                  box-shadow: var(--mp-shadow-lg);
                  opacity: 0; visibility: hidden;
                  transition: margin-right .28s ease, opacity .28s ease, visibility .28s;
}

.toc-dock.is-open .toc-dock__panel { margin-right: 0; opacity: 1; visibility: visible;
}

/* Рамку и фон даёт панель — у вложенного оглавления они лишние. */
.art .toc--dock { background: none; border: 0; border-radius: 0;
                 max-height: none; overflow: visible; padding: 18px 20px;
}

/* Оглавление в потоке до 1080px раскладывается в две колонки — в узкой панели
   они не помещаются, здесь всегда одна. */
.art .toc--dock ol { columns: 1;
}
}

@media (prefers-reduced-motion: reduce) {
.toc-dock { animation: none;
}
.toc-dock__panel { transition: none;
}
}

/* ============================================================
   Свёрнутая таблица сравнения (только до 720px)

   На телефоне таблица из десятка строк занимает несколько экранов, поэтому
   показываем первые N (поле «Строк до кнопки», по умолчанию 4), остальные
   раскрывает кнопка — одноразовая, после нажатия скрывается вместе с классом
   .is-expanded, который вешает article.js на .cmp-collapsible.

   Выше 720px таблица всегда целиком, кнопки нет.
   ============================================================ */

.art .cmp-more { display: none;
}

@media (max-width: 720px) {
.art table.cmp .cmp__extra { display: none;
}

.art .cmp-collapsible.is-expanded table.cmp .cmp__extra { display: table-row;
}

.art .cmp-more { display: inline-block; margin-top: 12px;
                padding: 10px 18px; border: 1px solid var(--mp-border); border-radius: 999px;
                background: var(--mp-white); cursor: pointer;
                font-family: inherit; font-size: 15px; font-weight: 600;
                color: var(--mp-primary);
}

.art .cmp-more:hover { background: var(--mp-primary-light); border-color: var(--mp-primary);
}

.art .cmp-collapsible.is-expanded .cmp-more { display: none;
}
}