/* ============================================================
   Dom.models v37 — «эмоциональные качели».
   Подключается ПОСЛЕДНИМ на всех страницах, поэтому перекрывает
   dom-patch.css, chat-widget.css и site-extra.css.
   ============================================================ */

/* ---------- 1. Хук: маленькая строка с ключом внутри h1 ----------
   «Модельная школа…» остаётся в h1 для поиска, но визуально это
   тихая надстрочная подпись, а главная — эмоциональная фраза. */
.dm-h1-kicker {
  display: block;
  margin-bottom: 1.1rem;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: oklch(90% 0.05 80 / 0.92);
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
@media (min-width: 640px) {
  .dm-h1-kicker { font-size: 0.875rem; }
}

/* ---------- 2. Сомнения: страх — крупно, ответ — спокойно ----------
   Страх — это крючок, его человек узнаёт в себе. Поэтому он главный
   по размеру, а ответ набран обычным текстом, как тихий голос. */
.dm-fear {
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--foreground);
}
@media (min-width: 768px) {
  .dm-fear { font-size: 1.625rem; }
}
.dm-answer {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: color-mix(in oklab, var(--foreground) 80%, var(--background));
}

/* ---------- 3. Тёплый фон вместо серо-зелёного ---------- */
.dm-sec-rose {
  background: linear-gradient(180deg, oklch(95.5% 0.016 40 / 0.75), oklch(94.6% 0.022 45 / 0.55));
}

/* ---------- 4. Сцена-кульминация: тёмный зал, три кадра ---------- */
.dm-scene {
  position: relative;
  overflow: hidden;
  padding: 6rem 1.25rem 5.5rem;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, oklch(45% 0.07 55 / 0.55), transparent 70%),
    linear-gradient(180deg, oklch(24% 0.03 45) 0%, oklch(20% 0.026 40) 100%);
  color: oklch(95% 0.012 84);
}
.dm-scene::after {
  /* мягкий «луч прожектора» к финальной фразе */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20%;
  width: 70rem;
  height: 30rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, oklch(80% 0.08 70 / 0.16), transparent 65%);
  pointer-events: none;
}
.dm-scene-inner {
  position: relative;
  z-index: 1;
  max-width: 72rem;
  margin: 0 auto;
  text-align: center;
}
.dm-scene-kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: oklch(82% 0.07 75);
}
.dm-scene-title {
  margin-top: 0.9rem;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.1;
  color: oklch(96% 0.02 80);
}
.dm-scene-frames {
  margin-top: 3.5rem;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .dm-scene-frames {
    max-width: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
.dm-frame { margin: 0; text-align: left; }
.dm-frame-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 1.25rem;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.75);
  transition: filter 1.2s ease;
}
/* свет нарастает от кадра к кадру: сомнение → группа → уверенность */
.dm-scene-frames > :nth-child(1) .dm-frame-img { filter: saturate(0.55) brightness(0.82); }
.dm-scene-frames > :nth-child(2) .dm-frame-img { filter: saturate(0.85) brightness(0.93); }
.dm-scene-frames > :nth-child(3) .dm-frame-img { filter: saturate(1.05) brightness(1.04); }
.dm-frame-cap { display: block; margin-top: 1rem; }
.dm-frame-when {
  display: block;
  font-size: 1.875rem;
  line-height: 1.1;
  color: oklch(84% 0.08 75);
}
.dm-frame-text {
  display: block;
  margin-top: 0.35rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: oklch(91% 0.015 80 / 0.88);
}
.dm-scene-final {
  max-width: 40rem;
  margin: 4rem auto 0;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-style: italic;
  line-height: 1.3;
  color: oklch(97% 0.02 80);
}
.dm-scene-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin-top: 2.25rem;
  padding: 1rem 2.25rem;
  border-radius: 999px;
  background: #f3cbad;
  color: oklch(26.9% 0.038 45);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 14px 40px -14px rgba(243, 203, 173, 0.55);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.dm-scene-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 48px -14px rgba(243, 203, 173, 0.7); }
