/* ============================================================
   DentUp Audit — лендинг /. Светлая «бумажная» тема на токенах
   из tokens.css. Брейкпоинты: 640 / 768 / 1024 / 1280 / 1536.
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
  min-width: 0;
}

main,
footer,
.topbar {
  min-width: 0;
  max-width: 100%;
}

a {
  color: var(--accent);
}
a:hover {
  color: var(--accent-strong);
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--leading-tight);
  color: var(--accent-strong);
  margin: 0 0 var(--space-4);
  overflow-wrap: break-word;
}

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

/* ---------- Шапка ---------- */
/* Отступ сверху и sticky-top = margin-top: шапка «плавает» карточкой,
   а не прилипает к краю экрана. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* Фидбек владельца: карточка шапки не прилипает к краям экрана —
     16px по бокам на любом экране, центрирование на широких. */
  width: min(100% - var(--space-4) * 2, var(--container-landing));
  margin: var(--space-3) auto 0;
  padding: var(--space-3) var(--space-5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  position: sticky;
  top: var(--space-3);
  z-index: 40;
  box-shadow: var(--shadow-card);
}
.topbar .brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--accent-strong);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.topbar .brand b {
  font-family: var(--font-display);
  font-weight: 800;
}
.topbar .brand i {
  font-style: normal;
  color: var(--ink-muted);
}
.topbar .brand strong {
  color: var(--ink);
  font-weight: 600;
}
.topbar-nav {
  display: flex;
  gap: var(--space-4);
  /* Фидбек владельца: навигация держится по центру, CTA прижата
     к переключателю темы (auto-отступ вокруг nav). */
  margin-inline: auto;
}
/* Фидбек владельца: на мобиле/планшете переключатель прижат к бургеру —
   space-between раздвигал brand | toggle | burger по всей ширине.
   Только ≤1024: на десктопе авто-марджин делил место с nav-центровкой
   и отталкивал CTA от переключателя. */
@media (max-width: 1024px) {
  .topbar .theme-toggle {
    margin-left: auto;
  }
}
.topbar-nav a {
  position: relative;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  padding: var(--space-2) 0;
}
.topbar-nav a:hover {
  color: var(--accent-strong);
}
.topbar-nav a:focus-visible::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--teal-500);
}
/* Бургер и сокращённый логотип — только мобильная шапка. */
.topbar-burger {
  display: none;
}
.topbar-burger .icon-close {
  display: none;
}
.topbar.menu-open .topbar-burger .icon-menu {
  display: none;
}
.topbar.menu-open .topbar-burger .icon-close {
  display: block;
}
.brand-mini {
  display: none;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-9));
  z-index: 50;
  padding: var(--space-2) var(--space-4);
  background: var(--teal-700);
  color: var(--white);
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}
.skip-link:focus-visible {
  top: var(--space-2);
}
.skip-link:hover {
  background: var(--teal-500);
  color: var(--white);
}

/* ---------- Каркас секций ---------- */
main > section {
  max-width: var(--container-landing);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
}
.section {
  display: grid;
  gap: var(--space-6);
}

.section-heading {
  display: grid;
  /* Фидбек владельца: надзаголовок прижат к заголовку — 6px,
     был 28px (p-margin 16px + gap 12px складывались). */
  gap: 0;
  max-width: 62ch;
}
.section-heading p:last-child {
  margin: var(--space-3) 0 0;
  color: var(--ink-soft);
}
/* Единый стиль всех надзаголовков проекта (референс владельца):
   14px / 400, 6px до заголовка. */
.eyebrow {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 400;
}
.section-note {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  margin: 0;
}

/* Полоса методологии: зелёный фон — во всю ширину экрана,
   текст остаётся в контейнере лендинга. */
.strip {
  max-width: none;
  padding-inline: 0;
  background: var(--teal-700);
  color: var(--white);
}
.strip p {
  margin: 0 auto;
  max-width: min(var(--container-landing), 100%);
  padding-inline: var(--space-5);
  /* Фидбек владельца: проза методологии — тем же рукописным Caveat,
     что и числа-акценты (кириллический сабсет в tokens.css).
     Владелец: тоньше и меньше — Caveat 500, text-xl. */
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.3;
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-8);
}
.hero h1 {
  font-size: var(--text-3xl);
  text-wrap: balance;
}
.hero h1 span {
  color: var(--accent);
}
.hero-copy {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}
.hero-copy .lead {
  margin: 0;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.hero-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  padding: var(--space-4);
  background: var(--teal-tint);
  border-radius: var(--radius-md);
}
.hero-note > .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--accent-strong);
}
.hero-note strong {
  font-size: var(--text-sm);
  color: var(--tint-ink);
}
.hero-note p {
  grid-column: 2;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.hero-points span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.hero-points .icon {
  color: var(--accent);
}
.hero-points b {
  /* Рукописные цифры (Caveat компактный — размер увеличен). */
  font-family: var(--font-hand);
  font-weight: 700;
  color: var(--accent-strong);
  font-size: var(--text-lg);
}

/* Карта развития: фотография вместо декоративного зелёного блока */
.hero-map {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  min-width: 0;
}
.hero-map img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Видео-вводный блок ---------- */
.intro-broadcast {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-7);
}
.intro-broadcast-copy ul {
  margin: 0 0 var(--space-5);
  display: grid;
  gap: var(--space-2);
  color: var(--ink-soft);
}
.intro-broadcast-cover {
  position: relative;
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  min-width: 0;
}
.intro-broadcast-cover img {
  display: block;
  width: 100%;
  height: auto;
}
.intro-broadcast-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 45%,
    rgb(13 61 51 / 0.85) 100%
  );
}
.intro-broadcast-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: var(--space-1) var(--space-3);
  background: rgb(26 26 26 / 0.65);
  color: var(--white);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
}
.intro-broadcast-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  display: grid;
  place-items: center;
  /* Фидбек владельца: круг меньше — перекрывал полкадра. */
  width: calc(var(--space-7) * 1.2);
  height: calc(var(--space-7) * 1.2);
  background: var(--lime-500);
  color: var(--teal-900);
  border-radius: 50%;
}
.intro-broadcast-play .icon {
  width: 20px;
  height: 20px;
}
.intro-broadcast-caption {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  display: grid;
  gap: var(--space-1);
  color: var(--white);
}
.intro-broadcast-caption small {
  font-size: var(--text-xs);
  color: var(--teal-tint-ink);
}
.intro-broadcast-caption b {
  font-size: var(--text-md);
}

