/* Scoped additions: existing brand, header and light/dark styles are unchanged. */
.solum-flow {
  --flow-gold: var(--color-brand, #d6ad4f);
  --flow-bright: var(--color-glow, #f1d68b);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 18px 8px;
  list-style: none;
  border: 1px solid rgba(214,173,79,.2);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(214,173,79,.065), rgba(214,173,79,.015));
}
.solum-flow-step { position: relative; min-width: 0; text-align: center; }
.solum-flow-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 11px;
  border: 1px solid rgba(var(--solum-neutral-rgb,255,255,255),.18);
  border-radius: 50%;
  background: var(--color-ink-2, #15140f);
  color: var(--color-muted, #9b9b8c);
  font: 600 11px/1 "Inter", system-ui, sans-serif;
  transition: border-color .35s ease, background-color .35s ease, color .35s ease;
}
.solum-flow-node::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--flow-gold);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.solum-flow-label { display: block; padding: 0 8px; color: var(--color-muted,#a4a397); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.solum-flow-link { position: absolute; top: 17px; left: calc(50% + 23px); width: calc(100% - 46px); height: 2px; border-radius: 2px; background: rgba(214,173,79,.18); overflow: hidden; }
.solum-flow-signal { display: block; width: 30%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--flow-gold), var(--flow-bright)); opacity: 0; transform: translateX(-110%); }
.solum-flow-step.is-active .solum-flow-node,
.solum-flow-step.is-done .solum-flow-node { color: var(--flow-bright); border-color: var(--flow-gold); background: var(--color-ink-2,#15140f); }
.solum-flow-step.is-active .solum-flow-label,
.solum-flow-step.is-done .solum-flow-label { color: var(--color-cream,#f4f0de); }
.solum-flow-step.is-done .solum-flow-link { background: var(--flow-gold); opacity: .55; }
.solum-flow-step.is-active .solum-flow-node::after { animation: solum-flow-ring 2.2s ease-out infinite paused; }
.solum-flow-step.is-active .solum-flow-signal { animation: solum-flow-travel 1.8s cubic-bezier(.25,.5,.5,1) infinite paused; }
.solum-flow.is-playing .is-active .solum-flow-node::after,
.solum-flow.is-playing .is-active .solum-flow-signal { animation-play-state: running; }
.solum-demo-panel { min-width: 0; max-width: 100%; }
.solum-industry-selection { max-width: 900px; margin: 0 auto; }
.solum-choice-label { display: block; max-width: 460px; margin: 0 auto 24px; color: var(--color-muted,#a4a397); font-size: 12px; font-weight: 600; }
.solum-choice-label > span { display: block; margin: 0 0 8px; }
.solum-choice { display: block; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid rgba(214,173,79,.4); border-radius: 12px; background: var(--solum-select-bg,#15140f); color: var(--color-cream,#f4f0de); font: 600 14px/1.4 "Inter",system-ui,sans-serif; cursor: pointer; }
.solum-industry-card { animation: solum-panel-enter .35s ease-out; }
.solum-systems-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; align-items: stretch; }
.solum-systems-grid > * { min-width: 0; }
.solum-systems-extra { margin-top: 24px; grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 840px; margin-inline: auto; }
.solum-systems-grid .card { min-width: 0; }
.solum-systems-grid h3 { overflow-wrap: anywhere; }
@keyframes solum-flow-travel { 0% { transform: translateX(-110%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(440%); opacity: 0; } }
@keyframes solum-flow-ring { 0% { transform: scale(.8); opacity: .42; } 75%,100% { transform: scale(1.25); opacity: 0; } }
@keyframes solum-panel-enter { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) { .solum-systems-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) {
  .solum-systems-grid { grid-template-columns: minmax(0,1fr); }
  .solum-flow { padding: 16px 3px; }
  .solum-flow-label { padding-inline: 4px; font-size: 10px; line-height: 1.5; }
  .solum-flow-node { width: 30px; height: 30px; font-size: 10px; }
  .solum-flow-link { top: 14px; left: calc(50% + 19px); width: calc(100% - 38px); }
}
@media (prefers-reduced-motion: reduce) {
  .solum-flow *, .solum-flow *::after, .solum-industry-card { animation: none !important; transition: none !important; }
}