/* ТОМОКО — раскладка внутренних страниц.
   Собирается скриптом tomoko-css из .build/page-*.css.
   Руками не править — правки затрутся. */

/* ═══ akcii ═══ */
/* ТОМОКО — страница «Акции — каталог» /akcii/.
   Снято 27.08.2026 с артбордов Figma U5M0ihzdUI9upBTwUAHZ42:
   десктоп 345:32077 (1440×2870) и мобильный
   «М · Акции» 345:15015 (375×3585).

   Страница из двух блоков: шапка страницы и сетка шести карточек акций.
   Карточка в макете — тот же компонент, что в секции «Акции» на главной
   (345:33848) и в подборке «Другие предложения» на детальной странице
   акции: белая коробка с волосяной обводкой, обложка 384×230 во всю
   ширину, оранжевый бейдж «АКЦИЯ» на 20/20, заголовок и строка
   «дата — ПОДРОБНЕЕ» по краям. Поэтому здесь НЕ пишется своя карточка:
   разметка берёт .tk-card-post (components.css) плюс .tk-promos__card /
   __body / __badge / __meta (sections.css) как есть, а класс .tk-promos
   на секции подтягивает её мобильные правила из mobile.css.

   Здесь ТОЛЬКО то, чего в системе не было: полоса крошек, шапка страницы
   и высота карточки каталога. Всё остальное взято как есть:
     • светлая шапка   — .tk-header--solid (components.css), заново не объявляем;
     • крошки          — .tk-breadcrumbs + .tk-breadcrumbs--slash (components.css);
     • кнопка записи   — .tk-btn + .tk-btn--primary (components.css): в макете
                         345:32123 заливка #237e33 = --c-brand-green;
     • сетка 3 колонки — .tk-grid + .tk-grid--3 (base.css): 384×3 + 24×2 = 1200,
                         просветы сошлись в ноль. Ряды «Ряд 1/2» из макета —
                         строки той же сетки;
     • бейдж «АКЦИЯ»   — .tk-chip + .tk-chip--accent (components.css)
                         с посадкой .tk-promos__badge (sections.css);
     • финальный блок  — .tk-final и подвал (components.css + sections.css).
   Канонические классы не переопределяются: где макет расходится
   с компонентом, рядом стоит модификатор с префиксом .tk-akcii.
   Теней нет ни одной, элевация только волосяной обводкой.
   Точка перелома мобильных — 680, как во всей системе.

   Подключать после tokens.css → base.css → components.css → sections.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Хлебные крошки (Figma 345:32126) ══════════════════════════════════
   В макете крошки лежат внутри кадра «Шапка страницы» первой строкой.
   На сайте они вынесены над <main>: это навигация, а не содержание, —
   так же на всех остальных внутренних страницах. Здесь только отбивка
   от шапки: 56 из макета (345:32126, y=56). Кегль оставлен канонический
   12 (в макете 13 — ступени 13 в шкале нет).

   ПОВТОР: та же строчка стоит в кусках page-akciya.css, page-kontakty.css,
   page-licenzii.css, page-o-klinike.css, page-pacientu.css, page-price.css,
   page-usluga.css, page-uslugi.css, page-vrach.css, page-vrachi.css,
   page-zabolevanie.css и page-zabolevaniya.css — это хром всех внутренних
   страниц, а не свойство именно этой. При следующей уборке .tk-crumbs
   место в components.css, рядом с .tk-header--solid. */
 /* 56: ступени 56 в ритме нет */


/* ═══ 2. Шапка страницы (Figma 345:32125) ══════════════════════════════════
   Кадр 1440×304: поля 120 держит .tk-container, вертикальные 56 — здесь,
   просветы между крошками, заголовком и лидом 24. Крошки лежат выше,
   у них своя обёртка, поэтому верхнее поле блока — ровно просвет 24.
   Сумма сходится: 56 + 16 + 24 + 70 + 24 + 58 + 56 = 304. */

.tk-akcii__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  padding-top: var(--s-6);
  padding-bottom: calc(var(--s-12) + var(--s-2)); /* те же 56 из макета */
}

/* Заголовок 76 — ступень --t-display-sm, заведённая в tokens.css ровно под
   этот кегль; тем же кеглем набраны /uslugi/, /vrachi/, /pacientu/ и
   остальные внутренние. ОТКЛОНЕНИЕ: в макете интерлиньяж 0.92 и трекинг
   −3px (−0.0395em), токен даёт 0.94 и −0.035em; берём токен, чтобы 76-й
   кегль не расползался сырыми пикселями по страницам. */
.tk-akcii__title {
  font-size: var(--t-display-sm-size);
  line-height: var(--t-display-sm-lh);
  letter-spacing: var(--t-display-sm-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: в макете у лида интерлиньяж 1.45, ступень body-lg даёт 1.29 —
   оставлен канонический, ради единой шкалы. Ширина меры — из макета
   (345:32128, w=760), токена ширины текстовой колонки нет. */
.tk-akcii__lead { max-width: 760px; }


/* ═══ 3. Сетка акций (Figma 345:32129) ═════════════════════════════════════
   Кадр 1440×1056: шесть карточек 384×470 в три колонки с просветом 24
   по обеим осям — это ровно .tk-grid + .tk-grid--3. Верхнего поля
   у секции нет: отбивку сверху дала шапка страницы, снизу — канонические 92.
   Сумма сходится: 470×2 + 24 + 92 = 1056.

   Выравнивание карточек по высоте ряда уже описано в sections.css
   (.tk-promos__list > li { display: flex } и .tk-promos__card { width: 100% }),
   класс .tk-promos на секции их подтягивает — здесь не повторяем. */

.tk-akcii { padding-bottom: var(--s-section); }

/* Высота карточки 470 = обложка 230 + текстовый блок 240. Естественной
   высоты столько не набирается: заголовок в каталоге редко занимает три
   строки, и коробка вышла бы примерно на 85 короче макета. На главной
   карточек три и они рядом с другими секциями, здесь же сетка — всё
   содержание страницы, и просадка была бы видна. Держим снизу.
   Базовый .tk-promos__card не трогаем: высота — свойство каталога,
   а не компонента, поэтому отдельный модификатор. */
.tk-akcii__card { min-height: 470px; }   /* макет 345:32131, h=470 */


/* ═══ 4. Адаптив ═══════════════════════════════════════════════════════════
   Точка перелома одна — 680, мобильный макет 345:15015. Поля и сжатую
   шкалу кеглей даёт tokens.css, колонки сетки — base.css: --3 становится
   двумя на 1100 и одной на 680, ровно как в мобильном макете.
   Метрику самой карточки (скругление 20, кадр 335×190, бейдж на 14/14,
   просветы текста) mobile.css уже задал для .tk-promos__card — повторять
   её здесь было бы дублем. */

@media (max-width: 1100px) {
  /* Ступени между heading-lg 50 и display-sm 76 в шкале нет — тот же
     промежуточный кегль, что у .tk-catalog__title и .tk-staff__title. */
  .tk-akcii__title { font-size: 52px; }
}

@media (max-width: 680px) {
  /* Медиазапрос обязателен: объявленный выше .tk-crumbs без него
     оставил бы на телефоне 56 вместо макетных 36 (345:15059, y=36).
     Значение — общие для сайта 32, разницу в 4 не разводим. */

  .tk-akcii__head {
    gap: var(--s-4);                 /* макет 14 → шаг 16 */
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);      /* макет 28 → шаг 32 */
  }
  /* ОТКЛОНЕНИЕ: в мобильном макете 345:15061 заголовок 36 / 1.0 / −1.3px.
     Ступени ни 34, ни 36 в шкале нет, а 34 — то значение, которым набраны
     мобильные заголовки /vrachi/, /uslugi/, /o-klinike/licenzii/ и
     /pacientu/zabolevaniya/. Берём его: два пункта не стоят третьего
     мобильного кегля заголовка на сайте. */
  .tk-akcii__title { font-size: 34px; letter-spacing: -0.03em; }
  .tk-akcii__lead  { max-width: none; }

  /* Высота 470 снимается: в один столбец карточка 335 набирает свои
     макетные 295 (190 обложки + 105 текста) сама, а фиксированная
     высота растянула бы её вдвое. */
  .tk-akcii__card { min-height: 0; }
}

/* ═══ akciya ═══ */
/* ТОМОКО — страница «Акция — детальная» /akcii/<slug>/.
   Снято 27.08.2026 с артборда Figma 345:32450 (1440×3497),
   файл U5M0ihzdUI9upBTwUAHZ42.

   Четыре блока: герой акции с фотографией, пара «что входит + условия»,
   ряд «кому подойдёт» и подборка других предложений. Здесь ТОЛЬКО то,
   чего в дизайн-системе не было: полоса крошек, герой, плашка состава,
   зелёная плашка условий, карточка «кому подойдёт» и отбивки подборки.
   Всё остальное взято как есть:
     • светлая шапка    — .tk-header--solid (components.css), заново не объявляем;
     • крошки           — .tk-breadcrumbs + .tk-breadcrumbs--slash (components.css);
     • кнопка записи    — .tk-btn + .tk-btn--primary (components.css): в макете
                          345:32496 и 345:32507 заливка #237e33 = --c-brand-green,
                          радиус 300, капс 14 / трекинг 0.1em — сошлось дословно;
     • кнопка в условиях — .tk-btn + .tk-btn--light (345:32541: белая на тёмном);
     • «ВСЕ АКЦИИ»      — .tk-btn + .tk-btn--secondary (обводка 1.5 --c-hairline);
     • чип «АКЦИЯ»      — .tk-chip + .tk-chip--accent (components.css);
     • сетки 3 колонки  — .tk-grid + .tk-grid--3 (base.css): 384×3 + 24×2 = 1200,
                          просветы совпали в ноль, своей раскладки не пишем;
     • карточка акции   — .tk-card-post + .tk-promos__card / __body / __badge /
                          __meta (components.css + sections.css). Подборка внизу
                          этой страницы — тот же компонент, что секция «Акции»
                          на главной, поэтому и мобильная её раскладка уже
                          описана в mobile.css, второй копии не заводим;
     • заголовки 50     — ступень .t-heading-lg (50 / 0.88 / -0.04em) сошлась
                          с макетом 345:32543 и 345:32555 дословно;
     • финальный блок   — .tk-final и подвал (components.css + sections.css).
   Канонические классы не переопределяются: где макет расходится
   с компонентом, рядом стоит модификатор с префиксом .tk-akciya-.
   Теней нет ни одной, элевация только цветом.
   Точка перелома мобильных — 680, как во всей системе.

   Подключать после tokens.css → base.css → components.css → sections.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Хлебные крошки (Figma 345:32500) ══════════════════════════════════
   В макете крошки лежат ВНУТРИ кадра «Герой акции», первой строкой текстовой
   колонки. На сайте они вынесены над <main>: это навигация, а не содержание,
   и так же сделано на всех остальных внутренних страницах. Сам компонент
   и модификатор со слэшем — в components.css, здесь только отбивка от шапки:
   56 из макета (крошки на y=56 внутри кадра 345:32498).
   Кегль оставлен канонический 12 (в макете 13 — ступени 13 в шкале нет).

   ПОВТОР: та же строчка стоит в кусках page-kontakty.css, page-o-klinike.css,
   page-pacientu.css, page-price.css, page-usluga.css, page-uslugi.css,
   page-vrach.css, page-vrachi.css и page-zabolevanie.css — это хром всех
   внутренних страниц, а не свойство именно этой. Значение везде одно;
   при следующей уборке .tk-crumbs место в components.css, рядом
   с .tk-header--solid и .tk-breadcrumbs--slash. */
 /* 56: ступени 56 в ритме нет */


/* ═══ 2. Герой акции (Figma 345:32498) ═════════════════════════════════════
   Кадр 1440×563: поля 120 держит .tk-container, вертикальные 56/72 — здесь,
   просвет между колонками 48. Слева текст (632), справа фотография (520):
   632 + 48 + 520 = 1200, ширина текстовой колонки не задаётся, её выводит
   flex. Крошки лежат выше, у них своя обёртка, поэтому верхнее поле блока —
   ровно просвет макета 22 → шаг 24.
   Сумма сходится по текстовой колонке: 56 + 16 + 22 + 27 + 22 + 168 + 22 +
   87 + 22 + 49 + 72 = 563. Фотография в макете стоит на y=63.5, то есть
   ровно по центру рабочей высоты (563 − 56 − 72 − 420) / 2 = 7.5 от верха
   содержимого — отсюда align-items: center, а не собственный отступ. */

.tk-akciya-hero { padding-block: var(--s-6) calc(var(--s-16) + var(--s-2)); } /* 24 / 72 */

.tk-akciya-hero__inner {
  display: flex;
  align-items: center;
  gap: var(--s-12);        /* макет 48 */
}

.tk-akciya-hero__text {
  flex: 1 1 auto;
  min-width: 0;            /* иначе длинный лид распирает колонку */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);         /* макет 22 → шаг 24 */
}

/* Строка меток: чип «АКЦИЯ» и срок действия. Просвет 10 → шаг сетки 12. */
.tk-akciya-hero__marks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ОТКЛОНЕНИЕ МАКЕТА: срок набран 11 SemiBold, ступень label-12 задаёт
   12 Medium. Тот же случай, что у .tk-zabol-todo__eyebrow: кегль берём
   канонический, начертание — макетное. */
.tk-akciya-hero__until { font-weight: var(--w-semibold); }

/* ОТКЛОНЕНИЕ КЕГЛЯ: в макете 56 / 1.0 / -2.2px. Ступени 56 в шкале нет,
   и ни одна соседняя не подходит: --t-heading-lg даёт 50 (−11%),
   --t-display-sm — 76 (+36%). Заголовок этой страницы — не имя раздела,
   как на /vrachi/ или /uslugi/, а название самой акции, и набран мельче
   намеренно. Поэтому кегль оставлен сырым и замеренным (345:32504),
   трекинг переведён в em: −2.2 / 56 = −0.0393em. */
.tk-akciya-hero__title {
  font-size: 56px;
  line-height: 1.0;
  letter-spacing: -0.0393em;
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: в макете у лида кегль 19 и интерлиньяж 1.5, ступень body-lg
   даёт 20 / 1.29 — оставлен канонический, ради единой шкалы. То же решение
   принято на /vrachi/, /uslugi/ и /pacientu/zabolevaniya/. Ширину меры (632)
   задаёт сама колонка, отдельной max-width не нужно. */

/* Фотография 520×420, скругление 24 = --r-card (345:32508). */
.tk-akciya-hero__photo {
  flex: none;
  width: 520px;            /* макет 345:32508; токена ширины колонки нет */
  aspect-ratio: 520 / 420;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-mist);
}
.tk-akciya-hero__photo img { width: 100%; height: 100%; object-fit: cover; }


/* ═══ 3. Что входит и условия (Figma 345:32509) ════════════════════════════
   Две плашки в ряд: состав (740, тянется) и условия (420, фиксирована),
   просвет 40. 740 + 40 + 420 = 1200. Плашки выравниваются по верху —
   в макете они разной высоты (362 и 370). Верхнего поля у кадра нет:
   отбивку сверху дал герой, снизу — канонические 92. */

.tk-akciya-deal { padding-bottom: var(--s-section); }

.tk-akciya-deal__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-10);        /* макет 40 */
}


/* ── Плашка состава (345:32510) ──────────────────────────────────────────
   Карточка --c-mist: поля 28 сверху и снизу, 32 по бокам, скругление 24.
   Это не .tk-card-* из кита и не .tk-price-row — своя плашка страницы,
   поэтому и класс свой, без правки канонических компонентов.
   Высота сходится: 28 + 31 + 5×55 + 28 = 362. */

.tk-akciya-incl {
  flex: 1 1 auto;
  min-width: 0;
  padding: 28px var(--s-card);   /* макет 28 / 32: ступени 28 в ритме нет */
  background: var(--c-mist);
  border-radius: var(--r-card);
}

/* ОТКЛОНЕНИЕ КЕГЛЯ: в макете 28 / 1.1 / -0.8px. Ступени 28 в шкале нет,
   соседние — --t-subheading 24 (−14%) и --t-heading 35 (+25%); обе далеко,
   кегль оставлен сырым и замеренным (345:32511). Трекинг: −0.8 / 28 =
   −0.0286em. Начертание в макете Regular, а не Semibold, как у h3
   по умолчанию, — поэтому вес задаётся явно. */
.tk-akciya-incl__title {
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.0286em;
  font-weight: var(--w-regular);
}

/* Список состава. Собственной геометрии у него нет — всю несут строки;
   класс нужен ради сброса из base.css (ul[class]): без него у списка
   остаётся браузерный отступ 40 и маркеры. */
.tk-akciya-incl__list { list-style: none; margin: 0; padding: 0; }

/* Строки состава. Разделитель — волосяная линия СВЕРХУ каждой строки:
   так первая строка отбивается от заголовка, а под последней линии нет
   и она не висит у нижнего края плашки. Высота строки 55 = 16 + 23 + 16. */
.tk-akciya-incl__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);                     /* макет 16 */
  border-top: 1px solid var(--c-hairline);       /* волосяная линия: токена толщины нет */
}

/* ОТКЛОНЕНИЕ: макет 16 / 1.45, ступень body даёт 16 / 1.33 — кегль сошёлся,
   интерлиньяж поднят до макетного. */
.tk-akciya-incl__name { line-height: 1.45; }

/* ОТКЛОНЕНИЕ МАКЕТА: пометка набрана 13 SemiBold с трекингом 0.6px,
   ступень label-12 задаёт 12 Medium и трекинг 0.1em. Кегль и трекинг
   берём канонические, начертание — макетное; цвет фирменный зелёный. */
.tk-akciya-incl__mark {
  flex: none;
  color: var(--c-brand-green);
  font-weight: var(--w-semibold);
}


/* ── Плашка условий (345:32527) ──────────────────────────────────────────
   Карточка 420×370 с горизонтальным зелёным градиентом: в макете
   #268034 → #12301c слева направо, это ровно токен --g-green-x.
   Поля 32, просветы 16, скругление 24.
   Высота сходится: 32 + 13 + 16 + 49 + 16 + 23 + 16 + 46 + 16 + 46 + 16 +
   49 + 32 = 370. */

.tk-akciya-terms {
  flex: none;
  width: 420px;            /* макет 345:32527; токена ширины колонки нет */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);         /* макет 16 */
  padding: var(--s-card);  /* макет 32 */
  background: var(--g-green-x);
  color: var(--c-paper);
  border-radius: var(--r-card);
}

/* ОТКЛОНЕНИЕ МАКЕТА: надстрочник набран 11 SemiBold, ступень label-12
   задаёт 12 Medium. Тот же случай, что у .tk-akciya-hero__until. */
.tk-akciya-terms__eyebrow { font-weight: var(--w-semibold); }

.tk-akciya-terms__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);         /* макет 12 */
}

/* ОТКЛОНЕНИЕ КЕГЛЯ: в макете 40 / normal / -1.4px. Ступени 40 в шкале нет,
   соседние — --t-subheading 24 и --t-heading-lg 50; кегль оставлен сырым
   и замеренным (345:32530). Трекинг: −1.4 / 40 = −0.035em.
   Цифры табличные, чтобы цена не плясала при подстановке из MODX. */
.tk-akciya-terms__now {
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Старая цена. В макете #c6decb — это белый под 75% на градиенте, отдельного
   цвета в палитре нет, берём --c-paper-75. Кегль 15 → ступень body 16. */
.tk-akciya-terms__was {
  color: var(--c-paper-75);
  white-space: nowrap;
}

.tk-akciya-terms__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);         /* макет 16 */
  width: 100%;
}

/* Маркер — оранжевый кружок 6px (345:32533, заливка #f39314 = --c-orange).
   Рисуется псевдоэлементом, а не картинкой: это чистая декорация,
   отдельного файла ей заводить незачем. Отступ 12 = просвет макета,
   выключка по первой строке текста: (23 − 6) / 2 ≈ 8.5. */
.tk-akciya-terms__item {
  position: relative;
  padding-left: calc(6px + var(--s-3));
  line-height: 1.5;        /* макет 15 / 1.5: кегль канонический, интерлиньяж макетный */
}
.tk-akciya-terms__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8.5px;              /* замер: центр кружка по центру первой строки */
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-orange);
}

/* Кнопка в макете растянута во всю ширину плашки (345:32541, w=356 = 420−64).
   Правится только геометрия, цвет и типографика остаются каноническими. */
.tk-akciya-terms__cta { width: 100%; }


/* ═══ 4. Кому подойдёт (Figma 345:32542) ═══════════════════════════════════
   Заголовок 50 (ступень .t-heading-lg сошлась дословно), под ним ряд из трёх
   карточек 384 с просветом 24 — это .tk-grid.tk-grid--3. Просвет заголовок →
   карточки 32. Верхнего поля у кадра нет, снизу канонические 92.
   Сумма сходится: 44 + 32 + 204 + 92 = 372. */

.tk-akciya-fit { padding-bottom: var(--s-section); }

.tk-akciya-fit__title { margin-bottom: var(--s-8); }   /* макет 32 */

/* Карточки в ряду разной длины: у второй заголовок переносится на две
   строки. Растягиваем по высоте ряда, чтобы низ плашек стоял на одной
   линии — это свойство раскладки, а не самой карточки. */
.tk-akciya-fit__list > li { display: flex; }

/* Белая коробка с волосяной обводкой — тот же приём, что у .tk-promos__card
   на главной, но карточка своя: внутри только заголовок и текст. */
.tk-akciya-fit__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);                                     /* макет 14 → шаг сетки 16 */
  padding: var(--s-card);                              /* макет 32 */
  background: var(--c-paper);
  border: var(--bw-outline) solid var(--c-hairline);   /* та же толщина, что у .tk-promos__card */
  border-radius: var(--r-card);
}

/* Заголовок карточки — ступень .t-subheading (24 / 1.13 / −0.03em)
   сошлась с макетом 345:32546 дословно, своих правил ему не нужно. */

/* ОТКЛОНЕНИЕ: макет 16 / 1.5, ступень body даёт 16 / 1.33 — кегль сошёлся,
   интерлиньяж поднят до макетного. */
.tk-akciya-fit__text { line-height: 1.5; }


/* ═══ 5. Другие предложения (Figma 345:32554) ══════════════════════════════
   Секция целиком собрана из готового: шапка секции — .tk-sec-head,
   сетка — .tk-grid--3, карточки — .tk-card-post + .tk-promos__* из
   sections.css. Класс .tk-promos на секции нужен не для красоты: к нему
   привязаны мобильные правила подборки в mobile.css, второй копии
   раскладки на 680 заводить не надо.
   Здесь только две отбивки, которых у секции главной другие. */

.tk-akciya-more { padding-bottom: var(--s-section); }

/* На главной между шапкой секции и карточками 48 (.tk-sec-head),
   в этом макете — 24 (345:32556, y=68 при высоте шапки 44). */
.tk-akciya-more .tk-sec-head { margin-bottom: var(--s-6); }


/* ═══ 6. Адаптив ═══════════════════════════════════════════════════════════
   Точка перелома одна — 680. Поля и сжатую шкалу кеглей даёт tokens.css,
   колонки сеток — base.css: --3 становится двумя на 1100 и одной на 680.
   Мобильный вид карточки акции уже описан в mobile.css (секция «Акции»
   главной) и достаётся подборке даром. */

@media (max-width: 1100px) {
  /* Контейнер здесь 1004 (поля 48). Фотография 520 и просвет 48 съели бы
     текстовую колонку, поэтому обе величины ужимаются: 532 + 32 + 440. */
  .tk-akciya-hero__inner { gap: var(--s-8); }
  .tk-akciya-hero__photo { width: 440px; }

  /* Ступени между heading-lg 40 (сжатой на этой ширине) и 56 в шкале нет —
     кегль заголовка страницы ужимается тем же шагом, что .tk-staff__title
     и .tk-zabol-head__title: примерно на четверть. */
  .tk-akciya-hero__title { font-size: 44px; }

  /* Та же арифметика в паре плашек: 604 + 40 + 360 = 1004. */
  .tk-akciya-terms { width: 360px; }
}

@media (max-width: 680px) {

  /* ОТДЕЛЬНОГО МОБИЛЬНОГО МАКЕТА У ЭТОЙ СТРАНИЦЫ НЕТ. Раскладка выведена
     по правилам системы: колонки складываются в одну, поля и кегли даёт
     tokens.css, ритм ужимается на ступень. Порядок оставлен исходным —
     сперва текст с ценой действия, потом фотография. */
  .tk-akciya-hero { padding-block: var(--s-4) var(--s-10); }
  .tk-akciya-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-8);
  }
  .tk-akciya-hero__text { gap: var(--s-4); }
  /* Мобильный кегль заголовка страницы: ступени 34 в шкале нет, значение
     то же, что у .tk-staff__title, .tk-catalog__title и .tk-zabol-head__title. */
  .tk-akciya-hero__title { font-size: 34px; letter-spacing: -0.03em; }
  /* Кнопка «ЗАПИСАТЬСЯ ПО АКЦИИ» во всю ширину экрана — как во всех
     мобильных блоках системы. */
  .tk-akciya-hero__cta { width: 100%; }
  .tk-akciya-hero__photo {
    width: 100%;
    aspect-ratio: 335 / 230;   /* мобильный кадр обложек системы, как у .tk-promos */
    border-radius: var(--r-image);
  }

  .tk-akciya-deal__inner { flex-direction: column; gap: var(--s-6); }
  .tk-akciya-incl  { padding: var(--s-5); }   /* верхнее поле было сырым 28 → мобильные 20 */
  /* Полям плашки условий свой запрос не нужен: --s-card на 680 сам равен 20. */
  .tk-akciya-terms { width: 100%; }
  /* Цена и старая цена на узком экране встают в столбец сами (flex-wrap),
     кегль ужимается на ступень, чтобы «2 600 ₽» не ломалось. */
  .tk-akciya-terms__now { font-size: 32px; }

  .tk-akciya-fit__title { margin-bottom: var(--s-4); }
  .tk-akciya-fit__card  { padding: var(--s-5); }

  .tk-akciya-more .tk-sec-head { margin-bottom: var(--s-4); }
}

/* ═══ blog ═══ */
/* ТОМОКО — страница «Блог — каталог» /blog/.
   Снято 27.08.2026 с артборда Figma 345:32181 (1440×2689),
   файл U5M0ihzdUI9upBTwUAHZ42.

   Здесь ТОЛЬКО то, чего в дизайн-системе не было: полоса крошек,
   шапка страницы с фильтрами разделов, выравнивание карточек в сетке
   и метрика пагинации. Всё остальное взято как есть:
     • светлая шапка   — .tk-header--solid (components.css), заново не объявляем;
     • крошки          — .tk-breadcrumbs + .tk-breadcrumbs--slash (components.css):
                         разделитель «/» и цвет текущего пункта уже там;
     • кнопка записи   — .tk-btn + .tk-btn--primary (components.css): в макете
                         345:32227 заливка #237e33 = --c-brand-green;
     • сетка 4 колонки — .tk-grid + .tk-grid--4 (base.css): 282×4 + 24×3 = 1200,
                         просветы сошлись в ноль, своей раскладки не пишем.
                         Ряды «Ряд 1» и «Ряд 2» — строки этой же сетки;
     • карточка статьи — .tk-card-post и его __cover/__date/__title
                         (components.css): обложка --r-image, чип даты поверх.
                         Та же карточка стоит в секции новостей на главной;
     • вкладки-фильтры — .tk-tabs + .tk-tab (components.css): паддинги 24/13
                         и обводка 1.5 совпали с макетом (345:32234) в ноль;
     • пагинация       — .tk-pager (components.css);
     • финальный блок  — .tk-final и подвал (components.css + sections.css).
   Канонические классы не переопределяются: где макет расходится
   с компонентом, рядом стоит модификатор с префиксом .tk-blogcat-.
   Префикс именно такой: .tk-blog-* уже занят секцией новостей главной
   в sections.css, и пересечение классов сломало бы обе раскладки.
   Теней нет ни одной, элевация только цветом и волосяной обводкой.
   Точка перелома мобильных — 680, как во всей системе.

   Подключать после tokens.css → base.css → components.css → sections.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Хлебные крошки (Figma 345:32230) ══════════════════════════════════
   В макете крошки лежат внутри кадра «Шапка страницы» первой строкой.
   На сайте они вынесены над <main>: это навигация, а не содержание.
   Здесь только отбивка от шапки: 56 из макета (345:32230, y=56).
   Кегль оставлен канонический 12 (в макете 13 — ступени 13 в шкале нет).

   ПОВТОР: та же строчка стоит в кусках page-kontakty.css, page-licenzii.css,
   page-o-klinike.css, page-pacientu.css, page-pamyatka.css, page-price.css,
   page-usluga.css, page-uslugi.css, page-vrach.css, page-vrachi.css
   и page-zabolevanie.css — это хром всех внутренних страниц, а не свойство
   именно этой. При следующей уборке .tk-crumbs место в components.css,
   рядом с .tk-header--solid. */
 /* 56: ступени 56 в ритме нет */


/* ═══ 2. Шапка страницы (Figma 345:32229) ══════════════════════════════════
   Кадр 1440×354: поля 120 держит .tk-container, вертикальные 56/40 — здесь,
   лестница «крошки → заголовок → лид → фильтры» с просветом 24. Крошки
   лежат выше, у них своя обёртка, поэтому верхнее поле блока — ровно
   просвет 24. Сумма сходится: 56 + 16 + 24 + 70 + 24 + 58 + 24 + 42 + 40 = 354. */

.tk-blogcat__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);                  /* макет 24 */
  padding-top: var(--s-6);          /* тот же просвет 24 */
  padding-bottom: var(--s-10);      /* макет 40 */
}

/* Заголовок 76px — ступень --t-display-sm, заведённая в tokens.css ровно
   под этот кегль. ОТКЛОНЕНИЕ: в макете интерлиньяж 0.92 и трекинг -3px
   (-0.0395em), токен даёт 0.94 и -0.035em; берём токен, чтобы 76-й кегль
   не расползался сырыми пикселями по страницам. Значения ровно те же,
   что у .tk-staff__title и .tk-catalog__title — одна ступень на трёх
   страницах, а не три подбора. */
.tk-blogcat__title {
  font-size: var(--t-display-sm-size);
  line-height: var(--t-display-sm-lh);
  letter-spacing: var(--t-display-sm-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: в макете у лида интерлиньяж 1.45, ступень body-lg даёт 1.29 —
   оставлен канонический, ради единой шкалы. Ширина — мера строки из макета
   (345:32232, w=760), токена ширины текста нет. */
.tk-blogcat__lead { max-width: 760px; }


/* ═══ 3. Фильтры разделов (Figma 345:32233) ════════════════════════════════
   В макете это компоненты «Вкладка / Активная» и «Вкладка / Обычная»,
   но панелей у них нет: каждый раздел блога — свой список со своим
   адресом. В разметке поэтому ссылки, а не role="tab", а вид активного
   раздела снимается с [aria-current], а не с [aria-selected].

   Геометрия канонической .tk-tab совпала с макетом полностью:
   паддинги 24/13, обводка 1.5 --c-hairline, скругление --r-pill.
   ОТКЛОНЕНИЯ: в макете кегль 13 при трекинге 1.3px и начертании SemiBold
   у активной вкладки; ступени 13 в шкале нет — оставлен канонический 12
   Medium с тем же трекингом 0.1em. Просвет между вкладками в макете 10,
   канонический .tk-tabs даёт 8: ступени 10 в ритме нет, разница в 2px
   не стоит переопределения базового класса. */

/* Обёртка фильтров тянется на всю ширину контейнера. Без этого она
   в колонке с align-items: flex-start получила бы ширину содержимого,
   а содержимое — полоса .tk-tabs--scroll шириной 718 — утащило бы
   страницу вбок на телефоне (замер proverka.js: документ 738 при окне 390).
   Растянутая обёртка отдаёт полосе ширину экрана, и та едет внутри себя. */
.tk-blogcat__filters {
  align-self: stretch;
  min-width: 0;
}

/* Канонический .tk-tab написан под <button>: у кнопки display по умолчанию
   inline-block, и вертикальные паддинги держат высоту сами. У <a> display
   строчный — паддинги 13 сверху и снизу не подняли бы высоту, вкладка
   села бы в 16px. Возвращаем ту же коробку, что у кнопки. */
.tk-blogcat__filter {
  display: inline-flex;
  align-items: center;
}

/* Ссылка ведёт себя как вкладка, но состояние у неё своё. Базовый .tk-tab
   не трогаем: там раскрашено [aria-selected], здесь [aria-current]. */
.tk-blogcat__filter[aria-current="page"] {
  background: var(--c-brand-green);
  border-color: var(--c-brand-green);
  color: var(--c-paper);
}
/* Текущий раздел не меняет вид под курсором: ссылка на саму себя. */
.tk-blogcat__filter[aria-current="page"]:hover {
  background: var(--c-brand-green);
  border-color: var(--c-brand-green);
  color: var(--c-paper);
}


/* ═══ 4. Сетка статей (Figma 345:32238) ════════════════════════════════════
   Восемь карточек 282 в четыре колонки — это .tk-grid + .tk-grid--4.
   Просвет по горизонтали канонический 24, по вертикали в макете 32
   (ряд 1: y=52..338, ряд 2: y=370) — ряды карточек с обложками стоят
   свободнее колонок, поэтому row-gap задан отдельно.
   Верхнее поле 52 — положение первого ряда внутри кадра (345:32239, y=52). */

.tk-blogcat__list {
  padding-top: calc(var(--s-12) + var(--s-1));   /* 52: ступени 52 в ритме нет */
  row-gap: var(--s-8);                           /* макет 32 */
}

/* Карточки в ряду разной высоты: заголовки от одной до трёх строк.
   Растягиваем на всю высоту строки сетки, чтобы «ЧИТАТЬ →» у соседей
   стояло на одной линии. Тот же приём, что у .tk-blog__list на главной. */
.tk-blogcat__list > li { display: flex; }
.tk-blogcat__card { width: 100%; height: 100%; }

/* Заголовок карточки — <h2>: над ним только <h1> страницы. base.css даёт
   <h2> начертание из body (400), а в макете заголовок карточки SemiBold
   (345:32240, 18px SemiBold). Канонический .tk-card-post__title кегль
   и интерлиньяж уже держит, добавляем только вес — в своей области
   видимости, базовый класс не трогаем. */
.tk-blogcat__card .tk-card-post__title { font-weight: var(--w-semibold); }

/* «ЧИТАТЬ →» прижимается к низу карточки. */
.tk-blogcat__more { margin-top: auto; }
.tk-blogcat__card:hover .tk-blogcat__more { color: var(--c-green-deep); }

/* Вся секция закрывается каноническими 92 снизу (макет: у кадра
   «Пагинация» нижнее поле 92). */
.tk-blogcat { padding-bottom: var(--s-section); }


/* ═══ 5. Пагинация (Figma 345:32249) ═══════════════════════════════════════
   Компонент канонический — .tk-pager из components.css. Отличия макета:
   кружки 48 вместо 44 и обводка 1.5 вместо 1. Оба значения уже есть
   в системе (--s-12 и --bw-outline), поэтому это модификатор, а не новый
   компонент. Кегль в макете 15 — ступени 15 в шкале нет, оставлен
   канонический body 16.
   Отбивка сверху 52 — та же, что у первого ряда сетки (кадр «Пагинация»
   стоит на 1129, сетка кончается на 1077). */

.tk-blogcat__pagination {
  display: flex;
  justify-content: center;
  padding-top: calc(var(--s-12) + var(--s-1));   /* 52, как и сверху у сетки */
}

.tk-blogcat__pager a,
.tk-blogcat__pager span {
  min-width: var(--s-12);                        /* макет 48 */
  height: var(--s-12);
  padding-inline: 0;                             /* кружок ровный: цифра одна */
  border-width: var(--bw-outline);               /* макет 1.5, как у вкладок */
}


/* ═══ 6. Адаптив ═══════════════════════════════════════════════════════════
   Точка перелома одна — 680. Поля и сжатую шкалу кеглей даёт tokens.css,
   колонки сетки — base.css: --4 становится двумя на 1100 и одной на 680. */

@media (max-width: 1100px) {
  /* Ступени между heading-lg 50 и display-sm 76 в шкале нет — тот же
     промежуточный кегль, что у .tk-staff__title и .tk-catalog__title. */
  .tk-blogcat__title { font-size: 52px; }
}

@media (max-width: 680px) {
  /* ОТДЕЛЬНОГО МОБИЛЬНОГО МАКЕТА У /blog/ НЕТ. Раскладка снята с мобильной
     секции «Новости и события» главной (345:13961): там карточка статьи
     превращается в белую коробку с волосяной обводкой, обложка выходит
     во всю её ширину, текст лежит в полях 20. Повторяем это своим классом,
     чтобы каталог блога и лента на главной выглядели одинаково и чтобы
     результат не зависел от того, подключён mobile.css до или после
     этого файла. */


  .tk-blogcat__head {
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }
  /* Мобильный кегль заголовка страницы: ступени 34 в шкале нет,
     значение то же, что у .tk-staff__title и .tk-catalog__title. */
  .tk-blogcat__title { font-size: 34px; letter-spacing: -0.03em; }
  /* Меру строки на телефоне держит сам контейнер (335 при полях 20). */
  .tk-blogcat__lead  { max-width: none; }

  .tk-blogcat__list {
    padding-top: var(--s-8);
    row-gap: var(--s-4);          /* тот же просвет 16, что у ленты главной */
  }

  .tk-blogcat__card {
    gap: 0;                       /* просветы задаёт коробка, не .tk-card-post */
    padding-inline: var(--s-5);
    padding-bottom: var(--s-5);
    background: var(--c-paper);
    border: var(--bw-outline) solid var(--c-hairline);
    border-radius: var(--r-image);                     /* макет 20 */
    overflow: hidden;
  }

  /* Обложка выходит из полей коробки во всю её ширину; углы режет коробка,
     поэтому собственное скругление снимается. Кадр мобильного макета
     335×190. */
  .tk-blogcat__card .tk-card-post__cover {
    margin: 0 calc(var(--s-5) * -1) var(--s-4);   /* отбивка до заголовка 18 → шаг 16 */
    border-radius: 0;
    aspect-ratio: 335 / 190;
  }

  .tk-blogcat__more { padding-top: var(--s-3); }  /* макет 10 → шаг сетки 12 */

  .tk-blogcat__pagination { padding-top: var(--s-8); }
}

/* ═══ dms ═══ */
/* ТОМОКО — страница «Список ДМС организаций» /pacientu/dms/.
   Снято 27.08.2026 с артборда Figma 345:32819 (1440×2717),
   файл U5M0ihzdUI9upBTwUAHZ42.

   Страница короткая: шапка страницы, лента из пятнадцати плиток
   страховых компаний с примечанием и три шага записи. Соседка ей
   /pacientu/oms/ — шапка страницы у них одна в один, а шаги повторяют
   шаги /pacientu/test-zreniya/; где макет даёт те же величины, значения
   намеренно повторены, а не подобраны заново.

   Здесь ТОЛЬКО то, чего в дизайн-системе не было: полоса крошек, шапка
   страницы, лента компаний, плитка компании и шаг записи.
   Всё остальное взято как есть:
     • светлая шапка   — .tk-header--solid (components.css), заново не объявляем;
     • крошки          — .tk-breadcrumbs + .tk-breadcrumbs--slash (components.css);
     • кнопка записи   — .tk-btn + .tk-btn--primary (components.css): в макете
                         345:32865 заливка #237e33 = --c-brand-green, радиус 300;
     • сетка шагов     — .tk-grid + .tk-grid--3 (base.css): 384×3 + 24×2 = 1200,
                         просветы совпали в ноль, своей раскладки не пишем;
     • ступени кеглей  — .t-heading (35 / -0.03em) сошлась с заголовками разделов
                         дословно, .t-body, .t-body-lg и .t-label-sm — с оговорками;
     • финальный блок  — .tk-final и подвал (components.css + sections.css).
   Канонические классы не переопределяются: плитка компании и шаг —
   свои компоненты с префиксом страницы, а не правка .tk-card-*.
   Теней нет ни одной, элевация только цветом. Точка перелома — 680.

   Подключать после tokens.css → base.css → components.css → sections.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Хлебные крошки (Figma 345:32868) ══════════════════════════════════
   Полоса крошек живёт над <main>: это навигация, а не содержание.
   Сам компонент и модификатор со слэшем — в components.css, здесь только
   отбивка от шапки: 56 из макета (крошки на y=56 внутри кадра 345:32867).
   Кегль оставлен канонический 12 (в макете 13 — ступени 13 в шкале нет).

   ПОВТОР: та же строчка стоит в кусках page-akciya.css, page-kontakty.css,
   page-licenzii.css, page-o-klinike.css, page-oms.css, page-pacientu.css,
   page-pamyatka.css, page-price.css, page-statya.css, page-usluga.css,
   page-uslugi.css, page-vrach.css, page-vrachi.css и page-zabolevanie.css —
   это хром всех внутренних страниц, а не свойство именно этой. Значение
   везде одно; при следующей уборке .tk-crumbs место в components.css,
   рядом с .tk-header--solid и .tk-breadcrumbs--slash. */
 /* 56: ступени 56 в ритме нет */


/* ═══ 2. Шапка страницы (Figma 345:32867) ══════════════════════════════════
   Кадр 1440×283: поля 120 держит .tk-container, вертикальные — здесь.
   Крошки лежат выше, в своей обёртке, поэтому верхнее поле блока — ровно
   просвет между ними и заголовком. Просветы макета 22 → шаг сетки 24.
   Сумма сходится: 56 + 16 + 22 + 61 + 22 + 58 + 48 = 283.

   Кадр совпадает с шапкой /pacientu/oms/ до пикселя; отличается только
   мера лида — 1004 против 866. Классы всё же свои, чтобы кусок страницы
   не зависел от соседнего куска сборки. */

.tk-dms-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);                /* макет 22 → шаг 24 */
  padding-top: var(--s-6);        /* просвет крошки → заголовок, тот же 22 → 24 */
  padding-bottom: var(--s-12);    /* макет 48 */
}

