/* LEVITA Individual Plan - стили шаблона */

/* ====== Шрифты (локально, без обращения к Google Fonts CDN) ======
 * Файлы лежат в public/fonts/. Без сетевой зависимости PDF генерируется
 * быстрее и продолжит работать офлайн / при сбое fonts.googleapis.com.
 */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url('/fonts/cormorant-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: block;
  src: url('/fonts/cormorant-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url('/fonts/source-serif-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('/fonts/source-serif-italic.woff') format('woff');
}

/* ====== CSS-переменные (дизайн-токены) ====== */
:root {
  /* Брендовая палитра LEVITA (из brandbook.md) */
  --ink: #101a25;            /* Графит - тёмные карточки и заголовки */
  --gold: #eec95c;           /* Золото - основной акцент */
  --black: #000000;          /* Чёрный */
  --white: #ffffff;          /* Белый */

  /* Производные тона */
  --bg-page: #EAEFF4;        /* светло-голубой фон страницы (как в Figma) */
  --gold-soft: #f5db8d;      /* осветлённое золото для бейджей */
  --gold-deep: #c9a730;      /* углублённое золото для подчёркиваний на светлом */
  --text-primary: #101a25;   /* основной текст = графит */
  --text-muted: #4A5566;     /* приглушённый */
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #C5CCD9;
  --card-bg: #FFFFFF;
  --shadow-card: 0 1px 3px rgba(16, 26, 37, 0.06);

  --font-serif-display: 'Cormorant Garamond', 'EB Garamond', serif;
  --font-serif-body: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
}

/* ====== Базовый reset ====== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Принудительно печатать фоны, цвета и градиенты независимо от
     настройки «Фоновая графика» в диалоге печати Chrome/Safari. */
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  color-adjust: exact !important;
}
html, body { font-family: var(--font-serif-body); color: var(--text-primary); background: #C4CAD2; }
ul, ol { list-style: none; }

/* ====== Печать: A4, без полей ======
 * @page управляется Puppeteer через page.pdf({format:'A4', margin:0}) -
 * НЕ дублируем @page правило в CSS, иначе возникает конфликт и Chrome
 * разрезает страницу пополам. Размер физической бумаги задаём только из JS.
 */
/* ====== Страница A4 ======
 * Размер 210x286mm - такой же в превью и в PDF, чтобы то что админ
 * видит на сайте, совпадало с финальным файлом. ~11mm запас от 297mm
 * нужен потому что Puppeteer/Chrome при печати на A4 теряет до 10mm
 * на DPI-округления - без запаса PDF получает 18 страниц вместо 9.
 */
.page {
  width: 210mm;
  height: 290mm;
  background: var(--bg-page);
  position: relative;
  overflow: hidden;
  margin: 12px auto;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}

@media print {
  body { background: #fff; }
  .page {
    box-shadow: none;
    margin: 0;
    page-break-after: always;
    break-after: page;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .page:last-child {
    page-break-after: auto;
    break-after: auto;
  }
}

/* ====== Декор: золотая волна снизу страницы ====== */
.wave-bottom {
  /* Высота 22mm и нижний край заподлицо с .page - так визуальная волна
   * целиком ниже padding-bottom контента (22mm) и не накладывается
   * на последнюю строку «Что учитывать». */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 22mm;
  pointer-events: none;
}

.wave-top {
  position: absolute;
  left: 0;
  top: -2mm;
  width: 100%;
  height: 35mm;
  pointer-events: none;
}

/* Декор: тонкая золотая лента-завиток в правом верхнем углу */
.corner-flourish {
  position: absolute;
  top: 0;
  right: 0;
  width: 60mm;
  height: 60mm;
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}

/* Большая золотая лента-декор - S-образная кривая через всю страницу */
.big-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.big-ribbon path {
  filter: drop-shadow(0 2mm 3mm rgba(16, 26, 37, 0.18));
}

/* ====== Контент страницы ======
 * position:absolute + inset:0 - чтобы при переполнении контент НЕ растягивал
 * родителя (.page фиксированной высоты 286mm), а просто обрезался через
 * overflow:hidden. Без absolute Chrome вытесняет хвост на следующую
 * физическую страницу при печати.
 */
.page-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 10mm 18mm 28mm 18mm;
  /* overflow hidden гарантирует, что padding-bottom действительно остаётся
   * пустым - длинный контент обрезается по краю padding-области, а не
   * вылезает на нижнюю волну. */
  overflow: hidden;
}

/* Распределение блоков по странице (для шаблонных страниц с малым контентом) */
.page-content.distribute {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6mm;
}

/* ====== Шапка плана (h1) ====== */
.plan-title {
  font-family: var(--font-serif-display);
  font-weight: 500;
  font-size: 30pt;
  line-height: 1.1;
  text-align: center;
  color: var(--text-primary);
  margin-bottom: 4mm;
  padding-top: 2mm;
}

.plan-title .accent {
  font-style: italic;
  font-weight: 600;
  position: relative;
  display: inline-block;
}

.plan-title .accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1mm;
  height: 2px;
  background: var(--gold);
}

/* ====== Приветственный абзац ====== */
.greeting {
  font-size: 11pt;
  line-height: 1.45;
  margin-bottom: 3mm;
  color: var(--text-primary);
}

/* ====== Жёлтый бейдж "Все ваши цели достижимы:" ====== */
.achievable-badge {
  display: inline-block;
  background: var(--gold-soft);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 11pt;
  padding: 2mm 5mm;
  border-radius: 2mm;
  margin-bottom: 3mm;
}

.achievable-text {
  font-size: 11pt;
  line-height: 1.45;
  margin-bottom: 5mm;
}

/* ====== Заголовок секции (h2) - курсив с подчёркиванием ====== */
.section-heading {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 20pt;
  color: var(--text-primary);
  margin-bottom: 3mm;
  position: relative;
  display: inline-block;
}

.section-heading::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -1mm;
  height: 1.5px;
  background: var(--gold);
}

