/* ═══════════════════════════════════════════════════════════════════
   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;
    /* ── Токены отчётов и калькуляторов (10.09.2026, DESIGN.md, канон демо-8) ──
       Четыре цвета, которых в hv не было, потому что раньше не было ни полей
       ввода на кремовом листе, ни чисел арканов в цвете точки октограммы:
         --hv-field       белое поле ввода на кремовом листе (и код, и кружки оценки)
         --hv-oct-red     число потенциала и хвоста, как красная точка на октограмме
         --hv-plus-soft   тон колонки «ресурс» в блоке тень→ресурс
         --hv-minus-soft  тон колонки «тень» там же
       Золото чисел — это уже существующий --hv-gold-deco (#a8842b): 3.3:1 на
       креме, годится для крупных цифр и не годится для строчного текста, там
       остаётся --hv-gold. */
    --hv-field:#ffffff; --hv-oct-red:#b8433a;
    --hv-plus-soft:#eef2ee; --hv-minus-soft:#f4ede9;
    /* Две семьи. script и label — псевдонимы: не переписываем разом 21 компонент. */
    --hv-serif:'Playfair Display',Georgia,serif;
    --hv-sans:'Inter',-apple-system,system-ui,sans-serif;
    /* Отчёт набран Golos Text, а не Inter (решение вкуса 2, DESIGN.md).
       Отдельный токен, а не подмена --hv-sans: перевод статей на Golos —
       следующий шаг и отдельный замер CLS и позиций, а не побочный эффект
       переноса калькулятора. Когда --hv-sans станет Golos, этот токен
       схлопнется в псевдоним. */
    --hv-rep-sans:'Golos Text',-apple-system,system-ui,sans-serif;
    /* Пять размеров текста + два для цифр — счёт из DESIGN.md, правило 9.
       d — заголовок первого экрана, h — H2 главы, a — ответ главы,
       b — тело, s — мелкое; n — число аркана. */
    --hv-rep-fs-d:clamp(34px,8vw,44px); --hv-rep-fs-h:clamp(24px,5.4vw,30px);
    --hv-rep-fs-a:20px; --hv-rep-fs-b:17px; --hv-rep-fs-s:14px; --hv-rep-fs-n:28px;
    /* Колонка = лист 210 мм минус поля 20 мм. Воздух между главами. */
    --hv-rep-col:640px; --hv-rep-gap:56px;
    --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; } }
  /* Нижние 110 px держат место под липкой кнопкой покупки: она fixed,
     и без запаса перекрывала бы последний абзац. На посадочной
     совместимости этой кнопки больше нет (снята 10.09), а инлайн-отчёт
     держит свою внутри рамки — там запас превращался в полосу пустоты
     до самого футера (поймано Романом 10.09). Условие по самой кнопке,
     чтобы правило подстраивалось само. */
  .hvl:has(.hv-rep-land):not(:has(.hv-rep-stickycta)){ padding-bottom:22px; }
  .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 */
  /* Боковые 20mm — это 75,6px, и на экране 375 под текст оставалось 224px:
     лид набирался в три слова на строку. У .hv-sec мобильный отступ давно
     стоит (28px 20px), а до хиро руки не дошли — правим тем же брейкпоинтом
     и тем же значением, чтобы первый экран и остальная страница совпадали
     по краю. Вертикальные отступы не трогаем: воздух сверху здесь работает. */
  .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%); }
  @media(max-width:760px){ .hv-hero{ padding-left:20px; padding-right:20px; } }
  .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:not(.hv-mx-g){ 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); }
  /* Переключатель пола под полем даты (09.09.2026, ТЗ пары v2 задача 1; 13.09 —
     под полем и словами, а не «М Ж» поверх даты): полы едут в ссылку на полный
     расчёт, где от них зависит, кому отчёт говорит «вы». */
  .hv-mx-in:has(.hv-mx-g){ display:inline-flex; flex-direction:column; vertical-align:top; margin:8px 4px 4px; }
  .hv-mx-g{ display:flex; margin-top:7px; padding:2px; gap:2px;
    border:1px solid rgba(246,231,189,.28); border-radius:999px; background:rgba(0,0,0,.14); }
  .hv-mx-g button{ appearance:none; flex:1; border:0; cursor:pointer; height:26px; padding:0 10px; border-radius:999px;
    font-family:var(--hv-label); font-size:12px; font-weight:600; letter-spacing:.02em; color:rgba(246,231,189,.72);
    background:transparent; transition:background .15s,color .15s; }
  .hv-mx-g button:hover{ color:#f6e7bd; }
  .hv-mx-g button.on{ background:#f6e7bd; color:#4c2168; }
  .hv-mx-g button:focus-visible{ outline:2px solid #f6e7bd; outline-offset:1px; }
  @media (max-width:520px){ .hv-mx-in input{ width:150px; } .hv-mx-g button{ padding:0 6px; font-size:11.5px; }
    .hv-mx-in:has(.hv-mx-g) + .hv-mx-in:has(.hv-mx-g){ margin-top:18px; } }
  .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); }

  /* Схема внутри статьи. Отличается от .hv-sec-img тем, что занимает всю
     ширину колонки: на схемах есть подписи, и при 560px они мельчают до
     нечитаемого. Подпись под схемой — обычный текст, не альтернатива alt. */
  .hv-fig{ margin:26px 0 30px; }
  .hv-fig img{ display:block; width:100%; height:auto; border-radius:14px;
    border:1px solid var(--hv-line); box-shadow:0 10px 24px rgba(51,22,63,.10); }
  .hv-fig figcaption{ margin-top:10px; font-size:.86rem; line-height:1.5;
    color:var(--hv-ink3,#7a6b7f); text-align:center; }

  /* ── Буквица ────────────────────────────────────────────────────────
     Подняли из прогноза (Ф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);
}

/* Липкая обёртка плашки промокода (правка Романа 10.09): код применяется на
   первом экране, а решение о покупке принимается на стене — между ними полторы
   тысячи слов, и уехавшую вверх плашку человек к этому моменту не помнит.
   Шапка сайта не sticky (снята 26.05), поэтому прилипаем к нулю.
   Обёртка пустая, пока плашка `hidden`: высоты не занимает. */
.hv-promo-stick{position:sticky;top:0;z-index:40}

/* ── Плашка «Применён промокод» ─────────────────────────────────────*/
.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; }
/* Подпись стики-баннера: полная на десктопе, короткая на мобиле — иначе с двумя ссылками
   (Telegram · MAX) баннер разрастался до трёх строк (скрин Романа 18.08). */
.hv-tg-txt{ color:#fff; font-family:var(--hv-sans); font-weight:700; font-size:14.5px; line-height:1.25; text-align:center; }
.hv-tg-short{ display:none; }
@media(max-width:600px){
  .hv-tg{ padding:8px 12px; gap:8px; }
  .hv-tg a, .hv-tg-txt{ font-size:13px; }
  .hv-tg-full{ display:none; }
  .hv-tg-short{ display:inline; }
}




/* ═══════════════════════════════════════════════════════════════════
   ХРОМ САЙТА — ХЕДЕР И ПОДВАЛ (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; }

/* Таблицы юридических документов (31.08): в политике конфиденциальности две —
   «данные → цель → основание → срок» и список получателей. Требование GDPR
   читается таблицей, а сплошным текстом теряется.
   Обёртка со своей прокруткой обязательна: четыре колонки текста на телефоне
   иначе растягивают всю страницу по горизонтали. */
.hv-doc-table-wrap{ overflow-x:auto; margin:0 0 16px; -webkit-overflow-scrolling:touch; }
.hv-doc-table{
  width:100%; min-width:520px; border-collapse:collapse;
  font-size:.86rem; color:var(--hv-ink2);
}
.hv-doc-table th, .hv-doc-table td{
  text-align:left; vertical-align:top; padding:9px 12px;
  border-bottom:1px solid var(--hv-lineg); line-height:1.55;
}
.hv-doc-table th{
  font-weight:700; color:var(--hv-ink); white-space:nowrap;
  border-bottom:1px solid rgba(51,22,63,.18);
}
.hv-doc-table tr:last-child td{ border-bottom:none; }
.hv-doc-updated{ font-size:.8rem; color:var(--hv-ink3); margin:0 0 26px;
  padding-bottom:18px; border-bottom:1px solid var(--hv-lineg); }
.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;
  /* wrap — чтобы служебная строка («скопировать код · ещё одна пара») уходила
     ПОД содержимое, а не становилась третьей колонкой: без переноса она
     съедала ширину у текста, и карточка складывалась в лапшу (08.09.2026). */
  display:flex; flex-wrap:wrap; 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;
  /* Страховка на случай, если в кнопку попадёт длинный текст мимо хелпера:
     кнопка не растёт бесконечно, лишнее режется многоточием. Без этого
     nowrap отжимал текст карточки — замер 08.09: имя из 19 знаков удваивало
     ширину кнопки и ломало подпись на две строки. */
  max-width:180pt; overflow:hidden; text-overflow:ellipsis;
  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; }

/* Тихая строка под карточкой: «скопировать код» и запасной оффер (08.09.2026).
   Главных кнопок в карточке две — матрицы обоих партнёров. Копирование и
   «ещё одна пара» служебные, поэтому они здесь ссылками, а не третьей и
   четвёртой кнопкой: от трёх одинаковых кнопок карточка переставала читаться. */
.paid-promo-second{
  flex-basis:100%; margin-top:2pt; padding-top:8pt;
  border-top:1px solid var(--hv-line);
  font-size:8.5pt; color:var(--hv-ink3); text-align:right;
}
.paid-promo-second a,
.paid-promo-link{
  color:var(--hv-ink3); text-decoration:none;
  border-bottom:1px solid var(--hv-lineg);
  background:none; border-top:0; border-left:0; border-right:0; padding:0;
  font:inherit; cursor:pointer;
}
.paid-promo-second a:hover,
.paid-promo-link:hover{ color:var(--hv-plum2); border-bottom-color:var(--hv-gold-deco); }
.paid-promo-sep{ margin:0 6pt; color:var(--hv-lineg); }

/* Три кнопки в колонке карточку не ломают, но на узком экране их нельзя
   ставить в один ряд — надписи с датами не влезут. */
@media(max-width:640px){
  .paid-promo-actions{ flex-wrap:wrap; }
  .paid-promo-actions .paid-promo-btn{ flex:1 1 45%; }
  .paid-promo-second{ text-align:center; }
}
@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; }
}
/* ── Развилка двух интентов на страницах веера ─────────────────────────
   «N у вас или у пары» — ставится под hero, до чтения. */
/* Развилка — часть листа, а не карточка на нём. Собственные фон, рамка,
   тень и radius:16px убраны 15.08: скруглённая плашка внутри «листа»
   с radius:3px читалась как контейнер в контейнере. Остались карточками
   только два кликабельных варианта — они лежат прямо на бумаге. */
.hv-fork{ max-width:900px; margin:0 auto; }
.hv-fork-q{ font-family:var(--hv-serif); font-weight:700; font-size:1.28rem;
  text-align:center; color:var(--hv-ink); margin-bottom:16px; }
.hv-fork-opts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hv-fork-o{ display:block; padding:14px 16px; border-radius:13px;
  border:1px solid var(--hv-line); background:var(--hv-cream);
  text-decoration:none; color:inherit; transition:.15s; }
.hv-fork-o:hover{ transform:translateY(-2px); border-color:#c05f83;
  box-shadow:0 8px 20px rgba(192,95,131,.16); }
.hv-fork-o b{ display:block; font-family:var(--hv-sans); font-weight:700;
  font-size:.98rem; color:var(--hv-ink); }
.hv-fork-o span{ display:block; margin-top:4px; font-size:.84rem;
  line-height:1.4; color:var(--hv-ink2); }
