/* Connected idea: scattered requests converge as the opening reel advances.
   Pale blue field, oversized established Inter lettering, one scroll-linked drawing.
   Existing workflow examples retain their reel positions and content. */
.workflow-reel.is-spark { background: #e9f2fc; }
.workflow-reel.is-spark::before { display: none; }
.workflow-reel.is-spark .workflow-reel__progress { visibility: hidden; }
.spark-connected { --connect: 1; position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(180px,1fr) auto; padding: clamp(5rem,10vh,7rem) 6vw 2rem; color: #102f53; background: #e9f2fc; overflow: hidden; }
.spark-connected__intro { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.spark-connected h2 { margin: 0; color: #0a5cff; font-size: clamp(3rem,7.6vw,6rem); font-weight: 850; line-height: .98; letter-spacing: -.04em; }
.spark-connected h2 em { font-style: normal; display: block; }
.spark-connected__intro p { margin: 0 0 .3rem; max-width: 29rem; font-size: clamp(1rem,1.35vw,1.2rem); line-height: 1.6; }
.spark-connected__canvas { position: relative; width: min(100%,1200px); min-height: 0; margin: 0 auto; }
.spark-connected__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.spark-connected__lines path { fill: none; stroke: #0a5cff; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--connect)); opacity: .65; }
.spark-request { position: absolute; display: grid; gap: .65rem; padding: 1rem 1.3rem; width: 24%; max-width: 270px; background: #fff; border-radius: 12px; box-shadow: 0 10px 25px #14365b12; transform: translateY(calc((1 - var(--connect)) * var(--drift, 18px))) rotate(calc((1 - var(--connect)) * var(--tilt, -6deg))); }
.spark-request span { font-size: clamp(.85rem,1.3vw,1.15rem); font-weight: 730; line-height: 1.25; }
.spark-request small { font-size: .75rem; color: #425e7d; }
.spark-request--one { left: 4%; top: 7%; }
.spark-request--two { left: 0; bottom: 7%; --tilt: 5deg; --drift: -14px; }
.spark-request--three { right: 5%; top: 5%; --tilt: 7deg; }
.spark-request--four { right: 0; bottom: 7%; --tilt: -5deg; --drift: -18px; }
.spark-connected__junction { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; width: 37%; }
.spark-connected__junction > svg { width: clamp(50px,7vw,90px); height: clamp(50px,7vw,90px); display: block; margin: 0 auto 10px; fill: #0a5cff; transform: rotate(calc((1 - var(--connect)) * -45deg)); }
.spark-connected__junction strong { display: block; font-size: clamp(1.25rem,2.4vw,2rem); letter-spacing: -.03em; }
.spark-connected__junction > span { display: block; margin-top: .55rem; font-size: .8rem; }
.spark-connected__footer { border-top: 1px solid #b1c8e0; padding-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.spark-connected__footer p { margin: 0; font-size: .95rem; line-height: 1.6; }
.spark-connected__footer a { display: inline-flex; align-items: center; gap: 1.5rem; padding: 1rem 1.3rem; border-radius: 11px; color: white; background: #0a5cff; font-size: .9rem; font-weight: 750; text-decoration: none; }
.spark-connected__footer a:hover { background: #0647c8; }
.spark-connected__footer a:focus-visible { outline: 3px solid #102f53; outline-offset: 4px; }
.spark-connected__continue { font-size: .8rem; }
@media(max-width:800px) {
 .spark-connected { padding: 5.5rem 1.25rem 1.25rem; grid-template-rows: auto minmax(240px,1fr) auto; }
 .spark-connected__intro { display: block; }
 .spark-connected h2 { font-size: clamp(2.6rem,10vw,4rem); }
 .spark-connected h2 em { display: inline; }
 .spark-connected__intro p { margin-top: 1rem; font-size: .9rem; line-height: 1.45; }
 .spark-request { padding: .65rem; width: 39%; gap: .3rem; }
 .spark-request span { font-size: .8rem; }
 .spark-request small { font-size: .65rem; }
 .spark-request--one,.spark-request--three { top: 5%; }
 .spark-request--two,.spark-request--four { bottom: 5%; }
 .spark-connected__junction { width: 64%; }
 .spark-connected__junction > svg { width: 36px; height: 36px; margin-bottom: 4px; }
 .spark-connected__junction strong { font-size: 1.15rem; }
 .spark-connected__junction > span { font-size: .7rem; margin-top: .2rem; }
 .spark-connected__footer { flex-wrap: wrap; gap: .7rem; padding-top: .8rem; }
 .spark-connected__footer p { font-size: .8rem; }
 .spark-connected__footer a { font-size: .8rem; padding: .8rem 1rem; }
 .spark-connected__continue { width: 100%; font-size: .7rem; }
}
@media(prefers-reduced-motion:reduce) { .spark-connected { --connect: 1; } }