/* anyskills.ru — ЯЗЫК КАБИНЕТА, перенесён 03.09.2026.
   Решение владельца: сайт и кабинет в одном стиле, цвета знака «Ступень»
   (чернила #0a0f17 и лайм #c1f742), синего нет. Значения взяты из
   static/brand.css кабинета, а не подобраны: тот же шрифт Manrope, та же
   светлая поверхность #f5f5f8, те же скругления. Разбор и выбор —
   site/дизайн/index.html (четвёртый заход) и site/дизайн/sborka.html.

   Предыдущий дизайн «Поток» (25.08) снят вместе с его синим #335eea.
   Что от него осталось: устройство файла, классы разметки и правила
   про полосу прокрутки и растяжку полос — они не про цвет.

   ⚠️ ЛАЙМ НЕ ГОДИТСЯ ДЛЯ ТЕКСТА НА СВЕТЛОМ: контраст к белому 1.4.
   Поэтому акцентов ДВА, и путать их нельзя:
     --акцент        заливка: кнопки, плашки, маркер под словом. На нём
                     текст чернилами (--акцент-на), контраст 15+.
     --акцент-текст  ссылки и цветные слова на светлом: тёмный лайм
                     #567312, 5.3 к белому (тот же --brand-lime-deep
                     кабинета). В тёмной теме оба — сам лайм.
   Правишь цвет — меряй заново, это правило файла с первого дня. */

/* Шрифт лежит у нас, те же три файла, что в кабинете
   (static/vendor/fonts). font-display: swap — текст виден сразу
   запасным шрифтом, невидимый текст на медленной сети хуже некрасивого. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Поверхности: страница как в кабинете, карточки и полосы белые */
  --фон:        #f5f5f8;
  --фон-мягкий: #ffffff;   /* светлая секция и карточки */
  --фон-серый:  #eceef3;   /* приглушённая поверхность */
  --рамка:      #e4e5ea;

  /* Текст: три уровня */
  --текст:      #1a1f28;   /* 15.6 на #f5f5f8 */
  --текст-тише: #5f6675;   /* 5.5 */
  --текст-слабо:#6b7280;   /* 4.5 */

  /* Акценты, см. шапку файла */
  --акцент:       #c1f742;
  --акцент-на:    #0a0f17;
  --акцент-тень:  #a9e01c;   /* наведение: темнее, а не светлее, на светлом фоне */
  --акцент-текст: #567312;
  --акцент-тьма:  #567312;
  --акцент-мягк:  #eef9d3;
  --акцент-едва:  #f6fce6;
  --чернила:      #0a0f17;
  --чернила-текст:#e8eaf0;
  --чернила-тише: #c4c6cf;
  --слабо:        #b34a47;   /* строки «нет» в таблицах сравнения */

  /* Шрифт и шкала — кабинета */
  --шрифт: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, "Helvetica Neue", Arial, sans-serif;
  --ш-база: 1.0625rem;
  --ш-лид:  1.25rem;
  --ш-h1:   3.4rem;
  --ш-h2:   2.25rem;
  --ш-h3:   1.25rem;
  --вес-заголовка: 800;
  --разрядка-загл: -.02em;
  --ряд: 1.6;

  /* Радиусы и тени: 8/10/20 кабинета, тень подкрашена чернилами */
  --радиус:     .625rem;
  --радиус-бол: 1.25rem;
  --тень-карта: 0 1px 2px rgba(10,15,23,.04), 0 12px 32px -16px rgba(10,15,23,.18);
  --тень-выше:  0 .5rem 1.5rem rgba(10,15,23,.08);
  --тень-акцент:0 .5rem 1.25rem rgba(10,15,23,.10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --фон:        #0a0f17;
    --фон-мягкий: #121a26;
    --фон-серый:  #1a2432;
    --рамка:      rgba(255,255,255,.08);
    --текст:      #e8eaf0;
    --текст-тише: #c4c6cf;
    --текст-слабо:#9aa3b5;
    --акцент:       #c1f742;
    --акцент-на:    #0a0f17;
    --акцент-тень:  #d3ff5c;
    --акцент-текст: #c1f742;
    --акцент-тьма:  #c1f742;
    --акцент-мягк:  #1d2a12;
    --акцент-едва:  #141c10;
    --чернила:      #121a26;
    --слабо:        #ff8a87;
    --тень-карта: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }

