/* Hallmark · genre: modern-minimal · macrostructure: Centered Marquee Hero + живые кадры панели
 * theme: «светлая полированная панель» · paper oklch(98.6% 0.004 250) · accent oklch(48% 0.20 264)
 * display: Manrope 600–700 · text: Inter · mono: JetBrains Mono (только коды, SKU, время)
 * Все экраны панели ниже — вёрстка по витрине kit/ (pk-*), не картинки. Мотор движения — прокрутка;
 * шаги сцен обратимы; журнал заказа — по времени, один раз. */

/* Шрифты лежат рядом со страницей, в /l/: с чужих серверов страница грузит только счётчик Яндекс Метрики. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/l/inter-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/l/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Знак ₽ (U+20BD) живёт в latin-ext: вырезан из того же Inter, 1,2 КБ, лежит прямо здесь. Manrope берёт его отсюда. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(data:font/woff2;base64,d09GMgABAAAAAASsABQAAAAACRwAAARBAAQAQgAAAAAAAAAAAAAAAAAAAAAAAAAAGyAcKj9IVkFSTj9NVkFSXgZgP1NUQVSBTicmADQvbBEIClx2MIFYATYCJAMICwYABCAFhWwHIAwHG9QHCI6E3ETrkwMteBM8//+d9fvcqnTYdI3YVDIgw/ZKqgdgZp6tX+IS1W4PgBMoSgL5mZQ/1uDhOVwcxgHWb2zh0Oby6XPYWmKBZoHE0yaN+TxNEwnMxh38b7nTwVYPcXjF8WlwiNZHAA8lysikKbMW4cIE0BoAYOLhRlKjpXWvt3spwA8AIADkgGkAAATIoAALDCeoJ3kSAD8/BABBoQDR7VwMKBQCgAsHtceO9+lkrPoJgIEd7BMigkSMLStis6cjgA8BSoTrKkABcvWqt8YzzWskiQMcNeZrwMWuoF7jhLriU+EwAIUJACgAgAVj9kKetNp6zPnk/1lwfabOBQTAXON4G7D4EAQXBpDDC4yl+voT26QRNs+oLYLE7PXd4keRZ7Dxmk2xxAa9tjnEWQRQ0kQaIAhIBcGOSl4ExSoZCxjVCiVJUI+SaI38atSqZdBbR6k3LAg2GAdOmiIYAJ8EAoDgHPaGvte8BwsvzvcMDw8+XVNTea0fP0ABBpDDQIAcJhYwMRGwWusy/MUk5JvkCjncuCb6LxOEJME4ACAiFUAQUgm8CFIFMhakGiQJUgPyK6QW1DKQOlCPgtSDYYE0gHEAEERr0gFQAJiAAkrAWABgAgCqwNyeJunHP/hA9r7/vse31bM9/fh777Hn3XcXkSa11cv/uOH36MEpgZ3z5gV2HJwWmYtjzOM43k694cMtnS9t29b58oebbjtyw483AIAAAkARBUARgLWlyLC8eBIWFX74/0r5+uuAXqWD5tEbb7zx6EQd1Cv1UD1U7r57ul6pq3SBLtqcBZ0jbA51rxL/b9/ry86+OMnd/4N77OrN0x9Icae7TW92QYAznKHgelda1qzqtL/XZdKaVgZ4lVeNP/9c2T2VG3iPd3mPqwl7nueVZeF38V7XeeeNHDnK9f5jV03U23XE93sg5Y/Pnrns1PmfBvR0PZ1P9yOAyYRXXF28Nr31N5fhAuDrTYeTddnLdMV/n3sedH0GGCgABP5RwGsh4b8rBpHuqRx+mea4lFkEUIR4WMGBAAAAYCJAbhQGYrqBJHQIHpIo0rgYg0o3YlLkQxzU+1mSQlFGaojgkwlU4JI5VJKTJVThkU6qSeNiavCJTS0Z2UMdLklST1YupAGP3EwjBbmXJlzyKn588q4z8OzaXzJRn35bxcVERNks1SpVqWdZJCrEMl0vW0icZZ64Pp1CNsa1AgbYovrEJVhGirLZ+iU0q1AhIsYWNWCD8Tbq06NilfdIqBCT9I4SvuMCIREDuq0XV2u8SpWqtFhgodkWavFB4y47MMRyL7HxCTF9elkCy4uD49Rv+rUabFRpQ6vC6FKhCU2zKcb0mmxLOm69WcTe7GS2kKCYAT0WCukRM0GfbsGwH+oBTNpVN+oyVz9bzEbrdbMsFLNNSJVaE01nm6B7wegvW6+XAQD/X8sJUu6Dog/eaZ4EAAA=) format("woff2");
  unicode-range: U+20BD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/l/manrope-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/l/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* JetBrains Mono — только латиница: моноширинным набраны коды, SKU и время, кириллицы в них нет. */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/l/jetbrainsmono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  /* бумага и текст страницы */
  --color-paper:       oklch(98.6% 0.004 250);
  --color-paper-2:     oklch(96.4% 0.006 250);
  --color-card:        oklch(99.7% 0.002 250);
  --color-rule:        oklch(90.5% 0.008 250);
  --color-rule-2:      oklch(85%   0.011 250);
  --color-track:       oklch(93%   0.012 250);
  --color-ink:         oklch(22%   0.021 262);
  --color-ink-2:       oklch(47%   0.016 258);
  --color-ink-3:       oklch(52%   0.015 256);
  /* бренд */
  --color-accent:      oklch(48%   0.200 264);
  --color-accent-hover:oklch(42%   0.190 264);
  --color-accent-2:    oklch(57%   0.185 260);
  --color-accent-soft: oklch(95%   0.025 262);
  --color-deep:        oklch(26%   0.100 262);
  --color-deep-2:      oklch(38%   0.160 263);
  --color-on-deep:     oklch(99%   0.005 250);
  --color-on-deep-2:   oklch(91%   0.030 255);
  --color-sky:         oklch(93%   0.035 255);
  --color-focus:       oklch(55%   0.190 262);

  /* панель: frontend/src/styles/theme.css, светлая тема; тона — lib/labels.ts (Tailwind 50 / 200 / 700) */
  --color-chart-rev:   #2a78d6;
  --color-chart-ord:   #1baf7a;
  --panel-bg:          oklch(99.7% 0.002 250);
  --panel-fg:          oklch(12.9% 0.042 264.7);
  --panel-primary:     oklch(20.8% 0.042 265.8);
  --panel-primary-fg:  oklch(98.4% 0.003 247.9);
  --panel-muted:       oklch(96.8% 0.007 247.9);
  --panel-muted-fg:    oklch(55.4% 0.046 257.4);
  --panel-border:      oklch(92.9% 0.013 255.5);
  --panel-destructive: oklch(57.7% 0.245 27.3);
  --panel-bubble-mine: oklch(89.2% 0.015 251);
  --panel-row-hover:   oklch(95.6% 0.018 256);
  --tone-green-bg:  oklch(97.9% 0.021 166.1); --tone-green-bd:  oklch(90.5% 0.093 164.2); --tone-green-fg:  oklch(50.8% 0.118 165.6);
  --tone-green-600: oklch(59.6% 0.145 163.2); --tone-green-500: oklch(69.6% 0.170 162.5);
  --tone-amber-bg:  oklch(98.7% 0.022 95.3);  --tone-amber-bd:  oklch(92.4% 0.120 95.7);  --tone-amber-fg:  oklch(55.5% 0.163 49);
  --tone-amber-600: oklch(66.6% 0.179 58.3);
  --tone-red-bg:    oklch(97.1% 0.013 17.4);  --tone-red-bd:    oklch(88.5% 0.062 18.3);  --tone-red-fg:    oklch(50.5% 0.213 27.5);
  --tone-red-600:   oklch(57.7% 0.245 27.3);  --tone-red-500:   oklch(63.7% 0.237 25.3);
  --tone-blue-bg:   oklch(97.7% 0.013 236.6); --tone-blue-bd:   oklch(90.1% 0.058 230.9); --tone-blue-fg:   oklch(50%   0.134 242.7);
  --tone-violet-bg: oklch(96.9% 0.016 293.8); --tone-violet-bd: oklch(89.4% 0.057 293.3); --tone-violet-fg: oklch(49.1% 0.270 292.6);
  --tone-orange-600:oklch(64.6% 0.222 41.1);
  --shadow-p-xs: 0 1px 2px oklch(25% 0.03 262 / .05);
  --shadow-p-sm: 0 1px 3px oklch(25% 0.03 262 / .10), 0 1px 2px -1px oklch(25% 0.03 262 / .10);
  --shadow-p-lg: 0 10px 15px -3px oklch(25% 0.03 262 / .10), 0 4px 6px -4px oklch(25% 0.03 262 / .10);

  --font-head: "Manrope", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --text-xs: 0.8125rem;  --text-sm: 0.9375rem;  --text-base: 1.0625rem;
  --text-md: 1.1875rem;  --text-lg: 1.375rem;   --text-xl: 1.75rem;
  --text-card:    clamp(1.375rem, 1.15rem + .55vw, 1.625rem);
  --text-2xl:     clamp(1.85rem, 1.15rem + 2.2vw, 2.9rem);
  --text-display: clamp(2.1rem, 1.05rem + 3vw, 3.4rem);
  --text-price:   clamp(2.5rem, 1.6rem + 2.4vw, 3.5rem);

  --space-2xs: .5rem;  --space-xs: .75rem; --space-sm: 1rem;    --space-md: 1.5rem;
  --space-lg: 2rem;    --space-xl: 3rem;   --space-2xl: 4.5rem;
  --sec-top: 104px;      /* отступ секции сверху */
  --sec-bot: 80px;       /* и снизу — несимметрично, заголовку больше воздуха */
  --head-gap: 40px;      /* от заголовка секции до содержимого */

  --radius-btn: 10px; --radius-card: 20px; --radius-live: 14px; --radius-in: 10px;
  --shadow-card: 0 1px 2px oklch(45% 0.05 262 / .05), 0 12px 28px -12px oklch(40% 0.06 262 / .16);
  --shadow-lift: 0 2px 6px oklch(45% 0.05 262 / .07), 0 24px 48px -24px oklch(35% 0.08 262 / .30);
  --shadow-live: 0 1px 2px oklch(45% 0.05 262 / .05);

  /* движение (CRITIQUE §6) */
  --dur-fast:  140ms;
  --dur-base:  240ms;
  --dur-enter: 420ms;
  --dur-count: 700ms;
  --stagger:    50ms;
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-pop:   cubic-bezier(.3, 1.4, .6, 1);
  --shift-1:  4px;
  --shift-2:  8px;
  --shift-3: 16px;
  --scale-press: .98;

  --wrap: 1180px;
  --gutter: var(--space-lg);
  --head-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font: 400 var(--text-base)/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 600; font-style: normal; letter-spacing: -.028em; overflow-wrap: break-word; hyphens: manual; min-width: 0; text-wrap: balance; }
h1 { font-size: var(--text-display); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; }
h2 { font-size: var(--text-2xl); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; }
h3 { font-size: var(--text-lg); line-height: 1.2; letter-spacing: -.024em; }
p { margin: 0; }
img { max-width: 100%; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 6px; }
.on-deep :focus-visible { outline-color: var(--color-on-deep); }
b, strong { font-weight: 600; }
code { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* кикер-чип — только в первом экране */
.kicker {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: .3rem .75rem .32rem; border-radius: 999px;
  font-size: var(--text-xs); font-weight: 500; letter-spacing: .01em;
  color: var(--color-on-deep); background: oklch(100% 0 0 / .12); border: 1px solid oklch(100% 0 0 / .22);
}

/* кнопки: одна залитая в кадре */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap;
  min-height: 44px; padding: .72rem 1.2rem; border-radius: var(--radius-btn);
  font: 500 var(--text-sm)/1.2 var(--font-text);
  color: var(--color-ink); border: 1px solid var(--color-rule-2); background: var(--color-paper);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(var(--scale-press)); }
.btn.primary { background: var(--color-accent); color: var(--color-on-deep); border-color: var(--color-accent); }
.btn.primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn.light { background: var(--color-on-deep); color: var(--color-deep); border-color: var(--color-on-deep); }
.btn.light:hover { background: oklch(94% 0.02 255); border-color: oklch(94% 0.02 255); }
.btn.lg { min-height: 48px; padding: .9rem 1.6rem; font-size: var(--text-base); }
.btn.sm { min-height: 36px; padding: .45rem .9rem; font-size: var(--text-sm); }
.tlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; font-weight: 500; }

/* ── шапка ─────────────────────────────────────────────
   Только наверху страницы, над синим первым экраном, — как на странице входа в панель: знак слева,
   «Войти» и «Подключить» справа, без меню. Не закреплена и уезжает вместе со страницей: ниже кнопка
   «Подключить магазин» есть в каждом разделе, «Войти» — в подвале. Поэтому у шапки одно состояние —
   белое на синем, без подложки, стекла и переключений при прокрутке. Цвета — обычными правилами.
   (В закреплённой шапке со светлым состоянием знак у заказчика однажды стал чёрным; причину не
   нашли — в Chrome и WebKit 26.6 та версия рисовалась верно. Теперь переключать цвета незачем.) */