/* ---------- Awareness ---------- */
.awareness-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.awareness-grid article {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  /* Фото прижато к краям карточки: верхние углы срезает скругление. */
  overflow: hidden;
}
/* Фото во всю ширину карточки (аналог карточек «Что ещё будет в разборе»):
   без отступов сверху и по бокам, скругление только в нижних углах. */
.card-media {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-2);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
}
.card-media img {
  display: block;
  width: 100%;
  height: auto;
  /* Нативный drag картинки перехватывает жест мыши — выключаем. */
  user-select: none;
  -webkit-user-drag: none;
}
.awareness-grid h3 {
  font-size: var(--text-lg);
  margin: 0;
}
.awareness-grid p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

/* ---------- Учебный модуль стадий ---------- */
.stage-learning {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.stage-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-1);
  margin: calc(-1 * var(--space-1));
  list-style: none;
  min-width: 0;
  /* PRD v2 §D5: колонка табов прилипает и скроллится сама,
     панель листается отдельно (скриншот владельца №2).
     top = высота плавающей шапки (≈64px) + её отступ сверху (12px) + зазор. */
  position: sticky;
  top: 100px;
  max-height: calc(100dvh - 116px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.stage-list button {
  display: grid;
  /* Фидбек владельца: таб без иконки — рукописный номер и текст. */
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
}
.stage-list button:hover {
  border-color: var(--teal-300);
}
.stage-list button .stage-num {
  /* Рукописные цифры — акцент таба, крупнее остального текста. */
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--ink-muted);
}
.stage-list button .stage-tab-text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.stage-list button b {
  color: var(--ink);
  font-size: var(--text-sm);
}
.stage-list button small {
  color: var(--ink-muted);
  font-size: var(--text-xs);
}
.stage-list button.active {
  background: var(--teal-700);
  border-color: var(--teal-700);
  color: var(--white);
}
.stage-list button.active .stage-num,
.stage-list button.active small {
  color: var(--teal-tint-ink);
}
.stage-list button.active b {
  color: var(--white);
}
.stage-list button.active {
  box-shadow: var(--shadow-card);
}

.stage-panel {
  display: grid;
  /* minmax(0,1fr): auto-трек раздувался min-content вложенных сеток
     и выталкивал шапку панели за контейнер (PRD v2 §D5). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  min-width: 0;
  scroll-margin-top: 100px;
}
.stage-panel.stage-fade {
  animation: stage-fade 140ms ease-out;
}
@keyframes stage-fade {
  from {
    opacity: 0.4;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage-panel.stage-fade {
    animation: none;
  }
}
.stage-panel h3 {
  overflow-wrap: normal;
  hyphens: auto;
}
/* Фидбек владельца: без плитки-номера и подписи «Учебный модуль DentUp» —
   номер уже виден в активном табе, стадия дублировалась трижды. */
.stage-panel-head {
  display: grid;
  gap: var(--space-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-4);
}
.stage-panel-head h3 {
  margin: 0;
  font-size: var(--text-xl);
}
.stage-panel-head p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.stage-video {
  min-width: 0;
  display: grid;
}
.video-placeholder {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--teal-tint);
  border-radius: var(--radius-md);
  text-align: left;
}
.video-placeholder b {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--tint-ink);
}
.video-placeholder b .icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.video-placeholder small {
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
.video-placeholder p {
  margin: 0;
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
.video-placeholder .button {
  justify-self: start;
  margin-top: var(--space-2);
}

.stage-summary {
  margin: 0;
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: var(--text-lg);
}

/* Вложенные разделы панели */
.stage-panel section > header {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.stage-panel h4 {
  font-size: var(--text-lg);
  margin: 0;
}
.stage-panel section > header p {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}
.stage-panel h5 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-md);
  color: var(--accent-strong);
  margin: 0 0 var(--space-2);
}

/* Фидбек владельца: смысловые разделы панели отделяем воздухом крупнее
   базового гэпа (24px) — чтобы без карточек-обёрток читалось, где один
   блок заканчивается и начинается другой. Итог: 24 + 32 = 56px. */
.stage-panel > .stage-career-decision,
.stage-panel > .stage-organization,
.stage-panel > .stage-dentistry,
.stage-panel > .stage-clinic-profile,
.stage-panel > .stage-maturity,
.stage-panel > .stage-facts,
.stage-panel > .stage-columns,
.stage-panel > .stage-marketing {
  margin-top: var(--space-6);
}

.stage-career-decision {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--lime-tint);
  border: 1px solid var(--lime-500);
  border-radius: var(--radius-md);
}
.stage-career-decision header p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
.stage-career-decision-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-4);
}
.stage-career-decision ul {
  margin: 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
}
.stage-career-routes {
  display: grid;
  gap: var(--space-3);
}
.stage-career-routes article {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.stage-career-routes b {
  color: var(--accent-strong);
}

.stage-owner-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--teal-tint);
  border-radius: var(--radius-md);
}
.stage-owner-card dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: 0;
}
.stage-owner-card dt {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stage-owner-card dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  font-weight: 500;
}

