/* Посадочная страница. Палитра и шрифт — те же, что в приложении:
   шрифт берётся из общей папки fonts, второй копии файла нет. */

@font-face {
  font-family: 'Nunito';
  src: url('../fonts/nunito-cyrillic.woff2') format('woff2');
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --фон: #EFEDE8; --бумага: #FFFDFA; --текст: #2E2A26; --тихий: #8A8078;
  --акцент: #A8846A; --мягкий: #E4D3C0;
  --тень: 6px 6px 16px rgba(163,152,137,.35), -6px -6px 16px rgba(255,255,255,.75);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--фон); color: var(--текст);
  font-family: 'Nunito', -apple-system, system-ui, sans-serif; line-height: 1.5; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.01em; }
p { margin: 0; }
.обёртка { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.кнопки { display: flex; gap: 12px; flex-wrap: wrap; }
.магазин { display: flex; align-items: center; gap: 10px; padding: 14px 22px;
  border-radius: 16px; background: var(--текст); color: var(--бумага);
  text-decoration: none; font-weight: 700; font-size: 16px; }
.магазин.светлая { background: var(--мягкий); color: #4A3B2E; }

/* Метка для магазина, где приложения ещё нет (сейчас таких нет). Это не
   кнопка, а метка: нажимать нечего, и выглядеть как рабочая кнопка
   она не должна. */
.магазин.скоро { background: var(--мягкий); color: #6B5744; cursor: default; }
.магазин span { font-size: 12px; font-weight: 600; opacity: .7; display: block; line-height: 1.1; }

.телефон { border-radius: 30px; box-shadow: var(--тень); display: block; width: 100%; }

/* Нарисованная книга. Тень рисует страница, а не сама картинка:
   в картинке она давала грязную кайму на прозрачном фоне. */
.книга-рисунок { display: block; width: 100%; max-width: 520px; margin: 0 auto;
  filter: drop-shadow(0 26px 40px rgba(90,70,50,.30)); }

.шапка { padding: 20px 0; }
.шапка .обёртка { display: flex; align-items: center; justify-content: space-between; }
.лого { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.лого img { width: 32px; height: 32px; border-radius: 9px; }

.герой { padding: 26px 0 60px; background: var(--бумага); }
/* На широком экране текст слева, телефон справа: заголовок и низ —
   две строки левой колонки, телефон занимает обе. На узком порядок
   становится естественным: заголовок, экран приложения, текст, кнопки. */
.герой .обёртка { display: grid; grid-template-columns: 1fr .8fr;
  grid-template-rows: auto auto; gap: 0 60px; align-items: center; }
.герой-заголовок { grid-column: 1; grid-row: 1; align-self: end;
  font-size: 44px; line-height: 1.14; }
.герой-низ { grid-column: 1; grid-row: 2; align-self: start; margin-top: 18px; }
.телефон-рамка { grid-column: 2; grid-row: 1 / span 2; }
.герой .под { margin-top: 0; font-size: 18px; color: var(--тихий); max-width: 26em; }
.герой .кнопки { margin-top: 28px; }
.телефон-рамка { position: relative; }
.телефон-рамка .телефон { max-width: 330px; margin: 0 auto; }
.шепот { margin-top: 12px; text-align: center; font-size: 14px; color: var(--тихий); }

.польза { padding: 66px 0; }
.польза .ряд { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 34px; }
.карточка { background: var(--бумага); border-radius: 18px; padding: 26px; box-shadow: var(--тень); }
.карточка h3 { font-size: 19px; margin-bottom: 8px; }
.карточка p { color: var(--тихий); font-size: 16px; }

.итог { padding: 70px 0; background: var(--мягкий); }
.итог .обёртка { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; }
.итог h2 { font-size: 34px; }
.итог p { margin-top: 14px; font-size: 17px; color: #6B5744; }
.итог .оговорка { font-size: 15px; }
.книга-заглушка.широкая { aspect-ratio: 16/10; background: linear-gradient(140deg,#F2EBE0,#E0D3C0); }

.бесплатно { margin-top: 16px; font-size: 16px; font-weight: 600; color: #4A3B2E; }
.без-установки { margin-top: 8px; font-size: 15px; color: var(--тихий); }
.без-установки a { color: var(--акцент); }

.браузер { padding: 66px 0; background: var(--бумага); }
.браузер-ввод { margin-top: 14px; max-width: 46em; font-size: 17px; color: var(--тихий); }
.браузер-ввод a { color: var(--акцент); }
.браузер-ряд { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.браузер .карточка { background: var(--фон); }
.браузер .карточка h3.второй { margin-top: 18px; }

.низ { padding: 60px 0; text-align: center; }
.низ h2 { font-size: 30px; }
.низ .кнопки { justify-content: center; margin-top: 24px; }
.подвал { padding: 24px 0 34px; font-size: 14px; color: var(--тихий); text-align: center; }
h2.раздел { font-size: 30px; }
@media (max-width: 860px) {
  .герой .обёртка, .итог .обёртка { grid-template-columns: 1fr; gap: 26px; }
  .герой .обёртка { grid-template-rows: none; }
  .герой-заголовок, .герой-низ, .телефон-рамка { grid-column: 1; grid-row: auto; }
  .герой-заголовок { font-size: 30px; }
  .герой-низ { margin-top: 0; }
  .польза .ряд, .браузер-ряд { grid-template-columns: 1fr; }
}

/* На телефоне кнопки магазинов во всю ширину: так в них легче попасть
   пальцем, и они перестают болтаться по левому краю. */
@media (max-width: 560px) {
  .лого { font-size: 16px; }
  .лого img { width: 28px; height: 28px; }

  /* Кнопка в шапке налезала на название. Убираем её: кнопки магазинов
     и так стоят сразу под заголовком, дублировать незачем. */
  .шапка .кнопки { display: none; }
  .герой .кнопки .магазин,
  .низ .кнопки .магазин { flex: 1 1 100%; justify-content: center; }
}

/* --- Подвал и сообщение о cookie ---
   Рисует их soglasie.js — тот же файл, что на остальных страницах сайта.
   Здесь только оформление: приложенческий style.css сюда не подключён,
   иначе его правила для body подрались бы с правилами страницы. */

.подвал { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
  max-width: 1120px; margin: 0 auto; padding: 26px 24px 36px;
  border-top: 1px solid rgba(163,152,137,.25); font-size: 14px; }

.подвал a,
.подвал-кнопка { color: var(--тихий); text-decoration: none;
  border-bottom: 1px solid rgba(163,152,137,.4); }

.подвал-кнопка { padding: 0; border-width: 0 0 1px; border-style: solid;
  border-color: rgba(163,152,137,.4); background: none; font: inherit; cursor: pointer; }

/* Пока человек не нажал «Принять», счётчик не загружен вовсе. */
.согласие-окно { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  max-width: 560px; margin: 0 auto; padding: 18px 20px max(env(safe-area-inset-bottom), 16px);
  background: var(--бумага); border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 20px rgba(163,152,137,.3); }

.согласие-текст { margin: 0 0 14px; font-size: 14px; }
.согласие-текст a { color: var(--акцент); }
.согласие-кнопки { display: flex; align-items: center; gap: 14px; }

.согласие-да { flex: 1 1 auto; min-height: 44px; padding: 12px 18px;
  border: 0; border-radius: 14px; background: var(--текст); color: var(--бумага);
  font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }

.согласие-нет { flex: 0 0 auto; padding: 12px 4px; border: 0; background: none;
  font: inherit; font-size: 15px; color: var(--тихий); cursor: pointer; }