/* Вынос широких блоков за колонку текста: на узком экране ничего не меняется */
.r-wide { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 16px; }
@media (min-width: 901px) {
  /* вправо, в пустое поле страницы; влево нельзя — там колонка навигации */
  .article-layout .r-wide { margin-left: 0; margin-right: -130px; padding: 0; max-width: calc(100vw - 470px); }
}
.r-num { font-family: var(--r-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
/* Паспорт-лента: масштаб работы одной строкой, сразу под заголовком */
.r-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px; background: var(--r-line); border: 1px solid var(--r-line);
  border-radius: 14px; overflow: hidden; margin: 24px 0 8px;
}
.r-strip div { background: var(--b-surface); padding: 16px 18px; }
.r-strip b { font-family: var(--font-display); display: block; font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--r-deep); }
.r-strip span { display: block; font-size: 13px; line-height: 1.35; color: var(--b-ink-muted); margin-top: 4px; }
/* ---------- 2. Витрина цифр ---------- */
.r-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 26px 0; }
.r-fig {
  background: var(--b-surface); border: 1px solid var(--r-line);
  border-radius: 16px; padding: 20px 22px;
}
.r-fig b { font-family: var(--font-display); display: block; font-size: 32px; font-weight: 800; line-height: 1; color: var(--r-deep); letter-spacing: -0.02em; }
.r-fig span { display: block; font-size: 14px; line-height: 1.45; color: var(--b-ink-secondary); margin-top: 10px; }
/* главная цифра блока — одна, максимум две */
.r-fig--hot { background: var(--r-hot-soft); border-color: rgba(232, 115, 12, .3); grid-column: span 2; }
.r-fig--hot b { font-size: 52px; color: var(--r-hot); }
@media (max-width: 560px) {
  .r-fig--hot { grid-column: span 1; }
  .r-fig--hot b { font-size: 40px; }
}
/* ---------- 4. Паспорт исследования (свёрнут) ---------- */
.r-method { border: 1px solid var(--r-line); border-radius: 14px; margin: 26px 0; background: var(--b-surface); }
.r-method summary {
  padding: 16px 20px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-weight: 700; color: var(--r-deep);
}
.r-method summary::-webkit-details-marker { display: none; }
.r-method summary::after { content: "▾"; color: var(--b-ink-muted); transition: transform .2s; }
.r-method[open] summary::after { transform: rotate(180deg); }
.r-method[open] summary { border-bottom: 1px solid var(--r-line); }
.r-method-body { padding: 16px 20px 20px; font-size: 15px; line-height: 1.65; color: var(--b-ink-secondary); }
.r-method-body p { margin: 0 0 10px; font-size: 15px; }
.r-method-body p:last-child { margin-bottom: 0; }
/* ---------- 6. Таблица-карточка ---------- */
.r-tbl { margin: 26px 0; border: 1px solid var(--r-line); border-radius: 16px; background: var(--b-surface); overflow: hidden; }
.r-tbl-scroll { overflow-x: auto; }
.r-tbl table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0; min-width: 560px; }
.r-tbl th {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--b-ink-muted); text-align: left; padding: 11px 14px;
  background: var(--b-surface-soft); border-bottom: 1px solid var(--r-line); white-space: nowrap;
}
.r-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--r-line); vertical-align: top; }
.r-tbl tr:last-child td { border-bottom: 0; }
.r-tbl td.r-num { text-align: right; white-space: nowrap; }
/* первая колонка держится при прокрутке вбок */
.r-tbl th:first-child, .r-tbl td:first-child { position: sticky; left: 0; background: var(--b-surface); }
.r-tbl th:first-child { background: var(--b-surface-soft); }
.r-tbl tr.is-top td { background: var(--r-hot-soft); }
.r-tbl tr.is-top td:first-child { background: var(--r-hot-soft); font-weight: 700; }
/* ---------- 9. Пронумерованные выводы ---------- */
.r-findings { list-style: none; counter-reset: rf; padding: 0; margin: 26px 0; }
.r-findings li { counter-increment: rf; position: relative; padding: 0 0 18px 54px; font-size: 17px; line-height: 1.6; }
.r-findings li::before {
  content: counter(rf); position: absolute; left: 0; top: 1px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--r-hot); color: var(--r-white);
  font-family: var(--r-mono); font-size: 14px; font-weight: 700;
}
.r-findings b { color: var(--r-deep); }
/* ============================================================
   Оформление «документ» (r-doc) — вариант для исследований.
   Три плана вместо одного: подложка страницы чуть зеленее белого,
   колонка навигации — белая панель, содержательные блоки — белые
   карточки с тонкой рамкой. Разметка блоков та же.
   ============================================================ */
.r-doc { background: var(--r-page); }
.r-doc .post-wrapper { background: transparent; }
/* блоки — белые карточки на подложке */
.r-doc .r-strip div, .r-doc .r-fig, .r-doc .r-tbl, .r-doc .r-method { background: var(--b-surface); }
.r-doc .r-tbl th { background: var(--r-tint-2); }
.r-doc .r-tbl td:first-child { background: var(--b-surface); }
.r-doc .r-tbl th:first-child { background: var(--r-tint-2); }
/* акцентная карточка: рамка бирюзовая, подложка зелёная */
.r-doc .r-fig--hot { background: var(--r-soft); border: 2px solid var(--r-deep); }
/* нумерация выводов — номер в рамке, как в документе */
.r-doc .r-findings li::before {
  content: counter(rf, decimal-leading-zero);
  width: auto; height: auto; border-radius: 7px;
  background: var(--b-surface); color: var(--r-hot);
  border: 1px solid var(--r-line); padding: 4px 7px;
  font-size: 12px; font-weight: 600;
}
/* навигация — всегда белая панель, отдельный план от подложки */
.r-doc .toc-sidebar {
  background: var(--b-surface); border: 1px solid var(--r-line);
  border-radius: 14px; padding: 14px 10px;
}
@media (max-width: 900px) {
  .r-doc .toc-sidebar { padding: 6px 10px; }
}
.r-doc .toc-sticky ul { counter-reset: rn; }
.r-doc .toc-sticky li { counter-increment: rn; margin-bottom: 2px; }
.r-doc .toc-sticky a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; border-left: 0;
  font-size: 14px; line-height: 1.4; max-width: none;
}
.r-doc .toc-sticky a::before {
  content: counter(rn); flex: 0 0 22px; height: 22px;
  display: grid; place-items: center; border-radius: 6px;
  background: var(--r-tint-2); color: var(--b-ink-muted);
  font-family: var(--r-mono); font-size: 12px; font-weight: 600;
}
.r-doc .toc-sticky a:hover { background: var(--r-tint-2); }
.r-doc .toc-sticky a.active { background: var(--r-soft); color: var(--r-deep); font-weight: 700; }
.r-doc .toc-sticky a.active::before { background: var(--r-deep); color: var(--r-white); }
.r-hero-strip { margin-top: 26px; }
.r-full { position: fixed; inset: 0; z-index: 100; background: var(--b-surface); overflow: auto; display: none; }
.r-full.on { display: block; }
.r-full table { width: 100%; border-collapse: collapse; font-size: 14px; }
.r-full th { position: sticky; top: 0; background: var(--r-tint-2); z-index: 1; }
/* На телефоне любая таблица раскладывается карточками: подпись сверху, значение снизу.
   Боковой прокрутки нет вообще. */
