/* Посадочная денежной матрицы v2 — numerology/matrix_calculations/finmatrix_landing_v2.html.erb (23.10.2026),
   флаг FINMATRICA_V2, превью ?v2=1. Холст: knowledge/design/_work/demo/finmatrica.html (+ css/finmatrica.css).
   Каркас — компоненты матрицы v3 из hv.css (.hm/.ml3: hero, полоса, этажи, плашки, разделы, гайды, вопросы, финал);
   здесь только куски этой страницы. Цвета — токены hv, hex 0.

   ⚠ Файл подключается через content_for(:head), а yield :head в layout стоит ДО общих стилей: при равной
   специфичности побеждает hv.css. Поэтому правила начинаются с корня .hm.fm (на класс сильнее правил hv). */

/* Гамма — зелёный с золотом (Роман 21.10): зелёный — --hv-plus («плюс» отчётов), золото — --hv-gold*.
   --fm2-oct-* — цвета чисел октограммы (данные, не декор): те же роли, что в отчёте финматрицы
   (finmatrix_show.html.erb, .fm2), собраны из токенов hv. */
.fm{--fm-g:var(--hv-plus);--fm-gd:color-mix(in srgb,var(--hv-plus) 78%,var(--hv-ink));
  --fm2-oct-orange:color-mix(in srgb,var(--hv-oct-red) 45%,var(--hv-gold-deco));--fm2-oct-blue:var(--hv-blue);
  --fm2-oct-blue-deep:color-mix(in srgb,var(--hv-blue) 65%,var(--hv-ink));--fm2-oct-green:var(--hv-plus)}

/* hero: зелёная полоса с бумажным бликом */
.hm.fm .fmh{background:radial-gradient(55% 70% at 12% 0%,color-mix(in srgb,var(--hv-paper) 70%,transparent),transparent 70%),
  color-mix(in srgb,var(--hv-plus) 24%,var(--hv-paper))}
.hm.fm .fmh h1{color:var(--fm-gd);text-wrap:balance}
.hm.fm .fmh .ml3-lead b{font-weight:600;color:var(--hv-ink)}
.hm.fm .fmh .ml3-obj img{mix-blend-mode:multiply}
.hm.fm .fmh .hm-inp:focus{outline:0;border-color:var(--fm-g);box-shadow:0 0 0 3px color-mix(in srgb,var(--hv-plus) 18%,transparent)}
.hm.fm .hm-sex i{border-color:var(--fm-g)}
.hm.fm .hm-sex input:checked+i{background:var(--fm-g)}
.hm.fm .hm-sex input:focus-visible+i{outline-color:var(--fm-g)}
.hm.fm .hm-btn{background:var(--fm-g);color:var(--hv-paper)}
.hm.fm .hm-btn:hover{background:var(--fm-gd);color:var(--hv-paper)}
.hm.fm .hm-btn.ml3-ghost{background:transparent;color:var(--fm-gd);border:1px solid var(--fm-g)}
.hm.fm .hm-kick{color:var(--hv-gold)}
.hm.fm a{color:var(--fm-gd)}

/* рамка отчёта: отчёт встаёт под hero; пока он открыт, этажи ниже рамки не показываются (логика прода) */
.hm.fm #fm-inline-host:not(:empty){margin:var(--hm-gb) auto 20px}
body.fm-inline-active #fm-inline-host~*{display:none!important}
body.fm-modal-open{overflow:hidden}
body.fm-modal-open #fm-inline-frame{position:fixed;inset:0;width:100%!important;height:100%!important;z-index:10001}

/* что узнаешь: плашки с золотой кромкой и мини-схемой */
.hm.fm .fm-see .ml3-sell div{border-top:3px solid var(--hv-gold-deco)}
.hm.fm .fm-see .ml3-sell b{color:var(--fm-gd)}
.hm.fm .fm-see .fm-mini{display:block;margin-bottom:10px}

/* образец: снимок отчёта и шесть частей с картинами частей платного отчёта */
.hm.fm .fm-sample{margin:var(--hm-gi) 0}
.hm.fm .fm-sample img{display:block;width:100%;height:auto;border-radius:6px}
.hm.fm .fm-parts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:var(--hm-gb) 0 0;padding:0}
.hm.fm .fm-parts li{background:var(--hv-paper);border:1px solid var(--hv-line);border-radius:6px;overflow:clip;margin:0}
.hm.fm .fm-parts img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 70%}
.hm.fm .fm-parts span{display:block;padding:10px 12px 12px;font-size:var(--hv-rep-fs-s);line-height:1.4;color:var(--hv-ink)}
.hm.fm .fm-parts b{display:block;font:700 20px/1 var(--hv-serif);color:var(--hv-gold);margin-bottom:4px}

