.foton-flow { --flow-positive:#b7f2cf; --flow-negative:#e8bfc5; margin:0 0 44px; padding:24px 0; border-block:1px solid #ffffff45; }
.flow-topline { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:44px; }
.flow-topline h3 { margin:0; font-size:24px; font-weight:500; letter-spacing:0; }
.flow-toggle { width:44px; height:44px; display:grid; place-items:center; flex-shrink:0; background:transparent; color:#fff; border:1px solid #ffffff80; border-radius:6px; cursor:pointer; }
.flow-toggle[hidden] { display:none; }
.flow-toggle:hover { background:#ffffff15; }
.flow-toggle:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.flow-toggle .icon { width:18px; height:18px; }
.flow-toggle:disabled { cursor:default; opacity:.5; }
.flow-diagram { position:relative; height:440px; isolation:isolate; }
.flow-wires { display:block; position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:-1; }
.flow-wire { fill:none; stroke:#fff; stroke-opacity:.25; stroke-width:1.5; }
.flow-wire-positive { stroke:var(--flow-positive); stroke-opacity:.55; }
.flow-wire-negative { stroke:var(--flow-negative); stroke-dasharray:4 7; stroke-opacity:.55; }
.flow-packet { opacity:0; }
.flow-packet-ray { fill:#fff; }
.flow-packet-positive { fill:var(--flow-positive); }
.flow-packet-negative { fill:var(--flow-negative); }
.flow-packet-sign { fill:none; stroke:#63232e; stroke-width:2; }
.flow-node { position:absolute; left:var(--flow-x); top:var(--flow-y); width:150px; min-width:0; transform:translate(-50%,-20px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; }
.flow-node strong { font-family:var(--font-display); font-size:18px; font-weight:500; line-height:1.2; letter-spacing:0; }
.flow-node>span { font-size:11px; line-height:1.5; max-width:150px; }
.flow-node>.icon,.flow-node>b { width:40px; height:40px; flex-shrink:0; }
.flow-node>.icon { background-color:#fff; --icon-size:24px; mask-size:24px; -webkit-mask-size:24px; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; mask-position:center; -webkit-mask-position:center; }
.flow-node>b { display:grid; place-items:center; font-size:30px; font-weight:400; line-height:1; border:1px solid currentColor; border-radius:4px; background:#ae3440; }
.flow-panel { width:250px; transform:translate(-50%,-50%); gap:0; }
.flow-panel img { width:250px; height:250px; object-fit:contain; }
.flow-panel strong { margin-top:-24px; font-size:28px; font-weight:700; }
.flow-panel>span { max-width:240px; margin-top:4px; }
.flow-source { width:150px; }
.flow-source>.icon { background-color:#fff1c7; }
.flow-positive { color:var(--flow-positive); }
.flow-positive>b { background:var(--flow-positive); color:#174d31; border-color:var(--flow-positive); }
.flow-negative,.flow-stop { color:var(--flow-negative); }
.flow-stop>.icon { background-color:var(--flow-negative); }
.flow-stop { width:150px; }
.flow-call,.flow-visit,.flow-deal { width:150px; }
.flow-call>.icon,.flow-visit>.icon,.flow-deal>.icon { background-color:var(--flow-positive); }
.flow-node.is-active strong { color:var(--flow-positive); }
.flow-negative.is-active strong { color:var(--flow-negative); }
.flow-panel.is-active img { filter:brightness(1.14); }
.flow-deal.is-active>.icon { background-color:#fff; }
.flow-progress { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; list-style:none; margin:0; padding:0; }
.flow-progress li { font-size:12px; line-height:1.5; padding:14px 0 0; border-top:2px solid #ffffff30; color:#f0d9dc; }
.flow-progress li span { margin-right:7px; font-size:10px; }
.flow-progress li[aria-current=step] { border-top-color:var(--flow-positive); color:#fff; }
.foton-flow figcaption { margin-top:20px; max-width:840px; font-size:11px; line-height:1.7; color:#f3dfe2; }
.foton-system .foton-rays span::after { animation:none; top:35%; }
.foton-flow:not([data-flow-ready]) .flow-diagram { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; height:auto; padding:28px 0; }
.foton-flow:not([data-flow-ready]) .flow-node { position:static; transform:none; width:auto; }
.foton-flow:not([data-flow-ready]) .flow-panel img { width:120px; height:120px; }
.foton-flow:not([data-flow-ready]) .flow-wires { display:none; }
@media(min-width:768px) and (max-width:1100px) {
  .flow-panel,.flow-panel img { width:200px; }
  .flow-panel img { height:200px; }
  .flow-node { width:120px; }
  .flow-node strong { font-size:16px; }
  .flow-node>span { font-size:10px; max-width:110px; }
}
@media(max-width:767px) {
  .flow-topline h3 { font-size:23px; }
  .flow-diagram { height:900px; }
  .flow-node { width:126px; }
  .flow-node strong { font-size:17px; }
  .flow-panel { width:230px; }
  .flow-panel img { width:230px; height:230px; }
  .flow-panel strong { font-size:28px; }
  .flow-panel>span { max-width:230px; }
  .flow-stop { width:110px; }
  .flow-progress { grid-template-columns:1fr 1fr; gap:16px; }
  .foton-flow:not([data-flow-ready]) .flow-diagram { grid-template-columns:1fr 1fr; }
}
@media(max-width:370px) {
  .flow-node { width:110px; }
  .flow-node>span { max-width:104px; font-size:10px; }
  .flow-panel { width:230px; }
  .flow-panel>span { max-width:230px; }
}
@media(prefers-reduced-motion:reduce) {
  .flow-packet { display:none; }
}