/* ═══════════════════════════════════════════════════════════════
   Yolt × Bimp · v5 · шар над v4.css
   КОНТРАКТ (§21):
   1. v5 продає СПІЛЬНИЙ результат: Bimp тримає облік, Yolt кладе
      зверху готовий аналітичний шар (16 модулів, 130+ звітів).
   2. Нових екранів немає. Додано два блоки: таблиця «повна картина
      по виробу» в геро й карта модулів усередині секції «що дає».
   3. Карта модулів — НЕ картки: три компактні групи, рядок на модуль.
      Група 1 (працює одразу) на --sage-bg, групи 2–3 на --paper-2.
   4. Нуль hex, нуль rgba. Токени — tokens.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── МАРКЕР НЕЗАФІКСОВАНОЇ ЦИФРИ ─────────────────────────────── */
.todo{display:inline-flex;align-items:center;padding:1px 8px;border:1px dashed var(--warn-line,var(--line-strong));border-radius:var(--r-sm);background:var(--warn-bg);color:var(--ink-1);font-family:var(--font-mono);font-size:.82em;letter-spacing:.06em;text-transform:uppercase}

/* ── КАРТА МОДУЛІВ ───────────────────────────────────────────── */
.mods-h{max-width:62ch;margin:clamp(40px,5vw,64px) 0 var(--space-lg);display:grid;gap:var(--space-sm)}
.mods-h h3{font-size:clamp(20px,2.1vw,26px);letter-spacing:-.022em;line-height:1.2}
.mx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.mx-c{position:relative;display:grid;grid-template-rows:auto auto auto 1fr;gap:6px;padding:var(--space-lg);border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--paper)}
.mx-c.is-live{background:var(--sage-0);border-color:var(--sage-0);color:var(--on-sage);box-shadow:var(--sh-mid)}
.mx-h{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-sm)}
.mx-dot{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px dashed var(--line-strong,var(--ink-3));color:var(--ink-2);font-family:var(--font-num);font-size:16px;font-weight:600;line-height:1}
.mx-dot svg{width:15px;height:15px}
.is-live .mx-dot{border:0;background:var(--on-sage);color:var(--sage-0)}
.mx-k{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--ink-2)}
.is-live .mx-k{color:var(--on-sage)}
.mx-t{font-size:clamp(20px,1.9vw,24px);letter-spacing:-.022em;line-height:1.15;font-weight:700;color:var(--ink-0)}
.is-live .mx-t{color:var(--on-sage)}
.mx-c:not(.is-live) .mx-t::before{content:"+ ";color:var(--sage-0)}
.mx-l{font-size:var(--t-sm);color:var(--ink-2);margin-bottom:var(--space-md)}
.is-live .mx-l{color:color-mix(in oklch,var(--on-sage) 86%,var(--sage-0))}
.mx-list{display:grid;gap:8px;align-content:start}
.mx-list li{display:grid;gap:2px;padding:12px 14px;border-radius:var(--r-md);background:var(--paper-2);border:1px solid var(--line-soft);transition:transform var(--e-base),border-color var(--e-quick)}
.mx-list li:hover{transform:translateX(3px);border-color:var(--sage-line)}
.is-live .mx-list li{background:color-mix(in oklch,var(--on-sage) 10%,var(--sage-0));border-color:color-mix(in oklch,var(--on-sage) 20%,var(--sage-0))}
.is-live .mx-list li:hover{border-color:var(--on-sage)}
.mx-list b{font-size:var(--t-sm);font-weight:650;letter-spacing:-.012em;color:var(--ink-0)}
.mx-list span{font-size:var(--t-xs);line-height:1.4;color:var(--ink-2)}
.is-live .mx-list b{color:var(--on-sage)}
.is-live .mx-list span{color:color-mix(in oklch,var(--on-sage) 94%,var(--sage-0))}
.mx-base{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-xl);padding:var(--space-md) var(--space-lg);border:1px solid var(--sage-line);border-radius:var(--r-lg);background:var(--sage-bg)}
.mx-bk{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--sage-0);margin-right:auto}
.mx-base>span:not(.mx-bk){font-size:var(--t-sm);color:var(--ink-1)}
.mx-base b{color:var(--ink-0);font-weight:650}
.pr-extra .v .from{font-family:var(--font-ui);font-size:.5em;font-weight:500;color:var(--ink-2);letter-spacing:0;margin-right:2px}
@media (max-width:1040px){.mx{grid-template-columns:minmax(0,1fr)}.mx-c{grid-template-rows:auto}.mx-list{grid-template-columns:repeat(2,minmax(0,1fr))}.mx-bk{margin-right:0;width:100%}}
@media (max-width:560px){.mx-list{grid-template-columns:minmax(0,1fr)}.mx-c{padding:var(--space-md)}}
@media (prefers-reduced-motion:reduce){.mx-list li{transition:none}.mx-list li:hover{transform:none}}
.mods-note{margin-top:var(--space-md);font-size:var(--t-sm);color:var(--ink-2);max-width:74ch}

