/* ============================================================================
   УНИВЕРСАЛЬНАЯ ТИПОГРАФИКА КОНТЕНТА ДЛЯ СТРАНИЦ УСЛУГ (page_service.php)
   ----------------------------------------------------------------------------
   Назначение:
     Зеркало стилей контентной типографики, которые в main-old.css привязаны
     к обёртке `.fullentry .entry-content` (контент page_pricelist.php через
     партиал loops/page-content-hero.php).

     Страницы услуг (шаблон page_service.php) выводят статью в другой обёртке:
        .how-to-article > .content > .left > ul.accordion-list > li.open
          > .accordion-list-body > .how-to-article-content > the_content()

     Поэтому экспертная типографика, callout-плашки, бейджи, price-table и
     фирменное оформление таблиц на страницах услуг НЕ применялись. Этот блок
     дублирует те же правила на префикс `.how-to-article .how-to-article-content`.

   Специфичность:
     `.fullentry .entry-content`        = 0,3,0
     `.how-to-article .how-to-article-content` = 0,3,0  (идентична)
     Блок совпадает по специфичности с существующими правилами
     `.how-to-article .how-to-article-content` в main-old.css и, находясь
     НИЖЕ них по файлу, корректно их переопределяет.

   Куда подключать:
     Вариант 1 — добавить содержимое в самый КОНЕЦ main-old.css.
     Вариант 2 — подключить отдельным файлом ПОСЛЕ main-old.css.
     Важно: блок должен идти после базовых правил `.how-to-article` (строки
     ~4985–5046 и ~7597–7660 в main-old.css), иначе каскад не сработает.

   ВАЖНО ДЛЯ ПОДДЕРЖКИ:
     Это ЗЕРКАЛО. При изменении любого правила контентной типографики в
     секциях main-old.css «ТИПОГРАФИКА КОНТЕНТА СТАТЕЙ В .fullentry» (~8367)
     и «ЭКСПЕРТНАЯ ТИПОГРАФИКА» (~8775) — нужно синхронно обновить этот блок.
     Долгосрочное решение: ввести общий класс (напр. `.article-body`),
     повесить его на обе обёртки в шаблонах и заменить префикс в CSS.

   НЕ включено намеренно:
     - `.partner-card` — глобальный класс, работает вне обёртки, дублировать не нужно.
     - `.page-hero` — hero прайс-страницы, к контенту статьи не относится.
     - блок APPEAL (block-company-appeal) — отдельный блок, своя обёртка.
     - глобальный `.highlight` — не привязан к обёртке, и так работает везде.

   Источник: main-old.css, секции строк 8382–8583 и 8782–9102.
   Дата сборки: 25.05.2026
   ============================================================================ */

/* --- Базовая типографика --- */
.how-to-article .how-to-article-content {
    font-size: 17px;
    line-height: 1.7;
    color: #2b2b2b;
}
.how-to-article .how-to-article-content p { margin: 0 0 22px; line-height: 1.7; }
.how-to-article .how-to-article-content p:last-child { margin-bottom: 0; }

/* --- Заголовки --- */
.how-to-article .how-to-article-content h2,
.how-to-article .how-to-article-content h2.service_colors__title {
    margin: 50px 0 24px; padding: 0; display: block;
    font-family: GothamProBlack, Roboto, Helvetica, Arial, Sans-Serif;
    text-transform: uppercase; font-size: 30px; line-height: 1.2; color: #1a1a1a;
}
.how-to-article .how-to-article-content h2:first-child { margin-top: 0; }
.how-to-article .how-to-article-content h3 {
    margin: 40px 0 18px; padding: 0;
    font-family: GothamProBlack, Roboto, Helvetica, Arial, Sans-Serif;
    font-size: 22px; line-height: 1.3; color: #1a1a1a;
}
.how-to-article .how-to-article-content h4 {
    margin: 32px 0 14px;
    font-family: GothamProBlack, Roboto, Helvetica, Arial, Sans-Serif;
    font-size: 18px; line-height: 1.3; color: #1a1a1a;
}

