/* ==========================================================================
   GRO Pillar/Solution Overrides — single source for visual fixes
   Loaded ONLY on single docs/posts (Pillar + Solution), priority 999
   (после style.css темы — overrides через cascade).

   PROTECTED — каждый блок имеет date/reason. Не возвращай старое поведение
   без явного указания от Никиты.
   ========================================================================== */

/* ---------- Fix 1: Hero meta — убрать "Обновлено", унифицировать typography ----
   Added 2026-05-31. Дата обновления дезориентирует user'а на этом этапе.
   Не возвращай .updated в hero — спрашивай прежде чем меняешь. */
.pillar-head .updated,
.solutions-base .reading-date {
  display: none !important;
}
.pillar-head span {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--text_001); /* "Основная статья" — type marker, темнее */
  letter-spacing: 0;
}
/* Время чтения — выровнено с Figma node 8364-81331:
   часы-outline icon + regular weight + серый text_003 */
.pillar-head .gro_reading-time {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--text_003);
  letter-spacing: 0;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
/* Перекрываем legacy clock.svg (theme/img/) — inline SVG, currentColor */
.pillar-head .gro_reading-time::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: none;
  margin-right: 0 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23AAA8A8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 15 14'/></svg>") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

/* ==========================================================================
   Fix 2 (revised 2026-05-31): Компактный ритм между блоками Pillar.
   Раньше padding 56/64 + margin 24 → 144px gap между блоками (выглядит порвано).
   Уменьшаем padding до 40/48 + margin 16 → ~104px → блоки склеиваются плавно.

   PROTECTED — НЕ возвращай 24px margin или 56/64 padding (выглядит порвано).
   ========================================================================== */
.pillar-block-card,
.pillar-paywall-block {
  margin-bottom: 16px !important;
  padding: 40px 40px 48px !important;
}

@media (max-width: 768px) {
  .pillar-block-card,
  .pillar-paywall-block {
    padding: 24px !important;
  }
}

/* Последний блок — без отступа */
.pillar-block-card:last-child,
.pillar-paywall-block:last-child {
  margin-bottom: 0 !important;
}

/* H2 в блоках — уменьшаем default margin-bottom (style.css ставит 36px,
   создавая extra gap между h2 и текстом внутри блока) */
.pillar-block-card h2,
.pillar-paywall-block h2 {
  margin-bottom: 20px !important;
}

/* ==========================================================================
   Fix 3: Унификация body text внутри карточек Pillar
   Added 2026-05-31. Сейчас текст в разных блоках 14px / 16px / 20px — выглядит
   нестройно. Унифицируем до 16px/400/text_001/lh-base. Callouts через
   отдельные классы (yellow-border) сохраняются.
   PROTECTED — не возвращай разные размеры body text без явного UX-кейса.
   ========================================================================== */
.pillar-block-card > .pillar-block-container > p,
.pillar-block-card > .pillar-block-container > .pillar-block__wrap > p,
.pillar-block-card p:not([class*="callout"]):not([class*="paywall"]):not([class*="quote"]),
.pillar-block-card li:not([class*="callout"]):not([class*="paywall"]) {
  font-family: var(--font-family-base);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: var(--lh-base);
  color: var(--text_001);
}

/* ==========================================================================
   Fix 4: Paywall block "Полная система — в подписке" — компактный divider
   Added 2026-05-31. По дизайну этот блок не "заголовок раздела" а просто
   маркер перехода к gated content. Показываем как пунктирную линию + small
   inline CTA.
   PROTECTED — это не статья, а граница. Не возвращай больше padding.
   ========================================================================== */
