/* Зібрано build-site.py: brand-tokens.css вшито на початок. */
/* ============================================================
   STARDOCTOR — базові дизайн-токени для лендінгів
   Джерело: Brand/STARDOCTOR - GIDE.pdf (с. 7–8)
            Brand/STARDOCTOR_Brand_Guide_Pamyatky.pdf
   Статус: ОРІЄНТОВНІ. Уточнюються по ходу роботи.
   ============================================================ */

:root {
  /* --- Фірмові кольори (з бренд-гайду, не змінювати) --- */
  --sd-blue:        #3049a1;  /* основний: лого, заголовки, структура */
  --sd-orange:      #f06d1f;  /* акцентний: ТІЛЬКИ CTA і тонкі смуги */
  --sd-blue-light:  #4ea8e3;  /* другорядні акценти, розділювачі */
  --sd-periwinkle:  #8895c2;  /* додаткові елементи, приглушений текст */
  --sd-bg-tint:     #f3f4f9;  /* світлий фон секцій */
  --sd-white:       #ffffff;  /* основний фон */
  --sd-red:         #c0392b;  /* поза палітрою. Лише медична тривога. */

  /* --- Похідні (виведені для веба, не з гайду) --- */
  --sd-blue-deep:   #22346f;  /* затемнений синій: hover, футер */
  --sd-orange-deep: #d55c14;  /* hover на акцентних елементах */

  /* Кнопка має власний відтінок: на фірмовому #f06d1f білий текст дає 3.04:1
     і не проходить стандарт. #d55c14 дає 3.91 — достатньо для великого тексту,
     тому кегль кнопки піднято до 19px. Смуги і межі лишаються фірмовими. */
  --sd-cta:         #d55c14;
  --sd-cta-hover:   #b85209;
  --sd-line:        #dfe3ee;  /* межі, лінійки таблиць */
  --sd-line-soft:   #eaedf5;

  /* --- Текст --- */
  --sd-ink:         #1c2333;  /* основний текст. НЕ чорний. */
  --sd-ink-soft:    #4a5468;  /* другорядний текст, підписи */
  --sd-ink-muted:   #626b80;  /* мікротекст. 4.86:1 на тонованому — раніше 3.41, не проходило */

  /* --- Типографіка --- */
  --sd-font-head: 'Montserrat', 'Open Sans', system-ui, -apple-system, sans-serif;
  --sd-font-body: 'Roboto', 'Open Sans', system-ui, -apple-system, sans-serif;

  --sd-w-reg: 400;
  --sd-w-med: 500;
  --sd-w-semi: 600;   /* максимальна вага заголовків. 700+ читається як промо. */

  /* Плинна шкала. clamp(mobile, fluid, desktop) */
  --sd-t-h1:    clamp(1.85rem, 1.35rem + 2.2vw, 3.1rem);
  --sd-t-h2:    clamp(1.38rem, 1.16rem + 0.9vw, 1.9rem);
  --sd-t-h3:    clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --sd-t-lead:  clamp(1.05rem, 1rem    + 0.35vw, 1.25rem);
  --sd-t-body:  clamp(1rem,    0.97rem + 0.15vw, 1.09rem);
  --sd-t-small: 0.925rem;
  --sd-t-micro: 0.82rem;

  --sd-lh-tight: 1.18;   /* H1 */
  --sd-lh-head:  1.28;   /* H2/H3 */
  --sd-lh-body:  1.68;   /* основний текст — навмисно просторо */

  --sd-measure: 68ch;    /* максимальна довжина рядка */

  /* --- Ритм і простір --- */
  --sd-s-1: 0.25rem;  --sd-s-2: 0.5rem;   --sd-s-3: 0.75rem;
  --sd-s-4: 1rem;     --sd-s-5: 1.5rem;   --sd-s-6: 2rem;
  --sd-s-7: 3rem;     --sd-s-8: 4rem;     --sd-s-9: 6rem;

  --sd-section-y: clamp(3.25rem, 2rem + 5vw, 6.5rem);
  --sd-gutter:    clamp(1.15rem, 0.7rem + 2vw, 2rem);
  --sd-maxw:      1120px;
  --sd-maxw-text: 760px;

  /* --- Форма --- */
  --sd-r-sm: 4px;
  --sd-r-md: 8px;
  --sd-r-lg: 14px;
  --sd-border: 1px solid var(--sd-line);

  /* Тіні майже відсутні. Ієрархія — через фон і межу, не через глибину. */
  --sd-shadow-sm: 0 1px 2px rgba(28, 35, 51, 0.05);
  --sd-shadow-md: 0 2px 10px rgba(28, 35, 51, 0.07);

  --sd-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sd-dur: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --sd-dur: 0ms; }
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   Веб-візитка Романа Чередниченка
   Візуальний напрямок: minimalist-ui (див. ../BRAND.md)
   Документ від лікаря, не промо клініки.

   Дизайн-шар узятий готовим, у два кроки, і це навмисно:
   каркас — із лендінга «Дитячий кардіолог» (там уже є варіант
   сторінки без форми заявки, з віджетом запису), а блоки, яких
   там немає, перенесені дослівно з лендінга «нетримання сечі»
   (перемикач мов, числа як обʼєкти, ціни) — розділ «Перенесено»
   в кінці файла. Своїх кольорів і шрифтів тут не зʼявилось:
   METHOD.md крок 2 прямо забороняє переписувати дизайн заново.

   Нове тут одне — сітка компетенцій (.comps) і точки входу
   (.entries). Обидва потрібні саме на візитці й на лендінгах
   не траплялись.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sd-white);
  color: var(--sd-ink);
  font-family: var(--sd-font-body);
  font-size: var(--sd-t-body);
  font-weight: var(--sd-w-reg);
  line-height: var(--sd-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--sd-font-head);
  font-weight: var(--sd-w-semi);
  color: var(--sd-blue);
  line-height: var(--sd-lh-head);
  margin: 0 0 var(--sd-s-4);
  text-wrap: balance;
}
h1 { font-size: var(--sd-t-h1); line-height: var(--sd-lh-tight); letter-spacing: -0.022em; }
h2 { font-size: var(--sd-t-h2); letter-spacing: -0.012em; max-width: 20ch; }
h3 { font-size: var(--sd-t-h3); }

p { margin: 0 0 var(--sd-s-4); max-width: var(--sd-measure); }
p:last-child { margin-bottom: 0; }
strong { font-weight: var(--sd-w-med); color: var(--sd-ink); }
a { color: var(--sd-blue); }

/* --- Каркас --------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--sd-maxw);
  margin-inline: auto;
  padding-inline: var(--sd-gutter);
}
.wrap--text > * { max-width: var(--sd-maxw-text); }
/* ліва межа збігається з рештою сторінки — не центруємо */

section { padding-block: var(--sd-section-y); }
section.tint { background: var(--sd-bg-tint); }

.eyebrow {
  font-family: var(--sd-font-head);
  font-size: var(--sd-t-micro);
  font-weight: var(--sd-w-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-periwinkle);
  margin-bottom: var(--sd-s-3);
}

.lead {
  font-size: var(--sd-t-lead);
  color: var(--sd-ink-soft);
  max-width: var(--sd-measure);
}

.note {
  font-size: var(--sd-t-small);
  color: var(--sd-ink-muted);
  max-width: var(--sd-measure);
}