.section-heading.centered {
  display: block;
  text-align: center;
  font-size: 28pt;
  font-weight: 600;
  margin-bottom: 8mm;
}

.section-heading.centered::after {
  left: 38%;
  right: 38%;
  bottom: -2mm;
  height: 2px;
}

/* ====== Двойная карточка: Цели + Параметры ====== */
.dual-cards {
  display: flex;
  gap: 4mm;
  margin-bottom: 3mm;
}

.card-goals {
  flex: 1.3;
  background: var(--card-bg);
  border-left: 3px solid var(--gold);
  border-radius: 0 3mm 3mm 0;
  padding: 4mm 5mm 5mm 5mm;
  box-shadow: var(--shadow-card);
}

.card-goals .card-icon-row {
  display: flex;
  align-items: center;
  gap: 2mm;
  margin-bottom: 3mm;
}

.card-goals .card-icon {
  width: 5mm;
  height: 5mm;
  border: 1.5px solid var(--text-primary);
  border-radius: 1mm;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10pt;
}

.card-goals .card-icon::before {
  content: '✓';
  color: var(--gold);
  font-weight: bold;
  font-size: 10pt;
}

.card-goals .card-title {
  font-weight: 700;
  font-size: 12pt;
}

.goals-list {
  font-size: 10.5pt;
  line-height: 1.7;
}

.goals-list li {
  position: relative;
  padding-left: 6mm;
}

.goals-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.8mm;
  width: 2.6mm;
  height: 2.6mm;
  border: 1px solid var(--text-muted);
  border-radius: 0.5mm;
}

.card-params {
  flex: 1;
  background: var(--ink);
  color: var(--text-on-dark);
  border-radius: 2mm;
  padding: 4mm 5mm 5mm 5mm;
}

.card-params .card-icon-row {
  display: flex;
  align-items: center;
  gap: 2mm;
  margin-bottom: 4mm;
}

.card-params .card-icon-row::before {
  content: '📐';
  font-size: 11pt;
}

.card-params .card-title {
  font-weight: 700;
  font-size: 12pt;
}

.params-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm 6mm;
}

.params-grid .param-value {
  font-family: var(--font-serif-display);
  font-weight: 500;
  font-size: 18pt;
  line-height: 1;
  margin-bottom: 1mm;
}

.params-grid .param-label {
  font-style: italic;
  font-size: 9.5pt;
  color: var(--gold);
}

/* ====== Карточка "Важные вводные" ====== */
.card-essentials {
  background: var(--card-bg);
  border-left: 3px solid var(--gold);
  border-radius: 0 3mm 3mm 0;
  padding: 3mm 5mm 4mm 5mm;
  box-shadow: var(--shadow-card);
  margin-bottom: 5mm;
}

.card-essentials .card-title {
  font-weight: 700;
  font-size: 11pt;
  margin-bottom: 3mm;
}

.essentials-cols {
  columns: 2;
  column-gap: 10mm;
  font-size: 10pt;
  line-height: 1.6;
  margin-bottom: 2mm;
}

.essentials-cols li {
  position: relative;
  padding-left: 4mm;
  break-inside: avoid;
}

.essentials-cols li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2mm;
  width: 1.5mm;
  height: 1.5mm;
  background: var(--text-primary);
  border-radius: 50%;
}

