/* ==========================================================
   Delta Dental — Казань, протезирование. Первый экран.
   v8: полная шапка (лого, меню, телефон-триггер, CTA, бургер),
   модалка обратного звонка, единый радиус 28 для плиты/шапки/кнопок,
   более светлый цвет шапки (WCAG AA к белому: 6.84:1).
   Шрифты: Golos Text (заголовки) + Onest (текст).
   ========================================================== */

:root {
  --color-brand-blue: #00A0E3;
  --color-brand-blue-light: #1FB4F0;
  --color-brand-blue-dark: #0090D6;
  --color-brand-navy: #0B3C5D;
  --color-header-bg: #1F5F8B; /* светлее navy на 3-4 тона, контраст к белому 6.84:1 (WCAG AA) */
  --color-white: #FFFFFF;
  --color-text-primary: #1A1A1A;
  --color-error: #B42318;
  --color-bg-gradient-start: #EAF6FD;
  --color-bg-gradient-end: #FFFFFF;
  --plate-accent: #EAF6FD;
  --page-bg: #F3F8FB; /* 17.09: подложка страницы, чтобы белые плиты читались в чередовании с голубыми */

  --font-family: 'Onest', 'Inter', sans-serif;
  --font-family-display: 'Golos Text', 'Onest', sans-serif;

  --h1-size: 34px;  /* v10: капс-заголовок в 2 предложения, кегль под 3 строки на десктопе */
  --h1-size-mobile: 22px;   /* база ≤767px; на ≤767 конкретно переопределяется в 20px, см. ниже */
  --h1-line-height: 1.14;

  --body-size: 18px;
  --body-size-mobile: 16px;
  --body-line-height: 1.6;

  --radius-plate: 28px; /* единый угол: плита, шапка, кнопки */
  --radius-card: 18px;
  --radius-chip: 18px;

  --shadow-card: 0 4px 24px rgba(0, 160, 227, 0.08);
  --shadow-header: 0 2px 12px rgba(11, 60, 93, 0.10);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  --plate-pad: 84px; /* единые левые/правые поля шапки и hero-плиты (десктоп) */

  /* --- v9: вертикальный ритм левой колонки hero ---
     Все межблочные интервалы колонки берутся ТОЛЬКО отсюда, чтобы левые края
     и шаги между блоками читались как одна сетка. */
  --col-text-max: 620px;        /* предел ширины текстовой колонки */
  --rhythm-eyebrow: 14px;       /* чип-надзаголовок до H1 */
  --rhythm-h1: 18px;            /* H1 до подзаголовка */
  --rhythm-lead: 28px;          /* подзаголовок до буллитов */
  --rhythm-cta: 16px;           /* кнопка до подписи под ней */
  --rhythm-note: 18px;          /* подпись под кнопкой до дисклеймера */
  --card-gap: 12px;             /* шаг между карточками-буллитами */
  --card-pad: 14px 10px;        /* внутренние поля карточки */
  --card-icon-size: 56px;       /* иконка карточки */
  --card-title-size: 14px;      /* заголовок карточки */
  --card-note-size: 12px;       /* пояснение карточки */
  --chip-lip: 3px;              /* толщина тени-«губы» у чипа-наклейки */
  --chip-dot: 6px;              /* маркер-точка у чипа-штампа */
  --chip-pin: 14px;             /* микро-иконка геолокации у чипа-плашки */
  --doodle-ink: var(--color-brand-navy);  /* контур дудлов, для генерации новых */
  --doodle-fill: #A8DCF5;                 /* заливка дудлов */
}

@media (max-width: 991px) {
  :root { --plate-pad: 52px; }
}

@media (max-width: 767px) {
  :root {
    /* 16.09 мобильный hero: приказ владельца — CTA обязана быть видна без
       прокрутки на 375×812; кегли/ритм/сцена сжаты, чтобы весь блок до кнопки
       уместился выше сгиба. Подпись под кнопкой и дисклеймер могут уйти вниз. */
    --h1-size: 22px;
    --body-size: var(--body-size-mobile);
    --plate-pad: 24px;

    /* Мобильный вертикальный ритм: 8px внутри одной смысловой группы,
       24px между группами. */
    --rhythm-eyebrow: var(--space-sm);
    --rhythm-h1: var(--space-lg);
    --rhythm-lead: var(--space-lg);
    --rhythm-cta: var(--space-md);   /* было var(--space-sm)=8px, стало 16px — воздух после CTA */
    --rhythm-note: 12px;             /* было var(--space-sm)=8px, стало 12px — между note и disc */
    --card-gap: 4px;
    --card-pad: var(--space-sm) 6px; /* было 5px 4px — текст упирался в края карточки */
    --card-icon-size: 20px;          /* было 24px — компенсация роста высоты карточки */
    --card-title-size: 9.5px;
    --card-note-size: 8px;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body.dd-hero-body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-text-primary);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

.dd-h1, .dd-btn, .dd-benefit__num { font-family: var(--font-family-display); }

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

.dd-nodrag { pointer-events: none; -webkit-user-drag: none; user-select: none; }

/* ---------- Плита ---------- */
.dd-plate {
  max-width: 1420px;
  margin: 14px auto;
  border-radius: var(--radius-plate);
  overflow: clip;
}
.dd-plate--warm { background: var(--plate-accent); }
.dd-plate--white { background: var(--color-white); }

/* ---------- Шапка-плита ---------- */
.dd-header-wrap { max-width: 1420px; margin: 14px auto 0; position: relative; z-index: 40; }
.dd-header {
  background: var(--color-header-bg);
  border-radius: var(--radius-plate);
  box-shadow: var(--shadow-header);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: 12px var(--plate-pad);
  position: relative;
}
.dd-header__logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.dd-header__logo img { height: 56px; width: auto; -webkit-user-drag: none; user-select: none; }

/* Меню-якоря (десктоп) */
.dd-nav { display: none; align-items: center; gap: 22px; }
.dd-nav a {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .16s ease, opacity .16s ease;
  white-space: nowrap;
}
.dd-nav a:hover, .dd-nav a:focus-visible { border-bottom-color: #fff; opacity: .92; }

.dd-header__right { display: flex; align-items: center; gap: 12px; flex: none; }

.dd-header__phone {
  background: rgba(255,255,255,.14);
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease;
}
.dd-header__phone:hover { background: rgba(255,255,255,.22); }
.dd-header__phone--mobile { display: none; }

/* Бургер (мобильный) */
.dd-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,.14);
  cursor: pointer;
}
.dd-burger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.dd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Мобильное меню (выпадающее) */
.dd-nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--color-header-bg);
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 12px 30px rgba(11,60,93,.28);
  z-index: 45;
}
.dd-nav-mobile.is-open { display: flex; }
.dd-nav-mobile a {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background .16s ease;
}
.dd-nav-mobile a:hover { background: rgba(255,255,255,.12); }
.dd-nav-mobile .dd-header__phone--mobile {
  display: block;
  margin: 6px 4px 2px;
  text-align: center;
}

/* ---------- Кнопка объёмная, радиус как у плиты ---------- */
.dd-btn {
  font-family: var(--font-family-display);
  font-weight: 700;
  border-radius: var(--radius-plate);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease;
}
.dd-btn--primary {
  background: linear-gradient(180deg, var(--color-brand-blue-light) 0%, var(--color-brand-blue-dark) 100%);
  color: var(--color-white);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 4px 0 #0672AD,
    0 10px 24px rgba(0,160,227,.35);
}
.dd-btn--primary:hover { transform: translateY(-1px); }
.dd-btn--primary:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 1px 0 #0672AD,
    0 4px 10px rgba(0,160,227,.30);
}

.dd-header__cta { font-size: 14.5px; padding: 10px 22px; min-height: 42px; border-radius: 999px; }
.dd-btn--big { font-size: 17px; padding: 16px 32px; min-height: 54px; }

/* ---------- Модалка обратного звонка ---------- */
.dd-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dd-modal[hidden] { display: none; }
.dd-modal__backdrop { position: absolute; inset: 0; background: rgba(11,60,93,.45); backdrop-filter: blur(2px); }
.dd-modal__box {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: var(--radius-plate);
  padding: 32px 28px 28px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 30px 60px rgba(11,60,93,.30);
}
.dd-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: none;
  background: var(--plate-accent);
  color: var(--color-brand-navy);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.dd-modal__title { font-family: var(--font-family-display); font-size: 20px; font-weight: 800; color: var(--color-brand-navy); margin: 0 0 18px; line-height: 1.3; padding-right: 24px; }
.dd-modal__form { display: flex; flex-direction: column; gap: 12px; }
.dd-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-brand-navy); }
.dd-field input[type="text"], .dd-field input[type="tel"] {
  font-family: var(--font-family);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(11,60,93,.15);
  outline: none;
}
.dd-field input:focus { border-color: var(--color-brand-blue); }
.dd-field--check { flex-direction: row; align-items: flex-start; gap: 8px; font-size: 12.5px; font-weight: 500; opacity: .8; }
.dd-field--check input { margin-top: 2px; }
.dd-modal__submit { margin-top: 4px; }
.dd-modal__result { font-size: 13.5px; font-weight: 700; color: var(--color-brand-blue-dark); margin: 6px 0 0; text-align: center; }
.dd-honeypot { position: absolute; left: -9999px; }
.dd-modal__error { font-size: 13.5px; font-weight: 600; color: var(--color-error); margin: 6px 0 0; text-align: center; }
.dd-modal__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  text-align: center;
}
.dd-modal__success[hidden] { display: none; }
.dd-modal__success-title {
  font-family: var(--font-family-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--color-brand-navy);
  line-height: 1.2;
  margin: 0;
}
.dd-modal__success-text {
  font-size: 15px;
  color: var(--color-brand-navy);
  line-height: 1.4;
  margin: 0;
}
.dd-modal__success-schedule {
  font-size: 12.5px;
  color: var(--color-text-primary);
  line-height: 1.4;
  opacity: 0.65;
  margin: 0;
}

/* ---------- Hero ---------- */
.dd-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-3xl) var(--plate-pad) var(--space-2xl);
}

/* minmax(0,1fr): колонка обязана сжиматься под грид, иначе широкий потомок
   (дудл-штрих, длинное слово) раздувает её и весь контент съезжает за плиту */
.dd-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; position: relative; }
.dd-hero__col-text, .dd-hero__col-media { min-width: 0; }
.dd-hero__col-text { position: relative; z-index: 2; }
.dd-hero__col-media { position: relative; z-index: 1; }

/* ---------- Чип-надзаголовок (v9) ----------
   Плашка-«ярлык» над H1: город и суть услуги, задаёт контекст до заголовка. */
.dd-eyebrow {
  display: inline-block;
  margin: 0 0 var(--rhythm-eyebrow);
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-brand-navy);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  box-shadow: 0 2px 0 rgba(11, 60, 93, .10), 0 6px 16px rgba(11, 60, 93, .10);
}

/* ---------- Варианты чипа (v11) ----------
   Три характера одного компонента. Все значения из токенов hero.css,
   инлайн-стилей нет. В hero сейчас стоит --sticker.

   (а) sticker — наклейка: плотная тень-«губа» и лёгкий наклон,
       элемент выглядит физически приклеенным, а не нарисованным. */