.hv-fork-o em{ display:block; margin-top:8px; font-style:normal;
  font-family:var(--hv-label); font-size:.76rem; font-weight:700; color:#c05f83; }
.hv-fork-o.is-main{ background:linear-gradient(180deg,rgba(192,95,131,.08),transparent); }
@media (max-width:640px){ .hv-fork-opts{ grid-template-columns:1fr; } }

/* ── Обратная таблица «с кем совместим N» ───────────────────────────── */
.hv-ptab{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:8px; margin:6px 0 16px; }
.hv-ptab-r{ display:grid; grid-template-columns:34px 1fr 20px 34px 1fr;
  align-items:center; gap:8px; padding:10px 12px; border-radius:11px;
  background:var(--hv-paper); border:1px solid var(--hv-line);
  text-decoration:none; color:inherit; transition:.15s; }
.hv-ptab-r:hover{ border-color:#c05f83; transform:translateX(2px);
  box-shadow:0 6px 16px rgba(51,22,63,.1); }
.hv-ptab-r .p, .hv-ptab-r .c{ font-family:var(--hv-serif); font-weight:800;
  font-size:1.05rem; text-align:center; border-radius:8px; padding:3px 0; }
.hv-ptab-r .p{ background:rgba(76,33,104,.09); color:#4c2168; }
.hv-ptab-r .c{ background:rgba(201,162,75,.16); color:#8a6a1f; }
.hv-ptab-r .pn, .hv-ptab-r .cn{ font-family:var(--hv-sans); font-size:.8rem;
  line-height:1.25; color:var(--hv-ink2); }
.hv-ptab-r .cn{ color:var(--hv-ink); font-weight:600; }
.hv-ptab-r .ar{ text-align:center; color:var(--hv-ink3); font-size:.9rem; }
/* Партнёр с тем же центром — единственная строка, особая у любого аркана.
   Подсветка is-mirror (партнёр 22) убрана 15.08: с каноничной редукцией
   22 больше не «возвращает вашу же тему», правило было артефактом −22. */
.hv-ptab-r.is-twin{ border-color:rgba(201,162,75,.55);
  background:linear-gradient(180deg,rgba(201,162,75,.07),transparent); }
  /* ═══════════════════════════════════════════════════════════════════
     AIN — /ai-numerolog, прослойка сайт → бот Нумия (22.08.2026).
     ТЗ plans/ai_numerolog_landing_2026_08_22.md. Хиро здесь СВЕТЛЫЙ, а не
     сливовый .hv-hero: справа стоит Нумия из набора numia-light-*, нарисованная
     под кремовую бумагу (как на листе «Что дальше» платных отчётов), на тёмном
     она теряет контур. Окно чата и чипы повторяют лист «Что дальше»
     (_paid_next_offer), но в px: лист свёрстан в мм под A4, а эта страница
     в PDF не идёт.
     ═══════════════════════════════════════════════════════════════════ */
  .ain-hero{ display:grid; grid-template-columns:1fr 250px; gap:0 28px; align-items:end;
    grid-template-areas:"head mascot" "lead mascot" "cta cta";
    padding:40px 20mm 0; position:relative; }
  .ain-hero-head{ grid-area:head; align-self:end; }
  .ain-hero-eb{ font-family:var(--hv-label); font-size:.66rem; font-weight:700; letter-spacing:.3em;
    text-transform:uppercase; color:var(--hv-gold); margin-bottom:14px; }
  .ain-hero h1{ font-family:var(--hv-serif); font-weight:800; font-size:clamp(1.75rem,4.4vw,2.5rem);
    line-height:1.1; letter-spacing:-.01em; color:var(--hv-ink); margin:0 0 14px; text-wrap:balance; }
  .ain-hero h1 em{ font-style:italic; color:var(--hv-plum3); }
  .ain-hero-lead{ grid-area:lead; font-size:1.02rem; line-height:1.6; color:var(--hv-ink2); margin:0 0 22px; max-width:520px; text-wrap:pretty; }
  .ain-mascot{ grid-area:mascot; align-self:end; position:relative; }
  .ain-mascot img{ display:block; width:100%; height:auto; position:relative; z-index:1; }
  .ain-mascot::before{ content:''; position:absolute; left:50%; top:52%; width:230px; height:230px;
    transform:translate(-50%,-50%); border-radius:50%; z-index:0;
    background:radial-gradient(circle, rgba(168,132,43,.14) 0%, rgba(168,132,43,0) 70%); }
  /* Под хиро — только две кнопки одной ширины по центру и подпись (правка
     Романа 22.08: форма даты не нужна, дату бот спросит сам). */
  .ain-hero-cta{ grid-area:cta; margin:8px 0 0; padding:26px 20mm 34px; text-align:center;
    border-top:1px solid var(--hv-line); }
  .ain-cta-row{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
  .ain-go{ display:inline-flex; align-items:center; justify-content:center; gap:9px; height:52px; width:250px; padding:0 20px;
    border-radius:13px; font-family:var(--hv-label); font-weight:800; font-size:.98rem; color:#fff;
    text-decoration:none; white-space:nowrap; transition:.15s; box-shadow:0 8px 20px rgba(51,22,63,.14); }
  .ain-go:hover{ transform:translateY(-2px); }
  .ain-go svg{ width:17px; height:17px; flex:0 0 17px; }
  .ain-go--tg{ background:linear-gradient(135deg,#2AABEE 0%,#229ED9 55%,#0088CC 100%); }
  .ain-go--max{ background:linear-gradient(135deg,#4cf 0%,#53e 62%,#93d 100%); }
  .ain-cta-note{ margin:16px auto 0; max-width:520px; font-family:var(--hv-serif); font-style:italic;
    font-size:1.02rem; line-height:1.55; color:var(--hv-ink3); text-wrap:balance; }
  .ain-cta-note em{ font-style:italic; color:var(--hv-plum2); }
  @media(max-width:760px){
    /* Заголовок во всю ширину, Нумия — только рядом с лидом. */
    .ain-hero{ grid-template-columns:1fr 38%; gap:0 12px; padding:26px 20px 0; align-items:end;
      grid-template-areas:"head head" "lead mascot" "cta cta"; }
    .ain-hero-head{ margin-bottom:14px; }
    .ain-hero-lead{ margin-bottom:12px; }
    .ain-mascot img{ -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
      mask-image:linear-gradient(180deg,#000 80%,transparent 100%); }
    .ain-mascot::before{ display:none; }
    .ain-hero-cta{ padding:18px 20px 26px; }
    .ain-go{ width:100%; }
  }

  /* Окно чата — доказательство. Статичные пузыри из композиции реальных
     ответов; LLM на странице нет (ТЗ §6). */
  .ain-chat{ max-width:660px; margin:0 auto; background:#fff; border:1px solid var(--hv-line); border-radius:16px; overflow:hidden;
    box-shadow:0 12px 36px rgba(51,22,63,.10); }
  .ain-chat-hd{ display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--hv-line); background:var(--hv-cream2); }
  .ain-chat-hd img{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 34px; }
  .ain-chat-who{ flex:1; min-width:0; }
  .ain-chat-nm{ font-weight:700; color:var(--hv-ink); line-height:1.15; font-size:.98rem; }
  .ain-chat-role{ font-size:.8rem; color:var(--hv-ink3); line-height:1.2; }
  .ain-chat-on{ display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--hv-ink3); }
  .ain-dot{ width:7px; height:7px; border-radius:50%; background:#3fae6a; display:block; }
  .ain-bubs{ padding:16px; }
  .ain-bub{ display:flex; gap:8px; align-items:flex-end; margin-bottom:10px; }
  .ain-bub img{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex:0 0 26px; }
  .ain-txt{ font-size:.95rem; line-height:1.55; padding:10px 14px; border-radius:14px; background:var(--hv-cream);
    border-bottom-left-radius:4px; max-width:84%; color:var(--hv-ink2); }
  .ain-txt b{ color:var(--hv-plum2); }
  .ain-txt p{ margin:0 0 8px; } .ain-txt p:last-child{ margin:0; }
  .ain-bub--you{ justify-content:flex-end; }
  .ain-bub--you .ain-txt{ background:linear-gradient(135deg,var(--hv-plum2),var(--hv-plum)); color:var(--hv-on-dark);
    max-width:72%; border-bottom-left-radius:14px; border-bottom-right-radius:4px; }
  .ain-chat-ft{ padding:12px 16px; border-top:1px solid var(--hv-line); background:var(--hv-cream2);
    font-size:.82rem; color:var(--hv-ink3); text-align:center; }

  /* Темы — те же девять, что бот покажет кнопками (BRIDGE_QUERIES). Чип —
     карточка с двумя каналами, как на листе «Что дальше»: вложить <a> в <a>
     нельзя, а MAX равноправен Telegram (правка Романа 22.08). */
  .ain-chips{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:800px; margin:0 auto; }
  .ain-chip{ display:flex; flex-direction:column; gap:10px; padding:14px 14px 12px; background:var(--hv-paper);
    border:1px solid var(--hv-line); border-radius:14px; }
  .ain-chip-hd{ display:flex; align-items:flex-start; gap:10px; flex:1 1 auto; }
  .ain-chip-ic{ flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:var(--hv-golds);
    display:flex; align-items:center; justify-content:center; font-size:1rem; }
  .ain-chip-t{ font-size:.96rem; font-weight:600; line-height:1.3; color:var(--hv-ink); padding-top:4px; }
  .ain-chip-go{ display:flex; gap:8px; justify-content:flex-end; }
  .ain-chip-go a{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
    color:#fff; text-decoration:none; transition:.15s; }
  .ain-chip-go a:hover{ transform:translateY(-2px); }
  .ain-chip-go a svg{ width:14px; height:14px; }
  .ain-chip-go .go-tg{ background:linear-gradient(135deg,#2AABEE 0%,#229ED9 55%,#0088CC 100%); }
  .ain-chip-go .go-max{ background:linear-gradient(135deg,#4cf 0%,#53e 62%,#93d 100%); }
  /* Строка «свой вопрос» под сеткой 3×3 — вместо десятой плитки. */
  .ain-own{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    max-width:800px; margin:12px auto 0; padding:12px 16px; border:1px dashed var(--hv-lineg); border-radius:14px; }
  .ain-own-t{ font-size:.96rem; font-weight:600; color:var(--hv-ink); }
  .ain-chips-note{ max-width:800px; margin:12px auto 0; font-size:.86rem; color:var(--hv-ink3); text-align:center; }
  @media(max-width:760px){ .ain-chips{ grid-template-columns:1fr; gap:10px; } }

  /* «Промпт не нужен» — строка под тремя колонками. */
  .ain-noprompt{ max-width:720px; margin:22px auto 0; padding:16px 20px; border-radius:14px;
    background:var(--hv-golds); border:1px solid var(--hv-lineg); font-size:.96rem; line-height:1.6; color:var(--hv-ink2); text-align:center; }
  .ain-noprompt b{ color:var(--hv-plum2); }

  /* Бесплатно / платно — две карточки, цены живые из NumiaPricing. */
  .ain-price{ display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:760px; margin:0 auto; }
  .ain-price-card{ background:var(--hv-paper); border:1px solid var(--hv-line); border-radius:16px; padding:20px 22px; border-top:3px solid var(--c,var(--hv-gold-deco)); }
  .ain-price-card h3{ font-family:var(--hv-serif); font-weight:700; font-size:1.15rem; color:var(--hv-ink); margin:0 0 12px; }
  .ain-price-card ul{ list-style:none; margin:0; padding:0; }
  .ain-price-card li{ position:relative; padding-left:20px; margin-bottom:8px; font-size:.94rem; line-height:1.5; color:var(--hv-ink2); }
  .ain-price-card li::before{ content:'◆'; position:absolute; left:2px; top:.12em; font-size:.6em; color:var(--hv-gold-deco); }
  .ain-packs{ margin:0 0 12px; }
  .ain-pack{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:8px 0; border-bottom:1px dashed var(--hv-line); font-size:.94rem; color:var(--hv-ink2); }
  .ain-pack:last-child{ border-bottom:none; }
  .ain-pack b{ font-family:var(--hv-serif); font-weight:700; font-size:1.08rem; color:var(--hv-ink); white-space:nowrap; }
  .ain-pack span{ font-size:.8rem; color:var(--hv-ink3); }
  .ain-pack--one{ font-size:1rem; } .ain-pack--one b{ font-size:1.3rem; color:var(--hv-plum2); }
  .ain-price-foot{ max-width:760px; margin:14px auto 0; font-size:.84rem; color:var(--hv-ink3); line-height:1.55; text-align:center; }
  @media(max-width:760px){ .ain-price{ grid-template-columns:1fr; } }

  /* Оценки — числа, не проценты (ТЗ §2.7). */
  .ain-proof{ max-width:660px; margin:0 auto; text-align:center; }
  .ain-proof-nums{ display:flex; justify-content:center; align-items:flex-end; gap:28px; margin:4px 0 14px; }
  .ain-proof-n{ font-family:var(--hv-serif); font-weight:800; font-size:2.4rem; line-height:1; color:var(--hv-ink); }
  .ain-proof-n small{ font-family:var(--hv-label); font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--hv-ink3); display:block; margin-top:6px; }
  .ain-proof-n--down{ color:var(--hv-ink3); font-size:1.7rem; }
  .ain-proof p{ font-size:.94rem; color:var(--hv-ink2); line-height:1.6; margin:0 0 12px; }
  .ain-proof-topics{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
  .ain-proof-topics span{ padding:6px 12px; border-radius:999px; background:var(--hv-golds); border:1px solid var(--hv-lineg); font-size:.84rem; color:var(--hv-ink2); }
  .ain-proof-topics span b{ color:var(--hv-plum2); font-weight:700; }

  /* Дисклеймер и доверие. */
  .ain-trust{ max-width:660px; margin:0 auto; font-size:.84rem; line-height:1.6; color:var(--hv-ink3); text-align:center; }
  .ain-trust a{ color:var(--hv-gold); text-decoration:none; border-bottom:1px solid rgba(168,132,43,.35); }

  /* ══════════════════════════════════════════════════════════════════
     Подсказчик Нумефай (site_helper) — сфера и панель.
     ТЗ: plans/site_helper_numeria_audit_2026_08_22.md §G. Геометрия взята
     у виджета-образца (370×560, inset:6px на мобайле), палитра — наша:
     светлая бумага, слива, золото. Тёмной шапки образца у нас нет —
     сайт светлый (правило feedback_light_design).
     ══════════════════════════════════════════════════════════════════ */

  /* Сфера: 64px против 104 у образца — аватар Нумии, без неона. */
  .nh-launcher{ position:fixed; right:22px; bottom:22px; z-index:9998;
    width:64px; height:64px; padding:0; border:none; border-radius:50%; cursor:pointer;
    background:linear-gradient(160deg,#4c2168,#31153e); overflow:hidden;
    box-shadow:0 10px 30px rgba(51,22,63,.34), 0 0 0 2px rgba(217,180,90,.5);
    transition:transform .18s, opacity .3s; }
  .nh-launcher img{ width:100%; height:100%; object-fit:cover; display:block; }
  .nh-launcher:hover{ transform:translateY(-2px) scale(1.05); }
  .nh-opened .nh-launcher{ opacity:0; pointer-events:none; }
  /* Во время скролла уходит в тень, чтобы не спорить с CTA страницы. */
  .nh-scrolling .nh-launcher{ opacity:.3; }

  .nh-panel{ position:fixed; right:22px; bottom:22px; z-index:9999;
    width:370px; max-width:calc(100vw - 24px); height:560px; max-height:calc(100vh - 32px);
    display:flex; flex-direction:column; overflow:hidden;
    background:var(--hv-paper); border:1px solid var(--hv-lineg); border-radius:20px;
    box-shadow:0 24px 60px rgba(51,22,63,.26), 0 6px 18px rgba(51,22,63,.14);
    opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
    transition:opacity .25s, transform .25s; }
  .nh-panel.is-open{ opacity:1; transform:none; pointer-events:auto; }

  .nh-head{ display:flex; align-items:center; gap:11px; padding:13px 14px;
    border-bottom:1px solid var(--hv-line);
    background:linear-gradient(135deg,var(--hv-golds),rgba(130,102,179,.10)); }
  .nh-head-av{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex:0 0 auto;
    border:1px solid var(--hv-goldb); background:#fff; }
  .nh-head-t{ flex:1 1 auto; min-width:0; }
  .nh-head-t b{ display:block; font-family:var(--hv-serif); font-weight:700; font-size:1.02rem;
    color:var(--hv-ink); line-height:1.2; }
  .nh-head-t span{ display:block; font-family:var(--hv-label); font-size:.7rem;
    letter-spacing:.06em; color:var(--hv-ink3); }
  .nh-ico{ flex:0 0 auto; width:30px; height:30px; border:none; border-radius:9px; cursor:pointer;
    background:transparent; color:var(--hv-ink3); font-size:1.1rem; line-height:1; }
  .nh-ico:hover{ background:rgba(51,22,63,.07); color:var(--hv-ink); }

  .nh-log{ flex:1 1 auto; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px; }
  .nh-msg{ max-width:88%; font-size:.92rem; line-height:1.55; padding:10px 13px; }
  .nh-bot{ align-self:flex-start; background:var(--hv-cream2); color:var(--hv-ink2);
    border-radius:14px 14px 14px 4px; }
  .nh-me{ align-self:flex-end; background:linear-gradient(135deg,#5b2a74,#4c2168); color:#fff;
    border-radius:14px 14px 4px 14px; }
  .nh-bot a{ color:var(--hv-plum2); font-weight:600; }

  .nh-chips{ display:flex; flex-direction:column; gap:7px; margin-top:3px; }
  .nh-chip{ display:block; width:100%; text-align:left; padding:9px 13px; cursor:pointer;
    background:var(--hv-paper); border:1px solid var(--hv-line); border-radius:11px;
    font-family:inherit; font-size:.87rem; color:var(--hv-ink2); text-decoration:none;
    transition:transform .14s, border-color .14s; }
  .nh-chip:hover{ transform:translateX(3px); border-color:var(--hv-gold); color:var(--hv-ink); }

  /* flex:0 0 auto обязателен: без него флекс-контейнер панели сжимает меню
     до полутора строк, отдав всю высоту ленте. */
  .nh-menu{ flex:0 0 auto; border-top:1px solid var(--hv-line); padding:12px;
    background:var(--hv-cream); max-height:min(300px, 52%); overflow-y:auto; }
  .nh-menu-t{ font-family:var(--hv-label); font-size:.64rem; font-weight:700; letter-spacing:.16em;
    text-transform:uppercase; color:var(--hv-ink3); margin-bottom:8px; }
  .nh-menu .nh-chip{ margin-bottom:6px; }

  .nh-form{ flex:0 0 auto; display:flex; align-items:flex-end; gap:7px; padding:10px 12px;
    border-top:1px solid var(--hv-line); background:var(--hv-paper); }
  /* overflow:hidden, пока текст умещается: у textarea полоса появляется от
     переполнения в один пиксель, и на однострочном поле она выглядит
     поломкой. Полоса возвращается только когда поле доросло до потолка —
     этим занимается JS, добавляя .is-full. */
  .nh-form textarea{ flex:1 1 auto; min-height:40px; max-height:96px; resize:none;
    overflow-y:hidden; padding:10px 12px; border:1px solid var(--hv-line);
    border-radius:12px; font-family:inherit; font-size:.92rem; line-height:1.35;
    color:var(--hv-ink); background:var(--hv-cream); outline:none; }
  .nh-form textarea.is-full{ overflow-y:auto; }
  .nh-form textarea:focus{ border-color:var(--hv-gold); }
  .nh-send{ flex:0 0 auto; width:38px; height:38px; border:none; border-radius:11px; cursor:pointer;
    background:linear-gradient(135deg,#f6e7bd,#d9b45a); color:#3a1e00; font-size:1.05rem; }

  /* Ответ готов за ~60 мс, и без паузы он читался как подстановка, а не как
     ответ собеседника. Держим троеточие фиксированные 420 мс. */
  .nh-typing{ display:inline-flex; gap:4px; align-items:center; padding:12px 14px !important; }
  .nh-typing i{ width:6px; height:6px; border-radius:50%; background:var(--hv-ink3);
    animation:nh-blink 1s infinite ease-in-out; }
  .nh-typing i:nth-child(2){ animation-delay:.15s; }
  .nh-typing i:nth-child(3){ animation-delay:.3s; }
  @keyframes nh-blink{ 0%,80%,100%{ opacity:.25; transform:translateY(0); }
                       40%{ opacity:1; transform:translateY(-2px); } }
  .nh-menu-btn{ height:38px; }

  @media (max-width:479px){
    .nh-launcher{ width:56px; height:56px; right:16px; bottom:16px; }
    /* Панель на весь экран: 370px на узком экране обрезаются. */
    .nh-panel{ inset:6px; width:auto; height:auto; max-width:none; max-height:none; border-radius:16px; }
    /* 16px — иначе iOS зумит страницу при фокусе в поле. */
    .nh-form textarea{ font-size:16px; }
  }

  /* ── Правый нижний угол занят не только нами ────────────────────────
     Приёмка §G7 п.1: сфера не должна закрывать чужие элементы и сама не
     должна оказаться под ними. В этом углу живут кнопка «наверх»
     (.ds-scroll-top), липкая плашка входа в бота (.hv-tg) и cookie-баннер
     (.ck) — последние два с z-index 9999, то есть выше сферы. Замер на
     странице результата: сфера 658-722 × 1538-1602, кнопка «наверх»
     680-724 × 1516-1560 — пересечение.
     Поднимаем сферу над каждым из них по мере их присутствия. :has()
     нужен, чтобы решение жило в CSS: JS-детект дал бы прыжок после
     загрузки. */
  body:has(.ds-scroll-top) .nh-launcher{ bottom:78px; }
  body:has(.hv-tg) .nh-launcher{ bottom:76px; }
  body:has(.hv-tg):has(.ds-scroll-top) .nh-launcher{ bottom:130px; }
  /* Cookie-баннер закрывает низ экрана целиком и висит выше всех: пока он
     не принят, сфера уезжает над ним, иначе на первом визите её не видно. */
  body:has(.ck:not([hidden])) .nh-launcher{ bottom:150px; }
  @media (max-width:479px){
    body:has(.ds-scroll-top) .nh-launcher,
    body:has(.hv-tg) .nh-launcher{ bottom:72px; }
    body:has(.ck:not([hidden])) .nh-launcher{ bottom:130px; }
  }

  /* Сфера уступает угол стене пейволла и липкой плашке: пока они в вьюпорте,
     её нет. Класс ставит IntersectionObserver и только на ≤479px. */
  .nh-yield .nh-launcher{ opacity:0; pointer-events:none; transform:translateY(8px); }

  /* Пока открыто окно оплаты — подсказчика нет. Сфера перекрывала кнопку
     «Оплатить» и поля имени и почты; на этом шаге человеку нужна форма, а
     не собеседник. Класс .open ставит скрипт страницы отчёта. */
  body:has(.pw-modal-backdrop.open) .nh,
  body:has(.pwm-backdrop.open) .nh,
  .nh.nh-hidden{ display:none !important; }

  /* В печать виджет не идёт: он часть интерфейса, а не документа. */
  @media print{ .nh{ display:none !important; } }

  /* Якорь-псевдоним: даёт секции читаемое имя (#money вместо #page-10),
     ничего не занимая в потоке. scroll-margin — чтобы после перехода
     заголовок не спрятался под липкой шапкой. */
  .anchor-alias{ display:block; height:0; scroll-margin-top:84px; }

/* ═══════════════════════════════════════════════════════════════════
   ШРИФТЫ — свои файлы, не Google (10.09.2026, ТЗ пары v3 §2 п.3)

   Golos Text ставится здесь впервые: до 10.09 его тянул только демо
   отдельным <link> на fonts.googleapis.com. Playfair Display 700
   переопределяет гугловый: правила ниже стоят последними в каскаде,
   и браузер для веса 700 качает наш файл, а не чужой. Остальные веса
   Playfair (500, 600, 800, курсивы) сайту по-прежнему отдаёт Google —
   их перевод отдельная задача, у неё свой замер.

   Подмножества: cyrillic, latin, latin-ext. latin-ext не роскошь:
   знак рубля U+20BD лежит именно в нём, а «690 ₽» стоит на каждой
   продающей странице. Golos отдан переменным файлом — 400 и 600 это
   один и тот же woff2, поэтому веса в имени файла нет.
   Откуда файлы и лицензия: app/assets/fonts/SOURCES.txt.
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;
  src:url("/assets/golos-text-cyrillic-73456c9e.woff2") format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;
  src:url("/assets/golos-text-latin-fe329728.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;
  src:url("/assets/golos-text-latin-ext-f06b4def.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/playfair-display-cyrillic-8bcbf149.woff2") format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/playfair-display-latin-a51941ef.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/playfair-display-latin-ext-616fe068.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}


/* ═══════════════════════════════════════════════════════════════════
   .hv-rep-* — КОМПОНЕНТЫ ОТЧЁТА И КАЛЬКУЛЯТОРА
   ───────────────────────────────────────────────────────────────────
   Перенесены 10.09.2026 из демо-8 (ТЗ plans/tz_pair_v3_transfer_2026_09_10.md
   §2 п. 2). Что где стоит поэлементно — канон
   .claude/skills/strong-report-design/reference/calculator_canon_2026_09_10.md;
   решения вкуса и токены — DESIGN.md.

   Здесь: форма, вердикт, градусник, суть союза, оглавление, шмуцтитул,
   глава, лестница канала, тень→ресурс, риск-метр, график календаря,
   стена v2, липкая кнопка, окно оплаты, подарок, полоса утилит, оценка,
   письмо, карточка, страницы ошибок, вкладки и крошки над листом.

   ⚠️ Имена. Каждый класс демо получил префикс hv-rep-, включая короткие
   (.card, .grid, .top, .small). Причина — в шапке этого файла: «.pg из
   отчёта перебивал .hero лендинга и сносил тёмную подложку». Отчёт, за
   который заплатили, не имеет права зависеть от того, какой ещё файл
   сайта заведёт себе класс .card.

   ⚠️ Скоуп. Правила по тегам (h1, h2, p, a) живут только внутри .hv-rep.
   Страница калькулятора своего <style> не заводит (решение вкуса 6).
   ═══════════════════════════════════════════════════════════════════ */
.hv-rep *{box-sizing:border-box}
.hv-rep{-webkit-text-size-adjust:100%}
.hv-rep{margin:0;background:var(--hv-cream);color:var(--hv-ink);font:400 var(--hv-rep-fs-b)/1.6 var(--hv-rep-sans);}
/* ⚠️ :where() здесь не украшение, а починка переноса (10.09.2026).
   В демо базовые правила писались как `.d8 p`, и компоненты — тоже с
   префиксом, то есть одной силы. При переезде классы стали уникальными
   и потеряли префикс: `.hv-rep-pf-trust` (0,1,0) оказался слабее базового
   `.hv-rep p` (0,1,1), и десять отступов молча обнулились — строка доверия
   прилипла к кнопке, лид к заголовку, кармическая плашка к тексту.
   `:where()` не добавляет силы, поэтому базовое правило теперь (0,1,0):
   его перебивает любой класс компонента, но оно само по-прежнему сильнее
   сброса `p{margin:0}` из tailwind. */
.hv-rep :where(a){color:var(--hv-plum2)}
.hv-rep :where(b,strong){font-weight:600}
.hv-rep :where(h1,h2,h3){font-family:var(--hv-serif);font-weight:700;letter-spacing:-.01em;margin:0}
.hv-rep :where(h1){font-size:var(--hv-rep-fs-d);line-height:1.1}
.hv-rep :where(h2){font-size:var(--hv-rep-fs-h);line-height:1.2;margin:6px 0 14px}
.hv-rep :where(h3){font-family:var(--hv-rep-sans);font-size:var(--hv-rep-fs-b);font-weight:600;margin:24px 0 8px}
.hv-rep :where(p){margin:0 0 14px}
.hv-rep-wrap{max-width:var(--hv-rep-col);margin:0 auto;padding:0 20px 80px}
.hv-rep-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--hv-line);font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hv-rep-top b{color:var(--hv-ink);font-family:var(--hv-serif);font-size:var(--hv-rep-fs-b);font-weight:700}
.hv-rep-small{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hv-rep-num{font-family:var(--hv-serif);font-size:var(--hv-rep-fs-n);font-weight:700;line-height:1;color:var(--hv-ink);min-width:1.4em;display:inline-block}
/* цвет числа = цвет точки на октограмме: визитка и верх сливовые, потенциал и хвост красные, центр золотой */
.hv-rep-num.hv-rep-ab{color:var(--hv-plum2)} .hv-rep-num.hv-rep-cd{color:var(--hv-oct-red)} .hv-rep-num.hv-rep-e{color:var(--hv-gold-deco)}

/* первый экран: вердикт */
.hv-rep-hero{padding:40px 0 28px}
.hv-rep-hero .hv-rep-dates{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin-bottom:14px}
.hv-rep-hero .hv-rep-dates b{font-family:var(--hv-serif);font-size:var(--hv-rep-fs-b);color:var(--hv-ink);font-weight:700}
.hv-rep-hero .hv-rep-who{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:10px 0 0}
.hv-rep-verdict{display:grid;grid-template-columns:1fr auto;gap:12px 20px;align-items:start;margin:8px 0 18px}
.hv-rep-pct{font-family:var(--hv-serif);font-size:clamp(64px,17vw,92px);font-weight:700;line-height:1;color:var(--hv-plum2);text-align:right}
/* Главная цифра всего отчёта — за ней и приходят. На телефоне она была
   не крупнее заголовка рядом (правка Романа 10.09): поднимаем кегль и даём
   градиент с редким бликом. Блик тот же приём, что у кнопки: один проход
   раз в семь секунд, а не «дышащая» анимация. */
.hv-rep-pctn{display:inline-block}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hv-rep-pctn{background-image:linear-gradient(105deg,var(--hv-plum2) 0%,var(--hv-plum2) 38%,var(--hv-rose) 50%,var(--hv-plum2) 62%,var(--hv-plum2) 100%);
    background-size:280% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    padding-bottom:.06em;animation:hv-rep-pct-sheen 7s ease-in-out 1.2s infinite}
}
@keyframes hv-rep-pct-sheen{0%{background-position:100% 0}14%{background-position:0 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.hv-rep-pctn{animation:none}}
@media(max-width:600px){.hv-rep-pct{font-size:clamp(88px,27vw,116px)}}
.hv-rep-pct span{font-size:.5em;vertical-align:.45em;margin-left:2px}
.hv-rep-pct small{font-size:var(--hv-rep-fs-s);display:block;color:var(--hv-ink2);font-family:var(--hv-rep-sans);font-weight:400;letter-spacing:0;margin-top:14px;padding-top:10px;border-top:1px solid var(--hv-line);text-align:right}
/* В самом отчёте строки вердикта остаются спокойными: волосяная линия слева
   и обычный текст. Пробовали 10.09 сделать их плашками — в документе, где
   ниже идут тридцать глав, это лишний акцент (правка Романа). Плашки живут
   на посадочной, в примере вердикта: там строк всего две и они продают. */
.hv-rep-rows p{margin:0 0 10px;padding-left:14px;border-left:2px solid var(--hv-line)}
.hv-rep-split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:18px 0 10px}
.hv-rep-split h3{margin:0 0 6px}
.hv-rep-split ul{margin:0;padding:0;list-style:none}
.hv-rep-split li{margin:0 0 8px;padding-left:12px;position:relative;font-size:var(--hv-rep-fs-s);line-height:1.45}
.hv-rep-split li::before{content:'';position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--hv-plus)}
.hv-rep-split .hv-rep-shakes li::before{background:var(--hv-minus)}
.hv-rep-pts{color:var(--hv-ink2);font-size:var(--hv-rep-fs-s);white-space:nowrap}
.hv-rep-badge{font-size:var(--hv-rep-fs-s);color:var(--hv-gold);margin:6px 0 0}
/* суть союза и кармическая плашка на первом экране */
/* Суть пары под названием (11.09): отдельный блок «Суть вашего союза» снят,
   суть по центру и строка «какими вас видят» по визитке стоят абзацем под H1. */
.hv-rep-hero .hv-rep-gist{margin:10px 0 6px;font-size:var(--hv-rep-fs-b);line-height:1.5;color:var(--hv-ink2)}
.hv-rep-karma{margin:0 0 18px;padding:10px 14px;border:1px solid var(--hv-gold-deco);border-radius:6px;background:var(--hv-field);font-size:var(--hv-rep-fs-s);line-height:1.5}
.hv-rep-karma b{color:var(--hv-gold);display:block;font-size:var(--hv-rep-fs-b)}
.hv-rep-basis{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);border-top:1px solid var(--hv-line);padding-top:12px;margin-top:8px}

/* оглавление */
/* Шапка оглавления: заголовок с числом глав и правило устройства разбора.
   Отбита сверху так же, как главы, — она читается как отдельный раздел,
   а не как подпись к списку. */
/* Линейка стоит НАД заголовком оглавления, а не между ним и списком
   (правка Романа 10.09): она отделяет оглавление от первого экрана отчёта,
   а не подзаголовок от собственного списка. Внизу у `.hv-rep-toc` своя
   линейка снята — две подряд читались бы как рамка. */
/* 12.09, правка Романа: шапка оглавления выглядит как шмуцтитул части —
   та же подложка cream2, та же отбивка во всю ширину листа, тот же
   надстрочник и тот же кегль заголовка. Значения не копируются «на глаз»:
   они те же, что в .hv-rep-part ниже по файлу. */
.hv-rep-toc-head{background:var(--hv-cream2);margin:var(--hv-rep-gap) -20px 0;padding:40px 20px 36px;
  border-top:1px solid var(--hv-line);border-bottom:1px solid var(--hv-line)}
.hv-rep-toc-head .hv-rep-in{max-width:var(--hv-rep-col);margin:0 auto}
.hv-rep-toc-head .hv-rep-n{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:0 0 6px}
.hv-rep-toc-head h2{font-size:var(--hv-rep-fs-d);line-height:1.05;margin:0}
.hv-rep-toc-head .hv-rep-ch-lead{margin:16px 0 0;font-size:var(--hv-rep-fs-b);color:var(--hv-ink2)}
/* Подпись автора под подводкой оглавления: тише текста, но не мельче
   служебных строк — это не сноска, а имя того, кто отвечает за числа. */
.hv-rep-byline{margin:10px 0 0;color:var(--hv-ink2)}
/* На первом экране подпись идёт после двух колонок «Что держит / Что
   расшатывает» — ей нужен свой воздух, иначе она читается пунктом списка. */
.hv-rep-hero .hv-rep-byline{margin-top:22px}
.hv-rep-toc-head+.hv-rep-toc{margin-top:0;padding-top:20px;border-top:0}
.hv-rep-toc{padding:28px 0 8px;border-top:1px solid var(--hv-line)}
.hv-rep-toc-g{margin:0 0 22px}
.hv-rep-toc-g h3{margin:0 0 6px;font-family:var(--hv-serif);font-size:var(--hv-rep-fs-a);font-weight:700}
/* Номер части — не заголовок, а метка на полях: сливовый, мельче, с воздухом
   справа. Ширина фиксирована, чтобы четыре заголовка стояли по одной левой. */
.hv-rep-toc-part{display:inline-block;min-width:1.6em;color:var(--hv-plum2);font-size:.78em;
  letter-spacing:.06em;vertical-align:.06em}
.hv-rep-toc ol{margin:0;padding:0 0 0 1.4em;color:var(--hv-ink2);font-size:var(--hv-rep-fs-s);line-height:1.7}
.hv-rep-toc a{color:var(--hv-ink);text-decoration:none;border-bottom:1px solid var(--hv-line)}
.hv-rep-toc li.hv-rep-lock{color:var(--hv-ink2)}

/* глава */
.hv-rep-ch{padding:var(--hv-rep-gap) 0 0;margin-top:var(--hv-rep-gap);border-top:1px solid var(--hv-line)}
.hv-rep-ch-q{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:0}
.hv-rep-ans{font-size:var(--hv-rep-fs-a);line-height:1.45;font-weight:400;margin:0 0 18px}
.hv-rep-ans em{font-style:normal;font-weight:600}
.hv-rep-ans b{color:var(--hv-plum2)}
.hv-rep-when,.hv-rep-do{border-left:2px solid var(--hv-line);padding-left:14px}
.hv-rep-do b{color:var(--hv-plus)}
.hv-rep-chips{display:flex;flex-wrap:wrap;gap:14px 28px;margin:0 0 18px}
.hv-rep-chip{display:flex;gap:10px;align-items:center;min-width:150px}
.hv-rep-chip-name{font-weight:600;line-height:1.2}
.hv-rep-chip-role{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hv-rep-formula{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:0 0 18px}
.hv-rep-formula b{font-family:var(--hv-serif);color:var(--hv-ink);font-size:var(--hv-rep-fs-b)}
.hv-rep-pm{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:6px 0 14px}
.hv-rep-pm-c b{display:block;margin-bottom:4px}
/* Заголовок и абзац каждой колонки встают на общие строки сетки: без этого
   колонка с заголовком в две строки уводила свой текст вниз относительно
   соседней, и два абзаца «плавали» (правка Романа 10.09). */
.hv-rep-pm-rows{grid-template-rows:auto 1fr}
.hv-rep-pm-rows>.hv-rep-pm-c{display:grid;grid-template-rows:subgrid;grid-row:span 2;gap:0}
.hv-rep-pm-c.hv-rep-plus b{color:var(--hv-plus)} .hv-rep-pm-c.hv-rep-minus b{color:var(--hv-minus)}
.hv-rep-pm-c p{margin:0;font-size:var(--hv-rep-fs-s);line-height:1.5}
.hv-rep-how{margin:10px 0 0;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hv-rep-how summary{cursor:pointer;color:var(--hv-plum2);list-style:none}
.hv-rep-how summary::before{content:'+ '}
.hv-rep-how[open] summary::before{content:'− '}
.hv-rep-how div{padding:8px 0 0}
.hv-rep-card{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;margin:0 0 18px}
.hv-rep-card img{width:96px;border-radius:4px;border:1px solid var(--hv-line);display:block}
.hv-rep-card h3{margin:0 0 6px;font-family:var(--hv-serif);font-size:var(--hv-rep-fs-a)}
.hv-rep-tbl{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:var(--hv-rep-fs-s)}
.hv-rep-tbl th{font-weight:600;text-align:left;padding:8px 6px 8px 0;border-bottom:1px solid var(--hv-line);color:var(--hv-ink2)}
.hv-rep-tbl td{padding:8px 6px 8px 0;border-bottom:1px solid var(--hv-line);vertical-align:top}
.hv-rep-tbl .hv-rep-num{font-size:var(--hv-rep-fs-a)}
.hv-rep-tbl .hv-rep-hit{color:var(--hv-gold)}
.hv-rep-octo{max-width:360px;margin:0 auto 18px}
.hv-rep-octo.hv-rep-big{max-width:560px;margin:0 auto 22px}
.hv-rep-chips.hv-rep-pts5{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.hv-rep-chips.hv-rep-pts5 .hv-rep-chip{display:grid;grid-template-columns:48px 1fr;align-items:center}
.hv-rep-octo svg{width:100%;height:auto;display:block}
.hv-rep-step{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:12px 0;border-top:1px solid var(--hv-line)}
.hv-rep-step:last-of-type{border-bottom:1px solid var(--hv-line);margin-bottom:16px}
.hv-rep-step .hv-rep-role{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hv-rep-step .hv-rep-name{font-weight:600}
.hv-rep-step p{margin:4px 0 0;font-size:var(--hv-rep-fs-s);line-height:1.5}
.hv-rep-tx{padding:12px 0;border-top:1px solid var(--hv-line)}
.hv-rep-tx:last-of-type{border-bottom:1px solid var(--hv-line);margin-bottom:16px}
.hv-rep-tx-h{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.hv-rep-tx-h .hv-rep-role{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin-left:auto}
.hv-rep-risk{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--hv-line)}
.hv-rep-risk:last-of-type{border-bottom:1px solid var(--hv-line);margin-bottom:16px}
.hv-rep-risk .hv-rep-lvl{font-family:var(--hv-serif);font-weight:700;min-width:84px;line-height:1.2}
.hv-rep-risk .hv-rep-lvl small{display:block;font-family:var(--hv-rep-sans);font-weight:400;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hv-rep-risk .hv-rep-l3{color:var(--hv-minus)} .hv-rep-risk .hv-rep-l1{color:var(--hv-plus)}
.hv-rep-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:0 0 6px}
.hv-rep-grid .hv-rep-rl{grid-column:1/-1;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin-top:8px}
.hv-rep-cell{border:1px solid var(--hv-line);padding:6px 4px;font-size:var(--hv-rep-fs-s);line-height:1.25;text-align:center;border-radius:3px}
.hv-rep-cell b{display:block;font-family:var(--hv-serif);font-size:var(--hv-rep-fs-b);color:var(--hv-plum2)}
.hv-rep-cell.hv-rep-now{border-color:var(--hv-plum2);background:var(--hv-cream2)}
.hv-rep-cell.hv-rep-far{color:var(--hv-ink2)}
.hv-rep-tl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:0 0 18px}
.hv-rep-tl div{padding:10px 0;border-top:1px solid var(--hv-line)}
.hv-rep-tl .hv-rep-yr{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hv-rep-ky{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--hv-line)}
.hv-rep-ky .hv-rep-yr{font-family:var(--hv-serif);font-weight:700;font-size:var(--hv-rep-fs-a);line-height:1.1;min-width:70px}
.hv-rep-ky .hv-rep-yr small{display:block;font-family:var(--hv-rep-sans);font-weight:400;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin-top:4px}
.hv-rep-ky:last-of-type{border-bottom:1px solid var(--hv-line);margin-bottom:16px}
.hv-rep-ky p{margin:4px 0 0;font-size:var(--hv-rep-fs-s)}
.hv-rep-q{margin:0 0 8px;padding-left:14px;border-left:2px solid var(--hv-line);font-size:var(--hv-rep-fs-s)}
.hv-rep-q b{color:var(--hv-ink2);font-weight:400}

/* стена — единственная тёмная полоса документа */
.hv-rep-wall{background:var(--hv-plum);color:var(--hv-cream);margin:var(--hv-rep-gap) -20px 0;padding:36px 20px 32px}
.hv-rep-wall .hv-rep-in{max-width:var(--hv-rep-col);margin:0 auto}
.hv-rep-wall h2{color:var(--hv-cream);margin:0 0 8px;font-size:var(--hv-rep-fs-h)}
.hv-rep-wall p{color:var(--hv-cream);opacity:.85}
.hv-rep-wall .hv-rep-list{margin:18px 0 22px;padding:0;list-style:none}
.hv-rep-wall .hv-rep-list li{padding:8px 0;border-top:1px solid rgba(255,253,249,.18);font-size:var(--hv-rep-fs-s)}
.hv-rep-wall .hv-rep-list li b{display:block;font-family:var(--hv-serif);font-size:var(--hv-rep-fs-b);opacity:1}
.hv-rep-wall .hv-rep-list span{opacity:.75}
.hv-rep-btn{display:block;width:100%;background:var(--hv-cream);color:var(--hv-plum);text-align:center;font-weight:600;padding:16px;border-radius:6px;text-decoration:none;font-size:var(--hv-rep-fs-b)}
.hv-rep-wall .hv-rep-price{font-size:var(--hv-rep-fs-s);opacity:.8;margin:12px 0 0;text-align:center}
.hv-rep-wall .hv-rep-honest{font-size:var(--hv-rep-fs-s);opacity:.7;margin:20px 0 0;line-height:1.5}
.hv-rep-wall .hv-rep-honest a{color:var(--hv-cream)}
.hv-rep-wall-mark{margin:var(--hv-rep-gap) 0 0;padding-top:14px;border-top:1px dashed var(--hv-line);font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);text-align:center}
.hv-rep-end{margin-top:var(--hv-rep-gap);padding-top:var(--hv-rep-gap);border-top:1px solid var(--hv-line)}
.hv-rep-end .hv-rep-sig{font-family:var(--hv-serif);font-size:var(--hv-rep-fs-a);font-weight:700;margin:0 0 14px}
.hv-rep-links a{display:block;margin:6px 0}

/* ── demo-7: хром сайта, посадочная, форма, стена v2, стики, окно оплаты, платные элементы ── */
.hv-rep-top.hv-rep-site{gap:20px}
.hv-rep-menu{display:flex;gap:16px;flex-wrap:wrap}
.hv-rep-menu a{text-decoration:none;color:var(--hv-ink2)} .hv-rep-menu a.hv-rep-on{color:var(--hv-ink);border-bottom:1px solid var(--hv-ink)}
.hv-rep-switch{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:8px 0 0}
.hv-rep-switch a{margin-left:8px;color:var(--hv-plum2);text-decoration:none;border-bottom:1px dashed var(--hv-line)} .hv-rep-switch a.hv-rep-on{border-bottom:2px solid var(--hv-plum2)}
.hv-rep-crumbs{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:12px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.hv-rep-crumbs a{color:var(--hv-ink2);text-decoration:none;border-bottom:1px solid var(--hv-line)} .hv-rep-crumbs b{font-weight:400;color:var(--hv-ink)}
.hv-rep-tools{display:flex;gap:6px;align-items:flex-end;border-bottom:1px solid var(--hv-line);margin:0 0 4px;font-size:var(--hv-rep-fs-s);flex-wrap:wrap}
.hv-rep-tools a i{font-style:normal;margin-right:6px}
.hv-rep-tools a{color:var(--hv-ink2);text-decoration:none;padding:9px 14px;border:1px solid var(--hv-line);border-bottom:0;border-radius:8px 8px 0 0;background:var(--hv-cream2);margin-bottom:-1px;line-height:1.2}
.hv-rep-tools a.hv-rep-on{color:var(--hv-ink);font-weight:600;background:var(--hv-cream);border-color:var(--hv-line);border-bottom:1px solid var(--hv-cream)}
.hv-rep-gift-more{margin:12px 0 0} .hv-rep-gift-more a{color:var(--hv-plum2)}
.hv-rep-gift{border:1px solid var(--hv-line);border-radius:8px;padding:18px 20px 20px;margin:14px 0 0;background:var(--hv-cream2)}
.hv-rep-gift h2{margin:4px 0 8px} .hv-rep-gift p{margin:0 0 14px}
.hv-rep-code{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:2px dashed var(--hv-plum2);border-radius:8px;padding:12px 16px;background:var(--hv-field);margin:0 0 14px}
.hv-rep-code-l{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hv-rep-code-v{font-family:var(--hv-serif);font-size:var(--hv-rep-fs-h);font-weight:700;color:var(--hv-plum2);letter-spacing:.04em}
.hv-rep-code .hv-rep-copy{margin-left:auto;font-size:var(--hv-rep-fs-s);color:var(--hv-plum2)}
.hv-rep-gift-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hv-rep-gift-btns .hv-rep-btn{padding:14px}
.hv-rep-minitab a.hv-rep-on{color:var(--hv-ink);border-bottom:2px solid var(--hv-plum2);padding-bottom:6px}
.hv-rep-land{padding:36px 0 28px;border-bottom:1px solid var(--hv-line)}
.hv-rep-land.hv-rep-compact{padding:20px 0 24px}
.hv-rep-brand{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hv-rep-brand b{font-family:var(--hv-serif);font-size:var(--hv-rep-fs-a);color:var(--hv-ink)}
.hv-rep-brand img{display:block}
.hv-rep-land.hv-rep-compact .hv-rep-brand{margin-bottom:10px}
.hv-rep-land .hv-rep-kicker{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:0 0 10px}
/* ⚠️ Селектор с .hv-rep обязателен: базовые правила `.hv-rep h1` и `.hv-rep p`
   специфичнее одиночного класса и обнуляли эти отступы. Из-за этого лид
   стоял вплотную к заголовку — правка Романа 10.09. */
.hv-rep .hv-rep-land-h1{font-size:var(--hv-rep-fs-d);line-height:1.08;margin:0 0 22px}
.hv-rep .hv-rep-land-lead{font-size:var(--hv-rep-fs-a);line-height:1.55;margin:0 0 34px}
.hv-rep-land.hv-rep-compact .hv-rep-land-lead,.hv-rep-land.hv-rep-compact .hv-rep-kicker,.hv-rep-land.hv-rep-compact .hv-rep-pf-honest{display:none}
.hv-rep-land.hv-rep-compact .hv-rep-land-h1{font-size:var(--hv-rep-fs-h);margin-bottom:12px}
.hv-rep-pf-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 14px}
.hv-rep-pf-card{border-top:2px solid var(--hv-ink);padding:14px 0 4px} .hv-rep-pf-card.hv-rep-p{border-top-color:var(--hv-line)}
.hv-rep-pf-who{font-family:var(--hv-serif);font-size:var(--hv-rep-fs-a);font-weight:700;margin:0 0 10px}
.hv-rep-pf-l{display:block;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:0 0 12px}
.hv-rep-pf-l span{color:var(--hv-ink2);opacity:.7}
.hv-rep-pf-l input{display:block;width:100%;margin-top:4px;border:1px solid var(--hv-line);border-radius:6px;background:var(--hv-field);padding:14px 12px;font:600 var(--hv-rep-fs-a)/1.2 var(--hv-rep-sans);color:var(--hv-ink)}
.hv-rep-pf-l input::placeholder{color:var(--hv-ink2);opacity:.55;font-weight:400}
.hv-rep-pf-l input:focus{outline:2px solid var(--hv-plum2);outline-offset:1px;border-color:var(--hv-plum2)}
.hv-rep-pf-g{display:flex;gap:16px;margin:0 0 12px;font-size:var(--hv-rep-fs-b)}
.hv-rep-pf-g label,.hv-rep-pf-rel label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.hv-rep-pf-g input,.hv-rep-pf-rel input{accent-color:var(--hv-plum2);width:18px;height:18px;margin:0}
.hv-rep-pf-rel{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:var(--hv-rep-fs-b);margin:0 0 16px}
/* Однополая пара: «Любовь» гаснет, но остаётся на месте — исчезнувшая кнопка
   читается как сбой формы (ТЗ §14.16). */
.hv-rep-pf-rel label.hv-rep-off{opacity:.42;cursor:not-allowed}
.hv-rep-pf-rel label.hv-rep-off input{cursor:not-allowed}
.hv-rep-pf-note{margin:-10px 0 16px;color:var(--hv-ink3)}
.hv-rep-v3-note{margin:0 0 14px;color:var(--hv-ink3)}
.hv-rep-v3-note a{color:var(--hv-plum2)}
.hv-rep-pf-rel span{color:var(--hv-ink2);font-size:var(--hv-rep-fs-s);width:100%}
.hv-rep-pf-err{border-left:2px solid var(--hv-oct-red);padding-left:12px;color:var(--hv-minus);font-size:var(--hv-rep-fs-s)}
.hv-rep-pf-err.hv-rep-soft{border-left-color:var(--hv-gold);color:var(--hv-ink2)}
.hv-rep-btn.hv-rep-plum{background:var(--hv-plum2);color:var(--hv-cream)} .hv-rep-btn.hv-rep-line{background:transparent;color:var(--hv-plum2);border:1px solid var(--hv-plum2)} .hv-rep-btn.hv-rep-paper{background:var(--hv-cream);color:var(--hv-plum)}
.hv-rep-btn.hv-rep-big{font-size:var(--hv-rep-fs-a);padding:18px}
/* Значения ровно те же, что в демо-8 (правка Романа 10.09: «сделай как
   в демо»). Менять их и не требовалось: 12 px там были с самого начала,
   но не применялись из-за специфичности базового `.hv-rep p` — починено
   через :where() выше. Сверено замером: у демо зазор 12 px, здесь тоже. */
.hv-rep-pf-trust{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);text-align:center;margin:12px 0 4px}
.hv-rep-pf-honest{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);text-align:center;margin:0}
/* Кикер «Что вы получите» стоял вплотную к карточке примера: у .hv-rep-ch-q
   нижнего отступа нет вовсе, он рассчитан на заголовок сразу под ним. */
.hv-rep-ex{padding:34px 0 0}
.hv-rep-ex > .hv-rep-ch-q{margin:0 0 14px}
.hv-rep-ex-card{border:1px solid var(--hv-line);border-radius:8px;padding:18px 20px;background:var(--hv-cream2)}
.hv-rep-ex-card .hv-rep-verdict{margin:6px 0 10px} .hv-rep-ex-card h2{margin:0 0 4px}
.hv-rep-tail .hv-rep-ch{margin-top:40px;padding-top:40px}
/* как считается: три шага на реальных числах */
.hv-rep-steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:18px 0 14px}
.hv-rep-s3{border-top:1px solid var(--hv-line);padding-top:12px}
.hv-rep-s3-n{font-family:var(--hv-serif);font-size:var(--hv-rep-fs-h);font-weight:700;color:var(--hv-plum2);line-height:1}
.hv-rep-s3 h3{margin:8px 0 6px;font-family:var(--hv-serif);font-size:var(--hv-rep-fs-a)}
.hv-rep-s3 .hv-rep-small{margin:0 0 12px}
.hv-rep-s3-row{display:flex;align-items:baseline;gap:12px;margin:0 0 6px}
.hv-rep-s3-d{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);min-width:92px}
.hv-rep-s3-row .hv-rep-num{font-size:var(--hv-rep-fs-a);min-width:1.2em}
.hv-rep-s3-cap{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:6px 0 0}
.hv-rep-s3-cap .hv-rep-ab{color:var(--hv-plum2)} .hv-rep-s3-cap .hv-rep-e{color:var(--hv-gold-deco)} .hv-rep-s3-cap .hv-rep-cd{color:var(--hv-oct-red)}
.hv-rep-s3-f{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:4px 0 4px}
.hv-rep-s3-f i{font-style:normal;color:var(--hv-ink2);font-size:var(--hv-rep-fs-a)}
.hv-rep-s3-f .hv-rep-num{min-width:0} .hv-rep-s3-f .hv-rep-num.hv-rep-big{font-size:44px}
/* ПК: три шага на общих строках (номер · заголовок · текст · расчёт · подпись),
   чтобы расчёты стояли на одной горизонтали, какой бы длины ни был текст над ними.
   На телефоне колонки идут столбиком, выравнивать там нечего. */
@media (min-width:601px){.hv-rep-steps3{grid-template-rows:repeat(5,auto);row-gap:0}.hv-rep-s3{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start}.hv-rep-s3-calc,.hv-rep-s3-f{align-self:center}}
.hv-rep-num.hv-rep-plusc{color:var(--hv-plus)} .hv-rep-num.hv-rep-minusc{color:var(--hv-minus)}
/* отзывы: цитаты с полем и итогом */
.hv-rep-revs{display:grid;gap:22px;margin:14px 0 0}
.hv-rep-rev{margin:0;padding:0 0 0 18px;border-left:2px solid var(--hv-line)}
.hv-rep-rev p{font-size:var(--hv-rep-fs-a);line-height:1.5;margin:0 0 10px}
.hv-rep-rev p b{color:var(--hv-plum2)}
.hv-rep-rev footer{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);align-items:baseline}
.hv-rep-rev-who{font-weight:600;color:var(--hv-ink)}
.hv-rep-rev-res{color:var(--hv-plus)} .hv-rep-rev-res::before{content:'+ '}
.hv-rep-tiers{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hv-rep-tiers div{border-top:2px solid var(--hv-line);padding-top:12px} .hv-rep-tiers div:last-child{border-top-color:var(--hv-plum2)}
.hv-rep-tiers b{font-family:var(--hv-serif);font-size:var(--hv-rep-fs-a);display:block;margin-bottom:6px}
.hv-rep-tiers p{font-size:var(--hv-rep-fs-s);margin:0}
.hv-rep-minitab{position:sticky;top:0;z-index:5;background:var(--hv-cream);border-bottom:1px solid var(--hv-line);display:flex;gap:18px;overflow-x:auto;white-space:nowrap;padding:10px 0;font-size:var(--hv-rep-fs-s);margin:0 -20px;padding-left:20px;padding-right:20px}
.hv-rep-minitab a{color:var(--hv-ink2);text-decoration:none} .hv-rep-minitab a:hover{color:var(--hv-plum2)}
.hv-rep-torn{position:relative;max-height:340px;overflow:hidden;margin-bottom:0}
.hv-rep-torn .hv-rep-fade{position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(to bottom,rgba(255,253,249,0),var(--hv-cream))}
.hv-rep-wall{margin-top:0}
.hv-rep-wall .hv-rep-wall-k{font-size:var(--hv-rep-fs-s);opacity:.75;margin:0 0 6px}
.hv-rep-wall .hv-rep-wall-g{font-family:var(--hv-serif);font-size:var(--hv-rep-fs-a);margin:18px 0 4px;color:var(--hv-cream)}
.hv-rep-wall .hv-rep-wall-list{list-style:none;margin:0;padding:0}
.hv-rep-wall .hv-rep-wall-list li{padding:8px 0;border-top:1px solid rgba(255,253,249,.18);font-size:var(--hv-rep-fs-s)}
.hv-rep-wall .hv-rep-wall-list b{display:block;color:var(--hv-cream)} .hv-rep-wall .hv-rep-wall-list span{opacity:.75}
/* Стена v3.1 (12.09): четыре строки вместо списка из двадцати, полный список
   под details. Цель — от счётчика до кнопки один экран 390px. */
.hv-rep-wall .hv-rep-wall-lead{margin:0 0 14px}
/* ── Стена §2в (правка Романа 12.09 по скрину) ───────────────────────────
   Было девять текстовых блоков одного веса на одной плашке. Стало: градусник
   вместо девятого, в каждой строке плитка аркана из данных пары, второй путь
   отдельной карточкой, воздух перед кнопкой в полтора межстрочных. */
.hv-rep-wall .hv-rep-wall-seg{display:grid;grid-auto-flow:column;gap:4px;margin:0 0 8px}
.hv-rep-wall .hv-rep-wall-seg i{height:3px;border-radius:2px;background:rgba(255,253,249,.22)}
.hv-rep-wall .hv-rep-wall-seg i.hv-rep-on{background:var(--hv-gold-deco)}
.hv-rep-wall .hv-rep-wall-rows{list-style:none;margin:0 0 30px;padding:0}
.hv-rep-wall .hv-rep-wall-rows li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;
  align-items:start;padding:10px 0;border-top:1px solid rgba(255,253,249,.18);font-size:var(--hv-rep-fs-s)}
/* Плитка на тёмной плашке: число остаётся в своём цвете октограммы, но
   лежит на кремовом квадрате. Без него слива по сливе (`--hv-plum2` у верха,
   чернильный по умолчанию) на стене просто не видна. */
.hv-rep-wall .hv-rep-wall-rows .hv-rep-num{margin:2px 0 0;background:var(--hv-cream);
  border-radius:8px;padding:5px 0 6px;width:40px;text-align:center;
  font-size:var(--hv-rep-fs-b);color:var(--hv-ink)}
.hv-rep-wall .hv-rep-wall-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0}
.hv-rep-wall .hv-rep-wall-rows b{color:var(--hv-cream);font-family:var(--hv-serif);
  font-size:var(--hv-rep-fs-a);line-height:1.15}
.hv-rep-wall .hv-rep-wall-rows span{display:block;opacity:.75;margin-top:2px}
.hv-rep-wall .hv-rep-wall-rows i{font-style:normal;opacity:.55;white-space:nowrap;flex:0 0 auto}
/* Карточка второго пути: рамка без заливки — объект виден, но спорить
   с залитой кнопкой не может. */
.hv-rep-wall .hv-rep-wall-bot{border:1px solid rgba(255,253,249,.28);border-radius:12px;
  padding:12px 14px;margin:16px 0 0;text-align:center;font-size:var(--hv-rep-fs-s);opacity:.9}
.hv-rep-wall .hv-rep-wall-bot p{margin:0}
.hv-rep-wall .hv-rep-wall-bot-l{margin-top:6px!important}
.hv-rep-wall .hv-rep-wall-bot a{color:var(--hv-cream);text-decoration:underline;
  display:inline-flex;align-items:center;gap:6px;margin:0 6px}
/* Знак мессенджера в его фирменном цвете: он говорит, куда ведёт ссылка,
   и на сливовой плашке различим лучше подчёркнутого слова. */
.hv-rep-wall .hv-rep-wall-bot svg{width:17px;height:17px;flex:0 0 auto}
.hv-rep-wall .hv-rep-wall-tg svg{color:#2AABEE}
.hv-rep-wall .hv-rep-wall-max svg{color:#7B5BFF}
/* Свёрнутый список по центру, строка честности — самым бледным на плашке. */
.hv-rep-wall .hv-rep-wall-all{margin-top:16px;text-align:center}
.hv-rep-wall .hv-rep-wall-all>summary{display:inline-block}
.hv-rep-wall .hv-rep-wall-all .hv-rep-wall-g,
.hv-rep-wall .hv-rep-wall-all .hv-rep-wall-list{text-align:left}
.hv-rep-wall .hv-rep-honest{opacity:.55}
/* Та же строка в окне оплаты: там фон светлый, цвет свой. */
.hv-rep-modal .hv-rep-wall-bot{font-size:var(--hv-rep-fs-s);color:var(--hv-ink3);margin:12px 0 0;text-align:center}
.hv-rep-modal .hv-rep-wall-bot a{color:var(--hv-plum2);text-decoration:underline}
.hv-rep-wall-all{margin:18px 0 0}
.hv-rep-wall-all>summary{cursor:pointer;font-size:var(--hv-rep-fs-s);opacity:.8;list-style:none;padding:8px 0;border-top:1px solid rgba(255,253,249,.18)}
.hv-rep-wall-all>summary::-webkit-details-marker{display:none}
.hv-rep-wall-all>summary::after{content:" ↓"}
.hv-rep-wall-all[open]>summary::after{content:" ↑"}
.hv-rep-wall-all .hv-rep-btn{margin-top:18px}
/* Крестик липкой полосы: закрывает до конца сессии (§2а правило 4). */
.hv-rep-sticky-x{flex:0 0 auto;background:none;border:0;color:var(--hv-ink3);font-size:22px;line-height:1;padding:4px 2px 4px 8px;cursor:pointer}
.hv-rep-sticky-x:hover{color:var(--hv-ink)}
/* Спрятанное состояние прячет полностью. До 12.09 полоса уезжала на 110 %
   собственной высоты, а правило `bottom:104px` при cookie-баннере поднимало
   её обратно — и «скрытая» полоса торчала над баннером на весь экран.
   visibility снимает вопрос независимо от того, чем её ещё сдвинут. */
/* Цвет и шрифт заданы своими, а не унаследованы: в bare-режиме полоса
   переезжает к родителю (pair_report.js), а у посадочной на body висит
   `ds-dark` со светлым текстом — подпись «Полный разбор: ещё 20 глав»
   выходила почти белой по кремовому фону. Внутри отчёта значения те же. */
.hv-rep-stickycta{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--hv-cream);color:var(--hv-ink);font-family:var(--hv-rep-sans);border-top:1px solid var(--hv-line);transform:translateY(110%);visibility:hidden;transition:transform .2s,visibility .2s}
.hv-rep-stickycta.hv-rep-show{transform:none;visibility:visible}
.hv-rep-stickycta .hv-rep-in{max-width:var(--hv-rep-col);margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--hv-rep-fs-s)}
.hv-rep-stickycta .hv-rep-btn{width:auto;padding:12px 16px;white-space:nowrap;flex:0 0 auto}
.hv-rep-stickycta .hv-rep-in span{flex:1 1 auto}
.hv-rep-modal{position:fixed;inset:0;z-index:20;background:rgba(42,33,48,.55);display:none;align-items:flex-end;justify-content:center;padding:0;overflow-y:auto}
/* Окно оплаты открывает скрипт классом .open — в демо оно рендерилось
   только по ?pay=, здесь живёт в разметке всегда и до клика скрыто. */
.hv-rep-modal.open{display:flex}
@media(min-width:600px){.hv-rep-modal{align-items:center;padding:20px}}
.hv-rep-dlg{background:var(--hv-cream);width:100%;max-width:520px;border-radius:12px 12px 0 0;padding:24px 20px 28px;position:relative;margin-top:auto}
@media(min-width:600px){.hv-rep-dlg{border-radius:12px;margin:auto}}
.hv-rep-dlg .hv-rep-x{position:absolute;right:20px;top:18px;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hv-rep-dlg h2{margin:2px 0 10px} .hv-rep-dlg .hv-rep-btn{margin-top:8px}
.hv-rep-paidbanner{border:1px solid var(--hv-plum2);border-radius:8px;padding:18px 20px;margin:18px 0 0}
.hv-rep-paidbanner h2{margin:0 0 6px}
/* Утилиты купленного разбора сеткой 2×2 в плашке «Оплата прошла» (11.09):
   PDF сливой, остальное контуром. На телефоне в столбик, как кнопки подарка. */
.hv-rep-paid-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.hv-rep-paid-acts .hv-rep-btn{padding:14px}

.hv-rep-rate{text-align:center} .hv-rep-rate h2{text-align:center}
.hv-rep-rate .hv-rep-rate-btns{display:flex;gap:18px;justify-content:center;margin:4px 0 0}
.hv-rep-rate .hv-rep-rb{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border:1px solid var(--hv-line);border-radius:50%;font-size:32px;text-decoration:none;background:var(--hv-field)}
.hv-rep-rate .hv-rep-rb:hover{border-color:var(--hv-plum2)}
.hv-rep-foot{margin-top:var(--hv-rep-gap);padding:24px 0 40px;border-top:1px solid var(--hv-line);font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hv-rep-foot a{color:var(--hv-ink2)}
/* форма: состояния полей, кнопка, момент «считаем» */
.hv-rep-pf-msg{display:block;font-size:var(--hv-rep-fs-s);color:var(--hv-minus);min-height:0;margin-top:4px}
.hv-rep-pf-l.hv-rep-err input{border-color:var(--hv-oct-red);background:var(--hv-minus-soft)}
.hv-rep-pf-l.hv-rep-ok input{border-color:var(--hv-plus)}
.hv-rep-pf-g label,.hv-rep-pf-rel label{padding:6px 0;min-height:32px}
.hv-rep-pf-g input,.hv-rep-pf-rel input{width:22px;height:22px}
.hv-rep-btn[disabled]{opacity:.45;cursor:not-allowed}
.hv-rep-btn.hv-rep-busy{opacity:.9;cursor:progress}
.hv-rep-pf-prog{height:2px;background:var(--hv-line);margin:8px 0 0;overflow:hidden}
.hv-rep-pf-prog i{display:block;height:100%;width:0;background:var(--hv-plum2);animation:pfp 1.3s ease-out forwards}
@keyframes pfp{to{width:100%}}
.hv-rep-toast{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);background:var(--hv-plum);color:var(--hv-cream);padding:10px 16px;border-radius:6px;font-size:var(--hv-rep-fs-s);z-index:30;max-width:90vw}
.hv-rep-mail-form{display:flex;gap:10px;align-items:flex-end;margin:8px 0 12px} .hv-rep-mail-form .hv-rep-pf-l{flex:1;margin:0} .hv-rep-mail-form .hv-rep-btn{width:auto;padding:12px 16px}
/* страницы ошибок */
.hv-rep-lost{padding:40px 0 20px} .hv-rep-lost-btns{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px} .hv-rep-lost-btns .hv-rep-btn{width:auto;padding:14px 20px}
/* письмо */
.hv-rep-mail{padding:24px 0 0}
.hv-rep-mail-meta{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:0 0 8px}
.hv-rep-mail-box{border:1px solid var(--hv-line);border-radius:8px;background:var(--hv-field);padding:0;overflow:hidden}
.hv-rep-mail-body{padding:24px 24px 20px;max-width:560px}
.hv-rep-mail-brand{font-family:var(--hv-serif);font-weight:700;font-size:var(--hv-rep-fs-a);margin:0 0 14px}
.hv-rep-mail-body h2{margin:0 0 10px} .hv-rep-mail-body .hv-rep-btn{width:auto;display:inline-block;padding:14px 22px;margin:4px 0 12px} .hv-rep-mail-body .hv-rep-code{margin:10px 0 14px}
/* карточка 1080×1350 (масштаб 0.5 в демо) */
.hv-rep-cardwrap{padding:24px 0 0}
.hv-rep-card1080{width:540px;height:675px;max-width:100%;background:var(--hv-cream);border:1px solid var(--hv-line);padding:36px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box;position:relative}
.hv-rep-card1080 .hv-rep-c-top,.hv-rep-card1080 .hv-rep-c-bot{display:flex;justify-content:space-between;font-size:13px;color:var(--hv-ink2)}
.hv-rep-card1080 .hv-rep-c-bot{margin-top:auto}
.hv-rep-card1080 .hv-rep-c-type{font-family:var(--hv-serif);font-size:38px;line-height:1.05;font-weight:700}
.hv-rep-card1080 .hv-rep-c-pct{font-family:var(--hv-serif);font-size:96px;line-height:.95;color:var(--hv-plum2);font-weight:700} .hv-rep-card1080 .hv-rep-c-pct span{font-size:.4em;vertical-align:.6em}
.hv-rep-card1080 .hv-rep-c-scale{height:12px;border-radius:6px;background:var(--hv-line);overflow:hidden} .hv-rep-card1080 .hv-rep-c-scale i{display:block;height:100%;background:linear-gradient(90deg,var(--hv-oct-red),var(--hv-gold-deco),var(--hv-plus))}
.hv-rep-card1080 .hv-rep-c-row{margin:0;font-size:15px;line-height:1.45;border-left:2px solid var(--hv-line);padding-left:12px}
.hv-rep-card1080 .hv-rep-c-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:13px;line-height:1.4;margin-top:6px} .hv-rep-card1080 .hv-rep-c-two b{display:block;margin-bottom:4px} .hv-rep-card1080 .hv-rep-c-two div:first-child b{color:var(--hv-plus)} .hv-rep-card1080 .hv-rep-c-two div:last-child b{color:var(--hv-minus)} .hv-rep-card1080 .hv-rep-c-two p{margin:0 0 4px}
/* печать и PDF */
/* Инлайн-отчёт на посадочной: пока он открыт, хвост страницы человеку не
   нужен — он дублирует то, что уже развёрнуто выше. Бот видит хвост всегда:
   без JS класс не ставится, а значит и правило не срабатывает.
   Перенесено из прод-редакции как есть (решение Романа 11.07). */
body.pair-inline-active #pair-inline-host ~ *{display:none!important}
#pair-inline-frame{width:100%;border:0;display:block;background:transparent}
/* Разрыв между листом с формой и листом отчёта (правка Романа 10.09):
   бумага заканчивается и начинается новая, а не «страница в странице».
   Отступ снизу нужен только когда отчёт открыт — пустой host не должен
   раздвигать листы. */
#pair-inline-host:not(:empty){display:block;margin:22px 0 0}

/* ── Правки Романа 10.09 по первому экрану ─────────────────────────────────
   <em> в H1 — цветное переливание, как было на старом лендинге. Палитра
   своя: слива → роза, оба токена hv. Прежний градиент был на малиновом
   #a8446a, который DESIGN.md снял вместе с чужой Tailwind-палитрой.
   padding снизу — чтобы webkit не срезал нижний хвост букв в клиппинге. */
.hv-rep-land-h1 em,.hv-rep h2 em,.hv-rep h3 em{font-style:italic;color:var(--hv-plum2)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hv-rep-land-h1 em,.hv-rep h2 em,.hv-rep h3 em{background-image:linear-gradient(135deg,var(--hv-plum2) 0%,var(--hv-rose) 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    padding-bottom:.08em}
}

/* Блик по главной кнопке: редкий, слева направо. Не «дышащая» анимация на
   каждом элементе (это признак слопа), а один проход раз в семь секунд —
   ровно чтобы глаз зацепился за единственное действие экрана. */
.hv-rep-btn.hv-rep-plum.hv-rep-big{position:relative;overflow:hidden;isolation:isolate}
/* Только на живой кнопке: пока даты не введены, она заблокирована, и блик
   звал бы нажать то, что не нажимается. */
.hv-rep-btn.hv-rep-plum.hv-rep-big:not(:disabled)::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-120%);animation:hv-rep-sheen 7s ease-in-out 2s infinite;pointer-events:none}
@keyframes hv-rep-sheen{0%{transform:translateX(-120%)}12%{transform:translateX(120%)}100%{transform:translateX(120%)}}
/* Тот же блик на любой кнопке по классу `hv-rep-shine` — нужен кнопке
   стены «Открыть полный разбор» (правка Романа 10.09). Цвет полосы
   переменной: на сливовой кнопке белая, на кремовой белая не видна,
   поэтому там она сливовая. */
.hv-rep-btn.hv-rep-shine{position:relative;overflow:hidden;isolation:isolate}
.hv-rep-btn.hv-rep-shine:not(:disabled)::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,var(--hv-shine,rgba(255,255,255,.28)) 50%,transparent 65%);
  transform:translateX(-120%);animation:hv-rep-sheen 7s ease-in-out 2s infinite;pointer-events:none}
.hv-rep-btn.hv-rep-paper.hv-rep-shine{--hv-shine:rgba(76,33,104,.16)}
/* Зачёркнутая цена «до» на кнопке стены: скидку видно ДО клика, а не
   только внутри окна оплаты. Пустой элемент не занимает места. */
.pw-cta-old{margin-right:6px;opacity:.6;font-weight:600}
.pw-cta-old:empty{display:none}

/* Кому анимация мешает — не показываем её вовсе. */
@media (prefers-reduced-motion:reduce){.hv-rep-btn.hv-rep-plum.hv-rep-big::after,.hv-rep-btn.hv-rep-shine::after{animation:none;opacity:0}}

/* Воронка блика (Роман, 10.09): мерцает то, куда сейчас жать. Пока даты не
   введены, кнопка заблокирована и блик по ней запрещён правилом выше — вместо
   неё светятся пустые поля даты. Как только обе даты сошлись, форма теряет
   класс `hv-rep-wait`, поля гаснут и блик перехватывает кнопка. В отчёте
   форма приезжает заполненной, поэтому там не мерцает ничего.

   Блик — фоновый градиент самого поля, а не наложенный слой: у `input`
   псевдоэлементов нет, а перекрывать поле абсолютным блоком значит ловить
   мышью не поле, а этот блок. Поле с ошибкой не мерцает: там уже горит
   красная рамка со своим сообщением, и два сигнала в одном месте спорят. */
.hv-rep-pf.hv-rep-wait .hv-rep-pf-l:not(.hv-rep-ok):not(.hv-rep-err) input[data-date]{
  background-image:linear-gradient(105deg,transparent 34%,rgba(122,58,138,.14) 50%,transparent 66%);
  background-repeat:no-repeat;background-size:45% 100%;background-position:-100% 0;
  animation:hv-rep-field-sheen 4.5s ease-in-out 1s infinite}
.hv-rep-pf.hv-rep-wait .hv-rep-pf-l:not(.hv-rep-ok):not(.hv-rep-err) input[data-date]:focus{animation:none;background-image:none}
@keyframes hv-rep-field-sheen{0%{background-position:-100% 0}18%{background-position:200% 0}100%{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.hv-rep-pf.hv-rep-wait input[data-date]{animation:none;background-image:none}}

/* Пример вердикта на посадочной: две строки, ради которых человек и вводит
   даты. В отчёте они спокойные, здесь — плашки в белом поле, крупнее
   основного текста. Цвет по смыслу: спор красный, период золотой —
   те же цвета, что у точек на октограмме. */
.hv-rep-ex .hv-rep-q{margin:0 0 12px;padding:2px 0 2px 16px;border-left:3px solid var(--hv-oct-red);
  font-size:var(--hv-rep-fs-b);line-height:1.5}
.hv-rep-ex .hv-rep-q b{color:var(--hv-oct-red)}
.hv-rep-ex .hv-rep-q + .hv-rep-q{border-left-color:var(--hv-gold-deco)}
.hv-rep-ex .hv-rep-q + .hv-rep-q b{color:var(--hv-gold)}

/* ═══════════════════════════════════════════════════════════════════
   Блоки хвоста посадочной (10.09.2026, правки Романа: «слишком много
   пустого текста»). Ни одной декоративной картинки: всё, что здесь
   показывается, — это данные (числа примера, карты арканов, обложки
   статей) или живой человек (фото автора).
   ═══════════════════════════════════════════════════════════════════ */

/* Схема пары со знаком вопроса — что человек получит, введя две даты. */
.hv-rep-scheme{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:center;margin:18px 0 4px}
.hv-rep-scheme svg{width:100%;height:auto;display:block}
.hv-rep-scheme-q{font-family:var(--hv-serif);font-size:44px;font-weight:700;fill:var(--hv-plum2)}
@media(max-width:600px){.hv-rep-scheme{grid-template-columns:1fr;gap:14px}.hv-rep-scheme svg{max-width:200px;margin:0 auto}}

/* Разбор одной даты по шагам + проверка на своей. */
.hv-rep-calc{margin:16px 0 6px;padding:18px 20px;border:1px solid var(--hv-line);border-radius:8px;background:var(--hv-field)}
.hv-rep-calc-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:0 0 10px;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hv-rep-calc-row i{font-style:normal;color:var(--hv-ink2)}
.hv-rep-calc-row b{font-family:var(--hv-serif);font-size:var(--hv-rep-fs-a);font-weight:700;color:var(--hv-ink)}
.hv-rep-calc-lbl{min-width:104px;color:var(--hv-ink2)}
/* Формула в общем виде: пять шагов одной строкой, как на прод-лендинге.
   Пришли на место калькулятора «проверьте на своей дате» — он занимал экран
   ради того же, что показывают строки примера рядом. Единственный
   акцент полосы — «Итог»: у него рамка сплошная, у шагов пунктир. */
.hv-rep-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0 14px}
.hv-rep-steps div{padding:14px 10px;border:1px dashed var(--hv-line);border-radius:8px;background:var(--hv-field);text-align:center}
.hv-rep-steps div:last-child{border-style:solid;border-color:var(--hv-plum2)}
.hv-rep-steps span{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hv-plum2);margin:0 0 6px}
.hv-rep-steps b{display:block;font-family:var(--hv-serif);font-weight:700;font-size:var(--hv-rep-fs-a);line-height:1.1;color:var(--hv-ink)}
@media(max-width:640px){.hv-rep-steps{grid-template-columns:repeat(2,1fr)}.hv-rep-steps div:last-child{grid-column:1/-1}}

/* Автор: лицо проекта, а не аноним. */
/* Фото справа и прямоугольное (правка Романа 10.09): круглая обводка резала
   портрет и читалась как аватар в мессенджере, а не как подпись автора. */
/* Виды совместимости под формой: якорь «Любовь» ведёт на неё же, дружба и
   дело ждут своих страниц и потому не ссылки, а метки. Активный вид отличается
   сплошной сливовой рамкой — тем же приёмом, что «Итог» в полосе формулы. */
/* Кнопка «к расчёту» посреди хвоста: подпись рядом, а не под кнопкой, чтобы
   строка не читалась как ещё один абзац раздела. Не `hv-rep-big` — блик
   остаётся у единственной большой кнопки формы, иначе мерцает вся страница. */
.hv-rep-cta1{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:22px 0 24px}
.hv-rep-cta1 .hv-rep-btn{width:auto;padding:14px 24px}
.hv-rep-cta1 span{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
/* На телефоне кнопка во всю ширину, подпись — строкой по центру под ней:
   прижатая влево, она читалась как начало следующего абзаца. */
@media(max-width:520px){.hv-rep-cta1{gap:10px}.hv-rep-cta1 .hv-rep-btn{width:100%}
  .hv-rep-cta1 span{width:100%;text-align:center}}

.hv-rep-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 2px}
.hv-rep-kind{display:block;padding:12px 10px;text-align:center;border:1px dashed var(--hv-line);
  border-radius:8px;background:var(--hv-field);text-decoration:none;color:var(--hv-ink2)}
.hv-rep-kind b{display:block;font-family:var(--hv-serif);font-size:var(--hv-rep-fs-a);font-weight:700;color:var(--hv-ink);line-height:1.15}
.hv-rep-kind span{display:block;margin-top:3px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.hv-rep-kind-on{border-style:solid;border-color:var(--hv-plum2);background:var(--hv-paper)}
.hv-rep-kind-on span{color:var(--hv-plum2)}
.hv-rep-kind:not(.hv-rep-kind-on) b{color:var(--hv-ink2)}
.hv-rep-kind:not(.hv-rep-kind-on){opacity:.72}

/* Автор: текст на всю ширину листа, портрет — слоем ПОД ним справа
   (правка Романа 10.09). Колонкой было хуже: чтобы портрет вырос, колонка
   текста сужалась, и заголовок ломался на три строки. Теперь ширина текста
   не трогается вовсе, а силуэт заходит за строки правым краем абзацев.

   Числа подобраны по силуэту, а не на глаз: в файле 700×937 непрозрачная
   часть занимает x 97–549, то есть слева у неё 14 % пустоты, справа 22 %.
   При ширине 320 это 44 и 69 px. Портрет сдвинут вправо на 55, и текст
   обрывается там, где начинается сам человек: под строки заходит только
   прозрачная кромка файла. Затухания поэтому нет — оно понадобилось бы,
   лезь строки на тёмный жилет.

   Портрет прижат к низу: снизу у него ботинки, сверху воздух, и «прилипание»
   низом читается как стоящий на полосе человек. */
.hv-rep-author{position:relative;margin:6px 0;min-height:360px}
.hv-rep-author>div{position:relative;z-index:1;padding-right:225px}
.hv-rep-author-head h2{margin-bottom:6px}
.hv-rep-author img{position:absolute;right:-55px;bottom:0;z-index:0;
  width:320px;height:429px;object-fit:contain;pointer-events:none}
/* На телефоне слоя нет: портрет встаёт обычной картинкой под заголовком —
   там, где он и стоит в разметке. Строки на человека не ложатся: узкая
   колонка и текст поверх лица нечитаемы даже с маской. */
@media(max-width:760px){
  .hv-rep-author{min-height:0}
  .hv-rep-author>div{padding-right:0}
  .hv-rep-author img{position:static;width:210px;height:281px;margin:4px auto 14px;
    -webkit-mask-image:none;mask-image:none}
}

/* Карты арканов: сами карты, а не иконки-заглушки. */
/* Явное число колонок, а не auto-fit: при auto-fit последняя карта то и дело
   оставалась одна на второй строке — шесть карт при семи в ряду. */
/* Рамка карты — по пропорции самого файла (200×346), а не 2/3: при 2/3 бокс
   шире картинки, и `cover` срезал ей верх и низ. `contain` держит карту целой,
   даже если один из двадцати двух файлов окажется другого размера.
   `minmax(0,1fr)` вместо `1fr`: у `1fr` минимум — ширина содержимого, и
   колонка с длинной подписью («иллюзорная влюблённость») раздвигала соседей.
   Из-за этого карты были разной ширины, а номера под ними — на разной высоте. */
.hv-rep-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:16px 0 8px;align-items:start}
@media(max-width:760px){.hv-rep-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hv-rep-cards a{display:block;text-decoration:none;color:var(--hv-ink2);font-size:var(--hv-rep-fs-s);text-align:center}
.hv-rep-cards img{width:100%;aspect-ratio:200/346;object-fit:contain;background:var(--hv-field);border-radius:6px;border:1px solid var(--hv-line);display:block;margin:0 0 6px}
.hv-rep-cards b{display:block;font-family:var(--hv-serif);font-size:var(--hv-rep-fs-b);color:var(--hv-ink);font-weight:700}
.hv-rep-cards a:hover b{color:var(--hv-plum2)}

/* Диалог с Нумией — так он выглядит в чате. Без рамки телефона: рамка
   была бы декорацией, а реплики — это и есть содержание. */
/* Рамка вокруг переписки (правка Романа 10.09): без неё реплики висели
   прямо на листе и читались как обычные абзацы страницы, а не как чат. */
.hv-rep-chat{margin:10px 0 14px;display:grid;gap:10px;max-width:520px;
  padding:16px;border:1px solid var(--hv-line);border-radius:14px;background:var(--hv-paper)}
.hv-rep-chat p{margin:0;padding:12px 16px;border-radius:14px;font-size:var(--hv-rep-fs-b);line-height:1.45}
.hv-rep-chat .hv-rep-you{background:var(--hv-cream2);border-bottom-right-radius:4px;justify-self:end;max-width:86%}
.hv-rep-chat .hv-rep-her{background:var(--hv-field);border:1px solid var(--hv-line);border-bottom-left-radius:4px;max-width:92%}
.hv-rep-chat-head{margin-top:16px}
.hv-rep-chat-head{display:flex;align-items:center;gap:10px;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:0 0 4px}
.hv-rep-chat-head img{width:32px;height:32px;border-radius:50%;display:block}
.hv-rep-btns{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 4px}
.hv-rep-btns .hv-rep-btn{width:auto;padding:13px 20px}
/* Две кнопки одной ширины: `1fr 1fr` вместо flex — при разной длине подписей
   («Telegram» короче «MAX») кнопки выходили разного размера. Знак мессенджера
   слева от подписи, размером со строку. */
.hv-rep-btns-eq{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px}
.hv-rep-btns-eq .hv-rep-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.hv-rep-btns-eq svg{width:19px;height:19px;flex:0 0 auto;display:block}
@media(max-width:520px){.hv-rep-btns-eq{grid-template-columns:1fr}}

/* Превью блога: обложка статьи — это иллюстрация аркана, она уже есть. */
/* Ровно три в строку (правка Романа 10.09): `auto-fit` при трёх статьях и
   узком листе давал две колонки и одинокую третью карточку под ними. */
.hv-rep-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:16px 0 6px}
@media(max-width:640px){.hv-rep-posts{grid-template-columns:1fr}}
.hv-rep-posts a{display:block;text-decoration:none;color:var(--hv-ink)}
.hv-rep-posts img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;border:1px solid var(--hv-line);display:block;margin:0 0 10px}
.hv-rep-posts b{display:block;font-family:var(--hv-serif);font-size:var(--hv-rep-fs-b);line-height:1.25;font-weight:700}
.hv-rep-posts span{display:block;margin-top:6px;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);line-height:1.4}
.hv-rep-posts a:hover b{color:var(--hv-plum2)}

/* Хром сайта не спорит с отчётом (правило 10 DESIGN.md). Проверено 10.09
   на живой странице: cookie-баннер (z 9999, высота 99 px) закрывал липкую
   кнопку «Открыть полный разбор» целиком — ровно в момент решения о покупке,
   а кнопка «наверх» садилась на неё же.

   Баннер не двигаем: он обязан быть виден и нажимаем. Двигаем кнопку —
   и только пока баннер на странице (`:has`, после «Принять» узел снимается,
   и кнопка возвращается вниз сама). */
/* Поднимаем полосу над cookie-баннером, только пока он ВИДЕН: сам элемент
   лежит в разметке всегда (display:none), и `:has(#cookie-banner)` держал
   полосу в 104px от низа круглые сутки — она висела посреди подвала. */
body.ck-open .hv-rep-stickycta{bottom:104px}
.hv-rep-stickycta{z-index:300}
/* Кнопка «наверх» пряталась на всех листах `.hv-rep` — из-за липкой кнопки
   покупки, на которую она садилась. Условие теперь по самой липкой кнопке:
   есть она (отчёт за стеной) — «наверх» уходит, нет её (посадочная, где её
   сняли 10.09) — кнопка на месте. Правило подстраивается само. */
/* Кнопка «наверх» уступает липкой полосе, только когда та ПОКАЗАНА.
   По наличию в разметке она пряталась всегда — а полоса теперь
   появляется по четырём правилам и почти всё время скрыта. */
body:has(.hv-rep):has(.hv-rep-stickycta.hv-rep-show) .ds-scroll-top{display:none}
/* А там, где «наверх» вернулась (посадочная пары), сфера подсказчика
   поднимается над ней: общее правило `:has(.ds-scroll-top)` выше даёт
   сфере 78 px, а кнопка стоит на 80 и высотой 42 — они налезали. */
body:has(.hv-rep):not(:has(.hv-rep-stickycta.hv-rep-show)) .nh-launcher{bottom:134px}
/* Полоса, переехавшая к родителю (отчёт в рамке на посадочной, ?bare=1).
   `position:fixed` внутри auto-height iframe липнет к низу ДОКУМЕНТА, а не
   экрана, поэтому узел переезжает к родителю (pair_report.js). Здесь три
   следствия: не попасть под правило «всё после хоста спрятать», уступить
   место кнопке «наверх» и поднять сферу подсказчика над полосой. */
body.pair-inline-active #pair-inline-host ~ .hv-rep-stickycta{display:block!important}
body.pair-sticky-host:has(.hv-rep-stickycta.hv-rep-show) .ds-scroll-top{display:none}
body.pair-sticky-host:has(.hv-rep-stickycta.hv-rep-show) .nh-launcher{bottom:84px}
/* Окно оплаты выше баннера: иначе поверх формы с почтой и картой лежит
   плашка про cookie, и человек не может дописать адрес. */
.hv-rep-modal{z-index:10000}
/* Подпись под кнопкой оплаты — по центру, как кнопка над ней.
   Прижатая влево, она читалась как начало следующего абзаца. */
.hv-rep-center{text-align:center}
/* Немного воздуха между кнопкой оплаты и подписью под ней: вплотную она
   читалась как часть кнопки. */
.hv-rep-paynote{margin-top:10px}

/* ── Окно оплаты в инлайн-отчёте (правка Романа 10.09) ──────────────
   Отчёт на посадочной живёт в iframe, и всё, что внутри рамки, лежит
   слоем ниже родительской страницы — какой бы z-index окно себе
   ни поставило. Липкая плашка промокода, футер и низ листа оставались
   поверх окна оплаты, то есть поверх экрана, где просят денег.

   Лечится не слоями внутри рамки, а самой рамкой: пока окно открыто,
   iframe разворачивается на весь экран и уходит выше всего. Класс
   ставит `pair_bare.js` изнутри — same-origin это позволяет. */
body.pair-modal-open{overflow:hidden}
/* `!important` по высоте — не лень: авто-высоту рамке ставит инлайновым
   стилем `sizeFrame()` в pair_landing.js (там 8 000+ px), и без него
   развёрнутая рамка осталась бы восьмитысячной, а окно оплаты
   отцентровалось бы в середине этой высоты — то есть за экраном. */
body.pair-modal-open #pair-inline-frame{position:fixed;inset:0;width:100%!important;height:100%!important;z-index:10001}
body.pair-modal-open .hv-promo-stick{display:none}


/* Общие партиалы внутри листа: мост в бота (.pno-*) и оценка (.rr-*) старше
   дизайн-системы отчёта и написаны на Inter и Outfit. Своими шрифтами они
   давали на странице четыре семьи вместо двух — ТЗ пары v3 §7 требует снять
   Outfit из шаблонов пары, а §10 п. 1 считает семьи при приёмке.
   Переписывать партиалы нельзя: их же читают матрица и прогноз. Поэтому
   правило узкое — только внутри .hv-rep и только про шрифт.
   !important здесь не лень: у партиалов свой <style> в теле страницы,
   он идёт после hv.css и при равной силе побеждает. */
.hv-rep .pno, .hv-rep .pno *, .hv-rep .rr-wrap, .hv-rep .rr-wrap *{font-family:var(--hv-rep-sans)!important}
.hv-rep .pno-fact-b, .hv-rep .pno-title{font-family:var(--hv-serif)!important}
/* Октограмма — общий партиал матрицы и пары, её SVG подписан Inter'ом.
   Менять партиал нельзя (ТЗ v3 §2 п. 5), поэтому шрифт подписей
   переопределяется здесь и только внутри листа отчёта. */
.hv-rep .hv-rep-octo svg text{font-family:var(--hv-rep-sans)!important}

/* Окно оплаты: элементы, которых в демо не было, потому что демо не брало
   денег — старая цена, бейдж скидки и две юридические галочки. */
.hv-rep-price-old{font-family:var(--hv-rep-sans);font-size:var(--hv-rep-fs-s);font-weight:400;color:var(--hv-ink2);text-decoration:line-through;margin-left:6px}
.hv-rep-badge-inline{font-family:var(--hv-rep-sans);font-size:var(--hv-rep-fs-s);font-weight:600;color:var(--hv-plus);margin-left:6px}
.hv-rep-promo{margin:2px 0 10px}
.hv-rep-promo .hv-rep-pf-l{margin:8px 0 0}
.hv-rep-consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);line-height:1.45;margin:0 0 10px}
.hv-rep-consent input{margin:3px 0 0;flex:0 0 auto;width:16px;height:16px;accent-color:var(--hv-plum2)}
.hv-rep-consent a{color:var(--hv-plum2)}

@media print{ .hv-rep-stickycta,.hv-rep-modal,.hv-rep-toast,.hv-rep-tools,.hv-rep-crumbs,.hv-rep-paid-acts,.hv-rep-minitab,.hv-rep-switch,.hv-rep-pf-prog{display:none!important} .hv-rep-part,.hv-rep-wall{-webkit-print-color-adjust:exact;print-color-adjust:exact} .hv-rep-step,.hv-rep-tx,.hv-rep-risk,.hv-rep-chart,.hv-rep-scale,.hv-rep-card,.hv-rep-chips,.hv-rep-tbl,.hv-rep-ky,.hv-rep-tl,.hv-rep-pm{break-inside:avoid} .hv-rep-ch{break-before:auto} .hv-rep-part{break-before:page} }
/* состояния интерактива: наведение и фокус, одна логика на весь документ */
.hv-rep a{transition:color .15s,border-color .15s,background-color .15s}
.hv-rep a:hover{color:var(--hv-plum)}
.hv-rep-toc a:hover,.hv-rep-crumbs a:hover,.hv-rep-links a:hover{border-bottom-color:var(--hv-plum2)}
.hv-rep-btn{transition:background-color .15s,color .15s,border-color .15s}
.hv-rep-btn.hv-rep-plum:hover{background:var(--hv-plum);color:var(--hv-cream)}
.hv-rep-btn.hv-rep-line:hover{background:var(--hv-plum2);color:var(--hv-cream)}
.hv-rep-btn.hv-rep-paper:hover{background:#fff;color:var(--hv-plum)}
.hv-rep-wall a:hover{color:var(--hv-cream);opacity:.85}
.hv-rep-tools a:hover{color:var(--hv-ink);background:var(--hv-cream)}
.hv-rep-minitab a:hover{color:var(--hv-plum2)}
.hv-rep-how summary:hover{color:var(--hv-plum)}
.hv-rep-code .hv-rep-copy:hover{color:var(--hv-plum);border-bottom-color:var(--hv-plum2)}
.hv-rep-pf-g label:hover,.hv-rep-pf-rel label:hover{color:var(--hv-plum2)}
.hv-rep-rate .hv-rep-rb:hover{border-color:var(--hv-plum2);background:var(--hv-cream2)}
.hv-rep a:focus-visible,.hv-rep-btn:focus-visible,.hv-rep summary:focus-visible,.hv-rep input:focus-visible{outline:2px solid var(--hv-plum2);outline-offset:2px}
@media (max-width:600px){ .hv-rep-pf-two,.hv-rep-tiers,.hv-rep-steps3,.hv-rep-gift-btns,.hv-rep-paid-acts{grid-template-columns:1fr} .hv-rep-s3-f .hv-rep-num.hv-rep-big{font-size:36px} .hv-rep-minitab{gap:14px;justify-content:space-between} .hv-rep-tools{gap:6px;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-right:40px} .hv-rep-tools::-webkit-scrollbar{display:none} .hv-rep-tools a{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap} .hv-rep-tools a.hv-rep-on{order:-1} }
/* 2 · две даты как объект */
.hv-rep-duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 22px}
.hv-rep-duo .hv-rep-d{padding:14px 0;border-top:2px solid var(--hv-ink)}
.hv-rep-duo .hv-rep-d.hv-rep-p{border-top-color:var(--hv-line)}
.hv-rep-duo .hv-rep-who{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hv-rep-duo .hv-rep-who .hv-rep-gs{font-family:var(--hv-serif);font-size:var(--hv-rep-fs-b);color:var(--hv-plum2)}
.hv-rep-duo .hv-rep-d.hv-rep-p .hv-rep-who .hv-rep-gs{color:var(--hv-oct-red)}
.hv-rep-duo .hv-rep-dt{font-family:var(--hv-serif);font-size:var(--hv-rep-fs-h);font-weight:700;line-height:1.1;margin:2px 0 0}
.hv-rep-duo .hv-rep-k{display:flex;gap:14px}
.hv-rep-duo .hv-rep-k div{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);line-height:1.2}
.hv-rep-duo .hv-rep-k b{display:block;font-family:var(--hv-serif);font-size:var(--hv-rep-fs-n);color:var(--hv-plum2);line-height:1}
.hv-rep-duo .hv-rep-k b.hv-rep-g{color:var(--hv-gold)} .hv-rep-duo .hv-rep-k b.hv-rep-m{color:var(--hv-minus)}
/* 6 · октограмма на первом экране */
/* 1 · шкала вердикта */
.hv-rep-scale{margin:14px 0 6px}
.hv-rep-scale svg{width:100%;height:auto;display:block;overflow:visible}
.hv-rep-scale .hv-rep-cap{display:flex;justify-content:space-between;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin-top:2px}
.hv-rep-contrib{font-size:var(--hv-rep-fs-s);line-height:1.6;margin:6px 0 0;color:var(--hv-ink2)}
.hv-rep-contrib span{white-space:nowrap;margin-right:6px}
.hv-rep-contrib span b{font-family:var(--hv-serif);font-size:var(--hv-rep-fs-b);line-height:inherit;color:var(--hv-ink)}
.hv-rep-contrib b i{font-style:normal;font-family:var(--hv-rep-sans)}
.hv-rep-contrib .hv-rep-plus b{color:var(--hv-plus)} .hv-rep-contrib .hv-rep-minus b{color:var(--hv-minus)}
/* 3 · шмуцтитул части */
.hv-rep-part{background:var(--hv-cream2);margin:var(--hv-rep-gap) -20px 0;padding:40px 20px 36px;border-top:1px solid var(--hv-line);border-bottom:1px solid var(--hv-line)}
.hv-rep-part .hv-rep-in{max-width:var(--hv-rep-col);margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end}
.hv-rep-part .hv-rep-n{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:0 0 6px}
.hv-rep-part h2{font-size:var(--hv-rep-fs-d);line-height:1.05;margin:0}
.hv-rep-part .hv-rep-arc{text-align:right}
.hv-rep-part .hv-rep-arc b{display:block;font-family:var(--hv-serif);font-size:clamp(52px,14vw,72px);line-height:.9;color:var(--hv-plum2)}
.hv-rep-part .hv-rep-arc span{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hv-rep-part .hv-rep-arc.hv-rep-e b{color:var(--hv-gold-deco)} .hv-rep-part .hv-rep-arc.hv-rep-cd b{color:var(--hv-oct-red)} .hv-rep-part .hv-rep-arc.hv-rep-ab b{color:var(--hv-plum2)}
.hv-rep-part p.hv-rep-l{max-width:var(--hv-rep-col);margin:16px auto 0;font-size:var(--hv-rep-fs-b);color:var(--hv-ink2)}
.hv-rep-part + .hv-rep-ch{border-top:0;margin-top:0}
/* капитель на ответе главы */
.hv-rep-ch .hv-rep-ans::first-letter{font-family:var(--hv-serif);font-size:2.6em;float:left;line-height:.8;padding:6px 8px 0 0;color:var(--hv-plum2)}
/* 4 · тень→ресурс: две тонированные колонки */
.hv-rep-tx .hv-rep-pm{gap:0;border-radius:6px;overflow:hidden}
.hv-rep-tx .hv-rep-pm-c{padding:12px 14px}
.hv-rep-tx .hv-rep-pm-c.hv-rep-plus{background:var(--hv-plus-soft)} .hv-rep-tx .hv-rep-pm-c.hv-rep-minus{background:var(--hv-minus-soft)}
.hv-rep-tx .hv-rep-pm-c b{font-family:var(--hv-serif);font-size:var(--hv-rep-fs-b)}
/* 4 · риск-метр точками */
.hv-rep-dots{display:inline-flex;gap:4px;margin:4px 0 2px}
.hv-rep-dots i{width:9px;height:9px;border-radius:50%;background:var(--hv-line);display:inline-block}
.hv-rep-l3 .hv-rep-dots i.hv-rep-on{background:var(--hv-minus)} .hv-rep-l2 .hv-rep-dots i.hv-rep-on{background:var(--hv-gold)} .hv-rep-l1 .hv-rep-dots i.hv-rep-on{background:var(--hv-plus)}
/* 4 · канал лестницей */
.hv-rep-ladder{position:relative;margin:0 0 16px}
.hv-rep-ladder::before{content:'';position:absolute;left:19px;top:24px;bottom:24px;width:1px;background:var(--hv-line)}
.hv-rep-ladder .hv-rep-step{border:0;padding:12px 0;grid-template-columns:40px 1fr}
.hv-rep-ladder .hv-rep-step .hv-rep-num{width:40px;height:40px;border-radius:50%;background:var(--hv-cream);border:1px solid var(--hv-line);display:inline-flex;align-items:center;justify-content:center;font-size:var(--hv-rep-fs-a);position:relative;min-width:0}
.hv-rep-ladder .hv-rep-step .hv-rep-num.hv-rep-cd{border-color:var(--hv-oct-red)} .hv-rep-ladder .hv-rep-step .hv-rep-num.hv-rep-ab{border-color:var(--hv-plum2)} .hv-rep-ladder .hv-rep-step .hv-rep-num.hv-rep-e{border-color:var(--hv-gold-deco)}
.hv-rep-ladder .hv-rep-step:last-of-type{border:0;margin:0}
/* 5 · календарь как график */
.hv-rep-chart{margin:0 0 10px}
.hv-rep-chart svg{width:100%;height:auto;display:block;overflow:visible}
.hv-rep-legend{display:flex;gap:16px;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:0 0 14px}
.hv-rep-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:-1px;margin-right:5px}
.hv-rep-legend .hv-rep-lm{background:var(--hv-minus)} .hv-rep-legend .hv-rep-lp{background:var(--hv-plus)} .hv-rep-legend .hv-rep-ll{background:var(--hv-line)}
/* мост в бота: кнопки и QR на токенах демо (партиал общий с прод-отчётами, поэтому правим поверх) */
.hv-rep-bridge .pno-chat-ft{display:grid;grid-template-columns:1fr auto;gap:18px 24px;align-items:center}
.hv-rep-bridge .pno-chat-btns{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;width:100%}
.hv-rep-bridge .pno-btn{width:100%;max-width:none;flex:1 1 auto;border-radius:6px;padding:14px 18px;font:600 var(--hv-rep-fs-b)/1.2 var(--hv-rep-sans);background:var(--hv-plum2);color:var(--hv-cream);box-shadow:none;white-space:nowrap;letter-spacing:0;text-transform:none}
.hv-rep-bridge .pno-btn--max{background:transparent;color:var(--hv-plum2);border:1px solid var(--hv-plum2)}
/* Наведение по правилу 8 DESIGN.md: сливовая темнеет, контурная заливается
   сливой. Без этих строк срабатывало общее `.hv-rep a:hover{color:plum}` —
   текст Telegram становился тёмной сливой на сливовом фоне и пропадал, а у
   MAX цвет менялся на неразличимый оттенок (поймано Романом 11.09). Иконки
   в currentColor и перекрашиваются вместе с текстом. */
.hv-rep-bridge .pno-btn{transition:background-color .15s,color .15s,border-color .15s}
.hv-rep-bridge .pno-btn:hover{background:var(--hv-plum);color:var(--hv-cream)}
.hv-rep-bridge .pno-btn--max:hover{background:var(--hv-plum2);border-color:var(--hv-plum2);color:var(--hv-cream)}
.hv-rep-bridge .pno-btn:focus-visible{outline:2px solid var(--hv-plum2);outline-offset:2px}
.hv-rep-bridge .pno-btn svg{width:18px;height:18px;flex:0 0 18px}
.hv-rep-bridge .pno-qr{flex-direction:column;gap:6px;text-align:center}
.hv-rep-bridge .pno-qr-svg{width:92px;height:92px}
.hv-rep-bridge .pno-qr-cap{font:400 var(--hv-rep-fs-s)/1.3 var(--hv-rep-sans);color:var(--hv-ink2);max-width:none}
@media (max-width:600px){
 .hv-rep-duo{gap:14px} .hv-rep-duo .hv-rep-dt{font-size:var(--hv-rep-fs-a)} .hv-rep-duo .hv-rep-k{gap:10px}

 .hv-rep-part .hv-rep-in{grid-template-columns:1fr} .hv-rep-part .hv-rep-arc{text-align:left}
 .hv-rep-chips.hv-rep-pts5{grid-template-columns:1fr}
 .hv-rep-verdict{grid-template-columns:1fr}
 .hv-rep-pct{text-align:left} .hv-rep-pct small{text-align:left}
 .hv-rep-split,.hv-rep-pm,.hv-rep-tl{grid-template-columns:1fr}
 .hv-rep-grid{grid-template-columns:repeat(5,1fr)}
 .hv-rep-card{grid-template-columns:72px 1fr} .hv-rep-card img{width:72px}
}
@media print{.hv-rep-wall,.hv-rep-wall-mark,.hv-rep-how summary::before{display:none}}

/* вкладки над листом */
/* Вкладки инструментов крупнее (правка Романа 10.09): 14 px и узкая подушка
   читались как служебная строка, хотя это переключатель между тремя
   продуктами — и на телефоне в них надо было целиться. */
.hvl .hv-rep-tabs{width:210mm;max-width:100%;margin:0 auto -1px;padding:0 20mm;display:flex;gap:6px;align-items:flex-end;font:16px/1.2 var(--hv-rep-sans);position:relative;z-index:2}
.hvl .hv-rep-tabs a{color:var(--hv-ink2);text-decoration:none;padding:13px 22px;border:1px solid rgba(51,22,63,.12);border-bottom:0;border-radius:10px 10px 0 0;background:rgba(250,246,239,.5)}
.hvl .hv-rep-tabs a i{font-size:1.08em;margin-right:8px}
.hvl .hv-rep-tabs a.hv-rep-on{color:var(--hv-ink);font-weight:600;background:var(--hv-cream);border-color:rgba(51,22,63,.08)}
/* Активная вкладка всегда первая — правило Романа 10.09, на всех ширинах,
   не только на телефоне: человек пришёл на этот калькулятор, и он стоит
   слева, а не третьим в ряду. */
.hvl .hv-rep-tabs a.hv-rep-on{order:-1}
@media(max-width:820px){.hvl .hv-rep-tabs{padding:0 20px}}
.hvl .hv-rep-crumbs{width:210mm;max-width:100%;margin:0 auto 22px;padding:0 20mm;display:flex;gap:8px;flex-wrap:wrap;font:14px/1.4 var(--hv-rep-sans);color:var(--hv-ink2)}
.hvl .hv-rep-crumbs a{color:var(--hv-ink2);text-decoration:none;border-bottom:1px solid rgba(51,22,63,.15)} .hvl .hv-rep-crumbs b{font-weight:400;color:var(--hv-ink)}
.hvl .hv-rep-tabs a{white-space:nowrap}
.hvl .hv-rep-tabs a i{font-style:normal;margin-right:6px}
@media(max-width:820px){.hvl .hv-rep-crumbs{padding:14px 20px 0}}
.hvl .hv-rep-tabs a:hover{color:var(--hv-ink);background:var(--hv-cream)}
.hvl .hv-rep-crumbs a:hover{color:var(--hv-plum);border-bottom-color:var(--hv-plum2)}
.hvl .hv-rep-tabs a:focus-visible,.hvl .hv-rep-crumbs a:focus-visible{outline:2px solid var(--hv-plum2);outline-offset:2px}
/* телефон: активная вкладка первой, остальные уходят вправо и листаются свайпом */
@media(max-width:600px){.hvl .hv-rep-tabs{gap:6px;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:40px} .hvl .hv-rep-tabs::-webkit-scrollbar{display:none} .hvl .hv-rep-tabs a{flex:0 0 auto;scroll-snap-align:start;padding:9px 14px;font-size:14px} .hvl .hv-rep-tabs a.hv-rep-on{order:-1}}
/* Без подложки (правка Романа 11.09): класс .hv-rep красил обёртку в цвет
   листа, и «Оплата прошла» с подарком стояли на лишнем общем квадрате. У
   каждого блока свой фон и рамка, общая обёртка — только ширина. */
.hvl .hv-rep-above{width:210mm;max-width:100%;margin:0 auto 22px;padding:0;background:transparent}
.hvl .hv-rep-above .hv-rep-paidbanner{background:var(--hv-cream);margin-top:0}
.hvl .hv-rep-above .hv-rep-gift{background:var(--hv-cream);border-color:rgba(51,22,63,.12)}
@media(max-width:820px){.hvl .hv-rep-above{padding:16px 0 0}}
/* ── demo-8: посадка в статейный лист hv ── */
.hv-rep .hv-rep-wrap{max-width:none;padding:0 0 30px}
.hv-rep .hv-rep-toc ol{list-style:decimal;padding-left:1.4em;margin:0} .hv-rep .hv-rep-toc li{display:list-item;padding:0;margin:0}
.hv-rep .hv-rep-wall,.hv-rep .hv-rep-part,.hv-rep .hv-rep-toc-head,.hv-rep .hv-rep-minitab{margin-left:-20mm;margin-right:-20mm;padding-left:20mm;padding-right:20mm}
.hv-rep .hv-rep-wall .hv-rep-in{max-width:none}
.hv-rep .hv-rep-tools{margin:0 -20mm 18px;padding:0 20mm;background:transparent;border-bottom:1px solid var(--hv-line)}
.hv-rep h1,.hv-rep h2,.hv-rep h3{text-align:left}
.hv-rep .hv-rep-hero .hv-rep-pct,.hv-rep .hv-rep-verdict .hv-rep-pct{text-align:right}
.hv-rep .hv-rep-part .hv-rep-arc{text-align:right}
.hv-rep .hv-rep-rate h2{text-align:center}
@media (max-width:600px){ .hv-rep .hv-rep-verdict .hv-rep-pct,.hv-rep .hv-rep-part .hv-rep-arc{text-align:left} }
@media (max-width:760px){ .hv-rep .hv-rep-wall,.hv-rep .hv-rep-part,.hv-rep .hv-rep-toc-head,.hv-rep .hv-rep-minitab{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px} .hv-rep .hv-rep-tools{margin:0 -20px 16px;padding:0 20px} }

/* ═══════════════════════════════════════════════════════════════════
   .hv-rep-kd-* — КАРТА ДНЯ (/karta-dnya, /karta-dnya/ГГГГ-ММ, /ГГГГ)
   ───────────────────────────────────────────────────────────────────
   Редизайн 12.09.2026 по ТЗ plans/tz_karta_dnya_redesign_2026_09_12.md
   и плану plans/design_plan_karta_dnya_2026_09_12.md. Страница живёт
   в том же статейном листе и на тех же компонентах, что отчёт пары:
   всё, что можно было взять из .hv-rep-*, взято оттуда; здесь только
   то, чего в каноне не было.

   Ни одного hex: цвет только токеном. Ни одного своего font-size:
   шкала 5 + 2 из :root плюс единственный clamp на число аркана — тот
   же, что у аркана шмуцтитула (.hv-rep-part .hv-rep-arc b).
   Градиентов нет, теней нет, радиус один — 6px, как у канона.

   ⚠️ Иерархия здесь намеренно перевёрнута: H1 держит поисковую фразу
   и набран --hv-rep-fs-h, а ОТВЕТ (имя аркана) — --hv-rep-fs-d. На
   этой странице ответ важнее заголовка страницы: человек открывает
   её утром на тридцать секунд.
   ═══════════════════════════════════════════════════════════════════ */

/* первый экран: кикер, заголовок, плитка аркана */
.hv-rep-kd-h1{font-size:var(--hv-rep-fs-h);line-height:1.2;margin:2px 0 0}
.hv-rep-kd-plate{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;align-items:baseline;
  margin:22px 0 18px;padding-top:20px;border-top:1px solid var(--hv-line)}
.hv-rep-kd-n{font-family:var(--hv-serif);font-weight:700;font-size:clamp(40px,11vw,60px);line-height:.85;
  color:var(--hv-ink);grid-row:span 2}
/* Цвет числа = данные, а не украшение: личная карта считается из центра
   матрицы, а центр на октограмме золотой (DESIGN.md, решение 8). */
.hv-rep-kd-plate.hv-rep-on .hv-rep-kd-n{color:var(--hv-gold-deco)}
.hv-rep-kd-name{font-size:var(--hv-rep-fs-d);line-height:1.05;margin:0}
.hv-rep-kd-meta{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:0;align-self:start}
/* ── Карта дня: сама карта и коллекция (12.09 вечер) ──────────────────────
   Карта вернулась на страницу по слову Романа. Три правила, которые держат
   её вне слопа: она стоит РЯДОМ с ответом, а не вместо него; у неё нет тени
   и нет рамки-карточки (только hairline и радиус токеном); переворот один
   и только там, где результат правда неизвестен. */
.hv-rep-kd-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;
  align-items:start;margin:22px 0 18px;padding-top:20px;border-top:1px solid var(--hv-line)}
.hv-rep-kd-top .hv-rep-kd-plate{margin:0;padding:0;border-top:0;
  grid-template-columns:minmax(0,1fr);gap:4px}
.hv-rep-kd-top .hv-rep-kd-n{grid-row:auto}

.hv-rep-kd-card{margin:0;width:112px;flex:0 0 auto}
.hv-rep-kd-card-in{position:relative;width:100%;aspect-ratio:300/505;
  transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hv-rep-kd-card.hv-rep-kd-face-down .hv-rep-kd-card-in{transform:rotateY(180deg)}
.hv-rep-kd-card-face,.hv-rep-kd-card-back{position:absolute;inset:0;width:100%;height:100%;
  border-radius:6px;backface-visibility:hidden;border:1px solid var(--hv-line)}
.hv-rep-kd-card-face{object-fit:cover;display:block}
.hv-rep-kd-card-back{transform:rotateY(180deg);background:var(--hv-cream2);
  display:grid;place-items:center}
.hv-rep-kd-card-back svg{width:58%;height:58%;color:var(--hv-gold-deco)}

/* Коллекция — полоса (вариант 1 Романа, §6б.1). Без подписей: открытие
   видно цветом, а не текстом; закрытый аркан — октограмма, открытый —
   лицо карты. Подписи под 22 плитками съедали полтора экрана и ничего
   не сообщали: имя выдавало карту раньше, чем она открыта.
   На 390 две строки по 11 (полоса ≈ 100 px), на ≥ 601 одна строка по 22. */
.hv-rep-kd-coll{list-style:none;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));
  gap:5px 4px;margin:12px 0 8px;padding:0}
.hv-rep-kd-coll li{margin:0}
.hv-rep-kd-coll button{display:block;width:100%;background:none;border:0;padding:0;
  font:inherit;color:inherit;cursor:pointer}
.hv-rep-kd-coll-card{position:relative;display:block;aspect-ratio:300/505;
  border-radius:3px;overflow:hidden;border:1px solid var(--hv-line);background:var(--hv-cream2)}
.hv-rep-kd-coll-card img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .2s}
.hv-rep-kd-coll-back{position:absolute;inset:0;display:grid;place-items:center;color:var(--hv-gold-deco)}
.hv-rep-kd-coll-back svg{width:62%;height:62%}
.hv-rep-kd-coll .hv-rep-on .hv-rep-kd-coll-card img{opacity:1}
.hv-rep-kd-coll .hv-rep-on .hv-rep-kd-coll-back{display:none}
.hv-rep-kd-coll button:focus-visible .hv-rep-kd-coll-card{outline:2px solid var(--hv-plum2);outline-offset:2px}
/* Одна строка на всю полосу вместо 22 скрытых блоков. */
.hv-rep-kd-coll-line{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);
  border-left:2px solid var(--hv-line);padding-left:12px;margin:8px 0 0}
.hv-rep-kd-coll-line a{margin-left:8px}

@media (min-width:601px){
  .hv-rep-kd-top{gap:0 26px}
  /* §6б.6: на десктопе карта уже (140 px вместо 176), а число крупнее —
     иначе справа от карты стояли три короткие строки против 296 px картинки. */
  .hv-rep-kd-card{width:140px}
  .hv-rep-kd-top .hv-rep-kd-n{font-size:clamp(56px,7vw,72px)}
  .hv-rep-kd-coll{grid-template-columns:repeat(22,minmax(0,1fr));gap:0 5px}
}
@media (prefers-reduced-motion:reduce){ .hv-rep-kd-card-in{transition:none} }

.hv-rep-kd-lead{font-size:var(--hv-rep-fs-a);line-height:1.45;margin:0 0 18px}
/* На календаре месяца и года плитки аркана между заголовком и лидом нет,
   и без этой строки лид прилипал к H1 (поймано на кадрах 12.09). */
.hv-rep-kd-h1 + .hv-rep-kd-lead{margin-top:16px}
.hv-rep-kd-pers{font-size:var(--hv-rep-fs-b);border-left:2px solid var(--hv-gold-deco);padding-left:14px;margin:0 0 18px}
/* Плашка «Что делать» держит и галочку, и строку «как прошло» (§6б.2):
   одно дело — один орган управления, в одном месте. */
.hv-rep-do p{margin:0 0 6px}
.hv-rep-kd-done{display:inline-flex;align-items:center;gap:8px;margin:6px 0 0;cursor:pointer;
  font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);user-select:none}
.hv-rep-kd-done input{accent-color:var(--hv-plus);width:18px;height:18px;margin:0}
.hv-rep-kd-done input:checked ~ span{color:var(--hv-plus)}
.hv-rep-kd-which{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:12px 0 0}
.hv-rep-kd-which b{color:var(--hv-ink);font-weight:600}

/* поле даты рождения: раскрывается первичной кнопкой */
.hv-rep-kd-form{margin:16px 0 10px}
.hv-rep-kd-form .hv-rep-btn{margin-top:2px}
.hv-rep-kd-form .hv-rep-small{margin:8px 0 0}
.hv-rep-kd-form[hidden]{display:none}
.hv-rep-kd-form .hv-rep-pf-l{margin:0 0 12px}
.hv-rep-kd-known{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:12px 0 0}
.hv-rep-kd-linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--hv-plum2);cursor:pointer;
  border-bottom:1px solid var(--hv-line)}
