/* IVERA — Rich Visualizations
   Premium, native SVG/CSS visualizations to replace text-heavy sections.
   Used across the proposal for methodology, platform overview, journey flows. */

/* ============================================================
   BPM LIFECYCLE WHEEL — Process ⇄ Application loop
   Used in Methodology (Section 10)
============================================================ */
.viz-bpm-wheel {
  width: 100%;
  max-width: 540px;
  margin: 14px auto;
  display: block;
}
.viz-bpm-wheel .ring { fill: none; stroke: var(--line); stroke-width: 1.5; }
.viz-bpm-wheel .ring-arrow { fill: var(--accent); }
.viz-bpm-wheel .hub {
  fill: var(--ink);
  rx: 8; ry: 8;
}
.viz-bpm-wheel .hub-alt { fill: var(--accent); }
.viz-bpm-wheel .hub-label {
  fill: white;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-anchor: middle;
  text-transform: uppercase;
}
.viz-bpm-wheel .node {
  fill: var(--paper-2);
  stroke: var(--line);
  stroke-width: 1;
}
.viz-bpm-wheel .node-label {
  fill: var(--ink);
  font-size: 9.5px;
  font-weight: 600;
  text-anchor: middle;
}
.viz-bpm-wheel .center-pill {
  fill: var(--paper);
  stroke: var(--line);
}
.viz-bpm-wheel .center-pill-label {
  fill: var(--ink-2);
  font-size: 10px;
  font-weight: 600;
  text-anchor: middle;
}

/* ============================================================
   PLATFORM OVERVIEW — 4-column cards with iconography
   Used in Solution Overview / Capabilities
============================================================ */
.viz-platform-overview {
  background: linear-gradient(180deg, oklch(0.16 0.02 252) 0%, oklch(0.13 0.02 252) 100%);
  border-radius: 6px;
  padding: 14px;
  margin: 10px 0;
  color: white;
}
.viz-platform-overview .vpo-title {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: oklch(0.7 0.04 245);
  text-align: center;
  padding: 4px 0 10px;
  border-bottom: 1px solid oklch(0.30 0.02 252);
  margin-bottom: 12px;
}
.viz-platform-overview .vpo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.viz-platform-overview .vpo-card {
  background: oklch(0.20 0.02 252);
  border: 1px solid oklch(0.30 0.02 252);
  border-radius: 4px;
  padding: 10px 10px 12px;
}
.viz-platform-overview .vpo-card .h {
  font-size: 11.5px;
  font-weight: 700;
  color: white;
  margin-bottom: 3px;
}
.viz-platform-overview .vpo-card .sub {
  font-size: 9px;
  color: oklch(0.72 0.03 252);
  margin-bottom: 8px;
  line-height: 1.3;
}
.viz-platform-overview .vpo-card .items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
}
.viz-platform-overview .vpo-item {
  background: oklch(0.16 0.02 252);
  border: 1px solid oklch(0.28 0.04 252);
  border-radius: 3px;
  padding: 5px 7px;
  font-size: 9px;
  color: oklch(0.85 0.02 252);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.viz-platform-overview .vpo-item .swatch {
  width: 6px; height: 6px; border-radius: 1px;
  flex-shrink: 0;
}
.viz-platform-overview .vpo-item.ui .swatch     { background: oklch(0.70 0.16 25); }
.viz-platform-overview .vpo-item.logic .swatch  { background: oklch(0.78 0.16 80); }
.viz-platform-overview .vpo-item.proc .swatch   { background: oklch(0.65 0.14 165); }
.viz-platform-overview .vpo-item.data .swatch   { background: oklch(0.62 0.14 240); }
.viz-platform-overview .vpo-item.ai .swatch     { background: oklch(0.62 0.14 295); }
.viz-platform-overview .vpo-footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.viz-platform-overview .vpo-pill {
  background: oklch(0.24 0.02 252);
  border: 1px solid oklch(0.32 0.02 252);
  text-align: center;
  padding: 5px;
  font-size: 9px;
  font-weight: 600;
  color: oklch(0.82 0.02 252);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 3px;
}

/* ============================================================
   JOURNEY FLOW — horizontal step diagram with arrows
============================================================ */
.viz-journey {
  display: grid;
  grid-template-columns: repeat(var(--steps, 7), 1fr);
  gap: 0;
  margin: 8px 0;
  position: relative;
}
.viz-journey .jrn-step {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 5px 5px 6px;
  text-align: center;
  position: relative;
  margin-right: 10px;
}
.viz-journey .jrn-step:last-child { margin-right: 0; }
.viz-journey .jrn-step::after {
  content: "";
  position: absolute;
  right: -10px; top: 50%;
  width: 10px; height: 1px;
  background: var(--accent);
}
.viz-journey .jrn-step::before {
  content: "";
  position: absolute;
  right: -5px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid var(--accent);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  z-index: 2;
}
.viz-journey .jrn-step:last-child::after,
.viz-journey .jrn-step:last-child::before { display: none; }
.viz-journey .jrn-icon {
  width: 22px; height: 22px;
  margin: 0 auto 3px;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.96 0.02 240);
  border-radius: 50%;
  color: var(--accent);
}
.viz-journey .jrn-icon svg { width: 13px; height: 13px; }
.viz-journey .jrn-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 7px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.viz-journey .jrn-label {
  font-size: 8.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
}