.dm-scene-cta:focus-visible { outline: 2px solid #f3cbad; outline-offset: 4px; }
.dm-scene-note {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: oklch(82% 0.02 75 / 0.72);
}
@media (max-width: 767px) {
  .dm-scene { padding: 4.5rem 1.25rem 4rem; }
  .dm-scene-cta { width: 100%; }
}

/* ---------- 5. Главная: тёплый финал вместо оговорки ---------- */
.dm-home-finale {
  max-width: 38rem;
  margin: 3.5rem auto 0;
  padding: 2.75rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 2rem;
  text-align: center;
  background: linear-gradient(135deg, oklch(93.6% 0.024 40 / 0.75), oklch(92.8% 0.019 78 / 0.6));
}
.dm-home-finale-kicker { font-size: 1.5rem; color: color-mix(in oklab, var(--accent-foreground) 70%, transparent); }
.dm-home-finale-title {
  margin-top: 0.25rem;
  font-size: clamp(1.625rem, 4vw, 2.125rem);
  line-height: 1.2;
  color: var(--foreground);
}
.dm-home-finale-text {
  max-width: 28rem;
  margin: 0.9rem auto 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}
.dm-home-finale .dm-cta { margin-top: 1.75rem; }

/* ---------- 6. Мелкий текст — не мельче 14px ---------- */
@media (max-width: 480px) {
  .dm-hero-chips li { font-size: 0.875rem; }
}
#quiz .text-xs { font-size: 0.875rem; }
.dm-stage-label { font-size: 0.75rem; }

/* ---------- 7. Меньше кнопок, которые «дёргают» ----------
   Компьютер: в шапке уже есть «Записаться», справа внизу — чат.
   Плавающая пара «Чат / Записаться» дублировала обе. */
@media (min-width: 768px) {
  body .mobile-floating-actions { display: none !important; }
}
/* Телефон, страницы с нижней панелью (там есть «Чат» и «Записаться»):
   убираем дубль «Записаться» из шапки, а пузырь чата показываем,
   только когда чат открыт или в нём новое сообщение. */
@media (max-width: 767px) {
  body:has(.mobile-floating-actions) .dm-header-cta { display: none; }
  body:has(.mobile-floating-actions) .dmc:not(.is-open):not(.has-unread) .dmc-launcher { display: none; }
}

/* ---------- 8. Плашка про статистику не закрывает заголовки ---------- */
@media (min-width: 768px) {
  .dm-privacy { left: 1.5rem; right: auto; bottom: 1.5rem; max-width: 30rem; margin: 0; }
}

/* ---------- 9. «Что надеть / Кто увидит кадры / Как добраться» ----------
   Тёплые карточки вместо таблицы: персиковый фон, линейная иконка,
   заголовок шрифтом Playfair, текст — тёплый Manrope 500.
   Компьютер: две карточки рядом, «Как добраться» — во всю ширину. */
.dm-lesson-info {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 0;
  border: 0;
}
@media (min-width: 900px) {
  .dm-lesson-info { grid-template-columns: 1fr 1.5fr; gap: 1.25rem; align-items: stretch; }
}
.dm-lesson-info > div {
  position: relative;
  display: block;
  padding: 1.4rem 1.5rem 1.5rem 4.1rem;
  border: 1px solid oklch(89% 0.03 40 / 0.8);
  border-radius: 1.4rem;
  background:
    radial-gradient(ellipse 80% 90% at 0% 0%, oklch(95% 0.03 35 / 0.9), transparent 70%),
    oklch(96.5% 0.014 70);
}
.dm-lesson-info > div:last-child { padding-bottom: 1.5rem; }
.dm-lesson-info > div::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: 1.45rem;
  width: 1.6rem;
  height: 1.6rem;
  background: oklch(58% 0.09 30);
  -webkit-mask: var(--dm-ico) center / contain no-repeat;
  mask: var(--dm-ico) center / contain no-repeat;
}
.dm-lesson-info > div:nth-child(1) { --dm-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 7a2 2 0 1 1 2-2'/><path d='M12 7v1.5L3.5 15a1.5 1.5 0 0 0 1 2.7h15a1.5 1.5 0 0 0 1-2.7L12 8.5'/></svg>"); }
.dm-lesson-info > div.dm-ico-eye { --dm-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2.1 12.3a1 1 0 0 1 0-.6C3.6 8.1 7.5 5 12 5s8.4 3.1 9.9 6.7a1 1 0 0 1 0 .6C20.4 15.9 16.5 19 12 19s-8.4-3.1-9.9-6.7'/><circle cx='12' cy='12' r='3'/></svg>"); }
.dm-lesson-info > div:has(.dm-route) { --dm-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 5-5.5 10.2-7.4 11.8a1 1 0 0 1-1.2 0C9.5 20.2 4 15 4 10a8 8 0 0 1 16 0'/><circle cx='12' cy='10' r='3'/></svg>"); }
.dm-lesson-info > div > p:first-child {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  color: oklch(30% 0.045 40);
}
.dm-lesson-info > div > p:last-child {
  margin: 0.4rem 0 0;
  max-width: 40rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.7;
  color: oklch(42% 0.05 38);
  text-wrap: pretty;
}
.dm-route > span { display: block; }
.dm-route-lead { margin-top: 0.5rem; }
.dm-route-list {
  margin-top: 0.4rem;
  padding-left: 0.9rem;
  border-left: 2px solid oklch(80% 0.06 40);
}
.dm-route-list > span { display: block; color: oklch(32% 0.045 40); }

@media (max-width: 640px) {
  .dm-lesson-info > div { padding: 1.25rem 1.25rem 1.35rem; }
  .dm-lesson-info > div::before { left: 1.25rem; top: 1.35rem; width: 1.4rem; height: 1.4rem; }
  .dm-lesson-info > div > p:first-child { padding-left: 2.15rem; }
}

/* ---------- 10. Главная кнопка /adult: одно слово, шрифтом заголовков ---------- */
html .dm-hero-row .dm-hero-book { gap: 0.75rem; padding-left: 2.25rem; padding-right: 2rem; }
.dm-hero-book-label {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* ---------- 11. Обещание первого занятия ----------
   Тёплая записка: мягкая розово-персиковая карточка, рукописная подпись,
   крупный курсив. Без жёстких линий сверху и снизу. */
.dm-promise {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  max-width: 40rem;
  margin: 2rem auto 0.5rem;
  padding: 2.1rem 1.75rem 2.25rem;
  border: 1px solid oklch(88% 0.035 35 / 0.7);
  border-radius: 1.75rem;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, oklch(96% 0.025 50 / 0.9), transparent 70%),
    linear-gradient(135deg, oklch(93.5% 0.035 25), oklch(94.5% 0.03 60));
  box-shadow: 0 18px 40px -26px oklch(45% 0.08 30 / 0.45);
}
.dm-promise-kicker {
  font-size: 1.5rem;
  line-height: 1;
  color: oklch(55% 0.085 30);
}
.dm-promise-kicker::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: 0.7rem auto 0;
  background: linear-gradient(90deg, transparent, oklch(70% 0.08 60), transparent);
}
.dm-promise-text {
  max-width: 30rem;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.35;
  color: oklch(30% 0.045 40);
  text-wrap: balance;
}
.dm-promise-accent {
  display: block;
  margin-top: 0.2rem;
  font-style: italic;
  color: oklch(50% 0.09 35);
}

/* ---------- 12. Строка про пробный урок на первом экране ----------
   Стоит там, где фото растворяется в кремовом фоне: светлый текст сливался.
   Даём ей тёмную «стеклянную» подложку — контраст одинаковый на любом экране. */
html .dm-hero-trial.dm-hero-facts {
  display: block;
  width: fit-content;
  max-width: 36rem;
  margin-top: 1.5rem;
  padding: 0.85rem 1.15rem;
  border: 1px solid oklch(95% 0.012 84 / 0.18);
  border-radius: 1rem;
  background: oklch(22% 0.025 45 / 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: oklch(94% 0.012 84 / 0.9);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-shadow: none;
}
html .dm-hero-trial.dm-hero-facts b { color: oklch(97% 0.012 84); font-weight: 600; }

/* ---------- 13. «Написать в чат» на первом экране /adult и /teen ----------
   Был белый прямоугольник в две строки — спорил с персиковой «Записаться».
   Теперь это тихая вторая кнопка: прозрачная, тонкая светлая обводка, одна строка.
   Статус остаётся цветом точки (зелёная — в сети, янтарная — позже), а текст статуса
   скрыт визуально, но читается экранным диктором. */
html .dm-hero-row .dm-chat-cta,
html .dm-hero-row .dm-chat-cta:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 0 1.75rem;
  border: 1px solid oklch(95% 0.012 84 / 0.55);
  border-radius: 999px;
  background: oklch(20% 0.02 50 / 0.25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: oklch(97% 0.012 84);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: none;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.35);
}
html .dm-hero-row .dm-chat-cta:hover {
  background: oklch(20% 0.02 50 / 0.4);
  border-color: oklch(95% 0.012 84 / 0.85);
}
html .dm-hero-row .dm-chat-cta .dm-online-dot { grid-row: auto; }
html .dm-hero-row .dm-chat-cta .dm-chat-cta-note {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 639px) {
  html .dm-hero-row .dm-chat-cta { display: flex; width: 100%; }
}

/* ---------- 14. Подпись под «Сомневаться… — нормально» ----------
   Рукописная пометка в стиле «мысль 1», а не мелкий серый абзац. */
.dm-doubts-note {
  margin-top: 0.5rem;
  font-size: 1.625rem;
  line-height: 1.2;
  color: color-mix(in oklab, var(--accent-foreground) 62%, transparent);
}

/* ---------- 15. «Сомнения»: ответ мягче ----------
   Ровный основной шрифт (Manrope) плотнее обычного, тёплый розово-коричневый,
   с воздухом между строк. Playfair в мелком размере слишком тонкий — глаз «цепляется». */
.dm-answer {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.005em;
  color: oklch(40% 0.05 38);
}
.dm-doubts > * > div {
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, oklch(93.5% 0.03 35 / 0.55), transparent 70%),
    var(--card);
  border-color: oklch(88% 0.025 45);
}
.dm-doubts .dm-fear { color: oklch(30% 0.045 40); }

/* ---------- 16. Шаги первого занятия: три в ряд ---------- */
@media (min-width: 900px) {
  .dm-steps { grid-template-columns: repeat(3, 1fr); gap: 1.25rem 2rem; }
}

/* ---------- 17. «Чему научишься»: мягкие карточки ----------
   Как карточки «Сомнений»: персиковый отлив, тёплый текст,
   внизу — рукописная пометка-обещание вместо «а не…». */
.dm-craft > * > div {
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, oklch(93.5% 0.03 35 / 0.55), transparent 70%),
    var(--card);
  border-color: oklch(88% 0.025 45);
}
.dm-craft h3 { color: oklch(30% 0.045 40); }
.dm-craft-text {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.7;
  color: oklch(42% 0.05 38);
}
.dm-craft-note {
  font-size: 1.5rem;
  line-height: 1.2;
  color: oklch(55% 0.085 30);
}

