/* ОБЩИЙ СТИЛЬ ВИТРИНЫ — лендинг, оферта, политика.
 *
 * ЗАЧЕМ ОТДЕЛЬНЫМ ФАЙЛОМ. CSS лежал тремя почти одинаковыми копиями в <style>
 * каждой страницы. Копии уже начали расходиться (у оферты свои .note и .draft,
 * у лендинга свои .price и .samples), а витрина должна выглядеть одним сайтом,
 * а не тремя похожими. Одна правка цвета — одно место.
 *
 * ПАЛИТРА И ШРИФТЫ — ИЗ САМОЙ КНИГИ («Новая папка/book.html»). Человек приходит
 * с лендинга в образец книги и обратно; если витрина выглядит иначе, чем товар,
 * переход читается как уход на чужой сайт. Значения скопированы намеренно:
 * книга собирается своим шаблоном и общий CSS ей не подключить.
 *
 * ШРИФТЫ ВНЕШНИЕ (Google Fonts) — как в книге. Плата за это: браузер посетителя
 * ходит на сторонний домен. Если юрист скажет, что для .by так нельзя, шрифты
 * кладутся рядом файлами и меняется только @font-face — вёрстка не поедет,
 * запасная цепочка (Georgia, serif) уже прописана везде.
 */

:root {
  --paper: #FAF4E8;
  --paper-edge: #F0E5D2;
  --mat: #F4EBDA;
  --ink: #2C231E;
  --ink-soft: #6E6053;
  --garnet: #7C2B38;
  --garnet-deep: #5E1F2A;
  --gold: #AE8742;
  --gold-soft: #C8A567;
  --navy: #243B53;
  /* Ширина строки. Длинную строку глазом не поймать — это документ,
     который читают, а не проглядывают. */
  --measure: 36rem;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Spectral", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  background-image: radial-gradient(120% 80% at 50% 0%, #FFFCF6 0%, var(--paper) 55%, #F4ECDC 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 22px; }
.wrap--wide { max-width: 58rem; }

a { color: var(--garnet); text-underline-offset: 3px; }
a:hover { color: var(--garnet-deep); }

h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.18; }

/* ── Шапка-обложка ───────────────────────────────────────────────────────── */

.hero {
  background: radial-gradient(120% 100% at 50% 0%, var(--garnet) 0%, var(--garnet-deep) 100%);
  color: var(--paper);
  padding: clamp(38px, 8vw, 76px) 0 clamp(42px, 8vw, 72px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Сердечки с фирменного баннера. SVG, а не картинка: узор должен тянуться
   на любую ширину и не весить ничего. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 84c-2-2-24-16-24-34a14 14 0 0 1 24-10 14 14 0 0 1 24 10c0 18-22 32-24 34z' fill='%23ffffff' fill-opacity='0.045'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  pointer-events: none;
}
.hero > * { position: relative; }

.brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: clamp(20px, 5vw, 34px); }
.brand svg { width: 44px; height: 44px; flex: none; }
.brand span {
  font-family: var(--display); font-size: 30px; font-weight: 600;
  color: var(--paper); letter-spacing: -.01em;
}

/* Две колонки на широком экране: слева обещание, справа доказательство.
   На телефоне — друг под другом, сначала слова, потом снимок: заголовок
   должен встретить человека первым, а не край картинки. */
.hero__cols {
  display: grid; grid-template-columns: 1fr; gap: clamp(30px, 5vw, 48px);
  align-items: center; text-align: center;
}
@media (min-width: 980px) {
  /* Знак выравнивается по колонке с текстом, а не по всей шапке: иначе он
     висит по центру над левым столбцом и читается как чужой элемент. */
  .hero { text-align: left; }
  .hero__cols { grid-template-columns: 1.1fr .9fr; text-align: left; }
  .hero__cols .actions { justify-content: flex-start; }
  .hero .lead { margin-left: 0; }
  /* Кнопки в узкой колонке переносились по одной. Пусть жмутся по содержимому,
     а не тянутся на всю ширину. */
  .hero__cols .btn { padding: 14px 24px; font-size: 16.5px; }
}

/* Рамка телефона рисуется здесь, а не в картинке. */
.phone {
  width: min(268px, 74vw); margin: 0 auto;
  background: #1b1512; border-radius: 30px; padding: 9px;
  box-shadow: 0 18px 50px rgba(0,0,0,.36), 0 0 0 1px rgba(255,255,255,.10) inset;
}
.phone img {
  display: block; width: 100%; height: auto;
  border-radius: 22px; background: var(--paper);
}

