
.sv-flow__section{
 --blue:#2563EB;--violet:#7C3AED;--ink:#1F2940;--muted:#58667D;--wash:#F5F5FF;--line:#DEE5EF;--deep:#0E1733;--white:#FFFFFF;
 --section-space:120px;--gutter:32px;--content-width:1320px;--column-gap:52px;--row-gap:24px;--card-radius:24px;--card-padding:24px;--body-size:16px;--body-leading:1.65;--heading-size:25px;--heading-leading:1.15;--label-size:12px;--label-tracking:.12em;
 --control-size:44px;--border-width:1px;--focus-size:2px;--focus-offset:4px;--small-space:8px;--medium-space:16px;--large-space:32px;--frame-height:244px;--phone-width:154px;--mini-font:16px;--pulse-duration:2400ms;--beam-length:12px;
 --hub-glow:0 24px 64px rgba(64,47,159,.16);--card-shadow:0 16px 44px rgba(31,41,64,.055);--console-width:210px;--console-height:130px;--fader-height:62px;--fader-width:4px;--fader-knob-width:18px;--fader-knob-height:9px;
 width:100%;padding:var(--section-space) var(--gutter);background:transparent;color:var(--ink);font:400 var(--body-size)/var(--body-leading) "DM Sans",system-ui,sans-serif;
}
.sv-flow__section,.sv-flow__section *{box-sizing:border-box}
.sv-flow__inner{max-width:var(--content-width);margin-inline:auto}
.sv-flow__toolbar{display:flex;justify-content:flex-end;margin-bottom:var(--large-space)}
.sv-flow__pause{min-height:var(--control-size);padding:var(--small-space) var(--medium-space);border:var(--border-width) solid var(--line);border-radius:var(--control-size);background:var(--white);color:var(--muted);font:inherit;cursor:pointer}
.sv-flow__pause:hover{color:var(--blue);border-color:var(--blue)}
.sv-flow__pause:focus-visible{outline:var(--focus-size) solid var(--blue);outline-offset:var(--focus-offset)}
.sv-flow__graph{position:relative;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,.95fr) minmax(0,1.9fr);gap:var(--column-gap);align-items:center;isolation:isolate}
.sv-flow__connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1}
.sv-flow__wire{fill:none;stroke:var(--line);stroke-width:var(--focus-size);stroke-linecap:round}
.sv-flow__port{fill:var(--violet);stroke:var(--white);stroke-width:var(--focus-size)}
.sv-flow__beam{fill:none;stroke:var(--violet);stroke-width:var(--focus-size);stroke-linecap:round;stroke-dasharray:var(--beam-length) var(--path-length);animation:sv-flow__travel var(--pulse-duration) linear infinite;opacity:.65}
@keyframes sv-flow__travel{from{stroke-dashoffset:var(--path-length)}to{stroke-dashoffset:0}}
.sv-flow__section[data-still="true"] .sv-flow__beam{animation-play-state:paused;opacity:0}
.sv-flow__source,.sv-flow__hub{position:relative;min-width:0;border-radius:var(--card-radius);padding:var(--card-padding);background:var(--white)}
.sv-flow__source{box-shadow:var(--card-shadow);border:var(--border-width) solid var(--line)}
.sv-flow__eyebrow{margin:0 0 var(--medium-space);color:var(--blue);font:600 var(--label-size)/var(--heading-leading) "Manrope",system-ui,sans-serif;letter-spacing:var(--label-tracking);text-transform:uppercase}
.sv-flow__section h2,.sv-flow__section h3{margin:0 0 var(--medium-space);font:600 var(--heading-size)/var(--heading-leading) "Manrope",system-ui,sans-serif;letter-spacing:-.025em;overflow-wrap:anywhere}
.sv-flow__section p{margin-top:0}
.sv-flow__copy{margin:0;color:var(--muted)}
.sv-flow__console{width:100%;max-width:var(--console-width);height:var(--console-height);margin:var(--large-space) auto;background:linear-gradient(145deg,#26334D,var(--deep));border-radius:var(--medium-space);padding:var(--medium-space);display:flex;align-items:center;justify-content:space-around;box-shadow:inset 0 0 0 var(--border-width) rgba(255,255,255,.14)}
.sv-flow__channel{height:var(--fader-height);width:var(--fader-width);background:#58667D;position:relative;border-radius:var(--small-space)}
.sv-flow__channel::before{content:"";position:absolute;top:var(--fader-position);left:50%;transform:translateX(-50%);width:var(--fader-knob-width);height:var(--fader-knob-height);border-radius:var(--focus-size);background:var(--white)}
.sv-flow__channel::after{content:"";position:absolute;top:calc(-1 * var(--medium-space));width:var(--fader-width);height:var(--small-space);border-radius:var(--focus-size);background:var(--blue)}
.sv-flow__hub{background:radial-gradient(ellipse at top right,rgba(124,58,237,.3),transparent 65%),var(--deep);color:var(--white);box-shadow:var(--hub-glow);border:var(--border-width) solid rgba(124,58,237,.25)}
.sv-flow__hub .sv-flow__eyebrow{color:#BBCFFF}
.sv-flow__hub .sv-flow__copy{color:#FFFFFF}
.sv-flow__hub-mark{height:var(--console-height);display:flex;justify-content:center;align-items:center;gap:var(--small-space);margin-bottom:var(--medium-space)}
.sv-flow__wave{width:var(--fader-width);height:var(--wave-height);border-radius:var(--small-space);background:linear-gradient(var(--white),#9389FA)}
.sv-flow__meter-note{margin:var(--large-space) 0 0;padding-top:var(--medium-space);border-top:var(--border-width) solid rgba(255,255,255,.18);color:#DCE3F2}
.sv-flow__destinations{min-width:0}
.sv-flow__destinations>h2{font-size:var(--body-size);color:var(--muted);line-height:var(--body-leading);margin:0 0 var(--medium-space);letter-spacing:normal}
.sv-flow__outputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--row-gap)}
.sv-flow__destination{position:relative;min-width:0;background:var(--white);border:var(--border-width) solid var(--line);border-radius:var(--card-radius);padding:var(--card-padding);box-shadow:var(--card-shadow)}
.sv-flow__destination h3{font-size:20px}
.sv-flow__destination .sv-flow__copy{font-size:var(--body-size)}
.sv-flow__visual{height:var(--frame-height);display:flex;align-items:center;justify-content:center;margin-bottom:var(--card-padding);background:radial-gradient(ellipse at center,var(--wash),transparent 75%);border-radius:var(--medium-space)}
.sv-flow__audio-art{width:100%;max-width:var(--console-width);height:var(--console-height);color:var(--violet)}
.sv-flow__section :is(.sv-phone--mini,.sv-projector--mini,.sv-broadcast--mini){--section-padding:0px;--gutter:0px;--caption-size:var(--mini-font);--bezel:4px;--frame-radius:18px;padding:0;width:100%}
.sv-flow__section :is(.sv-phone--mini,.sv-projector--mini,.sv-broadcast--mini) .sv-phone__controls,.sv-flow__section :is(.sv-phone--mini,.sv-projector--mini,.sv-broadcast--mini) .sv-projector__controls,.sv-flow__section :is(.sv-phone--mini,.sv-projector--mini,.sv-broadcast--mini) .sv-broadcast__controls{display:none}
.sv-flow__section :is(.sv-phone--mini,.sv-projector--mini,.sv-broadcast--mini) .sv-phone__device{max-width:var(--phone-width);aspect-ratio:9 / 14}
.sv-flow__section :is(.sv-phone--mini,.sv-projector--mini,.sv-broadcast--mini) .sv-phone__topbar{padding:8px 10px;font-size:12px}
.sv-flow__section :is(.sv-phone--mini,.sv-projector--mini,.sv-broadcast--mini) .sv-phone__main{padding:8px}
.sv-flow__section :is(.sv-phone--mini,.sv-projector--mini,.sv-broadcast--mini) .sv-phone__history{padding:4px 6px}
.sv-flow__section :is(.sv-phone--mini,.sv-projector--mini,.sv-broadcast--mini) .sv-phone__history-line{padding:8px 0}
.sv-flow__section :is(.sv-phone--mini,.sv-projector--mini,.sv-broadcast--mini) .sv-phone__lang-badge{font-size:9px;padding:4px 8px;letter-spacing:.12em}
.sv-flow__section :is(.sv-phone--mini,.sv-projector--mini,.sv-broadcast--mini) .sv-projector__device,.sv-flow__section :is(.sv-phone--mini,.sv-projector--mini,.sv-broadcast--mini) .sv-broadcast__device{--bezel:3px;--frame-radius:12px}
.sv-flow__section :is(.sv-phone--mini,.sv-projector--mini,.sv-broadcast--mini) .sv-phone__transcript,.sv-flow__section :is(.sv-phone--mini,.sv-projector--mini,.sv-broadcast--mini) .sv-projector__transcript,.sv-flow__section :is(.sv-phone--mini,.sv-projector--mini,.sv-broadcast--mini) .sv-broadcast__transcript{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:1100px){.sv-flow__section{--column-gap:32px;--card-padding:20px}.sv-flow__graph{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sv-flow__destinations{grid-column:1 / -1}.sv-flow__outputs{grid-template-columns:repeat(4,minmax(0,1fr))}.sv-flow__visual{--frame-height:230px}}
@media(max-width:800px){.sv-flow__section{--section-space:75px;--gutter:20px;--column-gap:40px;--frame-height:260px}.sv-flow__graph{grid-template-columns:minmax(0,1fr);gap:var(--column-gap)}.sv-flow__destinations{grid-column:auto;padding-left:var(--medium-space)}.sv-flow__outputs{grid-template-columns:minmax(0,1fr)}.sv-flow__source,.sv-flow__hub{padding:var(--large-space)}.sv-flow__visual{--frame-height:260px}.sv-flow__destination{padding:var(--card-padding)}.sv-flow__destination h3{font-size:var(--heading-size)}.sv-flow__section :is(.sv-phone--mini,.sv-projector--mini,.sv-broadcast--mini) .sv-phone__device{--phone-width:170px}.sv-flow__toolbar{margin-bottom:var(--medium-space)}}
@media(prefers-reduced-motion:reduce){.sv-flow__beam{animation:none;opacity:0}}

.sv-flow__inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}.sv-flow__input{min-width:0;padding:14px 10px;border:1px solid var(--line);border-radius:14px;background:var(--wash)}.sv-flow__input h3{font-size:15px;line-height:1.4;margin:12px 0 8px}.sv-flow__input p{font-size:14px;line-height:1.5;margin:0;color:var(--muted)}.sv-flow__input-icon{display:block;width:44px;height:44px;color:var(--blue)}.sv-flow__hub-mark{height:auto;margin:12px 0 24px;justify-content:flex-start}.sv-flow__server-mark{width:56px;height:56px;color:white}.sv-flow__processes{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:12px}.sv-flow__processes li{padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.14);font-size:16px;line-height:1.45}.sv-flow__locations{font-size:12px;letter-spacing:.15em;margin:20px 0 0;color:#DCE3F2}.sv-flow__merge{fill:none;stroke:var(--blue);stroke-width:var(--focus-size)}.sv-flow__section .sv-phone--mini .sv-phone__history-line{font-size:var(--caption-size)}

.sv-flow__section{--source-width:760px;--hub-width:440px;--stage-gap:104px;--input-gap:64px;--input-pad:24px;--input-stroke:2px;--output-stroke:4px;--rack-width:160px;--rack-height:112px;--chip-size:13px;--chip-gap:12px;--chip-pad:6px;--line-gutter:20px}
.sv-flow__intro{max-width:760px;margin:0 auto 32px;text-align:center}
.sv-flow__intro h2{margin-bottom:16px}
.sv-flow__stage-bar{border-block:1px solid var(--line);margin-bottom:16px}
.sv-flow__stages{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--chip-gap);list-style:none;padding:12px 0;margin:0;font:400 var(--chip-size)/1.5 "DM Sans",system-ui,sans-serif;color:var(--muted)}
.sv-flow__stages li{padding:var(--chip-pad) 12px;border-radius:44px;background:var(--wash)}
.sv-flow__toolbar{margin-bottom:24px}
.sv-flow__graph{display:flex;flex-direction:column;gap:var(--stage-gap);align-items:center;padding-inline:var(--line-gutter)}
.sv-flow__source{width:100%;max-width:var(--source-width);padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.sv-flow__inputs{margin:0;gap:var(--input-gap)}
.sv-flow__input{padding:var(--input-pad);border-radius:var(--card-radius);background:var(--white);box-shadow:var(--card-shadow)}
.sv-flow__source-note{margin:64px 24px 0;padding-inline:24px;text-align:center}
.sv-flow__hub{width:100%;max-width:var(--hub-width);padding:var(--large-space)}
.sv-flow__hub-heading{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.sv-flow__hub-heading h2,.sv-flow__hub-heading .sv-flow__hub-title{margin:0}
.sv-flow__server-mark{width:40px;height:40px;flex:none}
.sv-flow__rack-place{display:flex;align-items:center;flex-direction:column;gap:12px;margin-top:24px}
.sv-flow__rack{display:block;width:var(--rack-width);height:var(--rack-height)}
.sv-flow__locations{margin:0}
.sv-flow__meter-note{margin-top:24px}
.sv-flow__destinations{width:100%;padding:0}
.sv-flow__outputs{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--row-gap)}
.sv-flow__wire{stroke:var(--blue);stroke-width:var(--input-stroke);opacity:.5}
.sv-flow__wire--out{stroke:var(--violet);stroke-width:var(--output-stroke)}
.sv-flow__beam--out{stroke-width:var(--output-stroke)}
@media(max-width:1100px) and (min-width:801px){.sv-flow__outputs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:64px}}
@media(max-width:800px){.sv-flow__section{--stage-gap:88px;--input-gap:32px;--line-gutter:24px}.sv-flow__intro{text-align:left}.sv-flow__stages{justify-content:flex-start}.sv-flow__inputs{grid-template-columns:minmax(0,1fr)}.sv-flow__source-note{margin:40px 0 0;padding:0;text-align:left}.sv-flow__hub{padding:24px}.sv-flow__hub-heading{gap:12px}.sv-flow__outputs{grid-template-columns:minmax(0,1fr);gap:40px}.sv-flow__graph{gap:var(--stage-gap)}.sv-flow__server-mark{width:32px;height:32px}}
.sv-flow__section .sv-flow__source-note{margin-top:64px}
.sv-flow__section .sv-flow__meter-note{margin-top:24px}
@media(max-width:800px){.sv-flow__section .sv-flow__source-note{margin-top:40px}}

.sv-flow__hub .sv-flow__processes{display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:8px 10px; counter-reset:none; list-style:none;
  padding:0; margin:18px 0 0; text-align:center}
.sv-flow__hub .sv-flow__processes li{display:inline-flex; align-items:center; gap:10px;
  padding:0; border:0; font-size:13px; line-height:1.35; letter-spacing:-.005em;
  color:#DCE6FB; white-space:nowrap}
.sv-flow__hub .sv-flow__processes li + li::before{content:""; flex:none;
  width:16px; height:7px; margin-right:2px;
  background:currentColor; opacity:.55;
  -webkit-mask:var(--sv-flow-arrow) center / contain no-repeat;
          mask:var(--sv-flow-arrow) center / contain no-repeat}
.sv-flow__section{--sv-flow-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5h20M16 1l4 4-4 4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

.sv-flow__hub{padding:22px 24px}
.sv-flow__hub .sv-flow__hub-heading{margin-bottom:0}
.sv-flow__hub .sv-flow__hub-heading h2,.sv-flow__hub .sv-flow__hub-heading .sv-flow__hub-title{font-size:21px}
.sv-flow__hub .sv-flow__rack-place{margin-top:20px; gap:8px}
.sv-flow__hub .sv-flow__rack{width:112px; height:78px}
.sv-flow__hub .sv-flow__locations{font-size:11px; letter-spacing:.16em}

.sv-flow__input{display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:14px; row-gap:2px; align-items:start}
.sv-flow__input .sv-flow__input-icon{grid-row:1 / span 2; align-self:center;
  width:34px; height:34px}
.sv-flow__input h3{grid-column:2; margin:0; font-size:15px; line-height:1.3}
.sv-flow__input p{grid-column:2; margin:0; font-size:13.5px; line-height:1.45}

@media (max-width:760px){
  .sv-flow__hub .sv-flow__processes li{white-space:normal}
  .sv-flow__hub .sv-flow__processes{gap:6px 8px}
}

.sv-flow__section{--hub-width:580px}
@media (max-width:760px){ .sv-flow__section{--hub-width:100%} }

.sv-flow__source .sv-flow__source-note{max-width:var(--reading,68ch); margin:0 auto 22px;
  text-align:center}

.sv-flow__stage-bar .sv-flow__stages{gap:0; justify-content:center; padding:0}
.sv-flow__stage-bar .sv-flow__stages li{padding:14px 28px; border-radius:0; background:none;
  text-align:center}
.sv-flow__stage-bar .sv-flow__stages li + li{border-left:1px solid var(--line)}
@media (max-width:760px){
  .sv-flow__stage-bar .sv-flow__stages li{flex:1 1 100%; padding:10px 12px}
  .sv-flow__stage-bar .sv-flow__stages li + li{border-left:0; border-top:1px solid var(--line)}
}

.sv-flow__hub-title{font:600 21px/1.2 "Manrope",system-ui,sans-serif; letter-spacing:-.02em; color:inherit}
