/* ГЛАВНАЯ anyskills.ru. ПЕРЕСОБРАНА 23.09.2026 ПО ПРОСЬБЕ ВЛАДЕЛЬЦА:
   «стили можем оставить, но дизайн и тексты не нравятся».

   Что оставлено от прежней главной (решения 11.09 и 13.09.2026):
   светлый холодный фон, белые панели с тенью, циан заливкой на кнопке,
   тёмный циан для текста и рисунка, чернила лестницей плотности,
   Manrope и Plex Mono. Шапка, подвал и липкая кнопка телефона
   описаны здесь заново, потому что main.css на главной не грузится,
   а разметка у них общая со всем сайтом (build.ШАБЛОН).

   Что заменено целиком: каркас из плиток с номерами, надзаголовки
   капслоком над каждым разделом, моноширинные «замеры» с цветной
   чертой слева. Всё это читалось как отчёт, а не как предложение.

   Новый каркас держится на одном предмете и одном человеке.
   Предмет: счёт школы за месяц, где пять подписок зачёркнуты и осталась
   одна строка. Человек: одна ученица, которую знают уроки, куратор,
   видео и бот. Дальше страница только доказывает эти две вещи
   настоящими кадрами кабинета.

   ПРАВИЛА, КОТОРЫЕ ЗДЕСЬ НЕЛЬЗЯ НАРУШАТЬ:

   1. Состояние покоя всегда конечное и видимое. Анимация ведёт
      К нему, а не от него: если скрипт не доехал или человек просил
      меньше движения, страница стоит готовой.
   2. Движется три вещи: счёт на первом экране (один раз, при загрузке),
      строки карточки ученицы (один раз, при появлении) и кнопки
      под рукой. Одинакового «въезда» у каждого раздела нет нарочно.
   3. backdrop-filter только там, где под элемент уезжает содержимое:
      липкая шапка и нижняя полоса телефона.
   4. Кадр кабинета показывается 1:1 или крупнее 0,7. Не влезает,
      значит режется, а не уменьшается (примитив `.кадр`).
   5. Фотографии со стоков стоят как обстановка, а не как люди-клиенты.
      Подписей «наш автор» и цитат рядом с ними нет и быть не может:
      лицензии Pexels и Unsplash прямо запрещают выдавать человека
      на снимке за того, кто рекомендует продукт. Источники:
      docs/landing/research/stock.md. */

/* ── шрифты ────────────────────────────────────────────────────────── */
@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; }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-500-cyr.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-500-lat.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Подгонка запасного шрифта обязательна: без неё подмена гарнитуры
   дёргает заголовок первого экрана на целую строку. */
@font-face { font-family: "Запасной"; src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 103%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }

:root {
  color-scheme: light;

  --фон:      #f3f5f9;
  --фон-2:    #e9eef5;   /* вторая ступень фона: полоса «как было» и подложки */
  --панель:   #ffffff;

  /* ⚠️ ЦИАНОВ ДВА, И ПУТАТЬ ИХ НЕЛЬЗЯ. Сам циан на светлом даёт 1,62:
     текстом и тонкой линией его нет. Заливкой под чернилами он живёт
     прекрасно (10,38). Для текста, линий и значков только --циан-т
     (4,91 к фону, 5,36 к белому). */
  --циан:     #00d4ff;
  --на-циане: #0d1020;
  --циан-т:   #0e7490;
  --циан-наведение: #00c2eb;
  --циан-мягкий: rgba(0,212,255,.14);  /* подсветка строки итога в счёте */

  /* Лестница чернил считана под фон и белую панель, ни одной ступени
     ниже 4,5 (прежний файл, история в git). */
  --т-1:  rgba(13,20,36,.95);
  --т-2:  rgba(13,20,36,.82);
  --т-3:  rgba(13,20,36,.78);
  --т-4:  rgba(13,20,36,.72);
  --т-5:  rgba(13,20,36,.66);

  --линия:   rgba(13,20,36,.10);
  --обводка: rgba(13,20,36,.12);
  --зачёрк:  rgba(13,20,36,.55);

  /* Тень с отступом и мягким краем, тонированная в тот же синеватый
     род, что и фон. Нулевой «ореол» без отступа был бы украшением,
     а здесь тень ставит панель над фоном: 1,10 по заливке не держит. */
  --тень:    0 1px 2px rgba(13,20,36,.05), 0 16px 36px -20px rgba(13,20,36,.28);
  --тень-выше: 0 2px 4px rgba(13,20,36,.06), 0 28px 56px -24px rgba(13,20,36,.36);

  --шрифт: "Manrope", "Запасной", system-ui, sans-serif;
  --моно:  "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Один масштаб скруглений на всю страницу: 8 у кнопок и мелочи,
     14 у окон и фотографий. Смешанные углы читаются как сборка
     из разных наборов. */
  --r: 8px;
  --r-окно: 14px;

  /* Отступ берётся только сверху, чтобы соседние не складывались. */
  --ст-связка: 48px;
  --ст-родня:  112px;
  --ст-тема:   152px;

  --выход: cubic-bezier(.23,1,.32,1);     /* сильный ease-out */
  --сдвиг: cubic-bezier(.77,0,.175,1);    /* движение по экрану */
}