/* Обрезка ставится на html, а НЕ только на body: прокруткой страницы
   заведует корневой элемент, и `clip` на body её не унимает — проверено,
   документ остался шире окна на те же семь пикселей. */
html { overflow-x: clip; }

body {
  margin: 0;
  /* ⚠️ БЕЗ ЭТОГО СТРАНИЦА ЕЗДИТ ВБОК. Синий герой растянут во всю ширину
     приёмом `50% - 50vw`, а `100vw` считает окно ВМЕСТЕ с полосой
     прокрутки — она шире содержимого ровно на её толщину. Замерено:
     документ 369 при окне 362, то есть семь пикселей вправо.

     `clip`, а не `hidden`: hidden делает body контейнером прокрутки
     и ломает `position: sticky` у всего, что внутри. clip просто режет. */
  overflow-x: clip;
  background: var(--фон);
  color: var(--текст);
  font: var(--ш-база)/var(--ряд) var(--шрифт);
  -webkit-font-smoothing: antialiased;
}

/* 1140 пикселей — полоса макета. Шире прежних 992: при новом кегле
   текста строки иначе получаются короткими и рваными. */
main, .шапка, .подвал { max-width: 71.25rem; margin: 0 auto; padding: 0 1.25rem; }

/* ── шапка ── */
/* Сетка, а не гибкая строка. На гибкой строке двери переносились на
   вторую строку и повисали в пустоте, стоило меню чуть подрасти: перенос
   решал браузер, и выглядело это поломкой, а не замыслом. В сетке места
   у каждого свои — логотип слева, меню посередине, двери справа, — и
   меню переносится ВНУТРИ своей колонки, никого не сдвигая. */