/* ── ПІДКЛЮЧЕННЯ · чотири кроки ──────────────────────────────── */
.steps-term{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-sm);margin-top:var(--space-xl);padding-top:var(--space-md);border-top:1px solid var(--line)}
.steps-term p{font-size:var(--t-sm);color:var(--ink-2)}
.tech-note{margin-top:var(--space-lg);display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-md)}
.tech-note span{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.07em;color:var(--ink-3)}

/* ── ЦІНИ · рядок під плитками ───────────────────────────────── */
.pr-note{margin-top:var(--space-md);font-size:var(--t-sm);color:var(--ink-2)}
.pr-extra .v.txt{font-family:var(--font-ui);font-size:var(--t-lg);letter-spacing:-.015em}

@media (max-width:760px){
}

/* ── v7 · СМУГА МАРЖІ В ГЕРО ─────────────────────────────────── */
.mbar{display:flex;height:14px;border-radius:999px;overflow:hidden;gap:2px;background:var(--paper-2)}
.mbar>span{flex:0 0 calc(var(--w)*1% - 2px);min-width:4px}
.mb-keep{background:var(--sage-0)}
.mb-1{background:color-mix(in oklch,var(--bad) 78%,var(--paper))}
.mb-2{background:color-mix(in oklch,var(--bad) 52%,var(--paper))}
.mb-3{background:color-mix(in oklch,var(--bad) 36%,var(--paper))}
.mb-4{background:color-mix(in oklch,var(--bad) 22%,var(--paper))}
.mb-legend{border-top:0!important;padding-top:0!important}
.mb-legend li>span:first-child{display:flex;align-items:center;gap:8px}
.mb-legend i{flex:0 0 auto;width:10px;height:10px;border-radius:3px}
.mbar.is-grow .mb-l{animation:mbIn 900ms var(--ease)}
@keyframes mbIn{from{transform:scaleX(.02);transform-origin:left}to{transform:none}}

/* ── v7 · ТЕЛЕГРАМ ───────────────────────────────────────────── */
.tg-h .sub{display:block}
.tg-time{margin-left:auto;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--t-xs);color:var(--ink-2)}
.tg-kb{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 var(--space-md) var(--space-md)}
.tg-kb span{display:grid;place-items:center;min-height:36px;border-radius:var(--r-sm);background:var(--sage-bg);color:var(--sage-0);font-size:var(--t-xs);font-weight:600}

/* ── v7 · МОБІЛЬНА CTA-СМУГА ─────────────────────────────────── */
.mcta{display:none}
@media (max-width:760px){
  .mcta{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:10px 10px 10px 16px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line-soft);box-shadow:var(--sh-mid);transform:translateY(140%);visibility:hidden;transition:transform var(--e-base),visibility 0s linear 300ms}
  .mcta.is-on{transform:none;visibility:visible;transition:transform var(--e-base),visibility 0s}
  .mcta-t{display:grid;gap:1px;min-width:0;flex:1 1 auto}
  .mcta-t b{font-size:var(--t-sm);color:var(--ink-0);font-weight:700}
  .mcta-t span{font-size:var(--t-xs);color:var(--ink-2)}
  .mcta .btn{min-height:44px;flex:0 0 auto;width:auto}
}
@media (prefers-reduced-motion:reduce){.mbar.is-grow .mb-l{animation:none}.mcta,.mcta.is-on{transition:none}}