.dd-eyebrow--sticker {
  transform: rotate(-1.5deg);
  transform-origin: left center;
  border-radius: var(--radius-chip);
  box-shadow:
    0 var(--chip-lip) 0 var(--color-brand-navy),
    0 calc(var(--chip-lip) + 6px) 18px rgba(11, 60, 93, .18);
}

/* (б) stamp — штамп: тонкая обводка фирменным синим, без заливки-тени,
       перед текстом маркер-точка. Характер описи, не рекламной плашки. */
.dd-eyebrow--stamp {
  background: transparent;
  border: 1.5px solid var(--color-brand-blue);
  border-radius: var(--radius-chip);
  box-shadow: none;
  color: var(--color-brand-navy);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  /* inline-block, НЕ inline-flex: flex схлопывает пробел между текстовым
     узлом и вложенным span, слова слипаются. Маркер позиционируем сами. */
  position: relative;
  padding-left: calc(16px + var(--chip-dot) + var(--space-sm));
}
.dd-eyebrow--stamp::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  margin-top: calc(var(--chip-dot) / -2);
  width: var(--chip-dot);
  height: var(--chip-dot);
  border-radius: 999px;
  background: var(--color-brand-blue);
}

/* (в) pill — плашка с мягким градиентом плиты и микро-иконкой геолокации.
       Самый спокойный вариант: сливается с подложкой, метка даёт «мы рядом». */
.dd-eyebrow--pill {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--plate-accent) 100%);
  border: 1px solid rgba(11, 60, 93, .10);
  box-shadow: 0 4px 12px rgba(11, 60, 93, .08);
  /* inline-block, НЕ inline-flex: flex схлопывает пробел между текстовым
     узлом и вложенным span, слова слипаются. Метку позиционируем сами. */
  position: relative;
  padding-left: calc(16px + var(--chip-pin) + var(--space-sm));
}
.dd-eyebrow--pill::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  margin-top: calc(var(--chip-pin) / -2 - 1px);
  width: var(--chip-pin);
  height: var(--chip-pin);
  background: var(--color-brand-blue);
  /* капля-булавка: круг с одним острым углом, повёрнутый на 45° */
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.dd-h1 {
  font-size: var(--h1-size);
  line-height: 1.2;
  font-weight: 800;
  /* КАПС: прямое требование владельца 15.09 (перебивает правило ru-copy-typography).
     В капсе межбуквенное нужно чуть расширить, иначе строка слипается. */
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0 0 var(--rhythm-h1);
  color: var(--color-brand-navy);
  max-width: var(--col-text-max);
  text-wrap: balance;
}
/* акцент внутри строки, без принудительного переноса */
.dd-h1__acc { color: var(--color-brand-blue); }

/* ---------- v10: маркерное подчёркивание и стрелка-дудл УБРАНЫ ----------
   Контурный маркер выбивался из реализма карточек (решение владельца 15.09).
   Контурные версии дудлов сохранены как img/doodles/*-sketch.webp. */

.dd-lead {
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  color: var(--color-text-primary);
  opacity: .8;
  max-width: var(--col-text-max);
  margin: 0 0 var(--rhythm-lead);
}

/* ---------- Карточки-буллиты в ряд (v10) ----------
   4 одинаковые карточки в одну строку: иконка сверху, жирный заголовок,
   короткая строка пояснения. Компактнее столбика из четырёх строк текста. */
.dd-bullets__intro {
  margin: 0 0 var(--space-sm);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-brand-navy);
  opacity: .75;
}
.dd-cards {
  list-style: none;
  margin: 0 0 var(--rhythm-lead);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--card-gap);
  max-width: var(--col-text-max);
}
.dd-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: var(--card-pad);
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.dd-card__icon {
  width: var(--card-icon-size);
  height: var(--card-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dd-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.dd-card__title {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: var(--card-title-size);
  line-height: 1.2;
  color: var(--color-brand-navy);
  overflow-wrap: break-word;
}
.dd-card__note {
  font-size: var(--card-note-size);
  line-height: 1.3;
  color: var(--color-text-primary);
  opacity: .65;
}

/* ---------- Плита 2×2 (наследие v8, в hero не используется) ---------- */
.dd-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin: 0 0 var(--space-xl);
  max-width: 620px;
}
.dd-benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--color-brand-navy);
}
.dd-benefit__check { flex: none; margin-top: 1px; }
.dd-benefit--price {
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  color: #fff;
  background: linear-gradient(180deg, var(--color-brand-blue-light) 0%, var(--color-brand-blue-dark) 100%);
}
.dd-benefit__num { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.dd-benefit__sub { font-size: 13px; font-weight: 700; line-height: 1.3; }
.dd-benefit__note { font-size: 11.5px; opacity: .85; margin-top: 2px; }

/* ---------- Четыре чипа-плашки hero (22.09d, сетка 2x2, дудл слева + текст справа, единая высота) ---------- */
.dd-hA__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: 0;
  align-items: stretch;
  /* Требование владельца: ВСЕ ЧЕТЫРЕ плашки одного размера. `align-items:stretch`
     равняет карточки только ВНУТРИ своей строки сетки, а две строки по умолчанию
     имеют разную натуральную высоту (замер 1440x900: 118px первая против 92px
     вторая — из-за трёхстрочного заголовка «Бесплатная консультация и 3D-диагностика»).
     `grid-auto-rows: 1fr` равняет и строки между собой — четыре карточки становятся
     одного размера на всех вьюпортах. */
  grid-auto-rows: 1fr;
}
.dd-hA__chip {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-sm);
  background: var(--color-white);
  border: 1px solid rgba(11,60,93,.08);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
  min-width: 0;
  height: 100%;
}
.dd-hA__chip-icon {
  width: 56px; height: 56px; flex: 0 0 auto; object-fit: contain;
  margin: 0;
}
.dd-hA__chip-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; min-width: 0; width: 100%; }
.dd-hA__chip-text b {
  font-family: var(--font-family-display); font-weight: 800; font-size: 13px; color: var(--color-brand-navy);
}
.dd-hA__chip-text small { font-size: 11.5px; font-weight: 600; color: var(--color-text-primary); opacity: .72; margin-top: 6px; }
/* Акцентная карточка «Акция» — рамка бренда + подложка + стикер в углу, как «наш метод» */
.dd-hA__chip--promo {
  position: relative;
  /* Рамка промо-карточки толще соседних (2px против 1px) — это акцент, его владелец
     принимал. Но БОКС от неё сдвигался: внутренняя раскладка уезжала на 1px вниз и
     текст был на 2px уже, чем у соседей (замер 1440x900: iconTop 18 против 17,
     textW 197 против 199) — то есть «одинаковая внутренняя раскладка» нарушалась.
     Поэтому вторая линия рисуется тенью (`box-shadow`, вне потока), а бокс рамки
     остаётся 1px, как у трёх соседних карточек. */
  border: 1px solid var(--color-brand-blue);
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-brand-blue);
  background: linear-gradient(180deg, var(--plate-accent) 0%, var(--color-white) 60%);
  /* 23.09 STOM-61: стикер держится ВНУТРИ карточки (правило ниже), поэтому запас сверху
     под него больше не нужен — карточка не раздувается и по высоте равна соседним.
     Прежний `padding-top: ... !important` снят вместе с причиной, ради которой стоял. */
}
/* ===== STOM-61 (23.09): стикер «до 30 сентября» ВНУТРИ карточки — общая причина =====
   Диагностика (Правило №0-DIAG, живой замер 14 вьюпортов на бою): стикер налезал на
   соседнюю карточку «Честная цена» НЕ на одном 844x390, а на ВСЕХ 14 вьюпортах
   (перекрытие 340-770 px²) — то есть это не брейкпоинтный дефект, а структурный.

   Причина: `position:absolute; top:-12px` выносил бокс стикера ВЫШЕ верхней границы
   промо-карточки, в зазор грида. Промо-карточка — правая нижняя ячейка сетки 2x2,
   и этот зазор физически принадлежит карточке «Честная цена» над ней. При любом
   отрицательном `top` бокс стикера пересекает соседа — поэтому три прежние точечные
   правки (22.09h, 23.09, 23.09b), крутившие top/right/padding на своих брейкпоинтах,
   причину не убирали, а только меняли величину перекрытия.

   Общее решение — одно правило на все брейкпоинты: стикер прижат ВНУТРЬ карточки
   (top/right = 0 в её padding-box). Наклон -4° сохранён, но крутится от правого
   верхнего угла (transform-origin), чтобы поворот не выносил угол за карточку.

   ВАЖНО (гоча STOM-60, повторилась здесь): сам элемент несёт ДВА класса —
   `dd-b3a__chips` (общий компонент-тег, стилизуется в ОТДЕЛЬНОМ файле
   `blocks/_preview-A.css:80` значениями `top:-14px; right:16px`) и `dd-hA__chip-sticker`.
   `_preview-A.css` подключается ПОСЛЕ `hero.css`, поэтому при равной специфичности
   выигрывал он — правило только на `.dd-hA__chip-sticker` не применялось вовсе
   (замер: computed top = -14px, хотя в hero.css такого значения нет).
   Поэтому селектор ниже усилен родителем `.dd-hA__chip--promo` (0,2,0 против 0,1,0):
   он перебивает внешний файл, но не трогает общий компонент-тег в других секциях. */
/* ===== ИСПРАВЛЕНИЕ РЕГРЕССИИ 23.09 (владелец, десктоп ~1435px) =====
   Первая версия этого правила вынула стикер в НОРМАЛЬНЫЙ поток карточки (`order:3`
   в nowrap-строке). Перекрытие она убрала, но сломала то, что владелец принимал
   раньше и требует снова: ЧЕТЫРЕ плашки выгод должны быть одного размера и с
   одинаковой внутренней раскладкой. Стикер в потоке забирал себе ширину правой
   колонки, поэтому у промо-карточки (и только у неё) текстовый блок сжимался
   вдвое (живой замер 1440x900: textW 199px у соседей против 98px у промо),
   заголовок ломался на «Акция / до −30%», описание растягивалось на 4 строки
   и карточка становилась выше соседей (132px против 118px).

   Правильное решение — стикер ВНЕ потока (`position:absolute`), но строго в
   пределах бокса СВОЕЙ карточки по горизонтали, а по вертикали не глубже
   половины зазора сетки, чтобы не заходить в бокс соседа сверху:
   - `right: 8px` — правый край стикера внутри карточки, наклон -4° крутится от
     правого края (`transform-origin: 100% 50%`), поэтому угол не вылезает;
   - `top: calc(var(--space-sm) / -2)` — подъём ровно на половину `gap` сетки,
     то есть бокс упирается в середину зазора и границы соседа не достигает;
   - текст карточки при этом на ПОЛНУЮ ширину, как у трёх соседей — никакого
     `padding-right` и никакого `min-width:0`-сжатия больше не требуется.
   Проверка симметрии добавлена в замер (высоты 4 карточек, top иконки и
   заголовка в строке, ширина текстового блока) — см. measure-sym.mjs. */