.essentials-summary {
  font-size: 10pt;
  line-height: 1.45;
}

/* ====== "Что учитывать в тренировках" - timeline с кружочками ====== */
.subsection-heading {
  font-weight: 700;
  font-size: 11pt;
  margin-bottom: 3mm;
}

.timeline {
  position: relative;
  padding-left: 12mm;
}

.timeline-item {
  position: relative;
  margin-bottom: 3mm;
  font-size: 10pt;
  line-height: 1.45;
}

.timeline-item:last-child { margin-bottom: 0; }

.timeline-item::before {
  /* Кружок: центр на первой строке текста (top: 0.7em) и ровно
   * на воображаемой полосе (left: -6mm + translate-50%). */
  content: '';
  position: absolute;
  left: -6mm;
  top: 0.7em;
  transform: translate(-50%, -50%);
  width: 4mm;
  height: 4mm;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--bg-page);
  z-index: 1;
}

.timeline-item:not(:last-child)::after {
  /* Линия от центра текущего кружка до центра следующего: длина = высоте
   * текущего пункта + margin-bottom. У последнего пункта ::after
   * отсутствует - линия дальше не идёт. */
  content: '';
  position: absolute;
  left: -6mm;
  top: 0.7em;
  height: calc(100% + 3mm);
  width: 0.5px;
  background: var(--ink);
  transform: translateX(-50%);
}

/* ============================================================
   СТРАНИЦА 2: Стратегия + Недельный план
   ============================================================ */

/* Декор: золотая волна сверху страницы */
.wave-top svg path {
  /* placeholder - заполняется в HTML */
}

/* Стратегия */
.strategy-block {
  margin-bottom: 8mm;
}

.strategy-timeline {
  position: relative;
  padding-left: 8mm;
  margin-bottom: 10mm;
}

.strategy-timeline::before {
  content: '';
  position: absolute;
  left: 2mm;
  top: 2mm;
  bottom: 2mm;
  width: 0.5px;
  background: var(--ink);
}

.month-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 55mm;
  gap: 5mm;
  margin-bottom: 5mm;
  align-items: start;
}

.month-item:last-child { margin-bottom: 0; }

.month-item::before {
  content: '';
  position: absolute;
  left: -8mm;
  top: 2mm;
  width: 4mm;
  height: 4mm;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--bg-page);
}

.month-header {
  margin-bottom: 2mm;
}

.month-number {
  font-weight: 700;
  font-size: 11.5pt;
  color: var(--text-primary);
}

.month-subtitle {
  font-style: italic;
  font-size: 10pt;
  color: var(--text-muted);
}

.month-text {
  font-size: 10pt;
  line-height: 1.5;
}

.month-goal-card {
  background: var(--ink);
  color: var(--text-on-dark);
  padding: 4mm 5mm;
  border-radius: 2mm;
  font-size: 9.5pt;
  line-height: 1.4;
}

.month-goal-card .goal-label {
  color: var(--gold);
  font-weight: 700;
  display: block;
  margin-bottom: 1mm;
}

/* Жёлтая карточка для 3-го месяца (акцент на результат) */
.month-item.is-result .month-number {
  background: var(--gold-soft);
  padding: 1mm 3mm;
  border-radius: 1.5mm;
  display: inline-block;
}

.month-item.is-result .month-goal-card {
  background: var(--gold-soft);
  color: var(--text-primary);
}

.month-item.is-result .month-goal-card .goal-label {
  color: var(--text-primary);
}

/* Карточка недельного плана */
.card-weekly {
  background: var(--card-bg);
  border-left: 3px solid var(--gold);
  border-radius: 0 3mm 3mm 0;
  padding: 4mm 6mm 5mm 6mm;
  box-shadow: var(--shadow-card);
}

.card-weekly .card-heading {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18pt;
  text-align: center;
  margin-bottom: 4mm;
}

.weekly-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10pt;
}

.weekly-table th {
  font-family: var(--font-serif-display);
  font-style: normal;
  font-weight: 400;
  font-size: 10pt;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 2mm 3mm;
  color: var(--text-primary);
  border-bottom: 0.5px solid var(--text-muted);
}

.weekly-table th:nth-child(3) { text-align: right; }

.weekly-table td {
  padding: 3mm 3mm;
  font-size: 10pt;
  border-bottom: 0.5px solid #D8DDE5;
}

.weekly-table td:nth-child(3) { text-align: right; }

.weekly-table tr:last-child td { border-bottom: none; }

.weekly-table .day-cell {
  font-family: var(--font-serif-display);
  font-style: normal;
  text-transform: uppercase;
  font-size: 10pt;
  letter-spacing: 0.05em;
  padding-top: 4mm;
  border-bottom: none;
}

