/* Tanlo — типографика документов и статей (UI-3, 2026-09-30).
   Одна копия вместо пяти inline-<style> (оферта, политика, статьи RU/UZ) и
   блока .pricing-text на /pricing. Подключается после site.css (статьи блога
   из tools/blog/build_blog.py) или home.css (старые рукописные страницы).
   UX-11: основной текст — --text-body, оглавление .toc строится из h2.
   Редизайн 22.10.2026 (промт §2): Source Sans 3, заголовки 600, ссылки claret
   (--corp-link), рамки 1 px corp-border, радиус 2 px, без теней. */

.article { max-width: 72ch; margin: 0 auto; padding: 32px var(--gutter) 56px; box-sizing: content-box; }
@media (min-width: 900px) { .article { padding: 48px var(--gutter) 72px; } }
.article h1 { font-family: var(--font-display); font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: 0; color: var(--text-strong); margin: 8px 0 20px; text-wrap: balance; }
@media (min-width: 768px) { .article h1 { font-size: 40px; line-height: 1.15; } }
.article h2 { font-family: var(--font-display); font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: 0; color: var(--text-strong); margin: 40px 0 14px; scroll-margin-top: calc(var(--header-h) + 16px); }
@media (min-width: 768px) { .article h2 { font-size: 26px; } }
.article h3 { font-family: var(--font-display); font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--text-strong); margin: 28px 0 10px; }
.article p, .article li, .article td, .article th { font-family: var(--font-body); font-size: 17px; color: var(--text-body); line-height: 1.6; }
@media (min-width: 768px) { .article p, .article li { font-size: 18px; } }
.article p { margin: 0 0 16px; }
.article li { margin: 0 0 8px; }
.article ol, .article ul { padding-left: 1.4em; margin: 0 0 16px; }
.article b, .article strong { font-weight: 600; color: var(--text-strong); }
.article a { color: var(--corp-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 120ms var(--ease-out); }
.article a:hover { color: var(--text-link-hover); }
.article a:focus-visible { outline: 2px solid var(--corp-ink-900); outline-offset: 2px; text-decoration: none; }
.article .btn { text-decoration: none; }
.article .btn-primary, .article .btn-primary:hover { color: #fff; }

/* Таблицы: рамка 1 px, шапка на corp-bg, без скруглений > 2 px. */
.article table { border-collapse: collapse; width: 100%; margin: 16px 0; background: #fff; }
.article th, .article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--corp-border); font-size: 15px; line-height: 1.45; vertical-align: top; }
.article thead th { background: var(--corp-bg); }
.article th { color: var(--text-strong); font-weight: 600; }
.article .table-wrap { overflow-x: auto; margin: 16px 0 20px; border: 1px solid var(--corp-border); border-radius: 2px; }
.article .table-wrap table { margin: 0; }
.article .table-wrap tr:last-child td { border-bottom: 0; }
.article small { font-size: 13px; color: var(--text-muted); }
.article p:has(> small:only-child) { font-size: 13px; line-height: 1.5; } /* подписи под таблицами и врезками — без «воздуха» строки 18 px */

/* Хлебные крошки и строка «Обновлено» — свои, чтобы статья не зависела от home.css. */
.article .breadcrumbs { margin: 0 0 16px; font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: var(--text-subtle); }
.article .breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.article .breadcrumbs a:hover { color: var(--corp-link); text-decoration: underline; }
.article .updated { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); margin: 0 0 8px; }

