/* Masalah → Penyelesaian → Impak (deploy (aa), 9 Nov 2026) — tools/impak.py, data = docs/impak/impak-26.json.
   Rupa kad jualan KAD-JUALAN-KAJIAN-KES (Dulu | Punca sebenar | Penyelesaian | Impak, aliran hujung ke hujung, senario, siapa lagi) dalam token K8.
   Warna lajur = makna, SENTIASA bersama label teks (arahan 20 Okt: UI terang sendiri). Dimuat HANYA di 22 page public_ok.
   Kontras (dikira): teks --ink atas --mi-punca-bg 17.0:1, label --mi-punca atas --mi-punca-bg 8.0:1, putih atas --navy 10.4:1,
   --mi-solusi-l atas --navy 6.5:1, label --mi-impak atas --mi-impak-bg 7.3:1, --ais-redup atas --malam-2 7.6:1. */
.mi-bab {
  --mi-punca: #8E1F2A; --mi-punca-bg: #FBEEEF; --mi-punca-garis: #E9C3C7;
  --mi-solusi-l: #C9D5F2;
  --mi-impak: #17583A; --mi-impak-bg: #EAF4EE; --mi-impak-garis: #BFDCCB;
  --mi-lajur: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
}
.mi-tajuk { max-width: 22em; text-wrap: balance; }
.mi-h3 { font: 500 var(--label-fs)/1.4 var(--mono); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--label-terang); }