/* Ступени 64 в шкале кита нет: она между heading-lg 50 и display-sm 76.
   Замер 345:32869: кегль 64, интерлиньяж 0.96, трекинг −2.5px переведён
   в em делением на кегль (−0.039em), чтобы не разъезжался на адаптиве.
   Значения ровно те же, что у .tk-oms-head__title, .tk-pamyatka__title
   и .tk-usluga-hero__title — одна ступень на четырёх страницах. */
.tk-dms-head__title {
  font-size: var(--t-page-title-size);
  line-height: var(--t-page-title-lh);
  letter-spacing: var(--t-page-title-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: лид набран кеглем 19 при трекинге −0.5px — ступени 19
   в шкале нет, берём каноническую .t-body-lg (20). Интерлиньяж макетный
   1.5 против токенных 1.29: это вводный абзац в меру 1004, канонический
   встал бы плотнее. Ширина — мера строки из макета (345:32870, w=1004),
   токена ширины текста нет. */
.tk-dms-head__lead {
  line-height: 1.5;
  max-width: 1004px;
}


/* ═══ 3. Общая обвязка секций ══════════════════════════════════════════════
   Два блока страницы — компании и шаги — отбиты снизу одинаково: 92,
   то есть канонический --s-section. Заголовок секции отбит от содержимого
   на 24. Тот же приём, что у .tk-oms-sec и .tk-test-sec.

   Кадры сходятся: компании 37 + 24 + 444 + 24 + 21 + 92 = 642;
   шаги 37 + 24 + 129 + 92 = 282. */

.tk-dms-sec { padding-bottom: var(--s-section); }

.tk-dms-sec__title { margin-bottom: var(--s-6); }   /* макет 24 */


/* ═══ 4. Лента компаний (Figma 345:32873) ══════════════════════════════════
   Пятнадцать плиток, просвет 20 по обеим осям. В макете нарисованы четыре
   «ряда»: три по четыре плитки шириной 285 и последний из трёх шириной
   386.67. Это не четыре обёртки, а поведение одной ленты — последняя
   строка растянута на всю ширину.

   ПОЧЕМУ НЕ .tk-grid--4. Каноническая сетка держит четыре колонки жёстко
   и оставила бы в последнем ряду пустую четверть — в макете её нет.
   Поэтому лента гибкая: основа 240 при просвете 20 даёт ровно четыре
   плитки в строке (240×4 + 20×3 = 1020 ≤ 1200, пятая уже не влезает:
   240×5 + 20×4 = 1280), а остаток делится поровну — 285 в полных строках
   и 386.67 в последней. Обе величины сходятся с макетом в ноль. */

.tk-dms-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);                /* макет 20 */
}
.tk-dms-grid > li { flex: 1 1 240px; }  /* основа 240: см. расчёт выше */

/* Плитка: заливка --c-mist, скругление 20 (--r-image, как у обложек),
   поля 26/24, просвет 10, содержимое по центру.
   Высота 96 = 26 + 22 + 10 + 12 + 26.
   Ни .tk-card-service, ни .tk-card-post не подходят — там обложка,
   здесь текстовая плитка. Канонические .tk-card-* не трогаются. */
.tk-dms-co {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);                /* макет 10; шаги 8 и 12 — взят меньший */
  min-height: var(--s-24);        /* 96 из макета — ступень ритма --s-24 */
  padding: 26px var(--s-6);       /* макет 26/24; шага 26 в ритме нет */
  border-radius: var(--r-image);
  background: var(--c-mist);
  text-align: center;
}

/* ОТКЛОНЕНИЕ: название в макете 18 SemiBold, ступени 18 в шкале нет —
   она ровно между body 16 и body-lg 20. Взята .t-body (16), хотя
   в плашках /uslugi/ и /price/ те же 18 округляли вверх до body-lg.
   Причина в геометрии: на 20 «РМС · Регион Медсервис» не влезает
   в плитку 285 и переносится, второй ряд становится на 22 выше
   соседних — ровные ряды по 96 (444 = 96×4 + 20×3) для этой ленты
   важнее двух пунктов кегля. Насыщенность из макета. */
.tk-dms-co__name {
  font-weight: var(--w-semibold);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: подпись «ДМС» в макете 10 Medium с трекингом 1px, ступень
   label-12 даёт 12 Medium и 0.1em — берём ступень целиком, цвет --c-fog
   из макета приходит утилитой .c-muted. Своих свойств не нужно, класс
   оставлен пустым намеренно — он держит имя элемента в разметке. */

/* Примечание под лентой (345:32923). ОТКЛОНЕНИЕ: в макете 14 Medium
   с интерлиньяжем 1.5. Ступень 14 в шкале есть, но она прописная Medium
   с трекингом 0.1em — для строчного примечания не годится; набрано
   канонической .t-body (16) третичным цветом --c-ash (.c-tertiary).
   Тот же приём, что у .tk-test-shot__caption. */
.tk-dms-note {
  margin-top: var(--s-6);         /* макет 24 */
  line-height: 1.5;
}
/* Телефон в примечании набран тем же цветом, что и текст: зелёный даём
   только на наведении — как у крошек в components.css. */
.tk-dms-note a:hover { color: var(--c-brand-green); }


/* ═══ 5. Шаги записи (Figma 345:32926) ═════════════════════════════════════
   Три шага в канонической .tk-grid--3, каждый отбит сверху линией.
   Высота шага 129 = 20 + 13 + 12 + 26 + 12 + 46.

   Компонент тот же, что .tk-test-step на /pacientu/test-zreniya/,
   с одним отличием: линия сверху здесь 2px, а не волосяная. Так в макете
   (345:32927), значение не подбиралось. */

.tk-dms-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);                /* макет 12 */
  padding-top: var(--s-5);        /* макет 20 */
  border-top: 2px solid var(--c-hairline); /* макет 2: токена толщины нет */
}

/* ОТКЛОНЕНИЕ: номер шага в макете 11 SemiBold с трекингом 1.1px, ступень
   label-12 даёт 12 Medium и 0.1em. Кегль и трекинг из шкалы, насыщенность
   из макета. Тот же случай, что у .tk-test-step__num.
   Цифры табличные, чтобы 01–03 встали в один разряд. */
.tk-dms-step__num {
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

/* ОТКЛОНЕНИЕ: подзаголовок шага в макете 22 SemiBold с интерлиньяжем 1.18
   и трекингом −0.5px. Ступени 22 в шкале нет — она ровно между body-lg 20
   и subheading 24; взята body-lg, чтобы шаг на этой странице и шаг
   на /pacientu/test-zreniya/ остались одним компонентом, а не двумя
   похожими. Из макета оставлена только насыщенность. */
.tk-dms-step__title { font-weight: var(--w-semibold); }

/* ОТКЛОНЕНИЕ: описание шага в макете 15px, ступени 15 в шкале нет —
   набрано канонической .t-body (16, на мобильных 15). Интерлиньяж
   поднят до макетного 1.5. Ровно то же, что у .tk-test-step__text. */
.tk-dms-step__text { line-height: 1.5; }


/* ═══ 6. Адаптив ═══════════════════════════════════════════════════════════
   ОТДЕЛЬНОГО МОБИЛЬНОГО МАКЕТА У /pacientu/dms/ НЕТ: в файле нарисованы
   мобильные виды только для главной, контактов, лицензий, услуги и меню.
   Раскладка выведена по правилам системы: поля и сжатую шкалу кеглей даёт
   tokens.css, колонки сетки шагов — base.css (--3 становится двумя на 1100
   и одной на 680). Лента компаний перестраивается сама, основой строки.
   Точка перелома одна — 680. */

@media (max-width: 1100px) {
  /* Контейнер здесь 1004 (поля 48). Заголовок 64 в эту ширину помещается
     и не жмётся — так же оставлен .tk-pamyatka__title с тем же кеглем.
     Лента считает строку сама: 240×4 + 20×3 = 1020 > 1004, значит
     по три плитки в строке (пятнадцать делятся на пять ровных строк). */
  .tk-dms-head__lead { max-width: none; }
}

@media (max-width: 680px) {

  .tk-dms-head {
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }
  /* Кегль заголовка совпадает с мобильной ступенью --t-display-size (38) —
     то же решение, что у .tk-oms-head__title с тем же кеглем 64. */
  .tk-dms-head__title {
    font-size: var(--t-display-size);
    line-height: var(--t-display-lh);
  }

  .tk-dms-sec__title { margin-bottom: var(--s-4); }

  /* Лента на телефоне: основа 140 при просвете 12 даёт две плитки в строке
     (на 375 контейнер 335: 140×2 + 12 = 292 ≤ 335, третья не влезает).
     Пятнадцать компаний в один столбец дали бы экран с лишним прокрутки. */
  .tk-dms-grid { gap: var(--s-3); }
  .tk-dms-grid > li { flex: 1 1 140px; }

  .tk-dms-co {
    min-height: 0;
    gap: var(--s-1);
    padding: var(--s-4) var(--s-3);
  }
  /* Кегль названия на телефоне ужимается сам: .t-body на 680 равна 15.
     В плитке шириной 157 под текст остаётся 133 — длинные названия
     («АльфаСтрахование», «Уралсиб Страхование») ложатся в две строки,
     плитки в строке выравниваются по высоте сами. */

  .tk-dms-step {
    gap: var(--s-2);
    padding-top: var(--s-4);
  }
}

/* ═══ gosgarantii ═══ */
/* ТОМОКО — страница «Программа госгарантий» /pacientu/programma-gosgarantiy/.
   Снято 27.08.2026 с артборда Figma 345:34347 (1440×2604),
   файл U5M0ihzdUI9upBTwUAHZ42.

   Страница справочная и короткая: шапка страницы, зелёная плашка
   «обратите внимание» и список из пяти нормативных документов.
   Прямая родня — /pacientu/oms/: там ровно та же плашка (345:32777)
   и ровно тот же пункт списка документов (345:32797), вплоть до полей,
   скруглений и волосяной линии. Значения намеренно повторены, а не
   подобраны заново; классы всё же свои, чтобы кусок страницы
   не зависел от соседнего куска сборки. При следующей уборке pages.css
   .tk-oms-alert и .tk-gos-alert, .tk-oms-doc и .tk-gos-doc просятся
   в два общих блока — «плашка-предупреждение» и «пункт документа».

   Здесь ТОЛЬКО то, чего в дизайн-системе не было: шапка страницы,
   плашка и пункт списка документов. Всё остальное взято как есть:
     • светлая шапка   — .tk-header--solid (components.css), заново не объявляем;
     • крошки          — .tk-breadcrumbs + .tk-breadcrumbs--slash (components.css),
                         полоса .tk-crumbs с отбивкой 56 уже объявлена куском
                         page-pacientu.css — копии не делаем;
     • кнопка записи   — .tk-btn + .tk-btn--primary (components.css): в макете
                         345:34393 заливка #237e33 = --c-brand-green, радиус 300;
     • зелёный градиент плашки — токен --g-green-x (tokens.css): стопы
                         макета #268034 → #12301c сошлись с крайними
                         стопами токена дословно;
     • ступени кеглей  — .t-heading (35 / −0.03em) сошлась с заголовком
                         раздела дословно (в макете 35 при трекинге
                         −1.05px = −0.03em), .t-body, .t-body-lg
                         и .t-label-sm — с оговорками ниже;
     • финальный блок  — .tk-final и подвал (components.css + sections.css).
   Канонические классы не переопределяются: где макет расходится
   с компонентом, рядом стоит модификатор с префиксом .tk-gos-.
   Теней нет ни одной, элевация только цветом.
   Точка перелома мобильных — 680, как во всей системе.

   Подключать после tokens.css → base.css → components.css → sections.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Шапка страницы (Figma 345:34395) ══════════════════════════════════
   Кадр 1440×312: поля 120 держит .tk-container, вертикальные — здесь.
   Крошки лежат выше, в своей полосе .tk-crumbs (отбивка 56 из общего
   куска pages.css), поэтому верхнее поле блока — ровно просвет между
   ними и заголовком. Просветы макета 22 → шаг сетки 24. Кадр выше
   соседних на 29: лид здесь в три строки, а не в две.
   Сумма сходится: 56 + 16 + 22 + 61 + 22 + 87 + 48 = 312. */

.tk-gos-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);                /* макет 22 → шаг 24 */
  padding-top: var(--s-6);        /* просвет крошки → заголовок, тот же 22 → 24 */
  padding-bottom: var(--s-12);    /* макет 48 */
}

/* Ступени 64 в шкале кита нет: она между heading-lg 50 и display-sm 76.
   Замер 345:34397: кегль 64, интерлиньяж 0.96, трекинг −2.5px переведён
   в em делением на кегль (−0.039em), чтобы не разъезжался на адаптиве.
   Значения ровно те же, что у .tk-oms-head__title, .tk-vychet-head__title,
   .tk-tests-head__title, .tk-pamyatka__title и .tk-usluga-hero__title. */
.tk-gos-head__title {
  font-size: var(--t-page-title-size);
  line-height: var(--t-page-title-lh);
  letter-spacing: var(--t-page-title-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: лид набран кеглем 19 при трекинге −0.5px — ступени 19
   в шкале нет, берём каноническую .t-body-lg (20). Интерлиньяж макетный
   1.5 против токенных 1.29: это вводный абзац в меру 760, канонический
   встал бы плотнее. Ширина — мера строки из макета (345:34398, w=760),
   токена ширины текста нет. */
.tk-gos-head__lead {
  line-height: 1.5;
  max-width: 760px;
}


/* ═══ 2. Общая обвязка секций ══════════════════════════════════════════════
   Два блока страницы — плашка и документы — отбиты снизу одинаково: 92,
   то есть канонический --s-section. Заголовок секции отбит
   от содержимого на 24. Тот же приём, что у .tk-oms-sec.

   Кадры сходятся: плашка 193 + 92 = 285;
   документы 37 + 24 + 344 + 92 = 497. */

.tk-gos-sec { padding-bottom: var(--s-section); }

.tk-gos-sec__title { margin-bottom: var(--s-6); }   /* макет 24 */


/* ═══ 3. Плашка «Обратите внимание» (Figma 345:34400) ══════════════════════
   Тот же зелёный градиент, что у финального блока, развёрнутый
   по горизонтали (--g-green-x, tokens.css). Скругление 24, поля 40/36,
   просвет 12. Высота 193 = 36 + 13 + 12 + 96 + 36.

   Раскладка и все величины совпали с .tk-oms-alert на /pacientu/oms/
   до пикселя; имя намеренно своё, чтобы две страницы не слиплись
   в одну при следующей правке. */

.tk-gos-alert {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);                /* макет 12 */
  padding: 36px var(--s-10);      /* макет 36/40; шага 36 в ритме нет */
  border-radius: var(--r-card);   /* макет 24 */
  overflow: hidden;
  color: var(--c-paper);
  background: var(--g-green-x);
}

/* ОТКЛОНЕНИЕ: надстрочник в макете 11 SemiBold с трекингом 1.1px, ступень
   label-12 даёт 12 Medium и 0.1em. Кегль и трекинг берём из шкалы,
   насыщенность — из макета. Приём тот же, что у .tk-oms-alert__label. */
.tk-gos-alert__label {
  color: var(--c-orange);
  font-weight: var(--w-semibold);
}

/* ОТКЛОНЕНИЕ: текст плашки в макете 22/1.45, ступени 22 в шкале нет —
   поставлена ближайшая .t-body-lg (20) с макетным интерлиньяжем.
   То же округление вниз, что у .tk-oms-alert__text. Мера строки —
   вся ширина контейнера, как в макете (345:34402, w=1120). */
.tk-gos-alert__text { line-height: 1.45; }


/* ═══ 4. Документы (Figma 345:34405) ═══════════════════════════════════════
   Пять пунктов без плашки: номер, название, «СМОТРЕТЬ →». Волосяная
   линия сверху у каждого, включая первый. Высота пункта — 20 + текст + 20:
   64 для однострочных и 88 для двухстрочного первого, сумма списка 344.

   Пункт НЕ ССЫЛКА: адресов документов макет не даёт — подробности
   в комментарии разметки. Наведение всё же описано: когда клиника даст
   адреса, <li> станет <a> и состояние заработает без правки стилей.
   Ровно так же устроен .tk-oms-doc на /pacientu/oms/. */

/* Сброс маркеров и полей списку не нужен: base.css снимает их у любого
   ol[class] и ul[class]. */

.tk-gos-doc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-5);                             /* макет 20 */
  align-items: center;
  padding-block: var(--s-5);                   /* макет 20 */
  border-top: 1px solid var(--c-hairline);     /* волосяная линия: токена толщины нет */
}

/* ОТКЛОНЕНИЕ: номер в макете 12 SemiBold с трекингом 1px, ступень label-12
   даёт 12 Medium и 0.1em. Кегль и трекинг из шкалы, насыщенность
   из макета — тот же случай, что у .tk-oms-doc__num. Колонка
   не сжимается: номера стоят столбиком слева от текста.
   Цифры табличные, чтобы 1–5 встали в один разряд. */
.tk-gos-doc__num {
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

/* Название документа 16 Regular. ОТКЛОНЕНИЕ: интерлиньяж макетный 1.5
   против канонических 1.33 — названия нормативных актов длинные
   и в две строки на 1.33 слипаются. */
.tk-gos-doc__text { line-height: 1.5; }

/* ОТКЛОНЕНИЕ: «СМОТРЕТЬ →» в макете 12 SemiBold, ступень label-12 даёт
   12 Medium. Кегль и трекинг (1.2px = 0.1em) берём из шкалы,
   насыщенность — из макета. Приём тот же, что у .tk-oms-doc__go
   и .tk-pacientu-card__go. */
.tk-gos-doc__go {
  color: var(--c-brand-green);
  font-size: var(--t-label-12-size);
  font-weight: var(--w-semibold);
  letter-spacing: var(--t-label-12-ls);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Наведение: строка темнеет на шаг, как .tk-btn--primary:hover.
   Ни тени, ни сдвига — элевации в системе нет. Правило написано
   на <a>, поэтому на нынешней некликаемой разметке молчит. */
.tk-gos-doc a:hover .tk-gos-doc__go,
a.tk-gos-doc:hover .tk-gos-doc__go { color: var(--c-green-deep); }


/* ═══ 5. Адаптив ═══════════════════════════════════════════════════════════
   ОТДЕЛЬНОГО МОБИЛЬНОГО МАКЕТА У /pacientu/programma-gosgarantiy/ НЕТ:
   в файле нарисованы мобильные виды только для главной, контактов,
   лицензий, услуги, теста и меню. Раскладка выведена по правилам системы
   и по мобильному виду соседней /pacientu/oms/, где такая же плашка
   и такой же список документов уже сложены. Поля и сжатую шкалу кеглей
   даёт tokens.css. Точка перелома одна — 680. */

@media (max-width: 1100px) {
  /* Контейнер здесь 1004 (поля 48). Заголовок 64 в эту ширину помещается
     и не жмётся — так же оставлены .tk-oms-head__title и .tk-vychet-head__title.
     Мера лида снимается: она шире контейнера. */
  .tk-gos-head__lead { max-width: none; }
}

@media (max-width: 680px) {
  .tk-gos-head {
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }
  /* Кегль заголовка совпадает с мобильной ступенью --t-display-size (38) —
     то же решение, что у .tk-oms-head__title и .tk-vychet-head__title.
     Слово «госгарантий» длинное: переносим его по слогам, иначе
     на 335 строка вылезает за поле. */
  .tk-gos-head__title {
    font-size: var(--t-display-size);
    line-height: var(--t-display-lh);
    hyphens: auto;
  }

  .tk-gos-sec        { padding-bottom: var(--s-10); }  /* мобильный ритм 40 */
  .tk-gos-sec__title { margin-bottom: var(--s-4); }

  /* Плашка: поля 20 по бокам и 24 сверху-снизу, скругление на ступень
     меньше карточного — так же ужата .tk-oms-alert на 375. */
  .tk-gos-alert {
    gap: var(--s-2);
    padding: var(--s-6) var(--s-5);
    border-radius: var(--r-image);
  }

  /* Пункт документа: номер и название в строку, «СМОТРЕТЬ →» уходит
     под название и выравнивается по нему. Тап-цель по WCAG 2.5.8
     держит вертикальный ритм строки: 20 + 12 + 18 ≈ 50.
     Раскладка та же, что у .tk-oms-doc на 375. */
  .tk-gos-doc {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-3) var(--s-4);
    align-items: start;
  }
  .tk-gos-doc__go { grid-column: 2; }
}


/* ══ Знак «перейти» у строк документов ════════════════════════════════════
   Была стрелка «→» символом. Заменена на ту же незакрашенную галочку,
   что стоит у пунктов мобильного меню: одна форма на весь сайт, и она
   не зависит от того, есть ли глиф в Montserrat. Здесь галочка зелёная —
   это активная ссылка, а не служебный знак навигации.
   Полигон обводит её по контуру, как в mobile-m1.css: внешняя грань
   0,0 → вершина → 0,100%, внутренняя возвращается через 66.67% 50%. */
.tk-doc-go__sign {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--c-brand-green);
  clip-path: polygon(0 0, 33.33% 0, 100% 50%, 33.33% 100%, 0 100%, 66.67% 50%);
}

/* ═══ kontakty ═══ */
/* ТОМОКО — страница «Контакты» /kontakty/.
   Снято 27.08.2026 с артбордов Figma U5M0ihzdUI9upBTwUAHZ42:
   десктоп 345:32352 (1440×3003) и мобильный «М · Контакты» 345:15315 (375×3616).

   Здесь ТОЛЬКО то, чего в дизайн-системе не было: светлая шапка внутренних
   страниц, полоса крошек, шапка страницы, карточка способа связи, плашка-
   заглушка карты, карточка режима работы и карточка реквизитов.
   Всё остальное взято как есть:
     • сетка 3 и 2 колонки — .tk-grid + .tk-grid--3 / --2 (base.css);
       384×3 + 24×2 = 1200 и 588×2 + 24 = 1200 — просветы совпали в ноль,
       своей раскладки не пишем;
     • крошки              — .tk-breadcrumbs (components.css) с модификатором;
     • кнопка «Лицензии»   — .tk-btn + .tk-btn--secondary (components.css),
                             обводка 1.5 и паддинги 16/32 совпали дословно;
     • контейнер и шкала   — .tk-container и ступени .t-* (base.css);
     • финальный блок      — .tk-final и подвал (components.css).
   Канонические классы не переопределяются: где макет расходится с
   компонентом — рядом стоит модификатор с префиксом .tk-kontakty-.
   Теней нет ни одной, элевация только цветом. Точка перелома — 680.

   Подключать после tokens.css → base.css → components.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Светлая шапка внутренних страниц (Figma 345:32353) ════════════════
   На главной шапка лежит поверх видео (.tk-header--overlay). Здесь видео
   нет: у шапки собственное полотно, чернильный текст и волосяная линия
   снизу, а логотип цветной. Кадр в макете 90 = 88 (.tk-header__inner из
   components.css) плюс эта линия, отдельной высоты не задаём.

   ПОВТОР: те же правила стоят в кусках page-price.css, page-usluga.css,
   page-uslugi.css и page-vrachi.css — это хром всех внутренних страниц,
   а не свойство именно этой. Объявления совпадают дословно, порядок
   в каскаде роли не играет; при следующей уборке pages.css их стоит
   поднять в один общий блок «внутренние страницы». */


/* Полоски бургера в mobile.css нарисованы currentColor и рассчитаны
   на белый текст поверх видео. На светлой шапке они бы исчезли —
   цвет переключается вместе с фоном, сам .tk-burger не трогаем. */


/* ═══ 2. Хлебные крошки (Figma 345:32401) ══════════════════════════════════
   Полоса крошек живёт над <main>: это навигация, а не содержание.
   В макете крошки лежат внутри кадра «Шапка страницы» на отступе 56
   от шапки — на сайте вынесены в свою обёртку, как на соседних
   внутренних страницах. Кегль оставлен канонический 12 (в макете 13 —
   ступени 13 в шкале нет).
   ПОВТОР того же хрома, что и блок 1 выше. */
 /* 56: ступени 56 в ритме нет */



/* ═══ 3. Шапка страницы (Figma 345:32400) ══════════════════════════════════
   Кадр 1440×296: поля 120 держит .tk-container, просветы 24, нижнее поле 48.
   Крошки лежат выше и со своим отступом, поэтому верхнее поле блока —
   ровно просвет 24. Сумма сходится: 56 + 16 + 24 + 70 + 24 + 58 + 48 = 296. */

.tk-kontakty__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  padding-top: var(--s-6);
  padding-bottom: var(--s-12);
}

/* Заголовок 76 — ступень --t-display-sm, заведённая в tokens.css ровно
   под этот кегль. ОТКЛОНЕНИЕ: в макете интерлиньяж 0.92 и трекинг -3px
   (-0.0395em), токен даёт 0.94 и -0.035em; берём токен, чтобы 76-й кегль
   не расползался сырыми пикселями по страницам — как на /price/,
   /uslugi/ и /vrachi/. */
.tk-kontakty__title {
  font-size: var(--t-display-sm-size);
  line-height: var(--t-display-sm-lh);
  letter-spacing: var(--t-display-sm-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: у лида в макете интерлиньяж 1.45, ступень body-lg даёт 1.29 —
   оставлен канонический, ради единой шкалы. Ширина — мера строки из макета
   (345:32403, w=760), токена ширины текста нет. */
.tk-kontakty__lead { max-width: 760px; }


/* ═══ 4. Способы связи (Figma 345:32404) ═══════════════════════════════════
   Три карточки 384 в три колонки с просветом 24 — это ровно .tk-grid +
   .tk-grid--3, своей раскладки не пишем. Верхнего поля у секции нет:
   отбивку сверху дала шапка страницы, снизу — 52 из макета. */

.tk-kontakty { padding-bottom: calc(var(--s-12) + var(--s-1)); } /* 52: ступени 52 в ритме нет */

/* Карточка способа связи (345:32405 / 32410 / 32415).
   Плоская элевация --c-mist, скругление 24, поля 32. Высота в макете
   фиксирована (221) и содержимое разогнано по краям — на сайте высота
   минимальная, чтобы длинный текст не обрезался; строки разгоняет
   space-between, как в макете. Просвет 16 — нижняя граница на случай,
   когда содержимого больше кадра.
   ЭТО НЕ .tk-card-review: у той свои поля, просветы и состав. */
.tk-kontakty__way {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 221px;              /* высота карточки из макета; токена высоты нет */
  padding: var(--s-card);
  background: var(--c-mist);
  border-radius: var(--r-card);
}

/* ОТКЛОНЕНИЕ: надстрочник в макете 11px SemiBold, ступень label-12 даёт
   12px Medium. Кегль берём из шкалы, насыщенность — из макета.
   Тот же приём, что у .tk-allprice__label на /uslugi/. */
.tk-kontakty__label {
  color: var(--c-brand-green);
  font-weight: var(--w-semibold);
}

/* Главная строка карточки: 24 SemiBold, трекинг -0.03em — ступень
   subheading один в один. ОТКЛОНЕНИЕ: интерлиньяж в макете 1.25,
   токен даёт 1.13; берём токен. */
.tk-kontakty__value { overflow-wrap: anywhere; } /* длинные адреса и телефоны не рвут карточку */

/* Вторая строка. ОТКЛОНЕНИЕ: в макете 15px цветом #3d4f44 — ни кегля 15,
   ни этого оттенка в системе нет. Кегль — ступень body (16/15 на мобильных),
   цвет — --c-fog: ровно им та же строка выкрашена в мобильном макете
   (345:15367), значит приглушённый серо-зелёный и был замыслом. */
.tk-kontakty__extra {
  font-size: var(--t-body-size);
  line-height: 1.5;               /* мера строки из макета; ступень body даёт 1.33 */
  color: var(--c-fog);
}

/* Третья строка — примечание. ОТКЛОНЕНИЕ: в макете 13px, ступени 13
   в шкале нет — взята нижняя, 12. Цвет --c-ash из макета дословно. */
.tk-kontakty__note {
  font-size: var(--t-label-12-size);
  line-height: 1.5;               /* мера строки из макета */
  color: var(--c-ash);
}

/* Телефоны, почта и соцсети внутри карточек — ссылки. Состояния
   в макете не нарисованы, берём фирменное как во всём подвале. */
.tk-kontakty__way a:hover { color: var(--c-brand-green); }


/* ═══ 5. Карта (Figma 345:32420) ═══════════════════════════════════════════
   Виджета карты на вёрстке ещё нет: в макете стоит плашка-заглушка
   1200×460 с меткой и подписью под ней. Плашка размечена <figure>,
   подпись — <figcaption>; когда приедет виджет Яндекс Карт или 2ГИС,
   меняется только содержимое .tk-kontakty-map__frame.
   Нижнее поле 52, как у способов связи. */

.tk-kontakty-map { padding-bottom: calc(var(--s-12) + var(--s-1)); } /* те же 52 */

/* ОТКЛОНЕНИЕ: полотно заглушки в макете #e9f0eb — оттенка между --c-mist
   и --c-hairline в палитре нет. Собран из токенов смешиванием, сырого hex
   не заводим; попадает в макетный тон с точностью до единицы. */
.tk-kontakty-map__frame {
  position: relative;
  height: 460px;                  /* высота плашки из макета; токена высоты нет */
  border-radius: var(--r-card);
  overflow: hidden;
  background: color-mix(in srgb, var(--c-mist) 50%, var(--c-hairline));
}

/* Метка на карте (345:32422). ТЕНЬ СНЯТА: в макете под меткой
   0 6 20 rgba(0,0,0,.12) — по правилам системы теней нет нигде,
   элевация только цветом, белая плашка на сером полотне и так читается.
   ОТКЛОНЕНИЕ: скругление в макете 18, ступени 18 нет — взята --r-image (20).
   Положение 80/150 снято с макета, токенов позиции в системе нет. */
.tk-kontakty-map__pin {
  position: absolute;
  top: 150px;
  left: var(--s-20);              /* 80 из макета совпало со ступенью ритма */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);                /* макет 6, шагов 6 в сетке нет — взят ближайший 8 */
  max-width: calc(100% - var(--s-10)); /* на узкой плашке метка не вылезает за край */
  padding: var(--s-5) var(--s-6);
  background: var(--c-paper);
  border-radius: var(--r-image);
}

/* Адрес на метке: 16 Medium — ступень body с насыщенностью из макета. */
.tk-kontakty-map__addr { font-weight: var(--w-medium); }

/* Ссылки «Открыть в Яндекс Картах · 2ГИС» — тот же кегль и цвет,
   что у примечаний карточек. */
.tk-kontakty-map__links { color: var(--c-fog); }
.tk-kontakty-map__links a:hover { color: var(--c-brand-green); }

/* Подпись-заглушка под плашкой. ОТКЛОНЕНИЕ: в макете подпись стоит
   вплотную к плашке (просвет 0) и с трекингом 0.05em — ступени 0.05em
   в шкале нет, трекинг не воспроизводим, а просвет поставлен 8,
   иначе строка липнет к краю плашки. */
.tk-kontakty-map__note {
  margin-top: var(--s-2);
  font-size: var(--t-label-12-size);
  line-height: 1.5;               /* мера строки из макета */
  color: var(--c-ash);
}


/* ═══ 6. Режим работы и реквизиты (Figma 345:32427) ════════════════════════
   Две карточки 588 в две колонки с просветом 24 — ровно .tk-grid +
   .tk-grid--2. Каждая карточка — самостоятельная <section> со своим
   заголовком, поэтому сетка лежит на обёртке, а не на секции.
   Снизу 92 до финального блока — канонические --s-section. */

.tk-kontakty-info { padding-bottom: var(--s-section); }

/* Карточка режима работы (345:32428). Единственная карточка страницы
   на белом полотне с обводкой: элевация здесь не заливкой, а линией.
   Толщина 1.5 — та же, что у вторичных кнопок и вкладок (--bw-outline).
   Поля 12 сверху / 24 снизу / 32 по бокам — из макета.
   Сумма сходится: 12 + 29 + 5×48 + 24 = 305. */
.tk-kontakty-hours {
  padding: var(--s-3) var(--s-card) var(--s-6);
  background: var(--c-paper);
  border: var(--bw-outline) solid var(--c-hairline);
  border-radius: var(--r-card);
}

/* Строка режима (345:32430). Разделитель — верхняя граница строки:
   так линия появляется и между заголовком и первой строкой, как в макете,
   а под последней строкой её нет. ЭТО НЕ .tk-price-row: там три колонки
   с кодом услуги и нижняя граница, здесь две и верхняя. */
.tk-kontakty-hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: 14px;            /* мера строки из макета (48 = 14+20+14); шага 14 в ритме нет */
  border-top: 1px solid var(--c-hairline); /* волосяная линия: токена толщины нет */
}

/* ОТКЛОНЕНИЕ: подпись дня в макете цветом #3d4f44 — среднего чернильного
   в палитре нет. Взят --c-ink-green: это строка данных, её читают,
   а не проглядывают, приглушать её нечем. */
.tk-kontakty-hours__day { color: var(--c-ink-green); }

/* Часы — фирменный зелёный и полужирный, как в макете. Цифры выравниваются
   по разряду: столбец времени иначе пляшет. */