.dd-hA__chip--promo { flex-wrap: nowrap; align-items: flex-start; }
/* Стикер прижат к НИЖНЕМУ правому углу своей карточки, а не к верхнему.
   Почему не сверху (замеры 844x390 / 375x812 / 1024x768, все три вылезли):
   - сверху бокс стикера обязан заходить в зазор сетки, чтобы не лечь на заголовок,
     а зазор на ландшафте всего 2px и принадлежит карточке сверху — перекрытие
     соседа «Честная цена» 84 px² воспроизводилось на 7 вьюпортах;
   - повёрнутый на -4° чип выше своей обёртки (23px против 17px), и этот «лишний»
     верх всегда торчал за верхнюю границу карточки, сколько бы top ни подбирать.
   Снизу обеих проблем нет: под карточкой нет соседа (это последняя строка сетки),
   а заголовок и описание прижаты к верху карточки — стикер ложится на пустое место
   под текстом. `bottom` с тем же запасом, что `right`, держит его в пределах бокса. */
.dd-hA__chip--promo .dd-hA__chip-sticker {
  position: absolute; z-index: 2;
  /* Отступы от углов карточки: стикер должен читаться как наклейка ВНУТРИ плашки,
     а не свисать с её скруглённого угла (приёмка глазами 1440x900 и 375x812 —
     цифры перекрытия этого не ловят, бокс формально внутри). Радиус карточки
     `--radius-card`, поэтому запас берём соизмеримый с ним. */
  top: auto; bottom: 8px; right: 12px; left: auto;
  order: 0; margin: 0; align-self: auto;
  pointer-events: none;
  line-height: 1;
}
.dd-hA__chip--promo .dd-hA__chip-sticker .dd-b3a__chip {
  transform: rotate(-4deg); transform-origin: 100% 100%;
  font-size: 9px; padding: 3px 7px;
  white-space: nowrap;
}
.dd-hA__chip--promo .dd-hA__chip-icon { order: 1; }
/* Текстовый блок промо-карточки живёт по тем же правилам, что у трёх соседей:
   полная ширина, без резервов под стикер (стикер вне потока и её не занимает). */
.dd-hA__chip--promo .dd-hA__chip-text { order: 2; min-width: 0; flex: 1 1 auto; }
.dd-hA__chip--promo .dd-hA__chip-text b,
.dd-hA__chip--promo .dd-hA__chip-text small { max-width: 100%; }

/* Узкий портрет (телефоны): на ширину карточки ~150px стикер В ПОТОКЕ рядом с текстом
   не влезал — заголовок «Акция до −30%» сжимался до «Акци… до» и прятался за стикером
   (приёмка глазами 375x812, цифры этого не ловили: обрезанный текст перекрытия не даёт).
   Прежнее лечение — отдельная строка под стикер — вместе с `order:3` в потоке и стало
   причиной регрессии симметрии (см. комментарий выше). Теперь стикер вне потока на ВСЕХ
   брейкпоинтах, ширину у текста не отнимает, поэтому отдельная строка не нужна.
   На узком портрете стикер только уменьшается (правило ниже), чтобы не закрывать
   заголовок собой: проверка «перекрытие со своим текстом» в замере это стережёт. */
@media (max-width: 599px) {
  .dd-hA__chip--promo .dd-hA__chip-sticker { bottom: 6px; right: 8px; }
}
@media (max-width: 767px) {
  .dd-hA__chip { padding: 8px 6px; gap: 6px; }
  .dd-hA__chip-icon { width: 44px; height: 44px; }
  .dd-hA__chip-text b { font-size: 11.5px; line-height: 1.15; }
  .dd-hA__chip-text small { font-size: 10px; margin-top: 3px; }
  .dd-hA__chips { gap: 6px; grid-auto-rows: 1fr; }
}
/* 22.09h: стикер «до 30 сентября» перекрывал заголовок промо-карточки на мобиле (320-430px).
   23.09 STOM-61: точечные сдвиги стикера (top/right/padding-top !important) сняты — причина
   перекрытия убрана общим правилом выше (стикер внутри карточки). Остались только размеры
   текста карточек, к стикеру отношения не имеющие. */
@media (max-width: 599px) {
  .dd-hA__chip-sticker .dd-b3a__chip { font-size: 9px; padding: 3px 7px; }
  .dd-hA__chip-text b { font-size: 10.5px; }
  .dd-hA__chip-text small { font-size: 9px; }
}
/* Ландшафтные телефоны — правило перенесено в самый конец мобильной зоны
   (было здесь до 23.09, но @media (max-width:767px and max-height:820px/620px)
   идут позже по файлу и с той же специфичностью перебивали эти значения
   на 667x375/740x360 — см. gotcha STOM-60 в DEVLOG. Консолидированное правило
   ниже, после строки ~1690. */

/* ---------- CTA и подпись со стрелкой-дудлом (v9) ---------- */
.dd-cta-row { margin-bottom: var(--rhythm-cta); }
@media (min-width: 960px) { .dd-hA .dd-cta-row { margin-top: var(--space-md); } } /* 22.09: кнопка на десктопе прижималась к буллитам */

/* Подпись под кнопкой: что именно будет на приёме.
   Слева рисованная стрелка, ведущая взгляд вверх к кнопке. */
.dd-cta-note {
  position: relative;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-brand-navy);
  opacity: .82;
  margin: 0 0 var(--rhythm-note);
  max-width: var(--col-text-max);
}


.dd-disclaimer { font-size: 12px; color: var(--color-text-primary); opacity: .6; margin: 0; max-width: 58ch; line-height: 1.4; }

/* ---------- Сцена ---------- */
.dd-scene { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.dd-scene__object {
  position: relative;
  /* 17.09: видео v9 обрезано по объекту (587×619, не квадрат). Квадратный
     контейнер + object-fit:cover резал протез по бокам, а 520px на 1920 —
     «огромный» (владелец). Пропорция = кадру, потолок 420px. */
  width: min(100%, 400px);
  aspect-ratio: 712 / 764;
  overflow: visible;
  /* 15.09: маска-растушёвка и drop-shadow убраны по просьбе владельца («туман» вокруг протеза);
     фон видео v7 вырезан rembg и залит ровным --plate-accent, поэтому маска больше не нужна */
}
.dd-scene__still, .dd-scene__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  display: block; border: 0; background: transparent;
}
.dd-scene__still { z-index: 0; }
.dd-scene__video { z-index: 1; opacity: 1; }

/* ---------- Бейджи доверия ---------- */
.dd-trustcard {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-white);
  border-radius: var(--radius-chip);
  padding: 9px 14px 9px 9px;
  box-shadow: 0 3px 0 rgba(11,60,93,.10), 0 10px 22px rgba(11,60,93,.14);
  text-decoration: none;
  color: var(--color-brand-navy);
  transition: transform .16s ease;
}
.dd-trustcard:hover { transform: translateY(-2px); }

