/* ТОМОКО — раскладка секций главной и стили общего подвала.
   Генерится из .build/{верх,услуги,люди,низ}.css — руками не править. */

/* ═══════════ верх ═══════════ */
/* ТОМОКО — раскладка секций верха главной:
   полоса-анонс, герой с видео, «Новые возможности».
   Подключать после tokens.css → base.css → components.css.

   Здесь ТОЛЬКО раскладка этих трёх секций. Кнопки, чипы, шапка, навигация,
   круглая кнопка-иконка и сама полоса-анонс описаны в components.css
   и не переопределяются: где компонент не дотягивал, дописан модификатор.
   Теней нет нигде — вся элевация цветом и градиентом. */


/* ═══ 1. Полоса-анонс (Figma 345:33475, 1440×48) ═══════════════════════════
   .tk-announce и .tk-announce__inner живут в components.css:
   оранжевый фон, флекс со space-between, min-height 48.
   Ниже — только поведение двух строк внутри полосы. */

.tk-announce__text,
.tk-announce__link { white-space: nowrap; }

/* ОТКЛОНЕНИЕ МАКЕТА: правая надпись набрана SemiBold,
   тогда как ступень label-14 задаёт Medium. */
.tk-announce__link { font-weight: var(--w-semibold); }
.tk-announce__link:hover,
.tk-announce__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px; /* оптический отступ подчёркивания, токена нет */
}

@media (max-width: 1100px) {
  .tk-announce__text,
  .tk-announce__link { white-space: normal; }
}

/* Модификатор к компоненту: на мобильных полоса разворачивается
   в две строки. Базовый .tk-announce__inner не трогаем. */
@media (max-width: 680px) {
  .tk-announce--stack .tk-announce__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    padding-block: var(--s-3);
  }
}


/* ═══ 2. Герой с видео (Figma 345:33478, 1440×860) ═════════════════════════
   Раскладка колонкой: шапка лежит поверх абсолютом (.tk-header--overlay),
   текст центрируется в свободном пространстве, нижний ряд прижат к низу.
   Абсолютные координаты макета (текст x=115 y=300, кнопки y=746/764)
   в поток переведены намеренно — см. отчёт. */

.tk-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 860px; /* высота кадра героя в макете; токена высоты нет */
  overflow: hidden;
  background: var(--c-ink-green);
  color: var(--c-paper);
}

/* ── Подложка: видео на весь кадр ───────────────────────────────────────── */
.tk-hero__media { position: absolute; inset: 0; z-index: 0; }
.tk-hero__media video,
.tk-hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.tk-hero__fallback { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tk-hero__video { display: none; }
  .tk-hero__fallback { display: block; }
}

/* ── Вуаль (345:33479) и градиент под шапкой (345:33480) ────────────────────
   Теней в системе нет — затемнение собрано из градиентов.
   Токенов прозрачности тоже нет, поэтому альфа берётся от --c-ink-green
   через color-mix; проценты замерены на макете, сырой hex не пишем. */
.tk-hero__veil {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--c-ink-green) 30%, transparent) 0%,
      color-mix(in srgb, var(--c-ink-green)  5%, transparent) 50%,
      color-mix(in srgb, var(--c-ink-green) 72%, transparent) 100%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--c-ink-green) 72%, transparent) 0%,
      color-mix(in srgb, var(--c-ink-green) 22%, transparent) 50%,
      color-mix(in srgb, var(--c-ink-green)  5%, transparent) 100%),
    color-mix(in srgb, var(--c-ink-green) 40%, transparent);
}
.tk-hero__veil::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 22%; /* 190 из 860 в макете — переведено в долю, чтобы жило на адаптиве */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-ink-green) 68%, transparent) 0%,
    transparent 100%);
}

/* ── Шапка поверх видео (345:33489) ─────────────────────────────────────────
   .tk-header--overlay и .tk-header__inner — components.css (высота 88).
   Здесь только три её блока. */
