/* Карта жизни — сайт. Дизайн-система «Тёплый ежедневник»: разделы 2–5. Сначала телефон. */
@font-face { font-family: "Lora"; src: url("../fonts/Lora-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/Lora-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/Caveat-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/Caveat-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
:root {
--paper: #F6F0E6; --paper-deep: #EDE4D6; --kraft: #D8C3A5;
--ink: #2E2A27; --ink-soft: #6B635C; --line: #CFC4B4;
--sage: #7E9479; --sage-deep: #5F7A5A; --terracotta: #A3573A; --mustard: #C99A3B;
--font-head: "Lora", Georgia, serif; --font-body: "Manrope", Arial, sans-serif; --font-hand: "Caveat", cursive;
/* Размеры сайта, мобильная версия (раздел 3) */
--h1: 30px; --h1-lh: 36px; --h2: 24px; --h2-lh: 30px; --h3: 19px; --h3-lh: 26px;
--body: 17px; --body-lh: 27px; --small: 14px; --small-lh: 20px; --hand: 24px; --hand-lh: 28px;
--col: 680px;
}
@media (min-width: 900px) {
:root { --h1: 44px; --h1-lh: 52px; --h2: 32px; --h2-lh: 40px; --h3: 22px; --h3-lh: 30px;
--body: 18px; --body-lh: 29px; --hand: 28px; --hand-lh: 32px; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0; min-height: 100vh;
background: var(--paper) url("../img/paper-noise.png") repeat; background-size: 256px 256px;
color: var(--ink); font-family: var(--font-body); font-size: var(--body); line-height: var(--body-lh);
-webkit-font-smoothing: antialiased;
}
a { color: var(--sage-deep); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; margin: 0 0 16px; }
h1 { font-size: var(--h1); line-height: var(--h1-lh); }
h2 { font-size: var(--h2); line-height: var(--h2-lh); }
h3 { font-size: var(--h3); line-height: var(--h3-lh); }
p { margin: 0 0 16px; }
.small { font-size: var(--small); line-height: var(--small-lh); color: var(--ink-soft); }
.hand { font-family: var(--font-hand); font-weight: 500; font-size: var(--hand); line-height: var(--hand-lh); }
.wrap { max-width: var(--col); margin: 0 auto; padding: 32px 16px 64px; }
@media (min-width: 900px) { .wrap { padding: 64px 24px 96px; } }
.logo { font-family: var(--font-head); font-weight: 600; font-size: 20px; text-decoration: none; color: var(--ink); }
.site-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
/* Кнопки (раздел 5) */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 52px; padding: 0 24px; border-radius: 10px; border: 1.5px solid var(--terracotta);
background: var(--terracotta); color: var(--paper); font: 600 var(--body)/1.2 var(--font-body);
text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn:disabled { opacity: .45; cursor: default; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-text { background: none; border: none; color: var(--ink-soft); font: 600 var(--small)/1 var(--font-body);
min-height: 44px; padding: 0 8px; cursor: pointer; }
.btn-text { display: inline-flex; align-items: center; gap: 4px; }
.icon { width: 16px; height: 16px; flex: none; }
.btn-wide { width: 100%; }
/* ---------- Анкета ---------- */
.progress { margin-bottom: 16px; }
.progress-line { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress-line i { display: block; height: 100%; background: var(--sage); width: 0; transition: width .25s; }
.progress-label { font-family: var(--font-hand); font-weight: 500; font-size: 22px; line-height: 28px; color: var(--ink-soft); margin-top: 6px; }
.q-card {
background: var(--paper-deep); border-radius: 14px; padding: 24px 16px 16px;
box-shadow: 0 1px 0 rgba(46,42,39,.06), 0 6px 18px rgba(46,42,39,.06);
}
@media (min-width: 900px) { .q-card { padding: 40px 40px 32px; } }
.q-heading { color: var(--ink-soft); font-size: var(--small); line-height: var(--small-lh); margin-bottom: 8px; }
.q-text { font-family: var(--font-head); font-weight: 600; font-size: var(--h3); line-height: var(--h3-lh); margin: 0 0 8px; }
.q-hint { color: var(--ink-soft); font-size: var(--small); line-height: var(--small-lh); margin: 0 0 16px; }
.q-sub { font-weight: 600; margin: 24px 0 8px; }
.q-transition { font-family: var(--font-hand); font-size: var(--hand); line-height: var(--hand-lh); margin: 16px 0 24px; }
/* Варианты ответа — карточки с чекбоксом */
.options { display: grid; gap: 8px; margin: 16px 0 0; }
.options.cols-2 { grid-template-columns: 1fr 1fr; }
.opt {
display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 14px;
background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer;
font-size: 16px; line-height: 22px; text-align: left; color: var(--ink); font-family: var(--font-body);
}
/* Подписи вариантов в файле анкеты со строчной буквы: заглавная — только оформлением */
.opt .lbl { display: block; }
.opt .lbl::first-letter { text-transform: uppercase; }
.opt .mark { flex: none; width: 22px; height: 22px; border: 1.5px solid var(--ink-soft); border-radius: 5px; position: relative; }
.opt.radio .mark { border-radius: 50%; }
.opt[aria-checked="true"] { border-color: var(--sage-deep); background: #F1F3EC; }
.opt[aria-checked="true"] .mark { border-color: var(--sage-deep); background: var(--sage-deep); }
.opt[aria-checked="true"] .mark::after {
content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
border: solid var(--paper); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.opt .order { margin-left: auto; font-family: var(--font-hand); font-size: 22px; color: var(--sage-deep); }
/* Шкала из кружков (раздел 5: «Ползунок 0–10 в виде шкалы из кружков») */
.scale { position: relative; display: flex; justify-content: space-between; margin: 16px 0 4px; }
.scale::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; border-top: 1.5px solid var(--ink-soft); }
.scale button {
position: relative; width: 28px; height: 28px; border-radius: 50%; padding: 0;
border: 1.5px solid var(--ink-soft); background: var(--paper); color: var(--ink-soft);
font: 600 12px/1 var(--font-body); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.scale.few button { width: 44px; height: 44px; font-size: 15px; }
@media (min-width: 600px) { .scale button { width: 36px; height: 36px; font-size: 14px; } }
.scale button[aria-checked="true"] { background: var(--sage); border-color: var(--sage-deep); color: #FFFFFF; }
.scale-ends { display: flex; justify-content: space-between; gap: 16px; color: var(--ink-soft); font-size: var(--small); line-height: var(--small-lh); }
.scale-ends span:last-child { text-align: right; }
.scale-caption { min-height: 20px; text-align: center; color: var(--sage-deep); font-size: var(--small); margin-top: 4px; }
.name-input {
width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--line);
background: var(--paper); font: 400 var(--body)/1.3 var(--font-body); color: var(--ink);
}
.name-input:focus, .opt:focus-visible, .scale button:focus-visible, .btn:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }
.error { color: var(--terracotta); font-size: var(--small); min-height: 20px; margin-top: 8px; }
.q-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; }
.q-nav .btn { flex: 1; max-width: 280px; margin-left: auto; }
.consent label { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; cursor: pointer; }
.consent input { flex: none; width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--sage-deep); }
.consent .opt-label { color: var(--ink-soft); font-size: var(--small); }
.spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--sage); margin: 24px auto;
animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------- Экран результата ---------- */
.portrait { display: block; width: 100%; max-width: 480px; height: auto; aspect-ratio: 1 / 1; margin: 8px auto 24px; }
.portrait-title { text-align: center; margin-bottom: 4px; }
.shade { text-align: center; color: var(--ink-soft); margin-bottom: 24px; }
.formula { font-family: var(--font-hand); font-size: var(--hand); line-height: var(--hand-lh); text-align: center; margin: 24px 0; }
.actions { display: grid; gap: 12px; margin: 24px 0 0; }
@media (min-width: 600px) { .actions { grid-template-columns: 1fr 1fr; } }
/* ---------- Страница перед оплатой ---------- */
.prepay { margin-top: 56px; }
/* Разделы — отдельными карточками, чтобы страница не читалась сплошным полотном (решение автора 31.10.2026) */
.pp-section { padding: 24px 18px 8px; margin: 0 0 20px; background: rgba(255, 255, 255, 0.45); border: 1px solid var(--line);
border-radius: 16px; }
.pp-section:nth-child(even) { background: var(--paper-deep); }
/* «##» из файла страницы — заголовок раздела, «###» — подзаголовок (рендер Markdown сдвигает уровни на один) */
.pp-section h3 { font-size: var(--h2); line-height: var(--h2-lh); padding-bottom: 12px;
background: url("data:image/svg+xml;utf8,") no-repeat left bottom / 96px 8px; }
.pp-section h4 { font-family: var(--font-head); font-weight: 600; font-size: var(--h3); line-height: var(--h3-lh); margin: 24px 0 12px;
color: var(--sage-deep); }
.pp-section h4::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: var(--terracotta); margin: 0 10px 3px 0; vertical-align: middle; }
.pp-section ul { list-style: none; padding-left: 0; margin: 0 0 16px; }
.pp-section ul li { position: relative; padding-left: 30px; }
.pp-section ul li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain; }
.list-label { margin-bottom: 6px; }
.result-list { padding-left: 22px; margin: 0 0 16px; }
.result-list li { margin-bottom: 4px; }
/* Сильные стороны плашками: свои — на тёплой бумаге, незамеченные — пунктиром шалфеем */
.chips { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { background: var(--paper-deep); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
font-size: var(--body); line-height: 1.35; }
.chips li::first-letter { text-transform: uppercase; }
.chips-soft li { background: transparent; border-style: dashed; border-color: var(--sage); }
.affirmation-label { text-align: center; margin: 24px 0 0; }
.formula.affirmation { margin-top: 4px; }
.pp-section li { margin-bottom: 10px; }
.fragment { position: relative; margin: 24px 4px 8px; padding: 28px 22px 10px; background: var(--paper-deep);
border-radius: 12px; transform: rotate(-0.6deg); }
.fragment .tape { position: absolute; top: -12px; left: 50%; width: 120px; margin-left: -60px; }
.pay { margin-top: 24px; padding: 28px 0 0; border-top: 1px solid var(--line); text-align: center; }
.btn-pay { padding: 12px 20px; line-height: 1.3; } /* длинная надпись переносится на телефоне */
.pay-under { font-family: var(--font-hand); font-size: var(--hand); line-height: var(--hand-lh); margin: 14px 0 10px; }
.pay-fine p { margin: 0; }
/* ---------- Цена, счётчик и кнопка (дизайн-система, «Счётчик цены») ---------- */
.price-block { margin: 0 0 20px; }
.price-block p { margin: 0 0 8px; }
.pb-label { font-family: var(--font-hand); font-weight: 600; font-size: var(--hand); line-height: var(--hand-lh); }
.pb-label strong { font-weight: 600; }
.pb-price { font-weight: 600; }
.pb-price strong { font-size: 1.25em; }
.pb-note, .pb-next { font-size: var(--small); line-height: var(--small-lh); color: var(--ink-soft); }
.pb-next { margin-top: 4px; }
/* 30 одинаковых клеток в один ряд; на узком экране два ряда по 15 */
.price-scale { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; max-width: 520px; margin: 10px auto 12px; }
@media (max-width: 599px) { .price-scale { grid-template-columns: repeat(15, 1fr); gap: 4px; max-width: 330px; } }
.price-scale .cell { aspect-ratio: 1 / 1; border: 1px solid var(--ink-soft); border-radius: 3px; background: var(--paper); }
.price-scale .cell.sold { background: var(--terracotta); border-color: var(--terracotta); }
/* Плашка на экране результата: узкая, на всю ширину, остаётся при прокрутке, только текст */
.price-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
height: 40px; margin: -32px -16px 24px; background: var(--paper-deep); border-bottom: 1px solid var(--line);
color: var(--ink); font-weight: 600; font-size: var(--small); text-decoration: none; }
@media (min-width: 900px) { .price-bar { margin: -64px -24px 32px; } }
.pp-sources { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.pp-sources h3 { font-size: var(--h3); line-height: var(--h3-lh); }
.pp-sources ol { padding-left: 20px; } .pp-sources li { margin-bottom: 6px; overflow-wrap: anywhere; }
.start-price { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--small);
line-height: var(--small-lh); color: var(--ink-soft); }
/* ---------- Кризисный экран: никакого декора (раздел 8) ---------- */
.crisis { background: none; }
.crisis .phones { list-style: none; padding: 0; margin: 0 0 16px; }
.crisis .phones li { margin: 0 0 12px; }
.crisis .phones a { font-weight: 600; font-size: 20px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.crisis p > em:only-child { font-style: normal; font-size: var(--small); line-height: var(--small-lh); color: var(--ink-soft); } /* пометка про Meta под ссылкой на Instagram */
.crisis p a { text-underline-offset: 4px; } /* подчёркивание ниже «_» в адресах Telegram и Instagram */
/* ---------- Стартовая и юридические страницы ---------- */
.lead { font-size: var(--body); }
.start-note { font-family: var(--font-hand); font-size: 22px; line-height: 28px; color: var(--ink-soft); margin-top: 12px; }
.legal h2 { font-size: var(--h2); } .legal h3 { margin-top: 32px; } .legal li { margin-bottom: 8px; }
/* ---------- Экран «Готово» и тестовый режим ---------- */
.ready-hint { margin-top: 16px; text-align: center; }
.test-mode { font-size: var(--small); line-height: var(--small-lh); color: var(--terracotta); text-align: center; margin: 0 0 12px; }
/* ---------- Поле почты, «Получить тетрадь снова», подвал ---------- */
.email-field { text-align: left; margin: 0 0 16px; }
.email-field label { display: block; font-weight: 600; margin: 0 0 6px; }
.text-input { width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--ink-soft); border-radius: 10px;
background: var(--paper); color: var(--ink); font: 400 var(--body)/1.2 var(--font-body); }
.text-input:focus { outline: 2px solid var(--sage-deep); outline-offset: 1px; }
.text-input[aria-invalid="true"] { border-color: var(--terracotta); }
.field-error { color: var(--terracotta); font-size: var(--small); line-height: var(--small-lh); margin: 6px 0 0; }
.email-field .small { margin: 6px 0 0; }
.pay-legal { margin-top: 10px; }
.ready-copy { margin-top: 20px; text-align: center; }
.again-form { display: grid; gap: 12px; margin-top: 8px; }
.site-foot { max-width: var(--col); margin: 0 auto; padding: 24px 16px 40px; border-top: 1px solid var(--line);
font-size: var(--small); line-height: var(--small-lh); color: var(--ink-soft); }
.site-foot a { color: var(--ink-soft); }
.letters-box { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: var(--small);
line-height: var(--small-lh); cursor: pointer; }
.letters-box input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--sage-deep); }
/* Анкета: вступление к главе и подписи под ползунками (ответы 12) */
.q-intro { color: var(--ink-soft); margin: 0 0 16px; }
.q-caption { font-size: var(--small); line-height: var(--small-lh); color: var(--ink-soft); margin: 8px 0 20px; }
/* ---------- Страницы автора: «Практика Шодхан» и «Консультация» (тексты из docs/, app/info_pages.py) ---------- */
.info-section { padding: 28px 0 8px; border-top: 1px solid var(--line); }
.info-section h2 { padding-bottom: 12px;
background: url("data:image/svg+xml;utf8,") no-repeat left bottom / 96px 8px; }
.info-hero { padding-bottom: 32px; }
.info-hero::after, .info-section::after { content: ""; display: block; clear: both; }
.info-meta { font-family: var(--font-hand); font-weight: 600; font-size: var(--hand); line-height: var(--hand-lh); color: var(--terracotta); }
.info-cta { margin: 20px 0; }
.info-cta .btn { padding: 12px 24px; line-height: 1.3; }
.info-note { margin-top: -4px; }
.info-contacts { font-weight: 600; }
/* Ники Telegram и Instagram: полужирный без подчёркивания, чтобы «_» в адресе был виден */
a.handle { font-weight: 600; text-decoration: none; color: var(--sage-deep); }
a.handle:hover { text-decoration: none; color: var(--terracotta); }
.info .phones { list-style: none; padding: 0; margin: 0 0 16px; }
.info .phones li { margin: 0 0 10px; }
.info .phones a { font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
/* Фото-наклейки: кайма, тень и наклон запечены в файл (scripts/process_photos.py) — без CSS-поворота */
.info-photo { margin: 8px auto 24px; max-width: 420px; }
.info-photo img { display: block; width: 100%; height: auto; }
/* Первый экран: на телефоне фото маленькое, справа на уровне логотипа, чтобы кнопка была видна сразу */
.info-photo.hero { float: right; width: 84px; margin: -66px -8px 4px 10px; }
/* Шодхан: на первом экране места больше — фото на телефоне крупнее, под логотипом */
.info-photo.hero.photo-shodhan-foto { width: 140px; margin: -4px -6px 8px 12px; }
@media (min-width: 600px) { .info-photo.hero, .info-photo.hero.photo-shodhan-foto { width: 170px; margin: -40px -12px 12px 24px; } }
@media (min-width: 900px) {
.info-photo.hero, .info-photo.hero.photo-shodhan-foto { width: 240px; margin: -12px -24px 16px 28px; }
.info-section .info-photo:not(.hero) { float: right; width: 260px; margin: 4px -24px 16px 28px; }
}
/* ---------- Оплата переводом: страница заказа и подтверждение оплаты автором ---------- */
.transfer { list-style: none; padding: 16px 18px; margin: 0 0 20px; background: var(--paper-deep); border: 1px solid var(--line);
border-radius: 14px; }
.transfer li { margin: 0 0 6px; overflow-wrap: anywhere; }
.transfer li:last-child { margin-bottom: 0; }
.admin-actions { display: grid; gap: 12px; margin-top: 24px; }
/* Карточки форматов на странице «Сопровождение и коучинг»: рядом, на телефоне одна под другой */
.info-cards { display: grid; gap: 16px; margin: 8px 0 16px; }
@media (min-width: 700px) { .info-cards { grid-template-columns: 1fr 1fr; } }
.info-card { padding: 20px 18px 6px; background: var(--paper-deep); border: 1px solid var(--line); border-radius: 16px; }
.info-card h3 { margin: 0 0 4px; }
.info-price { font-family: var(--font-hand); font-weight: 600; font-size: var(--hand); line-height: var(--hand-lh);
color: var(--terracotta); margin: 0 0 12px; }
.info-card ul, .info-section > ul { padding-left: 20px; margin: 0 0 16px; }
.info-card li { margin: 0 0 10px; }
/* ---------- Страницы автора: оформление разделов (05.11.2026) ---------- */
/* Один иллюстрированный стикер на страницу — у заголовка раздела (дизайн-система, принцип «Один акцент») */
.info-section h2 { position: relative; padding-right: 72px; }
.info-sticker { position: absolute; right: 0; top: -10px; width: 60px; height: 60px; }
/* Шаги — дорожкой с номерами в кружках */
.info-steps { counter-reset: step; }
.info-steps p:has(> strong:first-child) { position: relative; padding-left: 52px; margin-bottom: 20px; }
.info-steps p:has(> strong:first-child)::before {
counter-increment: step; content: counter(step); position: absolute; left: 0; top: -2px;
width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--sage-deep); background: var(--paper);
color: var(--sage-deep); font: 600 16px/31px var(--font-body); text-align: center; }
.info-steps p:has(> strong:first-child):not(:last-of-type)::after {
content: ""; position: absolute; left: 17px; top: 36px; bottom: -18px; border-left: 1.5px dashed var(--sage); }
.info-steps p:has(> strong:first-child) strong { display: block; font-family: var(--font-head); font-size: var(--h3); }
/* Пункты с полужирным началом — карточками два на два */
.info-cards-sec, .info-section.info-cards { display: grid; gap: 12px; }
@media (min-width: 700px) { .info-section.info-cards { grid-template-columns: 1fr 1fr; } }
.info-section.info-cards > h2, .info-section.info-cards > p:not(:has(> strong:first-child)) { grid-column: 1 / -1; }
.info-section.info-cards > p:has(> strong:first-child) { margin: 0; padding: 16px 16px 14px; background: var(--paper-deep);
border: 1px solid var(--line); border-radius: 14px; }
.info-section.info-cards > p:has(> strong:first-child) strong { display: block; font-family: var(--font-head); font-size: var(--h3);
margin-bottom: 4px; color: var(--sage-deep); }
/* Образование и сертификаты — лента миниатюр, листается вбок */
.certs { clear: both; margin: 24px 0 8px; }
.certs h3 { margin-bottom: 12px; }
.certs-list { list-style: none; padding: 0 0 12px; margin: 0 -16px; display: flex; gap: 14px; overflow-x: auto;
scroll-snap-type: x mandatory; padding-left: 16px; padding-right: 16px; -webkit-overflow-scrolling: touch; }
.certs-list li { flex: 0 0 200px; scroll-snap-align: start; font-size: var(--small); line-height: var(--small-lh); color: var(--ink-soft); }
.certs-list a { display: block; margin-bottom: 8px; background: #fff; padding: 6px; border-radius: 4px;
box-shadow: 0 2px 8px rgba(46, 42, 39, .14); }
.certs-list img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .certs-list { margin: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; }
.certs-list li { flex-basis: calc((100% - 28px) / 3); } }
/* Отзывы — карточками с рукописной кавычкой */
.reviews { display: grid; gap: 14px; }
@media (min-width: 700px) { .reviews { grid-template-columns: 1fr 1fr; } }
.reviews blockquote { position: relative; margin: 0; padding: 40px 18px 16px; background: var(--paper-deep); border-radius: 14px;
border: 1px solid var(--line); }
/* Значок «отправленное письмо» (решение автора 05.11.2026): конверт с линиями движения */
.reviews blockquote::before { content: ""; position: absolute; left: 16px; top: 12px; width: 36px; height: 27px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain; }
/* Закреплённая кнопка записи внизу экрана — только на телефоне */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: rgba(246, 240, 230, .96); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(46, 42, 39, .08); }
.sticky-cta[hidden] { display: none; }
@media (min-width: 900px) { .sticky-cta { display: none !important; } }
/* ---------- Главная: все блоки (docs/karta_zhizni_glavnaya_stranica.md, 05.11.2026) ---------- */
.home-hero { display: grid; gap: 8px; }
.fan { position: relative; padding-top: 206px; margin: 8px 0 0; } /* подпись — под портретами, не поверх */
.fan img { position: absolute; top: 0; width: 160px; height: auto; }
.fan .fan-1 { left: 2%; top: 26px; z-index: 1; }
.fan .fan-2 { left: 50%; margin-left: -80px; z-index: 2; }
.fan .fan-3 { right: 2%; top: 26px; z-index: 1; }
.fan figcaption { text-align: center; color: var(--terracotta); }
@media (min-width: 900px) {
main.home { max-width: 1040px; }
.home-hero { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 32px; }
.fan { padding-top: 300px; }
.fan img { width: 230px; }
.fan .fan-2 { margin-left: -115px; }
}
main.home > section, main.home > .start-price { max-width: var(--col); margin-left: auto; margin-right: auto; }
main.home > .home-hero { max-width: none; }
.home-sec { padding: 32px 0 8px; border-top: 1px solid var(--line); }
.home-sec h2 { position: relative; padding: 0 72px 12px 0;
background: url("data:image/svg+xml;utf8,") no-repeat left bottom / 96px 8px; }
.home-after { font-family: var(--font-hand); font-size: var(--hand); line-height: var(--hand-lh); color: var(--ink-soft); }
.checks { list-style: none; padding: 0; margin: 0 0 16px; }
.checks li { position: relative; padding-left: 32px; margin: 0 0 12px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain; }
.home-steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 24px; }
.home-steps li { counter-increment: step; position: relative; padding-left: 52px; margin-bottom: 20px; }
.home-steps li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%;
border: 1.5px solid var(--sage-deep); color: var(--sage-deep); background: var(--paper); font: 600 16px/31px var(--font-body); text-align: center; }
.home-steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 36px; bottom: -18px; border-left: 1.5px dashed var(--sage); }
.home-steps strong { display: block; font-family: var(--font-head); font-size: var(--h3); }
/* Галерея портретов: на телефоне листается вбок */
.gallery { list-style: none; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px 16px;
padding: 4px 16px 12px; -webkit-overflow-scrolling: touch; }
.gallery li { flex: 0 0 72%; max-width: 260px; scroll-snap-align: center; background: var(--paper-deep); border: 1px solid var(--line);
border-radius: 16px; padding: 12px 14px 4px; text-align: center; }
.gallery img { display: block; width: 100%; height: auto; }
.gallery h3 { font-size: 18px; line-height: 24px; margin: 6px 0 2px; }
.gallery .hand { font-size: 21px; line-height: 25px; color: var(--sage-deep); }
@media (min-width: 900px) { .gallery { flex-wrap: wrap; overflow: visible; margin: 0 0 16px; padding: 4px 0 0; }
.gallery li { flex: 0 0 calc((100% - 56px) / 5); max-width: none; } }
main.home > .home-wide { max-width: none; }
main.home > .home-wide > h2, main.home > .home-wide > .home-after { max-width: var(--col); margin-left: auto; margin-right: auto; }
.home-plan { background: var(--paper-deep); border: 1px solid var(--line); border-radius: 16px; padding: 24px 18px 8px; margin: 32px 0 0; }
.home-author-photo { float: right; width: 40%; max-width: 220px; margin: 0 -6px 8px 14px; }
.home-author::after { content: ""; display: block; clear: both; }
.faq { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { font-weight: 600; cursor: pointer; list-style: none; position: relative; padding-right: 28px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font: 500 24px/1 var(--font-body); color: var(--terracotta); }
.faq[open] summary::after { content: "–"; }
.faq p { margin: 10px 0 4px; }
.home-final { text-align: center; padding: 40px 18px 32px; margin-top: 32px; background: var(--paper-deep); border-radius: 16px;
border: 1px solid var(--line); }
/* Подвал: ссылки на все разделы сайта */
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; }
.foot-nav a { color: var(--ink); font-weight: 600; text-decoration: none; }
.foot-nav a:hover { color: var(--terracotta); }
@media (max-width: 899px) { main.info ~ .site-foot { padding-bottom: 96px; } } /* закреплённая кнопка не закрывает подвал */
/* Промокод под полем почты */
.promo { text-align: left; margin: 0 0 16px; }
.promo summary { cursor: pointer; color: var(--sage-deep); font-size: var(--small); font-weight: 600; }
.promo label { display: block; font-weight: 600; margin: 10px 0 6px; }
.start-price p { margin: 0; }
.start-tagline { font-family: var(--font-hand); font-weight: 600; font-size: var(--hand); line-height: var(--hand-lh);
color: var(--terracotta); margin-bottom: 6px !important; }
/* ---------- Лестница форматов (docs/karta_zhizni_formaty.md) ---------- */
.formats { padding: 32px 0 8px; border-top: 1px solid var(--line); clear: both; }
main.home > .formats { max-width: var(--col); margin-left: auto; margin-right: auto; }
.formats h2 { padding-bottom: 12px;
background: url("data:image/svg+xml;utf8,") no-repeat left bottom / 96px 8px; }
.fmt-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
@media (min-width: 700px) { .fmt-list { grid-template-columns: 1fr 1fr; } }
.fmt a { display: grid; gap: 2px; height: 100%; padding: 14px 16px; background: var(--paper-deep); border: 1px solid var(--line);
border-radius: 14px; color: var(--ink); text-decoration: none; }
.fmt a:hover { border-color: var(--sage); }
.fmt-title { font-family: var(--font-head); font-weight: 600; font-size: var(--h3); line-height: var(--h3-lh); }
.fmt-text { font-size: var(--small); line-height: var(--small-lh); color: var(--ink-soft); }
.fmt-price { font-family: var(--font-hand); font-weight: 600; font-size: var(--hand); line-height: var(--hand-lh); color: var(--terracotta); }
.fmt-price s { color: var(--ink-soft); font-weight: 500; margin-right: 4px; }
.fmt-price strong { font-weight: 600; }
.fmt-current a { border: 1.5px solid var(--sage-deep); background: #F1F3EC; }
.offer { margin-top: 32px; }
.offer-timer { text-align: center; margin: 4px 0 16px; }
.offer-timer .hand { display: block; color: var(--ink-soft); }
.countdown { font: 600 28px/1.2 var(--font-body); letter-spacing: .04em; color: var(--terracotta); }
/* Картинки страниц тетради */
.tetrad-preview { margin: 16px 0 24px; }
.tetrad-preview ul { list-style: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px;
padding: 4px 16px 12px; -webkit-overflow-scrolling: touch; }
.tetrad-preview li { flex: 0 0 auto; scroll-snap-align: center; }
.tetrad-preview img { display: block; height: 300px; width: auto; border-radius: 4px; box-shadow: 0 3px 12px rgba(46, 42, 39, .16); }
@media (min-width: 900px) { .tetrad-preview ul { margin: 0; padding: 4px 0 12px; } .tetrad-preview img { height: 260px; } }
.tetrad-preview figcaption { text-align: center; color: var(--ink-soft); }