/*
 * Лендинг — по «Лендинг - desktop.dc.html» из прототипа. Значения — только из tokens.css;
 * значения прототипа вне шкал перенесены по колонке «Рекомендация» в docs/tokens-audit.md.
 * Числа px остались только у геометрии: размеры плиток и иконок, фото, иллюстраций, шаг полосок;
 * в @media — числа границ экранов (переменные там не работают, значения — --bp-* в tokens.css).
 */
.landing {
  /* Псевдонимы для мест, где в токенах нет подходящего по смыслу имени: значение берём из токена
     с тем же цветом, чтобы не заводить новых значений. */
  --landing-dark-bg: var(--color-text);              /* neutral-900 — фон подвала и тёмных плашек */
  --landing-on-dark: var(--color-text-on-brand);     /* neutral-0 — текст на тёмном фоне */
  --landing-on-dark-muted: var(--color-border-dashed); /* neutral-300 — второстепенный текст в подвале */
  --landing-dark-divider: var(--color-text-description); /* neutral-700 — линия в подвале */
  --landing-stripes: repeating-linear-gradient(135deg, var(--color-bg-muted) 0 5px, var(--color-border) 5px 10px);

  overflow-x: clip;
}

.container { max-width: var(--container-max); margin: 0 auto; }

/* ---------- Общие куски ---------- */
.section { padding: var(--space-24) var(--space-20); }
.section--surface { background: var(--color-bg-surface); }
.section--page { background: var(--color-bg-page); }
.section__inner { display: flex; flex-direction: column; gap: var(--space-12); }
.section__head { display: flex; flex-direction: column; gap: var(--space-3); max-width: 780px; }

.overline {
  font-size: var(--font-size-overline); line-height: var(--line-height-overline);
  font-weight: var(--font-weight-overline); letter-spacing: var(--letter-spacing-overline);
  text-transform: uppercase; color: var(--color-text-link);
}
.h2 {
  font-family: var(--font-display); font-size: var(--font-size-h2); line-height: var(--line-height-h2);
  font-weight: var(--font-weight-h2); text-transform: uppercase;
}
.h4 { font-size: var(--font-size-h4); line-height: var(--line-height-h4); font-weight: var(--font-weight-h4); }
.lead { font-size: var(--font-size-body-l); line-height: var(--line-height-body-l); text-wrap: pretty; }
.muted { color: var(--color-text-secondary); }

.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: center; }




/* ---------- 01 Hero ---------- */
.hero { padding: var(--space-6) var(--space-6) var(--space-16); display: flex; flex-direction: column; gap: var(--space-16); }

