/* Тема «paper»: белый фон как у Callibri, второй цвет #ff7051.
   Плашки с изображением — серые как у Callibri; остальные акценты #ff7051 (решение владельца 20.10.2026). */
:root {
  --paper: #ffffff;
  --text: #1f1f1f;
  --text-2: #3d3c39;
  --muted: #6f6d66;          /* 5,2:1 на белом; было #85837c — 3,8:1 (аудит #64) */
  --toc-ink: #6c7378;          /* содержание справа — оттенок Callibri, затемнён до 4,8:1 (аудит #64) */
  --rule: #dcdad3;
  --line: #1b1b1b;
  --accent: #ff7051;
  --accent-strong: #b83d25; /* оранжевый для читаемых hover/open состояний текста */
  --accent-soft: #fff1ec;   /* фон кнопок слайдера шагов при наведении */
  --accent-line: #ffc4b5;
  --grid: #f0e2dc;          /* линии сводной таблицы */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --accent-ink: #1b1b1b;
  --band: #f3f3f3;
  --dot: var(--accent);
  --link: #1b1b1b;
  --pro: #2c7a4b;
  --con: #b4452c;

  /* «Жидкое стекло» на светлом фоне */
  --glass: rgba(255, 255, 255, .5);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-line: rgba(27, 27, 27, .1);
  --glass-hi: rgba(255, 255, 255, .95);
  --glass-shadow: 0 1px 2px rgba(27, 27, 27, .04), 0 18px 40px -22px rgba(27, 27, 27, .18);
  --blur: 18px;

  /* Шрифты и шкала размеров — по эталону Callibri (Inter 400/600/700, текст 18/27, H1 56, H2 24). Моноширинный — только цифры и мелкие подписи. */
  --font-head: 'Inter', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'Inter', 'Segoe UI', sans-serif;  /* инициалы и подпись «Содержание»; JetBrains Mono убран вместе с Google Fonts */

  --col: 960px;
  --toc: 220px;
  --gap: 56px;
  --radius: 18px;
}

/* Общие стили шаблона мини-сайта. Подача — по образцу статьи Callibri: H1, под ним автор и дата; справа закреплённое
   содержание с подсветкой текущего раздела; иллюстрация внутри колонки, FAQ на серой полосе с выносом влево.
   Минимализм, без плашек-тегов; обзоры — без иконок и оценок. Цвета и шрифты — из темы (themes/*.css). */
/* Шрифт хранится у себя (аудит #64): Inter, wght 400–700, кириллица и латиница — template/fonts/subset.py.
   Раньше подключался Google Fonts и задерживал первую отрисовку на мобильном на секунды. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-ru.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B0, U+00B1, U+00B7, U+00BB, U+00D7, U+0400-045F, U+0490-0491, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2060, U+20BD, U+2116, U+2122, U+2190-2193, U+2212;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 18px/1.5 var(--font-body); overflow-x: clip; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
p { margin: 0 0 1.1em; }
b, strong { font-weight: 700; }
img { max-width: 100%; height: auto; display: block; }
.mono { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 3px; }

/* Страница: колонка текста + содержание справа */
.page { max-width: calc(var(--col) + var(--gap) + var(--toc) + 56px); margin: 0 auto; padding: 72px 28px 0; }
.page:has(> .site-head) { padding-top: 0; }

/* Шапка сайта (22.10.2026): логотип слева и тонкая линия. Меню нет — разделы в содержании справа.
   Знак при наведении чуть поворачивается, как наклонённые от руки значки и цифры на иллюстрациях. */
.site-head { display: flex; align-items: center; height: 88px; margin-bottom: 64px; border-bottom: 1px solid var(--rule); }
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; border-radius: 10px; }
.logo__mark { width: 40px; height: 40px; flex: none; transition: transform .35s var(--ease-out); }
.logo__name { font: 400 18px/1.2 var(--font-body); color: var(--muted); white-space: nowrap; }
.logo__name b { font-weight: 700; color: var(--text); letter-spacing: -.01em; }
@media (hover: hover) { .logo:hover .logo__mark { transform: rotate(-10deg); } }
@media (prefers-reduced-motion: reduce) { .logo__mark { transition: none; } }
.post__head { margin-bottom: 56px; }
.app { display: grid; grid-template-columns: minmax(0, var(--col)) var(--toc); gap: var(--gap); align-items: start; }
.main { min-width: 0; }