/* ---------- 18. Завершающая строка под главами ----------
   Рукописная (Caveat) — мягкая записка от подруги, без острых штрихов курсива. */
.dm-craft-close {
  max-width: 34rem;
  margin: 2.5rem auto 0;
  text-align: center;
  font-family: "Caveat", cursive;
  font-size: clamp(1.625rem, 3.4vw, 2rem);
  font-style: normal;
  font-weight: 500;
  line-height: 1.3;
  color: oklch(52% 0.085 30);
  text-wrap: balance;
}

/* ---------- 19. «Твой путь»: ступени и главы ----------
   Ступени — «осень / зима» от руки; главы — тёплый фон, номер и итог от руки. */
.dm-stage {
  border-color: oklch(88% 0.025 45);
  background:
    radial-gradient(ellipse 90% 80% at 100% 0%, oklch(93.5% 0.03 35 / 0.55), transparent 70%),
    var(--card);
}
.dm-stage-label {
  font-family: "Caveat", cursive;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: oklch(55% 0.085 30);
}
.dm-stage-text { color: oklch(42% 0.05 38); font-weight: 500; }
.dm-chapters {
  border-color: oklch(88% 0.025 45);
  background:
    radial-gradient(ellipse 60% 40% at 100% 0%, oklch(93.5% 0.03 35 / 0.5), transparent 70%),
    var(--card);
}
.dm-chapters.divide-y > * + * { border-color: oklch(89% 0.022 45); }
.dm-ch-num {
  font-size: 1.5rem;
  line-height: 1;
  color: oklch(55% 0.085 30);
}
.dm-chapters .font-display { color: oklch(30% 0.045 40); }
.dm-ch-text {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.7;
  color: oklch(42% 0.05 38);
}
.dm-ch-note {
  font-size: 1.375rem;
  line-height: 1.2;
  color: oklch(55% 0.085 30);
}

/* ---------- 20. Тест: живые кнопки ответов ----------
   Персиковый отлив, иконка в розовом кружке, название — Playfair,
   при наведении кнопка приподнимается и мягко светится. */
#quiz button.group {
  border-color: oklch(88% 0.03 40);
  background:
    radial-gradient(ellipse 90% 80% at 0% 0%, oklch(94% 0.035 35 / 0.9), transparent 70%),
    oklch(97% 0.012 70);
  box-shadow: 0 10px 26px -20px oklch(45% 0.08 30 / 0.5);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.3s ease;
}
#quiz button.group:hover,
#quiz button.group:focus-visible {
  transform: translateY(-4px);
  border-color: oklch(72% 0.08 30);
  box-shadow: 0 20px 40px -20px oklch(55% 0.1 30 / 0.55);
}
#quiz button.group[class*="bg-secondary"] {
  border-color: oklch(65% 0.09 30);
  background:
    radial-gradient(ellipse 90% 80% at 0% 0%, oklch(91% 0.05 30), transparent 75%),
    oklch(95.5% 0.02 50);
}
#quiz button.group > svg {
  box-sizing: content-box;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0.5rem;
  border-radius: 999px;
  background: oklch(90.5% 0.05 30);
  color: oklch(50% 0.11 30);
}
#quiz button.group .font-display {
  margin-top: 1.1rem;
  font-size: 1.3rem;
  color: oklch(30% 0.045 40);
}
#quiz button.group .text-xs {
  font-size: 0.9375rem;
  color: oklch(45% 0.05 38);
}
@media (prefers-reduced-motion: reduce) {
  #quiz button.group, #quiz button.group:hover { transition: none; transform: none; }
}
#quiz .bg-secondary { background-color: oklch(91% 0.03 40); }
#quiz .bg-accent\/40 { background-color: oklch(80% 0.06 30); }

/* ---------- 21. Тест на телефоне: иконка в кружке не наезжает на текст ---------- */
@media (max-width: 767px) {
  #quiz button.group.rounded-2xl {
    grid-template-columns: 2.25rem 1fr;
    column-gap: 0.85rem;
  }
  #quiz button.group.rounded-2xl > svg {
    width: 1.05rem;
    height: 1.05rem;
    padding: 0.55rem;
  }
}

/* ---------- 22. Условия микрокурсов: три короткие строки ---------- */
.dm-lab-lines { display: grid; gap: 0.45rem; margin: 0; }
.dm-lab-lines > span {
  position: relative;
  padding-left: 1.1rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: oklch(42% 0.05 38);
}
.dm-lab-lines > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: oklch(70% 0.09 30);
}
.dm-lab-lines b { font-weight: 600; color: oklch(30% 0.045 40); }