.site-header {
  position: relative; /* на телефоне список уведомлений и меню профиля открываются под шапкой на всю её ширину (components/header.css) */
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2); border: var(--border-width-field) solid var(--brand-divider);
  border-radius: var(--radius-modal);
}
.site-nav { display: flex; gap: var(--space-1); }
.site-nav a {
  white-space: nowrap;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill);
  color: var(--color-text); text-decoration: none; text-transform: uppercase;
  font-size: var(--font-size-nav); line-height: var(--line-height-nav);
  font-weight: var(--font-weight-nav); letter-spacing: var(--letter-spacing-nav);
  transition: background-color var(--duration-instant) var(--ease-standard);
}
.site-nav a:hover { background: var(--color-bg-muted); color: var(--color-text); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
/* «Меню» разделов — только на телефоне */
.site-menu-btn {
  display: none; align-items: center; gap: var(--space-1-5); height: var(--control-height-m); padding: 0 var(--space-4) 0 var(--space-3);
  border: 0; border-radius: var(--radius-pill); background: var(--color-bg-muted); color: var(--color-text); cursor: pointer;
  font-family: var(--font-text); text-transform: uppercase;
  font-size: var(--font-size-nav); line-height: var(--line-height-nav); font-weight: var(--font-weight-nav); letter-spacing: var(--letter-spacing-nav);
}
.site-menu-btn:hover { background: var(--color-border); }
.site-menu-btn .icon--x, .site-menu-btn[aria-expanded="true"] .icon--menu { display: none; }
.site-menu-btn[aria-expanded="true"] .icon--x { display: block; }
/* «Войти» в шапке: прозрачная кнопка, на наведении — кремовая подложка */
.btn--on-brand {
  --btn-text: var(--color-text);
  --btn-bg-hover: var(--color-bg-muted);
  --btn-bg-pressed: var(--color-border);
}

.hero__body { padding: 0 var(--space-10); }
.hero__text { grid-column: span 7; display: flex; flex-direction: column; gap: var(--space-8); }
.hero__title {
  font-family: var(--font-display); font-size: var(--font-size-display-xl); line-height: var(--line-height-display-xl);
  font-weight: var(--font-weight-display-xl); letter-spacing: var(--letter-spacing-display-xl);
  text-transform: uppercase; color: var(--color-text-on-brand); text-wrap: balance;
}
.hero__lead { max-width: var(--measure-lead); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.hero__actions .pill-link { align-self: auto; }

.hero__features {
  list-style: none; margin: 0 var(--space-10); padding: var(--space-8) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6);
  border-top: var(--border-width-field) solid var(--brand-divider);
}
.hero__features li { display: flex; align-items: center; gap: var(--space-3); }
.hero__features .icon-disc { background: var(--color-bg-muted); border: 0; }
.hero__features span:last-child { font-size: var(--font-size-h4); line-height: var(--line-height-h4); font-weight: var(--font-weight-h4); }

/* Иллюстрация hero: геометрия — часть иллюстрации (tokens-audit, «150px», «-14px 14px»). Общие клетки и стикеры — components/brand.css */
.illu--hero { grid-column: span 5; height: 540px; }
.illu__plate {
  position: absolute; left: 50%; top: 56%; width: 300px; height: 300px; margin: -150px 0 0 -150px;
  border: var(--border-width-ink) solid var(--color-border-ink); border-radius: var(--radius-block);
}
.illu__plate--back { transform: translate(36px, 40px) var(--illu-plate); background: var(--color-tag-bg); box-shadow: -14px 14px 0 var(--color-border-ink); }
.illu__plate--mid { transform: translate(18px, 20px) var(--illu-plate); background: var(--color-button-ghost-bg-pressed); }
.illu__plate--top {
  transform: var(--illu-plate); background: var(--color-bg-surface);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2-5); padding: var(--space-4);
}
.illu__sticker--chair { top: 40px; left: 24px; width: 112px; height: 112px; border-radius: var(--radius-modal); background: var(--color-accent); box-shadow: var(--shadow-highlight); transform: rotate(-8deg); }
.illu__sticker--clock { top: 16px; right: 40px; width: 88px; height: 88px; border-radius: var(--radius-pill); background: var(--color-bg-surface); }
.illu--hero .illu__sticker--time { bottom: 48px; right: 16px; }
/* Иконки иллюстраций — часть иллюстрации, не шкала «Размеры иконок» (tokens.css) */
.illu__cell--picked .icon { --icon-size: 22px; }
.illu__sticker--chair .icon { --icon-size: 56px; }
.illu__sticker--clock .icon { --icon-size: 40px; }
.illu__sticker--scissors .icon { --icon-size: 28px; }
.illu__sticker--cal .icon { --icon-size: 32px; }
/* #4E52D6 из прототипа — вне палитры; ближайший токен — secondary-600 */
.illu__sticker--scissors { bottom: 72px; left: 40px; width: 64px; height: 64px; border-radius: var(--radius-panel); background: var(--color-button-secondary-bg); color: var(--color-text-on-brand); transform: rotate(10deg); }

/* ---------- 02 Почему удобно ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.why-card {
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6);
  background: var(--color-bg-page); border: var(--border-width-field) solid var(--color-border); border-radius: var(--radius-panel);
}
.why-card__text { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- 03 Как это работает ---------- */
.steps-panel {
  padding: var(--space-8); background: var(--color-bg-surface);
  border: var(--border-width-field) solid var(--color-border); border-radius: var(--radius-modal);
}
.steps {
  grid-column: span 9; list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6);
}
.step { display: flex; flex-direction: column; gap: var(--space-3); }
.step__bar { height: var(--size-progress); border-radius: var(--radius-pill); background: var(--color-border-ink); }
.step__title { display: flex; align-items: center; gap: var(--space-2); }
.step__num {
  width: var(--size-marker); height: var(--size-marker); flex: none; border-radius: var(--radius-pill);
  background: var(--color-border-ink); color: var(--color-text-on-brand); display: grid; place-items: center;
  font-size: var(--font-size-button); line-height: var(--line-height-single); font-weight: var(--font-weight-button);
}
.step__text { font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); color: var(--color-text-secondary); }
.step--final .step__bar { background: var(--color-button-primary-bg); box-shadow: inset 0 0 0 var(--border-width-field) var(--color-border-ink); }
.step--final .step__title { color: var(--color-text-link); }
.step--final .step__num { background: var(--color-button-primary-bg); border: var(--border-width-button) solid var(--color-border-ink); }
.steps-panel__cta { grid-column: span 3; display: flex; justify-content: flex-end; }