.dd-trustcard__mark {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 14px;
  color: #fff;
}
.dd-trustcard__mark img { width: 20px; height: 20px; object-fit: contain; }
.dd-trustcard__mark--yandex { background: #fff; }
.dd-trustcard__mark--2gis { background: #fff; }
.dd-trustcard__mark--pd { background: #00B3A4; }

.dd-trustcard__text { display: flex; flex-direction: column; line-height: 1.25; }
.dd-trustcard__text b { font-size: 12.5px; font-weight: 700; }
.dd-trustcard__text small { font-size: 11.5px; opacity: .7; font-weight: 600; }

.dd-trustcards-row { position: static; }

.dd-trustcard--1 { top: 4%; right: -48px; } /* 15.09 v8: макет компактнее, бейджи за краем объекта (bbox 21–80% × 17–81%) */
.dd-trustcard--2 { top: 46%; right: -44px; } /* 15.09: сдвиг ~1,5 см вправо, чтобы не наезжала на челюсть */
.dd-trustcard--3 { bottom: 3%; right: -40px; }

/* ---------- Ступенчатое проявление ---------- */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; }
.rv.is-in { opacity: 1; transform: translateY(0); }
.rv:nth-child(1) { transition-delay: 0ms; }
.rv:nth-child(2) { transition-delay: 70ms; }
.rv:nth-child(3) { transition-delay: 140ms; }
.rv:nth-child(4) { transition-delay: 210ms; }

/* ---------- Липкая мобильная CTA ---------- */
.dd-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  padding: var(--space-sm) var(--space-lg) calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -4px 20px rgba(11,60,93,0.12);
  opacity: 0; transform: translateY(100%);
  transition: opacity .25s ease, transform .28s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.dd-sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Во время прокрутки кнопка уходит вниз на 80%, оставляя подсказку.
   Остановились — выезжает обратно. Класс is-scrolling ставит js/hero.js. */
.dd-sticky-cta.is-visible.is-scrolling { transform: translateY(80%); opacity: .92; }

/* Кнопка внутри — полноразмерная, а не узкая полоска */
.dd-sticky-cta .dd-btn {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
  padding: 14px 18px;
  border-radius: var(--radius-card);
}

/* ================= Десктоп ≥960 ================= */
@media (min-width: 960px) {
  .dd-nav { display: flex; }
  .dd-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }
  .dd-hero { padding: var(--space-3xl) var(--plate-pad) var(--space-2xl); }
}

/* Невысокий десктоп: ужимаем ритм через токены, сетка остаётся той же */
@media (min-width: 960px) and (max-height: 800px) {
  :root {
    --h1-size: 28px;  /* низкий экран: весь блок до дисклеймера должен уместиться выше сгиба */
    --rhythm-eyebrow: 8px;
    --rhythm-h1: 10px;
    --rhythm-lead: 14px;
    --rhythm-cta: 8px;
    --rhythm-note: 8px;
    --card-gap: 10px;
    --card-pad: 10px 8px;
    --card-icon-size: 44px;
    --card-title-size: 13px;
    --card-note-size: 11.5px;
  }
  .dd-hero { padding-block: 22px 18px; }
  .dd-lead { font-size: 14.5px; }
  .dd-cards { margin-bottom: 16px; }
  .dd-btn--big { font-size: 15px; padding: 13px 16px; min-height: 48px; }
  .dd-cta-note { font-size: 12.5px; }
  .dd-disclaimer { font-size: 11px; }
  .dd-benefits { gap: 8px; margin-bottom: 18px; }
  .dd-benefit { padding: 12px 14px; font-size: 13px; }
  .dd-benefit__num { font-size: 28px; }
  .dd-scene__object { width: min(100%, 356px); }
  .dd-eyebrow { font-size: 12px; padding: 4px 12px; }
  .dd-hA__chips { gap: 8px; }
  .dd-hA__chip { padding: 10px 8px; }
  .dd-hA__chip-icon { width: 40px; height: 40px; }
  .dd-hA__chip-text b { font-size: 12px; }
  .dd-hA__chip-text small { font-size: 10.5px; margin-top: 3px; }
}

/* ================= Планшет 768-959 ================= */
@media (min-width: 768px) and (max-width: 959px) {
  .dd-hero__grid { grid-template-columns: 1fr; }
  .dd-hero__col-media { order: -1; }
  .dd-scene__object { width: min(100%, 320px); }
  .dd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .dd-benefits { grid-template-columns: 1fr 1fr; }
  .dd-trustcards-row { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
  .dd-trustcard { position: static; }
  .dd-header__logo img { height: 44px; }
  .dd-burger { display: flex; }
}

/* ================= Мобильный ≤767 ================= */
@media (max-width: 767px) {
  .dd-header-wrap { width: calc(100% - 20px); margin: 10px auto 0; }
  .dd-header { padding: 8px var(--plate-pad); border-radius: 22px; }
  .dd-header__logo img { height: 40px; }
  .dd-header__phone { display: none; }
  .dd-header__right { gap: 8px; }
  .dd-header__cta { font-size: 12.5px; padding: 8px 14px; min-height: 36px; }
  .dd-burger { display: flex; width: 36px; height: 36px; }

  .dd-plate { width: calc(100% - 20px); margin: 10px auto; border-radius: 22px; }
  .dd-hero { padding: 10px var(--plate-pad) 10px; }
  /* На мобильном раскрываем две исходные колонки только для grid-раскладки.
     Десктопная DOM-структура и её стили остаются прежними: доверие идёт после
     эйбрау, а сцена занимает правую колонку рядом с лид-абзацем. */
  .dd-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    grid-template-areas:
      "eyebrow eyebrow"
      "trust trust"
      "title title"
      "lead media"
      "intro intro"
      "cards cards"
      "cta cta"
      "note note"
      "disclaimer disclaimer";
    column-gap: 8px;
    row-gap: 0;
    align-items: start;
  }
  .dd-hero__col-text,
  .dd-hero__col-media,
  .dd-scene { display: contents; }
  .dd-eyebrow { grid-area: eyebrow; }
  .dd-trustcards-row { grid-area: trust; }
  .dd-h1 { grid-area: title; }
  .dd-lead { grid-area: lead; }
  .dd-scene__object { grid-area: media; width: 100%; margin: 0; align-self: start; }
  .dd-bullets__intro { grid-area: intro; }
  .dd-cards { grid-area: cards; }
  .dd-hA__list { grid-area: intro-start / intro-start / cards-end / cards-end; }
  .dd-cta-row { grid-area: cta; }
  .dd-cta-note { grid-area: note; }
  .dd-disclaimer { grid-area: disclaimer; }

  .dd-trustcards-row { display: flex; gap: 4px; width: 100%; justify-content: stretch; flex-wrap: nowrap; margin-bottom: var(--space-lg); }
  .dd-trustcard {
    position: static;
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
    padding: var(--space-sm) 10px; /* было 4px 4px — текст упирался в края */
    gap: 4px;
  }
  .dd-trustcard__mark { width: 16px; height: 16px; font-size: 10px; }
  .dd-trustcard__mark img { width: 11px; height: 11px; }
  .dd-trustcard__text { min-width: 0; }
  .dd-trustcard__text b { font-size: 10px; overflow-wrap: anywhere; } /* было 8.5px */
  .dd-trustcard__text small { font-size: 9px; overflow-wrap: anywhere; } /* было 7.5px */
  .dd-trustcard__wordmark { width: min(74px, 100%); height: auto; margin-bottom: 2px; }

  /* v9: вся левая колонка по левому краю и на мобильном — одна линия текста
     сверху донизу читается лучше, чем чередование «центр / лево» */
  /* Кегль берётся из мобильного токена и не влияет на десктоп. */
  .dd-h1 { text-align: left; font-size: var(--h1-size); margin-bottom: var(--rhythm-h1); }
  .dd-lead { text-align: left; margin-bottom: var(--rhythm-lead); font-size: 12px; }
  .dd-scene__object { margin: 0 0 var(--space-lg); }

  /* Чип сохраняет полный текст и получает читаемый мобильный кегль. */
  .dd-eyebrow {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-bottom: var(--rhythm-eyebrow);
    font-size: 12px;
    padding: 5px 11px;
    white-space: nowrap;
  }
  .dd-eyebrow__tail { display: inline; }

  /* Подзаголовок по левому краю: центрованный текст в 5 строк даёт рваный край */
  .dd-lead { text-align: left; }

  /* Четыре компактные карточки в одну строку: контент остаётся целиком,
     а высота блока заметно меньше прежней сетки 2×2. */
  .dd-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--space-lg); max-width: none; }
  .dd-bullets__intro { text-align: left; font-size: 12px; margin-bottom: var(--space-sm); }
  /* на мобильном кнопка во всю ширину, стрелка сбоку не помещается */
  .dd-cta-note { text-align: left; font-size: 12.5px; margin-bottom: var(--rhythm-note); }

  .dd-benefits { grid-template-columns: 1fr; gap: 5px; margin-bottom: 10px; }
  .dd-benefit { padding: 10px 12px; font-size: 13px; }
  .dd-benefit--price { order: -1; flex-direction: row; align-items: center; gap: var(--space-md); padding: 10px 14px; }
  .dd-benefit--price .dd-benefit__num { font-size: 26px; }
  .dd-benefit--price .dd-benefit__note { display: none; }

  .dd-cta-row { margin-bottom: var(--rhythm-cta); }
  /* 16.09: было 14px/46px — кнопка чуть компактнее, чтобы влезть выше сгиба */
  .dd-btn--big { width: 100%; padding: 12px 24px; font-size: 15px; min-height: 44px; }
  .dd-disclaimer { text-align: left; }

  .dd-modal__box { padding: 24px 20px 20px; }

  .dd-sticky-cta { display: block; }
}

/* ================= 16.09 мобильный hero: узкий телефон ≤400px =================
   Причина: на 320×568 .dd-header__right (телефон/CTA-кнопка/бургер) шире доступного
   места в шапке — CTA-кнопка шапки «Бесплатная консультация» с nowrap даёт
   scrollWidth 350px при clientWidth 320px (+30px горизонтальный скролл,
   обрезка .dd-hero). Фикс — не трогая desktop/tablet: сжать саму кнопку шапки
   и зазор до бургера, сцену и карточки ужать ещё немного. */
@media (max-width: 400px) {
  .dd-header__right { gap: 6px; }
  .dd-header__cta { font-size: 11px; padding: 7px 10px; min-height: 34px; }

  /* Не сужаем правую колонку: ширину сцены задаёт 45%-ная grid-колонка. */
  .dd-scene__object { width: 100%; }
  .dd-cards { gap: 3px; }
  :root {
    --card-pad: var(--space-sm) 4px; /* было 4px 3px — сохраняем минимальный вертикальный отступ */
    --card-icon-size: 18px;          /* было 22px, чуть меньше чтобы высота не росла на 320px */
    --card-title-size: 9px;
    --card-note-size: 7.5px;
  }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .dd-btn, .dd-btn--primary { transition: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .dd-sticky-cta { transition: none; }
}

/* ================= блок 1а, 16.09: соц-пруф полоска ================= */
.dd-strip {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--space-xl);
  padding-inline: var(--plate-pad);
}

.dd-h1--strip {
  font-size: clamp(20px, 1.1vw + 14px, 26px);
  line-height: 1.3;
  font-weight: 800;
  text-transform: none;
  color: var(--color-brand-navy);
  margin: 0;
  position: relative;
}
.dd-h1--strip .dd-h1__acc { position: relative; display: inline-block; }
.dd-h1--strip .dd-h1__acc-doodle {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: auto;
  z-index: 0;
}

.dd-strip .dd-lead {
  margin: var(--space-sm) 0 0;
  opacity: .75;
  max-width: none;
}

.dd-note {
  font-size: 13px;
  color: var(--color-text-primary);
  opacity: .6;
  margin: var(--space-sm) 0 0;
}

@media (max-width: 767px) {
  .dd-strip { padding-block: var(--space-lg); }
}

.dd-trustcard__wordmark { display:block; width:118px; height:auto; margin-bottom:3px; }

/* 17.09: бейджи площадок в полоске 1а — та же разметка и тот же компонент, что в hero,
   только статичный ряд по центру вместо абсолютной раскладки «по дуге» */
.dd-strip__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0 0;
}
.dd-strip__badges .dd-trustcard { position: static; }
.dd-strip__badges + .dd-note { margin-top: var(--space-lg); }
@media (max-width: 767px) {
  .dd-strip__badges { gap: var(--space-sm); margin-top: var(--space-md); }
}

/* ================= блок 2, 16.09: «Кому подойдёт» ================= */
.dd-komu {
  padding: var(--space-2xl) var(--plate-pad) var(--space-xl);
}

.dd-komu__head {
  max-width: 760px;
  margin: 0 0 var(--space-xl);
  text-align: left;
}

.dd-h2--section {
  font-family: var(--font-family-display);
  font-size: clamp(24px, 1.6vw + 14px, 32px);
  font-weight: 800;
  line-height: 1.25;
  text-transform: none;
  color: var(--color-brand-navy);
  text-wrap: balance;
  margin: var(--space-sm) 0 var(--space-xs);
}

.dd-komu__head .dd-lead { max-width: none; margin: 0; }

.dd-cases {
  align-items: start;
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.dd-case {
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: start;
}

.dd-case__photo {
  width: clamp(132px, 12vw, 176px);
  height: clamp(132px, 12vw, 176px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: contain;
  object-position: center;
  padding: clamp(12px, 1.2vw, 18px);
  display: block;
  background: var(--color-white);
  box-shadow: 0 2px 0 rgba(11,60,93,.06), 0 8px 18px rgba(11,60,93,.08);
  /* декор не таскаем мышью — канон владельца */
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.dd-case__title {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: clamp(15px, .4vw + 13px, 17px);
  line-height: 1.25;
  color: var(--color-brand-navy);
  margin: var(--space-md) 0 0;
}

.dd-case__text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-primary);
  opacity: .75;
  margin: var(--space-xs) 0 0;
}

@media (hover: hover) {
  .dd-cases > .dd-case:hover .dd-case__photo { transform: translateY(-3px); transition: transform .16s ease; }
}

.dd-komu__foot { max-width: 760px; margin: 0 auto; text-align: center; }

.dd-komu__lead-strong {
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  font-weight: 700;
  color: var(--color-brand-navy);
  opacity: .9;
  margin: 0 0 var(--space-md);
}

.dd-komu__cta-note-wrap { margin: 0; }

.dd-komu .dd-cta-row { margin-bottom: var(--space-sm); }
.dd-komu .dd-btn--big { white-space: normal; text-wrap: balance; }
.dd-komu .dd-cta-note { max-width: none; margin: 0 0 var(--space-md); }

.dd-bridge {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-brand-navy);
  opacity: .6;
  margin: 0;
}

@media (min-width: 768px) and (max-width: 959px) {
  .dd-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
}

