/* Блог «Дяди Вани» (/blog, /blog/page/N, /blog/<slug>, /blog/authors/<slug>; ТЗ 06 и 05) поверх дизайн-системы lp2.
   Подключается после lp2.css и site-header.css (vanya/partials/lp2-head.ejs, параметр extraCss; ссылка с ?v=<хеш>, BLOG_ASSETS
   в front.js — после правки нужен рестарт front.js). Токены, шрифт, кнопки, крошки, первый экран (.hero), вопросы (.faq-list),
   кнопка скачивания и кадры — из lp2.css, здесь только раскладки блога. Все правила — под .lp-blog (класс <main> страниц блога),
   классы с префиксом b-, без слова «vpn» в именах (как у lp2).
   Принципы lp2 (front-views/vanya/landings/README.md, «Визуал»): светлая система, белый первый экран и серый фон дальше, панели
   только у интерактивных элементов, одна яркая кнопка на экран, без анимаций появления и приподнимающихся карточек. Колонка
   текста статьи — до 680 px, как у статей lp2 (/for/youtube). */

/* ---------- первый экран: листинг и автор ---------- */
.lp-blog .b-hero h1 { max-width: 14em; }
.lp-blog .b-hero .lead { margin-bottom: 0; max-width: 36em; }

/* крошки: последний пункт (заголовок статьи бывает в 70 знаков) — одной строкой с многоточием, а не отдельной строкой «› …»
   на телефоне; полный текст — в разметке и в H1 сразу под крошками */
.lp-blog .crumbs li:last-child { flex: 1 1 0; min-width: 0; }
.lp-blog .crumbs li:last-child > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- карточки статей: листинг, «Похожие статьи», страница автора ----------
   Без подложки: обложка со скруглением и текст прямо на сером фоне. Ссылки — обложка (для мыши, мимо клавиатуры) и заголовок;
   имя автора — отдельная ссылка на его страницу. */
