/* Блог, дизайн B «Карточки» (решение Саши M-023, 05.11.2026): только статьи с `design: b` в шапке. Подключается
   генератором scripts/build-blog.mjs ПОСЛЕ styles.css и blog.css (версия в адресе: CSS_B_VERSION) и берёт их токены
   (--ink, --deep, --blue, --cyan, --font, --pad). Образец: marketing-brain/initiatives/I-003-seo/2026-11-05-growth-research/
   design/B-cards.html, компоненты: 07-article-design.md §3. Светло-серая страница, компоненты на белых карточках,
   короткий ответ в тёмной карточке. Без скриптов. Смысл всегда текстом, цвет только подсказка (WCAG 1.4.1).
   Контраст мелкого текста не ниже 4,5:1 (пары посчитаны по формуле WCAG, 10.11.2026): --deep на белом 7,7:1 и на
   сером фоне 7,1:1, --ink-62 на белом 5,4:1 и на сером 5,2:1, #7A4F00 на #FFF8EA 6,7:1, --cyan на --ink 10,2:1.
   Синий --blue (#1170F2) на сером фоне даёт 4,2:1, поэтому ссылки и мелкие подписи здесь --deep. */

.blog-b{
  --surface:#F4F6FA;
  --ink-62:rgba(10,15,26,.62);
  --ink-12:rgba(10,15,26,.12);
  --amber-ink:#7A4F00;--amber-line:#E9B949;--amber-bg:#FFF8EA;
  --card:0 1px 2px rgba(10,15,26,.06),0 22px 44px -30px rgba(8,69,205,.30);
  --pill:rgba(17,112,242,.10);
}
.blog-b main{background:var(--surface)}
.blog-b main :focus-visible{outline-color:var(--deep)}
.blog-b .answer :focus-visible,.blog-b .cta-box :focus-visible{outline-color:var(--cyan)}

