/* Инна Пишет — сайт innapishet.ru. Бренд «Акварель»: design/BRAND.md, токены — design/tokens.css.
   Правила: белый фон, кнопки-чернила, единственный цветной акцент — акварельный градиент,
   сплошной тон акцента — синий #3466d6. Никаких внешних зависимостей: шрифт локальный. */

/* ── Шрифт (забандленный Inter, OFL-1.1) ─────────────────────────────────── */
@font-face{font-family:Inter;src:url(fonts/Inter-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/Inter-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/Inter-SemiBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/Inter-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ── Токены ──────────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;
  --bg:#ffffff; --surf:#fafafa; --surf2:#f2f2f2; --line:#e4e4e4;
  /* --dim — вторичный текст. Держим его почти чёрным (#333, контраст 12.6:1 на белом),
     а не серым: прежний #737373 давал 4.7:1 — формально AA, но на длинных абзацах
     читается тускло. Иерархию задаём кеглем и весом, а не выцветанием текста. */
  --fg:#171717; --dim:#333333;
  --accent:#3466d6; --accent-2:#5a86ee;
  /* Надзаголовки секций — фирменный перивинкл приложения, а не служебный синий ссылок.
     Взят затемнённый тон кнопки (--btn #8b7be2 даёт на белом всего 3.5:1 — а надзаголовок
     идёт капслоком в --fs-base, это обычный текст по меркам WCAG, послаблений нет);
     #6a4fd0 — те же «чернила», но 5.8:1. */
  --eyebrow:#6a4fd0;
  --grad:linear-gradient(135deg,#f45bc2,#9a6cf7 48%,#46b0f5);
  /* Главная кнопка — сиреневый перивинкл приложения (--z-accent-fill в recorder/src/tokens.css),
     тот же тон, что у «Начать запись». Держит сайт и приложение одним продуктом. */
  --btn:#8b7be2; --btn-2:#7a68d8; --btn-fg:#ffffff;
  --btn-shadow:rgba(122,104,216,.5);
  --wave:#e2e2e2;
  --success:#2f9e63; --danger:#cf5b50; --warn:#b5732e;
  --radius:12px; --radius-lg:18px;
  --shadow:0 24px 60px -22px rgba(23,23,23,.26), 0 8px 24px -14px rgba(23,23,23,.18);
  --shadow-sm:0 12px 30px -18px rgba(23,23,23,.28);
  --maxw:1140px;
  /* ── Шкала отступов ───────────────────────────────────────────────────────
     Шесть ступеней с шагом ~1,5× — устроена как шкала кеглей ниже и заведена по той же
     причине: до 2026-08-20 в margin/padding/gap стояло 41 разное число, и одна и та же
     роль набиралась то 34, то 36, то 40 px. Иерархии разница в 2–6 px не даёт (глаз её
     не читает), а неряшливость даёт.
     Шкала отвечает за РИТМ: отбивки между блоками, поля контейнеров, зазоры сеток.
     Внутренние размеры контролов ей не подчиняются — у кнопки, капсулы, чипа и поля
     ввода паддинг подбирается под кегль и высоту самого контрола, а не под ритм страницы.
     Отсюда правило чтения файла: сырое число в margin/padding/gap — это либо контрол, либо
     оптический нюдж (сдвиг иконки, минусовое поле бургера, зебра .files вплотную). Третьего
     не осталось, и заводить не надо: если тянет поставить 30 px — нужна ступень шкалы.
     Две верхние ступени резиновые. Раньше половина крупных отбивок была на clamp, а
     половина фиксированной, и на узком экране фиксированные 40 px почти догоняли отступ
     секции — границы секций размывались.
     Мимо шкалы идут три клампа, задающие вертикаль страницы: они крупнее верхней ступени
     и каждый работает ровно в одном месте — секция, первый экран (.hero), док-страница. */
  --sp-1:6px;                        /* метка → текст внутри карточки */
  --sp-2:10px;                       /* строки списка, зазор капсул, мелкая отбивка */
  --sp-3:16px;                       /* абзац → абзац, заголовок → текст, мелкие сетки */
  --sp-4:24px;                       /* поля карточек, зазор крупных сеток */
  --sp-5:clamp(26px,3.2vw,36px);     /* заголовок секции → контент, блок → блок */
  --sp-6:clamp(36px,4.6vw,56px);     /* крупные разрывы: герой → снимок, верх подвала */
  --sp-section:clamp(56px,7vw,92px); /* вертикальные поля секции */
  /* ── Шкала кеглей ─────────────────────────────────────────────────────────
     Шесть ступеней на весь сайт (макеты design/site/variants/ подключают этот же файл —
     они обязаны жить по той же шкале). До 2026-08-19 тут было двадцать размеров, восемь
     из них в диапазоне 13–16,5 px с шагом в полпункта: 14 против 14,5 и 15 против 15,5
     глазом не различаются — иерархии такой шаг не даёт, а разнобой создаёт.
     Заводя новый кегль, сначала убедитесь, что ни одна ступень не подходит: почти
     всегда подходит. Исключение ровно одно — заголовки (h1, h2, .doc h1):
     они резиновые (clamp), потому что кегль в 40+ px обязан зависеть от ширины окна. */
  --fs-micro:12px;  /* капслок-метки: колонки подвала, «не подходит», название тарифа */
  --fs-fine:13px;   /* сноски и служебный низ: автопродление, требования, копирайт, код */
  --fs-sm:16px;     /* вторичный текст: описания плашек, пункты списков, подвал */
  --fs-base:17px;   /* основной: body, кнопки, надзаголовки, заголовки плашек, капсулы */
  --fs-lg:19px;     /* подзаголовки карточек, марка в шапке, верх подзаголовка героя */
  --fs-xl:25px;     /* верхняя ступень: врезки-вопросы, цифры шагов, цена, h2 док-страниц */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--fg);line-height:1.55;
  font-size:var(--fs-base);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-4)}
.narrow{max-width:760px}
section{padding:var(--sp-section) 0}
h1,h2,h3{line-height:1.14;letter-spacing:-.02em;font-weight:600}
h1{font-size:clamp(32px,5.2vw,52px);letter-spacing:-.03em}
h2{font-size:clamp(26px,3.6vw,38px);margin-bottom:var(--sp-3)}
h3{font-size:var(--fs-lg);letter-spacing:-.01em}
p{overflow-wrap:break-word}
.lead{color:var(--dim);font-size:var(--fs-base);max-width:64ch}
.lead+.lead{margin-top:var(--sp-3)}
/* Пояснение к абзацу: приглушённый тон. Единственное место, где текст сознательно
   светлее основного (#6b6b6b — 5.6:1, читается), потому что это ремарка, а не утверждение.
   Курсива тут НЕ ставить: италик Inter в бандл не входит (все четыре @font-face — normal),
   и браузер рисовал бы фальшивый — наклонённый машиной прямой шрифт.
   Прижато к абзацу, к которому относится: отступ сверху меньше межабзацного, плюс сдвиг
   вправо и стрелка-колено «вниз-вправо» — ремарка читается как ветка от абзаца выше, а не
   как следующее самостоятельное утверждение.
   Стрелка — SVG в data-URI, а НЕ символ «↳» (U+21B3): забандленный сабсет Inter несёт из
   стрелок только U+2190–2193 (ranges в design/explorations/mkwoff2.py), и глиф уехал бы в
   системный фолбэк — чужие метрики и вес рядом с текстом Inter. Цвет запечён в саму
   картинку, поэтому менять его надо в ДВУХ местах: в color правила и внутри data-URI. */
.lead.quiet{color:#6b6b6b;font-size:var(--fs-base);
            position:relative;padding-left:27px}
