/* ============================================================
   Stardoctor CI — лендінг продукту Stardoctor Clinical Intelligence.

   Стиль — з презентації для ЕСОЗ 16.10.2026, ключ у style-key.md.
   Брендбук клініки сюди не підключається: "brand_tokens": false.

   Рух лише там, де він пояснює: схеми будуються, коли входять у
   кадр (клас .is-in на [data-scene]). Текст не випливає.
   Початкові приховані стани — тільки під .js: без скрипта
   сторінка показує все одразу і нерухомо.
   ============================================================ */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/jetbrains-mono-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/jetbrains-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Golos Text і Montserrat — у нас, а не з Google Fonts (29.10.2026, «так»
   власника): окремий похід до Google тримав перший екран на телефоні,
   PageSpeed 81–85. Шрифти змінні: один файл на абетку несе всі товщини.
   Ліцензія OFL дозволяє класти їх у себе. */
@font-face {
  font-family: "Golos Text";
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/golos-text-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/golos-text-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;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("assets/fonts/montserrat-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("assets/fonts/montserrat-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 {
  color-scheme: dark;
  --night: #060b20; --deep: #0c1536; --navy: #13205a;
  --brand: #3049a1; --brand-hi: #7d93ff; --sky: #5cc2ff;
  --accent: #ff8a3d; --ok: #43d68c; --warn: #ffc857; --bad: #ff6b6b;
  --ink-0: #f0f3ff; --ink-1: #c3cbef; --ink-2: #8792bf;
  --wire: rgba(140,160,255,.22); --edge: rgba(160,180,255,.18);
  --glass: rgba(13,21,54,.72);
  --f-display: "Montserrat", "Golos Text", system-ui, sans-serif;
  --f-ui: "Golos Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --r-card: 16px; --r-field: 12px;
  --gut: 16px; --maxw: 1180px;
  --sec: 64px;
  --top-h: 60px;
}
@media (min-width: 768px) { :root { --gut: 28px; --sec: 104px; } }
@media (min-width: 1200px) { :root { --sec: 120px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 12px); }
body {
  margin: 0; min-height: 100dvh;
  background: var(--night); color: var(--ink-0);
  font: 400 17px/1.55 var(--f-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (min-width: 1200px) { body { font-size: 18px; } }
img, svg { display: block; max-width: 100%; }
a { color: var(--sky); }
p, ul, ol, figure, blockquote, h1, h2, h3 { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(92,194,255,.35); }

/* ---------- Нічне небо --------------------------------------- */
.sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 820px at 70% 18%, rgba(48,73,161,.48), transparent 62%),
    radial-gradient(700px 520px at 92% 8%, rgba(92,194,255,.10), transparent 70%),
    radial-gradient(820px 620px at 4% 96%, rgba(255,138,61,.07), transparent 70%),
    linear-gradient(180deg, #081030, #050918);
}
.stars { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
/* Небо вмикає app.js, коли сторінка вже показана, — зорі проявляються. */
.js .stars { opacity: 0; transition: opacity .9s ease; }
.js .stars.is-on { opacity: 1; }
.top, main, .foot { position: relative; z-index: 1; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: var(--sec) 0; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 30;
  background: var(--accent); color: var(--night); padding: 10px 16px; border-radius: 10px; font-weight: 600;
}
.skip:focus { top: 12px; }

/* ---------- Типографіка -------------------------------------- */
h1, h2, h3 { font-family: var(--f-display); letter-spacing: -.012em; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(29px, 8.6vw, 58px); line-height: 1.07; }
h2 { font-weight: 800; font-size: clamp(27px, 6.9vw, 44px); line-height: 1.12; max-width: 22ch; }
h3 { font-weight: 700; font-size: clamp(19px, 4.9vw, 22px); line-height: 1.28; }
.lead { margin-top: 16px; font-size: clamp(17px, 4.5vw, 20px); line-height: 1.5; color: var(--ink-1); max-width: 56ch; }
.eyebrow {
  font-family: var(--f-mono); font-weight: 500; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sky);
}

/* ---------- Кнопки й посилання ------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--night);
  font: 700 17px/1.1 var(--f-ui); text-decoration: none; text-align: center; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(255,138,61,.26);
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover { background: #ff9a57; box-shadow: 0 12px 38px rgba(255,138,61,.4); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn--block { display: flex; width: 100%; }
.link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--sky); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.link:hover { color: #8dd5ff; }

/* ---------- Шапка -------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 20; height: var(--top-h);
  transition: background-color .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.top.is-stuck {
  background: rgba(6,11,32,.82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--edge);
}
.top__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink-0); text-decoration: none; }
.logo__mark { width: 26px; height: 26px; fill: var(--brand-hi); filter: drop-shadow(0 0 10px rgba(125,147,255,.55)); }
.logo__name { font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.logo__name b { font-weight: 800; color: var(--accent); }
.top__cta { display: none; }
@media (min-width: 600px) { .top__cta { display: inline-flex; } }

/* ---------- 1. Перший екран ---------------------------------- */
.hero { padding: 20px 0 56px; }
.hero__grid { display: grid; gap: 8px; }
.hero__text { max-width: 640px; }
.hero h1 { margin-top: 14px; }
.hero__sub { margin-top: 16px; font-size: clamp(17px, 4.5vw, 20px); line-height: 1.5; color: var(--ink-1); max-width: 34em; }
.hero__cta { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.hero__orbit { width: min(100%, 470px); margin: 6px auto 0; }
@media (min-width: 960px) {
  .hero { padding: 48px 0 72px; }
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 40px; min-height: calc(100dvh - var(--top-h) - 120px); }
  .hero h1 { font-size: clamp(40px, 3.8vw, 52px); }
  .hero__orbit { width: 100%; max-width: 560px; margin: 0 0 0 auto; }
}

/* Підписи в SVG — у одиницях схеми; на телефоні схема дрібніша,
   тому кегль у ній більший, щоб на екрані вийшло ~15 px. */
svg text { font-family: var(--f-ui); }
.olbl text { font-size: 26px; fill: var(--ink-1); font-weight: 500; }
.ocore text { font-family: var(--f-display); font-weight: 700; font-size: 28px; fill: var(--ink-0); }
@media (min-width: 960px) { .olbl text { font-size: 21px; } .ocore text { font-size: 25px; } }

/* ---------- Рух схем ----------------------------------------- */
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .draw { stroke-dashoffset: 1; }
.js .is-in .draw { animation: draw 1.3s cubic-bezier(.3,.7,.2,1) forwards; animation-delay: var(--d, 0s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.pop { transform-box: fill-box; transform-origin: center; }
.js .pop { opacity: 0; }
.js .is-in .pop { animation: pop .62s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay: var(--d, 0s); }
@keyframes pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
.js .fade { opacity: 0; }
.js .is-in .fade { animation: fade .8s ease forwards; animation-delay: var(--d, 0s); }
@keyframes fade { to { opacity: 1; } }
.spin { transform-box: fill-box; transform-origin: center; animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.blink { animation: blink 1.1s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.pulse { transform-box: fill-box; transform-origin: center; animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }

/* Промені на орбіті (Animated Beam): поверх SVG лежать шість смужок уздовж
   спиць — від краю вузла до краю ядра. По кожній біжить світло: градієнт із
   довгим мʼяким хвостом і розмитим передом, ширина як у спиці. Рух — CSS
   transform (на телефоні це найдешевше). Власник 18.10: «Залишаємо цей
   варіант анімації на лендингу». */
.hero__orbit { position: relative; }
.rays { position: absolute; inset: 0; pointer-events: none; }
.rays i {
  position: absolute; left: var(--x); top: var(--y); width: 17.84%; height: 12px; margin-top: -6px;
  transform-origin: 0 50%; transform: rotate(var(--a)); overflow: hidden;
}
.rays i::before, .rays i::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 46%;
  background: linear-gradient(90deg, transparent, var(--c) 72%, transparent);
  transform: translateX(-100%);
  animation: ray 3.2s cubic-bezier(.45,.05,.35,1) infinite; animation-delay: calc(1.9s + var(--bd, 0s));
}
.rays i::before { height: 3px; margin-top: -1.5px; filter: blur(.6px); }
.rays i::after { height: 9px; margin-top: -4.5px; opacity: .3; filter: blur(2.5px); }
@keyframes ray { 0% { transform: translateX(-100%); } 70%, 100% { transform: translateX(218%); } }
.is-off .rays i::before, .is-off .rays i::after { animation-play-state: paused; }
/* Схема поза кадром — петлі на паузі. */
.is-off .spin, .is-off .blink, .is-off .pulse { animation-play-state: paused; }

/* ---------- Картки й поверхні -------------------------------- */
.card, .pcard, .vcard, .tile, .quiz, .form, .flow li {
  background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r-card);
}

/* ---------- 2. Карта розривів -------------------------------- */
.map__grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .map__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; } .map__intro { position: sticky; top: calc(var(--top-h) + 32px); } }
.quiz { padding: 20px; box-shadow: 0 30px 80px rgba(2,6,20,.5), 0 0 60px rgba(92,194,255,.07); }
@media (min-width: 600px) { .quiz { padding: 32px; } }
.quiz__static { padding-left: 1.3em; display: grid; gap: 12px; color: var(--ink-1); }
.quiz__static-note { margin-top: 18px; color: var(--ink-1); }
.js .quiz__static, .js .quiz__static-note { display: none; }
.quiz__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.quiz__count { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.quiz__steps { display: flex; gap: 6px; }
.quiz__steps i { width: 18px; height: 4px; border-radius: 2px; background: rgba(160,180,255,.2); transition: background-color .25s ease; }
.quiz__steps i.is-done { background: var(--sky); }
.quiz__q {
  margin-top: 20px; min-height: 4.2em;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 5.4vw, 26px); line-height: 1.3;
  transition: opacity .18s ease, transform .18s ease;
}
.quiz__q.is-swap { opacity: 0; transform: translateY(6px); }
.quiz__answers { margin-top: 22px; display: grid; gap: 10px; }
@media (min-width: 440px) { .quiz__answers { grid-template-columns: repeat(3, 1fr); } }
.ans {
  min-height: 54px; padding: 0 16px; border-radius: 14px;
  border: 1px solid var(--wire); background: rgba(19,32,90,.55); color: var(--ink-0);
  font: 600 17px/1 var(--f-ui); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}
.ans:hover { border-color: var(--sky); background: rgba(92,194,255,.12); }
.ans:active, .ans.is-picked { transform: scale(.98); border-color: var(--sky); background: rgba(92,194,255,.2); }
.quiz__back {
  margin-top: 14px; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--ink-2); font: 500 15px/1 var(--f-ui); text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.quiz__back:hover { color: var(--ink-1); }

.result:focus { outline: none; }
/* Блоки, куди веде кнопка (app.js ставить їм tabindex=-1 і фокус), — без рамки фокуса. */
section[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }
.result__map { width: min(100%, 420px); margin: 0 auto; }
.result__verdict { margin-top: 14px; font-family: var(--f-display); font-weight: 800; font-size: clamp(24px, 6vw, 30px); line-height: 1.15; }
.result__verdict.is-ok { color: var(--ok); }
.result__verdict.is-warn { color: var(--warn); }
.result__verdict.is-bad { color: var(--bad); }
.result__text { margin-top: 8px; color: var(--ink-1); }
.result__gaps { margin-top: 18px; padding: 0; list-style: none; display: grid; gap: 12px; }
.result__gaps li { padding: 12px 14px; border-radius: 12px; background: rgba(6,11,32,.5); border: 1px solid var(--edge); }
.result__gaps .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.result__gaps b { font-weight: 600; }
.result__gaps .st { font-size: 14px; font-weight: 600; }
.result__gaps .st--bad { color: var(--bad); }
.result__gaps .st--warn { color: var(--warn); }
.result__gaps span.fix { display: block; margin-top: 4px; color: var(--ink-1); font-size: 16px; }
.result__cta { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.result__cta .quiz__back { margin-top: 0; }
.result__note { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.mlbl text { font-size: 25px; fill: var(--ink-1); font-weight: 500; }
.mcore text { font-family: var(--f-display); font-weight: 700; font-size: 26px; fill: var(--ink-0); }

/* ---------- 3. Знайомо? -------------------------------------- */
.pain__layout { margin-top: 32px; display: grid; gap: 28px; }
/* Одна колонка й на десктопі: це стрічка сповіщень, а не сітка карток. */
.pain__grid { display: grid; gap: 12px; max-width: 640px; }
.pcard__meta { margin-bottom: 6px; font-size: 14px; color: var(--ink-2); transition: color .35s ease; }
@media (min-width: 1024px) { .pain__layout { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px; align-items: center; } }
.pcard { padding: 18px 20px; transition: border-color .35s ease, box-shadow .35s ease; }
.pcard p { margin-top: 8px; color: var(--ink-1); }
/* Тривога — червоний контур і перший рядок (власник 29.10). Без скрипта — у 4-ї
   картки, як було; зі скриптом іде за прокруткою 1 → 4 (app.js, клас .is-cur). */
.pain__grid:not(.is-live) .pcard--alarm, .pain__grid.is-live .pcard.is-cur {
  border-color: rgba(255,107,107,.42); box-shadow: inset 0 0 0 1px rgba(255,107,107,.06), 0 0 40px rgba(255,107,107,.06);
}
.pain__grid:not(.is-live) .pcard--alarm .pcard__meta, .pain__grid.is-live .pcard.is-cur .pcard__meta { color: var(--bad); }
.broken svg { width: min(100%, 340px); margin: 0 auto; }
.broken figcaption { margin: 18px auto 0; max-width: 40ch; color: var(--ink-1); }
.sl1 { font-size: 19px; font-weight: 600; fill: var(--ink-0); }
.sl2 { font-size: 15px; fill: var(--ink-2); }
.sflag { font-family: var(--f-mono); font-size: 15px; letter-spacing: .1em; fill: var(--bad); }

/* ---------- 4. Інструмент чи система ------------------------- */
/* Власник 19.10. На телефоні — один стовпчик у порядку розмітки: картка
   «Будь-яка МІС», факти, висновок власника, поворот «Ми робимо навпаки»
   розміром заголовка, картка Stardoctor і пояснення — місток до «Як задача
   стає функцією». Від 768 px картки стоять поруч, як порівняння, а поворот
   і пояснення — під висновком власника, перед наступним блоком. */
.versus .lead { text-wrap: balance; }
.versus__grid { margin-top: 32px; }
.versus__turn { margin-top: 56px; font-weight: 800; font-size: clamp(27px, 6.9vw, 44px); line-height: 1.12; max-width: 22ch; }
.versus .vcard--sys { margin-top: 24px; }
.versus__sum { margin-top: 24px; font-size: clamp(17px, 4.5vw, 20px); line-height: 1.5; color: var(--ink-1); max-width: 56ch; }
@media (min-width: 768px) {
  .versus__grid {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px;
    grid-template-areas: "tool sys" "facts facts" "quote quote" "turn turn" "sum sum";
  }
  .versus .vcard--tool { grid-area: tool; }
  .versus .vcard--sys { grid-area: sys; margin-top: 0; }
  .versus__grid .facts { grid-area: facts; }
  .versus__grid .quote { grid-area: quote; }
  .versus__turn { grid-area: turn; }
  .versus__sum { grid-area: sum; margin-top: 16px; }
}
.vcard { padding: 24px; }
@media (min-width: 768px) { .vcard { padding: 32px; } }
.vcard__k { font-family: var(--f-display); font-weight: 800; font-size: 22px; }
.vcard ul { margin-top: 16px; padding: 0; list-style: none; display: grid; gap: 12px; }
.vcard li { position: relative; padding-left: 30px; color: var(--ink-1); }
.vcard li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.vcard--tool { background: rgba(10,15,40,.6); }
.vcard--tool .vcard__k { color: var(--ink-2); }
.vcard--tool li::before { content: "✕"; color: var(--bad); }
.vcard--sys { border-color: rgba(255,138,61,.5); box-shadow: inset 0 0 0 1px rgba(255,138,61,.08), 0 0 56px rgba(255,138,61,.09); }
.vcard--sys .vcard__k { color: var(--accent); }
.vcard--sys li { color: var(--ink-0); }
.vcard--sys li::before { content: "✓"; color: var(--ok); }
.facts { margin-top: 24px; display: grid; gap: 12px; }
@media (min-width: 768px) { .facts { grid-template-columns: 1fr 1fr; gap: 24px; } }
.fact { padding: 16px 18px; border-radius: 14px; background: rgba(6,11,32,.55); border: 1px solid var(--edge); color: var(--ink-1); font-size: 16px; }
.fact b { display: block; color: var(--ink-0); font-weight: 600; font-size: 17px; margin-bottom: 4px; }
.fact__src { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.quote { margin-top: 36px; max-width: 46ch; }
.quote p { font-family: var(--f-display); font-weight: 700; font-size: clamp(19px, 4.7vw, 25px); line-height: 1.35; }
.quote footer { margin-top: 12px; color: var(--ink-2); font-size: 16px; }

/* ---------- 5. Цикл ------------------------------------------ */
/* Розкладка та сама, що до анімації: на телефоні коло, під ним кроки, далі
   приклад і кнопка; на десктопі текст ліворуч, коло праворуч. .how__stage —
   межа прилипання кола: коли кроки скінчились, коло їде вгору разом зі сторінкою. */
.how__grid { margin-top: 26px; }
.how__stage { display: grid; gap: 26px; }
@media (min-width: 960px) {
  .how__grid { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: center; }
  .how__stage { display: contents; }
  .how__stage .cycle { grid-column: 1; grid-row: 1; align-self: end; }
  .how__after { grid-column: 1; grid-row: 2; align-self: start; }
  .how__fig { grid-column: 2; grid-row: 1 / span 2; }
}
.cycle { margin-top: 0; padding: 0; list-style: none; counter-reset: c; display: grid; gap: 16px; }
.cycle li { counter-increment: c; position: relative; padding-left: 52px; color: var(--ink-1); min-height: 36px; }
.cycle li::before {
  content: counter(c); position: absolute; left: 0; top: -4px;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 800; font-size: 17px; color: var(--ink-0);
  background: var(--navy); border: 2px solid var(--brand-hi);
  transition: border-color .3s ease, color .3s ease;
}
/* Помаранчевий номер у списку — той самий крок, що й на колі (власник 29.10); без сцени — 4-й. */
.how:not(.is-steps) .cycle li:last-child::before, .how.is-steps .cycle li.is-cur::before { border-color: var(--accent); color: var(--accent); }
.cycle b { color: var(--ink-0); font-weight: 600; }
.how__example { margin: 24px 0 28px; padding-left: 16px; border-left: 2px solid var(--brand-hi); color: var(--ink-1); max-width: 46ch; }
.how__fig svg { width: min(100%, 290px); margin: 0 auto; }
@media (min-width: 960px) { .how__fig svg { width: min(100%, 440px); } }
.cnum text { font-family: var(--f-display); font-weight: 800; font-size: 30px; fill: var(--ink-0); }
.cnum .cnum--acc { fill: var(--accent); }
.ccenter text { font-family: var(--f-display); font-weight: 800; font-size: 40px; fill: var(--ink-0); }
.ccenter .ccenter--acc { fill: var(--accent); }

/* Кроки під прокрутку, вмикає app.js класом .is-steps. Коло того самого
   розміру й вигляду, без фону — просто на небі. На телефоні воно прилипає під
   шапкою; кроки заходять під нього й розчиняються (прозорість ставить app.js),
   точка й дуга йдуть по колу за прокруткою. Власник 18.10: «коло треба
   залишити точно таким яким воно було… і без додаткового фона». */
.ring-dots { display: none; }
.how.is-steps .ring-dots { display: inline; }
.how.is-steps .how__fig .moving { display: none; }
.how.is-steps .ring-arc { animation: none !important; }
/* Вузли: пройдені — сині, поточний — помаранчевий, і він іде 1 → 4 за прокруткою
   (власник 29.10). Без сцени (без скрипта, «менше руху») помаранчевий лишається
   4-й, як намальовано в розмітці. */
.how.is-steps .cnum circle { stroke: var(--brand-hi); stroke-width: 2; transition: fill .3s ease, stroke .3s ease; }
.how.is-steps .cnum text { transition: fill .3s ease; }
.how.is-steps .cnum text.cnum--acc { fill: var(--ink-0); }
.how.is-steps .cnum g.is-on circle { fill: var(--brand); }
.how.is-steps .cnum g.is-cur circle { fill: var(--accent); stroke: var(--accent); }
.how.is-steps .cnum g.is-cur text { fill: var(--night); }
@media (max-width: 959px) {
  .how.is-steps .how__fig { position: sticky; top: calc(var(--top-h) + 4px); z-index: 2; }
}

/* ---------- 6. Історія --------------------------------------- */
.story__grid { display: grid; gap: 44px; }
@media (min-width: 960px) { .story__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: start; } }
.tl { margin-top: 30px; padding: 0; list-style: none; position: relative; }
.tl::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 18px; width: 2px; background: linear-gradient(var(--brand-hi), rgba(125,147,255,.08)); }
.tl li { position: relative; padding: 0 0 24px 44px; }
.tl li::before {
  content: ""; position: absolute; left: 2px; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--night); border: 2px solid var(--brand-hi); box-shadow: 0 0 14px rgba(125,147,255,.55);
}
.tl li.tl__now::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 18px var(--accent); }
.tl__y { font-family: var(--f-mono); font-size: 14px; letter-spacing: .06em; color: var(--sky); }
.tl p { margin-top: 2px; color: var(--ink-1); }
/* Лінія часу розрізана на два списки (сцена історії, app.js), але виглядає
   однією: лінія першого доходить до низу, лінія другого — з верху. */
.story__path { position: relative; }
.tl--b { margin-top: 0; }
.tl--a::before { bottom: 0; background: linear-gradient(var(--brand-hi), rgba(125,147,255,.38)); }
.tl--b::before { top: 0; background: linear-gradient(rgba(125,147,255,.38), rgba(125,147,255,.08)); }
/* Сцена історії, вмикає app.js класом .is-path: помаранчевий вогник їде лінією
   часу від 2016 до 2026; на телефоні заголовок прилипає, а пункти під ним мʼяко
   зрізає маска (без фону — просто на небі). */
.tl__marker { display: none; }
.story.is-path .tl__marker {
  display: block; position: absolute; left: 2px; top: 0; width: 18px; height: 18px; margin-top: -9px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--accent); box-shadow: 0 0 18px var(--accent);
  z-index: 2; pointer-events: none; will-change: transform, translate;
}
.story.is-path .tl li.tl__now::before { background: var(--night); border-color: var(--brand-hi); box-shadow: 0 0 14px rgba(125,147,255,.55); }
@media (max-width: 959px) {
  /* Власник 18.10: заголовок зупиняється «на певній відстані в розмірі одної
     строчки тексту до хедеру», а пункти зникають теж за рядок до заголовка.
     Рядок тексту = 17 px × 1,55 ≈ 26 px. Під заголовком два такі рядки
     (margin-bottom 52 px): верхній порожній — до нього пункти не доходять,
     у нижньому пункт розчиняється (маска, app.js рахує --cut). Тому в спокої
     2016 видно повністю. Сюди ж, на 52 px під заголовок, доходить 2026 — і тут
     заголовок відлипає: липкий блок не виходить за межі сцени разом зі своїм
     відступом. Відступ списку зливається з відступом заголовка — його нуль. */
  .story.is-path .story__stage h2 { position: sticky; top: calc(var(--top-h) + 26px); z-index: 2; margin-bottom: 52px; }
  .story.is-path .tl--a {
    margin-top: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent var(--cut, -200px), #000 calc(var(--cut, -200px) + 26px));
    mask-image: linear-gradient(to bottom, transparent var(--cut, -200px), #000 calc(var(--cut, -200px) + 26px));
  }
}
.story__quote { margin-top: 8px; font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 5vw, 24px); color: var(--accent); max-width: 26ch; }
.stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.stat { padding: 18px 0; border-bottom: 1px solid var(--edge); }
.stat:nth-child(-n+2) { padding-top: 0; }
.stat:nth-child(3), .stats__note, .stats .btn { grid-column: 1 / -1; }
.stat__n { display: block; white-space: nowrap; font-family: var(--f-display); font-weight: 800; font-size: clamp(30px, 8vw, 52px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat__n--acc { color: var(--accent); }
.stat p { margin-top: 10px; color: var(--ink-1); }
.stat strong { color: var(--ink-0); font-weight: 600; }
.stats__note { margin: 18px 0 26px; font-size: 15px; color: var(--ink-2); }
.stats .btn { justify-self: start; }

/* ---------- 7. Що входить (бенто: 6 клітинок під 6 модулів) --- */
.bento { margin-top: 32px; display: grid; gap: 14px; }
@media (min-width: 360px) { .bento { grid-template-columns: 1fr 1fr; gap: 12px; } .tile--mis, .tile--ai { grid-column: span 2; } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(3, 1fr); gap: 14px; } .tile--mis { grid-column: span 2; } .tile--ai { grid-column: span 3; } }
.tile { padding: 18px; background-repeat: no-repeat; }
.tile p { margin-top: 6px; color: var(--ink-1); font-size: 15px; line-height: 1.45; }
.tile h3 { font-size: 18px; }
@media (min-width: 700px) { .tile { padding: 24px; } .tile p { font-size: 16px; } .tile h3 { font-size: 20px; } }
/* Колір модуля — той самий, що його вузол на орбіті першого екрана. */
.tile--mis   { background-image: radial-gradient(420px 220px at 0% 0%, rgba(92,194,255,.16), transparent 70%); }
.tile--crm   { background-image: radial-gradient(320px 200px at 0% 0%, rgba(125,147,255,.18), transparent 70%); }
.tile--front { background-image: radial-gradient(320px 200px at 0% 0%, rgba(255,200,87,.12), transparent 70%); }
.tile--mkt   { background-image: radial-gradient(320px 200px at 0% 0%, rgba(170,182,255,.14), transparent 70%); }
.tile--fin   { background-image: radial-gradient(320px 200px at 0% 0%, rgba(67,214,140,.13), transparent 70%); }
.tile--ai    { background-image: radial-gradient(520px 260px at 100% 0%, rgba(255,138,61,.14), transparent 70%); display: grid; gap: 20px; }
@media (min-width: 1024px) { .tile--ai { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 36px; padding: 32px; } .tile--mis { padding: 32px; } }
.tile--mis h3, .tile--ai h3 { font-size: clamp(21px, 5.4vw, 26px); }
.tile--mis p, .tile--ai p { font-size: 16px; }
/* Картка воріт, як у Telegram (власник 19.10): повідомлення бота, під ним ряд
   кнопок однакової ширини з підписом по центру. Кольори — нічна тема Telegram;
   вони близькі до нашого неба, тож картка читається як «телефон власника». */
.tg { width: 100%; max-width: 440px; justify-self: center; display: grid; gap: 6px; }
.tg__msg { position: relative; padding: 10px 14px 24px; border-radius: 16px 16px 16px 6px; background: #182533; }
.tg__msg p { margin: 0; font-size: 15.5px; line-height: 1.42; color: #f1f4f8; }
.tg__time { position: absolute; right: 12px; bottom: 6px; font-size: 12px; color: #7d8fa5; }
.tg__keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tg__key {
  display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 42px; padding: 8px 4px;
  border-radius: 12px; background: #24384f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  color: #fff; font-size: clamp(14px, 3.9vw, 15.5px); font-weight: 600; white-space: nowrap;
}
.inside__more { margin-top: 22px; color: var(--ink-1); }

/* ---------- 8. Ваша система ---------------------------------- */
.own__grid { display: grid; gap: 36px; }
@media (min-width: 960px) { .own__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; } }
.own__list { margin-top: 26px; padding: 0; list-style: none; display: grid; gap: 18px; }
.own__list li { color: var(--ink-1); padding-left: 18px; border-left: 2px solid var(--brand-hi); }
.own__list b { color: var(--ink-0); font-weight: 600; }
/* Схема — одна думка (власник 19.10): система, усі потоки й ключі — у вас,
   а не в постачальника МІС. Стіни клініки, система в центрі, потоки біжать
   по колу всередині; ключ перелітає від постачальника до вас, на звʼязку з
   ним — червоний прапорець. На телефоні на всю ширину, підписи від 15 px.
   Класи частинок — own-flow: .flow уже зайнятий списком «Як ми заходимо». */
.own__fig { display: grid; justify-items: center; }
.own__part { width: min(100%, 420px); }
.own__svg { display: block; width: 100%; height: auto; }
.dtab { font-weight: 600; font-size: 17px; fill: var(--ink-0); }
.dsys text { font-family: var(--f-display); font-weight: 800; font-size: 21px; fill: var(--ink-0); }
.dflow { font-size: 15px; fill: var(--ink-1); }
.dkey { font-family: var(--f-ui); font-weight: 700; font-size: 19px; fill: var(--accent); }
.dprov { font-weight: 600; font-size: 17px; fill: var(--ink-2); }
.dnote { font-size: 15px; fill: var(--ink-2); }
.own__cap { width: min(100%, 420px); margin-top: 18px; text-align: center; font-weight: 600; font-size: 18px; line-height: 1.4; color: var(--ink-0); text-wrap: balance; }
/* Потоки: три частки по колу всередині стін (прямокутник 26–334 × 40–302). */
.own-flow { fill: var(--sky); opacity: 0; }
.own-flow--2 { fill: var(--ok); }
.own-flow--3 { fill: var(--brand-hi); }
.js .is-in .own-flow { opacity: 1; transition: opacity .6s ease .8s; animation: ownFlow 10s linear infinite; }
.js .is-in .own-flow--2 { animation-delay: -3.33s; }
.js .is-in .own-flow--3 { animation-delay: -6.66s; }
@keyframes ownFlow {
  0% { transform: translate(40px, 40px); } 25.8% { transform: translate(320px, 40px); }
  50% { transform: translate(320px, 302px); } 75.8% { transform: translate(40px, 302px); }
  100% { transform: translate(40px, 40px); }
}
/* Ключ: стоїть у постачальника, потім перелітає до системи. Без скрипта й
   при «менше руху» одразу вдома. */
.own-key { transform: translate(180px, 227px); }
.js .own-key { opacity: 0; transform: translate(180px, 380px) rotate(-30deg); }
.js .is-in .own-key { animation: keyHome 2.3s 1.2s forwards; }
@keyframes keyHome {
  0% { opacity: 0; transform: translate(180px, 380px) rotate(-30deg); }
  18% { opacity: 1; transform: translate(180px, 380px) rotate(-30deg); }
  44% { opacity: 1; transform: translate(180px, 380px) rotate(-30deg); animation-timing-function: cubic-bezier(.3,1.2,.5,1); }
  100% { opacity: 1; transform: translate(180px, 227px) rotate(0deg); }
}
.is-off .own-flow { animation-play-state: paused; }

/* ---------- 9. Як ми заходимо -------------------------------- */
.flow { margin: 32px 0 30px; padding: 0; list-style: none; counter-reset: f; display: grid; gap: 12px; }
.flow li { counter-increment: f; padding: 16px 16px 16px 60px; position: relative; }
.flow h3 { font-size: 18px; }
.flow li::before {
  content: counter(f); position: absolute; left: 14px; top: 15px;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 800; font-size: 16px; color: var(--ink-0);
  background: var(--navy); border: 2px solid var(--brand-hi);
  transition: border-color .35s ease, color .35s ease, box-shadow .35s ease;
}
/* Помаранчевий номер іде за прокруткою 1 → 5 (власник 29.10, app.js, клас
   .is-cur). Без скрипта світиться 5-й, як було. */
.flow:not(.is-live) li:last-child::before,
.flow.is-live li.is-cur::before { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 16px rgba(255,138,61,.5); }
.flow p { margin-top: 4px; color: var(--ink-1); font-size: 16px; }
@media (min-width: 1024px) {
  .flow { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .flow li { padding: 70px 20px 22px; }
  .flow li::before { left: 20px; top: 20px; }
}

/* ---------- 10. Засновник ------------------------------------ */
.founder__grid { display: grid; gap: 30px; }
@media (min-width: 900px) { .founder__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; } }
/* ---------- 9а. Ціна (бриф Framework 25.10, власник 29.10: «так») ---- */
/* Таблиця на два розміри клініки. На телефоні три вузькі стовпчики, тому
   число й одиниця — двома рядками, і нічого не виходить за край. */
.price__card { margin-top: 28px; padding: 4px 0; }
.price table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.price th, .price td { padding: 14px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--edge); }
.price th:first-child, .price td:first-child { padding-left: 16px; width: 42%; }
.price tbody tr:last-child th, .price tbody tr:last-child td { border-bottom: 0; }
.price thead th { font-family: var(--f-display); font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--ink-0); }
.price tbody th { font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--ink-1); }
.price td b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--ink-0); white-space: nowrap; }
.price td small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.price tr.is-founder th, .price tr.is-founder td b { color: var(--accent); }
.price__notes { margin: 20px 0 28px; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--ink-1); }
.price__notes li { padding-left: 16px; border-left: 2px solid var(--brand-hi); }
@media (min-width: 700px) {
  .price__card { max-width: 760px; }
  .price th, .price td { padding: 16px 20px; }
  .price th:first-child, .price td:first-child { padding-left: 24px; }
  .price thead th { font-size: 17px; }
  .price td b { font-size: 22px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Фото засновника — без рамки (власник 20.10, «варіант три»): вирізаний
   портрет на небі, позаду мʼяке синє світло, низ розчиняється. */
.founder__photo { position: relative; width: min(100%, 360px); margin: 0 auto; }
.founder__photo::before {
  content: ""; position: absolute; inset: 6% 4% 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(92,140,255,.42), rgba(48,73,161,.18) 60%, transparent);
  filter: blur(14px);
}
.founder__photo img {
  position: relative; display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 98%);
          mask-image: linear-gradient(to bottom, #000 68%, transparent 98%);
}
@media (min-width: 900px) { .founder__photo { width: min(100%, 440px); } }
.founder__name { margin-top: 22px; font-family: var(--f-display); font-weight: 700; font-size: 22px; }
.founder__role { margin-top: 4px; color: var(--sky); font-size: 16px; }
.founder__text p + p { margin-top: 14px; }
.founder__text p:not(.founder__name):not(.founder__role) { color: var(--ink-1); max-width: 56ch; }
.founder__role + p { margin-top: 18px !important; }

/* ---------- 11. Питання -------------------------------------- */
.faq__list { margin-top: 28px; display: grid; gap: 10px; max-width: 820px; }
.faq details { border-radius: 14px; border: 1px solid var(--edge); background: rgba(13,21,54,.6); }
.faq details[open] { border-color: var(--wire); }
.faq summary {
  list-style: none; cursor: pointer; min-height: 56px; padding: 16px 52px 16px 18px; position: relative;
  font-weight: 600; font-size: 17px; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--sky); border-bottom: 2px solid var(--sky); transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__a { padding: 0 18px 18px; color: var(--ink-1); }
/* Відповіді з кількох абзаців (бриф 25.10) — з відступом між ними. */
.faq__a p + p { margin-top: 10px; }

/* ---------- 12. Заявка --------------------------------------- */
.demo__grid { display: grid; gap: 30px; }
@media (min-width: 960px) { .demo__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; } }
.demo__phone { margin-top: 18px; color: var(--ink-1); }
.demo__phone a { font-weight: 600; white-space: nowrap; }
/* Телефон і пошта в тексті — цілі дотику 44 px, ростуть усередину рядка. */
.demo__phone a, .foot a { display: inline-flex; align-items: center; min-height: 44px; }
.form { padding: 22px; position: relative; box-shadow: 0 30px 80px rgba(2,6,20,.5); }
@media (min-width: 600px) { .form { padding: 32px; } }
.form__body { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: 16px; }
.opt { font-weight: 400; color: var(--ink-2); font-size: 14px; }
.field input, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--r-field);
  border: 1px solid rgba(160,180,255,.32); background: rgba(6,11,32,.72); color: var(--ink-0);
  font: 400 17px/1.4 var(--f-ui);
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(92,194,255,.25); }
.field input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(255,107,107,.18); }
.field__hint { font-size: 14px; color: var(--ink-2); }
.field__err { font-size: 15px; color: var(--bad); }
.check { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 15px; color: var(--ink-1); cursor: pointer; }
.check__text a { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__fail { color: var(--bad); }
.form__ok { display: none; }
.form.is-sent .form__body { display: none; }
.form.is-sent .form__ok { display: block; }
.form__ok-h { font-family: var(--f-display); font-weight: 800; font-size: 26px; color: var(--ok); }
.form__ok p + p { margin-top: 8px; color: var(--ink-1); }

/* ---------- Підвал ------------------------------------------- */
.foot { padding: 40px 0 120px; border-top: 1px solid var(--edge); font-size: 15px; color: var(--ink-2); }
@media (min-width: 600px) { .foot { padding-bottom: 48px; } }
.foot__in { display: grid; gap: 6px; }
.foot__legal { color: var(--ink-1); }
.foot a { color: var(--ink-1); }
.foot__note { margin-top: 10px; max-width: 70ch; }

/* ---------- Липка кнопка на телефоні ------------------------- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(6,11,32,0), rgba(6,11,32,.92) 38%);
  transform: translateY(110%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.sticky.is-on { transform: none; }
@media (min-width: 600px) { .sticky { display: none; } }

/* ---------- Незаповнені місця (чернетка) --------------------- */
.fill { color: var(--ink-1); }
body.dev .fill { color: #ffd68a; background: rgba(255,200,87,.14); border-radius: 4px; padding: 0 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.dev-badge { display: none; }
body.dev .dev-badge {
  display: block; position: fixed; right: 12px; bottom: 82px; z-index: 40;
  padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,200,87,.5);
  background: rgba(6,11,32,.9); color: #ffd68a; font: 600 13px/1 var(--f-mono); cursor: pointer;
}
@media (min-width: 600px) { body.dev .dev-badge { bottom: 16px; } }

/* ---------- Менше руху --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .draw { stroke-dashoffset: 0; animation: none !important; }
  .js .pop, .js .fade { opacity: 1; animation: none !important; }
  .js .own-key { opacity: 1; transform: translate(180px, 227px); animation: none !important; }
  .spin, .blink, .pulse { animation: none !important; }
  .moving { display: none; }
  .quiz__q, .sticky, .btn, .ans, .js .stars { transition: none; }
}

/* ---------- Сторінки документів: політика й умови (29.10) ----------- */
/* Збирає make-legal.py з юридичної теки CI. Шапка непрозора одразу:
   на цих сторінках немає скрипта. Таблиці на телефоні — картками. */
.doc { padding: 24px 0 56px; }   /* шапка липка й стоїть у потоці — її висоту не додаємо */
.doc__wrap { max-width: 780px; }
.doc__back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sky); }
.doc h1 { margin-top: 6px; font-size: clamp(30px, 7.6vw, 46px); }
.doc__meta { margin-top: 14px; color: var(--ink-2); }
.doc h2 { margin-top: 38px; font-size: clamp(21px, 5.2vw, 27px); line-height: 1.2; }
.doc p, .doc li { color: var(--ink-1); line-height: 1.6; }
.doc p { margin-top: 12px; }
.doc ul { margin-top: 10px; padding-left: 22px; }
.doc li + li { margin-top: 6px; }
.doc b { color: var(--ink-0); font-weight: 600; }
.doc a { color: var(--sky); }
.doc__table { margin-top: 14px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc th, .doc td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--edge); color: var(--ink-1); }
.doc th { color: var(--ink-0); font-weight: 600; background: rgba(19,32,90,.5); }
@media (max-width: 599px) {
  .doc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .doc table, .doc tbody, .doc tr, .doc td { display: block; }
  .doc tr { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 14px; background: var(--glass); }
  .doc td { padding: 4px 0; border: 0; }
  .doc td::before { content: attr(data-label); display: block; font-size: 13px; color: var(--ink-2); }
}
@media (min-width: 600px) { .doc__table { border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; } .doc tr:last-child td { border-bottom: 0; } }