/* ============================================================
   Шрифт. Inter лежит в теме, ничего не тянется с чужих серверов:
   сайт выглядит одинаково, даже если Google недоступен.
   Переменный файл, один на все начертания 400-700. OFL, см. fonts/OFL.txt
   ============================================================ */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-cyrillic-ext-wght-normal.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: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-latin-wght-normal.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; }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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; }

/* ============================================================
   MySpyne. Токени за ТЗ ред. 2. Світла тема - значення за замовчуванням.
   ============================================================ */
:root {
  --brand-700: #2E1065;
  --brand-600: #5B21B6;
  --brand-500: #6D33CC;
  --brand-400: #A855F7;
  --brand-300: #C4B5FD;
  --brand-100: #EDE9FE;

  /* Чорнило: те саме сімейство, але для тексту - у нічній темі світлішає */
  --brand-ink-strong: #2E1065;
  --brand-ink: #5B21B6;
  --brand-ink-soft: #C4B5FD;
  --action-ink-strong: #0B4A38;
  --action-ink: #0B6349;
  --action-ink-soft: #DFF5EB;

  --action-900: #0B4A38;
  --action-700: #0B6349;
  --action-600: #0F7A5A;
  --action-300: #7DE0BE;
  --action-200: #C9EADD;
  --action-150: #DFF5EB;
  --action-100: #E1F2EC;
  --action-050: #F3FBF7;

  --text-900: #101828;
  --text-600: #475467;
  --text-inverse: #FFFFFF;

  --surface: #FFFFFF;
  --surface-alt: #F7F9FB;
  --page: #E6E4EC;

  --divider: #D0D5DD;
  --border: #7D8799;

  --alert-700: #B42318;
  --alert-300: #FDA29B;
  --alert-100: #FEF3F2;

  --scrim-hero: linear-gradient(180deg, #EDE9FE 0%, #F6F3FF 46%, #FFFFFF 82%, #FFFFFF 100%);
  --hero-panel: #FFFFFF;
  --shadow-card: 0 4px 16px rgba(16,24,40,.10);
  --shadow-drop: 0 8px 24px rgba(16,24,40,.12);
  --img-dim: none;

  /* ── Резина ─────────────────────────────────────────────────────────
     Размеры не прыгают на точках перелома, а плавно идут за шириной окна:
     от 360 до 1440 - к размерам утверждённых макетов, от 1440 до 1920 -
     дальше вверх, выше 1920 рост останавливается (потолок).
     Границы в rem: масштаб браузера по-прежнему увеличивает текст.
     Точки перелома остались только там, где меняется структура:
     нижняя панель, колонки, шапка. Значения посчитаны скриптом. */
  --gutter: clamp(1rem, 4vw, 4.5rem);
  --container: 105rem;                                   /* 1680 - потолок контента */
  --wrap: calc(var(--container) + 2 * var(--gutter));    /* обёртка вместе с полями */
  /* Кегли. Имя = размер на 1440, как в утверждённых макетах. Ниже 1440 крупные
     плавно уменьшаются к мобильным размерам, выше растут до потолка на 1920. */
  --fs-xs: clamp(0.9375rem, calc(0.75rem + 0.2083vw), 1.0rem);
  --fs-sm: clamp(1.0rem, calc(0.7188rem + 0.3125vw), 1.0938rem);
  --fs-md: clamp(1.0625rem, calc(0.7812rem + 0.3125vw), 1.1562rem);
  --fs-base: clamp(1.125rem, calc(0.75rem + 0.4167vw), 1.25rem);
  --fs-19: clamp(1.1875rem, calc(0.8125rem + 0.4167vw), 1.3125rem);
  --fs-20: clamp(1.25rem, calc(0.7812rem + 0.5208vw), 1.4062rem);
  --fs-22: clamp(1.375rem, calc(0.8125rem + 0.625vw), 1.5625rem);
  --fs-24: clamp(1.3125rem, max(calc(1.25rem + 0.2778vw), calc(0.8438rem + 0.7292vw)), 1.7188rem);
  --fs-26: clamp(1.375rem, max(calc(1.2917rem + 0.3704vw), calc(0.875rem + 0.8333vw)), 1.875rem);
  --fs-28: clamp(1.375rem, max(calc(1.25rem + 0.5556vw), calc(1.0rem + 0.8333vw)), 2.0rem);
  --fs-32: clamp(1.5625rem, max(calc(1.4167rem + 0.6481vw), calc(1.0625rem + 1.0417vw)), 2.3125rem);
  --fs-40: clamp(1.75rem, max(calc(1.5rem + 1.1111vw), calc(1.375rem + 1.25vw)), 2.875rem);
  --fs-44: clamp(1.9375rem, max(calc(1.6667rem + 1.2037vw), calc(1.4375rem + 1.4583vw)), 3.1875rem);
  --fs-48: clamp(1.9375rem, max(calc(1.5833rem + 1.5741vw), calc(1.5rem + 1.6667vw)), 3.5rem);
  --fs-52: clamp(1.9375rem, min(calc(1.5rem + 1.9444vw), calc(1.75rem + 1.6667vw)), 3.75rem);
  --fs-88: clamp(4.0rem, max(calc(3.5rem + 2.2222vw), calc(3.25rem + 2.5vw)), 6.25rem);
  /* Отступы от 24 и больше. На 360 — 75%, на 1440 — как в макете, на 1920 — 125%. */
  --sp-24: clamp(1.125rem, max(calc(1.0rem + 0.5556vw), calc(0.375rem + 1.25vw)), 1.875rem);
  --sp-28: clamp(1.3125rem, max(calc(1.1667rem + 0.6481vw), calc(0.4375rem + 1.4583vw)), 2.1875rem);
  --sp-32: clamp(1.5rem, max(calc(1.3333rem + 0.7407vw), calc(0.5rem + 1.6667vw)), 2.5rem);
  --sp-36: clamp(1.6875rem, max(calc(1.5rem + 0.8333vw), calc(0.5625rem + 1.875vw)), 2.8125rem);
  --sp-40: clamp(1.875rem, max(calc(1.6667rem + 0.9259vw), calc(0.625rem + 2.0833vw)), 3.125rem);
  --sp-44: clamp(2.0625rem, max(calc(1.8333rem + 1.0185vw), calc(0.6875rem + 2.2917vw)), 3.4375rem);
  --sp-48: clamp(2.25rem, max(calc(2.0rem + 1.1111vw), calc(0.75rem + 2.5vw)), 3.75rem);
  --sp-56: clamp(2.625rem, max(calc(2.3333rem + 1.2963vw), calc(0.875rem + 2.9167vw)), 4.375rem);
  --sp-64: clamp(3.0rem, max(calc(2.6667rem + 1.4815vw), calc(1.0rem + 3.3333vw)), 5.0rem);
  --sp-80: clamp(3.75rem, max(calc(3.3333rem + 1.8519vw), calc(1.25rem + 4.1667vw)), 6.25rem);
  --sp-140: clamp(6.5625rem, max(calc(5.8333rem + 3.2407vw), calc(2.1875rem + 7.2917vw)), 10.9375rem);
  /* Ширины колонок с фото и текстом: на 1440 — как в макете, растут вместе с окном. */
  --col-380: clamp(20.1875rem, 26.3889vw, 31.6667rem);
  --col-400: clamp(21.25rem, 27.7778vw, 33.3333rem);
  --col-420: clamp(22.3125rem, 29.1667vw, 35.0rem);
  --col-440: clamp(23.375rem, 30.5556vw, 36.6667rem);
  --col-460: clamp(24.4375rem, 31.9444vw, 38.3333rem);
  --mw-720: clamp(45.0rem, 50.0vw, 50.4rem);
  --mw-780: clamp(48.75rem, 54.1667vw, 54.6rem);
  --mw-820: clamp(51.25rem, 56.9444vw, 57.4rem);
  --mw-860: clamp(53.75rem, 59.7222vw, 60.2rem);
  --mw-900: clamp(56.25rem, 62.5vw, 63.0rem);
  --mw-960: clamp(60.0rem, 66.6667vw, 67.2rem);
  --mw-1000: clamp(62.5rem, 69.4444vw, 70.0rem);
  --mw-1040: clamp(65.0rem, 72.2222vw, 72.8rem);
  /* Обводка фокуса: отдельный токен, в тёмной теме светлеет. */
  --focus: #5B21B6;
}

/* ---------- Нічна тема ---------- */
:root[data-theme="dark"] {
  --brand-700: #3B1B7A;
  --brand-600: #6D33CC;
  --brand-500: #8A5CF0;
  --brand-400: #A855F7;
  --brand-300: #4B3B86;
  --brand-100: #241C3F;

  --brand-ink-strong: #D9CDFF;
  --brand-ink: #C4AAFF;
  --brand-ink-soft: #BCA9F5;
  --action-ink-strong: #A6EED2;
  --action-ink: #74DDB8;
  --action-ink-soft: #DFF5EB;

  --action-900: #0E6A50;
  --action-700: #12805F;
  --action-600: #0E7F5D;
  --action-300: #2F6553;
  /* Рамки и подсветка на тёмных полосах. Тёмно-зелёный контур поверх
     фиолетовой подложки даёт тот же болотный край, от которого ушли
     заливки, поэтому здесь он почти нейтральный. */
  --action-200: #2E2B45;
  --action-150: #BDEAD8;
  /* Большие полосы в тёмной теме. Зелёная заливка на всю ширину читается
     болотом: тёмный зелёный рядом с фиолетовым фоном сайта уходит в грязь.
     Поэтому полосы почти нейтральные, в тон остальной тёмной палитры,
     а зелёный остаётся там, где он и нужен: в рамках, кнопках и тексте. */
  --action-100: #1E1B2E;
  --action-050: #191727;

  --text-900: #F3F1F8;
  --text-600: #BAC0CE;
  --text-inverse: #FFFFFF;

  --surface: #15131F;
  --surface-alt: #1C1A2A;
  --page: #0A0910;

  --divider: #332F45;
  --border: #4F4B68;

  --alert-700: #FFA79E;
  --alert-300: #6B2E29;
  --alert-100: #2A1414;

  --scrim-hero: linear-gradient(180deg, #241442 0%, #191129 46%, #12101A 82%, #12101A 100%);
  --hero-panel: #1A1726;
  --shadow-card: 0 4px 16px rgba(0,0,0,.44);
  --shadow-drop: 0 8px 24px rgba(0,0,0,.52);
  --img-dim: brightness(.86) saturate(.94);
  --focus: #A78BFA;
}

/* Плитки і підвал у нічній темі: фон лишається темно-фіолетовим, а не світлішає */
:root[data-theme="dark"] [data-tile],
:root[data-theme="dark"] footer { background: #1B1030 !important; }
:root[data-theme="dark"] [data-tile] span { color: #F1ECFF; }

/* Підвал у нічній темі: посилання й текст світлі, зелена кнопка лишається білою */
:root[data-theme="dark"] footer { color: #E9E1FF; }
:root[data-theme="dark"] footer p,
:root[data-theme="dark"] footer li,
:root[data-theme="dark"] footer span,
:root[data-theme="dark"] footer div { color: #DDD3F7 !important; }
:root[data-theme="dark"] footer [style*="--text-inverse"] { color: #FFFFFF !important; }
:root[data-theme="dark"] footer a { color: #DDD3F7 !important; }
:root[data-theme="dark"] footer a:hover { color: #FFFFFF !important; }
:root[data-theme="dark"] footer button:not([style*="--action-600"]) { color: #DDD3F7 !important; }
:root[data-theme="dark"] footer button:not([style*="--action-600"]):hover { color: #FFFFFF !important; }
:root[data-theme="dark"] footer [data-footcontacts] { background: #2A1656 !important; }
:root[data-theme="dark"] footer [data-footcontacts] > div > div > div:first-child { color: #FFFFFF; }
:root[data-theme="dark"] img:not([data-logomark]):not([data-logoword]) { filter: var(--img-dim); }
[data-scrim-hero] { background: var(--scrim-hero) !important; }
[data-heropanel] { background: var(--hero-panel) !important; backdrop-filter: none !important; box-shadow: var(--shadow-card); }
/* Під героєм фон продовжується білим, без різкого стику */
[data-hero] + section { background: var(--surface) !important; }

/* ============================================================
   Контейнер. Резиновый: растёт вместе с окном до 1680 (--container),
   поля по бокам тоже резиновые (--gutter). Фон секций - на всю ширину.
   ============================================================ */
[data-page] { width: 100%; max-width: none; }
main > section > div,
header > div,
footer > div { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
/* Поля по бокам задают сами обёртки: padding:0 var(--gutter) в шаблонах.
   Отдельные значения на 1199 и 767 больше не нужны - поле резиновое. */

/* ============================================================
   Адаптив. Десктоп задано інлайн-стилями, тут лише переозначення.
   ============================================================ */

/* ---------- Вузький десктоп: 1024-1199 ---------- */
@media (max-width: 1199px) {
  [data-desktopnav] { gap: 0 !important; }
  [data-desktopnav] a { font-size: 16px !important; padding-left: 10px !important; padding-right: 10px !important; }
}

/* ---------- Планшет: 768-1023 ---------- */
@media (max-width: 1023px) {
  [data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-cols="side"] { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  img:not([data-tileimg]):not([data-bleed]) { max-width: 100% !important; height: auto !important; }
  [data-hero-copy] { width: 100% !important; }
  [data-stack] { flex-wrap: wrap !important; gap: 16px !important; }
  [data-footcontacts] { grid-template-columns: minmax(0,1fr) !important; gap: 20px !important; }

  /* Шапка стискається, номер лишається текстом */
  [data-header-row] { height: 96px !important; gap: 10px !important; }
  [data-desktopnav] a { font-size: 16px !important; padding-left: 8px !important; padding-right: 8px !important; }
  [data-header-row] [data-logoword] { width: 118px !important; height: 48px !important; }
  [data-header-row] [data-logobox] { width: 48px !important; height: 48px !important; }
  [data-callbtn] { height: 48px !important; padding: 0 14px !important; font-size: 18px !important; }
  [data-hdrtool="theme"], [data-hdrtool="a11y"] { width: 48px !important; height: 48px !important; }
  [data-hdrtool="lang"] button { height: 48px !important; padding: 0 8px !important; font-size: 0 !important; gap: 0 !important; }
  [data-hdrtool] button svg { flex: 0 0 auto; }
  [data-hdrtool="theme"] svg, [data-hdrtool="a11y"] svg { width: 22px; height: 22px; }
  [data-hdrtool] [data-drop] { font-size: 17px !important; }
}

/* Ячейка грида по умолчанию не уже своего содержимого: широкая таблица
   распирает колонку и даёт горизонтальную прокрутку всей странице
   вместо прокрутки самой таблицы. */
[data-cols] > * { min-width: 0; }

/* ---------- Мобільний: до 767 ---------- */
@media (max-width: 767px) {
  [data-cols] { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  main > section { padding-top: 44px !important; padding-bottom: 44px !important; }
  /* Кегли заголовков здесь больше не переопределяются: их ведут токены --fs-* */
  h1 { letter-spacing: -0.02em !important; }
  [data-hero] { min-height: 0 !important; padding-top: 8px !important; }
  [data-hero] > [data-cols="hero"] { padding-top: 16px !important; }
  [data-hero-copy] { max-width: none !important; }
  [data-stack] { flex-direction: column !important; align-items: stretch !important; }
  [data-stack] > * { white-space: normal !important; }
  [data-tile] { min-height: 260px !important; }
  [data-phone] { letter-spacing: 0 !important; }
  [data-tile] span, [data-tile] div { max-width: 100% !important; }
  [data-footcontacts] { grid-template-columns: minmax(0,1fr) !important; }
  /* Вторичный переход внизу страницы: кнопку не растягиваем - она по
     содержимому и стоит по центру карточки. Кегль и отступы поджаты,
     иначе длинная подпись со стрелкой не влезает в строку. */
  [data-cardcta] { margin: 0 auto !important; font-size: var(--fs-sm) !important;
                   padding: 12px 16px !important; }
}

/* ---------- Шапка: мобільний режим до 1023 ---------- */
[data-burger] { display: none; }
[data-mobilenav] { display: none; }
@media (max-width: 1023px) {
  /* у шапці лишаються логотип, інструменти і телефон; меню - у листі */
  [data-desktopnav], [data-burger] { display: none !important; }
  [data-hdrtool] { display: flex !important; }
  [data-hdrtool="lang"] button { height: 48px !important; padding: 0 10px !important; font-size: 16px !important; }
  [data-hdrtool="theme"] button, [data-hdrtool="a11y"] { width: 48px !important; height: 48px !important; }
  [data-mobilenav][data-open="1"] { display: block !important; }
  [data-cookiebtns] { flex-wrap: wrap !important; flex: 1 1 100% !important; }
  [data-cookiebtns] > * { flex: 1 1 auto !important; }
}

/* ---------- Мобільна панель під пальцем ---------- */
[data-mobilebar] { display: none; }
@media (max-width: 1023px) {
  [data-mobilebar] { display: block !important; }
  [data-mobilebar] [data-phone] { font-size: var(--fs-xs) !important; }
  [data-mobilebar] [data-callbtn] span { display: inline !important; }
  [data-page] { padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important; }
  [data-header-row],
  header[data-compact="1"] [data-header-row] { height: 80px !important; background: var(--surface) !important; justify-content: space-between !important; }
  [data-header-row] > div { margin-left: auto !important; }
  [data-mobilenav][data-open="1"] {
    position: fixed !important;
    left: 0; right: 0; top: 80px; bottom: calc(77px + env(safe-area-inset-bottom));
    z-index: 65;
    overflow-y: auto !important;
    border-top: 0 !important;
    box-shadow: 0 -8px 32px rgba(16,24,40,.18);
  }
  [data-cookiebar] { bottom: calc(77px + env(safe-area-inset-bottom)) !important; }
  [data-toast] { left: 0 !important; right: 0 !important; bottom: calc(77px + env(safe-area-inset-bottom)) !important; width: auto !important; max-width: none !important; }
  [data-toast] [data-toastactions] > * { flex: 1 1 140px !important; justify-content: center !important; }
  [data-mobilebar] [data-callbtn] { padding: 0 12px !important; }
  [data-mobilebar] [data-callbtn] svg { width: 22px !important; height: 22px !important; }
}

/* ---------- Спливні вікна на мобільному ---------- */
@media (max-width: 767px) {
  [data-overlay] { padding: 0 !important; z-index: 90 !important; }
  [data-sheet] {
    width: 100% !important; max-width: 100% !important;
    min-height: 100% !important; max-height: 100% !important;
    margin: 0 !important; border-radius: 0 !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
  }
  [data-sheet] > div { padding-left: 16px !important; padding-right: 16px !important; }
  [data-sheet] > div:first-child { position: sticky !important; top: 0 !important; z-index: 3 !important; background: var(--surface) !important; }
  [data-sheet] [data-cols] { grid-template-columns: minmax(0,1fr) !important; }
  [data-pane] { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding-bottom: 28px !important; }
  [data-sheet] button, [data-sheet] a { max-width: 100% !important; }
  [data-tabicon] { display: block !important; }
  [data-tabword] { display: none !important; }
  [data-tab] { flex: 1 1 0 !important; padding: 0 !important; min-height: 60px !important; }
  [data-closeword] { display: none !important; }
  [data-close] { flex: 0 0 auto !important; width: 56px !important; min-width: 56px !important; height: 48px !important; margin-right: 10px !important; }
}
[data-tabicon] { display: none; }

/* Липка шапка: обгортки імпортованого компонента не мають створювати контейнер */
div:has(> header[data-compact]),
div:has(> div > header[data-compact]) { display: contents; }

/* Картка статті: нижче 1100px обкладинка стає горизонтальною смугою над текстом */
@media (max-width: 1100px) {
  [data-card][style*="34%"] { grid-template-columns: minmax(0,1fr) !important; }
  [data-card][style*="34%"] [data-cardcover] { aspect-ratio: 16 / 9; height: auto !important; }
}

/* Стаття: зміст тільки на широких, схеми - вертикальна компоновка на вузьких */
@media (max-width: 1023px) {
  [data-toc] { display: none !important; }
  [data-cols="side"]:has(> [data-toc]) { grid-template-columns: minmax(0,1fr) !important; }
  /* Карточки послуг: слот зображення над текстом */
  [data-cols="card"] { grid-template-columns: minmax(0,1fr) !important; gap: 18px !important; }
  [data-cols="card"] > [data-tile] { max-width: 420px; }
  [data-cols="side"] > article { max-width: 720px !important; }
}
@media (max-width: 767px) {
  [data-svg-h] { display: none !important; }
  [data-svg-v] { display: flex !important; }
  [data-fig] { padding: 18px !important; }
}

/* ============================================================
   Версія для слабозорих: більший кегль, посилений контраст,
   вимкнена анімація, помітний фокус. Вмикається кнопкою в шапці.
   ============================================================ */
:root[data-a11y="1"] {
  --text-600: #2A3140;
  --divider: #667085;
}
:root[data-a11y="1"][data-theme="dark"] {
  --text-600: #E4DCFA;
  --divider: #9E93BF;
}
:root[data-a11y="1"] body { font-size: 20px; line-height: 1.8; }
:root[data-a11y="1"] p,
:root[data-a11y="1"] li,
:root[data-a11y="1"] dd,
:root[data-a11y="1"] dt,
:root[data-a11y="1"] td,
:root[data-a11y="1"] th { font-size: 1.12em !important; line-height: 1.8 !important; }
:root[data-a11y="1"] h1 { font-size: 52px !important; line-height: 1.18 !important; }
:root[data-a11y="1"] h2 { font-size: 36px !important; line-height: 1.3 !important; }
:root[data-a11y="1"] h3 { font-size: 28px !important; line-height: 1.35 !important; }
:root[data-a11y="1"] a { text-decoration: underline; text-underline-offset: 3px; }
:root[data-a11y="1"] a:focus-visible,
:root[data-a11y="1"] button:focus-visible,
:root[data-a11y="1"] input:focus-visible,
:root[data-a11y="1"] select:focus-visible,
:root[data-a11y="1"] textarea:focus-visible {
  outline: 4px solid var(--brand-ink-strong) !important;
  outline-offset: 3px !important;
}
:root[data-a11y="1"] [data-tile] span,
:root[data-a11y="1"] [data-scrim] { text-shadow: none; }
:root[data-a11y="1"] [data-scrim] { background: rgba(31,10,74,.88) !important; }
:root[data-a11y="1"] *,
:root[data-a11y="1"] *::before,
:root[data-a11y="1"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
:root[data-a11y="1"] [data-card]:hover,
:root[data-a11y="1"] [data-tile]:hover { transform: none !important; }
:root[data-a11y="1"] [style*="line-clamp"] {
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
  min-height: 0 !important;
}
:root[data-a11y="1"] [data-cardtitle],
:root[data-a11y="1"] [data-tile] span { min-height: 0 !important; }

/* Підкладка під ілюстраціями - нейтральна, не фіолетова */
[data-imgslot], [data-herophoto], [data-videowrap] { background: var(--surface-alt) !important; }
/* Иллюстрация с прозрачным фоном: подложка не нужна, по высоте не тянем. */
[data-illus] { background: transparent !important; align-self: start; }
[data-illus] img { display: block; width: 100%; height: auto; }
:root[data-theme="dark"] [data-imgslot],
:root[data-theme="dark"] [data-herophoto],
:root[data-theme="dark"] [data-videowrap] { background: #1F1C29 !important; }
[data-imgslot] > img, [data-tile] > img, [data-herophoto] > img { object-fit: cover; object-position: center; }
[data-ratio="16-9"] { aspect-ratio: 16 / 9; }
[data-ratio="4-3"] { aspect-ratio: 4 / 3; }
[data-ratio="1-1"] { aspect-ratio: 1 / 1; }

/* Герой: двоколонкова сітка, фото - друга колонка */
:root[data-theme="dark"] [data-hero] { background: var(--page) !important; }

/* ---------- Мобільний режим: телефон у шапці ховається на вузьких ---------- */
@media (max-width: 1023px) {
  [data-header-row] [data-callbtn] { height: 48px !important; font-size: 19px !important; }
}
@media (max-width: 767px) {
  /* на телефоні в шапці - логотип, мова і кнопка для слабозорих;
     тема живе в меню, телефон - у нижній панелі */
  [data-header-row] [data-callbtn] { display: none !important; }
  [data-hdrtool="theme"] { display: none !important; }
  [data-hdrtool="lang"] { display: flex !important; }
  [data-hdrtool="lang"] > button { height: 44px !important; padding: 0 10px !important; font-size: 16px !important; }
  [data-header-row] { background: var(--brand-100) !important; }
}

/* ---------- Каталог статей «Пацієнту»: 2 колонки до 768, 1 на вузьких ---------- */
@media (max-width: 1023px) and (min-width: 700px) {
  [data-cols="2"]:has([data-card]) { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 699px) {
  [data-cols="2"]:has([data-card]) { grid-template-columns: minmax(0,1fr) !important; }
}

/* ---------- Планшет: інструменти лишаються тільки в шапці ---------- */
@media (max-width: 1023px) and (min-width: 768px) {
  [data-navtools] { display: none !important; }
}

/* ============================================================
   Правки 13.10.2026: резина, фокус, мобильный первый экран
   ============================================================ */

/* Фокус: токен --focus светлеет в тёмной теме. На фиолетовом подвале -
   белая обводка: фиолетовая на фиолетовом не видна ни в одной теме. */
footer a:focus-visible,
footer button:focus-visible { outline-color: #FFFFFF !important; }

/* Телефон, первый экран. Вариант B: заголовок, сразу под ним фото
   низкой полосой, потом текст без карточки-рамки во всю ширину. */
@media (max-width: 767px) {
  [data-hero] > [data-cols="hero"] { display: flex !important; flex-direction: column !important; gap: 20px !important; }
  [data-hero-copy] { display: contents !important; }
  [data-hero-copy] > h1 { order: 1; margin-bottom: 0 !important; }
  [data-herophoto] { order: 2; width: 100% !important; max-width: none !important; height: clamp(200px, 56vw, 320px) !important;
                     aspect-ratio: auto !important; margin: 0 !important; }
  [data-heropanel] { order: 3; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
  /* Язык в шапке телефона: только подпись, без глобуса - иначе не влезает */
  [data-hdrtool="lang"] > button svg { display: none !important; }
}

/* Кнопка записи в шапке: подпись над номером там, где есть место -
   на широком экране и пока шапка развёрнута. */
[data-ctacap] { display: none; }
@media (min-width: 1200px) {
  header[data-compact="0"] [data-ctacap] { display: block; }
}