/* Содержание справа: тонкая линия, текущий раздел подсвечен */
.toc { align-self: stretch; }
.toc__list { position: sticky; top: 40px; max-height: calc(100vh - 80px); overflow: auto; scrollbar-width: none;
  list-style: none; margin: 0; padding: 0; }
.toc__list a { display: block; padding: 5px 0 5px 14px; border-left: 1px solid var(--rule); font-size: 14px; line-height: 1.3; color: var(--toc-ink); text-decoration: none; transition: color .2s ease; }
.toc__list a:hover { color: var(--text); }
.toc__list a.is-active { color: var(--text); border-left: 2px solid var(--accent); padding-left: 13px; }

/* Заголовок, автор, дата */
.h1 { font: 600 clamp(34px, 4.2vw, 56px)/1.21 var(--font-body); letter-spacing: -.01em; margin: 0 0 48px; max-width: 22em; }
.byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.author { display: inline-flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; margin: -10px 0 -10px -10px; border-radius: 22px;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease; cursor: default; }
.author:hover, .author:focus-visible { background: #fff; box-shadow: 0 10px 30px -10px rgba(27, 27, 27, .22), 0 1px 2px rgba(27, 27, 27, .05); transform: translateY(-1px); outline: none; }
.avatar { display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: 50%; background: var(--text); color: var(--paper); font: 700 15px/1 var(--font-mono); }
.avatar--photo { background: var(--paper); overflow: hidden; }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; }
.author__who { display: flex; flex-direction: column; line-height: 1.4; }
.author__who b { font-size: 16px; font-weight: 600; }
.author__who span { font-size: 16px; color: var(--text); }
.byline__date { margin: 0; font-size: 16px; color: var(--muted); }
.byline__date time { color: var(--text); }
.about-author { background: var(--paper); }
.about-author > .h3 { margin-bottom: 28px; }
.about-author__body { display: flex; align-items: flex-start; gap: 28px; }
.about-author__portrait { width: 120px; height: 120px; font-size: 28px; }
.about-author__copy { min-width: 0; }
.about-author__name { font: 600 22px/1.4 var(--font-body); margin: 0 0 4px; }
.about-author__role { color: var(--text-2); font-size: 16px; margin-bottom: 16px; }
.about-author__copy > p:last-child { margin-bottom: 0; }
.toc-m { display: none; }
.lead p { font-size: 18px; line-height: 1.5; }
.lead p:last-child { margin-bottom: 0; }

/* Разделы */
.sec { padding-top: 64px; }
.h3 { font: 600 24px/1.3 var(--font-body); margin: 0; }

/* Выделенный блок с прозрачной иллюстрацией: симметричные отступы внутри колонки */
.illustration { margin: 56px 0 8px; padding: 48px; background: var(--band); border-radius: 40px; }
.illustration img { width: 100%; height: auto; }

/* FAQ: белая карточка на серой полосе от левого края экрана */
.band--card { position: relative; display: block; padding: 0 48px 48px 0; margin: 72px 0 8px; }
.band--card::before { content: ''; position: absolute; z-index: -1; top: 48px; bottom: 0; right: 0; left: -100vw; background: var(--band); border-radius: 0 40px 40px 0; }
.band__card { background: #fff; border-radius: 40px; padding: 48px; box-shadow: 0 4px 32px rgba(31, 31, 31, .1); }
.faq__title { margin-bottom: 20px; }
.faq__question { border-bottom: 1px solid var(--rule); }
.faq__question:last-child { border-bottom: 0; }
.faq__question summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; list-style: none; cursor: pointer; font: 600 18px/1.5 var(--font-body); transition: color .28s ease-in-out; }
.faq__question summary::-webkit-details-marker { display: none; }
.faq__question summary:focus-visible { outline-color: var(--accent-strong); }
.faq__question[open]:not(.is-closing) summary { color: var(--accent-strong); }
.faq__question.is-closing summary { color: var(--text); }
.faq__icon { position: relative; flex: none; width: 20px; height: 20px; color: var(--accent); transition: transform .45s var(--ease-out); }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; background: currentColor; border-radius: 1px; }
.faq__icon::before { width: 16px; height: 2px; left: 2px; top: 9px; }
.faq__icon::after { width: 2px; height: 16px; left: 9px; top: 2px; transition: transform .45s var(--ease-out), opacity .3s ease-in-out; }
.faq__question[open]:not(.is-closing) .faq__icon { transform: rotate(180deg); }
.faq__question[open]:not(.is-closing) .faq__icon::after { transform: rotate(90deg); opacity: 0; }
.faq__answer { margin: 0; padding: 0 44px 20px 0; font-size: 18px; line-height: 1.5; }
.faq__answer p { margin: 0; }
@media (hover: hover) {
  .faq__question summary:hover { color: var(--accent-strong); }
}
html.motion-reduce { scroll-behavior: auto; }
.motion-reduce .faq__icon, .motion-reduce .faq__icon::after { transition-duration: .12s; }