.stage-organization-functions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}
/* Карточка функции = кнопка, открывающая модалку с деталями
   (вместо details/summary, где текст в колонке был зажат). */
.stage-function-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-4);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: 600;
  color: var(--accent-strong);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
}
.stage-function-card:hover {
  border-color: var(--accent);
  background: var(--paper);
}
.stage-function-card .icon {
  color: var(--ink-muted);
}

/* ---------- Модалка с деталями функции клиники ---------- */
.stage-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.stage-modal[hidden] {
  display: none;
}
.stage-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(13 61 51 / 0.55);
  border: 0;
  padding: 0;
  cursor: default;
}
.stage-modal-window {
  position: relative;
  width: min(560px, 100%);
  max-height: min(80dvh, 720px);
  overflow-y: auto;
  padding: var(--space-5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
}
.stage-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.stage-modal-head h5 {
  margin: 0;
}
.stage-modal-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: calc(var(--touch-target) - 8px);
  height: calc(var(--touch-target) - 8px);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}
.stage-modal-close:hover {
  color: var(--accent-strong);
  border-color: var(--accent);
}
.stage-modal dl {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}
.stage-modal dt {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stage-modal dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}
/* Блокировка прокрутки страницы под модалкой (без inline-стилей: CSP). */
body.stage-modal-open {
  overflow: hidden;
}

.stage-dentistry-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.stage-dentistry-numbers dt {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stage-dentistry-numbers dd {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent-strong);
}
.stage-dentistry-role {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--paper-tint);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.stage-dentistry-role b {
  color: var(--accent-strong);
}
.stage-dentistry-role p {
  margin: 0;
  font-size: var(--text-sm);
}
.stage-dentistry-details {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.stage-dentistry-details details {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.stage-dentistry-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent-strong);
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* Выпадающий список = шеврон справа, разворачивается при открытии. */
.stage-dentistry-details summary .icon,
.stage-clinic-profile-sections summary .icon {
  margin-left: auto;
  color: var(--ink-muted);
  transition: transform var(--transition-fast);
}
.stage-dentistry-details details[open] summary .icon,
.stage-clinic-profile-sections details[open] summary .icon {
  transform: rotate(180deg);
  color: var(--accent);
}
.stage-dentistry-details dl {
  margin: var(--space-3) 0 0;
  display: grid;
  gap: var(--space-2);
}
.stage-dentistry-details dl > div {
  display: grid;
  grid-template-columns: minmax(130px, auto) minmax(0, 1fr);
  gap: var(--space-3);
}
.stage-dentistry-details dt {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}
.stage-dentistry-details dd {
  margin: 0;
  font-size: var(--text-sm);
}
.stage-dentistry-note {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin: 0 0 var(--space-4);
}
.stage-dentistry-cta {
  justify-self: start;
}

.stage-clinic-profile {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--teal-tint);
  border-radius: var(--radius-md);
}
.stage-clinic-profile header p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
.stage-clinic-profile-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: 0;
}
.stage-clinic-profile-metrics > div {
  background: var(--paper-raised);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.stage-clinic-profile-metrics dt {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
.stage-clinic-profile-metrics dd {
  margin: var(--space-1) 0 0;
  font-weight: 600;
}
.stage-clinic-profile-sections {
  display: grid;
  gap: var(--space-3);
}
.stage-clinic-profile-sections details {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.stage-clinic-profile-sections summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent-strong);
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.stage-clinic-profile-sections dl {
  margin: var(--space-3) 0 0;
  display: grid;
  gap: var(--space-2);
}
.stage-clinic-profile-sections dt {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}
.stage-clinic-profile-sections dd {
  margin: 0;
  font-size: var(--text-sm);
}

.stage-maturity-scale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}
.stage-maturity-scale article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-4);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  min-width: 0;
}
/* Заголовок карточки зрелости: название слева, «N из 5» справа
   (landing.js рендерит <header>; отступ между ними обязателен). */