/* ---------- 23. Условия под ценой: наш тёплый стиль ---------- */
.dm-price-fact-title {
  font-family: "Caveat", cursive;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  color: oklch(55% 0.085 30);
}
.dm-price-fact p:last-child,
.dm-price-note {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.7;
  color: oklch(42% 0.05 38);
}
.dm-price-fact.is-accent { border-left-color: oklch(75% 0.08 30); }
.dm-price-fact.is-accent p:last-child { color: oklch(35% 0.05 38); }
.dm-price-facts { border-top-color: oklch(89% 0.022 45); }

/* ---------- 24. Форма пробного урока: заголовок и выбор времени ---------- */
.dm-form-title {
  font-size: 1.625rem;
  line-height: 1.2;
  color: oklch(30% 0.045 40);
}
.dm-form-sub {
  margin-top: 0.35rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  color: oklch(42% 0.05 38);
}
.dm-slots { grid-template-columns: 1fr 1fr; }
.dm-slots button {
  align-items: flex-start;
  padding: 1rem 1.1rem 0.9rem;
  border-color: oklch(88% 0.03 40);
  background:
    radial-gradient(ellipse 90% 80% at 0% 0%, oklch(94% 0.035 35 / 0.8), transparent 70%),
    oklch(97% 0.012 70);
}
.dm-slots button:hover { border-color: oklch(72% 0.08 30); }
.dm-slots button[aria-pressed="true"] {
  border-color: oklch(62% 0.1 30);
  background:
    radial-gradient(ellipse 90% 80% at 0% 0%, oklch(90% 0.055 30), transparent 75%),
    oklch(95% 0.02 50);
  box-shadow: 0 14px 30px -18px oklch(50% 0.1 30 / 0.55);
}
.dm-slots .font-display {
  font-size: 1.75rem;
  line-height: 1;
  color: oklch(30% 0.045 40);
}
.dm-slots .text-xs {
  font-family: "Caveat", cursive;
  font-size: 1.375rem;
  line-height: 1.1;
  color: oklch(55% 0.085 30);
}

/* ---------- 25. Подсказки под кнопкой записи ---------- */
.dm-form-hints {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  margin-top: 1.1rem;
  text-align: center;
}
.dm-form-hints > span {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.55;
  color: oklch(45% 0.05 38);
}
.dm-form-teen {
  font-size: 1.375rem;
  line-height: 1.2;
  color: oklch(55% 0.085 30);
  text-decoration: none;
}
.dm-form-teen:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 26. Кнопки микрокурсов ----------
   Главная — персиковая «таблетка» курсивом, как «Записаться» на первом экране.
   «Спросить в чате» — тихая розовая ссылка без рамки. */
html .dm-course-actions .dm-course-more {
  min-height: 50px;
  padding: 0.7rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: #f3cbad;
  color: #3a2a20;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1;
  box-shadow: 0 12px 26px -16px oklch(50% 0.1 40 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.35);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, box-shadow 0.4s ease;
}
html .dm-course-actions .dm-course-more:hover {
  background: #f7d8bf;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -16px oklch(50% 0.1 40 / 0.65), inset 0 0 0 1px rgb(255 255 255 / 0.4);
}
html .dm-course-actions .dm-course-ask,
html .dm-lab-note .dm-course-ask {
  min-height: 44px;
  padding: 0.4rem 0.5rem;
  border: 0;
  background: transparent;
  color: oklch(52% 0.09 30);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: oklch(52% 0.09 30 / 0.35);
  text-underline-offset: 5px;
}
html .dm-course-actions .dm-course-ask:hover,
html .dm-lab-note .dm-course-ask:hover {
  transform: none;
  text-decoration-color: currentColor;
}
.dm-course-actions { align-items: center; }
@media (max-width: 767px) {
  html .dm-course-actions { justify-items: center; }
  html .dm-course-actions .dm-course-ask { width: auto; min-height: 44px; }
}
html .dm-lab-note { display: grid; justify-items: start; gap: 0.5rem; }
@media (max-width: 767px) { html .dm-lab-note { justify-items: stretch; } html .dm-lab-note .dm-course-ask { justify-self: center; } }

/* ---------- 27. Рукописная строка на первом экране ---------- */
.dm-hero-hand {
  display: block;
  margin-top: 0.6rem;
  font-size: 1.75rem;
  line-height: 1.15;
  color: oklch(88% 0.07 60);
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.45);
}
@media (min-width: 640px) { .dm-hero-hand { font-size: 2rem; } }

/* =====================================================================
   28. ЕДИНАЯ СИСТЕМА КНОПОК (все страницы)
   1) Главная — персиковая «таблетка», Playfair курсив, мягкая тень.
   2) Тихая — прозрачная «таблетка» с тонкой тёплой рамкой.
   3) Ссылка — тёплый розовый текст с тонким подчёркиванием.
   ===================================================================== */

/* 1. Главная */
html #root a.bg-primary,
html #root button.bg-primary,
html .dm-cta,
html .dm-scene-cta,
html .dm-course-actions .dm-course-more,
html .dm-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.75rem 1.75rem;
  border: 0;
  border-radius: 999px;
  background: #f3cbad;
  color: #3a2a20;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-decoration: none;
  box-shadow: 0 12px 26px -16px oklch(45% 0.1 40 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.35);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, box-shadow 0.4s ease;
}
html #root a.bg-primary:hover,
html #root button.bg-primary:hover,
html .dm-cta:hover,
html .dm-scene-cta:hover,
html .dm-course-actions .dm-course-more:hover,
html .dm-header-cta:hover {
  background: #f7d8bf;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -16px oklch(45% 0.1 40 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.4);
}
html #root a.bg-primary:focus-visible,
html #root button.bg-primary:focus-visible,
html .dm-cta:focus-visible,
html .dm-scene-cta:focus-visible,
html .dm-header-cta:focus-visible {
  outline: 2px solid oklch(55% 0.1 30);
  outline-offset: 3px;
}
/* в шапке — компактнее */
html #root header a.bg-primary,
html #root header button.bg-primary,
html #root .dm-header-cta,
html .dm-header-cta {
  min-height: 40px;
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
}
/* на тёмной сцене — чуть сильнее свечение */
html .dm-scene-cta { box-shadow: 0 14px 40px -14px rgba(243, 203, 173, 0.55); }

/* 2. Тихая */
html #root a.rounded-full.border:not(.bg-primary),
html #root button.rounded-full.border:not(.bg-primary),
html .dm-chat-cta,
html .dm-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.75rem 1.6rem;
  border: 1px solid oklch(80% 0.045 40);
  border-radius: 999px;
  background: oklch(97% 0.012 70 / 0.6);
  color: oklch(32% 0.045 40);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  box-shadow: none;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