/* ---------- 04 Мастера (карточка — components/master-card.css) ---------- */
.masters-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.masters-more { display: flex; justify-content: center; }

/* ---------- 05 Услуги (чипы категорий — components/chip.css) ---------- */
.services { display: flex; flex-direction: column; gap: var(--space-6); }
.service-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); }
.service-row {
  display: flex; gap: var(--space-3-5); align-items: center; padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-panel); background: var(--color-bg-surface);
  border: var(--border-width-field) solid var(--color-border);
  transition: border-color var(--duration-instant) var(--ease-standard);
}
.service-row:hover { border-color: var(--color-border-ink); }
.service-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.service-row__name { font-size: var(--font-size-body-m); line-height: var(--line-height-label); font-weight: var(--font-weight-h4); }
.service-row__meta {
  display: flex; align-items: center; gap: var(--space-1-5); color: var(--color-text-secondary);
  font-size: var(--font-size-helper); line-height: var(--line-height-single); font-weight: var(--font-weight-helper);
}
.service-row__price { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); white-space: nowrap; }
.service-row__sum { font-size: var(--font-size-h4); line-height: var(--line-height-single); font-weight: var(--font-weight-h4); font-variant-numeric: tabular-nums; }
.service-row__note { font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-caption); color: var(--color-text-secondary); }
.services .message--info { max-width: calc((var(--container-max) - var(--space-6)) / 2); } /* одна колонка списка услуг */

/* ---------- 06 Выбор времени (пример, статический текст) ---------- */
.slots-text { grid-column: span 5; display: flex; flex-direction: column; gap: var(--space-6); }
.slots-text .lead { color: var(--color-text-description); }
.legend { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.legend li { display: flex; align-items: center; gap: var(--space-3); }
.legend__swatch {
  width: 32px; height: 24px; flex: none; border-radius: var(--radius-badge);
  border: var(--border-width-field) solid var(--color-border-field); background: var(--color-bg-surface);
}
.legend__swatch--picked {
  border: var(--border-width-button) solid var(--color-border-ink); background: var(--color-button-primary-bg);
  color: var(--color-text-on-brand); display: grid; place-items: center;
}

.slots-demo {
  grid-column: 7 / span 6; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6);
  background: var(--color-bg-surface); border: var(--border-width-button) solid var(--color-border-ink);
  border-radius: var(--radius-modal); box-shadow: var(--shadow-highlight);
}
.slots-demo__head { display: flex; align-items: center; gap: var(--space-3); }
.avatar {
  width: var(--size-avatar); height: var(--size-avatar); flex: none; border-radius: var(--radius-pill);
  background: var(--color-avatar-bg); color: var(--color-avatar-text); display: grid; place-items: center;
  font-size: var(--font-size-body-m); line-height: var(--line-height-single); font-weight: var(--font-weight-h4);
}
.slots-demo__who { flex: 1; display: flex; flex-direction: column; gap: var(--space-0-5); }
.slots-demo__who b { font-size: var(--font-size-body-m); line-height: var(--line-height-label); }
.slots-demo__who span { font-size: var(--font-size-helper); line-height: var(--line-height-label); color: var(--color-text-secondary); }
.slots-demo__month {
  font-family: var(--font-display); font-size: var(--font-size-h3); line-height: var(--line-height-single);
  font-weight: var(--font-weight-h2); text-transform: uppercase;
}
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1-5); }
.day {
  height: 72px; border-radius: var(--radius-block); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  background: var(--color-bg-surface); border: var(--border-width-field) solid var(--color-border);
}
.day__wd { font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-label); color: var(--color-text-secondary); }
.day__num { font-size: var(--font-size-h3); line-height: var(--line-height-single); font-weight: var(--font-weight-h4); font-variant-numeric: tabular-nums; }
.day--today { border: var(--border-width-button) solid var(--color-border-ink); }
.day--picked { background: var(--color-button-primary-bg); color: var(--color-text-on-brand); border: var(--border-width-button) solid var(--color-border-ink); box-shadow: var(--shadow-chip); }
.day--picked .day__wd { color: inherit; }
.day--off { background: var(--landing-stripes); border: 0; color: var(--color-text-secondary); }
.day--off .day__num { text-decoration: line-through; }
.slots-demo__bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  padding-top: var(--space-4); border-top: var(--border-width-field) solid var(--color-bg-muted);
}
.slots-demo__free { font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-caption); color: var(--color-text-secondary); }
.slot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  height: var(--size-slot); border-radius: var(--radius-field);
  border: var(--border-width-field) solid var(--color-border-field); background: var(--color-bg-surface);
  font-size: var(--font-size-body-l); line-height: var(--line-height-single); font-weight: var(--font-weight-label); font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) var(--ease-spring);
}
.slot:hover { border-color: var(--color-border-ink); transform: translate(var(--shift-hover), var(--shift-hover)); box-shadow: var(--shadow-chip); }
.slot[aria-pressed="true"] {
  border: var(--border-width-button) solid var(--color-border-ink); background: var(--color-button-primary-bg);
  color: var(--color-text-on-brand); box-shadow: var(--shadow-chip); font-weight: var(--font-weight-h4); transform: none;
}
.slot__time { display: flex; align-items: center; gap: var(--space-1-5); }
.slot .icon, .slot__note { display: none; }
.slot[aria-pressed="true"] .icon { display: block; }
.slot[aria-pressed="true"] .slot__note { display: block; font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-label); }