/* денежный канал: три точки карточками + октограмма движка */
.hm.fm .fm-three{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:var(--hm-gb) 0 0;padding:0}
.hm.fm .fm-three li{margin:0;background:var(--hv-paper);border:1px solid var(--hv-line);border-top:3px solid var(--hv-gold-deco);border-radius:6px;padding:14px 16px 16px;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hm.fm .fm-three b{color:var(--hv-ink);font-weight:600}
.hm.fm .fm-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-bottom:10px;font:700 20px/1 var(--hv-serif);color:var(--hv-ink);border:1px solid var(--hv-line);background:var(--hv-paper)}
.hm.fm .fm-n.o{background:var(--fm2-oct-orange);border-color:var(--fm2-oct-orange);color:var(--hv-paper)}
.hm.fm .fm-n.g{background:var(--hv-golds);border-color:var(--hv-gold-deco);color:var(--hv-gold)}
.hm.fm .fm-octw{margin:var(--hm-gb) auto var(--hm-gi);max-width:560px;text-align:center}
.hm.fm .fm-octw svg{display:block;width:100%;height:auto}
.hm.fm .fm-octw svg text[font-family^="Golos"]{font-family:var(--hv-rep-sans)}
.hm.fm .fm-octw figcaption{font-size:var(--hv-rep-fs-s);color:var(--hv-ink2);margin-top:6px}

/* перебивка: фото «белой комнаты» от края до края листа, как шмуцтитул части в отчёте */
.hm.fm .fm-break{margin:0 calc(-1 * var(--hm-pad)) var(--hm-gb)}
.hm.fm .fm-break img{display:block;width:100%;height:auto;aspect-ratio:16/6;object-fit:cover;object-position:center 62%}
.hm.fm .fm-break figcaption{padding:12px var(--hm-pad) 0;font-size:var(--hv-rep-fs-s);font-weight:600;color:var(--hv-gold)}

/* что блокирует: стражник + установки рода = утечка (строки прода, подписи — черновик) */
.hm.fm .fm-blok{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:stretch;margin:var(--hm-gb) 0 var(--hm-gi)}
.hm.fm .fm-blok>div{position:relative;background:var(--hv-paper);border:1px solid var(--hv-line);border-radius:6px;padding:16px 18px}
.hm.fm .fm-blok b{display:block;font:700 var(--hv-rep-fs-b)/1.3 var(--hv-serif);color:var(--hv-ink);margin:0 0 8px}
.hm.fm .fm-blok-a .fm-n{position:absolute;right:14px;top:12px;margin:0}
.hm.fm .fm-blok-a b{padding-right:44px}
.hm.fm .fm-blok ul{list-style:none;margin:0;padding:0}
.hm.fm .fm-blok li{margin:0;padding:6px 0;border-top:1px solid var(--hv-line);font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hm.fm .fm-blok q{display:block;padding:8px 12px;margin-top:8px;background:var(--hv-cream2);border-left:3px solid var(--hv-gold-deco);font:500 var(--hv-rep-fs-s)/1.4 var(--hv-serif);color:var(--hv-ink);quotes:"«" "»"}
.hm.fm .fm-blok-op{align-self:center;font:400 32px/1 var(--hv-serif);color:var(--hv-ink3)}
.hm.fm .fm-blok-r{grid-column:1/-1;margin:0;padding:10px 16px;border-radius:6px;background:color-mix(in srgb,var(--hv-oct-red) 9%,var(--hv-paper));color:var(--hv-oct-red);font-weight:600;text-align:center;font-size:var(--hv-rep-fs-s)}
.hm.fm .fm-blok-r::before{content:'= ';font-family:var(--hv-serif)}

/* код миллионера: карта Солнца + текст на плашке; полная версия — три точки формулой */
.hm.fm .fm-kod{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--hm-gi);align-items:start}
.hm.fm .fm-kod-card img{display:block;width:120px;height:auto;border-radius:6px}

/* профессия: где платят / где выгораешь */
.hm.fm .fm-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:var(--hm-gi)}
.hm.fm .fm-cols>div{border-radius:6px;padding:16px 18px}
.hm.fm .fm-cols .plus{background:var(--hv-plus-soft);border-top:3px solid var(--hv-plus)}
.hm.fm .fm-cols .minus{background:var(--hv-minus-soft);border-top:3px solid var(--hv-minus)}
.hm.fm .fm-cols h3{font:600 var(--hv-rep-fs-b)/1.3 var(--hv-rep-sans);margin:0 0 8px}
.hm.fm .fm-cols .plus h3{color:var(--hv-plus)}
.hm.fm .fm-cols .minus h3{color:var(--hv-minus)}
.hm.fm .fm-cols ul{list-style:none;margin:0;padding-left:18px;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hm.fm .fm-cols li{margin:0 0 6px}

/* как рассчитать: числа образца — формула матрицы v3 (.ml3-formula/.ml3-fn), канал — золотой плашкой; шаги — карточками */
.hm.fm .ml3-fn.fm-k{border:2px solid var(--hv-gold-deco);background:var(--hv-golds);color:var(--hv-gold);font-size:24px}
.hm.fm .fm-ol{grid-template-columns:1fr;gap:12px}
.hm.fm .fm-ol li{background:var(--hv-paper);border:1px solid var(--hv-line);border-radius:6px;padding:16px 20px 18px 60px;margin:0;font-size:var(--hv-rep-fs-s);color:var(--hv-ink2)}
.hm.fm .fm-ol li::before{left:20px;top:14px;width:auto;height:auto;background:none;border-radius:0;font:700 28px/1 var(--hv-serif);color:var(--hv-gold)}
.hm.fm .fm-ol li b{display:block;margin-bottom:4px;color:var(--hv-plum2)}
/* в формуле образца выделен только канал (холст): центр — без золотой заливки */
.hm.fm .fm-formula .ml3-fn.g{background:var(--hv-paper);border-color:var(--hv-line)}

/* чем отличается: пять пунктов с мини-схемами */
.hm.fm .fm-five{list-style:none;margin:var(--hm-gi) 0 0;padding:0}
.hm.fm .fm-five li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;margin:0;padding:10px 0;border-bottom:1px solid var(--hv-line);color:var(--hv-ink2)}
.hm.fm .fm-five b{color:var(--hv-ink);font-weight:600}
.hm.fm .fm-five .fm-mini{margin-top:2px}

