/* fm-article-v1 — страница статьи (039) для шаблона Blog Posts. Исходник — changes/039-article/style.css (песочница),
   здесь без области html.fm-art и с классами нативных элементов шаблона (автор, справка, крошки, FAQ, источники, автор внизу). */
/* 039 — страница статьи (шаблон Blog Posts), v3: одна ось.
   Сетка 12 колонок контейнера сайта: текст — колонки 4–9, широкие блоки (короткий ответ, обложка, таблица, CTA) — 3–10,
   слева 1–2 «Поделиться» и услуги, справа 11–12 оглавление (sticky, как в спецификации). Хиро — по центру.
   Всё под (ставит script.js; ?art=off — старая страница). v1, v2 — style-v1.css, style-v2.css.
   Единицы — rem: корневой кегль сайта флюидный (13.33px на 1440, 17.9px на 834, 15.8px на 390).
   !important у grid-column / grid-row — перебить ячейки Webflow по id (#w-node-…); на сайте раскладка — в Designer. */

:root {
  --ink: #0b0b0b;
  --text: #2a2a2e;
  --mute: #8b8b93;
  --line: #e4e4e7;
  --soft: #f4f4f2;
  --acc: #3fdc8e;
  --g: 1.5rem;
  --top: 7.5rem;
  --r: .5rem; /* скругление как у превью статей в листинге (blg_view) */
  --side: 14.85rem; /* боковые колонки: основная начинается на линии копирайта в шапке (.x_g--header_clock) — 17.85rem от края экрана */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --line-soft: rgba(11, 11, 11, .14); /* полупрозрачные разделители */
  --wm: 10%; /* широкие блоки — 80% основной колонки (Ник: на 20% уже, меньше ступенька с текстом) */
}
.art-hide { display: none !important; }

/* подпись в скобках — как fm-lbl на сайте */
.art-lbl, .art-by_topic, .art-related .fm-lbl { color: var(--mute) !important; }
.art-lbl, .art-by_topic {
  display: block; color: var(--mute); font-family: var(--x_fonts--main); font-size: .75rem; font-weight: 500;
  line-height: 1.2; letter-spacing: .015em; text-transform: uppercase; margin-bottom: 1.25rem;
}

/* Подчёркивания на странице — одна линия для всех типов и размеров: 1.5px (как у ссылок шапки), отступ --ul-gap
   под строкой в долях кегля. Ход как в шапке: у ссылок-подписей и меню (крошки, автор, Share, услуги, заголовки карточек)
   линия выезжает слева на наведении и уезжает вправо; у ссылок «как Get in touch» (is-solid) и ссылок в тексте статьи
   линия есть всегда, на наведении убегает вправо и возвращается слева. Линия — фон строки, поэтому работает и в
   многострочных ссылках. */
:root { --ul: 1.5px; --ul-gap: .33em; } /* как у «Get in touch» в шапке: 0.33 кегля под строкой */
/* у мелких подписей (имя автора, крошки, Share) линия ближе к тексту */
:is(.art-by_name, .art-crumbs_a, .art-share .art-link_t, .art-bio_name) { --ul-gap: .12em; }
/* ссылки в тексте статьи: линия ближе к словам, по бокам по .12em — линия чуть выходит за край слова */
.x_article--content_rich a { --ul-gap: .08em; padding-left: .12em; padding-right: .12em; }
/* заголовки карточек — плотный интервал (1.15): линия у низа строки, как в листинге /blog, иначе заезжает на следующую строку */
.art-related .blg_ln { --ul-gap: 0em; }
.art-link { display: inline-block; color: var(--ink); text-decoration: none; font-size: 1.25rem; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.art-link_t { font-weight: 500; }
:is(.art-link_t, .art-crumbs_a, .art-by_name, .art-bio_name, .x_article--content_rich a, .art-related .blg_ln) {
  text-decoration: none; padding-bottom: var(--ul-gap);
  background: linear-gradient(currentColor, currentColor) no-repeat right 100% / 0 var(--ul);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 420ms var(--ease);
}
:is(.art-link:hover .art-link_t, .art-link:focus-visible .art-link_t, .art-crumbs_a:hover, .art-by_who:hover .art-by_name, .art-bio_name:hover) {
  background-position: left 100%; background-size: 100% var(--ul);
}
:is(.art-link.is-solid .art-link_t, .x_article--content_rich a) { background-position: left 100%; background-size: 100% var(--ul); }
:is(.art-link.is-solid:hover .art-link_t, .art-link.is-solid:focus-visible .art-link_t, .x_article--content_rich a:hover) {
  background-position: right 100%; background-size: 0 var(--ul);
}
@media (hover: hover) {
  .art-related .blg_link:hover .blg_ln { background-position: left 100%; background-size: 100% var(--ul); transition-delay: calc(var(--i, 0) * .22s); }
}

.art-progress {
  position: fixed; left: 0; top: 0; z-index: 9990; height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0); background: var(--acc); pointer-events: none;
}

