/* ════════════════════════════════════════════════════════════════════
   TOGETHER — ДИЗАЙН-СИСТЕМА v2. СЛОЙ КОМПОНЕНТОВ.

   Источник: «Together - Design System v2.dc.html» из Claude Design.
   Макет свёрстан инлайновыми стилями без единого класса — имена ниже
   не цитаты, а перенос той же механики на классы. Значения (размеры,
   отступы, радиусы, тени, длительности, состояния) взяты из макета
   один в один; исключения перечислены в конце tokens.css.

   Ни одного хекса вне tokens.css. Тема одна — светлая.
   ════════════════════════════════════════════════════════════════════ */

@import "fonts.css";

/* ── 0. База ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: var(--w-regular);
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--link); text-decoration: none; transition: color var(--t-instant) ease; }
a:hover { color: var(--link-hover); text-decoration: underline; }

::selection { background: var(--blue-100); color: var(--ink); }

button, input, textarea, select { font-family: var(--font-body); font-size: 100%; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: var(--w-black); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring-strong);
  border-radius: var(--r-sm);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-skip);
  padding: 12px 20px; border-radius: 0 0 var(--r-field) 0;
  background: var(--surface); color: var(--link);
  font-weight: var(--w-bold); box-shadow: var(--shadow-toast);
}
.skip-link:focus { left: 0; }

/* ── 1. Раскладка ──────────────────────────────────────────────────── */
.page-shell { display: flex; flex-direction: column; min-height: 100dvh; }
.page-shell__main { flex: 1; }

.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.section { padding-block: var(--section-gap); }
.section--muted { background: var(--surface); }
.section--tight { padding-block: var(--space-12); }

.section-header {
  display: flex; flex-direction: column; gap: var(--space-3);
  max-width: 780px; margin-bottom: var(--space-8);
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }

/* ── 2. Типографика ────────────────────────────────────────────────── */
.display, h1.display {
  font-family: var(--font-head); font-weight: var(--w-black);
  font-size: var(--display-size); line-height: var(--display-lh);
  letter-spacing: var(--display-ls); color: var(--ink); text-wrap: balance;
}
.display__accent, .h1__accent { color: var(--blue-500); }

h1, .h1 {
  font-size: var(--h1-size); line-height: var(--h1-lh);
  letter-spacing: var(--h1-ls); color: var(--ink); text-wrap: balance;
}
h2, .h2 {
  font-size: var(--h2-size); line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls); color: var(--ink);
}
h3, .h3 {
  font-size: var(--h3-size); line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls); font-weight: var(--w-bold); color: var(--ink);
}
h4, .h4 { font-size: 18px; line-height: 1.3; font-weight: var(--w-bold); color: var(--ink); }

.lead {
  font-size: var(--lead-size); line-height: var(--lead-lh);
  color: var(--text-sub); text-wrap: pretty;
}
.text-small { font-size: var(--small-size); line-height: var(--small-lh); font-weight: var(--w-medium); }
.text-caption { font-size: var(--caption-size); line-height: var(--caption-lh); }
.text-tone-sub { color: var(--text-sub); }
.text-tone-muted { color: var(--text-muted); }
.text-tone-faint { color: var(--text-faint); }
.is-muted { color: var(--text-muted); }
.is-nowrap { white-space: nowrap; }

.eyebrow {
  font-family: var(--font-body); font-weight: var(--w-semibold);
  font-size: var(--overline-size); line-height: 1;
  letter-spacing: var(--overline-ls); text-transform: uppercase;
  color: var(--text-faint);
}

.script {
  font-family: var(--font-script); font-weight: var(--w-semibold);
  font-size: var(--script-size); line-height: var(--script-lh);
  color: var(--blue-500);
}

.link { color: var(--link); font-weight: var(--w-semibold); }
.link--on-blue { color: var(--link-on-blue); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--link); font-weight: var(--w-semibold); text-decoration: none;
}
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow .icon { transition: transform var(--t-fast) var(--ease-standard); }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--link); font-weight: var(--w-semibold); }

.prose { max-width: 720px; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-10); }
.prose h3 { margin-top: var(--space-8); }
.prose p { color: var(--text-sub); text-wrap: pretty; }
.prose ul, .prose ol { padding-left: 1.3em; color: var(--text-sub); }
.prose li + li { margin-top: var(--space-2); }
.prose strong { color: var(--ink); font-weight: var(--w-bold); }

.icon-heading { display: flex; align-items: center; gap: var(--space-3); }

/* ── 3. Иконки ─────────────────────────────────────────────────────── */
.icon { width: 20px; height: 20px; flex: none; stroke-width: 1.6; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }
.icon--tone-success { color: var(--success-text); }
.icon--tone-faint { color: var(--text-faint); }
.icon--tone-accent { color: var(--blue-500); }

.icon-tile {
  width: 52px; height: 52px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-field);
  background: var(--surface-2); border: var(--border-w) solid var(--border-soft);
  color: var(--blue-500);
}
.icon-tile--sm { width: 44px; height: 44px; border-radius: 14px; }
.icon-tile--plain { background: var(--surface); border: 0; }