.top { position: relative; z-index: 30; margin-bottom: calc(-1 * var(--head-h)); }
.top .wrap { display: flex; align-items: center; gap: var(--space-md); height: var(--head-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--color-on-deep); font: 600 1.125rem/1 var(--font-head); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
/* Знак и его место — как на странице входа (frontend AuthShell): 32 px, левый край колонки 1180,
   по центру шапки 72 px. При переходе «Войти» логотип не прыгает. */
.brand svg { width: 32px; height: 32px; flex: none; }
.brand .lg-c { fill: var(--color-on-deep); }
.brand .lg-p { fill: var(--color-accent); }
.top .actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2xs); flex: none; }
.login { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .6rem; color: var(--color-on-deep-2); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.login:hover { color: var(--color-on-deep); text-decoration: none; }
.head-cta { background: var(--color-on-deep); color: var(--color-deep); border-color: var(--color-on-deep); }
.head-cta:hover { background: oklch(94% 0.02 255); border-color: oklch(94% 0.02 255); }
.top :focus-visible { outline-color: var(--color-on-deep); }
/* узкие телефоны: знак, «Войти» и «Подключить» в строку помещаются от 375 px; уже — плотнее,
   а меньше 360 px «Войти» уходит из шапки (оно есть в подвале), кнопка подключения остаётся */
@media (max-width: 374px) {
  .top .wrap { gap: 12px; }
  .top .actions { gap: 4px; }
  .login { padding: 0 .4rem; }
  .top .head-cta.btn.sm { padding: .4rem .65rem; }
}
@media (max-width: 359px) { .top .login { display: none; } }

/* ── первый экран: всё по центру ─────────────────────── */
.hero { position: relative; padding: calc(var(--head-h) + var(--space-2xl)) 0 8px; color: var(--color-on-deep); text-align: center; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(78% 52% at 50% -8%, oklch(63% 0.20 258 / .75), transparent 70%),
    linear-gradient(180deg,
      var(--color-deep) 0%,
      var(--color-deep-2) 24%,
      var(--color-accent) 40%,
      var(--color-accent-2) 50%,
      oklch(74% 0.105 256) 57%,
      oklch(88% 0.045 252) 64%,
      oklch(97% 0.010 250) 72%,
      var(--color-paper) 84%);
}
.hero::after {
  content: ""; position: absolute; inset: 0 0 55% 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(circle at center, oklch(100% 0 0 / .13) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, oklch(0% 0 0 / .9), transparent);
  mask-image: linear-gradient(180deg, oklch(0% 0 0 / .9), transparent);
}
.hero h1 { margin: var(--space-md) auto 0; max-width: 1080px; text-wrap: wrap; }
.hero-lede { margin: var(--space-md) auto 0; max-width: 34rem; font-size: var(--text-md); line-height: 1.5; color: var(--color-on-deep-2); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: var(--space-lg); justify-content: center; }
.hero .tlink { color: var(--color-on-deep); }
@media (max-width: 1159px) { br.wide-only { display: none; } .hero h1 { text-wrap: balance; } }

/* ── стеклянная подложка с показателями и лента графика ── */
.hero-panel {
  margin-top: var(--space-2xl); text-align: left; color: var(--color-ink);
  background: oklch(100% 0 0 / .68);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid oklch(100% 0 0 / .5); border-radius: var(--radius-card);
  box-shadow: 0 10px 34px -22px oklch(30% 0.08 262 / .45);
}
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { display: flex; flex-direction: column; padding: var(--space-md) var(--space-lg); min-width: 0; }
.tile + .tile { border-left: 1px solid oklch(100% 0 0 / .55); box-shadow: inset 1px 0 0 oklch(70% 0.02 250 / .22); }
.t-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.t-lab { font-size: var(--text-xs); color: var(--color-ink-2); }
.t-ico { width: 18px; height: 18px; flex: none; color: var(--tone-green-600); }
.t-ico.muted { color: var(--panel-muted-fg); }
.t-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: .5rem; min-height: 2.25rem; }
.t-val { font: 700 1.875rem/1.15 var(--font-head); letter-spacing: -.03em; text-align: left; white-space: nowrap; }
.spark { flex: none; }
.spark path { stroke: var(--panel-muted-fg); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spark .d-rev { fill: var(--color-chart-rev); }
.spark .d-ord { fill: var(--color-chart-ord); }
.t-dlt { margin-top: .4rem; font-size: var(--text-xs); color: var(--tone-green-fg); font-weight: 500; }
/* До первого кадра скрипта счётчики скрыты: в разметке — конечные числа (так страница выглядит без
   скрипта), и при обновлении они на долю секунды мелькали полной суммой, прежде чем стать нулём. */
.js-scenes:not(.cnt-ready) [data-count] { visibility: hidden; }
.t-dlt .cnt { font-weight: 500; text-align: left; }
/* стрелка — рисованная: знак «↗» iPhone показывал эмодзи в синем квадрате */
.t-dlt .arr { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; }
.t-dlt.flat { color: var(--color-ink-3); font-weight: 400; }
.t-dlt .short { display: none; }

.chart { margin-top: var(--space-md); }
/* Лента: дорожка втрое шире экрана и трижды повторяет один и тот же ряд.
   Двигается только от прокрутки: .track-scroll получает transform из скрипта. CSS-анимации здесь нет. */
.plot { position: relative; height: clamp(190px, 21vw, 300px); overflow: hidden; }
.track-scroll { position: absolute; inset: 0; width: 300%; will-change: transform; }
.track { position: absolute; inset: 0; width: 100%; }
@media (prefers-reduced-motion: reduce) { .track-scroll { will-change: auto; } }
.bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(90, 1fr); align-items: end; z-index: 1; }
.bar { display: flex; justify-content: center; align-items: flex-end; height: 100%; }
/* Столбики — сплошной цвет заказов панели, без прозрачности (решение заказчика) */
.bar i { display: block; width: 43%; height: calc(var(--h) * 100%); border-radius: 6px 6px 0 0; background: var(--color-chart-ord); }
.track svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.track .back { z-index: 0; }
.track .front { z-index: 2; pointer-events: none; }
.plot .grid line { stroke: oklch(92% 0.012 250); stroke-width: 1; stroke-dasharray: 2 4; }
#revfill .s0 { stop-color: var(--color-chart-rev); stop-opacity: .20; }
#revfill .s1 { stop-color: var(--color-chart-rev); stop-opacity: 0; }
.plot .area { fill: url(#revfill); }
.plot .stroke { fill: none; stroke: var(--color-chart-rev); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── первый экран: появление ──────────────────────────
   Раньше экран стоял: показатели росли только от прокрутки, и открытая страница встречала
   нулями — «0 ₽», «0 заказов». Теперь текст поднимается сразу, а панель и график оживают,
   как только видны (класс .go ставит скрипт): цифры набегают до итога, линия прорисовывается,
   столбики вырастают волной. Только opacity, transform и clip-path — раскладка не двигается.
   Без скрипта и при «уменьшить движение» (.js-scenes нет) всё стоит в конечном виде. */
@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes bar-grow { from { transform: scaleY(0); } }
@keyframes plot-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes spark-draw { to { stroke-dashoffset: 0; } }
@keyframes dot-in { from { opacity: 0; transform: scale(0); } }
.js-scenes .hero h1 { animation: hero-rise 720ms var(--ease-out) both; }
.js-scenes .hero-lede { animation: hero-rise 720ms var(--ease-out) 90ms both; }
.js-scenes .hero .cta { animation: hero-rise 720ms var(--ease-out) 180ms both; }
.js-scenes .hero-panel:not(.go) { opacity: 0; transform: translateY(14px); }
.js-scenes .hero-panel.go { animation: hero-rise 760ms var(--ease-out) both; }
.js-scenes .spark path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js-scenes .hero-panel.go .spark path { animation: spark-draw 1000ms var(--ease-out) 420ms forwards; }
.js-scenes .spark circle { transform-box: fill-box; transform-origin: center; }
.js-scenes .hero-panel:not(.go) .spark circle { opacity: 0; }
.js-scenes .hero-panel.go .spark circle { animation: dot-in 420ms var(--ease-pop) 1300ms both; }
.js-scenes .plot:not(.go) { clip-path: inset(0 100% 0 0); }
.js-scenes .plot.go { animation: plot-wipe 1150ms cubic-bezier(.33, .6, .3, 1) both; }
.js-scenes .bar i { transform-origin: 50% 100%; }
.js-scenes .plot:not(.go) .bar i { transform: scaleY(0); }
.js-scenes .plot.go .bar i { animation: bar-grow 640ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 32ms); }
/* страховка: основной скрипт не дошёл до первого экрана — через 3 с показываем всё как есть */
.hero-safe:not(.hero-js) .hero-panel, .hero-safe:not(.hero-js) .plot { opacity: 1; transform: none; clip-path: none; }
.hero-safe:not(.hero-js) .bar i { transform: none; }
.hero-safe:not(.hero-js) .spark path { stroke-dashoffset: 0; }
.hero-safe:not(.hero-js) .spark circle { opacity: 1; }
.hero-safe:not(.hero-js) [data-count] { visibility: visible; }

/* ── секции и заголовки ──────────────────────────────── */
.band { padding: var(--sec-top) 0 var(--sec-bot); }
.band.tint { background: var(--color-paper-2); }
.band.ruled { border-top: 1px solid var(--color-rule); }
.head-c { text-align: center; max-width: 52rem; margin: 0 auto var(--head-gap); }
.head-c p { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-md); }
.head-c .sent { display: inline-block; }

/* ── лента «Почему» ──────────────────────────────────── */
.reasons { padding: var(--sec-top) 0 calc(var(--sec-bot) - 24px); }
.reasons h2 { text-align: center; }
/* --vw — ширина окна без полосы прокрутки (ставит скрипт; без него 100vw). --rail-edge — поле до колонки
   текста: с него лента начинается и им заканчивается. */
.rail-shell { position: relative; margin-top: var(--head-gap); --rail-edge: max(var(--gutter), (var(--vw, 100vw) - var(--wrap)) / 2 + var(--gutter)); }
.rail {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-edge);
  scrollbar-width: none;
  /* за колонкой текста карточки бледные и тают к краю окна: соседнюю видно, но она не выглядит обрезанной */
  --rail-fade: linear-gradient(90deg, transparent, rgb(0 0 0 / .3) calc(var(--rail-edge) - var(--space-md)), #000 var(--rail-edge),
    #000 calc(100% - var(--rail-edge)), rgb(0 0 0 / .3) calc(100% - var(--rail-edge) + var(--space-md)), transparent);
  -webkit-mask-image: var(--rail-fade);
  mask-image: var(--rail-fade);
}
/* Сетка с колонками заданной ширины, а не flex с width: max-content: у flex-ряда Safari считал
   ширину по тексту карточек в одну строку (flex-basis не учитывал), лента выходила в разы шире
   карточек — в закреплённом режиме уезжала дальше последней карточки, оставляя пустоту справа
   и под собой, а на телефоне листалась в пустое место. Ширину сетки из колонок все движки считают
   одинаково. Лента — только на телефоне (от 768 px карточки стоят сеткой): карточка 85 % ширины экрана,
   но не шире 320 px, справа видна следующая. */
.rail-in {
  display: grid; grid-auto-flow: column; grid-auto-columns: 85vw; align-items: stretch;
  gap: var(--space-md); width: max-content;
  padding-inline: var(--rail-edge);
  padding-block: 4px 12px;
}
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline-offset: -2px; border-radius: 0; }
.rcard {
  scroll-snap-align: start; min-width: 0;
  display: flex; flex-direction: column;
  padding: 16px 16px 24px; border-radius: var(--radius-card);
  background: var(--color-card); border: 1px solid var(--color-rule); box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .rcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
}
.rcard h3 { margin: 0 8px; font-size: var(--text-card); line-height: 1.12; letter-spacing: -.03em; }
.rcard p { margin: 10px 8px 0; color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5; }
/* две строки под заголовок: однострочный прижат к абзацу, абзацы начинаются на одной высоте */
@media (min-width: 768px) { .rcard h3 { min-height: 2.24em; display: flex; align-items: flex-end; } }

/* витрины карточек: маленькие фрагменты панели, 112 px */
.vit {
  margin: 0 0 20px; height: 112px; padding: 14px 16px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  border-radius: var(--radius-in); background: var(--color-paper-2); border: 1px solid var(--color-rule);
  color: var(--panel-fg); font: 400 13px/18px var(--font-text);
}
.vit-cap { font-size: 13px; line-height: 18px; color: var(--color-ink-2); }
.vit-date { display: block; margin-top: 4px; font: 600 28px/1.1 var(--font-head); letter-spacing: -.03em; color: var(--color-ink); white-space: nowrap; }
/* 02: выдача за минуту на шкале 30 минут Маркета: секундомер, зелёная заливка, «Ключ передан» */
/* 02: секундомер — от заказа до ключа у покупателя проходит около минуты */
.vit-timer { gap: 8px; }
.tm { display: flex; align-items: center; gap: 10px; }
.tm-ic { width: 26px; height: 26px; flex: none; color: var(--color-ink-2); }
.tm-d { font: 600 30px/1 var(--font-mono); letter-spacing: -.02em; color: var(--tone-green-fg); font-variant-numeric: tabular-nums; transition: color var(--dur-base) var(--ease-out); }
.js-scenes .rcard:not(.s2) .tm-d { color: var(--color-ink); }
.tm-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--tone-green-fg); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.tm-ok svg, .vr-b svg { width: 14px; height: 14px; }
.js-scenes .rcard:not(.s2) .tm-ok { opacity: 0; transform: translateY(var(--shift-1)); }
/* 03: продажа списала ключ — остаток ушёл в Маркет */
.vr { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--panel-bg); border: 1px solid var(--panel-border); font-size: 13px; line-height: 18px; }
.vr code { flex: none; font-size: 12px; color: var(--panel-muted-fg); }
.vr-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr .chip { flex: none; }
.vr-a, .vr-b { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--color-ink-2); white-space: nowrap; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.vr-tag { padding: 0 6px; border-radius: 4px; border: 1px solid var(--tone-amber-bd); background: var(--tone-amber-bg); color: var(--tone-amber-fg); font-weight: 500; }
.vr-b { color: var(--tone-green-fg); font-weight: 500; }
/* строки событий — абзацы, и на них ложились отступы и межстрочный абзацев карточки (.rcard p):
   на телефоне мини-экран вылезал из рамки. Внутри витрины размеры свои. */
.vit .vr-a, .vit .vr-b { margin: 5px 0 0; font-size: 12px; line-height: 16px; }
.vit .vr-b { color: var(--tone-green-fg); }
.js-scenes .rcard:not(.s1) .vr-a { opacity: 0; transform: translateY(var(--shift-1)); }
.js-scenes .rcard:not(.s2) .vr-b { opacity: 0; transform: translateY(var(--shift-1)); }
/* 04: ключ целиком → превращается в то, как он лежит в базе (токен Fernet) → замок */
.vit-enc code { font-size: 14px; line-height: 20px; color: var(--color-ink); white-space: nowrap; letter-spacing: 0; }
/* ключ в 29 знаков — по ширине витрины: в узкой карточке шрифт мельче, а не карточка шире соседних */
.vit-enc { container-type: inline-size; }
.vit-enc code { font-size: min(14px, calc((100cqi - 32px) / 17.6)); }
.vit-enc .vit-cap { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; line-height: 16px; transition: opacity var(--dur-base) var(--ease-out); }
/* 04: символ шифрования — знаки ключа перемешиваются в шифр, замок защёлкивается */
.enc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.enc-lock { width: 22px; height: 22px; flex: none; overflow: visible; color: var(--tone-green-fg); transition: color var(--dur-base) var(--ease-out); }
.enc-sh { transition: transform var(--dur-base) var(--ease-out); }
.js-scenes .rcard:not(.s2) .enc-lock { color: var(--color-ink-2); }
.js-scenes .rcard:not(.s2) .enc-sh { transform: translateY(-3px); }
.js-scenes .rcard:not(.s2) .vit-enc .vit-cap { opacity: 0; }
/* 05: спарклайн и уведомление */
.vit-tg { flex-direction: row; align-items: center; gap: 12px; }
.vit-tg svg { flex: none; width: 72px; height: 40px; overflow: visible; }
.vit-tg svg path { fill: none; stroke: var(--panel-muted-fg); stroke-width: 1.5; }
.vt-b { position: relative; min-width: 0; padding: 7px 10px; border-radius: 12px 12px 12px 3px; background: var(--panel-bg); box-shadow: 0 1px 1px oklch(25% 0.03 240 / .14); font-size: 13px; line-height: 17px; transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
.vt-b b { font-weight: 600; }
.js-scenes .rcard:not(.s1) .vt-b { opacity: 0; transform: translateY(var(--shift-2)); }

/* прогресс ленты: по сегменту на карточку вместо стрелок */
.rprog { display: flex; justify-content: center; margin-top: 4px; }
.rprog button { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -7px; padding: 0; border: 0; background: none; cursor: pointer; }
.rprog button i { display: block; width: 24px; height: 3px; border-radius: 2px; background: var(--color-rule-2); transition: background-color var(--dur-base) var(--ease-out); }
.rprog button.on i { background: var(--color-accent); }
.rprog button:focus-visible { outline-offset: -4px; }
/* стрелки — только мышью, при наведении на ленту */
.rarrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .rarrow {
    display: grid; place-items: center; position: absolute; top: 58px; z-index: 2; width: 44px; height: 44px;
    padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
  }
  .rarrow span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-card); border: 1px solid var(--color-rule-2); color: var(--color-ink); box-shadow: var(--shadow-card); }
  .rarrow svg { width: 16px; height: 16px; }
  .rarrow.prev { left: 16px; }
  .rarrow.next { right: 16px; }
  .rail-shell:hover .rarrow:not([disabled]), .rarrow:focus-visible { opacity: 1; }
  .rarrow[disabled] { pointer-events: none; }
}

/* ── тарифы ──────────────────────────────────────────── */
.calc {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  background: var(--color-card); border: 1px solid var(--color-rule); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.calc-in { padding: 28px 2.5rem; }
.calc-out { padding: 28px 2.5rem; border-left: 1px solid var(--color-rule); display: flex; flex-direction: column; align-items: flex-start; }
.calc-lab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: var(--text-sm); color: var(--color-ink-2); }
.calc-lab output { font: 600 1.375rem/1.2 var(--font-head); letter-spacing: -.02em; color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zones { display: flex; margin: 18px 14px 0; font-size: 13px; line-height: 18px; color: var(--color-ink-3); }
.zones > span { transition: color var(--dur-base) var(--ease-out); white-space: nowrap; }
.zones .z1 { width: 40%; padding-right: 8px; }
.zones .z2 { width: 60%; padding-left: 10px; }
.zones .on { color: var(--color-accent); font-weight: 500; }
.rng { position: relative; height: 44px; margin-top: 4px; }
.rng-track { position: absolute; left: 14px; right: 14px; top: 50%; height: 8px; margin-top: -4px; border-radius: 999px; background: var(--color-track); overflow: hidden; }
.rng-fill { position: absolute; inset: 0; background: var(--color-accent); transform-origin: 0 50%; transform: scaleX(var(--f, .4459)); }
.rng-tick { position: absolute; left: calc(14px + (100% - 28px) * .4); top: 50%; width: 2px; height: 18px; margin: -9px 0 0 -1px; border-radius: 1px; background: var(--color-ink-3); pointer-events: none; }
.rng input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.rng input::-webkit-slider-runnable-track { height: 44px; background: transparent; border: 0; }
.rng input::-moz-range-track { height: 44px; background: transparent; border: 0; }
.rng input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: 8px; border-radius: 50%; background: var(--color-card); border: 2px solid var(--color-accent); box-shadow: 0 2px 6px oklch(35% 0.08 262 / .25); }
.rng input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--color-card); border: 2px solid var(--color-accent); box-shadow: 0 2px 6px oklch(35% 0.08 262 / .25); }
.rng input:focus { outline: none; }
.rng input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.rng input:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.ticks { position: relative; height: 18px; margin: 0 14px; font-size: 12px; line-height: 18px; color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ticks span:first-child { transform: none; }
.ticks span:last-child { right: 0; transform: none; }
.shops { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "lab step" "hint step"; align-items: center; gap: 2px 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }
#shops-lab { grid-area: lab; align-self: end; }
.shops-h { grid-area: hint; align-self: start; font-size: 13px; line-height: 1.45; color: var(--color-ink-2); text-wrap: pretty; }
.stepper { grid-area: step; display: inline-flex; align-items: center; border: 1px solid var(--color-rule-2); border-radius: var(--radius-in); background: var(--color-paper); }
.stepper button { width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--color-ink); font: 500 1.25rem/1 var(--font-text); cursor: pointer; border-radius: 9px; }
.stepper button:hover:not([disabled]) { background: var(--color-paper-2); }
.stepper button[disabled] { color: var(--color-rule-2); cursor: default; }
.stepper output { min-width: 2.2em; text-align: center; font: 600 1.125rem/1 var(--font-head); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .22em; font: 700 var(--text-price)/1.05 var(--font-head); letter-spacing: -.035em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.price small { font: 500 var(--text-base)/1 var(--font-text); letter-spacing: 0; color: var(--color-ink-2); }
.price .odo-s { --odo-dur: var(--dur-base); }
.calc-sum { margin-top: var(--space-sm); }
.calc-line { font-size: var(--text-sm); color: var(--color-ink); }
/* на телефоне строка тарифа с магазинами бывает в две строки. Запас под вторую — внизу, после «за заказ»,
   а не пустой строкой между ними; кнопка под суммой от переноса не прыгает */
@media (max-width: 767px) { .calc-sum { font-size: var(--text-sm); min-height: calc(4.65em + 4px); } }
.calc-per { margin-top: 4px; font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.calc-per[hidden] { display: block; visibility: hidden; }
.calc-out .btn { margin-top: auto; }
.calc-go { margin-top: var(--space-md); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.calc-free { font-size: var(--text-sm); color: var(--color-ink-2); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: 32px; }
.plan {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border-radius: var(--radius-card);
  background: var(--color-card); border: 1px solid var(--color-rule); position: relative;
}
.plan::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--color-accent); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); pointer-events: none; }
.plan.on::after { opacity: 1; }
.pl-name { font-weight: 600; font-size: var(--text-sm); }
.pl-price { font: 700 1.75rem/1.1 var(--font-head); letter-spacing: -.03em; white-space: nowrap; }
.pl-price small { margin-left: .35em; font: 400 var(--text-sm)/1 var(--font-text); letter-spacing: 0; color: var(--color-ink-2); }
.pl-cond { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ── «Один заказ — через всю панель»: живые кадры ─────── */
.how-rows { display: grid; gap: 56px; }
.row-cap { margin: 0 0 14px; font-size: var(--text-md); line-height: 1.4; color: var(--color-ink-2); text-wrap: pretty; }
.row-cap b { color: var(--color-ink); font-weight: 600; }
.how-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-md); align-items: stretch; }
/* ряд 1: таблица товаров плотная, как в панели, — ей две трети */
.how-row.r1 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.how-row.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.how-row.r2 { grid-template-areas: "e f" "w f"; grid-template-rows: minmax(0, 1fr) auto; }
.r2 .lv-tg { grid-area: e; } .r2 .lv-keys { grid-area: f; } .r2 .lv-wait { grid-area: w; }

/* оболочка кадра: как карточка панели */
.live {
  position: relative; margin: 0; min-width: 0; overflow: hidden;
  background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--radius-live); box-shadow: var(--shadow-live);
  color: var(--panel-fg); font: 400 14px/20px var(--font-text); text-align: left;
  -webkit-font-smoothing: auto;
}
.live-in { padding: 20px 24px 24px; }
.live .tnum { font-variant-numeric: tabular-nums; }