/* ---------- 07 Личный кабинет (пример, статический текст) ---------- */
.account-demo {
  grid-column: span 6; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8);
  background: var(--color-bg-muted); border-radius: var(--radius-modal);
}
.visit {
  display: flex; flex-direction: column; gap: var(--space-3-5); padding: var(--space-4);
  background: var(--color-bg-surface); border: var(--border-width-field) solid var(--color-border); border-radius: var(--radius-card);
}
.visit--next { border: var(--border-width-button) solid var(--color-border-ink); box-shadow: var(--shadow-raised); }
.visit__top { display: flex; gap: var(--space-3-5); align-items: flex-start; }
.date-tile {
  width: var(--size-date-tile-w); height: var(--size-date-tile-h); flex: none; border-radius: var(--radius-block); background: var(--color-bg-muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-0-5);
}
.visit--next .date-tile { background: var(--color-bg-brand); border: var(--border-width-button) solid var(--color-border-ink); }
.date-tile__num { font-family: var(--font-display); font-size: var(--font-size-date-number); line-height: var(--line-height-date-number); font-weight: var(--font-weight-date-number); }
.date-tile__month { font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-button); letter-spacing: var(--letter-spacing-nav); }
.visit__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.visit__info b { font-size: var(--font-size-body-m); line-height: var(--line-height-label); }
.visit__when { font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: var(--size-badge); padding: 0 var(--space-2-5); border-radius: var(--radius-badge);
  font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-button);
  border: var(--border-width-divider) solid;
}
.badge--own { background: var(--color-own-bg); color: var(--color-own-text); border-color: var(--color-own-badge-border); }
.badge--done { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); }
.visit__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  padding-top: var(--space-2-5); border-top: var(--border-width-field) solid var(--color-bg-muted);
}
.visit__sum { font-size: var(--font-size-label); line-height: var(--line-height-single); font-weight: var(--font-weight-label); font-variant-numeric: tabular-nums; }
/* Кнопки в примере не нажимаются: это картинка, а не кабинет */
.visit__action {
  display: inline-flex; align-items: center; gap: var(--space-1-5); height: var(--control-height-m); padding: 0 var(--space-3);
  font-size: var(--font-size-nav); line-height: var(--line-height-single); font-weight: var(--font-weight-nav); letter-spacing: var(--letter-spacing-button);
  text-transform: uppercase; color: var(--color-button-ghost-text);
}
.visit__action--danger { color: var(--color-error-text); }

