/* Reconstructed token flow: crisp source icons, real labels, and a live dot grid. */
.token-flow{container:token-flow / inline-size;position:relative;width:100%;aspect-ratio:1.8259;min-height:480px;margin:0;isolation:isolate;background:#fff;border-radius:18px;--token-pulse:#0055ff}
.token-flow::before{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle,#cfd0d6 .7px,transparent .85px);background-size:12px 12px;mask-image:radial-gradient(ellipse 70% 77% at 50% 48%,#000 43%,transparent 100%);opacity:.3;pointer-events:none}
.token-flow-source{position:absolute;top:13%;width:28%;text-align:center;transform:translateX(-50%)}
.token-flow-figma{left:21.5%}.token-flow-gluestack{left:50%}.token-flow-tailwind{left:78.5%}
.token-flow-card{position:relative;display:grid;place-items:center;box-sizing:border-box;width:clamp(56px,9.5cqw,108px);aspect-ratio:1;margin-inline:auto;--token-outline:#dedee1;border:1px solid var(--token-outline);border-radius:27%;background:#fff;box-shadow:0 3px 9px #17171712,0 1px 3px #1717170d,inset 0 0 0 1px #fff;isolation:isolate}
.token-flow-card::after{content:'';position:absolute;inset:-1px;border:2px solid var(--token-outline);border-radius:inherit;box-shadow:0 0 7px color-mix(in srgb,var(--token-outline) 35%,transparent);opacity:0;pointer-events:none}
.token-flow-source.is-sending .token-flow-card::after{animation:token-source-pulse var(--token-send-duration,.85s) ease-out both}
.token-flow-card>svg{display:block;width:58%;height:58%;overflow:visible}
.token-flow-figma .token-flow-card>svg{width:40%;height:60%}
.token-flow-gluestack .token-flow-card{--token-outline:#161616;background:#050505;box-shadow:0 3px 9px #17171718}
.token-flow-tailwind .token-flow-card>svg{width:72%;height:54%}
/* Typography comes directly from the shared Caption / Caption Highlight styles. */
#hubsync-main .token-flow .token-flow-label,#hubsync-main .token-flow .token-flow-description,#hubsync-main .token-flow .token-flow-values{margin:0}
#hubsync-main .token-flow .token-flow-label{margin-top:14px}
#hubsync-main .token-flow .token-flow-description{margin-top:3px}
.token-flow-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1}
.token-flow-wire{fill:none;stroke:#dedee1;stroke-width:1.5;vector-effect:non-scaling-stroke}
.token-flow-pulse{fill:none;opacity:0;filter:drop-shadow(0 0 2px #0055ffcc) drop-shadow(0 0 6px #0055ff80)}
.token-flow-pulse-segment{fill:none;stroke:#0055ff;stroke-width:2.8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.token-flow-result{position:absolute;top:64%;left:50%;width:90%;transform:translateX(-50%);text-align:center;--token-state:#ff277b;--token-surface:#fff0f2}
.token-flow-result .token-flow-card{border-color:#fff;background:var(--token-surface);color:var(--token-state);box-shadow:0 3px 9px #17171712,0 0 0 1px #ececee;transition:background .35s ease,color .35s ease}
.token-flow-result .token-flow-card svg{position:absolute;width:47%;height:47%;transition:opacity .2s ease,transform .35s ease;opacity:0;transform:scale(.8)}
.token-flow-result .token-icon-conflict{opacity:1!important;transform:scale(1)!important}
.token-flow.is-enhanced .token-flow-result .token-icon-conflict{opacity:0!important;transform:scale(.8)!important}
.token-flow[data-stage="0"] .token-flow-result{--token-state:#a5a5ae;--token-surface:#f8f8fa}
.token-flow[data-stage="1"] .token-flow-result{--token-state:#1ca76e;--token-surface:#effaf4}
.token-flow[data-stage="2"] .token-flow-result{--token-state:#dca11d;--token-surface:#fff8e9}
.token-flow[data-stage="0"] .token-icon-ready,.token-flow[data-stage="1"] .token-icon-check,.token-flow[data-stage="2"] .token-icon-attention,.token-flow[data-stage="3"] .token-flow-result .token-icon-conflict{opacity:1!important;transform:scale(1)!important}
#hubsync-main .token-flow .token-flow-values{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:10px;row-gap:0;margin-top:6px}
.token-flow-value{white-space:nowrap}
.token-flow-value,.token-flow-separator{transition:opacity .4s ease,transform .4s ease;opacity:1;transform:none}
.token-flow.is-enhanced[data-stage="0"] .token-flow-value,.token-flow.is-enhanced[data-stage="0"] .token-flow-separator,.token-flow.is-enhanced[data-stage="1"] [data-token-after="2"],.token-flow.is-enhanced[data-stage="1"] [data-token-after="3"],.token-flow.is-enhanced[data-stage="2"] [data-token-after="3"]{opacity:0;transform:translateY(6px)}
.token-flow-value[hidden],.token-flow-separator[hidden]{display:none}
.token-flow.is-paused *{animation-play-state:paused!important}
@keyframes token-source-pulse{0%{opacity:.65;transform:scale(1)}100%{opacity:0;transform:scale(1.28)}}
@container token-flow (max-width:560px){
 .token-flow-source{top:9%;width:30%}
 #hubsync-main .token-flow .token-flow-label{margin-top:9px}
 #hubsync-main .token-flow .token-flow-description{max-width:105px;margin:3px auto 0}
 #hubsync-main .token-flow .token-flow-values{gap:6px;margin-top:7px}
 .token-flow::before{background-size:10px 10px}
}
/* The impact stays directly above the next section's existing divider. */
@media(max-width:699px){
 #hubsync-main .token-flow{width:calc(100% + 24px);max-width:none;margin-inline:-12px}
 #hubsync-main .token-flow-source .token-flow-card{width:64px}
 #hubsync-main .token-flow .token-flow-description{--type-size:13px;--type-leading:1.45;max-width:112px;margin-top:4px;text-wrap:balance}
}
#hubsync-main [data-case-section="implementation"]{overflow:visible}
#hubsync-main .token-impact-divider{overflow:visible}
.token-divider-bloom{position:absolute;left:0;right:0;bottom:100%;height:clamp(300px,45vw,440px);overflow:hidden;opacity:0;pointer-events:none;--token-impact:234 174 29}
.token-divider-bloom::before{content:'';position:absolute;inset:12px 0 -30px;background:radial-gradient(ellipse 65% 85% at 50% 100%,rgb(var(--token-impact)/.36) 0%,rgb(var(--token-impact)/.13) 38%,transparent 76%);filter:blur(30px)}
.token-divider-bloom::after{content:'';position:absolute;left:10%;right:10%;bottom:-8px;height:15px;border-radius:50%;background:rgb(var(--token-impact)/.3);filter:blur(14px)}
@media(prefers-reduced-motion:reduce){.token-flow *{animation:none!important;transition:none!important}.token-divider-bloom{display:none}}