/* ============================================================
   Лендинг «Упущенная выручка» — собственные компоненты страницы.
   Префикс lr- : никаких общих имён active/open для новых блоков.
   База — css/base.css (дизайн-система донора) + /tokens_colors.css.
   ============================================================ */

/* ---- служебное ---- */
/* FAQ: без JavaScript ответы полностью видимы; с JS аккордеон режет max-height
   и управляет раскрытием из app.js (scrollHeight). Класс js на <html> ставит
   app.js после успешной инициализации — при отказе скрипта режим без JS. */
.faq-a{max-height:none}
html.js .faq-a{max-height:0}
/* Вкладки без JavaScript: все панели коронки стеком, кнопки-капсулы скрыты. */
html:not(.js) .feat-panels>.feat-panel{grid-area:auto;visibility:visible;opacity:1;pointer-events:auto;transform:none;margin-bottom:28px}
html:not(.js) .feat-tabs{display:none}

/* ---- reduced motion: отключены ВСЕ анимации и переходы страницы,
   включая донорские riseIn (въезд hero), chipFloat (плавающие чипы),
   pulse и hover-переходы. Содержимое остаётся видимым: у riseIn
   animation-fill-mode:both действует только при живой анимации,
   с animation:none элементы в базовом (видимом) состоянии. ---- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- мобильное меню: единый брейкпоинт 900px, согласован с js/app.js
   (обработчик resize закрывает панель при innerWidth > 900).
   Донорские диапазоны 900/960/961 в base.css различаются; здесь они
   сведены к одному порогу: ≤900 — бургер справа, меню и CTA шапки скрыты;
   ≥901 — бургер скрыт, панель закрыта. ---- */
@media(max-width:900px){
  nav.nav .nav-links,nav.nav .nav-cta{display:none !important}
  nav.nav .cwm-burger{display:inline-flex !important;margin-left:auto !important;flex:none !important}
  nav.nav .nav-inner{gap:12px !important}
}
@media(min-width:901px){
  nav.nav .cwm-burger{display:none !important}
  .cwm-drawer{display:none !important}
}

:focus-visible{outline:3px solid rgba(139,197,24,.65);outline-offset:2px;border-radius:6px}

/* ---- топбар моков на узких экранах: длинный заголовок уступает,
     поиск скрывается (мок не переполняется) ---- */
@media(max-width:700px){.mock-topbar .search{display:none}}

/* ---- HERO: примечание под кнопками ---- */
.lr-hero-note{margin-top:14px;font-size:13.5px;color:var(--text-subtle);
  display:flex;align-items:center;gap:8px}
.lr-hero-note svg{width:15px;height:15px;stroke:var(--lime-700);fill:none;
  stroke-width:2;stroke-linecap:round;flex:none}

/* ---- HERO: таблица менеджеров внутри мока ---- */
.lr-mtable{margin-top:14px;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.lr-mtable-row{
  display:grid;grid-template-columns:minmax(86px,1.1fr) minmax(74px,.9fr) 1fr;
  gap:10px;align-items:center;
  padding:9px 14px;font-size:12.5px;border-top:1px solid var(--divider)}
.lr-mtable-row:first-child{border-top:none;background:var(--gray-25);
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-subtle)}
/* шапка таблицы мока: перенос только по явному <br>, «1-й звонок» не рвётся */
.lr-mtable-row:first-child span{white-space:nowrap}
.lr-mtable .mn{font-weight:600;color:var(--text-strong);display:flex;align-items:center;gap:7px;min-width:0}
.lr-mtable .mn i{width:22px;height:22px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#12151C;font-style:normal}
.lr-mtable .mv{font-weight:600;color:var(--text-strong);font-feature-settings:"tnum" 1}
.lr-mtable .mr{display:flex;gap:5px;flex-wrap:wrap}
.lr-tag{display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  padding:2.5px 9px;font-size:10.5px;font-weight:600;white-space:nowrap}
.lr-tag.late{background:var(--warn-soft);color:var(--warn-ink)}
.lr-tag.none{background:var(--risk-soft);color:var(--risk-ink)}
.lr-tag.mix{background:var(--gray-100);color:var(--text-muted)}
.lr-reason{margin-top:10px;padding:10px 14px;border-radius:12px;
  background:var(--brand-soft);border:1px solid var(--brand-soft-border);
  font-size:12px;color:var(--text-muted);line-height:1.5}
.lr-reason b{color:var(--lime-800)}
.lr-hero-chip-fx{bottom:-16px;left:-14px;top:auto;right:auto}
/* бокс мока — отдельный позиционированный якорь плавающего чипа: чип висит
   на нижнем крае САМОГО мока (веха 2: иначе низ чипа считался от низа
   следующего sibling и наезжал на него). */
.lr-hero-mock-box{position:relative}
/* нижний запас мока под нависающий чип (низ чипа заходит в мок на ~34px):
   текст «Детали причины» не попадает под плашку (веха 2, 1440) */
.lr-hero-mock-box .mock-body{padding-bottom:56px}

/* ---- Блок 2: временные линии риска ----
   Карточка — flex-колонка: шапка (kicker/заголовок/описание) сверху,
   линия и подпись прижаты к низу. Карточки в grid-строке равной высоты,
   поэтому при разной длине описаний таймлайны обеих карточек стоят
   на одинаковой вертикальной позиции (min-зазор от описания — 24px). */
.lr-tl-wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:46px;align-items:stretch}
.lr-tl-card{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:30px 28px 24px;box-shadow:var(--sh-card);
  display:flex;flex-direction:column;
  transition:box-shadow .18s,transform .18s}