/* Чотири блоки з помаранчевою лінією — один компонент, одна рамка.
   Були 26ch / 780px / 68ch — читались як з різних дизайнів.
   Кегль лишається різним за роллю, габарит і лінія однакові. */
.summary-line,
.pull,
.intimacy {
  max-width: 720px;
  padding-left: clamp(1rem, 0.5rem + 1.8vw, 1.75rem);
  border-left: 3px solid var(--sd-orange);
}
.summary-line {
  margin-top: var(--sd-s-6);
  font-size: var(--sd-t-lead);
  color: var(--sd-ink);
}

/* --- Кнопки --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sd-s-2);
  font-family: var(--sd-font-head);
  font-size: 1rem;
  font-weight: var(--sd-w-semi);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  padding: 0.95rem 1.6rem;
  border-radius: var(--sd-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--sd-dur) var(--sd-ease),
              border-color var(--sd-dur) var(--sd-ease),
              color var(--sd-dur) var(--sd-ease);
}
.btn--primary { background: var(--sd-cta); color: #fff; font-size: 1.19rem; }
.btn--primary:hover { background: var(--sd-cta-hover); }
.btn--secondary { background: transparent; color: var(--sd-blue); border-color: var(--sd-blue); }
.btn--secondary:hover { background: var(--sd-blue); color: #fff; }
.btn--ghost { background: #fff; color: var(--sd-blue); border-color: var(--sd-line); }
.btn--ghost:hover { border-color: var(--sd-blue); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--sd-blue-light);
  outline-offset: 2px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sd-s-3);
  margin-top: var(--sd-s-6);
}
.btn-row .btn { flex: 1 1 auto; min-width: 250px; }
@media (min-width: 700px) { .btn-row .btn { flex: 0 0 auto; } }

/* --- Екран 1: hero -------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--sd-bg-tint);
  padding-block: clamp(2rem, 1.3rem + 2.6vw, 3.4rem) 0;
}
.hero > .wrap { position: relative; z-index: 1; }

/* Фото від краю до краю — без рамки і без радіуса. */
.hero__media { margin: var(--sd-s-7) 0 0; position: relative; z-index: 1; }
.hero__grid { display: grid; gap: var(--sd-s-7); }
@media (min-width: 1100px) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sd-s-8); align-items: start; }
}
.hero h1 { margin-bottom: var(--sd-s-5); }
.hero__sub { font-size: var(--sd-t-lead); color: var(--sd-ink-soft); }
.hero__micro { margin-top: var(--sd-s-4); font-size: var(--sd-t-small); color: var(--sd-ink-muted); }

.markers {
  list-style: none;
  margin: var(--sd-s-7) 0 0;
  padding: var(--sd-s-5) 0 0;
  border-top: var(--sd-border);
  display: grid;
  gap: var(--sd-s-3);
}
@media (min-width: 640px) { .markers { grid-template-columns: 1fr 1fr; gap: var(--sd-s-3) var(--sd-s-6); } }
.markers li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--sd-t-small);
  color: var(--sd-ink-soft);
  line-height: 1.5;
}
.markers li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sd-blue-light);
}

/* --- Слоти під фото ------------------------------------------- */

.photo-slot {
  border: 1px dashed var(--sd-periwinkle);
  border-radius: var(--sd-r-lg);
  background: var(--sd-bg-tint);
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sd-s-2);
  padding: var(--sd-s-5);
  text-align: center;
  color: var(--sd-periwinkle);
  font-size: var(--sd-t-small);
}
.photo-slot b { font-family: var(--sd-font-head); font-weight: var(--sd-w-semi); color: var(--sd-blue); }
.photo-slot--doctor { aspect-ratio: 1 / 1; max-width: 260px; }
@media (max-width: 1099px) { .photo-slot { aspect-ratio: 3 / 2; } }

/* Кадр з операційної (Екран 5) — смуга на всю ширину, як хіроу.
   Вказівка власника 14.09: «розтягнути по ширині екрана… і дотягнути до
   наступного блоку, щоб не було від нього відступу».

   Тому картинка винесена з `.wrap` у саму секцію, а секція втратила
   нижній відступ (`.section--band-end`). Зверху відступ лишається —
   інакше смуга злипнеться з числами.

   На телефоні показуємо цілий кадр: він і так 16:9, різати нічого.
   Від 700 px смуга стає вужчою, бо на десктопі 16:9 з'їдає весь екран.
   `50% 40%` тримає голови бригади в кадрі: вони лежать у смузі
   y 150…450 з 720, а на зрізі 2.4:1 видно 75…608. */
.op-photo {
  display: block; width: 100%; height: auto;
  object-fit: cover; object-position: 50% 40%;
  background: var(--sd-bg-tint);
  margin-top: var(--sd-section-y);
}
@media (min-width: 700px)  { .op-photo { aspect-ratio: 2.4 / 1; max-height: 52vh; } }
@media (min-width: 1100px) { .op-photo { aspect-ratio: 3 / 1;   max-height: 46vh; } }

/* Секція, що закінчується смугою на всю ширину: нижнього відступу немає,
   смуга впритул до наступного блока. */
.section--band-end { padding-bottom: 0; }

/* --- Мікроблоки ----------------------------------------------- */

.facts { list-style: none; margin: var(--sd-s-7) 0 0; padding: 0; display: grid; gap: var(--sd-s-5); }
@media (min-width: 860px) { .facts { grid-template-columns: repeat(3, 1fr); gap: var(--sd-s-6); } }
.facts li { padding-top: var(--sd-s-4); border-top: 3px solid var(--sd-blue-light); }
.facts b { display: block; font-family: var(--sd-font-head); font-weight: var(--sd-w-semi); color: var(--sd-blue); margin-bottom: var(--sd-s-2); }
.facts span { font-size: var(--sd-t-small); color: var(--sd-ink-soft); }

/* --- Акордеон (Екран 4 і FAQ) --------------------------------- */

.acc { max-width: 820px; border-top: 1px solid var(--sd-line); }
.acc__item { border-bottom: 1px solid var(--sd-line); }
.acc__btn {
  width: 100%;
  display: flex;
  /* По центру рядка, а не по верху: заголовки тут на два-три рядки,
     і плюс, притиснутий до верхнього, читався як загублений. */
  align-items: center;
  justify-content: space-between;
  gap: var(--sd-s-4);
  padding: var(--sd-s-5) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--sd-font-head);
  font-size: var(--sd-t-h3);
  font-weight: var(--sd-w-semi);
  color: var(--sd-blue);
  line-height: var(--sd-lh-head);
}
.acc__btn:hover { color: var(--sd-blue-deep); }
.acc__icon {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  position: relative;   /* margin-top більше не потрібен: вирівнюємо flex-ом */
}
.acc__icon::before, .acc__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--sd-orange);
  transform: translate(-50%, -50%);
  transition: transform var(--sd-dur) var(--sd-ease), opacity var(--sd-dur) var(--sd-ease);
}
.acc__icon::before { width: 14px; height: 2px; }
.acc__icon::after  { width: 2px; height: 14px; }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.acc__panel { display: none; padding-bottom: var(--sd-s-6); }
.acc__panel.is-open { display: block; }
.acc__panel p { color: var(--sd-ink-soft); }
.acc__num {
  display: block;
  font-family: var(--sd-font-body);
  font-size: var(--sd-t-micro);
  font-weight: var(--sd-w-med);
  letter-spacing: 0.06em;
  color: var(--sd-periwinkle);
  margin-bottom: var(--sd-s-1);
  text-transform: uppercase;
}