.weekly-table .day-separator td {
  padding: 0;
  border-bottom: 0.5px solid var(--text-muted);
}

/* ============================================================
   СТРАНИЦА 3: Почему эти направления + Продолжение + Онлайн + Лайфхаки
   ============================================================ */

/* 3 карточки направлений в ряд */
.directions-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4mm;
  margin-bottom: 7mm;
}

.direction-card {
  background: var(--ink);
  color: var(--text-on-dark);
  padding: 5mm 5mm;
  border-radius: 2mm;
  border-bottom: 3px solid var(--gold);
}

.direction-card .direction-name {
  color: var(--gold);
  font-weight: 700;
  font-size: 11pt;
  margin-bottom: 3mm;
}

.direction-card .direction-text {
  font-size: 9.5pt;
  line-height: 1.45;
}

/* Карточка "Продолжение после 3 месяцев" */
.card-continuation {
  background: var(--card-bg);
  border-left: 3px solid var(--gold);
  border-radius: 0 3mm 3mm 0;
  padding: 4mm 6mm 5mm 6mm;
  box-shadow: var(--shadow-card);
  margin-bottom: 6mm;
}

.card-continuation .card-heading {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18pt;
  text-align: center;
  margin-bottom: 4mm;
}

.continuation-list {
  font-size: 10pt;
  line-height: 1.5;
}

.continuation-list li {
  position: relative;
  padding-left: 5mm;
  margin-bottom: 2mm;
  break-inside: avoid;
}

.continuation-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2mm;
  width: 1.8mm;
  height: 1.8mm;
  background: var(--ink);
  border-radius: 50%;
}

/* Онлайн-тренировки */
.online-block {
  margin-bottom: 8mm;
  margin-top: 2mm;
}

.online-text {
  font-size: 10pt;
  line-height: 1.5;
  margin-top: 2mm;
  text-align: center;
  max-width: 150mm;
  margin-left: auto;
  margin-right: auto;
}

/* Лайфхаки */
.card-lifehacks {
  background: var(--card-bg);
  border-left: 3px solid var(--gold);
  border-radius: 0 3mm 3mm 0;
  padding: 4mm 6mm 5mm 6mm;
  box-shadow: var(--shadow-card);
  margin-bottom: 5mm;
}

.card-lifehacks .card-title {
  font-weight: 700;
  font-size: 11pt;
  margin-bottom: 3mm;
}

.card-lifehacks .card-title::before {
  content: '✎  ';
  color: var(--gold-deep);
}

.lifehacks-list {
  font-size: 10pt;
  line-height: 1.5;
}

.lifehacks-list li {
  position: relative;
  padding-left: 5mm;
  margin-bottom: 2mm;
  break-inside: avoid;
}

.lifehacks-list li::before {
  content: '○';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink);
  font-size: 10pt;
}

/* Цитата для вас */
.quote-block {
  font-style: italic;
  font-size: 10pt;
  color: var(--text-muted);
  margin-top: 3mm;
}

.quote-block .quote-label {
  font-weight: 700;
  font-style: italic;
  color: var(--text-primary);
}

/* ============================================================
   СТРАНИЦА 4: Контрольная точка + Финальный призыв (ШАБЛОННАЯ)
   ============================================================ */

.checkpoint-page .page-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
}

.checkpoint-intro {
  font-size: 11pt;
  line-height: 1.5;
  max-width: 140mm;
  margin: 0 auto 5mm auto;
  text-align: justify;
}

.gold-divider {
  width: 100mm;
  height: 1.5px;
  background: var(--gold);
  margin: 0 auto 10mm auto;
}

.checkpoint-tagline {
  font-weight: 700;
  font-size: 14pt;
  margin-bottom: 10mm;
}

.checkpoint-trainers {
  font-weight: 700;
  font-size: 12pt;
  line-height: 1.45;
  max-width: 130mm;
  margin: 0 auto 12mm auto;
}

.final-call {
  font-size: 12pt;
  line-height: 1.5;
  margin-bottom: 10mm;
}

