/* ============================================================================
   AI OneMetric 3.0 — сайт для собственника (ТЗ 2, 04.09.2026): стили секций
   #story/#floors удалены вместе с ними.
   Подача: ТЁМНЫЙ ГЕРОЙ + СВЕТЛОЕ ТЕЛО (решение 21.08.2026).

   ЗАКОН ЦВЕТА (перенесён из tokens.css продукта):
   бренд teal/violet НИКОГДА не заливает поверхность под читаемым текстом —
   только eyebrow, 2px градиент-линия, wordmark, фокус-кольцо и границы.
   Жёлтая кнопка на экране строго одна.

   ПЕРФ-ЗАПРЕТЫ (после инцидента с падением FPS на старом сайте):
   П-1  mix-blend-mode — только на :hover, никогда на скролл-пути
   П-2  backdrop-filter: blur() — только на sticky/fixed шапке, не в потоке
   П-3  обработчик скролла — коалесценция в rAF, ноль чтений геометрии
   П-4  анимируем ТОЛЬКО transform и opacity (никогда width/height/top/left)
   П-5  никаких бесконечных анимаций и автокаруселей (WCAG 2.2.2)
   П-6  content-visibility:auto НЕ применять к секциям с .reveal (см. ниже)
   ============================================================================ */

@layer tokens, base, kit, sections, utils;

/* ===========================================================================
   TOKENS
   =========================================================================== */