/* статусные чипы — Badge variant="outline" + тон из labels.ts */
.badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--panel-border); border-radius: 6px; font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.badge.neutral { color: var(--panel-muted-fg); background: var(--panel-bg); }
.badge.green  { background: var(--tone-green-bg);  border-color: var(--tone-green-bd);  color: var(--tone-green-fg); }
.badge.blue   { background: var(--tone-blue-bg);   border-color: var(--tone-blue-bd);   color: var(--tone-blue-fg); }
.badge.violet { background: var(--tone-violet-bg); border-color: var(--tone-violet-bd); color: var(--tone-violet-fg); }
.badge.amber  { background: var(--tone-amber-bg);  border-color: var(--tone-amber-bd);  color: var(--tone-amber-fg); }
.badge.red    { background: var(--tone-red-bg);    border-color: var(--tone-red-bd);    color: var(--tone-red-fg); }
/* чип остатка (pk-products__chip): 44 × 22, tabular-nums */
.chip { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 22px; padding: 2px 8px; border: 1px solid var(--panel-border); border-radius: 8px; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--panel-bg); }
.chip.green { border-color: var(--tone-green-bd); background: var(--tone-green-bg); color: var(--tone-green-fg); }
.chip.red   { border-color: var(--tone-red-bd);   background: var(--tone-red-bg);   color: var(--tone-red-fg); }
.chip.amber { border-color: var(--tone-amber-bd); background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-bg); font-size: 14px; line-height: 20px; font-weight: 500; box-shadow: var(--shadow-p-xs); white-space: nowrap; }
.pbtn svg, .pico svg { width: 16px; height: 16px; }
.pico { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; flex: none; border-radius: 8px; }
.pico.outline { border: 1px solid var(--panel-border); background: var(--panel-bg); box-shadow: var(--shadow-p-xs); }
.live svg.i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* одометр: колонки символов, едут только translateY */
.odo-on { display: inline-flex; height: 1.25em; line-height: 1.25em; overflow: hidden; font-variant-numeric: tabular-nums; }
.odo-c, .odo-k { display: block; }
.odo-s { display: flex; flex-direction: column; --c: var(--v0); transform: translateY(calc(var(--c) * -1.25em)); transition: transform var(--odo-dur, 480ms) var(--odo-ease, var(--ease-pop)) var(--odo-delay, 0ms); }
.odo-s > span { display: block; height: 1.25em; text-align: right; }
.odo-r .odo-s > span { text-align: left; }
.s1 .odo-s { --c: var(--v1); }
.s2 .odo-s { --c: var(--v2); }
.s3 .odo-s { --c: var(--v3); }
.s4 .odo-s { --c: var(--v4); }
.reset, .reset * { transition: none !important; animation: none !important; }