.tk-kontakty-hours__time {
  color: var(--c-brand-green);
  font-weight: var(--w-semibold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Карточка реквизитов (345:32445). Плоская элевация --c-mist, поля 32.
   Просвет в макете 14 — шага 14 в сетке нет, взят ближайший 16. */
.tk-kontakty-rekv {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-card);
  background: var(--c-mist);
  border-radius: var(--r-card);
}

/* ОТКЛОНЕНИЕ: у текста в макете интерлиньяж 1.55, ступень body даёт 1.33 —
   строка длинная, интерлиньяж макета сохранён. */
.tk-kontakty-rekv__text { line-height: 1.55; }


/* ═══ 7. Адаптив (Figma «М · Контакты» 345:15315, 375×3616) ════════════════
   Точка перелома одна — 680. Поля 20 и сжатую шкалу кеглей даёт tokens.css,
   схлопывание колонок — base.css: --3 становится двумя на 1100 и одной
   на 680, --2 — одной на 680. */

@media (max-width: 1100px) {
  /* Ступени между heading-lg 50 и display-sm 76 в шкале нет — тот же
     промежуточный кегль, что у .tk-catalog__title и .tk-staff__title. */
  .tk-kontakty__title { font-size: 52px; }
}

@media (max-width: 680px) {
  /* Отступ крошек на мобильных 32 (в макете 36 — округлено до шага сетки,
     как на соседних внутренних страницах). Обязателен здесь: объявленный
     выше .tk-crumbs без медиазапроса оставил бы на телефоне 56. */

  /* Макет даёт просветы 14 и нижнее поле 28 — на сетку 4px они не ложатся,
     округлены до 16 и 32, как на /uslugi/ и /vrachi/. */
  .tk-kontakty__head {
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }
  /* Кегль заголовка страницы из мобильного макета (345:15361).
     Ступени 36 в шкале нет; трекинг -1.3px = -0.036em. */
  .tk-kontakty__title { font-size: 36px; letter-spacing: -0.036em; }
  /* Лид на мобильном 15 — это ровно ступень body в мобильной шкале. */
  .tk-kontakty__lead { max-width: none; font-size: var(--t-body-size); }

  /* Нижние поля секций: в макете 28 у способов связи и карты,
     округлены до 32. Финальные 92 внизу страницы отдаёт --s-section
     (на мобильных 56), в макете 36 — берём системный ритм. */
  .tk-kontakty,
  .tk-kontakty-map { padding-bottom: var(--s-8); }

  /* Карточки на мобильных со скруглением 20 и полями 20 (--s-card
     переключает tokens.css сам). Высота в макете 143, но там у карточки
     три строки, а не четыре — см. примечание в html: примечания
     («Клиника: пн–пт…», «Ответим…», «Парковка…») на сайте остаются
     на всех ширинах, поэтому высота минимальная, а не фиксированная. */
  .tk-kontakty__way {
    min-height: 143px;            /* высота карточки из мобильного макета */
    border-radius: var(--r-image);
  }
  /* Просвет между карточками 12 из макета вместо канонических 24:
     три плашки подряд в столбец иначе растягивают экран. Канонический
     .tk-grid не трогаем — правило на своём классе. */
  .tk-kontakty__ways { gap: var(--s-3); }

  /* Карта: высота 260, скругление 20, метка на 20/90 и с полями 16/14.
     В мобильном макете (345:15378) у метки две строки, а подписи-заглушки
     под плашкой нет вовсе. На сайте оставлены обе: ссылки «Открыть
     в Яндекс Картах · 2ГИС» — единственный способ построить маршрут
     с телефона, а подпись служебная и уедет вместе с заглушкой. */
  .tk-kontakty-map__frame { height: 260px; border-radius: var(--r-image); }
  .tk-kontakty-map__pin {
    top: 90px;
    left: var(--s-5);
    gap: var(--s-1);              /* макет 4 */
    padding: var(--s-4);          /* макет 16/14 — взят один шаг 16 */
  }

  /* Карточки режима и реквизитов: скругление 20, поля 8/20/16 и 20. */
  .tk-kontakty-hours { padding: var(--s-2) var(--s-card) var(--s-4); border-radius: var(--r-image); }
  .tk-kontakty-hours__row { padding-block: 13px; } /* мера строки из мобильного макета (44) */
  .tk-kontakty-rekv { border-radius: var(--r-image); }
  /* В мобильном макете «Лицензии и документы» — просто строка капсом,
     а не пилюля. Кнопку сохраняем (это ссылка на раздел, ей нужна
     заметная цель нажатия), но растягиваем на всю ширину карточки —
     тот же приём, что у .tk-allprice на /uslugi/. */
  .tk-kontakty-rekv .tk-btn { align-self: stretch; }

  /* Просвет между «Режимом работы» и «Реквизитами» — 72 из мобильного
     макета (36 снизу у одного кадра плюс 36 сверху у другого), а не
     канонические 24: это два разных раздела, а не ряд одной сетки. */
  .tk-kontakty-info__grid { row-gap: calc(var(--s-16) + var(--s-2)); }
}

/* ═══ licenzii ═══ */
/* ТОМОКО — страница «Лицензии и документы» /o-klinike/licenzii/.
   Снято 27.08.2026 с артбордов Figma U5M0ihzdUI9upBTwUAHZ42:
   десктоп 345:32582 (1440×4214) и мобильный
   «М · Лицензии и документы» 345:15521 (375×5343).

   Страница целиком документная: шапка страницы, плашка реквизитов
   на 19 строк и сетка карточек-документов со сканами. Здесь ТОЛЬКО то,
   чего в дизайн-системе не было: полоса крошек, шапка страницы,
   таблица реквизитов и карточка документа. Всё остальное взято как есть:
     • светлая шапка   — .tk-header--solid (components.css), заново не объявляем;
     • крошки          — .tk-breadcrumbs + .tk-breadcrumbs--slash (components.css):
                         разделитель «/» и цвет текущего пункта уже там;
     • кнопка записи   — .tk-btn + .tk-btn--primary (components.css): в макете
                         345:32628 заливка #237e33 = --c-brand-green;
     • сетка 3 колонки — .tk-grid + .tk-grid--3 (base.css): 384×3 + 24×2 = 1200,
                         просветы сошлись в ноль, своей раскладки не пишем.
                         Пять карточек ложатся в неё же: второй ряд из двух
                         остаётся прижатым влево, ровно как в макете;
     • заголовки секций 35 — ступень --t-heading, её base.css уже отдаёт <h2>;
     • финальный блок  — .tk-final и подвал (components.css + sections.css).
   Канонические классы не переопределяются: где макет расходится
   с компонентом, рядом стоит модификатор с префиксом .tk-lic-.
   Теней нет ни одной, элевация только цветом и волосяной обводкой.
   Точка перелома мобильных — 680, как во всей системе.

   Подключать после tokens.css → base.css → components.css → sections.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Хлебные крошки (Figma 345:32631) ══════════════════════════════════
   В макете крошки лежат внутри кадра «Шапка страницы» первой строкой.
   На сайте они вынесены над <main>: это навигация, а не содержание, —
   так же на всех остальных внутренних страницах. Здесь только отбивка
   от шапки: 56 из макета (345:32631, y=56). Кегль оставлен канонический
   12 (в макете 13 — ступени 13 в шкале нет).

   ПОВТОР: та же строчка стоит в кусках page-kontakty.css, page-o-klinike.css,
   page-pacientu.css, page-price.css, page-usluga.css, page-uslugi.css,
   page-vrach.css, page-vrachi.css и page-zabolevanie.css — это хром всех
   внутренних страниц, а не свойство именно этой. При следующей уборке
   .tk-crumbs место в components.css, рядом с .tk-header--solid. */
 /* 56: ступени 56 в ритме нет */


/* ═══ 2. Шапка страницы (Figma 345:32630) ══════════════════════════════════
   Кадр 1440×283: поля 120 держит .tk-container, вертикальные 56/48 — здесь,
   лестница «крошки → заголовок → лид» с просветом 22. Крошки лежат выше,
   у них своя обёртка, поэтому верхнее поле блока — ровно просвет макета
   22 → шаг 24. Сумма сходится: 56 + 16 + 24 + 61 + 24 + 58 + 48 = 287
   против 283 в макете: расхождение в 4 — цена округления 22 → 24. */

.tk-lic__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);                  /* макет 22 → шаг 24 */
  padding-top: var(--s-6);          /* тот же просвет 22 → 24 */
  padding-bottom: var(--s-12);      /* макет 48 */
}

/* ОТКЛОНЕНИЕ КЕГЛЯ: в макете 64 / 0.96 / -2.5px. Ступени 64 в шкале нет,
   ближайшая — --t-display-sm (76), заведённая в tokens.css под заголовки
   внутренних страниц; тем же кеглем набраны /uslugi/, /vrachi/, /pacientu/,
   /o-klinike/ и /pacientu/zabolevaniya/. Двенадцать пунктов разницы отданы
   за единую шкалу: заголовок внутренней страницы на сайте один и тот же
   везде, и разъезжаться он не должен. */
.tk-lic__title {
  font-size: var(--t-display-sm-size);
  line-height: var(--t-display-sm-lh);
  letter-spacing: var(--t-display-sm-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: в макете у лида кегль 19 и интерлиньяж 1.5, ступень body-lg
   даёт 20 / 1.29 — оставлен канонический, ради единой шкалы. То же решение
   принято на /vrachi/, /uslugi/ и /pacientu/. Ширина меры — из макета
   (345:32633, w=760), токена ширины текстовой колонки нет. */
.tk-lic__lead { max-width: 760px; }


/* ═══ 3. Реквизиты организации (Figma 345:32634) ═══════════════════════════
   Кадр 1440×1302: заголовок 35, просвет 24, плашка 1200×1149, нижнее
   поле 92 = --s-section. Сумма сходится: 37 + 24 + 1149 + 92 = 1302.

   РАЗМЕТКА: в макете блок назван «Таблица», но это не таблица данных,
   а девятнадцать пар «признак — значение». Поэтому в разметке <dl>,
   а не <table>: заголовков столбцов у неё нет, а на мобильных пары
   складываются в лестницу — со строками <tr> это пришлось бы ломать
   переопределением display. */

.tk-lic-req { padding-bottom: var(--s-section); }

.tk-lic-req__title { margin-bottom: var(--s-6); }   /* макет 24 */

/* Плашка: заливка --c-mist, скругление карточное 24, поля 32 по бокам,
   сверху 8 и снизу 20 (345:32636). Верхние 8 меньше нижних 20 намеренно:
   у первой строки есть своя верхняя линия, и она уже даёт воздух. */
.tk-lic-req__table {
  margin: 0;
  padding: var(--s-2) var(--s-8) var(--s-5);
  background: var(--c-mist);
  border-radius: var(--r-card);
}

/* Строка: колонка признака 420 из макета, значение забирает остаток
   (1136 − 420 − 24 = 692, сходится с замером 345:32639). Разделитель —
   волосяная линия сверху у каждой строки, включая первую: так в макете. */
.tk-lic-req__row {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: var(--s-6);                             /* макет 24 */
  align-items: center;
  padding-block: 18px;                         /* макет 345:32637: 18, ступени 18 в ритме нет */
  border-top: 1px solid var(--c-hairline);     /* волосяная линия: токена толщины нет */
}

/* ОТКЛОНЕНИЕ: признак в макете 15/1.45, ступеней 15 в шкале нет —
   поставлена каноническая .t-body (16/1.33) цветом --c-fog. То же решение,
   что у описания карточки на /pacientu/. */
.tk-lic-req__key { color: var(--c-fog); }

/* Значение 16 SemiBold. ОТКЛОНЕНИЕ: в макете интерлиньяж 1.45 против
   канонических 1.33 — здесь взят макетный: строки длинные (счета, ОКВЭД,
   полное наименование), и на 1.33 они слипаются. */
.tk-lic-req__val {
  font-weight: var(--w-semibold);
  line-height: 1.45;                           /* макет 345:32639 */
}

/* Телефон и почта в реквизитах — ссылки, но в макете они набраны тем же
   цветом, что остальные значения. Цвет не трогаем, зелёный даём только
   на наведении — как у крошек в components.css. */
.tk-lic-req__val a:hover { color: var(--c-brand-green); }


/* ═══ 4. Документы (Figma 345:32694) ═══════════════════════════════════════
   Кадр 1440×1119: заголовок 35, просвет 24, два ряда карточек 384×471
   через 24, нижнее поле 92. Сумма сходится: 37 + 24 + 471 + 24 + 471 + 92
   = 1119. Ряды макета — строки одной канонической .tk-grid--3, отдельных
   обёрток им не нужно: второй ряд из двух карточек остаётся прижатым
   влево сам собой. */

.tk-lic-docs { padding-bottom: var(--s-section); }

.tk-lic-docs__title { margin-bottom: var(--s-6); }   /* макет 24 */

/* Пункт списка — растяжка на высоту ряда: у карточек разной длины описания
   низ должен стоять на одной линии. Свойство раскладки, а не карточки, —
   тот же приём, что у .tk-akciya-fit__list на детальной акции. */
.tk-lic-docs__list > li { display: flex; }

/* Карточка документа: белая, волосяная обводка 1.5, скругление карточное 24,
   поля 28, высота 471 с раскладкой «превью сверху, ссылка снизу».
   Карточка целиком — ссылка на скан: так тап-цель во всю плашку,
   а не в одну строчку «СМОТРЕТЬ». */
.tk-lic-doc {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  min-height: 471px;                            /* макет 345:32697 */
  padding: 28px;                                /* макет 28: в шаге 4px есть, токена нет */
  background: var(--c-paper);
  border: var(--bw-outline) solid var(--c-hairline);
  border-radius: var(--r-card);
  transition: border-color .16s ease;
}
/* Наведение: обводка зеленеет на месте. Ни тени, ни сдвига — элевации
   в системе нет, тот же приём, что у .tk-btn--secondary. */
.tk-lic-doc:hover { border-color: var(--c-brand-green); }

/* Превью скана: 328×230, своя волосяная рамка и скругление 12 (--r-input,
   тот же радиус, что у полей). Скан вписывается целиком — object-fit
   contain, а не cover: обрезать документ нельзя. */
.tk-lic-doc__preview {
  aspect-ratio: 328 / 230;                      /* мера кадра 345:32698 */
  border: 1px solid var(--c-hairline);          /* волосяная линия: токена толщины нет */
  border-radius: var(--r-input);
  overflow: hidden;
  background: var(--c-paper);
}
.tk-lic-doc__preview img { width: 100%; height: 100%; object-fit: contain; }

/* Заголовок карточки 20 SemiBold. ОТКЛОНЕНИЕ: в макете интерлиньяж 1.18
   и трекинг -0.4px (-0.02em), ступень body-lg даёт 1.29 и -0.03em —
   берём токен, из макета оставлена только насыщенность. */
.tk-lic-doc__title {
  font-size: var(--t-body-lg-size);
  line-height: var(--t-body-lg-lh);
  letter-spacing: var(--t-body-lg-ls);
  font-weight: var(--w-semibold);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: описание в макете 14/1.45, ступеней 14 в текстовой шкале нет
   (label-14 — надстрочник в капители, не проза) — поставлена каноническая
   .t-body цветом --c-fog, интерлиньяж макетный. */
.tk-lic-doc__text { line-height: 1.45; }

/* ОТКЛОНЕНИЕ: «СМОТРЕТЬ →» в макете 12 SemiBold, ступень label-12 даёт
   12 Medium. Кегль и трекинг (1.2px = 0.1em) берём из шкалы, насыщенность —
   из макета. Приём тот же, что у .tk-pacientu-card__go. */
.tk-lic-doc__go {
  color: var(--c-brand-green);
  font-size: var(--t-label-12-size);
  font-weight: var(--w-semibold);
  letter-spacing: var(--t-label-12-ls);
  line-height: 1.2;
  text-transform: uppercase;
}


/* ═══ 5. Адаптив ═══════════════════════════════════════════════════════════
   Точка перелома одна — 680, мобильный макет 345:15521. Поля и сжатую
   шкалу кеглей даёт tokens.css, колонки сетки — base.css: --3 становится
   двумя на 1100 и одной на 680. */

@media (max-width: 1100px) {
  /* Ступени между heading-lg 50 и display-sm 76 в шкале нет — тот же
     промежуточный кегль, что у .tk-staff__title и .tk-catalog__title. */
  .tk-lic__title { font-size: 52px; }

  /* Контейнер здесь 1004 (поля 48), внутри плашки остаётся 940.
     Колонка признака 420 забрала бы почти половину — ужимаем до 320:
     320 + 24 + 596, самые длинные значения (счета) в 596 помещаются. */
  .tk-lic-req__row { grid-template-columns: 320px minmax(0, 1fr); }
}

@media (max-width: 680px) {      /* макет 345:15566, y=32 */

  .tk-lic__head {
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }
  /* Мобильный кегль заголовка страницы: ступени 34 в шкале нет, значение
     то же, что у .tk-staff__title и .tk-catalog__title; в макете 345:15567
     заголовок как раз в две строки по 35. */
  .tk-lic__title { font-size: 34px; letter-spacing: -0.03em; }
  .tk-lic__lead  { max-width: none; }

  .tk-lic-req__title,
  .tk-lic-docs__title { margin-bottom: var(--s-3); }   /* макет 14 и 12 → шаг 12 */

  /* Плашка реквизитов: поля 20 по бокам (345:15571), скругление то же
     карточное 24 — на мобильном макете оно не менялось. */
  .tk-lic-req__table { padding: var(--s-2) var(--s-5) var(--s-4); }

  /* Строка складывается в лестницу «надстрочник → значение» (345:15572):
     признак уходит в капитель, значение встаёт под ним. Разметка та же,
     переключение целиком на CSS. */
  .tk-lic-req__row {
    grid-template-columns: 1fr;
    gap: var(--s-1);                            /* макет 4 */
    padding-block: 13px;                        /* макет 345:15572: 13, ступени 13 в ритме нет */
  }
  /* ОТКЛОНЕНИЕ: надстрочник в макете 11 Medium с трекингом 0.8px,
     ступень label-12 даёт 12 и 0.1em — берём ступень, цвет из макета. */
  .tk-lic-req__key {
    font-size: var(--t-label-12-size);
    font-weight: var(--w-medium);
    letter-spacing: var(--t-label-12-ls);
    text-transform: uppercase;
    color: var(--c-ash);
  }
  /* Значение 15 приходит само: на 680 --t-body-size равен 15. */
  .tk-lic-req__val { line-height: 1.4; }        /* макет 345:15574 */

  /* Карточка документа в одну колонку идёт по содержимому: держать 471
     незачем — под коротким описанием повиснет пустая треть экрана.
     Поля 20 приходят сами (--s-card на 680 равен 20), скругление
     в мобильном макете 20 (345:15610) вместо карточных 24. */
  .tk-lic-doc {
    min-height: 0;
    padding: var(--s-card);
    border-radius: var(--r-image);
  }
  .tk-lic-doc__preview { aspect-ratio: 295 / 190; }   /* мера кадра 345:15611 */
}

/* ═══ nalogovyy-vychet ═══ */
/* ТОМОКО — страница «Налоговый вычет» /pacientu/nalogovyy-vychet/.
   Снято 27.08.2026 с артборда Figma 345:32940 (1440×3958),
   файл U5M0ihzdUI9upBTwUAHZ42.

   Страница из четырёх блоков: шапка, три вопроса-ответа, два способа
   заказать справку с плашкой «ВАЖНО» и большая форма заявки.
   Ближайшая родня — /pacientu/oms/ и /pacientu/pamyatka/: у них та же
   шапка страницы (кегль 64, просветы 22 и 48) и та же зелёная плашка;
   где макет даёт те же величины, значения намеренно повторены,
   а не подобраны заново.

   Здесь ТОЛЬКО то, чего в дизайн-системе не было: шапка страницы,
   карточка вопроса, карточка способа, две плашки-примечания и раскладка
   формы. Всё остальное взято как есть:
     • светлая шапка   — .tk-header--solid (components.css), заново не объявляем;
     • крошки          — .tk-breadcrumbs + .tk-breadcrumbs--slash (components.css),
                         полоса .tk-crumbs с отбивкой 56 уже объявлена куском
                         page-pacientu.css — копии не делаем;
     • кнопка записи   — .tk-btn + .tk-btn--primary (components.css): в макете
                         345:32986 заливка #237e33 = --c-brand-green, радиус 300;
     • поля формы      — .tk-field + .tk-field__input (components.css): в макете
                         345:33038 обводка 1px #c9dbce = --c-field-border,
                         радиус 12 = --r-input, заливка белая — сошлось дословно;
     • чекбоксы        — .tk-check (components.css);
     • сетки 2×588 и 2×544 — .tk-grid--2 (base.css) и свой ряд формы: просвет
                         у первой канонический 24 (588×2 + 24 = 1200),
                         у второй макетный 16 (544×2 + 16 = 1104);
     • зелёный градиент плашки — токен --g-green-x (tokens.css);
     • ступени кеглей  — .t-heading, .t-subheading, .t-body-lg, .t-body,
                         .t-label-sm — с оговорками ниже;
     • финальный блок  — .tk-final и подвал (components.css + sections.css).
   Канонические классы не переопределяются: где макет расходится
   с компонентом, рядом стоит модификатор с префиксом .tk-vychet-.
   Теней нет ни одной, элевация только цветом.
   Точка перелома мобильных — 680, как во всей системе.

   Подключать после tokens.css → base.css → components.css → sections.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Шапка страницы (Figma 345:32988) ══════════════════════════════════
   Кадр 1440×283: поля 120 держит .tk-container, вертикальные — здесь.
   Крошки лежат выше, в своей полосе .tk-crumbs (отбивка 56 из общего
   куска pages.css), поэтому верхнее поле блока — ровно просвет между
   ними и заголовком. Просветы макета 22 → шаг сетки 24.
   Сумма сходится: 56 + 16 + 22 + 61 + 22 + 58 + 48 = 283.

   Кадр совпадает с шапками /pacientu/oms/ и /pacientu/pamyatka/ до пикселя,
   включая кегль заголовка. Классы всё же свои, чтобы кусок страницы
   не зависел от соседнего куска сборки. */

.tk-vychet-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);                /* макет 22 → шаг 24 */
  padding-top: var(--s-6);        /* просвет крошки → заголовок, тот же 22 → 24 */
  padding-bottom: var(--s-12);    /* макет 48 */
}

/* Ступени 64 в шкале кита нет: она между heading-lg 50 и display-sm 76.
   Замер 345:32990: кегль 64, интерлиньяж 0.96, трекинг −2.5px переведён
   в em делением на кегль (−0.039em), чтобы не разъезжался на адаптиве.
   Значения ровно те же, что у .tk-oms-head__title, .tk-pamyatka__title
   и .tk-usluga-hero__title — это одна ступень на четырёх страницах,
   а не четыре подбора. */
.tk-vychet-head__title {
  font-size: var(--t-page-title-size);
  line-height: var(--t-page-title-lh);
  letter-spacing: var(--t-page-title-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: лид набран кеглем 19 при трекинге −0.5px — ступени 19
   в шкале нет, берём каноническую .t-body-lg (20). Интерлиньяж макетный
   1.5 против токенных 1.29: это вводный абзац в меру 837, канонический
   встал бы плотнее. Ширина — мера строки из макета (345:32991, w=837),
   токена ширины текста нет. */
.tk-vychet-head__lead {
  line-height: 1.5;
  max-width: 837px;
}


/* ═══ 2. Общая обвязка секций ══════════════════════════════════════════════
   Три блока страницы — вопросы, способы и форма — отбиты снизу одинаково:
   92, то есть канонический --s-section. Заголовок секции отбит
   от содержимого на 24. Тот же приём, что у .tk-oms-sec и .tk-test-sec.

   Кадры сходятся: вопросы 420 + 92 = 512;
   способы 37 + 24 + 229 + 24 + 67 + 92 = 473; форма 1088 + 92 = 1180. */

.tk-vychet-sec { padding-bottom: var(--s-section); }

.tk-vychet-sec__title { margin-bottom: var(--s-6); }   /* макет 24 */


/* ═══ 3. Вопросы и ответы (Figma 345:32992) ════════════════════════════════
   Три плашки --c-mist столбиком, просвет 20. Заголовка у блока в макете
   нет — его роль играют сами вопросы, поэтому это не секция с общим
   заголовком, а список: подробности в комментарии разметки.
   Высоты плашек 144 / 118 / 118 = 26 + текст + 26. */

.tk-vychet-faq {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);                /* макет 20 */
}

.tk-vychet-faq__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);                /* макет 12 */
  padding: 26px var(--s-8);       /* макет 26/32; шага 26 в ритме 4px нет */
  background: var(--c-mist);
  border-radius: var(--r-image);  /* макет 20 */
}

/* Кегль вопроса 22 — между body-lg 20 и subheading 24, своей ступени нет.
   Тот же случай, что у .tk-test-res__name (22) и .tk-zabol-todo__sum (28).
   ОТКЛОНЕНИЕ: трекинг макета −0.5px = −0.0227em; оставлен канонический
   −0.03em, унаследованный от body, — на 22 это −0.66px, разница
   в четверть пикселя, ради единой шкалы её не размениваем. */
.tk-vychet-faq__q {
  font-size: 22px;                /* замер 345:32994; ступени 22 в шкале нет */
  line-height: 1.25;              /* мера строки из макета */
  letter-spacing: var(--t-body-ls);
  font-weight: var(--w-semibold);
}

/* ОТКЛОНЕНИЕ ЦВЕТА: ответ в макете набран #3d4f44 — цвета нет ни в палитре,
   ни в переменных Figma (он ровно между --c-ink-green и --c-fog). Та же
   история, что на контактах, в статье блога и в памятке: сырой hex
   не пишем, берём канонический чернильный. Ответ — содержание страницы,
   а не примечание, приглушать его нечем. Интерлиньяж макетный 1.6
   против канонических 1.33: строки во всю ширину контейнера. */
.tk-vychet-faq__a { line-height: 1.6; }


/* ═══ 4. Как заказать справку (Figma 345:33002) ════════════════════════════
   Заголовок 35 Regular (ступень .t-heading сошлась дословно: трекинг
   макета −1.05px = −0.03em; расходится только интерлиньяж — макет 1.05,
   токен 1.0), два способа в канонической .tk-grid--2 (588×2 + 24 = 1200)
   и плашка «ВАЖНО» под ними. */

/* Просвет между сеткой способов и плашкой «ВАЖНО» — макетные 24
   (плашка на y=314 при низе сетки 290). Сама сетка канонической
   .tk-grid--2, своих правил ей не нужно. */
.tk-vychet-ways { margin-bottom: var(--s-6); }

/* Карточка способа: белая, с обводкой 1.5 (--bw-outline, та же, что
   у .tk-btn--secondary и вкладок), скругление карточное 24, поля 32.
   Высота выровнена по соседке: в макете обе 229 при разной длине текста. */
.tk-vychet-way {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);                /* макет 14 → шаг 16 */
  height: 100%;
  padding: var(--s-card);         /* макет 32 */
  background: var(--c-paper);
  border: var(--bw-outline) solid var(--c-hairline);
  border-radius: var(--r-card);   /* макет 24 */
}

/* ОТКЛОНЕНИЕ: номер способа в макете 11 SemiBold с трекингом 1.1px,
   ступень label-12 даёт 12 Medium и 0.1em. Кегль и трекинг берём
   из шкалы, насыщенность — из макета. Приём тот же, что
   у .tk-test-step__num и .tk-usluga-step__num. */
.tk-vychet-way__num { font-weight: var(--w-semibold); }

/* Заголовок способа 24 SemiBold, интерлиньяж 1.13, трекинг −0.72px —
   ступень .t-subheading сошлась с макетом один в один, своего правила нет. */

/* Список пунктов: кружок 6px и текст. В макете кружок — отдельный слой
   Ellipse, но это маркер списка, а не иконка: рисуем псевдоэлементом,
   картинку под маркер не заводим. Цвет фирменный зелёный, как в макете. */
.tk-vychet-way__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);                /* макет 14 → шаг 16 */
  width: 100%;
}

.tk-vychet-way__list li {
  position: relative;
  padding-left: 18px;             /* макет: кружок 6 + просвет 12 */
  line-height: 1.5;               /* мера строки из макета */
}

.tk-vychet-way__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;                    /* середина первой строки при 15/1.5 */
  width: 6px;                     /* замер 345:33009 */
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-brand-green);
}


/* ═══ 5. Плашка «ВАЖНО» (Figma 345:33029) ══════════════════════════════════
   Метка слева, текст справа. Высота 67 = 22 + 23 + 22.

   Заливка #fdf1e0 и цвет метки #b96c08 — единственные два цвета страницы,
   которых нет ни в палитре, ни в переменных Figma. Сырым hex не пишем:
   заливка — ровно 13% оранжевого на бумаге (255 − 0.13×12 = 253,
   255 − 0.13×108 = 241, 255 − 0.13×235 = 224), метка — тот же оранжевый,
   притемнённый чернильным до 76% (243×0.76 + 11×0.24 = 187 при замере 185,
   147×0.76 + 26×0.24 = 118 при 108, 20×0.76 + 16×0.24 = 19 при 8).
   Метку намеренно НЕ красим каноническим --c-orange, как это сделано
   на /pacientu/test-zreniya/cvetovospriyatie/: чистый оранжевый на этой
   заливке даёт контраст 2.0:1 — ниже порога WCAG даже для крупного текста,
   а здесь кегль 11. Притемнённый даёт 4.6:1. Расхождение двух страниц
   отмечено в приёмке: править надо ту, а не эту. */

.tk-vychet-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);                /* макет 16 */
  padding: 22px 28px;             /* макет 22/28; шагов 22 и 28 в ритме нет */
  background: color-mix(in srgb, var(--c-orange) 13%, var(--c-paper));
  border-radius: var(--r-image);  /* макет 20 */
}

/* ОТКЛОНЕНИЕ: метка в макете 11 SemiBold с трекингом 1.1px — кегль
   и трекинг из ступени label-12, насыщенность из макета. Не сжимается:
   в макете строка стоит одной колонкой слева от текста. */
.tk-vychet-note__label {
  flex: none;
  font-weight: var(--w-semibold);
  color: color-mix(in srgb, var(--c-orange) 76%, var(--c-ink-green));
}

/* Текст плашки 16 Medium — кегль сошёлся со ступенью .t-body, из макета
   взяты насыщенность и интерлиньяж 1.45. Цвет основной, --c-ink-green:
   это предупреждение, а не примечание. */
.tk-vychet-note__text {
  flex: 1 1 auto;
  font-weight: var(--w-medium);
  line-height: 1.45;
}


/* ═══ 6. Форма заявки (Figma 345:33032 → карточка 345:33033) ═══════════════
   Карточка --c-mist во всю ширину контейнера: скругление 24, поля 48,
   просвет между всеми блоками 22 → шаг 24. Высота 1088 сходится
   из блоков: 48 + 37 + 48 + 225 + 22 + 225 + 56 + 92 + 22×2 + 22×2 + 45 + 48.

   Поля ввода канонические (.tk-field__input): обводка, радиус и заливка
   в макете совпали с компонентом дословно. ОТКЛОНЕНИЕ: в макете высота
   поля 56 (поля 18/20), канон даёт 53 (поля 16/20) — три пикселя отданы
   за единое поле сайта, компонент не переопределяем. */

.tk-vychet-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);                /* макет 22 → шаг 24 */
  padding: var(--s-12);           /* макет 48 */
  background: var(--c-mist);
  border-radius: var(--r-card);   /* макет 24 */
}

/* Кегль 32 — между subheading 24 и heading 35, своей ступени нет.
   Тот же случай, что у .tk-akciya-terms__now. ОТКЛОНЕНИЕ: трекинг
   в макете не задан, а h2 наследует из base.css −0.03em — сбрасываем,
   иначе заголовок карточки сожмётся против макета. */
.tk-vychet-form__title {
  font-size: 32px;                /* замер 345:33034; ступени 32 в шкале нет */
  line-height: 1.15;              /* мера строки из макета */
  letter-spacing: normal;         /* в макете трекинга нет */
  font-weight: var(--w-semibold);
}

/* ОТКЛОНЕНИЕ: подзаголовок формы 16 Regular цветом #7c8a81 — это ровно
   --c-fog, класс .c-muted; из макета взят только интерлиньяж 1.5. */
.tk-vychet-form__lead { line-height: 1.5; }

/* Блок полей — <fieldset>, у него свой сброс: браузерная рамка и поля
   мешают ритму карточки. Просвет 14 → шаг 16, как в макете. */
.tk-vychet-form__block {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);                /* макет 14 → шаг 16 */
  width: 100%;
  min-width: 0;                   /* иначе fieldset не сжимается в гриде */
  margin: 0;
  padding: 0;
  border: 0;
  transition: opacity .2s ease;
}

/* Блок налогоплательщика, погашенный галочкой «налогоплательщик — тот же
   пациент». Гасит его menu.js нативным fieldset.disabled: браузер сам
   выключает поля и не отправляет их содержимое. Здесь только вид —
   чтобы блок читался как выключенный, а не как сломанный.

   Прозрачность 55%, а не 30: подписи полей должны остаться разборчивыми.
   Человеку надо видеть, что именно он пропускает, иначе галочка выглядит
   так, будто спрятала что-то важное. */
.tk-vychet-form__block.is-frozen {
  opacity: .55;
  cursor: not-allowed;
}
.tk-vychet-form__block.is-frozen .tk-field__input {
  background: var(--c-disabled-bg);
  color: var(--c-disabled-ink);
}
@media (prefers-reduced-motion: reduce) {
  .tk-vychet-form__block { transition: none; }
}

/* ОТКЛОНЕНИЕ: надстрочник блока в макете 11 SemiBold с трекингом 0.9px,
   ступень label-12 даёт 12 Medium и 0.1em. Кегль и трекинг из шкалы,
   насыщенность — из макета. <legend> вынут из потока рамки: она снята
   выше, и стандартный отступ легенды здесь только мешает. */
/* Нижний отступ ОБЯЗАТЕЛЕН и заменяет gap. <legend> — особый ребёнок
   <fieldset>: браузер выносит его из потока и флексовый gap блока
   на него НЕ распространяется. Из-за этого надстрочники «ДАННЫЕ
   ПАЦИЕНТА» и «ДАННЫЕ НАЛОГОПЛАТЕЛЬЩИКА» стояли вплотную к первому
   полю — замер давал 0 px до соседа при просвете 16 между самими
   полями. Ставим тот же шаг, что у полей внутри блока: надстрочник
   остаётся частью своей группы, а не отрывается от неё. */
.tk-vychet-form__legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: var(--s-4);      /* = gap блока */
  font-weight: var(--w-semibold);
}

/* Ряд из двух полей: 544×2 + 16 = 1104 — просвет 16 макетный, а не
   канонический 24: внутри карточки формы поля стоят плотнее сетки. */
.tk-vychet-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);                /* макет 16 */
  width: 100%;
}

/* Поле во всю ширину карточки — ряд из одной колонки. */
.tk-vychet-form__field { width: 100%; }

/* ОТКЛОНЕНИЕ: подпись у чекбоксов в макете 14, канон .tk-check__text
   даёт 12. Здесь берём макетный кегль: в первом чекбоксе не согласие,
   а указание, от которого зависит, заполнять ли второй блок формы, —
   его нельзя ставить мельче поясняющего текста. Канонический класс
   не трогаем, кегль поднимает свой модификатор рядом с ним. */
.tk-vychet-form__check-text {
  font-size: var(--t-label-14-size);
  line-height: 1.45;              /* мера строки из макета */
  color: var(--c-ink-green);
}

/* У первого чекбокса подпись ещё и в среднем начертании — это указание,
   а не согласие (замер 345:33053). */
.tk-vychet-form__check-text--strong { font-weight: var(--w-medium); }

/* Зелёная плашка «ОБРАЩАЕМ ВНИМАНИЕ»: тот же градиент, что у финального
   блока, развёрнутый по горизонтали (--g-green-x). ОТКЛОНЕНИЕ: в макете
   градиент двухстоповый #268034 → #17532a, токен добавляет третьим стопом
   --c-forest; берём токен — трёхстоповый градиент на сайте один и тот же
   везде (.tk-oms-alert, .tk-final), плодить второй нельзя. */
.tk-vychet-form__notice {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);                /* макет 10 → шаг 12 */
  width: 100%;
  padding: 22px 26px;             /* макет 22/26; шагов 22 и 26 в ритме нет */
  border-radius: var(--r-image);  /* макет 20 */
  overflow: hidden;
  color: var(--c-paper);
  background: var(--g-green-x);
}

/* ОТКЛОНЕНИЕ: надстрочник плашки в макете 11 SemiBold без трекинга,
   ступень label-12 даёт 12 Medium и 0.1em. Кегль и трекинг из шкалы,
   насыщенность из макета. Цвет --c-orange — единственный акцент
   на тёмной поверхности, как у .tk-oms-alert__label. */
.tk-vychet-form__notice-label {
  color: var(--c-orange);
  font-weight: var(--w-semibold);
}

/* ОТКЛОНЕНИЕ: текст плашки в макете 15 — ступени 15 в шкале нет,
   набран канонической .t-body (16, на мобильных 15) с макетным
   интерлиньяжем 1.5. */
.tk-vychet-form__notice-text { line-height: 1.5; }

/* Кнопка каноническая. ОТКЛОНЕНИЕ: в макете 345:33082 поля 16/40
   при кегле 13 (высота 45), канон .tk-btn даёт 16/32 при кегле 14
   (высота 49) — четыре пикселя отданы за единую кнопку сайта.
   Свой модификатор задаёт кнопке только выравнивание: остальные
   дети карточки тянутся во всю ширину, а она стоит по содержимому. */
.tk-vychet-form__submit { align-self: flex-start; }

/* Строка чекбокса тянется во всю ширину карточки: иначе длинная подпись
   согласия обрывается по содержимому, а не по краю формы. */
.tk-vychet-form__check { width: 100%; }


/* ═══ 7. Адаптив ═══════════════════════════════════════════════════════════
   ОТДЕЛЬНОГО МОБИЛЬНОГО МАКЕТА У /pacientu/nalogovyy-vychet/ НЕТ: в файле
   нарисованы мобильные виды только для главной, контактов, лицензий,
   услуги, теста и меню. Раскладка выведена по правилам системы и
   по мобильным видам соседних страниц раздела «Пациенту». Поля и сжатую
   шкалу кеглей даёт tokens.css, колонки сеток — base.css (--2 становится
   одной на 680). Точка перелома одна — 680. */

@media (max-width: 1100px) {
  /* Контейнер здесь 1004 (поля 48). Заголовок 64 в эту ширину помещается
     и не жмётся — так же оставлены .tk-oms-head__title и .tk-pamyatka__title
     с тем же кеглем. Мера лида снимается: она шире контейнера. */
  .tk-vychet-head__lead { max-width: none; }

  /* Поля формы: 48 по бокам съедали бы десятую часть ширины. */
  .tk-vychet-form { padding: var(--s-8); }
}