* { box-sizing: border-box }
html { overflow-x: clip; -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--фон); color: var(--т-3);
  font: 400 17px/1.62 var(--шрифт);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* Поверхности, которые рисует браузер, тоже часть страницы. */
::selection { background: rgba(0,212,255,.32); color: var(--т-1) }
html { scrollbar-color: rgba(13,20,36,.28) transparent }
input, textarea { caret-color: var(--циан-т) }

img, video { max-width: 100%; height: auto; display: block }
/* У figure браузерный отступ 40 px по бокам: счёт и карточка ученицы
   из-за него были на 80 px уже, чем задано, и строки вылезали за край. */
figure { margin: 0 }
h1, h2, h3 { margin: 0; color: var(--т-1); font-weight: 700; letter-spacing: -.022em;
             text-wrap: balance }
h1 { font-size: 58px; line-height: 1.04; letter-spacing: -.03em }
h2 { font-size: 40px; line-height: 1.08 }
h3 { font-size: 21px; line-height: 1.25; font-weight: 650; letter-spacing: -.01em }
p  { margin: 0; text-wrap: pretty }
a  { color: var(--циан-т) }
ul, ol { margin: 0; padding: 0; list-style: none }
.ик { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }

main { display: block; max-width: 1328px; margin: 0 auto; padding: 0 24px }
main [id] { scroll-margin-top: 84px }

/* ── шапка ─────────────────────────────────────────────────────────── */
.шапка {
  position: sticky; top: 0; z-index: 100;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 32px; height: 64px;
  padding: 0 max(24px, calc(50% - 640px));
  background: rgba(243,245,249,.84);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--линия);
}
.лого { display: inline-flex; align-items: center; gap: 10px;
        color: var(--т-1); font-weight: 700; font-size: 19px;
        letter-spacing: -.02em; text-decoration: none }
/* Знак приходит из общего шаблона лаймовым; на циановой странице лайм
   читался бы чужой картинкой. CSS перебивает атрибут fill без второго SVG. */
.лого .знак { flex: none; width: 28px; height: 28px }
.лого .знак rect { fill: var(--циан) }
.лого .знак path { stroke: var(--на-циане) }
.лого .знак circle { fill: var(--на-циане) }
.шапка nav { display: flex; gap: 20px; flex-wrap: wrap }
.шапка nav a { color: var(--т-2); font-size: 15px; font-weight: 500; text-decoration: none }
.шапка nav a.тек { color: var(--т-1) }
.двери { display: flex; align-items: center; gap: 16px }
.двери a { color: var(--т-2); font-size: 15px; font-weight: 500; text-decoration: none }
.двери a.кнопка { height: 40px; padding: 0 16px; font-size: 15px }

/* ── кнопки ────────────────────────────────────────────────────────────
   Владелец просил анимацию кнопок. Движение здесь служит отклику,
   а не украшению: кнопка приподнимается под курсором, стрелка
   уходит вперёд на три пикселя (туда, куда ведёт кнопка), нажатие
   проседает на 3 процента. Всё на transform, всё короче 220 мс.
   Раз за загрузку по главной кнопке первого экрана проходит блик:
   он стартует, когда счёт уже зачёркнут, и переводит взгляд
   с вывода на действие. */
.кнопка {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 26px; border-radius: var(--r);
  background: var(--циан); color: var(--на-циане);
  font: 650 16px/1 var(--шрифт); text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(13,20,36,.08), 0 10px 22px -12px rgba(13,20,36,.35);
  transition: transform .18s var(--выход), box-shadow .22s var(--выход),
              background-color .16s ease;
}
.кнопка .ик { width: 18px; height: 18px; stroke-width: 2.2;
              transition: transform .22s var(--выход) }
.кнопка::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-110%);
}
.кнопка:active { transform: translateY(0) scale(.97); transition-duration: .08s }
.кнопка--крупная { height: 60px; padding: 0 30px; font-size: 17px }

.ссылка { color: var(--циан-т); text-decoration: underline;
          text-decoration-color: rgba(14,116,144,.45); text-underline-offset: 3px }