.lead.quiet::before{content:"";position:absolute;left:3px;top:.3em;width:12px;height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 13' fill='none' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 1.5v4.8a2 2 0 0 0 2 2h4.6'/%3E%3Cpath d='M6.9 6.2 9.4 8.4 6.9 10.6'/%3E%3C/svg%3E") no-repeat center/contain}
.lead+.lead.quiet{margin-top:var(--sp-1)}
.eyebrow{font-size:var(--fs-base);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
         color:var(--eyebrow);margin-bottom:var(--sp-3)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tnum{font-variant-numeric:tabular-nums}
.ph{ /* плейсхолдер {{…}} — виден глазом, чтобы не уехал в прод незамеченным */
  background:#fff4e0;border-bottom:1px dashed #d8a44a;color:#8a5a12;
  padding:0 3px;border-radius:3px;font-weight:500;white-space:nowrap}

/* ── Кнопки ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--btn);color:var(--btn-fg);
  font:inherit;font-size:var(--fs-base);font-weight:600;
  padding:14px 26px;border-radius:11px;border:0;cursor:pointer;text-decoration:none;
  box-shadow:0 6px 18px -9px var(--btn-shadow);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.btn:hover{background:var(--btn-2);color:var(--btn-fg);transform:translateY(-1px);
           box-shadow:0 12px 26px -10px var(--btn-shadow)}
.btn svg{width:17px;height:17px;flex:0 0 17px}
/* Спрайт <symbol> в начале документа. Иконки платформ (яблоко + окна) в кнопках «Скачать»
   сняты 2026-08-19 вместе со стилями .btn-os / .ico-mac / .ico-win — символы и правила
   в истории git. Кнопка везде осталась одним словом. */
.sprite{display:none}
.btn-quiet{background:var(--surf2);color:var(--fg);box-shadow:none}
.btn-quiet:hover{background:var(--line);color:var(--fg)}
.micro{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--dim)}
.micro b{color:var(--fg);font-weight:600}

/* ── Плашка «сервис в разработке» ────────────────────────────────────────── */
/* Полоса над шапкой на время до запуска (index.html, секция 0a). Только на главной:
   остальные страницы сайта пока не публикуются вовсе.
   Розовая — это НЕ нарушение правила «красок не добавляем», которое стоит у сетки платформ
   ниже: там запрет на зелёный и янтарный, то есть на цвета-светофор, чужие бренду. Здесь
   взят левый край «Акварели» (#f45bc2, тот же тон, что у слова «Пишет» в марке), поэтому
   полоса читается как бренд, а не как системное предупреждение.
   Три числа держим сырыми, а не токенами: полоса временная и уедет целиком в день, когда
   в «Скачать» появится первая живая ссылка, — токен в :root её пережил бы.
   · фон #fce8f4 — тот же розовый, разбавленный до фоновой светлоты;
   · текст #b52472 — он же, затемнённый до 5.2:1 на этом фоне. Сам #f45bc2 даёт 2.5:1 и для
     текста непригоден — ровно та же history, что у --eyebrow (см. :root);
   · линия #f7cfe6 вместо --line, иначе серая граница обесцвечивает полосу снизу.
   Заливку держим бледной намеренно: строкой ниже стоит H1 с градиентом во всю ширину, и
   насыщенная плашка спорила бы с ним за первый экран (BRAND.md: «градиент точечно»). */
.topbar{background:#fce8f4;border-bottom:1px solid #f7cfe6;font-size:var(--fs-sm)}
.topbar-in{padding:9px var(--sp-4);color:#b52472;font-weight:500;text-align:center}

/* ── Навбар ──────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);
     backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:var(--sp-4);height:64px}
/* Марка = иконка приложения (портрет маскота) + написание «Инна Пишет», Inter 600,
   «Пишет» акварельным градиентом — как в онбординге приложения и в design/BRAND.md. */
.logo{display:flex;align-items:center;gap:var(--sp-2);
      font-size:var(--fs-lg);font-weight:600;letter-spacing:-.02em;white-space:nowrap;color:var(--fg)}
/* Иконка приложения как есть (recorder/src-tauri/icons/128x128@2x.png): скругление и поля
   macOS уже впечатаны в PNG — своего border-radius и тени не добавляем, иначе тень ляжет
   прямоугольником по прозрачным полям. Кегль чуть больше текстового, чтобы поля скомпенсировать. */
.logo-mark{width:34px;height:34px;flex:0 0 34px;display:block}
a.logo:hover{color:var(--fg)}
.nav-links{display:flex;gap:var(--sp-4);margin-left:auto}
.nav-links a{color:var(--dim);font-size:var(--fs-sm);font-weight:500;transition:color .12s}
.nav-links a:hover{color:var(--fg)}
.nav .btn{padding:9px 18px;font-size:var(--fs-sm);margin-left:auto;white-space:nowrap}
/* Два селектора на одно правило: на главной кнопка стоит после .menu-panel (обёртки ссылок),
   на остальных страницах — сразу после .nav-links. */
.nav-links+.btn,.menu-panel+.btn{margin-left:2px}
/* «Войти» — вторая кнопка шапки, между ссылками и «Скачать». Правило гасит margin-left:auto,
   который она получает от .nav .btn: два auto в одной строке ДЕЛЯТ свободное место пополам,
   и вместо плотной группы «ссылки · Войти · Скачать» вышло бы три островка враздрай. Прижать
   всё вправо и так есть чему — .nav-links{margin-left:auto} выше. */
.nav .nav-signin{margin-left:2px}
/* Ссылки меню лежат в контейнере (index.html), которого на широком экране как бы нет:
   display:contents убирает его коробку, и .nav-links становится прямым ребёнком .nav-inner —
   все правила выше работают как раньше. Бургер с крышкой включаются на ≤960. */
.menu-panel{display:contents}
.burger,.menu-scrim{display:none}

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* Композиция: узкая колонка текста по центру + окно продукта во всю ширину под ней.
   Продукт крупно — главное правило первого экрана (референсы: Obsidian, Granola, Things). */
.hero{padding:clamp(40px,5.5vw,64px) 0 clamp(48px,6vw,76px)}
/* Текст флагом влево — по левому краю окна продукта, что стоит ниже. */
.hero-head{text-align:left}
.hero h1{margin-bottom:var(--sp-4);max-width:30ch}
/* Ровно ОДНА фраза под заголовком. Доводы живут секциями ниже: на первом экране они
   отжимали окно продукта под фолд, а окно — главное, что тут должно быть видно. */
.hero-sub{color:var(--dim);font-size:clamp(var(--fs-base),1.7vw,var(--fs-lg));line-height:1.5;max-width:56ch}
.hero-cta{margin-top:var(--sp-5);display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}

/* Плашки-подсказки на словах героя (.hint/.pop + линейные иконки .ico-line) сняты
   2026-08-12 вместе с последней из них — на слове «конфиденциально» в H1. Оговорку про
   сеть несёт панель довода 1 (#network). Тексты плашек, разметку и стили, если понадобятся
   снова, брать из истории git. */

/* ── Окно приложения на первом экране ────────────────────────────────────── */
.shot-stage{position:relative;margin-top:var(--sp-6)}
/* акварельная подсветка под окном — единственный цветной акцент экрана, еле заметный */
.shot-glow{position:absolute;left:1%;right:1%;top:16%;bottom:-7%;background:var(--grad);
           filter:blur(76px);opacity:.22;border-radius:999px;pointer-events:none}
/* Рамка окна (заголовок, кружки, скругления) — ВНУТРИ снимка, поэтому своих border/radius/фона
   тут нет: они бы обвели картинку второй раз. Тень даём filter'ом, а не box-shadow: drop-shadow
   идёт по альфе, то есть повторяет скруглённые углы окна, тогда как box-shadow обвёл бы прямоугольник.
   Спреда у drop-shadow нет, поэтому не var(--shadow), а её пересчитанный на два слоя эквивалент. */
.shot{position:relative;
      filter:drop-shadow(0 18px 34px rgba(23,23,23,.22)) drop-shadow(0 4px 10px rgba(23,23,23,.12))}
.shot-img{display:block;width:100%;height:auto}
/* Снимок — ссылка в оверлей, поэтому курсор-лупа: без неё кликабельность картинки
   ничем не заявлена. Подчёркивания и цвета ссылки тут быть не должно — внутри только <img>. */
.shot{display:block;cursor:zoom-in}

/* ── Оверлей увеличенного снимка (:target, без JS) ───────────────────────── */
/* Показывается, когда в адресе #shot-full, — механика чистого CSS: скриптов на сайте нет.
   Оверлей СКРОЛЛИТСЯ (display:block + overflow:auto), а картинка НЕ ужимается по высоте
   экрана. Так и задумано: кадр почти квадратный (2240×2112), и «вписать целиком» на
   ноутбучном экране означало бы показать его УЖЕ, чем он и так лежит на странице,
   то есть клик уменьшал бы картинку вместо увеличения. */
.lightbox{display:none;position:fixed;inset:0;z-index:80;overflow:auto;
          padding:clamp(14px,3vw,44px) clamp(8px,2vw,28px)}
.lightbox:target{display:block}
.lightbox-bg{position:fixed;inset:0;background:rgba(23,23,23,.84)}
.lightbox img{position:relative;display:block;margin:0 auto;width:min(1600px,96vw);
              max-width:none;height:auto;border-radius:12px}
/* Крестик фиксирован, а не прижат к картинке: она длиннее экрана и уезжает при прокрутке,
   а выход должен оставаться на месте. */
/* Крестик залит фирменным розовым, а не полупрозрачным белым, как был сделан сначала:
   снимок приложения светлый и занимает почти всё поле, так что белый на белом пропадал
   ровно там, где кнопка и нужна. Розовый — единственный цвет, которого в самом снимке нет. */
.lightbox-x{position:fixed;top:16px;right:20px;z-index:1;width:46px;height:46px;
            display:flex;align-items:center;justify-content:center;
            font-size:var(--fs-xl);line-height:1;color:#fff;text-decoration:none;
            background:#f45bc2;border-radius:999px;
            box-shadow:0 6px 20px -6px rgba(23,23,23,.55)}
.lightbox-x:hover{background:#e0359f}

/* ── Осталось от мокапа окна приложения ──────────────────────────────────── */
/* Сам мокап (.mock, .ava, .bubble, .line, .said и прочее) снят 2026-08-20 — правила
   в истории git. На первом экране давно стоит настоящий снимок (.shot), а на страницах
   сайта мокапа не было вовсе. Уцелел один класс: .who нужен макету
   design/site/variants/ai-section-rethink.html, который подключает этот же файл. */
.who{font-size:var(--fs-fine);font-weight:600}

/* ── Сетки карточек ──────────────────────────────────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-5)}
.grid3.tight{margin-top:var(--sp-4);gap:var(--sp-3)}   /* подпись под мокапом, а не самостоятельный блок */
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4)}
.card h3{margin-bottom:var(--sp-1)}
.card p{color:var(--dim);font-size:var(--fs-sm)}
/* Градиентная чёрточка стоит ПОД заголовком карточки и работает разделителем «заголовок /
   текст»: над заголовком она читалась отдельной висящей закорючкой, особенно когда заголовок
   занимает две строки. Правило одно на все карточки страницы — иначе они разъезжаются. */
.bar{width:32px;height:3px;border-radius:2px;background:var(--grad);margin:var(--sp-2) 0}
.alt{background:var(--surf)}   /* чередование фона секций */

/* ── Довод = секция: текст и доказательство рядом ────────────────────────── */
/* Одна секция — одна мысль (design/site/references.md, правило 3). Слева утверждение и
   его расшифровка, справа то, чем оно подтверждается; .feat-rev меняет их местами,
   чтобы соседние секции не выглядели одним длинным столбцом. */
.feat{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
      gap:var(--sp-6);align-items:start}
/* Панель-доказательство начинается не от верха колонки, а от строки H2: надзаголовок
   («ПРИВАТНОСТЬ») остаётся один над секцией, и глаз ловит общую горизонталь заголовков.
   Отступ = строка надзаголовка (14.5 px × 1.55) + его margin-bottom. */
.feat-vis{margin-top:calc(var(--fs-base) * 1.55 + var(--sp-3))}
/* Заголовок, вынесенный из колонок во всю ширину секции (сейчас — «Приватность»). */
.feat-head{margin-bottom:var(--sp-5)}
.feat-rev .feat-text{order:2}
.feat-list{list-style:none;margin-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);
           color:var(--dim);font-size:var(--fs-sm)}
.feat-list b{color:var(--fg);font-weight:600}
/* Единственное место списка с настоящими маркерами — вложенная пара цифр памяти (цель
   и факт). Они читаются как одно утверждение с двумя значениями, а не как два независимых
   довода, поэтому и вложены; у самих доводов маркеров нет, их роль играет отбивка. */
.feat-sub{list-style:disc;margin:var(--sp-2) 0 0 21px}
.feat-sub li+li{margin-top:var(--sp-1)}

/* ── Витрина «Возможности» ───────────────────────────────────────────────── */
/* Десять плашек перед доводами: состав продукта одним взглядом. Плашка — иконка,
   заголовок и одна строка; доказательств тут нет намеренно, они ниже, в доводах.
   Раскладка: десять обычных плашек плюс одиннадцатая (.wide, про ИИ) шириной в две.
   Ширину она держит ради текста, которого у неё втрое больше, чем у соседок.

   Колонок в сетке ШЕСТЬ, а не три: обычная плашка занимает две (span 2), широкая — четыре
   (span 4). Ширины совпадают точно, а не примерно: две плашки с зазором между ними — это
   2×(2 колонки + gap) + gap = 4 колонки + 3 gap, ровно столько же занимает span 4.
   До 2026-08-19 широкая была центрирована (grid-column:2/6, по половине плашки полем слева
   и справа) — центрирование снято вместе с добавлением плашки «Поддерживает импорт»:
   с одиннадцатой плашкой ряды сходятся без остатка, и широкая просто заканчивает последний.

   ⚠️ Число колонок обязано оставаться ЧЁТНЫМ на всех ширинах: .f-card живёт через span 2,
   и при нечётной сетке grid дорисует неявную колонку, развалив ряды. Отсюда 6 → 4 → 2
   в медиазапросах ниже, а не 3 → 2 → 1.
   ⚠️ Число плашек и ширина .wide связаны жёстко, и за август это уже четырежды всплывало.
   Считать так: слотов = обычные плашки + 2 за широкую. Ровные ряды по три выходят, когда
   сумма кратна трём. Сейчас 10 + 2 = 12 → четыре полных ряда, широкая замыкает последний
   рядом с десятой плашкой. Добавишь или уберёшь плашку — появится дырка.
   Абзац .wide по ширине не ограничен: в две плашки это ~720 px, около 90 знаков в строке —
   на пределе, но абзац здесь в три строки, и обрезка дала бы дырку справа. */
.feat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-3)}
.f-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
        padding:var(--sp-4);grid-column:span 2}