/* --- Списки --- */
.how-to-article .how-to-article-content ul,
.how-to-article .how-to-article-content ol { margin: 0 0 24px; padding-left: 24px; }
.how-to-article .how-to-article-content li { margin-bottom: 10px; line-height: 1.7; }
.how-to-article .how-to-article-content li:last-child { margin-bottom: 0; }
.how-to-article .how-to-article-content ul li { list-style: disc; }
.how-to-article .how-to-article-content ul li::marker { color: #9a1200; }
.how-to-article .how-to-article-content ul[style*="list-style:none"],
.how-to-article .how-to-article-content ul[style*="list-style: none"],
.how-to-article .how-to-article-content ul.no-bullets { padding-left: 0; list-style: none; }
.how-to-article .how-to-article-content ul[style*="list-style:none"] > li::marker,
.how-to-article .how-to-article-content ul[style*="list-style: none"] > li::marker,
.how-to-article .how-to-article-content ul.no-bullets > li::marker { content: none; }

/* --- Strong, em, ссылки --- */
.how-to-article .how-to-article-content strong,
.how-to-article .how-to-article-content b { font-weight: 700; color: #1a1a1a; }
.how-to-article .how-to-article-content em { color: #555; font-size: 14px; line-height: 1.6; display: inline-block; }
.how-to-article .how-to-article-content a { color: #9a1200; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.15s ease; }
.how-to-article .how-to-article-content a:hover { color: #6e0d00; text-decoration-thickness: 2px; }

/* --- Таблицы: серо-синяя шапка, бордовый акцент сверху --- */
.how-to-article .how-to-article-content table {
    width: 100%; border-collapse: collapse; margin: 30px 0 36px;
    font-size: 15px; line-height: 1.5; background: #fff;
    border-left: 1px solid #d4d9e1; border-right: 1px solid #d4d9e1;
    border-bottom: 1px solid #d4d9e1; border-top: 4px solid #9a1200;
}
.how-to-article .how-to-article-content table thead th,
.how-to-article .how-to-article-content table thead td {
    background-color: #5c6c84 !important; color: #ffffff !important;
    font-weight: 600; text-align: left; padding: 14px 16px; border-bottom: 1px solid #4a566a;
}
.how-to-article .how-to-article-content table thead th *,
.how-to-article .how-to-article-content table thead td * { color: #ffffff !important; }
.how-to-article .how-to-article-content table tbody td {
    padding: 13px 16px; border-bottom: 1px solid #ececec; vertical-align: top; color: #2b2b2b;
}
.how-to-article .how-to-article-content table tbody tr:hover td { background: #fafafa; }
.how-to-article .how-to-article-content table tbody tr:last-child td { border-bottom: none; }
.how-to-article .how-to-article-content table tbody td[colspan] {
    background: #f1f1ee !important; color: #9a1200 !important;
    font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 0.08em;
    padding: 11px 16px; border-left: 3px solid #9a1200; border-bottom: 1px solid #e4e3de;
}
.how-to-article .how-to-article-content table tbody td[colspan] strong { color: #9a1200 !important; }

/* --- .price-table: прозрачная жёлтая подсветка цены --- */
.how-to-article .how-to-article-content table.price-table tbody tr:not(:hover) td:last-child {
    background: rgba(255, 199, 9, 0.10);
}
.how-to-article .how-to-article-content table.price-table tbody tr td:last-child {
    font-weight: 700; color: #1a1a1a; white-space: nowrap;
}
.how-to-article .how-to-article-content table.price-table tbody tr:hover td:last-child {
    background: rgba(255, 199, 9, 0.18);
}
.how-to-article .how-to-article-content table.price-table tbody td[colspan] {
    background: #f1f1ee !important; font-weight: 700; white-space: normal;
}

/* --- Callout-плашки --- */
.how-to-article .how-to-article-content .callout {
    position: relative; margin: 28px 0; padding: 16px 20px 16px 56px;
    border-radius: 0 6px 6px 0; font-size: 15px; line-height: 1.6;
}
.how-to-article .how-to-article-content .callout::before {
    content: ""; position: absolute; left: 16px; top: 16px;
    width: 24px; height: 24px; background-repeat: no-repeat;
    background-position: center; background-size: contain;
}
.how-to-article .how-to-article-content .callout p { margin: 0 0 8px; color: inherit; }
.how-to-article .how-to-article-content .callout p:last-child { margin-bottom: 0; }
.how-to-article .how-to-article-content .callout strong:first-child { display: block; margin-bottom: 4px; font-size: 15px; }

.how-to-article .how-to-article-content .callout-tip,
.how-to-article .how-to-article-content .callout-info { background: #fff8da; border-left: 4px solid #FFC709; }
.how-to-article .how-to-article-content .callout-tip::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a1200' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21h6'/><path d='M9 18h6'/><path d='M12 3a6 6 0 0 0-6 6c0 2.5 1.4 4.6 3.5 5.7.4.2.5.6.5.9V18h4v-2.4c0-.3.1-.7.5-.9C16.6 13.6 18 11.5 18 9a6 6 0 0 0-6-6z'/></svg>");
}
.how-to-article .how-to-article-content .callout-info::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a1200' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='8'/><line x1='12' y1='12' x2='12' y2='16'/></svg>");
}
.how-to-article .how-to-article-content .callout-warning { background: #faf0ee; border-left: 4px solid #9a1200; }
.how-to-article .how-to-article-content .callout-warning strong:first-child { color: #9a1200; }
.how-to-article .how-to-article-content .callout-warning::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a1200' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}
.how-to-article .how-to-article-content .callout-guarantee { background: #e8f5ed; border-left: 4px solid #1e7e34; }
.how-to-article .how-to-article-content .callout-guarantee strong:first-child { color: #1e7e34; }
.how-to-article .how-to-article-content .callout-guarantee::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e7e34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>");
}

/* --- .highlight внутри статьи --- */
.how-to-article .how-to-article-content .highlight,
.how-to-article .how-to-article-content span.highlight {
    background: #fff8da; padding: 2px 6px; font-weight: 700; color: #1a1a1a; border-radius: 3px;
}

/* --- .tldr-summary --- */
.how-to-article .how-to-article-content .tldr-summary {
    background: #fcfaf3; border-left: 4px solid #FFC709;
    padding: 18px 22px; margin: 24px 0 32px;
    border-radius: 0 6px 6px 0; font-size: 16px; line-height: 1.65;
}
.how-to-article .how-to-article-content .tldr-summary p { margin: 0; }

/* --- Бейджи --- */
.how-to-article .how-to-article-content .badge-hit,
.how-to-article .how-to-article-content .badge-vibor,
.how-to-article .how-to-article-content .badge-new {
    display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 7px;
    border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em;
    vertical-align: middle; margin-left: 6px; line-height: 1.4; white-space: nowrap;
}
.how-to-article .how-to-article-content .badge-hit,
.how-to-article .how-to-article-content .badge-vibor { background: #FFC709; color: #1a1a1a; }
.how-to-article .how-to-article-content .badge-new { background: #9a1200; color: #fff; }

/* --- .pdf-download-block --- */
.how-to-article .how-to-article-content .pdf-download-block {
    background: #fff8da; padding: 22px 26px; border-radius: 8px;
    border-left: 4px solid #FFC709; margin: 32px 0;
}
.how-to-article .how-to-article-content .pdf-download-block__title {
    font-weight: 700; font-size: 17px; color: #1a1a1a; margin-bottom: 8px; line-height: 1.3;
}
.how-to-article .how-to-article-content .pdf-download-block__desc {
    font-size: 15px; color: #444; line-height: 1.6; margin-bottom: 16px;
}
.how-to-article .how-to-article-content .pdf-download-block__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.how-to-article .how-to-article-content .pdf-download-block__buttons a {
    display: inline-flex; align-items: center; gap: 6px; background: #9a1200;
    color: #ffffff !important; padding: 9px 16px; border-radius: 6px;
    text-decoration: none !important; font-weight: 600; font-size: 14px;
    transition: background 0.15s ease, transform 0.1s ease;
}
.how-to-article .how-to-article-content .pdf-download-block__buttons a:hover {
    background: #6e0d00; color: #ffffff !important; transform: translateY(-1px);
}
.how-to-article .how-to-article-content .pdf-download-block__buttons a::after { content: " →"; margin-left: 2px; }


/* --- Адаптив --- */
@media (max-width: 991px) {
    .how-to-article .how-to-article-content { font-size: 16px; }
    .how-to-article .how-to-article-content h2,
    .how-to-article .how-to-article-content h2.service_colors__title { font-size: 24px; margin: 40px 0 20px; }
    .how-to-article .how-to-article-content h3 { font-size: 20px; margin: 32px 0 14px; }
    .how-to-article .how-to-article-content table { font-size: 14px; }
    .how-to-article .how-to-article-content table thead th,
    .how-to-article .how-to-article-content table tbody td { padding: 11px 12px; }
    .how-to-article .how-to-article-content .callout { padding: 14px 16px 14px 50px; }
    .how-to-article .how-to-article-content .callout::before { left: 14px; top: 14px; width: 22px; height: 22px; }
}
@media (max-width: 768px) {
    .how-to-article .how-to-article-content { font-size: 15px; line-height: 1.65; }
    .how-to-article .how-to-article-content p { margin-bottom: 18px; }
    .how-to-article .how-to-article-content h2,
    .how-to-article .how-to-article-content h2.service_colors__title { font-size: 20px; margin: 32px 0 16px; }
    .how-to-article .how-to-article-content h3 { font-size: 18px; }
    .how-to-article .how-to-article-content table { display: block; overflow-x: auto; white-space: nowrap; }
    .how-to-article .how-to-article-content .callout { font-size: 14px; padding: 12px 14px 12px 44px; }
    .how-to-article .how-to-article-content .callout::before { left: 12px; top: 12px; width: 20px; height: 20px; }
    .how-to-article .how-to-article-content .pdf-download-block { padding: 18px 20px; }
    .how-to-article .how-to-article-content .pdf-download-block__title { font-size: 16px; }
    .how-to-article .how-to-article-content .pdf-download-block__buttons a { font-size: 13px; padding: 8px 14px; }
}

/* --- 1. ЦИТАТА / КРЮК-ФРАЗА (.content-quote) ---
   Контрастная пауза между абзацами. Аналог «hook» у axdigital.ru.
   Примеры: «Замерщик уехал — смета выросла в полтора раза»
   HTML: <blockquote class="content-quote"><p>Текст</p></blockquote>
   ----------------------------------------------------------------- */
.how-to-article .how-to-article-content .content-quote {
    margin: 36px 0;
    padding: 20px 28px 22px 28px;
    border-left: 5px solid #9a1200;
    background: #faf0ee;
    border-radius: 0 6px 6px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #1a1a1a;
    font-style: normal;
    position: relative;
}
.how-to-article .how-to-article-content .content-quote::before {
    content: "\201C";
    display: block;
    font-size: 48px;
    color: #9a1200;
    font-family: GothamProBlack, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 900;
    line-height: 0.75;
    margin-bottom: 6px;
}
.how-to-article .how-to-article-content .content-quote p {
    margin: 0;
    color: #1a1a1a;
}
.how-to-article .how-to-article-content .content-quote cite {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 400;
    color: #666;
    font-style: normal;
}

/* --- 2. ЖИРНЫЙ КРЮК (.hook-line) ---
   Одна ударная фраза крупнее основного текста. Визуальная пауза.
   Примеры: «Мы производим комплектующие сами — поэтому цена не растёт»
   HTML: <p class="hook-line">Текст</p>
   ----------------------------------------------------------------- */
.how-to-article .how-to-article-content .hook-line {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #1a1a1a;
    margin: 32px 0;
    padding-left: 18px;
    border-left: 3px solid #FFC709;
}
@media (max-width: 768px) {
    .how-to-article .how-to-article-content .hook-line { font-size: 17px; }
}

/* --- 3. ВИЗУАЛЬНЫЙ РАЗДЕЛИТЕЛЬ (.section-divider) ---
   Горизонтальная пауза между смысловыми блоками.
   HTML: <hr class="section-divider">
   ----------------------------------------------------------------- */
.how-to-article .how-to-article-content .section-divider,
.how-to-article .how-to-article-content hr.section-divider {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, #9a1200 0%, #FFC709 60%, transparent 100%);
    margin: 48px 0;
    opacity: 0.35;
}

/* --- 4. СРАВНЕНИЕ ДО/ПОСЛЕ (.compare-block) ---
   Два варианта рядом: «Обычно» vs «У нас».
   HTML:
   <div class="compare-block">
     <div class="compare-block__bad">
       <strong>Обычно</strong>
       <p>Текст</p>
     </div>
     <div class="compare-block__good">
       <strong>У КупитьЗабор.ру</strong>
       <p>Текст</p>
     </div>
   </div>
   ----------------------------------------------------------------- */
.how-to-article .how-to-article-content .compare-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 32px 0;
}
.how-to-article .how-to-article-content .compare-block__bad,
.how-to-article .how-to-article-content .compare-block__good {
    padding: 18px 20px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.6;
}
.how-to-article .how-to-article-content .compare-block__bad {
    background: #faf0ee;
    border-top: 3px solid #9a1200;
}
.how-to-article .how-to-article-content .compare-block__bad strong:first-child {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9a1200;
}
.how-to-article .how-to-article-content .compare-block__good {
    background: #e8f5ed;
    border-top: 3px solid #1e7e34;
}
.how-to-article .how-to-article-content .compare-block__good strong:first-child {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1e7e34;
}
.how-to-article .how-to-article-content .compare-block p { margin: 0 0 6px; }
.how-to-article .how-to-article-content .compare-block p:last-child { margin: 0; }
@media (max-width: 640px) {
    .how-to-article .how-to-article-content .compare-block { grid-template-columns: 1fr; }
}

/* --- 5. ДОВЕРИТЕЛЬНЫЙ БЛОК (.trust-block) ---
   Для статистики, фактов о компании, гарантий.
   HTML:
   <div class="trust-block">
     <div class="trust-block__item">
       <div class="trust-block__num">с 2004</div>
       <div class="trust-block__label">года на рынке</div>
     </div>
     ...
   </div>
   ----------------------------------------------------------------- */
.how-to-article .how-to-article-content .trust-block {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 32px 0;
    padding: 24px;
    background: #f7f8fa;
    border-radius: 8px;
    border-top: 4px solid #5c6c84;
}
.how-to-article .how-to-article-content .trust-block__item {
    flex: 1 1 140px;
    text-align: center;
    padding: 8px 12px;
}
.how-to-article .how-to-article-content .trust-block__num {
    font-family: GothamProBlack, Roboto, Helvetica, Arial, Sans-Serif;
    font-size: 30px;
    line-height: 1.1;
    color: #9a1200;
    font-weight: 900;
}
.how-to-article .how-to-article-content .trust-block__label {
    font-size: 13px;
    color: #555;
    margin-top: 4px;
    line-height: 1.4;
}
@media (max-width: 480px) {
    .how-to-article .how-to-article-content .trust-block { padding: 18px 16px; }
    .how-to-article .how-to-article-content .trust-block__num { font-size: 24px; }
}

/* --- 6. ИСТОРИЯ ИЗ ПРАКТИКИ (.case-story) ---
   Блок «замерщик приехал — выяснилось то-то».
   HTML:
   <div class="case-story">
     <div class="case-story__label">Из практики</div>
     <p>Текст</p>
   </div>
   ----------------------------------------------------------------- */
.how-to-article .how-to-article-content .case-story {
    margin: 32px 0;
    padding: 20px 22px 20px 20px;
    background: #fcfaf3;
    border-left: 4px solid #FFC709;
    border-radius: 0 6px 6px 0;
    font-size: 15px;
    line-height: 1.65;
    color: #333;
}
.how-to-article .how-to-article-content .case-story__label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9a1200;
    margin-bottom: 10px;
}
.how-to-article .how-to-article-content .case-story p { margin: 0 0 8px; color: inherit; }
.how-to-article .how-to-article-content .case-story p:last-child { margin: 0; }

/* --- 7. СПИСОК С ИКОНКОЙ-ГАЛОЧКОЙ (.checklist) ---
   Замена маркерных списков — убедительнее, читабельнее.
   HTML:
   <ul class="checklist">
     <li>Пункт 1</li>
     <li>Пункт 2</li>
   </ul>
   ----------------------------------------------------------------- */
.how-to-article .how-to-article-content ul.checklist {
    list-style: none !important;
    padding-left: 0;
    margin: 0 0 24px;
}
.how-to-article .how-to-article-content ul.checklist li {
    list-style: none !important;
    padding: 10px 0 10px 36px;
    position: relative;
    border-bottom: 1px solid #f0f0ee;
    line-height: 1.6;
    margin: 0;
}
.how-to-article .how-to-article-content ul.checklist li:last-child { border-bottom: none; }
.how-to-article .how-to-article-content ul.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e7e34' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
}

/* --- 8. СПИСОК «КРОСС» — минусы (.crosslist) ---
   Для блоков «как делают другие» или рисков.
   HTML:
   <ul class="crosslist">
     <li>Риск 1</li>
   </ul>
   ----------------------------------------------------------------- */
.how-to-article .how-to-article-content ul.crosslist {
    list-style: none !important;
    padding-left: 0;
    margin: 0 0 24px;
}
.how-to-article .how-to-article-content ul.crosslist li {
    list-style: none !important;
    padding: 10px 0 10px 36px;
    position: relative;
    border-bottom: 1px solid #f5eeee;
    line-height: 1.6;
    color: #444;
    margin: 0;
}
.how-to-article .how-to-article-content ul.crosslist li:last-child { border-bottom: none; }
.how-to-article .how-to-article-content ul.crosslist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a1200' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
}

/* --- 9. ССЫЛКА-КАТЕГОРИЯ (.cat-link) ---
   Для SEO-ссылок на категории в тексте — заметные, не спамные.
   HTML: <a href="/zabor-iz-profilnastila/" class="cat-link">забор из профнастила</a>
   ----------------------------------------------------------------- */
.how-to-article .how-to-article-content a.cat-link {
    display: inline-block;
    color: #9a1200;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid rgba(154, 18, 0, 0.3);
    transition: border-color 0.15s ease, color 0.15s ease;
    padding-bottom: 1px;
}
.how-to-article .how-to-article-content a.cat-link:hover {
    color: #6e0d00;
    border-bottom-color: #6e0d00;
    text-decoration: none;
}

/* --- 10. МИНИ-CTA ВНУТРИ СТАТЬИ (.inline-cta) ---
   Небольшой призыв к действию между секциями текста.
   Кнопка использует классы темы: button-style accent-button with-icon
   HTML:
   <div class="inline-cta">
     <p>Хотите узнать точную стоимость? Замерщик приедет бесплатно.</p>
     <div class="button-style accent-button with-icon" data-toggle="modal" data-target="#masterModal">Вызвать замерщика</div>
   </div>
   ----------------------------------------------------------------- */
.how-to-article .how-to-article-content .inline-cta {
    margin: 36px 0;
    padding: 20px 24px;
    background: #fff8da;
    border-radius: 8px;
    border-left: 4px solid #FFC709;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.how-to-article .how-to-article-content .inline-cta p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    flex: 1 1 200px;
    line-height: 1.5;
}
@media (max-width: 600px) {
    .how-to-article .how-to-article-content .inline-cta { flex-direction: column; align-items: flex-start; }
}