.hv-rep-kd-linkbtn:hover{color:var(--hv-plum);border-bottom-color:var(--hv-plum2)}

/* день подробнее */
.hv-rep-kd-eve{margin:18px 0 0}
.hv-rep-kd-eve b{font-weight:600}
.hv-rep-kd-note{margin:12px 0 0}
.hv-rep-kd-note[hidden]{display:none}
.hv-rep-kd-yday{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:8px 0 0}
/* Строка для вернувшихся — под H1, до карты. */
.hv-rep-kd-back{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:8px 0 0}
/* Повод вернуться завтра — ссылка размером с текст, не служебная подпись. */
.hv-rep-kd-next{font-size:var(--hv-rep-fs-b);margin:0 0 4px}
.hv-rep-kd-note label{display:block;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:0 0 6px}
.hv-rep-kd-note input{width:100%;border:1px solid var(--hv-line);border-radius:6px;background:var(--hv-field);
  padding:12px;font:400 var(--hv-rep-fs-b)/1.4 var(--hv-rep-sans);color:var(--hv-ink)}
.hv-rep-kd-note input:focus{outline:2px solid var(--hv-plum2);outline-offset:1px;border-color:var(--hv-plum2)}
.hv-rep-kd-note p{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:6px 0 0}

/* ── лента недели: линия времени, а не семь карточек ──────────────── */
.hv-rep-kd-week{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:0;margin:14px 0 10px;padding:0;border-top:1px solid var(--hv-line)}
.hv-rep-kd-week li{margin:0;padding:0}
.hv-rep-kd-week a,.hv-rep-kd-week .hv-rep-off span{display:block;text-align:center;text-decoration:none;
  color:var(--hv-ink);padding:0 2px 10px;transition:color .15s}
