/* Страницы воронки: лид-магнит, продукт, оформление заказа.
 *
 * Это не окно продукта, а публичные страницы, которые креатор показывает
 * своим людям. Поэтому шкала здесь крупнее продуктовой, но заметно мельче
 * лендинговой из DESIGN_WEB: страницы читают с телефона, и заголовок в сто
 * пикселей там занимает экран целиком.
 *
 * Палитра, радиусы, тени и шрифты — общие, из ../../style/tokens.css.
 */

.page {
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(28px, 7vw, 56px) clamp(18px, 5vw, 28px) 64px;
}

/* ── Шапка страницы ───────────────────────────────────────────────────── */

.hero__label {
  font: 500 11px/1.2 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}

.hero__title {
  font: 600 clamp(28px, 7.2vw, 40px)/1.14 var(--font);
  letter-spacing: -.032em;
  margin: 0 0 12px;
}

.hero__sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 28px;
}

/* ── Текст статьи ─────────────────────────────────────────────────────── */
/* Ширина строки здесь важнее плотности: это то, что человек читает целиком,
   а не проглядывает. */

.article p {
  font-size: 16px;
  line-height: 1.68;
  margin: 0 0 18px;
}

.article p:last-child { margin-bottom: 0; }

/* ── Модули курса ─────────────────────────────────────────────────────── */

.modules { display: grid; gap: 0; margin: 0 0 28px; }

.module {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.module:first-child { border-top: 0; padding-top: 0; }

.module__no {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--soft);
  font: 600 14px/1 var(--font);
  color: var(--ink-2);
}

.module__name {
  margin: 4px 0 4px;
  font: 600 16px/1.35 var(--font);
  letter-spacing: -.012em;
}

.module__after { margin: 0; font-size: 14.5px; color: var(--ink-2); }

/* ── Цена ─────────────────────────────────────────────────────────────── */

.price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 28px;
  padding: 18px 20px;
  background: var(--soft);
  border-radius: var(--r-panel);
}

.price__value {
  font: 600 clamp(24px, 6vw, 30px)/1 var(--font);
  letter-spacing: -.03em;
}

.price__note { font-size: 13.5px; color: var(--ink-2); }

/* ── Список «для кого» ────────────────────────────────────────────────── */

.who {
  margin: 0 0 28px;
  padding: 16px 18px;
  background: var(--soft);
  border-radius: var(--r-card);
  font-size: 15px;
}

.who__label {
  display: block;
  font: 500 11px/1.2 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 7px;
}

/* ── Форма заказа ─────────────────────────────────────────────────────── */

.form { display: grid; gap: 16px; margin: 0 0 22px; }

.field { display: grid; gap: 7px; }

.field__label {
  font: 500 13px/1.2 var(--font);
  color: var(--ink-2);
}

.field input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--sheet);
  font: 400 16px/1 var(--font);
  color: var(--ink);
}

.field input:focus {
  outline: none;
  border-color: var(--ink-2);
}

.form__note { margin: 0; font-size: 13.5px; color: var(--ink-2); }

/* ── Кнопка на всю ширину ─────────────────────────────────────────────── */
/* На телефоне кнопка занимает строку целиком: попадать пальцем в таблетку
   по центру экрана неудобно. */

.go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 56px;
  padding: 0 10px 0 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font: 600 15px/1.25 var(--font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--lift-button);
}

.go:hover { background: #23282d; }

.go__arrow {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  font-size: 15px;
}

/* ── Итог заказа ──────────────────────────────────────────────────────── */

.done {
  display: grid;
  gap: 10px;
  padding: 22px;
  background: var(--soft);
  border-radius: var(--r-panel);
  animation: reveal var(--in) both;
}

.done__title {
  margin: 0;
  font: 600 19px/1.3 var(--font);
  letter-spacing: -.015em;
}

.done__text { margin: 0; color: var(--ink-2); }

/* Уведомление мастеру. Второй бот, и в кадре это видно: клиент идёт в боте
   мастера, а заявка падает мастеру в основной. */
.notice {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.notice__label {
  display: block;
  font: 500 10.5px/1.2 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.notice__line { margin: 0; font-size: 14px; }
.notice__meta { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }

/* ── Подпись демонстрации ─────────────────────────────────────────────── */
/* Страница выглядит как настоящая, и человек должен понимать, что это
   показ: заявка никуда не уходит и оплаты не будет. */

.demo-mark {
  margin: 36px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
}