/* ── Палитра «бумажной» дизайн-системы кабинета (светлая) ── */
    :root {
      --y:#FFE000; --y-ink:#111111;
      --bg:#F4F1EA; --paper:#FFFFFF; --raised:#ECE7DC;
      --ink:#0A0A0A; --muted:#4A4A4A; --faint:#767676;
      --line-soft:#C8C2B2; --grn:#1D8C3E; --red:#E1261C;
      --shadow-hard:4px 4px 0 0 var(--ink);
      --ease:cubic-bezier(0.22,0.61,0.36,1);
      /* Радиусы — та же шкала, что в кабинете (globals.css): лендинг и продукт
         должны говорить одной формой. Брутализм остаётся в рамке 2px и жёсткой
         тени со сдвигом — скругление их не отменяет, а снимает casual-угловатость. */
      --r-sm:6px; --r:10px; --r-lg:14px;
    }
    /* ── Тёмная тема (как в кабинете) ── */
    [data-theme="dark"] {
      --bg:#0E0E0E; --paper:#161616; --raised:#222020;
      --ink:#F2EFE6; --muted:#A8A39A; --faint:#6E6A62;
      --line-soft:#2E2A22; --y-ink:#0E0E0E;
      --shadow-hard:4px 4px 0 0 var(--y);
    }
    * { box-sizing:border-box; margin:0; padding:0; }
    /* Атрибут `hidden` СИЛЬНЕЕ любого нашего `display`. Без этого правила он не
       работает вовсе: браузер прячет элемент через `display:none` в своей таблице
       стилей, а ЛЮБОЕ авторское `display` её перебивает. Так на экране одновременно
       жили пустая лента распознанного, подсказка «попробуйте сами» поверх идущей
       витрины и точка состояния без текста — все три помечены `hidden`, у всех трёх
       было своё `display:flex`. Правило одно на страницу, чтобы следующий элемент
       с `hidden` не повторил их судьбу. */
    [hidden] { display:none !important; }
    html { scroll-behavior:smooth; }
    html, body { overflow-x:clip; }
    body {
      font-family:"Onest","Onest Fallback",-apple-system,system-ui,sans-serif;
      background:var(--bg); color:var(--ink);
      font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
      transition:background 240ms var(--ease), color 240ms var(--ease);
    }
    a { color:inherit; }
    .display { font-family:"Unbounded","Unbounded Fallback","Onest","Onest Fallback",sans-serif; font-weight:800; letter-spacing:-0.03em; line-height:0.95; }
    .mono { font-family:"JetBrains Mono",ui-monospace,monospace; }
    .upper { text-transform:uppercase; letter-spacing:0.06em; }
    .wrap { max-width:1120px; margin:0 auto; padding:0 24px; }

    .btn {
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:13px 24px; font-weight:700; font-size:14px; text-decoration:none;
      border:2px solid var(--ink); border-radius:var(--r); cursor:pointer; background:var(--paper); color:var(--ink);
      transition:transform 110ms var(--ease), box-shadow 110ms var(--ease);
    }
    .btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 0 var(--ink) !important; }
    .btn-y { background:var(--y); color:var(--y-ink); box-shadow:var(--shadow-hard); }
    .btn-y:hover { box-shadow:6px 6px 0 0 var(--y-ink); transform:translate(-1px,-1px); }
    .btn-dark { background:var(--ink); color:var(--bg); box-shadow:4px 4px 0 0 var(--y); }
    .btn-ghost { background:transparent; }
    .btn-ghost:hover { background:var(--paper); box-shadow:var(--shadow-hard); }

    .tag-y { display:inline-flex; align-items:center; gap:6px; background:var(--y); color:var(--y-ink);
      padding:4px 10px; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; border:2px solid var(--ink); border-radius:var(--r-sm); }
    .pulse { width:7px; height:7px; background:var(--grn); display:inline-block; animation:pulse-y 1.8s infinite; }
    @keyframes pulse-y { 0%,100% { box-shadow:0 0 0 0 var(--y); } 50% { box-shadow:0 0 0 6px transparent; } }

    .progress { position:fixed; top:0; inset-inline-start:0; height:3px; width:0; background:var(--y); z-index:60; transition:width 80ms linear; }

    /* Тёмные блоки остаются тёмными в ОБЕИХ темах. Раньше они красились в
       var(--ink), который в тёмной теме кремовый, — блок переворачивался и
       становился светлым пятном, а жёлтые акценты внутри пропадали (1.15:1).
       Собственные токены не переопределяются в тёмной теме, поэтому фон и
       текст блока фиксированы, а жёлтый на них читается всегда. */
    :root { --band-bg:#0A0A0A; --band-fg:#F4F1EA; --band-accent:var(--y); --y-soft:#FFF6C4; }
    [data-theme="dark"] { --y-soft:#241F0A; }
    .tickerbar { background:var(--band-bg); color:var(--band-fg); overflow:hidden; height:26px; display:flex; align-items:center;
      font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; }
    /* Длительность держится в паре с ДЛИНОЙ ленты: кадр проезжает ровно половину
       содержимого, поэтому скорость = ширина половины / время. Лента выросла с
       трёх повторов до девятнадцати фактов, и прежние 50s гнали бы её втрое
       быстрее — прочитать не успеть. */
    .ticker { display:flex; white-space:nowrap; animation:ticker 110s linear infinite; }
    .ticker:hover { animation-play-state:paused; }
    @keyframes ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }
    .ticker span { padding:0 18px; border-inline-end:1px solid #555; display:inline-flex; align-items:center; gap:8px; }
    .ticker b { color:var(--band-accent); font-weight:700; }

    /* ── Шапка ── */
    header.site { border-bottom:2px solid var(--ink); position:sticky; top:0; background:var(--bg); z-index:30; }
    .nav { display:flex; align-items:center; justify-content:space-between; height:62px; gap:12px; }
    /* Знак в шапке — 3D-кубик Рубика: грань SCRAMBLED честными поворотами слоёв
       собирается в WHISPERER и обратно, бесшовным циклом (движок — скриптом внизу). */
    .logo { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
    .rk-mark { width:46px; height:46px; flex:none; display:grid; place-items:center;
      perspective:220px; perspective-origin:50% 50%; }
    .rk-cube { width:0; height:0; transform-style:preserve-3d; will-change:transform; }
    .rk-cubie { position:absolute; top:0; left:0; transform-style:preserve-3d; will-change:transform; }
    .rk-face { position:absolute; top:0; left:0; background:#141310; display:grid; place-items:center;
      backface-visibility:hidden; }
    .rk-sticker { position:absolute; inset:3.5%; background:#FFE000; border:1px solid #0A0A0A;
      border-radius:18%; display:grid; place-items:center; color:#0A0A0A; font-weight:900;
      font-family:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif; line-height:1; }
    .rk-glyph { display:inline-block; line-height:1; }
    .logo-text { display:flex; flex-direction:column; line-height:1; }
    .logo-name { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-weight:900; font-size:18px; letter-spacing:-0.02em; }
    .logo-ver { font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:700; letter-spacing:.08em;
      text-transform:uppercase; color:var(--faint); margin-top:3px; }
    .nav-left { display:flex; align-items:center; gap:28px; }
    .nav-links { display:flex; gap:8px; align-items:center; }
    .nav-anchors { gap:22px; }
    .nav-links a.anchor { text-decoration:none; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); }
    .nav-links a.anchor:hover { color:var(--ink); }
    /* Тумблер темы в духе retroui: жёсткий контур, квадратный бегунок, ноль
       полутонов. Заливка дорожки и бегунка меняются местами — во включённом
       состоянии жёлтой становится дорожка, и это видно боковым зрением. */
    /* ── Тема переключается клавишей выключателя, а не бегунком ──
       Метафора буквальная, как на стене: вверх — свет горит (светлая тема),
       вниз — выключен (тёмная). Отсюда и пропорции: гнездо выше своей ширины,
       клавиша ходит по нему заметным шагом, а нажатие вдавливает всю рамку —
       тем же приёмом, что у соседней кнопки языка, чтобы шапка ощущалась одним
       набором кнопок, а не набором разнородных элементов управления.
       Ход задаём через top: он вертикальный, в арабском зеркалить нечего,
       поэтому логическое свойство здесь не нужно — в отличие от посадки
       клавиши поперёк гнезда. */
    .theme-sw { position:relative; width:28px; height:34px; flex-shrink:0; padding:0;
      background:var(--raised); color:inherit;
      border:2px solid var(--ink); border-radius:var(--r-sm); cursor:pointer;
      box-shadow:2px 2px 0 0 var(--ink);
      transition:box-shadow 110ms var(--ease), transform 110ms var(--ease); }
    .theme-sw:hover { box-shadow:3px 3px 0 0 var(--y); }
    .theme-sw:active { box-shadow:0 0 0 0 var(--ink); transform:translate(2px,2px); }
    .theme-sw:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
    .theme-sw .knob { position:absolute; top:3px; inset-inline-start:3px; width:18px; height:14px;
      background:var(--y); border:2px solid var(--ink); border-radius:3px;
      transition:top 170ms var(--ease), background 170ms var(--ease); }
    /* Свет выключен: клавиша уходит вниз и гаснет. Жёлтой она остаётся только в
       светлой теме — иначе «горит» читалось бы в обоих положениях. */
    [data-theme="dark"] .theme-sw .knob { top:13px; background:var(--line-soft); }
    @media (prefers-reduced-motion: reduce) { .theme-sw .knob { transition:none; } }
    .lang-dd { position:relative; }
    /* Кнопка языка — глиф «перевод» в рамке с жёсткой тенью. Код языка и
       галочку убрали: имя языка написано в списке на нём самом, и это
       понятнее двухбуквенного кода тому, кто пришёл не на своём языке. */
    .lang-btn { display:inline-grid; place-items:center; width:28px; height:34px; padding:0; flex-shrink:0;
      background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-radius:var(--r-sm);
      cursor:pointer; box-shadow:2px 2px 0 0 var(--ink);
      transition:box-shadow 110ms var(--ease), transform 110ms var(--ease); }
    .lang-btn svg { display:block; }
    .lang-btn:hover { box-shadow:3px 3px 0 0 var(--y); }
    /* Нажатие «вдавливает»: тень схлопывается, кнопка едет ей навстречу. */
    .lang-btn:active, .lang-dd.open .lang-btn { box-shadow:0 0 0 0 var(--ink); transform:translate(2px,2px); }
    .lang-list { display:none; position:absolute; inset-inline-end:0; top:calc(100% + 8px); z-index:40;
      min-width:212px; max-height:340px; overflow-y:auto; background:var(--paper); border:2px solid var(--ink);
      border-radius:var(--r-lg); box-shadow:5px 5px 0 0 var(--ink); }
    .lang-dd.open .lang-list { display:block; }
    .lang-opt { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
      padding:9px 14px; background:transparent; color:var(--ink);
      border:none; font:inherit; font-size:13.5px; font-weight:500; text-align:start; cursor:pointer; }
    .lang-opt:hover { background:var(--raised); }
    .lang-opt.active { background:var(--y); color:var(--y-ink); font-weight:700; }
    /* Галочка рисуется псевдоэлементом: она — следствие состояния, а не данные,
       и в разметку языков её тащить незачем. */
    .lang-opt.active::after { content:"\2713"; font-size:13px; font-weight:700; }
    .btn-login { margin-inline-start:8px; padding:10px 20px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.07em;
      background:var(--ink); color:var(--bg); box-shadow:3px 3px 0 0 var(--y); }
    .btn-login:hover { background:var(--ink); color:var(--bg); box-shadow:5px 5px 0 0 var(--y); transform:translate(-2px,-2px); }
    .btn-login:active { box-shadow:1px 1px 0 0 var(--y) !important; }
    /* Стрелка вниз у кнопок загрузки: знак действия, а не логотип платформы.
       Значки Apple и Windows — чужие торговые знаки и вдобавок два новых рисунка
       в наборе, где все остальные глифы — из одной линии. */
    .dl-glyph { flex:none; }

    /* Кнопка меню — такая же плашка, как выключатель и язык: на телефоне все три
       стоят в один ряд, и разнобой габаритов, радиуса и тени читался как случайность. */
    .burger { display:none; width:28px; height:34px; align-items:center; justify-content:center; background:var(--paper);
      border:2px solid var(--ink); border-radius:var(--r-sm); cursor:pointer; padding:0;
      box-shadow:2px 2px 0 0 var(--ink);
      transition:box-shadow 110ms var(--ease), transform 110ms var(--ease); }
    .burger:hover { box-shadow:3px 3px 0 0 var(--y); }
    .burger:active, .burger.open { box-shadow:0 0 0 0 var(--ink); transform:translate(2px,2px); }
    .burger:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
    .burger span { display:block; width:15px; height:2px; background:var(--ink); position:relative; transition:transform 140ms var(--ease); }
    .burger span::before, .burger span::after { content:""; position:absolute; left:0; width:15px; height:2px; background:var(--ink); transition:transform 140ms var(--ease), top 140ms var(--ease); }
    .burger span::before { top:-5px; } .burger span::after { top:5px; }
    .burger.open span { background:transparent; }
    .burger.open span::before { top:0; transform:rotate(45deg); } .burger.open span::after { top:0; transform:rotate(-45deg); }
    .mobile-menu { display:none; flex-direction:column; border-bottom:2px solid var(--ink); background:var(--bg); }
    .mobile-menu.open { display:flex; }
    .mobile-menu a { padding:15px 24px; text-decoration:none; font-weight:700; border-top:1.5px solid var(--line-soft);
      font-size:14px; display:flex; align-items:center; justify-content:space-between; }
    .mobile-menu a.cta { background:var(--y); color:var(--y-ink); }
    .mobile-menu a .mono { color:var(--faint); font-size:12px; }

    /* ── Hero ── */
    .hero { padding:64px 0; border-bottom:2px solid var(--ink); position:relative; overflow:hidden; }
    /* Оверлей справа от текста (запрос владельца), но колонка под него шире
       обычной: панель широкая, и в равных долях она снова превращалась в огрызок. */
    .hero-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:34px; align-items:center; position:relative; }
    .hero-copy { min-width:0; }
    /* Панель приподнята и вынесена к правому краю окна: в габаритах .wrap она
       налезала на заголовок и резала слово «Подсказывает». Отрицательный внешний
       отступ разрешён — у .hero стоит overflow:hidden, за экран ничего не выпадет. */
    /* Целевая зона указана владельцем: НИЖЕ шапки и правее заголовка.
       margin-top:0 при align-self:start ставит панель под шапку (отрицательный
       отступ загонял её ПОД неё), сдвиг вправо — margin-inline-start, вынос за
       правый край — margin-inline-end. Оба логические, поэтому в арабском
       зеркалятся сами; transform здесь был бы не RTL-безопасен. */
    .hero .demo { align-self:start; margin-top:0;
      margin-inline-start:min(140px,10vw);
      /* Вынос считаем от контейнера, а не в vw: .wrap максимум 1120px по центру,
         значит от его края до края окна ровно (100vw - 1120)/2. Жёсткий vw
         подходил под одну ширину и вылезал за экран на другой. min(0px, …)
         не даёт формуле стать положительной на узких окнах. */
      margin-inline-end:min(0px, calc((1120px - 100vw) / 2 - 8px)); }
    /* Сворачивание держит ПРАВЫЙ край, а не левый. Так в клиенте: выход из
       компактного режима сбрасывает якорь окна на .topLeft («полный оверлей всегда
       растёт вправо от левого края», OverlayWindow), то есть вход его туда НЕ
       ставит — свёрнутая пилюля остаётся у правого края, за который её держит
       PillSideResolver. На лендинге пилюля уезжала к левому краю панели, то есть
       на 599px левее места, где панель только что кончалась.
       Вынос берём ПОЛОВИННЫЙ от того, что разрешён панели. Полный (её правый край
       уходит под кромку окна) сделан, чтобы широкая панель выглядела приходящей
       из-за экрана; капсуле в 34px столько не нужно — на нём она вставала в 8px
       от кромки и читалась обрезанной. Половина выводит пилюлю заметно правее
       колонки, оставляя воздух до края. Величина считается из той же формулы,
       поэтому растёт вместе с окном, а не подобрана под одну ширину.
       Отступы логические, поэтому в арабском «правый край» сам становится левым.
       Одноколоночная раскладка (≤980px) правило переопределяет — см. адаптив. */
    .hero .demo.mini { margin-inline-start:auto;
      margin-inline-end:calc(min(0px, (1120px - 100vw) / 2 - 8px) / 2); }
    .idx-row { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
    .idx { font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:700; color:var(--faint); }
    h1 { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-weight:900; letter-spacing:-0.03em; font-size:clamp(34px,4.6vw,62px); line-height:1.04; }
    h1 .hl { background:var(--y); color:var(--y-ink); border:3px solid var(--ink); padding:0 0.14em; box-shadow:5px 5px 0 0 var(--ink); display:inline-block; line-height:1.14; }
    .lead { font-size:clamp(16px,2vw,19px); color:var(--muted); max-width:560px; margin-top:24px; }
    .cta-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }

  
    .stripebar { height:14px; background:repeating-linear-gradient(-45deg, var(--y) 0 12px, var(--ink) 12px 24px); border-bottom:2px solid var(--ink); }

    /* ── Секции ── */
    .section { padding:60px 0; border-bottom:2px solid var(--ink); }
    .sec-head { display:flex; align-items:baseline; gap:14px; border-bottom:2px solid var(--ink); padding-bottom:14px; }
    .sec-head .idx { font-size:18px; }
    h2 { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-weight:800; letter-spacing:-0.02em; font-size:clamp(24px,3.6vw,40px); }
    .sub { color:var(--muted); margin:14px 0 32px; font-size:15px; max-width:640px; }

    /* Шаги */
    .steps { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
    .step { border:2px solid var(--ink); border-radius:var(--r); background:var(--paper); padding:24px 22px; position:relative; }
    .step .num { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-weight:900; font-size:32px; line-height:1; background:var(--y); color:var(--y-ink);
      border:2px solid var(--ink); border-radius:var(--r-sm); display:inline-block; padding:4px 12px; box-shadow:3px 3px 0 0 var(--ink); margin-bottom:16px; }
    .step h3 { font-size:17px; font-weight:800; margin-bottom:8px; }
    .step p { color:var(--muted); font-size:13.5px; }
    .step .arrow { position:absolute; inset-inline-end:-15px; top:50%; transform:translateY(-50%); font-family:"JetBrains Mono",monospace;
      font-weight:700; font-size:18px; z-index:2; background:var(--bg); padding:2px; display:none; }
    @media (min-width:761px) { .step .arrow { display:block; } .step:last-child .arrow { display:none; } }
    [dir="rtl"] .step .arrow { transform:translateY(-50%) scaleX(-1); }

    /* Переход «веб → приложение».
       Стоит сразу под тремя шагами, первый из которых и есть «скачайте»:
       объяснение, зачем нужен клиент, обязано стоять там, где о нём впервые
       сказано, а не отдельной рекламной полосой в подвале — туда доходит
       меньшинство, и читается она как баннер, а не как часть рассказа.
       scroll-margin-top — из-за липкой шапки: без него якорь #desktop подводит
       заголовок полосы ровно под неё. */
    .dl-band { margin-top:26px; scroll-margin-top:80px; display:grid; grid-template-columns:1.05fr 0.95fr; gap:28px; align-items:center;
      border:2px solid var(--ink); border-radius:var(--r-lg); background:var(--paper); box-shadow:7px 7px 0 0 var(--y); padding:28px 30px; }
    .dl-band h3 { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-weight:800; letter-spacing:-0.02em;
      font-size:clamp(19px,2.5vw,26px); line-height:1.15; }
    .dl-lead { color:var(--muted); font-size:14.5px; margin-top:12px; }
    .dl-act { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:22px; }
    .dl-alt { font-size:12.5px; color:var(--muted); }
    .dl-alt a { font-weight:700; text-underline-offset:3px; }
    .dl-note { font-size:13px; color:var(--muted); margin-top:16px; border-top:1.5px solid var(--line-soft); padding-top:12px; }
    .dl-why { list-style:none; display:flex; flex-direction:column; gap:12px; }
    .dl-why li { display:flex; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.5; }
    .dl-why b { font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700; background:var(--y); color:var(--y-ink);
      border:2px solid var(--ink); border-radius:var(--r-sm); padding:2px 7px; flex:none; margin-top:1px; }

    /* Аудитория */
    /* Bento-сетка: плитки разного калибра вместо ряда одинаковых колонок.
       Палитра — только своя: жёлтый, чернильный, тёплый бежевый и белый.
       Зелёный и красный в наборе семантические (успех/ошибка) и в декор не идут. */
    .uses { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; counter-reset:use; }
    .use { display:flex; flex-direction:column; min-height:158px; padding:18px 20px 20px; cursor:pointer;
      border:2px solid var(--ink); border-radius:18px; background:var(--paper); box-shadow:var(--shadow-hard);
      transition:transform 130ms var(--ease), box-shadow 130ms var(--ease); }
    /* Номер — CSS-счётчиком (переводу не подлежит) в кружке: круг среди
       прямоугольных плиток задаёт вторую форму и держит ритм сетки. */
    .use::before { counter-increment:use; content:"0" counter(use); margin-bottom:auto;
      display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
      background:var(--ink); color:var(--bg);
      font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:800; letter-spacing:.03em; }
    .use b { display:block; margin-top:16px; font-size:16px; font-weight:800; letter-spacing:-0.01em; }
    /* Описание наследует цвет плитки и гасится прозрачностью: жёстко заданный
       --muted на жёлтой и тёмной плитках дал бы нечитаемую кашу. */
    .use span { display:block; margin-top:6px; font-size:13.5px; line-height:1.45; color:inherit; opacity:.7; }
    /* Клик «прикалывает» состояние наведения — видно, на чём остановились. */
    .use:hover, .use.active { transform:translate(-3px,-3px); box-shadow:7px 7px 0 0 var(--ink); }
    /* Кружок инвертируется относительно своей плитки — на жёлтой он тёмный,
       на тёмной жёлтый. Это тот же приём, что и у остальной сетки. */
    .use:nth-child(1) { grid-column:span 2; background:var(--y); color:var(--y-ink); border-radius:22px; }
    .use:nth-child(1)::before { background:var(--y-ink); color:var(--y); }
    .use:nth-child(1) b { font-size:19px; }
    /* Тёмная плитка держит свой фон в обеих темах — как и прочие тёмные блоки. */
    .use:nth-child(2) { grid-column:span 2; background:var(--band-bg); color:var(--band-fg); }
    .use:nth-child(2)::before { background:var(--y); color:var(--y-ink); }
    .use:nth-child(4) { background:var(--y-soft); }
    .use:nth-child(6) { background:var(--raised); }

    /* ── Лента фич: чередование текст ↔ анимированный мокап (таймлайн) ── */
    .feat-rows { position:relative; margin-top:18px; }
    .feat-rows::before { content:""; position:absolute; inset-inline-start:50%; top:10px; bottom:10px; width:2px; background:var(--ink); transform:translateX(-50%); }
    .feat-row { display:grid; grid-template-columns:1fr 64px 1fr; grid-auto-flow:dense; align-items:center; padding:30px 0; position:relative;
      opacity:0; transform:translateY(26px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
    .feat-row.in { opacity:1; transform:none; }
    .feat-row .node { grid-column:2; justify-self:center; width:46px; height:46px; border:2px solid var(--ink); border-radius:50%;
      background:var(--bg); display:flex; align-items:center; justify-content:center; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:14px; z-index:2; }
    .feat-row .txt .ftag { display:inline-block; font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:700; text-transform:uppercase;
      letter-spacing:0.06em; border:2px solid var(--ink); border-radius:var(--r-sm); padding:4px 9px; background:var(--paper); }
    .feat-row .txt h3 { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-weight:800; font-size:clamp(20px,2.4vw,27px); letter-spacing:-0.02em; margin-top:14px; }
    .feat-row .txt p { color:var(--muted); font-size:14px; margin-top:12px; max-width:380px; }
    .feat-row:nth-child(odd) .txt { grid-column:1; text-align:end; padding-inline-end:34px; }
    .feat-row:nth-child(odd) .txt p { margin-inline-start:auto; }
    .feat-row:nth-child(odd) .mk { grid-column:3; justify-self:start; margin-inline-start:34px; }
    .feat-row:nth-child(even) .txt { grid-column:3; padding-inline-start:34px; }
    .feat-row:nth-child(even) .mk { grid-column:1; justify-self:end; margin-inline-end:34px; }

    /* Мокап-рамка */
    .mk { width:100%; max-width:340px; border:2px solid var(--ink); border-radius:var(--r); background:var(--paper); box-shadow:var(--shadow-hard); overflow:hidden; }
    .mk .mk-bar { display:flex; gap:5px; padding:9px 12px; border-bottom:1.5px solid var(--line-soft); }
    .mk .mk-bar i { width:8px; height:8px; border-radius:50%; border:1.5px solid var(--ink); }
    .mk .mk-bar i.y { background:var(--y); }
    .mk .mk-body { padding:18px; min-height:140px; position:relative; display:flex; flex-direction:column; justify-content:center; }
    .ln { height:9px; background:var(--raised); margin-bottom:10px; }
    .ln.w40 { width:40%; } .ln.w55 { width:55%; } .ln.w70 { width:70%; } .ln.w85 { width:85%; }
    /* type — печать */
    .mk-type { height:10px; background:var(--y); width:6%; animation:typew 3.4s var(--ease) infinite; }
    @keyframes typew { 0% { width:6%; } 55% { width:88%; } 72% { width:88%; } 86% { width:6%; } 100% { width:6%; } }
    .mk-cur { display:inline-block; width:8px; height:14px; background:var(--y); margin-top:4px; animation:blink 1s step-end infinite; }
    .prole { display:inline-block; font-family:"JetBrains Mono",monospace; font-size:9.5px; font-weight:700; text-transform:uppercase;
      background:var(--y); color:var(--y-ink); border:1.5px solid var(--ink); padding:2px 7px; margin-bottom:14px; align-self:flex-start; }
    /* docs — материалы стягиваются в ответ */
    .mk-docs { display:flex; align-items:center; gap:8px; }
    .mk-docs .doc { width:26px; height:34px; border:1.5px solid var(--ink); background:var(--raised); flex-shrink:0; animation:docin 3s var(--ease) infinite; }
    .mk-docs .doc:nth-child(2) { animation-delay:.25s; } .mk-docs .doc:nth-child(3) { animation-delay:.5s; }
    @keyframes docin { 0%,70% { transform:translateY(0); opacity:1; } 85% { transform:translate(8px,-4px); opacity:.4; } 100% { transform:translateY(0); opacity:1; } }
    .mk-docs .arr { font-family:"JetBrains Mono",monospace; font-weight:700; color:var(--faint); }
    .mk-docs .ans { flex:1; height:30px; border:2px solid var(--ink); border-radius:var(--r-sm); background:var(--y); }
    [dir="rtl"] .mk-docs .arr { transform:scaleX(-1); }
    /* wave — слушает */
    .mk-wave { display:flex; align-items:center; gap:4px; height:78px; }
    .mk-wave i { flex:1; background:var(--ink); height:18%; align-self:center; animation:wv 1s ease-in-out infinite; }
    @keyframes wv { 0%,100% { height:16%; } 50% { height:92%; } }
    /* scan — скриншот */
    .mk-scan { position:relative; height:118px; border:1.5px dashed var(--line-soft); overflow:hidden; }
    .mk-scan .grid { position:absolute; inset:10px; background:repeating-linear-gradient(var(--raised) 0 2px, transparent 2px 13px); }
    .mk-scan .beam { position:absolute; inset-inline:0; height:16px; background:linear-gradient(var(--y), transparent); top:-16px; animation:scan 2.4s ease-in-out infinite; }
    @keyframes scan { 0% { top:-16px; } 50% { top:100%; } 100% { top:-16px; } }
    .mk-scan .corner { position:absolute; width:14px; height:14px; border:2px solid var(--ink); }
    .mk-scan .c1 { top:6px; left:6px; border-inline-end:none; border-bottom:none; }
    .mk-scan .c2 { top:6px; right:6px; border-inline-start:none; border-bottom:none; }
    .mk-scan .c3 { bottom:6px; left:6px; border-inline-end:none; border-top:none; }
    .mk-scan .c4 { bottom:6px; right:6px; border-inline-start:none; border-top:none; }
    /* chips — модели */
    .mk-chips span { display:block; height:13px; border:1.5px solid var(--ink); margin-bottom:9px; animation:chip 5s steps(1,end) infinite; }
    .mk-chips span:nth-child(1) { width:62%; animation-delay:0s; } .mk-chips span:nth-child(2) { width:78%; animation-delay:1s; }
    .mk-chips span:nth-child(3) { width:54%; animation-delay:2s; } .mk-chips span:nth-child(4) { width:70%; animation-delay:3s; }
    .mk-chips span:nth-child(5) { width:46%; animation-delay:4s; margin-bottom:0; }
    @keyframes chip { 0% { background:var(--y); color:var(--y-ink); } 20% { background:transparent; color:inherit; } 100% { background:transparent; color:inherit; } }
    /* kanban — трекер. Детали не для красоты: столбец-заголовок объясняет, что это
       доска, точка приоритета и метка — что у задачи есть свойства, счётчик — что
       колонок может быть много. Без них это просто три прямоугольника. */
    /* --colw/--step считаем от ширины СЕТКИ: 3 колонки и 2 зазора по 7px.
       Двигаем карточку через left, а не transform: процент в translateX берётся
       от ширины САМОГО элемента (он уже колонки на 12px из-за отступов), поэтому
       шаг выходил короче нужного и карточка не доезжала до колонки. */
    .mk-kan { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; position:relative;
      --colw:calc((100% - 14px) / 3); --step:calc(var(--colw) + 7px); }
    .mk-kan .col { border:1.5px solid var(--line-soft); border-radius:var(--r-sm); padding:6px; position:relative; min-height:112px; }
    .mk-kan .ch { display:flex; align-items:center; gap:4px; margin-bottom:7px; }
    .mk-kan .ch b { flex:1; height:5px; background:var(--line-soft); border-radius:3px; }
    .mk-kan .ch u { width:11px; height:9px; border:1.2px solid var(--line-soft); border-radius:2px; text-decoration:none; }
    .mk-kan .card { border:1.5px solid var(--ink); border-radius:5px; background:var(--paper); padding:5px; margin-bottom:5px; }
    .mk-kan .card s { display:block; height:4px; background:var(--ink); opacity:.5; border-radius:2px; text-decoration:none; margin-bottom:4px; }
    .mk-kan .card s.w2 { width:64%; } .mk-kan .card s.w3 { width:82%; }
    .mk-kan .meta { display:flex; align-items:center; gap:4px; }
    .mk-kan .slotgap { height:32px; }
    .mk-kan .dot { width:6px; height:6px; border-radius:50%; background:var(--red); flex:none; }
    .mk-kan .dot.g { background:var(--grn); } .mk-kan .dot.y { background:var(--y); border:1px solid var(--ink); }
    .mk-kan .lbl { height:6px; width:22px; border-radius:3px; background:var(--y); border:1px solid var(--ink); }
    .mk-kan .fly { position:absolute; top:22px; left:6px; width:calc(var(--colw) - 12px);
      border:1.5px solid var(--ink); border-radius:5px;
      background:var(--y); padding:5px; box-shadow:2px 2px 0 0 var(--ink); animation:kanfly 7s var(--ease) infinite; }
    .mk-kan .fly s { display:block; height:4px; width:70%; background:var(--y-ink); border-radius:2px; text-decoration:none; margin-bottom:4px; }
    /* Шаг перелёта = ширина колонки + зазор. Пауза в каждой колонке длиннее
       перелёта — иначе движение читается как дрожание, а не как перенос. */
    @keyframes kanfly {
      0%,22% { left:6px; }
      31% { left:calc(var(--step) * 0.5 + 6px); }
      40%,58% { left:calc(var(--step) + 6px); }
      67% { left:calc(var(--step) * 1.5 + 6px); }
      76%,94% { left:calc(var(--step) * 2 + 6px); }
      100% { left:6px; }
    }
    /* calendar — сетка недели с колонкой времени, событиями разной длины и
       бегущей линией «сейчас». Видеовстреча помечена точкой. */
    .mk-cal { display:grid; grid-template-columns:14px repeat(5,1fr); gap:4px; position:relative; }
    .mk-cal .hours { display:flex; flex-direction:column; justify-content:space-between; padding:14px 0 2px; }
    .mk-cal .hours i { display:block; height:3px; width:100%; background:var(--line-soft); border-radius:2px; }
    .mk-cal .day { border:1.5px solid var(--line-soft); border-radius:var(--r-sm); position:relative; min-height:112px; }
    .mk-cal .day::before { content:""; position:absolute; inset-inline:2px; top:3px; height:4px;
      background:var(--line-soft); border-radius:2px; opacity:.8; }
    .mk-cal .slot { position:absolute; inset-inline:3px; border:1.5px solid var(--ink); border-radius:4px; background:var(--paper); }
    .mk-cal .s1 { top:16px; height:18px; } .mk-cal .s2 { top:52px; height:26px; } .mk-cal .s3 { top:38px; height:16px; }
    .mk-cal .ev { position:absolute; inset-inline:3px; top:30px; height:34px; border:1.5px solid var(--ink); border-radius:4px;
      background:var(--y); box-shadow:2px 2px 0 0 var(--ink); opacity:0; animation:evshow 5s var(--ease) infinite; }
    .mk-cal .ev i { position:absolute; top:4px; inset-inline-start:4px; width:6px; height:6px; border-radius:50%;
      background:var(--y-ink); }
    .mk-cal .ev s { position:absolute; inset-inline:4px; top:14px; height:4px; background:var(--y-ink); opacity:.55;
      border-radius:2px; text-decoration:none; }
    @keyframes evshow {
      0%,8% { opacity:0; transform:translateY(6px) scale(.96); }
      22%,78% { opacity:1; transform:translateY(0) scale(1); }
      100% { opacity:0; transform:translateY(6px) scale(.96); }
    }
    .mk-cal .now { position:absolute; inset-inline:0; height:1.5px; background:var(--red); top:44px; animation:nowline 9s linear infinite; }
    .mk-cal .now::before { content:""; position:absolute; inset-inline-start:0; top:-2.5px; width:6px; height:6px; border-radius:50%; background:var(--red); }
    @keyframes nowline { 0% { top:26px; } 100% { top:96px; } }
    /* files — плитки с типом файла и подписью, снизу шкала занятого места */
    .mk-files { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
    .mk-files .f { border:1.5px solid var(--ink); border-radius:var(--r-sm); background:var(--paper); padding:6px 4px;
      text-align:center; opacity:0; animation:filein 4.5s var(--ease) infinite; }
    .mk-files .f b { display:block; font-family:"JetBrains Mono",monospace; font-size:8.5px; font-weight:700;
      letter-spacing:.04em; color:inherit; }
    .mk-files .f s { display:block; height:3px; width:74%; margin:5px auto 0; background:var(--line-soft);
      border-radius:2px; text-decoration:none; }
    .mk-files .f.y { background:var(--y); color:var(--y-ink); }
    .mk-files .f:nth-child(1) { animation-delay:0s; } .mk-files .f:nth-child(2) { animation-delay:.3s; }
    .mk-files .f:nth-child(3) { animation-delay:.6s; } .mk-files .f:nth-child(4) { animation-delay:.9s; }
    @keyframes filein { 0% { opacity:0; transform:translateY(7px); } 14%,86% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(7px); } }
    .mk-quota { margin-top:12px; }
    .mk-quota .bar { height:9px; border:1.5px solid var(--ink); border-radius:var(--r-sm); overflow:hidden; }
    .mk-quota .bar i { display:block; height:100%; background:var(--y); width:0; animation:quota 4.5s var(--ease) infinite; }
    .mk-quota s { display:block; height:3px; width:38%; margin-top:6px; background:var(--line-soft); border-radius:2px; text-decoration:none; }
    @keyframes quota { 0% { width:0; } 60%,88% { width:64%; } 100% { width:0; } }
    /* Системная просьба «меньше движения» — показываем финальный кадр, а не пустоту. */
    @media (prefers-reduced-motion: reduce) {
      .mk-kan .fly, .mk-cal .ev, .mk-cal .now, .mk-files .f, .mk-quota .bar i,
      .mk-notes .nt-item.done .nt-box::after, .mk-notes .nt-prog i { animation:none; opacity:1; transform:none; }
      .mk-quota .bar i { width:64%; }
      .mk-notes .nt-prog i { width:66%; }
    }
    /* graph — после встречи */
    .mk-graph { width:100%; height:120px; }
    .mk-graph line { stroke:var(--ink); stroke-width:2; stroke-dasharray:60; stroke-dashoffset:60; animation:draw 3s var(--ease) infinite; }
    .mk-graph line:nth-of-type(2) { animation-delay:.4s; } .mk-graph line:nth-of-type(3) { animation-delay:.8s; }
    @keyframes draw { 0% { stroke-dashoffset:60; } 40% { stroke-dashoffset:0; } 85% { stroke-dashoffset:0; } 100% { stroke-dashoffset:60; } }
    .mk-graph circle { fill:var(--paper); stroke:var(--ink); stroke-width:2; }
    .mk-graph circle.y { fill:var(--y); }

    /* запись — REC + аудио-волна */
    .mk-rec { gap:14px; }
    .mk-rec .rec-head { display:flex; align-items:center; gap:7px; }
    .mk-rec .rec-dot { width:9px; height:9px; border-radius:50%; background:var(--y); border:1.5px solid var(--ink); animation:pulse-y 1.4s ease-in-out infinite; }
    .mk-wave i:nth-child(3n) { animation-delay:.12s; } .mk-wave i:nth-child(3n+1) { animation-delay:.26s; } .mk-wave i:nth-child(4n) { animation-delay:.4s; }
    /* AI-заметки — итог встречи с чек-листом action items. Живой текст вместо
       серых полосок: соседние мокапы давно показывают настоящий контент, и
       абстрактный скелет здесь читался как незагрузившийся блок. */
    .mk-notes { gap:0; align-items:stretch; justify-content:flex-start; }
    .mk-notes .nt-head { display:flex; align-items:center; gap:7px; }
    .mk-notes .nt-badge { font-family:"JetBrains Mono",monospace; font-size:8.5px; font-weight:800; letter-spacing:.06em;
      background:var(--y); color:var(--y-ink); border:1.5px solid var(--ink); padding:2px 5px; }
    .mk-notes .nt-ttl { font-size:12.5px; font-weight:700; letter-spacing:-0.01em; }
    .mk-notes .nt-sum { margin:8px 0 0; font-size:11px; line-height:1.5; color:var(--muted);
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .mk-notes .nt-sep { height:1.5px; background:var(--line-soft); margin:11px 0 3px; }
    .mk-notes .nt-item { display:flex; align-items:flex-start; gap:8px; margin-top:7px; }
    .mk-notes .nt-item .t { font-size:11px; line-height:1.35; color:var(--ink); }
    /* Вычеркнутый пункт — уже сделанный: это отличает его от следующего в работе. */
    .mk-notes .nt-item.done .t { color:var(--muted); text-decoration:line-through; text-decoration-thickness:1.5px; }
    .mk-notes .nt-box { width:14px; height:14px; border:1.5px solid var(--ink); background:var(--paper);
      border-radius:3px; flex-shrink:0; position:relative; margin-top:1px; }
    .mk-notes .nt-item.done .nt-box { background:var(--y); }
    .mk-notes .nt-item.done .nt-box::after { content:"✓"; position:absolute; inset:-1px; display:flex; align-items:center; justify-content:center;
      font-size:10px; font-weight:800; color:var(--y-ink); animation:notecheck 3.6s var(--ease) infinite; }
    /* Галочки ставятся по очереди, а не разом — так видно, что список живой. */
    .mk-notes .nt-item.d2 .nt-box::after { animation-delay:.55s; }
    .mk-notes .nt-foot { display:flex; align-items:center; gap:8px; margin-top:12px; }
    .mk-notes .nt-prog { flex:1; height:7px; border:1.5px solid var(--ink); border-radius:var(--r-sm); overflow:hidden; }
    .mk-notes .nt-prog i { display:block; height:100%; background:var(--y); width:0; animation:ntprog 3.6s var(--ease) infinite; }
    .mk-notes .nt-cnt { font-family:"JetBrains Mono",monospace; font-size:9px; font-weight:800; color:var(--faint); }
    @keyframes notecheck { 0%,25% { opacity:0; transform:scale(.4); } 42%,100% { opacity:1; transform:scale(1); } }
    /* Полоса догоняет галочки: 0 → треть → две трети, ступени под их задержки. */
    @keyframes ntprog { 0%,25% { width:0; } 45%,58% { width:33%; } 70%,100% { width:66%; } }
    /* интеграции — плитки сервисов */
    .mk-int { position:relative; align-items:stretch; justify-content:center; }
    .mk-int .int-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .mk-int .int-tile { aspect-ratio:1.4/1; border:1.5px solid var(--ink); background:var(--raised); display:flex; align-items:center; justify-content:center;
      font-family:"JetBrains Mono",monospace; font-size:8.5px; font-weight:700; letter-spacing:0.02em; color:var(--faint); }

    /* ── Реальный текст в мокапах ── */
    .mk .mk-body.mk-chat, .mk .mk-body.mk-tr, .mk .mk-body.mk-prompt, .mk .mk-body.mk-after,
    .mk .mk-body.mk-kb { align-items:stretch; justify-content:flex-start; }
    .mc-who { font-family:"JetBrains Mono",monospace; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--faint); }
    .mc-who.y { color:var(--y-ink); background:var(--y); padding:2px 6px; border:1.5px solid var(--ink); align-self:flex-start; margin-top:13px; }
    .mc-q { font-size:13px; font-weight:600; margin:5px 0 2px; }
    .mc-a { font-size:12px; line-height:1.5; margin-top:6px; color:var(--ink);
      display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .mk-cur { vertical-align:-2px; }
    /* docs с подписями формата */
    .mk-kb .mk-docs { margin-bottom:13px; }
    .mk-docs .doc { width:auto; height:auto; min-width:34px; padding:7px 6px; text-align:center;
      font-family:"JetBrains Mono",monospace; font-size:8.5px; font-weight:700; letter-spacing:0.02em; color:var(--muted); }
    /* код под сканером / в промпте */
    .mk-code { font-family:"JetBrains Mono",monospace; font-size:11px; line-height:1.55; white-space:pre; color:var(--ink); margin:0; }
    .mk-scan .mk-code { position:absolute; inset:12px; z-index:1; }
    .mk-prompt .mk-code { white-space:pre-wrap; margin-top:8px;
      display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
    /* провайдеры-чипы с названиями моделей */
    .mk-body.mk-chips { flex-direction:row; flex-wrap:wrap; align-content:flex-start; gap:6px; padding:14px; }
    /* повышенная специфичность (.mk-body.mk-chips = 0,2,0 + span = 0,0,1 = 0,2,1) перекрывает .mk-chips span:nth-child(N) */
    .mk-body.mk-chips span { display:inline-block; width:auto !important; height:auto; padding:5px 9px; margin:0;
      font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:700; border:1.5px solid var(--ink); }
    .mk-chips span:nth-child(6) { animation-delay:3.1s; }
    .mk-chips span:nth-child(7) { animation-delay:3.7s; }
    .mk-chips span:nth-child(8) { animation-delay:4.4s; }
    /* синхронный перевод */
    .tr-arrow { font-family:"JetBrains Mono",monospace; font-weight:700; color:var(--faint); margin:8px 0 6px; font-size:13px; }
    /* speaker row: имя + эквалайзер в одну строку */
    .tr-speaker { display:flex; align-items:center; gap:7px; }
    /* equalizer: 4 жёлтых полосы */
    .eq { display:inline-flex; align-items:flex-end; gap:2.5px; height:13px; }
    .eq i { display:block; width:3px; background:var(--y-ink); border-radius:2px; height:4px; }
    .eq i:nth-child(1) { animation:eq 0.70s ease-in-out infinite 0.00s; }
    .eq i:nth-child(2) { animation:eq 0.90s ease-in-out infinite 0.18s; }
    .eq i:nth-child(3) { animation:eq 0.75s ease-in-out infinite 0.35s; }
    .eq i:nth-child(4) { animation:eq 0.85s ease-in-out infinite 0.08s; }
    @keyframes eq { 0%,100% { height:3px; } 50% { height:13px; } }
    /* исходный текст: появляется слева направо */
    .tr-src-reveal { animation:tr-src-reveal 4s ease infinite; }
    @keyframes tr-src-reveal {
      0%,3%   { clip-path:inset(0 100% 0 0); }
      32%,88% { clip-path:inset(0 0%   0 0); }
      97%,100%{ clip-path:inset(0 100% 0 0); }
    }
    /* перевод — долго виден, коротко скрыт */
    .tr-appear { animation:tr-appear 4s var(--ease) infinite; }
    @keyframes tr-appear { 0%,12% { opacity:0; transform:translateY(6px); } 28%,88% { opacity:1; transform:none; } 97%,100% { opacity:0; transform:translateY(-3px); } }
    /* цена всегда LTR чтобы RTL-страницы не зеркалили цифры */
    .plan-price { direction:ltr; unicode-bidi:isolate; display:inline-block; }
    /* вторая строка compat.note (пустая в нерусских версиях) */
    .compat-note2:empty { display:none; }
    .compat-note2:not(:empty) { display:block; }
    /* после встречи: граф + теги тем */
    .mk-after .mk-graph { height:92px; }
    .after-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
    .after-tags span { font-family:"JetBrains Mono",monospace; font-size:9px; font-weight:700; text-transform:uppercase;
      border:1.5px solid var(--ink); padding:3px 7px; background:var(--paper); }

    /* Совместимость */
    .compat { border:2px solid var(--ink); border-radius:var(--r-lg); background:var(--band-bg); color:var(--band-fg); padding:26px 28px; margin-top:34px; }
    .compat h3 { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-size:clamp(17px,2.4vw,22px); font-weight:800; margin-bottom:8px; }
    .compat p { color:inherit; opacity:.72; font-size:13.5px; max-width:560px; }
    .compat .row { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
    .compat .svc { font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
      border:1.5px solid #555; padding:7px 12px; display:inline-flex; align-items:center; gap:8px; }
    .compat .svc b { color:var(--band-accent); }
    .compat .svc.any { background:var(--y); color:var(--y-ink); border-color:var(--y); }

    /* Переключатель периода. Выгода считается из реальных цен /v1/tariffs по
       ДНЕВНОЙ стоимости — иначе полугодие с 185 днями нельзя честно сравнить
       с месяцем в 31 день. На кнопке стоит максимум по тарифам, поэтому рядом
       обязательна оговорка «до»: у Pro и Max выгода разная. */
    .perswitch { display:flex; width:fit-content; margin:0 auto 22px; border:2px solid var(--ink); border-radius:var(--r);
      overflow:hidden; box-shadow:var(--shadow-hard); background:var(--paper); }
    .perswitch .per { display:inline-flex; align-items:center; gap:7px; padding:10px 16px; cursor:pointer;
      border:none; border-inline-start:2px solid var(--ink); background:transparent; color:var(--ink);
      font:inherit; font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
      transition:background 120ms var(--ease); }
    .perswitch .per:first-child { border-inline-start:none; }
    .perswitch .per:hover { background:var(--raised); }
    .perswitch .per.active { background:var(--y); color:var(--y-ink); }
    .perswitch .save:not(:empty) { font-style:normal; font-family:"JetBrains Mono",monospace; font-size:10px;
      font-weight:800; letter-spacing:0; text-transform:none; padding:2px 7px; border-radius:999px;
      background:var(--ink); color:var(--bg); white-space:nowrap; }
    /* На активной (жёлтой) кнопке чип обязан быть тёмным: светлый на жёлтом не читается. */
    .perswitch .per.active .save:not(:empty) { background:var(--y-ink); color:var(--y); }
    /* Барабан: полоса цифр едет вверх и останавливается на нужной. Высота ячейки
       и шаг сдвига — одна и та же величина, иначе цифра встаёт не по центру окна. */
    .plan-price .reel { display:inline-block; height:1.15em; overflow:hidden; vertical-align:-0.12em; }
    .plan-price .reel .strip { display:block; transition:transform 900ms cubic-bezier(.15,.85,.3,1); }
    .plan-price .reel .strip > span { display:block; height:1.15em; line-height:1.15em; }
    @media (prefers-reduced-motion: reduce) { .plan-price .reel .strip { transition:none; } }
    @media (max-width:520px) { .perswitch { display:flex; width:100%; } .perswitch .per { flex:1; justify-content:center; padding:10px 8px; } }

    /* Свежие статьи на главной */

    /* Тарифы */
    .pricing { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); align-items:stretch; }
    .plan { border:2px solid var(--ink); border-radius:var(--r-lg); background:var(--paper); padding:26px 24px; display:flex; flex-direction:column;
      transition:transform 110ms var(--ease), box-shadow 110ms var(--ease); }
    .plan:hover { transform:translate(-2px,-2px); box-shadow:var(--shadow-hard); }
    .plan.feat { background:var(--y); color:var(--y-ink); box-shadow:8px 8px 0 0 var(--ink); }
    .plan.feat:hover { transform:translate(-2px,-2px); box-shadow:10px 10px 0 0 var(--ink); }
    .plan .name { font-family:"JetBrains Mono",monospace; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; font-size:12px;
      display:flex; justify-content:space-between; align-items:center; }
    .plan .name::after { content:""; width:8px; height:8px; background:var(--ink); }
    .plan.feat .name::after { background:var(--y-ink); }
    /* Строка-обещание под названием: карточка сначала говорит, для кого этот тариф,
       и только потом перечисляет пункты. Приглушена намеренно — главным в блоке
       остаётся цена, а обещание её объясняет. */
    .plan .tagline { margin-top:9px; font-size:13.5px; line-height:1.45; color:var(--muted); }
    .plan.feat .tagline { color:rgba(17,17,17,0.62); }
    /* nowrap стоял на всём блоке — с коротким рублёвым ценником это сходило с
       рук, но в долларах (248.00 $ / год) суффикс наезжал на цену и вылезал за
       карточку. Само число остаётся неразрывным, а период переносится строкой
       ниже, когда не помещается. */
    .plan .price { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-size:clamp(27px,2.6vw,34px); font-weight:800; margin:14px 0 4px; letter-spacing:-0.02em;
      display:flex; flex-wrap:wrap; align-items:baseline; gap:0 7px;
      /* Цифры Unbounded пропорциональные: «1» 17.55px против «0» 31.13px.
         Ячейка барабана равна самой широкой цифре, поэтому «1» повисала
         в пустой коробке (216 читалось как 21 6). С табличными цифрами все
         ровно 25.84px — и зазор уходит, и ширина не скачет при прокрутке. */
      font-variant-numeric:tabular-nums; }
    .plan .price .plan-price { white-space:nowrap; }
    .plan .price small { font-size:13px; font-weight:600; color:var(--muted); font-family:"Onest","Onest Fallback",sans-serif; white-space:nowrap; }
    .plan.feat .price small { color:rgba(17,17,17,0.6); }
    .plan ul { list-style:none; margin:16px 0 22px; font-size:13.5px; }
    .plan li { padding:7px 0; border-top:1.5px dashed var(--line-soft); }
    .plan.feat li { border-top-color:rgba(17,17,17,0.25); }
    .plan .btn { margin-top:auto; }

    /* FAQ */
    .faq { border:2px solid var(--ink); border-radius:var(--r); overflow:hidden; background:var(--paper); margin-top:30px; }
    .faq details { border-top:2px solid var(--ink); }
    .faq details:first-child { border-top:none; }
    .faq summary { cursor:pointer; list-style:none; padding:18px 20px; font-weight:800; font-size:15.5px;
      display:flex; justify-content:space-between; align-items:center; gap:14px; }
    .faq summary::-webkit-details-marker { display:none; }
    .faq summary::after { content:"+"; font-family:"JetBrains Mono",monospace; font-size:18px; font-weight:700; flex-shrink:0; }
    .faq details[open] summary::after { content:"−"; }
    .faq details[open] summary { background:var(--y); color:var(--y-ink); }
    .faq .a { padding:16px 20px 20px; color:var(--muted); font-size:14px; border-top:1.5px dashed var(--line-soft); }

    /* Соцдоказательство: живые счётчики платформы */
    .stats-band { padding:44px 0; border-bottom:2px solid var(--band-bg); background:var(--band-bg); color:var(--band-fg); }
    .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:0; }
    .stats-grid .stat { position:relative; text-align:center; }
    .stats-grid dd { margin:0; font-family:"Unbounded","Unbounded Fallback",sans-serif; font-weight:900;
      font-size:clamp(28px,4vw,46px); line-height:1; letter-spacing:-0.03em;
      color:var(--band-accent); font-variant-numeric:tabular-nums; }
    .stats-grid dt { margin-top:11px; font-family:"JetBrains Mono",monospace; font-size:10.5px;
      font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.5; }
    /* Разделители — псевдоэлементом на currentColor: лента в тёмной теме
       инвертируется, и жёстко заданный белый цвет на ней бы пропал. */
    .stats-grid .stat + .stat::before { content:""; position:absolute; inset-block:4px;
      inset-inline-start:-10px; width:1.5px; background:currentColor; opacity:.14; }
    @media (max-width:720px) {
      .stats-grid { grid-template-columns:repeat(2,1fr); gap:26px 16px; }
      /* В два столбца разделитель нужен только у правой колонки — у левой он
         повис бы на самом краю ленты. */
      .stats-grid .stat + .stat::before { display:none; }
      .stats-grid .stat:nth-child(even)::before { display:block; inset-inline-start:-8px; }
    }

    /* Финальный CTA */
    .cta-band { padding:60px 0; border-bottom:2px solid var(--ink);
      background-image:radial-gradient(circle, var(--line-soft) 1.5px, transparent 1.5px); background-size:14px 14px; }
    .cta-card { background:var(--band-bg); color:var(--band-fg); border:2px solid var(--ink); border-radius:var(--r-lg); box-shadow:8px 8px 0 0 var(--y);
      padding:42px 36px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
    .cta-card .display { font-size:clamp(22px,3.4vw,34px); color:var(--band-fg); }
    .cta-card .display em { font-style:normal; color:var(--band-accent); }

    /* ── Меню разделов (только у языков, где есть SEO-граф) ──────────────
       Три панели вместо пяти плоских выпадашек. Список ссылок отвечает на
       вопрос «какие есть страницы», но не на вопрос «что тут вообще есть»;
       панель отвечает на второй: слева тема раздела, справа его карта.
       Панель позиционируется от самой шапки, а не от кнопки: иначе широкий
       блок у правого раздела вылезал бы за край окна. */
    .nav-mega { gap:2px; }
    .mega { position:static; }
    .mega-btn { display:inline-flex; align-items:center; gap:6px; border:none; background:transparent;
      color:var(--muted); font:inherit; font-weight:700; font-size:12px; text-transform:uppercase;
      letter-spacing:0.06em; padding:8px 10px; cursor:pointer; border-radius:var(--r-sm); }
    .mega-btn:hover, .mega.open .mega-btn { color:var(--ink); background:var(--raised); }
    .mega-btn:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
    .mega-caret { width:0; height:0; border:4px solid transparent; border-top-color:currentColor;
      margin-top:3px; transition:transform 140ms var(--ease); }
    .mega.open .mega-caret { transform:rotate(180deg); margin-top:-3px; }
    .mega-list { display:none; position:absolute; inset-inline-start:24px; top:calc(100% + 10px);
      z-index:40; width:min(880px, calc(100vw - 48px)); background:var(--paper);
      border:2px solid var(--ink); border-radius:var(--r-lg); box-shadow:6px 6px 0 0 var(--ink);
      padding:24px; grid-template-columns:minmax(180px,0.85fr) minmax(0,2.5fr); gap:28px; }
    .mega.open .mega-list { display:grid; }
    .mega-lead { border-inline-end:1.5px solid var(--line-soft); padding-inline-end:24px; }
    .mega-lead-h { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-weight:800; font-size:19px;
      line-height:1.15; letter-spacing:-.02em; color:var(--ink); margin:0 0 10px; }
    .mega-lead-p { font-size:13px; line-height:1.5; color:var(--muted); margin:0;
      text-transform:none; letter-spacing:0; font-weight:400; }
    .mega-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:20px 24px; }
    .mega-grp-h { font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:800;
      letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 9px; }
    .mega-grp a { display:block; padding:4px 0; text-decoration:none; font-size:13.5px;
      font-weight:600; line-height:1.35; color:var(--ink); text-transform:none; letter-spacing:0; }
    .mega-grp a:hover { text-decoration:underline; text-decoration-color:var(--y);
      text-decoration-thickness:2px; text-underline-offset:3px; }
    @media (max-width:1040px) {
      .mega.open .mega-list { grid-template-columns:1fr; }
      .mega-lead { border-inline-end:none; border-bottom:1.5px solid var(--line-soft);
        padding-inline-end:0; padding-bottom:16px; }
    }

    /* ── Подвал как слой обхода ─────────────────────────────────────────
       Светлый и просторный. Заголовок колонки набран тем же шрифтом, что и
       заголовки страниц: подвал должен читаться человеком, иначе он
       превращается в свалку ключевых слов — и это видно. */
    .foot-graph { display:grid; grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr));
      gap:32px 40px; padding-top:54px; padding-bottom:34px;
      border-bottom:1.5px solid var(--line-soft); }
    /* Строке копирайта нужен воздух под линией: без него разделитель лежит на
       тексте вплотную, а весь запас пустоты уходит под строку. Правило
       привязано к соседству, а не к самой строке, — на четырнадцати языках без
       графа подвала-сетки нет, и там отступ был бы пустой прибавкой. */
    .foot-graph + .foot { padding-top:30px; }
    .foot-lead { padding-inline-end:28px; }
    .foot-tagline { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-weight:800; font-size:21px;
      line-height:1.25; letter-spacing:-.02em; color:var(--ink); margin:0 0 18px; max-width:22ch; }
    .foot-lead-links { display:flex; flex-wrap:wrap; gap:10px 18px; }
    .foot-h { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-size:20px; font-weight:800;
      letter-spacing:-.02em; text-transform:none; color:var(--ink); margin:0 0 18px; }
    .foot-graph ul { list-style:none; margin:0; padding:0; }
    .foot-graph li + li { margin-top:11px; }
    .foot-graph a { font-size:15px; line-height:1.4; color:var(--ink); text-decoration:none;
      text-transform:none; letter-spacing:0; font-weight:500; }
    .foot-graph a:hover { text-decoration:underline;
      text-decoration-color:var(--y); text-decoration-thickness:2px; text-underline-offset:4px; }
    .foot-all { font-weight:700 !important; }
    @media (max-width:1100px) {
      .foot-graph { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
      .foot-lead { grid-column:1 / -1; padding-inline-end:0; }
    }
    @media (max-width:600px) {
      .foot-graph { grid-template-columns:1fr; gap:26px; padding-top:38px; padding-bottom:34px; }
      .foot-h { font-size:18px; margin-bottom:14px; }
      .foot-tagline { font-size:19px; }
    }
    @media (prefers-reduced-motion: reduce) { .mega-caret { transition:none; } }

    footer { padding:34px 0; }
    .foot { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
      font-size:11px; color:var(--muted); text-transform:uppercase; font-weight:600; letter-spacing:0.05em; }
    .foot a { text-decoration:none; } .foot a:hover { color:var(--ink); }

    .lang-banner { display:none; background:var(--band-bg); color:var(--band-fg); font-size:13.5px; padding:9px 0; }
    .lang-banner a { color:var(--band-accent); font-weight:700; }
    .lang-banner .wrap { display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; }

    /* ── Адаптив ── */
    @media (max-width: 980px) {
      .hero-grid { grid-template-columns:1fr; gap:26px; }
      /* Одна колонка — десктопный вынос вправо должен уходить ЦЕЛИКОМ. Раньше
         сбрасывались только margin-top и margin-inline-end, а оставшийся
         margin-inline-start (10vw) сдвигал панель вправо: на телефоне она стояла
         с отступом 37px слева и впритык к правому краю экрана. margin-inline:auto
         центрирует её в колонке, когда ширину ограничивает max-width. */
      /* width:100% обязателен рядом с `margin-inline:auto`: авто-поля отменяют
         растягивание элемента грида, и окно начинает считаться по содержимому.
         Широкая диаграмма в ответе так раздувала его с 358 до 460 пикселей и
         вылезала за макет. `:not(.mini)` — чтобы правило не задело свёрнутую
         пилюлю, у которой ширина своя, 34 пикселя. */
      .hero .demo:not(.mini) { margin-top:0; margin-inline:auto; width:100%; max-width:460px; }
      .hero .demo.mini { margin-top:0; }
      /* Свёрнутая пилюля тоже остаётся по центру. Правило «сворачиваемся к правому
         краю» осмысленно там, где панель стоит справа от текста; в одной колонке
         она центрирована, и пилюля, отскочившая к краю, читалась бы промахом. */
      .hero .demo.mini { margin-inline:auto; }
    }
    @media (max-width: 860px) {
      .feat-rows::before { inset-inline-start:23px; }
      .feat-row { grid-template-columns:46px 1fr; gap:18px; padding:22px 0; }
      .feat-row .node { grid-column:1; }
      .feat-row .txt, .feat-row:nth-child(odd) .txt, .feat-row:nth-child(even) .txt {
        grid-column:2; text-align:start; padding:0; }
      .feat-row:nth-child(odd) .txt p { margin-inline-start:0; }
      .feat-row .mk, .feat-row:nth-child(odd) .mk, .feat-row:nth-child(even) .mk {
        grid-column:2; justify-self:start; margin:16px 0 0; }
    }
    @media (max-width: 760px) {
      .sub[style*="nowrap"] { white-space:normal !important; }
      .wrap { padding:0 16px; }
      /* Прячем весь блок якорных ссылок: иначе пустой .nav-anchors держит gap в
         .nav-left и сдвигает шапку вправо — бургер уезжал за край и обрезался. */
      .nav-anchors, .btn-login { display:none; }
      .nav-left { gap:0; }
      .burger { display:inline-flex; }
      .hero { padding:40px 0; }
      /* Полоса в одну колонку: две по 160px превращали и заголовок, и список
         причин в лесенку из одиночных слов. */
      .dl-band { grid-template-columns:1fr; gap:20px; padding:24px 20px; box-shadow:5px 5px 0 0 var(--y); }
      .dl-act .btn { width:100%; }
      h1 { font-size:clamp(30px, 8.5vw, 40px); }
      h1 .hl { box-shadow:4px 4px 0 0 var(--ink); border-width:2.5px; }
      .cta-row { flex-direction:column; } .cta-row .btn { width:100%; }
      .section { padding:44px 0; }
      .uses { grid-template-columns:repeat(2,1fr); }
      /* В два столбца широкими остаются только верхние две, остальные — парами. */
      .use:nth-child(1), .use:nth-child(2) { grid-column:span 2; }
      .use:first-child { border-top:none; }
      .plan.feat { box-shadow:5px 5px 0 0 var(--ink); }
      .cta-card { padding:28px 22px; } .cta-card .btn { width:100%; }
      .tickerbar { font-size:10px; }
      .foot { justify-content:center; text-align:center; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ticker, .demo-a p::after, .pulse, .demo-live i,
      .mk-type, .mk-docs .doc, .mk-wave i, .mk-scan .beam, .mk-chips span, .mk-graph line, .mk-cur, .tr-appear, .tr-src-reveal, .eq i { animation:none !important; }
      .tr-appear { opacity:1; transform:none; }
      .tr-src-reveal { clip-path:none; }
      .eq i { height:7px; }
      .feat-row { opacity:1; transform:none; transition:none; }
      .mk-type { width:80%; } .mk-graph line { stroke-dashoffset:0; }
    }

    /* ── Cookie consent widget ── */
    /* Баннер прикреплён к низу, и любое изменение его высоты сдвигает его
       верхний край — Lighthouse считал это сдвигом вёрстки на 0,11 (порог
       «хорошо» — 0,10) на каждой странице сайта. Высоту меняла подмена
       веб-шрифтов (display=swap): системный шрифт в баннере убирает
       перерисовку, `contain` не даёт содержимому влиять на соседей. */
    #wh-cookie-banner {
      position:fixed; bottom:0; inset-inline-start:0; inset-inline-end:0;
      background:var(--paper); border-top:2px solid var(--ink); z-index:200;
      padding:18px 0; box-shadow:0 -4px 24px rgba(0,0,0,.08);
      font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
      contain:layout paint;
    }
    .wh-cookie-inner { max-width:900px; margin:0 auto; padding:0 24px; }
    .wh-cookie-title { font-family:inherit; font-size:14px; font-weight:800;
      letter-spacing:-.01em; margin-bottom:6px; }
    .wh-cookie-text { color:var(--muted); font-size:13px; margin-bottom:14px; line-height:1.5; }
    .wh-cookie-manage { margin-bottom:14px; border-top:1px solid var(--line-soft); padding-top:12px; }
    .wh-cookie-row { display:flex; justify-content:space-between; align-items:flex-start;
      gap:16px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
    .wh-cookie-row:last-child { border-bottom:none; }
    .wh-cookie-row-label b { display:block; font-size:13px; font-weight:700; margin-bottom:2px; }
    .wh-cookie-row-label span { font-size:12px; color:var(--muted); line-height:1.5; }
    .wh-cookie-toggle { position:relative; width:40px; height:22px; flex-shrink:0; margin-top:2px; }
    .wh-cookie-toggle input { opacity:0; width:0; height:0; position:absolute; }
    .wh-cookie-toggle .slider {
      position:absolute; inset:0; background:var(--line-soft); border-radius:11px;
      cursor:pointer; transition:background .2s;
    }
    .wh-cookie-toggle input:checked + .slider { background:var(--ink); }
    .wh-cookie-toggle input:disabled + .slider { cursor:not-allowed; opacity:.5; }
    /* В тёмной теме --ink становится кремовым, а бегунок задан жёстким #fff —
       включённый тумблер сливался в невнятное светлое пятно. Жёлтый читается
       на обоих фонах, бегунок на нём — тёмный. */
    [data-theme="dark"] .wh-cookie-toggle input:checked + .slider { background:var(--y); }
    [data-theme="dark"] .wh-cookie-toggle input:checked + .slider::after { background:var(--y-ink); }
    .wh-cookie-toggle .slider::after {
      content:""; position:absolute; top:3px; inset-inline-start:3px;
      width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .2s;
    }
    .wh-cookie-toggle input:checked + .slider::after { transform:translateX(18px); }
    .wh-cookie-btns { display:flex; gap:10px; flex-wrap:wrap; }
    @media (max-width:600px) {
      .wh-cookie-btns { flex-direction:column; }
      .wh-cookie-btns .btn { width:100%; justify-content:center; }
    }

    /* ── Просьба о голосе на Product Hunt ── */
    /* Слой 150: выше всей страницы, но НИЖЕ cookie-баннера (200). Перекрывать
       запрос согласия нельзя — это его единственная точка показа, поэтому
       карточка и вовсе не появляется, пока решение по cookies не принято
       (см. скрипт: баннер занимает низ экрана целиком, карточка под ним была бы
       не видна, а над ним — прятала бы согласие). */
    #wh-ph {
      position:fixed; z-index:150; bottom:20px; inset-inline-end:20px;
      width:296px; max-width:calc(100vw - 32px);
      background:var(--paper); border:2px solid var(--ink); border-radius:var(--r-lg);
      box-shadow:var(--shadow-hard); padding:15px 16px 13px; display:none;
    }
    #wh-ph[data-open="1"] { display:block; animation:wh-ph-in 260ms var(--ease) both; }
    @keyframes wh-ph-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
    @media (prefers-reduced-motion: reduce) { #wh-ph[data-open="1"] { animation:none; } }
    .wh-ph-title { font-family:"Unbounded","Unbounded Fallback",sans-serif; font-size:13.5px; font-weight:800;
      letter-spacing:-.01em; line-height:1.3; margin:0 0 6px; padding-inline-end:26px; }
    .wh-ph-text { font-size:12.5px; line-height:1.5; color:var(--muted); margin:0 0 12px; }
    /* flex, а не блок: значок у Product Hunt фиксированной ширины (250), а
       карточка на узком экране тянется во всю ширину — прижатый к краю значок
       оставлял справа пустую четверть. Заодно снимается полоска базовой линии
       под инлайновой картинкой. */
    .wh-ph-badge { display:flex; justify-content:center; }
    .wh-ph-badge img { width:100%; max-width:250px; height:auto; }
    .wh-ph-x {
      position:absolute; top:9px; inset-inline-end:9px; width:26px; height:26px;
      display:inline-flex; align-items:center; justify-content:center;
      padding:0; border:none; border-radius:var(--r-sm); background:transparent;
      color:var(--faint); font-family:inherit; font-size:14px; line-height:1; cursor:pointer;
      transition:background 140ms var(--ease), color 140ms var(--ease);
    }
    .wh-ph-x:hover { background:var(--raised); color:var(--ink); }
    .wh-ph-x:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
    @media (max-width:420px) {
      /* На узком экране карточка тянется от края до края: 296px при 320px ширины
         оставляли по 12px полям и выглядели случайной обрезкой. */
      #wh-ph { inset-inline:16px; width:auto; bottom:16px; }
    }
    @media (max-width:360px) {
      /* Очень узкие экраны: лого-знак как иконка-домой, чтобы шапка не переполнялась. */
      .logo-text { display:none; }
    }