/* Fonts load via <link rel="preconnect"> + <link rel="stylesheet"> in landing.php's own <head>
   (added 2026-08-08, SEO/perf pass) — no @import here; this file always loads alongside
   css/blog.css, which requests the same family superset, so a second @import would just be a
   redundant, still render-blocking, request. */
:root {
  --primary: #5E2B9A;
  --primary-dark: #4D237E;
  --primary-darker: #3A1B5F;
  --primary-light: #ECE6F3;
  --primary-glass: rgba(94, 43, 154, .08);

  --success: #1C882D;
  --success-light: #E4F1E6;
  --success-tint: #d5ecd9;
  --success-border: #b9dec0;
  --danger: #dc2626;
  --danger-light: #fef2f2;
  --danger-tint: #fde3e3;
  --danger-border: #fbcaca;
  --warning: #d97706;
  --warning-light: #fffbeb;
  --warning-tint: #fdecc8;
  --warning-border: #fbdfa0;
  --purple: #5E2B9A;
  --orange: #E56200;
  --orange-light: #FCECE0;
  --orange-text: #c2410c;
  --orange-border: #fed7aa;

  --text: #1A1A1F;
  --text-secondary: #55555c;
  --text-muted: #6E6E75;

  --bg: #F7F6F3;
  --bg-card: #ffffff;

  --border: #E4E2DC;
  --border-strong: #CFCCC3;

  --r-xs: 4px;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --sh: 0 4px 6px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --sh-lg: 0 10px 25px rgba(0,0,0,.09), 0 4px 8px rgba(0,0,0,.04);

  --font: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --font-heading: 'Space Grotesk', var(--font);
  --font-mono: 'Consolas', 'SF Mono', 'Fira Code', monospace;
}
* , *::before, *::after { box-sizing: border-box; min-width: 0; }
html { scroll-behavior: smooth; }
/* overflow-x на body (не на html!) — тот же паттерн, что в css/blog.css, где .blog-nav
   корректно прилипает при скролле. overflow-x на самом <html> ломает position:sticky в Chrome
   (он больше не понимает, относительно какого скролл-контейнера прилипать), из-за чего .blog-nav
   на landing.php переставал прилипать при скролле, хотя разметка идентична блогу — найдено
   2026-07-25 при живой проверке продакшна. */
body { overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
h1, h2, h3 { font-family: var(--font-heading); }
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--r-sm); font-weight: 700; font-size: 15px;
  border: 1.5px solid transparent; cursor: pointer; transition: all .15s;
  font-family: var(--font); white-space: nowrap;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(94,43,154,.28); }
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 6px 18px rgba(94,43,154,.36); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-white { background: #fff; color: var(--primary-darker); }
.btn-white:hover { background: var(--primary-light); transform: translateY(-1px); }
.btn-lg { padding: 15px 30px; font-size: 16px; }

/* ── Nav: shared with blog/calc via .blog-nav (css/blog.css) + templates/public_header.php,
   see that file's block for .blog-nav/.blog-nav-links/.blog-nav-actions. ── */

/* ════════════════════════════════════════════════════════════════════════
   DIRECTION CONTRACT — see the HTML comment at the top of <body> in
   landing.php for the full five-block record (THESIS/OWN-WORLD/STORY/
   FIRST VIEWPORT/FORM). Every class below serves that one idea: the landing
   page is not marketing copy next to a screenshot of the product — it IS a
   single continuous console shell, scroll-narrated, wearing the same
   restrained white/paper chrome the real cabinet uses (see CLAUDE.md
   "Brand & design system" — sidebar/topbar are white, purple is the sparse
   interactive accent, never a full-bleed wash). Reused everywhere below:
   solid-tint severity rows instead of accent borders, list/ledger rows
   instead of icon+heading+text cards, a real in-page tab strip instead of
   an eyebrow label above every heading.
   ════════════════════════════════════════════════════════════════════════ */

/* thin multi-color status sliver directly under the (untouched) header —
   a thumbnail of the severity palette the page uses throughout, not decor */
.topline { height: 3px; display: flex; }
.topline span { flex: 1; }
.topline span:nth-child(1) { background: var(--primary); }
.topline span:nth-child(2) { background: var(--success); }
.topline span:nth-child(3) { background: var(--orange); }

/* ── Console shell (hero) ──
   2026-08-08: the first cut here was too restrained end-to-end (user feedback: "скучно и
   безлико" — reads generic). Competitor research (Ozon/marketplace analytics tools all sit on
   flat white+one-muted-blue, so a quiet white console blended straight back into the category;
   best-in-class analytics SaaS — Mixpanel/ChartMogul/Stripe — spend real saturated color behind
   or as the real product data itself). Fix: keep the white console FRAME (still literally the
   product's own chrome, still the differentiator vs. a generic marketing hero) but stop putting
   it on flat paper — a real two-color glow (purple+green, the brand's own hues, never orange as
   a field per the brand book) sits behind it, Mixpanel-style, so the frame reads as elevated
   product floating on brand color instead of a plain card on the page background. */
.console-shell {
  padding: 48px 0 64px;
  background:
    radial-gradient(900px 460px at 12% -12%, rgba(94,43,154,.24), transparent 60%),
    radial-gradient(760px 420px at 100% 0%, rgba(28,136,45,.14), transparent 55%),
    var(--bg);
}
.console-frame { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-lg); overflow: hidden; }