/* ── 4. Кнопки ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border: 0; border-radius: var(--r-pill);
  font-family: var(--font-head); font-weight: var(--w-bold);
  font-size: 15px; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-standard),
              box-shadow var(--t-fast) ease,
              background var(--t-instant) ease,
              border-color var(--t-instant) ease,
              color var(--t-instant) ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.97) translateY(0); }

.btn--primary {
  background: var(--orange-cta); color: var(--text-on-accent);
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover {
  background: var(--orange-cta-hover); color: var(--text-on-accent);
  transform: translateY(-2px); box-shadow: var(--shadow-cta-hover);
}
.btn--primary:active { box-shadow: var(--shadow-cta-sm); }

.btn--secondary {
  background: var(--blue-600); color: var(--text-on-accent);
  box-shadow: var(--shadow-blue);
}
.btn--secondary:hover { background: var(--blue-700); color: var(--text-on-accent); transform: translateY(-1px); }

.btn--outline {
  background: var(--surface); color: var(--link);
  border: var(--border-w-control) solid var(--border-control-blue);
  padding: 12.5px 24.5px;
}
.btn--outline:hover { background: var(--blue-50); border-color: var(--blue-500); color: var(--link-on-blue); }

.btn--ghost { background: transparent; color: var(--text-sub); font-family: var(--font-body); font-weight: var(--w-semibold); }
.btn--ghost:hover { background: var(--page); color: var(--ink); }

.btn--soft { background: var(--blue-50); color: var(--link-on-blue); }
.btn--soft:hover { background: var(--blue-100); color: var(--link-on-blue); }

.btn--danger { background: var(--error); color: var(--text-on-accent); }
.btn--danger:hover { background: var(--error-text); color: var(--text-on-accent); }

.btn--on-navy { background: var(--surface); color: var(--navy); }
.btn--on-navy:hover { background: var(--blue-50); color: var(--navy); }
.btn--outline-navy {
  background: transparent; color: var(--text-on-accent);
  border: var(--border-w-control) solid rgba(255,255,255,.35);
}
.btn--outline-navy:hover { background: rgba(255,255,255,.12); color: var(--text-on-accent); }

/* Размеры: L·56, M·48 (база), S·36 — как в макете */
.btn--lg { padding: 18px 34px; font-size: 17px; }
.btn--sm { padding: 10px 20px; font-size: 14px; }
.btn--xs { padding: 8px 15px; font-size: 12.5px; }
.btn--full { width: 100%; }
.btn--icon { padding: 0; width: var(--control-md); height: var(--control-md); border-radius: var(--r-pill); }

.btn[disabled], .btn--disabled {
  background: var(--border); color: var(--text-on-disabled);
  box-shadow: none; cursor: not-allowed; transform: none;
}
.btn[disabled]:hover, .btn--disabled:hover { background: var(--border); transform: none; box-shadow: none; }

.btn--loading { background: var(--orange-cta-hover); cursor: progress; }
.btn__spinner {
  width: 16px; height: 16px; flex: none; display: inline-block;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.35);
  border-top-color: var(--text-on-accent);
  animation: tg-spin .8s linear infinite;
}

.btn-group { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.link-button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--link); font-weight: var(--w-semibold); font-family: var(--font-body);
}

/* ── 5. Шапка ──────────────────────────────────────────────────────── */
.page-header { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface); border-bottom: var(--border-w) solid var(--border); }
.page-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  min-height: var(--header-h);
}
.page-header__logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: var(--w-black); font-size: 19px;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
}
.page-header__logo:hover { color: var(--ink); text-decoration: none; }
.page-header__nav { display: flex; align-items: center; gap: 26px; }
.page-header__nav a {
  font-weight: var(--w-semibold); font-size: 15px; color: var(--text-sub); text-decoration: none;
}
.page-header__nav a:hover { color: var(--ink); text-decoration: none; }
.page-header__nav a[aria-current], .page-header__nav a.is-current { color: var(--ink); }
.page-header__cta { display: flex; align-items: center; gap: 14px; }

.brand-mark {
  width: 26px; height: 26px; flex: none;
  border-radius: 50% 50% 50% 42%;
  background: linear-gradient(140deg, var(--blue-400), var(--blue-500) 60%, var(--blue-700));
}
.brand-mark--sm { width: 22px; height: 22px; }

/* Промо-полоса над шапкой */
.promo-bar {
  background: var(--navy); color: var(--text-on-accent);
  padding: 14px 0;
}
.promo-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.promo-bar__title { font-weight: var(--w-bold); font-size: 14.5px; line-height: 1.3; }
.promo-bar__sub { font-weight: var(--w-medium); font-size: 12.5px; color: var(--navy-text); margin-top: 4px; }
.promo-bar__side { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.promo-bar__price { display: flex; align-items: baseline; gap: 8px; }
.promo-bar__now {
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--orange-cta); color: var(--text-on-accent);
  font-family: var(--font-head); font-weight: var(--w-bold); font-size: 14px;
}
.promo-bar__was { font-weight: var(--w-medium); font-size: 12.5px; color: var(--navy-text); text-decoration: line-through; }
.promo-bar__close { background: none; border: 0; cursor: pointer; color: var(--navy-text); display: flex; }

/* Подтабы под шапкой */
.tabs { display: flex; gap: 26px; background: var(--surface-2); border-bottom: var(--border-w) solid var(--border-soft); }
.tabs__tab {
  padding: 14px 0; border: 0; border-bottom: 2px solid transparent; background: none;
  font-weight: var(--w-semibold); font-size: 14px; color: var(--text-muted); cursor: pointer;
  transition: color var(--t-instant) ease, border-color var(--t-instant) ease;
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab.is-active, .tabs__tab[aria-selected="true"] {
  color: var(--ink); font-weight: var(--w-bold); border-bottom-color: var(--blue-500);
}
.tabs__count { margin-left: 6px; color: var(--text-faint); font-weight: var(--w-semibold); }

/* ── 6. Hero ───────────────────────────────────────────────────────── */
.hero { padding-block: var(--space-10) var(--section-gap); }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: stretch; }
.hero__panel {
  position: relative; overflow: hidden;
  border-radius: var(--r-panel); background: var(--blue-200);
  padding: 36px 34px; display: flex; flex-direction: column; gap: 22px;
}
.hero__panel > * { position: relative; }
.hero__panel h1, .hero__panel .display { color: var(--on-panel); }
/* Лид первого экрана. Сам по себе это обычный лид на светлом фоне;
   ширину и цвет под синюю панель он получает только внутри неё. */
