/* Доступность и мобильная читаемость. Подключается ПОСЛЕДНИМ на каждой
   странице: правила doctor-page.css и implant-page.css иначе перебивают
   мобильные кегли и размеры целей. Собрано 13.10.2026 по замерам на 390px.

   1. Ссылка «к содержанию» для клавиатуры и скринридера.
   2. На телефоне важный текст не мельче 14px: адрес, телефон, согласие на
      обработку данных и подписи к врачам раньше были 8-11px.
   3. Интерактивные цели не меньше 44px по высоте: хлебные крошки, фильтры,
      круглые кнопки и чекбоксы согласия. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 1000;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--figma-blue, #0b63c5);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus-visible {
  top: 12px;
  outline: 3px solid #0b2a4a;
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .site-footer p,
  .footer-contact p,
  .footer-contact small,
  .header-contact small,
  .dp-card-role,
  .dp-experience,
  .lead-preview-note,
  .implant-scope-note,
  .article-review-status,
  .article-disclaimer,
  figcaption,
  .consent-text,
  label[for] + span,
  .lead-consent span {
    font-size: 14px;
    line-height: 1.5;
  }
  .footer-contact a,
  .header-contact a b {
    font-size: 16px;
  }

  .dp-breadcrumbs a,
  .dp-breadcrumbs span,
  .blog-breadcrumbs a,
  .blog-breadcrumbs span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .round-button {
    min-width: 44px;
    min-height: 44px;
  }
  .dp-filter,
  [data-blog-topic] {
    min-height: 44px;
    padding-inline: 16px;
  }
  input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }
  /* Кликабельная область галочки согласия: сама галочка 24px,
     но палец попадает по всей строке. */
  .lead-consent,
  .clinic-form label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
  }
}

/* Пол для текста, который обязан читаться на телефоне.
   !important здесь намеренный: это порог доступности, а не оформление.
   Правила doctor-page.css и implant-page.css специфичнее по весу селектора,
   и без этого флага они возвращают 12px на предупреждениях и отзывах. */
@media (max-width: 760px) {
  .implant-scope-note,
  .lead-preview-note,
  .article-disclaimer,
  .article-review-status,
  .dp-card-role,
  .dp-review-text,
  .dp-reviews p,
  .implant-reviews p,
  .home-review p,
  .clinic-form p,
  .lead-consent span,
  .footer-contact p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .home-intro p,
  .home-about p,
  .clinic-copy p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}

/* Цели касания в подвале, мобильном меню и у согласия.
   Замер на 390px: ссылки подвала были 79x18, галочка согласия 18x18. */
@media (max-width: 760px) {
  .footer-links a,
  .mobile-nav a,
  .service-nav-item > a,
  .footer-contact a,
  .blog-section-heading a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
  }
  input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 auto;
  }
  [class*="review"] p,
  [class*="review"] blockquote {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* Логотип в шапке и подвале, кнопки записи на странице вычета и скрытые
   чекбоксы квиза. Замер 390px: 134x22, 139x20 и 18x18. */
@media (max-width: 760px) {
  .brand-block,
  .site-footer .wordmark,
  .network-doctor-copy a,
  .network-clinic a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .tooth-whole input[type="checkbox"],
  .quiz-option input[type="checkbox"],
  form input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Радиокнопки формата консультации и телефон в боковой колонке статьи. */
@media (max-width: 760px) {
  input[type="radio"] {
    width: 24px !important;
    height: 24px !important;
  }
  .article-booking a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Юридический ряд в подвале: документы, политика, вычет. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.footer-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 760px) {
  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ── Новые блоки главной (13.10.2026) ──────────────────────────────────
   Каталог направлений, цены, этапы, контакты и вопросы. Раньше главная
   вела в тело сайта двумя ссылками, а плитки услуг открывали диалог
   вместо страницы услуги. */
.home-catalog,
.home-prices,
.home-stages,
.home-reviews,
.home-contacts,
.home-catalog-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  margin-top: 24px;
}
/* Лента отзывов идёт во всю ширину секции. Без этого она попадала в одну
   ячейку трёхколоночной сетки (360 px) и карточки обрезало по краю. */
.home-reviews > .core-reviews {
  grid-column: 1 / -1;
}
/* Направления: заголовок и ссылка «Все услуги» сверху друг под другом,
   две кликабельные группы под ними. Раскладка «заголовок слева, ссылка
   справа, карточки рядом» выглядела разорванной (владелец 14.10). */
.home-catalog {
  grid-template-columns: 1fr;
  gap: 20px;
}
.home-catalog > .section-heading {
  flex-direction: column;
  align-items: start;
  gap: 12px;
  margin: 0;
}
.home-catalog-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  align-items: stretch;
  margin-top: 0;
}
.home-catalog-group {
  padding: 26px 28px;
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--line);
}
.home-catalog-group h3 {
  margin: 0 0 8px;
  font-family: var(--figma-font-heading);
  font-size: 24px;
  line-height: 1.2;
}
.home-catalog-group h3 a {
  color: var(--figma-blue);
  text-decoration: none;
}
.home-catalog-group > p {
  margin: 0 0 16px;
  color: #3c5a78;
  font-size: 16px;
  line-height: 1.55;
}
.home-catalog-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}
.home-catalog-group li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.home-catalog-group li:last-child a {
  border-bottom: 0;
}
.home-catalog-group li a:hover {
  color: var(--figma-blue);
}