.lp-blog .b-list { padding-block: clamp(40px, 5vw, 64px) clamp(56px, 6vw, 88px); }
.lp-blog .b-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 52px) clamp(24px, 2.6vw, 36px); }
.lp-blog .b-card { margin: 0; }
.lp-blog .b-card-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: var(--line); }
.lp-blog .b-card-img img { width: 100%; height: 100%; object-fit: cover; }
.lp-blog .b-card-top { margin-top: 16px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.lp-blog .b-card-title { margin-top: 6px; font-size: 21px; line-height: 1.25; letter-spacing: -0.012em; }
.lp-blog .b-card-title a { color: var(--text); text-decoration: none; }
.lp-blog .b-card-title a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--text-3); text-decoration-thickness: 1.5px; }
.lp-blog .b-card-img:hover + .b-card-text .b-card-title a { text-decoration: underline; text-decoration-color: var(--text-3); text-decoration-thickness: 1.5px; }
.lp-blog .b-card-excerpt { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.lp-blog .b-card-by { margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.lp-blog .b-card-by a { color: var(--text); text-decoration: none; font-weight: 500; }
.lp-blog .b-card-by a:hover { text-decoration: underline; }

/* большая карточка — первая статья страницы листинга: обложка слева, текст справа, линия под ней */
.lp-blog .b-card--wide { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px clamp(32px, 4.5vw, 64px); align-items: center; padding-bottom: clamp(40px, 4.5vw, 60px); margin-bottom: clamp(40px, 4.5vw, 60px); border-bottom: 1px solid var(--line-bg); }
.lp-blog .b-card--wide .b-card-img { border-radius: 20px; }
.lp-blog .b-card--wide .b-card-top { margin-top: 0; }
.lp-blog .b-card--wide .b-card-title { margin-top: 10px; font-size: clamp(26px, 1rem + 1.15vw, 34px); line-height: 1.15; letter-spacing: -0.02em; }
.lp-blog .b-card--wide .b-card-excerpt { margin-top: 14px; font-size: 17px; }
.lp-blog .b-card--wide .b-card-by { margin-top: 18px; }

/* постраничная навигация: обычные ссылки (ТЗ 06 п. 7 и 9), текущая страница без ссылки */
.lp-blog .b-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: clamp(48px, 5vw, 64px); font-size: 16px; }
.lp-blog .b-pager ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.lp-blog .b-pager li a, .lp-blog .b-pager li span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; text-decoration: none; }
.lp-blog .b-pager li a { color: var(--text); }
.lp-blog .b-pager li a:hover { background: var(--hover); }
.lp-blog .b-pager li span { background: var(--text); color: #FFFFFF; font-weight: 600; }
.lp-blog .b-pager-step { color: var(--link); }

/* подпись над списком статей автора */
.lp-blog .b-sec-h { margin-bottom: clamp(24px, 3vw, 32px); font-size: clamp(26px, 1rem + 1.15vw, 34px); line-height: 1.15; }

/* ---------- автор ---------- */
.lp-blog .b-person { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px 32px; align-items: start; max-width: 860px; }
.lp-blog .b-person h1 { margin-bottom: 10px; font-size: clamp(34px, 1.4rem + 2vw, 52px); }
.lp-blog .b-person-role { font-size: 17px; font-weight: 500; color: var(--text-2); }
/* монограмма — слева на две строки (имя с ролью и биография), на телефоне биография уходит под неё во всю ширину */
.lp-blog .b-person > .b-ava { grid-row: 1 / span 2; }
.lp-blog .b-person-bio { grid-column: 2; font-size: clamp(17px, 0.95rem + 0.3vw, 19px); line-height: 1.6; color: var(--text-lead); max-width: 34em; }

/* монограмма: файл из tools/blog-covers.js, без файла — те же буквы разметкой; цвета — tone автора (BLOG_AUTHORS в front.js):
   red — жёлтые на красном, yellow — красные на жёлтом, graphite — белые на графитовом (те же цвета, что рисует tools/blog-covers.js) */
.lp-blog .b-ava { display: block; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.lp-blog .b-ava img { width: 100%; height: 100%; }
.lp-blog .b-ava--letters { display: grid; place-items: center; background: #FF0412; color: #FFD400; font-weight: 700; letter-spacing: -0.02em; font-size: 15px; }
.lp-blog .b-ava--yellow { background: #FFD400; color: #E8101C; }
.lp-blog .b-ava--graphite { background: #2C2C2E; color: #FFFFFF; }
.lp-blog .b-ava--s { width: 32px; height: 32px; font-size: 12px; }
.lp-blog .b-ava--m { width: 64px; height: 64px; font-size: 22px; }
.lp-blog .b-ava--l { width: 112px; height: 112px; font-size: 38px; }

/* ---------- статья ---------- */
/* белая полоса с крошками и шапкой статьи: крошки стоят вне <article>, шапка статьи — <header> внутри него */
/* flow-root: нижний отступ списка крошек (lp2.css) иначе «выпадает» из полосы, и между крошками и шапкой статьи виден серый фон */
.lp-blog .b-band { display: flow-root; background: var(--hero-bg); padding-top: 16px; }
.lp-blog .b-head { background: var(--hero-bg); padding-bottom: clamp(32px, 4vw, 52px); border-bottom: 1px solid #E8E8ED; }
.lp-blog .b-head h1 { max-width: 19em; margin-bottom: 20px; font-size: clamp(32px, 1.2rem + 2vw, 50px); line-height: 1.08; letter-spacing: -0.028em; }
.lp-blog .b-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: 15px; line-height: 1.4; color: var(--text-2); }
.lp-blog .b-meta-author { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 500; text-decoration: none; }
.lp-blog .b-meta-author:hover { color: var(--text); text-decoration: underline; }
/* «дата · время чтения · рубрика»: точки стоят перед пунктом и уезжают в отрицательный отступ, при переносе строки первая
   точка новой строки срезается контейнером (тот же приём, что у .facts в lp2.css) */
.lp-blog .b-meta-facts { overflow: hidden; }
.lp-blog .b-meta-facts > span { display: flex; flex-wrap: wrap; margin-left: -19px; }
.lp-blog .b-meta-facts > span > * { white-space: nowrap; }
.lp-blog .b-meta-facts > span > *::before { content: "·"; display: inline-block; width: 19px; text-align: center; color: var(--text-3); }

/* сетка статьи: колонка текста до 680 px и поле справа с липким оглавлением; на узком экране — одна колонка в порядке
   разметки (обложка, оглавление, текст, автор) */
.lp-blog .b-grid { display: grid; grid-template-columns: minmax(0, 680px) minmax(200px, 270px); justify-content: space-between; column-gap: clamp(40px, 6vw, 96px); align-items: start; padding-block: clamp(36px, 4.5vw, 56px) clamp(56px, 6vw, 88px); }
.lp-blog .b-grid > * { grid-column: 1; min-width: 0; }
.lp-blog .b-cover { margin: 0 0 clamp(32px, 4vw, 48px); }
.lp-blog .b-cover img { width: 100%; height: auto; border-radius: 20px; background: var(--line); }

/* оглавление: от 900 px — справа, липкое под шапкой сайта (64 px), во всю высоту статьи */
.lp-blog .b-toc { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 88px; font-size: 15px; line-height: 1.4; }
.lp-blog .b-toc summary { list-style: none; cursor: pointer; padding-bottom: 12px; font-weight: 600; color: var(--text); }
.lp-blog .b-toc summary::-webkit-details-marker { display: none; }
.lp-blog .b-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-bg); }
.lp-blog .b-toc a { display: block; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 2px solid transparent; color: var(--text-2); text-decoration: none; }
.lp-blog .b-toc a:hover { color: var(--text); border-left-color: var(--text-3); }

/* текст статьи: только H2 и H3 (ТЗ 06 п. 3.5), абзацы, списки и компоненты из blog/README.md */
.lp-blog .b-body { font-size: 18px; line-height: 1.7; }
.lp-blog .b-body > * + * { margin-top: 18px; }
.lp-blog .b-body p { max-width: 37em; }
.lp-blog .b-body .b-lead { font-size: clamp(19px, 1rem + 0.35vw, 21px); line-height: 1.6; color: var(--text-lead); }
.lp-blog .b-body h2, .lp-blog .b-body .faq h2 { margin: clamp(44px, 5vw, 60px) 0 16px; font-size: clamp(26px, 1rem + 1.1vw, 32px); line-height: 1.18; letter-spacing: -0.02em; scroll-margin-top: 88px; }
.lp-blog .b-body > h2:first-child { margin-top: 0; }
.lp-blog .b-body h3 { margin: 34px 0 10px; font-size: 21px; line-height: 1.3; scroll-margin-top: 88px; }
.lp-blog .b-body h2 + *, .lp-blog .b-body h3 + * { margin-top: 0; }
.lp-blog .b-body ul, .lp-blog .b-body ol:not([class]) { margin-bottom: 0; padding-left: 1.25em; max-width: 37em; }
.lp-blog .b-body li + li { margin-top: 8px; }
.lp-blog .b-body li::marker { color: var(--text-2); }
.lp-blog .b-body b, .lp-blog .b-body strong { font-weight: 600; }
.lp-blog .b-body .steps { margin-top: 22px; }
/* шаги в статье: сетка «цифра | заголовок и текст». У посадочных (lp2.css) цифра стоит абсолютом, а текст шага мельче и серым —
   там шаги дополняют кадр; в статье это основной текст, и с полями H3 статьи цифра повисала отдельной строкой над смещённым
   заголовком (критики блога 07.10.2026). Цифра — тем же кеглем и интерлиньяжем, что H3, поэтому стоит на его базовой линии;
   текст шага — как абзац статьи. Правило абзаца — только для прямых <p> шага: цитата .b-ui внутри шага — свой блок. */
.lp-blog .b-body .steps > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding-left: 0; }
.lp-blog .b-body .steps > li::before { position: static; grid-column: 1; grid-row: 1; font-size: 21px; line-height: 1.3; }
.lp-blog .b-body .steps > li > * { grid-column: 2; min-width: 0; }
.lp-blog .b-body .steps > li > h3 { margin: 0; }
.lp-blog .b-body .steps > li > * + * { margin-top: 8px; }
.lp-blog .b-body .steps > li > p { color: inherit; font-size: inherit; line-height: inherit; max-width: 37em; }
.lp-blog .b-body .steps > li > figure { margin: 16px 0 4px; }
.lp-blog .b-body .steps .b-ui blockquote p { color: inherit; font-size: inherit; line-height: inherit; max-width: none; }
/* вопросы (компонент lp2/faq, variant 'article') — свой раздел внутри текста */
.lp-blog .b-body .faq { margin-top: 0; }
.lp-blog .b-body .faq-list summary { font-size: 18px; }
.lp-blog .b-body .faq-a { font-size: 16.5px; }

/* врезка-совет: тонкая красная линия слева, без подложки */
.lp-blog .b-tip { margin-inline: 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--btn-bg); max-width: 37em; }
.lp-blog .b-tip p { font-size: 17px; line-height: 1.65; color: var(--text-lead); }
.lp-blog .b-tip p + p { margin-top: 10px; }

/* таблица: тонкие линии; уже 600 px — карточками (ниже, в адаптиве): прокрутка вбок прятала за краем ту колонку, ради которой
   таблица сделана («С VPN», «У Дяди Вани»), без подсказки, что она там есть (критики блога 07.10.2026). Подписи колонок для
   карточек — data-label у ячеек, их ставит сервер (blogPrepareBody в front.js) по <thead>, в статьях их писать не нужно.
   Обёртка с прокруткой осталась на случай, если строка всё же не влезет (длинное слово без переноса). */
.lp-blog .b-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lp-blog .b-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.lp-blog .b-table caption { caption-side: top; text-align: left; padding-bottom: 10px; font-size: 15px; color: var(--text-2); }
.lp-blog .b-table th, .lp-blog .b-table td { padding: 11px 14px 12px 0; border-bottom: 1px solid var(--line-bg); text-align: left; vertical-align: top; }
.lp-blog .b-table thead th { font-weight: 600; font-size: 15px; color: var(--text-2); border-bottom-color: var(--text-3); }
.lp-blog .b-table tbody th { font-weight: 600; }

/* цитата из интерфейса приложения: дословный текст окна на белой карточке (как окна приложения), подпись под ней */
.lp-blog .b-ui { margin-inline: 0; max-width: 34em; }
.lp-blog .b-ui blockquote { margin: 0; padding: 18px 22px 20px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 14px 32px -20px rgba(28, 28, 30, .28); font-size: 16px; line-height: 1.6; }
.lp-blog .b-ui figcaption { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--text-2); }