@media (max-width: 720px) {
  .r-tbl table, .r-tbl tbody, .r-tbl tr, .r-tbl td { display: block; width: 100%; }
  .r-tbl thead { display: none; }
  .r-tbl tr { border-bottom: 1px solid var(--r-line); padding: 12px 16px; }
  .r-tbl tr:last-child { border-bottom: 0; }
  .r-tbl td { border: 0; padding: 3px 0; display: grid; grid-template-columns: 1fr auto; gap: 12px; }
  .r-tbl td::before {
    content: attr(data-l); font-size: 12px; color: var(--b-ink-muted);
    text-transform: uppercase; letter-spacing: .04em;
  }
  .r-tbl td:first-child { font-weight: 700; font-size: 16px; margin-bottom: 6px; display: block; }
  .r-tbl td:first-child::before { content: none; }
  .r-tbl td.r-num { text-align: right; }
  .r-tbl-scroll { overflow: visible; }
}
/* ---------- «Главное из раздела» — приём Key Takeaway ----------
   У Stack Overflow, Backlinko, Pew и Ahrefs после каждого крупного блока
   стоит строка-вывод с цифрой: материал читается по диагонали за минуту. */
.r-key {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  border-left: 3px solid var(--r-hot); background: var(--r-hot-soft);
  border-radius: 0 12px 12px 0; padding: 14px 20px; margin: 22px 0;
}
.r-key em {
  font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--r-hot); white-space: nowrap; padding-top: 3px;
}
.r-key span { font-size: 16px; line-height: 1.55; }
.r-key b { color: var(--r-deep); }
@media (max-width: 560px) {
  .r-key { grid-template-columns: 1fr; gap: 6px; }
}
/* ---------- Графика статей (src/lib/graphics.ts): витрина цифр, шаги, «было/стало» ----------
   Цифры и слова — из текста статьи; блок только показывает их крупно. Витрина цифр — те же .r-figs. */
.g-block { margin: 28px 0; }
.g-title { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--b-ink-muted); margin: 0 0 12px; }
.g-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.g-step {
  background: var(--r-tint); border: 1px solid var(--r-tint-line); border-radius: 16px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.g-step i {
  font-style: normal; font-family: var(--r-mono); font-size: 13px; font-weight: 700; color: var(--r-white);
  background: var(--c-primary); border-radius: 8px; padding: 4px 9px; align-self: flex-start; letter-spacing: .04em;
}
.g-step b { font-family: var(--font-display); font-size: 17px; line-height: 1.3; color: var(--r-deep); }
.g-step span { font-size: 14px; line-height: 1.5; color: var(--b-ink-secondary); }
.g-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.g-card {
  background: var(--b-surface); border: 1px solid var(--r-line); border-radius: 16px; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.g-card em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--b-ink-muted); }
.g-card strong { font-size: 16px; color: var(--b-ink); }
.g-card b { font-family: var(--font-display); font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--r-deep); margin-top: 6px; }
.g-card span { font-size: 14px; line-height: 1.45; color: var(--b-ink-secondary); }
.g-card small { font-size: 13px; line-height: 1.4; color: var(--b-ink-secondary); border-top: 1px solid var(--r-line); padding-top: 8px; margin-top: 4px; }
.g-card--hot { background: var(--r-hot-soft); border-color: rgba(232, 115, 12, .3); }
.g-card--hot b { color: var(--r-hot); }
.g-card--hot em { color: var(--r-hot); }
@media (max-width: 560px) { .g-card b { font-size: 36px; } }
/* ---------- «Для ссылки» — готовая строка цитирования (раздел «Как ссылаться») ---------- */
.r-cite {
  border: 1px solid var(--r-tint-line); background: var(--r-tint); border-radius: 14px;
  padding: 16px 20px; margin: 22px 0; font-size: 15px; line-height: 1.6;
}
.r-cite em {
  display: block; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--b-ink-muted); margin-bottom: 6px;
}
.r-cite a { word-break: break-all; }
/* ---------- Строка «данные» под графиком и таблицей ----------
   Приём Web Almanac и Our World in Data: под каждым блоком видно,
   откуда цифры и где их взять целиком. Это же делает материал цитируемым. */
.r-src {
  display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center;
  font-size: 13px; color: var(--b-ink-muted); margin: -8px 0 24px;
}
.r-tbl--full table { min-width: 0; }
/* длинные подписи колонок переносятся, иначе таблица на девять колонок
   никогда не поместится в экран */
.r-tbl--full th, .r-tbl--full td { white-space: normal; }
.r-tbl--full th { font-size: 10.5px; line-height: 1.25; letter-spacing: .04em; }
/* длинные ячейки вида «18 (6,0%; по прогонам 4,7%–7,4%)» переносятся,
   разряды тысяч внутри числа держатся вместе неразрывным пробелом */
.r-tbl--full td.r-num { white-space: normal; }
@media (max-width: 900px) {
  .r-tbl--full .r-tbl-scroll { overflow-x: auto; }
}
/* График нарисован под ширину 760 — растягивать его дальше нельзя:
   вместе с полосками увеличиваются подписи и значения, и они начинают давить.
   Небольшой запас оставляем, дальше ограничиваем. */
.r-chart { margin: 18px 0 6px; max-width: 900px; }
.r-chart svg { width: 100%; height: auto; display: block; font-family: var(--font-text); }
.r-chart text { fill: var(--b-ink); font-size: 12px; }
.r-chart .lbl { fill: var(--b-ink-secondary); }
.r-chart .val { fill: var(--b-ink-secondary); font-variant-numeric: tabular-nums; }
.r-chart .f-alice { fill: var(--c-alice); }
.r-chart .f-google { fill: var(--c-google); }
.r-chart .f-organic { fill: var(--c-organic); }
.r-chart .f-s1 { fill: var(--c-s1); }
.r-chart .f-s2 { fill: var(--c-s2); }
.r-chart .f-s3 { fill: var(--c-s3); }
.r-chart .f-s4 { fill: var(--c-s4); }
.r-chart .onseg1 { fill: var(--c-s1-ink); }
.r-chart .onseg2 { fill: var(--c-s2-ink); }
.r-chart .onseg3 { fill: var(--c-s3-ink); }
.r-chart .onseg4 { fill: var(--c-s4-ink); }
.r-chart-legend { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 13px; color: var(--b-ink-secondary); margin: 16px 0 2px; }
.r-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.r-chart-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.r-chart-legend i.f-alice { background: var(--c-alice); }
.r-chart-legend i.f-google { background: var(--c-google); }
.r-chart-legend i.f-organic { background: var(--c-organic); }
.r-chart-legend i.f-s1 { background: var(--c-s1); }
.r-chart-legend i.f-s2 { background: var(--c-s2); }
.r-chart-legend i.f-s3 { background: var(--c-s3); }
.r-chart-legend i.f-s4 { background: var(--c-s4); }
/* врезка крупным кеглем в начале раздела */
.r-lead { font-size: 19px; line-height: 1.6; color: var(--b-ink-secondary); }
/* строка источника под блоком данных */
.research-page p.r-src { display: block; font-size: 13px; margin: 8px 0 26px; line-height: 1.5; }
/* min-width:0 обязателен: колонка грида по умолчанию не сжимается меньше
   своего содержимого, и один широкий график растягивал всю страницу. */