/* финал с формой — в гамме страницы */
.hm.fm .fm-final{background:color-mix(in srgb,var(--hv-plus) 18%,var(--hv-paper))}

@media(max-width:820px){
  .hm.fm .fm-three{grid-template-columns:1fr}
  .hm.fm .fm-three li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start}
  .hm.fm .fm-three .fm-n{margin:0}
  .hm.fm .fm-parts{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .hm.fm .fm-octw{margin-left:-12px;margin-right:-12px}
  .hm.fm .fm-five li{grid-template-columns:40px minmax(0,1fr);gap:12px}
  .hm.fm .fm-five .fm-mini{width:40px;height:40px}
  .hm.fm .fm-break{margin-left:calc(-1 * var(--hm-pad));margin-right:calc(-1 * var(--hm-pad))}
  .hm.fm .fm-break img{aspect-ratio:16/9}
  .hm.fm .fm-cols{grid-template-columns:1fr}
  .hm.fm .fm-kod{grid-template-columns:72px minmax(0,1fr)}
  .hm.fm .fm-kod-card img{width:72px}
  .hm.fm .ml3-fn.fm-k{flex-basis:100%;font-size:22px}
  .hm.fm .fm-ol li{padding:14px 16px 16px 52px}
  .hm.fm .fm-ol li::before{left:16px;top:14px}
  .hm.fm .fm-blok{grid-template-columns:1fr}
  .hm.fm .fm-blok-op{justify-self:center}
}

/* Три точки канала под схемой (Роман 23.10): карточки с картой аркана, как точки на совместимости v4 */
.hm.fm .fm-three-c li{display:flex;flex-direction:column;padding:0 0 16px;border-top-width:1px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.hm.fm .fm-three-c li.on,.hm.fm .fm-three-c li:hover{border-color:var(--hv-gold-deco);box-shadow:0 8px 20px color-mix(in srgb,var(--hv-ink) 8%,transparent)}
.hm.fm .fm-three-pic{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:152px;padding:16px 12px 12px;margin-bottom:14px;background:var(--hv-cream2)}
.hm.fm .fm-three-pic img{display:block;width:70px;height:auto;border-radius:3px;box-shadow:0 4px 10px color-mix(in srgb,var(--hv-ink) 16%,transparent)}
.hm.fm .fm-three-pic .fm-n{position:absolute;left:14px;top:12px;margin:0;width:38px;height:38px;font-size:17px}
.hm.fm .fm-three-t{margin:0 16px 2px;font:600 var(--hv-rep-fs-b)/1.3 var(--hv-rep-sans);color:var(--hv-plum2)}
.hm.fm .fm-three-a{margin:0 16px 8px;font:700 18px/1.25 var(--hv-serif);color:var(--hv-ink)}
.hm.fm .fm-three-a.o{color:var(--fm2-oct-orange)}
.hm.fm .fm-three-a.g{color:var(--hv-gold)}
.hm.fm .fm-three-d{margin:0 16px;font-size:var(--hv-rep-fs-s);line-height:1.5;color:var(--hv-ink2)}
.hm.fm .fm2-octi .ml3-pt.on circle{stroke:var(--hv-gold-deco);stroke-width:4}
/* телефон и планшет: карта слева, название и текст справа */
@media(max-width:820px){
  .hm.fm .fm-three-c li{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:0 14px;align-items:start;padding:0 14px 0 0}
  .hm.fm .fm-three-c .fm-three-pic{grid-row:1/4;align-self:stretch;align-items:center;min-height:0;margin:0;padding:14px 10px}
  .hm.fm .fm-three-c .fm-three-pic img{width:62px}
  .hm.fm .fm-three-c .fm-three-pic .fm-n{left:8px;top:8px;width:30px;height:30px;font-size:14px}
  .hm.fm .fm-three-c .fm-three-t{margin:14px 0 2px}
  .hm.fm .fm-three-c .fm-three-a{margin:0 0 6px}
  .hm.fm .fm-three-c .fm-three-d{margin:0 0 14px}
}