/* Сторінка «Про Pivona» (/pro-pivona/) — розповідь для холодного трафіку.

   ⚠️ ЧОМУ ОКРЕМИЙ ФАЙЛ, а не додаток до style.css: головний style.css
   ПЕРЕЗБИРАЄТЬСЯ з мокапу quiz.html (див. MAP.md). Усе, дописане туди руками,
   зникне при наступній перезбірці квіза. Ця сторінка живе своїм життям, тож і
   стилі окремо — вантажаться лише на ній (functions.php).

   Токени беруться з теми (--bg, --ink, --cta…) — тут жодного нового кольору. */

/* ═══ РИТМ СТОРІНКИ ═══
   Секції чергують фон: пісок → білий → пісок. Це не декор, а навігація —
   на довгій сторінці межа блоку читається швидше за заголовок. */
.st { padding: 0 0 0; }
.st-sec { padding: 74px 0; }
.st-sec--paper { background: var(--surface); border-block: 1px solid var(--line); }
.st-in { max-width: 780px; margin: 0 auto; padding: 0 24px; }
.st-in--wide { max-width: 1040px; }

.st-h2 {
  font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 33px);
  line-height: 1.18; margin-bottom: 18px;
}
.st-lead { font-size: 17px; line-height: 1.62; }
.st p + p { margin-top: 15px; }
.st-sec p { max-width: 62ch; }

/* ═══ ГЕРОЙ ═══ */
.st-hero { padding: 60px 0 66px; }
.st-eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cocoa);
  background: var(--cocoa-soft); padding: 5px 11px; border-radius: var(--r-round);
  margin-bottom: 20px;
}
.st-h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5.6vw, 52px); line-height: 1.07;
  margin-bottom: 20px;
}
.st-hero .st-lead { font-size: clamp(17px, 2vw, 19px); color: var(--ink); max-width: 60ch; }

/* ═══ PIVI — ПРОВІДНИК ═══
   Маскот веде сторінку репліками між блоками. Свідомо дрібний і збоку:
   провідник, а не оповідач — історію розповідає Анастасія. */
.st-pivi {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 30px 0 0; padding: 15px 17px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.st-sec--paper .st-pivi { background: var(--bg); }
.st-pivi img { width: 46px; height: auto; flex: none; }
.st-pivi p { font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 2px 0 0; }
.st-pivi b { font-family: var(--font-display); font-weight: 400; }

/* ═══ СЦЕНА ДНЯ — таймлайн, а не список ═══
   Час зліва робить із переліку добу. Саме тривалість дня, а не кількість
   пунктів, дає впізнавання «це мій день». */
.st-day { margin-top: 26px; border-left: 2px solid var(--line); padding-left: 0; }
.st-day li { list-style: none; display: flex; gap: 18px; padding: 13px 0 13px 20px; position: relative; }
.st-day li::before {
  content: ''; position: absolute; left: -5px; top: 21px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rose); border: 2px solid var(--bg);
}
.st-sec--paper .st-day li::before { border-color: var(--surface); }
.st-day time {
  font-family: var(--font-display); font-size: 13px; color: var(--muted);
  flex: none; width: 52px; padding-top: 3px;
}
/* Рядок дня трохи більший за звичайний текст: він тут не пояснення, а сам зміст
   блоку — його читають, коли решту сканують. */
.st-day p { font-size: 16px; line-height: 1.45; margin: 0; }

/* Підсумок після таймлайну — одна фраза, яка мусить лишитись у голові.
   Розміром між текстом і заголовком: не абзац, але й не крик. */
.st-punch {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: clamp(17px, 2.2vw, 20px); line-height: 1.45;
  max-width: 46ch;
}

/* ═══ ЦИТАТА ЗАСНОВНИЦІ ═══ */
.st-quote {
  margin: 28px 0 0; padding: 22px 24px;
  background: var(--rose-soft); border-radius: var(--r-card);
  border-left: 3px solid var(--rose);
}
.st-quote p { font-size: 16.5px; line-height: 1.6; font-style: italic; margin: 0; }
.st-sign { display: flex; align-items: center; gap: 11px; margin-top: 22px; }
.st-sign span { font-size: 13.5px; color: var(--muted); }
.st-sign b { display: block; color: var(--ink); font-weight: 600; font-size: 14.5px; }

/* ═══ ПРИНЦИПИ ═══ */
.st-grid { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 760px) { .st-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.st-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 21px 20px;
}
.st-sec--paper .st-card { background: var(--bg); }
/* Об'єкт над підписом — той самий порядок, що в блоці «розпаковка» на головній
   (`.pstep img`). Ліворуч, а не по центру: заголовок і текст картки вирівняні
   ліворуч, і центрована іконка над ними читалась би як окремий елемент.
   height, не width: об'єкти набору мають різні пропорції (монети ширші, документ
   вищий) — фіксована ВИСОТА тримає їх однаковими на око, фіксована ширина ні. */