/* B. Журнал заказа (details-sheet.tsx) */
.lo-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lo-title { font: 600 16px/1.25 var(--font-head); letter-spacing: -.01em; }
.lo-chip { display: inline-grid; }
.lo-chip > * { grid-area: 1 / 1; justify-self: start; opacity: 0; transform: translateY(var(--shift-1)); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.lo-chip > .past { transform: translateY(calc(-1 * var(--shift-1))); }
.lo-chip > .cur { opacity: 1; transform: none; }
.lo-desc { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--panel-muted-fg); }
.lo-desc span { display: block; color: var(--panel-fg); }
.lo-log { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--panel-border); display: grid; gap: 2px; }
.lo-log > div { display: grid; grid-template-columns: 7.5rem 1fr; align-items: baseline; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.lo-log dt { font-size: 13px; line-height: 22px; color: var(--panel-muted-fg); }
.lo-log dd { margin: 0; font: 400 13px/22px var(--font-mono); font-variant-numeric: tabular-nums; }
/* секундомер заказа: от «Новый» до «Ключи переданы» — 00:00 → 01:08 */
.lo-timer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--panel-muted); }
.lo-timer svg { width: 18px; height: 18px; color: var(--panel-muted-fg); }
.lo-tm { font: 600 20px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tone-green-fg); transition: color var(--dur-base) var(--ease-out); }
.js-scenes .lv-order:not(.s3) .lo-tm { color: var(--panel-fg); }
.lo-tm-lab, .lo-tm-norm { font-size: 12px; line-height: 16px; color: var(--panel-muted-fg); }
.lo-tm-norm { margin-left: auto; }
.lo-keys { margin-top: 14px; padding: 10px 14px 12px; border-radius: 10px; border: 1px solid oklch(69.6% 0.17 162.5 / .3); background: oklch(69.6% 0.17 162.5 / .05); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
.lo-keys-h { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; color: var(--panel-muted-fg); }
.lo-keys-h svg { width: 14px; height: 14px; }
.lo-code { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 12px; border-radius: 6px; border: 1px dashed oklch(20.8% 0.042 265.8 / .4); background: oklch(20.8% 0.042 265.8 / .05); }
.lo-code code { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
/* ключ не влез в строку — переносится только после третьей группы: одинокой «J1111» на второй строке нет */
.lo-code .kg { white-space: nowrap; }
.lo-code svg { width: 14px; height: 14px; color: var(--panel-muted-fg); }
/* инструкция по активации уходит вместе с ключом: в том же письме Маркета */
.lo-slip { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 8px; margin-top: 10px; padding: 0 2px; }
.lo-slip svg { width: 14px; height: 14px; margin-top: 2px; color: var(--panel-muted-fg); }
.lo-slip-t { font-size: 13px; line-height: 18px; font-weight: 500; }
.lo-slip-p { grid-column: 2; position: relative; min-width: 0; font-size: 12px; line-height: 16px; color: var(--panel-muted-fg); }
.lo-slip-p .v { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
/* раскадровка журнала: s1 «Новый» и «Создан» → s2 «Отправляется» → s3 «Ключи переданы», «Отправлен · через 3 с»
   → s4 волосок на шкале → s5 «Доставлен» → s6 «Дедлайн» → s7 «Что передано покупателю» */
/* Поля окна видны сразу, как в панели, — до своего шага в них прочерк, потом приходит значение.
   Раньше скрывались целые строки и блок с ключом, и на телефоне кадр секунд пять стоял с пустотой
   под их место. Дедлайн известен с момента заказа, поэтому он виден с самого начала. */
.lo-log dd, .lo-code code { position: relative; }
.lo-log dd::before, .lo-code code::before, .lo-slip-p::before {
  content: "—"; position: absolute; left: 0; top: 0; color: var(--panel-muted-fg);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.lo-log dd .v, .lo-code .v { display: inline-block; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.js-scenes .lv-order:not(.s1) .l0 .v,
.js-scenes .lv-order:not(.s3) .l1 .v,
.js-scenes .lv-order:not(.s5) .l2 .v,
.js-scenes .lv-order:not(.s3) .lo-code .v,
.js-scenes .lv-order:not(.s3) .lo-slip-p .v { opacity: 0; transform: translateY(var(--shift-1)); }
.js-scenes .lv-order:not(.s1) .l0 dd::before,
.js-scenes .lv-order:not(.s3) .l1 dd::before,
.js-scenes .lv-order:not(.s5) .l2 dd::before,
.js-scenes .lv-order:not(.s3) .lo-code code::before,
.js-scenes .lv-order:not(.s3) .lo-slip-p::before { opacity: 1; }

/* Заказ, который ждал ключей: чип следует за окном ключей (s3 — резерв, s4 — продан) */
.badge.orange { background: oklch(98% 0.016 73.7); border-color: oklch(90.1% 0.076 70.7); color: oklch(55.3% 0.195 38.4); }
.lv-wait .live-in { padding: 14px 20px 16px; }
.lw-desc { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin-top: 6px; font-size: 13px; line-height: 18px; }
.lw-t { display: inline-grid; color: var(--panel-muted-fg); }
.lw-t > * { grid-area: 1 / 1; justify-self: end; white-space: nowrap; transition: opacity var(--dur-base) var(--ease-out); }
.lw-clock { font-weight: 600; color: var(--panel-fg); font-variant-numeric: tabular-nums; }
.lv-wait .lo-chip > :nth-child(2) { opacity: 1; transform: none; }
.lv-wait .lw-a { opacity: 0; }
.js-scenes .lv-wait:not(.k3) .lo-chip > :nth-child(1) { opacity: 1; transform: none; }
.js-scenes .lv-wait.k3 .lo-chip > :nth-child(1) { transform: translateY(calc(-1 * var(--shift-1))); }
.js-scenes .lv-wait:not(.k3) .lo-chip > :nth-child(2) { opacity: 0; transform: translateY(var(--shift-1)); }
.js-scenes .lv-wait:not(.k3) .lw-a { opacity: 1; }
.js-scenes .lv-wait:not(.k3) .lw-b { opacity: 0; }
.lw-track { position: relative; height: 4px; margin-top: 8px; border-radius: 999px; background: var(--color-track); overflow: hidden; }
.lw-track i { position: absolute; left: 0; top: 0; bottom: 0; width: 6.8%; border-radius: 999px; background: var(--tone-amber-600); transform-origin: 0 50%; transition: transform var(--dur-enter) var(--ease-out); }
.js-scenes .lv-wait:not(.k3) .lw-track i { transform: scaleX(.35); }

/* числа, которые меняет окно ключей: два слоя, переключается opacity (класс k4 от data-follow) */
.xf { display: inline-grid; vertical-align: top; }
.xf > * { grid-area: 1 / 1; justify-self: center; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.xf > .xa { opacity: 0; transform: translateY(calc(-1 * var(--shift-1))); }
.js-scenes [data-follow]:not(.k4) .xf > .xa { opacity: 1; transform: none; }
.js-scenes [data-follow]:not(.k4) .xf > .xb { opacity: 0; transform: translateY(var(--shift-1)); }
.pd-n.xf > * { justify-self: start; }
.tp-val .xf > *, .tp-meta .xf > * { justify-self: end; }

/* B: узкий кадр (1024–1180) — ключ мельче; широкий (планшет) — журнал слева, «Что передано» справа */
.lv-order { container-type: inline-size; }
@container (max-width: 380px) {
  .lv-order .live-in { padding: 18px 16px 20px; }
  .lv-order .lo-keys { padding: 10px 12px 12px; }
  .lv-order .lo-code { padding: 8px 10px; }
  .lv-order .lo-code code { font-size: 12.5px; }
}
@container (min-width: 600px) {
  .lv-order .live-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .lv-order .lo-head, .lv-order .lo-desc, .lv-order .lo-timer { grid-column: 1 / -1; }
  .lv-order .lo-log { grid-column: 1; }
  .lv-order .lo-keys { grid-column: 2; grid-row: 3; margin-top: 14px; }
}

/* D. Таблица товаров — плотная, как в панели (pk-products): плитки, панель поиска, таблица с действиями */
.pd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pd-tile { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px; border: 1px solid var(--panel-border); border-radius: 14px; background: var(--panel-bg); box-shadow: var(--shadow-p-sm); }
.pd-ic { display: flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border-radius: 10px; background: var(--panel-muted); }
.pd-ic svg { width: 20px; height: 20px; }
.pd-t { display: flex; flex-direction: column; min-width: 0; }
.pd-n { font-size: 24px; line-height: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-l { font-size: 12px; line-height: 1.25; color: var(--panel-muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-tile.red .pd-ic { color: var(--panel-destructive); } .pd-tile.red .pd-n { color: var(--tone-red-600); }
.pd-tile.amber .pd-ic, .pd-tile.amber .pd-n { color: var(--tone-amber-600); }
.pd-tile.orange .pd-ic, .pd-tile.orange .pd-n { color: var(--tone-orange-600); }
.pd-strip { display: none; }
.pd-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.pd-search { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; max-width: 300px; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--panel-border); border-radius: 8px; box-shadow: var(--shadow-p-xs); font-size: 13px; color: var(--panel-muted-fg); white-space: nowrap; overflow: hidden; }
.pd-search svg, .pd-select svg { width: 15px; height: 15px; color: var(--panel-muted-fg); }
.pd-select { display: flex; align-items: center; gap: 10px; flex: none; height: 34px; padding: 0 10px; border: 1px solid var(--panel-border); border-radius: 8px; box-shadow: var(--shadow-p-xs); font-size: 13px; white-space: nowrap; }
.pd-cols { margin-left: auto; height: 30px; font-size: 13px; }
.pd-cols svg { width: 15px; height: 15px; }
.pd-table { margin-top: 12px; border: 1px solid var(--panel-border); border-radius: 8px; overflow: hidden; }
.pd-row { position: relative; display: grid; grid-template-columns: 34px 80px minmax(0, 1fr) 78px 118px 212px; align-items: center; border-top: 1px solid var(--panel-border); }
.pd-row > * { position: relative; min-width: 0; padding: 9px 8px; }
.pd-row .c { display: flex; align-items: center; justify-content: center; }
.pd-hd { border-top: 0; height: 40px; }
.pd-hd > span { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--panel-muted-fg); white-space: nowrap; }
.pd-hd .on { gap: 4px; color: var(--panel-fg); }
.pd-hd .on svg { width: 13px; height: 13px; }
.pd-hd .c .m { display: none; }
.pd-ck { display: flex; justify-content: center; }
.ckb { display: block; width: 15px; height: 15px; border: 1px solid var(--panel-border); border-radius: 4px; box-shadow: var(--shadow-p-xs); }
code.pd-sku { font-size: 12px; line-height: 16px; color: var(--panel-muted-fg); }
.pd-name > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 18px; }
.pd-act { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.pd-act .pbtn { height: 28px; padding: 0 9px; gap: 5px; margin-right: 3px; font-size: 13px; }
.pd-act .pbtn svg { width: 14px; height: 14px; }
.pd-act .pico { width: 26px; height: 26px; }
.pd-act .pico svg { width: 15px; height: 15px; }
.pd-hl { position: absolute; inset: 0; padding: 0; background: var(--panel-row-hover); opacity: 0; transition: opacity var(--dur-count) var(--ease-out); }
.js-scenes .lv-products.s1:not(.s2) .pd-hl { opacity: 1; transition-duration: var(--dur-enter); }
/* Наглядно, что поменялось: у изменившихся чисел всплывают −1 / +1 (и +19, когда загрузили ключи),
   а внизу кадра — плашка, что новый остаток ушёл в Маркет. Ради этого кадр и стоит в ряду. */
.pd-row .c { position: relative; }
.pd-dl { position: absolute; left: 50%; top: -6px; font-style: normal; font-size: 12px; line-height: 16px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateX(-50%); }
.pd-dl.m { color: var(--tone-red-fg); }
.pd-dl.p { color: var(--tone-green-fg); }
@keyframes pd-dl { 0% { opacity: 0; transform: translate(-50%, 4px); } 18% { opacity: 1; transform: translate(-50%, 0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px); } }
.js-scenes .lv-products.s1:not(.s2) .pd-dl.o { animation: pd-dl 1600ms var(--ease-out) 200ms both; }
.js-scenes .lv-products.k4 .pd-dl.f { animation: pd-dl 1600ms var(--ease-out) 150ms both; }
.lv-products .live-in { position: relative; }
.pd-toast { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--panel-bg); border: 1px solid oklch(69.6% 0.17 162.5 / .35); box-shadow: 0 10px 28px -14px oklch(30% .05 262 / .3); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--tone-green-fg); white-space: nowrap; opacity: 0; transform: translateY(var(--shift-2)); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); pointer-events: none; }
.pd-toast svg { width: 14px; height: 14px; }
.js-scenes .lv-products.s1:not(.s2) .pd-toast { opacity: 1; transform: none; transition-delay: 900ms; }
.lv-products .odo-s { --odo-dur: 700ms; }
.lv-products [data-odo="d.sold7"] .odo-s { --odo-delay: 220ms; }
/* узкий кадр (десктоп 1024–1180): без флажков и двух значков, плитки без иконок */
.lv-products { container-type: inline-size; }
@container (max-width: 700px) {
  .pd-ic { display: none; } .pd-tile { padding: 10px 12px; }
  .pd-row { grid-template-columns: 78px minmax(0, 1fr) 76px 104px 148px; }
  .pd-ck, .pd-act .x2, .pd-hd .on svg { display: none; }
}

/* E. Telegram (pk-tg, без шапки чата и логотипа) */
.lv-tg { display: flex; flex-direction: column; background: oklch(96.4% 0.012 235); }
.tg-cap { margin-left: auto; align-self: flex-start; font-size: 12px; line-height: 16px; color: var(--panel-muted-fg); }
.tg-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--panel-bg); border-bottom: 1px solid var(--panel-border); }
.tg-ava { display: flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--panel-muted); color: var(--panel-muted-fg); }
.tg-ava svg { width: 18px; height: 18px; }
.tg-who { display: flex; flex-direction: column; line-height: 1.25; }
.tg-who b { font-size: 15px; font-weight: 600; }
.tg-who span { font-size: 13px; color: var(--panel-muted-fg); }
.tg-day { align-self: center; padding: 1px 10px; border-radius: 999px; background: oklch(55% 0.03 240 / .18); font-size: 12.5px; line-height: 20px; font-weight: 500; color: oklch(40% 0.03 245); }
.tg-feed { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 10px; padding: 16px 20px 22px 26px; }
.tg-msg { position: relative; max-width: 340px; filter: drop-shadow(0 1px 1px oklch(30% 0.04 240 / .16)); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
.tg-tail { position: absolute; left: -8px; bottom: 0; width: 9px; height: 17px; fill: var(--panel-bg); }
.tg-b { position: relative; padding: 6px 10px 7px 11px; border-radius: 15px 15px 15px 0; background: var(--panel-bg); font-size: 15px; line-height: 20px; }
.tg-b b { font-weight: 600; }
.tg-b code { font-size: 13.5px; }
.tg-time { float: right; position: relative; top: 6px; margin-left: 10px; font-size: 12px; line-height: 16px; color: oklch(70% 0.012 250); font-variant-numeric: tabular-nums; }
.js-scenes .lv-tg:not(.s1) .m1 { opacity: 0; transform: translateY(calc(var(--push, 0px) + var(--shift-3))); }
.js-scenes .lv-tg.s1:not(.s2) .m1 { transform: translateY(var(--push, 0px)); }
.js-scenes .lv-tg:not(.s2) .m2 { opacity: 0; transform: translateY(var(--shift-3)); }
/* второе сообщение ждёт, пока первое уступит место; назад — наоборот */
.lv-tg.s2 .m2 { transition-delay: 120ms; }
.js-scenes .lv-tg.s1:not(.s2) .m1 { transition-delay: 120ms; }

/* F. Окно «Ключи товара» (pk-keys) */
.lv-keys .live-in { padding: 20px 20px 22px; }
.kd-x { position: absolute; right: 16px; top: 16px; width: 16px; height: 16px; opacity: .7; }
.kd-title { font: 600 18px/1 var(--font-head); }
.kd-desc { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--panel-muted-fg); padding-right: 24px; }
.kd-desc code { font-size: 13px; }
.kt-view { display: flex; justify-content: flex-start; margin-top: 14px; overflow: hidden; }
/* вкладки не влезли (узкий кадр): правый край мягко обрезан, в режиме «Загрузить» полоса уезжает к активной */
.kt-view.over { -webkit-mask-image: linear-gradient(90deg, oklch(0% 0 0) calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, oklch(0% 0 0) calc(100% - 32px), transparent); }
/* полоса уехала к «Загрузить» — мягкий край и слева, на любой ширине (раньше только на телефоне) */
.js-scenes .lv-keys:not(.s2) .kt-view.over { -webkit-mask-image: linear-gradient(90deg, transparent, oklch(0% 0 0) 28px, oklch(0% 0 0) calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, oklch(0% 0 0) 28px, oklch(0% 0 0) calc(100% - 32px), transparent); }
.js-scenes .lv-keys:not(.s2) .kt-list { transform: translateX(var(--strip-up, 0px)); }
.kt-list { position: relative; display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 10px; background: var(--panel-muted); transition: transform var(--dur-base) var(--ease-inout); }
.kt { position: relative; z-index: 1; display: inline-flex; height: 30px; align-items: center; justify-content: center; gap: 5px; padding: 4px 8px; border: 1px solid transparent; border-radius: 8px; font-size: 12.5px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.kt svg { width: 14px; height: 14px; }
.kt-pill { display: none; position: absolute; z-index: 0; left: 0; top: 3px; bottom: 3px; width: 100px; border-radius: 8px; background: var(--panel-bg); box-shadow: var(--shadow-p-sm); transform-origin: 0 50%; transition: transform var(--dur-base) var(--ease-inout); }
.lv-keys:not(.pill-on) .kt[aria-selected="true"] { background: var(--panel-bg); box-shadow: var(--shadow-p-sm); }
.lv-keys.pill-on .kt-pill { display: block; transform: translateX(var(--px-fr)) scaleX(var(--pw-fr)); }
.js-scenes .lv-keys.pill-on:not(.s2) .kt-pill { transform: translateX(var(--px-up)) scaleX(var(--pw-up)); }
.kb-stack { display: grid; margin-top: 14px; }
.kb-stack > * { grid-area: 1 / 1; min-width: 0; }
/* шаг 2 по очереди: кнопка нажимается (280 мс) → форма гаснет → проявляется список. Назад — наоборот */
.kb-up { opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) var(--ease-out) 200ms, visibility 0s 340ms; }
.kb-list { opacity: 1; transition: opacity var(--dur-base) var(--ease-out) 340ms; }
.js-scenes .lv-keys:not(.s2) .kb-up { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-out) 140ms, visibility 0s; }
.js-scenes .lv-keys:not(.s2) .kb-list { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.lv-keys.s2:not(.s3) .kt-pill { transition-delay: 200ms; }
.lv-keys.s2:not(.s3) [data-odo="f.free"] .odo-s { --odo-delay: 340ms; }
.kb-lr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.kb-lab { font-size: 14px; line-height: 1; font-weight: 500; white-space: nowrap; }
.kb-small { font-size: 12px; line-height: 16px; color: var(--panel-muted-fg); }
.kb-hint { display: inline-grid; text-align: right; }
.kb-hint > * { grid-area: 1 / 1; justify-self: end; white-space: nowrap; transition: opacity var(--dur-base) var(--ease-out); }
.kb-hint .h0 { opacity: 0; }
.js-scenes .lv-keys:not(.s1) .kb-hint .h0 { opacity: 1; }
.js-scenes .lv-keys:not(.s1) .kb-hint .h1 { opacity: 0; }
.kb-area { position: relative; margin-top: 6px; height: 138px; border: 1px solid var(--panel-border); border-radius: 8px; box-shadow: var(--shadow-p-xs); overflow: hidden; }
.kb-lines { padding: 8px 12px; font: 400 12.5px/20px var(--font-mono); color: var(--panel-fg); -webkit-mask-image: linear-gradient(180deg, oklch(0% 0 0) 72%, transparent); mask-image: linear-gradient(180deg, oklch(0% 0 0) 72%, transparent); }
.kb-lines span { display: block; white-space: nowrap; transition: opacity var(--dur-base) var(--ease-out) calc(var(--i, 0) * 210ms), transform var(--dur-base) var(--ease-out) calc(var(--i, 0) * 210ms); }
.kb-cnt { font-weight: 500; color: var(--panel-fg); font-variant-numeric: tabular-nums; }
.js-scenes .lv-keys:not(.s1) .kb-lines span { opacity: 0; transform: translateY(var(--shift-1)); }
.js-scenes .lv-keys.s2 .kb-lines span { opacity: 0; transition-delay: 0s; transition-duration: var(--dur-fast); }
.kb-ph { position: absolute; left: 12px; top: 8px; font: 400 12.5px/20px var(--font-mono); color: var(--panel-muted-fg); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.kb-ph span { display: block; }
.js-scenes .lv-keys:not(.s1) .kb-ph { opacity: 1; }
.kb-note { margin-top: 6px; }
.kb-date-f { margin-top: 16px; }
.kb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.kb-date { display: flex; align-items: center; justify-content: space-between; width: 147px; height: 36px; padding: 4px 12px; border: 1px solid var(--panel-border); border-radius: 8px; box-shadow: var(--shadow-p-xs); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.kb-date svg { width: 16px; height: 16px; }
.kb-plus { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-bg); font-size: 14px; font-weight: 500; box-shadow: var(--shadow-p-xs); white-space: nowrap; }
.kb-go { margin-left: auto; }
.kb-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 8px 12px; border-radius: 8px; background: var(--panel-primary); color: var(--panel-primary-fg); font-size: 14px; line-height: 20px; font-weight: 500; box-shadow: var(--shadow-p-xs); }
.kb-btn svg { width: 16px; height: 16px; }
.js-scenes .lv-keys.s2 .kb-btn { animation: kb-press 280ms var(--ease-out); }
@keyframes kb-press { 50% { transform: scale(var(--scale-press)); } }
.kl { border: 1px solid var(--panel-border); border-radius: 8px; overflow: hidden; --rh: 37px; }
.kl-hd, .kl-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 150px; align-items: center; gap: 12px; padding: 0 14px; }
.kl-k { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kl-k code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-k svg { width: 14px; height: 14px; flex: none; color: var(--panel-muted-fg); }
.kl-hd { height: 36px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .025em; text-transform: uppercase; color: var(--panel-muted-fg); }
.kl-rows { position: relative; height: calc(5 * var(--rh)); overflow: hidden; }
.kl-row { height: var(--rh); border-top: 1px solid var(--panel-border); transform: translateY(calc(-1 * var(--rh))); transition: transform var(--dur-enter) var(--ease-out) 120ms, opacity var(--dur-base) var(--ease-out); }
.kl-row code { font-size: 13px; }
.kl-row .d { font-size: 13px; color: var(--panel-muted-fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kl-row.r0 { opacity: 0; }
.js-scenes .lv-keys:not(.s3) .kl-row { transform: none; }
.js-scenes .lv-keys:not(.s3) .kl-row.r0 { opacity: 1; }
.kl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin-top: 6px; }
.kb-toast {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 8px;
  border: 1px solid var(--tone-green-bd); background: var(--tone-green-bg); color: var(--tone-green-fg);
  font-size: 13px; line-height: 18px; font-weight: 500; box-shadow: var(--shadow-p-lg); white-space: nowrap;
  transition: opacity var(--dur-enter) var(--ease-out) 480ms, transform var(--dur-enter) var(--ease-out) 480ms;
}
.kb-toast svg { width: 16px; height: 16px; }
.js-scenes .lv-keys:not(.s2) .kb-toast { opacity: 0; transform: translateY(var(--shift-2)); transition-delay: 0s; }
.lv-keys [data-odo="f.sold"] .odo-s { --odo-delay: 0ms; }

/* G. Сообщения (pk-messages + открытый диалог MessagesPage.tsx): два диалога подряд, ≈ 11 с
   s1 новая строка → s2 диалог въезжает → s3 вопрос → s4 «печатает» → s5 ответ со ссылкой → s6 «Ответ не дошёл»
   → s7 «печатает» → s8 ответ без ссылки, доставлено → s9 второй диалог → s10 вопрос → s11 «печатает»
   → s12 ответ: ключ от Pro, а стоит Домашняя → s13 «Обновилась до Pro» → s14 «разобрано» */
.mg { display: grid; grid-template-columns: 272px minmax(0, 1fr); height: 100%; }
.ml { border-right: 1px solid var(--panel-border); min-width: 0; --mh: 84px; }
.ml-tabs { padding: 8px 12px; border-bottom: 1px solid var(--panel-border); }
.ml-tl { display: grid; grid-template-columns: 1fr 1fr; height: 36px; padding: 3px; border-radius: 10px; background: var(--panel-muted); }
.ml-tl span { display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.ml-tl .on { background: var(--panel-bg); box-shadow: var(--shadow-p-sm); }
.ml-rows { position: relative; height: calc(4 * var(--mh)); overflow: hidden; }
.ml-row { position: absolute; left: 0; right: 0; top: calc(var(--slot) * var(--mh)); height: var(--mh); padding: 12px; border-bottom: 1px solid var(--panel-border); background: var(--panel-bg); transition: transform var(--dur-enter) var(--ease-out), opacity var(--dur-enter) var(--ease-out); }
.ml-row > * { position: relative; }
/* новая строка въезжает поверх старых и чуть позже — старые успевают уехать вниз, текст не накладывается */
.ml-row.new { z-index: 1; transition-delay: 100ms; }
.ml-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; color: var(--panel-muted-fg); }
.ml-st { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ml-o { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--panel-fg); }
.ml-o span { font-weight: 400; color: var(--panel-muted-fg); }
.ml-t { margin-top: 4px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 20px; color: var(--panel-muted-fg); }
.ml-sel, .ml-flash { position: absolute !important; inset: 0; opacity: 0; }
.ml-sel { background: var(--panel-muted); transition: opacity var(--dur-base) var(--ease-out); }
.ml-flash { background: var(--color-accent-soft); }
@keyframes ml-flash { from { opacity: 1; } to { opacity: 0; } }
/* подписи, которые меняются по ходу диалога: два слоя, переключается opacity */
.sw { display: inline-grid; }
.sw > * { grid-area: 1 / 1; white-space: nowrap; transition: opacity var(--dur-base) var(--ease-out); }
.sw > .a { opacity: 0; }
.ml-st.sw > * { justify-self: end; }
.md { position: relative; min-width: 0; display: grid; padding: 14px 16px 16px; }
.md-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--panel-muted-fg); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.md-dlg { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
.md-dlg.d1 { opacity: 0; transform: translateX(calc(-1 * var(--shift-3))); }
.md-head { padding-bottom: 10px; border-bottom: 1px solid var(--panel-border); }
.md-head p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; }
.md-head p:first-child { font-size: 14px; line-height: 20px; font-weight: 500; }
.md-head p:last-child { color: var(--panel-muted-fg); }
.md-bubs { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 0; }
.md-b { max-width: 86%; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.md-b.mine { align-self: flex-end; }
.md-bb { position: relative; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: var(--panel-muted); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.md-b.mine .md-bb { border-radius: 16px 16px 4px 16px; background: var(--panel-bubble-mine); }
.md-stack { display: grid; justify-items: end; }
.md-stack > * { grid-area: 1 / 1; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.md-type, .md-r1 { opacity: 0; transform: translateY(var(--shift-1)); }
.md-type { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; }
.md-type i { width: 6px; height: 6px; border-radius: 50%; background: var(--panel-muted-fg); opacity: .55; }
@keyframes md-dot { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
.md-dash { position: absolute; inset: 0; border: 1px dashed var(--panel-destructive); border-radius: inherit; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.md-m { margin-top: 4px; padding: 0 4px; font-size: 12px; line-height: 16px; color: var(--panel-muted-fg); }
.md-b.mine .md-m { text-align: right; }
.md-m.sw { display: grid; }
.md-m.sw > * { justify-self: end; }
.md-m .ok { color: var(--tone-green-fg); font-weight: 500; }
.md-alert { margin-top: 2px; padding: 10px 12px; border-radius: 8px; border: 1px solid oklch(63.7% 0.237 25.3 / .3); background: oklch(63.7% 0.237 25.3 / .05); color: var(--panel-destructive); font-size: 13px; line-height: 18px; opacity: 0; transform: translateY(var(--shift-2)); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
.md-alert b { display: block; margin-bottom: 2px; font-weight: 500; font-size: 14px; }
.md-alert span { color: color-mix(in oklch, var(--panel-destructive) 90%, transparent); }
/* конечное состояние (без скрипта): открыт второй диалог, оба разобраны */
.lv-msg .r117 .ml-sel { opacity: 1; }
/* список */
.js-scenes .lv-msg:not(.s1) .ml-row.old { transform: translateY(calc(-1 * var(--mh))); }
.js-scenes .lv-msg:not(.s1) .ml-row.new { opacity: 0; transform: translateY(-12px); }
.js-scenes .lv-msg.s1 .r847 .ml-flash { animation: ml-flash 900ms var(--ease-out); }
.js-scenes .lv-msg.s2:not(.s9) .r847 .ml-sel { opacity: 1; }
.js-scenes .lv-msg:not(.s9) .r117 .ml-sel { opacity: 0; }
.js-scenes .lv-msg:not(.s8) .r847 .sw > .a, .js-scenes .lv-msg:not(.s14) .r117 .sw > .a { opacity: 1; }
.js-scenes .lv-msg:not(.s8) .r847 .sw > .b, .js-scenes .lv-msg:not(.s14) .r117 .sw > .b { opacity: 0; }
/* панель диалога въезжает справа, уходит влево */
.js-scenes .lv-msg:not(.s2) .md-empty { opacity: 1; }
.js-scenes .lv-msg:not(.s2) .md-dlg.d1 { transform: translateX(var(--shift-3)); }
.js-scenes .lv-msg.s2:not(.s9) .md-dlg.d1 { opacity: 1; transform: none; }
.js-scenes .lv-msg:not(.s9) .md-dlg.d2 { opacity: 0; transform: translateX(var(--shift-3)); }
/* диалог 1 */
.js-scenes .lv-msg:not(.s3) .d1 .q1 { opacity: 0; transform: translateY(var(--shift-2)); }
.js-scenes .lv-msg.s4:not(.s5) .d1 .md-type, .js-scenes .lv-msg.s7:not(.s8) .d1 .md-type { opacity: 1; transform: none; }
.js-scenes .lv-msg.s4:not(.s5) .d1 .md-type i, .js-scenes .lv-msg.s7:not(.s8) .d1 .md-type i { animation: md-dot 600ms var(--ease-inout) 2; }
.js-scenes .lv-msg.s4:not(.s5) .d1 .md-type i:nth-child(2), .js-scenes .lv-msg.s7:not(.s8) .d1 .md-type i:nth-child(2) { animation-delay: 120ms; }
.js-scenes .lv-msg.s4:not(.s5) .d1 .md-type i:nth-child(3), .js-scenes .lv-msg.s7:not(.s8) .d1 .md-type i:nth-child(3) { animation-delay: 240ms; }
.js-scenes .lv-msg.s5:not(.s7) .d1 .md-r1 { opacity: 1; transform: none; }
.js-scenes .lv-msg.s6:not(.s7) .d1 .md-dash { opacity: 1; }
.js-scenes .lv-msg:not(.s8) .d1 .md-r2 { opacity: 0; transform: translateY(var(--shift-1)); }
.js-scenes .lv-msg.s5:not(.s8) .d1 .rs .md-m > .a { opacity: 1; }
.js-scenes .lv-msg:not(.s8) .d1 .rs .md-m > .b { opacity: 0; }
.js-scenes .lv-msg.s6:not(.s8) .d1 .md-alert { opacity: 1; transform: none; }
.js-scenes .lv-msg:not(.s8) .d1 .md-head .sw > .a { opacity: 1; }
.js-scenes .lv-msg:not(.s8) .d1 .md-head .sw > .b { opacity: 0; }
/* диалог 2 */
.d2 .md-r1 { opacity: 1; transform: none; }
.js-scenes .lv-msg:not(.s10) .d2 .q1 { opacity: 0; transform: translateY(var(--shift-2)); }
.js-scenes .lv-msg.s11:not(.s12) .d2 .md-type { opacity: 1; transform: none; }
.js-scenes .lv-msg.s11:not(.s12) .d2 .md-type i { animation: md-dot 600ms var(--ease-inout) 2; }
.js-scenes .lv-msg.s11:not(.s12) .d2 .md-type i:nth-child(2) { animation-delay: 120ms; }
.js-scenes .lv-msg.s11:not(.s12) .d2 .md-type i:nth-child(3) { animation-delay: 240ms; }
.js-scenes .lv-msg:not(.s12) .d2 .md-r1 { opacity: 0; transform: translateY(var(--shift-1)); }
.js-scenes .lv-msg:not(.s12) .d2 .rs .md-m { opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.js-scenes .lv-msg:not(.s13) .d2 .q2 { opacity: 0; transform: translateY(var(--shift-2)); }
.js-scenes .lv-msg:not(.s14) .d2 .md-head .sw > .a { opacity: 1; }
.js-scenes .lv-msg:not(.s14) .d2 .md-head .sw > .b { opacity: 0; }

/* H. Топ продаж (pk-top) */
.tp-head { padding: 22px 24px 0; }
.tp-title { font-weight: 600; line-height: 1; }
.tp-desc { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--panel-muted-fg); }
.tp-list { padding: 10px 24px 14px; }
.tp-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; column-gap: 12px; row-gap: 6px; padding: 11px 0; border-bottom: 1px solid oklch(92.9% 0.013 255.5 / .6); }
.tp-item:last-child { border-bottom: 0; }
.tp-rank { display: flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 8px; background: var(--panel-muted); font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--panel-muted-fg); }
.tp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 500; }
.tp-val { position: relative; display: flex; justify-content: flex-end; font-size: 16px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tp-plus { position: absolute; right: 0; top: -14px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tone-green-fg); opacity: 0; pointer-events: none; }
.js-scenes .lv-top.s2:not(.tick) .tp-item:first-child .tp-plus { animation: tp-plus var(--dur-count) var(--ease-out); }
.lv-top .tp-item.pop .tp-plus { animation: tp-plus2 var(--dur-count) var(--ease-out); }
@keyframes tp-plus { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(calc(-1 * var(--shift-2))); } }
@keyframes tp-plus2 { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(calc(-1 * var(--shift-2))); } }
/* число меняется: старое уезжает вверх, новое приходит снизу */
.bmp { display: inline-grid; height: 1.25em; line-height: 1.25em; overflow: hidden; }
.bmp > * { grid-area: 1 / 1; text-align: right; transition: transform var(--dur-enter) var(--ease-out); }
.bmp > .bn { transform: translateY(100%); }
.bmp.go > .bo { transform: translateY(-100%); }
.bmp.go > .bn { transform: none; }
.tp-track { grid-column: 2 / 4; height: 6px; overflow: hidden; border-radius: 999px; background: var(--panel-muted); }
.tp-fill { height: 100%; border-radius: 999px; background: var(--color-chart-rev); transform: translateX(calc((var(--v, 1) - 1) * 100%)); transition: transform var(--dur-count) var(--ease-out) calc(var(--i, 0) * 60ms); }
.js-scenes .lv-top:not(.s1) .tp-fill { transform: translateX(-100%); }
.tp-meta { grid-column: 2 / 4; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; color: var(--panel-muted-fg); font-variant-numeric: tabular-nums; }
.lv-top [data-odo="h.sold30"] .odo-s { --odo-delay: 120ms; }

/* ── подключение ─────────────────────────────────────── */
.steps-box { position: relative; }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.st-line { position: absolute; z-index: 0; left: var(--lx, 20px); top: var(--ly, 20px); width: var(--lw, 0px); height: var(--lh, 2px); background: var(--color-rule-2); border-radius: 1px; }
.st-line i { position: absolute; inset: 0; background: var(--color-accent); border-radius: 1px; transform-origin: 0 0; }
.st { position: relative; z-index: 1; min-width: 0; }
.st-mk { position: relative; display: grid; width: 40px; height: 40px; }
.st-mk > * { grid-area: 1 / 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.st-mk .n { background: var(--color-accent-soft); color: var(--color-accent); font: 600 var(--text-base)/1 var(--font-head); box-shadow: 0 0 0 6px var(--color-paper); }
.st-mk .ck { background: var(--color-accent); color: var(--color-on-deep); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.st-mk .ck svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.st.done .ck { opacity: 1; }
.st b { display: block; margin-top: var(--space-sm); font-size: var(--text-base); line-height: 1.35; }
.st p { margin-top: 6px; color: var(--color-ink-2); font-size: var(--text-sm); }
.cfoot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-lg) var(--space-xl); align-items: center; margin-top: 2.5rem; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.help { display: grid; gap: 8px; font-size: var(--text-sm); color: var(--color-ink-2); }
.help b { color: var(--color-ink); }
/* почта поддержки — ссылка внутри фразы: без высоты кнопки, иначе строка с ней раздувается */
.help .tlink { display: inline; min-height: 0; padding: 0; }
.final {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl);
  padding: 28px 32px; border-radius: var(--radius-card);
  background: var(--color-card); border: 1px solid var(--color-rule); box-shadow: var(--shadow-card);
}
.final h3 { font-size: var(--text-xl); letter-spacing: -.03em; }
.final p { margin-top: 6px; color: var(--color-ink-2); }

/* ── подвал: бумага → голубой, вордмарк ─────────────── */
.foot { padding: var(--space-xl) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); background: linear-gradient(180deg, var(--color-paper) 0%, var(--color-sky) 100%); border-top: 1px solid var(--color-rule); }
.fgrid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-lg); }
.fgrid b { color: var(--color-ink); }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-md); }
.links a, .links span { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; white-space: nowrap; color: var(--color-ink-2); }
.links a:hover { color: var(--color-ink); }
/* вордмарк — SVG по габаритам букв: ровно по ширине контейнера, по центру, снизу срез точно по базовой линии */
.wordmark { display: block; width: 100%; height: auto; margin-top: var(--space-md); fill: oklch(48% 0.20 264 / .12); user-select: none; }
.wordmark text { font: 800 100px var(--font-head); }