.tk-hero__logo { flex: none; } /* размеры логотипа держат атрибуты width/height */

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

/* ── Текст героя (345:33481) ────────────────────────────────────────────── */
.tk-hero__body {
  position: relative;
  z-index: 2;
  margin-block: auto; /* центрируется в свободном пространстве над нижним рядом */
  padding-top: calc(var(--s-20) + var(--s-2)); /* 88 = высота .tk-header__inner */
}
.tk-hero__eyebrow {
  margin-bottom: var(--s-6);
  opacity: .82; /* замерено на надстрочнике 345:33486, токена прозрачности нет */
  white-space: nowrap;
}
.tk-hero__title {
  /* Ступень display-md: 92px, замерена на артборде героя 345:33478. */
  font-size: var(--t-display-md-size);
  line-height: var(--t-display-md-lh);
  letter-spacing: var(--t-display-md-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
  margin-bottom: var(--s-10); /* в макете 44, ближайший шаг сетки 40 */
}
.tk-hero__lead {
  display: grid;
  gap: var(--s-2);
  max-width: 664px; /* мера строки из макета, токена ширины текста нет */
}

/* ── Нижний ряд: кнопка по центру полотна, пауза по правому полю ─────────── */
.tk-hero__foot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-bottom: var(--s-16);
}
.tk-hero__cta { grid-column: 2; }
.tk-hero__player { grid-column: 3; justify-self: end; }

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tk-hero { min-height: 100svh; }
  /* кегль героя на планшете даёт --t-display-md-size (60px) */
  .tk-hero__nav { display: none; } /* уходит в бургер */
}

@media (max-width: 680px) {
  .tk-hero__title { font-size: 40px; letter-spacing: -0.04em; }
  .tk-hero__eyebrow { white-space: normal; }
  .tk-hero__phone { display: none; }
  .tk-hero__foot {
    grid-template-columns: 1fr auto;
    gap: var(--s-4);
    padding-bottom: var(--s-10);
  }
  .tk-hero__cta    { grid-column: 1; }
  .tk-hero__player { grid-column: 2; }
}


/* ═══ 3. Новые возможности (Figma 345:33537, 1440×958) ═════════════════════
   Отбивки секции держит .tk-section (--s-section сверху и снизу),
   контейнер и поля — .tk-container. Фон бумажный, как у полотна. */

.tk-newops__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-10); /* 40 — точное значение макета */
}

/* ── Заголовок (345:33540) ──────────────────────────────────────────────── */
.tk-newops__title {
  /* Ступень display-sm: 76 / 0.92 / -0.0395em, замерена на макете. */
  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;
}

/* ── Лид и действия (345:33541) ─────────────────────────────────────────── */
.tk-newops__intro {
  display: flex;
  align-items: center;
  gap: var(--s-16);
}
.tk-newops__lead {
  flex: none;
  width: 560px; /* мера строки из макета, токена ширины текста нет */
}
.tk-newops__cta {
  display: flex;
  gap: var(--s-4); /* в макете 15, ближайший шаг сетки 16 */
}

/* ── Макро радужки (345:33548) ──────────────────────────────────────────── */
.tk-newops__figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 1200 / 470;
  background: var(--c-mist); /* подложка до загрузки кадра */
}
.tk-newops__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Затемнение под метрики (345:33549). Не тень, а градиент;
   альфа берётся от токена через color-mix. В макете здесь #0a1a0f 0.85 —
   на единицу по каналу мимо --c-ink-green, беру токен. */
.tk-newops__figure::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%; /* 260 из 470 — доля, чтобы пережить смену пропорции на адаптиве */
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--c-ink-green) 85%, transparent) 100%);
  pointer-events: none;
}