/* ---------- 1. aliran hujung ke hujung ---------- */
.mi-aliran { margin-top: clamp(32px, 4vw, 48px); }
.mi-aliran-kepala { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.mi-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--kelabu); }
.mi-lg { display: inline-flex; align-items: center; gap: 8px; }
.mi-lg::before { content: ""; width: 12px; height: 12px; border-radius: 50%; }
.mi-lg-ms::before { background: var(--navy); }
.mi-lg-s::before { background: #E4EAF7; box-shadow: inset 0 0 0 1.5px var(--navy); }
.mi-lg-m::before { border: 1.5px dashed var(--mi-punca); }
.mi-nodes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; }
.mi-nod { position: relative; display: grid; align-content: start; gap: 6px; padding: 14px 12px 14px; border-radius: 14px; background: var(--kertas); border: 1px solid var(--garis); }
.bab:not(.bab-kabus) .mi-nod { background: var(--kabus); border-color: transparent; }
.mi-nod-ikon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #FFFFFF; }
.mi-nod.mi-s .mi-nod-ikon { background: #E4EAF7; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.mi-nod.mi-m .mi-nod-ikon { background: transparent; color: var(--mi-punca); border: 1.5px dashed var(--mi-punca); }
.mi-nod-no { font: 500 var(--label-fs)/1 var(--mono); letter-spacing: .08em; color: var(--label-terang); }
.mi-nod-teks { font-size: 15px; font-weight: 560; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.mi-nod-ket { font: 500 var(--label-fs)/1.35 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.mi-nod.mi-m .mi-nod-ket { color: var(--mi-punca); }
@media (min-width: 961px) {
  .mi-nod:not(:last-child)::after { content: ""; position: absolute; top: 31px; right: -9px; z-index: 1; width: 8px; height: 8px; border-top: 1.5px solid var(--kelabu); border-right: 1.5px solid var(--kelabu); transform: rotate(45deg); }
}

/* ---------- 2. empat lajur ---------- */
.mi-kad { display: grid; grid-template-columns: var(--mi-lajur) minmax(0, 1.3fr); gap: 12px; margin-top: clamp(28px, 3.6vw, 44px); align-items: stretch; }
.mi-kepala { grid-column: 1 / -1; display: grid; grid-template-columns: var(--mi-lajur) minmax(0, 1.3fr); gap: 12px; }
.mi-kepala span { font: 500 var(--label-fs)/1.4 var(--mono); letter-spacing: var(--label-ls); text-transform: uppercase; padding: 0 2px 8px; border-bottom: 2px solid currentColor; }
.mi-k-dulu { color: var(--kelabu); } .mi-k-punca { color: var(--mi-punca); } .mi-k-solusi { color: var(--navy); } .mi-k-impak { color: var(--mi-impak); }
.mi-barisan { grid-column: 1 / 4; display: grid; gap: 12px; align-content: start; }
.mi-baris { display: grid; grid-template-columns: var(--mi-lajur); gap: 12px; }
.mi-sel { padding: 16px 16px 18px; border-radius: 14px; }
.mi-sel-label { font: 500 var(--label-fs)/1.4 var(--mono); letter-spacing: var(--label-ls); text-transform: uppercase; }
.mi-sel-teks { font-size: 16px; line-height: 1.5; letter-spacing: -0.005em; }
.mi-dulu { background: var(--kertas); border: 1px solid var(--garis); color: var(--ink); }
.bab:not(.bab-kabus) .mi-dulu { background: var(--kabus); border-color: transparent; }
.mi-dulu .mi-sel-label { color: var(--kelabu); }
.mi-punca { background: var(--mi-punca-bg); border: 1px solid var(--mi-punca-garis); color: var(--ink); }
.mi-punca .mi-sel-label { color: var(--mi-punca); }
.mi-solusi { background: var(--navy); color: #FFFFFF; }
.mi-solusi .mi-sel-label { color: var(--mi-solusi-l); }
.mi-solusi .mi-sel-teks { font-weight: 520; }
.mi-impak { grid-column: 4; grid-row: 2; display: grid; align-content: start; gap: 4px; padding: 16px 16px 18px; border-radius: 14px; background: var(--mi-impak-bg); border: 1px solid var(--mi-impak-garis); color: var(--ink); }
.mi-impak .mi-sel-label { color: var(--mi-impak); }
.mi-ip-senarai { display: grid; gap: 0; }
.mi-ip { padding: 10px 0 11px; border-bottom: 1px solid var(--mi-impak-garis); }
.mi-ip:last-child { border-bottom: 0; }
.mi-ip-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 500 var(--label-fs)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mi-impak); }
.mi-ip-h .mi-ikon { flex: 0 0 auto; }
.mi-dijangka { padding: 2px 7px; border: 1px solid var(--mi-impak); border-radius: 999px; font-size: var(--label-fs); letter-spacing: .06em; }
.mi-ip-t { margin-top: 4px; font-size: 15.5px; font-weight: 540; line-height: 1.4; letter-spacing: -0.008em; }
.mi-angka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--mi-impak-garis); }
.mi-angka div { display: flex; flex-direction: column-reverse; gap: 2px; }
.mi-angka dd { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); }
.mi-angka dt { font-size: 12.5px; line-height: 1.35; color: #3D4862; } /* 7.6:1 atas --mi-impak-bg (--kelabu 6.06 < lantai 6.07 gate kontras) */
@media (min-width: 961px) { .mi-baris .mi-sel-label, .mi-impak-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* ---------- 3. senario kes ---------- */
.mi-senario { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: clamp(28px, 3.6vw, 44px); border-radius: 18px; overflow: hidden; border: 1px solid var(--garis); }
.mi-sn-kiri { padding: clamp(22px, 2.6vw, 32px); background: var(--kertas); }
.bab:not(.bab-kabus) .mi-sn-kiri { background: var(--kabus); }
.mi-sn-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font: 500 var(--label-fs)/1.4 var(--mono); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--navy); }
.mi-sn-jenis { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--kelabu); color: var(--kelabu); font-size: var(--label-fs); letter-spacing: .06em; }
.mi-sn-tajuk { margin-top: 12px; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 560; line-height: 1.2; letter-spacing: -0.024em; text-wrap: balance; }
.mi-sn-label { margin-top: 18px; font: 500 var(--label-fs)/1.4 var(--mono); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--label-terang); }
.mi-sn-lama { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.mi-sn-punca, .mi-sn-hasil { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 15.5px; line-height: 1.5; }
.mi-sn-punca { background: var(--mi-punca-bg); border-left: 3px solid var(--mi-punca); }
.mi-sn-punca b { color: var(--mi-punca); font-weight: 600; }
.mi-sn-hasil { background: var(--mi-impak-bg); border-left: 3px solid var(--mi-impak); }
.mi-sn-hasil b { color: var(--mi-impak); font-weight: 600; }
.mi-sn-kanan { padding: clamp(22px, 2.6vw, 32px); background: var(--malam-2); color: var(--ais); }
.mi-sn-dengan { font: 500 var(--label-fs)/1.4 var(--mono); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--label-gelap); }
.mi-sn-langkah { display: grid; gap: 12px; margin-top: 16px; }
.mi-sn-l { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding-bottom: 12px; border-bottom: 1px solid var(--ais-garis); }
.mi-sn-l:last-child { border-bottom: 0; padding-bottom: 0; }
.mi-sn-l.mi-ada-th { grid-template-columns: 30px minmax(0, 1fr) 220px; }
.mi-th-pentas { display: block; width: 100%; height: 100%; }
.mi-sn-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ais); color: var(--ink); font: 600 13px/1 var(--mono); }
.mi-sn-t { font-size: 15.5px; line-height: 1.5; color: var(--ais); padding-top: 4px; }
.mi-th { display: block; border-radius: 8px; overflow: hidden; background: var(--kertas); box-shadow: 0 0 0 1px rgb(238 242 249 / .18); aspect-ratio: 16 / 10; }
.mi-th img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.mi-th.mi-th-tel { width: 84px; justify-self: end; aspect-ratio: 1170 / 2300; border-radius: 12px; background: #0E1426; }
.mi-th.mi-th-tel img { object-fit: contain; object-position: center; }

/* ---------- 4. siapa lagi perlukan ini + CTA ---------- */
.mi-beli { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(28px, 3.6vw, 44px); padding: clamp(22px, 2.6vw, 32px); border-radius: 18px; border: 1px solid var(--garis); border-top: 3px solid var(--navy); background: var(--kertas); }
.mi-beli-kicker { font: 500 var(--label-fs)/1.5 var(--mono); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--navy); }
.mi-beli-siapa { color: var(--kelabu); }
.mi-beli-siapa::before { content: "· "; }
.mi-beli-ayat { margin-top: 10px; font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 540; line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; }
.mi-beli-cta { display: grid; gap: 14px; justify-items: start; }
/* (ag) 11 Nov: apa yang kami bawa yang klien tak nampak */
.mi-pakar { margin: 14px 0 0; padding: 12px 16px 13px; border: 1px dashed var(--garis); border-radius: 12px; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.mi-pakar b { font: 500 var(--label-fs)/1.4 var(--mono); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--mi-punca); margin-right: 8px; }
.mi-beli-cta-teks { font-size: 15.5px; line-height: 1.5; color: var(--kelabu); }
.mi-beli-cta .butang { min-height: 48px; }

