/* Solution pages. Loaded after opslee.css: the nav, hero, dashboard, buttons,
   footer and discovery-call modal come from opslee.css unchanged; this file
   only styles the sections below the hero. */

.sx-more{margin-top:28px; font-size:15px; line-height:1.7; color:#444C58;}
.sx-more a{color:#037284; font-weight:600; border-bottom:1px solid rgba(3,114,132,.35);}
.sx-more a:hover{border-color:#037284;}

/* ═════════ v2 solution layout ═════════ */
.sv{position:relative; z-index:3; padding:112px 0;}
.sv-l1{background:#F7F8FB; color:#22293A;}
.sv-l2{background:#F1F3F8; color:#22293A;}
.sv-l1 + .sv-l2, .sv-l2 + .sv-l1{border-top:1px solid #E6E9F0;}
.sv-dk{background:linear-gradient(180deg,#0B0D10 0%, #090A0E 60%, #0B0D10 100%); color:var(--ink); overflow:hidden;}
.sv-dk::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 620px 380px at 12% 30%, rgba(49,221,208,.09), transparent 66%),
             radial-gradient(ellipse 760px 460px at 88% 70%, rgba(142,107,255,.15), transparent 66%);}
.sv .wrap{position:relative; z-index:1;}
#how-it-works{scroll-margin-top:84px;}

.sv-eb{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:#037284;
}
.sv-eb::before{content:""; width:18px; height:1.5px; border-radius:2px; background:var(--grad);}
.sv-dk .sv-eb{color:var(--teal);}
.sv h2{font-size:44px; font-weight:800; line-height:1.1; letter-spacing:-.035em; color:#0B0D10; text-wrap:balance;}
.sv-dk h2{color:#fff;}
.sv h2 .grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.sv-p{margin-top:18px; max-width:560px; font-size:17px; line-height:1.7; color:#444C58;}
.sv-dk .sv-p{color:rgba(245,246,248,.92);}
.sv-head{max-width:720px;}
.sv-head .sv-p{max-width:640px;}

.sv-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; align-items:center;}
.sv-split.wide-r{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);}
.sv-split.wide-l{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);}

.sv-card{
  background:#fff; border:1px solid #E3E7EE; border-radius:18px;
  box-shadow:0 1px 2px rgba(11,13,16,.04), 0 24px 48px -30px rgba(34,41,58,.28);
}
.sv-ic{
  flex:none; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg, rgba(15,163,177,.11), rgba(91,39,204,.11));
}
.sv-ic svg{width:22px; height:22px; color:#5B27CC;}
.sv-ic.t svg{color:#0FA3B1;}

.sv-list{display:grid; gap:22px; margin-top:34px;}
.sv-li{display:flex; gap:16px; align-items:flex-start;}
.sv-li h3{font-size:17px; font-weight:700; letter-spacing:-.015em; color:#0B0D10;}
.sv-li p{margin-top:5px; font-size:15px; line-height:1.6; color:#444C58;}

.sv-vis{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:16px; align-items:start;}
.sv-pd{padding:24px;}
.sv-pd-h{font-size:15px; font-weight:800; color:#0B0D10; letter-spacing:-.01em;}
.sv-prod{display:flex; align-items:center; gap:12px; margin-top:16px;}
.sv-th{flex:none; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:#EDF0F4; color:#59626F; font-size:13px; font-weight:800;}
.sv-prod b{display:block; font-size:14.5px; font-weight:700; color:#0B0D10;}
.sv-prod span{display:block; margin-top:2px; font-size:12.5px; color:#8A93A0;}
.sv-badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap;}
.sv-badge i{width:6px; height:6px; border-radius:50%; background:currentColor;}
.sv-badge.low{background:#FDF3E4; color:#9E5D0A;}
.sv-prod .sv-badge{margin-left:auto;}
.sv-kv{display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; margin-top:20px; padding-top:18px; border-top:1px solid #EDF0F4;}
.sv-kv span{display:block; font-size:12px; font-weight:600; color:#8A93A0;}
.sv-kv b{display:block; margin-top:4px; font-size:22px; font-weight:800; letter-spacing:-.02em; color:#0B0D10; font-variant-numeric:tabular-nums;}
.sv-meter{margin-top:20px; padding-top:18px; border-top:1px solid #EDF0F4;}
.sv-meter-t{display:flex; justify-content:space-between; font-size:12px; font-weight:600; color:#59626F;}
.sv-meter-b{position:relative; height:8px; margin-top:10px; border-radius:99px; background:#EDF0F4;}
.sv-meter-b i{position:absolute; left:0; top:0; bottom:0; width:35%; border-radius:99px; background:linear-gradient(90deg,#E0A02A,#F2C46A);}
.sv-meter-b em{position:absolute; top:-5px; bottom:-5px; left:58%; width:2px; border-radius:2px; background:#5B27CC;}
.sv-meter-l{display:flex; justify-content:space-between; margin-top:10px; font-size:11px; color:#8A93A0;}
.sv-hl{padding:20px 20px 8px;}
.sv-hl-h{font-size:14px; font-weight:800; color:#0B0D10; margin-bottom:6px;}
.sv-hl-r{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid #EDF0F4;}
.sv-hl-r:first-of-type{border-top:0;}
.sv-hl-r i{flex:none; width:10px; height:10px; border-radius:3px;}
.sv-hl-r span{flex:1; font-size:13px; font-weight:600; color:#444C58;}
.sv-hl-r b{font-size:15px; font-weight:800; color:#0B0D10; font-variant-numeric:tabular-nums;}

.sv-flow{list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:36px; margin-top:48px;}
.sv-step{position:relative; padding:26px 24px 28px;}
.sv-step:not(:last-child)::after{
  content:""; position:absolute; top:50%; right:-27px; width:18px; height:18px; transform:translateY(-50%);
  background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93A0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E");
}
.sv-num{display:block; margin-top:20px; font-size:13px; font-weight:800; letter-spacing:.04em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.sv-step h3{margin-top:6px; font-size:17px; font-weight:700; letter-spacing:-.015em; color:#0B0D10;}
.sv-step p{margin-top:8px; font-size:14.5px; line-height:1.6; color:#444C58;}

.sv-win{display:grid; grid-template-columns:168px minmax(0,1fr); border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(142,107,255,.10);}
.sv-side{background:#0F1218; padding:18px 12px; border-right:1px solid rgba(255,255,255,.06);}
.sv-side-b{display:flex; align-items:center; gap:8px; padding:2px 8px 16px;}
.sv-side-b img{height:16px; width:auto;}
.sv-side-b b{font-size:11px; font-weight:800; letter-spacing:.16em; color:#fff;}
.sv-side span{display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:9px; font-size:12px; font-weight:600; color:rgba(245,246,248,.62);}
.sv-side span svg{width:15px; height:15px;}
.sv-side span.on{background:rgba(255,255,255,.07); color:#fff;}
.sv-main{background:#fff; color:#0F1319; padding:22px 22px 18px; min-width:0;}
.sv-main-h{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.sv-main-h b{font-size:17px; font-weight:800; letter-spacing:-.015em;}
.sv-btn-p{display:inline-flex; align-items:center; padding:7px 12px; border-radius:9px; background:#5B27CC; color:#fff; font-size:11.5px; font-weight:700; white-space:nowrap;}
.sv-chips{display:flex; gap:8px; margin-top:14px;}
.sv-chips span{padding:5px 10px; border-radius:8px; border:1px solid #E1E5EB; font-size:11px; font-weight:600; color:#59626F;}
.sv-tbl{width:100%; margin-top:14px; border-collapse:collapse; font-size:12px;}
.sv-tbl th{padding:8px 6px; text-align:left; font-size:10.5px; font-weight:700; color:#8A93A0; border-bottom:1px solid #EDF0F4; white-space:nowrap;}
.sv-tbl td{padding:10px 6px; border-bottom:1px solid #F1F3F6; color:#0F1319; white-space:nowrap;}
.sv-tbl .r{text-align:right; font-variant-numeric:tabular-nums;}
.sv-tbl .m{color:#8A93A0;}
.sv-tp{display:flex; align-items:center; gap:9px; font-weight:700;}
.sv-tp i{flex:none; width:26px; height:26px; border-radius:8px; background:#EDF0F4; color:#59626F; font-style:normal; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center;}
.sv-min{margin-top:14px; padding:12px 14px; border-radius:12px; background:#F6F8FA;}
.sv-min-t{display:flex; justify-content:space-between; gap:10px; font-size:11.5px; font-weight:600; color:#59626F;}
.sv-min-t b{color:#0F1319;}
.sv-min-b{height:6px; margin-top:8px; border-radius:99px; background:#E1E5EB; overflow:hidden;}
.sv-min-b i{display:block; width:86%; height:100%; border-radius:99px; background:var(--grad);}

.sv-mini{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;}
.sv-mini .sv-card{padding:24px 22px 26px;}
.sv-mini h3{margin-top:18px; font-size:16.5px; font-weight:700; letter-spacing:-.015em; color:#0B0D10;}
.sv-mini p{margin-top:7px; font-size:14.5px; line-height:1.6; color:#444C58;}

.sv-quote{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:36px; align-items:center; padding:36px 40px;}
.sv-av{width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#F3E9E2; color:#6B4A3A; font-size:24px; font-weight:800; letter-spacing:-.02em;}
.sv-quote blockquote{position:relative; padding-left:48px; font-size:17px; line-height:1.65; color:#22293A;}
.sv-quote blockquote::before{content:"\201C"; position:absolute; left:0; top:-14px; font-size:64px; font-weight:800; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.sv-who{padding-left:32px; border-left:1px solid #E3E7EE;}
.sv-who b{display:block; font-size:15px; font-weight:800; color:#0B0D10;}
.sv-who span{display:block; margin-top:4px; font-size:13px; line-height:1.5; color:#59626F;}

.sv-final{text-align:center; padding:120px 0;}
.sv-final::before{background:radial-gradient(ellipse 700px 320px at 20% 100%, rgba(49,221,208,.14), transparent 70%),
                             radial-gradient(ellipse 760px 360px at 80% 100%, rgba(142,107,255,.24), transparent 70%);}
.sv-final .sv-eb{justify-content:center;}
.sv-final h2{max-width:760px; margin:0 auto;}
.sv-final .sv-p{margin:18px auto 0;}
.sv-cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px;}
.sv-final .sv-cta-row{justify-content:center;}

@media (max-width:1100px){
  .sv-split, .sv-split.wide-r, .sv-split.wide-l{grid-template-columns:1fr; gap:48px;}
  .sv-flow{grid-template-columns:repeat(2, minmax(0,1fr));}
  .sv-step:nth-child(2)::after{display:none;}
  .sv-quote{grid-template-columns:auto minmax(0,1fr);}
  .sv-who{grid-column:1 / -1; padding-left:0; border-left:0; padding-top:18px; border-top:1px solid #E3E7EE;}
}
@media (max-width:760px){
  .sv{padding:72px 0;}
  .sv h2{font-size:30px;}
  .sv-p{font-size:15.5px;}
  .sv-vis{grid-template-columns:1fr;}
  .sv-flow{grid-template-columns:1fr; gap:14px; margin-top:32px;}
  .sv-step::after{display:none;}
  .sv-mini{grid-template-columns:1fr; gap:12px;}
  .sv-win{grid-template-columns:1fr;}
  .sv-side{display:none;}
  .sv-main{padding:18px 14px 14px;}
  .sv-tbl .hm{display:none;}
  .sv-quote{grid-template-columns:1fr; gap:20px; padding:28px 22px;}
  .sv-av{width:64px; height:64px; font-size:19px;}
  .sv-quote blockquote{font-size:15.5px; padding-left:36px;}
  .sv-quote blockquote::before{font-size:52px;}
  .sv-cta-row .btn{flex:1 1 100%;}
  .sv-final{padding:84px 0;}
}

/* v2 visuals: attention rows, PO lines, grouped queue, badge colors */
.sv-badge.ok{background:#E4F7F4; color:#0A8278;}
.sv-badge.out{background:#FCEBEA; color:#AE3529;}
.sv-badge.po{background:#EFEAFF; color:#5F33DE;}
.sv-at{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-top:1px solid #EDF0F4;}
.sv-pd-h + .sv-at{margin-top:10px; border-top:0;}
.sv-at b{display:block; font-size:14px; font-weight:700; color:#0B0D10;}
.sv-at span{display:block; margin-top:2px; font-size:12.5px; color:#8A93A0;}
.sv-at .sv-badge{flex:none; margin-top:0;}
.sv-lines{margin-top:18px; border-top:1px solid #EDF0F4;}
.sv-lines div{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid #EDF0F4; font-size:13px;}
.sv-lines span{color:#444C58;}
.sv-lines b{flex:none; color:#0B0D10; font-weight:700; font-variant-numeric:tabular-nums;}
.sv-total{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:14px; font-size:12.5px; color:#8A93A0;}
.sv-total b{font-size:20px; font-weight:800; letter-spacing:-.02em; color:#0B0D10;}
.sv-hl-r span:only-child{font-weight:700; color:#0B0D10;}
.sv-grp{margin-top:16px; padding:14px; border:1px solid #EDF0F4; border-radius:12px;}
.sv-grp-h{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.sv-grp-h b{font-size:13px; font-weight:800;}
.sv-grp-m{font-size:11px; font-weight:600; color:#8A93A0; white-space:nowrap;}
.sv-grp .sv-min-b{margin:0 0 6px;}
.sv-grp-r{display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:12px; border-top:1px solid #F1F3F6;}
.sv-grp-r:nth-of-type(3){border-top:0;}
.sv-grp-r > span:last-child{font-weight:700; font-variant-numeric:tabular-nums;}
@media (max-width:760px){
  .sv-lines span{font-size:12.5px;}
}

/* table product cell: name with the variant underneath */
.sv-tp{display:block;}
.sv-tp b{display:block; font-weight:700; color:#0F1319;}
.sv-tp small{display:block; margin-top:2px; font-size:10.5px; font-weight:500; color:#8A93A0;}
.sv-grp-r .sv-tp small{display:inline; margin:0 0 0 6px;}
@media (max-width:760px){
  .sv-tbl th, .sv-tbl td{white-space:normal; padding:9px 4px;}
  .sv-tbl .sv-badge{padding:3px 7px; font-size:10px; white-space:normal; text-align:center;}
  .sv-tbl .sv-badge i{display:none;}
}
/* ═════════ /shopify-purchase-orders — approved and LOCKED 2026-09-28 ═════════ */

/* ── shared product-UI bits ── */
.mk-badge{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:10.5px; font-weight:700; white-space:nowrap;}
.mk-badge i{width:5px; height:5px; border-radius:50%; background:currentColor;}
.mk-badge.draft{background:#EDF0F4; color:#59626F;}
.mk-badge.sent{background:#EFEAFF; color:#5F33DE;}
.mk-badge.part{background:#FDF3E4; color:#9E5D0A;}
.mk-badge.done{background:#E4F7F4; color:#0A8278;}
.mk-badge.cx{background:#FCEBEA; color:#AE3529;}
.mk-badge.low{background:#FDF3E4; color:#9E5D0A;}
.mk-badge.out{background:#FCEBEA; color:#AE3529;}
.mk-m{color:#8A93A0;}
.mk-r{text-align:right; font-variant-numeric:tabular-nums;}
.mk-bar{height:6px; border-radius:99px; background:#E6E9EF; overflow:hidden;}
.mk-bar i{display:block; height:100%; border-radius:99px; background:var(--grad);}

/* ── hero: purchase orders app ── */
.mk-app{
  display:grid; grid-template-columns:150px minmax(0,1fr); border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(142,107,255,.12), 0 0 80px -20px rgba(91,39,204,.35);
}
.mk-side{background:#0F1218; padding:16px 10px; border-right:1px solid rgba(255,255,255,.06);}
.mk-side-b{display:flex; align-items:center; gap:7px; padding:2px 8px 14px;}
.mk-side-b img{height:15px; width:auto;}
.mk-side-b b{font-size:10.5px; font-weight:800; letter-spacing:.16em; color:#fff;}
.mk-side span{display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px; font-size:11.5px; font-weight:600; color:rgba(245,246,248,.6);}
.mk-side span svg{width:14px; height:14px;}
.mk-side span.on{background:rgba(255,255,255,.08); color:#fff;}
.mk-main{background:#fff; color:#0F1319; padding:18px 18px 16px; min-width:0;}
.mk-main-h{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.mk-main-h b{font-size:17px; font-weight:800; letter-spacing:-.015em;}
.mk-btn{display:inline-flex; align-items:center; padding:7px 12px; border-radius:9px; background:#5B27CC; color:#fff; font-size:11px; font-weight:700; white-space:nowrap;}
.mk-filters{display:flex; gap:8px; margin-top:12px;}
.mk-filters span{padding:5px 10px; border-radius:8px; border:1px solid #E1E5EB; font-size:10.5px; font-weight:600; color:#59626F; white-space:nowrap;}
.mk-filters span.q{flex:1; color:#8A93A0;}
.mk-tbl{width:100%; margin-top:12px; border-collapse:collapse; font-size:11.5px;}
.mk-tbl th{padding:7px 6px; text-align:left; font-size:10px; font-weight:700; color:#8A93A0; border-bottom:1px solid #EDF0F4; white-space:nowrap;}
.mk-tbl td{padding:9px 6px; border-bottom:1px solid #F1F3F6; white-space:nowrap;}
.mk-tbl tr.sel td{background:#F7F5FF;}
.mk-tbl b{font-weight:700;}
.mk-po{margin-top:14px; padding:14px; border:1px solid #E6E9EF; border-radius:12px;}
.mk-po-h{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.mk-po-h b{font-size:14px; font-weight:800;}
.mk-po-h small{display:block; margin-top:2px; font-size:11px; color:#8A93A0;}
.mk-meta{display:flex; gap:22px; font-size:10.5px; color:#8A93A0;}
.mk-meta b{display:block; margin-top:2px; font-size:12px; font-weight:700; color:#0F1319;}
.mk-tabs{display:flex; gap:16px; margin-top:12px; border-bottom:1px solid #EDF0F4; font-size:11px; font-weight:600; color:#8A93A0;}
.mk-tabs span{padding-bottom:7px;}
.mk-tabs span.on{color:#5B27CC; box-shadow:inset 0 -2px 0 #5B27CC;}
.mk-line{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3, minmax(0,.7fr)); gap:8px; padding:9px 0 0; font-size:11.5px;}
.mk-line b{font-weight:700;}
.mk-line small{display:block; font-size:10px; color:#8A93A0;}

/* ── 2. workflow ── */
.mk-flow{list-style:none; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:30px; margin-top:52px;}
.mk-fs{position:relative; display:flex; flex-direction:column; padding:18px 16px 16px; background:#fff; border:1px solid #E3E7EE; border-radius:18px;
  box-shadow:0 1px 2px rgba(11,13,16,.04), 0 24px 48px -30px rgba(34,41,58,.28);}
.mk-fs:not(:last-child)::after{
  content:""; position:absolute; top:50%; right:-24px; width:18px; height:18px; transform:translateY(-50%);
  background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B27CC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E");
}
.mk-fs-h{display:flex; align-items:center; gap:9px;}
.mk-fs-n{flex:none; display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px;
  background:linear-gradient(135deg, rgba(15,163,177,.12), rgba(91,39,204,.14)); color:#5B27CC; font-size:11px; font-weight:800;}
.mk-fs-h b{font-size:14.5px; font-weight:800; letter-spacing:-.01em; color:#0B0D10;}
.mk-ui{flex:1; margin-top:14px; padding:12px; border-radius:12px; background:#F7F8FB; border:1px solid #EDF0F4; font-size:11.5px; color:#0F1319;}
.mk-ui-row{display:flex; justify-content:space-between; gap:8px; padding:5px 0;}
.mk-ui-row + .mk-ui-row{border-top:1px solid #EDF0F4;}
.mk-ui b{font-weight:700;}
.mk-ui .t{font-size:12.5px; font-weight:800;}
.mk-ui .s{font-size:10.5px; color:#8A93A0;}
.mk-chk{display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; margin-right:6px; border-radius:4px; background:#5B27CC; vertical-align:-2px;}
.mk-chk::after{content:""; width:6px; height:3px; margin-top:-2px; border-left:1.6px solid #fff; border-bottom:1.6px solid #fff; transform:rotate(-45deg);}
.mk-pdf{display:flex; align-items:center; gap:8px; margin-top:8px; padding:7px 8px; border-radius:8px; background:#fff; border:1px solid #EDF0F4;}
.mk-pdf i{flex:none; width:22px; height:26px; border-radius:4px; background:#E5484D; color:#fff; font-style:normal; font-size:7.5px; font-weight:800; display:flex; align-items:flex-end; justify-content:center; padding-bottom:3px;}
.mk-fs p{margin-top:12px; font-size:13px; line-height:1.55; color:#444C58;}

/* ── 3. connected to inventory ── */
.mk-conn{display:grid; grid-template-columns:minmax(0,1.2fr) 96px minmax(0,1fr); align-items:center; margin-top:48px;}
.mk-panel{background:#fff; color:#0F1319; border-radius:18px; padding:20px; box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08);}
.mk-panel-h{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.mk-panel-h b{font-size:16px; font-weight:800; letter-spacing:-.01em;}
.mk-panel-h small{display:block; margin-top:3px; font-size:11.5px; color:#8A93A0;}
.mk-panel .mk-meta{margin-top:14px; padding-bottom:12px; border-bottom:1px solid #EDF0F4;}
.mk-rtbl{width:100%; margin-top:6px; border-collapse:collapse; font-size:12px;}
.mk-rtbl th{padding:8px 4px; text-align:left; font-size:10px; font-weight:700; color:#8A93A0; white-space:nowrap;}
.mk-rtbl td{padding:9px 4px; border-top:1px solid #F1F3F6; white-space:nowrap;}
.mk-rtbl small{display:block; font-size:10px; color:#8A93A0;}
.mk-hl{outline:2px solid rgba(49,221,208,.8); outline-offset:-2px; border-radius:10px; background:linear-gradient(90deg, rgba(49,221,208,.08), rgba(142,107,255,.08));}
tr.mk-hl td{background:transparent;}
.mk-bridge{position:relative; height:100%; display:flex; align-items:center; justify-content:center;}
.mk-bridge::before{content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:var(--grad); box-shadow:0 0 16px rgba(49,221,208,.6);}
.mk-bridge span{position:relative; padding:6px 9px; border-radius:999px; background:#0B0D10; border:1px solid rgba(49,221,208,.6);
  font-size:11px; font-weight:800; color:#fff; white-space:nowrap; text-align:center; line-height:1.25;}
.mk-inv-row{display:flex; justify-content:space-between; align-items:center; padding:10px 8px; font-size:13px; border-top:1px solid #F1F3F6;}
.mk-inv-row span{color:#59626F; font-weight:600;}
.mk-inv-row b{font-size:15px; font-weight:800; font-variant-numeric:tabular-nums;}
.mk-inv-row.mk-hl{border-top-color:transparent;}
.mk-calc{margin-top:12px; padding:10px 12px; border-radius:10px; background:#F7F5FF; font-size:11.5px; color:#5F33DE; font-weight:600;}
.mk-calc b{font-weight:800;}

/* ── 4. automated purchasing: vertical timeline ── */
.mk-tl{list-style:none; position:relative; padding:26px 26px 10px; background:#fff; border:1px solid #E3E7EE; border-radius:20px;
  box-shadow:0 1px 2px rgba(11,13,16,.04), 0 30px 60px -36px rgba(34,41,58,.32);}
.mk-tl::before{content:""; position:absolute; left:43px; top:44px; bottom:44px; width:2px; background:linear-gradient(180deg,#31DDD0,#8E6BFF);}
.mk-tl li{position:relative; display:grid; grid-template-columns:36px minmax(0,1fr); gap:16px; padding-bottom:20px;}
.mk-tl-dot{position:relative; z-index:1; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid #E3E7EE; color:#5B27CC;}
.mk-tl-dot svg{width:17px; height:17px;}
.mk-tl h3{font-size:15.5px; font-weight:800; letter-spacing:-.01em; color:#0B0D10; margin-top:6px;}
.mk-tl .mk-ui{margin-top:10px;}
.mk-field{display:inline-block; min-width:52px; padding:3px 8px; border-radius:6px; border:1px solid #D5DAE3; background:#fff; font-weight:700; text-align:right;}
.mk-warn{color:#AE3529; font-weight:700;}
.mk-rule{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px;}
.mk-rule span{padding:7px 12px; border-radius:999px; background:#fff; border:1px solid #E3E7EE; font-size:12.5px; font-weight:600; color:#22293A;}
.mk-rule span b{color:#5B27CC;}

/* ── 5. connected to your tools ── */
.mk-tools{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr) minmax(0,.8fr); gap:28px; align-items:center;}
.mk-slack{border-radius:16px; background:#1A1D21; border:1px solid rgba(255,255,255,.1); padding:18px; box-shadow:0 40px 90px -40px rgba(0,0,0,.9);}
.mk-slack-h{display:flex; align-items:center; gap:8px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08); font-size:13px; font-weight:800; color:#fff;}
.mk-slack-h span{color:rgba(255,255,255,.5); font-weight:600;}
.mk-msg{display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; padding-top:14px;}
.mk-av{width:34px; height:34px; border-radius:8px; background:#0B0D10; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.1);}
.mk-av img{height:16px; width:auto;}
.mk-msg-h{font-size:13px; font-weight:800; color:#fff;}
.mk-msg-h em{margin-left:6px; padding:1px 5px; border-radius:4px; background:rgba(255,255,255,.1); font-style:normal; font-size:9.5px; font-weight:700; color:rgba(255,255,255,.7);}
.mk-msg-h small{margin-left:6px; font-size:11px; font-weight:500; color:rgba(255,255,255,.45);}
.mk-att{margin-top:6px; padding:8px 0 8px 12px; border-left:3px solid #E0A02A; font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.85);}
.mk-att.q{border-left-color:#31DDD0;}
.mk-att.x{border-left-color:#E5484D;}
.mk-att b{color:#fff;}
.mk-sbtn{display:inline-block; margin-top:8px; padding:5px 12px; border-radius:6px; border:1px solid rgba(255,255,255,.25); font-size:11.5px; font-weight:700; color:#fff;}
.mk-int{display:grid; gap:14px;}
.mk-ic{display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:start; padding:16px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);}
.mk-ic-l{width:40px; height:40px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center;}
.mk-ic > div > b{display:block; font-size:14px; font-weight:800; color:#fff;}
.mk-ic > div > span{display:block; margin-top:4px; font-size:12.5px; line-height:1.5; color:rgba(245,246,248,.92);}

/* ── 6. proof ── */
.mk-proof{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; align-items:stretch;}
.mk-proof .sv-quote{grid-template-columns:auto minmax(0,1fr); height:100%;}
.mk-proof .sv-who{grid-column:2; padding:14px 0 0; border-left:0;}
.mk-helped{padding:26px;}
.mk-helped h3{font-size:16px; font-weight:800; color:#0B0D10;}
.mk-hg{display:grid; grid-template-columns:1fr 1fr; gap:20px 18px; margin-top:20px;}
.mk-hg > div{display:flex; gap:12px; align-items:flex-start;}
.mk-hg .sv-ic{width:38px; height:38px; border-radius:10px;}
.mk-hg .sv-ic svg{width:19px; height:19px;}
.mk-hg > div > div > b{display:block; font-size:14px; font-weight:700; color:#0B0D10; margin-top:2px;}
.mk-hg > div > div > span{display:block; margin-top:3px; font-size:12.5px; line-height:1.45; color:#444C58;}

/* ── responsive ── */
@media (max-width:1180px){
  .mk-flow{grid-template-columns:repeat(3, minmax(0,1fr));}
  .mk-fs:nth-child(3)::after{display:none;}
  .mk-tools{grid-template-columns:1fr 1fr;}
  .mk-tools > div:first-child{grid-column:1 / -1;}
}
@media (max-width:1020px){
  .mk-conn{grid-template-columns:1fr; gap:0;}
  .mk-bridge{height:64px;}
  .mk-bridge::before{left:50%; right:auto; top:0; bottom:0; width:2px; height:auto;}
  .mk-proof{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .mk-app{grid-template-columns:1fr;}
  .mk-side{display:none;}
  .mk-main{padding:14px 12px;}
  .mk-tbl .hm, .mk-rtbl .hm{display:none;}
  .mk-tbl td, .mk-tbl th{padding:8px 4px;}
  .mk-filters span.q{display:none;}
  .mk-meta{flex-wrap:wrap; gap:10px 18px;}
  .mk-line{grid-template-columns:minmax(0,1.4fr) repeat(2, minmax(0,.6fr));}
  .mk-line .hm{display:none;}
  .mk-flow{grid-template-columns:1fr; gap:26px;}
  .mk-fs:not(:last-child)::after{display:block; top:auto; bottom:-23px; right:50%; transform:translateX(50%) rotate(90deg);}
  .mk-fs:nth-child(3)::after{display:block;}
  .mk-tools{grid-template-columns:1fr;}
  .mk-tl{padding:20px 16px 6px;}
  .mk-tl::before{left:33px;}
  .mk-hg{grid-template-columns:1fr;}
  .mk-proof .sv-quote{grid-template-columns:1fr;}
  .mk-proof .sv-who{grid-column:auto;}
}

/* fixes after measuring */
.mk-sub{display:block; margin-top:1px; font-size:10px; font-weight:500; color:#8A93A0;}
@media (max-width:1180px){ .mk-proof{grid-template-columns:1fr;} }
@media (max-width:760px){
  .mk-tbl td, .mk-tbl th, .mk-rtbl td, .mk-rtbl th{white-space:normal;}
  .mk-tbl .mk-badge{white-space:normal; text-align:center; padding:3px 7px; font-size:10px;}
  .mk-tbl .mk-badge i{display:none;}
}

/* ═════════ /shopify-inventory-management, /inventory-replenishment, /inventory-management-software — approved and LOCKED 2026-09-28 ═════════ */

/* ── shared ── */
.mf-num{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
  background:var(--grad); color:#fff; font-size:10px; font-weight:800; flex:none;}
.mf-kpis{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-top:12px;}
.mf-kpi{padding:10px 11px; border:1px solid #EDF0F4; border-radius:11px; background:#FBFCFD;}
.mf-kpi > span{display:block; font-size:10px; font-weight:600; color:#8A93A0; white-space:nowrap;}
.mf-kpi > b{display:block; margin-top:4px; font-size:18px; font-weight:800; letter-spacing:-.02em; color:#0F1319; font-variant-numeric:tabular-nums;}
.mf-kpi > small{display:block; margin-top:2px; font-size:10px; font-weight:600;}
.mf-kpi > small.w{color:#9E5D0A;} .mf-kpi > small.o{color:#AE3529;} .mf-kpi > small.p{color:#5F33DE;} .mf-kpi > small.g{color:#0A8278;}
.mf-sub{display:block; margin-top:1px; font-size:10px; font-weight:500; color:#8A93A0;}
.mf-dash{color:#B4BBC6;}
.mf-app .mk-tbl td b, .md .mk-tbl td b{font-weight:700;}

/* ── P1 s2: annotated product details ── */
.mf-annot{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:64px; align-items:center;}
.mf-pd{padding:24px;}
.mf-pd-h{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.mf-pd-h b{display:block; font-size:18px; font-weight:800; letter-spacing:-.015em; color:#0B0D10;}
.mf-pd-h span{display:block; margin-top:3px; font-size:12.5px; color:#8A93A0;}
.mf-sync{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:#E4F7F4; color:#0A8278; font-size:11px; font-weight:700; white-space:nowrap;}
.mf-sync i{width:6px; height:6px; border-radius:50%; background:currentColor;}
.mf-vt{width:100%; margin-top:18px; border-collapse:collapse; font-size:13px;}
.mf-vt th{padding:9px 8px; text-align:left; font-size:11px; font-weight:700; color:#8A93A0; border-bottom:1px solid #EDF0F4; white-space:nowrap;}
.mf-vt td{padding:12px 8px; border-bottom:1px solid #F1F3F6; white-space:nowrap; color:#0F1319;}
.mf-vt th .mf-num{margin-left:4px; vertical-align:-3px;}
.mf-vt tr.on td{background:#F7F5FF;}
.mf-vt .mk-r{font-weight:700;}
.mf-keys{display:grid; gap:20px; margin-top:32px;}
.mf-key{display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; align-items:start;}
.mf-key .mf-num{width:28px; height:28px; font-size:12px;}
.mf-key h3{font-size:17px; font-weight:700; letter-spacing:-.015em; color:#0B0D10;}
.mf-key p{margin-top:5px; font-size:15px; line-height:1.6; color:#444C58;}

/* ── P1 s3: staggered track ── */
.mf-track{list-style:none; position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; margin-top:52px;}
.mf-track::before{content:""; position:absolute; left:4%; right:4%; top:17px; height:2px; background:linear-gradient(90deg,#31DDD0,#8E6BFF);}
.mf-track > li{position:relative;}
.mf-track > li:nth-child(even){padding-top:36px;}
.mf-node{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin:0 auto;
  border-radius:50%; background:#fff; border:2px solid #8E6BFF; color:#5B27CC; font-size:12px; font-weight:800; box-shadow:0 0 0 6px #F1F3F8;}
.mf-track > li:nth-child(even) .mf-node{margin-top:-36px;}
.mf-tcard{margin-top:18px; padding:18px; background:#fff; border:1px solid #E3E7EE; border-radius:16px;
  box-shadow:0 1px 2px rgba(11,13,16,.04), 0 24px 48px -30px rgba(34,41,58,.28);}
.mf-tcard h3{font-size:15.5px; font-weight:800; letter-spacing:-.01em; color:#0B0D10;}
.mf-tcard .mk-ui{margin-top:12px;}

/* ── P1 s4: stock coverage ── */
.mf-cov{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; margin-top:48px; align-items:stretch;}
.mf-panel{background:#fff; color:#0F1319; border-radius:18px; padding:22px; box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08);}
.mf-panel-h{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:6px;}
.mf-panel-h b{font-size:16px; font-weight:800; letter-spacing:-.01em;}
.mf-legend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11px; font-weight:600; color:#59626F;}
.mf-legend span{display:inline-flex; align-items:center; gap:6px;}
.mf-legend i{width:10px; height:10px; border-radius:3px;}
.mf-sw-oh{background:#31DDD0;}
.mf-sw-in{background:repeating-linear-gradient(135deg,#8E6BFF 0 3px,#B9A5FF 3px 6px);}
.mf-sw-rp{width:2px !important; height:12px !important; border-radius:1px !important; background:#E5484D;}
.mf-row{padding:14px 0; border-top:1px solid #F1F3F6;}
.mf-row:first-of-type{border-top:0;}
.mf-row-h{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.mf-row-h b{font-size:14px; font-weight:800;}
.mf-row-h small{font-size:11.5px; color:#8A93A0; font-weight:500;}
.mf-gauge{position:relative; display:flex; height:12px; margin-top:10px; border-radius:99px; background:#EDF0F4; overflow:visible;}
.mf-gauge > i{height:100%;}
.mf-gauge > i:first-child{border-radius:99px 0 0 99px;}
.mf-gauge .oh{background:#31DDD0;}
.mf-gauge .in{background:repeating-linear-gradient(135deg,#8E6BFF 0 4px,#B9A5FF 4px 8px);}
.mf-gauge .rp{position:absolute; top:-5px; bottom:-5px; width:2px; border-radius:2px; background:#E5484D;}
.mf-nums{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-top:10px; font-size:11px; color:#8A93A0;}
.mf-nums b{display:block; margin-top:2px; font-size:14px; font-weight:800; color:#0F1319; font-variant-numeric:tabular-nums;}
.mf-nums b.rec{color:#5B27CC;}
.mf-po{padding:12px 0; border-top:1px solid #F1F3F6;}
.mf-po:first-of-type{border-top:0;}
.mf-po-h{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.mf-po-h b{font-size:13.5px; font-weight:800;}
.mf-po-l{display:flex; justify-content:space-between; gap:10px; margin-top:6px; font-size:12px; color:#444C58;}
.mf-po-l b{font-weight:700; color:#0F1319;}
.mf-po-l.hl{padding:5px 8px; margin-left:-8px; margin-right:-8px; border-radius:8px; background:linear-gradient(90deg, rgba(49,221,208,.10), rgba(142,107,255,.10));}

/* ── compact tools strip (light sections) ── */
.mf-strip{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.85fr); gap:28px; align-items:center;}
.mf-lic{display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:start; padding:16px; border-radius:14px; background:#fff; border:1px solid #E3E7EE;}
.mf-lic + .mf-lic{margin-top:12px;}
.mf-lic > span{width:40px; height:40px; border-radius:10px; background:#F4F6F8; display:flex; align-items:center; justify-content:center;}
.mf-lic > div > b{display:block; font-size:14px; font-weight:800; color:#0B0D10;}
.mf-lic > div > span{display:block; margin-top:4px; font-size:12.5px; line-height:1.5; color:#444C58;}

/* ── P2 s2: reorder math ── */
.mf-math{padding:26px;}
.mf-math .mf-gauge{height:18px; margin-top:26px;}
.mf-math .mf-gauge .rp{top:-8px; bottom:-8px; width:3px;}
.mf-ticks{position:relative; height:34px; margin-top:8px; font-size:11px; font-weight:700;}
.mf-ticks span{position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; text-align:center; color:#59626F;}
.mf-ticks span small{display:block; font-weight:500; color:#8A93A0;}
.mf-ticks span.l{transform:none;} .mf-ticks span.r{transform:translateX(-100%); text-align:right;}
.mf-eq{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:20px; padding-top:18px; border-top:1px solid #EDF0F4;}
.mf-eq > span{display:inline-flex; flex-direction:column; align-items:center; padding:8px 12px; border-radius:10px; background:#F4F6F8; font-size:10.5px; font-weight:600; color:#8A93A0;}
.mf-eq > span b{font-size:18px; font-weight:800; color:#0F1319;}
.mf-eq > span.res{background:linear-gradient(135deg, rgba(49,221,208,.14), rgba(142,107,255,.18));}
.mf-eq > span.res b{color:#5B27CC;}
.mf-eq > em{font-style:normal; font-size:18px; font-weight:800; color:#8A93A0;}
.mf-note{margin-top:12px; font-size:12px; color:#8A93A0;}
.mf-leg{display:grid; gap:16px; margin-top:30px;}
.mf-leg > div{display:grid; grid-template-columns:14px minmax(0,1fr); gap:14px; align-items:start;}
.mf-leg > div > i{width:14px; height:14px; border-radius:4px; margin-top:4px;}
.mf-leg h3{font-size:16.5px; font-weight:700; letter-spacing:-.015em; color:#0B0D10;}
.mf-leg p{margin-top:4px; font-size:14.5px; line-height:1.6; color:#444C58;}

/* ── P2 s3: zig-zag pipeline ── */
.mf-zig{list-style:none; position:relative; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; margin-top:44px;}
.mf-zig::before{content:""; position:absolute; left:6%; right:6%; top:50%; height:2px; transform:translateY(-1px); background:linear-gradient(90deg,#31DDD0,#8E6BFF);}
.mf-zig > li{display:grid; grid-template-rows:1fr 44px 1fr; align-items:end;}
.mf-zig > li:nth-child(even){align-items:start;}
.mf-zig .mf-node{grid-row:2; align-self:center; box-shadow:0 0 0 6px #F1F3F8;}
.mf-zig .mf-tcard{margin:0;}
.mf-zig > li:nth-child(odd) .mf-tcard{grid-row:1; margin-bottom:14px;}
.mf-zig > li:nth-child(even) .mf-tcard{grid-row:3; margin-top:14px;}
.mf-zig .mf-tcard p{margin-top:10px; font-size:13px; line-height:1.5; color:#444C58;}

/* ── P2 s4: automation run log ── */
.mf-run{border-radius:18px; background:#fff; color:#0F1319; overflow:hidden; box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08);}
.mf-run-h{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid #EDF0F4; background:#FBFCFD;}
.mf-run-h b{font-size:15px; font-weight:800;}
.mf-run-h span{font-size:11.5px; font-weight:600; color:#8A93A0;}
.mf-run ol{list-style:none; padding:6px 20px 14px;}
.mf-run li{display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:12px; align-items:start; padding:13px 0; border-top:1px solid #F1F3F6;}
.mf-run li:first-child{border-top:0;}
.mf-run li > i{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:#F4F6F8; color:#5B27CC;}
.mf-run li > i svg{width:15px; height:15px;}
.mf-run li > div > b{display:block; font-size:13.5px; font-weight:800;}
.mf-run li > div > span{display:block; margin-top:3px; font-size:12px; line-height:1.5; color:#59626F;}
.mf-tag{padding:3px 9px; border-radius:999px; font-size:10.5px; font-weight:700; white-space:nowrap;}
.mf-tag.a{background:#EFEAFF; color:#5F33DE;}
.mf-tag.y{background:#E4F7F4; color:#0A8278;}

/* ── P3 hero: overview dashboard ── */
.mf-ov{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:12px;}
.mf-mini{padding:12px; border:1px solid #EDF0F4; border-radius:12px; min-width:0;}
.mf-mini > b{display:block; font-size:12px; font-weight:800; margin-bottom:6px;}
.mf-mr{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 0; border-top:1px solid #F1F3F6; font-size:11px;}
.mf-mr:first-of-type{border-top:0;}
.mf-mr > span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mf-mr .mk-badge{font-size:9.5px; padding:2px 7px;}
.mf-mbar{margin:4px 0 8px;}
.mf-mbar .mk-bar{height:5px;}
.mf-mbar > span{display:flex; justify-content:space-between; gap:6px; margin-bottom:4px; font-size:10.5px;}
.mf-mbar > span b{font-weight:700;}
.mf-mbar > span small{color:#8A93A0; white-space:nowrap;}

/* ── P3 s2: system canvas ── */
.mf-canvas{margin-top:48px; padding:26px 22px 22px; background:#fff; border:1px solid #E3E7EE; border-radius:22px;
  box-shadow:0 1px 2px rgba(11,13,16,.04), 0 34px 70px -40px rgba(34,41,58,.35);}
.mf-rail{position:relative; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px;}
.mf-rail::before{content:""; position:absolute; left:10%; right:10%; top:17px; height:2px; background:linear-gradient(90deg,#31DDD0,#8E6BFF);}
.mf-col{min-width:0; text-align:center;}
.mf-col .mf-node{box-shadow:0 0 0 6px #fff;}
.mf-col h3{margin-top:12px; font-size:15px; font-weight:800; letter-spacing:-.01em; color:#0B0D10;}
.mf-col p{margin-top:4px; font-size:12.5px; line-height:1.45; color:#59626F; min-height:36px;}
.mf-col .mk-ui{margin-top:12px; text-align:left;}

/* ── P3 s3: three linked panels ── */
.mf-link3{display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr); align-items:center; margin-top:48px;}
.mf-arrow{position:relative; height:2px; background:var(--grad); box-shadow:0 0 14px rgba(49,221,208,.55);}
.mf-arrow::after{content:""; position:absolute; right:-2px; top:50%; width:8px; height:8px; border-top:2px solid #8E6BFF; border-right:2px solid #8E6BFF; transform:translateY(-50%) rotate(45deg);}
.mf-link3 .mf-panel{padding:18px; height:100%;}
.mf-lr{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 8px; margin:0 -8px; font-size:12px; border-top:1px solid #F1F3F6;}
.mf-lr > span > b{display:block; font-weight:700;}
.mf-lr > b{font-variant-numeric:tabular-nums;}
.mf-lr.mk-hl{border-top-color:transparent;}
.mf-cap{margin-top:10px; font-size:11.5px; line-height:1.5; color:#5F33DE; font-weight:600;}

/* ── P3 s4: who does what ── */
.mf-who{margin-top:44px; background:#fff; border:1px solid #E3E7EE; border-radius:20px; overflow:hidden;
  box-shadow:0 1px 2px rgba(11,13,16,.04), 0 30px 60px -36px rgba(34,41,58,.32);}
.mf-who-r{display:grid; grid-template-columns:52px minmax(0,.9fr) minmax(0,1.6fr) 150px; gap:16px; align-items:center; padding:16px 22px; border-top:1px solid #EDF0F4;}
.mf-who-r:first-child{border-top:0; background:#FBFCFD; padding-top:12px; padding-bottom:12px; font-size:11px; font-weight:700; color:#8A93A0; text-transform:uppercase; letter-spacing:.08em;}
.mf-who-r > i{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(15,163,177,.11), rgba(91,39,204,.11)); color:#5B27CC;}
.mf-who-r > i svg{width:18px; height:18px;}
.mf-who-r > b{font-size:15px; font-weight:800; color:#0B0D10;}
.mf-who-r > span{font-size:14px; line-height:1.55; color:#444C58;}
.mf-who-r > em{justify-self:start; font-style:normal;}

/* ── P3 s5: centered tools ── */
.mf-tools3{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) minmax(0,.8fr); gap:24px; align-items:center; margin-top:48px;}

/* ── responsive ── */
@media (max-width:1180px){
  .mf-annot{grid-template-columns:1fr; gap:40px;}
  .mf-strip{grid-template-columns:1fr 1fr;}
  .mf-strip > div:first-child{grid-column:1 / -1;}
  .mf-zig{grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:0;}
  .mf-zig::before{display:none;}
  .mf-zig > li, .mf-zig > li:nth-child(even){grid-template-rows:auto auto; align-items:start;}
  .mf-zig .mf-node{grid-row:1;}
  .mf-zig > li:nth-child(odd) .mf-tcard, .mf-zig > li:nth-child(even) .mf-tcard{grid-row:2; margin:14px 0 24px;}
  .mf-rail{grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:26px;}
  .mf-rail::before{display:none;}
  .mf-link3{grid-template-columns:1fr; gap:0;}
  .mf-arrow{width:2px; height:40px; margin:0 auto;}
  .mf-arrow::after{right:auto; left:50%; top:auto; bottom:-2px; transform:translateX(-50%) rotate(135deg);}
  .mf-tools3{grid-template-columns:1fr 1fr;}
  .mf-tools3 > .mk-slack{grid-column:1 / -1; grid-row:1;}
}
@media (max-width:1020px){
  .mf-cov{grid-template-columns:1fr;}
  .mf-who-r{grid-template-columns:44px minmax(0,1fr) auto;}
  .mf-who-r > span{grid-column:2 / -1;}
  .mf-who-r:first-child{display:none;}
}
@media (max-width:760px){
  .mf-kpis{grid-template-columns:1fr 1fr;}
  .mf-ov{grid-template-columns:1fr;}
  .mf-vt .hm, .mf-ov .hm{display:none;}
  .mf-vt th, .mf-vt td{padding:10px 5px; white-space:normal;}
  .mf-track{grid-template-columns:1fr; gap:0;}
  .mf-track::before{left:17px; right:auto; top:0; bottom:0; width:2px; height:auto; background:linear-gradient(180deg,#31DDD0,#8E6BFF);}
  .mf-track > li, .mf-track > li:nth-child(even){display:grid; grid-template-columns:36px minmax(0,1fr); gap:14px; padding:0 0 18px;}
  .mf-track > li:nth-child(even) .mf-node{margin-top:0;}
  .mf-node{margin:0;}
  .mf-tcard{margin-top:0;}
  .mf-strip{grid-template-columns:1fr;}
  .mf-zig{grid-template-columns:1fr;}
  .mf-rail{grid-template-columns:1fr;}
  .mf-col p{min-height:0;}
  .mf-nums{grid-template-columns:1fr 1fr;}
  .mf-tools3{grid-template-columns:1fr;}
  .mf-who-r{padding:14px 16px;}
  .mf-run li{grid-template-columns:30px minmax(0,1fr);}
  .mf-run li > em{grid-column:2;}
  .mf-math{padding:20px 16px;}
}

/* fixes after measuring */
@media (max-width:1100px){
  .mf-track{grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:0;}
  .mf-track::before{display:none;}
  .mf-track > li:nth-child(even){padding-top:0;}
  .mf-track > li:nth-child(even) .mf-node{margin-top:0;}
  .mf-track > li{padding-bottom:22px;}
}
@media (max-width:900px){ .mf-app .mk-tbl .hm{display:none;} }
@media (max-width:760px){
  .mf-vt .mk-badge, .mf-app .mk-tbl .mk-badge, .md .mk-tbl .mk-badge{white-space:normal; text-align:center; padding:3px 7px; font-size:10px;}
  .mf-vt .mk-badge i, .mf-app .mk-tbl .mk-badge i, .md .mk-tbl .mk-badge i{display:none;}
  .mf-pd{padding:18px 14px;}
  .mf-vt th .mf-num{display:none;}
}
@media (max-width:760px){
  .mf-track{grid-template-columns:1fr; gap:0;}
  .mf-track::before{display:block;}
  .mf-track > li, .mf-track > li:nth-child(even){display:grid; grid-template-columns:36px minmax(0,1fr); gap:14px; padding:0 0 18px;}
  .mf-tcard{min-width:0;}
  .mf-tcard .mk-ui-row{flex-wrap:wrap;}
}

/* ── IMS hero: full dashboard ── */
.md{border-radius:18px; overflow:hidden; background:#fff; color:#0F1319;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(142,107,255,.12), 0 0 90px -20px rgba(91,39,204,.38);}
.md-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; background:#0F1218; border-bottom:1px solid rgba(255,255,255,.06);}
.md-top-l{display:flex; align-items:center; gap:10px; min-width:0;}
.md-brand{display:flex; align-items:center; gap:7px;}
.md-brand img{height:15px; width:auto;}
.md-brand b{font-size:10.5px; font-weight:800; letter-spacing:.16em; color:#fff;}
.md-div{width:1px; height:16px; background:rgba(255,255,255,.14);}
.md-crumb{font-size:11.5px; font-weight:700; color:#fff; white-space:nowrap;}
.md-crumb span{font-weight:500; color:rgba(245,246,248,.55);}
.md-top-r{display:flex; align-items:center; gap:10px;}
.md-search{display:flex; align-items:center; gap:7px; padding:5px 9px; border-radius:8px; background:rgba(255,255,255,.07); color:rgba(245,246,248,.55); font-size:10.5px; white-space:nowrap;}
.md-search svg{width:12px; height:12px;}
.md-search kbd{padding:1px 5px; border-radius:4px; background:rgba(255,255,255,.1); font-family:inherit; font-size:9.5px;}
.md-bell{position:relative; color:rgba(245,246,248,.7);}
.md-bell svg{width:15px; height:15px;}
.md-bell i{position:absolute; top:-1px; right:-1px; width:6px; height:6px; border-radius:50%; background:#E5484D; box-shadow:0 0 0 2px #0F1218;}
.md-av{width:24px; height:24px; border-radius:50%; background:var(--grad); color:#07110F; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center;}
.md-body{display:grid; grid-template-columns:150px minmax(0,1fr);}
.md-side{display:flex; flex-direction:column; background:#0F1218; padding:12px 10px;}
.md-side-l{padding:2px 8px 8px; font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,246,248,.38);}
.md-side > span{display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px; font-size:11.5px; font-weight:600; color:rgba(245,246,248,.62);}
.md-side > span svg{width:14px; height:14px; flex:none;}
.md-side > span em{margin-left:auto; padding:1px 6px; border-radius:99px; background:rgba(255,255,255,.1); font-style:normal; font-size:9.5px; font-weight:700; color:#fff;}
.md-side > span em.w{background:rgba(224,160,42,.22); color:#F2C46A;}
.md-side > span.on{background:rgba(255,255,255,.08); color:#fff;}
.md-sync{margin-top:auto; display:flex; align-items:center; gap:6px; padding:12px 8px 2px; font-size:10px; color:rgba(245,246,248,.5);}
.md-sync i{width:6px; height:6px; border-radius:50%; background:#31DDD0; box-shadow:0 0 8px #31DDD0;}
.md-main{padding:16px; background:#F7F8FB; min-width:0;}
.md-head{display:flex; justify-content:space-between; align-items:flex-end; gap:10px;}
.md-head b{display:block; font-size:17px; font-weight:800; letter-spacing:-.015em;}
.md-head small{display:block; margin-top:2px; font-size:10.5px; color:#8A93A0;}
.md-chips{display:flex; gap:6px;}
.md-chips span{display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:7px; border:1px solid #E1E5EB; background:#fff; font-size:10px; font-weight:600; color:#59626F; white-space:nowrap;}
.md-chips span.live{border-color:rgba(10,130,120,.25); color:#0A8278;}
.md-chips span.live i{width:6px; height:6px; border-radius:50%; background:#0FA396;}
.md .mf-kpis{margin-top:12px;}
.md .mf-kpi{background:#fff;}
.md-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:10px; margin-top:10px;}
.md-card{padding:12px 12px 8px; border:1px solid #E6E9EF; border-radius:12px; background:#fff; min-width:0;}
.md-card-h{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:4px;}
.md-card-h b{font-size:12px; font-weight:800;}
.md-card-h span{font-size:10px; font-weight:600; color:#5B27CC; white-space:nowrap;}
.md .mk-tbl{margin-top:2px; font-size:11px;}
.md .mk-tbl th{font-size:9.5px; padding:6px 5px;}
.md .mk-tbl td{padding:7px 5px;}
.md .mk-badge{font-size:9.5px; padding:2px 7px;}
.md-q{padding:7px 0; border-top:1px solid #F1F3F6;}
.md-q:first-of-type{border-top:0;}
.md-q-h{display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:11px;}
.md-q-h b{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.md-q-h small{font-size:10px; color:#8A93A0; white-space:nowrap;}
.md-q .mk-bar{height:5px; margin-top:6px;}
.md-q .mk-bar.x i{background:#E5484D;}
.md-q-n{margin-top:4px; font-size:10px; color:#8A93A0;}
.md-q-n.x{color:#AE3529; font-weight:600;}
.md-po{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; padding:7px 0; border-top:1px solid #F1F3F6; font-size:11px;}
.md-po:first-of-type{border-top:0;}
.md-po b{font-weight:700;}
.md-po small{display:block; font-size:10px; color:#8A93A0;}
.md-po .mk-bar{grid-column:1 / -1; height:5px;}
.md-health .mk-bar{display:flex; height:8px; margin:8px 0 10px; background:#EDF0F4;}
.md-health .mk-bar i{border-radius:0;}
.md-lg{display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; font-size:10.5px;}
.md-lg div{display:flex; justify-content:space-between; gap:6px; padding-bottom:6px;}
.md-lg span{display:flex; align-items:center; gap:6px; color:#59626F; white-space:nowrap;}
.md-lg span i{width:8px; height:8px; border-radius:2px;}
.md-lg b{font-weight:800; font-variant-numeric:tabular-nums;}

@media (max-width:1180px){ .md-search span{display:none;} }
@media (max-width:900px){
  .md-body{grid-template-columns:1fr;}
  .md-side{display:none;}
  .md .mk-tbl .hm{display:none;}
}
@media (max-width:760px){
  .md-top-r .md-search{display:none;}
  .md-main{padding:12px 10px;}
  .md-head{flex-wrap:wrap;}
  .md-grid{grid-template-columns:1fr;}
  .md-lg{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .md-lg{grid-template-columns:1fr;}
  .md-row2{display:none !important;}
}
.md .mk-tbl{table-layout:fixed;}
.md .mk-tbl th:first-child{width:44%;}
.md .mk-tbl td:first-child{white-space:normal;}
.md .mk-tbl td:first-child b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.md .mk-tbl td:first-child .mf-sub{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.md-lg{grid-template-columns:1fr;}
.md .mk-tbl th:first-child{width:38%;}
.md .mk-tbl th:last-child{width:24%;}
@media (max-width:1300px){ .md .mk-tbl .hm{display:none;} }
@media (max-width:760px){
  .md .mk-tbl th:first-child{width:46%;}
  .md .mk-tbl th:last-child{width:26%;}
  .md .mk-tbl td:first-child b, .md .mk-tbl td:first-child .mf-sub{white-space:normal; overflow:visible;}
  .md .mk-tbl td, .md .mk-tbl th{padding:7px 3px;}
}

/* IMS hero: fit the viewport */
.md-hero-v h1.headline{font-size:46px;}
.md .mk-tbl th{text-transform:none; letter-spacing:0; font-size:10px;}
.md .mk-tbl th:first-child{width:42%;}
.md .mk-tbl th:last-child{width:22%;}
.md-main{padding:14px;}
.md .mf-kpis{margin-top:10px;}
.md .mf-kpi{padding:9px 10px;}
.md .mf-kpi > b{font-size:17px;}
.md-hl{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:10.5px; color:#59626F;}
.md-hl span{display:inline-flex; align-items:center; gap:5px; white-space:nowrap;}
.md-hl i{width:8px; height:8px; border-radius:2px;}
.md-hl b{font-weight:800; color:#0F1319;}
@media (max-width:1100px){ .md-hero-v h1.headline{font-size:42px;} }
@media (max-width:620px){ .md-hero-v h1.headline{font-size:34px;} }
.md-hero-v h1.headline{font-size:42px; line-height:1.08;}
.md .mk-tbl th{padding:6px 3px;}
.md .mk-tbl th:first-child{width:36%; padding-left:5px;}
@media (max-width:1100px){ .md-hero-v h1.headline{font-size:40px;} }
@media (max-width:620px){ .md-hero-v h1.headline{font-size:34px;} }
@media (max-width:1400px){ .md .mk-tbl .hm{display:none;} }
@media (max-width:1320px){ .md-hero-v h1.headline{font-size:39px;} }