/* ============================================================
   LAYERED ARCHITECTURE — Tiered system view with colored zones
   Used to enhance the architecture section
============================================================ */
.viz-layered-arch {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin: 12px 0;
  background: var(--paper-2);
}
.viz-layered-arch .lay-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.viz-layered-arch .lay-row:last-child { border-bottom: 0; }
.viz-layered-arch .lay-side {
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: oklch(0.97 0.005 252);
  border-right: 1px solid var(--line);
}
.viz-layered-arch .lay-side .nm {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.viz-layered-arch .lay-side .ds {
  font-size: 9px;
  color: var(--ink-3);
  line-height: 1.35;
}
.viz-layered-arch .lay-body {
  padding: 8px 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
  gap: 5px;
}
.viz-layered-arch .lay-cell {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 6px 7px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 5px;
}
.viz-layered-arch .lay-cell.accent { background: oklch(0.95 0.025 240); border-color: oklch(0.82 0.06 240); color: var(--ink); }
.viz-layered-arch .lay-cell.violet { background: oklch(0.95 0.025 295); border-color: oklch(0.82 0.06 295); color: var(--ink); }
.viz-layered-arch .lay-cell.warn   { background: oklch(0.97 0.04 65);  border-color: oklch(0.86 0.06 65); color: var(--ink); }
.viz-layered-arch .lay-cell.good   { background: oklch(0.96 0.04 155); border-color: oklch(0.85 0.05 155); color: var(--ink); }
.viz-layered-arch .lay-cell .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.6;
  flex-shrink: 0;
}

/* Tier shading by row */
.viz-layered-arch .lay-row.t-user .lay-side { background: oklch(0.96 0.04 155 / 0.4); }
.viz-layered-arch .lay-row.t-channel .lay-side { background: oklch(0.96 0.012 240 / 0.4); }
.viz-layered-arch .lay-row.t-app .lay-side { background: oklch(0.95 0.025 240 / 0.3); }
.viz-layered-arch .lay-row.t-ai .lay-side { background: oklch(0.95 0.025 295 / 0.3); }
.viz-layered-arch .lay-row.t-data .lay-side { background: oklch(0.97 0.04 65 / 0.3); }
.viz-layered-arch .lay-row.t-sec .lay-side { background: oklch(0.94 0.012 252 / 0.5); }