/* ── Метрики (345:33550) ────────────────────────────────────────────────── */
.tk-newops__stats {
  position: absolute;
  z-index: 1; /* поверх ::after */
  left: var(--s-card);
  bottom: var(--s-card);
  display: flex;
  gap: var(--s-16); /* в макете 56, ближайшие шаги 48 и 64 */
  color: var(--c-paper);
  white-space: nowrap;
}
.tk-newops__stats li {
  display: flex;
  flex-direction: column;
  gap: var(--s-2); /* в макете 6, ближайшие шаги 4 и 8 */
}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tk-newops__title { font-size: 52px; }
  .tk-newops__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-8);
  }
  .tk-newops__lead { width: auto; max-width: 560px; }
  .tk-newops__figure { aspect-ratio: 3 / 2; }
  .tk-newops__stats { gap: var(--s-10); }
}

@media (max-width: 680px) {
  .tk-newops__title { font-size: 34px; letter-spacing: -0.03em; }
  .tk-newops__cta { flex-direction: column; align-items: stretch; }
  .tk-newops__figure { aspect-ratio: 4 / 5; }
  .tk-newops__figure::after { height: 60%; }
  .tk-newops__stats {
    flex-direction: column;
    gap: var(--s-4);
    left: var(--s-5);
    bottom: var(--s-5);
  }
}

/* ═══════════ услуги ═══════════ */
/* ТОМОКО — раскладка секций «Услуги», «Новое оборудование», «Прайс».
   Подключать строго после tokens.css, base.css, components.css.

   Здесь ТОЛЬКО раскладка этих трёх секций. Кнопки, вкладки, чипы,
   карточки услуг и строки прайса берутся из components.css как есть
   и не переопределяются: если компонент не совпал с макетом, здесь
   стоит модификатор с префиксом секции, а не правка базового класса.
   Теней нет ни одной — элевация только цветом. */


/* ══ Услуги ═══════════════════════════════════════════════════
   Секция: .tk-section (92/92). В Figma у кадра верхнего поля нет
   (заголовок на y=0, отбивку давала секция выше) — приведено
   к каноническому ритму секций, ради него отклонение принято. */

/* Кикер под названием услуги. В компоненте .tk-card-service такого
   элемента нет — это содержимое конкретно этой секции. */
.tk-services__kicker {
  margin-top: var(--s-2);           /* макет 7px → ближайший шаг сетки 8 */
  color: var(--c-paper-75);   /* --c-paper с альфой 0.75, замер Figma 345:33567;
                                       токена под белый с прозрачностью нет */
}

/* Кнопка догрузки под рядом карточек: просвет 24, как в макете. */
.tk-services__more {
  margin-top: var(--s-gutter);
  display: flex;
  justify-content: center;
}


/* ══ Новое оборудование ═══════════════════════════════════════ */

/* Зелёная плашка на всю ширину контейнера. Градиент тот же, что
   у .tk-final в components.css, только развёрнут по горизонтали
   (замер Figma 345:33603). Крайние стопы #268034 и #17532a в палитре
   отсутствуют, конечная точка — токен --c-forest. */
.tk-equipment__card {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12);
  border-radius: var(--r-card);
  overflow: hidden;
  color: var(--c-paper);
  background: var(--g-green-x);
}

.tk-equipment__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);                  /* 24 между всеми блоками колонки, как в макете */
}

/* Показания. Маркер рисуется псевдоэлементом: SVG-эллипс из макета
   не нужен, это обычный белый круг. */
.tk-equipment__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);                  /* макет 10px → ближайший шаг сетки 12 */
  width: 100%;
}
.tk-equipment__list li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.tk-equipment__list li::before {
  content: "";
  flex: none;
  width: var(--s-2);                /* макет 6px → ближайший шаг сетки 8 */
  height: var(--s-2);
  border-radius: var(--r-pill);
  background: currentColor;
}

/* Сноска про ОМС набрана метрикой label-12, но это предложение,
   а не лейбл: капс с .t-label-sm снимаем, иначе ломается правило
   «капс только на лейблах и кнопках». */
.tk-equipment__note {
  max-width: 616px;                 /* замер Figma; токена ширины текстовой колонки нет */
  text-transform: none;
}