/* Декор: золотая лента-сердце снизу */
.heart-ribbon {
  position: absolute;
  bottom: 0;
  right: -10mm;
  width: 130mm;
  height: 100mm;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   СТРАНИЦА 5: О сети LEVITA (ШАБЛОННАЯ, без переменных студии)
   ============================================================ */

/* ====== Стр 5: О сети LEVITA - переделана ====== */

.network-tagline {
  font-family: var(--font-serif-body);
  font-style: italic;
  font-size: 12pt;
  line-height: 1.5;
  text-align: center;
  margin: 0;
  max-width: 140mm;
  align-self: center;
  color: var(--text-muted);
}

.network-tagline strong {
  color: var(--text-primary);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.04em;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3mm;
  width: 100%;
  margin: 0;
}

.stat-card {
  background: var(--ink);
  color: var(--text-on-dark);
  padding: 6mm 2mm;
  border-radius: 2mm;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 38mm;
}

.stat-card .stat-value {
  font-family: var(--font-serif-display);
  font-weight: 600;
  font-size: 28pt;
  line-height: 1;
  color: var(--white);
  margin-bottom: 3mm;
}

.stat-card .stat-label {
  font-size: 9pt;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.brand-meaning {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5mm;
  width: 100%;
}

.meaning-card {
  background: var(--card-bg);
  padding: 5mm 6mm;
  border-radius: 0 2mm 2mm 0;
  box-shadow: var(--shadow-card);
  border-left: 3px solid var(--gold);
}

.meaning-card .meaning-title {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 600;
  font-size: 13pt;
  margin-bottom: 2mm;
  color: var(--text-primary);
}

.meaning-card .meaning-text {
  font-size: 10pt;
  line-height: 1.5;
  color: var(--text-primary);
}

.meaning-card .meaning-text em {
  color: var(--gold-deep);
  font-style: normal;
  font-weight: 600;
}

.center-quote {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 14pt;
  line-height: 1.4;
  text-align: center;
  max-width: 150mm;
  align-self: center;
  padding: 4mm 0;
  color: var(--text-primary);
  text-wrap: balance;
}

.center-quote::before,
.center-quote::after {
  content: '';
  display: block;
  width: 35mm;
  height: 1.5px;
  background: var(--gold);
  margin: 0 auto;
}

.center-quote::before { margin-bottom: 4mm; }
.center-quote::after { margin-top: 4mm; }

.center-quote strong {
  color: var(--gold-deep);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.04em;
}

.life-with {
  width: 100%;
  margin: 0;
}

.life-with .life-heading {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 600;
  font-size: 18pt;
  text-align: center;
  margin-bottom: 4mm;
  color: var(--text-primary);
  position: relative;
}

.life-with .life-heading::after {
  content: '';
  display: block;
  width: 30mm;
  height: 1.5px;
  background: var(--gold);
  margin: 1.5mm auto 0;
}

.life-list {
  columns: 2;
  column-gap: 12mm;
  font-size: 10pt;
  line-height: 1.55;
  list-style: none;
  padding: 0;
}

.life-list li {
  position: relative;
  padding-left: 6mm;
  margin-bottom: 2mm;
  break-inside: avoid;
}

.life-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold-deep);
  font-weight: 700;
  font-size: 11pt;
}

/* ============================================================
   СТРАНИЦА 6: LELEA Благотворительный фонд (ШАБЛОННАЯ)
   ============================================================ */

.lelea-page {
  background: #EAEFF4;
}

.lelea-decor-ribbon {
  position: absolute;
  top: -8mm;
  left: -25mm;
  width: 70mm;
  height: auto;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
}

.lelea-decor-flower {
  position: absolute;
  bottom: 4mm;
  right: 4mm;
  width: 32mm;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.lelea-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8mm;
  margin: 0;
  position: relative;
  z-index: 2;
}

.lelea-logo {
  height: 17mm;
  width: auto;
}

.lelea-header .section-heading {
  font-size: 24pt;
  margin-bottom: 0;
  font-weight: 500;
}

.lelea-header .section-heading::after {
  bottom: -2mm;
  height: 2px;
}

.lelea-tagline {
  font-family: var(--font-serif-body);
  font-style: italic;
  font-size: 11pt;
  line-height: 1.5;
  text-align: center;
  margin: 0;
  max-width: 145mm;
  align-self: center;
  color: var(--text-muted);
  position: relative;
  z-index: 2;
}

.lelea-tagline strong {
  color: var(--text-primary);
  font-weight: 700;
  font-style: normal;
}

/* Центральная цитата (миссия фонда) с золотыми полосами */
.lelea-mission {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 14pt;
  line-height: 1.4;
  text-align: center;
  max-width: 150mm;
  align-self: center;
  padding: 4mm 0;
  color: var(--text-primary);
  text-wrap: balance;
  position: relative;
  z-index: 2;
}

.lelea-mission::before,
.lelea-mission::after {
  content: '';
  display: block;
  width: 35mm;
  height: 1.5px;
  background: #8AB3D9;
  margin: 0 auto;
}

.lelea-mission::before { margin-bottom: 4mm; }
.lelea-mission::after { margin-top: 4mm; }