.hero__lead { font-size: var(--lead-size); line-height: var(--lead-lh); color: var(--text-sub); max-width: 620px; text-wrap: pretty; }
.hero__panel .hero__lead { font-size: 16.5px; line-height: 1.6; color: var(--on-panel-soft); max-width: 400px; }
.hero__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.hero__media { position: relative; flex: 1; min-height: 380px; border-radius: var(--r-panel); overflow: hidden; background: var(--blue-50); }
.hero__badges { position: absolute; left: 20px; top: 20px; display: flex; gap: 8px; pointer-events: none; }

.blob {
  position: absolute; border-radius: var(--r-blob);
  pointer-events: none; z-index: 0;
}
.blob--blue { background: var(--blue-50); }
.blob--blue-100 { background: var(--blue-100); }
.blob--orange { background: var(--orange-50); }
.blob--white { background: rgba(255,255,255,.28); }

/* Карточка цены с CTA внутри hero */
.price-card {
  padding: 22px; border-radius: var(--r-card); background: var(--surface);
  box-shadow: var(--shadow-float);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.price-card__row { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.price-card__fact { display: flex; align-items: center; gap: var(--space-3); }
.price-card__value { font-family: var(--font-head); font-weight: var(--w-black); font-size: 22px; line-height: 1; color: var(--ink); }
.price-card__label { margin-top: 4px; font-weight: var(--w-medium); font-size: 12px; color: var(--text-faint); }
.price-card__note { font-size: var(--caption-size); line-height: 1.5; color: var(--text-faint); text-align: center; }
.cta-note { font-size: var(--caption-size); line-height: 1.5; color: var(--text-faint); }

.trust-strip {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 14px 16px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.55);
}
.trust-strip__icon {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--surface); color: var(--blue-500);
  display: flex; align-items: center; justify-content: center;
}
.trust-strip__text { font-weight: var(--w-medium); font-size: 13.5px; line-height: 1.4; color: var(--on-panel-soft); }

/* ── 7. Сегмент-контрол ────────────────────────────────────────────── */
.segment {
  display: inline-flex; gap: 4px; padding: 6px;
  border-radius: var(--r-pill); background: var(--page);
  border: var(--border-w) solid var(--border-control);
}
.segment__item {
  padding: 12px 24px; border: 0; border-radius: var(--r-pill); background: none;
  font-weight: var(--w-semibold); font-size: 15px; line-height: 1;
  color: var(--text-muted); cursor: pointer;
  transition: background var(--t-fast) var(--ease-standard), color var(--t-instant) ease;
}
.segment__item:hover { color: var(--text-sub); }
.segment__item.is-active, .segment__item[aria-selected="true"] {
  background: var(--surface); color: var(--ink); font-weight: var(--w-bold);
  box-shadow: var(--shadow-chip);
}
.segment--on-panel { background: rgba(255,255,255,.5); border: 0; padding: 5px; }
.segment--on-panel .segment__item { padding: 10px 20px; font-size: 14px; color: var(--on-panel-soft); }
.segment--on-panel .segment__item.is-active { background: var(--surface); color: var(--ink); box-shadow: none; }

.segment--compact { border-radius: var(--r-field); background: var(--blue-50); padding: 4px; border: 0; }
.segment--compact .segment__item { padding: 10px 18px; border-radius: var(--r-chip); font-size: 14px; color: var(--link-on-blue); }
.segment--compact .segment__item.is-active { background: var(--blue-600); color: var(--text-on-accent); box-shadow: none; }

/* ── 8. Поля ───────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field--full { width: 100%; }
.field__label { font-weight: var(--w-semibold); font-size: 13px; line-height: 1; color: var(--text-sub); }
.field__hint { font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--text-faint); }
.field__control, .textarea__control, .select__control {
  width: 100%; height: var(--field-h); padding: 0 16px;
  border-radius: var(--r-field);
  border: var(--border-w-control) solid var(--border-control);
  background: var(--surface);
  font-weight: var(--w-medium); font-size: 15px; color: var(--ink);
  outline: none;
  transition: border-color var(--t-instant) ease, box-shadow var(--t-fast) ease;
}
.field__control::placeholder, .textarea__control::placeholder { color: var(--text-faint); font-weight: var(--w-regular); }
.field__control:focus, .textarea__control:focus, .select__control:focus,
.field__control:focus-visible, .textarea__control:focus-visible {
  border-color: var(--blue-500); box-shadow: var(--ring);
}
.field__wrap { position: relative; display: flex; align-items: center; }
.field__icon { position: absolute; left: 16px; color: var(--text-faint); pointer-events: none; }
.field__wrap .field__control { padding-left: 46px; }
.field__wrap:focus-within .field__icon { color: var(--blue-500); }
.field__suffix { position: absolute; right: 16px; color: var(--text-faint); font-size: var(--small-size); }

.field--sm .field__control { height: var(--control-md); border-radius: 14px; font-size: 14.5px; }
.field--lg .field__control { height: var(--control-lg); }

.field--error .field__control, .select--error .select__control, .textarea--error .textarea__control {
  border-color: var(--error); background: var(--error-bg);
}
.field--error .field__hint { color: var(--error-text); font-weight: var(--w-medium); }
.field--disabled .field__control { background: var(--surface-2); color: var(--text-disabled); cursor: not-allowed; }

.textarea { display: flex; flex-direction: column; gap: var(--space-2); }
.textarea__control { height: auto; min-height: 104px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
.textarea--autogrow .textarea__control { resize: none; }
.textarea__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.textarea__hint { font-size: var(--caption-size); color: var(--text-faint); }
.textarea__count { font-size: var(--caption-size); color: var(--text-faint); font-variant-numeric: tabular-nums; }

.select { display: flex; flex-direction: column; gap: var(--space-2); position: relative; }
.select__control { appearance: none; padding-right: 44px; cursor: pointer; }
.select__chevron { position: absolute; right: 16px; bottom: 17px; color: var(--text-faint); pointer-events: none; }
.select--sm .select__control { height: var(--control-md); }
.select--lg .select__control { height: var(--control-lg); }

/* ── 9. Переключатели выбора ───────────────────────────────────────── */
.checkbox, .radio {
  display: inline-flex; align-items: flex-start; gap: 10px;
  cursor: pointer; font-weight: var(--w-medium); font-size: 14.5px; color: var(--ink);
}
.checkbox__input, .radio__input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox__box {
  width: 22px; height: 22px; flex: none; border-radius: 7px;
  background: var(--surface); border: var(--border-w-control) solid var(--border-control);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background var(--t-instant) ease, border-color var(--t-instant) ease;
}
.radio__box {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--surface); border: var(--border-w-control) solid var(--border-control);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--t-instant) ease;
}
.radio__box::after {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: var(--blue-500); transform: scale(0);
  transition: transform var(--t-fast) var(--ease-enter);
}
.checkbox__input:checked + .checkbox__box { background: var(--blue-500); border-color: var(--blue-500); color: var(--text-on-accent); }
.radio__input:checked + .radio__box { border-color: var(--blue-500); }
.radio__input:checked + .radio__box::after { transform: scale(1); }
.checkbox__input:focus-visible + .checkbox__box,
.radio__input:focus-visible + .radio__box { box-shadow: var(--ring); }
.checkbox__text, .radio__text { line-height: 1.35; }
.checkbox__label { font-weight: var(--w-medium); }
.checkbox__hint { display: block; margin-top: 3px; font-size: var(--caption-size); color: var(--text-faint); font-weight: var(--w-regular); }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: var(--w-medium); font-size: 14.5px; color: var(--ink); }
.switch__input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 44px; height: 26px; flex: none; padding: 3px;
  border-radius: var(--r-pill); background: var(--border-control);
  display: flex; justify-content: flex-start;
  transition: background var(--t-fast) var(--ease-standard);
}
.switch__thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 1px 3px rgba(16,24,40,.2);
  transition: transform var(--t-fast) var(--ease-standard);
}
.switch__input:checked + .switch__track { background: var(--blue-500); }
.switch__input:checked + .switch__track .switch__thumb { transform: translateX(18px); }
.switch__input:focus-visible + .switch__track { box-shadow: var(--ring); }

