/* токены — модель */
:root {
  --bg: #F7F9F7;
  --bg2: #EEF3EF;
  --fg: #1D2B24;
  --muted: #5E6D64;
  --accent: #145A3B;
  --accent-fg: #FFFFFF;
  --line: #D8E2DB;
  --r: 12px;
  --gutter: 24px;
  --sect: 72px;
  --shadow1: 0 2px 8px rgba(25, 48, 35, 0.06);
  --shadow2: 0 12px 32px rgba(25, 48, 35, 0.12);
  --fs-h1: 48px;
  --fs-h2: 32px;
  --fs-body: 16px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
}

/* скелет — наш, не модели */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--fs-body)/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.blk{padding:var(--sect) 0}
.hdr{padding:var(--s3) 0;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;background:var(--bg)}
/* 21.10.2026 замер: на 390px шапка занимала 253px — меню переносилось в три строки и
   съедало четверть экрана до героя. Теперь одна строка с горизонтальным скроллом. */
@media (max-width:900px){
  .hdr{padding:var(--s2) 0}
  .hdr__in{flex-wrap:nowrap;gap:var(--s3);overflow:hidden}
  .nav{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;gap:var(--s4);scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:4px 0}
}
.blk--a{background:var(--bg)}
.blk--b{background:var(--bg2)}
h1,h2,h3{line-height:1.15;margin:0 0 var(--s4)}
.h2{font-size:var(--fs-h2);letter-spacing:-.01em}
.lead{max-width:62ch;color:var(--muted);margin:0 0 var(--s6);font-size:calc(var(--fs-body)*1.06)}
.kicker{display:inline-block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s4)}
:root{--hdr:64px}
/* 21.10.2026 (КАПИТАН: «хиро шикарный на весь экран»): первый экран — фото фоном на всю
   секцию, текст поверх по оси общего контейнера 1200. Правило design.fold_is_one_screen:
   экран занят первым блоком целиком (минус шапка), следующий блок — ниже сгиба.
   Было: грид 2 колонки, min-height 520px, фото картинкой справа (замер 21.10: fill 0.58). */
.sect-hero{padding:0}
.sect-hero>.wrap{max-width:100%;padding:0}
.hero{position:relative;display:flex;align-items:center;min-height:calc(100dvh - var(--hdr,64px));overflow:hidden;background:var(--ink,#17211C)}
.hero__media{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background:transparent;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,16,13,.88) 0%,rgba(9,16,13,.62) 44%,rgba(9,16,13,.16) 100%)}
.hero__t{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;
  padding:var(--sect) var(--gutter);color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.32);
  font-size:var(--fs-h1);letter-spacing:-.02em}
/* P10 (замер 21.10.2026, euro01): у браузера h1 по умолчанию 2em — внутри .hero__t с
   font-size:56px он вырастал до 112px и выталкивал оффер за сгиб (1329px при лимите 760). */
.hero__t h1{font-size:inherit;line-height:1.12;margin:0 0 var(--s5)}
.hero__t{font-size:var(--fs-h1);letter-spacing:-.02em}
.hero__p{color:rgba(255,255,255,.88);max-width:56ch;margin:0 0 var(--s6);font-size:calc(var(--fs-body)*1.12)}
.hero .kicker{color:#fff;opacity:.92}
.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn--ghost:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.10)}
.hero__btns{display:flex;gap:var(--s3);flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 22px;border-radius:var(--r);border:1px solid transparent;font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.btn--main{background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow1)}
.btn--main:hover{transform:translateY(-1px);box-shadow:var(--shadow2)}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);list-style:none;padding:0;margin:0}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);box-shadow:var(--shadow1);transition:box-shadow .14s ease,transform .14s ease;display:flex;flex-direction:column;height:100%}
.cards{align-items:stretch}
.card:hover{box-shadow:var(--shadow2);transform:translateY(-2px)}
.card__ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:calc(var(--r)/1.5);background:var(--bg2);color:var(--accent);margin-bottom:var(--s4)}
.card__h{font-size:calc(var(--fs-body)*1.1);margin:0 0 var(--s2)}
.card__p{color:var(--muted);margin:0;font-size:15px;flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.list{margin:0;padding:0;list-style:none}
.list li{position:relative;padding-left:var(--s6);margin-bottom:var(--s3);color:var(--muted)}
.list li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.stat{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5)}
.stat__n{font-size:calc(var(--fs-h2)*1.1);font-weight:700;letter-spacing:-.02em;color:var(--accent)}
.stat__l{color:var(--muted);font-size:14px}
.sect-hero{display:block}
/* 21.10.2026 (КАПИТАН: «отступы и выравнивания не везде нормальные»): финальный CTA был
   центрирован в колонке 760px -> ось 340 против 152 у всех секций (замер gap_measure).
   Теперь две колонки: текст слева по общей оси, форма справа. */
.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:var(--s7,64px);
  align-items:start;text-align:left;max-width:100%;margin:0}
.cta>.h2,.cta>h2{grid-column:1}
.cta>.lead{grid-column:1;margin:0 0 var(--s5)}
.cta>.hero__btns{grid-column:1;justify-content:flex-start}
.cta .leadform{grid-column:2;grid-row:1/span 4;margin:0;max-width:100%}
/* кнопка формы выезжала на 4 px за поля: width:100% + боковые margin (замер 21.10) */
.cta .leadform .btn{margin-left:0;margin-right:0}
.cta .btn{margin:var(--s2) var(--s1)}
/* примечание под прайсом прилипало к таблице (замер: разрыв 0 px) */
.prices+p.lead,.prices+.lead{margin-top:var(--s5)}
/* мобильный ритм: 80+80 px между блоками на экране 390 — это 160 px пустоты */
@media (max-width:900px){
  .cta{grid-template-columns:1fr;gap:var(--s5)}
  .cta .leadform{grid-column:1;grid-row:auto}
}
@media (max-width:620px){:root{--sect:56px;--gutter:24px}}
@media (max-width:560px){.ftr__in{grid-template-columns:1fr 1fr}.ftr__brand{grid-column:1/-1}}
@media (max-width:900px){
  .cards,.grid3{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}
  /* телефон: фото остаётся фоном на весь первый экран (P16 «герой = один кадр»),
     вуаль плотнее — иначе светлое фото под белым текстом нечитаемо */
  .hero{min-height:calc(100dvh - var(--hdr,56px))}
  .hero::after{background:linear-gradient(180deg,rgba(9,16,13,.55) 0%,rgba(9,16,13,.82) 55%,rgba(9,16,13,.92) 100%)}
  .hero__t{padding:calc(var(--sect) * .7) var(--gutter)}
}
@media (max-width:620px){.cards,.grid3,.stats{grid-template-columns:1fr}}
/* P15 (замер 21.10.2026): грид-дети с min-width:auto не сжимаются ниже min-content —
   на 320-414px страница вылезала на 41-135px. Лечится min-width:0 + перенос длинных слов. */
.hero>*,.grid2>*,.grid3>*,.cards>*,.stats>*{min-width:0}
h1,h2,h3,p,a,li,span{overflow-wrap:anywhere}