.account-text { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--space-8); }
.benefits { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.benefits li { display: flex; gap: var(--space-4); align-items: flex-start; }
.benefits li > span:last-child { display: flex; flex-direction: column; gap: var(--space-1); }

/* ---------- 08 Вопросы ---------- */
.faq-grid { align-items: start; }
.faq-head { grid-column: span 4; }
.faq-list { grid-column: 5 / span 8; display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item { background: var(--color-bg-page); border: var(--border-width-field) solid var(--color-border); border-radius: var(--radius-panel); }
.faq-item:has([aria-expanded="true"]) {
  background: var(--color-bg-surface); border: var(--border-width-button) solid var(--color-border-ink); box-shadow: var(--shadow-raised);
}
.faq-item__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  width: 100%; min-height: 72px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
  border: 0; border-radius: var(--radius-panel); background: transparent; text-align: left; cursor: pointer;
}
.faq-item__q .icon-disc .icon--chevron-up { display: none; }
.faq-item__q[aria-expanded="true"] .icon--chevron-up { display: block; }
.faq-item__q[aria-expanded="true"] .icon--chevron-down { display: none; }
.faq-item__a {
  padding: 0 var(--space-20) var(--space-5) var(--space-6);
  font-size: var(--font-size-body-m); line-height: var(--line-height-body-m); color: var(--color-text-description);
}

/* ---------- 09 Финальный призыв ---------- */
.cta { padding: var(--space-16); }
.cta__text { grid-column: span 7; display: flex; flex-direction: column; gap: var(--space-8); }
.cta__title {
  font-family: var(--font-display); font-size: var(--font-size-display-l); line-height: var(--line-height-display-l);
  font-weight: var(--font-weight-display-l); text-transform: uppercase; color: var(--color-text-on-brand);
}
.illu--cta { grid-column: 8 / span 5; height: 340px; display: grid; place-items: center; }
/* #2468CC из прототипа — вне палитры; ближайший токен — info-600 */
.illu__board {
  width: 180px; height: 180px; transform: var(--illu-plate);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2-5); padding: var(--space-3-5);
  background: var(--color-info-text); border: var(--border-width-ink) solid var(--color-border-ink);
  border-radius: var(--radius-block); box-shadow: -14px 14px 0 var(--color-border-ink);
}
.illu__sticker--cal { top: 24px; right: calc(50% - 150px); width: 72px; height: 72px; border-radius: var(--radius-panel); background: var(--color-accent); transform: rotate(8deg); }
.illu__sticker--dot { bottom: 40px; left: calc(50% - 160px); width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--color-bg-surface); }

/* ---------- 10 Подвал ---------- */
.site-footer { padding: var(--space-16) var(--space-20) var(--space-8); background: var(--landing-dark-bg); color: var(--landing-on-dark); }
.site-footer .container { display: flex; flex-direction: column; gap: var(--space-12); }
.site-footer :focus-visible { outline-color: var(--landing-on-dark); }
.footer-grid { align-items: start; }
.footer-brand { grid-column: span 4; display: flex; flex-direction: column; gap: var(--space-5); }
.footer-brand .logo { align-self: flex-start; }
.footer-col { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col__title {
  font-size: var(--font-size-overline); line-height: var(--line-height-overline); font-weight: var(--font-weight-overline);
  letter-spacing: var(--letter-spacing-overline); color: var(--color-accent);
}
.footer-contacts { grid-column: 5 / span 3; color: var(--landing-on-dark-muted); }
.footer-contacts > span:not(.footer-col__title), .footer-contacts > a {
  display: flex; gap: var(--space-2); align-items: center; font-variant-numeric: tabular-nums;
}
.footer-contacts a { color: var(--landing-on-dark-muted); text-decoration: none; }
.footer-contacts a:hover { color: var(--landing-on-dark); text-decoration: underline; }
.footer-nav { grid-column: 9 / span 2; }
.footer-nav a { font-weight: var(--font-weight-caption); color: var(--landing-on-dark); text-decoration: none; }
.footer-nav a:hover { color: var(--landing-on-dark); text-decoration: underline; }
.footer-staff { grid-column: 11 / span 2; }
.footer-staff a {
  display: inline-flex; align-items: center; gap: var(--space-1-5); min-height: var(--control-height-m);
  color: var(--landing-on-dark); text-decoration: none; text-transform: uppercase;
  font-size: var(--font-size-button); line-height: var(--line-height-single); font-weight: var(--font-weight-button); letter-spacing: var(--letter-spacing-button);
}
.footer-staff a:hover { color: var(--landing-on-dark); text-decoration: underline; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-6);
  border-top: var(--border-width-field) solid var(--landing-dark-divider);
  font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-weight: var(--font-weight-caption);
  color: var(--landing-on-dark-muted);
}