/* кадр приложения (lp.shot): окно или экран, вырезанный по интерфейсу, подпись под ним */
.lp-blog .b-shot { margin-inline: 0; max-width: 340px; }
.lp-blog .b-shot figcaption { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--text-2); }

/* автор под статьёй */
.lp-blog .b-author { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: clamp(48px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--line-bg); }
.lp-blog .b-author-name { font-size: 19px; font-weight: 600; line-height: 1.3; }
.lp-blog .b-author-name a { color: var(--text); text-decoration: none; }
.lp-blog .b-author-name a:hover { text-decoration: underline; }
.lp-blog .b-author-role { margin-top: 2px; font-size: 15px; color: var(--text-2); }
.lp-blog .b-author-bio { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--text-lead); max-width: 34em; }

/* «Похожие статьи» */
.lp-blog .b-related { padding-block: clamp(48px, 5vw, 72px); border-top: 1px solid var(--line-bg); }
.lp-blog .b-related h2 { margin-bottom: clamp(24px, 3vw, 32px); font-size: clamp(26px, 1rem + 1.15vw, 34px); line-height: 1.15; }

/* блок продукта в конце страницы: текст слева, кнопка под устройство посетителя справа (компонент lp2/download) — на сером,
   с линией сверху, без тёмной плашки */
