/* ═══════════════════════════════════════════════════════════════
   ALYNTE Solutions Detail — VP Engineering (extends product-page.css)
   Shared flow visual system aligned with product-detail.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero layout ── */
.sol-vp-hero--stacked .sol-vp-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 920px;
  grid-template-columns: 1fr;
  gap: 32px;
}
.sol-vp-hero--stacked .sol-vp-hero-head { max-width: 680px; }
.sol-vp-hero--stacked .prod-lead {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
.sol-vp-hero-viz-wrap { width: 100%; max-width: 880px; }
.sol-vp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0;
  align-items: center;
  justify-content: center;
}
.pd-hero .sol-vp-hero-cta .btn-white {
  background: var(--hero-text);
  color: var(--hero-bg);
  border: 1px solid var(--hero-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.pd-hero .sol-vp-hero-cta .btn-white:hover { background: #fff; border-color: #fff; }
.pd-hero .sol-vp-hero-cta .btn-outline-light {
  background: rgba(15, 20, 25, 0.35);
  color: var(--hero-text);
  border: 1px solid rgba(248, 250, 252, 0.45);
}
.pd-hero .sol-vp-hero-cta .btn-outline-light:hover {
  background: rgba(248, 250, 252, 0.08);
  border-color: rgba(248, 250, 252, 0.65);
}
.pd-hero .sol-vp-hero-cta .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Shared VP flow container ── */
.sol-vp-flow {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  isolation: isolate;
}
.sol-vp-decision-viz,
.sol-vp-seq-viz,
.sol-vp-transform-viz {
  width: 100%;
  max-width: 920px;
  margin: 28px auto 0;
  padding: 0;
  border: none;
  background: none;
}
.pd-hero .sol-vp-hero-viz {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  border: none;
  background: none;
  padding: 0;
}

/* SVG connector overlay — matches pd-di-flow-arrows */
.sol-vp-flow-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.sol-vp-flow-conn {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  opacity: 0.55;
}
.sol-vp-flow-signal {
  fill: var(--accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* ── Shared node primitive (product-page rhythm) ── */
.sol-vp-flow-node {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  width: var(--svp-node-w, 132px);
  height: var(--svp-node-h, 84px);
  min-height: var(--svp-node-h, 84px);
  max-height: var(--svp-node-h, 84px);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  flex-shrink: 0;
}
.sol-vp-flow-node .pd-meta-label {
  margin: 0;
  line-height: 1.2;
  color: var(--accent);
}
.sol-vp-flow-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-secondary);
}
.sol-vp-flow-tags li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sol-vp-flow-node:not(.sol-vp-flow-node--seq):not(.sol-vp-flow-node--src) {
  --svp-node-w: 136px;
}
.sol-vp-flow-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sol-vp-flow-support {
  display: block;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-secondary);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Semantic variants — same geometry, token-based emphasis */
.sol-vp-flow-node--hub {
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.06);
}
.sol-vp-flow-node--hub .pd-meta-label { color: var(--accent); }
.sol-vp-flow-node--out {
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.04);
}
.sol-vp-flow-node--compact {
  --svp-node-w: 112px;
  --svp-node-h: 72px;
}
.sol-vp-flow-node--seq {
  --svp-node-w: 108px;
  --svp-node-h: 52px;
  padding: 10px 12px;
  align-items: center;
  text-align: center;
}
.sol-vp-flow-node--seq .sol-vp-flow-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: normal;
  text-align: center;
  width: 100%;
}
.sol-vp-flow-node--src {
  --svp-node-w: 72px;
  --svp-node-h: 40px;
  padding: 8px 10px;
  align-items: center;
}
.sol-vp-flow-node--src .pd-meta-label { display: none; }
.sol-vp-flow-node--src .sol-vp-flow-title {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  width: 100%;
}

/* Anchor points — same model as pd-di-flow-anchor */
.sol-vp-flow-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.sol-vp-flow-anchor--out-r { right: 0; top: 50%; }
.sol-vp-flow-anchor--in-l { left: 0; top: 50%; }
.sol-vp-flow-anchor--out-l { left: 0; top: 50%; }
.sol-vp-flow-anchor--in-r { right: 0; top: 50%; }
.sol-vp-flow-anchor--out-b { bottom: 0; left: 50%; }
.sol-vp-flow-anchor--in-t { top: 0; left: 50%; }

/* ── Hero flow layout ── */
.sol-vp-flow--hero { max-width: 760px; }
.sol-vp-flow-hero-grid {
  display: grid;
  grid-template-columns: minmax(132px, 1fr) minmax(0, 2.4fr);
  gap: 16px 20px;
  align-items: center;
  padding: 8px 0;
}
.sol-vp-flow-hero-sources {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sol-vp-flow-hero-chain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
}