.kicker {
  font-family: var(--body);
  font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-soft); margin: 0 0 18px;
}

.hero h1 {
  font-style: italic;
  font-size: clamp(32px, 7.4vw, 58px);
  margin: 0 0 22px;
  color: var(--paper);
  letter-spacing: -.01em;
}

.hero .lead {
  font-size: clamp(17px, 2.4vw, 19px);
  color: #F2E3D9;
  margin: 0 auto 30px;
  max-width: 33rem;
}

/* ── Кнопки ──────────────────────────────────────────────────────────────── */

.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.btn {
  display: inline-block; text-decoration: none;
  font-family: var(--body); font-size: 17px;
  padding: 15px 30px; border-radius: 999px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: var(--paper); color: var(--garnet-deep);
  box-shadow: 0 6px 22px rgba(0,0,0,.22);
}
.btn--primary:hover { background: #fff; color: var(--garnet-deep); }
.btn--ghost { border: 1.5px solid rgba(250,244,232,.5); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper); color: var(--paper); }
/* Та же кнопка на светлом фоне — в конце страницы. */
.btn--solid { background: var(--garnet); color: var(--paper); box-shadow: 0 6px 20px rgba(124,43,56,.24); }
.btn--solid:hover { background: var(--garnet-deep); color: var(--paper); }

.checkout-box { margin: 24px 0 34px; padding: 22px; background: var(--mat); border: 1px solid rgba(174,135,66,.35); border-radius: 12px; }
.checkout-box h2 { text-align: left; margin-top: 0; }
.checkout-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.checkout-actions form { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: #fff; border-radius: 9px; }
.checkout-actions label { font-size: 14px; line-height: 1.45; }
.checkout-actions input { margin-right: 6px; }
.pay-button { border: 0; border-radius: 999px; padding: 13px 20px; color: var(--paper); background: var(--garnet); font: 600 16px var(--body); cursor: pointer; }
.pay-button:hover { background: var(--garnet-deep); }

/* ── Секции ──────────────────────────────────────────────────────────────── */

section { padding: clamp(40px, 7vw, 64px) 0; }
section + section { padding-top: 0; }

h2 {
  font-size: clamp(24px, 4.2vw, 32px);
  color: var(--ink);
  margin: 0 0 6px;
  text-align: center;
}
.sub { text-align: center; color: var(--ink-soft); margin: 0 auto 30px; max-width: 30rem; }

/* Орнамент-разделитель — как между главами в книге. */
.orn { text-align: center; color: var(--gold); letter-spacing: .35em; font-size: 12px; margin: 0 0 26px; }

/* ── Образцы книг ────────────────────────────────────────────────────────── */

/* Шесть образцов раскладываются 3×2, а не 5+1: одинокая карточка во втором
   ряду выглядит недоделкой. minmax подобран так, чтобы на 58rem вставало
   ровно три, на планшете два, на телефоне один. */
.samples { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 14px; }
.sample {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--mat);
  border: 1px solid rgba(174,135,66,.28);
  border-left: 5px solid var(--garnet);
  border-radius: 4px 10px 10px 4px;
  padding: 18px 18px 16px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.sample:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(44,35,30,.12); color: var(--ink); }
.sample b { display: block; font-family: var(--display); font-size: 19px; font-weight: 500; margin-bottom: 3px; }
.sample span { font-size: 13.5px; color: var(--ink-soft); letter-spacing: .04em; }

/* ── Как это устроено ────────────────────────────────────────────────────── */

.steps { display: grid; gap: 20px; counter-reset: step; }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--display); font-size: 40px; font-style: italic;
  color: var(--gold); line-height: 1; text-align: center;
}
.step b { display: block; font-size: 18px; margin-bottom: 2px; }
.step p { margin: 0; color: var(--ink-soft); }

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

