/* ============================================================
   Bento PRO — стиль публічної головної СІМЕДГРУП (v15).
   Портовано з мокапа Work/simedgroup-style-variants/v15-bento-pro.html.
   Палітра бренд-керована: layout site_bento.php перекриває :root{--green}
   з clinic.primary_color; похідні відтінки — color-mix (late-bound).
   Шрифт Onest підключає layout. Без емодзі — лише SVG.
   ============================================================ */
/* Onest self-host (variable 400-900, subsets з unicode-range; файли /assets/fonts/onest/) */
@font-face{font-family:"Onest";font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/onest/onest-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/onest/onest-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/onest/onest-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/onest/onest-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --ink:#0d1526; --mut:#5b6474; --bg:#f3f6f0; --white:#ffffff;
  --green:#3cc58d;                                             /* layout override */
  --green-d:color-mix(in srgb, var(--green) 82%, #000);
  --green-deep:color-mix(in srgb, var(--green) 58%, #000);
  --green-soft:color-mix(in srgb, var(--green) 16%, #fff);
  --lime:#dcf46a; --lime-d:#4e5f08;
  --sky:#d2ebfb; --sky-d:#125e9e;
  --peach:#ffdcc8; --peach-d:#b5541c;
  --lav:#e4dffb; --lav-d:#5744b3;
  --r:28px; --spring:cubic-bezier(.34,1.56,.64,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Onest',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* без сірого iOS-спалаху на тап — свій відгук дає тач-динаміка (.tap) */
a,button{-webkit-tap-highlight-color:transparent}
body.bento-lock{overflow:hidden}
/* «Пуш-екран»: при відкритому меню сторінка відʼїжджає вліво і пригасає, меню вʼїжджає справа */
main,.bento-footer{transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .55s ease}
body.bento-lock .bento-top,body.bento-lock main,body.bento-lock .bento-footer{transform:translateX(-26%);opacity:.45}
@media(prefers-reduced-motion:reduce){.mmenu,.bento-top,main,.bento-footer,.mmenu-links>*{transition:none}}
.wrap{max-width:1480px;margin:0 auto;padding:0 26px}
svg{display:block}
h1,h2,h3{letter-spacing:-.03em;line-height:1.02}
a{color:inherit}
img{max-width:100%}

/* scroll progress */
.progress{position:fixed;top:0;left:0;height:4px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--green),var(--lime));z-index:200;border-radius:0 4px 4px 0;box-shadow:0 0 12px color-mix(in srgb,var(--green) 60%,transparent);transition:transform .1s linear}

/* header */
/* ── Бенто-топбар (десктоп): лайв-статус · бігуча стрічка · контакти ── */
/* Sticky-група (топбар+меню): НЕ ховається, ужимається на скролі (.shrunk) */
/* МОРФ хедера: вгорі — плаваюча пігулка, на скролі (.shrunk) розтягується на всю ширину в суцільну панель (нема жолобів — контент не просвічує) */
.bento-top{position:fixed;top:0;left:0;right:0;z-index:120;padding-top:14px;contain:layout;transition:padding-top .3s,transform .55s cubic-bezier(.22,1,.36,1),opacity .55s ease}
/* Розпірка: тримає місце fixed-шапки в потоці. Дефолт — типова висота до
   спрацювання JS (мінімізує CLS), точну ставить bento.js */
.bento-spacer{height:141px}
/* 50px — виміряна висота компактної шапки на малих екранах (топбар прихований,
   у меню лишаються лого, пошук і бургер). Число мусить збігатися з реальністю:
   JS перемірює шапку на load і переписує цю висоту, тож розбіжність видно як
   стрибок контенту одразу після завантаження. Тут раніше стояло 83px — звідси
   й був той стрибок на 7px (планшет) і 11px (телефон). */
@media(max-width:1120px){.bento-spacer{height:50px}}
/* Вимір розпірки: клас глушить усі переходи, щоб зняття/повернення .shrunk
   під час виміру не запускало анімацій */
.bento-top.no-anim,.bento-top.no-anim *{transition:none!important}
.bento-top.shrunk{padding-top:0}
.bento-top.shrunk .bento-header{padding:0}
.btopbar{max-width:1480px;margin:0 auto 5px;padding:0 26px;transition:margin .3s,padding .3s,max-width .3s}
.bento-top.shrunk .btopbar{margin-bottom:0;padding:0;max-width:100vw}
.btop-inner{display:flex;align-items:center;gap:16px;background:var(--ink);color:#fff;border-radius:14px;padding:8px 10px 8px 8px;box-shadow:0 10px 30px -14px rgba(13,21,38,.55);contain:layout;transition:padding .25s,border-radius .3s}
.bento-top.shrunk .btop-inner{padding:7px calc(max(0px,(100% - 1480px)/2) + 26px) 3px;border-radius:0}
.bento-top.shrunk .btop-status{padding:4px 13px}
.bento-top.shrunk .btop-soc a{width:27px;height:27px}
.bento-top.shrunk .btop-phones{padding:4px 11px}
.bento-top.shrunk .btop-lang a{padding:3px 7px}
.bento-top.shrunk .btop-auth{padding:3px 13px 3px 4px}
.bento-top.shrunk .btop-auth .av{width:23px;height:23px}
.btop-status{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;font-size:13px;font-weight:800;white-space:nowrap;background:rgba(255,255,255,.08);padding:8px 16px;border-radius:100px;transition:padding .25s}
.btop-status i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent);animation:beat 1.8s infinite;flex-shrink:0}
.btop-loc{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;font-size:13px;font-weight:700;color:#fff;text-decoration:none;white-space:nowrap;transition:color .2s}
.btop-loc:hover{color:#fff}
.btop-loc svg{color:var(--lime);flex-shrink:0}
.btop-marq{flex:1 1 auto;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.btop-marq .mtrack{display:flex;width:max-content;align-items:center;animation:mq 55s linear infinite}
.btop-marq:hover .mtrack{animation-play-state:paused}
.btop-marq .mtrack span{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:rgba(255,255,255,.82);white-space:nowrap;letter-spacing:-.02em}
.btop-marq .mtrack span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);margin:0 18px;flex-shrink:0}
.btop-contacts{display:flex;align-items:center;gap:6px;flex-shrink:0}
.btop-phones{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border-radius:100px;white-space:nowrap;transition:padding .25s}
.btop-phones a{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:800;font-size:13.5px;text-decoration:none;transition:opacity .2s}
.btop-phones a svg{color:var(--lime);flex-shrink:0}
.btop-phones a:hover{opacity:.72}
.btop-phones a+a{padding-left:9px;border-left:1px solid rgba(255,255,255,.16)}
.btop-soc{display:flex;align-items:center;gap:2px}
.btop-soc a{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.72);transition:background .2s,color .2s,width .25s,height .25s}
.btop-soc a:hover{background:rgba(255,255,255,.1);color:var(--lime)}
.btop-soc svg{width:15px;height:15px}
.btop-lang{display:inline-flex;align-items:center;gap:1px;flex-shrink:0}
.btop-lang a{padding:5px 8px;border-radius:100px;font-size:12px;font-weight:800;color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s,background .2s,padding .25s}
.btop-lang a:hover{color:#fff}
.btop-lang a.on{color:var(--lime);background:rgba(255,255,255,.09)}
.btop-div{width:1px;height:22px;background:rgba(255,255,255,.15);flex-shrink:0;margin:0 3px}
.btop-auth{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#fff;font-weight:800;font-size:13px;padding:5px 15px 5px 5px;border-radius:100px;background:rgba(255,255,255,.09);white-space:nowrap;transition:background .2s,padding .25s}
.btop-auth .av{transition:width .25s,height .25s}
.btop-auth:hover{background:rgba(255,255,255,.16)}
.btop-auth .av{width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--lime-d);display:grid;place-items:center;font-size:11px;font-weight:900;overflow:hidden;flex-shrink:0}
.btop-auth .av img{width:100%;height:100%;object-fit:cover}
.btop-auth--guest{padding:8px 16px;color:#fff}
.btop-auth--guest svg{flex-shrink:0;color:var(--lime)}
.bento-header{padding:0 26px;transition:padding .3s}
.bento-header .nav{position:relative;max-width:1430px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:20px;padding:11px 12px 11px 24px;box-shadow:0 6px 26px rgba(13,21,38,.08);contain:layout;transition:padding .3s,box-shadow .3s,border-radius .3s,max-width .3s}
/* мобільний прогрес — лаймове кільце навколо бургера (SVG-оверлей: явні width/height + rotate-атрибутом, iOS-правила) */
.bring{position:absolute;top:-4px;left:-4px;width:48px;height:48px;pointer-events:none}
.bring circle{fill:none;stroke-width:3;stroke-linecap:round}
.bring .bring-t{stroke:rgba(13,21,38,.12)}
.bring .bring-r{stroke:var(--lime);stroke-dasharray:138.23;stroke-dashoffset:138.23;opacity:0;transition:stroke-dashoffset .08s linear,opacity .25s}
.bento-top.shrunk .nav{max-width:100vw;border-radius:0 0 22px 22px;padding:5px calc(max(0px,(100% - 1480px)/2) + 26px);box-shadow:0 10px 30px rgba(13,21,38,.12)}
.bento-top.shrunk .bnav .nav-link{padding:6px 11px}
.bento-top.shrunk .bento-cta .btn{padding:8px 18px;font-size:14px}

/* ══ МАЛІ ЕКРАНИ: ШАПКА БЕЗ СТИСНЕННЯ ════════════════════════════════════════
   На смартфонах і планшетах стиснення як стану немає — шапка одразу така,
   якою була б після морфу. Це підсумок довгої серії спроб зробити морф
   плавним на Android: кадр морфу дешевий (0.9 мс), але їх багато, і пропущені
   кадри читаються як ривки; коротшання анімації допомагало, та повністю
   проблему знімає лише її відсутність. У нативних застосунках шапка так само
   не «дихає» від скролу, тож вигляд звичний.

   Десктоп сюди не входить і працює на своєму морфі без змін.

   Планшет у горизонталі (iPad Air 1180, iPad Pro 11" — 1194, Android
   1280–1366) сюди НЕ входить свідомо — Андрій хоче там повноцінне десктопне
   меню, а не мобільну смужку з бургером. Але вміст меню з текстовою кнопкою
   запису потребує 1218px і влазить лише від ~1306px, тому в діапазоні
   1121–1340px діє конденсована версія (блок нижче по файлу): пункти щільніші,
   кнопка запису стає круглою іконкою.

   JS на цих ширинах не вішає `.shrunk` взагалі (див. bento.js) — інакше при
   скролі стрибнули б розміри кнопок і пунктів меню.

   Селектори навмисно подвоєні (`.bento-top.bento-top`): нижче у файлі є
   `@media(max-width:600px)`, який задає шапці свої `padding` тією ж
   специфічністю і, стоячи пізніше, переміг би. */
@media(max-width:1120px){
  .bento-top.bento-top{padding-top:0}
  .bento-top .bento-header{padding:0}
  .bento-top .bento-header .nav{max-width:100vw;border-radius:0 0 22px 22px;
    padding:5px calc(max(0px,(100% - 1480px)/2) + 26px);box-shadow:0 10px 30px rgba(13,21,38,.12)}
  .bento-top,.bento-top *{transition:none}
}
/* лого при скролі НЕ ужимається — лишається сталого розміру */
.blogo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.blogo .mark{width:38px;height:38px;border-radius:50%;background:var(--green);display:grid;place-items:center;transition:transform .4s var(--spring),width .25s,height .25s;flex-shrink:0}
.blogo:hover .mark{transform:rotate(-12deg) scale(1.08)}
.blogo b{font-weight:900;font-size:19px;letter-spacing:-.01em;line-height:1}
.blogo b sup{font-size:.62em;font-weight:800}
.blogo small{display:block;font-size:10px;font-weight:600;color:var(--mut);letter-spacing:.04em;margin-top:2px}
/* кастомне лого сайту (settings.site.logo_path) */
.blogo img.clogo{display:block;height:34px;width:auto;max-width:200px;object-fit:contain}
.bnav{display:flex;gap:2px;align-items:center}
.bnav .nav-link{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:var(--ink);font-family:inherit;font-weight:700;font-size:14px;padding:9px 13px;border-radius:100px;transition:background .2s,color .2s,padding .25s;cursor:pointer;white-space:nowrap;border:none;background:transparent}
.bnav .nav-link:hover,.bnav .nav-link.active,.nav-item:hover>.nav-link,.nav-item:focus-within>.nav-link{background:var(--green-soft);color:var(--green-deep)}
.bnav .nav-link .chev{transition:transform .25s;opacity:.75}
.nav-item:hover>.nav-link .chev,.nav-item:focus-within>.nav-link .chev{transform:rotate(180deg)}

/* випадаюче меню (hover/focus) */
.nav-item{position:relative;display:inline-flex}
.dd{position:absolute;top:100%;left:0;padding-top:15px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease;z-index:130}
.dd.dd-center{left:50%;transform:translateX(-50%)}
.dd.dd-right{left:auto;right:0}
.nav-item:hover .dd,.nav-item:focus-within .dd{opacity:1;visibility:visible;pointer-events:auto}
.dd-inner{background:#fff;border-radius:24px;box-shadow:0 24px 66px -18px rgba(13,21,38,.3);overflow:hidden;transform:translateY(10px);transition:transform .3s var(--spring)}
.nav-item:hover .dd-inner,.nav-item:focus-within .dd-inner{transform:translateY(0)}
/* featured-мега: темна промо-панель зліва + список праворуч (стиль B) */
.mega{display:grid;grid-template-columns:288px auto}
.mega-feat{background:linear-gradient(160deg,var(--ink),#16241a);color:#fff;padding:28px 26px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.mega-feat::after{content:"";position:absolute;bottom:-90px;right:-70px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--green) 45%,transparent),transparent 70%);pointer-events:none}
.mega-feat>*{position:relative;z-index:1}
.mega-feat .fk{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);color:var(--lime);border-radius:100px;padding:7px 15px;font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;width:fit-content}
.mega-feat .fk i{width:7px;height:7px;border-radius:50%;background:var(--lime)}
.mega-feat h4{font-size:23px;font-weight:900;margin:15px 0 8px;line-height:1.14;letter-spacing:-.02em}
.mega-feat .fp{font-size:13px;color:#9aa6b8;margin-bottom:20px}
.mega-feat .fcta{display:inline-flex;align-items:center;gap:9px;background:var(--lime);color:var(--lime-d);font-weight:900;font-size:14px;padding:12px 20px;border-radius:100px;width:fit-content;transition:transform .3s var(--spring);will-change:transform}
.mega-feat .fcta:hover{transform:translateY(-2px)}
/* CTA-кнопка feat-панелі: та сама кислотна пігулка з чорним кружком, що в
   hero прайсів, лише компактніша під ширину панелі */
.mega-feat .btn{font-size:14px;padding:12px 18px;width:fit-content}
.mega-feat .btn.btn-arr{padding-right:50px}
.mega-feat .btn.btn-arr .ca{width:31px;height:31px;right:5px}
.mega-body{padding:22px 24px}
.mega-list{display:grid;gap:1px 18px}
.mega-list.c3{grid-template-columns:repeat(3,max-content)}
.mega-list.c2{grid-template-columns:repeat(2,max-content)}
.mega-list.c1{grid-template-columns:max-content}
.mega-list a,.mega-cols a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:12px;font-weight:700;font-size:14px;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.mega-list a .dt,.mega-cols a .dt{width:9px;height:9px;border-radius:50%;background:var(--green);flex-shrink:0;transition:transform .25s}
.mega-list a:nth-child(4n+2) .dt,.mega-cols a:nth-child(4n+2) .dt{background:var(--sky-d)}
.mega-list a:nth-child(4n+3) .dt,.mega-cols a:nth-child(4n+3) .dt{background:var(--peach-d)}
.mega-list a:nth-child(4n) .dt,.mega-cols a:nth-child(4n) .dt{background:var(--lav-d)}
.mega-list a:hover,.mega-cols a:hover{background:var(--green-soft);color:var(--green-deep)}
.mega-list a:hover .dt,.mega-cols a:hover .dt{transform:scale(1.6)}
.mega-list a .ext,.mega-cols a .ext{margin-left:auto;opacity:.5}
/* Активний пункт ВСЕРЕДИНІ мега-меню. Ховер уже зайняв --green-soft, тому
   активний мусить бути іншим носієм, а не «тим самим, тільки завжди»:
   чорнильна пігулка + кислотна крапка. Крапку перебиваємо !important — вище
   лежать nth-child-ротації кольорів, які інакше виграють порядком. */
.mega-list a.on,.mega-cols a.on{background:var(--ink);color:#fff}
.mega-list a.on:hover,.mega-cols a.on:hover{background:var(--ink);color:#fff}
.mega-list a.on .dt,.mega-cols a.on .dt{background:var(--lime)!important;transform:scale(1.25);
  animation:mcDotPulse 2.4s cubic-bezier(.4,0,.2,1) infinite}
.mega-list a.on:hover .dt,.mega-cols a.on:hover .dt{transform:scale(1.25)}
/* Пульс активної крапки — розхідне кільце через box-shadow, а не окремий
   елемент: `.dt` рендериться інлайном із PHP, і додавати туди ::after не
   можна (це span із інлайновим background для градієнта булітів). */
@keyframes mcDotPulse{
  0%  {box-shadow:0 0 0 0 color-mix(in srgb,var(--lime) 85%,transparent)}
  65% {box-shadow:0 0 0 8px color-mix(in srgb,var(--lime) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--lime) 0%,transparent)}
}
@media(prefers-reduced-motion:reduce){
  .mega-list a.on .dt,.mega-cols a.on .dt{animation:none}
}
.mega-list a.on .ext,.mega-cols a.on .ext{opacity:.8}
/* прайс-колонки (Послуги) з підзаголовками */
.mega-cols{display:grid;grid-template-columns:repeat(4,max-content);gap:0 18px;padding:20px 22px}
.mega-cols .mc{min-width:0}
.mega-cols .mc h6{font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:7px 13px 5px;margin:0}
.mega-cols .mc a{font-size:13.5px;padding:8px 13px}
.bento-cta{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--ink);color:#fff;padding:13px 26px;border-radius:100px;font-family:inherit;font-weight:800;font-size:15px;text-decoration:none;border:none;cursor:pointer;transition:transform .3s var(--spring),background .25s,box-shadow .3s,padding .25s,font-size .25s;will-change:transform}
.btn:hover{background:var(--green);box-shadow:0 12px 26px -10px color-mix(in srgb,var(--green) 80%,transparent)}
.btn.green{background:var(--green)}.btn.green:hover{background:var(--green-d)}
.btn.lime{background:var(--lime);color:var(--ink)}.btn.lime:hover{background:var(--ink);color:#fff}
.btn.plain{background:#fff;color:var(--ink);box-shadow:0 4px 16px rgba(13,21,38,.08)}
.btn.big{padding:17px 34px;font-size:15px}
.burger{display:none;position:relative;width:40px;height:40px;border-radius:50%;background:var(--ink);border:none;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;flex-shrink:0}
.burger span{width:17px;height:2.2px;background:#fff;border-radius:2px;transition:.3s}

/* fullscreen mobile menu — «Скло + підйом» (backdrop-blur + лінки піднімаються) */
/* ── Мобільне меню: «Lime → Ink спліт» — лаймовий хіро зверху + чорнильна панель ── */
.mmenu{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;background:var(--ink);transform:translateX(103%);visibility:hidden;transition:transform .55s cubic-bezier(.22,1,.36,1),visibility 0s .55s}
.mmenu a,.mmenu button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mmenu.open{transform:none;visibility:visible;transition:transform .55s cubic-bezier(.22,1,.36,1),visibility 0s}
.mmo-hero{background:var(--lime);color:var(--ink);padding:16px 24px 30px;flex-shrink:0}
.mmo-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mmo-st{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);color:#fff;border-radius:100px;padding:6px 13px;font-size:12px;font-weight:800;white-space:nowrap}
.mmo-st i{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;animation:beat 1.8s infinite}
.mmenu-close{width:44px;height:44px;border-radius:50%;background:var(--ink);border:none;color:var(--lime);cursor:pointer;display:grid;place-items:center;flex-shrink:0}
.mmo-title{font-size:46px;font-weight:900;letter-spacing:-.045em;line-height:.92;margin:0}
.mmo-ph{display:flex;gap:8px;flex-wrap:wrap}
.mmo-ph a{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--ink);border-radius:100px;padding:9px 14px;font-size:13px;font-weight:800;text-decoration:none;white-space:nowrap}
.mmo-ph a svg{color:inherit;flex-shrink:0}
.mmo-body{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--ink);color:#fff;border-radius:30px 30px 0 0;margin-top:-16px;padding:20px 24px calc(16px + env(safe-area-inset-bottom,0px))}
.mmenu-links{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;scrollbar-width:none;margin-right:-14px;padding-right:14px}
.mmenu-links::-webkit-scrollbar{width:0;height:0;display:none}
.mmenu-links>*{opacity:0;transform:translateX(30px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.mmenu.open .mmenu-links>*{opacity:1;transform:none}
.mmenu:not(.open) .mmenu-links>*{transition-delay:0s !important}
.mmenu.open .mmenu-links>*:nth-child(1){transition-delay:.10s}
.mmenu.open .mmenu-links>*:nth-child(2){transition-delay:.15s}
.mmenu.open .mmenu-links>*:nth-child(3){transition-delay:.20s}
.mmenu.open .mmenu-links>*:nth-child(4){transition-delay:.25s}
.mmenu.open .mmenu-links>*:nth-child(5){transition-delay:.30s}
.mmenu.open .mmenu-links>*:nth-child(6){transition-delay:.35s}
.mmenu.open .mmenu-links>*:nth-child(7){transition-delay:.40s}
.mmenu.open .mmenu-links>*:nth-child(8){transition-delay:.45s}
.mmenu.open .mmenu-links>*:nth-child(9){transition-delay:.50s}
.mmenu.open .mmenu-links>*:nth-child(10){transition-delay:.55s}
.mmenu.open .mmenu-links>*:nth-child(11){transition-delay:.60s}
.mmo-a,.macc-head{display:flex;align-items:baseline;gap:13px;width:100%;background:none;border:none;color:#fff;font-family:inherit;font-size:24px;font-weight:900;letter-spacing:-.03em;padding:11px 0;text-align:left;text-decoration:none;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.08)}
.mmo-a small,.macc-head small{font-size:10.5px;font-weight:700;color:rgba(220,244,106,.85);width:22px;flex-shrink:0;font-variant-numeric:tabular-nums}
.macc-head .tail{margin-left:auto;font-size:12px;font-weight:500;color:rgba(255,255,255,.45);white-space:nowrap}
.macc-head .mchev{flex-shrink:0;align-self:center;color:rgba(255,255,255,.45);transition:transform .3s var(--spring)}
.macc.open .macc-head .mchev{transform:rotate(180deg);color:var(--lime)}
.macc-body{max-height:0;overflow:hidden;transition:max-height .38s ease}
/* Чип як решта лінків акордеона (padding/radius/вагу успадковує від
   .macc-body a), лише лаймовий і трохи більший — специфічність (0,2,1)
   перебиває базовий чип-стиль */
.macc-body a.mmo-priceall{background:var(--lime);color:var(--ink);font-size:14px}
.macc-body a.mmo-priceall svg{flex:none}
.macc-in{display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start;padding:10px 0 16px 35px}
.macc-body a{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:100px;background:rgba(255,255,255,.09);color:rgba(255,255,255,.92);font-size:12.5px;font-weight:700;text-decoration:none}
.macc-body a .ext{opacity:.7;flex-shrink:0}
/* Активний пункт акордеона. У цій панелі «поточний» уже має свою мову —
   лаймовий чіп перемикача мов (.mmo-langs a.on), тож беремо її, а не вигадуємо
   другий сигнал. Специфічність (0,2,1) — рівна з .mmo-priceall, тому правило
   мусить стояти ПІСЛЯ нього. */
.macc-body a.on{background:var(--lime);color:var(--lime-d)}
.mmo-a.active{color:var(--lime)}
.mmo-a.active small{color:var(--lime)}
.macc-body .msub{width:100%;font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--lime);margin:6px 0 1px}
.mmo-foot{flex-shrink:0;padding-top:14px}
.mmo-strow{display:flex;justify-content:center;margin-top:10px}
.mmo-langs{display:flex;gap:7px;margin-bottom:12px;align-items:center}
/* Лайв-статус переїхав у рядок мов — праворуч */
.mmo-langs .mmo-st{margin-left:auto}
.mmo-foot .mmo-cta{max-width:260px;margin:10px auto 0}
.mmo-langs a{padding:8px 14px;border-radius:100px;font-size:12.5px;font-weight:800;color:rgba(255,255,255,.75);background:rgba(255,255,255,.08);text-decoration:none}
.mmo-langs a.on{color:var(--lime-d);background:var(--lime)}
/* ── Мобільне меню, розкладка v2 (layouts/site_bento.php: $mmenuV2) ──
   Мови переїхали в лаймову шапку, кнопка запису і статус — під телефони.
   Усе scoped під .mmenu--v2, тож повернення до v1 = один прапорець у шаблоні. */
.mmenu--v2 .mmo-top{gap:10px}
.mmenu--v2 .mmo-langs--top{margin:0 0 0 auto;gap:6px}
.mmenu--v2 .mmo-langs--top a{background:rgba(13,21,38,.10);color:rgba(13,21,38,.62);padding:7px 12px;font-size:12px}
.mmenu--v2 .mmo-langs--top a.on{background:var(--ink);color:var(--lime)}
.mmenu--v2 .mmo-hcta{display:flex;flex-direction:column;align-items:center;gap:11px;margin-top:14px}
/* Кнопка — та сама біла, що й у v1, тільки на всю ширину лаймового блоку */
.mmenu--v2 .mmo-hcta .mmo-cta{width:100%;max-width:330px}
.mmenu--v2 .mmo-hcta .mmo-st{background:rgba(13,21,38,.9);color:#fff}
.mmenu--v2 .mmo-hhours{font-size:12px;font-weight:700;color:rgba(13,21,38,.6);text-align:center;line-height:1.5}
/* Телефони і нижній блок (графік+адреса) у портреті прибрані: номери є в
   шапці сайту і в підвалі, графік переїхав під плашку статусу. */
.mmenu--v2 .mmo-ph{display:none}
.mmenu--v2 .mmo-foot{display:none}
/* CTA: бігуча градієнт-обвідка + лаймовий приплив фону + стрілка-коло справа */
@property --ctaa{syntax:"<angle>";initial-value:0deg;inherits:false}
.mmo-cta{position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(115deg,#fff 0%,#fff 38%,#eef9c8 50%,#fff 62%,#fff 100%) padding-box,conic-gradient(from var(--ctaa),var(--green) 0%,var(--lime) 25%,#fff 50%,var(--green) 100%) border-box;background-size:260% 100%,100% 100%;border:2.5px solid transparent;color:var(--ink);font-weight:900;font-size:16px;padding:13px 52px 13px 24px;border-radius:100px;text-decoration:none;animation:ctaring 3.4s linear infinite,ctatide 4.4s ease-in-out infinite;transition:transform .2s;box-shadow:0 10px 30px -14px rgba(60,197,141,.5)}
.mmo-cta:active{transform:scale(.97)}
.mmo-cta .ct{position:relative;z-index:1}
.mmo-cta .ca{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:37px;height:37px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;overflow:hidden}
.mmo-cta .ca svg{grid-area:1/1}
.mmo-cta .ca .a1{animation:ctafly1 3.8s cubic-bezier(.6,0,.3,1) infinite}
.mmo-cta .ca .a2{animation:ctafly2 3.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes ctaring{to{--ctaa:360deg}}
@keyframes ctatide{0%,100%{background-position:110% 0,0 0}50%{background-position:-10% 0,0 0}}
@keyframes ctafly1{0%,68%{transform:translate(0,0);opacity:1}80%,100%{transform:translate(150%,-150%);opacity:0}}
@keyframes ctafly2{0%,68%{transform:translate(-150%,150%);opacity:0}80%,100%{transform:translate(0,0);opacity:1}}
@media(prefers-reduced-motion:reduce){.mmo-cta{animation:none}.mmo-cta .ca .a1{animation:none}.mmo-cta .ca .a2{display:none}}
/* На тачах глушимо ті дві анімації CTA, що перемальовуються щокадру
   (conic-обвідка + приплив фону) — головні пожирачі кадрів на Android.
   Стрілки .ca (transform/opacity) композитяться і лишаються. */
@media(pointer:coarse){.mmo-cta{animation:none}}
/* лайм-CTA з чорним колом-стрілкою (як у меню) */
.btn.btn-arr{position:relative;padding-right:56px}
.btn.btn-arr .ca{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;overflow:hidden}
.btn.btn-arr .ca svg{grid-area:1/1;width:15px;height:15px}
.btn.btn-arr .ca .a1{animation:ctafly1 3.8s cubic-bezier(.6,0,.3,1) infinite}
.btn.btn-arr .ca .a2{animation:ctafly2 3.8s cubic-bezier(.6,0,.3,1) infinite}
@media(prefers-reduced-motion:reduce){.btn.btn-arr .ca .a1{animation:none}.btn.btn-arr .ca .a2{display:none}}
/* та сама CTA в десктоп-шапці */
.bento-cta .mmo-cta{padding:10px 46px 10px 22px;font-size:15px;white-space:nowrap;transition:transform .5s cubic-bezier(.22,1,.36,1),padding .25s,font-size .25s;will-change:transform}
.bento-cta .mmo-cta .ca{width:33px;height:33px}
.bento-top.shrunk .bento-cta .mmo-cta{padding:7px 40px 7px 16px;font-size:14px}
.bento-top.shrunk .bento-cta .mmo-cta .ca{width:29px;height:29px}

/* ── КОНДЕНСОВАНЕ ДЕСКТОПНЕ МЕНЮ (1121–1340px) ───────────────────────────────
   Планшети в горизонталі (iPad Air 1180, iPad Pro 11" — 1194, Android
   1280–1366) і вузькі вікна на десктопі. Повне меню з текстовою кнопкою
   потребує 1218px вмісту і влазить лише від ~1306px — на 1280px кнопка запису
   вилазила за правий край на 26px, на iPad ще далі. Тут меню лишається
   десктопним (Андрій: мобільна смужка в горизонталі — «біла непотрібна
   полоска»), але щільнішим, а головну економію дає кнопка запису: замість
   пігулки з текстом — кругла іконка з тим самим анімованим обідком і чорним
   колом-стрілкою. Текст «Записатись» не втрачається: він є в топбарі
   («Записатись онлайн» у меню пацієнта), у герої та в мобільному меню, а
   aria-label на самій кнопці озвучує її незрячим.

   Заміряно на найвужчій точці 1121px: вміст 1022px при доступних 1049 —
   запас 27px (у стиснутому стані 51px). Топбар на 1121 не переповнюється —
   бігуча стрічка стискається. Додається пункт меню — перевіряти запас знову.

   Верхня межа 1340, а не 1306: від 1341px звичайне меню влазить із запасом
   35px, без межі впритул. */
@media(min-width:1121px) and (max-width:1340px){
  .bento-header{padding:0 18px}
  .bnav .nav-link{padding:9px 8px}
  .bento-top.shrunk .bnav .nav-link{padding:6px 8px}
  .bento-cta .mmo-cta .ct{display:none}
  .bento-cta .mmo-cta{width:46px;height:46px;padding:0}
  .bento-cta .mmo-cta .ca{right:50%;transform:translate(50%,-50%)}
  .bento-top.shrunk .bento-cta .mmo-cta{width:42px;height:42px;padding:0}
}
.mmo-mini{text-align:center;font-size:12px;color:rgba(255,255,255,.5);font-weight:500;margin-top:10px}
/* Блок мов+CTA у лаймовій панелі — лише ландшафт (у портреті працює .mmo-foot) */
.mmo-side{display:none}
.mmo-side .mmo-langs a{background:rgba(13,21,38,.07);color:var(--ink)}
.mmo-side .mmo-langs a.on{background:var(--ink);color:var(--lime)}
.mmo-side-mini{font-size:11px;font-weight:600;color:rgba(13,21,38,.62);text-align:center;line-height:1.55}
/* Лайв-статус унизу ink-блока — лише ландшафт (у портреті чіп у рядку мов) */
.mmo-live{display:none}
/* Зачинено: крапка червона (JS ставить bg) — пульс теж червоний, не зелений */
.btop-status[data-open="0"] i,.mmo-st[data-open="0"] i{animation-name:beatred}
@keyframes beatred{0%{box-shadow:0 0 0 0 rgba(194,65,12,.5)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media(max-width:360px){.mmo-title{font-size:40px}}
/* Ландшафт телефона: спліт повертається горизонтально — лайм зліва, ink справа.
   Порядок лівої панелі: Меню → статус → (низ) телефони → мови → CTA; X подалі від ink-блоку. */
@media(orientation:landscape) and (max-height:540px){
  .mmenu{flex-direction:row}
  .mmo-hero{position:relative;flex:0 0 40%;min-width:300px;display:flex;flex-direction:column;padding:16px 44px 16px calc(24px + env(safe-area-inset-left,0px))}
  .mmo-top{display:contents}
  .mmenu-close{position:absolute;top:14px;right:34px}
  .mmo-title{order:1;font-size:42px;margin:0 0 10px}
  .mmo-ph{order:3;margin-top:auto}
  .mmo-side{order:4;display:flex;flex-direction:column;gap:10px;margin-top:12px}
  .mmo-side .mmo-langs{margin-bottom:0}
  .mmo-side .mmo-cta{width:100%;padding:11px 48px 11px 20px;font-size:15px}
  .mmo-side .mmo-cta .ca{width:34px;height:34px}
  .mmo-body{margin-top:0;margin-left:-20px;border-radius:26px 0 0 26px;padding:16px 22px calc(8px + env(safe-area-inset-bottom,0px)) 36px;padding-right:calc(22px + env(safe-area-inset-right,0px))}
  .mmo-a,.macc-head{font-size:19px;padding:8px 0}
  .mmo-live{display:block;padding:26px 0 0}
  .mmo-foot{display:none}
  /* v2: у ландшафті мови і кнопку показує .mmo-side — інакше вони задвоїлись би;
     телефони тут потрібні (у портреті вони сховані) */
  .mmenu--v2 .mmo-langs--top,.mmenu--v2 .mmo-hcta{display:none}
  .mmenu--v2 .mmo-ph{display:flex}
}

/* bento base */
.bento{display:grid;gap:16px}
.card{border-radius:var(--r);padding:32px;position:relative;overflow:hidden}
a.card,.card.lift{transition:transform .4s var(--spring),box-shadow .4s}
a.card{text-decoration:none;color:inherit;display:block}

/* section shells */
.bento-main{padding-bottom:16px}
section.bsec{padding:30px 0}
.head{max-width:680px;margin:0 auto 46px;text-align:center}
.kick{display:inline-flex;align-items:center;gap:8px;background:var(--white);border-radius:100px;padding:9px 20px;font-size:12.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep);margin-bottom:18px;box-shadow:0 2px 14px rgba(13,21,38,.06)}
.kick i{width:8px;height:8px;border-radius:50%;background:var(--green);animation:beat 1.6s infinite}
/* ── Тач-пристрої: «легкий режим» декору ─────────────────────────────────────
   Заміряно на головній: 25 нескінченних анімацій ОДНОЧАСНО на екрані проти
   3 у кабінеті пацієнта (де на тому ж Android нічого не лагає). Найдорожча —
   `beat`: вона анімує box-shadow, тобто ПЕРЕМАЛЬОВУЄ елемент кожен кадр, і
   таких крапок на сторінці 7. Плюс 14 стрілок `ctafly`, кожна з яких тримає
   власний композитний шар заради ефекту, який на тачі й не побачиш (він
   розрахований на наведення мишею).

   На тачах усе це стає статичним: крапки лишаються зеленими, стрілки — на
   місці. Десктоп не змінюється зовсім. */
@media(pointer:coarse){
  /* Морф шапки тут НЕ чіпаємо. Стиснення лишилось тільки на десктопі
     (>1120px, включно з планшетами в горизонталі); на смартфонах
     шапка компактна від початку й не анімується взагалі — див. блок
     «МАЛІ ЕКРАНИ» вище. Нижче — лише те, що на тачах справді зайве:
     нескінченні анімації та найважчі розмиття. */
  .btop-status i,.mmo-st i,.kick i,.h-main .tag i,.h-pic .h-pic-cap i,
  .iband .ib-st i,.sideb .sb-badge i,.svc-hero .tag i,.ct-tag i,.ct-dot,
  .mcw-eyebrow::before,.mega-feat .fk i{animation:none}
  .mmo-cta .ca .a1,.btn.btn-arr .ca .a1,.svcdeck .card .dgo .ca .a1{animation:none}
  .mmo-cta .ca .a2,.btn.btn-arr .ca .a2,.svcdeck .card .dgo .ca .a2{display:none}
  .spin{animation:none}
  /* Тільки НАЙБІЛЬШІ розмиття (50–100px) на великих площах: браузер рахує
     їх програмно на кожну перерисовку. Решта тіней (20–30px) лишається як є —
     у кабінеті, що на тому ж Android не лагає, стеля саме така. Глибина
     збережена підняттям прозорості, тож на око різниці майже нема. */
  .pg-hero .ph-card,.h-main,.seonote,.cta .box,.sidedocs,.ct-panel{
    box-shadow:0 14px 30px -22px rgba(13,21,38,.34)}
  /* Бігуча стрічка: маска-градієнт по краях коштує окремого шару з альфою —
     на тачі краї просто обрізаються контейнером. */
  .btop-marq{-webkit-mask-image:none;mask-image:none}
}
@keyframes beat{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
h2{font-size:clamp(32px,4.6vw,56px);font-weight:900}
.hl{position:relative;white-space:nowrap;z-index:0}
.hl::after{content:"";position:absolute;left:-3%;bottom:4%;width:106%;height:34%;background:var(--lime);z-index:-1;border-radius:8px}
.g{color:var(--green)}
.head p{color:var(--mut);font-size:17px;margin-top:14px}

/* авторизований пацієнт: аватар-чіп у шапці */
.bavatar{display:inline-flex;align-items:center;gap:9px;background:#fff;border-radius:100px;padding:5px 18px 5px 5px;box-shadow:0 4px 16px rgba(13,21,38,.08);text-decoration:none;color:var(--ink);font-weight:800;font-size:14px;transition:transform .3s var(--spring),box-shadow .3s}
.bavatar:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(13,21,38,.24)}
.bavatar .av{width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:900;font-size:14px;flex-shrink:0}
.bavatar .av img{width:100%;height:100%;object-fit:cover;display:block}
/* профіль-картка у мобільному меню */
/* профіль/вхід біля бургера (мобільний хедер, закрите меню) */
.mnav-auth{display:none;width:40px;height:40px;border-radius:50%;place-items:center;overflow:hidden;flex-shrink:0;text-decoration:none;background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;font-weight:900;font-size:14px}
.mnav-auth img{width:100%;height:100%;object-fit:cover;display:block}
/* «Увійти» на моб (mnav-auth лише ≤1120) = той самий інсет-стиль, що й пошук */
.mnav-auth--guest{background:#f4f6f5;box-shadow:inset 0 1px 2px rgba(13,21,38,.12);color:var(--ink);width:auto;border-radius:100px;grid-auto-flow:column;gap:6px;padding:0 14px 0 11px;font-size:14px;font-weight:600;white-space:nowrap;transition:color .2s,box-shadow .2s}
@media(hover:hover) and (pointer:fine){.mnav-auth--guest:hover{box-shadow:inset 0 0 0 1.5px var(--green)}}
@media(hover:none){.mnav-auth--guest:active,.mnav-auth--guest.tap{box-shadow:inset 0 0 0 1.5px var(--green),inset 0 2px 4px rgba(13,21,38,.16)}}

/* hero */
.hero{padding:5px 0 6px}
.hero .bento{grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(88px,auto)}
.h-main{grid-column:span 9;grid-row:span 3;background:var(--white);display:flex;flex-direction:column;justify-content:center;padding:56px;box-shadow:0 20px 50px -34px rgba(13,21,38,.3)}
.h-main .tag{display:inline-flex;align-items:center;gap:9px;background:var(--lime);color:var(--ink);border-radius:100px;padding:9px 18px;font-weight:800;font-size:13px;width:fit-content;margin-bottom:24px}
.h-main .tag i{width:9px;height:9px;border-radius:50%;background:var(--green);animation:beat 1.6s infinite}
.h-main h1{font-size:clamp(32px,3.9vw,50px);font-weight:900;margin-bottom:22px}
/* Свайп БЕЗ fill:forwards: з вічним fill iOS Safari тримав ::after окремим
   композитним шаром і малював лайм ПОВЕРХ тексту, ігноруючи z-index:-1
   («підкреслення перед „Ціни", а не ззаду»). Анімуємо з from{scaleX(0)},
   backwards накриває затримку; після фінішу шар розкомпозичується і текст
   знову зверху. Кінцевий стан = статичний базовий (без transform). */
.h-main h1 .hl::after{transform-origin:left;animation:swipe .8s .4s var(--spring) backwards}
@keyframes swipe{from{transform:scaleX(0)}}
.h-main p{font-size:17.5px;color:var(--mut);max-width:100%;margin-bottom:0}
.h-acts{display:flex;gap:13px;flex-wrap:wrap}
.h-blob{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--green) 14%,transparent),transparent 70%);right:-90px;top:-90px;pointer-events:none}

.h-disc{grid-column:span 3;grid-row:span 3;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.h-disc .disc-top{display:flex;justify-content:space-between;align-items:flex-start}
.h-disc .pct{font-size:clamp(52px,6vw,80px);font-weight:900;letter-spacing:-.04em;line-height:.9;color:var(--lime)}
.h-disc p{color:#9aa6b8;font-size:14px;margin-top:8px;max-width:100%}
.disc-acts{display:flex;flex-direction:column;gap:14px}
.disc-phones{display:flex;flex-direction:column;gap:9px}
.disc-phone{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:16px;padding:12px 20px;border-radius:100px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s}
.disc-phone svg{width:17px;height:17px;color:var(--lime);flex:none}
@media(hover:hover) and (pointer:fine){.disc-phone:hover{background:rgba(255,255,255,.12);border-color:color-mix(in srgb,var(--lime) 45%,transparent)}}
.h-disc .btn.lime.big{width:100%;padding:15px 54px 15px 16px;font-size:15px;white-space:nowrap}
.spin{width:80px;height:80px;animation:rot 20s linear infinite;flex-shrink:0}
@keyframes rot{to{transform:rotate(360deg)}}

/* Вакансії: праворуч у героєві — фото (на головній цю позицію тримає .h-disc).
   Фото — ФОНОМ, а не <img>: поки файла немає, шар просто не малюється і
   лишається градієнт, без битої іконки й без JS-фолбеку. Замінити фото =
   покласти свій `public/assets/site/vacancies-hero.jpg`, CSS не чіпати.
   Медіа-правила ТУТ і НЕ в спільних блоках нижче: селектор .hero--pic .h-main
   специфічніший за .h-main, тож у чужому @media він переміг би і на планшеті
   лишилось би span 7. */
/* Сітка героя тут 11 колонок (а не 12, як на головній) — щоб «7 і 4» лягли
   рівно в ряд: 7+4=11, без мертвої дванадцятої колонки праворуч. */
.hero--pic .bento{grid-template-columns:repeat(11,1fr)}
/* Крихти навігації — як на решті внутрішніх сторінок (.pg-hero: 20px згори).
   Знизу 16px = міжкартковий gap, щоб наступна секція (у неї padding-top:0)
   сиділа на одній відстані з картками героя. Значення ЯВНЕ: цей селектор
   (0,2,0) перебиває .bento-main{padding-bottom:16px}, тож скорочене
   `padding:20px 0 0` тихо обнулило б низ. */
.hero.hero--pic{padding:20px 0 16px}
.h-pic{grid-column:span 4;grid-row:span 3;padding:0;min-height:360px;position:relative;
  background-image:url('/assets/site/vacancies-hero.jpg'),linear-gradient(150deg,var(--green-soft),var(--sky) 58%,var(--lav));
  background-size:cover;background-position:center;background-repeat:no-repeat}
.hero--pic .h-main{grid-column:span 7}
.h-pic .h-pic-cap{position:absolute;left:22px;bottom:22px;display:inline-flex;align-items:center;gap:9px;
  background:#fff;border-radius:100px;padding:10px 18px;font-size:13px;font-weight:800;
  box-shadow:0 8px 26px -12px rgba(13,21,38,.4)}
.h-pic .h-pic-cap i{width:8px;height:8px;border-radius:50%;background:var(--green);animation:beat 1.6s infinite;flex-shrink:0}
/* Низ слота-зображення — СТЕК: кнопка-посилання над плашкою. Раніше плашка
   стояла absolute сама; тепер absolute тримає обгортка, а плашка всередині
   стає статичною (інакше обидві висіли б в одній точці). */
.h-pic .h-pic-foot{position:absolute;left:22px;right:22px;bottom:22px;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.h-pic .h-pic-foot .h-pic-cap{position:static;left:auto;bottom:auto}
.h-pic-btn{display:inline-flex;align-items:center;gap:8px;max-width:100%;
  background:var(--ink);color:#fff;border-radius:100px;padding:11px 18px;
  font-size:13px;font-weight:800;text-decoration:none;
  box-shadow:0 10px 28px -14px rgba(13,21,38,.6);transition:background .22s,transform .22s}
.h-pic-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-pic-btn svg{flex-shrink:0}
@media(hover:hover){.h-pic-btn:hover{background:var(--green-d);transform:translateY(-2px)}}
/* Контентна панель праворуч у героєві замість фото: та сама позиція в сітці
   (span 4 з .h-pic), але картка з текстом і кнопкою. Фон — той самий, що в
   решти слотів (рішення користувача): заглушка з колами + градієнт.
   NB: підміните `vacancies-hero.jpg` живим фото — воно зʼявиться і тут,
   під текстом панелі. */
.h-pic.h-note{padding:32px;display:flex;flex-direction:column;justify-content:center;gap:12px;
  background-image:url('/assets/site/vacancies-hero.jpg'),linear-gradient(150deg,var(--green-soft),var(--sky) 58%,var(--lav))}
.h-note h3{font-size:19px;font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.h-note p{font-size:14px;line-height:1.6;color:var(--mut)}
.h-note .btn{width:fit-content;margin-top:6px}
@media(max-width:600px){.h-pic.h-note{padding:24px;min-height:0}}
@media(max-width:1040px){
  .hero--pic .h-main{grid-column:span 6}
  .h-pic{grid-column:span 6;grid-row:auto;min-height:280px}
}
@media(max-width:600px){
  .hero--pic .h-main,.h-pic{grid-column:span 1}
  .h-pic{min-height:220px}
  /* Навігація на телефоні — як на решті сторінок (.pg-hero{padding:0}):
     верхній відступ дає шапка, 20px тут задвоював зазор. */
  .hero.hero--pic{padding:0}
  /* Кнопки героя («Надіслати резюме» + телефон/«Відкриті вакансії») — в ОДИН
     рядок: компактніші, порівну ширини. nowrap на .btn обовʼязковий, інакше
     довгий підпис зламався б на два рядки замість стиснути сусіда. */
  .hero--pic .pg-acts,.hero--pic .h-acts{gap:10px;flex-wrap:nowrap}
  .hero--pic .pg-acts .btn,.hero--pic .h-acts .btn{flex:1 1 0;padding:13px 8px;font-size:13px;white-space:nowrap;justify-content:center}
  /* 3+ кнопок (CTA + два телефони на прайсах/договорі) в один nowrap-рядок
     не влазять — стискання дає обрізані номери. З третьої кнопки — перенос;
     вакансійні пари кнопок лишаються в один рядок, як задумано. */
  .hero--pic .pg-acts:has(> :nth-child(3)),.hero--pic .h-acts:has(> :nth-child(3)){flex-wrap:wrap}
  .hero--pic .pg-acts:has(> :nth-child(3)) .btn,.hero--pic .h-acts:has(> :nth-child(3)) .btn{flex:1 1 100%}
  /* Стиснуте padding:…8px (виграє за специфічністю у .btn-arr) лишило б
     36px-кружок стрілки ПОВЕРХ тексту — на телефоні стрілку ховаємо. */
  .hero--pic .pg-acts .btn .ca,.hero--pic .h-acts .btn .ca{display:none}
}

/* ── Модалка відгуку на вакансію (одна на список і на картку вакансії) ────
   Нативний <dialog>: Esc, фокус-пастка і бекдроп — від браузера. Скрол
   блокуємо СВОЇМ класом, а не .bento-lock — той ще й відсуває сторінку
   вліво (ефект мобільного меню). */
body.vmod-lock{overflow:hidden}
/* ГОЧА: глобальний скид `*{margin:0}` (рядок 25) вбиває UA-правило
   `dialog{margin:auto}` — без явного margin:auto модалка сідає в лівий
   верхній кут замість центру. Висоту лишаємо fit-content від UA: інакше
   при top/bottom:0 і height:auto браузер розтягнув би діалог на весь екран. */
.vmod{border:0;padding:0;margin:auto;background:transparent;max-width:min(680px,calc(100vw - 28px));width:100%;max-height:calc(100dvh - 40px);overflow:visible}
.vmod::backdrop{background:rgba(13,21,38,.55);backdrop-filter:blur(3px)}
.vmod[open]{animation:vmodIn .28s cubic-bezier(.22,1,.36,1)}
@keyframes vmodIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.vmod-box{position:relative;background:var(--white);border-radius:var(--r);padding:34px 34px 30px;
  max-height:calc(100dvh - 40px);overflow-y:auto;box-shadow:0 40px 90px -40px rgba(13,21,38,.6)}
.vmod-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(13,21,38,.06);color:var(--ink);display:grid;place-items:center;transition:background .2s,transform .3s var(--spring)}
.vmod-x:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}
.vmod-t{font-size:25px;font-weight:900;letter-spacing:-.02em;margin:0 44px 6px 0;line-height:1.1}
.vmod-l{font-size:12px;line-height:1.2;color:var(--mut);margin-bottom:22px}
.vmod .btn{width:100%}
@media(prefers-reduced-motion:reduce){.vmod[open]{animation:none}.vmod-x:hover{transform:none}}
@media(max-width:600px){.vmod-box{padding:28px 20px 24px;border-radius:22px}.vmod-t{font-size:22px}}
/* Без JS діалог лишається невидимим — показуємо його звичайною карткою */
.vmod--nojs{display:block;position:static;max-width:860px;margin:0 auto}

/* Кнопка «Огляд…» файлових інпутів форми: нативний вигляд у кожному браузері
   свій (Firefox — сіра системна, Chrome — своя) → єдина пігулка в мові сайту.
   ДВА окремі правила, не через кому: невідомий псевдоелемент у комбінованому
   селекторі скасував би ВСЕ правило. */
.vf-file::file-selector-button{font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);
  background:#fff;border:1.5px solid rgba(13,21,38,.16);border-radius:100px;padding:7px 15px;
  margin-right:12px;cursor:pointer;transition:border-color .2s,color .2s}
.vf-file::file-selector-button:hover{border-color:var(--green);color:var(--green-deep)}
.vf-file::-webkit-file-upload-button{font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);
  background:#fff;border:1.5px solid rgba(13,21,38,.16);border-radius:100px;padding:7px 15px;
  margin-right:12px;cursor:pointer;transition:border-color .2s,color .2s}
.vf-file::-webkit-file-upload-button:hover{border-color:var(--green);color:var(--green-deep)}

/* ── Сторінка вакансії: контент + липка картка «коротко» ───────────────── */
/* Та сама 11-колонкова сітка, що в героєві: контент 8, «Коротко» 3 — правий
   край сайдбара збігається з правим краєм фото в героєві (обидва — 11-та). */
.vjob{display:grid;grid-template-columns:repeat(11,1fr);gap:16px;align-items:start}
.vjob-main,.vjob-side{display:grid;gap:16px}
.vjob-main{grid-column:span 8}
.vjob-side{grid-column:span 3;position:sticky;top:112px}
.vblk{background:var(--white);border-radius:var(--r);padding:30px 32px;box-shadow:0 12px 30px -24px rgba(13,21,38,.28)}
.vblk-h{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.vblk-h h2{font-size:21px;font-weight:900;letter-spacing:-.02em}
.vblk-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:var(--green-soft);color:var(--green-deep);box-shadow:inset 0 1px 2px rgba(13,21,38,.12);transition:transform .35s var(--spring),background .25s,color .25s}
.vblk-ic svg{width:21px;height:21px}
/* Колір блоку — ЯВНИМ модифікатором, не :nth-of-type: блоки рендеряться
   умовно (порожній список не виводиться), тож порядковий номер брехав би. */
.vblk--sky .vblk-ic,.vblk--sky li b{background:var(--sky);color:var(--sky-d)}
.vblk--lav .vblk-ic,.vblk--lav li b{background:var(--lav);color:var(--lav-d)}
.vblk ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.vblk li{display:flex;gap:12px;font-size:15.5px;line-height:1.6;align-items:flex-start}
.vblk li b{width:23px;height:23px;border-radius:50%;flex-shrink:0;margin-top:1px;display:grid;place-items:center;
  background:var(--green-soft);color:var(--green-deep);box-shadow:inset 0 1px 2px rgba(13,21,38,.12);
  transition:transform .35s var(--spring),background .25s,color .25s}
.vblk li b svg{width:13px;height:13px}
/* Ховер — мова .sck-ic головної: іконка картки грайливо нахиляється, а
   галочка рядка «спалахує» чорнилом із лаймовою позначкою. Лише для курсорних
   пристроїв — на тачі :hover липне після тапу. */
@media(hover:hover) and (pointer:fine){
  .vblk:hover .vblk-ic{transform:rotate(-10deg) scale(1.05)}
  .vblk li:hover b{transform:scale(1.2) rotate(-8deg);background:var(--ink);color:var(--lime);box-shadow:none}
}
.vblk-txt{font-size:15.5px;line-height:1.7;color:var(--mut);white-space:pre-line}
.vfacts{display:grid;gap:2px;margin-bottom:18px}
/* Колонка вузька (3 з 11), тож підпис і значення — СТОВПЧИКОМ: у рядок
   «Зарплата … 20 000–30 000 ₴ на місяць» не вміщалось, значення ламалось на
   три рядки і наїжджало на підпис. На вужчих екранах (нижче) повертаємо рядок. */
.vfact{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 0;border-bottom:1px solid rgba(13,21,38,.07)}
.vfact:last-child{border-bottom:0}
.vfact span{font-size:12.5px;font-weight:700;color:var(--mut)}
.vfact b{font-size:15px;font-weight:800;line-height:1.35}
/* Картка «Коротко» в колонці span 3 — компактніша за блоки контенту */
.vjob-side .vblk{padding:24px 22px}
.vjob-side .vblk-h{gap:11px;margin-bottom:14px}
.vjob-side .vblk-h h2{font-size:19px}
.vjob-side .vblk-ic{width:38px;height:38px}
.vjob-side .vblk-ic svg{width:19px;height:19px}
.vjob-side .btn{width:100%;padding-left:14px;padding-right:14px}
/* CTA зі стрілкою: `.vjob-side .btn` стоїть ПІЗНІШЕ за `.btn.btn-arr` при
   рівній специфічності і його padding-right:14px клав би 36px-кружок поверх
   тексту — тому явний відступ під кружок. */
.vjob-side .btn.btn-arr{padding-right:48px}
.vjob-side .btn+.btn{margin-top:10px}
@media(max-width:1040px){
  .vjob{grid-template-columns:1fr}
  /* ОБОВʼЯЗКОВО: без скидання span 8/3 наплодили б неявних колонок і сітка
     поїхала б за екран (одна явна колонка ≠ обмеження для span). */
  .vjob-main,.vjob-side{grid-column:auto}
  .vjob-side{position:static}
  .vblk,.vjob-side .vblk{padding:26px 24px}
  /* на всю ширину факти знову читабельніші рядком «підпис … значення» */
  .vfact{flex-direction:row;align-items:baseline;justify-content:space-between;gap:14px}
  .vfact b{text-align:right}
  /* Договір: зміст ПЕРЕД текстом — на одній колонці навігація в кінці
     13-сторінкового документа була б марною */
  .doc-grid .vjob-side{order:-1}
}

/* ── Прайс-сторінки: заголовок категорії + пошук ───────────────────────── */
.price-cat{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:900;letter-spacing:-.01em;margin:34px 0 0}
.price-cat::after{content:"";flex:1;height:1.5px;border-radius:2px;background:rgba(13,21,38,.08)}
.price-search{display:flex;align-items:center;gap:11px;background:var(--white);border-radius:100px;padding:6px 18px;margin-bottom:18px;box-shadow:0 10px 30px -22px rgba(13,21,38,.3)}
.price-search svg{color:var(--mut);flex:none}
.price-search input{flex:1;border:0;outline:0;background:none;font-family:inherit;font-size:15px;color:var(--ink);padding:10px 0;min-width:0}
.price-search input::placeholder{color:#9aa3b2}
.price-search:focus-within{box-shadow:0 10px 30px -22px rgba(13,21,38,.3),inset 0 0 0 1.5px var(--green)}
.price-search-n{flex:none;font-size:12px;font-weight:800;color:var(--green-deep);background:var(--green-soft);border-radius:100px;padding:5px 12px;white-space:nowrap}
.price-search-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:none;border-radius:50%;background:#eef1f0;color:var(--mut);cursor:pointer;transition:background .2s,color .2s}
.price-search-x:hover{background:var(--ink);color:#fff}

/* ── /price: повний прайс — липка панель (пошук+напрям), чипи КАТЕГОРІЙ ── */
/* top читається з --pa-top: висоту шапки міряє скрипт сторінки (вона різна на
   брейкпойнтах і стискається на скролі), 96px — розумний фолбек без JS. */
.pa-bar{position:sticky;top:var(--pa-top,96px);z-index:60;padding:14px 0 16px;background:var(--bg)}
/* Пошук + селект напряму в один ряд (модель /cabinet/prices) */
.pa-row{display:flex;align-items:center;gap:11px}
.pa-search-col{flex:1;min-width:0}
.pa-bar .price-search{margin-bottom:0}
/* display:block явно: на <=820 .pa-row стає block, і label повернувся б до
   inline — абсолютний шеврон тоді позиціюється від лінійного бокса і вилітає
   за екран (спіймано на першому з двох селектів). */
.pa-select{position:relative;display:block;flex:none;width:290px}
.pa-select[hidden]{display:none}
.pa-select select{width:100%;height:46px;padding:0 42px 0 20px;border:0;border-radius:100px;background:var(--white);
  font-family:inherit;font-size:14.5px;font-weight:700;color:var(--ink);cursor:pointer;
  -webkit-appearance:none;appearance:none;outline:0;box-shadow:0 10px 30px -22px rgba(13,21,38,.3)}
.pa-select select:focus{box-shadow:0 10px 30px -22px rgba(13,21,38,.3),inset 0 0 0 1.5px var(--green)}
/* > svg — ЛИШЕ шеврон (прямий нащадок): без > правило ловило svg всередині
   кнопки-хрестика .pa-x і абсолютом виштовхувало іконку за межі кнопки. */
.pa-select > svg{position:absolute;right:17px;top:50%;transform:translateY(-50%);color:var(--mut);pointer-events:none}
.pa-select select{padding-right:66px}
.pa-x{position:absolute;right:38px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;border:none;border-radius:50%;background:#eef1f0;color:var(--mut);cursor:pointer;
  transition:background .2s,color .2s}
.pa-x:hover{background:var(--ink);color:#fff}
.pa-x[hidden]{display:none}
/* Чипи категорій обраного напряму. [hidden] має вищу специфічність за
   display:flex, тож порядок правил тут ролі не грає.
   ГОЧА: горизонтальна стрічка БЕЗ contain роздуває html.scrollWidth на
   мобільному (той самий глюк, що з таблицями в overflow-x-auto). */
.pa-chips[hidden]{display:none}
.pa-chips{display:flex;gap:9px;margin-top:11px;overflow-x:auto;padding:2px 1px 4px;contain:paint;scrollbar-width:none;-ms-overflow-style:none}
.pa-chips::-webkit-scrollbar{display:none}
.pa-chips .btn{flex:none;gap:7px;padding:9px 15px;font-size:13.5px;font-weight:700}
.pa-chips .btn:hover{background:var(--ink);color:#fff}
.pa-chips .btn.on{background:var(--ink);color:#fff}
.pa-chips .btn.off{opacity:.4}
.pa-n{display:inline-flex;align-items:center;background:var(--green-soft);color:var(--green-deep);border-radius:100px;padding:3px 8px;font-size:12px;font-weight:600;line-height:1;box-shadow:inset 0 1px 2px rgba(13,21,38,.12)}
.pa-chips .btn.on .pa-n{background:rgba(255,255,255,.18);color:#fff}
/* Секція напряму — важка (до 542 рядків): не рендеримо поза екраном. */
/* CV на ГРУПАХ прайсу (розмір — інлайн з PHP, 58px/рядок): в'їзд групи
   верстається за 1–3 мс. Секційний CV прибрано: «Лабораторія» цілою секцією —
   це було 110 мс одним кадром. Під час пошуку/фільтра .pa-cv-off вимикає CV —
   сховані рядки ламають резерв висоти. */
#pa-list .prow,#price-list .prow{content-visibility:auto}
#pa-list.pa-cv-off .prow,#price-list.pa-cv-off .prow{content-visibility:visible}
/* Прайс-акордеон ЗНЯТО 27.08 (лаги були від морфу шапки, його вимкнено на
   мобільних) — секції знову відкриті одразу, як до нього. */
.pa-spec{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:26px;font-weight:900;letter-spacing:-.02em;margin:40px 0 0}
/* Листок прайсу напряму — лаймове коло зі стрілкою одразу після лічильника
   (текстовий бейдж «Весь прайс (…)» здавався чужим у заголовку). Куди веде —
   каже aria-label/title; hover інвертується в ink+lime, як CTA сайту. */
.pa-spec .pa-more{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--ink);
  box-shadow:0 6px 16px -8px rgba(13,21,38,.35);
  transition:background .22s,color .22s,transform .25s var(--spring),box-shadow .22s}
.pa-spec .pa-more svg{flex:none;width:14px;height:14px}
@media(hover:hover) and (pointer:fine){
  .pa-spec .pa-more:hover{background:var(--ink);color:var(--lime);transform:translateY(-2px);
    box-shadow:0 10px 22px -12px rgba(13,21,38,.5)}
}
@media(max-width:900px){.pa-spec{font-size:22px;margin-top:30px}}
@media(max-width:820px){
  /* Селект під пошук: у рядок вони на вузькому екрані не вміщаються */
  .pa-row{display:block}
  .pa-select{width:100%;margin-top:9px}
}
@media(max-width:600px){
  .pa-bar{padding:10px 0 12px}
  .pa-chips{margin-top:9px}
  .pa-chips .btn{padding:8px 13px;font-size:12.5px}
  .pa-select select{height:44px;font-size:14px}
  .pa-spec{font-size:19px;gap:9px}
  /* «Прайс напряму» з ml:auto на вузькому екрані тиснув би назву — окремим рядком */
  /* На вузькому — окремим рядком; flex-basis:100% розтягнув би бейдж на всю
     ширину, тож ширину лишаємо по контенту через окрему обгортку-рядок */
  .pa-spec{align-items:flex-start}
  .pa-spec::after{content:"";flex-basis:100%;height:0;order:2}
}

/* Іконка «i» у рядку прайсу — лише в послуг із описом */
.row-info{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:8px;
  padding:0;border:none;border-radius:50%;background:var(--green-soft);color:var(--green-deep);cursor:pointer;
  box-shadow:inset 0 1px 2px rgba(13,21,38,.12);vertical-align:-8px;transition:background .2s,color .2s}
.row-info:hover{background:var(--green);color:#fff}

/* ── Модалка опису послуги (той самий патерн, що модалка вакансій) ─────── */
/* ГОЧА: глобальний *{margin:0} вбиває UA-правило dialog{margin:auto} —
   без явного margin:auto модалка сідає в лівий верхній кут. */
.svm{margin:auto;border:none;border-radius:24px;padding:0;max-width:520px;width:calc(100% - 36px);
  box-shadow:0 30px 80px -20px rgba(13,21,38,.45);background:var(--white)}
.svm::backdrop{background:rgba(13,21,38,.45);backdrop-filter:blur(3px)}
.svm-box{padding:30px 28px 26px}
.svm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.svm-t{font-size:20px;font-weight:900;letter-spacing:-.01em;line-height:1.3}
.svm-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  border:none;border-radius:50%;background:#eef1f0;color:var(--mut);cursor:pointer;transition:background .2s,color .2s}
.svm-close:hover{background:var(--ink);color:#fff}
.svm-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.svm-price{display:inline-flex;align-items:center;background:var(--lime);color:var(--ink);border-radius:100px;
  padding:7px 15px;font-size:14px;font-weight:900}
.svm-chip{display:inline-flex;align-items:center;gap:6px;background:#f4f6f5;color:var(--ink);border-radius:100px;
  padding:7px 13px;font-size:12.5px;font-weight:600;box-shadow:inset 0 1px 2px rgba(13,21,38,.12)}
.svm-spec{font-size:12.5px;color:var(--mut);margin-top:10px}
.svm-desc{margin-top:14px;padding-top:14px;border-top:1px solid rgba(13,21,38,.08);font-size:14.5px;line-height:1.65;
  color:var(--ink);white-space:pre-line}
.svm-note{margin-top:14px;font-size:12px;color:var(--mut);line-height:1.5}
/* Кнопки модалки: колонка на мобільному, рядок на ≥601px (обгортка .svm-btns);
   схований елемент випадає з флексу — видимий тягнеться на всю ширину */
.svm-btns{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.svm-act{flex:1;min-width:0}
.svm-act .btn{width:100%}
@media(min-width:601px){.svm-btns{flex-direction:row;align-items:stretch}}
.svm-call{display:flex;gap:9px;align-items:flex-start;margin-top:18px;padding:13px 15px;border-radius:14px;
  background:#f4f6f5;font-size:13px;color:var(--ink);line-height:1.5}
.svm-call a{font-weight:800;color:inherit}
/* Лінк на SEO-сторінку послуги (132): показується лише коли сторінка існує
   (поле u у data-svc). display:flex — але [hidden] нижче з !important виграє. */
.svm-page{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-width:0;
  padding:11px 14px;border-radius:100px;border:1.5px solid rgba(13,21,38,.14);
  font-size:14px;font-weight:800;color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:border-color .2s,background .2s}
.svm-page svg{flex:none;transition:transform .2s}
@media(hover:hover){
  .svm-page:hover{border-color:var(--ink);background:#f4f6f5}
  .svm-page:hover svg{transform:translateX(3px)}
}
/* ГОЧА hidden vs display-клас: .svm-call{display:flex} і .svm-chip
   {display:inline-flex} перебивали б атрибут [hidden] — гасимо явно. */
.svm [hidden]{display:none!important}
@media(max-width:600px){.svm-box{padding:24px 20px 20px}.svm-t{font-size:18px}}

/* ── Пакети послуг ─────────────────────────────────────────────────────── */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;align-items:stretch}
.pkg{display:flex;flex-direction:column;background:var(--white);box-shadow:0 12px 34px -24px rgba(13,21,38,.34)}
.pkg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pkg-head h3{font-size:20px;font-weight:900;letter-spacing:-.01em;line-height:1.2}
.pkg-save{flex:none;display:inline-flex;padding:6px 13px;border-radius:100px;font-size:12.5px;font-weight:800;background:var(--lime);color:var(--ink);white-space:nowrap;transform:rotate(-2deg);box-shadow:0 4px 12px rgba(13,21,38,.14)}
.pkg-desc{font-size:13.5px;line-height:1.6;color:var(--mut);margin-top:8px}
.pkg-items{list-style:none;padding:0;margin:16px 0 18px;display:grid;gap:0}
.pkg-items li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid rgba(13,21,38,.07);font-size:13.5px;line-height:1.45}
.pkg-items li:last-child{border-bottom:0}
.pkg-item-name{color:var(--ink)}
.pkg-item-name b{color:var(--green-deep);font-weight:800}
.pkg-item-price{color:var(--mut);white-space:nowrap;font-weight:600}
.pkg-foot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1.5px solid rgba(13,21,38,.09);padding-top:16px}
.pkg-price{display:flex;align-items:baseline;gap:10px}
.pkg-price s{font-size:14px;color:var(--mut);text-decoration-color:#e2574c;text-decoration-thickness:2px}
.pkg-price b{font-size:26px;font-weight:900;letter-spacing:-.02em;color:var(--green-deep)}
.pkg-validity{font-size:12px;font-weight:700;color:var(--mut)}
@media(max-width:600px){.pkg-grid{grid-template-columns:1fr}}

/* ── Дисконтна картка: три рівні ───────────────────────────────────────── */
/* Кількість колонок = кількість рівнів у тарифі (вьюха передає --dt-cols).
   auto-fit тут НЕ годиться: при 4 рівнях він давав то 5 доріжок на 1440
   (одна порожня), то 3 на 1040 — і четверта картка падала в другий ряд сама
   одна. Явне число з даних передбачуване за будь-якої кількості рівнів. */
.dtier-grid{display:grid;grid-template-columns:repeat(var(--dt-cols,3),1fr);gap:16px;align-items:stretch}
@media(max-width:1180px){.dtier-grid{grid-template-columns:repeat(2,1fr)}}
.dtier{display:flex;flex-direction:column;background:var(--white);box-shadow:0 12px 34px -24px rgba(13,21,38,.34)}
/* Рівень 2 раніше мав власний зелений фон (.dtier--mid) — прибрано на прохання
   користувача 12.08.2026: перші два рівні тепер білі, контраст лишає тільки
   топовий. Модифікатор знято і з розмітки. */
/* топовий рівень — мова .h-disc з головної: чорнило + лаймові акценти */
.dtier--top{background:var(--ink);color:#fff}
.dtier-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dtier-sum{display:inline-flex;padding:7px 15px;border-radius:100px;font-size:13px;font-weight:800;background:#f4f6f5;color:var(--ink);box-shadow:inset 0 1px 2px rgba(13,21,38,.12)}
.dtier--top .dtier-sum{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.dtier-pct{font-size:clamp(40px,4vw,56px);font-weight:900;letter-spacing:-.04em;line-height:.9;color:var(--green-deep)}
.dtier--top .dtier-pct{color:var(--lime)}
.dtier-note{font-size:12.5px;line-height:1.5;color:var(--mut);margin:14px 0 16px}
.dtier--top .dtier-note{color:#9aa6b8}
.dtier-list{list-style:none;padding:0;margin:auto 0 0;display:grid;gap:10px}
.dtier-list li{padding:12px 14px;border-radius:14px;background:rgba(13,21,38,.04)}
.dtier--top .dtier-list li{background:rgba(255,255,255,.07)}
.dtier-list b{display:block;font-size:14.5px;font-weight:800}
.dtier--top .dtier-list b{color:var(--lime)}
.dtier-list span{display:block;font-size:12px;line-height:1.5;color:var(--mut);margin-top:3px}
.dtier--top .dtier-list span{color:#9aa6b8}
.dtier-list li.is-off{opacity:.62}
.dtier-list li.is-off b{color:inherit}
@media(max-width:600px){.dtier-grid{grid-template-columns:1fr}}

/* ── Публічний договір: читанка + липкий зміст ─────────────────────────── */
.doc-read>p{font-size:15px;line-height:1.75;color:#3c4657;margin:0 0 12px}
.doc-read>p b{color:var(--ink);font-weight:800}
.doc-h{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:900;letter-spacing:-.01em;margin:34px 0 14px;scroll-margin-top:104px}
.doc-h span{width:30px;height:30px;flex:none;border-radius:50%;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;font-size:13px;font-weight:800;box-shadow:inset 0 1px 2px rgba(13,21,38,.12)}
.doc-note{margin-top:26px;padding:16px 18px;border-radius:14px;background:var(--green-soft);font-size:14px;line-height:1.6}
.doc-note a{font-weight:800;color:var(--green-deep)}
.doc-toc{display:flex;flex-direction:column;gap:2px}
.doc-toc a{display:flex;gap:10px;padding:7px 10px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--mut);text-decoration:none;line-height:1.35;transition:background .2s,color .2s}
.doc-toc a b{font-size:11px;font-weight:800;color:var(--green-deep);min-width:16px;flex:none;padding-top:2px}
@media(hover:hover) and (pointer:fine){.doc-toc a:hover{background:var(--green-soft);color:var(--ink)}}
/* активний розділ (скрол-спай) — лаймова пігулка, як «сьогодні» у графіку контактів */
.doc-toc a.on{background:var(--lime);color:var(--ink)}
.doc-toc a.on b{color:var(--ink)}
.doc-toc+.btn{width:100%}

.h-hours{grid-column:span 4;grid-row:span 1;background:var(--white);box-shadow:0 12px 30px -22px rgba(13,21,38,.3);display:flex;flex-direction:column;justify-content:center;gap:6px}
/* Обʼєднаний інфо-band (варіант F): статистика + графік + CTA одним лайм-рядком */
.iband{display:flex;align-items:center;gap:14px 20px;background:var(--lime);border-radius:20px;padding:18px 28px;flex-wrap:wrap}
.iband .ib-s{display:flex;flex-direction:column;gap:3px}
.iband .ib-s+.ib-s{border-left:1.5px solid rgba(13,21,38,.15);padding-left:20px}
.iband .ib-s b{font-size:28px;font-weight:900;letter-spacing:-.03em;line-height:1}
.iband .ib-s span{font-size:11.5px;line-height:1.2;color:rgba(13,21,38,.66);font-weight:800;white-space:nowrap}
.iband .ib-st{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--ink);border-radius:100px;padding:11px 16px;font-size:12.5px;font-weight:800;margin-left:auto;white-space:nowrap}
.iband .ib-st i{width:8px;height:8px;border-radius:50%;background:var(--green);animation:beat 1.6s infinite;flex-shrink:0}
/* SEO-текстова секція «Про центр» (2 колонки, внутрішня перелінковка) */
.seotxt{display:grid;grid-template-columns:1fr 1fr;gap:18px 46px}
.seotxt h3{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:22px 0 10px}
.seotxt h3:first-child{margin-top:0}
.seotxt p{font-size:16px;line-height:1.65;color:var(--mut)}
.seotxt a{color:var(--ink);font-weight:700;text-decoration:none;background-image:linear-gradient(var(--lime),var(--lime));background-repeat:no-repeat;background-position:0 88%;background-size:100% .34em;padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .25s}
@media(hover:hover) and (pointer:fine){.seotxt a:hover{background-size:100% .62em}}
.seotxt .seotxt-wide{grid-column:1/-1;border-top:1px solid rgba(13,21,38,.09);padding-top:8px}
.seonote{margin-top:38px;background:var(--white);border-radius:var(--r);padding:36px 40px;box-shadow:0 20px 50px -38px rgba(13,21,38,.35)}
/* SEO H3 стилі (обрані: маркер/стікер/необрут/пігулка/лінія) — реюз на всіх сторінках */
.seotxt h3.st-mark{display:inline;padding:0 2px;background-image:linear-gradient(var(--lime),var(--lime));background-repeat:no-repeat;background-position:0 88%;background-size:100% .42em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.seotxt .st-mark+p{margin-top:12px}
.seotxt h3.st-stick{display:inline-block;position:relative;z-index:0;padding:2px 6px;margin-left:8px}
.seotxt h3.st-stick::before{content:"";position:absolute;inset:-2px -8px;background:var(--lime);border-radius:6px;transform:rotate(-1.6deg);z-index:-1;transition:transform .3s var(--spring)}
.seotxt h3.st-brut{display:inline-block;background:#fff;border:2px solid var(--ink);border-radius:10px;padding:8px 14px;font-size:22px;box-shadow:5px 5px 0 var(--lime);transition:transform .2s,box-shadow .2s}
.seotxt h3.st-pill{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:100px;padding:10px 20px;font-size:20px}
.seotxt h3.st-pill em{font-style:normal;color:var(--lime)}
.seotxt h3.st-pill i{width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none}
.seotxt h3.st-rule{display:flex;align-items:center;gap:16px}
.seotxt h3.st-rule::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--green)}
.seotxt h3.st-rule::after{content:"";flex:1;height:1.5px;background:linear-gradient(90deg,var(--green) 0%,rgba(13,21,38,.08) 70%)}
@media(hover:hover) and (pointer:fine){
  .seotxt h3.st-stick:hover::before{transform:rotate(.8deg) scale(1.02)}
  .seotxt h3.st-brut:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--lime)}
}
@media(max-width:600px){
  .seonote{padding:26px 20px}
  .seotxt h3.st-pill{border-radius:18px;padding:9px 16px}
  .seotxt h3.st-brut{padding:7px 12px;font-size:18px}
}
@media(max-width:900px){.seotxt{grid-template-columns:1fr}.seotxt h3{margin-top:18px}}
.h-hours .hk{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:8px}
.h-hours .hk .hdot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.h-hours .hrow{display:flex;justify-content:space-between;font-size:14px}
.h-hours .hrow span{color:var(--mut)}.h-hours .hrow b{font-weight:700}

/* marquee */
.marq{overflow:hidden;padding:4px 0;background:var(--ink);margin-top:6px;border-radius:10px}
.marq-track{display:flex;width:max-content;animation:mq 90s linear infinite}
.marq-track:hover{animation-play-state:paused}
.marq-track span{font-weight:600;font-size:16px;color:#fff;display:flex;align-items:center;letter-spacing:-.04em}
.marq-track span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);margin:0 20px;flex-shrink:0}
@keyframes mq{to{transform:translateX(-50%)}}

/* stats counters */
.stats .bento{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--white);text-align:center;padding:38px 24px}
.stat:nth-child(1){background:var(--green-soft)}.stat:nth-child(2){background:var(--lime)}.stat:nth-child(3){background:var(--peach)}.stat:nth-child(4){background:var(--lav)}
.stat b{font-size:clamp(38px,5vw,60px);font-weight:900;letter-spacing:-.03em;line-height:1;display:block}
.stat:nth-child(1) b{color:var(--green-deep)}.stat:nth-child(2) b{color:var(--lime-d)}.stat:nth-child(3) b{color:var(--peach-d)}.stat:nth-child(4) b{color:var(--lav-d)}
.stat span{font-size:14px;font-weight:700;color:var(--mut);margin-top:8px;display:block}

/* directions (live specialties) */
.dir .bento{grid-template-columns:repeat(4,1fr)}
.dc{min-height:210px;display:flex;flex-direction:column;box-shadow:0 10px 30px -20px rgba(13,21,38,.3)}
.dc:hover{transform:translateY(-8px)}
.dc:nth-child(4n+1){background:var(--green-soft)}.dc:nth-child(4n+2){background:var(--sky)}.dc:nth-child(4n+3){background:var(--peach)}.dc:nth-child(4n){background:var(--lav)}
.dc .ic{width:56px;height:56px;border-radius:18px;background:#fff;display:grid;place-items:center;margin-bottom:auto;box-shadow:0 8px 18px rgba(13,21,38,.1);transition:transform .4s var(--spring)}
.dc:hover .ic{transform:scale(1.1) rotate(-8deg)}
.dc:nth-child(4n+1) .ic{color:var(--green-deep)}.dc:nth-child(4n+2) .ic{color:var(--sky-d)}.dc:nth-child(4n+3) .ic{color:var(--peach-d)}.dc:nth-child(4n) .ic{color:var(--lav-d)}
.dc h3{font-size:20px;font-weight:900;margin-top:22px;letter-spacing:-.01em}
.dc p{font-size:13.5px;color:var(--mut);margin-top:5px}
.dc .go{position:absolute;top:26px;right:26px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.7);display:grid;place-items:center;transition:transform .35s var(--spring),background .25s}
.dc:hover .go{background:var(--ink);color:#fff;transform:rotate(45deg)}
.dir .all{text-align:center;margin-top:26px}

/* напрямки-картки з фото (стиль команди v15): фото/градієнт зверху + info,
   стрілка .go і lift-ховер збережені */
/* напрямки: ink-картки (обраний D-мікс: офсет+кислотна тінь, підкреслення назви, CTA-розквіт) */
.scg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* 3 колонки (кроки страхових) — клас, НЕ інлайн: інлайн перебивав би
   мобільні медіа-правила .scg і лишав 3 стовпці на телефоні */
.scg--3{grid-template-columns:repeat(3,1fr)}
/* Напрямки (зліва, 3 кол) + SEO-тексти (справа) */
.dirgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start}
.dirgrid .scg{grid-template-columns:repeat(3,1fr)}
.dg-side .seotxt{grid-template-columns:1fr;gap:22px}
.dg-side .seonote{padding:30px 28px}
.dg-side .cta .box{grid-template-columns:1fr;padding:34px 30px;gap:24px;border-radius:32px}
.dg-side .cta h2{font-size:27px}
.dg-side .cta .box p{font-size:15px;line-height:1.7;margin:12px 0 0}
.dg-side .cta{margin-bottom:22px}
/* чорна seonote-картка (мова diag-band) */
.seonote-ink{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.seonote-ink::before{content:"";position:absolute;top:-110px;right:-70px;width:340px;height:340px;border-radius:50%;border:50px solid rgba(255,255,255,.06)}
.seonote-ink>*{position:relative;z-index:1}
.seonote-ink p{color:#9aa6b8}
.seonote-ink h3.st-pill{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.sck{position:relative;border-radius:22px;background:var(--white);color:var(--ink);padding:24px 22px;text-decoration:none;display:flex;flex-direction:column;gap:10px;min-height:210px;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent;box-shadow:0 12px 30px -24px rgba(13,21,38,.28);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .16s ease-out}
.sck .sct{position:absolute;top:12px;right:-6px;font-size:12px;font-weight:600;background:var(--lime);color:var(--ink);border-radius:7px;padding:5px 14px 5px 11px;transform:rotate(-6deg);box-shadow:0 4px 12px rgba(13,21,38,.14);z-index:1;transition:transform .3s var(--spring)}
.sck .sck-ic{width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;flex-shrink:0;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.sck .sck-ic svg{width:22px;height:22px}
.sck b{position:relative;z-index:0;align-self:flex-start;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.sck b::after{content:"";position:absolute;left:-3px;right:-3px;bottom:0;height:.36em;border-radius:3px;background:var(--lime);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.sck p{font-size:13.5px;color:var(--mut);line-height:1.55;flex:1;margin:0}
.sck .sck-cta{display:inline-flex;align-items:center;gap:7px;background:var(--lime);color:var(--ink);border-radius:100px;padding:9px 17px;font-size:15px;font-weight:700;width:fit-content;margin-top:auto;transition:padding .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.sck .sck-cta svg{width:0;height:12px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:width .3s cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (pointer:fine){
  .sck:hover{transform:translate(-4px,-4px);box-shadow:6px 6px 0 0 var(--lime),0 12px 30px -24px rgba(13,21,38,.28)}
  .sck:hover b::after{transform:scaleX(1)}
  .sck:hover .sck-cta{padding:9px 20px;box-shadow:0 0 0 4px rgba(220,244,106,.25)}
  .sck:hover .sck-cta svg{width:13px}
  .sck:hover .sck-ic{transform:rotate(-10deg)}
  .sck:hover .sct{transform:rotate(.5deg) scale(1.03)}
}
.dpc{background:var(--white);padding:0;overflow:hidden;box-shadow:0 12px 34px -24px rgba(13,21,38,.34);display:flex;flex-direction:column}
.dpc:hover{transform:translateY(-8px)}
.dpc .ph{height:200px;position:relative;overflow:hidden;background:linear-gradient(150deg,var(--green-soft),var(--sky))}
.dpc:nth-child(4n+2) .ph{background:linear-gradient(150deg,var(--sky),var(--lav))}
.dpc:nth-child(4n+3) .ph{background:linear-gradient(150deg,var(--peach),var(--green-soft))}
.dpc:nth-child(4n) .ph{background:linear-gradient(150deg,var(--lav),var(--peach))}
.dpc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--spring)}
.dpc:hover .ph img{transform:scale(1.06)}
/* тонування ЛИШЕ над фото (на чистому пастельному градієнті сірить) */
.dpc .ph.hasimg::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,color-mix(in srgb,var(--green) 28%,transparent),rgba(13,21,38,.34));mix-blend-mode:multiply;pointer-events:none}
/* фолбек без фото: великий знак напряму в глибокому тоні пастелі картки */
.dpc .ph .im{position:absolute;inset:0;z-index:1;display:grid;place-items:center;color:var(--green-deep);opacity:.55;transition:transform .6s var(--spring)}
.dpc:nth-child(4n+2) .ph .im{color:var(--sky-d)}
.dpc:nth-child(4n+3) .ph .im{color:var(--peach-d)}
.dpc:nth-child(4n) .ph .im{color:var(--lav-d)}
.dpc:hover .ph .im{transform:scale(1.12) rotate(-6deg)}
.dpc .go{position:absolute;top:16px;right:16px;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;transition:transform .35s var(--spring),background .25s}
.dpc:hover .go{background:var(--ink);color:#fff;transform:rotate(45deg)}
.dpc .info{padding:20px 22px}
.dpc h3{font-size:18px;font-weight:900;letter-spacing:-.01em}
.dpc .info p{font-size:13.5px;color:var(--mut);margin-top:3px}

/* хмара спеціальностей «До кого можна записатись» */
.cloud{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;max-width:920px;margin:0 auto}
.sp{background:var(--white);border-radius:100px;padding:13px 24px;font-weight:800;font-size:15px;color:var(--ink);text-decoration:none;box-shadow:0 3px 12px rgba(13,21,38,.05);transition:transform .3s var(--spring),background .2s,color .2s}
.sp:nth-child(4n+1):hover{background:var(--green);color:#fff}
.sp:nth-child(4n+2):hover{background:var(--sky-d);color:#fff}
.sp:nth-child(4n+3):hover{background:var(--peach-d);color:#fff}
.sp:nth-child(4n):hover{background:var(--lav-d);color:#fff}
.sp:hover{transform:translateY(-4px) rotate(-1.5deg)}
.sp.more{background:var(--ink);color:#fff}
.sp.more:hover{background:var(--green);color:#fff}

/* diagnostics dark band */
.diag-band{background:var(--ink);border-radius:var(--r);color:#fff;padding:52px 48px;position:relative;overflow:hidden}
.diag-band::after{content:"";position:absolute;bottom:-120px;right:-100px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--green) 40%,transparent),transparent 70%)}
.diag-band .db-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.diag-band h2{color:#fff;margin-bottom:14px}
.diag-band p{color:#9aa6b8;font-size:15.5px;max-width:380px}
.diag-band .kpi{display:flex;gap:26px;margin-top:24px}
.diag-band .kpi b{font-size:26px;font-weight:900;color:var(--lime);display:block}
.diag-band .kpi span{font-size:12.5px;color:#9aa6b8}
.dpills{display:flex;flex-wrap:wrap;gap:12px}
.dpill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:15px 20px;font-weight:700;font-size:15px;display:flex;align-items:center;gap:12px;transition:all .25s}
.dpill:hover{background:color-mix(in srgb,var(--green) 16%,transparent);border-color:color-mix(in srgb,var(--green) 55%,transparent)}
.dpill .d{width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--lime);display:grid;place-items:center;flex-shrink:0}

/* advantages */
.adv .bento{grid-template-columns:repeat(10,1fr)}
.ac{padding:30px 26px;box-shadow:0 10px 28px -22px rgba(13,21,38,.28)}
.ac:hover{transform:translateY(-5px) rotate(.5deg)}
.ac:nth-child(1){grid-column:span 4;background:var(--lime)}
.ac:nth-child(2){grid-column:span 3;background:var(--white)}
.ac:nth-child(3){grid-column:span 3;background:var(--white)}
.ac:nth-child(4){grid-column:span 5;background:var(--white)}
.ac:nth-child(5){grid-column:span 5;background:var(--green-soft)}
.ac:nth-child(6){grid-column:span 10;background:var(--ink);color:#fff}
.ac .n{font-size:13px;font-weight:900;letter-spacing:.08em;opacity:.5;display:block;margin-bottom:26px}
.ac h3{font-size:20px;font-weight:900;margin-bottom:7px}
.ac p{font-size:14px;color:var(--mut)}
.ac:nth-child(1) p{color:var(--lime-d)}.ac:nth-child(6) p{color:#9aa6b8}

/* doctors */
.docs .bento{grid-template-columns:repeat(4,1fr)}
.doc{background:var(--white);box-shadow:0 12px 34px -24px rgba(13,21,38,.34);text-align:center;padding:32px 24px}
.doc:hover{transform:translateY(-8px)}
.doc .av{width:96px;height:96px;border-radius:50%;margin:0 auto 16px;background:linear-gradient(150deg,var(--green-soft),var(--sky));display:grid;place-items:center;overflow:hidden;color:var(--green-deep);font-weight:900;font-size:30px;box-shadow:0 0 0 6px #fff,0 10px 24px -12px rgba(13,21,38,.3)}
.doc .av img{width:100%;height:100%;object-fit:cover}
.doc h3{font-size:17px;font-weight:800;letter-spacing:-.01em}
.doc .role{font-size:13px;color:var(--green-deep);font-weight:700;margin-top:5px}
.doc .title{font-size:12.5px;color:var(--mut);margin-top:4px}

/* reviews */
.rev .bento{grid-template-columns:repeat(3,1fr)}
.review{background:var(--white);padding:32px 30px;box-shadow:0 10px 30px -22px rgba(13,21,38,.28)}
.review:hover{transform:translateY(-5px)}
.review .stars{display:flex;gap:3px;color:var(--green);margin-bottom:16px}
.review p{font-size:15.5px;font-weight:600;line-height:1.5;margin-bottom:20px}
.review .who{display:flex;align-items:center;gap:12px}
.review .rav{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;font-size:15px}
.review .who b{font-size:15px;font-weight:800;display:block}
.review .who span{font-size:12.5px;color:var(--mut)}

/* FAQ */
.faq-wrap{max-width:820px;margin:0 auto;display:grid;gap:12px}
/* Модифікатор «на всю ширину»: рядок 1400px суцільним текстом не читається,
   тож повна ширина = ДВІ колонки. Акордеон від цього не страждає — bento.js
   і так закриває решту питань при відкритті будь-якого.
   align-items:start обовʼязковий: без нього картка-сусідка розтягується на
   висоту відкритої і під згорнутим питанням зяє порожнеча. */
.faq-wrap.faq-wide{max-width:none;grid-template-columns:1fr 1fr;align-items:start;gap:12px 16px}
@media(max-width:860px){.faq-wrap.faq-wide{grid-template-columns:1fr}}
.faq{background:var(--white);border-radius:20px;overflow:hidden;box-shadow:0 6px 20px -14px rgba(13,21,38,.2)}
.faq button{width:100%;text-align:left;background:none;border:none;padding:24px 26px;font-family:inherit;font-size:17px;font-weight:800;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq .ico{width:34px;height:34px;border-radius:50%;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;flex-shrink:0;transition:transform .35s var(--spring),background .25s}
.faq.open .ico{background:var(--green);color:#fff;transform:rotate(135deg)}
.faq .a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq .a p{padding:0 26px 24px;color:var(--mut);font-size:15px}

/* license band */
.licband{background:var(--ink);color:#fff;border-radius:var(--r);padding:36px 44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.licband .l{display:flex;align-items:center;gap:18px;font-weight:800;font-size:16px}
.licband .badge2{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:var(--lime);flex-shrink:0}
.licband .mono{font-weight:800;color:var(--lime);font-size:15px}

/* CTA */
.cta .box{background:linear-gradient(150deg,var(--green),var(--green-deep));color:#fff;border-radius:40px;padding:64px 56px;display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center;position:relative;overflow:hidden;box-shadow:0 40px 80px -36px color-mix(in srgb,var(--green-deep) 60%,transparent)}
.cta .box::before{content:"";position:absolute;top:-100px;right:-60px;width:340px;height:340px;border-radius:50%;border:50px solid rgba(255,255,255,.1)}
.cta .box>*{position:relative;z-index:1}
.cta h2{color:#fff}.cta h2 .hl::after{background:rgba(255,255,255,.28)}
.cta .box p{color:rgba(255,255,255,.9);font-size:16.5px;margin:14px 0 28px}
.pcards{display:grid;gap:12px}
.pcard{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);border-radius:18px;padding:16px 22px;display:flex;align-items:center;gap:15px;text-decoration:none;color:#fff;transition:background .25s,transform .35s var(--spring)}
.pcard:hover{background:rgba(255,255,255,.26);transform:translateX(5px)}
.pcard .ic{width:44px;height:44px;border-radius:50%;background:#fff;color:var(--green-deep);display:grid;place-items:center;flex-shrink:0}
.pcard b{font-size:17px;font-weight:900;display:block;line-height:1.2}.pcard span{font-size:12.5px;color:rgba(255,255,255,.82)}

/* footer */
/* Футер «Двоповерховий»: лаймовий CTA-band + чорнильний нав-поверх */
.bento-footer{border-radius:40px 40px 0 0;overflow:hidden;margin-top:16px}
.fband{background:var(--lime);color:var(--ink)}
.fband-in{display:flex;align-items:center;justify-content:space-between;gap:26px;padding-top:38px;padding-bottom:38px;flex-wrap:wrap}
.fband h3{font-size:clamp(24px,2.8vw,36px);font-weight:900;letter-spacing:-.03em;line-height:1.05;max-width:560px}
.fgo{width:96px;height:96px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;flex-shrink:0;will-change:transform}
.fgo svg{transition:transform .35s}
.fgo:hover svg{transform:rotate(45deg)}
/* Плавний магніт: transform наздоганяє курсор з мʼяким ease-out (JS ставить ціль на mousemove) */
.magnetic{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.btn.magnetic{transition:transform .5s cubic-bezier(.22,1,.36,1),background .25s,box-shadow .3s,padding .25s,font-size .25s}
.flow{background:var(--ink);color:#fff;padding:44px 0 26px}
.fcols{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
.fcols h4{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);margin-bottom:12px;font-weight:900}
.fcols a{display:block;color:rgba(255,255,255,.75);text-decoration:none;font-size:13.5px;font-weight:600;padding:3.5px 0;transition:color .2s}
.fcols a:hover{color:#fff}
.fcols .flogo{display:inline-block;font-weight:900;font-size:19px;margin-bottom:12px;color:#fff;text-decoration:none;padding:0}
.flogo sup{font-size:.62em;font-weight:800}
.fabout{font-size:13.5px;color:rgba(255,255,255,.6);font-weight:600;line-height:1.6;max-width:300px}
.fmeta{font-size:12.5px;color:rgba(255,255,255,.45);font-weight:600;line-height:1.6;margin-top:12px;max-width:300px}
.fcols a.fp{color:#fff;font-weight:800;font-size:15.5px;padding:2px 0}
.fcols a.fp:hover{color:var(--lime)}
.fpay{display:block;height:28px;width:auto;margin-top:14px;opacity:.9}
.fpay-row{display:none}
.fbot{display:flex;justify-content:space-between;align-items:center;padding-top:18px;font-size:12px;color:rgba(255,255,255,.45);font-weight:600;flex-wrap:wrap;gap:10px}
.fsoc{display:flex;gap:8px;margin-top:12px}
.fsoc a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;transition:all .25s;padding:0}
.fsoc a:hover{background:var(--lime);color:var(--lime-d);transform:translateY(-3px)}

/* back to top */
.btt{position:fixed;right:24px;bottom:24px;z-index:120;width:54px;height:54px;border-radius:50%;background:var(--ink);color:#fff;border:none;cursor:pointer;display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(13,21,38,.6);opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:all .4s var(--spring);-webkit-tap-highlight-color:transparent}
.btt.show{opacity:1;transform:none;pointer-events:auto}
.btt svg.arr{transition:transform .3s}
/* hover лише для миші: на iOS :hover «залипає» після тапа (кнопка лишалась зеленою до перезавантаження) */
@media(hover:hover) and (pointer:fine){
  .btt:hover{background:#fff;color:var(--ink)}
  .btt:hover svg.arr{transform:translateY(-3px)}
}
.btt .ring{position:absolute;top:-3px;left:-3px;width:60px;height:60px;pointer-events:none}
.btt .ring circle{fill:none;stroke:var(--lime);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .1s}

/* ── 404 ── */
.e404{padding:56px 0 40px}
.e404-card{position:relative;overflow:hidden;background:var(--white);border-radius:36px;padding:56px;box-shadow:0 26px 70px -40px rgba(13,21,38,.34);display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.e404-glow{position:absolute;top:-140px;right:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--green) 20%,transparent),transparent 70%);pointer-events:none}
.e404-main{position:relative;z-index:1}
.e404-num{display:flex;align-items:center;gap:6px;font-family:'Onest',sans-serif;font-weight:900;font-size:clamp(90px,13vw,150px);line-height:.9;letter-spacing:-.05em;color:var(--ink);margin:20px 0 14px}
.e404-o{position:relative;display:inline-grid;place-items:center;width:.86em;height:.86em}
.e404-o svg{position:absolute;inset:0;width:100%;height:100%}
.e404-o svg:first-child{animation:spin404 14s linear infinite}
@keyframes spin404{to{transform:rotate(360deg)}}
.e404-ecg{width:64% !important;height:auto !important;inset:auto !important;position:relative !important}
.e404-ecg path{stroke-dasharray:180;stroke-dashoffset:180;animation:ecg404 2.4s ease-in-out infinite}
@keyframes ecg404{0%{stroke-dashoffset:180}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-180}}
.e404-card h1{font-size:clamp(30px,4vw,46px);font-weight:900;letter-spacing:-.03em}
.e404-card p{color:var(--mut);font-size:17px;margin-top:14px;max-width:440px}
.e404-acts{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
.e404-quick{position:relative;z-index:1;display:grid;gap:12px}
.e404-tile{display:flex;align-items:center;gap:15px;background:var(--bg);border-radius:20px;padding:16px 18px;text-decoration:none;color:var(--ink);transition:transform .35s var(--spring),background .25s,box-shadow .35s}
.e404-tile:hover{transform:translateX(6px);background:#fff;box-shadow:0 14px 34px -20px rgba(13,21,38,.3)}
.e404-tile .ic{flex-shrink:0;width:50px;height:50px;border-radius:15px;background:#fff;color:var(--green-deep);display:grid;place-items:center;box-shadow:0 6px 16px rgba(13,21,38,.08);transition:transform .35s var(--spring)}
.e404-tile:hover .ic{transform:rotate(-8deg) scale(1.06)}
.e404-tile:nth-child(2) .ic{color:var(--sky-d)}.e404-tile:nth-child(3) .ic{color:var(--peach-d)}.e404-tile:nth-child(4) .ic{color:var(--lav-d)}
.e404-tile .tx{flex:1;min-width:0}
.e404-tile .tx b{display:block;font-size:16px;font-weight:900;letter-spacing:-.01em}
.e404-tile .tx small{display:block;font-size:12.5px;color:var(--mut);margin-top:2px}
.e404-tile .go{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--mut);transition:transform .35s var(--spring),background .25s,color .25s}
.e404-tile:hover .go{background:var(--ink);color:#fff;transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.e404-o svg:first-child,.e404-ecg path{animation:none}.e404-ecg path{stroke-dashoffset:0}}
@media(max-width:900px){.e404-card{grid-template-columns:1fr;gap:32px;padding:38px 26px}.e404-glow{width:280px;height:280px}}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--spring),transform .7s var(--spring)}
/* Тачі: та сама поява, але коротша (.45s, 14px, без пружини) — телефонні GPU
   растеризують великі блоки на старті переходу, і довга пружина видимо
   пригальмовувала; коротке вікно цього не показує */
@media(pointer:coarse){.rv{transform:translateY(14px);transition:opacity .45s ease-out,transform .45s ease-out}}
.rv.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{transition:none;opacity:1;transform:none}.marq-track,.btop-marq .mtrack,.spin{animation:none}.h-main h1 .hl::after{animation:none;transform:scaleX(1)}}

/* вужчі десктопи: лайв-статус ховаємо + компактніша featured-мега (щоб широка
   випадайка «Напрямки» не вилазила за вʼюпорт) */
@media(max-width:1240px){
  .btop-loc{display:none}
  .mega{grid-template-columns:240px auto}
  .mega-feat{padding:24px 20px}
  .mega-feat h4{font-size:20px;margin:12px 0 7px}
  .mega-feat .fp{font-size:12.5px;margin-bottom:16px}
  .mega-body{padding:18px}
  .mega-list{gap:0 12px}
  .mega-list a,.mega-cols a{font-size:13.5px;padding:9px 11px;gap:9px}
  .mega-cols{padding:16px 18px;gap:0 12px}
}
@media(max-width:1200px){.bnav .nav-link{padding:9px 10px;font-size:13.5px}}
/* щільний тір 941-1150: меню+топбар ужимаються, щоб десктоп-нав жив якнайдовше */
@media(max-width:1150px){
  .bnav .nav-link{padding:6px 5px;font-size:12px}
  .bnav .nav-link .chev{display:none}
  .bento-cta .btn{padding:8px 14px;font-size:12.5px}
  .bento-cta .mmo-cta{padding:7px 38px 7px 14px;font-size:12.5px}
  .bento-cta .mmo-cta .ca{width:27px;height:27px}
  .btop-soc{display:none}
  .btop-status{display:none}
}
/* 9 пунктів меню не влазять на середніх екранах → бургер уже з ≤1260
   (розкладка контенту перемикається окремо на ≤1040 нижче). */
@media(max-width:1120px){
  .bnav,.bento-cta .btn,.bento-cta .mmo-cta{display:none}.nav .burger{display:flex}.mnav-auth{display:grid}
  .btopbar{display:none}
  .progress{display:none}
}

@media(max-width:1040px){
  section.bsec{padding:26px 0}
  .hero .bento{grid-template-columns:repeat(6,1fr)}
  .h-main{grid-column:span 6}.h-disc{grid-column:span 6;grid-row:span 2}
  /* h-disc: телефони у 2 колонки + CTA на всю ширину */
  .h-disc .disc-acts{flex-direction:row;flex-wrap:wrap;gap:10px}
  .disc-phones{flex-direction:row;gap:10px;flex:1 1 100%}
  .disc-phone{flex:1;justify-content:center}
  .h-disc .btn.lime.big{flex:1 1 100%}
  /* iband: сітка 4×2 + чіп графіка по центру */
  .iband{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 16px;padding:22px 26px}
  .iband .ib-s+.ib-s{border-left:none;padding-left:0}
  .iband .ib-st{grid-column:1/-1;justify-content:center;margin-left:0}
  .diag-band .db-grid{grid-template-columns:1fr;gap:32px}
  .dir .bento{grid-template-columns:1fr 1fr}
  .scg{grid-template-columns:1fr 1fr}
  .dirgrid{grid-template-columns:1fr}
  .dirgrid .scg{grid-template-columns:1fr 1fr}
  .sck b{font-size:18px}
  .docs .bento{grid-template-columns:1fr 1fr}
  .adv .bento{grid-template-columns:1fr 1fr}.ac{grid-column:span 1 !important}
  .rev .bento{grid-template-columns:1fr}
  .cta .box{grid-template-columns:1fr;padding:44px 28px}
  .fcols{grid-template-columns:1fr 1fr;gap:30px 36px}
  .fcols>div:first-child{grid-column:1/-1}
}
@media(max-width:600px){
  .hero .bento,.stats .bento{grid-template-columns:1fr}
  .h-main,.h-disc,.h-hours,.stat{grid-column:span 1}
  .dir .bento,.docs .bento,.adv .bento{grid-template-columns:1fr}
  /* Футер на телефоні: band = заклик + коло в один ряд; нав 2×2 (Клініка|Контакти поруч) */
  .fband-in{flex-wrap:nowrap;align-items:center;gap:16px;padding-top:42px;padding-bottom:42px}
  .fband h3{font-size:22px;flex:1}
  .fgo{width:64px;height:64px}
  .fgo svg{width:26px;height:26px}
  .flow{padding:10px 0 20px}
  .fcols{gap:28px 24px;padding-bottom:26px}
  .fcols h4{font-size:11.5px}
  .fcols a{font-size:15px;padding:4px 0}
  .fabout{font-size:14.5px}
  .fmeta{font-size:13.5px}
  .fcols a.fp{font-size:18px}
  .fcols .fpay{display:none}
  .fpay-row{display:block;height:26px;margin:22px 0 0}
  .fbot{flex-direction:column;align-items:flex-start;gap:4px;padding-top:14px;font-size:12.5px}
  .wrap{padding:10px 10px}.h-main{padding:36px 28px}.card{padding:26px}
  .fabout{max-width:100%}
  .bento-top{padding-top:10px}.bento-header{padding:0 8px}.licband,.diag-band{padding:28px}
  .blogo img.clogo{height:34px;margin-left:-10px}
  .scg{gap:10px}
  /* Кроки (3 картки): на телефоні одна колонка — 2+1 виглядало б рвано */
  .scg--3{grid-template-columns:1fr}
  .sck{min-height:190px;padding:18px 16px}
  section.bsec{padding:0!important}
  /* iband: сітка 2×4, чіп графіка знизу по центру */
  .iband{grid-template-columns:1fr 1fr;gap:16px 12px;padding:20px 22px}
  .iband .ib-s b{font-size:24px}
  .iband .ib-st{white-space:normal;text-align:center;font-size:12px;padding:10px 12px}
  /* h-disc: телефони назад у стовпчик — великі тап-цілі */
  .disc-phones{flex-direction:column}
  .disc-phone{flex:none;justify-content:center}
}

/* ============================================================
   INNER PAGES — department / departments / contacts (bento)
   ============================================================ */
/* breadcrumbs — шеврон-стрічка: сегменти-стрілки входять один в один,
   глибина шляху видна за тоном, поточна — ink з лаймом. Розмітка спільна
   (nav.crumbs з .sep) — сепаратори ховаємо, стрілки дає clip-path.
   На вузьких екранах стрічка скролиться горизонтально (сегменти nowrap). */
.crumbs{display:flex;align-items:stretch;margin-bottom:20px;font-size:12.5px;font-weight:500;filter:drop-shadow(0 4px 12px rgba(13,21,38,.12));overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.crumbs::-webkit-scrollbar{display:none}
.crumbs .sep{display:none}
.crumbs a,.crumbs .here{position:relative;display:flex;align-items:center;flex:none;white-space:nowrap;background:var(--white);color:var(--ink);text-decoration:none;padding:10px 18px 10px 26px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%);transition:color .2s}
.crumbs a:first-child{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);border-radius:10px 0 0 10px;padding-left:18px}
.crumbs a:nth-of-type(2){background:color-mix(in srgb,var(--white) 70%,var(--bg))}
.crumbs a:nth-of-type(3){background:color-mix(in srgb,var(--white) 40%,var(--bg))}
.crumbs a{color:var(--mut)}
.crumbs a:hover{color:var(--ink)}
.crumbs .here{background:var(--ink);color:#fff;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,12px 50%);border-radius:0 10px 10px 0}

/* ── Глобальний пошук (бенто-модал) ── */
body.bs-lock{overflow:hidden}
/* мінімальна інсет-пігулка: «втоплене» сіре коло, зелений внутрішній обвід
   на hover; іконка приглушена → ink на hover (варіант F галереї) */
.bsearch-btn{width:34px;height:34px;border:none;border-radius:50%;background:#f4f6f5;box-shadow:inset 0 1px 2px rgba(13,21,38,.12);display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:none;transition:background .2s,color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.bsearch-btn svg{width:16px;height:16px}
@media(hover:hover) and (pointer:fine){.bsearch-btn:hover{background:#d9f4eb}}
.bsearch{position:fixed;inset:0;z-index:260;background:rgba(13,21,38,.45);display:none;padding:9vh 18px 18px;overflow-y:auto}
.bsearch.open{display:block}
.bs-card{max-width:640px;margin:0 auto;background:#fff;border-radius:24px;box-shadow:0 40px 90px -30px rgba(13,21,38,.5);overflow:hidden}
.bs-top{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid rgba(13,21,38,.08)}
.bs-lupa{color:var(--ink);flex:none}
#bsInput{flex:1;min-width:0;border:none;outline:none;font-family:inherit;font-size:17px;font-weight:600;color:var(--ink);background:transparent}
#bsInput::placeholder{color:#a2a9b6;font-weight:500}
#bsInput::-webkit-search-cancel-button{display:none}
.bs-x{width:34px;height:34px;border-radius:50%;background:#f4f6f5;box-shadow:inset 0 1px 2px rgba(13,21,38,.12);border:none;display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:none}
.bs-res{max-height:62vh;overflow-y:auto;padding:10px}
.bs-hint{padding:24px 14px;text-align:center;color:var(--mut);font-size:14px;line-height:1.6}
.bs-g{padding:4px 0}
.bs-g h6{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#0d1526;padding:8px 12px 4px}
.bs-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;text-decoration:none;color:var(--ink)}
@media(hover:hover) and (pointer:fine){
  .bs-item:hover{background:var(--bg)}
  /* Іконка — єдине кольорове місце рядка, тож саме вона й реагує: лайм + нахил */
  .bs-item:hover .ic{background:var(--lime);color:var(--ink);transform:rotate(-8deg) scale(1.14)}
}
.bs-item .ic{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none;transition:background .25s,color .25s,transform .4s var(--spring)}
.bs-item .ic svg{width:16px;height:16px}
.bs-item .d{flex:1;min-width:0}
.bs-item b{display:block;font-size:15px;font-weight:500;line-height:1.25}
.bs-item small{display:block;color:var(--mut);font-size:12.5px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-item .pr{font-weight:800;font-size:14px;white-space:nowrap}
@media(max-width:600px){.bsearch{padding:12px}.bs-card{border-radius:20px}.bs-res{max-height:70vh}}

/* сторінка послуги: нумеровані кроки + лінки в прайсі */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;counter-reset:st;padding:0;margin:0;align-items:stretch}
.steps li{list-style:none;counter-increment:st;background:var(--white);border-radius:16px;padding:16px 18px 16px 60px;position:relative;box-shadow:0 10px 26px -22px rgba(13,21,38,.3);font-size:15px;line-height:1.55}
.steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:16px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;transition:background-color .2s,color .2s}
/* мікро-динаміка контент-плиток (лише transform/shadow — дешево для PageSpeed) */
.ticks li,.steps li{transition:transform .3s var(--spring),box-shadow .3s}
@media(hover:hover) and (pointer:fine){
  .ticks li:hover,.steps li:hover{transform:translateY(-3px);box-shadow:0 14px 30px -20px rgba(13,21,38,.35)}
  .steps li:hover::before{background:var(--lime);color:var(--ink)}
}
/* Посилання в прайсі: маркер за замовчуванням — ЛИШЕ стрілка ↗ (постійне
   кислотне підкреслення було занадто). Hover = «wipe-through»: заокруглена
   (pill) кислотна смуга ВʼЇЖДЖАЄ зліва і закінчується РІВНО на кінці тексту
   (20px = стрілка 13 + її відступ 5 + правий падінг 2 — НЕ залазить під
   стрілку), а при відведенні курсора ВИХОДИТЬ управо, не відкочуючись назад.
   Механіка: ::before-смуга; у станах міняються анкери left/auto ↔ right:20px
   (auto↔довжина не інтерполюється — стрибок, і він невидимий при повній або
   нульовій ширині), а transition ЛИШЕ на width. position:relative;z-index:0
   тримає ::before (z-index:-1) НАД фоном рядка, але ПІД текстом. Смуга —
   градієнт lime→green (мова булітів мега-меню); перший рядок background —
   чистий lime, фолбек для браузерів без color-mix, НЕ прибирати. */
.prow-link{color:inherit;text-decoration:none;position:relative;z-index:0;padding:0 2px}
.prow-link::before{content:"";position:absolute;z-index:-1;bottom:.07em;height:.34em;border-radius:99px;
  left:auto;right:20px;width:0;
  background:var(--lime);
  transition:width .38s cubic-bezier(.25,.8,.25,1)}
.prow-link::after{content:"";display:inline-block;width:13px;height:13px;margin-left:5px;vertical-align:-1px;
  opacity:.5;transition:transform .38s cubic-bezier(.25,.8,.25,1),opacity .38s;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M9 7h8v8'/></svg>") center/contain no-repeat}
@media(hover:hover) and (pointer:fine){
  .prow-link:hover::before{left:0;right:auto;width:calc(100% - 20px);background:linear-gradient(90deg,var(--lime) 30%,color-mix(in srgb,var(--lime) 45%,var(--green)))}
  .prow-link:hover::after{transform:translate(3px,-3px);opacity:1}
}

/* page hero — велика біла bento-плитка */
.pg-hero{padding:20px 0 0}
.pg-hero .ph-card{position:relative;overflow:hidden;background:var(--white);border-radius:var(--r);padding:48px 56px;box-shadow:0 20px 50px -34px rgba(13,21,38,.3)}
.pg-hero h1{font-size:clamp(34px,4.8vw,60px);font-weight:900;margin:16px 0 14px;max-width:900px}
.pg-hero .lead{font-size:17px;color:var(--mut);max-width:660px}
.pg-acts{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}
.pg-note{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:13px;font-weight:800;color:var(--green-deep)}
.pg-note svg{flex-shrink:0}

/* ліва колонка + sticky-сайдбар запису */
.twocol{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.sideb{position:sticky;top:100px;background:var(--ink);color:#fff;border-radius:var(--r);padding:30px 28px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.sideb::after{content:"";position:absolute;top:-110px;right:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--green) 38%,transparent),transparent 70%);pointer-events:none}
.sideb>*{position:relative;z-index:1}
.sideb .sb-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border-radius:100px;padding:8px 16px;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#fff;width:fit-content}
.sideb .sb-badge i{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:beat 1.6s infinite}
.sideb .sb-price small{display:block;font-size:12px;color:#9aa6b8;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.sideb .sb-price b{font-size:clamp(34px,3vw,44px);font-weight:900;letter-spacing:-.03em;color:var(--lime);line-height:1.1}
/* підписи під ціною (термін акції, тривалість) — лайм, розмір/вага як .sb-row */
.sideb .sb-price span{display:block;font-size:13.5px;font-weight:600;color:var(--lime);margin-top:4px}
.sideb .sb-row{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;font-weight:600;color:#dbe0e9}
.sideb .sb-row svg{flex-shrink:0;color:var(--lime);margin-top:1px}
.sideb .btn{width:100%}

/* сторінка послуги: hero-сітка в мові hero головної — біла картка зліва,
   ink-сайдбар справа на рівні hero; сайдбар лишається sticky і супроводжує
   контент (grid-area side тягнеться на обидва рядки) */
.svcgrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"hero side" "body side";gap:16px;align-items:start}
.svc-hero{grid-area:hero}
.svc-body{grid-area:body;padding-top:18px}
.svcgrid .sideb{grid-area:side}
/* колонка сайдбара: картка ціни + окрема картка лікарів; sticky тепер на колонці */
.svcgrid .sidecol{grid-area:side;position:sticky;top:100px;display:flex;flex-direction:column;gap:16px;min-width:0}
/* ГОЧА: саме relative, НЕ static — .sideb мусить лишатись containing block
   для свого ::after (глоу right:-90px), інакше той тікає з-під overflow:hidden
   і дає 90px горизонтального пану на iOS */
.sidecol .sideb{position:relative;top:auto}
/* секційні h2 сторінки послуги — компактні (девтулз-спека) */
.svc-body h2{font-size:clamp(32px,4.6vw,30px);font-weight:900}
.svc-hero .tag{display:inline-flex;align-items:center;gap:9px;background:var(--lime);color:var(--ink);border-radius:100px;padding:9px 18px;font-weight:800;font-size:13px;width:fit-content;margin-bottom:22px}
.svc-hero .tag i{width:9px;height:9px;border-radius:50%;background:var(--green);animation:beat 1.6s infinite}
.svc-hero h1{font-size:clamp(32px,3.9vw,50px);font-weight:900;margin:0 0 18px;max-width:900px}
.svc-hero .lead{font-size:17.5px;color:var(--mut);max-width:660px;margin:0}
/* кнопки сайдбара — як у h-disc: телефони-пігулки + лайм CTA зі стрілкою */
.sideb .disc-acts{margin-top:4px}
.sideb .btn.lime.big{width:100%;padding:15px 54px 15px 16px;font-size:15px;white-space:nowrap}
.sideb .sb-sched{display:flex;flex-direction:column;gap:2px}
.sideb .sb-sched .sb-sched-t{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--lime);margin-bottom:2px}
/* сторінка лікаря: бейдж досвіду (ink) поруч із посадою; рахується від року початку */
.svc-hero .tag.tag-exp{background:var(--ink);color:#fff;gap:7px}
.svc-hero .tag.tag-exp svg{color:var(--lime)}
/* «Про лікаря» як таймлайн: роки в пігулці, текст картки; без років — звичайний абзац-картка */
.bio-tl{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:760px}
.bio-tl li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;background:var(--white);border-radius:16px;padding:14px 18px;box-shadow:0 6px 18px -12px rgba(13,21,38,.18);transition:transform .3s var(--spring),box-shadow .3s}
.bio-tl li:hover{transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(13,21,38,.28)}
.bio-tl li.plain{grid-template-columns:1fr}
.bio-tl .yr{display:inline-flex;align-items:center;white-space:nowrap;font-size:12.5px;font-weight:800;letter-spacing:.01em;color:var(--green-deep);background:var(--green-soft);border-radius:100px;padding:5px 11px;margin-top:1px;box-shadow:inset 0 1px 2px rgba(13,21,38,.12)}
.bio-tl .tx{font-size:15.5px;line-height:1.6;color:var(--ink)}
.svc-body .bio-card{background:var(--white);border-radius:18px;padding:20px 24px;box-shadow:0 6px 18px -12px rgba(13,21,38,.18)}
.svc-body .bio-card p{color:var(--ink)}
.doc .exp{display:inline-flex;align-items:center;width:fit-content;margin-top:8px;font-size:12px;font-weight:800;color:var(--green-deep);background:var(--green-soft);border-radius:100px;padding:4px 10px}
@media(max-width:640px){.bio-tl li{grid-template-columns:1fr;gap:8px}}
/* акція: закреслена стара ціна + лайм-бейдж; промо-бокс з описом */
.svc-hero .tagrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.svc-hero .tagrow .tag{margin-bottom:0}
.svc-hero .tag.tag-promo{background:var(--ink);color:#fff}
.sideb .sb-oldrow{display:flex;align-items:center;gap:10px;margin:3px 0 1px}
.sideb .sb-oldrow s{font-size:18px;font-weight:800;color:var(--lime);text-decoration-thickness:2px}
.sideb .sb-pbadge{display:inline-flex;align-items:center;width:fit-content;background:#fff;color:var(--ink);border-radius:100px;padding:4px 11px;font-size:12px;font-weight:900;letter-spacing:.02em;white-space:nowrap}
/* при акції нова ціна — біла (лайм переходить на стару ціну) */
.sideb .sb-price--promo b{color:#fff}
/* ряд ціни: зліва ціна, справа обертовий круг-стікер (при знижці, трохи піднятий) */
.sideb .sb-pricerow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sideb .sb-pricerow .sb-price{flex:1;min-width:0}
.sideb .sb-pricerow .spin{margin-right:0;margin-top:-20px}
/* бейдж всередині sb-price: перебиваємо .sb-price span (специфічність 0,2,1) */
.sideb .sb-price .sb-pbadge{display:inline-flex;font-size:12px;font-weight:900;color:var(--ink);margin-top:0}
.sideb .sb-promo{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.sideb .sb-promo b{font-size:14px;font-weight:800;color:#fff}
.sideb .sb-promo p{font-size:12.5px;color:#9aa6b8;margin:0;line-height:1.55;max-width:100%}
.sideb .sb-promo .more{font-size:12.5px;font-weight:800;color:var(--lime);text-decoration:none;width:fit-content}
@media(hover:hover) and (pointer:fine){.sideb .sb-promo .more:hover{text-decoration:underline}}
.sideb .sb-pterm{font-size:12px;color:#9aa6b8}

/* «Хто виконує» (сторінки послуг): СВІТЛА бенто-картка «колода» під ціною —
   картки внапуск (grid-стек 1/1, порядок = nth-child), клік по верхній АБО
   кнопка «Наступний лікар» ротує колоду (bento.js deckNext) */
.sidedocs{background:var(--white);border-radius:22px;padding:24px;box-shadow:0 20px 50px -38px rgba(13,21,38,.45)}
.sd-cap{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:13px}
.svcdeck .deck{display:grid}
.svcdeck .deck .card{grid-area:1/1;display:flex;align-items:flex-start;gap:13px;background:#fff;border:1px solid rgba(13,21,38,.08);border-radius:18px;padding:15px;box-shadow:0 14px 34px -24px rgba(13,21,38,.5);transition:transform .45s var(--spring),opacity .3s}
.svcdeck .deck .card:nth-child(1){z-index:3}
.svcdeck .deck .card:first-child:not(:only-child){cursor:pointer}
.svcdeck .deck .card:nth-child(2){z-index:2;transform:translateY(12px) scale(.95);opacity:.65;pointer-events:none}
.svcdeck .deck .card:nth-child(n+3){z-index:1;transform:translateY(22px) scale(.9);opacity:.35;pointer-events:none}
.svcdeck .deck .card:nth-child(n+4){opacity:0}
.svcdeck .avc{width:64px;height:64px;border-radius:14px;background:linear-gradient(150deg,var(--green-soft),var(--sky));display:grid;place-items:center;color:var(--green-deep);font-weight:900;font-size:19px;overflow:hidden;flex:none}
.svcdeck .avc img{width:100%;height:100%;object-fit:cover}
.svcdeck .card .avlink{display:block;flex:none;border-radius:14px}
.svcdeck .card b{display:block;font-size:14px;font-weight:900;letter-spacing:-.01em}
.svcdeck .card b a{color:inherit;text-decoration:none;background-image:linear-gradient(var(--lime),var(--lime));background-repeat:no-repeat;background-position:0 88%;background-size:0% .32em;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background-size .25s}
.svcdeck .card .role{font-size:11.5px;color:var(--green-deep);font-weight:800;margin-top:2px}
/* маленька лайм-кнопка профілю з ink-колом-стрілкою (мова btn-arr/mmo-cta) */
.svcdeck .card .dgo{position:relative;display:inline-flex;align-items:center;margin-top:9px;background:var(--lime);color:var(--ink);border-radius:100px;padding:7px 40px 7px 14px;font-size:12px;font-weight:800;text-decoration:none;transition:transform .3s var(--spring),box-shadow .3s}
.svcdeck .card .dgo .ca{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;overflow:hidden}
.svcdeck .card .dgo .ca svg{grid-area:1/1;width:11px;height:11px}
.svcdeck .card .dgo .ca .a1{animation:ctafly1 3.8s cubic-bezier(.6,0,.3,1) infinite}
.svcdeck .card .dgo .ca .a2{animation:ctafly2 3.8s cubic-bezier(.6,0,.3,1) infinite}
@media(prefers-reduced-motion:reduce){.svcdeck .card .dgo .ca .a1{animation:none}.svcdeck .card .dgo .ca .a2{display:none}}
/* оживлення: фронт підіймається з зелен-тінню, задні розгортаються віялом,
   фото зумиться, імʼя дістає лайм-маркер */
.svcdeck .avc img{transition:transform .5s var(--spring)}
@media(hover:hover) and (pointer:fine){
  .svcdeck .deck:hover .card:nth-child(2){transform:translateY(14px) scale(.95) rotate(-2.2deg)}
  .svcdeck .deck:hover .card:nth-child(n+3){transform:translateY(24px) scale(.9) rotate(2.2deg)}
  .svcdeck .deck .card:first-child:not(:only-child):hover{transform:translateY(-3px);box-shadow:0 18px 42px -24px rgba(13,21,38,.55),0 12px 30px -18px color-mix(in srgb,var(--green) 45%,transparent)}
  .svcdeck .card:hover .avc img{transform:scale(1.09) rotate(-1.5deg)}
  .svcdeck .card b a:hover{background-size:100% .32em}
  .svcdeck .card .dgo:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px color-mix(in srgb,var(--green) 60%,transparent)}
}
/* варіант «sck»: лікарі = картки в мові спеціальностей головної (реюз .sck —
   стікер/ink-коло/лайм-CTA/фірмовий hover); обгортка без білої підкладки */
.sidedocs--sck{background:none;box-shadow:none;padding:0}
.sdgrid{display:grid;gap:12px}
.sck--doc{min-height:0;gap:8px;padding:20px}
.sck--doc b{font-size:18px;font-weight:800}
.sck--doc .role{font-size:15px;color:var(--ink);margin-top:-3px}
.sck--doc .sck-cta{margin-top:6px}
.svcdeck .deck-ctr{display:flex;align-items:center;justify-content:space-between;margin-top:32px}
.svcdeck .deck-cnt{font-size:11.5px;color:var(--mut);font-weight:800;letter-spacing:.06em}
.svcdeck .deck-next{display:inline-flex;align-items:center;gap:8px;border:none;font-family:inherit;cursor:pointer;background:var(--ink);color:var(--lime);border-radius:100px;padding:9px 16px;font-size:12px;font-weight:800;transition:transform .3s var(--spring)}
.svcdeck .deck-next svg{transition:transform .3s var(--spring)}
@media(hover:hover) and (pointer:fine){.svcdeck .deck-next:hover{transform:translateY(-1px)}.svcdeck .deck-next:hover svg{transform:translateX(3px)}}

/* Схожі послуги + FAQ в один рядок (2 стовпці); один блок → на всю ширину.
   Десктоп: FAQ зліва, Схожі справа (CSS order — DOM не чіпаємо, щоб на
   мобільному стек лишався у поточному порядку Схожі→FAQ) */
.svc-duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.svc-duo>div{min-width:0}
.svc-duo>div:only-child{grid-column:1/-1}
@media(min-width:901px){.svc-duo>div:first-child{order:2}}
@media(max-width:900px){.svc-duo{grid-template-columns:1fr;gap:38px}}

/* Сторінка профілю лікаря (/doctors/{slug}) — мова svcgrid */
.sideb .docph{width:100%;aspect-ratio:4/3.4;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;color:var(--lime);font-weight:900;font-size:38px}
.sideb .docph img{width:100%;height:100%;object-fit:cover;display:block}
.sideb .sb-specs{display:flex;flex-wrap:wrap;gap:7px}
.sideb .sb-specs a{display:inline-flex;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:7px 13px;font-size:12px;font-weight:800;color:#dbe0e9;text-decoration:none;transition:border-color .2s,color .2s}
@media(hover:hover) and (pointer:fine){.sideb .sb-specs a:hover{border-color:var(--lime);color:#fff}}
.svc-body .biotext p{font-size:16px;line-height:1.72;color:var(--mut);margin:0 0 14px;max-width:760px}
.svc-body .biotext p:last-child{margin-bottom:0}

/* FAQ «чат-діалог» (сторінки послуг): питання = ink-бульбашка-кнопка (акордеон,
   той самий .faq-JS), відповідь = бульбашка з аватаром клініки */
.fqchat{max-width:none;margin:0;display:grid;gap:16px}
.fqchat .faq{background:none;border-radius:0;box-shadow:none;overflow:visible}
.fqchat .faq button{width:auto;max-width:78%;margin-right:auto;background:#fff;color:var(--ink);border:1px solid rgba(13,21,38,.06);border-radius:22px 22px 22px 6px;padding:14px 20px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:12px;text-align:left;justify-content:flex-start;box-shadow:0 10px 26px -20px rgba(13,21,38,.3);transition:transform .3s var(--spring),box-shadow .3s}
.fqchat .faq button::after{content:"+";width:24px;height:24px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:17px;font-weight:600;line-height:1;flex:none;transition:transform .35s var(--spring)}
.fqchat .faq.open button::after{transform:rotate(45deg)}
@media(hover:hover) and (pointer:fine){.fqchat .faq button:hover{transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(13,21,38,.4)}}
.fqchat .faq .a{max-height:0;overflow:hidden;transition:max-height .26s cubic-bezier(.3,0,.2,1)}
/* відповідь «прилітає» як чат-повідомлення (opacity/transform — дешево) */
.fqchat .ans{display:flex;flex-direction:row-reverse;gap:10px;max-width:85%;margin-left:auto;padding-top:12px;opacity:0;transform:translateY(8px) scale(.98);transform-origin:top right;transition:opacity .22s ease,transform .32s var(--spring)}
.fqchat .faq.open .ans{opacity:1;transform:none}
.fqchat .av{width:38px;height:38px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-weight:900;font-size:11.5px;flex:none;letter-spacing:.02em}
.fqchat .ans p{background:var(--white);border-radius:22px 6px 22px 22px;padding:14px 20px;font-size:14.5px;color:var(--ink);line-height:1.65;margin:0;box-shadow:0 6px 18px -14px rgba(13,21,38,.3)}
@media(max-width:600px){.fqchat .faq button{max-width:92%}.fqchat .ans{max-width:100%}}

/* сторінка /promo: картки акцій (.prcard — НЕ .pcard, той зайнятий телефон-картками) */
/* ── Примітка під прайсом ────────────────────────────────────────────────
   Була сірим рядком 13px, у якому посилання на знижки і акції фізично не
   читалися. Тепер картка: застереження нормальним кеглем + лінки-пігулки в
   мові героїчних чипів (сірий інсет), які на ховері стають чорнильними. */
/* Фон ЯВНИЙ: базовий .card — лише геометрія (radius/padding/overflow), без
   заливки. Без нього картка прозора, а сірі пігулки #f4f6f5 зливаються з
   фоном сторінки #f3f6f0 — тобто повертається та сама невидимість. */
.pnote{margin-top:16px;padding:20px 24px;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:14px 22px;
  background:var(--white);box-shadow:0 12px 34px -24px rgba(13,21,38,.34)}
.pnote-txt{font-size:14px;line-height:1.6;color:var(--mut);max-width:620px;margin:0}
.pnote-acts{display:flex;flex-wrap:wrap;gap:10px}
.pnote-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:100px;
  background:#f4f6f5;color:var(--ink);font-size:13px;font-weight:800;text-decoration:none;
  box-shadow:inset 0 1px 2px rgba(13,21,38,.12);transition:background .22s,color .22s,box-shadow .22s}
@media(hover:hover){.pnote-btn:hover{background:var(--ink);color:#fff;box-shadow:none}}
@media(max-width:600px){.pnote{padding:18px 20px}.pnote-btn{font-size:12.5px;padding:9px 15px}}

.promo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prcard{position:relative;background:var(--white);border-radius:var(--r);padding:28px;box-shadow:0 10px 30px -22px rgba(13,21,38,.3);display:flex;flex-direction:column;align-items:flex-start;gap:12px;color:var(--ink)}
.prcard .prb-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.prcard .prb{display:inline-flex;align-items:center;background:var(--lime);color:var(--ink);border-radius:100px;padding:7px 15px;font-size:16px;font-weight:900;letter-spacing:-.01em}
.prcard .term{font-size:12.5px;font-weight:800;color:var(--mut)}
.prcard h3{font-size:19px;font-weight:900;letter-spacing:-.02em}
.prcard .cond{display:inline-flex;width:fit-content;background:var(--green-soft);color:var(--green-deep);border-radius:100px;padding:5px 12px;font-size:12px;font-weight:800}
.prcard p{font-size:14.5px;color:var(--mut);line-height:1.65;margin:0}
.prcard .btn{margin-top:auto;width:fit-content}
@media(max-width:1040px){.promo-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.promo-grid{grid-template-columns:1fr}.prcard{padding:24px}}

/* ── Світлий сайдбар: лише сторінка лікаря ──────────────────────────────
   На чорному тлі ряд портретів читався похмуро, тож картка запису тут
   світла. Клас точковий (.sideb--light), сторінки послуг і напрямів
   лишаються чорнильними. */
.sideb--light{background:var(--white);color:var(--ink);box-shadow:0 20px 44px -30px rgba(13,21,38,.4)}
.sideb--light::after{content:none}
/* Фото — шапка картки: на всю ширину, від самого верху, без рамки.
   Відʼємні поля компенсують padding .sideb (30px 28px). */
.sideb--light .docph{position:relative;margin:-30px -28px -10px;width:auto;aspect-ratio:4/3.2;border:0;border-radius:var(--r) var(--r) 0 0}
.sideb--light .docph img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
/* біла сходинка: нижній край фото перекривається блоком з інформацією */
.sideb--light .docph::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:22px;background:var(--white);border-radius:22px 22px 0 0;pointer-events:none}
@media(hover:hover) and (pointer:fine){.sideb--light .docph:hover img{transform:scale(1.05)}}
.sideb--light .sb-badge{background:var(--green-soft);color:var(--green-deep)}
.sideb--light .sb-badge i{background:var(--green)}
.sideb--light .docph{background:#f4f6f5;border-color:rgba(13,21,38,.08);color:var(--green-deep)}
.sideb--light .sb-specs a{background:#f4f6f5;border-color:transparent;color:var(--ink);box-shadow:inset 0 1px 2px rgba(13,21,38,.10);transition:background .22s,color .22s,box-shadow .22s}
@media(hover:hover) and (pointer:fine){.sideb--light .sb-specs a:hover{background:var(--ink);color:var(--lime);box-shadow:inset 0 1px 2px rgba(13,21,38,0)}}
.sideb--light .sb-row{color:#3c4657}
.sideb--light .sb-row{align-items:center;gap:12px}
.sideb--light .sb-row svg{box-sizing:border-box;width:30px;height:30px;padding:7px;flex:none;border-radius:50%;background:var(--green-soft);color:var(--green-deep);box-shadow:inset 0 1px 2px rgba(13,21,38,.12);margin-top:0}
.sideb--light .sb-sched .sb-sched-t{color:var(--mut)}
.sideb--light .sb-link{color:var(--green-deep)}
@media(hover:hover) and (pointer:fine){.sideb--light .sb-link:hover{color:var(--ink)}}
/* Стрічка колег: гортається свайпом і стрілками, картки з фото на всю ширину */
.sb-docs{margin-top:6px;padding-top:14px;border-top:1px solid rgba(13,21,38,.08)}
.sb-docs-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sb-docs-t{font:800 11px/1 'Onest',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.sb-nav{display:flex;gap:6px;flex:none}
.sb-nav button{width:28px;height:28px;border-radius:50%;border:0;background:#f4f6f5;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 1px 2px rgba(13,21,38,.12);transition:background .2s,color .2s,opacity .2s}
@media(hover:hover) and (pointer:fine){.sb-nav button:hover:not([disabled]){background:var(--ink);color:var(--lime);box-shadow:none}}
.sb-nav button[disabled]{opacity:.3;cursor:default}
.sb-docs-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 0 18px;margin-bottom:-12px}
.sb-docs-track::-webkit-scrollbar{display:none}
.sb-doc{flex:0 0 126px;scroll-snap-align:start;display:block;text-decoration:none;color:var(--ink);background:#f8faf8;border-radius:16px;padding:9px;box-shadow:inset 0 1px 2px rgba(13,21,38,.10);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,background .2s}
@media(hover:hover) and (pointer:fine){.sb-doc:hover{transform:translateY(-4px);background:#fff;box-shadow:0 16px 30px -18px rgba(13,21,38,.45)}}
.sb-doc .ph{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:linear-gradient(165deg,#cfe7da,#a9cde9 60%,#d8d2f6);color:var(--green-deep);font-weight:900;font-size:22px}
.sb-doc .ph img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.sb-doc b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;font-weight:800;line-height:1.25;letter-spacing:-.01em;margin-top:8px}
.sb-doc .rl{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;color:var(--mut);margin-top:3px}
.sb-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;border-radius:100px;background:#f4f6f5;box-shadow:inset 0 1px 2px rgba(13,21,38,.12);color:var(--ink);font:800 13.5px/1 'Onest',system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:background .22s,color .22s,box-shadow .22s}
.sb-btn svg{flex:none;transition:transform .35s cubic-bezier(.16,1,.3,1)}
@media(hover:hover) and (pointer:fine){.sb-btn:hover{background:var(--ink);color:var(--lime);box-shadow:none}.sb-btn:hover svg{transform:translateX(4px)}}
.sb-btn:active{transform:scale(.985)}
.sb-docs .sb-btn{margin-top:12px}
.sideb .sb-link{display:block;text-align:center;font-size:13px;font-weight:700;color:#dbe0e9;text-decoration:none;margin-top:2px;transition:color .2s}
@media(hover:hover) and (pointer:fine){.sideb .sb-link:hover{color:#fff}}
@media(max-width:1040px){
  /* стек: hero → сайдбар (запис одразу під hero) → контент */
  .svcgrid{grid-template-columns:1fr;grid-template-areas:"hero" "side" "body"}
  .svcgrid .sidecol{position:static}
}

/* ticklist — плитки з зеленим чек-чіпом */
.ticks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:24px}
.ticks li{display:flex;gap:11px;align-items:flex-start;background:var(--white);border-radius:16px;padding:13px 16px;font-size:15px;box-shadow:0 6px 18px -12px rgba(13,21,38,.18)}
.ticks li .tk{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;margin-top:1px}

/* прайс-рядки */
.prow{background:var(--white);border-radius:var(--r);box-shadow:0 10px 30px -22px rgba(13,21,38,.3);overflow:hidden;margin-top:26px}
.prow .row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:16px 26px;border-bottom:1px solid rgba(13,21,38,.06);font-size:15px;transition:background-color .2s}
/* Назва + іконка «i» — flex: іконка по вертикальному центру тексту
   (vertical-align у flex інертний), довга назва стискається, іконка ні */
.prow .row>span{display:flex;align-items:center;min-width:0}
@media(hover:hover) and (pointer:fine){.prow .row:hover{background:#f7f9f8}}
.prow .row:last-child{border-bottom:none}
.prow .row b{white-space:nowrap;font-weight:700;font-size:16px}
/* футер-кнопка прайс-картки: «Переглянути всі послуги» → прайс напряму;
   кислотна за замовчуванням, hover = мова sck-cta (стрілка виїжджає) */
.prow-more{display:flex;align-items:center;justify-content:center;gap:0;padding:15px 26px;background:var(--lime);color:var(--ink);font-size:15px;font-weight:700;text-decoration:none;transition:gap .3s cubic-bezier(.22,1,.36,1)}
.prow-more svg{width:0;height:14px;transition:width .3s cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (pointer:fine){.prow-more:hover{gap:9px}.prow-more:hover svg{width:14px}}

/* head зліва (секції внутрішніх сторінок) */
.head.left{text-align:left;margin:0 0 34px;max-width:none}
.head.left p{max-width:640px}

/* сітка 3 колонки для bento */
.bento.g3{grid-template-columns:repeat(3,1fr)}

/* напрям «Скоро» на індексі */
.dc.soon{opacity:.72;cursor:default}
.dc.soon:hover{transform:none}
.soonb{position:absolute;top:26px;right:26px;background:var(--white);border-radius:100px;padding:6px 13px;font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}

/* карта */
.mapcard{margin-top:26px;border-radius:var(--r);overflow:hidden;box-shadow:0 14px 40px -26px rgba(13,21,38,.4)}
.mapcard iframe{width:100%;height:440px;border:0;display:block}

@media(max-width:1040px){
  .twocol{grid-template-columns:1fr}
  .sideb{position:static}
  .bento.g3{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .pg-hero{padding:0}
  .pg-hero .ph-card{padding:34px 26px}
  .crumbs{margin-bottom:10px}
  .ticks,.steps{grid-template-columns:1fr}
  .bento.g3{grid-template-columns:1fr}
  .prow .row{padding:14px 18px}
  /* типографіка карток лікарів на моб — більша (девтулз-спеки) */
  .sck .sck-cta{font-size:15px;font-weight:700}
  .sck--doc .role{font-size:16px}
  .sck--doc b{font-size:20px;font-weight:800}
  .sck .sct{font-size:13px;font-weight:700}
}

/* ── Тач-динаміка (hover:none): відгук на тап — дзеркало десктопних hover.
     :active = поки палець тримає; .tap (bento.js, ~450мс після touchend) =
     короткий тап програє ефект ПОВНІСТЮ і плавно вертається ── */
@media(hover:none){
  .sck:active,.sck.tap{transform:translate(-3px,-3px);box-shadow:5px 5px 0 0 var(--lime),0 12px 30px -24px rgba(13,21,38,.28)}
  .sck:active b::after,.sck.tap b::after{transform:scaleX(1)}
  .sck:active .sck-cta svg,.sck.tap .sck-cta svg{width:13px}
  .sck:active .sck-ic,.sck.tap .sck-ic{transform:rotate(-10deg)}
  .sck:active .sct,.sck.tap .sct{transform:rotate(.5deg) scale(1.03)}
  .ticks li:active,.steps li:active,.ticks li.tap,.steps li.tap{transform:scale(.985)}
  .steps li:active::before,.steps li.tap::before{background:var(--lime);color:var(--ink)}
  .fqchat .faq button:active,.fqchat .faq button.tap{transform:scale(.975)}
  .prow .row:active,.prow .row.tap{background:#f7f9f8}
  .prow-more:active,.prow-more.tap{gap:9px}
  .prow-more:active svg,.prow-more.tap svg{width:14px}
  .btn:active,.mmo-cta:active,.deck-next:active,.btn.tap,.mmo-cta.tap,.deck-next.tap{transform:scale(.965)}
  .sb-link:active,.sb-link.tap{color:#fff}
  .bsearch-btn:active,.bsearch-btn.tap{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--green),inset 0 2px 4px rgba(13,21,38,.16)}
}

/* ============================================================
   БЕНТО-РЕСКІН майстра запису mc.js (нативно на сайті)
   Onest + пігулки-радіуси + біла bento-картка. Колір лишається
   брендовий (--mcw-brand = clinic.primary_color = зелений).
   !important — щоб перекрити самодостатній mcw-стиль віджета.
   ============================================================ */
.mcw-reset,.mcw-reset *{font-family:'Onest',system-ui,sans-serif !important}
/* оверлей + картка */
.mcw-overlay{background:rgba(13,21,38,.5) !important}
.mcw-card{background:#fff !important;border-radius:28px !important;box-shadow:0 40px 100px -30px rgba(13,21,38,.5) !important}
/* моб: картка з відступами від країв (не впритул), усі кути заокруглені */
@media(max-width:520px){.mcw-card{margin:10px 10px 20px 10px !important;border-radius:24px !important}}
.mcw-title{letter-spacing:-.03em !important;font-weight:900 !important;color:var(--ink) !important}
/* eyebrow «Онлайн-запис» = лаймова пігулка з зеленою beat-крапкою (мова hero-тегів) */
.mcw-eyebrow{background:var(--lime) !important;color:var(--ink) !important;border-radius:100px !important;padding:6px 13px !important;font-weight:800 !important;letter-spacing:.04em !important}
.mcw-eyebrow::before{background:var(--green) !important;animation:beat 1.6s infinite}
/* X = інсет-пігулка (як кнопка пошуку в хедері) */
.mcw-x{border-radius:100px !important;background:#f4f6f5 !important;box-shadow:inset 0 1px 2px rgba(13,21,38,.12) !important;color:var(--ink) !important}
.mcw-x:hover{box-shadow:inset 0 0 0 1.5px var(--green) !important}
/* степер: пройдені/активний = ink із лаймом; прогрес = green→lime */
.mcw-step-dot{background:#f1f3f2 !important;color:#9aa6b8 !important;box-shadow:inset 0 1px 2px rgba(13,21,38,.12) !important}
.mcw-step-dot.mcw-grad{background:var(--ink) !important;color:var(--lime) !important}
.mcw-step-fill.mcw-grad{background:linear-gradient(90deg,#dbf46a,#000) !important}
.mcw-step-dot.mcw-cur::after{border-color:color-mix(in srgb,var(--green) 45%,transparent) !important}
.mcw-step-lbl.mcw-active{color:var(--ink) !important;font-weight:800 !important}
/* тексти */
.mcw-hint{color:var(--mut) !important}
.mcw-hint b{color:var(--ink) !important;font-weight:800 !important}
.mcw-seclabel{color:var(--mut) !important;font-weight:900 !important}
/* пігулки-дії */
.mcw-next,.mcw-submit,.mcw-ghostbtn,.mcw-done-close,.mcw-send,.mcw-back,.mcw-promo-btn,.mcw-bc-confirm,.mcw-bc-cancel,.mcw-float,.mcw-search-clear{border-radius:100px !important}
/* ГОЛОВНІ CTA (фарбовані .mcw-grad кнопки) = ЛАЙМ + ink, як «Записатись онлайн» */
.mcw-next.mcw-grad,.mcw-submit.mcw-grad,.mcw-send.mcw-grad,.mcw-bc-confirm.mcw-grad,.mcw-done-close.mcw-grad,.mcw-promo-btn.mcw-grad{background:var(--lime) !important;color:var(--ink) !important;font-weight:800 !important;box-shadow:0 10px 24px -12px var(--lime) !important}
.mcw-next,.mcw-submit{background:var(--lime) !important;color:var(--ink) !important;font-weight:800 !important;box-shadow:0 10px 24px -12px var(--lime) !important}
/* назад = тихий інсет */
.mcw-back{background:#f4f6f5 !important;box-shadow:inset 0 1px 2px rgba(13,21,38,.12) !important;color:var(--ink) !important;margin:16px 0 10px !important;transition:color .2s,background .2s !important}
.mcw-back:hover{color:var(--ink) !important;background:var(--lime) !important}
/* чипи спеціальностей: білі пігулки з бордером; hover = підйом */
.mcw-spec,.mcw-time,.mcw-chip{border-radius:100px !important}
.mcw-spec{border:1px solid rgba(13,21,38,.1) !important;box-shadow:0 4px 12px -9px rgba(13,21,38,.25) !important;font-weight:600 !important;color:var(--ink) !important;transition:transform .3s var(--spring),box-shadow .2s !important}
.mcw-spec:hover{transform:translateY(-2px);box-shadow:0 0 0 1.5px var(--ink),0 8px 18px -10px rgba(13,21,38,.3) !important}
/* плитки послуг/лікарів/дат: білі картки з бордером; вибране = ink-кільце */
.mcw-svc,.mcw-dcell,.mcw-doc,.mcw-input,.mcw-textarea,.mcw-search input{border-radius:16px !important}
.mcw-svc,.mcw-doc,.mcw-dcell{border:1px solid rgba(13,21,38,.08) !important}
.mcw-svc:hover{box-shadow:0 0 0 1.5px var(--ink),0 6px 16px -10px rgba(13,21,38,.25) !important}
/* картка лікаря (крок 4) — інформативна: hover БЕЗ кільця, лише мʼяка тінь */
.mcw-doc:hover{box-shadow:0 8px 22px -16px rgba(13,21,38,.25) !important}
/* обрана послуга = ink-кільце (акцент вибору); картка лікаря в кроці 4 —
   інформативна, тому мʼякий світлий бордер навіть коли .on (як на макеті) */
.mcw-svc.mcw-on{background:#fff !important;box-shadow:0 0 0 2px var(--ink),0 10px 24px -16px rgba(13,21,38,.35) !important}
.mcw-doc,.mcw-doc.mcw-on{background:#fff !important;box-shadow:0 8px 22px -16px rgba(13,21,38,.25) !important}
.mcw-svc-check.mcw-on .mcw-svc-mark{background:var(--lime) !important;border-color:var(--lime) !important;color:var(--ink) !important}
.mcw-svc.mcw-on .mcw-svc-mark{border-color:var(--ink) !important}
.mcw-svc-radio .mcw-dot{background:var(--ink) !important}
.mcw-svc-price{color:var(--ink) !important;font-weight:800 !important}
/* календар/час: вибране = ink + лайм-текст */
.mcw-dcell.mcw-on,.mcw-dcell.mcw-on.mcw-grad{background:var(--ink) !important;color:var(--lime) !important;box-shadow:0 10px 24px -12px rgba(13,21,38,.5) !important}
.mcw-dcell.mcw-on .mcw-dcell-wd,.mcw-dcell.mcw-on .mcw-dcell-num{color:var(--lime) !important}
.mcw-dcell.mcw-today{box-shadow:0 0 0 2px var(--ink) !important}
.mcw-time{border:1px solid rgba(13,21,38,.12) !important;font-weight:700 !important}
.mcw-time:hover{border-color:#0f172a !important}
.mcw-time.mcw-on{background:var(--ink) !important;border-color:var(--ink) !important;color:var(--lime) !important}
/* пошук та інпути: БІЛІ з тонким бордером (як на макеті), зелений фокус */
.mcw-search input{border-radius:100px !important;border:0 !important;background:#f4f6f5 !important;box-shadow:inset 0 1px 2px rgba(13,21,38,.12) !important}
.mcw-search input:focus{box-shadow:inset 0 0 0 1.5px var(--green) !important}
.mcw-input,.mcw-textarea{background:#fff !important;border:1.5px solid rgba(13,21,38,.1) !important;box-shadow:none !important;color:var(--ink) !important}
.mcw-input:focus,.mcw-textarea:focus{border-color:var(--green) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 16%,transparent) !important}
.mcw-label{color:var(--ink) !important;font-weight:800 !important}
.mcw-doc-title,.mcw-doc-spec{color:inherit !important}
/* підсумок обраного слоту = чиста біла картка з тонким бордером (не мʼятна) */
.mcw-confirm{background:none !important;box-shadow:none !important}
/* футер кроку: білий фон + `::after`-смуга закриває bottom-padding картки,
   щоб послуги НЕ визирали під липким футером при скролі (margin-хак не тягне
   фон — border-box лишається; псевдо-смуга гарантовано замальовує зазор) */
.mcw-foot{background:#fff !important;border-top:1px solid rgba(13,21,38,.08) !important}
.mcw-foot::after{content:"" !important;position:absolute !important;left:0;right:0;top:100%;height:30px;background:#fff;pointer-events:none}
.mcw-foot-sum b{color:var(--ink) !important;font-weight:900 !important}
.mcw-foot-sum span{font-weight:600 !important;font-size:18px !important}
/* перемикач «Записатися / Асистент»: сірий трей + актив = біла пігулка з ink */
.mcw-modeswitch{background:#f1f3f2 !important;border-radius:100px !important;padding:4px !important;box-shadow:inset 0 1px 2px rgba(13,21,38,.12) !important}
.mcw-mode-btn{border-radius:100px !important;color:var(--mut) !important;font-weight:700 !important}
.mcw-mode-btn.mcw-on{background:#fff !important;color:var(--ink) !important;font-weight:800 !important;box-shadow:0 4px 12px -7px rgba(13,21,38,.3) !important}
/* «Застосувати» промокод = ink-пігулка з лаймом; hover = підйом + тінь */
.mcw-promo-btn{background:var(--ink) !important;color:var(--lime) !important;font-weight:800 !important;transition:transform .25s var(--spring),box-shadow .25s !important}
@media(hover:hover) and (pointer:fine){.mcw-promo-btn:hover{transform:translateY(-2px) !important;box-shadow:0 10px 20px -10px rgba(13,21,38,.5) !important}}
/* «Записатися»: ink-круг зі стрілкою праворуч (мова «Записатись онлайн»);
   маркап mc.js не чіпаємо — коло малює ::after з data-URI SVG-стрілкою */
.mcw-submit{position:relative !important;padding-right:56px !important;transition:transform .25s var(--spring),box-shadow .25s !important}
.mcw-submit::after{content:"";position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcf46a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/15px 15px no-repeat;transition:transform .3s var(--spring)}
/* hover «Записатися»: підйом + сильніша лайм-тінь + стрілка-круг летить вгору-праворуч */
@media(hover:hover) and (pointer:fine){
  .mcw-submit:hover{transform:translateY(-2px) !important;box-shadow:0 16px 32px -12px var(--lime) !important}
  .mcw-submit:hover::after{transform:translateY(-50%) translate(3px,-3px)}
}
/* блок знижки (розбивка ціни): джерело = ink-пігулка з лаймом (як на макеті);
   сума знижки «−80 ₴» = ink (перекриваємо інлайновий emerald #059669) */
.mcw-break-src{display:block !important;font-size:10.5px !important;color:var(--lime) !important;margin-top:2px !important;background:var(--ink) !important;padding:4px 6px !important;border-radius:30px !important;text-align:center !important;font-weight:700 !important}
.mcw-break-amt{color:var(--ink) !important}
/* активне поле промокоду = ink-фокус (не зелений) */
.mcw-promo-row input:focus{border-color:var(--ink) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent) !important}
/* бульбашка користувача в асистенті = лайм + ink */
.mcw-msg-user .mcw-bubble{background:var(--lime) !important;color:var(--ink) !important;border-bottom-right-radius:5px !important;font-weight:600 !important}
/* чекбокс акції = чорний акцент; «i»-інфо = slate (не зелений) */
.mcw-campaign input{accent-color:#000 !important}
.mcw-campaign-info{color:#334155 !important}
/* Асистент: прибрати зелень — hover-чипи = ink; поле вводу при фокусі = лайм-бордер */
.mcw-chip:hover{border-color:var(--ink) !important;color:var(--ink) !important}
.mcw-chat-input:focus{border-color:var(--lime) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 30%,transparent) !important}
/* фінал: кільце-галочка зелене лишаємо (mcw-grad), кнопка закриття вже лайм */

/* ============================================================
   КОНТАКТИ — «Єдина панель + смуга фактів» (S3).
   Герой і карта в одній білій панелі; знизу — 4 факт-картки.
   Реюз: .crumbs .hl .btn(.lime) із базового bento.
   ============================================================ */
.ct-page{padding:20px 0 46px}
.ct-panel{background:var(--white);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:1.3fr 1fr;box-shadow:0 24px 60px -42px rgba(13,21,38,.4)}
.ct-pl{padding:46px 44px;position:relative}
.ct-pl .ct-blob{position:absolute;width:300px;height:300px;border-radius:50%;left:-120px;bottom:-120px;background:radial-gradient(circle,color-mix(in srgb,var(--green) 12%,transparent),transparent 70%);pointer-events:none}
.ct-pl>*{position:relative;z-index:1}
.ct-tag{display:inline-flex;align-items:center;gap:9px;background:var(--lime);color:var(--ink);border-radius:100px;padding:9px 18px;font-weight:800;font-size:13px;width:fit-content}
.ct-tag i{width:9px;height:9px;border-radius:50%;background:var(--green);animation:beat 1.6s infinite}
.ct-pl h1{font-size:clamp(32px,3.3vw,46px);font-weight:900;margin:18px 0 14px;max-width:640px}
.ct-lead{color:var(--mut);font-size:16.5px;max-width:560px}
.ct-rowc{display:flex;gap:24px 30px;margin:26px 0 26px;flex-wrap:wrap}
.ct-col{min-width:140px}
.ct-clab{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.ct-clab svg{stroke:var(--green-deep);flex:none}
.ct-panel a{text-decoration:none}
.ct-ph{display:block;font-size:19px;font-weight:900;letter-spacing:-.02em;margin-top:9px;color:var(--ink);white-space:nowrap}
.ct-addr{display:flex;flex-direction:column;gap:4px;margin-top:11px;font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.35;max-width:240px}
.ct-addr-l{display:flex;gap:7px}
.ct-addr-l::before{content:"·";color:var(--green);font-weight:900;flex:none}
/* графік «картка-візитка» (variant E): сьогодні = лайм-рядок, вихідний = orange */
.ct-bottom{display:grid;grid-template-columns:1.15fr .85fr;gap:26px 44px;align-items:start;margin-top:26px;padding-top:24px;border-top:1px solid #eef1ea}
.ct-sched{max-width:460px}
.ct-side{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.ct-sched-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.ct-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:beat 1.6s infinite;flex:none}
.ct-vrow{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid rgba(13,21,38,.06);font-size:14.5px}
.ct-vrow span{color:var(--mut);font-weight:600}
.ct-vrow b{font-weight:800;color:var(--ink);white-space:nowrap}
.ct-vrow b.off{color:var(--mut)}
.ct-vrow.today{background:var(--lime);margin:0 -12px;padding:8px 12px;border-radius:12px;border-bottom:none}
.ct-vrow.today span,.ct-vrow.today b{color:var(--ink);font-weight:800}
.ct-vrow.today.is-off{background:var(--peach)}
.ct-vrow.today.is-off b{color:var(--peach-d)}
/* права колонка низу: соцмережі + магнітна CTA (як у меню) під ними */
.ct-side .ct-soc{margin-top:12px}
.ct-ph:first-of-type{margin-top:10px}
.ct-ph:hover{color:var(--green-deep)}
.ct-em{display:inline-block;font-size:13.5px;color:var(--mut);font-weight:600;margin-top:9px}
.ct-em:hover{color:var(--green-deep)}
.ct-acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ct-cta{padding-right:8px}
.ct-cc{width:26px;height:26px;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex:none}
.ct-cc svg{stroke:var(--lime)}
.ct-cta:hover .ct-cc{background:#fff}
.ct-cta:hover .ct-cc svg{stroke:var(--ink)}
.btn.ct-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px #e6ece2}
.btn.ct-ghost:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--green)}
.ct-pr{position:relative;min-height:460px;overflow:hidden}
/* iframe вищий за контейнер — нижні ~48px (лого/атрибуція Google) обрізає overflow */
.ct-map{position:absolute;top:0;left:0;width:100%;height:calc(100% + 58px);min-height:518px;border:0;display:block}
.ct-map-ph{position:absolute;inset:0;background:
   linear-gradient(#e9efe6,#e2eae0);display:grid;place-items:center}
.ct-map-ph::before{content:"";position:absolute;inset:-10%;background:
   repeating-linear-gradient(64deg,transparent 0 46px,#d5ddd2 46px 49px),
   repeating-linear-gradient(-28deg,transparent 0 70px,#dae2d6 70px 73px);opacity:.85}
.ct-map-ph .ct-pin{position:relative;z-index:1;width:46px;height:46px;border-radius:50% 50% 50% 0;background:var(--green);transform:rotate(-45deg);display:grid;place-items:center;border:3px solid #fff;box-shadow:0 12px 18px -6px rgba(13,21,38,.4)}
.ct-map-ph .ct-pin svg{transform:rotate(45deg);stroke:#fff}
.ct-mchip{position:absolute;left:16px;bottom:16px;z-index:3;background:#fff;color:var(--ink);border-radius:100px;padding:9px 16px 9px 12px;display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:800;box-shadow:0 10px 26px -12px rgba(13,21,38,.4)}
.ct-mchip svg{stroke:var(--green-deep);flex:none}
/* контроли карти: зум (+/−) + прокласти маршрут (оверлей над iframe) */
.ct-mzoom{position:absolute;right:14px;top:14px;z-index:3;display:flex;flex-direction:column;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 20px -10px rgba(13,21,38,.4)}
.ct-mzoom button{width:40px;height:40px;border:none;-webkit-appearance:none;appearance:none;background:#fff;font-size:21px;font-weight:800;color:var(--ink);cursor:pointer;line-height:1;display:grid;place-items:center;transition:background .2s,color .2s}
.ct-mzoom button:first-child{border-bottom:1px solid #eef1ee}
.ct-mzoom button:hover{background:#f1f6ef;color:var(--green-deep)}
.ct-mzoom button:active{background:#e8efe4}
.ct-mroute{position:absolute;right:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border-radius:100px;padding:10px 18px;font-size:13px;font-weight:800;box-shadow:0 12px 26px -12px rgba(13,21,38,.55);transition:transform .3s var(--spring),background .25s}
.ct-mroute svg{stroke:var(--lime);flex:none}
.ct-mroute:hover{transform:translateY(-2px);background:#111a2e}
/* смуга фактів */
.ct-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.ct-fact{background:var(--white);border-radius:22px;padding:26px;box-shadow:0 14px 40px -34px rgba(13,21,38,.4);transition:transform .35s var(--spring),box-shadow .35s}
.ct-fact:hover{transform:translateY(-4px);box-shadow:0 22px 44px -30px rgba(13,21,38,.45)}
.ct-fi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:15px}
.ct-fact:nth-child(1) .ct-fi{background:var(--green-soft);color:var(--green-deep)}
.ct-fact:nth-child(2) .ct-fi{background:var(--sky);color:var(--sky-d)}
.ct-fact:nth-child(3) .ct-fi{background:var(--peach);color:var(--peach-d)}
.ct-fact:nth-child(4) .ct-fi{background:var(--lav);color:var(--lav-d)}
.ct-fact a{text-decoration:none}
.ct-fact h3{font-size:16px;font-weight:900;margin-bottom:8px}
.ct-fact p{font-size:14px;color:var(--mut)}
.ct-fact p b{color:var(--ink);font-weight:800}
.ct-hrs{margin-top:2px}
.ct-hr{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:6px 0;border-bottom:1px dashed #e6ece2}
.ct-hr:last-child{border:none}
.ct-hr b{font-weight:800}
.ct-hr b.off{color:var(--mut);font-weight:700}
.ct-flink{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:800;color:var(--green-deep)}
.ct-flink svg{stroke:var(--green-deep);transition:transform .3s var(--spring)}
.ct-flink:hover svg{transform:translateX(4px)}
.ct-soc{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.ct-soc a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#f5f8f3;box-shadow:inset 0 1px 2px rgba(13,21,38,.12);transition:transform .3s var(--spring),background .25s}
.ct-soc a svg{stroke:var(--ink)}
.ct-soc a:hover{transform:translateY(-3px);background:var(--ink);box-shadow:0 10px 22px -10px rgba(13,21,38,.5)}
.ct-soc a:hover svg{stroke:var(--lime)}
@media(max-width:1000px){
  .ct-panel{grid-template-columns:1fr}
  .ct-pr{min-height:340px}
  .ct-map,.ct-map-ph{min-height:340px}
  .ct-facts{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .ct-page{padding:0}
  .ct-pl{padding:34px 24px}
  .ct-facts{grid-template-columns:1fr}
  .ct-rowc{gap:22px}
  .ct-bottom{grid-template-columns:1fr;gap:24px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   ДИСКОНТНА КАРТКА — колода рівнів у героєві /discount-card (12.08.2026)
   Замінила фото-заглушку `hero/discount-card.jpg`: три картки віялом = три
   рівні знижки, які нижче на сторінці розписані таблицею. Автоперемикання і
   клік — у bento.js (`__mcDcardDeck`); БЕЗ JS колода лишається статичним
   віялом (data-i проставлені в розмітці), тобто сторінка не деградує.
   ═══════════════════════════════════════════════════════════════════════ */
/* padding-bottom — РЕЗЕРВ під плашку .h-pic-cap: place-items:center центрує
   колоду в CONTENT-боксі, тож падінг піднімає її над плашкою. Без нього на
   десктопі (вузький слот у 4 колонки) нижній кут задньої картки налізав на
   плашку — на ховері віяло розходиться ще на 4% і накладка ставала помітною.
   На ≤1040 слот широкий (6 колонок), плашка ліворуч від колоди — резерв
   зайвий і лише стискав би висоту. */
/* Скорочений `background` тут і скидає успадковану від .h-pic картинку-заглушку
   (специфічність рівна 0,1,0 — виграє порядок, а цей блок у кінці файла). */
.dcard-slot{padding:0 0 54px;display:grid;place-items:center;overflow:hidden;position:relative;
  background:linear-gradient(150deg,var(--green-soft),var(--sky) 58%,var(--lav))}
.dcard-slot::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.75),transparent 60%)}
.dcard-deck{position:relative;width:min(78%,320px);aspect-ratio:1.586;z-index:1;cursor:pointer;
  border-radius:18px}
.dcard-deck:focus-visible{outline:3px solid var(--ink);outline-offset:8px}

.dcard{position:absolute;inset:0;border-radius:18px;color:#fff;
  background:linear-gradient(145deg,#16243d 0%,var(--ink) 48%,#060b16 100%);
  box-shadow:0 26px 50px -22px rgba(13,21,38,.62),0 2px 0 rgba(255,255,255,.09) inset;
  padding:clamp(13px,4.4%,20px);display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;transition:transform .6s var(--spring),opacity .45s}
.dcard::after{content:"";position:absolute;right:-32%;bottom:-58%;width:86%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--green) 55%,transparent),transparent 68%);pointer-events:none}
/* Порядок у колоді задає data-i, який ротує JS (без JS — початковий 0/1/2/3).
   Кроків чотири, бо рівнів у тарифі стало 4; крок віяла зменшено з 7% до 6%,
   інакше хвіст колоди виліз би за слот. */
.dcard[data-i="0"]{transform:translate(0,0) rotate(0);z-index:4}
.dcard[data-i="1"]{transform:translate(3.5%,6%) rotate(3.6deg) scale(.972);z-index:3;opacity:.94}
.dcard[data-i="2"]{transform:translate(7%,12%) rotate(7.2deg) scale(.944);z-index:2;opacity:.85}
.dcard[data-i="3"]{transform:translate(10.5%,18%) rotate(10.8deg) scale(.916);z-index:1;opacity:.74}
/* min-width обовʼязковий: на вузькому вікні з мишею (десктоп, звужений до
   телефонної ширини) розсунуте віяло дотягується до плашки .h-pic-cap —
   мобільна розкладка не має спреду взагалі. */
@media(hover:hover) and (min-width:601px){
  .dcard-deck:hover .dcard[data-i="1"]{transform:translate(5%,8%) rotate(5deg) scale(.972)}
  .dcard-deck:hover .dcard[data-i="2"]{transform:translate(10%,16%) rotate(9.6deg) scale(.944)}
  .dcard-deck:hover .dcard[data-i="3"]{transform:translate(15%,24%) rotate(14.4deg) scale(.916)}
}
/* Рівень 1 — світла картка, рівень 2 — сталева, рівень 3 — базова чорнильна. */
.dcard--l1{background:linear-gradient(145deg,#fff 0%,#eef4ee 100%);color:var(--ink)}
.dcard--l1::after{background:radial-gradient(circle,color-mix(in srgb,var(--green) 28%,transparent),transparent 68%)}
.dcard--l1 .dcard-brand b,.dcard--l1 .dcard-pct{color:var(--green-deep)}
.dcard--l1 .dcard-chip{color:var(--green)}
.dcard--l1 .dcard-no{color:rgba(13,21,38,.78)}
.dcard--l1 .dcard-sub,.dcard--l1 .dcard-lvl,.dcard--l1 .dcard-nfc{color:rgba(13,21,38,.5)}
.dcard--l2{background:linear-gradient(145deg,#233a54 0%,#16243d 100%)}

.dcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;position:relative;z-index:2}
.dcard-brand{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;line-height:1.25}
.dcard-brand b{display:block;font-size:13.5px;letter-spacing:.1em;color:var(--lime)}
.dcard-ic{display:flex;align-items:center;gap:8px;flex-shrink:0}
.dcard-chip{width:34px;height:26px;color:var(--lime);flex-shrink:0}
.dcard-nfc{width:16px;height:16px;color:rgba(255,255,255,.7)}
.dcard-mid{position:relative;z-index:2;display:flex;align-items:flex-end;gap:9px}
.dcard-pct{font-size:clamp(30px,2.9vw,42px);font-weight:900;line-height:.9;color:var(--lime);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dcard-lvl{font-size:11px;font-weight:800;color:rgba(255,255,255,.72);letter-spacing:.06em;padding-bottom:4px}
.dcard-bot{position:relative;z-index:2}
.dcard-no{font-size:12.5px;font-weight:700;letter-spacing:.13em;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.9)}
.dcard-sub{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-top:3px}

/* Крапки опущені до низу слота (bottom:-77) — стоять в один рядок із плашкою
   .h-pic-cap, але по центру, тож горизонтально з нею не перетинаються. */
.dcard-dots{position:absolute;left:0;right:0;bottom:-77px;display:flex;justify-content:center;gap:6px;z-index:4}
.dcard-dots b{width:7px;height:7px;border-radius:50%;background:rgba(13,21,38,.22);transition:all .3s}
.dcard-dots b.on{background:var(--ink);width:20px;border-radius:100px}

@media(prefers-reduced-motion:reduce){.dcard{transition:none}}
/* Планшет: слот стає широким (6 колонок), але НИЗЬКИМ (успадковані 280px), а
   колоді з 4 карток треба ще ~63px під крапки — інакше хвіст віяла і крапки
   ріже overflow:hidden. Тому власна висота + резерв, а крапки піднімаємо до
   мобільного значення: -77px розрахований на високий десктопний слот. */
@media(max-width:1040px){
  .h-pic.dcard-slot{min-height:330px;padding-bottom:44px}
  .dcard-deck{width:min(74%,300px)}
  .dcard-dots{bottom:-56px}
}
/* ГОЧА мобільного: слот має overflow:hidden, а віяло виступає вниз на ~14%
   висоти картки + крапки ще на 26px. При успадкованих .h-pic{min-height:220px}
   нижня картка і крапки МОВЧКИ обрізались, а плашка .h-pic-cap налазила на
   колоду. Тому тут: власна висота, тісніше віяло і резерв під плашку
   (padding-bottom зсуває відцентровану колоду вгору). */
@media(max-width:600px){
  /* padding-bottom великий саме тут: крапки висять на 56px нижче колоди, а
     плашка стоїть по центру-ліворуч і на вузькому слоті перетинається з ними
     ГОРИЗОНТАЛЬНО. Резерв підіймає колоду разом із крапками над плашкою. */
  .h-pic.dcard-slot{min-height:340px;padding-bottom:88px}
  .dcard-deck{width:min(80%,258px)}
  .dcard[data-i="1"]{transform:translate(2.6%,4.5%) rotate(2.6deg) scale(.976)}
  .dcard[data-i="2"]{transform:translate(5.2%,9%) rotate(5.2deg) scale(.952)}
  .dcard[data-i="3"]{transform:translate(7.8%,13.5%) rotate(7.8deg) scale(.928)}
  .dcard-dots{bottom:-56px}
  .dcard-pct{font-size:30px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   /public-contract — АРКУШ, ЩО ПІДПИСУЄТЬСЯ, у слоті-зображенні героя
   (12.08.2026, вибір користувача з 8 варіантів). Рядки договору проявляються
   один за одним, далі САМ малюється підпис (stroke-dashoffset), і зверху
   «прилітає» кругла печатка з номером ліцензії.
   Сценарій запускає bento.js (`__mcContractSign`) при появі блока в екрані;
   клік — програти заново. БЕЗ JS клас .on не ставиться ніколи, тому стартові
   стани НЕ ховають вміст: аркуш видно повністю, просто без анімації.
   ФОН слота — рідний для .h-pic (заглушка + градієнт), як просив користувач.
   ═══════════════════════════════════════════════════════════════════════ */
/* padding-bottom — резерв під плашку .h-pic-cap: place-items:center центрує
   аркуш у CONTENT-боксі, тож падінг піднімає його над плашкою. */
.csign-slot{padding:20px 20px 64px;display:grid;place-items:center;overflow:hidden;position:relative;
  background-image:url('/assets/site/hero/contract.jpg'),linear-gradient(150deg,var(--green-soft),var(--sky) 58%,var(--lav))}

/* Аркуш. Висота ФІКСОВАНА в px: `height:min(100%,…)` на дитині grid із
   place-items:center дає циклічну залежність — слот роздувався з 377 до
   ~590px і ламав висоту всього героя. */
.csign{position:relative;z-index:1;height:280px;width:auto;aspect-ratio:.76;background:#fff;
  border-radius:12px;box-shadow:0 24px 48px -24px rgba(13,21,38,.5),0 0 0 1px rgba(13,21,38,.05);
  padding:18px 18px 16px;display:flex;flex-direction:column;overflow:hidden;cursor:pointer}
.csign-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding-bottom:9px;border-bottom:2px solid var(--ink)}
.csign-top b{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.csign-top span{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}

/* min-height:0 + overflow:hidden — щоб блок рядків МІГ стискатися. Аркуш
   має фіксовану висоту, і на вузьких екранах шапка+рядки+підпис не
   влазили: підвал із печаткою виїжджав за низ аркуша і мовчки різався
   (`min-height:auto` за замовчуванням не дає flex-елементу зменшитись). */
.csign-lines{display:flex;flex-direction:column;gap:7px;margin-top:13px;min-height:0;overflow:hidden}
.csign-lines i{display:block;height:5px;border-radius:3px;background:rgba(13,21,38,.11)}
.csign-lines i:nth-child(3n){width:78%}
.csign-lines i:nth-child(4n){width:88%}
.csign-lines i.hd{height:7px;width:52%;background:rgba(13,21,38,.24)}
/* Стартові стани — ЛИШЕ коли є JS (він ставить .rdy). Інакше аркуш лишається
   видимим: прогресивне покращення, а не «порожня картка без JS». */
.csign.rdy .csign-lines i{opacity:0;transform:translateX(-6px)}
.csign.rdy.on .csign-lines i{animation:csignLine .42s ease forwards}
@keyframes csignLine{to{opacity:1;transform:none}}

.csign-foot{margin-top:auto;position:relative;padding-top:8px}
.csign-sig{display:block;width:74%;height:auto;color:#16305e}
.csign-sig path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.csign.rdy .csign-sig path{stroke-dasharray:520;stroke-dashoffset:520}
.csign.rdy.on .csign-sig path{animation:csignDraw 1.5s .95s cubic-bezier(.55,.1,.35,1) forwards}
@keyframes csignDraw{to{stroke-dashoffset:0}}
.csign-lbl{display:block;margin-top:5px;width:74%;padding-top:5px;border-top:1px solid rgba(13,21,38,.16);
  font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}

/* Печатка «прилітає» під кутом і сідає з легким перельотом */
.csign-stamp{position:absolute;right:-2px;bottom:6px;width:78px;height:78px;border-radius:50%;
  display:grid;place-items:center;text-align:center;color:var(--green-deep);opacity:.92;
  transform:rotate(-11deg);border:2.4px solid currentColor;
  box-shadow:inset 0 0 0 3px rgba(60,197,141,.16)}
.csign.rdy .csign-stamp{opacity:0;transform:scale(1.6) rotate(-24deg)}
.csign.rdy.on .csign-stamp{animation:csignStamp .5s 2.15s cubic-bezier(.2,1.5,.5,1) forwards}
@keyframes csignStamp{to{opacity:.92;transform:scale(1) rotate(-11deg)}}
.csign-stamp b{display:block;font-size:9.5px;font-weight:900;letter-spacing:.06em;line-height:1.15}
.csign-stamp span{display:block;margin-top:2px;font-size:6.5px;font-weight:800;letter-spacing:.05em;opacity:.85}

@media(prefers-reduced-motion:reduce){
  .csign.rdy .csign-lines i,.csign.rdy .csign-stamp{opacity:1;transform:none;animation:none!important}
  .csign.rdy .csign-stamp{transform:rotate(-11deg)}
  .csign.rdy .csign-sig path{stroke-dashoffset:0;animation:none!important}
}
/* Слот успадковує від .h-pic низькі min-height (280/220) — вертикальному
   аркушу замало, тож задаємо власні. */
/* Печатка має ФІКСОВАНІ 78px, а аркуш на вузьких екранах нижчий — на 390
   вона вилазила за низ аркуша і мовчки різалась `overflow:hidden`.
   Тому масштабуємо її разом із висотою аркуша. */
@media(max-width:1040px){.h-pic.csign-slot{min-height:340px}.csign{height:250px}
  .csign-lines i:nth-child(n+10){display:none}
  .csign-stamp{width:68px;height:68px;border-width:2.1px}
  .csign-stamp b{font-size:8.5px}.csign-stamp span{font-size:6px}}
/* На телефоні слот ХОВАЄМО повністю (прохання користувача): у стовпчик він
   стає ще одним екраном декору між заголовком і самим договором. Ховати треба
   ВЕСЬ слот, а не лише аркуш, — інакше лишиться порожня градієнтна панель.
   JS не чіпаємо: IntersectionObserver на display:none ніколи не спрацює, тож
   анімація просто не запускається. */
@media(max-width:600px){.h-pic.csign-slot{display:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   /insurance-companies — «Маршрут узгодження» у слоті-зображенні героя
   (12.08.2026, вибір користувача з 4 варіантів). Ви → Страхова → Клініка:
   вузли підсвічуються по черзі, між ними заповнюється рейка, під ними
   міняється підпис поточного кроку. Підписи беруться з того самого масиву
   $steps, що й плитки нижче на сторінці, — розійтися не можуть.
   Анімація — bento.js (`__mcInsuranceRoute`); без JS видно всі три вузли в
   «вимкненому» стані з базовим підписом, тобто сенс не втрачається.
   Фон слота — рідний для .h-pic (заглушка + градієнт).
   ═══════════════════════════════════════════════════════════════════════ */
/* padding-bottom — резерв під плашку .h-pic-cap: place-items:center центрує
   картку в CONTENT-боксі, тож падінг піднімає її над плашкою. */
.iroute-slot{padding:20px 20px 64px;display:grid;place-items:center;overflow:hidden;position:relative}
.iroute{position:relative;z-index:1;width:min(100%,460px);background:#fff;border-radius:16px;
  padding:22px 20px 18px;box-shadow:0 24px 48px -26px rgba(13,21,38,.46),0 0 0 1px rgba(13,21,38,.05);
  cursor:pointer}
.iroute-h{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);margin-bottom:18px}
.iroute-nodes{position:relative;display:flex;align-items:flex-start;justify-content:space-between}
/* Рейка проходить ЗА вузлами: top = центр кружка (44px/2 − 3px/2) */
.iroute-rail{position:absolute;left:13%;right:13%;top:22px;height:3px;border-radius:3px;
  background:rgba(13,21,38,.1)}
.iroute-rail b{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--green),var(--lime));transition:width .7s ease}
.iroute.s1 .iroute-rail b{width:50%}
.iroute.s2 .iroute-rail b,.iroute.s3 .iroute-rail b{width:100%}
.iroute-node{position:relative;z-index:1;width:28%;display:flex;flex-direction:column;
  align-items:center;gap:7px;text-align:center}
.iroute-node i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#eef1ee;color:var(--mut);transition:background .35s,color .35s,box-shadow .35s}
.iroute-node.on i{background:var(--green);color:#fff;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 18%,transparent)}
/* Фініш маршруту — лаймовий: клініка вже назвала дату й час */
.iroute-node:last-child.on i{background:var(--lime);color:var(--ink);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--lime) 40%,transparent)}
.iroute-node i svg{width:21px;height:21px}
.iroute-node b{font-size:11.5px;font-weight:900;color:var(--ink);line-height:1.2}
.iroute-node span{font-size:9.5px;font-weight:600;color:var(--mut);line-height:1.35}
/* min-height — щоб картка не «стрибала» при зміні підпису кроку */
.iroute-foot{margin-top:16px;padding-top:12px;border-top:1px solid rgba(13,21,38,.1);
  font-size:10px;font-weight:700;color:var(--mut);line-height:1.45;min-height:2.9em}
@media(prefers-reduced-motion:reduce){.iroute-rail b,.iroute-node i{transition:none}}
@media(max-width:1040px){.h-pic.iroute-slot{min-height:340px}}
/* На телефоні слот ХОВАЄМО повністю: у стовпчик він стає зайвим екраном між
   заголовком і самими кроками, які тут-таки розписані плитками. Ховати треба
   ВЕСЬ слот, не лише картку, — інакше лишиться порожня панель. JS не чіпаємо:
   IntersectionObserver на display:none не спрацює, анімація не стартує. */
@media(max-width:600px){.h-pic.iroute-slot{display:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   /administration — КОЛОДА КЕРІВНИЦТВА у слоті-зображенні героя
   (12.08.2026, вибір користувача: компоновка L1 «віяло» + вигляд картки V2).
   Дві повноцінні картки стосом: верхня показана, друга визирає під кутом.
   Автоперемикання, клік і Enter гортають, крапки під колодою.
   Порядок задає data-i, який ротує bento.js (`__mcAdminDeck`) — БЕЗ JS
   лишається статичне віяло (data-i проставлені в розмітці).
   Фон слота — рідний для .h-pic (заглушка + градієнт).
   ═══════════════════════════════════════════════════════════════════════ */
/* padding-bottom — резерв під плашку .h-pic-cap: place-items:center центрує
   колоду в CONTENT-боксі, тож падінг піднімає її над плашкою. */
.adeck-slot{padding:20px 20px 64px;display:grid;place-items:center;overflow:hidden;position:relative}
.adeck{position:relative;z-index:1;width:min(100%,300px);height:290px;cursor:pointer;border-radius:18px}
.adeck:focus-visible{outline:3px solid var(--ink);outline-offset:8px}
.adeck-card{position:absolute;inset:0;background:#fff;border-radius:18px;padding:22px 20px 20px;
  box-shadow:0 26px 52px -26px rgba(13,21,38,.5),0 0 0 1px rgba(13,21,38,.05);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:11px;
  transition:transform .55s var(--spring),opacity .4s;opacity:0;pointer-events:none}
.adeck-card[data-i="0"]{transform:none;z-index:2;opacity:1}
.adeck-card[data-i="1"]{transform:translate(5%,7%) rotate(4deg) scale(.96);z-index:1;opacity:.85}
/* Третя і далі — під низом, невидимі: колода лишається читабельною і при
   збільшенні складу адміністрації. */
.adeck-card[data-i="2"],.adeck-card[data-i="3"]{transform:translate(8%,11%) rotate(6deg) scale(.93);
  z-index:0;opacity:0}
.adeck-ava-w{position:relative;margin-bottom:8px}
.adeck-ava{width:96px;height:96px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 4px #fff,0 0 0 6px color-mix(in srgb,var(--green) 34%,transparent)}
.adeck-ava img{width:100%;height:100%;object-fit:cover;display:block}
.adeck-badge{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);z-index:2;white-space:nowrap;
  background:var(--lime);color:var(--ink);border-radius:100px;padding:5px 12px;
  font-size:9.5px;font-weight:900;letter-spacing:.03em;box-shadow:0 6px 16px -6px rgba(13,21,38,.5)}
.adeck-nm{font-size:14.5px;font-weight:900;color:var(--ink);line-height:1.25;letter-spacing:-.01em}
.adeck-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.adeck-chips span{background:var(--green-soft);color:var(--green-deep);border-radius:100px;
  padding:5px 11px;font-size:9.5px;font-weight:800}
.adeck-ab{font-size:10px;font-weight:600;color:var(--mut);line-height:1.5}
.adeck-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:-24px;display:flex;gap:6px;z-index:3}
.adeck-dots b{width:7px;height:7px;border-radius:50%;background:rgba(13,21,38,.22);transition:all .3s}
.adeck-dots b.on{background:var(--ink);width:20px;border-radius:100px}
@media(prefers-reduced-motion:reduce){.adeck-card{transition:none}}
@media(max-width:1040px){.h-pic.adeck-slot{min-height:390px}}
/* На телефоні слот НЕ ховаємо — на відміну від /public-contract і
   /insurance-companies: там слот був декором поверх контенту, а тут після
   видалення секції «Команда» це ЄДИНЕ місце, де видно персон. Тому власна
   висота + більший резерв: колода 290px + крапки (-24) мусять лишити місце
   плашці в лівому низу. */
@media(max-width:600px){
  .h-pic.adeck-slot{min-height:430px;padding-bottom:92px}
  .adeck{width:min(100%,290px)}
}

/* ── /vacancies: бейдж співробітника у слоті героя ─────────────────────────
   Замість фото команди — бейдж на шнурку, який падає, гойдається і завмирає.
   Місце для імені навмисно порожнє («ваш бейдж уже готовий»), а посада —
   СПРАВЖНЯ відкрита позиція зі списку нижче на сторінці (кілька позицій —
   рядок змінюється по колу, це робить JS).
   Фон слота лишається рідним для .h-pic (фото команди + градієнт-підкладка).
   ГОЧА: `place-items:start center` — вузол притиснутий ДОГОРИ, бо шнурок
   мусить іти від верхнього краю слота; центрування давало два коротких
   відрізки, що читались як антенки. padding-bottom = резерв під плашку
   .h-pic-cap (вона absolute у лівому низу). */
.h-pic.vbadge-slot{padding:22px 20px 66px;display:grid;place-items:start center;
  position:relative;overflow:hidden}
.vbadge-lan{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  transform-origin:50% 0;cursor:pointer;margin-top:-22px}
.vbadge-lan:focus-visible{outline:3px solid var(--ink);outline-offset:6px;border-radius:18px}
/* Шнурок: два відрізки від верхнього краю слота до кліпси */
.vbadge-strap{width:96px;height:62px;position:relative}
.vbadge-strap i{position:absolute;top:0;width:8px;height:70px;background:var(--ink);border-radius:0 0 4px 4px}
.vbadge-strap i:first-child{left:20px;transform:rotate(14deg);transform-origin:top center}
.vbadge-strap i:last-child{right:20px;transform:rotate(-14deg);transform-origin:top center}
.vbadge-clip{width:44px;height:16px;border-radius:5px;background:#c9d0d8;z-index:2;margin-bottom:-7px;
  box-shadow:0 2px 0 rgba(13,21,38,.22) inset,0 6px 12px -8px rgba(13,21,38,.7)}
.vbadge{width:224px;border-radius:16px;background:var(--white);overflow:hidden;text-align:center;
  padding-bottom:14px;box-shadow:0 28px 50px -24px rgba(13,21,38,.6),0 0 0 1px rgba(13,21,38,.06)}
.vbadge-top{background:var(--ink);color:#fff;font-size:10.5px;font-weight:900;letter-spacing:.18em;
  padding:8px 6px;display:flex;align-items:center;justify-content:center;gap:7px}
.vbadge-top i{width:6px;height:6px;border-radius:50%;background:var(--lime);flex-shrink:0}
.vbadge-ava{width:72px;height:72px;margin:15px auto 10px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-soft);color:var(--green-deep);
  box-shadow:0 0 0 3px var(--white),0 0 0 5px color-mix(in srgb,var(--green) 34%,transparent)}
.vbadge-ava svg{width:34px;height:34px}
.vbadge-nm{margin:0 20px 4px;height:13px;border-bottom:2px dashed rgba(13,21,38,.22)}
.vbadge-nml{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
/* Посади лежать СТОСОМ: перша в потоці задає висоту, решта absolute поверх неї.
   line-clamp:2 + min-height рівно на два рядки — тож довга назва не роздуває
   бейдж і не «стрибає» при зміні (у .vbadge overflow:hidden, зріже мовчки). */
.vbadge-roles{position:relative;margin:11px 14px 0}
.vbadge-role{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.5em;font-size:13px;font-weight:900;color:var(--ink);line-height:1.25}
.vbadge-role:not(:first-child){position:absolute;left:0;right:0;top:0}
.vbadge-roles.rot .vbadge-role{opacity:0;transition:opacity .45s ease}
.vbadge-roles.rot .vbadge-role.on{opacity:1}
.vbadge-city{font-size:10.5px;font-weight:700;color:var(--mut);margin-top:3px}
.vbadge-bars{display:flex;justify-content:center;align-items:center;gap:2px;margin:13px 22px 0;height:18px}
.vbadge-bars i{width:2px;background:var(--ink);border-radius:1px}
.vbadge-bars i:nth-child(3n){width:4px}
.vbadge-bars i:nth-child(4n){opacity:.45}
/* Стартовий стан — ЛИШЕ під .rdy, який ставить JS: без JS бейдж просто видно */
.vbadge-slot.rdy .vbadge-lan{opacity:0;transform:translateY(-16px)}
.vbadge-slot.rdy.on .vbadge-lan{opacity:1;transform:none;
  animation:vbadgeswing 2.6s cubic-bezier(.36,.07,.19,.97) both}
@keyframes vbadgeswing{
  0%{transform:translateY(-16px) rotate(0deg);opacity:0}
  18%{transform:translateY(0) rotate(4.5deg);opacity:1}
  40%{transform:rotate(-3deg)} 60%{transform:rotate(1.8deg)}
  78%{transform:rotate(-.9deg)} 100%{transform:rotate(0)}
}
@media(prefers-reduced-motion:reduce){.vbadge-slot.rdy .vbadge-lan{animation:none}}
/* ≤1040 слот вужчий і нижчий — бейдж і шнурок стискаються разом із ним,
   інакше низ бейджа доходить до плашки в лівому низу. */
@media(max-width:1040px){
  .h-pic.vbadge-slot{min-height:400px}
  .vbadge{width:190px}
  .vbadge-ava{width:60px;height:60px;margin:12px auto 8px}
  .vbadge-strap{height:54px}
  .vbadge-strap i{height:62px}
}
/* На телефоні слот СХОВАНО повністю (рішення користувача) — як на
   /public-contract і /insurance-companies: у стовпчик він ставав зайвим
   екраном декору між заголовком і списком вакансій. Ховати треба ВЕСЬ слот,
   не лише бейдж, інакше лишиться порожня градієнтна панель. */
@media(max-width:600px){.h-pic.vbadge-slot{display:none}}

/* ── Листок прайсу: «плівка з цінами» у слоті героя ────────────────────────
   Кадри — зони обстеження (Departments::PRICE_ZONES); активний підсвічується,
   а в підвалі стоїть справжня назва дослідження і його ціна з цього ж прайсу.
   Вмикається лише там, де реєстр має зони (поки МРТ і КТ) — решта листків
   лишаються зі звичайним фото.
   ГОЧА ЦЬОГО СЛОТА: унизу СТЕК `.h-pic-foot` (кнопка «Про напрям» НАД
   плашкою), тож резерв знизу 116px, а не 66px, як у слотах з однією плашкою. */
.h-pic.zfilm-slot{padding:22px 20px 116px;display:grid;place-items:center;position:relative;overflow:hidden}
.zfilm{position:relative;z-index:1;width:min(94%,304px);border-radius:14px;padding:12px;cursor:pointer;
  background:linear-gradient(160deg,#16243d,#070d1a);
  box-shadow:0 26px 52px -24px rgba(13,21,38,.66),0 0 0 1px rgba(255,255,255,.07) inset}
.zfilm:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.zfilm-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;
  font-size:11px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.zfilm-h b{color:var(--lime);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}
/* grid-auto-rows:1fr — усі кадри однакової висоти. Без цього ряд, де підпис
 переноситься на два рядки («Черевна порожнина», «Грудна клітка»), стає
 вищим за сусідній, і сітка виглядає зламаною. */
.zfilm-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:7px}
.zfilm-fr{border-radius:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  padding:6px 4px 5px;display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:background .3s,border-color .3s,transform .3s}
.zfilm-fr svg{width:34px;height:34px;color:rgba(220,244,106,.55);transition:color .3s}
.zfilm-fr span{font-size:11px;font-weight:400;color:rgba(255,255,255,.5);text-align:center;line-height:1.2;
  transition:color .3s}
.zfilm-fr.on{background:rgba(220,244,106,.12);border-color:color-mix(in srgb,var(--lime) 55%,transparent);
  transform:translateY(-2px)}
.zfilm-fr.on svg{color:var(--lime)}
.zfilm-fr.on span{color:#fff}
.zfilm-f{margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
/* Назви бувають довгі («УЗД судин шиї (екстракраніальна доплерографія)») —
 даємо ДВА рядки з еліпсисом на другому. Саме line-clamp, а не фіксована
 висота: короткі назви (МРТ/КТ) лишаються в один рядок і плівка не росте. */
.zfilm-f b{font-size:11.5px;font-weight:900;color:#fff;line-height:1.2;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zfilm-f em{font-style:normal;flex-shrink:0;font-size:11.5px;font-weight:900;color:var(--ink);
  background:var(--lime);border-radius:100px;padding:5px 10px}
/* Стартові стани — ЛИШЕ під .rdy від JS: без JS плівку видно повністю */
.zfilm-slot.rdy .zfilm-fr{opacity:0;filter:blur(4px);transform:scale(.94)}
.zfilm-slot.rdy.on .zfilm-fr{opacity:1;filter:none;transform:none;
  transition:opacity .4s ease calc(var(--i,0)*.11s),filter .5s ease calc(var(--i,0)*.11s),
             transform .5s var(--spring) calc(var(--i,0)*.11s)}
.zfilm-slot.rdy.on .zfilm-fr.on{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.zfilm-fr{transition:none}}
/* Слот вищий за дефолтний .h-pic: під плівку (≈190px) + стек футера (116px) */
/* 425: підписи кадрів 11px, і там, де вони переносяться на два рядки (УЗД),
   плівка на 27px вища — при 400px до кнопки «Про напрям» лишалось 3px. */
@media(max-width:1040px){.h-pic.zfilm-slot{min-height:425px}}
/* На телефоні слот НЕ ховаємо: у ньому живе кнопка «Про напрям» — єдиний
   перехід із листка прайсу на сторінку напряму. */
/* 400, а не 392: у УЗД найдовша назва займає в підвалі ДВА рядки, і плівка
   на 14px вища — просвіт до кнопки «Про напрям» падав до 12px. */
@media(max-width:600px){.h-pic.zfilm-slot{min-height:425px}}

/* ── Довга назва напряму в H1 листка прайсу ────────────────────────────────
   «Ціни — Компʼютерна томографія (КТ)» і «Ціни — Травматологія та ортопедія»
   на десктопі не вміщались у рядок, H1 ставав ДВОРЯДКОВИМ і герой сторінки
   виростав рівно на один рядок (509 проти 458px) — сусідні сторінки
   діагностики виглядали різновисокими. Зменшуємо КЕГЛЬ, але лишаємо ту саму
   ВИСОТУ РЯДКА, тож блок H1 займає стільки ж, скільки однорядковий звичайний,
   і герої всіх листків стають однакової висоти.
   2.7vw — калібровано по найдовшій назві (942px при 50px проти 765px місця
   на 1440); лише від 1041px, бо нижче герой стає стовпчиком і різниці не
   видно, а дрібнити заголовок там нема потреби. */
@media(min-width:1041px){
  .h-main h1.h1--tight{font-size:clamp(26px,2.7vw,38px);
    line-height:calc(clamp(32px,3.9vw,50px)*1.02)}
}

/* ── Листок прайсу напряму: «структура напряму» у слоті героя ──────────────
   Кільце з часток груп прайсу і легенда з мінімальною ціною кожної. Стоїть
   там, де немає «плівки з цінами» (тобто на клінічних напрямах), і нічого не
   потребує на кожен новий напрям — усе рахується з груп, які сторінка й так
   показує нижче.
   Резерв знизу 116px — під СТЕК `.h-pic-foot` (кнопка над плашкою). */
.h-pic.pdon-slot{padding:22px 20px 116px;display:grid;place-items:center;position:relative;overflow:hidden}
.pdon{position:relative;z-index:1;width:min(96%,348px);border-radius:18px;padding:17px 18px 16px;cursor:pointer;
  background:var(--white);box-shadow:0 24px 48px -26px rgba(13,21,38,.46),0 0 0 1px rgba(13,21,38,.05)}
.pdon:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.pdon-kick{font-size:11px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:var(--mut)}
.pdon-body{display:flex;align-items:center;gap:16px;margin:11px 0 0}
.pdon-ring{position:relative;width:112px;height:112px;flex-shrink:0}
.pdon-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.pdon-ring circle{fill:none;stroke-width:12}
/* Сегмент: dasharray = «частка + решта кола», dashoffset тримає ПОЗИЦІЮ.
   Тому проявлення анімуємо саме dasharray — зсув чіпати не можна. */
.pdon-seg{stroke-linecap:butt;stroke-dasharray:var(--seg) var(--rest)}
/* flex-колонка, а НЕ grid: у grid двоє дітей ставали двома рядками на всю
 висоту кільця — число сідало в центр верхньої половини, а підпис у центр
 нижньої, тобто «розʼїжджались». Тут вони йдуть одним блоком по центру. */
.pdon-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;text-align:center;line-height:1}
.pdon-mid b{font-size:28px;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.pdon-mid span{display:block;font-size:10px;font-weight:500;color:var(--mut)}
.pdon-leg{flex:1 1 auto;min-width:0}
/* Назва групи може займати ДВА рядки: у кардіології є «Функціональні
 обстеження», і в один рядок вона не влазить — еліпсис у легенді читається
 як обрізана база. Ціна лишається праворуч і завжди в один рядок. */
.pdon-leg div{display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:11.5px;font-weight:500;color:var(--ink)}
.pdon-leg i{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
.pdon-leg span{min-width:0;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Кількість позицій у групі — приглушеним числом одразу за назвою: без неї
   з кільця не зрозуміло, чому один сегмент на пів кола. */
.pdon-leg span u{text-decoration:none;color:var(--mut);font-weight:700;margin-left:5px}
.pdon-leg b{margin-left:auto;flex-shrink:0;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Стартові стани — ЛИШЕ під .rdy від JS: без JS кільце і легенда просто видні */
.pdon-slot.rdy .pdon-seg{stroke-dasharray:0 var(--c)}
.pdon-slot.rdy .pdon-leg div{opacity:0;transform:translateX(8px)}
.pdon-slot.rdy.on .pdon-seg{stroke-dasharray:var(--seg) var(--rest);
  transition:stroke-dasharray .8s cubic-bezier(.3,.9,.3,1) calc(var(--i,0)*.12s)}
.pdon-slot.rdy.on .pdon-leg div{opacity:1;transform:none;
  transition:opacity .3s ease calc(.25s+var(--i,0)*.1s),transform .4s var(--spring) calc(.25s+var(--i,0)*.1s)}
@media(prefers-reduced-motion:reduce){.pdon-seg{transition:none}}
@media(max-width:1040px){.h-pic.pdon-slot{min-height:425px}}
@media(max-width:600px){.h-pic.pdon-slot{min-height:425px}}
/* Запасний стан того ж слота: груп менше двох (гастро, ендокринологія,
   терапія — по 2 позиції; сурдологія — 51, але одна група) → замість кільця
   просто початок прайсу. Стилі рядків окремі: тут немає кольорових часток. */
.pdon-list div{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:7px 0;
  border-bottom:1px dashed rgba(13,21,38,.1);font-size:11.5px;font-weight:500;color:var(--ink)}
.pdon-list div:last-child{border-bottom:0}
.pdon-list span{min-width:0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pdon-list b{flex-shrink:0;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.pdon-foot{margin-top:10px;padding-top:10px;border-top:1px solid rgba(13,21,38,.09);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:10.5px;font-weight:500;color:var(--mut)}
.pdon-foot em{font-style:normal;background:var(--lime);color:var(--ink);border-radius:100px;padding:5px 10px;
  font-size:10.5px;font-weight:900;white-space:nowrap}
.pdon-slot.rdy .pdon-list div{opacity:0;transform:translateX(8px)}
.pdon-slot.rdy.on .pdon-list div{opacity:1;transform:none;
  transition:opacity .3s ease calc(var(--i,0)*.1s),transform .4s var(--spring) calc(var(--i,0)*.1s)}

/* ── /doctors: картка G1 «хвиля» — фото на всю ліву панель ── */
/* ── Картка лікаря G1: фото-полотно ліворуч, біла плита наїжджає на нього ──
   Плита — окремий шар (не колонка ґрідa), тому в неї власна тінь ліворуч:
   саме вона читається як «накладання», а не просто стик двох прямокутників.
   Через це на картці overflow:visible і жодного фону — фон дає фото. */
.docs .bento:has(.docg){grid-template-columns:repeat(3,1fr);gap:20px}
.doc.docg{position:relative;display:block;padding:0;text-align:left;background:transparent;box-shadow:none;border-radius:0;overflow:visible;min-height:292px;text-decoration:none;color:var(--ink);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.doc.docg:hover{transform:translateY(-6px);box-shadow:none}
.docg .side{position:absolute;left:0;top:0;bottom:0;width:45%;border-radius:24px;overflow:hidden}
.docg .side .ph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(165deg,#cfe7da,#a9cde9 60%,#d8d2f6);color:var(--green-deep);font-weight:900;font-size:38px;overflow:hidden}
.docg .side .ph img{width:100%;height:100%;object-fit:cover;object-position:60% top;display:block;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.docg:hover .side .ph img{transform:scale(1.05)}
.docg .in{position:relative;z-index:2;margin-left:38%;min-height:292px;background:var(--white);border-radius:24px;padding:20px 20px 18px;display:flex;flex-direction:column;box-shadow:-30px 0 48px -34px rgba(13,21,38,.55),0 18px 38px -24px rgba(13,21,38,.3);transition:box-shadow .5s cubic-bezier(.16,1,.3,1)}
.docg:hover .in{box-shadow:-30px 0 48px -30px rgba(13,21,38,.6),0 30px 52px -26px rgba(13,21,38,.38)}
.docg .txt{flex:1 1 auto;min-height:0;overflow:hidden}
.docg h3{font-size:17px;font-weight:900;margin:0;line-height:1.18;letter-spacing:-.015em}
.docg .role{font-size:13px;line-height:1.35;color:#2c3545;margin-top:6px;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.docg .biow{margin:12px 0 0;padding:10px 12px;border-radius:14px;background:#f4f6f5;box-shadow:inset 0 1px 2px rgba(13,21,38,.12)}
.docg .bio{font-size:13px;line-height:1.5;color:var(--mut);margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.docg .ft{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:14px}
.docg .exp{margin:0;font:800 12.5px/1 'Onest',system-ui,sans-serif;color:var(--ink);background:var(--lime);border-radius:100px;padding:8px 13px;white-space:nowrap}
.docg .go{width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;flex-shrink:0;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.docg:hover .go{transform:rotate(45deg)}
/* Поява: без пружини — вона й давала «смик» у кінці. Довгий expo-out,
   зсув + мікромасштаб, каскад за позицією в ряду (кількість колонок різна
   на брейкпоінтах, тому затримки задає CSS, а не інлайн з PHP). */
.docg.rv{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.docg.rv.vis{opacity:1;transform:none}
.docs .bento .docg.rv:nth-child(3n+2){transition-delay:.09s}
.docs .bento .docg.rv:nth-child(3n+3){transition-delay:.18s}
@media(max-width:1000px){
  .docs .bento:has(.docg){grid-template-columns:1fr 1fr}
  .docs .bento .docg.rv:nth-child(3n+2),.docs .bento .docg.rv:nth-child(3n+3){transition-delay:0s}
  .docs .bento .docg.rv:nth-child(2n){transition-delay:.09s}
}
@media(max-width:600px){
  .docs .bento:has(.docg){grid-template-columns:1fr;gap:16px}
  .doc.docg{min-height:252px}
  .docg .side{width:44%}
  .docg .in{margin-left:36%;min-height:252px;padding:16px 16px 15px;border-radius:22px}
  .docg h3{font-size:16.5px}
  .docg .bio{-webkit-line-clamp:3;font-size:12.5px}
  .docg .biow{padding:9px 11px;margin-top:10px}
  .docg .exp{font-size:11.5px;padding:7px 10px}
  .docs .bento .docg.rv:nth-child(n){transition-delay:0s}
}
@media(prefers-reduced-motion:reduce){.docg.rv{transition:none;opacity:1;transform:none}.docg,.docg .in,.docg .go,.docg .side .ph img{transition:none}}