/* --- Екран 5: кроки ------------------------------------------- */

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; max-width: 820px; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--sd-s-6) var(--sd-s-8);
  border-left: 1px solid var(--sd-line);
}
.steps li:last-child { padding-bottom: 0; border-left-color: transparent; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  transform: translateX(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--sd-blue-light);
  font-family: var(--sd-font-head);
  font-size: 0.9rem;
  font-weight: var(--sd-w-semi);
  color: var(--sd-blue);
}
/* На вузькому екрані кружечок половиною виходив у поле сторінки і майже
   торкався краю, тоді як між лінією і текстом лишалося багато місця.
   Зсуваємо всю колонку вправо і трохи підтягуємо текст до неї. */
@media (max-width: 700px) {
  .steps { padding-left: 22px; }
  .steps li { padding-left: var(--sd-s-6); }
}

.steps b { display: block; font-family: var(--sd-font-head); font-weight: var(--sd-w-semi); color: var(--sd-blue); margin-bottom: var(--sd-s-2); font-size: var(--sd-t-h3); }
.steps p { color: var(--sd-ink-soft); }

/* --- Плашки --------------------------------------------------- */

.plate {
  margin-top: var(--sd-s-7);
  padding: var(--sd-s-5) var(--sd-s-6);
  background: #fff;
  border: var(--sd-border);
  border-left: 3px solid var(--sd-blue-light);
  border-radius: var(--sd-r-md);
  max-width: 820px;
}
.plate--accent { border-left-color: var(--sd-orange); }
.plate dl { margin: 0; display: grid; gap: var(--sd-s-3); }
@media (min-width: 640px) { .plate dl { grid-template-columns: auto 1fr; gap: var(--sd-s-3) var(--sd-s-5); } }
.plate dt { font-weight: var(--sd-w-med); color: var(--sd-ink-soft); font-size: var(--sd-t-small); }
.plate dd { margin: 0; font-family: var(--sd-font-head); font-weight: var(--sd-w-semi); color: var(--sd-blue); }

/* --- Екран 8: лікар ------------------------------------------- */

.doctor { display: grid; gap: var(--sd-s-6); }
@media (min-width: 860px) {
  .doctor { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--sd-s-8); align-items: start; }
}
.doctor__aside { display: flex; flex-direction: column; gap: var(--sd-s-6); }
.doctor__aside h2 { margin: 0; }
.doctor__name { font-family: var(--sd-font-head); font-size: var(--sd-t-h3); font-weight: var(--sd-w-semi); color: var(--sd-blue); line-height: var(--sd-lh-head); margin-bottom: var(--sd-s-3); }
.clinic-list { list-style: none; margin: var(--sd-s-5) 0 0; padding: 0; display: grid; gap: var(--sd-s-3); }
.clinic-list li { position: relative; padding-left: 1.5rem; font-size: var(--sd-t-small); color: var(--sd-ink-soft); }
.clinic-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--sd-blue-light); }

/* --- Футер ---------------------------------------------------- */

/* Верхній відступ футера — 75 % від загального: власник 14.09 попросив
   «зменшити відступ від логотипу до попереднього блоку на 25 %». Було
   64 px, стало 48. Нижній лишається 64 — під логотипом місце потрібне,
   там ще липка кнопка на телефоні. */
.footer { background: var(--sd-bg-tint); padding-block: calc(var(--sd-s-8) * 0.75) var(--sd-s-8); font-size: var(--sd-t-small); color: var(--sd-ink-soft); }
.footer__disclaimer {
  margin-top: var(--sd-s-6); padding-top: var(--sd-s-5);
  border-top: 1px solid var(--sd-line);
  max-width: 840px; font-size: var(--sd-t-micro); line-height: 1.6;
}
.footer__contacts { display: grid; gap: var(--sd-s-2); }
.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* мінімальна ціль дотику */
  padding-right: var(--sd-s-2);
}
.footer__contacts b { font-family: var(--sd-font-head); color: var(--sd-blue); font-weight: var(--sd-w-semi); }
.footer a { color: var(--sd-blue); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* --- Липка мобільна кнопка ------------------------------------ */

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: none;
  gap: var(--sd-s-2);
  padding: var(--sd-s-3) var(--sd-gutter) calc(var(--sd-s-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,0.97);
  border-top: 1px solid var(--sd-line);
  backdrop-filter: blur(6px);
}
.sticky-cta .btn { flex: 1 1 0; padding-inline: var(--sd-s-3); font-size: 0.95rem; }
.sticky-cta .btn--ghost { flex: 0 0 auto; }
body.show-sticky .sticky-cta { display: flex; }
@media (min-width: 780px) { .sticky-cta { display: none !important; } }
@media (max-width: 779px) { body.show-sticky { padding-bottom: 4.75rem; } }

/* --- Маркер незаповнених полів (тільки dev) -------------------- */

.fill {
  font-style: normal;
  padding: 0.1em 0.45em;
  border-radius: var(--sd-r-sm);
  background: rgba(155, 60, 190, 0.1);
  border: 1px dashed #9b3cbe;
  color: #7a2d96;
  font-size: 0.92em;
  font-family: var(--sd-font-body);
  /* довгі маркери мають переноситись, інакше вони розпирають мобільний layout */
  overflow-wrap: anywhere;
}
body:not(.dev) .fill { background: transparent; border-color: transparent; color: inherit; }

.dev-badge {
  position: fixed;
  right: 12px; bottom: 12px;
  z-index: 60;
  display: none;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: #7a2d96;
  color: #fff;
  font-family: var(--sd-font-head);
  font-size: 0.78rem;
  font-weight: var(--sd-w-semi);
  box-shadow: var(--sd-shadow-md);
  cursor: pointer;
  border: 0;
}
body.dev .dev-badge { display: block; }
@media (max-width: 779px) { body.dev.show-sticky .dev-badge { bottom: 5.25rem; } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--sd-blue); color: #fff; padding: var(--sd-s-3) var(--sd-s-5);
}
.skip-link:focus { left: 0; }

/* --- Фото лікаря (Екран 8) ------------------------------------- */

.doctor__photo {
  display: block;
  width: 100%;
  height: auto;          /* інакше атрибут height="780" перебиває aspect-ratio */
  max-width: 260px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: var(--sd-r-lg);
  background: var(--sd-bg-tint);
}

/* --- Герой без фото: одна колонка ------------------------------ */

@media (min-width: 1100px) {
  .hero__grid--solo { grid-template-columns: minmax(0, 760px); }
}

/* --- Фото першого екрана ---------------------------------------
   Широка смуга під текстом. Кадр горизонтальний — не втискаємо
   його в колонку, бо тоді з нього зникає сама консультація.
   ---------------------------------------------------------------- */

.hero__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: 0;
  background: var(--sd-bg-tint);
}
@media (min-width: 700px)  { .hero__photo { aspect-ratio: 2 / 1; } }
@media (min-width: 1100px) { .hero__photo { aspect-ratio: 2.4 / 1; } }

/* ==============================================================
   DESIGN v2 — оформлення змісту і рух
   Принцип: ворог не оформлення, а сигнали продажу.
   Нічого з градієнтів, світінь, pill-кнопок і терміновості.
   ============================================================== */

