/* Профиль «article»: перенесённые гайды (08/10/2026, решение Владимира). Описание компонентов: DESIGN.md, раздел «Профиль article и компоненты статьи».
   Подключается только страницам профиля (build.py css_order), остальные страницы этот файл не получают.
   Только токены tokens.css; свои переменные --f-mono и --art-measure объявлены здесь, tokens.css не правится. */

.art-page, .art, .cmd, .lb {
  --f-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, "Manrope";
  --art-measure: 70ch;
}

/* ---------- первый экран: крошки, метка, h1 в одну колонку ---------- */
.hero--art .hero__grid { grid-template-columns: minmax(0, 1fr); }
.hero--art .hero__text { max-width: 60rem; }

/* ---------- первый экран: шар и строка квиза в правой колонке (10/10/2026, по образцу .quiz--hero в home.css) ----------
   Сам hero и есть #quiz: движок дописывает .quiz-stage в конец .hero__grid, голосовой шар встаёт перед ним. Файл подключают только
   страницы профиля article (build.py css_order). Размер и подпись шара (.vox-orb, .vox-state) берёт общий voice.css, как на главной. */
.hero--art .vox { padding-inline: 0; margin-bottom: var(--s-6); }
.hero--art .quiz-stage { width: 100%; max-width: 640px; margin-inline: auto; }
.hero--art .quiz-hints, .hero--art .quiz-stage > .quiz-hint { color: var(--c-ink-2); opacity: 1; }
.hero--art .vox-me, .hero--art .vox-time, .hero--art .vox-end { color: var(--c-ink-2); }
/* при шаре первый вопрос над строкой скрыт (в voice.css то же правило висит на .quiz, а у hero гайда этого класса нет) */
.hero--art:has(.vox) .quiz-thread > .quiz-q:first-child { display: none; }
.hero--art:has(.vox) .quiz-thread:has(> .quiz-q:first-child) { min-height: 0; margin-bottom: 0; }
.hero--art:has(.vox) .quiz-thread:has(> .quiz-q:first-child) > .quiz-hint { margin-bottom: var(--s-2); }
/* Резерв места под шар и строку квиза (10/10/2026, CLS): скрипты достраивают .vox (voice.js) и .quiz-stage (quiz.js) позже, поэтому раскладка
   hero--art собрана заранее по #quiz, а пустые места держат ::before (шар и подпись, только при data-voice-api) и ::after (строка).
   Высоты равны финальным: шар по тем же clamp, что в voice.css, подпись в две строки, строка 60 / 56 (телефон). Настоящие блоки встают на место заглушек. */