/* засечка на оси времени */
.hv-rep-kd-week a::before,.hv-rep-kd-week .hv-rep-off span::before{content:"";display:block;width:2px;height:12px;
  margin:0 auto 8px;background:var(--hv-line);transition:background .15s}
.hv-rep-kd-wd{display:block;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);line-height:1.2}
.hv-rep-kd-dd{display:block;font-family:var(--hv-serif);font-weight:700;font-size:var(--hv-rep-fs-a);line-height:1.2}
.hv-rep-kd-wn{display:block;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);line-height:1.2}
/* состояния: 1 сегодня · 2 прошедший · 3 будущий (норма) · 4 заряженный · 5 выбранный · 8 без данных */
.hv-rep-kd-week .hv-rep-now a{background:var(--hv-cream2)}
.hv-rep-kd-week .hv-rep-now a::before{background:var(--hv-plum2)}
.hv-rep-kd-week .hv-rep-now .hv-rep-kd-dd{color:var(--hv-plum2)}
.hv-rep-kd-week .hv-rep-far a{color:var(--hv-ink2)}
.hv-rep-kd-week .hv-rep-far .hv-rep-kd-dd{color:var(--hv-ink2)}
.hv-rep-kd-week .hv-rep-hit .hv-rep-kd-wn{color:var(--hv-gold-deco);font-weight:600}
.hv-rep-kd-week .hv-rep-hit a::before{background:var(--hv-gold-deco)}
.hv-rep-kd-week .hv-rep-on a{box-shadow:inset 0 -2px 0 var(--hv-plum2)}
.hv-rep-kd-week .hv-rep-off span{color:var(--hv-ink2)}
.hv-rep-kd-week a:hover{color:var(--hv-plum)}
.hv-rep-kd-week a:hover::before{background:var(--hv-plum2)}
.hv-rep-kd-week a:focus-visible{outline:2px solid var(--hv-plum2);outline-offset:-2px}
.hv-rep-kd-wcap{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin:0}
.hv-rep-kd-facts{margin:14px 0 0}