.шапка {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; column-gap: 1rem; row-gap: .75rem;
  padding-top: 1.25rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--рамка);
}
.лого { font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; color: var(--текст); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.лого .знак { flex: none; }
.шапка nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.шапка nav a { color: var(--текст-тише); text-decoration: none; }
.шапка nav a:hover, .шапка nav a:focus-visible { color: var(--текст); }
.шапка nav a.тек { color: var(--текст); font-weight: 600; }

/* ── двери в продукт ──
   Прижаты вправо: слева читают «о чём сайт», справа делают. Разводить
   ученика и школу приходится ЯВНО — у них разные кабинеты и разные
   сессии, и одна кнопка «Войти» на двоих отправила бы ученика на форму
   сотрудника, где его почта не подойдёт. */
.двери {
  display: flex; align-items: center;
  gap: .625rem; flex-wrap: wrap;
}
.двери a { color: var(--текст-тише); text-decoration: none;
           font-size: .9375rem; }
.двери a:hover, .двери a:focus-visible { color: var(--текст); }
/* ⚠️ Кнопка в шапке ГАСИТ общие правила `.кнопка`, а не наследует их.
   Общая рассчитана на призыв посреди страницы: отступ сверху, крупный
   кегль и густая тень. В шапке от этого она разбухала и висела ниже
   строки меню — видно было на снимке. */
.двери a.кнопка {
  margin-top: 0; padding: .5rem 1rem;
  border-radius: var(--радиус); font-size: .9375rem; font-weight: 600;
  background: var(--акцент); color: var(--акцент-на);
  box-shadow: none;
}
.двери a.кнопка:hover, .двери a.кнопка:focus-visible {
  background: var(--акцент-тень); color: var(--акцент-на);
}
/* На узком экране порядок меняется: вверху логотип и двери, меню под
   ними. Двери важнее меню — за ними приходят делать, а не читать. */
@media (max-width: 52rem) {
  .шапка { grid-template-columns: auto 1fr; }
  .шапка nav { grid-column: 1 / -1; grid-row: 2; }
  .двери { justify-self: end; }
}
/* Совсем узко — двери в строку под логотипом, во всю ширину: в углу
   телефона три ссылки подряд не помещаются и лезут друг на друга. */
@media (max-width: 30rem) {
  .шапка { grid-template-columns: 1fr; }
  .двери { justify-self: start; grid-row: 2; }
  .шапка nav { grid-row: 3; }
}
.двери-внизу { margin-top: .5rem; }
.двери-внизу a { color: var(--текст-тише); }

/* ── содержание ── */
h1, h2, h3 { font-weight: var(--вес-заголовка);
             letter-spacing: var(--разрядка-загл); }
h1 { font-size: var(--ш-h1); line-height: 1.15; margin: 0 0 1rem;
     /* Перенос по смыслу, а не по краю: без этого «онлайн-школ»
        разрывалось на «онлайн-» и «школ», и заголовок читался как
        опечатка. balance выравнивает строки по длине. */
     text-wrap: balance; max-width: 20ch; }
h2 { font-size: var(--ш-h2); line-height: 1.2; margin: 3.5rem 0 1rem; }
h3 { font-size: var(--ш-h3); line-height: 1.4; margin: 2rem 0 .5rem; }
/* На телефоне 52 пикселя в заголовке — это два слова в строку и полэкрана
   под них. Уменьшаем, а не переносим: макет рассчитан на широкий экран. */
@media (max-width: 40rem) {
  :root { --ш-h1: 2.25rem; --ш-h2: 1.75rem; --ш-лид: 1.125rem; }
}
.лид { font-size: var(--ш-лид); color: var(--текст-тише); max-width: 42rem; }
/* ═══ СИНИЙ ГЕРОЙ ═══════════════════════════════════════════════════
   Главный приём макета: цветная плита во всю ширину и косой срез снизу.

   Во всю ширину при том, что содержимое сидит в полосе 1140, — приёмом
   с отрицательными полями: `50% - 50vw` вытягивает блок до краёв окна
   и не трогает разметку. Иначе пришлось бы выносить герой из <main>,
   то есть править шаблон ради оформления.

   ⚠️ Срез рисуется РАМКОЙ, а не картинкой и не SVG. Прозрачная рамка
   в 100vw шириной даёт ровный диагональный клин, который сам тянется
   за шириной окна; картинку пришлось бы масштабировать, а SVG — тащить
   отдельным файлом ради одной полоски. */
.герой { padding: 3rem 0 1rem; }
.герой.синий {
  position: relative;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 5rem calc(50vw - 50% + 1.25rem) 6rem;
  /* Было синим градиентом «Потока». Чернила и лайм — цвета знака. */
  background: var(--чернила);
  color: var(--чернила-текст);
  overflow: hidden;
}
.герой.синий h1 { color: #fff; max-width: 24ch; }
.герой.синий .лид { color: var(--чернила-тише); max-width: 46ch; }
.герой.синий .лид b { color: #fff; }
.герой.синий .мелко { color: var(--чернила-тише); }
.герой.синий .мелко a { color: var(--акцент); }
.герой.синий .кнопка { background: var(--акцент); color: var(--акцент-на); box-shadow: none; }
.герой.синий .кнопка:hover { background: var(--акцент-тень); }
.герой.синий::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  border-style: solid; border-width: 0 0 3.5rem 100vw;
  border-color: transparent transparent var(--фон) transparent;
}
@media (max-width: 40rem) {
  .герой.синий { padding: 3rem calc(50vw - 50% + 1.25rem) 5rem; }
  .герой.синий::after { border-bottom-width: 2rem; }
}
section { margin-bottom: 2rem; }

/* ═══ ТРИ ШАГА С ЦИФРАМИ ═════════════════════════════════════════════
   Третий приём макета. Тот же список, что был нумерованным `<ol>`, но
   в три колонки и с крупной цифрой в круге.

   Зачем менять работающий список: на длинной странице нумерованный
   список из трёх пунктов не читается как ЭТАПЫ — он читается как ещё
   один абзац с точками. Цифра в круге сообщает «шагов три, ты на первом»
   раньше, чем человек начнёт читать.

   Разметка остаётся `<ol>` и `<li>`, а не превращается в набор дивов:
   это по-прежнему упорядоченный список, и читалке для незрячих его надо
   объявить именно так. Цифра рисуется счётчиком, а не вписана руками —
   вставишь шаг посередине, и нумерация не разъедется. */
.шаги { list-style: none; counter-reset: шаг; padding: 0; margin: 2.5rem 0 0;
        display: grid; gap: 2.5rem; grid-template-columns: repeat(3, 1fr); }
.шаги li { counter-increment: шаг; margin: 0; text-align: center; }
.шаги li::before {
  content: counter(шаг);
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem;
  margin: 0 auto 1.25rem; border-radius: 999px;
  background: var(--акцент); color: var(--акцент-на);
  font-size: 1.375rem; font-weight: 600;
  box-shadow: var(--тень-акцент);
}
.шаги b { display: block; font-size: var(--ш-h3); font-weight: 600;
          letter-spacing: var(--разрядка-загл); margin-bottom: .5rem; }
.шаги p { margin: 0 auto; max-width: 22rem; color: var(--текст-тише);
          font-size: .9375rem; }
/* На телефоне три колонки превращаются в три полосы шириной в палец:
   заголовок шага переносится по слогам. Ставим в столбец. */
@media (max-width: 46rem) {
  .шаги { grid-template-columns: 1fr; gap: 2rem; }
}

/* ═══ РИТМ: ПОЛОСЫ ВО ВСЮ ШИРИНУ ═════════════════════════════════════
   Второй приём макета после синего героя. Длинная страница без него
   читается одним полотном: глазу не за что зацепиться, и разделы
   сливаются.

   Ставится РУКАМИ на выбранные разделы, а не через `nth-of-type`.
   Автоматическое чередование заманчиво и здесь неверно: у нас разделы
   разной величины, и полоса вокруг короткого в три строки выглядит
   не ритмом, а случайной заливкой. Выбирает человек.

   Приём растяжки тот же, что у героя, и та же оговорка: он работает
   только потому, что на html стоит `overflow-x: clip` — без него
   страница едет вбок на ширину полосы прокрутки. */
main > section.полоса {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-bottom: 0;
  padding: 3.5rem calc(50vw - 50% + 1.25rem);
  background: var(--фон-мягкий);
  border-top: 1px solid var(--рамка);
  border-bottom: 1px solid var(--рамка);
}
/* Первый заголовок внутри полосы не отбивается сверху: у h2 отступ
   3.5rem, и вместе с полем полосы получалось семь сантиметров пустоты. */
main > section.полоса > :first-child { margin-top: 0; }
/* Полоса сама себе отступ, соседям он не нужен. */
main > section.полоса + section { margin-top: 2rem; }
@media (max-width: 40rem) {
  main > section.полоса { padding: 2.5rem calc(50vw - 50% + 1.25rem); }
}
ul, ol { max-width: 44rem; padding-left: 1.25rem; }
li { margin-bottom: 0.5rem; }
a { color: var(--акцент-текст); }

.козыри { list-style: none; padding: 0; margin: 1.5rem 0; }
.козыри li { padding-left: 1.5rem; position: relative; }
.козыри li::before { content: "—"; position: absolute; left: 0; color: var(--акцент-текст); }

.цена { font-size: 1.473rem; font-weight: 500; margin: 1.5rem 0 0; }
.пометка {
  font-size: 0.8125rem; color: var(--текст-тише);
  border: 1px solid var(--рамка); border-radius: 4px;
  padding: 0.125rem 0.5rem; display: inline-block;
}

/* ── таблица сравнения ── */
table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; }
th, td { text-align: left; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--рамка); }
th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--текст-тише); }
tr.слабо td { color: var(--слабо); }

