/* The system flow teaser on /ciaas (NexusG8, 19 Oct 2026): seven steps in
   a row, a dashed current running between them, and the return arc that
   carries the benefit from the last step back to the first. Ours, not the
   packet's: kept across a refresh (scripts/install-ciaas.ts, KEEP). */
.cf-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end}
.cf-head h2 em{color:var(--lime);font-style:normal}
.cf-cta{display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:14px 20px;border:1px solid var(--lime);border-radius:999px;color:var(--lime);font-size:14px;font-weight:600;text-decoration:none;transition:background .2s,color .2s}
.cf-cta:hover,.cf-cta:focus-visible{background:var(--lime);color:var(--ink)}
.cf-diagram{position:relative;margin-top:64px;padding-bottom:96px}
.cf-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:18px;position:relative}
.cf-steps li{position:relative;display:grid;gap:6px;align-content:start;padding:18px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.cf-steps small{font:11px/1 'Courier New',monospace;letter-spacing:.12em;color:var(--lime)}
.cf-steps b{font-size:16px;line-height:1.25;color:var(--white)}
.cf-steps span{font-size:13px;line-height:1.45;color:var(--muted)}
.cf-steps li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-18px;width:18px;height:2px;background:repeating-linear-gradient(90deg,var(--lime) 0 5px,transparent 5px 9px);background-size:9px 2px;animation:cf-run 0.9s linear infinite}
.cf-steps li.cf-last{border-color:var(--lime);box-shadow:0 0 0 4px rgba(214,255,96,.08)}
.cf-return{position:absolute;left:0;right:0;bottom:30px;width:100%;height:70px;overflow:visible}
.cf-return path{fill:none;stroke:var(--lime);stroke-width:1.6;stroke-dasharray:6 8;animation:cf-back 1.6s linear infinite;opacity:.8}
.cf-loop{position:absolute;left:50%;bottom:0;transform:translateX(-50%);margin:0;white-space:nowrap;font:12px/1.4 'Courier New',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--lime);background:var(--ink);padding:6px 14px;border:1px solid var(--line);border-radius:999px}
.cf-loop span{font-size:15px}
@keyframes cf-run{to{background-position:9px 0}}
@keyframes cf-back{to{stroke-dashoffset:-28}}
@media (max-width:1100px){.cf-steps{grid-template-columns:repeat(4,minmax(0,1fr))}.cf-steps li:nth-child(4)::after{display:none}}
@media (max-width:760px){
 .cf-head{grid-template-columns:1fr}
 .cf-diagram{padding-bottom:0}
 .cf-steps{grid-template-columns:1fr;gap:14px;padding-left:22px}
 .cf-steps::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:repeating-linear-gradient(180deg,var(--lime) 0 6px,transparent 6px 12px);background-size:2px 12px;animation:cf-down 1s linear infinite}
 .cf-steps li::after{display:none}
 .cf-return{display:none}
 .cf-loop{position:static;transform:none;display:inline-block;margin-top:18px;white-space:normal}
}
@keyframes cf-down{to{background-position:0 12px}}
@media (prefers-reduced-motion:reduce){.cf-steps li::after,.cf-steps::before,.cf-return path{animation:none}}
.cf .note{margin-top:28px}