.f-card.wide{grid-column:span 4}
.f-ico{display:block;width:24px;height:24px;margin-bottom:var(--sp-3);color:var(--accent);
       fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.f-h{font-size:var(--fs-base);font-weight:600;letter-spacing:-.01em}
/* Заголовки плашек и карточек размечены как <h3> (2026-08-27) — ради СТРУКТУРЫ документа:
   по ней поисковик понимает, о чём секция, а до этого весь конкретный текст лендинга лежал
   в безымянных <div>. На вид это влиять не должно: кегль и трекинг у каждого свои, а
   межстрочный обязан остаться абзацным — правило h1,h2,h3 выше ставит 1.14, и от него
   однострочные подписи («БЕСПЛАТНО», «Совместимо с») подпрыгивают в своих коробках. */
.f-h,.sub-h,.logos-h,.plan .name,.eyebrow{line-height:inherit}
.f-p{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--dim);line-height:1.6}

/* ── Два подблока в одной секции («Совместимость») ───────────────────────── */
/* Исключение из правила «секция = один довод»: софт и железо — два ответа на ОДИН вопрос
   читателя («а у меня это заработает?»), поэтому стоят рядом равными карточками под общим
   заголовком. Панели-доказательства сюда не ставим: секция и так читается целиком. */
/* align-items по умолчанию (stretch): карточки держат одну высоту, даже когда текста в них
   разное количество — иначе правая заканчивается выше и пара читается как недоделанная. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.duo-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
          padding:var(--sp-4)}
.duo-card .bar{margin:var(--sp-2) 0 var(--sp-1)}
.duo-card .feat-list{margin-top:var(--sp-3)}
.sub-h{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em}
/* В «Совместимости» подзаголовки карточек набраны в размер заголовков плашек #network
   (16px): обе секции — про то, что приложение делает и чего не делает, и разный кегль
   у одинаковых по роли строк читался как разный уровень важности. */