a:focus-visible, [tabindex]:focus-visible, video:focus-visible {
  outline: 2px solid var(--циан-т); outline-offset: 3px; border-radius: 4px;
}
.кнопка:focus-visible { outline: 2px solid var(--на-циане); outline-offset: -5px }

@media (hover: hover) and (pointer: fine) {
  .кнопка:hover { background: var(--циан-наведение); transform: translateY(-2px);
                  box-shadow: 0 2px 0 rgba(13,20,36,.06), 0 18px 30px -14px rgba(13,20,36,.42) }
  .кнопка:hover .ик { transform: translateX(3px) }
  .кнопка:active { transform: translateY(0) scale(.97) }
  .ссылка:hover { text-decoration-color: var(--циан-т) }
  .шапка nav a:hover, .двери a:not(.кнопка):hover, .подвал a:hover { color: var(--т-1) }
}

/* ── общие части раздела ───────────────────────────────────────────── */
.блок { margin-top: var(--ст-родня) }
.блок--тема { margin-top: var(--ст-тема) }
.голова { max-width: 760px; margin-bottom: 48px }
.голова h2 + p, h2 + .лид { margin-top: 18px }
.лид + .лид { margin-top: 14px }
.лид { font-size: 20px; line-height: 1.55; color: var(--т-2); max-width: 58ch }
.корпус { max-width: 64ch }
.корпус p + p { margin-top: 14px }
.мелко { font-size: 14px; line-height: 1.5; color: var(--т-4) }

/* ── примитив кадра кабинета ─────────────────────────────────────────
   Коробка с числовыми размерами, внутри снимок натуральной ширины,
   сдвинутый --x и --y. Один файл, ноль JS, ноль сдвига раскладки.
   max-width: 100% значит «не влезло, режем», а не «уменьшаем». */
.кадр {
  position: relative; overflow: hidden;
  width: var(--w); height: var(--h); max-width: 100%;
  border: 1px solid rgba(13,20,36,.14); border-radius: var(--r-окно);
  background: #fff; box-shadow: var(--тень);
}
.кадр img, .кадр video { position: absolute; left: var(--x, 0); top: var(--y, 0);
            width: var(--iw, 1280px); max-width: none; height: auto }
.кадр-рамка { margin: 0; min-width: 0; max-width: 100% }
.кадр-рамка figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.45;
                         color: var(--т-5); max-width: 60ch }

/* ═══ 1. ПЕРВЫЙ ЭКРАН ═════════════════════════════════════════════════ */
/* Заголовок во всю ширину в две строки: «Платформа для онлайн-школы /
   без склеек между сервисами». В колонке рядом с фото он ложился в четыре
   строки и спорил с фото за первый взгляд. Под ним слева текст и кнопка,
   справа ноутбук со счётом. */
.геро {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  grid-template-areas: "з з" "т с";
  column-gap: 56px; row-gap: 26px; align-items: start; padding: 36px 0 16px;
}
.геро h1 { grid-area: з; max-width: 16em; font-size: 60px }
.геро-текст { grid-area: т; padding-top: 6px }
.сцена { grid-area: с }
/* «онлайн-школы» не рвётся по дефису: половина слова на строке читается
   как опечатка, а это точная фраза, ради которой заголовок и написан. */
.цельно { white-space: nowrap }
.геро .лид { max-width: 32em }
.действия { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
            margin-top: 36px }
.геро .мелко { margin-top: 16px }

/* Сцена: настоящая фотография ноутбука с русской клавиатурой, на экране
   которой открыт наш кабинет (снимок кабинета вписан в экран по четырём
   углам, скрипт и замеры: docs/landing/research/visuals.md). Боковое
   меню кабинета и есть довод первого экрана: курсы, видео, ученики,
   боты и проверка в одном окне.

   Счёт лежит поверх правой нижней части экрана. Там таблица роликов,
   её не жалко; боковое меню слева остаётся открытым.

   Высота фото считается от ширины колонки через единицы контейнера:
   счёт привязан к доле высоты снимка, и поле снизу растёт ровно
   настолько, насколько счёт выходит за нижний край фото. */
.сцена { container-type: inline-size }
.сцена-поле { position: relative; padding-right: 44px;
              --фв: calc((100cqw - 44px) * 1071 / 1250);
              padding-bottom: 44px }
.фото { margin: 0; overflow: hidden; border-radius: var(--r-окно);
        background: var(--фон-2); box-shadow: var(--тень) }
.фото img { width: 100%; height: 100%; object-fit: cover }
.фото--геро { aspect-ratio: 1250 / 1071 }

