/* Capability three: animated "delivery versus purchase order" lanes on the navy surface. */
.flow-demo{--fig-bg:#132438;--fig-border:#1f3449;--cap-color:#a7b3bd;--surf:#0f1e30;--surf-border:#223850;--divider:#1f3449;--t-ink:#f4f1ea;--t-muted:#9aa7b0;--t-warn:#efc6a6;--lane-bg:#0c1929;--lane-border:#223850;--card-bg:#172c42;--card-border:#284058;--rec-glow:168,220,187;--flag-glow:239,198,166;background:var(--fig-bg);border-color:var(--fig-border)}
.flow-demo figcaption{color:var(--cap-color)}
.flow-surface{background:var(--surf);border:1px solid var(--surf-border);border-radius:4px;overflow:hidden;color:var(--t-ink)}
.flow-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--divider)}
.flow-head h4{font-family:Manrope,sans-serif;font-size:1rem;font-weight:600;line-height:1.4;letter-spacing:-.025em;margin:0;color:var(--t-ink)}
.flow-head span{font-size:.8125rem;color:var(--t-muted);white-space:nowrap}
.flow-lanes{list-style:none;margin:0;padding:14px 18px 6px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.flow-lane{display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--lane-bg);border:1px dashed var(--lane-border);border-radius:4px;transition:border-color .3s;will-change:transform}
.flow-lane.is-current{border-style:solid;border-color:#3a5878}
.flow-lane.is-done{border-style:solid;border-color:#2f4a63}
.flow-lane-head{display:flex;align-items:center;gap:8px;min-height:22px}
.flow-step{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border:1px solid #3a5878;border-radius:50%;font-size:.6rem;color:var(--t-muted);transition:background .3s,border-color .3s,color .3s}
.flow-lane.is-current .flow-step{background:#f5eadb;border-color:#c98a5c;color:#7b4929}
.flow-lane.is-done .flow-step{background:#1e3d33;border-color:#3f6b58;color:#a8dcbb}
.flow-lane-head strong{font-size:.75rem;font-weight:600;letter-spacing:-.01em;color:var(--t-ink);flex:1;min-width:0}
.flow-lane-status{font-size:.625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted);white-space:nowrap;transition:color .3s}
.flow-lane.is-current .flow-lane-status{color:var(--t-warn)}
.flow-lane.is-done .flow-lane-status{color:#a8dcbb}
.flow-slot{min-height:92px;display:flex;flex-direction:column}
.flow-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:9px 10px 8px;overflow:hidden;background:var(--card-bg);border:1px solid var(--card-border);border-radius:4px;will-change:transform}
.flow-card::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s ease;background:radial-gradient(130px 90px at 0 0,rgba(var(--rec-glow),.16),transparent 70%)}
.flow-card.is-good::before{opacity:1}
.flow-card.is-good{border-color:#3f6b58}
.flow-card.is-warn::before{opacity:1;background:radial-gradient(130px 90px at 0 0,rgba(var(--flag-glow),.2),transparent 70%)}
.flow-card.is-warn{border-color:#d6a27a;box-shadow:0 0 0 1px rgba(var(--flag-glow),.45),0 0 22px rgba(var(--flag-glow),.16)}
.flow-card-title{font-size:.75rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--t-ink);transition:color .3s}
.flow-card.is-warn .flow-card-title{color:var(--t-warn)}
.flow-card-amount{font-family:Manrope,sans-serif;font-size:1.125rem;font-weight:600;line-height:1.1;letter-spacing:-.03em;color:var(--t-ink);font-variant-numeric:tabular-nums;transition:opacity .22s ease}
.flow-card-amount.swap{opacity:0}
.flow-chip{align-self:flex-start;margin-top:2px;padding:2px 7px;border-radius:2px;font-size:.5625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:14px;white-space:nowrap;min-width:40px;min-height:18px;box-sizing:border-box;background:#1d3247;color:#93a3b0;transition:background .2s,color .2s}
.flow-card.is-good .flow-chip{background:#1e3d33;color:#a8dcbb}
.flow-card.is-warn .flow-chip{background:#efc6a6;color:#3b2314}
.flow-card-note{font-size:.6875rem;line-height:1.4;color:var(--t-muted);min-height:15px}
.flow-card.bloom{animation:flow-bloom .9s ease-out}
@keyframes flow-bloom{0%{box-shadow:0 0 0 0 rgba(var(--g),0)}25%{box-shadow:0 0 0 1px rgba(var(--g),.75),0 0 26px rgba(var(--g),.35)}100%{box-shadow:0 0 0 0 rgba(var(--g),0)}}
.flow-card.flying{z-index:3;animation:flow-fly .55s ease-in-out}
@keyframes flow-fly{0%{filter:blur(0)}45%{filter:blur(1.5px)}100%{filter:blur(0)}}
.flow-extra{min-height:46px;display:flex;flex-direction:column;gap:2px;justify-content:center;padding:6px 10px;border-radius:2px;font-size:.6875rem;line-height:1.4;color:var(--t-muted);opacity:0;transition:opacity .35s ease,transform .35s ease;transform:translateY(4px)}
.flow-extra.is-on{opacity:1;transform:none}
.flow-reminder{border-left:3px solid #c98a5c;background:rgba(239,198,166,.1)}
.flow-reminder strong{display:none;font-size:.6875rem;font-weight:500;color:var(--t-warn);line-height:1.4}
.flow-reminder.is-sent strong{display:block}
.flow-demo .enter{animation:flow-slab .24s cubic-bezier(.2,.8,.2,1) both}
@keyframes flow-slab{from{opacity:0;transform:translateX(-12px) skewX(-12deg) scaleX(.82)}to{opacity:1;transform:none}}
.flow-demo .out{animation:flow-slab-out .18s ease-in both}
@keyframes flow-slab-out{from{opacity:1;transform:none}to{opacity:0;transform:translateX(10px) skewX(10deg) scaleX(.85)}}
.flow-note{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0 0;padding:10px 18px 14px;border-top:1px solid var(--divider);font-size:.75rem;line-height:1.5;color:var(--t-muted)}
.flow-note [data-flow-note]{color:var(--t-warn);transition:opacity .3s}
.flow-note [data-flow-note].swap{opacity:0}
@media(max-width:1050px){.flow-lanes{padding:12px 14px 6px;gap:8px}.flow-lane{padding:8px}}
@media(max-width:560px){.flow-lanes{grid-template-columns:1fr;padding:12px 12px 6px}.flow-slot{min-height:0}.flow-head,.flow-note{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){.flow-lane,.flow-card,.flow-card::before,.flow-card-title,.flow-card-amount,.flow-extra,.flow-step,.flow-lane-status{animation:none!important;transition:none!important}}

/* Definition line under capability three's steps. Quieter than the row copy,
   with the linked term in light copper on the navy surface. */
.capability-copy .capability-definition{max-width:370px;margin:22px 0 0;font-size:.875rem;line-height:1.6}
.services .capability-copy>p.capability-definition{color:#9aa7b0}
.capability-definition a{color:#e1b18b;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.capability-definition a:hover,.capability-definition a:focus-visible{color:#f0cbad}
@media(max-width:760px){.capability-copy .capability-definition{max-width:520px}}