#compatibility .sub-h{font-size:var(--fs-base)}
/* ── Заметка-плашка (.note) ──────────────────────────────────────────────── */
/* Одна строка со значком, шире которой она не бывает: «риал-тайм можно выключить»
   в «Совместимости» и «данные уходят в облако только вашими руками» в «Саммари и ИИ».
   Роль у обеих одинаковая — сказать про НАСТРОЙКУ, которая снимает опасение, но не тянет
   на отдельный довод секции. Раньше компонент звался .eco-note и жил в одном месте;
   со второй заметкой имя перестало быть правдой (про экономию заряда там только первая).
   Ширина по содержимому и margin:auto: на десктопе это одна центрированная строка, на узком
   экране она просто переносится, оставаясь коробкой во всю ширину.
   Заливка голубая, а не серая: заметка должна выделяться из потока белых секций и карточек,
   а голубой — светлый конец фирменного градиента (#46b0f5), то есть краска на странице
   не новая. Тон и рамка — ровно те же, что у .never-box в «Приватности»: обе плашки играют
   одну роль (выделенный блок поверх белой секции), и разная бледная голубизна у них читалась
   как две разные краски. Держать значения согласованными. На этом фоне --dim даёт 11:1,
   а рядом с сиреневыми кнопками и розовыми минусами плашка остаётся тише их обоих. */