.stage-maturity-scale article header,
.stage-maturity-scale article .stage-maturity-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.stage-maturity-scale article header b,
.stage-maturity-scale article .stage-maturity-head b {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--tint-ink);
  min-width: 0;
}
.stage-maturity-scale article header span,
.stage-maturity-scale article .stage-maturity-head span {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
}
.stage-maturity-scale progress {
  width: 100%;
  height: var(--space-2);
  accent-color: var(--accent);
}
.stage-maturity-scale progress::-webkit-progress-bar {
  background: var(--paper-tint);
  border-radius: var(--radius-pill);
}
.stage-maturity-scale progress::-webkit-progress-value {
  background: var(--teal-500);
  border-radius: var(--radius-pill);
}
.stage-maturity-scale p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.stage-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}
.stage-facts section {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}
.stage-facts p {
  margin: 0;
  color: var(--ink-soft);
}
/* «Роль собственника» / «Главное ограничение» — заголовки,
   а не подписи: жирнее и в цвете h4 (скриншот владельца). */
.stage-facts .eyebrow {
  /* Цвет акцентом остался, кегль/вес — общие для всех .eyebrow. */
  color: var(--accent-strong);
}

.stage-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}
.stage-columns h4 {
  font-size: var(--text-md);
  /* Отступ до списка: без него заголовок прижат к первому пункту. */
  margin: 0 0 var(--space-3);
}
.stage-columns ul {
  margin: 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
/* Нумерованные списки — рукописные цифры Caveat, как ol.checklist
   на seo-страницах (фидбек владельца: единый стиль маркеров). */
.stage-columns ol {
  margin: 0;
  list-style: none;
  counter-reset: stage-priority;
  display: grid;
  gap: var(--space-3);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
.stage-columns ol li {
  counter-increment: stage-priority;
  position: relative;
  padding-left: 44px;
}
.stage-columns ol li::before {
  content: counter(stage-priority);
  position: absolute;
  left: 0;
  top: -0.08em;
  min-width: 34px;
  text-align: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.9em;
  line-height: 1;
  color: var(--accent);
}

.stage-marketing {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--paper-tint);
  border-radius: var(--radius-md);
}
.stage-marketing h4 {
  display: grid;
  gap: var(--space-1);
}
.stage-marketing h4 span:first-child {
  font-size: var(--text-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stage-marketing h4 span:last-child {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent-strong);
}
.stage-marketing > p {
  margin: 0;
  color: var(--ink-soft);
}
.stage-marketing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}
.stage-marketing-grid b {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--accent-strong);
}
.stage-marketing-grid ul {
  margin: 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
}
.stage-marketing-grid p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.stage-marketing-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.stage-transition {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--lime-tint);
  border-left: 4px solid var(--lime-500);
  border-radius: var(--radius-md);
}
.stage-transition p {
  margin: 0;
  color: var(--tint-ink);
}

.stage-panel-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.stage-panel-action small {
  display: block;
  color: var(--ink-muted);
  font-size: var(--text-xs);
}
.stage-panel-action b {
  color: var(--tint-ink);
}

/* PRD v2 §D5: навигация «предыдущая / следующая стадия» */
.stage-panel-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}
.stage-panel-nav .button {
  flex: 1 1 0;
  min-width: 0;
  justify-content: flex-start;
}
.stage-panel-nav .button:last-child {
  justify-content: flex-end;
  text-align: right;
}
.stage-panel-nav .button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Номер стадии в пейджере — рукописная цифра (спан ставит landing.js). */
.stage-panel-nav .num-hand {
  font-size: var(--text-lg);
}

/* ---------- Персональный результат ---------- */
/* PRD: тематический маркер — зуб вместо точки во всех маркированных
   списках панели стадий (иконку вставляет landing.js). */
.stage-columns ul,
.stage-marketing-grid ul,
.stage-dentistry-details ul,
.stage-career-decision ul {
  list-style: none;
  padding-left: 0;
}
.stage-columns ul li,
.stage-marketing-grid ul li,
.stage-dentistry-details ul li,
.stage-career-decision ul li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
/* .icon-tooth переехал в components.css — единый источник для лендинга и анкеты. */

/* Полоса «Что вы получите после диагностики»: фон во всю ширину экрана,
   контент остаётся в контейнере лендинга (приём как у .social-follow). */
.result-preview {
  max-width: none;
  padding-inline: max(
    var(--space-5),
    calc((100% - var(--container-landing)) / 2 + var(--space-5))
  );
  background: var(--paper-raised);
  border-block: 1px solid var(--line);
}
/* CTA «Получить свой результат»: во всю ширину только на мобильных;
   от планшета — по центру, паддинги по бокам на 30% больше вертикальных. */
@media (min-width: 641px) {
  .result-preview > .button-primary {
    justify-self: center;
    padding: var(--space-3) calc(var(--space-3) * 1.3);
  }
}
.result-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.result-benefits article {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  /* Цифра-фон обрезается скруглением карточки. */
  position: relative;
  overflow: hidden;
}
/* Фидбек владельца: цифра — большой полупрозрачный фон справа,
   за информационным текстом; акцент на тексте, не на цифре. */
