/* Оформление квиза. Раскладка — как у разобранных конкурентов; цвета — переменные в :root,
   сняты с обложек роликов (kviz/oformlenie/tsveta_s_oblozhek.py). Шрифт — Lora, OFL. */
@font-face { font-family: "Lora"; src: url("shrift/lora.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("shrift/lora-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  --fon: #e8dbcc;
  --fon-kartochki: #f4ede6;
  --tekst: #0b0708;
  --tekst-myagkiy: #635c56;
  --aktsent: #7f512f;
  --ramka: #cdc2b4;
  --shrift-zagolovkov: "Lora", Georgia, "Times New Roman", serif;
  --shrift-teksta: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
/* Фон задан и на html: во встроенном браузере Instagram страница «оттягивается» вниз,
   и за её краем был виден белый лист (в тёмной теме телефона — чёрный). */
html { background: var(--fon); color-scheme: light; }
html, body { margin: 0; }
/* Колонка во всю высоту экрана: подвал стоит внизу даже на коротких экранах
   (раньше на экране отказа он поднимался под текст). */
body { min-height: 100svh; display: flex; flex-direction: column; background: var(--fon); color: var(--tekst); font-family: var(--shrift-teksta); font-size: 17px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }

.shapka { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--ramka); background: var(--fon-kartochki); }
/* Имя не переносится: на узком экране аватарка съедала ширину и «Дарья Аверина» вставала в две строки. */
@media (max-width: 400px) { .shapka__imya { font-size: 18px; } .shapka__chitateli { font-size: 10px; letter-spacing: .08em; } .shapka__avatar { width: 38px; height: 38px; } }
.shapka__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--ramka); }
.shapka__imya { font-family: var(--shrift-zagolovkov); font-size: 20px; margin-right: auto; white-space: nowrap; }
.shapka__chitateli { flex: none; max-width: 40%; text-align: right; font-size: 11px; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; color: var(--aktsent); }

.progress { max-width: 520px; margin: 0 auto; padding: 12px 20px 0; }
.progress__polosa { height: 4px; background: var(--ramka); border-radius: 2px; overflow: hidden; }
.progress__zalivka { height: 100%; width: 0; background: var(--aktsent); transition: width .3s ease; }
.progress__tekst { display: block; margin-top: 6px; font-size: 12px; color: var(--tekst-myagkiy); }

.ekran { width: 100%; max-width: 520px; margin: 0 auto; padding: 24px 20px 40px; flex: 1 0 auto; }
.nadpis { text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--aktsent); margin: 0 0 12px; }
.zagolovok { font-family: var(--shrift-zagolovkov); font-weight: 400; font-size: 28px; line-height: 1.25; text-align: center; margin: 0 0 20px; }
.zagolovok em { color: var(--aktsent); }
.kartochka { background: var(--fon-kartochki); border: 1px solid var(--ramka); border-radius: 16px; padding: 16px 18px; margin: 0 0 16px; }
.galochki { list-style: none; margin: 0; padding: 0; }
.galochki li { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0; color: var(--tekst-myagkiy); font-size: 15px; }
.galochki li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ramka); color: var(--tekst); font-size: 12px; display: grid; place-items: center; }
.razdelitel { border: 0; border-top: 1px solid var(--ramka); margin: 24px 0; }