@media (max-width: 767px) {
  .dd-komu { padding: var(--space-lg) var(--plate-pad) var(--space-md); }
  .dd-komu__head, .dd-komu__foot { text-align: left; max-width: none; }
  .dd-cases { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); }
  .dd-cases > .dd-case:nth-child(odd),
  .dd-cases > .dd-case:nth-child(even) { transform: none; }
  .dd-bridge { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-cases > .dd-case:nth-child(odd) { transform: rotate(-.6deg); }
  .dd-cases > .dd-case:nth-child(even) { transform: rotate(.6deg); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .dd-cases > .dd-case:nth-child(odd),
  .dd-cases > .dd-case:nth-child(even) { transform: none; }
}

/* Вариация блока «Кому подойдёт» с объектами-иллюстрациями */
.dd-komu--doodles .dd-case__photo,
.dd-case__photo--doodle {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center center;
  box-sizing: border-box;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.dd-komu__variant-badge {
  display: inline-block;
  font-size: clamp(14px, 0.6vw + 12px, 17px);
  font-weight: 600;
  color: var(--color-brand-blue);
  opacity: .85;
  margin-left: 8px;
  vertical-align: middle;
}

/* ================= Модалка: лицензия ================= */
.dd-modal--license {
  padding: 16px;
}

.dd-modal__box--license {
  max-width: 760px;
  width: 100%;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  box-sizing: border-box;
}

.dd-modal__box--license .dd-modal__title {
  margin: 0 0 16px;
  padding-right: 36px;
  flex-shrink: 0;
}

.dd-modal__box--license {
    padding: 20px 12px 14px;
    max-height: calc(100vh - 16px);
    border-radius: 18px;
  }

.dd-modal__box--license .dd-modal__title {
    font-size: 17px;
    margin-bottom: 12px;
  }

/* ================= Модалка-мини-ленд (конверсионная) ================= */

/* Сам бокс: скроллируемый контейнер */
.dd-modal__box--landing {
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Крестик: sticky, чтобы всегда был виден при скролле */
.dd-modal__box--landing .dd-modal__close {
  position: sticky;
  top: 0;
  align-self: flex-end;
  z-index: 5;
  margin: 12px 12px 0 0;
  flex-shrink: 0;
}

/* Внутренний контент с единым внешним паддингом */
.dd-modal__landing-inner {
  padding: 0 var(--space-lg) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.dd-modal__landing-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
/* hidden слабее display:flex — без этого правила блок не скрывается при успехе */
.dd-modal__landing-content[hidden] { display: none; }

/* 1. Логотип (центрирован по макету) */
.dd-modal__logo {
  display: flex;
  justify-content: center;
  margin-top: calc(-1 * var(--space-xs));
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

.dd-modal__logo img {
  height: 44px;
  width: auto;
}

/* 2. Заголовок + подзаголовок модалки (правка 22.09: убран ценовой якорь «от 5 300 ₽») */
.dd-modal__intro {
  text-align: center;
  margin: 0;
  padding: 0;
}

.dd-modal__intro-title {
  font-family: var(--font-family-display);
  font-size: clamp(19px, 1vw + 16px, 24px);
  font-weight: 800;
  color: var(--color-brand-navy);
  line-height: 1.3;
  margin: 0 0 var(--space-sm);
}

.dd-modal__intro-lead {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-brand-navy);
  opacity: 0.8;
  margin: 0 0 var(--space-sm);
}

.dd-modal__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.dd-modal__badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}

.dd-modal__badge--credit {
  background: var(--plate-accent);
  color: var(--color-brand-navy);
  border: 1.5px solid rgba(11, 60, 93, 0.12);
}

.dd-modal__badge--discount {
  background: linear-gradient(180deg, var(--color-brand-blue-light) 0%, var(--color-brand-blue-dark) 100%);
  color: #fff;
}

/* Акцент «до 30 сентября» — единый стиль во всех местах модалки (правка 22.09) */
.dd-modal__accent {
  font-weight: 800;
  color: var(--color-brand-blue);
}

.dd-modal__badge--discount .dd-modal__accent {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* 3. Блок бонусов (единая левая ось) */
.dd-modal__bonuses {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.dd-modal__bonuses-title {
  font-family: var(--font-family-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-brand-navy);
  margin: 0 0 var(--space-md);
  padding: 0;
  line-height: 1.3;
  text-align: left;
}

.dd-modal__bonuses-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
}

.dd-modal__bonus {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--plate-accent);
  border-radius: 14px;
  padding: 10px var(--space-md);
  margin: 0;
}

.dd-modal__bonus-prices {
  flex: 0 0 54px;
  width: 54px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.dd-modal__bonus-old {
  font-size: 12px;
  font-weight: 600;
  color: #999;
  text-decoration: line-through;
  line-height: 1.2;
}

.dd-modal__bonus-new {
  font-family: var(--font-family-display);
  font-size: 20px;
  font-weight: 800;
  color: #00B365;
  line-height: 1.1;
}

.dd-modal__bonus-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.dd-modal__bonus-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-brand-navy);
  line-height: 1.3;
  text-align: left;
}

.dd-modal__bonus-desc {
  font-size: 12px;
  color: var(--color-text-primary);
  opacity: 0.65;
  line-height: 1.4;
  margin-top: var(--space-xs);
  text-align: left;
}

.dd-modal__bonuses-total {
  text-align: left;
  margin-top: var(--space-md);
  margin-bottom: 0;
  padding: 0;
  font-family: var(--font-family-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--color-brand-blue);
  line-height: 1.3;
}

/* 4. Форма в модалке (единая левая ось, ровный шаг) */
.dd-modal__box--landing .dd-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
}

.dd-modal__box--landing .dd-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-brand-navy);
  margin: 0;
  padding: 0;
  text-align: left;
}

.dd-modal__box--landing .dd-field span {
  text-align: left;
  margin: 0;
  padding: 0;
}