.research-page .article-content { overflow: visible; min-width: 0; }
.research-page .article-layout > * { min-width: 0; }
@media (min-width: 901px) {
  .r-full-page .article-layout { max-width: 1480px; gap: 64px; }
  .r-full-page .article-content { max-width: 760px; }
  /* данные шире текста ровно настолько, насколько позволяет экран,
     и никогда не вылезают за него: ширина считается, а не подбирается */
  .r-full-page .r-wide {
    margin-left: 0; margin-right: 0; padding: 0;
    width: min(1080px, calc(100vw - 340px)); max-width: none;
  }
}
.r-body h2 { scroll-margin-top: calc(var(--header-h) + 24px); }
.r-body h3 { font-size: 19px; margin: 32px 0 10px; color: var(--r-deep); }
.r-body h4 { font-size: 16px; margin: 22px 0 8px; }
.r-body p { font-size: 17px; line-height: 1.7; margin: 0 0 18px; }
.r-body ul, .r-body ol { margin: 0 0 20px; padding-left: 22px; }
.r-body li { font-size: 17px; line-height: 1.6; margin-bottom: 8px; }
.r-body a { color: var(--r-deep); font-weight: 600; border-bottom: 1px solid rgba(12,90,90,.3); text-decoration: none; }
.r-body a:hover { border-bottom-color: var(--r-deep); }
.r-body .r-tbl { margin: 18px 0 8px; }
.r-body .r-tbl table { font-size: 14px; }
.r-body .r-tbl th, .r-body .r-tbl td { padding: 9px 12px; }
/* Ничего не рвём по буквам: ни слова, ни адреса сайтов. Иначе в колонке
   получается «Gig aCh at» и «dentalroo tt.ru». Первой колонке даём ширину,
   чтобы домен помещался в строку. */
.r-tbl td, .r-tbl th, .r-tbl a { overflow-wrap: break-word; word-break: normal; hyphens: none; }
.r-tbl--full th:first-child, .r-tbl--full td:first-child { min-width: 150px; }
/* на телефоне ширины нет — только там разрешаем рвать длинные адреса */
@media (max-width: 720px) {
  .r-tbl--full th:first-child, .r-tbl--full td:first-child { min-width: 0; }
  .r-tbl a { overflow-wrap: anywhere; }
}
@media (max-width: 720px) {
  .r-tbl td.r-num { white-space: normal; }
}
/* Ни внутренней прокрутки, ни липкой шапки: липкая шапка наезжала на строки
   и оставляла пустое место на своём месте. Таблица — обычный блок в потоке. */
.r-tbl--full tbody td:first-child { background: var(--b-surface); }
.r-tbl--full tr.is-top td:first-child { background: var(--r-hot-soft); }
/* во весь экран: шапка с названием и кнопкой возврата — раньше выйти было нечем */
.r-full { padding: 0; }
.r-full-head {
  position: sticky; top: 0; z-index: 5; background: var(--b-surface);
  border-bottom: 1px solid var(--r-line); padding: 14px 24px;
  display: flex; align-items: center; gap: 16px;
}
.r-full-head b { font-size: 16px; }
.r-full-head span { font-size: 13px; color: var(--b-ink-muted); }
.r-full-head button {
  margin-left: auto; border: 1px solid var(--r-line); background: var(--b-surface);
  border-radius: 10px; padding: 9px 18px; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1; cursor: pointer;
}
.r-full-head button:hover { border-color: var(--r-deep); color: var(--r-deep); }
.r-full-body { padding: 20px 24px 60px; }
.r-full-body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.r-full-body th {
  position: sticky; top: 58px; background: var(--r-tint-2); z-index: 1;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--b-ink-muted); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--r-line);
}
.r-full-body td { padding: 10px 12px; border-bottom: 1px solid var(--r-line); vertical-align: top; }
.r-full-body tr.is-top td { background: var(--r-hot-soft); }
/* На телефоне график, сжатый до ширины экрана, даёт подписи в 5 пикселей —
   читать нечем. Даём ему минимальную осмысленную ширину и прокрутку
   внутри самого графика: прокрутить график лучше, чем не прочитать его.
   Так же поступает Web Almanac. */
@media (max-width: 720px) {
  /* Листается только сам график. Легенда и подпись остаются на месте —
     иначе легенда уезжала вместе с графиком и обрезалась слева. */
  .r-chart-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .r-chart-scroll svg { min-width: 620px; }
  .r-chart-scroll::after {
    content: "график листается вбок"; display: block;
    font-size: 12px; color: var(--b-ink-muted); padding: 6px 2px 0;
  }
}
/* Таблицы на восемь и более колонок: мельче кегль и плотнее поля,
   иначе каждая ячейка переносится на пять строк. Класс ставит скрипт,
   CSS колонки считать не умеет. */
.r-tbl--full.has-many-cols th { font-size: 10px; letter-spacing: .03em; padding: 9px 8px; }
.r-tbl--full.has-many-cols td { font-size: 13px; padding: 8px 8px; line-height: 1.45; }
/* подпись под графиком читаемее */
.research-page p.r-src { color: var(--b-ink-secondary); }
/* Подпись колонки в карточном виде прижата влево, значение вправо:
   иначе в правой части строки слипаются «МОСКВА, ШИРОКАЯ 78 125». */
