/* VetStat, тема b2-light. Тот же лендинг, что b2-v1, на светлой стороне.
   Накладывается поверх style.css так же, как тёмная: оттуда раскладка, здесь весь вид.

   Правило, ради которого тема и делалась отдельно, а не «инверсией цветов»:
   МАКЕТЫ НЕ СЛИВАЮТСЯ С ФОНОМ. На тёмной стороне панель продукта отделялась
   сама собой: светлая карточка на чёрном видна всегда. На белом это ломается,
   поэтому здесь введены три ступени поверхности и они не смешиваются:

     ступень 0, фон страницы   #F2F6FC  (секции), #E9EFF7 (тонированные секции)
     ступень 1, обычная карточка  #FFFFFF, кромка #DEE6F2, тень мягкая
     ступень 2, «скрин» продукта  #FFFFFF, кромка #C9D6EA, тень глубокая, кант сверху

   Фон страницы НИКОГДА не белый: белое здесь только то, что изображает продукт
   (панель, карточки сигналов, сообщения мессенджера, диалог разговора).

   Палитра и типографика те же, что в тёмной теме: синий #2563EB, оранжевый CTA
   #C2410C, IBM Plex Sans / Mono. Контраст на белом: оранжевый текст берём
   тёмный (#C2410C, 5.2:1), светлый #F97316 на белом не используем нигде. */

:root{
  --bg:#F2F6FC;
  --bg-2:#E9EFF7;
  --line:#DDE5F1;
  --line-2:#C0D0E6;

  --ink:#0E1726;
  --ink-2:#44536A;
  --ink-3:#6B7B92;
  --text:#0E1726;
  --body:#44536A;
  --muted:#6B7B92;
  --muted-2:#8A99AE;
  --surface:#FFFFFF;
  --panel:#EDF2F9;
  --panel-2:#F5F8FD;
  --border:#DEE6F2;
  --border-strong:#C9D6EA;
  --panel-border:#DEE6F2;

  --primary:#2563EB;
  --primary-hover:#3B82F6;
  --primary-press:#1D4ED8;
  --primary-tint:rgba(37,99,235,.10);
  --primary-50:rgba(37,99,235,.08);

  --cta:#C2410C; --cta-2:#EA6A1E; --cta-bright:#C2410C;
  --cold-tint:#1D4ED8;
  --ok:#0F9D6E; --wait:#B45309; --lost:#DC2626;

  --r:16px; --r-2xl:16px; --r-xl:14px; --r-lg:12px; --r-md:10px;
  --ease:cubic-bezier(.25,.9,.35,1);
  /* три ступени высоты: мягкая у карточек, глубокая у «скринов» */
  --e-soft:0 1px 2px rgba(14,23,38,.05), 0 8px 22px rgba(14,23,38,.06);
  --e-card:0 1px 0 rgba(255,255,255,.9) inset, 0 3px 8px rgba(14,23,38,.09), 0 32px 72px rgba(14,23,38,.22);
  --e-float:0 1px 0 rgba(255,255,255,.9) inset, 0 6px 16px rgba(14,23,38,.13), 0 30px 64px rgba(14,23,38,.24);
  --shadow-1:var(--e-soft);
  --card-bg:#FFFFFF;
}

body{
  font-family:"IBM Plex Sans",Inter,system-ui,sans-serif;
  background:var(--bg);color:var(--ink);
}
.mono,.fn-num,.price-value,.mk-card-meta,.tp-num,.tab-num,.step-num,.mk-val,.mk-count b,
.mk-table td,.tp-kpi-value,.tp-period,.chip.mono,.tg-time,.f-big{
  font-family:"IBM Plex Mono","IBM Plex Sans",monospace;font-variant-numeric:tabular-nums;
}
.price-value,.chip.mono{word-spacing:-.3em}

/* ================= Кнопки ================= */
.btn{border-radius:12px;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease)}
.btn-lg{padding:15px 26px;font-size:16px;border-radius:14px}
.btn-primary{
  color:#fff;background:linear-gradient(180deg,var(--cta-2) 0%,var(--cta) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset,0 2px 6px rgba(146,49,9,.20),0 12px 28px rgba(194,65,12,.28);
}
.btn-primary:hover{
  background:linear-gradient(180deg,#F2762A 0%,#D4490E 100%);transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 4px 10px rgba(146,49,9,.22),0 18px 38px rgba(194,65,12,.34);
}
.btn-primary:active{transform:translateY(0)}
.btn-ghost,.btn-ghost-light{
  color:var(--ink);border-color:var(--line-2);background:#FFFFFF;
  box-shadow:0 1px 2px rgba(14,23,38,.05);
}
.btn-ghost:hover,.btn-ghost-light:hover{background:#F7FAFF;border-color:#A9BDD9}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:2px solid var(--cta);outline-offset:3px;border-radius:8px;
}

/* ================= Шапка ================= */
.site-header{
  background:rgba(242,246,252,.82);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
}
.header-inner{padding:18px 32px}
.site-header .logo,.site-header .logo-text{color:var(--ink)}
.site-header .logo-text b{color:var(--cold-tint)}
.nav{gap:6px}
.nav a{
  color:var(--ink-2);font-size:14.5px;padding:8px 14px;border-radius:999px;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.nav a:hover{background:rgba(37,99,235,.08);color:var(--primary-press)}
.header-cta .login{color:var(--ink-2)}
.header-cta .login:hover{color:var(--ink)}
.header-cta .login svg{color:var(--ink-3)}

/* ================= Первый экран ================= */
.hero{
  position:relative;overflow:hidden;background:#E7EEF8;color:var(--ink);
  padding:120px 0 190px;
}
/* та же аврора, что на тёмной стороне, но приглушённая: на светлом фоне
   цветное пятно набирает силу втрое быстрее */
.hero::before{
  content:"";position:absolute;inset:-30% -25% auto -25%;height:1300px;z-index:0;pointer-events:none;
  background:
    radial-gradient(30% 42% at 22% 18%,rgba(37,99,235,.22),rgba(255,255,255,0) 60%),
    radial-gradient(26% 36% at 68% 6%,rgba(88,80,236,.16),rgba(255,255,255,0) 60%),
    radial-gradient(30% 34% at 78% 46%,rgba(194,65,12,.12),rgba(255,255,255,0) 60%),
    radial-gradient(40% 44% at 40% 72%,rgba(14,40,92,.10),rgba(255,255,255,0) 62%);
  filter:blur(72px);
}
/* сетка точек: на светлом она тёмная, иначе её просто нет */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(14,23,38,.07) 1px,rgba(0,0,0,0) 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.12) 60%,rgba(0,0,0,0));
  mask-image:linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.12) 60%,rgba(0,0,0,0));
}
.hero-grid{
  position:relative;z-index:1;max-width:1280px;
  display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:52px;align-items:center;
}
.hero-copy{max-width:none;margin:0;text-align:left}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px 7px 10px;border-radius:999px;
  background:#FFFFFF;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(14,23,38,.05);
  font-size:12.5px;font-weight:500;color:var(--ink-2);margin-bottom:24px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(15,157,110,.14)}