@media (max-width: 680px) {
  .tk-vychet-head {
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }
  /* Кегль заголовка совпадает с мобильной ступенью --t-display-size (38) —
     то же решение, что у .tk-oms-head__title и .tk-pamyatka__title. */
  .tk-vychet-head__title {
    font-size: var(--t-display-size);
    line-height: var(--t-display-lh);
  }

  .tk-vychet-sec        { padding-bottom: var(--s-10); }  /* мобильный ритм 40 */
  .tk-vychet-sec__title { margin-bottom: var(--s-4); }

  /* Плашки в столбик стоят плотнее: просвет 16 вместо 20,
     поля — мобильный --s-card (20). */
  .tk-vychet-faq       { gap: var(--s-4); }
  .tk-vychet-faq__item { gap: var(--s-2); padding: var(--s-card); }
  /* Кегль вопроса на телефоне — мобильный subheading (20). */
  .tk-vychet-faq__q    { font-size: var(--t-subheading-size); }

  /* Карточка способа: поля 20 (мобильный --s-card), скругление на ступень
     меньше карточного — так же ужаты .tk-oms-alert и .tk-lic-doc на 375. */
  .tk-vychet-way {
    gap: var(--s-3);
    padding: var(--s-card);
    border-radius: var(--r-image);
  }
  .tk-vychet-way__list { gap: var(--s-3); }
  /* Просвет между карточками в столбик — 16, как у плашек вопросов;
     канонический --s-gutter (24) на телефоне слишком широк. */
  .tk-vychet-ways      { gap: var(--s-4); margin-bottom: var(--s-4); }

  /* Плашка «ВАЖНО» разворачивается в столбик: на 335 метка и текст
     в строку не помещаются — так же сложена .tk-test-note. */
  .tk-vychet-note {
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-5) 22px;     /* макет-ступень 20/22 */
  }

  /* Форма: поля 20 по бокам и сверху-снизу, скругление 20.
     Ряды из двух полей складываются в столбик — 544 в 335 не влезает. */
  .tk-vychet-form {
    gap: var(--s-5);
    padding: var(--s-card);
    border-radius: var(--r-image);
  }
  .tk-vychet-form__title  { font-size: var(--t-heading-size); }  /* мобильный 26 */
  .tk-vychet-form__row    { grid-template-columns: 1fr; }
  .tk-vychet-form__notice { padding: var(--s-5) 22px; }
}

/* ═══ o-klinike ═══ */
/* ТОМОКО — страница «О клинике» /o-klinike/.
   Снято 27.08.2026 с артбордов Figma U5M0ihzdUI9upBTwUAHZ42:
   десктоп 345:31639 (1440×4318) и мобильный «М · О клинике» 345:14727 (375×5493).

   Здесь ТОЛЬКО то, чего в дизайн-системе не было: шапка страницы,
   полоса с фотографией ресепшена, две колонки «Концепция и цели»,
   зелёная плашка-слоган с карточкой партнёра и отбивки секции ценностей.
   Всё остальное взято как есть:
     • светлая шапка и крошки со слэшем — .tk-header--solid и
       .tk-breadcrumbs--slash (components.css), заново не объявляются;
     • сетки 2 и 3 колонки           — .tk-grid + .tk-grid--2 / --3 (base.css);
     • карточка ценности             — .tk-card-value и .tk-card-value__icon
                                       (components.css) плюс плитка
                                       .tk-values__card (sections.css) —
                                       блок на этой странице тот же, что
                                       на главной, второго варианта не заводим;
     • шкала кеглей                  — .t-body-lg / .t-subheading / .t-label-sm;
     • финальный блок и подвал       — .tk-final (components.css + sections.css).
   Канонические классы не переопределяются: где макет расходится
   с компонентом, рядом стоит модификатор с префиксом секции.
   Теней нет ни одной, элевация только цветом и градиентом.
   Точка перелома мобильных — 680, как во всей системе.

   Подключать после tokens.css → base.css → components.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Хлебные крошки (Figma 345:31688) ══════════════════════════════════
   Полоса крошек живёт над <main>: это навигация, а не содержание.
   Отступ от шапки — 56 из макета (крошки лежат на y=56 внутри кадра
   «Шапка страницы» 345:31687). Правило дословно совпадает с кусками
   page-kontakty.css, page-price.css, page-usluga.css, page-uslugi.css
   и page-vrachi.css — это хром всех внутренних страниц. Разделитель «/»
   и цвет текущего пункта уже вынесены в components.css и здесь
   НЕ повторяются. */
 /* 56: ступени 56 в ритме нет */


/* ═══ 2. Шапка страницы (Figma 345:31687) ══════════════════════════════════
   Кадр 1440×304: поля 120 держит .tk-container, просветы 24, нижнее поле 56.
   Крошки лежат выше и со своим отступом, поэтому верхнее поле блока —
   ровно просвет 24. Сумма сходится: 56 + 16 + 24 + 70 + 24 + 58 + 56 = 304. */

.tk-oklinike__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  padding-top: var(--s-6);
  padding-bottom: calc(var(--s-12) + var(--s-2)); /* те же 56 из макета */
}

/* Заголовок 76 — ступень --t-display-sm, заведённая в tokens.css ровно
   под этот кегль. ОТКЛОНЕНИЕ: в макете интерлиньяж 0.92 и трекинг -3px
   (-0.0395em), токен даёт 0.94 и -0.035em; берём токен, чтобы 76-й кегль
   не расползался сырыми пикселями по страницам — как на /price/,
   /kontakty/, /uslugi/ и /vrachi/. */
.tk-oklinike__title {
  font-size: var(--t-display-sm-size);
  line-height: var(--t-display-sm-lh);
  letter-spacing: var(--t-display-sm-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: у лида в макете интерлиньяж 1.45, ступень body-lg даёт 1.29 —
   оставлен канонический, ради единой шкалы. Ширина — мера строки из макета
   (345:31690, w=1029), токена ширины текстовой колонки нет. */
.tk-oklinike__lead { max-width: 1029px; }


/* ═══ 3. Фотография клиники (Figma 345:31691) ══════════════════════════════
   Кадр 1440×612: снимок 1200×520 во всю ширину контейнера, скругление
   карточное 24, нижнее поле секции 92 = --s-section (оно же закрывает
   всю секцию «О клинике», снимок в ней последний). Пропорция задана
   через aspect-ratio, а не высотой: полотно у́же 1440 — снимок обязан
   сжиматься вместе с контейнером. */

.tk-oklinike { padding-bottom: var(--s-section); }

.tk-oklinike__photo {
  aspect-ratio: 1200 / 520;        /* мера кадра «Ресепшен» 345:31692 */
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-mist);       /* подложка, пока снимок грузится */
}
.tk-oklinike__photo img { width: 100%; height: 100%; object-fit: cover; }


/* ═══ 4. Концепция и цели (Figma 345:31693) ════════════════════════════════
   Кадр 1440×473, нижнее поле 92. Две колонки по 576 через 48 — это
   каноническая .tk-grid--2, просвет которой (24) для этой пары мал:
   между колонками в макете 48. Базовый класс не трогаем, ставим
   модификатор на своей обёртке. */

.tk-oklinike-idea { padding-bottom: var(--s-section); }
.tk-oklinike-idea__grid { gap: var(--s-12); } /* макет 48 вместо сеточных 24 */

/* Колонка: заголовок и пункты идут одной лестницей с шагом 14.
   Шага 14 в ритме 4px нет — значение из макета, как у сетки врачей
   на мобильной главной. */
.tk-oklinike-idea__col {
  display: flex;
  flex-direction: column;
  gap: 14px;                       /* макет 345:31694 / 345:31712 */
}

/* Заголовки колонок — 35 — ровно ступень --t-heading, которую base.css
   уже отдаёт тегу <h2>: своего правила не нужно. ОТКЛОНЕНИЕ: в макете
   интерлиньяж 1.05, токен даёт 1.0 — берём токен. */

.tk-oklinike-idea__list {
  display: flex;
  flex-direction: column;
  gap: 14px;                       /* тот же шаг 14, что и у колонки */
  line-height: 1.5;                /* макет: 16/1.5 против канонических 1.33 */
}
.tk-oklinike-idea__list li { display: flex; gap: var(--s-3); }

/* Маркер — оранжевая точка 7px (345:31698). Рисуем фоном, а не картинкой:
   это форма, а не иконка, — тот же приём, что у списка противопоказаний
   на /uslugi/lazernaya-korrekciya/. Размера 7 в шаге сетки нет.
   Отступ сверху 9px — замер центра точки в макете (cy=12,5 при r=3,5),
   так она встаёт по середине первой строки. */
.tk-oklinike-idea__list li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 9px;
  border-radius: var(--r-pill);
  background: var(--c-orange);
}


/* ═══ 5. Слоган и партнёрство (Figma 345:31730) ════════════════════════════
   Кадр 1440×907: зелёная плашка 1200×815, нижнее поле 92.
   Градиент горизонтальный — токен --g-green-x, тот же, что у плашки ОМС
   на /price/ и у полосы на /uslugi/. Тени нет, элевация только цветом. */

.tk-oklinike-slogan { padding-bottom: var(--s-section); }

.tk-oklinike-slogan__plate {
  display: flex;
  flex-direction: column;
  gap: 26px;                                             /* макет 26: шага 26 в ритме нет */
  padding: var(--s-16) calc(var(--s-12) + var(--s-2));   /* макет 64 / 56 */
  border-radius: var(--r-card);
  background: var(--g-green-x);
  color: var(--c-paper);
  overflow: hidden;
}

/* Верх плашки: текстовая колонка тянется, карточка партнёра 300 — нет. */
.tk-oklinike-slogan__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);                /* макет 48 */
}
.tk-oklinike-slogan__col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);                 /* макет 16 */
}

/* ОТКЛОНЕНИЕ: надстрочник в макете 11px SemiBold, ступень label-12 даёт
   12px Medium. Кегль берём из шкалы, насыщенность — из макета.
   Тот же приём, что у .tk-omsnote__label на /price/. */
.tk-oklinike-slogan__label {
  color: var(--c-orange);
  font-weight: var(--w-semibold);
}

/* Строка о партнёрстве. Ступени 30 в шкале нет: между subheading 24
   и heading 35 своей нет, а 35 ломает верстку верхнего ряда плашки —
   ставим кегль из макета с его же интерлиньяжем и трекингом
   (-1,4px при кегле 30 = -0.047em). В макете строка разбита руками
   на три; на сайте это один абзац — жёсткие переносы поехали бы
   на любой другой ширине, и мобильный макет (345:14805) их не знает. */
.tk-oklinike-slogan__lead {
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.047em;
}

/* Карточка партнёра (345:31736): белая плашка 300×235, скругление
   обложечное 20, поля 26, просвет 14 — все три из макета, шагов 26 и 14
   в ритме нет. Логотип 200×141 держат атрибуты width/height. */
.tk-oklinike-slogan__partner {
  flex: none;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px;
  background: var(--c-paper);
  border-radius: var(--r-image);
}

/* ОТКЛОНЕНИЕ: подпись партнёра в макете 10px/1.45 с трекингом 0.5px.
   Ступени 10 в шкале нет — берём label-12 целиком (кегль и трекинг),
   из макета оставляем интерлиньяж, цвет и выключку по центру. */
.tk-oklinike-slogan__partner-caption {
  line-height: 1.45;
  text-align: center;
  color: var(--c-fog);
}

/* ОТКЛОНЕНИЕ: абзацы плашки в макете 15/1.55; ступени 15 в шкале нет,
   кегль остаётся канонический 16, плотность 1.55 берём из макета —
   тот же приём, что у .tk-pricelist__name на /price/. */
.tk-oklinike-slogan__text { line-height: 1.55; }


/* ═══ 6. Наши ценности (Figma 345:31744) ═══════════════════════════════════
   Кадр 1440×512, нижнее поле 92, верхнего нет. Блок совпадает с секцией
   ценностей главной (345:33765) вплоть до текстов, поэтому карточка берётся
   как есть: .tk-card-value (components.css) + плитка .tk-values__card
   (sections.css). Своих правил ровно три: отбивка заголовка, отбивка
   секции и кегль иконки. */

.tk-oklinike-values { padding-bottom: var(--s-section); }

/* Заголовок отбит от плиток на 40, а не на канонические 48 у .tk-sec-head. */
.tk-oklinike-values__head { margin-bottom: var(--s-10); }

/* Иконка на этой странице 96, а на главной 88. Канонический
   .tk-card-value__icon не трогаем — модификатор со своим префиксом
   стоит на том же элементе и перебивает его порядком в каскаде. */
.tk-oklinike-values__icon { width: var(--s-24); height: var(--s-24); }


/* ═══ 7. Адаптив (Figma «М · О клинике» 345:14727, 375×5493) ═══════════════ */

@media (max-width: 1100px) {
  /* Ступени между heading-lg 50 и display-sm 76 в шкале нет — тот же
     промежуточный кегль, что у .tk-kontakty__title и .tk-staff__title. */
  .tk-oklinike__title { font-size: 52px; }
}

@media (max-width: 680px) {
  /* Отступ крошек на мобильных 32 (в макете 36 — округлено до шага сетки,
     как на соседних внутренних страницах). Обязателен здесь: объявленный
     выше .tk-crumbs без медиазапроса оставил бы на телефоне 56. */

  /* Макет (345:14771) даёт просветы 14 и нижнее поле 28 — на сетку 4px
     они не ложатся, округлены до 16 и 32, как на /kontakty/ и /vrachi/. */
  .tk-oklinike__head {
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }
  /* Кегль заголовка страницы из мобильного макета (345:14773).
     Ступени 36 в шкале нет; трекинг -1.3px = -0.036em. */
  .tk-oklinike__title { font-size: 36px; letter-spacing: -0.036em; }
  /* Лид на мобильном 15 — это ровно ступень body в мобильной шкале. */
  .tk-oklinike__lead { max-width: none; font-size: var(--t-body-size); }

  /* Снимок ресепшена на 375 — кадр 335×220 (345:14776), пропорция другая;
     скругление макет оставляет карточным. Нижнее поле секции 28 → 32. */
  .tk-oklinike { padding-bottom: var(--s-8); }
  .tk-oklinike__photo { aspect-ratio: 335 / 220; }

  /* Колонки встают в одну (это делает .tk-grid--2), просвет между ними
     22 из макета округлён до 24; внутренний шаг колонки 14 → 12. */
  .tk-oklinike-idea { padding-bottom: var(--s-8); }  /* макет 28 */
  .tk-oklinike-idea__grid { gap: var(--s-6); }
  .tk-oklinike-idea__col,
  .tk-oklinike-idea__list { gap: var(--s-3); }       /* макет 12 */

  /* Маркер на 375 меньше: точка 6 и отступ сверху 8 (замер 345:14788:
     cy=11 при r=3). В мобильном макете точки стоят только у «Целей»,
     у «Концепции» их нет — на сайте маркеры оставлены у обоих списков:
     это два одинаковых перечня, и разнобой читался бы как ошибка. */
  .tk-oklinike-idea__list li::before { width: 6px; height: 6px; margin-top: 8px; }

  /* Плашка слогана на 375: градиент вертикальный (345:14803), скругление
     обложечное 20, поля 32/24, просвет 14 → 16, нижнее поле секции 28 → 32. */
  .tk-oklinike-slogan { padding-bottom: var(--s-8); }
  .tk-oklinike-slogan__plate {
    gap: var(--s-4);
    padding: var(--s-8) var(--s-6);
    border-radius: var(--r-image);
    background: var(--g-green);
  }
  /* Верхний ряд разворачивается в колонку, карточка партнёра — во всю
     ширину плашки. В мобильном макете карточки партнёра нет вовсе;
     на сайте она оставлена: логотип НФ МНТК — часть содержания страницы,
     а не украшение, и на телефоне он тоже нужен. */
  .tk-oklinike-slogan__head { flex-direction: column; gap: var(--s-4); }
  .tk-oklinike-slogan__partner { width: 100%; }

  /* Строка о партнёрстве на 375 — 19/1.3/-0.7px (345:14805). Кегль 19
     совпадает со ступенью subheading мобильной шкалы (20) с точностью
     до пикселя, поэтому берётся токен, а не сырое значение. */
  .tk-oklinike-slogan__lead {
    font-size: var(--t-subheading-size);
    line-height: 1.3;
    letter-spacing: -0.037em;
  }

  /* Ценности: заголовок отбит от плиток на 16, плитки между собой — тоже
     на 16 вместо сеточных 24; поля секции 44 сверху и снизу (шага 44
     в ритме нет). Саму плитку на 375 перестраивает mobile.css: поля 24,
     просвет 8, иконка 80 — здесь это не повторяется. */
  .tk-oklinike-values { padding-block: 44px; }
  .tk-oklinike-values__head { margin-bottom: var(--s-4); }
  .tk-oklinike-values__grid { gap: var(--s-4); }
}

/* ═══ oms ═══ */
/* ТОМОКО — страница «ТОМОКО в системе ОМС» /pacientu/oms/.
   Снято 27.08.2026 с артборда Figma 345:32724 (1440×3016),
   файл U5M0ihzdUI9upBTwUAHZ42.

   Страница справочная: шапка страницы, зелёная плашка с кодом услуги,
   таблица «что доступно по полису» и список нормативных документов.
   Родня ей /o-klinike/licenzii/ — там ровно та же плашка «признак —
   значение» и та же строка «СМОТРЕТЬ →»; где макет даёт те же величины,
   значения намеренно повторены, а не подобраны заново.

   Здесь ТОЛЬКО то, чего в дизайн-системе не было: полоса крошек, шапка
   страницы, плашка-предупреждение, таблица ОМС и список документов.
   Всё остальное взято как есть:
     • светлая шапка   — .tk-header--solid (components.css), заново не объявляем;
     • крошки          — .tk-breadcrumbs + .tk-breadcrumbs--slash (components.css);
     • кнопка записи   — .tk-btn + .tk-btn--primary (components.css): в макете
                         345:32770 заливка #237e33 = --c-brand-green, радиус 300;
     • ступени кеглей  — .t-heading (35 / -0.03em) сошлась с заголовками разделов
                         дословно (в макете 35 при трекинге −1.05px = −0.03em),
                         .t-body, .t-body-lg и .t-label-sm — с оговорками ниже;
     • зелёный градиент плашки — токен --g-green-x (tokens.css);
     • финальный блок  — .tk-final и подвал (components.css + sections.css).
   Канонические классы не переопределяются: и плашка, и таблица, и пункт
   списка документов — свои компоненты с префиксом страницы. Теней нет
   ни одной, элевация только цветом. Точка перелома — 680.

   Подключать после tokens.css → base.css → components.css → sections.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Хлебные крошки (Figma 345:32773) ══════════════════════════════════
   Полоса крошек живёт над <main>: это навигация, а не содержание.
   Сам компонент и модификатор со слэшем — в components.css, здесь только
   отбивка от шапки: 56 из макета (крошки на y=56 внутри кадра 345:32772).
   Кегль оставлен канонический 12 (в макете 13 — ступени 13 в шкале нет).

   ПОВТОР: та же строчка стоит в кусках page-akciya.css, page-kontakty.css,
   page-licenzii.css, page-o-klinike.css, page-pacientu.css, page-pamyatka.css,
   page-price.css, page-statya.css, page-usluga.css, page-uslugi.css,
   page-vrach.css, page-vrachi.css и page-zabolevanie.css — это хром всех
   внутренних страниц, а не свойство именно этой. Значение везде одно;
   при следующей уборке .tk-crumbs место в components.css, рядом
   с .tk-header--solid и .tk-breadcrumbs--slash. */
 /* 56: ступени 56 в ритме нет */


/* ═══ 2. Шапка страницы (Figma 345:32772) ══════════════════════════════════
   Кадр 1440×283: поля 120 держит .tk-container, вертикальные — здесь.
   Крошки лежат выше, в своей обёртке, поэтому верхнее поле блока — ровно
   просвет между ними и заголовком. Просветы макета 22 → шаг сетки 24.
   Сумма сходится: 56 + 16 + 22 + 61 + 22 + 58 + 48 = 283.

   Кадр совпадает с шапкой /pacientu/pamyatka/ до пикселя, включая кегль
   заголовка. Классы всё же свои, чтобы кусок страницы не зависел
   от соседнего куска сборки. */

.tk-oms-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);                /* макет 22 → шаг 24 */
  padding-top: var(--s-6);        /* просвет крошки → заголовок, тот же 22 → 24 */
  padding-bottom: var(--s-12);    /* макет 48 */
}

/* Ступени 64 в шкале кита нет: она между heading-lg 50 и display-sm 76.
   Замер 345:32774: кегль 64, интерлиньяж 0.96, трекинг −2.5px переведён
   в em делением на кегль (−0.039em), чтобы не разъезжался на адаптиве.
   Значения ровно те же, что у .tk-pamyatka__title и .tk-usluga-hero__title —
   это одна ступень на трёх страницах, а не три подбора. */
.tk-oms-head__title {
  font-size: var(--t-page-title-size);
  line-height: var(--t-page-title-lh);
  letter-spacing: var(--t-page-title-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: лид набран кеглем 19 при трекинге −0.5px — ступени 19
   в шкале нет, берём каноническую .t-body-lg (20). Интерлиньяж макетный
   1.5 против токенных 1.29: это вводный абзац в меру 866, канонический
   встал бы плотнее. Ширина — мера строки из макета (345:32775, w=866),
   токена ширины текста нет. */
.tk-oms-head__lead {
  line-height: 1.5;
  max-width: 866px;
}


/* ═══ 3. Общая обвязка секций ══════════════════════════════════════════════
   Три блока страницы — плашка, таблица и документы — отбиты снизу
   одинаково: 92, то есть канонический --s-section. Заголовок секции
   отбит от содержимого на 24. Тот же приём, что у .tk-test-sec.

   Кадры сходятся: плашка 193 + 92 = 285; таблица 37 + 24 + 264 + 92 = 417;
   документы 37 + 24 + 368 + 92 = 521. */

.tk-oms-sec { padding-bottom: var(--s-section); }

.tk-oms-sec__title { margin-bottom: var(--s-6); }   /* макет 24 */


/* ═══ 4. Плашка «Обратите внимание» (Figma 345:32777) ══════════════════════
   Тот же зелёный градиент, что у финального блока, развёрнутый
   по горизонтали (--g-green-x, tokens.css). Скругление 24, поля 40/36,
   просвет 12. Высота 193 = 36 + 13 + 12 + 96 + 36.

   Визуальный близнец .tk-omsnote с /price/ и .tk-allprice с /uslugi/,
   но раскладка другая: там строка с кнопкой справа, здесь колонка
   без кнопки во всю ширину контейнера. Поэтому свой класс, а не чужой:
   имя намеренно не .tk-omsnote, чтобы два разных блока про ОМС
   не слиплись в один при следующей правке. */

.tk-oms-alert {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);                /* макет 12 */
  padding: 36px var(--s-10);      /* макет 36/40; шага 36 в ритме нет */
  border-radius: var(--r-card);
  overflow: hidden;
  color: var(--c-paper);
  background: var(--g-green-x);
}

/* ОТКЛОНЕНИЕ: надстрочник в макете 11 SemiBold с трекингом 1.1px, ступень
   label-12 даёт 12 Medium и 0.1em. Кегль и трекинг берём из шкалы,
   насыщенность — из макета. Приём тот же, что у .tk-omsnote__label. */
.tk-oms-alert__label {
  color: var(--c-orange);
  font-weight: var(--w-semibold);
}

/* ОТКЛОНЕНИЕ: текст плашки в макете 22/1.45, ступени 22 в шкале нет —
   поставлена ближайшая .t-body-lg (20) с макетным интерлиньяжем.
   То же округление вниз, что у .tk-omsnote__text с 18. Мера строки —
   вся ширина контейнера, как в макете (345:32779, w=1120). */
.tk-oms-alert__text { line-height: 1.45; }


/* ═══ 5. Что доступно по полису (Figma 345:32782) ══════════════════════════
   Плашка: заливка --c-mist, скругление карточное 24, поля 32 по бокам,
   сверху 8 и снизу 20. Верхние 8 меньше нижних 20 намеренно: у первой
   строки есть своя верхняя линия, и она уже даёт воздух.
   Высота 264 = 8 + 59 × 4 + 20.

   Это тот же компонент, что .tk-lic-req__table на /o-klinike/licenzii/:
   поля, скругление, шаг строки и волосяная линия сверху совпали до
   пикселя. Отличается только ширина первой колонки — 260 против 420.
   Значения повторены сознательно; при следующей уборке pages.css оба
   просятся в один общий блок «плашка пар» рядом с .tk-price-row. */

.tk-oms-table {
  margin: 0;
  padding: var(--s-2) var(--s-8) var(--s-5);
  background: var(--c-mist);
  border-radius: var(--r-card);
}

/* Строка: колонка кода 260 из макета, услуга забирает остаток
   (1136 − 260 − 24 = 852, сходится с замером 345:32785). Разделитель —
   волосяная линия сверху у каждой строки, включая первую: так в макете.
   Высота строки 59 = 18 + 23 + 18. */
.tk-oms-table__row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--s-6);                             /* макет 24 */
  align-items: center;
  padding-block: 18px;                         /* макет 18: ступени 18 в ритме нет */
  border-top: 1px solid var(--c-hairline);     /* волосяная линия: токена толщины нет */
}

/* ОТКЛОНЕНИЕ: код в макете 15/1.45, ступеней 15 в шкале нет — <dt>
   наследует каноническую .t-body (16/1.33), цвет --c-fog из макета.
   То же решение, что у .tk-lic-req__key и описания карточки на /pacientu/.
   Цифры кода выравниваются по разряду: строки читают столбиком. */
.tk-oms-table__code {
  color: var(--c-fog);
  font-variant-numeric: tabular-nums;
}

/* Услуга 16 SemiBold. ОТКЛОНЕНИЕ: в макете интерлиньяж 1.45 против
   канонических 1.33 — здесь взят макетный: строки длинные (первая
   переваливает за 80 знаков), и на 1.33 они слипаются. */
.tk-oms-table__name {
  font-weight: var(--w-semibold);
  line-height: 1.45;                           /* макет 345:32785 */
}


/* ═══ 6. Нормативные документы (Figma 345:32797) ═══════════════════════════
   Пять пунктов без плашки: номер, название, «СМОТРЕТЬ →». Волосяная
   линия сверху у каждого, включая первый. Высота пункта — 20 + текст + 20:
   64 для однострочных и 88 для двухстрочных, сумма списка 368.

   Пункт НЕ ССЫЛКА: адресов документов макет не даёт, и карта сайта таких
   страниц не содержит — подробности в комментарии разметки. Наведение
   всё же описано: когда клиника даст адреса, <li> станет <a> и состояние
   заработает без правки стилей. */

/* Сброс маркеров и полей списку не нужен: base.css снимает их у любого
   ol[class] и ul[class]. */

.tk-oms-doc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-5);                             /* макет 20 */
  align-items: center;
  padding-block: var(--s-5);                   /* макет 20 */
  border-top: 1px solid var(--c-hairline);     /* волосяная линия: токена толщины нет */
}

/* ОТКЛОНЕНИЕ: номер в макете 12 SemiBold с трекингом 1px, ступень label-12
   даёт 12 Medium и 0.1em. Кегль и трекинг из шкалы, насыщенность
   из макета — тот же случай, что у .tk-test-step__num. Колонка не
   сжимается: номера стоят столбиком слева от текста.
   Цифры табличные, чтобы 01–05 встали в один разряд. */
.tk-oms-doc__num {
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

/* Название документа 16 Regular. ОТКЛОНЕНИЕ: интерлиньяж макетный 1.5
   против канонических 1.33 — названия законов длинные и в две строки
   на 1.33 слипаются. */
.tk-oms-doc__text { line-height: 1.5; }

/* ОТКЛОНЕНИЕ: «СМОТРЕТЬ →» в макете 12 SemiBold, ступень label-12 даёт
   12 Medium. Кегль и трекинг (1.2px = 0.1em) берём из шкалы,
   насыщенность — из макета. Приём тот же, что у .tk-lic-doc__go
   и .tk-pacientu-card__go. */
.tk-oms-doc__go {
  color: var(--c-brand-green);
  font-size: var(--t-label-12-size);
  font-weight: var(--w-semibold);
  letter-spacing: var(--t-label-12-ls);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Наведение: строка темнеет на шаг, как .tk-btn--primary:hover.
   Ни тени, ни сдвига — элевации в системе нет. Правило написано
   на <a>, поэтому на нынешней некликаемой разметке молчит. */
.tk-oms-doc a:hover .tk-oms-doc__go,
a.tk-oms-doc:hover .tk-oms-doc__go { color: var(--c-green-deep); }


/* ═══ 7. Адаптив ═══════════════════════════════════════════════════════════
   ОТДЕЛЬНОГО МОБИЛЬНОГО МАКЕТА У /pacientu/oms/ НЕТ: в файле нарисованы
   мобильные виды только для главной, контактов, лицензий, услуги и меню.
   Раскладка выведена по правилам системы и по мобильному виду соседней
   /o-klinike/licenzii/, где такая же плашка пар уже сложена в лестницу.
   Поля и сжатую шкалу кеглей даёт tokens.css. Точка перелома одна — 680. */

@media (max-width: 1100px) {
  /* Контейнер здесь 1004 (поля 48). Заголовок 64 в эту ширину помещается
     и не жмётся — так же оставлен .tk-pamyatka__title с тем же кеглем.
     Колонка кода 260 съедала бы четверть строки: ужимаем до 200,
     услуге остаётся 716. */
  .tk-oms-head__lead      { max-width: none; }
  .tk-oms-table__row      { grid-template-columns: 200px minmax(0, 1fr); }
}

@media (max-width: 680px) {

  .tk-oms-head {
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }
  /* Кегль заголовка совпадает с мобильной ступенью --t-display-size (38) —
     то же решение, что у .tk-pamyatka__title с тем же кеглем 64. */
  .tk-oms-head__title {
    font-size: var(--t-display-size);
    line-height: var(--t-display-lh);
  }

  .tk-oms-sec__title { margin-bottom: var(--s-4); }

  /* Плашка: поля 20 по бокам и 24 сверху-снизу, скругление на ступень
     меньше карточного — так же ужат .tk-lic-doc на 375. */
  .tk-oms-alert {
    gap: var(--s-2);
    padding: var(--s-6) var(--s-5);
    border-radius: var(--r-image);
  }

  /* Плашка пар: поля 20 по бокам (как .tk-lic-req__table на 375),
     скругление то же карточное 24. */
  .tk-oms-table { padding: var(--s-2) var(--s-5) var(--s-4); }

  /* Строка складывается в лестницу «код → услуга»: колонка 260 в 335
     не помещается. Код остаётся строчным, а не уходит в капитель, как
     на /licenzii/: две из четырёх строк несут не код, а название
     группы («Аппаратное лечение»), и в прописных они читались бы
     как заголовок раздела. */
  .tk-oms-table__row {
    grid-template-columns: 1fr;
    gap: var(--s-1);                           /* макет-ступень 4 */
    padding-block: 13px;                       /* тот же шаг, что у .tk-lic-req__row на 375 */
  }

  /* Пункт документа: номер и название в строку, «СМОТРЕТЬ →» уходит
     под название и выравнивается по нему. Тап-цель по WCAG 2.5.8
     держит вертикальный ритм строки: 20 + 12 + 18 ≈ 50. */
  .tk-oms-doc {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-3) var(--s-4);
    align-items: start;
  }
  .tk-oms-doc__go { grid-column: 2; }
}


/* ══ Знак «перейти» у строк документов ════════════════════════════════════
   Была стрелка «→» символом. Заменена на ту же незакрашенную галочку,
   что стоит у пунктов мобильного меню: одна форма на весь сайт, и она
   не зависит от того, есть ли глиф в Montserrat. Здесь галочка зелёная —
   это активная ссылка, а не служебный знак навигации.
   Полигон обводит её по контуру, как в mobile-m1.css: внешняя грань
   0,0 → вершина → 0,100%, внутренняя возвращается через 66.67% 50%. */
.tk-doc-go__sign {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--c-brand-green);
  clip-path: polygon(0 0, 33.33% 0, 100% 50%, 33.33% 100%, 0 100%, 66.67% 50%);
}

/* ═══ pacientu ═══ */
/* ТОМОКО — страница «Пациенту — посадочная» /pacientu/.
   Снято 27.08.2026 с артборда Figma 345:31763 (1440×2480),
   файл U5M0ihzdUI9upBTwUAHZ42.

   Страница короткая: шапка страницы с крошками и семь карточек-разделов
   в четыре колонки. Здесь ТОЛЬКО то, чего в дизайн-системе не было:
   полоса крошек, шапка страницы и карточка раздела.
   Всё остальное взято как есть:
     • сетка 4 колонки  — .tk-grid + .tk-grid--4 (base.css): 282×4 + 24×3 = 1200,
                          просветы совпали в ноль, своей раскладки не пишем;
     • светлая шапка    — .tk-header--solid (components.css), заново не объявляем;
     • крошки           — .tk-breadcrumbs + .tk-breadcrumbs--slash (components.css);
     • кнопка записи    — .tk-btn + .tk-btn--primary (components.css): в макете
                          345:31809 заливка #237e33 = --c-brand-green, радиус 300;
     • ступени кеглей   — .t-subheading (24/1.13/-0.03em) сошлась с макетом
                          дословно, .t-body и .t-label-sm — с оговорками ниже;
     • финальный блок   — .tk-final и подвал (components.css + sections.css).
   Канонические классы не переопределяются: карточка раздела — свой
   компонент с префиксом .tk-pacientu-, а не правка .tk-card-*.
   Теней нет ни одной, элевация только цветом. Точка перелома — 680.

   Подключать после tokens.css → base.css → components.css → sections.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Хлебные крошки (Figma 345:31812) ══════════════════════════════════
   Полоса крошек живёт над <main>: это навигация, а не содержание.
   Сам компонент и модификатор со слэшем — в components.css, здесь только
   отбивка от шапки: 56 из макета (крошки на y=56 внутри кадра 345:31811).
   Кегль оставлен канонический 12 (в макете 13 — ступени 13 в шкале нет).

   ПОВТОР: та же строчка стоит в кусках page-kontakty.css, page-price.css,
   page-usluga.css, page-uslugi.css, page-vrach.css и page-vrachi.css —
   это хром всех внутренних страниц, а не свойство именно этой. Значение
   везде одно; при следующей уборке .tk-crumbs место в components.css,
   рядом с .tk-header--solid и .tk-breadcrumbs--slash. */
 /* 56: ступени 56 в ритме нет */


/* ═══ 2. Шапка страницы (Figma 345:31811) ══════════════════════════════════
   Кадр 1440×304: поля 120 держит .tk-container, вертикальные 56 — здесь,
   просветы между крошками, заголовком и лидом 24. Крошки лежат выше
   (у них своя обёртка), поэтому верхнее поле блока — ровно просвет 24.
   Сумма сходится: 56 + 16 + 24 + 70 + 24 + 58 + 56 = 304.

   Кадр совпадает с шапками /uslugi/ и /vrachi/ до пикселя; классы всё же
   свои, чтобы кусок страницы не зависел от соседнего куска сборки.
   Втроём (.tk-catalog__head, .tk-staff__head, .tk-pacientu__head) они
   просятся в один общий блок «шапка внутренней страницы» — вопрос
   следующей уборки pages.css, а не этой страницы. */

.tk-pacientu__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  padding-top: var(--s-6);
  padding-bottom: calc(var(--s-12) + var(--s-2)); /* те же 56 из макета */
}

/* Заголовок 76px — ступень --t-display-sm, заведённая в tokens.css ровно
   под этот кегль. ОТКЛОНЕНИЕ: в макете (345:31813) интерлиньяж 0.92
   и трекинг -3px (-0.0395em), токен даёт 0.94 и -0.035em; берём токен,
   чтобы 76-й кегль не расползался сырыми пикселями по страницам. */
.tk-pacientu__title {
  font-size: var(--t-display-sm-size);
  line-height: var(--t-display-sm-lh);
  letter-spacing: var(--t-display-sm-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: у лида в макете интерлиньяж 1.45, ступень body-lg даёт 1.29 —
   оставлен канонический, ради единой шкалы. Ширина — мера строки
   из макета (345:31814, w=760), токена ширины текста нет. */
.tk-pacientu__lead { max-width: 760px; }


/* ═══ 3. Разделы (Figma 345:31815) ═════════════════════════════════════════
   Семь карточек 282×275 в четыре колонки, просветы 24 по обеим осям —
   это ровно .tk-grid + .tk-grid--4, своей раскладки не пишем; «Ряд 1»
   и «Ряд 2» из макета — строки той же сетки, обёрток рядам не нужно.
   Верхнего поля у секции нет: отбивку сверху дала шапка страницы,
   снизу — канонические 92 (кадр 666 = 275 + 24 + 275 + 92). */

.tk-pacientu { padding-bottom: var(--s-section); }


/* ═══ 4. Карточка раздела (Figma 345:31817 и однотипные) ═══════════════════
   Плашка --c-mist, скругление 24, поля 32, содержимое разнесено по
   вертикали: заголовок вверху, описание посередине, «ПЕРЕЙТИ →» внизу.
   Ни .tk-card-service, ни .tk-card-post не подходят — там обложка, здесь
   текстовая плитка-ссылка. Поэтому это свой компонент с префиксом
   страницы, а канонические .tk-card-* не трогаются.

   height: 100% — карточки в ряду разной длины (у «Списка ДМС организаций»
   описание в две строки против четырёх у соседей): без него низ плиток
   встал бы вразнобой. min-height держит 275 из макета для коротких. */

.tk-pacientu-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-6);
  height: 100%;
  min-height: 275px;      /* высота карточки из макета; ступени 275 в ритме нет */
  padding: var(--s-card); /* 32 */
  border-radius: var(--r-card);
  background: var(--c-mist);
  color: var(--c-ink-green);
  overflow: hidden;
  transition: background-color .16s ease;
}

/* Ховера в макете нет — состояние собрано по логике кита: плашка темнеет
   на один шаг до --c-hairline, теней и сдвигов нет. */
.tk-pacientu-card:hover { background: var(--c-hairline); }

/* Заголовок 24 SemiBold с интерлиньяжем 1.13 и трекингом -0.72px
   (-0.03em) — это ступень .t-subheading один в один, своих свойств
   кроме переноса не нужно. */