/* ---------- responsif ---------- */
@media (max-width: 1180px) and (min-width: 961px) {
  .mi-nodes.mi-n7, .mi-nodes.mi-n8 { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mi-nodes.mi-n7 .mi-nod:nth-child(4)::after, .mi-nodes.mi-n8 .mi-nod:nth-child(4)::after { content: none; }
}
@media (max-width: 960px) {
  .mi-nodes { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mi-kad { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mi-kepala { display: none; }
  .mi-barisan { grid-column: 1; gap: 14px; }
  .mi-baris { grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--garis); }
  .mi-baris .mi-sel { border-radius: 0; border: 0; }
  .mi-baris .mi-sel + .mi-sel { border-top: 1px solid var(--garis); }
  .mi-sel-teks { margin-top: 4px; }
  .mi-impak { grid-column: 1; grid-row: auto; }
  .mi-senario { grid-template-columns: minmax(0, 1fr); }
  .mi-beli { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mi-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mi-nod:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .mi-nod { padding: 12px 10px; }
  .mi-nod-ikon { width: 32px; height: 32px; }
  .mi-nod-teks { font-size: 14.5px; }
  .mi-sel-teks, .mi-sn-lama { font-size: 15.5px; }
  .mi-sn-l.mi-ada-th { grid-template-columns: 30px minmax(0, 1fr); }
  .mi-sn-l.mi-ada-th .mi-th { grid-column: 2; max-width: 280px; }
  .mi-th.mi-th-tel { justify-self: start; width: 96px; }
  .mi-angka dd { font-size: 1.45rem; }
}