.lelea-mission strong {
  color: #4A7AAC;
  font-weight: 700;
  font-style: normal;
}

/* Главный блок: голубая карточка с буллетами + фото справа */
.lelea-help-block {
  background: #8AB3D9;
  border-radius: 3mm;
  padding: 6mm 6mm 6mm 8mm;
  display: grid;
  grid-template-columns: 1fr 60mm;
  gap: 6mm;
  align-items: center;
  margin: 0;
  position: relative;
  z-index: 2;
  width: 100%;
}

.lelea-help-block .help-content {
  color: var(--text-on-dark);
}

.lelea-help-block .help-title {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 600;
  font-size: 16pt;
  margin-bottom: 4mm;
}

.lelea-help-block ul {
  font-size: 10pt;
  line-height: 1.5;
}

.lelea-help-block li {
  position: relative;
  padding-left: 6mm;
  margin-bottom: 3mm;
}

.lelea-help-block li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2mm;
  width: 2mm;
  height: 2mm;
  background: var(--gold);
  border-radius: 50%;
}

.lelea-photo-side {
  width: 100%;
  height: 70mm;
  object-fit: contain;
  object-position: center;
}

/* Нижний блок: фото слева + текстовая карточка справа */
.lelea-connection {
  display: grid;
  grid-template-columns: 60mm 1fr;
  gap: 6mm;
  align-items: center;
  margin: 0;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 150mm;
}

.lelea-connection .lelea-photo-side {
  height: 65mm;
}

.lelea-connection-text {
  background: var(--card-bg);
  padding: 5mm 6mm;
  border-radius: 0 2mm 2mm 0;
  box-shadow: var(--shadow-card);
  border-left: 3px solid #8AB3D9;
}

.lelea-connection-text p {
  font-size: 10pt;
  line-height: 1.5;
  margin-bottom: 3mm;
  color: var(--text-primary);
}

.lelea-connection-text p:last-child { margin-bottom: 0; }

.lelea-connection-text strong {
  color: #4A7AAC;
  font-weight: 700;
}

/* Круглые плейсхолдеры под фото - заменим на реальные <img> */
.lelea-photo-row {
  display: flex;
  align-items: center;
  gap: 6mm;
  margin: 6mm 0;
}

.lelea-photo {
  width: 42mm;
  height: 42mm;
  border-radius: 50%;
  background: linear-gradient(135deg, #DBE5EF 0%, #B8C7D6 100%);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2mm 4mm rgba(16, 26, 37, 0.12);
}

.lelea-photo.placeholder::after {
  content: 'фото';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(16, 26, 37, 0.4);
  font-style: italic;
  font-size: 9pt;
}

.lelea-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lelea-photo.lg {
  width: 50mm;
  height: 50mm;
}

/* QR блок - акцент по центру страницы */
.lelea-qr-block {
  display: flex;
  align-items: center;
  gap: 6mm;
  background: #8AB3D9;
  padding: 5mm 7mm 5mm 5mm;
  border-radius: 2mm;
  z-index: 3;
  position: relative;
  align-self: center;
  margin: 0 auto;
  box-shadow: 0 3mm 6mm rgba(74, 122, 172, 0.18);
}

.lelea-qr-block .qr-link {
  display: block;
  line-height: 0;
}

.lelea-qr-block .qr-placeholder {
  width: 32mm;
  height: 32mm;
  flex-shrink: 0;
  background: #ffffff;
  padding: 1.5mm;
  border-radius: 1mm;
}

.lelea-qr-block .qr-label {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 12pt;
  color: var(--text-on-dark);
  text-align: left;
  line-height: 1.35;
}

.lelea-qr-block .qr-label strong {
  font-weight: 700;
  font-style: normal;
  font-size: 13pt;
  display: block;
  margin-bottom: 1mm;
}

.lelea-qr-block .qr-url {
  display: inline-block;
  margin-top: 2mm;
  font-family: var(--font-serif-body);
  font-style: normal;
  font-size: 11pt;
  color: var(--text-on-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.65);
  padding-bottom: 0.5mm;
  letter-spacing: 0.02em;
}

/* ============================================================
   СТРАНИЦА 7 + 8: Мини-гайд правил тарифа (ШАБЛОННАЯ)
   ============================================================ */

/* ====== Стр 7 + 8: Мини-гайд правил - переработка ====== */

.guide-intro {
  font-family: var(--font-serif-body);
  font-style: italic;
  font-size: 12pt;
  line-height: 1.5;
  text-align: center;
  margin: 0;
  max-width: 150mm;
  align-self: center;
  color: var(--text-muted);
}

/* Тема правил: иконка-медальон + заголовок + список */
.guide-theme {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7mm;
  align-items: start;
  margin: 0;
  position: relative;
  z-index: 2;
}

.theme-icon {
  width: 18mm;
  height: 18mm;
  border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.theme-icon svg {
  width: 9mm;
  height: 9mm;
  stroke: var(--gold);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-body {
  padding-top: 1mm;
}

.theme-title {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 600;
  font-size: 17pt;
  margin-bottom: 2mm;
  color: var(--text-primary);
  position: relative;
  display: inline-block;
}

.theme-title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1mm;
  height: 1.5px;
  background: var(--gold);
}

.theme-list {
  font-size: 11pt;
  line-height: 1.55;
  list-style: none;
  padding: 0;
  margin-top: 4mm;
}

.theme-list li {
  position: relative;
  padding-left: 6mm;
  margin-bottom: 2.5mm;
}

.theme-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2.5mm;
  width: 1.8mm;
  height: 1.8mm;
  background: var(--ink);
  border-radius: 50%;
}

/* CTA-карточка про подруг (золотая большая) */
.friend-cta {
  background: linear-gradient(135deg, var(--ink) 0%, #1B2A3F 100%);
  color: var(--text-on-dark);
  padding: 7mm 8mm;
  border-radius: 3mm;
  border-bottom: 3px solid var(--gold);
  position: relative;
  z-index: 2;
  margin: 0;
}

.friend-cta .cta-title {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 600;
  font-size: 19pt;
  margin-bottom: 2mm;
  color: var(--gold);
}

.friend-cta .cta-subtitle {
  font-size: 11pt;
  line-height: 1.5;
  margin-bottom: 5mm;
  color: var(--text-on-dark-muted);
}

.friend-cta-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4mm;
}

.friend-tier {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(238, 201, 92, 0.3);
  border-radius: 2mm;
  padding: 4mm 3mm;
  text-align: center;
}

.friend-tier .tier-count {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: 24pt;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 1.5mm;
}

.friend-tier .tier-label {
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-on-dark-muted);
  margin-bottom: 2.5mm;
}

