/* Staging-only Signal alternative; version 1 does not load this stylesheet. */
.iv-system-signal{padding-block:72px}.iv-system-signal .iv-system-layout{display:block}.iv-system-signal .iv-system-title{display:block;text-align:center;margin-bottom:36px}.iv-system-signal .iv-system-title h2{max-width:22ch;margin:0 auto 24px}.iv-system-signal .iv-system-title>.iv-text-link{display:inline-flex;align-items:center;gap:8px;white-space:normal;margin:0}.iv-system-signal .iv-flow-signal{width:100%;max-width:none;margin:0 auto}.iv-flow-signal>figcaption{text-align:center;margin-bottom:16px}.iv-system-signal .iv-flow-caption{margin-inline:auto;text-align:center}.iv-system-signal .iv-flow-actions{text-align:center}
/* The satellite areas occupy 40% each; ERP occupies the middle 20%. */
.iv-flow-signal .iv-flow-track{grid-template-columns:40% 20% 40%;grid-template-rows:repeat(4,88px);gap:24px 0;height:424px}.iv-flow-signal .iv-flow-node{height:88px;min-height:88px}.iv-flow-signal .iv-flow-route{stroke:var(--iv-muted);stroke-width:1.25;stroke-opacity:.75}.iv-flow-signal .iv-flow-port{display:none}.iv-flow-signal .iv-flow-packet{fill:var(--iv-accent);stroke:var(--iv-paper);stroke-width:1.5}.iv-flow-signal .iv-flow-core{height:240px;min-height:240px;background:transparent;border:0;border-radius:18px;color:var(--iv-ink);isolation:isolate;overflow:visible}.iv-flow-signal .iv-flow-core>.iv-flow-apps{top:24px}.iv-flow-signal .iv-flow-core>strong{top:88px;font-size:22px}.iv-flow-signal .iv-flow-core>small{top:122px;color:var(--iv-muted)}.iv-flow-signal .iv-flow-app{border:1px solid var(--iv-line);border-radius:50%;padding:7px;box-shadow:none}.iv-flow-signal .iv-logo-enhanced.is-open .iv-flow-app{box-shadow:none}.iv-flow-signal .iv-flow-core .iv-flow-apps:focus-visible{outline-color:var(--iv-accent)}
.iv-flow-core-tags{position:absolute;left:8px;right:8px;bottom:24px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.iv-flow-core-tags>span{font-size:11px;line-height:1.4;border:1px solid var(--iv-line);border-radius:5px;padding:5px 7px;background:var(--iv-paper);color:var(--iv-muted)}
/* Labels float over the diagram; opening them never changes row spacing. */
.iv-flow-signal .iv-flow-label{display:none;position:absolute;z-index:10;top:56px;left:50%;width:min(200px,calc(100vw - 24px));padding:10px 12px;border:1px solid var(--iv-line);border-radius:8px;background:var(--iv-paper);color:var(--iv-ink);text-align:left;transform:translateX(calc(-50% + var(--iv-tooltip-shift,0px)))}.iv-flow-signal .iv-apps-open>.iv-flow-label{display:block}.iv-flow-signal .iv-flow-label>strong{display:block;position:static;width:auto;max-width:none;margin:0;font:700 12px/1.4 'IV Sans',sans-serif;color:var(--iv-ink);overflow-wrap:anywhere}.iv-flow-signal .iv-flow-label>small{display:block;position:static;width:auto;max-width:none;margin:4px 0 0;font:400 11px/1.5 'IV Sans',sans-serif;color:var(--iv-muted);overflow-wrap:anywhere}
.iv-flow-junction{display:block;position:absolute;z-index:3;top:50%;transform:translate(-50%,-50%);padding:6px 9px;border:1px solid var(--iv-line);border-radius:18px;background:var(--iv-paper);color:var(--iv-ink);font-size:11px;line-height:1.4;white-space:nowrap}.iv-flow-junction-left{left:40%}.iv-flow-junction-right{left:60%}.iv-flow-static-signal{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
/* The reference's rings originate at the database badge and fade into the card. */
.iv-flow-energy {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  mask-image: linear-gradient(transparent 40%, #000 85%);
}
.iv-flow-energy::before,
.iv-flow-energy > i {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(160px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, 50%);
}
.iv-flow-energy::before {
  content: "";
  background: radial-gradient(circle, transparent 38%, color-mix(in srgb, var(--iv-accent) 30%, transparent) 39%, transparent 40%, transparent 55%, color-mix(in srgb, var(--iv-accent) 22%, transparent) 56%, transparent 57%, transparent 70%, color-mix(in srgb, var(--iv-accent) 16%, transparent) 71%, transparent 72%);
}
.iv-flow-energy > i {
  border: 1px solid color-mix(in srgb, var(--iv-accent) 38%, transparent);
  animation: iv-erp-radiate 4.5s ease-out infinite paused;
}
.iv-flow-energy > i:nth-child(2) { animation-delay: -1.5s; }
.iv-flow-energy > i:nth-child(3) { animation-delay: -3s; }
.iv-flow-signal[data-flow-state="playing"] .iv-flow-energy > i { animation-play-state: running; }
@keyframes iv-erp-radiate {
  0% { opacity: 0; transform: translate(-50%, 50%) scale(.24); }
  20% { opacity: .8; }
  100% { opacity: 0; transform: translate(-50%, 50%) scale(1.25); }
}
.iv-flow-signal .iv-flow-core {
  background: var(--iv-paper);
  border: 1px solid var(--iv-line);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--iv-ink) 4%, transparent),
              0 8px 24px color-mix(in srgb, var(--iv-ink) 9%, transparent);
}
.iv-flow-signal .iv-flow-core > strong {
  top: 80px;
  left: 50%;
  width: calc(100% + 16px);
  padding: 5px 0;
  border: 1px solid var(--iv-line);
  border-radius: 8px;
  background: var(--iv-paper);
  transform: translateX(-50%);
}
.iv-flow-signal .iv-flow-core-tags { bottom: 38px; }
.iv-flow-database {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--iv-line);
  background: var(--iv-paper);
  color: var(--iv-ink);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--iv-ink) 12%, transparent);
  transform: translate(-50%, 50%);
}
.iv-flow-junction::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: 5px;
  border-radius: 50%;
  background: var(--iv-accent);
}
.iv-flow-plain-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;max-width:840px;margin:24px auto 0;padding:0;list-style:none}.iv-flow-plain-list strong,.iv-flow-plain-list span{display:block;font:400 12px/1.5 'IV Sans',sans-serif}.iv-flow-plain-list strong{font-weight:700}
@media(min-width:601px){.iv-flow-signal .iv-flow-routes:not(.is-routed){display:none}.iv-flow-signal .iv-flow-routes:not(.is-routed)+.iv-flow-static-signal{display:block}}
@media(max-width:600px){.iv-system-signal{padding-block:48px}.iv-system-signal .iv-system-title{margin-bottom:28px}.iv-system-signal .iv-system-title h2{max-width:20ch}.iv-flow-signal>figcaption{max-width:29ch;margin-inline:auto}.iv-flow-signal .iv-flow-track{grid-template-columns:30% 40% 30%}.iv-flow-signal .iv-flow-core{height:170px;min-height:170px}.iv-flow-signal .iv-flow-core>.iv-flow-apps{top:8px}.iv-flow-signal .iv-flow-core>strong{top:64px;font-size:17px}.iv-flow-signal .iv-flow-core>small{top:102px}.iv-flow-core-tags,.iv-flow-junction{display:none}.iv-flow-plain-list{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.iv-flow-energy > i{display:none}}

/* Separate platform badges share each category's existing connection. */
.iv-flow-network.iv-flow-signal .iv-flow-node > .iv-flow-app-row {
  left: 50%;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  width: calc(100% - 4px);
  height: 48px;
  transform: translateX(-50%);
  color: var(--iv-ink);
}
.iv-flow-network.iv-flow-signal .iv-flow-core > .iv-flow-app-row { top: 24px; }
.iv-flow-signal .iv-flow-app-row > .iv-flow-app {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: clamp(26px, 3vw, 42px);
  height: auto;
  aspect-ratio: 1;
  padding: clamp(4px, .55vw, 8px);
}
.iv-flow-app-row > .iv-flow-app:focus-visible {
  outline: 2px solid var(--iv-accent);
  outline-offset: 2px;
}
.iv-flow-signal .iv-flow-app-row:is(:hover, :focus-within) + .iv-flow-label {
  display: block;
}
@media (max-width: 800px) {
  .iv-flow-signal .iv-flow-label { width: min(200px, 26vw); }
}
@media (max-width: 600px) {
  .iv-flow-network.iv-flow-signal .iv-flow-core > .iv-flow-app-row { top: 8px; }
  .iv-flow-signal .iv-flow-app-row { column-gap: 3px; row-gap: 2px; }
  .iv-flow-signal .iv-flow-app-row > .iv-flow-app { width: 23px; }
}

.iv-flow-app-row .iv-app-shopify { color: #5e8e3e; }
.iv-flow-app-row .iv-app-prestashop { color: #a42b62; }
.iv-flow-app-row .iv-app-amazon { color: #252f3e; }
.iv-flow-app-row .iv-app-magento { color: #d64c19; }
.iv-flow-app-row .iv-app-hubspot { color: #e85d37; }
.iv-flow-app-row .iv-app-pinterest { color: #bd081c; }
.iv-flow-app-row .iv-app-mailchimp { color: #241c15; }
.iv-flow-app-row .iv-app-ups { color: #351c15; }
.iv-flow-app-row .iv-app-fedex { color: #4d148c; }
.iv-flow-app-row .iv-app-dpd { color: #dc0032; }
.iv-flow-app-row .iv-app-usps { color: #333366; }
.iv-flow-app-row .iv-app-intercom { color: #286efa; }
.iv-flow-app-row .iv-app-whatsapp { color: #087e5a; }
.iv-flow-app-row .iv-app-adyen { color: #087b40; }
.iv-flow-app-row .iv-app-klarna { color: #a63764; }

@media (prefers-reduced-motion: reduce) {
  .iv-flow-network.iv-flow-signal .iv-flow-node > .iv-flow-app-row {
    transform: translateX(-50%) !important;
  }
}