/* /reklama-kosmetologii/ — копия /medicinskiy-marketing/med.css: только связка поверх стилей страницы стоматологии (stom-poster.css).
 * «Направления» (#directions): те же карточки .stage, что в «Системе, которая приводит клиентов»,
 * но их девять — сетка 3×3 вместо одного ряда, без номеров и картинок этапов.
 * Значения с ползунков ниже (фото «Системы», насадка в «Лидах», коллаж первого экрана) подобраны владельцем
 * под картинки медицины; картинки этой страницы делает отдельный агент — после замены их, возможно, придется подогнать. */
.dirs .sys__steps{row-gap:clamp(44px,4.4vw,72px)}
/* строка «Кейс: …» прижата к низу карточки — в ряду они стоят на одной линии */
.dirs .stage{display:flex;flex-direction:column}
.dirs .stage__txt{max-width:46ch;margin-bottom:clamp(16px,1.9vw,30px)}
.dirs .stage__list{margin-top:auto}
.dirs .stage__top{min-height:0}
.dirs .stage__tag{font-size:clamp(22px,2vw,32px)}
.dirs .stage__h{font-size:clamp(28px,2.5vw,40px)}
.dirs .stage__list b a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em}
.dirs .stage__list b a:hover{color:var(--blue)}
@media (min-width:981px){
  /* в .sys левую линию и отступ снимает только первый этап — здесь первый в каждом ряду */
  .dirs .stage:nth-child(3n+1){padding-left:0;border-left:0}
  .dirs .stage:nth-child(3n){padding-right:0}
}
@media (max-width:980px){
  /* номера этапа нет — текст карточки не сдвигаем вправо */
  .dirs .stage__h,.dirs .stage__txt,.dirs .stage__list{margin-left:0}
  .dirs .sys__steps{row-gap:clamp(36px,8vw,48px)}
  .dirs .stage__tag{font-size:clamp(20px,6vw,32px)}
  .dirs .stage__h{font-size:clamp(28px,7.4vw,44px)}
}
/* телефон и планшет: карточки листаются свайпом, как слайдеры главной (без кнопок и счетчиков) */
@media (max-width:980px){
  .dirs .sys__steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84%,380px);column-gap:16px;row-gap:0;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--g) * -1);padding:4px var(--g) 18px;scroll-padding-inline:var(--g)}
  .dirs .sys__steps::-webkit-scrollbar{display:none}
  .dirs .stage{scroll-snap-align:start;scroll-snap-stop:always}
  .dirs .stage + .stage{border-left:1.5px solid var(--ink);padding-left:16px}
}
/* фото «Системы» на телефоне и планшете — значения владельца с ползунков (23.09, экран 411 px: размер 1,23, поворот 24°,
   вправо 33 px, вверх 78 px, под заголовком); сдвиги в долях ширины экрана, с пределами для планшета */
@media (max-width:980px){
  #roadmap .sys__photo{scale:1.23;rotate:24deg;translate:clamp(20px,8.03vw,60px) clamp(-150px,-18.98vw,-50px)}
}
/* стетоскоп «Лиды для клиники» на телефоне — значения владельца с ползунков (23.09, экран 411 px: ширина 153 px вместо 107,
   размер 1,1, вправо 33 px, под текстом); ширина и сдвиг в долях ширины экрана */
@media (min-width:341px) and (max-width:699px){
  #leads .lds__tooth{width:clamp(120px,37.23vw,230px);scale:1.1;translate:clamp(16px,8.03vw,56px) 0}
}
/* коллаж первого экрана на десктопе — значения владельца с ползунков (23.09, экран 1338×917: размер 1,1, вправо 7 px, вверх 141 px);
   сдвиги в долях ширины экрана, как ширина коллажа (47vw, не больше 764 px) */
@media (min-width:981px){
  #top .hero__art{scale:1.1;translate:clamp(0px,.52vw,9px) max(-10.54vw,-92px)}
}

/* «Система»: лид и подпись начинаются под первой строкой заголовка с одинаковым зазором на любой ширине
   (владелец 23.09.2026: «слишком прижат текст к заголовку»; на 1024 лид наезжал на «которая») */
@media (min-width:981px){
  #roadmap .sys__intro{align-self:start;padding-bottom:0;margin-top:calc(clamp(50px,7vw,108px) * .86 + clamp(24px,2.2vw,36px))}
}

/* первый экран: заголовок в четыре строки («Реклама / косметологии / и лазерной / эпиляции») —
   четвертая строка поднимается следом за третьей, как на главной */
.js .hero.is-go .hl--4{transition-delay:.27s}
/* на компьютере четыре строки заголовка мельче, чем три у медицины: лид и кнопка теста остаются на первом экране */
@media (min-width:981px){
  .hero--kos .hero__title{font-size:clamp(48px,6.8vw,104px)}
}
/* «Выручка в месяц» в примере расчета: «1,45 млн ₽» длиннее, чем у медицины, — цифра мельче, чтобы не выходить за наклейку */
.strategy .sd-funnel__result strong{font-size:clamp(38px,3.3vw,56px)}

/* картинки косметологии (Codex, 23.09.2026) плотнее медицинских: коллаж «Стратегии» уже и правее, чтобы не заходить на текст (зазор 29–42 px на 1024–1920);
   первый экран поднят не больше чем на 92 px, иначе на широких экранах верх коллажа уходит под шапку */
@media (min-width:981px){
  .strategy__art{width:27.5%;right:-3.5%}
}