/* Invoxity menu, "A+" dropdowns (see mega-preview.js). The list uses the
   header's own colours, so it follows light and dark; the preview is always dark. */
.ivx-panel .mp { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); border: 1px solid var(--ivx-line); background: var(--ivx-panel); }
.ivx-panel:has(.mp) { padding: 18px 24px 24px; }
.mp-list { display: flex; flex-direction: column; padding: 18px 14px 0; }
.mp-kick { padding: 0 12px 10px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; color: var(--ivx-accent-text); }
.mp-list ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.mp-list ul.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ivx-header .mp-item { display: flex; gap: 12px; padding: 11px 12px; border-radius: 8px; color: var(--ivx-text); transition: background-color .15s ease; }
.mp-item i { flex: none; padding-top: 2px; font-style: normal; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--ivx-muted); }
.mp-item b { display: block; font-size: 15px; font-weight: 600; }
.mp-item b em { margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--ivx-accent); color: #1a1a1a; font-style: normal; font-size: 10px; font-weight: 700; vertical-align: 2px; }
.mp-item small { display: block; margin-top: 1px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 12.5px; line-height: 1.4; color: var(--ivx-muted); }
.mp-item:hover, .mp-item.on { background: var(--ivx-card); }
.mp-item.on { box-shadow: inset 3px 0 0 var(--ivx-accent); }
.mp-item.on i, .mp-item[aria-current="page"] i { color: var(--ivx-accent-text); }
.mp-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; padding: 14px 12px; border-top: 1px solid var(--ivx-line); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 13px; color: var(--ivx-muted); }
.ivx-header .mp-foot a { font-weight: 600; color: var(--ivx-accent-text); }
.ivx-header .mp-foot a:hover { text-decoration: underline; }

.mp-prev { display: flex; flex-direction: column; min-height: 400px; background: #0f0f0f; color: #f3f3f3; overflow: hidden; }
.mp-prev canvas { display: block; width: 100%; height: 170px; border-bottom: 1px solid #222; }
.mp-body { display: grid; align-content: start; gap: 10px; padding: 18px 22px 20px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; animation: mp-in .35s ease; }
@keyframes mp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mp-body small { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; color: #ff7b5e; }
.mp-body h3 { margin: 0; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 23px; letter-spacing: -.03em; line-height: 1.1; color: #ffffff; }
.mp-body p { font-size: 13.5px; line-height: 1.45; color: #bdbdbd; }
.mp-body p b { color: #ffffff; }
.ivx-header .mp-go { font-family: "Poppins", system-ui, sans-serif; font-size: 14px; font-weight: 600; color: #ff7b5e; }
.ivx-header .mp-go:hover { text-decoration: underline; }
/* a service's typical plan */
.mp-g { display: grid; gap: 4px; }
.mp-g div { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 11.5px; color: #cfcfcf; }
.mp-g div span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-g u { position: relative; display: block; height: 7px; background: #1d1d1d; text-decoration: none; }
.mp-g u b { position: absolute; top: 0; bottom: 0; background: #555; }
.mp-g u b.a { background: #ff7b5e; }
.mp-g u b.s { background: repeating-linear-gradient(90deg, #ff7b5e 0 8px, transparent 8px 11px); }
.mp-g u b.d { background: repeating-linear-gradient(90deg, #555 0 4px, transparent 4px 7px); }
.mp-g .wk { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; color: #8a8a8a; }
/* an industry's workflow, lighting up */
.mp-flow { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-flow span { padding: 6px 10px; border: 1px solid #333; font-size: 12.5px; font-weight: 600; color: #bdbdbd; transition: all .3s; }
.mp-flow span.on { background: #ff7b5e; border-color: #ff7b5e; color: #141414; }
.mp-flow span.done { border-color: #ff7b5e; color: #f3f3f3; }
/* product cards */
.mp-card { display: grid; gap: 7px; padding: 12px 14px; background: #ffffff; color: #1d1d1d; border-top: 3px solid #ff7b5e; font-size: 12.5px; }
.mp-card b { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: -.02em; }
.mp-card .kv { display: grid; gap: 1px; background: #e7e7e7; }
.mp-card .kv span { display: flex; justify-content: space-between; padding: 5px 8px; background: #fafafa; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; }
.mp-card .kv em { font-style: normal; color: #2e7d4f; }
.mp-card .kv em.w { color: #8a5d00; }
.mp-card .ctr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.mp-card .ctr span { padding: 6px 8px; background: #f5f5f5; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; color: #6b6b6b; }
.mp-card .ctr strong { display: block; font-family: "Poppins", system-ui, sans-serif; font-size: 20px; color: #1d1d1d; }
.mp-card .gate { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border: 1px solid #e6b13a; background: #fff8e6; font-weight: 600; }
.mp-card .gate i { padding: 3px 8px; background: #e6b13a; font-style: normal; font-size: 11px; font-weight: 700; }
.mp-card .bub { justify-self: end; padding: 7px 10px; border-radius: 12px 12px 2px 12px; background: #13995a; color: #ffffff; font-weight: 600; }
.mp-card .bub.chef { justify-self: start; border-radius: 12px 12px 12px 2px; background: #f1f1f1; color: #1d1d1d; font-weight: 500; }
/* company lists: roles and office times */
.mp-rows { display: grid; gap: 4px; }
.mp-rows span { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid #2a2a2a; font-size: 12.5px; }
.mp-rows em { font-style: normal; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: #8a8a8a; }
.mp-rows em.open { color: #5cb27e; }
@media (prefers-reduced-motion: reduce) { .mp-body { animation: none; } }