.pillar-block-card.solutions-base.gro-paywalled-content.active-paywall,
.pillar-block-card.solutions-base.gro-paywalled-content {
  /* Контент за paywall (то что после h2) — оставляем видимым but slightly muted */
  background: transparent;
  border-top: 2px dashed var(--border);
  border-bottom: 0;
  padding: 24px 40px 24px;
  margin-top: 32px;
  margin-bottom: 32px;
  box-shadow: none;
}
/* h2 paywall block — компактный, без огромного 40px */
.pillar-block-card.gro-paywalled-content > .pillar-block-container > .pillar-block__wrap > h2,
.pillar-block-card.gro-paywalled-content h2 {
  font-size: var(--fs-20) !important;
  font-weight: 500 !important;
  color: var(--text_002) !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Скрыть pillar-icon.paywall (большая иконка слева от h2) */
.pillar-block-card.gro-paywalled-content .pillar-icon.paywall {
  display: none !important;
}

/* Hide paywall заголовок из TOC справа (он не контентный раздел) */
.pillar-aside__item:has(a[href*="polnaya-sistema"]),
.pillar-aside__item.is-paywall-marker {
  display: none !important;
}

/* ==========================================================================
   Fix 5: убрать border-top над toggle Dark/Light Mode в правой колонке
   Added 2026-05-31. По макету Figma над toggle нет divider.
   PROTECTED — НЕ возвращай border-top на .gro-theme-toggle-desktop-wrap.
   ========================================================================== */
.gro-theme-toggle-desktop-wrap {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 24px !important;
}

/* ==========================================================================
   Fix 6: locked placeholder items в TOC после paywall divider
   Added 2026-05-31. Если на странице физически только 1 paid section
   (gro-lab/gro-questions пустые), добавляем placeholder TOC items "GRO-LAB"
   и "Частые вопросы" серым стилем чтобы показать масштаб скрытого.
   Реализация через JS (.gro-toc-paywall-placeholder в pillar-overrides.js).
   ========================================================================== */
/* Locked items под paywall — единый серый стиль (без opacity, не прибитые).
   Theme-real locked items (.gro-paywall-locked) и JS-placeholders
   (.gro-toc-paywall-placeholder) выглядят одинаково. */
.pillar-aside__item.gro-toc-paywall-placeholder,
.pillar-aside__item.gro-paywall-locked {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 1 !important;
}
.pillar-aside__item.gro-toc-paywall-placeholder a,
.pillar-aside__item.gro-paywall-locked a {
  color: var(--text_003, #aaa8a8) !important;
  font-weight: 400 !important;
  pointer-events: none;
  text-decoration: none;
}
.pillar-aside__item.gro-toc-paywall-placeholder a:hover,
.pillar-aside__item.gro-paywall-locked a:hover {
  color: var(--text_003, #aaa8a8) !important;
}

/* Убрать active indicator (::before) на ВСЕХ locked / paywall разделах.
   Active class в theme = .act. Принудительно скрываем индикатор там где
   контент недоступен — туда нельзя scrollить. */
.pillar-aside__item.gro-toc-paywall-placeholder::before,
.pillar-aside__item.gro-toc-paywall-placeholder::after,
.pillar-aside__item.gro-toc-paywall-placeholder.act::before,
.pillar-aside__item.is-paywall-marker::before,
.pillar-aside__item.is-paywall-marker.act::before,
.pillar-aside__item.gro-paywall-locked::before,
.pillar-aside__item.gro-paywall-locked.act::before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}
/* Локед items не должны принимать .act класс визуально даже если theme добавит */
.pillar-aside__item.gro-toc-paywall-placeholder a,
.pillar-aside__item.gro-paywall-locked a,
.pillar-aside__item.is-paywall-marker a {
  font-weight: 400 !important;
  color: var(--text_003, #aaa8a8) !important;
}

/* TOC: одна линия слева (Figma 6403-58502).
   Track .pillar-aside__list::before — серая длинная.
   Active item ::before — чёрная overlay на том же X (перекрывает track в active зоне).
   Не должно быть двух параллельных линий. */
.pillar-aside__list {
  position: relative;
}
.pillar-aside__list::before {
  /* Track — серая ОДНА непрерывная линия по всей высоте accessible items
     (до first locked item). Active indicator поверх — чёрный (та же X-координата,
     утолщается визуально). По Figma это ОДНА линия с переменной "толщиной" в зонах
     active. JS-функция trimAsideTrack ограничивает height до paywall. */
  display: block !important;
  content: "" !important;
  position: absolute !important;
  left: -24px !important;
  top: 0 !important;
  width: 2px !important;
  background: var(--text_003, #aaa8a8) !important;
}
.pillar-aside__item {
  position: relative;
}
/* Active indicator выровнен на тот же X что track (offset list padding-left:24px) */
.pillar-aside__item::before {
  left: -24px !important;     /* совпадает с track */
  width: 2px !important;
  background: var(--text_001, #303030) !important;
}
/* Box-outline на focus в TOC — убрать (создаёт синюю рамку вокруг item) */
.pillar-aside__item,
.pillar-aside__item a,
.pillar-aside__item a:focus,
.pillar-aside__item a:focus-visible,
.pillar-aside__item a:active {
  outline: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ==========================================================================
   Fix 7: Overflow protection ТОЛЬКО для text elements (не для layout!)
   Added 2026-05-31. Revised — НЕ трогаем .pillar-wrapper / .pillar-block /
   .pillar-block-container max-width (там 84-85% + margin auto для centering).

   PROTECTED — НЕ добавляй max-width: 100% на layout containers
   (это сломает centering и сделает блоки выровненными влево).
   Применяй overflow rules ТОЛЬКО к headings + paragraphs.
   ========================================================================== */

.pillar-block-card h1,
.pillar-block-card h2,
.pillar-block-card h3,
.pillar-block-card h4,
.pillar-block-card h5,
.pillar-block-card h6,
.pillar-block-card p,
.pillar-block-card li,
.pillar-block-card blockquote,
.pillar-paywall-block h1,
.pillar-paywall-block h2,
.pillar-paywall-block h3,
.pillar-paywall-block p,
.pillar-paywall-block li {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.pillar-block-card a,
.pillar-paywall-block a {
  word-break: break-word;
}

/* ==========================================================================
   Fix 8: Typography unification всех заголовков и текста в Pillar/Solution
   Added 2026-05-31. Audit показал inconsistency:
   - 5 стандартных h2 (40px/500/44.8px/-1.6px/#303030) ✅
   - 1 paywall-mini h2 (20px/500/22.4px/-0.8px/#525252) ✅ (intentional)
   - 1 broken h2 "Полная система — в подписке" (lh:18.2px sliced, ls:normal) ❌

   PROTECTED — каждый тип heading имеет фиксированный style.
   Не возвращай разные line-height/letter-spacing для одинаковых h2.
   ========================================================================== */

/* Все стандартные h2 в Pillar/Solution блоках.
   PROTECTED — НЕ добавляй margin без согласования. Block padding (56px top)
   уже создаёт достаточный воздух — extra margin удваивает gap. */
.pillar-block-card h2,
.pillar-paywall-block h2 {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: var(--fs-40);
  line-height: var(--lh-heading);          /* 1.12 = ~44.8px на 40px font */
  letter-spacing: var(--tracking-tight);   /* -0.04em ≈ -1.6px */
  color: var(--text_001);
}

/* H3 / H4 — typography only, БЕЗ margin */
.pillar-block-card h3,
.pillar-paywall-block h3 {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: var(--fs-28);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--text_001);
}
.pillar-block-card h4,
.pillar-paywall-block h4 {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  color: var(--text_001);
}

/* Body paragraph + list — единые правила (typography baseline 2026-05-31)
   line-height 1.5 для body (было 1.4 — на грани usability по NNG).
   !important нужен — theme имеет более специфичные selectors (.pillar-block-text p
   { line-height: 1.4 }) что перебивает наш baseline. */
.pillar-block-card p,
.pillar-block-card li,
.pillar-paywall-block p,
.pillar-paywall-block li,
.pillar-block-card .pillar-block-text > p,
.pillar-block-card .pillar-block-descr > p,
.pillar-block-card .pillar-block__body p {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.5 !important;
  letter-spacing: 0;
  color: var(--text_001);
  margin-bottom: 20px;
}
.pillar-block-card p:last-child,
.pillar-block-card li:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .pillar-block-card p,
  .pillar-block-card li,
  .pillar-paywall-block p,
  .pillar-paywall-block li {
    font-size: 18px;                       /* mobile bump 16 → 18 для comfortable reading */
    line-height: 1.55;
  }
}

/* Removed 2026-05-31:
   - Reading time per section badges (.gro-section-time) — visual clutter near h2 */

/* ==========================================================================
   Adjustable font size widget A− / A+ — DARK style, рядом с theme toggle.
   Revised: стиль теперь dark pill (как theme toggle), JS вставляет inline
   рядом с .gro-theme-toggle-desktop-wrap. Fallback: fixed bottom-right.
   ========================================================================== */
.gro-font-widget {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--text_001, #303030);
  border: 0;
  border-radius: 100px;
  padding: 4px;
  font-family: var(--font-family-base);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  vertical-align: middle;
}
/* Fallback: если JS не нашёл theme toggle — floating bottom-right */
.gro-font-widget.gro-font-widget--floating {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9998;
}
.gro-font-widget__btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  padding: 0;
  line-height: 1;
}
.gro-font-widget__btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.gro-font-widget__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.gro-font-widget__btn--minus { font-size: 15px; }
.gro-font-widget__btn--plus { font-size: 19px; }
.gro-font-widget__label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  padding: 0 8px;
  user-select: none;
  min-width: 36px;
  text-align: center;
}
/* Если оба widget'а внутри одного контейнера — gap между ними */
.gro-theme-toggle-desktop-wrap .gro-font-widget {
  margin-left: 8px;
}
@media (max-width: 768px) {
  .gro-font-widget.gro-font-widget--floating {
    bottom: 16px;
    right: 16px;
  }
}

/* Применить scale ко всем body p/li в Pillar/Solution через CSS variable. */
.pillar-block-card p,
.pillar-block-card li,
.pillar-paywall-block p,
.pillar-paywall-block li {
  font-size: calc(16px * var(--gro-font-scale, 1)) !important;
}
.pillar-block-card .pillar-block-text > p:first-of-type,
.pillar-block-card.gray .pillar-block-text > p:first-of-type,
.pillar-block-card.start .pillar-block-text > p:first-of-type {
  font-size: calc(20px * var(--gro-font-scale, 1)) !important;
}
@media (max-width: 768px) {
  .pillar-block-card p,
  .pillar-block-card li,
  .pillar-paywall-block p,
  .pillar-paywall-block li {
    font-size: calc(18px * var(--gro-font-scale, 1)) !important;
  }
}

/* ==========================================================================
   Reading Progress Bar — sticky top, показывает % дочитанного
   Added 2026-05-31. Не на жёлтых блоках (там тёмная палка незаметна) — даём
   контрастный --text_001 dark поверх любого fone.
   PROTECTED — не возвращай высоту >3px (мешает hero meta).
   ========================================================================== */
.gro-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  max-width: 100%;
  background: var(--text_001, #303030);
  z-index: 9999;
  pointer-events: none;
  transition: width 0.08s linear;
  will-change: width;
}
@media (max-width: 768px) {
  .gro-reading-progress { height: 2px; }
}

/* Paywall mini-heading "Полная система — в подписке" / "На чём строятся решения" */
.pillar-block-card.gro-paywalled-content h2,
.pillar-paywall-block.pillar-block-yellow h2 {
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: var(--fs-20) !important;
  line-height: var(--lh-base) !important;  /* normal line-height, не 18.2px slice */
  letter-spacing: 0 !important;            /* без -1.6px tight (это для больших h2) */
  color: var(--text_002) !important;
}

/* Yellow callout (большой жёлтый блок с астериском) — body 20px/500 */
.pillar-block-yellow p,
.pillar-block-yellow li {
  font-weight: 500;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);              /* 1.28 ≈ 25.6px */
  letter-spacing: 0;
  color: var(--text_001);
}

/* ==========================================================================
   Fix 12: Первый параграф в pillar блоке — intro style (по Figma)
   Added 2026-05-31. Первый <p> внутри .pillar-block-text → крупнее и semibold
   как intro/lead paragraph. Остальные параграфы — body 16px/400.
   PROTECTED — first-of-type селектор. Не возвращай к одинаковому размеру —
   intro paragraph должен выделяться от body.
   ========================================================================== */
.pillar-block-card .pillar-block-text > p:first-of-type,
.pillar-block-card.gray .pillar-block-text > p:first-of-type,
.pillar-block-card.start .pillar-block-text > p:first-of-type {
  font-size: var(--fs-20) !important;
  font-weight: 500 !important;
  line-height: var(--lh-snug) !important;
  color: var(--text_001) !important;
  margin-bottom: 20px !important;
}

/* Callout с жёлтым left-border (steps) — body 16px/400 */
.pillar-block-card blockquote,
.pillar-block-card .step-callout,
.pillar-block-card [class*="callout"] p {
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  letter-spacing: 0;
  color: var(--text_001);
}

/* ==========================================================================
   Fix 9: Иконки 3-х первых блоков Pillar (class-name mismatch fix)
   Added 2026-05-31.

   ROOT CAUSE: HTML рендерит <i class="pillar-icon acknowledging"> (без суффикса),
   а style.css определяет .pillar-icon.acknowledging-icon (с суффиксом -icon).
   Class names не матчат → иконки не показываются.

   SVG файлы существуют на сервере (img/acknowledging-icon.svg, settings-icon.svg,
   important-icon.svg), просто алиасим CSS правила на короткие class names.

   PROTECTED — НЕ убирай эти правила без переименования HTML class names
   в single-docs.php (это hot zone — лучше алиасить тут).
   ========================================================================== */
.pillar-icon.acknowledging,
.pillar-icon.settings,
.pillar-icon.important {
  margin-right: 20px;
  margin-left: -40px;
}

@media (max-width: 768px) {
  .pillar-icon.acknowledging,
  .pillar-icon.settings,
  .pillar-icon.important {
    margin-right: 16px;
    margin-left: 0;
  }
}

.pillar-icon.acknowledging::before {
  background: url("/wp-content/themes/gro-digital/img/acknowledging-icon.svg") no-repeat center center / cover;
}
.pillar-icon.settings::before {
  background: url("/wp-content/themes/gro-digital/img/settings-icon.svg") no-repeat center center / cover;
}
.pillar-icon.important::before {
  background: url("/wp-content/themes/gro-digital/img/important-icon.svg") no-repeat center center / cover;
}

/* ==========================================================================
   Fix 11: Bullet list стилизация ТОЛЬКО в блоке "Первое действие" (.start)
   Added 2026-05-31. Revised — ограничили scope чтобы не применять ко всем
   спискам в Pillar (в "Признание проблемы" и других блоках list должен
   оставаться default style).

   PROTECTED — НЕ расширяй селектор за пределы .pillar-block-card.start.
   Если нужны steps в другом блоке — добавь конкретный селектор.
   ========================================================================== */
.pillar-block-card.start ul:not([class]),
.pillar-block-card.start ol:not([class]) {
  list-style: none;
  padding-left: 0;
  margin: 16px 0;
}
.pillar-block-card.start ul:not([class]) > li,
.pillar-block-card.start ol:not([class]) > li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 16px;
  list-style: none;
}
.pillar-block-card.start ul:not([class]) > li:last-child,
.pillar-block-card.start ol:not([class]) > li:last-child {
  margin-bottom: 0;
}

/* Большая жёлтая точка перед каждым li (по Figma icon/dot_big) */
.pillar-block-card.start ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--main);
}

/* Для нумерованных списков — counter с жёлтым circled номером */
.pillar-block-card.start ol:not([class]) {
  counter-reset: step-counter;
}
.pillar-block-card.start ol:not([class]) > li {
  padding-left: 44px;
  min-height: 32px;
}
.pillar-block-card.start ol:not([class]) > li::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--main);
  color: var(--text_001);
  font-weight: 500;
  font-size: var(--fs-14);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Strong внутри li (только в .start) — заголовок шага */