/* Карточка-вариант (крупная зона выбора) */
.option-card {
  position: relative; display: flex; gap: var(--space-3);
  padding: 16px 18px; border-radius: var(--r-field);
  background: var(--surface); border: var(--border-w-control) solid var(--border-control);
  cursor: pointer;
  transition: border-color var(--t-instant) ease, background var(--t-instant) ease, box-shadow var(--t-fast) ease;
}
.option-card:hover { border-color: var(--blue-500); background: var(--blue-50); }
.option-card__input { position: absolute; opacity: 0; width: 0; height: 0; }
.option-card__input:checked ~ .option-card__control,
.option-card__input:checked + .option-card__control { border-color: var(--blue-500); }
.option-card:has(.option-card__input:checked) { border-color: var(--blue-500); background: var(--blue-50); box-shadow: var(--ring); }
.option-card__control { flex: none; }

/* ── 10. Чипы и фильтры ────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--surface); border: var(--border-w-control) solid var(--border-control);
  font-weight: var(--w-semibold); font-size: 14px; line-height: 1; color: var(--text-sub);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-standard);
}
.chip:hover { background: var(--blue-50); border-color: var(--blue-500); color: var(--link-on-blue); transform: translateY(-1px); }
.chip.is-active, .chip[aria-pressed="true"] {
  background: var(--blue-600); border-color: var(--blue-600); color: var(--text-on-accent);
}
.chip__count { font-size: 12px; font-weight: var(--w-semibold); color: var(--text-faint); }
.chip.is-active .chip__count { color: rgba(255,255,255,.75); }
.chip--accent { background: var(--orange-50); border-color: var(--orange-200); color: var(--orange-text); }
.chip--accent:hover { background: var(--orange-50); border-color: var(--orange-200); color: var(--orange-text); }

.tag {
  display: inline-flex; align-items: center;
  padding: 6px 11px; border-radius: var(--r-chip);
  background: var(--page); font-weight: var(--w-semibold); font-size: 12px; line-height: 1;
  color: var(--text-sub);
}
.tag--sm { padding: 5px 9px; border-radius: var(--r-sm); font-size: 11px; }
.tag--success { background: var(--success-bg); color: var(--success-text); }
.tag--attention { background: var(--attention-bg); color: var(--attention-text); }

/* ── 11. Плашки статуса ────────────────────────────────────────────── */
.pill, .status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--page); border: var(--border-w) solid var(--border);
  font-weight: var(--w-semibold); font-size: 13px; line-height: 1;
  color: var(--text-muted); white-space: nowrap;
}
.pill--sm, .status-pill--sm { padding: 6px 11px; font-size: 11.5px; }
.pill--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.pill--success, .status-pill--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.pill--info,    .status-pill--info    { background: var(--blue-50);    border-color: var(--blue-200);    color: var(--link-on-blue); }
.pill--accent,  .status-pill--accent  { background: var(--orange-50);  border-color: var(--orange-200);  color: var(--orange-text); }
.pill--warning, .status-pill--warning { background: var(--attention-bg); border-color: var(--attention-border); color: var(--attention-text); }
.pill--danger,  .status-pill--danger  { background: var(--error-bg);   border-color: var(--error-border); color: var(--error-text); }
.pill--neutral, .status-pill--neutral { background: var(--page);       border-color: var(--border);      color: var(--text-muted); }
.pill--float { background: var(--surface); border: 0; box-shadow: 0 2px 8px rgba(16,24,40,.12); }
.pill--glass { background: rgba(255,255,255,.92); border: 0; font-weight: var(--w-bold); font-size: 12.5px; color: var(--ink); }

/* Рейтинги */
.rating {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--r-pill);
  background: var(--page); border: var(--border-w) solid var(--border);
  font-weight: var(--w-bold); font-size: 13.5px; color: var(--ink);
}
.rating__source { font-weight: var(--w-bold); font-size: 11px; color: var(--text-faint); }
.rating__star { color: var(--attention); }