/* возврат: бот и ярлык */
.hv-rep-kd-btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:14px 0 8px}
.hv-rep-kd-btns .hv-rep-btn{width:auto;padding:13px 20px}

/* Оценка — компонент канона .hv-rep-rate целиком, своих правил не заводим.
   Две поправки к нему: кружки здесь <button> (записи в базу нет, только цель
   в Метрику), поэтому им нужен курсор и фокус, а скрыть ряд после ответа
   мешал собственный display:flex — он сильнее атрибута hidden. */
.hv-rep-rate .hv-rep-rate-btns[hidden]{display:none}
.hv-rep-rate button.hv-rep-rb{cursor:pointer;font-family:inherit}
.hv-rep-rate .hv-rep-rb:focus-visible{outline:2px solid var(--hv-plum2);outline-offset:2px}

/* автор одной строкой и соседние дни */
.hv-rep-kd-author{display:flex;gap:12px;align-items:center;margin:var(--hv-rep-gap) 0 0;padding-top:18px;
  border-top:1px solid var(--hv-line);font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hv-rep-kd-author img{width:44px;height:44px;border-radius:50%;display:block;flex:0 0 auto;object-fit:cover}
/* ⚠️ У этой картинки НЕТ decoding="async": при полностраничном кадре Grover
   успевает снять экран раньше, чем браузер декодирует картинку ниже первого
   экрана, и в «после»-кадре оставалось пустое место вместо фото (12.09). */
.hv-rep-kd-nav{font-size:var(--hv-rep-fs-s);margin:14px 0 0;display:flex;gap:8px 18px;flex-wrap:wrap}

/* ── календарь месяца и список года ───────────────────────────────── */
.hv-rep-kd-calh,.hv-rep-kd-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0}
.hv-rep-kd-calh{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);text-align:center;padding:0 0 6px}
.hv-rep-kd-cal{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid var(--hv-line);
  border-left:1px solid var(--hv-line)}