.lr-tl-card:hover{box-shadow:var(--sh-raised);transform:translateY(-2px)}
.lr-tl-kicker{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-subtle)}
.lr-tl-kicker .kdot{width:8px;height:8px;border-radius:50%;flex:none}
.lr-tl-kicker.late .kdot{background:var(--warn)}
.lr-tl-kicker.none .kdot{background:var(--risk)}
.lr-tl-t{margin-top:12px;font-size:20px;font-weight:700;letter-spacing:-.02em;
  color:var(--text-strong);line-height:1.2}
.lr-tl-d{margin-top:10px;font-size:14.5px;color:var(--text-muted);line-height:1.55}
.lr-tl{display:flex;align-items:flex-start;margin:auto 0 6px;padding-top:24px}
.lr-node{display:flex;flex-direction:column;align-items:center;gap:7px;flex:none;width:74px}
.lr-dot{width:14px;height:14px;border-radius:50%;background:var(--surface);
  border:3.5px solid var(--lime-500);box-shadow:0 0 0 3px rgba(175,237,74,.18)}
.lr-dot.warn{border-color:var(--warn);box-shadow:0 0 0 3px rgba(240,173,78,.18)}
.lr-dot.risk{border-color:var(--risk);box-shadow:0 0 0 3px rgba(229,72,77,.15)}
.lr-node small{font-size:10.5px;line-height:1.35;color:var(--text-subtle);
  text-align:center;font-weight:600}
.lr-node small b{display:block;color:var(--text-strong);font-size:11.5px}
.lr-seg{flex:1;height:7px;min-width:16px;border-radius:4px;margin-top:3.5px}
.lr-seg.ok{background:linear-gradient(90deg,var(--lime-300),var(--lime-500))}
.lr-seg.late{background:repeating-linear-gradient(90deg,var(--warn) 0 9px,rgba(240,173,78,.35) 9px 15px)}
.lr-seg.gone{background:repeating-linear-gradient(90deg,var(--risk) 0 9px,rgba(229,72,77,.3) 9px 15px)}
.lr-tl-cap{margin-top:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.lr-tl-cap span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-subtle)}
.lr-tl-cap i{width:12px;height:12px;border-radius:3px;flex:none}
.lr-tl-out{margin:30px auto 0;max-width:760px;text-align:center;font-size:15px;
  line-height:1.6;color:var(--text-muted);padding:14px 22px;border-radius:14px;
  background:var(--brand-soft);border:1px solid var(--brand-soft-border)}
.lr-tl-out b{color:var(--lime-800)}

/* ---- Блок 4: цепочка «данные → методика → оценка» ---- */
.lr-chain{display:flex;align-items:stretch;gap:14px;margin-top:46px}
.lr-chain-node{flex:1;position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:26px 24px;box-shadow:var(--sh-card);text-align:left;
  transition:box-shadow .18s,transform .18s}
.lr-chain-node:hover{box-shadow:var(--sh-raised);transform:translateY(-2px)}
.lr-chain-node .ficon{margin-bottom:14px}
.lr-chain-n{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--lime-800);
  text-transform:uppercase}
.lr-chain-t{margin-top:6px;font-size:18px;font-weight:700;color:var(--text-strong);
  letter-spacing:-.015em;line-height:1.25}
.lr-chain-d{margin-top:8px;font-size:13.5px;color:var(--text-muted);line-height:1.5}
.lr-chain-arrow{align-self:center;flex:none;color:var(--lime-700)}
.lr-chain-arrow svg{width:26px;height:26px;display:block}
.lr-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.lr-duo-card{border-radius:18px;padding:22px 24px;border:1px solid;line-height:1.55}
.lr-duo-card.risk{background:var(--risk-soft);border-color:rgba(229,72,77,.25)}
.lr-duo-card.info{background:var(--gray-25);border-color:var(--border)}
.lr-duo-t{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:700;
  color:var(--text-strong)}