/* «Как выбрать»: шаги на серой полосе от левого края экрана, как у FAQ. Карточка — иллюстрация с номером шага
   слева (путь чтения: цифра → картинка → заголовок), заголовок и текст справа; размеры по промоблоку Callibri (заголовок 28/40, текст 20/28, скругление 40); карточка крупнее на ~30% по решению владельца: отступы 64, иллюстрация 208, высота от 344.
   Смена — как у слайдера базы знаний konsultai.ru: новая карточка «поднимается» из уменьшенного положения сверху.
   Перетаскивание мышью и пальцем; без JS (.is-ready нет) шаги идут списком. */
.choose .h3 { margin-bottom: 20px; }
.choose__band { position: relative; margin-top: 32px; padding: 0 48px 48px 0; }
.choose__band::before { content: ''; position: absolute; z-index: -1; top: 48px; bottom: 0; right: 0; left: -100vw; background: var(--band); border-radius: 0 40px 40px 0; }
.steps__viewport { display: flex; flex-direction: column; gap: 16px; }
.step { display: flex; align-items: center; gap: 40px; min-height: 344px; background: #fff; border-radius: 40px; padding: 64px; box-shadow: 0 4px 32px rgba(31, 31, 31, .1); }
.step__body { flex: 1; min-width: 0; }
.step__body h3 { font: 600 28px/40px var(--font-body); margin: 0 0 16px; }
.step__body p { font-size: 20px; line-height: 28px; margin: 0; }
.step__art { order: -1; flex: none; width: 208px; aspect-ratio: 1; display: grid; place-items: center; }
.step__art img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.step__art--empty { border: 1.5px dashed var(--rule); border-radius: 24px; }

.steps.is-ready .steps__viewport { display: grid; gap: 0; touch-action: pan-y; cursor: grab; user-select: none; }
.steps.is-ready .steps__viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 40px; }
.steps.is-dragging .steps__viewport { cursor: grabbing; }
.steps.is-ready .step { grid-area: 1 / 1; min-width: 0; transform-origin: center top; opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .44s cubic-bezier(.22, 1, .36, 1), opacity .2s var(--ease-out), visibility 0s .44s;
  transition-timing-function: linear(0, 0.049, 0.156, 0.283, 0.408, 0.522, 0.62, 0.702, 0.769, 0.822, 0.864, 0.897, 0.922, 0.941, 0.956, 0.967, 0.976, 0.982, 0.987, 0.99, 0.993, 0.995, 1), var(--ease-out), linear; }
