/* =========================================================================
   «Кот сдал» — лендинг.

   Те же правила, что в приложении:
     кремовая бумага — учебный материал;
     тёмное поле — всё остальное;
     красный живёт в обводке и тексте, площадь не заливает;
     зелёный и красный — только на бумаге;
     чёрного в проекте нет, весь тёмный текст — #333F52;
     моноширинный — маркер «это английская единица, её надо запомнить»;
     золото — только главное действие, на странице это кнопка и цифра
     в заголовке. Больше нигде.

   Панчо-рисунок появляется РОВНО ОДИН РАЗ, на первом экране: то же правило,
   что для обложек в ленте — кот на каждом блоке превращает страницу в шум.
   Второе изображение — фотография настоящего кота, и она стоит в блоке
   «кто это делает», единственном месте, где нужна подлинность.
   ========================================================================= */

:root {
  --ink:   #333F52;
  --cream: #FBF6EE;
  --ok:    #3A7D5C;
  --no:    #C0463C;
  --gold:  #DFA932;

  /* Акценты модулей — те же три, что на карточках в приложении. */
  --m-wf:   #4A6FA5;
  --m-coll: #EFD9B8;
  --m-vf:   #6B9A6E;

  --ink-55: rgba(51, 63, 82, 0.55);
  --ink-34: rgba(51, 63, 82, 0.34);
  --ink-12: rgba(51, 63, 82, 0.12);
  --ink-06: rgba(51, 63, 82, 0.06);
  --cream-75: rgba(251, 246, 238, 0.75);
  --cream-50: rgba(251, 246, 238, 0.50);
  --cream-22: rgba(251, 246, 238, 0.22);
  --cream-12: rgba(251, 246, 238, 0.12);
  --ok-tint: rgba(58, 125, 92, 0.10);

  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-text:    'Onest', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Поле страницы — сплошное, нижняя точка фирменного градиента. Привязку фона
   к окну (как в приложении) здесь не используем: у длинной страницы она
   оставляет незакрашенным холст ниже контента. Градиент живёт в первом
   экране — там он и нужен, чтобы дать глубину под котом. */
html, body {
  min-height: 100%;
  background: #3E4C63;
}

body {
  font-family: var(--font-text);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.wrap { width: 100%; max-width: 620px; margin: 0 auto; padding: 0 20px; }
.mono { font-family: var(--font-mono); font-feature-settings: 'liga' 0; }

section { padding: 52px 0; }

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 5.6vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: 8px;
}

.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-50);
  margin-bottom: 10px;
}

.sub {
  font-size: 16px;
  color: var(--cream-75);
  max-width: 34em;
  margin-bottom: 24px;
}

/* Бумага — тот же компонент, что в приложении. */
.paper {
  background: var(--cream);
  color: var(--ink);
  border-radius: 20px;
  padding: 20px 18px;
  max-width: 460px;
}

.paper__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-34);
  margin-bottom: 14px;
}

a { color: inherit; }