/* Фото 440×400, скругление --r-image (20) — мельче карточного. */
.tk-equipment__media {
  flex: 0 0 440px;                  /* замер Figma; токена ширины медиаколонки нет */
  max-width: 440px;
}
.tk-equipment__media img {
  width: 100%;
  aspect-ratio: 440 / 400;
  object-fit: cover;
  border-radius: var(--r-image);
}


/* ══ Прайс ════════════════════════════════════════════════════ */

/* Просвет вкладки → таблица → сноска. В макете везде 28px,
   приведено к шагу сетки 24 (--s-6). */
.tk-price__panel { margin-top: var(--s-6); }
.tk-price__panel[hidden] { display: none; }

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

/* Строка-шапка колонок использует ту же сетку .tk-price-row,
   поэтому колонки совпадают с данными до пикселя. На мобильном
   .tk-price-row переезжает в две колонки и шапка теряет смысл. */
@media (max-width: 680px) {
  .tk-price__cols { display: none; }
}

/* У последней строки разделитель убираем: он упирался бы
   в нижний край плашки. Правило локальное, .tk-price-row не трогаем. */

.tk-price__footnote {
  margin-top: var(--s-6);           /* макет 28px → шаг сетки 24 */
  max-width: 809px;                 /* замер Figma; токена под ширину сноски нет */
  text-transform: none;             /* .t-label-sm даёт капс, а это предложение */
}


/* ══ Адаптив ══════════════════════════════════════════════════
   Сетка карточек 4→2→1 и перестроение строки прайса уже описаны
   в base.css и components.css. Здесь только то, что специфично
   для этих секций. */

@media (max-width: 1100px) {
  .tk-equipment__card { gap: var(--s-8); padding: var(--s-8); }
  .tk-equipment__media { flex-basis: 340px; }   /* пропорционально сжатая медиаколонка, токена нет */
}

@media (max-width: 680px) {
  /* Карточка оборудования разворачивается в колонку, фото уходит
     наверх, кнопка растягивается на всю ширину. */
  .tk-equipment__card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-6);
    padding: var(--s-card);
  }
  .tk-equipment__media { order: -1; flex-basis: auto; max-width: none; }
  .tk-equipment__text .tk-btn { width: 100%; }
  /* Принудительный перенос в заголовке нужен только на широком экране. */
  .tk-equipment__br { display: none; }
}

/* ═══════════ люди ═══════════ */
/* ТОМОКО — раскладка секций «Врачи», «Ценности», «Отзывы».
   Подключать строго после tokens.css, base.css, components.css:
   часть правил ниже — модификаторы поверх канонических компонентов,
   они работают только при таком порядке (специфичность равная,
   выигрывает то, что объявлено позже).

   Здесь ТОЛЬКО раскладка этих трёх секций. Кнопки, карточка врача,
   карточка ценности, карточка отзыва, точки слайдера и круглые
   кнопки-иконки берутся из components.css как есть и не
   переопределяются: где макет расходится с компонентом, рядом стоит
   модификатор с префиксом секции.
   Теней нет ни одной — элевация только цветом. */


/* ══ Врачи · 345:33678 ════════════════════════════════════════
   Секция обёрнута в канонический .tk-section (92/92). В Figma
   у кадра верхнего поля нет — отбивку сверху давала предыдущая
   секция; приведено к общему ритму страницы, как в «Услугах».
   Сетка карточек — .tk-grid.tk-grid--4, просвет 24 по обеим осям
   уже задан в base.css, отдельного класса ряда не нужно. */

/* Окно портрета становится системой координат для пилюли «К ВРАЧУ»:
   сам .tk-card-doctor__photo позиционирование не задаёт. */
.tk-doctors__photo { position: relative; }

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

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


/* ══ Ценности · 345:33765 ═════════════════════════════════════ */