.result-benefits b {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  transform: translateY(-50%);
  font-family: var(--font-hand);
  font-weight: 700;
  /* Калибровка по высоте карточки (~182px, глиф = 0.59 кегля Caveat):
     ~90% высоты карточки при кегле ~272px. */
  font-size: clamp(14rem, 19vw, 17rem);
  line-height: 1;
  color: var(--accent-strong);
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
}
.result-benefits h3,
.result-benefits p {
  position: relative;
  z-index: 1;
}
.result-benefits h3 {
  font-size: var(--text-md);
  margin: 0;
}
.result-benefits p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
.preview-slider-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}
.preview-slider-heading > div:not(.preview-slider-nav) {
  display: grid;
  gap: var(--space-1);
}
.preview-slider-heading h3 {
  margin: 0;
  font-size: var(--text-lg);
}
.preview-slider-heading p {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}
.preview-slider-nav {
  /* display: contents выносит кнопки в сетку слайдера:
     [‹] ●●●●● [›] под лентой, как у слайдера outcomes. */
  display: contents;
}
.preview-slider-nav .button {
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-raised);
  color: var(--accent-strong);
}
/* Hover/disabled — 1:1 со .slider-arrow слайдера outcomes. */
.preview-slider-nav .button:hover:not(:disabled) {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.preview-slider-nav .button:disabled {
  opacity: 0.4;
}
/* :focus-visible глобально рисует ring через box-shadow — не теряем его. */
.preview-slider-nav .button:focus-visible {
  box-shadow: var(--focus-ring);
}
#preview-prev {
  grid-area: prev;
  justify-self: end;
}
#preview-next {
  grid-area: next;
  justify-self: start;
}
/* Пагинация точками — как у outcomes: 8px, активная 24px pill teal-700. */
.preview-slider-dots {
  grid-area: dots;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.preview-slider-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    width var(--transition-fast);
}
.preview-slider-dots button[aria-current="true"] {
  width: 24px;
  background: var(--teal-700);
}
/* Полоса прогресса больше не нужна — навигация точками на всех ширинах. */
.pdf-preview-progress {
  display: none;
}
.button-icon {
  width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 0;
}
/* Свайп-слайдер обложек: нативный скролл + snap, драг мышью добавляет JS.
   Навигация — единая со слайдером outcomes на всех ширинах:
   [‹] ●●●●● [›] под лентой (grid-области track / prev dots next). */
.pdf-preview-slider {
  /* Грид-элемент .section иначе раздувает колонку шириной трека. */
  min-width: 0;
  display: grid;
  /* 1fr auto 1fr: точки в центре, кнопки вплотную к ним —
     точно как .outcome-slider-controls (gap space-5). */
  grid-template:
    "track track track" auto
    "prev dots next" auto / 1fr auto 1fr;
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  align-items: center;
}
.pdf-preview-slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.pdf-preview-track {
  display: flex;
  grid-area: track;
  /* min-width: 0 — иначе широкий трек раздувает grid-колонки слайдера. */
  min-width: 0;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-1);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: var(--space-1);
  margin: calc(var(--space-1) * -1);
  cursor: grab;
}
.pdf-preview-track::-webkit-scrollbar {
  display: none;
}
.pdf-preview-track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}
.pdf-preview-slide {
  flex: 0 0 auto;
  width: clamp(150px, 16vw, 210px);
  scroll-snap-align: start;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  align-content: start;
}
/* Фидбек владельца: на десктопе ровно 4 обложки в кадре (не ~6).
   Формула от ширины трека — как grid-auto-columns у outcomes. */
@media (min-width: 1025px) {
  .pdf-preview-slide {
    width: calc((100% - 3 * var(--space-4)) / 4);
  }
}
.pdf-preview-slide img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  -webkit-user-drag: none;
  user-select: none;
}
.pdf-preview-slide figcaption {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  line-height: var(--leading-normal);
}
.pdf-preview-progress {
  position: relative;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}
.pdf-preview-progress span {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 100%;
  border-radius: var(--radius-pill);
  background: var(--lime-500);
}

/* ---------- Опоры роста (лестница) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}
.pillars article {
  height: auto;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  min-width: 0;
  /* Фото прижато к краям карточки: верхние углы срезает скругление. */
  overflow: hidden;
}
.pillars article h3 {
  font-size: var(--text-md);
  margin: 0;
}
.pillars article p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
/* Лестница: ступени вниз в обычном потоке (без позиционирования).
   Только десктоп (4 колонки): специфичность nth-child перебивала
   мобильные сбросы margin-top и давала неравномерные отступы. */
@media (min-width: 769px) {
  .pillars article:nth-child(2) {
    margin-top: 40px;
  }
  .pillars article:nth-child(3) {
    margin-top: 80px;
  }
  .pillars article:nth-child(4) {
    margin-top: 120px;
  }
}

/* ---------- Доп. детализация ---------- */
/* Слайдер «Что ещё будет в разборе»: снап-лента, стрелки и точки. */
.outcome-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--space-4)) / 3);
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.outcome-grid::-webkit-scrollbar {
  display: none;
}
/* На время драга мышью снап отключается, иначе лента дёргается. */
.outcome-grid.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}
.outcome-grid article {
  scroll-snap-align: start;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  /* Фото прижато к краям карточки: верхние углы срезает скругление. */
  overflow: hidden;
}
/* Фото во всю ширину карточки: без отступов сверху и по бокам,
   скругление только в нижних углах. */
