/* Палитра и шрифты — тема Muse, та же, что выбрана для приложения
   (docs/design/.../02_muse_guardian/assets/themes.css). Значения продублированы,
   а не импортированы: страница обязана быть полностью автономной — один
   HTML, один CSS, никакой сборки и никакой зависимости от нашего репозитория
   приложения. Если тема в приложении изменится, эти 12 строк в :root
   правятся руками; это дешевле, чем связывать статическую страницу со
   сборкой RN.

   Тёмной темы здесь НЕТ намеренно (решение фаундера 2026-07-30): Muse —
   тёплое молочное утро, и именно в светлом виде она попадает в аудиторию,
   ради которой выбрана. Автопереключение по системной настройке показывало
   бы половине посетителей совсем другую страницу, чем ту, которую мы
   утверждали. */
:root {
  --bg:         #FFF9F4;
  --surface:    #FFFFFF;
  --line:       #F0DFD2;
  --text:       #4B3646;
  --muted:      #8A7480;
  --accent:     #F09A7E;
  --accent-ink: #7A3520;

  --r-sm: 12px;
  --r-md: 20px;
  --r-pill: 999px;

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 34rem;
  margin: 0 auto;
  /* Просторные поля сверху — страница должна начинаться с воздуха, а не
     с текста, упирающегося в край экрана. */
  padding: clamp(3rem, 12vh, 7rem) 1.5rem 3rem;
}

.wordmark {
  font-family: var(--font-display);
  /* Марка набрана не антиквой, а разрядкой прописными: логотип не должен
     спорить с заголовком за роль главного на странице. */
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(2.5rem, 9vh, 5rem);
}

h1 {
  font-family: var(--font-display);
  /* Кегль тянется за шириной экрана: на телефоне заголовок не должен
     рассыпаться на пять строк, на десктопе — выглядеть мелко. */
  /* Заголовок во весь экран (решение фаундера): страница должна читаться как
     обложка, а не как текст. Нижняя граница 3rem — чтобы на узком телефоне
     «cost something» всё-таки помещалось в строку. */
  font-size: clamp(2.7rem, 8.5vw, 4.4rem);
  font-weight: 400;
  line-height: 1.06;
  /* Крупный кегль требует более плотного трекинга: на 5.75rem дефолтные
     просветы выглядят рыхло. */
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}

/* Единственный курсив на странице — ударное слово. Instrument Serif
   держит настоящее курсивное начертание, а не наклонённое. */
h1 em {
  font-style: italic;
  color: var(--accent-ink);
}
.lede {
  /* Подзаголовок намеренно скромнее прежнего: рядом с крупной обложкой он
     — подпись, а не второй голос. */
  font-size: 1.0625rem;
  color: var(--muted);
  max-width: 27rem;
  margin: 0 0 clamp(2.5rem, 8vh, 4rem);
  max-width: 27rem;
}

.ledger {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.25rem 0;
  margin: 0 0 2.5rem;
}
.ledger dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .7rem 1rem;
  margin: 0;
  font-size: .9375rem;
}
.ledger dt {
  color: var(--muted);
  /* Точечная линия дотягивается до суммы, как в бумажном счёте. Рисуется
     псевдоэлементом и обрезается overflow — так она подстраивается под любую
     ширину без ручного подбора количества точек. */
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.ledger dt::after {
  content: " ....................................................";
  color: var(--line);
  letter-spacing: .12em;
}
.ledger dd {
  margin: 0;
  /* Цифры одной ширины — иначе колонка сумм «пляшет». */
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
}
.ledger .hi { color: var(--accent-ink); }

.signup {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.75rem;
  box-shadow: 0 6px 20px rgba(139, 96, 74, .07);
}
.signup h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 0 1.125rem;
}

.row { display: flex; gap: .625rem; flex-wrap: wrap; }

input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .8rem 1rem;
}
input[type="email"]::placeholder { color: var(--muted); opacity: .75; }
input[type="email"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

button {
  font: inherit;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border: none;
  border-radius: var(--r-pill);
  padding: .8rem 1.5rem;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
button:hover:not(:disabled) { filter: brightness(1.04); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.note {
  font-size: .875rem;
  color: var(--muted);
  margin: 1rem 0 0;
}

.status {
  margin: .75rem 0 0;
  font-size: .9375rem;
  min-height: 1.4em;
}
.status[data-state="ok"]  { color: var(--accent-ink); font-weight: 500; }
.status[data-state="err"] { color: #B4453A; }
footer {
  margin-top: clamp(2.5rem, 8vh, 4rem);
  color: var(--muted);
  font-size: .875rem;
}
footer p { margin: 0; }

/* Ловушка для ботов: убрана из потока и с клавиатуры, но не через
   `display:none` — часть скриптов такие поля пропускает. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}