/* ── врезка призыва: одна на весь сайт, см. config.призыв() ── */
.призыв {
  background: var(--чернила); color: var(--чернила-текст);
  border-radius: var(--радиус-бол);
  padding: 2.5rem;
  margin: 4rem 0;
}
.призыв p { color: var(--чернила-тише); }
.призыв h2 { margin-top: 0; font-size: 1.75rem; color: #fff; }
/* Кнопка из макета: плотнее, с тенью цвета самой кнопки — она и делает
   её выпуклой, без рамок и без градиента. */
.кнопка {
  display: inline-block; margin-top: 1rem;
  background: var(--акцент); color: var(--акцент-на);
  padding: .8125rem 1.75rem; border-radius: var(--радиус);
  text-decoration: none; font-weight: 600; font-size: var(--ш-база);
  box-shadow: var(--тень-акцент);
  transition: background .15s ease, transform .15s ease;
}
.кнопка:hover { background: var(--акцент-тень); }
/* Нажатие должно чувствоваться: 0.98 незаметно глазом и заметно руке. */
.кнопка:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .кнопка { transition: none; }
  .кнопка:active { transform: none; }
}

/* Фокус с клавиатуры виден везде — требование направления 9. */
a:focus-visible, .кнопка:focus-visible {
  outline: 2px solid var(--акцент-текст); outline-offset: 2px; border-radius: 3px;
}

