/* "From your data to decisions" ring, shared with the main site (copied from style.css; product sites use it per product) */
:root{--ink-2:var(--ink2,#3d3437);--grad-text:var(--gtext);--muted:var(--mut,#7a7073)}
.dflow-sec{background:#fff}
.df-head{text-align:center;margin-bottom:30px}.df-head h2{margin-top:12px;font-weight:400;font-size:clamp(2rem,4vw,3.2rem)}
.dflow{display:grid;grid-template-columns:220px 1fr 240px;align-items:center;gap:10px}
.df-in,.df-out{list-style:none;display:grid;gap:26px}
.df-in li,.df-out li{position:relative;font-size:1rem;color:var(--ink-2);opacity:0;transition:.6s}
.df-in li{text-align:right;padding-right:34px}.df-out li{padding-left:34px}
.df-in li::after,.df-out li::before{content:"";position:absolute;top:50%;width:22px;border-top:1px dashed #c9b9bc}
.df-in li::after{right:0}.df-out li::before{left:0}
.df-in li::before,.df-out li::after{content:"";position:absolute;top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:#d9cdd0}
.df-in li::before{right:-6px}.df-out li::after{left:-6px}
.df-core{position:relative;aspect-ratio:1;max-width:560px;margin:0 auto;width:100%}
.df-ring{position:absolute;inset:0;width:100%;height:100%}
.df-arc{stroke-dasharray:1288;stroke-dashoffset:1288;transition:stroke-dashoffset 2s cubic-bezier(.2,.7,.2,1)}
.df-node{position:absolute;top:50%;transform:translateY(-50%);width:27%;aspect-ratio:1;border-radius:50%;border:1.5px solid var(--red);background:#fff;display:grid;place-items:center;text-align:center;z-index:2;opacity:0;transition:.6s}
.df-node b{font-size:clamp(.9rem,1.6vw,1.3rem);font-weight:600;line-height:1.15;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.df-node.l{left:-8%}.df-node.r{right:-8%}
.df-band{position:absolute;left:14%;right:14%;top:37%;height:26%;border-top:1px dashed #d9cdd0;border-bottom:1px dashed #d9cdd0;background:rgba(255,255,255,.9);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;z-index:1;overflow:hidden}
.df-stage{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transform:translateY(8px);transition:.5s}
.df-stage small{font-size:.72rem;color:var(--ink-2);text-align:center;line-height:1.2;min-height:2.4em}
.tl{position:relative;width:50px;height:50px}
.tl i{position:absolute;width:10px;height:10px;border:1.5px solid var(--red);border-radius:2px}
.tl.s i{border-color:#c9b9bc;background:#ece3e4}
.tl.l i{border-color:#e98a8f}
.tl.g.v i{background:#fff0f0}
.tl.bars{display:flex;align-items:flex-end;gap:5px;padding:0 4px}
.tl.bars i{position:static;width:8px;border:1.5px solid var(--red);border-radius:2px 2px 0 0;background:#ffe4e4;transform-origin:bottom;transform:scaleY(0);transition:transform .8s}
.df-p{position:absolute;top:50%;left:-10px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);opacity:0;animation:dfp 3s linear infinite}
@keyframes dfp{0%{left:-2%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
.df-badge{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--ink-2);z-index:2;opacity:0;transform:scale(.6);transition:.5s cubic-bezier(.2,1.4,.4,1)}
.df-badge span{width:62px;height:62px;border-radius:50%;background:#fff;border:1.5px solid var(--red);display:grid;place-items:center;font-size:1.4rem;box-shadow:0 10px 24px -14px rgba(252,20,20,.6)}
.df-badge.b1{left:50%;top:-1%;transform-origin:center;translate:-50% 0}
.df-badge.b2{left:22%;bottom:-1%}.df-badge.b3{right:22%;bottom:-1%}
/* in-view sequence */
.dflow.in .df-arc{stroke-dashoffset:0}
.dflow.in .df-node{opacity:1}.dflow.in .df-node.r{transition-delay:.4s}
.dflow.in .df-stage{opacity:1;transform:none}
.dflow.in .df-stage:nth-child(2){transition-delay:.3s}.dflow.in .df-stage:nth-child(3){transition-delay:.6s}.dflow.in .df-stage:nth-child(4){transition-delay:.9s}.dflow.in .df-stage:nth-child(5){transition-delay:1.2s}
.dflow.in .tl.bars i{transform:scaleY(1);transition-delay:1.5s}
.dflow.in .df-badge{opacity:1;transform:scale(1)}.dflow.in .b1{transition-delay:1.4s}.dflow.in .b2{transition-delay:1.6s}.dflow.in .b3{transition-delay:1.8s}
.dflow.in .df-in li,.dflow.in .df-out li{opacity:1}
.dflow.in .df-in li:nth-child(n){transition-delay:calc(.15s * var(--i,1))}
.dflow.in .df-out li{transition-delay:1.6s}
@media(max-width:1000px){.dflow{grid-template-columns:1fr}.df-in,.df-out{grid-template-columns:1fr 1fr;gap:12px}.df-in li,.df-out li{text-align:left;padding:10px 14px;border:1px solid var(--line);border-radius:10px;opacity:1}.df-in li::before,.df-in li::after,.df-out li::before,.df-out li::after{display:none}.df-core{max-width:440px}}
@media(max-width:560px){.df-stage small{font-size:.6rem}.tl{transform:scale(.7)}.df-badge span{width:46px;height:46px;font-size:1.1rem}.df-badge{font-size:.7rem}}
@media (prefers-reduced-motion:reduce){.df-p{display:none}}
.df-node{border-color:#d9cdd0}
.df-badge span{border-color:#d9cdd0}
@media(max-width:640px){
  .df-node.l{left:0}.df-node.r{right:0}.df-node{width:24%}
  .df-band{left:22%;right:22%}
}
@media(max-width:640px){
 .df-head{text-align:left}
 .df-in,.df-out{grid-template-columns:1fr;gap:8px}
 .df-core{aspect-ratio:auto;max-width:none;display:flex;flex-direction:column;gap:10px;margin:18px 0}
 .df-ring,.df-p{display:none}
 .df-node,.df-badge,.df-band{position:static;transform:none;translate:none;opacity:1}
 .df-node{width:auto;aspect-ratio:auto;border-radius:12px;padding:12px 16px;place-items:start}
 .df-band{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:12px;background:#fff;height:auto}
 .df-stage{flex-direction:row;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);opacity:1;transform:none}
 .df-stage:last-child{border-bottom:0}
 .df-stage small{font-size:.95rem;min-height:0;text-align:left;color:var(--ink)}
 .df-stage small br{display:none}
 .tl{transform:scale(.7);transform-origin:right center}
 .tl.bars i{transform:scaleY(1)}
 .df-core .df-badge{display:none}
 .df-node.r{order:3}.df-band{order:2}
}