/* How It Works: responsive native engine animation. */
.engine-orbit { --orbit-size:83.33%; position:absolute; top:calc((100% - var(--orbit-size))/2); left:calc((100% - var(--orbit-size))/2); width:var(--orbit-size); height:var(--orbit-size); border:1px solid #2ed1f48a; border-radius:48% 52% 46% 54%; pointer-events:none; animation:engine-orbit-turn 6s linear infinite; animation-play-state:paused; }
.engine-orbit::after { content:''; position:absolute; inset:6px; border:1px solid #2ed1f439; border-radius:50%; }
.engine-orbit--2 { --orbit-size:92.86%; border-color:#2ed1f456; border-radius:50%; animation-duration:8s; animation-direction:reverse; }
.engine-orbit--3 { --orbit-size:77%; border-color:#70baff88; border-radius:44% 56% 51% 49%; animation-duration:4.8s; }
.engine-orbit--4 { --orbit-size:100%; border-color:#2ed1f459; border-radius:50%; animation-duration:10s; animation-direction:reverse; }
[data-engine-motion="running"] .engine-orbit { animation-play-state:running; }
#how-it-works :is(.engine-flow-backdrop-glow,.engine-core-glow-large,.engine-core-glow-small) { filter:none !important; }
#how-it-works .flow-card { animation:none !important; backdrop-filter:none; -webkit-backdrop-filter:none; }
#how-it-works .flow-card .absolute > div { filter:none !important; opacity:.6; }
#how-it-works .ai-engine { animation:none !important; }
#how-it-works .engine-logo-container { position:relative; }
#how-it-works .engine-logo { animation:none !important; filter:none; }
/* The logo box is also the outer circular rim used by the SVG connections. */
#how-it-works .data-flow-container { --engine-diameter:clamp(216px,23vw,252px); min-height:0; padding:32px 0; }
#how-it-works .flow-grid { grid-template-columns:minmax(148px,280px) var(--engine-diameter) minmax(148px,280px); gap:clamp(28px,5vw,100px); justify-content:space-between; width:100%; padding:0; }
#how-it-works .flow-column { gap:32px; margin:0; min-width:0; }
#how-it-works .flow-card { padding:16px; height:120px; transition:border-color .2s; }
#how-it-works .flow-card:hover { transform:none; }
#how-it-works .ai-engine { padding:0; width:var(--engine-diameter); height:var(--engine-diameter); gap:0; }
#how-it-works .engine-logo-container { inset:auto; width:var(--engine-diameter) !important; height:var(--engine-diameter) !important; flex:none; }
#how-it-works .engine-label { top:calc(100% + 24px); bottom:auto !important; width:max-content; white-space:nowrap; }
#how-it-works :is(.connections,.mobile-connections) { color:#2ed1f4; }
#how-it-works .connection-line { stroke-width:1.5px !important; }
html[data-run-it-theme="light"] #how-it-works :is(.connections,.mobile-connections) { color:#00758c; }
/* Keep native packets visible on devices where the legacy animation probe opts out. */
html.reduce-animations #how-it-works :is(#data-packets,#mobile-data-packets) { display:inline !important; visibility:visible !important; }
html.reduce-animations #how-it-works .connection-line { opacity:1 !important; }
.engine-native-packet { fill:#2ed1f4; }
html[data-run-it-theme="light"] .engine-native-packet { fill:#00758c; }
html[data-run-it-theme="light"] .engine-orbit,html[data-run-it-theme="light"] .engine-orbit::after { border-color:#00758c88; }
@keyframes engine-orbit-turn { to { transform:rotate(360deg); } }
@media(max-width:768px) {
  #how-it-works .data-flow-container { --engine-diameter:216px; padding:24px 0; }
  #how-it-works .flow-grid { width:100% !important; max-width:620px !important; padding:0 !important; margin:0 !important; gap:72px !important; }
  #how-it-works .flow-column { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,2vw,16px) !important; margin:0; }
  #how-it-works .flow-card { width:100% !important; min-width:0 !important; height:108px !important; padding:8px !important; }
  #how-it-works .flow-card h4 { font-size:clamp(10px,2.5vw,13px) !important; line-height:1.25; white-space:nowrap; margin:6px 0 0 !important; }
  #how-it-works .ai-engine { margin:0 !important; }
  #how-it-works .flow-card .coming-soon-wrap { margin-bottom:4px !important; }
  #how-it-works .flow-card .coming-soon-badge { left:calc(50% + 14px) !important; top:0 !important; bottom:auto !important; transform:none !important; padding:2px 3px !important; font-size:6px !important; }
  html[lang="nl"] #how-it-works .flow-card > div:not(.absolute) { width:100%; min-width:0; }
  html[lang="nl"] #how-it-works .flow-card h4 { white-space:normal; }
  html[lang="nl"] #how-it-works .flow-card .coming-soon-badge { left:auto !important; right:-3px; }
}
@media(prefers-reduced-motion:reduce) {
  .engine-orbit { animation:none !important; }
}