/* Applestom Kids – лендинг. Цвета взяты из логотипа Applestom Kids:
   зеленый – основной цвет бренда, оранжевый из «kids» – акценты. */

:root{
  --green:#2E7D32;          /* зеленый бренда, затемнен под текст: контраст с белым 5,13 */
  --green-dark:#1F5F23;
  --btn:#2E7D32;            /* фон кнопок */
  --btn-hover:#1F5F23;
  --on-btn:#FFFFFF;         /* текст на кнопках и в подвале */
  --orange:#C2560A;         /* оранжевый «kids», затемнен: иконки и цифры шагов */
  --orange-soft:#FFEBD9;    /* кружки под иконками */
  --green-soft:#EAF6E4;     /* подсветка карточек при наведении */
  --cream:#F5F8F3;          /* фон секций */
  --cyan:#F5F8F3;           /* секции с цифрами и шагами – тот же светлый фон, один оттенок на всю страницу */
  --surface:#F5F8F3;
  --grey-bg:#F5F8F3;
  --text:#1E1E1E;
  --muted:#555A55;          /* на белом 7,0, на светло-зеленом 6,4, на зеленой секции 5,9 */
  --line:#DCE6D6;
  --white:#fff;
  --wa:#25D366;             /* фирменный цвет WhatsApp, не меняется */
  --r:20px;                 /* крупное скругление */
  --r-pill:999px;
  --gut:clamp(24px, 5vw, 48px);   /* поле слева и справа: 24 на телефоне, до 48 на широком экране */
  --wrap:calc(1168px + 2 * var(--gut));   /* ширина содержимого на широком экране прежняя – 1168 */
  --bar:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Onest',-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;
  font-size:17px;
  line-height:1.55;
  color:var(--text);
  background:var(--white);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green)}
h1,h2,h3{margin:0 0 16px;line-height:1.12;color:var(--text);letter-spacing:-.02em}
h1{font-size:40px;font-weight:800}
h2{font-size:38px;font-weight:800;margin-bottom:22px}
h3{font-size:22px;font-weight:700;line-height:1.25}
p{margin:0 0 14px}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sec{padding:72px 0}
.sec--surface,.sec--grey{background:var(--cream)}
.sec--cyan{background:var(--cyan)}
/* две светлые секции подряд сливаются в одну полосу – между ними обычный шаг, а не двойной */
:is(.sec--grey,.sec--surface,.sec--cyan) + :is(.sec--grey,.sec--surface,.sec--cyan){padding-top:0}
.sec__lead{max-width:36em;margin:-8px 0 30px;color:var(--muted)}
.sec__lead--niz{margin:24px 0 0}
.sec__lead--shire{max-width:900px}  /* у анестезиологов абзац про 3–4 часа в две строки на компьютере */
.sec__lead-akcent{color:var(--text);font-weight:600}
/* каждое предложение переносится целиком, а не рвется посередине */
.sec__lead--frazy{max-width:880px}
@media (min-width:761px){.sec__lead--frazy span{white-space:nowrap}}
.center{text-align:center}

/* ---------- кнопки ---------- */
.zn{width:20px;height:20px;fill:currentColor;flex:none}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:15px 34px;text-align:center;
  font:700 17px/1.3 'Onest',Arial,sans-serif;letter-spacing:-.01em;
  color:var(--on-btn);background:var(--btn);border:0;border-radius:var(--r-pill);
  text-decoration:none;cursor:pointer;transition:background .15s ease;
}
.btn:hover,.btn:focus-visible{background:var(--btn-hover)}
/* нижняя панель на телефоне: «Позвонить» и WhatsApp – одинаковые белые кнопки с зеленой обводкой */
.btn--wa,.bar .btn{background:var(--white);color:var(--green);box-shadow:inset 0 0 0 2px var(--green)}
.btn--wa:hover,.btn--wa:focus-visible,.bar .btn:hover,.bar .btn:focus-visible{background:var(--green-soft);color:var(--green)}
.btn--ghost{background:transparent;color:var(--green);border:2px solid var(--btn)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--green-soft)}
.btn--block{width:100%}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* ---------- шапка ---------- */
.hdr{border-bottom:1px solid var(--line);background:var(--white)}
.hdr__in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding-top:16px;padding-bottom:16px}
.hdr__logo{display:block}
.hdr__desc{margin:0;font-size:26px;font-weight:700;color:#5E5D60;  /* серый из «Stom» в логотипе */
  line-height:1.25;letter-spacing:-.02em}