.hv-rep-kd-cal li{margin:0;border-right:1px solid var(--hv-line);border-bottom:1px solid var(--hv-line)}
.hv-rep-kd-cal li:first-child{grid-column-start:var(--hv-rep-kd-first,1)}
.hv-rep-kd-cal a{display:block;text-decoration:none;color:var(--hv-ink);text-align:center;padding:8px 2px}
.hv-rep-kd-cal a:hover{background:var(--hv-cream2);color:var(--hv-plum)}
.hv-rep-kd-cal a:focus-visible{outline:2px solid var(--hv-plum2);outline-offset:-2px}
.hv-rep-kd-cal .hv-rep-now a{background:var(--hv-cream2)}
.hv-rep-kd-cal .hv-rep-now .hv-rep-kd-dd{color:var(--hv-plum2)}
.hv-rep-kd-cal .hv-rep-hit .hv-rep-kd-wn{color:var(--hv-gold-deco);font-weight:600}
.hv-rep-kd-months{list-style:none;margin:0 0 14px;padding:0}
.hv-rep-kd-months li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--hv-line)}
.hv-rep-kd-months li:last-child{border-bottom:1px solid var(--hv-line)}
.hv-rep-kd-months .hv-rep-num{font-size:var(--hv-rep-fs-a);min-width:1.6em;text-align:right}
.hv-rep-kd-months a{text-decoration:none;font-weight:600}
.hv-rep-kd-months span{color:var(--hv-ink2);font-size:var(--hv-rep-fs-s)}
.hv-rep-kd-months .hv-rep-on a{border-bottom:2px solid var(--hv-plum2)}