/* Плитка карточки: в макете 384×336 с заливкой --c-mist, полями 32
   и радиусом 24. Канонический .tk-card-value описывает только колонку
   «иконка → номер → заголовок → текст» с просветом 16, плитки в нём
   нет — она добавлена здесь, базовый класс не трогаем.
   Поля на мобильных сжимаются сами: --s-card в tokens.css 32 → 20. */
.tk-values__card {
  padding: var(--s-card);
  background: var(--c-mist);
  border-radius: var(--r-card);
}


/* ══ Отзывы · 345:33783 ═══════════════════════════════════════ */

/* Карточка площадки (588×103): готового компонента под неё в ките
   нет, это раскладка конкретной секции. Плоская, белая, с волосяной
   рамкой — тени нет, отделяется только обводкой.
   Толщина 1.5px взята из кита (.tk-btn--secondary, .tk-tab). */
.tk-reviews__platform {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-6) var(--s-card);      /* макет 26/32 → ближайший шаг 24 */
  border: var(--bw-outline) solid var(--c-hairline);
  border-radius: var(--r-card);
}

.tk-reviews__logo {
  flex: none;
  width: var(--s-12);                     /* 48 — размер логотипа в макете */
  height: var(--s-12);
}
.tk-reviews__logo img { width: 100%; height: 100%; }

.tk-reviews__platform-data {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.tk-reviews__rating {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-1);
  white-space: nowrap;
}

/* Отбивка блоков секции: в макете 28, шага 28 в ритме нет — берём 24. */
.tk-reviews__slider { margin-top: var(--s-6); }

/* Карточка отзыва тянется до высоты ряда: звёзды сверху, автор снизу.
   Заливку, поля и радиус даёт .tk-card-review. */
.tk-reviews__card {
  height: 100%;
  justify-content: space-between;
}

/* Имя автора внутри .tk-card-review__author: компонент капитализирует
   подпись целиком, а в макете имя — отдельная строка в обычном
   регистре, площадка под ним капсом. Ступень имени — body. */
.tk-reviews__author-name {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls);
  text-transform: none;
  color: var(--c-ink-green);
}

/* Управление слайдером: точки по центру полосы, стрелки справа.
   В макете центр держала фиктивная распорка слева — здесь её роль
   играет пустая первая колонка сетки. */
.tk-reviews__controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: var(--s-6);
}
.tk-reviews__controls .tk-dots { grid-column: 2; justify-content: center; }

.tk-reviews__arrows {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: var(--s-3);
}

/* «Вперёд» — активная стрелка с зелёной заливкой (345:33846).
   У .tk-icon-btn залитого варианта в ките нет; если такая стрелка
   появится ещё где-нибудь, вариант стоит завести в components.css. */
.tk-reviews__next {
  background: var(--c-brand-green);
  border-color: var(--c-brand-green);
  color: var(--c-paper);
}
.tk-reviews__next:hover {
  background: var(--c-green-deep);
  border-color: var(--c-green-deep);
  color: var(--c-paper);
}


/* ══ Адаптив ══════════════════════════════════════════════════
   Сетки 4→2→1 и 3→2→1, поля контейнера и типографическая шкала
   уже перестраиваются в base.css и tokens.css. Здесь только то,
   что специфично для этих секций. */

@media (max-width: 1100px) {
  /* Карточка площадки сужается: название и адрес переезжают
     в отдельную строку над рейтингом и кнопкой. */
  .tk-reviews__platform { flex-wrap: wrap; row-gap: var(--s-4); }
  .tk-reviews__platform-data { flex-basis: 100%; order: -1; }
}

@media (max-width: 680px) {
  /* Кнопка «ЧИТАТЬ» занимает всю ширину карточки площадки. */
  .tk-reviews__platform .tk-btn { flex: 1 1 100%; }

  /* Полоса управления в две колонки: точки слева, стрелки справа. */
  .tk-reviews__controls { grid-template-columns: 1fr auto; }
  .tk-reviews__controls .tk-dots { grid-column: 1; justify-content: flex-start; }
  .tk-reviews__arrows { grid-column: 2; }
}