/* телефон в шапке – зеленая таблетка, как кнопка */
.hdr__tel{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 34px;border-radius:var(--r-pill);
  font-size:18px;line-height:1.3;font-weight:700;white-space:nowrap;
  color:var(--on-btn);background:var(--btn);text-decoration:none;
  transition:background .15s ease;
}
.hdr__tel:hover{background:var(--btn-hover);color:var(--on-btn)}

/* ---------- первый экран ---------- */
.hero{padding:44px 0 64px}
/* первый экран – одна светло-зеленая панель: слева заголовок, справа фото,
   под ними во всю ширину три выгоды в ряд (часть ряда приходится под фото) */
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"karta photo" "list list";
  column-gap:40px;row-gap:32px;align-items:center;
  background:var(--cream);border-radius:var(--r);padding:40px;
}
/* левая колонка – светлая карточка */
.hero__karta{grid-area:karta}
.hero__sub{font-size:18px;color:var(--muted);margin-bottom:0}
/* акция в первом экране: белая плашка на светло-зеленой панели, новая цена – оранжевым бренда, старая зачеркнута */
.akciya{display:inline-flex;flex-direction:column;gap:2px;margin:20px 0 0;padding:12px 18px;background:var(--white);border-radius:14px;box-shadow:0 2px 10px rgba(31,31,31,.06)}
.akciya__cena{font-size:18px;font-weight:700;line-height:1.35;color:var(--text)}
.akciya__cena b{color:var(--orange);font-weight:800}
.akciya__srok{font-size:15px;color:var(--muted)}
.akciya__srok s{text-decoration-thickness:1.5px}
.hero__list{grid-area:list;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0}
.hero__list li{display:flex;align-items:center;gap:14px;font-size:17px;font-weight:600;background:var(--white);border-radius:var(--r);padding:14px 18px}
.hero__note{margin:14px 0 0;font-size:14px;color:var(--muted)}
.hero__photo{grid-area:photo;border-radius:var(--r);overflow:hidden}
.hero__photo img{display:block;width:100%;height:auto}
/* заголовок первого экрана: на десктопе три строки, на мобильной переносится сам */
.hero__perenos{display:none}
@media (min-width:901px){.hero__perenos{display:inline}}