@layer tokens {
  :root{
    /* ---- Бренд (одинаков в светлом и тёмном контексте) ---- */
    --teal:#1ED9A3; --teal2:#2EE6B0; --violet:#7C5CFC; --mag:#E94B7B; --yellow:#F2E84B;
    --grad:linear-gradient(100deg,#2EE6B0,#7C5CFC);
    --grad-line:linear-gradient(90deg,#1ED9A3,#7C5CFC);
    --tri-line:linear-gradient(90deg,#1ED9A3,#7C5CFC,#E94B7B);

    /* ---- СВЕТЛАЯ база = тело сайта.
            Значения взяты из темы `standart` продукта, чтобы демо-экраны
            выглядели ровно так же, как настоящий кабинет. ---- */
    --bg:#EDF1F5; --surface:#FFFFFF; --surface-2:#E7ECF2; --surface-3:#F5F8FA;
    --text:#0F172A; --text-2:#334155; --text-3:#475569; --text-4:#586878; --text-faint:#8A98A8;
    --border:#DCE3EA; --border-2:#BFC9D4;
    --accent:#2563EB; --accent-hover:#1D4ED8; --accent-soft:#EFF6FF; --accent-line:#BFDBFE;
    --teal-ink:#0B7A5C;
    /* --mag хорош для полос и крупных цифр, но на белом при 14px даёт 3,65:1.
       Для мелкого текста — отдельный тёмный оттенок. */
    --mag-ink:#C82355;
    /* Цвет кольца фокуса. На светлом teal почти невидим (1,6–1,8:1). */
    --focus:#0F172A;

    --good:#15803D; --good-soft:#F0FDF4; --good-line:#BBF7D0;
    --warn:#C2410C; --warn-soft:#FFF7ED; --warn-line:#FED7AA;
    --plan:#A16207; --plan-soft:#FEFCE8; --plan-line:#FDE68A;
    --bad:#B91C1C;  --bad-soft:#FEF2F2;  --bad-line:#FECACA;
    --slate:#475569;--slate-soft:#F1F5F9;--slate-line:#E2E8F0;

    /* Вердикты судьи переносов.
       Бордовый = «работы не было». Малиновый = «деньги стоят». Путать нельзя. */
    --fake:#9B1B3F; --fake-soft:#FBEFF3; --fake-line:#EFC3D0;
    --off:#D9480F;  --off-soft:#FDF0E8;  --off-line:#F6C7AC;
    /* ТЗ 10 п.1: оранжевый для текста/цифры на белом (--off даёт 4,3:1) — 5,98:1 */
    --off-ink:#B4380A;
    --unk:#586878;  --unk-soft:#F1F5F9;  --unk-line:#E2E8F0;

    /* ТЗ 6: подложки и рамки к брендовым цветам (пять слов выгоды, тревожная карточка).
       Плоские hex — те же значения годятся для печати. */
    --teal-soft:#E6FBF4;   --teal-line:#A7EFD6;
    --violet-soft:#F1EEFF; --violet-line:#CDC2FE;
    --mag-soft:#FDEEF3;    --mag-line:#F5BCCD;

    --shadow-card:0 1px 3px rgba(15,23,42,.10),0 1px 2px rgba(15,23,42,.05);
    --shadow-hi:0 8px 22px rgba(15,23,42,.12);
    --shadow-xl:0 24px 64px rgba(15,23,42,.16);
    --ring:0 0 0 3px rgba(37,99,235,.20);

    --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
    --nav-h:64px;   /* ТЗ 10 п.6: высота шапки — одна на .nav__in и sticky-колонку экрана 05 */
    --maxw:1180px;
    --sp-sec:clamp(72px,8vw,116px);

    --sans:'Manrope',system-ui,'Segoe UI',sans-serif;
    --mono:'JetBrains Mono','Consolas',ui-monospace,monospace;

    --ease:cubic-bezier(.22,.61,.36,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
  }

  /* ---- ТЁМНЫЙ КОНТЕКСТ: первый экран, тёмные вставки, футер.
          Переопределяем ТЕ ЖЕ переменные — компоненты не знают, где стоят.

          ВАЖНО: `color` обязан быть переобъявлен здесь явно. Переменная --text
          наследуется дальше, но свойство `color` потомки унаследовали от body
          УЖЕ ВЫЧИСЛЕННЫМ (тёмным) — смена переменной его не пересчитает.
          Без этой строки заголовки в тёмных секциях становятся нечитаемыми. ---- */
  .on-dark{
    color:var(--text);
    --bg:#0b0a14; --surface:#15131f; --surface-2:#1c1a28; --surface-3:#12111c;
    --text:#EAF3F1; --text-2:#C8D4D2; --text-3:#9AAAB4; --text-4:#8C9CA8; --text-faint:#6B7780;
    --border:rgba(255,255,255,.10); --border-2:rgba(30,217,163,.42);
    --accent:#5B8DEF; --accent-hover:#7CA8FF; --accent-soft:rgba(91,141,239,.14); --accent-line:rgba(91,141,239,.35);
    --teal-ink:#1ED9A3;
    --mag-ink:#FF9BB3;
    --focus:#1ED9A3;

    --good:#5DD68C; --good-soft:rgba(93,214,140,.12); --good-line:rgba(93,214,140,.28);
    --warn:#E0A857; --warn-soft:rgba(224,168,87,.12); --warn-line:rgba(224,168,87,.30);
    --plan:#E8C95F; --plan-soft:rgba(232,201,95,.12); --plan-line:rgba(232,201,95,.30);
    --bad:#FF9BB3;  --bad-soft:rgba(233,75,123,.12);  --bad-line:rgba(233,75,123,.30);
    --slate:#9AAAB4;--slate-soft:rgba(255,255,255,.05);--slate-line:rgba(255,255,255,.12);

    /* dark-адаптация: #9B1B3F на #0b0a14 нечитаем, берём светлее */
    --fake:#D96A8B; --fake-soft:rgba(217,106,139,.14); --fake-line:rgba(217,106,139,.34);
    --off:#E8875A;  --off-soft:rgba(232,135,90,.14);  --off-line:rgba(232,135,90,.34);
    --off-ink:var(--off);
    --unk:#8C9CA8;  --unk-soft:rgba(255,255,255,.05); --unk-line:rgba(255,255,255,.12);

    /* ТЗ 6: плоские подложки/рамки к брендовым цветам на тёмном (без rgba — печать без масок) */
    --teal-soft:#0F2A22;   --teal-line:#2F7C66;
    --violet-soft:#1B1730; --violet-line:#4A3C8C;
    --mag-soft:#2A1620;    --mag-line:#5A2F42;

    --shadow-card:0 1px 3px rgba(0,0,0,.40),0 1px 2px rgba(0,0,0,.30);
    --shadow-hi:0 8px 28px rgba(0,0,0,.50);
    --shadow-xl:0 24px 60px rgba(0,0,0,.60);
    --ring:0 0 0 3px rgba(30,217,163,.55);

    color-scheme:dark;
  }
}

/* ===========================================================================
   BASE
   =========================================================================== */
@layer base {
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

  body{
    background:var(--bg);color:var(--text);
    font-family:var(--sans);font-size:1.0625rem;line-height:1.62;font-weight:400;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;display:flex;flex-direction:column;
    -webkit-tap-highlight-color:transparent;
    overflow-x:clip;
  }
  main{flex:1 0 auto}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
  img,svg,video{max-width:100%;height:auto;display:block}
  ::selection{background:rgba(30,217,163,.30);color:#08231c}
  .on-dark ::selection{background:rgba(30,217,163,.32);color:#ffffff}

  /* Кольцо фокуса раньше было teal на любом фоне: на светлых секциях это
     1,6–1,8:1 при пороге 3:1, то есть фокус фактически не виден, а светлых
     секций десять из пятнадцати. Цвет берём из темы, снизу подкладываем
     контрастную подложку — кольцо читается на любом фоне, включая жёлтую кнопку. */
  :where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
    outline:2px solid var(--focus);outline-offset:3px;border-radius:4px;
    box-shadow:0 0 0 5px rgba(255,255,255,.85);
  }
  .on-dark :where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
    box-shadow:0 0 0 5px rgba(11,10,20,.85);
  }

  .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--teal);color:#08231c;
        font-weight:700;font-size:.875rem;padding:11px 18px;border-radius:0 0 var(--r-sm) 0}
  .skip:focus{left:0}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
           white-space:nowrap;border:0;padding:0;margin:-1px}
}

/* ===========================================================================
   KIT — компоненты
   =========================================================================== */
@layer kit {

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;position:relative;z-index:1}
  /* Одна узкая ширина на всю страницу: аккордеон, панель разбора, списки
     этажей и таблица цикла сделки. Разные близкие значения читаются как
     небрежность, поэтому размер один. */
  :root{--narrow:840px}
  .narrow{max-width:var(--narrow)}

  /* ---- Типографика ---- */
  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--mono);font-size:.6875rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.14em;color:var(--teal-ink);
    margin-bottom:18px;
  }
  .eyebrow__num{color:var(--violet);font-weight:700}
  .on-dark .eyebrow__num{color:#9B83FF}
  .eyebrow::after{content:"";width:34px;height:2px;border-radius:2px;background:var(--grad-line);flex:none}

  .h1{font-size:clamp(2.0625rem,5.2vw,3.375rem);font-weight:700;line-height:1.05;
      letter-spacing:-.028em;text-wrap:balance}
  .h2{font-size:clamp(1.625rem,3.4vw,2.375rem);font-weight:700;line-height:1.12;
      letter-spacing:-.022em;text-wrap:balance}
  .h3{font-size:clamp(1.125rem,1.9vw,1.375rem);font-weight:700;line-height:1.25;letter-spacing:-.012em}
  .h4{font-size:1rem;font-weight:700;line-height:1.32}
  .lead{font-size:clamp(1rem,1.5vw,1.1875rem);line-height:1.6;color:var(--text-2);max-width:54ch}
  .small{font-size:.875rem;line-height:1.55;color:var(--text-3);max-width:60ch}
  .tiny{font-size:.8125rem;line-height:1.5;color:var(--text-4)}
  .note{font-size:.75rem;line-height:1.5;color:var(--text-4);max-width:60ch}
  .mono{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
  .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
  .tl{color:var(--teal-ink)}
  .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .strike{text-decoration:line-through;text-decoration-color:var(--mag);
          text-decoration-thickness:1px;color:var(--text-4)}

  .gline{height:2px;border-radius:2px;background:var(--grad-line);border:0}
  .tline{height:2px;border-radius:2px;background:var(--tri-line);border:0}

  /* ---- Кнопки ---- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-weight:700;font-size:.9375rem;line-height:1;
    padding:15px 26px;border-radius:var(--r-pill);
    border:1px solid transparent;cursor:pointer;white-space:nowrap;
    transition:transform .18s var(--ease),box-shadow .18s var(--ease),
               background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
  }
  .btn:active{transform:translateY(1px)}
  /* ЖЁЛТАЯ КНОПКА НА ЭКРАНЕ СТРОГО ОДНА */
  .btn--y{background:var(--yellow);color:#141410;box-shadow:0 10px 30px -14px rgba(242,232,75,.55)}
  .btn--y:hover{background:#F7EF6B;transform:translateY(-2px);box-shadow:0 16px 38px -14px rgba(242,232,75,.62)}
  .btn--ghost{border-color:var(--border-2);color:var(--text)}
  .btn--ghost:hover{border-color:var(--teal);color:var(--teal-ink);transform:translateY(-2px)}
  .btn--solid{background:var(--text);color:var(--surface)}
  .btn--solid:hover{transform:translateY(-2px);box-shadow:var(--shadow-hi)}
  .btn--sm{padding:11px 18px;font-size:.875rem}

  .tlink{
    display:inline-flex;align-items:center;gap:7px;
    font-size:.875rem;font-weight:600;color:var(--text-3);
    border-bottom:1px solid var(--border-2);padding:9px 0 8px;
    transition:color .18s var(--ease),border-color .18s var(--ease);
  }
  .tlink:hover{color:var(--teal-ink);border-color:var(--teal)}

  /* ---- Карточки ---- */
  .card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
    padding:24px;box-shadow:var(--shadow-card);
  }
  .card--flat{box-shadow:none}
  .card--pad-lg{padding:clamp(22px,3vw,34px)}
  /* «стекло» — только в тёмном контексте и БЕЗ backdrop-filter (П-2) */
  .on-dark .card--glass{
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
    border-color:rgba(255,255,255,.12);
  }
  .card--rail{border-left:3px solid var(--slate-line)}
  .card--rail.is-bad{border-left-color:var(--bad)}
  .card--rail.is-warn{border-left-color:var(--warn)}
  .card--rail.is-good{border-left-color:var(--good)}
  .card--rail.is-brand{border-left-color:var(--violet)}   /* ТЗ 10 п.8: цитаты на 08 — брендовая полоса, не «вердикт» */
  .card--rail.is-fake{border-left-color:var(--fake);background:var(--fake-soft)}
  .card--rail.is-off{border-left-color:var(--off);background:var(--off-soft)}

  /* ---- Объёмная иконка ----
     Объём даётся не картинкой, а светом: градиентная подложка, внутренний
     блик сверху и мягкая тень снизу. По наведению плитка слегка
     поворачивается в перспективе и приподнимается.

     Анимируются только transform и box-shadow, поворот включается ТОЛЬКО
     там, где есть мышь — на тач-экранах :hover залипает. */
  .ic3d{
    width:46px;height:46px;border-radius:14px;flex:none;
    display:grid;place-items:center;color:var(--teal-ink);
    background:linear-gradient(155deg,#FFFFFF,var(--surface-3));
    border:1px solid var(--border-2);
    box-shadow:0 2px 5px rgba(15,23,42,.08),inset 0 1px 0 #FFFFFF;
    transition:transform .34s var(--ease-out),box-shadow .34s var(--ease-out),
               color .24s var(--ease),border-color .24s var(--ease);
  }
  .ic3d svg{width:22px;height:22px;stroke:currentColor;fill:none;
            stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .on-dark .ic3d{
    background:linear-gradient(155deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
    border-color:rgba(255,255,255,.16);color:var(--teal);
    box-shadow:0 2px 5px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.10);
  }
  @media (hover:hover){
    .ic3d:hover,
    .ptile:hover .ic3d,
    .card:hover>.ic3d,
    .card:hover .ic3d{
      transform:perspective(420px) rotateX(-10deg) rotateY(13deg) translateY(-3px) scale(1.05);
      box-shadow:0 16px 28px -14px rgba(15,23,42,.34),inset 0 1px 0 #FFFFFF;
      color:var(--teal);border-color:var(--teal);
    }
    .on-dark .ic3d:hover,
    .on-dark .card:hover .ic3d{
      box-shadow:0 16px 28px -14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.14);
    }
  }
  @media (prefers-reduced-motion:reduce){
    .ic3d{transition:none}
    .ic3d:hover,.ptile:hover .ic3d,.card:hover .ic3d{transform:none}
  }

  /* ---- Карточка чуть приподнимается под курсором ---- */
  @media (hover:hover){
    .card{transition:transform .26s var(--ease-out),box-shadow .26s var(--ease-out),
                     border-color .2s var(--ease)}
    .sec .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hi)}
  }
  @media (prefers-reduced-motion:reduce){ .sec .card:hover{transform:none} }

  /* ---- Ступенчатое появление внутри уже появившегося блока ----
     Родитель .reveal получает .in — дети въезжают по очереди.
     Только transform и opacity, один прогон. */
  .reveal .fstep,
  .reveal .ptile,
  .reveal .honest__i{
    opacity:0;transform:translate3d(-14px,0,0);
    transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
  }
  .reveal.in .fstep,
  .reveal.in .ptile,
  .reveal.in .honest__i{opacity:1;transform:none}
  .reveal.in .fstep:nth-child(2),
  .reveal.in .ptile:nth-child(2),
  .reveal.in .honest__i:nth-child(2){transition-delay:.07s}
  .reveal.in .fstep:nth-child(3),
  .reveal.in .ptile:nth-child(3),
  .reveal.in .honest__i:nth-child(3){transition-delay:.14s}
  .reveal.in .fstep:nth-child(4),
  .reveal.in .ptile:nth-child(4),
  .reveal.in .honest__i:nth-child(4){transition-delay:.21s}
  .reveal.in .fstep:nth-child(5){transition-delay:.28s}
  .reveal.in .fstep:nth-child(6){transition-delay:.35s}
  @media (prefers-reduced-motion:reduce){
    .reveal .fstep,.reveal .ptile,.reveal .honest__i{opacity:1;transform:none;transition:none}
  }
  html:not(.js) .reveal .fstep,
  html:not(.js) .reveal .ptile,
  html:not(.js) .reveal .honest__i{opacity:1;transform:none}

  /* ---- Чипы ---- */
  .chip{
    display:inline-flex;align-items:center;gap:7px;
    font-size:.75rem;font-weight:600;line-height:1;
    padding:7px 12px;border-radius:var(--r-pill);
    border:1px solid var(--border);background:var(--surface);color:var(--text-3);
    white-space:nowrap;
  }
  .chip--good{background:var(--good-soft);border-color:var(--good-line);color:var(--good)}
  .chip--warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
  .chip--bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad)}
  .chip--plan{background:var(--plan-soft);border-color:var(--plan-line);color:var(--plan)}
  .chip--fake{background:var(--fake-soft);border-color:var(--fake-line);color:var(--fake)}
  .chip--off{background:var(--off-soft);border-color:var(--off-line);color:var(--off)}
  .chip--unk{background:var(--unk-soft);border-color:var(--unk-line);color:var(--unk)}
  .chip__dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
  /* на узком экране шапка макета переносится, и прижатый вправо чип
     уезжал на отдельную строку к самому краю */
  .chip--push{margin-left:auto}
  @media (max-width:560px){.screen__bar .chip--push{margin-left:0}}

  .badge{
    font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.06em;
    padding:3px 7px;border-radius:5px;border:1px solid var(--border);color:var(--text-4);
  }
  .badge--a{color:var(--good);border-color:var(--good-line);background:var(--good-soft)}
  .badge--b{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
  .badge--c{color:var(--plan);border-color:var(--plan-line);background:var(--plan-soft)}
  .badge--d{color:var(--text-4);border-color:var(--border);background:var(--slate-soft)}

  /* ---- KPI-плитка ---- */
  .kpi{display:flex;flex-direction:column;gap:5px;min-width:0}
  /* .blocklbl — тот же вид, но как самостоятельный мини-заголовок блока.
     Раньше для этого брали .kpi__lbl, и правка KPI-плитки поехала бы
     заголовками в шести секциях. */
  .kpi__lbl,.blocklbl{font-family:var(--mono);font-size:.625rem;font-weight:700;
            text-transform:uppercase;letter-spacing:.09em;color:var(--text-4)}
  .kpi__val{font-size:clamp(1.5rem,3.1vw,2.125rem);font-weight:800;line-height:1.05;
            letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text)}
  .kpi__sub{font-size:.75rem;color:var(--text-4);font-variant-numeric:tabular-nums}
  /* ТЗ 6: плитка зоны — сумма крупно (в цвет зоны — inline), подпись зоны, штуки и доля */
  .kpi__sum{font-size:clamp(1.5rem,3.1vw,2.125rem);font-weight:800;line-height:1.05;
            letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text)}

  /* ---- Полоса зон. Наливается ТОЛЬКО через scaleX (П-4) ---- */
  .zbar{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden;
        background:var(--surface-2)}
  .zbar__seg{height:100%;transform-origin:left center;border-radius:4px;
             transform:scaleX(0);transition:transform .7s var(--ease-out)}
  .zbar.in .zbar__seg{transform:scaleX(1)}
  .zbar.in .zbar__seg:nth-child(2){transition-delay:.08s}
  .zbar.in .zbar__seg:nth-child(3){transition-delay:.16s}
  .zbar__seg--stop{background:var(--mag)}
  .zbar__seg--warn{background:var(--plan)}   /* ТЗ 7: зона «требует внимания» — жёлтая, как на экране платформы */
  .zbar__seg--live{background:var(--good)}

  /* ---- Рамка «экран продукта» ---- */
  .screen{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
    box-shadow:var(--shadow-xl);overflow:hidden;
  }
  .screen__bar{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding:13px 18px;border-bottom:1px solid var(--border);background:var(--surface-3);
  }
  .screen__ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
              border:1px solid var(--border-2);color:var(--teal-ink)}
  .screen__title{font-size:.8125rem;font-weight:700;color:var(--text-2)}
  .screen__meta{font-family:var(--mono);font-weight:500;font-size:.625rem;letter-spacing:.06em;
                text-transform:uppercase;color:var(--text-4)}
  .screen__body{padding:clamp(16px,2.4vw,26px)}
  .screen__foot{padding:11px 18px;border-top:1px solid var(--border);background:var(--surface-3);
                font-size:.6875rem;color:var(--text-4);font-family:var(--mono);font-weight:500}

  /* Пары «заголовок + подпись» размечены вложенными <span>, чтобы не плодить
     блочные обёртки внутри <p> и ссылок. Строчными они склеиваются в одну
     строку — поэтому здесь единый выключатель. */
  .sect__title,.sect__sub,
  .panel__t,.panel__m,
  .fstep__t,.fstep__s{display:block}

  /* ---- Нумерованный заголовок раздела (как в продукте) ---- */
  .sect{display:flex;align-items:flex-start;gap:13px;margin:0 0 14px}
  .sect__num{font-family:var(--mono);font-size:.8125rem;font-weight:700;letter-spacing:.08em;
             color:var(--accent);padding-top:3px;flex:none}
  .sect__title{font-size:1rem;font-weight:700;color:var(--text);line-height:1.3}
  .sect__sub{font-size:.8125rem;color:var(--text-4);margin-top:3px;max-width:680px;line-height:1.5}

  /* ---- Тепловая карта ---- */
  .heat{width:100%;border-collapse:separate;border-spacing:3px;font-variant-numeric:tabular-nums}
  .heat th{font-family:var(--mono);font-size:.625rem;font-weight:700;color:var(--text-4);
           text-align:center;padding:0 0 4px;letter-spacing:.04em}
  /* .heat th задаёт center — селектор с классом обязан быть не слабее,
     иначе имена сотрудников центрируются и наезжают на сетку */
  .heat th.heat__who{text-align:left;min-width:104px}
  .heat td{padding:0}
  .heat th.heat__name{font-size:.8125rem;font-weight:600;color:var(--text-2);
                      white-space:nowrap;padding:0 8px 0 0;text-align:left;
                      text-transform:none;letter-spacing:0;font-family:var(--sans)}
  .heat__c{display:block;height:28px;border-radius:5px;border:1px solid transparent;
           background:var(--surface-2);transition:transform .16s var(--ease)}
  .heat__c[data-v="1"]{background:rgba(30,217,163,.18);border-color:rgba(30,217,163,.22)}
  .heat__c[data-v="2"]{background:rgba(30,217,163,.36);border-color:rgba(30,217,163,.30)}
  .heat__c[data-v="3"]{background:rgba(30,217,163,.58);border-color:rgba(30,217,163,.40)}
  .heat__c[data-v="4"]{background:rgba(30,217,163,.84);border-color:rgba(30,217,163,.50)}
  @media (hover:hover){.heat__c:hover{transform:scale(1.14)}}
  .heatkey{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:500;
           font-size:.625rem;color:var(--text-4);letter-spacing:.06em}
  .heatkey i{width:17px;height:11px;border-radius:3px;display:block}

  /* ---- Столбики по дням ---- */
  .bars{display:flex;align-items:flex-end;gap:clamp(4px,1vw,9px);height:128px}
  .bars__col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-width:0}
  .bars__seg{border-radius:3px 3px 1px 1px;transform-origin:bottom center;
             transform:scaleY(0);transition:transform .55s var(--ease-out)}
  .bars.in .bars__seg{transform:scaleY(1)}
  .bars__seg--m{background:var(--fake)}
  .bars__seg--o{background:var(--off)}
  .bars__seg--live{background:var(--accent)}
  .bars__seg--dim{background:var(--border-2)}   /* выходные */
  .bars__x{display:flex;gap:clamp(4px,1vw,9px);margin-top:8px;
           font-family:var(--mono);font-weight:500;font-size:.5625rem;color:var(--text-4)}
  .bars__x span{flex:1;text-align:center;min-width:0;overflow:hidden}

  /* ---- Сломанный виджет: «CRM говорит / на самом деле» ---- */
  .broken{padding:14px 16px;border-radius:var(--r-md);background:var(--surface-2);
          border:1px solid var(--border)}
  /* ТЗ 6: в CRM всё выглядит хорошо (зелёным) и зачёркнуто красным; на самом деле — красным */
  .broken__was{font-size:.8125rem;color:var(--good);font-variant-numeric:tabular-nums}
  .broken__was .strike{color:var(--good);text-decoration-thickness:2px}
  .broken__is{font-size:.9375rem;font-weight:700;color:var(--mag-ink);margin-top:7px;
              padding-left:11px;border-left:3px solid var(--mag);
              font-variant-numeric:tabular-nums;line-height:1.4}
  .on-dark .broken__is{color:var(--mag)}
  .broken__note{font-size:.6875rem;color:var(--text-4);margin-top:9px;line-height:1.5}

  /* ---- Таблица данных ---- */
  .tbl{width:100%;border-collapse:collapse;font-size:.875rem}
  .tbl th{font-family:var(--mono);font-size:.625rem;font-weight:700;text-transform:uppercase;
          letter-spacing:.08em;color:var(--text-4);text-align:left;
          padding:0 12px 9px 0;border-bottom:1px solid var(--border);white-space:nowrap}
  .tbl td{padding:11px 12px 11px 0;border-bottom:1px solid var(--border);
          color:var(--text-2);vertical-align:middle}
  .tbl tr:last-child td{border-bottom:0}
  .tbl .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .tbl b{color:var(--text);font-weight:700}

  /* ---- Скроллер: широкий контент едет внутри, страница НЕ едет вбок ---- */
  /* Тени по краям появляются, только когда есть куда листать, и гаснут
     у края — иначе на телефоне широкая таблица просто обрезается, и это
     читается как сломанная вёрстка, а не как «листается вбок».
     Работает без JS: слои с background-attachment:local едут вместе с
     содержимым и закрывают тени, пока прокрутка в начале или в конце. */
  .scroller{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
            padding-bottom:4px;
            background:
              linear-gradient(to right, var(--surface) 42%, rgba(255,255,255,0)) left center / 34px 100% no-repeat local,
              linear-gradient(to left,  var(--surface) 42%, rgba(255,255,255,0)) right center / 34px 100% no-repeat local,
              radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.16), rgba(15,23,42,0)) left center / 13px 100% no-repeat scroll,
              radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.16), rgba(15,23,42,0)) right center / 13px 100% no-repeat scroll;}
  .on-dark .scroller{
            background:
              linear-gradient(to right, #15131f 42%, rgba(21,19,31,0)) left center / 34px 100% no-repeat local,
              linear-gradient(to left,  #15131f 42%, rgba(21,19,31,0)) right center / 34px 100% no-repeat local,
              radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) left center / 13px 100% no-repeat scroll,
              radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) right center / 13px 100% no-repeat scroll;}
  .scroller>*{min-width:600px}
  /* тепловой карте 600px не нужны: 10 колонок по 28px + имя.
     Иначе она скроллится даже там, где помещается целиком */
  .scroller>.heat{min-width:460px}

  /* ---- Появление (только transform/opacity) ---- */
  .reveal{opacity:0;transform:translate3d(0,18px,0);
          transition:opacity .62s var(--ease-out),transform .62s var(--ease-out)}
  .reveal.in{opacity:1;transform:none}

  /* БЕЗ JS СТРАНИЦА ОБЯЗАНА ЧИТАТЬСЯ. Класс `js` ставит app2.js; если он
     не загрузился или заблокирован, все эффекты появления выключаются,
     иначе лендинг оказался бы пустым: 32 блока из 32 с нулевой прозрачностью. */
  html:not(.js) .reveal{opacity:1;transform:none;transition:none}
  html:not(.js) .zbar__seg,
  html:not(.js) .bars__seg{transform:none;transition:none}
  html:not(.js) .quiz__bar{transform:scaleX(1)}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
    .zbar__seg,.bars__seg{transform:none;transition:none}
  }
}