.r-tbl td::before { justify-self: start; text-align: left; }
/* Тень у правого края графика подсказывает, что он листается */
@media (max-width: 720px) {
  .r-chart-scroll {
    background:
      linear-gradient(to right, var(--b-surface) 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
      linear-gradient(to left, var(--b-surface) 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(12,90,90,.14), rgba(255,255,255,0)) right / 16px 100% no-repeat;
    background-attachment: local, local, scroll;
  }
}
/* ============================================================
   КАРКАС «ДОКУМЕНТ», версия 2 — страница исследования целиком.
   Всё по левому краю на одной вертикали: заголовок, текст, таблицы, графики.
   Колонка содержимого 1040, текст внутри неё не шире 740 — читать удобно,
   а данным хватает места без «выносов» за колонку.
   Заголовки всех уровней одного цвета — чёрные; цветом работают только цифры.
   ============================================================ */
@media (min-width: 901px) {
  .r-full-page .article-layout {
    grid-template-columns: 232px minmax(0, 1040px); gap: 56px;
    max-width: 1400px; justify-content: center;
  }
  .r-full-page .article-content { max-width: 1040px; }
  .r-full-page .r-wide { width: auto; max-width: 100%; margin-left: 0; margin-right: 0; }
}
/* Статья и кейс (без широких таблиц): колонка текста 760 px, каркас уже и по центру —
   без пустого поля справа (замечание Андрея 14.10.2026). Исследования остаются на 1040 px. */
@media (min-width: 901px) {
  .r-full-page.r-article-page .article-layout { grid-template-columns: 232px minmax(0, 760px); max-width: 1120px; gap: 56px; }
  .r-full-page.r-article-page .article-content { max-width: 760px; }
}
.r-full-page .r-body > p, .r-full-page .r-body > ul, .r-full-page .r-body > ol, .r-full-page .r-body > h2, .r-full-page .r-body > h3, .r-full-page .r-body > h4, .r-full-page .r-body > .r-key, .r-full-page .r-appendix > * { max-width: 740px; }
/* --- шапка: по левому краю, как у документа --- */
.r-head { padding: 28px 0 6px; max-width: 900px; }
.r-head-eyebrow {
  font-family: var(--r-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--r-deep); margin: 0 0 14px;
}
.r-head h1 {
  font-size: 38px; line-height: 1.14; font-weight: 800; letter-spacing: -0.025em;
  color: var(--b-ink); margin: 0 0 18px; text-wrap: balance;
}
.r-head .article-meta { justify-content: flex-start; margin: 0; }
@media (max-width: 720px) {
  .r-head .article-meta { flex-wrap: wrap; row-gap: 4px; column-gap: 14px; }
  .r-head .article-meta .meta-dot { display: none; }
}
@media (max-width: 720px) {
  .r-head h1 { font-size: 27px; }
  .r-head { padding-top: 16px; }
}
/* лента цифр, паспорт и витрина — одной ширины, по всей колонке */
.r-full-page .r-hero-strip { margin: 22px 0 18px; max-width: none; }
.r-full-page .r-body > .r-method { margin: 0 0 18px; }
/* --- заголовки: одна система, все чёрные --- */
.r-full-page .r-body { counter-reset: sec; }
.r-full-page .r-body > h2 { color: var(--b-ink); font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; margin: 72px 0 18px; max-width: 900px; }
.r-full-page .r-body > h2::before { display: block; margin-bottom: 10px; font-family: var(--r-mono); font-size: 13px; font-weight: 600; color: var(--r-hot); }
.r-full-page .r-body h3 { color: var(--b-ink); font-size: 20px; font-weight: 700; line-height: 1.3; margin: 40px 0 12px; }
.r-full-page .r-body h4 { color: var(--b-ink); font-size: 16px; font-weight: 700; margin: 26px 0 8px; }
.r-full-page .r-body p { color: var(--b-ink); }
.r-full-page .r-lead { color: var(--b-ink); font-size: 19px; line-height: 1.6; }
/* --- витрина цифр: ровно четыре в ряд, без карточки-сироты --- */
.r-full-page .r-figs { grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 0 12px; }
.r-full-page .r-fig--hot { grid-column: auto; background: var(--r-hot-soft); border: 1px solid rgba(232,115,12,.35); }
.r-full-page .r-fig--hot b { font-size: 32px; }
.r-full-page .r-fig { padding: 18px 20px; }
.r-full-page .r-fig span { font-size: 13.5px; }
@media (max-width: 900px) {
  .r-full-page .r-figs { grid-template-columns: repeat(2, 1fr); }
}
/* --- таблица: никакой панели сверху, одна тихая ссылка снизу --- */
.r-full-page .r-tbl { margin: 18px 0 10px; }
.r-tbl-more {
  display: flex; justify-content: flex-end; padding: 8px 14px;
  border-top: 1px solid var(--r-line); background: var(--r-tint-3);
}
.r-tbl-more button {
  border: 0; background: none; padding: 2px 0; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--r-deep);
}
.r-tbl-more button:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .r-tbl-more { display: none; }
}
.r-full-page .r-chart { margin: 22px 0 10px; }
/* --- навигация: короткие названия, номер, активный пункт с акцентом слева --- */
.r-full-page .toc-sidebar { padding: 12px 8px; border-radius: 14px; }
.r-full-page .toc-sticky a { padding: 9px 10px 9px 12px; font-size: 14px; color: var(--b-ink-secondary); border-left: 3px solid transparent; border-radius: 0 8px 8px 0; }
.r-full-page .toc-sticky a::before { background: none; color: var(--b-ink-muted); flex-basis: 18px; font-size: 13px; justify-items: start; }
.r-full-page .toc-sticky a.active { background: var(--r-soft); border-left-color: var(--r-deep); color: var(--b-ink); font-weight: 700; }
.r-full-page .toc-sticky a.active::before { background: none; color: var(--r-deep); }
/* --- телефон и планшет: содержание одной аккуратной строкой вверху --- */
@media (max-width: 900px) {
  .r-full-page .toc-sidebar {
    position: sticky; top: var(--header-h); z-index: 30;
    margin: 0 -20px; padding: 0; border: 0; border-radius: 0;
    border-bottom: 1px solid var(--r-line); background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  }
  .r-full-page .toc-toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
    border: 0; background: none; padding: 12px 20px; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--b-ink); cursor: pointer;
  }
  .r-full-page .toc-toggle-label b { color: var(--r-deep); font-family: var(--r-mono); font-weight: 600; margin-right: 8px; }
  .r-full-page .toc-sticky { display: none; max-height: 60vh; padding: 0 12px 12px; }
  .r-full-page .toc-sidebar.open .toc-sticky { display: block; }
  .r-full-page .toc-sidebar.open .toc-toggle-icon { transform: rotate(180deg); }
}
/* ============================================================
   ПЯТЬ ВАРИАНТОВ ПОДАЧИ — для выбора (служебный переключатель внизу страницы).
   Разметка одна, меняются только фон страницы и способ отделить блоки.
   ============================================================ */
.r-full-page.r-doc { background: var(--r-page); }
/* 5. тёплый бумажный, в пару к оранжевому */
.skin-1 .r-tbl th, .skin-1 .r-tbl-more { background: var(--r-tint-2); }
.skin-1 .toc-sidebar { box-shadow: none; }
/* номер раздела живёт только в навигации, над заголовком в тексте он лишний */
.r-full-page .r-body > h2::before { content: none; }
.r-full-page .r-body > h2 { counter-increment: none; }
/* паспорт и форма заявки — шириной с текст, а не во всю колонку данных */
.r-full-page .r-body > .r-method { max-width: 740px; }
/* --- телефон: таблица остаётся таблицей и листается пальцем вбок ---
   Первая колонка закреплена, справа тень-подсказка, что есть продолжение. */