/* ——— хиро по колонкам статьи: слева автор, в центре (3–10) крошки → заголовок по левому краю → тематика,
   справа даты и время чтения; автор и даты стоят по нижнему краю, на линии тематики ——— */
.x_article--hero_contain.x_u-contain {
  container-type: inline-size; --reach: calc((100cqw - 2 * var(--side)) * .1 - var(--g));
  --rail-r: calc(.2 * var(--side) - .8 * var(--reach)); /* правая колонка: на 20% уже, по правому краю контейнера */
  display: grid; grid-template-columns: var(--side) minmax(0, 1fr) var(--side); column-gap: 0; row-gap: 0; padding: 0 0 3.5rem; border-bottom: 1px solid var(--line-soft);
}
.x_article--hero_author_wrap,
.x_article--tags_wrap,
.x_article--info_wrap { display: none !important; }

.art-crumbs { grid-column: 2 !important; grid-row: 1 !important; padding-top: 0; min-width: 0; }
.art-crumbs { display: flex; align-items: center; gap: .6rem; color: var(--mute); font-size: .75rem; font-weight: 500; letter-spacing: .015em; text-transform: uppercase; line-height: 1.2; }
.art-crumbs_a { flex: none; color: var(--ink); text-decoration: none; }
.art-crumbs_sep { flex: none; }
.art-crumbs_cur { flex: 0 1 auto; min-width: 0; max-width: 30rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.x_article--hero_title.x_u-heading-3 {
  grid-column: 2 !important; grid-row: 2 !important; display: block; min-height: 0; max-width: none;
  margin: 0; padding: 2.25rem 0 0; text-align: left; font-size: 4.6rem; line-height: 1; letter-spacing: -.025em; text-wrap: balance;
}
.art-crumbs, .x_article--hero_title.x_u-heading-3 { margin-left: var(--wm); margin-right: var(--wm); }

.art-by_who {
  grid-column: 1; grid-row: 1 / 3; align-self: end; display: flex; align-items: center; gap: .9rem; min-width: 0; margin-right: calc(-1 * var(--reach));
  color: var(--ink); text-decoration: none;
}
.art-by_img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; flex: none; }
.art-by_t { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.art-by_name { align-self: flex-start; font-size: 1rem; font-weight: 500; line-height: 1.2; } /* ширина по тексту — линия только под именем */
.art-by_who .art-lbl, .art-by_who .art-by_topic { margin-bottom: .35rem; }
.art-by_who .art-by_topic { display: none; } /* только на телефоне — вместо «Written by» */
.art-by_topic_v { font-style: normal; color: inherit; } /* вся подпись серым, как остальные в скобках */
.art-by_role { font-style: normal; color: var(--mute); font-size: .875rem; line-height: 1.2; }
/* справка справа — без линий, кеглем подписи автора слева: подпись серым | значение */
.art-dates {
  grid-column: 3; grid-row: 1 / 3; align-self: end; display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; row-gap: .4rem;
  margin: 0 0 0 var(--rail-r); padding: 0; border: 0;
}
.art-dates_dt, .art-dates_dd { margin: 0; padding: 0; border: 0; font-size: .875rem; line-height: 1.25; }
.art-dates_dt { color: var(--mute); }
.art-dates_dd { color: var(--text); }

/* короткий ответ — в начале основной колонки (3–10): с него начинаются боковые колонки */
.art-tldr { margin: 0 var(--wm); padding: 2.75rem 2.75rem 3.25rem; background: var(--soft); border-radius: var(--r); }
.art-tldr .art-lbl { margin-bottom: 1.1rem; }
.art-tldr_p { margin: 0; color: var(--ink); font-size: 1.42rem; line-height: 1.5; letter-spacing: -.005em; }
.art-tldr_k { margin-top: 2.25rem; }
.art-tldr_k ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; border-top: 1px solid #dcdcd8; }
.art-tldr_k li { position: relative; padding: .85rem 0 .85rem 1.4rem; border-bottom: 1px solid #dcdcd8; color: var(--text); font-size: 1.05rem; line-height: 1.4; }
.art-tldr_k li::before { content: ""; position: absolute; left: 0; top: 1.5rem; width: .6rem; height: 1px; background: var(--ink); }
/* CTA сразу после короткого ответа — строка внизу карточки, ссылка как «Get in touch» */
.art-tldr_cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2.5rem; color: var(--ink); }
.art-tldr_cta_t { font-size: 1.1rem; line-height: 1.35; }

.x_article--hero_img {
  display: block; width: calc(100% - 2 * var(--wm)); height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: var(--g) 0 0 var(--wm);
  border-radius: var(--r); background: var(--soft);
}

/* ——— тело: слева поделиться и услуги | текст | справа оглавление ——— */
.x_article--content_wrap { padding-top: 3.5rem; }
.x_article--content_contain.x_u-contain {
  container-type: inline-size; --reach: calc((100cqw - 2 * var(--side)) * .1 - var(--g));
  --rail-r: calc(.2 * var(--side) - .8 * var(--reach)); /* правая колонка: на 20% уже, по правому краю контейнера */
  display: grid; grid-template-columns: var(--side) minmax(0, 1fr) var(--side); column-gap: 0; row-gap: 0; padding-right: 0; align-items: start;
}
.x_article--content_left {
  grid-column: 1 !important; grid-row: 1 !important; align-self: start !important; width: auto; height: auto !important; margin-right: calc(-1 * var(--reach));
  position: sticky; top: var(--top); display: flex; flex-direction: column; gap: 2.5rem;
}
.x_article--content_left + div { grid-column: 2 !important; grid-row: 1 !important; min-width: 0; container-type: inline-size; }
.art-rail { grid-column: 3; grid-row: 1; align-self: start; position: sticky; top: var(--top); margin-left: var(--rail-r); }
.x_article--content_main-img, .x_article--content_title { display: none; }

/* поле текста — 50rem по центру основной колонки; широкие блоки — на всю её ширину */
.x_article--content_left + div { --in: max(0px, (100cqw - 50rem) / 2); }
.x_article--content_rich > * { margin-left: var(--in); margin-right: var(--in); max-width: none; }
.x_article--content_rich > figure,
.x_article--content_rich > .art-table { margin-left: var(--wm); margin-right: var(--wm); }

/* оглавление справа — без линий: номер и раздел, прочитанные темнее, текущий — чёрным */
.art-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.art-toc li { counter-increment: toc; margin: 0; }
.art-toc a {
  display: grid; grid-template-columns: 2rem 1fr; padding: .5rem 0; text-decoration: none;
  color: var(--mute); font-size: .9375rem; line-height: 1.3; transition: color .2s;
}
.art-toc a::before { content: counter(toc, decimal-leading-zero); font-size: .75rem; font-weight: 500; padding-top: .15em; }
.art-toc a.is-done { color: var(--text); }
.art-toc a:hover, .art-toc a.is-on { color: var(--ink); }

/* слева: услуги кеглем пунктов меню, поделиться — одной строкой; у обоих линия на наведении, как в меню */
.art-share { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
.art-share .art-link { font-size: 1rem; }
.x_article--content_services_cms .w-dyn-items { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.x_article--content_services_cms .w-dyn-item { display: block; }
.x_article--content_services_cms .x_service--subserv_item_link.art-link { padding: 0; border: 0; white-space: normal; }
.x_article--content_services_cms .art-link_t { font-size: 1.25rem; line-height: 1.15; color: var(--ink); }
.x_article--content_services_cms .x_service--subserv_item_ico,
.x_article--content_services_cms .x_service--subserv_line_wrap { display: none; }

/* текст статьи */
.x_article--content_rich { counter-reset: h2; color: var(--text); margin-top: 5.5rem; }
.x_article--content_rich p,
.x_article--content_rich li { color: var(--text); font-size: 1.35rem; line-height: 1.62; letter-spacing: -.003em; }
.x_article--content_rich p { padding: 0; margin-top: 0; margin-bottom: 1.15em; }
.x_article--content_rich strong { color: var(--ink); font-weight: 500; }
.x_article--content_rich a { color: var(--ink); }
.x_article--content_rich h2 {
  counter-increment: h2; margin-top: 6rem; margin-bottom: 1.75rem; padding: 0; scroll-margin-top: var(--top);
  color: var(--ink); font-size: 2.85rem; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance;
}
.x_article--content_rich h2::before {
  content: counter(h2, decimal-leading-zero); display: block; margin-bottom: 1.25rem; color: var(--mute);
  font-family: var(--x_fonts--main); font-size: .875rem; font-weight: 500; letter-spacing: .02em; line-height: 1;
}
.x_article--content_rich > h2:first-child { margin-top: 0; }
.x_article--content_rich h2 strong, .x_article--content_rich h3 strong { font-weight: inherit; }
.x_article--content_rich h3 { margin-top: 2.75rem; margin-bottom: .9rem; padding: 0; color: var(--ink); font-size: 1.6rem; font-weight: 500; line-height: 1.25; letter-spacing: -.012em; }
.x_article--content_rich h2 + h3 { margin-top: 0; }
.x_article--content_rich ul,
.x_article--content_rich ol { margin-top: 0; margin-bottom: 1.6em; padding: 0; list-style: none; }
.x_article--content_rich ol { counter-reset: li; }
.x_article--content_rich li { position: relative; padding-left: 2.1rem; margin: 0 0 .55em; }
.x_article--content_rich ul > li::before { content: ""; position: absolute; left: .2rem; top: .8em; width: .85rem; height: 1px; background: var(--ink); }
.x_article--content_rich ol > li { counter-increment: li; }
.x_article--content_rich ol > li::before { content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: .3em; color: var(--mute); font-size: .8rem; font-weight: 500; letter-spacing: .02em; }
.x_article--content_rich figure { width: auto; max-width: none; margin-top: 4rem; margin-bottom: 4.25rem; padding: 0; }
.x_article--content_rich figure > div { width: 100%; }
.x_article--content_rich figure img { width: 100%; height: auto; border-radius: var(--r); display: block; }
.x_article--content_rich figcaption { margin: .9rem var(--in) 0; color: var(--mute); font-size: .875rem; text-align: left; }
/* цитата эксперта (не путать с CTA-плашкой на ai-built-product-audit) */
.x_article--content_rich blockquote:not(:has(a[href*="ai-built-product-audit"])) {
  margin-top: 3rem; margin-bottom: 3rem; padding: 0 0 0 1.75rem; border-left: 2px solid var(--acc);
  color: var(--ink); font-family: var(--x_fonts--headings); font-size: 2rem; line-height: 1.2; letter-spacing: -.015em;
}
.x_article--content_rich blockquote cite { display: block; margin-top: 1rem; font-family: var(--x_fonts--main); font-style: normal; font-size: .9375rem; color: var(--mute); }

/* таблица — на ширину широких блоков, на сером, чтобы выделялась (на сайте — Code Embed в rich text) */
.art-table { width: auto; margin-top: 3.5rem; margin-bottom: 4rem; padding: 2rem 2.25rem 1rem; background: var(--soft); border-radius: var(--r); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.art-table table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 1.1rem; line-height: 1.4; color: var(--text); }
.art-table caption { caption-side: top; text-align: left; padding-bottom: 1.25rem; color: var(--ink); font-size: .75rem; font-weight: 500; letter-spacing: .015em; text-transform: uppercase; }
.art-table caption::before { content: "[ "; }
.art-table caption::after { content: " ]"; }
.art-table th, .art-table td { padding: 1.15rem 1.25rem 1.15rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid #dcdcd8; }
.art-table tbody tr:last-child th, .art-table tbody tr:last-child td { border-bottom: 0; }
.art-table thead th { color: var(--mute); font-size: .8125rem; font-weight: 500; letter-spacing: .015em; text-transform: uppercase; border-bottom-color: var(--ink); }
.art-table tbody th { color: var(--ink); font-weight: 500; }
.art-table td:nth-child(2) { color: var(--ink); white-space: nowrap; font-weight: 500; }
.art-table td:nth-child(3) { white-space: nowrap; }

/* FAQ — поля CMS (FAQ 1–5), всегда открыты: вопрос H3, ответ под ним */
.art-faq { margin: 4.5rem var(--in) 0; }
.art-faq_title { margin: 0 0 1.75rem; color: var(--ink); font-size: 2.85rem; line-height: 1.04; letter-spacing: -.02em; }
.art-faq_list { border-top: 1px solid var(--line); }
.art-faq_item { padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.art-faq_q { margin: 0 0 .75rem; color: var(--ink); font-size: 1.45rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.art-faq_a { margin: 0; color: var(--text); font-size: 1.15rem; line-height: 1.6; }
.art-sources { margin: 3.5rem var(--in) 0; }
.art-sources_rt ul { list-style: none; margin: 0; padding: 0; counter-reset: src; border-top: 1px solid var(--line); }
.art-sources_rt li { counter-increment: src; display: grid; grid-template-columns: 2rem 1fr; padding: .9rem 0; border-bottom: 1px solid var(--line); color: var(--text); font-size: 1rem; line-height: 1.4; }
.art-sources_rt li::before { content: counter(src, decimal-leading-zero); color: var(--mute); font-size: .8rem; padding-top: .15em; }
.art-sources_rt a { color: var(--ink); }

/* после текста: CTA во всю ширину широких блоков, автор — по колонке текста */
.x_article--content_rich > :last-child { margin-bottom: 0; }
/* clearfix rich text Webflow (.w-richtext::before/::after с пробелом) добавлял по строке сверху и снизу */
.x_article--content_rich::before, .x_article--content_rich::after { content: none; }
.art-after { margin-top: 3.5rem; display: flex; flex-direction: column; gap: 5rem; }
.art-cta-box { margin: 0 var(--wm); padding: 4rem 3rem 3.75rem; background: var(--ink); color: #fff; text-align: center; border-radius: var(--r); }
.art-cta-box .art-lbl { color: rgba(255, 255, 255, .55); margin-bottom: 1.5rem; }
.art-cta-box_t { max-width: 40rem; margin: 0 auto 2.5rem; color: #fff; font-family: var(--x_fonts--headings); font-size: 2.6rem; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.art-cta {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .75rem; padding: 1.1rem 1.6rem;
  background: #fff; color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 500; line-height: 1; white-space: nowrap;
}
.art-cta::before { content: ""; position: absolute; inset: 0; background: var(--acc); transform: translateY(101%); transition: transform .35s cubic-bezier(.6, 0, .2, 1); }
.art-cta span, .art-cta > * { position: relative; }
.art-cta:hover::before { transform: translateY(0); }
/* автор — своей строкой, по сетке похожих статей (4 колонки, как карточки): слева фото, имя, роль; справа (3–4) био и ссылки */
.art-bio { padding-top: 7rem; }
.art-bio_in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.25rem; padding-top: 2.5rem; border-top: 1px solid var(--line-soft); }
.art-bio_who { grid-column: 1 / 3; display: flex; align-items: center; gap: .9rem; align-self: start; }
.art-bio_img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; flex: none; } /* как фото автора в хиро */
.art-bio_main { grid-column: 3 / 5; }
.art-bio .art-lbl { color: var(--mute); margin-bottom: .35rem; }
.art-bio_name { display: inline; color: var(--ink); font-size: 1rem; font-weight: 500; line-height: 1.2; text-decoration: none; }
.art-bio_role { display: block; color: var(--mute); font-size: .875rem; line-height: 1.2; margin-top: .15rem; }
.art-bio_t { margin: 0 0 1.25rem; max-width: 34rem; color: #0b0b0b99; font-size: 1rem; line-height: 1.5; } /* как подзаголовок «Related articles» (fm-ins_sub) */
.art-bio_links { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; }
.art-bio_links .art-link { font-size: 1rem; }

/* похожие статьи (вместо «Popular articles»): шапка и отступы — как «Insights» на главной (fm-ins_*, x_home--insights-02_contain),
   карточки — листинга /blog (blg_*) */
.art-related { padding: 10.5rem 0 7.5rem; }
.art-related .fm-ins_body > .art-link { align-self: flex-start; font-size: 1.125rem; }
/* шапка по сетке карточек: подпись слева, заголовок и подзаголовок — с левого края третьей карточки */
.art-related .fm-ins_head { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.25rem; }
.art-related .fm-ins_head > .fm-lbl { grid-column: 1 / 3; }
.art-related .fm-ins_main { grid-column: 3 / 5; }
.art-related .fm-ins_sub { max-width: 26rem; }
/* то же, что даёт листингу ассет fm-blog-v1.css (на странице статьи его нет) */
.art-related .blg_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: 3.5rem; margin: 0; padding: 0; list-style: none; }
.art-related .blg_link { display: flex; flex-direction: column; row-gap: .875rem; color: #0b0b0b; text-decoration: none; }
.art-related .blg_img { transition: transform 1.1s cubic-bezier(.22, .61, .36, 1); }
.art-related .blg_t { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 1.375rem; text-wrap: balance; padding-bottom: .2em; margin-bottom: -.2em; }
.art-related .blg_by { display: flex; }
@media (hover: hover) {
  .art-related .blg_link:hover .blg_img { transform: scale(1.06); }
}

.art-toc-m { display: none; }

/* ——— планшет: одна колонка, хиро по центру, оглавление свёрнуто под коротким ответом ——— */
@media screen and (max-width: 991px) {
  :root { --top: 6.5rem; --wm: 0%; }
  .x_article--hero_contain.x_u-contain { grid-template-columns: minmax(0, 1fr); }
  .art-crumbs, .x_article--hero_title.x_u-heading-3 { grid-column: 1 !important; }
  .art-by_who { grid-column: 1; grid-row: 4; align-self: start; margin-top: 2.25rem; padding-right: 0; margin-right: 0; }
  .art-by_img, .art-bio_img { width: 4.2rem; height: 4.2rem; } /* планшет — крупнее (Ник 21.10) */
  /* справка — в ширину: колонки «подпись над значением»; разделителя под хиро нет */
  .x_article--hero_contain.x_u-contain { padding-bottom: 0; border-bottom: 0; }
  /* справка — скромно, сразу под автором: подпись над значением, кеглем должности автора, без линий */
  .art-dates {
    grid-column: 1; grid-row: 5; margin: 1.5rem 0 0; max-width: none; padding: 1.25rem 0 0; border: 0; border-top: 1px solid var(--line-soft);
    grid-template-columns: none; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: max-content;
    column-gap: 2.25rem; row-gap: .2rem;
  }
  .art-crumbs { padding-top: 1.5rem; }
  .art-crumbs_cur { max-width: 14rem; }
  .x_article--hero_title.x_u-heading-3 { padding-top: 1.75rem; font-size: 3rem; line-height: 1.02; }
  .art-tldr { padding: 2rem 1.75rem 2.25rem; }
  .art-tldr_p { font-size: 1.15rem; }
  .art-tldr_k { margin-top: 1.75rem; }
  .art-tldr_k ul { grid-template-columns: 1fr; }
  .art-tldr_k li { font-size: 1rem; }
  .art-tldr_k li::before { top: 1.4rem; }
  .art-tldr_cta { margin-top: 2rem; }
  .art-tldr_cta_t { font-size: 1rem; }
  .art-tldr_cta .art-link { font-size: 1.125rem; }
  .x_article--content_wrap { padding-top: 3rem; }
  .x_article--content_rich { margin-top: 0; }
  .x_article--content_contain.x_u-contain { display: flex; flex-direction: column; align-items: stretch; gap: 3.5rem; }
  .x_article--content_left + div { order: 1; width: 100%; min-width: 0; container-type: normal; --in: 0px; }
  .x_article--content_left { order: 2; position: static; padding-right: 0; margin-right: 0 !important; width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: 2.5rem; }
  .art-rail { display: none; }
  .art-share { flex-direction: row; gap: .5rem 1.5rem; }
  /* Services и Share — ссылки одним кеглем, отступ от подписи одинаковый */
  .x_article--content_services_cms .art-link, .x_article--content_services_cms .art-link_t { font-size: 1rem; line-height: 1.2; }
  .x_article--content_services_cms, .x_article--content_services_cms .w-dyn-items,
  .x_article--content_services_cms .w-dyn-item, .x_article--content_services_cms .x_service--subserv_item_link,
  .x_article--content_services_cms .x_service--subserv_item_left { margin: 0 !important; padding: 0 !important; }
  .x_article--content_services_cms .x_service--subserv_item_text { font-size: 1rem; line-height: 1.2; }
  .art-toc-m { display: block; margin: 3rem 0 3rem; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .art-toc-m summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto .75rem; gap: 1rem; align-items: center; padding: 1.15rem 0; }
  .art-toc-m summary::-webkit-details-marker { display: none; }
  .art-toc-m summary .art-lbl { margin: 0; }
  .art-toc-m summary b { font-weight: 400; color: var(--mute); font-size: .875rem; }
  .art-toc-m summary i { position: relative; width: .75rem; height: .75rem; }
  .art-toc-m summary i::before, .art-toc-m summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--mute); transition: transform .25s; }
  .art-toc-m summary i::after { transform: rotate(90deg); }
  .art-toc-m[open] summary i::after { transform: rotate(0); }
  .art-toc-m ol { list-style: none; margin: 0; padding: 0 0 1.1rem; counter-reset: toc; }
  .art-toc-m li { counter-increment: toc; }
  .art-toc-m a { display: grid; grid-template-columns: 2rem 1fr; padding: .5rem 0; color: var(--text); text-decoration: none; font-size: .9375rem; line-height: 1.3; }
  .art-toc-m a::before { content: counter(toc, decimal-leading-zero); color: var(--mute); font-size: .75rem; padding-top: .15em; }
  .x_article--content_rich p, .x_article--content_rich li { font-size: 1.05rem; line-height: 1.6; }
  .x_article--content_rich h2 { font-size: 2.1rem; margin-top: 4rem; }
  .x_article--content_rich h2::before { font-size: .75rem; margin-bottom: 1rem; }
  .x_article--content_rich h3 { font-size: 1.25rem; margin-top: 2.25rem; }
  .x_article--content_rich figure { margin-top: 2.75rem; margin-bottom: 3rem; }
  .art-table table { font-size: .9375rem; }
  .art-faq_item { padding: 1.25rem 0; }
  .art-faq_q { font-size: 1.15rem; }
  .art-faq_a { font-size: 1.05rem; }
  .art-faq_title { font-size: 2.1rem; }
  .art-after { margin-top: 4rem; gap: 3.5rem; }
  .art-cta-box { padding: 2.75rem 2rem 2.5rem; }
  .art-cta-box_t { font-size: 1.75rem; margin-bottom: 1.75rem; }
  .art-related { padding: 6rem 0; }
  .art-related .blg_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-related .fm-ins_head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-related .fm-ins_head > .fm-lbl { grid-column: 1; }
  .art-related .fm-ins_main { grid-column: 2; }
  .art-bio { padding-top: 5rem; }
  .art-bio_in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-bio_who { grid-column: 1; }
  .art-bio_main { grid-column: 2; }
}

/* ——— телефон ——— */
@media screen and (max-width: 767px) {
  .art-crumbs_cur { max-width: 9rem; }
  .art-by_img, .art-bio_img { width: 4.2rem; height: 4.2rem; } /* телефон — как на планшете */
  /* телефон: справка компактнее и ближе к короткому ответу */
  /* телефон: у автора вместо «Written by» — «Topic: …», справка — три колонки (дата, обновление, время чтения) */
  .art-by_who .art-lbl:not(.art-by_topic) { display: none; }
  .art-by_who .art-by_topic { display: block; }
  .art-dates_dt:first-of-type, .art-dates_dd:first-of-type, .art-dates > :nth-child(-n+2) { display: none; }
  .art-dates { grid-template-rows: auto auto; grid-auto-columns: minmax(0, 1fr); column-gap: 1rem; row-gap: .15rem; margin-top: 1.1rem; padding-top: .9rem; }
  .art-dates_dt, .art-dates_dd { font-size: .8125rem; }
  .x_article--content_wrap { padding-top: 1.75rem; }
  /* сверху меньше воздуха, крошки плотнее */
  .art-crumbs { padding-top: 0 !important; }
  .art-crumbs { gap: .35rem; }
  .x_article--content_left { grid-template-columns: minmax(0, 1fr); }
  .x_article--hero_title.x_u-heading-3 { font-size: 2.35rem; line-height: 1.04; padding-top: 1.25rem; }
  .art-tldr { padding: 1.6rem 1.25rem 1.9rem; }
  .art-tldr_p { font-size: 1rem; line-height: 1.5; }
  .art-tldr_k li { font-size: .9375rem; padding: .7rem 0 .7rem 1.25rem; }
  .art-tldr_k li::before { top: 1.3rem; }
  .art-tldr_cta_t { font-size: .9375rem; }
  .art-tldr_cta .art-link { font-size: 1rem; }
  .art-tldr_cta { flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 1.75rem; }
  .x_article--hero_img { margin-top: 1rem; }
  .x_article--content_rich p, .x_article--content_rich li { font-size: 1rem; line-height: 1.6; }
  .x_article--content_rich h2 { font-size: 1.75rem; margin-top: 3.25rem; }
  .x_article--content_rich h3 { font-size: 1.125rem; }
  .x_article--content_rich li { padding-left: 1.6rem; }
  .x_article--content_rich ul > li::before { width: .7rem; left: 0; }
  .art-faq_q { font-size: 1.0625rem; }
  .art-faq_a { font-size: 1rem; }
  .art-faq_title { font-size: 1.75rem; }
  .art-table table { font-size: .875rem; }
  .art-cta-box { padding: 2.25rem 1.25rem 2rem; }
  .art-after { margin-top: 2.25rem; }
  .x_article--content_contain.x_u-contain { gap: 2.25rem; }
  .x_article--content_left { row-gap: 1.5rem; }
  .art-bio { padding-top: 3rem; }
  .art-cta-box_t { font-size: 1.55rem; }
  .art-bio_in { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
  .art-bio_who, .art-bio_main { grid-column: 1; }
  /* телефон — строками, как листинг /blog по умолчанию: превью 7.5rem слева */
  .art-related .blg_grid { grid-template-columns: minmax(0, 1fr); row-gap: .875rem; }
  .art-related .blg_link { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1rem; row-gap: .375rem; align-items: start; }
  .art-related .blg_view { grid-row: 1 / 3; width: 7.5rem; height: 7.5rem; aspect-ratio: 1 / 1; margin: 0; }
  .art-related .blg_meta { grid-column: 2; margin: 0; font-size: .6875rem; }
  .art-related .blg_t { grid-column: 2; margin: 0; font-size: 1rem; line-height: 1.25; }
  .art-related .blg_by { display: none; }
  .art-related .fm-ins_body > .art-link { align-self: center; }
}

/* Нативная разметка Webflow (21.10): тексты — div-блоки и строки, в песочнице были span — держим их в строку */
.art-by_topic > *, .art-by_role > *, .art-bio_role > *, .art-bio_name > *, .art-link > .art-link_t, .art-cta > * { display: inline; }
.art-tldr_cta_t { display: block; }
.art-by_role { white-space: nowrap; }

/* v4 (21.10, правки Ника по /blog/lovable-vs-cursor-production) */
/* вступление (Announcement) повторяет первый абзац — короткий ответ уже в TL;DR */
.x_article--content_intro { display: none !important; }
/* Webflow: .w-richtext p/h2 max-width 566px и figure.w-richtext-align-fullwidth width 100% — сильнее наших правил */
.x_article--content_rich.w-richtext > * { max-width: none; }
.x_article--content_rich.w-richtext > figure[class] { width: auto; max-width: none; margin: 3rem var(--wm) 2.5rem; }
.x_article--content_rich.w-richtext > figure[class] > div { display: block; padding-bottom: 0; line-height: 0; }
/* заголовки в тексте мельче */
.x_article--content_rich.w-richtext h2 { font-size: 1.9rem; line-height: 1.12; margin-top: 4rem; margin-bottom: 1.1rem; }
.x_article--content_rich.w-richtext h3 { font-size: 1.3rem; line-height: 1.3; margin-top: 2.25rem; margin-bottom: .75rem; }
/* оглавление: первые 8 пунктов + «Show all» */
.art-toc:not(.is-all) .art-toc_x { display: none; }
.art-toc_more { margin-top: 1rem; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; text-align: left; }
.art-rail { max-height: calc(100vh - var(--top) - 2rem); overflow-y: auto; scrollbar-width: none; }
.art-rail::-webkit-scrollbar { display: none; }
/* источники — серая карточка, как короткий ответ, сразу над CTA */
.art-after .art-sources { margin: 0 var(--wm) -3.75rem; padding: 2.25rem 2.75rem 2.5rem; background: var(--soft); border-radius: var(--r); }
.art-sources .art-lbl { margin-bottom: 1rem; }
.art-sources_rt ul { border-top: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
.art-sources_rt li { border-bottom: 0; padding: .4rem 0; font-size: .95rem; }
@media (max-width: 991px) {
  .x_article--content_rich.w-richtext h2 { font-size: 1.5rem; margin-top: 3.25rem; }
  .x_article--content_rich.w-richtext h3 { font-size: 1.125rem; }
  .x_article--content_rich.w-richtext > figure[class] { margin: 2.5rem 0 2rem; }
  .art-after .art-sources { margin-bottom: -2.5rem; padding: 2rem 1.75rem; }
  .art-sources_rt ul { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .x_article--content_rich.w-richtext h2 { font-size: 1.375rem; margin-top: 2.75rem; }
  .x_article--content_rich.w-richtext h3 { font-size: 1.0625rem; }
  .x_article--content_rich.w-richtext > figure[class] { margin: 2rem 0 1.75rem; }
  .art-after .art-sources { padding: 1.5rem 1.25rem; }
}