/* ──────────────────────────────────────────────────────
       NUMEFY · MATRIX OF DESTINY v4-3 · EXTENDED A4 REPORT
       (фирменные цвета статей + правильный SVG + расширенная методология)
       ────────────────────────────────────────────────────── */

    :root {
      --purple: #7c3aed; --purple-light: #a78bfa; --purple-soft: #ede9fe; --purple-bg: #faf5ff;
      --indigo: #6366f1; --pink: #ec4899;
      --gold: #d97706; --gold-light: #fbbf24; --gold-soft: #fef3c7;
      --emerald: #10b981; --emerald-soft: #d1fae5;
      --red: #dc2626; --red-soft: #fee2e2;
      --blue: #2563eb; --blue-soft: #dbeafe;
      --teal: #0891b2;
      --ink-1: #0f172a; --ink-2: #1e293b; --ink-3: #334155; --ink-4: #64748b; --ink-5: #94a3b8;
      --line: #e2e8f0; --line-2: #f1f5f9; --bg: #ffffff;
      --grad-brand: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
      --grad-brand-soft: linear-gradient(135deg, rgba(124,58,237,0.05) 0%, rgba(99,102,241,0.05) 100%);
      --grad-gold: linear-gradient(135deg, #fbbf24, #d97706);
      --grad-rose: linear-gradient(135deg, #f87171, #ec4899);
      --grad-emerald: linear-gradient(135deg, #34d399, #10b981);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    /* Body bg — оригинальный radial gradient v3 (фиолет + индиго + золото).
        Override через body.l3-body чтобы перебить ds-bg-white { #fff !important }
        из design_system.css. Ровно тот же приём что на /matrica-sudby. */
    body.l3-body {
      background:
        radial-gradient(circle at 20% 30%, rgba(99,102,241,0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(139,92,246,0.05) 0%, transparent 50%),
        radial-gradient(circle at 50% 10%, rgba(245,158,11,0.04) 0%, transparent 40%),
        #ffffff !important;
      background-attachment: fixed;
      font-family: 'Inter', sans-serif;
      color: var(--ink-2);
      -webkit-font-smoothing: antialiased;
    }
    /* Magic-bg div из layout — на v3 не нужен (фон даёт сам body), отключаем
        чтобы не накладывался поверх и не давал лишний слой. */
    body.l3-body .ds-magic-bg { display: none; }
    /* 2026-05-26: убран body { padding: 32px 0 } — после рефактора под
        application layout полоса оказывалась НАД хедером. Воздух теперь
        даёт сам контейнер .v3-result-wrap (padding-top меньше, чтобы demo-card
        не висела далеко от sticky-хедера). */
    .v3-result-wrap {
      padding: 12px 0 96px;
    }
    @media (max-width: 640px) {
      .v3-result-wrap { padding: 4px 0 60px; }
    }

    .page {
      width: 210mm; height: 297mm; margin: 0 auto 20px;
      padding: 14mm 18mm 16mm; background: var(--bg);
      box-shadow: 0 4px 32px rgba(124,58,237,0.10), 0 0 0 1px rgba(0,0,0,0.04);
      position: relative; overflow: hidden; border-radius: 4px;
      page-break-after: always; display: flex; flex-direction: column;
    }
    .page::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
      background: var(--grad-brand);
    }
    .page-number { position: absolute; bottom: 10mm; right: 18mm; font-size: 9pt; color: var(--ink-5); letter-spacing: 2px; font-weight: 700; }
    .page-footer { position: absolute; bottom: 10mm; left: 18mm; font-size: 9pt; color: var(--ink-5); letter-spacing: 1px; font-weight: 500; }
    .page-footer strong { color: var(--purple); font-weight: 700; }

    /* Typography */
    .label { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4); font-weight: 800; }
    .label-purple { color: var(--purple); } .label-gold { color: var(--gold); }
    h1, h2, h3, h4, h5 { font-family: 'Outfit', 'Inter', -apple-system, sans-serif; color: var(--ink-1); letter-spacing: -0.015em; font-weight: 800; }
    h2.section-title { font-size: 21pt; line-height: 1.1; }
    h3 { font-family: 'Outfit', 'Inter', -apple-system, sans-serif !important; font-size: 13pt; font-weight: 700; margin: 0 0 3pt; line-height: 1.2; letter-spacing: -0.015em; }
    h3.display-lg { font-size: 18pt; font-weight: 700; line-height: 1.15; }
    p { font-size: 9.5pt; line-height: 1.5; color: var(--ink-3); margin: 0 0 5pt; }
    .lead { font-size: 10.5pt; line-height: 1.5; color: var(--ink-3); font-weight: 400; }
    .small { font-size: 8.5pt; line-height: 1.45; color: var(--ink-4); }

    /* Cover */
    .cover {
      justify-content: space-between;
      background:
        radial-gradient(ellipse 80% 50% at 50% 20%, rgba(124,58,237,0.07), transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 70%, rgba(236,72,153,0.04), transparent 60%),
        var(--bg);
    }
    .cover-top { display: flex; justify-content: space-between; align-items: flex-start; }
    .cover-brand { display: flex; align-items: center; gap: 12pt; }
    .cover-brand-mark {
      width: 40pt; height: 40pt; border-radius: 12pt;
      background: var(--grad-brand);
      display: flex; align-items: center; justify-content: center;
      color: white; font-family: 'Outfit', sans-serif; font-size: 22pt; font-weight: 800;
      box-shadow: 0 8px 24px rgba(124,58,237,0.35);
      overflow: hidden;
    }
    .cover-brand-mark img { display: block; width: 100%; height: 100%; }
    .cover-brand-text { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 14pt; color: var(--ink-1); }
    .cover-brand-sub { font-size: 9pt; color: var(--ink-4); letter-spacing: 1px; }
    .cover-meta { text-align: right; }
    .cover-meta strong { display: block; font-size: 12pt; color: var(--ink-1); font-weight: 700; margin-top: 4pt; }

    .cover-center { text-align: center; margin: auto 0; }
    .cover-eyebrow {
      display: inline-block; padding: 6pt 14pt;
      background: var(--purple-soft); color: var(--purple);
      border-radius: 999pt; font-size: 10pt; font-weight: 700;
      letter-spacing: 0.06em; margin-bottom: 6mm;
    }
    .cover-title { font-family: 'Outfit', sans-serif; font-size: 76pt; font-weight: 800; line-height: 0.98; letter-spacing: -0.04em; color: var(--ink-1); margin-bottom: 6mm; }
    .cover-title em { font-style: normal; background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .cover-date { font-size: 14pt; color: var(--ink-3); letter-spacing: 0.3em; text-transform: uppercase; font-weight: 600; }
    .cover-gender { display: inline-block; margin-top: 4mm; padding: 3pt 10pt; background: var(--blue-soft); color: var(--blue); border-radius: 999pt; font-size: 9pt; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
    .cover-gender.female { background: #fce7f3; color: #be185d; }

    .cover-archetype {
      margin: 12mm auto 0; max-width: 140mm; text-align: center;
      padding: 10mm 8mm;
      background: var(--grad-brand-soft);
      border: 1px solid rgba(124,58,237,0.15);
      border-radius: 20pt;
    }
    .cover-archetype-label { display: inline-block; font-size: 9pt; letter-spacing: 0.2em; text-transform: uppercase; color: var(--purple); margin-bottom: 4mm; font-weight: 800; }
    .cover-archetype-name {
      font-family: 'Outfit', sans-serif;
      font-size: 36pt;
      font-weight: 800; letter-spacing: -0.02em;
      color: var(--ink-1); margin-bottom: 3mm; line-height: 1.05;
      /* JS auto-fit уменьшает font-size так, чтобы каждое слово влезло в одну
         строку. На десктопе/планшете это всегда срабатывает — длинные слова
         просто рендерятся мельче. */
      max-width: 100%;
      overflow-wrap: break-word;
    }
    /* hyphens — только для узких мобилок (≤480px), где даже минимум 14pt
       не помещает «Дипломатичный» в одну строку. С hyphens браузер ставит
       дефис автоматически по правилам lang="ru". На десктопе hyphens
       мешает fit() — браузер видит возможность переноса и не уменьшает
       шрифт, получается «Системный ма-/стер» вместо просто мельче. */
    @media (max-width: 480px) {
      .cover-archetype-name {
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
      }
    }
    .cover-archetype-tagline { font-size: 13pt; color: var(--ink-3); line-height: 1.45; font-weight: 500; }

    .cover-bottom { text-align: center; padding-top: 8mm; margin-bottom: 14mm; border-top: 1px solid var(--line); }
    .cover-tagline { font-size: 12pt; color: var(--ink-3); margin-bottom: 4pt; font-weight: 500; }
    .cover-author { font-size: 9pt; color: var(--ink-4); letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; }
    .cover-author strong { color: var(--ink-1); }

    /* ─── Page «Контекст даты» (free-only) ──────────────────────────
       height: auto + min-height: A4 — базовое состояние ровно 297mm как у других .page,
       при раскрытии FAQ <details> страница плавно растягивается, footer сдвигается. */
    .page-context { height: auto !important; min-height: 297mm; }
    .ctx-eyebrow { display: inline-block; font-size: 8.5pt; letter-spacing: 0.22em; text-transform: uppercase; color: var(--purple); font-weight: 800; margin-bottom: 2.5mm; }
    .ctx-h1 { font-family: 'Outfit', sans-serif; font-size: 21pt; line-height: 1.15; font-weight: 800; color: var(--ink-1); letter-spacing: -0.02em; margin-bottom: 3mm; max-width: 165mm; }
    .ctx-h1 em { font-style: normal; background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .ctx-lead { font-size: 10pt; line-height: 1.5; color: var(--ink-3); margin-bottom: 6mm; max-width: 170mm; }
    .ctx-lead strong { color: var(--ink-1); font-weight: 700; }

    .ctx-section { margin-bottom: 6mm; }
    .ctx-section-title { font-family: 'Outfit', sans-serif; font-size: 12pt; font-weight: 800; color: var(--ink-1); margin-bottom: 3mm; letter-spacing: -0.01em; display: flex; align-items: center; gap: 7pt; }
    .ctx-section-title::before { content: ''; display: inline-block; width: 14pt; height: 3pt; background: var(--grad-brand); border-radius: 999pt; }

    .ctx-hero-card { display: flex; align-items: center; gap: 5mm; padding: 4mm 5mm; background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 60%, #fff 100%); border: 1px solid var(--gold-light); border-radius: 10pt; margin-bottom: 3mm; box-shadow: 0 2px 14px rgba(217,119,6,0.08); }
    .ctx-hero-left { flex: 1; min-width: 0; }
    .ctx-hero-name { font-family: 'Outfit', sans-serif; font-size: 15pt; font-weight: 800; color: var(--ink-1); line-height: 1.15; letter-spacing: -0.015em; margin: 1mm 0; }
    .ctx-hero-role { font-size: 9pt; color: var(--gold); font-weight: 700; letter-spacing: 0.02em; margin-bottom: 1mm; }
    .ctx-hero-formula { font-size: 8pt; color: var(--ink-4); font-family: 'Outfit', sans-serif; letter-spacing: 0.01em; }
    .ctx-hero-num { font-family: 'Outfit', sans-serif; font-size: 44pt; font-weight: 800; line-height: 0.9; background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; flex-shrink: 0; }

    .ctx-breakdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; }
    .ctx-bd-card { padding: 3mm 3.5mm; background: #fff; border: 1px solid var(--purple-soft); border-radius: 9pt; display: flex; flex-direction: column; gap: 1mm; min-height: 0; transition: border-color 0.15s; }
    .ctx-bd-card:hover { border-color: var(--purple); }
    .ctx-bd-head { display: flex; justify-content: space-between; align-items: baseline; gap: 2mm; }
    .ctx-bd-label { font-size: 7.5pt; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); font-weight: 800; }
    .ctx-bd-num { font-family: 'Outfit', sans-serif; font-size: 22pt; font-weight: 800; line-height: 0.95; background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .ctx-bd-name { font-family: 'Outfit', sans-serif; font-size: 11pt; font-weight: 700; color: var(--ink-1); line-height: 1.15; }
    .ctx-bd-role { font-size: 8pt; color: var(--purple); font-weight: 700; letter-spacing: 0.01em; line-height: 1.2; }
    .ctx-bd-formula { font-size: 7.5pt; color: var(--ink-5); line-height: 1.3; font-family: 'Outfit', sans-serif; margin-top: auto; padding-top: 1mm; }

    .ctx-archetype { padding: 4.5mm 6mm; background: var(--grad-brand-soft); border: 1px solid var(--purple-soft); border-radius: 10pt; margin-top: 1mm; }
    .ctx-archetype-label { display: inline-block; font-size: 8pt; letter-spacing: 0.2em; text-transform: uppercase; color: var(--purple); margin-bottom: 1.5mm; font-weight: 800; }
    .ctx-archetype-name { font-family: 'Outfit', sans-serif; font-size: 16pt; font-weight: 800; color: var(--ink-1); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 1.5mm; }
    .ctx-archetype-tagline { font-size: 10.5pt; line-height: 1.4; color: var(--ink-3); font-weight: 500; }

    .ctx-faq details { border-bottom: 1px solid var(--line-2); padding: 3mm 0; }
    .ctx-faq details:last-child { border-bottom: none; }
    .ctx-faq summary { font-family: 'Outfit', sans-serif; font-size: 10.5pt; font-weight: 700; color: var(--ink-1); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 4mm; padding-right: 2mm; }
    .ctx-faq summary::-webkit-details-marker { display: none; }
    .ctx-faq summary::after { content: '+'; font-family: 'Outfit', sans-serif; font-size: 18pt; font-weight: 400; color: var(--purple); line-height: 1; transition: transform 0.2s; }
    .ctx-faq details[open] summary::after { content: '−'; }
    .ctx-faq-a { font-size: 9.5pt; line-height: 1.55; color: var(--ink-3); margin-top: 2mm; padding-right: 6mm; }

    .ctx-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
    .ctx-tool { padding: 4mm 4.5mm; background: #fff; border: 1.5px solid var(--purple-soft); border-radius: 10pt; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 1mm; transition: all 0.2s; }
    .ctx-tool:hover { border-color: var(--purple); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(124,58,237,0.10); }
    .ctx-tool-icon { font-size: 16pt; line-height: 1; margin-bottom: 0.5mm; }
    .ctx-tool-title { font-family: 'Outfit', sans-serif; font-size: 10.5pt; font-weight: 800; color: var(--ink-1); }
    .ctx-tool-sub { font-size: 8pt; color: var(--ink-4); line-height: 1.4; }

    .ctx-cal-years { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2mm; margin-bottom: 4mm; }
    .ctx-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2mm; margin-bottom: 1.5mm; }
    .ctx-cal-weekdays > span { text-align: center; font-size: 7pt; color: var(--ink-5); font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
    .ctx-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2mm; }
    .ctx-cal-cell { padding: 2mm 1mm; background: #fff; border: 1px solid var(--line); border-left-width: 3px; border-radius: 5pt; text-align: center; font-size: 7.5pt; color: var(--ink-3); text-decoration: none; line-height: 1.2; transition: all 0.15s; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 0.5mm; }
    .ctx-cal-cell:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(124,58,237,0.10); }
    .ctx-cal-cell-date { display: block; font-size: 8pt; font-weight: 700; color: var(--ink-1); line-height: 1; letter-spacing: -0.01em; }
    .ctx-cal-cell-arc { display: block; font-size: 6.5pt; color: var(--ink-4); font-weight: 600; letter-spacing: 0.02em; }
    /* Temp palette — warm/cold/fiery (как в life_table v3) */
    .ctx-cal-cell--warm { border-left-color: #f59e0b; }
    .ctx-cal-cell--warm .ctx-cal-cell-arc { color: #b45309; }
    .ctx-cal-cell--cold { border-left-color: #6366f1; }
    .ctx-cal-cell--cold .ctx-cal-cell-arc { color: #4338ca; }
    .ctx-cal-cell--fiery { border-left-color: #dc2626; }
    .ctx-cal-cell--fiery .ctx-cal-cell-arc { color: #b91c1c; }
    .ctx-cal-cell--self { background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%); border: 1.5px solid var(--gold-light); border-left: 3px solid var(--gold); cursor: default; }
    .ctx-cal-cell--self:hover { transform: none; box-shadow: 0 2px 8px rgba(217,119,6,0.15); }
    .ctx-cal-cell--self .ctx-cal-cell-date { color: var(--gold); font-weight: 800; }
    .ctx-cal-cell--self .ctx-cal-cell-arc { color: #b45309; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 6pt; }
    .ctx-cal-label { font-size: 7.5pt; color: var(--ink-5); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; margin-bottom: 2mm; }
    .ctx-cal-legend { display: flex; gap: 5mm; margin-top: 4mm; padding-top: 3mm; border-top: 1px solid var(--line-2); justify-content: center; }
    .ctx-cal-legend-item { display: flex; align-items: center; gap: 1.5mm; font-size: 7.5pt; color: var(--ink-4); font-weight: 600; letter-spacing: 0.02em; }
    .ctx-cal-swatch { display: inline-block; width: 10pt; height: 3pt; border-radius: 999pt; }
    .ctx-cal-swatch.ctx-cal-cell--warm { background: #f59e0b; border: none; }
    .ctx-cal-swatch.ctx-cal-cell--cold { background: #6366f1; border: none; }
    .ctx-cal-swatch.ctx-cal-cell--fiery { background: #dc2626; border: none; }
    .ctx-context-marker { position: absolute; bottom: 10mm; right: 18mm; font-size: 8pt; color: var(--ink-5); letter-spacing: 0.2em; font-weight: 700; text-transform: uppercase; }

    @media (max-width: 640px) {
      .page-context { padding: 18px 14px 56px !important; }
      .page-context .ctx-context-marker { display: none !important; }
      .ctx-h1 { font-size: 22pt !important; }
      .ctx-lead { font-size: 11pt !important; }
      .ctx-hero-card { padding: 4mm 4mm !important; gap: 3mm !important; }
      .ctx-hero-name { font-size: 14pt !important; }
      .ctx-hero-num { font-size: 42pt !important; }
      .ctx-hero-role { font-size: 9pt !important; }
      .ctx-breakdown { grid-template-columns: repeat(2, 1fr) !important; }
      .ctx-bd-card { padding: 3mm !important; }
      .ctx-bd-num { font-size: 20pt !important; }
      .ctx-bd-name { font-size: 10.5pt !important; }
      .ctx-tools { grid-template-columns: 1fr !important; }
      .ctx-cal-years { grid-template-columns: repeat(5, 1fr) !important; }
      .ctx-cal-days, .ctx-cal-weekdays { grid-template-columns: repeat(7, 1fr) !important; gap: 1mm !important; }
      .ctx-cal-cell { padding: 1.5mm 0.5mm !important; }
      .ctx-cal-cell-date { font-size: 7.5pt !important; }
      .ctx-cal-cell-arc { font-size: 6pt !important; }
      .ctx-archetype-name { font-size: 17pt !important; }
    }

    /* Page header */
    .page-header {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 6mm; padding-bottom: 3.5mm; margin-bottom: 4mm;
      border-bottom: 1px solid var(--line);
    }
    .page-header h2.section-title { margin-top: 1.5mm; }
    .page-section-name { font-size: 9pt; letter-spacing: 0.2em; text-transform: uppercase; color: var(--purple); font-weight: 800; }
    .page-section-num {
      display: inline-flex; align-items: center; justify-content: center;
      width: 48pt; height: 48pt; border-radius: 12pt;
      background: var(--grad-brand); color: white;
      font-family: 'Outfit', sans-serif; font-size: 22pt; font-weight: 800;
      box-shadow: 0 6px 20px rgba(124,58,237,0.3); flex-shrink: 0;
    }

    /* Arcana badge */
    .arcana-num {
      display: inline-flex; align-items: center; justify-content: center;
      width: 40pt; height: 40pt; border-radius: 50%;
      font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 18pt;
      color: white; flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.12);
      text-shadow: 0 1px 2px rgba(0,0,0,0.18);
    }
    .arcana-num.lg { width: 64pt; height: 64pt; font-size: 28pt; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
    .arcana-num.xl { width: 96pt; height: 96pt; font-size: 44pt; box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
    .arcana-num.sm { width: 30pt; height: 30pt; font-size: 14pt; }

    .a-1, .a-13       { background: linear-gradient(135deg, #818cf8, #4f46e5); }
    .a-2, .a-18       { background: linear-gradient(135deg, #93c5fd, #2563eb); }
    .a-3, .a-14, .a-21 { background: linear-gradient(135deg, #34d399, #10b981); }
    .a-4, .a-16       { background: linear-gradient(135deg, #f87171, #dc2626); }
    .a-5, .a-9, .a-22 { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
    .a-6, .a-17       { background: linear-gradient(135deg, #f9a8d4, #ec4899); }
    .a-7             { background: linear-gradient(135deg, #67e8f9, #0891b2); }
    .a-8, .a-11       { background: linear-gradient(135deg, #fbbf24, #d97706); }
    .a-10, .a-19      { background: linear-gradient(135deg, #fcd34d, #f59e0b); }
    .a-12, .a-20      { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
    .a-15            { background: linear-gradient(135deg, #fb7185, #be123c); }

    /* Insights */
    .insight-grid { display: grid; grid-template-columns: 1fr; gap: 5mm; margin-top: 6mm; }
    .insight {
      padding: 5mm 7mm; border-radius: 14pt;
      background: var(--purple-bg); border-left: 4pt solid var(--purple);
      box-shadow: 0 4px 16px rgba(124,58,237,0.06);
      display: grid; grid-template-columns: 28pt 1fr; gap: 6pt 12pt; align-items: start;
    }
    .insight.warning { background: var(--red-soft); border-left-color: var(--red); }
    .insight.potential { background: var(--emerald-soft); border-left-color: var(--emerald); }
    .insight-icon {
      width: 28pt; height: 28pt; border-radius: 8pt;
      background: white; display: flex; align-items: center; justify-content: center;
      font-size: 15pt; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      grid-row: 1 / 3;
    }
    .insight-title { font-family: 'Outfit', sans-serif; font-size: 14pt; font-weight: 800; line-height: 1.2; color: var(--ink-1); }
    .insight-body { font-size: 10pt; line-height: 1.55; color: var(--ink-3); }

    /* Hero phrase */
    .hero-phrase {
      text-align: center; padding: 7mm 8mm; margin-bottom: 4mm;
      background: var(--grad-brand-soft); border-radius: 20pt;
      border: 1px solid rgba(124,58,237,0.12);
    }
    .hero-phrase-label {
      display: inline-block; padding: 4pt 12pt; background: white;
      color: var(--purple); border-radius: 999pt;
      font-size: 9pt; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
      margin-bottom: 6mm; box-shadow: 0 2px 8px rgba(124,58,237,0.12);
    }
    .hero-phrase-text { font-family: 'Outfit', sans-serif; font-size: 22pt; line-height: 1.25; font-weight: 700; color: var(--ink-1); letter-spacing: -0.015em; }
    .hero-phrase-text em, .hero-phrase-text strong { font-style: normal; font-weight: inherit; background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .hero-phrase[style*="gold"] .hero-phrase-text em, .hero-phrase[style*="gold"] .hero-phrase-text strong { background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .hero-phrase[style*="red"] .hero-phrase-text em, .hero-phrase[style*="red"] .hero-phrase-text strong { background: linear-gradient(135deg, #f87171, #dc2626); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    /* Тизер-блюр: на бесплатных страницах скрываем «соль», оставляя интригу (а не читаемую суть) */
    .teaser-lock { filter: blur(6px); opacity: 0.5; user-select: none; -webkit-user-select: none; pointer-events: none; }

    /* Octogram */
    .octogram-wrap {
      text-align: center; margin: 4mm 0; padding: 6mm;
      background: var(--purple-bg); border-radius: 20pt;
      border: 1px solid rgba(124,58,237,0.08);
    }
    .octogram-wrap svg { width: 100%; max-width: 165mm; height: auto; }
    .legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3mm 12mm; font-size: 9.5pt; margin-top: 5mm; }
    .legend-item { display: flex; align-items: center; gap: 8pt; color: var(--ink-3); }
    .legend-dot { width: 12pt; height: 12pt; border-radius: 50%; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

    /* Point row */
    .point-row {
      display: grid; grid-template-columns: 78pt 1fr; gap: 5mm;
      padding: 3mm 0; border-bottom: 1px solid var(--line-2);
      align-items: center;
    }
    .point-row:last-child { border-bottom: none; }
    .point-label-block { position: relative; align-self: start; padding-top: 4pt; }
    .point-label { font-size: 9pt; letter-spacing: 0.16em; text-transform: uppercase; color: var(--purple); font-weight: 800; display: block; margin-bottom: 2pt; line-height: 1.2; }
    .point-sublabel { font-size: 8.5pt; color: var(--ink-4); font-weight: 500; display: block; margin-bottom: 6pt; }
    .point-card { display: block; width: 64pt; border-radius: 5pt; box-shadow: 0 4px 10px rgba(15,23,42,0.20); position: relative; }
    .point-card-wrap { position: relative; width: 64pt; }
    .point-card-wrap .arcana-num {
      position: absolute; bottom: 6pt; right: -16pt;
      width: 34pt; height: 34pt; font-size: 13pt; line-height: 1; padding: 0;
      box-shadow: 0 4px 10px rgba(0,0,0,0.28);
      border: 2.5pt solid #fff; z-index: 2;
    }
    .point-content {
      position: relative; padding-left: 14pt;
      border-left: 3pt solid var(--line-2);
      align-self: center;
    }
    .point-content.accent-purple  { border-left-color: #a78bfa; }
    .point-content.accent-red     { border-left-color: #f87171; }
    .point-content.accent-yellow  { border-left-color: #fbbf24; }
    .point-content.accent-orange  { border-left-color: #fb923c; }
    .point-content.accent-neutral { border-left-color: #cbd5e1; }
    .point-name { font-family: 'Outfit', sans-serif; font-size: 15pt; font-weight: 700; line-height: 1.2; margin-bottom: 3pt; color: var(--ink-1); }
    .point-body { flex: 1; }
    .point-body p { font-size: 9.5pt; line-height: 1.5; margin: 3pt 0 0; }
    .point-content > p { font-size: 9.5pt; line-height: 1.5; margin: 3pt 0 0; }
    .shadow-note { color: var(--red); font-weight: 600; margin-top: 6pt !important; }
    .resource-note { color: var(--emerald); font-weight: 600; margin-top: 6pt !important; }

    /* Plus/Minus split */
    .pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; margin: 4mm 0; align-items: stretch; }
    .pm-card { padding: 4mm 5mm; border-radius: 14pt; display: flex; flex-direction: column; }
    /* Формула в pm-card прижата к низу — выровнено для обоих карточек. */
    .pm-card .formula { margin-top: auto !important; align-self: flex-start; }
    .pm-plus { background: var(--emerald-soft); border-top: 3pt solid var(--emerald); }
    .pm-minus { background: var(--red-soft); border-top: 3pt solid var(--red); }
    .pm-label { font-size: 9pt; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; margin-bottom: 4mm; }
    .pm-plus .pm-label { color: var(--emerald); }
    .pm-minus .pm-label { color: var(--red); }
    .pm-body { font-size: 10pt; color: var(--ink-3); line-height: 1.6; }

    /* Callout */
    .callout {
      padding: 5mm 7mm;
      background: linear-gradient(135deg, var(--purple-bg) 0%, rgba(255,255,255,0.6) 100%);
      border: 1px solid rgba(124,58,237,0.15);
      border-radius: 16pt; margin: 4mm 0; position: relative;
    }
    .callout.gold { background: linear-gradient(135deg, var(--gold-soft) 0%, rgba(255,255,255,0.6) 100%); border-color: rgba(217,119,6,0.18); }
    .callout.warning { background: linear-gradient(135deg, var(--red-soft) 0%, rgba(255,255,255,0.6) 100%); border-color: rgba(220,38,38,0.18); }
    .callout.success { background: linear-gradient(135deg, var(--emerald-soft) 0%, rgba(255,255,255,0.6) 100%); border-color: rgba(16,185,129,0.18); }
    .callout.indigo { background: linear-gradient(135deg, #e0e7ff 0%, rgba(255,255,255,0.6) 100%); border-color: rgba(79,70,229,0.18); }
    .callout.purple { background: linear-gradient(135deg, var(--purple-soft) 0%, rgba(255,255,255,0.6) 100%); border-color: rgba(124,58,237,0.22); }
    .callout-icon { position: absolute; top: 5mm; right: 6mm; font-size: 22pt; line-height: 1; opacity: 0.6; }
    .callout-label {
      display: inline-block; padding: 2pt 8pt; background: white;
      color: var(--purple); border-radius: 999pt;
      font-size: 8pt; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
      margin-bottom: 2.5mm; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    }
    .callout.gold .callout-label { color: var(--gold); }
    .callout.warning .callout-label { color: var(--red); }
    .callout.success .callout-label { color: var(--emerald); }
    .callout.indigo .callout-label { color: #4338ca; background: rgba(79,70,229,0.10); }
    .callout.purple .callout-label { color: var(--purple); background: rgba(124,58,237,0.10); }
    .callout-title { font-family: 'Outfit', sans-serif; font-size: 15pt; font-weight: 800; line-height: 1.2; margin-bottom: 2.5mm; color: var(--ink-1); }
    .callout p { color: var(--ink-2); font-size: 10pt; line-height: 1.55; margin: 0 0 4pt; }

    /* Stat row */
    .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; margin: 6mm 0; }
    .stat-cell {
      padding: 6mm 5mm; text-align: center; background: var(--bg);
      border: 1px solid var(--line); border-radius: 16pt;
      box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    }
    .stat-cell .label { display: block; margin-bottom: 4mm; }
    .stat-cell .arcana-num { margin: 0 auto 4mm; }
    .stat-cell-name { font-family: 'Outfit', sans-serif; font-size: 14pt; font-weight: 800; color: var(--ink-1); margin-bottom: 3mm; }
    .stat-cell .small { padding: 0 2mm; }

    /* Rod-cell — родовая линия (4 карточки на стр 18) */
    .rod-cell { text-align: left; padding: 4mm 5mm; }
    .rod-cell .label { margin-bottom: 2mm; }
    .rod-cell-head { display: flex; align-items: center; gap: 10pt; margin: 0 0 2mm; }
    .rod-cell-head .arcana-num { margin: 0; width: 32pt; height: 32pt; font-size: 14pt; }
    .rod-cell-name { font-family: 'Outfit', sans-serif; font-size: 12pt; font-weight: 800; color: var(--ink-1); }
    .rod-cell .small { padding: 0; text-align: left; color: var(--ink-3); line-height: 1.45; font-size: 9pt; }

    /* Chakra rows */
    .chakra-row { display: grid; grid-template-columns: 24pt 90pt 1fr; gap: 6mm; padding: 4mm 0; align-items: center; border-bottom: 1px solid var(--line-2); }
    .chakra-row.highlight { background: var(--gold-soft); margin: 0 -6mm; padding: 4mm 6mm; border-radius: 12pt; border-bottom: none; }
    .chakra-row:last-child { border-bottom: none; }
    .chakra-disc { width: 18pt; height: 18pt; border-radius: 50%; box-shadow: 0 0 0 3pt rgba(255,255,255,0.9), 0 0 0 4pt currentColor; }
    .chakra-name { font-family: 'Outfit', sans-serif; font-size: 14pt; font-weight: 800; color: var(--ink-1); }
    .chakra-meta { font-size: 9pt; color: var(--ink-4); margin-top: 1pt; }
    .chakra-body { font-size: 10pt; line-height: 1.6; color: var(--ink-3); }
    .archetype-tag { display: inline-flex; align-items: center; gap: 4pt; padding: 2pt 8pt; font-size: 8.5pt; background: white; border: 1px solid var(--line); border-radius: 999pt; color: var(--ink-1); margin-left: 4pt; font-weight: 700; }

    /* Health table 7×3 */
    .health-table {
      width: 100%; border-collapse: separate; border-spacing: 0;
      margin: 5mm 0; border-radius: 14pt; overflow: hidden;
      border: 1px solid var(--line);
    }
    .health-table th {
      background: var(--purple-bg); color: var(--purple);
      font-size: 8.5pt; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800;
      padding: 3mm 2.5mm; border-bottom: 1px solid var(--line);
    }
    .health-table th:first-child { text-align: left; padding-left: 5mm; }
    .health-table th:not(:first-child) { text-align: center; width: 22%; }
    .health-table td {
      padding: 2.5mm 2.5mm; border-bottom: 1px solid var(--line-2);
      vertical-align: middle;
    }
    .health-table tr:last-child td { border-bottom: none; }
    .health-table .chakra-cell {
      padding-left: 5mm; display: flex; align-items: center; gap: 7pt;
    }
    .health-table .chakra-dot { width: 12pt; height: 12pt; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2pt white, 0 0 0 3pt currentColor; }
    .health-table .h-arc {
      display: inline-flex; align-items: center; justify-content: center;
      width: 26pt; height: 26pt; border-radius: 50%;
      font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 12pt;
      color: white; box-shadow: 0 2px 6px rgba(0,0,0,0.1); margin: 0 auto;
    }
    .health-table tr.health-key-row {
      background: var(--emerald-soft); border-top: 2pt solid var(--emerald);
    }
    .health-table tr.health-key-row td { font-weight: 700; padding-top: 4.5mm; padding-bottom: 4.5mm; }
    .health-table tr.health-key-row .chakra-cell { color: var(--emerald); }
    .health-table tr.health-key-row .h-arc { background: linear-gradient(135deg, #34d399, #10b981) !important; }
    .health-table tr.archetype-resonance td { background: var(--gold-soft) !important; font-weight: 600; }

    /* Program card */
    .program {
      border: 1px solid rgba(124,58,237,0.18); border-radius: 14pt;
      padding: 5mm 7mm; margin: 3mm 0;
      background: linear-gradient(135deg, var(--bg) 0%, var(--purple-bg) 100%);
      box-shadow: 0 4px 18px rgba(124,58,237,0.06);
    }
    .program-head { display: flex; justify-content: space-between; align-items: center; gap: 10pt; margin-bottom: 2.5mm; padding-bottom: 2mm; border-bottom: 1px dashed var(--line); }
    .program-code {
      font-family: 'Outfit', sans-serif; font-size: 18pt; font-weight: 800; letter-spacing: 0.04em;
      background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      white-space: nowrap; flex-shrink: 0;
    }
    .program-zone { font-size: 8.5pt; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); font-weight: 700; text-align: right; }
    .program-name { font-family: 'Outfit', sans-serif; font-size: 13pt; font-weight: 700; color: var(--ink-1); margin-bottom: 2mm; }
    .program-essence { font-size: 9.5pt; line-height: 1.55; color: var(--ink-3); margin-bottom: 2.5mm; }
    .program-resource { padding-top: 2mm; border-top: 1px dashed var(--line); font-size: 9.5pt; line-height: 1.5; color: var(--emerald); font-weight: 600; }
    .program-resource::before { content: '→ '; font-weight: 900; }
    .program-resource strong { padding: 0; margin: 0; color: inherit; }

    /* Disclaimer */
    .disclaimer { padding: 4mm 6mm; background: var(--line-2); border-left: 3pt solid var(--ink-5); border-radius: 0 10pt 10pt 0; font-size: 9pt; line-height: 1.5; color: var(--ink-4); margin: 4mm 0; }
    .disclaimer strong { color: var(--ink-2); font-weight: 700; }
    .disclaimer.brand { background: var(--purple-bg); border-left-color: var(--purple); color: var(--ink-3); }
    .disclaimer.brand strong { color: var(--purple); }

    /* Timeline (destiny) */
    .timeline { position: relative; padding-left: 28pt; margin: 4mm 0; }
    .timeline::before { content: ''; position: absolute; left: 10pt; top: 6pt; bottom: 6pt; width: 2pt; background: linear-gradient(180deg, var(--purple) 0%, var(--gold-light) 100%); border-radius: 1pt; }
    .timeline-item { position: relative; padding: 1.5mm 0 1.5mm 5mm; }
    .timeline-item::before { content: ''; position: absolute; left: -22pt; top: 5mm; width: 12pt; height: 12pt; border-radius: 50%; background: white; border: 2.5pt solid var(--ink-5); }
    .timeline-item.active::before { background: var(--grad-brand); border-color: white; box-shadow: 0 0 0 3pt rgba(124,58,237,0.2); }
    .timeline-age { font-size: 8.5pt; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); font-weight: 700; margin-bottom: 2pt; }
    .timeline-item.active .timeline-age { color: var(--purple); }
    .timeline-title { font-family: 'Outfit', sans-serif; font-size: 14pt; font-weight: 800; margin-bottom: 1.5mm; display: flex; align-items: center; gap: 8pt; color: var(--ink-1); }
    .timeline-body { font-size: 9.5pt; line-height: 1.5; color: var(--ink-3); }
    .million-badge {
      display: inline-block; padding: 2pt 8pt; margin-bottom: 2mm;
      background: var(--gold-soft); color: var(--gold);
      border-radius: 999pt; font-size: 8.5pt; font-weight: 800;
      letter-spacing: 0.04em;
    }
    .million-badge::before { content: '⭐ '; }

    /* ── Life Calendar (8×8 table) ── */
    .calendar {
      width: 100%; border-collapse: separate; border-spacing: 3px;
      margin: 3mm 0; font-family: 'Inter', sans-serif;
      table-layout: fixed;  /* фиксированная ширина — все 8 ячеек одного размера */
    }
    .calendar td.row-label {
      width: 42pt; padding: 2mm 3mm; text-align: center;
      background: var(--purple-soft); color: var(--purple);
      font-weight: 800; font-size: 8pt; letter-spacing: 0.05em;
      border-radius: 7pt;
    }
    .calendar td.cell {
      width: 9.5%;  /* (100 - 42pt) / 8 ≈ равные доли остатка */
      padding: 1.5mm 2pt; text-align: center;
      border-radius: 7pt; position: relative;
      font-family: 'Inter', sans-serif;
      vertical-align: top;
    }
    .calendar td.cell .age-num { font-size: 7pt; color: var(--ink-4); font-weight: 600; line-height: 1.0; }
    .calendar td.cell .arc-num { font-family: 'Outfit', 'Inter', sans-serif; font-size: 13pt; font-weight: 800; line-height: 1.0; margin: 0.5mm 0; }
    .calendar td.cell .arc-name {
      font-size: 6.5pt; font-weight: 700; line-height: 1.1;
      /* Перенос длинных названий по слогам с дефисом */
      hyphens: auto;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      overflow-wrap: break-word;
      word-break: break-word;
    }
    /* Календарь раскрашивается per-arcana через классы c-arc + a-N (soft pastel) */
    .calendar td.cell.c-arc { background: #f8fafc; color: var(--ink-1); }
    /* age-num наследует тёмный цвет от cell (выставлен в каждой .a-N группе ниже),
       чтобы контраст с pastel-фоном был хорошим. */
    .calendar td.cell.c-arc .age-num { color: inherit; opacity: 0.75; font-weight: 700; }
    /* Pastel overrides для каждой группы — через c-arc.a-N контекст (не конфликтуют с .a-N в SVG/резонансах) */
    .calendar td.cell.c-arc.a-1, .calendar td.cell.c-arc.a-13       { background: #e0e7ff; color: #3730a3; }
    .calendar td.cell.c-arc.a-2, .calendar td.cell.c-arc.a-18       { background: #dbeafe; color: #1e40af; }
    .calendar td.cell.c-arc.a-3, .calendar td.cell.c-arc.a-14, .calendar td.cell.c-arc.a-21 { background: #d1fae5; color: #065f46; }
    .calendar td.cell.c-arc.a-4, .calendar td.cell.c-arc.a-16       { background: #fee2e2; color: #991b1b; }
    .calendar td.cell.c-arc.a-5, .calendar td.cell.c-arc.a-9, .calendar td.cell.c-arc.a-22  { background: #ede9fe; color: #5b21b6; }
    .calendar td.cell.c-arc.a-6, .calendar td.cell.c-arc.a-17       { background: #fce7f3; color: #9d174d; }
    .calendar td.cell.c-arc.a-7                                     { background: #cffafe; color: #155e75; }
    .calendar td.cell.c-arc.a-8, .calendar td.cell.c-arc.a-11       { background: #fef3c7; color: #92400e; }
    .calendar td.cell.c-arc.a-10, .calendar td.cell.c-arc.a-19      { background: #fef9c3; color: #854d0e; }
    .calendar td.cell.c-arc.a-12, .calendar td.cell.c-arc.a-20      { background: #ccfbf1; color: #115e59; }
    .calendar td.cell.c-arc.a-15                                    { background: #ffe4e6; color: #9f1239; }
    .calendar td.cell.now { box-shadow: 0 0 0 2.5pt var(--gold), 0 4px 12px rgba(217,119,6,0.25); z-index: 2; }
    .calendar-legend { display: flex; flex-wrap: wrap; gap: 8mm; font-size: 9pt; margin: 1mm 0 5mm; color: var(--ink-3); }
    .calendar-legend .swatch { display: inline-block; width: 12pt; height: 12pt; border-radius: 3pt; margin-right: 4pt; vertical-align: middle; }
    .calendar-legend .now-mark { display: inline-block; width: 12pt; height: 12pt; border-radius: 3pt; box-shadow: 0 0 0 2pt var(--gold); margin-right: 4pt; vertical-align: middle; }

    /* Position-based arcana colors (соответствуют точкам матрицы) */
    .n-red       { background: linear-gradient(135deg, #f87171, #dc2626); }        /* углы ромба: финансы, хвост */
    .n-orange    { background: linear-gradient(135deg, #fb923c, #ea580c); }        /* входы каналов: c1, d1 */
    .n-neutral   { background: linear-gradient(135deg, #ffffff, #e2e8f0); color: #334155 !important; text-shadow: none !important; border: 1pt solid #cbd5e1; }
    .n-purple    { background: linear-gradient(135deg, #a78bfa, #7c3aed); }        /* углы ромба: визитка, талант */
    .n-darkblue  { background: linear-gradient(135deg, #2563eb, #1e3a8a); }        /* подточки на оси, ближе к углу (a2, b2) */
    .n-blue      { background: linear-gradient(135deg, #60a5fa, #2563eb); }        /* подточки на оси, ближе к центру (a1, b1) */
    .n-green     { background: linear-gradient(135deg, #4ade80, #16a34a); }        /* третья подточка (wpoint, xpoint) */
    .n-yellow    { background: linear-gradient(135deg, #fde047, #eab308); }        /* центр e */
    .n-gold      { background: linear-gradient(135deg, #fcd34d, #d97706); }        /* legacy alias */

    /* Health row colors (вся строка одного цвета чакры) */
    .health-table td.h-sah .h-arc  { background: linear-gradient(135deg, #c4b5fd, #8b5cf6); }
    .health-table td.h-ajn .h-arc  { background: linear-gradient(135deg, #a5b4fc, #4f46e5); }
    .health-table td.h-vis .h-arc  { background: linear-gradient(135deg, #93c5fd, #2563eb); }
    .health-table td.h-ana .h-arc  { background: linear-gradient(135deg, #6ee7b7, #10b981); }
    .health-table td.h-man .h-arc  { background: linear-gradient(135deg, #fcd34d, #d97706); }
    .health-table td.h-svd .h-arc  { background: linear-gradient(135deg, #fb923c, #ea580c); }
    .health-table td.h-mul .h-arc  { background: linear-gradient(135deg, #fda4af, #be185d); }
    .health-table tr.row-sah td { background: rgba(139,92,246,0.04); }
    .health-table tr.row-ajn td { background: rgba(79,70,229,0.04); }
    .health-table tr.row-vis td { background: rgba(37,99,235,0.04); }
    .health-table tr.row-ana td { background: rgba(16,185,129,0.04); }
    .health-table tr.row-man td { background: rgba(217,119,6,0.05); }
    .health-table tr.row-svd td { background: rgba(234,88,12,0.04); }
    .health-table tr.row-mul td { background: rgba(190,24,93,0.04); }

    /* Math formula style (для предназначений) */
    .formula { display: inline-block; padding: 2pt 8pt; background: rgba(124,58,237,0.06); border-radius: 6pt; font-size: 9pt; font-family: 'JetBrains Mono', 'Courier New', monospace; color: var(--purple); font-weight: 600; letter-spacing: 0.02em; margin-top: 4pt; }
    .formula strong { color: var(--ink-1); font-weight: 800; }

    /* ToC */
    .toc { list-style: none; counter-reset: tocnum; margin-top: 3mm; padding-left: 0; }
    .toc li { counter-increment: tocnum; padding: 1.5mm 0; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: 24pt 1fr 28pt; gap: 4mm; align-items: center; }
    .toc li::before { content: counter(tocnum, decimal-leading-zero); font-family: 'Outfit', sans-serif; background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 14pt; font-weight: 800; }
    .toc li > a { display: contents; color: inherit; text-decoration: none; cursor: pointer; }
    .toc li:hover { background: var(--purple-bg); border-radius: 6pt; }
    .toc li:hover .toc-title { color: var(--purple); }
    .toc li:hover .toc-pg { color: var(--purple); }
    @media print { .toc li:hover { background: transparent; } }
    html { scroll-behavior: smooth; }
    .toc-title { font-family: 'Outfit', sans-serif; font-size: 11pt; font-weight: 700; color: var(--ink-1); line-height: 1.25; }
    .toc-title .small { display: block; font-family: 'Inter', sans-serif; font-size: 8pt; color: var(--ink-4); margin-top: 1pt; font-weight: 500; line-height: 1.3; }
    .toc-pg { text-align: right; font-size: 9.5pt; color: var(--ink-4); font-variant-numeric: tabular-nums; font-weight: 700; }

    /* Channel key */
    .channel-key { display: grid; gap: 4mm; margin: 3mm 0; }
    .channel-item { position: relative; display: grid; grid-template-columns: 72pt 1fr; gap: 4mm; align-items: center; padding: 2.5mm 5mm; border-radius: 10pt; border: 1px solid var(--line); background: white; }
    .channel-item:not(:last-child)::after {
      content: '↓';
      position: absolute;
      left: 36pt;
      bottom: -4mm;
      transform: translateX(-50%);
      width: 18pt;
      height: 18pt;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13pt;
      font-weight: 900;
      color: var(--red);
      background: white;
      border: 1.5px solid var(--red-soft);
      border-radius: 50%;
      z-index: 2;
      line-height: 1;
    }
    .channel-tier { font-family: 'Outfit', sans-serif; font-size: 11pt; font-weight: 800; text-align: center; padding: 3mm 0; border-radius: 10pt; letter-spacing: 0.05em; }
    .channel-tier.block { background: var(--red-soft); color: var(--red); }
    .channel-tier.path { background: var(--purple-soft); color: var(--purple); }
    .channel-tier.result { background: var(--emerald-soft); color: var(--emerald); }
    .channel-content { display: flex; align-items: flex-start; gap: 10pt; }
    .channel-content .arcana-num { width: 30pt; height: 30pt; font-size: 14pt; }
    .channel-content h5 { font-family: 'Outfit', sans-serif; font-size: 12pt; font-weight: 800; color: var(--ink-1); margin-bottom: 2pt; }
    .channel-content p { font-size: 9.5pt; margin: 0; line-height: 1.5; }

    /* Resonances */
    .resonance {
      padding: 2.5mm 5mm; border-radius: 10pt; margin: 1.5mm 0;
      border: 1px solid var(--line); background: var(--bg);
      display: grid; grid-template-columns: 36pt 1fr; gap: 9pt; align-items: start;
    }
    .resonance.strong {
      background: linear-gradient(135deg, var(--gold-soft), rgba(255,255,255,0.6));
      border-color: var(--gold-light);
    }
    .resonance .arcana-num { width: 38pt; height: 38pt; font-size: 17pt; }
    .resonance-head { display: flex; align-items: baseline; justify-content: space-between; gap: 5mm; margin-bottom: 1.5mm; }
    .resonance-name { font-family: 'Outfit', sans-serif; font-size: 13pt; font-weight: 800; color: var(--ink-1); }
    .resonance-count { font-size: 8.5pt; color: var(--gold); font-weight: 700; letter-spacing: 0.08em; }
    .resonance-positions { display: flex; flex-wrap: wrap; gap: 3pt; margin-bottom: 1.5mm; }
    .resonance-pos {
      display: inline-block; padding: 1.5pt 7pt; background: var(--purple-soft);
      color: var(--purple); border-radius: 999pt; font-size: 8pt; font-weight: 700;
    }
    .resonance-insight { font-size: 9.5pt; line-height: 1.45; color: var(--ink-3); font-style: italic; }

    /* Closer cards */
    .closer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; margin: 4mm 0; align-items: stretch; }
    .closer-card { padding: 5mm 6mm; border-radius: 16pt; display: flex; flex-direction: column; }
    .closer-card.actions { background: linear-gradient(135deg, var(--emerald-soft) 0%, rgba(255,255,255,0.4) 100%); border: 1px solid rgba(16,185,129,0.18); }
    .closer-card.dangers { background: linear-gradient(135deg, var(--red-soft) 0%, rgba(255,255,255,0.4) 100%); border: 1px solid rgba(220,38,38,0.18); }
    .closer-card h4 { font-family: 'Outfit', sans-serif; font-size: 15pt; font-weight: 800; margin-bottom: 3mm; display: flex; align-items: center; gap: 8pt; }
    .closer-card.actions h4 { color: var(--emerald); }
    .closer-card.dangers h4 { color: var(--red); }
    /* Grid 3 равных строк → 1/2/3 в левой колонке совпадают по высоте с 1/2/3 в правой. */
    .closer-card ol { list-style: none; counter-reset: closeri; flex: 1; display: grid; grid-template-rows: repeat(3, 1fr); gap: 0; }
    .closer-card ol li { counter-increment: closeri; padding: 5pt 0 5pt 32pt; position: relative; font-size: 10pt; line-height: 1.6; color: var(--ink-2); }
    .closer-card ol li::before { content: counter(closeri); position: absolute; left: 0; top: 4pt; width: 22pt; height: 22pt; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; font-size: 11pt; font-weight: 800; color: white; }
    .closer-card.actions ol li::before { background: var(--grad-emerald); }
    .closer-card.dangers ol li::before { background: var(--grad-rose); }

    /* Next */
    .next { margin: 6mm 0; }
    .next-item { display: grid; grid-template-columns: 64pt 1fr 84pt; gap: 6mm; align-items: center; padding: 7mm 0; border-bottom: 1px solid var(--line-2); }
    .next-item:last-child { border-bottom: none; }
    .next-tier { font-family: 'Outfit', sans-serif; font-size: 16pt; font-weight: 800; text-align: center; padding: 6mm 0; border-radius: 14pt; background: var(--grad-brand); color: white; box-shadow: 0 4px 12px rgba(124,58,237,0.25); }
    .next-content h5 { font-family: 'Outfit', sans-serif; font-size: 15pt; font-weight: 800; color: var(--ink-1); margin-bottom: 3pt; }
    .next-content p { font-size: 10pt; margin: 0; line-height: 1.55; }
    .next-price { text-align: right; font-family: 'Outfit', sans-serif; font-size: 16pt; font-weight: 800; color: var(--purple); }

    /* Epilogue */
    .epilogue { justify-content: center; align-items: center; text-align: center; }
    .epilogue .hero { font-family: 'Outfit', sans-serif; font-size: 30pt; font-weight: 700; max-width: 145mm; margin: 0 auto 10mm; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink-1); }
    .epilogue .hero em { font-style: normal; background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .epilogue .signature { margin-top: 14mm; font-family: 'Outfit', sans-serif; font-size: 18pt; font-weight: 700; color: var(--purple); }
    .epilogue .signature-meta { font-size: 9pt; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4); margin-top: 3mm; font-weight: 600; }
    /* .epilogue {text-align: center} наследовался в footer — явно выравниваем влево */
    .epilogue > .page-footer { text-align: left; }

    /* Print */
    @media print {
      html, body { background: white; padding: 0; }
      .page { box-shadow: none; margin: 0; page-break-after: always; border-radius: 0; }
      .page::before { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
      * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    }
    @page { size: A4; margin: 0; }

    .mb-3 { margin-bottom: 3mm; } .mb-4 { margin-bottom: 4mm; } .mb-6 { margin-bottom: 6mm; } .mb-8 { margin-bottom: 8mm; }
    .mt-4 { margin-top: 3mm; } .mt-6 { margin-top: 4mm; } .mt-8 { margin-top: 5mm; }
    .mb-3 { margin-bottom: 2mm; } .mb-4 { margin-bottom: 2.5mm; } .mb-6 { margin-bottom: 3mm; }
    .center { text-align: center; }

    /* ═════════ Paywall page ═════════ */
    .page.paywall { background: linear-gradient(180deg, #fff 0%, var(--purple-bg) 100%); }
    .paywall-grid {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4mm;
      margin: 8mm 0 6mm;
      align-items: stretch;
    }
    .paywall-card {
      position: relative;
      background: #fff; border: 1px solid var(--line); border-radius: 14pt;
      padding: 7mm 5mm 6mm; display: flex; flex-direction: column;
      box-shadow: 0 6pt 22pt rgba(15,23,42,0.06);
    }
    .paywall-card.paywall-featured {
      border: 2pt solid var(--purple);
      box-shadow: 0 12pt 36pt rgba(124,58,237,0.22);
      transform: translateY(-6pt);
      background:
        radial-gradient(ellipse at top, rgba(124,58,237,0.06) 0%, transparent 60%),
        #fff;
      padding-top: 8mm;
    }
    .paywall-badge {
      position: absolute; top: -11pt; left: 50%; transform: translateX(-50%);
      background: var(--grad-brand); color: white;
      padding: 4pt 13pt; border-radius: 100pt;
      font-family: 'Outfit', sans-serif; font-size: 8.5pt; font-weight: 800;
      letter-spacing: 0.08em; white-space: nowrap;
      box-shadow: 0 4pt 14pt rgba(124,58,237,0.4);
    }
    .paywall-tier-name {
      font-family: 'Outfit', sans-serif; font-size: 10pt; font-weight: 800;
      color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase;
      margin-bottom: 4mm; min-height: 28pt; line-height: 1.25;
    }
    .paywall-featured .paywall-tier-name { color: var(--purple); }
    .paywall-price-row {
      display: flex; align-items: baseline; gap: 7pt;
      margin-bottom: 5mm; white-space: nowrap;
    }
    .paywall-price {
      font-family: 'Outfit', sans-serif; font-size: 26pt; font-weight: 900;
      color: var(--ink-1); line-height: 1; letter-spacing: -0.01em;
      white-space: nowrap;
    }
    .paywall-price .rub { font-size: 16pt; font-weight: 800; margin-left: 1pt; }
    .paywall-featured .paywall-price {
      background: var(--grad-brand); -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; background-clip: text;
    }
    .paywall-price-old {
      font-size: 11pt; color: var(--ink-5); text-decoration: line-through;
      font-weight: 600; white-space: nowrap;
    }
    .paywall-features { list-style: none; padding: 0; margin: 0 0 6mm; flex: 1; }
    .paywall-features li {
      display: flex; align-items: flex-start; gap: 6pt;
      font-size: 9.5pt; line-height: 1.45; color: var(--ink-2);
      padding: 3pt 0;
    }
    .paywall-check {
      color: var(--emerald); font-weight: 900; font-size: 10pt;
      flex-shrink: 0; line-height: 1.45;
    }
    .paywall-cta {
      text-align: center; padding: 11pt 10pt;
      background: var(--purple-bg); color: var(--purple);
      border: 1.5pt solid var(--purple-light); border-radius: 10pt;
      font-family: 'Outfit', sans-serif; font-size: 10.5pt; font-weight: 800;
      letter-spacing: 0.04em; white-space: nowrap;
    }
    .paywall-featured .paywall-cta {
      background: var(--grad-brand); color: #fff; border-color: transparent;
      box-shadow: 0 6pt 18pt rgba(124,58,237,0.4);
      font-size: 11pt;
    }
    .paywall-trust {
      display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4mm;
      padding: 4mm 6mm; background: #fff;
      border: 1px solid var(--line); border-radius: 12pt;
      box-shadow: 0 2pt 10pt rgba(15,23,42,0.04);
    }
    .paywall-trust-item {
      font-size: 9pt; font-weight: 600; color: var(--ink-3);
      text-align: center; line-height: 1.4;
    }

    /* ═════════ Demo recalc card — компактная элегантная форма ═════════ */
    .demo-card {
      width: 210mm; max-width: 100%; margin: 8mm auto 6mm;
      padding: 5mm 18mm; font-family: 'Inter', sans-serif;
      background:
        radial-gradient(ellipse at top left, rgba(124,58,237,0.06) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(217,119,6,0.04) 0%, transparent 55%),
        #ffffff;
      border: 1px solid var(--line);
      border-radius: 16pt;
      box-shadow: 0 6pt 24pt rgba(15,23,42,0.05);
      position: relative; overflow: hidden;
    }
    /* Плоский layout (refactor 2026-05-27): все 3 элемента в одну строку.
       Старый двухуровневый layout (.demo-card-left как обёртка) приводил к wrap
       на промежуточных ширинах — gender уходил под date+submit. */
    .demo-card-form {
      display: flex; flex-wrap: nowrap;
      gap: 8pt; align-items: end;
    }
    .demo-card-left { display: contents; }  /* «проваливаем» обёртку — дети становятся прямыми flex-items */
    .demo-field { display: flex; flex-direction: column; gap: 3pt; min-width: 0; }
    .demo-field.date { flex: 1 1 auto; min-width: 120pt; }
    .demo-field:not(.date) { flex: 0 0 auto; }
    .demo-field-label {
      font-size: 7.5pt; font-weight: 700; color: var(--ink-5);
      letter-spacing: 0.14em; text-transform: uppercase;
      text-align: center;
    }
    /* Masked text input для даты (рефактор 2026-05-27).
       type="text" + inputmode="numeric" + JS-маска __.__.____
       Одинаковый UI на ПК/iOS/Android, без ::-webkit-* костылей. */
    .demo-input {
      padding: 0 11pt; border: 1pt solid var(--line); border-radius: 9pt;
      font-family: 'Outfit', sans-serif; font-size: 11pt; font-weight: 600;
      color: var(--ink-1); background: white; cursor: text;
      transition: border-color 0.18s, box-shadow 0.18s;
      height: 30pt; width: 100%;
      line-height: 28pt;
      text-align: center;
      letter-spacing: 0.06em;
      font-variant-numeric: tabular-nums;
      box-sizing: border-box; min-width: 0; max-width: 100%;
      -webkit-appearance: none; appearance: none;
      -webkit-text-size-adjust: 100%;
    }
    .demo-input::placeholder {
      color: var(--ink-4); font-weight: 600;
      letter-spacing: 0.06em; opacity: 1;
    }
    .demo-input:hover { border-color: var(--purple-light); }
    .demo-input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3pt rgba(124,58,237,0.10); }
    .demo-gender { display: inline-flex; background: var(--purple-bg); border: 1pt solid var(--line); border-radius: 9pt; padding: 2pt; height: 30pt; box-sizing: border-box; }
    .demo-gender input { position: absolute; opacity: 0; pointer-events: none; }
    .demo-gender label {
      padding: 0 12pt; display: inline-flex; align-items: center; gap: 4pt;
      border-radius: 7pt;
      font-family: 'Outfit', sans-serif; font-size: 10.5pt; font-weight: 700;
      color: var(--ink-4); cursor: pointer; transition: all 0.18s; user-select: none;
    }
    .demo-gender .sym {
      font-size: 14pt; font-weight: 900;
      -webkit-text-stroke: 0.5pt currentColor;
      line-height: 1; transform: translateY(-0.5pt);
    }
    .demo-gender input:checked + label {
      background: white; color: var(--purple);
      box-shadow: 0 1pt 4pt rgba(15,23,42,0.08);
    }
    /* Submit-кнопка «Пересчитать»: на десктопе — «Пересчитать →», на мобиле — только → */
    .demo-submit {
      padding: 0 18pt; height: 30pt;
      background: var(--grad-brand); color: white;
      border: none; border-radius: 9pt;
      font-family: 'Outfit', sans-serif; font-size: 10pt; font-weight: 800;
      letter-spacing: 0.06em; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 3pt 12pt rgba(124,58,237,0.28), inset 0 1pt 0 rgba(255,255,255,0.25);
      transition: all 0.18s ease; white-space: nowrap;
      display: inline-flex; align-items: center; justify-content: center; gap: 6pt;
      flex-shrink: 0;
    }
    .demo-submit-text { /* виден по умолчанию (десктоп) */ }
    .demo-submit:hover { transform: translateY(-1pt); box-shadow: 0 6pt 18pt rgba(124,58,237,0.38), inset 0 1pt 0 rgba(255,255,255,0.25); }
    .demo-submit:active { transform: translateY(0); }
    .demo-submit-arrow { font-size: 13pt; line-height: 1; transition: transform 0.18s; }
    .demo-submit:hover .demo-submit-arrow { transform: translateX(2pt); }

    @media print { .demo-card { display: none !important; } }

    /* ═════════════════════════════════════════════════════════════════
       МОБИЛЬНАЯ АДАПТИВКА (≤900px) — 80% юзеров с мобилы
       A4-ограничение снимается: height auto, overflow visible.
       Боковые поля минимизированы для удобства чтения.
       Колонки стэкаются 1fr вместо grid.
       Page-footer + page-number оставлены — для понимания «глав».
       ═════════════════════════════════════════════════════════════════ */
    @media (max-width: 900px) {
      body { padding: 16px 0; background: #eaeaf0; }

      /* Страница — full-width, авто-высота, минимум полей, ОТЧЁТЛИВЫЙ зазор между */
      .page {
        width: 100%; max-width: 100%; min-width: 0;
        height: auto; min-height: 0; overflow: visible;
        margin: 0 auto 32px;
        padding: 18px 14px 60px;
        border-radius: 12px;
        box-shadow: 0 4px 18px rgba(15,23,42,0.10);
      }
      .page::before { height: 3px; }

      /* Демо-карточка пересчёта */
      .demo-card {
        width: calc(100% - 16px); margin: 8px auto 12px;
        padding: 14px 12px;
        border-radius: 12pt;
        box-sizing: border-box; overflow: hidden;
      }
      /* Мобильная форма: всё в одну строку [date(flex)][♂♀][→].
         Простой плоский layout — без 2-уровневых обёрток. */
      .demo-card-form {
        flex-wrap: nowrap;
        align-items: stretch; gap: 6pt;
        width: 100%; min-width: 0;
      }
      .demo-field-label { display: none; } /* скрываем лейблы — экономим высоту */
      .demo-field { min-width: 0; gap: 0; }
      .demo-field.date { flex: 1 1 auto; min-width: 0; }
      .demo-input { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; height: 36pt; }
      .demo-gender { justify-content: center; max-width: 100%; height: 36pt; padding: 2pt; flex-shrink: 0; }
      .demo-gender label { padding: 0 7pt; min-width: 26pt; font-size: 9.5pt; }
      /* Submit на mobile — квадратная иконка → без текста «Пересчитать» */
      .demo-submit { width: 36pt; height: 36pt; padding: 0; }
      .demo-submit-text { display: none; }
      .demo-submit-arrow { font-size: 14pt; }

      /* Cover — больше воздуха сверху/снизу */
      .cover { padding: 28px 14px 70px !important; }
      .cover-top { gap: 18px; flex-wrap: wrap; align-items: center; padding-bottom: 14px; }
      .cover-brand { gap: 10pt; }
      .cover-meta { text-align: right; font-size: 9pt; }
      .cover-title { font-size: 48pt !important; line-height: 0.95 !important; margin-bottom: 4mm; margin-top: 18mm; }
      .cover-archetype-card { padding: 7mm 6mm !important; margin-top: 14mm; }
      .cover-archetype-name { font-size: 26pt !important; }
      .cover-archetype-tagline { font-size: 11pt !important; }
      .cover-bottom { margin-top: 18mm; margin-bottom: 32px; padding-top: 14mm; }

      /* Page header — больше воздуха */
      .page-header { padding-bottom: 16px; margin-bottom: 22px; gap: 14px; }
      .page-section-name { display: block; margin-bottom: 8px; line-height: 1.3; }
      .page-section-num { width: 38pt; height: 38pt; font-size: 14pt; }
      h2.section-title { font-size: 19pt; margin-top: 4mm !important; line-height: 1.2; }

      /* Footer/Number: позиция абсолютная, ниже контента */
      .page-footer {
        position: absolute; bottom: 14px; left: 14px; right: 70px;
        font-size: 8.5pt;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .page-number { position: absolute; bottom: 14px; right: 14px; font-size: 8.5pt; }

      /* Lead, paragraphs — больше дыхания */
      .lead { font-size: 12pt; line-height: 1.6; margin-bottom: 18px; }
      p { font-size: 11pt; line-height: 1.65; margin-bottom: 10pt; }
      h3 { font-size: 13.5pt; margin-bottom: 10pt; margin-top: 18px; }
      h3:first-child { margin-top: 0; }

      /* ToC */
      .toc li { grid-template-columns: 22pt 1fr 28pt; gap: 8pt; padding: 4pt 0; }
      .toc li::before { font-size: 13pt; }
      .toc-title { font-size: 11pt; }
      .toc-title .small { font-size: 8pt; }

      /* Insights (3 откровения на стр 3) — воздуха */
      .insight { padding: 18px 18px; margin: 14px 0; grid-template-columns: 28pt 1fr; gap: 10pt 14pt; }
      .insight-icon { width: 28pt; height: 28pt; font-size: 14pt; }
      .insight-title { font-size: 14pt; margin-bottom: 4pt; line-height: 1.25; }
      .insight-body { font-size: 11pt; line-height: 1.6; }

      /* Hero phrase */
      .hero-phrase { padding: 22px 18px; margin: 14px 0; }
      .hero-phrase-text { font-size: 14pt; line-height: 1.35; }

      /* Octogram-wrap (матрица SVG) */
      .octogram-wrap { padding: 0 !important; }
      .octogram-wrap svg { width: 100%; height: auto; }

      /* Point-row на мобиле — карточка с картой Таро слева и текстом справа */
      .point-row {
        grid-template-columns: 68pt 1fr;
        gap: 12px;
        padding: 16px 12px 22px;
        align-items: start;
        background: linear-gradient(135deg, rgba(124,58,237,0.025), rgba(255,255,255,0));
        border: 1px solid var(--line-2);
        border-radius: 14px;
        margin: 12px 0;
      }
      .point-row:last-child { border-bottom: 1px solid var(--line-2); }
      .point-label-block {
        padding-top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-align: center;
        width: 68pt;
      }
      .point-label-block .point-label { font-size: 7.5pt; margin-bottom: 0; letter-spacing: 0.1em; line-height: 1.15; }
      .point-label-block .point-sublabel { font-size: 7.5pt; margin-bottom: 6px; line-height: 1.15; }
      .point-card-wrap { flex-shrink: 0; width: 64pt; margin-top: 2px; }
      .point-card-wrap .point-card { width: 64pt; }
      .point-card-wrap .arcana-num {
        position: absolute; bottom: -10pt; right: 50%;
        transform: translateX(50%);
        width: 26pt; height: 26pt; font-size: 11pt;
      }
      .point-content {
        padding-left: 0;
        border-left: none;
        margin-left: 0;
        align-self: start;
      }
      .point-content.accent-purple,
      .point-content.accent-red,
      .point-content.accent-yellow,
      .point-content.accent-orange,
      .point-content.accent-neutral {
        border-left: 3pt solid transparent;
        padding-left: 10pt;
      }
      .point-content.accent-purple  { border-left-color: #a78bfa; }
      .point-content.accent-red     { border-left-color: #f87171; }
      .point-content.accent-yellow  { border-left-color: #fbbf24; }
      .point-content.accent-orange  { border-left-color: #fb923c; }
      .point-content.accent-neutral { border-left-color: #cbd5e1; }
      .point-name { font-size: 15pt; margin-bottom: 8pt; line-height: 1.25; }

      /* Pm-grid (Небо/Земля) */
      .pm-grid { grid-template-columns: 1fr; gap: 8px; }

      /* Stat-row (3 cells) */
      .stat-row { grid-template-columns: 1fr; gap: 8px; }

      /* Channel-key items — больше воздуха */
      .channel-key { gap: 22px; margin: 14px 0; }
      .channel-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 18px;
      }
      .channel-item:not(:last-child)::after {
        left: 50%;
        bottom: -14px;
        width: 22px;
        height: 22px;
        font-size: 14px;
      }
      .channel-tier { padding: 10px 16px; font-size: 11pt; }
      .channel-content { gap: 12pt; }
      .channel-content h5 { font-size: 12.5pt; margin-bottom: 6pt; line-height: 1.3; }
      .channel-content p { font-size: 11pt; line-height: 1.6; }

      /* Programs */
      .program { padding: 18px 18px; margin: 14px 0; }
      .program-head { flex-direction: column; align-items: flex-start; gap: 6pt; margin-bottom: 12pt; padding-bottom: 10pt; }
      .program-code { font-size: 20pt; }
      .program-zone { text-align: left; }
      .program-name { font-size: 14pt; margin-bottom: 8pt; line-height: 1.3; }
      .program-essence { font-size: 11pt; line-height: 1.6; margin-bottom: 10pt; }
      .program-resource { font-size: 11pt; padding-top: 10pt; line-height: 1.55; }

      /* Callouts */
      .callout { padding: 20px 18px; margin: 16px 0; }
      .callout-icon { font-size: 20pt; top: 14pt; right: 14pt; }
      .callout-label { margin-bottom: 8pt; }
      .callout-title { font-size: 14.5pt; padding-right: 34pt; margin-bottom: 8pt; line-height: 1.25; }
      .callout p { font-size: 11pt; line-height: 1.6; }

      /* Closer-grid */
      .closer-grid { grid-template-columns: 1fr; gap: 14px; margin: 14px 0; }
      .closer-card { padding: 20px 18px; }
      .closer-card h4 { font-size: 14.5pt; margin-bottom: 12pt; }
      .closer-card ol { gap: 10pt; }
      .closer-card li { font-size: 11pt; line-height: 1.6; padding: 6pt 0; }

      /* Resonances */
      .resonance { grid-template-columns: 38pt 1fr; padding: 16px 16px; gap: 12pt; margin: 10px 0; }
      .resonance-name { font-size: 12.5pt; }
      .resonance-head { flex-direction: column; align-items: flex-start; gap: 4pt; margin-bottom: 6pt; }
      .resonance-positions { margin-bottom: 6pt; }
      .resonance-insight { font-size: 10.5pt; line-height: 1.55; }

      /* Health table — компактные паддинги, не уходит за край */
      .health-table { font-size: 9pt; table-layout: fixed; width: 100%; }
      .health-table th { padding: 7pt 3pt; font-size: 7.5pt; letter-spacing: 0.04em; }
      .health-table td { padding: 7pt 3pt; }
      .health-table .chakra-cell { padding-left: 3pt; gap: 4pt; font-size: 10pt; }
      .health-table .chakra-cell > div { font-size: 9.5pt !important; }
      .health-table .h-arc { width: 22pt; height: 22pt; font-size: 10pt; }
      /* Архетипы (стр 16) — 5 колонок: чакра | аркан | право | блок | у тебя?
         Распределяем ширины так, чтобы текстовые колонки не клипались. */
      .archetype-table { table-layout: fixed; }
      .archetype-table th:nth-child(1),
      .archetype-table td:nth-child(1) { width: 30% !important; }   /* чакра */
      .archetype-table th:nth-child(2),
      .archetype-table td:nth-child(2) { width: 14% !important; }   /* аркан */
      .archetype-table th:nth-child(3),
      .archetype-table td:nth-child(3) { width: 24% !important; padding-left: 4pt !important; padding-right: 4pt !important; }   /* право */
      .archetype-table th:nth-child(4),
      .archetype-table td:nth-child(4) { width: 18% !important; padding-left: 4pt !important; padding-right: 4pt !important; }   /* блок */
      .archetype-table th:nth-child(5),
      .archetype-table td:nth-child(5) { width: 14% !important; padding-left: 2pt !important; padding-right: 2pt !important; }   /* у тебя? */
      .archetype-table th { font-size: 6.5pt !important; padding: 6pt 2pt !important; letter-spacing: 0.03em !important; line-height: 1.1; }
      .archetype-table td {
        vertical-align: middle; font-size: 9pt !important; line-height: 1.25; padding: 6pt 2pt !important;
        /* Правильные переносы по слогам через дефис (lang="ru" уже стоит на <html>) */
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
      }
      .archetype-table .chakra-cell { padding-left: 2pt !important; gap: 3pt !important; }
      .archetype-table .chakra-cell div { white-space: normal !important; line-height: 1.2; font-size: 9pt !important; }
      .archetype-table .chakra-dot { width: 10pt !important; height: 10pt !important; box-shadow: 0 0 0 1.5pt white, 0 0 0 2.5pt currentColor !important; }
      .archetype-table td > span[style*="white-space: nowrap"] {
        white-space: normal !important;
        font-size: 8pt !important;
        line-height: 1.2;
        display: inline-block;
      }

      /* 8 родовых талантов: 4×2 вместо 8×1 */
      .page > div[style*="grid-template-columns: repeat(8"] {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
      }

      /* Calendar 8×8 — компактнее */
      .calendar { font-size: 8pt; }
      .calendar td.row-label { width: 32pt; padding: 6pt 4pt; font-size: 7pt; }
      .calendar td.cell { padding: 4pt 2pt; }
      .calendar td.cell .age-num { font-size: 6pt; }
      .calendar td.cell .arc-num { font-size: 10pt; }
      .calendar td.cell .arc-name { font-size: 5.5pt; }
      .calendar-legend { gap: 12pt; font-size: 9pt; }

      /* 8 талантов рода */
      .page .center > .arcana-num { width: 36pt !important; height: 36pt !important; font-size: 15pt !important; }

      /* Rod-cells (4 родовые линии) */
      .rod-cell { padding: 12px 14px; }
      .rod-cell-name { font-size: 14pt; }

      /* Two ax of personality grid → stack */
      [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
      [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
      [style*="grid-template-columns: 1.2fr 1fr"] { grid-template-columns: 1fr !important; }
      [style*="grid-template-columns: 120pt"] { grid-template-columns: 1fr !important; }
      [style*="grid-template-columns: 170pt"] { grid-template-columns: 1fr !important; }

      /* Paywall */
      .paywall-grid { grid-template-columns: 1fr; gap: 16px; margin: 18px 0 12px; }
      .paywall-card { padding: 18px 18px; }
      .paywall-card.paywall-featured { transform: none; }
      .paywall-tier-name { min-height: 0; }
      .paywall-trust { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }

      /* Эпилог */
      .page.epilogue { padding: 30px 16px 50px; text-align: center; }
      .page.epilogue .hero { font-size: 16pt !important; }

      /* Скрыть подсказку «прокрутка», если есть */
      ::-webkit-scrollbar { width: 6px; }
    }

    /* Очень узкие экраны (≤480px) — телефоны */
    @media (max-width: 480px) {
      body { padding: 12px 0; }
      .page { padding: 16px 10px 60px; margin-bottom: 24px; border-radius: 10px; }
      /* Cover top — центровка на маленьких экранах */
      .cover-top {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
        gap: 14px;
      }
      .cover-brand { justify-content: center; }
      .cover-meta { text-align: center !important; }
      .cover-title-block { text-align: center; }
      .demo-card { width: calc(100% - 12px); padding: 12px 10px; }
      .cover-title { font-size: 38pt !important; }
      .cover-archetype-name { font-size: 22pt !important; }
      .channel-tier { padding: 6px 10px; font-size: 10pt; }
      .calendar { font-size: 7pt; border-spacing: 2px; table-layout: fixed; }
      .calendar td.row-label { width: 8%; padding: 2pt 1pt; font-size: 6pt; line-height: 1.0; letter-spacing: -0.04em; white-space: nowrap; }
      .calendar td.row-label .row-label-suffix { display: none; }
      .calendar td.cell { width: 11.5%; padding: 3pt 1pt; } /* (100 - 8) / 8 = 11.5% */
      .calendar td.cell .age-num { font-size: 5pt; }
      .calendar td.cell .arc-num { font-size: 9pt; }
      .calendar td.cell .arc-name { font-size: 5pt; line-height: 1.05; }
      .toc li { grid-template-columns: 18pt 1fr 24pt; gap: 6pt; }
      .health-table { font-size: 9pt; }
      .health-table th { padding: 6pt 2pt; font-size: 7pt; letter-spacing: 0.05em; }
      .health-table td { padding: 6pt 2pt; }
      .health-table .h-arc { width: 22pt; height: 22pt; font-size: 10pt; }
      /* Чакра-карточки: на мобиле колонки таблицы стекаются вертикально */
      .chakra-table, .chakra-table tbody, .chakra-table tr, .chakra-table td { display: block; width: 100% !important; }
      .chakra-table colgroup { display: none; }
      .chakra-table td { padding: 1mm 0 !important; border-top: none !important; }
      .chakra-table tr { border-top: 1px dotted rgba(0,0,0,0.10); padding: 2mm 0 1mm; }
      .chakra-table tr:first-child { border-top: none; padding-top: 0; }
      /* На мобиле колонок нет — скрываем thead тоже */
      .chakra-table thead { display: none; }
    }

    /* «Что почитать» — компактные карточки-ссылки на статьи арканов */
    .article-link-card {
      display: block;
      padding: 2.5mm 4mm; margin: 1mm 0;
      background: linear-gradient(135deg, var(--purple-bg) 0%, white 100%);
      border: 1px solid var(--purple-soft); border-radius: 7pt;
      text-decoration: none; color: inherit;
      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
      min-width: 0;
    }
    .article-link-card:hover {
      transform: translateY(-1pt);
      box-shadow: 0 6pt 18pt rgba(124,58,237,0.14);
      border-color: var(--purple);
    }
    .article-link-arc {
      display: flex; align-items: center; gap: 5pt;
      margin-bottom: 1.5mm;
    }
    .article-link-name {
      font-size: 7.5pt; color: var(--purple);
      text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      min-width: 0;
    }
    .article-link-arc .arcana-num.sm { width: 18pt; height: 18pt; font-size: 9.5pt; }
    .article-link-title {
      font-family: 'Outfit', sans-serif; font-size: 10.5pt; font-weight: 800;
      color: var(--ink-1); line-height: 1.2; margin-bottom: 1mm;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .article-link-url {
      font-size: 7pt; color: var(--ink-4);
      font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .article-link-card:hover .article-link-url { color: var(--purple); }

    /* ═══════════════════════════════════════════════════════════
       PAID ACTIONS — inline-карточка для платной версии (PDF + Share)
       На месте формы «Пересчитать», без sticky (чтобы не перекрывать бургер хедера)
       ═══════════════════════════════════════════════════════════ */
    /* Стили один-в-один с .demo-card (форма пересчёта в free) */
    .paid-actions-wrap {
      width: 210mm; max-width: 100%; margin: 8mm auto 6mm;
      padding: 5mm 18mm; font-family: 'Inter', sans-serif;
      background:
        radial-gradient(ellipse at top left, rgba(124,58,237,0.06) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(217,119,6,0.04) 0%, transparent 55%),
        #ffffff;
      border: 1px solid var(--line);
      border-radius: 16pt;
      box-shadow: 0 6pt 24pt rgba(15,23,42,0.05);
      position: relative; overflow: hidden;
      box-sizing: border-box;
    }
    .paid-actions-eyebrow {
      display: flex; align-items: center; justify-content: center; gap: 7pt;
      font-size: 7.5pt; font-weight: 700; color: var(--ink-5);
      letter-spacing: 0.14em; text-transform: uppercase;
      margin-bottom: 8pt;
    }
    .paid-actions-eyebrow::before,
    .paid-actions-eyebrow::after {
      content: ''; flex: 0 1 36pt;
      height: 1px; background: var(--line);
    }
    .paid-actions {
      display: flex; align-items: center; justify-content: center;
      gap: 10pt; flex-wrap: wrap;
    }
    /* Базовая кнопка = .demo-submit, но white-вариант для secondary */
    .paid-actions-btn {
      padding: 0 18pt; height: 30pt;
      display: inline-flex; align-items: center; gap: 7pt;
      background: white; color: var(--ink-1);
      border: 1pt solid var(--line); border-radius: 9pt;
      font-family: 'Outfit', sans-serif; font-size: 10pt; font-weight: 800;
      letter-spacing: 0.06em; text-transform: uppercase;
      cursor: pointer; white-space: nowrap;
      transition: all 0.18s ease;
      text-decoration: none;
    }
    .paid-actions-btn:hover {
      border-color: var(--purple-light);
      color: var(--purple);
      transform: translateY(-1pt);
      box-shadow: 0 3pt 10pt rgba(124,58,237,0.10);
    }
    .paid-actions-btn.primary {
      background: var(--grad-brand); color: white;
      border-color: transparent;
      box-shadow: 0 3pt 12pt rgba(124,58,237,0.28), inset 0 1pt 0 rgba(255,255,255,0.25);
    }
    .paid-actions-btn.primary:hover {
      color: white; border-color: transparent;
      transform: translateY(-1pt);
      box-shadow: 0 6pt 18pt rgba(124,58,237,0.38), inset 0 1pt 0 rgba(255,255,255,0.25);
    }
    .paid-actions-icon {
      font-size: 12pt; line-height: 1;
    }
    .paid-actions-label { white-space: nowrap; }

    /* Promo card — личный купон -50% для повторных покупок */
    .paid-promo-card {
      position: relative;
      width: 210mm; max-width: 100%; margin: 6mm auto 6mm;
      padding: 5mm 12mm;
      display: flex; align-items: center; gap: 14pt;
      background:
        linear-gradient(135deg, rgba(236,72,153,0.06) 0%, rgba(124,58,237,0.10) 50%, rgba(99,102,241,0.06) 100%),
        #ffffff;
      border: 1px solid rgba(124,58,237,0.22);
      border-radius: 16pt;
      box-shadow: 0 6pt 24pt rgba(124,58,237,0.10);
      box-sizing: border-box;
      font-family: 'Inter', sans-serif;
    }
    /* Крестик закрытия в правом верхнем углу */
    .paid-promo-close {
      position: absolute; top: 8pt; right: 8pt;
      width: 22pt; height: 22pt; padding: 0; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.7); color: var(--ink-4);
      border: 1px solid rgba(124,58,237,0.15); border-radius: 50%;
      cursor: pointer; font-size: 11pt; font-weight: 600;
      transition: all 0.18s ease;
    }
    .paid-promo-close:hover {
      background: white; color: var(--purple);
      border-color: var(--purple); transform: scale(1.06);
    }
    .paid-promo-icon {
      flex-shrink: 0; width: 42pt; height: 42pt;
      display: flex; align-items: center; justify-content: center;
      font-size: 22pt;
      background: linear-gradient(135deg, var(--purple), #ec4899);
      border-radius: 50%;
      box-shadow: 0 4pt 12pt rgba(124,58,237,0.30);
    }
    .paid-promo-body { flex: 1; min-width: 0; }
    .paid-promo-eyebrow {
      font-size: 7.5pt; font-weight: 700; color: var(--purple);
      letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 3pt;
    }
    .paid-promo-title {
      font-family: 'Outfit', 'Inter', sans-serif;
      font-size: 13pt; font-weight: 800; color: var(--ink-1);
      line-height: 1.25; margin-bottom: 3pt;
    }
    .paid-promo-title strong {
      font-family: 'Courier New', monospace; font-size: 14pt; font-weight: 800;
      padding: 1pt 7pt; background: white; color: var(--purple);
      border: 1px dashed rgba(124,58,237,0.40); border-radius: 5pt;
      letter-spacing: 0.04em; white-space: nowrap;
    }
    .paid-promo-sub {
      font-size: 9pt; color: var(--ink-3); line-height: 1.45;
    }
    .paid-promo-actions {
      flex-shrink: 0; display: flex; flex-direction: column; gap: 6pt;
    }
    .paid-promo-btn {
      padding: 0 16pt; height: 28pt;
      display: inline-flex; align-items: center; justify-content: center; gap: 5pt;
      background: white; color: var(--ink-1);
      border: 1pt solid rgba(124,58,237,0.30); border-radius: 8pt;
      font-family: 'Outfit', sans-serif; font-size: 9pt; font-weight: 800;
      letter-spacing: 0.06em; text-transform: uppercase;
      cursor: pointer; white-space: nowrap; text-decoration: none;
      transition: all 0.18s ease;
    }
    .paid-promo-btn:hover {
      border-color: var(--purple); color: var(--purple);
      transform: translateY(-1pt);
      box-shadow: 0 3pt 10pt rgba(124,58,237,0.18);
    }
    .paid-promo-btn.primary {
      background: var(--grad-brand); color: white; border-color: transparent;
      box-shadow: 0 3pt 12pt rgba(124,58,237,0.28);
    }
    .paid-promo-btn.primary:hover { color: white; }
    /* Mobile — карточка вертикальная, кнопки full-width */
    @media (max-width: 640px) {
      .paid-promo-card {
        flex-direction: column; align-items: stretch; gap: 12pt;
        padding: 14pt 16pt; text-align: center;
      }
      .paid-promo-icon { margin: 0 auto; }
      .paid-promo-title { font-size: 12pt; }
      .paid-promo-title strong { display: inline-block; margin-top: 3pt; }
      .paid-promo-actions { flex-direction: row; gap: 8pt; }
      .paid-promo-btn { flex: 1; min-width: 0; white-space: normal; line-height: 1.15; height: auto; min-height: 30pt; padding: 6pt 6pt; font-size: 8.5pt; letter-spacing: 0.02em; gap: 4pt; }
    }

    /* Toast — fixed по центру сверху, чтобы был всегда виден */
    .paid-toast {
      position: fixed; top: 84px; left: 50%; transform: translate(-50%, -8px);
      z-index: 9999;
      padding: 11pt 20pt;
      background: var(--ink-1); color: white;
      font-family: 'Outfit', sans-serif; font-size: 11pt; font-weight: 700;
      border-radius: 999pt;
      box-shadow: 0 14pt 36pt rgba(0,0,0,0.30);
      opacity: 0; pointer-events: none;
      transition: opacity 0.22s, transform 0.22s;
      display: inline-flex; align-items: center; gap: 8pt;
    }
    .paid-toast.show { opacity: 1; transform: translate(-50%, 0); }
    .paid-toast-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18pt; height: 18pt; border-radius: 50%;
      background: var(--emerald); color: white;
      font-size: 10pt; font-weight: 900;
    }

    @media (max-width: 600px) {
      /* Те же отступы что у .demo-card на мобиле */
      .paid-actions-wrap {
        width: calc(100% - 16px); margin: 8px auto 12px;
        padding: 14px 12px; border-radius: 12pt;
        overflow: hidden; box-sizing: border-box;
      }
      .paid-actions-eyebrow { font-size: 7pt; margin-bottom: 8pt; gap: 4pt; }
      /* Кнопки в одну строку — flex-row, без wrap, чтобы не стекались */
      .paid-actions { flex-wrap: nowrap; gap: 8pt; }
      .paid-actions-btn {
        flex: 1 1 0; min-width: 0;        /* делят ширину поровну */
        padding: 0 10pt; height: 36pt;
        font-size: 9.5pt; gap: 5pt;
        justify-content: center;
      }
      .paid-actions-icon { font-size: 12pt; }
      .paid-toast { top: 64px; font-size: 10pt; padding: 9pt 16pt; }
    }
    @media print {
      .paid-actions-wrap, .paid-toast, .pdf-loader { display: none !important; }
    }

    /* PDF generation overlay — показываем что идёт работа (5-15 сек) */
    .pdf-loader {
      position: fixed; inset: 0; z-index: 10000;
      background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      display: none; align-items: center; justify-content: center;
      padding: 20px;
      opacity: 0; transition: opacity 0.18s;
    }
    .pdf-loader.show { display: flex; opacity: 1; }
    .pdf-loader-card {
      background: white; border-radius: 14pt;
      padding: 32pt 38pt 26pt;
      max-width: 360pt; width: 100%;
      text-align: center;
      box-shadow: 0 24pt 64pt rgba(0,0,0,0.35);
    }
    .pdf-loader-ring {
      width: 48pt; height: 48pt; margin: 0 auto 18pt;
      border: 4px solid #ede9fe;
      border-top-color: var(--purple);
      border-radius: 50%;
      animation: pdf-spin 0.8s linear infinite;
    }
    @keyframes pdf-spin { to { transform: rotate(360deg); } }
    .pdf-loader-title {
      font-family: 'Outfit', sans-serif; font-size: 17pt; font-weight: 800;
      color: var(--ink-1); margin-bottom: 6pt; letter-spacing: -0.01em;
    }
    .pdf-loader-sub {
      font-size: 10pt; color: var(--ink-3); line-height: 1.5;
      transition: opacity 0.25s;
      min-height: 30pt;
    }
    .pdf-loader-meta {
      margin-top: 10pt; font-size: 8.5pt; color: var(--ink-4);
      letter-spacing: 0.04em;
    }

    /* ═══════════════════════════════════════════════════════════
       PAYWALL — fade-bottom (контент остаётся виден; обрезаем низ)
       ═══════════════════════════════════════════════════════════ */
    .paywall-blocked {
      position: relative;
      overflow: hidden;
    }
    /* Подход из legacy (проверенный): весь контент пейволла блюрится + opacity,
       заголовок, футер и номер страницы оставляем видимыми (контекст главы + нумерация). */
    .paywall-blocked > *:not(.paywall-overlay):not(.page-header):not(.page-footer):not(.page-number) {
      filter: blur(5px);
      opacity: 0.4;
      user-select: none;
      -webkit-user-select: none;
      pointer-events: none;
    }
    /* Футер и номер — поверх overlay (страница нумеруется всегда) */
    .paywall-blocked > .page-footer,
    .paywall-blocked > .page-number { z-index: 11; }
    /* Открытый «тизер» — конкретный блок видимый поверх блюра (наследуется на детей) */
    .paywall-blocked .paywall-exempt,
    .paywall-blocked .paywall-exempt * {
      filter: none !important;
      opacity: 1 !important;
      user-select: auto !important;
      -webkit-user-select: auto !important;
      pointer-events: auto !important;
    }
    .paywall-blocked .paywall-exempt { position: relative; z-index: 12; }
    .paywall-overlay {
      position: absolute;
      left: 0; right: 0; bottom: 18mm;   /* не закрываем нижнюю полосу с футером/нумерацией */
      /* Покрывает нижние ~60% — CTA в верхней части этой зоны */
      height: 60%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 36mm 14mm 0;        /* CTA в верхней трети закрытой зоны */
      pointer-events: none;
      z-index: 10;
      /* Лёгкий gradient сверху для мягкого перехода — основной блюр уже на контенте. */
      background: linear-gradient(
        180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.55) 30%,
        rgba(255,255,255,0.75) 60%,
        rgba(255,255,255,0.55) 100%
      );
    }
    .paywall-overlay-card {
      pointer-events: auto;       /* CTA-карточка кликабельна */
      max-width: 420pt;
      text-align: center;
      background: white;
      border-radius: 14pt;
      padding: 6mm 7mm 5mm;
      box-shadow: 0 12px 40px rgba(124,58,237,0.20), 0 0 0 1.5px var(--purple-soft);
      cursor: pointer;
    }
    .paywall-overlay-icon { font-size: 18pt; margin-bottom: 1mm; }
    .paywall-overlay-label {
      font-size: 7.5pt; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--purple); font-weight: 800; margin-bottom: 2mm;
    }
    .paywall-overlay-title {
      font-family: 'Outfit', sans-serif; font-size: 14pt; font-weight: 800;
      color: var(--ink-1); margin-bottom: 2mm; line-height: 1.2;
    }
    .paywall-overlay-desc {
      font-size: 9pt; line-height: 1.45; color: var(--ink-3); margin-bottom: 3mm;
    }
    .paywall-overlay-cta {
      display: inline-block;
      padding: 9pt 20pt;
      background: var(--grad-brand);
      color: white;
      font-family: 'Outfit', sans-serif;
      font-size: 10.5pt; font-weight: 800;
      border: none; border-radius: 7pt; cursor: pointer;
      box-shadow: 0 5pt 16pt rgba(124,58,237,0.32);
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .paywall-overlay-cta:hover { transform: translateY(-1pt); box-shadow: 0 7pt 20pt rgba(124,58,237,0.42); }
    .paywall-overlay-cta:active { transform: translateY(0); }
    .paywall-overlay-cta-old {
      text-decoration: line-through;
      opacity: 0.65;
      font-weight: 600;
      margin: 0 4pt 0 2pt;
    }
    .paywall-overlay-cta-new { font-weight: 900; }
    .paywall-overlay-meta {
      margin-top: 2mm; font-size: 7.5pt; color: var(--ink-4);
    }

    /* Модалка оплаты */
    .pw-modal-backdrop {
      position: fixed; inset: 0; z-index: 9000;
      background: rgba(15,23,42,0.55); backdrop-filter: blur(4px);
      display: none; align-items: center; justify-content: center; padding: 20px;
    }
    .pw-modal-backdrop.open { display: flex; }
    .pw-modal {
      background: white; border-radius: 16pt;
      max-width: 460pt; width: 100%;
      padding: 28pt 28pt 24pt;
      box-shadow: 0 24pt 64pt rgba(0,0,0,0.32);
      position: relative;
      max-height: 92vh; overflow-y: auto;
    }
    .pw-modal-close {
      position: absolute; top: 12pt; right: 12pt;
      width: 28pt; height: 28pt; border-radius: 50%;
      background: var(--line-2); border: none; cursor: pointer;
      font-size: 14pt; color: var(--ink-3); display: flex; align-items: center; justify-content: center;
    }
    .pw-modal-close:hover { background: var(--line); color: var(--ink-1); }
    .pw-modal-header { margin-bottom: 14pt; }
    .pw-modal-eyebrow {
      display: inline-block; padding: 3pt 10pt;
      background: var(--purple-bg); color: var(--purple);
      font-size: 7.5pt; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
      border-radius: 999pt; margin-bottom: 8pt;
    }
    .pw-modal-title {
      font-family: 'Outfit', sans-serif; font-size: 20pt; font-weight: 800;
      color: var(--ink-1); margin: 0 0 5pt; line-height: 1.15; letter-spacing: -0.01em;
    }
    .pw-modal-sub { font-size: 10pt; color: var(--ink-3); margin: 0; line-height: 1.5; }

    /* Список «что получишь» */
    .pw-modal-bullets {
      list-style: none; padding: 12pt 14pt; margin: 14pt 0;
      background: linear-gradient(135deg, rgba(124,58,237,0.04) 0%, rgba(236,72,153,0.03) 100%);
      border: 1px solid var(--purple-soft);
      border-radius: 10pt;
      font-size: 9.5pt; line-height: 1.5;
    }
    .pw-modal-bullets li {
      display: flex; align-items: flex-start; gap: 8pt;
      padding: 3pt 0; color: var(--ink-2);
    }
    .pw-bullet-icon {
      flex-shrink: 0; width: 16pt; height: 16pt; border-radius: 50%;
      background: var(--grad-brand); color: white;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 9pt; font-weight: 800;
    }

    /* Цена-блок: старая зачёркнутая + новая крупно + бейдж скидки */
    .pw-modal-price-row {
      display: flex; align-items: center; gap: 14pt; margin: 14pt 0 18pt;
      padding: 14pt 16pt; background: var(--purple-bg); border-radius: 10pt;
      border: 1px solid var(--purple-soft);
    }
    .pw-modal-price-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 1pt; }
    .pw-modal-price-old {
      font-size: 11pt; color: var(--ink-4); text-decoration: line-through; font-weight: 600;
    }
    .pw-modal-price {
      font-family: 'Outfit', sans-serif; font-size: 32pt; font-weight: 800;
      color: var(--purple); line-height: 1;
    }
    .pw-modal-price-meta {
      font-size: 9pt; color: var(--ink-3); line-height: 1.45;
      display: flex; flex-direction: column; gap: 4pt;
    }
    .pw-modal-price-badge {
      display: inline-block; align-self: flex-start;
      padding: 2pt 8pt; background: var(--grad-rose); color: white;
      font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 9pt;
      border-radius: 999pt; letter-spacing: 0.02em;
    }

    /* Форма */
    .pw-form-field { margin-bottom: 11pt; }
    .pw-form-label {
      display: flex; align-items: baseline; gap: 6pt;
      font-size: 8.5pt; color: var(--ink-3); text-transform: uppercase;
      letter-spacing: 0.06em; font-weight: 700; margin-bottom: 5pt;
    }
    .pw-form-hint {
      font-size: 7.5pt; color: var(--ink-4); text-transform: none;
      letter-spacing: 0; font-weight: 500;
    }

    /* Recipient picker — «Себе / Кому-то» */
    .pw-recipient { margin: 0 0 13pt; }
    .pw-recipient-tabs {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6pt;
      padding: 4pt; background: rgba(124,58,237,0.06);
      border-radius: 10pt;
    }
    .pw-tab {
      padding: 9pt 12pt; font-family: 'Inter', sans-serif;
      font-size: 10pt; font-weight: 700; cursor: pointer;
      background: transparent; border: none; border-radius: 7pt;
      color: var(--ink-3);
      transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    }
    .pw-tab:hover { color: var(--ink-2); }
    .pw-tab.active {
      background: white; color: var(--purple);
      box-shadow: 0 2px 6px rgba(124,58,237,0.10);
    }
    .pw-tab-icon { margin-right: 5pt; font-size: 11pt; }
    .pw-gift-hint {
      margin-top: 9pt; padding: 10pt 12pt;
      background: linear-gradient(135deg, rgba(236,72,153,0.06) 0%, rgba(124,58,237,0.06) 100%);
      border: 1px solid rgba(124,58,237,0.18); border-radius: 8pt;
      font-size: 9pt; line-height: 1.45; color: var(--ink-2);
    }
    .pw-gift-hint strong { color: var(--purple); }
    .pw-form-input {
      width: 100%; padding: 11pt 13pt; font-size: 11pt;
      border: 1.5px solid var(--line); border-radius: 8pt;
      font-family: 'Inter', sans-serif; color: var(--ink-1);
      box-sizing: border-box; background: white;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .pw-form-input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
    .pw-form-input::placeholder { color: var(--ink-5); }

    /* Промокод — collapsible */
    .pw-promo { margin: 0 0 11pt; }
    .pw-promo-toggle {
      display: flex; align-items: center; gap: 7pt;
      width: 100%; padding: 8pt 12pt; background: transparent;
      border: 1.5px dashed var(--line); border-radius: 8pt;
      font-family: 'Inter', sans-serif; font-size: 9.5pt; font-weight: 600;
      color: var(--ink-3); cursor: pointer; text-align: left;
      transition: border-color 0.15s, background 0.15s;
    }
    .pw-promo-toggle:hover { border-color: var(--purple); background: rgba(124,58,237,0.03); color: var(--ink-2); }
    .pw-promo-icon { font-size: 13pt; line-height: 1; }
    .pw-promo-label { flex: 1; }
    .pw-promo-chevron {
      font-size: 10pt; color: var(--ink-4);
      transition: transform 0.2s;
    }
    .pw-promo.open .pw-promo-toggle { border-style: solid; border-color: var(--purple); color: var(--purple); background: rgba(124,58,237,0.04); }
    .pw-promo.open .pw-promo-chevron { transform: rotate(180deg); }
    .pw-promo-field { margin-top: 8pt; }
    .pw-promo-input { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
    .pw-promo-input::placeholder { font-weight: 400; letter-spacing: 0; text-transform: none; }

    /* Чекбокс согласия 152-ФЗ */
    .pw-consent {
      display: flex; align-items: flex-start; gap: 9pt;
      padding: 10pt 12pt; margin: 4pt 0 12pt;
      background: var(--line-2); border-radius: 8pt;
      cursor: pointer;
      transition: background 0.15s;
    }
    .pw-consent:hover { background: rgba(124,58,237,0.05); }
    .pw-consent input[type="checkbox"] {
      flex-shrink: 0; width: 16pt; height: 16pt; margin: 1pt 0 0;
      accent-color: var(--purple); cursor: pointer;
    }
    .pw-consent-text {
      font-size: 8.5pt; line-height: 1.5; color: var(--ink-3);
    }
    .pw-consent-text a { color: var(--purple); text-decoration: underline; font-weight: 600; }
    .pw-consent-text a:hover { color: var(--indigo); }

    /* Кнопка оплаты */
    .pw-modal-submit {
      display: flex; align-items: center; justify-content: center; gap: 10pt;
      width: 100%; padding: 14pt; margin-top: 4pt;
      background: var(--grad-brand); color: white;
      font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13pt;
      border: none; border-radius: 9pt; cursor: pointer;
      box-shadow: 0 6pt 18pt rgba(124,58,237,0.32);
      transition: transform 0.15s, box-shadow 0.15s;
      letter-spacing: 0.01em;
    }
    .pw-modal-submit:hover { transform: translateY(-1pt); box-shadow: 0 9pt 24pt rgba(124,58,237,0.40); }
    .pw-modal-submit:active { transform: translateY(0); }
    .pw-modal-submit-arrow { font-size: 14pt; transition: transform 0.15s; }
    .pw-modal-submit:hover .pw-modal-submit-arrow { transform: translateX(3pt); }
    .pw-modal-submit:disabled { opacity: 0.7; cursor: wait; transform: none !important; }
    .pw-modal-submit.loading .pw-modal-submit-label::after { content: '…'; animation: pw-dots 1s steps(4) infinite; display: inline-block; }
    @keyframes pw-dots { 0% { content: '·'; } 25% { content: '··'; } 50% { content: '···'; } 75% { content: '··'; } 100% { content: '·'; } }
    .pw-form-error {
      margin: 6pt 0 8pt; padding: 9pt 12pt;
      background: rgba(220,38,38,0.08); color: var(--red);
      border: 1px solid rgba(220,38,38,0.2); border-radius: 7pt;
      font-size: 9pt; line-height: 1.45;
    }

    /* Безопасность */
    .pw-modal-secure {
      margin-top: 12pt; text-align: center; font-size: 8.5pt;
      color: var(--ink-4); line-height: 1.5;
    }
    .pw-modal-secure strong { color: var(--ink-2); }
    .pw-secure-icon { display: inline; margin-right: 3pt; }
    .pw-secure-meta { display: block; margin-top: 2pt; font-size: 7.5pt; color: var(--ink-5); }

    @media (max-width: 600px) {
      .paywall-overlay { padding: 8mm 6mm; }
      .paywall-overlay-card { padding: 6mm 5mm; }
      .paywall-overlay-title { font-size: 14pt; }

      /* === Модалка оплаты: компактнее на мобиле, чтобы вмещалась в 1 экран === */
      /* На мобиле скроллит САМ backdrop, а не внутренний .pw-modal. Иначе на iOS
         96vh меряется по «большому» вьюпорту (без нижней панели Safari) и не учитывает
         клавиатуру → при открытом промокоде кнопку «Оплатить» не долистать.
         Нижний padding (+ safe-area) даёт место прокрутить кнопку выше клавиатуры. */
      .pw-modal-backdrop {
        align-items: flex-start;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 14px 8px calc(48px + env(safe-area-inset-bottom, 0px));
      }
      .pw-modal { padding: 18pt 16pt 14pt; border-radius: 14pt; max-height: none; overflow: visible; }
      .pw-modal-close { width: 26pt; height: 26pt; top: 9pt; right: 9pt; font-size: 12pt; }

      .pw-modal-header { margin-bottom: 9pt; }
      .pw-modal-eyebrow { display: none; }              /* экономит ~22pt по высоте */
      .pw-modal-title { font-size: 17pt; margin-bottom: 3pt; }
      .pw-modal-sub { font-size: 9pt; line-height: 1.4; }

      .pw-modal-bullets {
        padding: 8pt 11pt; margin: 9pt 0;
        font-size: 8.5pt; line-height: 1.4; border-radius: 8pt;
      }
      .pw-modal-bullets li { padding: 2pt 0; gap: 7pt; }
      .pw-bullet-icon { width: 13pt; height: 13pt; font-size: 7.5pt; }

      .pw-modal-price-row { gap: 10pt; padding: 10pt 12pt; margin: 9pt 0 12pt; }
      .pw-modal-price-old { font-size: 10pt; }
      .pw-modal-price { font-size: 26pt; }
      .pw-modal-price-meta { font-size: 8pt; gap: 3pt; }
      .pw-modal-price-badge { font-size: 8pt; padding: 2pt 6pt; }

      .pw-form-field { margin-bottom: 8pt; }
      .pw-form-label { font-size: 8pt; margin-bottom: 3pt; gap: 5pt; }
      .pw-form-hint { font-size: 7pt; }
      .pw-form-input { padding: 9pt 11pt; font-size: 10.5pt; border-radius: 7pt; }

      .pw-promo { margin-bottom: 8pt; }
      .pw-promo-toggle { padding: 7pt 11pt; font-size: 9pt; gap: 6pt; }
      .pw-promo-icon { font-size: 11pt; }

      .pw-consent { padding: 8pt 10pt; margin: 2pt 0 9pt; gap: 7pt; }
      .pw-consent input[type="checkbox"] { width: 14pt; height: 14pt; }
      .pw-consent-text { font-size: 7.5pt; line-height: 1.4; }

      .pw-modal-submit { padding: 12pt; font-size: 12pt; border-radius: 8pt; gap: 8pt; }
      .pw-modal-submit-arrow { font-size: 13pt; }

      .pw-modal-secure { margin-top: 8pt; font-size: 7.5pt; line-height: 1.4; }
      .pw-secure-meta { font-size: 7pt; margin-top: 1pt; }
    }
    @media print {
      .paywall-blocked > *:not(.paywall-overlay) { filter: none !important; }
      .paywall-overlay, .pw-modal-backdrop, .ds-scroll-top { display: none !important; }
    }