/* Заголовок во всю строку, карточки под ним: так же, как у этапов
   (владелец 14.10). Прежний вариант «заголовок слева» переносил его
   в три строки в узкой колонке. */
.home-prices {
  grid-template-columns: 1fr !important;
}
.home-prices > .home-price-note {
  grid-column: 1 !important;
}

/* Раскладка секции цен: заголовок слева, карточки и оговорка справа.
   Секция стояла в общей сетке «три равные колонки», и получалось три
   разных блока в ряд: заголовок, узкая колонка карточек, текст сноски.
   Замечание владельца 13.10. */
.home-prices {
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: start;
  gap: 24px 40px;
}
.home-prices > .section-heading {
  flex-direction: column;
  align-items: start;
  gap: 14px;
  margin: 0;
}
.home-prices > .home-price-note {
  grid-column: 2;
  margin-top: 0;
}
/* Три цены стоят одной строкой: вторая строка с одинокой карточкой
   выглядела как недоделанная сетка. */
@media (min-width: 1100px) {
  .home-prices .home-price-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-prices .home-price-card {
    padding: 22px 20px;
  }
}
@media (max-width: 900px) {
  .home-prices {
    grid-template-columns: 1fr;
  }
  .home-prices > .home-price-note {
    grid-column: 1;
  }
}
.home-price-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  margin-top: 24px;
}
.home-price-card {
  padding: 24px 26px;
  border-radius: 22px;
  background: var(--figma-sky);
  display: grid;
  gap: 4px;
  align-content: start;
}
.home-price-card b {
  font-family: var(--figma-font-heading);
  font-size: 32px;
  line-height: 1.1;
  color: var(--figma-blue);
}
.home-price-name {
  font-weight: 600;
  font-size: 17px;
}
.home-price-scope {
  color: #2f5277;
  font-size: 15px;
}
.home-price-card small {
  color: #46648a;
  font-size: 14px;
}
.home-price-note {
  margin-top: 16px;
  max-width: 68ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.home-stage-list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.home-stage-list li {
  display: flex;
  gap: 14px;
  padding: 24px 24px 26px;
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--line);
}
.home-stage-number {
  font-family: var(--figma-font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--figma-sky);
}
.home-stage-list b {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
  line-height: 1.3;
}
.home-stage-list p {
  margin: 0;
  color: #3c5a78;
  font-size: 15px;
  line-height: 1.55;
}