@media (max-width: 720px) {
  .r-full-page .r-tbl table { display: table; width: auto; min-width: 100%; font-size: 13px; }
  .r-full-page .r-tbl thead { display: table-header-group; }
  .r-full-page .r-tbl tbody { display: table-row-group; }
  .r-full-page .r-tbl tr { display: table-row; padding: 0; border: 0; }
  .r-full-page .r-tbl td, .r-full-page .r-tbl th { display: table-cell; width: auto; padding: 9px 10px; border-bottom: 1px solid var(--r-line); }
  .r-full-page .r-tbl td::before { content: none; }
  .r-full-page .r-tbl td:first-child { font-size: 13px; font-weight: 600; margin: 0; display: table-cell; }
  .r-full-page .r-tbl th { font-size: 10px; white-space: normal; min-width: 84px; }
  .r-full-page .r-tbl td.r-num { white-space: nowrap; text-align: right; }
  .r-full-page .r-tbl th:first-child, .r-full-page .r-tbl td:first-child {
    position: sticky; left: 0; z-index: 1; min-width: 118px; max-width: 150px;
    box-shadow: 1px 0 0 var(--r-line);
  }
  .r-full-page .r-tbl td:first-child { background: var(--r-white); }
  .r-full-page .r-tbl tr.is-top td:first-child { background: var(--r-hot-soft); }
  .r-full-page .r-tbl-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: radial-gradient(farthest-side at 100% 50%, rgba(12,90,90,.16), rgba(255,255,255,0)) right / 14px 100% no-repeat;
    background-attachment: scroll;
  }
  .r-full-page .r-tbl { margin-left: -8px; margin-right: -8px; border-radius: 12px; }
}
@media (max-width: 720px) {
  /* домен в первой колонке не рвётся: колонка подстраивается под него */
  .r-full-page .r-tbl td:first-child a { white-space: nowrap; overflow-wrap: normal; }
  .r-full-page .r-tbl th:first-child, .r-full-page .r-tbl td:first-child { max-width: 190px; }
}
/* на планшете и телефоне блоки данных стоят на той же вертикали, что и текст */
@media (max-width: 900px) {
  .r-full-page .r-wide { margin-left: 0; margin-right: 0; padding: 0; width: auto; max-width: 100%; }
}
/* выбран вариант 1 (как vc.ru: 17/26) */
.r-full-page .r-body p, .r-full-page .r-body li, .r-full-page .r-body .r-lead, .r-full-page .r-key span { font-size: var(--r-fs); line-height: var(--r-lh); font-weight: var(--r-fw); }
/* Засечка для читаемого текста; служебное — источники, ключевые цифры, таблицы, подписи — остаётся Montserrat */
.r-full-page .r-body p, .r-full-page .r-body li, .r-full-page .r-body .r-lead, .r-full-page .r-body blockquote, .r-full-page .faq-a { font-family: var(--font-read); }
.r-full-page .r-body p.r-src, .r-full-page .r-key span, .r-full-page .r-body table, .r-full-page .r-body figcaption, .r-full-page .r-body .g-block, .r-full-page .r-body .r-chart, .r-full-page .r-body .r-fig, .r-full-page .r-body .lead-inline, .r-full-page .r-body .r-cta { font-family: var(--font-text); }
.r-full-page .r-body p.r-src { font-size: 13.5px; line-height: 1.5; }
.r-full-page .r-body .r-method-body p, .r-full-page .r-body .r-method-body li { font-size: 15.5px; line-height: 1.6; }
@media (max-width: 720px) {
  .r-full-page .r-body p, .r-full-page .r-body li, .r-full-page .r-body .r-lead, .r-full-page .r-key span { font-size: var(--r-fs-m); line-height: var(--r-lh-m); }
  .r-full-page .r-body p.r-src { font-size: 13px; line-height: 1.5; }
  .r-full-page .r-body .r-method-body p, .r-full-page .r-body .r-method-body li { font-size: 15px; line-height: 1.55; }
  .r-full-page .r-body > h2 { font-size: 24px; margin-top: 56px; }
  .r-full-page .r-body h3 { font-size: 19px; }
}
/* --- телефон: витрина цифр списком, без одинокой закрашенной карточки --- */
@media (max-width: 720px) {
  .r-full-page .r-figs { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--r-line); border-radius: 14px; overflow: hidden; background: var(--r-white); }
  .r-full-page .r-fig, .r-full-page .r-fig--hot {
    display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: baseline;
    padding: 14px 16px; border: 0; border-radius: 0; background: none; box-shadow: none;
    border-bottom: 1px solid var(--r-line);
  }
  .r-full-page .r-fig:last-child { border-bottom: 0; }
  .r-full-page .r-fig b, .r-full-page .r-fig--hot b { font-size: 24px; line-height: 1.15; margin: 0; overflow-wrap: break-word; }
  .r-full-page .r-fig span { font-size: 14px; line-height: 1.45; }
}
/* --- телефон и планшет: строка содержания заметная, список нумерованный --- */
@media (max-width: 900px) {
  .r-full-page .toc-sidebar { background: var(--r-white); box-shadow: 0 6px 18px rgba(12, 40, 36, .07); }
  .r-full-page .toc-toggle { padding: 11px 20px; gap: 12px; justify-content: flex-start; }
  .r-full-page .toc-toggle::before {
    content: "Содержание"; flex: none; font-family: inherit; font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
    color: var(--r-white); background: var(--r-deep); border-radius: 6px; padding: 6px 8px;
  }
  .r-full-page .toc-toggle-label { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .r-full-page .toc-toggle-icon { flex: none; color: var(--r-deep); font-size: 16px; }
  .r-full-page .toc-sticky { padding: 4px 12px 14px; border-top: 1px solid var(--r-line); }
  .r-full-page .toc-sticky a { font-size: 15.5px; padding: 11px 10px 11px 12px; }
}
/* --- содержание в начале документа: видно сразу, без нажатий (только там, где нет левой колонки) --- */
.r-contents { display: none; }
@media (max-width: 900px) {
  .r-contents { display: block; margin: 22px 0 8px; padding: 16px 8px 8px; border: 1px solid var(--r-line); border-radius: 14px; max-width: 740px; }
  .r-contents > b { display: block; padding: 0 12px 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--b-ink-muted); }
  .r-contents ol { list-style: none; margin: 0; padding: 0; counter-reset: rc; }
  .r-contents li { counter-increment: rc; margin: 0; }
  .r-contents a {
    display: flex; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 8px;
    font-size: 15.5px; line-height: 1.35; font-weight: 600; color: var(--b-ink); text-decoration: none;
  }
  .r-contents a::before { content: counter(rc); flex: 0 0 18px; font-family: var(--r-mono); font-size: 13px; font-weight: 600; color: var(--r-deep); }
  .r-contents li:first-child a { background: var(--r-soft); box-shadow: inset 3px 0 0 var(--r-deep); }
}
/* ============================================================
   ВЕРСИЯ 3 (20.09.2026). Страница белая, а блоки — цифры, паспорт, таблицы,
   графики — лежат на мягкой подложке и читаются как отдельные предметы.
   Текст при этом остаётся на чистом белом. Прошлая версия — метка research-white-v2.
   ============================================================ */