.cta {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 18px;
  padding: 17px 34px;
  border-radius: 15px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.cta:hover { filter: brightness(1.06); }
.cta:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

/* --- Первый экран --------------------------------------------------------- */

.hero {
  padding: 40px 0 52px;
  background: linear-gradient(180deg, #333F52 0%, #3E4C63 100%);
}

.hero__face {
  display: block;
  width: 132px;
  height: auto;
  /* Отрицательного нижнего поля здесь быть не должно: кот упирался
     в «Готовься», и заголовок переставал читаться с первого взгляда. */
  margin: 0 0 18px -10px;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 8vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  /* Заголовок ломается сам и по возможности ровными строками: жёсткий <br>
     на узком экране оставлял «ЦЭ» одиноким огрызком. */
  text-wrap: balance;
  max-width: 14em;
}

/* Цифра — единственное место в заголовке, где меняется цвет: она и есть
   обещание, которое проверяется за один взгляд. */
.hero h1 b { color: var(--gold); font-weight: 800; }

.hero__lead {
  font-size: clamp(16px, 4.2vw, 19px);
  color: var(--cream-75);
  max-width: 30em;
  margin-bottom: 26px;
}

.hero__note {
  margin-top: 14px;
  font-size: 14px;
  color: var(--cream-50);
}

/* --- Блок «узнай себя» ---------------------------------------------------- */
/* Единственный блок страницы, где человек что-то делает руками. Он же
   демонстрация продукта: это не картинка задания, это задание. */

.sentence {
  font-size: clamp(19px, 5vw, 22px);
  line-height: 1.65;
  margin-bottom: 4px;
}

.gap {
  display: inline-block;
  min-width: 5.5em;
  border-bottom: 2px solid var(--ink-34);
  text-align: center;
  font-family: var(--font-mono);
  /* Линия пропуска должна лежать на строке, а не проваливаться под неё:
     inline-block с пустым содержимым иначе уносит границу на высоту строки. */
  line-height: 1.05;
  vertical-align: baseline;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.gap.is-filled { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.stem { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.02em; }
.is-used .stem { color: var(--ink-34); font-weight: 400; }

.options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-12);
}

/* Варианты в столбик: предмет задания — окончание, и в вертикали окончания
   сравниваются одним движением глаза. В две колонки сравнение идёт по
   диагонали и рассыпается. */
.option {
  appearance: none;
  width: 100%;
  text-align: left;
  padding: 11px 16px;
  border: 1.5px solid var(--ink-12);
  border-radius: 13px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.25s ease;
}
.option:hover:not(:disabled) { background: var(--ink-06); }
.option:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.option:disabled { cursor: default; }
.option.is-correct { border-color: var(--ok); background: var(--ok-tint); color: var(--ok); font-weight: 700; }
.option.is-wrong   { border-color: var(--no); color: var(--no); font-weight: 700; }
.option.is-dim     { opacity: 0.4; }

.verdict {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-12);
  animation: verdict-in 0.26s ease-out;
}
@keyframes verdict-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.verdict__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.verdict--ok    .verdict__mark { color: var(--ok); }
.verdict--wrong .verdict__mark { color: var(--no); }
.verdict__rule { margin-top: 4px; font-size: 15px; color: var(--ink-55); }

/* Разбор ловушки — уже не бумага: это голос автора, а не учебный материал. */
.after {
  max-width: 460px;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream-75);
}
.after b { color: var(--cream); font-weight: 600; }
.after .mono { font-size: 0.94em; }

/* --- Как это работает ------------------------------------------------------ */
/* Нумерация здесь не украшение: это настоящая последовательность — сессия,
   разбор ошибки, возврат. Порядок несёт смысл, поэтому он и пронумерован. */

.steps { display: flex; flex-direction: column; gap: 26px; margin-top: 6px; }

.step { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }

.step__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cream-50);
  min-width: 1.4em;
  font-variant-numeric: tabular-nums;
}

.step__title { font-size: 18px; font-weight: 600; margin-bottom: 3px; }
.step__text  { font-size: 15.5px; color: var(--cream-75); max-width: 32em; }

/* Разбор сессии — доказательство к третьему шагу: не пересказ механики,
   а тот самый экран, который ученик видит после десяти заданий. */
.recap { margin-top: 18px; }

.recap__list {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 8px 14px;
  font-family: var(--font-mono);
  font-size: 15px;
}
.recap__list dt { color: var(--ink-34); }
.recap__list dd { color: var(--ink-34); }

/* Пара, которая вернётся. Отбивка слева — обводка, а не заливка: правило
   «красный не заливает площадь» в силе и здесь. */
.recap__list dt.back {
  color: var(--ink);
  border-left: 3px solid var(--no);
  padding-left: 9px;
  margin-left: -12px;
}
.recap__list dd.back { color: var(--ink); font-weight: 600; }

.recap__note { margin-top: 14px; font-size: 14px; color: var(--ink-55); }

/* --- Что внутри ------------------------------------------------------------ */

.modules { display: grid; gap: 12px; margin-top: 4px; }
@media (min-width: 640px) { .modules { grid-template-columns: repeat(3, 1fr); } }

/* Карточка модуля повторяет карточку из приложения: кремовая бумага
   с цветной шапкой. Человек, открывший бот, узнаёт те же три. */
.module {
  background: var(--cream);
  color: var(--ink);
  border-radius: 18px;
  border-top: 6px solid;
  padding: 16px 18px 18px;
}
.module--wf   { border-top-color: var(--m-wf); }
.module--coll { border-top-color: var(--m-coll); }
.module--vf   { border-top-color: var(--m-vf); }

.module__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.module__name { font-size: 17px; font-weight: 600; margin-top: 2px; }
.module__what { font-size: 14.5px; color: var(--ink-55); margin-top: 2px; }

.dict {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--cream-22);
  border-radius: 18px;
}
.dict__name { font-size: 17px; font-weight: 600; }
.dict__what { font-size: 15px; color: var(--cream-75); margin-top: 3px; max-width: 34em; }