.pillar-block-card.start ul:not([class]) > li > strong:first-child,
.pillar-block-card.start ol:not([class]) > li > strong:first-child {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--text_001);
}

/* ==========================================================================
   Fix 13: Card pattern для блоков типа "Почему это происходит?" (по Figma 8364:81414)
   Added 2026-05-31.

   JS добавляет .gro-cards-style к этим блокам. Каждый <li> превращается в
   карточку с:
   - bg --bg-00, radius 16px, padding
   - Жёлтый checkmark circle slева
   - Bold заголовок шага
   - Описание
   - Большая прозрачная цифра "1." / "2." на правой стороне (counter)

   PROTECTED — не возвращай dots в .gro-cards-style. Это намеренно cards.
   ========================================================================== */
.pillar-block-card.start.gro-cards-style ul:not([class]) > li,
.pillar-block-card.start.gro-cards-style ol:not([class]) > li {
  background: var(--bg-00);
  border-radius: 16px;
  /* padding-right 140px — гарантирует gap между текстом и большой цифрой
     (cifra ~72px + 24px right offset + 44px safe gap). Раньше 80px → текст упирался */
  padding: 24px 140px 24px 60px !important;
  margin-bottom: 16px !important;
  counter-increment: card-counter;
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .pillar-block-card.start.gro-cards-style ul:not([class]) > li,
  .pillar-block-card.start.gro-cards-style ol:not([class]) > li {
    padding: 20px 90px 20px 52px !important;
  }
  .pillar-block-card.start.gro-cards-style ul:not([class]) > li::after,
  .pillar-block-card.start.gro-cards-style ol:not([class]) > li::after {
    font-size: 56px !important;
    right: 16px !important;
  }
}

.pillar-block-card.start.gro-cards-style ul:not([class]),
.pillar-block-card.start.gro-cards-style ol:not([class]) {
  counter-reset: card-counter;
}

/* Yellow checkmark circle (заменяет dot) */
.pillar-block-card.start.gro-cards-style ul:not([class]) > li::before,
.pillar-block-card.start.gro-cards-style ol:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 28px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--main) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23303030' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>") no-repeat center / 14px 14px;
  flex: none;
}

/* Большая прозрачная цифра справа (counter "1.", "2.") */
.pillar-block-card.start.gro-cards-style ul:not([class]) > li::after,
.pillar-block-card.start.gro-cards-style ol:not([class]) > li::after {
  content: counter(card-counter) ".";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-family-base);
  font-size: 72px;
  font-weight: 500;
  line-height: 1;
  color: rgba(48, 48, 48, 0.08);
  pointer-events: none;
}

/* Outro callout — золотая ВЕРТИКАЛЬНАЯ линия слева вдоль текста (revised 2026-05-31).
   Раньше была короткая горизонтальная полоска сверху — Никита попросил
   вертикальную вдоль текста абзаца. */
.pillar-block-card.gro-cards-style ul:not([class]) ~ p:last-child,
.pillar-block-card.gro-cards-style .pillar-block-text > p:last-child,
.pillar-block-card.gro-cards-style .pillar-block-descr > p:last-child {
  position: relative;
  margin-top: 32px;
  padding-top: 0;
  padding-left: 24px;
  border-left: 4px solid var(--main);
  font-weight: 500;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--text_001);
}
.pillar-block-card.gro-cards-style ul:not([class]) ~ p:last-child::before,
.pillar-block-card.gro-cards-style .pillar-block-text > p:last-child::before,
.pillar-block-card.gro-cards-style .pillar-block-descr > p:last-child::before {
  content: none;  /* убрана горизонтальная полоска */
}

/* ==========================================================================
   Fix 14: Карта решений (solution-map) — компактный ритм отступов
   Added 2026-05-31. Сейчас разъезжаются между yellow callout / explainer /
   pills / "Начать здесь" / cards. Унифицируем до 24px между секциями.
   ========================================================================== */
.pillar-block-card.solution-map .solutions-yellow {
  margin-bottom: 24px !important;
  padding: 32px !important;
}
.pillar-block-card.solution-map .list-text__wrap .pillar-block-text {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
.pillar-block-card.solution-map .map-list {
  margin-top: 24px !important;
}
.pillar-block-card.solution-map .map-list__toggle {
  margin-top: 16px !important;
}
/* Pills фильтра "Все / Основные / Дополнительные" — отступы между */
.pillar-block-card.solution-map .filter-pills,
.pillar-block-card.solution-map [class*="filter"] {
  margin-bottom: 16px !important;
  gap: 12px;
}

/* ==========================================================================
   Fix 17 (revised 2026-05-31): Карта решений — выделение первой статьи
   (Figma node 8364-81454)

   КОНТЕКСТ: theme/style.css УЖЕ генерирует цифру через
   .map-list__title::before с counter(list-counter)
   → мы НЕ создаём свой counter (это привело к дублю в первой версии Fix 17).

   Мы ТОЛЬКО переопределяем existing ::before для .map-list__item--start
   в жёлтый octagon с белой цифрой + добавляем "Начать здесь" pill.
   PROTECTED — НЕ возвращай counter-reset/counter-increment на .map-list__item.
   ========================================================================== */

.pillar-block-card.solution-map .map-list__item--start {
  position: relative;
  overflow: visible !important;
}

/* Tёмный rounded-square для existing цифры theme'а (.map-list__title::before).
   Figma node 7585:72259 показывает: тёмный квадрат (#303030) ~36x36, BR ~8px,
   белая цифра 20px medium внутри. НЕ octagon. НЕ золотой. */
.pillar-block-card.solution-map .map-list__item--start .map-list__title::before {
  /* Сохраняем theme content (counter list-counter ".") — НЕ перезаписываем */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  background: var(--text_001) !important;  /* #303030 dark */
  color: #ffffff !important;
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: var(--fs-16);
  line-height: 1 !important;
  margin: 0 16px 0 0 !important;
  padding: 0 !important;
  text-align: center;
  vertical-align: middle;
  border-radius: 8px !important;
  clip-path: none !important;  /* override previous octagon */
  flex: none;
}

/* Бейдж "Начать здесь" — dark pill, absolute top-right (Figma 7585:72377) */
.pillar-block-card.solution-map .map-list__item--start .map-list__start-here {
  position: absolute;
  top: -11px;
  right: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 12px;
  background: var(--text_001);
  color: #ffffff;
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 20px;
  letter-spacing: 0;
}

@media (max-width: 768px) {
  .pillar-block-card.solution-map .map-list__item--start .map-list__title::before {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    margin-right: 12px !important;
    border-radius: 6px !important;
  }
  .pillar-block-card.solution-map .map-list__item--start .map-list__start-here {
    right: 12px;
    top: -9px;
    font-size: 11px;
    padding: 0 10px;
  }
}

/* ==========================================================================
   Fix 18: 3 правки по скрину Никиты 2026-05-31
   ========================================================================== */

/* 18a. Бейджи типа "Трекер/Гайд/Решение" в map-list — маленький pill (Figma 12px).
   Revised: добавлен flex-shrink:0 + min-width: max-content чтобы родительский
   flex не сжимал текст и не переносил его на 2 строки. */
.pillar-block-card.solution-map .map-list__status,
.pillar-block-card.solution-map [class*="map-list__type"],
.pillar-block-card.solution-map .map-list__tag {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 22px !important;
  width: auto !important;
  min-width: max-content !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  padding: 0 10px !important;
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--text_001) !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  border-radius: 20px !important;
  letter-spacing: 0;
  vertical-align: middle;
  box-sizing: border-box;
}

/* 18d revised: "Основная" (Core) — белый pill БЕЗ обводки (Figma ArticleStatus) */
.pillar-block-card.solution-map .map-list__type.main {
  background: #ffffff !important;
  color: var(--text_001) !important;
  border: 0 !important;
}