/* ============================================================
   DELIVERY MODEL CYCLE — process loop with phase callouts
============================================================ */
.viz-delivery-cycle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 12px 0;
  align-items: stretch;
}
.viz-delivery-cycle .vdc-side {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 6px;
  overflow: hidden;
}
.viz-delivery-cycle .vdc-header {
  padding: 8px 12px;
  background: var(--ink);
  color: white;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.viz-delivery-cycle .vdc-body {
  padding: 10px;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.viz-delivery-cycle .vdc-cell {
  background: oklch(0.97 0.005 252);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 7px 8px;
}
.viz-delivery-cycle .vdc-cell .vc-h {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 2px;
}
.viz-delivery-cycle .vdc-cell .vc-l {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.viz-delivery-cycle .vdc-cell .vc-s {
  font-size: 9px;
  color: var(--ink-3);
  margin-top: 3px;
  line-height: 1.3;
}

/* ============================================================
   SWIM LANE — Business / IT split with numbered steps
============================================================ */
.viz-swim {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 12px 0;
  background: var(--paper-2);
  overflow: hidden;
}
.viz-swim .lane {
  display: grid;
  grid-template-columns: 100px 1fr;
  border-bottom: 1px solid var(--line);
}
.viz-swim .lane:last-child { border-bottom: 0; }
.viz-swim .lane-tag {
  background: var(--ink);
  color: white;
  padding: 14px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.viz-swim .lane.it .lane-tag { background: var(--accent); }
.viz-swim .lane-content {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
}
.viz-swim .lane-step {
  background: oklch(0.97 0.005 252);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 8px;
  position: relative;
}
.viz-swim .lane-step .ix {
  position: absolute;
  top: -7px; left: 7px;
  background: var(--accent);
  color: white;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
}
.viz-swim .lane.it .lane-step .ix { background: var(--ink); }
.viz-swim .lane-step .nm {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 5px;
  line-height: 1.25;
}
.viz-swim .lane-step .desc {
  font-size: 8.5px;
  color: var(--ink-3);
  margin-top: 3px;
  line-height: 1.3;
}


/* ============================================================
   SERVICE FUNNEL — visual reduction (177 -> 44)
============================================================ */
.viz-funnel {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 14px;
  align-items: center;
  margin: 12px 0;
}
.viz-funnel .funnel-side {
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: 12px 14px;
  border-radius: 6px;
}
.viz-funnel .funnel-side .lbl {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin-bottom: 4px;
}
.viz-funnel .funnel-side .v {
  font-size: 38px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.viz-funnel .funnel-side .sub {
  font-size: 10px; color: var(--ink-3); margin-top: 6px; line-height: 1.4;
}
.viz-funnel .funnel-side.before { opacity: 0.7; }
.viz-funnel .funnel-side.after { border-color: var(--accent); border-width: 2px; }
.viz-funnel .funnel-side.after .v { color: var(--accent); }
.viz-funnel .funnel-arrow {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.viz-funnel .funnel-arrow svg { width: 32px; height: 32px; color: var(--accent); }
.viz-funnel .funnel-arrow .delta {
  font-size: 9px; font-weight: 700; color: var(--accent); letter-spacing: 0.08em;
}

/* ============================================================
   RISK HEATMAP — 4x4 grid
============================================================ */
.viz-heatmap {
  display: grid;
  grid-template-columns: 70px repeat(4, 1fr);
  gap: 3px;
  margin: 10px 0;
}
.viz-heatmap .hm-col-h, .viz-heatmap .hm-row-h {
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}
.viz-heatmap .hm-col-h { text-align: center; padding: 5px 4px; }
.viz-heatmap .hm-row-h {
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 8px; line-height: 1.2;
}
.viz-heatmap .hm-cell {
  padding: 7px 6px;
  border-radius: 3px;
  min-height: 50px;
  display: flex; flex-direction: column; gap: 3px;
}
.viz-heatmap .hm-cell.low { background: oklch(0.96 0.04 155); border: 1px solid oklch(0.85 0.06 155); }
.viz-heatmap .hm-cell.med { background: oklch(0.97 0.04 65); border: 1px solid oklch(0.86 0.06 65); }
.viz-heatmap .hm-cell.high { background: oklch(0.95 0.06 25); border: 1px solid oklch(0.82 0.10 25); }
.viz-heatmap .hm-cell.critical { background: oklch(0.75 0.18 25); border: 1px solid oklch(0.55 0.20 25); color: white; }
.viz-heatmap .hm-cell .risk {
  font-size: 8.5px; font-weight: 600; line-height: 1.2;
  padding: 1px 4px; background: rgba(255,255,255,0.55); border-radius: 2px;
}
.viz-heatmap .hm-cell.critical .risk { background: rgba(0,0,0,0.18); color: white; }

/* ============================================================
   PILLARS — Why IVERA differentiator strip
============================================================ */
.viz-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.viz-pillar {
  background: linear-gradient(180deg, var(--paper-2), oklch(0.97 0.005 252));
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 12px 14px;
  position: relative;
}
.viz-pillar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent);
}
.viz-pillar.violet::before { background: var(--accent-2); }
.viz-pillar.good::before { background: var(--good); }
.viz-pillar.warn::before { background: var(--warn); }
.viz-pillar .pillar-num {
  font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 700;
  color: var(--ink-3); letter-spacing: 0.12em; margin-bottom: 6px;
}
.viz-pillar .pillar-h {
  font-size: 14px; font-weight: 700; color: var(--ink);
  line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 5px;
}
.viz-pillar .pillar-body { font-size: 10px; color: var(--ink-2); line-height: 1.45; }
.viz-pillar .pillar-stat {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 6px;
}
.viz-pillar .pillar-stat .v {
  font-size: 18px; font-weight: 700; color: var(--accent);
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.viz-pillar.violet .pillar-stat .v { color: var(--accent-2); }
.viz-pillar.good .pillar-stat .v { color: var(--good); }
.viz-pillar.warn .pillar-stat .v { color: var(--warn); }
.viz-pillar .pillar-stat .l {
  font-size: 9px; color: var(--ink-3); letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600;
}

/* ============================================================
   ORG CHART — vertical hierarchy
============================================================ */
.viz-org { margin: 12px 0; display: flex; flex-direction: column; align-items: center; }
.viz-org .org-row {
  display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; position: relative;
}
.viz-org .org-cell {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 7px 10px; min-width: 95px; text-align: center;
}
.viz-org .org-cell.lead { background: var(--ink); color: white; border-color: var(--ink); min-width: 200px; }
.viz-org .org-cell .role {
  font-size: 7.5px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin-bottom: 2px;
}
.viz-org .org-cell.lead .role { color: rgba(255,255,255,0.6); }
.viz-org .org-cell .name {
  font-size: 9.5px; font-weight: 600; color: var(--ink); line-height: 1.2;
}
.viz-org .org-cell.lead .name { color: white; }
.viz-org .org-h-bracket {
  height: 14px; width: 90%; max-width: 700px;
  border-left: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  border-top: 1px solid var(--line-2);
  margin-bottom: 0;
  position: relative;
}
.viz-org .org-h-bracket::before {
  content: ""; position: absolute; top: -8px; left: 50%; width: 1px; height: 8px; background: var(--line-2);
}


/* ============================================================
   Image classes used in the proposal — sizing & alignment
============================================================ */
.ve-img, .page img:not(.logo-img) {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 12px auto;
  border-radius: 4px;
}
.ve-img.ve-img-small  { max-width: 30%; }
.ve-img.ve-img-medium { max-width: 55%; }
.ve-img.ve-img-large  { max-width: 80%; }
.ve-img.ve-img-full   { max-width: 100%; }

.ve-img.ve-img-left   { margin-left: 0;    margin-right: auto; float: left;  margin-right: 14px; clear: both; }
.ve-img.ve-img-right  { margin-right: 0;   margin-left: auto;  float: right; margin-left: 14px;  clear: both; }
.ve-img.ve-img-center { margin-left: auto; margin-right: auto; float: none; clear: both; }

/* When an image floats left/right, the next paragraph should wrap.
   After the float section, use class .ve-clear on a div to break. */
.ve-clear { clear: both; }

   to reduce font/spacing further. Set on heavy pages.
============================================================ */
.page.compact-page {
  font-size: 10px;
}
.page.compact-page table th,
.page.compact-page table td { padding: 3px 5px; font-size: 9.5px; }
.page.compact-page h1.sec-title { font-size: 22px; margin-bottom: 6px; }
.page.compact-page h2.sub-title { font-size: 14px; margin: 10px 0 4px; }
.page.compact-page p.lead { font-size: 11px; margin-bottom: 6px; }
.page.compact-page p { margin-bottom: 4px; font-size: 10px; }
.page.compact-page .callout { padding: 6px 10px; font-size: 9.5px; margin: 6px 0; }
.page.compact-page .tile { padding: 8px 10px; }
.page.compact-page .tile .v { font-size: 14px; }

.viz-api-hub {
  position: relative;
  height: 320px;
  background: oklch(0.98 0.003 252);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 10px 0;
  overflow: hidden;
}
.viz-api-hub .hub-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 130px; height: 130px;
  background: var(--ink);
  color: white;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  z-index: 2;
  box-shadow: 0 0 0 6px oklch(0.18 0.02 252 / 0.1);
}
.viz-api-hub .hub-center .label {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-bottom: 4px; font-weight: 600;
}
.viz-api-hub .hub-center .name {
  font-size: 13px; font-weight: 700; line-height: 1.15;
}
.viz-api-hub .hub-node {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 5px 9px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  z-index: 1;
}
.viz-api-hub .hub-node.critical {
  border-color: oklch(0.62 0.14 30);
  background: oklch(0.96 0.04 30);
  color: oklch(0.4 0.14 30);
}
.viz-api-hub .hub-node.high {
  border-color: oklch(0.65 0.14 60);
  background: oklch(0.97 0.04 60);
  color: oklch(0.42 0.14 60);
}
.viz-api-hub .hub-node.medium {
  border-color: var(--accent);
  background: oklch(0.97 0.02 240);
  color: var(--accent);
}