/* ── Шапка статьи ── */
.blog-b .post{padding:clamp(24px,4vw,40px) 0 clamp(48px,6vw,72px)}
/* Колонка 680 px минус поля = текст до 600 px: 70-75 знаков в строке (WCAG 1.4.8 советует до 80). */
.blog-b .post-wrap{max-width:680px}
.blog-b .crumbs{color:var(--ink-62);margin-bottom:26px}
.blog-b .crumbs a{color:var(--ink-62)}
.blog-b .crumbs a:hover{color:var(--deep)}
.blog-b .post-head .eyebrow{margin:0 0 14px;padding:4px 11px;border-radius:999px;background:#fff;box-shadow:var(--card);font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--deep)}
.blog-b .post h1{font-size:clamp(1.95rem,6.4vw,2.9rem);line-height:1.08;letter-spacing:-.035em;font-weight:700;margin-bottom:16px;text-wrap:balance}
.blog-b .post-meta{color:var(--ink-62);font-size:14.5px}
.blog-b .post-meta a{color:var(--ink-70)}
.blog-b .post-meta time{white-space:nowrap}
.blog-b .post-langs{color:var(--ink-62)}
.blog-b .post-langs a{color:var(--deep)}

/* ── Текст ── */
.blog-b .post-body{margin-top:28px;font-size:17px;line-height:1.7;overflow-wrap:break-word}
.blog-b .post-body h2{font-size:clamp(1.38rem,4.3vw,1.72rem);line-height:1.22;letter-spacing:-.025em;font-weight:700;margin:54px 0 14px;text-wrap:balance}
.blog-b .post-body h3{font-size:1.1rem;line-height:1.35;font-weight:700;margin:28px 0 8px}
.blog-b .post-body p{margin:0 0 18px}
.blog-b .post-body ul,.blog-b .post-body ol{margin:0 0 20px;padding-left:1.25em}
.blog-b .post-body li{margin:6px 0}
.blog-b .post-body li::marker{color:var(--blue)}
.blog-b .post-body a{color:var(--deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.blog-b .post-body blockquote{border-left-color:var(--ink-12)}
.blog-b .post-body .sources{font-size:15px;color:var(--ink-70)}
.blog-b .post-body .sources li{margin:10px 0}
.blog-b .post-body .block-title{margin:24px 0 10px;font-weight:700}
@media (min-width:761px){.blog-b .post-body{font-size:17.5px}}

/* Выделение главной фразы раздела ==…== (<strong class="hl">): сам тег strong несёт важность. */
.blog-b .post-body .hl{font-weight:650;background:rgba(54,204,255,.24);border-radius:5px;padding:1px 4px;margin:0 -4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ── Короткий ответ: тёмная карточка первым блоком текста ── */
.blog-b .post-body .answer{margin:0 0 18px;padding:22px 22px 24px;border:0;border-radius:20px;background:var(--ink);color:#fff;box-shadow:0 24px 48px -30px rgba(8,69,205,.7)}
.blog-b .post-body .answer .answer-title{margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.blog-b .post-body .answer p:last-child{margin:0;font-size:1.08em;line-height:1.6;color:#fff}
.blog-b .post-body .answer a{color:var(--cyan)}

/* ── Врезки: белая карточка, тип подписан словом в «таблетке» ── */
.blog-b .post-body .callout{margin:22px 0;padding:18px 20px;border:0;border-radius:18px;background:#fff;box-shadow:var(--card);font-size:16.5px;line-height:1.65}
.blog-b .post-body .callout p{margin:0 0 8px}
.blog-b .post-body .callout p:last-child{margin:0}
.blog-b .post-body .callout ul,.blog-b .post-body .callout ol{margin:0 0 8px}
.blog-b .post-body .callout .callout-label{display:inline-block;margin:0 0 10px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1.5;text-transform:uppercase;background:var(--pill);color:var(--deep)}
.blog-b .post-body .callout .callout-title{font-weight:700}
.blog-b .post-body .callout-note .callout-label{background:rgba(54,204,255,.18);color:var(--ink)}
.blog-b .post-body .callout-limit .callout-label{background:var(--ink-06);color:var(--ink)}
.blog-b .post-body .callout-warning{box-shadow:inset 0 0 0 1px var(--amber-line),var(--card)}
.blog-b .post-body .callout-warning .callout-label{background:var(--amber-bg);color:var(--amber-ink)}
.blog-b .post-body .callout-example{box-shadow:inset 3px 0 0 var(--blue),var(--card)}
/* Раскрытие в сравнениях: не мельче и не бледнее, чем в обычных статьях (решение Д10 о виде юр-строк у юр-чата). */
.blog-b .post-body .callout-disclosure{color:var(--ink-70);font-size:.92rem;line-height:1.6}

/* ── Оглавление ── */
.blog-b .post-body .toc{margin:18px 0 8px;padding:18px 20px;border:0;border-radius:18px;background:#fff;box-shadow:var(--card);font-size:15px}
.blog-b .post-body .toc .toc-title{margin:0 0 8px;font-weight:700}
.blog-b .post-body .toc ol{margin:0;padding-left:20px;line-height:1.6}
.blog-b .post-body .toc li{margin:4px 0}
.blog-b .post-body .toc a{color:var(--ink);text-decoration:none}
.blog-b .post-body .toc a:hover{color:var(--deep);text-decoration:underline}

/* ── Шаги: карточки с номером, связанные линией ── */
.blog-b .post-body .steps{position:relative;list-style:none;margin:20px 0 24px;padding:0;counter-reset:s}
.blog-b .post-body .steps::before{content:"";position:absolute;left:31px;top:24px;bottom:24px;width:2px;background:rgba(17,112,242,.18)}
.blog-b .post-body .steps>li{position:relative;counter-increment:s;margin:0 0 10px;padding:16px 18px 16px 62px;border-radius:18px;background:#fff;box-shadow:var(--card)}
.blog-b .post-body .steps>li::before{content:counter(s);position:absolute;left:17px;top:15px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--deep);color:#fff;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.blog-b .post-body .steps p{margin:0}
.blog-b .post-body .steps strong{font-weight:700}

/* ── Чек-лист ── */
.blog-b .post-body .checklist{margin:20px 0 22px;padding:20px;border-radius:18px;background:#fff;box-shadow:var(--card)}
.blog-b .post-body .checklist .checklist-label{display:inline-block;margin:0 0 10px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1.5;text-transform:uppercase;background:var(--pill);color:var(--deep)}
.blog-b .post-body .check{list-style:none;margin:0;padding:0}
.blog-b .post-body .check li{position:relative;margin:0;padding:8px 0 8px 36px}
.blog-b .post-body .check li::before{content:"";position:absolute;left:0;top:.62em;width:22px;height:22px;border-radius:50%;background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}

/* ── Две колонки «подходит / не подходит» (на телефоне одна под другой) ── */
.blog-b .post-body .duo{display:grid;gap:12px;margin:22px 0 20px}
.blog-b .post-body .pc{margin:22px 0;padding:18px 20px 14px;border-radius:18px;background:#fff;box-shadow:var(--card);border-top:3px solid var(--blue)}
.blog-b .post-body .duo .pc{margin:0}
.blog-b .post-body .pc-cons{border-top-color:var(--ink)}
.blog-b .post-body .pc .pc-title{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:16.5px;line-height:1.35}
.blog-b .post-body .pc-title svg{flex:none;width:26px;height:26px;padding:5px;border-radius:50%;background:var(--pill);color:var(--deep)}
.blog-b .post-body .pc-cons .pc-title svg{background:var(--ink-06);color:var(--ink)}
.blog-b .post-body .pc ul{list-style:none;margin:0;padding:0}
.blog-b .post-body .pc li{margin:0;padding:8px 0;border-top:1px solid var(--ink-06);font-size:16px;line-height:1.6}
@media (min-width:720px){.blog-b .post-body .duo{grid-template-columns:1fr 1fr}}

/* ── Цифры ── */
.blog-b .post-body .stats{list-style:none;display:grid;gap:12px;margin:26px 0 24px;padding:0}
.blog-b .post-body .stats>li{margin:0;padding:20px 20px 18px;border-radius:18px;background:#fff;box-shadow:var(--card)}
.blog-b .post-body .stat-num{display:block;margin-bottom:10px;font-size:clamp(2.2rem,8vw,2.7rem);line-height:1;font-weight:750;letter-spacing:-.04em;color:var(--deep);font-variant-numeric:tabular-nums}
.blog-b .post-body .stat-text{display:block;font-size:16px;line-height:1.55}
.blog-b .post-body .stat-src{display:block;margin-top:8px;font-size:13px;color:var(--ink-62)}
.blog-b .post-body .stat-src a{color:var(--ink-62)}
@media (min-width:560px){.blog-b .post-body .stats{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}

/* ── Термины ── */
.blog-b .post-body .terms{display:grid;gap:12px;margin:24px 0}
.blog-b .post-body .terms>div{padding:16px 18px;border-radius:16px;background:#fff;box-shadow:var(--card)}
.blog-b .post-body .terms dt{margin:0 0 4px;font-weight:700;color:var(--deep)}
.blog-b .post-body .terms dd{margin:0;font-size:16px;line-height:1.6}
@media (min-width:640px){.blog-b .post-body .terms{grid-template-columns:1fr 1fr}}

/* ── Таблицы: белая карточка, подпись сверху, первая колонка закреплена при прокрутке, тень справа «есть ещё»
   (видна, пока таблицу можно прокрутить), фокус с клавиатуры на обёртке, числа вправо табличными цифрами. ── */
.blog-b .post-body .table-wrap{margin:22px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:0;border-radius:18px;box-shadow:var(--card);font-size:15px;
  background:linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) right center/40px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%,rgba(10,15,26,.18),rgba(10,15,26,0)) right center/14px 100% no-repeat scroll,#fff}
.blog-b .post-body .table-wrap:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.blog-b .post-body .table-wrap table{width:100%;border-collapse:separate;border-spacing:0;font-size:inherit;line-height:1.5}
.blog-b .post-body .table-wrap caption{caption-side:top;text-align:left;padding:16px 18px 10px;font-weight:700;font-size:15px;color:var(--ink)}
.blog-b .post-body .table-wrap th,.blog-b .post-body .table-wrap td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ink-06)}
.blog-b .post-body .table-wrap thead th{background:var(--surface);font-size:13.5px;font-weight:700;color:var(--ink-70);white-space:normal}
.blog-b .post-body .table-wrap tbody tr:last-child th,.blog-b .post-body .table-wrap tbody tr:last-child td{border-bottom:0}
.blog-b .post-body .table-wrap tbody th{font-weight:650}
.blog-b .post-body .table-wrap tbody th[scope="row"],.blog-b .post-body .table-wrap thead th:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 var(--ink-06)}
.blog-b .post-body .table-wrap thead th:first-child{background:var(--surface);z-index:2}
.blog-b .post-body .table-wrap .num{text-align:right;font-variant-numeric:tabular-nums}
.blog-b .post-body .table-wrap td.num{white-space:nowrap}
.blog-b .post-body .table-wide table{min-width:640px}
.blog-b .post-body .marks:not(.table-wide) table{min-width:480px}
/* Отметки «да / нет / частично»: слово на языке статьи + декоративная иконка, остаток ячейки пояснением. */
.blog-b .post-body .mk{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 6px;border-radius:999px;font-weight:650;white-space:nowrap}
.blog-b .post-body .mk svg{flex:none;width:15px;height:15px}
.blog-b .post-body .mk-yes{color:var(--deep);background:var(--pill)}
.blog-b .post-body .mk-no{color:var(--ink);background:var(--ink-06)}
.blog-b .post-body .mk-part{color:var(--ink);background:rgba(54,204,255,.18)}
.blog-b .post-body .mk-note{display:block;margin-top:4px;font-size:.92em;color:var(--ink-70);white-space:normal}
/* Широкая таблица (от 4 колонок) на планшете и компьютере выходит из колонки текста (до 960 px), чтобы не прокручиваться. */
@media (min-width:700px){
  .blog-b .post-body .table-wide{width:min(960px,calc(100vw - 48px));margin-left:calc(50% - min(480px,calc(50vw - 24px)))}
}
/* Узкий телефон: поля ячеек поменьше, чтобы таблица из 2-3 колонок чаще помещалась без прокрутки. */
@media (max-width:479px){
  .blog-b .post-body .table-wrap:not(.table-wide) th,.blog-b .post-body .table-wrap:not(.table-wide) td{padding:11px 12px}
  .blog-b .post-body .table-wrap:not(.table-wide) caption{padding:14px 14px 8px}
}
/* На телефоне широкая таблица становится карточками: строка = карточка, поля подписаны data-label. Смысл таблицы
   для экранных чтецов держат явные роли ARIA, которые ставит генератор (display:block их не снимает). */
@media (max-width:639px){
  .blog-b .post-body .table-wide{position:relative}
  .blog-b .post-body .table-wide table,.blog-b .post-body .table-wide thead,.blog-b .post-body .table-wide tbody,.blog-b .post-body .table-wide tr,.blog-b .post-body .table-wide th,.blog-b .post-body .table-wide td,.blog-b .post-body .table-wide caption{display:block}
  .blog-b .post-body .table-wide table{min-width:0}
  .blog-b .post-body .table-wide thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .blog-b .post-body .table-wide tr{padding:14px 18px;border-bottom:1px solid var(--ink-06)}
  .blog-b .post-body .table-wide tbody tr:last-child{border-bottom:0}
  .blog-b .post-body .table-wide tbody th[scope="row"]{position:static;box-shadow:none;padding:0 0 8px;border:0;font-size:16px}
  .blog-b .post-body .table-wide td{padding:5px 0;border:0}
  .blog-b .post-body .table-wide td.num{text-align:left;white-space:normal}
  .blog-b .post-body .table-wide td[data-label]::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-62)}
}

/* ── После текста ── */
.blog-b .cta-box{border-radius:20px}
.blog-b .author-box{border:0;padding:18px 20px;border-radius:18px;background:#fff;box-shadow:var(--card)}
.blog-b .related .post-card{border-color:transparent;border-radius:18px;background:#fff;box-shadow:var(--card)}
.blog-b .related .post-card:hover{border-color:var(--blue)}
.blog-b .related .eyebrow{color:var(--deep)}