.note{display:flex;align-items:center;gap:var(--sp-2);width:fit-content;max-width:100%;
      margin:var(--sp-5) auto 0;padding:var(--sp-2) var(--sp-3);
      background:linear-gradient(180deg,#f8fbff,#eef5ff);border:1px solid #cfe0fa;
      border-radius:var(--radius);
      font-size:var(--fs-sm);color:var(--dim)}
.note b{color:var(--fg);font-weight:600}
/* Значок — синий акцент, а не «эко»-зелёный: сплошной цвет на сайте ровно один (см. шапку
   файла), и зелёный лист стал бы единственной краской, которой больше нигде нет. */
.note-ico{width:24px;height:24px;flex:none;color:var(--accent);fill:none;stroke:currentColor}

/* Полоса приложений во всю ширину секции: плитка = логотип + название. Марки лежат в
   assets/logos/ — у каждой плитки она своя, текстовых плиток без марки не осталось. */
.logos{margin-top:var(--sp-5)}
.logos-h{font-size:var(--fs-sm);font-weight:600;letter-spacing:-.01em;margin-bottom:var(--sp-3)}
.logo-row{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.logo-tile{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:500;
           padding:7px 14px 7px 7px;border-radius:14px;background:#fff;border:1px solid var(--line)}
/* Марки сервисов — КАК ЕСТЬ, в своём виде и цвете: ни перекраски, ни силуэтов
   (маска по альфе превращала непрозрачные фавиконки в чёрные квадраты).
   Высота одна на всех, ширина свободная: квадратный значок займёт 19 px, вордмарк —
   сколько нужно. У вордмарков (.wm) названия рядом нет: логотип и есть это название. */
.svc-img{height:19px;width:auto;max-width:96px;flex:none;object-fit:contain}
.logo-tile.wm{padding:6px 14px}
/* значок у плитки «Встреча в переговорке» — своей размерности у <use> нет */
.logo-tile .ico-tile{width:15px;height:15px;flex:none;margin-left:7px;color:var(--accent);
                     fill:none;stroke:currentColor}
/* «и любое другое» — обычный текст, не приглушённый: плитка закрывает список, а не извиняется
   за него. Открытость перечня показывает пунктирная рамка, а не блёклые буквы. */
.logo-tile.any{background:transparent;border-style:dashed;padding:7px 14px}

/* ── Панель-доказательство (правая колонка довода) ───────────────────────── */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
       padding:var(--sp-4);box-shadow:var(--shadow-sm)}

/* все встречи в одной папке — источник звука в списке не различается */
.files{list-style:none;display:flex;flex-direction:column;gap:2px}
.files li{display:flex;flex-direction:column;gap:2px;padding:var(--sp-2);border-radius:10px}
.files li:nth-child(odd){background:var(--surf)}
.files b{font-size:var(--fs-sm);font-weight:600}
.files span{font-size:var(--fs-fine);color:var(--dim)}

/* ── Протокол крупно ─────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.chip{font-size:var(--fs-micro);font-weight:600;padding:6px 12px;border-radius:20px;
      background:var(--surf2);color:#333}
.cap{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--dim)}

/* ── Секция «Саммари и ИИ» ───────────────────────────────────────────────── */
/* Была единственной тёмной секцией страницы (.dark, снята 2026-08-19 — цветовые подмены
   для чёрного фона в истории git). Сейчас это обычная .alt-секция, поэтому здесь остались
   ТОЛЬКО отступы, которых нет у общих компонентов, и подсветка отвергнутых карточек. */
/* Карточки идут сразу за рубрикой, своего отступа у .duo нет (в «Совместимости» она живёт
   в отдельном .wrap) — задаём его здесь. Отбивку между блоками несёт .part-h. */
#ai .part-h+.duo{margin-top:var(--sp-4)}

/* Отклонённые способы («так мы не сделали») — обычные .duo-card, без своей подсветки.
   Розового в карточке ровно одно место: сами минусы. Всё, что метило её раньше — бледная
   заливка #fdf2f8 с рамкой #f0c2de, полоска .bar, капсула вердикта .verdict и две капсулы
   причин, — снято 2026-08-19 (в истории git). Дробность и пестрила: полдюжины мелких
   розовых объектов в блоке, который рассказывает про то, чего в продукте НЕТ и что громче
   остальной страницы быть не должно. Сравнение десяти подач, включая прежнюю, —
   design/site/variants/ai-cards-layouts.html.

   «Отвергли» больше не сказано ни цветом карточки, ни капсулой: это уже сказано заголовком
   секции («Мы не стали внедрять ИИ — намеренно»), а в карточке — минусами.

   Чернила #c9308f, а не фирменный #f45bc2: на белом фирменный даёт 2,95:1, а это обычный
   текст по меркам WCAG; #c9308f — тот же тон, но 4,9:1.
   Кегль как у заголовка карточки (--fs-lg): минусы и есть довод, они должны читаться
   раньше подписи под ними, а не после неё. */
.duo-card .flaws{margin-top:var(--sp-2);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;
                 color:#c9308f}
.duo-card .flaws+.cap{margin-top:var(--sp-2)}

/* ── Два способа отдать протокол своей модели ────────────────────────────── */
/* Пришли на смену трём шагам «протокол → ваш ИИ → результат» (сняты 2026-08-19, разметка
   в истории git). Шаги врали формой: нумерованная последовательность обещает, что за первым
   пунктом идёт второй, — а буфер и папка не этапы, а два способа на выбор, из которых берут
   один. Третий шаг «Результат» и вовсе пересказывал, что умеет чужая модель: не наша работа
   и не наше обещание.
   Своего компонента у пары нет: это обычные .duo/.duo-card, как у отвергнутых способов
   выше, — и зеркало намеренное, секция читается как «почему не встроили» против «как
   отдаёте своей». Единственная добавка — метка-режим над заголовком карточки. */
/* Метка режима («Одна встреча» / «Все встречи») — она и есть ответ на вопрос, зачем способа
   два: отличаются они не кнопкой, а охватом. Серый капслок, а не цветная капсула: цветное
   место в секции ровно одно — минусы отвергнутых карточек. */
.card-k{font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
        color:#8a8a8a}
.card-k+.sub-h{margin-top:var(--sp-1)}

/* Сетевые обращения — четыре равные карточки в две колонки, а не панель сбоку: довод
   читается сверху вниз одной колонкой текста, и ни один из четырёх поводов не выглядит
   важнее прочих. Карточки белые: фон секции (.alt) совпадает с их обычной заливкой. */
/* ── Рубрика: заголовок ПОЛОВИНЫ секции (.part-h) ────────────────────────── */
/* Кегль между H2 секции и текстом: на 18 px такие строки читались как обычный абзац, хотя
   это заголовки половин довода, а в размер H2 спорили бы с заголовком секции.
   Работает в двух местах, и это одна и та же роль: «Никогда никуда не отправляет:» /
   «Выходит в сеть, только чтобы:» в «Приватности» и «Мы не стали внедрять ИИ» / «Но вам
   будет удобно использовать свой» в «Саммари и ИИ». Раньше класс звался .net-h и жил
   только в первой из них; во второй те же строки были H2 — то есть вторыми заголовками
   секции, чего на странице не бывает больше нигде. Переименован 2026-08-19. */
.part-h{margin-top:var(--sp-5);font-size:clamp(var(--fs-lg),2.4vw,var(--fs-xl));font-weight:600;
        letter-spacing:-.015em;line-height:1.25}
/* Своей отбивки после H2 у первой рубрики НЕТ намеренно: тот же margin-top работает и здесь,
   и в «Приватности» (там H2 и рубрика лежат в разных .wrap, но margin-bottom заголовка меньше
   и схлопывается) — зазор под заголовком секции выходит одинаковым. Раньше тут стоял
   #ai h2+.part-h{margin-top:18px}, и «Саммари и ИИ» начиналась заметно плотнее «Приватности». */
.net-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
          gap:var(--sp-4);margin-top:var(--sp-3)}
.net-grid .card{background:#fff}
.net-grid b{display:block;font-size:var(--fs-base);font-weight:600}
.net-grid p{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--dim)}

/* Обещание довода — единственный блок секции с заливкой: он открывает пару блоков про сеть
   (запрет, затем оговорка «выходит в сеть, только чтобы») и обязан весить больше карточек.
   Перечисление в строку: столбцом оно выглядело бы ещё одним списком-соседом, а строкой
   читается как одна отповедь. */
/* Подложка — синяя, а не сиреневая: синий на сайте означает «всё в порядке» (ссылки,
   акцент), сиреневый — действие и продукт. Здесь блок сообщает хорошую новость. */
.never-box{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);
           border:1px solid #cfe0fa;border-radius:var(--radius-lg);
           background:linear-gradient(180deg,#f8fbff,#eef5ff)}
/* Перечисление — тегами, а не строкой через точку: каждый запрет читается отдельным
   предметом, а не куском длинной фразы, и список легко пополнять. */
.never-run{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.never-run li{display:inline-flex;align-items:center;gap:var(--sp-2);
              font-size:var(--fs-base);font-weight:500;color:var(--fg);background:#fff;
              border:1px solid #cfe0fa;border-radius:999px;padding:7px 15px 7px 13px}
.ico-lock{width:15px;height:15px;flex:none;color:var(--accent)}

/* Вставка внутри довода: короткая градиентная черта (.bar, та же, что в карточках) и текст
   под ней. */
.sect-note{margin-top:var(--sp-5)}
/* второй такой же черты хватает, чтобы отбить состав от объяснения — без линеек и рамок */
.bar-sep{margin-top:var(--sp-5)}
.sect-note b{display:block;font-size:var(--fs-base);font-weight:600}
.sect-note p{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--dim)}
/* Пункты столбцом: их два и оба длинные — в строку они слились бы в одну фразу через точки. */
.sect-note ul{list-style:none;display:flex;flex-direction:column;gap:var(--sp-1);margin-top:var(--sp-2)}
.sect-note li{position:relative;padding-left:var(--sp-3);font-size:var(--fs-sm);color:var(--dim)}
.sect-note li::before{content:"";position:absolute;left:0;top:.6em;
                      width:5px;height:5px;border-radius:50%;background:var(--btn)}

/* ── Кнопка «Наверх» ─────────────────────────────────────────────────────── */
/* Скриптов на сайте нет, поэтому это обычная ссылка на #top: прокрутку сглаживает
   html{scroll-behavior:smooth}. Приглушена, пока на неё не навели, — не должна спорить
   с содержимым страницы. */
.to-top{position:fixed;right:clamp(14px,2vw,26px);z-index:70;
        /* --cookie-h выставляет consent.js на время показа полосы согласия: она стоит
           в том же нижнем углу и иначе накрыла бы кнопку. */
        bottom:calc(clamp(14px,2vw,26px) + var(--cookie-h,0px));
        width:44px;height:44px;border-radius:999px;display:inline-flex;
        align-items:center;justify-content:center;
        background:#fff;border:1px solid var(--line);color:var(--dim);
        box-shadow:var(--shadow-sm);opacity:.72;
        transition:opacity .15s,color .15s,border-color .15s,transform .15s}
.to-top:hover{opacity:1;color:var(--fg);border-color:var(--dim);transform:translateY(-1px)}
.to-top svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
            stroke-linecap:round;stroke-linejoin:round}
/* Проявляется только после ~1.5 экрана прокрутки: на первом экране она пустая трата места.
   Работает там, где есть scroll-timeline (Chrome, Safari 26+); в остальных браузерах
   кнопка просто видна сразу — деградация без потери функции. */
@supports (animation-timeline:scroll()){
  .to-top{animation:to-top-in linear both;animation-timeline:scroll();
          animation-range:120vh 150vh}
  @keyframes to-top-in{from{opacity:0;visibility:hidden;transform:translateY(8px)}
                       to{opacity:.72;visibility:visible;transform:none}}
}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}

/* ── Полоса согласия на веб-аналитику ────────────────────────────────────── */
/* Разметки в страницах нет: полосу и ссылку «Настройки аналитики» рисует
   assets/consent.js — там же расписано, почему именно так.
   Обе кнопки ОДНОГО вида и размера намеренно. Подкрашенное «Принять» рядом с
   тусклым «Отказаться» — dark pattern: согласие перестаёт быть свободным по
   ч. 1 ст. 9 152-ФЗ. Кегль текста — --fs-sm, а не --fs-fine: согласие, набранное
   мелким шрифтом, ровно то, что регулятор и называет неинформированным. */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:75;
            background:var(--bg);border-top:1px solid var(--line);
            box-shadow:0 -14px 34px -22px rgba(23,23,23,.3);
            padding:var(--sp-3) 0}
.cookie-bar[hidden]{display:none}
.cookie-inner{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.cookie-text{margin:0;flex:1 1 420px;max-width:78ch;
             font-size:var(--fs-sm);line-height:1.55;color:var(--dim)}
.cookie-actions{display:flex;gap:var(--sp-2);flex:0 0 auto;margin-left:auto}
.cookie-actions .btn{padding:10px 22px;font-size:var(--fs-sm)}
@media (max-width:640px){
  .cookie-actions{width:100%;margin-left:0}
  .cookie-actions .btn{flex:1;justify-content:center}
}

/* ── Таблицы (только документные страницы: телеметрия, юр-тексты) ────────── */
.table-scroll{margin-top:var(--sp-5);border:1px solid var(--line);border-radius:var(--radius);
              overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:var(--sp-3) var(--sp-4);text-align:left;font-size:var(--fs-sm)}
thead th{background:var(--surf);font-weight:600;border-bottom:1px solid var(--line);vertical-align:bottom}
thead th:not(:first-child){text-align:center;width:190px}
tbody td:not(:first-child){text-align:center}
tbody tr+tr td{border-top:1px solid var(--line)}

/* ── Тарифы ──────────────────────────────────────────────────────────────── */
/* Две карточки в ряд (было три — тариф на три компьютера снят 2026-08-27), над ними —
   общая плашка «в любом тарифе» (почему список общий, а не по списку в каждой карточке —
   в комментарии к секции в index.html).
   Колонки заданы явно (2 → 1 на ≤760), а не через auto-fit: тот на промежуточных
   ширинах давал ряд из двух и одинокую карточку под ним, а тарифы читаются только
   рядом друг с другом. Вернёте третий тариф — тут repeat(3,...).
   Карточка — flex-колонка с кнопкой на margin-top:auto: списки у тарифов разной длины,
   но кнопки обязаны стоять на одной горизонтали. */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-4)}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--sp-4);
      display:flex;flex-direction:column}