/* ---------- иконки ---------- */
.ik{
  width:24px;height:24px;flex:none;
  color:var(--green);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
/* кружок под иконкой – оранжевый акцент бренда */
.hero__list .ik,.tick .ik,.ticks li>.ik{
  width:24px;height:24px;padding:12px;
  color:var(--orange);background:var(--orange-soft);border-radius:50%;
  box-sizing:content-box;
}

/* ---------- формы ---------- */
.form{
  background:var(--cream);border-radius:var(--r);padding:32px;
  max-width:560px;margin:44px auto 0;
}
.sec--grey .form,.sec--surface .form{background:var(--white)}
.form--inline{margin:0}
.form__title{font-size:26px;font-weight:800;line-height:1.25;letter-spacing:-.02em;margin:0 0 10px}
.form__lead{margin:0 0 20px;color:var(--muted);font-size:16px}
/* список «что расскажет анестезиолог» в форме */
.form__lead--spisok{margin-bottom:10px;color:var(--text);font-weight:600}
.form__spisok{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:6px 24px}
.form__spisok li{position:relative;padding-left:18px;font-size:16px;line-height:1.45;color:var(--muted)}
.form__spisok li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--btn)}
.form__fields{display:grid;gap:12px;margin-bottom:16px}
.form input[type=text],.form input[type=tel]{
  width:100%;min-height:54px;padding:15px 20px;
  font:400 17px/1.3 'Onest',Arial,sans-serif;color:var(--text);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
}
.sec--grey .form input[type=text],.sec--grey .form input[type=tel],
.sec--surface .form input[type=text],.sec--surface .form input[type=tel]{background:var(--cream)}
.form input::placeholder{color:#6A706A;opacity:1}
.form input:focus{border-color:var(--btn);outline:none;box-shadow:0 0 0 3px rgba(46,125,50,.22)}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__msg{margin:12px 0 0;font-size:14px;min-height:20px}
/* пустая строка ответа не должна держать место и перекашивать карточку вниз */
.form__msg:empty{margin-top:0;min-height:0;height:0;overflow:hidden}
.form__msg--err{color:#B3261E}
/* поле с ошибкой подсвечено, текст ошибки – в строке ответа под формой */
.form input[aria-invalid=true]{border-color:#B3261E}
.form input[aria-invalid=true]:focus{box-shadow:0 0 0 3px rgba(179,38,30,.2)}
.form__tema{color:var(--green);font-weight:600}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* широкая форма на десктопе: заголовок и подпись сверху, ниже одна строка –
   имя, телефон, кнопка. Скрытые поля и ловушка для роботов в строку не попадают:
   у них display:none и абсолютное положение. */
@media (min-width:901px){
  .form--shirokaya{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
    column-gap:12px;
    max-width:1000px;
  }
  .form--shirokaya .form__title{grid-column:1 / -1;margin-bottom:6px}
  .form--shirokaya .form__lead{grid-column:1 / -1;margin-bottom:20px}
  .form--shirokaya .form__lead--spisok{margin-bottom:10px}
  .form--shirokaya .form__spisok{grid-column:1 / -1;margin-bottom:18px}
  .form--shirokaya .form__fields{display:contents}
  .form--shirokaya .btn{width:auto;white-space:nowrap;padding:15px 34px}
  .form--shirokaya .form__msg{grid-column:1 / -1;margin-top:12px}
}

/* ---------- сетки карточек ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px}
.card{background:var(--cream);border:0;border-radius:var(--r);padding:26px}
.sec--surface .card,.sec--grey .card{background:var(--white)}
.card__t{font-size:17px;font-weight:700;margin:0}

.ticks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.ticks li{display:flex;align-items:center;gap:14px;padding:18px 20px;background:var(--cream);border:0;border-radius:var(--r);font-weight:600}
.ticks--klik li{padding:0;background:transparent;border:0}
.tick{
  display:flex;align-items:center;gap:14px;width:100%;padding:18px 20px;
  font:600 17px/1.4 'Onest',Arial,sans-serif;color:var(--text);text-align:left;
  background:var(--cream);border:0;border-radius:var(--r);cursor:pointer;
  transition:background .15s ease,box-shadow .15s ease;
}
.tick:focus-visible{background:var(--green-soft);box-shadow:0 4px 16px rgba(31,31,31,.08)}
@media (hover:hover){.tick:hover{background:var(--green-soft);box-shadow:0 4px 16px rgba(31,31,31,.08)}}
.sec--grey .ticks li,.sec--surface .ticks li,.sec--grey .tick,.sec--surface .tick{background:var(--white)}
.sec--grey .tick:focus-visible,.sec--surface .tick:focus-visible{background:var(--green-soft)}
@media (hover:hover){.sec--grey .tick:hover,.sec--surface .tick:hover{background:var(--green-soft)}}
.sec--grey .ticks--klik li,.sec--surface .ticks--klik li{background:transparent}

/* ---------- клиника в цифрах ---------- */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:18px;text-align:center}
.nums li{background:var(--white);border:0;border-radius:var(--r);padding:34px 20px}
.sec:not(.sec--grey) .nums li{background:var(--cream)}
.nums b{display:block;font-size:46px;font-weight:800;color:var(--green);line-height:1.1;letter-spacing:-.03em;margin-bottom:8px}
.nums span{color:var(--muted);font-size:16px}

/* ---------- шаги ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:22px}
.steps li{counter-increment:s;position:relative;background:transparent;border:0;border-radius:0;padding:0}
.steps li::before{
  content:counter(s);display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-bottom:16px;border-radius:50%;
  background:var(--orange-soft);color:var(--orange);font-weight:700;font-size:19px;
}
.steps b{display:block;font-weight:700;font-size:18px;margin-bottom:6px;letter-spacing:-.01em}
.steps span{color:var(--muted);font-size:16px}

/* ---------- работы ---------- */
.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:24px}
.work{background:var(--white);border:0;border-radius:var(--r);overflow:hidden}
.sec:not(.sec--grey):not(.sec--surface) .work{background:var(--cream)}
/* шторка «до и после»: нижний слой – до, верхний – после, обрезан слева по --p */
.sravn{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--cream);--p:50%;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.sravn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sravn__posle{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p))}
.sravn__plashka{
  position:absolute;top:12px;padding:5px 13px;border-radius:var(--r-pill);
  background:rgba(30,30,30,.62);color:var(--white);font-size:14px;font-weight:700;
  line-height:1.3;pointer-events:none;
}
.sravn__plashka--do{left:12px}
.sravn__plashka--posle{right:12px}
/* у края шторки подпись уходит, чтобы кружок ее не закрывал */
.sravn__plashka{transition:opacity .15s ease}
.sravn--u-levogo .sravn__plashka--do,.sravn--u-pravogo .sravn__plashka--posle{opacity:0}
.sravn__linia{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:var(--white);pointer-events:none}
.sravn__krug{
  position:absolute;top:50%;left:var(--p);width:42px;height:42px;margin:-21px 0 0 -21px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--white);color:var(--green);box-shadow:0 2px 12px rgba(30,30,30,.3);pointer-events:none;
}
.sravn__krug svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sravn__vvod{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;background:transparent;border:0;-webkit-appearance:none;appearance:none;cursor:ew-resize;touch-action:pan-y}
.sravn__vvod:focus{outline:none}
.sravn__vvod::-webkit-slider-thumb{-webkit-appearance:none;width:1px;height:100%;opacity:0}
.sravn__vvod::-moz-range-thumb{width:1px;height:100%;opacity:0;border:0}
.sravn__vvod:focus-visible ~ .sravn__krug{outline:3px solid var(--btn);outline-offset:3px}
.work__body{padding:24px}
.work__body h3{font-size:18px;margin-bottom:12px}
.work__body p{margin:0 0 8px;font-size:16px;color:var(--muted)}
.work__body ul{margin:0 0 8px}
.work__body>*:last-child{margin-bottom:0}
.work__body li{margin-bottom:8px;font-size:16px;color:var(--muted)}