/* ===========================================================================
   SECTIONS
   =========================================================================== */
@layer sections {

  /* ---- Шапка ---- */
  .nav{
    position:sticky;top:0;z-index:50;
    background:rgba(11,10,20,.84);border-bottom:1px solid rgba(255,255,255,.08);
    /* П-2: blur допустим — элемент sticky, не перекрашивает контент в потоке */
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    transition:background-color .25s var(--ease),border-color .25s var(--ease);
  }
  .nav.is-light{background:rgba(255,255,255,.88);border-bottom-color:var(--border)}
  .nav__in{display:flex;align-items:center;gap:22px;height:var(--nav-h)}
  .nav__logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;
             font-size:1.0625rem;color:#EAF3F1;transition:color .25s var(--ease)}
  .nav.is-light .nav__logo{color:#0F172A}
  .nav__mark{width:26px;height:26px;border-radius:8px;background:var(--grad);flex:none}
  /* gap 16, а не 20: с шестью пунктами при ширине макета 1180 полоса
     не помещалась и ссылки переносили текст на вторую строку */
  .nav__links{display:flex;gap:16px;font-size:.875rem;font-weight:600}
  .nav__links a{color:rgba(234,243,241,.72);transition:color .18s var(--ease)}
  .nav__links a:hover{color:#1ED9A3}
  .nav.is-light .nav__links a{color:#475569}
  .nav.is-light .nav__links a:hover{color:#0B7A5C}

  /* ---- Мобильное меню ----
     До этого на ≤940px пункты просто скрывались и замены не было:
     на телефоне по тринадцати секциям навигации не оставалось вообще.
     Сделано на <details>: раскрытие, клавиатура и доступность — от браузера,
     JS нужен только чтобы закрыть панель после перехода по якорю. */
  .mnav{display:none;margin-left:12px;position:relative}
  .mnav>summary{
    list-style:none;cursor:pointer;width:44px;height:44px;
    display:grid;place-items:center;border-radius:12px;
    border:1px solid rgba(255,255,255,.16);
  }
  .mnav>summary::-webkit-details-marker{display:none}
  .nav.is-light .mnav>summary{border-color:var(--border-2)}
  /* Кнопка «Обсудить» стоит в тёмной шапке, а .btn--ghost красит текст
     в var(--text) — на первом экране это тёмное на тёмном, контраст 1,2:1
     и кнопка выглядит выключенной. Задаём цвет явно для обоих состояний шапки. */
  .nav .btn--ghost{color:#EAF3F1;border-color:rgba(255,255,255,.28)}
  .nav .btn--ghost:hover{color:#1ED9A3;border-color:#1ED9A3}
  .nav.is-light .btn--ghost{color:#0F172A;border-color:var(--border-2)}
  .nav.is-light .btn--ghost:hover{color:#0B7A5C;border-color:#1ED9A3}

  .mnav__ico{display:grid;gap:4px;width:17px}
  .mnav__ico i{display:block;height:2px;border-radius:2px;background:#EAF3F1;
               transition:transform .22s var(--ease),opacity .22s var(--ease)}
  .nav.is-light .mnav__ico i{background:#0F172A}
  .mnav[open] .mnav__ico i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .mnav[open] .mnav__ico i:nth-child(2){opacity:0}
  .mnav[open] .mnav__ico i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  .mnav__panel{
    position:absolute;right:0;top:calc(100% + 12px);
    width:min(78vw,300px);padding:10px;
    background:#15131f;border:1px solid rgba(255,255,255,.12);
    border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(0,0,0,.6);
    display:flex;flex-direction:column;gap:2px;
    max-height:min(80vh,660px);overflow-y:auto;overscroll-behavior:contain;
  }
  /* Плотнее, чтобы все одиннадцать пунктов помещались без прокрутки внутри меню */
  .mnav__panel a{
    display:flex;align-items:center;gap:10px;padding:13px 12px;border-radius:10px;
    font-size:.875rem;font-weight:600;color:#C8D4D2;line-height:1.3;
  }
  .mnav__panel a:hover,.mnav__panel a:focus-visible{background:rgba(255,255,255,.06);color:#EAF3F1}
  .mnav__panel a span{font-family:var(--mono);font-weight:500;font-size:.6875rem;color:#8C9CA8;flex:none;width:20px}
  .mnav__sep{height:1px;background:rgba(255,255,255,.10);margin:6px 4px}

  /* Порог 1140, а не 940: с шести пунктов полоса меню помещается в одну
     строку только до ~1160 px, ниже ссылки начинали переносить текст и шапка
     становилась двухэтажной. Вместо этого раньше отдаём бургер — в нём все
     разделы целиком. Ужимать подписи нельзя: их формулировки согласованы. */
  @media (max-width:1160px){
    .nav__links{display:none}
    .mnav{display:block}
    /* ТЗ 8 §3.3: кнопка «Оставьте заявку» остаётся и на телефоне (раньше пряталась —
       длинная подпись уводила 390 px в горизонтальную прокрутку); ≤ 560 px подпись короткая «Заявка» */
    .nav__cta{display:block}
  }
  .nav__cta-short{display:none}
  /* Правую группу отжимает САМ логотип. Раньше это делала кнопка «Обсудить»,
     и стоило её спрятать на узком экране — панель меню уезжала за левый край. */
  .nav__logo{margin-right:auto}
  @media (max-width:940px){ .nav__in{gap:12px} }
  @media (max-width:560px){
    .nav__cta .btn{padding:10px 14px;font-size:.8125rem}
    .nav__cta-full{display:none}
    .nav__cta-short{display:inline}
    .nav__logo{font-size:.9375rem}
  }

  /* iOS сам зумит страницу, если у поля ввода кегль меньше 16px.
     На телефоне поднимаем до 16px — иначе при тапе по полю экран прыгает. */
  @media (max-width:760px){
    .field input,.field select,.field textarea{font-size:1rem}
    /* ссылки футера были 23px высотой — ниже минимума для пальца */
    .footer__list{gap:0}
    .footer__list a{display:block;padding:11px 0}
  }

  /* ---- Секция ----
     overflow-x:clip — общий предохранитель против «страница едет вбок».
     Именно clip, а не hidden: он не создаёт скролл-контейнер и не ломает
     position:sticky. Широкий контент внутри секций живёт в .scroller. */
  .sec{padding:var(--sp-sec) 0;position:relative;overflow-x:clip}
  .sec--tight{padding:clamp(48px,5vw,76px) 0}
  .sec--light{background:var(--bg)}
  .sec--paper{background:#FFFFFF}
  /* Белая карточка на белой секции держалась только границей 1,29:1 —
     читалась как «текст без карточки». Подкладываем оттенок. */
  .sec--paper .card{background:var(--surface-3)}
  .sec--paper .card,.sec--paper .screen{border-color:var(--border-2)}
  /* …но цветную рельсу это правило гасило: border-color задаёт все четыре
     стороны и перебивало .card--rail по позднему объявлению. Цвет рельсы
     несёт смысл (зелёное — сработало, розовое — риск), поэтому возвращаем. */
  .sec--paper .card--rail{border-left-color:var(--slate-line)}
  .sec--paper .card--rail.is-bad{border-left-color:var(--bad)}
  .sec--paper .card--rail.is-warn{border-left-color:var(--warn)}
  .sec--paper .card--rail.is-good{border-left-color:var(--good);background:var(--good-soft)}
  .sec--paper .card--rail.is-brand{border-left-color:var(--violet)}   /* ТЗ 10 п.8: пара к .is-brand, иначе на белом экране полоса станет серой */
  .sec--paper .card--rail.is-fake{border-left-color:var(--fake);background:var(--fake-soft)}
  .sec--paper .card--rail.is-off{border-left-color:var(--off);background:var(--off-soft)}
  .sec--dark{background:#0b0a14}
  /* П-6. content-visibility:auto НЕ ПРИМЕНЯТЬ к секциям с .reveal:
     пропущенный рендер не даёт IntersectionObserver отработать, и содержимое
     остаётся невидимым навсегда (инцидент 21.08.2026). Класс удалён,
     чтобы им нельзя было воспользоваться по ошибке. */

  .head{margin-bottom:clamp(28px,3.4vw,46px);max-width:78ch}
  .head .lead{margin-top:14px}

  /* ---- HERO ---- */
  .hero{background:#0b0a14;position:relative;overflow:hidden;
        padding:clamp(84px,10vw,132px) 0 clamp(28px,3.4vw,44px)}   /* ТЗ 10 п.4: низ ужат — под героем сразу коробка «Дальше на странице» */
  /* Атмосфера: СТАТИЧНЫЕ градиенты + точечная сетка. Ни blur, ни blend (П-1,П-2) */
  .hero__fx{
    position:absolute;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(78% 52% at 14% -6%,rgba(30,217,163,.16),transparent 58%),
      radial-gradient(72% 50% at 88% 6%,rgba(124,92,252,.14),transparent 60%),
      radial-gradient(120% 100% at 50% 104%,transparent 52%,rgba(0,0,0,.55));
  }
  .hero__grid{
    position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
    background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
    background-size:26px 26px;
    -webkit-mask:radial-gradient(74% 60% at 50% 24%,#000 10%,transparent 76%);
            mask:radial-gradient(74% 60% at 50% 24%,#000 10%,transparent 76%);
  }
  /* ТЗ 5: hero одноколоночный — панель со сделкой ушла в экран 01 (#lost) */
  .hero__in{position:relative;z-index:1;display:grid;gap:clamp(36px,4.6vw,58px);
            grid-template-columns:minmax(0,1fr);align-items:center}
  .hero__copy{max-width:64ch}
  /* ТЗ 9 доводка 3 (07.09): карточка цифр с первого экрана убрана — на широком мониторе текст стоит по центру */
  @media (min-width:981px){
    .hero__copy{margin:0 auto;text-align:center}
    .hero__copy .hero__sub,.hero__copy .hero__tag{margin-left:auto;margin-right:auto}
    .hero__cta{justify-content:center}   /* .hero__gains — grid (ТЗ 10 п.2), центровка ему не нужна */
  }
  /* пять слов выгоды — крупнее обычных чипов */
  /* ТЗ 10 п.2: шесть выгод сеткой 3 × 2 (≤700 — две колонки, ≤420 — одна), без точек-разделителей */
  .hero__gains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:26px}
  .hero__gains .chip{justify-content:center;text-align:center;font-size:.9375rem;font-weight:700;padding:10px 15px;color:var(--text);white-space:normal;line-height:1.25}   /* ТЗ 8: шестой чип длинный — на телефоне переносится, а не режется */
  @media (max-width:700px){.hero__gains{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:420px){.hero__gains{grid-template-columns:minmax(0,1fr)}}
  /* ТЗ 6: строка-девиз под H1 */
  .hero__tag{margin-top:18px;font-size:clamp(1.25rem,2vw,1.5rem);font-weight:800;line-height:1.25;
             letter-spacing:-.015em;color:var(--text-2)}
  .hero__tag b{color:var(--teal)}

  .hero__sub{margin-top:20px;font-size:clamp(1rem,1.5vw,1.125rem);line-height:1.6;
             color:var(--text-2);max-width:56ch}
  .hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:30px}
  .hero__pre{
    margin-top:24px;padding:13px 16px;border-radius:var(--r-md);
    border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);
    font-size:.8125rem;line-height:1.55;color:var(--text-3);max-width:58ch;
  }
  .hero__pre b{color:var(--teal);font-weight:700}

  /* Панель-макет в первом экране: РОВНО три блока данных */
  .panel{
    border-radius:var(--r-xl);padding:clamp(18px,2.4vw,26px);
    background:linear-gradient(180deg,rgba(24,26,42,.96),rgba(14,15,24,.97));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 30px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(30,217,163,.06);
  }
  .panel__bar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
              padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.09)}
  .panel__ic{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;
             border:1px solid rgba(30,217,163,.35);color:var(--teal);
             background:rgba(30,217,163,.07)}
  .panel__t{font-size:.9375rem;font-weight:700;color:var(--text);line-height:1.2}
  .panel__m{font-family:var(--mono);font-weight:500;font-size:.625rem;letter-spacing:.07em;
            text-transform:uppercase;color:var(--text-4);margin-top:2px}
  /* Цифра — моноширинная (разряды не прыгают при счёте),
     единица измерения — обычным шрифтом, иначе mono разгоняет «млн ₽» в кашу */
  .panel__big{
    display:flex;align-items:baseline;gap:.26em;flex-wrap:wrap;
    font-size:clamp(2.125rem,4.4vw,3.125rem);line-height:1.02;
    color:var(--mag);text-shadow:0 0 22px rgba(233,75,123,.20);
  }
  .panel__num{font-family:var(--mono);font-weight:700;letter-spacing:-.03em;
              font-variant-numeric:tabular-nums}
  .panel__unit{font-family:var(--sans);font-weight:700;font-size:.42em;
               letter-spacing:-.01em;opacity:.92}
  .panel__cap{font-size:.8125rem;color:var(--text-3);margin-top:7px;font-variant-numeric:tabular-nums}
  .panel__under{text-align:center;font-size:.75rem;color:var(--text-4);
                margin-top:16px;line-height:1.5}

  /* Полоса доказательств */
  .proof{
    margin-top:clamp(42px,5vw,64px);padding-top:26px;
    border-top:1px solid rgba(255,255,255,.09);
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 20px;
  }
  @media (max-width:900px){.proof{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media (max-width:560px){.proof{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .proof__n{font-size:clamp(1.125rem,2.2vw,1.5rem);font-weight:800;letter-spacing:-.028em;
            color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1}
  .proof__l{font-size:.75rem;color:var(--text-4);margin-top:5px;line-height:1.45}
  .proof__note{grid-column:1/-1;font-family:var(--mono);font-weight:500;font-size:.6875rem;
               color:var(--text-faint);line-height:1.6}

  /* ---- Сетки ---- */
  .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,26px)}
  .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,26px)}
  .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,20px)}
  @media (max-width:980px){.grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
  /* minmax(0,1fr), а не 1fr: у 1fr минимум = min-content, и карточка с таблицей
     в .scroller (min-width 600px) растягивала колонку до 676px на телефоне
     (product.html #monitor, поймано narrow_check3 04.09) */
  @media (max-width:700px){.grid2,.grid3,.grid4{grid-template-columns:minmax(0,1fr)}}


  /* Раздел «Что видно в CRM»: в первой карточке зелёная строка занимает две
     строки, в остальных одну — из-за этого абзацы под ними начинались на
     разной высоте. Держим место под две строки во всех трёх. */
  #silence .card{display:flex;flex-direction:column}
  #silence .broken__is{min-height:2.8em;display:flex;align-items:center}

  /* Широкая колонка всегда достаётся макету продукта, а не тексту.
     В --rev макет идёт первым, поэтому и шаблон колонок зеркалим —
     иначе экран уезжает в узкую колонку и таблицы начинают скроллиться. */
  .split{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
         gap:clamp(28px,4vw,54px);align-items:center}
  .split--rev{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
  .split--rev>*:first-child{order:2}
  @media (max-width:980px){
    .split,.split--rev{grid-template-columns:1fr}
    .split--rev>*:first-child{order:0}
  }

  /* Карточка вердикта была собрана пятью экземплярами с тремя разными
     паддингами и цветом заголовка инлайном. Один компонент вместо этого. */
  .vpair.vpair--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  @media (max-width:860px){.vpair.vpair--3{grid-template-columns:minmax(0,1fr)}}
  .vcard{padding:15px 17px}
  .vcard .h4{color:var(--fake)}
  .vcard.vdemoted .h4{color:var(--text-2)}

  /* ---- Воронка судьи переносов ---- */
  .funnel{display:flex;flex-direction:column;gap:10px}
  .fstep{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;
         padding:15px 18px;border-radius:var(--r-md);
         border:1px solid var(--border);background:var(--surface)}
  .fstep__t{font-size:.9375rem;font-weight:600;color:var(--text-2)}
  .fstep__s{font-size:.75rem;color:var(--text-4);margin-top:3px;line-height:1.45}
  .fstep__n{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;
            letter-spacing:-.02em;color:var(--text);white-space:nowrap}
  .fstep--mid{margin-left:clamp(0px,4vw,54px)}
  .fstep--out{margin-left:clamp(0px,8vw,108px)}
  .fstep--fake{border-color:var(--fake-line);background:var(--fake-soft)}
  .fstep--fake .fstep__n,.fstep--fake .fstep__t{color:var(--fake)}
  .fstep--off{border-color:var(--off-line);background:var(--off-soft)}
  .fstep--off .fstep__n,.fstep--off .fstep__t{color:var(--off)}
  .fstep--unk{border-color:var(--unk-line);background:var(--unk-soft)}
  .fstep--unk .fstep__n,.fstep--unk .fstep__t{color:var(--unk)}
  .fstep--good{border-color:var(--good-line);background:var(--good-soft)}
  .fstep--good .fstep__n,.fstep--good .fstep__t{color:var(--good)}

  /* ---- Вердикт с цитатой ---- */
  .vquote{font-family:var(--mono);font-weight:500;font-size:.8125rem;line-height:1.55;color:var(--text-2);
          padding:11px 14px;border-radius:var(--r-sm);background:var(--surface-2);
          border-left:2px solid var(--border-2);margin:11px 0}
  .vmeta{font-family:var(--mono);font-weight:500;font-size:.6875rem;color:var(--text-4);
         letter-spacing:.03em;line-height:1.6}
  .vpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
  @media (max-width:820px){.vpair{grid-template-columns:1fr}}
  /* Отклонённый вердикт должен читаться, а не исчезать: он и есть доказательство,
     что проверка работает. Гасим ровно настолько, чтобы было видно «это не в счёт» */
  .vdemoted{filter:grayscale(.7);opacity:.72}
  .vstamp{display:inline-block;font-family:var(--mono);font-size:.625rem;font-weight:700;
          letter-spacing:.07em;text-transform:uppercase;color:var(--unk);
          border:1px dashed var(--unk-line);border-radius:5px;padding:5px 9px;margin-top:11px}



  /* ============================================================
     ПЛАТФОРМА — рамка-схема. Раньше здесь был список карточек,
     и он читался как «ещё немного текста». Теперь это один
     физический объект: обведённая панель с подписью, врезанной
     в рамку, четыре плитки продуктов, общий слой под ними
     и фундамент — Битрикс24.
     ============================================================ */
  .platform{
    position:relative;border:1px solid var(--border-2);border-radius:var(--r-xl);
    background:var(--surface-3);padding:clamp(24px,3.4vw,38px);
    box-shadow:var(--shadow-hi);
  }
  .platform::before{
    content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;
    border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--tri-line);
  }
  /* подпись сидит НА рамке — подложка обязана совпадать с фоном секции */
  .platform__label{
    position:absolute;top:0;left:clamp(24px,3.4vw,38px);transform:translateY(-50%);
    background:#FFFFFF;padding:3px 11px;border-radius:var(--r-pill);
    border:1px solid var(--border-2);
    font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.13em;
    text-transform:uppercase;color:var(--teal-ink);white-space:nowrap;
  }

  .platform__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
                  gap:clamp(12px,1.6vw,18px);margin-top:10px}
  @media (max-width:980px){.platform__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:560px){.platform__grid{grid-template-columns:1fr}}

  .ptile{
    display:flex;flex-direction:column;gap:8px;min-width:0;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
    padding:18px 18px 20px;
    transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
  }
  /* Плитки — ссылки на разделы. Наследуем цвет текста, чтобы плитка
     не превратилась в синее полотно, но оставляем видимый фокус. */
  .ptile{color:inherit;text-decoration:none}
  .ptile:hover{border-color:var(--border-2);transform:translateY(-2px);box-shadow:var(--shadow-card)}
  .ptile:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
  .ptile__name{text-decoration:underline;text-decoration-color:transparent;
               text-underline-offset:3px;transition:text-decoration-color .18s var(--ease)}
  .ptile:hover .ptile__name{text-decoration-color:var(--violet)}
  .ptile__top{display:flex;align-items:center;gap:9px}
  .ptile__n{font-family:var(--mono);font-size:.75rem;font-weight:700;color:var(--violet);
            letter-spacing:.06em}
  .ptile__who{font-family:var(--mono);font-size:.5625rem;font-weight:700;letter-spacing:.1em;
              text-transform:uppercase;color:var(--text-4);margin-left:auto;
              border:1px solid var(--border);border-radius:var(--r-pill);padding:3px 8px}
  .ptile__name{font-size:1rem;font-weight:700;color:var(--text);letter-spacing:-.01em;line-height:1.25}
  .ptile__d{font-size:.8125rem;line-height:1.5;color:var(--text-3)}
  /* min-height держит общую нижнюю линию ряда: у одной плитки подпись
     переносится на две строки и разделитель уезжал выше соседних. */
  .ptile__rhythm{margin-top:auto;padding-top:10px;font-family:var(--mono);font-weight:500;font-size:.625rem;
                 letter-spacing:.05em;color:var(--text-4);border-top:1px solid var(--border);
                 min-height:calc(2 * 1.5em + 10px)}
  .ptile--soon{border-style:dashed}
  .ptile--soon .ptile__name{color:var(--text-2)}

  /* общий слой под продуктами */
  .platform__layer{
    margin-top:clamp(14px,1.8vw,20px);padding:13px 18px;border-radius:var(--r-md);
    border:1px dashed var(--border-2);background:var(--surface);
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    font-size:.8125rem;color:var(--text-3);line-height:1.5;
  }
  .platform__layer b{color:var(--text);font-weight:700}

  /* фундамент */
  .platform__base{
    margin-top:clamp(12px,1.6vw,16px);padding:15px 18px;border-radius:var(--r-md);
    background:var(--text);color:var(--surface);
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    font-size:.875rem;font-weight:600;
  }
  .platform__base .note{color:rgba(255,255,255,.62);font-weight:400;margin-left:auto}
  @media (max-width:560px){.platform__base .note{margin-left:0}}

  /* ---- Аккордеон ---- */
  .acc{border-top:1px solid var(--border)}
  .acc details{border-bottom:1px solid var(--border)}
  .acc summary{list-style:none;cursor:pointer;padding:19px 42px 19px 0;position:relative;
               font-size:1rem;font-weight:700;color:var(--text)}
  .acc summary::-webkit-details-marker{display:none}
  .acc summary::after{content:"";position:absolute;right:10px;top:50%;width:9px;height:9px;
                      border-right:2px solid var(--text-4);border-bottom:2px solid var(--text-4);
                      transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease)}
  .acc details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
  .acc__body{padding:0 0 20px;color:var(--text-2);font-size:.9375rem;line-height:1.62;max-width:76ch}

  /* ---- Основатель ----
     Свечение за фото — чистый radial-gradient, БЕЗ filter:blur().
     На старом сайте здесь стоял blur(28px); на скролл-пути он запрещён (П-2),
     а мягкости градиента для этого кадра достаточно. */
  .founder{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
           column-gap:clamp(28px,5vw,60px);align-items:center}
  .founder__media{position:relative}
  /* Вынос строго в пикселях, не в процентах: процент считается от ширины фото,
     и на узком экране свечение вылезало за padding контейнера — страница ехала
     вбок на 9–15px (поймано 21.08.2026). 18px всегда меньше 26px padding у .wrap. */
  .founder__media::before{
    content:"";position:absolute;inset:-26px -18px -18px -18px;z-index:0;pointer-events:none;
    background:radial-gradient(48% 44% at 50% 48%,rgba(30,217,163,.22),rgba(124,92,252,.11) 52%,transparent 76%);
  }
  .founder__frame{
    position:relative;z-index:1;border-radius:var(--r-xl);overflow:hidden;
    border:1px solid var(--border);box-shadow:var(--shadow-xl);background:var(--surface-2);
  }
  .founder__img{display:block;width:100%;height:auto;aspect-ratio:4/5;
                object-fit:cover;object-position:50% 20%}
  .founder__role{font-size:.9375rem;color:var(--text-3);margin:0 0 18px}
  .founder__name{display:block;font-size:1.375rem;line-height:1.2;color:var(--text);
                 font-weight:800;letter-spacing:-.015em;margin-bottom:4px}
  .founder__text .lead+.lead{margin-top:14px}
  .founder__head{margin-bottom:16px}
  @media (max-width:880px){
    .founder{grid-template-columns:1fr;row-gap:24px}
    .founder__media{order:2;max-width:340px;margin:0 auto;width:100%}
    .founder__text{order:1;display:contents}
    .founder__role{order:1;margin:0 0 12px}
    .founder__head{order:3;margin-top:20px}
    .founder__text .lead{order:4}
    .founder__text .lead+.lead{order:5}
  }

  /* ---- Партнёрская программа: уровни вознаграждения ---- */
  .plevel{
    display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;
    font-family:var(--mono);font-weight:700;
    font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.1;letter-spacing:-.03em;
    color:var(--teal-ink);font-variant-numeric:tabular-nums;
  }
  .plevel__u{font-family:var(--sans);font-size:.42em;font-weight:600;
             color:var(--text-4);letter-spacing:0}
  .plevel__plus{color:var(--violet)}


  /* ---- Живой пример: полный разбор одной сделки (раздел 12) ----
     Компонент перенесён с product.html и переписан со старых тёмных токенов
     на светлые токены сайта 2.0. Имена классов сохранены — они же в едином
     источнике разметки tools/partials/deal-demo.html, и правки текста
     остаются переносимыми. Вкладки .show (ТЗ 3 §3.3) — общий компонент:
     их несколько на странице (разбор на product.html и макет карточки
     Bitrix24 на главной), поэтому без скоупа #deal; отчёт .report остаётся
     в скоупе #deal / #digest. */
  /* Панель вкладок держим В ОДНУ строку: перенос давал второй ряд из двух
     кнопок по центру — ровно та «раскиданность», от которой ушли в разделе 03.
     На широком экране шесть кнопок помещаются в полосу, на узком строка
     прокручивается вбок. Читаемую ширину задаём панели, а не всему блоку. */
  .show{max-width:none}
  .show__panel{max-width:var(--narrow);margin:0}
  .show__tabs{display:flex;flex-wrap:nowrap;gap:8px;justify-content:flex-start;margin-bottom:20px}
  @media (max-width:1180px){
    .show__tabs{justify-content:flex-start;overflow-x:auto;padding-bottom:2px;
      scrollbar-width:none;-ms-overflow-style:none;
      -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
      mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
    .show__tabs::-webkit-scrollbar{display:none}
    .show__tab{flex:none}
  }
  .show__tab{
    font-family:inherit;font-size:.8125rem;font-weight:700;color:var(--text-3);
    background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-pill,999px);
    padding:9px 16px;min-height:44px;cursor:pointer;
    transition:color .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease);
  }
  .show__tab:hover{color:var(--text);border-color:var(--border-2)}
  .show__tab.active{color:#08231c;background:var(--teal);border-color:var(--teal)}
  .show__panel{display:none}
  /* min-height держит высоту блока: вкладки очень разной длины, без него
     страница прыгает под курсором при каждом переключении */
  .show__panel.active{display:block;min-height:420px;animation:panelin .3s var(--ease-out)}
  @media (prefers-reduced-motion:reduce){.show__panel.active{animation:none}}

  .bxd .report,
  #deal .report,
  #digest .report{
    position:relative;border:1px solid var(--border-2);border-radius:var(--r-lg);
    background:var(--surface-3);padding:clamp(20px,3vw,30px);overflow:hidden;
  }
  .bxd .report__accent,
  #deal .report__accent,
  #digest .report__accent{position:absolute;top:0;left:0;height:3px;width:100%;
    background:linear-gradient(90deg,var(--teal),var(--violet),var(--mag))}
  .bxd .report__tag,
  #deal .report__tag,
  #digest .report__tag{
    display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:500;font-size:.6875rem;
    letter-spacing:.1em;text-transform:uppercase;color:#fff;
    background:linear-gradient(100deg,var(--violet),#9B7CFF);
    padding:6px 12px;border-radius:var(--r-pill,999px);margin-bottom:16px;
  }
  .bxd .report__tag .rtag-ic,
  #deal .report__tag .rtag-ic,
  #digest .report__tag .rtag-ic{width:14px;height:14px;flex:none}
  .bxd .report__title,
  #deal .report__title,
  #digest .report__title{font-size:1.1875rem;font-weight:800;letter-spacing:-.01em;
    color:var(--text);margin-bottom:8px}
  .bxd .report__client,
  #deal .report__client,
  #digest .report__client{font-size:.875rem;color:var(--text-3);margin-bottom:20px;
    padding-bottom:18px;border-bottom:1px solid var(--border)}
  .bxd .report__client b,
  #deal .report__client b,
  #digest .report__client b{color:var(--text)}
  .bxd .report__grp,
  #deal .report__grp,
  #digest .report__grp{margin-bottom:20px}
  .bxd .report__grp:last-child,
  #deal .report__grp:last-child,
  #digest .report__grp:last-child{margin-bottom:0}
  .bxd .report__h,
  #deal .report__h,
  #digest .report__h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9375rem;
    color:var(--text);margin-bottom:11px}
  .bxd .report__h .rh-ic,
  #deal .report__h .rh-ic,
  #digest .report__h .rh-ic{width:18px;height:18px;flex:none}
  .bxd .report__grp--ok .rh-ic,
  #deal .report__grp--ok .rh-ic,
  #digest .report__grp--ok .rh-ic{color:var(--good)}
  .bxd .report__grp--risk .rh-ic,
  #deal .report__grp--risk .rh-ic,
  #digest .report__grp--risk .rh-ic{color:var(--mag)}
  .bxd .report__grp--do .rh-ic,
  #deal .report__grp--do .rh-ic,
  #digest .report__grp--do .rh-ic{color:var(--violet)}
  .bxd .report__grp ul,
  #deal .report__grp ul,
  #digest .report__grp ul,
  .bxd .report__grp ol,
  #deal .report__grp ol,
  #digest .report__grp ol{margin:0;padding:0;list-style:none;
    display:flex;flex-direction:column;gap:10px}
  .bxd .report__grp li,
  #deal .report__grp li,
  #digest .report__grp li{position:relative;padding-left:20px;font-size:.875rem;
    color:var(--text-3);line-height:1.55}
  .bxd .report__grp li b,
  #deal .report__grp li b,
  #digest .report__grp li b{color:var(--text);font-weight:700}
  .bxd .report__grp--ok li::before,
  #deal .report__grp--ok li::before,
  #digest .report__grp--ok li::before,
  .bxd .report__grp--risk li::before,
  #deal .report__grp--risk li::before,
  #digest .report__grp--risk li::before{
    content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%}
  .bxd .report__grp--ok li::before,
  #deal .report__grp--ok li::before,
  #digest .report__grp--ok li::before{background:var(--good)}
  .bxd .report__grp--risk li::before,
  #deal .report__grp--risk li::before,
  #digest .report__grp--risk li::before{background:var(--mag)}
  .bxd .report__grp--do,
  #deal .report__grp--do,
  #digest .report__grp--do{counter-reset:step}
  .bxd .report__grp--do li,
  #deal .report__grp--do li,
  #digest .report__grp--do li{counter-increment:step;padding-left:32px}
  .bxd .report__grp--do li::before,
  #deal .report__grp--do li::before,
  #digest .report__grp--do li::before{
    content:counter(step);position:absolute;left:0;top:0;width:22px;height:22px;
    border-radius:50%;display:grid;place-items:center;font-family:var(--mono);
    font-size:.6875rem;font-weight:700;color:var(--violet);
    border:1px solid var(--border-2);background:var(--surface-2);
  }
  .bxd .report__grp p,
  #deal .report__grp p,
  #digest .report__grp p{font-size:.875rem;color:var(--text-3);line-height:1.55;margin:0 0 14px}
  .bxd .report__grp p:last-child,
  #deal .report__grp p:last-child,
  #digest .report__grp p:last-child{margin-bottom:0}
  .bxd .report__grp p b,
  #deal .report__grp p b,
  #digest .report__grp p b{color:var(--text);font-weight:700}
  /* Три уровня разбора должны быть видны глазом: заголовок группы, тема, текст.
     Раньше тема шла в одну строку с текстом через тире, а служебная подпись
     абзаца — первым словом строки; блок читался сплошным полотном. */
  .bxd .rlead,
  #deal .rlead,
  #digest .rlead{display:block;color:var(--text);font-weight:700;margin-bottom:3px}
  .bxd .rsub,
  #deal .rsub,
  #digest .rsub{
    display:block;font-family:var(--mono);font-size:.625rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--text-4);
    margin-bottom:5px;
  }
  /* группы отделяются волосяной линией — «оглавление» читается сразу */
  .bxd .report__grp + .report__grp,
  #deal .report__grp + .report__grp,
  #digest .report__grp + .report__grp{margin-top:22px;padding-top:20px;
    border-top:1px solid var(--border)}
  .bxd .report__say,
  #deal .report__say,
  #digest .report__say{
    margin:11px 0;padding:11px 14px;border-radius:var(--r-sm);
    border:1px solid var(--good-line);border-left:3px solid var(--good);
    background:var(--good-soft);font-size:.84375rem;color:var(--text-2);line-height:1.55;
  }
  .bxd .report__say b,
  #deal .report__say b,
  #digest .report__say b{color:var(--text);font-weight:700}
  .bxd .facts,
  #deal .facts,
  #digest .facts{display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
  .bxd .facts li,
  #deal .facts li,
  #digest .facts li{list-style:none;position:relative;padding-left:18px;font-size:.875rem;
    color:var(--text-3);line-height:1.5}
  .bxd .facts li::before,
  #deal .facts li::before,
  #digest .facts li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;
    border-radius:50%;background:var(--teal-ink)}
  .bxd .facts li b,
  #deal .facts li b,
  #digest .facts li b{color:var(--text)}
  .bxd .tlrow,
  #deal .tlrow,
  #digest .tlrow{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;padding:12px 0;
    border-bottom:1px solid var(--border)}
  .bxd .tlrow:last-child,
  #deal .tlrow:last-child,
  #digest .tlrow:last-child{border-bottom:0}
  .bxd .tlrow .d,
  #deal .tlrow .d,
  #digest .tlrow .d{font-family:var(--mono);font-size:.75rem;color:var(--teal-ink);font-weight:700}
  .bxd .tlrow .t,
  #deal .tlrow .t,
  #digest .tlrow .t{font-size:.875rem;color:var(--text-3);line-height:1.5}
  .bxd .qlist,
  #deal .qlist,
  #digest .qlist{counter-reset:q;display:flex;flex-direction:column;gap:13px;margin:0;padding:0}
  .bxd .qlist li,
  #deal .qlist li,
  #digest .qlist li{list-style:none;position:relative;padding-left:34px;font-size:.9375rem;
    color:var(--text);font-weight:600;line-height:1.45}
  .bxd .qlist li::before,
  #deal .qlist li::before,
  #digest .qlist li::before{
    counter-increment:q;content:counter(q);position:absolute;left:0;top:-2px;width:24px;height:24px;
    border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:500;font-size:.75rem;
    color:var(--teal-ink);border:1px solid var(--border-2);background:var(--surface-2);
  }
  .bxd .qlist li .qnote,
  #deal .qlist li .qnote,
  #digest .qlist li .qnote{display:block;margin-top:6px;font-weight:400;color:var(--text-3);
    font-size:.875rem;line-height:1.55}
  /* обезличенный токен: подсказка объясняет, почему тут скобки, а не имя */
  .bxd .spoiler,
  #deal .spoiler,
  #digest .spoiler{color:var(--teal-ink);border-bottom:1px dashed var(--teal-ink);cursor:help}
  @media (max-width:560px){#deal .tlrow,.bxd .tlrow{grid-template-columns:1fr;gap:4px}}
  /* без JS вкладок нет — панели идут подряд, текст доступен целиком */
  /* только интерактивные ленты (role="tablist"): статичная лента макета в PDF
     (site3/pdf/owner.html, там класса js нет) должна остаться видимой */
  html:not(.js) .show__tabs[role="tablist"]{display:none}
  html:not(.js) .show__panel[role="tabpanel"]{display:block;min-height:0;margin-bottom:18px}

  /* ---- Демо-карточка «Состояние рабочего дня» ---- */
  .daypts{list-style:none;display:flex;flex-direction:column;gap:7px}
  .daypts li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:9px;
             font-size:.875rem;line-height:1.5;color:var(--text-2)}
  .daypts li::before{content:"";width:6px;height:6px;border-radius:50%;
                     background:var(--warn);margin-top:8px}
  .daypts b{color:var(--text)}
  /* тот же список в разборе сделки: зелёные точки у сработавшего,
     розовые у рисков — цвет несёт смысл, а не украшает */
  .daypts--ok li::before{background:var(--good)}
  .daypts--risk li::before{background:var(--mag)}

  /* полоска активности по часам: только высота в процентах, без анимации */
  .hourbar{display:flex;align-items:flex-end;gap:3px;height:44px}
  .hourbar span{flex:1;background:var(--teal);opacity:.7;border-radius:2px 2px 0 0}

  /* ---- Честность ---- */
  .honest{display:flex;flex-direction:column;gap:16px}
  .honest__i{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start}
  .honest__n{font-family:var(--mono);font-size:.8125rem;font-weight:700;color:var(--warn);padding-top:3px}

  /* ---- Форма квиза (ТЗ 8 §3.3: петля шагов 01–05 слева убрана, блок #cta — одна колонка) ---- */
  /* ТЗ 9 п.2: одна колонка по центру, анкета шире */
  #cta .split{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  #cta .split .lead{margin-left:auto;margin-right:auto}
  /* 07.09.2026: карточка шире — справа панель «AI собирает картину» */
  #quizHome{max-width:980px;width:100%;text-align:left}

  /* ============================================================
     КВИЗ. Без JS показываются ВСЕ шаги сразу — так форма остаётся
     доступной, даже если скрипт не загрузился. Класс `js` на <html>
     ставит app2.js, и только тогда включается пошаговый режим.
     ============================================================ */
  /* ---- Окно с анкетой ----
     Приезжает справа поверх страницы. Фон тот же, что у раздела «Ваш ход»,
     и класс on-dark на панели: квиз переезжает сюда как есть, без второго
     набора стилей под светлый фон. */
  /* Карточка дайджеста — на общей узкой ширине, как карточка разбора рядом.
     Текст внутри обоих отчётов ограничен: без ограничения строка доходила
     до 95 знаков в разборе и 131 в дайджесте при комфортных 45–75. */
  #digest .report{max-width:var(--narrow)}
  #deal .report__grp p,#digest .report__grp p,
  #deal .report__grp li,#digest .report__grp li,
  #deal .report__say,#digest .report__say{max-width:78ch}

  /* ТЗ 7: шторка с анкетой и её стили удалены — квиз стоит в CTA двумя колонками */

  .quiz{position:relative}
  .quiz__rail{grid-column:1/-1;height:3px;border-radius:2px;background:rgba(255,255,255,.10);overflow:hidden}
  /* П-4: полоса тянется через scaleX, а не через width */
  .quiz__bar{display:block;height:100%;background:var(--grad-line);
             transform-origin:left center;transform:scaleX(0);
             transition:transform .35s var(--ease)}
  .quiz__num{font-family:var(--mono);font-weight:500;font-size:.6875rem;letter-spacing:.09em;
             text-transform:uppercase;color:var(--text-4);margin:12px 0 16px}

  html.js .quiz__step{display:none}
  html.js .quiz__step.is-on{display:block;animation:qfade .3s var(--ease-out)}
  /* Карточка прыгала по высоте между шагами: 284 → 220 → 307 → 244. */
  html.js .quiz__step.is-on:not([data-q="contacts"]):not([data-q="done"]){min-height:312px}
  @keyframes qfade{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){html.js .quiz__step.is-on{animation:none}}

  .quiz__q{font-size:1.125rem;font-weight:700;color:var(--text);line-height:1.3;
           margin-bottom:16px;letter-spacing:-.012em}
  .quiz__opts{display:flex;flex-direction:column;gap:9px}
  .qopt{
    text-align:left;padding:14px 16px;border-radius:var(--r-md);
    border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);
    font-size:.9375rem;font-weight:600;color:var(--text-2);
    transition:border-color .18s var(--ease),background-color .18s var(--ease),
               color .18s var(--ease),transform .18s var(--ease);
  }
  .qopt:hover{border-color:var(--border-2);color:var(--text);background:rgba(255,255,255,.06)}
  .qopt.is-picked{border-color:var(--teal);background:rgba(30,217,163,.10);color:var(--teal)}

  /* ---- Панель «AI собирает картину» (07.09.2026). Слева поток вопросов,
     справа накапливаются реплики, напечатанные по буквам. ---- */
  .quiz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(20px,3vw,34px);align-items:start}
  .quiz__flow{min-width:0}
  .quiz__ai{
    min-width:0;align-self:stretch;border-radius:var(--r-md);padding:16px 18px 18px;
    background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  .quiz__ai-h{display:flex;align-items:center;gap:9px;margin:0 0 14px;
              font-family:var(--mono);font-weight:500;font-size:.6875rem;letter-spacing:.09em;
              text-transform:uppercase;color:var(--teal)}
  .quiz__ai-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--grad);
                box-shadow:0 0 0 3px rgba(30,217,163,.18)}
  .quiz__ai-empty{margin:0;font-size:.875rem;line-height:1.5;color:var(--text-4)}
  .quiz__ai-empty[hidden]{display:none}
  .quiz__ai-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
  .quiz__ai-i{display:grid;gap:4px;padding:11px 0 0;border-top:1px solid rgba(255,255,255,.08);animation:qfade .3s var(--ease-out)}
  .quiz__ai-i:first-child{padding-top:0;border-top:0}
  .quiz__ai-a{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-4)}
  .quiz__ai-t{font-size:.9375rem;line-height:1.5;color:var(--text);min-height:1.5em;overflow-wrap:anywhere}
  .quiz__ai-caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.15em;background:var(--teal);border-radius:1px}
  @media (prefers-reduced-motion:reduce){.quiz__ai-i{animation:none}}
  @media (max-width:860px){
    .quiz{grid-template-columns:minmax(0,1fr)}
    .quiz__ai{align-self:auto}
  }
  .quiz__back{
    margin-top:16px;font-size:.8125rem;font-weight:600;color:var(--text-4);
    transition:color .18s var(--ease);
  }
  .quiz__back:hover{color:var(--text-2)}
  .quiz__back[hidden]{display:none}

  /* honeypot: живой человек его не видит и не сфокусирует */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
  .field label{font-size:.8125rem;font-weight:700;color:var(--text-2)}
  .field input,.field select,.field textarea{
    font:inherit;font-size:.9375rem;padding:13px 15px;border-radius:var(--r-md);
    border:1px solid var(--border-2);background:var(--surface);color:var(--text);width:100%;
    transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
  }
  .field textarea{min-height:96px;resize:vertical}
  /* outline:none на :focus перебивал :focus-visible по специфичности —
     на самом конверсионном элементе страницы фокус не был виден вообще. */
  .field input:focus,.field select:focus,.field textarea:focus{
    border-color:var(--accent);box-shadow:var(--ring);
  }
  .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
    outline:2px solid var(--focus);outline-offset:2px;border-color:var(--accent);
  }
  .consent{display:flex;gap:11px;align-items:flex-start;font-size:.75rem;
           line-height:1.55;color:var(--text-4)}
  .consent input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--teal)}
  .consent a{color:var(--teal-ink);border-bottom:1px solid var(--border-2)}
  .formnote{font-size:.75rem;color:var(--text-4);margin-top:12px;line-height:1.55}
  .formstatus{font-size:.875rem;font-weight:600;margin-top:12px;min-height:1.4em}
  .formstatus.ok{color:var(--good)}
  .formstatus.err{color:var(--bad)}

  /* ---- Футер ---- */
  .footer{background:#0b0a14;padding:clamp(44px,5vw,64px) 0 32px;font-size:.875rem;
          color:var(--text-3)}
  .footer a{color:var(--text-2);transition:color .18s var(--ease)}
  .footer a:hover{color:var(--teal)}
  .footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px}
  @media (max-width:760px){.footer__grid{grid-template-columns:1fr;gap:26px}}
  .footer__h{font-family:var(--mono);font-size:.625rem;font-weight:700;text-transform:uppercase;
             letter-spacing:.10em;color:var(--text-4);margin-bottom:13px}
  .footer__list{display:flex;flex-direction:column;gap:9px}
  .footer__bot{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
               display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.75rem;color:var(--text-faint)}
}