/* --- Виносна цитата --------------------------------------------
   Ударні рядки зараз тонуть в абзацах. Тут вони стоять окремо.
   ---------------------------------------------------------------- */

.pull {
  margin: var(--sd-s-7) 0 var(--sd-s-6);
  font-family: var(--sd-font-head);
  font-weight: var(--sd-w-med);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.65rem);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--sd-blue);
  text-wrap: balance;
}
.bridge p.pull {
  border-left-color: #fff;
  max-width: 22ch;
  color: #fff;
  max-width: 22ch;
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.65rem);
  font-family: var(--sd-font-head);
  font-weight: var(--sd-w-med);
  line-height: 1.35;
}

/* --- Маркери списків: прибираємо дефолтні сині крапки ----------- */

.markers li::before,
.clinic-list li::before {
  content: "";
  top: 0.72em;
  width: 14px;
  height: 1px;
  border-radius: 0;
  background: var(--sd-orange);
}
.markers li, .clinic-list li { padding-left: 1.6rem; }

.facts li { border-top-width: 2px; }
.facts b { font-size: var(--sd-t-h3); letter-spacing: -0.01em; }

/* --- Шапка -----------------------------------------------------
   Формат узятий із stardoctor.com.ua: великий логотип і телефон
   16px/600 у фірмовому синьому. Меню і кнопки немає свідомо —
   лендінг не має куди відводити увагу, а всі шість CTA вже
   розставлені за розділом 20.3 ТЗ.
   ---------------------------------------------------------------- */

.topbar {
  background: var(--sd-white);
  border-bottom: 1px solid var(--sd-line);
  position: relative;
  z-index: 10;
}
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sd-s-4);
  padding-block: clamp(0.85rem, 0.5rem + 1.5vw, 1.6rem);
}
/* Логотип у шапці — посилання на головну сайту клініки. Правило власника
   14.09 для всіх наших лендінгів: людина звикла, що знак у шапці клікається,
   і якщо він не веде нікуди — сторінка читається як глухий кут. Мова
   збігається зі сторінкою: з української версії на /ua/, з російської на /ru/. */
.topbar__home { display: inline-flex; align-items: center; text-decoration: none; }

.topbar__logo {
  display: block;
  width: auto;
  height: clamp(52px, 40px + 3vw, 88px);
  flex: 0 0 auto;
}
.topbar__right {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.3rem + 1.6vw, 1.75rem);
}
.topbar__tel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-height: 44px;              /* мінімальна ціль дотику */
  padding: 4px 2px;
  text-decoration: none;
  white-space: nowrap;
}
.topbar__tel span {
  font-size: var(--sd-t-micro);
  color: var(--sd-ink-muted);
}
.topbar__tel b {
  font-family: var(--sd-font-head);
  font-weight: var(--sd-w-semi);
  font-size: 1rem;                 /* 16px — як на основному сайті */
  color: var(--sd-blue);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.topbar__tel:hover b { color: var(--sd-orange-deep); }

/* Планшет: підпис над телефоном зникає, лишається номер */
@media (max-width: 900px) {
  .topbar__tel span { display: none; }
}
@media (max-width: 620px) {
  .topbar__tel b { font-size: 1.02rem; }
}

/* --- Логотип у футері ------------------------------------------
   Той самий розмір, що й у шапці. У синьому блоці логотипа немає:
   два знаки на два сусідні блоки читались як повтор.
   ---------------------------------------------------------------- */

/* Порядок у футері, перебрано 14.09 на зауваження власника «виглядає
   хаотично». Було: довгий дисклеймер згори, під ним контакти, а логотип
   із поштою збоку — три різні блоки без спільної осі, на телефоні це
   читалось як звалище.

   Стало: логотип і контакти в один вузол (логотип — підпис, контакти —
   зміст), телефони й пошта в рядки, дисклеймер останнім, бо це дрібний
   шрифт юридичного характеру, а не те, з чого читають футер.
   Instagram звідси прибраний — соцмережі переїхали на екран 7. */

.footer__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sd-s-6);
  row-gap: var(--sd-s-4);
}

/* На широкому екрані логотип і контакти стояли за 32 px один від одного і
   читались як один злиплий блок. Власник 14.09: «розведи логотип із
   адресою й телефонами трохи по горизонталі». Ставимо проміжок, що росте
   з шириною: 56 px на 1024, 72 на 1440, 88 на 1920 — але не більше, бо далі
   контакти відриваються від знака і перестають читатись як один підпис.
   На вузькому екрані вони стоять один під одним, і це правило не діє. */
@media (min-width: 520px) {
  .footer__grid { column-gap: clamp(56px, 24px + 3.3vw, 88px); }
}

/* Телефони й пошта з сайтом: в рядок, поки вміщаються, далі переносяться
   самі. Роздільник-крапка не потрібен — місце розділяє їх краще, а на
   переносі крапка зависала в кінці рядка. */
.footer__row { display: flex; flex-wrap: wrap; column-gap: var(--sd-s-6); }

/* Вузький екран: логотип стає над контактами, на всю ширину колонки.
   Поруч він тут не тримається — 68px логотипа плюс адреса в рядок
   лишають адресі 140px і рвуть її на чотири рядки. */
@media (max-width: 519px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  /* Логотип у футері теж веде на головну сайту — правило власника 14.09,
   те саме, що для шапки. Базове `.footer a` дає посиланням 44 px висоти
   й відступ справа; для знака вони зайві, тому знімаємо. */
.footer__home { display: inline-flex; padding: 0; min-height: 0; }

.footer__logo { justify-self: start; }
}

.footer__logo {
  display: block;
  width: auto;
  /* Збільшено 14.09 на зауваження власника: «на всіх екранах логотип
     треба збільшувати — і на ноутбуках, і на фулскрін він дуже дрібний».
     Було clamp(52px, 40px + 3vw, 88px) — рівно як у шапці, і в футері це
     читалось як службова іконка, а не як підпис під сторінкою. Тепер це
     власний розмір: 96 px на 768, 122 на 1440, 140 на 1920. У шапці
     розмір не чіпався — там знак стоїть у рядку з телефоном і кнопкою. */
  /* Множник до початкового розміру — рівно 1.85 на всіх ширинах.
     Було clamp(52px, 40px + 3vw, 88px); 52×1.85=96, 40×1.85=74,
     3vw×1.85=5.55vw, 88×1.85=163. Власник 14.09: «збільш ще, тільки
     симетрично по всіх екранах — від початкового рівня однаково».
     Перша спроба цього не дала: на ноутбуці вийшло ×1.47, на телефоні
     ×1.69. Тепер множник один, і будь-яка наступна зміна робиться так
     само — правимо множник, а не окремі значення. */
  height: clamp(96px, 74px + 5.55vw, 163px);
}

/* Логотип у футері більший за той, що в шапці: там він службовий знак
   поруч із телефоном, тут — підпис під сторінкою. Поруч із ним стоїть
   блок із двох посилань висотою 88px (по 44 на зону дотику, менше не
   можна), і дрібний логотип на цьому тлі губився. */
/* Логотип у футері на вузькому екрані, збільшено 14.09 на зауваження
   власника «на мобільних він виглядає дуже мілко». Після перебирання
   футера він стоїть окремим рядком на всю ширину колонки, тож місце є:
   висоту задаємо не в пікселях, а часткою ширини — 210 px або 58 %
   колонки, що менше. На iPhone 15 це 112 px замість 68. */