html #root a.rounded-full.border:not(.bg-primary):hover,
html #root button.rounded-full.border:not(.bg-primary):hover,
html .dm-chat-cta:hover,
html .dm-cta-secondary:hover {
  border-color: oklch(62% 0.09 30);
  background: oklch(94.5% 0.03 40 / 0.8);
  transform: translateY(-2px);
}
/* тихая на тёмном фото первого экрана — светлая рамка (из пункта 13) */
html .dm-hero-row .dm-chat-cta,
html .dm-hero-actions .dm-cta-secondary {
  border-color: oklch(95% 0.012 84 / 0.55);
  background: oklch(20% 0.02 50 / 0.25);
  color: oklch(97% 0.012 84);
}
html .dm-hero-row .dm-chat-cta:hover,
html .dm-hero-actions .dm-cta-secondary:hover {
  border-color: oklch(95% 0.012 84 / 0.85);
  background: oklch(20% 0.02 50 / 0.4);
}

/* 3. Ссылка */
html .dm-hero-sublink,
html .dm-course-actions .dm-course-ask,
html .dm-lab-note .dm-course-ask {
  color: oklch(52% 0.09 30);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: oklch(52% 0.09 30 / 0.35);
  text-underline-offset: 5px;
}
/* ссылка на тест лежит на светлом низу фото — делаем чуть темнее */
html .dm-hero-sublink { color: oklch(45% 0.08 30); text-shadow: none; }

/* 28a. Тихие кнопки на тёмном фото первого экрана (главная, /teen, /adult) */
html #root .dm-hero-scrim a.rounded-full.border:not(.bg-primary),
html #root .dm-hero-scrim .dm-chat-cta,
html #root .dm-hero-scrim .dm-cta-secondary,
html #root .dm-gold-on-dark .dm-chat-cta {
  border-color: oklch(95% 0.012 84 / 0.55);
  background: oklch(20% 0.02 50 / 0.25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: oklch(97% 0.012 84);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.35);
}
html #root .dm-hero-scrim a.rounded-full.border:not(.bg-primary):hover,
html #root .dm-hero-scrim .dm-chat-cta:hover,
html #root .dm-hero-scrim .dm-cta-secondary:hover {
  border-color: oklch(95% 0.012 84 / 0.85);
  background: oklch(20% 0.02 50 / 0.4);
}
html #root .dm-hero-scrim .dm-chat-cta-note {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 639px) {
  html #root .dm-hero-actions .dm-cta-secondary { width: 100%; max-width: 22rem; }
}

/* 28b. Надписи на главных кнопках — мягкий Manrope вместо острого курсива Playfair */
html #root a.bg-primary,
html #root button.bg-primary,
html .dm-cta,
html .dm-scene-cta,
html .dm-course-actions .dm-course-more,
html .dm-header-cta,
html #root .dm-hero-book-label {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.01em;
}
html #root a.bg-primary,
html #root button.bg-primary,
html .dm-cta,
html .dm-scene-cta,
html .dm-course-actions .dm-course-more { font-size: 1rem; }
html #root .dm-hero-book-label { font-size: 1.0625rem; }
html #root header a.bg-primary,
html #root header button.bg-primary,
html #root .dm-header-cta,
html .dm-header-cta { font-size: 0.875rem; }
html .dm-hero-trial.dm-hero-facts b { display: block; margin-bottom: 0.2rem; }

/* ---------- 29. Главы на телефоне: шире колонка, ровные переносы ---------- */
.dm-chapters .font-display { text-wrap: balance; }
.dm-ch-text { text-wrap: pretty; }
@media (max-width: 639px) {
  .dm-chapters > * > div { padding: 1.35rem 1.25rem 1.4rem; gap: 0.3rem; }
  .dm-chapters .font-display { font-size: 1.3rem; line-height: 1.25; }
  .dm-ch-text { font-size: 0.9375rem; line-height: 1.65; }
  .dm-ch-note { font-size: 1.3rem; }
}

/* ---------- 30. Заголовки карточек микрокурсов — крупнее и плотнее ---------- */
.dm-craft h3.font-display {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: oklch(28% 0.045 40);
  text-wrap: balance;
}
@media (max-width: 639px) { .dm-craft h3.font-display { font-size: 1.45rem; } }
.dm-craft .dm-craft-text { margin-top: 0.6rem; }

/* ---------- 31. Все заголовки — плотнее (Playfair 500), тёплый тёмный ---------- */
html #root h2.font-display,
html #root h3.font-display,
html #root .dm-chapters span.font-display,
html #root .dm-stage-title,
html #root .dm-form-title,
html #root .dm-promise-text {
  font-weight: 500;
  letter-spacing: -0.005em;
}
html #root h2.font-display:not(.dm-scene-title),
html #root h3.font-display,
html #root .dm-chapters span.font-display,
html #root .dm-stage-title {
  color: oklch(28% 0.045 40);
}
html #root .dm-scene-title { font-weight: 500; }
@media (min-width: 640px) { html #root .dm-chapters span.font-display { font-size: 1.5rem; line-height: 1.2; } }

/* ---------- 32. «Что надеть / Как добраться» — заголовки плотнее ---------- */
html #root .dm-lesson-info > div > p:first-child {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: oklch(28% 0.045 40);
}
html #root .dm-lesson-info > div > p:last-child { margin-top: 0.55rem; }

/* ---------- 33. «Мысли» в «Сомнениях» — плотнее ---------- */
html #root .dm-fear {
  font-weight: 500;
  letter-spacing: -0.005em;
  color: oklch(28% 0.045 40);
}

/* ---------- 34. «Что надеть / Как добраться»: иконка всегда в строке с заголовком,
   карточки рядом только на широком экране ---------- */
html #root .dm-lesson-info > div { padding: 1.35rem 1.4rem 1.45rem; }
html #root .dm-lesson-info > div::before { left: 1.4rem; top: 1.5rem; width: 1.4rem; height: 1.4rem; }
html #root .dm-lesson-info > div > p:first-child { padding-left: 2.2rem; }
html #root .dm-lesson-info { grid-template-columns: 1fr; }
@media (min-width: 1100px) {
  html #root .dm-lesson-info { grid-template-columns: 1fr 1.5fr; }
}