/* ── адаптив ─────────────────────────────────────────── */
@media (max-width: 1023px) {
  :root { --sec-top: 88px; --sec-bot: 72px; --head-gap: 36px; }
  .how-row, .how-row.r1, .how-row.rev { grid-template-columns: minmax(0, 1fr); }
  .how-row.r2 { grid-template-areas: "e" "f" "w"; grid-template-rows: auto; }
  /* урезания кадров для планшета и телефона */
  .kb-area { height: 98px; }
  .kl-rows { height: calc(4 * var(--rh)); }
  /* сообщения: список из двух строк над диалогом */
  .mg { grid-template-columns: minmax(0, 1fr); }
  .ml { border-right: 0; border-bottom: 1px solid var(--panel-border); }
  .ml-rows { height: calc(2 * var(--mh)); }
  .md { padding: 12px 14px 14px; }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc-out { border-left: 0; border-top: 1px solid var(--color-rule); }
      .cfoot { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) and (max-width: 1023px) {
}
@media (max-width: 899px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles .tile:first-child { grid-column: 1 / -1; border-bottom: 1px solid oklch(100% 0 0 / .55); }
  .tiles .tile:nth-child(2) { border-left: 0; box-shadow: none; }
}
@media (max-width: 767px) {
  /* в «Топ продаж» на телефоне — три позиции */
  .tp-item.opt { display: none; }
  /* 48 / 40 вместо 60 / 60: на телефоне между секциями было по 120 px пустоты */
  :root { --sec-top: 48px; --sec-bot: 40px; --head-gap: 24px; --gutter: 1rem; --head-h: 56px; }
  /* таблица остатков на телефоне не читается — оставляем окно заказа, про остатки говорит карточка ленты */
  .how-row.r1 .lv-products, .row-cap .rc-tbl { display: none; }
  .brand { font-size: 1.0625rem; gap: 9px; }
  .brand svg { width: 28px; height: 28px; }
  .head-cta.btn.sm { min-height: 36px; padding: .4rem .8rem; font-size: var(--text-xs); }
  .hero { padding-top: calc(var(--head-h) + 32px); }
  .hero h1 { font-size: 1.95rem; line-height: 1.1; }
  .hero-lede { font-size: var(--text-base); }
  .cta { flex-direction: column; gap: 4px; margin-top: var(--space-md); }
  .cta .btn { width: 100%; }
  .hero .tlink { display: none; }
  .hero-panel { margin-top: var(--space-lg); -webkit-backdrop-filter: none; backdrop-filter: none; background: oklch(99% 0.004 250 / .94); }
  .tile { padding: 11px 16px 12px; }
  .tiles .tile:not(:first-child) .t-ico { display: none; }
  .tiles .tile:first-child .t-row { margin-top: .3rem; }
  .t-val { font-size: 1.75rem; }
  .tiles .tile:not(:first-child) .t-val { font-size: 1.375rem; }
  .tiles .tile:not(:first-child) .spark { display: none; }
  .tiles .tile:not(:first-child) .t-row { min-height: 0; margin-top: .3rem; }
  .t-dlt { margin-top: .25rem; font-size: 12px; }
  .t-dlt .long { display: none; } .t-dlt .short { display: inline; }
  .chart { margin-top: var(--space-sm); }
  .plot { height: 156px; }
  .bar i { border-radius: 3px 3px 0 0; }
  .rcard { padding: 14px 14px 20px; }
  .rcard h3, .rcard p { margin-left: 6px; margin-right: 6px; }
  .vit { margin-bottom: 16px; }
  /* 104, а не 96: мини-экран «Остатки» — строка товара и две строки событий — в 72 px не влезал */
  .vit { height: 104px; padding: 10px 12px; }
  .vit-date { font-size: 26px; }
  .vit-enc code { font-size: min(13px, calc((100cqi - 32px) / 17.6)); }
  .calc-in, .calc-out { padding: 20px 18px; }
  .calc-go .btn { width: 100%; }
  .calc-lab .wide, #shops-lab .wide { display: none; }
  .calc-go { margin-top: var(--space-sm); }
  .zones { margin-top: 12px; }
  .shops { margin-top: 14px; padding-top: 14px; grid-template-areas: "lab step" "hint hint"; row-gap: 8px; }
  #shops-lab { align-self: center; }
  .plans { margin-top: var(--space-md); }
  .plans { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-card); }
  .plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 16px; border: 0; border-radius: 0; background: none; }
  .plan + .plan { border-top: 1px solid var(--color-rule); }
  .plan::after { inset: 0; border-radius: 0; border-width: 0 0 0 3px; }
  .plan:first-child::after { border-top-left-radius: var(--radius-card); }
  .plan:last-child::after { border-bottom-left-radius: var(--radius-card); }
  .pl-name { grid-column: 1; }
  .pl-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.375rem; text-align: right; }
  .pl-price small { display: block; margin: 2px 0 0; font-size: 12px; }
  .pl-cond { grid-column: 1; font-size: 13px; }
          .how-rows { gap: 40px; }
  .row-cap { font-size: var(--text-base); margin-bottom: 10px; }
  .row-cap > span { display: none; }
  .head-c p { font-size: var(--text-base); }
  .how-row { gap: 12px; }
  .live-in, .lv-keys .live-in { padding: 16px; }
  /* D на телефоне: артикул, товар, остаток, 7д; плитки — одной строкой */
  .pd-tiles, .pd-bar { display: none; }
  .pd-strip { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; line-height: 18px; color: var(--panel-muted-fg); }
  .pd-strip b { font-weight: 700; font-variant-numeric: tabular-nums; }
  .pd-strip .r { color: var(--tone-red-600); } .pd-strip .a { color: var(--tone-amber-600); } .pd-strip .o { color: var(--tone-orange-600); }
  .pd-table { margin-top: 12px; }
  .pd-row { grid-template-columns: 64px minmax(0, 1fr) 62px 48px; }
  .pd-row > * { padding: 9px 7px; }
  .pd-hd > span { text-transform: none; letter-spacing: 0; }
  .pd-ck, .pd-act { display: none; }
  .pd-hd .c .w, .pd-hd .on svg { display: none; } .pd-hd .c .m { display: inline; }
  .tg-feed { padding: 12px 16px 16px 22px; }
  .tg-ava, .tg-who, .tg-day { display: none; }
  .tg-bar { padding: 10px 16px 0; border-bottom: 0; background: none; }
  .tg-cap { margin-left: 0; }
  .tg-b { font-size: 14px; }
  /* F: поле на 4 строки, без «+ месяц», вкладки уезжают к активной */
  .kt-view { -webkit-mask-image: linear-gradient(90deg, oklch(0% 0 0) calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, oklch(0% 0 0) calc(100% - 32px), transparent); }
  .kb-area { height: 98px; }
  .kb-note { font-size: 12px; }
  .kb-date { width: 128px; padding: 4px 10px; }
  .kb-plus { display: none; }
  .kb-date-f .kb-small { display: none; }
  /* ключ полной длины: на телефоне в списке остаётся только он */
  .kl-hd, .kl-row { grid-template-columns: minmax(0, 1fr); padding: 0 12px; }
  .kl-hd > :not(:first-child), .kl-row > :not(:first-child) { display: none; }
  .kl-row code { font-size: 12px; }
  .kl { --rh: 36px; }
  .kl-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tp-head { padding: 16px 16px 0; }
  .tp-list { padding: 6px 16px 10px; }
  /* вкладки уехали к «Загрузить» — мягкий край и слева */
  .js-scenes .lv-keys:not(.s2) .kt-view { -webkit-mask-image: linear-gradient(90deg, transparent, oklch(0% 0 0) 28px, oklch(0% 0 0) calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, oklch(0% 0 0) 28px, oklch(0% 0 0) calc(100% - 32px), transparent); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .st { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; }
  .st-mk { grid-row: 1 / span 2; }
  .st b { margin-top: 8px; font-size: var(--text-base); }
  .st p { grid-column: 2; font-size: 14px; }
  .help { font-size: 14px; gap: 6px; }
  .final h3 { font-size: 1.375rem; }
  .final p { font-size: 15px; }
  .cfoot { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-lg); padding-top: var(--space-md); }
  .final { padding: 20px 18px; gap: var(--space-sm); }
  .final .btn { width: 100%; }
  .foot .fgrid { display: block; }
  .links { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 0 var(--space-lg); margin-top: var(--space-2xs); }
  /* названия документов длинные — каждое своей строкой, иначе в две колонки они наезжали друг на друга */
  .links .doc { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 1.85rem; }
  .btn { padding: .66rem .9rem; }
}
@media (max-width: 359px) {
  .hero h1 { font-size: 1.75rem; }
  .tiles .tile:not(:first-child) .vs { display: none; }
  .zones { justify-content: space-between; margin-left: 14px; margin-right: 14px; }
  .zones .z1, .zones .z2 { width: auto; padding: 0; }
  .zones .z2 { text-align: right; }
  .zones .zd { display: none; }
  .zones .zt, .zones .zp { display: block; }
  .zones .zt { font-size: 12px; line-height: 16px; }
  .zones .zp { font-size: 13px; line-height: 18px; font-weight: 600; }
  .pd-row { grid-template-columns: minmax(0, 1fr) 62px 44px; }
  .pd-sku { display: none; }
  .kl-k svg { display: none; }
  .vit-enc code { font-size: min(12px, calc((100cqi - 32px) / 17.6)); }
  .lo-code { font-size: 12px; overflow-wrap: anywhere; }
  .kb-lr { flex-direction: column; align-items: flex-start; gap: 6px; }
  .kb-hint > * { justify-self: start; }
}
/* ── значки: одна звезда на всю страницу ─────────────── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.st { width: 14px; height: 14px; flex: none; fill: oklch(79.5% 0.184 86); stroke: none; }
svg.st.e { fill: var(--panel-border); }

/* витрина «Ответы на отзывы»: отзыв → ответ ИИ → ушёл сам */
.vit-rev { gap: 5px; padding: 12px 14px; }
.vrv-q { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; line-height: 16px; }
.vrv-q .stars { display: inline-flex; flex: none; gap: 1px; }
.vrv-q svg.st { width: 11px; height: 11px; }
.vrv-q .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink-2); }
.vrv-a {
  padding: 5px 8px; border-radius: 8px; background: var(--panel-bg); border: 1px solid var(--panel-border);
  font-size: 12.5px; line-height: 17px;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.vrv-a > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.vrv-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tone-green-fg); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.vrv-ok svg { width: 14px; height: 14px; }
.js-scenes .rcard:not(.s1) .vrv-a { opacity: 0; transform: translateY(var(--shift-1)); }
.js-scenes .rcard:not(.s2) .vrv-ok { opacity: 0; transform: translateY(var(--shift-1)); }

/* витрина «Аналитика»: главная цифра, полоса «вам / Маркет / возвраты», выплаты сверены */
.vit-fin { gap: 3px; }
.vf-cap { font-size: 12.5px; line-height: 16px; color: var(--color-ink-2); }
.vf-num { font: 600 24px/1.1 var(--font-head); letter-spacing: -.03em; color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vf-bar { display: flex; gap: 2px; height: 8px; margin-top: 2px; border-radius: 999px; overflow: hidden; clip-path: inset(0 0 0 0 round 999px); transition: clip-path var(--dur-count) var(--ease-out); }
.vf-bar i { display: block; }
.vf-bar .net { flex: 83.7 1 0%; background: var(--color-chart-rev); }
.vf-bar .mkt { flex: 16 1 0%; background: oklch(55.4% 0.046 257.4 / .4); }
.vf-bar .rf { flex: .3 1 0%; min-width: 3px; background: var(--tone-orange-600); }
.vf-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tone-green-fg); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.vf-ok svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.js-scenes .rcard:not(.s1) .vf-bar { clip-path: inset(0 100% 0 0 round 999px); }
.js-scenes .rcard:not(.s2) .vf-ok { opacity: 0; transform: translateY(var(--shift-1)); }
/* витрина Telegram: значок бота вместо графика */
.vit-tg .vt-ava { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--panel-bg); color: var(--panel-muted-fg); box-shadow: 0 1px 1px oklch(25% 0.03 240 / .14); }
.vit-tg .vt-ava svg { width: 20px; height: 20px; overflow: visible; }
.vit-tg .vt-ava svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* вкладки кадра отзывов: «Все 418 → 419 → 420», пока приходят два новых; «Ждут вас 1» — когда черновик ждёт */
.rv-n { display: inline-block; margin-left: 3px; font-style: normal; font-variant-numeric: tabular-nums; color: var(--panel-muted-fg); transition: opacity var(--dur-base) var(--ease-out); }
.rv-tabs > .on .rv-n { color: var(--panel-fg); }
.rv-all { display: inline-grid; }
.rv-all > * { grid-area: 1 / 1; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.rv-all > :not(.v2) { opacity: 0; }
.js-scenes .lv-rev .rv-all > * { opacity: 0; transform: translateY(var(--shift-1)); }
.js-scenes .lv-rev:not(.s1) .rv-all > .v0,
.js-scenes .lv-rev.s1:not(.s5) .rv-all > .v1,
.js-scenes .lv-rev.s5 .rv-all > .v2 { opacity: 1; transform: none; }
.js-scenes .lv-rev:not(.s7) .rv-n.n1 { opacity: 0; }

/* ── тарифы: три тарифа по числу заказов, магазин сверх первого +490 ₽ ── */
.zones .z1 { width: 25%; padding-right: 8px; }
.zones .z2 { width: 40%; padding-left: 10px; padding-right: 8px; }
.zones .z3 { width: 35%; padding-left: 10px; }
.rng-tick { left: calc(14px + (100% - 28px) * var(--t, .4)); }
.rng-tick.t1 { --t: .25; }
.rng-tick.t2 { --t: .65; }
/* ── отзывы: живые кадры ─────────────────────────────── */
.how-row.rv { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.lv-rev .live-in { padding: 18px 20px 20px; }
.rv-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.rv-h { font: 600 18px/1.2 var(--font-head); letter-spacing: -.01em; }
.rv-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--panel-muted); }
.rv-tabs > span { padding: 3px 10px; border-radius: 8px; font-size: 12.5px; line-height: 20px; font-weight: 500; color: var(--panel-muted-fg); white-space: nowrap; }
.rv-tabs > .on { background: var(--panel-bg); color: var(--panel-fg); box-shadow: var(--shadow-p-sm); }
.rv-card { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel-bg); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
.rv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; line-height: 18px; }
.rv-meta b { font-weight: 600; }
.rv-stars { display: inline-flex; gap: 1px; }
.rv-when { color: var(--panel-muted-fg); }
.rv-prod { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--panel-muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-text { margin-top: 6px; font-size: 14px; line-height: 20px; }
.rv-draft { margin-top: 10px; padding: 10px 12px 12px; border-radius: 10px; background: var(--panel-muted); }
.rv-dh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-lab { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; color: var(--panel-muted-fg); }
/* подписи, которые сменяют друг друга: слои в одной клетке, переключается opacity */
.rv-st { display: inline-grid; }
.rv-st > * { grid-area: 1 / 1; justify-self: end; transition: opacity var(--dur-base) var(--ease-out); }
.rv-st > :not(.c) { opacity: 0; }
/* ответ печатается поверх невидимого полного текста: высота блока не меняется, страница не прыгает */
.rv-reply { display: grid; margin-top: 6px; font-size: 14px; line-height: 20px; }
.rv-reply > * { grid-area: 1 / 1; }
.rv-full { visibility: hidden; }
.rv-typed.typing::after { content: ""; display: inline-block; width: 2px; height: 16px; margin-left: 1px; vertical-align: -3px; background: var(--color-accent); animation: rv-caret 700ms steps(1) infinite; }
@keyframes rv-caret { 50% { opacity: 0; } }
.rv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.pbtn.dark { background: var(--panel-primary); color: var(--panel-primary-fg); border-color: var(--panel-primary); }
/* раскадровка: s1 отзыв → s2 «ИИ пишет» → s3 печатает → s4 «Уйдёт сам» → s5 жалоба → s6 печатает → s7 «Ждёт вас» → s8 первый ушёл */
.js-scenes .lv-rev:not(.s1) .c1,
.js-scenes .lv-rev:not(.s5) .c2 { opacity: 0; transform: translateY(var(--shift-2)); }
.js-scenes .lv-rev .rv-st > .c { opacity: 0; }
.js-scenes .lv-rev.s2:not(.s4) .c1 .rv-st > .a,
.js-scenes .lv-rev.s4:not(.s8) .c1 .rv-st > .b,
.js-scenes .lv-rev.s8 .c1 .rv-st > .c,
.js-scenes .lv-rev.s6:not(.s7) .c2 .rv-st > .a,
.js-scenes .lv-rev.s7 .c2 .rv-st > .c { opacity: 1; }
.js-scenes .lv-rev:not(.s7) .c2 .rv-acts { opacity: 0; transform: translateY(var(--shift-1)); }

/* правила ответов: у пятёрки и четвёрки «Одобрение» переключается на «Сам» */
.lv-rules { container-type: inline-size; }
.lv-rules .live-in { padding: 18px 20px 20px; }
.ru-title { font: 600 16px/1.25 var(--font-head); letter-spacing: -.01em; }
.ru-desc { margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--panel-muted-fg); }
.ru-hd, .ru-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 34px; align-items: center; gap: 10px; }
.ru-hd { margin-top: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--panel-border); font-size: 12px; line-height: 16px; color: var(--panel-muted-fg); }
.ru-tg { justify-self: end; display: inline-flex; }
.ru-tg svg { width: 15px; height: 15px; }
.ru-row { padding: 8px 0; border-bottom: 1px solid oklch(92.9% 0.013 255.5 / .6); }
.ru-st { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ru-st svg.st { width: 13px; height: 13px; }
.ru-seg { justify-self: start; display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 3px; border-radius: 9px; background: var(--panel-muted); }
.ru-seg > span { padding: 2px 9px; border-radius: 7px; font-size: 12.5px; line-height: 20px; font-weight: 500; color: var(--panel-muted-fg); white-space: nowrap; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.ru-seg > .sel { background: var(--panel-bg); color: var(--panel-fg); box-shadow: var(--shadow-p-sm); }
.js-scenes .lv-rules:not(.s1) .r5 .o1, .js-scenes .lv-rules:not(.s2) .r4 .o1 { background: transparent; color: var(--panel-muted-fg); box-shadow: none; }
.js-scenes .lv-rules:not(.s1) .r5 .o2, .js-scenes .lv-rules:not(.s2) .r4 .o2 { background: var(--panel-bg); color: var(--panel-fg); box-shadow: var(--shadow-p-sm); }
.ru-sw { justify-self: end; position: relative; display: block; width: 32px; height: 18px; border-radius: 999px; background: var(--panel-border); }
.ru-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--panel-bg); box-shadow: 0 1px 2px oklch(25% 0.03 262 / .25); transition: transform var(--dur-base) var(--ease-out); }
.ru-sw.on { background: var(--panel-primary); }
.ru-sw.on::after { transform: translateX(14px); }
.ru-toast {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--tone-green-bd); background: var(--tone-green-bg); color: var(--tone-green-fg);
  font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap;
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
}
.ru-toast svg { width: 16px; height: 16px; }
.js-scenes .lv-rules:not(.s3) .ru-toast { opacity: 0; transform: translateY(var(--shift-2)); }
.ru-tg-box { margin-top: 14px; padding: 10px 12px 12px; border-radius: 12px; background: oklch(96.4% 0.012 235); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
.ru-tg-cap { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--panel-muted-fg); }
.ru-tg-cap svg { width: 14px; height: 14px; }
.ru-tg-b { display: grid; gap: 2px; margin-top: 6px; padding: 7px 10px 8px; border-radius: 14px 14px 14px 4px; background: var(--panel-bg); box-shadow: 0 1px 1px oklch(25% 0.03 240 / .14); font-size: 13px; line-height: 18px; min-width: 0; }
.ru-tg-b b { font-weight: 600; }
.ru-tg-b .shop { margin-top: 4px; }
.ru-tg-b span { overflow-wrap: anywhere; }
.ru-tg-b i { color: var(--panel-muted-fg); }
.js-scenes .lv-rules:not(.s4) .ru-tg-box { opacity: 0; transform: translateY(var(--shift-2)); }
@container (max-width: 300px) {
  .ru-hd, .ru-row { grid-template-columns: 38px minmax(0, 1fr) 32px; gap: 8px; }
  .ru-seg > span { padding: 2px 6px; font-size: 12px; }
}