@media (max-width:600px){
  /* Лента остаётся внутри колонки: семь ячеек по 1fr, ни одного пикселя
     за краем (в старой версии «сб 12» уезжало за экран). */
  .hv-rep-kd-plate{gap:6px 14px}
  .hv-rep-kd-week a{padding:0 0 8px}
  .hv-rep-kd-cal a{padding:6px 0}
  .hv-rep-kd-btns .hv-rep-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .hv-rep-kd-week a,.hv-rep-kd-week a::before,.hv-rep-rate .hv-rep-rb{transition:none}
}
/* Единственное движение на странице: смена карты при «вытянуть наугад»
   и при личном расчёте — 300 мс на затухание и возврат, без 3D и без
   переворота (ТЗ §4). Анимаций при скролле нет ни одной. */
.hv-rep-kd-plate,.hv-rep-kd-lead{transition:opacity .15s}
.hv-rep-kd-plate.hv-rep-kd-out,.hv-rep-kd-lead.hv-rep-kd-out{opacity:0}
@media (prefers-reduced-motion:reduce){.hv-rep-kd-plate,.hv-rep-kd-lead{transition:none}}

/* Точка «карта за сегодня не открыта» в пункте шапки «Карта дня».
   Живёт здесь, а не в karta_dnya.css: шапка есть на каждой странице,
   а тот файл с 12.09 подключает только главная. */