/* ---------- Загрузка, ошибка, пусто ---------- */
.load-error { grid-column: 1 / -1; }
.load-error .btn { margin-top: var(--space-2); align-self: flex-start; }
.empty-note { grid-column: 1 / -1; color: var(--color-text-secondary); }

/* Кнопки гостя («Войти», «Регистрация», «Записаться») и клиента не помещаются в строку с разделами: разделы — во вторую строку */
@media (max-width: 1279px) {
  .site-header { flex-wrap: wrap; }
  .site-nav { order: 3; width: 100%; flex-wrap: wrap; }
}

/* ---------- Планшет ---------- */
@media (max-width: 1023px) {
  .section { padding: var(--space-16) var(--space-10); }
  .site-nav a { white-space: nowrap; }
  .hero__body { padding: 0 var(--space-4); }
  .hero__text, .slots-text, .slots-demo, .account-demo, .account-text, .faq-head, .faq-list,
  .cta__text, .footer-brand, .footer-contacts, .footer-nav, .footer-staff { grid-column: 1 / -1; }
  .illu--hero, .illu--cta { display: none; }
  .hero__features { margin: 0 var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid, .masters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-panel__cta { grid-column: 1 / -1; justify-content: flex-start; }
  .account-text { order: -1; }
  .site-footer { padding: var(--space-12) var(--space-10) var(--space-8); }
}

/* ---------- Телефон ---------- */
@media (max-width: 767px) {
  .section { padding: var(--space-12) var(--space-4); }
  .brand-wrap { padding: var(--space-2); }
  .brand-panel { border-radius: var(--radius-modal); }
  .hero { padding: var(--space-3) var(--space-3) var(--space-10); gap: var(--space-10); }
  /* Разделы — выпадающим списком под шапкой на всю её ширину, как колокольчик и меню профиля */
  /* Одна строка: логотип ↔ «Войти» (клиенту — колокольчик и аватар) и «Меню» с краю */
  .site-header__actions { order: 2; margin-left: auto; }
  .site-menu-btn { display: inline-flex; order: 3; }
  /* Круглая, как колокольчик: на 320px логотип, «Войти» и меню умещаются в одну строку */
  @media (max-width: 479px) {
    .site-menu-btn { width: var(--control-height-m); padding: 0; justify-content: center; }
    .site-menu-btn__text { display: none; }
  }
  /* 320–359px: логотип — только знак, иначе «Войти» (клиенту — колокольчик и аватар) не помещаются в строку */
  @media (max-width: 359px) {
    .site-header .logo { padding-right: var(--space-1-5); }
    .site-header .logo__name { display: none; }
  }
  .site-nav, .site-header--client .site-nav {
    position: absolute; left: 0; right: 0; top: calc(100% + var(--space-2)); z-index: var(--layer-popover);
    width: auto; overflow: visible; flex-direction: column; gap: 0; padding: var(--space-1-5);
    background: var(--color-bg-surface); border-radius: var(--radius-block); box-shadow: var(--shadow-popover);
  }
  .site-nav:not(.site-nav--open) { display: none; }
  .site-nav a { display: flex; align-items: center; min-height: var(--control-height-m); padding: 0 var(--space-3); border-radius: var(--radius-cell); }
  .site-header--client .site-header__actions { flex-wrap: wrap; } /* «Записаться», «Мои записи», колокольчик, аватар — как в общей шапке */
  .hero__body { padding: 0 var(--space-2); }
  .hero__features { margin: 0 var(--space-2); grid-template-columns: 1fr; gap: var(--space-4); }
  .why-grid, .masters-grid, .service-list, .steps { grid-template-columns: 1fr; }
  .steps-panel, .account-demo { padding: var(--space-5); }
  .slots-demo { padding: var(--space-4); }
  .days { gap: var(--space-1); }
  .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq-item__a { padding: 0 var(--space-6) var(--space-5); }
  .cta { padding: var(--space-10) var(--space-6); }
  .site-footer { padding: var(--space-12) var(--space-4) var(--space-8); }
  .footer-bottom { flex-direction: column; }
}