.lr-duo-t svg{width:18px;height:18px;flex:none;fill:none;stroke-width:2;stroke-linecap:round}
.lr-duo-card.risk .lr-duo-t svg{stroke:var(--risk)}
.lr-duo-card.info .lr-duo-t svg{stroke:var(--warn)}
.lr-duo-card p{margin-top:9px;font-size:13.5px;color:var(--text-muted)}
.lr-note{margin-top:22px;display:flex;gap:12px;align-items:flex-start;
  padding:16px 20px;border-radius:14px;background:var(--gray-25);
  border:1px dashed var(--border-strong);font-size:13.5px;color:var(--text-muted);line-height:1.55}
.lr-note svg{width:17px;height:17px;flex:none;stroke:var(--lime-700);fill:none;
  stroke-width:2;stroke-linecap:round;margin-top:2px}
.lr-note b{color:var(--text-strong)}

/* ---- Блок 5: планёрка — лента шагов ---- */
.lr-steps{display:flex;align-items:stretch;gap:12px;margin-top:46px}
.lr-step{flex:1;position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:24px 22px;box-shadow:var(--sh-card);
  display:flex;flex-direction:column;min-width:0;
  transition:box-shadow .18s,transform .18s}
.lr-step:hover{box-shadow:var(--sh-raised);transform:translateY(-2px)}
.lr-step-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.lr-n{font-size:13px;font-weight:700;color:var(--lime-800);
  background:var(--brand-soft);border:1px solid var(--brand-soft-border);
  border-radius:999px;padding:3px 11px;font-feature-settings:"tnum" 1}
.lr-step-t{font-size:17px;font-weight:700;color:var(--text-strong);letter-spacing:-.015em;line-height:1.25}
.lr-step-d{margin-top:8px;font-size:13.5px;color:var(--text-muted);line-height:1.5;flex:1}
.lr-frag{margin-top:14px;border:1px solid var(--divider);border-radius:12px;
  background:var(--gray-25);padding:10px 12px;font-size:11.5px;color:var(--text-muted);
  display:flex;flex-direction:column;gap:7px}
.lr-frag .row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.lr-frag .row b{color:var(--text-strong);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-frag .row span:not(.mini){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-frag .mini{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;
  font-weight:600;border-radius:999px;padding:2px 8px;white-space:nowrap;flex:none}
.lr-frag .mini.late{background:var(--warn-soft);color:var(--warn-ink)}
.lr-frag .mini.none{background:var(--risk-soft);color:var(--risk-ink)}
.lr-frag .mini.ok{background:var(--brand-soft);color:var(--lime-800)}
.lr-arrow{align-self:center;flex:none;color:var(--lime-700)}
.lr-arrow svg{width:22px;height:22px;display:block}

/* ---- Блок 6: композиция демонстрационного разбора ---- */
.lr-demo-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;margin-top:46px;align-items:start}
.lr-demo-card{position:relative}
.lr-zoom-t{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px;flex-wrap:wrap}
.lr-zoom-t b{font-size:15px;color:var(--text-strong)}
.lr-zrow{display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:9px 2px;border-top:1px solid var(--divider);font-size:13px}
.lr-zrow:first-of-type{border-top:none}
.lr-zrow .k{color:var(--text-subtle)}
.lr-zrow .v{font-weight:600;color:var(--text-strong);text-align:right;font-feature-settings:"tnum" 1}
.lr-zrow .v.bad{color:var(--risk-ink)}
.lr-zrow .v.good{color:var(--lime-800)}

/* ---- Блок 7: подключение ---- */
.lr-rail{display:flex;gap:14px;align-items:stretch;margin-top:46px}
.lr-conn-card{flex:1;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:26px 24px;box-shadow:var(--sh-card);position:relative;
  transition:box-shadow .18s,transform .18s}
.lr-conn-card:hover{box-shadow:var(--sh-raised);transform:translateY(-2px)}
.lr-conn-card .ficon{margin-bottom:14px}
.lr-conn-n{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--lime-800);text-transform:uppercase}
.lr-conn-t{margin-top:6px;font-size:18px;font-weight:700;color:var(--text-strong);letter-spacing:-.015em}
.lr-conn-d{margin-top:8px;font-size:13.5px;color:var(--text-muted);line-height:1.5}
.lr-cta-line{margin-top:36px;text-align:center}
.lr-cta-line .btn{margin:0 auto}