/* ── аналитика: живые кадры ──────────────────────────── */
.how-row.an { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.lv-fin, .lv-goods { container-type: inline-size; }
.lv-fin .live-in { padding: 18px 22px 16px; }
.fn-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.fn-lab { font-size: 14px; line-height: 20px; color: var(--panel-muted-fg); }
.fn-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--panel-muted); }
.fn-seg > span { padding: 2px 8px; border-radius: 6px; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--panel-muted-fg); white-space: nowrap; }
.fn-seg > .on { background: var(--panel-bg); color: var(--panel-fg); box-shadow: var(--shadow-p-xs); }
.fn-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 6px; }
.fn-num { display: inline-block; font: 600 40px/1.05 var(--font-head); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fn-dlt { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tone-green-fg); white-space: nowrap; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.fn-dlt svg { width: 16px; height: 16px; }
.fn-sub { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--panel-muted-fg); }
.fn-split { display: flex; gap: 2px; height: 10px; margin-top: 16px; border-radius: 999px; overflow: hidden; clip-path: inset(0 0 0 0 round 999px); transition: clip-path var(--dur-count) var(--ease-out); }
.fn-split i { flex: var(--w) 1 0%; min-width: 4px; }
.lv-fin .net, .lv-goods .net { background: var(--color-chart-rev); }
.lv-fin .mkt { background: oklch(55.4% 0.046 257.4 / .4); }
.lv-fin .rf, .lv-goods .rf { background: var(--tone-orange-600); }
.lv-goods .pl { background: oklch(55.4% 0.046 257.4 / .45); }
.lv-goods .bs { background: oklch(76.9% 0.188 70.1); }
.lv-goods .py { background: oklch(55.4% 0.046 257.4 / .22); }
i.d { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.fn-leg { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--panel-muted-fg); transition: opacity var(--dur-base) var(--ease-out); }
.fn-leg > span { display: inline-flex; align-items: center; gap: 6px; }
.fn-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 132px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--panel-border); }
.fb { display: grid; grid-template-rows: minmax(0, 1fr) 16px; gap: 4px; min-width: 0; }
.fbw { display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; transform-origin: 50% 100%; transition: transform var(--dur-count) var(--ease-out) calc(var(--i, 0) * 45ms); }
.fbw i { display: block; }
.fb .bm { height: calc(var(--m) * 100%); border-radius: 3px 3px 0 0; background: oklch(55.4% 0.046 257.4 / .28); }
.fb .bn { height: calc(var(--n) * 100%); background: var(--color-chart-rev); opacity: .42; }
.fb.cur .bn { opacity: 1; }
.fb.cur .bm { background: oklch(55.4% 0.046 257.4 / .5); }
.fb em { font-style: normal; font-size: 11px; line-height: 16px; text-align: center; color: var(--panel-muted-fg); overflow: hidden; }
.fb.cur em { color: var(--panel-fg); font-weight: 600; }
/* раскадровка: s1 столбцы растут → s2 набегает сумма → s3 полоса и подписи → s4 «к июлю» */
.js-scenes .lv-fin:not(.s1) .fbw { transform: scaleY(0); }
.js-scenes .lv-fin:not(.s3) .fn-split { clip-path: inset(0 100% 0 0 round 999px); }
.js-scenes .lv-fin:not(.s3) .fn-leg { opacity: 0; }
.js-scenes .lv-fin:not(.s4) .fn-dlt { opacity: 0; transform: translateY(var(--shift-1)); }
/* самый узкий кадр (телефон 320): пять кнопок периода не помещаются — «Полгода» прячем */
@container (max-width: 330px) { .fn-seg > :nth-child(3) { display: none; } .fb:nth-child(even):not(.cur) em { visibility: hidden; } .fb em { overflow: visible; } }
@container (max-width: 420px) {
  .lv-fin .live-in { padding: 16px; }
  .fn-num { font-size: 32px; }
  .fn-bars { gap: 3px; height: 116px; }
  .fb em { font-size: 11px; }
}

.lv-side .live-in { padding: 18px 20px 20px; }
.sd-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--panel-muted-fg); }
.sd-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--tone-green-fg); transition: opacity var(--dur-base) var(--ease-out); }
.sd-ok svg { width: 14px; height: 14px; }
.sd-num { display: block; margin-top: 4px; font: 600 26px/1.15 var(--font-head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-rows { display: grid; gap: 4px; margin-top: 10px; }
.sd-rows p { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 18px; color: var(--panel-muted-fg); font-variant-numeric: tabular-nums; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.sd-tax { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--panel-border); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
.sd-sub { margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--panel-muted-fg); }
.js-scenes .lv-side:not(.s1) .p1, .js-scenes .lv-side:not(.s2) .p2,
.js-scenes .lv-side:not(.s3) .p3, .js-scenes .lv-side:not(.s4) .p4 { opacity: 0; transform: translateY(var(--shift-1)); }
.js-scenes .lv-side:not(.s5) .sd-ok { opacity: 0; }
.js-scenes .lv-side:not(.s6) .sd-tax { opacity: 0; transform: translateY(var(--shift-2)); }

.how-row.an2 { grid-template-columns: minmax(0, 1fr); }
.lv-goods .live-in { padding: 18px 22px 16px; }
.gd-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.gd-h { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--panel-muted-fg); }
.gd-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; line-height: 16px; color: var(--panel-muted-fg); }
.gd-leg > span { display: inline-flex; align-items: center; gap: 6px; }
.gd-hd, .gd-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7rem, 1.5fr) 6.5rem 4.5rem 4rem; align-items: center; gap: 16px; }
.gd-hd { margin-top: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--panel-border); font-size: 12px; line-height: 16px; color: var(--panel-muted-fg); }
.gd-hd > :nth-child(n+3) { text-align: right; }
.gd-row { padding: 10px 0; border-bottom: 1px solid oklch(92.9% 0.013 255.5 / .6); transition: opacity var(--dur-base) var(--ease-out) calc(var(--i, 0) * 90ms), transform var(--dur-base) var(--ease-out) calc(var(--i, 0) * 90ms); }
.gd-name { min-width: 0; }
.gd-name b, .gd-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-name b { font-size: 14px; line-height: 20px; font-weight: 500; }
.gd-name small { font-size: 12px; line-height: 16px; color: var(--panel-muted-fg); }
.gd-bar { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gd-track { display: flex; gap: 1px; height: 8px; border-radius: 999px; overflow: hidden; clip-path: inset(0 0 0 0 round 999px); transition: clip-path var(--dur-count) var(--ease-out) calc(var(--i, 0) * 90ms); }
.gd-row:nth-child(1) .gd-track { --i: 0; } .gd-row:nth-child(2) .gd-track { --i: 1; } .gd-row:nth-child(3) .gd-track { --i: 2; } .gd-row:nth-child(4) .gd-track { --i: 3; } .gd-row:nth-child(5) .gd-track { --i: 4; }
.gd-track i { flex: var(--w) 1 0%; min-width: 2px; }
.gd-bar small { font-size: 12px; line-height: 16px; color: var(--panel-muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-bar .hot { color: var(--tone-amber-fg); }
.gd-net, .gd-per, .gd-ch { text-align: right; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gd-net { font-weight: 600; }
.gd-per { color: var(--panel-muted-fg); }
.gd-ch.up { color: var(--tone-green-fg); }
.gd-ch.down { color: var(--tone-red-fg); }
.gd-sum { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(7rem, 1fr) 6.5rem 4.5rem 4rem; gap: 16px; padding-top: 10px; font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; transition: opacity var(--dur-base) var(--ease-out); }
.gd-sum svg { width: 15px; height: 15px; vertical-align: -2px; color: var(--tone-green-fg); }
.gd-sum > :first-child { grid-column: 1 / 3; }
.gd-sum > :last-child { text-align: right; white-space: nowrap; }
.js-scenes .lv-goods:not(.s1) .gd-row { opacity: 0; transform: translateY(var(--shift-1)); }
.js-scenes .lv-goods:not(.s2) .gd-track { clip-path: inset(0 100% 0 0 round 999px); }
.js-scenes .lv-goods:not(.s3) .gd-sum { opacity: 0; }
/* узкий кадр — как в панели: имя и сумма, под ними полоса и комиссии */
@container (max-width: 820px) {
  .lv-goods .live-in { padding: 16px; }
  .gd-hd { display: none; }
  .gd-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name net" "bar bar"; gap: 6px 12px; }
  .gd-name { grid-area: name; }
  .gd-net { grid-area: net; }
  .gd-bar { grid-area: bar; }
  .gd-per, .gd-ch { display: none; }
  .gd-bar small { white-space: normal; overflow: visible; }
  .gd-row:first-of-type { margin-top: 10px; border-top: 1px solid var(--panel-border); }
  .gd-sum { display: flex; justify-content: space-between; gap: 12px; }
}

@media (max-width: 1023px) {
  .how-row.rv, .how-row.an { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .how-row.rv, .how-row.an { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .how-row.an { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (max-width: 767px) {
  .plans { gap: 14px; border: 0; background: none; }
  .plan { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-card); }
  .plan + .plan { border-top: 1px solid var(--color-rule); }
  .plan::after { inset: -1px; border-radius: inherit; border-width: 2px; }
  .plan:first-child::after, .plan:last-child::after { border-radius: inherit; }
  .pl-price { align-self: center; font-size: 1.375rem; text-align: right; }
  .pl-price small { display: inline; margin-left: .35em; font-size: var(--text-sm); }
  .pl-cond { font-size: var(--text-sm); }
  .vit-rev { padding: 10px 12px; gap: 4px; }
  .vrv-a > span { -webkit-line-clamp: 1; }
  .rv-tabs > :not(.on) { display: none; }
  .lv-rev .live-in, .lv-rules .live-in, .lv-side .live-in { padding: 16px; }
  .rv-card { padding: 12px 14px; }
}
@media (min-width: 560px) and (max-width: 767px) {
  .rail-in { grid-auto-columns: calc((var(--vw, 100vw) - 2 * var(--gutter) - var(--space-md)) / 2); }
}
/* «Почему» — сеткой, все восемь карточек видны сразу: от 1180 px два ряда по четыре (так попросил
   владелец), на 768–1179 px — две колонки: четыре в ряд там были бы уже, чем рассчитаны витрины.
   Раньше лента закреплялась и ехала вбок от прокрутки: владелец листал, а видел середину ленты и пустой
   низ экрана. На телефоне — лента пальцем. */
@media (min-width: 768px) {
  .reasons { padding-bottom: calc(var(--sec-bot) - 12px); }
  .rail { overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; }
  .rail-in { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; }
  .rcard { scroll-snap-align: none; }
  .rprog, .rarrow { display: none; }
}
@media (min-width: 1180px) {
  .rail-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* в карточке 261 px ключ в одну строку сжимался до 9 px — две строки по три группы с дефисом (18 знаков),
     13 px. Перенос по знакам, а не по дефисам: у ключа и шифра он на одном месте, строка не прыгает,
     пока знаки перемешиваются */
  .vit-enc code { max-width: 18ch; font-size: 13px; line-height: 18px; white-space: normal; word-break: break-all; }
  /* «до 30 сентября» — самая длинная дата — в карточке 261 px была шире витрины на 5 px */
  .vit-date { font-size: 26px; }
}
/* витрина «Сообщения покупателей»: вопрос по заказу → ответ из панели */
.vit-msg { gap: 6px; }
.vm-h { font-size: 12px; line-height: 16px; color: var(--color-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-b {
  max-width: 94%; padding: 5px 8px; font-size: 12.5px; line-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.vm-b.q { align-self: flex-start; border-radius: 12px 12px 12px 3px; background: var(--panel-bg); box-shadow: 0 1px 1px oklch(25% 0.03 240 / .14); }
.vm-b.a { align-self: flex-end; border-radius: 12px 12px 3px 12px; background: var(--panel-bubble-mine); }
.js-scenes .rcard:not(.s1) .vm-b.q { opacity: 0; transform: translateY(var(--shift-2)); }
.js-scenes .rcard:not(.s2) .vm-b.a { opacity: 0; transform: translateY(var(--shift-2)); }
.grid line { vector-effect: non-scaling-stroke; }
@media (pointer: coarse) { .top .btn { min-height: 44px; } }
/* без одиноких слов в последней строке и повисших заголовков (браузеры без поддержки просто переносят как раньше) */
.head-c p, .row-cap, .rcard p, .vit-cap, .st p, .shops-h { text-wrap: pretty; }
.st b { text-wrap: balance; }
/* Шаги в ряд — кружок и подпись по центру своей колонки: у левого края
   линия обрывалась на третьем кружке, и ряд уезжал влево. В столбик
   (телефон) всё остаётся у левого края. */
@media (min-width: 768px) {
  .st { text-align: center; }
  .st-mk { margin-inline: auto; }
}
/* Выбранный тариф приподнят — при смене тарифа в калькуляторе видно, какой выбран.
   Списков функций в плитках нет: во всех тарифах функции одинаковые (27.09.2026), это сказано под заголовком. */
.plan { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.plan.on { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
/* тариф выбирается и плиткой: название тарифа — кнопка, её подложка растянута на всю плитку */
.pl-pick {
  appearance: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left;
  font-family: inherit; line-height: inherit; letter-spacing: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pl-pick::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.pl-pick:focus-visible { outline: none; }
.pl-pick:focus-visible::after { outline: 2px solid var(--color-focus); outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .plan:not(.on):hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
}
/* планшет: плитки в три колонки, как на большом экране, — в них только название и цена */
@media (min-width: 768px) and (max-width: 1023px) {
  .plan { padding-inline: 18px; }
  .pl-price { font-size: 1.5rem; }
}

/* ── блог ─────────────────────────────────────────────
   Подключается после стилей лендинга (их build.py берёт из landing/index.html целиком), поэтому
   токены, шрифты, кнопки и живые кадры панели — те же. Здесь только то, что нужно статьям. */

/* шапка: та же, что на лендинге, — белое на синем; под ней не первый экран, а синяя полоса */
.blog .top { margin-bottom: 0; background: linear-gradient(180deg, var(--color-deep) 0%, var(--color-deep-2) 100%); }

/* ── статья ── */
.art { padding: 40px 0 96px; }
.art-grid { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 64px; align-items: start; }
.art-main { max-width: 740px; min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--text-xs); color: var(--color-ink-3); margin: 0 0 18px; }
.crumbs a { color: var(--color-ink-2); }
.art-h1 { font-size: clamp(2rem, 1.25rem + 2.1vw, 2.85rem); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 14px; }
.art-meta { color: var(--color-ink-3); font-size: var(--text-sm); margin: 0 0 24px; }
.art-lede { font-size: var(--text-md); line-height: 1.6; margin: 0 0 28px; }
.art-main h2 { font-size: var(--text-xl); line-height: 1.2; letter-spacing: -.02em; font-weight: 700; margin: 52px 0 14px; scroll-margin-top: 24px; }
.art-main h3 { font-size: var(--text-md); font-weight: 700; margin: 28px 0 8px; }
.art-main p { margin: 0 0 14px; line-height: 1.65; }
.art-main ul, .art-main ol { margin: 0 0 16px; padding-left: 22px; line-height: 1.65; }
.art-main li { margin: 5px 0; }
.art-main p code, .art-main li code, .art-main td code { font-size: .88em; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.src { font-size: var(--text-xs); color: var(--color-ink-3); }
.src a { color: var(--color-ink-2); text-decoration: underline; text-underline-offset: .18em; text-decoration-color: var(--color-rule-2); }

.brief { background: var(--color-accent-soft); border-radius: var(--radius-card); padding: 20px 24px; margin: 0 0 8px; }
.brief-t { font: 700 var(--text-sm) var(--font-head); color: var(--color-accent); margin: 0 0 6px !important; }
.brief ul { margin: 0; }

.a-steps { counter-reset: s; list-style: none; padding: 0 !important; display: grid; gap: 14px; }
.a-steps > li { counter-increment: s; position: relative; padding-left: 48px; margin: 0; }
.a-steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent); color: var(--color-on-deep); font: 700 15px/32px var(--font-head); text-align: center; }

.art-fig { margin: 32px -24px 12px; padding: 24px; background: var(--color-paper-2); border-radius: var(--radius-card); }
.art-fig .fig-cap { font-size: var(--text-sm); color: var(--color-ink-2); margin: 14px 4px 0; }

.tbl { overflow-x: auto; margin: 16px 0 20px; border: 1px solid var(--color-rule); border-radius: 14px; background: var(--color-card); }
.tbl table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--color-rule); }
.tbl th { font-weight: 600; color: var(--color-ink-2); background: var(--color-paper-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.r, .tbl th.r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl tr.hot td { background: var(--tone-red-bg); }
.tbl tr.hot td.r { color: var(--tone-red-fg); font-weight: 600; }

.note { border-left: 3px solid var(--color-accent); background: var(--color-accent-soft); padding: 14px 18px; border-radius: 0 12px 12px 0; margin: 20px 0; }
.note.warn { border-left-color: var(--tone-amber-600); background: var(--tone-amber-bg); }
.note p:last-child { margin: 0; }

.metric { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; margin: 28px 0; padding: 22px 26px; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-card); box-shadow: var(--shadow-card); }
.art-main .metric-n { font: 700 2.5rem/1 var(--font-head); color: var(--color-accent); margin: 0; letter-spacing: -.02em; white-space: nowrap; }
.art-main .metric-t { margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); }

.check { list-style: none; padding: 0 !important; display: grid; gap: 10px; }
.check li { position: relative; padding-left: 34px; margin: 0; }
.check li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 6px; background: var(--tone-green-bg); border: 1px solid var(--tone-green-bd); }
.check li::after { content: ""; position: absolute; left: 7px; top: 9px; width: 8px; height: 5px; border-left: 2px solid var(--tone-green-fg); border-bottom: 2px solid var(--tone-green-fg); transform: rotate(-45deg); }

.faq { border-bottom: 1px solid var(--color-rule); padding: 14px 0; }
.faq summary { font: 600 var(--text-base) var(--font-head); cursor: pointer; color: var(--color-ink); }
.faq p { margin: 10px 0 0 !important; color: var(--color-ink-2); }


.cta { margin-top: 56px; padding: 36px; border-radius: var(--radius-card); background: var(--color-deep); color: var(--color-on-deep); }
.art-main .cta-t { font: 700 var(--text-xl)/1.2 var(--font-head); color: var(--color-on-deep); margin: 0 0 8px; }
.art-main .cta-s { color: var(--color-on-deep-2); margin: 0 0 20px; }

.art-side { position: sticky; top: 24px; display: grid; gap: 20px; }
.toc { display: grid; gap: 2px; }
.toc-t { font: 700 var(--text-xs) var(--font-head); color: var(--color-ink-3); margin: 0 0 8px; }
.toc a { font-size: var(--text-sm); line-height: 1.35; color: var(--color-ink-2); padding: 6px 0 6px 14px; border-left: 2px solid var(--color-rule); }
.toc a:hover { color: var(--color-ink); text-decoration: none; }
.toc a.on { color: var(--color-accent); border-left-color: var(--color-accent); font-weight: 600; }
.side-cta { padding: 20px; border-radius: var(--radius-card); background: var(--color-card); border: 1px solid var(--color-rule); }
.side-cta p { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); margin: 0 0 14px; }

.more { margin-top: 72px; }
.more-t { font: 700 var(--text-xl) var(--font-head); margin: 0 0 18px; }

/* ── калькулятор ── */
.calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 24px 0; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-card); box-shadow: var(--shadow-card); overflow: hidden; }
.calc-in { padding: 22px 24px; display: grid; gap: 14px; align-content: start; }
.calc-in label { display: grid; gap: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2); }
.calc-in input, .calc-in select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--color-rule-2); border-radius: 10px; background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-sm) var(--font-text); font-variant-numeric: tabular-nums; }
.calc-in input:focus, .calc-in select:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.calc-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.calc-out { padding: 22px 24px; background: var(--color-paper-2); border-top: 1px solid var(--color-rule); display: grid; gap: 10px; align-content: start; }
.calc-big { font: 700 2.4rem/1 var(--font-head); letter-spacing: -.02em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.calc-cap { font-size: var(--text-xs); color: var(--color-ink-3); }
.calc-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--color-track); margin: 4px 0 2px; }
.calc-bar i { display: block; height: 100%; transition: flex-grow var(--dur-base) var(--ease-out); }
.calc-rows { display: grid; gap: 6px; font-size: var(--text-sm); }
.calc-rows div { display: flex; justify-content: space-between; gap: 12px; }
.calc-rows span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-rows .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 8px; vertical-align: 0; }
.calc-warn { font-size: var(--text-sm); color: var(--tone-red-fg); background: var(--tone-red-bg); border: 1px solid var(--tone-red-bd); border-radius: 10px; padding: 10px 12px; }