.st-ic { height: 38px; width: auto; display: block; margin-bottom: 11px; }
/* Оптична, а не математична рівність: у sparkle порожні кути, тож при однаковій
   висоті він читається дрібнішим за сусідів. Плюс 6px вирівнюють вагу на око. */
.st-ic--air { height: 44px; }

.st-card h3 { font-family: var(--font-display); font-size: 16.5px; line-height: 1.25; margin-bottom: 9px; }
.st-card p { font-size: 14.5px; line-height: 1.55; margin: 0; }

/* ═══ ДЛЯ КОГО / ДЛЯ КОГО НІ ═══
   Дві колонки поруч і однакового розміру: чесна дискваліфікація має важити
   стільки ж, скільки запрошення, інакше вона читається як кокетство. */
.st-fit { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 720px) { .st-fit { grid-template-columns: 1fr 1fr; } }
.st-fit-col { padding: 22px 21px; border-radius: var(--r-card); border: 1px solid var(--line); }
.st-fit-col--yes { background: var(--accent-soft); border-color: rgba(94,110,4,.22); }
.st-fit-col--no { background: var(--surface-2); }
.st-sec--paper .st-fit-col--no { background: var(--bg); }
.st-fit-col h3 { font-family: var(--font-display); font-size: 17px; margin-bottom: 13px; }
.st-fit-col li { list-style: none; font-size: 14.5px; line-height: 1.5; padding: 7px 0 7px 24px; position: relative; }
.st-fit-col li::before { position: absolute; left: 0; top: 6px; font-size: 14px; }
.st-fit-col--yes li::before { content: '✓'; color: var(--accent-ink); font-weight: 700; }
.st-fit-col--no li::before { content: '—'; color: var(--muted); }

/* ═══ ЦІНА ═══ */
.st-price {
  margin-top: 28px; padding: 28px 26px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
}
.st-sec--paper .st-price { background: var(--bg); }
.st-price-num { font-family: var(--font-display); font-size: clamp(32px, 5vw, 42px); line-height: 1; }
.st-price-num small { font-family: var(--font-sans); font-size: 15px; color: var(--muted); font-weight: 400; }
.st-price-note { font-size: 14.5px; color: var(--muted); margin-top: 11px; }
/* ⚠️ Не `max-width: 420px`, а ширина ПО ВМІСТУ.
   З фіксованими 420 px коробка центрувалась чесно, але пункти коротші за неї —
   і вся маса списку стояла лівіше числа. Формально центр, візуально перекіс:
   лінійка мовчала, око бачило. `fit-content` робить коробку рівно по найдовшому
   пункту, тож центрується те, що видно. Галочки при цьому лишаються в колонці —
   центрувати самі рядки не можна, бо ✓ поїдуть сходами. */
.st-price ul {
  width: fit-content; max-width: 100%;
  margin: 20px auto 0; text-align: left;
}
.st-price li { list-style: none; font-size: 14.5px; padding: 6px 0 6px 24px; position: relative; }
.st-price li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-ink); font-weight: 700; }

/* ═══ CTA ═══ */
.st-cta { text-align: center; }
.st-cta .st-h2 { margin-bottom: 14px; }

/* 🔴 ЧОМУ ЦЕ ПОТРІБНО (виміряно 16.08: зсув 88–132 px).
   Вище стоїть `.st-sec p { max-width: 62ch }` — обмеження міри рядка. Коробка
   абзацу від цього ВУЖЧА за контейнер, а блоковий елемент за замовчуванням
   притиснутий ліворуч. `text-align: center` центрує текст УСЕРЕДИНІ цієї вузької
   коробки — тобто візуально текст стоїть лівіше кнопки, хоч «центрування» ніби є.
   Лікується не вимиканням міри рядка, а центруванням самої коробки. */
.st-cta p, .st-price p { margin-inline: auto; }
.st-btn {
  display: inline-block; margin-top: 22px;
  background: var(--cta); color: var(--cta-fg);
  font-size: 16px; font-weight: 600; text-decoration: none;
  padding: 15px 34px; border-radius: var(--r-control);
  transition: transform .16s ease, box-shadow .16s ease;
}
.st-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
/* Кнопка в героєві — менша за фінальну: тут вона для тих, хто вже готовий,
   а не заклик. Головний CTA лишається в кінці, після доказів. */
.st-btn--sm { margin-top: 26px; font-size: 15px; padding: 13px 26px; }
.st-cta-sub { font-size: 13.5px; color: var(--muted); margin-top: 13px; }
.st-cta-alt { display: inline-block; margin-top: 18px; font-size: 14.5px; color: var(--rose-ink); }
/* Пара «демо / свої дані» — рівноправні опції в один рядок, на вузькому стають
   стовпчиком. Власний margin-top у .st-cta-alt тут гасимо, бо відступ дає сам ряд. */
.st-try-pair { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.st-try-pair .st-cta-alt { margin-top: 0; }

.st-mascot-big { width: 92px; height: auto; margin: 0 auto 18px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .st-btn { transition: none; }
  .st-btn:hover { transform: none; }
}