/* Платный тариф выделен рамкой и тенью — тот же приём, что .plat.now у выпущенной
   платформы. Заливкой не помечаем: фон был бы вторым голосом о том же. */
.plan.pro{border-color:#c9d6f5;box-shadow:var(--shadow-sm)}
.plan .name{font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
/* Цифры табличные: три цены стоят в ряд на одной горизонтали и обязаны выглядеть
   набранными в одну колонку, а не «плавать» по ширине знаков. */
.plan .price{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.02em;
             font-variant-numeric:tabular-nums;margin:var(--sp-2) 0 0}
.plan .price small{font-size:var(--fs-sm);font-weight:500;color:var(--dim);letter-spacing:0}
/* Строка под ценой — за что именно платят. С 2026-08-27 в index.html её нет (текст был
   «Один компьютер»), правило держат макеты design/site/variants/ — вернётся вместе со
   строкой про число компьютеров. */
.plan-for{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--dim)}
/* Черта над списком делит карточку на две части: сверху — сколько это стоит и за что
   (цена и .plan-for), снизу — что в тариф входит. */
.plan ul{list-style:none;margin:var(--sp-3) 0 var(--sp-4);padding-top:var(--sp-3);
         border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--sp-2)}
/* Маркера у пунктов нет: строк две-три, и точка перед каждой в узкой колонке читалась бы
   как второй столбик значков рядом с галочками плашки над карточками. */
.plan li{font-size:var(--fs-sm);color:var(--dim)}
/* Ключевое отличие тарифа поднимаем из приглушённого цвета тем же приёмом, что и
   акценты в других списках (.feat-list b, .note b): 600 и основной цвет текста. */
.plan li b{font-weight:600;color:var(--fg)}
.plan .btn{margin-top:auto;justify-content:center}

/* Плашка «в любом тарифе» — заголовки плашек витрины «Возможности» в три колонки.
   Фон .surf, а не белый: карточки тарифов идут следом и белым спорили бы с ней за
   передний план — плашка обязана читаться как общее вступление, а не как четвёртый тариф. Галочка одна на строку и синяя, как .f-ico в витрине. */
.plan-all{margin-top:var(--sp-5);background:var(--surf);border:1px solid var(--line);
          border-radius:var(--radius-lg);padding:var(--sp-4)}
.pa-h{font-size:var(--fs-base);font-weight:600}
.pa-list{list-style:none;margin-top:var(--sp-3);display:grid;
         grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2) var(--sp-4)}
.pa-list li{display:flex;align-items:flex-start;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--dim)}
/* 17 px — тот же бокс, что у значка внутри кнопки: галочка идёт в строку с текстом
   в --fs-sm, и 24 px значка витрины рядом с ней читались бы как отдельный элемент. */
.pa-ico{width:17px;height:17px;flex:none;margin-top:3px;color:var(--accent);fill:none;stroke:currentColor}

.fine{font-size:var(--fs-fine);color:var(--dim);line-height:1.6}

/* Системные требования под сеткой платформ. Отдельное правило, а не голый .fine: строка
   длинная, и без ограничения по мере она на широком экране растягивается на всю .wrap,
   переставая читаться как сноска. */
.sysreq{margin-top:var(--sp-5);max-width:78ch}

/* ── Скачать ─────────────────────────────────────────────────────────────── */
/* Секция выровнена по левому краю, как остальные: своих правил про text-align тут больше нет.
   Прежние .download{text-align:center} и .download .lead{margin:0 auto} сняты вместе с .narrow. */
/* Платформы — карточка на каждую, сетка во всю ширину .wrap. Колонки заданы явно (4 → 2 → 1),
   а не через auto-fit: тот на промежуточных ширинах давал ряд из трёх и одинокую карточку под
   ним. macOS занимает две колонки — внутри у неё две половины (Apple Silicon и Intel), и в
   одинарной ширине они не помещаются рядом.
   Карточка — flex-колонка, нижний слот прижат margin-top:auto: кнопка и статусы соседей встают
   на одну горизонталь, хотя описания разной длины. */
.plats{list-style:none;margin-top:var(--sp-5);display:grid;
       grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3)}
.plat{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
      padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
/* Марка платформы в правом верхнем углу — на одной горизонтали с названием.
   Цвет не свой, а основной под прозрачностью: марка должна опознаваться боковым зрением
   и не претендовать на внимание, а отдельный серый в палитре ради этого заводить незачем.
   Размеры разные, потому что знаки разной массы: у яблока силуэт узкий и высокий, у окна —
   плотный квадрат, и в одном боксе окно выглядело бы вдвое тяжелее. Выровнены по глазу. */
.plat-mark{position:absolute;top:var(--sp-4);right:var(--sp-4);color:var(--dim);opacity:.26}
.mark-mac{width:15px;height:19px}
.mark-win{width:17px;height:17px}
.mark-linux{width:19px;height:19px}
.plat-wide{grid-column:span 2}
/* Выпущенная платформа помечена рамкой и тенью — тем же приёмом, что .plan.pro в тарифах.
   Заливкой не помечаем: её и так выделяет единственная в блоке кнопка, фон был бы вторым
   голосом о том же. */
.plat.now{border-color:#c9d6f5;box-shadow:var(--shadow-sm)}
/* Черта под названием — та же .bar, что в карточках «Совместимости»: карточки платформ
   набраны в общий словарь страницы, а не в собственный. Свои margin у неё сняты — вертикаль
   в этой карточке держит gap флекса. */
.plat .bar{margin:2px 0 0}
.plat b{font-size:var(--fs-base);font-weight:600;letter-spacing:-.01em}
.plat-sub{font-size:var(--fs-sm);color:var(--dim);line-height:1.45}
/* Половины широкой карточки разделены волосяной линией, а не двумя рамками: это по-прежнему
   ОДНА карточка одной ОС, а рамка внутри рамки прочиталась бы как вложенные блоки. */
.plat-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-1);flex:1}
.plat-half{display:flex;flex-direction:column;gap:var(--sp-2)}
.plat-half+.plat-half{padding-left:var(--sp-3);border-left:1px solid var(--line)}
.plat-kind{font-size:var(--fs-sm);font-weight:600;color:var(--fg)}
/* Кнопка в карточке уже общей: 26 px боковых паддингов в колонке ~250 px смотрятся впритык. */
.plat .btn{margin-top:auto;align-self:flex-start;padding:11px 20px;font-size:var(--fs-sm)}
/* Статус занимает место кнопки, но кнопкой не притворяется: ни рамки, ни фона, ни курсора —
   иначе это ловушка, в которую тычут. Кегль и вертикальные паддинги те же, что у кнопки, —
   низ карточек совпадает.
   Точка перед статусом — единственный значок в блоке, и он несёт то, чего нет в тексте:
   насколько платформа близка к выходу. Заливка = работа идёт, кольцо = ещё не начата.
   Красок не добавляем: синий на сайте означает «всё в порядке», серый — «пока нет»; зелёный
   или янтарный стали бы единственной такой краской на странице (см. шапку файла). */
.plat-when{margin-top:auto;padding:11px 0;font-size:var(--fs-sm);font-weight:500;color:var(--dim);
           display:inline-flex;align-items:center;gap:var(--sp-2)}
.plat-when::before{content:"";width:8px;height:8px;flex:none;border-radius:50%}
.plat-when.work::before{background:var(--accent)}
.plat-when.soon::before{box-shadow:inset 0 0 0 1.5px #b6b6b6}
/* Карточка невышедшей платформы: статус + приглушённая кнопка «Уведомить» (mailto-лист
   ожидания; почему она там вообще — комментарий к сетке платформ в index.html).
   margin-top:auto стоит и у статуса, и у .plat .btn — а флекс раздаёт свободное место
   МЕЖДУ всеми авто-margin поровну, и пара разъехалась бы по карточке. Поэтому вниз тянет
   только статус, а кнопка идёт сразу за ним. Нижние паддинги статуса (они там ради
   совпадения высоты со строкой кнопки у соседей) в паре лишние — снимаем, иначе между
   строкой и кнопкой встаёт 21 px вместо 10. */
.plat-when+.btn{margin-top:0}
.plat-when:has(+ .btn){padding-bottom:0}
.reqs{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--dim);font-variant-numeric:tabular-nums}


