<!--
  DIRECTION CONTRACT — English Sprints landing concept (variant: PIPELINE / REVIEW)
  THESIS: The interview loop is a pipeline and your recorded answer is a change that goes through review like code. A meaning-hiding mistake is a required FIX that must pass before the stage is green, and it re-runs in a new context.
  FORM: CI pipeline + PR review.

  ЭТО ВАРИАНТ РАСКЛАДКИ СЕКЦИИ «КАК ЭТО РАБОТАЕТ», версия v14, с 19 августа
  2026. Основная страница — index.html (v13, она же в деплое); этот файл
  собран поверх неё и в деплой не идёт, пока вариант не принят. Отличие от
  v13 ровно одно и описано ниже: L3 пересобран горизонтально. Тексты, состав
  блоков, позиции CTA и события аналитики совпадают с v13 дословно.
  Предыдущие версии лежат рядом как index-v9.html и index-v4.html и дальше
  не развиваются. Соседние index-full, index-v1, index-v2-review,
  index-v3 — более ранние итерации, оставлены как история. Варианты первого
  экрана — в hero-variants.html.

  ЧТО ДЕЛАЕТ v14 ПОВЕРХ v13 (замечание автора: «шаги читаются вертикальным
  списком, порядок держишь в голове»; референс раскладки — макет продукта
  с горизонтальной шкалой этапов). Тексты шагов, состав блоков, позиции CTA
  и события аналитики НЕ МЕНЯЛИСЬ:
  — «КАК ЭТО РАБОТАЕТ» ПЕРЕСОБРАН ГОРИЗОНТАЛЬНО. Раньше пять шагов стояли
    колонкой слева, а макет держался липким кадром справа: последовательность
    была видна только по номерам «03 / 05» внутри текста. Теперь порядок
    вынесен в рельс 01–05 над кадром. Секция на время прокрутки становится
    дорожкой: внутри неё липнет один кадр, прокрутка двигает точку по рельсу,
    а плита «текст слева / макет справа» меняется целиком. Уходящий слайд
    сдвигается влево, приходящий — справа, поэтому направление чтения видно
    и при движении назад;
  — ДОРОЖКА ПОДЕЛЕНА НА ПЯТЬ РАВНЫХ ОТРЕЗКОВ, по одному на шаг. Прежняя
    раскладка считала активный шаг по середине текстового блока и требовала
    пустого добора под пятым шагом, чтобы тот не отлипал сразу; здесь
    последний отрезок такой же, как остальные, и добор не нужен;
  — СМЕНА ШАГА ИДЁТ ЗА РУКОЙ, А НЕ ПО СВОЕМУ ТАЙМЕРУ. Тот же механизм, что у
    финиша «через 4 недели»: скрипт считает одно число --stg-p от 0 до 1 на
    всю дорожку, пороги живут в CSS. Первую половину отрезка карточка стоит
    и читается, вторую — заезжает следующая, и назад отматывается тоже.
    Ход в квадрате: карточка выносится быстро и мягко доводится до места.
    Рисуемое число при этом не прибито к прокрутке напрямую, а догоняет её
    с коротким догоном (~0.1 с): колесо мыши крутится ступенчатыми скачками,
    и без догона каждый щелчок телепортировал карточку на десятки процентов
    ширины — смена читалась дёрганой. Прежний вариант со сменой по
    CSS-переходу (0.4s) от прокрутки не зависел: шаг переключался рывком на
    границе отрезка;
  — ПРОЛЁТ С РАЗГОНА САДИТСЯ НА ПЕРВЫЙ ШАГ. Если страницу листали быстро,
    инерция утаскивала прокрутку на середину дорожки — первые шаги
    перелистывались, не успев показаться. Решение — посадочная полоса:
    в начале дорожки лежит запас в 0.8 отрезка (ST_RUN в скрипте, слагаемое
    в высоте .js-stg), и прилетевший с разгона оказывается внутри
    полосы, где ещё стоит шаг 01. Полоса не мёртвая: вместе с первой
    половиной отрезка шага 01 она растянута на его стоячую фазу, полоса
    рельса в ней ползёт. Скроллом никто не управляет, поэтому работает с
    любым способом ввода. Отклонённые варианты: обратная перемотка после
    остановки (движение страницы «само по себе» читается как поломка —
    вердикт автора); гашение wheel-событий через preventDefault (Chrome
    решает по первому событию жеста, можно ли его отменять, и отмена
    посреди инерции игнорируется); остановка инерции через scroll snap
    (под y proximity Chrome игнорирует scroll-snap-stop и инерция
    пролетает, постоянный y mandatory в покое сам тянет страницу к якорю,
    а mandatory только «в полёте» Chrome не пересматривает: цель анимации
    вычислена в начале жеста — всё проверено вживую);
  — ПРИЛИПШИЙ КАДР ПОДПИСАН ИМЕНЕМ ЭКРАНА. Когда кадр прилипает, кикер
    «как это работает» уже уехал вверх вместе с заголовком секции, и
    закреплённый экран оставался безымянным. Теперь над рельсом стоит тот же
    кикер (.stg-cap): он проявляется только в прилипшем кадре (is-pinned из
    скрипта) — на подходе кикер секции ещё виден, и имя дублировалось бы;
  — ПОЛОСА РЕЛЬСА ЗАПОЛНЯЕТСЯ ВЕСЬ ОТРЕЗОК ЦЕЛИКОМ и доходит до следующего
    узла ровно к тому кадру, когда карточка встаёт на место. По ней видно,
    сколько ещё листать до смены шага, — раньше линия просто перескакивала
    от узла к узлу;
  — СЛАЙДЫ СТАЛИ КОЛОДОЙ НЕПРОЗРАЧНЫХ КАРТОЧЕК: следующая наезжает на
    предыдущую справа, накрытая уходит на 7% влево. Через прозрачность смену
    не делаем — на середине расхождения два текста ложились друг на друга и
    не читался ни один. Поверхность, рамка и радиус живут на плите
    (.stg-deck), долю половин держит --stg-split;
  — РЕЛЬС КЛИКАБЕЛЕН. Узел — кнопка: клик метит в середину своего отрезка
    (у границы пары пикселей прокрутки хватало, чтобы кадр ушёл к соседу),
    стрелки ← → ведут по рельсу с клавиатуры, активный узел помечен
    aria-current. Подписи на рельсе короткие («План недели», «Разбор»),
    полные заголовки шагов остались в плите;
  — МАКЕТ ЛЕЖИТ НА СЦЕНЕ, А НЕ САМ ПО СЕБЕ. Правая половина плиты взяла фон
    бумаги, макет внутри — самую плоскую ступень тени: на плите он читается
    как содержимое, а не как вторая карточка;
  — РАСКЛАДКА ПО-ПРЕЖНЕМУ РАСПРЯМЛЯЕТСЯ. Ниже 901px и без скрипта рельса нет
    вовсе, слайды идут подряд одной колонкой в порядке разметки — шаг, его
    макет, следующий шаг, — и номер снова читается как «01 / 05».

  ЧТО ИЗМЕНИЛОСЬ В v13 (тексты по черновикам автора, отбор и адаптация под
  ограничения 08f; цель — читаемость по диагонали за 2–3 секунды).
  ВНИМАНИЕ: круг ручных правок пройден целиком — L1, L2, L3, L9 и FAQ.
  Пункты ниже описывают действующее состояние:
  — L1 ОТКАЧЕН К ТЕКСТАМ v12, КРОМЕ ЛИДА. H1 снова «Вакансия подходит.
    Останавливает английский?», побуждение — «Выясни это до интервью»,
    кегль H1 вернулся к 52px. Черновой H1 «Знаешь ответ…» отклонён автором;
  — ЛИД ИЗ ДВУХ ПРЕДЛОЖЕНИЙ, ПЕРВОЕ — ОТДЕЛЬНОЙ СТРОКОЙ (.lede .s):
    «Веб-сервис для тренировки английского на интервью.» + «Разбираешь
    типичные ситуации, выполняешь задания, отвечаешь вслух и получаешь разбор
    своих ответов». Первая строка называет категорию, вторая — что делаешь;
    перечисление «Все этапы интервью вслух…» из v9 заменено на действия.
    Meta/OG-описания синхронизированы с лидом;
  — СОБЕСЕДНИК В МАКЕТЕ ЗВОНКА ПОМЕЧЕН КАК AI ПОДПИСЬЮ: `Anna · AI partner`
    вместо `Anna asks`. Аватар остаётся `AK` — вариант с `AI` в кружке
    отклонён автором: инициалы держат персонажа, метка снимает вопрос,
    с кем идёт разговор;
  — L2 ОТКАЧЕН К ТЕКСТАМ v12, КРОМЕ ДВУХ СТРОК. Вернулись заголовок
    «Технически готов. Но на интервью это не слышно», симптомы HR screening и
    Live coding и первая половина вывода «Под давлением выбираешь фразу…».
    Из первого захода оставлены: симптом Behavioural с примером
    “It was difficult, but we did it” и обе строки «что тренируем» для
    Live coding и Behavioural («Говорить точно: что произошло, что сделал
    именно ты и какой был результат»);
  — L3 ПЕРЕПИСАН ЦЕЛИКОМ, ЗАГОЛОВКИ ШАГОВ — СУЩЕСТВИТЕЛЬНЫЕ. H2 вернулся к
    «Недельные спринты», подзаголовок собран заново: план задач («что делать
    сейчас, что дальше и что уже готово») плюс память системы. Шаги названы
    предметно: «План на неделю», «Дейли», «Задача», «Разбор выполненной
    задачи», «Повторная проверка». Стрелочная цепочка и заголовки-глаголы
    первого захода отклонены;
  — ШАГ 04 РАЗБИТ НА ДВА АБЗАЦА (второй .stg-c): механика разбора и то, что
    запись с разбором остаются в задаче. Длительность «3 мин» у него снята;
    у шага 03 длительность стала «~10 мин»;
  — ШАГ 05 ОПИСАН ЧЕРЕЗ ПАМЯТЬ СИСТЕМЫ, А НЕ ЧЕРЕЗ ВОЗВРАТ ОШИБКИ: повтор
    ошибки замечается, задача добавляется, позже то же проверяется в новой
    ситуации. Соответствует рамке PRODUCT.md: FIX — производная контекста
    пользователя;
  — ПОЛОСА «ЧЕРЕЗ 4 НЕДЕЛИ» ВЕРНУЛАСЬ К ТЕКСТУ v12 («Чувствуешь уверенность
    в своём английском на интервью»), в последней строке — «записи ответов»;
  — ЦЕНА: состав сжат до четырёх пунктов. Сняты «Задания на каждый этап
    интервью» (этапы уже названы в L2) и «Повторяющиеся ошибки возвращаются
    новыми заданиями» (механика показана шагом 05). Пункт про срок стал
    правилом («чем меньше времени осталось, тем больше заданий в спринте»),
    последний пункт говорит, что система собирает следующие спринты и после
    курса. Приписка «Сначала — бесплатный Sprint 0…» осталась;
  — FAQ: формулировки вопросов вернулись к прежним, порядок и data-q не
    менялись. Ответ subscription разбит на два абзаца и отвечает про
    продолжение занятий («в следующих спринтах появляются задачи из других
    курсов»), а не про хранение материалов; концовка vs_chat стала короткой
    отстройкой на памяти («В ChatGPT каждый разговор начинается заново»).
    ВНИМАНИЕ: из fit снят пункт про браузеры, и требование 08f разд. 2
    «сказать про Chrome/Safari в FAQ» сейчас не выполнено нигде на странице.
  ИЗ ЧЕРНОВИКОВ НЕ ВЗЯТО (ограничения 08f и границы продукта): «урок» и
  «преподаватель» — запрещённые слова (заменены на «занятия» и «репетитора»);
  «просто» — запрещено; «мы» в теле страницы (только FAQ); «отработать самые
  проблемные места» при сроке меньше 10 дней — продукт короче 10-дневного
  трека не работает; снятие «нужно говорить вслух» с липкой полосы; удаление
  «модели на записях не обучаем» из FAQ про приватность.
  Разбор решений — 08d, раздел «Что изменила версия 13». Состав блоков,
  позиции CTA и события аналитики не менялись.

  ЧТО ИЗМЕНИЛОСЬ В v12 (замечания ревьюера: «обозначить на первом экране, что
  это веб-сервис», «как это работает — разжевать прямо и по-человечески»;
  тон и формулировки взяты из index-v9.html — первый заход с объясняющими
  связками «как стендап у команды», «как в таск-трекере» отклонён автором):
  — ЛИД ПЕРВОГО ЭКРАНА НАЗЫВАЕТ КАТЕГОРИЮ ПРОДУКТА: веб-сервис, AI-собеседник,
    в браузере. Раньше первый экран говорил, что продукт делает, но не что он
    такое. Meta/OG-описания синхронизированы с лидом;
  — ТЕКСТЫ ШАГОВ L3 ПЕРЕПИСАНЫ ПРЯМЫМ ОБЪЯСНЕНИЕМ: подзаголовок секции
    называет канбан-доску словами (решение v5.1 «слово Kanban на странице не
    звучит» снято по замечанию ревьюера), шаг 01 расшифровывает колонки
    To Do / In Progress / Done, шаг 02 объясняет, что такое дейли, шаги 03–05
    говорят, откуда берётся задача, как приходит разбор и куда возвращается
    ошибка;
  — В FAQ «А мне подойдёт…» добавлен пункт про браузеры (Chrome на компьютере,
    Safari на iPhone) — требование 08f разд. 2; после «в браузере» на первом
    экране молчать об этом стало нельзя.
  Разбор решений — 08d, раздел «Что изменила версия 12». Состав блоков,
  позиции CTA и события аналитики не менялись.

  ЧТО ИЗМЕНИЛОСЬ В v11 (по замечанию «снова стало тяжеловато для восприятия»,
  референс шагов — praktika.ai):
  — «КАК ЭТО РАБОТАЕТ» СОБРАН В ОДИН СЦЕНАРИЙ ИЗ ПЯТИ ШАГОВ. Раньше секция
    шла двумя блоками подряд: доска, разобранная номерами 1–4 со списком
    пояснений справа, и следом три шага дня, у каждого свой макет на
    чередующемся рельсе. Четыре макета лежали стопкой, номера читались
    дважды, и секция весила как отдельная страница. Теперь шагов пять
    (01 доска, 02 дейли, 03 задача, 04 разбор, 05 возврат ошибки), доска —
    первый пункт, а МАКЕТ ОДИН: он закреплён во второй колонке и меняется по
    прокрутке. За раз на экране один шаг и один макет;
  — КАДР 05 РИФМУЕТСЯ С КАДРОМ 01: та же доска неделей позже, с вернувшейся
    ошибкой и ссылкой на метку 0:12 с дорожки разбора. Цикл «ответ → разбор →
    новая задача» закрывается показом, а не абзацем;
  — РАСКЛАДКА РАСПРЯМЛЯЕТСЯ. Порядок в разметке — порядок чтения: шаг, его
    макет, следующий шаг. Ниже 901px и без скрипта так всё и лежит одной
    колонкой; закреплённый кадр включает класс js-stg, который ставит скрипт,
    и его правила живут только в широком медиазапросе;
  — УБРАНА СЕКЦИЯ L4 «Курс заканчивается. Практика продолжается» — по
    замечанию «ценной инфы уже нет, апсейлы нам тут не нужны». Бэклог, работа
    со слабыми местами после курса и будущие курсы остались в ответе FAQ
    «Зачем подписка, если курс длится четыре недели»;
  — КАДР МЕНЯЕТСЯ ПО СЕРЕДИНЕ ШАГА, А НЕ ПО ЕГО ВЕРХУ. Первая версия считала
    по верхней границе блока, а текст в блоке отцентрован — картинка успевала
    смениться, когда до следующего шага ещё не домотали. Теперь линия
    переключения (.46 высоты окна) сверяется с серединой шага, то есть
    примерно с самим текстом, и встаёт вровень с центром кадра;
  — РЕПЛИКА В HERO НАЧИНАЕТСЯ НЕ С ПУСТОЙ СТРОКИ. Цикл подхватывает ответ на
    полуслове: первые три слова уже стоят, точка записи горит, таймер идёт с
    той же секунды. Пустая строка с одной кареткой читалась как «здесь ничего
    нет», а не как «здесь говорят». Сделано сдвигом начала цикла (PRE, START,
    SKIP рядом с расписанием слов): слова до START ставятся синхронно в том же
    кадре, что и сброс, поэтому пустого состояния не видно ни разу;
  — У ФИНИША «ЧЕРЕЗ 4 НЕДЕЛИ» СВОЙ ЭПИЗОД, ПРИВЯЗАННЫЙ К ПРОКРУТКЕ. Это
    кульминация потока, и собирается она рукой, а не таймером: пока полосу
    поднимают со дна экрана к середине (около 390px хода), чертится зелёная
    засечка, следом встают строки в порядке чтения — метка, вывод, чем он
    подтверждается. Назад отматывается тоже. Скрипт считает одно число --fin
    от 0 до 1, пороги строк (--at) живут в CSS. Общего въезда [data-mo] на
    элементе нет: два входа на одном объекте спорили бы друг с другом.
    Правила висят на .js-fin, поэтому без скрипта и при reduce засечка и
    строки просто лежат на месте. Работает на любой ширине — это не
    раскладка, а сам эпизод;
  — ПОД ПЯТЫМ ШАГОМ ДОБАВЛЕН ПУСТОЙ ДОБОР (шестая строка сетки, только в левой
    колонке). Липкость кадра кончается за «высота кадра + отступ сверху» до
    низа сетки, то есть на 566px раньше, чем сама сетка, — и последний шаг
    оставался приклеенным всего пару десятков пикселей против 396px у
    остальных. Добор в ~170px даёт ему около 200px хода. Полного выравнивания
    не делаем: под последним шагом это 340px пустоты, и она читается как
    провал в вёрстке;
  — МАКЕТЫ В КАДРАХ КРУПНЕЕ примерно на четверть, кадр вырос до 470px.
    Базовые кегли и отступы остались от прежней раскладки, где макет делил
    строку с текстом и был вдвое уже; в отдельном кадре те же карточки
    читались как миниатюры. Порог у этих правил свой, 1060px: на 900–1050
    колонка кадра сама по себе узкая, и там крупные карточки ломают названия
    задач в три строки. По горизонтали отступы прибавлены меньше, чем по
    вертикали — карточкам нужна высота, а не поля;
  — ПОПУТНО: свечение за звонком в hero (.hero-vis::before) больше не выходит
    за карточку по горизонтали. Вылет в 6% давал странице несколько пикселей
    горизонтальной прокрутки на ширинах, где контейнер упирается в края окна
    (примерно 1000–1240px). На вид ничего не изменилось: размытие светит
    наружу и так, а ink-overflow от filter в прокрутку не попадает;
  — УБРАНЫ ВЕРТИКАЛЬНЫЕ РЕЛЬСЫ ПОДЛОЖКИ (замечание «они меня смущают, не
    уверен что они нужны»). В v10 они держали ритм на плотных секциях, но
    вокруг шагов пересобранного L3 много воздуха, и линии стали читаться как
    разметка макета. От подложки осталось мягкое свечение сверху — и на
    бумаге, и в тёмной секции;
  — ВМЕСТЕ С НИМИ УШЛИ: разбор доски номерами и подсветка «номер ↔ место на
    макете», рельс дня с точками и заполнением по прокрутке, метка «один день
    · ~15 минут» (время переехало в подзаголовок секции и в номера шагов),
    прорисовка дорожки разбора на входе — теперь вход у неё один, появление
    самого кадра. Мёртвые правила (.bd*, .pin, .hw-flow, .hw-step*, .hw-day,
    .hw-cap, .hw-again, .aft*, .tag--research, .sec-head--split, .sec-lede)
    сняты, отметка прокрутки L4 из аналитики убрана.

  ЧТО ИЗМЕНИЛОСЬ В v10 (движение и контраст; текст, структура и порядок
  блоков не тронуты):
  — ДВА ТЁМНЫХ ЯКОРЯ вместо ровной бумаги по всей странице. Звонок на первом
    экране и секция цены ушли в ink. Между ними страница остаётся бумажной,
    и контраст приходится ровно на начало и на точку решения. Тёмные токены
    (--d-*) переопределяются локально в .sec--ink, поэтому внутри работают
    те же классы. Решение v9 «живым звонок делает движение, а не тёмный фон»
    осталось верным: фон здесь не заменяет движение, а даёт контраст;
  — ПОДЛОЖКА: фиксированные вертикальные рельсы во всю высоту окна, шаг —
    восьмая часть контейнера, ниже 760px — четверть. Видны только в светлых
    секциях без своего фона; полосы .sec--panel их перекрывают, и чередование
    «рельсы / плотная полоса» само по себе задаёт ритм.
    (В v11 рельсы сняты, осталось свечение — см. выше);
  — ПОЛОСЫ СЕКЦИЙ: .sec--panel взял свой тон --band. Прежние --bg и --panel-2
    отличались на два процента яркости, и чередование было не видно;
  — ТРИ СТУПЕНИ ГЛУБИНЫ вместо одной тени: --shadow-flat у карточек в сетке,
    --shadow-panel у панелей-иллюстраций, --shadow-raised и --shadow-ink у
    якорей. Три кейса в L2 перешли на плоскую ступень;
  — ГЛАВНЫЙ ЭПИЗОД — реплика на первом экране. Слова приходят по одному в
    темпе речи (~300 мс на слово плюс 26 мс на букву — примерно 150 слов в
    минуту), уровень громкости идёт за словами, а не по своему кругу, таймер
    считает то же время, и через 0,8 с после конца фрагмент получает метку с
    временем — то же, что метки на дорожке разбора. Цикл идёт только когда
    звонок в кадре и вкладка открыта;
  — ПОДДЕРЖИВАЮЩЕЕ ДВИЖЕНИЕ — только там, где оно что-то объясняет: связка
    «сейчас → что тренируем» в L2, порядок номеров 1→4 на доске, заполнение
    рельса дня по прокрутке, прорисовка дорожки разбора с посадкой меток,
    набор бэклога в L4. Одинакового въезда на каждую секцию нет.
    (В v11 из этого списка осталась только связка в L2: доска, рельс дня и
    бэклог со страницы ушли, а вход дорожки заменила смена кадра — см. v11);
  — СВЯЗКА НОМЕРОВ: наведение на пункт справа подсвечивает то место доски, о
    котором он говорит, и наоборот. Фокусируемыми пункты не сделаны — это
    добавило бы четыре пустые остановки табуляции, а номера напечатаны с
    обеих сторон;
  — ВСЁ ДВИЖЕНИЕ — НАДСТРОЙКА. Классы, которые прячут блоки до появления,
    ставит сам скрипт: без JS и при prefers-reduced-motion разметка видна
    целиком, а в звонке лежит конечное состояние — реплика целиком, метка на
    фрагменте, 0:07 на таймере. Значения 0:05 и 0:07 в разметке совпадают с
    тем, что считает расписание слов: при правке реплики их надо пересчитать.

  Деплойная копия собирается из этого файла подстановкой домена вместо
  плейсхолдера [DOMAIN] и складывается в _deploy/index.html (вне git).

  ЧТО ИЗМЕНИЛОСЬ ОТ v5 (все блоки, кроме FAQ, взяты из макета v9):
  — первый экран: доска недели уехала в «как это работает», а её место снова
    занял живой звонок. Движение уровня громкости, каретка транскрипта и точка
    записи показывают главное — здесь говорят вслух;
  — «как это работает» переименован в «Недельные спринты» и получил разбор
    доски: номера стоят на самих частях макета (шапка недели, карточка в
    работе, разобранная, вернувшаяся ошибка), пояснения идут списком справа.
    Рельс с тремя шагами дня (дейли, задача, разбор) остался под разбором.
    (В v11 оба блока заменены одним сценарием из пяти шагов — см. выше);
  — шаг 03 стал интерактивным: дорожка записи играет, метки перематывают,
    замечание меняется на той метке, которую слышно. Играет настоящая запись
    ответа — audio/answer.m4a, 36 секунд, AAC mono 48 kbps. Метки (0:06, 0:12,
    0:19, 0:24, 0:31) расставлены по её содержанию, поэтому при замене записи
    их надо пересчитать вместе с текстами замечаний. Если файла нет, дорожка
    идёт по таймеру на 36 секунд и механика всё равно видна;
  — добавлена секция L4 «Курс заканчивается. Практика продолжается»: бэклог
    слабых мест тем же макетом, что доска. (Снята в v11);
  — цена собрана в одну карточку-оффер: состав в две колонки, кнопка внизу
    карточки. Отдельная панель финального CTA и вертикальный список условий
    убраны, условия продления живут в FAQ;
  — FAQ оставлен нашим, версии v5: вопрос «А мне подойдёт этот курс?» с
    ограничениями курса и формулировки про сроки — из
    08f-landing-constraints-and-events.md, разд. 4.1.

  ПРАВКИ ПОВЕРХ МАКЕТА v9 (в самом макете они потеряны, не возвращать назад):
  — отступ под липкую полосу меряется скриптом (--sticky-h), а не держится
    константой 96px: на 375px полоса выше и наезжала на подвал;
  — стили .faq .a p / ul / li::marker нужны нашему FAQ со списком;
  — базовый .hw-note объявлен ДО модификаторов --sense и --good: в v9 он шёл
    после и перекрашивал их обратно в золотой;
  — в head вернулись плейсхолдер [DOMAIN] и ссылка на img/favicon.svg вместо
    сломанного экспортом data-URI, шрифты — ссылкой на Google Fonts;
  — сняты служебные атрибуты data-comment-anchor и неиспользуемые правила
    (.defs/.def*, .no*, .sec--tight, .tag--check, .df-review-wave .tail).

  Разметка аналитики (data-ev, data-pos, data-doc) прежняя. Отметки прокрутки
  идут в порядке страницы: #how — L3, #start — L9, #details — FAQ, L10.
  Отметки L4 больше нет вместе с самой секцией.

  Текст страницы и разбор решений — 08d-landing-copy-interviewing.md.
  Ограничения и события аналитики — 08f-landing-constraints-and-events.md.
