@layer theme, base, site, components;
@layer theme{
:root,.t-platform{--color-page:#f5f6fa;--color-panel:#ffffff;--color-band:#edf0f7;--color-line:#d9e1ec;--color-line-btn:#d7dbec;--color-ink:#131523;--color-body:#5a607f;--color-muted:#61688b;--color-faint:#646e9e;--color-nav-active:#5a607f;--color-accent:#3967a8;--color-accent-hover:#30578d;--color-accent-bright:#92abcf;--color-on-accent:#ffffff;--color-accent-soft:#ebf0f6;--color-accent-light:#bacae1;--color-success:#257c5a;--color-success-soft:#e9f3ef;--color-warning:#9b6116;--color-warning-soft:#f7f0e6;--color-danger:#d50e26;--color-danger-soft:#fde7ea;--color-field-error:#e8607a;--deep:#1b2740;--on-deep:#f7f8fb;--marker:#ffe14d;--logo-edge:#131523;--logo-arrow:#131523;--logo-face-deep:#5284CA;--logo-face-mid:#77A6EA;--logo-face-light:#A2C4F6}
.t-pz{--color-page:#f5f6fa;--color-panel:#ffffff;--color-band:#edf0f7;--color-line:#d9e1ec;--color-line-btn:#d7dbec;--color-ink:#131523;--color-body:#5a607f;--color-muted:#61688b;--color-faint:#646e9e;--color-nav-active:#5a607f;--color-accent:#195cf3;--color-accent-hover:#154dcc;--color-accent-bright:#81a5f8;--color-on-accent:#ffffff;--color-accent-soft:#e8effe;--color-accent-light:#afc6fb;--color-success:#257c5a;--color-success-soft:#e9f3ef;--color-warning:#9b6116;--color-warning-soft:#f7f0e6;--color-danger:#d50e26;--color-danger-soft:#fde7ea;--color-field-error:#e8607a;--deep:#142551;--on-deep:#f7f8fb;--marker:#ffe14d;--logo-edge:#131523;--logo-arrow:#131523;--logo-face-deep:#326CEF;--logo-face-mid:#5C9CFF;--logo-face-light:#93BDFF}
.t-znp{--color-page:#f5f6fa;--color-panel:#ffffff;--color-band:#edf0f7;--color-line:#d9e1ec;--color-line-btn:#d7dbec;--color-ink:#131523;--color-body:#5a607f;--color-muted:#61688b;--color-faint:#646e9e;--color-nav-active:#5a607f;--color-accent:#b7481a;--color-accent-hover:#9a3c16;--color-accent-bright:#d79a81;--color-on-accent:#ffffff;--color-accent-soft:#f8ede8;--color-accent-light:#e6bfaf;--color-success:#257c5a;--color-success-soft:#e9f3ef;--color-warning:#9b6116;--color-warning-soft:#f7f0e6;--color-danger:#d50e26;--color-danger-soft:#fde7ea;--color-field-error:#e8607a;--deep:#372021;--on-deep:#f7f8fb;--marker:#ffe14d;--logo-edge:#131523;--logo-arrow:#131523;--logo-face-deep:#D0521E;--logo-face-mid:#FB814F;--logo-face-light:#FFB596}
.t-znii{--color-page:#f5f6fa;--color-panel:#ffffff;--color-band:#edf0f7;--color-line:#d9e1ec;--color-line-btn:#d7dbec;--color-ink:#131523;--color-body:#5a607f;--color-muted:#61688b;--color-faint:#646e9e;--color-nav-active:#5a607f;--color-accent:#047857;--color-accent-hover:#036549;--color-accent-bright:#75b5a3;--color-on-accent:#ffffff;--color-accent-soft:#e6f2ee;--color-accent-light:#a7d0c4;--color-success:#257c5a;--color-success-soft:#e9f3ef;--color-warning:#9b6116;--color-warning-soft:#f7f0e6;--color-danger:#d50e26;--color-danger-soft:#fde7ea;--color-field-error:#e8607a;--deep:#102b2e;--on-deep:#f7f8fb;--marker:#ffe14d;--logo-edge:#131523;--logo-arrow:#131523;--logo-face-deep:#0E906B;--logo-face-mid:#17B689;--logo-face-light:#3EE6B6}
.t-ze{--color-page:#f5f6fa;--color-panel:#ffffff;--color-band:#edf0f7;--color-line:#d9e1ec;--color-line-btn:#d7dbec;--color-ink:#131523;--color-body:#5a607f;--color-muted:#61688b;--color-faint:#646e9e;--color-nav-active:#5a607f;--color-accent:#30747c;--color-accent-hover:#286168;--color-accent-bright:#8db3b7;--color-on-accent:#ffffff;--color-accent-soft:#eaf1f2;--color-accent-light:#b7ced1;--color-success:#257c5a;--color-success-soft:#e9f3ef;--color-warning:#9b6116;--color-warning-soft:#f7f0e6;--color-danger:#d50e26;--color-danger-soft:#fde7ea;--color-field-error:#e8607a;--deep:#192a37;--on-deep:#f7f8fb;--marker:#ffe14d;--logo-edge:#131523;--logo-arrow:#131523;--logo-face-deep:#52B7C4;--logo-face-mid:#5ECFDE;--logo-face-light:#88EEFB}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]),:root:not([data-theme="light"]).t-platform,:root:not([data-theme="light"]) .t-platform{--color-page:#0f1320;--color-panel:#171c2b;--color-band:#212739;--color-line:#38415c;--color-line-btn:#434e6d;--color-ink:#f7f8fb;--color-body:#c4c9da;--color-muted:#9299b3;--color-faint:#7c839d;--color-nav-active:#3d4763;--color-accent:#7e9cc6;--color-accent-hover:#abbfda;--color-accent-bright:#98b0d1;--color-on-accent:#11151f;--color-accent-soft:#21293b;--color-accent-light:#3b4961;--color-success:#4db88a;--color-success-soft:#132820;--color-warning:#d4a04a;--color-warning-soft:#2a2116;--color-danger:#ff6b7d;--color-danger-soft:#3a1720;--color-field-error:#ff8fa0;--deep:#131f35;--on-deep:#f7f8fb;--marker:#ffe14d;--logo-edge:#2F5994;--logo-arrow:#26446F;--logo-face-deep:#5284CA;--logo-face-mid:#77A6EA;--logo-face-light:#A2C4F6}
:root:not([data-theme="light"]).t-pz,:root:not([data-theme="light"]) .t-pz{--color-page:#0f1320;--color-panel:#171c2b;--color-band:#212739;--color-line:#38415c;--color-line-btn:#434e6d;--color-ink:#f7f8fb;--color-body:#c4c9da;--color-muted:#9299b3;--color-faint:#7c839d;--color-nav-active:#3d4763;--color-accent:#6a98fe;--color-accent-hover:#9ebcfe;--color-accent-bright:#88adfe;--color-on-accent:#11151f;--color-accent-soft:#1f2840;--color-accent-light:#344775;--color-success:#4db88a;--color-success-soft:#132820;--color-warning:#d4a04a;--color-warning-soft:#2a2116;--color-danger:#ff6b7d;--color-danger-soft:#3a1720;--color-field-error:#ff8fa0;--deep:#0d1e46;--on-deep:#f7f8fb;--marker:#ffe14d;--logo-edge:#0032A4;--logo-arrow:#0032A4;--logo-face-deep:#326CEF;--logo-face-mid:#5C9CFF;--logo-face-light:#93BDFF}
:root:not([data-theme="light"]).t-znp,:root:not([data-theme="light"]) .t-znp{--color-page:#0f1320;--color-panel:#171c2b;--color-band:#212739;--color-line:#38415c;--color-line-btn:#434e6d;--color-ink:#f7f8fb;--color-body:#c4c9da;--color-muted:#9299b3;--color-faint:#7c839d;--color-nav-active:#3d4763;--color-accent:#e08f6d;--color-accent-hover:#ebb6a0;--color-accent-bright:#e6a58a;--color-on-accent:#11151f;--color-accent-soft:#2b2832;--color-accent-light:#5d4442;--color-success:#4db88a;--color-success-soft:#132820;--color-warning:#d4a04a;--color-warning-soft:#2a2116;--color-danger:#ff6b7d;--color-danger-soft:#3a1720;--color-field-error:#ff8fa0;--deep:#321b19;--on-deep:#f7f8fb;--marker:#ffe14d;--logo-edge:#7E2906;--logo-arrow:#7E2906;--logo-face-deep:#D0521E;--logo-face-mid:#FB814F;--logo-face-light:#FFB596}
:root:not([data-theme="light"]).t-znii,:root:not([data-theme="light"]) .t-znii{--color-page:#0f1320;--color-panel:#171c2b;--color-band:#212739;--color-line:#38415c;--color-line-btn:#434e6d;--color-ink:#f7f8fb;--color-body:#c4c9da;--color-muted:#9299b3;--color-faint:#7c839d;--color-nav-active:#3d4763;--color-accent:#5ca792;--color-accent-hover:#95c6b8;--color-accent-bright:#7db9a8;--color-on-accent:#11151f;--color-accent-soft:#1e2a35;--color-accent-light:#2f4d4f;--color-success:#4db88a;--color-success-soft:#132820;--color-warning:#d4a04a;--color-warning-soft:#2a2116;--color-danger:#ff6b7d;--color-danger-soft:#3a1720;--color-field-error:#ff8fa0;--deep:#092225;--on-deep:#f7f8fb;--marker:#ffe14d;--logo-edge:#004C36;--logo-arrow:#004C36;--logo-face-deep:#047857;--logo-face-mid:#17B689;--logo-face-light:#3EE6B6}
:root:not([data-theme="light"]).t-ze,:root:not([data-theme="light"]) .t-ze{--color-page:#0f1320;--color-panel:#171c2b;--color-band:#212739;--color-line:#38415c;--color-line-btn:#434e6d;--color-ink:#f7f8fb;--color-body:#c4c9da;--color-muted:#9299b3;--color-faint:#7c839d;--color-nav-active:#3d4763;--color-accent:#7aa9af;--color-accent-hover:#a9c7cb;--color-accent-bright:#95babf;--color-on-accent:#11151f;--color-accent-soft:#212a38;--color-accent-light:#3a4d59;--color-success:#4db88a;--color-success-soft:#132820;--color-warning:#d4a04a;--color-warning-soft:#2a2116;--color-danger:#ff6b7d;--color-danger-soft:#3a1720;--color-field-error:#ff8fa0;--deep:#12232e;--on-deep:#f7f8fb;--marker:#ffe14d;--logo-edge:#047381;--logo-arrow:#047381;--logo-face-deep:#52B7C4;--logo-face-mid:#5ECFDE;--logo-face-light:#88EEFB}
}
:root[data-theme="dark"],:root[data-theme="dark"].t-platform,:root[data-theme="dark"] .t-platform{--color-page:#0f1320;--color-panel:#171c2b;--color-band:#212739;--color-line:#38415c;--color-line-btn:#434e6d;--color-ink:#f7f8fb;--color-body:#c4c9da;--color-muted:#9299b3;--color-faint:#7c839d;--color-nav-active:#3d4763;--color-accent:#7e9cc6;--color-accent-hover:#abbfda;--color-accent-bright:#98b0d1;--color-on-accent:#11151f;--color-accent-soft:#21293b;--color-accent-light:#3b4961;--color-success:#4db88a;--color-success-soft:#132820;--color-warning:#d4a04a;--color-warning-soft:#2a2116;--color-danger:#ff6b7d;--color-danger-soft:#3a1720;--color-field-error:#ff8fa0;--deep:#131f35;--on-deep:#f7f8fb;--marker:#ffe14d;--logo-edge:#2F5994;--logo-arrow:#26446F;--logo-face-deep:#5284CA;--logo-face-mid:#77A6EA;--logo-face-light:#A2C4F6}
:root[data-theme="dark"].t-pz,:root[data-theme="dark"] .t-pz{--color-page:#0f1320;--color-panel:#171c2b;--color-band:#212739;--color-line:#38415c;--color-line-btn:#434e6d;--color-ink:#f7f8fb;--color-body:#c4c9da;--color-muted:#9299b3;--color-faint:#7c839d;--color-nav-active:#3d4763;--color-accent:#6a98fe;--color-accent-hover:#9ebcfe;--color-accent-bright:#88adfe;--color-on-accent:#11151f;--color-accent-soft:#1f2840;--color-accent-light:#344775;--color-success:#4db88a;--color-success-soft:#132820;--color-warning:#d4a04a;--color-warning-soft:#2a2116;--color-danger:#ff6b7d;--color-danger-soft:#3a1720;--color-field-error:#ff8fa0;--deep:#0d1e46;--on-deep:#f7f8fb;--marker:#ffe14d;--logo-edge:#0032A4;--logo-arrow:#0032A4;--logo-face-deep:#326CEF;--logo-face-mid:#5C9CFF;--logo-face-light:#93BDFF}
:root[data-theme="dark"].t-znp,:root[data-theme="dark"] .t-znp{--color-page:#0f1320;--color-panel:#171c2b;--color-band:#212739;--color-line:#38415c;--color-line-btn:#434e6d;--color-ink:#f7f8fb;--color-body:#c4c9da;--color-muted:#9299b3;--color-faint:#7c839d;--color-nav-active:#3d4763;--color-accent:#e08f6d;--color-accent-hover:#ebb6a0;--color-accent-bright:#e6a58a;--color-on-accent:#11151f;--color-accent-soft:#2b2832;--color-accent-light:#5d4442;--color-success:#4db88a;--color-success-soft:#132820;--color-warning:#d4a04a;--color-warning-soft:#2a2116;--color-danger:#ff6b7d;--color-danger-soft:#3a1720;--color-field-error:#ff8fa0;--deep:#321b19;--on-deep:#f7f8fb;--marker:#ffe14d;--logo-edge:#7E2906;--logo-arrow:#7E2906;--logo-face-deep:#D0521E;--logo-face-mid:#FB814F;--logo-face-light:#FFB596}
:root[data-theme="dark"].t-znii,:root[data-theme="dark"] .t-znii{--color-page:#0f1320;--color-panel:#171c2b;--color-band:#212739;--color-line:#38415c;--color-line-btn:#434e6d;--color-ink:#f7f8fb;--color-body:#c4c9da;--color-muted:#9299b3;--color-faint:#7c839d;--color-nav-active:#3d4763;--color-accent:#5ca792;--color-accent-hover:#95c6b8;--color-accent-bright:#7db9a8;--color-on-accent:#11151f;--color-accent-soft:#1e2a35;--color-accent-light:#2f4d4f;--color-success:#4db88a;--color-success-soft:#132820;--color-warning:#d4a04a;--color-warning-soft:#2a2116;--color-danger:#ff6b7d;--color-danger-soft:#3a1720;--color-field-error:#ff8fa0;--deep:#092225;--on-deep:#f7f8fb;--marker:#ffe14d;--logo-edge:#004C36;--logo-arrow:#004C36;--logo-face-deep:#047857;--logo-face-mid:#17B689;--logo-face-light:#3EE6B6}
:root[data-theme="dark"].t-ze,:root[data-theme="dark"] .t-ze{--color-page:#0f1320;--color-panel:#171c2b;--color-band:#212739;--color-line:#38415c;--color-line-btn:#434e6d;--color-ink:#f7f8fb;--color-body:#c4c9da;--color-muted:#9299b3;--color-faint:#7c839d;--color-nav-active:#3d4763;--color-accent:#7aa9af;--color-accent-hover:#a9c7cb;--color-accent-bright:#95babf;--color-on-accent:#11151f;--color-accent-soft:#212a38;--color-accent-light:#3a4d59;--color-success:#4db88a;--color-success-soft:#132820;--color-warning:#d4a04a;--color-warning-soft:#2a2116;--color-danger:#ff6b7d;--color-danger-soft:#3a1720;--color-field-error:#ff8fa0;--deep:#12232e;--on-deep:#f7f8fb;--marker:#ffe14d;--logo-edge:#047381;--logo-arrow:#047381;--logo-face-deep:#52B7C4;--logo-face-mid:#5ECFDE;--logo-face-light:#88EEFB}
}
/*
 * СТИЛИ ЛЕНДИНГА (волна 626). Правила — `docs/landing-principles.md`; вид — продукта.
 *
 * Правка по замечанию владельца 01.10.2026: «интерфейс лендинга тоже должен опираться на утверждённый
 * UI/UX». Цвета — токены продукта (`--color-*`, их значения выводит `theme.ts` из `tokens.css`), радиусы —
 * `--radius-control` (4) и `--radius-card` (6) у элементов интерфейса и `--radius-card-lg` (14) у карточек
 * публичной страницы, как записано в дизайн-системе; кнопки, поля и вкладки повторяют размеры компонентов
 * `packages/ui` (поле и кнопка по 36 пикселей, текст 14, подпись поля 13).
 *
 * Слои: `@layer theme, base, site, components;` объявлены сборкой ПЕРЕД этим файлом (`assemble.ts`), чтобы
 * утилитные стили приложения, подключённые на той же странице, не перебивали элементные правила сайта.
 */

@layer base {
  :root {
    --radius-control: 4px;
    --radius-card: 6px;
    --radius-card-lg: 14px;
    --shadow-card: 0 1px 4px rgb(21 34 50 / 0.08);
    --shadow-lift: 0 1px 2px rgb(10 15 26 / 0.05), 0 22px 48px -22px rgb(10 15 26 / 0.3);
  }
  /* Тёмная тема — по системе (если человек не выбрал светлую) и по явному выбору переключателем в шапке (`data-theme`) */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      --shadow-card: none;
      --shadow-lift: 0 1px 2px rgb(0 0 0 / 0.3), 0 22px 48px -22px rgb(0 0 0 / 0.7);
    }
  }
  :root[data-theme='dark'] {
    --shadow-card: none;
    --shadow-lift: 0 1px 2px rgb(0 0 0 / 0.3), 0 22px 48px -22px rgb(0 0 0 / 0.7);
  }
  :root[data-theme='light'] {
    color-scheme: light;
  }
  :root[data-theme='dark'] {
    color-scheme: dark;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    color-scheme: light dark;
  }
  body {
    margin: 0;
    background: var(--color-panel);
    color: var(--color-body);
    font:
      16px/1.6 ui-sans-serif,
      system-ui,
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  h1,
  h2,
  h3,
  p,
  ul,
  ol,
  dl,
  figure {
    margin: 0;
  }
  ul,
  ol {
    padding: 0;
    list-style: none;
  }
  h1,
  h2,
  h3 {
    color: var(--color-ink);
    text-wrap: balance;
  }
  h1 {
    font-size: clamp(30px, 3.6vw, 50px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.03em;
  }
  h2 {
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  h3 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
  }
  p {
    text-wrap: pretty;
  }
  a {
    color: var(--color-accent);
    text-underline-offset: 3px;
  }
  a:hover {
    text-decoration-thickness: 2px;
  }
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  button:not(:disabled),
  summary,
  label[for] {
    cursor: pointer;
  }
  .sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  .skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 50;
    padding: 10px 16px;
    background: var(--color-ink);
    color: var(--color-panel);
    border-radius: var(--radius-control);
  }
  .skip:focus {
    top: 12px;
  }
  mark {
    background: color-mix(in srgb, var(--marker) 55%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
  }
}

@layer site {
  /* Знак по умолчанию: без размера SVG растягивается на весь блок. Нужный размер задаёт место. */
  .ic {
    flex: none;
    width: 16px;
    height: 16px;
  }
  .wrap {
    width: min(1380px, 100% - 48px);
    margin-inline: auto;
  }
  .wrap.narrow {
    width: min(820px, 100% - 48px);
  }

  /* ── Логотипы: куб красят переменные `--logo-*` темы, надпись — маска цвета текста ─────────── */
  .brand {
    position: relative;
    display: inline-block;
    flex: none;
    color: var(--color-ink);
    line-height: 0;
  }
  .brand .cube {
    display: block;
  }
  .brand-word {
    position: absolute;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  .ex {
    display: inline-block;
    width: 140px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url('/brands/elementex.svg') no-repeat left center / contain;
    mask: url('/brands/elementex.svg') no-repeat left center / contain;
  }

  /*
   * ── Шапка в двух состояниях (замечание владельца 02.10.2026) ────────────────────────────────────
   * Вверху страницы — «парадная»: прозрачная, крупнее (меню 16, кнопки 44, знак в 2,3 раза больше). Как только
   * страница прокручена (`is-scrolled`, ставит `client.ts`), шапка схлопывается в прежнюю компактную, как в
   * кабинете: 56 пикселей, подложка, рамка. Состояние задают переменные на `.top`: детали (меню, кнопки, знак,
   * решётка) читают их, а не получают по отдельному правилу. Без скрипта (`scripting: none`) и на телефоне
   * шапка всегда компактная: прозрачная шапка над прокручиваемым текстом без скрипта нечитаема.
   *
   * Шапка закреплена (`fixed`), поэтому её высота не сдвигает страницу при схлопывании; первый блок страницы
   * отступает от неё на `--top-h`.
   */
  :root {
    --top-h: 56px;
  }
  .top {
    --h: 56px;
    --nav-h: 36px;
    --nav-fs: 14px;
    --btn-h: 36px;
    --btn-fs: 14px;
    --logo-w: var(--ls);
    --lg: 0;
    position: fixed;
    inset: 0 0 auto;
    z-index: 40;
    background: color-mix(in srgb, var(--color-panel) 90%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--color-line);
    transition:
      background-color 0.25s ease,
      border-color 0.25s ease;
  }
  @media (min-width: 1240px) and (scripting: enabled) {
    :root {
      --top-h: 112px;
    }
    .top:not(.is-scrolled) {
      --h: 112px;
      --nav-h: 44px;
      --nav-fs: clamp(14px, calc(0.6vw + 7px), 16px);
      --btn-h: 44px;
      --btn-fs: 15px;
      --logo-w: var(--lw);
      --lg: 1;
      background: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      border-bottom-color: transparent;
    }
  }
  .top-in {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: var(--h);
    transition: min-height 0.25s ease;
  }
  .logo {
    position: relative;
    display: block;
    align-self: stretch;
    flex: none;
    width: var(--logo-w);
    text-decoration: none;
    transition: width 0.25s ease;
  }
  /* Два знака на одном месте: крупный (полный) вверху страницы и малый (простая надпись) при прокрутке */
  .logo-lg,
  .logo-sm {
    position: absolute;
    left: 0;
    top: 50%;
    /* Флекс, а не строка: у строчной обёртки высота включает зазор под базовой линией, и знак при центровке по её высоте
       оказывался выше пунктов меню на ~4 пикселя (замечание владельца 02.10.2026) */
    display: flex;
    translate: 0 -50%;
    transition: opacity 0.25s ease;
  }
  .logo-lg {
    opacity: var(--lg);
  }
  .logo-sm {
    opacity: calc(1 - var(--lg));
  }
  .nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
    font-size: var(--nav-fs);
    font-weight: 500;
    white-space: nowrap;
    transition: font-size 0.25s ease;
  }
  .nav > a {
    display: inline-flex;
    align-items: center;
    height: var(--nav-h);
    padding: 0 clamp(6px, calc(1vw - 5px), 12px);
    border-radius: var(--radius-control);
    color: var(--color-body);
    text-decoration: none;
    transition:
      height 0.25s ease,
      background-color 0.15s ease,
      color 0.15s ease;
  }
  /*
   * Наведение — только цвет, без фона (просьба владельца 02.10.2026): фон рисует одна плавающая подложка. Прежний фон у самого
   * пункта давал при нажатии вторую подложку — пункт «зажигался» сам, а первая ещё плыла к нему с прежнего места.
   */
  .nav > a:hover {
    color: var(--color-accent);
  }
  .nav > a[aria-current] {
    color: var(--color-accent);
  }
  /* Документы в шапке юридической страницы — настоящие ссылки на страницы: плавающей подложки (она ездит по якорям) нет, текущий
     документ выделен собственной подложкой */
  .nav > a[aria-current='page'] {
    background: var(--color-accent-soft);
  }
  /*
   * Подложка активного пункта «перетекает» между пунктами в сторону прокрутки (просьба владельца 02.10.2026): её
   * создаёт и двигает скрипт (`client.ts`). Левый и правый края движутся с разной скоростью — передний быстрее,
   * задний догоняет, — поэтому при смене пункта подложка вытягивается и стягивается, а не прыгает.
   */
  .nav {
    position: relative;
  }
  .nav > a {
    position: relative;
    z-index: 1;
  }
  .nav-pill {
    position: absolute;
    top: 50%;
    right: var(--pr, 0);
    left: var(--pl, 0);
    height: var(--nav-h);
    translate: 0 -50%;
    border-radius: var(--radius-control);
    background: var(--color-accent-soft);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .nav-pill.is-on {
    opacity: 1;
  }
  .nav.go-right .nav-pill {
    transition:
      right 0.22s cubic-bezier(0.3, 0.7, 0.2, 1),
      left 0.4s cubic-bezier(0.3, 0.7, 0.2, 1) 0.05s,
      opacity 0.2s ease;
  }
  .nav.go-left .nav-pill {
    transition:
      left 0.22s cubic-bezier(0.3, 0.7, 0.2, 1),
      right 0.4s cubic-bezier(0.3, 0.7, 0.2, 1) 0.05s,
      opacity 0.2s ease;
  }
  .burger,
  .apps {
    position: relative;
  }
  .burger summary,
  .apps summary {
    list-style: none;
  }
  .burger summary::-webkit-details-marker,
  .apps summary::-webkit-details-marker {
    display: none;
  }
  .burger-list,
  .apps-list {
    position: absolute;
    top: calc(100% + 8px);
    min-width: 260px;
    display: grid;
    gap: 2px;
    padding: 6px;
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lift);
  }
  .burger-list a.burger-cta {
    display: none;
  }
  .burger-list a {
    padding: 9px 12px;
    border-radius: var(--radius-control);
    color: var(--color-body);
    text-decoration: none;
    font-size: 14px;
  }
  .burger-list a:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }
  .top-act {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    white-space: nowrap;
  }
  .top-act .btn {
    height: var(--btn-h);
    font-size: var(--btn-fs);
    transition:
      height 0.25s ease,
      font-size 0.25s ease,
      background-color 0.15s ease;
  }
  /* Переключатель темы: кнопка того же размера, что и решётка сервисов; виден знак темы, в которую переключат */
  .theme-toggle {
    display: grid;
    place-items: center;
    width: var(--btn-h);
    height: var(--btn-h);
    padding: 0;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-body);
    cursor: pointer;
    transition:
      width 0.25s ease,
      height 0.25s ease,
      background-color 0.15s ease,
      color 0.15s ease;
  }
  .theme-toggle[hidden] {
    display: none;
  }
  .theme-toggle:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }
  .theme-toggle .ic {
    width: 20px;
    height: 20px;
  }
  /* Сейчас светлая — виден значок луны (включить тёмную); сейчас тёмная — солнца */
  .theme-toggle[data-mode='dark'] .ic:first-child,
  .theme-toggle:not([data-mode='dark']) .ic:last-child {
    display: none;
  }
  /* Решётка сервисов — как в кабинете слева от знака: значок `grid` открывает список соседних сервисов */
  .apps summary {
    display: grid;
    place-items: center;
    width: var(--btn-h);
    height: var(--btn-h);
    border-radius: var(--radius-control);
    color: var(--color-body);
    transition:
      width 0.25s ease,
      height 0.25s ease,
      background-color 0.15s ease,
      color 0.15s ease;
  }
  .apps summary:hover,
  .apps[open] summary {
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }
  .apps summary .ic {
    width: 22px;
    height: 22px;
  }
  /*
   * Ширина — по самому широкому знаку (ЗнИИ, 212 пикселей при высоте 42) плюс поля: список в 420 пикселей был вдвое шире
   * содержимого (замечание владельца 02.10.2026). Знаки прежние — 42.
   */
  .apps-list {
    right: 0;
    width: 280px;
    gap: 0;
    padding: 8px;
    transform-origin: top right;
  }
  /*
   * Выпадает из кнопки: проявляется и чуть «вырастает». Открытие — ключевые кадры (работает везде); закрытие — переход,
   * где браузер держит содержимое `<details>` показанным на время перехода (`::details-content`). В остальных браузерах
   * закрывается сразу. При «меньше движения» — без анимации.
   */
  @media (prefers-reduced-motion: no-preference) {
    .apps[open] .apps-list {
      animation: apps-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    @supports selector(::details-content) {
      .apps::details-content {
        transition: content-visibility 0.18s allow-discrete;
      }
      .apps:not([open]) .apps-list {
        opacity: 0;
        translate: 0 -8px;
        scale: 0.96;
        transition:
          opacity 0.18s ease,
          translate 0.18s ease,
          scale 0.18s ease;
      }
    }
  }
  @keyframes apps-in {
    from {
      opacity: 0;
      translate: 0 -8px;
      scale: 0.96;
    }
  }
  .apps-h {
    padding: 8px 12px 10px;
    color: var(--color-ink);
    font-size: 16px;
    font-weight: 700;
  }
  .apps ul {
    display: grid;
    gap: 2px;
  }
  .apps-row > a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 10px;
    border-radius: var(--radius-control);
    text-decoration: none;
  }
  .apps-row > a:hover,
  .apps-row > a[aria-current] {
    background: var(--color-accent-soft);
  }
  .burger {
    display: none;
    margin-left: 4px;
  }
  .burger summary {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-control);
    border: 1px solid var(--color-line-btn);
    color: var(--color-body);
  }
  .burger-list {
    right: 0;
  }

  /* ── Кнопки: размеры и скругление компонента Button ────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition:
      transform 0.15s,
      background-color 0.15s,
      border-color 0.15s,
      box-shadow 0.15s;
  }
  .btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
  }
  .btn-primary {
    background: var(--color-accent);
    color: var(--color-on-accent);
  }
  .btn-primary:hover {
    background: var(--color-accent-hover);
    box-shadow: 0 6px 16px -8px var(--color-accent);
  }
  .btn-secondary {
    background: var(--color-panel);
    color: var(--color-accent);
    border-color: var(--color-line-btn);
  }
  .btn-secondary:hover {
    background: var(--color-accent-soft);
  }
  .btn-ghost {
    background: transparent;
    color: var(--color-body);
  }
  .btn-ghost:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }
  .btn-lg {
    height: 48px;
    padding: 0 28px;
    font-size: 16px;
  }

  /* ── Первый экран ───────────────────────────────────────────────────────────────────────────── */
  .hero {
    padding: calc(var(--top-h) + 48px) 0 80px;
    background: var(--color-page);
    overflow: clip;
  }
  .hero-compact {
    padding: calc(var(--top-h) + 40px) 0 40px;
  }
  .hero-in {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 48px;
    align-items: center;
  }
  .hero-in > * {
    min-width: 0;
  }
  /* Первый экран платформы и ПЗ: заголовок выше (просьба владельца 02.10.2026) — блоки прижаты к верху, а не по центру */
  .hero-ba {
    padding-top: calc(var(--top-h) + 20px);
  }
  .hero-ba .hero-in {
    align-items: start;
  }
  .hero-text {
    display: grid;
    gap: 20px;
    justify-items: start;
  }
  .eyebrow {
    font-weight: 600;
    color: var(--color-accent);
    font-size: 14px;
    letter-spacing: 0.02em;
  }
  .lead {
    font-size: 18px;
    color: var(--color-body);
    max-width: 600px;
  }
  .act {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .conds {
    display: grid;
    gap: 6px;
    color: var(--color-muted);
    font-size: 14px;
  }
  .conds li {
    display: inline-flex;
    gap: 8px;
    align-items: center;
  }
  .conds .ic {
    color: var(--color-success);
  }
  /*
   * «Необходимо другое?»: ссылки в строке с переносом целыми названиями (просьба владельца 02.10.2026 — длинное название
   * «Задание на выполнение инженерных изысканий» не должно рваться посреди слов). На совсем узком экране название
   * разрешено переносить: иначе оно вылезло бы за край.
   */
  .doors {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    font-size: 14px;
    color: var(--color-muted);
  }
  @media (min-width: 420px) {
    .doors a {
      white-space: nowrap;
    }
  }
  .hero-art {
    position: relative;
    min-width: 0;
  }

  /* Маркер под главной мыслью заголовка: рисуется один раз */
  .acc {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: linear-gradient(
        transparent 64%,
        var(--marker) 64%,
        var(--marker) 92%,
        transparent 92%
      )
      no-repeat 0 0 / 100% 100%;
    padding: 0 0.08em;
    animation: draw 0.9s 0.35s ease-out both;
  }
  @keyframes draw {
    from {
      background-size: 0 100%;
    }
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .acc {
      background: linear-gradient(
          transparent 90%,
          var(--marker) 90%,
          var(--marker) 96%,
          transparent 96%
        )
        no-repeat 0 0 / 100% 100%;
    }
  }
  :root[data-theme='dark'] .acc {
    background: linear-gradient(
        transparent 90%,
        var(--marker) 90%,
        var(--marker) 96%,
        transparent 96%
      )
      no-repeat 0 0 / 100% 100%;
  }

  /* ── Секции ─────────────────────────────────────────────────────────────────────────────────── */
  .sec {
    padding: 88px 0;
    overflow-x: clip;
  }
  /*
   * ЛЕНИВАЯ ОТРИСОВКА (просьба владельца 02.10.2026: «лендинг не должен тормозить, не у всех сильные компьютеры»). Разделы ниже
   * первого экрана не стилизуются, не раскладываются и не рисуются, пока человек к ним не подошёл: на загрузке страница
   * считает только то, что видно, а бесконечные движения (парение чипов, мигающая каретка) вне экрана не расходуют кадры.
   * Размер до первой отрисовки — оценка (`auto` запоминает настоящий после неё). Не затрагивает «Как это работает»: там
   * блок прикреплён к экрану, и его высота нужна сразу. Текст раздела остаётся в странице: поиск, якоря и читалки экрана
   * находят его как обычно.
   */
  .sec:not(.sec-stp),
  .foot {
    content-visibility: auto;
    contain-intrinsic-size: auto var(--est, 720px);
  }
  /* Оценка высоты до первой отрисовки — по настоящим высотам на широком экране (1440): полоса прокрутки почти не «ползёт» */
  .sec[aria-labelledby='mandatory'] {
    --est: 760px;
  }
  .sec[aria-labelledby='regulation'] {
    --est: 560px;
  }
  .sec[aria-labelledby='inside'] {
    --est: 580px;
  }
  .sec[aria-labelledby='result'] {
    --est: 690px;
  }
  .sec[aria-labelledby='features'] {
    --est: 720px;
  }
  /* Страница «Возможности»: у витрины без заголовка имя даёт `aria-label` */
  .sec[aria-label] {
    --est: 1380px;
  }
  .sec[aria-labelledby='services'] {
    --est: 800px;
  }
  .sec[aria-labelledby='trust'] {
    --est: 930px;
  }
  .sec[aria-labelledby='faq'] {
    --est: 800px;
  }
  .sec[aria-labelledby='related'] {
    --est: 700px;
  }
  .sec[aria-labelledby='final'] {
    --est: 450px;
  }
  .foot {
    --est: 420px;
  }
  /*
   * Переход по якорю (меню шапки, ссылки на возможности): на время прокрутки разделы показываются целиком (класс ставит
   * скрипт), иначе плавная прокрутка идёт по ОЦЕНКАМ высот и приходит не туда. Когда прокрутка кончилась, класс снимается —
   * `auto` помнит настоящие размеры, и ничего не сдвигается.
   */
  html.is-jumping .sec,
  html.is-jumping .foot {
    content-visibility: visible;
  }
  .sec-band {
    background: var(--color-page);
  }
  /*
   * Раздел с витриной возможностей, которая по просьбе владельца целиком помещается по высоте на 13-дюймовый
   * ноутбук (окно ~790 пикселей, из них 56 занимает шапка): поля раздела 24 + 24, заголовок ОБЫЧНОГО размера (~46, просьба
   * владельца 02.10.2026: «как остальные заголовки, например „Как это работает“»), отступ 12 + 0,5rem — остальное
   * (`100svh − 186px`) отдано самой витрине (`.fx-fit`). Подводки у раздела нет.
   */
  .sec-fx {
    padding: 24px 0;
  }
  .sec-fx .sec-head {
    max-width: none;
    /* Отступ под заголовком — на 0,5rem больше прежних 12 px (просьба владельца 02.10.2026) */
    margin-bottom: calc(12px + 0.5rem);
  }
  .sec-deep {
    background: var(--deep);
    color: var(--on-deep);
  }
  .sec-deep h2,
  .sec-deep h3 {
    color: var(--on-deep);
  }
  .sec-deep a {
    color: var(--color-accent-bright);
  }
  .sec-head {
    display: grid;
    gap: 12px;
    max-width: 760px;
    margin-bottom: 40px;
  }
  .sec-lead {
    font-size: 18px;
    color: var(--color-body);
  }
  .sec-deep .sec-lead {
    color: color-mix(in srgb, var(--on-deep) 82%, transparent);
  }
  .prose {
    max-width: 680px;
    margin-bottom: 14px;
  }

  /* Что на выходе: мозаика с одной высокой плиткой */
  .bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }
  .bento > li {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card-lg);
    background: var(--color-panel);
    box-shadow: var(--shadow-card);
    display: grid;
    gap: 10px;
    align-content: start;
    overflow-wrap: anywhere;
  }
  .bento h3,
  .cards-stag h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
  }
  .bento .ic,
  .cards-stag .ic {
    width: 22px;
    height: 22px;
    color: var(--color-accent);
  }
  .bento > .bento-a {
    grid-column: span 3;
    grid-row: span 2;
    background-color: var(--deep);
    color: var(--on-deep);
    border-color: transparent;
    background-image: radial-gradient(
      circle at 90% 8%,
      color-mix(in srgb, var(--color-accent-bright) 30%, transparent),
      transparent 55%
    );
  }
  .bento-a h3 {
    color: var(--on-deep);
    font-size: 24px;
  }
  .bento-a .ic {
    color: var(--color-accent-bright);
  }
  .bento-b,
  .bento-c,
  .bento-d,
  .bento-e {
    grid-column: span 3;
  }

  /* Группы возможностей: плитки разной ширины */

  /*
   * «Как это работает» — переключатель шагов с живым виджетом (замечание владельца 02.10.2026: прежняя лента из
   * карточек и узлов была «максимально шаблонной»). Слева шаги крупным списком, справа — тот виджет платформы,
   * которым этот шаг делается на самом деле; выбранный шаг подсвечен, пройденные — закрашены.
   *
   * Устроено на радиокнопках и `:has()`, без скрипта: у каждого шага своя радиокнопка (стрелки и Tab работают как
   * в любой группе), у выбранного показан его виджет. `li` — `display: contents`, поэтому метки идут столбиком
   * слева, а все виджеты занимают ОДНУ область справа и подменяют друг друга (невыбранные невидимы, но место держат —
   * блок не меняет высоту при смене шага). На узком экране виджет раскрывается прямо под выбранным шагом. Скрипт выбирает
   * шаг вслед за прокруткой, пока блок прикреплён на «дорожке» (`client.ts`, `.stp-run`).
   */

  /*
   * ПО ВЫСОТЕ ЭКРАНА 13″ НОУТБУКА (просьба владельца 02.10.2026: «как раздел „Возможности“»): полоса хода, заголовок и шаги вместе
   * помещаются в окно ~790 пикселей под шапкой (56): поля раздела 24 + 24, полоса 4 — остальное
   * (`100svh − 116px`, 8 запаса) отдано блоку, в который входит и заголовок (он в его первой гибкой строке, по центру высоты). У невыбранных шагов подпись свёрнута до заголовка: шесть шагов с развёрнутым
   * текстом заняли бы вдвое больше. Шаги стоят по центру высоты, виджет справа — тоже.
   */
  .sec-stp {
    padding: 0;
  }
  .stp-pin {
    padding-block: 24px;
  }
  .stp {
    --stp-h: clamp(440px, calc(100svh - 116px), 700px);
    /* Поля шага ужимаются на низком окне */
    --stp-pad: clamp(6px, 1.4svh, 14px);
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    /* Пустые гибкие строки сверху и снизу держат шаги по центру высоты блока */
    grid-template-rows: 1fr repeat(var(--n), auto) 1fr;
    min-height: var(--stp-h);
    column-gap: 48px;
    row-gap: 4px;
    align-items: start;
  }
  /* Заголовок раздела — в первой гибкой строке сетки: он стоит по центру высоты между полосой хода и первым шагом */
  .stp-h {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  /* Нижняя гибкая строка — пустая */
  .stp::after {
    content: '';
    grid-column: 1;
  }
  /*
   * ДОРОЖКА ПРОКРУТКИ (просьба владельца 02.10.2026: «смена блоков вслед за скроллом»). Блок (`.stp-pin`: заголовок и шаги)
   * прикрепляется к экрану (`position: sticky`), пока человек листает дорожку: она выше экрана на столько, сколько шагов,
   * и по пройденной доле скрипт выбирает шаг. Класс `is-pinned` ставит скрипт, и только там, где блок ЦЕЛИКОМ помещается
   * под шапкой: на узком или совсем низком окне прикреплённый блок обрезался бы снизу — там прежний вид без дорожки.
   * Без скрипта дорожки тоже нет.
   */
  .stp-run.is-pinned {
    height: calc(100svh + (var(--n) - 1) * 50svh);
  }
  .stp-run.is-pinned > .stp-pin {
    position: sticky;
    top: 56px;
  }
  .stp-i {
    display: contents;
  }
  .stp-in {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .stp-l {
    position: relative;
    grid-column: 1;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    padding: var(--stp-pad) 22px var(--stp-pad) 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-card-lg);
    cursor: pointer;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }
  .stp-l:hover {
    background: color-mix(in srgb, var(--color-panel) 60%, transparent);
  }
  .stp-num {
    z-index: 1;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 2px solid var(--color-line);
    border-radius: 50%;
    background: var(--color-panel);
    color: var(--color-muted);
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease,
      scale 0.2s ease;
  }
  .stp-num .ic {
    width: 22px;
    height: 22px;
  }
  .stp-t {
    display: grid;
    align-content: center;
    padding-top: 2px;
  }
  .stp-t b {
    color: var(--color-ink);
    font-size: 18px;
    line-height: 1.3;
  }
  /* Подпись шага: свёрнута, пока шаг не выбран (строка сетки 0fr → 1fr — высота плавно «раскрывается») */
  .stp-x {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    color: var(--color-body);
    font-size: 15px;
    transition:
      grid-template-rows 0.3s ease,
      opacity 0.25s ease;
  }
  .stp-x > span {
    min-height: 0;
    overflow: hidden;
  }
  .stp-x > span::before {
    content: '';
    display: block;
    height: 4px;
  }
  .stp-i:has(.stp-in:checked) .stp-x {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  /* Линия от кружка к следующему */
  .stp-i:has(~ .stp-i) .stp-l::after {
    content: '';
    position: absolute;
    top: calc(var(--stp-pad) + 48px);
    bottom: -4px;
    left: calc(18px + 23px);
    width: 2px;
    background: var(--color-line);
    transition: background-color 0.3s ease;
  }
  /* Пройденные шаги (те, что раньше выбранного) закрашены */
  .stp-i:has(~ .stp-i .stp-in:checked) .stp-num {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }
  .stp-i:has(~ .stp-i .stp-in:checked) .stp-l::after {
    background: var(--color-accent);
  }
  /* Выбранный шаг */
  .stp-i:has(.stp-in:checked) .stp-l {
    border-color: var(--color-line);
    background: var(--color-panel);
    box-shadow: var(--shadow-card);
  }
  .stp-i:has(.stp-in:checked) .stp-num {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-on-accent);
    scale: 1.08;
  }
  .stp-i:has(.stp-in:focus-visible) .stp-l {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  /*
   * Сцена с виджетом: все шаги делят одну область справа (от верха блока до полосы хода), виден только выбранный. Невидимые
   * не убираются из потока — тогда высота области равна высоте самого высокого виджета и не прыгает при смене шага; по
   * центру высоты стоит каждый (просьба владельца 02.10.2026).
   */
  .stp-pane {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    visibility: hidden;
    opacity: 0;
    padding: 28px;
    border-radius: 20px;
    background: var(--color-accent-soft);
    transition:
      opacity 0.25s ease,
      visibility 0s linear 0.25s;
  }
  .stp-i:has(.stp-in:checked) .stp-pane {
    display: block;
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
  /* «Шаг 1 из 6» — не акцентным цветом и не жирным (замечание владельца 02.10.2026): подпись, а не заголовок */
  .stp-cap {
    margin-bottom: 12px;
    color: var(--color-body);
    font-size: 13px;
    font-weight: 500;
  }
  /* Ссылка на внешний сервис у шага: справа внизу панели, заметной кнопкой */
  .stp-link {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
  }
  .stp-link .ic {
    width: 16px;
    height: 16px;
  }
  /*
   * ПОЛОСА ХОДА ПРОКРУТКИ «как у сторис» (просьба владельца 02.10.2026: «скроллишь, а ничего не происходит», затем — «над
   * заголовком, вверху блока»): по одной черте на шаг; пройденные закрашены, текущая заполняется вместе с прокруткой — видно и
   * что страница отзывается, и сколько осталось до конца блока. Видна только на дорожке (`is-pinned`); долю `--p` (от 0 до числа
   * шагов) ставит скрипт.
   */
  .stp-prog {
    /* Без отступа снизу: заголовок стоит по центру между самой полосой и первым шагом (просьба владельца 02.10.2026) */
    padding-bottom: 0;
    /* Место занято всегда, а видна полоса только на дорожке: блок не меняет высоту, когда дорожка включается */
    visibility: hidden;
  }
  .stp-run.is-pinned .stp-prog {
    visibility: visible;
  }
  .stp-bar {
    --p: 0;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    gap: 6px;
  }
  .stp-bar i {
    position: relative;
    height: 4px;
    border-radius: 2px;
    background: var(--color-line);
    overflow: hidden;
  }
  .stp-bar i::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    transform-origin: left;
    scale: clamp(0, calc(var(--p) - var(--i)), 1) 1;
  }
  /* Низкое окно (ноутбук с панелями браузера, до ~760 пикселей): виджеты чуть мельче, чтобы блок оставался на дорожке */
  @media (max-height: 760px) and (min-width: 901px) {
    .stp-pane {
      padding: 20px 24px;
    }
    .stp-pane .w {
      zoom: 0.9;
    }
  }
  /* Совсем низкое окно: у окон справа убираются сноски («Пароль придумывать не нужно…»), поля чуть теснее — блок остаётся на дорожке */
  @media (max-height: 700px) and (min-width: 901px) {
    .stp-pane .w-note {
      display: none;
    }
    .stp-pane .auth {
      gap: 10px;
    }
  }
  @keyframes stp-in {
    from {
      opacity: 0;
      translate: 0 8px;
    }
  }

  /* Сервисы: две панели разной ширины, логотип у каждого */
  .panels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .panels-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Все карточки белые (замечание владельца 02.10.2026); сервис узнаётся по знаку и цветной кромке */
  .panel {
    position: relative;
    min-width: 0;
    padding: 28px;
    border-radius: var(--radius-card-lg);
    border: 1px solid var(--color-line);
    border-top: 3px solid var(--color-accent);
    background: var(--color-panel);
    box-shadow: var(--shadow-card);
    display: grid;
    gap: 14px;
    align-content: start;
  }
  .panel h3 {
    font-size: 18px;
  }
  .panel-access {
    padding: 10px 12px;
    border-radius: var(--radius-control);
    background: var(--color-accent-soft);
    color: var(--color-ink);
    font-size: 14px;
  }
  /*
   * Название сервиса — ссылка на его страницу, и видна как ссылка (замечание владельца 02.10.2026: «ссылки должны быть
   * на сервисы»): цвет сервиса и стрелка (подчёркивания нет — просьба владельца 02.10.2026); нажимается вся карточка (`::after` растягивает ссылку).
   */
  .panel-link {
    color: var(--color-accent);
    text-decoration: none;
  }
  .panel-link .ic {
    width: 16px;
    height: 16px;
    margin-left: 4px;
    vertical-align: -2px;
    /* Знак шеврона смотрит вниз; здесь он «вперёд» */
    rotate: -90deg;
    transition: translate 0.15s ease;
  }
  .panel-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .panel:has(.panel-link):hover {
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-line));
    border-top-color: var(--color-accent);
  }
  .panel:has(.panel-link):hover .panel-link .ic {
    translate: 3px 0;
  }
  .panel:has(.panel-link:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  .panel-link:focus-visible {
    outline: none;
  }
  .panel-v {
    font-size: 14px;
    color: var(--color-muted);
  }
  /* «Кратко об XML-платформе»: абзацы в две колонки (замечание владельца 02.10.2026; они почти одной длины) */
  .sec-head-wide {
    max-width: none;
  }
  .about-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 56px;
  }
  .about-cols .sec-lead {
    font-size: 17px;
  }
  /* Ссылка на чужой сайт: знак «откроется в новом окне» сразу за текстом */
  .ext .ic {
    width: 0.85em;
    height: 0.85em;
    margin-left: 0.25em;
    vertical-align: -0.08em;
  }

  /*
   * «Что внутри формы»: названия разделов кабинета КРУПНЫМИ ЧИПАМИ, россыпью, с лёгким «парением» (просьба владельца
   * 02.10.2026). Наклон, сдвиг, длительность и фаза у каждого свои — их задаёт разметка (`scatter()` в `render.ts`), поэтому
   * россыпь одна и та же при каждой сборке. Положение и движение — отдельные свойства `translate` и `rotate`, чтобы
   * появление (`opacity`, `scale`) их не перебивало. Скрипт только прячет чипы перед показом (`is-armed`) и пускает по
   * очереди, когда блок виден (`is-in`); без него и при «меньше движения» чипы видны сразу и стоят на месте.
   */
  .cloud-docs {
    display: grid;
  }
  .cloud-docs > .cloud {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: 18px 0;
    border-top: 1px solid var(--color-line);
  }
  .cloud-docs > .cloud:first-child {
    border-top: 0;
  }
  .cloud-doc {
    display: grid;
    gap: 12px;
    justify-items: start;
    font-size: 18px;
    font-weight: 600;
  }
  /*
   * В строке «Что внутри формы» ссылка — САМО НАЗВАНИЕ документа, а не вся строка. `.panel-link` растягивает себя слоем
   * `::after` на ближайший позиционированный блок — у карточки сервиса это карточка; у строки такого блока нет, и слой каждой
   * ссылки ложился на весь раздел: верхним оказывался слой последней строки, и куда бы человек ни нажал — в ПЗ, в ЗнП, —
   * уходил на `/znii/#inside` (замечание владельца 05.10.2026, волна 651).
   */
  .cloud-doc .panel-link::after {
    content: none;
  }
  .cloud-doc .panel-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 4px;
  }
  .cloud-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 12px;
    max-width: 1100px;
    margin-inline: auto;
    padding: 10px 0;
  }
  .cloud-chips li {
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--color-accent-soft);
    color: var(--color-ink);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    margin-inline: calc(var(--dx) * 1px);
    translate: 0 calc(var(--dy) * 1px);
    rotate: calc(var(--r) * 1deg);
  }
  .cloud-chips li:nth-child(3n) {
    font-size: 22px;
  }
  .cloud-chips li:nth-child(7n + 1) {
    font-size: 18px;
  }
  .cloud-chips li:nth-child(4n + 2) {
    background: var(--color-panel);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-accent) 45%, transparent);
  }
  .cloud-chips li:nth-child(5n) {
    background: var(--color-accent);
    color: var(--color-on-accent);
  }
  @media (prefers-reduced-motion: no-preference) {
    .cloud-chips li {
      animation: chip-float var(--t) ease-in-out var(--d) infinite alternate;
    }
    .cloud-chips.is-armed li {
      opacity: 0;
      scale: 0.8;
    }
    .cloud-chips.is-in li {
      opacity: 1;
      scale: 1;
      transition:
        opacity 0.5s ease calc(var(--i) * 70ms),
        scale 0.6s cubic-bezier(0.2, 1.2, 0.3, 1) calc(var(--i) * 70ms);
    }
  }
  @keyframes chip-float {
    to {
      translate: 0 calc(var(--dy) * -1px - 6px);
      rotate: calc(var(--r) * -0.5deg);
    }
  }

  /* Сравнение */
  .cmp {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card-lg);
    overflow: hidden;
    font-size: 15px;
  }
  .cmp th,
  .cmp td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-line);
  }
  .cmp thead th {
    background: var(--color-band);
    color: var(--color-ink);
  }
  .cmp tbody th {
    color: var(--color-ink);
    font-weight: 600;
    width: 24%;
  }
  .cmp tr:last-child th,
  .cmp tr:last-child td {
    border-bottom: 0;
  }
  .cmp .us {
    background: var(--color-accent-soft);
    color: var(--color-ink);
    font-weight: 600;
  }
  .duo-text {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
    align-items: start;
  }
  .duo-text > * {
    min-width: 0;
  }
  /*
   * «Что внутри формы» — продолжение «Почему экспертиза принимает записки только в XML» (просьба владельца 02.10.2026): та
   * же подложка, те же колонки, между ними — тонкая черта вместо нового разрыва между разделами.
   */
  .sec-flow {
    padding-bottom: 48px;
  }
  .sec-cont {
    padding-top: 0;
  }
  .duo-text.cont {
    align-items: center;
    padding-top: 48px;
    border-top: 1px solid var(--color-line);
  }
  .cont .sec-head {
    margin-bottom: 0;
  }
  /* Кнопка «Начать работу» под текстом раздела «Что внутри формы» (просьба владельца 02.10.2026) */
  .inside-act {
    margin-top: 8px;
  }
  .cont .cloud-chips {
    max-width: none;
    margin-inline: 0;
    justify-content: center;
  }

  /*
   * «Поддерживаемые версии схем»: действующая — крупная акцентная плитка во всю ширину, остальные — компактные плитки под
   * ней. Одна версия — одна плитка; две — крупная и узкая полоса (единственная компактная растягивается и ложится
   * в строку); три и четыре — ряд компактных. Ни при каком числе нет пустых клеток и «висящих» хвостов.
   */
  .sver {
    display: grid;
    gap: 14px;
    align-self: center;
  }
  .sver-h {
    font-size: 16px;
  }
  .sver-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .sver-list > li {
    display: flex;
    min-width: 0;
    gap: 16px;
  }
  .sver-num {
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
  }
  .sver-txt {
    display: grid;
    gap: 2px;
    min-width: 0;
    font-size: 14px;
  }
  .sver-txt b {
    font-size: 16px;
  }
  .sver-now {
    flex: 1 1 100%;
    align-items: center;
    padding: 22px 26px;
    border-radius: var(--radius-card-lg);
    background-color: var(--color-accent);
    background-image: radial-gradient(
      circle at 100% 0,
      color-mix(in srgb, var(--color-on-accent) 16%, transparent) 0 34%,
      transparent 35%
    );
    color: var(--color-on-accent);
  }
  .sver-now {
    min-height: 132px;
  }
  .sver-now .sver-num {
    font-size: 60px;
  }
  .sver-old {
    flex: 1 1 150px;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-panel);
    color: var(--color-body);
  }
  .sver-old .sver-num {
    color: var(--color-accent);
    font-size: 30px;
  }
  /* Компактная плитка одна (две версии): она тянется на всю строку, поэтому знак и текст — в ряд */
  .sver-old:nth-child(2):last-child {
    flex-direction: row;
    align-items: center;
  }

  /* Доверие: карточки в шахматном порядке */
  /* Три карточки ОДНОЙ высоты (замечание владельца 02.10.2026: вторая была ниже прочих из-за сдвига) */
  .cards-stag {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: stretch;
  }
  .cards-stag > li {
    min-width: 0;
    padding: 24px;
    border-radius: var(--radius-card-lg);
    background: color-mix(in srgb, var(--on-deep) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--on-deep) 18%, transparent);
    display: grid;
    gap: 10px;
    align-content: start;
  }

  .cards-stag .ic {
    color: var(--color-accent-bright);
  }
  /* Три свойства (бывшие «опоры»): обещание — ярче, механизм — обычным текстом */
  .cards-stag > .trust-pillar {
    background: color-mix(in srgb, var(--on-deep) 13%, transparent);
  }
  .trust-do {
    color: var(--on-deep);
    font-weight: 600;
  }
  .trust-pillar > p:not(.trust-do) {
    color: color-mix(in srgb, var(--on-deep) 82%, transparent);
  }

  /* Возможность: текст и виджет, стороны чередуются */
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
  }
  .chips a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--color-line-btn);
    background: var(--color-panel);
    color: var(--color-ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
  }
  .chips a:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
  .chips .ic {
    color: var(--color-accent);
  }

  /* Вопросы */
  .faq {
    display: grid;
    gap: 10px;
  }
  .faq-i {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-panel);
    transition: border-color 0.25s ease;
  }
  .faq-i[open] {
    border-color: var(--color-accent-light);
  }
  .faq-i summary {
    list-style: none;
    padding: 16px 20px;
    color: var(--color-ink);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
  }
  .faq-i summary::-webkit-details-marker {
    display: none;
  }
  /*
   * Мелкий плюс-символ, серый и прижатый к верхней строке вопроса: вопросы бывают в две строки, и плюс по центру
   * «уплывал» вниз (просьба владельца 02.10.2026: «мелкие плюсы нравились больше; сделать серыми и прибить к
   * верхней части»). Открытый вопрос показывает минус — без вращения, которое владельцу не понравилось.
   */
  .faq-i summary {
    align-items: flex-start;
  }
  .faq-i summary::after {
    content: '+';
    flex: none;
    height: 25px;
    color: var(--color-muted);
    font-size: 22px;
    line-height: 25px;
  }
  .faq-i[open] summary::after {
    content: '−';
  }
  .faq-a {
    display: grid;
    gap: 10px;
    padding: 0 20px 18px;
    color: var(--color-body);
    overflow-wrap: anywhere;
  }
  /*
   * Плавное открытие и закрытие. Везде ответ при открытии мягко выезжает (ключевые кадры). Где браузер умеет
   * анимировать высоту до `auto` (`interpolate-size`) и стилизовать содержимое `<details>` (`::details-content`),
   * высота ещё и плавно растёт и сжимается; в остальных браузерах она меняется сразу, ответ при этом остаётся
   * доступным и находимым поиском по странице.
   */
  .faq-i[open] .faq-a {
    animation: faq-in 0.35s ease both;
  }
  @keyframes faq-in {
    from {
      opacity: 0;
      translate: 0 -6px;
    }
  }
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .faq-i {
      interpolate-size: allow-keywords;
    }
    .faq-i::details-content {
      block-size: 0;
      overflow: clip;
      transition:
        block-size 0.35s ease,
        content-visibility 0.35s allow-discrete;
    }
    .faq-i[open]::details-content {
      block-size: auto;
    }
  }

  /* Финальный призыв */
  .final {
    text-align: center;
    background-image: radial-gradient(
      ellipse at 50% -10%,
      color-mix(in srgb, var(--color-accent-bright) 28%, transparent),
      transparent 60%
    );
  }
  .final .sec-lead {
    margin: 12px auto 0;
    max-width: 640px;
  }
  .final-act {
    margin: 56px 0 40px;
    display: flex;
    justify-content: center;
  }
  .final .btn-primary {
    background: var(--color-panel);
    color: var(--color-ink);
  }
  .final .btn-primary:hover {
    background: var(--color-page);
    box-shadow: none;
  }
  /*
   * Кнопка финального призыва — «extra big» (просьба владельца 02.10.2026: «как аккорд, приглашающий»): выше и шире
   * обычной крупной, со стрелкой, которая подаётся вперёд при наведении, и мягким кольцом, расходящимся от кнопки
   * (при «меньше движения» кольца нет).
   */
  .btn-xl {
    height: 68px;
    padding: 0 44px;
    gap: 12px;
    border-radius: 16px;
    font-size: 21px;
    font-weight: 700;
  }
  .btn-xl .ic {
    width: 22px;
    height: 22px;
    rotate: -90deg;
    transition: translate 0.2s ease;
  }
  /* Знак повёрнут (`rotate`), но `translate` действует в осях страницы: «вперёд» — по горизонтали (раньше было по вертикали, и стрелка съезжала вниз) */
  .btn-xl:hover .ic {
    translate: 4px 0;
  }
  .final .btn-xl {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--color-accent-bright) 55%, transparent),
      0 18px 40px -16px rgb(0 0 0 / 0.5);
  }
  @media (prefers-reduced-motion: no-preference) {
    .final .btn-xl {
      animation: invite 2.8s ease-out infinite;
    }
    .final .btn-xl:hover {
      animation: none;
    }
  }
  @keyframes invite {
    0% {
      box-shadow:
        0 0 0 0 color-mix(in srgb, var(--color-accent-bright) 55%, transparent),
        0 18px 40px -16px rgb(0 0 0 / 0.5);
    }
    70%,
    100% {
      box-shadow:
        0 0 0 18px transparent,
        0 18px 40px -16px rgb(0 0 0 / 0.5);
    }
  }
  @media (max-width: 480px) {
    .btn-xl {
      width: 100%;
      padding: 0 20px;
      font-size: 18px;
    }
  }
  .fine {
    margin-top: 14px;
    font-size: 14px;
    color: color-mix(in srgb, var(--on-deep) 80%, transparent);
  }

  /* Подвал: знаки платформы и «Элементекс», реквизиты, граница честности */
  .foot {
    background: var(--color-page);
    border-top: 1px solid var(--color-line);
    padding: 56px 0 32px;
    font-size: 14px;
  }
  .foot-in {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
    gap: 32px;
  }
  .foot-in > * {
    min-width: 0;
  }
  .foot-h {
    font-size: 14px;
    margin-bottom: 12px;
    letter-spacing: 0;
  }
  .foot-h a {
    color: inherit;
  }
  .foot ul {
    display: grid;
    gap: 8px;
  }
  /*
   * Ссылки подвала: подчёркивание на 30% прозрачнее обычного, а полный цвет и ОДНА линия — по наведению
   * (замечание владельца 02.10.2026). Общее правило `a:hover` утолщает линию до 2 пикселей, и она читалась как
   * двойная, — здесь толщина не меняется.
   */
  .foot a {
    color: var(--color-body);
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-decoration-thickness: 1px;
    transition: text-decoration-color 0.15s ease;
  }
  .foot a:hover {
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
  }
  /* «Состояние сервисов»: точка-индикатор (цвет ставит скрипт), текст и знак «открыть в новом окне» */
  .foot-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .foot-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-muted);
    transition: background-color 0.3s ease;
  }
  .foot-dot[data-tone='ok'] {
    background: var(--color-success);
  }
  .foot-dot[data-tone='down'] {
    background: var(--color-danger);
  }
  .foot-status .ic {
    width: 14px;
    height: 14px;
    color: var(--color-muted);
  }
  .foot-brand {
    display: grid;
    gap: 16px;
    align-content: start;
  }
  .foot-brand p {
    color: var(--color-muted);
    max-width: 34ch;
  }
  .req p {
    margin-bottom: 10px;
    overflow-wrap: anywhere;
  }
  /* «© 2025—2026» — последняя строка реквизитов, тише остальных */
  .req-c {
    color: var(--color-muted);
  }
  /* «Проект группы» — тихая подпись над знаком группы компаний (просьба владельца 02.10.2026) */
  .foot-group {
    display: grid;
    gap: 6px;
    justify-items: start;
  }
  .foot-group-l {
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }
  .foot-ex {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-ink);
    text-decoration: none;
  }
  /* Знак «Элементекс» — их белый файл, нарисованный под тёмный подвал. В тёмной теме он белый, как в оригинале: цветом текста
     (светло-серый `--color-ink`) тонкие буквы высотой 16 px читались тусклее знака платформы рядом (замечание владельца
     05.10.2026). В светлой — цвет текста, тёмный. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .foot-ex {
      color: #ffffff;
    }
  }
  :root[data-theme='dark'] .foot-ex {
    color: #ffffff;
  }
  /* Нижние оговорки подвала — мелко и плотно, без промежутков между строками (просьба владельца 05.10.2026, волна 653). */
  .foot-bottom {
    display: grid;
    gap: 0;
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid var(--color-line);
    color: var(--color-muted);
    font-size: 10px;
  }
}

