/* ============================================================
   /tutors — лендинг репетитора в пять актов-слайдов.

   Система владельца: минимализм, один кремовый фон, три смысловых
   цвета и золото-декорация.
   — Чернила: глубокий нави. Всё, что не проблема и не решение.
   — Красный: только проблемы (поворот акта 01, часы, спуск, «Ошибся»).
   — Зелёный: только решения (тезисы, механики, «справился», CTA).
   — Золотой: разделители актов, подчёркивание-декор, подсветка ленты.
   Типографика — две ступени дисплея (заголовок акта / пуант) и две
   текста (17 / 15): размер и вес соответствуют роли, не настроению.
   Акты листаются как слайды (scroll-snap): свайп или колесо переводит
   на следующий экран с одной мыслью. Единственная сложная анимация —
   игровой цикл в акте 03.
   ============================================================ */

/* Слайдовое листание. Файл подключён только на /tutors, поэтому
   правило на html безопасно. proximity, не mandatory: акты выше
   вьюпорта (03 на телефоне) при mandatory запирали бы прокрутку. */
html { scroll-snap-type: y proximity; scroll-padding-top: 0; }
/* На коротких экранах (телефон лёжа) акты в разы выше вьюпорта —
   листание слайдами там мешает, а не помогает. */
@media (max-height: 560px) { html { scroll-snap-type: none; } }

.tl-act {
  --tl-ink: #0F1B32;
  --tl-bad: #B3261E;
  --tl-go: #3E6B4F;
  --tl-gold: #D8AC2B;
  --tl-muted: color-mix(in srgb, var(--tl-ink) 72%, var(--md-sys-color-surface));
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: 64px 0 38px;
  scroll-snap-align: start;
}
[data-theme="dark"] .tl-act {
  --tl-ink: var(--md-sys-color-on-surface);
  --tl-bad: #F0938A;
  --tl-go: #8FD7AE;
  --tl-muted: var(--md-sys-color-on-surface-variant);
}