/* На вузькому екрані початковий розмір був 68 px; 68×1.85 = 126. Задаємо
   висотою, а не часткою ширини — інакше множник з'їжджає разом із шириною
   екрана і симетрія знову ламається. */
@media (max-width: 699px) {
  .footer__logo { height: 126px; width: auto; }
}



/* --- Вузький екран: шапка ---------------------------------------
   Перенесено з першого лендінга. Логотип, телефон і відступи разом
   давали більше, ніж є на 320 px, і сторінка їхала горизонтально.
   Тиснемо відступи й лого; номер лишається на місці.
   ---------------------------------------------------------------- */

@media (max-width: 400px) {
  .topbar__in    { gap: 0.5rem; }
  .topbar__right { gap: 0.5rem; }
  .topbar__logo  { height: 46px; }
  .topbar__tel b { font-size: 0.92rem; }   /* номер — найширший елемент рядка */
}

/* ==============================================================
   Своє для цього лендінга
   ============================================================== */

/* --- Списки через тире -----------------------------------------
   Тире, а не галочки: галочки читаються як рекламний шаблон.
   Вимога ТЗ, екран 2.
   ---------------------------------------------------------------- */

.dash { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.dash li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: var(--sd-s-4);
  font-size: var(--sd-t-lead);
  color: var(--sd-ink-soft);
}
.dash li::before { content: "—"; position: absolute; left: 0; color: var(--sd-orange); }
.dash li:last-child { margin-bottom: 0; }
.dash li strong { color: var(--sd-ink); }

/* --- Схема «один лікар замість двох» ---------------------------
   Мінімалістично, без інфографічного шуму — вимога ТЗ, екран 5.
   ---------------------------------------------------------------- */

.scheme {
  margin: var(--sd-s-6) 0;
  padding: var(--sd-s-5) clamp(1rem, 0.5rem + 1.8vw, 1.75rem);
  background: var(--sd-bg-tint);
  border-radius: var(--sd-r-lg);
  max-width: 720px;
}
.scheme__row {
  font-family: var(--sd-font-head);
  font-size: var(--sd-t-lead);
  margin-bottom: var(--sd-s-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45em;
  color: var(--sd-ink-soft);
}
.scheme__row:last-child { margin-bottom: 0; }
.scheme__row--ours { color: var(--sd-blue); font-weight: var(--sd-w-semi); }
.scheme__cap {
  font-family: var(--sd-font-body);
  font-size: var(--sd-t-micro);
  font-weight: var(--sd-w-reg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sd-periwinkle);
  min-width: 5.5em;
}
.scheme__arr { color: var(--sd-orange); }

/* --- Екран 6: лікар --------------------------------------------- */

.doctor__role {
  font-family: var(--sd-font-head);
  font-weight: var(--sd-w-med);
  color: var(--sd-orange-deep);
  margin-bottom: var(--sd-s-5);
}
.quote {
  max-width: 720px;
  padding-left: clamp(1rem, 0.5rem + 1.8vw, 1.75rem);
  border-left: 3px solid var(--sd-line);
  color: var(--sd-ink-soft);
  font-style: italic;
}
.link-arrow { font-weight: var(--sd-w-med); text-decoration: none; }
.link-arrow::before { content: "\2192\00a0"; color: var(--sd-orange); }
.link-arrow:hover { text-decoration: underline; }

/* --- Екран 9: ціна ----------------------------------------------
   Ціна одним крупним числом. «Від» і діапазони заборонені ТЗ.
   ---------------------------------------------------------------- */

.price-line { font-size: var(--sd-t-lead); color: var(--sd-ink-soft); }
.price-alt { color: var(--sd-ink-muted); font-size: var(--sd-t-small); }

/* --- Екран 13: відгуки ------------------------------------------ */

.review {
  max-width: 720px;
  padding-left: clamp(1rem, 0.5rem + 1.8vw, 1.75rem);
  border-left: 3px solid var(--sd-orange);
  font-size: var(--sd-t-lead);
  color: var(--sd-ink-soft);
}

/* --- Екран 14: фінальний CTA ------------------------------------ */

.cta-final__price { font-size: var(--sd-t-lead); margin-top: var(--sd-s-4); }
.cta-final__price b { font-family: var(--sd-font-head); font-size: 1.3em; color: var(--sd-blue); }
.cta-final__alt { margin-top: var(--sd-s-5); color: var(--sd-ink-muted); font-size: var(--sd-t-small); }
.cta-final__alt a { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 0.35em; }

/* --- Плашка ціни на першому екрані ------------------------------ */

.plate--price b { font-family: var(--sd-font-head); font-size: 1.35em; color: var(--sd-blue); }

/* --- Поки адреса запису не заведена ------------------------------
   Кнопка не вдає, що працює: /booking/ без doc_id мовчки перекидає
   на головну, і це виглядало б як робоча кнопка, що з'їдає трафік.
   ---------------------------------------------------------------- */

/* Кнопку НЕ приглушуємо: приглушений помаранчевий читається як інший
   колір, а не як «ще не підключено», і збиває з пантелику на перегляді
   дизайну. Клік усе одно заблокований, а поруч стоїть dev-примітка. */
[data-book][aria-disabled="true"] { cursor: not-allowed; }
.dev-note { display: none; }
body.dev .dev-note {
  display: block;
  margin-top: var(--sd-s-3);
  font-size: var(--sd-t-micro);
  color: #7a2d96;
}

/* --- Акордеон: мʼяке розгортання замість ривка ------------------ */

.acc__panel {
  display: block;
  overflow: hidden;
  height: 0;
  opacity: 0;
  padding-bottom: 0;
  /* Нижній відступ НЕ анімуємо разом із висотою.

     Він 32px, а відповіді тут бувають в один рядок — «Ні.» це ~29px.
     Коли відступ росте 0 -> 32 одночасно з висотою, на короткій панелі
     він більший за сам вміст, і два переходи тягнуть коробку в різні
     боки: рух виходить рваний. Ставимо відступ одразу, анімуємо саму
     висоту — вона вже рахується разом із ним.

     На першому лендінгу цього не видно: там найкоротша відповідь на
     134 символи, відступ на її тлі непомітний. Дефект той самий. */
  transition: height 360ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 280ms var(--sd-ease);
}
.acc__panel.is-open { opacity: 1; padding-bottom: var(--sd-s-6); }
.acc__btn { transition: color var(--sd-dur) var(--sd-ease); }
.acc__icon::before, .acc__icon::after { transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 280ms var(--sd-ease); }

/* --- Коли система просить прибрати рух --------------------------
   Розгортання стає миттєвим. Без цього блока людина з увімкненим
   «зменшити рух» отримує саме те, від чого захищалась.
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .acc__panel { transition: none !important; }
}


/* ==============================================================
   ПЕРЕНЕСЕНО з лендінга «нетримання сечі» — дослівно
   Не правити тут: якщо блок міняється, він міняється в обох
   місцях, інакше дизайн двох сторінок мовчки розійдеться.
   ============================================================== */

/* --- Перемикач мов --------------------------------------------- */

.topbar__lang {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: clamp(0.7rem, 0.3rem + 1.2vw, 1.25rem);
  border-left: 1px solid var(--sd-line);
  align-self: stretch;
  justify-content: center;
}
.topbar__lang-item {
  font-family: var(--sd-font-head);
  font-size: 0.82rem;
  font-weight: var(--sd-w-semi);
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-decoration: none;
  transition: color var(--sd-dur) var(--sd-ease);
}
.topbar__lang-item.is-on  { color: var(--sd-blue); }
/* Ціль дотику: сам напис лише 21×17px. Padding розширює зону натискання
   до мінімуму WCAG 2.2 (24×24), відʼємний margin лишає розкладку тією ж. */
.topbar__lang-item { padding: 5px 7px; margin: -5px 0 -5px -7px; }
.topbar__lang-item.is-off { color: var(--sd-periwinkle); cursor: default; }
a.topbar__lang-item:hover { color: var(--sd-orange-deep); }

@media (max-width: 400px) {
  .topbar__in   { gap: 0.5rem; }
  .topbar__right{ gap: 0.5rem; }
  .topbar__logo { height: 46px; }
  .topbar__lang { padding-left: 0.5rem; }
  .topbar__tel b{ font-size: 0.92rem; }
}

/* --- Числа як обʼєкти ------------------------------------------ */

.stats {
  display: grid;
  gap: var(--sd-s-5);
  margin-top: var(--sd-s-6);
  padding-top: var(--sd-s-5);
  border-top: 1px solid var(--sd-line);
}
@media (min-width: 520px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sd-s-6); } }
.stat__num {
  display: flex;
  align-items: center;
  gap: 0.1em;
  font-family: var(--sd-font-head);
  font-weight: var(--sd-w-semi);
  font-size: clamp(2.4rem, 1.7rem + 3vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sd-blue);
  font-variant-numeric: tabular-nums;
}
.stat__num small { font-size: 0.42em; font-weight: var(--sd-w-med); letter-spacing: 0; color: var(--sd-periwinkle); line-height: 1; }
.stat__cap { display: block; margin-top: var(--sd-s-2); font-size: var(--sd-t-small); color: var(--sd-ink-soft); line-height: 1.45; max-width: 26ch; }
@media (max-width: 519px) {
  .stats { text-align: center; }
  .stat__num { justify-content: center; }
  .stat__cap { max-width: 30ch; margin-left: auto; margin-right: auto; }
}