/* ── счёт ──────────────────────────────────────────────────────────────
   Счёт свисает ниже фото на 44 px: зубцы отрыва лежат на фоне страницы,
   а не на тёмной клавиатуре, где их прозрачные просветы читались грязью.
   --счёт-в это его высота; её меряет glavnaya.js, а без скрипта берётся
   замер со сборки 23.09 (392 px на 1440). */
.счёт-обёртка { position: absolute; right: 0; top: calc(var(--фв) + 44px - var(--счёт-в, 392px)); width: 344px;
                filter: drop-shadow(0 22px 30px rgba(13,20,36,.22)) drop-shadow(0 2px 3px rgba(13,20,36,.08)) }
.счёт {
  --зуб: 14px;
  background: #fff; color: var(--т-1);
  padding: 22px 24px calc(22px + var(--зуб));
  border-radius: 10px 10px 0 0;
  /* Зубчатый отрыв снизу, как у настоящего чека: маска, а не картинка.
     Тень даёт обёртка через drop-shadow, потому что box-shadow маска
     обрезала бы вместе с краем. */
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--зуб) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--зуб) 100%;
}
.счёт-шапка { display: grid; gap: 2px; padding-bottom: 12px; margin-bottom: 6px;
              border-bottom: 1px dashed rgba(13,20,36,.22) }
.счёт-шапка b { font-size: 15px; font-weight: 700 }
.счёт-шапка span { font-size: 13px; line-height: 1.35; color: var(--т-5) }
.счёт li { display: flex; justify-content: space-between; align-items: baseline;
           gap: 14px; padding: 6px 0; font-size: 14.5px; line-height: 1.35 }
.счёт li i { font: 500 12.5px/1.3 var(--моно); font-style: normal; color: var(--т-5);
             white-space: nowrap }
/* Подпись строки в одну строку: перенесённая строка зачёркивалась
   между двумя строками, и черта читалась как подчёркивание. */
.счёт li span { white-space: nowrap }
.было li { position: relative; color: var(--т-4) }
/* Черта зачёркивания нарисована отдельным слоем, а не text-decoration:
   её можно вести слева направо на transform, и она не рвётся
   на пробелах между названием и «отдельно». */
.было li::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: 52%;
  height: 1.5px; background: var(--зачёрк); transform-origin: left center;
}
.итог { margin-top: 10px; padding-top: 12px; border-top: 1px dashed rgba(13,20,36,.22) }
.итог li:first-child { margin: 0 -10px; padding: 9px 10px; border-radius: 6px;
                       background: var(--циан-мягкий); font-weight: 650 }
.итог li:first-child i { color: var(--т-1); font-size: 14px }
.итог li i.ноль { color: var(--циан-т) }

/* ═══ 2. ОПРЕДЕЛЕНИЕ И РАЗДЕЛЫ ═══════════════════════════════════════
   Абзац-определение держит точную фразу «платформа для онлайн-школы»
   второй раз после заголовка: так её читает и поисковик, и человек,
   пролиставший первый экран. */
.определение { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--линия) }
.определение p { font-size: 21px; line-height: 1.55; color: var(--т-2); max-width: 62ch }
.определение p b { font-weight: 600; color: var(--т-1) }
.модули-ряд { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 40px }
/* Строка с перечнем, а не ряд кнопок: у пунктов нет ни рамки, ни заливки,
   нажимать тут нечего. */
.модули-ряд li { display: inline-flex; align-items: center; gap: 8px;
                 font-size: 14.5px; font-weight: 550; color: var(--т-2) }
.модули-ряд .ик { width: 17px; height: 17px; color: var(--циан-т) }
/* Полоска настоящих внутренних ссылок, только на узком окне: бургера
   в общей шапке пока нет, и без неё с телефона не ведёт ни один
   внутренний переход (заплатка прежней главной, осознанная). */
.разделы { display: none; gap: 18px; margin-top: 20px; font-size: 14px;
           overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none }
.разделы a { white-space: nowrap; padding: 8px 0; color: var(--т-2) }

/* ═══ 3. ОДНА УЧЕНИЦА ══════════════════════════════════════════════════
   Центр страницы. Слева мысль, справа карточка одного человека, какой
   её видит школа: курс, работа у куратора, видео, бот. Четыре строки
   из четырёх разделов кабинета, и все про неё одну. Это и есть
   «не миллион сервисов»: у школы один список людей. */
.ученица { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
           gap: 64px; align-items: center }
.карточка { background: #fff; border: 1px solid var(--обводка); border-radius: var(--r-окно);
            box-shadow: var(--тень-выше); overflow: hidden }
.карточка-шапка { display: flex; align-items: center; gap: 14px; padding: 20px 24px;
                  border-bottom: 1px solid var(--линия) }