/* Hero — dark section treatment */
.pd-hero .sol-vp-flow-node {
  background: rgba(248, 250, 252, 0.06);
  border-color: rgba(148, 163, 184, 0.42);
}
.pd-hero .sol-vp-flow-node .pd-meta-label { color: #93c5fd; }
.pd-hero .sol-vp-flow-tags { color: #cbd5e1; }
.pd-hero .sol-vp-flow-title { color: #f8fafc; }
.pd-hero .sol-vp-flow-support { color: #94a3b8; }
.pd-hero .sol-vp-flow-node--hub {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(96, 165, 250, 0.55);
  align-items: center;
  text-align: center;
}
.pd-hero .sol-vp-flow-node--hub .pd-meta-label,
.pd-hero .sol-vp-flow-node--hub .sol-vp-flow-tags {
  width: 100%;
  text-align: center;
}
.pd-hero .sol-vp-flow-conn {
  stroke: #60a5fa;
  opacity: 0.65;
}
.pd-hero .sol-vp-flow-signal { fill: #60a5fa; }

/* ── Sequence flow ── */
.sol-vp-flow--seq { max-width: 720px; }
.sol-vp-flow-seq-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 8px;
  padding: 12px 0;
}

/* ── Transform flow ── */
.sol-vp-flow--xform { max-width: 640px; }
.sol-vp-flow-xform-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 16px;
  padding: 12px 0;
}
.sol-vp-flow--xform .sol-vp-flow-node:not(.sol-vp-flow-node--compact) {
  --svp-node-w: 160px;
  --svp-node-h: 96px;
}
.sol-vp-flow--xform .sol-vp-flow-node {
  align-items: center;
  text-align: center;
}
.sol-vp-flow--xform .sol-vp-flow-node .pd-meta-label,
.sol-vp-flow--xform .sol-vp-flow-node .sol-vp-flow-tags,
.sol-vp-flow--xform .sol-vp-flow-node .sol-vp-flow-title,
.sol-vp-flow--xform .sol-vp-flow-node .sol-vp-flow-support {
  width: 100%;
  text-align: center;
}

/* ── Decision flow ── */
.sol-vp-flow--decision { max-width: 560px; }
.sol-vp-flow-decision-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 12px 0 8px;
}
.sol-vp-flow-decision-sources-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 520px;
}
.sol-vp-flow-decision-chain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}
.sol-vp-flow--decision .sol-vp-flow-decision-sources-row .sol-vp-flow-node {
  --svp-node-w: 80px;
  --svp-node-h: 44px;
  padding: 8px 10px;
  align-items: center;
  text-align: center;
}
.sol-vp-flow--decision .sol-vp-flow-decision-sources-row .sol-vp-flow-title {
  font-size: 11px;
  font-weight: 600;
  width: 100%;
  text-align: center;
}
.sol-vp-flow--decision .sol-vp-flow-decision-chain .sol-vp-flow-node {
  --svp-node-w: 188px;
  --svp-node-h: 60px;
  padding: 12px 16px;
  align-items: center;
  text-align: center;
}
.sol-vp-flow--decision .sol-vp-flow-decision-chain .sol-vp-flow-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sol-vp-flow--decision .sol-vp-flow-decision-chain .sol-vp-flow-support {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* VP problem tensions */
.sol-vp-tensions {
  max-width: 680px;
  margin: 0 auto 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sol-vp-tension {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.sol-vp-tension-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.22);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sol-vp-tension-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.sol-vp-tension .prod-body { margin: 0; text-align: left; }
.sol-vp-transition {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.sol-vp-transition strong { color: var(--text-primary); }

/* Operating rhythm */
.sol-vp-rhythm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
}
.sol-vp-rhythm-label {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sol-vp-rhythm-col--after .sol-vp-rhythm-label { color: var(--primary); }
.sol-vp-rhythm-flow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.sol-vp-rhythm-col--after .sol-vp-rhythm-flow {
  border-color: rgba(37, 99, 235, 0.3);
  background: rgba(37, 99, 235, 0.04);
}
.sol-vp-rhythm-flow span:not(.sol-vp-rhythm-arrow) {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 4px 0;
}
.sol-vp-rhythm-col--after .sol-vp-rhythm-flow span:not(.sol-vp-rhythm-arrow) {
  color: var(--text-primary);
}
.sol-vp-rhythm-arrow {
  font-size: 12px;
  color: var(--accent);
  opacity: 0.45;
  padding: 2px 0;
}

/* Value blocks */
.sol-vp-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 720px;
  margin: 0 auto 24px;
}
.sol-vp-value-item {
  padding: 18px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.sol-vp-value-item:last-child {
  grid-column: 1 / -1;
  max-width: 360px;
  justify-self: center;
  width: 100%;
}
.sol-vp-value-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 6px;
}
.sol-vp-value-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.sol-vp-values-close {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.sol-vp-values-close strong { color: var(--text-primary); }

@media (max-width: 768px) {
  .sol-vp-hero--stacked .sol-vp-hero-inner { gap: 24px; }
  .sol-vp-hero-cta { flex-direction: column; align-items: center; }
  .sol-vp-hero-cta .btn { width: 100%; max-width: 320px; }
  .sol-vp-hero-viz-wrap,
  .pd-hero .sol-vp-hero-viz { max-width: 100%; }

  .sol-vp-flow:not(.sol-vp-flow--decision):not(.sol-cto-flow--connectors):not(.sol-em-flow--connectors) .sol-vp-flow-arrows { display: none; }
  .sol-vp-flow-hero-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sol-vp-flow-hero-chain {
    grid-template-columns: 1fr;
  }
  .sol-vp-flow-node {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .sol-vp-flow-seq-row {
    flex-direction: column;
    gap: 0;
    max-width: 280px;
    margin: 0 auto;
  }
  .sol-vp-flow-seq-row .sol-vp-flow-node--seq {
    width: 100%;
    max-width: 280px;
    overflow: visible;
  }
  .sol-vp-flow-seq-row .sol-vp-flow-node--seq:not(:last-child)::after {
    content: "";
    display: block;
    width: 4px;
    height: 18px;
    margin: 4px auto;
    background: radial-gradient(circle, var(--accent) 2px, transparent 2px) center 0 / 4px 6px repeat-y;
    opacity: 0.45;
  }
  .sol-vp-flow-xform-row {
    flex-direction: column;
    max-width: 280px;
    margin: 0 auto;
  }
  .sol-vp-flow--xform .sol-vp-flow-node:not(.sol-vp-flow-node--compact) {
    --svp-node-w: 100%;
    --svp-node-h: 88px;
  }
  .sol-vp-flow--decision { max-width: 300px; margin: 0 auto; }
  .sol-vp-flow-decision-layout { gap: 20px; }
  .sol-vp-flow-decision-sources-row {
    flex-direction: column;
    gap: 12px;
  }
  .sol-vp-flow-decision-chain { gap: 14px; }
  .sol-vp-flow--decision .sol-vp-flow-decision-sources-row .sol-vp-flow-node,
  .sol-vp-flow--decision .sol-vp-flow-decision-chain .sol-vp-flow-node {
    width: 100%;
    max-width: 280px;
    --svp-node-w: 100%;
  }
  .sol-vp-flow--decision .sol-vp-flow-decision-sources-row .sol-vp-flow-node {
    --svp-node-h: 44px;
  }
  .sol-vp-flow--decision .sol-vp-flow-decision-chain .sol-vp-flow-node {
    --svp-node-h: 56px;
  }
  .sol-vp-decision-viz,
  .sol-vp-seq-viz,
  .sol-vp-transform-viz { margin-top: 20px; }
  .sol-vp-rhythm,
  .sol-vp-values { grid-template-columns: 1fr; }
  .sol-vp-value-item:last-child { max-width: none; }
  .sol-vp-tension { flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sol-vp-flow-signal { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   CTO Solutions — shared diagram geometry (extends VP flow system)
   ═══════════════════════════════════════════════════════════════ */

.sol-cto-subhead {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Shared diagram tokens — horizontal source row → convergence → vertical chain */
.sol-cto-flow {
  --cto-source-w: 128px;
  --cto-source-h: 58px;
  --cto-source-gap: 16px;
  --cto-chain-w: 248px;
  --cto-chain-h: 56px;
  --cto-detail-h: 84px;
  --cto-chain-gap: 18px;
  --cto-row-gap: 28px;
  --cto-node-pad-y: 14px;
  --cto-node-pad-x: 16px;
  --cto-sources-max-w: 580px;
  max-width: 640px;
  margin: 0 auto;
}
/* Hero — Organizational Signal Field (left/right convergence into ALYNTE) */
.pd-hero--cto-field.sol-vp-hero--stacked .sol-vp-hero-inner { gap: 20px; }
.pd-hero--cto-field .sol-vp-hero-viz-wrap { max-width: 540px; }
.sol-cto-flow--field {
  max-width: 540px;
  margin: 0 auto;
  padding: 0;
}
.sol-cto-field {
  --cto-field-col-w: 124px;
  --cto-field-col-gap: 12px;
  --cto-field-side-gap: 28px;
  display: grid;
  grid-template-columns: var(--cto-field-col-w) auto var(--cto-field-col-w);
  grid-template-rows: auto auto;
  grid-template-areas:
    "left hub right"
    ". outcomes .";
  gap: var(--cto-field-col-gap) var(--cto-field-side-gap);
  row-gap: 16px;
  align-items: center;
  justify-content: center;
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
}
.sol-cto-field__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--cto-field-col-gap);
  position: relative;
  z-index: 1;
}
.sol-cto-field__col--left { grid-area: left; justify-self: end; }
.sol-cto-field__col--right { grid-area: right; justify-self: start; }
.sol-cto-field__hub-wrap {
  grid-area: hub;
  position: relative;
  z-index: 1;
  justify-self: center;
  align-self: center;
}
.sol-cto-field__outcomes {
  grid-area: outcomes;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  position: relative;
  z-index: 1;
  justify-self: center;
}
.sol-cto-node--signal {
  width: var(--cto-field-col-w);
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  padding: 8px 12px;
}
.sol-cto-node--signal .sol-vp-flow-title {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}
.sol-cto-node--hub-core {
  width: 112px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 10px 16px;
}
.sol-cto-node--hub-core .sol-vp-flow-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.sol-cto-flow--field .sol-cto-field__outcomes .sol-cto-node--chain {
  width: 220px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 10px 14px;
}
.sol-cto-flow--field .sol-cto-field__outcomes .sol-cto-node--chain .sol-vp-flow-title {
  font-size: 12px;
  line-height: 1.25;
}
.pd-hero .sol-cto-flow--field .sol-vp-flow-conn {
  stroke: rgba(148, 163, 184, 0.32);
  opacity: 1;
}
.pd-hero .sol-cto-flow--field .sol-vp-flow-signal { fill: #2563eb; }

/* Shared node primitive — overrides VP flow defaults for CTO diagrams */
.sol-cto-flow .sol-cto-node {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  overflow: hidden;
  flex-shrink: 0;
  padding: var(--cto-node-pad-y) var(--cto-node-pad-x);
}
.sol-cto-node .sol-vp-flow-title,
.sol-cto-node .sol-vp-flow-support {
  width: 100%;
  text-align: center;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.3;
  max-width: 100%;
}
.sol-cto-node .sol-vp-flow-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}
.sol-cto-node .sol-vp-flow-support {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.35;
}
.sol-cto-node--source {
  width: var(--cto-source-w);
  height: var(--cto-source-h);
  min-height: var(--cto-source-h);
  max-height: var(--cto-source-h);
}
.sol-cto-node--chain {
  width: var(--cto-chain-w);
  height: var(--cto-chain-h);
  min-height: var(--cto-chain-h);
  max-height: var(--cto-chain-h);
}
.sol-cto-node--detail {
  width: var(--cto-chain-w);
  height: var(--cto-detail-h);
  min-height: var(--cto-detail-h);
  max-height: var(--cto-detail-h);
  gap: 6px;
}

/* Deterministic diagram: source row → centered vertical intelligence chain */
.sol-cto-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cto-row-gap);
  margin: 0 auto;
  padding: 16px 0;
}
.sol-cto-diagram__sources,
.sol-cto-diagram__intel {
  position: relative;
  z-index: 1;
}
.sol-cto-diagram__sources {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--cto-source-gap);
  width: 100%;
  max-width: var(--cto-sources-max-w);
}
.sol-cto-diagram__sources .sol-cto-node--source {
  flex: 0 0 var(--cto-source-w);
}
.sol-cto-diagram__intel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cto-chain-gap);
  width: var(--cto-chain-w);
}

/* Hero — dark section treatment */
.pd-hero .sol-cto-node {
  background: rgba(248, 250, 252, 0.06);
  border-color: rgba(148, 163, 184, 0.42);
}
.pd-hero .sol-cto-node .sol-vp-flow-title { color: #f8fafc; }
.pd-hero .sol-cto-node .sol-vp-flow-support { color: #94a3b8; }
.pd-hero .sol-cto-node.sol-vp-flow-node--out {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(96, 165, 250, 0.55);
}
.pd-hero .sol-cto-flow .sol-vp-flow-conn {
  stroke: #60a5fa;
  opacity: 0.65;
}
.pd-hero .sol-cto-flow .sol-vp-flow-signal { fill: #60a5fa; }

/* From signals to posture — before/after rhythm */
.sol-cto-signals-rhythm .sol-vp-rhythm-label { text-align: center; }

/* CTO posture — executive lens split (Section 1) */
.sol-cto-posture-split,
.sol-cto-truth-split {
  grid-template-columns: 42fr 58fr;
  gap: 40px;
  align-items: start;
  max-width: 920px;
  margin: 0 auto;
}
.sol-cto-posture-copy .prod-eyebrow,
.sol-cto-posture-copy .prod-h2,
.sol-cto-posture-copy .sol-cto-subhead {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.sol-cto-posture-copy .prod-h2 { max-width: none; }
.sol-cto-posture-copy .sol-cto-subhead { max-width: none; }
.sol-cto-posture-copy .prod-body,
.sol-cto-truth-copy .prod-body {
  color: var(--text-secondary);
  line-height: 1.6;
}
.sol-cto-posture-readout {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 22px 24px;
}
.sol-cto-posture-readout__title {
  margin: 0 0 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.sol-cto-posture-lens__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 4px;
}
.sol-cto-posture-lens__desc {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.sol-cto-posture-lens:last-child .sol-cto-posture-lens__desc { margin-bottom: 0; }
.sol-cto-posture-lens__sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 14px;
}

/* One operational truth — convergence split (Section 2) */
.sol-cto-truth-viz {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}
.sol-cto-flow--converge {
  max-width: 100%;
  padding: 0;
}
.sol-cto-converge {
  display: grid;
  grid-template-columns: minmax(0, 152px) auto minmax(0, 152px);
  grid-template-areas: "teams hub outcome";
  align-items: center;
  gap: 12px 20px;
  min-height: 220px;
}
.sol-cto-converge__teams {
  grid-area: teams;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-self: end;
}
.sol-cto-converge__hub {
  grid-area: hub;
  justify-self: center;
}
.sol-cto-converge__outcome {
  grid-area: outcome;
  justify-self: start;
}
.sol-cto-node--team {
  width: 152px;
  height: auto;
  min-height: 48px;
  max-height: none;
  padding: 8px 12px;
  gap: 2px;
}
.sol-cto-node--team .sol-vp-flow-title {
  font-size: 12px;
  line-height: 1.25;
}
.sol-cto-node--team .sol-vp-flow-support {
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-muted);
}
.sol-cto-flow--converge .sol-cto-node--hub-core {
  width: 104px;
  min-height: 44px;
  border-color: rgba(37, 99, 235, 0.45);
  background: rgba(37, 99, 235, 0.06);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.12);
}
.sol-cto-node--outcome {
  width: 152px;
  height: auto;
  min-height: 52px;
  max-height: none;
  padding: 10px 14px;
}
.sol-cto-node--outcome .sol-vp-flow-title {
  font-size: 11px;
  line-height: 1.3;
}
.sol-cto-flow--converge .sol-vp-flow-conn {
  stroke: rgba(148, 163, 184, 0.35);
}
.sol-cto-flow--converge .sol-vp-flow-signal { fill: #2563eb; }

.sol-cto-decision-note {
  max-width: 560px;
  margin: 24px auto 0;
  text-align: center;
  color: var(--text-secondary);
}
.sol-cto-decision-note strong { color: var(--text-primary); }

/* CTO value grid — five outcomes */
.sol-cto-values { grid-template-columns: repeat(2, 1fr); }
.sol-cto-values .sol-vp-value-item:last-child {
  grid-column: 1 / -1;
  max-width: 360px;
}

/* Viz figure wrappers */
.sol-cto-hero-viz { width: 100%; margin: 0 auto; padding: 0; border: none; background: none; }
.sol-cto-decision-viz {
  width: 100%;
  max-width: 920px;
  margin: 28px auto 0;
  padding: 0;
  border: none;
  background: none;
}
.sol-cto-contrast-viz {
  width: 100%;
  max-width: 820px;
  margin: 28px auto 0;
  padding: 0;
  border: none;
  background: none;
}

@media (max-width: 768px) {
  .sol-vp-flow:not(.sol-vp-flow--decision):not(.sol-cto-flow--connectors):not(.sol-em-flow--connectors) .sol-vp-flow-arrows { display: none; }

  .sol-cto-flow {
    --cto-source-w: 280px;
    --cto-chain-w: 280px;
    --cto-row-gap: 24px;
    max-width: 300px;
  }
  .sol-cto-flow--field { max-width: 300px; }
  .sol-cto-flow--converge { max-width: 100%; }
  .sol-cto-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 280px;
  }
  .sol-cto-field__col {
    width: 100%;
    max-width: 260px;
    align-items: center;
  }
  .sol-cto-field__col--left { order: 1; }
  .sol-cto-field__col--right { order: 2; }
  .sol-cto-field__hub-wrap { order: 3; width: 100%; max-width: 220px; }
  .sol-cto-field__outcomes { order: 4; width: 100%; max-width: 260px; }
  .sol-cto-node--signal {
    width: 100%;
    max-width: 260px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
  }
  .sol-cto-node--signal .sol-vp-flow-title { font-size: 11px; }
  .sol-cto-node--hub-core {
    width: 100%;
    max-width: 220px;
  }
  .sol-cto-flow--field .sol-cto-field__outcomes .sol-cto-node--chain {
    width: 100%;
    max-width: 260px;
  }
  .sol-cto-diagram__sources {
    flex-direction: column;
    align-items: center;
    max-width: 280px;
  }
  .sol-cto-node--source,
  .sol-cto-node--chain,
  .sol-cto-node--detail {
    width: 100%;
    max-width: 280px;
  }
  .sol-cto-diagram__intel {
    width: 100%;
    max-width: 280px;
  }
  .sol-cto-values { grid-template-columns: 1fr; }
  .sol-cto-values .sol-vp-value-item:last-child { max-width: none; }
  .sol-cto-posture-split,
  .sol-cto-truth-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .sol-cto-converge {
    grid-template-columns: 1fr;
    grid-template-areas:
      "teams"
      "hub"
      "outcome";
    justify-items: center;
    gap: 14px;
    min-height: 0;
  }
  .sol-cto-converge__teams {
    justify-self: center;
    width: 100%;
    max-width: 280px;
  }
  .sol-cto-node--team,
  .sol-cto-node--outcome {
    width: 100%;
    max-width: 280px;
  }
  .sol-cto-flow--converge .sol-cto-node--hub-core {
    width: 100%;
    max-width: 220px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Engineering Manager Solutions
   ═══════════════════════════════════════════════════════════════ */

.sol-em-hero--stacked .sol-vp-hero-inner { gap: 24px; }
.sol-em-hero--stacked .sol-vp-hero-head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pd-hero--center.sol-em-hero--stacked .prod-lead,
.sol-em-hero--stacked .prod-lead {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.sol-em-subhead {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Problem — horizontal tensions on desktop */
.sol-em-tensions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 920px;
  margin: 0 auto 32px;
}
.sol-em-tension {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sol-em-tension-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.22);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sol-em-tension-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.sol-em-tension .prod-body { margin: 0; text-align: left; font-size: 14px; }

/* Signature execution model — grid geometry (contained + centered) */
#em-execution .prod-section-head { margin-bottom: 28px; }
.sol-em-exec-subhead {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  white-space: nowrap;
}
.sol-em-exec-viz {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
  overflow: hidden;
}
.sol-em-flow--exec {
  --em-node-w: 104px;
  --em-gap-x: 32px;
  --em-gap-y: 16px;
  --em-lane-w: 208px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 4px 0 0;
  min-height: 220px;
  overflow: hidden;
}
.sol-em-flow--exec .sol-vp-flow-arrows { z-index: 0; }
.sol-em-flow--exec .sol-em-node { position: relative; z-index: 2; }
.sol-em-exec__label {
  margin: 0 0 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
}
.sol-em-exec__grid {
  display: grid;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  grid-template-columns:
    var(--em-node-w)
    var(--em-node-w)
    var(--em-lane-w)
    var(--em-node-w)
    var(--em-node-w)
    var(--em-node-w);
  column-gap: var(--em-gap-x);
  row-gap: var(--em-gap-y);
  position: relative;
  z-index: 1;
}
.sol-em-exec__cell {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sol-em-exec__cell--work { grid-column: 1; grid-row: 1; }
.sol-em-exec__cell--pr { grid-column: 2; grid-row: 1; }
.sol-em-exec__cell--review { grid-column: 3; grid-row: 1; }
.sol-em-exec__cell--delay { grid-column: 3; grid-row: 2; }
.sol-em-exec__cell--waiting { grid-column: 3; grid-row: 3; }
.sol-em-exec__cell--impact { grid-column: 3; grid-row: 4; }
.sol-em-exec__cell--intervention { grid-column: 3; grid-row: 5; }
.sol-em-exec__cell--cicd { grid-column: 4; grid-row: 5; }
.sol-em-exec__cell--merge { grid-column: 5; grid-row: 5; }
.sol-em-exec__cell--delivery { grid-column: 6; grid-row: 5; }
.sol-em-flow .sol-em-node {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3px;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  overflow: visible;
}
.sol-em-node--step {
  width: var(--em-node-w);
  min-height: 52px;
  flex-shrink: 0;
}
.sol-em-node--step .sol-vp-flow-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.25;
}
.sol-em-node--branch {
  width: 100%;
  min-height: 52px;
  flex-shrink: 0;
}
.sol-em-node--branch .sol-vp-flow-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.sol-em-node--branch .sol-vp-flow-support {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}
.sol-em-node--bottleneck {
  border-color: rgba(217, 119, 6, 0.55);
  background: rgba(217, 119, 6, 0.08);
  box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.12), 0 2px 8px rgba(217, 119, 6, 0.08);
}
.sol-em-node--bottleneck .sol-vp-flow-title {
  color: #92400e;
  font-weight: 700;
}
.sol-em-node--branch-signal {
  border-color: rgba(217, 119, 6, 0.45);
  background: rgba(217, 119, 6, 0.05);
}
.sol-em-node--branch-impact {
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(148, 163, 184, 0.06);
}
.sol-em-exec__cell--review .sol-em-node,
.sol-em-exec__cell--delay .sol-em-node,
.sol-em-exec__cell--waiting .sol-em-node,
.sol-em-exec__cell--impact .sol-em-node,
.sol-em-exec__cell--intervention .sol-em-node {
  width: 100%;
}
.sol-em-node--intervention {
  width: 100%;
  min-height: 52px;
  flex-shrink: 0;
  border-color: rgba(37, 99, 235, 0.5);
  background: rgba(37, 99, 235, 0.08);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.1), 0 2px 8px rgba(37, 99, 235, 0.08);
}
.sol-em-node--intervention .sol-vp-flow-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--primary);
  white-space: normal;
}
.sol-em-flow--exec .sol-vp-flow-conn {
  stroke: rgba(100, 116, 139, 0.72);
  stroke-width: 2;
  stroke-dasharray: 7 5;
  opacity: 1;
}
.sol-em-flow--exec .sol-vp-flow-signal { fill: #2563eb; }

/* Manager mental model — typography mechanism */
.sol-em-mechanism {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 6px;
  max-width: 820px;
  margin: 0 auto;
  padding: 8px 16px 0;
}
.sol-em-mechanism-step {
  text-align: center;
  padding: 4px 6px;
}
.sol-em-mechanism-step__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.sol-em-mechanism-step__q {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
  margin-top: 2px;
}
.sol-em-mechanism-arrow {
  font-size: 14px;
  color: var(--accent);
  opacity: 0.45;
}

/* Activity vs intervention comparison */
.sol-em-compare { max-width: 820px; }

/* Decision story */
.sol-em-decision-viz {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
}
.sol-em-decision { max-width: 360px; }

/* Outcomes */
.sol-em-values { grid-template-columns: repeat(2, 1fr); }
.sol-em-values .sol-vp-value-item:last-child {
  grid-column: 1 / -1;
  max-width: 360px;
}

@media (max-width: 900px) {
  .sol-em-tensions { grid-template-columns: 1fr; max-width: 560px; }
  .sol-em-exec-subhead { white-space: normal; max-width: 520px; }
  .sol-em-flow--exec {
    --em-gap-x: 20px;
    --em-node-w: 92px;
    --em-lane-w: 184px;
  }
}

@media (max-width: 768px) {
  .sol-vp-flow:not(.sol-vp-flow--decision):not(.sol-cto-flow--connectors):not(.sol-em-flow--connectors) .sol-vp-flow-arrows {
    display: none;
  }
  .sol-em-flow--exec {
    --em-gap-x: 0;
    --em-gap-y: 12px;
    --em-node-w: 280px;
    --em-lane-w: 280px;
    min-height: 0;
  }
  .sol-em-exec__grid {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 280px;
  }
  .sol-em-exec__cell--work,
  .sol-em-exec__cell--pr,
  .sol-em-exec__cell--review,
  .sol-em-exec__cell--delay,
  .sol-em-exec__cell--waiting,
  .sol-em-exec__cell--impact,
  .sol-em-exec__cell--intervention,
  .sol-em-exec__cell--cicd,
  .sol-em-exec__cell--merge,
  .sol-em-exec__cell--delivery {
    grid-column: 1;
    grid-row: auto;
  }
  .sol-em-node--step,
  .sol-em-node--branch,
  .sol-em-node--intervention {
    width: 100%;
    max-width: 280px;
  }
  .sol-em-mechanism {
    flex-direction: column;
    gap: 2px;
    max-width: 280px;
  }
  .sol-em-mechanism-arrow { transform: rotate(90deg); margin: 2px 0; }
  .sol-em-values { grid-template-columns: 1fr; }
  .sol-em-values .sol-vp-value-item:last-child { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sol-em-node--bottleneck {
    border-color: rgba(217, 119, 6, 0.5);
    background: rgba(217, 119, 6, 0.08);
  }
}

/* ═══════════════════════════════════════════════════════════════
   Protect Commitments — outcome page (Commitment Protection Window)
   ═══════════════════════════════════════════════════════════════ */

.sol-pc-window-viz {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
}
.sol-pc-window {
  padding: 24px 28px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.sol-pc-window-label {
  display: block;
  text-align: center;
  margin-bottom: 16px;
}
.sol-pc-window-track {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0;
  max-width: 640px;
  margin: 0 auto;
}
.sol-pc-window-endpoint {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}
.sol-pc-window-line {
  height: 2px;
  margin: 0 12px;
  background: var(--border);
}
.sol-pc-window-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}
.sol-pc-window-vline {
  width: 2px;
  height: 28px;
  background: var(--border);
}
.sol-pc-window-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.sol-pc-window-signal {
  font-size: 11px;
  color: var(--text-secondary);
}
.sol-pc-window-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}
.sol-pc-window-box {
  text-align: center;
  padding: 14px 24px;
  border: 2px solid rgba(37, 99, 235, 0.3);
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.04);
}
.sol-pc-window-box strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.02em;
}
.sol-pc-window--large .sol-pc-window {
  padding: 28px 32px 24px;
}
.sol-pc-window-phases {
  display: flex;
  justify-content: space-between;
  max-width: 640px;
  margin: 20px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.sol-pc-window-phase {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}
.sol-pc-window-phase--change { color: var(--accent); font-weight: 600; }
.sol-pc-window-phase--exposed { color: var(--warning); }

/* Vertical problem mechanism */
.sol-pc-vflow {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 360px;
  margin: 0 auto;
}
.sol-pc-vflow-step {
  width: 100%;
  text-align: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.sol-pc-vflow-step:first-child { border-top: 1px solid var(--border); }
.sol-pc-vflow-step .pd-meta-label { color: var(--accent); }
.sol-pc-vflow-step p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.sol-pc-vflow-arrow {
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* Conditions composition */
.sol-pc-conditions-viz {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
}
.sol-pc-conditions {
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.sol-pc-conditions-head {
  text-align: center;
  padding-bottom: 12px;
}
.sol-pc-conditions-head strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  color: var(--primary);
}
.sol-pc-conditions-vline {
  width: 2px;
  height: 20px;
  margin: 0 auto;
  background: var(--border);
}
.sol-pc-conditions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 12px 0;
}
.sol-pc-condition {
  text-align: center;
  padding: 14px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
}
.sol-pc-condition strong {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.35;
}
.sol-pc-conditions-outcome {
  text-align: center;
  padding: 16px 18px;
  border: 2px solid rgba(37, 99, 235, 0.3);
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.04);
  max-width: 360px;
  margin: 12px auto 0;
}
.sol-pc-conditions-outcome strong {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--primary);
}

/* Exposure comparison */
.sol-pc-exposure-compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
}
.sol-pc-exposure-card {
  padding: 20px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--background);
}
.sol-pc-exposure-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sol-pc-exposure-head strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
}
.sol-pc-exposure-progress {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}
.sol-pc-exposure-body { margin-bottom: 14px; }
.sol-pc-exposure-ev {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.sol-pc-exposure-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Intervention — Commitment Protection Window flow */
.sol-pc-cpw-wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
}
.sol-pc-cpw {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  isolation: isolate;
}
.sol-pc-cpw-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.sol-pc-cpw-paths path {
  fill: none;
  stroke: rgba(37, 99, 235, 0.35);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}