/* ---------- врачи ---------- */
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:20px}
/* на широком экране неполный ряд врачей встает по центру, а не прижимается влево */
@media (min-width:761px){
  .docs{display:flex;flex-wrap:wrap;justify-content:center}
  .docs>.doc{flex:0 1 calc(25% - 15px);min-width:200px}
}
.doc{display:flex;flex-direction:column;background:var(--white);border:0;border-radius:var(--r);overflow:hidden;text-align:center;padding:12px}
.sec:not(.sec--grey):not(.sec--surface) .doc{background:var(--cream)}
.doc__body{display:flex;flex-direction:column;flex:1}
.doc__txt:not(:last-child){margin-bottom:10px}
.doc__ph{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--cream);border-radius:var(--r)}
.doc__ph--init{
  display:flex;align-items:center;justify-content:center;
  background:var(--green-soft);color:var(--green);font-size:40px;font-weight:800;letter-spacing:.02em;
}
.doc__body{padding:14px 8px 8px}
.doc__name{font-size:16px;font-weight:700;margin:0 0 4px}
.doc__exp{margin:0;color:var(--muted);font-size:14px}
/* должность под именем – темным, стаж под ней – серым: видно, что главное */
.doc__role{margin:0 0 4px;color:var(--text);font-size:14px;font-weight:500;line-height:1.35}

/* ---------- дом для формы из всплывающего окна ---------- */
#forma-5-dom[hidden]{display:none}

/* ---------- отзывы ---------- */
/* Раскладка «кирпичиками»: у каждого скриншота своя высота, а колонки выходят
   ровными. Высота строки сетки = 1% ширины колонки, поэтому скриншот занимает
   строк столько, сколько процентов его высота от ширины, плюс 5 строк на зазор.
   Первые три отзыва близки по высоте и стоят рядом – их видно до кнопки. */
