/* =========================================================================
   Посадочная «преподавателю» /prepodavatelyam (spec 2026-08-14-teacher-landing-offer).
   Грузится ПОСЛЕ catalog.css и опирается на его токены, шрифты, .btn, шапку и футер:
   страница должна читаться как часть витрины, поэтому дублировать базу незачем.
   Здесь — только собственные блоки страницы, префикс tl__.
   Регистр продуктовый (§2/§3 DESIGN.md): плоско, спокойно, синий = действие.
   ========================================================================= */

/* Посадочная длиннее витрины, поэтому вертикальный ритм задаём разный: крупный
   отрыв у героя, обычный между блоками. */
.tl{display:flex;flex-direction:column;gap:32px;padding-top:48px;}

/* ---- Герой: единственное место с крупной типографикой ---- */
.tl__hero{display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.tl__title{margin:0;max-width:18ch;font-size:clamp(1.75rem,1.2rem + 2.4vw,2.75rem);
  font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--c-text);text-wrap:balance;}
.tl__lead{margin:0;max-width:60ch;color:var(--c-muted);
  font-size:1rem;line-height:1.6;text-wrap:pretty;}
/* CTA крупнее обычной кнопки витрины: на странице он главное действие. */
.tl__cta{padding:12px 24px;font-size:1rem;}

/* ---- Обычный блок: карточка на surface, как .cblock витрины ---- */
.tl__block{margin:0;padding:24px;border:1px solid var(--c-border);
  border-radius:var(--r-xl);background:var(--c-surface);}
.tl__h2{margin:0 0 16px;font-size:1.125rem;font-weight:700;letter-spacing:-.01em;color:var(--c-text);}
.tl__text{margin:0;max-width:70ch;color:var(--c-muted);font-size:.875rem;line-height:1.55;text-wrap:pretty;}

/* Шаги — настоящая последовательность, поэтому нумерованы; кружки рисуем сами,
   дефолтные маркеры <ol> выпадают за карточку (та же причина, что в catalog.css). */
.tl__steps{list-style:none;counter-reset:step;margin:0;padding:0;
  display:flex;flex-direction:column;gap:16px;
  max-width:70ch;color:var(--c-muted);font-size:.875rem;line-height:1.55;}
.tl__steps li{counter-increment:step;position:relative;padding-left:38px;}
.tl__steps li::before{content:counter(step);position:absolute;left:0;top:0;
  display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-full);
  background:var(--c-accent-soft);color:var(--c-text);font-size:.75rem;font-weight:700;}

/* ---- Цена: единственный акцентный блок страницы ---- */
.tl__price{padding:28px 24px;border:1px solid var(--c-border);border-radius:var(--r-xl);
  background:var(--c-accent-soft);}
.tl__price .tl__h2{margin-bottom:8px;}
/* «Нисколько.» — ответ на вопрос заголовка, поэтому он крупный, а не список. */
.tl__price-lead{margin:0 0 16px;font-size:1.75rem;font-weight:700;line-height:1.2;
  letter-spacing:-.02em;color:var(--c-text);}
.tl__price-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;
  max-width:60ch;font-size:.875rem;line-height:1.5;color:var(--c-text);}
.tl__price-list li{position:relative;padding-left:24px;}
/* Галочка, а не буллет: перечисляем то, чего нет, — читается как гарантии. */
.tl__price-list li::before{content:"\2713";position:absolute;left:0;top:0;
  color:var(--c-accent-ink);font-weight:700;}
.tl__price-note{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--c-border-strong);
  max-width:70ch;color:var(--c-text);font-size:.8125rem;line-height:1.55;text-wrap:pretty;}
.tl__price-cta{margin-top:20px;}

/* ---- Пара коротких блоков: в ряд с планшета, столбиком на телефоне ----
   Треки задаём явно, а не через auto-fit: при auto-fit схлопнутые пустые треки
   всё равно считают gap, и справа оставался лишний зазор в 16px. */
.tl__pair{display:grid;gap:16px;grid-template-columns:1fr;}
.tl__pair .tl__block{height:100%;}

/* ---- FAQ: та же механика, что у витрины (details + свой индикатор «+») ---- */
.tl__block--faq{padding-bottom:8px;}
.tl__faq + .tl__faq{border-top:1px solid var(--c-border);}
.tl__faq-q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 0;font-size:.875rem;font-weight:600;color:var(--c-text);}
.tl__faq-q::-webkit-details-marker{display:none;}
.tl__faq-q::after{content:"+";flex:none;font-size:1.125rem;font-weight:400;line-height:1;
  color:var(--c-accent-ink);transition:transform .2s;}
.tl__faq[open] .tl__faq-q::after{transform:rotate(45deg);}
.tl__faq-q:hover{color:var(--c-accent-ink);}
.tl__faq-a{margin:0 0 16px;max-width:70ch;color:var(--c-muted);font-size:.875rem;line-height:1.55;}

/* ---- Финальный призыв: без рамки, чтобы не читался четвёртой карточкой подряд ---- */
.tl__final{display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:8px 0 16px;text-align:center;}
.tl__final-text{margin:0;max-width:44ch;color:var(--c-muted);font-size:.875rem;line-height:1.55;}

@media (min-width:640px){
  .tl{gap:40px;padding-top:64px;}
  .tl__pair{grid-template-columns:repeat(2,1fr);}
}