/* Intro flow diagram: named systems connect into Command Center Project, which feeds enterprise outcomes.
   Click-driven and cumulative: stage 0 tools connect, stage 1 the hub feeds outcomes, stage 2 the circuit runs on its own.
   Desktop SVG from 961px up, a vertical HTML variant below. Every stage visual is a [data-armed]/[data-stage] rule, so the
   reduced-motion kill switch in profile-motion.css snaps straight to the final state. Companion to components/flow-diagram.tsx. */

/* Card */
.flow-card{position:relative;overflow:hidden;border-radius:12px;background-color:#243344;background-image:radial-gradient(#3a4c62 1px,transparent 1.2px);background-size:22px 22px;box-shadow:0 18px 40px #243f7220;color:#f4f8fc;padding:22px 0 0}
.fd-cols{display:flex;justify-content:space-between;padding:0 40px 6px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#b7d1f2}
.fd{display:none;width:100%;height:auto;overflow:visible;font-family:inherit}
.fd-vert{display:block;padding:0 16px 22px}
@media(min-width:961px){.fd{display:block}.fd-vert{display:none}}
@media(max-width:960px){.flow-card{padding-top:20px}.fd-cols{display:none}}

/* Pills */
.fd-pill-bg{fill:#1e2a39;stroke:#6d84a3;stroke-width:1;transition:stroke .4s var(--ease) calc(.5s + var(--i)*.09s)}
.fd-tool .fd-pill-bg{stroke-dasharray:5 4}
.flow-card[data-armed=true] .fd-tool .fd-pill-bg{stroke:#4888f0;stroke-dasharray:none}
.fd-pill-icon{color:#70a8f8}
.fd-pill-glyph{fill:#f4f8fc}
.fd-pill-label{font-size:16px;font-weight:500;fill:#f4f8fc;letter-spacing:-.01em}
.fd-outcome{opacity:.4;transition:opacity .4s var(--ease) calc(.5s + var(--i)*.09s)}
.flow-card[data-armed=true]:is([data-stage="1"],[data-stage="2"]) .fd-outcome{opacity:1}
.flow-card[data-armed=true]:is([data-stage="1"],[data-stage="2"]) .fd-outcome .fd-pill-bg{stroke:#4888f0}
.flow-card[data-stage="0"] .fd-outcome{transition-delay:0s}

/* Connectors. pathLength=1 on every path, so dashoffset 1 hides a line and 0 draws it fully. */
.fd-glow,.fd-core{fill:none;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease) calc(var(--i)*.09s)}
.fd-glow{stroke:#4888f0;stroke-width:6;opacity:.35}
.fd-core{stroke:#70a8f8;stroke-width:2.2}
.fd-stub{stroke:#b7d1f2;stroke-width:1.5;stroke-dasharray:4 3;opacity:.55;transition:opacity .3s calc(var(--i)*.09s)}
.fd-stub-end{fill:#b7d1f2;opacity:.55;transition:opacity .3s calc(var(--i)*.09s)}
.flow-card[data-armed=true] .fd-in .fd-glow,.flow-card[data-armed=true] .fd-in .fd-core{stroke-dashoffset:0}
.flow-card[data-armed=true] .fd-in .fd-stub,.flow-card[data-armed=true] .fd-in .fd-stub-end{opacity:0}
.flow-card[data-armed=true]:is([data-stage="1"],[data-stage="2"]) .fd-out .fd-glow,.flow-card[data-armed=true]:is([data-stage="1"],[data-stage="2"]) .fd-out .fd-core{stroke-dashoffset:0}
.flow-card[data-stage="0"] .fd-out .fd-glow,.flow-card[data-stage="0"] .fd-out .fd-core{transition-duration:.45s;transition-delay:calc((5 - var(--i))*.04s)}

/* Hub */
.fd-hub-glow{fill:none;stroke:#4888f0;stroke-width:10;opacity:0;transition:opacity .6s .55s}
.fd-hub-rect{fill:#1e2a39;stroke:#4888f0;stroke-width:1.5;stroke-opacity:.35;transition:stroke-opacity .5s .5s}
.fd-hub-text{opacity:.55;transition:opacity .5s .5s}
.fd-hub-title{font-size:22px;font-weight:700;letter-spacing:.08em;fill:#f4f8fc}
.fd-hub-accent{fill:#70a8f8}
.fd-hub-sub{font-size:12px;letter-spacing:.06em;fill:#b7d1f2}
.flow-card[data-armed=true] .fd-hub-glow{opacity:.35}
.flow-card[data-armed=true] .fd-hub-rect{stroke-opacity:1}
.flow-card[data-armed=true] .fd-hub-text{opacity:1}
@keyframes fd-pulse{0%,100%{opacity:.3}50%{opacity:.6}}
.flow-card[data-stage="2"][data-armed=true] .fd-hub-glow{animation:fd-pulse 3.2s ease-in-out infinite}

/* Vertical variant (960px and below) */
.fd-v-label{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#b7d1f2;text-align:center}
.fd-v-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.fd-v-pill{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 14px;border:1px solid #6d84a3;border-radius:10px;background:#1e2a39;color:#f4f8fc;font-size:14px;font-weight:500;line-height:1.3;transition:opacity .4s var(--ease) calc(.4s + var(--i)*.07s),border-color .4s var(--ease) calc(.4s + var(--i)*.07s)}
.fd-v-pill svg{flex-shrink:0;color:#70a8f8}
.fd-v-pill .fd-v-mark{width:20px;height:20px;flex-shrink:0;object-fit:contain}
.fd-v-pill .fd-v-glyph{color:#f4f8fc}
.fd-v-tools .fd-v-pill{border-bottom:2px dashed #b7d1f2}
.flow-card[data-armed=true] .fd-v-tools .fd-v-pill{border-color:#4888f0;border-bottom:2px solid #4888f0}
.fd-v-outcomes .fd-v-pill{opacity:.4}
.flow-card[data-armed=true]:is([data-stage="1"],[data-stage="2"]) .fd-v-outcomes .fd-v-pill{opacity:1;border-color:#4888f0}
.flow-card[data-stage="0"] .fd-v-outcomes .fd-v-pill{transition-delay:0s}
.fd-v-bus{position:relative;width:2px;height:36px;margin:12px auto;background:repeating-linear-gradient(180deg,#b7d1f299 0 4px,transparent 4px 7px)}
.fd-v-bus::after{content:'';position:absolute;inset:0;background:#4888f0;transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease)}
.flow-card[data-armed=true] .fd-v-bus-in::after{transform:scaleY(1)}
.flow-card[data-armed=true]:is([data-stage="1"],[data-stage="2"]) .fd-v-bus-out::after{transform:scaleY(1);transition-delay:.15s}
.fd-v-bus::before{content:'';position:absolute;left:-2px;top:-6px;width:6px;height:6px;border-radius:50%;background:#f4f8fc;box-shadow:0 0 8px #70a8f8;opacity:0;z-index:1}
@keyframes fd-v-comet{from{top:-6px;opacity:0}15%{opacity:1}to{top:100%;opacity:0}}
.flow-card[data-stage="2"][data-armed=true] .fd-v-bus::before{animation:fd-v-comet 1.6s linear infinite}
.flow-card[data-stage="2"][data-armed=true] .fd-v-bus-out::before{animation-delay:.8s}
.fd-v-hub{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px;text-align:center;border:1px solid #4888f0;border-radius:12px;background:#1e2a39;opacity:.6;transition:opacity .5s .4s,box-shadow .5s .4s}
.fd-v-hub img{width:44px;height:50px;object-fit:contain}
.fd-v-hub-title{font-size:17px;font-weight:700;letter-spacing:.08em}
.fd-v-hub-title b{color:#70a8f8;font-weight:700}
.fd-v-hub-sub{font-size:12px;letter-spacing:.06em;color:#b7d1f2}
.flow-card[data-armed=true] .fd-v-hub{opacity:1;box-shadow:0 0 28px #4888f040}

/* Intro layout v2: three cards in a row under the diagram, closing line and link on one row. */
.clarity-accordion.clarity-row{margin-top:28px;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.clarity-footer{display:flex;justify-content:flex-end;align-items:center;gap:24px;margin-top:28px}
.clarity-footer .clarity-closing{margin:0;max-width:720px}
.clarity-footer .text-link{margin:0;flex-shrink:0}
@media(max-width:1100px){.clarity-row .clarity-item h3 button{font-size:19px;padding-inline:18px}}
@media(max-width:850px){.clarity-accordion.clarity-row{grid-template-columns:1fr;gap:12px}.clarity-footer{flex-direction:column;align-items:flex-start;gap:8px}}