.dd-modal__box--landing .dd-field input[type="text"],
.dd-modal__box--landing .dd-field input[type="tel"] {
  font-family: var(--font-family);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(11,60,93,.15);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

.dd-modal__box--landing .dd-field input[type="text"]::placeholder {
  color: #aaa;
  opacity: 1;
}

.dd-modal__box--landing .dd-field--check {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 12.5px;
  font-weight: 500;
  opacity: .8;
  margin: 0;
  padding: 0;
  text-align: left;
}

.dd-modal__box--landing .dd-field--check input {
  margin: 3px 0 0 0;
  padding: 0;
  flex-shrink: 0;
}

.dd-modal__box--landing .dd-modal__submit {
  margin-top: var(--space-xs);
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.dd-modal__box--landing .dd-modal__result {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-brand-blue-dark);
  margin: var(--space-sm) 0 0;
  text-align: center;
}

.dd-modal__landing-inner {
    padding: 0 var(--space-md) var(--space-md);
    gap: var(--space-md);
  }

.dd-modal__box--landing .dd-modal__close {
    margin: 10px 10px 0 0;
  }

.dd-modal__logo img {
    height: 36px;
  }

.dd-modal__intro-title {
    font-size: 19px;
  }

.dd-modal__intro-lead {
    font-size: 13px;
  }

.dd-modal__badge {
    font-size: 11.5px;
    padding: 4px 10px;
  }

.dd-modal__bonuses-title {
    font-size: 14px;
    margin-bottom: var(--space-sm);
  }

.dd-modal__bonus {
    padding: 8px var(--space-sm);
    gap: var(--space-sm);
  }

.dd-modal__bonus-prices {
    flex: 0 0 46px;
    width: 46px;
  }

.dd-modal__bonus-old {
    font-size: 11px;
  }

.dd-modal__bonus-new {
    font-size: 17px;
  }

.dd-modal__bonus-name {
    font-size: 12.5px;
  }

.dd-modal__bonus-desc {
    font-size: 11px;
  }

.dd-modal__bonuses-total {
    font-size: 14px;
    margin-top: var(--space-sm);
  }

.dd-modal__box--landing .dd-modal__form {
    gap: var(--space-sm);
  }

.dd-modal__intro-title {
    font-size: 17px;
  }

.dd-modal__bonus-prices {
    flex: 0 0 42px;
    width: 42px;
  }

.dd-modal__bonus-new {
    font-size: 16px;
  }


/* Узкие экраны: длинная надпись CTA не должна упираться в края кнопки */
@media (max-width: 400px) {
  .dd-hero .dd-btn--big { font-size: 14px; padding: 13px 12px; letter-spacing: -0.01em; }
}

/* Низкие экраны (iPhone SE 320x568 и подобные): ужимаем воздух до CTA,
   иначе кнопка уходит под сгиб — замер показал bottom 729 при высоте 568 */

/* ============================================================
   МОБИЛЬНЫЙ ВЕРТИКАЛЬНЫЙ РИТМ ПЕРВОГО ЭКРАНА — ЕДИНЫЙ МЕХАНИЗМ
   Отступы задаёт ТОЛЬКО row-gap грида. Собственные margin детей
   обнулены: раньше складывались три источника (margin-bottom
   соседа + row-gap + margin-top) и давали 56px вместо 16px.
   ============================================================ */
@media (max-width: 767px) {
  .dd-hero__grid > *,
  .dd-hero__grid .dd-eyebrow,
  .dd-hero__grid .dd-trustcards-row,
  .dd-hero__grid h1.dd-h1,
  .dd-hero__grid .dd-lead,
  .dd-hero__grid .dd-bullets__intro,
  .dd-hero__grid .dd-cards,
  .dd-hero__grid .dd-cta-row,
  .dd-hero__grid .dd-cta-note,
  .dd-hero__grid .dd-disclaimer,
  .dd-hero__grid .dd-scene__object {
    margin-top: 0;
    margin-bottom: 0;
  }
  /* просторные экраны: крупный ритм */
  .dd-hero__grid { row-gap: var(--space-lg); }
}

/* Невысокие экраны (iPhone SE 2/3 375x667): ритм 16px + плашки рейтингов
   в одну строку, иначе они переносятся на две и съедают 34px высоты */
@media (max-width: 767px) and (max-height: 820px) {
  .dd-hero__grid { row-gap: var(--space-md); }
  .dd-trustcards-row { flex-wrap: nowrap; gap: var(--space-xs); }
  .dd-trustcard { padding: 6px 7px; }
  .dd-trustcard b { font-size: 9px; }
  .dd-trustcard small { font-size: 8px; }
  .dd-hero { padding-top: var(--space-sm); }
  .dd-hA__chips { gap: 6px; }
  .dd-hA__chip { padding: 6px 6px; }
  .dd-hA__chip-icon { width: 32px; height: 32px; }
  .dd-hA__chip-text b { font-size: 11.5px; line-height: 1.15; }
  .dd-hA__chip-text small { font-size: 10px; margin-top: 3px; }
  .dd-lead { font-size: 13.5px; line-height: 1.35; }
}

/* Очень низкие экраны (iPhone SE 1 320x568): максимально плотный режим.
   Замер: без этого CTA уходила на 674 при экране 568. Ужимаем всё,
   что не вредит читаемости: ритм, кегли, иконки карточек, отступы плит. */
@media (max-width: 767px) and (max-height: 620px) {
  .dd-hero__grid { row-gap: var(--space-sm); }
  .dd-hero { padding-top: var(--space-xs); padding-bottom: var(--space-sm); }
  .dd-h1 { font-size: 19px; line-height: 1.1; }
  .dd-lead { font-size: 13px; line-height: 1.4; }
  .dd-eyebrow { font-size: 10px; padding: 3px 8px; }
  .dd-trustcards-row { flex-wrap: nowrap; gap: 3px; }
  .dd-trustcard { padding: 4px 5px; }
  .dd-trustcard b { font-size: 8px; }
  .dd-trustcard small { font-size: 7px; }
  .dd-card { padding: 5px 4px; }
  .dd-card__icon img { width: 26px; height: 26px; }
  .dd-card__title { font-size: 9px; }
  .dd-card__note { font-size: 8px; }
  .dd-bullets__intro { font-size: 12px; }
  /* надпись CTA не должна обрезаться на 320px */
  .dd-hero .dd-btn--big { font-size: 12.5px; padding: 10px 8px; min-height: 38px; }
  /* последние 21px: шапка и верхнее поле плиты */
  .dd-header { padding-top: 4px; padding-bottom: 4px; }
  .dd-header__cta { min-height: 30px; font-size: 10px; }
  .dd-plate--warm { padding-top: 0; }
  .dd-scene__object { max-height: 88px; }
  .dd-hero__grid { row-gap: 6px; }
}

/* Планшет в портрете (iPad mini 768x1024): ловит десктопную двухколоночную
   раскладку, но высоты не хватает — CTA уходила на 1182 при экране 1024.
   Ужимаем вертикальный ритм и кегль лида, колонки не трогаем. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .dd-hero { padding-top: var(--space-md); padding-bottom: var(--space-md); }
  .dd-hero__grid { gap: var(--space-lg); }
  .dd-h1 { font-size: 30px; }
  .dd-lead { font-size: 16px; }
  .dd-cards { gap: var(--space-sm); }
  .dd-card { padding: var(--space-sm); }
  .dd-cta-row { margin-top: var(--space-md); }
}


/* Лид-абзац и протез стоят в одной строке грида. Протез ниже текста,
   поэтому «Ставим даже при» отсчитывалось от него: сверху у лида 24px,
   снизу 43px — перекос. Тянем оба элемента строки на одинаковую высоту,
   чтобы зазор сверху и снизу у лида совпал. */
@media (max-width: 767px) {
  .dd-hero__grid { align-items: stretch; }
  .dd-hero__grid .dd-lead { align-self: start; }
  /* Протез не должен торчать ниже лида: иначе «Ставим даже при»
     отсчитывается от него и зазор снизу у текста больше, чем сверху
     (замер: 24 сверху / 43 снизу). Ограничиваем высоту сцены высотой строки. */
  .dd-hero__grid .dd-scene__object {
    align-self: start;
    /* Протез растёт вместе с шириной окна: 136px на телефоне 375px,
       ~230px на 590px, до 260px у границы режима. Фиксированные 136px
       на широком окне выглядели мелко, и под протезом зияла пустота
       на ~90px, потому что колонка текста кончалась раньше. */
    height: clamp(136px, 31.6vw - 82px, 260px);
    width: auto;
    margin-left: auto;
  }
  /* Лид держит ту же высоту, чтобы низ протеза и низ текста совпадали */
  .dd-hero__grid .dd-lead { min-height: clamp(136px, 31.6vw - 82px, 260px); }
  .dd-hero__grid .dd-scene__object img,
  .dd-hero__grid .dd-scene__object video {
    height: 100%;
    width: auto;
    object-fit: contain;
  }
}

/* На очень низком мобильном экране сохраняем общую высоту строки, но не
   выталкиваем CTA ниже сгиба. */
@media (max-width: 767px) and (max-height: 620px) {
  .dd-hero__grid .dd-scene__object { height: 88px; }
  .dd-hero__grid .dd-lead { min-height: 88px; }
}

/* ================= 23.09 STOM-60: ландшафтные телефоны и планшет-ландшафт =================
   Приказ владельца по скрину 844x390 («вёрстка говённая»): карточки без описаний,
   стикер «до 30 сентября» раздувал промо-карточку, CTA местами под сгибом.

   Причина (найдена диагностикой, не на глаз — Правило №0-DIAG): три более ранних
   правила (max-height:480/min-width:640 — строка ~605 было; max-width:767/max-height:820 —
   строка ~1588; max-width:767/max-height:620 — строка ~1606) имели одинаковую
   специфичность и боролись по порядку в файле. На 667x375 и 740x360 (ширина ≤767,
   высота ≤480 — все три совпадают) правило с max-height:820 (более позднее в файле)
   перебивало сжатие карточек (icon 32px вместо 20px, small не скрывался, кнопка 44px
   вместо 34px) — и весь блок вываливался за пределы экрана. На 844/896/915/932
   (ширина >767) конфликта не было — там сжатие срабатывало верно, но описания
   карточек (small) были жёстко display:none, а не просто спрятаны компактнее —
   отсюда «пропал текст».

   Правило ниже — ЕДИНСТВЕННОЕ место, где сжимаются ландшафтные телефоны;
   стоит последним в каскаде мобильной зоны, поэтому всегда выигрывает у более
   ранних max-width:767 блоков той же специфичности. Описания карточек оставлены
   (владелец: «карточки с описаниями или единообразно компактные, но аккуратные»
   — выбрано «с описаниями», однострочными через line-clamp). */
@media (max-width: 959px) and (max-height: 480px) and (min-width: 560px) {
  /* 23.09b: первый замер (667x375/740x360) показал остаток 67-68px даже
     после сжатия карточек и кнопки — виновата шапка (48px) и зазоры плиты
     (10px+10px), которые эта медиа-запись изначально не трогала. Досжаты
     шапка/плита и карточки ещё на 1 уровень; проверено повторным замером. */
  .dd-header-wrap { margin: 2px 2px 0; }
  .dd-header { padding: 2px var(--plate-pad); }
  .dd-header__logo img { height: 22px; }
  .dd-plate { margin: 2px auto; }
  .dd-hero { padding-top: 2px; padding-bottom: 2px; }
  .dd-hero__grid { row-gap: 2px; }
  .dd-h1 { font-size: 15px; line-height: 1.06; }
  .dd-lead { font-size: 10px; line-height: 1.2; margin-bottom: 3px; }
  .dd-eyebrow { font-size: 9px; padding: 2px 6px; }
  .dd-trustcards-row { margin-bottom: 3px; }

  .dd-hA__chips { gap: 2px; }
  .dd-hA__chip { padding: 2px 5px; gap: 4px; }
  .dd-hA__chip-icon { width: 16px; height: 16px; }
  /* 23.09 STOM-61: было -webkit-line-clamp:1 — самый длинный заголовок («Бесплатная
     консультация и 3D-диагностика с КТ-снимком») требует 21px при доступных 10px и
     обрезался на всех 6 ландшафтных вьюпортах (замер scrollHeight 21 / clientHeight 10).
     Снятие padding-top у промо-карточки (стикер ушёл внутрь) освободило вертикаль,
     поэтому заголовкам разрешены 2 строки — обрезка уходит, CTA остаётся над сгибом. */
  .dd-hA__chip-text b {
    font-size: 9.5px; line-height: 1.1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Описание остаётся видимым (не display:none), но одной строкой и мельче —
     карточка не раздувается и текст не исчезает целиком, как было. */
  .dd-hA__chip-text small {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 8px; line-height: 1.1; margin-top: 1px; white-space: normal;
  }
  /* Стикер «до 30 сентября» на ландшафтных телефонах СКРЫТ (23.09, исправление
     регрессии симметрии). Причина по замеру: в этом режиме карточка сжата до 37px
     высоты и её занимают ровно две строки — заголовок и описание, пустого места нет
     вообще. Любое положение стикера (сверху — лез на соседнюю карточку через зазор
     в 2px; снизу — лёг на собственное описание, 498-733 px²) нарушает либо симметрию
     четырёх плашек, либо читаемость. При этом сам стикер здесь ИЗБЫТОЧЕН: описание
     карточки дословно начинается теми же словами — «До 30 сентября на протезы…»,
     то есть срок акции посетитель видит и без него. Прячем стикер, а не ломаем
     раскладку; на портрете и десктопе он остаётся. */
  .dd-hA__chip--promo .dd-hA__chip-sticker { display: none; }

  .dd-hero .dd-btn--big { min-height: 28px; padding: 5px 12px; font-size: 11px; }
  .dd-cta-note { font-size: 8.5px; margin-bottom: 2px; }
  .dd-disclaimer { font-size: 7.5px; }
}

/* Планшет-ландшафт (960-1279px, высота ≤900px: iPad 1180x820/1024x768-край,
   Surface 1180x820). До этой правки десктопная сетка ≥960px не сжималась
   по высоте вообще — на 1180x820 CTA была на 27px ниже сгиба (замер до правки:
   bottom 847 при innerHeight 820). Используем тот же токен-набор, что и
   invisible десктоп min-height:800 (строка ~748), но пороги площе под альбомный
   планшет: там кегли крупнее, чем нужно этой высоте. */
@media (min-width: 960px) and (max-width: 1279px) and (max-height: 900px) {
  .dd-hero { padding-block: 20px 16px; }
  .dd-h1 { font-size: 26px; line-height: 1.15; }
  .dd-lead { font-size: 14px; margin-bottom: 10px; }
  .dd-hA__chips { gap: 8px; }
  .dd-hA__chip { padding: 8px 8px; }
  .dd-hA__chip-icon { width: 36px; height: 36px; }
  .dd-hA__chip-text b { font-size: 11.5px; }
  .dd-hA__chip-text small { font-size: 10px; margin-top: 2px; }
  .dd-cta-row { margin-top: 0; margin-bottom: 8px; }
  .dd-btn--big { font-size: 14px; padding: 11px 20px; min-height: 44px; }
  .dd-cta-note { font-size: 11.5px; margin-bottom: 6px; }
  .dd-disclaimer { font-size: 10px; }
  .dd-scene__object { width: min(100%, 300px); }
}

/* ================= Подвал-плита ================= */
.dd-footer {
  background: var(--plate-accent);
  padding: var(--space-2xl) var(--plate-pad);
  color: var(--color-brand-navy);
  font-family: var(--font-family);
}

.dd-footer__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "identity identity"
    "links meta";
  align-items: flex-start;
  gap: var(--space-xl);
}

.dd-footer__identity { grid-area: identity; }

.dd-footer__links { grid-area: links; }

.dd-footer__meta { grid-area: meta; }

.dd-footer__identity {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xl);
}

.dd-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}

.dd-footer__logo img {
  height: 48px;
  width: auto;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

.dd-footer__requisites {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-brand-navy);
  text-align: right;
}

.dd-footer__links,
.dd-footer__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

.dd-footer__license {
  color: var(--color-brand-navy);
  opacity: 0.85;
}

.dd-footer__link {
  color: var(--color-brand-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.dd-footer__disclaimer {
  font-weight: 600;
  color: var(--color-brand-navy);
}

.dd-footer__copyright {
  color: var(--color-brand-navy);
  opacity: 0.72;
}

.dd-footer__content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "identity"
      "links"
      "meta";
    gap: var(--space-sm);
  }

.dd-footer__identity {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-sm);
  }

.dd-footer__logo img {
    height: 32px;
  }

.dd-footer__requisites,
  .dd-footer__meta {
    text-align: left;
  }

.dd-footer__requisites,
  .dd-footer__links,
  .dd-footer__meta {
    font-size: 11px;
    line-height: 1.45;
  }

.dd-footer__requisites { min-width: 0; }

.dd-footer__requisites,
  .dd-footer__links,
  .dd-footer__meta { gap: var(--space-sm); }

/* ================= Подвал: кнопка лицензии ================= */
.dd-footer__license-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
  display: inline;
}

@media (hover: hover) {
  .dd-footer__link:hover {
    color: var(--color-brand-blue);
  }
}