.аватар { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
          background: #dff6fb; color: var(--циан-т); font-weight: 700; font-size: 16px; flex: none }
.карточка-шапка b { display: block; color: var(--т-1); font-size: 17px }
.карточка-шапка span { font-size: 13.5px; color: var(--т-5) }
.строки li { display: grid; grid-template-columns: 28px 36px minmax(0, 1fr); gap: 4px 14px;
             align-items: start; padding: 15px 24px; border-bottom: 1px solid var(--линия) }
.день { font: 500 12.5px/36px var(--моно); color: var(--т-5) }
.строки b { display: block; color: var(--т-1); font-size: 15.5px; font-weight: 650; line-height: 1.35;
            padding-top: 7px }
.строки li p { font-size: 14.5px; line-height: 1.45; color: var(--т-4); margin-top: 3px }
.строки li:last-child { border-bottom: 0 }
.значок { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
          background: var(--фон); color: var(--т-2) }
.значок .ик { width: 19px; height: 19px }
.карточка-подвал { padding: 14px 24px; background: var(--фон); font-size: 13.5px;
                   line-height: 1.5; color: var(--т-4); border-top: 1px solid var(--линия) }
/* Значок бота в ленте циановый: две из пяти строк делает бот, и глазу
   видно, где он вступает. Остальные разделы нейтральные. */
.значок--бот { background: rgba(14,116,144,.1); color: var(--циан-т) }

/* ═══ 4. РАЗДЕЛЫ КАБИНЕТА: ЧЕТЫРЕ РЯДА СО СНИМКАМИ ════════════════════
   Зигзаг, а не сетка карточек: снимок кабинета нужен крупным,
   иначе он ничего не доказывает. */
.ряды { display: grid; gap: 104px }
.ряд { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px;
       align-items: center }
.ряд--наоборот { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr) }
.ряд--наоборот .ряд-текст { order: 2 }
.ряд-текст h3 { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 14px }
.ряд-текст p { max-width: 46ch }
.ряд-текст .мелко { margin-top: 14px }
.ряд-текст p + p { margin-top: 12px }
.ряд-текст ul { margin-top: 18px; display: grid; gap: 8px }
.ряд-текст ul li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px;
                   font-size: 15.5px; line-height: 1.5; color: var(--т-2) }
.ряд-текст ul .ик { width: 18px; height: 18px; margin-top: 3px; color: var(--циан-т) }
.ряд .кадр-рамка { justify-self: end }
.ряд--наоборот .кадр-рамка { justify-self: start }

/* ═══ 4а. СВОЙ ИИ ЧЕРЕЗ MCP ═══════════════════════════════════════════
   Тот же ряд, что у разделов кабинета, но колонка текста шире: здесь
   заголовок раздела, а не подзаголовок ряда. Шаги пронумерованы, потому
   что это порядок подключения. */
@media (min-width: 1280px) {
  .ии .ряд { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) }
}
.ии h2 { margin-bottom: 18px }
.ии-шаги { margin: 24px 0 4px; display: grid; gap: 14px; counter-reset: ии }
.ии-шаги li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px;
              font-size: 16px; line-height: 1.55; color: var(--т-2) }
.ии-шаги li::before { counter-increment: ии; content: counter(ии);
                      display: grid; place-items: center; width: 30px; height: 30px;
                      border-radius: 8px; font: 700 14px/1 var(--шрифт);
                      color: var(--т-1); background: var(--фон-2) }
.ии-шаги b { color: var(--т-1) }
.ии .ряд-текст p:last-child { margin-top: 16px }

/* ═══ 5. ШКОЛА ИЗ СЕРВИСОВ ═══════════════════════════════════════════════ */
.история { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px;
           align-items: center; padding: 64px; border-radius: 20px; background: var(--фон-2) }
.история .фото { aspect-ratio: 5 / 4 }
.история h2 { margin-bottom: 20px }
.история .корпус p { font-size: 18px; line-height: 1.6; color: var(--т-2) }
.уходит-вводка { margin-top: 24px; font-weight: 650; color: var(--т-1) }
.уходит { margin: 12px 0 18px; display: grid; gap: 10px }
.уходит li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px;
             font-size: 16px; line-height: 1.5; color: var(--т-2) }
.уходит .ик { width: 18px; height: 18px; margin-top: 3px; color: var(--т-5) }

/* ═══ 6. ЦЕНА ════════════════════════════════════════════════════════ */
.цена-блок { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
             gap: 64px; align-items: start }
.тарифы { background: #fff; border: 1px solid var(--обводка); border-radius: var(--r-окно);
          box-shadow: var(--тень); overflow: hidden }