/* ── подвал ── */
.подвал {
  border-top: 1px solid var(--рамка);
  margin-top: 4rem; padding-top: 1.5rem; padding-bottom: 3rem;
  color: var(--текст-тише); font-size: 0.8125rem;
}
.сосед { margin-bottom: 0; }

@media (max-width: 40rem) {
  .герой { padding-top: 2rem; }
}

/* ── доказательство: числа своей школы ── */
.доказательство {
  background: var(--фон-мягкий);
  border: 1px solid var(--рамка);
  border-radius: var(--радиус-бол);
  box-shadow: var(--тень-карта);
  padding: 2rem 2.25rem;
  margin: 3rem 0;
}
.глаз {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--текст-тише); margin: 0;
}
.числа {
  list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem 2.25rem;
  padding: 0; margin: 1rem 0 1.25rem;
}
.числа li { margin: 0; color: var(--текст-тише); font-size: 0.875rem; }
.числа b { display: block; font-size: 2rem; font-weight: 600;
            letter-spacing: var(--разрядка-загл); color: var(--текст); }
.доказательство p:last-child { margin-bottom: 0; }

/* ── «чего у нас нет»: цветом, а не мелким шрифтом внизу ── */
/* Крестик — для ЧЕСТНЫХ СПИСКОВ СЛАБОСТЕЙ: «где мы слабее» в сравнениях
   и «формул мы не умеем» на странице по математике. Там он по делу:
   узнать про отсутствующее до оплаты дешевле для обеих сторон. */
.слабо-список, .скоро-список { list-style: none; padding: 0; }
.слабо-список li, .скоро-список li {
  padding-left: 1.75rem; position: relative; margin-bottom: 0.875rem;
  max-width: 44rem;
}
.слабо-список li::before {
  content: "✕"; position: absolute; left: 0; top: 0;
  color: var(--слабо); font-size: 0.875rem;
}

/* ⚠️ У «СКОРО» СВОЙ ЗНАК, И ЭТО НЕ ПРИДИРКА. После переименования раздела
   «Чего у нас нет» в «Скоро» список остался на прежнем классе, и рядом
   с обещаниями стоял КРАСНЫЙ КРЕСТ — знак «этого нет». Смысл получался
   обратный написанному. В коде это было незаметно, поймано на снимке
   готовой страницы. */
.скоро-список li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: var(--акцент-текст); font-weight: 600;
}

/* ── сетка тарифов ── */
.сетка-тарифов {
  display: grid; gap: 1rem; margin: 2rem 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.тариф {
  border: 1px solid var(--рамка); border-radius: 8px;
  padding: 1.5rem 1.25rem; background: var(--фон-мягкий);
  /* Колонкой, чтобы подпись «кому» прижималась к низу: у бесплатного тарифа
     нет строки про год, и без этого списки в карточках стоят на разной
     высоте — сетка выглядит съехавшей. */
  display: flex; flex-direction: column;
}
/* Рекомендуемый выделен рамкой, а не масштабом: карточка крупнее соседних
   ломает сетку на узком экране, а рамка читается одинаково всюду. */
.тариф.рекомендуем { border-color: var(--акцент-текст); border-width: 2px; }
.тариф h3 { margin: 0.5rem 0 0; font-size: 1.125rem; font-weight: 600; }
.тариф .цена { font-size: 1.695rem; margin: 0.5rem 0 0; }
.тариф .цена span { font-size: 0.875rem; color: var(--текст-тише); font-weight: 400; }
.тариф ul { list-style: none; padding: 0; margin: 1rem 0 0; font-size: 0.875rem; }
.тариф li { margin-bottom: 0.375rem; color: var(--текст-тише); }
.тариф .кому {
  font-size: 0.8125rem; color: var(--текст-тише); margin: 1rem 0 0;
  margin-top: auto;
  border-top: 1px solid var(--рамка); padding-top: 0.75rem;
}
.метка {
  display: inline-block; margin: 0; font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--акцент-на); background: var(--акцент);
  padding: 0.125rem 0.5rem; border-radius: 999px;
}