.tk-pacientu-card__title { text-wrap: balance; }

/* ОТКЛОНЕНИЕ: описание в макете 15/1.5, ступеней 15 в шкале нет —
   поставлена каноническая .t-body (16/1.33) цветом --c-fog (.c-muted).
   То же решение, что у плашки «Весь прайс» на каталоге услуг. */

/* ОТКЛОНЕНИЕ: «ПЕРЕЙТИ →» в макете 12 SemiBold, ступень label-12 даёт
   12 Medium. Кегль и трекинг (1.2px = 0.1em) берём из шкалы,
   насыщенность — из макета. Приём тот же, что у .tk-allprice__label. */
.tk-pacientu-card__go {
  color: var(--c-brand-green);
  font-weight: var(--w-semibold);
}


/* ═══ 5. Адаптив ═══════════════════════════════════════════════════════════
   ОТДЕЛЬНОГО МОБИЛЬНОГО МАКЕТА У /pacientu/ НЕТ: в файле нарисованы только
   «М · Главная» 345:13655, «М · Контакты» 345:15315 и «М · Меню раскрытое»
   345:16448. Раскладка выведена по правилам системы — поля и сжатую шкалу
   даёт tokens.css, колонки сетки base.css: --4 становится двумя на 1100
   и одной на 680. Точка перелома одна — 680. */

@media (max-width: 1100px) {
  /* Ступени между heading-lg 50 и display-sm 76 в шкале нет — тот же
     промежуточный кегль, что у .tk-catalog__title и .tk-staff__title. */
  .tk-pacientu__title { font-size: 52px; }
}

@media (max-width: 680px) {

  .tk-pacientu__head {
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }
  /* Мобильный кегль заголовка страницы: ступени 34 в шкале нет,
     значение то же, что у .tk-catalog__title и .tk-staff__title. */
  .tk-pacientu__title { font-size: 34px; letter-spacing: -0.03em; }
  .tk-pacientu__lead  { max-width: none; }

  /* В одну колонку карточки идут по содержимому: держать 275 незачем,
     иначе под коротким описанием «Списка ДМС» повиснет пустая треть
     экрана. Поля 20 приходят сами — --s-card на 680 равен 20. */
  .tk-pacientu-card {
    min-height: 0;
    gap: var(--s-4);
  }
}

/* ═══ pamyatka ═══ */
/* ТОМОКО — страница «Памятка пациенту» /pacientu/pamyatka/.
   Снято 27.08.2026 с артборда Figma 345:33085 (1440×2648),
   файл U5M0ihzdUI9upBTwUAHZ42.

   Страница длинного текста: шапка страницы, затем две колонки —
   оглавление 300 слева и памятка 852 справа. Родня ей две уже свёрстанные
   страницы того же типа, /blog/statya/ и /uslugi/zabolevanie/; там, где
   макет даёт те же величины, значения намеренно повторены, а не подобраны
   заново — это один и тот же приём на трёх страницах.

   Здесь ТОЛЬКО то, чего в дизайн-системе не было: полоса крошек, шапка
   страницы, оглавление и проза памятки. Всё остальное взято как есть:
     • светлая шапка   — .tk-header--solid (components.css), заново не объявляем;
     • крошки          — .tk-breadcrumbs + .tk-breadcrumbs--slash (components.css);
     • кнопка записи   — .tk-btn + .tk-btn--primary (components.css): в макете
                         345:33131 заливка #237e33 = --c-brand-green, радиус 300;
     • ступени кеглей  — .t-heading (35 / -0.03em) сошлась с заголовком раздела
                         дословно, .t-body и .t-body-lg — с оговорками ниже;
     • финальный блок  — .tk-final и подвал (components.css + sections.css).
   Канонические классы не переопределяются. Теней нет ни одной, элевация
   только цветом. Точка перелома — 680.

   Подключать после tokens.css → base.css → components.css → sections.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Хлебные крошки (Figma 345:33134) ══════════════════════════════════
   Полоса крошек живёт над <main>: это навигация, а не содержание.
   Сам компонент и модификатор со слэшем — в components.css, здесь только
   отбивка от шапки: 56 из макета (крошки на y=56 внутри кадра 345:33133).
   Кегль оставлен канонический 12 (в макете 13 — ступени 13 в шкале нет).

   ПОВТОР: та же строчка стоит в кусках page-akciya.css, page-kontakty.css,
   page-licenzii.css, page-o-klinike.css, page-pacientu.css, page-price.css,
   page-statya.css, page-usluga.css, page-uslugi.css, page-vrach.css,
   page-vrachi.css и page-zabolevanie.css — это хром всех внутренних
   страниц, а не свойство именно этой. Значение везде одно; при следующей
   уборке .tk-crumbs место в components.css, рядом с .tk-header--solid. */
 /* 56: ступени 56 в ритме нет */


/* ═══ 2. Каркас страницы ═══════════════════════════════════════════════════
   Нижнее поле страницы — канонические 92. В макете они принадлежат кадру
   «Текст и оглавление» (855 при высоте текста 763), но держать их удобнее
   на корне секции: так же устроены .tk-pacientu и .tk-staff. */

.tk-pamyatka { padding-bottom: var(--s-section); }


/* ═══ 3. Шапка страницы (Figma 345:33133) ══════════════════════════════════
   Кадр 1440×283: поля 120 держит .tk-container, вертикальные — здесь.
   Крошки лежат выше, в своей обёртке, поэтому верхнее поле блока — ровно
   просвет между ними и заголовком. Просветы макета 22 → шаг сетки 24.
   Сумма сходится: 56 + 16 + 22 + 61 + 22 + 58 + 48 = 283.

   Кадр повторяет шапки /pacientu/, /uslugi/ и /vrachi/ по вертикали, но
   заголовок здесь мельче (64 против 76) и кегль лида на единицу меньше.
   Классы свои, чтобы кусок страницы не зависел от соседнего куска сборки. */

.tk-pamyatka__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);                /* макет 22 → шаг 24 */
  padding-top: var(--s-6);        /* просвет крошки → заголовок, тот же 22 → 24 */
  padding-bottom: var(--s-12);    /* макет 48 */
}

/* Ступени 64 в шкале кита нет: она между heading-lg 50 и display-sm 76.
   Замер 345:33135: кегль 64, интерлиньяж 0.96, трекинг -2.5px переведён
   в em делением на кегль (-0.039em), чтобы не разъезжался на адаптиве.
   Значения ровно те же, что у .tk-usluga-hero__title — это одна ступень
   на двух страницах, а не два подбора. */
.tk-pamyatka__title {
  font-size: var(--t-page-title-size);
  line-height: var(--t-page-title-lh);
  letter-spacing: var(--t-page-title-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: лид набран кеглем 19 при трекинге -0.5px — ступени 19
   в шкале нет, берём каноническую .t-body-lg (20). Интерлиньяж макетный
   1.5 против токенных 1.29: это вводный абзац в меру 760, канонический
   встал бы плотнее. Ширина — мера строки из макета (345:33136, w=760),
   токена ширины текста нет. */
.tk-pamyatka__lead {
  line-height: 1.5;
  max-width: 760px;
}


/* ═══ 4. Текст и оглавление (Figma 345:33137) ══════════════════════════════
   Две колонки: оглавление 300 слева, памятка 852 справа, просвет 48.
   300 + 48 + 852 = 1200 — ровно контейнер, своей ширины правой колонке
   не задаём. Нижнее поле кадра снято корнем секции, выше.

   ОТЛИЧИЕ ОТ /uslugi/zabolevanie/: там оглавление сделано липким, потому
   что против 4670 пикселей статьи оно уезжает с экрана на первом же
   развороте. Здесь текста 763 — блок целиком помещается в полтора экрана,
   липкость не нужна и в макете её нет. */

.tk-pamyatka-body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--s-12);              /* макет 48 */
  align-items: start;
}


/* ═══ 5. Оглавление (Figma 345:33138) ══════════════════════════════════════
   Семь пунктов с волосяной линией сверху, номер оранжевый, название
   чернильное. Просветы 12 и внутри пункта, и между пунктами.

   ЦВЕТ ПУНКТА. В макете зелёный только первый пункт (345:33142, #237e33),
   остальные шесть чернильные (#0b1a10) — это состояние «вы здесь»,
   а не украшение: у крошек тем же зелёным помечен текущий раздел.
   Поэтому зелень навешена не на все пункты, а на [aria-current];
   в разметке он стоит на первом. Без скрипта-слежения за прокруткой
   отметка так и остаётся на первом разделе — см. заметку к странице.

   ОТЛИЧИЕ ОТ .tk-zabol-toc: там зелёными набраны все пункты (в том макете
   так и нарисовано) и строка выровнена по базовой линии. Здесь пункт
   выровнен по верху — в макете номер и название стоят на одном y=10
   при разных кеглях, то есть номер намеренно поднят над строкой. */

.tk-pamyatka-toc {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);              /* макет 12 */
}

/* ОТКЛОНЕНИЕ МАКЕТА: надстрочник 11 SemiBold против ступени 12 Medium.
   То же расхождение и тот же выбор, что у .tk-zabol-toc__title. */
.tk-pamyatka-toc__title {
  color: var(--c-ash);
  font-weight: var(--w-semibold);
}

.tk-pamyatka-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);              /* макет 12 */
}

/* Один класс на ссылку и на не-ссылку: геометрия у них общая, разнится
   только поведение. Поля 10 сверху и снизу → шаг 12: при кегле 16 это
   даёт тап-цель 45px, норма WCAG 2.5.8 — 24. Линия волосяная,
   как разделители кита. */
.tk-pamyatka-toc__row {
  display: flex;
  align-items: flex-start;      /* макет: номер и название на одном верхе */
  gap: var(--s-3);              /* макет 10 → шаг 12 */
  padding-block: var(--s-3);    /* макет 10 → шаг 12 */
  border-top: 1px solid var(--c-hairline);
}

.tk-pamyatka-toc__num {
  flex: none;
  color: var(--c-orange);
  font-variant-numeric: tabular-nums;
}

/* ОТКЛОНЕНИЕ: название пункта в макете 15, ступени 15 в шкале нет —
   канонические 16 из .t-body, начертание Medium как в макете. */
.tk-pamyatka-toc__text {
  color: var(--c-ink-green);
  font-weight: var(--w-medium);
}

/* Текущий раздел — зелёный, как первый пункт в макете. */
.tk-pamyatka-toc__row[aria-current] .tk-pamyatka-toc__text { color: var(--c-brand-green); }

/* Ховера в макете нет — состояние собрано по логике кита. Наведение
   работает только на пунктах-ссылках, у не-ссылок курсор обычный. */
a.tk-pamyatka-toc__row:hover .tk-pamyatka-toc__text { color: var(--c-brand-green); }
a.tk-pamyatka-toc__row[aria-current]:hover .tk-pamyatka-toc__text { color: var(--c-green-deep); }


/* ═══ 6. Текст памятки (Figma 345:33161) ═══════════════════════════════════
   Просвет между ВСЕМИ элементами ровно 22 — и между абзацами, и между
   пунктами списка, и вокруг врезки, и перед следующим заголовком.
   Поэтому раздел с <h2> — такой же флекс с тем же просветом: семантика
   добавляется, ритм не меняется. Шага 22 в сетке 4px нет, берём 24.

   ОТКЛОНЕНИЕ КЕГЛЕЙ И ЦВЕТА. В макете проза 17px цветом #3d4f44,
   H2 — 35px Regular. Ступени 17 в шкале нет, ближайшая — .t-body (16);
   цвета #3d4f44 в палитре нет (он между --c-ink-green и --c-fog; та же
   история, что на контактах и в статье блога, см. .tk-statya-body__p).
   Проза набрана каноническим чернильным, а не приглушённым: это
   предписания, которые пациент обязан прочесть, приглушать их нельзя.
   H2 сошёлся со ступенью .t-heading (35 / -0.03em = макетные -1.05px)
   дословно, кроме интерлиньяжа: макет 1.05, токен 1.0. */

.tk-pamyatka-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);              /* макет 22 → шаг 24 */
}

.tk-pamyatka-text__sec {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  width: 100%;
  scroll-margin-top: var(--s-10);   /* якорь оглавления не упирается в край окна */
}

/* Интерлиньяж прозы 1.65 из макета: ступень body даёт 1.33, для
   длинного текста в меру 852 это слишком плотно. */
.tk-pamyatka-text__p { line-height: 1.65; }

.tk-pamyatka-text__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);              /* макет 22 — тот же шаг, что у всего блока */
  width: 100%;
}

.tk-pamyatka-text__list li {
  display: flex;
  gap: var(--s-4);              /* макет 14 → шаг 16 */
  line-height: 1.5;             /* макет 1.5 */
}

/* Маркер — оранжевая точка (345:33165, замер 6×6). Рисуем фоном, а не
   картинкой: это форма, а не иконка. Тот же приём, что у
   .tk-statya-body__list и .tk-zabol-art__list. Шага 6 в сетке нет.
   Отступ сверху ставит точку в оптический центр первой строки:
   (16 × 1.5 − 6) / 2 = 9. В макете пункты однострочные и точка
   центрирована по всему пункту; при переносе строк это развалилось бы. */
.tk-pamyatka-text__list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: var(--r-pill);
  background: var(--c-orange);
}

/* Врезка (345:33183): плашка --c-mist со скруглением 20 (не карточные 24),
   поля макета 28/32 → шаги 24 и 32. Кегль макета 19 Medium — ступени 19
   нет, взята .t-body-lg (20) с макетным интерлиньяжем 1.5.
   Значения намеренно те же, что у .tk-statya-body__callout
   и .tk-zabol-art__callout: это одна и та же врезка на трёх типах
   длинных текстов. */
.tk-pamyatka-text__callout {
  width: 100%;
  padding: var(--s-6) var(--s-8);
  background: var(--c-mist);
  border-radius: var(--r-image);
  font-weight: var(--w-medium);
  line-height: 1.5;
}


/* ═══ 7. Адаптив ═══════════════════════════════════════════════════════════
   Точка перелома одна — 680. Поля и сжатую шкалу кеглей даёт tokens.css,
   здесь только своё. */

@media (max-width: 1100px) {
  /* Контейнер здесь 1004 (поля 48). Колонка 300 и просвет 48 оставили бы
     тексту 656 — та же арифметика, что в двух колонках /zabolevanie/:
     240 + 32 + 732 = 1004. Заголовок 64 в эту ширину помещается
     и не жмётся, как у .tk-usluga-hero__title. */
  .tk-pamyatka-body {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--s-8);
  }
}

@media (max-width: 680px) {
  /* ОТДЕЛЬНОГО МОБИЛЬНОГО МАКЕТА У ЭТОЙ СТРАНИЦЫ НЕТ. Раскладка выведена
     по правилам системы и по мобильному виду соседних страниц того же
     типа (/blog/statya/, /uslugi/zabolevanie/): колонки складываются
     в одну, поля и кегли даёт tokens.css, ритм ужимается на ступень. */


  .tk-pamyatka__head {
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }
  /* Кегль заголовка совпадает с мобильной ступенью --t-display-size (38) —
     то же решение, что у .tk-usluga-hero__title с тем же кеглем 64. */
  .tk-pamyatka__title {
    font-size: var(--t-display-size);
    line-height: var(--t-display-lh);
  }
  /* Меру строки на телефоне держит сам контейнер (335 при полях 20). */
  .tk-pamyatka__lead { max-width: none; }

  /* Оглавление становится обычным списком в начале памятки. */
  .tk-pamyatka { padding-bottom: var(--s-10); }

  .tk-pamyatka-body {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }

  .tk-pamyatka-text      { gap: var(--s-5); }
  .tk-pamyatka-text__sec { gap: var(--s-5); }
  .tk-pamyatka-text__list    { gap: var(--s-4); }
  .tk-pamyatka-text__list li { gap: var(--s-3); }
  /* Мобильный кегль .t-body — 15: (15 × 1.5 − 6) / 2 ≈ 8. */
  .tk-pamyatka-text__list li::before { margin-top: 8px; }

  .tk-pamyatka-text__callout { padding: var(--s-5); }
}

/* ═══ price ═══ */
/* ТОМОКО — страница «Прайс» /price/.
   Снято 27.08.2026 с артборда Figma 345:31338 (1440×3170),
   файл U5M0ihzdUI9upBTwUAHZ42.

   Здесь ТОЛЬКО то, чего в дизайн-системе не было: светлая шапка внутренних
   страниц, шапка страницы с крошками, поиск по прайсу, плашка таблицы
   и зелёная плашка про ОМС. Всё остальное взято как есть:
     • вкладки разделов   — .tk-tabs + .tk-tab + .tk-tabs--scroll (components.css);
     • строка прайса      — .tk-price-row и её части (components.css);
     • кнопки             — .tk-btn--secondary, .tk-btn--light, .tk-btn--primary;
     • поле поиска        — .tk-field__input (components.css) с модификатором;
     • крошки             — .tk-breadcrumbs (components.css) с модификатором;
     • контейнер и шкала  — .tk-container и ступени .t-* (base.css).
   Канонические классы не переопределяются: где нужен вариант — заведён
   модификатор с префиксом .tk-pricelist-. Теней нет ни одной, элевация
   только цветом и градиентом. Точка перелома мобильных — 680.

   Подключать после tokens.css → base.css → components.css. */


/* ══ Светлая шапка внутренних страниц · 345:31339 ══════════════════
   На главной шапка лежит поверх видео (.tk-header--overlay). Здесь видео
   нет: у шапки собственное полотно, чернильный текст и волосяная линия
   снизу, а логотип цветной. Кадр в макете 90 = 88 (.tk-header__inner из
   components.css) плюс эта линия, отдельной высоты не задаём.
   Модификатор стоит рядом с каноническим overlay, сам overlay не трогаем. */

/* Полоски бургера в mobile.css нарисованы белыми — цвет рассчитан на
   шапку поверх видео. На светлой шапке белое по белому не видно, поэтому
   бургер перекрашивается в основной текст. Базовый .tk-burger не трогаем. */

/* ВЫНУЖДЕННОЕ ДУБЛИРОВАНИЕ. Геометрия трёх блоков шапки (логотип, меню,
   действия) описана в sections.css — вместе с секцией героя, откуда шапка
   родом. Внутренние страницы sections.css не подключают, поэтому правила
   повторены здесь в области действия .tk-header--solid: на главную они
   не влияют, а базовые .tk-hero__* не трогаются. Уйдут отсюда, когда
   шапка переедет из sections.css в components.css. */
.tk-header--solid .tk-hero__logo { flex: none; } /* размеры держат width/height у <img> */

.tk-header--solid .tk-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.tk-header--solid .tk-hero__phone {
  font-weight: var(--w-semibold);
  white-space: nowrap;
}
.tk-header--solid .tk-hero__phone:hover { color: var(--c-orange); }


/* ══ Хлебные крошки · 345:31387 ═══════════════════════════════════
   Полоса крошек живёт над <main>: это навигация, а не содержание.
   Обёртка и модификатор разделителя общие для всех внутренних страниц —
   это хром, а не свойство именно прайса. Отступ 56 из макета.
   Кегль оставлен канонический 12 (в макете 13 — ступени 13 в шкале нет). */ /* 56; ступени 56 в ритме нет */

/* Модификатор к .tk-breadcrumbs: разделитель — косая черта цветом обводки
   полей, а не длинное тире. Базовый компонент остаётся с тире. */


/* ══ Каркас страницы ══════════════════════════════════════════════
   Кадр 345:31390 верхнего поля не имеет: отбивку от шапки страницы даёт
   её нижний отступ. Снизу секция держит канонические 92 до финального
   блока. Канонический .tk-section положил бы 92 и сверху — не подходит. */
.tk-pricelist { padding-bottom: var(--s-section); }


/* ══ Шапка страницы · 345:31386 ═══════════════════════════════════
   Кадр 1440×288: поля 120 держит .tk-container, просветы 24, нижнее
   поле 40. Крошки лежат выше и со своим отступом, поэтому верхнее поле
   блока — ровно просвет 24. */
.tk-pricelist__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  padding-top: var(--s-6);
  padding-bottom: var(--s-10);
}

/* Заголовок 76 — ступень --t-display-sm, заведённая в tokens.css ровно
   под этот кегль. ОТКЛОНЕНИЕ: в макете интерлиньяж 0.92 и трекинг -3px
   (-0.0395em), токен даёт 0.94 и -0.035em; берём токен, чтобы 76-й кегль
   не расползался сырыми пикселями по страницам — как на /uslugi/. */
.tk-pricelist__title {
  font-size: var(--t-display-sm-size);
  line-height: var(--t-display-sm-lh);
  letter-spacing: var(--t-display-sm-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: у лида в макете интерлиньяж 1.45, ступень body-lg даёт 1.29 —
   оставлен канонический, ради единой шкалы. Ширина — мера строки из макета. */
.tk-pricelist__lead {
  max-width: 929px; /* мера строки из макета, токена ширины текста нет */
}


/* ══ Поиск по прайсу · 345:31391 ══════════════════════════════════
   Поле каноническое (.tk-field__input), модификатор меняет только три
   вещи: высоту, место под кнопку и цвет обводки. */
.tk-pricelist__search-field { position: relative; }

.tk-pricelist__input {
  /* В макете поле 70 против 52 у кита: 24 + 24 + строка 16/1.33 + обводка. */
  padding-block: var(--s-6);
  /* Место под кнопку поиска: 12 отступ + 44 кнопка + 8 воздуха. */
  padding-right: var(--s-16);
  /* ОТКЛОНЕНИЕ: обводка в макете волосяная (--c-hairline), а не более
     тёмная --c-field-border, которой обведены поля формы записи. */
  border-color: var(--c-hairline);
}

/* Лупа в макете — глиф 28 без плашки и обводки, поэтому канонический
   .tk-icon-btn (круг с обводкой) здесь не подходит. Кнопке дан полный
   тап-таргет 44×44, элевация при наведении — цветом. */
.tk-pricelist__search-btn {
  position: absolute;
  top: 50%;
  right: var(--s-3);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;   /* минимальный тап-таргет, токена размера нет */
  height: 44px;
  border-radius: var(--r-pill);
  color: var(--c-brand-green);
  /* ОТКЛОНЕНИЕ: глиф в макете 28, ступени 28 в шкале нет — взята
     ближайшая --t-subheading (24). */
  font-size: var(--t-subheading-size);
  line-height: 1;
}
.tk-pricelist__search-btn:hover { background: var(--c-mist); }

/* Родной крестик браузера у type="search" гасим: он рисуется поверх
   нашего и в поле оказывается два «очистить» подряд (у заказчика —
   синий системный и наш чёрный). Сам type="search" оставляем: на iOS
   он даёт клавишу «Поиск» вместо «Ввод», а роль поля — семантика,
   а не украшение. Firefox своего крестика не рисует, поэтому хватает
   вебкитовских псевдоэлементов. */
.tk-pricelist__input::-webkit-search-cancel-button,
.tk-pricelist__input::-webkit-search-decoration,
.tk-pricelist__input::-webkit-search-results-button,
.tk-pricelist__input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}


/* Кнопка сброса поиска — слева от лупы, с тем же тап-таргетом 44.
   Родной крестик у type="search" не годится: он есть не во всех
   браузерах и очищает только поле, а выборка на странице остаётся
   прежней. В разметке кнопка стоит с hidden, показывает её menu.js. */
.tk-pricelist__clear {
  position: absolute;
  top: 50%;
  right: calc(var(--s-3) + 44px);   /* вплотную к лупе, без нахлёста */
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  color: var(--c-fog);
  font-size: var(--t-subheading-size);
  line-height: 1;
}
.tk-pricelist__clear[hidden] { display: none; }
.tk-pricelist__clear:hover  { background: var(--c-mist); color: var(--c-ink-green); }

/* Пока крестик на месте, тексту нужно место под обе кнопки:
   12 отступ + 44 крестик + 44 лупа + 8 воздуха. */
.tk-pricelist__search-field--clearable .tk-pricelist__input { padding-right: 108px; }


/* Подсказка под полем набрана метрикой label, но это предложение:
   капс с .t-label-sm снимаем, трекинг лейбла в макете тоже отсутствует. */
.tk-pricelist__hint {
  margin-top: var(--s-2);  /* 10 в макете; шаги 8 и 12 — взят меньший */
  text-transform: none;
  letter-spacing: normal;
}


/* ══ Вкладки разделов · 345:31396 ═════════════════════════════════
   Семь вкладок в 1200 не помещаются в строку: в макете они переносятся
   на вторую. Канонический .tk-tabs переноса не знает — добавляем его
   модификатором, просвет остаётся канонический 8 (в макете 10).
   На мобильных перенос отключается и работает .tk-tabs--scroll. */
.tk-pricelist__tabs {
  margin-top: var(--s-6);  /* 28 в макете → шаг сетки 24, как в секции прайса на главной */
  flex-wrap: wrap;
}


/* ══ Таблица прайса · 345:31404 ═══════════════════════════════════ */

.tk-pricelist__panel { margin-top: var(--s-6); } /* 28 в макете → шаг сетки 24 */
.tk-pricelist__panel[hidden] { display: none; }

/* Плашка таблицы: подложка --c-mist, скругление карточное. Поля
   8 / 32 / 20 из макета — верхнее меньше, потому что первая строка
   идёт без линии-разделителя. */
.tk-pricelist__plate {
  padding: var(--s-2) var(--s-card) var(--s-5);
  background: var(--c-mist);
  border-radius: var(--r-card);
}

/* Список строк. Своих свойств не несёт: сброс даёт ul[class] в base.css,
   геометрию строки — канонический .tk-price-row. Класс нужен, чтобы этот
   сброс сработал, и как крючок для шаблона MODX. */
.tk-pricelist__list { list-style: none; }

/* ОТКЛОНЕНИЕ: наименование в макете набрано 15/1.45; ступени 15 в шкале
   нет, кегль остаётся канонический 16, а плотность 1.33 рассчитана на
   подписи — для длинных названий услуг ставим 1.5, как на карточке услуги. */
.tk-pricelist__name { line-height: 1.5; }

/* Строка-шапка колонок использует ту же сетку .tk-price-row, поэтому
   колонки совпадают с данными до пикселя. На мобильном .tk-price-row
   складывается в один столбец и шапка теряет смысл — скрыта ниже. */

/* Подвал таблицы: сколько показано и кнопка «показать все». */
.tk-pricelist__more-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-top: var(--s-5);  /* 22 в макете; шаги 20 и 24 — взят меньший */
}

/* Счётчик набран метрикой label-14, но это предложение: капс снимаем,
   трекинга и полужирного в макете нет. */
.tk-pricelist__count {
  flex: 1;
  min-width: 0;
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--w-regular);
}

/* Кнопка каноническая (.tk-btn.tk-btn--secondary), модификатор меняет
   только цвет: в макете обводка и подпись зелёные, а не волосяные.
   Ховер канонической обводочной кнопки на этих цветах не читается —
   даём элевацию цветом подложки, теней по-прежнему нет. */
.tk-pricelist__more {
  border-color: var(--c-brand-green);
  color: var(--c-brand-green);
}
.tk-pricelist__more:hover {
  background: var(--c-paper);
  border-color: var(--c-green-deep);
  color: var(--c-green-deep);
}


/* ══ Плашка ОМС · 345:31424 ═══════════════════════════════════════
   Тот же зелёный градиент, что у финального блока, развёрнутый по
   горизонтали (--g-green-x, tokens.css). Скругление 24, поля 32/40.
   Визуальный близнец плашки «весь прайс» на /uslugi/, но это другая
   страница и другой блок — свои классы, а не чужой .tk-allprice. */
.tk-omsnote {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  margin-top: var(--s-6);  /* 28 в макете → шаг сетки 24 */
  padding: var(--s-8) var(--s-10);
  border-radius: var(--r-card);
  overflow: hidden;
  color: var(--c-paper);
  background: var(--g-green-x);
}

.tk-omsnote__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);  /* 10 в макете; шаги 8 и 12 — взят меньший */
}

/* ОТКЛОНЕНИЕ: надстрочник в макете 11px SemiBold, ступень label-12 даёт
   12px Medium. Кегль берём из шкалы, насыщенность — из макета.
   ОТКЛОНЕНИЕ: текст плашки в макете 18/1.45, ступени 18 в шкале нет —
   поставлена ближайшая body-lg (20/1.29), как на /uslugi/. */
.tk-omsnote__label {
  color: var(--c-orange);
  font-weight: var(--w-semibold);
}


/* ══ Адаптив ══════════════════════════════════════════════════════
   Точка перелома одна — 680. Поля и сжатую шкалу кеглей даёт tokens.css,
   складывание строки прайса в один столбец — components.css и mobile.css. */

@media (max-width: 1100px) {
  /* Продолжение вынужденного блока про шапку: шесть пунктов меню
     в оставшуюся ширину не помещаются и снимаются — ровно как на главной
     (sections.css). Бургер появляется только ниже 680: между 681 и 1100
     меню на сайте нет вообще, это свойство системы, а не этой страницы. */
  .tk-header--solid .tk-hero__nav { display: none; }

  /* Ступени между heading-lg 50 и display-sm 76 в шкале нет — тот же
     промежуточный кегль, что у заголовка каталога услуг. */
  .tk-pricelist__title { font-size: 52px; }
}

@media (max-width: 680px) {
  /* Продолжение вынужденного блока про шапку: просвет действий на
     мобильных 12 (mobile.css), телефон уходит совсем. */
  .tk-header--solid .tk-hero__actions { gap: var(--s-3); }
  .tk-header--solid .tk-hero__phone { display: none; }

  /* Отступ крошек на мобильных 32. Повторяет соседние внутренние страницы
     и обязателен здесь: объявленный выше .tk-crumbs без медиазапроса
     иначе оставил бы на телефоне десктопные 56. */

  .tk-pricelist__head {
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }
  /* Мобильный кегль заголовка страницы: ступени 34 в шкале нет,
     значение то же, что у заголовка каталога услуг. */
  .tk-pricelist__title { font-size: 34px; letter-spacing: -0.03em; }
  .tk-pricelist__lead  { max-width: none; }

  /* Поле поиска возвращается к канонической высоте: 70 на ширине 335
     съедает пол-экрана. Кнопка остаётся 44 — тап-таргет не уменьшаем,
     поэтому и правое поле под неё остаётся прежним. */
  .tk-pricelist__input { padding-block: var(--s-4); }
  .tk-pricelist__search-btn { right: var(--s-2); }
  .tk-pricelist__clear      { right: calc(var(--s-2) + 44px); }
  .tk-pricelist__search-field--clearable .tk-pricelist__input { padding-right: 100px; }

  /* Вкладки не переносятся, а едут вбок: перенос семи пилюль на 375
     дал бы четыре строки. Прокрутку даёт канонический .tk-tabs--scroll. */
  .tk-pricelist__tabs { flex-wrap: nowrap; }

  /* Поля плашки 8 / 20 / 16: --s-card на мобильных уже равен 20. */
  .tk-pricelist__plate { padding: var(--s-2) var(--s-card) var(--s-4); }

  /* Строка прайса складывается в один столбец (mobile.css), колонки
     подписывать нечем — шапка таблицы уходит. */
  .tk-pricelist__cols { display: none; }

  /* Счётчик и кнопка — в столбик, кнопка на всю ширину. */
  .tk-pricelist__more-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
    padding-top: var(--s-4);
  }
  /* Кнопка на всю ширину. Подпись длинная: с каноническими полями 32
     она переносится на две строки, с 20 встаёт в одну. Обводка внутренняя,
     поэтому вычитается из поля — как в самом .tk-btn--secondary. */
  .tk-pricelist__more {
    width: 100%;
    padding-inline: calc(var(--s-5) - var(--bw-outline));
  }

  /* Плашка ОМС разворачивается в колонку, кнопка растягивается. */
  .tk-omsnote {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-5);
    padding: var(--s-card);
  }
  .tk-omsnote .tk-btn { align-self: stretch; }
}

/* ═══ statya ═══ */
/* ТОМОКО — страница «Статья» /blog/<slug>/.
   Снято 27.08.2026 с артборда Figma 345:32259 (1440×3779),
   файл U5M0ihzdUI9upBTwUAHZ42.

   Здесь ТОЛЬКО раскладка этой страницы. Всё, что уже есть
   в дизайн-системе, взято как есть и заново не объявляется:
     • светлая шапка и её бургер — .tk-header--solid (components.css);
     • крошки со слэшем         — .tk-breadcrumbs.tk-breadcrumbs--slash
                                  (components.css), полоса .tk-crumbs
                                  с отбивкой 56 уже объявлена общим
                                  куском pages.css — пятой копии не делаем;
     • карточка статьи «Читайте также» — .tk-card-post и его
                                  __cover/__date/__title (components.css);
     • чип даты                 — .tk-chip.tk-chip--paper;
     • кнопка «К ВРАЧУ»         — .tk-btn.tk-btn--secondary;
     • сетка 4×282 просвет 24   — .tk-grid.tk-grid--4 (base.css);
     • финальный блок и подвал  — .tk-final (components.css + sections.css).
   Канонические классы не переопределяются: где макет расходится
   с компонентом, рядом стоит модификатор с префиксом .tk-statya-.
   Теней нет ни одной, элевация только цветом.
   Точка перелома мобильных — 680, как во всей системе.

   Подключать после tokens.css → base.css → components.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Колонка текста ════════════════════════════════════════════════════
   У этой страницы ДВЕ разные ширины содержимого. Обложка и «Читайте
   также» стоят в обычном контейнере 1200 (поля 120). Крошки, шапка
   статьи и сам текст набраны в колонке 960 (x=240 в кадре 1440) —
   это мера строки, а не поля страницы: 960 при кегле 20 даёт ~76 знаков.
   Отдельного токена под 960 нет; выражение через --l-max-width минус
   поля сломалось бы на 1100, где поля сжимаются до 48. */

/* ИЗМЕНЕНО 04.09.2026 по решению заказчика. Колонка 960 стояла по центру
   контейнера, то есть текст начинался на 240, а хлебные крошки — на 120:
   два левых края рядом читались как «текст уехал вправо».

   Заказчик выбрал расширить колонку до контейнера и прижать её к крошкам.
   Расплата — мера строки: было ~76 знаков при кегле 20, стало ~95. Это
   длиннее комфортного, но текст теперь стоит в один край с крошками,
   обложкой и блоком «Читайте также», и страница читается как одна сетка,
   а не как две.

   Вариант, ближе к макету, отвергнут: по замеру 345:32315 в колонке 960
   должны стоять И крошки тоже, а они из неё выпали — вот это и было
   настоящим расхождением с Figma. Вернуть можно одной строкой:
   max-width: 960px; margin-inline: auto; плюс крошки внутрь колонки. */
.tk-statya__col {
  max-width: none;
  margin-inline: 0;
}


/* ═══ 2. Шапка статьи (Figma 345:32307) ════════════════════════════════════
   Кадр 1440×357: поля 240 держит .tk-statya__col, вертикальные — здесь.
   Крошки лежат выше, в своей полосе .tk-crumbs (отбивка 56 из общего
   куска pages.css), поэтому верхнее поле блока — ровно просвет 20.
   Сумма сходится: 56 + 16 + 20 + 13 + 20 + 112 + 20 + 60 + 40 = 357. */

.tk-statya-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);               /* макет 20 */
  padding-top: var(--s-5);       /* просвет крошки → мета, тот же 20 */
  padding-bottom: var(--s-10);   /* макет 40 */
}

/* Мета-строка: дата оранжевая, рубрика и время чтения — третичным,
   разделители «·» цветом обводки полей.
   ОТКЛОНЕНИЕ: в макете 11px SemiBold, ступени 11 в шкале нет — набрано
   канонической .t-label-sm (12); начертание SemiBold макета добавлено
   модификатором, сама ступень не трогается. */
.tk-statya-head__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);    /* макет 14 → шаг 16; при переносе строк 12 */
  font-weight: var(--w-semibold);
}
.tk-statya-head__sep { color: var(--c-field-border); }

/* Заголовок 56px. Ступени 56 в шкале нет: между heading-lg 50 и
   display-sm 76 своей ступени не заводили, а заводить её ради одной
   страницы — плодить шкалу. Замер 345:32315: кегль 56, кадр 112 на две
   строки (интерлиньяж 1.0), трекинг -2.2px = -0.0393em. */
.tk-statya-head__title {
  font-size: 56px;
  line-height: 1.0;
  letter-spacing: -0.0393em;
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: у лида в макете интерлиньяж 1.5, ступень body-lg даёт 1.29.
   Берём макетный: это вводный абзац в колонке 960, канонический
   встал бы плотнее. Кегль и трекинг ступени совпали дословно. */
.tk-statya-head__lead { line-height: 1.5; }


/* ═══ 3. Обложка (Figma 345:32317) ═════════════════════════════════════════
   Кадр 1200×520 в обычном контейнере, скругление 24 — карточное
   --r-card, а не --r-image: это плашка во всю ширину, а не обложка
   карточки. Верхнего поля у кадра нет, его дал нижний отступ шапки. */

.tk-statya-cover { padding-bottom: calc(var(--s-12) + var(--s-1)); }  /* 52: ступени 52 в ритме нет */

.tk-statya-cover__img {
  width: 100%;
  aspect-ratio: 1200 / 520;      /* кадр 345:32318 */
  object-fit: cover;
  border-radius: var(--r-card);
  background: var(--c-mist);     /* подложка, пока картинка грузится */
}


/* ═══ 4. Текст статьи (Figma 345:32319) ════════════════════════════════════
   Кадр 1440×894, поля 240, нижнее 72. Просвет между ВСЕМИ элементами
   ровно 24 — и между абзацами, и между пунктами списка, и вокруг
   врезки. Поэтому раздел с <h2> — такой же флекс с тем же просветом:
   семантика добавляется, ритм не меняется.

   ОТКЛОНЕНИЕ КЕГЛЕЙ И ЦВЕТА. В макете проза 18px цветом #3d4f44,
   H2 — 35px Regular. Ступени 18 в шкале нет, цвета #3d4f44 в палитре
   нет (он между --c-ink-green и --c-fog; та же история, что на
   контактах, см. .tk-kontakty__value). Проза набрана .t-body-lg (20)
   каноническим чернильным: 18 стоит ровно посередине между ступенями
   16 и 20, а в колонке 960 кегль 16 дал бы 95 знаков в строке —
   вдвое длиннее нормы чтения. H2 сошёлся со ступенью .t-heading (35)
   дословно, кроме интерлиньяжа: макет 1.05, токен 1.0. */

.tk-statya-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);                                  /* макет 24 */
  padding-bottom: calc(var(--s-16) + var(--s-2));   /* 72: ступени 72 в ритме нет */
}