.friend-tier .tier-reward {
  font-size: 10pt;
  line-height: 1.45;
  color: var(--text-on-dark);
}

/* Финальная цитата на стр 8 */
.closing-quote {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18pt;
  line-height: 1.4;
  text-align: center;
  max-width: 150mm;
  align-self: center;
  padding: 4mm 0;
  color: var(--text-primary);
  text-wrap: balance;
}

.closing-quote::before,
.closing-quote::after {
  content: '';
  display: block;
  width: 40mm;
  height: 1.5px;
  background: var(--gold);
  margin: 0 auto;
}

.closing-quote::before { margin-bottom: 4mm; }
.closing-quote::after { margin-top: 4mm; }

.closing-quote strong {
  color: var(--gold-deep);
  font-weight: 700;
  font-style: normal;
}

/* Старый класс - оставляем для совместимости (если где-то ещё используется) */
.guide-card {
  background: var(--card-bg);
  border-radius: 2mm;
  padding: 5mm 6mm;
  box-shadow: var(--shadow-card);
  margin: 0;
  max-width: 140mm;
}

.guide-card.dark {
  background: var(--ink);
  color: var(--text-on-dark);
}

.guide-card.offset-right {
  margin-left: auto;
  margin-right: 0;
}

.guide-number {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: 24pt;
  color: var(--gold);
  border-bottom: 1px solid var(--text-muted);
  padding-bottom: 1mm;
  margin-bottom: 4mm;
  display: block;
  width: 30mm;
}

.guide-list {
  font-size: 10pt;
  line-height: 1.5;
}

.guide-list li {
  position: relative;
  padding-left: 5mm;
  margin-bottom: 2mm;
}

.guide-list li::before {
  content: '○';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 9pt;
}

.friend-bonus-title {
  font-weight: 700;
  font-size: 10.5pt;
  margin-bottom: 3mm;
  border-bottom: 0.5px solid var(--gold);
  padding-bottom: 2mm;
}

.friend-bonus-list {
  font-size: 10pt;
  line-height: 1.5;
}

.friend-bonus-list li {
  position: relative;
  padding-left: 5mm;
  margin-bottom: 1.5mm;
}

.friend-bonus-list li::before {
  content: '○';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
}

.friend-bonus-list li b {
  color: var(--gold);
  font-weight: 700;
}

.guide-final-quote {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 600;
  font-size: 16pt;
  text-align: center;
  margin-top: 8mm;
  position: relative;
  display: block;
}

.guide-final-quote::after {
  content: '';
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: -2mm;
  height: 1.5px;
  background: var(--gold);
}