.r-full-page .r-body > p, .r-full-page .r-body > ul, .r-full-page .r-body > ol, .r-full-page .r-body > h2, .r-full-page .r-body > h3, .r-full-page .r-body > h4, .r-full-page .r-body > .r-key, .r-full-page .r-body > .r-method, .r-full-page .r-appendix > * { max-width: 720px; }
.r-full-page .r-strip.r-hero-strip { background: var(--r-tint); border-color: var(--r-tint-line); }
.r-full-page .r-strip.r-hero-strip div { background: none; border-color: var(--r-tint-line); }
.r-full-page .r-fig:not(.r-fig--hot) { background: var(--r-tint); border-color: var(--r-tint-line); }
.r-full-page .r-method { background: var(--r-tint); border-color: var(--r-tint-line); }
.r-full-page .r-method[open] summary { border-bottom-color: var(--r-tint-line); }
.r-full-page .r-tbl { border-color: var(--r-tint-line); box-shadow: 0 1px 2px rgba(12, 40, 36, .04); }
.r-full-page .r-tbl th, .r-full-page .r-tbl th:first-child, .r-full-page .r-tbl-more { background: var(--r-tint); }
.r-full-page .r-tbl th { border-bottom: 1px solid var(--r-tint-line); color: var(--b-ink); }
.r-full-page .r-tbl tbody tr:hover td { background: var(--r-tint-3); }
.r-full-page .r-tbl tbody tr.is-top:hover td { background: var(--r-hot-soft); }
.r-full-page .r-chart { background: var(--r-tint); border: 1px solid var(--r-tint-line); border-radius: 16px; padding: 20px 20px 14px; }
.r-full-page .r-chart .r-chart-scroll { background: var(--r-white); border-radius: 10px; padding: 8px; }
.r-full-page .r-body p.r-src { color: var(--b-ink-muted); }
.r-full-page .r-body > h2 { border-top: 2px solid var(--b-ink); padding-top: 22px; }
.r-full-page .r-findings li { padding-bottom: 20px; }
.r-full-page .r-body li::marker { color: var(--r-deep); }
@media (max-width: 900px) {
  .r-full-page .r-contents { background: var(--r-tint); border-color: var(--r-tint-line); }
  .r-full-page .r-contents li:first-child a { background: var(--r-white); }
}
@media (max-width: 720px) {
  .r-full-page .r-figs { background: var(--r-tint); border-color: var(--r-tint-line); }
  .r-full-page .r-fig, .r-full-page .r-fig--hot, .r-full-page .r-fig:not(.r-fig--hot) { background: none; border-bottom-color: var(--r-tint-line); }
  .r-full-page .r-chart { padding: 14px 12px 10px; }
}
/* ============================================================
   ДОПОЛНИТЕЛЬНАЯ ГРАФИКА (tools/research_viz.py): карта «клиника × система»,
   кольца состава источников, полосы по типам страниц. Свёрстано на HTML,
   поэтому на телефоне не требует боковой прокрутки.
   ============================================================ */