/* ===========================================================================
   UTILS
   =========================================================================== */
@layer utils {
  .mt-0{margin-top:0} .mt-1{margin-top:8px} .mt-2{margin-top:16px}
  .mt-3{margin-top:24px} .mt-4{margin-top:34px} .mt-5{margin-top:48px}
  .mb-1{margin-bottom:8px} .mb-2{margin-bottom:16px} .mb-3{margin-bottom:24px}
  .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  .row--tight{gap:8px}
  .between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .stack{display:flex;flex-direction:column;gap:14px}
  .stack--sm{gap:9px}
  .center{text-align:center}
  .nowrap{white-space:nowrap}
  .dim{color:var(--text-4)}
  .full{width:100%}
}

/* ===========================================================================
   САЙТ 3.1 (ТЗ 3, 04.09.2026): рамка окна с кропом, выноски, карточка
   «Вывод AI», конвейер агентов, макет карточки сделки Bitrix24, лайтбокс,
   короткая форма «Позвоните мне». Перф-контракт тот же: transform/opacity,
   анимации одноразовые, на телефоне и при reduced-motion выключены.
   =========================================================================== */
@layer sections {

  /* ---- Рамка окна: кроп кадра продукта (§3.5) ---- */
  .frame{position:relative;margin:0;background:var(--surface);border:1px solid var(--border-2);
         border-radius:var(--r-lg);box-shadow:var(--shadow-xl);overflow:hidden}
  .sec--paper .frame{box-shadow:var(--shadow-hi)}
  body.home #levels .frame{box-shadow:var(--shadow-hi)}   /* ТЗ 10 п.5: 06 стал sec--light, тень кадров сохранена */
  .frame__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;
              background:var(--surface-3);border-bottom:1px solid var(--border)}
  .frame__bar i{width:10px;height:10px;border-radius:50%;background:var(--border-2);flex:none}
  .frame__url{margin-left:8px;flex:1;min-width:0;font-family:var(--mono);font-weight:500;
              font-size:.6875rem;color:var(--text-4);background:var(--surface);
              border:1px solid var(--border);border-radius:var(--r-pill);padding:4px 12px;
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .frame__zoom{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
               border:1px solid var(--border-2);background:var(--surface);color:var(--text-3);
               transition:color .18s var(--ease),border-color .18s var(--ease)}
  .frame__zoom:hover{color:var(--teal-ink);border-color:var(--teal)}
  .frame__zoom svg{width:15px;height:15px}
  .frame__body{position:relative;background:#fff}
  .frame__body img{width:100%;height:auto;display:block}
  /* подсветка строки и выноска позиционируются в процентах от кропа для
     компьютера; на телефоне кроп другой — прячем, смысл несёт подпись */
  .frame__hl{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);
             border:2px solid var(--mag);border-radius:6px;pointer-events:none;
             box-shadow:0 0 0 4px rgba(233,75,123,.14)}
  .frame__hl--good{border-color:var(--good);box-shadow:0 0 0 4px rgba(21,128,61,.14)}
  .callout{position:absolute;left:var(--x);top:var(--y);transform:translateY(-50%);z-index:2;
           display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
           border-radius:var(--r-pill);background:#0F172A;color:#fff;
           font-size:.75rem;font-weight:700;line-height:1.2;white-space:nowrap;
           box-shadow:var(--shadow-hi);pointer-events:none}
  .callout::before{content:"";position:absolute;right:100%;top:50%;width:34px;height:2px;
                   background:#0F172A}
  .callout--r::before{right:auto;left:100%}
  /* длинная выноска (экран 03): переносится, а не вылезает за кадр */
  .callout--wrap{white-space:normal;max-width:min(44%,380px);line-height:1.3;text-align:left}
  .callout i{width:8px;height:8px;border-radius:50%;background:var(--mag);flex:none}
  .callout--good i{background:#5DD68C}
  .frame__cap{padding:12px 16px;border-top:1px solid var(--border);background:var(--surface-3);
              font-size:.875rem;line-height:1.5;color:var(--text-2)}
  .frame__cap b{color:var(--text)}
  .frame--mini .frame__bar{padding:7px 11px}
  .frame--mini .frame__url{font-size:.625rem;padding:3px 10px}
  .frame--mini .frame__cap{font-size:.8125rem;padding:10px 13px}
  /* у телефонного кропа своя подпись — про то, что на нём видно */
  .frame__cap--phone{display:none}
  /* экран 02: таблицы сделок на телефоне не режем — тот же полный кадр, листается вправо
     (правые колонки «Контакт / Вне CRM / Задача» — суть кадра, доводка 05.09) */
  @media (max-width:700px){.frame--wide .frame__body{overflow-x:auto;-webkit-overflow-scrolling:touch}
                           .frame--wide .frame__body img{width:1100px;max-width:none}}
  @media (max-width:700px){.frame__hl,.callout{display:none}
                           .frame__cap--desk{display:none}.frame__cap--phone{display:block}}

  /* выноски-цифры над кадром */
  .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
  .stat{display:flex;gap:14px;align-items:center;padding:12px 16px;border-radius:var(--r-md);
        border:1px solid var(--border-2);background:var(--surface-3)}
  .stat__n{font-family:var(--mono);font-weight:700;font-size:1.375rem;letter-spacing:-.02em;
           color:var(--mag-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
  .stat__n.is-good{color:var(--good)}
  .stat__l{font-size:.8125rem;line-height:1.4;color:var(--text-2)}
  @media (max-width:560px){.stats{grid-template-columns:1fr}}
  /* плитки про строки компьютерного кропа; на телефоне кроп другой (408/255) — прячем, число несёт подпись */
  @media (max-width:700px){.stat--desk{display:none}}

  /* ---- Лайтбокс: кадр целиком, <dialog> без библиотек ---- */
  .lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;
      width:auto;height:auto;overflow:visible}
  .lb::backdrop{background:rgba(6,8,14,.84)}
  .lb img{display:block;max-width:96vw;max-height:88vh;width:auto;height:auto;
          border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-xl)}
  .lb__x{position:fixed;top:14px;right:14px;width:40px;height:40px;border-radius:50%;
         background:#15131f;color:#EAF3F1;border:1px solid rgba(255,255,255,.22);
         display:grid;place-items:center;z-index:2}
  .lb__cap{position:fixed;left:0;right:0;bottom:12px;text-align:center;
           font-family:var(--mono);font-size:.6875rem;color:#9AAAB4}

  /* ---- Карточка «Вывод AI» — советник (§3.4) ---- */
  .verdict{position:relative;border:1px solid var(--good-line);border-left:4px solid var(--good);
           border-radius:var(--r-lg);background:var(--surface);padding:18px 20px;
           box-shadow:var(--shadow-card)}
  .sec--paper .verdict{background:var(--surface-3)}
  .on-dark .verdict{background:rgba(255,255,255,.04);border-color:rgba(93,214,140,.28);
                    border-left-color:var(--good);box-shadow:none}
  .verdict__head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
                 font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.09em;
                 text-transform:uppercase;color:var(--good);margin-bottom:10px}
  .verdict__ai{display:inline-grid;place-items:center;min-width:26px;height:20px;padding:0 6px;
               border-radius:6px;background:var(--good);color:#fff;font-size:.625rem;letter-spacing:.06em}
  .on-dark .verdict__ai{color:#08231c}
  .verdict__head .dt{margin-left:auto;color:var(--text-4);font-weight:500;letter-spacing:.03em;
                     text-transform:none}
  .verdict__t{font-size:1.0625rem;font-weight:700;line-height:1.35;color:var(--text);
              letter-spacing:-.01em}
  .verdict p+p{margin-top:8px}
  .verdict__why{font-size:.9375rem;line-height:1.55;color:var(--text-2)}
  .verdict__do{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border-2);
               font-size:.9375rem;line-height:1.55;color:var(--text)}
  .verdict__do b{color:var(--good)}
  /* ТЗ 6: тревожная карточка — вывод собственнику про проблему. «Что сделать» остаётся зелёным */
  .verdict--alert{border-color:var(--mag-line);border-left-color:var(--mag);background:var(--mag-soft)}
  .sec--paper .verdict--alert{background:var(--mag-soft)}
  /* ТЗ 7: на тёмном — без сплошной красной подложки, остаются полоса, рамка, голова и бейдж */
  .on-dark .verdict--alert{background:rgba(255,255,255,.04);border-color:var(--mag-line);border-left-color:var(--mag)}
  .verdict--alert .verdict__head{color:var(--mag-ink)}
  .on-dark .verdict--alert .verdict__head{color:var(--mag)}
  /* бейдж: на светлом тёмный оттенок (контраст с белым), на тёмном — --mag с тёмным текстом */
  .verdict--alert .verdict__ai{background:var(--mag-ink);color:#fff}
  .on-dark .verdict--alert .verdict__ai{background:var(--mag);color:#08231c}
  /* доводка 05.09: вывод читается как в платформе — пилюля состояния, цветные числа,
     точка-маркер у строки «почему», зелёная «хорошая новость» */
  .verdict__pill{display:inline-block;padding:2px 9px;border-radius:var(--r-pill);border:1px solid var(--mag);
                 color:var(--mag-ink);background:#fff;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
  .on-dark .verdict__pill{color:var(--mag);background:transparent}
  .verdict__good{display:inline-block;padding:1px 9px;margin-right:6px;border-radius:var(--r-pill);border:1px solid var(--good);
                 color:var(--good);font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;vertical-align:2px}
  .verdict__li{position:relative;padding-left:20px}
  .verdict__li::before{content:"";position:absolute;left:3px;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--dot,var(--mag))}
  .vn{font-weight:800}
  .vn--bad{color:var(--mag-ink)}.on-dark .vn--bad{color:var(--mag)}
  .vn--warn{color:var(--plan)}
  .vn--good{color:var(--good)}
  .verdict--mini{padding:13px 16px}
  .verdict--mini .verdict__head{margin-bottom:7px}
  .verdict--mini .verdict__t{font-size:.9375rem}
  .verdict--mini .verdict__do{margin-top:8px;padding-top:8px;font-size:.875rem}

  /* ---- ТЗ 9 п.4 (доводка 3, 07.09): «Что это даёт» — светлая плашка с градиентной рамкой на светлых
     экранах, тёмная (как полоса «Дальше на странице») только на тёмных ---- */
  .gives{margin-top:clamp(22px,3vw,34px);padding:20px 26px 22px;border:2px solid transparent;border-radius:var(--r-xl);
         background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box;
         box-shadow:var(--shadow-card)}
  .gives__k{display:flex;align-items:center;gap:10px;
            font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.14em;
            text-transform:uppercase;color:var(--teal-ink)}
  .gives__k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(30,217,163,.22)}
  .gives__t{margin-top:8px;font-size:1.1875rem;font-weight:800;line-height:1.35;letter-spacing:-.012em;color:var(--text);max-width:64ch}
  .on-dark .gives{background:linear-gradient(#141326,#141326) padding-box,var(--grad) border-box;
                  box-shadow:0 0 0 6px rgba(46,230,176,.08),0 18px 48px rgba(0,0,0,.28)}
  .on-dark .gives__k{color:var(--teal)}
  .on-dark .gives__t{color:#fff}
  @media (max-width:700px){.gives{padding:16px 18px 18px}.gives__t{font-size:1.0625rem}}

  /* ---- ТЗ 9 п.5: экран 03 — цифры дня плашкой; цвета плиток = цвета столбиков графика ---- */
  #moves .head{margin-bottom:clamp(18px,2.4vw,28px)}
  body.home #moves .head .small{color:var(--text-2)}   /* ТЗ 10 п.8: не самый бледный текст на странице */
  .day{margin-bottom:clamp(22px,3vw,34px);padding:18px 20px 16px;border-radius:var(--r-xl);
       border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-card)}
  .day__t{font-size:1.125rem;font-weight:700;line-height:1.35;color:var(--text);letter-spacing:-.01em}
  .day__t b{color:var(--mag-ink)}
  .day__tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
  /* ТЗ 10 п.1: без пастельной заливки — белая плитка, полоса 4 px слева цветом вердикта, цветное число */
  .day__i{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border-radius:var(--r-md);
          border:1px solid var(--border);border-left:4px solid var(--border-2);background:var(--surface);min-width:0}
  .day__n{font-family:var(--mono);font-size:1.75rem;font-weight:700;line-height:1;letter-spacing:-.03em;
          font-variant-numeric:tabular-nums}
  .day__l{font-size:.8125rem;line-height:1.4;color:var(--text-2)}
  .day__i--good{border-left-color:var(--good)} .day__i--good .day__n{color:var(--good)}
  .day__i--plan{border-left-color:var(--plan)} .day__i--plan .day__n{color:var(--plan)}
  .day__i--off{border-left-color:var(--off-ink)}  .day__i--off .day__n{color:var(--off-ink)}
  .day__i--fake{border-left-color:var(--fake)} .day__i--fake .day__n{color:var(--fake)}
  /* ТЗ 10 п.1: карточка «Фейк» на 03 и карточка собственника на 06 — белые, только полоса и рамка.
     Только главная (body.home): id="moves" есть и на method.html, а глобальные
     .card--rail.is-fake / .verdict--alert красят method.html и product.html — их не трогаем */
  body.home #moves .vcard.card--rail.is-fake{background:var(--surface)}
  body.home #levels .verdict--alert{background:var(--surface);border-color:var(--mag-line);border-left-color:var(--mag)}
  .day__sum{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border-2);
            font-size:.9375rem;line-height:1.5;color:var(--text-2)}
  .day__sum b{color:var(--mag-ink)}
  @media (max-width:900px){.day__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:420px){.day__tiles{grid-template-columns:1fr}}

  /* ---- ТЗ 9 п.6: в макете раскрыто только возражение 1, остальное под кнопкой ---- */
  .bxd__rest[hidden]{display:none}
  .bxd__more{display:inline-flex;align-items:center;gap:8px;margin:10px 0 4px;padding:9px 14px;
             border-radius:var(--r-pill);border:1px solid var(--border-2);background:var(--surface);
             font:inherit;font-size:.875rem;font-weight:700;color:var(--text);cursor:pointer}
  .bxd__more:hover{border-color:var(--teal-ink);color:var(--teal-ink)}
  .bxd__more:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  .bxd__more--up{margin-top:14px}

  /* ---- Конвейер агентов (§3.2) ---- */
  .pipeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:8px}
  .st{position:relative;display:flex;flex-direction:column;gap:12px;
      border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);
      background:rgba(255,255,255,.035);padding:20px 18px}
  .st--ai{border-color:rgba(124,92,252,.55);background:rgba(124,92,252,.09)}
  .st__n{font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.12em;
         text-transform:uppercase;color:#9B83FF}
  .st__h{font-size:1.0625rem;font-weight:700;line-height:1.25;color:var(--text)}
  .st__h small{display:block;font-size:.75rem;font-weight:700;color:var(--teal);margin-top:4px;
               letter-spacing:.02em}
  .st__chips{display:flex;flex-wrap:wrap;gap:6px}
  .st .chip{font-size:.75rem;padding:6px 10px;white-space:normal;line-height:1.2;
            background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:var(--text-2)}
  .st--ai .chip{border-color:rgba(124,92,252,.4);background:rgba(124,92,252,.14);color:#EAF3F1}
  .st__cap{font-size:.8125rem;line-height:1.5;color:var(--text-3);margin-top:auto;padding-top:4px}
  .st__card{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);
            background:rgba(11,10,20,.65);padding:11px 12px;font-size:.75rem;line-height:1.45;
            color:var(--text-2)}
  .st__card .lbl{display:block;font-family:var(--mono);font-size:.5625rem;font-weight:700;
                 letter-spacing:.1em;text-transform:uppercase;color:var(--text-4);margin-bottom:4px}
  .st__card .q{display:block;margin-top:7px;padding:7px 9px;border-radius:6px;
               border-left:2px solid var(--teal);background:rgba(30,217,163,.08);color:var(--text)}
  .st__out{display:grid;gap:8px}
  .st__out div{border-radius:var(--r-sm);padding:9px 11px;font-size:.8125rem;line-height:1.4;
               background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--text-2)}
  .st__out b{color:var(--text)}
  /* «собственнику» — перламутровая подсветка (доводка 05.09): переливающийся градиент по тексту */
  .pearl{background:linear-gradient(100deg,#2EE6B0 0%,#8AB4FF 35%,#C79CFF 60%,#FF9BB3 85%,#F2E84B 100%);
         -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:800}
  /* линия между станциями и бегущая точка (только transform/opacity) */
  .st::after{content:"";position:absolute;right:-22px;top:50%;width:22px;height:2px;
             background:linear-gradient(90deg,var(--teal),var(--violet));transform:translateY(-50%)}
  .st::before{content:"";position:absolute;right:-22px;top:50%;width:8px;height:8px;
              border-radius:50%;background:var(--teal);margin-top:-4px;opacity:0;z-index:1}
  .st:last-child::after,.st:last-child::before{display:none}
  .pipe-code{margin-top:26px;padding-top:18px;border-top:2px dashed rgba(30,217,163,.38);
             display:flex;gap:14px;align-items:flex-start;font-size:.9375rem;line-height:1.55;
             color:var(--text-2)}
  .pipe-code b{color:var(--teal)}
  .pipe-code .tlink{flex:none}
  .pipe-nums{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;font-family:var(--mono);
             font-size:.75rem;font-weight:500;color:var(--text-4)}
  .pipe-nums b{color:var(--text);font-weight:700}
  @media (max-width:1020px){.pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}
                            .st::after,.st::before{display:none}}
  @media (max-width:600px){.pipeline{grid-template-columns:1fr}
                           .pipe-code{flex-direction:column}}
  /* Появление — один раз, только на компьютере, только transform/opacity.
     Станции и чипы выезжают переходами с задержкой (как .reveal): переход
     надёжнее keyframes — состояние покоя задаёт класс .in, и если анимации
     в браузере отключены/не отработали, всё равно всё видно. Бегущая точка —
     единственный keyframe: если он не проиграется, точка просто не видна.
     Страховка: без .in через 2,5 с reveal() покажет всё принудительно. */
  @media (min-width:701px) and (prefers-reduced-motion:no-preference){
    html.js .pipeline .st{opacity:0;transform:translate3d(0,14px,0);
      transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
      transition-delay:calc(var(--i,0)*.28s)}
    html.js .pipeline.in .st{opacity:1;transform:none}
    html.js .pipeline .st__chips .chip{opacity:0;transform:scale(.8);
      transition:opacity .32s var(--ease-out),transform .32s var(--ease-out);
      transition-delay:calc(.3s + var(--i,0)*.28s + var(--k,0)*.06s)}
    html.js .pipeline.in .st__chips .chip{opacity:1;transform:none}
    html.js .pipeline.in .st::before{animation:dotrun .5s linear both;
                             animation-delay:calc(.45s + var(--i,0)*.28s)}
  }
  @keyframes dotrun{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(22px)}}

  /* ---- ТЗ 7: макет карточки сделки Битрикс24 как на самом деле — разбор AI в ЛЕВОЙ колонке
          полей (раздел ONEMETRIC_AI с пилюлями), справа лента дел. Логотипов нет, сетка узнаваема ---- */
  .bxd{border:1px solid var(--border-2);border-radius:var(--r-lg);background:var(--surface);
       box-shadow:var(--shadow-xl);overflow:hidden;font-size:.875rem;min-width:0;max-width:100%}
  .bxd__top{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:14px 18px;
            border-bottom:1px solid var(--border);background:var(--surface-3)}
  .bxd__id{font-family:var(--mono);font-size:.75rem;font-weight:500;color:var(--text-4)}
  .bxd__title{font-weight:700;font-size:1rem;color:var(--text)}
  .bxd__stage{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;
              color:var(--accent);border:1px solid var(--accent-line);background:var(--accent-soft);
              border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap}
  .bxd__stage::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .bxd__sum{margin-left:auto;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
  .bxd__stages{display:flex;gap:4px;padding:10px 18px;border-bottom:1px solid var(--border)}
  .bxd__stages span{flex:1;height:7px;border-radius:2px;background:var(--surface-2)}
  .bxd__stages span.on{background:var(--accent)}
  .bxd__body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
  .bxd__left{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;min-width:0}
  .bxd__right{border-left:1px solid var(--border);background:var(--surface-3);padding:14px 16px;
              display:flex;flex-direction:column;gap:10px;min-width:0}
  /* раздел полей: заголовок капсом, справа «изменить» — как в карточке Битрикс24 */
  .bxd__sec{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:10px 12px 12px}
  .bxd__sech{display:flex;justify-content:space-between;align-items:center;gap:10px;
             font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.09em;
             text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
  .bxd__sec--fold .bxd__sech{margin-bottom:0}
  .bxd__edit{font-family:var(--sans);font-weight:500;font-size:.6875rem;letter-spacing:0;
             text-transform:none;color:var(--text-4)}
  .bxd__f{display:flex;flex-direction:column;gap:5px;padding:7px 0;border-top:1px solid var(--border);min-width:0}
  .bxd__f:first-of-type{border-top:0;padding-top:0}
  .bxd__fl{font-size:.6875rem;color:var(--text-4);line-height:1.3}
  .bxd__fv{font-weight:600;color:var(--text);font-size:.8125rem}
  .bxd__fields{display:flex;flex-wrap:wrap;gap:6px 22px}
  .bxd__fields .bxd__f{flex-direction:row;gap:8px;align-items:baseline;border:0;padding:0}
  /* строка с пилюлей: каретка + пилюля + серая строка-превью справа */
  /* строка с пилюлей — кнопка-аккордеон: раскрывает свой раздел на месте (доводка 05.09) */
  .bxd__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;min-width:0;width:100%;
            background:none;border:0;padding:4px 0;text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:6px}
  .bxd__row:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  .bxd__row:hover .bxd__pill{filter:brightness(1.06)}
  .bxd__row+.bxd__row{margin-top:6px}
  .bxd__caret{flex:none;width:0;height:0;border-style:solid;border-width:4.5px 0 4.5px 6px;
              border-color:transparent transparent transparent var(--text-4)}
  .bxd__row[aria-expanded="true"] .bxd__caret{transform:rotate(90deg)}
  .bxd__pill{display:inline-flex;align-items:center;gap:6px;flex:none;padding:5px 11px;
             border-radius:var(--r-pill);font-size:.75rem;font-weight:700;color:#fff;line-height:1.2;
             white-space:nowrap;max-width:100%}
  .bxd__pill--amber{background:#F5A623;color:#1c1400}
  .bxd__pill--slate{background:#6B7A99}
  .bxd__pill--green{background:#22B573}
  .bxd__pill--red{background:#E9506F}
  .bxd__pill--blue{background:#2E9EE8}
  /* строка-превью: рядом с пилюлей, если помещается, иначе переносится под неё целиком (ревью ТЗ 7: обрезка «…» недопустима) */
  /* раскрытый раздел «Как отработать возражения» — как в платформе: барьер → что происходит →
     что сказать → вопрос → почему важно */
  .bxd__open{margin-top:4px;margin-bottom:6px;padding:12px 14px 13px;border-radius:var(--r-md);border:1px solid var(--border);
             border-left:3px solid #F5A623;background:var(--surface-3)}
  .bxd__open[hidden]{display:none}
  .bxd__open--slate{border-left-color:#6B7A99} .bxd__open--green{border-left-color:#22B573}
  .bxd__open--red{border-left-color:#E9506F}   .bxd__open--blue{border-left-color:#2E9EE8}
  /* разбор внутри карточки — та же вёрстка, что на product.html#deal, но компактнее и без рамки отчёта */
  .bxd .report{padding:0;border:0;background:none;border-radius:0;overflow:visible;box-shadow:none}
  .bxd .report__title{font-size:.9375rem;margin-bottom:6px}
  .bxd .report__client{font-size:.8125rem;margin-bottom:12px;padding-bottom:10px}
  .bxd .report__h{font-size:.875rem;margin-bottom:8px}
  .bxd .report__grp{margin-bottom:14px}
  .bxd .report__grp+.report__grp{margin-top:14px;padding-top:14px}
  .bxd .report__grp p,.bxd .report__grp li,.bxd .facts li,.bxd .tlrow .t,.bxd .qlist li .qnote{font-size:.8125rem;line-height:1.5}
  .bxd .report__grp p{margin-bottom:10px}
  .bxd .report__say{font-size:.8125rem;margin:9px 0;padding:9px 12px}
  .bxd .qlist li{font-size:.875rem}
  .bxd .tlrow{grid-template-columns:92px minmax(0,1fr);padding:9px 0}
  .bxd__open .rsub{display:block;font-family:var(--mono);font-size:.625rem;font-weight:700;
                   letter-spacing:.08em;text-transform:uppercase;color:var(--text-4);margin:8px 0 3px}
  .bxd__open p{font-size:.8125rem;line-height:1.5;color:var(--text-2)}
  .bxd__open p b{color:var(--text)}
  .bxd__say{margin-top:4px;padding:8px 11px;border-radius:var(--r-sm);border:1px solid var(--good-line);
            border-left:3px solid var(--good);background:var(--good-soft);font-size:.8125rem;
            color:var(--text);line-height:1.5}
  .bxd__say--q{border-color:var(--accent-line);border-left-color:var(--accent);background:var(--accent-soft)}
  .bxd__rest{margin-top:4px}
  .bxd__grp{padding:9px 11px;border-radius:var(--r-md);border:1px solid var(--border);
            border-left:3px solid var(--slate-line);background:var(--surface);margin-top:10px}
  .bxd__grp--amber{border-left-color:var(--warn)}
  .bxd__grp--green{border-left-color:var(--good)}
  .bxd__grp--blue{border-left-color:var(--accent)}
  .bxd__grp .rsub{margin:0 0 4px}
  .bxd ul,.bxd ol{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
  .bxd li{position:relative;padding-left:16px;font-size:.8125rem;line-height:1.5;color:var(--text-2)}
  .bxd li b{color:var(--text)}
  .bxd ul li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--slate)}
  .bxd__grp--amber ul li::before{background:var(--warn)}
  .bxd__grp--green ul li::before{background:var(--good)}
  .bxd ol{counter-reset:s}
  .bxd ol li{padding-left:26px;counter-increment:s}
  .bxd ol li::before{content:counter(s);position:absolute;left:0;top:1px;width:18px;height:18px;
                     border-radius:50%;display:grid;place-items:center;font-family:var(--mono);
                     font-size:.625rem;font-weight:700;color:var(--accent);
                     background:var(--surface);border:1px solid var(--border-2)}
  /* лента дел справа */
  .bxd__evh{font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.09em;
            text-transform:uppercase;color:var(--text-4)}
  .bxd__ev{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:9px 11px}
  .bxd__evt{display:flex;justify-content:space-between;gap:8px;font-size:.75rem;font-weight:700;color:var(--text)}
  .bxd__evd{font-family:var(--mono);font-weight:500;font-size:.625rem;color:var(--text-4);white-space:nowrap}
  .bxd__ev p{margin-top:3px;font-size:.75rem;line-height:1.45;color:var(--text-2)}
  .bxd__player{display:flex;align-items:center;gap:8px;margin-top:7px}
  .bxd__player i{width:22px;height:22px;border-radius:50%;background:var(--accent);flex:none;position:relative}
  .bxd__player i::after{content:"";position:absolute;left:8px;top:6px;border-style:solid;border-width:5px 0 5px 8px;
                        border-color:transparent transparent transparent #fff}
  .bxd__player span{flex:1;height:4px;border-radius:2px;background:var(--surface-2);position:relative}
  .bxd__player span::after{content:"";position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:2px;background:var(--accent)}
  .bxd__player b{font-family:var(--mono);font-size:.625rem;font-weight:500;color:var(--text-4)}
  .bx__note{font-family:var(--mono);font-weight:500;font-size:.6875rem;color:var(--text-4);margin-top:10px}
  /* макет широкий, три строки справа — узкая колонка; на планшете стопкой */
  .inside{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.7fr);gap:clamp(20px,3vw,40px);
          align-items:start}
  @media (max-width:980px){.inside{grid-template-columns:minmax(0,1fr)}}
  .inside>*{min-width:0}
  .bx-side{display:flex;flex-direction:column;gap:14px}
  .bx-side .card{padding:16px 18px}
  .bx-side .card p{font-size:.9375rem;line-height:1.5;color:var(--text-2)}
  .bx-side .card b{color:var(--text)}
  /* ТЗ 10 п.6: на компьютере с достаточной высотой окна колонка едет за макетом сделки;
     .reveal даёт transform самой .bx-side, не предку — sticky не ломается */
  @media (min-width:981px) and (min-height:760px){.bx-side{position:sticky;top:calc(var(--nav-h) + 16px)}}
  @media (max-width:860px){
    .bxd__body{grid-template-columns:minmax(0,1fr)}
    .bxd__right{border-left:0;border-top:1px solid var(--border)}
  }
  @media (max-width:700px){
    /* телефон: одна колонка — шапка → раскрытый раздел → свёрнутые пилюли; лента дел и
       свёрнутые блоки «Демонстрация / КП» скрыты; строки-превью переносятся */
    .bxd__right,.bxd__sec--fold,.bxd__sec--about{display:none}
    .bxd__top .bxd__sum{margin-left:0}
    .bxd__row{flex-wrap:wrap;align-items:flex-start}
    .bxd__caret{margin-top:7px}
    .bxd__pill{white-space:normal;text-align:left;flex:0 1 auto;min-width:0}
      .bxd__left{padding:12px 12px 14px}
    .bxd__sec{padding:9px 10px 10px}
  }

  /* ---- Экран 7: три мини-кадра ---- */
  .roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,26px);
         align-items:start}
  .role__who{font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.1em;
             text-transform:uppercase;color:var(--teal-ink);margin-bottom:10px}
  .role__t{margin-top:12px;font-size:.9375rem;line-height:1.5;color:var(--text-2)}
  .role__t b{color:var(--text)}
  @media (max-width:980px){.roles{grid-template-columns:minmax(0,1fr)}}
  .roles>*{min-width:0}
  /* мини-макет карточки менеджера — тот же .st__card, но в светлом контексте */
  .role__card{border:1px solid var(--border-2);border-radius:var(--r-md);background:var(--surface);
              padding:11px 12px;font-size:.8125rem;line-height:1.45;color:var(--text-2)}
  .role__card .lbl{display:block;font-family:var(--mono);font-size:.5625rem;font-weight:700;
                   letter-spacing:.1em;text-transform:uppercase;color:var(--text-4);margin-bottom:4px}
  .role__card .q{display:block;margin-top:7px;padding:7px 9px;border-radius:6px;
                 border-left:2px solid var(--good);background:var(--good-soft);color:var(--text)}

  /* ---- Экран 9: внедрение одной строкой, форма «Позвоните мне» ---- */
  .steps{display:flex;flex-direction:column;gap:10px}
  .step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;
        padding:13px 16px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface)}
  .step__n{font-family:var(--mono);font-size:.75rem;font-weight:700;color:var(--violet);letter-spacing:.08em}
  .step__t{font-size:.9375rem;line-height:1.5;color:var(--text-2)}
  .step__t b{color:var(--text)}
  /* ТЗ 9 п.3: цитаты клиентов справа от этапов; основатель — отдельным рядом (базовые .founder) */
  .quotes{display:flex;flex-direction:column;gap:14px;justify-content:center}
  .founder .lead{max-width:60ch}
  @media (max-width:880px){
    .split .founder{grid-template-columns:1fr}
    .split .founder__media{max-width:220px;margin:0}
  }
  /* ТЗ 7: короткая форма «Позвоните мне» и стили шторки удалены; квиз — в правой колонке CTA.
     Финал квиза: PDF-ссылки и кнопка примера в одну строку, на телефоне — столбиком */
  .quiz__after{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
  .cta__pdf{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:18px}

  /* ---- Экран 01 «Потерянная сделка» (ТЗ 5): панель из hero + карточка «Вывод AI» ---- */
  .lost{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(20px,3vw,40px);
        align-items:start}
  @media (max-width:980px){.lost{grid-template-columns:minmax(0,1fr)}}
  .lost__sum{margin-top:16px;padding:12px 14px;border-radius:var(--r-md);
             border:1px solid rgba(233,75,123,.35);background:rgba(233,75,123,.08);
             font-size:.9375rem;font-weight:700;line-height:1.45;color:var(--text)}

  /* ---- Экран 07 «Что вы получаете» (ТЗ 5 → ТЗ 8): шесть плиток выгод сеткой 3 / 2 / 1 ---- */
  .gains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
  .gain{min-width:0;padding:20px 20px 22px}
  .gain__w{font-size:1.125rem;font-weight:800;letter-spacing:-.015em;line-height:1.2;color:var(--text)}
  .gain__w::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:currentColor;
                   margin-right:9px;vertical-align:2px}   /* ТЗ 10 п.8: значок-кружок цветом чипа */
  .gain__t{margin-top:9px;font-size:.9375rem;line-height:1.5;color:var(--text-2)}
  @media (max-width:900px){.gains{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:700px){.gains{grid-template-columns:minmax(0,1fr)}}
  /* ТЗ 6: цвета слов выгоды — чипы hero и плитки экрана 07.
     Спокойствие — бирюза, Прозрачность — лазурь, Контроль — фиолет,
     Защита от обмана — красноватый, Ни одной потерянной сделки — зелёный,
     ТЗ 8: Большой потенциал роста прибыли и масштабирования — жёлтый ряд --plan */
  .hero__gains .chip--calm,   .gain--calm   {background:var(--teal-soft);  border-color:var(--teal-line)}
  .hero__gains .chip--clear,  .gain--clear  {background:var(--accent-soft);border-color:var(--accent-line)}
  .hero__gains .chip--control,.gain--control{background:var(--violet-soft);border-color:var(--violet-line)}
  .hero__gains .chip--shield, .gain--shield {background:var(--mag-soft);   border-color:var(--mag-line)}
  .hero__gains .chip--nolost, .gain--nolost {background:var(--good-soft);  border-color:var(--good-line)}
  .gain--growth {background:var(--plan-soft);  border-color:var(--plan-line)}
  .hero__gains .chip--growth{background:var(--violet-soft);border-color:var(--violet-line)}   /* ТЗ 10 п.2: рядом с жёлтой кнопкой — не жёлтый */
  .hero__gains .chip--calm,   .gain--calm    .gain__w{color:var(--teal-ink)}
  .hero__gains .chip--clear,  .gain--clear   .gain__w{color:var(--accent)}
  .hero__gains .chip--control,.gain--control .gain__w{color:var(--violet)}
  .hero__gains .chip--shield, .gain--shield  .gain__w{color:var(--mag-ink)}
  .hero__gains .chip--nolost, .gain--nolost  .gain__w{color:var(--good)}
  .gain--growth  .gain__w{color:var(--plan)}
  .hero__gains .chip--growth{color:var(--violet)}
  .on-dark .hero__gains .chip--shield, .on-dark .gain--shield .gain__w{color:var(--mag)}
  .on-dark .hero__gains .chip--control,.on-dark .hero__gains .chip--growth,.on-dark .gain--control .gain__w{color:#A691FF}

  /* ---- ТЗ 8 §3.3: полоса «Некогда читать дальше?» после 03 и 06 — PDF на 2 минуты и заявка.
          Фон как у .guide, карточка с градиентной рамкой; компьютер — одна строка, ≤ 700 px — столбиком ---- */
  .shortcut{background:#100f1c;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:22px 0}
  .shortcut__box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
                 padding:18px 24px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);
                 background:#141326}   /* ТЗ 10 п.3: градиентная рамка осталась только у «Что это даёт» */
  .shortcut__t{flex:1 1 auto;min-width:0;max-width:none;font-size:1rem;line-height:1.4;color:#C8D4D2}
  .shortcut__t b{color:#fff;font-weight:800}
  .shortcut__links{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
  @media (max-width:700px){
    .shortcut{padding:16px 0}
    .shortcut__box{padding:16px 18px;gap:12px}
    .shortcut__links{width:100%;justify-content:space-between}
  }

  /* ---- Ссылка на PDF: две версии, переключение CSS без JS (ТЗ 4 §3.5).
          Компьютер — горизонтальный PDF + мелкая ссылка «версия для телефона»;
          телефон (≤ 700 px) — только вертикальная версия. ---- */
  /* ---- ТЗ 7: строка-проводник между hero и экраном 01 (оба тёмные) ---- */
  /* связка после hero (доводка 05.09): яркая плашка с градиентной рамкой —
     «дальше на странице: сделки, выводы AI, графики» */
  /* ТЗ 10 п.4: полоса слита с героем — тот же фон, без линий; отступ героя снизу уменьшен (см. .hero) */
  .guide{background:#0b0a14;border:0;padding:0 0 clamp(40px,5vw,64px)}
  /* доводка 07.09: коробка уже и по центру — текст и стрелка рядом, без пустоты между ними */
  .guide__box{position:relative;display:grid;grid-template-columns:auto auto;justify-content:center;gap:16px 36px;align-items:center;
              max-width:900px;margin:0 auto;
              padding:22px 28px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);
              background:#141326;
              box-shadow:0 18px 48px rgba(0,0,0,.35)}   /* ТЗ 10 п.3: без градиентной рамки и тил-ореола */
  .guide__kicker{font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);
                 display:flex;align-items:center;gap:10px}
  .guide__kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(30,217,163,.22)}
  .guide__t{margin-top:8px;font-size:1.3125rem;font-weight:800;line-height:1.3;letter-spacing:-.015em;color:#fff;max-width:34ch;text-wrap:balance}
  .guide__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .guide__chip{display:inline-block;padding:6px 14px;border-radius:var(--r-pill);font-size:.8125rem;font-weight:700;
               color:#0b0a14;background:var(--grad)}
  .guide__chip:nth-child(2){background:var(--mag);color:#fff}
  .guide__chip:nth-child(3){background:var(--violet);color:#fff}   /* ТЗ 10 п.4: жёлтая поверхность на первом экране одна — кнопка */
  .guide__arrow{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;font-size:2rem;font-weight:800;line-height:1;
                color:#0b0a14;background:var(--grad);box-shadow:0 0 0 8px rgba(124,92,252,.14)}
  @media (max-width:700px){.guide{padding:0 0 28px}.guide__box{grid-template-columns:minmax(0,1fr);padding:18px 18px;gap:12px}
                           .guide__t{font-size:1.125rem;max-width:none}.guide__arrow{width:48px;height:48px;font-size:1.5rem;justify-self:center}}
  .roles .frame--mini+.frame--mini{margin-top:12px}
  #inside .frame:not(.frame--mini) .frame__body{background:#0b0a14}   /* тёмный скриншот Workspace — без белой подложки по краям */
  .pdfl{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
  .pdfl__alt{font-size:.75rem;color:var(--text-4);border-bottom:1px dotted var(--border-2);
             transition:color .18s var(--ease)}
  .pdfl__alt:hover{color:var(--teal-ink)}
  .pdfl__phone{display:none}
  @media (max-width:700px){
    .pdfl__desk{display:none}
    .pdfl__phone{display:inline-flex}
  }
}

/* ===========================================================================
   COOKIE-БАННЕР (ТЗ 11 п.13). Перенесён со старого сайта вместе с Метрикой;
   оформление — в киту сайта 3.0: белая карточка на светлом, те же токены,
   что и у карточек. Жёлтой кнопки здесь нет намеренно (жёлтая на экране —
   строго одна, она у CTA). Анимация — только transform/opacity (П-4).
   =========================================================================== */
@layer kit {
  .cookie{
    position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:70;
    width:min(340px,calc(100% - 28px));max-width:calc(100vw - 20px);
    background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r-lg);
    padding:14px 15px 13px;box-shadow:var(--shadow-xl);
    opacity:0;visibility:hidden;transform:translateY(16px);
    transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
  }
  .cookie.show{opacity:1;visibility:visible;transform:translateY(0)}
  .cookie__ic{width:28px;height:28px;border-radius:8px;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
  .cookie__ic svg{width:16px;height:16px;fill:#0b0a14}
  .cookie__h{margin:0 0 5px;font-size:.9375rem;font-weight:800;letter-spacing:-.01em;color:var(--text)}
  .cookie__txt{margin:0 0 12px;font-size:.78125rem;line-height:1.45;color:var(--text-3)}
  .cookie__txt a{color:var(--teal-ink);text-decoration:none;font-weight:600}
  .cookie__txt a:hover{text-decoration:underline;text-underline-offset:2px}
  .cookie__btns{display:flex;gap:9px;flex-wrap:wrap}
  .cookie__btns--set{margin-top:16px}
  .cookie__b{font-family:inherit;font-weight:700;font-size:.78125rem;border-radius:var(--r-sm);padding:9px 13px;border:1px solid transparent;cursor:pointer;background:transparent;color:var(--text);transition:filter .15s,border-color .15s,color .15s}
  .cookie__b--main{background:var(--text);color:var(--surface)}
  .cookie__b--main:hover{filter:brightness(1.15)}
  .cookie__b--ghost{border-color:var(--border-2)}
  .cookie__b--ghost:hover{border-color:var(--teal)}
  .cookie__b--sub{color:var(--text-3);padding:11px 10px}
  .cookie__b--sub:hover{color:var(--text)}
  .cookie__b--full{flex:1}
  .cookie__b:focus-visible,.cookie__sw:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  .cookie__row{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-top:1px solid var(--border)}
  .cookie__row:first-of-type{border-top:none}
  .cookie__rt{flex:1}
  .cookie__rt b{font-size:.875rem;font-weight:700;color:var(--text)}
  .cookie__rt span{display:block;font-size:.78125rem;color:var(--text-3);margin-top:2px;line-height:1.45}
  .cookie__sw{position:relative;width:40px;height:23px;border-radius:20px;background:var(--surface-2);border:1px solid var(--border-2);flex:none;margin-top:2px;cursor:pointer;padding:0;transition:background .15s,border-color .15s}
  .cookie__sw i{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--text-4);transition:left .15s,background .15s;pointer-events:none}
  .cookie__sw[aria-checked="true"]{background:var(--grad);border-color:transparent}
  .cookie__sw[aria-checked="true"] i{left:19px;background:#fff}
  .cookie__sw[aria-disabled="true"]{opacity:.55;cursor:default}
  @media (hover:none){
    .cookie__b{min-height:44px}
    .cookie__sw::before{content:"";position:absolute;inset:-11px}   /* хит-зона тумблера ≥44px без изменения вида */
  }
  @media (max-width:560px){
    .cookie{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:auto;padding:8px 10px 9px;border-radius:var(--r-md)}
    .cookie__ic{display:none}
    .cookie__h{font-size:.8125rem;margin-bottom:2px}
    .cookie__txt{font-size:.71875rem;line-height:1.3;margin-bottom:7px}
    .cookie__btns{gap:5px;flex-wrap:nowrap}
    /* все 3 кнопки в один ряд: шрифт подстраивается под ширину экрана, перенос запрещён */
    .cookie__b{font-size:min(.71875rem,3vw);padding:8px 4px;flex:1 1 auto;min-width:0;white-space:nowrap}
    .cookie__b--sub{padding:8px 2px}
  }
  @media (prefers-reduced-motion:reduce){.cookie{transition:opacity .2s ease,visibility .2s}}
}