@media (max-width: 767px) {
  .dd-footer {
    /* Нижний отступ резервирует место под .dd-sticky-cta: кнопка 52px + отступы
       полосы ≈76px, плюс безопасная зона айфона. Иначе кнопка накрывает копирайт.
       Боковые отступы 16px по запросу владельца — «компактнее слева и справа». */
    padding: var(--space-md) var(--space-md)
             calc(var(--space-2xl) + 32px + env(safe-area-inset-bottom, 0px));
  }
  .dd-footer__content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "identity"
      "links"
      "meta";
    gap: var(--space-sm);
  }
  .dd-footer__identity {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  .dd-footer__logo img {
    height: 32px;
  }
  .dd-footer__requisites,
  .dd-footer__meta {
    text-align: left;
  }
  .dd-footer__requisites,
  .dd-footer__links,
  .dd-footer__meta {
    font-size: 11px;
    line-height: 1.45;
  }
  .dd-footer__requisites { min-width: 0; }
  .dd-footer__requisites,
  .dd-footer__links,
  .dd-footer__meta { gap: var(--space-sm); }
}

/* === Плотный режим: протез тянется по лиду, а не фиксирован (перенос с эталона 17.09) ===
   На узких экранах текст переносится на больше строк и становится выше 136px —
   фиксированная высота давала расхождение по низу до 57px. */
@media (max-width: 767px) and (max-height: 620px) {
  .dd-hero__grid .dd-scene__object { height: 100%; max-height: none; align-self: stretch; }
  .dd-hero__grid .dd-lead { min-height: 0; }
}

/* Липкая кнопка на низких экранах — компактнее, но остаётся нажимаемой */
@media (max-height: 620px) {
  .dd-sticky-cta .dd-btn { min-height: 46px; font-size: 15px; padding: 11px 16px; }
}
/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .dd-sticky-cta { transition: opacity .2s ease; }
  .dd-sticky-cta.is-visible.is-scrolling { transform: translateY(0); opacity: 1; }
}

/* === Узкие телефоны (≤359px): масштаб вместо сжатия (решение владельца 17.09) ===
   Попытка ужать кегли и отступы поштучно дала кривую вёрстку: плашки слипались,
   подписи рвались, протез висел в пустоте. На 320px раскладке 375px физически
   не хватает ширины. Поэтому первый экран рисуется как на 375px и целиком
   уменьшается через zoom — пропорции, сетка и отступы сохраняются 1:1.
   Коэффициент: 320/375 ≈ 0.853. */
@media (max-width: 359px) {
  .dd-header,
  .dd-hero {
    zoom: 0.853;
  }
  /* zoom уменьшает и боковые поля плиты — возвращаем визуально те же 24px */
  .dd-hero { --plate-pad: 28px; }
}
/* На совсем низких экранах (320x480) плюс плотный вертикальный ритм —
   он уже есть выше для max-height ≤620px и сработает сам. */

/* === Телефоны 360-413px: лид как на образце 414, протез вписан в колонку ===
   Замер 360px до правки: колонка протеза 100px, а протез фиксированно 136px —
   вылезал за экран на 2px и распирал сетку (чип и CTA визуально обрезались).
   Лид на 375 был 164px → 7 строк столбиком; на образце 414 — 186px → 5 строк.
   Решение: лиду минимум 180px, протез — width:100% своей колонки, не фикс. */
@media (min-width: 360px) and (max-width: 413px) {
  .dd-hero__grid {
    grid-template-columns: minmax(180px, 3fr) minmax(0, 2fr);
    column-gap: var(--space-sm);
  }
  .dd-hero__grid .dd-scene__object {
    width: 100%;
    max-width: 136px;
    height: auto;
    aspect-ratio: 1 / 1;
    justify-self: end;
  }
  .dd-hero__grid .dd-scene__object img,
  .dd-hero__grid .dd-scene__object video { width: 100%; height: 100%; object-fit: contain; }
  /* низ протеза = низ лида: лид держит высоту не меньше протеза */
  .dd-hero__grid .dd-lead { min-height: 0; }
  .dd-hero__grid { align-items: start; }
}

/* === 320px: та же логика, что на 360-413 — лид получает ширину, протез вписан ===
   zoom 0.853 даёт эффективную ширину 375 → внутри плиты 327px.
   Лиду минимум 180px (как на образце), протезу остаток ≈ 120px. */
@media (max-width: 359px) {
  .dd-hero__grid {
    grid-template-columns: minmax(180px, 3fr) minmax(0, 2fr);
    column-gap: var(--space-sm);
    align-items: start;
  }
  .dd-hero__grid .dd-scene__object {
    width: 100%;
    max-width: 136px;
    height: auto;
    aspect-ratio: 1 / 1;
    justify-self: end;
  }
  .dd-hero__grid .dd-scene__object img,
  .dd-hero__grid .dd-scene__object video { width: 100%; height: 100%; object-fit: contain; }
  .dd-hero__grid .dd-lead { min-height: 0; }
}

/* === Планшеты 768-959 вертикально: тот же порядок, что на телефоне (приказ владельца 17.09) ===
   Было: order:-1 у колонки медиа тащил протез НАВЕРХ над чипом и заголовком,
   flex-wrap:wrap рвал три плашки на «две + одна ниже». Владелец: «по расположению
   объектов всё должно выглядеть как на мобилке».
   Стало: та же сетка областей, что на ≤767 — чип, плашки в ряд, заголовок,
   лид + протез справа, дудлы, кнопка. Протез крупнее (места больше). */
@media (min-width: 768px) and (max-width: 959px) and (orientation: portrait) {
  .dd-hero__col-media { order: 0; }
  .dd-hero__col-text, .dd-hero__col-media, .dd-scene { display: contents; }
  .dd-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-areas:
      "eyebrow eyebrow"
      "trust trust"
      "title title"
      "lead media"
      "intro intro"
      "cards cards"
      "cta cta"
      "note note"
      "disclaimer disclaimer";
    column-gap: var(--space-lg);
    row-gap: var(--space-md);
    align-items: start;
  }
  .dd-eyebrow { grid-area: eyebrow; justify-self: start; }
  .dd-trustcards-row { grid-area: trust; display: flex; flex-wrap: nowrap; gap: var(--space-sm); margin: 0; justify-content: flex-start; }
  .dd-trustcard { position: static; flex: 1 1 0; }
  .dd-h1 { grid-area: title; }
  .dd-hero .dd-lead { grid-area: lead; min-height: 0; }
  .dd-scene__object { grid-area: media; width: 100%; max-width: 160px; height: auto; aspect-ratio: 712/764; justify-self: end; align-self: start; }
  .dd-scene__object img, .dd-scene__object video { width: 100%; height: 100%; object-fit: contain; }
  .dd-bullets__intro { grid-area: intro; }
  .dd-cards { grid-area: cards; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dd-hA__list { grid-area: intro-start / intro-start / cards-end / cards-end; }
  .dd-cta-row { grid-area: cta; }
  .dd-cta-note { grid-area: note; }
  .dd-disclaimer { grid-area: disclaimer; }
}

/* === Подвал: двухблочный, откат вслед за эталоном 17.09 (владелец: «предыдущий был лучше») === */
/* ================= Подвал-плита ================= */
.dd-footer {
  background: var(--plate-accent);
  padding: var(--space-2xl) var(--plate-pad);
  color: var(--color-brand-navy);
  font-family: var(--font-family);
}

.dd-footer__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "identity identity"
    "links meta";
  align-items: flex-start;
  gap: var(--space-xl);
}

.dd-footer__identity { grid-area: identity; }

.dd-footer__links { grid-area: links; }

.dd-footer__meta { grid-area: meta; }

.dd-footer__identity {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xl);
}

.dd-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}

.dd-footer__logo img {
  height: 48px;
  width: auto;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

.dd-footer__requisites {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-brand-navy);
  text-align: right;
}

.dd-footer__links,
.dd-footer__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

.dd-footer__license {
  color: var(--color-brand-navy);
  opacity: 0.85;
}

.dd-footer__link {
  color: var(--color-brand-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.dd-footer__disclaimer {
  font-weight: 600;
  color: var(--color-brand-navy);
}

.dd-footer__copyright {
  color: var(--color-brand-navy);
  opacity: 0.72;
}

.dd-footer__content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "identity"
      "links"
      "meta";
    gap: var(--space-sm);
  }

.dd-footer__identity {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-sm);
  }

.dd-footer__logo img {
    height: 32px;
  }

.dd-footer__requisites,
  .dd-footer__meta {
    text-align: left;
  }

.dd-footer__requisites,
  .dd-footer__links,
  .dd-footer__meta {
    font-size: 11px;
    line-height: 1.45;
  }

.dd-footer__requisites { min-width: 0; }

.dd-footer__requisites,
  .dd-footer__links,
  .dd-footer__meta { gap: var(--space-sm); }

/* ================= Подвал: кнопка лицензии ================= */
.dd-footer__license-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
  display: inline;
}

@media (hover: hover) {
  .dd-footer__link:hover {
    color: var(--color-brand-blue);
  }
}

@media (max-width: 767px) {
  .dd-footer {
    /* 48px снизу сохраняют место для .dd-sticky-cta, которая появляется
       после прокрутки hero. Боковые отступы уменьшены: 24px→16px (var(--space-md))
       по запросу владельца — «компактнее слева и справа». */
    padding: var(--space-md) var(--space-md) var(--space-2xl);
  }
  .dd-footer__content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "identity"
      "links"
      "meta";
    gap: var(--space-sm);
  }
  .dd-footer__identity {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  .dd-footer__logo img {
    height: 32px;
  }
  .dd-footer__requisites,
  .dd-footer__meta {
    text-align: left;
  }
  .dd-footer__requisites,
  .dd-footer__links,
  .dd-footer__meta {
    font-size: 11px;
    line-height: 1.45;
  }
  .dd-footer__requisites { min-width: 0; }
  .dd-footer__requisites,
  .dd-footer__links,
  .dd-footer__meta { gap: var(--space-sm); }
}

/* === 320px: ритм как на остальных телефонах (владелец 17.09: «всё сжато») ===
   Плотный режим ≤620px высоты ставил row-gap 6px, zoom 0.853 ужимал ещё раз.
   Возвращаем нормальный ритм ДС; за сгиб отвечает zoom, а не сплющивание. */
@media (max-width: 359px) {
  .dd-hero__grid { row-gap: var(--space-md); }
  .dd-hero { padding-top: var(--space-md); padding-bottom: var(--space-md); }
  .dd-hero .dd-lead { line-height: 1.45; }
  .dd-bullets__intro { margin-bottom: var(--space-xs); }
  .dd-cards { gap: var(--space-sm); }
  .dd-card { padding: var(--space-sm) 5px; }
  .dd-cta-row { margin-top: var(--space-sm); }
}

/* === Зазор «лид → Ставим даже при» = один row-gap, а не два (владелец 17.09: «межстрочное») ===
   На 375 протез 119px, а видимый текст лида ~95px: строка грида растягивалась
   до протеза, и под текстом копилось 25px пустоты + row-gap 24 = 49.
   Протез не выше текста лида: max-height от высоты соседа через стретч строки. */