/* ── Подвал ──────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:var(--sp-6) 0 var(--sp-5);font-size:var(--fs-sm)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--sp-4)}
/* Кабинет: тот же подвал, но колонок три — «Продукт» и «Прозрачность» к нему не относятся
   (разбор в комментарии к подвалу в account.html). Число колонок в шаблоне ЗАДАНО ЯВНО, а не
   auto-fit: с repeat(4,1fr) три ребёнка растянулись бы по первым трём колонкам, а правая
   треть подвала осталась бы дыркой. */
.foot-grid.slim{grid-template-columns:1.4fr 1fr 1fr}
.foot-col h4{font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
             color:var(--dim);margin-bottom:var(--sp-2)}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.foot-col a{color:var(--dim)}
.foot-col a:hover{color:var(--accent)}
.foot-brand .logo{font-size:var(--fs-lg)}
.foot-brand p{margin-top:var(--sp-2);color:var(--dim);font-size:var(--fs-sm);max-width:34ch}
.req{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line);
     color:var(--dim);font-size:var(--fs-fine);line-height:1.7}
.req .row{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3)}
/* Правило `footer .wrap>.foot-bottom:first-child{margin-top:0}` снято 2026-09-01: оно гасило
   отбивку там, где .foot-bottom шёл первым (так было на док-страницах). После унификации
   подвала порядок один на всех пяти страницах — сетка, реквизиты, нижняя строка, — и первым
   .foot-bottom не бывает нигде. */
.foot-bottom{margin-top:var(--sp-3);display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);
             justify-content:space-between;color:var(--dim);font-size:var(--fs-fine)}

/* ── Документные страницы (юр-тексты, телеметрия, кабинет) ───────────────── */
.doc{padding:clamp(40px,5vw,64px) 0 clamp(48px,6vw,80px)}
.doc h1{font-size:clamp(28px,4vw,40px);margin-bottom:var(--sp-2)}
.doc .updated{color:var(--dim);font-size:var(--fs-sm);margin-bottom:var(--sp-4)}
.doc h2{font-size:clamp(var(--fs-lg),2.4vw,var(--fs-xl));margin:var(--sp-5) 0 var(--sp-2)}
.doc h3{font-size:var(--fs-lg);margin:var(--sp-4) 0 var(--sp-1)}
.doc p,.doc li{font-size:var(--fs-sm);color:var(--dim);max-width:74ch}
.doc p+p{margin-top:var(--sp-3)}
.doc ul,.doc ol{margin:var(--sp-3) 0 var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.doc table{min-width:520px;font-size:var(--fs-sm)}
.doc .table-scroll{margin:var(--sp-4) 0}
.doc td,.doc th{padding:var(--sp-2) var(--sp-3)}
.doc thead th:not(:first-child){text-align:left;width:auto}
.doc tbody td:not(:first-child){text-align:left}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-fine);
     background:var(--surf2);padding:1px 6px;border-radius:5px}
.toc{background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);
     padding:var(--sp-3) var(--sp-4);margin:var(--sp-4) 0 var(--sp-1)}
.toc ul{list-style:none;margin:0;gap:var(--sp-1)}
/* Рубрика внутри оглавления: оферта склеена из четырёх частей (2026-08-28), и без разделителя
   сорок пунктов подряд читаются как каша. Первая рубрика без верхней отбивки — она идёт сразу
   за рамкой блока. */
.toc-part{margin-top:var(--sp-3);color:var(--fg)}
.toc-part:first-child{margin-top:0}
.toc ul+.toc-part{margin-top:var(--sp-3)}
.callout{border:1px solid var(--line);border-left:3px solid var(--warn);background:#fffaf2;
         border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);margin:var(--sp-4) 0}