.тарифы li { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.4fr);
             gap: 18px; align-items: baseline; padding: 18px 24px;
             border-bottom: 1px solid var(--линия) }
.тарифы li:last-child { border-bottom: 0 }
.тарифы b { color: var(--т-1); font-size: 17px }
.тарифы .сумма { font: 600 17px/1.2 var(--шрифт); color: var(--т-1); text-align: right;
                 font-variant-numeric: tabular-nums; white-space: nowrap }
.тарифы .сумма small { font-size: 13px; font-weight: 500; color: var(--т-5) }
.тарифы span { font-size: 14px; color: var(--т-4); line-height: 1.45 }
.тарифы .выбор { background: rgba(14,116,144,.05) }
.тарифы .выбор b::after { content: "рекомендуем"; margin-left: 10px; vertical-align: .1em;
                          font: 600 12.5px/1 var(--шрифт); color: var(--циан-т) }
.тарифы-итог { padding: 16px 24px; background: var(--фон); display: flex; flex-wrap: wrap;
               gap: 8px 28px; font-size: 14.5px; color: var(--т-2);
               border-top: 1px solid var(--линия) }
.тарифы-итог b { color: var(--т-1) }
.цена-блок .ссылка { display: inline-block; margin-top: 20px }
.цена-блок .лид + .арифметика { margin-top: 20px }
.арифметика { font-size: 17px; line-height: 1.55; color: var(--т-1); max-width: 44ch;
              padding: 14px 18px; border-radius: 10px; background: #fff;
              border: 1px solid var(--обводка); font-variant-numeric: tabular-nums }
.цена-блок .мелко { margin-top: 16px; max-width: 52ch }

/* ═══ 7. ПЕРЕЕЗД В ТРИ ШАГА ═════════════════════════════════════════
   Номера здесь несут смысл: это порядок действий. */
.шаги { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
        counter-reset: шаг }
.шаги li { position: relative; padding: 28px 28px 30px; background: #fff;
           border: 1px solid var(--обводка); border-radius: var(--r-окно); box-shadow: var(--тень) }
.шаги li::before { counter-increment: шаг; content: counter(шаг);
                   display: grid; place-items: center; width: 36px; height: 36px;
                   border-radius: 10px; margin-bottom: 20px;
                   font: 700 16px/1 var(--шрифт); color: var(--т-1); background: var(--фон-2) }
.шаги h3 { margin-bottom: 10px }
.шаги p { font-size: 16px; line-height: 1.55 }
.после-шагов { margin-top: 20px }

/* ═══ 8. ВОПРОСЫ ══════════════════════════════════════════════════════
   Не аккордеон: ответы короткие, и прятать их за нажатием значит
   заставить человека нажать восемь раз. */
.вопросы { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px }
.вопросы h3 { font-size: 19px; margin-bottom: 10px }
.вопросы p { font-size: 16px; line-height: 1.6; max-width: 56ch }

/* ═══ 9. ФИНАЛ ═══════════════════════════════════════════════════════
   Свет из окна на стене: фото стоит фоном, а не картинкой, и держит
   ту же холодную гамму. Текст читается по светлой части кадра,
   слева дополнительно поднята подложка. */
.финал { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
         align-items: stretch; overflow: hidden; margin-top: var(--ст-тема);
         border-radius: 20px; background: var(--фон-2) }
.финал-текст { grid-row: 1; grid-column: 1; padding: 88px 64px; align-self: center }
.финал-фото { grid-row: 1; grid-column: 2; border-radius: 0; box-shadow: none; min-height: 100% }
.финал-фото img { object-position: 55% 50% }
.финал h2 { font-size: 46px; line-height: 1.06 }
.финал .лид { margin-top: 18px }
.финал .действия { margin-top: 32px }
.финал .мелко { margin-top: 14px }

/* ── подвал ────────────────────────────────────────────────────────── */
.подвал { border-top: 1px solid var(--линия); margin-top: 96px;
          padding: 32px max(24px, calc(50% - 640px)) 40px;
          font-size: 14px; color: var(--т-5) }
.подвал a { color: var(--т-2); text-decoration: none; display: inline-block; padding: 12px 0 }
/* Ссылка внутри предложения подчёркивается: цветом она отличалась от
   прозы на 1,72 при норме 3:1. */
.подвал p a { text-decoration: underline; text-decoration-color: rgba(13,20,36,.35);
              text-underline-offset: 3px }
.подвал .двери-внизу a { text-decoration: none }
.подвал p { margin: 0 }
.подвал .реквизиты { margin-top: 16px; padding-top: 16px;
                     border-top: 1px solid var(--линия); font-size: 13px }