.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.price {
  background: var(--mat); border: 1px solid rgba(174,135,66,.28);
  border-radius: 12px; padding: 24px 22px; text-align: center;
}
.price--main { border-color: var(--garnet); box-shadow: 0 6px 20px rgba(124,43,56,.10); }
.price .amount {
  display: block; font-family: var(--display); font-style: italic;
  font-size: clamp(28px, 5vw, 38px); color: var(--garnet); line-height: 1.1; margin-bottom: 8px;
}
.price .what { display: block; font-size: 16px; margin-bottom: 8px; }
/* Своё имя, а не .note: тем классом размечены врезки в оферте, и карточка
   цены получала от них рамку с заливкой. Общий CSS экономит копии, но чужое
   имя класса в нём — это чужой стиль, приехавший без спроса. */
.price .price-note { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
.included { text-align: center; color: var(--ink-soft); font-size: 15.5px; margin: 18px auto 0; max-width: 32rem; }
.included:empty { display: none; }

/* ── Честные ограничения ─────────────────────────────────────────────────── */

.plain { list-style: none; margin: 0; padding: 0; }
.plain li {
  padding: 12px 0 12px 26px; position: relative;
  border-top: 1px solid rgba(44,35,30,.10); color: var(--ink-soft);
}
.plain li:first-child { border-top: none; }
.plain li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }

/* ── Вопросы и ответы ────────────────────────────────────────────────────── */

/* <details>, а не аккордеон на скриптах: работает без JS, открывается поиском
   по странице и печатается целиком. */
.faq details {
  border-top: 1px solid rgba(44,35,30,.12);
  padding: 2px 0;
}
.faq details:last-child { border-bottom: 1px solid rgba(44,35,30,.12); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 15px 30px 15px 0; position: relative;
  font-size: 17.5px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 13px;
  font-size: 22px; line-height: 1; color: var(--gold);
  transition: transform .15s ease;
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--garnet); }
.faq details p { margin: 0 0 16px; color: var(--ink-soft); padding-right: 30px; }

.finale { text-align: center; padding-bottom: clamp(50px, 9vw, 80px); }

/* ── Документы: оферта и политика ────────────────────────────────────────── */

.doc-top {
  background: var(--garnet-deep); color: var(--paper);
  padding: 16px 0; font-size: 15px;
}
.doc-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.doc-top a { color: var(--paper); text-decoration: none; }
.doc-top a:hover { color: #fff; text-decoration: underline; }
.doc-top .home { font-family: var(--display); font-size: 20px; font-weight: 600; }

.doc { padding: clamp(30px, 6vw, 52px) 0 clamp(40px, 7vw, 70px); }
.doc h1 { font-size: clamp(26px, 5vw, 36px); margin: 0 0 6px; color: var(--ink); }
.doc h2 {
  font-size: clamp(19px, 3vw, 22px); text-align: left;
  color: var(--garnet); margin: 34px 0 8px;
}
.doc p { margin: 10px 0; }
.doc ul, .doc ol { margin: 10px 0 10px 22px; }
.doc li { margin: 6px 0; }
.updated { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 26px; }

.note {
  background: rgba(124,43,56,.05); border-left: 3px solid var(--garnet);
  padding: 13px 17px; margin: 18px 0; border-radius: 0 8px 8px 0; font-size: 15.5px;
}
.draft {
  background: #FBF0CE; border: 1px solid #E0C26A; border-radius: 10px;
  padding: 15px 18px; margin: 0 0 26px; font-size: 15.5px;
}

/* Незаполненный реквизит виден и человеку, и владельцу — молча пустым
   оставлять нельзя: «УНП » в договоре никто не заметит до первого спора. */
.fill { background: #FBF0CE; border-bottom: 1px dashed #C9A227; padding: 0 5px; border-radius: 3px; }

/* ── Подвал ──────────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid rgba(44,35,30,.12);
  padding: 26px 0 46px;
  color: var(--ink-soft); font-size: 14.5px;
}
footer p { margin: 5px 0; }
footer .legal { margin-bottom: 14px; }

@media (max-width: 480px) {
  body { font-size: 16.5px; }
  .step { grid-template-columns: 40px 1fr; gap: 12px; }
  .step::before { font-size: 32px; }
  .btn { width: 100%; text-align: center; }
  /* На 375px разрядка в 0.3em упирает надстрочник в края экрана. */
  .kicker { font-size: 11.5px; letter-spacing: .22em; }
  .brand svg { width: 38px; height: 38px; }
  .brand span { font-size: 27px; }
}

/* Печать оферты — человек может захотеть бумажную копию договора. */
@media print {
  body { background: #fff; color: #000; }
  .doc-top, .draft { display: none; }
  a { color: #000; }
}