#quiz.hero--art { --orb: min(46vw, clamp(112px, 24svh, 190px)); }
@media (scripting: enabled) {
  #quiz.hero--art:not(.quiz--js) .hero__grid:not(:has(> .quiz-stage))::after { content: ""; display: block; height: calc(var(--s-7) + var(--s-3)); order: 3; }
  /* без голоса над строкой остаётся вопрос (лента): min-height 5.5rem как в quiz.css, отступ 16 */
  #quiz.hero--art:not([data-voice-api]):not(.quiz--js) .hero__grid:not(:has(> .quiz-stage))::after { height: calc(var(--s-7) + var(--s-3) + var(--s-4) + 5.5rem); }
  #quiz.hero--art[data-voice-api] .hero__grid:not(:has(> .vox))::before {
    content: ""; display: block; order: 2; margin-bottom: var(--s-6);
    height: calc(var(--orb) + var(--s-3) + var(--s-2) + var(--ty-lead) * var(--ty-body-lh));
  }
}
@media (min-width: 960px) {
  #quiz.hero--art { --orb: clamp(160px, 34svh, 300px); }
  #quiz.hero--art .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-rows: auto auto; row-gap: 0; align-items: center; }
  #quiz.hero--art .hero__grid::before, #quiz.hero--art .hero__grid::after { grid-column: 2; }
  #quiz.hero--art[data-voice-api] .hero__grid:not(:has(> .vox))::before { grid-row: 1; align-self: end; height: calc(var(--orb) + var(--s-3) + var(--s-2) + 2 * var(--ty-lead) * var(--ty-body-lh)); }
  #quiz.hero--art .hero__grid:not(:has(> .quiz-stage))::after { grid-row: 2; align-self: start; }
  .hero--art .hero__grid > .hero__text { grid-column: 1; grid-row: 1 / span 2; }
  .hero--art .hero__grid > .vox { grid-column: 2; grid-row: 1; align-self: end; }
  .hero--art .hero__grid > .quiz-stage { grid-column: 2; grid-row: 2; align-self: start; max-width: none; }
  /* голос выключен (нет data-voice-api): строка квиза встаёт по центру правой колонки */
  #quiz.hero--art:not([data-voice-api]) .hero__grid:not(:has(.vox)) > .quiz-stage { grid-row: 1 / span 2; align-self: center; }
  #quiz.hero--art:not([data-voice-api]) .hero__grid:not(:has(> .quiz-stage))::after { grid-row: 1 / span 2; align-self: center; }
  /* итог квиза: правая колонка не нужна, результат идёт под текстом на всю ширину */
  #quiz.hero--art .hero__grid:has(.quiz-out) { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
  #quiz.hero--art .hero__grid:has(.quiz-out) > * { grid-column: 1; grid-row: auto; }
  .hero--art .quiz-out { max-width: 720px; margin-inline: auto; }
}
/* Телефон: под текстом hero шар слева, подпись справа в одной строке, строка квиза ниже на всю ширину (панель .vox раскладывается в сетку hero) */
@media (max-width: 639px) {
  #quiz.hero--art { --orb: clamp(112px, 14svh, 150px); }
  #quiz.hero--art .hero__grid { grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--s-4); }
  .hero--art .hero__grid > .hero__text, .hero--art .hero__grid > .quiz-stage { grid-column: 1 / -1; }
  #quiz.hero--art .hero__grid::before, #quiz.hero--art .hero__grid::after { grid-column: 1 / -1; }
  #quiz.hero--art[data-voice-api] .hero__grid:not(:has(> .vox))::before { margin-bottom: 0; height: calc(var(--orb) + var(--s-5)); }
  #quiz.hero--art:not(.quiz--js) .hero__grid:not(:has(> .quiz-stage))::after { margin-top: var(--s-6); height: calc(var(--s-7) + var(--s-2)); }
  #quiz.hero--art:not([data-voice-api]):not(.quiz--js) .hero__grid:not(:has(> .quiz-stage))::after { height: calc(var(--s-7) + var(--s-2) + var(--s-4) + var(--ty-lead) * var(--ty-h4-lh)); }
  .hero--art .vox:not([hidden]) { display: contents; }
  .hero--art .vox > * { order: 2; grid-column: 1 / -1; justify-self: center; margin-top: var(--s-2); text-align: center; }
  .hero--art .vox > .vox-orb { grid-column: 1; justify-self: start; margin: var(--s-5) 0 0; width: var(--orb); }
  .hero--art .vox > .vox-state { grid-column: 2; justify-self: start; align-self: center; margin-top: var(--s-5); text-align: left; }
  .hero--art .hero__grid > .quiz-stage { order: 3; margin-top: var(--s-6); }
  .hero--art .quiz-thread { min-height: 0; }
}

/* ---------- читаемая колонка: оглавление слева, текст справа ---------- */
.art { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.art-body { min-width: 0; }
.art-body :is(p, ul, ol) { max-width: 92ch; }
@media (min-width: 960px) {
  .art { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--s-8); }
  /* оглавление выше окна прокручивается само (аудит 15/10/2026, п. 3) */
  .art-toc { position: sticky; top: calc(var(--header-h) + var(--s-5)); max-height: calc(100svh - var(--header-h) - var(--s-7)); overflow-y: auto; overscroll-behavior: contain; }
}
/* гайд без оглавления (vertex-gemini): текст на всю колонку, а не в узкую колонку оглавления */
@media (min-width: 960px) {
  .art > .art-body:only-child { grid-column: 1 / -1; }
}