-->
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<title>English Sprints — Interviewing in English</title>
<meta name="description" content="Веб-сервис для тренировки английского на интервью. Разбираешь типичные ситуации, выполняешь задания, отвечаешь вслух и получаешь разбор своих ответов. Бесплатная диагностика, около 25 минут, без карты.">
<link rel="canonical" href="https://englishsprints.com">
<meta property="og:type" content="website">
<meta property="og:url" content="https://englishsprints.com">
<meta property="og:locale" content="ru_RU">
<meta property="og:site_name" content="English Sprints">
<meta property="og:title" content="Вакансия подходит. Останавливает английский?">
<meta property="og:description" content="Веб-сервис для тренировки английского на интервью. Разбираешь типичные ситуации, выполняешь задания, отвечаешь вслух и получаешь разбор своих ответов. Бесплатная диагностика, около 25 минут, без карты.">
<meta property="og:image" content="https://englishsprints.com/img/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Вакансия подходит. Останавливает английский? — English Sprints">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Вакансия подходит. Останавливает английский?">
<meta name="twitter:description" content="Веб-сервис для тренировки английского на интервью. Разбираешь типичные ситуации, выполняешь задания, отвечаешь вслух и получаешь разбор своих ответов. Бесплатная диагностика, около 25 минут, без карты.">
<meta name="twitter:image" content="https://englishsprints.com/img/og.png">
<link rel="icon" href="img/favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;700&display=swap">
<style>
  :root{
    color-scheme:light;
    /* Палитра из макета продукта: тёплая бумага, приглушённый navy, терракота */
    --bg:#F7F7F4;--panel:#FFFFFF;--panel-2:#FCFCFA;
    --ink:#20242C;--ink-soft:#5B5F66;--line:#E7E6E0;--line-2:#EEEFE9;--line-3:#CAC7BD;
    --blue:#2F5BB7;--blue-deep:#274A99;--blue-bg:#ECF1FC;--blue-line:#CDDCF5;
    --amber:#9A4530;--amber-bg:#FBEEE9;--amber-line:#EDCFC4;--green:#1F7A4D;--green-bg:#E8F5EE;
    --sans:'Public Sans',system-ui,-apple-system,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
    --blue-soft:#7F9CE0;--terra:#B5563A;
    --gold:#8A6116;--gold-bg:#FBF6EA;--gold-line:#EEE2C6;--gold-mark:#F1E3C2;
    --green-line:#D5E5DA;--ink-mute:#8C9098;
    --maxw:1200px;--radius:10px;
    /* Полосы секций: прежние --bg и --panel-2 отличались на два процента яркости
       и чередование было не видно. Полоса взяла свой тон, заметный глазом */
    --band:#F0EFE8;--band-line:#DFDDD3;
    /* Тёмные поверхности: звонок в hero и блок цены. Тот же мир, другое значение —
       якоря в начале и в точке решения, между ними страница остаётся бумажной */
    --d-bg:#15181E;--d-panel:#1E222A;--d-panel-2:#252A34;
    --d-line:#333A46;--d-line-2:#2A303B;
    --d-ink:#F2F1EC;--d-ink-soft:#A8AEB9;
    --d-blue:#8FB0F0;--d-blue-bg:#22304C;--d-blue-line:#37507E;
    --d-terra:#E08B6E;--d-gold:#D7B268;--d-green:#6FCB97;
    /* Синий на тёмном: боевой --blue уходит в фон, кнопке нужен подъём */
    --blue-lift:#3E6FD9;
    --shadow-btn:0 1px 2px rgba(28,26,22,.16),0 10px 24px -12px rgba(47,91,183,.5);
    --shadow-btn-hover:0 2px 4px rgba(28,26,22,.2),0 16px 30px -14px rgba(47,91,183,.55);
    /* Три ступени глубины, а не одна тень на всех: плоские карточки в сетке,
       панель-иллюстрация, поднятый якорь. Иерархия видна до чтения */
    --shadow-flat:0 1px 2px rgba(28,26,22,.05),0 6px 14px -10px rgba(28,26,22,.3);
    --shadow-panel:0 1px 2px rgba(28,26,22,.06),0 24px 48px -28px rgba(28,26,22,.35);
    --shadow-raised:0 1px 2px rgba(28,26,22,.06),0 30px 60px -34px rgba(28,26,22,.4);
    --shadow-ink:0 2px 4px rgba(10,12,16,.4),0 40px 80px -40px rgba(10,12,16,.85);
    --ease-out:cubic-bezier(.16,1,.3,1)
  }
  *{box-sizing:border-box}
  /* Отступ под липкую шапку: без него якорь уводит цель под неё */
  html{scroll-behavior:smooth;scroll-padding-top:78px}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
  h1,h2,h3,h4,p{margin:0}
  h1,h2,h3{line-height:1.08}
  .wrap{width:min(100% - 40px,var(--maxw));margin-inline:auto}

  /* Подложка: мягкое свечение сверху, фиксированное — контент едет поверх него.
     Вертикальные рельсы пайплайна отсюда убраны: в v10 они держали ритм на
     плотных секциях, но в пересобранном «как это работает» вокруг шагов много
     воздуха, и линии стали читаться как разметка макета, а не как фактура */
  body::before{
    content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(120% 70% at 50% -10%,rgba(47,91,183,.055),transparent 62%)
  }

  /* Появление блоков. Класс js-mo ставит сам скрипт: без него и при ошибке
     разметка остаётся видимой, а не прячется навсегда */
  .js-mo [data-mo]{opacity:0;transform:translateY(14px);
    transition:opacity .5s var(--ease-out),transform .55s var(--ease-out);
    transition-delay:calc(var(--mo-i,0) * 70ms)}
  .js-mo [data-mo].is-in{opacity:1;transform:none}
  .js-mo [data-mo="fade"]{transform:none}
  .skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;transition:top .15s}
  .skip:focus{top:12px}

  /* Шапка */
  .mast{position:sticky;top:0;z-index:50;background:var(--panel);border-bottom:1px solid var(--line)}
  /* Тень появляется вместе с кнопкой — тогда же, когда под шапку уходит контент */
  .mast--cta{box-shadow:0 1px 12px rgba(28,26,22,.07)}
  .mast .row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
  /* Кнопка в шапке мельче основной и без тени: она сопровождает чтение, а не спорит с CTA в теле */
  .mast .btn--mast{display:none;padding:9px 16px;font-size:14.5px;box-shadow:none;white-space:nowrap}
  .mast .btn--mast:hover{transform:none;box-shadow:none}
  /* Кнопка в шапке живёт только на широких экранах — ниже 860px её роль играет липкая полоса внизу */
  @media (min-width:861px){
    .mast--cta .btn--mast{display:inline-flex;animation:mast-in .2s ease-out}
    .mast--cta .login-q{display:none}
  }
  @keyframes mast-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
  .brand,.aside{display:flex;align-items:center}
  .brand{gap:10px;font-weight:700}
  .brand .glyph{width:19.5px;height:18px;flex:0 0 auto}
  .track{margin-left:4px;padding-left:14px;border-left:1px solid var(--line);font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink-soft);white-space:nowrap}
  .aside{gap:14px}
  .login-q{font-size:14px;color:var(--ink-soft);white-space:nowrap}
  .login{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 16px;transition:border-color .15s,color .15s}
  .login:hover{border-color:var(--blue-line);color:var(--blue-deep)}

  /* Hero: слева обещание и кнопка, справа идущий звонок */
  .hero{padding:clamp(34px,4vw,56px) 0}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(26px,3.6vw,56px);align-items:center}
  .hero-copy{min-width:0;max-width:60ch}
  .hero-vis{min-width:0}
  .hero-vis .df-asked{font-size:clamp(20px,1.75vw,23px);max-width:21ch}
  .eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--ink-soft);margin-bottom:14px}
  /* Кегль ограничен 52px: в половине ширины строка иначе упирается в макет */
  .h1{font-size:clamp(36px,4.2vw,52px);letter-spacing:-.03em;text-wrap:balance;margin-bottom:16px}
  /* Каждое предложение — свой блок: перенос идёт по границе предложения */
  .h1 .s{display:block}
  .h1 .hl{color:var(--blue-deep)}
  .lede{font-size:clamp(16.5px,1.4vw,19px);color:var(--ink);max-width:44ch;margin-bottom:24px}
  /* Первое предложение лида — своя строка: категория продукта («веб-сервис,
     AI-собеседник») не должна слипаться с перечислением того, что внутри */
  .lede .s{display:block}
  .cta-wrap{display:flex;flex-direction:column;gap:12px;max-width:480px}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:16.5px;background:var(--blue);color:#fff;border:1px solid var(--blue-deep);padding:15px 24px;border-radius:var(--radius);text-decoration:none;cursor:pointer;box-shadow:var(--shadow-btn);transition:transform .12s ease,box-shadow .12s ease,background .12s}
  .btn:hover{background:var(--blue-deep);transform:translateY(-1px);box-shadow:var(--shadow-btn-hover)}
  .btn:active{transform:translateY(0)}
  .btn .arrow{width:18px;height:18px}
  .nudge{font-size:16px;line-height:1.45;color:var(--ink-soft)}
  /* Второе предложение — всегда с новой строки: разрыв по границе мысли */
  .nudge b{display:block;color:var(--ink);font-weight:600}
  .conds{display:flex;flex-wrap:wrap;gap:8px 16px;font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}
  .conds .c{display:inline-flex;align-items:center;gap:6px}
  .conds .c svg{width:14px;height:14px}
  .conds .voice{color:var(--amber);font-weight:700}
  .hook{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);margin-top:26px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;border-bottom:1px solid var(--line);padding-block:3px}
  .hook svg{width:13px;height:13px}
  .hook:hover{color:var(--blue-deep);border-color:var(--blue)}

  /* Секции */
  .sec{padding:clamp(46px,6vw,84px) 0;border-top:1px solid var(--line);position:relative}
  .sec--panel{background:var(--band);border-top-color:var(--band-line)}

  /* Тёмная секция: якорь в точке решения. Токены переопределяются локально,
     поэтому внутри работают те же классы, что и на бумаге */
  .sec--ink{
    --panel:var(--d-panel);--panel-2:var(--d-panel-2);--bg:var(--d-bg);
    --ink:var(--d-ink);--ink-soft:var(--d-ink-soft);
    --line:var(--d-line);--line-2:var(--d-line-2);--line-3:#414957;
    --blue:var(--blue-lift);--blue-deep:#5B87E8;--green:var(--d-green);--amber:var(--d-terra);
    /* На тёмном кнопку поднимает собственная яркость заливки. Синий ореол вокруг
       неё — не глубина, а свечение, и в этом мире ему нечего делать */
    --shadow-btn:0 1px 2px rgba(0,0,0,.55),0 16px 32px -16px rgba(0,0,0,.9);
    --shadow-btn-hover:0 2px 5px rgba(0,0,0,.6),0 22px 40px -18px rgba(0,0,0,.95);
    background:var(--d-bg);color:var(--d-ink);border-top-color:#000;
    isolation:isolate
  }
  /* То же свечение, что на бумаге, только ярче: фиксированная подложка сквозь
     собственный фон секции не просвечивает */
  .sec--ink::before{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(110% 75% at 50% -8%,rgba(62,111,217,.13),transparent 70%)
  }
  .sec--ink>.wrap{position:relative;z-index:1}
  .sec-head{margin-bottom:clamp(24px,3vw,38px);max-width:62ch}
  .h2{font-size:clamp(27px,3.4vw,42px);letter-spacing:-.025em;margin-bottom:12px}
  .sec-note{color:var(--ink-soft);font-size:15.5px;max-width:68ch}
  .kicker{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:12px}
  /* L2 · три кейса по этапам интервью. Половины покрашены, а не разделены линией:
     переход «сейчас → что тренируем» читается до чтения самих строк */
  .cases{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
  /* Вывод из трёх ситуаций: отчёркнут сверху во всю ширину сетки, как итог под таблицей */
  .cases-note{margin-top:clamp(24px,3vw,34px);padding-top:clamp(18px,2.2vw,24px);
              border-top:1px solid var(--line-3);max-width:64ch;font-size:17px;line-height:1.55;color:var(--ink-soft)}
  .cases-note b{color:var(--ink);font-weight:700}
  /* Плоская ступень: три карточки в ряд с полной тенью висели в воздухе и
     спорили с панелями-иллюстрациями. Здесь они — сетка, а не объект */
  .case{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-flat)}
  /* Этап интервью — светлая шапка карточки. Названия английские: так их видит кандидат в письме рекрутера */
  .case-top{padding:13px 16px;background:var(--panel-2);border-bottom:1px solid var(--line);
    font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink);font-weight:700}
  .case-body{flex:1;display:flex;flex-direction:column;padding:14px}
  .case .now{flex:1;background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:8px;padding:14px 15px 16px}
  .case .then{background:var(--green-bg);border:1px solid var(--green-line);border-radius:8px;padding:14px 15px 16px}
  .case .lbl{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
  .case .now p{font-size:16px;line-height:1.5;color:var(--ink-soft)}
  .case .then p{font-size:16px;line-height:1.5;color:var(--ink);font-weight:500;margin-top:9px}
  /* Стрелка вместо подписи «стало»: связку показывает направление, а не ещё одна строка текста */
  .case-arrow{display:flex;align-items:center;justify-content:center;height:24px;font-size:13px;font-weight:700;color:var(--line-3)}
  /* Связка «сейчас → что тренируем» проигрывается, а не просто появляется:
     сначала симптом, потом стрелка, потом навык. Порядок и есть смысл блока */
  .js-mo .case[data-mo] .case-arrow,.js-mo .case[data-mo] .then{
    opacity:0;transform:translateY(8px);
    transition:opacity .42s var(--ease-out),transform .46s var(--ease-out)}
  .js-mo .case[data-mo] .case-arrow{transition-delay:calc(var(--mo-i,0)*70ms + 260ms)}
  .js-mo .case[data-mo] .then{transition-delay:calc(var(--mo-i,0)*70ms + 380ms)}
  .js-mo .case[data-mo].is-in .case-arrow,.js-mo .case[data-mo].is-in .then{opacity:1;transform:none}

  /* L3 · старт и финиш курса — терминалы потока: без панели, только засечка во всю ширину */
  .hw-strip{display:grid;gap:10px;margin-inline:auto;background:var(--bg);border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);border-radius:0;padding:18px 0 22px;font-size:16px;line-height:1.5;text-wrap:pretty;position:relative}
  .hw-strip--out{border-top-color:var(--green);border-bottom:0;padding-bottom:0;margin-top:clamp(30px,4vw,48px)}
  .hw-strip-n{min-width:0;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
  .hw-strip--out .hw-strip-n{color:var(--green)}
  /* Полоса Sprint 0 разложена на строки: условие, что делаешь, что получаешь */
  .hw-strip-b{display:grid;gap:5px}
  .hw-strip-b b{font-weight:700}

  /* Финиш собирается ПО ПРОКРУТКЕ, а не по срабатыванию на входе: зелёная
     засечка чертится слева направо, пока полосу поднимают к середине экрана,
     и следом на неё встают строки. Тот же принцип, что у кадров выше —
     движением управляет рука, а не таймер, и назад оно отматывается тоже.
     Скрипт ставит один --fin от 0 до 1, пороги живут здесь: у каждой строки
     свой --at, дальше общая формула. Общего въезда [data-mo] на элементе нет:
     два входа на одном объекте спорили бы друг с другом */
  .js-fin .hw-strip--out{border-top-color:transparent}
  .js-fin .hw-strip--out::before{
    content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--green);
    transform:scaleX(clamp(0,calc(var(--fin,0)/.4),1));transform-origin:0 50%}
  .js-fin .hw-strip--out .hw-strip-n,
  .js-fin .hw-strip--out .hw-strip-b>*{
    --p:clamp(0,calc((var(--fin,0) - var(--at,0))/.16),1);
    opacity:var(--p);transform:translateY(calc(7px*(1 - var(--p))))}
  /* Порядок строк — порядок чтения: метка, вывод, чем он подтверждается */
  .js-fin .hw-strip--out .hw-strip-n{--at:.36}
  .js-fin .hw-strip--out .hw-strip-b>*:nth-child(1){--at:.48}
  .js-fin .hw-strip--out .hw-strip-b>*:nth-child(2){--at:.62}
  .js-fin .hw-strip--out .hw-strip-b>*:nth-child(3){--at:.72}
  .df-lbl{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

  /* L3 · пять шагов, горизонтальный рельс и одно место для визуала.
     БАЗА (узкий экран, и она же — раскладка без скрипта): одна колонка, рельса
     нет, слайды идут подряд — текст шага, под ним его макет. Это и есть
     порядок разметки.
     ШИРОКИЙ ЭКРАН со скриптом (.js-stg): секция на время прокрутки становится
     дорожкой. Внутри неё липнет один кадр: сверху рельс 01–05, под ним плита
     «текст слева / макет справа». Прокрутка двигает шаг по рельсу, плита
     меняется целиком. Стопки макетов по-прежнему нет */
  .stg{display:grid;gap:clamp(16px,2.4vw,24px);margin-top:clamp(30px,4vw,48px)}
  /* Шапка кадра (имя экрана и рельс) — навигация закреплённого кадра.
     В распрямлённой раскладке кадра нет: подписи шагов дублировали бы
     заголовки слайдов, а имя экрана — кикер секции прямо над ним */
  .stg-top{display:none}
  .stg-rail{display:none}
  .stg-deck{display:grid;gap:clamp(26px,4vw,44px)}
  .stg-slide{display:grid;gap:clamp(14px,2vw,20px)}
  .stg-step{display:grid;gap:9px;align-content:center}
  .stg-n{display:flex;align-items:baseline;gap:9px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--blue)}
  .stg-n-of{color:var(--blue-soft)}
  /* Длительность шага — приписка к номеру, а не часть заголовка: в заголовке
     она спорила с названием шага за первое слово */
  .stg-n-m{font-weight:400;color:var(--ink-soft)}
  .stg-n-m::before{content:'·';margin-right:9px}
  .stg-t{font-size:clamp(21px,2.3vw,28px);font-weight:700;letter-spacing:-.025em}
  .stg-c{font-size:16.5px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty;max-width:46ch}
  .stg-frame{max-width:560px}
  .stg-frame .hw-task,.stg-frame .hw-rev{display:grid;gap:12px}

  @media (min-width:901px){
    /* Два числа, от которых считается всё остальное: высота липкого кадра и
       длина отрезка на один шаг. Отрезок нарочно щедрый, целый экран
       прокрутки: на коротком (52vh) шаг сменялся от одного движения колеса —
       прочитать карточку не успевал даже быстрый читатель.
       Дорожка = посадочная полоса + четыре отрезка + хвост пятого шага:
       5.3 = 0.8 (полоса, ST_RUN в скрипте) + 4 + 0.5 (хвост, ST_END там же).
       Полоса в начале принимает на себя инерцию быстрого листания со всей
       страницы, чтобы прилетевший с разгона оказался на стоящем шаге 01.
       Хвост пятого шага укорочен: после него ничего не заезжает, целый
       отрезок был мёртвой прокруткой, но совсем без хвоста пятый шаг
       показывался и тут же уезжал */
    .js-stg{--stg-h:min(72vh,590px);--stg-adv:clamp(560px,100vh,900px);
      display:block;height:calc(var(--stg-h) + 5.3 * var(--stg-adv))}
    /* Кадр стоит по центру окна, но не выше шапки */
    .js-stg .stg-pin{position:sticky;top:max(90px,calc((100vh - var(--stg-h)) / 2));
      height:var(--stg-h);display:grid;grid-template-rows:auto minmax(0,1fr);
      gap:clamp(20px,3vh,34px)}

    /* Шапка кадра: имя экрана над рельсом. Имя — тот же кикер, что у секции:
       когда кадр прилип, заголовок уже уехал, и подпись держит контекст.
       Видна только в прилипшем кадре (is-pinned ставит скрипт по нулю
       дорожки): на подходе кикер секции ещё на экране, и двойное имя
       читалось бы как ошибка. Уходит и приходит своим переходом — резкое
       появление в прилипании читалось бы миганием.
       Отрыв имени от рельса больше, чем рельса от плиты: имя — заголовок
       всего экрана, а не подпись к рельсу, и вплотную к нему читалось как
       часть навигации */
    .js-stg .stg-top{display:grid;gap:clamp(26px,4.2vh,40px)}
    .js-stg .stg-cap{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
      letter-spacing:.06em;color:var(--ink-soft);
      opacity:0;transition:opacity .35s var(--ease-out)}
    .js-stg.is-pinned .stg-cap{opacity:1}

    /* Рельс: пять узлов на равных долях. Линия идёт от центра первого узла до
       центра пятого, поэтому её края отбиты на половину доли — на 10% */
    .js-stg .stg-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
      position:relative;margin:0;padding:0;list-style:none}
    .js-stg .stg-rail::before,.js-stg .stg-rail::after{
      content:'';position:absolute;left:10%;top:17px;height:2px;border-radius:2px}
    .js-stg .stg-rail::before{right:10%;background:var(--line-3);opacity:.6}
    /* Синяя часть линии тянется прокруткой, а не своим переходом: она
       доходит до следующего узла ровно к тому моменту, когда шаг сменится, —
       по ней и видно, сколько осталось листать. Полной она становится на
       последнем узле, то есть при --stg-p = .8. Тянем масштабом, а не
       шириной: ширина гоняла бы раскладку на каждом кадре */
    .js-stg .stg-rail::after{right:10%;background:var(--blue);
      transform:scaleX(clamp(0,calc(var(--stg-p,0)/.8),1));transform-origin:0 50%}
    .js-stg .stg-rail-b{position:relative;z-index:1;display:grid;justify-items:center;gap:10px;
      width:100%;padding:0 8px;background:none;border:0;font-family:inherit;cursor:pointer}
    .js-stg .stg-rail-d{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
      background:var(--panel);border:1.5px solid var(--line-3);
      font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-mute);
      transition:background .35s var(--ease-out),border-color .35s var(--ease-out),color .35s var(--ease-out)}
    .js-stg .stg-rail-t{font-size:14px;font-weight:600;line-height:1.25;color:var(--ink-mute);
      text-wrap:balance;transition:color .35s var(--ease-out)}
    /* Пройденные шаги обведены синим, текущий залит: где ты сейчас и сколько
       уже прочитано, видно одним взглядом */
    .js-stg .stg-rail-i.is-past .stg-rail-d{background:var(--blue-bg);border-color:var(--blue-line);color:var(--blue)}
    .js-stg .stg-rail-i.is-past .stg-rail-t{color:var(--ink-soft)}
    .js-stg .stg-rail-i.is-on .stg-rail-d{background:var(--blue);border-color:var(--blue-deep);color:#fff}
    .js-stg .stg-rail-i.is-on .stg-rail-t{color:var(--ink)}
    .js-stg .stg-rail-b:hover .stg-rail-d{border-color:var(--blue)}
    .js-stg .stg-rail-b:hover .stg-rail-t{color:var(--ink)}
    .js-stg .stg-rail-b:focus-visible{outline:2px solid var(--blue);outline-offset:5px;border-radius:12px}

    /* Плита одна на все пять шагов, слайды внутри — колода непрозрачных
       карточек: следующая наезжает на предыдущую справа. Через прозрачность
       смену не делаем — на середине расхождения два текста ложились друг на
       друга и не читались ни один. Долю левой половины держит --stg-split:
       по нему режется и колонка текста, и граница половин */
    .js-stg{--stg-split:39%}
    .js-stg .stg-deck{gap:0;min-height:0;
      background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}

    /* Ход карточки идёт за прокруткой, а не по своему таймеру. Тот же принцип,
       что у финиша «через 4 недели»: скрипт кладёт в --stg-p одно число от 0
       до 1 на всю дорожку, пороги живут здесь. --at — место шага на дорожке
       (0…4), --stg-l — насколько дорожка ушла внутрь этого шага: 0 — шаг
       только встал, 1 — он уже сменился. Первую половину отрезка карточка
       стоит на месте и читается, вторую — заезжает следующая. Полоса
       рельса при этом заполняется весь отрезок целиком, поэтому по ней видно,
       сколько ещё листать до смены. Ход в квадрате: карточка выносится быстро
       и мягко доводится до места, а не влетает с одной скоростью.
       ВНИМАНИЕ: ширина окна заезда (.5) продублирована в скрипте — там по ней
       считается, какие карточки ещё видимы */
    .js-stg .stg-slide{grid-area:1/1;min-height:0;gap:0;z-index:calc(var(--at,0) + 1);
      grid-template-columns:var(--stg-split) minmax(0,1fr);
      --stg-l:calc(var(--stg-p,0) * 5 - var(--at,0));
      --in:clamp(0,calc((0 - var(--stg-l))/.5),1);
      --out:clamp(0,calc((var(--stg-l) - .5)/.5),1);
      transform:translateX(calc((var(--in) * var(--in) - var(--out) * .07) * 100%));
      /* Тень падает влево и видна только пока карточка в движении: на месте
         она уходит за левый край плиты и срезается */
      box-shadow:-30px 0 50px -32px rgba(28,26,22,.45);
      visibility:hidden;pointer-events:none}
    /* Последнюю карточку никто не накрывает — сдвигаться назад ей некуда */
    .js-stg .stg-slide:last-of-type{--out:0}
    /* Видимыми держим только карточки, которые ещё не накрыты целиком: внутри
       остальных лежат кнопки разбора, и в обход экрана они попадать не должны */
    .js-stg .stg-slide.is-live{visibility:visible}
    .js-stg .stg-slide.is-on{pointer-events:auto}

    .js-stg .stg-step{gap:13px;padding:clamp(22px,2.8vw,40px);min-width:0;background:var(--panel)}
    /* Номер шага крупный: в плите он единственный указатель на порядок,
       рельс сверху даёт остальное. «/ 05» там же лишнее */
    .js-stg .stg-n{gap:13px}
    .js-stg .stg-n-d{font-size:clamp(32px,3.2vw,44px);font-weight:700;line-height:1;letter-spacing:-.02em}
    .js-stg .stg-n-of{display:none}
    .js-stg .stg-n-m{font-size:12px}
    .js-stg .stg-n-m::before{content:none}
    .js-stg .stg-t{font-size:clamp(20px,2vw,25px)}
    .js-stg .stg-c{font-size:15.5px;max-width:40ch}

    /* Правая половина — сцена под макет: тёплая бумага, как вся страница.
       Макет остаётся поднятым объектом, но тень берёт самую плоскую ступень:
       он лежит внутри плиты, а не сам по себе на странице */
    .js-stg .stg-frame{max-width:none;min-width:0;display:grid;align-content:center;justify-items:center;
      padding:clamp(18px,2.4vw,32px);background:var(--bg);border-left:1px solid var(--line)}
    .js-stg .stg-frame>*{width:100%;max-width:600px}
    .js-stg .stg-frame .df-panel,.js-stg .stg-frame .df-call,
    .js-stg .stg-frame .hw-task,.js-stg .stg-frame .hw-rev{box-shadow:var(--shadow-flat)}

    /* Низкий экран: кадру не хватает высоты на плиту целиком — содержимое
       резалось overflow-ом ещё до имени экрана. Кадр берёт больше окна,
       вертикальные зазоры и паддинги плотнее; имя экрана остаётся отбитым
       сильнее, чем рельс от плиты */
    @media (max-height:768px){
      .js-stg{--stg-h:80vh}
      .js-stg .stg-pin{gap:16px}
      .js-stg .stg-top{gap:20px}
      .js-stg .stg-step{padding:clamp(18px,2.2vw,26px)}
      .js-stg .stg-frame{padding:clamp(14px,1.8vw,22px)}
    }
  }

  /* Кегли и отступы макетов подняты примерно на четверть. Базовые значения
     остались от прежней раскладки, где макет делил строку с текстом и был
     вдвое уже; в отдельном кадре те же карточки читались как миниатюры.
     Порог здесь свой, выше 901px: на 900–1050 колонка кадра сама по себе узкая,
     и там крупные карточки начинают ломать названия задач в три строки.
     Правила без .js-stg: без скрипта на широком экране кадры те же */
  @media (min-width:1060px){
    .stg-frame .df-panel{padding:18px;gap:14px;border-radius:14px}
    .stg-frame .df-panel-t{font-size:16.5px}
    .stg-frame .df-panel-m{font-size:11.5px}
    .stg-frame .df-lbl{font-size:11px}
    .stg-frame .df-board{gap:11px}
    /* По горизонтали отступы прибавлены меньше, чем по вертикали: карточкам
       нужна высота, а не поля — иначе названия задач начинают переноситься */
    .stg-frame .df-col{padding:11px 8px;gap:9px;border-radius:11px}
    .stg-frame .df-card{padding:12px 11px;gap:7px;border-radius:9px}
    .stg-frame .df-card-t{font-size:14px}
    .stg-frame .df-card-d{font-size:12px}
    .stg-frame .df-card-m{font-size:11px;gap:6px}
    .stg-frame .df-card-m--ok svg{width:12px;height:12px}
    .stg-frame .df-card-m--on .df-lvl{height:13px}
    .stg-frame .df-card-m--on .df-lvl i{height:13px}
    .stg-frame .tag{font-size:10px;padding:3px 7px;border-radius:5px}

    .stg-frame .df-call-top{padding:13px 16px;font-size:11.5px}
    .stg-frame .df-ask{padding:26px 22px 20px;gap:16px}
    .stg-frame .df-ava{width:56px;height:56px;font-size:14px}
    .stg-frame .df-asked{font-size:19px}
    .stg-frame .df-say{padding:16px 18px 18px;gap:12px}
    .stg-frame .df-say-top{font-size:13px}
    .stg-frame .df-say-t{font-size:11.5px}
    .stg-frame .df-live-tr{font-size:14.5px}

    .stg-frame .hw-task{padding:22px;gap:11px}
    .stg-frame .hw-task-t{font-size:20px}
    .stg-frame .hw-task-d{font-size:15px}
    .stg-frame .hw-inside{padding:15px 16px;gap:9px;border-radius:11px}
    .stg-frame .hw-inside p{font-size:14px;gap:10px}

    /* Разбор — самый низкий из пяти макетов: в нём одна дорожка и одно
       замечание. Ему добавлено больше воздуха, чтобы кадр не проваливался */
    .stg-frame .hw-rev{padding:26px;gap:20px}
    .stg-frame .hw-rev .df-review-track{height:42px;margin:16px 0 17px}
    .stg-frame .hw-rev .df-review-play{width:30px;height:30px}
    .stg-frame .hw-rev .df-review-play::after{left:11px;top:9px;
      border-left:9px solid #fff;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
    .stg-frame .hw-rev .df-review-play.is-playing::after{left:10px;top:9px;width:11px;height:12px;
      border:0;border-left:3.5px solid #fff;border-right:3.5px solid #fff}
    .stg-frame .df-review-duration{font-size:12.5px}
    .stg-frame .df-review-marker b{font-size:10px}
    .stg-frame .hw-rev .hw-note{min-height:140px}
    .stg-frame .hw-note{padding:14px 16px;border-radius:11px}
    .stg-frame .hw-note-l{font-size:11px}
    .stg-frame .hw-note p{font-size:14.5px}
  }

  /* Звонок собран из тех же материалов, что и остальные панели: белое на тёплой бумаге,
     синий — активное состояние, терракота — запись. «Живым» его делает движение, а не тёмный фон */
  @keyframes df-lvl{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
  @keyframes df-blink{0%,100%{opacity:1}50%{opacity:.12}}
  @keyframes df-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
  @keyframes df-ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.55);opacity:0}}
  .df-call{--live:var(--blue);--dim:var(--ink-soft);border-radius:12px;background:var(--panel);border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow-panel)}
  .df-call-top{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--panel-2);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10.5px}
  .df-live{display:flex;align-items:center;gap:5px;color:var(--amber)}
  .df-live i{width:6px;height:6px;border-radius:50%;background:var(--terra);animation:df-blink 1.6s ease-in-out infinite}
  .df-when{margin-left:auto;color:var(--dim)}
  .df-ask{padding:24px 22px 20px;display:grid;gap:17px;justify-items:center;text-align:center}
  .df-ava{position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--blue-bg);border:1px solid var(--blue-line);color:var(--blue-deep);font-family:var(--mono);font-size:15px;font-weight:600}
  /* Кольцо расходится от аватара — звук идёт от собеседника */
  .df-ava::before{content:'';position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--blue-soft);animation:df-ring 2.2s ease-out infinite}
  .df-who{display:grid;gap:8px;justify-items:center}
  .df-who .df-lbl{letter-spacing:.1em;color:var(--dim)}
  .df-asked{font-size:20px;line-height:1.35;font-weight:600;color:var(--ink);max-width:25ch;text-wrap:pretty}
  .df-say{padding:15px 20px 18px;background:var(--panel-2);border-top:1px solid var(--line);display:grid;gap:11px}
  .df-say-top{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;color:var(--ink)}
  .df-lvl{display:flex;align-items:center;gap:3px;height:24px}
  .df-lvl i{width:3px;height:24px;border-radius:2px;background:var(--blue-soft);animation:df-lvl .8s ease-in-out infinite}
  .df-lvl i:nth-child(1){background:var(--live)}
  .df-lvl i:nth-child(2){animation-delay:.1s}
  .df-lvl i:nth-child(3){background:#A5BAE9;animation-delay:.2s}
  .df-lvl i:nth-child(4){animation-delay:.3s}
  .df-lvl i:nth-child(5){background:var(--live);animation-delay:.4s}
  .df-lvl i:nth-child(6){animation-delay:.5s}
  .df-say-t{margin-left:auto;font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--dim)}
  /* Расшифровка обрывается на середине фразы: ответ ещё произносится */
  .df-live-tr{font-size:13px;line-height:1.6;color:var(--ink)}
  .df-caret{display:inline-block;width:7px;height:14px;background:var(--live);vertical-align:-2px;margin-left:3px;animation:df-caret 1s step-end infinite}

  /* ---- Тёмный звонок на первом экране ----
     Решение v9 «живым его делает движение, а не тёмный фон» осталось верным:
     фон здесь не заменяет движение, а даёт странице первый контраст. На бумаге
     светлая карточка среди светлых панелей не читалась как отдельный объект */
  .hero-vis{position:relative}
  /* По горизонтали свечение не выходит за карточку: на ширинах, где контейнер
     упирается в края окна (примерно 1000–1240px), вылет в 6% давал странице
     несколько пикселей горизонтальной прокрутки. Размытие всё равно светит
     наружу, и на вид это ничего не меняет — в отличие от бокса, ink-overflow
     от filter в прокрутку не попадает */
  .hero-vis::before{
    content:'';position:absolute;inset:-8% 0;z-index:0;pointer-events:none;
    background:radial-gradient(60% 60% at 50% 45%,rgba(47,91,183,.16),transparent 70%);
    filter:blur(24px)
  }
  .hero-vis .df-call{position:relative;z-index:1}
  .df-call--dark{
    --live:var(--d-blue);--dim:var(--d-ink-soft);
    background:var(--d-panel);border-color:#0E1116;color:var(--d-ink);box-shadow:var(--shadow-ink)
  }
  .df-call--dark .df-call-top{background:#191D24;border-bottom-color:var(--d-line-2)}
  .df-call--dark .df-live{color:var(--d-terra)}
  .df-call--dark .df-live i{background:var(--d-terra)}
  .df-call--dark .df-ava{background:var(--d-blue-bg);border-color:var(--d-blue-line);color:#CBD9F7}
  .df-call--dark .df-ava::before{border-color:var(--d-blue)}
  .df-call--dark .df-asked,.df-call--dark .df-say-top,.df-call--dark .df-live-tr{color:var(--d-ink)}
  .df-call--dark .df-say{background:#12151A;border-top-color:#0E1116}
  .df-call--dark .df-lvl i{background:#4E68A0}

  /* Реплика собирается по словам в темпе речи: уровень громкости идёт за словами,
     а не по своему кругу, и таймер считает то же время. Это и есть главное
     утверждение первого экрана — здесь говорят вслух */
  .df-lvl.df-lvl--live i{animation:none;transform:scaleY(var(--a,.2));transition:transform .1s linear}
  .df-say.is-idle .df-lvl{opacity:.32}
  .df-say .df-rec{display:none;width:6px;height:6px;border-radius:50%;background:var(--terra);flex:none}
  .df-say.is-live .df-rec{display:inline-block;animation:df-blink 1.4s ease-in-out infinite}
  .df-call--dark .df-say .df-rec{background:var(--d-terra)}
  .df-w{opacity:0;animation:df-w .16s ease-out forwards}
  @keyframes df-w{to{opacity:1}}
  .df-caret[hidden]{display:none}
  /* Фрагмент, к которому привяжется разбор. Подчёркивание проезжает под словами
     тем же терракотовым, что метки «содержание» на дорожке разбора ниже */
  .df-frag{position:relative;background-image:linear-gradient(var(--terra),var(--terra));
    background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
    transition:background-size .5s var(--ease-out)}
  .df-call--dark .df-frag{background-image:linear-gradient(var(--d-terra),var(--d-terra))}
  .df-frag.is-marked{background-size:100% 2px}
  .df-flag{display:inline-flex;align-items:center;gap:5px;margin-left:7px;padding:2px 7px;border-radius:5px;
    font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.04em;
    background:var(--amber-bg);color:var(--amber);white-space:nowrap;
    opacity:0;transform:translateY(3px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
  .df-call--dark .df-flag{background:#3A2119;color:var(--d-terra)}
  .df-flag.is-on{opacity:1;transform:none}
  /* Звонок в кадре шага чуть скромнее, чем на первом экране: там он главный
     объект страницы, здесь — один из пяти макетов */
  .stg-frame .df-asked{max-width:30ch}

  /* Задача: карточка доски, увеличенная до размера кадра */
  .df-tags{display:flex;gap:4px;flex-wrap:wrap}
  .tag{padding:2px 5px;border-radius:4px;font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.06em}
  .tag--story{background:var(--blue-bg);color:var(--blue)}
  .tag--fix{background:var(--amber-bg);color:var(--amber)}
  .tag--mode{border:1px solid var(--line-3);color:var(--ink-soft)}
  .hw-task{display:grid;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow-panel)}
  .hw-task-t{font-size:17px;font-weight:600}
  .hw-task-d{font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
  .hw-inside{align-self:end;display:grid;gap:7px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:9px;padding:12px 13px}
  .hw-inside p{display:flex;align-items:baseline;gap:8px;font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
  .hw-inside p i{flex:none;width:5px;height:5px;border-radius:50%;background:var(--blue-soft);transform:translateY(-2px)}
  .hw-inside .df-lbl{letter-spacing:.09em}

  /* Доска недели в hero: облегчённая версия макета из v3. Три колонки вместо
     четырёх, в карточках только название и время — на половине ширины описания
     превращаются в шум. Живой остаётся одна карточка «в работе»: по ней видно,
     что задача проходится голосом */
  .df-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;align-items:start}
  .df-col{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 8px;display:grid;gap:7px;align-content:start}
  .df-col>.df-lbl{padding:0 3px;letter-spacing:.09em}
  .df-card{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:9px;display:grid;gap:5px}
  .df-card--on{border-color:var(--blue);box-shadow:0 2px 10px rgba(47,91,183,.16)}
  .df-card-t{font-size:12.5px;line-height:1.35;font-weight:500}
  .df-card-d{font-size:10.5px;line-height:1.4;color:var(--ink-soft)}
  .df-card-m{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;color:var(--ink-soft)}
  .df-card-m--on{color:var(--blue)}
  .df-card-m--ok{color:var(--green)}
  .df-card-m--ok svg{width:10px;height:10px}
  /* Уровень громкости уменьшен до строки карточки — тот же приём, что в звонке */
  .df-card-m--on .df-lvl{height:11px}
  .df-card-m--on .df-lvl i{height:11px;width:2px}
  .df-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:11px;box-shadow:var(--shadow-panel)}
  .df-panel-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .df-panel-t{font-size:14px;font-weight:600}
  .df-panel-m{font-family:var(--mono);font-size:10px;color:var(--ink-soft);white-space:nowrap}

  /* Разбор: дорожка с метками и одна правка — механики хватает на одном примере */
  .hw-rev{display:grid;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow-panel)}
  .df-review-audio{display:flex;align-items:center;gap:11px}
  .df-review-play{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink)}
  .df-review-play::after{content:'';position:absolute;left:11px;top:9px;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
  .df-review-track{position:relative;flex:1;height:46px;margin:14px 0 15px;min-width:0}
  .df-review-wave{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .df-review-wave path{fill:none;stroke:var(--line-3);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
  /* Временные метки связывают замечание с точным местом в записи; язык и содержание — разные слои */
  .df-review-marker{--marker:var(--terra);position:absolute;left:var(--pos);top:-2px;bottom:-2px;width:2px;background:var(--marker)}
  .df-review-marker b{position:absolute;left:50%;top:-16px;transform:translateX(-50%);font-family:var(--mono);font-size:9px;font-weight:500;color:var(--marker);white-space:nowrap}
  .df-review-marker--language{--marker:var(--gold);top:6px;bottom:6px}
  .df-review-marker--language b{top:auto;bottom:-18px}
  .df-review-marker--good{--marker:var(--green)}
  .df-review-duration{flex:none;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
  .hw-rev .df-review-track{height:34px;margin:12px 0 13px}
  .hw-rev .df-review-play{width:24px;height:24px}
  .hw-rev .df-review-play::after{left:9px;top:7px;border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}

  /* Плеер разбора: запись играет, метки перематывают, замечание меняется на той метке,
     которую слышно. Без файла в audio/ дорожка идёт по таймеру — механика видна всё равно */
  .df-review-play{border:0;padding:0;cursor:pointer;transition:transform .12s}
  .df-review-play:hover{transform:scale(1.07)}
  .df-review-play:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
  .hw-rev .df-review-play.is-playing::after{left:8px;top:7px;width:9px;height:10px;box-sizing:border-box;border:0;border-left:3px solid #fff;border-right:3px solid #fff}
  .df-review-track{cursor:pointer;touch-action:none}
  .df-review-track:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:3px}
  .df-review-wave--on{clip-path:inset(0 var(--rest,100%) 0 0)}
  .df-review-wave--on path{stroke:var(--blue)}
  .df-review-head{position:absolute;left:var(--p,0%);top:-5px;bottom:-5px;width:2px;background:var(--ink);opacity:0;transition:opacity .15s}
  .df-review-track.is-live .df-review-head{opacity:1}
  .df-review-marker{appearance:none;border:0;padding:0;cursor:pointer}
  /* Невидимая зона нажатия: сама метка шириной 2px */
  .df-review-marker::after{content:'';position:absolute;inset:-8px -9px}
  .df-review-marker b{pointer-events:none}
  .df-review-marker:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
  .df-review-marker.is-on{width:3px}
  .df-review-marker.is-on b{font-weight:700}
  .hw-notes{display:grid;align-content:center}
  .hw-rev .hw-note{min-height:108px}
  .hw-note[hidden]{display:none}

  /* Входной прорисовки дорожки здесь больше нет: разбор лежит в кадре, который
     и так выезжает целиком, когда до шага доходит очередь. Две анимации входа
     на одном объекте спорили бы друг с другом */

  /* Базовое замечание — про язык, оно золотое. Модификаторы идут строго после
     базы: при обратном порядке .hw-note перекрашивает их обратно в золотой */
  .hw-note{background:var(--gold-bg);border:1px solid var(--gold-line);border-radius:9px;padding:12px 13px;display:grid;gap:6px;align-content:center}
  .hw-note-l{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--gold)}
  .hw-note p{font-size:13px;line-height:1.5}
  .hw-note mark{background:var(--gold-mark);color:inherit}
  .hw-note q{quotes:'«' '»'}
  /* Замечание к содержанию — терракота, как метка на дорожке; язык остаётся золотым */
  .hw-note--sense{background:var(--amber-bg);border-color:var(--amber-line)}
  .hw-note--sense .hw-note-l{color:var(--amber)}
  .hw-note--sense mark{background:#F3D9CD}
  .hw-note--good{background:var(--green-bg);border-color:var(--green-line)}
  .hw-note--good .hw-note-l{color:var(--green)}

  /* L9 финал: один тариф карточкой — цена, состав в две колонки, кнопка внизу */
  .offer{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-raised);padding:clamp(22px,3vw,34px);max-width:760px}
  .amount{margin:0;font-size:clamp(52px,6.4vw,76px);font-weight:700;letter-spacing:-.06em;line-height:.9}
  .amount span{font-size:18px;letter-spacing:0;color:var(--ink-soft)}
  .offer .sub{margin-top:14px;font-size:16.5px;line-height:1.5;max-width:44ch;color:var(--ink)}
  .offer .sec-note{margin-bottom:clamp(20px,2.6vw,28px)}
  .incl-list{list-style:none;margin:clamp(18px,2.2vw,24px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,40px);border-top:1px solid var(--line)}
  .incl-list li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;align-content:start}
  .incl-list li svg{width:16px;height:16px;margin-top:3px;color:var(--green)}
  .offer .btn{width:100%;justify-content:center;margin-top:clamp(20px,2.4vw,26px)}
  .offer .conds{justify-content:center;margin-top:12px}
  .offer-note{margin-top:18px;font-size:13px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
  .offer-note b{display:block;margin-bottom:3px;font-size:14.5px;font-weight:600;color:var(--ink)}
  /* Оффер на тёмном: карточка перестаёт быть ещё одной белой панелью и держит
     точку решения. Кнопка становится самым ярким пятном страницы */
  .sec--ink .offer{background:var(--d-panel);border-color:#0E1116;box-shadow:var(--shadow-ink)}
  .sec--ink .kicker{color:#8A9099}
  .sec--ink .amount{color:#fff}
  .sec--ink .incl-list li svg{color:var(--d-green)}
  .sec--ink .conds .voice{color:var(--d-terra)}
  @media (max-width:820px){
    .incl-list{grid-template-columns:1fr}
  }

  /* L10 FAQ */
  .faq{max-width:820px;border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;font-size:17px;font-weight:700;letter-spacing:-.01em;position:relative}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:translateY(-70%) rotate(45deg);transition:transform .16s}
  .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
  .faq .a{padding:0 0 18px;font-size:15.5px;color:var(--ink-soft);line-height:1.6;max-width:70ch}
  .faq .a p{margin-bottom:8px}
  .faq .a ul{margin:0;padding-left:22px;display:grid;gap:6px}
  .faq .a li::marker{color:var(--blue)}

  /* Липкая полоса на телефоне */
  .sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(250,250,246,.93);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
  /* Специфичность 0,2,0 бьёт .sticky{display:block} из медиазапроса ниже */
  .sticky[hidden]{display:none}
  .sticky .btn{width:100%}
  .sticky .cond-mini{display:block;text-align:center;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);margin-top:7px}

  footer{border-top:1px solid var(--line);background:var(--panel);padding:26px 0 40px;font-size:14.5px;color:var(--ink-soft)}
  footer .fr{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline}
  footer a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);display:inline-block;padding-block:4px}
  footer a:hover{color:var(--blue-deep);border-color:var(--blue)}
  footer .note{max-width:70ch;margin-bottom:16px;line-height:1.55}

  @media (max-width:1000px){
    /* Доска уходит под кнопку и не растягивается на всю строку */
    .hero-grid{grid-template-columns:1fr;gap:clamp(24px,4vw,32px)}
    .hero-copy{max-width:none}
    .hero-vis{max-width:560px}
  }
  /* Три колонки уже не читаются: To Do и In Progress верхней строкой,
     Done — полосой внизу в две карточки */
  @media (max-width:620px){
    .df-board{grid-template-columns:repeat(2,minmax(0,1fr))}
    .df-col--done{grid-column:1/-1}
    .df-col--done>.df-lbl{grid-column:1/-1}
    .df-col--done{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:860px){
    .lede,.sec-note{max-width:none}
    .cta-wrap{max-width:none}
    .btn{width:100%}
    .track{display:none}
    .sticky{display:block}
    /* Отступ под липкую полосу. Её высота не константа: подпись под кнопкой
       переносится на вторую строку на узких экранах, и на 375px полоса
       вырастает со 96 до 121px — при фиксированных 96px она наезжала на низ
       подвала. Точное значение проставляет скрипт внизу файла, когда полоса
       появляется; 132px здесь — запас на две строки, если он не отработал */
    body{padding-bottom:var(--sticky-h,132px)}
  }
  @media (max-width:600px){
    /* Остаётся только кнопка «Войти» — как цель нажатия она читается и без вопроса перед ней */
    .login-q{display:none}
  }
  @media (max-width:560px){
    .df-review-marker b{font-size:8px}
  }
  @media (prefers-reduced-motion:reduce){
    /* Гасим переходы и сдвиг; звонок читается и без движения */
    .btn,.faq summary::after,.skip{transition:none}
    .mast--cta .btn--mast{animation:none}
    .btn:hover{transform:none}
    .df-lvl i,.df-live i,.df-ava::before,.df-caret{animation:none}
    /* Надстройка v10. Скрипт при reduce не запускается и классы js-mo / js-stg
       не ставит, но правила гасим и здесь: одного механизма для этого мало */
    [data-mo]{opacity:1 !important;transform:none !important}
    [data-mo] .case-arrow,[data-mo] .then{
      opacity:1 !important;transform:none !important;transition:none !important}
    .df-frag{transition:none;background-size:100% 2px}
    .df-flag{opacity:1;transform:none;transition:none}
    .df-w{animation:none;opacity:1}
    .stg-rail-d,.stg-rail-t{transition:none}
  }
</style>

</head>

<body>
<a class="skip" href="#main">К содержанию</a>

<header class="mast"><div class="wrap row">
  <div class="brand">
    <svg class="glyph" viewBox="0 0 19.5 18" fill="none" aria-hidden="true"><rect y="8" width="3" height="10" rx="1.5" fill="var(--blue)"></rect><rect x="5.5" width="3" height="18" rx="1.5" fill="var(--blue)"></rect><rect x="11" y="11" width="3" height="7" rx="1.5" fill="var(--terra)"></rect><rect x="16.5" y="4" width="3" height="14" rx="1.5" fill="var(--blue-soft)"></rect></svg>
    <span>English&nbsp;Sprints</span>
    <span class="track">Курс&nbsp;· <span lang="en">Interviewing in English</span></span>
  </div>
  <div class="aside">
    <span class="login-q">Уже есть аккаунт?</span>
    <a class="login" href="/login" data-ev="landing_secondary_login_clicked">Войти</a>
    <!-- Появляется, когда первый экран уходит вверх: до этого она дублировала бы
         кнопку под заголовком. На телефоне её роль играет липкая полоса внизу -->
    <a class="btn btn--mast" href="/start" data-ev="landing_cta_clicked" data-pos="mast">Проверить свой английский</a>
  </div>
</div></header>

<main id="main">

<!-- ============ L1 · HERO ============ -->
<section class="hero"><div class="wrap">
  <div class="hero-grid">
  <div class="hero-copy">
    <p class="eyebrow">Для разработчиков, QA, DevOps и data-инженеров</p>
    <h1 class="h1"><span class="s">Вакансия подходит.</span> <span class="s">Останавливает <span class="hl">английский</span>?</span></h1>
    <p class="lede"><span class="s">Веб-сервис для тренировки английского на интервью.</span>Разбираешь типичные ситуации, выполняешь задания, отвечаешь вслух и получаешь разбор своих ответов.</p>
    <div class="cta-wrap">
      <p class="nudge">Не угадывай, как ты звучишь по-английски. <b>Выясни это до интервью, а&nbsp;не&nbsp;на&nbsp;нём.</b></p>
      <a class="btn" href="/start" data-ev="landing_cta_clicked" data-pos="hero">Проверить свой английский <svg class="arrow" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3 10h13M11 5l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></a>
      <!-- Под кнопкой два условия: что не стоит денег и сколько стоит времени.
           Условие «говорить вслух» остаётся в блоке механики, в CTA-полосах
           и в FAQ — на первом экране оно отсеивает раньше, чем человек понял,
           зачем это нужно -->
      <div class="conds">
        <span class="c"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="2.5" y="7" width="11" height="6.5" rx="1" stroke="currentColor" stroke-width="1.4"></rect><path d="M5 7V5a3 3 0 016 0v2" stroke="currentColor" stroke-width="1.4"></path></svg>Бесплатно, без карты</span>
        <span class="c"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"></circle><path d="M8 5v3.2L10 10" stroke="currentColor" stroke-width="1.4"></path></svg>Около 25 минут</span>
      </div>
    </div>
    <a class="hook" href="#how">Как это устроено <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M8 3v10M4 9l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></a>
  </div>

  <!-- Продукт виден раньше, чем прочитан. Живой звонок, а не доска: движение
       уровня громкости, каретка транскрипта и точка записи цепляют взгляд и
       сразу показывают главное — здесь говорят вслух. Макет декоративный,
       весь смысл продублирован текстом в блоке «как это работает» -->
  <div class="hero-vis" aria-hidden="true">
    <div class="df-call df-call--dark" id="heroCall">
      <div class="df-call-top">
        <span class="df-live" lang="en"><i aria-hidden="true"></i>Live · <span id="heroClock">01:48</span></span>
        <span class="df-when" lang="en">Daily · Wed, 19:10</span>
      </div>
      <div class="df-ask">
        <span class="df-ava" aria-hidden="true">AK</span>
        <span class="df-who">
          <!-- Собеседник помечен как AI в подписи, а не в аватаре: инициалы
               держат персонажа, а метка снимает вопрос, с кем идёт разговор -->
          <span class="df-lbl" lang="en">Anna · AI partner</span>
          <span class="df-asked" lang="en">Which task are you taking today, and what will you focus on?</span>
        </span>
      </div>
      <div class="df-say" id="heroSay">
        <p class="df-say-top">
          <span class="df-lvl" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span>
          <i class="df-rec" aria-hidden="true"></i>
          <span lang="en">You</span>
          <span class="df-say-t" id="heroSayT">0:07</span>
        </p>
        <!-- Фрагмент в .df-frag — то место, к которому привяжется разбор.
             Без скрипта реплика видна целиком, с меткой на фрагменте -->
        <p class="df-live-tr" lang="en" id="heroTr">I'm taking the project walkthrough. I'll focus on <span class="df-frag is-marked">the decision I made</span> and why it mattered.<span class="df-caret" aria-hidden="true"></span><span class="df-flag is-on" id="heroFlag" lang="en">0:05 · review</span></p>
      </div>
    </div>
  </div>

  </div>
</div></section>

<!-- ============ L2 · СИТУАЦИЯ ============ -->
<section class="sec sec--panel"><div class="wrap">
  <div class="sec-head">
    <p class="kicker">ситуация</p>
    <h2 class="h2">Технически готов. Но на интервью это не слышно</h2>
  </div>
  <!-- Три узнаваемые ситуации по этапам интервью. Вторая часть карточки
       называет навык, который человек будет тренировать, без гарантии результата. -->
  <div class="cases">
    <article class="case" data-mo style="--mo-i:0">
      <div class="case-top" lang="en">HR screening</div>
      <div class="case-body">
        <div class="now">
          <p>Заготовленный рассказ о себе рассыпается на первом уточняющем вопросе.</p>
        </div>
        <div class="case-arrow" aria-hidden="true">↓</div>
        <div class="then">
          <span class="lbl">что тренируем</span>
          <p>Отвечать своими словами, когда разговор идёт не по плану.</p>
        </div>
      </div>
    </article>
    <article class="case" data-mo style="--mo-i:1">
      <div class="case-top" lang="en">Live coding</div>
      <div class="case-body">
        <div class="now">
          <p>Пока подбираешь слова, теряешь мысль о самой задаче.</p>
        </div>
        <div class="case-arrow" aria-hidden="true">↓</div>
        <div class="then">
          <span class="lbl">что тренируем</span>
          <p>Объяснять, что делаешь и почему, прямо по ходу решения.</p>
        </div>
      </div>
    </article>
    <article class="case" data-mo style="--mo-i:2">
      <div class="case-top" lang="en">Behavioural</div>
      <div class="case-body">
        <div class="now">
          <p>Хочешь рассказать о сложном решении, а слов хватает только на <q lang="en">It was difficult, but we did it</q>.</p>
        </div>
        <div class="case-arrow" aria-hidden="true">↓</div>
        <div class="then">
          <span class="lbl">что тренируем</span>
          <p>Говорить точно: что произошло, что сделал именно ты и какой был результат.</p>
        </div>
      </div>
    </article>
  </div>
  <!-- Вывод под тремя ситуациями: три карточки описывают симптомы, эта строка
       называет цену. Грейд — единица, в которой инженер считает свою работу,
       поэтому обобщение идёт в ней, а не в разговоре об уровне языка -->
  <p class="cases-note">Под давлением выбираешь фразу, которую точно выговоришь, а не ту, что точнее описывает твоё решение. <b>И звучишь на грейд ниже, чем работаешь.</b></p>
</div></section>

<!-- ============ L3 · КАК ЭТО РАБОТАЕТ ============ -->
<!-- Пять шагов и ОДНО место для визуала. Раньше шаги стояли колонкой слева, а
     макет держался липким кадром справа — секция читалась вертикальным
     списком, и связь «шаг N из пяти» приходилось держать в голове. Теперь
     последовательность вынесена в горизонтальный рельс 01–05: секция на время
     прокрутки становится дорожкой, внутри неё липнет один кадр, а плита
     «текст слева / макет справа» меняется целиком. Пять шагов — пять равных
     отрезков дорожки; с рельса можно перескочить к любому шагу. Ниже 901px и
     без скрипта раскладка распрямляется: слайды идут подряд, рельса нет -->
<section class="sec" id="how"><div class="wrap">
  <div class="sec-head">
    <p class="kicker">как это работает</p>
    <h2 class="h2">Недельные спринты</h2>
    <p class="sec-note">Каждая неделя — отдельный спринт с понятным планом задач: что делать сейчас, что дальше и что уже готово. Берёшь задачу, изучаешь материал, применяешь его в своём ответе и получаешь разбор. Система запоминает, что получается, а что стоит подтянуть.</p>
  </div>

  <p class="hw-strip"><span class="hw-strip-n">до старта</span><span class="hw-strip-b"><b>Проходишь Sprint&nbsp;0: около 25 минут, бесплатно.</b><span>Устные и письменные задания, связанные с интервью.</span><span>Получаешь отчёт: оценка по CEFR, уровни отдельных навыков и рекомендации, над чем работать.</span></span></p>

  <!-- Порядок в разметке — порядок чтения: шаг, его макет, следующий шаг. На
       широком экране макеты уезжают во вторую колонку и ложатся друг на друга
       в одном закреплённом кадре; связку держит скрипт внизу файла -->
  <div class="stg" id="stg">
    <!-- Порядок в разметке — порядок чтения: шаг, его макет, следующий шаг.
         На широком экране пять слайдов ложатся друг на друга в одну плиту
         внутри липкого кадра, а рельс сверху показывает, где ты сейчас;
         связку держит скрипт внизу файла -->
    <div class="stg-pin">

      <!-- Шапка кадра: имя экрана и рельс. Имя повторяет кикер секции: когда
           кадр прилипает, заголовок «как это работает» уже уехал вверх, и
           без подписи закреплённый экран остаётся безымянным. Появляется
           только в прилипшем кадре (класс is-pinned из скрипта) и спрятана
           от читалок — кикер секции уже прочитан -->
      <div class="stg-top">
        <p class="stg-cap" aria-hidden="true">как это работает</p>

        <!-- Рельс: короткая подпись шага, полная — в плите. Кнопки, а не
             значки: с рельса можно перескочить к любому шагу и с клавиатуры -->
        <ol class="stg-rail" aria-label="Шаги недели">
          <li class="stg-rail-i is-on">
            <button class="stg-rail-b" type="button" data-go="0" aria-current="step">
              <span class="stg-rail-d">01</span>
              <span class="stg-rail-t">План недели</span>
            </button>
          </li>
          <li class="stg-rail-i">
            <button class="stg-rail-b" type="button" data-go="1">
              <span class="stg-rail-d">02</span>
              <span class="stg-rail-t">Дейли</span>
            </button>
          </li>
          <li class="stg-rail-i">
            <button class="stg-rail-b" type="button" data-go="2">
              <span class="stg-rail-d">03</span>
              <span class="stg-rail-t">Задача</span>
            </button>
          </li>
          <li class="stg-rail-i">
            <button class="stg-rail-b" type="button" data-go="3">
              <span class="stg-rail-d">04</span>
              <span class="stg-rail-t">Разбор</span>
            </button>
          </li>
          <li class="stg-rail-i">
            <button class="stg-rail-b" type="button" data-go="4">
              <span class="stg-rail-d">05</span>
              <span class="stg-rail-t">Повторная проверка</span>
            </button>
          </li>
        </ol>
      </div>

      <div class="stg-deck">

        <article class="stg-slide is-on is-live" style="--at:0">
          <div class="stg-step">

          <p class="stg-n"><b class="stg-n-d">01</b><span class="stg-n-of">/ 05</span></p>
          <h3 class="stg-t">План на неделю</h3>
          <p class="stg-c">Все задания собраны на <span lang="en">kanban</span>-доске. Сразу видно текущий прогресс, что уже сделано и сколько осталось. Не нужно вспоминать, где ты остановился и что делать дальше.</p>
          </div>
        <div class="stg-frame" data-n="01">
          <div class="df-panel" aria-hidden="true">
            <div class="df-panel-top">
              <p class="df-panel-t" lang="en">Projects &amp; Behavioural Questions</p>
              <p class="df-panel-m" lang="en">Week 1 · 7 tasks</p>
            </div>
            <div class="df-board">
              <div class="df-col">
                <p class="df-lbl" lang="en">To Do · 3</p>
                <div class="df-card">
                  <p class="df-card-t" lang="en">Failure Stories</p>
                  <p class="df-card-m">~15 min</p>
                </div>
                <div class="df-card">
                  <p class="df-card-t" lang="en">Ownership Language</p>
                  <p class="df-card-m">~12 min</p>
                </div>
                <div class="df-card">
                  <p class="df-card-t" lang="en">Handling Follow-ups</p>
                  <p class="df-card-m">~10 min</p>
                </div>
              </div>
              <div class="df-col">
                <p class="df-lbl" lang="en">In Progress · 1</p>
                <div class="df-card df-card--on">
                  <p class="df-tags"><span class="tag tag--story" lang="en">TASK</span><span class="tag tag--mode" lang="en">SPEAK</span></p>
                  <p class="df-card-t" lang="en">Project Walkthrough</p>
                  <p class="df-card-d" lang="en">Context → role → decision → result</p>
                  <p class="df-card-m df-card-m--on">
                    <span class="df-lvl" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span>
                    <span lang="en">Speaking · 0:07</span>
                  </p>
                </div>
              </div>
              <div class="df-col df-col--done">
                <p class="df-lbl" lang="en">Done · 2</p>
                <div class="df-card">
                  <p class="df-card-t" lang="en">Project Follow-ups</p>
                  <p class="df-card-m df-card-m--ok"><svg viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2.5 6.4L4.8 8.7 9.5 3.6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path></svg>Разобрано</p>
                </div>
                <div class="df-card">
                  <p class="df-card-t" lang="en">Stories for Recruiters</p>
                  <p class="df-card-m df-card-m--ok"><svg viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2.5 6.4L4.8 8.7 9.5 3.6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path></svg>Разобрано</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        </article>

        <article class="stg-slide" style="--at:1">
          <div class="stg-step">

          <p class="stg-n"><b class="stg-n-d">02</b><span class="stg-n-of">/ 05</span><span class="stg-n-m">2–3 мин</span></p>
          <h3 class="stg-t">Дейли</h3>
          <p class="stg-c">Короткий разговор с AI-собеседником, который видит твою доску и задаёт вопросы по задачам и планам на день. Небольшой ежедневный ритуал, чтобы потренировать английский, зафиксировать план и не выпадать из подготовки.</p>
          </div>
        <div class="stg-frame" data-n="02">
          <div class="df-call">
            <div class="df-call-top">
              <span class="df-live" lang="en"><i aria-hidden="true"></i>Live · 01:48</span>
              <span class="df-when" lang="en">Daily · Wed, 19:10</span>
            </div>
            <div class="df-ask">
              <span class="df-ava" aria-hidden="true">AK</span>
              <span class="df-who">
                <span class="df-asked" lang="en">Which task are you taking today, and what will you focus on?</span>
              </span>
            </div>
            <div class="df-say">
              <p class="df-say-top">
                <span class="df-lvl" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span>
                <span lang="en">You</span>
                <span class="df-say-t">0:07</span>
              </p>
              <p class="df-live-tr" lang="en">I'm taking the project walkthrough. I'll focus on the decision I made and why it mattered.<span class="df-caret" aria-hidden="true"></span></p>
            </div>
          </div>
        </div>
        </article>

        <article class="stg-slide" style="--at:2">
          <div class="stg-step">

          <p class="stg-n"><b class="stg-n-d">03</b><span class="stg-n-of">/ 05</span><span class="stg-n-m">~10 мин</span></p>
          <h3 class="stg-t">Задача</h3>
          <p class="stg-c">Каждая карточка помогает подготовиться к конкретной ситуации: короткое объяснение, схема ответа, примеры и полезные фразы. Разбираешь материал, а затем применяешь его в своём ответе.</p>
          </div>
        <div class="stg-frame" data-n="03">
          <div class="hw-task">
            <p class="df-tags"><span class="tag tag--story" lang="en">TASK</span><span class="tag tag--mode" lang="en">SPEAK</span></p>
            <p class="hw-task-t" lang="en">Project Walkthrough</p>
            <p class="hw-task-d" lang="en">Context → role → decision → result</p>
            <div class="hw-inside">
              <p class="df-lbl">внутри задачи</p>
              <p><i aria-hidden="true"></i>что обычно проверяют таким вопросом</p>
              <p><i aria-hidden="true"></i>схема ответа и нужные формулировки</p>
              <p><i aria-hidden="true"></i>твой ответ голосом, своими словами</p>
            </div>
          </div>
        </div>
        </article>

        <article class="stg-slide" style="--at:3">
          <div class="stg-step">

          <p class="stg-n"><b class="stg-n-d">04</b><span class="stg-n-of">/ 05</span></p>
          <h3 class="stg-t">Разбор выполненной задачи</h3>
          <p class="stg-c">Ответ записывается и разбирается по конкретным фрагментам. Каждое замечание привязано к моменту в записи: что ты сказал, что было непонятно и как можно сказать точнее. Никаких общих советов вроде <q lang="en">improve your vocabulary</q>.</p>
          <p class="stg-c">Запись и разбор остаются в задаче — к ним можно вернуться в любой момент.</p>
          </div>
        <div class="stg-frame" data-n="04">
          <div class="hw-rev">
            <div class="df-review-audio">
              <button class="df-review-play" type="button" id="revPlay" aria-label="Прослушать ответ"></button>
              <span class="df-review-track" id="revTrack" role="slider" tabindex="0" aria-label="Позиция в записи" aria-valuemin="0" aria-valuemax="36" aria-valuenow="0">
                <svg class="df-review-wave" viewBox="0 0 300 34" preserveAspectRatio="none" aria-hidden="true">
                  <path d="M2 12v10M12 7v20M22 13v8M32 4v26M42 10v14M52 6v22M62 13v8M72 8v18M82 11v12M92 4v26M102 13v8M112 7v20M122 10v14M132 5v24M142 13v8M152 8v18M162 11v12M172 4v26M182 13v8M192 7v20M202 10v14M212 5v24M222 13v8M232 8v18M242 11v12M252 6v22M262 13v8M272 9v16M282 11v12M292 7v20"></path>
                </svg>
                <span class="df-review-head" aria-hidden="true"></span>
                <button class="df-review-marker" type="button" data-t="6" data-note="0" aria-label="Замечание на 0:06"><b>0:06</b></button>
                <button class="df-review-marker df-review-marker--language" type="button" data-t="12" data-note="1" aria-label="Замечание на 0:12"><b>0:12</b></button>
                <button class="df-review-marker" type="button" data-t="19" data-note="2" aria-label="Замечание на 0:19"><b>0:19</b></button>
                <button class="df-review-marker df-review-marker--language" type="button" data-t="24" data-note="3" aria-label="Замечание на 0:24"><b>0:24</b></button>
                <button class="df-review-marker df-review-marker--good" type="button" data-t="31" data-note="4" aria-label="Удачное место на 0:31"><b>0:31</b></button>
              </span>
              <span class="df-review-duration" id="revTime">0:00 / 0:36</span>
            </div>
            <div class="hw-notes" id="revNotes" aria-live="polite">
              <div class="hw-note hw-note--sense">
                <p class="hw-note-l">0:06 · содержание</p>
                <p><q lang="en">difficult release… deadline was very tight</q> — непонятно, что именно сделало релиз сложным. Нужен один подтверждённый факт</p>
              </div>
              <div class="hw-note" hidden="">
                <p class="hw-note-l" lang="en">0:12 · grammar</p>
                <p><q lang="en">I <mark>am working</mark> on this service since 2021</q> → <q lang="en">I <mark>have been working</mark>…</q>. С since и for нужен перфект</p>
              </div>
              <div class="hw-note hw-note--sense" hidden="">
                <p class="hw-note-l">0:19 · содержание</p>
                <p><q lang="en">I helped the teams organize the work</q> — не показывает твою роль. Что именно ты организовал, изменил, решил</p>
              </div>
              <div class="hw-note" hidden="">
                <p class="hw-note-l" lang="en">0:24 · vocab</p>
                <p><q lang="en">we <mark>made refactoring of</mark> the code</q> → <q lang="en">we <mark>refactored</mark> the code</q>. Калька с русского</p>
              </div>
              <div class="hw-note hw-note--good" hidden="">
                <p class="hw-note-l">0:31 · здесь получилось</p>
                <p>Результат назван конкретно и отделён от описания действий</p>
              </div>
            </div>
          </div>
        </div>
        </article>

        <article class="stg-slide" style="--at:4">
          <div class="stg-step">

          <p class="stg-n"><b class="stg-n-d">05</b><span class="stg-n-of">/ 05</span></p>
          <h3 class="stg-t">Повторная проверка</h3>
          <p class="stg-c">Если какая-то ошибка в ответах повторяется, система это запомнит и добавит задачу на её отработку. Позже она проверит то же самое в новой ситуации, чтобы убедиться, что ошибка больше не повторяется.</p>
          </div>
        <!-- Кадр 05 рифмуется с кадром 01: та же доска, только неделей позже и с
             вернувшейся ошибкой. Метка 0:12 — та самая, что стоит на дорожке
             разбора выше: при правке замечаний её надо пересчитать -->
        <div class="stg-frame" data-n="05">
          <div class="df-panel" aria-hidden="true">
            <div class="df-panel-top">
              <p class="df-panel-t" lang="en">Week 2 · To Do</p>
              <p class="df-panel-m">+1 задача</p>
            </div>
            <div class="df-col">
              <div class="df-card df-card--on">
                <p class="df-tags"><span class="tag tag--fix" lang="en">FIX</span><span class="tag tag--mode" lang="en">SPEAK</span></p>
                <p class="df-card-t" lang="en">Timelines in Past Tenses</p>
                <p class="df-card-d">Из разбора 0:12 — та же ошибка в новом вопросе</p>
                <p class="df-card-m">~8 min</p>
              </div>
              <div class="df-card">
                <p class="df-card-t" lang="en">Failure Stories</p>
                <p class="df-card-m">~15 min</p>
              </div>
              <div class="df-card">
                <p class="df-card-t" lang="en">Ownership Language</p>
                <p class="df-card-m">~12 min</p>
              </div>
            </div>
          </div>
        </div>
        </article>
      </div>

    </div>
  </div>

  <p class="hw-strip hw-strip--out"><span class="hw-strip-n">через 4 недели</span><span class="hw-strip-b"><b>Чувствуешь уверенность в своём английском на интервью.</b><span>Повторная диагностика на новых заданиях показывает прогресс по тем же навыкам, что в Sprint&nbsp;0.</span><span>Получаешь оба отчёта, записи ответов и примеры из своего опыта за месяц.</span></span></p>
</div></section>

<!-- Средней точки CTA между механикой и финалом нет: после «Через четыре
     недели» человек ещё не видел ни цены, ни того, кому продукт не подойдёт.
     На телефоне кнопка всё это время висит липкой полосой внизу -->
<!-- ============ L9 · ЦЕНА И СТАРТ ============ -->
<section class="sec sec--ink" id="start"><div class="wrap">
  <p class="kicker">стоимость</p>

  <!-- Один тариф карточкой: цена, состав в две колонки, кнопка внизу карточки.
       Вертикальный список из четырёх пунктов и отдельная панель CTA растягивали
       блок на полтора экрана; условия продления теперь живут в FAQ -->
  <div class="offer" data-mo="fade">
    <p class="amount">$29<span> / месяц</span></p>
    <p class="sub">Месяц ежедневной практики и разбора ответов стоит примерно как одно занятие с репетитором.</p>

    <ul class="incl-list">
      <li><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>Четыре недели подготовки по программе, составленной методистом.</span></li>
      <li><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>Голосовая практика с AI-собеседником и разбор каждого ответа.</span></li>
      <li><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>План учитывает дату интервью: чем меньше времени осталось, тем больше заданий будет в каждом спринте.</span></li>
      <li><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>После курса сохраняются записи и разборы, а система продолжает собирать следующие спринты из новых задач и того, что стоит повторить.</span></li>
    </ul>

    <a class="btn" id="finalCta" href="/start" data-ev="landing_cta_clicked" data-pos="final">Проверить свой английский <svg class="arrow" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3 10h13M11 5l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></a>
    <div class="conds">
      <span class="c"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="2.5" y="7" width="11" height="6.5" rx="1" stroke="currentColor" stroke-width="1.4"></rect><path d="M5 7V5a3 3 0 016 0v2" stroke="currentColor" stroke-width="1.4"></path></svg>Бесплатно, без карты</span>
      <span class="c"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"></circle><path d="M8 5v3.2L10 10" stroke="currentColor" stroke-width="1.4"></path></svg>Около 25 минут</span>
      <span class="c voice"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="6" y="2" width="4" height="8" rx="2" stroke="currentColor" stroke-width="1.5"></rect><path d="M4 8a4 4 0 008 0M8 12v2" stroke="currentColor" stroke-width="1.5"></path></svg>Нужно говорить вслух</span>
    </div>
    <p class="offer-note"><b>Сначала — бесплатный Sprint&nbsp;0 с диагностикой, платить заранее не нужно.</b><br>Подписка продлевается раз в месяц, отменить можно в аккаунте в любой момент.</p>
  </div>
</div></section>

<!-- ============ L10 · FAQ ============ -->
<section class="sec" id="details"><div class="wrap">
  <div class="sec-head">
    <h2 class="h2">FAQ</h2>
  </div>
  <div class="faq">
    <details data-ev="landing_faq_opened" data-q="fit"><summary>А мне подойдёт этот курс?</summary><div class="a"><p>Курс подойдёт, если:</p><ul><li>ты работаешь в IT на технической позиции, например: разработчиком, QA или DevOps инженером и т.п.;</li><li>у тебя уже есть базовый английский, с нуля мы не учим;</li><li>ты хочешь подтянуть английский для всех этапов интервью, а не технические знания;</li><li>до интервью не меньше 10 дней. Если меньше, ты можешь не успеть пройти весь курс.</li></ul></div></details>
    <details data-ev="landing_faq_opened" data-q="subscription"><summary>Зачем подписка, если курс длится четыре недели?</summary><div class="a"><p>Четыре недели длится курс <span lang="en">Interviewing in English</span>. После него занятия не заканчиваются: в следующих спринтах появляются задачи из других курсов, а также задачи на повторение и закрепление уже пройденного.</p><p>Подписка продлевается раз в месяц. Отменить её можно в любой момент — доступ останется до конца оплаченного периода.</p></div></details>
    <details data-ev="landing_faq_opened" data-q="time"><summary>Сколько времени это занимает?</summary><p class="a">Обычно — от 10 минут в день. Можно делать больше или пропускать дни: задания не привязаны к конкретным датам. Но чем регулярнее говоришь вслух, тем больше пользы.</p></details>
    <details data-ev="landing_faq_opened" data-q="soon"><summary>Если интервью через две недели, есть смысл начинать?</summary><p class="a">Да. Курс подстроится под оставшееся количество времени, но задания будут распределены плотнее и заниматься придётся чаще. Если до интервью меньше 10 дней, ты можешь не успеть пройти весь курс.</p></details>
    <details data-ev="landing_faq_opened" data-q="vs_chat"><summary>Чем это отличается от разговора с ChatGPT?</summary><p class="a">Программу курса составляет методист: задания идут в продуманной последовательности и ведут к конкретной цели. Если в ответе возникает ошибка, которая мешает смыслу, система включает её в следующие задания и даёт отработать в разных ситуациях. В ChatGPT каждый разговор по сути начинается заново. Здесь предыдущие ответы влияют на то, что ты будешь делать дальше.</p></details>
    <details data-ev="landing_faq_opened" data-q="privacy"><summary>Кто слушает мои записи?</summary><p class="a">Записи обрабатывает система и внешний AI-провайдер. Другие пользователи их не слышат, а общие модели мы на них не обучаем. Отдельную запись или весь аккаунт можно удалить.</p></details>
  </div>
</div></section>

</main>

<footer><div class="wrap">
  <div class="fr">
    <a href="/terms" data-ev="landing_legal_opened" data-doc="terms">Условия использования</a>
    <a href="/privacy" data-ev="landing_legal_opened" data-doc="privacy">Политика конфиденциальности</a>
    <a href="/voice" data-ev="landing_legal_opened" data-doc="voice">Обработка голосовых данных</a>
    <a href="/support">Поддержка</a>
  </div>
</div></footer>

<div class="sticky" id="sticky" hidden="">
  <a class="btn" href="#start" data-ev="landing_cta_clicked" data-pos="sticky">Проверить свой английский</a>
  <span class="cond-mini">Бесплатно, без карты · около 25 минут · нужно говорить вслух</span>
</div>

<script>
(function(){
  /* ---- analytics queue: имена событий по 08-landing-requirements, разд. 12.1 ---- */
  var q = window.esEvents = window.esEvents || [];
  function track(name, props){ q.push([name, props || {}, Date.now()]); }

  track('landing_viewed', {
    referrer: document.referrer || null,
    search: location.search || null,
    width: window.innerWidth
  });

  document.addEventListener('click', function(e){
    var el = e.target.closest('[data-ev]');
    if(!el || el.tagName === 'DETAILS') return;
    track(el.getAttribute('data-ev'), {
      position: el.getAttribute('data-pos') || undefined,
      doc: el.getAttribute('data-doc') || undefined
    });
  });

  document.querySelectorAll('details[data-ev]').forEach(function(d){
    d.addEventListener('toggle', function(){
      if(d.open) track('landing_faq_opened', { question: d.getAttribute('data-q') });
    });
  });

  /* ---- scroll depth по ключевым блокам ---- */
  if('IntersectionObserver' in window){
    /* Имена отметок совпадают с номерами секций в комментариях выше, а порядок —
       с порядком блоков на странице: иначе глубина прокрутки читается неверно.
       Секция «Перед тем как начать» держала среднюю отметку и уехала в FAQ,
       поэтому id="details" теперь на FAQ — это и есть L10. Цена стала
       предпоследним блоком и получила своё L9 вместо прежнего L12.
       Отметки L4 больше нет: секция «дальше» убрана со страницы */
    var marks = [['#how','L3'],['#start','L9'],['#details','L10']];
    marks.forEach(function(m){
      var el = document.querySelector(m[0]);
      if(!el) return;
      var io = new IntersectionObserver(function(en){
        if(en[0].isIntersecting){ track('landing_scroll_depth', { block: m[1] }); io.disconnect(); }
      }, { threshold: .15 });
      io.observe(el);
    });
  }

  /* ---- после первого экрана: полоса внизу на телефоне, кнопка в шапке на широких ---- */
  var sticky = document.getElementById('sticky');
  var mast = document.querySelector('.mast');
  var hero = document.querySelector('.hero');
  /* Высота полосы зависит от того, в сколько строк лёг текст под кнопкой,
     поэтому отступ под неё меряем по факту, а не держим константой в CSS.
     Нулевую высоту не записываем: полосы нет в потоке, когда её убрал [hidden]
     или медиазапрос на широком экране, — там отступ и не нужен */
  function syncStickyH(){
    if(!sticky || !sticky.offsetHeight) return;
    document.documentElement.style.setProperty('--sticky-h', (sticky.offsetHeight + 16) + 'px');
  }
  window.addEventListener('resize', syncStickyH);

  if(hero && 'IntersectionObserver' in window){
    new IntersectionObserver(function(en){
      var passed = !en[0].isIntersecting;
      if(sticky) sticky.hidden = !passed;
      if(mast) mast.classList.toggle('mast--cta', passed);
      syncStickyH();
    }, { threshold: 0 }).observe(hero);
  }
})();

/* ============ ДВИЖЕНИЕ ============
   Всё ниже — надстройка. Разметка полная и читается без единой строки скрипта:
   классы, которые прячут блоки до появления, ставит сам скрипт, а при
   prefers-reduced-motion не ставит вовсе. */
(function(){
  var mq = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)');
  var reduce = !!(mq && mq.matches);
  var hasIO = 'IntersectionObserver' in window;

  /* ---- появление блоков по мере прокрутки ----
     Только там, где движение что-то объясняет: связка «сейчас → что тренируем»,
     порядок номеров на доске, дорожка разбора, набор бэклога. Одинакового
     въезда на каждую секцию нет — он ничего не сообщает */
  var mo = [].slice.call(document.querySelectorAll('[data-mo]'));
  if(mo.length && hasIO && !reduce){
    document.documentElement.classList.add('js-mo');
    var io = new IntersectionObserver(function(en){
      en.forEach(function(e){
        if(!e.isIntersecting) return;
        e.target.classList.add('is-in');
        io.unobserve(e.target);
      });
    }, { threshold:.12, rootMargin:'0px 0px -6% 0px' });
    mo.forEach(function(el){ io.observe(el); });
    /* Страховка: если наблюдатель не отработал, всё, что уже в кадре, показываем
       принудительно. Блоки ниже сгиба остаются на наблюдателе */
    setTimeout(function(){
      mo.forEach(function(el){
        if(el.classList.contains('is-in')) return;
        var r = el.getBoundingClientRect();
        if(r.top < innerHeight && r.bottom > 0) el.classList.add('is-in');
      });
    }, 2500);
  }

  /* ---- «как это работает»: рельс шагов и одна плита на пять шагов ----
     Класс js-stg включает раскладку с липким кадром: секция становится
     дорожкой прокрутки длиной в пять отрезков, внутри неё липнет рельс с
     плитой. Скрипт считает одно число от 0 до 1 и кладёт его в --stg-p:
     от него идут и заливка рельса, и расхождение слайдов — пороги живут в
     CSS. Классы (активный узел, aria-current) переключаются по отрезкам. Без него и при reduce каждый макет остаётся под своим шагом в
     порядке разметки, а рельса нет вовсе. Правила js-stg живут только выше
     901px, поэтому на узком экране класс висит, а раскладка распрямлена */
  var stg = document.getElementById('stg');
  if(stg && !reduce){
    var stPin    = stg.querySelector('.stg-pin'),
        stSlides = [].slice.call(stg.querySelectorAll('.stg-slide')),
        stNodes  = [].slice.call(stg.querySelectorAll('.stg-rail-i')),
        stBtns   = [].slice.call(stg.querySelectorAll('.stg-rail-b')),
        stWide   = matchMedia('(min-width:901px)'),
        stCur = -1, stP = -1, stW = -1, stAim = 0, stRaf = 0, stT = 0,
        /* Ширина окна расхождения слайдов, доля отрезка. То же число, что в CSS */
        ST_W = .5,
        /* Посадочная полоса в начале дорожки и укороченный хвост пятого шага,
           в отрезках. Числа продублированы в CSS: высота .js-stg считает
           5.3 = ST_RUN + 4 + ST_END */
        ST_RUN = .8, ST_END = .5, ST_U = ST_RUN + 4 + ST_END;

    if(stPin && stSlides.length && stSlides.length === stNodes.length){
      stg.classList.add('js-stg');

      /* Смещение, на котором кадр прилипает: то же значение, что в CSS у
         .stg-pin. Читаем его из стилей, чтобы не держать число в двух местах */
      function stagePinTop(){ return parseFloat(getComputedStyle(stPin).top) || 0; }
      /* Доля пройденной дорожки: 0 в момент прилипания, 1 в момент отлипания.
         Не обрезана до 0…1 — обрезает tick */
      function stageProgress(){
        var run = stg.offsetHeight - stPin.offsetHeight;
        if(run <= 0) return 0;
        return (stagePinTop() - stg.getBoundingClientRect().top) / run;
      }
      /* Посадочная полоса: первые ST_RUN отрезков дорожки принимают на себя
         инерцию быстрого листания со всей страницы — прилетевший с разгона
         оказывается внутри полосы, а там ещё стоит шаг 01. Полоса не мёртвая:
         вместе с первой половиной отрезка шага 01 она растянута на его
         стоячую фазу (p от 0 до 0.1), так что полоса рельса в ней ползёт и
         видно, что секция идёт вперёд. Хвост пятого шага, наоборот, сжат до
         ST_END: после него ничего не заезжает, и стоять целый отрезок ему
         незачем. stageMap переводит пройденные отрезки дорожки в рисуемое p,
         stageUnit — обратно, для прыжков с рельса */
      function stageMap(u){
        var s = ST_RUN + .5;
        return (u < s ? u * .5 / s
              : u < ST_RUN + 4 ? u - ST_RUN
              : 4 + (u - ST_RUN - 4) / ST_END) / 5;
      }
      function stageUnit(p5){
        return p5 < .5 ? p5 * (ST_RUN + .5) / .5
             : p5 < 4 ? p5 + ST_RUN
             : ST_RUN + 4 + (p5 - 4) * ST_END;
      }
      function setStage(i){
        if(i === stCur) return;
        stCur = i;
        stSlides.forEach(function(s, k){ s.classList.toggle('is-on', k === i); });
        stNodes.forEach(function(n, k){
          n.classList.toggle('is-on', k === i);
          n.classList.toggle('is-past', k < i);
        });
        stBtns.forEach(function(b, k){
          if(k === i) b.setAttribute('aria-current', 'step');
          else b.removeAttribute('aria-current');
        });
      }
      function paintStage(p){
        /* Совсем мелкие шаги не пишем: это лишняя пересборка стиля на кадр */
        if(Math.abs(p - stW) >= .0005){
          stW = p;
          stg.style.setProperty('--stg-p', p.toFixed(4));
          /* Видимы только карточки, которые ещё не накрыты целиком. Окно
             заезда то же, что в CSS (.5): шире держать нельзя — кнопки
             невидимой карточки начнут ловить фокус */
          stSlides.forEach(function(s, k){
            var l = p * stSlides.length - k;
            s.classList.toggle('is-live', l > -ST_W && (l < 1 || k === stSlides.length - 1));
          });
        }
        stP = p;
        var i = Math.floor(p * stSlides.length);
        setStage(i > stSlides.length - 1 ? stSlides.length - 1 : i);
      }
      /* Рисуемое число не прибито к прокрутке напрямую, а догоняет её с
         коротким догоном: колесо мыши крутится ступенчатыми скачками, и без
         догона каждый щелчок телепортировал карточку на десятки процентов
         ширины. Догон экспоненциальный и считается от реального времени
         кадра, поэтому темп одинаков на любой частоте экрана. Цикл живёт,
         только пока есть что догонять. Первый расчёт и скачки длиннее пары
         отрезков (переход по якорю, смена раскладки) ставятся без догона:
         листать колоду насквозь незачем */
      function tickStage(now){
        stRaf = 0;
        if(!stWide.matches) return;
        var raw = stageMap(stageProgress() * ST_U);
        stAim = raw < 0 ? 0 : raw > 1 ? 1 : raw;
        /* Имя экрана в шапке кадра живёт, только пока кадр прилип: до
           прилипания кикер секции ещё на экране и имя дублировалось бы */
        stg.classList.toggle('is-pinned', raw > .002);
        var dt = Math.min(64, now - stT); stT = now;
        var p;
        if(stP < 0 || Math.abs(stAim - stP) > .35){
          p = stAim;
        } else {
          p = stP + (stAim - stP) * (1 - Math.exp(-dt / 110));
          if(Math.abs(stAim - p) < .0004) p = stAim;
        }
        paintStage(p);
        if(stP !== stAim) stRaf = requestAnimationFrame(tickStage);
      }
      function queueStage(){ if(!stRaf){ stT = performance.now(); stRaf = requestAnimationFrame(tickStage); } }

      /* Клик по рельсу метит в СЕРЕДИНУ СТОЯЧЕЙ ФАЗЫ нужного шага (первая
         половина отрезка), а не в границу: у границы хватает пары пикселей
         прокрутки, чтобы карточка поехала */
      function gotoStage(k){
        var run = stg.offsetHeight - stPin.offsetHeight,
            zero = stg.getBoundingClientRect().top + pageYOffset - stagePinTop();
        /* Подсветку узла не ставим руками: её доведёт сама прокрутка, и рельс
           доедет вместе с ней, а не прыгнет раньше плиты */
        scrollTo({ top: zero + run * stageUnit(k + .25) / ST_U, behavior:'smooth' });
      }
      stBtns.forEach(function(b, k){
        b.addEventListener('click', function(){ if(stWide.matches) gotoStage(k); });
      });
      /* Стрелками — по рельсу: фокус переезжает на соседний узел и уводит
         за собой кадр */
      stg.addEventListener('keydown', function(e){
        if(!stWide.matches) return;
        var d = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0,
            at = stBtns.indexOf(document.activeElement);
        if(!d || at < 0) return;
        var k = at + d;
        if(k < 0 || k > stBtns.length - 1) return;
        e.preventDefault();
        stBtns[k].focus();
        gotoStage(k);
      });

      addEventListener('scroll', queueStage, { passive:true });
      /* После смены ширины пересчитываем с нуля: при переходе через 901px
         прежний активный шаг мог остаться от другой раскладки */
      addEventListener('resize', function(){ stCur = -1; stP = -1; stW = -1; queueStage(); });
      queueStage();
    }
  }

  /* ---- финиш «через 4 недели» идёт за прокруткой ----
     Кульминация потока, и собирается она рукой: пока полосу поднимают со дна
     экрана к середине, чертится засечка и встают строки. Скрипт считает одно
     число от 0 до 1 и кладёт его в --fin; пороги строк живут в CSS. Работает
     на любой ширине — здесь это не раскладка, а сам эпизод */
  var fin = document.querySelector('.hw-strip--out');
  if(fin && !reduce){
    var finQueued = false, finP = -1;

    function paintFin(){
      finQueued = false;
      var vh = innerHeight, top = fin.getBoundingClientRect().top;
      /* 0 — верх полосы на 95% высоты окна, 1 — он же на 50% */
      var p = Math.min(1, Math.max(0, (vh * .95 - top) / (vh * .45)));
      /* Мелкие шаги не пишем: это лишняя пересборка стиля на каждый кадр */
      if(Math.abs(p - finP) < .004) return;
      finP = p;
      fin.style.setProperty('--fin', p.toFixed(3));
    }
    function queueFin(){ if(!finQueued){ finQueued = true; requestAnimationFrame(paintFin); } }

    document.documentElement.classList.add('js-fin');
    addEventListener('scroll', queueFin, { passive:true });
    addEventListener('resize', queueFin);
    paintFin();
  }

  /* ---- первый экран: реплика собирается по словам ----
     Главный авторский эпизод страницы. Уровень громкости идёт за словами, а не
     по своему кругу, таймер считает то же время, и в конце фрагмент получает
     метку — ровно то, что обещает текст: разбор привязан к записи.
     При prefers-reduced-motion не запускается: в разметке уже лежит конечное
     состояние — реплика целиком, метка на фрагменте, 0:07 на таймере */
  var call = document.getElementById('heroCall');
  if(call && !reduce){
    var tr = document.getElementById('heroTr'),
        say = document.getElementById('heroSay'),
        sayT = document.getElementById('heroSayT'),
        clock = document.getElementById('heroClock'),
        flag = document.getElementById('heroFlag'),
        lvl = call.querySelector('.df-lvl'),
        bars = [].slice.call(call.querySelectorAll('.df-lvl i')),
        caret = call.querySelector('.df-caret');

    if(tr && say && lvl && bars.length){
      /* Слова с пометкой «внутри фрагмента»: фрагмент собирается заново,
         когда до него доходит очередь */
      var words = [];
      [].slice.call(tr.childNodes).forEach(function(n){
        if(n.nodeType === 3){
          n.nodeValue.split(/\s+/).forEach(function(w){ if(w) words.push({ w:w, f:false }); });
        } else if(n.classList && n.classList.contains('df-frag')){
          n.textContent.split(/\s+/).forEach(function(w){ if(w) words.push({ w:w, f:true }); });
        }
      });

      if(words.length){
        /* Расписание: ~300 мс на слово плюс 26 мс на букву — это примерно
           150 слов в минуту, темп обычной речи. После точки пауза длиннее */
        var sched = [], acc = 0, fragEnd = 0;
        words.forEach(function(o){
          var d = 300 + o.w.replace(/[^A-Za-z]/g, '').length * 26;
          sched.push({ o:o, at:acc, voiced:Math.round(d * .66) });
          acc += d;
          if(/\.$/.test(o.w)) acc += 300;
          else if(/,$/.test(o.w)) acc += 150;
          if(o.f) fragEnd = acc;
        });
        var SPEAK = acc, LEAD = 600, MARK = 800, HOLD = 3200;
        var CLOCK0 = 108; /* 01:48 в шапке звонка */

        /* Цикл начинается не с пустой строки: несколько слов уже сказано, и ты
           подключаешься к идущему ответу. Пустая строка с одной кареткой читалась
           как «здесь ничего нет», а не как «здесь говорят».
           PRE — сколько слов уже лежит в строке. START — момент реплики, на
           который приходится начало цикла: за 220 мс до следующего слова, чтобы
           оно пришло сразу, но не в тот же кадр. SKIP вычитается из всех
           задержек и из t0, поэтому таймер и уровень громкости идут от START */
        var PRE = Math.min(3, sched.length - 1);
        var START = Math.max(0, sched[PRE].at - 220);
        var SKIP = LEAD + START;

        var timers = [], raf = 0, t0 = 0, av = .18, live = false, frag = null, on = false;
        function fmt(t){ t = Math.max(0, Math.floor(t)); return Math.floor(t / 60) + ':' + ('0' + (t % 60)).slice(-2); }
        function at(ms, fn){ timers.push(setTimeout(fn, ms - SKIP)); }
        function halt(){ timers.forEach(clearTimeout); timers = []; cancelAnimationFrame(raf); raf = 0; }

        /* Слово в строку. Пробел — отдельным узлом, а не внутри слова: иначе
           подчёркивание фрагмента начиналось бы с пустого места */
        function putWord(s, i){
          var w = document.createElement('span'), tail = caret || null;
          w.className = 'df-w';
          w.textContent = s.o.w;
          if(s.o.f){
            if(!frag){
              if(i) tr.insertBefore(document.createTextNode(' '), tail);
              frag = document.createElement('span');
              frag.className = 'df-frag';
              tr.insertBefore(frag, tail);
            } else {
              frag.appendChild(document.createTextNode(' '));
            }
            frag.appendChild(w);
          } else {
            frag = null;
            if(i) tr.insertBefore(document.createTextNode(' '), tail);
            tr.insertBefore(w, tail);
          }
        }

        function paint(now){
          raf = requestAnimationFrame(paint);
          var el = now - t0;
          /* Длительность звонка в шапке идёт с ведущим нулём, как в разметке */
          if(clock) clock.textContent = ('0' + fmt(CLOCK0 + el / 1000)).slice(-5);
          var t = el - LEAD, target = .18;
          if(live && t >= 0){
            if(t <= SPEAK && sayT) sayT.textContent = fmt(t / 1000);
            for(var i = 0; i < sched.length; i++){
              if(t >= sched[i].at && t < sched[i].at + sched[i].voiced){ target = 1; break; }
            }
          }
          av += (target - av) * .22;
          for(var b = 0; b < bars.length; b++){
            var ph = Math.sin(now / 150 + b * 1.7) * .5 + .5;
            bars[b].style.setProperty('--a', Math.min(1, .16 + av * (.35 + .65 * ph) * .95).toFixed(3));
          }
        }

        function run(){
          halt();
          /* Сброс: строка чистится и тут же, в этом же кадре, набирается
             начало реплики. Пустого состояния не видно ни одного кадра */
          tr.textContent = '';
          frag = null; av = .18;
          if(flag) flag.classList.remove('is-on');
          t0 = performance.now() - SKIP;
          raf = requestAnimationFrame(paint);

          /* Ответ уже идёт: точка записи горит, каретка стоит, таймер не в нуле */
          live = true;
          say.classList.remove('is-idle');
          say.classList.add('is-live');
          if(caret){ caret.hidden = false; tr.appendChild(caret); }
          if(sayT) sayT.textContent = fmt(START / 1000);

          sched.forEach(function(s, i){
            /* Сказанное до START ставится сразу, остальное — по расписанию */
            if(s.at < START) putWord(s, i);
            else at(LEAD + s.at, function(){ putWord(s, i); });
          });

          at(LEAD + SPEAK + 220, function(){
            live = false;
            say.classList.remove('is-live');
            say.classList.add('is-idle');
            if(caret) caret.hidden = true;
            if(sayT) sayT.textContent = fmt(SPEAK / 1000);
          });

          /* Метка на фрагменте: подчёркивание проезжает под словами, рядом
             встаёт время — то же, что метки на дорожке разбора ниже */
          at(LEAD + SPEAK + MARK, function(){
            var f = tr.querySelector('.df-frag');
            if(f) f.classList.add('is-marked');
            if(flag){
              flag.textContent = fmt(fragEnd / 1000) + ' · review';
              tr.appendChild(flag);
              requestAnimationFrame(function(){ flag.classList.add('is-on'); });
            }
          });

          at(LEAD + SPEAK + MARK + HOLD, run);
        }

        function play(v){
          if(v === on) return;
          on = v;
          if(v){ lvl.classList.add('df-lvl--live'); run(); }
          else { halt(); lvl.classList.remove('df-lvl--live'); }
        }

        /* Цикл идёт только когда звонок в кадре и вкладка открыта */
        if(hasIO){
          new IntersectionObserver(function(en){
            play(en[0].isIntersecting && !document.hidden);
          }, { threshold:.25 }).observe(call);
        } else { play(true); }
        document.addEventListener('visibilitychange', function(){
          if(document.hidden) play(false);
          else { var r = call.getBoundingClientRect(); play(r.top < innerHeight && r.bottom > 0); }
        });
      }
    }
  }
})();

/* ---- плеер разбора в шаге 03 ---- */
(function(){
  var track = document.getElementById('revTrack');
  if(!track) return;
  var btn = document.getElementById('revPlay'), timeEl = document.getElementById('revTime'),
      notes = [].slice.call(document.querySelectorAll('#revNotes .hw-note')),
      marks = [].slice.call(track.querySelectorAll('.df-review-marker')),
      base = track.querySelector('.df-review-wave'),
      head = track.querySelector('.df-review-head'),
      on = base.cloneNode(true);
  on.classList.add('df-review-wave--on');
  base.parentNode.insertBefore(on, base.nextSibling);

  var DUR = 36, cur = 0, playing = false, af = 0, prev = 0, drag = false, audio = null;
  /* Запись лежит в audio/answer.m4a; длительность и форма волны берутся из неё.
     Нет файла — дорожка идёт по таймеру на 36 с, механика видна всё равно */
  var srcs = ['audio/answer.m4a','audio/answer.mp3'], si = 0, a = new Audio();
  a.preload = 'auto';
  a.addEventListener('loadedmetadata', function(){
    if(!a.duration || !isFinite(a.duration)) return;
    audio = a; DUR = a.duration;
    /* Если play нажали до того, как подъехали метаданные, дорожка шла по таймеру.
       Гасим его и передаём воспроизведение самому файлу: иначе таймер остаётся
       жить рядом с записью и на 36-й секунде сбрасывает позицию и жмёт паузу */
    cancelAnimationFrame(af);
    if(playing){ a.currentTime = cur; a.play().catch(function(){}); }
    place(); paint(); wave(a.currentSrc || a.src);
  });
  a.addEventListener('timeupdate', function(){ if(audio){ cur = a.currentTime; paint(); } });
  /* В конце записи дорожка встаёт на последней секунде, а не отматывается в ноль:
     последняя метка стоит на 0:31 из 36, то есть перемотка на неё всегда доигрывает
     до конца — и сброс уносил бы замечание обратно на первое. Начало сначала берёт
     на себя следующее нажатие play */
  a.addEventListener('ended', function(){ cur = DUR; stop(); paint(); });
  a.addEventListener('error', nextSrc);
  function nextSrc(){ if(si < srcs.length){ a.src = srcs[si++]; a.load(); } }
  nextSrc();

  /* Форма волны из самой записи: 30 столбиков по среднеквадратичной громкости */
  function wave(src){
    var AC = window.AudioContext || window.webkitAudioContext;
    if(!AC || !window.fetch || !src) return;
    fetch(src).then(function(r){ return r.arrayBuffer(); }).then(function(buf){
      return new AC().decodeAudioData(buf);
    }).then(function(ab){
      var ch = ab.getChannelData(0), n = 30, step = Math.floor(ch.length / n), peaks = [], max = 0, d = '';
      for(var i = 0; i < n; i++){
        var s = 0, c = 0, hop = Math.max(1, Math.floor(step / 400));
        for(var j = i * step; j < (i + 1) * step && j < ch.length; j += hop){ s += ch[j] * ch[j]; c++; }
        var v = Math.sqrt(s / Math.max(1, c)); peaks.push(v); if(v > max) max = v;
      }
      peaks.forEach(function(v, i){
        var h = Math.max(3, Math.round(v / (max || 1) * 30));
        d += 'M' + (2 + i * 10) + ' ' + Math.round(17 - h / 2) + 'v' + h;
      });
      base.querySelector('path').setAttribute('d', d);
      on.querySelector('path').setAttribute('d', d);
    }).catch(function(){});
  }

  function fmt(t){ t = Math.max(0, Math.round(t)); return Math.floor(t / 60) + ':' + ('0' + (t % 60)).slice(-2); }
  function place(){
    marks.forEach(function(m){
      var t = parseFloat(m.getAttribute('data-t'));
      m.hidden = t > DUR;
      m.style.setProperty('--pos', (t / DUR * 100) + '%');
    });
    track.setAttribute('aria-valuemax', Math.round(DUR));
  }
  function paint(){
    var p = Math.min(1, Math.max(0, cur / DUR));
    on.style.setProperty('--rest', (100 - p * 100) + '%');
    head.style.setProperty('--p', p * 100 + '%');
    timeEl.textContent = fmt(cur) + ' / ' + fmt(DUR);
    track.setAttribute('aria-valuenow', Math.round(cur));
    track.setAttribute('aria-valuetext', fmt(cur));
    var i = 0;
    marks.forEach(function(m){ if(parseFloat(m.getAttribute('data-t')) <= cur) i = +m.getAttribute('data-note'); });
    show(i);
  }
  function show(i){
    notes.forEach(function(n, k){ n.hidden = k !== i; });
    marks.forEach(function(m){ m.classList.toggle('is-on', +m.getAttribute('data-note') === i); });
  }
  function tick(t){
    var d = (t - prev) / 1000; prev = t; cur += d;
    /* Тот же конец, что и у записи: встаём на последней секунде, а не в нуле */
    if(cur >= DUR){ cur = DUR; stop(); }
    paint();
    if(playing) af = requestAnimationFrame(tick);
  }
  function start(){
    /* Дослушали до конца — следующее нажатие играет запись сначала.
       Перерисовываем сразу, иначе до первого timeupdate на дорожке ещё висит конец */
    if(cur >= DUR - .05){ cur = 0; paint(); }
    playing = true; btn.classList.add('is-playing'); track.classList.add('is-live');
    btn.setAttribute('aria-label', 'Остановить');
    if(audio){ a.currentTime = cur; a.play().catch(function(){}); }
    else { prev = performance.now(); af = requestAnimationFrame(tick); }
  }
  function stop(){
    playing = false; btn.classList.remove('is-playing');
    btn.setAttribute('aria-label', 'Прослушать ответ');
    /* Таймер гасим всегда, а не только когда записи нет: он мог стартовать
       до её загрузки и пережить переход на воспроизведение файла */
    cancelAnimationFrame(af);
    if(audio) a.pause();
  }
  btn.addEventListener('click', function(){ playing ? stop() : start(); });

  function seek(e){
    var r = track.getBoundingClientRect();
    cur = Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) * DUR;
    if(audio) a.currentTime = cur;
    paint();
  }
  track.addEventListener('pointerdown', function(e){
    if(e.target.closest('.df-review-marker')) return;
    drag = true; track.classList.add('is-live');
    if(track.setPointerCapture) track.setPointerCapture(e.pointerId);
    seek(e);
  });
  track.addEventListener('pointermove', function(e){ if(drag) seek(e); });
  track.addEventListener('pointerup', function(){ drag = false; });
  track.addEventListener('pointercancel', function(){ drag = false; });
  track.addEventListener('keydown', function(e){
    var d = e.key === 'ArrowRight' ? 2 : e.key === 'ArrowLeft' ? -2 : 0;
    if(!d) return;
    e.preventDefault();
    cur = Math.min(DUR, Math.max(0, cur + d));
    if(audio) a.currentTime = cur;
    paint();
  });
  marks.forEach(function(m){
    m.addEventListener('click', function(){
      cur = parseFloat(m.getAttribute('data-t'));
      if(audio) a.currentTime = cur;
      track.classList.add('is-live');
      paint();
    });
  });

  place(); paint();
})();
</script>


</body></html>