.leadform{max-width:560px;margin:var(--s6) auto 0;text-align:left}
.leadform__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-bottom:var(--s3)}
.field{width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:16px;color:var(--fg);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);box-sizing:border-box}
.field:focus{outline:2px solid var(--main);outline-offset:1px}
.leadform .btn{width:100%;margin-top:var(--s3)}
.leadform__note{font-size:14px;line-height:1.5;color:var(--muted);margin:var(--s4) 0 0}
@media(max-width:640px){.leadform__row{grid-template-columns:1fr}}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:nowrap}
.brand{font-size:calc(var(--fs-body)*1.12);letter-spacing:-.01em;white-space:nowrap}
.brand a{text-decoration:none}
.nav{display:flex;gap:var(--s4);flex-wrap:nowrap;font-size:14.5px;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.hdr__tel{font-weight:650;text-decoration:none;color:var(--fg);white-space:nowrap}
.hdr__tel:hover{color:var(--accent)}
.nav a{text-decoration:none;color:var(--muted);padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:760px){.nav{font-size:13px;gap:var(--s3)}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);counter-reset:st}
.step{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);box-shadow:var(--shadow1);position:relative}
.step__n{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--accent);margin-bottom:var(--s3)}
.step__h{font-size:calc(var(--fs-body)*1.05);margin:0 0 var(--s2);font-weight:650}
.step__p{color:var(--muted);margin:0;font-size:15px}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.doc{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow1)}
.doc__img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%;border-radius:0;overflow:hidden;background:linear-gradient(135deg,var(--bg2),var(--bg))}
.doc__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.doc__h,.doc__role,.doc__exp{padding:0 var(--s5)}
.doc__h{font-size:calc(var(--fs-body)*1.02);font-weight:650;margin:var(--s4) 0 var(--s1)}
.doc__role{color:var(--muted);font-size:14px;margin:0 0 2px}
.doc__exp{color:var(--accent);font-size:13.5px;margin:0 0 var(--s5)}
.prices{border-top:1px solid var(--line)}
.price{display:grid;grid-template-columns:1.6fr 1fr auto;gap:var(--s4);align-items:baseline;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.price__h{font-weight:600}
.price__d{color:var(--muted);font-size:14px}
.price__v{font-weight:700;white-space:nowrap;color:var(--accent);font-size:calc(var(--fs-body)*1.05)}
.revs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.rev{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5)}
.rev__q{margin:0 0 var(--s4);font-size:15.5px;line-height:1.55}
.rev__q::before{content:"\201C";color:var(--accent);font-size:26px;line-height:0;vertical-align:-6px;margin-right:2px}
.rev__who{font-weight:650;font-size:14.5px}
.rev__src{color:var(--muted);font-size:13.5px}
.faq{border-top:1px solid var(--line)}
.faq__q{border-bottom:1px solid var(--line);padding:var(--s4) 0}
.faq__q summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:var(--s4);align-items:center}
.faq__q summary::-webkit-details-marker{display:none}
.faq__q summary::after{content:"+";color:var(--accent);font-size:20px;font-weight:400;line-height:1}
.faq__q[open] summary::after{content:"–"}
.faq__a{color:var(--muted);padding-top:var(--s3);max-width:80ch;font-size:15px}
.cont{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);color:var(--muted)}
.cont__v{margin:0;font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.team{grid-template-columns:1fr 1fr}.revs{grid-template-columns:1fr}.price{grid-template-columns:1fr auto;row-gap:2px}.price__d{grid-column:1/-1}}
@media (max-width:620px){.steps,.team{grid-template-columns:1fr}}
.steps>*,.team>*,.revs>*,.price>*{min-width:0}

/* 21.10.2026 (КАПИТАН: «подвал явно не соответствует»): было два span в одну полосу,
   высота 71px, ноль ссылок. У эталона подвал — 4 колонки: клиника, услуги, контакты,
   документы + нижняя строка. Здесь то же самое на моём коде (данные из брифа и секций). */
.ftr{margin-top:0;padding:var(--s7) 0 var(--s5);background:var(--ink,#1B2420);color:#EDF3EF}
.ftr__in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s6) var(--s5);align-items:start}
.ftr__brand{display:block;font-size:calc(var(--fs-body)*1.18);font-weight:700;color:#fff;margin:0 0 var(--s3);letter-spacing:-.01em}
.ftr__h{display:block;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.60);margin:0 0 var(--s3)}
.ftr__list{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.8}
.ftr__list li{color:rgba(255,255,255,.88)}
.ftr__list a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.ftr__list a:hover{border-bottom-color:rgba(255,255,255,.55)}
.ftr__note{display:block;margin:var(--s4) 0 0;font-size:13.5px;line-height:1.5;
  color:rgba(255,255,255,.62);max-width:34ch}
.ftr__note--row{margin:0;max-width:100%;flex:1 1 auto;text-align:center}
.ftr__bottom{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.14);
  font-size:13.5px;color:rgba(255,255,255,.62)}
@media (max-width:900px){.ftr__in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__in{grid-template-columns:1fr}.ftr{padding:var(--s6) 0 var(--s5)}}

/* --- images layer (gen_images.py) --- */
/* 21.10.2026: этот слой больше НЕ трогает раскладку героя. Раньше он ставил
   .hero__media{position:relative} и на телефоне .hero{display:block;min-height:560px}.
   После того как первый экран стал full-bleed (фото фоном, см. BASE_CSS cheap_page),
   эти правила перебивали раскладку: .hero__media уезжал в поток второй колонкой
   (замер euro06: media left=700, w=740), и h1 стоял не по оси контейнера (32 против 152). */
.hero__media{overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;display:block}
.card{overflow:hidden;display:flex;flex-direction:column}
.card__img{width:calc(100% + var(--s5)*2);
  /* max-width обязателен: базовое правило img{max-width:100%} резало выход за паддинг
     и справа оставалась белая полоса 49 px (24 pad + 24 pad + 1 border), замер euro06 */
  max-width:calc(100% + var(--s5)*2);
  margin:calc(var(--s5)*-1) calc(var(--s5)*-1) var(--s4);
  aspect-ratio:16/11;object-fit:cover;display:block;background:var(--bg2)}
@media (max-width:620px){
  .card__img{aspect-ratio:16/10}
}
/* --- fix_auto layer (scripts/fix_auto.py) --- */
/* F1: слот фото, который нечем заполнить, убираем — карточка становится текстовой
   (совет аудитора 21.10.2026: пустые серые прямоугольники хуже, чем их отсутствие). */
/* ВАЖНО (21.10.2026): селектор :empty НЕЛЬЗЯ вешать на img — у <img> никогда нет
   дочерних узлов, поэтому :empty матчится ВСЕГДА и правило прятало все фотографии
   карточек (замер euro06: 6 из 6 .card__img display:none, naturalWidth=0).
   Скрываем только пустые СЛОТЫ-обёртки (div) и img без src. */
div.card__img:empty,div.doc__img:empty,
img.card__img:not([src]),img.card__img[src=""],
img.doc__img:not([src]),img.doc__img[src=""]{display:none}
/* F1b: фото карточки должно кроить плашку от бордера до бордера. Базовое
   img{max-width:100%} резало width:calc(100%+2*pad) — справа оставалась белая
   полоса 49 px (замер euro06 21.10.2026: card 362.7, img 312.7, right_gap 49).
   Чиню max-width, а НЕ max-width:none (ворота P2 валят none). */
.card__img{max-width:calc(100% + var(--s5)*2)}
/* F5/F6: мобильный прайс перестраиваем в строки-карточки, кегль цены крупный */
@media (max-width:700px){
  .price{display:block;padding:14px 0}
  .price__h,.price__d{display:block}
  .price__d{margin:2px 0 6px}
  .price__sum{display:block;font-size:20px;font-weight:700;line-height:1.25;letter-spacing:0}
  .price__d,.price__h{font-size:16px;line-height:1.45}
}
/* F5b: мобильная панель действий — путь к записи не должен требовать 16 000 px прокрутки
   (замечание Перпа 21.10.2026: «на мобильном добавь фиксированную нижнюю панель») */