.lp-blog .b-cta { padding-block: clamp(48px, 5vw, 72px); border-top: 1px solid var(--line-bg); }
.lp-blog .b-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(40px, 6vw, 96px); align-items: center; }
.lp-blog .b-cta h2 { margin-bottom: 12px; font-size: clamp(26px, 1rem + 1.15vw, 34px); line-height: 1.15; }
.lp-blog .b-cta-grid > div > p { font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 34em; }
.lp-blog .b-cta .cta-alt { text-align: left; }

/* ---------- адаптив ---------- */
@media (max-width: 1023px) {
	.lp-blog .b-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
	.lp-blog .b-card--wide { grid-template-columns: minmax(0, 1fr); }
	.lp-blog .b-card--wide .b-card-top { margin-top: 2px; }
	.lp-blog .b-grid { grid-template-columns: minmax(0, 1fr); }
	.lp-blog .b-grid > * { grid-column: 1; }
	/* оглавление встаёт после обложки, свёрнутым (скрипт в post.ejs закрывает его до отрисовки) */
	.lp-blog .b-toc { grid-row: auto; position: static; margin-bottom: 32px; border-top: 1px solid var(--line-bg); border-bottom: 1px solid var(--line-bg); }
	.lp-blog .b-toc summary { position: relative; padding: 14px 32px 14px 0; }
	.lp-blog .b-toc summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); }
	.lp-blog .b-toc[open] summary::after { transform: rotate(-135deg); margin-top: -1px; }
	.lp-blog .b-toc ol { margin-bottom: 16px; }
	.lp-blog .b-cta-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
	.lp-blog .b-list { padding-block: 28px 44px; }
	.lp-blog .b-cards { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.lp-blog .b-card-img, .lp-blog .b-card--wide .b-card-img { border-radius: 14px; }
	.lp-blog .b-card-top { margin-top: 14px; font-size: 13px; }
	.lp-blog .b-card-title { font-size: 19px; }
	.lp-blog .b-card--wide { padding-bottom: 36px; margin-bottom: 36px; gap: 14px; }
	.lp-blog .b-card--wide .b-card-title { font-size: 23px; }
	.lp-blog .b-card--wide .b-card-excerpt, .lp-blog .b-card-excerpt { font-size: 15.5px; }
	.lp-blog .b-pager { margin-top: 40px; font-size: 15px; }
	/* «Похожие статьи» на телефоне — строками с маленькой обложкой, без анонса: три полноразмерные карточки после статьи —
	   лишние полтора экрана прокрутки */
	.lp-blog .b-related .b-cards { gap: 22px; }
	.lp-blog .b-related .b-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; }
	.lp-blog .b-related .b-card-img { border-radius: 10px; }
	.lp-blog .b-related .b-card-top { margin-top: 0; }
	.lp-blog .b-related .b-card-title { margin-top: 4px; font-size: 17px; }
	.lp-blog .b-related .b-card-excerpt { display: none; }
	.lp-blog .b-related .b-card-by { margin-top: 6px; font-size: 13px; }

	.lp-blog .b-person { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
	.lp-blog .b-ava--l { width: 72px; height: 72px; font-size: 25px; }
	.lp-blog .b-person h1 { margin-bottom: 6px; }
	.lp-blog .b-person-role { font-size: 15px; }
	.lp-blog .b-person > .b-ava { grid-row: auto; }
	.lp-blog .b-person-bio { grid-column: 1 / -1; margin-top: 4px; font-size: 16px; }
	.lp-blog .b-sec-h { font-size: 24px; }

	.lp-blog .b-band { padding-top: 10px; }
	.lp-blog .b-head { padding-bottom: 28px; }
	.lp-blog .b-head h1 { margin-bottom: 14px; font-size: clamp(28px, 7.4vw, 32px); line-height: 1.1; }
	.lp-blog .b-meta { gap: 8px 16px; font-size: 14px; }
	.lp-blog .b-meta-facts > span { margin-left: -15px; }
	.lp-blog .b-meta-facts > span > *::before { width: 15px; }
	.lp-blog .b-grid { padding-block: 20px 44px; }
	.lp-blog .b-cover { margin-bottom: 20px; }
	.lp-blog .b-cover img { border-radius: 14px; }
	.lp-blog .b-toc { margin-bottom: 24px; }
	.lp-blog .b-body { font-size: 17px; line-height: 1.65; }
	.lp-blog .b-body > * + * { margin-top: 14px; }
	.lp-blog .b-body .b-lead { font-size: 18px; }
	.lp-blog .b-body h2, .lp-blog .b-body .faq h2 { margin: 36px 0 12px; font-size: 24px; }
	.lp-blog .b-body > h2:first-child { margin-top: 0; }
	.lp-blog .b-body h3 { margin: 26px 0 8px; font-size: 19px; }
	.lp-blog .b-body .faq-list summary { font-size: 16.5px; }
	.lp-blog .b-body .faq-a { font-size: 15px; }
	.lp-blog .b-tip { padding-left: 16px; }
	.lp-blog .b-tip p { font-size: 16px; }
	.lp-blog .b-body .steps > li { grid-template-columns: 30px minmax(0, 1fr); }
	.lp-blog .b-body .steps > li::before { font-size: 19px; }
	.lp-blog .b-table table { font-size: 15px; }
	.lp-blog .b-ui blockquote { padding: 16px 18px 18px; font-size: 15px; }
	.lp-blog .b-shot { max-width: 280px; margin-inline: auto; }
	.lp-blog .b-author { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding-top: 22px; }
	.lp-blog .b-author .b-ava--m { width: 56px; height: 56px; font-size: 19px; }
	.lp-blog .b-author-bio { font-size: 15px; }
	.lp-blog .b-related, .lp-blog .b-cta { padding-block: 36px; }
	.lp-blog .b-related h2, .lp-blog .b-cta h2 { font-size: 24px; }
	.lp-blog .b-cta-grid > div > p { font-size: 15.5px; }
	.lp-blog .b-cta .cta-alt { text-align: center; }
}

/* таблица на телефоне — карточками: строка = заголовок (th scope=row) и пары «подпись колонки — значение» (data-label у ячеек
   ставит blogPrepareBody). Шапка таблицы скрыта визуально, но остаётся для чтения с экрана. */
@media (max-width: 599px) {
	.lp-blog .b-table table { min-width: 0; }
	.lp-blog .b-table table, .lp-blog .b-table caption, .lp-blog .b-table tbody, .lp-blog .b-table tr, .lp-blog .b-table th, .lp-blog .b-table td { display: block; }
	.lp-blog .b-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
	.lp-blog .b-table tbody tr { padding: 12px 0 14px; border-bottom: 1px solid var(--line-bg); }
	.lp-blog .b-table tbody tr:first-child { border-top: 1px solid var(--text-3); }
	.lp-blog .b-table th, .lp-blog .b-table td { padding: 0; border: 0; }
	.lp-blog .b-table tbody th { font-size: 16px; line-height: 1.4; }
	.lp-blog .b-table tbody th + td, .lp-blog .b-table td + td { margin-top: 6px; }
	.lp-blog .b-table td[data-label] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; }
	.lp-blog .b-table td[data-label]::before { content: attr(data-label); color: var(--text-2); }
}