/* --- Ціна одним рядком ----------------------------------------- */

.prices { display: grid; gap: 1px; background: var(--sd-line); border: 1px solid var(--sd-line); border-radius: var(--sd-r-lg); overflow: hidden; margin-top: var(--sd-s-6); }
/* ⚠️ Проміжок між рядками — `--sd-s-2`, і чіпати його не треба. Спершу я
   зрівняв його з нижнім відступом блока, вирішивши, що прохання власника
   про «однаково зверху і знизу» стосується й телефона. Не стосувалось:
   він мав на увазі десктоп, а мобільний вигляд його влаштовував. Правку
   скасовано 14.09 його ж словами: «поверни на мобільних, як було, моя
   правка стосувалася веб». Урок: правка, названа на одному екрані, на
   інші сама не поширюється. */
.price-row { background: #fff; padding: var(--sd-s-5) var(--sd-s-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sd-s-2) var(--sd-s-5); }
/* `center`, а не `baseline`: підпис має три рядки, число — один, і при
   вирівнюванні по базовій лінії воно чіплялось за перший рядок підпису й
   висіло вгорі блока (виміряно на 1440: 21 px над числом, 81 під ним).
   Власник 14.09: «цифру 1200 вирівняй по середині цього блоку». */
.price-row--key { background: var(--sd-bg-tint); }
.price-row__label { font-size: var(--sd-t-body); color: var(--sd-ink); max-width: 34ch; }
.price-row__label small { display: block; font-size: var(--sd-t-small); color: var(--sd-ink-muted); margin-top: .15rem; }
.price-row__val {
  font-family: var(--sd-font-head);
  font-weight: var(--sd-w-semi);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--sd-blue);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.price-row__val span { font-size: 0.5em; font-weight: var(--sd-w-med); color: var(--sd-periwinkle); margin-left: .2em; letter-spacing: 0; }

/* ==============================================================
   НОВЕ — тільки для візитки
   ============================================================== */

/* --- Підпис під імʼям ------------------------------------------
   Рубаний рядок із чотирьох слів. Кегль між H1 і лідом: він не
   заголовок, але й не звичайний текст — це те, ким людина є.
   ---------------------------------------------------------------- */

.hero__role {
  margin: calc(-1 * var(--sd-s-3)) 0 var(--sd-s-5);
  font-family: var(--sd-font-head);
  font-weight: var(--sd-w-med);
  font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.4rem);
  line-height: 1.35;
  color: var(--sd-ink-soft);
  letter-spacing: -0.005em;
  max-width: none;
}
.hero__role b { font-weight: var(--sd-w-med); color: var(--sd-blue); }

/* --- Сітка компетенцій -----------------------------------------
   Дві ролі в одному блоці: назвати, з чим до нього приходять,
   і роздати трафік на лендінги напрямків.

   Головне правило — картка без лендінга не має виглядати як
   посилання, що зламалось. Тому обидва стани оформлені: у першої
   є рядок «Детальніше», у другої — «Записатися». Урок лендінга
   дитячої кардіології: робоча на вигляд кнопка, що веде в нікуди,
   гірша за її відсутність.
   ---------------------------------------------------------------- */