/* "Дополнительная" (Optional) — серый bg + серый текст */
.pillar-block-card.solution-map .map-list__type:not(.main),
.pillar-block-card.solution-map .map-list__type.optional,
.pillar-block-card.solution-map .map-list__type.additional {
  background: var(--bg-01, #e7e5df) !important;
  color: var(--text_002, #525252) !important;
  border: 0 !important;
}

/* ==========================================================================
   Fix 19: Выравнивание левого края бейджей status (Трекер/Гайд/Решение) и
   wrap-строки по краю текста заголовка карточки (после счётчика "1.").
   По Figma 8364-81481;7585:70497: row имеет pl-[42px] чтобы align с text title.

   Сейчас status сидит на +56px вправо от h5.left, а text-title начинается на
   +43px (counter width 18 + margin-right 25). Принудительно ставим
   padding-inline-start:0 + margin:0 у wrap children и компенсируем смещение
   margin-left на первом элементе.
   ========================================================================== */
.pillar-block-card.solution-map .map-list__item .map-list__wrap {
  padding-inline-start: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.pillar-block-card.solution-map .map-list__item .map-list__wrap > .map-list__status:first-child,
.pillar-block-card.solution-map .map-list__item .map-list__wrap > :first-child {
  margin-left: -13px !important;  /* компенсация unexplained 56-43=13px смещения */
  margin-inline-start: -13px !important;
}

/* 18b. Explainer-текст "Обязательные статьи отмечены как Основная..."
   По Figma node 8364-81480: 16px regular color #525252 (text_002).
   Theme добавляет golden border-left + padding-left:30px — убираем (его нет в макете). */
.pillar-block-card.solution-map .list-text__wrap .pillar-block-text,
.pillar-block-card.solution-map .list-text__wrap .pillar-block-text p,
.pillar-block-card.solution-map > .pillar-block-container > .pillar-block__wrap > .pillar-block-text,
.pillar-block-card.solution-map > .pillar-block-container > .pillar-block__wrap > .pillar-block-text p {
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  line-height: var(--lh-base) !important;
  color: var(--text_002) !important;
  letter-spacing: 0;
  border-left: 0 !important;
  padding-left: 0 !important;
}

/* 18c (revised v3 — 2026-05-31): "На чём строятся решения"
   ТЗ Никиты: убрать золотой фон. Заголовок + тире "—" перед ним.
   Под заголовком текст ВИДЕН, fade-to-blur эффект приходит снизу от paywall CTA.
   ========================================================================== */
.pillar-block-card.gro-paywalled-content,
.pillar-block-card.solutions-base.gro-paywalled-content,
.pillar-block-card.solutions-base.gro-paywalled-content.active-paywall {
  border: 0 !important;
  padding: 40px 40px 48px !important;  /* стандартный padding как у других блоков */
  margin-top: 16px !important;
  margin-bottom: 16px !important;
  background: #ffffff !important;       /* белая подложка как у "Карта решений" и др. */
  border-radius: 24px !important;
  box-shadow: none;
  overflow: hidden !important;
  position: relative;
}
/* Note: структура .gro-paywalled-content → .pillar-block__wrap → .pillar-block-container →
   h2 + .pillar-block__body → .pillar-block-container → .pillar-block-descr → p (контент).
   Жёлтый bg сидит на .pillar-block__wrap (внешняя обёртка) — force transparent. */
.pillar-block-card.gro-paywalled-content .pillar-block__wrap,
.pillar-block-card.gro-paywalled-content > .pillar-block__wrap {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
}
.pillar-block-card.gro-paywalled-content .pillar-block__body {
  margin-top: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* На случай если ещё какие-то children имеют grey bg — force transparent глобально */
.pillar-block-card.gro-paywalled-content .pillar-block__body,
.pillar-block-card.gro-paywalled-content .pillar-block__body > *,
.pillar-block-card.gro-paywalled-content .pillar-block-container,
.pillar-block-card.gro-paywalled-content .pillar-block-descr {
  background: transparent !important;
  background-color: transparent !important;
}
/* H2 — стандартный 40px medium + тире "—" перед заголовком */
.pillar-block-card.gro-paywalled-content h2 {
  font-family: var(--font-family-base) !important;
  font-weight: 500 !important;
  font-size: var(--fs-40) !important;
  line-height: var(--lh-heading) !important;
  letter-spacing: var(--tracking-tight) !important;
  color: var(--text_001) !important;
  display: block !important;
  margin: 0 0 24px !important;
}
/* Тире "—" перед заголовком — через CSS background (square placeholder fix
   когда font не имеет em-dash glyph в pseudo-element) */
.pillar-block-card.gro-paywalled-content h2::before {
  content: "" !important;
  display: inline-block;
  width: 24px;
  height: 3px;
  background: var(--text_003, #aaa8a8);
  vertical-align: middle;
  margin-right: 16px;
  margin-bottom: 8px;
  border-radius: 2px;
}
/* Тело paywall блока — текст ЧИТАЕМ вверху, плавный fade к низу.
   ВАЖНО: mask + max-h применяются ТОЛЬКО для НЕавторизованных. Подписчик видит всё. */
.pillar-block-card.gro-paywalled-content .pillar-block-descr,
.pillar-block-card.gro-paywalled-content .pillar-block-text {
  padding: 0 !important;
  background: transparent !important;
  position: relative;
  filter: none !important;
  opacity: 1 !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0.5) 90%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0.5) 90%, transparent 100%);
  pointer-events: none;
  user-select: none;
  max-height: 480px;
  overflow: hidden;
}
/* "На чём строятся решения" (.solutions-base) — по Figma 6403-60499:
   Сам блок имеет серую подложку #f4f3f0 (bg_00), внутри cards — белые. */
.pillar-block-card.gro-paywalled-content.solutions-base {
  background: var(--bg-00, #f4f3f0) !important;
  background-color: var(--bg-00, #f4f3f0) !important;
}
.pillar-block-card.gro-paywalled-content.solutions-base .pillar-block-descr > p:empty {
  display: none !important;
}
/* Intro paragraph (JS-tagged .gro-solutions-intro) — 16px reg #525252 по Figma */
.pillar-block-card.gro-paywalled-content.solutions-base .pillar-block-descr > p.gro-solutions-intro,
.pillar-block-card.gro-paywalled-content.solutions-base .pillar-block-descr > .gro-solutions-intro {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--text_002, #525252);
  margin-bottom: 24px;
}
/* Split intro: lead + numbered list + closing */
.gro-solutions-intro__lead {
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  line-height: 1.5 !important;
  color: var(--text_002, #525252) !important;
  margin: 0 0 16px !important;
}
.gro-solutions-intro__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  counter-reset: intro-counter;
}
.gro-solutions-intro__list > li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 12px;
  counter-increment: intro-counter;
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: var(--fs-16) !important;
  line-height: 1.5 !important;
  color: var(--text_001, #303030) !important;
}
.gro-solutions-intro__list > li::before {
  content: counter(intro-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background: var(--main, #d9b648);
  color: var(--text_001, #303030);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}
.gro-solutions-intro__closing {
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  line-height: 1.5 !important;
  color: var(--text_002, #525252) !important;
  margin: 0 !important;
}
/* Footer (JS-tagged .gro-solutions-footer) — golden border-left callout (Figma 6662:49686) */
.pillar-block-card.gro-paywalled-content.solutions-base .pillar-block-descr > p.gro-solutions-footer {
  margin-top: 24px !important;
  padding: 12px 0 12px 40px !important;
  border-left: 4px solid var(--main, #d9b648) !important;
  font-weight: 500 !important;
  font-size: var(--fs-20) !important;
  line-height: var(--lh-snug, 1.28) !important;
  color: var(--text_001, #303030) !important;
}
/* Future-ready: structured principle cards (если backend наполнит ACF структуру) */
.pillar-block-card.gro-paywalled-content.solutions-base .principle-card,
.pillar-block-card.gro-paywalled-content.solutions-base [class*="principle"] {
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 28px !important;
  margin-bottom: 16px !important;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* ==========================================================================
   Fix 26: "На чём строятся решения" — реальная структура theme:
   .pillar-solutions__list > __item > __block > __wrap.
   Stylize как 3 principle cards по Figma 6403-60499 + counter "1." "2." "3."
   ========================================================================== */
.pillar-block-card.solutions-base .pillar-solutions__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 24px 0 !important;
  counter-reset: solutions-counter;
}
.pillar-block-card.solutions-base .pillar-solutions__item {
  list-style: none !important;
  /* Card same цвет что block bg → flat без рамки/тени, но с большим padding
     для visual separation. На серой подложке цельные блоки. */
  background: var(--bg-00, #f4f3f0) !important;
  background-color: var(--bg-00, #f4f3f0) !important;
  border-radius: 24px !important;
  padding: 32px 110px 32px 32px !important;
  margin-bottom: 16px !important;
  position: relative;
  counter-increment: solutions-counter;
  overflow: hidden;
  border: 0 !important;
  box-shadow: none !important;
}
.pillar-block-card.solutions-base .pillar-solutions__item:last-child {
  margin-bottom: 24px !important;
}
/* Большая полупрозрачная цифра справа (Figma — 60px+ text_003) */
.pillar-block-card.solutions-base .pillar-solutions__item::after {
  content: counter(solutions-counter) ".";
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 72px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.08);
  pointer-events: none;
  letter-spacing: -2px;
}
/* Inner block (title row + content) */
.pillar-block-card.solutions-base .pillar-solutions__block {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
/* Title wrap (theme рендерит icon + title в .__wrap) */
.pillar-block-card.solutions-base .pillar-solutions__wrap {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px !important;
}
.pillar-block-card.solutions-base .pillar-solutions__wrap > * {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: var(--fs-28);
  line-height: 1.28;
  letter-spacing: -1.12px;
  color: var(--text_001, #303030);
}
/* Icon shrink */
.pillar-block-card.solutions-base .pillar-solutions__wrap img,
.pillar-block-card.solutions-base .pillar-solutions__wrap svg,
.pillar-block-card.solutions-base .pillar-solutions__wrap [class*="icon"] {
  flex: none;
  width: 32px;
  height: 32px;
}
/* Bullets inside principle card */
.pillar-block-card.solutions-base .pillar-solutions__block > ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
.pillar-block-card.solutions-base .pillar-solutions__block > ul > li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  line-height: 1.5 !important;
  color: var(--text_001, #303030) !important;
}
.pillar-block-card.solutions-base .pillar-solutions__block > ul > li:last-child {
  margin-bottom: 0;
}
.pillar-block-card.solutions-base .pillar-solutions__block > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--main, #d9b648);
}

/* "Вернуться к обзору решений" link */
.pillar-block-card.solutions-base .pillar-block-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: var(--fs-16) !important;
  color: var(--text_001, #303030) !important;
  text-decoration: none !important;
  margin: 24px 0 !important;
  border-bottom: 1px solid var(--text_001, #303030);
  padding-bottom: 4px;
}
.pillar-block-card.solutions-base .pillar-block-link::after {
  content: " →";
  margin-left: 4px;
}

/* Outro callout (Figma 6662:49686 — golden border-left + key icon).
   Padding-left 48px чтобы текст не прижимался к серой/золотой линии. */
.pillar-block-card.solutions-base .pillar-block-text {
  position: relative !important;
  padding: 16px 70px 16px 48px !important;
  border-left: 4px solid var(--main, #d9b648) !important;
  margin-top: 32px !important;
  margin-left: 0 !important;
}
.pillar-block-card.solutions-base > .pillar-block-container > .pillar-block-descr > .pillar-block-text p {
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: var(--fs-20) !important;
  line-height: 1.4 !important;
  color: var(--text_001, #303030) !important;
  margin: 0 !important;
}
/* Key icon справа (Figma 6662:49689) */
.pillar-block-card.solutions-base > .pillar-block-container > .pillar-block-descr > .pillar-block-text::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: var(--main, #d9b648);
  border-radius: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23303030' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

/* ==========================================================================
   Fix 24: Адаптация остальных Pillar блоков под Figma (2026-06-01)
   ========================================================================== */

/* ===== GRO-LAB (.gro-lab__wrap / __title / __text) — observation cards ===== */
.pillar-block-card.gro-lab .gro-lab__wrap {
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 28px !important;
  margin-bottom: 16px !important;
  border: 1px solid var(--border, #d2d0cb);
}
.pillar-block-card.gro-lab .gro-lab__wrap > span:first-child,
.pillar-block-card.gro-lab .gro-lab__wrap > .gro-lab__tag {
  display: inline-block !important;
  background: #a0e870 !important;        /* green tag like "Наблюдение" */
  color: var(--text_001, #303030) !important;
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  margin-bottom: 12px !important;
  width: auto !important;
}
.pillar-block-card.gro-lab .gro-lab__title {
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: var(--fs-20) !important;
  line-height: 1.4 !important;
  color: var(--text_001, #303030) !important;
  margin: 12px 0 !important;
}
.pillar-block-card.gro-lab .gro-lab__text p {
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  line-height: 1.5 !important;
  color: var(--text_002, #525252) !important;
  margin: 0 !important;
}
/* Legacy support — старое имя класса */
.pillar-block-card.gro-lab .pillar-block-text_title {
  display: inline-block !important;
  background: #a0e870 !important;
  color: var(--text_001, #303030) !important;
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  margin-bottom: 12px !important;
  width: auto !important;
}

/* ===== Частые вопросы (FAQ accordion) ===== */
.pillar-block-card.gro-questions .support-accordion__item {
  background: #ffffff !important;
  border-radius: 16px !important;
  margin-bottom: 12px !important;
  border: 1px solid var(--border, #d2d0cb);
  overflow: hidden;
}
.pillar-block-card.gro-questions .support-accordion__head {
  padding: 20px 24px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pillar-block-card.gro-questions .support-accordion__title {
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: var(--fs-20) !important;
  line-height: 1.4 !important;
  color: var(--text_001, #303030) !important;
  flex: 1;
}
.pillar-block-card.gro-questions .support-accordion__body {
  padding: 0 24px 20px !important;
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  line-height: 1.5 !important;
  color: var(--text_002, #525252) !important;
}

/* ===== Как встроить в реальную жизнь (gro-implementation__block) ===== */
.pillar-block-card.gro-implementation .gro-implementation__block {
  background: var(--bg-00, #f4f3f0) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 12px !important;
}
.pillar-block-card.gro-implementation .gro-implementation__title {
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: var(--fs-20) !important;
  line-height: 1.4 !important;
  color: var(--text_001, #303030) !important;
  margin: 0 0 12px !important;
}
.pillar-block-card.gro-implementation .gro-implementation__block ul,
.pillar-block-card.gro-implementation .gro-implementation__block ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.pillar-block-card.gro-implementation .gro-implementation__block li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-family: var(--font-family-base);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--text_001, #303030);
}
.pillar-block-card.gro-implementation .gro-implementation__block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--main, #d9b648);
}

/* ===== Roadmap (route-card patterns: Фаза 1/2/...) ===== */
.pillar-block-card.gro-route .route-card__wrap {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 28px !important;
  margin-bottom: 16px !important;
  border: 1px solid var(--border, #d2d0cb);
}
.pillar-block-card.gro-route .route-card__title {
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: var(--fs-20) !important;
  line-height: 1.4 !important;
  color: var(--text_001, #303030) !important;
  margin: 0 0 16px !important;
}
.pillar-block-card.gro-route .route-card__wrap ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 16px;
}
.pillar-block-card.gro-route .route-card__wrap li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-family: var(--font-family-base);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--text_001, #303030);
}
.pillar-block-card.gro-route .route-card__wrap li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--main, #d9b648);
}
.pillar-block-card.gro-route .route-card__wrap a {
  color: var(--text_001, #303030) !important;
  text-decoration: underline;
  text-decoration-color: var(--text_003, #aaa8a8);
}

/* ===== Как выглядит прогресс (gro-progress-metrics) ===== */
.pillar-block-card.gro-progress-metrics .gro-progress-metrics__intro {
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  line-height: 1.5 !important;
  color: var(--text_002, #525252) !important;
  margin-bottom: 24px !important;
}
.pillar-block-card.gro-progress-metrics .gro-progress-metrics__content {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 12px !important;
  border: 1px solid var(--border, #d2d0cb);
}
.pillar-block-card.gro-progress-metrics .gro-progress-metrics__title {
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: var(--fs-20) !important;
  line-height: 1.4 !important;
  color: var(--text_001, #303030) !important;
  margin: 0 0 8px !important;
}
.pillar-block-card.gro-progress-metrics .gro-progress-metrics__descr {
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  line-height: 1.5 !important;
  color: var(--text_002, #525252) !important;
  margin: 0 !important;
}

/* ===== Главные ошибки (gro-mistakes__wrap / __title) ===== */
.pillar-block-card.gro-mistakes .gro-mistakes__wrap {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 28px !important;
  margin-bottom: 16px !important;
  border-left: 4px solid #d6b0f7;          /* purple accent для "ошибки" */
}
.pillar-block-card.gro-mistakes .gro-mistakes__title {
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: var(--fs-20) !important;
  line-height: 1.4 !important;
  color: var(--text_001, #303030) !important;
  margin: 0 0 12px !important;
  font-style: italic;
}
.pillar-block-card.gro-mistakes .gro-mistakes__wrap p {
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  line-height: 1.5 !important;
  color: var(--text_002, #525252) !important;
  margin: 0 0 12px !important;
}
.pillar-block-card.gro-mistakes .gro-mistakes__wrap strong {
  display: inline-block;
  color: var(--text_001, #303030);
  font-weight: 500;
}

/* ===== Инструменты по этой теме (gro-pillar-tools) — Figma 7565:72464 =====
   Row layout: [icon-tile bg#f4f3f0 76x76] + content (type label grey + title 20px) +
   outlined button "Открыть в решении"
*/
.pillar-block-card.gro-pillar-tools .gro-pillar-tools__intro {
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  line-height: 1.4 !important;
  color: var(--text_002, #525252) !important;
  margin-bottom: 24px !important;
}
/* Row container — no bg, padding 8px 0 (Figma) */
.pillar-block-card.gro-pillar-tools .gro-pillar-tools__body,
.pillar-block-card.gro-pillar-tools [class*="gro-pillar-tools__row"],
.pillar-block-card.gro-pillar-tools [class*="gro-pillar-tools__file"] {
  background: transparent !important;
  border-radius: 24px !important;
  padding: 8px 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
}
/* Icon tile (left): bg #f4f3f0, p:16, rounded-22, size for 44px icon = 76x76 outer */
.pillar-block-card.gro-pillar-tools .gro-pillar-tools__icon,
.pillar-block-card.gro-pillar-tools .gro-pillar-tools__body > svg:first-child,
.pillar-block-card.gro-pillar-tools .gro-pillar-tools__body > img:first-child,
.pillar-block-card.gro-pillar-tools .gro-pillar-tools__body > .icon,
.pillar-block-card.gro-pillar-tools .gro-pillar-tools__body > [class*="icon"]:first-child {
  background: var(--bg-00, #f4f3f0) !important;
  border-radius: 22px !important;
  padding: 16px !important;
  width: 76px !important;
  height: 76px !important;
  flex: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.pillar-block-card.gro-pillar-tools .gro-pillar-tools__icon img,
.pillar-block-card.gro-pillar-tools .gro-pillar-tools__icon svg {
  width: 44px;
  height: 44px;
}
/* Type label — plain grey text, NOT a pill */
.pillar-block-card.gro-pillar-tools .gro-pillar-tools__type {
  display: block !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text_003, #aaa8a8) !important;
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  margin: 0 0 4px !important;
  width: auto !important;
}
/* Title — 20px reg #303030 */
.pillar-block-card.gro-pillar-tools .gro-pillar-tools__title {
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-20) !important;
  line-height: 1.4 !important;
  color: var(--text_001, #303030) !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding-left: 8px !important;
}
/* CTA button — outlined (border #aaa8a8, white bg, dark text) */
.pillar-block-card.gro-pillar-tools .gro-pillar-tools__cta,
.pillar-block-card.gro-pillar-tools .gro-pillar-tools__cta a,
.pillar-block-card.gro-pillar-tools a[class*="gro-pillar-tools__cta"],
.pillar-block-card.gro-pillar-tools .gro-pillar-tools__btn {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: #ffffff !important;
  color: var(--text_001, #303030) !important;
  height: 36px !important;
  padding: 0 20px !important;
  border-radius: 40px !important;
  border: 1px solid var(--text_003, #aaa8a8) !important;
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  flex: none !important;
  cursor: pointer;
  white-space: nowrap;
}
.pillar-block-card.gro-pillar-tools .gro-pillar-tools__cta:hover {
  background: var(--bg-00, #f4f3f0) !important;
  border-color: var(--text_001, #303030) !important;
}

/* ===== Disclaimer "Этот материал не заменяет..." — Figma 7563:70462 =====
   Theme имеет .gro-pillar-info-disclaimer с blue card bg #f5f7fa.
   Заменяем на простой inline row: ⓘ icon + grey text. */
.gro-pillar-info-disclaimer,
.pillar-block-card .pillar-disclaimer,
.pillar-block-card [class*="disclaimer"]:not([class*="paywall"]),
.gro-medical-disclaimer {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 24px 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 16px !important;
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  line-height: 1.4 !important;
  color: var(--text_003, #aaa8a8) !important;
  border-radius: 0 !important;
}
/* Theme может уже иметь свой <svg> внутри — скрываем + используем CSS pseudo для нашей icon */
.gro-pillar-info-disclaimer > svg,
.gro-pillar-info-disclaimer > img:not(.gro-info-icon),
.gro-pillar-info-disclaimer > i {
  display: none !important;
}
.gro-pillar-info-disclaimer p,
.gro-pillar-info-disclaimer span {
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  line-height: 1.4 !important;
  color: var(--text_003, #aaa8a8) !important;
  margin: 0 !important;
}
.gro-pillar-info-disclaimer::before,
.pillar-block-card .pillar-disclaimer::before,
.gro-medical-disclaimer::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aaa8a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* ===== Готовы перейти к первому шагу (gro-start-practic) ===== */
.pillar-block-card.gro-start-practic .gro-start-practic__btn,
.pillar-block-card.gro-start-practic .btn-black {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--text_001, #303030) !important;
  color: #ffffff !important;
  padding: 14px 32px !important;
  border-radius: 100px !important;
  font-weight: 500 !important;
  font-size: var(--fs-16) !important;
  text-decoration: none !important;
  margin-top: 16px !important;
  width: auto !important;
}

/* ===== Возникли вопросы? (gro-pillar-help) ===== */
.pillar-block-card.gro-pillar-help .gro-pillar-help__title {
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: var(--fs-28) !important;
  line-height: 1.28 !important;
  color: var(--text_001, #303030) !important;
  margin: 0 0 12px !important;
}
.pillar-block-card.gro-pillar-help .gro-pillar-help__sub {
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  line-height: 1.5 !important;
  color: var(--text_002, #525252) !important;
  margin-bottom: 24px !important;
}
.pillar-block-card.gro-pillar-help .gro-pillar-help__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.pillar-block-card.gro-pillar-help .gro-pillar-help__btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--text_001, #303030) !important;
  color: #ffffff !important;
  padding: 12px 24px !important;
  border-radius: 100px !important;
  font-weight: 500 !important;
  font-size: var(--fs-16) !important;
  text-decoration: none !important;
}
.pillar-block-card.gro-pillar-help .gro-pillar-help__btn:nth-child(2),
.pillar-block-card.gro-pillar-help .gro-pillar-help__btn--secondary {
  background: transparent !important;
  color: var(--text_001, #303030) !important;
  border: 1px solid var(--text_001, #303030);
}
.pillar-block-card.gro-lab .pillar-block-descr > p,
.pillar-block-card.gro-lab .pillar-block-text > p {
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  line-height: 1.5 !important;
  color: var(--text_001, #303030) !important;
}

/* Roadmap / Главные ошибки — list patterns (numbered steps + рекомендация-callout) */
.pillar-block-card.gro-route .pillar-block-descr > p:empty,
.pillar-block-card.gro-mistakes .pillar-block-descr > p:empty,
.pillar-block-card.gro-implementation .pillar-block-descr > p:empty {
  display: none !important;
}
.pillar-block-card.gro-route .pillar-block-descr > ul,
.pillar-block-card.gro-mistakes .pillar-block-descr > ul,
.pillar-block-card.gro-implementation .pillar-block-descr > ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 16px 0;
}
.pillar-block-card.gro-route .pillar-block-descr > ul > li,
.pillar-block-card.gro-mistakes .pillar-block-descr > ul > li,
.pillar-block-card.gro-implementation .pillar-block-descr > ul > li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 16px;
  font-family: var(--font-family-base);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--text_001, #303030);
}
.pillar-block-card.gro-route .pillar-block-descr > ul > li::before,
.pillar-block-card.gro-mistakes .pillar-block-descr > ul > li::before,
.pillar-block-card.gro-implementation .pillar-block-descr > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--main, #d9b648);
}

/* Готовы перейти (gro-start-practic) — yellow CTA блок без h2.
   По Figma: жёлтый bg с CTA-link к маршруту. */
.pillar-block-card.gro-start-practic {
  background: var(--main, #d9b648) !important;
  text-align: center;
}
.pillar-block-card.gro-start-practic .pillar-block-descr > p,
.pillar-block-card.gro-start-practic .pillar-block-text > p {
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: var(--fs-20) !important;
  line-height: var(--lh-snug, 1.28) !important;
  color: var(--text_001, #303030) !important;
  text-align: center;
  margin: 0;
}
.pillar-block-card.gro-start-practic a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--text_001, #303030);
  color: #ffffff !important;
  padding: 12px 28px;
  border-radius: 100px;
  font-weight: 500;
  text-decoration: none;
  margin-top: 16px;
}
.pillar-block-card.gro-start-practic a:hover {
  background: #000000;
}

/* Возникли вопросы? (gro-pillar-help) — help block с контактами */
.pillar-block-card.gro-pillar-help h2,
.pillar-block-card.gro-pillar-help h3 {
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: var(--fs-28) !important;
  line-height: var(--lh-snug, 1.28) !important;
  color: var(--text_001, #303030) !important;
  margin: 0 0 12px !important;
}
.pillar-block-card.gro-pillar-help p {
  font-size: var(--fs-16) !important;
  color: var(--text_002, #525252) !important;
  margin-bottom: 16px !important;
}
.pillar-block-card.gro-pillar-help a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--text_001, #303030);
  color: #ffffff !important;
  padding: 12px 24px;
  border-radius: 100px;
  font-weight: 500;
  font-size: var(--fs-16);
  text-decoration: none;
  margin-right: 8px;
}
.pillar-block-card.gro-pillar-help a + a {
  background: transparent;
  color: var(--text_001, #303030) !important;
  border: 1px solid var(--text_001, #303030);
}

/* Скрыть полностью пустые блоки (без контента в test fixtures).
   На production-статье где есть content — блок отображается. */
.pillar-block-card.gro-questions:not(:has(.pillar-block-descr > *)):not(:has(.pillar-block-text > *)),
.pillar-block-card.gro-progress-metrics:not(:has(.pillar-block-descr > *)):not(:has(.pillar-block-text > *)),
.pillar-block-card.gro-pillar-tools:not(:has(.pillar-block-descr > *)):not(:has(.pillar-block-text > *)) {
  /* Оставляем visible — h2 виден, body может быть из других templates */
  /* display: none !important; — если хочешь скрывать пустые, раскомментируй */
}

/* Roadmap — внутренние pillar-block-card вложенные (theme structure):
   .gro-route содержит .gro-progress-metrics, .gro-mistakes, .gro-pillar-tools
   как children. Им нужен compact inner padding. */
.pillar-block-card.gro-route > .pillar-block-card {
  margin-top: 32px !important;
  padding: 32px !important;
}

/* Inside gro-route children — h2 ниже rank */
.pillar-block-card.gro-route > .pillar-block-card > .pillar-block-container > .pillar-block__wrap > h2,
.pillar-block-card.gro-route .pillar-block-card h2 {
  font-size: var(--fs-28) !important;
  letter-spacing: -1.12px !important;
}

/* PAYWALL VISIBILITY LOGIC — fixed 2026-06-04.
   Theme single-docs.php добавляет .active-paywall на .solutions-base когда
   !$user_has_subs (нет активной подписки). Для остальных gro-paywalled блоков
   theme рендерит preview vs full content server-side.

   Правильная логика:
   - .gro-paywalled-content.active-paywall → unpaid → apply blur/mask
   - .gro-paywalled-content БЕЗ .active-paywall → paid → full content (no mask)

   Раньше использовали body.logged-in — bug: free registered тоже получал full. */

/* Paid (no .active-paywall) — снимаем mask + max-h + ::after fade */
.pillar-block-card.gro-paywalled-content:not(.active-paywall),
.pillar-block-card.gro-paywalled-content:not(.active-paywall) .pillar-block-descr,
.pillar-block-card.gro-paywalled-content:not(.active-paywall) .pillar-block-text,
.pillar-block-card.gro-paywalled-content:not(.active-paywall) .pillar-block__body {
  -webkit-mask-image: none !important;
          mask-image: none !important;
  -webkit-mask: none !important;
          mask: none !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  user-select: auto !important;
  filter: none !important;
  opacity: 1 !important;
}
.pillar-block-card.gro-paywalled-content:not(.active-paywall)::after,
.pillar-block-card.gro-paywalled-content:not(.active-paywall)::before {
  display: none !important;
  content: none !important;
}

/* Unpaid (.active-paywall) — применяем blur fade.
   ВАЖНО: paywall CTA "Полная система — в подписке" уже server-render'ится theme'ом
   только когда !$user_has_subs (см. single-docs.php:684 if/else). НЕ нужно CSS hide. */
.pillar-block-card.gro-paywalled-content.active-paywall,
.pillar-block-card.gro-paywalled-content.active-paywall .pillar-block-descr,
.pillar-block-card.gro-paywalled-content.active-paywall .pillar-block-text,
.pillar-block-card.gro-paywalled-content.active-paywall .pillar-block__body {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,0) 100%) !important;
          mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,0) 100%) !important;
  max-height: 360px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
}
/* Убрать серую подложку у внутренних p/div paywall preview (theme может добавлять bg на callout-like блоки) */
.pillar-block-card.gro-paywalled-content .pillar-block-descr > *,
.pillar-block-card.gro-paywalled-content .pillar-block-text > *,
.pillar-block-card.gro-paywalled-content p,
.pillar-block-card.gro-paywalled-content .pillar-block-descr > p {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Fade-overlay от низа к paywall CTA — на белой подложке fade в #fff */
.pillar-block-card.gro-paywalled-content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.85) 60%,
    #ffffff 100%
  );
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 768px) {
  .pillar-block-card.gro-paywalled-content,
  .pillar-block-card.solutions-base.gro-paywalled-content,
  .pillar-block-card.solutions-base.gro-paywalled-content.active-paywall {
    padding: 24px 24px 0 !important;
  }
  .pillar-block-card.gro-paywalled-content .pillar-block-text {
    max-height: 240px;
  }
}

/* ==========================================================================
   Fix 20: Paywall CTA-блок "Вы изучили только 30% материала" (Figma 6403-60330)
   Это .pillar-block-yellow.pillar-paywall-block — жёлтый CTA с lock icon,
   body, 3 пункта (Инструменты/Маршруты/Разбор), dark button.

   Стилизуем существующие элементы по Figma. JS-инжекции элементов нет —
   только переопределение типографии/spacing/bg.
   ========================================================================== */
.pillar-block-yellow.pillar-paywall-block,
.pillar-paywall-block.pillar-block-yellow {
  background: var(--main, #d9b648) !important;
  border-radius: 24px !important;
  padding: 56px 40px 40px !important;
  margin-top: 16px !important;
  margin-bottom: 16px !important;
  box-shadow: none;
  border: 0 !important;
}
/* H2 paywall CTA — 40px medium dark, ТЕКСТ выровнен по левому краю с body.
   Theme добавляет inherited 40px offset (через some inherited property не padding/indent).
   Compensate через negative margin-left:-40px. Lock icon absolute поверх. */
.pillar-block-yellow.pillar-paywall-block h2,
.pillar-paywall-block.pillar-block-yellow h2 {
  font-family: var(--font-family-base) !important;
  font-weight: 500 !important;
  font-size: var(--fs-40) !important;
  line-height: var(--lh-heading) !important;
  letter-spacing: var(--tracking-tight) !important;
  color: var(--text_001) !important;
  display: block !important;
  margin: 0 0 24px -40px !important;  /* compensate theme offset чтобы h2 align с body */
  padding-left: 0 !important;
  text-indent: 0 !important;
  position: relative;
}
.pillar-block-yellow.pillar-paywall-block h2::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  left: -56px;  /* icon торчит слева ЗА пределами текста (40 icon + 16 gap) */
  top: 50%;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23303030' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media (max-width: 768px) {
  .pillar-block-yellow.pillar-paywall-block h2,
  .pillar-paywall-block.pillar-block-yellow h2 {
    margin-left: -32px !important;
  }
  .pillar-block-yellow.pillar-paywall-block h2::before {
    left: -44px;
    width: 28px;
    height: 28px;
  }
}
/* Body параграфы внутри CTA — 20px regular + bold accent */
.pillar-block-yellow.pillar-paywall-block p {
  font-family: var(--font-family-base) !important;
  font-weight: 400 !important;
  font-size: var(--fs-20) !important;
  line-height: var(--lh-snug) !important;
  color: var(--text_001) !important;
  margin: 0 0 16px !important;
}
.pillar-block-yellow.pillar-paywall-block p strong,
.pillar-block-yellow.pillar-paywall-block p b {
  font-weight: 500;
}
/* List items внутри CTA — bullet с arrow circle icon */
.pillar-block-yellow.pillar-paywall-block ul,
.pillar-block-yellow.pillar-paywall-block ol {
  list-style: none;
  padding-left: 0;
  margin: 24px 0 32px;
}
.pillar-block-yellow.pillar-paywall-block ul li,
.pillar-block-yellow.pillar-paywall-block ol li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 16px;
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--text_001);
}
.pillar-block-yellow.pillar-paywall-block ul li::before,
.pillar-block-yellow.pillar-paywall-block ol li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23303030' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") no-repeat center / 14px;
}
/* Button "Открыть полную систему" — большой dark pill, hover сохраняет стрелку */
.pillar-block-yellow.pillar-paywall-block .button,
.pillar-block-yellow.pillar-paywall-block .btn,
.pillar-block-yellow.pillar-paywall-block a.cta,
.pillar-block-yellow.pillar-paywall-block .wp-block-button__link,
.pillar-block-yellow.pillar-paywall-block .gro-paywall-cta,
.pillar-paywall-block.pillar-block-yellow a[href*="/checkout"],
.pillar-paywall-block.pillar-block-yellow a[href*="/tariff"],
.pillar-paywall-block.pillar-block-yellow a[href*="/karta-profilya"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 72px;
  background: var(--text_001, #303030) !important;
  color: #ffffff !important;
  border-radius: 500px;
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: var(--fs-20);
  text-decoration: none !important;
  padding: 0 40px;
  border: 0;
  margin: 24px 0 0 !important;
  transition: background 0.2s ease, transform 0.15s ease;
}
/* Hover — subtle lift + чуть темнее. Стрелка остаётся видимой (не меняем color). */
.pillar-block-yellow.pillar-paywall-block a:hover,
.pillar-block-yellow.pillar-paywall-block .gro-paywall-cta:hover,
.pillar-paywall-block.pillar-block-yellow a[href*="/checkout"]:hover,
.pillar-paywall-block.pillar-block-yellow a[href*="/tariff"]:hover,
.pillar-paywall-block.pillar-block-yellow a[href*="/karta-profilya"]:hover {
  background: #1a1a1a !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}
/* Защитим стрелку внутри кнопки от исчезновения на hover */
.pillar-block-yellow.pillar-paywall-block a:hover *,
.pillar-block-yellow.pillar-paywall-block a:hover svg,
.pillar-block-yellow.pillar-paywall-block a:hover span {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 768px) {
  .pillar-block-yellow.pillar-paywall-block,
  .pillar-paywall-block.pillar-block-yellow {
    padding: 32px 24px !important;
  }
  .pillar-block-yellow.pillar-paywall-block h2 {
    font-size: var(--fs-28) !important;
  }
  .pillar-block-yellow.pillar-paywall-block h2::before {
    width: 28px;
    height: 28px;
  }
  .pillar-block-yellow.pillar-paywall-block p,
  .pillar-block-yellow.pillar-paywall-block ul li,
  .pillar-block-yellow.pillar-paywall-block ol li {
    font-size: var(--fs-16) !important;
  }
}

/* ==========================================================================
   Fix 21: Финальная стилизация нижних блоков (Figma 6403-60499 + GRO design system)
   - Paywall CTA "Полная система" — выровнять footer ("Условия возврата" → text-link)
   - "Смотри также" — белая подложка, cards с arrow icon
   - "Применить на практике" — dark CTA правильной типографии
   - Editorial Disclosure — bg #f4f3f0 nice padding
   - Order: Paywall → См.также → Применить → Disclosure
   ========================================================================== */

/* ----- Paywall CTA footer (по Figma 6403-60578): центр + theme bullet •.
   Theme УЖЕ рендерит <span class="circle__delimeter"></span> между items
   как separator. НЕ добавляй ::after content " • " — будет дубль точек. ----- */
.pillar-block-yellow.pillar-paywall-block .paywall_disclaimer,
.pillar-block-yellow.pillar-paywall-block .pillar-paywall__footer,
.pillar-block-yellow.pillar-paywall-block p:last-of-type {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: center !important;
  text-align: center;
  font-size: var(--fs-16) !important;
  font-weight: 400 !important;
  color: var(--text_002, #525252) !important;
  margin-top: 24px !important;
  background: transparent !important;
}
/* Все children footer (span/a) — body weight + цвет text_002 */
.pillar-block-yellow.pillar-paywall-block .paywall_disclaimer > span,
.pillar-block-yellow.pillar-paywall-block .paywall_disclaimer > a {
  font-family: var(--font-family-base);
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  color: var(--text_002, #525252) !important;
  text-decoration: none !important;
}
/* Theme circle delimiter: оставляем как есть, но lokalizujem стиль */
.pillar-block-yellow.pillar-paywall-block .circle__delimeter {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text_003, #aaa8a8);
  margin: 0 4px;
  vertical-align: middle;
}
/* "Условия возврата" — theme стилизует .dark__link_inline как dark pill button
   (bg #303030, white text, padding, border-radius). Сбрасываем всё → text-link
   как остальной footer. */
.pillar-block-yellow.pillar-paywall-block .paywall_disclaimer a.dark__link_inline,
.pillar-block-yellow.pillar-paywall-block a.dark__link_inline,
.pillar-paywall-block.pillar-block-yellow a.dark__link_inline {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text_002, #525252) !important;
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  display: inline !important;
  text-decoration: underline !important;
  text-decoration-color: var(--text_003, #aaa8a8) !important;
  text-underline-offset: 3px;
  box-shadow: none !important;
  margin: 0 !important;
  width: auto !important;
}
.pillar-block-yellow.pillar-paywall-block .paywall_disclaimer a.dark__link_inline:hover,
.pillar-block-yellow.pillar-paywall-block a.dark__link_inline:hover,
.pillar-paywall-block.pillar-block-yellow a.dark__link_inline:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text_001, #303030) !important;
  text-decoration-color: var(--text_001, #303030) !important;
}
/* "Условия возврата" — text-link style теперь определён в footer-секции ниже.
   Главное: НЕ возвращай тут дублированный rule с weight:500 — переопределит
   стиль footer'а где weight:400. */

/* ----- "Следующие шаги маршрута" по Figma 11047:395285
   Timeline pattern: vertical track-линия слева + golden circle с inner dot per card.
   Card bg #f4f3f0 br 24 padding 28, gap 8px между cards (для visible track).
   Right: dark pill button "Перейти →" 36px.
   ----- */
aside.gro-related,
.gro-related:not(.gro-related-articles):not(.gro-related__title):not(.gro-related__item):not(.gro-related__list) {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  /* Width 100% — берёт от parent (.pillar-block__content куда JS перемещает aside),
     parent уже имеет правильный max-width + left alignment как pillar blocks. */
  max-width: 100% !important;
  width: 100% !important;
  margin: 24px 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  display: block !important;
  box-sizing: border-box;
}
.gro-related__title {
  font-family: var(--font-family-base) !important;
  font-weight: 500 !important;
  font-size: 36px !important;
  line-height: 1.12 !important;
  letter-spacing: -1.44px !important;
  color: var(--text_001) !important;
  margin: 0 0 32px !important;
}
/* List = timeline container с track-линией слева */
.gro-related__list {
  list-style: none !important;
  padding: 0 0 0 56px !important;       /* 56 = 36px (golden bullet width) + 20 (gap to text) */
  margin: 0 !important;
  position: relative !important;
}
/* Vertical track-линия — серая 1px по всей высоте list */
.gro-related__list::before {
  content: "";
  position: absolute;
  left: 18px;                              /* center of 36px bullet column */
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border, #c4c2bc);
}
/* Each card */
.gro-related__list > li,
.gro-related__item {
  /* Page bg = #e9e8e4 (darker), cards = #dedbd3 (darker still) → visible contrast. */
  background: #dedbd3 !important;
  border-radius: 24px !important;
  margin-bottom: 8px !important;
  list-style: none !important;
  transition: background 0.2s ease;
  position: relative;
  overflow: visible;
}
.gro-related__list > li:hover,
.gro-related__item:hover {
  background: #d2d0cb !important;
}
.gro-related__list > li:last-child,
.gro-related__item:last-child {
  margin-bottom: 0 !important;
}
.gro-related__list > li:hover,
.gro-related__item:hover {
  background: #e7e5df !important;
}
/* Golden circle 36×36 — abs слева, поверх track-линии. Центр вертикально. */
.gro-related__list > li::before,
.gro-related__item::before {
  content: "";
  position: absolute;
  left: -38px;                               /* -56 (padding-left) + 18 (column center) - 18 (half circle) = -38 */
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--main, #d9b648);
  z-index: 2;                                /* поверх track */
}
/* Inner dot 8×8 dark внутри circle */
.gro-related__list > li::after,
.gro-related__item::after {
  content: "";
  position: absolute;
  left: -24px;                               /* center of circle - 4px = -38 + 14 = -24 */
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text_001, #303030);
  z-index: 3;
}
/* Link inside card — flex: title | pill. Force bg transparent чтобы grey li был виден. */
.gro-related__list > li a.gro-related__link,
.gro-related__item a.gro-related__link {
  display: flex !important;
  align-items: center;
  gap: 20px;
  padding: 28px !important;
  font-family: var(--font-family-base);
  text-decoration: none !important;
  width: 100%;
  position: relative;
  color: var(--text_001) !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: inherit;
  box-shadow: none !important;
}
/* Content wrapper — flex column для title+subtitle */
.gro-related__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
/* Title — 20px medium */
.gro-related__link-text {
  flex: 1 1 auto;
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: var(--fs-20) !important;
  line-height: 1.4 !important;
  color: var(--text_001) !important;
  display: block;
}
/* Subtitle — 16px regular text_002 (по Figma 11047:395307) */
.gro-related__subtitle {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.4;
  color: var(--text_002, #525252);
  display: block;
}
.gro-related__subtitle:empty {
  display: none;
}
/* Dark pill "Перейти →" button (бывший .gro-related__arrow span) */
.gro-related__arrow {
  flex: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--text_001, #303030) !important;
  color: #ffffff !important;
  height: 36px !important;
  padding: 0 20px !important;
  border-radius: 40px !important;
  font-size: 0 !important;                   /* hide original "→" */
  line-height: 1 !important;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.gro-related__arrow::before {
  content: "Перейти";
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  color: #ffffff;
}
.gro-related__arrow::after {
  content: "→";
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  margin-left: 0;
}
.gro-related__list > li:hover .gro-related__arrow,
.gro-related__item:hover .gro-related__arrow {
  background: #000000 !important;
}
/* Hide пустые дубли */
.gro-related-articles:empty,
.gro-related-articles:not(:has(*:not(h3))) {
  display: none !important;
}
@media (max-width: 768px) {
  aside.gro-related {
    width: calc(100% - 32px) !important;
    margin: 12px auto !important;
    padding: 24px !important;
  }
  .gro-related__title { font-size: 24px !important; letter-spacing: -0.5px !important; margin-bottom: 24px !important; }
  .gro-related__list { padding-left: 44px !important; }
  .gro-related__list::before { left: 14px; }
  .gro-related__list > li::before { left: -32px; width: 28px; height: 28px; }
  .gro-related__list > li::after { left: -22px; width: 6px; height: 6px; }
  .gro-related__list > li a.gro-related__link,
  .gro-related__item a.gro-related__link { padding: 20px !important; gap: 12px; }
  .gro-related__link-text { font-size: var(--fs-16) !important; }
  .gro-related__arrow { height: 32px !important; padding: 0 14px !important; }
  .gro-related__arrow::before { font-size: 13px; }
  .gro-related__arrow::after { font-size: 14px; }
}

/* ----- "Применить на практике" — dark CTA с reset всех theme min-heights ----- */
.gro-doc-cta {
  background: var(--text_001, #303030) !important;
  color: #ffffff !important;
  border-radius: 24px !important;
  padding: 40px 48px !important;
  margin: 16px 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 16px;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
}
/* Reset theme flex:1 1 260px (body stretches!) + min-heights / padding */
.gro-doc-cta__body,
.gro-doc-cta > div,
.gro-doc-cta .gro-doc-cta__body {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  background: transparent !important;
  flex: 0 0 auto !important;       /* убрать theme flex:1 1 260px */
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
}
.gro-doc-cta__title,
.gro-doc-cta h2,
.gro-doc-cta h3 {
  font-family: var(--font-family-base) !important;
  font-weight: 500 !important;
  font-size: var(--fs-28) !important;
  line-height: var(--lh-snug) !important;
  letter-spacing: var(--tracking-tight) !important;
  color: #ffffff !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.gro-doc-cta__desc,
.gro-doc-cta__subtitle,
.gro-doc-cta p {
  font-family: var(--font-family-base) !important;
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;
  line-height: var(--lh-base) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
/* CTA button — compact 56px, не растянутая */
.gro-doc-cta a,
.gro-doc-cta button,
.gro-doc-cta .btn,
.gro-doc-cta .gro-doc-cta__btn,
.gro-doc-cta__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--main, #d9b648) !important;
  color: var(--text_001, #303030) !important;
  font-family: var(--font-family-base);
  font-weight: 500 !important;
  font-size: var(--fs-16) !important;
  padding: 16px 32px !important;
  height: 56px !important;
  min-height: 0 !important;
  max-height: 56px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  margin: 16px 0 0 !important;
  align-self: flex-start;
  border: 0 !important;
  width: auto !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.gro-doc-cta a:hover,
.gro-doc-cta__btn:hover {
  background: #ffffff !important;
  color: var(--text_001, #303030) !important;
}

/* ----- Editorial Disclosure ----- */
.gro-authorship-disclosure {
  background: var(--bg-00, #f4f3f0) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  margin: 32px 0 16px !important;
  border: 0 !important;
  font-family: var(--font-family-base);
  font-size: var(--fs-16) !important;
  line-height: var(--lh-base) !important;
  color: var(--text_002, #525252) !important;
}
.gro-authorship-disclosure p {
  margin: 0 0 12px !important;
}
.gro-authorship-disclosure p:last-child {
  margin-bottom: 0 !important;
  font-size: var(--fs-14, 14px) !important;
  color: var(--text_003, #aaa8a8) !important;
}
.gro-authorship-disclosure strong {
  color: var(--text_001, #303030) !important;
  font-weight: 500 !important;
}

@media (max-width: 768px) {
  .gro-related,
  .gro-related-articles { padding: 24px !important; }
  .gro-doc-cta { padding: 28px 24px !important; }
  .gro-doc-cta__title { font-size: var(--fs-20) !important; }
  .gro-authorship-disclosure { padding: 24px !important; }
}

/* ==========================================================================
   Fix 15 (revised 2026-05-31): Серое тире "—" ТОЛЬКО перед "Карта решений"
   В макете тире — серый визуальный маркер ТОЛЬКО на блоке solution-map.
   Не применять к .start / .gray / .important и др. (там свои иконки).
   PROTECTED — НЕ расширяй селектор за пределы .solution-map.
   ========================================================================== */
.pillar-block-card.solution-map .pillar-block__wrap > h2::before {
  content: "—";
  color: var(--text_003);
  font-weight: 400;
  margin-right: 12px;
  display: inline-block;
}

/* ==========================================================================
   Fix 16: Reading improvements для длинных body параграфов (опция A + D)
   Added 2026-05-31. Для блоков с pattern "[Bold term] — [definition]" в каждом
   параграфе: JS добавляет .gro-reading-list к блоку, CSS превращает каждый
   <p> в карточку-buллет с жёлтой точкой + bold lead phrase.

   Дополнительно: typography для readability — line-height 1.5, max-width 75ch.
   PROTECTED — applies ТОЛЬКО к .gro-reading-list блокам (JS-tagged).
   ========================================================================== */

/* Typography readability boost для всех body параграфов в Pillar (опция D) */
.pillar-block-card .pillar-block-text > p:not(:first-of-type):not(:last-child) {
  line-height: 1.5 !important;
  margin-bottom: 16px;
  max-width: 72ch;
}

/* Bullet pattern для блоков с pattern "Term — definition" (опция A) */
.pillar-block-card.gro-reading-list .pillar-block-text > p:not(:first-of-type):not(:last-child) {
  position: relative;
  padding-left: 28px;
  margin-bottom: 18px;
  max-width: 75ch;
  line-height: 1.5 !important;
}
.pillar-block-card.gro-reading-list .pillar-block-text > p:not(:first-of-type):not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--main);
}
/* Bold lead phrase до тире — emphasis (JS оборачивает в <strong class="gro-lead">) */
.pillar-block-card.gro-reading-list .gro-lead {
  font-weight: 600;
  color: var(--text_001);
}