.outcome-media {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-2);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
}
.outcome-media img {
  display: block;
  width: 100%;
  height: auto;
  /* Нативный drag картинки перехватывает жест мыши — выключаем. */
  user-select: none;
  -webkit-user-drag: none;
}
.outcome-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-2);
}
.slider-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--accent-strong);
  cursor: pointer;
}
.slider-arrow .icon {
  width: 20px;
  height: 20px;
}
.slider-arrow:hover:not(:disabled) {
  border-color: var(--accent-strong);
}
.slider-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}
.outcome-dots {
  display: flex;
  gap: var(--space-2);
}
.outcome-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  cursor: pointer;
}
.outcome-dot.is-active {
  width: 24px;
  background: var(--teal-700);
}
/* Фидбек владельца: на планшете тоже 3 карточки в кадре, как на десктопе
   (правило «2 ≤1024» снято); на телефоне одна. */
@media (max-width: 640px) {
  .outcome-grid {
    grid-auto-columns: 100%;
  }
  /* Фидбек владельца: кнопки hero на мобиле — во всю ширину
     (только ≤640, на десктопе/планшете инлайн). justify-items:start
     у .hero-copy сжимает сам блок .hero-actions до fit-content, поэтому
     без justify-self:stretch кнопки тянутся только до ширины контента. */
  .hero-actions {
    display: grid;
    justify-self: stretch;
  }
}
.outcome-grid h3 {
  font-size: var(--text-md);
  margin: 0;
}
.outcome-grid p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

/* ---------- Кривая выручки ---------- */
/* Зелёный фон — во всю ширину экрана, контент остаётся в контейнере лендинга. */
.chair-revenue-curve {
  max-width: none;
  padding-inline: 0;
  background: var(--teal-700);
  color: var(--white);
}
.section.chair-revenue-curve > * {
  margin-inline: max(
    var(--space-5),
    calc((100% - var(--container-landing)) / 2 + var(--space-5))
  );
}
.chair-revenue-curve h2 {
  color: var(--white);
}
.chair-revenue-curve > p {
  color: var(--teal-tint-ink);
  max-width: 70ch;
}
.revenue-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.revenue-control-group {
  display: grid;
  gap: var(--space-2);
}
.revenue-control-group > span {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-tint-ink);
}
.revenue-switch {
  display: inline-flex;
  background: rgb(255 255 255 / 0.12);
  border-radius: var(--radius-pill);
  padding: var(--space-1);
  gap: var(--space-1);
}
.revenue-switch button {
  min-height: calc(var(--touch-target) - 8px);
  padding: var(--space-1) var(--space-4);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.revenue-switch button:hover {
  background: rgb(255 255 255 / 0.14);
}
.revenue-switch button.active {
  background: var(--lime-500);
  color: var(--teal-900);
  font-weight: 700;
}
/* Табы коэффициентов «×1,2» — рукописные цифры (× не в Caveat — фолбэк). */
.revenue-coefficients button {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: var(--text-lg);
}
.revenue-market-summary {
  margin: 0;
  font-weight: 600;
}
.chair-revenue-curve ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}
.chair-revenue-curve ol li {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  padding: var(--space-4);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-md);
  min-width: 0;
}
.chair-revenue-curve ol li b {
  font-size: var(--text-sm);
  color: var(--lime-500);
}
.chair-revenue-curve ol li strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
}
.chair-revenue-curve ol li small {
  color: var(--teal-tint-ink);
  font-size: var(--text-xs);
}
.chair-revenue-curve ol li span {
  font-size: var(--text-xs);
  color: var(--teal-tint-ink);
}
.chair-revenue-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--teal-tint-ink);
  max-width: 70ch;
}

/* ---------- Финальный CTA ---------- */
.final-cta {
  justify-items: center;
  text-align: center;
  background: var(--paper-tint);
}
.final-cta p {
  max-width: 60ch;
  /* Обёртка заголовка — grid-итем шириной с h2, узкий p без auto-марджина
     прилипает к её левому краю. */
  margin-inline: auto;
  color: var(--ink-soft);
}
.final-cta .privacy {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-width: 56ch;
}
.button-light {
  background: var(--paper-raised);
  color: var(--accent-strong);
  border: 1px solid var(--line-strong);
}
.button-light:hover {
  border-color: var(--accent);
}

/* ---------- Иконки: локальные размеры ---------- */
.icon-sm {
  width: 16px;
  height: 16px;
}
.text-link .icon {
  vertical-align: -0.2em;
}

/* ---------- Экскурсия ---------- */
.tour {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-7);
}
.tour p {
  color: var(--ink-soft);
  max-width: 62ch;
}
.text-link {
  font-weight: 600;
  color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------- Соцсети / видео ---------- */
/* Зелёный фон — во всю ширину экрана, контент остаётся в контейнере лендинга. */
.social-follow {
  max-width: none;
  padding-inline: max(
    var(--space-5),
    calc((100% - var(--container-landing)) / 2 + var(--space-5))
  );
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-7);
  background: var(--teal-900);
  color: var(--white);
}
.social-follow h2 {
  color: var(--white);
}
.social-follow-copy > p:not(.eyebrow) {
  color: var(--teal-tint-ink);
  max-width: 56ch;
}
.social-follow .eyebrow {
  color: var(--lime-500);
}
.social-links {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.social-links a {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-md);
  color: var(--white);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.social-links a:hover {
  background: rgb(255 255 255 / 0.16);
  color: var(--white);
}
.social-links a > .brand-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--lime-500);
  transition: color var(--transition-fast);
}
.social-links a:hover > .brand-icon {
  color: var(--white);
}
.social-links a b {
  display: block;
}
.social-links a small {
  color: var(--teal-tint-ink);
}
.youtube-card {
  display: grid;
  gap: var(--space-3);
  color: var(--white);
  text-decoration: none;
  min-width: 0;
}
.youtube-card:hover {
  color: var(--lime-500);
}
.youtube-cover {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.youtube-cover img {
  display: block;
  width: 100%;
}
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  /* Фидбек владельца: круг как в intro-broadcast, перекрывал полкадра. */
  width: calc(var(--space-7) * 1.2);
  height: calc(var(--space-7) * 1.2);
  background: var(--lime-500);
  color: var(--teal-900);
  border-radius: 50%;
}
.play-button .icon {
  width: 20px;
  height: 20px;
}
.youtube-card-caption small {
  color: var(--teal-tint-ink);
  font-size: var(--text-xs);
}
.youtube-card-caption b {
  font-size: var(--text-md);
}