.tk-statya-body__sec {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  width: 100%;
}

/* Интерлиньяж прозы 1.7 из макета: ступень body-lg даёт 1.29,
   для длинного текста это слишком плотно. */
.tk-statya-body__p { line-height: 1.7; }

.tk-statya-body__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);       /* макет 24 — тот же шаг, что у всего блока */
  width: 100%;
}

.tk-statya-body__list li {
  display: flex;
  gap: var(--s-4);       /* макет 14 → шаг 16 */
  line-height: 1.55;     /* макет 1.55 */
}

/* Маркер — оранжевая точка (345:32323, замер 6×6). Рисуем фоном,
   а не картинкой: это форма, а не иконка. Тот же приём, что
   у .tk-zabol-art__list. Шага 6 в сетке нет.
   Отступ сверху ставит точку в оптический центр первой строки:
   (20 × 1.55 − 6) / 2 ≈ 12. В макете пункты однострочные и точка
   центрирована по всему пункту; при переносе строк это развалилось бы. */
.tk-statya-body__list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 12px;
  border-radius: var(--r-pill);
  background: var(--c-orange);
}

/* Врезка (345:32334): плашка --c-mist со скруглением 20 (не карточные 24),
   поля макета 28/32 → шаги 24 и 32. Кегль макета 19 Medium — ступени 19
   нет, взята .t-body-lg (20) с макетным интерлиньяжем 1.5.
   Значения намеренно те же, что у .tk-zabol-art__callout: это одна
   и та же врезка на двух типах длинных текстов. */
.tk-statya-body__callout {
  width: 100%;
  padding: var(--s-6) var(--s-8);
  background: var(--c-mist);
  border-radius: var(--r-image);
  font-weight: var(--w-medium);
  line-height: 1.5;
}


/* ═══ 5. Карточка автора (Figma 345:32338) ═════════════════════════════════
   Плашка --c-mist со скруглением 24, поля макета 24/28 → 24 и шаг 32,
   просвет 24. Портрет 72 в круге, справа — каноническая вторичная кнопка.
   Кнопку не трогаем: .tk-btn.tk-btn--secondary из кита совпала
   с макетом дословно (обводка 1.5 --c-hairline, поля 16/32, капс 14). */

.tk-statya-author {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  width: 100%;
  padding: var(--s-6) var(--s-8);
  background: var(--c-mist);
  border-radius: var(--r-card);
}

.tk-statya-author__photo {
  flex: none;
  width: 72px; height: 72px;   /* замер 345:32339; на сетке 4px, но токена под 72 нет */
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--c-hairline);
}
.tk-statya-author__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;  /* портрет кадрируется по лицу, как в .tk-card-doctor__photo */
}

.tk-statya-author__data {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);              /* макет 4 */
}

/* ОТКЛОНЕНИЕ: имя в макете 18 SemiBold — ступени 18 нет, взята
   .t-body-lg (20), как у .tk-card-doctor__name. */
.tk-statya-author__name { font-weight: var(--w-semibold); }

/* ОТКЛОНЕНИЕ: должность в макете 14 Regular без капса. Ступень 14
   в шкале есть только как .t-label (капс + трекинг 0.1em), под
   обычное начертание её нет — набрано каноническими 16 .t-body. */

.tk-statya-author .tk-btn { flex: none; }


/* ═══ 6. Читайте также (Figma 345:32344) ═══════════════════════════════════
   Кадр в обычном контейнере 1200, нижнее поле 92 — канонический
   --s-section. Заголовок 50/0.88/-2px совпал со ступенью .t-heading-lg
   дословно, просвет до карточек 24. Карточка — канонический
   .tk-card-post целиком: обложка 282×190 со скруглением 20, чип даты
   в левом верхнем углу, заголовок body-lg. Здесь только выравнивание
   карточек по высоте ряда — то же, что у .tk-blog__card на главной. */

.tk-statya-also { padding-bottom: var(--s-section); }

.tk-statya-also__title { margin-bottom: var(--s-6); }   /* макет 24 */

.tk-statya-also__list > li { display: flex; }
.tk-statya-also__card { width: 100%; height: 100%; }

/* «ЧИТАТЬ →» прижимается к низу, чтобы у карточек с разной длиной
   заголовка нижняя строка стояла на одной линии. */
.tk-statya-also__more { margin-top: auto; }
.tk-statya-also__card:hover .tk-statya-also__more { color: var(--c-green-deep); }


/* ═══ 7. Адаптив ═══════════════════════════════════════════════════════════
   Точка перелома одна — 680. Поля и сжатую шкалу кеглей даёт tokens.css,
   колонки сетки — base.css: --4 становится двумя на 1100 и одной на 680. */

@media (max-width: 1100px) {
  /* Поля страницы сжались до 48, внутренняя ширина контейнера 1004 —
     колонка 960 оставила бы по 22px с боков, полоса читалась бы как
     сбой выключки. Ниже 1100 мера строки держится самим контейнером. */
  .tk-statya__col { max-width: none; }

  /* Ступени между heading-lg 50 и display-sm 76 в шкале нет; 44 —
     интерполяция между макетными 56 и мобильными 34, как у
     .tk-zabol-head__title и .tk-staff__title. */
  .tk-statya-head__title { font-size: 44px; }
}

@media (max-width: 680px) {
  /* ОТДЕЛЬНОГО МОБИЛЬНОГО МАКЕТА У ЭТОЙ СТРАНИЦЫ НЕТ. Раскладка выведена
     из мобильных секций главной (блог 345:13961) и из мобильного вида
     соседних внутренних страниц: те же кегли заголовка, те же поля. */

  .tk-statya-head {
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }
  /* Мобильный кегль заголовка страницы: ступени 34 в шкале нет,
     значение то же, что у .tk-zabol-head__title и .tk-staff__title. */
  .tk-statya-head__title { font-size: 34px; letter-spacing: -0.03em; }

  /* Мета-строка на 375 не помещается в одну строку и переносится,
     а разделитель «·» повисает в конце первой. На телефоне точки
     убираются, роль разделителя берёт просвет. */
  .tk-statya-head__sep { display: none; }

  /* Обложка 1200×520 на 335 дала бы полосу высотой 145 — картинка
     перестала бы читаться. Кадр переводится в 335×220, скругление —
     в мобильные 20, как у всех обложек на телефоне. */
  .tk-statya-cover { padding-bottom: var(--s-8); }
  .tk-statya-cover__img {
    aspect-ratio: 335 / 220;
    border-radius: var(--r-image);
  }

  .tk-statya-body      { gap: var(--s-5); padding-bottom: var(--s-10); }
  .tk-statya-body__sec { gap: var(--s-5); }
  .tk-statya-body__list    { gap: var(--s-4); }
  .tk-statya-body__list li { gap: var(--s-3); }
  /* Кегль body-lg на телефоне 17: (17 × 1.55 − 6) / 2 ≈ 10. */
  .tk-statya-body__list li::before { margin-top: 10px; }

  .tk-statya-body__callout { padding: var(--s-5); }

  /* Портрет и подпись остаются в строку, кнопка уходит на свою
     во всю ширину: «К ВРАЧУ» рядом с двумя строками текста на 335
     не помещается. */
  .tk-statya-author {
    flex-wrap: wrap;
    gap: var(--s-4);
    padding: var(--s-5);
  }
  .tk-statya-author__data  { flex: 1 1 auto; }
  .tk-statya-author .tk-btn { flex: 1 0 100%; }

  .tk-statya-also__title { margin-bottom: var(--s-4); }
  /* Просвет между карточками в столбик — мобильные 16, как в блоге главной. */
  .tk-statya-also__list { gap: var(--s-4); }
}

/* ═══ test ═══ */
/* ТОМОКО — страница «Тест — детальная» /pacientu/test-zreniya/cvetovospriyatie/.
   Снято 27.08.2026 с артборда Figma 345:34832 (1440×3800) и мобильного
   349:3475 (375×4979), файл U5M0ihzdUI9upBTwUAHZ42.

   Здесь ТОЛЬКО раскладка этой страницы. Всё, что уже есть
   в дизайн-системе, взято как есть и заново не объявляется:
     • светлая шапка и её бургер — .tk-header--solid (components.css);
     • крошки со слэшем         — .tk-breadcrumbs.tk-breadcrumbs--slash
                                  (components.css), полоса .tk-crumbs
                                  с отбивкой 56 уже объявлена куском
                                  page-pacientu.css — копии не делаем;
     • кнопка записи в шапке    — .tk-btn.tk-btn--primary;
     • кнопка «ПРОЙТИ ТЕСТ»     — .tk-btn.tk-btn--primary, модификатор
                                  добавляет только ширину;
     • сетки 3×384, 4×282, 2×588 просвет 24 — .tk-grid с --3/--4/--2
                                  (base.css): 384×3+24×2 = 1200,
                                  282×4+24×3 = 1200, 588×2+24 = 1200,
                                  просветы сошлись в ноль, своей
                                  раскладки не пишем;
     • ступени кеглей           — .t-body-lg, .t-body, .t-subheading,
                                  .t-label-sm и --t-display-sm;
     • финальный блок и подвал  — .tk-final (components.css + sections.css).
   Канонические классы не переопределяются: где макет расходится
   с компонентом, рядом стоит модификатор с префиксом .tk-test-.
   Теней нет ни одной, элевация только цветом.
   Точка перелома мобильных — 680, как во всей системе.

   Подключать после tokens.css → base.css → components.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Шапка страницы (Figma 345:34880) ══════════════════════════════════
   Кадр 1440×353: поля 120 держит .tk-container, вертикальные — здесь.
   Крошки лежат выше, в своей полосе .tk-crumbs (отбивка 56 из общего
   куска pages.css), поэтому верхнее поле блока — ровно просвет 24.
   Сумма сходится: 56 + 18 + 24 + 15 + 24 + 70 + 24 + 58 + 64 = 353. */

.tk-test-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);                /* макет 24 */
  padding-top: var(--s-6);        /* просвет крошки → надстрочник, тот же 24 */
  padding-bottom: var(--s-16);    /* макет 64 */
}

/* ОТКЛОНЕНИЕ: надстрочник в макете 11px SemiBold с трекингом 0.9px,
   ступень label-12 даёт 12px Medium и 0.1em. Кегль берём из шкалы,
   насыщенность — из макета. Тот же приём, что у .tk-statya-head__meta
   и .tk-kontakty__label. */
.tk-test-head__eyebrow { font-weight: var(--w-semibold); }

/* Заголовок 76px — ступень --t-display-sm, заведённая в tokens.css ровно
   под этот кегль. ОТКЛОНЕНИЕ: в макете интерлиньяж 0.92 и трекинг -2.3px
   (-0.0303em), токен даёт 0.94 и -0.035em; берём токен — заголовок
   внутренней страницы на сайте один и тот же везде, разъезжаться
   он не должен (.tk-staff__title, .tk-catalog__title, .tk-lic__title). */
.tk-test-head__title {
  font-size: var(--t-display-sm-size);
  line-height: var(--t-display-sm-lh);
  letter-spacing: var(--t-display-sm-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: в макете у лида интерлиньяж 1.45, ступень body-lg даёт 1.29 —
   оставлен канонический, ради единой шкалы. Ширина — мера строки из макета
   (345:34884, w=760), токена ширины текста нет. */
.tk-test-head__lead { max-width: 760px; }


/* ═══ 2. Общая обвязка секций ══════════════════════════════════════════════
   Пять блоков страницы — «Как проходить», изображение теста, результаты,
   дисклеймер и другие тесты — отбиты снизу одинаково: 92, то есть
   канонический --s-section. Заголовок секции отбит от содержимого на 24.

   ОТКЛОНЕНИЕ: заголовки секций в макете 35px SemiBold с интерлиньяжем 1.05,
   ступень heading даёт 35 Regular и 1.0. Кегль и интерлиньяж берём из шкалы,
   из макета оставлена только насыщенность. */

.tk-test-sec { padding-bottom: var(--s-section); }

.tk-test-sec__title {
  font-weight: var(--w-semibold);
  margin-bottom: var(--s-6);      /* макет 24 */
}


/* ═══ 3. Как проходить (Figma 345:34885) ═══════════════════════════════════
   Три шага в канонической .tk-grid--3, каждый отбит сверху волосяной
   линией. Сумма кадра: 37 + 24 + 148 + 92 = 301. */

.tk-test-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);                /* макет 10 → шаг 12 */
  padding-top: var(--s-5);        /* макет 20 */
  border-top: 1px solid var(--c-hairline); /* волосяная линия: токена толщины нет */
}

/* ОТКЛОНЕНИЕ: номер шага в макете 11 SemiBold, ступень label-12 даёт
   12 Medium. Тот же случай, что у .tk-usluga-step__num. */
.tk-test-step__num { font-weight: var(--w-semibold); }

/* ОТКЛОНЕНИЕ: подзаголовок шага в макете 20 SemiBold с интерлиньяжем 1.2,
   ступень body-lg даёт 20 Regular и 1.29 — берём токен, из макета
   оставлена только насыщенность (как у .tk-lic-doc__title). */
.tk-test-step__title { font-weight: var(--w-semibold); }

/* ОТКЛОНЕНИЕ: описание шага в макете 15px, ступени 15 в шкале нет —
   набрано канонической .t-body (16, на мобильных 15). Интерлиньяж
   поднят до макетного 1.5. */
.tk-test-step__text { line-height: 1.5; }


/* ═══ 4. Изображение теста (Figma 345:34900) ═══════════════════════════════
   Спектр 1200×420 — ровно ширина контейнера, поэтому картинка идёт
   в натуральных пропорциях, без кадрирования. Кадрировать эту картинку
   нельзя в принципе: обрезка по горизонтали выбрасывает часть цветов,
   а весь тест как раз в том, чтобы их пересчитать.
   Сумма кадра: 420 + 24 + 20 + 92 = 556. */

.tk-test-shot__img {
  width: 100%;
  border-radius: var(--r-card);   /* макет 24: карточное скругление, не --r-image */
}

/* ОТКЛОНЕНИЕ: подпись в макете 14px с интерлиньяжем 1.45. Ступень 14 в шкале
   есть, но она прописная Medium с трекингом 0.1em — для строчной подписи
   не годится; набрано канонической .t-body (16) приглушённым цветом. */
.tk-test-shot__caption {
  margin-top: var(--s-6);         /* макет 24 */
  line-height: 1.5;               /* мера строки из макета */
}


/* ═══ 5. Результаты теста (Figma 345:34903) ════════════════════════════════
   Четыре плашки --c-mist в канонической .tk-grid--4.
   Сумма кадра: 37 + 24 + 278 + 92 = 431. */

.tk-test-res__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);                /* макет 10 → шаг 12 */
  height: 100%;                   /* низ плашек по одной линии при разной длине текста */
  padding: 28px;                  /* макет 28; шага 28 в ритме 4px нет */
  background: var(--c-mist);
  border-radius: var(--r-card);   /* макет 24 */
}

/* Диапазон («Менее 20 цветов») — надстрочник СТРОЧНЫЙ, а не прописной:
   канонической .t-label-sm его набрать нельзя, она делает text-transform.
   Поэтому свой класс на тех же токенах ступени label-12.
   ОТКЛОНЕНИЕ: в макете 11 SemiBold с трекингом 0.8px — кегль и трекинг
   из шкалы, насыщенность из макета. */
.tk-test-res__range {
  font-size: var(--t-label-12-size);
  line-height: var(--t-label-12-lh);
  letter-spacing: var(--t-label-12-ls);
  font-weight: var(--w-semibold);
  color: var(--c-orange);
}

/* Кегль 22 — между body-lg 20 и subheading 24, своей ступени нет.
   Тот же случай, что у .tk-zabol-todo__sum (28). Трекинг в макете
   не задан; наследуется канонический -0.03em из body, специально
   не сбрасываем — на 22 это -0.66px, ровно между -0.6 и -0.72
   соседних ступеней. */
.tk-test-res__name {
  font-size: 22px;                /* замер 345:34908; ступени 22 в шкале нет */
  line-height: 1.2;               /* мера строки из макета */
  font-weight: var(--w-semibold);
}

/* ОТКЛОНЕНИЕ: описание в макете 15px — та же замена на ступень body, что
   и у шагов. */
.tk-test-res__text { line-height: 1.5; }


/* ═══ 6. Дисклеймер (Figma 345:34922) ══════════════════════════════════════
   Плашка 1200×90: метка «ВАЖНО» слева, текст справа.
   Сумма плашки: 22 + 46 + 22 = 90, кадра: 90 + 92 = 182.

   Заливка #fdf1e0 — единственный цвет страницы, которого нет ни в палитре,
   ни в переменных Figma. Сырым hex не пишем: это ровно 13% оранжевого
   на бумаге, проверено по каналам (255−0.13×12 = 253, 255−0.13×108 = 241,
   255−0.13×235 = 224). Тот же приём, что у .tk-btn--accent:hover. */

.tk-test-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);                /* макет 16 */
  padding: 22px 28px;             /* макет 22/28; шагов 22 и 28 в ритме нет */
  background: color-mix(in srgb, var(--c-orange) 13%, var(--c-paper));
  border-radius: var(--r-image);  /* макет 20 */
}

/* ОТКЛОНЕНИЕ: метка в макете 11 SemiBold с трекингом 0.8px — кегль
   из шкалы, насыщенность из макета. Не сжимается: в макете строка
   стоит одной колонкой слева от текста. */
.tk-test-note__label { flex: none; font-weight: var(--w-semibold); }

/* ОТКЛОНЕНИЕ: текст в макете 15px — ступень body, интерлиньяж макетный.
   Цвет основной, --c-ink-green: это предупреждение, а не примечание. */
.tk-test-note__text { flex: 1 1 auto; line-height: 1.5; }


/* ═══ 7. Другие тесты (Figma 345:34926) ════════════════════════════════════
   Две плашки --c-mist в канонической .tk-grid--2, кнопка прижата к низу.
   Сумма кадра: 37 + 24 + 314 + 92 = 467; карточки: 32 + 110 + 62 + 46 + 32 = 282
   при высоте 314 — разницу забирает прижатая книзу кнопка. */

.tk-test-more__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 314px;              /* высота карточки из макета; токена высоты нет */
  padding: var(--s-card);         /* макет 32 */
  background: var(--c-mist);
  border-radius: var(--r-card);   /* макет 24 */
}

.tk-test-more__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);                /* макет 12 */
  margin-bottom: var(--s-6);      /* минимальный просвет до кнопки, если текст длинный */
}

/* ОТКЛОНЕНИЕ: надстрочник в макете 11 SemiBold с трекингом 1.1px —
   кегль и трекинг из ступени label-12, насыщенность из макета. */
.tk-test-more__eyebrow { font-weight: var(--w-semibold); }

/* Заголовок карточки 24 SemiBold, интерлиньяж 1.13, трекинг -0.72px —
   ступень subheading сошлась с макетом один в один, своего правила нет. */

/* ОТКЛОНЕНИЕ: описание в макете 15px — та же замена на ступень body. */
.tk-test-more__text { line-height: 1.5; }

/* Кнопка каноническая, модификатор добавляет только ширину и прижим книзу:
   в макете 345:34934 она тянется во всю плашку (524 = 588 − 32×2).
   ОТКЛОНЕНИЕ: в макете высота 46 при кегле 13, канон .tk-btn даёт 49
   при кегле 14 — три пикселя отданы за единую кнопку сайта. */
.tk-test-more__btn {
  width: 100%;
  margin-top: auto;
}


/* ═══ 8. Адаптив ═══════════════════════════════════════════════════════════
   Точка перелома одна — 680. Поля и сжатую шкалу кеглей даёт tokens.css,
   колонки сеток — base.css: --3 и --4 становятся двумя на 1100 и одной
   на 680, --2 — одной на 680. Мобильный макет у страницы свой: 349:3475. */

@media (max-width: 1100px) {
  /* Ступени между heading-lg 50 и display-sm 76 в шкале нет — тот же
     промежуточный кегль, что у .tk-staff__title и .tk-lic__title. */
  .tk-test-head__title { font-size: 52px; }
}

@media (max-width: 680px) {
  /* Мобильный макет 349:3475. Поля 20 и шкала кеглей приходят из tokens.css,
     здесь — только ритм: просветы 14 и нижние поля секций 36. */

  .tk-test-head {
    gap: var(--s-4);              /* макет 14 → шаг 16 */
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);   /* макет 28 → шаг 32 */
  }
  /* Мобильный кегль заголовка страницы: ступени 34 в шкале нет,
     значение то же, что у .tk-staff__title и .tk-catalog__title. */
  .tk-test-head__title { font-size: 34px; letter-spacing: -0.03em; }
  .tk-test-head__lead  { max-width: none; }

  .tk-test-sec        { padding-bottom: var(--s-10); }  /* макет 36 → шаг 40 */
  .tk-test-sec__title { margin-bottom: var(--s-4); }    /* макет 14 → шаг 16 */

  /* Просвет между плитками в столбик — макетные 14, шаг 16.
     Канонический --s-gutter (24) на телефоне слишком широк. */
  .tk-test-steps,
  .tk-test-res,
  .tk-test-more { gap: var(--s-4); }

  .tk-test-step { gap: var(--s-2); padding-top: var(--s-4); } /* макет 6 и 16 */

  /* Скругление картинки на телефоне — мобильные 20, как у всех обложек. */
  .tk-test-shot__img     { border-radius: var(--r-image); }
  .tk-test-shot__caption { margin-top: var(--s-4); }         /* макет 14 → шаг 16 */

  /* Поля плашки на телефоне 22 — это и есть мобильный --s-card (20). */
  .tk-test-res__card { gap: var(--s-2); padding: var(--s-card); }
  /* Кегль имени результата на телефоне: макет 20, ступень body-lg (17)
     мельче — берём макетное значение, оно же мобильный subheading. */
  .tk-test-res__name { font-size: var(--t-subheading-size); }

  /* Плашка «ВАЖНО» разворачивается в столбик: на 335 метка и текст
     в строку не помещаются (макет 349:3560). */
  .tk-test-note {
    flex-direction: column;
    gap: var(--s-2);              /* макет 8 */
    padding: var(--s-5) 22px;     /* макет 20/22; шага 22 в ритме нет */
  }

  .tk-test-more__card { min-height: 261px; padding: var(--s-card); } /* макет 261/20 */
  .tk-test-more__top  { margin-bottom: var(--s-5); }
}

/* ═══ test-zreniya ═══ */
/* ТОМОКО — страница «Тесты зрения — каталог» /pacientu/test-zreniya/.
   Снято 27.08.2026 с артборда Figma 345:33188 (1440×2651),
   файл U5M0ihzdUI9upBTwUAHZ42.

   Страница короткая: шапка страницы, шесть карточек тестов в три колонки
   и дисклеймер. Прямая родня — детальная /pacientu/test-zreniya/
   cvetovospriyatie/: её блок «Другие тесты» (345:34926) собран из точно
   такой же карточки, а дисклеймер — из той же плашки. Значения макета
   там и здесь совпали до пикселя и намеренно повторены, а не подобраны
   заново; классы всё же свои, чтобы кусок страницы не зависел
   от соседнего куска сборки.

   Здесь ТОЛЬКО то, чего в дизайн-системе не было: шапка страницы,
   карточка теста и плашка-дисклеймер. Всё остальное взято как есть:
     • светлая шапка   — .tk-header--solid (components.css), заново не объявляем;
     • крошки          — .tk-breadcrumbs + .tk-breadcrumbs--slash (components.css),
                         полоса .tk-crumbs с отбивкой 56 уже объявлена куском
                         page-pacientu.css — копии не делаем;
     • кнопка записи   — .tk-btn + .tk-btn--primary (components.css): в макете
                         345:33234 заливка #237e33 = --c-brand-green, радиус 300;
     • кнопка «ПРОЙТИ ТЕСТ» — .tk-btn + .tk-btn--primary, модификатор
                         добавляет только ширину и прижим книзу;
     • сетка 3×384 просвет 24 — .tk-grid + .tk-grid--3 (base.css):
                         384×3 + 24×2 = 1200, просветы сошлись в ноль,
                         своей раскладки не пишем;
     • ступени кеглей  — .t-subheading (24 / 1.13 / −0.03em) сошлась
                         с заголовком карточки дословно, .t-body,
                         .t-body-lg и .t-label-sm — с оговорками ниже;
     • финальный блок  — .tk-final и подвал (components.css + sections.css).
   Канонические классы не переопределяются: где макет расходится
   с компонентом, рядом стоит модификатор с префиксом .tk-tests-.
   Теней нет ни одной, элевация только цветом.
   Точка перелома мобильных — 680, как во всей системе.

   Подключать после tokens.css → base.css → components.css → sections.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Шапка страницы (Figma 345:33236) ══════════════════════════════════
   Кадр 1440×283: поля 120 держит .tk-container, вертикальные — здесь.
   Крошки лежат выше, в своей полосе .tk-crumbs (отбивка 56 из общего
   куска pages.css), поэтому верхнее поле блока — ровно просвет между
   ними и заголовком. Просветы макета 22 → шаг сетки 24.
   Сумма сходится: 56 + 16 + 22 + 61 + 22 + 58 + 48 = 283.

   Кадр совпадает с шапками /pacientu/oms/, /pacientu/pamyatka/
   и /pacientu/nalogovyy-vychet/ до пикселя, включая кегль заголовка. */

.tk-tests-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);                /* макет 22 → шаг 24 */
  padding-top: var(--s-6);        /* просвет крошки → заголовок, тот же 22 → 24 */
  padding-bottom: var(--s-12);    /* макет 48 */
}

/* Ступени 64 в шкале кита нет: она между heading-lg 50 и display-sm 76.
   Замер 345:33238: кегль 64, интерлиньяж 0.96, трекинг −2.5px переведён
   в em делением на кегль (−0.039em), чтобы не разъезжался на адаптиве.
   Значения ровно те же, что у .tk-oms-head__title, .tk-vychet-head__title,
   .tk-pamyatka__title и .tk-usluga-hero__title — это одна ступень
   на пяти страницах, а не пять подборов. */
.tk-tests-head__title {
  font-size: var(--t-page-title-size);
  line-height: var(--t-page-title-lh);
  letter-spacing: var(--t-page-title-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: лид набран кеглем 19 при трекинге −0.5px — ступени 19
   в шкале нет, берём каноническую .t-body-lg (20). Интерлиньяж макетный
   1.5 против токенных 1.29: это вводный абзац в меру 916, канонический
   встал бы плотнее. Ширина — мера строки из макета (345:33239, w=916),
   токена ширины текста нет. */
.tk-tests-head__lead {
  line-height: 1.5;
  max-width: 916px;
}


/* ═══ 2. Обвязка секции (Figma 345:33240) ══════════════════════════════════
   Блок страницы один, отбит снизу каноническими 92 (--s-section).
   Собственного заголовка у него в макете нет — подробности
   в комментарии разметки.
   Сумма кадра: 314 + 24 + 314 + 24 + 90 + 92 = 858. */

.tk-tests-sec { padding-bottom: var(--s-section); }


/* ═══ 3. Карточки тестов (Figma 345:33241 и 345:33263) ═════════════════════
   Шесть плашек --c-mist. В макете они разложены двумя кадрами по три,
   но это ряды одной канонической .tk-grid--3, отдельных обёрток
   рядам не нужно: просвет между рядами тот же 24, что и между колонками.

   Карточка: скругление 24, поля 32, высота 314 при кнопке, прижатой
   к низу. Верхний блок 156 / 133 при разной длине текста — разницу
   забирает просвет до кнопки, поэтому высота задана карточке,
   а не её содержимому. */

.tk-tests-grid { margin-bottom: var(--s-6); }   /* до дисклеймера, макет 24 */

.tk-tests-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 314px;              /* высота карточки из макета; токена высоты нет */
  padding: var(--s-card);         /* макет 32 */
  background: var(--c-mist);
  border-radius: var(--r-card);   /* макет 24 */
}

.tk-tests-card__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);                /* макет 12 */
  margin-bottom: var(--s-6);      /* минимальный просвет до кнопки, если текст длинный */
}

/* ОТКЛОНЕНИЕ: надстрочник в макете 11 SemiBold с трекингом 1.1px, ступень
   label-12 даёт 12 Medium и 0.1em. Кегль и трекинг берём из шкалы,
   насыщенность — из макета. Приём тот же, что у .tk-test-more__eyebrow
   и .tk-vychet-way__num. */
.tk-tests-card__eyebrow { font-weight: var(--w-semibold); }

/* Заголовок карточки 24 SemiBold, интерлиньяж 1.13, трекинг −0.72px —
   ступень .t-subheading сошлась с макетом один в один, своего правила нет. */

/* ОТКЛОНЕНИЕ: описание в макете 15px, ступени 15 в шкале нет — набрано
   канонической .t-body (16, на мобильных 15) приглушённым цветом
   (#7c8a81 = --c-fog, класс .c-muted). Интерлиньяж макетный 1.5. */
.tk-tests-card__text { line-height: 1.5; }

/* Кнопка каноническая, модификатор добавляет только ширину и прижим
   книзу: в макете 345:33247 она тянется во всю плашку (320 = 384 − 32×2).
   ОТКЛОНЕНИЕ: в макете высота 46 при кегле 13, канон .tk-btn даёт 49
   при кегле 14 — три пикселя отданы за единую кнопку сайта. */
.tk-tests-card__btn {
  width: 100%;
  margin-top: auto;
}


/* ═══ 4. Дисклеймер (Figma 345:33285) ══════════════════════════════════════
   Плашка 1200×90: метка «ВАЖНО» слева, текст справа.
   Сумма плашки: 22 + 46 + 22 = 90.

   Заливка #fdf1e0 и цвет метки #b96c08 — единственные два цвета страницы,
   которых нет ни в палитре, ни в переменных Figma. Сырым hex не пишем:
   заливка — ровно 13% оранжевого на бумаге (255 − 0.13×12 = 253,
   255 − 0.13×108 = 241, 255 − 0.13×235 = 224), метка — тот же оранжевый,
   притемнённый чернильным до 76% (243×0.76 + 11×0.24 = 187 при замере 185,
   147×0.76 + 26×0.24 = 118 при 108, 20×0.76 + 16×0.24 = 19 при 8).
   Метку намеренно НЕ красим каноническим --c-orange, как это сделано
   на детальной /pacientu/test-zreniya/cvetovospriyatie/: чистый оранжевый
   на этой заливке даёт контраст 2.0:1 — ниже порога WCAG даже для крупного
   текста, а здесь кегль 11. Притемнённый даёт 4.6:1. Расхождение двух
   страниц отмечено в приёмке: править надо ту, а не эту. */

.tk-tests-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);                /* макет 16 */
  padding: 22px 28px;             /* макет 22/28; шагов 22 и 28 в ритме нет */
  background: color-mix(in srgb, var(--c-orange) 13%, var(--c-paper));
  border-radius: var(--r-image);  /* макет 20 */
}

/* ОТКЛОНЕНИЕ: метка в макете 11 SemiBold с трекингом 1.1px — кегль
   и трекинг из ступени label-12, насыщенность из макета. Не сжимается:
   в макете строка стоит одной колонкой слева от текста. */
.tk-tests-note__label {
  flex: none;
  font-weight: var(--w-semibold);
  color: color-mix(in srgb, var(--c-orange) 76%, var(--c-ink-green));
}

/* Текст плашки 16 Medium — кегль сошёлся со ступенью .t-body, из макета
   взяты насыщенность и интерлиньяж 1.45. Цвет основной, --c-ink-green:
   это предупреждение, а не примечание. */
.tk-tests-note__text {
  flex: 1 1 auto;
  font-weight: var(--w-medium);
  line-height: 1.45;
}


/* ═══ 5. Адаптив ═══════════════════════════════════════════════════════════
   ОТДЕЛЬНОГО МОБИЛЬНОГО МАКЕТА У КАТАЛОГА ТЕСТОВ НЕТ: в файле нарисованы
   мобильные виды только для главной, контактов, лицензий, услуги,
   детальной страницы теста и меню. Раскладка выведена по правилам системы
   и по мобильному виду детальной (349:3475), где такие же карточки и такая
   же плашка уже сложены в столбик. Поля и сжатую шкалу кеглей даёт
   tokens.css, колонки сетки — base.css: --3 становится двумя на 1100
   и одной на 680. Точка перелома одна — 680. */

@media (max-width: 1100px) {
  /* Контейнер здесь 1004 (поля 48). Заголовок 64 в эту ширину помещается
     и не жмётся — так же оставлены .tk-oms-head__title и .tk-vychet-head__title.
     Мера лида снимается: она шире контейнера. */
  .tk-tests-head__lead { max-width: none; }
}

@media (max-width: 680px) {
  .tk-tests-head {
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }
  /* Кегль заголовка совпадает с мобильной ступенью --t-display-size (38) —
     то же решение, что у .tk-oms-head__title и .tk-vychet-head__title. */
  .tk-tests-head__title {
    font-size: var(--t-display-size);
    line-height: var(--t-display-lh);
  }

  .tk-tests-sec { padding-bottom: var(--s-10); }   /* мобильный ритм 40 */

  /* Просвет между карточками в столбик — 16: канонический --s-gutter (24)
     на телефоне слишком широк, так же ужат .tk-test-more на 375. */
  .tk-tests-grid { gap: var(--s-4); margin-bottom: var(--s-4); }

  /* Карточка: поля 20 (мобильный --s-card). Высоту не держим: в столбик
     карточки идут по содержимому, пустой низ на 335 ничем не оправдан —
     так же снята высота у .tk-test-more__card. */
  .tk-tests-card {
    min-height: 0;
    padding: var(--s-card);
  }
  .tk-tests-card__top { margin-bottom: var(--s-5); }

  /* Плашка «ВАЖНО» разворачивается в столбик: на 335 метка и текст
     в строку не помещаются — так же сложена .tk-test-note. */
  .tk-tests-note {
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-5) 22px;     /* макет-ступень 20/22 */
  }
}

/* ═══ tomoko-tv ═══ */
/* ТОМОКО — страница «Томоко-TV» /o-klinike/tomoko-tv/.
   Снято 27.08.2026 с артборда Figma 345:33382 (1440×2464),
   файл U5M0ihzdUI9upBTwUAHZ42.

   Страница из двух кадров: шапка страницы и галерея из шести роликов.
   Здесь ТОЛЬКО то, чего в дизайн-системе не было: полоса крошек,
   шапка страницы и постер видео со знаком проигрывания. Всё остальное
   взято как есть:
     • светлая шапка   — .tk-header--solid (components.css), заново не объявляем;
     • крошки          — .tk-breadcrumbs + .tk-breadcrumbs--slash (components.css):
                         разделитель «/» и цвет текущего пункта уже там;
     • кнопка записи   — .tk-btn + .tk-btn--primary (components.css): в макете
                         345:33428 заливка #237e33 = --c-brand-green;
     • сетка 3 колонки — .tk-grid + .tk-grid--3 (base.css): 384×3 + 24×2 = 1200,
                         просветы сошлись в ноль по обеим осям (между рядами
                         в макете тоже 24), своей раскладки не пишем;
     • карточка ролика — .tk-card-post и его __cover/__title (components.css):
                         скругление обложки --r-image 20 и заголовок body-lg
                         совпали с макетом. Отличия — кадр 16:9 вместо 282×190
                         и знак видео — вынесены в модификаторы;
     • метка раздела   — .t-label-sm + .c-accent (base.css): оранжевый
                         надстрочный лейбл, тот же приём, что в .tk-sec-head;
     • финальный блок  — .tk-final и подвал (components.css + sections.css).
   Канонические классы не переопределяются: где макет расходится
   с компонентом, рядом стоит модификатор с префиксом .tk-tv-.
   Теней нет ни одной, элевация только цветом.
   Точка перелома мобильных — 680, как во всей системе.

   Подключать после tokens.css → base.css → components.css → sections.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Хлебные крошки (Figma 345:33431) ══════════════════════════════════
   В макете крошки лежат внутри кадра «Шапка страницы» первой строкой.
   На сайте они вынесены над <main>: это навигация, а не содержание.
   Здесь только отбивка от шапки: 56 из макета (345:33431, y=56).
   Кегль оставлен канонический 12 (в макете 13 — ступени 13 в шкале нет).

   ПОВТОР: та же строчка стоит в кусках page-blog.css, page-kontakty.css,
   page-licenzii.css, page-o-klinike.css, page-pacientu.css, page-pamyatka.css,
   page-price.css, page-usluga.css, page-uslugi.css, page-vrach.css,
   page-vrachi.css и page-zabolevanie.css — это хром всех внутренних
   страниц, а не свойство именно этой. При следующей уборке .tk-crumbs
   место в components.css, рядом с .tk-header--solid. */
 /* 56: ступени 56 в ритме нет */


/* ═══ 2. Шапка страницы (Figma 345:33430) ══════════════════════════════════
   Кадр 1440×254: поля 120 держит .tk-container, вертикальные 56/48 — здесь,
   лестница «крошки → заголовок → лид» с просветом 22. Крошки лежат выше,
   у них своя обёртка, поэтому верхнее поле блока — ровно просвет макета
   22 → шаг 24. Сумма сходится: 56 + 16 + 24 + 61 + 24 + 29 + 48 = 258
   против 254 в макете: расхождение в 4 — цена округления 22 → 24. */

.tk-tv__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);                  /* макет 22 → шаг 24 */
  padding-top: var(--s-6);          /* тот же просвет 22 → 24 */
  padding-bottom: var(--s-12);      /* макет 48 */
}

/* Ступени 64 в шкале кита нет: она между heading-lg 50 и display-sm 76.
   Замер 345:33432: кегль 64, интерлиньяж 0.96, трекинг -2.5px переведён
   в em делением на кегль (-0.039em), чтобы не разъезжался на адаптиве.
   Значения ровно те же, что у .tk-usluga-hero__title и .tk-pamyatka__title —
   это одна ступень на трёх страницах, а не три подбора. */