@layer components {
  /* ── Окно виджета: карточка кабинета ────────────────────────────────────────────────────────── */
  .w {
    display: block;
    container-type: inline-size;
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lift);
    overflow: clip;
    text-align: left;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-body);
  }
  .w * {
    min-width: 0;
  }
  .w-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-line);
  }
  .w-title {
    font-weight: 600;
    color: var(--color-ink);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .w-body {
    padding: 16px;
    display: grid;
    gap: 12px;
    overflow-wrap: anywhere;
  }
  .w-h {
    font-weight: 600;
    color: var(--color-ink);
    font-size: 13px;
    margin-bottom: 6px;
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .w-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: var(--color-muted);
    font-size: 13px;
  }
  .w-note .ic {
    margin-top: 2px;
  }
  .badge-test {
    margin-left: auto;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border: 1px solid color-mix(in srgb, var(--color-warning) 40%, transparent);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  h3 .badge-test {
    margin-left: 8px;
    vertical-align: middle;
  }

  /* Поле формы: подпись слева (13), значение справа (36 пикселей, радиус 4), ошибка под ним */
  .fld {
    display: grid;
    grid-template-columns: minmax(100px, 34%) minmax(0, 1fr);
    gap: 4px 12px;
    align-items: start;
  }
  .fld-l {
    display: flex;
    align-items: center;
    min-height: 36px;
    font-size: 13px;
    line-height: 1.25;
    color: var(--color-body);
  }
  .fld-c {
    display: grid;
    gap: 4px;
  }
  .star {
    color: var(--color-danger);
    font-weight: 400;
  }
  .inp {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
    background: var(--color-panel);
    color: var(--color-ink);
    font-size: 14px;
  }
  input.inp {
    font-family: inherit;
    width: 100%;
    height: 36px;
  }
  .ph {
    color: var(--color-muted);
  }
  .fld.ok .inp {
    border-color: var(--color-success);
  }
  .fld.bad .inp {
    border-color: var(--color-field-error);
  }
  .fld.req .inp {
    background: color-mix(in srgb, var(--color-warning-soft) 70%, transparent);
  }
  .err {
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-danger);
  }
  .fld-note {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    color: var(--color-muted);
  }
  .caret {
    width: 1px;
    height: 16px;
    background: var(--color-ink);
    animation: blink 1.1s steps(1) infinite;
  }
  @keyframes blink {
    50% {
      opacity: 0;
    }
  }
  .auto-tag {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  .hint-dot {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: 700;
    font-size: 12px;
  }
  .pop {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-page);
  }
  @container (max-width: 420px) {
    .fld {
      grid-template-columns: minmax(0, 1fr);
    }
    .fld-l {
      min-height: 0;
    }
  }

  /* Чипы и подсказки */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
  }
  .chip-ok {
    background: var(--color-success-soft);
    color: var(--color-success);
  }
  .chip-bad {
    background: var(--color-danger-soft);
    color: var(--color-danger);
  }
  .chip-warn {
    background: var(--color-warning-soft);
    color: var(--color-warning);
  }
  .chip-info {
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }
  .callout {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: var(--radius-card);
    border: 1px solid var(--color-line);
    background: var(--color-page);
    color: var(--color-ink);
  }
  .callout .ic {
    margin-top: 2px;
  }
  .callout-warn {
    background: var(--color-warning-soft);
    border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
  }
  .callout-warn .ic {
    color: var(--color-warning);
  }
  .addr {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .sug {
    display: grid;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-panel);
    box-shadow: var(--shadow-card);
  }
  .sug li {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-body);
  }
  .sug li:last-child {
    border-bottom: 0;
  }
  .sug li.on {
    background: var(--color-accent-soft);
    color: var(--color-ink);
  }

  /* Таблицы и списки внутри виджетов */
  .tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .tbl th,
  .tbl td {
    padding: 7px 10px;
    border: 1px solid var(--color-line);
    text-align: left;
    vertical-align: top;
  }
  .tbl thead th {
    background: var(--color-band);
    color: var(--color-ink);
  }
  .tbl tbody th {
    font-weight: 400;
    color: var(--color-ink);
  }
  .tbl .r,
  .tbl .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .tbl tr.auto > * {
    background: color-mix(in srgb, var(--color-accent) 7%, var(--color-panel));
  }
  .tbl-word thead th {
    background: var(--color-panel);
    border-bottom: 2px solid var(--color-ink);
  }
  .duo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: start;
  }
  .duo-sign,
  .duo-contrast {
    grid-template-columns: 1fr 1fr;
  }
  /* «Подписание»: два способа — блоки ОДНОЙ высоты, кнопка у каждого внизу (замечание владельца 02.10.2026) */
  .duo-sign {
    align-items: stretch;
  }
  .duo-sign .path {
    grid-template-rows: auto 1fr auto;
  }
  .duo-sign .path > .fld,
  .duo-sign .path > .drop,
  .duo-sign .path > .drops,
  .duo-sign .path > .path-fields {
    align-self: start;
  }
  .path-fields {
    display: grid;
    gap: 10px;
  }
  .arrow {
    align-self: center;
    color: var(--color-accent);
  }
  .arrow .ic {
    width: 20px;
    height: 20px;
  }
  .cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .cards {
    display: grid;
    gap: 8px;
  }
  .cards li {
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-panel);
  }
  .cards b {
    color: var(--color-ink);
    font-weight: 600;
  }
  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .tags i {
    font-style: normal;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
  }

  /* Переключатель-сегмент и проверка реквизитов */
  .seg {
    display: inline-flex;
    border: 1px solid var(--color-line-btn);
    border-radius: var(--radius-control);
    overflow: hidden;
    width: max-content;
  }
  .seg label {
    cursor: pointer;
  }
  .seg input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .seg span {
    display: block;
    padding: 6px 14px;
    font-weight: 500;
    color: var(--color-body);
  }
  .seg input:checked + span {
    background: var(--color-nav-active);
    color: #ffffff;
  }
  .seg input:focus-visible + span {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }
  .inp-live {
    font-variant-numeric: tabular-nums;
  }
  .verdict > span {
    text-wrap: wrap;
  }
  .verdict {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--radius-card);
    font-weight: 600;
  }
  .verdict.ok {
    background: var(--color-success-soft);
    color: var(--color-success);
  }
  .verdict.bad {
    background: var(--color-danger-soft);
    color: var(--color-danger);
  }
  .verdict.idle {
    background: var(--color-page);
    color: var(--color-muted);
  }
  .pairs {
    display: grid;
    gap: 6px;
    color: var(--color-muted);
  }
  .pairs li {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  /* Внутренняя карточка и панель «Валидатор» */
  .card {
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: 12px 14px;
    display: grid;
    gap: 8px;
    align-content: start;
  }
  .card-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink);
  }
  .count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-warning-soft);
    color: var(--color-warning);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .valid-g {
    font-size: 12px;
    color: var(--color-muted);
  }
  .valid ol {
    display: grid;
    gap: 6px;
  }
  .valid li {
    position: relative;
  }
  .vsel {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  /* Замечание — метка радиокнопки: нажатие подсвечивает поле (`.w-live:has(...)`), но страницу не прокручивает */
  .valid label {
    display: grid;
    gap: 1px;
    padding: 7px 9px;
    border-radius: var(--radius-control);
    border: 1px solid var(--color-line);
    color: var(--color-muted);
    font-size: 12px;
    cursor: pointer;
    transition:
      border-color 0.15s ease,
      background-color 0.15s ease;
  }
  .valid label:hover {
    border-color: var(--color-field-error);
  }
  .valid li:has(.vsel:checked) label {
    border-color: var(--color-field-error);
    background: color-mix(in srgb, var(--color-field-error) 8%, transparent);
  }
  .valid li:has(.vsel:focus-visible) label {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  .w-live:has(.vsel[value='code']:checked) .fld[data-k='code'] .inp,
  .w-live:has(.vsel[value='date']:checked) .fld[data-k='date'] .inp {
    border-color: var(--color-field-error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-field-error) 35%, transparent);
    animation: fld-flash 0.6s ease-out;
  }
  @keyframes fld-flash {
    from {
      box-shadow: 0 0 0 9px color-mix(in srgb, var(--color-field-error) 0%, transparent);
    }
  }
  /* Приглашение: надпись над списком и мигающее первое замечание, пока ничего не выбрано */
  .invite {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
  }
  .invite .ic {
    flex: none;
    width: 14px;
    height: 14px;
    rotate: -90deg;
  }
  .valid:has(.vsel:checked) .invite {
    color: var(--color-muted);
    font-weight: 500;
  }
  @media (prefers-reduced-motion: no-preference) {
    .invite .ic {
      animation: nudge-x 1.2s ease-in-out infinite;
    }
    .valid:not(:has(.vsel:checked)) li:first-child label {
      animation: invite-ring 2s ease-out infinite;
    }
  }
  @keyframes nudge-x {
    50% {
      translate: 3px 0;
    }
  }
  @keyframes invite-ring {
    0% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 40%, transparent);
    }
    70%,
    100% {
      box-shadow: 0 0 0 7px transparent;
    }
  }
  /* Подпись НА поле: лежит на верхней границе, форма компактнее */
  .fld-on {
    display: block;
    padding-top: 8px;
  }
  .fld-on .inp {
    position: relative;
    min-height: 34px;
  }
  .fld-on .fld-l {
    position: absolute;
    top: -9px;
    left: 9px;
    z-index: 1;
    display: block;
    min-height: 0;
    padding: 0 5px;
    background: var(--color-panel);
    font-size: 11.5px;
    line-height: 17px;
  }
  .fld-on.req .fld-l {
    background: linear-gradient(
      to bottom,
      var(--color-panel) 50%,
      color-mix(in srgb, var(--color-warning-soft) 70%, var(--color-panel)) 50%
    );
  }
  .valid b {
    color: var(--color-ink);
    font-size: 13px;
    font-weight: 600;
  }
  .split {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 14px;
    align-items: start;
  }
  .form {
    display: grid;
    gap: 10px;
  }

  .saved {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    font-size: 12px;
    color: var(--color-muted);
  }
  .w-history .saved {
    margin-left: auto;
    color: var(--color-success);
    font-weight: 600;
    font-size: 13px;
  }
  /* Прочие виджеты */
  .steps-check {
    display: grid;
    gap: 6px;
  }
  .steps-check li {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--color-ink);
  }
  .steps-check .ic {
    color: var(--color-success);
  }
  .found {
    display: grid;
    gap: 6px;
  }
  .found li {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-panel);
  }
  .where {
    font-size: 12px;
    color: var(--color-muted);
  }
  .tabrow {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--color-line);
  }
  .tabrow [role='tab'] {
    padding: 8px 12px;
    color: var(--color-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-weight: 500;
    font-size: 13px;
  }
  .tabrow [aria-selected='true'] {
    color: var(--color-ink);
    border-bottom-color: var(--color-accent);
  }
  .drops {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .drops li {
    display: grid;
    gap: 3px;
    justify-items: start;
    padding: 10px;
    border: 1.5px dashed var(--color-line-btn);
    border-radius: var(--radius-card);
    background: var(--color-panel);
  }
  .drops .ic {
    width: 22px;
    height: 22px;
    color: var(--color-accent);
  }
  /* Импорт рядом с созданием: способы — столбиком, значок слева от имени */
  .drops-col {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .drops-col li {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    justify-items: start;
    padding: 8px 10px;
  }
  .drops-col .ic {
    grid-row: span 2;
    width: 20px;
    height: 20px;
  }
  .drops-col .badge-test {
    grid-column: 2;
    margin-left: 0;
  }
  .drops b {
    color: var(--color-ink);
  }
  .drops span {
    color: var(--color-muted);
    font-size: 12px;
  }
  .result {
    display: grid;
    gap: 6px;
  }
  .result p {
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }
  .result .ic {
    color: var(--color-accent);
    margin-top: 2px;
  }
  .ver {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .v {
    padding: 6px 14px;
    border-radius: var(--radius-control);
    border: 1px solid var(--color-line-btn);
    font-weight: 700;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
  }
  .v-new {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-accent);
  }
  .loss {
    display: grid;
    gap: 6px;
  }
  .loss li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }
  .loss .ic {
    color: var(--color-success);
    margin-top: 2px;
  }
  .loss .warn {
    color: var(--color-warning);
  }
  .loss .warn .ic {
    color: var(--color-warning);
  }
  .btns {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }
  .w .btn {
    cursor: default;
  }
  .w .btn:hover {
    transform: none;
    box-shadow: none;
  }
  .w .btn-primary:hover {
    background: var(--color-accent);
  }
  .w .btn-secondary:hover {
    background: var(--color-panel);
  }
  .plist,
  .members,
  .timeline {
    display: grid;
    gap: 6px;
  }
  .plist li,
  .members li {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-panel);
  }
  .plist li > span {
    display: grid;
    flex: 1;
  }
  .plist i {
    font-style: normal;
    color: var(--color-muted);
    font-size: 12px;
  }
  .plist b,
  .members b {
    color: var(--color-ink);
    font-weight: 600;
  }
  .plist .ic {
    color: var(--color-accent);
  }
  .members li .chip {
    margin-left: auto;
  }
  .av {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-nav-active);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
  }
  .toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--color-ink);
  }
  .sw {
    display: inline-block;
    flex: none;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--color-line-btn);
    position: relative;
    transition: background-color 0.15s;
  }
  .sw i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.15s;
  }
  .sw.on {
    background: var(--color-accent);
  }
  .sw.on i {
    transform: translateX(16px);
  }
  .mini {
    display: grid;
    gap: 6px;
  }
  .mini li {
    padding: 7px 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
    background: var(--color-panel);
  }
  .mini.auto li {
    background: color-mix(in srgb, var(--color-accent) 7%, var(--color-panel));
  }
  .mini .todo {
    border-style: dashed;
    color: var(--color-muted);
    background: var(--color-panel);
  }
  .listhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--radius-control);
    background: var(--color-band);
    color: var(--color-ink);
    font-weight: 600;
  }
  .mode {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: var(--color-accent);
    font-size: 12px;
  }
  .sortlist {
    display: grid;
    gap: 6px;
  }
  .sortlist li {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-panel);
  }
  .sortlist .ic {
    color: var(--color-muted);
  }
  .sortlist .drag {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-lift);
    transform: translateX(8px) rotate(-0.6deg);
    background: var(--color-accent-soft);
  }
  .timeline li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-line);
  }
  .timeline time {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    min-width: 42px;
  }
  .timeline .mark {
    color: var(--color-ink);
    font-weight: 600;
  }
  .timeline i {
    font-style: normal;
    margin-left: auto;
    color: var(--color-accent);
    font-weight: 600;
  }
  .bubble {
    max-width: 88%;
    padding: 10px 12px;
    border-radius: 10px;
    display: grid;
    gap: 6px;
  }
  .bubble.me {
    justify-self: end;
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-bottom-right-radius: 2px;
  }
  .bubble.they {
    background: var(--color-band);
    color: var(--color-ink);
    border-bottom-left-radius: 2px;
  }
  .att {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 12px;
  }
  .unread {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: var(--color-ink);
    font-weight: 600;
  }
  .unread .count {
    background: var(--color-accent);
    color: var(--color-on-accent);
  }
  .path {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-panel);
  }
  .path .w-h .ic {
    color: var(--color-accent);
  }
  .path .fld {
    grid-template-columns: minmax(0, 1fr);
  }
  .path .fld-l {
    min-height: 0;
  }
  .drop {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1.5px dashed var(--color-line-btn);
    border-radius: var(--radius-card);
    color: var(--color-ink);
  }
  .drop .ic {
    color: var(--color-accent);
  }
  .drop.wide {
    justify-content: space-between;
  }
  .sigs {
    display: grid;
    gap: 10px;
  }
  .sigs li {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: var(--radius-card);
    border: 1px solid var(--color-line);
    background: var(--color-panel);
  }
  .sigs li > span {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .sigs b {
    color: var(--color-ink);
    font-weight: 600;
  }
  .sigs i {
    margin-left: auto;
    font-style: normal;
    color: var(--color-muted);
    font-size: 12px;
  }
  .sigs p {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-weight: 600;
  }
  .sigs .ok p {
    color: var(--color-success);
  }
  .sigs .bad p {
    color: var(--color-danger);
  }
  .sigs .ok {
    border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-line));
  }
  .sigs .bad {
    border-color: var(--color-field-error);
  }
  /*
   * «Комплект документов» — окно проводника Windows (просьба владельца 02.10.2026): панель с кнопками и адресом, заголовок
   * таблицы, папки раньше файлов, строка состояния. Цвета — токены темы: в тёмной теме проводник не светится белым.
   */
  .expl {
    display: grid;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-panel);
    color: var(--color-ink);
    font-size: 13px;
    overflow: clip;
  }
  .expl-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-band);
  }
  .expl-nav {
    display: flex;
    gap: 2px;
    color: var(--color-muted);
  }
  .expl-nav .ic {
    width: 18px;
    height: 18px;
  }
  .expl-nav .fwd {
    display: inline-flex;
    rotate: 180deg;
  }
  .expl-addr {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
    background: var(--color-panel);
  }
  .expl-addr .ic {
    width: 16px;
    height: 16px;
    color: var(--color-accent);
  }
  .expl-head,
  .expl-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px 68px;
    column-gap: 12px;
    align-items: center;
    padding: 0 12px;
  }
  .expl-head {
    padding-block: 6px;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-muted);
    font-size: 12px;
  }
  .expl-head span {
    white-space: nowrap;
  }
  .expl-head span + span {
    padding-left: 10px;
    border-left: 1px solid var(--color-line);
  }
  .expl-list {
    display: grid;
    padding: 4px 0;
  }
  .expl-list li {
    min-height: 28px;
    border-radius: 3px;
    margin-inline: 4px;
    padding-inline: 8px;
  }
  .expl-list li > span:not(.expl-n) {
    color: var(--color-muted);
    font-size: 12px;
    white-space: nowrap;
  }
  .expl-list li > span:last-child {
    text-align: right;
  }
  .expl-list li.sel {
    background: var(--color-accent-soft);
  }
  .expl-n {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .expl-n .ic {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--color-accent);
  }
  .expl-n .ic[data-icon='file-pdf'] {
    color: var(--color-danger);
  }
  .expl-list .sub .expl-n {
    padding-left: 22px;
  }
  /* Раскрытая папка: шеврон смотрит вниз, как в панели переходов проводника */
  .expl-tw {
    display: inline-flex;
    flex: none;
  }
  .expl-tw .ic {
    width: 12px;
    height: 12px;
    color: var(--color-muted);
  }
  .expl-foot {
    padding: 5px 12px;
    border-top: 1px solid var(--color-line);
    background: var(--color-band);
    color: var(--color-muted);
    font-size: 12px;
  }
  @container (max-width: 400px) {
    .expl-head,
    .expl-list li {
      grid-template-columns: minmax(0, 1fr) 68px;
    }
    .expl-head span:nth-child(2),
    .expl-list li > span:nth-child(2) {
      display: none;
    }
  }
  /* Узкая колонка по центру окна: «Вход в личный кабинет» и «Проверка перед выгрузкой» (просьба владельца 02.10.2026) */
  .w-col {
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
  }
  /* Колонка уже: форма регистрации, где в строке два поля (просьба владельца 02.10.2026: «более узкой, просто отцентровав») */
  .w-col-s {
    max-width: 300px;
  }
  /*
   * Окно «Регистрация» сжато по колонке формы (волна 675, просьба владельца 06.10.2026): 300 пикселей колонки и по 16 полей
   * тела окна. Ширина задана числом, а не `fit-content`: у окна `container-type: inline-size`, и содержимое ширины ему не
   * даёт — оно схлопнулось бы в ноль. По горизонтали окно стоит по центру правого блока шага, по вертикали — панель шага.
   */
  .w-register {
    width: min(100%, 332px);
    margin-inline: auto;
  }
  /* «Регистрация»: по образцу настоящей карточки — подписи над полями, имя и фамилия в два столбца, кнопка во всю ширину */
  .auth {
    display: grid;
    gap: 14px;
  }
  .auth-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .auth-agree {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--color-body);
    font-size: 13px;
    line-height: 1.4;
  }
  /* Галочка согласия поставлена: в настоящей форме без неё кнопка не работает */
  .auth-agree .chk {
    display: grid;
    flex: none;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: 3px;
    background: var(--color-accent);
    color: var(--color-on-accent);
  }
  .auth-agree .chk .ic {
    width: 12px;
    height: 12px;
    stroke-width: 3;
  }
  .auth-f {
    display: grid;
    gap: 6px;
  }
  .auth-l {
    color: var(--color-ink);
    font-size: 13px;
    font-weight: 500;
  }
  .auth-btn {
    display: flex;
    width: 100%;
  }
  .auth-link {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  /* Предпросмотр вложения: список файлов и «лист» справа с переключателем вида */
  .pvw {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 12px;
  }
  .pvw-files {
    display: grid;
    gap: 4px;
    align-content: start;
  }
  .pvw-files li {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 7px 10px;
    border-radius: var(--radius-control);
    color: var(--color-body);
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  .pvw-files li.on {
    background: var(--color-accent-soft);
    color: var(--color-ink);
  }
  .pvw-files .ic {
    color: var(--color-accent);
  }
  .pvw-view {
    display: grid;
    gap: 8px;
    align-content: start;
  }
  .pvw-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
  }
  .pvw-modes span {
    padding: 4px 10px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    color: var(--color-muted);
  }
  .pvw-modes .on {
    border-color: transparent;
    background: var(--color-ink);
    color: var(--color-panel);
  }
  .pvw-sheet {
    display: grid;
    gap: 6px;
    min-height: 120px;
    padding: 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
    background: #ffffff;
    color: #000000;
    align-content: start;
  }
  .pvw-sheet b {
    font:
      700 13px Georgia,
      'Times New Roman',
      serif;
    text-align: center;
  }
  .pvw-sheet i {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #d4d8e3;
  }
  .pvw-sheet i.s {
    width: 60%;
  }
  @container (max-width: 380px) {
    .pvw {
      grid-template-columns: 1fr;
    }
  }
  .prog {
    height: 6px;
    border-radius: 999px;
    background: var(--color-line);
    overflow: hidden;
  }
  .prog span {
    display: block;
    height: 100%;
    background: var(--color-accent);
  }
  .p64 {
    width: 64%;
  }
  /* Печатный лист: остаётся белым в обеих темах — так выглядит бумага */
  .sheet {
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #d0d0d0;
    border-radius: 2px;
    padding: 22px 24px;
    font-family: Georgia, 'Times New Roman', serif;
    display: grid;
    gap: 8px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  }
  .sheet-h {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
  }
  .sheet-s {
    text-align: center;
    color: #444444;
  }
  .sheet-l {
    font-size: 14px;
  }
  .sheet-r {
    display: block;
    height: 7px;
    border-radius: 2px;
    background: #d9d9d9;
  }
  .sheet-r.short {
    width: 60%;
  }
  .sheet-t {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .sheet-t td {
    border: 1px solid #999999;
    padding: 4px 8px;
  }

  /* Контрастный режим: рабочая демонстрация без скрипта (:has) и с ним (класс) */
  .demo {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-panel);
    transition:
      border-color 0.2s,
      color 0.2s;
  }
  .demo .w-h {
    margin: 0;
  }
  .demo-field {
    padding: 8px 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
    color: var(--color-faint);
  }
  .lnk {
    color: var(--color-accent);
    text-decoration: none;
  }
  .spin {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--color-line);
    border-top-color: var(--color-accent);
    animation: spin 1.2s linear infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(1turn);
    }
  }
  .switches {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
    align-content: start;
  }
  .swl {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-panel);
  }
  .swl input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .swl input:checked + .sw {
    background: var(--color-accent);
  }
  .swl input:checked + .sw i {
    transform: translateX(16px);
  }
  .swl input:focus-visible + .sw {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  .swl > span:last-child {
    display: grid;
    color: var(--color-ink);
    font-weight: 600;
  }
  .swl small {
    color: var(--color-muted);
    font-weight: 400;
    font-size: 12px;
  }
  .w-contrast:has([data-demo-toggle='hc']:checked) .demo,
  .demo.hc {
    border-color: var(--color-ink);
    color: var(--color-ink);
    border-width: 2px;
  }
  .w-contrast:has([data-demo-toggle='hc']:checked) .demo-field,
  .demo.hc .demo-field {
    border-color: var(--color-ink);
    color: var(--color-ink);
    border-width: 2px;
  }
  .w-contrast:has([data-demo-toggle='ul']:checked) .lnk,
  .demo.ul .lnk {
    text-decoration: underline;
  }
  .w-contrast:has([data-demo-toggle='still']:checked) .spin,
  .demo.still .spin {
    animation: none;
  }

  /* ── Адаптив ────────────────────────────────────────────────────────────────────────────────── */
  @media (max-width: 1180px) {
    .top-act .btn-ghost {
      display: none;
    }
  }
  @media (max-width: 760px) {
    .cloud-docs > .cloud {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .cloud-chips li {
      padding: 10px 16px;
      font-size: 16px;
    }
    .about-cols {
      grid-template-columns: minmax(0, 1fr);
    }
    .cloud-chips li:nth-child(3n) {
      font-size: 17px;
    }
    .cloud-chips li:nth-child(7n + 1) {
      font-size: 15px;
    }
  }
  @media (max-width: 1080px) {
    .hero-in,
    .duo-text {
      grid-template-columns: 1fr;
      gap: 36px;
    }
    .panels {
      grid-template-columns: 1fr;
    }
    .foot-in {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 1080px) {
    .nav {
      display: none;
    }
    .burger {
      display: block;
    }
  }
  @media (max-width: 900px) {
    .bento,
    .bento > li {
      grid-column: auto !important;
      grid-row: auto !important;
    }
    .stp {
      display: block;
      min-height: 0;
    }
    .stp::after,
    .stp-prog {
      display: none;
    }
    .stp-h {
      margin-bottom: 16px;
    }
    .stp-i {
      display: block;
    }
    .stp-l::after {
      display: none;
    }
    .stp-pane {
      display: none;
      margin: 6px 0 14px;
      padding: 18px;
    }
    /* Слой `components` позже слоя `site`: `display: block` выбранного шага повторяется здесь, иначе его перебило бы правило выше */
    .stp-i:has(.stp-in:checked) .stp-pane {
      display: block;
      animation: stp-in 0.35s ease both;
    }
    .cards-stag {
      grid-template-columns: 1fr;
    }
  }
  /*
   * Узкий телефон: длинный знак сервиса (ЗнИИ — 177 пикселей) вместе с кнопкой «Создать задание» и меню не
   * помещался в 343 пикселя шапки и растягивал страницу вправо. Знак уменьшается, зазоры и поля кнопки — тоже.
   */
  @media (max-width: 480px) {
    .top-in {
      gap: 8px;
    }
    .top .logo {
      zoom: 0.8;
    }
    .top-act .btn {
      padding-inline: 12px;
    }
    /*
     * Знак + решётка сервисов + кнопка + меню не помещались в 343 пикселя шапки: меню уезжало за правый край.
     * Кнопка «Создать …» убрана из шапки — она есть крупно в первом блоке и последней строкой в меню.
     */
    .top-act .btn-primary {
      display: none;
    }
    .burger-list a.burger-cta {
      display: inline-flex;
      justify-content: center;
      margin-top: 4px;
      background: var(--color-accent);
      color: var(--color-on-accent);
    }
    .burger-list a.burger-cta:hover {
      background: var(--color-accent-hover);
      color: var(--color-on-accent);
    }
  }
  @media (max-width: 760px) {
    body {
      font-size: 15px;
    }
    .wrap {
      width: min(1380px, 100% - 32px);
    }
    .hero {
      padding: calc(var(--top-h) + 28px) 0 52px;
    }
    .sec {
      padding: 56px 0;
    }
    .split,
    .cols,
    .duo,
    .duo-sign,
    .duo-contrast {
      grid-template-columns: 1fr;
    }
    .arrow {
      transform: rotate(90deg);
      justify-self: center;
    }
    .drops {
      grid-template-columns: 1fr;
    }
    .foot-in {
      grid-template-columns: 1fr;
    }
    .top-in {
      gap: 12px;
    }
    .top-act .btn {
      padding: 0 12px;
    }
    /* Сравнение: строки складываются в карточки */
    .cmp,
    .cmp tbody,
    .cmp tr,
    .cmp th,
    .cmp td {
      display: block;
    }
    .cmp thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }
    .cmp tr {
      border-bottom: 1px solid var(--color-line);
      padding: 8px 0;
    }
    .cmp tbody th {
      width: auto;
      padding-bottom: 4px;
    }
    .cmp td {
      border: 0;
      padding: 4px 16px;
    }
    .cmp td::before {
      content: attr(data-label) ': ';
      color: var(--color-muted);
      font-weight: 400;
    }
  }

  /*
   * ОКНО ПРО COOKIE — то же, что в продукте (`CookieNotice`): карточка внизу экрана, не модальная (страницу можно читать, не
   * отвечая). Текст владельца и два равных ответа — «Принять» и «Только необходимые» (волна 658). Показывает скрипт, пока ответа
   * нет (в разметке оно `hidden`).
   */
  .consent {
    position: fixed;
    inset: auto 12px 12px;
    z-index: 45;
    max-width: 448px;
    margin-inline: auto;
    padding: 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-panel);
    box-shadow: var(--shadow-lift);
    animation: consent-in 0.25s ease both;
    transition:
      opacity 0.18s ease,
      translate 0.18s ease;
  }
  .consent[hidden] {
    display: none;
  }
  .consent.is-leaving {
    opacity: 0;
    translate: 0 8px;
  }
  .consent-text {
    color: var(--color-body);
    font-size: 14px;
    text-wrap: pretty;
  }
  .consent a {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .consent-act {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
  }
  .consent-act .btn {
    flex: 1 1 auto;
  }
  @keyframes consent-in {
    from {
      opacity: 0;
      translate: 0 8px;
    }
  }
  /* ── Движение: только то, что показывает «собирается», один раз ─────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
    }
  }

  /* ── Печать ─────────────────────────────────────────────────────────────────────────────────── */
  @media print {
    .sec,
    .foot {
      content-visibility: visible;
    }
    .consent,
    .top,
    .skip,
    .act,
    .final {
      display: none !important;
    }
    body {
      background: #ffffff;
      color: #000000;
    }
    .sec {
      padding: 24px 0;
      background: none !important;
    }
    .w {
      box-shadow: none;
      break-inside: avoid;
    }
  }
}
/**
 * «БУМАГА → XML»: первый экран (лист A4 и слой кода), хронология обязательности.
 * Разметка — `paper.ts` и `render.ts`; образцы — `fixtures/`.
 *
 * ПЕРВЫЙ ЭКРАН (правка владельца 02.10.2026: «убираем механику с ползунком; правый блок компактнее; лист A4 с
 * пояснительной запиской, а сверху — правее и чуть ниже — анимированно накладываем слой кода: сначала появляются
 * теги, потом содержимое внутри тегов»). Лист — печатный вид по официальной XSL; поверх него окно редактора с
 * тем же XML. Ничего не двигается руками: образец проигрывает себя сам и остаётся на месте.
 *
 * ПОРЯДОК ПОЯВЛЕНИЯ — чистый CSS, без скрипта: лист всплывает, затем выезжает окно кода; в нём теги (скобки,
 * имена, атрибуты) проявляются построчно по номеру строки `--r`, а когда структура готова, так же построчно
 * «пишется» содержимое (текст внутри тегов и значения атрибутов); последними загораются значения, общие с листом
 * (парная подсветка). При «меньше движения» анимации нет: всё сразу в конечном виде.
 *
 * Все размеры внутри сцены — в долях её ширины (`cqw`): лист, шрифт и строки масштабируются вместе, а печатный
 * вид XSL (`fixtures/*.print.html`) пересчитан в те же единицы генератором.
 *
 * ЦВЕТ. Редактор тёмный в обеих темах: это окно с кодом, а не поверхность страницы. Цвета разметки проверяет
 * `landing-static.test.ts` (каждый ≥ 4,5 : 1 на фоне редактора).
 */
@layer components {
  /* ── Первый экран: лист и слой кода ─────────────────────────────────────────────────────────── */
  .hero-ba .hero-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  }
  /*
   * Ширина образца зависит от высоты окна: на ноутбуке (~780 пикселей) сцена не должна уходить за нижний край.
   * Потолок — 600 пикселей: правый блок компактный и на большом мониторе не раздувается.
   */
  .stk {
    max-width: clamp(420px, calc((100svh - 190px) * 0.95), 600px);
    /* Правый блок сдвинут чуть левее края контейнера (просьба владельца 02.10.2026) */
    margin: 12px clamp(0px, calc(4.5vw - 24px), 72px) 0 auto;
  }
  .stk-stage {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1 / 1;
  }
  /* Лист: белый и чёрный в любой теме — это бумага */
  .stk-sheet {
    position: absolute;
    left: 0;
    top: 0;
    width: 60%;
    aspect-ratio: 1 / 1.414;
    container-type: inline-size;
    overflow: hidden;
    border-radius: 2px;
    background: #ffffff;
    color: #000000;
    line-height: 1.15;
    text-align: left;
    box-shadow:
      0 1px 2px rgb(10 15 26 / 0.08),
      0 18px 40px -14px rgb(10 15 26 / 0.4);
  }
  /*
   * Титульный лист растянут на всю высоту листа (просьба владельца 02.10.2026: «рамку сделай по высоте листа,
   * текст распредели по листу, это должен быть полноценный титульный лист»). Пустые строки XSL (`<br>`) убраны из
   * образца, а промежутки делает сама вёрстка: наименование организации — наверху, блок названия (объект,
   * «Проектная документация», раздел, номер) — по центру свободного места, вид работ, подписант и год — внизу.
   */
  .stk-sheet .pv,
  .stk-sheet .pv > div {
    height: 100%;
  }
  .stk-sheet .pv > div {
    box-sizing: border-box;
    padding: 5.5cqw;
  }
  .stk-sheet .frame {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  /*
   * `!important` — не от упрямства: стили печатной формы приходят из XSL БЕЗ слоя (`<style>` в разметке), и
   * непомеченное правило слоя `components` проигрывает им при любой специфичности (`.pv p { margin-top: 0 }`).
   */
  .stk-sheet .frame > :nth-child(2) {
    margin-top: auto !important;
  }
  .stk-sheet .frame > :nth-child(5) {
    margin-bottom: auto !important;
  }
  .stk-sheet .frame > :nth-child(7) {
    margin-block: 3cqw !important;
  }

  /* Окно кода: поверх листа, правее и ниже */
  .stk-code {
    --ed-bg: #0f1423;
    --ed-ink: #dfe4f4;
    --ed-dim: #8d97b8;
    --ed-line: #262e46;
    --ed-tag: #7cb7ff;
    --ed-attr: #f0b97a;
    --ed-value: #8fdca9;
    --ed-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    background: var(--ed-bg);
    color: var(--ed-ink);
  }
  .stk-code {
    position: absolute;
    right: -2%;
    top: 15%;
    z-index: 1;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 58%;
    height: 82%;
    overflow: hidden;
    border-radius: 12px;
    box-shadow:
      0 1px 2px rgb(10 15 26 / 0.2),
      0 24px 48px -16px rgb(10 15 26 / 0.55);
    font-family: var(--ed-mono);
  }
  /*
   * ТЁМНАЯ ТЕМА: фон окна кода (#0f1423) почти совпадал с фоном первого экрана — окно сливалось со страницей (замечание владельца
   * 02.10.2026). Окну даны светлее поверхность и рамка с тонким кольцом: оно снова читается отдельной деталью. Палитра разметки
   * (теги, атрибуты, значения) на новом фоне читается не хуже (сторож считает контраст и на нём).
   */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .stk-code {
      --ed-bg: #1a2238;
      --ed-line: #303b5e;
      border: 1px solid #3a4770;
      box-shadow:
        0 0 0 1px rgb(122 155 255 / 0.1),
        0 24px 48px -16px rgb(0 0 0 / 0.8);
    }
  }
  :root[data-theme='dark'] .stk-code {
    --ed-bg: #1a2238;
    --ed-line: #303b5e;
    border: 1px solid #3a4770;
    box-shadow:
      0 0 0 1px rgb(122 155 255 / 0.1),
      0 24px 48px -16px rgb(0 0 0 / 0.8);
  }
  .stk-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ed-line);
    color: var(--ed-dim);
    font-size: 12px;
    font-weight: 500;
  }
  .stk-bar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ed-line);
  }
  .stk-bar span {
    margin-left: 6px;
  }
  .stk-xml {
    /* Значения «вставляются» (меняется ширина): пересчёт раскладки остаётся внутри окна кода и не трогает страницу */
    contain: layout style;
    overflow: hidden;
    padding: 12px 0 0 14px;
    font-size: max(1.8cqw, 9px);
    font-variant-ligatures: none;
    line-height: max(3.1cqw, 14px);
  }
  .stk-xml .ln {
    display: block;
    white-space: pre;
  }

  /* Разметка XML первого экрана */
  .x-b,
  .x-pi,
  .x-c {
    color: var(--ed-dim);
  }
  .x-c {
    font-style: italic;
  }
  .x-t {
    color: var(--ed-tag);
  }
  .x-a {
    color: var(--ed-attr);
  }
  .x-v {
    color: var(--ed-value);
  }

  /*
   * Парная подсветка: значение, которое есть и на листе, и в XML, окрашено одинаково — так видно, что лист
   * построен из этого XML, а не нарисован рядом. Загорается последней, когда содержимое уже написано.
   */
  .stk-sheet mark.hl,
  .x-hl {
    --hl: rgb(255 225 77 / 0.7);
    background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 0 / 100% 100%;
    border-radius: 0.15em;
    color: inherit;
  }
  .x-hl {
    --hl: rgb(255 225 77 / 0.2);
    box-shadow: 0 0 0 1px rgb(255 225 77 / 0.35);
  }

  @media (prefers-reduced-motion: no-preference) {
    .stk-xml {
      --tag: 0.95s;
      --step: 45ms;
      --val: calc(var(--tag) + var(--n) * var(--step) + 0.15s);
    }
    .stk-sheet {
      animation: stk-sheet-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    .stk-code {
      animation: stk-code-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both;
    }
    /* 1. Структура: теги, имена, атрибуты — построчно */
    .stk-xml :is(.x-b, .x-t, .x-a, .x-pi, .x-c) {
      animation: stk-tag 0.3s ease-out both;
      animation-delay: calc(var(--tag) + var(--r) * var(--step));
    }
    /* 2. Содержимое: текст внутри тегов и значения атрибутов — тоже построчно, но уже после структуры */
    .stk-xml :is(.x-v, .x-d:not(:first-child)) {
      animation: stk-value 0.45s ease-out both;
      animation-delay: calc(var(--val) + var(--r) * 38ms);
    }
    /*
     * Значения ВСТАВЛЯЮТСЯ, а не проявляются на готовом месте (просьба владельца 02.10.2026): пока значение не написано, его
     * ширина нулевая и закрывающий тег стоит вплотную к открывающему; по мере появления значения тег раздвигается и
     * уезжает вправо. Строка выравнивается по верху: высота у вставки та же, что у строки, и базовые линии совпадают.
     */
    .stk-xml :is(.x-v, .x-d:not(:first-child)) {
      display: inline-block;
      max-width: 100cqw;
      overflow: clip;
      vertical-align: top;
    }
    /* 3. Общие с листом значения: написаны — и загорелись вместе с листом */
    .stk-xml .x-hl {
      animation:
        stk-value 0.45s ease-out calc(var(--val) + var(--r) * 38ms) both,
        stk-mark 0.7s ease-out calc(var(--val) + var(--n) * 38ms + 0.3s) both;
    }
    .stk-sheet mark.hl {
      animation: stk-mark 0.7s ease-out calc(0.95s + var(--n, 28) * 83ms + 0.45s) both;
    }
  }
  @keyframes stk-sheet-in {
    from {
      opacity: 0;
      translate: 0 14px;
    }
  }
  @keyframes stk-code-in {
    from {
      opacity: 0;
      translate: 28px 28px;
    }
  }
  @keyframes stk-tag {
    from {
      opacity: 0;
    }
  }
  @keyframes stk-value {
    from {
      opacity: 0;
      max-width: 0;
    }
  }
  @keyframes stk-mark {
    from {
      background-size: 0 100%;
    }
  }

  /* ── Хронология обязательности ──────────────────────────────────────────────────────────────── */
  .mand {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding-top: 28px;
  }
  .mand::before {
    content: '';
    position: absolute;
    inset: 9px 0 auto;
    height: 2px;
    background: var(--color-line);
  }
  .mand-step {
    position: relative;
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 20px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card-lg);
    background: var(--color-panel);
    box-shadow: var(--shadow-card);
  }
  .mand-step::before {
    content: '';
    position: absolute;
    top: -27px;
    left: 20px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-page);
  }
  .mand-step time {
    color: var(--color-accent);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }
  .mand-step h3 {
    font-size: 18px;
  }
  .mand-step p {
    color: var(--color-body);
    font-size: 15px;
  }
  .mand-bridge {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 36px;
    padding: 18px 20px;
    border-radius: var(--radius-card-lg);
    background: var(--color-accent-soft);
    color: var(--color-ink);
    font-weight: 500;
  }
  .mand-bridge .ic {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: var(--color-accent);
  }

  /* ── Адаптив ────────────────────────────────────────────────────────────────────────────────── */
  @media (max-width: 1080px) {
    .hero-ba .hero-in {
      grid-template-columns: 1fr;
    }
    .stk {
      max-width: 560px;
      margin-inline: auto;
    }
    .mand {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 36px;
    }
    .mand::before {
      display: none;
    }
    .mand-step::before {
      display: none;
    }
  }
  @media (max-width: 620px) {
    .stk-stage {
      aspect-ratio: 1 / 1.08;
    }
    .stk-sheet {
      width: 64%;
    }
    .stk-code {
      width: 68%;
      height: 80%;
    }
    .stk-xml {
      font-size: 2.5cqw;
      line-height: 3.7cqw;
    }
    .mand {
      grid-template-columns: 1fr;
    }
  }
}
/**
 * ВИТРИНА ВОЗМОЖНОСТЕЙ — меню чипами слева, интерфейс выбранной возможности справа (волна 630).
 * Разметка и правила выбора по номеру — `showcase.ts` (`showcaseCss()` строит их из числа возможностей);
 * автопереключение и пауза — `client.ts`. Здесь — только вид.
 *
 * Панели лежат в одной ячейке сетки и различаются видимостью, поэтому высота блока — по самой высокой панели и при
 * смене возможности страница не прыгает. Время показа у текущего чипа — КРУГ справа от названия (`fx-ring`): его дугу
 * `fx-ring-fill` заполняет анимация `fx-fill` (длительность — `--fx-time`), пока витрина «живая» (`is-live`); пауза
 * замораживает её на месте (`is-paused`: курсор на меню или интерфейсе, клавиатурный фокус, кнопка «Пауза», витрина
 * вне экрана). Текущий чип выделен фоном, а не рамкой (замечание владельца 02.10.2026).
 */
