/* ═══════════════════════════════════════════════════════════════════
   HV — ДИЗАЙН-СИСТЕМА НУМЕФАЙ
   ───────────────────────────────────────────────────────────────────
   Источник: живой стиль, отработанный итерациями Романа на проде —
   прогноз, кармический хвост (47 стр.), программы (275 стр.).
   Извлечено 06.08.2026 из _hv_styles.html.erb и трёх вьюх прогноза.

   ШРИФТЫ — 2 семейства (было 4): Playfair Display + Inter.
   Убраны Cormorant (нечитаемый курсив) и Outfit (на .66rem в капители
   неотличим от Inter).

   ⚠️ ПОДКЛЮЧЕНИЕ: layout ставит этот файл ПОСЛЕДНИМ в <head>. До выноса
   правила жили инлайновым <style> в теле и побеждали за счёт позиции.

   ⚠️ СКОУПЫ: страницы прогноза используют generic-имена (.pg, .hero,
   .cover) для РАЗНОГО. При склейке в один файл они сталкивались —
   .pg из отчёта перебивал .hero лендинга и сносил тёмную подложку.
   Поэтому каждый блок изолирован своим корневым классом.

   ПРАВИЛО: страницы НЕ заводят свой <style>. Новый компонент — сюда.
   ═══════════════════════════════════════════════════════════════════ */