.karusel--otzyvy{container-type:inline-size}
.revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px;row-gap:0;
  grid-auto-flow:row dense;grid-auto-rows:calc((100cqw - 36px) / 300)}
.revs img{width:100%;height:auto;margin:0;align-self:start;border:1px solid var(--line);border-radius:var(--r);grid-row-end:span var(--s)}
.revs img:nth-child(1){--s:127;grid-column:1}
.revs img:nth-child(2){--s:133;grid-column:2}
.revs img:nth-child(3){--s:136;grid-column:3}
.revs img:nth-child(4){--s:152;grid-column:1}
.revs img:nth-child(5){--s:145;grid-column:2}
.revs img:nth-child(6){--s:100;grid-column:3}
.revs img:nth-child(7){--s:86;grid-column:1}
.revs img:nth-child(8){--s:66;grid-column:3}
.revs img:nth-child(9){--s:61;grid-column:2}
.revs img:nth-child(10){--s:51;grid-column:3}
.vids{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:22px}
/* видеоотзыв в ленте – кадр с кнопкой «смотреть»; по нажатию видео всплывает крупно */
.vid{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;border-radius:var(--r);overflow:hidden;background:#000;cursor:pointer}
.vid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.vid:hover img{transform:scale(1.04)}}
.vid:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.vid__play{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;
  background:rgba(255,255,255,.94);box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .2s ease}
.vid__play::after{content:"";position:absolute;left:24px;top:19px;border-left:17px solid var(--green);border-top:11px solid transparent;border-bottom:11px solid transparent}
@media (hover:hover){.vid:hover .vid__play{transform:scale(1.08)}}
.revs__link{display:inline-block;margin-top:22px;font-weight:700}
/* сначала 3 отзыва (на планшете 4), остальные – по кнопке; на телефоне лента, кнопки нет */
.revs__eshche{display:flex;width:max-content;margin:6px auto 0}
.revs__eshche[hidden]{display:none}
.revs--svernuto>img:nth-child(n+4){display:none}