.r-full-page .r-viz .r-viz-body { background: var(--r-white); border-radius: 10px; padding: 18px; }
.r-heat { display: grid; grid-template-columns: minmax(120px, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 3px; font-size: 13.5px; }
.r-heat-h { padding: 4px 6px 8px; font-size: 12px; font-weight: 700; text-align: center; }
.r-heat-n { padding: 9px 10px 9px 0; font-weight: 600; color: var(--b-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-heat-c { padding: 9px 4px; text-align: center; border-radius: 6px; font-family: var(--r-mono); font-size: 13px; color: var(--b-ink); }
.r-heat-c.is-none { color: var(--b-ink-muted); background: var(--r-tint-2); }
.r-donuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.r-donut { margin: 0; text-align: center; }
.r-donut-pic { position: relative; width: 100%; max-width: 168px; margin: 0 auto 12px; }
.r-donut-pic svg { display: block; width: 100%; height: auto; transform: none; }
.r-donut-pic circle { fill: none !important; stroke-width: 5.5; }
.r-donut-pic circle.f-s1 { stroke: var(--c-s1); }
.r-donut-pic circle.f-s2 { stroke: var(--c-s2); }
.r-donut-pic circle.f-s3 { stroke: var(--c-s3); }
.r-donut-pic circle.f-s4 { stroke: var(--c-s4); }
.r-donut-pic b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--b-ink); }
.r-donut figcaption { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--b-ink); }
.r-donut figcaption span { display: block; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--b-ink-secondary); }
.r-stack { display: grid; gap: 14px; }
.r-stack-row { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: center; }
.r-stack-row > span { font-size: 14px; font-weight: 600; text-align: right; color: var(--b-ink); }
.r-stack-bar { display: flex; height: 34px; border-radius: 8px; overflow: hidden; }
.r-stack-bar i { display: grid; place-items: center; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--r-white); min-width: 0; overflow: hidden; }
.r-stack-bar i.f-s1 { background: var(--c-s1); }
.r-stack-bar i.f-s2 { background: var(--c-s2); }
.r-stack-bar i.f-s3 { background: var(--c-s3); }
.r-stack-bar i.f-s4 { background: var(--c-s4); }
.r-stack-bar i + i { box-shadow: inset 2px 0 0 var(--r-white); }
@media (max-width: 720px) {
  .r-full-page .r-viz .r-viz-body { padding: 12px 10px; }
  .r-heat { grid-template-columns: minmax(96px, 1.25fr) repeat(4, minmax(0, 1fr)); gap: 2px; }
  .r-heat-h { font-size: 10.5px; padding: 2px 1px 6px; }
  .r-heat-n { font-size: 12px; padding: 8px 4px 8px 0; }
  .r-heat-c { font-size: 11.5px; padding: 8px 1px; }
  .r-donuts { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .r-donut-pic { max-width: 132px; }
  .r-donut-pic b { font-size: 20px; }
  .r-stack-row { grid-template-columns: 1fr; gap: 5px; }
  .r-stack-row > span { text-align: left; font-size: 13.5px; }
  .r-stack-bar { height: 30px; }
}
/* палитра дополнительной графики: главное — тёмно-зелёным, второе — оранжевым акцентом */
.r-stack-bar i.f-s3, .r-stack-bar i.f-s4 { color: var(--b-ink); }
.r-heat-c.is-max { font-weight: 700; }
.r-donut figcaption span { margin-top: 4px; }
.r-donut figcaption span:first-of-type { margin-top: 8px; }
.r-donut figcaption em { font-style: normal; font-weight: 700; color: var(--b-ink); }
.r-donut figcaption em.t-s3 { color: var(--r-legend-3); }
@media (max-width: 720px) {
  .r-full-page .r-viz { padding: 10px 8px 10px; }
  .r-full-page .r-viz .r-viz-body { padding: 10px 6px; }
  .r-full-page .r-viz .r-src, .r-full-page .r-viz .r-chart-legend { padding-left: 6px; padding-right: 6px; }
  .r-heat { grid-template-columns: 112px repeat(4, minmax(0, 1fr)); }
  .r-heat-h { font-size: 9.5px; letter-spacing: -0.01em; }
  .r-heat-n { font-size: 10.5px; letter-spacing: -0.01em; text-overflow: clip; }
  .r-heat-c { font-size: 11px; }
}
/* Между 901 и 1240 px (ноутбук с масштабом 125–150 %) — тот же настольный каркас, только навигация уже.
   Раньше тут включалась телефонная строка содержания внутри двухколоночной сетки, и страница разваливалась. */
@media (min-width: 901px) and (max-width: 1240px) {
  .r-full-page .article-layout { grid-template-columns: 196px minmax(0, 1fr); gap: 32px; padding-left: 24px; padding-right: 24px; }
  .r-full-page .toc-sticky a { font-size: 13px; padding: 8px 8px 8px 10px; }
  .r-full-page .r-figs { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .r-full-page .r-fig { padding: 14px 14px; }
  .r-full-page .r-fig b, .r-full-page .r-fig--hot b { font-size: 26px; }
  .r-full-page .r-fig span { font-size: 12.5px; }
  .r-full-page .r-tbl--full .r-tbl-scroll { overflow-x: auto; }
}
@media (max-width: 900px) {
  .r-full-page .article-layout { grid-template-columns: minmax(0, 1fr); }
}
.r-full-page .r-wide { padding-left: 0; padding-right: 0; }
/* ============================================================
   ПРИЗЫВЫ К ДЕЙСТВИЮ в исследовании: тихая врезка в конце раздела,
   карточка под навигацией, форма в разделе «Персональный замер».
   ============================================================ */
.r-cta {
  display: flex; align-items: center; gap: 20px; max-width: 720px; margin: 44px 0 0;
  padding: 18px 20px 18px 22px; border-radius: 14px; background: var(--r-hot-soft);
  border: 1px solid rgba(232, 115, 12, .28); border-left: 4px solid var(--r-hot);
}
.r-full-page .r-body .r-cta p { flex: 1; margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--b-ink); }
.r-cta p b { display: block; font-size: 16.5px; margin-bottom: 2px; }
.r-cta button, .r-nav-cta button {
  flex: none; border: 0; cursor: pointer; border-radius: 10px; padding: 12px 18px;
  font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--r-white); background: var(--r-deep); transition: background .15s, transform .15s;
}
.r-cta button:hover, .r-nav-cta button:hover { background: var(--r-deep-hover); transform: translateY(-1px); }
.r-nav-cta { margin: 14px 4px 4px; padding: 14px 12px 12px; border-top: 1px solid var(--r-line); }
.r-nav-cta b { display: block; font-size: 13.5px; line-height: 1.35; color: var(--b-ink); margin-bottom: 10px; }
.r-nav-cta button { width: 100%; padding: 10px 12px; font-size: 13.5px; }
@media (max-width: 720px) {
  .r-cta { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
  .r-cta button { width: 100%; padding: 13px 16px; }
}
.r-cta-free {
  display: inline-block; margin-bottom: 6px; padding: 3px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--r-white); background: var(--r-hot);
}
.r-full-page .related-section { max-width: 1040px; margin-top: 64px; }
/* «Читайте также» на широкой странице исследования — три карточки в ряд, на телефоне списком как в блоге */
@media (min-width: 901px) {
  .r-full-page .related-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
  .r-full-page .related-card { padding: 20px; border-radius: 14px; background: var(--r-tint); border: 1px solid var(--r-tint-line); transition: transform .15s, box-shadow .15s; }
  .r-full-page .related-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(12, 40, 36, .08); }
  .r-full-page .related-card h4 { font-size: 17px; line-height: 1.3; }
  .r-full-page .related-card-desc { font-size: 14px; }
  .r-full-page .related-card .card-meta { margin-top: auto; padding-top: 12px; }
}
/* линии над заголовками разделов убраны (решение Андрея 20.09.2026) — раздел отделяется воздухом */
.r-full-page .r-body > h2, .r-full-page .r-appendix h2 { border-top: 0; padding-top: 0; margin-top: 64px; }
.r-full-page .r-body > .r-cta + h2 { margin-top: 44px; }
.r-cta.r-cta--top { margin: 16px 0 4px; max-width: 740px; }
.r-cta.r-cta--top p { flex: 1; margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--b-ink); }
.r-cta.r-cta--top { margin-bottom: 16px; }
/* концовка — один блок: текст предложения и сразу форма; заголовок панели скрыт, он повторял бы шапку блока */
.r-full-page .r-body > .lead-inline { margin-top: 20px; }
.r-full-page .r-body > .lead-inline .lead-inline-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.r-full-page .r-body > .lead-inline { max-width: 720px; }
/* ============================================================
   СТАТЬЯ И КЕЙС в оформлении исследования (ArticleDoc.astro): то, чего нет
   в исследовании — картинки, цитаты, простые таблицы, частые вопросы.
   ============================================================ */