.hero-h1{
  font-size:53px;line-height:1.05;letter-spacing:-.04em;font-weight:600;color:var(--ink);
  margin-bottom:20px;
}
/* на светлом градиент берём тёмным концом: светлый оранжевый на белом не читается */
.hero-h1 .accent{
  background:linear-gradient(92deg,#EA580C 0%,#C2410C 60%,#9A3412 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.hero-sub{color:var(--ink-2);font-size:18px;line-height:1.6;margin:0 0 32px;max-width:460px}
.hero-cta{justify-content:flex-start;margin-bottom:28px;gap:12px}
.hero-trust{display:flex;flex-direction:column;gap:11px;color:var(--ink-3);font-size:14px}
.hero-trust li{display:flex;align-items:center;gap:10px;padding:0}
.hero-trust svg{width:17px;height:17px;color:var(--ok);flex:none}

/* ================= Панель продукта: ступень 2 ================= */
.stage{position:relative;perspective:1600px}
.mockup{
  position:relative;z-index:2;background:var(--card-bg);
  border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--e-card);
  color:var(--ink);padding:20px 22px 22px;margin-right:-110px;
  transform:rotateY(-5deg) rotateX(1.5deg) translateZ(0);
  animation:rise .6s var(--ease) both;
}
@keyframes rise{from{opacity:0;transform:rotateY(-5deg) rotateX(1.5deg) translateY(22px)}to{opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.p-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.p-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.p-title svg{width:18px;height:18px;color:var(--cold-tint)}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel-2);font-size:12.5px;color:var(--ink-2);
}

/* Воронка внутри панели */
.mockup .funnel{background:transparent;border:none}
.mockup .fn-row{
  grid-template-columns:74px 150px 1fr;gap:18px;padding:12px 4px;
  border-bottom:1px solid #EAF0F8;
}
.fn-row:last-child{border-bottom:none}
.fn-num{font-size:38px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.fn-bar-wrap{
  height:8px;border-radius:999px;background:#E6EDF7;
  box-shadow:inset 0 1px 2px rgba(14,23,38,.10);
}
.fn-bar{border-radius:999px;background:linear-gradient(90deg,#2563EB 0%,#5B8BE8 100%)}
.fn-label b{font-size:17.5px;color:var(--ink);letter-spacing:-.01em}
.fn-label span{font-size:15px;color:var(--ink-3);line-height:1.45}
.fn-row.is-loss{background:transparent}
.fn-row.is-loss .fn-bar-wrap{background:#E6EDF7}
.fn-row.is-loss:nth-of-type(4) .fn-num{color:var(--wait)}
.fn-row.is-loss:nth-of-type(4) .fn-bar{background:linear-gradient(90deg,#B45309 0%,#F59E0B 100%)}
.fn-row.is-loss:nth-of-type(5) .fn-num{color:var(--lost)}
.fn-row.is-loss:nth-of-type(5) .fn-bar{background:linear-gradient(90deg,#DC2626 0%,#F87171 100%)}

/* ================= Летающие карточки: ступень 2 ================= */
.float{
  position:absolute;z-index:3;bottom:24px;
  background:#FFFFFF;
  border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--e-float);padding:14px 16px;
}
.f-alert{left:-56px;width:300px;transform:translateY(100%) rotate(-2deg);animation:fade .5s var(--ease) both .18s}
.f-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;margin-bottom:9px}
.f-h .bulb{width:8px;height:8px;border-radius:50%;flex:none}
.f-alert .bulb{background:var(--lost);box-shadow:0 0 0 4px rgba(220,38,38,.14)}
.f-adm{left:330px;bottom:6px;width:268px;transform:translateY(100%) rotate(2deg);animation:fade .5s var(--ease) both .28s}
.f-adm .bulb{background:var(--ok);box-shadow:0 0 0 4px rgba(15,157,110,.14)}
.f-adm-row{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline;margin-bottom:10px}
.f-who{font-size:12.5px;color:var(--ink-2)}
.f-adm-row b{font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ok);word-spacing:-.2em}
.f-track{grid-column:1 / -1;height:8px;margin-top:4px;border-radius:999px;background:#E6EDF7;box-shadow:inset 0 1px 2px rgba(14,23,38,.10)}
.f-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#0F9D6E 0%,#34C79A 100%)}
.f-adm-row.is-weak b{color:var(--lost)}
.f-adm-row.is-weak .f-track i{background:linear-gradient(90deg,#DC2626 0%,#F87171 100%)}
.f-quote{font-size:13px;line-height:1.5;color:var(--ink-2);font-style:italic;margin-bottom:10px}

.wave{display:flex;align-items:flex-end;gap:2px;height:22px}
.wave i{flex:1;background:linear-gradient(180deg,#2563EB,rgba(37,99,235,.30));border-radius:1px;opacity:.9}
.f-play{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11.5px;color:var(--ink-3)}
.f-play svg{width:14px;height:14px;color:var(--cta)}
.f-big{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1;margin-bottom:4px}
.f-note{font-size:11.5px;color:var(--ink-3);line-height:1.45}

/* ================= Секции ================= */
.section{background:var(--bg);padding:104px 0}
.section:first-of-type{padding-top:104px}
.section-tint{
  background:var(--bg-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
/* 820 px базы рвут заголовки по одному слову на вторую строку
   («что у вас уже / есть», «в телеграм и / МАКС») */
.section-head{margin-bottom:52px;max-width:1000px}
.section-head h2{
  font-size:42px;line-height:1.1;letter-spacing:-.035em;font-weight:600;color:var(--ink);
}
.section-head h2 .accent{
  background:linear-gradient(92deg,#EA580C 0%,#C2410C 60%,#9A3412 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-head p{color:var(--ink-2);font-size:17.5px}
.section-head p b{color:var(--ink)}
.section-head p .accent{color:var(--cta)}

/* ================= Общий вид карточки: ступень 1 ================= */
.pain-card,.obj-card,.trust-card,.mk,.mk-quote,.mk-count div,.mk-table,
.tg-phone,.faq-item,.price-card,.lead-form{
  background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--e-soft);
}
.pain-card,.obj-card,.trust-card{padding:28px 26px}
.pain-num,.trust-num{color:var(--cta);font-weight:600;letter-spacing:.06em}
.pain-title,.trust-title,.obj-quote{color:var(--ink)}
.pain-body,.trust-body,.obj-answer,.trust-note,.compare-key,.pricing-note{color:var(--ink-2)}
.pain-body b,.trust-body b,.obj-answer b,.trust-note b,.pricing-note b{color:var(--ink)}
/* цитата возражения — кнопка (аккордеон на телефоне); на десктопе выглядит
   как прежний заголовок и не реагирует на клик */
.obj-quote{
  appearance:none;-webkit-appearance:none;background:none;border:0;
  border-bottom:1px solid var(--line);width:100%;text-align:left;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  color:var(--ink);padding:0 0 16px;cursor:default;pointer-events:none;
}
.obj-quote::before,.obj-quote::after{content:none}
.obj-q::before{content:"«";color:var(--cta);margin-right:2px}
.obj-q::after{content:"»";color:var(--cta);margin-left:2px}
.obj-quote .acc-chev{display:none}
.obj-body{display:block}

/* ================= Секция «с каждым обращением» =================
   Светлая тема не имела этого слоя: doc-* стилизуются только тёмной темой,
   поэтому полоса разговора была невидимым div-ом, исход — чёрным текстом,
   а шапка панели жила по старой базе (зелёная точка + 14px).
   Ступени: белая плита (скрин-масштаб) → утопленное поле панели →
   белый документ разбора с глубокой тенью. Оранжевый — навигация («вы здесь»),
   синий остаётся продукту справа. */
.tabs-wrap{
  background:#FFFFFF;border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:22px;box-shadow:var(--e-card);
}
.tab{border-bottom:1px solid #EAF0F8;border-radius:10px;transition:background .15s var(--ease)}
.tab:hover{background:#F5F8FD}
.tab.is-active{
  background:linear-gradient(90deg,rgba(194,65,12,.08),rgba(194,65,12,.02));
  box-shadow:inset 3px 0 0 var(--cta);
}
.tab-num{color:var(--muted-2)}
.tab.is-active .tab-num{color:var(--cta)}
.tab-title{color:var(--ink)}
.tab-desc{color:var(--ink-3)}
/* база красит описание активной вкладки синим — гасим, акцент страницы оранжевый */
.tab.is-active .tab-desc{color:var(--ink-2)}
.tab:focus-visible{outline:2px solid var(--cta);outline-offset:2px}

/* Правая панель — углублённое поле на ступень ниже плиты */
.tab-panel{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px;
  box-shadow:inset 0 1px 3px rgba(14,23,38,.04);
}
/* панели одной высоты: переключение вкладок не дёргает страницу */
@media (min-width:1025px){
  .tab-panels{display:grid}
  .tab-panels .tab-panel{grid-area:1 / 1;display:block;visibility:hidden}
  .tab-panels .tab-panel.is-active{visibility:visible}
}
.tab-panel:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
/* шапка аккордеона живёт только на телефоне; на десктопе панель как была */
.acc-head{display:none}
.acc-body{display:block}

/* Шапка панели: заголовок главный, числа подстрочником */
.tp-head{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.tp-title{font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
/* зелёная точка досталась от старой версии шапки и ничего не означает */
.tp-title::before{display:none}
.tp-scale{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.tp-lead{color:var(--ink-3)}

/* Документ разбора — единственный белый объект на утопленном поле */
.mk-card{
  background:#FFFFFF;border:1px solid var(--border-strong);border-radius:var(--r-lg);
  padding:20px 22px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 2px 6px rgba(14,23,38,.06),
             0 22px 44px rgba(14,23,38,.13);
}
.doc-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.doc-status{font-size:15px;font-weight:600;letter-spacing:-.01em}
.doc-status.is-good{color:var(--ok)}
.doc-status.is-bad{color:var(--lost)}
.doc-meta{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  letter-spacing:.04em;color:var(--ink-3);white-space:nowrap;
}
/* Полоса разговора: видно, кто сколько говорил и в какой момент все решилось */
.doc-line{
  position:relative;height:10px;border-radius:999px;margin-bottom:8px;
  background:linear-gradient(90deg,
    #E6EDF7 0,#E6EDF7 var(--a),
    rgba(37,99,235,.45) var(--a),rgba(37,99,235,.45) var(--b),
    #E6EDF7 var(--b),#E6EDF7 100%);
  box-shadow:inset 0 1px 2px rgba(14,23,38,.08);
}
.doc-line::after{
  content:"";position:absolute;top:-3px;left:var(--t);width:3px;height:16px;border-radius:2px;
  background:var(--lost);box-shadow:0 0 0 3px rgba(220,38,38,.14);
}
.doc-line.is-good::after{background:var(--ok);box-shadow:0 0 0 3px rgba(15,157,110,.16)}
.doc-when{font-size:12.5px;color:var(--ink-3);margin-bottom:14px}

/* Диалог — вставка-мессенджер: тонированное поле, белый клиент, синий администратор */
.mk-dialog{
  gap:10px;padding:14px;border-radius:14px;
  background:linear-gradient(180deg,#F4F7FD 0%,#EBF1FA 100%);
  box-shadow:inset 0 0 0 1px #DCE6F7;
}
.mk-line{border-radius:14px;font-size:14px;line-height:1.5;padding:10px 14px;max-width:82%}
.mk-line .who{font-size:10.5px;letter-spacing:.07em;margin-bottom:3px}
.mk-line.is-client{
  background:#FFFFFF;color:#0F172A;
  box-shadow:inset 0 0 0 1px #E4ECFC,0 1px 2px rgba(15,23,42,.08);
  border-bottom-left-radius:5px;
}
.mk-line.is-client .who{color:#64748B}
.mk-line.is-admin{
  background:var(--primary);color:#FFFFFF;
  box-shadow:0 2px 6px rgba(37,99,235,.25);
  border-bottom-right-radius:5px;
}
.mk-line.is-admin .who{color:rgba(255,255,255,.78)}
.mk-line.is-note{background:transparent;border:1px dashed #C7D6EE;color:#475569;max-width:100%;box-shadow:none}
/* решающая фраза — единственное жёлтое пятно карточки */
.mk-card .mk-dialog mark{
  background:#FDE68A;color:#0F172A;border-radius:3px;
  box-shadow:inset 0 -2px 0 #F59E0B;padding:1px 3px;
}
.doc-out{margin:16px 0 0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.doc-out b{font-weight:600}
.is-good-t{color:var(--ok)}
.is-bad-t{color:var(--lost)}
.doc-rec{margin-top:12px;padding-top:12px;border-top:1px solid #EAF0F8;font-size:12.5px;color:var(--ink-3)}
.mk-card mark,.tg-msg mark{
  background:#FEF3C7;color:var(--ink);border-radius:3px;
  box-shadow:inset 0 -2px 0 #F59E0B;
}
.mk-val{color:var(--ink)}
.mk-row{border-bottom-color:#EAF0F8}
.mk-row.is-good .mk-val{color:var(--ok)}
.mk-row.is-bad .mk-val{color:var(--lost)}
.mk-txt b{color:var(--ink)}
.mk-txt span{color:var(--ink-3)}
.mk-quote{color:var(--ink);padding:16px 18px}
.mk-count b{color:var(--ink)}
.mk-count span{color:var(--ink-3)}
.mk-table th{background:var(--panel);color:var(--ink-3);border-bottom-color:var(--line)}
.mk-table td{color:var(--ink);border-bottom-color:#EAF0F8}

/* ================= Секция «ошибка администратора по правилу» =================
   Слева три группы исходов правила карточками ступени 1, справа тот же
   «скрин» разбора, что во вкладках: белая плита → утопленное поле → документ.
   Цвет заголовка группы повторяет цвет исхода в документе (красный / зелёный),
   «не судим» серый: это не исход, а отказ судить. */
.rule{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px;align-items:start}
.rule-groups{display:flex;flex-direction:column;gap:14px}
.rule-group{
  background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:20px 22px;box-shadow:var(--e-soft);
}
.rule-group-title{
  font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px;
  display:flex;align-items:center;gap:9px;
}
.rule-group-title::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.rule-group.is-bad .rule-group-title{color:var(--lost)}
.rule-group.is-bad .rule-group-title::before{background:var(--lost);box-shadow:0 0 0 4px rgba(220,38,38,.14)}
.rule-group.is-good .rule-group-title{color:var(--ok)}
.rule-group.is-good .rule-group-title::before{background:var(--ok);box-shadow:0 0 0 4px rgba(15,157,110,.14)}
.rule-group.is-none .rule-group-title{color:var(--ink-3)}
.rule-group.is-none .rule-group-title::before{background:var(--muted-2);box-shadow:0 0 0 4px rgba(138,153,174,.18)}
.rule-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.rule-list li{
  font-size:15px;line-height:1.5;color:var(--ink-2);
  padding-left:14px;position:relative;
}
.rule-list li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:1px;background:var(--muted-2)}
.rule-stage{
  background:#FFFFFF;border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:22px;box-shadow:var(--e-card);min-width:0;
}
.rule-field{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px;min-width:0;
  box-shadow:inset 0 1px 3px rgba(14,23,38,.04);
}
.rule-key{
  margin-top:26px;font-size:15px;color:var(--ink-2);line-height:1.6;
  padding-left:14px;box-shadow:inset 2px 0 0 var(--line-2);max-width:760px;
}
@media (max-width:1024px){
  .rule{grid-template-columns:1fr;gap:20px}
  .rule-stage{padding:16px}
  .rule-field{padding:18px 16px}
  .rule-field .mk-card,.rule-field .mk-dialog{min-width:0}
}
@media (max-width:640px){
  /* три группы исходов — одна карточка с тремя рубриками; документ без внешних
     плит: на 390 три карточки и две плиты растягивали блок почти на два экрана */
  .rule-groups{
    gap:0;background:#FFFFFF;border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--e-soft);padding:4px 0;
  }
  .rule-group{background:transparent;border:0;border-radius:0;box-shadow:none;padding:12px 16px;border-bottom:1px solid #EAF0F8}
  .rule-group:last-child{border-bottom:0}
  .rule-group-title{margin-bottom:6px}
  .rule-list{gap:5px}
  .rule-list li{font-size:14.5px}
  .rule-stage{background:transparent;border:0;box-shadow:none;padding:0}
  .rule-field{background:transparent;border:0;box-shadow:none;padding:0}
  .rule-field .tp-head{padding-bottom:10px;margin-bottom:12px}
  .rule-field .tp-title{font-size:18px}
}

/* ================= Экран потерь ================= */
.loss{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:6px}
.loss-step{
  background:#FFFFFF;border-radius:var(--r-lg);padding:22px 22px 20px;
  box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(14,23,38,.04),0 10px 26px rgba(14,23,38,.07);
}
.loss-step.is-money{
  background:#FFF7F2;
  box-shadow:inset 0 0 0 1px rgba(194,65,12,.30),0 1px 2px rgba(146,49,9,.06),0 12px 30px rgba(194,65,12,.12);
}
.loss-num{
  font-family:"IBM Plex Mono","JetBrains Mono",monospace;
  font-size:38px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.05;margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.loss-step.is-money .loss-num{color:var(--cta)}
.loss-cap{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.loss-honest{
  margin-top:20px;font-size:14.5px;color:var(--ink-3);line-height:1.6;
  padding-left:14px;box-shadow:inset 2px 0 0 var(--line-2);
}
.loss-honest b{color:var(--ink-2)}
.loss-key{
  margin-top:26px;padding:22px 24px;border-radius:var(--r-lg);
  background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--line),0 8px 22px rgba(14,23,38,.06);
}
.loss-key-title{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin-bottom:8px}
.loss-key-body{font-size:15px;color:var(--ink-2);line-height:1.6}
.loss-src{margin-top:16px;font-size:12.5px;color:var(--ink-3)}
@media (max-width:860px){
  .loss{grid-template-columns:1fr;gap:12px}
  .loss-num{font-size:32px}
  .loss-key{padding:18px 18px}
  .loss-key-title{font-size:17px}
}
@media (max-width:640px){
  /* деньги: три числа одной карточкой лесенкой (число слева, подпись справа),
     строка с рублями тонирована; четыре карточки столбиком были на треть выше */
  .loss{
    gap:0;margin-top:0;background:#FFFFFF;border-radius:14px;overflow:hidden;
    box-shadow:inset 0 0 0 1px var(--line),var(--e-soft);
  }
  .loss-step{
    display:grid;grid-template-columns:minmax(112px,auto) 1fr;gap:2px 14px;align-items:baseline;
    padding:14px 16px;border-radius:0;box-shadow:none;border-bottom:1px solid #EAF0F8;
  }
  .loss-step.is-money{box-shadow:none;border-bottom:0;background:#FFF7F2}
  .loss-num{font-size:26px;margin:0;line-height:1.1}
  .loss-cap{font-size:13.5px;line-height:1.45}
  .loss-key{margin-top:12px;padding:16px 16px}
  .loss-key-title{font-size:16.5px}
  .loss-key-body{font-size:14.5px}
}

/* ================= Отстройка ================= */
.compare-wrap{
  overflow:hidden;background:#FFFFFF;border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:0 2px 6px rgba(14,23,38,.06),0 22px 48px rgba(14,23,38,.12);
}
.compare-table thead th{background:var(--panel);color:var(--ink-3)}
.compare-table th,.compare-table td{border-bottom-color:#EAF0F8}
.compare-table .c-tool{color:var(--ink)}
.compare-table .c-tool .sub{color:var(--ink-3)}
.compare-table .c-shows{color:var(--ink-2)}
.compare-table .c-missing{color:var(--ink-3)}
.compare-table tbody tr.row-us{background:#FFF7F2;box-shadow:inset 3px 0 0 var(--cta)}
.compare-table tbody tr.row-us td{color:var(--ink)}
.compare-table tbody tr.row-us .c-tool{color:var(--cta)}
.compare-key b{color:var(--cta)}
/* Матрица (13.09): у всех строк одни критерии, в ячейке метка и короткая подпись.
   Галочка и крест нарисованы svg в data-uri, растра нет. */
.compare-table.is-matrix .c-tool{width:34%}
.compare-table.is-matrix th:nth-child(2),.compare-table.is-matrix th:nth-child(3){width:33%}
.c-cell{display:flex;align-items:flex-start;gap:10px}
.c-mark{
  flex:none;width:20px;height:20px;margin-top:1px;
  background-repeat:no-repeat;background-position:center;background-size:20px 20px;
}
.c-yes .c-mark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23DCFCE7'/%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.6' fill='none' stroke='%2315803D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.c-no .c-mark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23E8EDF5'/%3E%3Cpath d='M6 6l6 6M12 6l-6 6' fill='none' stroke='%237B8797' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.c-half .c-mark{
  background-color:#FEF3C7;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B45309' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.c-half .c-txt{color:var(--ink-2);font-weight:500}
.c-no .c-txt{color:var(--ink-3)}
.c-yes .c-txt{color:var(--ink);font-weight:500}

/* ================= Телеграм и МАКС =================
   Сообщения — «скрин» продукта: белые с кромкой темнее и заметной тенью,
   иначе на светлой секции они читаются просто абзацами текста. */
.tg-phone{overflow:hidden}
.tg-head{background:var(--panel);border-bottom-color:var(--line)}
.tg-ava{background:linear-gradient(180deg,#3B82F6,#1D4ED8);color:#fff}
.tg-name{color:var(--ink)}
.tg-name span{color:var(--ink-3)}
.tg-body{background:var(--panel-2)}
.tg-msg{
  background:#FFFFFF;border:1px solid var(--line-2);
  border-radius:14px;border-bottom-left-radius:4px;color:var(--ink);
  box-shadow:0 2px 6px rgba(14,23,38,.06),0 16px 34px rgba(14,23,38,.10);
}
.tg-msg i{color:var(--ink-2)}
.tg-msg.is-alert{
  background:#FFF8F8;border-color:rgba(220,38,38,.35);
  box-shadow:inset 3px 0 0 var(--lost),0 2px 6px rgba(146,20,20,.06),0 16px 34px rgba(146,20,20,.12);
}
.tg-time{color:var(--muted-2)}
.tg-point b{color:var(--ink)}
.tg-point{color:var(--ink-2)}
.tg-cap{color:var(--ink-3)}

/* ================= День клиники в телефоне (13.09.2026) =================
   Сетка карточек читалась ненативно (владелец). Теперь один телефон и один день:
   шесть сообщений по часам, слева хронология с подписями. Рамка, строка
   состояния, шапка чата и поле ввода — жанр мокапа телефона, разрешён каноном
   («Мессенджеры»); логотипов и цветов чужих мессенджеров нет, всё разметкой. */
.day{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:start;max-width:1060px;margin:0 auto}
.day-nav{display:flex;flex-direction:column;gap:4px;padding-top:6px}
.day-item{
  display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;
  padding:14px 16px;border-radius:12px;text-decoration:none;color:inherit;
  border-bottom:1px solid #EAF0F8;transition:background .15s var(--ease);
}
.day-item:hover{background:#F5F8FD}
.day-item.is-active{
  background:linear-gradient(90deg,rgba(194,65,12,.08),rgba(194,65,12,.02));
  box-shadow:inset 3px 0 0 var(--cta);
}
.day-item:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
.day-time{font-size:14px;font-weight:600;color:var(--muted-2);padding-top:2px}
.day-item.is-active .day-time{color:var(--cta)}
.day-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.day-title{font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.day-cap{font-size:14px;line-height:1.45;color:var(--ink-3)}
.day-item.is-active .day-cap{color:var(--ink-2)}
.day-chev{display:none}

.phone{
  width:360px;max-width:100%;margin:0 auto;padding:12px;border-radius:46px;
  background:linear-gradient(180deg,#1B2637,#0E1726);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.10),0 2px 6px rgba(14,23,38,.18),0 36px 80px rgba(14,23,38,.32);
}
.ph-screen{
  position:relative;height:640px;border-radius:36px;overflow:hidden;
  background:#E9EFF7;display:flex;flex-direction:column;color:var(--ink);
}
.ph-status{
  position:relative;height:46px;display:flex;align-items:center;justify-content:space-between;
  padding:6px 24px 0;background:#F7F9FC;font-size:14px;font-weight:600;color:var(--ink);
}
.ph-island{position:absolute;left:50%;top:10px;width:96px;height:26px;margin-left:-48px;border-radius:999px;background:#0E1726}
.ph-icons{display:flex;align-items:center;gap:6px;color:var(--ink)}
.ph-head{
  display:flex;align-items:center;gap:10px;padding:6px 12px 10px;
  background:#F7F9FC;border-bottom:1px solid #DDE5F1;
}
.ph-back{width:22px;height:22px;color:var(--primary);flex:none}
.ph-ava{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(180deg,#3B82F6,#1D4ED8);color:#FFFFFF;
  font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.ph-name{display:flex;flex-direction:column;line-height:1.2;font-size:15.5px;font-weight:600;color:var(--ink)}
.ph-name span{font-size:12px;font-weight:500;color:var(--ink-3)}
.ph-feed{
  position:relative;flex:1 1 auto;overflow:hidden;padding:12px 12px 0;
  display:flex;flex-direction:column;
}
/* хвост под последним сообщением, чтобы и оно могло встать в начало экрана */
.ph-feed::after{content:"";display:block;flex:none;height:560px}
.ph-date{
  align-self:center;font-size:12px;font-weight:600;color:#FFFFFF;
  background:rgba(14,23,38,.45);border-radius:999px;padding:3px 10px;margin:2px 0 12px;
}
.ph-feed .tg-msg{
  position:relative;flex:none;margin:0 26px 10px 0;
  background:#FFFFFF;border:none;border-radius:16px;border-bottom-left-radius:4px;
  padding:10px 12px 22px;font-size:14.5px;line-height:1.5;color:var(--ink);
  box-shadow:0 1px 1px rgba(14,23,38,.10);
}
.ph-feed .tg-msg::before{
  content:"";position:absolute;left:-6px;bottom:0;width:12px;height:12px;background:#FFFFFF;
  clip-path:polygon(100% 0,100% 100%,0 100%);
}
.ph-feed .tg-msg.is-alert{background:#FFFFFF;box-shadow:inset 3px 0 0 var(--lost),0 1px 1px rgba(14,23,38,.10)}
.ph-feed .tg-msg.is-alert::before{background:#FFFFFF}
.ph-feed .tg-msg b{font-weight:600}
.ph-feed .tg-msg i{color:var(--ink-2)}
.ph-feed .tg-time{right:10px;bottom:6px;font-size:11.5px}
/* «Запись разговора» как голосовое сообщение */
.ph-voice{
  display:flex;align-items:center;gap:10px;margin:8px 0 2px;padding:8px 10px;
  border-radius:12px;background:#EEF3FA;white-space:normal;
}
.ph-play{
  width:32px;height:32px;border-radius:50%;flex:none;background:var(--primary);position:relative;
}
.ph-play::after{
  content:"";position:absolute;left:12px;top:9px;width:0;height:0;
  border-left:11px solid #FFFFFF;border-top:7px solid transparent;border-bottom:7px solid transparent;
}
.ph-voice-body{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0}
.ph-voice-name{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.2}
.ph-wave{display:flex;align-items:flex-end;gap:2px;height:18px}
.ph-wave i{flex:1;background:linear-gradient(180deg,#2563EB,rgba(37,99,235,.35));border-radius:1px}
.ph-dur{font-size:12px;color:var(--ink-3);flex:none}
.ph-input{
  display:flex;align-items:center;gap:8px;padding:8px 12px 18px;
  background:#F7F9FC;border-top:1px solid #DDE5F1;
}
.ph-field{
  flex:1 1 auto;padding:9px 14px;border-radius:999px;background:#FFFFFF;
  box-shadow:inset 0 0 0 1px #DDE5F1;font-size:14px;color:var(--muted-2);
}
@media (max-width:1024px){
  .day{grid-template-columns:1fr;gap:28px;max-width:560px}
  .day-nav{padding-top:0}
}
@media (max-width:640px){
  /* Телефон на телефоне — как на десктопе (решение владельца 13.09: «надо как
     на десктопе, чтобы было понятно, что мобила»). Две прежние редакции без
     рамки (лента во всю ширину с кнопкой, хронология аккордеоном) владелец
     отклонил: без рамки, строки состояния и шапки чата блок не читался
     мессенджером. Теперь: хронология плотными строками над телефоном, сам
     мокап целиком (рамка, строка состояния, шапка, лента, поле ввода) во всю
     ширину окна; лента внутри пальцем не листается, к сообщению подводит
     строка хронологии, как на десктопе. Отклонённая редакция с внутренней
     прокруткой (вечер 13.09) держала палец на 2 000 px ленты, здесь этого нет. */
  .day{gap:16px;max-width:none}
  .day-nav{gap:2px}
  .day-item{grid-template-columns:44px 1fr;gap:10px;padding:9px 10px;border-radius:10px}
  .day-time{font-size:13px;padding-top:1px}
  .day-title{font-size:15px}
  .day-cap{font-size:12.5px;line-height:1.35}
  .phone{width:100%;padding:10px;border-radius:40px}
  .ph-screen{height:560px;border-radius:32px}
  .ph-status{height:42px;padding:6px 20px 0;font-size:13px}
  .ph-island{width:88px;height:24px;margin-left:-44px;top:9px}
  .ph-feed::after{height:480px}
}
/* ================= Телефон: возражения аккордеоном, тарифы плотнее =================
   Три карточки по 500 px и три тарифа по 650 px занимали пять экранов. Возражение
   на телефоне — вопрос видно, ответ по нажатию, открыт первый (тот же приём,
   что у восьми направлений). Тарифы: те же пункты, меньше воздуха и кегля. */
@media (max-width:640px){
  .objections{gap:10px}
  .obj-card{padding:0;overflow:hidden;border-radius:14px;border-color:var(--line-2);box-shadow:var(--e-soft)}
  .obj-quote{
    pointer-events:auto;cursor:pointer;align-items:center;min-height:60px;
    padding:14px 14px 14px 16px;margin:0;border-bottom:1px solid #EAF0F8;
    font-size:16.5px;line-height:1.25;-webkit-tap-highlight-color:transparent;
  }
  .obj-quote:active{background:#F5F8FD}
  .obj-quote:focus-visible{outline:2px solid var(--cta);outline-offset:-3px;border-radius:14px}
  .obj-card.is-closed .obj-quote{border-bottom-color:transparent}
  .obj-quote .acc-chev{
    display:block;width:22px;height:22px;flex:none;color:var(--ink-3);
    transform:rotate(180deg);transition:transform .24s var(--ease);
  }
  .obj-card.is-closed .acc-chev{transform:rotate(0)}
  .obj-card:not(.is-closed){border-color:rgba(194,65,12,.45);box-shadow:inset 3px 0 0 var(--cta),var(--e-soft)}
  .obj-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s var(--ease)}
  .obj-card.is-closed .obj-body{grid-template-rows:0fr}
  .obj-inner{min-height:0;overflow:hidden}
  .obj-answer{padding:12px 16px 16px;font-size:14.5px;line-height:1.55}

  .pricing-grid{gap:12px}
  .price-card{padding:20px 18px 18px}
  .price-name{margin-bottom:8px}
  .price-value{font-size:30px}
  .price-scope{margin-bottom:14px}
  .price-features{gap:7px;margin-bottom:16px}
  .price-features li{font-size:14px;line-height:1.45;padding-left:24px}
  .price-features li::before{top:4px;width:15px;height:15px}
  .price-cta .btn{padding:13px 20px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .day-item{transition:none}
  .acc-body,.acc-chev,.obj-body{transition:none}
}

/* ================= Как работает ================= */
.two-col-left h2{font-size:42px;letter-spacing:-.035em;color:var(--ink)}
.two-col-left h2 .accent{color:var(--cta)}
.two-col-left p{color:var(--ink-2)}
.feature-row,.step-row{border-bottom-color:var(--line)}
.feature-body h3{color:var(--ink)}
.feature-body p{color:var(--ink-2)}
.feature-body p b{color:var(--ink)}
.step-time{color:var(--ink-3)}
.step-num{
  background:linear-gradient(180deg,#FFFFFF 0%,#EFF4FB 100%);color:var(--ink);
  border:1px solid var(--line-2);border-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 20px rgba(14,23,38,.10);
}
.feature-icon{
  background:#FFFFFF;border:1px solid var(--line);color:var(--primary);box-shadow:var(--e-soft);
}
.progress-dots .dot,.progress-dots .line{background:var(--cta)}

/* ================= Цены ================= */
.price-card{padding:30px 28px}
.price-card.is-featured{
  background:#FFFFFF;border-color:rgba(194,65,12,.45);
  box-shadow:inset 0 3px 0 var(--cta),0 2px 8px rgba(14,23,38,.07),0 26px 56px rgba(194,65,12,.16);
}
.price-badge{
  background:linear-gradient(180deg,var(--cta-2),var(--cta));color:#fff;
  box-shadow:0 6px 16px rgba(194,65,12,.35);
}
.price-name{color:var(--primary-press)}
.price-card.is-featured .price-name{color:var(--cta)}
.price-value{color:var(--ink)}
.price-value .per{color:var(--ink-3)}
.price-scope{color:var(--ink-3)}
.price-features li{color:var(--ink-2)}
.price-features li::before{
  background:rgba(194,65,12,.10);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23C2410C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 8.5 7 11.5 12 5.5'/></svg>");
  background-repeat:no-repeat;background-position:center;
}
@media (min-width:861px){
  .price-name{min-height:2.9em;line-height:1.45}
}

/* ================= Вопросы ================= */
.faq-item{transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.faq-item summary{color:var(--ink);padding:20px 24px}
.faq-item summary::after{border-color:var(--ink-3)}
.faq-item:hover{border-color:var(--line-2)}
.faq-item[open]{border-color:rgba(194,65,12,.45);box-shadow:var(--e-soft),0 0 0 3px rgba(194,65,12,.06)}
.faq-item[open] summary::after{border-color:var(--cta)}
.faq-body{color:var(--ink-2)}
.faq-body b{color:var(--ink)}

/* ================= Заявка ================= */
/* перед заявкой идёт тонированная секция вопросов, поэтому градиент развёрнут:
   светлое сверху, уплотнение к подвалу */
.lead-section{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
.lead-copy h2{font-size:38px;letter-spacing:-.035em;color:var(--ink)}
.lead-copy h2 .accent{color:var(--cta)}
.lead-copy p{color:var(--ink-2)}
.lead-copy p b{color:var(--ink)}
.lead-badge{color:var(--ink-2)}
.lead-badge::before{background:var(--cta)}
.lead-form{padding:30px;border-color:var(--line-2);box-shadow:var(--e-card)}
.form-row label{color:var(--ink-2)}
.form-row input,.form-row select{
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:10px;
}
.form-row input::placeholder{color:var(--muted-2)}
.form-row input:focus,.form-row select:focus{
  background:#FFFFFF;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
/* ловушка для ботов: человек этого поля не видит и не заполняет */
.lead-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* строка состояния отправки */
.form-state{margin:14px 0 0;font-size:14px;line-height:1.5}
.form-state.is-wait{color:var(--ink-3)}
.form-state.is-ok{color:var(--ok);font-weight:500}
.form-state.is-warn{color:var(--lost)}
.form-submit[disabled]{opacity:.65;cursor:default}
.form-note{color:var(--ink-3)}
.form-note a{color:var(--cta);text-decoration-color:rgba(194,65,12,.4)}

/* ================= Подвал ================= */
/* низ заявки уже тонирован, поэтому подвал берём на ступень глубже,
   иначе он читается продолжением секции, а не концом страницы */
.site-footer{background:#DBE4F0;border-top:1px solid #C6D4E7;color:var(--ink-3)}
.site-footer .logo-text b{color:var(--cold-tint)}
.footer-brand{color:var(--ink)}
.footer-tag{color:var(--ink-3)}
.footer-meta a:hover{color:var(--ink)}

/* ================= Узкие экраны (первый экран) ================= */
@media (max-width:1240px){
  .mockup{margin-right:-40px;transform:none}
  .f-alert{left:-24px;width:280px}
  .f-adm{left:296px;width:250px}
}
@media (max-width:1040px){
  .hero{padding:104px 0 150px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-h1{font-size:44px}
  .mockup{margin-right:0}
  .float{display:none}
  .section{padding:80px 0}
  .section:first-of-type{padding-top:80px}
  .section-head h2,.two-col-left h2{font-size:34px}
}
@media (max-width:640px){
  .header-inner{padding:14px 18px;gap:10px}
  .header-cta{gap:10px}
  .header-cta .btn{padding:9px 12px;font-size:13.5px;white-space:nowrap}
  .header-cta .login{font-size:13.5px}
  .hero{padding:92px 0 80px}
  .hero-h1{font-size:33px;letter-spacing:-.03em}
  .hero-sub{font-size:16px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .hero-cta .btn-ghost{display:none}
  .mockup{padding:16px 14px}
  .mockup .fn-row{grid-template-columns:60px 1fr;gap:6px 14px;padding:12px 4px}
  .mockup .fn-num{font-size:30px}
  .fn-bar-wrap{grid-column:1 / -1;order:3;margin-top:8px}
  .fn-label{grid-column:2}
  .section-head h2,.two-col-left h2,.lead-copy h2{font-size:28px}
  .section{padding:64px 0}
  .section:first-of-type{padding-top:64px}
}
@media (max-width:430px){
  /* «Разговор 00:47 · вторник, 09:12» задано неразрывным ради ровной строки
     рядом с исходом; на телефоне оно шире карточки (230px против 236 доступных
     вместе с отступами) — уменьшенный кегль возвращает его в одну строку,
     а разрешённый перенос страхует совсем узкие экраны от выезда под край */
  .doc-meta{white-space:normal;font-size:11px}
  .header-cta .login-text{display:none}
  .header-cta .login{padding:11px;margin:-11px}
  .header-cta .btn{padding:9px 11px;font-size:12.5px}
}
@media (max-width:360px){
  .header-inner{padding-left:12px;padding-right:12px;gap:8px}
  .header-cta{gap:8px}
}
/* ================= Узкие экраны (остальная страница) =================
   Проверено на боевой странице 31.08.2026: на 390 и 430 страница была шире
   экрана (453px) и уезжала вбок. Причина не в ширине секций, а в блоке
   вкладок: грид-элемент по умолчанию не сжимается ниже min-content своего
   содержимого, а min-content держала неразрывная строка `.doc-meta`
   («Разговор 00:47 · вторник, 09:12») рядом с меткой исхода в одной flex-строке.
   Отсюда 410px у панели, столько же у навигации и боковая прокрутка всей
   страницы: фоны секций рисуются по ширине окна и за 390 обрывались. */
@media (max-width:1024px){
  .tabs-nav,.tab-panels,.tab-panel,.tab-body,.mk-card,.mk-dialog{min-width:0}
  .tabs-wrap{padding:16px}
  .tab-panel{padding:18px 16px}
  /* метка исхода и время разговора — друг под другом: рядом они не помещались,
     и «повис без решения» ломался на три строки в углу */
  .doc-top{flex-direction:column;align-items:flex-start;gap:5px}
  .doc-status{font-size:14.5px}
  /* реплики диалога: на десктопе пузырь занимает 82% ширины и это читается,
     на телефоне те же 82% рвут фразу на пять строк */
  .mk-line{max-width:94%}
  /* точки прогресса — украшение десктопной двухколонки; на узком экране
     они висят обрубком из четырёх точек над списком шагов */
  .progress-dots{display:none}
}
/* Отстройка на телефоне. Две редакции 13.09 (карточки с подписями капителью,
   потом карточки с галочкой и крестом) владелец отклонил: у строк были свои
   пункты, сравнивать нечего, а крест у VetStat читался минусом. Теперь строки
   таблицы — матрица с одними критериями, и на телефоне она остаётся таблицей:
   способ на 44 % ширины, два узких столбца с меткой и подписью мелким кеглем,
   шапка с критериями видна. Так глаз идёт по столбцу и видит три креста
   против галочки. */
@media (max-width:560px){
  .compare-wrap{border-radius:14px}
  .compare-table{table-layout:fixed}
  .compare-table th,.compare-table td{padding:12px 8px;font-size:13px}
  .compare-table th:first-child,.compare-table td:first-child{padding-left:14px}
  /* капитель «ГДЕ ОШИБСЯ АДМИНИСТРАТОР» в столбец 28 % не влезала и резалась */
  .compare-table thead th{
    font-size:11.5px;text-transform:none;letter-spacing:0;line-height:1.25;vertical-align:bottom;
    padding-top:10px;padding-bottom:10px;overflow-wrap:anywhere;
  }
  .compare-table.is-matrix .c-tool{width:40%;font-size:14.5px;line-height:1.25}
  .compare-table .c-tool .sub{display:block;font-size:12px;line-height:1.3;margin-top:3px}
  .compare-table.is-matrix th:nth-child(2),.compare-table.is-matrix th:nth-child(3){width:30%}
  .c-cell{flex-direction:column;gap:4px}
  .c-mark{width:22px;height:22px;background-size:22px 22px;margin-top:0}
  .c-txt{font-size:11.5px;line-height:1.3}
}
/* ================= Телефон: восемь направлений аккордеоном =================
   Строка чипов (31.08) читалась тегами, а не переключателем: обрезанный чип был
   единственной подсказкой о прокрутке, панель сидела в трёх вложенных плитах.
   С 13.09 на телефоне навигация скрыта, каждая панель — карточка со своей
   шапкой (номер, название, подпись, шеврон); открыта одна, первая. Без скриптов
   открыты все. Высота анимируется через grid-template-rows, не через height. */
@media (max-width:640px){
  .tabs-nav{display:none}
  .tabs-wrap{padding:0;background:transparent;border:none;box-shadow:none}
  .tabs-inner{display:block}
  .tab-panels{display:flex;flex-direction:column;gap:10px}
  .tab-panel{
    display:block;padding:0;min-width:0;
    background:#FFFFFF;border:1px solid var(--line-2);border-radius:14px;
    box-shadow:var(--e-soft);overflow:hidden;
  }
  .acc-head{
    display:flex;align-items:center;gap:12px;width:100%;min-height:60px;
    padding:12px 14px;background:transparent;border:0;text-align:left;
    font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .acc-head:active{background:#F5F8FD}
  .acc-head:focus-visible{outline:2px solid var(--cta);outline-offset:-3px;border-radius:14px}
  .acc-num{font-size:12.5px;font-weight:600;color:var(--muted-2);flex:none;width:22px}
  .tab-panel:not(.is-closed) .acc-num{color:var(--cta)}
  .acc-text{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
  .acc-title{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
  .acc-desc{font-size:13.5px;line-height:1.35;color:var(--ink-3)}
  .acc-chev{
    width:22px;height:22px;flex:none;color:var(--ink-3);
    transition:transform .24s var(--ease);transform:rotate(180deg);
  }
  .tab-panel.is-closed .acc-chev{transform:rotate(0)}
  .tab-panel:not(.is-closed){border-color:rgba(194,65,12,.45);box-shadow:inset 3px 0 0 var(--cta),var(--e-soft)}
  .acc-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s var(--ease)}
  .tab-panel.is-closed .acc-body{grid-template-rows:0fr}
  .acc-inner{min-height:0;overflow:hidden}
  .acc-inner>.tp-head{margin:0 14px 14px;padding-top:2px}
  .acc-inner>.mk-card{margin:0 10px 12px;border-radius:12px}
  .tp-title{font-size:18px}

  /* Швы: между секциями стояло по 130-150px, страница ехала на девятнадцать
     экранов и каждый заголовок приезжал после экрана пустоты. Внутри блоков
     плотность не трогаем — расползались именно стыки. */
  .section{padding:44px 0}
  .section:first-of-type{padding-top:44px}
  .hero{padding:24px 0 44px}

  /* Шапка: та же оранжевая кнопка стояла в ней и сразу под заголовком —
     на одном экране кнопка спорила сама с собой, а шапка липкая и отъедала
     верх на каждом экране. На телефоне в ней остаются логотип и вход,
     призыв живёт в первом экране, тарифах и форме. */
  .header-cta .btn{display:none}
  .header-inner{padding:10px 18px}
  /* якоря меню приводили заголовок под липкую плашку */
  [id]{scroll-margin-top:64px}

  /* Первый экран: заголовок и подзаголовок занимали семь строк, воронка
     уходила под сгиб целиком. Кегли сжаты ровно настолько, чтобы первая
     строка воронки показывалась краем и тянула прокрутить. */
  .hero-h1{font-size:29px}
  .hero-sub{font-size:15px}
  .hero-trust li{font-size:13px}

  /* Деньги моноширинным: пробел-разделитель разряда шире цифры,
     и «980 000 ₽» распадалось на два числа */
  .loss-num,.price-value{word-spacing:-.35em}
  /* сжатие целится в разряды числа, а не в пробел перед знаком рубля */
  .price-value .per{word-spacing:normal}
}
@media (prefers-reduced-motion:reduce){
  .mockup,.float{animation:none}
  .btn,.tab,.faq-item{transition:none}
  .btn-primary:hover{transform:none}
}

/* ================= Панель: окно кабинета, лист «Пульт» =================
   Решение владельца 13.09.2026: панель на странице была без имени и образа,
   хотя именно она обосновывает тариф. Блок восьми направлений не трогаем
   (владелец: «идеальный»), панель получает свой блок с окном браузера, как
   мессенджеры получили телефон. Данные вымышленные, согласованы с блоком
   денег; всё разметкой, растра нет. */
.bi{
  max-width:1100px;margin:0 auto;border-radius:16px;overflow:hidden;
  background:#FFFFFF;border:1px solid var(--line-2);
  box-shadow:0 2px 6px rgba(14,23,38,.08),0 30px 70px rgba(14,23,38,.16);
  font-size:13px;line-height:1.35;color:var(--ink);
}
.bi-bar{
  display:flex;align-items:center;gap:14px;height:40px;padding:0 16px;
  background:#EEF2F8;border-bottom:1px solid var(--line-2);
}
.bi-dots{display:flex;gap:6px}
.bi-dots i{width:10px;height:10px;border-radius:50%;background:#C9D3E3}
.bi-url{
  flex:0 1 320px;margin:0 auto;padding:5px 12px;border-radius:8px;
  background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--line-2);
  font-size:12px;color:var(--ink-3);text-align:center;
}
.bi-body{display:grid;grid-template-columns:196px minmax(0,1fr);min-height:560px}
.bi-nav{
  display:flex;flex-direction:column;gap:2px;padding:18px 12px;
  background:#F7F9FC;border-right:1px solid var(--line-2);
}
.bi-logo{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);padding:2px 10px 0}
.bi-logo span{color:var(--primary)}
.bi-clinic{font-size:12px;color:var(--ink-3);padding:2px 10px 14px}
.bi-link{padding:7px 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ink-2)}
.bi-link.is-active{background:#FFFFFF;color:var(--primary);box-shadow:0 1px 2px rgba(14,23,38,.08)}
.bi-main{padding:20px 22px 22px;background:#F2F5FA}
.bi-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.bi-title{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.bi-title span{font-size:13px;font-weight:500;color:var(--ink-3);margin-left:10px}
.bi-filters{display:flex;gap:8px}
.bi-filters span{
  padding:5px 10px;border-radius:999px;background:#FFFFFF;border:1px solid var(--line-2);
  font-size:12px;color:var(--ink-2);white-space:nowrap;
}
.bi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bi-card{
  background:#FFFFFF;border:1px solid var(--line-2);border-radius:12px;padding:14px 16px 12px;
  box-shadow:0 1px 2px rgba(14,23,38,.05);min-width:0;
}
.bi-wide{grid-column:span 2}
.bi-card-h{font-size:12.5px;font-weight:600;color:var(--ink-3);margin-bottom:6px}
.bi-big{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.bi-big.lost{color:var(--lost)}
.bi-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:10px}
.bi-bars{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.bi-bars-cap{font-size:11.5px;color:var(--ink-3)}
.bi-bars-box{display:flex;align-items:flex-end;gap:6px;height:56px}
.bi-bars-box i{width:26px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#3B82F6,#93C5FD)}
.bi-stats{display:flex;flex-direction:column;border-top:1px solid #EAF0F8;margin-top:8px}
.bi-stat{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid #EAF0F8}
.bi-stat:last-child{border-bottom:0}
.bi-stat span{color:var(--ink-2);font-size:12.5px}
.bi-stat b{font-weight:600;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.bi-stat b.ok{color:var(--ok)}
.bi-stat b.lost{color:var(--lost)}
.bi-stat b.wait{color:var(--wait)}
.bi-stat b.info{color:var(--primary)}
.bi-stats-4{flex-direction:row;gap:0;border-top:1px solid #EAF0F8}
.bi-stats-4 .bi-stat{flex:1 1 0;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px 4px 0;border-bottom:0;border-right:1px solid #EAF0F8;margin-right:12px}
.bi-stats-4 .bi-stat:last-child{border-right:0;margin-right:0}
.bi-stats-4 .bi-stat b{font-size:20px}
.bi-stats-tall .bi-stat{padding:11px 0}
.bi-stats-tall .bi-stat b{font-size:20px}
@media (max-width:1024px){
  .bi-body{grid-template-columns:170px minmax(0,1fr)}
  .bi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bi-filters{display:none}
}
@media (max-width:640px){
  /* на телефоне окно панели во всю ширину, боковое меню скрыто: заголовок листа
     и период остаются, карточки в один столбец, кегль чуть меньше */
  .bi{margin:0 -20px;border-radius:0;border-left:0;border-right:0;font-size:12.5px}
  .bi-bar{height:36px;padding:0 14px}
  .bi-url{flex-basis:220px;font-size:11.5px}
  .bi-body{grid-template-columns:1fr;min-height:0}
  .bi-nav{display:none}
  .bi-main{padding:14px 14px 16px}
  .bi-head{margin-bottom:12px}
  .bi-title{font-size:18px}
  .bi-title span{display:block;margin:2px 0 0;font-size:12px}
  .bi-grid{grid-template-columns:1fr;gap:10px}
  .bi-wide{grid-column:auto}
  .bi-big{font-size:30px}
  .bi-stats-4{flex-direction:column;gap:0}
  .bi-stats-4 .bi-stat{flex-direction:row;align-items:baseline;padding:7px 0;border-right:0;border-bottom:1px solid #EAF0F8;margin-right:0}
  .bi-stats-4 .bi-stat:last-child{border-bottom:0}
  .bi-stats-4 .bi-stat b,.bi-stats-tall .bi-stat b{font-size:14px}
  .bi-bars-box{height:44px}
  .bi-bars-box i{width:16px}
  /* пять карточек в столбец давали 1 200 px: на телефоне остаются три
     (обратилось, недозвон, не записались), две скрыты */
  .bi-card.bi-hide-m{display:none}
}

/* переключатель двух экранов панели и лента звонков с разбором */
.bi-switch{display:flex;justify-content:center;gap:6px;margin:0 auto 22px;padding:5px;width:max-content;max-width:100%;border-radius:999px;background:#FFFFFF;border:1px solid var(--line-2);box-shadow:var(--e-soft)}
.bi-tab{
  padding:9px 18px;border-radius:999px;border:0;background:transparent;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--ink-2);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .15s var(--ease),color .15s var(--ease);
}
.bi-tab.is-active{background:var(--ink);color:#FFFFFF}
.bi-tab:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
.bi.is-hidden{display:none}
.bi+.bi{margin-top:24px}
.bi-filters span.is-on{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.bi-table{background:#FFFFFF;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(14,23,38,.05)}
.bi-tr{
  display:grid;grid-template-columns:78px 200px 1fr 1.25fr 110px 124px;gap:12px;align-items:start;
  padding:11px 14px;border-bottom:1px solid #EAF0F8;font-size:12.5px;color:var(--ink);
}
.bi-tr:last-child{border-bottom:0}
.bi-th{background:#F7F9FC;color:var(--ink-3);font-size:11.5px;font-weight:600;padding:9px 14px}
.bi-tr.is-open{background:#FFF7ED;border-bottom-color:#FED7AA}
.bi-time{display:flex;flex-direction:column;gap:2px}
.bi-time b{font-weight:600}
.bi-time i,.bi-res i{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.bi-phone{font-variant-numeric:tabular-nums;white-space:nowrap}
.bi-tag{
  display:inline-block;font-style:normal;font-size:10.5px;font-weight:600;line-height:1;
  padding:4px 6px;border-radius:6px;background:#EEF3FA;color:var(--ink-2);vertical-align:1px;
}
.bi-tag.is-urgent{background:#FEF3C7;color:#92400E}
.bi-res{display:flex;flex-direction:column;gap:2px}
.bi-res b{font-weight:600}
.bi-res b.ok{color:var(--ok)}
.bi-res b.lost{color:var(--lost)}
.bi-res b.wait{color:var(--wait)}
.bi-res b.info{color:var(--primary)}
.bi-call{
  display:grid;grid-template-columns:1.1fr 1fr;gap:22px;padding:16px 18px 18px;
  background:#FFFDF9;border-bottom:1px solid #EAF0F8;box-shadow:inset 3px 0 0 var(--cta);
}
.bi-call-h{font-size:11.5px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.bi-voice{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#EEF3FA;margin-bottom:12px}
.bi-play{width:28px;height:28px;border-radius:50%;flex:none;background:var(--primary);position:relative}
.bi-play::after{content:"";position:absolute;left:11px;top:8px;border-left:9px solid #FFFFFF;border-top:6px solid transparent;border-bottom:6px solid transparent}
.bi-wave{display:flex;align-items:flex-end;gap:2px;height:18px;flex:1 1 auto}
.bi-wave i{flex:1;background:linear-gradient(180deg,#2563EB,rgba(37,99,235,.35));border-radius:1px}
.bi-voice b{font-size:12px;color:var(--ink-3);font-weight:500}
.bi-dialog p{margin:0 0 7px;font-size:13px;line-height:1.45;color:var(--ink)}
.bi-dialog p b{display:block;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin-bottom:1px}
.bi-dialog mark{background:#FEF3C7;color:inherit;padding:1px 3px;border-radius:3px;box-shadow:inset 0 -1px 0 #FBBF24}
.bi-facts{margin:0 0 12px;display:flex;flex-direction:column}
.bi-facts>div{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid #EAF0F8;font-size:12.5px}
.bi-facts>div:last-child{border-bottom:0}
.bi-facts dt{color:var(--ink-3)}
.bi-facts dd{margin:0;color:var(--ink)}
.bi-facts dd.lost{color:var(--lost);font-weight:600}
.bi-rule{font-size:12.5px;line-height:1.45;color:var(--ink);padding:9px 12px;border-radius:10px;background:#FFF1F0;border:1px solid #FECACA;margin-bottom:8px}
.bi-rule b{color:var(--lost)}
.bi-action{font-size:12.5px;line-height:1.45;color:var(--ink);padding:9px 12px;border-radius:10px;background:#ECFDF5;border:1px solid #A7F3D0}
.bi-action::before{content:"Что делать: ";font-weight:600;color:var(--ok)}
@media (max-width:1024px){
  .bi-tr{grid-template-columns:70px 170px 1fr 1.2fr;font-size:12px}
  .bi-tr>span:nth-child(5),.bi-tr>span:nth-child(6){display:none}
  .bi-call{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* на телефоне лента в две колонки: время и телефон слева, итог справа; повод
     переезжает под телефон, канал и смена скрыты; разбор в один столбец */
  .bi-switch{width:auto;margin:0 0 16px}
  .bi-tab{flex:1 1 0;padding:9px 8px;font-size:13.5px}
  .bi-th{display:none}
  .bi-tr{grid-template-columns:auto 1fr;gap:6px 12px;padding:10px 12px}
  .bi-tr>span:nth-child(3){grid-column:2;font-size:12px;color:var(--ink-2)}
  .bi-phone{grid-column:2}
  .bi-time{grid-row:span 3}
  .bi-res{grid-column:2}
  .bi-call{padding:14px 12px 14px;gap:14px}
  .bi-facts>div{grid-template-columns:118px 1fr}
  /* из шести строк ленты на телефоне остаются три: исходящий, раскрытый разбор, жалоба */
  .bi-tr.bi-hide-m{display:none}
}

/* кнопка после блока денег: только на телефоне (разбор 13.09, пункт 13) */
.loss-cta{display:none}
@media (max-width:640px){
  .loss-cta{
    display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
    margin:22px 0 0;padding:22px 18px 20px;border-radius:16px;
    background:#FFFFFF;border:1px solid var(--line-2);box-shadow:var(--e-soft);
  }
  .loss-cta-text{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.3}
  .loss-cta .btn{width:100%;justify-content:center}
  .loss-cta-note{font-size:13px;line-height:1.4;color:var(--ink-3)}
  /* хронология телефона: шеврон справа, чтобы строка читалась кнопкой */
  .day-item{grid-template-columns:44px 1fr 20px}
  .day-chev{display:block;width:20px;height:20px;color:var(--ink-3);align-self:center}
  .day-item.is-active .day-chev{color:var(--cta);transform:rotate(-90deg)}
  /* таблица отличий карточками: критерии одни, подписаны у каждой ячейки */
  .compare-table.is-matrix,.compare-table.is-matrix tbody,.compare-table.is-matrix tr,.compare-table.is-matrix td{display:block;width:auto}
  .compare-table.is-matrix thead{display:none}
  .compare-table.is-matrix tr{
    background:#FFFFFF;border:1px solid var(--line-2);border-radius:14px;margin:0 0 10px;padding:4px 14px 8px;box-shadow:var(--e-soft);
  }
  .compare-table.is-matrix tr.row-us{border-color:rgba(194,65,12,.45);box-shadow:inset 3px 0 0 var(--cta),var(--e-soft)}
  .compare-table.is-matrix td{padding:9px 0;border-bottom:1px solid #EAF0F8;font-size:13.5px}
  .compare-table.is-matrix td:last-child{border-bottom:0}
  .compare-table.is-matrix .c-tool{width:auto;font-size:16px;font-weight:600;padding:10px 0 8px}
  .compare-table.is-matrix .sub{font-size:12.5px;font-weight:400;color:var(--ink-3);margin-top:2px}
  .compare-table.is-matrix td[data-crit]::before{
    content:attr(data-crit);display:block;font-size:11.5px;font-weight:600;color:var(--ink-3);margin-bottom:5px;
  }
  .compare-table.is-matrix .c-cell{flex-direction:row;align-items:center;gap:8px}
  .compare-table.is-matrix .c-mark{width:20px;height:20px;flex:none}
  .compare-table.is-matrix .c-txt{font-size:13.5px}
}

/* ================= Правки 13.09, вечер (разбор 25 правок владельца) =================
   hero на телефоне и планшете: плашки .float скрыты с 1040, их заменяет карточка
   в жанре сообщения мессенджера и полоса смен (вопрос 10 разбора). */
.hero-m{display:none}
@media (max-width:1040px){
  .hero-m{display:flex;flex-direction:column;gap:12px;margin:0 0 26px}
  .hm-msg{
    background:#FFFFFF;border:1px solid var(--line-2);border-radius:16px 16px 16px 4px;
    padding:14px 16px;box-shadow:var(--e-soft);border-left:3px solid var(--lost);
  }
  .hm-top{display:flex;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;font-size:12px;color:var(--ink-3);margin-bottom:7px}
  .hm-app{font-weight:600;color:var(--ink-2)}
  .hm-title{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.25;margin-bottom:6px}
  .hm-quote{font-size:14px;line-height:1.45;color:var(--ink-2);font-style:italic;margin-bottom:8px}
  .hm-do{font-size:13.5px;line-height:1.4;color:var(--ink-2)}
  .hm-shift{
    display:flex;flex-direction:column;gap:7px;padding:12px 16px;
    background:#FFFFFF;border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--e-soft);
  }
  .hm-shift-cap{font-size:12.5px;font-weight:600;color:var(--ink-2)}
  .hm-track{position:relative;display:block;height:8px;border-radius:4px;background:#EEF2F7;overflow:hidden}
  .hm-track i{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
  .hm-track .hm-best{background:linear-gradient(90deg,#0F9D6E,#34D399)}
  .hm-track .hm-worst{background:linear-gradient(90deg,#DC2626,#F87171)}
  .hm-legend{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;color:var(--ok)}
  .hm-legend .is-weak{color:var(--lost)}
}
/* хронология дня: подсказка над списком и стрелка на всех ширинах (правка 19);
   на телефоне часы убраны, строки карточками, как у восьми направлений */
.day-hint{font-size:13.5px;line-height:1.4;color:var(--ink-3);margin:0 0 6px 16px}
.day-item{grid-template-columns:52px 1fr 20px}
.day-chev{display:block;width:20px;height:20px;color:var(--ink-3);align-self:center;transform:rotate(-90deg)}
.day-item.is-active .day-chev{color:var(--cta)}
@media (max-width:640px){
  .day-hint{margin-left:2px}
  .day-nav{gap:8px}
  .day-item{
    grid-template-columns:1fr 20px;gap:10px;padding:11px 14px;margin:0;
    background:#FFFFFF;border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--e-soft);
  }
  .day-item.is-active{background:#FFFFFF;border-color:rgba(194,65,12,.45);box-shadow:inset 3px 0 0 var(--cta),var(--e-soft)}
  .day-time{display:none}
  .day-chev{transform:rotate(-90deg)}
  .day-item.is-active .day-chev{transform:rotate(0deg)}
}