/* CTA внутри статьи — тёмная плашка как CTA-баннер сайта (§2). */
.article .cta-box { margin: 40px 0; padding: 24px; background: var(--corp-ink-900); border-radius: 2px; text-align: left; }
@media (min-width: 768px) { .article .cta-box { padding: 28px 32px; } }
.article .cta-box p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--corp-ink-200); }
.article .cta-box p b { color: #fff; }
.article .cta-box .cta-box-h { margin: 0 0 8px; font-size: 21px; line-height: 1.25; font-weight: 600; color: #fff; }
.article .cta-box .btn:focus-visible { outline-color: var(--corp-accent); }

.article .related { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--corp-border); }
.article .related h2 { margin-top: 8px; }
.article .related li { font-size: 16px; }

/* Реквизиты и placeholder'ы, которые должен заполнить владелец (UX-7) */
.article .requisites { background: var(--surface-sunken); border: 1px solid var(--corp-border); border-radius: 2px; padding: var(--card-pad); margin-top: 16px; }
.article .requisites p { margin: 4px 0; font-size: 16px; }
.article .requisites .placeholder { font-family: var(--font-mono); font-size: 14px; color: var(--state-warning-fg); background: var(--state-warning-bg); padding: 1px 6px; border-radius: 2px; }
.article .revision { display: flex; flex-wrap: wrap; gap: 8px 16px; font-family: var(--font-body); font-size: 13px; color: var(--text-muted); margin: 0 0 12px; }

/* Оглавление (UX-11) */
.article .toc { background: #fff; border: 1px solid var(--corp-border); border-radius: 2px; padding: 16px 20px; margin: 20px 0 24px; }
.article .toc-title { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 8px; }
.article .toc ol { margin: 0; padding-left: 1.3em; columns: 1; }
@media (min-width: 640px) { .article .toc ol { columns: 2; column-gap: 24px; } }
.article .toc li { font-size: 14px; margin: 0 0 4px; break-inside: avoid; }
.article .toc a { color: var(--text-body); text-decoration: none; }
.article .toc a:hover { color: var(--corp-link); text-decoration: underline; }

/* Список статей старого вида (/blog/ до редизайна; новые списки — kb.css) */
.blog-list { max-width: 76ch; margin: 0 auto; padding: 32px var(--gutter); }
.blog-list h1 { font-family: var(--font-display); font-size: var(--step-h1); line-height: 1.15; font-weight: 600; color: var(--text-strong); margin: 0 0 12px; }
.blog-list .lead { font-family: var(--font-body); font-size: var(--step-body-lg); color: var(--text-muted); line-height: 1.6; margin: 0 0 24px; }
.blog-list h2.sect { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text-strong); margin: 32px 0 12px; }
.post { display: block; background: #fff; border: 1px solid var(--corp-border); border-radius: 2px; padding: 20px; margin-bottom: 16px; text-decoration: none; transition: border-color 120ms var(--ease-out); }
.post:hover { border-color: var(--corp-ink-700); text-decoration: none; }
.post h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text-strong); margin: 0 0 6px; }
.post p { font-family: var(--font-body); font-size: 15px; color: var(--text-muted); margin: 0; line-height: 1.55; }
.post .meta { font-size: 13px; color: var(--text-subtle); margin-top: 8px; }

/* SEO-текст и FAQ на /pricing (раньше — inline-<style> в pricing.html) */
.pricing-text { max-width: 76ch; margin: 32px auto 0; }
.pricing-text h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text-strong); margin: 24px 0 12px; }
.pricing-text p { font-family: var(--font-body); font-size: var(--step-body-lg); color: var(--text-body); line-height: 1.6; margin: 0 0 16px; }
.pricing-text .seo-faq { margin-top: 16px; }
.pricing-text .seo-faq details { border-bottom: 1px solid var(--corp-border); padding: 12px 0; }
.pricing-text .seo-faq summary { font-family: var(--font-display); font-weight: 600; font-size: var(--step-body-lg); color: var(--text-strong); cursor: pointer; }
.pricing-text .seo-faq p { font-size: var(--step-body); color: var(--text-muted); margin: 8px 0 0; }

/* Страница 404 (SEO-1) */
.not-found { max-width: var(--container-narrow); margin: 0 auto; padding: var(--space-11) var(--gutter); text-align: center; }
.not-found .code { font-family: var(--num-font); font-weight: 700; font-size: clamp(56px, 10vw, 96px); line-height: 1; letter-spacing: var(--num-ls); color: var(--corp-accent); font-variant-numeric: tabular-nums; }
.not-found h1 { font-family: var(--font-display); font-size: var(--step-h1); font-weight: 600; color: var(--text-strong); margin: 16px 0 12px; }
.not-found p { font-family: var(--font-body); font-size: var(--step-body-lg); color: var(--text-muted); max-width: 52ch; margin: 0 auto 24px; }
.not-found .hero-form { background: var(--surface-card); border-color: var(--border-subtle); text-align: left; }
.not-found .hero-form .control { background: var(--bg-elevated); color: var(--text-body); border-color: var(--border-default); }
.not-found .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }

/* Блог 2.0 (2026-10-03, tools/blog/build_blog.py): лид, врезки с цифрами,
   цитаты, FAQ и источники. */
.article .lede { font-size: 19px; line-height: 1.5; color: var(--text-strong); margin: 0 0 20px; }
@media (min-width: 768px) { .article .lede { font-size: 20px; } }
.article .callout { border-left: 3px solid var(--corp-accent); background: var(--corp-bg); border-radius: 0 2px 2px 0; padding: 16px 20px; margin: 20px 0; }
.article .callout p:last-child { margin-bottom: 0; }
.article .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 20px 0; }
.article .stat { background: #fff; border: 1px solid var(--corp-border); border-radius: 2px; padding: 16px; }
.article .stat b { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--text-strong); line-height: 1.1; font-variant-numeric: tabular-nums; }
.article .stat span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.article blockquote { margin: 20px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--corp-border); color: var(--text-body); }
.article blockquote p { font-style: italic; }
.article details.faq { border-bottom: 1px solid var(--corp-border); padding: 14px 0; }
.article details.faq summary { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text-strong); cursor: pointer; transition: color 120ms var(--ease-out); }
.article details.faq summary:hover { color: var(--corp-link); }
.article details.faq summary:focus-visible { outline: 2px solid var(--corp-ink-900); outline-offset: 2px; }
.article details.faq p { margin: 8px 0 0; }
.article .sources { margin-top: 32px; }
.article .sources li, .article .sources a { font-size: 13px; color: var(--text-muted); word-break: break-word; }
.article .sources a:hover { color: var(--corp-link); }