.callout.info{border-left-color:var(--accent);background:#f6f9ff}
.callout.good{border-left-color:var(--success);background:#f4fbf7}
.callout p{font-size:var(--fs-sm);color:var(--dim)}
.callout strong{font-weight:600}
.back{display:inline-block;margin-bottom:var(--sp-4);font-size:var(--fs-sm);font-weight:500}

/* ── Адаптив ─────────────────────────────────────────────────────────────── */
/* Меню жмётся, чтобы навбар не переносился в две строки. Порог 1080, а не 980: с шестой
   ссылкой («Совместимость», 2026-08-13) несжатое меню вместе с кнопкой требует ~1035 px. */
@media (max-width:1080px){
  .nav-links{gap:var(--sp-3)}
  .nav-links a{font-size:var(--fs-fine);white-space:nowrap}
}
@media (max-width:980px){
  /* довод перестаёт делиться на колонки раньше «мобильного»: в узкой колонке панель-
     доказательство сжимается сильнее, чем текст, и перестаёт читаться */
  .feat{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
  .feat-rev .feat-text{order:0}
  /* карточки «Совместимости» складываются в один столбец там же, где и доводы */
  .duo{grid-template-columns:minmax(0,1fr)}
  /* витрина особенностей — по две плашки в ряд (4 колонки по span 2), в один столбец только
     на мобильном (≤760). Широкая занимает ряд целиком: десять обычных ложатся ровно 5×2,
     и одиннадцатой соседки всё равно не досталось бы — половина ряда осталась бы дыркой. */
  .feat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .f-card.wide{grid-column:span 4}
  /* в одну колонку выравнивать панель по строке заголовка не с чем */
  .feat-vis{margin-top:0}
  /* «в любом тарифе» — в две колонки: в трёх на этой ширине половина строк ломается
     надвое, и ровный перечень превращается в лохматый. В один столбец не уводим —
     одиннадцать коротких строк дали бы ленту высотой в экран. */
  .pa-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* У кабинета колонок две (марка уезжает на свою строку правилом ниже) — в трёх треть
     подвала осталась бы пустой. Селектор здесь и в блоке 420 повторён намеренно: .foot-grid.slim
     весомее голого .foot-grid, и без этих строк базовая тройка пережила бы оба сужения. */
  .foot-grid.slim{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
/* Меню перестаёт помещаться рядом с CTA раньше, чем начинается «мобильный». Ссылки уезжают
   под бургер (разметка и механика :target — в комментарии к навбару в index.html), а кнопка
   «Скачать» ОСТАЁТСЯ в шапке на любой ширине: это главный CTA страницы, и прятать его за два
   касания нельзя. С 2026-09-01 шапка одна на четырёх страницах, поэтому и бургер везде один и
   тот же — раньше он жил только на главной, а на док-страницах ссылки просто прятались.
   Исключение — кабинет: у него в шапке ссылок нет вовсе (разбор в account.html), прятать
   нечего, и бургера в разметке тоже нет — .burger остаётся display:none с широкого экрана.
   Порог 960, а не 900: сжатое меню из шести ссылок (с 2026-08-13) плюс кнопка требуют ~950 px,
   и на 910 «Скачать» уезжала за правый край. Считать надо по полному набору ссылок. */
@media (max-width:960px){
  .nav-links{display:none}
  /* auto возвращаем в бой: на широком его перебивал .nav-links+.btn (тот селектор продолжает
     совпадать и со скрытыми ссылками), а тут кнопку надо прижать вправо. */
  .nav .btn{margin-left:auto}
  /* Втроём (марка + CTA + бургер) на 375 px с зазором 24 они не помещаются. */
  .nav-inner{gap:var(--sp-3)}
  /* Кнопка обязана быть НАД крышкой (z-index:1) и панелью (2): иначе при открытом меню тап по
     ней попадал бы в крышку и просто закрывал меню — «CTA всегда на виду» превратилось бы в
     «на виду, но не нажимается». Сама она меню и закроет: переход на #download меняет хэш,
     и :target с крышки снимается. */
  .nav-inner>.btn{position:relative;z-index:3}

  /* 44×44 — минимальная площадь касания; отрицательный правый отступ ставит сами полоски
     по правому краю колонки .wrap, а не по краю кнопки. order:1 — бургер крайний справа, как
     принято: в разметке он стоит ДО кнопки (там порядок диктует широкий экран, см. index.html). */
  .burger{display:flex;align-items:center;justify-content:center;order:1;
          width:44px;height:44px;margin-right:-11px;
          border-radius:10px;color:var(--fg)}
  .burger:hover{background:var(--surf2)}
  /* Три полоски одним элементом: сам span — средняя, ::before/::after — верхняя и нижняя. */
  .burger-ico,.burger-ico::before,.burger-ico::after{
    width:20px;height:2px;border-radius:2px;background:currentColor}
  .burger-ico{position:relative;transition:background .12s ease}
  .burger-ico::before,.burger-ico::after{content:"";position:absolute;left:0;
    transition:transform .18s ease}
  .burger-ico::before{top:-6px}
  .burger-ico::after{top:6px}
  /* Открыто — полоски складываются в крестик (крышка лежит выше бургера, поэтому клик по
     крестику попадает в неё и закрывает меню). */
  #menu:target ~ .burger .burger-ico{background:transparent}
  #menu:target ~ .burger .burger-ico::before{transform:translateY(6px) rotate(45deg)}
  #menu:target ~ .burger .burger-ico::after{transform:translateY(-6px) rotate(-45deg)}

  /* Крышка на весь экран ловит клик мимо меню. Прозрачная: затемнять страницу ради выпадашки
     на пять ссылок незачем. height:100vh, а не bottom:0 — у .nav есть backdrop-filter, а он
     делает шапку блоком-контейнером для fixed-потомков, и bottom:0 упёрся бы в её 64 px. */
  .menu-scrim{position:fixed;left:0;top:0;width:100%;height:100vh;z-index:1}
  #menu:target{display:block}

  /* Панель — лист во всю ширину под шапкой. top в пикселях по той же причине, что и height у
     крышки: 64 px (высота .nav-inner) одинаково верны и от шапки, и от вьюпорта — шапка липкая
     и всегда стоит у верхнего края. Отступы по бокам совпадают с .wrap, чтобы ссылки шли по
     одной линии с маркой. */
  .menu-panel{display:none;position:fixed;left:0;right:0;top:64px;z-index:2;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 20px 40px -24px rgba(23,23,23,.55);padding:var(--sp-1) var(--sp-4) var(--sp-4);
    /* телефон в альбомной ориентации ниже самого меню — тогда прокручиваем меню, а не режем */
    max-height:calc(100vh - 64px);overflow-y:auto;overscroll-behavior:contain}
  #menu:target ~ .menu-panel{display:block}
  .menu-panel .nav-links{display:flex;flex-direction:column;gap:0;margin-left:0}
  /* Пункты прижаты вправо — к той стороне, откуда меню открыли (бургер стоит справа), и на
     одну линию с кнопкой «Войти» под списком. Выравнивание сделано ТЕКСТОМ, а не
     align-items:flex-end у колонки: во втором случае каждая строка сжалась бы до ширины
     своей надписи и черта-разделитель поехала бы вслед за ней — вместо ровной стопки линий
     получилась бы лесенка. Тут строка остаётся во всю ширину панели, вправо едет только
     надпись, а заодно и площадь касания у короткого «Цены» не съёживается до слова. */
  .menu-panel .nav-links a{color:var(--fg);font-size:var(--fs-base);padding:14px 0;
    text-align:right;border-bottom:1px solid var(--line)}
  /* Последней ссылке черта не нужна: под ней край панели, а «Скачать» (она стояла тут до
     2026-08-24 и черту оправдывала) в панели больше нет. Под списком теперь «Войти», но она
     отбита отступом и черты над собой не требует. */
  .menu-panel .nav-links a:last-child{border-bottom:0}
  /* «Войти» в раскрытом меню — обычная кнопка по ширине надписи, прижатая вправо, под
     правым краем пунктов. Растянутая на всю панель (так было до 2026-09-01) читалась как
     главное действие меню, хотя главное тут — «Скачать», и та в панель не входит вовсе.
     Механика: width:fit-content ужимает коробку до содержимого, а левый auto в сокращённом
     margin (порядок сторон — верх, право, низ, ЛЕВО) съедает весь остаток строки и толкает
     кнопку вправо. Автоотступ работает только у блочной коробки, поэтому display остаётся
     flex, а не inline-flex — иначе кнопка встала бы по левому краю как обычная строчная.
     Он же перебивает 2 px из шапки (.nav .nav-signin — тот же вес селектора, но объявлен
     раньше), иначе кнопка сошла бы с линии пунктов. */
  .menu-panel .nav-signin{display:flex;width:fit-content;
    margin:var(--sp-3) 0 var(--sp-1) auto;padding:12px 18px}
}
@media (max-width:760px){
  /* кадр приложения тут не подменяется — он один на все ширины и просто масштабируется */
  .shot-glow{filter:blur(50px)}
  .grid3,.plans{grid-template-columns:minmax(0,1fr)}
  /* «в любом тарифе» — в один столбец: две колонки на телефоне дают ~190 px на строку,
     и каждая вторая ломается надвое. Одиннадцать строк в столбик — это экран на треть,
     а не лента. */
  .pa-list{grid-template-columns:minmax(0,1fr)}
  .plats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plat-wide{grid-column:span 2}
/* Выпущенная платформа помечена рамкой и тенью — тем же приёмом, что .plan.pro в тарифах.
   Заливкой не помечаем: её и так выделяет единственная в блоке кнопка, фон был бы вторым
   голосом о том же. */
.plat.now{border-color:#c9d6f5;box-shadow:var(--shadow-sm)}
/* Черта под названием — та же .bar, что в карточках «Совместимости»: карточки платформ
   набраны в общий словарь страницы, а не в собственный. Свои margin у неё сняты — вертикаль
   в этой карточке держит gap флекса. */
.plat .bar{margin:2px 0 0}
  /* витрина — в один столбец, но колонок ДВЕ: .f-card идёт через span 2 (см. .feat-grid).
     Широкой тут ширины не прибавить, поэтому span возвращается к 2 — иначе grid дорисовал бы
     недостающие колонки и ряд уехал бы за экран. */
  .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-card.wide{grid-column:span 2}
  .panel{padding:var(--sp-3)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-cta{gap:var(--sp-2)}
  .hero .hero-cta .btn{width:100%;justify-content:center}
  .sub-actions .btn{width:100%;justify-content:center}
  /* карточки сетевых обращений не ужимаем вдвое — переводим в колонку */
  .net-grid{grid-template-columns:minmax(0,1fr)}
}
/* Узкие телефоны (≤420). Главное правило блока: страница обязана сжиматься до ширины экрана.
   Минимальную ширину странице задаёт липкая шапка (лого + марка + кнопка, всё nowrap), и когда
   она перестаёт помещаться, body{overflow-x:hidden} молча срезает правый край ВСЕЙ страницы —
   заметнее всего по кадру приложения в первом экране (замер 2026-08-11: на вьюпорте 320 px
   вёрстка упиралась в 350 px и у кадра пропадали правые 30 px). Поэтому ужимаем шапку.
   На главной кнопки в шапке уже нет (ушла под бургер), так что правила ниже держат шапку
   остальных страниц — отсюда и `.nav-inner>.btn`: кнопку в панели меню они трогать не должны. */
@media (max-width:420px){
  .wrap{padding:0 var(--sp-3)}
  .nav-inner{gap:var(--sp-2)}
  .nav-inner>.btn{padding:9px 14px}
  /* поля панели меню — по .wrap, чтобы ссылки шли по одной линии с маркой */
  .menu-panel{padding-left:var(--sp-3);padding-right:var(--sp-3)}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .foot-grid.slim{grid-template-columns:minmax(0,1fr)}
  .plats{grid-template-columns:minmax(0,1fr)}
  .plat-wide{grid-column:span 1}
  /* В одну колонку половины уже не встают рядом — линия-разделитель переезжает с бока наверх. */
  .plat-split{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  .plat-half+.plat-half{padding:var(--sp-3) 0 0;border-left:0;border-top:1px solid var(--line)}
}
/* Самые узкие (≤340: iPhone SE 1-го поколения, старые андроиды) — марка ещё на кегль меньше. */
@media (max-width:340px){
  .logo{font-size:var(--fs-base);gap:var(--sp-2)}
  .logo-mark{width:28px;height:28px;flex:0 0 28px}
}