.comps {
  list-style: none;
  margin: var(--sd-s-7) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--sd-line);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-r-lg);
  overflow: hidden;
}
@media (min-width: 700px)  { .comps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .comps { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.comp {
  background: #fff;
  padding: var(--sd-s-6);
  display: flex;
  flex-direction: column;
  gap: var(--sd-s-3);
}
.comp h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.comp p  { margin: 0; font-size: var(--sd-t-small); color: var(--sd-ink-soft); line-height: 1.5; max-width: 34ch; }

/* Дія притискається до низу картки, щоб у сусідніх карток вона
   стояла на одній лінії навіть при різній довжині опису. */
.comp__act { margin-top: auto; padding-top: var(--sd-s-3); font-size: var(--sd-t-small); font-weight: var(--sd-w-med); }
.comp__act a { text-decoration: none; border-bottom: 1px solid var(--sd-blue-light); padding-bottom: 1px; }
.comp__act a:hover { color: var(--sd-orange-deep); border-bottom-color: var(--sd-orange-deep); }
/* Ціль дотику 44px: сам рядок посилання нижчий, розширюємо всередину. */
.comp__act a { display: inline-block; padding-block: 11px; }

/* Картка з живим лендінгом — тонка синя смуга зліва. Єдина
   відмінність в оформленні: решта тримається на тексті дії. */
.comp--linked { border-left: 3px solid var(--sd-blue-light); }
.comp--soon .comp__act { color: var(--sd-ink-muted); }

/* --- Точки входу у фіналі --------------------------------------
   Кнопка запису — головна, ці три — для інших станів людини.
   Вони свідомо не кнопки: рядки з межею. Три однакові кнопки
   поруч знищили б ієрархію, за яку весь розділ 4 ТЗ і бився.
   ---------------------------------------------------------------- */

.entries { margin-top: var(--sd-s-7); padding-top: var(--sd-s-5); border-top: 1px solid var(--sd-line); display: grid; gap: var(--sd-s-5); }
@media (min-width: 860px) { .entries { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sd-s-6); } }
.entry b { display: block; font-family: var(--sd-font-head); font-weight: var(--sd-w-semi); color: var(--sd-blue); font-size: 1.02rem; margin-bottom: var(--sd-s-2); }
.entry span { display: block; font-size: var(--sd-t-small); color: var(--sd-ink-soft); line-height: 1.5; }
.entry a { display: inline-block; margin-top: var(--sd-s-3); padding-block: 11px; font-weight: var(--sd-w-med); text-decoration: none; border-bottom: 1px solid var(--sd-blue-light); }
.entry a:hover { color: var(--sd-orange-deep); border-bottom-color: var(--sd-orange-deep); }
.entry--note { font-size: var(--sd-t-small); color: var(--sd-ink-muted); margin-top: var(--sd-s-3); }
/* Ряд посилань у точці входу (месенджери, соцмережі). Крапки-роздільники
   прибрані: на вузькому екрані остання крапка зависала в кінці рядка, коли
   наступне посилання переносилось. Місце розділяє їх не гірше. */
/* Ряд значків у точці входу (месенджери, соцмережі). Написи замінені
   контурами Simple Icons (CC0), вшитими в сторінку: жодного зовнішнього
   запиту, жодного шрифту зі значками. Вказівка власника 14.09: «замість
   написів поставити значки, характерні і впізнавані».

   Значок один колір — фірмовий синій, а не рідні кольори мереж: сім
   різнокольорових плям у медичному блоці перетягують увагу на себе з
   кнопки запису. Форма і так упізнавана. Під пальцем — 44 px, як і в
   решти посилань; сам знак 26. Підпис для читалок лишається в aria-label. */
.entry__links { display: flex; flex-wrap: wrap; gap: var(--sd-s-2); }
/* Номер у точці входу — окремим рядком і посиланням на звичайний дзвінок
   (вказівка власника 14.09). Підпис «Viber або WhatsApp, один номер:»
   лишається текстом над ним. */
.entry__tel { font-size: var(--sd-t-body); }
.entry__links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border-bottom: 0; border-radius: var(--sd-r-sm, 8px);
  color: var(--sd-blue);
}
.entry__links a:hover { color: var(--sd-orange-deep); background: rgba(0,0,0,0.03); }
.entry__links .ico { width: 26px; height: 26px; fill: currentColor; display: block; }

/* У вузькій колонці десктопа п'ять значків не вміщались в один рядок, і
   YouTube зіскакував униз. Колонка виміряна — 232 px, тож на десктопі
   рамка 42 px і проміжок 4: 5×42 + 4×4 = 226. На телефоні лишається 44,
   там ширини вистачає і палець важливіший. */
@media (min-width: 700px) {
  .entry__links { gap: 4px; }
  .entry__links a { width: 42px; height: 42px; }
}


/* Три числа замість двох: на середньому екрані два стовпці лишають
   третє число самотнім у порожньому рядку. */