:root{
    --hv-cream:#faf6ef; --hv-cream2:#f4ecdf; --hv-paper:#fffdf9;
    --hv-ink:#2a2130; --hv-ink2:#514357;
    --hv-ink3:#77697a;   /* было #8a7d8c — 3.61:1, не проходило */
    --hv-plum:#33163f; --hv-plum2:#4c2168; --hv-plum3:#6b3a8f;
    /* Золото разделено на ДВА токена — 06.08, по замеру контраста.
       Было одно #a8842b: 3.25:1 по кремовому листу при норме 4.5.
       Им набраны 259 ссылок-названий на одной странице программ —
       это и есть жалоба «шрифты нечитабельные».
         --hv-gold      текстовое, 4.69:1 — заголовки, ссылки, надзаголовки
         --hv-gold-deco декоративное, прежнее #a8842b — рамки, линейки,
                        иконки, крупный текст от 24px (там норма 3:1) */
    --hv-gold:#8a6a1c; --hv-gold-deco:#a8842b;
    --hv-goldb:#d9b45a; --hv-golds:#f3e6c6; --hv-goldl:#f6e7bd;
    /* Текст на тёмных сливовых поверхностях (хиро, плашка Нумии).
       Значения уже жили в .hv-hero и .hv-lead литералами, а статья
       успела разъехаться: там был #d6c3e2 вместо #e9d8f2. */
    --hv-on-dark:#f6ecff; --hv-on-dark2:#e9d8f2;
    --hv-rose:#c05f83; --hv-roses:#f7e2ea; --hv-lilac:#8266b3; --hv-lilacs:#ece4f6;
    --hv-line:#e7dcc9; --hv-lineg:rgba(168,132,43,.32);
    /* Смысловые цвета — «в ресурсе / в тени» и синий канал. Кочевали
       литералами по статьям, схеме позиций и mini-calc; после Ф0.1 — токены.
       Оба проходят по кремовой бумаге: 5.6:1 и 6.0:1. */
    --hv-plus:#3f6b52; --hv-minus:#8a5a4a; --hv-blue:#4a6fb8;
    /* Две семьи. script и label — псевдонимы: не переписываем разом 21 компонент. */
    --hv-serif:'Playfair Display',Georgia,serif;
    --hv-sans:'Inter',-apple-system,system-ui,sans-serif;
    --hv-script:var(--hv-serif);   /* было Cormorant Garamond */
    --hv-label:var(--hv-sans);     /* было Outfit */
  }
  .hvl{ padding:34px 0 110px; font-family:var(--hv-sans); color:var(--hv-ink); line-height:1.6;
    background:radial-gradient(circle at 15% 12%,rgba(192,95,131,.06),transparent 45%),radial-gradient(circle at 85% 80%,rgba(130,102,179,.07),transparent 45%),#efe6d8; }
  .hv-pg{ width:210mm; max-width:100%; margin:0 auto 22px; background:var(--hv-cream); position:relative; overflow:hidden;
    box-shadow:0 8px 44px rgba(51,22,63,.12),0 0 0 1px rgba(51,22,63,.05); border-radius:3px; }
  @media(max-width:820px){ .hv-pg{ width:100%; border-radius:0; } .hvl{ padding:0 0 80px; } }
  .hv-sec{ padding:34px 20mm; }
  @media(max-width:760px){ .hv-sec{ padding:28px 20px; } }
  .hv-eyebrow{ display:flex; align-items:center; gap:14px; justify-content:center; }
  .hv-eyebrow::before,.hv-eyebrow::after{ content:''; height:1px; width:44px; background:var(--hv-lineg); }
  .hv-eyebrow span{ font-family:var(--hv-label); font-size:.66rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--hv-gold); }
  /* Одно слово, уехавшее на вторую строку, — визуальный мусор в заголовке.
     text-wrap:balance выравнивает строки по длине (Chrome 114+, Safari 17.4+,
     Firefox 121+); там, где не поддержан, перенос остаётся обычным. */
  .hv-sec h2, .hv-sec h3, .hv-hero h1, .hv-rest-t, .hv-chgroup-t,
  .hv-eyebrow, .hv-lead, .hv-subline{ text-wrap:balance; }
  .hv-prose p, .hv-ch-hint, .hv-prog-ess{ text-wrap:pretty; }
  .hv-sec h2{ font-family:var(--hv-serif); font-weight:700; font-size:clamp(1.7rem,4vw,2.3rem); text-align:center; margin:10px 0 20px; color:var(--hv-ink); }
  .hv-sec h2 em{ font-style:italic; color:var(--hv-plum3); }
  .hv-prose{ max-width:660px; margin:0 auto; }
  .hv-prose p{ font-size:1.02rem; color:var(--hv-ink2); line-height:1.75; margin:0 0 16px; }
  .hv-prose a{ color:var(--hv-gold); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(168,132,43,.35); }
  .hv-prose strong{ color:var(--hv-plum2); }
  /* Списки. Правил на ul/li в hv не было вообще: kramdown отдаёт нормальный
     <ul>, а tailwind-preflight гасит маркеры и отступ — перечисления
     выглядели как абзацы, склеенные переносами. Маркер — золотой ромб:
     точка теряется на кремовом, а disc в Playfair-контексте выглядит
     инородно. */
  .hv-prose ul, .hv-prose ol{ margin:0 0 16px; padding-left:0; list-style:none; }
  .hv-prose li{ position:relative; padding-left:22px; margin-bottom:8px;
    font-size:1.02rem; color:var(--hv-ink2); line-height:1.7; }
  .hv-prose ul > li::before{
    content:'◆'; position:absolute; left:2px; top:.06em;
    font-size:.62em; color:var(--hv-gold-deco); line-height:1.7;
  }
  .hv-prose ol{ counter-reset:hvli; }
  .hv-prose ol > li{ counter-increment:hvli; }
  .hv-prose ol > li::before{
    content:counter(hvli) '.'; position:absolute; left:0; top:0;
    font-family:var(--hv-serif); font-weight:700; font-size:.9em; color:var(--hv-gold);
  }
  .hv-prose li > p{ margin:0; }
  .hv-prose li strong{ color:var(--hv-plum2); }
  .hv-qa{ font-family:var(--hv-serif); font-weight:700; font-size:1.08rem; color:var(--hv-plum2); margin:26px 0 8px !important; }

  /* hero */
  .hv-hero{ padding:24mm 20mm 18mm; text-align:center; color:var(--hv-on-dark); position:relative;
    background:radial-gradient(ellipse 60% 40% at 78% 16%,rgba(217,180,90,.16),transparent 60%),
      radial-gradient(ellipse 70% 50% at 20% 88%,rgba(192,95,131,.18),transparent 60%),
      linear-gradient(160deg,#2a1136 0%,#431c5c 55%,#5b2a74 100%); }
  .hv-hero-eb{ font-family:var(--hv-label); font-size:.7rem; font-weight:700; letter-spacing:.4em; text-transform:uppercase; color:var(--hv-goldb); margin-bottom:16px; }
  .hv-hero h1{ font-family:var(--hv-serif); color:#fff; font-weight:800; font-size:clamp(2rem,5.4vw,3.2rem); line-height:1.06; letter-spacing:-.015em; margin:0 auto; max-width:680px; }
  .hv-hero h1 em{ font-style:italic; background:linear-gradient(180deg,var(--hv-goldl),var(--hv-goldb) 60%,#b98a2e); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .hv-lead{ font-family:var(--hv-script); font-style:italic; font-size:1.3rem; color:var(--hv-on-dark2); max-width:560px; margin:16px auto 0; line-height:1.5; }

  /* виджет */
  .hv-mx{ background:var(--hv-paper); border:1px solid var(--hv-lineg); border-radius:20px; margin:0 auto; max-width:660px; box-shadow:0 14px 44px rgba(51,22,63,.13); overflow:hidden; }
  .hv-mx-head{ padding:24px 24px 20px; text-align:center; color:#f6ecff;
    background:radial-gradient(ellipse 70% 90% at 50% -20%,rgba(217,180,90,.22),transparent 60%),linear-gradient(160deg,#31153e 0%,#4c2168 70%,#5b2a74 100%); }
  .hv-mx-eb{ font-family:var(--hv-label); font-size:.6rem; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:var(--hv-goldb); margin-bottom:7px; }
  .hv-mx-t{ font-family:var(--hv-serif); font-weight:700; font-size:1.4rem; color:#fff; margin:0 0 12px; }
  .hv-mx-in{ position:relative; display:inline-block; }
  .hv-mx-in span{ position:absolute; top:-8px; left:16px; padding:0 8px; background:linear-gradient(160deg,#3b1a4a,#4c2168); border-radius:6px; font-family:var(--hv-label); font-size:.56rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--hv-goldb); }
  .hv-mx-in input{ height:50px; width:220px; border:1.5px solid rgba(217,180,90,.45); border-radius:13px; padding:0 16px; font-family:var(--hv-label); font-size:17px; font-weight:700; text-align:center; letter-spacing:.08em; color:var(--hv-ink); background:var(--hv-paper); outline:none; box-shadow:0 10px 26px rgba(0,0,0,.3); }
  .hv-mx-preset{ font-size:.76rem; color:#c9b58a; margin-top:11px; line-height:1.45; }
  .hv-mx-preset b{ color:#f6e7bd; font-weight:650; }
  .hv-mx-body{ padding:22px 24px; display:flex; flex-direction:column; align-items:center; gap:16px; }
  .hv-mx-svg{ width:min(500px,100%); display:block; }
  .hv-mx-triplet{ display:flex; align-items:flex-start; justify-content:center; gap:14px; flex-wrap:wrap; }
  /* Карты вместо трёх кружков: аркан узнают по картинке быстрее, чем по числу,
     и каждая карта ведёт в свою статью. Цвет рамки сохраняет прежнюю
     семантику ролей (задача — красная, вход в отношения — оранжевый). */
  .hv-mx-card{ width:96px; display:block; text-decoration:none; text-align:center; position:relative; }
  .hv-mx-card img{ display:block; width:100%; height:auto; border-radius:10px;
    border:2px solid var(--c,#a8842b); box-shadow:0 6px 18px rgba(58,30,0,.20); background:#fff; }
  .hv-mx-card b{ position:absolute; top:-8px; left:50%; transform:translateX(-50%);
    min-width:30px; height:30px; padding:0 7px; border-radius:999px; display:flex;
    align-items:center; justify-content:center; font-family:var(--hv-serif); font-weight:800;
    font-size:1rem; color:#fff; background:var(--c,#a8842b); box-shadow:0 3px 10px rgba(58,30,0,.30); }
  .hv-mx-card i{ display:block; font-style:normal; font-family:var(--hv-serif); font-weight:700;
    font-size:.9rem; color:var(--hv-ink); margin-top:8px; line-height:1.2; }
  .hv-mx-card span{ display:block; font-size:.74rem; letter-spacing:.04em; text-transform:uppercase;
    color:var(--hv-ink-soft); margin-top:2px; }
  .hv-mx-card:hover img{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(58,30,0,.28); }
  .hv-mx-card img{ transition:transform .18s, box-shadow .18s; }
  @media(max-width:420px){ .hv-mx-card{ width:76px; } .hv-mx-card i{ font-size:.82rem; } }
  .hv-mx-num{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--hv-serif); font-weight:800; font-size:1.2rem; background:linear-gradient(135deg,#d9b45a,#a8842b); color:#3a1e00; box-shadow:0 6px 16px rgba(168,132,43,.35); }
  .hv-mx-num.entry{ background:linear-gradient(135deg,#f6ad48,#dd7a0e); box-shadow:0 6px 16px rgba(221,122,14,.4); }
  .hv-mx-num.task{ background:linear-gradient(135deg,#e56b62,#c0271f); color:#fff; box-shadow:0 6px 16px rgba(192,39,31,.42); }
  .hv-mx-dot{ font-family:var(--hv-serif); color:var(--hv-ink3); }
  .hv-mx-names{ font-size:.86rem; color:var(--hv-ink2); text-align:center; }
  .hv-mx-verdict{ width:100%; padding:13px 16px; border-radius:12px; background:var(--hv-golds); border-left:3px solid var(--hv-goldb); font-size:.92rem; line-height:1.55; color:#5d4a15; }
  .hv-mx-verdict a{ color:var(--hv-gold); font-weight:700; }
  .hv-mx-note{ font-size:.7rem; color:var(--hv-ink3); }

  /* таблица */
  .hv-table-wrap{ max-width:720px; margin:0 auto; overflow-x:auto; }
  .hv-table{ width:100%; border-collapse:collapse; background:var(--hv-paper); border:1px solid var(--hv-line); border-radius:14px; overflow:hidden; font-size:.92rem; }
  .hv-table th{ font-family:var(--hv-label); font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--hv-ink3); text-align:left; padding:10px 12px; border-bottom:1px solid var(--hv-line); background:var(--hv-cream2); }
  .hv-table td{ padding:10px 12px; border-bottom:1px dashed var(--hv-line); color:var(--hv-ink2); vertical-align:middle; font-size:.88rem; }
  .hv-table tr:last-child td{ border-bottom:none; }
  .hv-table tr:target{ background:var(--hv-golds); }
  .hv-tr-num{ font-family:var(--hv-serif); font-weight:800; color:var(--hv-plum3); white-space:nowrap; font-size:1rem; }
  .hv-tr-num small{ display:block; font-family:var(--hv-sans); font-size:.72rem; font-weight:500; }
  .hv-tr-num small a{ font-weight:600; }
  .hv-tr-pct{ font-family:var(--hv-label); font-weight:700; white-space:nowrap; }
  .hv-tr-pct small{ display:block; font-weight:500; color:var(--hv-ink3); }
  .hv-tr-prog a{ white-space:normal; }
  .hv-table a{ color:var(--hv-gold); font-weight:700; text-decoration:none; white-space:nowrap; }
  .hv-table .soon{ color:var(--hv-ink3); font-size:.78rem; white-space:nowrap; }

  /* FAQ */
  .hv-faq{ max-width:660px; margin:0 auto; }
  .hv-faq-q{ font-family:var(--hv-serif); font-weight:700; font-size:1.06rem; color:var(--hv-ink); margin-bottom:6px; }
  .hv-faq-a{ font-size:.92rem; color:var(--hv-ink2); line-height:1.65; padding-bottom:16px; margin-bottom:16px; border-bottom:1px dashed var(--hv-line); }
  .hv-faq-a a{ color:var(--hv-gold); font-weight:600; text-decoration:none; }

  /* автор + ещё */
  .hv-author{ max-width:560px; margin:0 auto; text-align:center; border-top:1px solid var(--hv-line); padding-top:26px; }
  /* Отступ даёт САМА фотография, а не то, что под ней: порядок элементов в
     разных кластерах разный (где-то img → подпись → имя, где-то img → имя →
     подпись), и margin-top у одного из них давал зазор через раз. */
  .hv-author img{ display:block; margin:0 auto 14px; width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:center top; border:2px solid var(--hv-goldb); }
  .hv-author h3{ font-family:var(--hv-serif); font-weight:700; font-size:1.1rem; margin:0 0 3px; color:var(--hv-ink); }
  .hv-author h3 a{ color:inherit; text-decoration:none; }
  .hv-author .t{ font-family:var(--hv-label); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--hv-ink3); margin-bottom:10px; }
  .hv-author p{ font-size:.88rem; color:var(--hv-ink2); line-height:1.6; margin:0 auto 8px; }
  .hv-author .note{ font-size:.8rem; color:var(--hv-ink3); font-style:italic; }
  .hv-more{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; max-width:720px; margin:0 auto; }
  @media(max-width:760px){ .hv-more{ grid-template-columns:1fr; } }
  /* статейная иллюстрация секции */
  .hv-sec-img{ display:block; width:100%; max-width:560px; height:auto; margin:0 auto 22px; border-radius:16px; border:1px solid var(--hv-line); box-shadow:0 12px 28px rgba(51,22,63,.12); }

  /* ── Буквица ────────────────────────────────────────────────────────
     Подняли из прогноза (Ф0.1: приём уровня «ядро»).

     Рендерится РЕАЛЬНЫМ элементом .hv-dc, а не ::first-letter. История:
     псевдоэлемент сначала «работал только на мобиле» (сломанный комментарий
     выше съедал десктопное правило), потом продолжал вести себя непредсказуемо
     с разметкой в начале абзаца и не поддавался измерению. Span в DOM решает
     всё разом — и букву, и число («16 аркан…») одним классом.

     Отрицательный нижний отступ обязателен: floated-буква выше строки, без
     него под первой строкой оставалась пустая полоса.                    */
  .hv-dc{
    float:left; font-family:var(--hv-serif); font-weight:800;
    font-size:3.4rem; line-height:.76;
    margin:5px 12px -6px 0; color:var(--dc,var(--hv-rose));
    letter-spacing:-.02em;
  }
  @media(max-width:520px){
    .hv-dc{ font-size:2.7rem; margin:4px 9px -5px 0; }
  }

  /* ── Рамка Таро ─────────────────────────────────────────────────────
     Тоже из прогноза. Ширину задаёт место применения (--afw), рамка
     только оформляет: золотой кант, сливовая подложка под прозрачные
     края карт, тень. Картинка обязана иметь осмысленный alt с названием
     аркана — требование чек-листа image-SEO.                           */
  .hv-arc-frame{
    display:block; width:var(--afw,110px); border-radius:8px; overflow:hidden;
    border:2px solid rgba(217,180,90,.55); background:var(--hv-plum2);
    box-shadow:0 10px 30px rgba(51,22,63,.22);
  }
  .hv-arc-frame img{ display:block; width:100%; height:100%; object-fit:cover; }
  .hv-more a{ background:var(--hv-paper); border:1px solid var(--hv-line); border-radius:14px; padding:16px; text-decoration:none; color:inherit; border-top:3px solid var(--c); transition:.15s; }
  .hv-more a:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(51,22,63,.12); }
  .hv-more b{ font-family:var(--hv-serif); font-weight:700; font-size:1.05rem; display:block; margin-bottom:4px; color:var(--hv-ink); }
  .hv-more span{ font-size:.82rem; color:var(--hv-ink2); }
  /* Карточка «место матрицы» на странице программы (/matrica-sudby/programmy/:code).
     Живёт здесь, а не в самой вьюхе: правило Романа — новые страницы без
     собственного <style>, значения берём из этой же системы (крем/золото).
     Переменные numefy-tokens.css не используем — файл в layout не подключён. */
  /* Группы «12 мест»: подзаголовок группы + её карточки. Плоский список из 12
     читался как перечень терминов, группировка возвращает смысл. */
  /* Пометка «тройка стоит дважды» — сигнал усиления, а не дубля. */
  .hv-pgm-x{ font-style:normal; font-size:.72rem; font-weight:700; letter-spacing:.02em;
    color:var(--c); background:rgba(168,132,43,.10); border-radius:999px; padding:1px 7px;
    margin-left:6px; white-space:nowrap; }
  .hv-pgm-note{ display:block; margin-top:8px; font-size:.9rem; color:var(--hv-ink-soft); }

  .hv-chgroup{ max-width:760px; margin:26px auto 0; }
  .hv-chgroup-t{ font-family:var(--hv-serif); font-weight:700; font-size:1.02rem; color:var(--c);
    text-align:left; display:flex; align-items:center; gap:10px; padding:0 4px 8px;
    border-bottom:1px solid var(--hv-line); }
  .hv-chgroup-t::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--c); flex:none; }
  .hv-chgroup-t span{ margin-left:auto; font-family:var(--hv-sans); font-weight:600; font-size:.76rem;
    color:var(--hv-ink-soft); background:var(--hv-paper); border:1px solid var(--hv-line);
    border-radius:999px; padding:1px 9px; }
  .hv-chgroup .hv-chs{ margin-top:12px; }
  .hv-chgroup .hv-ch{ border-top-color:var(--c); }

  /* Живой фильтр над таблицей: с 270+ строками список без поиска — стена. */
  /* Спойлер списка: содержимое остаётся в HTML (видно краулерам), скрыта
     только отрисовка. Двести с лишним строк иначе съедают страницу. */
  .hv-rest{ margin:34px 0 0; }
  .hv-rest-t{ font-family:var(--hv-serif); font-weight:700; font-size:1.2rem;
    color:var(--hv-ink); cursor:pointer; list-style:none; text-align:center;
    display:flex; align-items:center; justify-content:center; gap:12px;
    padding:14px 18px; margin:0 auto; max-width:520px;
    background:var(--hv-paper); border:1px solid var(--hv-line); border-radius:14px;
    transition:border-color .15s, box-shadow .15s; }
  .hv-rest-t::-webkit-details-marker{ display:none; }
  .hv-rest-t:hover{ border-color:var(--hv-gold-deco); box-shadow:0 2px 12px rgba(168,132,43,.10); }
  .hv-rest-t i{ font-style:normal; font-family:var(--hv-sans); font-weight:600;
    font-size:.82rem; color:var(--hv-ink-soft); display:flex; align-items:center; gap:6px; }
  .hv-rest-t i::after{ content:''; width:7px; height:7px; border-right:2px solid currentColor;
    border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .2s; }
  .hv-rest[open] .hv-rest-t{ border-color:var(--hv-gold-deco); margin-bottom:16px; }
  .hv-rest[open] .hv-rest-t i::after{ transform:rotate(225deg) translate(-2px,-2px); }
  @media(max-width:520px){ .hv-rest-t{ flex-direction:column; gap:6px; font-size:1.08rem; } }
  .hv-filter{ max-width:520px; margin:0 auto 14px; display:flex; align-items:center; gap:10px; }
  .hv-filter input{ flex:1; font:inherit; font-size:.95rem; padding:10px 14px; border-radius:999px;
    border:1px solid var(--hv-line); background:var(--hv-paper); color:var(--hv-ink); }
  .hv-filter input:focus{ outline:none; border-color:var(--hv-gold-deco); box-shadow:0 0 0 3px rgba(168,132,43,.15); }
  .hv-filter input::placeholder{ color:var(--hv-ink-soft); }
  .hv-filter span{ font-size:.82rem; color:var(--hv-ink-soft); white-space:nowrap; }
  .hv-filter-empty{ text-align:center; color:var(--hv-ink-soft); font-size:.92rem; margin:14px 0 0; }

  .hv-chs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; max-width:720px; margin:22px auto 0; }
  @media(max-width:760px){ .hv-chs{ grid-template-columns:1fr; } }
  .hv-ch{ background:var(--hv-paper); border:1px solid var(--hv-line); border-radius:14px; padding:16px 18px; border-top:3px solid var(--c); text-align:left; }
  .hv-ch > b{ font-family:var(--hv-serif); font-weight:700; font-size:1.05rem; display:block; color:var(--hv-ink); }
  .hv-ch-hint{ display:block; font-family:var(--hv-label); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--hv-ink3); margin:2px 0 10px; }
  .hv-ch .hv-prose p{ font-size:.92rem; margin:0 0 8px; }
  .hv-ch-res{ border-top:1px dashed var(--hv-line); padding-top:8px; margin-top:4px; }
  .hv-ch-res b{ color:var(--hv-plum2); }
  /* Виджет «программы во всех местах матрицы» (/matrica-sudby/programmy/*).
     ВНИМАНИЕ: тёмная только .hv-mx-head, а .hv-mx-body — светлая бумага.
     Карточки живут в body, поэтому текст тёмный. Светлая палитра здесь
     давала почти невидимый текст (правка 05.08 по скриншоту). */
  .hv-pgm-go{ margin-top:14px; height:46px; padding:0 26px; border:none; border-radius:13px; cursor:pointer; background:linear-gradient(135deg,#e9cd85,#c49a3d); color:#3b2a06; font-family:var(--hv-label); font-weight:800; font-size:.86rem; letter-spacing:.06em; box-shadow:0 10px 24px rgba(0,0,0,.28); transition:.15s; }
  .hv-pgm-go:hover{ transform:translateY(-1px); }
  .hv-pgm-go:disabled{ opacity:.6; cursor:default; transform:none; }
  .hv-pgm-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:10px; width:100%; margin-top:4px; }
  @media(max-width:640px){ .hv-pgm-grid{ grid-template-columns:1fr; } }
  .hv-pgm-card{ background:var(--hv-cream); border:1px solid var(--hv-line); border-top:3px solid var(--c); border-radius:12px; padding:12px 14px; text-align:left; }
  .hv-pgm-card.is-hit{ background:var(--hv-golds); border-color:var(--hv-goldb); box-shadow:0 0 0 2px rgba(217,180,90,.45); }
  .hv-pgm-lbl{ font-family:var(--hv-label); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--hv-ink3); }
  .hv-pgm-trip{ font-family:var(--hv-label); font-weight:800; font-size:1.02rem; color:var(--hv-gold); margin:5px 0 2px; letter-spacing:.05em; }
  .hv-pgm-name{ font-family:var(--hv-serif); font-weight:700; font-size:.98rem; color:var(--hv-ink); }
  .hv-pgm-name a{ color:var(--hv-plum2); text-decoration:underline; text-decoration-color:rgba(168,132,43,.45); }
  .hv-pgm-name a:hover{ color:var(--hv-gold); }
  .hv-pgm-none{ color:var(--hv-ink3); font-style:italic; font-size:.86rem; font-weight:400; }
  .hv-pgm-ess{ font-size:.79rem; line-height:1.5; color:var(--hv-ink2); margin-top:6px; }
  /* Подводка под заголовком в СВЕТЛОЙ секции: .hv-lead окрашен под тёмный
     hero (#e9d8f2) и на бумаге почти не виден — для таких мест этот класс. */
  /* Подзаголовок секции. Было: курсивный сериф 1.12rem и margin-bottom:0 —
     длинная инструкция курсивом читается тяжело, а нулевой нижний отступ
     приклеивал её к следующему блоку (на «Программах» — вплотную к тёмной
     форме). Ставим прямое начертание, тот же кегль, что у прозы, и воздух
     снизу. Курсив остаётся у .hv-lead — там короткая фраза-подводка. */
  .hv-subline{ font-family:var(--hv-sans); font-size:1rem; color:var(--hv-ink2);
    max-width:560px; margin:14px auto 26px; line-height:1.65; text-align:center; }
  /* Три признака отработанного хвоста — нумерованные карточки вместо абзацев. */
  .hv-signs{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:720px; margin:18px auto 0; counter-reset:sign; }
  @media(max-width:760px){ .hv-signs{ grid-template-columns:1fr; } }
  .hv-sign{ background:var(--hv-paper); border:1px solid var(--hv-line); border-top:3px solid var(--c); border-radius:14px; padding:16px 18px; position:relative; counter-increment:sign; }
  .hv-sign::before{ content:counter(sign); position:absolute; top:12px; right:16px; font-family:var(--hv-serif); font-weight:800; font-size:2rem; line-height:1; color:var(--c); opacity:.22; }
  .hv-sign b{ display:block; font-family:var(--hv-serif); font-weight:700; font-size:1.04rem; color:var(--hv-ink); margin-bottom:7px; padding-right:26px; }
  .hv-sign span{ font-size:.88rem; line-height:1.6; color:var(--hv-ink2); }

  /* Карточка программы в списке на хабе: миниатюры трёх карт Таро + код + имя.
     Раньше это была текстовая карточка .hv-more a без единого визуала. */
  .hv-progs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; max-width:720px; margin:0 auto; }
  @media(max-width:640px){ .hv-progs{ grid-template-columns:1fr; } }
  .hv-prog-card{ background:var(--hv-paper); border:1px solid var(--hv-line); border-top:3px solid var(--c); border-radius:14px; padding:14px 16px 16px; text-decoration:none; color:inherit; display:block; transition:.15s; }
  .hv-prog-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(51,22,63,.12); }
  .hv-prog-cards{ display:flex; gap:5px; margin-bottom:10px; }
  .hv-prog-cards img{ width:46px; height:auto; border-radius:5px; border:1px solid var(--hv-line); background:#fff; box-shadow:0 3px 9px rgba(51,22,63,.12); }
  .hv-prog-card b{ font-family:var(--hv-label); font-weight:800; font-size:1.14rem; letter-spacing:.03em; color:var(--c); display:inline-block; margin-right:7px; }
  .hv-prog-card i{ font-family:var(--hv-serif); font-style:italic; font-weight:700; font-size:1rem; color:var(--hv-ink); }
  .hv-prog-ess{ display:block; margin-top:7px; font-size:.83rem; line-height:1.5; color:var(--hv-ink2); }

  /* Три энергии программы (/matrica-sudby/programmy/:code).
     Карта крупнее, число — крупным акцидентом, под ним ключевые слова аркана
     из ArcanaDescription. До 05.08 здесь была .hv-combo-read хвоста с пустыми
     подписями «первая энергия тройки» и большим количеством воздуха впустую. */
  .hv-energy{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:720px; margin:0 auto 22px; }
  @media(max-width:640px){ .hv-energy{ grid-template-columns:1fr; } }
  .hv-energy-card{ background:var(--hv-paper); border:1px solid var(--hv-line); border-top:3px solid var(--c); border-radius:14px; padding:16px 14px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
  .hv-energy-card img{ width:104px; height:auto; border-radius:8px; border:1px solid var(--hv-line); box-shadow:0 8px 20px rgba(51,22,63,.16); background:#fff; }
  .hv-energy-head{ display:flex; align-items:baseline; justify-content:center; gap:8px; flex-wrap:wrap; }
  .hv-energy-head b{ font-family:var(--hv-serif); font-weight:800; font-size:1.9rem; line-height:1; color:var(--c); }
  .hv-energy-head a{ text-decoration:none; border-bottom:1px solid rgba(168,132,43,.4); }
  .hv-energy-head a:hover{ border-bottom-color:var(--hv-gold); }
  .hv-energy-head i{ font-family:var(--hv-serif); font-style:italic; font-size:1.02rem; color:var(--hv-ink); }
  .hv-energy-role{ font-size:.78rem; line-height:1.45; color:var(--hv-ink3); }
  .hv-energy-role b{ display:block; font-family:var(--hv-label); font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c); margin-bottom:2px; }
  .hv-energy-kw{ display:flex; flex-wrap:wrap; justify-content:center; gap:5px; }
  .hv-energy-kw span{ font-family:var(--hv-label); font-size:.66rem; font-weight:600; letter-spacing:.04em; color:var(--hv-ink2); background:var(--hv-cream2); border-radius:999px; padding:3px 9px; }
  @media(max-width:640px){
    /* Было flex-row — и все четыре блока (картинка, заголовок, роль, чипы)
       выстраивались в ОДИН ряд, из-за чего чипы уезжали за край экрана.
       Теперь сетка: картинка в левой колонке на всю высоту, текст — в правой
       и переносится по строкам. minmax(0,1fr) обязателен, иначе колонка не
       даёт содержимому сжиматься и переполнение возвращается. */
    .hv-energy-card{ display:grid; grid-template-columns:72px minmax(0,1fr);
      column-gap:14px; row-gap:6px; align-content:center; text-align:left; padding:14px; }
    .hv-energy-card img{ width:72px; grid-column:1; grid-row:1 / span 3; align-self:start; }
    .hv-energy-head, .hv-energy-role, .hv-energy-kw{ grid-column:2; min-width:0; }
    .hv-energy-head{ justify-content:flex-start; }
    .hv-energy-head b{ font-size:1.6rem; }
    .hv-energy-kw{ justify-content:flex-start; overflow-wrap:anywhere; }
  }
  /* Карточки различения «чем программа отличается от похожих».
     Раньше секция шла сплошным текстом на 840px без единого якоря. */
  .hv-diff{ display:grid; gap:14px; max-width:720px; margin:18px auto 0; }
  .hv-diff-card{ background:var(--hv-paper); border:1px solid var(--hv-line); border-left:3px solid var(--c); border-radius:14px; padding:16px 18px; }
  .hv-diff-card b{ font-family:var(--hv-serif); font-weight:700; font-size:1.06rem; color:var(--hv-ink); display:block; margin-bottom:10px; }
  .hv-diff-row{ display:flex; gap:10px; font-size:.9rem; line-height:1.55; margin-bottom:7px; color:var(--hv-ink2); }
  .hv-diff-row i{ flex:0 0 auto; font-style:normal; font-family:var(--hv-label); font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--hv-ink3); width:74px; padding-top:3px; }
  .hv-diff-mark{ margin-top:10px; padding:10px 13px; background:var(--hv-golds); border-radius:10px; font-size:.89rem; line-height:1.5; color:#5d4a15; }
  .hv-diff-mark b{ font-family:var(--hv-label); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--hv-gold); display:block; margin-bottom:3px; }
  @media(max-width:560px){
    .hv-diff-row{ flex-direction:column; gap:2px; }
    .hv-diff-row i{ width:auto; padding-top:0; }
  }
  /* Таблица «в минусе / в плюсе» */
  .hv-mp{ width:100%; border-collapse:collapse; margin:6px 0 0; font-size:.9rem; }
  .hv-mp th{ font-family:var(--hv-label); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--hv-ink3); padding:0 12px 8px; text-align:left; font-weight:700; }
  .hv-mp td{ padding:11px 12px; border-top:1px solid var(--hv-line); vertical-align:top; line-height:1.5; }
  .hv-mp .th-mn{ color:#8a5a4a; }
  .hv-mp .th-pl{ color:#3f6b52; }
  .hv-mp .sph{ font-family:var(--hv-serif); font-weight:700; color:var(--hv-ink); white-space:nowrap; }
  .hv-mp .mn{ color:#8a5a4a; }
  .hv-mp .pl{ color:#3f6b52; }
  .hv-mp tr:hover td{ background:rgba(168,132,43,.045); }
  @media(max-width:700px){
    .hv-mp, .hv-mp tbody, .hv-mp tr, .hv-mp td{ display:block; width:100%; }
    .hv-mp thead{ display:none; }
    .hv-mp tr{ border-top:1px solid var(--hv-line); padding:10px 0; }
    .hv-mp td{ border:none; padding:3px 0; }
    .hv-mp .mn:before{ content:'В минусе: '; font-weight:700; color:var(--hv-ink3); }
    .hv-mp .pl:before{ content:'В плюсе: '; font-weight:700; color:var(--hv-ink3); }
  }
  .hv-foot{ text-align:center; padding:24px; font-family:var(--hv-label); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--hv-ink3); }
  /* Таро-карты: веер в hero хаба, одиночная на вершине, мини в карточках чтения */
  .hv-hero-fan{ display:flex; justify-content:center; align-items:flex-end; margin:20px 0 6px; }
  .hv-hero-fan img{ width:88px; height:auto; border-radius:8px; border:1px solid var(--hv-line); box-shadow:0 10px 24px rgba(51,22,63,.18); background:#fff; }
  .hv-hero-fan img:first-child{ transform:rotate(-9deg) translate(12px,4px); }
  .hv-hero-fan img:nth-child(2){ width:102px; transform:translateY(-8px); z-index:1; position:relative; }
  .hv-hero-fan img:last-child{ transform:rotate(9deg) translate(-12px,4px); }
  .hv-hero-card{ width:108px; height:auto; border-radius:10px; border:1px solid var(--hv-line); box-shadow:0 12px 28px rgba(51,22,63,.2); margin:18px auto 4px; display:block; background:#fff; }
  .hv-cr-img{ width:82px; height:auto; border-radius:8px; border:1px solid var(--hv-line); box-shadow:0 6px 16px rgba(51,22,63,.14); margin-bottom:10px; }
  /* CTA на полный отчёт (страницы комбинаций) */
  .hv-cta{ max-width:660px; margin:0 auto; background:linear-gradient(135deg,rgba(217,180,90,.14),rgba(168,132,43,.08)); border:1px solid var(--hv-gold-deco); border-radius:18px; padding:26px 28px; text-align:center; }
  .hv-cta b{ font-family:var(--hv-serif); font-weight:800; font-size:1.2rem; display:block; margin-bottom:8px; color:var(--hv-ink); }
  .hv-cta p{ font-size:.92rem; color:var(--hv-ink2); margin:0 0 16px; }
  .hv-cta a{ display:inline-block; background:linear-gradient(135deg,#d9b45a,#a8842b); color:#fff; font-family:var(--hv-label); font-weight:700; font-size:.92rem; padding:13px 30px; border-radius:100px; text-decoration:none; box-shadow:0 8px 20px rgba(168,132,43,.35); transition:.15s; }
  .hv-cta a:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(168,132,43,.45); }
  /* чтение тройки по позициям (страницы комбинаций) */
  .hv-combo-read{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:660px; margin:0 auto 22px; }
  .hv-combo-read>div{ background:var(--hv-paper); border:1px solid var(--hv-line); border-radius:14px; padding:14px 16px; border-top:3px solid var(--c); }
  .hv-combo-read b{ font-family:var(--hv-serif); font-weight:800; font-size:1.15rem; display:block; color:var(--hv-ink); }
  .hv-combo-read i{ font-family:var(--hv-serif); font-style:italic; font-size:.95rem; color:var(--c); display:block; margin:2px 0 6px; }
  .hv-combo-read span{ font-size:.8rem; color:var(--hv-ink2); line-height:1.45; }
  /* мобайл: карта слева, текст справа — вместо пустой башни */
  @media(max-width:760px){
    .hv-combo-read{ grid-template-columns:1fr; }
    .hv-combo-read>div{ display:grid; grid-template-columns:64px 1fr; column-gap:14px; align-items:center; border-top:none; border-left:3px solid var(--c); }
    .hv-combo-read .hv-cr-img{ width:64px; margin:0; grid-row:1 / span 3; }
    .hv-combo-read b, .hv-combo-read i, .hv-combo-read span{ grid-column:2; }
  }
  .hv-nowrap{ white-space:nowrap; }
  @keyframes hvupd{ 0%{ transform:scale(.94); opacity:.45; } 100%{ transform:scale(1); opacity:1; } }
  .hv-mx-triplet.is-upd{ animation:hvupd .32s ease-out; }
  @keyframes hvpulse{ 0%{opacity:.35;} 50%{opacity:.75;} 100%{opacity:.35;} }
  .hv-mx-svg .pulse{ animation:hvpulse 2.4s ease-in-out infinite; }


/* ═══════════════════════════════════════════════════════════════════
   СЛОЙ СОВМЕСТИМОСТИ — имена прогноза
   Кластер прогноза объявлял ту же палитру без префикса. Теперь это
   псевдонимы hv-токенов: 875 строк компонентов работают без правок,
   значения приходят из одного места.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --cream:var(--hv-cream);   --cream-2:var(--hv-cream2);  --paper:var(--hv-paper);
  --ink:var(--hv-ink);       --ink-2:var(--hv-ink2);      --ink-3:var(--hv-ink3);
  --plum:var(--hv-plum);     --plum-2:var(--hv-plum2);    --plum-3:var(--hv-plum3);
  --gold:var(--hv-gold);     --gold-bright:var(--hv-goldb); --gold-soft:var(--hv-golds);
  --rose:var(--hv-rose);     --rose-soft:var(--hv-roses);
  --lilac:var(--hv-lilac);   --lilac-soft:var(--hv-lilacs);
  --line:var(--hv-line);     --line-gold:var(--hv-lineg);
  --serif:var(--hv-serif);   --sans:var(--hv-sans);
  --script:var(--hv-serif);  --label:var(--hv-sans);
  --w:210mm;                 --pad:20mm;
}

/* ═══════════════════════════════════════════════════════════════════
   КРОШКИ — одна реализация на весь сайт
   ───────────────────────────────────────────────────────────────────
   Партиал layouts/_breadcrumbs (.ds-breadcrumbs + BreadcrumbList JSON-LD)
   был общим и раньше, разъезжались только ОБЁРТКИ:
     · программы и хвост — обёртка без переопределений, крошки шли
       дефолтом design_system: по центру, .82rem;
     · прогноз — обёртка .pg-crumbs, перебивал на flex-start и .76rem.
   Отсюда «где-то по центру, где-то слева».

   КАНОН (решение Романа 06.08): вариант программ — ПО ЦЕНТРУ, .82rem.
   Он лучше ложится на композицию: лист 210mm центрирован, крошки
   держат ту же ось. Выравнивание и кегль НЕ переопределяем — берём
   дефолт design_system, чтобы канон был один и в этом файле, и там.

   Компонент даёт только геометрию обёртки + мобильный горизонтальный
   скролл (полезное наследство от .pg-crumbs, теперь досталось всем).

   Применение: <div class="hv-crumbs"><%= render 'layouts/breadcrumbs' %></div>
   ═══════════════════════════════════════════════════════════════════ */
.hv-crumbs{ width:210mm; max-width:100%; margin:0 auto 10px; padding:0 20px; }

/* Ховер — как у ссылок подвала: слива + тонкая золотая подложка вместо
   синего подчёркивания design_system. Скоупим по .hv-crumbs: страницы,
   ещё не переведённые на hv, остаются со старым поведением. */
.hv-crumbs .ds-breadcrumbs a{
  border-bottom:1px solid transparent;
  transition:color .18s, border-color .18s;
}
.hv-crumbs .ds-breadcrumbs a:hover{
  color:var(--hv-plum3);
  text-decoration:none;
  border-bottom-color:var(--hv-lineg);
}

/* Крошки всегда в одну строку. Перенос на вторую строку сдвигал хиро и
   ломал ритм страницы — а последняя крошка на статьях бывает длинной.
   На узком экране строка не режется, а скроллится вбок. */
.hv-crumbs .ds-breadcrumbs{ flex-wrap:nowrap; white-space:nowrap; min-width:0; }
.hv-crumbs .ds-breadcrumbs .active{
  overflow:hidden; text-overflow:ellipsis; min-width:0;
}
@media(max-width:640px){
  .hv-crumbs .ds-breadcrumbs{
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    justify-content:flex-start;
  }
  .hv-crumbs .ds-breadcrumbs::-webkit-scrollbar{ display:none; }
  /* На мобиле НЕ сжимаем последнюю крошку: с ellipsis она ужималась под
     ширину экрана, переполнения не возникало — и прокручивать было нечего.
     Пусть строка честно выходит за край, а JS в подвале доводит её до конца:
     видно текущую страницу, а не «Главная». */
  .hv-crumbs .ds-breadcrumbs > *{ flex-shrink:0; }
  .hv-crumbs .ds-breadcrumbs .active{ overflow:visible; text-overflow:clip; }
}



/* ═══════════════════════════════════════════════════════════════════
   ПРОГНОЗ — CSS НЕ ВЫНЕСЕН (осознанно, 06.08)
   ───────────────────────────────────────────────────────────────────
   Попытка втянуть 875 строк из трёх вьюх прогноза провалилась:
     · страницы используют generic-имена (.pg/.hero/.cover) для РАЗНОГО,
       при склейке .pg из отчёта сносил тёмный hero лендинга;
     · скоупинг регексом сломал `body{}` → `.pfl body{}` (пропал фон
       подложки #efe6d8) и потерял часть правил (.in-t — заголовки
       карточек «Ваш год в шести главах»).
   CSS регексом не парсится. Вынос прогноза требует нормального
   парсера + проверки скриншотами — отдельная задача, не в Ф0.
   Сейчас прогноз оставлен как был: свой <style> в каждой вьюхе.
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   COOKIE-БАННЕР + МОДАЛКА НАСТРОЕК
   ───────────────────────────────────────────────────────────────────
   Было: 189 строк инлайновых стилей в партиале, плашка 720px шириной,
   паддинг 24×28, текст 15px — «слишком большой» (Роман, 06.08).
   Стало: компактная полоса, одна строка на десктопе, ~вдвое ниже.

   Плюс починен контраст: серые подписи шли #9ca3af (2.41:1) и
   #94a3b8 (2.56:1) при норме 4.5 — это половина провалов, которые
   нашёл контраст-скан по всем страницам.
   ═══════════════════════════════════════════════════════════════════ */
.ck{ position:fixed; bottom:0; left:0; right:0; z-index:9999; padding:0 12px; }
.ck-box{
  max-width:600px; margin:0 auto 14px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--hv-line);
  border-radius:14px;
  box-shadow:0 6px 28px rgba(51,22,63,.14);
  padding:12px 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--hv-sans);
  animation:ckUp .4s cubic-bezier(.4,0,.2,1);
}
.ck-txt{ flex:1; min-width:220px; font-size:13px; line-height:1.5; color:var(--hv-ink2); }
.ck-txt a{ color:var(--hv-plum3); text-decoration:underline; text-underline-offset:2px; }
.ck-acts{ display:flex; gap:8px; flex-shrink:0; }
.ck-btn{
  padding:8px 20px; border:none; border-radius:10px;
  font-family:var(--hv-sans); font-size:13px; font-weight:700; cursor:pointer;
  transition:transform .2s, box-shadow .2s, border-color .2s, color .2s;
}
.ck-btn-main{ background:linear-gradient(135deg,var(--hv-plum2),var(--hv-plum3)); color:#fff;
  box-shadow:0 2px 10px rgba(76,33,104,.28); }
.ck-btn-main:hover{ transform:translateY(-1px); box-shadow:0 5px 18px rgba(76,33,104,.4); }
.ck-btn-ghost{ background:transparent; color:var(--hv-ink3); border:1px solid var(--hv-line); }
.ck-btn-ghost:hover{ border-color:var(--hv-plum3); color:var(--hv-plum3); }

/* модалка настроек */
.ck-modal{ position:fixed; inset:0; z-index:10000; background:rgba(42,33,48,.5);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.ck-modal-box{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#fff; border-radius:16px; padding:24px; width:90%; max-width:440px;
  box-shadow:0 20px 60px rgba(42,33,48,.22); font-family:var(--hv-sans);
  animation:ckUp .3s cubic-bezier(.4,0,.2,1); }
.ck-modal-box h3,
.ck-modal-box .ck-title{ margin:0 0 6px; font-family:var(--hv-serif); font-size:19px;
  font-weight:700; color:var(--hv-ink); }
.ck-modal-lead{ margin:0 0 18px; font-size:13px; color:var(--hv-ink3); line-height:1.55; }
.ck-opts{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.ck-opt{ display:flex; align-items:center; gap:11px; padding:11px 13px;
  background:var(--hv-cream); border-radius:10px; cursor:pointer; }
.ck-opt input{ width:17px; height:17px; accent-color:var(--hv-plum3); }
.ck-opt-t{ font-size:13.5px; font-weight:700; color:var(--hv-ink); }
.ck-opt-d{ font-size:12px; color:var(--hv-ink3); }   /* было #9ca3af — 2.41:1 */
.ck-modal-acts{ display:flex; gap:8px; }
.ck-modal-acts .ck-btn-main{ flex:1; padding:11px; }

@keyframes ckUp{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
/* Мобайл: было 128px (текст 3 строки + кнопки 38 + отступы).
   Ужимаем типографику и отступы, текст согласия НЕ трогаем —
   это юридическая формулировка про Метрику и Политику. */
@media(max-width:600px){
  .ck{ padding:0 8px; }
  .ck-box{ padding:9px 11px; gap:7px; margin-bottom:8px; border-radius:12px; }
  .ck-txt{ font-size:11.5px; line-height:1.4; min-width:100%; }
  .ck-acts{ width:100%; gap:6px; }
  .ck-btn{ flex:1; padding:7px 12px; font-size:12.5px; border-radius:9px; }
}


/* ═══════════════════════════════════════════════════════════════════
   ХРОМ: кнопка «наверх», плашка промокода, TG-полоса
   ───────────────────────────────────────────────────────────────────
   Все три были на индиго/фиолете старой системы (#7c3aed→#6366f1) и
   на кремовых страницах читались как чужие. Переведены на сливу+золото.
   Логика и id не тронуты.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Кнопка «наверх» ────────────────────────────────────────────────
   Была: 44px, индиго при наведении, тень чёрная.
   Стала: 42px, слива при наведении, тень тонированная. На кремовом
   фоне белый круг выглядел заплаткой — даём кремовую бумагу и
   золотую кайму, как у карточек. */
/* Кластеры системы: .hvl — хвост и программы, .pfl/.gy/.pf — прогноз.
   Корневые классы разные, поэтому перечисляем все. */
.hvl .ds-scroll-top, body:has(.hvl) .ds-scroll-top,
.pfl .ds-scroll-top, body:has(.pfl) .ds-scroll-top,
.gy  .ds-scroll-top, body:has(.gy)  .ds-scroll-top,
.pf  .ds-scroll-top, body:has(.pf)  .ds-scroll-top{
  width:42px; height:42px;
  background:var(--hv-paper);
  border:1px solid var(--hv-lineg);
  color:var(--hv-plum2);
  box-shadow:0 2px 12px rgba(51,22,63,.10);
}
.hvl .ds-scroll-top:hover, body:has(.hvl) .ds-scroll-top:hover,
.pfl .ds-scroll-top:hover, body:has(.pfl) .ds-scroll-top:hover,
.gy  .ds-scroll-top:hover, body:has(.gy)  .ds-scroll-top:hover,
.pf  .ds-scroll-top:hover, body:has(.pf)  .ds-scroll-top:hover{
  background:linear-gradient(135deg,var(--hv-plum2),var(--hv-plum3));
  border-color:transparent; color:#fff;
  box-shadow:0 4px 16px rgba(76,33,104,.28);
}

/* ── Плашка «Применён промокод» ─────────────────────────────────────*/
.hv-promo{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:8px 14px;
  background:linear-gradient(135deg,var(--hv-golds),#fdf6e3);
  border-bottom:1px solid var(--hv-lineg);
  font-family:var(--hv-sans); font-size:13.5px; color:#5c4712;
}
.hv-promo b{ color:var(--hv-gold); }
.hv-promo-inner{ display:flex; align-items:center; justify-content:center;
  gap:8px; flex-wrap:wrap; max-width:1190px; margin:0 auto; }
.hv-promo-text{ font-weight:500; }
.hv-promo-icon{ font-size:15px; line-height:1; }
.hv-promo-sep{ opacity:.4; }
.hv-promo-close{
  margin-left:6px; cursor:pointer; opacity:.55; font-size:17px;
  line-height:1; color:#5c4712; background:none; border:none; padding:0 2px;
}
.hv-promo-close:hover{ opacity:1; }

/* ── TG-полоса «Живой разбор в Telegram» ────────────────────────────
   Была кислотный градиент #7c3aed→#a855f7 во всю ширину внизу.
   Стала сливовая с золотой линией сверху — та же роль, но в языке
   документа, а не поверх него. */
.hv-tg{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:11px 16px;
  background:linear-gradient(135deg,#2a1136,var(--hv-plum2) 60%,var(--hv-plum3));
  border-top:1px solid rgba(217,180,90,.45);
  box-shadow:0 -4px 20px rgba(51,22,63,.22);
}
.hv-tg a{
  color:#fff; text-decoration:none;
  font-family:var(--hv-sans); font-weight:700; font-size:14.5px;
  line-height:1.25; text-align:center;
}
.hv-tg a:hover{ color:var(--hv-goldb); }
.hv-tg-close{
  cursor:pointer; color:#fff; opacity:.6; font-size:19px;
  padding:0 4px; line-height:1; flex-shrink:0;
}
.hv-tg-close:hover{ opacity:1; }
@media(max-width:600px){
  .hv-tg{ padding:10px 12px; gap:8px; }
  .hv-tg a{ font-size:13px; }
}




/* ═══════════════════════════════════════════════════════════════════
   ХРОМ САЙТА — ХЕДЕР И ПОДВАЛ (hv, глобально)
   ───────────────────────────────────────────────────────────────────
   Две проблемы, вторая важнее.

   1. ОСЬ. Хром был прижат к краям экрана (padding 14×28), а лист
      документа — 210mm по центру. Логотип и бургер уезжали к границам
      монитора, документ висел узкой колонкой посередине: две разные
      оси на одной странице. Теперь фон во всю ширину, а СОДЕРЖИМОЕ
      выровнено по оси листа — логотип встаёт ровно над его краем.

   2. ГАММА. Холодный сине-серый (#f8f9fc, белое стекло) вокруг тёплого
      кремового листа. Теперь та же бумага, золотые линейки, Playfair
      в брендовой строке и заголовках колонок.

   Скоупа нет намеренно: сайт целиком переезжает на hv, хром общий.
   ═══════════════════════════════════════════════════════════════════ */

:root{ --hv-axis:210mm; }   /* общая ось документа и хрома */

/* ── ХЕДЕР ────────────────────────────────────────────────────────── */
.hvh{
  background:var(--hv-paper);
  border-bottom:1px solid var(--hv-lineg);
  position:relative; z-index:1000;
}
.hvh-in{
  width:var(--hv-axis); max-width:calc(100% - 32px);
  margin:0 auto; padding:13px 0;
  display:flex; align-items:center; gap:18px;
}
/* Кегль и знак подросли вместе с бургером (42px): при прежних 1.16rem/24px
   логотип рядом с новой кнопкой смотрелся мелким. */
.hvh-logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--hv-serif); font-weight:700; font-size:1.28rem;
  color:var(--hv-ink); text-decoration:none; letter-spacing:-.01em;
  flex-shrink:0;
}
.hvh-logo img{ width:28px; height:28px; }
.hvh-logo i{ color:var(--hv-gold-deco); font-style:normal; }
/* Меню всегда через бургер — решение Романа 06.08. Горизонтальная
   навигация убрана: на десктопе она забирала место у логотипа и
   дублировала drawer, который всё равно полнее. */
.hvh-nav{ display:none !important; }
.hvh-nav a{
  font-family:var(--hv-sans); font-size:.72rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--hv-ink3); text-decoration:none;
  padding:5px 0; position:relative; white-space:nowrap;
  transition:color .18s;
}
.hvh-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--hv-gold-deco); transform:scaleX(0); transform-origin:left;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.hvh-nav a:hover{ color:var(--hv-plum2); }
.hvh-nav a:hover::after{ transform:scaleX(1); }

.hvh-burger{
  display:flex; margin-left:auto; flex-shrink:0;
  width:42px; height:42px; padding:0;
  background:transparent; border:1px solid var(--hv-line);
  border-radius:10px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:border-color .18s, background .18s;
}
/* 2px, а не 1.5: дробная высота ложится на пиксельную сетку по-разному —
   одна полоска выходит тоньше соседней, и кнопка выглядит кривой.
   Ширина 18px в кнопке 42px вместо 16 в 38 — было тесновато. */
.hvh-burger span{
  display:block; width:18px; height:2px; border-radius:1px;
  background:var(--hv-ink2); transition:background .18s;
}
.hvh-burger:hover{ border-color:var(--hv-gold-deco); background:var(--hv-cream); }

@media(max-width:900px){
  .hvh-in{ padding:11px 0; max-width:calc(100% - 24px); }
  .hvh-logo{ font-size:1.14rem; }
  .hvh-logo img{ width:25px; height:25px; }
}

/* ── СХЕМА ПОЗИЦИЙ A–E, КАРТОЧКИ ПОЗИЦИЙ, СЕТКА 22 АРКАНОВ ───────────
   06.08.2026: подняты из hv_article.css в ядро — те же блоки нужны
   хабу /matrica-sudby/arkany, а не только статьям.               */
/* Позиции матрицы: схема + карточка на каждую позицию с буквенным бейджем. */
  .hv-posfig{ max-width:520px; margin:0 auto 22px; }
  .hv-posfig svg{ width:100%; height:auto; display:block; }
  .hv-pos{ max-width:660px; margin:0 auto; }
  .hv-pos-item{ background:var(--hv-paper); border:1px solid var(--hv-line); border-radius:14px;
    padding:16px 18px; margin-bottom:12px; border-left:3px solid var(--c,var(--hv-gold)); }
  .hv-pos-hd{ display:flex; align-items:center; gap:11px; margin-bottom:8px; }
  .hv-pos-badge{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-family:var(--hv-serif); font-weight:800; font-size:.94rem; color:#fff;
    background:var(--c,var(--hv-gold)); }
  .hv-pos-hd h3{ font-family:var(--hv-serif); font-weight:700; font-size:1.08rem; margin:0; color:var(--hv-ink); }
  .hv-pos-item .hv-prose p{ font-size:.96rem; margin-bottom:10px; }
/* Сетка 22 арканов: миниатюры карт вместо текстового списка. */
  .hv-arcgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:10px; max-width:760px; margin:0 auto; }
  .hv-arc{ display:block; text-decoration:none; text-align:center; color:inherit; border-radius:12px;
    padding:8px 6px 10px; border:1px solid transparent; transition:.15s; }
  .hv-arc img{ display:block; width:100%; height:auto; border-radius:7px; border:1px solid var(--hv-line);
    box-shadow:0 5px 14px rgba(51,22,63,.14); background:#fff; }
  .hv-arc b{ display:block; font-family:var(--hv-serif); font-weight:800; font-size:.92rem; color:var(--hv-gold); margin-top:6px; }
  .hv-arc span{ display:block; font-size:.72rem; color:var(--hv-ink3); line-height:1.25; }
  .hv-arc:hover{ background:var(--hv-paper); border-color:var(--hv-line); }
  .hv-arc.is-cur{ background:var(--hv-golds); border-color:var(--hv-goldb); }
  .hv-arc.is-cur b{ color:var(--hv-plum2); }
  .hv-arc.is-soon{ opacity:.42; pointer-events:none; }
/* Схема позиций A–E. Вся палитра схемы живёт здесь, а не в атрибутах
     SVG: презентационные атрибуты не понимают var(). Разметка партиала
     _arcana_positions_svg держит только геометрию. */
  .hv-pos-svg .ps-frame{ fill:none; stroke:var(--hv-ink3); stroke-width:1.2; }
  .hv-pos-svg .ps-grid{  stroke:#b3a6b5; stroke-width:.8; }
  .hv-pos-svg .ps-dash{  stroke:#c4b8c5; stroke-width:.8; }
  .hv-pos-svg .ps-flow-p{ stroke:var(--hv-plum3); stroke-width:.8; }
  .hv-pos-svg .ps-flow-r{ stroke:var(--hv-rose);  stroke-width:.8; }
  .hv-pos-svg .ps-node{  stroke:var(--hv-line); stroke-width:1; }
  #hvpos-arrow-purple path{ fill:var(--hv-plum3); }
  #hvpos-arrow-red    path{ fill:var(--hv-rose); }

/* ── ВРЕЗКА «ВАЖНО» ───────────────────────────────────────────────────
   Была своя в каждом кластере (.blg-callout, .pg-note и т.д.).        */
.hv-callout{
  max-width:660px; margin:0 auto; background:var(--hv-paper);
  border:1px solid var(--hv-lineg); border-left:3px solid var(--hv-gold-deco);
  border-radius:0 12px 12px 0; padding:15px 18px;
  font-size:.94rem; color:var(--hv-ink2); line-height:1.65;
}
.hv-callout strong{ color:var(--hv-plum2); }
.hv-callout a{ color:var(--hv-gold); text-decoration:none; border-bottom:1px solid rgba(168,132,43,.35); }

/* ── ТЕКСТОВАЯ СТРАНИЦА (оферта, политика, поддержка) ─────────────────
   Ф5. Три страницы держали ОДИН И ТОТ ЖЕ каркас, размноженный по своим
   <style> в v5-палитре (#fafaff, фиолет, Outfit): .v5-page + .v5-wrap +
   .v5-card + .v5-section. Здесь он один и на hv: тёмный стол, кремовый
   лист, Playfair в заголовках, золотая кромка сверху — как у 404 и у
   страницы после оплаты.                                              */
.hv-doc{
  min-height:70vh; padding:44px 16px 80px;
  font-family:var(--hv-sans); color:var(--hv-ink); line-height:1.6;
  background:radial-gradient(circle at 15% 12%,rgba(192,95,131,.06),transparent 45%),
             radial-gradient(circle at 85% 80%,rgba(130,102,179,.07),transparent 45%),#efe6d8;
}
.hv-doc-in{ width:var(--hv-axis); max-width:100%; margin:0 auto; }
/* Страховка: если лист забыли обернуть в .hv-doc-in, он всё равно держит
   ось, а не растягивается во всю ширину экрана (так поплыла /support). */
.hv-doc > .hv-doc-sheet{ width:var(--hv-axis); max-width:100%; margin:0 auto; }
.hv-doc-sheet{
  position:relative; overflow:hidden;
  background:var(--hv-cream); border-radius:3px;
  box-shadow:0 8px 44px rgba(51,22,63,.12),0 0 0 1px rgba(51,22,63,.05);
  padding:46px 20mm 40px;
}
.hv-doc-sheet::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent,var(--hv-gold-deco),transparent);
}
@media(max-width:820px){ .hv-doc-sheet{ padding:32px 20px 30px; border-radius:0; } .hv-doc{ padding:20px 0 60px; } }
.hv-doc-eyebrow{
  font-size:.64rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--hv-gold); margin-bottom:12px;
}
.hv-doc-title{
  font-family:var(--hv-serif); font-weight:700; font-size:clamp(1.7rem,4vw,2.3rem);
  line-height:1.15; color:var(--hv-ink); margin:0 0 10px; text-wrap:balance;
}
.hv-doc-title em{ font-style:italic; color:var(--hv-plum3); }
.hv-doc-meta{ font-size:.78rem; color:var(--hv-ink3); margin-bottom:26px;
  padding-bottom:20px; border-bottom:1px solid var(--hv-lineg); }
.hv-doc-lead{ font-size:1.02rem; color:var(--hv-ink2); line-height:1.7; margin:0 0 26px; }
.hv-doc-sec{ margin-bottom:26px; }
.hv-doc-sec h2{
  font-family:var(--hv-serif); font-weight:700; font-size:1.16rem;
  color:var(--hv-ink); margin:0 0 10px;
}
.hv-doc-sec h3{
  font-family:var(--hv-serif); font-weight:600; font-size:1.02rem;
  color:var(--hv-ink); margin:16px 0 8px;
}
.hv-doc-sec p, .hv-doc-sec li{ font-size:.95rem; color:var(--hv-ink2); line-height:1.7; }
.hv-doc-sec p{ margin:0 0 10px; }
.hv-doc-sec a{ color:var(--hv-gold); text-decoration:none; border-bottom:1px solid rgba(168,132,43,.35); }
.hv-doc-sec a:hover{ color:var(--hv-plum3); }
.hv-doc-sec ul, .hv-doc-sec ol{ margin:0 0 12px; padding-left:0; list-style:none; }
.hv-doc-sec li{ position:relative; padding-left:20px; margin-bottom:6px; }
.hv-doc-sec ul > li::before{ content:'◆'; position:absolute; left:2px; top:.1em;
  font-size:.58em; color:var(--hv-gold-deco); }
.hv-doc-sec ol{ counter-reset:hvdl; }
.hv-doc-sec ol > li{ counter-increment:hvdl; }
.hv-doc-sec ol > li::before{ content:counter(hvdl) '.'; position:absolute; left:0; top:0;
  font-family:var(--hv-serif); font-weight:700; font-size:.88em; color:var(--hv-gold); }
.hv-doc-callout{
  background:var(--hv-paper); border:1px solid var(--hv-lineg);
  border-left:3px solid var(--hv-gold-deco); border-radius:0 10px 10px 0;
  padding:14px 16px; margin:0 0 22px;
}
.hv-doc-callout-label{
  font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--hv-gold); margin-bottom:6px;
}
.hv-doc-foot{
  margin-top:30px; padding-top:18px; border-top:1px solid var(--hv-lineg);
  font-size:.76rem; color:var(--hv-ink3);
}
.hv-doc-foot a{ color:var(--hv-plum3); text-decoration:none; }
/* Контакты (страница поддержки) */
.hv-doc-contact{
  display:block; background:var(--hv-paper); border:1px solid var(--hv-lineg);
  border-left:3px solid var(--hv-plum3); border-radius:0 12px 12px 0;
  padding:16px 18px; margin-bottom:12px; text-decoration:none; color:inherit;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.hv-doc-contact:hover{ border-color:var(--hv-gold-deco); transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(51,22,63,.10); }
.hv-doc-contact-label{ font-size:.62rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--hv-gold); margin-bottom:5px; }
.hv-doc-contact-link{ font-family:var(--hv-serif); font-weight:700; font-size:1.08rem;
  color:var(--hv-plum2); }
.hv-doc-contact-desc{ font-size:.86rem; color:var(--hv-ink3); margin-top:3px; }
.hv-doc-contacts{ margin-bottom:26px; }
/* Вопросы поддержки: жирный вопрос строкой, ответ следом. */
.hv-doc-faq li{ margin-bottom:12px; }
.hv-doc-faq li b{ display:block; font-family:var(--hv-serif); font-weight:700;
  color:var(--hv-ink); margin-bottom:2px; }

/* ── СЕТКА КАРТОЧЕК БЛОГА ─────────────────────────────────────────────
   Ф5. Была в своём <style> на v5-палитре: белые карточки, фиолетовые
   теги и «Читать →», Outfit в заголовках, сланцевые подписи.          */
.bi-page{ width:var(--hv-axis); max-width:100%; margin:0 auto; padding:6px 20px 40px; }
.bi-header{ text-align:center; margin-bottom:38px; }
.bi-title{ font-family:var(--hv-serif); font-size:clamp(1.8rem,4.4vw,2.4rem); font-weight:700;
  color:var(--hv-ink); margin:0 0 12px; text-wrap:balance; }
.bi-desc{ font-size:1rem; color:var(--hv-ink2); max-width:540px; margin:0 auto; line-height:1.65; }
.bi-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.bi-card{
  background:var(--hv-paper); border:1px solid var(--hv-line); border-radius:14px;
  overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.bi-card:hover{ border-color:var(--hv-gold-deco); transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(51,22,63,.12); }
.bi-card-img{ width:100%; height:180px; object-fit:cover; display:block; }
.bi-card-img-placeholder{ width:100%; height:180px; display:flex; align-items:center;
  justify-content:center; background:var(--hv-cream2); font-size:2.6rem; }
.bi-card-body{ padding:18px 20px 20px; flex:1; display:flex; flex-direction:column; }
.bi-card-tag{
  display:inline-block; padding:3px 11px; border-radius:999px; margin-bottom:10px;
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--hv-golds); color:var(--hv-gold); border:1px solid var(--hv-lineg);
  align-self:flex-start;
}
.bi-card-title{ font-family:var(--hv-serif); font-weight:700; font-size:1.04rem;
  color:var(--hv-ink); line-height:1.35; margin-bottom:9px; }
.bi-card-excerpt{ font-size:.86rem; color:var(--hv-ink2); line-height:1.6; flex:1; }
.bi-card-footer{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:15px; padding-top:13px; border-top:1px solid var(--hv-line);
  font-size:.76rem; color:var(--hv-ink3);
}
.bi-card-read{ font-weight:600; color:var(--hv-plum3); font-size:.78rem; }
.bi-empty{ text-align:center; padding:70px 20px; color:var(--hv-ink3); }
.bi-empty-icon{ font-size:2.6rem; margin-bottom:14px; }
.bi-empty-title{ font-family:var(--hv-serif); font-size:1.16rem; font-weight:700;
  color:var(--hv-ink); margin-bottom:8px; }
.bi-empty-text{ font-size:.9rem; line-height:1.6; }

/* ── ЛИЧНЫЙ КУПОН −50% (после покупки) ────────────────────────────────
   Тоже жил двумя копиями, и они успели разъехаться: в матрице акцент
   фиолетовый, в паре — малиновый, всё остальное совпадало символ в
   символ. Один компонент, hv-палитра.

   Карточка сидит на той же оси 210mm, что лист отчёта, — она часть
   документа, а не баннер поверх него. Код промо — золотая пунктирная
   рамка вместо «купонной» малины: скидка, а не распродажа.           */
.paid-promo-card{
  position:relative;
  width:var(--hv-axis); max-width:100%; margin:6mm auto;
  padding:5mm 12mm;
  display:flex; align-items:center; gap:14pt;
  background:var(--hv-paper);
  border:1px solid var(--hv-lineg);
  border-radius:3pt;
  box-shadow:0 4pt 20pt rgba(51,22,63,.07);
  box-sizing:border-box;
  font-family:var(--hv-sans);
}
.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:var(--hv-cream); color:var(--hv-ink3);
  border:1px solid var(--hv-lineg); border-radius:50%;
  cursor:pointer; font-size:10pt; font-weight:600;
  transition:background .18s, color .18s, border-color .18s;
}
.paid-promo-close:hover{
  background:var(--hv-cream2); color:var(--hv-plum2); border-color:var(--hv-gold-deco);
}
.paid-promo-icon{
  flex-shrink:0; width:42pt; height:42pt;
  display:flex; align-items:center; justify-content:center;
  font-size:20pt;
  background:var(--hv-cream); border:1px solid var(--hv-lineg);
  border-radius:50%;
}
.paid-promo-body{ flex:1; min-width:0; }
.paid-promo-eyebrow{
  font-size:7.5pt; font-weight:700; color:var(--hv-gold);
  letter-spacing:.18em; text-transform:uppercase; margin-bottom:4pt;
}
.paid-promo-title{
  font-family:var(--hv-serif); font-size:13pt; font-weight:700;
  color:var(--hv-ink); line-height:1.28; margin-bottom:4pt;
}
.paid-promo-title strong{
  font-family:var(--hv-sans); font-size:12pt; font-weight:700;
  padding:2pt 8pt; background:var(--hv-cream); color:var(--hv-plum2);
  border:1px dashed var(--hv-gold-deco); border-radius:4pt;
  letter-spacing:.1em; white-space:nowrap;
}
.paid-promo-sub{ font-size:9pt; color:var(--hv-ink3); 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:var(--hv-cream); color:var(--hv-ink2);
  border:1px solid var(--hv-lineg); border-radius:8pt;
  font-family:var(--hv-sans); font-size:8.5pt; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.paid-promo-btn:hover{
  border-color:var(--hv-gold-deco); color:var(--hv-plum2);
  transform:translateY(-1pt);
  box-shadow:0 3pt 10pt rgba(51,22,63,.12);
}
.paid-promo-btn.primary{
  background:linear-gradient(140deg,var(--hv-plum2),var(--hv-plum3));
  color:#fff; border-color:transparent;
  box-shadow:0 3pt 12pt rgba(76,33,104,.26);
}
.paid-promo-btn.primary:hover{ color:#fff; border-color:transparent; }
@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:4pt; }
  .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; font-size:8pt;
    letter-spacing:.02em; gap:4pt;
  }
}

/* ── ТОСТ («Ссылка скопирована») ──────────────────────────────────────
   Жил двумя одинаковыми копиями — в v3 и pair_show, обе на чёрной
   пилюле с Outfit и изумрудной галочкой. Теперь один компонент.
   Правки размеров в pt оставлены: тост живёт на A4-листах отчёта,
   где вся типографика в pt.                                          */
.paid-toast{
  position:fixed; top:84px; left:50%; transform:translate(-50%,-8px);
  z-index:9999;
  padding:10pt 20pt;
  background:var(--hv-plum); color:#fff;
  font-family:var(--hv-sans); font-size:10.5pt; font-weight:600;
  letter-spacing:.01em;
  border-radius:999pt;
  box-shadow:0 14pt 36pt rgba(51,22,63,.34);
  opacity:0; pointer-events:none;
  transition:opacity .22s, transform .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:17pt; height:17pt; border-radius:50%;
  background:var(--hv-gold-deco); color:#fff;
  font-size:9pt; font-weight:700;
}
@media(max-width:600px){
  .paid-toast{ top:64px; font-size:10pt; padding:9pt 16pt; }
}
@media print{ .paid-toast{ display:none !important; } }

/* ── ВЫДВИЖНОЕ МЕНЮ (бургер) ──────────────────────────────────────────
   Раньше жило инлайновым <style> в _header_v3 и осталось от v5: белая
   панель, холодный сланец (#0f172a/#64748b/#e2e8f0), фиолет #7c3aed,
   Outfit. При открытии поверх кремового сайта выезжал кусок чужого
   дизайна. Здесь — тот же макет в hv-палитре.

   Иконки-эмодзи оставлены: они несут навигационный смысл. Убрана
   только их цветная плашка — теперь бумажный квадрат с золотой рамкой,
   эмодзи читается как штамп, а не как пятно.                        */
.sm-backdrop{
  position:fixed; inset:0; z-index:998;
  background:rgba(42,33,48,.5);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; pointer-events:none;
  transition:opacity .28s ease;
}
.sm-backdrop.open{ opacity:1 !important; pointer-events:auto !important; }

.sm-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:999;
  width:340px; max-width:92vw;
  background:var(--hv-cream);
  box-shadow:-24px 0 64px rgba(51,22,63,.22);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.32,.72,0,1);
  font-family:var(--hv-sans);
  overflow:hidden;
}
.sm-drawer.open{ transform:translateX(0) !important; }
@media(max-width:380px){ .sm-drawer{ width:100vw; max-width:100vw; } }

.sm-drawer-head{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  background:var(--hv-paper);
  border-bottom:1px solid var(--hv-lineg);
}
.sm-drawer-brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--hv-serif); font-size:1.1rem; font-weight:700;
  color:var(--hv-ink); text-decoration:none;
}
.sm-drawer-brand img{ display:block; }
.sm-drawer-close{
  flex-shrink:0;
  width:36px; height:36px; border-radius:10px;
  background:var(--hv-cream); border:1px solid var(--hv-lineg);
  color:var(--hv-ink2); font-size:15px; line-height:1;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .18s, border-color .18s, color .18s;
}
.sm-drawer-close:hover{
  background:var(--hv-cream2); border-color:var(--hv-gold-deco); color:var(--hv-plum2);
}

.sm-drawer-body{
  flex:1 1 auto; overflow-y:auto;
  padding:18px 16px 12px;
  -webkit-overflow-scrolling:touch;
}

.sm-group{ margin-bottom:22px; }
.sm-group:last-child{ margin-bottom:0; }
.sm-group-title{
  font-size:.62rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--hv-gold);
  margin:0 8px 9px;
}

.sm-link{
  display:flex; align-items:center; gap:14px;
  padding:12px;
  border-radius:10px;
  color:var(--hv-ink); text-decoration:none;
  transition:background .18s, transform .18s;
}
.sm-link:hover, .sm-link:active{
  background:rgba(76,33,104,.055);
  transform:translateX(2px);
}
.sm-link-icon{
  flex-shrink:0;
  width:40px; height:40px; border-radius:8px;
  background:var(--hv-paper); border:1px solid var(--hv-lineg);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.05rem;
}
.sm-link-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sm-link-name{
  font-family:var(--hv-serif); font-size:.95rem; font-weight:600;
  color:var(--hv-ink); line-height:1.25;
}
.sm-link-sub{
  font-size:.72rem; color:var(--hv-ink3); line-height:1.35;
  /* подпись всегда в одну строку — обрезаем многоточием */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sm-link-arrow{
  flex-shrink:0;
  font-size:14px; color:var(--hv-gold-deco); opacity:.55;
  transition:color .18s, opacity .18s, transform .18s;
}
.sm-link:hover .sm-link-arrow{
  color:var(--hv-plum3); opacity:1; transform:translateX(3px);
}

/* Акцентная ссылка (тарифы) */
.sm-link-accent{
  background:var(--hv-paper);
  border:1px solid var(--hv-lineg);
}
.sm-link-accent .sm-link-icon{
  background:linear-gradient(140deg,var(--hv-plum2),var(--hv-plum3));
  border-color:transparent; color:#fff;
}

/* Мини-ссылки (конфиденциальность/оферта/карта) — одной строкой */
.sm-group-mini{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  padding:12px 14px 0;
  border-top:1px solid var(--hv-lineg);
  margin-top:6px;
}
.sm-mini-link{
  font-size:.75rem; color:var(--hv-ink3); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s, border-color .18s;
}
.sm-mini-link:hover{ color:var(--hv-plum3); border-bottom-color:var(--hv-lineg); }

.sm-drawer-foot{
  flex-shrink:0;
  padding:14px 22px max(14px, env(safe-area-inset-bottom));
  background:var(--hv-cream2);
  border-top:1px solid var(--hv-lineg);
}
.sm-foot-cta-wrap{ margin-bottom:10px; }
.sm-foot-cta{
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:14px 20px;
  background:linear-gradient(140deg,var(--hv-plum2),var(--hv-plum3));
  color:#fff; text-decoration:none;
  border-radius:12px;
  font-family:var(--hv-sans); font-size:.9rem; font-weight:600;
  letter-spacing:.01em;
  box-shadow:0 6px 20px rgba(76,33,104,.26);
  transition:transform .18s, box-shadow .18s;
}
.sm-foot-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(76,33,104,.34);
}
.sm-foot-meta{
  text-align:center;
  font-size:.7rem; color:var(--hv-ink3);
  letter-spacing:.04em;
}

/* Бургер → крест */
.hvh-burger{ position:relative; z-index:1000; }
.hvh-burger span{ transition:background .18s, transform .28s ease, opacity .18s ease; }
/* 7px = height 2 + gap 5 — ровно межосевое расстояние полосок,
   иначе крест сходится не в центре кнопки. */
.hvh-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hvh-burger.open span:nth-child(2){ opacity:0; }
.hvh-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

body.sm-open{ overflow:hidden; }

@media print{ .sm-backdrop, .sm-drawer{ display:none !important; } }

/* ── ПОДВАЛ ───────────────────────────────────────────────────────── */
.hvf{
  background:var(--hv-cream2);
  border-top:1px solid var(--hv-lineg);
  font-family:var(--hv-sans);
  color:var(--hv-ink2);
}
/* ⚠️ никакого margin-top у .hvf: кремовый фон принадлежит СТРАНИЦЕ, а не
   body (body.bg-white). Внешний отступ был бы прозрачным и светил белой
   полосой между контентом и подвалом. Воздух даём только паддингом внутрь. */
.hvf-in{
  width:var(--hv-axis); max-width:calc(100% - 32px);
  margin:0 auto; padding:60px 0 0;
}
.hvf-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px;
}
.hvf-brand-name{
  display:flex; align-items:center; gap:9px;
  font-family:var(--hv-serif); font-weight:700; font-size:1.16rem;
  color:var(--hv-ink); margin-bottom:11px;
}
.hvf-brand-name img{ width:24px; height:24px; }
.hvf-brand-name i{ color:var(--hv-gold-deco); font-style:normal; }
.hvf-desc{ font-size:.84rem; line-height:1.65; color:var(--hv-ink3); max-width:290px; }

/* подпись метода — брендовая строка на своём месте */
.hvf-method{
  margin-top:14px; padding-top:13px;
  border-top:1px solid var(--hv-lineg);
  font-size:.78rem; line-height:1.6; color:var(--hv-ink3); max-width:290px;
}
.hvf-method b{ font-family:var(--hv-serif); font-weight:600; color:var(--hv-ink2); }

.hvf-col-t{
  font-size:.66rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--hv-gold);
  margin-bottom:13px; display:flex; align-items:center; gap:9px;
}
.hvf-col-t::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,var(--hv-lineg),transparent);
}
.hvf-links{ list-style:none; margin:0; padding:0; }
.hvf-links li{ margin-bottom:8px; }
.hvf-links a{
  font-size:.86rem; color:var(--hv-ink2); text-decoration:none;
  transition:color .18s; border-bottom:1px solid transparent;
}
.hvf-links a:hover{ color:var(--hv-plum3); border-bottom-color:var(--hv-lineg); }

.hvf-legal{
  margin-top:15px; font-size:.72rem; line-height:1.75; color:var(--hv-ink3);
}
.hvf-bottom{
  margin-top:36px; padding:15px 0 22px;
  border-top:1px solid var(--hv-line);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
  font-size:.75rem; color:var(--hv-ink3);
}

@media(max-width:860px){
  .hvf-grid{ grid-template-columns:1fr 1fr; gap:26px; }
  .hvf-desc, .hvf-method{ max-width:none; }
}
@media(max-width:520px){
  .hvf-in{ padding-top:44px; max-width:calc(100% - 24px); }
  .hvf-grid{ grid-template-columns:1fr; gap:22px; }
  .hvf-bottom{ margin-top:26px; flex-direction:column; align-items:flex-start; }
}


/* Промо-плашка на мобиле: было три строки — текст переносился, а
   крестик уезжал на свою. Ужимаем кегль, разрешаем перенос ТОЛЬКО
   внутри текста и прижимаем крестик к правому краю абсолютом. */
.hv-promo{ position:relative; }
.hv-promo-close{ position:absolute; right:8px; top:50%; transform:translateY(-50%); margin:0; }
@media(max-width:600px){
  .hv-promo{ padding:7px 30px 7px 12px; gap:6px; font-size:12px; line-height:1.35; }
  .hv-promo-inner{ gap:5px; }
  .hv-promo-icon{ font-size:13px; }
}
@media(max-width:380px){
  .hv-promo{ font-size:11.5px; }
}

/* ══════════════════════════════════════════════════════════════════
   СТАТЬИ АРКАНОВ — надстройка над ядром.
   06.08.2026: сначала вынесли из инлайнового <style> в отдельный файл,
   затем влили сюда. Причина: layout подключает стили через
   stylesheet_link_tag :app, а он забирает ВСЕ файлы папки — отдельный
   hv_article.css всё равно грузился на каждой странице, да ещё дважды
   и раньше hv.css, из-за чего ядро перебивало надстройку на равной
   специфичности. Один файл — один порядок, спорить нечему.
   ══════════════════════════════════════════════════════════════════ */
/* Полоса прогресса чтения. Раньше была фиолетовой и шла в паре с боковым
     rail'ом; rail убран (дублировал живое оглавление), полоса осталась —
     она ненавязчива и показывает длину статьи. */
  .hv-progress{ position:fixed; top:0; left:0; right:0; height:3px; background:transparent; z-index:60; pointer-events:none; }
  .hv-progress-bar{ height:100%; width:0; background:linear-gradient(90deg,var(--hv-goldb),var(--hv-gold-deco)); transition:width .1s linear; }

  /* Хлебные крошки. Свои, а не layouts/_breadcrumbs: тот партиал выводит ещё
     и BreadcrumbList JSON-LD, а он уже есть в голове статьи — вышел бы дубль. */
  /* Крошек здесь больше нет: статья использует общий .hv-crumbs + .ds-breadcrumbs,
     как хвост, программы и прогноз. Свой набор правил давал другой кегль,
     выравнивание по левому краю и другой отступ от шапки до хиро. */

  /* Хиро статьи: карта Таро поверх широкого баннера. Числа арканов крупные,
     как на страницах программ. */
  .hv-art-hero{ padding:20mm 20mm 14mm; }
  @media(max-width:760px){ .hv-art-hero{ padding:26px 20px 24px; } }
  .hv-art-meta{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
    font-size:.8rem; color:rgba(246,231,189,.72); margin-top:18px; }
  .hv-art-meta a{ color:var(--hv-goldl); text-decoration:none; border-bottom:1px solid rgba(217,180,90,.4); }
  .hv-art-meta i{ font-style:normal; opacity:.5; }
  .hv-art-stage{ position:relative; max-width:760px; margin:26px auto 0; }
  .hv-art-stage > img{ display:block; width:100%; height:auto; border-radius:16px;
    box-shadow:0 18px 50px rgba(20,8,28,.45); }
  /* Карта лежит ВНУТРИ баннера, а не свисает с него: у .hv-pg стоит
     overflow:hidden, и вынос за нижний край просто обрезался бы. */
  /* Только позиционирование: как карта выглядит — забота .hv-arc-frame
     (общий компонент в hv.css). Раньше рамка и тень дублировались здесь
     своими значениями и уже отличались от прогнозных. */
  .hv-art-card{ position:absolute; right:20px; bottom:20px; --afw:126px; }
  @media(max-width:600px){ .hv-art-card{ --afw:84px; right:12px; bottom:12px; } }

  .hv-art-intro{ font-family:var(--hv-script); font-style:italic; font-size:1.26rem; line-height:1.6;
    color:var(--hv-ink2); max-width:640px; margin:0 auto; text-align:center; }
  .hv-art-intro p{ margin:0 0 12px; }
  .hv-art-intro a{ color:var(--hv-gold); text-decoration:none; border-bottom:1px solid rgba(168,132,43,.35); }

  /* Оглавление — вместо бокового rail'а. Двух колонок хватает на 8 пунктов. */
  .hv-toc{ max-width:660px; margin:0 auto; background:var(--hv-paper); border:1px solid var(--hv-line);
    border-radius:16px; padding:18px 22px; }
  .hv-toc-t{ font-family:var(--hv-label); font-size:.62rem; font-weight:700; letter-spacing:.22em;
    text-transform:uppercase; color:var(--hv-gold); text-align:center; margin-bottom:12px; }
  /* Было columns:2 — многоколоночная раскладка режет список по высоте, и
     строки левой колонки не совпадают со строками правой: у пунктов разное
     число строк. Grid с заданным числом рядов заполняется так же (сверху
     вниз, потом вторая колонка), но ряды общие для обеих колонок — пункты
     встают друг напротив друга. */
  .hv-toc ol{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:1fr 1fr; gap:2px 26px;
    grid-auto-flow:column; grid-template-rows:repeat(var(--toc-rows,4), auto);
  }
  @media(max-width:640px){
    .hv-toc ol{ grid-template-columns:1fr; grid-auto-flow:row; grid-template-rows:none; }
  }
  .hv-toc li{ margin:0 0 5px; }
  .hv-toc a{ display:flex; gap:9px; align-items:baseline; text-decoration:none; color:var(--hv-ink2);
    font-size:.92rem; line-height:1.4; padding:3px 6px; border-radius:8px; }
  .hv-toc a:hover{ background:rgba(168,132,43,.07); color:var(--hv-plum2); }
  .hv-toc a.active{ color:var(--hv-plum2); font-weight:650; }
  .hv-toc a b{ font-family:var(--hv-serif); font-size:.86rem; color:var(--hv-gold); flex:0 0 auto; }

  /* Ресурс / тень — таблицей вместо шестнадцати отдельных плашек.
     Тот же приём, что «минус → плюс» на страницах программ. */
  .hv-tr{ width:100%; border-collapse:collapse; max-width:720px; margin:0 auto; font-size:.92rem; }
  .hv-tr th{ font-family:var(--hv-label); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
    padding:0 12px 9px; text-align:left; font-weight:700; width:50%; }
  .hv-tr .th-pl{ color:var(--hv-plus); }
  .hv-tr .th-mn{ color:var(--hv-minus); }
  .hv-tr td{ padding:12px; border-top:1px solid var(--hv-line); vertical-align:top; line-height:1.5; }
  .hv-tr tr:hover td{ background:rgba(168,132,43,.045); }
  .hv-tr b{ display:block; font-family:var(--hv-serif); font-weight:700; font-size:1rem; margin-bottom:3px; }
  .hv-tr .pl b{ color:var(--hv-plus); }
  .hv-tr .mn b{ color:var(--hv-minus); }
  .hv-tr span{ color:var(--hv-ink2); font-size:.88rem; }
  @media(max-width:640px){
    .hv-tr, .hv-tr tbody, .hv-tr tr, .hv-tr td{ display:block; width:100%; }
    .hv-tr thead{ display:none; }
    .hv-tr tr{ margin-bottom:10px; border:1px solid var(--hv-line); border-radius:12px; overflow:hidden; background:var(--hv-paper); }
    .hv-tr td{ border-top:none; }
    .hv-tr td.mn{ border-top:1px solid var(--hv-line); }
    .hv-tr td::before{ display:block; font-family:var(--hv-label); font-size:.58rem; letter-spacing:.14em;
      text-transform:uppercase; margin-bottom:4px; }
    .hv-tr td.pl::before{ content:'В ресурсе'; color:var(--hv-plus); }
    .hv-tr td.mn::before{ content:'В тени';    color:var(--hv-minus); }
  }

  /* Паспорт аркана: планета, буква, архетип, аффирмация. Раньше — простыня
     из «**Ключ:** значение» подряд. */
  .hv-pass{ max-width:660px; margin:0 auto; background:var(--hv-paper); border:1px solid var(--hv-line);
    border-left:3px solid var(--hv-gold); border-radius:14px; padding:18px 22px; }
  .hv-pass-t{ font-family:var(--hv-serif); font-weight:700; font-size:1.06rem; color:var(--hv-ink); margin-bottom:12px; }
  .hv-pass-row{ display:flex; gap:14px; align-items:baseline; padding:9px 0; border-top:1px solid var(--hv-line); }
  .hv-pass-row:first-of-type{ border-top:none; padding-top:0; }
  .hv-pass-k{ flex:0 0 132px; font-family:var(--hv-label); font-size:.62rem; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; color:var(--hv-ink3); }
  .hv-pass-v{ color:var(--hv-ink2); font-size:.94rem; line-height:1.55; }
  .hv-pass-q{ font-family:var(--hv-script); font-style:italic; font-size:1.12rem; color:var(--hv-plum2); line-height:1.5; }
  .hv-pass-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .hv-pass-chips span{ font-family:var(--hv-label); font-size:.7rem; font-weight:600; color:var(--hv-ink2);
    background:var(--hv-cream2); border-radius:999px; padding:4px 11px; }
  @media(max-width:560px){ .hv-pass-row{ flex-direction:column; gap:5px; } .hv-pass-k{ flex:none; } }

  
  
  /* Буквы позиций — тем же шрифтом, что бейджи .hv-pos-badge под схемой.
     В разметке был Outfit, который на странице даже не загружается. */
  .hv-pos-svg text{ font-family:var(--hv-serif); }
  .hv-pos-svg .ps-let{ fill:#fff; font-weight:800;
    text-shadow:0 1px 2px rgba(51,22,63,.28); }
  /* Градиенты узлов. Светлые концы — осветлённые оттенки токенов,
     нужные ровно здесь (см. тот же приём в перекраске mini-calc ниже). */
  #hvpos-grad-center   stop:first-child{ stop-color:var(--hv-goldb); }
  #hvpos-grad-center   stop:last-child{  stop-color:var(--hv-gold-deco); }
  #hvpos-grad-purple   stop:first-child{ stop-color:var(--hv-lilac); }
  #hvpos-grad-purple   stop:last-child{  stop-color:var(--hv-plum2); }
  #hvpos-grad-red      stop:first-child{ stop-color:#d08aa4; }
  #hvpos-grad-red      stop:last-child{  stop-color:var(--hv-rose); }
  #hvpos-grad-blue     stop:first-child{ stop-color:#9db4d8; }
  #hvpos-grad-blue     stop:last-child{  stop-color:var(--hv-blue); }
  #hvpos-grad-darkblue stop:first-child{ stop-color:var(--hv-blue); }
  #hvpos-grad-darkblue stop:last-child{  stop-color:var(--hv-plum); }
  #hvpos-grad-green    stop:first-child{ stop-color:#8fc0a4; }
  #hvpos-grad-green    stop:last-child{  stop-color:var(--hv-plus); }
  #hvpos-grad-orange   stop:first-child{ stop-color:#e0a15e; }
  #hvpos-grad-orange   stop:last-child{  stop-color:var(--hv-gold-deco); }
  #hvpos-grad-white    stop:first-child{ stop-color:#fff; }
  #hvpos-grad-white    stop:last-child{  stop-color:var(--hv-paper); }

  /* Вопросы-ответы по позициям — под карточками, отдельным слоем.
     Жирный вопрос делаем сливовым: он работает подзаголовком внутри блока. */
  .hv-pos-outro{ max-width:660px; margin:18px auto 0; padding-top:18px;
    border-top:1px solid var(--hv-line); }
  .hv-pos-outro p{ font-size:.96rem; }
  .hv-pos-outro p > strong:first-child{ color:var(--hv-plum2); }

  /* Знаменитости: карточки с датой и позициями, а не сплошной список. */
  .hv-fam{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; max-width:720px; margin:0 auto; }
  @media(max-width:700px){ .hv-fam{ grid-template-columns:1fr; } }
  .hv-fam-card{ background:var(--hv-paper); border:1px solid var(--hv-line); border-top:3px solid var(--c,var(--hv-gold));
    border-radius:14px; padding:15px 17px; }
  .hv-fam-name{ font-family:var(--hv-serif); font-weight:700; font-size:1.06rem; color:var(--hv-ink); }
  .hv-fam-line{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:5px 0 9px; }
  .hv-fam-date{ font-family:var(--hv-label); font-size:.72rem; font-weight:600; color:var(--hv-gold);
    background:var(--hv-golds); border-radius:999px; padding:2px 10px; }
  .hv-fam-role{ font-size:.78rem; color:var(--hv-ink3); }
  .hv-fam-note{ font-size:.9rem; color:var(--hv-ink2); line-height:1.6; }
  .hv-fam-note a{ color:var(--hv-gold); text-decoration:none; border-bottom:1px solid rgba(168,132,43,.35); }
  .hv-fam-note p{ margin:0 0 8px; }
  .hv-fam-fn{ display:block; font-size:.76rem; color:var(--hv-ink3); margin-top:7px; }

  /* Подкраска секций — ритм чтения на длинной странице. Была тремя
     инлайновыми градиентами в разметке, теперь два класса. */
  .hv-tint-lilac{ background:linear-gradient(180deg,transparent,rgba(130,102,179,.045)); }
  .hv-tint-gold{  background:linear-gradient(180deg,transparent,rgba(168,132,43,.05)); }

  /* Сноска про однофамильцев — розовая врезка. */
  .hv-fam-warn{ background:var(--hv-roses); border-left:3px solid var(--hv-rose);
    padding:8px 12px; border-radius:0 8px 8px 0; }

  /* Практики проработки — нумерованные шаги. */
  .hv-steps{ max-width:660px; margin:0 auto; counter-reset:hvstep; }
  .hv-step{ display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--hv-line); }
  .hv-step:first-child{ border-top:none; padding-top:0; }
  .hv-step-n{ flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-family:var(--hv-serif); font-weight:800; font-size:.96rem;
    color:var(--hv-gold); background:var(--hv-golds); border:1px solid var(--hv-lineg); }
  .hv-step-t{ font-family:var(--hv-serif); font-weight:700; font-size:1.04rem; color:var(--hv-ink); margin-bottom:5px; }
  .hv-step-b{ font-size:.94rem; color:var(--hv-ink2); line-height:1.62; }
  .hv-step-b p{ margin:0 0 8px; }
  .hv-step-b a{ color:var(--hv-gold); text-decoration:none; border-bottom:1px solid rgba(168,132,43,.35); }

  /* Пара: вместо формы на две даты посреди чтения — карточка-ссылка.
     Форма здесь конвертировала плохо, а внимание забирала как полноценный CTA. */
  .hv-pair{ display:flex; align-items:center; gap:16px; max-width:660px; margin:22px auto 0;
    background:var(--hv-paper); border:1px solid var(--hv-line); border-left:3px solid var(--hv-rose);
    border-radius:14px; padding:16px 18px; text-decoration:none; color:inherit; transition:.15s; }
  .hv-pair:hover{ border-color:var(--hv-rose); box-shadow:0 8px 24px rgba(192,95,131,.14); }
  .hv-pair-ic{ flex:0 0 auto; font-size:1.7rem; }
  .hv-pair b{ display:block; font-family:var(--hv-serif); font-weight:700; font-size:1.04rem; color:var(--hv-ink); }
  .hv-pair span{ display:block; font-size:.88rem; color:var(--hv-ink3); margin-top:3px; }
  .hv-pair i{ flex:0 0 auto; font-style:normal; color:var(--hv-rose); font-size:1.2rem; }
  @media(max-width:520px){ .hv-pair{ flex-wrap:wrap; } .hv-pair i{ display:none; } }

  /* Нумия — одна строка с кнопкой вместо блока на пол-экрана. */
  /* ── CTA Нумии ───────────────────────────────────────────────────────
     Узкая тёмная плашка внутри светлой статьи. Правило: она не должна
     разрастаться — большое тёмное пятно перестают читать.

     ⚠️ Здесь НЕТ селекторов вида `.hv-nym span`. Такой селектор (класс+тег)
     по специфичности выше, чем `.hv-nym-soon`, и подминал под себя кнопки:
     MAX-пилюля — это <span>, она получала display:block вместо inline-flex
     (знак вставал НАД словом), а подписи кнопок красились в светло-лиловый
     цвет описания и переставали читаться на золоте. Каждый элемент теперь
     адресуется своим классом.                                            */
  .hv-nym{
    display:flex; align-items:center; gap:16px; max-width:660px; margin:0 auto;
    border-radius:16px; padding:16px 18px; color:var(--hv-on-dark);
    background:radial-gradient(ellipse 70% 90% at 12% 0%,rgba(217,180,90,.20),transparent 60%),
      linear-gradient(150deg,var(--hv-plum) 0%,var(--hv-plum2) 70%,var(--hv-plum3) 100%);
  }

  /* Аватар с подписью — сразу видно, кто отвечает. */
  .hv-nym-who{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:5px; }
  .hv-nym-ic{
    width:46px; height:46px; border-radius:50%; display:block;
    object-fit:cover; object-position:50% 22%;
    background:rgba(217,180,90,.18); border:1px solid rgba(217,180,90,.45);
  }
  .hv-nym-who i{
    font-style:normal; font-family:var(--hv-label); font-size:.62rem;
    font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--hv-goldb);
  }

  .hv-nym-body{ flex:1 1 auto; min-width:0; }
  .hv-nym-body b{
    display:block; font-family:var(--hv-serif); font-weight:700;
    font-size:1.02rem; line-height:1.25; color:#fff;
  }
  .hv-nym-desc{
    display:block; margin-top:5px; font-size:.8rem;
    color:var(--hv-on-dark2); line-height:1.5;
  }
  /* Строка про бесплатное — отдельной строкой и золотом: снятие возражения,
     её ищут глазами; в общем абзаце она терялась. */
  .hv-nym-free{
    display:block; margin-top:6px; font-size:.76rem; font-weight:600;
    color:var(--hv-goldb);
  }

  /* Кнопки: одинаковая ширина, знак и подпись всегда в одну строку. */
  /* Кнопки — в столбик. В ряд они забирали 256px из 643, и текст ужимался
     в колонку 275px: описание разваливалось на четыре строки, а плашка
     вырастала до 198px — ровно то «большое тёмное пятно», которое читать
     перестают. Столбиком они занимают 124px, текст получает ~400px и
     укладывается в три строки. */
  .hv-nym-acts{ flex:0 0 auto; margin-left:auto; display:flex; flex-direction:column; gap:7px; }
  .hv-nym-btn, .hv-nym-soon{
    display:inline-flex; align-items:center; justify-content:center;
    flex:0 0 auto; flex-wrap:nowrap; gap:7px; min-width:124px;
    font-family:var(--hv-label); font-weight:700; font-size:.78rem;
    border-radius:999px; padding:8px 15px; line-height:1.1; white-space:nowrap;
  }
  .hv-nym-btn svg, .hv-nym-soon svg{ width:14px; height:14px; flex:0 0 auto; }
  .hv-nym-lbl{ white-space:nowrap; }
  .hv-nym-btn{
    text-decoration:none; color:var(--hv-ink);
    background:linear-gradient(135deg,var(--hv-goldl),var(--hv-goldb));
    transition:transform .15s, box-shadow .15s;
  }
  .hv-nym-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(217,180,90,.35); }
  /* MAX — в собственных цветах: градиент из официального знака
     (#4cf → #53e → #93d). Две кнопки различаются мгновенно и не спорят. */
  .hv-nym-btn--max{ background:linear-gradient(135deg,#4cf 0%,#53e 62%,#93d 100%); color:#fff; }
  .hv-nym-btn--max:hover{ box-shadow:0 6px 16px rgba(83,62,238,.45); }
  /* Пока адреса нет — тот же градиент, но приглушённый, и это не ссылка. */
  .hv-nym-soon{
    background:linear-gradient(135deg,#4cf 0%,#53e 62%,#93d 100%);
    color:rgba(255,255,255,.75); opacity:.4; cursor:default;
  }

  @media(max-width:720px){
    .hv-nym{ flex-wrap:wrap; gap:12px; }
    .hv-nym-body{ flex:1 1 200px; }
    /* На узком экране столбик не нужен — ширины хватает на две кнопки в ряд. */
    .hv-nym-acts{ margin-left:0; width:100%; flex-direction:row; }
    .hv-nym-acts > *{ flex:1 1 0; min-width:0; }
  }

  
  /* ── Перекраска mini-calc ──────────────────────────────────────────────
     Виджет остаётся единым файлом (_mini_calc), у него своя палитра --mc-*
     в фиолетово-лавандовой гамме блога. Переопределяем токены на hv-цвета
     и правим только шрифты заголовков: так виджет садится в крем/золото без
     форка разметки, а если пилот примут — этот блок переедет внутрь. */
  .hv-mc{ --mc-purple:var(--hv-plum3); --mc-purple-2:var(--hv-lilac); --mc-purple-soft:var(--hv-lilacs);
    --mc-indigo:var(--hv-plum2); --mc-pink:var(--hv-rose);
    --mc-gold:var(--hv-gold-deco); --mc-gold-2:var(--hv-goldb); --mc-gold-soft:var(--hv-golds);
    --mc-cream:var(--hv-paper); --mc-lavender:var(--hv-cream);
    --mc-ink-1:var(--hv-ink); --mc-ink-2:var(--hv-ink2); --mc-ink-3:var(--hv-ink2);
    --mc-ink-4:var(--hv-ink3); --mc-ink-5:var(--hv-ink3);
    --mc-line:var(--hv-line);
    --mc-shadow-sm:0 4px 20px rgba(51,22,63,.07);
    --mc-shadow-md:0 12px 40px rgba(51,22,63,.08);
    --mc-shadow-lg:0 24px 70px rgba(51,22,63,.12);
    /* Градиенты заданы значениями, а не через токены цвета, — перекрываем
       отдельно, иначе кнопка и акценты остались бы фиолетовыми. */
    --mc-grad-brand:linear-gradient(135deg,var(--hv-plum2) 0%,var(--hv-plum3) 55%,var(--hv-lilac) 100%);
    --mc-grad-gold:linear-gradient(135deg,var(--hv-goldb) 0%,var(--hv-gold-deco) 100%);
    --mc-grad-cream:linear-gradient(135deg,var(--hv-paper) 0%,var(--hv-golds) 100%); }
  .hv-mc .mc-wrap{ margin:0 auto; }
  /* Виджет набран Outfit'ом (11 объявлений) — третья семья на hv-странице.
     Гасим наследованием от .hv-mc; заголовкам ниже явно возвращается
     серифная. Форк разметки виджета не нужен.
     ⚠️ Два класса, а не `.hv-mc *`: у виджета свой <style> НИЖЕ по документу,
     и при равной специфичности (0,1,0) побеждал бы он. `.hv-mc .mc-wrap *`
     даёт (0,2,0) и выигрывает независимо от порядка. */
  .hv-mc, .hv-mc .mc-wrap{ font-family:var(--hv-sans); }
  .hv-mc .mc-wrap *{ font-family:inherit; }
  /* Схема матрицы внутри виджета: stop-color в CSS перебивает презентационный
     атрибут SVG, поэтому перекрасить можно без правки разметки виджета. */
  .hv-mc #mcCenter stop:first-child{ stop-color:var(--hv-goldb); }
  .hv-mc #mcCenter stop:last-child{ stop-color:var(--hv-gold-deco); }
  .hv-mc #mcPurple stop:first-child{ stop-color:var(--hv-lilac); }
  .hv-mc #mcPurple stop:last-child{ stop-color:var(--hv-plum2); }
  /* Ниже четыре литерала — светлые концы двухцветных градиентов схемы
     (#d08aa4 к розе, #9db4d8 к синему, #8fc0a4 к зелёному, #e0a15e к золоту).
     В токены не выносим: это не решения палитры, а осветлённые оттенки
     уже существующих токенов, нужные ровно в одном месте. */
  .hv-mc #mcRed stop:first-child{ stop-color:#d08aa4; }
  .hv-mc #mcRed stop:last-child{ stop-color:var(--hv-rose); }
  .hv-mc #mcBlue stop:first-child{ stop-color:#9db4d8; }
  .hv-mc #mcBlue stop:last-child{ stop-color:var(--hv-blue); }
  .hv-mc #mcDarkblue stop:first-child{ stop-color:var(--hv-blue); }
  .hv-mc #mcDarkblue stop:last-child{ stop-color:var(--hv-plum); }
  .hv-mc #mcGreen stop:first-child{ stop-color:#8fc0a4; }
  .hv-mc #mcGreen stop:last-child{ stop-color:var(--hv-plus); }
  .hv-mc #mcOrange stop:first-child{ stop-color:#e0a15e; }
  .hv-mc #mcOrange stop:last-child{ stop-color:var(--hv-gold-deco); }
  .hv-mc #mcGoldHit stop:first-child{ stop-color:var(--hv-goldl); }
  .hv-mc #mcGoldHit stop:last-child{ stop-color:var(--hv-gold-deco); }
  .hv-mc #mcWhite stop:last-child{ stop-color:var(--hv-paper); }
  .hv-mc #mcArrowPurple path{ fill:var(--hv-plum3); }
  .hv-mc #mcArrowRed path{ fill:var(--hv-rose); }
  .hv-mc .mc-hero-title,
  .hv-mc .mc-verdict-title{ font-family:var(--hv-serif); }
  .hv-mc .mc-hero-title em{ font-style:italic; color:var(--hv-plum3); }
  .hv-mc .mc-eyebrow-line{ font-family:var(--hv-label); letter-spacing:.3em; color:var(--hv-gold); }


/* ── КАЛЬКУЛЯТОР КАРТЫ ЗДОРОВЬЯ ───────────────────────────────────────
   07.08, третья версия по референсу: слева компактная таблица в четыре
   колонки, справа светлый силуэт с точками чакр. Цвета — канонические
   цвета чакр (радуга снизу вверх): карту здоровья узнают по ним, без
   цвета это просто таблица чисел. Обрезанные webp-иконки убраны —
   вместо них точки на фигуре.                                          */
.hz-calc{ max-width:660px; margin:0 auto; border:1px solid var(--hv-line);
  border-radius:16px; overflow:hidden; background:var(--hv-paper); }
.hz-head{ padding:15px 18px; text-align:center; color:var(--hv-on-dark);
  background:radial-gradient(ellipse 70% 90% at 12% 0%,rgba(217,180,90,.18),transparent 60%),
    linear-gradient(150deg,var(--hv-plum) 0%,var(--hv-plum2) 70%,var(--hv-plum3) 100%); }
.hz-in{ display:inline-flex; align-items:center; gap:10px; }
.hz-in span{ font-family:var(--hv-sans); font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--hv-goldb); }
.hz-in input{ height:38px; width:148px; text-align:center; border-radius:10px;
  border:1.5px solid rgba(217,180,90,.45); background:var(--hv-paper);
  font-family:var(--hv-sans); font-size:16px; font-weight:700; letter-spacing:.06em;
  color:var(--hv-ink); outline:none; }
.hz-note{ margin-top:8px; font-size:.72rem; color:var(--hv-on-dark2); }
.hz-note b{ color:var(--hv-goldb); }
.hz-body{ padding:14px 16px 16px; }

.hz-grid{ display:grid; grid-template-columns:minmax(0,1fr) 168px; gap:14px; align-items:start; }
.hz-fig{ margin:0; align-self:center; }
.hz-fig svg{ display:block; width:100%; height:auto; }

/* Таблица: колонка описания + три узкие колонки чисел. Слева лента-
   «позвоночник» из семи цветов — узнаваемый код карты здоровья. */
.hz-table{ position:relative; padding-left:13px; }
.hz-table::before{
  content:''; position:absolute; left:3px; top:34px; bottom:8px; width:4px; border-radius:2px;
  background:linear-gradient(180deg,#8b5fbf,#3f51b5,#2196c4,#3f9e5a,#d9a520,#e07b39,#d64364);
  opacity:.85;
}
.hz-thead, .hz-row{
  display:grid; grid-template-columns:minmax(0,1fr) 46px 46px 50px;
  gap:6px; align-items:center;
}
.hz-thead{ padding:2px 4px 8px; font-family:var(--hv-sans); font-size:.58rem;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--hv-ink3); }
.hz-thead span:not(:first-child){ text-align:center; }
.hz-row{ padding:8px 4px; border-top:1px dashed var(--hv-line); }
.hz-ch b{ display:block; font-family:var(--hv-serif); font-weight:700;
  font-size:.92rem; color:var(--c); line-height:1.15; }
.hz-ch span{ display:block; font-size:.68rem; color:var(--hv-ink3); margin-top:2px; line-height:1.3; }
.hz-n{ justify-self:center; display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:28px; padding:0 6px; border-radius:8px;
  font-family:var(--hv-serif); font-weight:700; font-size:.94rem;
  border:1px solid color-mix(in srgb, var(--c) 38%, var(--hv-line));
  color:var(--c); background:var(--hv-paper); }
a.hz-b{ background:var(--c); border-color:var(--c); color:#fff; text-decoration:none;
  transition:transform .12s, box-shadow .12s; }
a.hz-b:hover{ transform:translateY(-1px); box-shadow:0 4px 10px color-mix(in srgb, var(--c) 40%, transparent); }
.hz-rep{ font-style:normal; font-family:var(--hv-sans); font-size:.56rem;
  margin-left:3px; color:rgba(255,255,255,.85); }
.hz-row--total{ border-top:2px solid var(--hv-line); background:var(--hv-golds);
  border-radius:0 10px 10px 0; margin-top:2px; }

.hz-caption{ margin-top:11px; font-size:.72rem; color:var(--hv-ink3); line-height:1.55; }
.hz-caption b{ color:var(--hv-ink2); }
.hz-cta{ display:block; margin-top:11px; text-align:center; padding:12px 18px;
  border-radius:10px; background:linear-gradient(140deg,var(--hv-plum2),var(--hv-plum3));
  color:#fff; font-family:var(--hv-sans); font-weight:600; font-size:.9rem;
  text-decoration:none; }
@media(max-width:620px){
  .hz-grid{ grid-template-columns:1fr; }
  .hz-fig{ display:none; }   /* на мобиле таблица важнее фигуры */
  .hz-thead, .hz-row{ grid-template-columns:minmax(0,1fr) 42px 42px 46px; }
}

/* ── Врезка «частое заблуждение» ──────────────────────────────────────
   Серый callout этот блок не держал — проскакивал мимо глаза. Роза как
   сигнальный цвет: «здесь про ошибку», плюс метка сверху.              */
.hv-myth{
  max-width:660px; margin:0 auto; position:relative;
  background:var(--hv-roses); border:1px solid rgba(192,95,131,.32);
  border-radius:14px; padding:22px 24px 18px;
}
.hv-myth-label{
  display:inline-block; margin-bottom:10px; padding:5px 12px; border-radius:999px;
  background:var(--hv-rose); color:#fff;
  font-family:var(--hv-sans); font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.hv-myth .hv-prose p{ font-size:1rem; color:var(--hv-ink2); }
.hv-myth .hv-prose strong{ color:var(--hv-rose); }
.hv-myth .hv-prose p:last-child{ margin-bottom:0; }

/* ── Подзаголовки внутри прозы ────────────────────────────────────────
   article_md понижает h2/h3 в h4, и они выходили обычным жирным текстом,
   неотличимым от абзаца. Даём им серифное начертание и золотую метку —
   тот же язык, что у надзаголовков секций.                             */
.hv-prose h4,
.hv-prose h3.hv-sub{
  font-family:var(--hv-serif); font-weight:700; font-size:1.12rem;
  color:var(--hv-ink); margin:26px 0 10px; padding-left:14px; position:relative;
  scroll-margin-top:80px;
}
.hv-prose h4::before,
.hv-prose h3.hv-sub::before{
  content:''; position:absolute; left:0; top:.36em; width:4px; height:.86em;
  border-radius:2px; background:var(--hv-gold-deco);
}
.hv-prose h4 + p,
.hv-prose h3.hv-sub + p{ margin-top:0; }

/* ── Шапка виджета ────────────────────────────────────────────────────
   Была просто строка с полем на сливовой заливке. Теперь это шапка
   инструмента: метка, крупное поле, подпись-результат.                 */
.hz-head{ padding:20px 18px 18px; }
.hz-head-eb{
  font-family:var(--hv-sans); font-size:.6rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--hv-goldb);
  margin-bottom:10px;
}
.hz-head-t{
  font-family:var(--hv-serif); font-weight:700; font-size:1.24rem;
  color:#fff; margin-bottom:14px; line-height:1.2;
}
.hz-head-t em{ font-style:italic; color:var(--hv-goldb); }
.hz-in{ gap:0; background:rgba(255,253,249,.10); border:1px solid rgba(217,180,90,.42);
  border-radius:12px; padding:6px 6px 6px 16px; }
.hz-in span{ margin-right:12px; }
.hz-in input{ height:42px; width:170px; font-size:17px; border-width:0;
  background:var(--hv-paper); border-radius:9px; }
.hz-note{ margin-top:12px; font-size:.74rem; }



/* ── Кнопка внутри текста статьи ──────────────────────────────────────
   В контенте попадаются кнопки от старого шаблона: фиолет #7c3aed,
   радиус 999px, эмодзи. В дизайн-системе такой кнопки нет. Ловим их
   по инлайновому фону и приводим к hv: сливовый градиент, радиус 10.  */
.hv-prose a[style*="background"],
.hv-prose a[class*="cta"],
.hv-myth a[style*="background"]{
  display:inline-flex !important; align-items:center; gap:8px;
  background:linear-gradient(140deg,var(--hv-plum2),var(--hv-plum3)) !important;
  color:#fff !important; border:0 !important; border-radius:10px !important;
  padding:12px 22px !important; font-family:var(--hv-sans) !important;
  font-weight:600 !important; font-size:.9rem !important; text-decoration:none !important;
  box-shadow:0 6px 18px rgba(76,33,104,.26) !important;
  transition:transform .15s, box-shadow .15s;
}
.hv-prose a[style*="background"]:hover,
.hv-myth a[style*="background"]:hover{ transform:translateY(-1px); }

/* Личное обращение в блоке автора — тёплая врезка, а не курсив в подвале. */
.hv-author-note{
  margin-top:16px; padding:16px 18px; text-align:left;
  background:var(--hv-golds); border:1px solid var(--hv-lineg);
  border-radius:12px;
}
.hv-author-note-t{
  font-family:var(--hv-sans); font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--hv-gold);
  margin-bottom:8px;
}
.hv-author-note p{ font-size:.88rem; color:var(--hv-ink2); line-height:1.65; margin:0 0 8px; }
.hv-author-note p:last-child{ margin-bottom:0; }
.hv-author-note a{ color:var(--hv-gold); font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(168,132,43,.35); }

/* ── Таблицы в тексте статьи ──────────────────────────────────────────
   В контенте два разных вида таблиц, и их нельзя стричь под одну гребёнку:

   1) Обёрнутые в .blg-scroll-hint — размечены инлайном и НЕСУТ СМЫСЛ
      цветом: строка каждой чакры своего оттенка, слева цветная полоса.
      Их не трогаем совсем, только даём горизонтальную прокрутку на узком
      экране. Прошлая правка глушила их фон через !important — и цвета
      пропадали; это была ошибка.

   2) Простые <table> прямо в .hv-prose — без единого стиля: колонки
      схлопывались, текст соседних ячеек читался слитно. Вот им и нужна
      вёрстка. Селектор по ПРЯМОМУ потомку разводит эти два случая.     */
.hv-prose .blg-scroll-hint{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:22px 0 26px; }
.hv-prose .blg-scroll-hint table{ min-width:520px; }
.hv-prose .blg-scroll-hint-caption{
  font-size:.72rem; color:var(--hv-ink3); text-align:center; margin:-18px 0 24px;
}

.hv-prose > table{
  width:100%; border-collapse:collapse; margin:22px 0 26px;
  font-size:.9rem; background:var(--hv-paper);
  border:1px solid var(--hv-line); border-radius:12px; overflow:hidden;
}
.hv-prose > table th{
  padding:11px 16px; text-align:left; vertical-align:bottom;
  font-family:var(--hv-sans); font-size:.64rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--hv-ink3);
  background:var(--hv-cream2); border-bottom:1px solid var(--hv-line);
  border-right:1px solid var(--hv-line); white-space:nowrap;
}
.hv-prose > table td{
  padding:12px 16px; vertical-align:top; line-height:1.5;
  color:var(--hv-ink2);
  border-bottom:1px solid var(--hv-line); border-right:1px solid var(--hv-line);
}
.hv-prose > table th:last-child,
.hv-prose > table td:last-child{ border-right:0; }
.hv-prose > table tbody tr:last-child td{ border-bottom:0; }
.hv-prose > table tbody tr:nth-child(odd) td{ background:var(--hv-cream); }
.hv-prose > table td:first-child{
  font-family:var(--hv-serif); font-weight:700; font-size:1.02rem;
  color:var(--hv-plum2); white-space:nowrap;
}
@media(max-width:640px){
  .hv-prose > table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* ── Переход из виджета в полный расчёт ───────────────────────────────
   Подпись под виджетом ссылалась на «полный отчёт», а кнопки к нему не
   было (замечание Романа 07.08). Вид — как у .hz-cta карты здоровья,
   чтобы выход из любого виджета выглядел одинаково.                    */
.hv-mx-cta{ display:block; margin-top:12px; text-align:center; padding:12px 18px;
  border-radius:10px; background:linear-gradient(140deg,var(--hv-plum2),var(--hv-plum3));
  color:#fff; font-family:var(--hv-sans); font-weight:600; font-size:.9rem;
  text-decoration:none; transition:filter .2s; }
.hv-mx-cta:hover{ filter:brightness(1.08); }
.hv-mx-cta span{ display:block; margin-top:2px; font-weight:400; font-size:.76rem;
  color:var(--hv-on-dark2); }


/* ── ВЕЕР СОВМЕСТИМОСТИ (/sovmestimost/arkan-N) ───────────────────────
   Rose-акценты: страницы про пару, розовый = канонический цвет
   совместимости (лендинг пары, --c:#c05f83 в hv-more). */
.hv-hero--sovm{ box-shadow: inset 0 -3px 0 #c05f83; }
.hv-hero--sovm .hv-hero-eb{ color:#e8a8bf; }
/* Сердечко — РАЗДЕЛИТЕЛЬ в середине надписи, а не значок слева. */
.hv-eb-heart{ color:#e87ba0; letter-spacing:0; margin:0 .35em; font-size:1.05em; }

/* Поля виджета пары: тёплый rose-акцент вместо золота хвоста. Область
   ограничена .hv-mx--sovm, чтобы виджет кармического хвоста не поехал. */
/* Rose-акцент виджета пары.
   ⚠️ Шапка .hv-mx-head — ТЁМНАЯ (сливовый градиент, текст белый). Светлый
   фон здесь уже давал невидимый текст — правка 05.08 по скриншоту Романа,
   и я повторил её 13.08. Поэтому фон НЕ трогаем: розовый добавляем только
   тем, что читается на тёмном (светлые розовые тона), плюс светлое тело. */
.hv-mx--sovm .hv-mx-head{
  background:radial-gradient(ellipse 70% 90% at 50% -20%,rgba(232,123,160,.30),transparent 60%),
             linear-gradient(160deg,#3a1440 0%,#5c1f4e 68%,#71265c 100%); }
.hv-mx--sovm .hv-mx-eb{ color:#f3a9c2; }
.hv-mx--sovm .hv-mx-in span{ background:linear-gradient(160deg,#4a1740,#68204f); color:#f3a9c2; }
.hv-mx--sovm .hv-mx-in input{ border-color:rgba(232,123,160,.55); color:#7d2f4c; }
.hv-mx--sovm .hv-mx-in input:focus{ border-color:#e87ba0;
  box-shadow:0 10px 26px rgba(0,0,0,.3), 0 0 0 3px rgba(232,123,160,.22); }
.hv-mx--sovm .hv-mx-preset{ color:#e3b9c8; }
.hv-mx--sovm .hv-mx-preset b{ color:#fbdce6; }
.hv-mx--sovm .hv-mx-cta{ background:linear-gradient(140deg,#7d2f4c,#a8446a); }

/* Виджет пары использует классы hv-mx-* из виджета хвоста — стиль общий,
   свои правила не нужны. Оставлены только rose-акценты веера ниже. */
/* Сетка «другие арканы в совместимости»: компактные чипы вместо простыни. */
.hv-arcgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px; }
.hv-arcgrid a{ display:block; background:var(--hv-paper); border:1px solid var(--hv-line);
  border-radius:12px; padding:10px 12px; text-decoration:none; color:inherit;
  transition:.15s; border-top:3px solid rgba(192,95,131,.45); }
.hv-arcgrid a:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(51,22,63,.12);
  border-top-color:#c05f83; }
.hv-arcgrid .n{ font-family:var(--hv-serif); font-weight:800; font-size:1.15rem;
  color:#c05f83; }
.hv-arcgrid .t{ font-family:var(--hv-sans); font-weight:600; font-size:.83rem;
  line-height:1.25; margin-top:2px; }
.hv-arcgrid .p{ font-family:var(--hv-sans); font-size:.74rem; color:var(--hv-ink2);
  margin-top:3px; }
/* Сверка трактовки с фактами о паре-пресете (виджет веера совместимости). */
.hv-mx-demo{ margin:14px auto 0; max-width:640px; padding:13px 16px;
  background:linear-gradient(180deg,transparent,rgba(201,162,75,.07));
  border:1px dashed rgba(201,162,75,.5); border-radius:12px;
  font-family:var(--hv-sans); font-size:.87rem; line-height:1.55; color:var(--hv-ink2); }
.hv-mx-demo b{ color:var(--hv-ink); }.hv-mx-rest{ display:block; margin-top:7px; font-size:.86em; color:var(--hv-ink2); }
.hv-mx-rest a{ color:#a8446a; font-weight:600; }
/* Формула сочетания картами: «центр A + центр B = центр союза».
   Цвета подписей — канон матрицы: слагаемые фиолет, результат золото. */
/* Без рамки и подложки — блок живёт прямо в тексте (правка по скриншоту 13.08). */
.hv-pf{ display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap;
  margin:4px 0 12px; }
.hv-pf-i{ display:flex; flex-direction:column; align-items:center; width:64px;
  text-decoration:none; color:inherit; }
.hv-pf-i img{ border-radius:6px; border:1px solid var(--hv-line);
  box-shadow:0 5px 13px rgba(51,22,63,.16); background:#fff; display:block; }
.hv-pf-i b{ font-family:var(--hv-serif); font-weight:800; font-size:1rem;
  color:#4c2168; margin-top:6px; line-height:1; }
.hv-pf-i i{ font-style:normal; font-family:var(--hv-sans); font-size:.66rem;
  line-height:1.2; color:var(--hv-ink2); text-align:center; margin-top:2px; }
.hv-pf-i.is-res b{ color:var(--hv-gold); }
.hv-pf-i.is-res img{ border-color:rgba(201,162,75,.75);
  box-shadow:0 6px 16px rgba(168,132,43,.3); }
.hv-pf-i.is-res em{ font-style:normal; margin-top:3px; font-family:var(--hv-label);
  font-size:.55rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--hv-gold); text-align:center; }
.hv-pf-i[href]:hover img{ transform:translateY(-2px); transition:.15s; }
.hv-pf-op{ font-family:var(--hv-serif); font-weight:800; font-size:1.3rem;
  color:var(--hv-ink2); align-self:center; margin-top:-14px; }

@media (max-width:520px){
  .hv-pf{ gap:8px; }
  .hv-pf-i{ width:54px; }
  .hv-pf-i img{ width:54px; height:94px; }
}