/* ---------- оглавление по якорям ---------- */
.art-toc { --toc-bg: color-mix(in oklab, var(--card-6), #fff 50%); padding: var(--pad-m); border-radius: var(--r-card); background: var(--toc-bg); }
/* подсказка «список ниже, прокрутите»: тень у нижнего края, пока есть что прокручивать. Слой local едет с содержимым и в конце списка
   закрывает тень цветом фона, слой scroll стоит на месте. Без JS и keyframes; у короткого списка тени нет.
   Работает для любого прокручиваемого оглавления: статьи, курс (.course-toc внутри панели), модули и уроки (.course-panel), ЛК (lk-learn.css) */
@media (min-width: 960px) {
  .art-toc, .course-toc {
    background:
      linear-gradient(to top, var(--toc-bg) 45%, transparent) 0 100% / 100% var(--s-7) no-repeat local,
      radial-gradient(farthest-side at 50% 100%, rgba(42, 38, 35, 0.22), transparent) 0 100% / 100% var(--s-4) no-repeat scroll,
      var(--toc-bg);
  }
  .course-toc { background-color: transparent; }
}
.art-toc__title { margin-bottom: var(--s-2); font-size: var(--ty-small); line-height: var(--ty-small-lh); letter-spacing: 0.03em; color: var(--c-ink-2); }
.art-toc__list { display: grid; gap: var(--s-2); }
/* каждый пункт оглавления отдельным блоком (Владимир, 09/10/2026) */
.art-toc__list a { display: flex; align-items: center; min-height: 44px; padding: var(--s-2) var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-inner); background: rgba(255, 255, 255, 0.55); color: var(--c-ink); text-decoration: none; line-height: var(--ty-body-lh); transition: background-color var(--t-fast), border-color var(--t-fast); }
.art-toc__list a:hover { background: #fff; border-color: rgba(42, 38, 35, 0.28); color: var(--c-link); }

/* ---------- текст статьи ---------- */
/* пояснение под сеткой карточек или строк (site-article: /brief/, /about/) не прилипает к сетке (аудит 15/10/2026, п. 5) */
:is(.bigcards, .rows) + .art-prose { margin-top: var(--s-5); }
.art-prose :is(p, ul, ol, dl, figure, blockquote, .cmd, .art-callout, .art-box, .art-meta, .art-ref, .art-table, .rows, .art-done) { margin-top: var(--ty-gap-p); }
.art-prose .art-part, .art-prose .art-intro + .art-part { margin-top: var(--s-7); }
.art-prose .art-part__body { margin-top: var(--ty-gap-h3-text); }
.art-prose h3 { margin-top: var(--ty-gap-h3-before); }
.art-prose h4 { margin-top: var(--ty-gap-h4-before); }
.art-prose h3 + :is(p, ul, ol, .cmd, figure), .art-prose h4 + :is(p, ul, ol, .cmd, figure) { margin-top: var(--ty-gap-h3-text); }
.art-prose :is(.art-intro, .art-part__body, .art-box, .art-callout, .art-ref, .art-table td, .art-table th, li, .art-meta > div) > :first-child,
.art-prose > :first-child { margin-top: 0; }
.art-prose h2, .art-prose h3 { text-wrap: balance; }
.art-prose p, .art-prose li, .art-prose h2, .art-prose h3, .art-prose h4 { overflow-wrap: anywhere; }
.art-prose ul { display: grid; gap: var(--ty-gap-li-m); }
.art-prose ul > li { position: relative; padding-left: var(--s-5); }
.art-prose ul > li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 8px; height: 1px; background: var(--c-ink); }
.art-prose ol { display: grid; gap: var(--ty-gap-li-m); counter-reset: art-n; }
.art-prose ol > li { position: relative; padding-left: var(--s-6); counter-increment: art-n; }
.art-prose ol > li::before { content: counter(art-n) "."; position: absolute; left: 0; top: 0; font-weight: var(--ty-fw-semi); color: var(--c-ink-2); }
.art-prose li > ul, .art-prose li > ol, .art-prose li > p + p { margin-top: var(--s-2); }
.art-prose code, .art-prose kbd {
  font-family: var(--f-mono); font-size: var(--ty-small); line-height: var(--ty-small-lh);
  padding: 0 var(--s-1); border-radius: var(--r-pill); background: color-mix(in oklab, var(--card-6), #fff 40%);
  overflow-wrap: anywhere;
}
.art-prose pre code { padding: 0; border-radius: 0; background: none; }
.art-prose a { overflow-wrap: anywhere; }
/* ссылка-строка 44 px: inline-block с отступом (44 - строка) / 2, тире на уровне первой строки и при переносе (аудит 15/10/2026, п. 10) */
.art-prose .art-links a, .art-part__body .art-links a { display: inline-block; min-height: 44px; padding-block: calc((var(--btn-h-sm) - 1lh) / 2); }
.art-prose .art-links > li::before { top: calc(var(--btn-h-sm) / 2); }

/* ---------- врезки ---------- */
.art-callout { --bg: var(--card-6); padding: var(--inset-pad); border-radius: var(--r-inner); background: color-mix(in oklab, var(--bg), #fff 45%); }
.art-callout--warn { --bg: var(--card-3); }
.art-callout--ok { --bg: var(--card-2); }
.art-callout--tip { --bg: var(--card-5); }
.art-callout > * + * { margin-top: var(--s-3); }
.art-callout ul, .art-callout ol { margin-top: var(--s-3); }

/* ---------- плашки: формулы, чек-листы, «что может пойти не так» ---------- */
.art-box { --bg: var(--card-1); padding: var(--pad-m); border-radius: var(--r-card); background: color-mix(in oklab, var(--bg), #fff 40%); }
.art-box--ok { --bg: var(--card-2); }
.art-box--soft { --bg: var(--card-6); }
.art-box > * + * { margin-top: var(--ty-gap-p); }
.art-box > h2, .art-box > h3 { margin-top: 0; }
.art-box > h2 + *, .art-box > h3 + * { margin-top: var(--ty-gap-h3-text); }
.art-box h3 { margin-top: var(--ty-gap-h3-before); }

/* ---------- строка «Цель, Нужно» ---------- */
.art-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-grid); }
.art-meta > div { padding: var(--inset-pad); border-radius: var(--r-inner); background: color-mix(in oklab, var(--card-6), #fff 45%); }
@media (min-width: 640px) { .art-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- ссылка-карточка на внешний сервис ---------- */
.art-ref { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-4); padding: var(--pad-m); border-radius: var(--r-card);
  background: color-mix(in oklab, var(--card-2), #fff 40%); color: var(--c-ink); text-decoration: none; }
.art-ref:hover { background: color-mix(in oklab, var(--card-2), #fff 20%); color: var(--c-ink); }
.art-ref__title { font-size: var(--ty-h4); line-height: var(--ty-h4-lh); font-weight: var(--ty-h4-fw); }
.art-ref__note { grid-column: 1; color: var(--c-ink-2); }
.art-ref__tag { grid-column: 1; font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-3); }
.art-ref__go { grid-column: 2; grid-row: 1 / span 3; font-size: var(--ty-icon); line-height: var(--ty-icon-lh); }

/* ---------- таблица ---------- */
.art-table { overflow-x: auto; border-radius: var(--r-inner); border: 1px solid var(--c-line); }
.art-table table { width: 100%; border-collapse: collapse; font-size: var(--ty-small); line-height: var(--ty-small-lh); }
.art-table th, .art-table td { padding: var(--s-2) var(--s-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.art-table th { font-weight: var(--ty-fw-semi); background: color-mix(in oklab, var(--card-6), #fff 50%); }
/* таблица со стопкой на телефоне (vertex-gemini): ячейка = блок с подписью из data-label, строки разной длины не дают пустот в соседях */
.art-table--stack code { display: inline-block; vertical-align: top; max-width: 100%; }
@media (max-width: 599px) {
  .art-table--stack :is(table, tbody, tr, td) { display: block; }
  .art-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .art-table--stack tr + tr { border-top: 1px solid var(--c-line); }
  .art-table--stack td { border-bottom: 0; padding-block: var(--s-1); }
  .art-table--stack td::before { content: attr(data-label); display: block; font-weight: var(--ty-fw-semi); color: var(--c-ink-2); }
}

/* ---------- блок команды или промпта ---------- */
.cmd { border-radius: var(--r-inner); border: 1px solid var(--c-line); background: color-mix(in oklab, var(--card-6), #fff 55%); overflow: hidden; }
.cmd__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-bottom: 1px solid var(--c-line); }
.cmd__tag { min-width: 0; font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2); overflow-wrap: anywhere; }
.cmd__copy { flex: none; min-height: var(--btn-h-sm); padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-surface);
  color: var(--c-ink); font-size: var(--ty-small); line-height: var(--ty-small-lh); font-weight: var(--ty-fw-semi); cursor: pointer; }
.cmd__copy:hover { background: var(--c-bg-2); }
.cmd__copy.is-done { background: var(--card-2); }
.cmd pre { margin: 0; padding: var(--s-4); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; font-family: var(--f-mono); font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink); }
.cmd pre code { font: inherit; }

/* ---------- шаги ---------- */
.steps { display: grid; gap: var(--s-6); counter-reset: art-step; }
.art-prose .steps > li { position: relative; padding-left: var(--s-7); counter-increment: art-step; }
.art-prose .steps > li::before { content: counter(art-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: var(--s-6); height: var(--s-6);
  border-radius: var(--r-pill); background: var(--card-1); font-weight: var(--ty-fw-semi); color: var(--c-ink); }
.steps > li > * + * { margin-top: var(--ty-gap-p); }

/* ---------- скриншот с подписью и лайтбоксом ---------- */
.shot { max-width: 100%; }
.shot__link { display: block; overflow: hidden; border-radius: var(--r-inner); border: 1px solid var(--c-line); background: var(--c-surface); cursor: zoom-in; }
.shot__link img { width: 100%; height: auto; }
.shot__cap { margin-top: var(--s-2); font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-3); }

.lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; align-content: center; gap: var(--s-3); padding: var(--s-5);
  background: color-mix(in oklab, var(--c-ink), transparent 12%); cursor: zoom-out; }
.lb img { max-width: 100%; max-height: 80vh; width: auto; height: auto; border-radius: var(--r-inner); background: var(--c-surface); }
.lb__cap { max-width: 60rem; text-align: center; font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-accent-ink); }
.lb__close { position: absolute; top: var(--s-3); right: var(--s-3); width: var(--btn-h-sm); height: var(--btn-h-sm); border-radius: var(--r-pill); border: 0;
  background: var(--c-surface); color: var(--c-ink); font-size: var(--ty-icon); line-height: var(--ty-icon-lh); cursor: pointer; }

/* ---------- хаб гайдов: карточки каталога (bigcards--learn), метка темы внизу карточки ---------- */
.bigcards--learn .bigcard__foot { margin-top: auto; }
/* Обложки карточек гайдов (16/10/2026, решение Владимира): 16:9 над заголовком, webp 1280x720, lazy. */
.bigcard__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: var(--s-4); border-radius: var(--r-inner); background: var(--c-surface); }
.bigcard__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bigcard__kicker { min-width: 0; font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2); }
/* Хаб гайдов, 2 колонки (ниже 1200): метка темы идёт сразу за текстом, пустота уходит под карточку, а не в середину панели (qa_layout inner-void).
   FAQ хаба при split 0.8/1.2 (960-1199) узкий: «боль» и «решение» ставим стопкой, без пустого низа короткого блока (void-uneven). */
@media (max-width: 1199px) {
  body[data-block="guides"] .bigcards--learn .bigcard__foot { margin-top: var(--s-5); }
}
/* С обложками (16/10/2026) карточки ряда выше и разница текста уходила пустым низом (void-uneven 58 px на 1024): с 960 строки карточки
   (обложка, заголовок, текст, метка) на общих линиях через subgrid, как каталог /cases/; метка темы на нижней линии ряда. */
@media (min-width: 960px) {
  body[data-block="guides"] #catalog .bigcards--learn > .bigcard { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  body[data-block="guides"] #catalog .bigcards--learn .bigcard__foot { align-self: end; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  body[data-block="guides"] .acc--faq .acc__grid { display: grid; grid-template-columns: 1fr; }
}

/* ---------- отметка «Я сделал» ---------- */
.art-done { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.art-done .btn.is-done { background: var(--card-2); }

/* ---------- метка над заголовком раздела и ссылка-карточка с меткой сверху (перенос vertex-gemini, 08/10/2026) ---------- */
/* метка лежит в заголовке для порядка чтения, но рисуется над ним поверх отступа: высота строк заголовка остаётся честной (qa_responsive heading-letter-wrap) */
.art-prose h2:has(> .art-eyebrow) { position: relative; padding-top: calc(var(--ty-small) * var(--ty-small-lh) + var(--ty-gap-eyebrow)); }
.art-eyebrow { position: absolute; top: 0; left: 0; right: 0; font-size: var(--ty-small); line-height: var(--ty-small-lh); font-weight: var(--ty-eyebrow-fw);
  letter-spacing: var(--ty-eyebrow-ls); color: var(--c-ink-2); }
.art-ref--lead .art-ref__tag { grid-row: 1; }
.art-ref--lead .art-ref__title { grid-column: 1; grid-row: 2; }
.art-ref--lead .art-ref__note { grid-row: 3; }
.art-ref--lead::after { content: "\2192"; grid-column: 2; grid-row: 1 / span 3; font-size: var(--ty-icon); line-height: var(--ty-icon-lh); }
/* строка-ссылка и курсив со ссылкой (перенос voice-input-free, 08/10/2026): цель касания не меньше 44 px */
.art-prose .art-link-line a { display: inline-flex; align-items: center; min-height: var(--btn-h-sm); }
.art-prose .art-em { font-style: italic; }
/* жирный со ссылкой внутри (перенос telegram-api-kommenty, 08/10/2026): span вместо strong, ссылка считается строчной */
.art-prose .art-strong { font-weight: var(--ty-fw-bold); }

/* ---------- «было / стало» с суммами (1500k-budget-compare, 08/10/2026): три колонки, на телефоне стопкой ---------- */
.art-split { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-4); align-items: center; margin-top: var(--ty-gap-p); }
.art-split__col { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--inset-pad); border-radius: var(--r-card); }
.art-split__col--before { background: color-mix(in oklab, var(--card-4), #fff 40%); }
.art-split__col--after { background: color-mix(in oklab, var(--card-2), #fff 40%); }
.art-split__label { font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2); }
.art-split__amount { font-size: var(--ty-num-m); line-height: var(--ty-num-lh); font-weight: var(--ty-price-fw); letter-spacing: var(--ty-num-m-ls); color: var(--c-ink); }
.art-split__col--before .art-split__amount { color: var(--c-accent); }
.art-split__col--after .art-split__amount { color: var(--c-mint-ink); }
.art-split__sub { font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-3); }
.art-split__arrow { font-size: var(--ty-h2); line-height: 1; color: var(--c-ink-3); }
@media (max-width: 639px) {
  .art-split { grid-template-columns: minmax(0, 1fr); }
  .art-split__arrow { justify-self: center; transform: rotate(90deg); }
}

/* ---------- «Команда / AI-стэк» двумя плашками (1500k-budget-compare, 08/10/2026) ---------- */
.art-was-now { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-grid); margin-top: var(--ty-gap-p); }
@media (min-width: 640px) { .art-was-now { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.art-was-now__box { padding: var(--inset-pad); border-radius: var(--r-inner); border-left: 3px solid var(--c-accent); background: color-mix(in oklab, var(--card-4), #fff 40%); }
.art-was-now__box--now { border-left-color: var(--c-mint-ink); background: color-mix(in oklab, var(--card-2), #fff 40%); }
.art-was-now__label { display: block; margin-bottom: var(--s-1); font-size: var(--ty-small); line-height: var(--ty-small-lh); font-weight: var(--ty-fw-semi); color: var(--c-accent); }
.art-was-now__box--now .art-was-now__label { color: var(--c-mint-ink); }

/* ---------- таблица сравнения «команда / AI-стэк» (1500k-budget-compare, 08/10/2026) ---------- */
.art-table--compare table { min-width: 40rem; }
.art-table th.art-cell--num, .art-table td.art-cell--num { text-align: right; font-variant-numeric: tabular-nums; }
.art-table td.art-cell--team { color: var(--c-accent); font-weight: var(--ty-fw-med); }
.art-table td.art-cell--ai { color: var(--c-mint-ink); font-weight: var(--ty-fw-med); }
.art-table td.art-cell--save { font-weight: var(--ty-fw-semi); }
.art-table tr.art-total td { background: var(--c-bg-2); font-weight: var(--ty-fw-semi); }
/* оговорка под заголовком (перенос instagram-avtootvet, 08/10/2026): мелкий приглушённый абзац, не текст статьи по стилю */
.art-prose .art-disclaimer { font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2); }

/* ---------- пошаговый плеер гайда vs-code-codex (09/10/2026): включается скриптом классом .art--steps, без JS виден весь текст ---------- */
.art--steps .art-part { display: none; margin-top: 0; }
.art--steps .art-part.is-active { display: block; }
.art--steps .art-part > h2 { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.art-prog { margin-bottom: var(--s-3); }
.art-prog__bar { height: var(--s-2); border-radius: var(--r-pill); background: color-mix(in oklab, var(--c-ink), #fff 88%); overflow: hidden; }
.art-prog__fill { display: block; width: 0; height: 100%; border-radius: var(--r-pill); background: var(--card-1); transition: width var(--t-base); }
.art-prog__text { display: block; margin-top: var(--s-2); font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2); }
.art-toc__list a.is-done::after { content: "\2713"; margin-left: auto; padding-left: var(--s-2); color: var(--c-ink-2); }
.art-toc__list a[aria-current="step"] { font-weight: var(--ty-fw-semi); background: #fff; border-color: var(--c-ink); }
.art-prog__reset { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-2); padding: 0; border: 0; background: none; color: var(--c-ink-2);
  font: inherit; font-size: var(--ty-small); line-height: var(--ty-small-lh); text-decoration: underline; cursor: pointer; }
.art-prog__reset:hover { color: var(--c-link); }
.art-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.art-foot__check { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; cursor: pointer; }
.art-foot__check input { width: var(--s-5); height: var(--s-5); margin: 0; accent-color: var(--c-ink); cursor: pointer; }
.art-foot__nav { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- portativnye-agentnye-sistemy (08/10/2026): метки, карточки принципов и систем, сворачиваемые промты ---------- */
.art-prose ul.art-chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-grid); }
@media (min-width: 640px) { .art-prose ul.art-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .art-prose ul.art-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.art-prose .art-chips > li { padding: var(--s-2) var(--s-3); text-align: center; border: 1px solid var(--c-line); border-radius: var(--r-pill); color: var(--c-ink-2); }
.art-prose .art-chips > li::before { content: none; }
.art-prose .steps > li > h3 { margin-top: 0; }
.art-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-grid); margin-top: var(--ty-gap-p); }
.art-prose .art-cards > .art-box { margin-top: 0; }
.art-card__num, .art-card__tag { font-size: var(--ty-small); line-height: var(--ty-small-lh); font-weight: var(--ty-fw-semi); color: var(--c-ink-2); }
.art-fold { border: 1px solid var(--c-line); border-radius: var(--r-card); background: color-mix(in oklab, var(--card-6), #fff 60%); }
.art-prose .art-fold { margin-top: var(--s-4); }
.art-fold__sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: center; min-height: 44px; padding: var(--pad-m); cursor: pointer; list-style: none; }
.art-fold__sum::-webkit-details-marker { display: none; }
.art-fold__sum > :not(.art-fold__caret) { grid-column: 1; }
.art-fold__tag, .art-fold__note { font-size: var(--ty-small); line-height: var(--ty-small-lh); color: var(--c-ink-2); }
.art-prose .art-fold__title { margin-top: 0; }
.art-fold__caret { grid-column: 2; grid-row: 1 / span 3; font-size: var(--ty-h3); line-height: var(--ty-icon-lh); color: var(--c-ink-2); }
.art-fold[open] .art-fold__caret { transform: rotate(45deg); }
.art-fold__body { padding: 0 var(--pad-m) var(--pad-m); }
.art-prose .art-fold__body .cmd { margin-top: 0; }
.art-fold .cmd pre { max-height: 70vh; overflow: auto; }
.art-prose .art-cards h3 { margin-top: var(--s-1); }

/* ---------- «шаг 0»: карточки услуг по теме до оглавления (10/10/2026); одна карточка не растягивается на пустую половину ---------- */
#uslugi .bigcards:has(> :only-child), #related .bigcards:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

/* Bundle, «Что входит в комплект» (16/10/2026): у третьей карточки пункт «Внутри» в две строки, flex-ряд тянул соседок и пустота
   уходила между вставкой и подвалом (qa_layout inner-void 75-82 px). С 960 строки карточек (заголовок, текст, вставка, подвал)
   на общих линиях через subgrid, как каталог /cases/ и хаб /guides/; вставки ряда одной высоты, подвал на нижней линии. */
@media (min-width: 960px) {
  body[data-block="products-bundle-all"] #contents .bigcards--aud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-block="products-bundle-all"] #contents .bigcards--aud > .bigcard { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  body[data-block="products-bundle-all"] #contents .aud__tasks { align-self: stretch; }
  body[data-block="products-bundle-all"] #contents .aud__foot { align-self: end; }
}
/* 960-1279: колонка узкая, пункт третьей карточки в три строки, общая вставка ряда пустела снизу на 77 px; здесь ряд 2 + 1 на всю ширину, как с 640 */
@media (min-width: 960px) and (max-width: 1279px) {
  body[data-block="products-bundle-all"] #contents .bigcards--aud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-block="products-bundle-all"] #contents .bigcards--aud > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}