/* Большая декоративная цифра 6 на странице 7 */
.big-six {
  position: absolute;
  left: -5mm;
  top: 60mm;
  font-family: var(--font-serif-display);
  font-size: 220pt;
  color: var(--gold);
  opacity: 0.2;
  line-height: 1;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   СТРАНИЦА 9: Праздники + Где нас найти (ШАБЛОННАЯ, без контактов студии)
   ============================================================ */

.holidays-timeline {
  list-style: none;
  margin: 0 auto 18mm auto;
  max-width: 170mm;
  position: relative;
  padding-left: 6mm;
}

.holidays-timeline::before {
  /* Вертикальная нить: центр в 3mm от левого края контейнера */
  content: '';
  position: absolute;
  left: 3mm;
  top: 4mm;
  bottom: 4mm;
  width: 1px;
  background: var(--ink);
}

.holidays-timeline li {
  display: grid;
  grid-template-columns: 28mm 1fr;
  gap: 8mm;
  align-items: center;
  margin-bottom: 4mm;
  position: relative;
}

.holidays-timeline li::before {
  /* Кружок ровно по центру нити: left = -3mm от li (т.к. li начинается с padding-left 6mm),
     transform translate(-50%, -50%) центрирует точку относительно её координат. */
  content: '';
  position: absolute;
  left: -3mm;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2.4mm;
  height: 2.4mm;
  border-radius: 50%;
  background: var(--ink);
}

.holiday-date {
  background: var(--gold-soft);
  text-align: center;
  padding: 2.5mm 2mm;
  border-radius: 1.5mm;
  font-weight: 600;
  font-size: 13pt;
}

.holiday-date.dark {
  background: var(--ink);
  color: var(--text-on-dark);
}

.holiday-name {
  text-align: right;
  font-size: 13pt;
  border-bottom: 0.5px solid #D8DDE5;
  padding-bottom: 2mm;
}

.contacts-section .section-heading {
  font-size: 22pt;
  margin-bottom: 6mm;
}

.contacts-app {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7mm;
  align-items: center;
  background: var(--card-bg);
  padding: 6mm 8mm;
  border-radius: 2mm;
  box-shadow: var(--shadow-card);
  max-width: 130mm;
  margin: 0 auto;
}

.contacts-app .app-text {
  font-size: 11.5pt;
  line-height: 1.45;
}

.contacts-app .app-text strong { font-weight: 700; }

.contacts-app .qr-placeholder {
  width: 32mm;
  height: 32mm;
  flex-shrink: 0;
}

.contacts-app .qr-link {
  display: inline-block;
  line-height: 0;
}

.contacts-app .app-link {
  display: inline-block;
  margin-top: 3mm;
  font-size: 10.5pt;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.5mm;
  font-weight: 600;
}

.movement-closer {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 13pt;
  text-align: center;
  margin-top: 10mm;
}

/* ====== Опциональный блок «Важно перед стартом» (стр 1) ======
 * Компактные размеры по умолчанию - блок занимает ~20mm,
 * и в превью, и в PDF выглядит одинаково. */
.important-before-start {
  background: #FFFBEE;
  border: 1px solid var(--gold);
  border-radius: 2mm;
  padding: 2.5mm 4mm;
  margin: 2mm 0;
}
.important-before-start .ibs-title {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 12pt;
  color: var(--gold-deep);
  margin-bottom: 0.5mm;
}
.important-before-start p {
  font-size: 10pt;
  line-height: 1.4;
  color: var(--text-primary);
}

/* ====== Compact-режим страницы 1 ======
 * Применяется только когда у плана есть опциональный блок «Важно перед
 * стартом» - тогда остальные блоки сжимаются, чтобы все 3 пункта
 * «Что учитывать» помещались на странице. Без блока используются
 * обычные «просторные» отступы - страница не выглядит сжатой. */
.page.has-warning .plan-title { margin-bottom: 2mm; padding-top: 0; }
.page.has-warning .greeting { margin-bottom: 2mm; }
.page.has-warning .achievable-badge { margin-bottom: 2mm; padding: 1.5mm 4mm; }
.page.has-warning .achievable-text { margin-bottom: 3mm; }
.page.has-warning .section-heading { margin-bottom: 2mm; }
.page.has-warning .card-essentials { margin-bottom: 3mm; }
.page.has-warning .subsection-heading { margin-bottom: 1mm; }
.page.has-warning .timeline-item {
  margin-bottom: 1.5mm;
  font-size: 9.5pt;
  line-height: 1.4;
}
.page.has-warning .timeline-item:not(:last-child)::after {
  height: calc(100% + 1.5mm);
}