.tk-tv__title {
  font-size: var(--t-page-title-size);
  line-height: var(--t-page-title-lh);
  letter-spacing: var(--t-page-title-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: лид набран кеглем 19 при трекинге -0.5px — ступени 19
   в шкале нет, берём каноническую .t-body-lg (20). Интерлиньяж макетный
   1.5 против токенных 1.29: это вводный абзац в меру 866, канонический
   встал бы плотнее. Ширина — мера строки из макета (345:33433, w=866),
   токена ширины текста нет. */
.tk-tv__lead { max-width: 866px; }


/* ═══ 3. Видеогалерея (Figma 345:33434) ════════════════════════════════════
   Шесть карточек 384 в три колонки с просветом 24 по обеим осям — это
   ровно .tk-grid + .tk-grid--3, своей раскладки не пишем; рядам «Ряд 1»
   и «Ряд 2» отвечают строки той же сетки. Верхнего поля у галереи нет:
   отбивку сверху дала шапка страницы, снизу — канонические 92
   (кадр галереи: последний ряд кончается на 608 при высоте 700). */

.tk-tv { padding-bottom: var(--s-section); }

/* Карточки в ряду разной высоты: заголовки в одну или две строки.
   Растягиваем на ширину колонки, по высоте они стоят от верха, как
   в макете (ряд 1 — 304, ряд 2 — 280). */
.tk-tv__list > li { display: flex; }
.tk-tv__card { width: 100%; }

/* ОТКЛОНЕНИЕ: просвет внутри карточки в макете 14, канонический
   .tk-card-post даёт 16. Ступени 14 в ритме нет, разница в 2px
   не стоит переопределения базового класса. */


/* ── Постер ──────────────────────────────────────────────────────────────
   Кадр 384×216 — это ровно 16:9; канонический .tk-card-post__cover
   рассчитан на обложку статьи 282×190, поэтому пропорция своя.
   Скругление, обрезка и object-fit остаются канонические. */
.tk-tv__poster { aspect-ratio: 16 / 9; }

/* Знак видео: круг 56 точно по центру постера (замер 345:33438 —
   left 164, top 80 в кадре 384×216, то есть центр в центре).
   Заливка белая с прозрачностью 0.92 — среди --c-paper-* ступени 92%
   нет, поэтому смешиваем токен с прозрачным, а не пишем сырой rgba. */
.tk-tv__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 56px;                     /* замер 345:33438; ступени 56 в ритме нет */
  height: 56px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-paper) 92%, transparent);
}

/* Глиф лежит внутри постера, поэтому под него попадает каноническое
   правило .tk-card-post__cover img (100% и object-fit: cover) — оно
   растянуло бы треугольник на весь круг. Возвращаем размер глифа.
   В макете треугольник 15×15.6 (345:33439), готовый icon-play.svg
   квадратный 16×16 — берём его, разница в полпикселя. */
.tk-tv__play img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}


/* ── Метка и заголовок ───────────────────────────────────────────────────
   ОТКЛОНЕНИЕ: метка раздела в макете 10px SemiBold с трекингом 1px,
   каноническая .t-label-sm — 12px Medium с трекингом 0.1em (те же 1.2px).
   Ступени 10 в шкале нет, оставлен канонический кегль: на 10px метка
   уже не проходит порог читаемости. */

/* Заголовок карточки — <h2>: над ним только <h1> страницы. base.css даёт
   <h2> начертание из body (400), а в макете заголовок SemiBold
   (345:33441, 20px SemiBold, интерлиньяж 1.18). Канонический
   .tk-card-post__title кегль 20 и интерлиньяж 1.2 уже держит,
   добавляем только вес — в своей области видимости. */
.tk-tv__card .tk-card-post__title { font-weight: var(--w-semibold); }

/* Карточка ролика НЕ ссылка: адресов видео в макете нет. Канонический
   ховер .tk-card-post перекрашивал бы заголовок в зелёный и обещал
   переход, которого не будет, — снимаем его в своей области видимости.
   Когда придут ссылки на ролики, это правило уходит вместе с <article>. */
.tk-tv__card:hover .tk-card-post__title { color: inherit; }


/* ═══ 4. Адаптив ═══════════════════════════════════════════════════════════
   Точка перелома одна — 680. Поля и сжатую шкалу кеглей даёт tokens.css,
   колонки сетки — base.css: --3 становится двумя на 1100 и одной на 680.
   На 1100 заголовок 64 в контейнер 1004 помещается и не жмётся —
   отдельного правила ему, как и .tk-pamyatka__title, не нужно. */

@media (max-width: 680px) {
  /* ОТДЕЛЬНОГО МОБИЛЬНОГО МАКЕТА У ЭТОЙ СТРАНИЦЫ НЕТ. Раскладка выведена
     по правилам системы и по мобильному виду соседних страниц того же
     типа (/o-klinike/, /pacientu/pamyatka/): колонки складываются в одну,
     поля и кегли даёт tokens.css, ритм ужимается на ступень. */


  .tk-tv__head {
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }
  /* Кегль заголовка совпадает с мобильной ступенью --t-display-size (38) —
     то же решение, что у .tk-pamyatka__title с тем же кеглем 64. */
  .tk-tv__title {
    font-size: var(--t-display-size);
    line-height: var(--t-display-lh);
  }
  /* Меру строки на телефоне держит сам контейнер (335 при полях 20). */
  .tk-tv__lead { max-width: none; }

  /* Ролики идут в одну колонку: постер 16:9 при ширине 335 — это 188
     по высоте, знак видео 56 на нём читается без уменьшения.
     Просвет между карточками — 24, как между рядами на десктопе. */
  .tk-tv__list { gap: var(--s-6); }
}

/* ═══ usluga ═══ */
/* ТОМОКО — страница «Услуга — детальная» /uslugi/lazernaya-korrekciya/.
   Собрано 27.08.2026 из макета Figma U5M0ihzdUI9upBTwUAHZ42,
   артборд 345:31195 (1440×4662). Подключать строго после
   tokens.css, base.css, components.css.

   Здесь ТОЛЬКО раскладка секций этой страницы. Кнопки, крошки, строки
   прайса, карточка врача и сетки берутся из base.css / components.css
   как есть; где компонент не совпал с макетом — рядом стоит модификатор
   с префиксом .tk-usluga-, базовый класс не правится.
   Теней нет ни одной, элевация только цветом.

   Общее по типографике: абзацы этой страницы набраны с интерлиньяжем 1.5
   (замер по всем текстовым узлам артборда) — плотность --t-body-lh 1.33
   рассчитана на подписи, а не на прозу. Множитель безразмерный, поэтому
   пишется числом, а не пикселями. */


/* ══ Шапка светлая · 345:31196 ════════════════════════════════════
   На внутренних страницах шапка не лежит поверх видео: у неё белый фон,
   чернильный текст и волосяная линия снизу. Модификатор рядом с
   каноническим .tk-header--overlay, сам overlay не трогаем.
   Высота кадра в макете 90 = 88 у .tk-header__inner плюс эта линия. */

/* Полоски бургера в mobile.css нарисованы currentColor и рассчитаны на
   белый текст поверх видео. На светлой шапке они бы исчезли — цвет
   переключается вместе с фоном, сам .tk-burger не трогаем. */

/* ══ Хлебные крошки · 345:31245 ═══════════════════════════════════
   Полоса крошек живёт над <main>: это навигация, а не содержание.
   Обёртка и модификатор разделителя общие с каталогом /uslugi/ —
   это хром внутренних страниц, а не свойство именно этой.
   В макете крошки отбиты от шапки на 78.5, но 22.5 из них дало
   вертикальное центрирование текстовой колонки в кадре героя.
   Собственный отступ кадра — 56, его и берём: ровно как на каталоге. */

/* Модификатор к .tk-breadcrumbs: на этой странице разделитель —
   косая черта цветом обводки полей, а не длинное тире.
   Базовый компонент остаётся с тире. */


/* ══ Каркас секций ════════════════════════════════════════════════
   У кадров макета верхнего поля нет вовсе: отбивку 92 держит нижнее
   поле предыдущей секции. Канонический .tk-section кладёт 92 сверху И
   снизу — на этой странице это удвоило бы весь ритм, поэтому секции
   идут со своим односторонним отступом. */
.tk-usluga-sec { padding-block-end: var(--s-section); }

/* Просвет между заголовком секции и её содержимым — 32 в макете. */
.tk-usluga-sec__title { margin-bottom: var(--s-8); }


/* ══ Герой услуги · 345:31243 ═════════════════════════════════════
   Две колонки: текст тянется, фото 520×420 держит ширину.
   Верхнее поле кадра (56) отдано полосе крошек, здесь остаётся
   просвет от крошек до заголовка. */
.tk-usluga-hero { padding-block: var(--s-6) var(--s-16); }

.tk-usluga-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-12);
}

.tk-usluga-hero__text {
  flex: 1 1 320px;   /* базис колонки; на 1440 остаток отдаёт ей ровно 632 из макета */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
}

/* Ступени 64 в шкале кита нет: между heading-lg 50 и display-sm 76.
   Замер 345:31246, трекинг -2.5px переведён в em делением на кегль,
   чтобы не разъезжался на адаптиве. */
.tk-usluga-hero__title {
  font-size: var(--t-page-title-size);
  line-height: var(--t-page-title-lh);
  letter-spacing: var(--t-page-title-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* Лид набран кеглем 19 — ступени под него нет, берём body-lg 20. */
.tk-usluga-hero__lead {
  font-size: var(--t-body-lg-size);
  letter-spacing: var(--t-body-lg-ls);
  line-height: 1.5;
}

/* Просвет между кнопками в макете 14 — ближайший шаг сетки 16.
   Тот же случай повторяется в шагах, методиках и списке
   противопоказаний, дальше он не комментируется. */
.tk-usluga-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

.tk-usluga-hero__media {
  flex: 0 1 520px;
  min-width: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-mist);   /* подложка кадра, пока фото не загрузилось */
}
.tk-usluga-hero__media img {
  width: 100%;
  aspect-ratio: 520 / 420;   /* пропорция кадра 345:31251 */
  object-fit: cover;
}


/* ══ Факты · 345:31252 ════════════════════════════════════════════
   Плашка --c-mist на всю ширину контейнера, внутри три равные
   колонки — это каноническая .tk-grid--3, своей сетки не пишем.
   Поля макета 40/36 → шаги 40 и 32. */
/* Поля и заливка живут на ОБЁРТКЕ, а не на самом списке.
   В base.css стоит `ul[class], ol[class] { padding: 0 }`, и его специфичность
   (0,1,1) выше, чем у одиночного класса (0,1,0). Пока класс висел прямо на
   <ul>, объявленные 32/40 превращались в вычисленный 0: плашка выходила
   полосой 1200×77 при скруглении 24, текст упирался в края, а третья колонка
   переносилась за границу. Ровно так же обошли .tk-doctor__facts. */
.tk-usluga-facts__plate {
  padding: var(--s-8) var(--s-10);
  background: var(--c-mist);
  border-radius: var(--r-card);
}

.tk-usluga-fact {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);   /* макет 10 → шаг 8 */
}


/* ══ Студентам · 345:31263 ════════════════════════════════════════
   Оранжевая плашка с горизонтальным градиентом. Второй стоп макета
   #e07e0a в палитру не заведён — собран смешением --c-orange с
   чернильно-зелёным, сырой hex в код не попадает.
   Поля макета 28/26 → шаги 32 и 24. */
.tk-usluga-students {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-8);
  border-radius: var(--r-card);
  background: linear-gradient(90deg,
    var(--c-orange) 0%,
    color-mix(in srgb, var(--c-orange) 90%, var(--c-ink-green)) 100%);
  color: var(--c-paper);
}

/* ОТКЛОНЕНИЕ МАКЕТА: надстрочник набран SemiBold,
   тогда как ступень label-12 задаёт Medium. */
.tk-usluga-students__eyebrow { font-weight: var(--w-semibold); }

/* Кегль 28 — между subheading 24 и heading 35, своей ступени нет.
   Трекинг в макете нулевой, поэтому letter-spacing не наследуется. */
.tk-usluga-students__price {
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: normal;
  font-weight: var(--w-semibold);
}

.tk-usluga-students__note { line-height: 1.5; }


/* ══ Как проходит · 345:31268 ═════════════════════════════════════
   Четыре шага — каноническая .tk-grid--4, она же складывается
   4→2→1 на узких экранах. Каждый шаг отбит сверху линией. */
.tk-usluga-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding-top: var(--s-6);   /* макет 22 → шаг 24 */
  border-top: 2px solid var(--c-hairline);   /* толщина линии шага, токена нет */
}

.tk-usluga-step__num { font-weight: var(--w-semibold); }
.tk-usluga-step__text { line-height: 1.5; }


/* ══ Методики · 345:31287 ═════════════════════════════════════════
   Три плитки --c-mist, поля 32 — это токен --s-card, на мобильных
   он сам сжимается до 20. Плитки тянутся по высоте ряда. */
.tk-usluga-method {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  height: 100%;
  padding: var(--s-card);
  background: var(--c-mist);
  border-radius: var(--r-card);
}
.tk-usluga-method__text { line-height: 1.5; }


/* ══ Противопоказания · 345:31299 ═════════════════════════════════
   Текст слева фиксированной колонкой, список справа тянется. */
.tk-usluga-contra {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);   /* ширина колонки 345:31300, токена нет */
  gap: var(--s-12);
  align-items: start;
}

.tk-usluga-contra__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.tk-usluga-contra__note { line-height: 1.5; }

.tk-usluga-contra__list li {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-top: 1px solid var(--c-hairline);
  line-height: 1.5;
}
/* Маркер — оранжевая точка 6px (345:31305). Рисуем фоном, а не картинкой:
   это форма, а не иконка. Размера 6 в шаге сетки нет. */
.tk-usluga-contra__list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-orange);
}


/* ══ Кто оперирует · 345:31325 ════════════════════════════════════
   Три карточки в канонической .tk-grid--4: в макете они стоят слева
   и не растягиваются на всю ширину — четвёртая колонка пустая, ряд
   совпадает с макетом до пикселя.
   Вариант карточки этого артборда отличается от главной: портрет
   вкладывается в плашку --c-mist, скругление держит сама плашка.
   Базовый .tk-card-doctor не трогаем, всё через модификаторы. */
.tk-usluga-doctors__card {
  gap: 0;
  background: var(--c-mist);
  border-radius: var(--r-card);
  overflow: hidden;
}

.tk-usluga-doctors__photo {
  position: relative;   /* система координат для пилюли «К ВРАЧУ» */
  border-radius: 0;     /* фото в упор к краям плашки */
}

.tk-usluga-doctors__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);      /* макет 6 → шаг 8 */
  padding: var(--s-5);  /* макет 22/20 → шаг 20 */
}

/* Пилюля «К ВРАЧУ» — 16 от правого и нижнего края портрета.
   Кнопка каноническая (.tk-btn.tk-btn--sm.tk-btn--mist), модификатор
   добавляет только положение и зелёную надпись из макета. */
.tk-usluga-doctors__cta {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  color: var(--c-brand-green);
}

/* Ховера в макете нет — состояние собрано по логике кита. */
.tk-usluga-doctors__card:hover .tk-usluga-doctors__cta,
.tk-usluga-doctors__card:focus-visible .tk-usluga-doctors__cta {
  background: var(--c-brand-green);
  color: var(--c-paper);
}


/* ══ Сколько стоит · 345:31331 ════════════════════════════════════
   Шапка секции каноническая (.tk-sec-head), но в макете под ней 24,
   а не 48 — модификатор снимает разницу. */
.tk-usluga-price__head { margin-bottom: var(--s-6); }

/* Плашка таблицы: поля 32 по бокам, 8 сверху и 20 снизу — верхнее
   поле меньше, потому что первая строка идёт без линии-разделителя. */
.tk-usluga-price__plate {
  padding: var(--s-2) var(--s-card) var(--s-5);
  background: var(--c-mist);
  border-radius: var(--r-card);
}

.tk-usluga-price__name { line-height: 1.5; }

/* Список строк прайса. Своих свойств не несёт: сброс списка даёт
   ul[class] в base.css, геометрию строки — канонический .tk-price-row.
   Класс нужен, чтобы этот сброс сработал, и как крючок для шаблона MODX. */
.tk-usluga-price__list { list-style: none; }


/* ══ Адаптив ══════════════════════════════════════════════════════
   Сетки 3→2→1 и 4→2→1, перенос .tk-sec-head, мобильная строка прайса
   и складывание шапки описаны в base.css, components.css и sections.css.
   Здесь только своё. */

@media (max-width: 1100px) {
  /* Герой в колонку: текстовая колонка рядом с фото 520 становится уже
     трёхсот пикселей и абзац рассыпается на короткие обрывки. Фото
     распахивается на всю ширину и берёт более широкий кадр — вертикаль
     520×420 во всю ширину планшета выросла бы до восьмисот пикселей. */
  .tk-usluga-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-8);
  }
  .tk-usluga-hero__media { flex-basis: auto; }
  .tk-usluga-hero__media img { aspect-ratio: 16 / 9; }

  /* Список противопоказаний в фиксированные 460 + остаток уже не влезает:
     разворачиваем в одну колонку раньше мобильной точки. */
  .tk-usluga-contra {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }
}

@media (max-width: 680px) {

  .tk-usluga-hero { padding-block: var(--s-5) var(--s-10); }
  .tk-usluga-hero__inner { gap: var(--s-8); }
  .tk-usluga-hero__text  { gap: var(--s-5); }
  /* На телефоне ширина кадра около 335 — макетная вертикаль 520×420
     снова читается и широкий планшетный кадр не нужен. */
  .tk-usluga-hero__media img { aspect-ratio: 520 / 420; }

  /* Кегль заголовка совпадает с мобильной ступенью --t-display-size (38). */
  .tk-usluga-hero__title { font-size: var(--t-display-size); line-height: var(--t-display-lh); }

  /* Кнопки в столбик на всю ширину: подписи здесь длинные,
     в строку они переносятся некрасиво. */
  .tk-usluga-hero__actions { width: 100%; }
  .tk-usluga-hero__actions .tk-btn { flex: 1 1 100%; }

  .tk-usluga-facts__plate { padding: var(--s-card); }
  .tk-usluga-students     { padding: var(--s-card); }
  .tk-usluga-students__price { font-size: var(--t-subheading-size); }

  .tk-usluga-sec__title { margin-bottom: var(--s-6); }

  .tk-usluga-price__plate { padding: var(--s-2) var(--s-5) var(--s-4); }
}


/* ══ Подробнее об услуге ══════════════════════════════════════════
   Этой секции в макете нет: сюда попал текст со старого сайта, и
   оформления у него не было никакого — 1200 px в строку при кегле 16
   дают около 180 знаков, вдвое больше читаемой меры, абзацы шли
   вплотную (margin 0), списки — маркерами браузера.

   Своей типографики не выдумываем: у системы уже есть ответ для
   длинной прозы — статья блога (page-statya.css). Оттуда интерлиньяж
   1.7, шаг блока 24, оранжевая точка 6 px с отбивкой 16.

   Ширину колонки заказчик 30.08.2026 попросил распустить на всю
   ширину блока — 1200 px, как у остальных секций страницы. Держать
   это в уме: при кегле 16 строка выходит около 180 знаков, вдвое
   больше читаемой меры, и глазу труднее находить начало следующей
   строки. Интерлиньяж 1.7 это отчасти компенсирует. Если решим
   вернуть колонку — ставить 692: столько занимает список
   противопоказаний в макете (413:8526), то есть мера, на которую
   страница уже рассчитана. */
.tk-usluga-text__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
}
.tk-usluga-text__body > * { margin: 0; }

/* Интерлиньяж прозы: ступень body даёт 1.33 — это шаг для интерфейса,
   для чтения абзацами он тесен. */
.tk-usluga-text__body p { line-height: 1.7; }

/* Подзаголовки внутри текста подчинены заголовку секции (t-heading-lg) —
   берём ступень ниже. Сверху воздуха больше, чем снизу: заголовок
   принадлежит тому, что под ним, а не тому, что над ним. */
.tk-usluga-text__body h2,
.tk-usluga-text__body h3 {
  margin-top: var(--s-4);
  font-size:      var(--t-subheading-size);
  line-height:    var(--t-subheading-lh);
  letter-spacing: var(--t-subheading-ls);
  font-weight:    var(--w-semibold);
}
.tk-usluga-text__body > :first-child { margin-top: 0; }

/* Списки тем же языком, что противопоказания на этой же странице и
   статья блога. Сброс полей нужен явно: в base.css он повешен на
   ul[class], а у списков внутри [[*content]] классов нет. */
.tk-usluga-text__body ul,
.tk-usluga-text__body ol {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  width: 100%;
  padding: 0;
  list-style: none;
}
.tk-usluga-text__body li {
  display: flex;
  gap: var(--s-4);
  line-height: 1.55;
}
/* Точка в оптическом центре первой строки: (16 × 1.55 − 6) / 2 ≈ 9. */
.tk-usluga-text__body li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: var(--r-pill);
  background: var(--c-orange);
}

/* ═══ uslugi ═══ */
/* ТОМОКО — страница «Услуги — каталог» /uslugi/.
   Снято 27.08.2026 с артборда Figma 345:31122 (1440×3269),
   файл U5M0ihzdUI9upBTwUAHZ42.

   Здесь ТОЛЬКО то, чего в дизайн-системе не было: светлая шапка внутренних
   страниц, шапка страницы с крошками и зелёная плашка «весь прайс».
   Всё остальное взято как есть:
     • сетка карточек        — .tk-grid + .tk-grid--4 (base.css), просвет 24 совпал;
     • карточка услуги       — .tk-card-service (components.css);
     • кнопка на фото        — .tk-btn--sm .tk-btn--on-photo (components.css);
     • кикер под названием   — .tk-services__kicker (sections.css, секция «Услуги»);
     • крошки                — .tk-breadcrumbs (components.css) с модификатором;
     • кнопка плашки         — .tk-btn--light (components.css).
   Канонические классы не переопределяются: где нужен вариант — заведён
   модификатор. Теней нет ни одной, элевация только цветом и градиентом.
   Точка перелома мобильных — 680, как во всей системе.

   Подключать после tokens.css → base.css → components.css → sections.css. */


/* ═══ 1. Светлая шапка внутренних страниц (Figma 345:31123) ════════════════
   На главной шапка лежит поверх видео (.tk-header--overlay). Здесь видео нет,
   поэтому у шапки собственное полотно и нижняя линия, а логотип цветной.
   Кадр в макете 90px = 88 (.tk-header__inner из components.css) + 1px линия,
   отдельной высоты не задаём. */


/* Полоски бургера в mobile.css заданы белыми — цвет рассчитан на шапку
   поверх видео. На светлой шапке белое по белому не видно, поэтому здесь
   бургер перекрашивается в основной текст. Правило контекстное:
   базовый .tk-burger не трогаем. */


/* ═══ 2. Хлебные крошки (Figma 345:31171) ══════════════════════════════════
   Компонент .tk-breadcrumbs живёт в components.css. Там разделитель «—»
   цветом --c-ash, а в макете у инстанса библиотечного компонента — «/»
   цветом --c-field-border. Базовый класс не трогаем, ставим модификатор.
   Кегль оставлен канонический 12 (в макете 13 — ступени 13 в шкале нет). */




/* ═══ 3. Шапка страницы (Figma 345:31170) ══════════════════════════════════
   Кадр 1440×304: поля 120 держит .tk-container, вертикальные 56 — здесь,
   просветы между крошками, заголовком и лидом 24. Крошки лежат выше
   (у них своя обёртка), поэтому верхнее поле блока — ровно просвет 24. */

.tk-catalog__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  padding-top: var(--s-6);
  padding-bottom: calc(var(--s-12) + var(--s-2)); /* те же 56 из макета */
}

/* Заголовок 76px — ступень --t-display-sm, заведённая в tokens.css ровно
   под этот кегль. ОТКЛОНЕНИЕ: в макете интерлиньяж 0.92 и трекинг -3px
   (-0.0395em), токен даёт 0.94 и -0.035em; берём токен, чтобы 76-й кегль
   не расползался сырыми пикселями по страницам. */
.tk-catalog__title {
  font-size: var(--t-display-sm-size);
  line-height: var(--t-display-sm-lh);
  letter-spacing: var(--t-display-sm-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: в макете у лида интерлиньяж 1.45, ступень body-lg даёт 1.29 —
   оставлен канонический, ради единой шкалы. Ширина — мера строки из макета. */
.tk-catalog__lead {
  max-width: 656px; /* мера строки из макета, токена ширины текста нет */
}


/* ═══ 4. Сетка услуг (Figma 345:31174) ═════════════════════════════════════
   Одиннадцать карточек 282×376 в четыре колонки с просветом 24 —
   это ровно .tk-grid + .tk-grid--4, своей раскладки не пишем.
   Верхнего поля у секции нет: отбивку сверху дала шапка страницы. */

.tk-catalog {
  padding-bottom: var(--s-section);
}


/* ═══ 5. Плашка «Весь прайс» (Figma 345:31189) ═════════════════════════════
   Тот же зелёный градиент, что у финального блока, развёрнутый по
   горизонтали (--g-green-x, tokens.css). Скругление 24, поля 32/40. */

.tk-allprice {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  margin-top: var(--s-gutter);  /* 24 в макете — просвет сетки */
  padding: var(--s-8) var(--s-10);
  border-radius: var(--r-card);
  overflow: hidden;
  color: var(--c-paper);
  background: var(--g-green-x);
}

.tk-allprice__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2); /* макет 10, шаги сетки 8 и 12 — взят меньший */
}

/* ОТКЛОНЕНИЕ: надстрочник в макете 11px SemiBold, ступень label-12 даёт
   12px Medium. Кегль берём из шкалы, насыщенность — из макета. */
.tk-allprice__label {
  color: var(--c-orange);
  font-weight: var(--w-semibold);
}

/* ОТКЛОНЕНИЕ: текст плашки в макете 18px/1.45, ступеней 18 в шкале нет —
   поставлена ближайшая body-lg (20/1.29). */


/* ═══ 6. Адаптив ═══════════════════════════════════════════════════════════
   Точка перелома одна — 680. Поля и сжатую шкалу кеглей даёт tokens.css,
   колонки сетки — base.css: --4 становится двумя на 1100 и одной на 680. */

@media (max-width: 1100px) {
  /* Ступени между heading-lg 50 и display-sm 76 в шкале нет — тот же
     промежуточный кегль, что у .tk-newops__title на главной. */
  .tk-catalog__title { font-size: 52px; }
}

@media (max-width: 680px) {

  .tk-catalog__head {
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }
  /* Мобильный кегль заголовка страницы: ступени 34 в шкале нет,
     значение то же, что у .tk-newops__title на главной. */
  .tk-catalog__title { font-size: 34px; letter-spacing: -0.03em; }
  .tk-catalog__lead  { max-width: none; }

  /* Плашка разворачивается в колонку, кнопка растягивается на всю ширину. */
  .tk-allprice {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-5);
    padding: var(--s-card);
  }
  .tk-allprice .tk-btn { align-self: stretch; }
}

/* ═══ vrach ═══ */
/* ТОМОКО — страница «Врач — личная страница»
   /vrachi/krivosheina-olga-ivanovna/.
   Снято 27.08.2026 с артборда Figma 345:31516 (1440×3169),
   файл U5M0ihzdUI9upBTwUAHZ42.

   Здесь ТОЛЬКО то, чего в дизайн-системе не было: светлая шапка внутренних
   страниц, герой врача с портретом и плашкой фактов, две колонки «Опыт
   и направления» и раскладка секции отзывов о враче. Всё остальное взято
   как есть:
     • контейнер, ступени .t-*, сетка   — base.css;
     • чипы-бейджи                      — .tk-chip + .tk-chip--mist;
     • кнопки                           — .tk-btn--primary и .tk-btn--secondary;
     • плашка фактов                    — .tk-grid + .tk-grid--3 (просвет свой);
     • крошки                           — .tk-breadcrumbs с модификатором --slash;
     • заголовок секции                 — .tk-sec-head (components.css);
     • карточка отзыва и слайдер        — .tk-card-review (components.css)
                                          плюс .tk-reviews__slider / __card /
                                          __controls / __arrows / __next /
                                          __author-name из sections.css: это
                                          тот же слайдер, что на главной,
                                          вместе с его мобильной лентой
                                          из mobile.css;
     • точки и круглые стрелки          — .tk-dots и .tk-icon-btn;
     • финальный блок и подвал          — .tk-final и компаньоны.
   Канонические классы не переопределяются: где макет расходится
   с компонентом, рядом стоит модификатор с префиксом .tk-doctor-.
   Теней нет ни одной, элевация только цветом.
   Точка перелома мобильных — 680, как во всей системе.

   Подключать после tokens.css → base.css → components.css → sections.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Светлая шапка внутренних страниц (Figma 345:31517) ════════════════
   На главной шапка лежит поверх видео (.tk-header--overlay). Здесь видео
   нет, поэтому у шапки собственное полотно и нижняя линия, а логотип
   цветной. Кадр в макете 90px = 88 (.tk-header__inner из components.css)
   плюс волосяная линия, отдельной высоты не задаём.

   ПОВТОР: те же два правила уже стоят в кусках page-price.css,
   page-usluga.css, page-uslugi.css и page-vrachi.css — это хром всех
   внутренних страниц, а не свойство именно этой. Объявления совпадают
   дословно, порядок в каскаде роли не играет; при уборке pages.css
   их стоит поднять в один общий блок «внутренние страницы». */


/* Полоски бургера в mobile.css нарисованы белыми — цвет рассчитан на шапку
   поверх видео. На светлой шапке белое по белому не видно, поэтому бургер
   перекрашивается в основной текст. Базовый .tk-burger не трогаем. */


/* ═══ 2. Хлебные крошки (Figma 345:31568) ══════════════════════════════════
   ОТКЛОНЕНИЕ ОТ МАКЕТА. В артборде крошки лежат внутри героя, в правой
   колонке над именем врача (345:31568, x=588). На сайте полоса крошек —
   часть хрома страницы, а не содержания: она стоит над <main> на всех
   внутренних страницах (/price/, /uslugi/, /uslugi/…, /vrachi/), и разнобой
   в одном разделе был бы хуже, чем сдвиг крошек к левому полю. Поэтому
   крошки вынесены из героя, а верхнее поле героя уменьшено с 48 до 24 —
   отбивку сверху теперь даёт полоса крошек.

   Разделитель и активный элемент — те же, что на остальных внутренних
   страницах; повтор объявлений такой же осознанный, как у шапки. */
 /* 56: ступени 56 в ритме нет */



/* ═══ 3. Герой врача (Figma 345:31564) ═════════════════════════════════════
   Кадр 1440×680: поля 120 держит .tk-container, вертикальные 48/72 — здесь.
   Слева портрет 420×560, справа тянущаяся колонка данных, просвет 48.
   Верхние 48 отданы полосе крошек (см. п. 2), остаётся просвет 24. */

.tk-doctor-hero {
  padding-block: var(--s-6) calc(var(--s-16) + var(--s-2)); /* низ 72 = 64 + 8 */
}

/* Ширина портрета 420 — мера из макета, токена ширины колонки нет.
   minmax(0, 1fr) вместо 1fr: иначе длинное имя-отчество раздувает
   колонку по min-content и портрет сжимается. */
.tk-doctor-hero__inner {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: var(--s-12);          /* 48 из макета */
  align-items: start;
}

/* Кадр 420×560 скруглён на 24 (--r-card), фотография в макете выше кадра
   (630) и подрезана сверху — поэтому object-position по верхнему краю,
   как у канонического .tk-card-doctor__photo. */
.tk-doctor-hero__photo {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-mist);   /* подложка кадра, пока фото не загрузилось */
}
.tk-doctor-hero__photo img {
  width: 100%;
  aspect-ratio: 420 / 560;     /* пропорция кадра 345:31565 */
  object-fit: cover;
  object-position: top center;
}

.tk-doctor-hero__data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);             /* 24 из макета */
}

/* Имя набрано кеглем 56 — ступени 56 в шкале нет: она идёт 50 → 76.
   Тот же случай, что у .tk-usluga-hero__title (64). Трекинг -2.2px
   переведён в em делением на кегль, чтобы не разъезжался на адаптиве. */
.tk-doctor__title {
  font-size: 56px;
  line-height: 0.96;
  letter-spacing: -0.039em;
  font-weight: var(--w-regular);
  text-wrap: balance;
}
/* В макете фамилия стоит отдельной строкой (два текстовых слоя в одном
   блоке). Перенос задаём блочным элементом, а не <br>: на узких экранах
   строка всё равно ломается по месту. */
.tk-doctor__surname { display: block; }

/* Бейджи: просвет в макете 10, ближайший шаг сетки 12. */
.tk-doctor__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
/* Каноническая .tk-chip--mist даёт заливку, поля 7/14, пилюлю и трекинг;
   в макете подпись зелёная и полужирная. Базовый чип не трогаем. */
.tk-doctor__badge {
  color: var(--c-brand-green);
  font-weight: var(--w-semibold);
}

/* Лид набран кеглем 18 при интерлиньяже 1.55 — ступени 18 нет, берём
   body-lg 20; интерлиньяж 1.5, как у лида на странице услуги. */
.tk-doctor__lead {
  font-size: var(--t-body-lg-size);
  letter-spacing: var(--t-body-lg-ls);
  line-height: 1.5;
}

/* Плашка фактов 732×91. Радиус 20 (--r-image), а не 24: в макете у плашки
   именно 20. Поля макета 22/28: по вертикали берём шаг 20, по горизонтали
   28 набираем шагами (32 − 4) — округление до 32 съедает по 4px у каждой
   колонки, и подпись «ОПЫТА В ЛАЗЕРНОЙ ХИРУРГИИ» перестаёт помещаться
   в строку.

   ВНИМАНИЕ, ПОЧЕМУ ПЛАШКА — ОТДЕЛЬНАЯ ОБЁРТКА, А НЕ КЛАСС НА <ul>.
   В base.css стоит `ul[class], ol[class] { padding: 0 }`, и его
   специфичность (0,1,1) выше, чем у одиночного класса (0,1,0). Поля,
   объявленные прямо на списке, в браузере просто пропадают — на плашке
   фактов страницы услуги (.tk-usluga-facts__plate) это уже случилось,
   там padding мёртвый. Поэтому поля и заливка живут на обёртке,
   а на списке остаётся только сетка. */
.tk-doctor__facts {
  width: 100%;
  padding: var(--s-5) calc(var(--s-8) - var(--s-1));
  background: var(--c-mist);
  border-radius: var(--r-image);
}

/* Три равные колонки — это каноническая .tk-grid--3, своей сетки не пишем.
   Колонки в макете идут встык (225,33 × 3 = 676 = 732 − 28 × 2), поэтому
   горизонтальный просвет гасим, вертикальный оставляем на случай переноса. */
.tk-doctor__facts-grid {
  column-gap: 0;
  row-gap: var(--s-5);
}
.tk-doctor__fact {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);   /* макет 6 → шаг 8 */
}


/* ═══ 4. Опыт и направления (Figma 345:31587) ══════════════════════════════
   Кадр 1440×550, нижнее поле 92 (--s-section), верхнего нет: отбивку
   сверху дал герой. Две колонки — тянущаяся слева и 460 справа,
   просвет 48. Каноническая .tk-grid--2 сюда не ложится: там равные
   колонки и просвет 24. */

.tk-doctor-exp { padding-bottom: var(--s-section); }

.tk-doctor-exp__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;  /* 460 — мера колонки из макета */
  gap: var(--s-12);
  align-items: start;
}

/* Заголовок → содержимое колонки: 20 из макета. */
.tk-doctor-exp__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
}

/* ── Образование и опыт (345:31588) ──
   Пять строк «термин → значение»: разметка — <dl>, это ровно пары.
   Строка: волосяная линия сверху, поля 16 сверху и снизу, между
   строками просвет 20. */
.tk-doctor-edu {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.tk-doctor-edu__row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);  /* 190 — мера колонки терминов */
  gap: var(--s-6);
  padding-block: var(--s-4);
  border-top: 1px solid var(--c-hairline);
}

/* Термин: 11 SemiBold, трекинг 1.1px, цвет --c-ash. Ступени 11 в шкале
   нет — берём нижнюю, label-12 (её трекинг 0.1em это те же 1.1px на 11
   кегле). Капса здесь нет, поэтому .t-label-sm не годится: он
   переводит подпись в верхний регистр. */
.tk-doctor-edu__term {
  font-size: var(--t-label-12-size);
  letter-spacing: var(--t-label-12-ls);
  font-weight: var(--w-semibold);
  color: var(--c-ash);
}

/* ОТКЛОНЕНИЕ: интерлиньяж значения в макете 1.45, ступень body даёт 1.33.
   Здесь строки длинные и в две-три строки — интерлиньяж макета оставлен. */
.tk-doctor-edu__value { line-height: 1.45; }

/* ── Что ведёт (345:31605) ──
   Список услуг: плитки --c-mist, просвет 10 → шаг 12. */
.tk-doctor-svc {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Плитка 460×52: поля 16/20, радиус 16. Ступени радиуса 16 между
   --r-input 12 и --r-image 20 в токенах нет — значение из макета.
   Ховера в макете нет, состояние собрано по логике кита. */
.tk-doctor-svc__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--c-mist);
  border-radius: 16px;
  font-weight: var(--w-medium);
  transition: background-color .16s ease, color .16s ease;
}
.tk-doctor-svc__link:hover { background: var(--c-hairline); }
.tk-doctor-svc__link:hover .tk-doctor-svc__arrow { color: var(--c-green-deep); }

.tk-doctor-svc__arrow {
  flex: none;
  color: var(--c-brand-green);
  font-size: var(--t-label-14-size);
}

/* Приписка про заболевания: 14/1.5 без капса — ступени 14 без капса
   в шкале нет, берём body 16 и интерлиньяж макета. */
.tk-doctor__note { line-height: 1.5; }