/* ---------- 35. «Как добраться»: короткие строки, номера автобусов выделены ---------- */
html #root .dm-route-list > span { color: oklch(40% 0.05 38); }
html #root .dm-route-list b {
  display: inline-block;
  min-width: 2.9rem;
  font-weight: 700;
  color: oklch(52% 0.1 30);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 430px) {
  html #root #first-lesson .rounded-\[2rem\].p-7 { padding: 1.1rem 0.85rem; }
  html #root .dm-lesson-info > div { padding: 1.2rem 1.05rem 1.3rem; }
  html #root .dm-lesson-info > div::before { left: 1.05rem; top: 1.35rem; }
  html #root .dm-route-list > span { white-space: nowrap; font-size: 0.9375rem; }
  html #root .dm-route-list b { min-width: 2.6rem; }
}

/* ---------- 36. Ровные переносы у всех заголовков и рукописных пометок ---------- */
html #root h1, html #root h2, html #root h3,
html #root .dm-doubts-note, html #root .hand { text-wrap: balance; }
html #root p { text-wrap: pretty; }

/* ---------- 37. ЕДИНЫЙ ТЕКСТ ОПИСАНИЙ («как персик») ----------
   Manrope 500, 16px, интервал 1.7, тёплый розово-коричневый — во всех карточках.
   Мелкие подписи — 15px той же плотности и цвета. */
html #root .dm-answer,
html #root .dm-step-text,
html #root .dm-lesson-info > div > p:last-child,
html #root #teachers .text-sm.text-muted-foreground,
html #root #teachers p.text-sm.font-medium,
html #root .dm-stage-text,
html #root .dm-ch-text,
html #root .dm-craft-text,
html #root .dm-price-note,
html #root .dm-price-fact p:last-child,
html #root .dm-form-sub,
html #root #final .divide-y p,
html #root .dm-lab-lines > span,
html #root #quiz h3 + p {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.003em;
  color: oklch(42% 0.05 38);
}
html #root #teachers p.text-sm.font-medium { color: oklch(34% 0.05 38); }
html #root .dm-frame-text { font-size: 1rem; font-weight: 500; line-height: 1.7; }
html #root #quiz button.group .text-xs,
html #root .dm-price-sub,
html #root .dm-form-hints > span {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: oklch(45% 0.05 38);
}

/* ---------- 38. ЕДИНАЯ ЛЕСТНИЦА ЗАГОЛОВКОВ ----------
   2) заголовки карточек — Playfair 500, 1.5rem (телефон 1.375rem), интервал 1.25;
   3) маленькие — Playfair 500, 1.25rem;
   4) строки списков — Manrope 600, тёплый тёмный. */
html #root .dm-fear,
html #root .dm-lesson-info > div > p:first-child,
html #root #teachers h3,
html #root .dm-stage-title,
html #root .dm-chapters span.font-display,
html #root .dm-craft h3.font-display,
html #root .dm-form-title,
html #root #final .mt-14 h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: oklch(28% 0.045 40);
}
html #root .dm-fear { font-style: italic; }
@media (max-width: 639px) {
  html #root .dm-fear,
  html #root .dm-lesson-info > div > p:first-child,
  html #root #teachers h3,
  html #root .dm-stage-title,
  html #root .dm-chapters span.font-display,
  html #root .dm-craft h3.font-display,
  html #root .dm-form-title,
  html #root #final .mt-14 h2 { font-size: 1.375rem; }
}
html #root .dm-step-title,
html #root #quiz button.group .font-display {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  color: oklch(28% 0.045 40);
}
html #root #quiz h3 { font-size: 1.75rem; line-height: 1.2; }
@media (max-width: 639px) { html #root #quiz h3 { font-size: 1.5rem; } }
html #root #final .divide-y button span.font-medium,
html #root .dm-price-name {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  color: oklch(30% 0.045 40);
}
html #root .dm-price-eyebrow { color: oklch(52% 0.07 35); }

/* ---------- 39. Финальная фраза сцены — мягкая рукописная, тёплая, без резкого контраста ---------- */
html #root .dm-scene-final {
  max-width: 34rem;
  font-family: "Caveat", cursive;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.9rem, 4.2vw, 2.5rem);
  line-height: 1.25;
  color: oklch(86% 0.07 65);
  text-shadow: 0 0 24px oklch(70% 0.1 60 / 0.25);
  text-wrap: balance;
}

/* =====================================================================
   40. /men — новая страница в 7 сцен
   ===================================================================== */
.dm-men-hero { position: relative; overflow: hidden; background: oklch(24% 0.03 45); }
.dm-men-hero-bg { position: absolute; inset: 0; }
.dm-men-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.dm-men-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, oklch(20% 0.025 45 / 0.88) 0%, oklch(22% 0.025 45 / 0.62) 45%, oklch(24% 0.025 45 / 0.25) 100%),
    linear-gradient(180deg, transparent 60%, oklch(20% 0.025 45 / 0.55) 100%);
}
@media (max-width: 767px) {
  .dm-men-hero-bg img { object-position: 62% 20%; }
  .dm-men-hero-bg::after { background: linear-gradient(180deg, oklch(20% 0.025 45 / 0.55) 0%, oklch(20% 0.025 45 / 0.82) 55%, oklch(20% 0.025 45 / 0.92) 100%); }
}
.dm-men-hero-inner {
  position: relative; z-index: 1;
  max-width: 72rem; margin: 0 auto;
  padding: 6.5rem 1.25rem 4.5rem;
}
@media (min-width: 768px) { .dm-men-hero-inner { padding: 8.5rem 2rem 6rem; } }
.dm-men-h1 {
  max-width: 40rem;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 500;
  line-height: 1.08;
  color: oklch(97% 0.01 75);
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.5);
  text-wrap: balance;
}
.dm-men-lead {
  max-width: 34rem; margin-top: 1.5rem;
  font-size: 1.125rem; font-weight: 500; line-height: 1.6;
  color: oklch(94% 0.012 75 / 0.92);
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.45);
}
.dm-men-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
@media (max-width: 639px) { .dm-men-actions { flex-direction: column; } .dm-men-actions > a { width: 100%; } }
html #root .dm-men-actions .dm-chat-cta {
  border-color: oklch(95% 0.012 84 / 0.55); background: oklch(20% 0.02 50 / 0.25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: oklch(97% 0.012 84);
}
.dm-men-trial {
  display: block; width: fit-content; max-width: 34rem; margin-top: 1.5rem;
  padding: 0.85rem 1.15rem; border: 1px solid oklch(95% 0.012 84 / 0.18); border-radius: 1rem;
  background: oklch(22% 0.025 45 / 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 0.9375rem; font-weight: 500; line-height: 1.6; color: oklch(94% 0.012 84 / 0.9);
}
.dm-men-trial b { display: block; margin-bottom: 0.2rem; font-weight: 600; color: oklch(97% 0.012 84); }
.dm-men-giftlink {
  display: inline-block; margin-top: 1.1rem;
  font-family: "Caveat", cursive; font-size: 1.5rem; line-height: 1.2;
  color: oklch(88% 0.07 60); text-decoration: none;
}
.dm-men-giftlink:hover { text-decoration: underline; text-underline-offset: 4px; }

/* карточки «Зачем» */
html #root #zachem .dm-craft h3 { margin: 0; }

/* строка про микрокурсы и руководителей */
.dm-men-more {
  margin-top: 1.75rem; text-align: center;
  font-size: 1rem; font-weight: 500; line-height: 1.7; color: oklch(42% 0.05 38);
}
.dm-men-more a, .dm-men-textlink {
  color: oklch(52% 0.09 30); font-weight: 600;
  text-decoration: underline; text-decoration-color: oklch(52% 0.09 30 / 0.35); text-underline-offset: 5px;
}

/* цена + подарок */
.dm-men-price-grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 900px) { .dm-men-price-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.dm-men-price-grid > * { display: flex; flex-direction: column; }
.dm-men-lines { display: grid; gap: 0.5rem; margin: 1.25rem 0 1.5rem; }
.dm-men-lines > span {
  position: relative; padding-left: 1.1rem;
  font-size: 1rem; font-weight: 500; line-height: 1.55; color: oklch(42% 0.05 38);
}
.dm-men-lines > span::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.4rem; height: 0.4rem; border-radius: 999px; background: oklch(70% 0.09 30);
}
.dm-men-lines b { font-weight: 700; color: oklch(30% 0.045 40); }
html #root .dm-men-btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 639px) { html #root .dm-men-btn { align-self: stretch; } }
.dm-men-gift {
  padding: 1.75rem; border: 1px solid oklch(88% 0.03 40); border-radius: 2rem;
  background: radial-gradient(ellipse 90% 70% at 100% 0%, oklch(93.5% 0.035 35 / 0.7), transparent 70%), var(--card);
  box-shadow: 0 18px 40px -30px oklch(45% 0.08 30 / 0.45);
}
.dm-men-gift-kicker { font-size: 1.5rem; line-height: 1; color: oklch(55% 0.085 30); }
html #root .dm-men-gift h3 { margin-top: 0.4rem; }
.dm-men-gift .dm-craft-text { margin-top: 0.6rem; }
.dm-men-tip { margin: 0 0 1.5rem; font-size: 1.375rem; line-height: 1.25; color: oklch(52% 0.085 30); }