/* ---------- частые вопросы: две колонки ---------- */
.faq__grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:64px;align-items:start}
.faq__head{position:sticky;top:24px}
.faq__head h2{margin-bottom:14px}
.faq__head .sec__lead{margin:0}
.faq{max-width:none;margin:0}
.faq details{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;margin:0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:26px 54px 26px 0;position:relative;
  font-weight:700;font-size:18px;line-height:1.35;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
/* стрелка-галочка вниз */
.faq summary::after{
  content:"";position:absolute;right:6px;top:31px;width:12px;height:12px;
  border-right:2px solid var(--text);border-bottom:2px solid var(--text);
  transform:rotate(45deg);transition:transform .15s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:36px}
.faq__a{padding:0 54px 26px 0;margin-top:-8px}
.faq__a p{margin:0 0 8px;color:var(--muted)}
.faq__a p:last-child{margin-bottom:0}

/* ---------- карта и контакты ---------- */
.map{position:relative;width:100%;height:440px;border:0;border-radius:var(--r);overflow:hidden;background:var(--cream)}
.map__ramka{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.contacts{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contacts__info h2{margin-bottom:22px}
.contacts li:last-child{margin-bottom:0}
.contacts li{margin-bottom:12px;font-size:17px}
.contacts a{font-weight:700;text-decoration:none;display:inline-block;padding:10px 0;margin:-10px 0}
.contacts a:hover{text-decoration:underline}

/* ---------- подвал ---------- */
.ftr{background:var(--green);color:var(--on-btn);padding:44px 0;font-size:15px}
.ftr a{color:var(--on-btn)}
.ftr__in p{margin:0 0 6px}
.ftr__in p:last-child{margin-bottom:0}
.ftr__name{font-weight:700;font-size:16px}
.ftr__m{display:none}
@media (max-width:760px){.ftr__d{display:none}.ftr__m{display:inline}}

/* ---------- карусели на мобильной ---------- */
.karusel__podpis{display:none}

/* ---------- плавающий WhatsApp и нижняя панель ---------- */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:40;
  width:60px;height:60px;border-radius:50%;background:var(--wa);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}
.wa-float .zn{width:32px;height:32px;fill:#fff}  /* как у WhatsApp: белый знак на зеленом круге */
.bar{display:none}

@media (max-width:1024px){
  h1{font-size:38px}
  h2{font-size:30px}
  .doc__ph--init{font-size:32px}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hdr__desc{font-size:22px}
  .hero__grid{column-gap:28px;row-gap:24px;padding:32px}
  .revs{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:calc((100cqw - 18px) / 200)}
  .revs img:nth-child(1),.revs img:nth-child(3),.revs img:nth-child(5),.revs img:nth-child(8),.revs img:nth-child(10){grid-column:1}
  .revs img:nth-child(2),.revs img:nth-child(4),.revs img:nth-child(6),.revs img:nth-child(7),.revs img:nth-child(9){grid-column:2}
  .revs--svernuto>img:nth-child(4){display:block}
  .vids{grid-template-columns:repeat(3,minmax(0,1fr))}
  .contacts{grid-template-columns:1fr;gap:40px}
  .faq__grid{grid-template-columns:1fr;gap:20px}
  .faq__head{position:static}
}

/* первый экран: ниже 900 фото уходит под заголовок и занимает всю ширину */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;grid-template-areas:"karta" "photo" "list";gap:22px}
  .hero__list{grid-template-columns:1fr;gap:10px}
}

/* узкая полоса, где дескриптор уже не помещается в строку рядом с телефоном */
@media (max-width:860px) and (min-width:761px){
  .hdr__in{grid-template-columns:auto 1fr;row-gap:12px}
  .hdr__desc{grid-column:1 / -1;grid-row:2}
  .hdr__tel{justify-self:end}
}

@media (max-width:760px){
  .sec{padding:48px 0}
  .steps{grid-template-columns:1fr;gap:18px}
  /* заголовок первого экрана: «Лечим зубы ребенку» в одну строку и на iPhone SE (375) */
  h1{font-size:clamp(26px,7.5vw,30px)}
  h2{font-size:25px}
  h3{font-size:20px}
  .form__title{font-size:21px}
  .modal__t{font-size:21px}
  .hdr__in{grid-template-columns:1fr;gap:10px;padding-top:12px;padding-bottom:12px;justify-items:start}
  .hdr__desc{font-size:21px}
  .hdr__tel{display:none}
  .hero{padding:24px 0 40px}
  .akciya{margin-top:14px;padding:10px 14px}
  .akciya__cena{font-size:17px}
  .akciya__srok{font-size:14px}
  .hero__grid{padding:26px 18px 18px}
  .form{padding:22px;margin-top:28px}
  .form--inline{margin-top:0}
  .contacts{gap:28px}
  .doc__body{padding:12px 6px 6px}
  .doc__name{font-size:14px}
  .doc__exp{font-size:14px}
  .doc__ph--init{font-size:27px}
  .works{gap:18px}
  .map{height:320px}
  .nums b{font-size:38px}
  /* телефон: карточки с цифрами компактнее */
  .nums li{padding:22px 16px}
  .faq summary{font-size:17px;padding:20px 32px 20px 0}
  .faq summary::after{top:25px;right:4px}
  .faq details[open] summary::after{top:30px}
  .faq__a{padding:0 0 20px 0}
  .hero__list .ik,.tick .ik,.ticks li>.ik{padding:10px}

  /* карусели: врачи, видеоотзывы, отзывы 2ГИС */
  .karusel__podpis{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    margin:16px 0 0;text-align:center;
    font-size:14px;color:var(--muted);
  }
  .docs,.vids,.revs{
    display:flex;gap:12px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  .docs::-webkit-scrollbar,.vids::-webkit-scrollbar,.revs::-webkit-scrollbar{display:none}
  .docs>*,.vids>*,.revs>*{scroll-snap-align:start;flex:0 0 auto}
  .docs>*{width:72%}
  .vids>.vid{width:78%}
  /* анестезиологи на телефоне – друг под другом, подпись под фото; ширина как у карточек врачей */
  .docs--stopka{display:flex;flex-direction:column;align-items:center;gap:16px;overflow:visible;scroll-snap-type:none;padding-bottom:0}
  .docs--stopka>.doc{width:72%}
  /* отзывы на телефоне – лента вбок, все сразу, без кнопки */
  .revs{align-items:flex-start}
  .revs>img{width:82%;margin:0}
  .revs--svernuto>img:nth-child(n+4){display:block}
  .revs__eshche{display:none}

  body{padding-bottom:var(--bar)}
  .wa-float{display:none}
  .bar{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    background:var(--white);border-top:1px solid var(--line);
  }
  .bar .btn{padding:12px 8px;font-size:14px;min-height:48px;letter-spacing:0;border-radius:var(--r)}
  .bar .btn .zn{width:20px;height:20px;fill:currentColor;flex:none}
  .bar .btn .ik{width:20px;height:20px;color:inherit;flex:none;padding:0;background:transparent;border-radius:0}
  /* подпись одной ширины в обеих кнопках: одинаковые поля слева от значка и справа от текста */
  .bar .bar__t{width:6.9em;text-align:left;flex:none}
}

@media (max-width:360px){
  .bar .btn{font-size:14px;padding:12px 4px}
}

/* ---------- всплывающие окна ---------- */
.modal{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:24px 16px;background:rgba(30,30,30,.7);
}
.modal__box{
  position:relative;width:100%;max-width:900px;max-height:86vh;overflow:auto;
  background:var(--white);border-radius:var(--r);padding:32px 28px 28px;
}
/* окно с формой уже: 560 на форму плюс по 24 по краям, без пустого поля справа */
.modal__box--forma{max-width:616px;padding:34px 28px 28px}
.modal__box--spasibo{max-width:430px;padding:34px 28px 30px;text-align:center}
.modal__box--spasibo .modal__t{margin:0 0 8px;padding:0 44px}
.spasibo__txt{margin:0;font-size:16px;line-height:1.45;color:var(--muted)}
.modal__t{margin:0 44px 6px 0;font-size:24px;font-weight:800;letter-spacing:-.02em}
.modal__lead{margin:0 0 18px;color:var(--muted);font-size:14px}
.modal__x{
  position:absolute;top:14px;right:14px;width:40px;height:40px;
  font-size:26px;line-height:1;color:var(--text);background:var(--cream);
  border:0;border-radius:50%;cursor:pointer;
}
.modal__x:hover,.modal__x:focus-visible{background:var(--green-soft)}
/* всплывающее видео: крупно, по высоте экрана, без белой рамки */
/* крестик над видео, а не на нем: в углах кадра свои кнопки у плеера айфона (весь экран, звук) */
.modal__box--video{width:auto;max-width:none;max-height:none;padding:0;margin-top:52px;overflow:visible;background:#000;border-radius:var(--r)}
.modal__box--video video{display:block;width:min(calc(100vw - 32px), calc((86vh - 52px) * 9 / 16));height:auto;aspect-ratio:9/16;border-radius:var(--r);background:#000}
.modal__box--video .modal__x{top:-52px;right:0;background:rgba(255,255,255,.92)}
/* форма внутри окна уже стоит на белом, второй фон ей не нужен */
.modal .form{background:transparent;padding:0;margin:0;max-width:none}
.modal .form input[type=text],.modal .form input[type=tel]{background:var(--cream)}

/* ---------- промежуточные ширины: без одиноких карточек в последнем ряду ---------- */
@media (min-width:761px){
  .nums{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:761px) and (max-width:1099px){
  .ticks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ticks>li:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (min-width:1100px){
  .ticks{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* «Почему родители выбирают нас»: 10 плашек – в два столбца, чтобы не оставалось одной в последнем ряду */
@media (min-width:1100px){
  .ticks--dva{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:761px) and (max-width:899px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps>li:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (min-width:900px) and (max-width:1024px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps:has(> li:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:900px){
  .works{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* для тех, кто отключил анимацию в настройках системы: подсветка и сдвиги без плавности */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* набор иконок вверху страницы: невидимый и не занимает места */
.sprite{position:absolute}