/* ── липкая кнопка телефона ───────────────────────────────────────── */
.липкая { display: none }
.датчик { height: 1px }

/* ── движение ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* Счёт: пять черт по очереди, затем загорается итог. Черты ведутся
     слева направо, как рукой. Исходное состояние ведёт к конечному
     (правило 1): если анимация не пошла, счёт уже зачёркнут. */
  .было li::after { animation: черта .42s var(--сдвиг) both }
  .было li:nth-child(1)::after { animation-delay: .55s }
  .было li:nth-child(2)::after { animation-delay: .75s }
  .было li:nth-child(3)::after { animation-delay: .95s }
  .было li:nth-child(4)::after { animation-delay: 1.15s }
  .было li:nth-child(5)::after { animation-delay: 1.35s }
  .было li:nth-child(6)::after { animation-delay: 1.55s }
  @keyframes черта { from { transform: scaleX(0) } to { transform: scaleX(1) } }
  .было li { animation: гаснет .4s ease both }
  .было li:nth-child(1) { animation-delay: .7s }
  .было li:nth-child(2) { animation-delay: .9s }
  .было li:nth-child(3) { animation-delay: 1.1s }
  .было li:nth-child(4) { animation-delay: 1.3s }
  .было li:nth-child(5) { animation-delay: 1.5s }
  .было li:nth-child(6) { animation-delay: 1.7s }
  @keyframes гаснет { from { color: var(--т-1) } to { color: var(--т-4) } }
  .итог li:first-child { animation: итог .6s var(--выход) 1.95s both }
  @keyframes итог { from { background-color: transparent } to { background-color: var(--циан-мягкий) } }
  .счёт-обёртка { animation: чек .7s var(--выход) .1s both }
  @keyframes чек { from { transform: translateY(18px) } to { transform: none } }
  .геро .кнопка::after { animation: блик 1.1s var(--сдвиг) 2.5s 1 both }
  @keyframes блик { from { transform: translateX(-110%) } to { transform: translateX(110%) } }

  /* Лента ученицы: строки поднимаются по очереди, когда карточка
     в кадре (класс ставит glavnaya.js). Без скрипта они стоят готовыми. */
  .видно .строки li { animation: строка .5s var(--выход) both }
  .видно .строки li:nth-child(2) { animation-delay: .08s }
  .видно .строки li:nth-child(3) { animation-delay: .16s }
  .видно .строки li:nth-child(4) { animation-delay: .24s }
  .видно .строки li:nth-child(5) { animation-delay: .32s }
  @keyframes строка { from { transform: translateY(8px) } to { transform: none } }
}
@media (prefers-reduced-motion: reduce) {
  .кнопка, .кнопка .ик { transition: none }
  .кнопка:active { transform: none }
}

@media (forced-colors: active) {
  .было li::after { forced-color-adjust: none; background: CanvasText }
}

/* ── низкое окно ноутбука ─────────────────────────────────────────── */
@media (max-height: 820px) and (min-width: 1024px) {
  .геро { padding-top: 32px; row-gap: 24px }
  .геро h1 { font-size: 52px }
  .геро .лид { font-size: 18px }
  .действия { margin-top: 26px }
  .модули-ряд { margin-top: 28px }
  /* Фото уже, чтобы счёт под ним поместился в первый экран ноутбука. */
  .сцена { max-width: 560px; justify-self: end; width: 100% }
}