.hvh-nav-kd{position:relative}
.kd-nav-dot{position:absolute;top:2px;right:-9px;width:6px;height:6px;border-radius:50%;
  background:var(--hv-goldb);box-shadow:0 0 0 2px rgba(217,180,90,.25)}
.kd-nav-dot[hidden]{display:none}

/* Список веера «Аркан N в совместимости» (13.09): посадочная совместимости и хаб
   арканов. Одна строка на аркан; цифра — цветом центра октограммы. */
.hv-fanlist{list-style:none;margin:18px 0 6px;padding:0;display:grid;grid-template-columns:1fr;column-gap:28px}
@media(min-width:601px){.hv-fanlist{grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(11,auto)}}
.hv-fanlist li{display:grid;grid-template-columns:30px 1fr;column-gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--hv-line)}
.hv-fanlist-n{font-family:var(--hv-serif);font-weight:700;font-size:18px;line-height:1;color:var(--hv-gold-deco);text-align:right}
.hv-fanlist a{color:var(--hv-ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--hv-lineg);line-height:1.35}
.hv-fanlist a:hover{color:var(--hv-plum);border-bottom-color:currentColor}
.hv-fanlist small{grid-column:2;font-size:14px;color:var(--hv-ink2);line-height:1.35;margin-top:2px}
.hv-fanlist-no .hv-fanlist-n{color:var(--hv-ink2)}
@media(max-width:600px){.hv-fanlist{margin-top:12px}.hv-fanlist li{grid-template-columns:24px 1fr;column-gap:6px;padding:5px 0}.hv-fanlist-n{font-size:15px}.hv-fanlist a{font-size:15px;line-height:1.3;letter-spacing:-.01em}.hv-fanlist small{font-size:13px;margin-top:1px}}
.hv-pair-fan{max-width:660px;margin:10px auto 0;font-size:.92rem;color:var(--hv-ink2);line-height:1.55}
.hv-pair-fan a{color:var(--hv-plum2);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(130,102,179,.3)}
