/* Executive visuals — charts/infographics for CFO/CEO buyers.
   Brand: charcoal / cream / orange (#f97316) + existing primary blue/maroon.
   Depends on: included from head.php alongside ittr.css + leadgen.css */

.exec-viz {
  --viz-ink: #0f172a;
  --viz-muted: #64748b;
  --viz-cream: #f8fafc;
  --viz-panel: #ffffff;
  --viz-orange: #f97316;
  --viz-blue: #2563eb;
  --viz-maroon: #7b1a2b;
  --viz-border: #e2e8f0;
  margin: 28px 0 8px;
}
.exec-viz--on-dark {
  --viz-ink: #f1f5f9;
  --viz-muted: #94a3b8;
  --viz-cream: rgba(15, 23, 42, 0.55);
  --viz-panel: rgba(30, 41, 59, 0.9);
  --viz-border: #334155;
}
.exec-viz-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--viz-ink);
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}
.exec-viz-caption {
  font-size: 12px;
  color: var(--viz-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}
.exec-viz-grid {
  display: grid;
  gap: 16px;
}
.exec-viz-grid--2 { grid-template-columns: 1.2fr 1fr; }
.exec-viz-grid--3 { grid-template-columns: repeat(3, 1fr); }
.exec-viz-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .exec-viz-grid--2,
  .exec-viz-grid--3,
  .exec-viz-grid--4 { grid-template-columns: 1fr; }
}

.exec-card {
  background: var(--viz-panel);
  border: 1px solid var(--viz-border);
  border-radius: 12px;
  padding: 18px 18px 16px;
}
.exec-card h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--viz-muted);
  margin: 0 0 12px;
}

/* Horizontal bars */
.exec-bars { display: flex; flex-direction: column; gap: 12px; }
.exec-bar-row { display: grid; grid-template-columns: 110px 1fr 64px; gap: 10px; align-items: center; }
.exec-bar-label { font-size: 12px; color: var(--viz-ink); font-weight: 600; line-height: 1.3; }
.exec-bar-track {
  height: 14px; background: rgba(148,163,184,0.25); border-radius: 999px; overflow: hidden;
}
.exec-bar-fill {
  height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ea580c, #f97316);
  min-width: 4px;
}
.exec-bar-fill--blue { background: linear-gradient(90deg, #1d4ed8, #2563eb); }
.exec-bar-fill--maroon { background: linear-gradient(90deg, #5c1320, #7b1a2b); }
.exec-bar-val { font-size: 12px; font-weight: 700; color: var(--viz-ink); text-align: right; }

/* Partner path */
.exec-path {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
}
@media (max-width: 700px) {
  .exec-path { grid-template-columns: 1fr; }
  .exec-path-arrow { transform: rotate(90deg); justify-self: center; }
}
.exec-path-step {
  background: var(--viz-cream);
  border: 1px solid var(--viz-border);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
}
.exec-path-step strong {
  display: block;
  color: var(--viz-orange);
  font-size: 14px;
  margin-bottom: 4px;
}
.exec-path-step span {
  display: block;
  font-size: 12px;
  color: var(--viz-muted);
  line-height: 1.45;
}
.exec-path-arrow {
  color: var(--viz-orange);
  font-size: 22px;
  font-weight: 700;
  align-self: center;
}

/* How-it-works strip */
.exec-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 900px) { .exec-flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .exec-flow { grid-template-columns: 1fr; } }
.exec-flow-step {
  position: relative;
  background: var(--viz-cream);
  border: 1px solid var(--viz-border);
  border-radius: 12px;
  padding: 16px 14px 14px;
}
.exec-flow-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--viz-blue); color: #fff;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.exec-flow-step h4 {
  font-size: 14px; font-weight: 700; color: var(--viz-ink);
  text-transform: none; letter-spacing: 0; margin: 0 0 6px;
}
.exec-flow-step p { font-size: 12px; color: var(--viz-muted); margin: 0; line-height: 1.5; }
.exec-flow-step .exec-flow-meta {
  margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--viz-orange);
}

/* Deliverable compare */
.exec-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px) { .exec-compare { grid-template-columns: 1fr; } }
.exec-compare-col {
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--viz-border);
}
.exec-compare-col--bad {
  background: #fff7ed;
  border-color: #fed7aa;
}
.exec-compare-col--good {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.exec-compare-col h4 {
  margin: 0 0 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: var(--viz-ink);
}
.exec-compare-col ul {
  margin: 0; padding-left: 18px;
  font-size: 13px; color: #334155; line-height: 1.55;
}
.exec-compare-col--bad h4 { color: #9a3412; }
.exec-compare-col--good h4 { color: #1e40af; }

/* Deliverable chips */
.exec-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.exec-chip {
  background: var(--viz-cream);
  border: 1px solid var(--viz-border);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--viz-ink);
}
.exec-chip strong { color: var(--viz-orange); }

/* SVG chart helpers */
.exec-svg-wrap { width: 100%; overflow: hidden; }
.exec-svg-wrap svg { width: 100%; height: auto; display: block; }

/* Service page width bump for charts */
.section .container.exec-wide { max-width: 960px; }

.pots-section .exec-viz-container { display: block !important; }