/* ── ниже полосы содержимого ─────────────────────────────────────── */
@media (max-width: 1279px) {
  .ряд, .ряд--наоборот { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .ряд--наоборот .ряд-текст { order: 0 }
  .ряд .кадр-рамка, .ряд--наоборот .кадр-рамка { justify-self: start }
  .ряд-текст p { max-width: 60ch }
}

/* ── кадры на планшете ─────────────────────────────────────────────
   От 768 до 1279 колонка кадра уже самого кадра на 5–15 процентов,
   и обрезка по правому краю срезала кнопки «Проверить». Здесь кадр
   вписывается целиком: коэффициент считается из ширины колонки
   (единицы контейнера, tan(atan2()) даёт безразмерное отношение),
   и ниже 0,85 он на этих ширинах не падает. Браузер без tan() оставит
   обрезку, то есть прежнее поведение. */
@media (min-width: 768px) and (max-width: 1279px) {
  .ряд .кадр-рамка { container-type: inline-size; width: 100% }
  @supports (zoom: tan(atan2(1px, 1px))) {
    .ряд .кадр { zoom: min(1, tan(atan2(100cqw, var(--w)))) }
  }
}

/* ── планшет ─────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  h1 { font-size: 46px }
  h2 { font-size: 34px }
  /* Бургера в общей шапке нет, ссылки разделов уходят полоской
     под определение (см. .разделы). */
  .шапка nav { display: none }
  .разделы { display: flex }
  .геро { grid-template-columns: minmax(0, 1fr); grid-template-areas: "з" "т" "с";
          row-gap: 28px; padding-top: 40px }
  .геро h1 { font-size: 48px }
  .сцена { max-width: 700px }
  .ученица, .цена-блок, .история { grid-template-columns: minmax(0, 1fr); gap: 40px }
  .история { padding: 40px }
  .шаги { grid-template-columns: minmax(0, 1fr) }
  .вопросы { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .финал { grid-template-columns: minmax(0, 1fr) }
  .финал-текст { padding: 48px 40px }
  .финал-фото { grid-row: 2; grid-column: 1; aspect-ratio: 16 / 9; min-height: 0 }
}

/* ── телефон ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Мобильный вид кадра: те же переменные, переопределённые здесь.
     Десктопный кроп, сжатый до 342 px, стал бы нечитаемой полоской. */
  .кадр { width: var(--wm, var(--w)); height: var(--hm, var(--h)) }
  .кадр img, .кадр video { left: var(--xm, var(--x)); top: var(--ym, var(--y));
                           width: var(--iwm, var(--iw)) }

  :root { --ст-родня: 80px; --ст-тема: 104px }
  body { font-size: 16px; padding-bottom: 76px }
  main { padding: 0 16px }
  h1 { font-size: 36px; line-height: 1.08; letter-spacing: -.025em }
  h2 { font-size: 29px; line-height: 1.12 }
  h3 { font-size: 19px }
  .лид { font-size: 17.5px }
  .шапка { height: 56px; gap: 12px; grid-template-columns: auto 1fr; padding: 0 16px }
  .двери { justify-self: end; gap: 12px }
  .двери a:not(.кнопка) { font-size: 14px; display: inline-flex; align-items: center; height: 40px }
  .двери a.кнопка { height: 38px; padding: 0 12px; font-size: 14px }
  .двери a.кнопка::after { display: none }

  .геро { padding-top: 24px; row-gap: 18px }
  .геро h1 { font-size: 36px }
  .действия { margin-top: 26px; gap: 6px }
  .действия .кнопка { width: 100% }
  .геро .мелко { text-align: center; margin-top: 8px }
  /* На телефоне счёт выходит из-под фото вниз, а не лежит поверх:
     в 358 px поверх фото он закрыл бы его целиком. */
  .сцена-поле { padding: 0 }
  .счёт-обёртка { position: relative; top: auto; right: auto; width: auto;
                  margin: -44px 10px 0 }
  .счёт { padding: 18px 18px calc(18px + var(--зуб)) }
  .счёт li { font-size: 14px }

  .определение { margin-top: 56px; padding-top: 32px }
  .определение p { font-size: 18px }
  /* На телефоне перечень выталкивал ноутбук со счётом на второй экран;
     разделы названы в абзаце-определении сразу ниже. */
  .геро .модули-ряд { display: none }

  .голова { margin-bottom: 32px }
  .строки li { padding: 13px 16px; grid-template-columns: 24px 32px minmax(0, 1fr); gap: 4px 10px }
  .значок { width: 32px; height: 32px }
  .день { line-height: 32px }
  .строки b { padding-top: 5px; font-size: 15px }
  .карточка-шапка { padding: 16px }
  .карточка-подвал { padding: 12px 16px }

  .ряды { gap: 72px }
  .ряд-текст h3 { font-size: 23px }
  .кадр-рамка figcaption { font-size: 13px }

  .история { padding: 24px 20px; border-radius: 16px; gap: 28px }
  .история .корпус p { font-size: 16.5px }

  .тарифы li { grid-template-columns: minmax(0, 1fr) auto; padding: 16px }
  .тарифы li span { grid-column: 1 / -1 }
  .тарифы-итог { padding: 14px 16px }

  .шаги li { padding: 22px 20px 24px }
  .финал { border-radius: 16px }
  .финал-текст { padding: 36px 20px }
  .финал h2 { font-size: 31px }
  .финал .кнопка { width: 100% }

  .подвал { padding: 24px 16px 40px; margin-top: 72px }

  .липкая {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--линия);
    transform: translateY(110%); transition: transform .22s var(--выход);
  }
  .липкая.видна { transform: none }
  .липкая .кнопка { width: 100%; height: 48px }
  .липкая .кнопка::after { display: none }
  .липкая .мелко { font-size: 12px; line-height: 1.2; margin-top: 4px; text-align: center }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .липкая { transition: none } }