.мелко { font-size: 0.8125rem; color: var(--текст-тише); }
.герой .мелко { margin-top: 1rem; }
h3 { font-size: 1.0625rem; font-weight: 600; margin: 1.75rem 0 0.5rem; }

/* ═══ СКРИНШОТЫ КАБИНЕТА (02.09.2026) ═══════════════════════════════════
   Первое изображение продукта на сайте — до этого дня единственным <img>
   на всех страницах был пиксель Метрики. Рамка и тень — те же, что у
   карточек тарифов: снимок должен читаться как окно, а не как картинка
   в тексте. Ширина и высота заданы в разметке, чтобы страница не прыгала
   при загрузке. */
.экран { margin: 2rem 0; }
.экран img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--рамка); border-radius: var(--радиус);
  box-shadow: var(--тень-карта); background: var(--фон-серый);
}
.экран figcaption { margin-top: .625rem; font-size: .875rem; color: var(--текст-тише); }

/* Таблица шире экрана телефона прокручивается внутри себя, а не двигает
   страницу: на html стоит overflow-x: clip, и без этой обёртки правые
   колонки просто отрезало бы. */
.прокрутка { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.прокрутка table { min-width: 40rem; }
tr.мы td { font-weight: 600; background: var(--акцент-едва); }

/* ═══ КАЛЬКУЛЯТОР ═══════════════════════════════════════════════════ */
.калькулятор {
  background: var(--фон-мягкий); border: 1px solid var(--рамка);
  border-radius: var(--радиус-бол); padding: 2rem; margin: 2.5rem 0;
}
.калькулятор h2 { margin-top: 0; }
.калькулятор-форма { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin: 1.5rem 0; }
.калькулятор-форма label { display: flex; flex-direction: column; gap: .375rem; font-size: .9375rem; color: var(--текст-тише); }
.калькулятор-форма input, .демо-тест input[type="text"], .демо-тест select {
  font: inherit; color: var(--текст); background: var(--фон-мягкий);
  border: 1px solid var(--рамка); border-radius: var(--радиус);
  padding: .625rem .75rem; min-height: 2.75rem;
}
.калькулятор-форма input:focus-visible, .демо-тест input:focus-visible, .демо-тест select:focus-visible {
  outline: 2px solid var(--акцент-текст); outline-offset: 2px;
}
@media (max-width: 46rem) { .калькулятор-форма { grid-template-columns: 1fr; } .калькулятор { padding: 1.25rem; } }

/* ═══ ДЕМО-ТЕСТ ═════════════════════════════════════════════════════ */
.демо-тест fieldset {
  border: 1px solid var(--рамка); border-radius: var(--радиус-бол);
  padding: 1.25rem 1.5rem; margin: 0 0 1.25rem; max-width: 44rem;
}
.демо-тест legend { font-weight: 600; padding: 0 .5rem; }
.демо-тест fieldset label { display: block; margin: .5rem 0; min-height: 1.75rem; }
.демо-тест fieldset input[type="radio"], .демо-тест fieldset input[type="checkbox"] { width: 1.125rem; height: 1.125rem; margin-right: .5rem; vertical-align: -.125rem; accent-color: var(--акцент); }
.демо-тест fieldset.верно { border-color: #2e8b57; }
.демо-тест fieldset.неверно { border-color: var(--слабо); }
.демо-тест .разбор { margin: .75rem 0 0; font-size: .9375rem; color: var(--текст-тише); }
.демо-тест .демо-итог { margin-left: 1rem; font-weight: 600; }
.демо-тест .кнопка { margin-top: 0; }
.демо-история { background: var(--фон-мягкий); border: 1px solid var(--рамка); border-radius: var(--радиус-бол); padding: 1.25rem 1.5rem; max-width: 44rem; }
.демо-история h3 { margin-top: 0; }
button.ссылка { font: inherit; background: none; border: 0; padding: 0; color: var(--акцент-текст); text-decoration: underline; cursor: pointer; }

/* Хаб сравнений: разделы по конкуренту отбиты сильнее обычных,
   якорь не прячется под липкой шапкой. */
.сравнение { scroll-margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--рамка); }
.сравнение h3 { margin-top: 1.75rem; }

/* Подвал: реквизиты. Мелко, но на каждой странице — поисковик и человек
   должны видеть, кто отвечает за сайт, не переходя на /kontakty/. */
.реквизиты { font-size: .8125rem; color: var(--текст-тише); margin-top: .75rem; }

/* ═══ ГЛАВНАЯ В ЯЗЫКЕ КАБИНЕТА (03.09.2026) ══════════════════════════
   Раскладка собрана из site/дизайн/sborka.html и перенесена сюда как
   классы, чтобы главная жила под теми же линтерами, что и остальные
   страницы. Снимки кабинета настоящие, сняты с локальной копии
   (assets/img/screens/kab-*.webp). */
mark { background: linear-gradient(transparent 55%, var(--акцент) 55%, var(--акцент) 92%, transparent 92%); color: inherit; padding: 0 .08em; }
.герой.кабинет { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; padding: 2.5rem 0 1rem; }
.герой.кабинет h1 { max-width: none; }
.герой.кабинет .экран { margin: 0; }
.герой.кабинет .кнопка { margin-top: 1.5rem; padding: 1rem 1.75rem; }
@media (max-width: 52rem) { .герой.кабинет { grid-template-columns: 1fr; gap: 2rem; } }
.две { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 52rem) { .две { grid-template-columns: 1fr; gap: 2rem; } }
.две .экран { margin: 0; }
.список-внутри { list-style: none; padding: 0; margin: 0; max-width: none; columns: 2; column-gap: 2.5rem; }
.список-внутри li { break-inside: avoid; padding: .75rem 0; border-top: 1px solid var(--рамка); margin: 0; }
.список-внутри b { display: block; margin-bottom: .125rem; }
.список-внутри span { color: var(--текст-тише); font-size: .9375rem; }
@media (max-width: 40rem) { .список-внутри { columns: 1; } }
/* Тёмная полоса: единственное на странице, чего нет ни у кого, поэтому
   единственное место, где страница меняет цвет. */
main > section.полоса.чернила { background: var(--чернила); color: var(--чернила-текст); border-color: var(--чернила); }
main > section.полоса.чернила h2 { color: #fff; }
main > section.полоса.чернила h2 em { font-style: normal; color: var(--акцент); }
main > section.полоса.чернила .лид, main > section.полоса.чернила .мелко { color: var(--чернила-тише); }
main > section.полоса.чернила a { color: var(--акцент); }
main > section.полоса.чернила p b { color: #fff; }
main > section.полоса.чернила .две { align-items: center; }
.сравнение-две { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.5rem; }
@media (max-width: 46rem) { .сравнение-две { grid-template-columns: 1fr; } }
.карточка { background: var(--фон-серый); border-radius: var(--радиус-бол); padding: 1.75rem; }
.карточка.лайм { background: var(--акцент-мягк); }
.карточка h3 { margin-top: 0; display: flex; align-items: center; gap: .6rem; }
.карточка h3 .пометка { margin-left: auto; border: 0; background: var(--фон-мягкий); }
.карточка p { color: var(--текст-тише); }
.карточка p:last-child { margin-bottom: 0; }
/* Шаги: вместо кругов с цифрами линия сверху с лаймовой чертой, как в сборке */
.шаги.линии li { text-align: left; padding-top: 1.25rem; border-top: 2px solid var(--рамка); position: relative; }
.шаги.линии li::before { content: ""; position: absolute; top: -2px; left: 0; width: 3rem; height: 2px; background: var(--акцент); border-radius: 0; box-shadow: none; margin: 0; }
.шаги.линии p { margin: 0; max-width: none; }
.скоро-плитка { background: var(--фон-серый); border-radius: var(--радиус-бол); padding: 1.75rem; }
.скоро-плитка h2 { margin: 0 0 1rem; font-size: 1.25rem; }
.скоро-плитка .скоро-список { columns: 2; column-gap: 3rem; max-width: none; margin: 0; }
.скоро-плитка .скоро-список li { break-inside: avoid; font-size: .9375rem; padding-left: 0; }
.скоро-плитка .скоро-список li::before { content: none; }
@media (max-width: 40rem) { .скоро-плитка .скоро-список { columns: 1; } }
/* Кому подходит: 16 сегментов, снятых с посадочных конкурентов */
.сегменты { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
@media (max-width: 62rem) { .сегменты { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 44rem) { .сегменты { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 26rem) { .сегменты { grid-template-columns: 1fr; } }
.сегмент { display: block; background: var(--фон-мягкий); border: 1px solid var(--рамка); border-radius: var(--радиус-бол); padding: 1.25rem; color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
a.сегмент:hover { border-color: var(--акцент-текст); transform: translateY(-2px); }
.сегмент-знак { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; background: var(--акцент); color: var(--акцент-на); align-items: center; justify-content: center; margin-bottom: .9rem; }
.сегмент b { display: block; font-size: 1.0625rem; margin-bottom: .3rem; }
.сегмент > span:last-child { color: var(--текст-тише); font-size: .9rem; line-height: 1.45; display: block; }
a.сегмент b::after { content: " →"; color: var(--акцент-текст); }
@media (prefers-reduced-motion: reduce) { a.сегмент:hover { transform: none; } }

/* ═══ /ai/: ПОДКЛЮЧЕНИЕ СВОЕГО ИИ (08.09.2026) ═══════════════════════════
   Карточки клиентов на общей .карточка, команды на чернилах, как знак.
   Кнопка в карточке гасит тень и отступ общей .кнопка по той же причине,
   что и в шапке: общая рассчитана на призыв посреди страницы. */
.ii-сетка { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.ii-сетка.две-кол { grid-template-columns: 1fr 1fr; }
@media (max-width: 52rem) { .ii-сетка, .ii-сетка.две-кол { grid-template-columns: 1fr; } }
.ii-плашка { margin-top: 1rem; background: var(--акцент-мягк); border-color: transparent; color: var(--текст); }
.ii-ключ { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin: 1rem 0 .5rem; }
.ii-ключ span { font-weight: 600; }
.ii-ключ input {
  font: inherit; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .9375rem; padding: .625rem .875rem; flex: 1 1 18rem; min-width: 0;
  border: 1px solid var(--рамка); border-radius: var(--радиус); background: var(--фон-мягкий);
  color: var(--текст);
}
.ii-ключ input:focus-visible { outline: 2px solid var(--акцент); outline-offset: 1px; }
.карточка .пример { display: block; margin-top: .875rem; font-style: normal; font-size: .9375rem;
  color: var(--текст); background: var(--фон-мягкий); border-radius: var(--радиус); padding: .625rem .875rem; }
.карточка .кнопка { margin-top: .75rem; padding: .625rem 1.25rem; font-size: .9375rem; box-shadow: none; }
.карточка details { margin-top: .875rem; font-size: .9375rem; }
.карточка summary { cursor: pointer; color: var(--акцент-текст); }
.код {
  margin: .75rem 0 0; padding: .875rem 1rem; border-radius: var(--радиус);
  background: var(--чернила); color: var(--чернила-текст);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8125rem; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}
.код.длинный { max-height: 28rem; overflow-y: auto; }
.код-кнопка {
  font: inherit; font-size: .75rem; font-weight: 600; margin-top: .5rem; cursor: pointer;
  background: var(--фон-мягкий); color: var(--текст); border: 1px solid var(--рамка); border-radius: 999px; padding: .25rem .75rem;
}
.код-кнопка:hover, .код-кнопка:focus-visible { border-color: var(--текст-тише); }