.vopros { font-family: var(--shrift-zagolovkov); font-weight: 400; font-size: 22px; line-height: 1.3; text-align: center; margin: 0 0 18px; }
.otvety { display: grid; gap: 10px; }
.otvet { width: 100%; padding: 16px 18px; border: 1px solid var(--ramka); border-radius: 14px; background: var(--fon-kartochki); color: var(--tekst); font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.otvet:active, .otvet.vybran { border-color: var(--aktsent); background: var(--fon); }

.knopka { display: block; width: 100%; margin: 12px 0 0; padding: 16px; border: 0; border-radius: 14px; background: var(--aktsent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.knopka--tihaya { background: transparent; color: var(--tekst-myagkiy); font-weight: 400; text-decoration: underline; }
/* .knopka написан под <button>; на ссылке нужны выравнивание и снятое подчёркивание */
a.knopka { text-align: center; text-decoration: none; }
/* Класс идёт вместе с .melko, оттуда цвет, размер и отступ; здесь — только строка целиком */
.ssylka-dollary { display: block; }

.loader { text-align: center; padding-top: 40px; }
.loader__punkty { list-style: none; padding: 0; margin: 20px auto 0; max-width: 320px; text-align: left; }
.loader__punkty li { opacity: .35; margin: 10px 0; transition: opacity .3s; }
.loader__punkty li.gotov { opacity: 1; }
.loader__punkty li.gotov::before { content: "✓ "; color: var(--aktsent); }
.migaet { animation: migat 1.2s ease-in-out infinite; }
@keyframes migat { 50% { opacity: .35; } }
.insayt { font-family: var(--shrift-zagolovkov); font-size: 21px; line-height: 1.4; text-align: center; margin: 0; }

.forma { display: grid; gap: 12px; margin: 16px 0 0; }
.pole { width: 100%; padding: 16px; border: 1px solid var(--ramka); border-radius: 14px; background: #fff; color: var(--tekst); font: inherit; }
.pole:focus { outline: 2px solid var(--aktsent); outline-offset: 1px; }
.oshibka { color: #a33; font-size: 14px; margin: 0; }
.melko { font-size: 13px; color: var(--tekst-myagkiy); text-align: center; margin: 8px 0 0; }
/* «Назад» — тихая кнопка над вопросом: заметная, когда ищешь, и не спорящая с ответами. */
.nazad { display: inline-block; width: auto; margin: 0 0 10px; padding: 6px 10px 6px 0; border: 0; background: none; color: var(--tekst-myagkiy); font: inherit; font-size: 14px; cursor: pointer; }

.rezultat__nazvanie { font-family: var(--shrift-zagolovkov); font-weight: 400; font-size: 30px; line-height: 1.2; text-align: center; margin: 0 0 14px; }
.rezultat__abzac { margin: 0 0 20px; }
.kartochka__zagolovok { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--aktsent); margin: 0 0 6px; }
.kartochka__tekst { margin: 0; }
.kartinka { display: block; width: 100%; border-radius: 16px; margin: 8px 0 4px; border: 1px solid var(--ramka); }

/* Внизу, а не вверху: сверху плашка накрывала счётчик читательниц в шапке. */
.chernovik { position: fixed; bottom: 8px; right: 8px; padding: 4px 8px; border-radius: 6px; background: #c33; color: #fff; font-size: 12px; z-index: 10; }
.podval { flex: none; text-align: center; font-size: 12px; color: var(--tekst-myagkiy); padding: 20px calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left)); }
/* Ссылки — акцентным цветом, а не синим по умолчанию: синий выбивается из палитры. */
a { color: var(--aktsent); }
.soglasie { margin-top: 4px; }

/* Экран книги. Единственный длинный экран квиза: женщина решает, платить ли,
   и решает это прокруткой сверху вниз — как на разобранных страницах конкурентов. */
.kniga__oblozhka { display: block; width: 62%; max-width: 230px; margin: 4px auto 18px; filter: drop-shadow(0 10px 22px rgba(11, 7, 8, .22)); }
.kniga__nazvanie { font-family: var(--shrift-zagolovkov); font-weight: 400; font-size: 30px; line-height: 1.2; text-align: center; margin: 0 0 8px; }
.kniga__podzagolovok { text-align: center; color: var(--tekst-myagkiy); font-size: 15px; margin: 0 0 20px; }
.kniga__mostik { font-family: var(--shrift-zagolovkov); font-size: 19px; line-height: 1.4; margin: 0 0 24px; }
.kniga__zagolovok { font-family: var(--shrift-zagolovkov); font-weight: 400; font-size: 21px; margin: 0 0 12px; }
.kniga__spisok { list-style: none; margin: 0; padding: 0; }
.kniga__spisok li { position: relative; padding-left: 18px; margin: 0 0 12px; }
.kniga__spisok li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--aktsent); }
.kniga__spisok--net li::before { width: 10px; height: 2px; border-radius: 0; top: 11px; }

.kniga__glavy { list-style: none; margin: 0; padding: 0; }
.kniga__glava { display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; padding: 12px 0; border-bottom: 1px solid var(--ramka); }
.kniga__glava:last-child { border-bottom: 0; }
.kniga__nomer { grid-row: span 2; font-family: var(--shrift-zagolovkov); font-size: 18px; color: var(--aktsent); }
.kniga__imya { font-weight: 600; }
.kniga__opisanie { color: var(--tekst-myagkiy); font-size: 14px; }
/* Вставка о безопасности идёт в книге без номера — и в оглавлении выделена так же. */
.kniga__glava--vstavka { background: var(--fon-kartochki); border-radius: 12px; padding: 12px 12px; margin: 4px 0; border-bottom: 0; }
.kniga__zadaniya { text-align: left; margin-top: 14px; }
.kniga__bezopasnost { margin: 16px 0 0; padding: 12px 14px; border-left: 3px solid var(--aktsent); background: var(--fon-kartochki); border-radius: 0 12px 12px 0; font-size: 15px; }

/* Секции экрана книги: соседние идут с разным фоном и своим воздухом — правка
   владельца 15.09. Фон растягиваем во всю ширину, компенсируя поля .ekran. */
.sekciya { margin: 0 -20px; padding: 30px 20px; }
.sekciya + .sekciya { margin-top: 0; }
.sekciya--svetlaya { background: var(--fon); }
.sekciya--tyomnaya { background: var(--fon-kartochki); border-top: 1px solid var(--ramka); border-bottom: 1px solid var(--ramka); }
.sekciya > * + * { margin-top: 14px; }
.sekciya .kniga__zagolovok { margin-bottom: 0; }
/* Карточки внутри тёмной полосы теряются — на ней они белее фона */
.sekciya--tyomnaya .kartochka, .sekciya--tyomnaya .otzyv { background: #fff; }

/* Отзывы: карточки-цитаты. Имя — подписью под текстом, как в бумажной книге отзывов. */
.otzyvy { display: grid; gap: 12px; }
.otzyv { margin: 0; padding: 14px 16px; background: var(--fon-kartochki); border: 1px solid var(--ramka); border-radius: 14px; }
.otzyv__tekst { margin: 0; font-size: 15px; line-height: 1.5; }
.otzyv__imya { margin-top: 10px; font-size: 13px; color: var(--aktsent); }

.kniga__pokupka-zagolovok { font-family: var(--shrift-zagolovkov); font-weight: 400; font-size: 20px; line-height: 1.3; text-align: center; margin: 0; }
.kniga__pokupka { text-align: center; }
.kniga__fakty { text-align: left; margin-bottom: 14px; }
.kniga__cena { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 0; }
.kniga__cena-staraya { color: var(--tekst-myagkiy); font-size: 18px; }
.kniga__cena-novaya { font-family: var(--shrift-zagolovkov); font-size: 34px; }
.kniga__cena-poyasnenie { margin-top: 2px; }
.kniga__vozvrat { margin: 12px 0 0; font-size: 15px; }

/* Прилипает к низу экрана, пока идёт прокрутка, и встаёт на место в конце. */
.polka { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px max(20px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-right)); background: var(--fon-kartochki); border-top: 1px solid var(--ramka); }
/* Цены на панели нет — решение владельца 14.09. Слева снятие возражения, справа
   кнопка, которая ведёт к блоку с оффером. */
.polka__nadpis { margin: 0; flex: 1; font-size: 14px; line-height: 1.25; color: var(--tekst-myagkiy); }
.polka__knopka { margin: 0; flex: none; width: auto; padding: 13px 18px; white-space: nowrap; }