/* ── 12. Аватары ───────────────────────────────────────────────────── */
.avatar {
  width: var(--control-md); height: var(--control-md); flex: none;
  border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-100); color: var(--link-on-blue);
  font-family: var(--font-head); font-weight: var(--w-bold); font-size: 15px; line-height: 1;
}
.avatar--sm { width: 38px; height: 38px; font-size: 13px; }
.avatar--md { width: var(--control-md); height: var(--control-md); }
.avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.avatar--xl { width: 72px; height: 72px; font-size: 24px; }
.avatar--xxl { width: 88px; height: 88px; font-size: 30px; }
.avatar--img { background: var(--blue-50); }
.avatar--img img { width: 100%; height: 100%; object-fit: cover; }
.avatar--grad-0 { background: var(--blue-100);      color: var(--link-on-blue); }
.avatar--grad-1 { background: var(--orange-100);    color: var(--orange-text); }
.avatar--grad-2 { background: var(--success-bg-2);  color: var(--success-text); }
.avatar--grad-3 { background: var(--attention-bg);  color: var(--attention-text); }
.avatar--grad-4 { background: var(--blue-50);       color: var(--link-on-blue); }
.avatar--grad-5 { background: var(--page);          color: var(--text-muted); }

.avatar-wrap { position: relative; display: inline-flex; }
.avatar-dot {
  position: absolute; right: 2px; bottom: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--success); border: 2.5px solid var(--surface);
}
.avatar-stack { display: flex; align-items: center; }
.avatar-stack .avatar { border: 2.5px solid var(--surface); }
.avatar-stack .avatar + .avatar { margin-left: -12px; }

/* ── 13. Карточки ──────────────────────────────────────────────────── */
.card {
  display: flex; flex-direction: column;
  border-radius: var(--r-card); background: var(--surface);
  border: var(--border-w) solid var(--border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-standard), box-shadow var(--t-fast) ease;
}
.card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.card--flat { box-shadow: none; }
.card--inset { background: var(--surface-2); border-color: var(--border-soft); box-shadow: none; }
.card--blue { background: var(--blue-50); border-color: var(--blue-100); }
.card--accent { background: var(--orange-50); border-color: var(--orange-100); }
.card--dashed { background: var(--surface); border: var(--border-w) dashed var(--blue-200); box-shadow: none; }