.r-article-page .r-body figure { margin: 28px 0; max-width: 900px; }
.r-article-page .r-body figure img, .r-article-page .r-body > p > img {
  display: block; max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--r-tint-line);
}
.r-article-page .r-body .r-tbl td, .r-article-page .r-body .r-tbl th { font-size: 14.5px; line-height: 1.5; }
/* первая строка как шапка — только у таблиц без thead (старые статьи из WordPress); таблицы из Markdown шапку имеют */
.r-article-page .r-body .r-tbl table:not(:has(thead)) tr:first-child td { background: var(--r-tint); font-weight: 700; }
.r-article-page .r-body h2 strong, .r-article-page .r-body h3 strong { font-weight: inherit; }
.r-article-page .r-body a:not(.related-card) { color: var(--r-deep); text-underline-offset: 3px; }
.r-article-page .r-head { margin-bottom: 8px; }
.r-article-page .r-body > .r-tbl { margin-left: 0; margin-right: 0; width: auto; max-width: min(900px, 100%); contain: inline-size; }
.r-article-page .r-body p, .r-article-page .r-body li, .r-article-page .r-body h2, .r-article-page .r-body h3 { overflow-wrap: break-word; }
/* у статей заголовки разделов длинные: в навигации не больше двух строк, полный текст — в подсказке */
@media (min-width: 901px) {
  .r-article-page .toc-sticky a { align-items: flex-start; }
  .r-article-page .toc-sticky a > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Приглушённая палитра графиков: насыщенный оранжевый рядом с почти чёрным зелёным на 40 полосах давил на глаз.
   Те же оттенки, но светлее и спокойнее; акцентный оранжевый остаётся у кнопок, плашек и рамки фаворита. */
.r-full-page .r-chart rect { rx: 4; }
.r-stack-bar i.f-s1 { color: var(--r-white); }
.r-heat-c.is-dark { color: var(--b-ink); font-weight: 700; }
/* Палитра графиков — середина между исходной и приглушённой; подписи рядов и значения темнее, чтобы читались сразу */
.r-full-page .r-chart .lbl { fill: var(--b-ink); font-weight: 500; }
.r-full-page .r-chart .val { fill: var(--b-ink-secondary); font-weight: 600; }
.r-full-page .r-chart-legend { color: var(--b-ink); }
.r-heat-c { background: rgba(30, 110, 106, calc(var(--a, 0) * .8)); }
.r-heat-h { color: var(--b-ink); }
/* ============================================================
   ПАЛИТРА ГРАФИКОВ, решение Андрея 20.09.2026: без оранжевого.
   Зелёный — ряд с большими значениями (главный), серый — ряд с меньшими.
   В графике из одного ряда полосы зелёные. Оранжевый остаётся только у кнопок и плашек.
   ============================================================ */
.r-full-page .r-chart .f-alice, .r-full-page .r-chart .f-google, .r-full-page .r-chart .f-organic { fill: var(--g-main); }
.r-full-page .r-chart-legend i.f-alice, .r-full-page .r-chart-legend i.f-google, .r-full-page .r-chart-legend i.f-organic { background: var(--g-main); }
/* Алиса против Google: у Google доли выше — он зелёный */
.r-full-page .r-chart:has(.f-google) .f-alice { fill: var(--g-minor); }
.r-full-page .r-chart:has(svg .f-google) .r-chart-legend i.f-alice { background: var(--g-minor); }
/* первая десятка против цитаты: в десятке доли выше — она зелёная, цитата серая */
.r-full-page .r-chart:has(.f-organic) .f-alice, .r-full-page .r-chart:has(.f-organic) .f-google { fill: var(--g-minor); }
.r-full-page .r-chart:has(svg .f-organic) .r-chart-legend i.f-alice, .r-full-page .r-chart:has(svg .f-organic) .r-chart-legend i.f-google { background: var(--g-minor); }
/* состав источников, кольца, типы страниц: главное зелёным, второе серым, дальше светлые тона */
.r-stack-bar i.f-s2 { color: var(--b-ink); }
.r-donut figcaption em.t-s2 { color: var(--r-legend-2); }
.r-heat-c.is-max { box-shadow: inset 0 0 0 2px var(--r-ink-deep); }
/* проценты внутри сегментов: на зелёном белые, на светлых тёмные */
.r-full-page .r-chart .val.onseg1 { fill: var(--r-white); }
.r-full-page .r-chart .val.onseg2, .r-full-page .r-chart .val.onseg3, .r-full-page .r-chart .val.onseg4 { fill: var(--b-ink); }
/* ============================================================
   ТЕЛЕФОН: кегль и воздух. Было 16/25.6 — мельче, чем у vc.ru (17/26) и Medium (18/28),
   а Montserrat ещё и светлее по начертанию. Основной текст 17 px, мелкие подписи не меньше 14 px.
   ============================================================ */
@media (max-width: 720px) {
  .r-full-page .r-body p { margin-bottom: 20px; }
  .r-full-page .r-body li { margin-bottom: 10px; }
  .r-full-page .r-body > ul, .r-full-page .r-body > ol { margin-bottom: 22px; }
  .r-full-page .r-body > h2 { font-size: 25px; line-height: 1.22; margin: 60px 0 20px; }
  .r-full-page .r-body h3 { font-size: 20px; line-height: 1.3; margin: 40px 0 14px; }
  .r-full-page .r-body h4 { font-size: 17.5px; line-height: 1.35; margin: 30px 0 10px; }
  .r-full-page .r-body p.r-src { font-size: 14px; line-height: 1.5; margin: 10px 0 28px; }
  .r-full-page .article-meta { font-size: 15px; }
  .r-full-page .r-hero-strip span, .r-full-page .r-strip span { font-size: 14px; line-height: 1.4; }
  .r-full-page .r-fig span { font-size: 15px; line-height: 1.45; }
  .r-full-page .r-fig, .r-full-page .r-fig--hot { padding: 16px; }
  .r-full-page .r-contents a { font-size: 16.5px; padding: 12px; }
  .r-full-page .r-method summary { font-size: 16.5px; }
  .r-full-page .r-body .r-method-body p, .r-full-page .r-body .r-method-body li { font-size: 15.5px; line-height: 1.6; }
  .r-full-page .r-body .r-cta p { font-size: 16px; line-height: 1.5; }
  .r-full-page .r-cta p b { font-size: 17.5px; line-height: 1.35; margin-bottom: 4px; }
  .r-full-page .r-cta button { font-size: 15.5px; padding: 14px 16px; }
  .r-full-page .r-key { padding: 18px; }
  .r-full-page .r-tbl th { font-size: 11.5px; line-height: 1.3; padding: 10px 10px; }
  .r-full-page .r-tbl td { font-size: 14px; line-height: 1.45; padding: 11px 10px; }
  .r-full-page .r-chart-legend { font-size: 14px; gap: 8px 14px; }
  .r-full-page .r-donut figcaption { font-size: 15px; }
  .r-full-page .r-donut figcaption span { font-size: 13.5px; }
  .r-full-page .r-stack-row > span { font-size: 14.5px; }
  .r-full-page .r-stack-bar { height: 34px; }
  .r-full-page .r-stack-bar i { font-size: 13px; }
  .r-full-page .lead-inline-sub { font-size: 16px; line-height: 1.5; }
  .r-full-page .toc-toggle-label { font-size: 15px; }
  .r-full-page .toc-sticky a { font-size: 16px; }
  .r-full-page .r-tbl, .r-full-page .r-chart, .r-full-page .r-figs { margin-top: 22px; margin-bottom: 14px; }
}

/* полоса прогресса чтения вверху страницы-документа */
.r-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--r-hot); transform: scaleX(0); transform-origin: 0 50%; z-index: 60; transition: transform .1s linear; }

/* блок «Как создаются наши статьи» в шапке документа — по левому краю, как вся страница */
.r-full-page .editorial-wrap { display: block; text-align: left; margin: 16px 0 0; max-width: 720px; }
.r-full-page .editorial-process { text-align: left; margin-left: 0; margin-right: 0; }

/* Частые вопросы в исследовании — раскрывашки как в статьях (14.10.2026), в ширину текстовой колонки */
.r-full-page .r-body > .faq-item { max-width: 720px; }
.r-full-page .r-body > .faq-item .faq-a p { max-width: none; }