/* ═══════════ низ ═══════════ */
/* ТОМОКО — раскладка секций низа главной:
   «Акции», «Новости и события», «Оптика», финальный блок (CTA + подвал).
   Подключать строго после tokens.css → base.css → components.css.

   Здесь ТОЛЬКО раскладка этих четырёх секций. Кнопки, чипы, карточка статьи,
   градиентная поверхность финала, колонки и списки подвала, соцкнопки берутся
   из components.css как есть. Где компонент не совпал с макетом, стоит
   модификатор с префиксом секции, а не правка базового класса.
   Теней нет ни одной — элевация только цветом. */


/* ══ Акции · Figma 345:33848 ══════════════════════════════════
   Сетка 3×384 и просвет 24 — это .tk-grid.tk-grid--3.
   Карточка — .tk-card-post: обложка с чипом поверх и заголовок.
   Отличие макета: карточка положена в белую коробку с обводкой. */

.tk-promos__list > li { display: flex; }

.tk-promos__card {
  width: 100%;
  gap: 0;                          /* просвет даёт паддинг коробки, не .tk-card-post */
  background: var(--c-paper);
  border: var(--bw-outline) solid var(--c-hairline);   /* та же толщина, что у .tk-btn--secondary; токена обводки нет */
  border-radius: var(--r-card);
  overflow: hidden;
  transition: background-color .18s ease, border-color .18s ease;
}
.tk-promos__card:hover,
.tk-promos__card:focus-visible {
  background: var(--c-mist);
  border-color: var(--c-brand-green);
}

/* Обложка внутри коробки: собственных скруглений не имеет — углы режет
   карточка, — и кадр здесь шире карточного, 384×230 вместо 282×190. */
.tk-promos__card .tk-card-post__cover {
  border-radius: 0;
  aspect-ratio: 384 / 230;
}

.tk-promos__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-card);          /* макет 26×28 → канонический отступ карточки 32 */
}

/* Бейдж «АКЦИЯ» — оранжевый чип, посаженный на обложку.
   Позиция своя: 20/20 вместо 12/12 у .tk-card-post__date. */
.tk-promos__badge {
  position: absolute;
  top: var(--s-5);
  left: var(--s-5);
}

.tk-promos__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.tk-promos__card:hover .tk-promos__meta .c-brand { color: var(--c-green-deep); }


/* ══ Новости и события · Figma 345:33881 ══════════════════════
   Сетка 4×282 и карточка статьи совпали с китом полностью:
   обложка --r-image, чип даты в левом верхнем углу, заголовок body-lg.
   Здесь только выравнивание карточек по высоте ряда. */

.tk-blog__list > li { display: flex; }

.tk-blog__card { width: 100%; height: 100%; }

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


/* ══ Оптика · Figma 345:33915 ═════════════════════════════════
   Плашка mist с фото слева. Плоская элевация цветом, тени нет. */

.tk-optics__card {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  padding: var(--s-6) var(--s-10) var(--s-6) var(--s-6);
  background: var(--c-mist);
  border-radius: var(--r-card);
}

.tk-optics__media { flex: none; width: 420px; }   /* замер Figma; токена ширины медиаколонки нет */
.tk-optics__media img {
  width: 100%;
  aspect-ratio: 420 / 280;
  object-fit: cover;
  border-radius: var(--r-card);
}

.tk-optics__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;         /* кнопка не растягивается на ширину колонки */
  gap: var(--s-4);
  min-width: 0;
}


/* ══ Финальный блок · Figma 345:33924 ═════════════════════════
   Градиент и шов — .tk-final и .tk-final__seam из components.css.
   Ниже только раскладка CTA, подвала и плашек партнёров. */

/* На градиенте приглушённый текст не может быть --c-fog: base.css
   переключает .c-muted на белый с прозрачностью только внутри
   .tk-section--green/--forest. Здесь поверхность та же, правило то же. */