.home-contacts {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 380px;
  align-items: start;
}
.home-contact-list {
  display: grid;
  gap: 2px;
  margin: 20px 0 24px;
}
.home-contact-list > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.home-contact-list dt {
  color: var(--muted);
}
.home-contact-list dd {
  margin: 0;
  font-weight: 500;
}
.home-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.home-contact-map {
  position: relative;
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 260px;
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255, 255, 255, 0.85),
      transparent 55%
    ),
    linear-gradient(135deg, var(--figma-sky) 0%, #e6eef2 100%);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.home-contact-map > span:last-child {
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

@media (max-width: 860px) {
  .home-contacts {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  /* Боковой отступ карточек на узком экране. Вертикальный ритм секций
     задаётся --wb-section-pad и здесь не переопределяется. */
  .home-cases,
  .home-stages,
  .home-reviews,
  .home-contacts {
    padding-inline: 18px;
  }
  .home-catalog-group,
  .home-price-card,
  .home-stage-list li {
    padding: 20px 18px;
  }
  .home-contact-list > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Шапка секции с ссылкой справа на 320 не помещалась в строку и давала
   горизонтальную прокрутку всей страницы. */
@media (max-width: 420px) {
  .home-catalog .section-heading,
  .home-prices .section-heading,
  .home-reviews .section-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .home-catalog .section-heading .text-link,
  .home-prices .section-heading .text-link,
  .home-reviews .section-heading .text-link {
    flex: 0 0 auto;
  }
}

/* Белый текст героя лежит на фотографии, и на части ширин контраст падал
   до 1,85:1 при норме 4,5 (замер по пикселям 13.10.2026: «современных
   методик лечения» на 768, «20+» на 768, подзаголовок на 390).
   Подложка-градиент слева гарантирует контраст независимо от кадра и не
   перекрывает лицо на фото справа. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Затемняем только левую колонку с текстом: правая половина с лицом
     остаётся светлой и читается (владелец 14.10). */
  /* Колонка текста стала шире (660 px), и прежняя подложка заканчивалась
     ровно под заголовком — «за один приём» ложилось на светлое пятно кадра
     и рассыпалось. Тень доведена до 78% ширины (владелец 14.10). */
  background: linear-gradient(
    100deg,
    rgba(7, 42, 92, 0.9) 0%,
    rgba(7, 42, 92, 0.84) 38%,
    rgba(7, 42, 92, 0.56) 54%,
    rgba(7, 42, 92, 0.16) 68%,
    rgba(7, 42, 92, 0) 78%
  );
}
.hero-inner {
  position: relative;
  z-index: 1;
}
@media (min-width: 761px) and (max-width: 1100px) {
  /* Планшет: колонка текста шире, светлая часть кадра заходит под подписи. */
  .hero::after {
    background: linear-gradient(
      100deg,
      rgba(7, 42, 92, 0.82) 0%,
      rgba(7, 42, 92, 0.7) 46%,
      rgba(7, 42, 92, 0.24) 70%,
      rgba(7, 42, 92, 0) 84%
    );
  }
}
@media (max-width: 760px) {
  /* Затемнение нужно было, пока снимок лежал подложкой под текстом. С
     16.10 он стоит в потоке отдельной полосой, текст на него не ложится,
     и вуаль только гасила лицо: на экране был синий фильтр поверх всего
     первого экрана. Снимаем. Контраст белого текста держит сплошной
     синий фон `.hero`. */
  .hero::after,
  .hero::before {
    display: none;
  }
}

/* ── Длина строки ──────────────────────────────────────────────────────
   Замер 13.10.2026: на странице услуги 109 знаков в строке, в профиле
   врача медиана 127 и максимум 216 при норме 50–75. На таких длинах глаз
   теряет начало следующей строки, и это бьёт ровно по читателю 45+.
   Предел ставим в ch: он считается от размера шрифта самого абзаца. */
.implant-main p,
.implant-main li,
.dp-main p:not(.dp-card-role):not(.dp-results-count),
.dp-main li,
.core-section p,
.core-section li,
.article-content p,
.article-content li,
.home-catalog-group > p,
.home-stage-list p,
.home-price-note,
.core-faq p,
.wb-faq-head p,
.article-intro {
  max-width: 68ch;
}
/* Подписи и оговорки набраны мельче, в ch это даёт лишнюю длину. */
.implant-scope-note,
.dp-price-note,
.article-disclaimer,
.core-note,
.lead-preview-note {
  max-width: 62ch;
}
/* В узких колонках предел не нужен: там ширину задаёт сетка. */
.dp-hero-copy p,
.implant-hero p,
.rv-feed p,
.core-review p {
  max-width: none;
}

/* ── Главная на структуре боевой посадочной (13.10.2026) ───────────────
   Состав бесплатного приёма, честные условия, второе мнение при отказе,
   рассрочка и марки имплантов. Источник: seo/landing-conversion-20261013.md. */
/* Секции главной живут в общем ритме сайта (reference.css). */
.home-gift,
.home-honest,
.home-refused,
.home-money,
.home-catalog,
.home-prices,
.home-stages,
.home-reviews,
.home-contacts {
  margin-top: var(--wb-section-pad);
  margin-bottom: var(--wb-section-pad);
}
/* Плитки справа одного размера, и правая колонка кончается там же, где
   синяя карточка слева. Замечание владельца 14.10. */
.home-gift {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: 28px;
  align-items: stretch;
}
.home-gift-card {
  padding: 28px 30px;
  border-radius: 24px;
  background: var(--figma-blue);
  color: #fff;
}
.home-gift-card .eyebrow {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.home-gift-card h2 {
  margin: 14px 0 16px;
  font-family: var(--figma-font-heading);
  font-size: 28px;
  line-height: 1.2;
}
.home-gift-card ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.home-gift-card li {
  position: relative;
  padding-left: 26px;
  font-size: 17px;
}
.home-gift-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--figma-lime);
  font-weight: 700;
}
.home-gift-card > p {
  margin: 0 0 18px;
  color: #cfe3fa;
  font-size: 15px;
  line-height: 1.5;
}
/* Главное действие блока выделено лаймом: синяя кнопка на синей карточке
   не читалась как призыв (владелец 14.10). */
.home-gift-actions .button-blue {
  background: var(--figma-lime, #94ba47);
  color: #15200a;
}
.home-gift-actions .button-blue .button-icon {
  background: #15200a;
  color: #fff;
}
.home-gift-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.home-gift-actions .text-link {
  color: #fff;
}
.home-proofs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-proofs li {
  padding: 20px 22px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  display: grid;
  align-content: start;
  gap: 6px;
}
.home-proofs b {
  font-family: var(--figma-font-heading);
  font-size: 19px;
  line-height: 1.25;
  color: var(--figma-blue);
}
.home-proofs span {
  color: #3c5a78;
  font-size: 15px;
  line-height: 1.45;
}

.home-honest-grid,
.home-refused-steps {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
.home-honest-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.home-honest-grid article {
  padding: 22px 24px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
}
.home-honest-grid h3 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.25;
  color: var(--figma-blue);
}
.home-honest-grid p,
.home-refused-steps p {
  margin: 0;
  color: #3c5a78;
  font-size: 16px;
  line-height: 1.55;
}
/* Правая колонка со списком шагов равна левой по высоте. */
.home-refused {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.home-refused > .home-refused-steps {
  grid-auto-rows: 1fr;
  margin-top: 0;
}
.home-refused > div > p {
  margin: 12px 0 20px;
  max-width: 62ch;
  color: #3c5a78;
  font-size: 17px;
  line-height: 1.6;
}
.home-refused-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-refused-steps li {
  display: flex;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid var(--line);
}
.home-refused-steps span {
  font-family: var(--figma-font-heading);
  font-weight: 700;
  color: var(--figma-sky);
}
/* Карточки ряда тянутся на одну высоту: с align-items: start «Рассрочка»
   вставала короче соседней карточки и ряд выглядел обрубленным. */
.home-money-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  margin-top: 24px;
  align-items: stretch;
}
.home-installments {
  padding: 24px 26px;
  border-radius: 20px;
  background: var(--figma-lime);
  color: #1d2b0b;
}
.home-installments h3 {
  margin: 0 0 8px;
  font-size: 24px;
}
.home-installments p {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.5;
}
.home-brands {
  padding: 24px 26px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
}
.home-brands h3 {
  margin: 0 0 14px;
  font-size: 20px;
}
.home-brands ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.home-brands li {
  padding: 12px 14px;
  border-radius: 14px;
  background: #f7fafd;
  display: grid;
  gap: 1px;
}
.home-brands span {
  color: #4a5a6e;
  font-size: 14px;
}
.home-brands small {
  color: var(--figma-blue);
  font-size: 13px;
}

@media (max-width: 900px) {
  .home-gift,
  .home-refused,
  .home-money-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .home-gift-card,
  .home-proofs li,
  .home-honest-grid article,
  .home-refused-steps li,
  .home-installments,
  .home-brands {
    padding: 20px 18px;
  }
  .home-gift-actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* Цена бездействия на главной. */
.home-waiting {
  margin-top: var(--wb-section-pad);
  margin-bottom: var(--wb-section-pad);
}
.home-waiting-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  margin-top: 24px;
}
.home-waiting-grid article {
  padding: 22px 24px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
}
.home-waiting-grid h3 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.25;
  color: var(--figma-blue);
}
.home-waiting-grid p {
  margin: 0;
  color: #3c5a78;
  font-size: 16px;
  line-height: 1.55;
}
.home-waiting-note {
  margin-top: 16px;
  max-width: 68ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
@media (max-width: 760px) {
  .home-waiting-grid article {
    padding: 20px 18px;
  }
}

/* Карта «как добраться» на главной: такой же кадр по клику, как на
   странице контактов. Так показывают дорогу сильные клиники в выдаче
   (замечание владельца 14.10). */
/* Карта на главной во всю ширину секции, под ней ориентиры. */
.home-contacts {
  grid-template-columns: 1fr;
  align-items: start;
}
.home-contact-map.core-map-embed .core-landmarks {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.home-contact-map.core-map-embed {
  min-height: 0;
  padding: 24px;
  border-radius: 24px;
  background: var(--white);
  border: 1px solid var(--line);
}
.home-contact-map.core-map-embed iframe {
  height: min(360px, 50vh);
}

/* Иллюстрация шага: прозрачная 3D-иконка в углу карточки. */
.home-stage-list li {
  position: relative;
  overflow: hidden;
}
/* Этапы: заголовок секции во всю строку, под ним четыре шага подряд.
   Иллюстрация стоит НАД текстом в потоке, поэтому ничего не перекрывает
   (замечание владельца 14.10: иконка наезжала на заголовок шага). */
.home-stages {
  grid-template-columns: 1fr;
  gap: 24px;
}
.home-stage-list {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  margin-top: 0;
}
.home-stage-list li {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  align-content: start;
}
.home-stage-art {
  position: static;
  width: auto;
  height: 52px;
  object-fit: contain;
  object-position: left bottom;
  order: -1;
}
.home-stage-number {
  order: -2;
}
.home-stage-list li > div > b {
  display: block;
}
@media (max-width: 560px) {
  .home-stage-art {
    width: 38px;
  }
}

/* ── Иллюстрации в карточках (владелец 14.10) ──────────────────────────
   3D-иконка с прозрачным фоном стоит НАД текстом в потоке, поэтому ничего
   не перекрывает и карточка остаётся читаемой. */
.home-proof-art,
.home-honest-art {
  display: block;
  width: auto;
  height: 46px;
  object-fit: contain;
  object-position: left bottom;
  margin-bottom: 10px;
}

/* «Почему к нам приходят по рекомендации»: мягкий градиент вместо плоской
   белой плашки, чтобы блок читался как доводы, а не как список. */
.home-honest-grid article {
  background: linear-gradient(160deg, #ffffff 0%, #eef5fb 100%);
  border-color: #dae6f2;
}
.home-honest-grid article:nth-child(2n) {
  background: linear-gradient(160deg, #ffffff 0%, #f1f1fb 100%);
}
.home-honest-grid h3 {
  color: var(--figma-blue, #0f408f);
}

/* «К чему приводит отсутствие зуба»: то же оформление, читается как цепочка
   последствий, а не как ровный список. */
.home-waiting-grid article {
  background: linear-gradient(160deg, #ffffff 0%, #f6f1ee 100%);
}

/* «Второе мнение»: шаги крупнее и с заметным номером. */
.home-refused-steps li {
  gap: 16px;
  padding: 20px 22px;
}
.home-refused-steps li > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--figma-blue, #0f408f);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.home-refused-steps p {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}

/* ── Блог на главной карточками (владелец 14.10: «блога не видно») ─────── */
.home-journal {
  margin-top: var(--wb-section-pad);
  margin-bottom: var(--wb-section-pad);
  display: grid;
  gap: 20px;
}
.home-journal > .section-heading {
  flex-direction: column;
  align-items: start;
  gap: 12px;
  margin: 0;
}
.home-journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}
.home-journal-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 0 0 20px;
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.home-journal-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.home-journal-card b {
  padding: 0 22px;
  font-family: var(--figma-font-heading);
  font-size: 19px;
  line-height: 1.3;
  color: var(--figma-blue);
}
.home-journal-card span {
  padding: 0 22px;
  color: #46648a;
  font-size: 15px;
  line-height: 1.5;
}
.home-journal-card:hover {
  border-color: var(--figma-blue);
}

/* Иллюстрации «к чему приводит отсутствие зуба»: снимки, сгенерированные
   Codex по описанию (владелец 14.10). */
.home-waiting-grid article {
  padding: 0 0 20px;
  overflow: hidden;
}
.home-waiting-art {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  margin-bottom: 14px;
}
.home-waiting-grid h3,
.home-waiting-grid p {
  padding-inline: 20px;
}

/* Налоговый вычет: зелёная карточка, как на боевой посадочной. Раньше блок
   шёл голым текстом на фоне страницы (замечание владельца 14.10). */
.home-tax {
  margin-top: 20px;
  padding: 26px 28px;
  border-radius: 24px;
  background: linear-gradient(150deg, #e8f3d6 0%, #dcecc3 100%);
  border: 1px solid #cfe3b0;
  display: grid;
  gap: 10px;
}
.home-tax h3 {
  margin: 0;
  font-family: var(--figma-font-heading);
  font-size: 24px;
  color: #3f5a12;
}
.home-tax > p {
  margin: 0;
  max-width: 68ch;
  color: #35481a;
}
.home-tax ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.home-tax li {
  display: grid;
  gap: 2px;
  padding: 12px 18px;
  border-radius: 16px;
  background: #fff;
}
.home-tax li span {
  font-size: 13px;
  color: #4e6b17;
}
.home-tax li b {
  font-family: var(--figma-font-heading);
  font-size: 22px;
  color: #3f5a12;
  font-variant-numeric: tabular-nums;
}
/* Переход на страницу вычета — кнопка, а не строчная ссылка: владелец
   14.10 попросил «кнопкой, чтобы перекидывала на страницу». */
.home-tax .button-tax {
  justify-self: start;
  margin-top: 6px;
  background: #4e7015;
  color: #fff;
  border: 0;
}
.home-tax .button-tax:hover {
  background: #3f5a12;
  color: #fff;
}

/* Марки имплантатов со снимком: карточки одного размера, картинка во всю
   ширину карточки. */
/* Шесть марок ложатся тремя и тремя: при авторасстановке выходило четыре
   сверху и две снизу, симметрия ломалась (владелец 14.10). */
.home-brands ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 600px) {
  .home-brands ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.home-brands li {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 0 0 14px;
  border-radius: 16px;
  background: #f1f6fb;
  overflow: hidden;
}
.home-brand-art {
  display: block;
  width: 100%;
  height: 86px;
  object-fit: cover;
  margin-bottom: 10px;
}
.home-brands li b,
.home-brands li span,
.home-brands li small {
  padding-inline: 14px;
}

/* Карточка врача на главной: тот же вид, что в каталоге. */
.home-doctor {
  display: grid;
  align-content: start;
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
}
/* Снимок в светлом квадрате внутри белой карточки, как в каталоге врачей
   и на страницах услуг: один вид карточки на весь сайт (владелец 15.10). */
.home-doctor-image {
  display: block;
  margin: 18px 18px 0;
  border-radius: 18px;
  background: #eef3f8;
  overflow: hidden;
}
.home-doctor-image img {
  width: 100%;
  aspect-ratio: 7 / 6;
  height: auto;
  object-fit: cover;
  object-position: center 6%;
  display: block;
}
.home-doctor-body {
  display: grid;
  gap: 4px;
  padding: 18px 18px 20px;
}
.home-doctor-body h3 {
  margin: 0;
  font-family: var(--figma-font-heading);
  font-size: 26px;
  line-height: 1.2;
}
.home-doctor-body > p {
  font-size: 17px;
}
.home-doctor-body h3 a {
  color: var(--figma-blue);
  text-decoration: none;
}
.home-doctor-body > p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}
.home-doctor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.home-doctor-actions .button {
  min-height: 46px;
  min-width: 0;
  justify-content: center;
}
@media (max-width: 900px) {
  .home-doctor-actions {
    grid-template-columns: 1fr;
  }
}

/* ── «Что мы лечим и восстанавливаем» ──────────────────────────────────
   Было две белые карточки со списком ссылок. Стало: иллюстрация направления,
   градиент и заметные ссылки на услуги (владелец 14.10). */
.home-catalog-group {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #eaf3fb 100%) !important;
  overflow: hidden;
}
.home-catalog-art {
  display: block;
  width: auto;
  height: 56px;
  object-fit: contain;
  object-position: left bottom;
  margin: 0 0 12px;
}
.home-catalog-group ul a {
  font-weight: 600;
}

/* Врачи на главной листаются пальцем, как кейсы в планах лечения
   (владелец 14.10), и карточка стала крупнее. */
.home-doctors {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(360px, 82vw), 1fr);
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.home-doctors::-webkit-scrollbar {
  display: none;
}
.home-doctor {
  scroll-snap-align: start;
}
.home-doctor-body {
  padding: 20px 22px 22px;
  gap: 6px;
}
.home-doctor-body h3 {
  font-size: 21px;
}
.home-doctor .dp-card-chips {
  margin: 0 0 10px;
}
.home-doctor .dp-card-chips::-webkit-scrollbar {
  display: none;
}
.home-doctor .dp-chip {
  white-space: normal;
}

/* Лента случаев на главной: цель касания у чипов-ссылок не меньше 44 px. */
@media (max-width: 760px) {
  .home-case-links a {
    min-height: 44px !important;
  }
}

/* Ревью 15.10.2026: фильтры врачей на главной были 34 px по высоте, а это
   настоящая кнопка, а не строчная ссылка. Поднимаем до пола касания.
   Капсулы-надзаголовки и мелкие подписи были 12 px при полу 13. */
.doctor-filters button {
  min-height: 44px !important;
  padding-inline: 16px !important;
}
@media (max-width: 760px) {
  .eyebrow,
  .wb-promo-date,
  .wb-promo-day {
    font-size: 13px !important;
  }
}

/* Строка образования на главной оставалась серой: правило
   `.home-doctor-body > p` весомее `.dp-card-school`, а a11y.css грузится
   последним. Здесь возвращаем выделение (владелец 15.10). */
.home-doctor-body > p.dp-card-school {
  color: var(--blue);
  font-weight: 600;
  font-size: 14px;
}

/* ── Мобильный проход 15.10.2026 ──────────────────────────────────────
   Пол кегля 13 px и пол цели касания 44 px на всех страницах. Номера
   зубов в схеме исключены намеренно: это подпись внутри кнопки 44 px,
   а не самостоятельный текст. */
@media (max-width: 760px) {
  .dp-main span:not(.tooth-button span):not([class*="tooth"]),
  .dp-main small,
  .core-page small,
  main small,
  .footer-legal-line {
    font-size: max(13px, 1em);
  }
  .tooth-button > span:not(.tooth-check) {
    font-size: 9px;
  }
  main a.text-link,
  main a.dp-inline-link,
  main a.implant-phone,
  main .implant-text-link,
  main button:not(.tooth-button):not([data-tooth]) {
    min-height: 44px;
  }
  main a.text-link,
  main a.dp-inline-link,
  main a.implant-phone,
  main .implant-text-link {
    display: inline-flex;
    align-items: center;
  }
}

/* Пол кегля и цели касания на телефоне: правила выше не доставали до
   главной и блога, потому что опирались на .dp-main. Здесь floor задан
   от main и footer целиком. `!important` в этом файле намеренный. */
@media (max-width: 760px) {
  /* 🔴 Здесь было `font-size: max(13px, 1em)`, и это оказалось ловушкой:
     `1em` это УНАСЛЕДОВАННЫЙ размер, а не собственный. Правило ужимало
     всё, что задано крупнее родителя: рейтинги площадок с 26 px падали до
     размера абзаца и переставали проходить по контрасту как крупный текст.
     Поднимаем пол точечно, у тех, кто правда был мельче 13 px. */
  main :is(small, cite, time, figcaption),
  footer :is(small, .footer-legal-line) {
    font-size: 13px !important;
  }
  main .eyebrow,
  main .dp-card-school,
  main .home-case-price small,
  main .home-case-price span,
  main .implant-hero-note,
  main .wb-promo-gain {
    font-size: 13px !important;
  }
  main .tooth-button > span:not(.tooth-check) {
    font-size: 9px !important;
  }
  main :is(a.text-link, a.dp-inline-link, a.implant-phone, .implant-text-link) {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
  }
}

/* Телефон ссылкой в тексте: это основное действие на контактах, по нему
   звонят с телефона, поэтому он обязан быть не меньше пола касания. */
@media (max-width: 760px) {
  main a[href^="tel:"] {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
  }
}

/* Ссылка внутри абзаца на странице услуги («цены клиники») тоже кликается
   пальцем: поднимаем её до пола касания. */
@media (max-width: 760px) {
  main p a:not(.button) {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
  }
}

/* Оставшиеся места с кеглем 12 px на телефоне, найденные замером 15.10.
   Перечислены поимённо, потому что общее правило через `1em` ломало
   элементы, заданные крупнее родителя. */
@media (max-width: 760px) {
  main :is(.service-tile b, .blog-card-meta span, .blog-card-bottom span),
  main :is(.consent span, .blog-list-status, .blog-list-status span),
  main :is(.implant-quiz-progress span, .tooth-sides span),
  main .dp-hero-place .dp-hero-location b,
  main .home-story-quote cite,
  main .home-stories-note,
  main .home-cases-note {
    font-size: 13px !important;
  }
  main .blog-card-meta,
  main .blog-card-bottom,
  main .tooth-sides {
    font-size: 13px !important;
  }
}

/* Фильтры врачей переносятся по строкам: после поднятия кегля до 13 px и
   цели касания до 44 px три кнопки в одну строку не помещались на 320 и
   выносили страницу за экран на 9 px (гейт test:header). */
.doctor-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Платная строка в блоке бесплатной консультации: снимок стоит 500 ₽ и
   не входит в приём. Отделяем её от списка бесплатного, чтобы она не
   читалась как ещё один подарок (владелец 16.10: «надо везде 3D-снимок
   указать»). */
.home-gift-paid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 12px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.home-gift-paid b {
  font-size: 15px;
  font-weight: 700;
}
.home-gift-paid > span {
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}
.home-gift-paid small {
  grid-column: 1 / -1;
  font-size: 13px;
  opacity: 0.82;
}

/* ── Первый экран на телефоне: фото снизу, текст сверху ────────────────
   Снимок горизонтальный 16:9. В вертикальном окне 390×810 он по высоте
   совпадает точь-в-точь, поэтому сдвигать кадр можно только вбок, и
   женщина либо не попадает в кадр вовсе, либо оказывается прямо под
   заголовком. Владелец 16.10: «фотка в мобильной вёрстке как через
   жопу». Поэтому на телефоне снимок занимает нижнюю половину экрана,
   текст стоит на синем сверху, а плашка акции ложится на стык. */
@media (max-width: 760px) {
  /* Плашка «Бесплатная консультация имплантолога». На широком экране
     рисунок это высокий срез в правой части карточки и читается как часть
     плашки. На телефоне от него оставался квадрат 64x64 в правом верхнем
     углу: кусок атласа со своим светлым фоном, наклейка поверх синей
     карточки (владелец 16.10: «фото в правом верхнем углу некрасиво»).
     Размер и кадр этой картинки задаёт `media.js` ИНЛАЙНОМ по data-crop,
     поэтому переложить её стилями нельзя: инлайн-стиль сильнее. А прозрачной
     версии этого кадра у нас нет. Поэтому на телефоне картинку снимаем:
     карточка остаётся с заголовком, условием и стрелкой, и это ровно та
     карточка, по которой чаще всего нажимают. */
  .promo-blue .promo-art {
    display: none;
  }
}

@media (max-width: 760px) {
  .hero {
    background: var(--figma-blue, #0f408f);
  }
  /* Снимок стоит В ПОТОКЕ последним блоком экрана, а не подложкой. Пока
     он был подложкой, его полоса висела у нижнего края, и на страницах с
     более высоким текстом (услуги) плашка акции снова садилась прямо на
     лицо. В потоке снимок всегда ниже текста, на любой высоте блока. */
  .hero-background {
    position: static;
    order: 99;
    width: 100%;
    /* 64% подобраны замером: при меньшей полосе лицо попадает под плашку
       акции, при большей текст ложится на снимок и теряет читаемость.
       Кадр 15% по горизонтали ставит лицо в середину полосы (снимок на
       странице отражён, поэтому значение меньше половины). */
    /* Полоса со снимком стоит НИЖЕ плашки акции, а не под ней: иначе
       лицо попадало ровно под цифры и плашку, и «продающего лица» не
       оставалось (владелец 16.10). Высота фиксированная, а не в
       процентах: процент тянулся за высотой экрана и кадр уезжал. */
    height: 330px;
    object-position: 20% 16%;
    mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 100%);
  }
  .hero {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Отступы переехали сюда с `.hero-inner`: ниже он становится
       `display: contents`, и свои поля отдаёт родителю. */
    padding: 118px 18px 28px;
  }
  /* Владелец 16.10: «в мобильной верстке фото ты можешь поставить под
     кнопку записаться на консультацию, и потом уже преимущества». Снимок
     это ребёнок `.hero`, а кнопка и преимущества лежат двумя уровнями
     ниже, внутри `.hero-copy`. Поэтому на узком экране обе обёртки
     становятся `display: contents`: их дети выстраиваются в один
     вертикальный ряд `.hero`, и порядок задаётся одним свойством.
     Собственных полей и фона у обёрток нет, терять нечего. */
  .hero-inner,
  .hero-copy {
    display: contents;
  }
  .hero-eyebrow {
    order: 1;
  }
  .hero h1 {
    order: 2;
  }
  .hero-copy > p,
  .hero-lead {
    order: 3;
  }
  .hero-actions {
    order: 4;
  }
  .hero-background {
    order: 5;
    /* Снимок во всю ширину экрана: поля родителя снимаем отрицательным
       отступом, а края растворяем в синем маской сверху и снизу, иначе
       прямоугольник режет первый экран пополам. */
    margin: 26px -18px 0;
    width: calc(100% + 36px);
    /* Лицо посередине полосы (владелец 16.10). Счёт, а не подбор: снимок
       1672x941 и зеркальный. При `object-fit: cover` в полосе 390x420
       масштаб 0,446, в кадр попадает 874 px исходника, лицо стоит в нём
       на 418 px. При `object-position: 0%` это 48% ширины полосы, после
       отражения 52%: середина. Полоса ниже 420 px кадр расширяет, и лицо
       уезжает вбок, выровнять его там нечем. */
    height: 420px;
    object-position: 0% 50%;
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 14%,
      #000 86%,
      transparent 100%
    );
  }
  .hero-stats {
    order: 6;
  }
  .hero-offers {
    order: 7;
  }
  .hero-copy > .hero-offers,
  .hero-offers {
    margin-top: 26px;
  }
}

/* ── 320 px ────────────────────────────────────────────────────────────
   «Восстановление» в заголовке не влезало в строку и рвалось пополам
   («Восстановлени / е»), а цена в плашке акции наезжала на синюю дату.
   Уменьшаем кегль ровно настолько, чтобы длинное слово поместилось. */
@media (max-width: 360px) {
  .hero h1 {
    font-size: 30px;
    line-height: 1.08;
  }
  .wb-promo-banner .wb-promo-price {
    font-size: 24px;
  }
  .wb-promo-banner .wb-promo-name {
    min-width: 0;
    padding: 14px 10px 14px 14px;
  }
  .wb-promo-banner .wb-promo-date {
    min-width: 78px;
    padding: 12px 10px;
  }
  .wb-promo-banner .wb-promo-day b {
    font-size: 22px;
  }
}

/* ── Блок «С чем приходят и сколько это стоит» на телефоне ─────────────
   Ценник был свёрстан в две колонки: цена слева, пояснение справа. На
   390 второй колонке оставалось 70 px, и текст шёл по одному слову в
   строке, а сама цена рвалась как «17 / 500 / ₽». Владелец 16.10:
   «текст сплошные строки по одному слову, цены в строки не уместились».
   На телефоне раскладываем в столбик: цена целой строкой, под ней
   пояснение во всю ширину. */
@media (max-width: 700px) {
  /* Карточка случая на телефоне это один столбец: картинка, текст, ссылки,
     ценник. Раньше тут оставалась двухколоночная сетка с нулевой первой
     колонкой, и ценник получал нулевую ширину, из-за чего пояснение
     сыпалось по одному слову в строку. */
  .home-cases-list .home-case {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .home-cases-list .home-case > .home-case-art {
    grid-row: auto;
  }
  .home-cases-list .home-case > .home-case-body,
  .home-cases-list .home-case > .home-case-price {
    grid-column: 1;
    width: auto;
    min-width: 0;
  }
  .home-case-price {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }
  .home-case-price b {
    grid-row: auto;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
  .home-case-price span,
  .home-case-price small {
    grid-column: auto;
  }
  /* Заголовок секции и ссылки «Все услуги / Все цены» налезали друг на
     друга: на узком экране они не помещались в один ряд. */
  .home-cases > .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .home-cases-links {
    gap: 8px 18px;
  }
}

/* ── Телефон: по одной карточке в ряд ──────────────────────────────────
   Владелец 16.10 на живом сайте: «специальные предложения нужно по одной,
   профессиональная чистка не влазит, стрелочка перекрывает текст»;
   «врачи, которым доверяют — раз врач, снизу второй, ещё снизу третий».
   Замер подтвердил: предложения шли в две колонки по 171 px, врачи в
   ТРИ по 104 px. В такую ширину не влезает ни подпись, ни портрет. */
@media (max-width: 760px) {
  .offer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Врачи на телефоне идут СТОЛБИКОМ, а не лентой с прокруткой вбок.
     Лента была задумана как карусель, но карточки в ней ужимались до
     104 px и читались как мусор; плюс половину врачей просто не видно,
     пока не догадаешься смахнуть. */
  .home-doctors {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
    justify-items: stretch;
  }
  /* Карточка тянется во всю ширину: в ленте она была фиксированной и
     после перевода в столбик осталась 260 px при колонке 354. */
  .home-doctors > .home-doctor {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    scroll-snap-align: none;
  }
  /* Карточка предложения: стрелка в правом нижнем углу, текст не
     заезжает под неё. На телефоне стрелка стояла СЛЕВА поверх подписи и
     перекрывала и заголовок, и цену (владелец 16.10). */
  .promo {
    min-height: 0;
    padding: 22px 22px 70px;
  }
  .promo strong {
    font-size: 20px;
    line-height: 1.2;
  }
  .promo .round-button {
    left: auto;
    right: 18px;
    bottom: 18px;
  }
  /* Картинка предложения не налезает на текст: на узкой карточке она
     занимала правую половину и подпись шла под ней. */
  .promo .promo-art {
    right: 14px;
    top: 14px;
    width: 64px;
    height: 64px;
  }
}

/* Номер шага в блоке «В другой клинике сказали» был овалом: ширину
   задавал текст, а высота стояла фиксированной. Делаем настоящий круг. */
.home-refused-steps > li > span,
.home-stages li > span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
}

/* Плашка об обработке данных. Стоит над липкой кнопкой записи, но не
   перекрывает её: на телефоне обе внизу, поэтому у плашки свой отступ. */
.data-notice {
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  max-width: 1120px;
  margin-inline: auto;
  padding: 16px 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line, #d7e3f0);
  box-shadow: 0 18px 40px rgba(12, 42, 82, 0.18);
}
.data-notice p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.data-notice a {
  color: var(--blue, #0f408f);
}
.data-notice .button {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .data-notice {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    bottom: 90px;
  }
}