/* ── список статей ── */
.bl { padding: 48px 0 96px; }
.bl-h1 { margin: 0 0 12px; }
.bl-lede { font-size: var(--text-md); color: var(--color-ink-2); max-width: 640px; margin: 0 0 32px; line-height: 1.55; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-card); background: var(--color-card); border: 1px solid var(--color-rule); overflow: hidden; color: var(--color-ink); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.card:hover { text-decoration: none; box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.thumb { height: 150px; background: var(--color-paper-2); border-bottom: 1px solid var(--color-rule); display: grid; place-items: center; padding: 16px; }
.c-tx { padding: 18px 20px 20px; display: grid; gap: 8px; align-content: start; }
.c-k { font: 700 var(--text-xs) var(--font-head); color: var(--color-accent); }
.c-t { font: 700 var(--text-lg)/1.25 var(--font-head); letter-spacing: -.015em; text-wrap: balance; }
.c-m { font-size: var(--text-xs); color: var(--color-ink-3); }
/* мини-кадры панели на карточках */
.mini { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 10px; box-shadow: var(--shadow-p-sm); padding: 12px 14px; font: 400 12px/1.4 var(--font-text); color: var(--panel-fg); width: 100%; max-width: 260px; }
.mini .tm { font: 700 22px var(--font-mono); color: var(--tone-green-fg); }
.mini .row { display: flex; justify-content: space-between; gap: 8px; color: var(--panel-muted-fg); }
.mini .row b { color: var(--panel-fg); }
.mini .pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--tone-green-bg); border: 1px solid var(--tone-green-bd); color: var(--tone-green-fg); font-weight: 600; font-size: 11px; }
.mini .mbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 8px 0 6px; }
.mini .mbar i { display: block; height: 12px; }
.mini .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mini .tags span { padding: 3px 8px; border-radius: 6px; background: var(--panel-muted); font-size: 11px; }
.mini .tags span.on { background: var(--tone-green-bg); color: var(--tone-green-fg); }
.mini-fees { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-fees div { display: grid; gap: 2px; }
.mini-fees b { font: 700 22px/1.1 var(--font-head); color: var(--tone-green-fg); }
.mini-fees b.hot { color: var(--tone-red-fg); }
.mini-fees span { color: var(--panel-muted-fg); font-size: 11px; line-height: 1.3; }

@media (max-width: 1023px) {
  .art-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .art-side { display: none; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .art { padding-top: 28px; }
  .art-fig { margin: 28px -16px 12px; padding: 12px; border-radius: 16px; }
  .metric { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px; }
  .cta { padding: 26px 22px; }
}
@media (max-width: 640px) { .cards { grid-template-columns: minmax(0, 1fr); } }
/* широкие таблицы на телефоне: строка становится карточкой, подписи колонок берутся из data-k */
@media (max-width: 600px) {
  .tbl.stack thead { display: none; }
  .tbl.stack table, .tbl.stack tbody, .tbl.stack tr { display: block; }
  .tbl.stack tr { padding: 12px 14px; border-bottom: 1px solid var(--color-rule); }
  .tbl.stack tr:last-child { border-bottom: 0; }
  .tbl.stack td { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; padding: 3px 0; border: 0; }
  .tbl.stack td:first-child { display: block; padding: 0 0 6px; font-weight: 600; color: var(--color-ink); }
  .tbl.stack td::before { content: attr(data-k); color: var(--color-ink-3); }
  .tbl.stack td:first-child::before { content: none; }
}

/* ── шкала 30 минут: что происходит после оплаты ── */
.tl { margin: 28px 0 8px; padding: 22px 24px 20px; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-card); }
.tl-bar { position: relative; height: 14px; border-radius: 7px; background: var(--color-track); margin: 30px 0 10px; }
.tl-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 3.8%; min-width: 10px; border-radius: 7px; background: var(--color-chart-ord); }
.tl-bar b { position: absolute; bottom: 20px; font: 600 var(--text-xs) var(--font-text); white-space: nowrap; color: var(--color-ink); }
.tl-bar b.l { left: 0; }
.tl-bar b.r { right: 0; color: var(--color-ink-2); }
.tl-scale { display: flex; justify-content: space-between; font: 500 12px var(--font-mono); color: var(--color-ink-3); }
.tl-list { list-style: none; padding: 0 !important; margin: 18px 0 0 !important; display: grid; gap: 8px; }
.tl-list li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; margin: 0; font-size: var(--text-sm); line-height: 1.45; }
.tl-list time { font: 600 13px/1.6 var(--font-mono); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.tl-cap { font-size: var(--text-xs); color: var(--color-ink-3); margin: 14px 0 0 !important; }
.js-scenes .tl-bar i { transform-origin: left; animation: tl-grow 1.2s var(--ease-out) both; }
@keyframes tl-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── сравнение площадок: сколько дойдёт до продавца ── */
.pcalc { margin: 24px 0; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-card); box-shadow: var(--shadow-card); overflow: hidden; }
.pcalc-in { padding: 20px 24px; display: grid; gap: 8px; border-bottom: 1px solid var(--color-rule); }
.pcalc-in label { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2); }
.pcalc-price { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 16px; align-items: center; }
.pcalc-price input[type=number] { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--color-rule-2); border-radius: 10px; background: var(--color-paper); color: var(--color-ink); font: 600 var(--text-md) var(--font-text); font-variant-numeric: tabular-nums; }
.pcalc-price input[type=range] { width: 100%; accent-color: var(--color-accent); }
.pcalc-price input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.pcalc-list { display: grid; }
.pcalc-row { padding: 14px 24px; border-bottom: 1px solid var(--color-rule); display: grid; gap: 7px; }
.pcalc-row:last-child { border-bottom: 0; }
.pcalc-row.mark { background: var(--color-accent-soft); }
.pcalc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pcalc-top b { font: 700 var(--text-md) var(--font-head); }
.pcalc-net { font: 700 var(--text-md) var(--font-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcalc-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--color-track); }
.pcalc-bar i { display: block; height: 100%; transition: flex-grow var(--dur-base) var(--ease-out); }
.pcalc-bar i.net { background: var(--tone-green-500); }
.pcalc-bar i.fee { background: var(--color-ink-3); opacity: .45; }
.pcalc-ctrls { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.pcalc-opt { display: grid; gap: 4px; font-size: var(--text-xs); color: var(--color-ink-3); min-width: 0; flex: 1 1 12em; }
.pcalc-opt select, .pcalc-opt input { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--color-rule-2); border-radius: 8px; background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-sm) var(--font-text); }
.pcalc-opt input { max-width: 7em; }
.pcalc-opt select:focus-visible, .pcalc-opt input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.pcalc-parts, .pcalc-note { font-size: var(--text-xs); color: var(--color-ink-3); margin: 0 !important; line-height: 1.45; }

/* ── сколько ждать денег: полосы по дням ──
   --w — до какого дня деньги точно ваши (сплошная часть), --r — до какого дня может растянуться (светлая) */
.days { margin: 24px 0 8px; padding: 20px 24px; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-card); display: grid; gap: 12px; }
.days-row { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 14px; align-items: center; }
.days-k { display: grid; line-height: 1.25; }
.days-k b { font: 700 var(--text-sm) var(--font-head); }
.days-k small { font-size: var(--text-xs); color: var(--color-ink-3); }
.days-track { position: relative; height: 14px; border-radius: 7px; background: var(--color-track); }
.days-track i { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w, 10%); border-radius: 7px; background: var(--tone-amber-600); }
.days-track i.r { width: var(--r, 10%); background: var(--tone-amber-600); opacity: .32; }
.days-track i.r.fade { background: linear-gradient(90deg, var(--tone-amber-600), transparent); opacity: .5; }
.days-track i.end::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--tone-green-500); box-shadow: 0 0 0 3px var(--color-card); }
.days-row.mark .days-k b { color: var(--color-accent); }
.days-scale { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 14px; font: 500 12px var(--font-mono); color: var(--color-ink-3); }
.days-scale div { display: flex; justify-content: space-between; }
.days-cap { font-size: var(--text-xs); color: var(--color-ink-3); margin: 0 !important; line-height: 1.5; }
.js-scenes .days-track i { transform-origin: left; animation: tl-grow 1s var(--ease-out) both; }

/* ── диапазоны комиссий ── */
.feechart { margin: 24px 0 8px; padding: 20px 24px; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-card); display: grid; gap: 12px; }
.fc-row { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 14px; align-items: center; }
.fc-track { position: relative; height: 14px; border-radius: 7px; background: var(--color-track); }
.fc-track i { position: absolute; top: 0; bottom: 0; left: var(--a, 0%); width: var(--w, 2%); min-width: 14px; border-radius: 7px; background: var(--color-accent); }
.fc-track i.unk { background: repeating-linear-gradient(135deg, var(--color-ink-3) 0 4px, transparent 4px 8px); opacity: .55; }
.fc-row.mark .days-k b { color: var(--color-accent); }