@media (min-width: 860px) { .stats--three { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Три числа в два стовпці лишали третє саме в порожньому рядку — власник
   14.09: «на телефоні цифри виглядають невпорядкованими». Виміряно: у
   смузі 520–859 px саме так і було. Ставимо їх стовпчиком по центру —
   як уже зроблено на вузькому екрані. У горизонт три числа тут не йдуть:
   підпис «вищі кваліфікаційні категорії…» у колонці 190 px розсипається
   на шість рядків. */
/* Числа на одній лінії, від 860 px ---------------------------------
   У середнього числа над ним стоїть приставка «понад», тому воно з'їжджало
   нижче за сусідів, а підписи під числами розходились на три рівні.
   Власник 14.09: «цифри на веб-версії на різних рівнях, треба вирівняти
   по одній горизонтальній лінії».

   Рахунок висоти блока з приставкою: приставка 0.42em × міжрядок 1.1 плюс
   0.06em відступу під нею плюс саме число з line-height 1 — разом 1.52em.
   Ставимо цю висоту всім трьом і притискаємо вміст до низу: числа сідають
   на одну лінію, підписи під ними теж. Одиниця em тут — кегль самого
   числа, тож при зміні його розміру рахунок не ламається. */
@media (min-width: 860px) {
  .stats--three .stat__num { min-height: 1.52em; align-items: flex-end; }
  /* ⚠️ Блок із приставкою — колонковий, і в ньому `align-items` керує
     ГОРИЗОНТАЛЛЮ. Моє правило вище (специфічність 0,2,0) перебивало
     `align-items: flex-start` самого `.stat__num--stacked` (0,1,0), і число
     «200» їхало до правого краю колонки, налазячи на сусіднє. Тому тут
     горизонталь повертаємо явно, а низ тримаємо `justify-content`, який у
     колонці і є вертикаллю. Спіймано на бойовій російській версії 14.09. */
  .stats--three .stat__num--stacked { align-items: flex-start; justify-content: flex-end; }
}

@media (max-width: 859px) {
  .stats--three { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .stats--three .stat__num { justify-content: center; }
  .stats--three .stat__num--stacked { align-items: center; }
  .stats--three .stat__cap { max-width: 30ch; margin-left: auto; margin-right: auto; }
}

/* Блок лікаря з фото праворуч. Без цього перший елемент розмітки падає
   у вузьку колонку 320px — а на екрані 5 у ній має бути фото, не текст. */
@media (min-width: 860px) {
  .doctor--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
}

/* --- Виправлення, знайдене на цій сторінці ----------------------
   На 320 px сторінка їхала горизонтально на 12 px. Винуватець не в
   новій розмітці: у футері адреса пошти стоїть у вузькій колонці
   поруч із логотипом (139 px), а в ній немає жодного місця для
   переносу — 168 px тексту вилітали за край.

   ⚠️ Це успадкована вада спільного футера, а не наша: те саме
   виміряно на бойовому лендінгу «нетримання сечі» (12 px) і на
   лендінгу дитячої кардіології (18 px). Там не чіпали — правка
   живої сторінки це окреме рішення власника. Тут виправлено.
   ---------------------------------------------------------------- */

@media (max-width: 699px) {
  .footer__web a { overflow-wrap: anywhere; }
}

/* --- Ціль дотику для посилання на бота --------------------------
   Це не випадкове посилання в тексті, а точка входу: та, хто не
   зрозуміла, з чим саме до лікаря, іде саме сюди. Рядок мав 20 px
   висоти. Паддінг росте всередину рядка і розкладку не змінює —
   той самий прийом, що на перемикачі мов.
   ---------------------------------------------------------------- */

.summary-line a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}

/* --- Хіроу, у якому фото стоїть першим -------------------------
   На лендінгах фото — смуга під текстом: там людина спершу читає
   заголовок про свою проблему. На візитці навпаки: вона прийшла по
   імені й спершу дивиться, хто це. Тому кадр іде до тексту, а підпис
   («Роман Чередниченко» і чотири слова про фах) — під ним.
   ---------------------------------------------------------------- */

.hero--photofirst { padding-block: 0 clamp(2rem, 1.3rem + 2.6vw, 3.4rem); }
.hero--photofirst .hero__media { margin: 0 0 clamp(1.6rem, 1rem + 2vw, 2.6rem); }

/* --- Глибина смуги на широкому екрані --------------------------
   Виміряно: на 1440×900 смуга 2.4:1 має 600 px висоти, і тоді імʼя
   лежить на 811 px, а кнопка — за згином. На першому екрані ноутбука
   лишалось одне фото без підпису й без дії.

   Тому на широкому кадр стає ще ширшим (3.2:1) і додатково обмежений
   часткою вікна: на низькому вікні ноутбука висота вікна вирішує, а
   не пропорція. Мобільного це не торкається — там 16:9 і все вміщається.

   **46vh → 54vh, 13.09.** Вказівка власника на портретному кадрі: «Давай
   добавим немножко высоты этому блоку фото, потому что обрезает там
   практически под подбородок». На 46vh так і було — на 1920×945 під
   підборіддям лишалось 12 px джерела.

   Того ж дня він це скасував («я принял неправильное решение… открывать
   мою визитку чаще всего будут на телефоне») — і того ж дня повернув, коли
   зʼясувалось, що **цей рядок телефона не чіпає взагалі**. Порогів три, вони
   незалежні: телефон — `aspect-ratio: 16/9` без жодного `max-height`,
   планшет — 2:1 і 52vh, десктоп — 3.2:1 і ці 54vh. Правка в одному порозі
   фізично не може змінити інший.

   ⚠️ Тому: хочемо нижчу смугу **на телефоні** — міняти `aspect-ratio` нижче
   699 px, а не ці `vh`. Переплутати легко, ціна — два скасовані рішення.

   54vh — стеля, знята вимірюванням (смуга · під підборіддям · низ імʼя):
   1280×720 — 389 css · +145 px · 654 з 720; 1440×760 — 410 · +113 · 680 з
   760; 1440×900 — 450 · +160 · 720 з 900; 1920×945 — 510 · +80 · 785 з 945.
   Вище не можна: на 62vh на 1440×760 за згин іде рядок фаху. Кнопка з хіроу
   за згином і на 46vh — саме тому від 780 px є кнопка в шапці.
   ---------------------------------------------------------------- */

@media (min-width: 700px)  { .hero--photofirst .hero__photo { max-height: 52vh; } }
@media (min-width: 1100px) { .hero--photofirst .hero__photo { aspect-ratio: 3.2 / 1; max-height: 54vh; } }

/* --- Кнопка запису в шапці, тільки від 780 px ------------------
   Причина не косметична. На ноутбуці широка смуга фото займає весь
   перший екран, і кнопка з хіроу лишається за згином — виміряно на
   1280×720, 1440×760 і 1440×900. На мобільному цю роль виконує липка
   кнопка, але вона свідомо зникає від 780 px, і від цієї межі й вище
   на першому екрані не лишалось жодної дії.

   Нижче 780 px кнопки в шапці немає: на 320 px логотип, телефон і
   перемикач мов уже дають 345 px при 320 доступних (перевірено на
   першому лендінгу), і четвертий елемент поклав би рядок.
   ---------------------------------------------------------------- */

.topbar__book { display: none; }
@media (min-width: 780px) {
  .topbar__book {
    display: inline-flex;
    padding: 0.7rem 1.15rem;
    font-size: 0.95rem;
    min-height: 44px;
  }
}

/* --- Число з приставкою над ним ---------------------------------
   «понад 200»: коли приставка стоїть зліва, вона зміщує саме число
   з центру колонки, і на мобільному, де числа центруються, це
   читається як зʼїхала верстка. Ставимо її над числом — число
   лишається в центрі своєї колонки, приставка над ним.
   ---------------------------------------------------------------- */

.stat__num--stacked { flex-direction: column; align-items: flex-start; gap: 0; }
.stat__num--stacked small { line-height: 1.1; margin-bottom: 0.06em; }
@media (max-width: 519px) { .stat__num--stacked { align-items: center; } }

/* --- Портрет у блоці «Дбайлива гінекологія» ---------------------
   Був обмежений 260 px усередині своєї колонки — і через це висів
   ліворуч із порожнечею праворуч, ніби зʼїхав. Особливо помітно на
   телефоні, де колонка на всю ширину екрана.

   Тепер портрет займає колонку цілком, і його ліва й права межі
   збігаються із заголовком над ним. Заголовок лишається вирівняним
   по лівому краю — центрування ламає ритм сторінки (BRAND.md).
   ---------------------------------------------------------------- */

.doctor__aside .doctor__photo { max-width: 100%; }

/* --- Точка кропу під кадр власника ------------------------------
   Кадр 13.09 — портрет великим планом: у файлі 2200×1108 від верху
   волосся (y=150) до підборіддя (y=620) іде 470 px, майже половина
   висоти. Смуга на десктопі вужча, ніж здається: `max-height: 46vh`
   спрацьовує раніше за пропорцію 3.2:1 майже на кожному вікні, тому
   видно не 62 % кадру, а скільки дасть вікно — 569 px джерела на
   будь-якому 16:9, 632 px на 1440×900 і лише 498 px на 1920×945
   (браузер на весь екран 1080p). Голова займає майже всю смугу.

   Тому 15 %, підібрані під попередній кадр, тут зрізали підборіддя:
   −3 px на 1512×790 і −27 px на 1920×945 (виміряно Playwright 13.09,
   верх голови й підборіддя зняті з самого файла, не на око).

   22 % — точка, де на найтіснішому вікні запас однаковий згори й
   знизу: +16 px над волоссям і +12 px під підборіддям на 1920×945.
   На 1280×720 виходить +31/+68, на 1440×900 +45/+117. Мобільного
   й планшета це не торкається — там видно всю висоту кадру.

   ⚠️ Значення привʼязане до цього кадру: міняється фото —
   перевіряти заново на 1280×720, 1440×900 і 1920×945.
   ⚠️ Вікна, плоскіші за ~2.15:1 (2560×1080 і подібні), зріжуть
   голову за будь-якого значення: смуга там менша за саму голову.
   Лікується не цим рядком, а `max-height` вище.
   ---------------------------------------------------------------- */

.hero--photofirst .hero__photo { object-position: 50% 22%; }

/* --- Смуга фото на телефоні — окремо від десктопа -----------------
   Пороги незалежні, і це з'ясувалось дорогою ціною (історія вище).
   Тут — тільки телефон, нижче 700 px.

   Було 16:9 з базового `.hero__photo`: смуга 221 px на iPhone 15, тобто
   34 % екрана, і видно всю висоту кадру. На кадрі «за столом» це читалось,
   на портреті великим планом стало забагато — голова займає майже всю смугу.

   Вказівка власника 13.09: «на телефоні треба зменшити висоту фото,
   забрати трохи зверху і трохи знизу».

   Показали три варіанти, власник обрав найнижчий — **2.4:1**: смуга 164 px,
   25 % екрана, зрізається 191 px джерела. (Проміжний 2.2:1 — 179 px і 27 % —
   лишився в історії, якщо колись здасться, що стало затісно.)

   `object-position: 50% 50%` саме тут — щоб зріз ліг рівно: 96 px згори
   (стеля) і 96 px знизу (низ халата), як і просив власник. Десктопні 22 %
   для цього не годяться — вони зрізали б 42 згори і 149 знизу, тобто майже
   все знизу. Голова ціла: над волоссям лишається 54 px джерела.
   ---------------------------------------------------------------- */

@media (max-width: 699px) {
  .hero--photofirst .hero__photo { aspect-ratio: 2.4 / 1; object-position: 50% 50%; }
}