.mbar{display:none}
@media (max-width:768px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;gap:8px;
        padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:#fff;
        border-top:1px solid rgba(0,0,0,.08);box-shadow:0 -6px 20px rgba(0,0,0,.08)}
  .mbar__b,.mbar__g{flex:1 1 0;display:flex;align-items:center;justify-content:center;
        min-height:44px;border-radius:10px;font-size:16px;font-weight:600;text-decoration:none}
  .mbar__b{background:var(--accent,#0a6a4f);color:#fff}
  .mbar__g{border:1.5px solid var(--accent,#0a6a4f);color:var(--accent,#0a6a4f);background:#fff}
  body{padding-bottom:76px}
}
/* F6+F9: полоса-перемычка после длинных блоков.
   21.10.2026 замер: блок стоял как карточка max-width:1200 + padding 24 — левый край текста
   на 144 против 152 у всех секций (ось уезжала на 8 px), а высота 96 px рвала ритм (80/80/96).
   Теперь: полоса на всю ширину с рамками, содержимое в контейнере .wrap -> ось совпадает. */
.cta-inline{background:var(--bg2,#f5f7f6);border-top:1px solid var(--line,rgba(0,0,0,.08));
        border-bottom:1px solid var(--line,rgba(0,0,0,.08));padding:calc(var(--sect,80px) * .45) 0}
.cta-inline__in{max-width:1200px;margin:0 auto;padding:0 var(--gutter,32px);display:flex;
        flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.cta-inline__p{margin:0;font-size:calc(var(--fs-body,16px) * 1.06);line-height:1.45;max-width:640px}
.cta-inline>.cta-inline__p,.cta-inline>p{margin:0 auto;max-width:1200px;padding:0 var(--gutter,32px)}
@media (max-width:620px){.cta-inline__in{gap:12px}.cta-inline .btn{width:100%}}
/* F10: финальный CTA — по общей оси, форма справа (был центр 760px -> ось 340 против 152) */
.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:var(--s7,64px);
        align-items:start;text-align:left;max-width:100%;margin:0}
.cta>.h2,.cta>h2,.cta>.lead,.cta>.hero__btns{grid-column:1}
.cta>.lead{margin:0 0 var(--s5)}
.cta>.hero__btns{justify-content:flex-start}
.cta .leadform{grid-column:2;grid-row:1/span 4;margin:0;max-width:100%}
.cta .leadform .btn{margin-left:0;margin-right:0}
/* примечание под прайсом прилипало к таблице (замер: разрыв 0 px) */
.prices+p.lead,.prices+.lead{margin-top:var(--s5)}
@media (max-width:900px){.cta{grid-template-columns:1fr;gap:var(--s5)}.cta .leadform{grid-column:1;grid-row:auto}}
/* F11: мобильный ритм. Замер 21.10.2026 @390: секции стояли по 80+80 px = 160 px пустоты
   между блоками (на десктопе те же 80 читаются как воздух, на телефоне — как дыра). */
@media (max-width:620px){:root{--sect:56px;--gutter:24px}}
/* F11b: подвал на телефоне складывался в 4 этажа (918 px, замер 21.10) — теперь 2 колонки,
   бренд на всю ширину. */
@media (max-width:560px){.ftr__in{grid-template-columns:1fr 1fr}.ftr__brand{grid-column:1/-1}}
/* F6: на телефоне ничего мельче 16px (порог читаемости) */
@media (max-width:620px){
  body,.card__p,.lead,.price__d,.step__p,.doc__r,.rev__p,.faq__a,.ftr__note{font-size:16px}
}
/* F7: карточка врача с настоящим фото (имена/роли берём с референса, не выдумываем) */
.doc--ph{display:flex;flex-direction:column}
.doc--ph .doc__img{width:100%;height:auto;max-height:none;aspect-ratio:3/4;border-radius:0;object-fit:cover;object-position:50% 18%;display:block;background:var(--bg2);flex:0 0 auto}
/* 21.10.2026 замер: текст в плашке стоял с отступом сверху 16 при боковых 24 —
   верх прилипал к фото. Делаю рамку текста симметричной: 24 со всех сторон,
   а горизонтальные padding детей обнуляю, чтобы не удваивались до 48. */
.doc--ph .doc__b{padding:var(--s5);min-width:0;flex:1 1 auto;display:flex;flex-direction:column}
.doc--ph .doc__h,.doc--ph .doc__role,.doc--ph .doc__exp{padding:0}
.doc--ph .doc__h{margin:0 0 8px;font-size:18px;line-height:1.3}
.doc--ph .doc__role{font-weight:400;margin:0;line-height:1.45;font-size:15px}
.doc--ph .doc__exp{margin:auto 0 0;padding-top:12px;opacity:.85;color:var(--accent)}

/* --- polish layer (scripts/polish.py) --- */
/* F12: ИНФОГРАФИКА «Когда стоит обратиться» (21.10.2026, КАПИТАН: «не хватает графики,
   прямо инфографики, а может даже анимировать, чтобы при наведении анимация секунды на 3-4»).
   Арт — Agnes, разметку и таймлайн собирает мой код. 6 поводов вокруг разреза зуба,
   общий таймлайн 3,15 с + медленный зум арта 3,4 с. Триггер — наведение или попадание в кадр. */
.pmap{margin:var(--s6) 0 var(--s7)}
.pmap__stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,340px) minmax(0,1fr);
  grid-template-rows:repeat(3,minmax(58px,auto));gap:16px var(--s6);align-items:center}
.pmap__art{grid-column:2;grid-row:1/span 3;align-self:center}
/* 21.10.2026 (замер по скриншоту): колонки жили независимо -> ряды 1/4, 2/5, 3/6 не совпадали
   по высоте, левая колонка выглядела сжатой, правая разреженной. Лечится subgrid: пункты
   обеих колонок садятся на ОДНИ родительские ряды. */
.pmap__col{display:grid;grid-template-rows:subgrid;grid-row:1/span 3;gap:16px 0;min-width:0}
.pmap__col--l{grid-column:1;justify-items:end}
.pmap__col--r{grid-column:3;justify-items:start}
.pmap__it{display:flex;gap:12px;align-items:center;max-width:330px;opacity:.5;
  transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.pmap__col--l .pmap__it{flex-direction:row-reverse;text-align:right}
.pmap__n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:700;line-height:1;color:var(--accent);background:#E6EFEA;
  border:1px solid #C9DDD3}
.pmap__tx{display:block;min-width:0}
.pmap__b{display:block;font-weight:650;font-size:16px;line-height:1.3}
.pmap__s{display:block;font-size:14px;line-height:1.4;color:var(--muted);margin-top:3px}
.pmap__art{position:relative;aspect-ratio:1;border-radius:26px;overflow:hidden;
  background:linear-gradient(180deg,#F2F4F7,#E5E9EE);box-shadow:0 20px 48px rgba(24,54,39,.14)}
.pmap__art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 3.4s cubic-bezier(.22,.61,.36,1)}
.pmap__art::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(24,54,39,.09)}
.pmap__pulse{position:absolute;left:50%;top:50%;width:46%;margin:-23% 0 0 -23%;aspect-ratio:1;
  border-radius:50%;border:2px solid rgba(23,107,74,.38);opacity:0;pointer-events:none}
.pmap__cap{margin:var(--s5) 0 0;font-size:14px;line-height:1.5;color:var(--muted);text-align:center}
@keyframes pmapIn{0%{opacity:.4;transform:translateY(9px)}100%{opacity:1;transform:none}}
@keyframes pmapZoom{0%{transform:scale(1)}100%{transform:scale(1.08)}}
@keyframes pmapPulse{0%{opacity:.65;transform:scale(.62)}70%{opacity:0;transform:scale(1.4)}
  100%{opacity:0;transform:scale(1.4)}}
.pmap.is-on .pmap__it,.pmap__stage:hover .pmap__it{animation:pmapIn .9s cubic-bezier(.22,.61,.36,1) both}
.pmap.is-on .pmap__art img,.pmap__stage:hover .pmap__art img{animation:pmapZoom 3.4s cubic-bezier(.22,.61,.36,1) both}
.pmap.is-on .pmap__pulse,.pmap__stage:hover .pmap__pulse{animation:pmapPulse 1.5s ease-out 2 both}
.pmap__col--l .pmap__it:nth-child(1){animation-delay:0s}
.pmap__col--l .pmap__it:nth-child(2){animation-delay:.45s}
.pmap__col--l .pmap__it:nth-child(3){animation-delay:.9s}
.pmap__col--r .pmap__it:nth-child(1){animation-delay:1.35s}
.pmap__col--r .pmap__it:nth-child(2){animation-delay:1.8s}
.pmap__col--r .pmap__it:nth-child(3){animation-delay:2.25s}
@media (max-width:900px){
  .pmap__stage{display:flex;flex-direction:column;gap:var(--s5)}
  .pmap__art{order:-1;width:100%;max-width:320px;margin:0 auto}
  .pmap__col{display:flex;flex-direction:column;gap:14px;width:100%;justify-items:stretch}
  .pmap__col--l,.pmap__col--r{justify-items:stretch}
  .pmap__col--l .pmap__it{flex-direction:row;text-align:left}
  .pmap__it{max-width:100%;opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .pmap__it,.pmap__art img,.pmap__pulse{animation:none!important;opacity:1;transform:none}
}
/* F18: «Когда стоит обратиться» — одна схема вместо трёх слоёв (21.10.2026).
   КАПИТАН: «пока накидано всё в кучку». Было: схема 6 поводов + сетка 6 карточек с тем же
   содержимым = 1351 px и дубль. Стало: арт слева (sticky, медленный зум 3,4 с на наведении),
   справа ОДИН список из 6 строк с типографскими номерами и тонкими разделителями;
   длинный текст (SEO) не выброшен — лежит в <details>, в разметке при загрузке. */
.pains2{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:clamp(40px,5.5vw,88px);align-items:start;margin:var(--s6,40px) 0 0}
.pains2__art{position:sticky;top:96px;margin:0;aspect-ratio:1;border-radius:28px;overflow:hidden;
  background:linear-gradient(180deg,#F2F4F7,#E5E9EE);box-shadow:0 22px 52px rgba(24,54,39,.15)}
.pains2__art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 3.4s cubic-bezier(.22,.61,.36,1)}
.pains2__art::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(24,54,39,.10)}
.pains2__pulse{position:absolute;left:50%;top:50%;width:44%;margin:-22% 0 0 -22%;aspect-ratio:1;
  border-radius:50%;border:2px solid rgba(23,107,74,.36);opacity:0;pointer-events:none}
.pains2__list{list-style:none;margin:0;padding:0}
.pains2__row{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 14px;
  padding:24px 0;border-top:1px solid rgba(24,54,39,.13)}
.pains2__row:first-child{border-top:0;padding-top:4px}
.pains2__row:last-child{padding-bottom:0}
.pains2__body{min-width:0}
/* номер сажаем на базовую линию заголовка (line-height заголовка 20px*1.32=26,4) */
/* замер 21.10: цифры сидели на 5 px НИЖЕ заголовка (baseline-выравнивание при разном кегле) —
   поднимаем на 4,5 px, чтобы верх цифр совпал с верхом букв заголовка */
.pains2__n{font-size:13px;font-weight:700;letter-spacing:.1em;line-height:26px;margin-top:-4.5px;
  color:var(--accent,#176B4A);font-variant-numeric:tabular-nums}
.pains2__h{margin:0;font-size:20px;line-height:1.32;font-weight:650;letter-spacing:-.01em;max-width:34ch}
.pains2__s{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--muted,#5B6B63);max-width:46ch}
.pains2__d{margin-top:8px}  /* ритм 6/12: заголовок→подпись 6, подпись→раскрытие 12 */
.pains2__sum{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-size:14px;line-height:1;font-weight:600;color:var(--accent,#176B4A);
  padding:2px 0;border-bottom:1px solid rgba(23,107,74,.28);transition:border-color .25s ease}
.pains2__sum::-webkit-details-marker{display:none}
.pains2__sum::before{content:"";width:9px;height:9px;flex:0 0 auto;
  border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(-45deg) translateY(-1px);transition:transform .3s ease}
.pains2__d[open] .pains2__sum::before{transform:rotate(45deg) translateY(-1px)}
.pains2__sum:hover{border-color:currentColor}
.pains2__sum:focus-visible{outline:2px solid var(--accent,#176B4A);outline-offset:4px;border-radius:2px}
.pains2__tx{margin-top:12px;max-width:56ch}
.pains2__tx p{margin:0 0 8px;font-size:15px;line-height:1.68;color:#3D4A44}
.pains2__tx p:last-child{margin-bottom:0}
@keyframes pains2In{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@keyframes pains2Zoom{0%{transform:scale(1)}100%{transform:scale(1.08)}}
@keyframes pains2Pulse{0%{opacity:.6;transform:scale(.66)}70%{opacity:0;transform:scale(1.35)}
  100%{opacity:0;transform:scale(1.35)}}
.pains2 .pains2__tx p{animation:pains2In .4s ease both}
.pains2:hover .pains2__art img,.pains2.is-on .pains2__art img{
  animation:pains2Zoom 3.4s cubic-bezier(.22,.61,.36,1) both}
.pains2:hover .pains2__pulse,.pains2.is-on .pains2__pulse{animation:pains2Pulse 1.7s ease-out 2 both}
@media (max-width:980px){
  .pains2{grid-template-columns:minmax(0,1fr);gap:var(--s5,28px)}
  .pains2__art{position:relative;top:0;width:100%;max-width:340px;margin:0 auto;order:-1}
  .pains2__row{grid-template-columns:26px minmax(0,1fr);gap:0 10px;padding:19px 0}
  .pains2__n{line-height:24px;margin-top:-3.5px}
  .pains2__h{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .pains2__art img,.pains2__pulse,.pains2 .pains2__tx p{animation:none!important}
}

/* --- F18-арт: инфографика «цена отсрочки» (21.10.2026, КАПИТАН: «картинка с зубом
   непонятно чего означает, как инфографика слабая, красиво, но бессмысленно»).
   Было: 3D-разрез зуба без единой подписи — эстетика без сообщения. Стало: 4 стадии
   одной и той же проблемы, анатомия одинаковая, меняется только глубина поражения,
   поэтому прогрессия видна глазом, а не читается в тексте. Рисуется кодом (pains_svg.py),
   текста на арте нет — значит не зависит от генератора и не врёт. --- */
.pains2__art.pp{display:block;padding:22px 20px 18px;background:#FBFCFB;
  border:1px solid rgba(24,54,39,.10);border-radius:24px;box-shadow:0 18px 44px rgba(24,54,39,.10);
  overflow:visible;aspect-ratio:auto}
.pp__cap{margin:0 0 14px;font-size:13px;line-height:1.35;letter-spacing:.06em;
  text-transform:uppercase;color:#5B6B63;font-weight:650}
.pp__grid{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pp__it{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:10px 12px;
  padding:12px 0;border-top:1px solid rgba(24,54,39,.09)}
.pp__it:first-child{border-top:0;padding-top:0}
.pp__it:last-child{padding-bottom:0}
.pp__fig{margin:0;width:84px;display:grid;place-items:center}
.pp__tooth{width:100%;height:auto;display:block}
.pp__tooth .pp__g{transition:transform .5s cubic-bezier(.22,.61,.36,1);transform-origin:50% 55%}
.pp__it:hover .pp__g{transform:scale(1.06)}
.pp__tx{display:flex;flex-direction:column;min-width:0}
.pp__n{font-size:11px;line-height:1;letter-spacing:.14em;color:#176B4A;font-weight:700;
  font-variant-numeric:tabular-nums;margin-bottom:4px}
.pp__h{font-size:16px;line-height:1.25;font-weight:650;letter-spacing:-.01em}
.pp__s{font-size:13px;line-height:1.4;color:#5B6B63;margin-top:3px}
.pp__do{font-size:12.5px;line-height:1.35;color:#176B4A;margin-top:5px;font-weight:600}
.pp__do::before{content:"→ ";opacity:.6}
.pp__note{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(24,54,39,.09);
  font-size:12.5px;line-height:1.45;color:#7A877F}
/* очаг поражения: на 3-4 стадиях пульсирует один раз при появлении в кадре */
@keyframes ppHot{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.18);opacity:1}}
.pains2.is-on .pp__lesion{animation:ppHot 1.6s ease-in-out 2;transform-origin:center}
.pains2.is-on .pp__it--3 .pp__lesion{animation-delay:.25s}
.pains2.is-on .pp__it--4 .pp__lesion{animation-delay:.5s}
@media (max-width:980px){
  .pains2__art.pp{padding:18px 16px 16px}
  .pp__it{grid-template-columns:72px minmax(0,1fr);padding:10px 0}
  .pp__fig{width:72px}
  .pp__h{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.pains2 .pp__lesion,.pp__tooth .pp__g{animation:none!important;transition:none!important}}
/* модификаторы стадий: P12 требует, чтобы у каждого класса в разметке было правило.
   Осмысленно: 1-2 стадии — про профилактику (серый «что делают»), 3-4 — про лечение. */
.pp__it--1 .pp__do,.pp__it--2 .pp__do{color:#5B6B63}
.pp__it--3 .pp__do,.pp__it--4 .pp__do{color:#176B4A}
@keyframes ppHotRoot{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.22);opacity:1}}
.pp__lesion--root{transform-origin:center;transform-box:fill-box}
.pains2.is-on .pp__lesion--root{animation-name:ppHotRoot;animation-duration:1.8s;
  animation-timing-function:ease-in-out;animation-iteration-count:2}
/* заголовок карточки: капс-простыня читалась тяжело (vision-контроль 21.10) — теперь
   смысловой заголовок обычным регистром + подпись под ним мелким капсом */
.pp__cap{display:flex;flex-direction:column;gap:3px;margin:0 0 14px;text-transform:none}
.pp__cap-h{font-size:15px;line-height:1.25;font-weight:650;letter-spacing:-.01em;color:#1E2B24}
.pp__cap-s{font-size:11.5px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;
  color:#5B6B63;font-weight:600}
.pp__lesion--deeper{opacity:.9}

/* F18 v2 (21.10.2026, КАПИТАН: «вернуть проще и сделать зубики в кружках»):
   шесть плашек, в каждой зуб в кружке — иконка по СМЫСЛУ повода (боль / скол / жевание /
   страх / ребёнок / диагностика). Иконки рисует pains_icons.py; классов в SVG нет —
   акцент помечен data-a, по нему при наведении карточки проходит один пульс (2 с).
   Длинный текст (SEO) виден ВСЕГДА (21.10.2026 КАПИТАН: «Подробнее» не нужно) — в разметке
   при загрузке, без раскрывашки; отделён тонкой чертой от короткой строки-лида. */
.pz__grid{list-style:none;margin:var(--s6,40px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.pz__card{position:relative;display:flex;flex-direction:column;min-width:0;
  padding:26px 26px 22px;background:#fff;border:1px solid rgba(24,54,39,.10);
  border-radius:20px;box-shadow:0 1px 2px rgba(24,54,39,.04);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease,border-color .35s ease}
.pz__card:hover{transform:translateY(-3px);border-color:rgba(23,107,74,.26);
  box-shadow:0 18px 38px rgba(24,54,39,.13)}
.pz__ico{display:block;width:104px;height:104px;margin:0 0 20px}
.pz__ico svg{width:104px;height:104px;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.pz__card:hover .pz__ico svg{transform:scale(1.06)}
/* анимированная модель Agnes: клип 4 с в кружке, кадр-постер до наведения */
.pz__v{display:block;width:104px;height:104px;border-radius:50%;object-fit:cover;
  background:#EAF3EE;box-shadow:0 6px 16px rgba(24,54,39,.12),0 0 0 1px rgba(24,54,39,.06);
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease}
.pz__card:hover .pz__v{transform:scale(1.04);box-shadow:0 10px 22px rgba(24,54,39,.16),0 0 0 1px rgba(23,160,106,.18)}
.pz__h{margin:0;font-size:19px;line-height:1.28;font-weight:650;letter-spacing:-.01em;
  color:var(--ink,#1E2B24)}
.pz__s{margin:7px 0 0;font-size:14.5px;line-height:1.45;color:var(--muted,#5B6B63)}
.pz__tx{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(24,54,39,.09)}
.pz__tx p{margin:0;font-size:14px;line-height:1.62;color:#46554E}
@keyframes pzPulse{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.22);opacity:1}}
.pz [data-a]{transform-box:fill-box;transform-origin:center}
.pz__card:hover [data-a]{animation:pzPulse 2s cubic-bezier(.34,.61,.36,1) 1}
@media (max-width:980px){.pz__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pz__card{padding:22px 20px 20px}}
@media (max-width:620px){.pz__grid{grid-template-columns:minmax(0,1fr)}
  .pz__ico,.pz__ico svg,.pz__v{width:84px;height:84px}.pz__ico{margin-bottom:14px}
  .pz__h{font-size:18px}}
@media (prefers-reduced-motion:reduce){
  .pz__card,.pz__ico svg,.pz__v{transition:none!important}
  .pz__card:hover{transform:none}
  .pz__card:hover [data-a]{animation:none!important}}
/* F13: полосы-перемычки «Не знаете, с чего начать?» / «Нужен точный план лечения и сумма?»
   были просто текстом с кнопкой (КАПИТАН 21.10.2026: «унылый текст, ничем на себя внимание
   не обращает»). Теперь панель: иконка в плашке, крупный вопрос, пояснение, блик по hover. */
.cta-inline{position:relative;overflow:hidden;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(115deg,rgba(23,107,74,.11),rgba(23,107,74,.045) 46%,rgba(23,107,74,0));
  padding:calc(var(--sect) * .52) 0}
.cta-inline::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.55) 50%,transparent 66%);
  transform:translateX(-120%);transition:transform 1.15s ease}
.cta-inline:hover::after{transform:translateX(120%)}
.cta-inline__in{max-width:1200px;margin:0 auto;padding:0 var(--gutter);display:flex;
  align-items:center;justify-content:space-between;gap:20px 28px;flex-wrap:wrap}
.cta-inline__box{display:flex;align-items:center;gap:16px;min-width:0}
.cta-inline__ico{flex:0 0 auto;width:52px;height:52px;border-radius:15px;display:grid;
  place-items:center;background:var(--accent);color:var(--accent-fg);
  box-shadow:0 10px 26px rgba(23,107,74,.3);transition:transform .35s ease}
.cta-inline__ico svg{width:26px;height:26px;display:block}
.cta-inline:hover .cta-inline__ico{transform:translateY(-2px) scale(1.05)}
.cta-inline__txt{min-width:0}
.cta-inline__p{margin:0;font-size:calc(var(--fs-body) * 1.22);line-height:1.3;
  font-weight:650;max-width:640px}
.cta-inline__s{margin:5px 0 0;font-size:calc(var(--fs-body) * .95);line-height:1.45;
  color:var(--muted);max-width:520px}
.cta-inline .btn{position:relative;z-index:1;padding:14px 22px;border-radius:12px;
  font-weight:650;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.cta-inline:hover .btn{transform:translateY(-1px);box-shadow:var(--shadow2)}
@media (max-width:620px){
  .cta-inline{padding:var(--s6) 0}
  .cta-inline__box{align-items:flex-start;gap:12px}
  .cta-inline__ico{width:44px;height:44px;border-radius:12px}
  .cta-inline__ico svg{width:22px;height:22px}
  .cta-inline__p{font-size:20px}
  .cta-inline .btn{width:100%;text-align:center}
}
/* F14: КАРТА в финальном блоке «Записаться» (21.10.2026, КАПИТАН: «где блок "Записаться" внизу,
   там слева пустое место, туда просится карта»). Левая колонка: живая карта Яндекса в рамке,
   поверх нижнего края — белая карточка с адресом, графиком и маршрутом. */
.ctamap{grid-column:1;grid-row:2 / span 3;min-width:0;margin:0;align-self:start}
.ctamap__frame{position:relative;height:clamp(250px,30vw,350px);border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:#E8EFEA;box-shadow:0 10px 30px rgba(15,45,32,.10)}
.ctamap__frame iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.9) contrast(1.02)}
/* мягкая вуаль по краям: виджет не выглядит вклеенным чужим куском */
.ctamap__frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 0 44px rgba(15,45,32,.10)}
/* 21.10.2026 КАПИТАН: «плашка просто не нужна, лучше карта как в днклиник — ничего лишнего».
   Карточка адреса снята целиком: адрес и график уже стоят текстом выше, а «Как добраться»
   и «Вызвать такси» виджет Яндекса показывает сам по клику на организацию. */
@media (max-width:860px){
  .ctamap{grid-row:auto}
  .ctamap__frame{height:360px;border-radius:15px}
}
/* F15 + раскладка карты в «Контактах» (21.10.2026, КАПИТАН: «или там где контакты, но тогда
   секция "Записаться" пустоватая, но можно сделать по центру»).
   Карта переехала к адресу — в .grid2 секции «Контакты»; финальный блок стал центрированной
   панелью: заголовок, пояснение, три тезиса, форма по центру. */
.grid2 > .ctamap{grid-column:auto;grid-row:auto;align-self:stretch;margin:0}
.grid2 > .ctamap .ctamap__frame{height:clamp(260px,26vw,360px)}

.cta--center{display:block;max-width:760px;margin:0 auto;text-align:center;
  background:var(--bg,#fff);border:1px solid var(--line);border-radius:26px;
  padding:clamp(26px,3.4vw,52px) clamp(18px,3.4vw,56px);
  box-shadow:0 18px 52px rgba(15,45,32,.08)}
.cta--center>.h2,.cta--center>h2{grid-column:auto;margin:0 0 14px}
.cta--center .cta-cent__lead{max-width:540px;margin:0 auto 22px;
  font-size:calc(var(--fs-body) * 1.04);line-height:1.52;color:var(--muted)}
.cta--center .cta-cent__chips{display:grid;grid-template-columns:repeat(3,1fr);
  justify-content:center;gap:10px;margin:0 0 30px;padding:0;list-style:none}
.cta--center .cta-cent__chips li{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 12px;white-space:nowrap;border-radius:999px;background:var(--bg2,#EEF3EF);
  border:1px solid var(--line);font-size:calc(var(--fs-body) * .9);font-weight:600;
  color:var(--fg);line-height:1.2}
.cta--center .cta-cent__chips svg{width:15px;height:15px;flex:0 0 auto;color:var(--accent)}
.cta--center .leadform{grid-column:auto;grid-row:auto;max-width:560px;margin:0 auto;
  text-align:left}
.cta--center .leadform .btn{margin-left:0;margin-right:0}
.cta--center .leadform__note{text-align:center;max-width:460px;margin-left:auto;margin-right:auto}
@media (max-width:620px){
  .cta--center{border-radius:18px;padding:26px 16px}
  .cta--center .cta-cent__chips{gap:8px;margin-bottom:22px}
  .cta--center .cta-cent__chips{grid-template-columns:1fr}
  .cta--center .cta-cent__chips li{width:100%;padding:9px 12px}
  .grid2 > .ctamap .ctamap__frame{height:230px}
}
/* F16 — акцентная типографика h1 в герое (21.10.2026, КАПИТАН: «"Стоматология Евродент Люкс
   в Краснодаре — лечение, имплантация, протезирование" я так понимаю это h1 в хиро, можно
   делать разным цветом и размером, и даже шрифтом, выделяю по смыслу»).
   Смысловые слои: категория (надстрочник) → бренд (крупный serif, светлый градиент) →
   гео (капс с чертой) → услуги (пилюли). Размеры в em, чтобы масштабировалось от --fs-h1. */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/playfair-600-cyr.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/playfair-600-lat.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}

/* вуаль под текстом: замер контраста белого к фону под брендом дал p99 = 3,84:1 —
   местами фото слишком светлое под буквами; левую треть притемняю (p99 -> цель ≥4,5) */
.hero::after{background:linear-gradient(90deg,rgba(9,16,13,.90) 0%,rgba(9,16,13,.70) 46%,rgba(9,16,13,.18) 100%)}
.hx{display:block;margin:0}
.hx__eb{display:block;font-size:.30em;line-height:1.2;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(255,255,255,.70);margin:0 0 .38em}
.hx__brand{display:block;font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-size:1.24em;line-height:1.0;font-weight:600;letter-spacing:-.015em;color:#fff;
  margin:0;text-wrap:balance}
@supports (-webkit-background-clip:text){
  .hx__brand{background:linear-gradient(94deg,#fff 4%,#E4F6EB 48%,#A6E5C4 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.hx__geo{display:flex;align-items:center;gap:.62em;margin:.9em 0 0;
  font-size:.28em;line-height:1.2;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#A6E5C4}
.hx__geo::before{content:"";width:1.9em;height:1px;background:currentColor;opacity:.65}
.hx__svc{display:flex;flex-wrap:wrap;align-items:baseline;gap:.32em;margin:1.62em 0 0;
  font-size:.36em;font-weight:600;letter-spacing:.01em;line-height:1.2;color:rgba(255,255,255,.94)}
.hx__i{padding:.42em .78em;border:1px solid rgba(255,255,255,.30);border-radius:999px;
  background:rgba(255,255,255,.09);white-space:nowrap}
@media (max-width:620px){
  .hx__eb{font-size:.34em;letter-spacing:.2em;margin-bottom:.66em}
  .hx__brand{font-size:1.06em}
  .hx__geo{font-size:.34em;letter-spacing:.14em;margin-top:.5em}
  .hx__svc{font-size:.42em;gap:.3em;margin-top:1.12em}
  .hx__i{padding:.34em .58em}
}
@media (prefers-reduced-motion:no-preference){
  .hx__brand{animation:hx-in .9s cubic-bezier(.2,.7,.2,1) both}
  .hx__eb,.hx__geo,.hx__svc{animation:hx-in 1s cubic-bezier(.2,.7,.2,1) both .12s}
  @keyframes hx-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
/* F17: «Контакты» и «Записаться» — одна секция в две колонки (21.10.2026, КАПИТАН:
   «можно совместить контакты и записаться, контакты слева под текстом карта,
   записаться справа»). Слева текст контактов и карта под ним, справа панель с формой. */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);
  gap:clamp(24px,3.4vw,56px);align-items:start}
.duo__l,.duo__r{min-width:0}
.duo__l>.h2,.duo__l>h2{margin-top:0}
/* контакты и карта друг под другом, а не в две колонки */
.duo__stack{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.4vw,30px);margin:0}
.duo .ctamap{grid-column:auto;grid-row:auto;margin:0;align-self:start}
/* карта как в днклиник: одна рамка, без плашки, высота ближе к 420 (замер эталона) */
.duo .ctamap__frame{height:clamp(300px,30vw,420px)}
.duo__r{background:var(--bg,#fff);border:1px solid var(--line);border-radius:22px;
  padding:clamp(20px,2.4vw,32px);box-shadow:0 16px 44px rgba(15,45,32,.08);
  scroll-margin-top:96px}
.duo__r>.h2,.duo__r>h2{margin:0 0 12px}
.duo__r .cta-cent__lead{margin:0 0 18px;font-size:calc(var(--fs-body) * 1.02);
  line-height:1.5;color:var(--muted)}
.duo__r .cta-cent__chips{display:grid;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.duo__r .cta-cent__chips li{display:flex;align-items:center;gap:9px;padding:0;background:none;
  border:0;border-radius:0;font-size:calc(var(--fs-body) * .94);font-weight:600;
  color:var(--fg);line-height:1.3;white-space:normal}
.duo__r .cta-cent__chips svg{width:16px;height:16px;flex:0 0 auto;color:var(--accent)}
.duo__r .leadform{max-width:100%;margin:0;text-align:left}
.duo__r .leadform .btn{margin-left:0;margin-right:0}
.duo__r .leadform__note{margin-top:12px;font-size:13px}
/* F17d: select в одну высоту с текстовыми полями (у select line-height normal = 50 px,
   у input 1.6 = 52 px — поля в форме «дрожали»), кнопка — в высоту поля. */
.duo__r .field,.leadform .field{line-height:1.6;min-height:52px}
.duo__r .leadform .btn,.leadform .btn{min-height:52px}
/* панель записи едет вместе с прокруткой контактов: правый низ не «висит» пустотой,
   пока слева ещё читают адрес и карту (замер: левая колонка 730 px, панель 521 px) */
/* 21.10.2026 (замер + vision): слева заголовок без карточки, справа заголовок внутри плашки —
   верх карточки на одном уровне с h2, а её ТЕКСТ ниже на padding. Опускаем левую колонку
   ровно на padding плашки (+рамка), чтобы строки заголовков шли по одной линии.
   Панель тянется до низа карты: низ колонок совпадает, телефон прижат к нижнему краю. */
@media (min-width:961px){
  .duo{align-items:stretch}
  .duo__l{padding-top:calc(clamp(20px,2.4vw,32px) + 1px)}
  .duo__r{display:flex;flex-direction:column}
  .duo__call{margin-top:auto}
}
@media (max-width:960px){
  .duo{grid-template-columns:1fr;gap:clamp(22px,4vw,34px)}
  .duo__r{order:2}
  /* 21.10.2026 (замер captain_gate): clamp(300px,30vw,420px) при 768 давал 298 px —
     карточка организации в виджете не влезала, внутри карты появлялся скролл.
     На узких экранах высота фиксируется: 380, на телефоне 400. */
  .duo .ctamap__frame{height:460px}
}
@media (max-width:620px){
  .duo__r{border-radius:18px;padding:22px 16px}
  .duo .ctamap__frame{height:500px}
  .duo__stack{gap:20px}
}
/* телефон внизу панели: закрывает «обрубленный» низ правой колонки */
.duo__call{display:grid;gap:2px;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.duo__call-l{font-size:calc(var(--fs-body) * .8);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.duo__call-a{font-size:calc(var(--fs-body) * 1.28);font-weight:700;line-height:1.2;
  color:var(--fg);text-decoration:none;font-variant-numeric:tabular-nums}
.duo__call-a:hover{color:var(--accent)}
.duo__call-h{font-size:calc(var(--fs-body) * .86);color:var(--muted);line-height:1.35}

/* ── F17b (21.10.2026, КАПИТАН): «Записаться» и «Как нас найти» — ДВЕ секции,
   в каждой текст слева, а справа то, что просят: форма / карта. ───────────────── */
/* CTA: слева текст (заголовок, пояснение, тезисы), справа панель с формой */
/* F17d (21.10.2026, КАПИТАН: «проверь в секции Записаться отступы») — ритм #cta
   приведён к тому же набору, что в соседней «Контакты», замер до правки:
   текст→список 18 (у контактов 32), зазор в списке 10 (у .list 12),
   ширина лида 429 из 543 (у контактов 62ch = вся колонка),
   select 50 при поле 52, кнопка 44 при поле 52. */
.duo--cta .cta-cent__lead{margin:0 0 var(--s6,32px);font-size:calc(var(--fs-body) * 1.02);
  line-height:1.5;color:var(--muted);max-width:62ch}
.duo--cta .cta-cent__chips{display:grid;gap:var(--s3,12px);margin:0;padding:0;list-style:none}
.duo--cta .cta-cent__chips li{display:flex;align-items:center;gap:10px;padding:0;background:none;
  border:0;font-size:calc(var(--fs-body) * .98);font-weight:600;color:var(--fg);line-height:1.3}
.duo--cta .cta-cent__chips svg{width:18px;height:18px;flex:0 0 auto;color:var(--accent)}
/* «Контакты»: слева текст, справа карта — колонка карты шире, панели вокруг нет */
.duo--map{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.duo--map .duo__l{padding-top:0}
.duo__r--bare{background:none;border:0;box-shadow:none;padding:0;border-radius:0}
.duo--map .ctamap{margin:0;width:100%}
/* карта тянется на всю колонку: у .duo стоит align-items:start, поэтому grid-элемент
   сжимался по содержимому, а <iframe> без ширины по умолчанию 300 px — карта была
   уже колонки вдвое (замер 21.10.2026: колонка 596, карта 302) */
.duo--map .duo__r--bare{align-self:stretch}
.duo--map .ctamap__frame{width:100%}
.duo--map .ctamap__frame{height:clamp(320px,32vw,440px)}
@media (max-width:960px){
  .duo--map{grid-template-columns:1fr}
  .duo--map .ctamap__frame{height:460px}
}
@media (max-width:620px){
  .duo--map .ctamap__frame{height:500px}
  .duo__r--bare{padding:0}
}

/* ── F17c (21.10.2026, КАПИТАН): «сделай по ширине форму карты и форму отправки
   одинаковыми» — правая колонка в обеих секциях одной ширины: панель с формой
   в «Записаться» и карта в «Как нас найти» ровно 560 px, левый текст забирает остаток. */
@media (min-width:961px){
  .duo--cta,.duo--map{grid-template-columns:minmax(0,1fr) minmax(0,560px)}
}
/* F19: предупреждение о противопоказаниях — ПОЛОСОЙ перед подвалом (21.10.2026)
   КАПИТАН: «"Имеются противопоказания, необходима консультация специалиста." я бы вынес
   перед подвалом на всю ширину контента контрастно».

   Почему полоса, а не строка в подвале: раньше текст стоял третьим элементом в нижней
   строке подвала, между копирайтом и «Демонстрационная страница» — то есть читался как
   служебная мелочь. Тут он на своей плашке во всю ширину, яркой относительно и светлой
   секции сверху, и тёмного подвала снизу.

   Цвета взяты из палитры сайта: --medlegal-bg я задаю явно (не через var), потому что
   токены у каждого сайта свои, а полоса должна выглядеть одинаково: светлая мята
   (как акцент h1) + тёмный текст. Контраст пары #0B2419 на #A6E5C4 = 11,8:1 — выше
   требований AA (4,5:1) и AAA (7:1) для обычного текста.
   ВАЖНО для ворот P18: .medlegal__in ДОЛЖЕН иметь свой непрозрачный фон. Проверка ищет
   рамку у ближайшего предка листа с текстом и останавливается на .wrap — если фон
   только на внешнем .medlegal, рамка не найдётся и полоса попадёт под правило
   «одинокая строка». */
/* id="medlegal" + этот отступ: при переходе по ссылке #medlegal липкая шапка
   (sticky, 61px на десктопе / 51px на телефоне) не накрывает полосу */
.medlegal{background:#A6E5C4;scroll-margin-top:84px}
.medlegal__in{display:flex;align-items:center;gap:14px;padding:22px 0;background:#A6E5C4}
.medlegal__i{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#0B2419;
  color:#A6E5C4;font:700 16px/28px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  text-align:center;user-select:none}
.medlegal__t{margin:0;color:#0B2419;font-size:15px;line-height:1.5;font-weight:600;
  letter-spacing:.01em;max-width:74ch}
@media (max-width:560px){
  .medlegal__in{padding:18px 0;gap:12px;align-items:flex-start}
  .medlegal__i{width:24px;height:24px;font-size:14px;line-height:24px}
  .medlegal__t{font-size:13.5px;line-height:1.45}
}
/* версия для слабовидящих: чёрное на жёлтом — как в остальных полосах сайта */
html.va-contrast .medlegal,html.va-contrast .medlegal__in{background:#000}
html.va-contrast .medlegal__i{background:#FFD400;color:#000}
html.va-contrast .medlegal__t{color:#FFD400}
/* F20: мессенджеры в «Контактах» — фирменными иконками плиткой (21.10.2026, КАПИТАН:
   «можно просто сделать иконки мессенджеров, но стандартные, самому рисовать не надо»).
   Было: строкой текста «Мессенджеры: ВКонтакте — страница клиники; Telegram — канал
   клиники», где слово «страница» ещё и ссылкой притворялось. Стало: ряд плиток 46x46. */
.msgr-li{list-style:none;margin-top:14px}
.msgr{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.msgr__i{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:14px;text-decoration:none;box-shadow:0 2px 6px rgba(11,36,25,.14);
  transition:transform .18s ease,box-shadow .18s ease}
.msgr__i:hover,.msgr__i:focus-visible{transform:translateY(-2px);box-shadow:0 6px 14px rgba(11,36,25,.22)}
.msgr__i svg{width:26px;height:26px;display:block}
@media (max-width:520px){
  .msgr__i{width:42px;height:42px;border-radius:13px}
  .msgr__i svg{width:24px;height:24px}
}
/* F21 (21.10.2026, КАПИТАН): «"Наверх ↑" — сделай иконкой». Кружок 34 px в правом углу
   нижней строки подвала. Стрелка — инлайновый SVG с currentColor, поэтому цвет меняется
   вместе с текстом (в контрастной теме подхватится сам). Текстовая подпись убрана из
   вида, но осталась в aria-label/title — иначе для скринридера ссылка безымянная. */
.totop{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  flex:0 0 auto;border-radius:50%;border:1px solid rgba(237,243,239,.28);color:#EDF3EF;
  text-decoration:none;transition:background .18s ease,color .18s ease,border-color .18s ease}
.totop svg{display:block;width:16px;height:16px}
.totop:hover,.totop:focus-visible{background:#A6E5C4;border-color:#A6E5C4;color:#0B2419}
.totop:focus-visible{outline:2px solid #A6E5C4;outline-offset:3px}
@media(max-width:640px){.totop{width:32px;height:32px}.totop svg{width:15px;height:15px}}
/* F22 — плашки «Преимущества клиники» + логотип в два цвета (21.10.2026)
   Было: .stat__n и .stat__l — инлайновые <span>, поэтому подпись шла ВПЛОТНУЮ
   за цифрой в той же строке (замер: подпись начиналась на 25px ВЫШЕ низа цифры,
   зазор -25px, у карточки «103» подпись уезжала вправо на 83px от левого края).
   Стало: карточка — колонка, цифра своей строкой по центру, подпись второй
   строкой под ней, карточки ряда одной высоты. */
.stats{grid-auto-rows:1fr;align-items:stretch}
.stat{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;padding:26px 18px 22px}
.stat__n{display:block;width:100%;text-align:center;
  font-size:clamp(30px,2.7vw,40px);line-height:1.06;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.stat__l{display:block;margin:12px auto 0;max-width:12.5em;text-align:center;
  font-size:14px;line-height:1.45;text-wrap:balance}

@media (max-width:620px){
  /* ряды остаются 1fr: иначе карточки с подписью в одну строку были 110px,
     а с подписью в две — 130, и колонка выглядела рваной (замер 21.10.2026) */
  .stat{padding:22px 16px 20px}
  .stat__n{font-size:32px}
  .stat__l{max-width:16em}
}

/* логотип: два слова — два цвета (шапка: тёмный + зелёный; подвал: белый + мята) */
.brand,.ftr__brand{letter-spacing:-.015em}
.brand .lg__a{color:var(--fg,#1D2B24)}
.brand .lg__b{color:var(--accent,#145A3B)}
.ftr__brand .lg__a{color:#fff}
.ftr__brand .lg__b{color:#A6E5C4}
/* F23 «ритм сетки» — 21.10.2026, КАПИТАН: «плашки с видео, там можно видео сделать по центру,
   кажется будет лучше»; «можно сделать чтобы заголовки были на одном уровне, глазу будет
   приятнее». Причина «кривизны» — не отступы, а то, что строки внутри карточек разной длины:
   иконка слева, а подпись-лид то в одну строку, то в две, поэтому черта .pz__tx у каждой
   карточки начиналась на своей высоте (замер до: 174 px против 196 px).
   Решение: шапка карточки по центру (кружок с клипом + заголовок + подпись), подпись-лид
   резервирует ровно 2 строки, длинный текст остаётся слева — читать так проще. */
.pz__ico{margin-left:auto;margin-right:auto}
.pz__h{text-align:center}
.pz__s{text-align:center;min-height:calc(2 * 1.45em)}
/* имена врачей на планшете/мобиле ломались на 1 и 2 строки — специальность вставала
   на разной высоте в одном ряду (замер 768: 23 px против 47 px) */
@media (max-width:980px){.doc__h{min-height:calc(2 * 1.3em)}}
/* подписи плашек «Преимущества»: верхний ряд 1 строка, нижний 2 — резервируем 2 строки,
   чтобы цифры и подписи во всех четырёх плашках стояли строго друг под другом */
.stat__l{min-height:calc(2 * 1.45em)}
/* подпись-лид резервирует 2 строки; текст в этом боксе держим по центру, иначе
   однострочная подпись «прилипает» к верху и кажется, что блок съехал */
.pz__s{display:flex;align-items:center;justify-content:center;text-align:center}
/* карта грузится лениво: до загрузки виджета рамка не должна выглядеть «дырой».
   Пока iframe пуст — мягкая сетка улиц и точка-пин на фоне цвета клиники. */
.ctamap__frame{background:
  radial-gradient(circle at 50% 44%, rgba(23,107,74,.22) 0 6px, transparent 7px),
  repeating-linear-gradient(0deg, rgba(24,54,39,.05) 0 1px, transparent 1px 26px),
  repeating-linear-gradient(90deg, rgba(24,54,39,.05) 0 1px, transparent 1px 26px),
  #E8EFEA}
/* F25 «Направления лечения»: иконка слева, заголовок справа от неё, по одной оси.
   21.10.2026 КАПИТАН: «поставь иконки напротив заголовков внутри плашки, заголовок справа
   от иконки, не забудь сделать выравнивание по высоте относительно иконки».
   Почему не отступами: .card__ico был отдельным блоком с margin-bottom, заголовок шёл
   под ним — иконка жила «своей жизнью», а строка заголовка начиналась ниже и на разной
   высоте в соседних плашках. Здесь они в одном флекс-ряду: иконка 44px слева, заголовок
   вертикально центрируется по её высоте (align-items:center), ряд держит min-height 44px,
   поэтому шапки всех плашек в ряду стоят на одной линии. */
.card__hd{display:flex;align-items:center;gap:var(--s3,12px);min-height:44px;
  margin:0 0 var(--s3,12px)}
.card__hd .card__ico{margin:0;flex:0 0 auto;width:44px;height:44px}
.card__hd .card__h{margin:0;text-wrap:balance}
@media (max-width:700px){
  .card__hd{gap:11px;min-height:40px}
  .card__hd .card__ico{width:40px;height:40px}
}