/* форма */
.dm-men-form label { font-size: 0.9375rem; font-weight: 500; color: oklch(35% 0.045 40); }
.dm-men-accent { font-style: italic; color: oklch(84% 0.1 75); }
html #root .dm-men-gift h3 { font-family: "Playfair Display", Georgia, serif; font-size: 1.5rem; font-weight: 500; line-height: 1.25; color: oklch(28% 0.045 40); }
@media (min-width: 640px) { html #root .dm-ch-text { width: 24rem; max-width: 24rem; } }
@media (min-width: 768px) { html #root header .md\:hidden { display: none !important; } }

/* =====================================================================
   41. /teen — страница для родителей
   ===================================================================== */
.dm-teen-for { font-size: 1.625rem; line-height: 1; margin-bottom: 0.6rem; color: oklch(88% 0.07 60); }
.dm-safe-card {
  height: 100%; padding: 1.4rem 1.5rem 1.5rem;
  border: 1px solid oklch(88% 0.03 40); border-radius: 1.4rem;
  background: radial-gradient(ellipse 90% 80% at 0% 0%, oklch(94.5% 0.03 35 / 0.8), transparent 70%), var(--card);
}
.dm-safe-title {
  position: relative; padding-left: 1.6rem;
  font-size: 1.25rem; font-weight: 500; line-height: 1.25; color: oklch(28% 0.045 40);
}
.dm-safe-title::before {
  content: "✓"; position: absolute; left: 0; top: 0.05em;
  font-family: "Manrope", sans-serif; font-size: 1rem; font-weight: 700; color: oklch(55% 0.1 30);
}
.dm-safe-card .dm-craft-text { margin-top: 0.5rem; }
.dm-teacher-check {
  margin-top: 1rem; padding: 0.55rem 0.8rem; border-radius: 0.75rem;
  background: oklch(94% 0.03 35); font-size: 0.875rem; font-weight: 500; line-height: 1.5; color: oklch(40% 0.05 38);
}

/* ---------- 42. Главная: триптих «три двери» в шапке ---------- */
.dm-tri { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; height: 100%; background: oklch(22% 0.025 45); }
.dm-tri-img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }
.dm-tri-img:nth-child(1) { object-position: 55% 25%; }
.dm-tri-img:nth-child(2) { object-position: 45% 30%; }
.dm-tri-img:nth-child(3) { object-position: 55% 25%; }

/* 43. /adult → ссылка на отдельную мужскую группу */
html #root .dm-men-link{margin-top:.9rem;font-family:Manrope,system-ui,sans-serif;font-weight:500;font-size:15px;line-height:1.5;color:var(--muted-foreground)}
html #root .dm-men-link a{color:inherit!important;text-decoration:underline;text-decoration-color:color-mix(in oklch,var(--primary) 30%,transparent)!important;text-underline-offset:5px;text-decoration-thickness:1px;transition:color .2s}
html #root .dm-men-link a:hover{color:var(--foreground)!important}

/* 44. Пометка формата у глав: «среди девушек / мужской группой» и «вместе» */
html #root .dm-ch-head{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
html #root .dm-ch-tag{display:inline-flex;align-items:center;gap:.45em;padding:.3em .85em;border-radius:999px;font-family:Manrope,system-ui,sans-serif;font-weight:500;font-size:12.5px;line-height:1.3;letter-spacing:.01em;color:#8a5646;background:#f4e2da;white-space:nowrap}
html #root .dm-ch-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#c98b76}
html #root .dm-ch-tag.is-together{color:#6b5a4a;background:#ece3d3}
html #root .dm-ch-tag.is-together::before{width:12px;border-radius:3px;background:linear-gradient(90deg,#c98b76 50%,#8f7f6c 50%)}

/* 45. /deti — светлый первый экран без фото */
.dm-kids-hero { position: relative; overflow: hidden;
  background:
    radial-gradient(60rem 30rem at 85% 10%, oklch(92% 0.045 40 / 0.9), transparent 60%),
    radial-gradient(40rem 28rem at 5% 100%, oklch(93% 0.04 85 / 0.9), transparent 65%),
    oklch(96.5% 0.015 75); }
.dm-kids-doodle { position: absolute; right: -2rem; top: 1rem; width: min(26rem, 70vw); height: auto; color: oklch(70% 0.09 40 / 0.45); pointer-events: none; }
@media (max-width: 767px) { .dm-kids-doodle { opacity: .55; right: -5rem; top: -1rem; } }
.dm-kids-hero-inner { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; padding: 5.5rem 1.25rem 4.5rem; }
@media (min-width: 768px) { .dm-kids-hero-inner { padding: 7.5rem 2rem 6rem; } }
.dm-kids-hero .dm-teen-for { color: oklch(55% 0.1 35); }
.dm-kids-h1 { max-width: 44rem; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 500; line-height: 1.1; color: var(--foreground); text-wrap: balance; }
.dm-kids-hero .dm-h1-kicker { color: oklch(50% 0.06 45); }
.dm-kids-hero .dm-men-accent { color: oklch(52% 0.11 35); font-style: italic; }
.dm-kids-hero .dm-men-lead { color: oklch(38% 0.03 45); text-shadow: none; }
.dm-kids-hero .dm-hero-hand { color: oklch(55% 0.1 35); }
html #root .dm-kids-hero .dm-men-actions .dm-chat-cta { border-color: oklch(35% 0.04 50 / 0.3); background: oklch(100% 0 0 / 0.55); color: var(--foreground); }
.dm-kids-hero .dm-men-trial { border-color: oklch(70% 0.05 50 / 0.3); background: oklch(100% 0 0 / 0.6); color: oklch(38% 0.03 45); }
.dm-kids-hero .dm-men-trial b { color: var(--foreground); }
.dm-kids-hero .dm-men-giftlink { color: oklch(52% 0.11 35); }
html #root .dm-kids-safe h3 { font-size: 1.3rem; }
.dm-kids-hero .dm-h1-kicker, .dm-kids-hero .dm-hero-hand, .dm-kids-hero .dm-teen-for, .dm-kids-h1 { text-shadow: none !important; }
.dm-kids-grid { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; display: grid; }
.dm-kids-grid .dm-kids-hero-inner { max-width: none; margin: 0; }
.dm-kids-ages { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: -2.5rem 1.25rem 3.5rem; padding: 1.25rem; border-radius: 1.75rem; background: oklch(100% 0 0 / 0.55); border: 1px solid oklch(70% 0.05 50 / 0.25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dm-kids-ages-kicker { grid-column: 1 / -1; margin: 0; font-size: 1.6rem; line-height: 1; color: oklch(55% 0.1 35); }
.dm-kids-age { display: flex; align-items: baseline; justify-content: center; gap: .35rem; padding: 1rem .5rem; border-radius: 1.25rem; background: oklch(94% 0.04 45); }
.dm-kids-age:nth-of-type(2) { background: oklch(93.5% 0.04 85); }
.dm-kids-age span { font-size: 2.1rem; font-weight: 500; line-height: 1; color: var(--foreground); }
.dm-kids-age small { font-family: Manrope, system-ui, sans-serif; font-size: .9rem; font-weight: 500; color: oklch(45% 0.03 45); }
.dm-kids-ages-note { grid-column: 1 / -1; margin: .25rem 0 0; font-family: Manrope, system-ui, sans-serif; font-weight: 500; font-size: 15px; line-height: 1.55; color: oklch(40% 0.03 45); text-align: center; }
@media (min-width: 1024px) {
  .dm-kids-grid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: center; gap: 2rem; padding-right: 2rem; }
  .dm-kids-ages { margin: 0; padding: 1.75rem; transform: rotate(1.5deg); box-shadow: 0 20px 50px -25px oklch(40% 0.06 40 / 0.35); }
  .dm-kids-age span { font-size: 2.6rem; }
  .dm-kids-doodle { right: 1rem; top: 1.5rem; width: 18rem; }
}
.dm-kids-age span { white-space: nowrap; }
@media (min-width: 1024px) { .dm-kids-grid { grid-template-columns: minmax(0, 1fr) 22rem; } .dm-kids-age span { font-size: 2.3rem; } }
/* 46. Главная: дверь «детям 7–12» без фото */
html #root .dm-door-kids { background: radial-gradient(18rem 10rem at 80% 0%, oklch(92% 0.045 40), transparent 70%), radial-gradient(16rem 10rem at 0% 100%, oklch(93% 0.04 85), transparent 70%), oklch(96% 0.015 75); }
html #root .dm-door-kids span { padding: .55rem 1rem; border-radius: 1rem; background: oklch(100% 0 0 / .6); font-size: 1.9rem; font-weight: 500; line-height: 1; color: var(--foreground); white-space: nowrap; transition: transform .5s; }
html #root .dm-door-kids span:nth-child(2) { transform: rotate(3deg); }
html #root a:hover .dm-door-kids span:first-child { transform: rotate(-3deg); }
/* 47. /teen → ссылка на /deti в первом экране (фон там уже светлеет) */
html #root .dm-teen-kidslink { color: oklch(50% 0.11 35) !important; text-shadow: 0 0 12px oklch(97% 0.01 75 / 0.9); }

/* 48. Преподаватели: галерея фото в карточке (Ольга) */
html #root .dm-teacher-gallery { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; margin-bottom: 1.25rem; }
html #root .dm-teacher-gallery.is-two { grid-template-columns: 1fr 1fr; }
html #root .dm-teacher-gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; border-radius: 1rem; border: 1px solid color-mix(in oklch, var(--border) 60%, transparent); }
html #root .dm-teachers-grid > * { min-width: 0; }
html #root .dm-teacher-collage { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
html #root .dm-teacher-collage img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; border-radius: 1.1rem; border: 1px solid color-mix(in oklch, var(--border) 60%, transparent); }
html #root .dm-teacher-collage img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 5; border-radius: 1.5rem; }

/* 49. /deti: фото группы в первом экране и блок преподавателя */
.dm-kids-photo { grid-column: 1 / -1; margin: 0 0 .25rem; }
.dm-kids-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.25rem; }
html #root .dm-kids-teacher { display: grid; gap: 1.5rem; align-items: center; }
html #root .dm-kids-teacher img { width: 100%; max-height: 26rem; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 60%; border-radius: 1.5rem; }
html #root .dm-kids-teacher h3 { font-size: 1.75rem; margin: .15rem 0 .6rem; }
.dm-kids-teacher-role { font-family: Manrope, system-ui, sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); }
@media (min-width: 768px) { html #root .dm-kids-teacher { grid-template-columns: 18rem 1fr; gap: 2.5rem; } html #root .dm-kids-teacher img { max-height: none; } }
html #root #teachers p:empty { display: none; }