.sol-pc-cpw-signal {
  fill: var(--accent);
  opacity: 0;
}
.sol-pc-cpw-layout {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 520px;
  margin: 0 auto;
}
.sol-pc-cpw-step,
.sol-pc-cpw-vlink,
.sol-pc-cpw-window,
.sol-pc-cpw-option {
  opacity: 1;
  transform: none;
}
.sol-pc-cpw-step {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 280px;
  text-align: center;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.sol-pc-cpw-step--commitment { max-width: 240px; }
.sol-pc-cpw-title {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}
.sol-pc-cpw-step--state .pd-meta-label { color: var(--primary); font-size: 12px; }
.sol-pc-cpw-step--track {
  border-color: rgba(37, 99, 235, 0.25);
  background: rgba(37, 99, 235, 0.04);
}
.sol-pc-cpw-step--track .pd-meta-label { color: var(--accent); }
.sol-pc-cpw-step--signal {
  max-width: 220px;
  padding: 10px 16px;
  border-style: dashed;
  background: var(--background);
}
.sol-pc-cpw-step--signal .pd-meta-label { color: var(--text-secondary); }
.sol-pc-cpw-step--exposed {
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(217, 119, 6, 0.06);
}
.sol-pc-cpw-step--exposed .pd-meta-label { color: var(--warning); }
.sol-pc-cpw-step--outcome {
  max-width: 300px;
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.06);
}
.sol-pc-cpw-step--outcome .pd-meta-label { color: var(--accent); }
.sol-pc-cpw-vlink {
  width: 2px;
  height: 20px;
  background: transparent;
  flex-shrink: 0;
}
.sol-pc-cpw-window {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 4px 0;
  padding: 20px 16px 16px;
  border: 2px solid rgba(37, 99, 235, 0.22);
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.03);
  text-align: center;
}
.sol-pc-cpw-window-label {
  display: block;
  margin-bottom: 16px;
  color: var(--accent);
}
.sol-pc-cpw-branch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}
.sol-pc-cpw-option {
  position: relative;
  box-sizing: border-box;
  text-align: center;
  padding: 12px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.sol-pc-cpw-option .pd-meta-label {
  display: block;
  color: var(--primary);
  font-size: 10px;
}
.sol-pc-cpw-option p {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.sol-pc-cpw-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.sol-pc-cpw-anchor--in-t { top: 0; left: 50%; }
.sol-pc-cpw-anchor--out-b { bottom: 0; left: 50%; }
.sol-pc-cpw-note {
  margin-top: 16px;
  margin-bottom: 0;
  text-align: center;
}

/* Protection options — 2×2 grid (override sol-vp-values last-child centering) */
.sol-pc-options { max-width: 720px; }
.sol-pc-options .sol-vp-value-item:last-child {
  grid-column: auto;
  max-width: none;
  justify-self: stretch;
  width: auto;
}

/* Decision window vertical rhythm */
.sol-pc-rhythm-flow--vert {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.sol-pc-rhythm-flow--vert span:not(.sol-vp-rhythm-arrow) {
  padding: 8px 0;
  font-size: 13px;
}
.sol-pc-rhythm-flow--vert .sol-vp-rhythm-arrow {
  transform: none;
  text-align: center;
  padding: 2px 0;
}

/* Proof chain */
.sol-pc-proof-viz {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
}
.sol-pc-proof-title {
  text-align: center;
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--primary);
}

@media (max-width: 900px) {
  .sol-pc-conditions-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .sol-pc-cpw-signal { display: none; }
}

@media (max-width: 768px) {
  .sol-pc-exposure-compare { grid-template-columns: 1fr; }
  .sol-pc-conditions-grid { grid-template-columns: 1fr; }
  .sol-pc-cpw-branch { grid-template-columns: 1fr; max-width: 280px; margin: 0 auto; }
  .sol-pc-cpw-signal { display: none; }
  .sol-pc-window-phases {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .sol-pc-rhythm .sol-vp-rhythm-flow--vert { gap: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Prevent Surprises — outcome page (Early Warning)
   ═══════════════════════════════════════════════════════════════ */

/* Hero — stacked layout, dark-integrated nodes, single signal dot */
.sol-ps-hero .sol-vp-hero-viz-wrap { max-width: 640px; }
.sol-ps-hero-viz-wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
}
.sol-ps-hero-viz { width: 100%; }
.sol-ps-hero-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0 0;
}
.sol-ps-hero-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.sol-ps-hero-paths path {
  fill: none;
  stroke: #60a5fa;
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  opacity: 0.65;
}
.sol-ps-hero-signal-dot {
  fill: #60a5fa;
  opacity: 0;
}
.sol-ps-hero-signals {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 8px;
  width: 100%;
  margin-bottom: 36px;
}
.sol-ps-hero-signal,
.sol-ps-hero-step {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  background: rgba(248, 250, 252, 0.06);
}
.sol-ps-hero-signal {
  /* width: 112px;
  min-height: 72px; */
  padding: 10px 10px 12px;
  gap: 4px;
}
.sol-ps-hero-signal .pd-meta-label {
  margin: 0;
  font-size: 10px;
  line-height: 1.2;
  color: #93c5fd;
}
.sol-ps-hero-signal strong {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: #f8fafc;
}
.sol-ps-hero-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
}
.sol-ps-hero-anchor--in-t { left: 50%; top: 0; transform: translateX(-50%); }
.sol-ps-hero-anchor--out-b { left: 50%; bottom: 0; transform: translateX(-50%); }
.sol-ps-hero-converge {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin: 2px 0 6px;
}
.sol-ps-hero-chain {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 200px;
}
.sol-ps-hero-step {
  width: 100%;
  /* min-height: 52px; */
  padding: 10px 14px;
  gap: 2px;
}
.sol-ps-hero-step .pd-meta-label {
  margin: 0;
  font-size: 10px;
  line-height: 1.2;
}
.sol-ps-hero-step--pattern {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(37, 99, 235, 0.12);
}
.sol-ps-hero-step--pattern .pd-meta-label { color: #93c5fd; }
.sol-ps-hero-step--risk {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(217, 119, 6, 0.1);
}
.sol-ps-hero-step--risk .pd-meta-label { color: #fcd34d; }
.sol-ps-hero-step--warning {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(37, 99, 235, 0.1);
}
.sol-ps-hero-step--warning .pd-meta-label { color: #93c5fd; }
@media (max-width: 768px) {
  .sol-ps-hero-signal { width: calc(50% - 8px); min-height: 68px; }
  .sol-ps-hero-chain { max-width: 180px; }
}
@media (max-width: 480px) {
  .sol-ps-hero-signal { width: 100%; max-width: 220px; }
}

/* Signals composition */
.sol-ps-signals-viz {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
}
.sol-ps-signals {
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.sol-ps-signals-lead { text-align: center; margin: 0 0 14px; }
.sol-ps-signals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.sol-ps-signal-card {
  text-align: center;
  padding: 14px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
}
.sol-ps-signal-card strong {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.35;
}
.sol-ps-signals-vline {
  width: 2px;
  height: 20px;
  margin: 14px auto;
  border-left: 2px dotted rgba(37, 99, 235, 0.35);
}
.sol-ps-signals-outcome {
  text-align: center;
  padding: 16px 18px;
  border: 2px solid rgba(37, 99, 235, 0.22);
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.03);
  max-width: 360px;
  margin: 0 auto;
}
.sol-ps-signals-outcome strong {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--primary);
}

/* Relationship discovery visual — Meaning section */
.sol-ps-relationship-viz {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
}
.sol-ps-relationship {
  position: relative;
  width: 100%;
}
.sol-ps-relationship-stage {
  position: relative;
  z-index: 1;
  padding: 8px 0 4px;
}
.sol-ps-relationship-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.sol-ps-relationship-paths path {
  fill: none;
  stroke: rgba(37, 99, 235, 0.4);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  opacity: 0.65;
}
.sol-ps-relationship-signal {
  fill: var(--accent);
  opacity: 0;
}
.sol-ps-relationship-field {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 14px 12px;
  max-width: 480px;
  margin: 0 auto;
}
.sol-ps-relationship-node {
  position: relative;
  text-align: center;
  padding: 10px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
}
.sol-ps-relationship-node strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}
.sol-ps-relationship-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  transform: translate(-50%, -50%);
}
.sol-ps-relationship-anchor--in-t {
  top: 0;
  transform: translateX(-50%);
}
.sol-ps-relationship-node[data-node="delivery"] { grid-column: 2; grid-row: 1; }
.sol-ps-relationship-node[data-node="review"] { grid-column: 1; grid-row: 2; }
.sol-ps-relationship-node[data-node="dependency"] { grid-column: 3; grid-row: 2; }
.sol-ps-relationship-node[data-node="work"] { grid-column: 2; grid-row: 3; }
.sol-ps-relationship-node[data-node="scope"] { grid-column: 2; grid-row: 4; }
.sol-ps-relationship-label {
  text-align: center;
  margin: 18px 0 0;
}
.sol-ps-relationship-label .pd-meta-label { color: var(--accent); }
.sol-ps-relationship-pattern {
  position: relative;
  text-align: center;
  max-width: 260px;
  margin: 12px auto 0;
  padding: 12px 14px;
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.04);
}
.sol-ps-relationship-pattern .pd-meta-label { color: var(--accent); }
.sol-ps-relationship-pattern strong {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
@media (max-width: 768px) {
  .sol-ps-relationship-field {
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 240px;
  }
  .sol-ps-relationship-node[data-node="delivery"],
  .sol-ps-relationship-node[data-node="review"],
  .sol-ps-relationship-node[data-node="dependency"],
  .sol-ps-relationship-node[data-node="work"],
  .sol-ps-relationship-node[data-node="scope"] {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Warning readout */
.sol-ps-warning-viz {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
}
.sol-ps-warning {
  padding: 22px 24px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.sol-ps-warning-head {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sol-ps-warning-head strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  color: var(--primary);
}
.sol-ps-warning-block {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sol-ps-warning-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.sol-ps-warning-block p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.sol-ps-warning-lead {
  font-size: 14px !important;
  font-weight: 500;
  color: var(--primary) !important;
}
.sol-ps-warning-block--emph {
  border-color: rgba(37, 99, 235, 0.25);
  background: rgba(37, 99, 235, 0.04);
  padding: 14px 16px;
  border-radius: 10px;
  border-bottom: none;
}

/* Response options — 2×2 grid */
.sol-ps-options { max-width: 720px; }
.sol-ps-options .sol-vp-value-item:last-child {
  grid-column: auto;
  max-width: none;
  justify-self: stretch;
  width: auto;
}

/* Proof */
.sol-ps-proof-viz {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
}

@media (max-width: 900px) {
  .sol-ps-signals-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .sol-ps-signals-grid { grid-template-columns: 1fr; }
  .sol-ps-options .sol-vp-value-item:last-child { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Align Faster — outcome page (Evidence → Action)
   ═══════════════════════════════════════════════════════════════ */

/* Hero — 55% copy + CTAs | 45% mechanism visual (desktop) */
.sol-af-hero--split .sol-af-hero-inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 48px;
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  text-align: left;
}
@media (min-width: 1025px) {
  /* Match solution/product hero band height (pd-hero padding + ~560px inner) */
  .sol-af-hero--split .sol-af-hero-inner {
    min-height: 560px;
  }
  .sol-af-hero-copy {
    justify-content: center;
    align-self: center;
  }
  .sol-af-hero--split .sol-af-hero-viz-col {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-height: 300px;
  }
}
.sol-af-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  min-width: 0;
}
.sol-af-hero--split .sol-vp-hero-head {
  max-width: none;
  width: 100%;
  text-align: left;
}
.sol-af-hero--split .prod-lead {
  max-width: 520px;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.sol-af-hero--split .sol-vp-hero-cta {
  justify-content: flex-start;
  margin-top: 0;
  padding-top: 0;
}
.sol-af-hero--split .sol-af-hero-viz-col {
  width: 100%;
  max-width: none;
  margin: 0;
  justify-self: center;
  align-self: center;
}
.sol-af-hero-viz-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
}
.sol-af-hero-fork {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 360px;
}
.sol-af-hero-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 0;
}
.sol-af-hero-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.sol-af-hero-paths path {
  fill: none;
  stroke: #60a5fa;
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  opacity: 0.65;
}
.sol-af-hero-signal-dot { fill: #60a5fa; opacity: 0; }
.sol-af-hero-node {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  background: rgba(248, 250, 252, 0.06);
  padding: 10px 12px;
}
.sol-af-hero-node .pd-meta-label {
  margin: 0;
  font-size: 10px;
  line-height: 1.2;
  color: #93c5fd;
}
.sol-af-hero-node strong {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: #f8fafc;
}
.sol-af-hero-node--finding,
.sol-af-hero-node--impact { width: 100%; max-width: 240px; }
.sol-af-hero-node--outcome { width: 100%; max-width: 220px; }
.sol-af-hero-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 360px;
}
.sol-af-hero-node--owner,
.sol-af-hero-node--action { flex: 1; min-width: 0; min-height: 68px; }
.sol-af-hero-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
}
.sol-af-hero-anchor--in-t { left: 50%; top: 0; transform: translateX(-50%); }
.sol-af-hero-anchor--out-b { left: 50%; bottom: 0; transform: translateX(-50%); }

.sol-af-gap-viz { max-width: 820px; margin: 24px auto 0; }
.sol-af-lenses {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.sol-af-lens {
  text-align: center;
  padding: 12px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
}
.sol-af-lens strong {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}
.sol-af-gap-flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 6px;
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-secondary);
}

.sol-af-truth-viz { max-width: 720px; margin: 0 auto; }
.sol-af-truth-core {
  text-align: center;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.04);
}
.sol-af-truth-core strong {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-primary);
}
.sol-af-truth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sol-af-truth-card {
  padding: 14px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.sol-af-truth-card p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.sol-af-own-viz { max-width: 360px; margin: 0 auto; }
.sol-af-own-chain { max-width: 360px; margin: 0 auto; }
.sol-af-action-lead {
  font-size: 14px !important;
  font-weight: 500;
  color: var(--primary) !important;
  margin: 6px 0 12px !important;
}

.sol-af-coord-viz { max-width: 560px; margin: 0 auto; }
.sol-af-coord { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sol-af-coord-finding,
.sol-af-coord-outcome {
  text-align: center;
  width: 100%;
  max-width: 280px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
}
.sol-af-coord-finding strong,
.sol-af-coord-outcome strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-primary);
}
.sol-af-coord-spine {
  width: 2px;
  height: 14px;
  border-left: 2px dotted rgba(37, 99, 235, 0.35);
}
.sol-af-coord-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.sol-af-coord-role {
  text-align: center;
  padding: 12px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.sol-af-coord-role strong {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-primary);
}

.sol-af-values { max-width: 720px; }
.sol-af-proof-viz {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .sol-af-hero--split .sol-af-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .sol-af-hero-copy {
    align-items: center;
    gap: 24px;
  }
  .sol-af-hero--split .sol-vp-hero-head,
  .sol-af-hero--split .prod-lead {
    text-align: center;
  }
  .sol-af-hero--split .prod-lead {
    margin-left: auto;
    margin-right: auto;
  }
  .sol-af-hero--split .sol-vp-hero-cta {
    justify-content: center;
  }
  .sol-af-hero-viz-wrap {
    max-width: 640px;
  }
}

@media (max-width: 768px) {
  .sol-af-hero-stage { gap: 22px; }
  .sol-af-lenses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-af-truth-grid { grid-template-columns: 1fr; }
  .sol-af-coord-row { grid-template-columns: 1fr; }
  .sol-af-hero-row { flex-direction: column; max-width: 220px; }
  .sol-af-hero-fork { max-width: 220px; }
}

/* ═══════════════════════════════════════════════════════════════
   Solutions hub — /solutions/ orientation map
   ═══════════════════════════════════════════════════════════════ */

.sol-hub-hero .sol-vp-hero-viz-wrap { max-width: 720px; }
.sol-hub-viz-wrap,
.sol-hub-fit-wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
}
.sol-hub-fit-wrap { max-width: 640px; }
.sol-hub-viz-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 4px 0;
}
.sol-hub-viz-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.sol-hub-viz-paths path {
  fill: none;
  stroke: #60a5fa;
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  opacity: 0.65;
}
.sol-hub-viz--fit .sol-hub-viz-paths path {
  stroke: rgba(37, 99, 235, 0.55);
  stroke-dasharray: 5 4;
}
.sol-hub-viz-signal { fill: #60a5fa; opacity: 0; }
.sol-hub-viz--fit .sol-hub-viz-signal { fill: #2563eb; }
.sol-hub-node {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  text-align: center;
  border-radius: 10px;
  padding: 10px 12px;
}
.sol-hub-hero .sol-hub-node {
  border: 1px solid rgba(148, 163, 184, 0.42);
  background: rgba(248, 250, 252, 0.06);
}
.sol-hub-hero .sol-hub-node .pd-meta-label {
  color: #93c5fd;
  font-size: 10px;
}
.sol-hub-hero .sol-hub-node strong {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: #f8fafc;
}
.sol-hub-node--hub { width: 100%; max-width: 220px; }
.sol-hub-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}
.sol-hub-row--lenses .sol-hub-node--lens { flex: 1; min-width: 0; }
.sol-hub-row--outcomes .sol-hub-node--out { flex: 1; min-width: 0; }
.sol-hub-node--out strong { font-size: 10px; font-weight: 600; }
.sol-hub-node--light {
  border: 1px solid var(--border);
  background: var(--background);
}
.sol-hub-node--light .pd-meta-label {
  color: var(--accent);
  font-size: 10px;
}
.sol-hub-node--light strong {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.sol-hub-node--decision {
  width: 100%;
  max-width: 200px;
}
.sol-hub-viz-stage--fit { gap: 20px; }

.sol-hub-entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
.sol-hub-entry-label {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.sol-hub-entry-q {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.sol-hub-entry-link {
  display: block;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-primary);
  transition: color 0.15s ease;
}
.sol-hub-entry-link:last-child { border-bottom: 1px solid var(--border); }
.sol-hub-entry-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.sol-hub-entry-hint {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
}
.sol-hub-entry-link:hover .sol-hub-entry-hint,
.sol-hub-entry-link:focus-visible .sol-hub-entry-hint {
  max-height: 4em;
  opacity: 1;
  margin-top: 8px;
}
.sol-hub-entry-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
@media (hover: none) {
  .sol-hub-entry-hint {
    max-height: none;
    opacity: 1;
    margin-top: 8px;
  }
}

.sol-hub-role-grid,
.sol-hub-outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
}
.sol-hub-card {
  padding: 22px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--background);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sol-hub-card:hover {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.sol-hub-card-kicker {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.sol-hub-card-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}
.sol-hub-card-q {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.sol-hub-card-out {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.sol-hub-mechanism {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.sol-hub-mechanism .pd-meta-label {
  display: block;
  margin-bottom: 4px;
}
.sol-hub-card-cta { font-weight: 600; }

.sol-hub-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.sol-hub-pillar-label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.sol-hub-pillar-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.sol-hub-routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 960px;
  margin: 0 auto 40px;
  text-align: center;
}
.sol-hub-route {
  padding: 20px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.sol-hub-route-q {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.sol-hub-route-name {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.sol-hub-route-cta {
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.sol-hub-route-cta:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}
.sol-hub-route-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.sol-hub-role-links {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.sol-hub-role-links-lead {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--text-secondary);
}
.sol-hub-role-links-row {
  margin: 0;
  font-size: 14px;
}
.sol-hub-role-links-row a {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.sol-hub-role-links-row a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .sol-hub-role-grid,
  .sol-hub-outcome-grid,
  .sol-hub-routes,
  .sol-hub-pillars { grid-template-columns: 1fr; max-width: 480px; }
  .sol-hub-entry-grid { grid-template-columns: 1fr; max-width: 480px; }
  .sol-hub-row { flex-direction: column; max-width: 240px; }
}