/* Карточка словарика — тот же экран, что в приложении, собранный из тех же
   токенов. Слово и пример моноширинные, перевод обычным шрифтом. */
.dict-card { margin-top: 14px; text-align: center; }
.dict-card__word {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
}
.dict-card__tr { font-size: 18px; margin-top: 12px; }
.dict-card__ex {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-55);
  text-align: left;
}
.dict-card__ex .mono { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }

/* «Ещё задание» — тихое действие: золото на странице занято главной кнопкой. */
.again {
  appearance: none;
  margin-top: 16px;
  padding: 11px 20px;
  border: 1.5px solid var(--cream-22);
  border-radius: 13px;
  background: transparent;
  color: var(--cream-75);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.again:hover { border-color: var(--cream-50); color: var(--cream); }
.again:focus-visible { outline: 2px solid var(--cream-50); outline-offset: 3px; }

/* --- Кто это делает -------------------------------------------------------- */

/* Два портрета в ряд: автор и талисман. Фотографии НЕ обрезаны по контуру —
   вырезанный кот у нас уже есть, это рисунок на первом экране и элемент бренда.
   Здесь работа другая: доказать, что человек и кот настоящие, а доказывают это
   как раз комната и стена вокруг них. */
.author { display: grid; gap: 22px; }

.faces { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 460px; }

.faces figure { margin: 0; }

.faces img {
  width: 100%;
  /* height обязателен: атрибут height в разметке — презентационная подсказка,
     и без явного auto он перебивает aspect-ratio. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

.faces figcaption { margin-top: 8px; font-size: 13px; color: var(--cream-50); }
.author__caption { margin-top: 8px; font-size: 13px; color: var(--cream-50); }
.author p + p { margin-top: 12px; }
.author p { font-size: 15.5px; color: var(--cream-75); max-width: 34em; }
.author b { color: var(--cream); font-weight: 600; }

/* --- Финал и подвал -------------------------------------------------------- */

.final { padding-bottom: 44px; }
.final h2 { margin-bottom: 18px; }

footer {
  border-top: 1px solid var(--cream-12);
  padding: 28px 0 40px;
  font-size: 14.5px;
  color: var(--cream-50);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; }
.footer__links a { color: var(--cream-75); text-decoration: underline; text-underline-offset: 3px; }
.footer__links a:hover { color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .verdict { animation: none; }
}

/* --- Страница «Учителям» --------------------------------------------------- */

/* Списки доводов: маркер — тире того же веса, что и в маркерах на входе
   в приложение. Одна и та же графема на всех поверхностях. */
.facts { display: flex; flex-direction: column; gap: 16px; list-style: none; margin-top: 4px; }
.facts li { position: relative; padding-left: 18px; font-size: 15.5px; color: var(--cream-75); max-width: 36em; }
.facts li::before { content: "—"; position: absolute; left: 0; color: var(--cream-22); }
.facts b { color: var(--cream); font-weight: 600; }
.facts a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }

/* Отбивка для важного примечания: тот же приём, что у пар, которые вернутся
   в разборе сессии, — обводка слева, не заливка. */
.note-block {
  margin-top: 22px;
  padding: 14px 16px;
  border-left: 3px solid var(--gold);
  background: rgba(251, 246, 238, 0.05);
  border-radius: 0 14px 14px 0;
  font-size: 15px;
  color: var(--cream-75);
  max-width: 36em;
}
.note-block a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }

/* Строка-снятие возражения на первом экране: учитель должен прочитать её
   раньше, чем успеет подумать «а не уведёт ли она моих учеников». */
.hero__claim {
  margin-bottom: 26px;
  padding: 12px 16px;
  border-left: 3px solid var(--gold);
  background: rgba(251, 246, 238, 0.05);
  border-radius: 0 14px 14px 0;
  font-size: 16px;
  color: var(--cream);
  max-width: 32em;
}


/* Полный доступ: четыре карточки пакета в стиле карточек модулей, цена крупно. */
.paid__grid { display: grid; gap: 12px; margin: 22px 0; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .paid__grid { grid-template-columns: repeat(4, 1fr); } }
.paid__item {
  background: var(--cream);
  color: var(--ink);
  border-radius: 18px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.paid__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.paid__name { font-size: 15.5px; font-weight: 600; margin-top: 2px; }
.paid__what { font-size: 13.5px; color: var(--ink-55); line-height: 1.45; }
.paid__price { font-size: 16px; margin: 0 0 14px; color: var(--cream-75); }
.paid__price b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  color: var(--cream);
  margin-right: 6px;
}