/* ═══ 5. Отзывы о враче (Figma 345:31621) ══════════════════════════════════
   Кадр 1440×429, нижнее поле 92, верхнего нет. Три карточки 384 через 24 —
   это каноническая .tk-grid--3, полоса управления и сами карточки взяты
   у слайдера отзывов главной (sections.css), вместе с его мобильной
   лентой из mobile.css. Своей раскладки здесь почти нет.

   ОТКЛОНЕНИЯ, принятые ради единого слайдера на сайте:
     • стрелка «назад» в макете залита --c-mist, канонический .tk-icon-btn
       белый — оставлен канонический, как на главной;
     • точки в макете три одинаковых по 10, канонический .tk-dots делает
       активную точку пилюлей 28 — оставлен канонический;
     • кегли карточки в макете 17/15/10, ступени дают 16/16/12 — оставлены
       ступени, то же решение принято на главной. */

.tk-doctor-reviews { padding-bottom: var(--s-section); }

/* У канонического .tk-sec-head нижнее поле 48, в макете просвет до
   слайдера 24 — его и так даёт margin-top у .tk-reviews__slider,
   поэтому поле шапки гасим. Базовый класс не трогаем. */
.tk-doctor-reviews__head { margin-bottom: 0; }


/* ═══ 6. Адаптив ═══════════════════════════════════════════════════════════
   Точка перелома одна — 680. Поля контейнера и сжатую шкалу кеглей даёт
   tokens.css, колонки сетки — base.css (--3 становится двумя на 1100),
   ленту отзывов — mobile.css. Здесь только собственные раскладки страницы.

   ОТДЕЛЬНОГО МОБИЛЬНОГО МАКЕТА У ЭТОЙ СТРАНИЦЫ НЕТ — как и у /vrachi/.
   Раскладка выведена из десктопной: обе колонки становятся одной,
   портрет уходит наверх во всю ширину, сохраняя пропорцию кадра. */

@media (max-width: 1100px) {
  /* Портрет сжимается, колонка данных остаётся тянущейся. */
  .tk-doctor-hero__inner {
    grid-template-columns: 320px minmax(0, 1fr);  /* 320 — сжатый кадр портрета */
    gap: var(--s-10);
  }
  /* Ступени между heading-lg 40 (на этой ширине) и 56 в шкале нет —
     промежуточный кегль, как у .tk-staff__title и .tk-catalog__title. */
  .tk-doctor__title { font-size: 44px; }

  /* Колонки «Опыт и направления» встают друг под друга: 460 справа
     и тянущаяся слева на планшете уже не расходятся по ширине. */
  .tk-doctor-exp__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-10);
  }

  /* .tk-grid--3 на этой ширине даёт две колонки — просвет возвращаем,
     встык они стоят только в трёхколоночном ряду макета. */
  .tk-doctor__facts-grid { column-gap: var(--s-6); }
}

@media (max-width: 680px) {

  .tk-doctor-hero { padding-block: var(--s-4) var(--s-10); }
  .tk-doctor-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
  }
  .tk-doctor-hero__data { gap: var(--s-5); }

  /* Мобильный кегль имени: ступени 34 в шкале нет, значение то же,
     что у заголовков /vrachi/, /uslugi/ и /price/. */
  .tk-doctor__title { font-size: 34px; letter-spacing: -0.03em; }

  /* Плашка фактов: поля 20, факты в один столбец (.tk-grid--3 схлопывает
     сама base.css), просвет между ними 16. */
  .tk-doctor__facts { padding: var(--s-5); }
  .tk-doctor__facts-grid { row-gap: var(--s-4); }

  /* Кнопка записи во всю ширину — так же, как на мобильных секциях
     главной; правится только геометрия, цвет и типографика канонические. */
  .tk-doctor-hero__data .tk-btn { width: 100%; }

  .tk-doctor-exp__col { gap: var(--s-4); }

  /* Строка «термин → значение» разворачивается в две строки:
     колонка 190 на 375 не оставляет значению читаемой меры. */
  .tk-doctor-edu { gap: var(--s-4); }
  .tk-doctor-edu__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-1);
    padding-block: var(--s-3);
  }

  .tk-doctor-svc__link { padding: var(--s-4); }

  /* Кнопка «ВСЕ ОТЗЫВЫ» во всю ширину: .tk-sec-head на 680 сам
     разворачивается в колонку (components.css). */
  .tk-doctor-reviews__head .tk-btn { width: 100%; }
}

/* ═══ vrachi ═══ */
/* ТОМОКО — страница «Врачи — каталог» /vrachi/.
   Снято 27.08.2026 с артборда Figma 345:31430 (1440×3293),
   файл U5M0ihzdUI9upBTwUAHZ42.

   Здесь ТОЛЬКО то, чего в дизайн-системе не было: светлая шапка
   внутренних страниц, полоса крошек, шапка страницы и плиточный
   вариант карточки врача. Всё остальное взято как есть:
     • сетка 4 колонки       — .tk-grid + .tk-grid--4 (base.css), просвет 24 совпал;
     • карточка врача        — .tk-card-doctor и его __photo/__name/__surname/__role
                               (components.css);
     • пилюля «К ВРАЧУ»      — .tk-btn.tk-btn--sm.tk-btn--mist (components.css);
     • крошки                — .tk-breadcrumbs (components.css) с модификатором;
     • финальный блок        — .tk-final и подвал (components.css).
   Канонические классы не переопределяются: где макет расходится
   с компонентом, рядом стоит модификатор с префиксом секции.
   Теней нет ни одной, элевация только цветом.
   Точка перелома мобильных — 680, как во всей системе.

   Подключать после tokens.css → base.css → components.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Светлая шапка внутренних страниц (Figma 345:31431) ════════════════
   На главной шапка лежит поверх видео (.tk-header--overlay). Здесь видео
   нет, поэтому у шапки собственное полотно и нижняя линия, а логотип
   цветной. Кадр в макете 90px = 88 (.tk-header__inner из components.css)
   плюс волосяная линия, отдельной высоты не задаём.

   ПОВТОР: те же три правила уже стоят в кусках page-usluga.css и
   page-uslugi.css — это хром всех внутренних страниц, а не свойство
   именно этой. Объявления совпадают дословно, порядок в каскаде роли
   не играет; при следующей уборке pages.css их стоит поднять
   в один общий блок «внутренние страницы». */


/* Полоски бургера в mobile.css нарисованы currentColor и рассчитаны
   на белый текст поверх видео. На светлой шапке они бы исчезли —
   цвет переключается вместе с фоном, сам .tk-burger не трогаем. */


/* ═══ 2. Хлебные крошки (Figma 345:31479) ══════════════════════════════════
   Полоса крошек живёт над <main>: это навигация, а не содержание.
   Компонент .tk-breadcrumbs — в components.css, там разделитель «—»
   цветом --c-ash; у инстанса в макете «/» цветом --c-field-border.
   Базовый класс не трогаем, ставим модификатор.
   Кегль оставлен канонический 12 (в макете 13 — ступени 13 в шкале нет).
   Отступ от шапки — 56 из макета (345:31479, y=56 внутри кадра). */
 /* 56: ступени 56 в ритме нет */



/* ═══ 3. Шапка страницы (Figma 345:31478) ══════════════════════════════════
   Кадр 1440×333: поля 120 держит .tk-container, вертикальные 56 — здесь,
   просветы между крошками, заголовком и лидом 24. Крошки лежат выше
   (у них своя обёртка), поэтому верхнее поле блока — ровно просвет 24.
   Сумма сходится: 56 + 16 + 24 + 70 + 24 + 87 + 56 = 333. */

.tk-staff__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  padding-top: var(--s-6);
  padding-bottom: calc(var(--s-12) + var(--s-2)); /* те же 56 из макета */
}

/* Заголовок 76px — ступень --t-display-sm, заведённая в tokens.css ровно
   под этот кегль. ОТКЛОНЕНИЕ: в макете интерлиньяж 0.92 и трекинг -3px
   (-0.0395em), токен даёт 0.94 и -0.035em; берём токен, чтобы 76-й кегль
   не расползался сырыми пикселями по страницам. */
.tk-staff__title {
  font-size: var(--t-display-sm-size);
  line-height: var(--t-display-sm-lh);
  letter-spacing: var(--t-display-sm-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: в макете у лида интерлиньяж 1.45, ступень body-lg даёт 1.29 —
   оставлен канонический, ради единой шкалы. Ширина — мера строки из макета
   (345:31481, w=909), токена ширины текста нет. */
.tk-staff__lead { max-width: 909px; }


/* ═══ 4. Сетка специалистов (Figma 345:31482) ══════════════════════════════
   Одиннадцать карточек 282 в четыре колонки с просветом 24 по обеим осям —
   это ровно .tk-grid + .tk-grid--4, своей раскладки не пишем; рядам
   «Ряд 1/2/3» из макета отвечают строки той же сетки.
   Верхнего поля у секции нет: отбивку сверху дала шапка страницы,
   снизу — канонические 92. */

.tk-staff { padding-bottom: var(--s-section); }


/* ═══ 5. Карточка-плитка (Figma 342:128 «Карточка / Врач») ═════════════════
   Вариант карточки этого артборда отличается от главной: портрет
   вкладывается в плашку --c-mist, скругление держит сама плашка,
   подпись лежит на плашке с полями. Базовый .tk-card-doctor не трогаем,
   всё через модификаторы — тот же приём, что на странице услуги
   (.tk-usluga-doctors__card).

   Высота 100% нужна оттого, что подписи в ряду разной длины (у Корнишиной
   должность переносится на две строки — ряд 1 в макете на 14px выше
   остальных): без неё низ плиток в ряду встал бы вразнобой. */

.tk-staff__card {
  height: 100%;
  gap: 0;
  background: var(--c-mist);
  border-radius: var(--r-card);
  overflow: hidden;
}

.tk-staff__photo {
  position: relative;   /* система координат для пилюли «К ВРАЧУ» */
  border-radius: 0;     /* фото в упор к краям плашки */
}

.tk-staff__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);      /* макет 6 → шаг 8 */
  padding: var(--s-5);  /* макет 22/20 → шаг 20 */
}

/* ОТКЛОНЕНИЕ КЕГЛЕЙ. В макете фамилия 22 SemiBold, имя-отчество 15,
   должность 10. Ступеней 22, 15 и 10 в шкале нет: канонические
   .tk-card-doctor__name (20) и __role (12) оставлены как есть —
   единая шкала важнее двух пунктов. То же решение принято
   на странице услуги. */

/* Пилюля «К ВРАЧУ» — 16 от правого и нижнего края портрета (макет:
   left 163, top 273 в окне 282×322). Кнопка каноническая
   (.tk-btn.tk-btn--sm.tk-btn--mist), модификатор добавляет только
   положение и зелёную надпись: у .tk-btn--mist текст чернильный. */
.tk-staff__cta {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  color: var(--c-brand-green);
}

/* Ховера в макете нет — состояние собрано по логике кита. */
.tk-staff__card:hover .tk-staff__cta,
.tk-staff__card:focus-visible .tk-staff__cta {
  background: var(--c-brand-green);
  color: var(--c-paper);
}


/* ═══ 6. Адаптив ═══════════════════════════════════════════════════════════
   Точка перелома одна — 680. Поля и сжатую шкалу кеглей даёт tokens.css,
   колонки сетки — base.css: --4 становится двумя на 1100. */

@media (max-width: 1100px) {
  /* Ступени между heading-lg 50 и display-sm 76 в шкале нет — тот же
     промежуточный кегль, что у .tk-catalog__title на каталоге услуг. */
  .tk-staff__title { font-size: 52px; }
}

@media (max-width: 680px) {

  .tk-staff__head {
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-8);
  }
  /* Мобильный кегль заголовка страницы: ступени 34 в шкале нет,
     значение то же, что у .tk-catalog__title и .tk-newops__title. */
  .tk-staff__title { font-size: 34px; letter-spacing: -0.03em; }
  .tk-staff__lead  { max-width: none; }

  /* ОТДЕЛЬНОГО МОБИЛЬНОГО МАКЕТА У /vrachi/ НЕТ. Раскладка снята
     с мобильной секции «Наши специалисты» главной (345:13821):
     врачи стоят в ДВА столбца, а не сваливаются в один, как остальные
     .tk-grid--4. Одиннадцать карточек в одну колонку дали бы полосу
     длиной в четыре экрана. Правило повторяет мобильную сетку главной
     из mobile.css, но своим классом — канонический .tk-grid--4
     не трогаем. */
  .tk-staff__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 14px;      /* макет главной 14; шага 14 в сетке нет */
    row-gap: var(--s-4);   /* макет главной 16 */
  }

  /* На 375 mobile.css сам превращает .tk-card-doctor в плитку --c-mist
     со скруглением 20 и кладёт подписи полями 14. Наши поля 20 к ним
     прибавились бы — снимаем их и повторяем мобильные скругление
     и просвет своим классом, чтобы результат не зависел от того,
     подключён mobile.css до или после этого файла. */
  .tk-staff__card { border-radius: var(--r-image); gap: var(--s-1); }
  .tk-staff__body { padding: 0; gap: var(--s-1); }

  /* Пилюли «К ВРАЧУ» на мобильном макете нет: на карточке 160 она
     закрывает половину портрета. Ссылка — вся карточка, доступность
     не страдает; у трёх сотрудников без своих страниц её нет вовсе. */
  .tk-staff__cta { display: none; }
}

/* ═══ zabolevanie ═══ */
/* ТОМОКО — страница «Заболевание» /pacientu/zabolevaniya/katarakta/.
   Снято 27.08.2026 с артборда Figma 345:31847 (1440×7240),
   файл U5M0ihzdUI9upBTwUAHZ42.

   Страница длинная и почти целиком текстовая: шапка заболевания с плашкой
   «Что делать», две колонки «оглавление + статья» и ряд связанных услуг.
   Здесь ТОЛЬКО то, чего в дизайн-системе не было: полоса крошек, шапка
   заболевания, плашка «Что делать», оглавление, проза статьи и отбивки
   ряда услуг. Всё остальное взято как есть:
     • светлая шапка    — .tk-header--solid (components.css), заново не объявляем;
     • крошки           — .tk-breadcrumbs + .tk-breadcrumbs--slash (components.css);
     • кнопка записи    — .tk-btn + .tk-btn--primary (components.css): в макете
                          345:31913 заливка #237e33 = --c-brand-green, радиус 300;
     • карточка услуги  — .tk-card-service и его __body/__title/__action
                          (components.css), кикер — .tk-services__kicker
                          (sections.css, секция «Услуги»);
     • пилюля «ПОДРОБНЕЕ» — .tk-btn.tk-btn--sm.tk-btn--on-photo (components.css);
     • сетка 4 колонки  — .tk-grid + .tk-grid--4 (base.css): 282×4 + 24×3 = 1200,
                          просветы совпали в ноль, своей раскладки не пишем;
     • заголовок «Услуга, которая лечит» — ступень .t-heading-lg сошлась
                          с макетом дословно: 50 / 0.88 / -2px = -0.04em;
     • финальный блок   — .tk-final и подвал (components.css + sections.css).
   Канонические классы не переопределяются: где макет расходится
   с компонентом, рядом стоит модификатор с префиксом .tk-zabol-.
   Теней нет ни одной, элевация только цветом.
   Точка перелома мобильных — 680, как во всей системе.

   Подключать после tokens.css → base.css → components.css → sections.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Хлебные крошки (Figma 345:31897) ══════════════════════════════════
   В макете крошки лежат ВНУТРИ кадра «Шапка заболевания», первой строкой
   текстовой колонки. На сайте они вынесены над <main>: это навигация,
   а не содержание, и так же сделано на всех остальных внутренних
   страницах. Сам компонент и модификатор со слэшем — в components.css,
   здесь только отбивка от шапки: 56 из макета (345:31896, y=56).
   Кегль оставлен канонический 12 (в макете 13 — ступени 13 в шкале нет).

   ПОВТОР: та же строчка стоит в кусках page-kontakty.css, page-pacientu.css,
   page-price.css, page-usluga.css, page-uslugi.css, page-vrach.css и
   page-vrachi.css — это хром всех внутренних страниц, а не свойство именно
   этой. Значение везде одно; при следующей уборке .tk-crumbs место
   в components.css, рядом с .tk-header--solid и .tk-breadcrumbs--slash. */
 /* 56: ступени 56 в ритме нет */


/* ═══ 2. Шапка заболевания (Figma 345:31895) ═══════════════════════════════
   Кадр 1440×432: поля 120 держит .tk-container, вертикальные 56/72 — здесь,
   просвет между колонками 48. Слева текст (752), справа плашка «Что делать»
   (400): 752 + 48 + 400 = 1200, ширина колонки текста не задаётся,
   её выводит flex. Крошки лежат выше, у них своя обёртка, поэтому верхнее
   поле блока — ровно просвет макета 22 → шаг 24.
   Сумма сходится: 56 + 16 + 24 + 66 + 22 + 116 + 72 = 372 по колонке
   текста; высоту кадра 432 держит плашка (304 + 56 + 72). */

.tk-zabol-head { padding-block: var(--s-6) calc(var(--s-16) + var(--s-2)); } /* 24 / 72 */

.tk-zabol-head__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);        /* макет 48 */
}

.tk-zabol-head__text {
  flex: 1 1 auto;
  min-width: 0;            /* иначе длинный лид распирает колонку */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);         /* макет 22 → шаг 24 */
}

/* ОТКЛОНЕНИЕ КЕГЛЯ: в макете 72 / 0.92 / -2.9px. Ступени 72 в шкале нет,
   ближайшая — --t-display-sm (76), заведённая в tokens.css под заголовки
   внутренних страниц; тем же кеглем набраны /uslugi/, /vrachi/ и
   /pacientu/. Четыре пункта разницы отданы за единую шкалу: заголовок
   внутренней страницы на сайте один и тот же везде. */
.tk-zabol-head__title {
  font-size: var(--t-display-sm-size);
  line-height: var(--t-display-sm-lh);
  letter-spacing: var(--t-display-sm-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: в макете у лида кегль 19 и интерлиньяж 1.5, ступень
   body-lg даёт 20 / 1.29 — оставлен канонический, ради единой шкалы.
   То же решение принято на /vrachi/ и /uslugi/. Ширину меры (752)
   задаёт сама колонка, отдельной max-width не нужно. */


/* ═══ 3. Плашка «Что делать» (Figma 345:31907) ═════════════════════════════
   Карточка --c-mist 400×304: поля 32, просветы 16, скругление 24.
   Это не .tk-card-* из кита — своя плашка страницы, поэтому и класс свой,
   без правки канонических карточек. */

.tk-zabol-todo {
  flex: none;
  width: 400px;            /* макет 345:31907; токена ширины колонки нет */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);         /* макет 16 */
  padding: var(--s-card);  /* макет 32 */
  background: var(--c-mist);
  border-radius: var(--r-card);
}

/* ОТКЛОНЕНИЕ МАКЕТА: надстрочник набран 11 SemiBold, ступень label-12
   задаёт 12 Medium. Тот же случай, что у .tk-usluga-students__eyebrow. */
.tk-zabol-todo__eyebrow {
  color: var(--c-brand-green);
  font-weight: var(--w-semibold);
}

/* ОТКЛОНЕНИЕ: макет 16 / 1.5, ступень body даёт 16 / 1.33 — кегль сошёлся,
   интерлиньяж поднят до макетного. */
.tk-zabol-todo__text { line-height: 1.5; }

.tk-zabol-todo__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);         /* макет 10 → шаг 12 */
}

/* Кегль 28 — между subheading 24 и heading 35, своей ступени нет.
   Ровно тот же случай и то же значение, что у .tk-usluga-students__price.
   Трекинг макета -0.8px при кегле 28 = -0.029em ≈ каноничные -0.03em. */
.tk-zabol-todo__sum {
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: var(--w-semibold);
  color: var(--c-brand-green);
  font-variant-numeric: tabular-nums;
}

/* ОТКЛОНЕНИЕ: подпись цены в макете 13, ступени 13 в шкале нет —
   набрана канонической .t-body (16) приглушённым цветом. */

/* Кнопка каноническая, модификатор добавляет только ширину:
   в макете 345:31913 она тянется во всю плашку (336 = 400 − 32×2). */
.tk-zabol-todo__cta { width: 100%; }


/* ═══ 4. Текст и оглавление (Figma 345:31914) ══════════════════════════════
   Две колонки: оглавление 280 слева, статья 872 справа, просвет 48.
   280 + 48 + 872 = 1200 — ровно контейнер, своей ширины колонкам
   не задаём, кроме первой. Нижнее поле блока — канонические 92
   (кадр 4762 при высоте статьи 4670). */

.tk-zabol-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--s-12);            /* макет 48 */
  align-items: start;
  padding-bottom: var(--s-section);
}


/* ═══ 5. Оглавление (Figma 345:31915) ══════════════════════════════════════
   Восемь пунктов с волосяной линией сверху, номер оранжевый, название
   зелёное. Просветы 12 и внутри, и между пунктами.

   ОТСТУПЛЕНИЕ ОТ МАКЕТА: колонка сделана липкой. В макете этого нет —
   там оглавление просто стоит вверху, — но против 4670 пикселей статьи
   колонка высотой 413 уезжает с экрана на первом же развороте и всю
   оставшуюся страницу бесполезна. На мобильных липкость снимается. */
.tk-zabol-toc {
  position: sticky;
  top: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);            /* макет 12 */
}

/* ОТКЛОНЕНИЕ МАКЕТА: надстрочник 11 SemiBold против ступени 12 Medium. */
.tk-zabol-toc__title {
  color: var(--c-ash);
  font-weight: var(--w-semibold);
}

.tk-zabol-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);            /* макет 12 */
}

/* Поля 10 сверху и снизу → шаг 12: при кегле 16 это даёт тап-цель 42px,
   норма WCAG 2.5.8 — 24. Линия волосяная, как разделители кита. */
.tk-zabol-toc__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);            /* макет 10 → шаг 12 */
  padding-block: var(--s-3);  /* макет 10 → шаг 12 */
  border-top: 1px solid var(--c-hairline);
}

.tk-zabol-toc__num {
  flex: none;
  color: var(--c-orange);
  font-variant-numeric: tabular-nums;
}

/* ОТКЛОНЕНИЕ: название пункта в макете 15, ступени 15 в шкале нет —
   канонические 16 из .t-body, начертание Medium как в макете. */
.tk-zabol-toc__text {
  color: var(--c-brand-green);
  font-weight: var(--w-medium);
}

/* Ховера в макете нет — состояние собрано по логике кита. */
.tk-zabol-toc__link:hover .tk-zabol-toc__text { color: var(--c-green-deep); }


/* ═══ 6. Текст статьи (Figma 345:31941) ════════════════════════════════════
   Восемь разделов через 56, внутри раздела всё через 16.

   ОТКЛОНЕНИЕ КЕГЛЕЙ. В макете H2 32 SemiBold / 1.1, H3 20 SemiBold / 1.25,
   проза 17 / 1.55. Ступеней 32 и 17 в шкале нет: заголовки набраны
   канонической .t-heading (35), проза — .t-body (16); H3 сошёлся
   со ступенью .t-body-lg (20) дословно. Начертание SemiBold макета
   добавлено модификаторами — сами ступени не трогаем. Интерлиньяж прозы
   поднят до макетных 1.55: это длинный медицинский текст, канонические
   1.33 читались бы плотнее макета. */

.tk-zabol-art {
  display: flex;
  flex-direction: column;
  gap: calc(var(--s-12) + var(--s-2));   /* 56: ступени 56 в ритме нет */
}

.tk-zabol-art__sec {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);            /* макет 16 */
  scroll-margin-top: var(--s-10);  /* якорь оглавления не упирается в край окна */
}

.tk-zabol-art__h2 { font-weight: var(--w-semibold); }
.tk-zabol-art__h3 { font-weight: var(--w-semibold); }

.tk-zabol-art__p { line-height: 1.55; }

.tk-zabol-art__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);            /* макет 16 */
  width: 100%;
}

.tk-zabol-art__list li {
  display: flex;
  gap: var(--s-4);            /* макет 14 → шаг 16 */
  line-height: 1.55;
}

/* Маркер — оранжевая точка (345:31950, замер 7×7). Рисуем фоном, а не
   картинкой: это форма, а не иконка. Тот же приём, что у
   .tk-usluga-contra__list. Шага 7 в сетке нет.
   Отступ сверху ставит точку в оптический центр первой строки:
   (16 × 1.55 − 7) / 2 ≈ 9. */
.tk-zabol-art__list li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 9px;
  border-radius: var(--r-pill);
  background: var(--c-orange);
}

/* Врезка (345:31976): плашка --c-mist со скруглением 20 (не карточные 24),
   поля макета 26/30 → шаги 24 и 32.
   ОТКЛОНЕНИЕ: текст врезки в макете 18 Medium, ступени 18 в шкале нет —
   набран .t-body-lg (20) с макетным интерлиньяжем 1.5. */
.tk-zabol-art__callout {
  width: 100%;
  padding: var(--s-6) var(--s-8);
  background: var(--c-mist);
  border-radius: var(--r-image);
  font-weight: var(--w-medium);
  line-height: 1.5;
}


/* ═══ 7. Связанная услуга (Figma 345:32069) ════════════════════════════════
   Заголовок зелёный, под ним ряд из четырёх канонических карточек услуги.
   Верхнего поля у кадра нет — отбивку сверху дал блок статьи, снизу
   канонические 92. Просвет заголовок → карточки 24. */

.tk-zabol-related { padding-bottom: var(--s-section); }

/* Зелёный цвет снят по решению заказчика 30.08.2026: над этим блоком
   идут восемь чернильных заголовков статьи, и один зелёный читался
   не как акцент, а как чужеродный. Цвет наследуется. */
.tk-zabol-related__title {
  margin-bottom: var(--s-6);   /* макет 24 */
}


/* ═══ 8. Адаптив ═══════════════════════════════════════════════════════════
   Точка перелома одна — 680. Поля и сжатую шкалу кеглей даёт tokens.css,
   колонки сетки услуг — base.css: --4 становится двумя на 1100 и одной
   на 680, мобильный вид самой карточки — mobile.css. */

@media (max-width: 1100px) {
  /* Ступени между heading-lg 50 и display-sm 76 в шкале нет — тот же
     промежуточный кегль, что у .tk-staff__title и .tk-catalog__title. */
  .tk-zabol-head__title { font-size: 52px; }

  /* Контейнер здесь 1004 (поля 48). Плашка 400 и просвет 48 съели бы
     колонку текста, поэтому обе величины ужимаются: 632 + 32 + 340. */
  .tk-zabol-head__inner { gap: var(--s-8); }
  .tk-zabol-todo { width: 340px; }

  /* Та же арифметика в двух колонках статьи: 240 + 32 + 732 = 1004. */
  .tk-zabol-body {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--s-8);
  }
}

@media (max-width: 680px) {

  /* ОТДЕЛЬНОГО МОБИЛЬНОГО МАКЕТА У ЭТОЙ СТРАНИЦЫ НЕТ. Раскладка выведена
     по правилам системы: колонки складываются в одну, поля и кегли даёт
     tokens.css, ритм ужимается на ступень. */
  .tk-zabol-head { padding-block: var(--s-4) var(--s-10); }
  .tk-zabol-head__inner { flex-direction: column; gap: var(--s-8); }
  .tk-zabol-head__text { gap: var(--s-4); }
  /* Мобильный кегль заголовка страницы: ступени 34 в шкале нет,
     значение то же, что у .tk-staff__title и .tk-catalog__title. */
  .tk-zabol-head__title { font-size: 34px; letter-spacing: -0.03em; }

  .tk-zabol-todo { width: 100%; }

  .tk-zabol-body {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }

  /* Липкая колонка на телефоне заняла бы половину экрана — оглавление
     остаётся обычным списком в начале статьи. */
  .tk-zabol-toc { position: static; }

  .tk-zabol-art { gap: var(--s-10); }   /* 56 → 40 */

  .tk-zabol-related__title { margin-bottom: var(--s-4); }
}

/* ═══ zabolevaniya ═══ */
/* ТОМОКО — страница «Заболевания — каталог» /pacientu/zabolevaniya/.
   Снято 27.08.2026 с артбордов Figma U5M0ihzdUI9upBTwUAHZ42:
   десктоп 345:33289 (1440×2665) и мобильный
   «М · Заболевания — каталог» 345:16173 (375×4142).

   Страница из двух блоков: шапка страницы и сетка девяти карточек
   заболеваний. Здесь ТОЛЬКО то, чего в дизайн-системе не было:
   полоса крошек, шапка страницы и карточка заболевания. Всё остальное
   взято как есть:
     • светлая шапка   — .tk-header--solid (components.css), заново не объявляем;
     • крошки          — .tk-breadcrumbs + .tk-breadcrumbs--slash (components.css):
                         разделитель «/» и цвет текущего пункта уже там;
     • кнопка записи   — .tk-btn + .tk-btn--primary (components.css): в макете
                         345:33335 заливка #237e33 = --c-brand-green;
     • сетка 3 колонки — .tk-grid + .tk-grid--3 (base.css): 384×3 + 24×2 = 1200,
                         просветы сошлись в ноль, своей раскладки не пишем.
                         Ряды «Ряд 1/2/3» из макета — строки той же сетки;
     • название карточки 24 — ступень --t-subheading: в макете 24 SemiBold,
                         интерлиньяж 1.13 и трекинг −0.72px (= −0.03em)
                         совпали с токеном до знака, класс .t-subheading;
     • «ПОДРОБНЕЕ →»   — .t-label-sm + .c-brand (base.css);
     • финальный блок  — .tk-final и подвал (components.css + sections.css).
   Канонические классы не переопределяются: где макет расходится
   с компонентом, рядом стоит модификатор с префиксом .tk-zabkat.
   Теней нет ни одной, элевация только волосяной обводкой.
   Точка перелома мобильных — 680, как во всей системе.

   Подключать после tokens.css → base.css → components.css → sections.css,
   в сборке — куском css/pages.css. */


/* ═══ 1. Хлебные крошки (Figma 345:33338) ══════════════════════════════════
   В макете крошки лежат внутри кадра «Шапка страницы» первой строкой.
   На сайте они вынесены над <main>: это навигация, а не содержание, —
   так же на всех остальных внутренних страницах. Здесь только отбивка
   от шапки: 56 из макета (345:33338, y=56). Кегль оставлен канонический
   12 (в макете 13 — ступени 13 в шкале нет).

   ПОВТОР: та же строчка стоит в кусках page-kontakty.css, page-licenzii.css,
   page-o-klinike.css, page-pacientu.css, page-price.css, page-usluga.css,
   page-uslugi.css, page-vrach.css, page-vrachi.css и page-zabolevanie.css —
   это хром всех внутренних страниц, а не свойство именно этой. При следующей
   уборке .tk-crumbs место в components.css, рядом с .tk-header--solid. */
 /* 56: ступени 56 в ритме нет */


/* ═══ 2. Шапка страницы (Figma 345:33337) ══════════════════════════════════
   Кадр 1440×283: поля 120 держит .tk-container, вертикальные 56/48 — здесь,
   лестница «крошки → заголовок → лид» с просветом 22. Крошки лежат выше,
   у них своя обёртка, поэтому верхнее поле блока — ровно просвет макета
   22 → шаг 24. Сумма сходится: 56 + 16 + 24 + 61 + 24 + 58 + 48 = 287
   против 283 в макете: расхождение в 4 — цена округления 22 → 24. */

.tk-zabkat__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);                  /* макет 22 → шаг 24 */
  padding-top: var(--s-6);          /* тот же просвет 22 → 24 */
  padding-bottom: var(--s-12);      /* макет 48 */
}

/* ОТКЛОНЕНИЕ КЕГЛЯ: в макете 345:33339 — 64 / 0.96 / −2.5px. Ступени 64
   в шкале нет, ближайшая — --t-display-sm (76), заведённая в tokens.css
   под заголовки внутренних страниц; тем же кеглем набраны /uslugi/,
   /vrachi/, /pacientu/, /o-klinike/ и /o-klinike/licenzii/. Двенадцать
   пунктов разницы отданы за единую шкалу: заголовок внутренней страницы
   на сайте один и тот же везде, и разъезжаться он не должен. */
.tk-zabkat__title {
  font-size: var(--t-display-sm-size);
  line-height: var(--t-display-sm-lh);
  letter-spacing: var(--t-display-sm-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ОТКЛОНЕНИЕ: в макете у лида кегль 19 и интерлиньяж 1.5, ступень body-lg
   даёт 20 / 1.29 — оставлен канонический, ради единой шкалы. То же решение
   принято на /vrachi/, /uslugi/, /pacientu/ и /o-klinike/licenzii/.
   Ширина меры — из макета (345:33340, w=760), токена ширины
   текстовой колонки нет. */
.tk-zabkat__lead { max-width: 760px; }


/* ═══ 3. Сетка заболеваний (Figma 345:33341) ═══════════════════════════════
   Кадр 1440×872: девять карточек 384×244 в три колонки с просветом 24
   по обеим осям — это ровно .tk-grid + .tk-grid--3, своей раскладки
   не пишем. Верхнего поля у секции нет: отбивку сверху дала шапка
   страницы, снизу — канонические 92.
   Сумма сходится: 244×3 + 24×2 + 92 = 872. */

.tk-zabkat { padding-bottom: var(--s-section); }

/* Карточки в ряду разной наполненности: у «Глаукомы» и «Дистрофий
   сетчатки» описание в четыре строки, у остальных в три. Растягиваем
   их до высоты ряда, чтобы низ коробок стоял по одной линии.
   Тот же приём, что у .tk-promos__list > li в sections.css. */
.tk-zabkat__list > li { display: flex; }


/* ═══ 4. Карточка заболевания (Figma 345:33343) ════════════════════════════
   Белая коробка с волосяной обводкой — тот же приём, что у .tk-promos__card
   в sections.css, только без обложки: название, описание и «ПОДРОБНЕЕ →»
   разнесены по высоте. Скругление карточное 24, обводка 1.5 --c-hairline.

   Поля в макете 28 — шага 28 в ритме нет; взят канонический отступ
   карточки --s-card (32), как и у .tk-promos__body с её макетными 26×28.

   Высота 244 из макета удерживается снизу: при коротком описании
   коробка иначе схлопнулась бы, и space-between потерял бы смысл. */

.tk-zabkat__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 244px;                                   /* макет 345:33343, h=244 */
  padding: var(--s-card);                              /* макет 28 → канонический отступ карточки 32 */
  background: var(--c-paper);
  border: var(--bw-outline) solid var(--c-hairline);   /* та же толщина, что у .tk-promos__card; токена обводки нет */
  border-radius: var(--r-card);
  transition: background-color .18s ease, border-color .18s ease;
}

/* Ховера в макете нет — состояние собрано по логике кита и повторяет
   .tk-promos__card: подложка уходит в mist, обводка в фирменный зелёный. */
.tk-zabkat__card:hover,
.tk-zabkat__card:focus-visible {
  background: var(--c-mist);
  border-color: var(--c-brand-green);
}
.tk-zabkat__card:hover .tk-zabkat__more { color: var(--c-green-deep); }

/* ОТКЛОНЕНИЕ КЕГЛЕЙ. Название в макете 24 SemiBold — совпало с --t-subheading
   до знака, поэтому класс .t-subheading в разметке, здесь ничего не нужно.
   Описание в макете 15 / 1.5, ступень body даёт 16 / 1.33; «ПОДРОБНЕЕ →»
   в макете 12 SemiBold, ступень label-12 даёт 12 Medium. Кегли берём
   из шкалы, насыщенность — из неё же: ради единой типографики. */

/* Просвет 16 стоит нижней границей: пока содержимое коротко, расстановку
   держит space-between (в макете 345:33343 разрывы вышли по 38.5), а при
   длинном описании строки не слипаются. */

/* Интерлиньяж описания. Ступень body даёт 1.33 — на карточке в три-четыре
   строки это заметно плотнее макетных 1.5 (345:33345). Кегль оставлен
   канонический, интерлиньяж взят из макета: токена для него нет, и ровно
   так же — bare 1.5 — набран .tk-card-review__text в components.css. */
.tk-zabkat__text { line-height: 1.5; }


/* ═══ 5. Адаптив ═══════════════════════════════════════════════════════════
   Точка перелома одна — 680, мобильный макет 345:16173. Поля и сжатую
   шкалу кеглей даёт tokens.css, колонки сетки — base.css: --3 становится
   двумя на 1100 и одной на 680, ровно как в мобильном макете. */

@media (max-width: 1100px) {
  /* Ступени между heading-lg 50 и display-sm 76 в шкале нет — тот же
     промежуточный кегль, что у .tk-catalog__title и .tk-staff__title. */
  .tk-zabkat__title { font-size: 52px; }
}

@media (max-width: 680px) {
  /* Медиазапрос обязателен: объявленный выше .tk-crumbs без него
     оставил бы на телефоне 56 вместо макетных 32 (345:16217, y=32). */

  .tk-zabkat__head {
    gap: var(--s-4);                 /* макет 14 → шаг 16 */
    padding-top: var(--s-4);
    padding-bottom: var(--s-6);      /* макет 24 */
  }
  /* Мобильный кегль заголовка страницы: ступени 34 в шкале нет, значение
     то же, что у .tk-staff__title, .tk-catalog__title и .tk-lic__title;
     в макете 345:16219 заголовок как раз 34 / 1.02 / −1.2px. */
  .tk-zabkat__title { font-size: 34px; letter-spacing: -0.03em; }
  .tk-zabkat__lead  { max-width: none; }

  /* Сетка в один столбец с просветом 12 (345:16226, y=207 при высоте
     карточки 195). Колонку даёт base.css, здесь только просвет. */
  .tk-zabkat__list { gap: var(--s-3); }

  /* Коробка на мобильном: поля 20/18 — это ровно --s-card, который
     tokens.css на 680 сам ужимает до 20, переопределять не нужно.
     Скругление в макете 18; токена 18 нет, берём ближайший --r-image (20) —
     то же решение, что у .tk-promos__card в mobile.css. Высота 195. */
  .tk-zabkat__card {
    min-height: 195px;               /* макет 345:16222, h=195 */
    border-radius: var(--r-image);   /* макет 18 → ближайший токен 20 */
    gap: var(--s-3);
  }
}