.console-topbar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--bg); border-bottom: 1px solid var(--border); flex-wrap: wrap; row-gap: 6px; }
.console-dots { display: flex; gap: 6px; flex-shrink: 0; }
.console-dot { width: 8px; height: 8px; border-radius: 50%; }
.console-url { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.console-live { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0; animation: livePulse 2.2s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.console-tabs { display: flex; gap: 2px; padding: 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.console-tabs::-webkit-scrollbar { display: none; }
.console-tab {
  flex-shrink: 0; padding: 13px 14px 11px; font-size: 13.5px; font-weight: 700; color: var(--text-muted);
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.console-tab:hover { color: var(--text); }
.console-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }

.console-content { padding: 36px 32px 8px; }
.console-copy { max-width: 760px; margin-bottom: 30px; }
.console-copy h1 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.12; margin: 0 0 16px; font-weight: 800; letter-spacing: -.8px; color: var(--text); }
.console-copy h1 .accent {
  color: var(--primary);
  background: linear-gradient(180deg, transparent 62%, var(--primary-light) 62%);
  padding: 0 3px;
  border-radius: var(--r-xs);
}
.console-copy .lead { font-size: 17px; color: var(--text-secondary); margin: 0 0 20px; max-width: 640px; }
.console-trial-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  background: rgba(229,98,0,.08); border: 1px solid rgba(229,98,0,.3); color: #A34600;
  padding: 8px 14px; border-radius: var(--r-xs); font-size: 13px; font-weight: 700;
}
.console-actions { display: flex; gap: 12px 20px; flex-wrap: wrap; align-items: center; }
/* Второстепенный путь в демо рядом с главной кнопкой (2026-10-17): текстовая ссылка вместо второй кнопки. */
.demo-text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.demo-text-link:hover { text-decoration-thickness: 2px; }
.console-cta-note { margin: 12px 0 0; font-size: 13px; color: var(--text-secondary); }

/* KPI row + mini chart sit side by side: the row's real job is showing this is genuinely the
   product's own dashboard data, not three interchangeable gray stat boxes — each tile now carries
   the color of what it actually reports, and a real 7-bar trend sits beside them as proof the
   number came from a series, not a static claim. */
.console-data { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; margin-bottom: 20px; align-items: stretch; }
@media (max-width: 700px) { .console-data { grid-template-columns: 1fr; } }
.console-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* До 560px выручка во всю ширину, прибыль и маржа рядом (2026-10-17): при сетке 1fr 1fr от 481 до 560px маржа стояла одна, рядом пустая клетка. */
@media (max-width: 560px) { .console-kpis { grid-template-columns: 1fr 1fr; } .console-kpis .kpi:first-child { grid-column: 1 / -1; } }
.kpi { border: 1px solid var(--border); border-radius: var(--r); padding: 13px 14px; }
.kpi b { display: block; font-size: 24px; font-weight: 700; font-family: var(--font-heading); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.kpi span { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.kpi-revenue { background: var(--bg); }
.kpi-profit { background: var(--success-light); border-color: var(--success-border); } .kpi-profit b { color: var(--success); }
.kpi-margin { background: var(--primary-light); border-color: rgba(94,43,154,.28); } .kpi-margin b { color: var(--primary); }

.console-chart { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 13px 14px 10px; display: flex; flex-direction: column; }
.console-chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.console-chart-title { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.console-chart-delta { font-size: 12px; font-weight: 800; color: var(--success); font-family: var(--font-mono); }
.console-chart svg { width: 100%; height: 64px; flex: 1; }
/* график в скетч-стиле (2026-09-28): свои пропорции вместо растягивания, штриховка-тень у столбиков */
.console-chart svg.sk-chart { height: auto; flex: none; aspect-ratio: 300 / 130; overflow: visible; }

/* маленькие рисунки в углах плашек KPI и обводка "от руки" вокруг чистой прибыли */
.kpi { position: relative; }
.kpi-doodle { position: absolute; right: 8px; bottom: 6px; width: 30px; height: 30px; }
.kpi-doodle svg { width: 100%; height: 100%; overflow: visible; }
.kpi-doodle.ill-sk svg .i { stroke-width: 1.6; } .kpi-doodle.ill-sk svg .t { stroke-width: 1.1; }
.kpi-profit b { position: relative; display: inline-block; }
.kpi-profit b + span { display: block; }
.kpi-profit b::after {
  content: ""; position: absolute; left: -8px; right: -10px; top: -6px; bottom: -4px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M9 23C9 8 58 3 99 6c17 2 19 19 6 26-19 9-79 9-96-3C1 23 16 11 42 8' fill='none' stroke='%233F9A4E' stroke-width='1.7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.console-insight-rows { display: flex; flex-direction: column; gap: 8px; padding-bottom: 28px; }

/* 2026-09-26: на широком экране текст и цифры стоят рядом, чтобы выручка, прибыль и график были
   видны без прокрутки (раньше цифры начинались ниже края первого экрана). Инсайты - на всю ширину. */
@media (min-width: 1000px) {
  .console-content {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: 32px; align-items: center;
  }
  .console-copy { margin-bottom: 24px; }
  .console-copy h1 { font-size: clamp(32px, 3.2vw, 44px); }
  .console-data { grid-template-columns: 1fr; margin-bottom: 24px; }
  .console-kpis { grid-template-columns: 1.35fr 1.15fr .9fr; }
  .console-kpis .kpi b { font-size: clamp(17px, 1.6vw, 22px); white-space: nowrap; }
  .console-insight-rows { grid-column: 1 / -1; }
}
.insight-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--r); }
.insight-row-icon { width: 28px; height: 28px; border: 1.5px solid var(--sk-ink); border-radius: var(--sk-r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.insight-row-icon svg { width: 15px; height: 15px; }
.insight-row-body { min-width: 0; }
/* мини-картинка справа в строке инсайта (первый экран); на телефоне скрыта */
.insight-row-ill { width: 84px; aspect-ratio: 96 / 56; margin-left: auto; flex-shrink: 0; align-self: center; }
@media (max-width: 640px) { .insight-row-ill { display: none; } }
.insight-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.insight-row-title { font-weight: 700; font-size: 13.5px; }
.insight-row-badge { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 2px 7px; border-radius: var(--r-xs); }
.insight-row p { margin: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.sev-crit { background: var(--danger-light); } .sev-crit .insight-row-icon { background: var(--sk-rose); color: var(--sk-ink); } .sev-crit .insight-row-badge { background: var(--danger-tint); color: var(--danger); }
.sev-warn { background: var(--warning-light); } .sev-warn .insight-row-icon { background: var(--sk-sun); color: var(--sk-ink); } .sev-warn .insight-row-badge { background: var(--warning-tint); color: var(--warning); }
.sev-opp  { background: var(--success-light); } .sev-opp  .insight-row-icon { background: var(--sk-mint); color: var(--sk-ink); } .sev-opp  .insight-row-badge { background: var(--success-tint); color: var(--success); }

/* larger showcase variant reused inside the Insights panel further down —
   same component, same tints, proving it's one system rather than two */
.insight-row--lg { padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid transparent; }
.insight-row--lg .insight-row-icon { width: 36px; height: 36px; }
.insight-row--lg .insight-row-icon svg { width: 18px; height: 18px; }
.insight-row--lg .insight-row-title { font-size: 15px; }
.insight-row--lg p { font-size: 13.5px; }
.sev-crit.insight-row--lg { border-color: var(--danger-border); } .sev-warn.insight-row--lg { border-color: var(--warning-border); } .sev-opp.insight-row--lg { border-color: var(--success-border); }

/* one graphic metaphor for the section's whole value prop: scattered raw sources → one flagged
   conclusion. Real content (the actual data sources MP Index reads), not decoration standing in
   for content — every chip names a real thing the product reads or produces. */
.insight-flow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 28px; }
.insight-flow-group { display: flex; gap: 8px; flex-wrap: wrap; }
.insight-flow-chip { background: var(--bg-card); border: 1px solid var(--border); border-radius: 100px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.insight-flow-arrow { color: var(--primary); flex-shrink: 0; }
.insight-flow-result { display: inline-flex; align-items: center; gap: 7px; background: var(--primary); color: #fff; border-radius: 100px; padding: 8px 16px 8px 12px; font-size: 12.5px; font-weight: 800; }
@media (max-width: 620px) { .insight-flow { flex-direction: column; align-items: flex-start; } .insight-flow-arrow { transform: rotate(90deg); } }

.console-statusbar { display: flex; gap: 20px; flex-wrap: wrap; padding: 16px 32px; background: var(--bg); border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-secondary); }
.console-statusbar span { display: flex; align-items: center; gap: 6px; }
.console-statusbar svg { color: var(--primary); }

/* ── Reveal-on-scroll: one authored moment, applied uniformly, disabled
   entirely for reduced-motion users rather than softened. ── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.16,.84,.44,1), transform .55s cubic-bezier(.16,.84,.44,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Sections ── */
.section { padding: 76px 0; }
.section-alt { background: linear-gradient(180deg, var(--primary-light) 0%, #fff 320px); }
.section-head { max-width: 680px; margin: 0 0 36px; }
.section-title { font-size: 28px; font-weight: 800; letter-spacing: -.4px; margin: 0 0 12px; }
.section-sub { color: var(--text-secondary); font-size: 15.5px; margin: 0; }

/* "MP Index коротко" — a receipt-style key/value strip, not a boxed card;
   short pairs are the format AI search and humans alike can quote whole
   (see the PHP comment above this block in landing.php). */
/* Сетка 3x2 (2026-10-17): при 6 пунктах во flex-ряду по 200px пятый ряд оставлял "Пробный период" одного во второй строке. */
.props-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 8px 4px; box-shadow: var(--sh); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.props-panel dl { margin: 0; padding: 16px 24px; border-right: 1px dashed var(--border); border-bottom: 1px dashed var(--border); }
.props-panel dl:nth-child(3n) { border-right: none; }
.props-panel dl:nth-last-child(-n+3) { border-bottom: none; }
.props-panel dt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); margin-bottom: 4px; }
.props-panel dd { font-size: 13.5px; font-weight: 600; color: var(--text); margin: 0; line-height: 1.45; }
.props-panel a { color: var(--primary); text-decoration: underline; }
@media (max-width: 700px) {
  .props-panel { grid-template-columns: 1fr 1fr; }
  .props-panel dl, .props-panel dl:nth-last-child(-n+3) { border-right: none; border-bottom: 1px dashed var(--border); }
  .props-panel dl:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 420px) {
  .props-panel { grid-template-columns: 1fr; }
  .props-panel dl:nth-last-child(2) { border-bottom: 1px dashed var(--border); }
}

/* reports panel — a scannable nav-style list, not uniform icon+heading+text
   cards: dividers only, no per-row border/shadow/radius shell */
.report-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
@media (max-width: 760px) { .report-list { grid-template-columns: 1fr; } }
.report-row { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); transition: background .15s; }
.report-row:hover { background: var(--bg); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: var(--r-sm); }
.report-icon { width: 34px; height: 34px; border: 1.5px solid var(--sk-ink); border-radius: var(--sk-r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.report-row h3 { font-size: 14px; margin: 0 0 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.report-row p { font-size: 12.5px; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.report-more { display: inline-block; font-size: 12px; font-weight: 600; color: var(--primary); text-decoration: none; margin-top: 4px; }
.report-more:hover { text-decoration: underline; }

/* Progressive disclosure for the last 12 of 20 report rows — same <details>/<summary> idiom the
   FAQ section already uses (.help-item below), not a new pattern. Every row stays in the DOM and
   crawlable when collapsed; grid-column spans both .report-list columns so the toggle reads as
   its own full-width row rather than sitting inside one column. */
.report-toggle { grid-column: 1 / -1; border-top: 1px dashed var(--border); }
.report-toggle summary {
  cursor: pointer; list-style: none; padding: 16px 0; text-align: center;
  font-weight: 700; font-size: 13px; color: var(--primary);
}
.report-toggle summary::-webkit-details-marker { display: none; }
.report-toggle summary::after { content: " ↓"; }
.report-toggle[open] summary::after { content: " ↑"; }
.report-toggle[open] summary { padding-bottom: 4px; }
.report-toggle .report-row:first-of-type { border-top: 1px solid var(--border); }
.badge-new { display: inline-flex; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--orange-text); background: var(--orange-light); border: 1px solid var(--orange-border); border-radius: var(--r-xs); padding: 2px 6px; }
/* Отличается от .badge-new намеренно — нейтральный серый, а не оранжевый "Новое": сигнализирует
   "функция ещё не открыта для всех" (модуль в админ-превью), а не "только что запущено". */
.badge-soon { display: inline-flex; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 2px 6px; }
/* Функция тарифа "Профессиональный" (2026-10-11) - фирменный фиолетовый, тише "Новое". */
.badge-pro { display: inline-flex; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--primary); background: var(--primary-light, #ECE6F3); border: 1px solid rgba(94,43,154,.25); border-radius: var(--r-xs); padding: 2px 6px; vertical-align: middle; white-space: nowrap; }
/* плашки иконок в скетч-стиле (2026-09-28): пастельная заливка из --sk-*, рисованная рамка, иконка чернилами */
.ic-blue { background: var(--sk-lav); color: var(--sk-ink); }
.ic-green { background: var(--sk-mint); color: var(--sk-ink); }
.ic-orange { background: var(--sk-peach); color: var(--sk-ink); }
.ic-amber { background: var(--sk-sun); color: var(--sk-ink); }

/* product card showcase — the console shell zoomed into one SKU (left) paired with a
   receipt-style ledger of what's inside (right, reuses .lc-card rather than a new card-grid
   pattern); mirrors the hero's own two-column console-data proportions. */
.product-showcase { display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; align-items: stretch; }
@media (max-width: 860px) { .product-showcase { grid-template-columns: 1fr; } }
.product-mock { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-lg); overflow: hidden; }
.pm-body { padding: 20px 22px 18px; display: flex; flex-direction: column; flex: 1; }
.pm-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pm-photo { width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pm-title { flex: 1; min-width: 0; }
.pm-name { font-weight: 700; font-size: 13.5px; margin-bottom: 2px; }
.pm-sku { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.pm-badge { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; background: var(--success-light); color: var(--success); border: 1px solid var(--success-border); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 4px 9px; border-radius: 100px; }
.pm-body .console-kpis { margin-bottom: 14px; }
.pm-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.pm-chip { background: var(--bg); border: 1px solid var(--border); border-radius: 100px; padding: 5px 11px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.pm-chip.is-more { background: var(--primary-light); color: var(--primary); border-color: transparent; font-weight: 800; }
.pm-footer { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--border); display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-secondary); }
.product-showcase .lc-card { height: fit-content; }

/* insights spotlight */
.ins-note { max-width: 680px; margin: 0 0 24px; padding: 14px 18px; background: var(--primary-light); border-radius: var(--r); font-size: 13px; color: var(--primary-darker); }
.ins-note b { color: var(--primary); }
.ins-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 860px; }
@media (max-width: 640px) { .ins-cards { grid-template-columns: 1fr; } }

/* иллюстрации (img/landing/*.svg) встраиваются в DOM скриптом landing.php, чтобы работали
   классы и переменные скетч-стиля (.ill-sk, --sk-* ниже) */
.ill svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes ill-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ill-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.84); } }
.ill .ill-float { animation: ill-float 3.6s ease-in-out infinite; }
.ill .ill-pulse { transform-box: fill-box; transform-origin: center; animation: ill-pulse 2.4s ease-in-out infinite; }
.ill[data-ill-armed] .ill-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .15s; }
.ill[data-ill-armed][data-ill-inview] .ill-draw { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .ill .ill-float, .ill .ill-pulse { animation: none; }
  .ill[data-ill-armed] .ill-draw { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}

/* "Управление магазином" (#control, 2026-09-28) — рисованные иллюстрации в стиле скетча:
   карандашный контур (.i/.t, фильтр шума внутри SVG) и акварельная заливка пастельными тонами.
   Классы действуют только внутри .ill-sk, остальные иллюстрации лендинга не затрагивают. */
:root {
  --sk-ink: #2B2838; --sk-paper: #FFFDF8;
  --sk-lav: #D5C4EE; --sk-mint: #C3E6CA; --sk-peach: #F7CFB0; --sk-sun: #F3DE95; --sk-sky: #C6DBF0; --sk-rose: #F2C4C0;
  --sk-sand: #E3D3B8; --sk-sand-l: #EFE3CE; --sk-sand-d: #D2BC98;
  --sk-violet: #8A5CC7; --sk-green: #3F9A4E; --sk-orange: #E56200;
  --sk-bg-sky: #EAF2FA; --sk-bg-peach: #FCEEE3; --sk-bg-mint: #E8F5EA; --sk-bg-sun: #FBF4DA; --sk-bg-lav: #F1EBF9; --sk-bg-rose: #FBEBE9;
  --sk-shadow: rgba(43,40,56,.08); --sk-shadow-violet: rgba(94,43,154,.28); --sk-strike: rgba(43,40,56,.45);
  /* неровные скругления — рамка выглядит нарисованной от руки (намеренно вне шкалы радиусов) */
  --sk-r-sm: 11px 13px 10px 14px / 13px 10px 14px 11px; --sk-r-md: 14px 17px 13px 18px / 17px 13px 18px 14px; --sk-r-lg: 16px 22px 14px 20px / 20px 14px 22px 16px;
}
.ill-sk svg .i { fill: none; stroke: var(--sk-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ill-sk svg .t { fill: none; stroke: var(--sk-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ill-sk svg .k { fill: var(--sk-ink); }
.ill-sk svg .fp { fill: var(--sk-paper); }
.ill-sk svg .lav { fill: var(--sk-lav); } .ill-sk svg .mint { fill: var(--sk-mint); } .ill-sk svg .peach { fill: var(--sk-peach); }
.ill-sk svg .sun { fill: var(--sk-sun); } .ill-sk svg .sky { fill: var(--sk-sky); } .ill-sk svg .rose { fill: var(--sk-rose); }
.ill-sk svg .sand { fill: var(--sk-sand); } .ill-sk svg .sand-l { fill: var(--sk-sand-l); } .ill-sk svg .sand-d { fill: var(--sk-sand-d); }
.ill-sk svg .vio { fill: var(--sk-violet); } .ill-sk svg .grn { fill: var(--sk-green); } .ill-sk svg .org { fill: var(--sk-orange); }
/* маленькие иконки шагов (64px) — контур тоньше, иначе линии сливаются */
.step-ill.ill-sk svg .i { stroke-width: 1.7; } .step-ill.ill-sk svg .t { stroke-width: 1.2; }

.ctl-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; margin-bottom: 40px; }
.ctl-head .section-head { margin: 0; }
.ctl-kicker { display: inline-block; font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; }
.ctl-shift { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; font-size: 13px; }
.ctl-shift span { padding: 7px 13px; border-radius: 100px; border: 1.5px solid var(--sk-ink); font-weight: 600; }
.ctl-shift .was { background: var(--sk-sand-l); color: var(--text-secondary); text-decoration: line-through; text-decoration-color: var(--sk-strike); }
.ctl-shift .now { background: var(--sk-mint); color: var(--text); }
.ctl-shift .arr { border: none; padding: 0; color: var(--primary); display: inline-flex; }
.ctl-hub { width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 580 / 360; }
@media (max-width: 900px) { .ctl-head { grid-template-columns: 1fr; gap: 20px; } .ctl-hub { max-width: 460px; } }

/* Карточки идут "змейкой", как на схеме-процессе: 1 → 2 → 3, поворот вниз, 4 → 5 → 6. Стрелки и
   поворот видны только в три колонки; на планшете и телефоне карточки просто идут сеткой. */
.ctl-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 44px; row-gap: 0; }
.ctl-card {
  position: relative; display: flex; flex-direction: column; padding: 8px 20px 20px;
  border: 1.5px solid var(--sk-ink); border-radius: var(--sk-r-lg);
  box-shadow: 3px 4px 0 var(--sk-shadow);
}
.ctl-card::after {
  content: ""; position: absolute; top: 50%; right: -40px; width: 36px; height: 22px; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3Cpath d='M2 12c9-4 17 3 29-1M24 4l8 7-9 6' fill='none' stroke='%232B2838' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ctl-card:nth-of-type(3n)::after { display: none; }
.ctl-sky { background: var(--sk-bg-sky); } .ctl-peach { background: var(--sk-bg-peach); } .ctl-mint { background: var(--sk-bg-mint); }
.ctl-sun { background: var(--sk-bg-sun); } .ctl-lav { background: var(--sk-bg-lav); } .ctl-rose { background: var(--sk-bg-rose); }
.ctl-ill { aspect-ratio: 200 / 120; margin: 0 -6px 4px; }
.ctl-card h3 { font-family: var(--font-heading); font-size: 17px; margin: 0 0 6px; line-height: 1.3; }
.ctl-card p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; margin: 0 0 12px; }
.ctl-acts { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ctl-acts li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; }
.ctl-acts li svg { color: var(--success); margin-top: 1px; }
.ctl-card .report-more { margin-top: auto; }
.ctl-turn { grid-column: 1 / -1; height: 52px; }
.ctl-turn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ctl-turn path { fill: none; stroke: var(--sk-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ctl-note { display: flex; gap: 10px; align-items: flex-start; max-width: 780px; margin: 28px 0 0; padding: 14px 18px; background: var(--bg-card); border: 1px dashed var(--border); border-radius: var(--r); font-size: 13px; color: var(--text-secondary); }
.ctl-note svg { color: var(--primary); margin-top: 1px; }
.ctl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 22px 0 0; font-size: 13px; color: var(--text-secondary); }
.ctl-legend a { color: var(--primary); text-decoration: underline; }
.connect-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
@media (max-width: 560px) { .connect-cta .btn { width: 100%; justify-content: center; text-align: center; } }
@media (max-width: 900px) {
  .ctl-flow { grid-template-columns: 1fr 1fr; gap: 16px; }
  .ctl-card::after, .ctl-turn { display: none; }
}
@media (max-width: 600px) { .ctl-flow { grid-template-columns: 1fr; } }

/* connect panel — нумерованные шаги слева (порядок обязателен), итоговая иллюстрация справа */
.connect-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { .connect-grid { grid-template-columns: 1fr; gap: 28px; } }
.stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.step { display: flex; gap: 16px; align-items: flex-start; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 18px; }
.step-ill { width: 64px; height: 64px; flex: none; }
.step-num { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.step h3 { font-size: 15.5px; margin: 0 0 4px; }
.step p { font-size: 13.5px; color: var(--text-secondary); margin: 0; }
.connect-ill { width: 100%; max-width: 540px; margin: 0 auto; aspect-ratio: 480 / 320; }
@media (max-width: 480px) { .step { padding: 12px 14px; gap: 12px; } .step-ill { width: 48px; height: 48px; } }

/* comparison — two receipt-style columns instead of a wide table */
.ledger-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
@media (max-width: 760px) { .ledger-compare { grid-template-columns: 1fr; } .lc-vs { margin: 8px auto; } }
.lc-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.lc-card.hl { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glass); }
/* блок сравнения в скетч-стиле: рисованные рамки и картинка под заголовком карточки */
.ledger-compare .lc-card { border: 1.5px solid var(--sk-ink); border-radius: var(--sk-r-lg); box-shadow: 3px 4px 0 var(--sk-shadow); }
.ledger-compare .lc-card.hl { border-color: var(--sk-ink); box-shadow: 4px 5px 0 var(--sk-shadow-violet); }
.lc-ill { aspect-ratio: 480 / 170; padding: 8px 10px 0; border-bottom: 1px dashed var(--border); background: var(--sk-paper); }
.lc-head { padding: 16px 20px; font-weight: 800; font-size: 13.5px; background: var(--bg); border-bottom: 1px solid var(--border); }
.lc-card.hl .lc-head { background: var(--primary); color: #fff; }
.lc-row { display: flex; flex-direction: column; gap: 3px; padding: 13px 20px; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.lc-row:last-child { border-bottom: none; }

/* Progressive disclosure for each ledger card's last 3 (of 8) rows — same <details> idiom as
   .report-toggle/.help-item. Independent per card (a seller may expand only the MP Index side),
   an acceptable trade-off for real px savings since both start equally collapsed. */
.lc-more summary {
  cursor: pointer; list-style: none; padding: 13px 20px; font-size: 11px; font-weight: 700;
  color: var(--primary); text-align: center;
}
.lc-more summary::-webkit-details-marker { display: none; }
.lc-more summary::after { content: " ↓"; }
.lc-more[open] summary::after { content: " ↑"; }
.lc-more .lc-row:last-child { border-bottom: none; }
.lc-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); font-weight: 700; }
.lc-val { color: var(--text-secondary); }
.lc-val.chk { color: var(--success); font-weight: 600; }
.lc-val.chk::before { content: "✓ "; font-weight: 800; }
.lc-val.dash::before { content: "— "; color: var(--text-muted); }
.lc-vs {
  align-self: center; width: 40px; height: 40px; border: 1.5px solid var(--sk-ink); border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%; background: var(--sk-sun); color: var(--sk-ink);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; font-family: var(--font-mono);
}

/* faq / help panel — one unified list shell instead of a bordered card per
   question */
.help-list { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); max-width: 780px; overflow: hidden; }
.help-item { border-bottom: 1px solid var(--border); padding: 0 24px; }
.help-item:last-child { border-bottom: none; }
.help-item summary {
  cursor: pointer; list-style: none; padding: 18px 28px 18px 0; position: relative;
  font-weight: 700; font-size: 14.5px; color: var(--text);
}
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary::after {
  content: "+"; position: absolute; right: 0; top: 15px; font-size: 20px; font-weight: 400;
  color: var(--primary); line-height: 1; transition: transform .15s ease;
}
.help-item[open] summary::after { transform: rotate(45deg); }
.help-item summary:hover { color: var(--primary); }
.help-item p { margin: 0 0 18px; color: var(--text-secondary); font-size: 13.5px; max-width: 66ch; }
.help-item p a { color: var(--primary); font-weight: 600; }

/* задачи селлера — текстовый блок под поисковые запросы; с 2026-09-25 карточки с
   иллюстрацией-шапкой, чтобы абзацы не читались сплошной стеной текста */
.seo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.seo-block { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 10px 22px 22px; }
.seo-block .report-more { margin-top: auto; }
.seo-ill { aspect-ratio: 480 / 280; margin: 0 -8px 6px; }
.seo-block-signal { background: var(--primary-light); padding-top: 22px; }
.seo-signal-icon { width: 48px; height: 48px; border: 1.5px solid var(--sk-ink); border-radius: var(--sk-r-md); background: var(--sk-sun); color: var(--sk-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.seo-block h3 { font-size: 16px; margin: 0 0 8px; line-height: 1.35; font-family: var(--font-heading); }
.seo-block p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 10px; }
.seo-outro { max-width: 780px; margin: 36px 0 0; font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.seo-outro a { color: var(--primary); font-weight: 600; }
@media (max-width: 900px) { .seo-grid { grid-template-columns: 1fr 1fr; } }
/* Карусель на телефоне (2026-10-17): шесть карточек столбиком занимали ~3300 px. Листаются вбок
   внутри своего контейнера (страница не получает горизонтальной прокрутки), край следующей карточки
   виден как подсказка. Текст и картинки на месте, на десктопе сетка без изменений. */
.seo-swipe-hint { display: none; }
@media (max-width: 600px) {
  .seo-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -24px; padding: 0 24px 6px; scroll-padding: 0 24px; }
  .seo-grid::-webkit-scrollbar { display: none; }
  .seo-grid .seo-block { flex: 0 0 84%; scroll-snap-align: start; }
  .seo-swipe-hint { display: block; margin: -6px 0 14px; font-size: 13px; color: var(--text-muted); }
}
@media (max-width: 560px) { .seo-grid { margin: 0 -16px; padding: 0 16px 6px; scroll-padding: 0 16px; } }

/* final cta — the page's one deliberately saturated, full-bleed moment,
   arriving after a mostly restrained, paper-and-white console read */
.final-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--primary-darker), var(--primary));
  border-radius: var(--r-xl); padding: 56px 40px; text-align: center; color: #fff;
}
.final-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 40px);
}
.final-cta > * { position: relative; }
/* текст слева, иллюстрация из стеклянных панелей справа; на телефоне иллюстрация скрыта
   (и скрипт её не грузит — см. проверку offsetParent в landing.php), текст снова по центру */
.final-cta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center; text-align: left; }
.cta-ill { width: 100%; max-width: 400px; margin: -24px auto; aspect-ratio: 420 / 400; }
@media (max-width: 760px) {
  .final-cta { grid-template-columns: 1fr; text-align: center; }
  .cta-ill { display: none; }
}
.final-cta h2 { font-size: 27px; margin: 0 0 12px; font-weight: 800; }
.final-cta p { color: rgba(255,255,255,.85); margin: 0 0 26px; font-size: 15px; }
.final-cta-contact { margin: 18px 0 0 !important; font-size: 13px !important; color: rgba(255,255,255,.7) !important; }
.final-cta-contact a { color: #fff; text-decoration: underline; }

/* footer: shared with blog/calc via .blog-footer (css/blog.css) + templates/public_footer.php */

/* ── Responsive overrides (must stay last for cascade priority) ── */
@media (max-width: 900px) {
  .console-content { padding: 30px 24px 4px; }
  .console-statusbar { padding: 14px 24px; }
}
@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .console-shell { padding: 24px 0 40px; }

  /* Chrome-before-content — the topbar's "Синхронизация в реальном времени" wraps to its own
     line here (doesn't fit next to dots+url), adding ~30px purely decorative height before the
     headline even starts, and it's a pure duplicate — the exact same claim already sits in
     .console-statusbar a few lines below the fold. Drop it only here; the dots+url chrome (the
     actual "this is the product's own console" signal) and the tab strip (real, scroll-tracking
     navigation, kept as-is) stay. Desktop keeps the live indicator untouched. */
  .console-topbar { padding: 9px 14px; }
  .console-live { display: none; }
  .console-tab { padding: 10px 11px 9px; font-size: 12.5px; }
  .console-content { padding: 22px 20px 4px; }
  .console-copy { margin-bottom: 22px; }
  .console-copy h1 { font-size: 25px; margin-bottom: 12px; }
  .console-copy .lead { font-size: 15px; margin-bottom: 16px; }
  .console-trial-pill { margin-bottom: 16px; }

  .console-actions { flex-direction: column; align-items: stretch; }
  .console-actions .btn { width: 100%; }
  .console-actions .demo-text-link { justify-content: center; text-align: center; }
  .console-kpis { grid-template-columns: 1fr 1fr; }
  .console-statusbar { flex-direction: column; gap: 10px; }
  .section { padding: 48px 0; }
  .section-title { font-size: 21px; }
  .final-cta { padding: 40px 22px; }
  .final-cta h2 { font-size: 22px; }

  /* Lite hero for cold paid-ad mobile traffic (utm_source present on this exact request, see
     $isAdTraffic in landing.php) — mobile ad visits bounce at ~2x the rate of desktop for the
     same campaigns (64% vs 29%, see project memory), while page_views/visit stay ~1 on both
     devices: the drop-off is in the first seconds, before the countup/chart/insight rows even
     finish animating in, not in reading depth. Desktop is untouched (its own bounce rate is
     already much lower) and organic/direct/internal mobile visits keep the full hero — this only
     strips the two heaviest secondary blocks for a visitor who just clicked a paid ad on a phone. */
  .console-shell-lite .console-data,
  .console-shell-lite .console-insight-rows { display: none; }
}

/* Ссылка на демо-кабинет под кнопкой финального призыва и заметка о завершенной демо-сессии (2026-09-26) */
.final-cta-demo { margin: 14px 0 0 !important; font-size: 14px !important; }
.final-cta-demo a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.console-demo-note { background: var(--bg-card); border-color: var(--border); color: var(--text); }

/* Демо-магазин (#demo): светлая плашка бренда, слева текст и кнопка, справа макет окна кабинета */
.demo-box { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 40px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--primary-light) 0%, #fff 70%); border: 1px solid rgba(94,43,154,.16); }
.demo-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--primary); margin-bottom: 10px; }
.demo-copy .section-title { text-align: left; margin-bottom: 12px; }
.demo-copy .section-sub { text-align: left; margin: 0 0 18px; max-width: none; }
.demo-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.demo-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.demo-list li svg { flex-shrink: 0; color: var(--primary); margin-top: 1px; }
.demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.demo-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.demo-note svg { flex-shrink: 0; }
.demo-calc { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--border); font-size: 13.5px; color: var(--text-secondary); }
.demo-calc a { color: var(--primary); font-weight: 700; text-decoration: underline; }
.demo-preview { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); overflow: hidden; }
.demo-preview-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: #fff; }
.demo-dots { display: inline-flex; gap: 5px; }
.demo-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); display: block; }
.demo-preview-title { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-preview-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.demo-preview-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .3px; }
@media (max-width: 900px) {
  .demo-box { grid-template-columns: 1fr; padding: 28px 22px; gap: 28px; }
}
@media (max-width: 600px) {
  .demo-list { grid-template-columns: 1fr; }
  .demo-actions .btn { width: 100%; justify-content: center; text-align: center; }
}