.steps.is-ready .step[data-depth="0"] { z-index: 3; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.steps.is-ready .step[data-depth="1"] { z-index: 2; transform: translateY(-34px) scale(.952); }
.steps.is-ready .step[data-depth="2"] { z-index: 1; transform: translateY(-68px) scale(.912); }
.steps.is-dragging .step[data-depth="0"] { transition: none; }
.steps__status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.motion-reduce .steps.is-ready .step { transition-duration: .12s, .12s, 0s; transition-timing-function: var(--ease-out); transform: none; }
html.motion-reduce .steps.is-ready .step:not([data-depth="0"]) { transition-delay: 0s, 0s, .12s; }

/* Обзор сервиса — без контейнера и линий, как у Callibri */
.item { padding-top: 64px; }
.item:first-of-type { padding-top: 8px; }
.item__head { margin-bottom: 24px; }
.item__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.item__top .item__head { margin-bottom: 0; }
/* Значок «Выбор редакции» — на правом краю колонки, нижний край по нижнему краю заголовка обзора (решение владельца
   21.10.2026: не опускаться в текст). Лишняя высота уходит вверх, в пустое место над заголовком. Рисунок уже наклонён. */
.item__badge { flex: none; width: 220px; height: auto; margin-top: -14px; user-select: none; }
.item p { font-size: 18px; line-height: 1.5; }
.item__interface { margin: 28px 0 32px; }
.item__interface img { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
.item__interface figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.item__image-open { display: block; cursor: zoom-in; border-radius: var(--radius); }
.item__image-open:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 4px; }
/* Просмотр интерфейсов статьи по образцу Callibri: тёмный экран, подпись и закрытие сверху. */
html.image-viewer-open { overflow: hidden; }
.image-viewer { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .8); color: #fff; }
.image-viewer::backdrop { background: transparent; }
.image-viewer[open] { animation: image-viewer-in .18s ease-out; }
.image-viewer__stage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 80px 24px 24px; }
.image-viewer__image { flex: 0 1 auto; min-width: 0; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.image-viewer__bar { position: absolute; inset: 0 0 auto; display: flex; align-items: center; gap: 16px; min-height: 48px; padding: 0 10px 0 16px; background: rgba(0, 0, 0, .7); }
.image-viewer__caption { flex: 1; min-width: 0; margin: 0; padding: 10px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 18px/28px var(--font-body); }
.image-viewer__close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #fff; cursor: pointer; transition: background .2s ease; }
.image-viewer__close:hover { background: rgba(255, 255, 255, .15); }
.image-viewer__close:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
html.motion-reduce .image-viewer[open] { animation-duration: .1s; }
@keyframes image-viewer-in { from { opacity: 0; } to { opacity: 1; } }
.item__lbl { margin-bottom: 8px; }
.item__fact { margin-bottom: 8px; }
.items__note { margin: 0 0 32px; font-size: 16px; color: var(--muted); }
.dots { list-style: none; margin: 0 0 1.1em; padding: 0; }
.dots li { position: relative; padding: 6px 0 6px 20px; font-size: 18px; line-height: 1.5; }
.dots li::before { content: ''; position: absolute; left: 0; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
/* Баннер konsultAI: белая карточка с тенью, размеры и шрифты карточек «Как выбрать».
   Иллюстрация в своей колонке с отступом 64 px от края. Hover кнопки — тень за .3s как у Callibri. */
.promo { display: grid; grid-template-columns: minmax(0, 1fr) 288px; align-items: center; gap: 40px; min-height: 344px; margin: 32px 48px 0 0; padding: 64px; background: #fff; border-radius: 40px; box-shadow: 0 4px 32px rgba(31, 31, 31, .1); }
.promo__copy { min-width: 0; }
.item .promo__title { font: 600 28px/40px var(--font-body); margin: 0 0 16px; }
.item .promo__text { font-size: 20px; line-height: 28px; margin: 0 0 12px; color: var(--text-2); }
.promo__btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 17px/1 var(--font-body); text-decoration: none; transition: box-shadow .3s ease; }
.promo__btn:hover, .promo__btn:focus-visible { box-shadow: 0 10px 20px rgba(31, 31, 31, .24); }
.promo__btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.promo__art { width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
/* Сводная таблица: рамка со скруглением, шапка в мягком оттенке акцента, сетка тонких линий, цена справа.
   Заключение — обычный текст колонки. */
.summary .h3, .conclusion .h3 { margin-bottom: 24px; }
.sumtab { border: 1px solid var(--grid); border-radius: var(--radius); overflow: hidden; }
.sumtab table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.sumtab th, .sumtab td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--grid); border-right: 1px solid var(--grid); }
.sumtab tr > :last-child { border-right: 0; }
.sumtab tbody tr:last-child > * { border-bottom: 0; }
.sumtab thead th { background: var(--accent-soft); font-weight: 600; }
.sumtab tbody th { font-weight: 600; }
.sumtab tbody th a { text-decoration: none; }
.sumtab tbody th a:hover { color: var(--accent-strong); }
.sumtab .sumtab__price { text-align: right; white-space: nowrap; }
.sumtab td.sumtab__price span { display: block; font-size: 14px; color: var(--muted); white-space: normal; }
.sumtab__note { margin-top: 16px; font-size: 15px; color: var(--muted); }
.conclusion p { font-size: 18px; line-height: 1.5; }
/* Подвал — без рамки */
/* Страница 404 */
.not-found { min-height: 40vh; max-width: 40em; }
.not-found a { color: var(--accent-strong); }

.foot { margin-top: 96px; padding: 28px 0 40px; border-top: 1px solid var(--rule); }
.foot p { font-size: 14px; color: var(--muted); }
.foot p:last-child { margin: 0; }
.foot__credit a { color: var(--accent-strong); text-decoration: none; }

/* Планшет и телефон: содержание — раскрывающимся списком под автором */
@media (max-width: 1100px) {
  .page { padding: 32px 16px 0; }
  .site-head { height: 64px; margin-bottom: 32px; }
  .app { grid-template-columns: 1fr; }
  .toc { display: none; }
  .toc-m { display: block; margin-top: 18px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .toc-m summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; padding: 12px 0; font: 700 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
  .toc-m summary::-webkit-details-marker { display: none; }
  .toc-m summary::after { content: '+'; }
  .toc-m[open] summary::after { content: '−'; }
  .toc-m__list { list-style: none; margin: 0; padding: 0 0 12px; }
  .toc-m__list a { display: block; padding: 6px 0; font-size: 16px; color: var(--text-2); text-decoration: none; }
  .toc-m__list a.is-active { color: var(--accent-strong); }
  .post__head { margin-bottom: 32px; }
  .h1 { margin-bottom: 28px; }
}
@media (max-width: 760px) {
  .logo { gap: 10px; }
  .logo__mark { width: 32px; height: 32px; }
  .logo__name { font-size: 16px; }
  .author { max-width: 100%; }
  .author__who { min-width: 0; }
  .about-author__body { flex-direction: column; gap: 20px; }
  .image-viewer__stage { padding: 64px 12px 12px; }
  .image-viewer__caption { font-size: 14px; line-height: 24px; }
  .illustration { padding: 32px 24px; border-radius: 28px; }
  .h1 { font-size: 34px; }
  .sec { padding-top: 48px; }
  .item__top { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
  .item__badge { width: 200px; margin: 0 0 4px -4px; }
  .choose__band { padding: 0 0 32px; }
  .choose__band::before { top: 32px; right: -16px; left: -16px; border-radius: 0; }
  .step { flex-direction: column; align-items: stretch; gap: 24px; min-height: 0; padding: 28px 22px; border-radius: 28px; }
  .step__art { order: -1; width: min(100%, 240px); align-self: center; }
  .step__body h3 { font-size: 24px; line-height: 32px; margin-bottom: 12px; }
  .band--card { padding: 0 0 32px; }
  .band--card::before { top: 32px; right: -16px; left: -16px; border-radius: 0; }
  .band__card { padding: 28px 22px; border-radius: 28px; }
  .faq__question summary { gap: 16px; padding: 18px 0; }
  .faq__answer { padding-right: 0; }
  .promo { grid-template-columns: 1fr; gap: 24px; min-height: 0; margin-right: 0; padding: 28px 22px; border-radius: 28px; }
  .promo__art { order: -1; width: min(100%, 320px); justify-self: center; }
  .item .promo__title { font-size: 24px; line-height: 32px; margin-bottom: 12px; }
  .promo__btn { width: 100%; justify-content: center; }
  .sumtab { border: 0; border-radius: 0; overflow: visible; }
  .sumtab table, .sumtab tbody, .sumtab tr, .sumtab th, .sumtab td { display: block; }
  .sumtab thead { display: none; }
  .sumtab tr { margin-bottom: 12px; padding: 16px 18px; border: 1px solid var(--grid); border-radius: var(--radius); }
  .sumtab th, .sumtab td { padding: 3px 0; border: 0; }
  .sumtab tbody th { font-size: 17px; margin-bottom: 6px; }
  .sumtab td { display: grid; grid-template-columns: 96px 1fr; gap: 0 12px; }
  .sumtab td::before { content: attr(data-label); grid-row: span 2; color: var(--muted); font-size: 14px; line-height: 1.6; }
  .sumtab .sumtab__price { text-align: left; white-space: normal; }
}