/* ---- Блок 8: связанные возможности ---- */
.lr-rel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:46px}
.lr-rel-card{position:relative;display:flex;flex-direction:column;gap:8px;
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:24px 24px 20px;box-shadow:var(--sh-card);color:inherit;
  transition:box-shadow .18s,transform .18s,border-color .18s}
.lr-rel-card:hover{box-shadow:var(--sh-raised);transform:translateY(-3px);border-color:var(--border-strong)}
.lr-rel-k{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-subtle)}
.lr-rel-t{font-size:17.5px;font-weight:700;color:var(--text-strong);letter-spacing:-.015em;line-height:1.3}
.lr-rel-d{font-size:13.5px;color:var(--text-muted);line-height:1.5;flex:1}
.lr-rel-go{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:13.5px;font-weight:600;color:var(--lime-800)}
.lr-rel-go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;transition:transform .18s}
.lr-rel-card:hover .lr-rel-go svg{transform:translateX(4px)}

/* ---- Финал: карточка с формой диагностики (стили полей — донорские .fc-*) ---- */
.lr-final-card{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.lr-final-card form{width:100%}
.lr-final-card .btn-lg{width:100%;text-align:center}
.lr-final-bul{display:flex;flex-direction:column;gap:9px}
.lr-final-bul span{display:inline-flex;align-items:flex-start;gap:9px;font-size:14px;
  color:var(--text-muted);line-height:1.45}
.lr-final-bul svg{width:17px;height:17px;flex:none;stroke:var(--lime-700);fill:none;
  stroke-width:2.4;stroke-linecap:round;margin-top:2px}

/* ---- адаптив ---- */
@media(max-width:1024px){
  .lr-tl-wrap,.lr-duo{grid-template-columns:1fr}
  .lr-demo-grid{grid-template-columns:1fr}
  .lr-rel{grid-template-columns:1fr 1fr}
  .lr-chain{flex-wrap:wrap}
  .lr-chain-node{flex:1 1 44%}
  .lr-chain-arrow{transform:rotate(90deg);width:100%;display:flex;justify-content:center}
  .lr-steps{flex-wrap:wrap}
  .lr-step{flex:1 1 44%}
  .lr-arrow{transform:rotate(90deg)}
  .lr-rail{flex-wrap:wrap}
  .lr-conn-card{flex:1 1 44%}
}
@media(max-width:700px){
  .lr-rel{grid-template-columns:1fr}
  .lr-chain-node,.lr-step,.lr-conn-card{flex:1 1 100%}
  .lr-arrow{display:none}
  .lr-tl-card{padding:26px 20px 20px}
  .lr-mtable-row{grid-template-columns:minmax(70px,1fr) minmax(64px,.9fr) 1.1fr;padding:9px 10px;gap:7px}
  .lr-mtable .mr{flex-direction:column;align-items:flex-start;gap:4px}
}
@media(max-width:400px){
  .lr-node{width:62px}
  .lr-node small{font-size:9.5px}
}

/* ---- KPI коронки: подписи сверху, значения прижаты к низу карточки —
   три KPI стоят ровно, независимо от числа строк в подписи ---- */
.mock .kpi{display:flex;flex-direction:column}
.mock .kpi .v{margin-top:auto;padding-top:4px}
/* единица измерения не рвётся с последним словом — значения KPI в строке
   остаются одинаковой высоты, верхние края значений совпадают */
.mock .kpi .v small{white-space:nowrap}
/* Донорский ≤960 правилo repeat(2,1fr)!important писано под свои 4 KPI —
   у нас их 3, и схема 2+1 ломает ровность ряда. Держим три колонки до 700px,
   ниже уступаем донорской сетке (правило ниже — позже в файле, потому сильнее). */
@media(max-width:960px){
  .mock .kpi-row{grid-template-columns:repeat(3,1fr) !important}
}
@media(max-width:700px){
  .mock .kpi-row{grid-template-columns:repeat(2,1fr) !important}
  /* цифра меньше — значения KPI не переносятся и в строке стоят ровно */
  .mock .kpi .v{font-size:18px}
}
@media(max-width:400px){
  .mock .kpi .v{font-size:16px}
}

/* ---- Форма диагностики (финальный CTA) ----
   Стили полей/согласия/honeypot/состояний — донорские (css/base.css .fc-*).
   Здесь только поведение страницы: без JS форма скрыта — отправка без
   таймингов (_ft/_pt) невозможна, вместо неё виден честный <noscript>
   с контактами; кнопка на время отправки приглушена. */
html:not(.js) #fc-form{display:none}
.fc-card .btn:disabled{opacity:.65;cursor:default;transform:none;box-shadow:none}
/* статус-блоки внутри карточки — как у донора: колонкой по центру */
.lr-final-card .fc-success,.lr-final-card .fc-error{margin-top:2px}