.card__media { position: relative; height: 200px; background: var(--blue-50); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media--sm { height: 120px; }
.card__header { padding: 20px 22px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.card__header-titles { display: flex; flex-direction: column; gap: 5px; }
.card__title { font-family: var(--font-head); font-weight: var(--w-bold); font-size: 20px; line-height: 1.25; color: var(--ink); }
.card__subtitle { font-weight: var(--w-medium); font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.card__body--sm { padding: 16px 18px; gap: 10px; }
.card__body--lg { padding: 28px; gap: var(--space-5); }
.card__body--none { padding: 0; }
.card__actions {
  margin-top: auto; padding-top: 16px; border-top: var(--border-w) solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.card__link { color: var(--link); font-weight: var(--w-semibold); }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }
.feature-card {
  padding: 20px 22px; border-radius: var(--r-card);
  background: var(--surface-2); border: var(--border-w) solid var(--border-soft);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.feature-card__icon { color: var(--blue-500); }
.feature-card__title { font-family: var(--font-head); font-weight: var(--w-bold); font-size: 16px; line-height: 1.3; color: var(--ink); }
.feature-card__text { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.feature-card--accent { background: var(--orange-50); border-color: var(--orange-100); }
.feature-card--accent .feature-card__text { color: var(--orange-soft); }
.feature-card--blue { background: var(--blue-50); border-color: var(--blue-100); }

/* Тематическая карточка с блобом */
.topic-card {
  position: relative; overflow: hidden;
  padding: 22px; border-radius: var(--r-card);
  background: var(--blue-50); border: var(--border-w) solid var(--blue-100);
  display: flex; flex-direction: column; gap: var(--space-3);
  cursor: pointer;
  transition: box-shadow var(--t-fast) ease, transform var(--t-fast) var(--ease-standard);
}
.topic-card:hover { box-shadow: 0 16px 32px rgba(16,24,40,.1); transform: translateY(-2px); }
.topic-card > * { position: relative; }
.topic-card__title { font-family: var(--font-head); font-weight: var(--w-bold); font-size: 18px; line-height: 1.3; color: var(--ink); }
.topic-card__text { font-size: 14px; line-height: 1.55; color: var(--text-sub); }

/* Отзыв */
.quote-card {
  padding: 24px; border-radius: var(--r-card);
  background: var(--orange-50); border: var(--border-w) solid var(--orange-100);
  display: flex; flex-direction: column; gap: 14px;
}
.quote-card__mark { color: var(--orange-cta-hover); }
.quote-card__text { font-weight: var(--w-medium); font-size: 16px; line-height: 1.6; color: var(--orange-quote); text-wrap: pretty; }
.quote-card__author { margin-top: auto; display: flex; align-items: center; gap: 11px; }
.quote-card__name { font-weight: var(--w-bold); font-size: 14px; line-height: 1.2; color: var(--ink); }
.quote-card__meta { margin-top: 2px; font-weight: var(--w-medium); font-size: 12.5px; color: var(--orange-soft); }

/* Строка списка в каталоге */
.list-card {
  display: flex; gap: 14px; padding: 14px;
  border-radius: var(--r-card); background: var(--surface);
  border: var(--border-w) solid var(--border); box-shadow: var(--shadow-soft);
  transition: transform var(--t-fast) var(--ease-standard), box-shadow var(--t-fast) ease;
}
.list-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.list-card__media { width: 84px; height: 104px; flex: none; border-radius: var(--r-field); overflow: hidden; background: var(--blue-50); }
.list-card__media img { width: 100%; height: 100%; object-fit: cover; }
.list-card__body { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.list-card__name { font-family: var(--font-head); font-weight: var(--w-bold); font-size: 16px; line-height: 1.25; color: var(--ink); }
.list-card__meta { font-weight: var(--w-medium); font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
.list-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.list-card__price { font-family: var(--font-head); font-weight: var(--w-bold); font-size: 15px; color: var(--ink); }

/* ── 14. Числа и факты ─────────────────────────────────────────────── */
.stat-fact {
  padding: 20px 22px; border-radius: var(--r-card);
  background: var(--surface-2); border: var(--border-w) solid var(--border-soft);
}
.stat-fact__number { font-family: var(--font-head); font-weight: var(--w-black); font-size: 30px; line-height: 1; color: var(--ink); }
.stat-fact__label { margin-top: 6px; font-weight: var(--w-medium); font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.stat-fact--blue { background: var(--blue-50); border-color: var(--blue-100); }
.stat-fact--blue .stat-fact__number { color: var(--link-on-blue); }
.stat-fact--blue .stat-fact__label { color: var(--on-blue-50); }
.stat-fact--accent { background: var(--orange-50); border-color: var(--orange-100); }
.stat-fact--accent .stat-fact__number { color: var(--orange-text); }
.stat-fact--accent .stat-fact__label { color: var(--orange-soft); }

.stat-row { display: flex; gap: 22px; flex-wrap: wrap; }
.stat-row__value { font-family: var(--font-head); font-weight: var(--w-black); font-size: 19px; line-height: 1; color: var(--ink); }
.stat-row__label { margin-top: 4px; font-weight: var(--w-medium); font-size: 11.5px; color: var(--text-faint); }

/* ── 15. Уведомления ───────────────────────────────────────────────── */
.banner {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: 16px 18px; border-radius: var(--r-card);
  background: var(--surface); border: var(--border-w) solid var(--border);
}
.banner__icon {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-chip);
  display: flex; align-items: center; justify-content: center;
  background: var(--page); color: var(--text-muted);
}
.banner__body { flex: 1; }
.banner__title, .banner__text { font-weight: var(--w-bold); font-size: 14.5px; line-height: 1.3; color: var(--ink); }
.banner__title + .banner__text, .banner__desc {
  margin-top: 3px; font-weight: var(--w-regular); font-size: 13px; line-height: 1.45; color: var(--text-muted);
}
.banner__action { flex: none; }
.banner__dismiss { background: none; border: 0; cursor: pointer; color: var(--text-disabled); display: flex; }
.banner--success { border-color: var(--success-border); box-shadow: var(--shadow-toast); }
.banner--success .banner__icon { background: var(--success-bg); color: var(--success-text); }
.banner--info { border-color: var(--blue-200); box-shadow: var(--shadow-toast); }
.banner--info .banner__icon { background: var(--blue-50); color: var(--link-on-blue); }
.banner--warning { background: var(--attention-bg); border-color: var(--attention-border); }
.banner--warning .banner__icon { background: var(--surface); color: var(--attention-text); }
.banner--warning .banner__desc, .banner--warning .banner__title + .banner__text { color: var(--attention-text-2); }
.banner--danger { background: var(--error-bg); border-color: var(--error-border); }
.banner--danger .banner__icon { background: var(--surface); color: var(--error-text); }

.toast {
  display: flex; gap: var(--space-3); align-items: center;
  padding: 14px 16px; border-radius: var(--r-field);
  background: var(--surface); border: var(--border-w) solid var(--success-border);
  box-shadow: var(--shadow-toast);
  animation: tg-slide-in var(--t-base) var(--ease-enter) both;
}
.toast__icon {
  width: 32px; height: 32px; flex: none; border-radius: 11px;
  background: var(--success-bg); color: var(--success-text);
  display: flex; align-items: center; justify-content: center;
  animation: tg-tick .28s var(--ease-enter) .08s both;
}
.toast__text { flex: 1; font-weight: var(--w-semibold); font-size: 13.5px; line-height: 1.35; color: var(--ink); }

/* ── 16. Модалка ───────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--scrim); animation: tg-fade var(--t-base) ease both;
  display: flex; align-items: center; justify-content: center; padding: var(--space-6);
}
.modal {
  position: relative; z-index: var(--z-modal);
  width: 100%; max-width: 420px;
  border-radius: 28px; background: var(--surface);
  box-shadow: var(--shadow-modal);
  padding: 28px; display: flex; flex-direction: column; gap: var(--space-5);
  animation: tg-scale-in var(--t-slow) var(--ease-enter) both;
}
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.modal__title { font-family: var(--font-head); font-weight: var(--w-black); font-size: 22px; line-height: 1.25; color: var(--ink); }
.modal__sub { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.modal__close { background: none; border: 0; cursor: pointer; color: var(--text-disabled); display: flex; }
.modal__summary {
  padding: 16px; border-radius: 18px;
  background: var(--surface-2); border: var(--border-w) solid var(--border-soft);
  display: flex; flex-direction: column; gap: 9px;
}
.modal__row { display: flex; justify-content: space-between; gap: var(--space-4); }
.modal__row dt, .modal__row-key { font-weight: var(--w-medium); font-size: 13.5px; color: var(--text-muted); }
.modal__row dd, .modal__row-val { font-weight: var(--w-semibold); font-size: 13.5px; color: var(--ink); }
.modal__actions { display: flex; gap: 10px; }

/* ── 17. Пустое состояние ──────────────────────────────────────────── */
.empty-state {
  position: relative; overflow: hidden;
  padding: 34px 28px; border-radius: var(--r-card);
  background: var(--surface-2); border: var(--border-w) dashed var(--blue-200);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  text-align: center;
}
.empty-state > * { position: relative; }
.empty-state--compact { padding: 22px 20px; }
.empty-state__icon {
  width: 56px; height: 56px; border-radius: var(--space-5);
  background: var(--surface); color: var(--blue-400);
  display: flex; align-items: center; justify-content: center;
}
.empty-state__title { font-family: var(--font-head); font-weight: var(--w-bold); font-size: 18px; line-height: 1.3; color: var(--ink); }
.empty-state__desc { max-width: 320px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.empty-state__action { margin-top: 4px; }

/* ── 18. Скелетоны ─────────────────────────────────────────────────── */
.skeleton { border-radius: var(--r-sm); background: var(--border-soft); animation: tg-pulse 1.4s ease infinite; }
.skeleton--text { height: 12px; }
.skeleton--title { height: 16px; }
.skeleton--avatar { width: 72px; height: 72px; border-radius: 50%; flex: none; }
.skeleton--pill { width: 110px; height: 40px; border-radius: var(--r-pill); flex: none; }
.skeleton--shimmer {
  background: linear-gradient(100deg, var(--border-soft) 30%, var(--surface-2) 50%, var(--border-soft) 70%);
  background-size: 220% 100%;
  animation: tg-shimmer 1.4s linear infinite;
}
.skeleton-rows { display: flex; flex-direction: column; gap: 10px; }
.skeleton-rows__row {
  display: flex; gap: 14px; align-items: center;
  padding: 14px; border-radius: 18px;
  background: var(--surface); border: var(--border-w) solid var(--border-soft);
}

/* ── 19. Выбор даты и времени ──────────────────────────────────────── */
.booking { padding: 24px; border-radius: var(--r-card); background: var(--surface-2); border: var(--border-w) solid var(--border-soft); display: flex; flex-direction: column; gap: 18px; }
.booking__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.booking__title { font-family: var(--font-head); font-weight: var(--w-bold); font-size: 17px; color: var(--ink); }
.booking__meta { font-weight: var(--w-medium); font-size: 13px; color: var(--text-faint); }
.day-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.day {
  padding: 12px 0; border-radius: var(--r-field); text-align: center; cursor: pointer;
  background: var(--surface); border: var(--border-w-control) solid var(--border-control);
  transition: all var(--t-fast) var(--ease-standard);
}
.day__dow { font-weight: var(--w-semibold); font-size: 11.5px; line-height: 1; color: var(--text-faint); }
.day__num { margin-top: 6px; font-family: var(--font-head); font-weight: var(--w-bold); font-size: 17px; line-height: 1; color: var(--ink); }
.day:hover { border-color: var(--blue-500); }
.day.is-active { background: var(--blue-500); border-color: var(--blue-500); box-shadow: var(--shadow-blue-sm); }
.day.is-active .day__dow { color: rgba(255,255,255,.8); }
.day.is-active .day__num { color: var(--text-on-accent); }
.day.is-disabled { background: var(--page); border-color: var(--border-soft); cursor: not-allowed; }
.day.is-disabled .day__dow, .day.is-disabled .day__num { color: var(--text-disabled); }

.slots { display: flex; gap: 10px; flex-wrap: wrap; }
.slot {
  padding: 11px 18px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: var(--border-w-control) solid var(--border-control);
  font-weight: var(--w-semibold); font-size: 14px; line-height: 1; color: var(--ink);
  transition: all var(--t-fast) var(--ease-standard);
}
.slot:hover { border-color: var(--blue-500); color: var(--link); }
.slot.is-active { background: var(--blue-500); border-color: var(--blue-500); color: var(--text-on-accent); }
.slot.is-taken { background: var(--page); border-color: var(--border-soft); color: var(--text-disabled); text-decoration: line-through; cursor: not-allowed; }

/* ── 20. Шаги и прогресс ───────────────────────────────────────────── */
.progress { height: 8px; border-radius: var(--r-pill); background: var(--border); overflow: hidden; }
.progress__fill { height: 100%; border-radius: var(--r-pill); background: var(--blue-500); transition: width var(--t-slow) var(--ease-standard); }
.progress__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.progress__step { font-weight: var(--w-semibold); font-size: 12.5px; color: var(--text-faint); }
.progress__hint { font-weight: var(--w-semibold); font-size: 12.5px; color: var(--link); }

.steps { display: flex; align-items: center; gap: 8px; }
.steps__item {
  width: 36px; height: 36px; border-radius: var(--r-chip);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: var(--border-w-control) solid var(--border-control);
  font-weight: var(--w-semibold); font-size: 14px; color: var(--text-sub);
  cursor: pointer; transition: all var(--t-fast) var(--ease-standard);
}
.steps__item.is-active { background: var(--blue-500); border-color: var(--blue-500); color: var(--text-on-accent); font-weight: var(--w-bold); }
.steps__gap { padding: 0 4px; font-weight: var(--w-semibold); font-size: 14px; color: var(--text-faint); }

/* ── 21. Таймлайн ──────────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; }
.timeline__item { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-4); }
.timeline__rail { position: relative; display: flex; flex-direction: column; align-items: center; }
.timeline__dot {
  width: 14px; height: 14px; flex: none; border-radius: 50%; margin-top: 5px;
  background: var(--blue-500); border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px var(--blue-200);
}
.timeline__dot--accent  { background: var(--orange-cta); box-shadow: 0 0 0 1.5px var(--orange-200); }
.timeline__dot--success { background: var(--success);    box-shadow: 0 0 0 1.5px var(--success-border); }
.timeline__dot--warning { background: var(--attention);  box-shadow: 0 0 0 1.5px var(--attention-border); }
.timeline__dot--danger  { background: var(--error);      box-shadow: 0 0 0 1.5px var(--error-border); }
.timeline__dot--live { position: relative; }
.timeline__dot--live::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: var(--success); animation: tg-breathe 2s ease-out infinite; z-index: -1;
}
.timeline__line { flex: 1; width: 2px; background: var(--border); margin-block: 4px; }
.timeline__content { padding-bottom: var(--space-6); }
.timeline__heading { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.timeline__title { font-family: var(--font-head); font-weight: var(--w-bold); font-size: 16px; line-height: 1.3; color: var(--ink); }
.timeline__time { font-weight: var(--w-medium); font-size: 12.5px; color: var(--text-faint); }
.timeline__desc { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.timeline__item.is-last .timeline__line { display: none; }
.timeline__item.is-last .timeline__content { padding-bottom: 0; }
.timeline--numbered .timeline__dot {
  width: 28px; height: 28px; margin-top: 0; border: 0; box-shadow: none;
  background: var(--blue-50); color: var(--link-on-blue);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: var(--w-bold); font-size: 13px;
}
.timeline--horizontal { flex-direction: row; gap: var(--gutter); }
.timeline--horizontal .timeline__item { grid-template-columns: 1fr; }
.timeline--horizontal .timeline__rail { flex-direction: row; }
.timeline--horizontal .timeline__line { width: auto; height: 2px; flex: 1; margin: 6px 0 0 8px; }

/* ── 22. Таблицы ───────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--r-card); border: var(--border-w) solid var(--border); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; }
.table__head-cell {
  padding: 14px 18px; text-align: left;
  background: var(--surface-2); border-bottom: var(--border-w) solid var(--border);
  font-weight: var(--w-semibold); font-size: 12px; letter-spacing: var(--overline-ls);
  text-transform: uppercase; color: var(--text-faint); white-space: nowrap;
}
.table__row + .table__row .table__cell { border-top: var(--border-w) solid var(--border-soft); }
.table__cell { padding: 16px 18px; font-size: 14px; line-height: 1.5; color: var(--text-sub); vertical-align: top; }
.table__cell strong { color: var(--ink); font-weight: var(--w-semibold); }
.table--compact .table__cell { padding: 11px 14px; font-size: 13.5px; }

/* ── 23. Списки-галочки ────────────────────────────────────────────── */
.check-list { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.check-list li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.55; color: var(--text-sub); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--success-bg) center / 12px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A4F' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.check-list--dont li::before {
  background-color: var(--error-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C93A3F' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/* ── 24. Тёмная панель (навигация записи, промо внутри страницы) ───── */
.navy-panel {
  padding: 20px 22px; border-radius: 28px; background: var(--navy);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.navy-panel__title { font-family: var(--font-head); font-weight: var(--w-bold); font-size: 15px; line-height: 1.2; color: var(--text-on-accent); }
.navy-panel__meta { margin-top: 5px; font-weight: var(--w-medium); font-size: 13px; color: var(--navy-text); }
.navy-panel__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── 25. Подвал ────────────────────────────────────────────────────── */
.site-footer { background: var(--navy); color: var(--navy-text-strong); padding-block: var(--space-16) var(--space-8); margin-top: var(--section-gap); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-8); }
.site-footer__brand { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__brand .page-header__logo { color: var(--text-on-accent); }
.site-footer__nav { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.site-footer__nav a { color: var(--navy-text-strong); font-size: 14px; }
.site-footer__nav a:hover { color: var(--text-on-accent); }
.site-footer__nav-title {
  font-weight: var(--w-semibold); font-size: var(--overline-size);
  letter-spacing: var(--overline-ls); text-transform: uppercase; color: var(--navy-text);
  margin-bottom: 4px;
}
.site-footer__helpline {
  padding: 16px 18px; border-radius: var(--r-field);
  background: rgba(255,255,255,.07); border: var(--border-w) solid rgba(255,255,255,.12);
  font-size: 14px; line-height: 1.6;
}
.site-footer__helpline strong { color: var(--text-on-accent); }
.site-footer__disclaimer { font-size: 13px; line-height: 1.6; color: var(--navy-text); }
.site-footer__bottom {
  margin-top: var(--space-10); padding-top: var(--space-6);
  border-top: var(--border-w) solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  font-size: 13px; color: var(--navy-text);
}

/* ── 26. Появление на скролле ──────────────────────────────────────── */
.reveal { animation: tg-rise var(--t-slow) var(--ease-enter) both; }
.reveal:nth-child(2) { animation-delay: calc(var(--t-stagger) * 1); }
.reveal:nth-child(3) { animation-delay: calc(var(--t-stagger) * 2); }
.reveal:nth-child(4) { animation-delay: calc(var(--t-stagger) * 3); }
.reveal:nth-child(5) { animation-delay: calc(var(--t-stagger) * 4); }
.reveal:nth-child(6) { animation-delay: calc(var(--t-stagger) * 5); }

/* Живые индикаторы */
.spinner { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 3px solid var(--blue-100); border-top-color: var(--blue-500); animation: tg-spin .8s linear infinite; }
.online-dot { position: relative; width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; }
.online-dot::before { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--success); animation: tg-breathe 2s ease-out infinite; }
.online-dot::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--success); }

/* ── 27. Служебное ─────────────────────────────────────────────────── */
.dev-note {
  padding: 14px 16px; border-radius: var(--r-field);
  background: var(--attention-bg); border: var(--border-w) solid var(--attention-border);
  font-size: 13px; line-height: 1.55; color: var(--attention-text-2);
}

.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-14 { margin-top: 56px; }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: var(--space-20); }

/* ── 28. Адаптив ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { min-height: 300px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .container { padding-inline: var(--page-pad-mobile); }
  .section { padding-block: var(--space-12); }
  .display, h1.display { font-size: 34px; }
  h1, .h1 { font-size: 28px; }
  h2, .h2 { font-size: 24px; }
  h3, .h3 { font-size: 19px; }
  .lead { font-size: 16px; }
  .two-col { grid-template-columns: 1fr; }
  .page-header__nav { display: none; }
  .hero__panel { padding: 26px 20px; }
  .day-grid { grid-template-columns: repeat(3, 1fr); }
  .segment { width: 100%; }
  .segment__item { flex: 1; padding: 12px 10px; font-size: 14px; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .table__cell, .table__head-cell { padding: 12px 14px; }
  .modal { padding: 22px; }
}