/* ── подбор площадки ── */
.fit { margin: 24px 0; padding: 20px 24px; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-card); display: grid; gap: 14px; }
.fit-q { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fit-q > span { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2); width: 100%; }
.fit-q button { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--color-rule-2); background: var(--color-paper); color: var(--color-ink); font: 600 var(--text-sm) var(--font-text); cursor: pointer; }
.fit-q button[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-deep); }
.fit-q button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fit-note { font-size: var(--text-xs); color: var(--color-ink-3); margin: 0 !important; line-height: 1.45; }
.fit-list { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fit-list li { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--color-rule); background: var(--color-paper); display: grid; gap: 3px; transition: opacity var(--dur-base) var(--ease-out); }
.fit-list li b { font: 700 var(--text-sm) var(--font-head); }
.fit-list li span { font-size: var(--text-xs); color: var(--color-ink-2); line-height: 1.4; }
.fit-list li.off { opacity: .28; }
@media (max-width: 600px) {
  .pcalc-in, .pcalc-row, .days, .feechart, .fit { padding-left: 16px; padding-right: 16px; }
  .pcalc-price { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .days-row, .days-scale, .fc-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .days-scale > span { display: none; }
  .fit-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .js-scenes .days-track i { animation: none; } .pcalc-bar i { transition: none; } }

/* ── видео и снимки в статьях ── */
.art-video { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--color-rule); background: var(--panel-bg); }
.art-shot { margin: 24px 0 8px; }
.art-shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--color-rule); box-shadow: var(--shadow-card); }
.art-shot.narrow img { max-width: 460px; }
.art-shot.mid img { max-width: 560px; }
.art-shot figcaption { font-size: var(--text-sm); color: var(--color-ink-2); margin: 10px 4px 0; }
.mini-models { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mini-models div { display: grid; padding: 6px 8px; border-radius: 8px; background: var(--panel-muted); }
.mini-models div.on { background: var(--tone-green-bg); }
.mini-models b { font: 700 13px var(--font-head); }
.mini-models span { font-size: 10.5px; color: var(--panel-muted-fg); }
@media (prefers-reduced-motion: reduce) { .art-video { animation: none; } }

/* ── курс «Цифровые товары на Маркете с нуля» ───────────────────────
   Графики стоят прямо в тексте, без рамок: линия сверху, подпись-единица над данными.
   Рамка — только у макетов настоящих экранов (карточка товара, письмо). Цвета везде одни:
   синий — Маркет, серый — налог, зелёный — остаётся вам или всё в порядке, красный — ошибка
   и штраф, жёлтый — «осторожно». Анимация включается, когда блок в окне (скрипт ставит .go);
   без скрипта и при «уменьшить движение» (.js-scenes нет) всё стоит в конечном виде. */
.hbars, .parts, .stairs, .tline, .chain, .look { margin: 28px 0 22px; padding: 16px 0 0; border-top: 1px solid var(--color-rule); }
.art-main .ch-t { font: 700 var(--text-sm) var(--font-head); color: var(--color-ink-2); margin: 0 0 14px; }
.art-main .ch-cap, .art-main .hb-cap, .art-main .st-cap { font-size: var(--text-xs); color: var(--color-ink-3); line-height: 1.5; margin: 12px 0 0; }

/* столбики */
.hbars { display: grid; gap: 10px; }
.hb-row { display: grid; grid-template-columns: 210px minmax(0, 1fr) 84px; gap: 14px; align-items: center; }
.hb-k { font: 600 var(--text-sm)/1.25 var(--font-head); }
.hb-k small { display: block; font: 400 var(--text-xs)/1.35 var(--font-text); color: var(--color-ink-3); }
.hb-t { position: relative; height: 14px; border-radius: 7px; background: var(--color-track); overflow: hidden; }
.hb-t i { position: absolute; inset: 0 auto 0 0; width: var(--v, 10%); border-radius: 7px; background: var(--color-chart-rev, var(--color-accent)); transform-origin: left; }
.hb-t i.lim { width: var(--l, 10%); opacity: .3; }
.hb-v { font: 700 var(--text-sm) var(--font-head); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-row.hot .hb-k, .hb-row.hot .hb-v { color: var(--tone-red-fg); }
.hb-row.hot .hb-t i { background: var(--tone-red-fg); }
.hb-row.warn .hb-t i { background: var(--tone-amber-600); }
.hb-row.good .hb-t i { background: var(--tone-green-500); }
.hb-row.good .hb-v { color: var(--tone-green-fg); }
.js-scenes .hbars:not(.go) .hb-t i { transform: scaleX(0); }
.js-scenes .hbars.go .hb-t i { transition: transform 1100ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }

/* шаги по линии: кружок за кружком загорается, линия между ними заполняется */
.flow { list-style: none; padding: 0 !important; margin: 28px 0 22px !important; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0 18px; counter-reset: f; }
.flow > li { counter-increment: f; position: relative; margin: 0; padding: 40px 0 0; display: grid; gap: 4px; align-content: start; }
.flow > li::before { content: counter(f); position: absolute; left: 0; top: 0; z-index: 1; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--color-accent); background: var(--color-accent); color: var(--color-on-deep); font: 700 13px/24px var(--font-head); text-align: center; }
.flow > li::after { content: ""; position: absolute; left: 34px; right: -12px; top: 13px; height: 2px; border-radius: 1px; background: linear-gradient(var(--color-accent), var(--color-accent)) 0 0 / 100% 100% no-repeat, var(--color-rule); }
.flow > li:last-child::after { display: none; }
.flow b { font: 700 var(--text-sm)/1.25 var(--font-head); }
.flow span { font-size: var(--text-xs); line-height: 1.45; color: var(--color-ink-2); }
@keyframes flow-dot { from { background: var(--color-card); border-color: var(--color-rule-2); color: var(--color-ink-3); } }
@keyframes flow-line { from { background-size: 0 100%, auto; } }
.js-scenes .flow:not(.go) > li::before { background: var(--color-card); border-color: var(--color-rule-2); color: var(--color-ink-3); }
.js-scenes .flow:not(.go) > li::after { background-size: 0 100%, auto; }
.js-scenes .flow.go > li::before { animation: flow-dot 300ms var(--ease-out) both; animation-delay: calc(200ms + var(--i, 0) * 650ms); }
.js-scenes .flow.go > li::after { animation: flow-line 450ms linear both; animation-delay: calc(450ms + var(--i, 0) * 650ms); }
/* длинные цепочки и телефон — столбиком, линия идёт вниз */
.flow.rail, .flow.three { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.flow.rail > li, .flow.three > li { padding: 3px 0 0 44px; min-height: 28px; }
.flow.rail > li::after, .flow.three > li::after { left: 13px; right: auto; top: 32px; bottom: -14px; width: 2px; height: auto; background: linear-gradient(var(--color-accent), var(--color-accent)) 0 0 / 100% 100% no-repeat, var(--color-rule); }
@keyframes flow-line-v { from { background-size: 100% 0, auto; } }
.js-scenes .flow.rail:not(.go) > li::after, .js-scenes .flow.three:not(.go) > li::after { background-size: 100% 0, auto; }
.js-scenes .flow.rail.go > li::after, .js-scenes .flow.three.go > li::after { animation-name: flow-line-v; }

/* карточка товара на Маркете: номера стоят у самих полей */
.pcard { margin: 28px 0 22px; padding: 20px; border-radius: var(--radius-card); background: var(--color-paper-2); }
.pc-box { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 18px; border-radius: 14px; background: var(--color-card); box-shadow: var(--shadow-card); }
.pc-img { position: relative; aspect-ratio: 1; border-radius: 12px; background: linear-gradient(140deg, oklch(36% 0.12 262), oklch(22% 0.08 262)); color: #fff; display: grid; align-content: space-between; padding: 14px; overflow: hidden; }
.pc-img b { font: 800 22px/1.05 var(--font-head); letter-spacing: -.02em; }
.pc-img span { font: 700 34px/1 var(--font-head); }
.pc-img small { font: 600 11px var(--font-text); opacity: .75; }
.pc-tx { display: grid; gap: 8px; align-content: start; min-width: 0; }
.art-main .pc-t { font: 700 var(--text-base)/1.3 var(--font-head); margin: 0; }
.art-main .pc-p { font: 800 26px var(--font-head); margin: 0; }
.pc-cat { font-size: var(--text-xs); color: var(--color-ink-3); }
.pc-a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: var(--text-xs); margin: 0; }
.pc-a dt { color: var(--color-ink-3); }
.pc-a dd { margin: 0; font-weight: 600; }
.pc-dg { justify-self: start; padding: 3px 10px; border-radius: 999px; font: 600 12px var(--font-text); color: var(--tone-green-fg); background: var(--tone-green-bg); border: 1px solid var(--tone-green-bd); }
.pc-n { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--tone-amber-600); color: #fff; font: 700 11px/1 var(--font-head); vertical-align: 1px; }
.pc-img .pc-n { position: absolute; top: 10px; right: 10px; margin: 0; font: 700 11px/1 var(--font-head); }
.pc-legend { list-style: none; padding: 0 !important; margin: 16px 0 0 !important; display: grid; gap: 8px; }
.pc-legend li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin: 0; font-size: var(--text-sm); line-height: 1.45; }
.pc-legend li::before { content: attr(data-m); width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--tone-amber-600); color: #fff; font: 700 11px/20px var(--font-head); text-align: center; }
@keyframes pc-pop { from { transform: scale(0); } }
.js-scenes .pcard.go .pc-n { animation: pc-pop 420ms var(--ease-pop) both; animation-delay: calc(250ms + var(--i, 0) * 380ms); }
.js-scenes .pcard:not(.go) .pc-n { transform: scale(0); }

/* колонки «вид — значение — пояснение»: без рамок, линия сверху */
.fmts { margin: 28px 0 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; }
.fm { padding: 12px 0 0; border-top: 2px solid var(--color-rule); display: grid; gap: 6px; align-content: start; }
.fm b { font: 700 var(--text-sm)/1.3 var(--font-head); }
.fm-shot { font: 700 var(--text-md)/1.25 var(--font-head); color: var(--color-ink); }
.fm-shot i { font-style: normal; color: var(--color-accent); }
.fm-shot.txt { font: 600 var(--text-sm)/1.4 var(--font-text); color: var(--color-ink-2); }
.fm-shot.mono { font: 600 13px/1.5 var(--font-mono); color: var(--color-ink-2); overflow-wrap: anywhere; }
.fm p { font-size: var(--text-xs); color: var(--color-ink-2); margin: 0 !important; line-height: 1.45; }
.fm.ok { border-top-color: var(--tone-green-500); }
.fm.hand { border-top-color: var(--tone-amber-600); }
.fm.no { border-top-color: var(--tone-red-fg); }
.fm-tag { justify-self: start; font: 600 12px var(--font-text); }
.fm-tag.auto { color: var(--tone-green-fg); }
.fm-tag.hand { color: var(--tone-amber-fg); }
.fmts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fmts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* полоса из частей: Маркет, налог, остаток */
.parts { display: grid; gap: 14px; }
.pt-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) 96px; gap: 12px; align-items: center; }
.pt-k { display: grid; line-height: 1.25; }
.pt-k b { font: 700 var(--text-sm) var(--font-head); }
.pt-k small { font-size: var(--text-xs); color: var(--color-ink-3); }
.pt-bar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--color-track); }
.pt-bar i { flex: 0 0 var(--w, 10%); min-width: 3px; height: 100%; transform-origin: left; }
.pt-bar i + i { box-shadow: inset 2px 0 0 var(--color-paper); }
.pt-row .m, .pt-leg .m { background: var(--color-chart-rev, var(--color-accent)); }
.pt-row .t, .pt-leg .t { background: var(--color-ink-3); }
.pt-row .r, .pt-leg .r { background: var(--tone-green-500); }
.pt-row .x, .pt-leg .x { background: var(--tone-red-fg); }
.pt-v { font: 700 var(--text-sm) var(--font-head); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--text-xs); color: var(--color-ink-2); }
.pt-leg span { display: inline-flex; align-items: center; gap: 6px; }
.pt-leg i { width: 10px; height: 10px; border-radius: 3px; }
.js-scenes .parts:not(.go) .pt-bar i { transform: scaleX(0); }
.js-scenes .parts.go .pt-bar i { transition: transform 650ms var(--ease-out); }
.js-scenes .parts.go .pt-bar i:nth-child(2) { transition-delay: 450ms; }
.js-scenes .parts.go .pt-bar i:nth-child(3) { transition-delay: 900ms; }

/* письмо покупателю: код печатается, потом появляются шаги */
.letter { margin: 28px 0 22px; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-card); box-shadow: var(--shadow-card); overflow: hidden; }
.lt-head { display: grid; gap: 2px; padding: 14px 20px; border-bottom: 1px solid var(--color-rule); background: var(--color-paper-2); font-size: var(--text-xs); color: var(--color-ink-3); }
.lt-head b { font: 700 var(--text-sm) var(--font-head); color: var(--color-ink); }
.lt-body { padding: 18px 20px; display: grid; gap: 12px; font-size: var(--text-sm); }
.lt-code { justify-self: start; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--color-rule-2); background: var(--color-paper); font: 700 16px var(--font-mono); letter-spacing: .04em; white-space: nowrap; overflow: hidden; max-width: 100%; }
.lt-code span { display: inline-block; overflow: hidden; vertical-align: bottom; }
.lt-body ol { margin: 0 !important; padding-left: 20px; }
.lt-body li { margin: 3px 0; }
.lt-foot { font-size: var(--text-xs); color: var(--color-ink-3); }
@keyframes lt-type { from { width: 0; } }
@keyframes lt-in { from { opacity: 0; transform: translateY(6px); } }
.js-scenes .letter.go .lt-code span { animation: lt-type 1400ms steps(29, end) 300ms both; }
.js-scenes .letter:not(.go) .lt-body ol li { opacity: 0; }
.js-scenes .letter.go .lt-body ol li { animation: lt-in 380ms var(--ease-out) both; animation-delay: calc(1800ms + var(--i, 0) * 260ms); }

/* лесенка: столбики снизу вверх, последний — без потолка */
.st-plot { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; align-items: end; height: 190px; }
.st-col { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 100%; text-align: center; }
.st-col b { font: 800 var(--text-md) var(--font-head); font-variant-numeric: tabular-nums; }
.st-col i { display: block; flex: 0 0 auto; height: calc(var(--h, 30) * var(--k, 1px)); border-radius: 10px 10px 4px 4px; background: var(--color-chart-rev, var(--color-accent)); transform-origin: bottom; }
.st-col.up i { background: linear-gradient(to top, var(--tone-green-500) 55%, transparent); border-radius: 4px; }
.st-col.up b { color: var(--tone-green-fg); font-size: var(--text-sm); }
.st-x { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; margin-top: 8px; text-align: center; font-size: var(--text-xs); color: var(--color-ink-3); line-height: 1.35; }
.js-scenes .stairs:not(.go) .st-col i { transform: scaleY(0); }
.js-scenes .stairs:not(.go) .st-col b { opacity: 0; }
.js-scenes .stairs.go .st-col i { transition: transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 220ms); }
.js-scenes .stairs.go .st-col b { animation: lt-in 400ms var(--ease-out) both; animation-delay: calc(500ms + var(--i, 0) * 220ms); }

/* шкала времени: полоса до срока, отметки сроков */
.tline { display: grid; gap: 12px; }
.tx-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; align-items: end; min-height: 36px; }
.tx-track { position: relative; height: 14px; border-radius: 7px; background: var(--color-track); }
.tx-track i { position: absolute; inset: 0 auto 0 0; width: var(--w, 10%); border-radius: 7px; background: var(--color-chart-rev, var(--color-accent)); transform-origin: left; }
.tx-track i.fast { background: var(--tone-green-500); }
.tx-track i.slow { background: var(--tone-amber-600); }
.tx-track em { position: absolute; top: -3px; bottom: -3px; left: var(--x); width: 2px; background: var(--tone-red-fg); font-style: normal; }
.tx-track em.l::after { left: auto; right: 6px; }
.tx-track em::after { content: attr(data-t); position: absolute; left: 6px; top: -19px; font: 600 11px var(--font-text); color: var(--tone-red-fg); white-space: nowrap; }
.tx-axis { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; font-size: 11px; color: var(--color-ink-3); }
.tx-axis div { position: relative; height: 16px; }
.tx-axis div span { position: absolute; left: var(--x, 0); transform: translateX(-50%); white-space: nowrap; }
.tx-axis div span:first-child { transform: none; }
.tx-axis div span:last-child { transform: translateX(-100%); }
.js-scenes .tline:not(.go) .tx-track i { transform: scaleX(0); }
.js-scenes .tline.go .tx-track i { transition: transform 1200ms var(--ease-out); transition-delay: calc(var(--i, 0) * 200ms); }

/* цепочка поставки: звенья появляются по очереди, документы — между ними */
.chain { display: grid; grid-template-columns: minmax(0, 360px); gap: 0; }
.cn-node { display: grid; gap: 2px; text-align: center; padding: 10px 12px; border-radius: 12px; background: var(--color-paper-2); }
.cn-node b { font: 700 var(--text-sm) var(--font-head); }
.cn-node small { font-size: 11px; color: var(--color-ink-3); }
.cn-node.me { background: var(--color-accent-soft); }
.cn-node.me b { color: var(--color-accent); }
.cn-link { position: relative; height: 40px; display: grid; place-items: center; }
.cn-link::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--color-rule-2); }
.cn-link span { position: relative; padding: 2px 8px; border-radius: 6px; background: var(--color-card); border: 1px solid var(--color-rule); font: 600 11px var(--font-text); color: var(--color-ink-2); white-space: nowrap; }
.js-scenes .chain:not(.go) > * { opacity: 0; }
.js-scenes .chain.go > * { animation: lt-in 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 260ms); }

/* похожие знаки: пары меняются местами */
.look { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.look span { position: relative; display: inline-grid; width: 74px; height: 56px; border-radius: 12px; background: var(--color-paper-2); }
.look b { grid-area: 1 / 1; place-self: center; font: 700 26px var(--font-mono); }
.look b + b { color: var(--tone-red-fg); opacity: 0; }
@keyframes lk-a { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes lk-b { 0%, 45% { opacity: 0; } 55%, 100% { opacity: 1; } }
.js-scenes .look.go b:first-child { animation: lk-a 2.4s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * 300ms); }
.js-scenes .look.go b + b { animation: lk-b 2.4s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * 300ms); }
.look p { margin: 0 0 0 6px !important; font-size: var(--text-xs); color: var(--color-ink-3); flex: 1 1 200px; }

/* карта курса на странице курса: группы, линия, номера */
.route { margin: 8px 0 24px; }
.rt-g { font: 700 var(--text-xs) var(--font-head); letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-3); margin: 22px 0 6px 44px !important; }
.lessons { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; }
.lessons > li { position: relative; margin: 0; padding: 0 0 0 44px; }
.lessons > li::before { content: attr(data-n); position: absolute; left: 0; top: 12px; z-index: 1; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--color-accent); background: var(--color-card); color: var(--color-accent); font: 700 13px/24px var(--font-head); text-align: center; }
.lessons > li::after { content: ""; position: absolute; left: 13px; top: 40px; bottom: -12px; width: 2px; background: var(--color-rule); }
.route .lessons:last-of-type > li:last-child::after { display: none; }
.lessons a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 12px 0; border-bottom: 1px solid var(--color-rule); color: var(--color-ink); }
.lessons a:hover b { color: var(--color-accent); }
.lessons b { font: 700 var(--text-base)/1.3 var(--font-head); }
.lessons span { grid-column: 1; font-size: var(--text-sm); color: var(--color-ink-2); }
.lessons em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: var(--text-xs); color: var(--color-ink-3); white-space: nowrap; }
@keyframes rt-dot { from { background: var(--color-card); color: var(--color-accent); } to { background: var(--color-accent); color: var(--color-on-deep); } }
.js-scenes .route.go .lessons > li::before { animation: rt-dot 2.6s ease-in-out both; animation-delay: calc(var(--i, 0) * 260ms); animation-direction: alternate; animation-iteration-count: 2; }
.rt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: -8px 0 28px; font-size: var(--text-sm); color: var(--color-ink-2); }

/* соседние уроки: линия сверху, без рамок и стрелок */
.les-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 44px 0 0; padding-top: 16px; border-top: 1px solid var(--color-rule); }
.les-nav a { display: grid; gap: 3px; color: var(--color-ink); }
.les-nav a:hover b { color: var(--color-accent); }
.les-nav small { font-size: var(--text-xs); color: var(--color-ink-3); }
.les-nav b { font: 700 var(--text-base)/1.3 var(--font-head); }
.les-nav .next { grid-column: 2; text-align: right; }
.les-nav .next small { color: var(--color-accent); font-weight: 600; }
.les-nav .next:only-child { grid-column: 1 / -1; }

@media (max-width: 767px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .flow > li { padding: 3px 0 0 44px; min-height: 28px; }
  .flow > li::after { left: 13px; right: auto; top: 32px; bottom: -14px; width: 2px; height: auto; background: linear-gradient(var(--color-accent), var(--color-accent)) 0 0 / 100% 100% no-repeat, var(--color-rule); }
  .js-scenes .flow:not(.go) > li::after { background-size: 100% 0, auto; }
  .js-scenes .flow.go > li::after { animation-name: flow-line-v; }
  .fmts, .fmts.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fmts.one-m { grid-template-columns: minmax(0, 1fr); }
  .pc-box { grid-template-columns: minmax(0, 1fr); }
  .pc-img { width: 100%; max-width: 260px; justify-self: center; aspect-ratio: 16 / 10; }
  .chain { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .hb-row { grid-template-columns: minmax(0, 1fr) 70px; gap: 6px 10px; }
  .hb-k { grid-column: 1 / -1; }
  .pt-row { grid-template-columns: minmax(0, 1fr) 84px; gap: 6px 10px; }
  .pt-k { grid-column: 1 / -1; }
  .tx-row, .tx-axis { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tx-axis > span:first-child { display: none; }
  .st-plot { gap: 8px; height: 160px; --k: .8px; }
  .st-x { gap: 8px; }
  .les-nav { grid-template-columns: minmax(0, 1fr); }
  .les-nav .next { grid-column: 1; }
  .lessons a { grid-template-columns: minmax(0, 1fr); }
  .lessons em { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { .look b { animation: none !important; } }