/* Общие стили публичных страниц — лендинга `/` и посадочной `/study`.
   Палитра и шрифты — в tokens.css, подключается перед этим файлом.
   Здесь: сетка, шапка, кнопки, hero, секции, карточки, подвал. Стили,
   которые есть только у одной страницы, живут в её шаблоне. */

img, svg { max-width: 100%; }

.wrap { max-width: 64rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }

.display {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 700; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* --- шапка --- */

.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
       padding: 1.25rem 0; }
.logo { font-family: 'Unbounded', system-ui, sans-serif; font-weight: 700;
        font-size: 1.375rem; letter-spacing: -.03em; }
.logo em { font-style: normal; color: var(--accent); }
.bar nav { display: flex; align-items: center; gap: 1.25rem; font-size: .9375rem; }
.bar nav a { color: var(--muted); text-decoration: none; }
.bar nav a:hover { color: var(--ink); }
/* Кнопка в шапке — тоже ссылка внутри nav, и правило выше перекрашивало ей
   текст в приглушённый серый прямо поверх акцентной заливки. */
.bar nav a.btn { color: var(--on-accent); }
@media (max-width: 34rem) { .bar nav a.hide-s { display: none; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  min-height: 3rem; padding: .7rem 1.6rem;
  border: 0; border-radius: var(--r-ctl);
  background: var(--accent); color: var(--on-accent);
}
.btn:hover { filter: brightness(1.08); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn.ghost { background: transparent; color: var(--ink); border: 2px solid var(--rule); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.btn.small { min-height: 2.5rem; padding: .45rem 1.1rem; font-size: .9375rem; }
/* Десктоп: телеграм — дополнительный путь, не основной, поэтому контур
   в фирменном цвете, а не заливка — сплошной остаётся только «Собрать
   документ». Заливка появляется у телеграма только на телефоне, внутри
   медиазапроса ниже: там это единственный путь без почты и кода из
   письма, и он обязан быть самым заметным. */
.btn.tg { background: transparent; border: 2px solid #229ED9; color: #229ED9; }
.btn.tg:hover { background: rgba(34, 158, 217, .08); filter: none; }

/* --- герой --- */

.hero { padding: clamp(1.5rem, 5vw, 3rem) 0 clamp(2rem, 6vw, 3.5rem); }
.hero h1 { font-size: clamp(2.25rem, 6.5vw, 4rem); margin: 0 0 1.1rem; }
.hero h1 .accent { color: var(--accent); }
.hero p.lede { font-size: clamp(1.0625rem, 2.2vw, 1.25rem); color: var(--muted);
               max-width: 34rem; margin: 0 0 1.75rem; text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
@media (max-width: 34rem) {
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { text-align: center; }
  /* Три кнопки съели бы весь первый экран телефона, поэтому «Как это
     работает» здесь скрыт (класс ставится только когда бот включён —
     без бота на телефоне всё остаётся как было до этой правки, см.
     разметку кнопок ниже), а телеграм — единственный путь без почты и
     кода из письма — становится первым и сплошным. */
  .hero-cta .how-hide-mobile { display: none; }
  .hero-cta .btn.tg {
    order: -1;
    background: #229ED9; border-color: #229ED9; color: var(--on-accent);
  }
  .hero-cta .btn.tg:hover { background: #229ED9; filter: brightness(1.08); }
  /* «Собрать документ» на телефоне при включённом боте — уже не главное
     действие, поэтому контурная; класс ставится тем же условием, что и
     телеграм-кнопка, и не имеет силы вне этого медиазапроса — на
     десктопе кнопка остаётся сплошной независимо от бота. */
  .hero-cta .secondary-on-phone {
    background: transparent; color: var(--ink); border: 2px solid var(--rule);
  }
  .hero-cta .secondary-on-phone:hover { border-color: var(--accent); color: var(--accent); filter: none; }
}
.hero-note { font-size: .875rem; color: var(--muted); margin: 1rem 0 0; }

.hero-art { margin-top: clamp(1.75rem, 5vw, 3rem); }
.hero-art svg { width: 100%; height: auto; display: block; }
/* На телефоне место первого экрана дороже картинки: вместо схемы
   «запись → документ» человек видит два настоящих документа, которые
   открываются без регистрации. Схема остаётся на широких экранах, где
   она ничего не вытесняет. */
@media (max-width: 34rem) {
  .hero-art { display: none; }
}

/* --- секции --- */

.section { padding: clamp(2.5rem, 7vw, 4.5rem) 0; border-top: 1px solid var(--rule); }
.eyebrow { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
           color: var(--accent); font-weight: 500; margin: 0 0 .75rem; }
.section h2 { font-family: 'Unbounded', system-ui, sans-serif; font-weight: 700;
              letter-spacing: -.03em; font-size: clamp(1.5rem, 3.5vw, 2.125rem);
              margin: 0 0 1.5rem; text-wrap: balance; }
.section p.intro { max-width: 38rem; color: var(--muted); margin: -.75rem 0 2rem; text-wrap: pretty; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card);
        padding: 1.35rem; display: grid; gap: .5rem; align-content: start; box-shadow: var(--lift); }
.card h3 { margin: 0; font-size: 1.0625rem; }
.card p { margin: 0; color: var(--muted); font-size: .9375rem; text-wrap: pretty; }

.foot { padding: 2rem 0 3rem; color: var(--muted); font-size: .875rem;
        display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
        border-top: 1px solid var(--rule); margin-top: clamp(2rem, 6vw, 4rem); }