@media (max-width: 767px) {
  .dd-hero__grid { align-items: start; }
  /* Ширина протеза = ширина видимого текста лида в px (5 строк ≈ 95-100px),
     высота — по пропорции кадра. width:auto + height:auto дали 0×0 (гоча). */
  .dd-hero__grid .dd-scene__object {
    align-self: start;
    justify-self: end;
    width: clamp(104px, 32vw, 120px);
    height: auto;
    max-height: none;
    min-height: 0;
    aspect-ratio: 712 / 764;
  }
  .dd-hero__grid .dd-lead { min-height: 0; }
}

/* === iPhone 4 (320×480): ритм ДС не влезает — жмём только row-gap, не кегли ===
   Замер: с row-gap 16 CTA на 495/480. С 10 — над сгибом. Кегли и отступы
   карточек не трогаем, иначе снова «всё сжато». */
@media (max-width: 359px) and (max-height: 520px) {
  .dd-hero__grid { row-gap: 10px; }
  .dd-hero { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
  .dd-cards { gap: 6px; }
}

/* === Протез: прозрачный фон, без «окошка» и обрезки (владелец 17.09) ===
   Плита #EAF6FD, а залитое видео (232,244,253) и постер (229,243,252) — на 2-5
   единиц темнее, глазу виден светлый прямоугольник. Обрезанный кадр 586×618 резал
   объект при повороте. Берём jaws-v9-alpha.webm (VP9 + альфа, 960×960, запас
   160-200px по краям). Постер — тоже прозрачный, чтобы до старта видео не было окна. */
.dd-scene__object { background: transparent; }
.dd-scene__still, .dd-scene__video { background: transparent; object-fit: contain; }

/* === Ландшафт телефона: финал эталона ed8a661, перенос 17.09 === */
@media (min-width: 768px) and (max-width: 959px) and (max-height: 500px) and (orientation: landscape) {
  .dd-hero { padding: var(--space-xs) var(--plate-pad); }
  .dd-hero__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-md);
    align-items: start;
  }
  /* Левая колонка: единый вертикальный ритм по принципу мобильной версии */
  .dd-hero__col-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .dd-hero__col-text > *,
  .dd-hero__col-text h1.dd-h1,
  .dd-hero__col-text .dd-lead,
  .dd-hero__col-text .dd-eyebrow {
    margin-top: 0;
    margin-bottom: 0;
  }
  /* Отступы между смысловыми группами: 16px (--space-md) через gap (8px) + margin-top (8px) */
  .dd-bullets__intro { margin-top: var(--space-sm); }
  .dd-cta-row { margin-top: var(--space-sm); }

  /* шапка тоже ужимается: в ландшафте каждый пиксель по высоте на счету */
  .dd-header { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
  .dd-header__cta { min-height: 32px; font-size: 11px; }
  .dd-hero__col-media { order: initial; }
  .dd-eyebrow {
    font-size: 11px;
    padding: var(--space-xs) var(--space-sm);
    align-self: flex-start;
  }
  .dd-h1 { font-size: 22px; line-height: 1.1; }
  .dd-lead { font-size: 13px; line-height: 1.35; }
  .dd-bullets__intro { font-size: 12px; }
  .dd-cards { gap: var(--space-xs); }
  .dd-card { gap: var(--space-xs); padding: var(--space-xs); }
  .dd-card__icon { width: 22px; height: 22px; }
  .dd-card__title { font-size: 10px; }
  .dd-card__note { font-size: 8px; }
  .dd-btn--big { padding: 6px var(--space-md); font-size: 13px; min-height: 34px; }
  .dd-cta-note { font-size: 11px; line-height: 1.3; }
  .dd-disclaimer { font-size: 10px; line-height: 1.3; }

  /* Правая колонка: сцена и бейджи доверия рядом, выровненные по верху */
  .dd-scene {
    display: flex;
    flex-direction: row;
    /* stretch: рейтинги тянутся на высоту протеза — низы совпадают,
       а не только верхи (замер: протез 84..247, рейтинги 84..202) */
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-sm);
  }
  .dd-scene__object {
    width: min(100%, 38vh);
    height: 38vh;
    flex: none;
    margin: 0;
  }
  .dd-trustcards-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-xs);
    margin: 0;
    flex: 1 1 0;
  }
  .dd-trustcard {
    position: static;
    padding: var(--space-xs) var(--space-sm);
    width: 100%;
  }
  .dd-trustcard__text b { font-size: 9px; }
  .dd-trustcard__text small { font-size: 8px; }
}

@media (min-width: 768px) and (max-width: 959px) and (max-height: 440px) and (orientation: landscape) {
  .dd-hero { padding-top: var(--space-xs); }
  .dd-header { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
  .dd-header__cta { min-height: 28px; font-size: 10px; }
  .dd-eyebrow { font-size: 10px; padding: var(--space-xs) var(--space-sm); }
  .dd-h1 { font-size: 19px; line-height: 1.08; }
  .dd-lead { font-size: 12px; line-height: 1.3; }
  .dd-bullets__intro { font-size: 11px; }
  .dd-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
  .dd-card { padding: var(--space-xs); }
  .dd-card__icon { width: 18px; height: 18px; }
  .dd-card__icon img { width: 18px; height: 18px; }
  .dd-card__title { font-size: 9px; }
  .dd-card__note { font-size: 7.5px; }
  .dd-btn--big { padding: 5px var(--space-sm); font-size: 12px; min-height: 30px; }
}

/* === Плашки «по дуге» не залезают на протез (владелец 17.09) ===
   Объект в кадре 648×700 занимает 30..617px по X — правый край на 95% ширины
   контейнера. Плашки вынесены за него отрицательным right. Замер до: −35/−28px
   перекрытия на 1280, после — зазор ≥8px на 1280/1366/1920. */

/* ================= Блок 3, 17.09: «Образование: протез на четырёх имплантах» =================
   Только токены design system (hero.css). Namespace .dd-block03, чтобы не задеть другие блоки. */

.dd-block03 { background: var(--color-white); }

.dd-block03__inner {
  padding: var(--space-3xl) var(--plate-pad) var(--space-2xl);
}

/* ---------- Шапка блока: центрированная колонка ---------- */
.dd-block03__head {
  max-width: 760px;
  margin: 0 auto var(--space-2xl);
  text-align: center;
}
.dd-block03__head .dd-lead { max-width: none; margin: 0; }

/* Микро-иконка геолокации у --pill лишняя по смыслу в этом блоке (ТЗ п.3) */
.dd-block03__eyebrow { padding-left: 16px; }
.dd-block03__eyebrow::before { content: none; }

/* ---------- Сцена-схема: макет челюсти 16:9 с выносками ---------- */
.dd-diagram {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--plate-accent);
}
.dd-diagram__img {
  width: 100%;
  height: auto; /* иначе атрибут height=576 перебивает aspect-ratio (гоча 17.09) */
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
.dd-diagram__pin {
  position: absolute;
  top: var(--pin-top);
  left: var(--pin-left);
  transform: translate(-50%, -50%);
  background: var(--color-white);
  border-radius: var(--radius-chip);
  padding: 7px 14px;
  box-shadow: 0 3px 0 rgba(11, 60, 93, .10), 0 10px 22px rgba(11, 60, 93, .14);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-brand-navy);
  white-space: nowrap;
}

.dd-block03__scene-note {
  text-align: center;
  margin: var(--space-md) 0 0;
}

/* ---------- Карточки-вопросы ---------- */
.dd-qa {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
.dd-qa__item {
  background: var(--color-white);
  border: 1px solid rgba(11, 60, 93, .08);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
}
.dd-qa__q {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: clamp(16px, .5vw + 14px, 18px);
  line-height: 1.3;
  color: var(--color-brand-blue);
  margin: 0;
}
.dd-qa__a {
  font-size: 15px;
  line-height: var(--body-line-height);
  color: var(--color-text-primary);
  opacity: .8;
  margin: var(--space-sm) 0 0;
}

@media (hover: hover) {
  .dd-qa__item { transition: transform .16s ease; }
  .dd-qa__item:hover { transform: translateY(-2px); }
}

/* ---------- Плашка «Что решается на диагностике» ---------- */
.dd-callout {
  margin: var(--space-2xl) 0 0;
  background: var(--plate-accent);
  border-radius: var(--radius-plate);
  padding: var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-2xl);
  align-items: center;
}

.dd-callout__title { color: var(--color-brand-navy); margin: 0 0 var(--space-md); }

.dd-callout__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dd-callout__list li {
  position: relative;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-primary);
  padding-left: calc(var(--chip-dot) + var(--space-sm));
}
.dd-callout__list li + li { margin-top: var(--space-md); }
.dd-callout__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: var(--chip-dot);
  height: var(--chip-dot);
  border-radius: 999px;
  background: var(--color-brand-blue);
}

.dd-callout__photo {
  align-self: start;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* ---------- Мостик ---------- */
.dd-block03__bridge {
  text-align: center;
  margin: var(--space-xl) 0 0;
}

/* ================= Планшет 768-959 ================= */
@media (min-width: 768px) and (max-width: 959px) {
  .dd-qa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-callout { grid-template-columns: 1fr; }
  .dd-callout__photo { order: -1; max-width: 320px; margin: 0 auto; }
}

/* ================= Мобайл ≤767 ================= */
@media (max-width: 767px) {
  .dd-block03__inner {
    padding: var(--space-2xl) var(--plate-pad) var(--space-xl);
  }
  .dd-block03__head { text-align: left; margin-bottom: var(--space-xl); }

  .dd-diagram { max-width: none; }

  /* На узком экране подписи поверх фото нечитаемы (ТЗ п.4): уходят в список под картинкой */
  .dd-diagram__pins {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm) 0 0;
    margin: 0;
  }
  .dd-diagram__pin {
    position: static;
    transform: none;
    top: auto;
    left: auto;
  }

  .dd-qa {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-top: var(--space-xl);
  }

  .dd-callout {
    grid-template-columns: 1fr;
    padding: var(--space-lg);
    gap: var(--space-lg);
    margin-top: var(--space-xl);
  }
  .dd-callout__photo { order: -1; max-width: none; }

  .dd-block03__bridge { text-align: left; margin-top: var(--space-lg); }
}

/* === Видео сцены: до фактического старта прозрачно, кнопку Play iOS/WebView не показываем (владелец 17.09) === */
.dd-scene__video:not(.is-live) { opacity: 0; }
.dd-scene__video.is-live { opacity: 1; transition: opacity .25s ease; }
.dd-scene__video::-webkit-media-controls, .dd-scene__video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

/* === STOM-45 (23.09): попапы уход/повторный визит + квиз-вопрос-1 на первом экране === */
.dd-promo-modal .dd-modal__box {
  max-width: 420px;
  text-align: left;
  padding: 32px 28px 28px;
}
.dd-promo-modal__title {
  font-family: var(--font-family-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-brand-navy);
  margin: 0 0 12px;
  line-height: 1.35;
  padding-right: 20px;
}
.dd-promo-modal__text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary, #4a5568);
  margin: 0 0 20px;
}
.dd-promo-modal__cta {
  width: 100%;
  justify-content: center;
}

/* Квиз-тизер (STOM-45, 23.09) убран с первого экрана по приказу владельца 23.09 —
   компонент .dd-hA__quiz-teaser* удалён вместе с разметкой (STOM-60). */