/* Точки-навигация по актам: тонкий декор, активную красит золото. */
.tl-dots {
  position: fixed;
  right: clamp(8px, 2vw, 22px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: grid;
  gap: 6px;
}
.tl-dots a {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}
.tl-dots a::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, #0F1B32 60%, transparent);
  transition: background .2s, border-color .2s, transform .2s;
}
[data-theme="dark"] .tl-dots a::before { border-color: color-mix(in srgb, #F2F0EA 60%, transparent); }
.tl-dots a.is-on::before { background: #D8AC2B; border-color: #D8AC2B; transform: scale(1.25); }
.tl-dots a:focus-visible { outline: 2px solid #D8AC2B; outline-offset: 2px; border-radius: 50%; }

/* Золотая линия — единственный разделитель актов. */
.tl-act + .tl-act { border-top: 1px solid color-mix(in srgb, var(--tl-gold) 55%, transparent); }

/* ── Типографика: роль = размер ─────────────────────────────── */
.tl-h1, .tl-h2 {
  margin: 0 0 18px;
  font-family: var(--md-ref-typeface-head);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  text-wrap: balance;
  color: var(--tl-ink);
}
.tl-turn {
  margin: 0 0 28px;
  font-family: var(--md-ref-typeface-head);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.35;
  max-width: 32ch;
  color: var(--tl-ink);
}
.tl-turn--bad { color: var(--tl-bad); }
.tl-turn--go { color: var(--tl-go); }
.tl-thesis {
  margin: 22px 0 16px;
  font-family: var(--md-ref-typeface-head);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.35;
  max-width: 30ch;
  color: var(--tl-go);
}
/* Пуант-отметка: золотое подчёркивание — декор, не смысловой цвет. */
.tl-mark {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--tl-gold);
  text-decoration-thickness: 3px;
  text-decoration-skip-ink: none;
  text-underline-offset: 6px;
}

/* Красный на этой странице значит «проблема» — акцентные кнопки
   обвязки (Войти, Принять cookie) уходят в нейтральные чернила. */
.lp-header .mk-btn--accent,
.lp-cookie .mk-btn--accent {
  background: #1B2B4B;
  border-color: #1B2B4B;
  color: #FDF8EF;
}
[data-theme="dark"] .lp-header .mk-btn--accent,
[data-theme="dark"] .lp-cookie .mk-btn--accent {
  background: #C7D4EC;
  border-color: #C7D4EC;
  color: #0F1B32;
}

/* CTA — действие к решению: зелёная, обе. Переопределяем акцентную
   кнопку обвязки только внутри актов. */
.tl-act .mk-btn--accent {
  background: var(--tl-go);
  border-color: var(--tl-go);
  color: #FDF8EF;
}
.tl-act .mk-btn--accent:hover { filter: brightness(1.08); }
/* В тёмной теме зелёный светлеет — текст кнопки уходит в чернила. */
[data-theme="dark"] .tl-act .mk-btn--accent { color: #0F1B32; }

/* ── 01 WHY ─────────────────────────────────────────────────── */
.tl-why__in { max-width: 760px; margin-inline: auto; }
.tl-why__between { margin: 0 0 10px; font-weight: 600; color: var(--tl-muted); }
.tl-gaps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tl-gaps li {
  font-size: 17px;
  line-height: 1.45;
  color: var(--tl-ink);
  padding-left: 26px;
  position: relative;
}
.tl-gaps li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tl-bad);
}
.tl-why__calm { margin: 0 0 26px; font-size: 17px; line-height: 1.5; font-weight: 600;
  color: var(--tl-ink); }
.tl-why__free { margin: 12px 0 0; font-size: 15px; color: var(--tl-muted); }

/* ── 02 PAIN ────────────────────────────────────────────────── */
.tl-pain__in { max-width: 760px; margin-inline: auto; }
.tl-pain__clock {
  margin: 0 0 18px;
  font-family: var(--md-ref-typeface-head);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.4;
  color: var(--tl-bad);
}
.tl-pain__drift { margin: 0 0 18px; font-size: 17px; line-height: 1.5; max-width: 56ch;
  color: var(--tl-ink); }

/* Лестница в подвал: проблема, поэтому красный ramp — от бледной
   тревоги к запёкшемуся «снова напомнить». Контраст пар ≥ 4.5. */
.tl-drift { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.tl-drift li {
  margin-left: calc(var(--i) * clamp(14px, 3.4vw, 40px));
  width: fit-content;
  padding: 10px 20px;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-ref-typeface-head);
  font-weight: 700;
  font-size: 16.5px;
}
.tl-drift li:nth-child(1) { background: #FBE3E0; color: #7A1F19; }
.tl-drift li:nth-child(2) { background: #F3BDB7; color: #641511;
  box-shadow: 0 3px 8px rgba(90, 20, 15, .14); }
.tl-drift li:nth-child(3) { background: #C4675E; color: #FFF3F1;
  box-shadow: 0 5px 12px rgba(90, 20, 15, .22); }
.tl-drift li:nth-child(4) { background: #7E2A23; color: #FBE3E0;
  box-shadow: 0 7px 18px rgba(60, 12, 9, .3); }
.tl-drift li:nth-child(5) { background: #40100C; color: #F3C4BE;
  box-shadow: 0 10px 26px rgba(30, 5, 3, .42); }
[data-theme="dark"] .tl-drift li:nth-child(1) { background: #4A201C; color: #FFD4CF; }
[data-theme="dark"] .tl-drift li:nth-child(2) { background: #5E241E; color: #FFD4CF; }
[data-theme="dark"] .tl-drift li:nth-child(3) { background: #7E2A23; color: #FBE3E0; }
[data-theme="dark"] .tl-drift li:nth-child(4) { background: #9C4038; color: #FFF3F1; }
[data-theme="dark"] .tl-drift li:nth-child(5) { background: #C4675E; color: #1A0503; }
.tl-pain__instead { margin: 0 0 8px; color: var(--tl-muted); }
.tl-pain__main {
  margin: 0;
  font-family: var(--md-ref-typeface-head);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.35;
  max-width: 30ch;
  color: var(--tl-go);
}

/* ── 03 MOTIVATION ──────────────────────────────────────────── */
.tl-motivation__in {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-areas: "head loop" "rest loop";
  gap: 8px 56px;
  align-items: center;
}
.tl-motivation__head { grid-area: head; align-self: end; }
.tl-motivation__rest { grid-area: rest; align-self: start; }
.tl-motivation__in .tl-loop { grid-area: loop; }
.tl-mech { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 14px; }
.tl-mech li {
  font-size: 17px;
  line-height: 1.5;
  color: var(--tl-ink);
  padding-left: 26px;
  position: relative;
}
.tl-mech li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tl-go);
}
.tl-mech b { font-family: var(--md-ref-typeface-head); font-weight: 800; }
.tl-motivation__not { margin: 0; font-size: 17px; line-height: 1.55; color: var(--tl-bad); }
.tl-motivation__not em {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-family: var(--md-ref-typeface-head);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px);
  color: var(--tl-go);
}

/* ── Демо игрового цикла ────────────────────────────────────── */
.tl-loop { display: grid; gap: 16px; justify-items: center; }
.tl-loop__phone {
  position: relative;
  width: min(340px, 100%);
  padding: 26px 24px 22px;
  border-radius: 24px;
  background: #FFFFFF;
  border: 1px solid #D2CBB7;
  box-shadow: 0 10px 30px rgba(15, 27, 50, .12);
}
.tl-loop__q {
  margin: 0 0 16px;
  font-family: var(--md-ref-typeface-head);
  font-weight: 700;
  font-size: 19px;
  color: #0F1B32;
}
.tl-loop__answers { display: flex; gap: 12px; margin-bottom: 14px; }
.tl-loop__opt {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  border-radius: 14px;
  border: 2px solid #D2CBB7;
  background: #FAF8F3;
  font-family: var(--md-ref-typeface-head);
  font-weight: 700;
  font-size: 17px;
  color: #0F1B32;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.tl-loop__hint {
  margin: 0;
  padding: 11px 14px;
  border-radius: 12px;
  background: #EFEBE0;
  color: #3C465C;
  font-size: 14.5px;
  line-height: 1.4;
  opacity: 0;
  transition: opacity .3s;
}
.tl-loop__xp {
  position: absolute;
  top: 14px;
  right: 18px;
  padding: 6px 13px;
  border-radius: 999px;
  background: #3E6B4F;
  color: #fff;
  font-family: var(--md-ref-typeface-head);
  font-weight: 800;
  font-size: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
}
.tl-loop__level { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.tl-loop__bar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: #ECE6D8;
  overflow: hidden;
}
.tl-loop__bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4A7C59, #3E6B4F);
  transform: scaleX(.55);
  transform-origin: left;
  transition: transform .6s ease-out;
}
.tl-loop__lvl {
  font-family: var(--md-ref-typeface-head);
  font-weight: 800;
  font-size: 14px;
  color: #3C465C;
  white-space: nowrap;
}

/* Тёмная тема демо-карточки: та же сцена на тёмной поверхности —
   белый остров ломал правило единого поля. Смысловые цвета фаз ниже
   переключаются своей парой оверрайдов. */
[data-theme="dark"] .tl-loop__phone {
  background: var(--md-sys-color-surface-container-high, #243354);
  border-color: color-mix(in srgb, #F2F0EA 22%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .tl-loop__q { color: var(--md-sys-color-on-surface); }
[data-theme="dark"] .tl-loop__opt {
  background: var(--md-sys-color-surface-container-low, #111A2B);
  border-color: color-mix(in srgb, #F2F0EA 28%, transparent);
  color: var(--md-sys-color-on-surface);
}
[data-theme="dark"] .tl-loop__hint { background: #303A52; color: #C9D3E8; }
[data-theme="dark"] .tl-loop__bar { background: #303A52; }
[data-theme="dark"] .tl-loop__lvl { color: #B4C0D4; }

/* Лента шагов: тихий контур, активный — золотая подсветка (декор). */
.tl-loop__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.tl-loop__steps li {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tl-ink) 30%, transparent);
  color: var(--tl-muted);
  font-family: var(--md-ref-typeface-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3px;
  text-transform: uppercase;
  transition: background .25s, color .25s, border-color .25s;
}
.tl-loop__steps li.is-on {
  background: var(--tl-gold);
  border-color: var(--tl-gold);
  color: #0F1B32;
}

/* Состояния карточки по фазам. */
[data-phase="error"] .tl-loop__opt--wrong,
[data-phase="hint"] .tl-loop__opt--wrong {
  background: #F8E2E2;
  border-color: #B3261E;
  color: #8C1313;
}
[data-phase="hint"] .tl-loop__hint,
[data-phase="retry"] .tl-loop__hint { opacity: 1; }
[data-phase="retry"] .tl-loop__opt--right,
[data-phase="got"] .tl-loop__opt--right,
[data-phase="xp"] .tl-loop__opt--right,
[data-phase="level"] .tl-loop__opt--right {
  background: #DDEEDD;
  border-color: #3E6B4F;
  color: #24521F;
}
[data-phase="got"] .tl-loop__opt--right { transform: scale(1.04); }
[data-theme="dark"] [data-phase="error"] .tl-loop__opt--wrong,
[data-theme="dark"] [data-phase="hint"] .tl-loop__opt--wrong {
  background: #4A201C; border-color: #F0938A; color: #FFD4CF;
}
[data-theme="dark"] [data-phase="retry"] .tl-loop__opt--right,
[data-theme="dark"] [data-phase="got"] .tl-loop__opt--right,
[data-theme="dark"] [data-phase="xp"] .tl-loop__opt--right,
[data-theme="dark"] [data-phase="level"] .tl-loop__opt--right {
  background: #1E3A2B; border-color: #8FD7AE; color: #C9F2DB;
}
[data-theme="dark"] .tl-loop__xp { background: #8FD7AE; color: #0F1B32; }
[data-phase="xp"] .tl-loop__xp,
[data-phase="level"] .tl-loop__xp { opacity: 1; transform: translateY(0); }
[data-phase="level"] .tl-loop__bar i { transform: scaleX(1); }

/* ── 04 PSYCHOLOGY ──────────────────────────────────────────── */
.tl-psych__in { max-width: 720px; margin-inline: auto; }
/* Диаграмма цикла обучения: шаги связаны линией-путём, идущей из
   красного (ошибка) в зелёный (результат) — сама линия и есть сюжет.
   Мобильный: вертикальный хребет со стрелкой вниз. Десктоп: поток
   слева направо со стрелками между шагами. Результат «справился» —
   залитый зелёный терминал с нарисованной галочкой. */
.tl-chain {
  position: relative;
  margin: 26px 0 30px;
  padding: 0 0 0 30px;
  list-style: none;
  display: grid;
  gap: 16px;
  width: fit-content;
}
.tl-chain::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 22px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #B3261E 0%, #8A8676 50%, #3E6B4F 100%);
}
.tl-chain::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 10px;
  width: 13px;
  height: 10px;
  background: #3E6B4F;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tl-chain li {
  position: relative;
  width: fit-content;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tl-ink) 30%, transparent);
  color: var(--tl-ink);
  font-family: var(--md-ref-typeface-head);
  font-weight: 700;
  font-size: 15.5px;
}
/* Узел на хребте. */
.tl-chain li::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2.5px solid #8A8676;
  background: var(--md-sys-color-surface);
}
.tl-chain li:first-child { background: #F8E2E2; border-color: #B3261E; color: #8C1313; }
.tl-chain li:first-child::before { border-color: #B3261E; }
.tl-chain li:last-child {
  background: #3E6B4F;
  border-color: #3E6B4F;
  color: #FDF8EF;
  font-size: 17px;
  padding: 11px 22px 11px 40px;
}
.tl-chain li:last-child::before { border-color: #3E6B4F; background: #3E6B4F; }
/* Нарисованная галочка результата. */
.tl-chain li:last-child::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-52%);
  background: currentColor;
  clip-path: polygon(12% 52%, 24% 40%, 42% 58%, 78% 16%, 92% 28%, 44% 84%);
}
[data-theme="dark"] .tl-chain::before {
  background: linear-gradient(180deg, #F0938A 0%, #8A8676 50%, #8FD7AE 100%);
}
[data-theme="dark"] .tl-chain::after { background: #8FD7AE; }
[data-theme="dark"] .tl-chain li:first-child { background: #4A201C; border-color: #F0938A; color: #FFD4CF; }
[data-theme="dark"] .tl-chain li:first-child::before { border-color: #F0938A; }
[data-theme="dark"] .tl-chain li:last-child { background: #8FD7AE; border-color: #8FD7AE; color: #0F1B32; }
[data-theme="dark"] .tl-chain li:last-child::before { border-color: #8FD7AE; background: #8FD7AE; }

/* Десктоп: поток слева направо, стрелки между шагами. */
@media (min-width: 901px) {
  /* Диаграмме можно быть шире текстовой колонки: одна строка потока
     читается сильнее двух. */
  .tl-chain {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    width: max-content;
    max-width: min(940px, calc(100vw - 120px));
  }
  .tl-chain::before, .tl-chain::after, .tl-chain li::before { display: none; }
  .tl-chain li:last-child::before { display: block; display: none; }
  .tl-chain li { display: flex; align-items: center; }
  /* Стрелка-связка: линия с наконечником, цвет пути. */
  .tl-chain li + li { margin-left: 26px; }
  .tl-chain li + li::before {
    content: "";
    display: block;
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 10px;
    background: #8A8676;
    clip-path: polygon(0 40%, 58% 40%, 58% 0, 100% 50%, 58% 100%, 58% 60%, 0 60%);
  }
  .tl-chain li:nth-child(2)::before { background: #B3261E; }
  .tl-chain li:last-child::before { display: block; background: #3E6B4F; }
  [data-theme="dark"] .tl-chain li:nth-child(2)::before { background: #F0938A; }
  [data-theme="dark"] .tl-chain li:last-child::before { display: block; background: #8FD7AE; }
}
.tl-psych__notjust { margin: 0 0 14px; font-size: 17px; line-height: 1.5; color: var(--tl-ink); max-width: 48ch; }
/* Пик страницы: размер заголовка, цвет решения. */
.tl-psych__quote {
  margin: 0 0 26px;
  font-family: var(--md-ref-typeface-head);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  color: var(--tl-go);
}
.tl-psych__closing { margin: 0; font-size: 17px; line-height: 1.55; color: var(--tl-ink); max-width: 52ch; }

/* ── 05 EXPERTISE ───────────────────────────────────────────── */
.tl-expertise { position: relative; text-align: center; overflow: hidden; }
.tl-expertise__title { margin-bottom: 12px; }
.tl-expertise__lede {
  margin: 0 auto 18px;
  max-width: 54ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tl-muted);
}
.tl-see {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto 20px;
  text-align: left;
}
.tl-see__you, .tl-see__student {
  padding: 18px 24px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--tl-gold) 55%, transparent);
  background: var(--md-sys-color-surface-container-low);
}
.tl-see__student {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.tl-see__label {
  margin: 0 0 12px;
  font-family: var(--md-ref-typeface-head);
  font-weight: 800;
  font-size: 16px;
  color: var(--tl-ink);
}
.tl-see__you ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.tl-see__you li {
  position: relative;
  padding-left: 26px;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--tl-ink);
}
.tl-see__you li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tl-go);
}
.tl-see__quote {
  margin: 0;
  font-family: var(--md-ref-typeface-head);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px);
  color: var(--tl-go);
}
.tl-expertise__thesis { margin-left: auto; margin-right: auto; max-width: 34ch; color: var(--tl-ink); }
.tl-expertise__cta { display: grid; gap: 7px; justify-items: center; margin: 18px 0 18px; }
.tl-expertise__free {
  margin: 0;
  font-family: var(--md-ref-typeface-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--tl-ink);
}
.tl-expertise__effort { margin: 0; font-size: 15px; color: var(--tl-muted); }
.tl-sign {
  margin: 0 0 0;
  font-family: var(--md-ref-typeface-head);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .4px;
  color: var(--tl-muted);
}
/* Декор в углу акта: не добавляет высоты слайду. */
.tl-expertise { min-height: 0; }
.tl-expertise__sticker {
  position: absolute;
  right: clamp(16px, 4vw, 64px);
  bottom: 16px;
  height: auto;
  width: 120px !important;
}

/* ── Адаптив ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tl-act { padding: 76px 0 32px; }
  /* Декор уступает контенту: на телефоне акт и так выше экрана. */
  .tl-expertise__sticker { display: none; }
  .tl-expertise__lede { margin-bottom: 18px; }
  .tl-see { gap: 14px; margin-bottom: 18px; }
  .tl-mech { gap: 10px; }
  .tl-loop__phone { width: min(310px, 100%); }
  /* Демо встаёт сразу после тезиса, механики — после доказательства. */
  .tl-motivation__in {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "loop" "rest";
    gap: 32px;
  }
  .tl-see { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  /* Точкам и тексту тесно: контент уступает колонке точек. */
  .tl-act .mk-wrap { padding-right: 34px; }
  .tl-dots { right: 3px; }
  .tl-dots a { width: 18px; height: 18px; }
}
/* ── Телефон: шкала на ступень ниже, роли те же ──────────────
   Заголовок акта = один размер, пуанты = один размер, текст 16.
   Цель — каждый акт в один экран. */
@media (max-width: 560px) {
  .tl-act { padding: 64px 0 22px; }
  .tl-h1, .tl-h2 { font-size: 24px; margin-bottom: 12px; }
  .tl-psych__quote { font-size: 24px; margin-bottom: 16px; }
  .tl-turn, .tl-thesis, .tl-pain__clock, .tl-pain__main,
  .tl-motivation__not em, .tl-see__quote { font-size: 17.5px; }
  .tl-turn { margin-bottom: 16px; }
  .tl-thesis { margin: 16px 0 12px; }
  .tl-gaps li, .tl-mech li, .tl-see__you li, .tl-pain__drift,
  .tl-why__calm, .tl-motivation__not, .tl-psych__notjust,
  .tl-psych__closing, .tl-expertise__lede { font-size: 16px; line-height: 1.42; }
  .tl-why__calm { margin-bottom: 14px; }
  .tl-why__free, .tl-expertise__effort { font-size: 14px; }
  .tl-gaps { gap: 5px; }
  .tl-mech { gap: 6px; margin-bottom: 16px; }
  .tl-pain__clock { margin-bottom: 14px; }
  .tl-drift { margin-bottom: 20px; gap: 7px; }
  .tl-drift li { font-size: 14.5px; padding: 8px 14px; }
  .tl-chain { margin: 18px 0 20px; gap: 12px; }
  .tl-chain li { font-size: 14.5px; padding: 8px 14px; }
  .tl-chain li:last-child { font-size: 15.5px; padding: 9px 18px 9px 36px; }
  .tl-loop { gap: 10px; }
  .tl-loop__phone { padding: 16px 14px 14px; }
  .tl-loop__q { font-size: 16.5px; margin-bottom: 10px; }
  .tl-loop__opt { padding: 9px 0; font-size: 15.5px; }
  .tl-loop__hint { font-size: 13px; padding: 8px 10px; }
  .tl-loop__level { margin-top: 10px; }
  /* Лента шагов дублирует фазы карточки — на телефоне карточка
     справляется одна. */
  .tl-loop__steps { display: none; }
  .tl-see { gap: 10px; margin-bottom: 12px; }
  .tl-see__you, .tl-see__student { padding: 14px 16px; }
  .tl-see__label { margin-bottom: 8px; }
  .tl-see__you ul { gap: 5px; }
  .tl-expertise__lede { margin-bottom: 12px; }
  .tl-expertise__cta { margin: 14px 0 12px; gap: 5px; }
  .tl-expertise__free { font-size: 15.5px; }
  .tl-sign { font-size: 15px; }
}
@media (max-width: 400px) {
  .tl-act { padding: 48px 0 14px; }
  .tl-turn { margin-bottom: 10px; }
  .tl-thesis { margin: 12px 0 10px; }
  .tl-loop__q { margin-bottom: 8px; }
  .tl-loop__opt { padding: 8px 0; }
  .tl-loop__level { margin-top: 8px; }
  .tl-expertise__cta { margin: 10px 0 10px; gap: 4px; }
  .tl-expertise__effort { font-size: 13.5px; }
  .tl-act .mk-btn--lg { padding: 12px 22px; font-size: 15px; }
  .tl-h1, .tl-h2, .tl-psych__quote { font-size: 22px; margin-bottom: 10px; }
  .tl-turn, .tl-thesis, .tl-pain__clock, .tl-pain__main,
  .tl-motivation__not em, .tl-see__quote { font-size: 16.5px; }
  .tl-gaps li, .tl-mech li, .tl-see__you li, .tl-pain__drift,
  .tl-why__calm, .tl-motivation__not, .tl-psych__notjust,
  .tl-psych__closing, .tl-expertise__lede { font-size: 15px; }
  .tl-motivation__in { gap: 20px; }
  .tl-loop__phone { width: min(280px, 100%); }
  .tl-loop__hint { font-size: 12.5px; }
  .tl-see__you, .tl-see__student { padding: 12px 14px; }
  .tl-see { gap: 8px; margin-bottom: 10px; }
  .tl-expertise__lede { margin-bottom: 10px; }
  .tl-mech { margin-bottom: 12px; }
}
@media (max-width: 360px) {
  .tl-act { padding: 42px 0 12px; }
  .tl-h1, .tl-h2, .tl-psych__quote { font-size: 20px; }
  .tl-turn, .tl-thesis, .tl-pain__clock, .tl-pain__main,
  .tl-motivation__not em, .tl-see__quote { font-size: 15.5px; }
  .tl-gaps li, .tl-mech li, .tl-see__you li, .tl-pain__drift,
  .tl-why__calm, .tl-motivation__not, .tl-psych__notjust,
  .tl-psych__closing, .tl-expertise__lede { font-size: 14.5px; }
  .tl-loop__phone { width: min(250px, 100%); }
  .tl-drift li, .tl-chain li { font-size: 13.5px; padding: 7px 12px; }
  .tl-chain li:last-child { font-size: 14.5px; }
  .tl-why__free, .tl-expertise__effort { font-size: 13px; }
  .tl-why__between { margin-bottom: 6px; }
  .tl-motivation__in { gap: 12px; }
  .tl-h1, .tl-h2 { margin-bottom: 8px; }
  .tl-mech { gap: 4px; margin-bottom: 10px; }
  .tl-loop { gap: 8px; }
  .tl-loop__hint { padding: 6px 8px; }
  .tl-see__you, .tl-see__student { padding: 10px 12px; }
  .tl-expertise__lede { margin-bottom: 8px; }
  .tl-expertise .tl-thesis { margin: 10px auto 8px; }
  .tl-expertise__cta { margin: 8px 0 8px; }
  .tl-sign { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-loop__phone *, .tl-loop__steps li { transition: none !important; }
  html { scroll-snap-type: none; }
}