/* Сгенерированные акварельные иллюстрации с персонажами MP Index (2026-10-16): ill() выводит
   <img> из img/landing/<name>.webp вместо SVG; контейнер держит прежние пропорции слота. */
.ill-img { overflow: hidden; border-radius: var(--r); }
.ill-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.console-hero-img { margin-top: 14px; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; }
.console-hero-img picture { display: contents; }
.console-hero-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ins-ill { max-width: 720px; margin: 0 auto 24px; aspect-ratio: 16 / 9; }
.lc-ill.ill-img { padding: 0; border-radius: 0; }
/* Значки (2026-10-16): акварельные иконки с прозрачным фоном - вписываются целиком, без рамки. */
.insight-row-ill.ill-img, .step-ill.ill-img { border-radius: 0; overflow: visible; }
.insight-row-ill.ill-img img, .step-ill.ill-img img { object-fit: contain; }
.kpi-doodle-img { width: 34px; height: 34px; }
.kpi-doodle-img img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ── Персонажи MP Index на лендинге (2026-10-16) ─────────────────────────────────────────── */
/* Реплика персонажа: аватар + пузырь (landingSay()). */
.say { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 4px; max-width: 640px; }
.say .mp-avatar { box-shadow: 0 2px 8px rgba(26,26,31,.12); border: 2px solid #fff; }
.say-bubble {
  position: relative; margin: 4px 0 0; padding: 10px 14px; background: #fff; border: 1.5px solid var(--sk-ink, #2B2838);
  border-radius: 14px 14px 14px 4px; font-size: 14px; line-height: 1.5; color: var(--text);
  box-shadow: 3px 3px 0 rgba(94,43,154,.12);
}
.say-bubble::before {
  content: ""; position: absolute; left: -8px; top: 12px; width: 12px; height: 12px; background: #fff;
  border-left: 1.5px solid var(--sk-ink, #2B2838); border-bottom: 1.5px solid var(--sk-ink, #2B2838); transform: rotate(45deg);
}
.demo-copy .say { margin-bottom: 10px; }

/* Экипаж: три карточки с фигурами в полный рост. Бумажный фон рисунка растворяется
   в карточке через multiply. */
.crew-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.crew-card {
  background: var(--bg-card, #fff); border: 1.5px solid var(--border); border-radius: var(--r-lg, 14px);
  padding: 18px 20px 20px; text-align: center; box-shadow: 0 2px 10px rgba(26,26,31,.05);
}
.crew-card img { display: block; height: 210px; width: auto; margin: 0 auto 10px; }
.crew-role {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
}
.crew-seller .crew-role { background: var(--sk-sky, #d8e8f6); color: #1f4f7a; }
.crew-pilot .crew-role  { background: var(--primary-light, #efe7f8); color: var(--primary); }
.crew-robot .crew-role  { background: var(--success-light, #e3f3e5); color: var(--success-dark, #14661f); }
.crew-card h3 { margin: 0 0 6px; font-size: 18px; }
.crew-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
@media (max-width: 760px) {
  .crew-grid { grid-template-columns: 1fr; gap: 14px; }
  .crew-card { display: grid; grid-template-columns: 96px 1fr; gap: 0 14px; text-align: left; align-items: center; padding: 14px; }
  .crew-card img { grid-row: 1 / span 3; height: 150px; margin: 0; }
  .crew-role { justify-self: start; }
}

/* FAQ: список слева, иллюстрация справа и прилипает при прокрутке. */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.faq-aside { position: sticky; top: 90px; }
.faq-aside img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.faq-aside .say { margin-top: 6px; }
.faq-aside .say-bubble { font-size: 13px; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; } .faq-aside { display: none; } }

/* Финальный призыв: картинка как открытка на фиолетовом фоне. */
.final-cta .cta-ill.ill-img {
  aspect-ratio: auto; margin: 0 auto; padding: 10px 10px 34px; background: #fff; border-radius: 6px;
  transform: rotate(2.5deg); box-shadow: 0 14px 30px rgba(20, 8, 40, .35); overflow: visible;
}
.final-cta .cta-ill.ill-img img { height: auto; border-radius: 2px; }

/* «Сигналы» в задачах: картинка вместо значка колокольчика. */
.seo-block-signal .seo-ill.ill-img { margin-bottom: 6px; }
.seo-block-signal .seo-ill.ill-img img, .faq-aside img { mix-blend-mode: multiply; }
.ins-ill.ill-img img { mix-blend-mode: multiply; } .ins-ill.ill-img { overflow: visible; }

/* Правки 2026-10-16 (вторая итерация по замечаниям):
   1) крупные сцены на сером фоне секции: белый фон рисунка растворяется (multiply), края мягко
      затухают, чтобы не было видно прямоугольника картинки; */
.ctl-hub.ill-img, .connect-ill.ill-img { overflow: visible; border-radius: 0; }
.ctl-hub.ill-img img, .connect-ill.ill-img img {
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
}
/* 2) «Сравнение»: картинка целиком, без обрезки по пропорции слота; */
.lc-ill.ill-img { aspect-ratio: auto; }
.lc-ill.ill-img img { height: auto; }
/* 3) вместо кружка «VS» - пилот, указывающий на карточку MP Index. */
.lc-vs.lc-vs-avatar {
  width: auto; height: auto; border: none; background: none; margin: 0 -18px; position: relative; z-index: 2;
}
.lc-vs.lc-vs-avatar .mp-avatar { border: 3px solid #fff; box-shadow: 0 6px 18px rgba(26, 26, 31, .18); }
@media (max-width: 760px) { .lc-vs.lc-vs-avatar { margin: -14px auto; } }
/* Акварельные значки списка отчетов (repIcon(), 2026-10-16): без рамки и подложки. */
.report-icon.report-icon-img { width: 44px; height: 44px; border: none; background: none; border-radius: 0; }
.report-icon.report-icon-img img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Акварельные значки вместо линейных (wic(), 2026-10-16): рамка и подложка у контейнеров убраны. */
.insight-row-icon:has(.wic), .pm-photo:has(.wic) { border: none; background: none !important; width: auto; height: auto; }
.pm-photo:has(.wic) { width: 52px; height: 52px; background: var(--bg) !important; border: 1px solid var(--border); }
.pm-badge .wic, .console-trial-pill .wic, .demo-kicker .wic, .demo-note .wic, .ctl-note .wic { vertical-align: middle; }
.demo-list li .wic { margin-top: -2px; }
.insight-flow-result .wic { filter: drop-shadow(0 0 1px #fff); }
/* Овал-«обводка» вокруг суммы прибыли налезал на цифры - убран, сумма выделена цветом и значком. */
.kpi-profit b::after { display: none; }
.ins-ill.ill-img img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}

/* Короткая мобильная версия (2026-10-17, разбор вместе с Nano Banana). На телефоне скрыты картинки и
   блоки, которые повторяют соседние: строки-инсайты первого экрана (их показывают "Демо" и "Инсайты"),
   иллюстрации секций, реплики персонажей, секция "Экипаж". Тексты и заголовки секций остаются, на
   десктопе ничего не меняется. Было ~18 500 px. */
@media (max-width: 600px) {
  .console-hero-img, .console-insight-rows { display: none; }
  #demo .say, #demo .demo-preview { display: none; }
  #crew { display: none; }
  .ctl-hub, .ctl-ill, .ctl-turn { display: none; }
  .ctl-head { margin-bottom: 4px; }
  #reports .say { display: none; }
  .ins-ill, #insights .insight-flow, #insights .ins-note { display: none; }
  .connect-ill { display: none; }
  .lc-ill, .lc-vs { display: none; }
  .ledger-compare { gap: 14px; }
}

/* Зона нажатия на телефоне не меньше 44px (2026-10-17, разбор по чеклисту landing-page-design):
   ссылки "... →" в карточках были 19px в высоту, вкладки консоли 40px. Ссылки внутри предложений
   не трогаем - для них это не требуется. */
@media (max-width: 600px) {
  .report-more { display: inline-flex; align-items: center; min-height: 44px; }
  .console-tab { padding-top: 15px; padding-bottom: 13px; }
  .lc-more summary { min-height: 44px; }
  .final-cta-demo a { display: inline-block; padding: 12px 0; }
  .m-sticky-cta .btn { min-height: 44px; }
  .m-sticky-demo { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Кнопка внизу экрана на телефоне: справа место под кнопкой чата. */
.m-sticky-cta { position: fixed; left: 12px; right: 74px; bottom: 12px; z-index: 850; display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); }
.m-sticky-cta[hidden] { display: none; }
.m-sticky-cta .btn { flex: 1 1 auto; justify-content: center; text-align: center; padding: 11px 12px; font-size: 14px; }
.m-sticky-demo { flex-shrink: 0; padding: 10px 8px; font-size: 13.5px; font-weight: 700; color: var(--primary); text-decoration: none; }
/* От 481 до 600px кнопка чата показывает подпись "Задать вопрос" и шире круглой (guest_chat_widget.css). */
@media (min-width: 481px) { .m-sticky-cta { right: 200px; } }

/* Плашки KPI на телефоне (2026-10-17): три крупные карточки с картинками занимали ~250 px и не
   помещались (сумма прибыли переносилась, подпись обрезалась картинкой). До 560px - одна рамка,
   строки "подпись слева, число справа", без картинок. Касается первого экрана и карточки товара. */
@media (max-width: 560px) {
  .console-kpis { display: block; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-card); overflow: hidden; }
  .console-kpis .kpi { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border: 0; border-radius: 0; padding: 9px 12px; background: none; }
  .console-kpis .kpi + .kpi { border-top: 1px solid var(--border); }
  .console-kpis .kpi b { order: 2; display: block; font-size: 16px; white-space: nowrap; letter-spacing: -.2px; }
  .console-kpis .kpi > span { order: 1; display: block; font-size: 12px; }
  .console-kpis .kpi > span.kpi-doodle { display: none; }
}

/* Посыл первого экрана на телефоне (2026-10-17, вместе с Nano Banana). До 600px: короткий подзаголовок
   и три пункта вместо длинного .lead, без отдельной плашки "10 дней бесплатно" (срок уже в кнопке),
   разбор одного заказа вместо плашек выручки/прибыли, одна строка доверия вместо четырех строк статуса. */
.m-only { display: none; }
@media (max-width: 600px) {
  .m-only { display: revert; }
  .d-only { display: none; }
  .console-copy .lead,
  .console-trial-pill:not(.console-demo-note),
  .console-data,
  .console-statusbar { display: none; }
  .console-copy .lead-m { font-size: 16px; line-height: 1.45; color: var(--text); margin: 0 0 12px; }
  .m-benefits { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; }
  .m-benefits li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.35; color: var(--text-secondary); }
  .m-benefits li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 12px; height: 7px; border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg); }
  .m-order { display: block; margin: 18px 0 20px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-card); overflow: hidden; }
  .m-order-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 12px; background: var(--bg); border-bottom: 1px solid var(--border); font-size: 13.5px; }
  .m-order-head span { font-size: 12px; color: var(--text-muted); }
  .m-order dl { margin: 0; }
  .m-order dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px; font-size: 14px; }
  .m-order dl > div + div { border-top: 1px solid var(--border); }
  .m-order dt { color: var(--text-secondary); }
  .m-order dt small { display: block; font-size: 11.5px; color: var(--text-muted); }
  .m-order dd { margin: 0; font-family: var(--font-heading); font-weight: 700; white-space: nowrap; }
  .m-order .neg dd { color: var(--danger, #dc3545); }
  .m-order .total { background: var(--success-light, #E8F5EA); }
  .m-order .total dt { color: var(--text); font-weight: 700; }
  .m-order .total dd { color: var(--success); font-size: 16px; }
  .m-order p { margin: 0; padding: 9px 12px; font-size: 12px; line-height: 1.4; color: var(--text-muted); border-top: 1px solid var(--border); }
}

/* До 380px текст крупной кнопки первого экрана ("Попробовать 10 дней бесплатно") шире кнопки и
   обрезался по краям - переносим на вторую строку. */
@media (max-width: 380px) {
  .console-actions .btn { white-space: normal; padding-left: 16px; padding-right: 16px; text-align: center; justify-content: center; }
}

/* Телефон (2026-10-17): подписи макета "Управление" и метки PRO/NEW были 9-10.5px. */
@media (max-width: 600px) {
    .lc-label { font-size: 11.5px; }
    .badge-new, .badge-pro, .badge-soon { font-size: 10.5px; }
}