/* page.css — статические страницы продукта (публичная страница §21).
 *
 * ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ app.css. Приложению нужен полный набор: оболочка, лента, композер,
 * настройки. Странице, которую открывают один раз и читают глазами, — три правила. Тянуть ради
 * неё весь лист приложения значило бы платить за то, чего на ней нет.
 *
 * ЦВЕТА И РАЗМЕРЫ — ИЗ tokens.css, своих здесь нет ни одного: страница входа в продукт обязана
 * выглядеть тем же продуктом. Политика конфиденциальности когда-то завела свои значения, и это
 * ровно та щель, из-за которой три поверхности разошлись (пункт 10 очереди).
 */

.page {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh);
}

.page-wrap {
  max-width: var(--column-w, 44rem);
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 5rem) 1.25rem 5rem;
}

/* ЗНАК И ИМЯ — ОДНОЙ СТРОКОЙ (18.08, слова владельца: «во вкладке о продукте нету лого, надпись
   Uxen какая-то маленькая и кривовато стоит»). Логотипа на странице действительно не было вовсе:
   единственное, чем продукт представлялся, — слово размером с обычный подзаголовок, висящее над
   огромным заголовком. Знак ставится тем же файлом, что и во вкладке браузера, — один источник,
   и при смене логотипа страница меняется вместе со всеми. */
.page-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-xl, 1.5rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: 0 0 2rem;
}

.page-brand img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.55rem;
  display: block;
}

/* Заголовок — единственное место, где текст крупный. Красный в бренде дозирован: он достаётся
   одной кнопке, а не заголовку, подзаголовку и списку разом. */
.page-title {
  font-size: var(--fs-hero);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.page-lead { color: var(--muted); margin: 0 0 1.75rem; }

/* ПРИЗЫВ — ЧЕРНИЛАМИ СО ЗНАКОМ БРЕНДА (06.09, слово владельца: «кнопка тупо чёрная или белая»).
   Заливка нейтральная — так же выглядит главная кнопка в приложении и у ChatGPT/Claude, и это
   единственный способ не спорить с красным знаком над ней. Но плоский прямоугольник и правда читался
   как заготовка: у кнопки появились рост, тень и КРАСНАЯ СТРЕЛКА — та самая дозированная доля
   акцента, которой хватает, чтобы кнопка принадлежала продукту, а не браузеру.
   Цвета с запасными значениями: если файл токенов однажды не доедет, кнопка останется читаемой,
   а не станет белым пятном на белом. */
.page-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-m);
  background: var(--ink, #1c1d21);
  color: var(--ink-on, #ffffff);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.55);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.page-cta::after {
  content: "→";
  color: var(--accent, #e02d26);
  font-weight: 700;
}
.page-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.6); }
.page-cta:active { transform: translateY(0); }

.page-section { margin: 2.75rem 0 0; }
.page-section h2 { font-size: var(--fs-l); margin: 0 0 0.6rem; }
.page-section p { margin: 0.6rem 0; }

.page-list { margin: 0.6rem 0; padding-left: 1.2rem; }
.page-list li { margin: 0.45rem 0; }

.page-note { color: var(--muted); font-size: var(--fs-s); }

.page-foot {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-s);
}

/* ССЫЛКА В ПРОЗЕ НАСЛЕДУЕТ ЦВЕТ АБЗАЦА — ОФОРМЛЕННЫЙ ЭЛЕМЕНТ НЕТ (06.09, слово владельца: «на
   кнопке появилась только стрелка, без текста»). Здесь стояло `.page a`, и оно перебивало
   собственный цвет кнопки-призыва: у `.page a` вес выше, чем у `.page-cta`, поэтому надпись
   красилась ЧЕРНИЛАМИ ПО ЧЕРНИЛЬНОЙ заливке и исчезала. Видна оставалась одна стрелка — у неё
   цвет объявлен свой. До этого кнопка была красной, и та же подмена просто не бросалась в глаза.
   Обычная ссылка в тексте класса не имеет; всё, у чего класс есть, красит себя само. */
.page a:not([class]) { color: inherit; }
.page-foot a, .page-section a { text-decoration: underline; text-underline-offset: 0.2em; }