/* ---------- База знаний ---------- */
.seo-library {
  border-top: 1px solid var(--line);
}
.seo-library nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}
.seo-library nav a {
  display: grid;
  gap: var(--space-1);
  position: relative;
  padding: var(--space-4) var(--space-5);
  padding-inline-end: calc(var(--space-5) + var(--space-6));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}
.seo-library nav a:hover {
  border-color: var(--accent);
}
.seo-library nav a b {
  color: var(--accent-strong);
}
/* Описание карточки; рукописная «10» (.num-hand) исключена — она
   наследует кегль заголовка, а не падает в мелкий текст (фидбек
   владельца: цифра 15px выглядела меньше соседних 17px). */
.seo-library nav a span:not(.num-hand) {
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
/* Стрелка карточки — в правом нижнем углу */
.seo-library nav a .card-arrow {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-3);
  color: var(--accent-strong);
  transition: transform var(--transition-fast);
}
.seo-library nav a:hover .card-arrow {
  transform: translateX(3px);
}

/* ---------- Подвал ---------- */
footer {
  max-width: var(--container-landing);
  /* Отступ над подвалом: секции дают 64px снизу, плюс 48px здесь —
     зона подвала отделена воздухом наравне с ритмом секций. */
  margin: var(--space-7) auto 0;
  /* Топбордер сильнее обычной линии: подвал должен читаться
     как отдельная зона (фидбек владельца). */
  padding: var(--space-6) var(--space-5);
  display: grid;
  gap: var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  border-top: 1px solid var(--line-strong);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.footer-legal a {
  color: var(--ink-muted);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}
.footer-legal a:hover {
  color: var(--accent-strong);
}
.footer-note {
  margin: 0;
  max-width: 76ch;
  font-size: var(--text-xs);
}

/* ============================================================
   Адаптивность: 1536 / 1280 / 1024 / 768 / 640
   ============================================================ */
@media (max-width: 1536px) {
  main > section,
  footer,
  .topbar {
    padding-inline: var(--space-5);
  }
}

@media (max-width: 1280px) {
  .hero {
    gap: var(--space-7);
  }
  .stage-learning {
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  }
}

@media (max-width: 1024px) {
  /* Фидбек владельца: на планшете (769–1024) ссылки шапки рвутся
     посреди слова — навигация и CTA живут в бургере, как на телефоне. */
  .topbar {
    flex-wrap: wrap;
  }
  .topbar-burger {
    display: inline-flex;
  }
  .topbar-nav,
  .topbar-cta {
    display: none;
  }
  .topbar.menu-open .topbar-nav {
    display: flex;
    order: 3;
    width: 100%;
    flex-direction: column;
    gap: var(--space-1);
    padding-top: var(--space-2);
    border-top: 1px solid var(--line);
  }
  .topbar.menu-open .topbar-nav a {
    padding: var(--space-3) 0;
    font-size: var(--text-md);
  }
  .topbar.menu-open .topbar-cta {
    display: inline-flex;
    order: 4;
    width: 100%;
    justify-content: center;
    margin-top: var(--space-2);
  }
  .hero,
  .intro-broadcast,
  .tour {
    grid-template-columns: 1fr;
  }
  /* Фидбек владельца: портретное фото «Карта развития» на планшете
     не должно растягиваться на всю ширину — компактный центрированный формат. */
  .hero-map {
    max-width: min(440px, 100%);
    margin-inline: auto;
  }
  .social-follow {
    grid-template-columns: 1fr;
  }
  /* Фидбек владельца: в диапазоне 769–1024 карточки в один ряд огромны —
     держим 3 колонки, как на десктопе. */
  .awareness-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Шкала зрелости на планшете: без нулевой колонки */
  .stage-maturity-scale article {
    grid-template-columns: minmax(0, 1fr);
  }
  .stage-maturity-scale p:last-child {
    grid-column: 1;
  }
}

@media (max-width: 768px) {
  .topbar {
    flex-wrap: wrap;
    /* Фидбек владельца: шапка не прилипает к краям экрана на телефоне */
    padding: var(--space-3) var(--space-4);
  }
  /* Мобильная шапка: LAVRINENKO × DentUp («SCHOOL» и «Диагностика» убираем),
     навигация и CTA — в бургере. */
  .brand-product,
  .brand-school b {
    display: none;
  }
  .brand-school,
  .brand-sep {
    display: inline;
  }
  .topbar .brand {
    font-size: var(--text-sm);
    gap: var(--space-1);
  }
  .brand-mini {
    display: inline;
    font-size: inherit;
  }
  /* Бургер/навигация/CTA переехали в 1024px-блок (планшет тоже бургер). */
  main > section {
    padding: var(--space-7) var(--space-4);
  }
  .strip p {
    padding-inline: var(--space-4);
  }
  .section.chair-revenue-curve > * {
    margin-inline: var(--space-4);
  }
  .social-follow {
    padding-inline: var(--space-4);
  }
  .pillars {
    grid-template-columns: 1fr 1fr;
  }
  .pillars article {
    margin-top: 0;
  }
  .stage-career-decision-grid,
  .stage-marketing-grid {
    grid-template-columns: 1fr;
  }
  .stage-panel-action {
    flex-direction: column;
    align-items: stretch;
  }
  .stage-panel-action .button {
    width: 100%;
  }
}

/* Табы стадий: карусель до 1024px включительно (фидбек владельца:
   на планшете липкая колонка неудобна — лента табов над панелью,
   синхронно с aria-orientation="horizontal" в landing.js). */
@media (max-width: 1024px) {
  /* Секция стадий: лента табов над панелью вместо липкой колонки. */
  .stage-learning {
    grid-template-columns: 1fr;
  }
  .stage-list {
    overflow: visible;
    position: static;
    max-height: none;
  }
  .stage-list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-3);
    padding: var(--space-1);
    margin: calc(var(--space-1) * -1);
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
  }
  .stage-list::-webkit-scrollbar {
    display: none;
  }
  .stage-list.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
  }
  /* В табе карусели — только номер и заголовок. */
  .stage-list button {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 210px;
    min-height: var(--touch-target);
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .stage-list button small {
    display: none;
  }
  /* Фидбек владельца: длинное название дублирует заголовок панели —
     обрезаем до 2 строк с «…» (надёжнее маски затухания). */
  .stage-list button b {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: break-word;
  }
}
@media (max-width: 640px) {
  /* На телефоне одна карточка в ряд: фото 4:3 в узкой колонке нечитаемо. */
  .awareness-grid {
    grid-template-columns: 1fr;
  }
  /* Фидбек владельца: на мобиле подписи стадий обрезаются — пейджер
     в столбик, кнопки на всю ширину, подпись переносится целиком. */
  .stage-panel-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .stage-panel-nav .button,
  .stage-panel-nav .button:last-child {
    justify-content: flex-start;
    text-align: left;
    /* В столбце flex-basis 0 из базового правила сплющивал кнопки
       по высоте — третья строка подписи резалась. */
    flex: 0 0 auto;
    /* Фидбек владельца: текст прижат к бордеру — больше воздуха. */
    padding-block: var(--space-4);
  }
  /* Только прямой ребёнок-лейбл: вложенный .num-hand не блокируем,
     иначе рукописный номер уезжает на отдельную строку. */
  .stage-panel-nav .button > span {
    white-space: normal;
    overflow-wrap: break-word;
    /* Длинное название — максимум 2 строки, лишнее срезается.
       Не -webkit-box: он стековал рукописный номер отдельной строкой. */
    display: block;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
  }
  .stage-learning {
    grid-template-columns: 1fr;
  }
  .stage-facts,
  .stage-columns,
  .stage-marketing-grid {
    grid-template-columns: 1fr;
  }
  .stage-owner-card dl,
  .stage-organization-functions {
    grid-template-columns: 1fr;
  }
  .stage-dentistry-numbers,
  .stage-dentistry-details {
    grid-template-columns: 1fr;
  }
  .stage-maturity-scale article {
    grid-template-columns: 1fr;
  }
  .stage-maturity-scale p:last-child {
    grid-column: auto;
  }
  .pillars {
    grid-template-columns: 1fr;
  }
  .pillars article {
    margin-top: 0;
  }
  .stage-panel {
    padding: var(--space-4);
  }
  .stage-panel-head {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .revenue-controls {
    flex-direction: column;
  }
  /* Фидбек владельца: подложка табов — по контенту и по центру,
     а не на всю ширину группы (grid stretch). */
  .revenue-switch {
    flex-wrap: wrap;
    justify-content: center;
    justify-self: center;
  }
  /* Фидбек владельца: подписи «Территория»/«Коэффициент» — по центру
     над своими переключателями. */
  .revenue-control-group > span {
    justify-self: center;
  }
  footer {
    text-align: center;
  }
  .footer-top,
  .footer-legal {
    justify-content: center;
  }
}

/* Мобильный спец-кейс pdf-слайдера удалён: навигация [‹] точки [›]
   едина на всех ширинах (см. базовые правила .pdf-preview-slider). */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Печать ---------- */
@media print {
  .topbar,
  .skip-link,
  footer .audit-link {
    display: none;
  }
  body {
    background: #fff;
    color: #18211e;
  }
  h1,
  h2,
  h3,
  h4 {
    color: #155248;
  }
  .hero-map,
  .strip,
  .chair-revenue-curve,
  .social-follow {
    background: #fff;
    color: #18211e;
    border: 1px solid #d9d6cf;
  }
  .chair-revenue-curve h2,
  .social-follow h2,
  .chair-revenue-curve ol li strong {
    color: #18211e;
  }
}