@layer components {
  .fx {
    --fx-time: 7s;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 32px;
    align-items: start;
  }
  .fx-in {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .fx-menu {
    display: grid;
    gap: 14px;
    align-content: start;
  }
  /* Группа — свой список в два столбца; чипы идут сверху вниз (сперва левый столбец, потом правый) */
  .fx-g {
    display: grid;
    gap: 8px;
    min-width: 0;
  }
  .fx-menu ul {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows, 1), auto);
    gap: 8px;
  }
  .fx-gh {
    margin-top: 6px;
    color: var(--color-ink);
    font-size: 16px;
    font-weight: 700;
  }
  .fx-menu > .fx-g:first-child .fx-gh {
    margin-top: 0;
  }
  .fx-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-panel) 55%, transparent);
    color: var(--color-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }
  .fx-chip:hover {
    background: color-mix(in srgb, var(--color-panel) 85%, transparent);
    color: var(--color-ink);
  }
  .fx-ic {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }
  .fx-ic .ic {
    width: 19px;
    height: 19px;
  }
  .fx-t {
    min-width: 0;
  }
  /* Круг времени показа: виден только у текущего чипа и только пока витрина «живая» (включает `showcaseCss()`) */
  .fx-ring {
    flex: none;
    width: 24px;
    height: 24px;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .fx-ring circle {
    fill: none;
    stroke-width: 3;
  }
  .fx-ring-bg {
    stroke: color-mix(in srgb, var(--color-accent) 22%, transparent);
  }
  .fx-ring-fill {
    stroke: var(--color-accent);
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    /* дуга начинается сверху и идёт по часовой стрелке */
    transform: rotate(-90deg);
    transform-box: fill-box;
    transform-origin: center;
  }
  .fx.is-paused .fx-ring-fill {
    animation-play-state: paused;
  }
  .fx-in:focus-visible ~ .fx-menu .fx-chip {
    outline: none;
  }
  .fx-in:focus-visible + .fx-in,
  .fx-in:focus-visible {
    outline: none;
  }
  @keyframes fx-fill {
    from {
      stroke-dashoffset: 100;
    }
    to {
      stroke-dashoffset: 0;
    }
  }

  /* Панели с интерфейсами: все в одной ячейке, виден только выбранный */
  .fx-panes {
    position: sticky;
    top: 96px;
    display: grid;
    padding: 28px;
    border-radius: 20px;
    background: var(--color-accent-soft);
  }
  .fx-pane {
    /* Ссылки-якоря `#f-<возможность>` (из «Что стоит за результатом») приходят сюда: заголовок раздела остаётся виден под шапкой */
    scroll-margin-top: 150px;
    display: grid;
    grid-area: 1 / 1;
    grid-template-rows: auto 1fr;
    gap: 18px;
    min-width: 0;
    visibility: hidden;
    opacity: 0;
    transition:
      opacity 0.3s ease,
      visibility 0s linear 0.3s;
  }
  .fx-head {
    display: grid;
    gap: 6px;
    padding-right: 76px;
  }
  /* Окно интерфейса — по центру панели по вертикали (замечание владельца 02.10.2026), без тени: на цветной панели оно и
     так отделено рамкой. Автоотступы, а не `align-content`: если окно выше панели, оно прокручивается с самого верха. */
  .fx-ui {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .fx-ui > * {
    margin-block: auto;
  }
  .fx-ui .w {
    box-shadow: none;
  }
  .fx-cat {
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
  }
  .fx-head h3 {
    /* Заголовок возможности — как заголовок раздела лендинга (замечание владельца 02.10.2026: «сделай крупно») */
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .fx-head > p:last-child {
    color: var(--color-body);
    font-size: 15px;
  }
  /* Кнопка паузы и возобновления: значки `circle-pause` (идёт показ) и `circle-play` (стоит) */
  .fx-toggle {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-accent);
    cursor: pointer;
    transition:
      background-color 0.15s ease,
      scale 0.15s ease;
  }
  .fx-toggle[hidden] {
    display: none;
  }
  .fx-toggle .ic {
    width: 28px;
    height: 28px;
    stroke-width: 1.5;
  }
  .fx-toggle:hover {
    background: var(--color-panel);
    scale: 1.08;
  }
  .fx-toggle[aria-pressed='false'] .ic:last-child,
  .fx-toggle[aria-pressed='true'] .ic:first-child {
    display: none;
  }

  /*
   * ПО ВЫСОТЕ ЭКРАНА (`fx-fit`). Просьба владельца 02.10.2026: «весь раздел с возможностями должен помещаться по
   * высоте на стандартный 13-дюймовый макбук» (окно ~790 пикселей). Высота витрины — от высоты окна за вычетом
   * шапки, полей раздела и заголовка (с 02.10.2026 — обычного размера и с отступом 12 + 0,5rem, 186 вместо прежних 164); строки чипов делят её поровну. На низком экране (меньше 500 пикселей) высота не
   * сжимается: чипы остаются читаемыми.
   */
  /*
   * ВЫСОТА — НЕ МЕНЬШЕ окна, но не жёсткая: если интерфейс самой высокой возможности не поместился, раздел становится чуть
   * выше экрана, а панель НЕ прокручивается сама. Прежде у панели была внутренняя прокрутка (`overflow-y: auto`), и колесо мыши
   * над ней застревало: страница переставала листаться, листалась панель (замечание владельца 02.10.2026). Теперь внутренней
   * прокрутки у панели нет вовсе, колесо всегда листает страницу.
   */
  .fx-fit {
    --fx-h: clamp(500px, calc(100svh - 186px), 720px);
    min-height: var(--fx-h);
    align-items: stretch;
  }
  .fx-fit .fx-menu {
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
  }
  .fx-fit .fx-g {
    min-height: 0;
  }
  /* Строки чипов делят высоту поровну: список читается сверху вниз, а автопоказ идёт по нему подряд */
  .fx-fit .fx-menu ul {
    grid-template-rows: repeat(var(--rows, 15), minmax(0, 1fr));
    gap: 4px 8px;
    min-height: 0;
  }
  .fx-fit .fx-menu li {
    display: flex;
    min-height: 0;
  }
  .fx-fit .fx-chip {
    flex: 1;
    min-height: 0;
    padding: 0 12px;
    font-size: 14px;
  }
  .fx-fit .fx-ic {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }
  .fx-fit .fx-ic .ic {
    width: 15px;
    height: 15px;
  }
  .fx-fit .fx-panes {
    position: relative;
    top: auto;
    padding: 16px 20px;
  }
  .fx-fit .fx-pane {
    gap: 10px;
  }
  .fx-fit .fx-head {
    gap: 4px;
  }
  .fx-fit .fx-head h3 {
    font-size: 28px;
  }
  .fx-fit .fx-head > p:last-child {
    font-size: 13.5px;
    line-height: 1.45;
  }
  /* Сноски под окнами повторяют то, что сказано в тексте над ними: в панели «по высоте» они не нужны */
  .fx-fit .fx-ui .w:not(.w-checksum) .w-note {
    display: none;
  }

  /*
   * Низкое окно (13-дюймовый ноутбук с панелями браузера: ~690–760 пикселей): интерфейсы чуть мельче, чтобы и самый
   * высокий — «Организация по ИНН», он выбран первым — помещался в панель без прокрутки.
   */
  @media (max-height: 760px) and (min-width: 1081px) {
    .fx-fit .fx-ui {
      zoom: 0.88;
    }
    .fx-fit .fx-panes {
      padding: 12px 18px;
    }
    .fx-fit .fx-head > p:last-child {
      font-size: 13px;
    }
    .fx-fit .fx-head h3 {
      font-size: 26px;
    }
  }

  /* Телефон: чипы уже, поэтому круг и поля мельче — иначе названия переносятся на три строки */
  @media (max-width: 560px) {
    .fx .fx-chip {
      gap: 8px;
      padding: 8px;
    }
    .fx-ring {
      width: 18px;
      height: 18px;
    }
  }

  @media (max-width: 1080px) {
    .fx-fit {
      min-height: 0;
    }
    .fx-fit .fx-menu {
      grid-template-rows: none;
    }
    .fx-fit .fx-menu ul {
      grid-template-rows: repeat(var(--rows, 1), auto);
    }
    .fx-fit .fx-chip {
      min-height: 44px;
    }
    .fx {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .fx-panes {
      position: static;
      padding: 18px;
    }
    .fx-head {
      padding-right: 0;
    }
  }
}
@layer components {
/* Построено `showcaseCss()` (apps/web/landing/showcase.ts): правила выбора по номеру возможности */
:is(
  #fx-0:checked ~ .fx-panes > .fx-pane:nth-child(1),
  #fx-1:checked ~ .fx-panes > .fx-pane:nth-child(2),
  #fx-2:checked ~ .fx-panes > .fx-pane:nth-child(3),
  #fx-3:checked ~ .fx-panes > .fx-pane:nth-child(4),
  #fx-4:checked ~ .fx-panes > .fx-pane:nth-child(5),
  #fx-5:checked ~ .fx-panes > .fx-pane:nth-child(6),
  #fx-6:checked ~ .fx-panes > .fx-pane:nth-child(7),
  #fx-7:checked ~ .fx-panes > .fx-pane:nth-child(8),
  #fx-8:checked ~ .fx-panes > .fx-pane:nth-child(9),
  #fx-9:checked ~ .fx-panes > .fx-pane:nth-child(10),
  #fx-10:checked ~ .fx-panes > .fx-pane:nth-child(11),
  #fx-11:checked ~ .fx-panes > .fx-pane:nth-child(12),
  #fx-12:checked ~ .fx-panes > .fx-pane:nth-child(13),
  #fx-13:checked ~ .fx-panes > .fx-pane:nth-child(14),
  #fx-14:checked ~ .fx-panes > .fx-pane:nth-child(15),
  #fx-15:checked ~ .fx-panes > .fx-pane:nth-child(16),
  #fx-16:checked ~ .fx-panes > .fx-pane:nth-child(17),
  #fx-17:checked ~ .fx-panes > .fx-pane:nth-child(18),
  #fx-18:checked ~ .fx-panes > .fx-pane:nth-child(19),
  #fx-19:checked ~ .fx-panes > .fx-pane:nth-child(20),
  #fx-20:checked ~ .fx-panes > .fx-pane:nth-child(21),
  #fx-21:checked ~ .fx-panes > .fx-pane:nth-child(22),
  #fx-22:checked ~ .fx-panes > .fx-pane:nth-child(23),
  #fx-23:checked ~ .fx-panes > .fx-pane:nth-child(24),
  #fx-24:checked ~ .fx-panes > .fx-pane:nth-child(25),
  #fx-25:checked ~ .fx-panes > .fx-pane:nth-child(26),
  #fx-26:checked ~ .fx-panes > .fx-pane:nth-child(27),
  #fx-27:checked ~ .fx-panes > .fx-pane:nth-child(28),
  #fx-28:checked ~ .fx-panes > .fx-pane:nth-child(29),
  #fx-29:checked ~ .fx-panes > .fx-pane:nth-child(30),
  #fx-30:checked ~ .fx-panes > .fx-pane:nth-child(31),
  #fx-31:checked ~ .fx-panes > .fx-pane:nth-child(32),
  #fx-32:checked ~ .fx-panes > .fx-pane:nth-child(33),
  #fx-33:checked ~ .fx-panes > .fx-pane:nth-child(34),
  #fx-34:checked ~ .fx-panes > .fx-pane:nth-child(35),
  #fx-35:checked ~ .fx-panes > .fx-pane:nth-child(36)
) {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
:is(
  #fx-0:checked ~ .fx-menu label[for='fx-0'],
  #fx-1:checked ~ .fx-menu label[for='fx-1'],
  #fx-2:checked ~ .fx-menu label[for='fx-2'],
  #fx-3:checked ~ .fx-menu label[for='fx-3'],
  #fx-4:checked ~ .fx-menu label[for='fx-4'],
  #fx-5:checked ~ .fx-menu label[for='fx-5'],
  #fx-6:checked ~ .fx-menu label[for='fx-6'],
  #fx-7:checked ~ .fx-menu label[for='fx-7'],
  #fx-8:checked ~ .fx-menu label[for='fx-8'],
  #fx-9:checked ~ .fx-menu label[for='fx-9'],
  #fx-10:checked ~ .fx-menu label[for='fx-10'],
  #fx-11:checked ~ .fx-menu label[for='fx-11'],
  #fx-12:checked ~ .fx-menu label[for='fx-12'],
  #fx-13:checked ~ .fx-menu label[for='fx-13'],
  #fx-14:checked ~ .fx-menu label[for='fx-14'],
  #fx-15:checked ~ .fx-menu label[for='fx-15'],
  #fx-16:checked ~ .fx-menu label[for='fx-16'],
  #fx-17:checked ~ .fx-menu label[for='fx-17'],
  #fx-18:checked ~ .fx-menu label[for='fx-18'],
  #fx-19:checked ~ .fx-menu label[for='fx-19'],
  #fx-20:checked ~ .fx-menu label[for='fx-20'],
  #fx-21:checked ~ .fx-menu label[for='fx-21'],
  #fx-22:checked ~ .fx-menu label[for='fx-22'],
  #fx-23:checked ~ .fx-menu label[for='fx-23'],
  #fx-24:checked ~ .fx-menu label[for='fx-24'],
  #fx-25:checked ~ .fx-menu label[for='fx-25'],
  #fx-26:checked ~ .fx-menu label[for='fx-26'],
  #fx-27:checked ~ .fx-menu label[for='fx-27'],
  #fx-28:checked ~ .fx-menu label[for='fx-28'],
  #fx-29:checked ~ .fx-menu label[for='fx-29'],
  #fx-30:checked ~ .fx-menu label[for='fx-30'],
  #fx-31:checked ~ .fx-menu label[for='fx-31'],
  #fx-32:checked ~ .fx-menu label[for='fx-32'],
  #fx-33:checked ~ .fx-menu label[for='fx-33'],
  #fx-34:checked ~ .fx-menu label[for='fx-34'],
  #fx-35:checked ~ .fx-menu label[for='fx-35']
) {
  background: var(--color-accent-soft);
  color: var(--color-ink);
}
:is(
  #fx-0:checked ~ .fx-menu label[for='fx-0'],
  #fx-1:checked ~ .fx-menu label[for='fx-1'],
  #fx-2:checked ~ .fx-menu label[for='fx-2'],
  #fx-3:checked ~ .fx-menu label[for='fx-3'],
  #fx-4:checked ~ .fx-menu label[for='fx-4'],
  #fx-5:checked ~ .fx-menu label[for='fx-5'],
  #fx-6:checked ~ .fx-menu label[for='fx-6'],
  #fx-7:checked ~ .fx-menu label[for='fx-7'],
  #fx-8:checked ~ .fx-menu label[for='fx-8'],
  #fx-9:checked ~ .fx-menu label[for='fx-9'],
  #fx-10:checked ~ .fx-menu label[for='fx-10'],
  #fx-11:checked ~ .fx-menu label[for='fx-11'],
  #fx-12:checked ~ .fx-menu label[for='fx-12'],
  #fx-13:checked ~ .fx-menu label[for='fx-13'],
  #fx-14:checked ~ .fx-menu label[for='fx-14'],
  #fx-15:checked ~ .fx-menu label[for='fx-15'],
  #fx-16:checked ~ .fx-menu label[for='fx-16'],
  #fx-17:checked ~ .fx-menu label[for='fx-17'],
  #fx-18:checked ~ .fx-menu label[for='fx-18'],
  #fx-19:checked ~ .fx-menu label[for='fx-19'],
  #fx-20:checked ~ .fx-menu label[for='fx-20'],
  #fx-21:checked ~ .fx-menu label[for='fx-21'],
  #fx-22:checked ~ .fx-menu label[for='fx-22'],
  #fx-23:checked ~ .fx-menu label[for='fx-23'],
  #fx-24:checked ~ .fx-menu label[for='fx-24'],
  #fx-25:checked ~ .fx-menu label[for='fx-25'],
  #fx-26:checked ~ .fx-menu label[for='fx-26'],
  #fx-27:checked ~ .fx-menu label[for='fx-27'],
  #fx-28:checked ~ .fx-menu label[for='fx-28'],
  #fx-29:checked ~ .fx-menu label[for='fx-29'],
  #fx-30:checked ~ .fx-menu label[for='fx-30'],
  #fx-31:checked ~ .fx-menu label[for='fx-31'],
  #fx-32:checked ~ .fx-menu label[for='fx-32'],
  #fx-33:checked ~ .fx-menu label[for='fx-33'],
  #fx-34:checked ~ .fx-menu label[for='fx-34'],
  #fx-35:checked ~ .fx-menu label[for='fx-35']
) .fx-ic {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.fx.is-live :is(
  #fx-0:checked ~ .fx-menu label[for='fx-0'],
  #fx-1:checked ~ .fx-menu label[for='fx-1'],
  #fx-2:checked ~ .fx-menu label[for='fx-2'],
  #fx-3:checked ~ .fx-menu label[for='fx-3'],
  #fx-4:checked ~ .fx-menu label[for='fx-4'],
  #fx-5:checked ~ .fx-menu label[for='fx-5'],
  #fx-6:checked ~ .fx-menu label[for='fx-6'],
  #fx-7:checked ~ .fx-menu label[for='fx-7'],
  #fx-8:checked ~ .fx-menu label[for='fx-8'],
  #fx-9:checked ~ .fx-menu label[for='fx-9'],
  #fx-10:checked ~ .fx-menu label[for='fx-10'],
  #fx-11:checked ~ .fx-menu label[for='fx-11'],
  #fx-12:checked ~ .fx-menu label[for='fx-12'],
  #fx-13:checked ~ .fx-menu label[for='fx-13'],
  #fx-14:checked ~ .fx-menu label[for='fx-14'],
  #fx-15:checked ~ .fx-menu label[for='fx-15'],
  #fx-16:checked ~ .fx-menu label[for='fx-16'],
  #fx-17:checked ~ .fx-menu label[for='fx-17'],
  #fx-18:checked ~ .fx-menu label[for='fx-18'],
  #fx-19:checked ~ .fx-menu label[for='fx-19'],
  #fx-20:checked ~ .fx-menu label[for='fx-20'],
  #fx-21:checked ~ .fx-menu label[for='fx-21'],
  #fx-22:checked ~ .fx-menu label[for='fx-22'],
  #fx-23:checked ~ .fx-menu label[for='fx-23'],
  #fx-24:checked ~ .fx-menu label[for='fx-24'],
  #fx-25:checked ~ .fx-menu label[for='fx-25'],
  #fx-26:checked ~ .fx-menu label[for='fx-26'],
  #fx-27:checked ~ .fx-menu label[for='fx-27'],
  #fx-28:checked ~ .fx-menu label[for='fx-28'],
  #fx-29:checked ~ .fx-menu label[for='fx-29'],
  #fx-30:checked ~ .fx-menu label[for='fx-30'],
  #fx-31:checked ~ .fx-menu label[for='fx-31'],
  #fx-32:checked ~ .fx-menu label[for='fx-32'],
  #fx-33:checked ~ .fx-menu label[for='fx-33'],
  #fx-34:checked ~ .fx-menu label[for='fx-34'],
  #fx-35:checked ~ .fx-menu label[for='fx-35']
) .fx-ring {
  opacity: 1;
}
.fx.is-live :is(
  #fx-0:checked ~ .fx-menu label[for='fx-0'],
  #fx-1:checked ~ .fx-menu label[for='fx-1'],
  #fx-2:checked ~ .fx-menu label[for='fx-2'],
  #fx-3:checked ~ .fx-menu label[for='fx-3'],
  #fx-4:checked ~ .fx-menu label[for='fx-4'],
  #fx-5:checked ~ .fx-menu label[for='fx-5'],
  #fx-6:checked ~ .fx-menu label[for='fx-6'],
  #fx-7:checked ~ .fx-menu label[for='fx-7'],
  #fx-8:checked ~ .fx-menu label[for='fx-8'],
  #fx-9:checked ~ .fx-menu label[for='fx-9'],
  #fx-10:checked ~ .fx-menu label[for='fx-10'],
  #fx-11:checked ~ .fx-menu label[for='fx-11'],
  #fx-12:checked ~ .fx-menu label[for='fx-12'],
  #fx-13:checked ~ .fx-menu label[for='fx-13'],
  #fx-14:checked ~ .fx-menu label[for='fx-14'],
  #fx-15:checked ~ .fx-menu label[for='fx-15'],
  #fx-16:checked ~ .fx-menu label[for='fx-16'],
  #fx-17:checked ~ .fx-menu label[for='fx-17'],
  #fx-18:checked ~ .fx-menu label[for='fx-18'],
  #fx-19:checked ~ .fx-menu label[for='fx-19'],
  #fx-20:checked ~ .fx-menu label[for='fx-20'],
  #fx-21:checked ~ .fx-menu label[for='fx-21'],
  #fx-22:checked ~ .fx-menu label[for='fx-22'],
  #fx-23:checked ~ .fx-menu label[for='fx-23'],
  #fx-24:checked ~ .fx-menu label[for='fx-24'],
  #fx-25:checked ~ .fx-menu label[for='fx-25'],
  #fx-26:checked ~ .fx-menu label[for='fx-26'],
  #fx-27:checked ~ .fx-menu label[for='fx-27'],
  #fx-28:checked ~ .fx-menu label[for='fx-28'],
  #fx-29:checked ~ .fx-menu label[for='fx-29'],
  #fx-30:checked ~ .fx-menu label[for='fx-30'],
  #fx-31:checked ~ .fx-menu label[for='fx-31'],
  #fx-32:checked ~ .fx-menu label[for='fx-32'],
  #fx-33:checked ~ .fx-menu label[for='fx-33'],
  #fx-34:checked ~ .fx-menu label[for='fx-34'],
  #fx-35:checked ~ .fx-menu label[for='fx-35']
) .fx-ring-fill {
  animation: fx-fill var(--fx-time, 7s) linear forwards;
}
/* Пауза — ТОЖЕ здесь: правило запуска несёт номер (#fx-K) и по специфичности перебило бы общее правило паузы */
.fx.is-paused :is(
  #fx-0:checked ~ .fx-menu label[for='fx-0'],
  #fx-1:checked ~ .fx-menu label[for='fx-1'],
  #fx-2:checked ~ .fx-menu label[for='fx-2'],
  #fx-3:checked ~ .fx-menu label[for='fx-3'],
  #fx-4:checked ~ .fx-menu label[for='fx-4'],
  #fx-5:checked ~ .fx-menu label[for='fx-5'],
  #fx-6:checked ~ .fx-menu label[for='fx-6'],
  #fx-7:checked ~ .fx-menu label[for='fx-7'],
  #fx-8:checked ~ .fx-menu label[for='fx-8'],
  #fx-9:checked ~ .fx-menu label[for='fx-9'],
  #fx-10:checked ~ .fx-menu label[for='fx-10'],
  #fx-11:checked ~ .fx-menu label[for='fx-11'],
  #fx-12:checked ~ .fx-menu label[for='fx-12'],
  #fx-13:checked ~ .fx-menu label[for='fx-13'],
  #fx-14:checked ~ .fx-menu label[for='fx-14'],
  #fx-15:checked ~ .fx-menu label[for='fx-15'],
  #fx-16:checked ~ .fx-menu label[for='fx-16'],
  #fx-17:checked ~ .fx-menu label[for='fx-17'],
  #fx-18:checked ~ .fx-menu label[for='fx-18'],
  #fx-19:checked ~ .fx-menu label[for='fx-19'],
  #fx-20:checked ~ .fx-menu label[for='fx-20'],
  #fx-21:checked ~ .fx-menu label[for='fx-21'],
  #fx-22:checked ~ .fx-menu label[for='fx-22'],
  #fx-23:checked ~ .fx-menu label[for='fx-23'],
  #fx-24:checked ~ .fx-menu label[for='fx-24'],
  #fx-25:checked ~ .fx-menu label[for='fx-25'],
  #fx-26:checked ~ .fx-menu label[for='fx-26'],
  #fx-27:checked ~ .fx-menu label[for='fx-27'],
  #fx-28:checked ~ .fx-menu label[for='fx-28'],
  #fx-29:checked ~ .fx-menu label[for='fx-29'],
  #fx-30:checked ~ .fx-menu label[for='fx-30'],
  #fx-31:checked ~ .fx-menu label[for='fx-31'],
  #fx-32:checked ~ .fx-menu label[for='fx-32'],
  #fx-33:checked ~ .fx-menu label[for='fx-33'],
  #fx-34:checked ~ .fx-menu label[for='fx-34'],
  #fx-35:checked ~ .fx-menu label[for='fx-35']
) .fx-ring-fill {
  animation-play-state: paused;
}
}
/**
 * ЮРИДИЧЕСКИЕ ДОКУМЕНТЫ — белый лист и навигация слева (волна 634, просьба владельца 02.10.2026).
 * Разметка и разбор текста — `legal.ts` и `legalPage` в `render.ts`; шапка и подвал общие со всем лендингом.
 *
 * Лист — ВСЕГДА чёрное на белом, как бумага, в любой теме (так же, как лист на первом экране: на тёмной странице он остаётся
 * листом). Вокруг — подложка страницы; позади листа торчат края ещё двух (стопка), чтобы лист читался как бумага, а не как
 * карточка.
 */
@layer components {
  .legal {
    /* Над страницей — шапка и полоса сервисов (`--strip-h`): лист начинается ниже обеих */
    padding: calc(var(--top-h) + var(--strip-h) + 32px) 0 96px;
    background: var(--color-page);
  }
  :root {
    --strip-h: 56px;
  }
  /* Лист без полосы сервисов (памятка о переходе, «нет такой страницы»): запаса под полосу нет — иначе сверху пустые 56 px
     (замечание владельца 05.10.2026 о /pz/transfer/) */
  .legal-plain {
    padding-top: calc(var(--top-h) + 32px);
  }
  .legal-in {
    display: grid;
    grid-template-columns: 270px minmax(0, 860px);
    column-gap: 44px;
    row-gap: 28px;
    justify-content: center;
    align-items: start;
  }
  /* Нет разделов (у согласия их нет): лист один и стоит по центру */
  .legal-solo {
    grid-template-columns: minmax(0, 860px);
  }

  /* Первая линия — полоса сервисов: подпись «Сервисы платформы:» и логотипы слева направо, каждый — на свой лендинг */
  .svc-strip {
    border-bottom: 1px solid var(--color-line);
  }
  .top.is-scrolled .svc-strip {
    display: none;
  }
  .svc-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--strip-h);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .svc-nav::-webkit-scrollbar {
    display: none;
  }
  .svc-l {
    flex: none;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
  }
  .svc-nav ul {
    display: flex;
    align-items: center;
    gap: 26px;
  }
  .svc-nav li {
    flex: none;
  }
  .svc-nav a {
    display: block;
    border-radius: var(--radius-control);
    opacity: 0.9;
    transition: opacity 0.15s ease;
  }
  .svc-nav a:hover {
    opacity: 1;
  }

  /* Навигация слева: перечень документов и разделы этого документа */
  .legal-nav {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 6px;
    max-height: calc(100svh - 120px);
    padding-right: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .legal-nav-h {
    margin-top: 14px;
    padding-left: 12px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .legal-nav-h:first-child {
    margin-top: 0;
  }
  .legal-toc {
    display: grid;
    gap: 2px;
  }
  .legal-nav a {
    display: block;
    padding: 7px 12px;
    border-left: 2px solid transparent;
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    color: var(--color-body);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
    transition:
      background-color 0.15s ease,
      color 0.15s ease,
      border-color 0.15s ease;
  }
  .legal-nav a:hover {
    background: var(--color-accent-soft);
    color: var(--color-ink);
  }
  /* Читаемый раздел — БЕЗ жирности: от неё строчки перетекали и «прыгали» (замечание владельца 02.10.2026); выделяют линия и подложка */
  .legal-nav a[aria-current] {
    border-left-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-ink);
  }
  /* Подразделы («1.1 …») — со сдвигом и мельче */
  .legal-toc .l2 a {
    padding-left: 26px;
    font-size: 13px;
  }

  /* Лист */
  .legal-sheet {
    position: relative;
    isolation: isolate;
    padding: 64px 72px 72px;
    border-radius: 4px;
    background: #ffffff;
    color: #11151f;
    box-shadow:
      0 1px 2px rgb(10 15 26 / 0.08),
      0 28px 56px -28px rgb(10 15 26 / 0.35);
    font-size: 16px;
    line-height: 1.7;
  }
  .legal-sheet::before,
  .legal-sheet::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgb(10 15 26 / 0.12);
  }
  .legal-sheet::before {
    inset: 8px -8px -8px 8px;
    opacity: 0.85;
  }
  .legal-sheet::after {
    inset: 16px -16px -16px 16px;
    opacity: 0.6;
  }
  .legal-sheet h1,
  .legal-sheet h2,
  .legal-sheet h3 {
    color: #0b0f19;
  }
  .legal-sheet h1 {
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .legal-rev {
    margin-bottom: 10px;
    color: #5b6478;
    font-size: 14px;
  }
  .legal-sec {
    display: grid;
    gap: 14px;
    margin-top: 32px;
  }
  .legal-sec:first-of-type {
    margin-top: 28px;
  }
  .legal-sec [id],
  .legal-sec:target {
    scroll-margin-top: 96px;
  }
  .legal-h1 {
    font-size: 22px;
    line-height: 1.3;
  }
  .legal-h2 {
    font-size: 18px;
    line-height: 1.3;
  }
  .legal-sheet p,
  .legal-sheet li {
    color: #1e2535;
    text-wrap: pretty;
  }
  .legal-sheet ul {
    display: grid;
    gap: 8px;
    padding-left: 4px;
  }
  .legal-sheet li {
    position: relative;
    padding-left: 22px;
  }
  .legal-sheet li::before {
    content: '';
    position: absolute;
    top: 0.72em;
    left: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
  }
  /* Страница перехода со старой версии записки (волна 656): шаги — номерами (порядок значим), главное — в рамке */
  .legal-sheet ol.legal-steps {
    display: grid;
    gap: 12px;
    counter-reset: step;
  }
  .legal-steps > li {
    counter-increment: step;
    padding-left: 36px;
  }
  .legal-steps > li::before {
    content: counter(step);
    top: 0.2em;
    left: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    background: var(--color-accent);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .legal-lead {
    display: grid;
    gap: 12px;
    margin-top: 16px;
  }
  .legal-note {
    margin-top: 8px;
    padding: 16px 18px;
    border-radius: var(--radius-card);
    background: #f4f6fb;
  }
  .legal-sheet a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .legal-draft {
    margin-top: 24px;
    padding: 16px 18px;
    border-radius: var(--radius-card);
    background: #f4f6fb;
    color: #3b445a;
  }

  @media (max-width: 1080px) {
    .legal-in {
      grid-template-columns: minmax(0, 1fr);
      gap: 28px;
    }
    .legal-nav {
      position: static;
      max-height: none;
    }
    .legal-sheet {
      padding: 40px 28px 48px;
    }
  }
  @media (max-width: 560px) {
    .legal-sheet {
      padding: 28px 18px 36px;
    }
    .legal-sheet::before,
    .legal-sheet::after {
      display: none;
    }
  }

  /* На печать — только текст документа: шапка, подвал и навигация не нужны, лист без теней */
  @media print {
    .top,
    .foot,
    .legal-nav,
    .skip {
      display: none !important;
    }
    .legal {
      padding: 0;
      background: #ffffff;
    }
    .legal-in {
      display: block;
    }
    .legal-sheet {
      padding: 0;
      box-shadow: none;
    }
    .legal-sheet::before,
    .legal-sheet::after {
      display: none;
    }
  }
}