.tk-final .c-muted { color: var(--c-paper-66); }

/* ── CTA · 345:33925 ── */
.tk-final__cta-inner {
  display: flex;
  align-items: center;
  gap: var(--s-12);                /* макет 56 → шаг сетки 48 */
  padding-block: var(--s-24);      /* макет 100 → шаг сетки 96 */
}
.tk-final__cta-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
}
.tk-final__cta-media { flex: none; width: 520px; }   /* замер Figma; токена нет */
.tk-final__cta-media img {
  width: 100%;
  aspect-ratio: 520 / 380;
  object-fit: cover;
  border-radius: var(--r-card);
}

/* ── Подвал · 345:33934 ──
   Верхнее поле даёт .tk-footer__cols (padding-block --s-16). */
.tk-final__footer { padding-bottom: var(--s-10); }

.tk-final__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
}
.tk-final__address a:hover,
.tk-final__contacts a:hover { color: var(--c-orange); }

.tk-final__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
/* .tk-footer__title несёт margin-bottom 16 — внутри колонки контактов
   просветы задаёт gap, поэтому собственный отступ заголовка снимаем. */
.tk-final__contacts .tk-footer__title { margin-bottom: 0; }
.tk-final__hours { line-height: 1.5; }   /* три строки режима работы, плотность body 1.33 слишком тесная */

/* Плашки партнёров и карты — ряд под колонками. */
.tk-final__marks {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  flex-wrap: wrap;
  padding-bottom: var(--s-12);
}
.tk-final__plates {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.tk-final__plates img {
  border-radius: var(--r-image);   /* макет 16 → ближайший токен 20 */
  object-fit: contain;
}

.tk-final__maps {
  margin-left: auto;
  text-align: right;
}
.tk-final__maps .tk-footer__title { margin-bottom: var(--s-2); }
/* Модификатор к .tk-footer__list: карты стоят строкой через точку,
   а не колонкой. Базовый список не трогаем. */
.tk-final__maps-list {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-2);
}
.tk-final__maps-list li + li::before {
  content: "·";
  margin-right: var(--s-2);
  color: var(--c-paper-40);   /* тот же приём, что у разделителей подвала; токена нет */
}

.tk-final__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-top: var(--s-6);
}
/* Копирайт набран метрикой label-12, но это предложение с номером
   лицензии, а не лейбл: капс снимаем. */
.tk-final__copy {
  max-width: 700px;                /* замер Figma; токена ширины строки нет */
  text-transform: none;
  line-height: 1.5;
}


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

@media (max-width: 1100px) {
  .tk-optics__card { gap: var(--s-8); padding: var(--s-6); }
  .tk-optics__media { width: 340px; }   /* пропорционально сжатая медиаколонка, токена нет */

  .tk-final__cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-10);
    padding-block: var(--s-20);
  }
  .tk-final__cta-media { width: 100%; }

  .tk-final__maps { margin-left: 0; text-align: left; width: 100%; }
  .tk-final__maps-list { justify-content: flex-start; }
}

@media (max-width: 680px) {
  /* Плашка оптики разворачивается в колонку, фото уходит наверх. */
  .tk-optics__card {
    flex-direction: column;
    align-items: stretch;
    padding: var(--s-card);
  }
  .tk-optics__media { width: 100%; order: -1; }
  .tk-optics__body .tk-btn { align-self: stretch; }

  .tk-final__cta-text .tk-btn { align-self: stretch; }
  .tk-final__marks { gap: var(--s-6); padding-bottom: var(--s-8); }
  .tk-final__bottom { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
}

/* Секция CTA внутри финального блока. Своей заливки не имеет — градиент
   даёт .tk-final; здесь только вертикальный ритм и цель якоря #zapis. */
.tk-final__cta { padding-block: var(--s-16); }
@media (max-width: 680px) {
  .tk-final__cta { padding-block: var(--s-12); }
}

.tk-top { position: relative; }