/* ================= BO ONBOARDING WIDGET — default styling =================
   Scoped under .bo-onboarding-wrap. Reproduces .process-grid /
   .process-step / .process-num exactly, unchanged from the original UI.
   Adds a decorative animated flow-line layer on top of the existing
   dashed connector — purely additive, no visual change to anything else.
   ========================================================================= */

.bo-onboarding-wrap{
  --ob-navy: #031B39;
  --ob-accent: #1083E6;
  --ob-line-strong: #D6DCE5;
  --ob-slate: #54627A;
  --ob-ease: cubic-bezier(.22,1,.36,1);
  --ob-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ob-flow-duration: 3.6s;
  font-family:'Roboto', sans-serif;
}

.bo-onboarding-wrap section{
  background: var(--ob-section-bg, transparent);
  padding: var(--ob-padding-top, 0px) 0 var(--ob-padding-bottom, 0px);
}
.bo-onboarding-wrap .ob-wrap{ max-width: var(--ob-container-max, 1220px); margin:0 auto; padding:0 40px; }

/* ---------- Heading ---------- */
.bo-onboarding-wrap .ob-section-head{ max-width:620px; margin:0 auto 46px; text-align:center; }
.bo-onboarding-wrap .eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ob-accent); font-weight:500;
  display:flex; align-items:center; gap:10px;
}
.bo-onboarding-wrap .eyebrow::before{
  content:''; width:18px; height:1px; background:var(--ob-accent); display:inline-block;
}
.bo-onboarding-wrap .ob-section-head h2{
  font-family:'Roboto Slab', serif;
  font-weight:600; letter-spacing:-0.01em; line-height:1.12;
  color: var(--ob-heading-color, var(--ob-navy));
  font-size:36px;
  margin-top:14px;
}

/* ---------- Process grid (unchanged from original) ---------- */
.bo-onboarding-wrap .process-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;
}
.bo-onboarding-wrap .process-grid::before{
  content:''; position:absolute; top:27px; left:6%; right:6%; height:1px;
  background:repeating-linear-gradient(to right, var(--ob-line-color, var(--ob-line-strong)) 0 8px, transparent 8px 16px);
  z-index:0;
}
.bo-onboarding-wrap .process-step{ position:relative; z-index:1; padding:0 18px; text-align:left; }
.bo-onboarding-wrap .process-num{
  width: var(--ob-circle-size, 54px); height: var(--ob-circle-size, 54px); border-radius:50%;
  background: var(--ob-circle-bg, #fff); border:1.5px solid var(--ob-circle-border, var(--ob-line-strong));
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
  font-family:'Roboto Slab'; font-weight:600; font-size:18px; color: var(--ob-circle-text, var(--ob-navy));
  transition: all .35s var(--ob-ease-spring);
}
.bo-onboarding-wrap .process-step:hover .process-num{
  background: var(--ob-circle-hover-bg, var(--ob-navy));
  border-color: var(--ob-circle-hover-bg, var(--ob-navy));
  color: var(--ob-circle-hover-text, #fff);
  transform:scale(1.08);
}
.bo-onboarding-wrap .process-step h4{
  font-size:16.5px; margin-bottom:8px; font-family:'Roboto'; font-weight:600;
  color: var(--ob-step-title-color, var(--ob-navy));
}
.bo-onboarding-wrap .process-step p{ font-size:13.5px; color: var(--ob-step-text-color, var(--ob-slate)); line-height:1.6; }

/* ---------- Animated flow line (new, additive layer) ---------- */
.bo-onboarding-wrap .process-line-track{
  position:absolute;
  top:27px; left:6%; right:6%; height:1px;
  z-index:0;
  pointer-events:none;
  overflow:visible;
}

/* Leading glow dot — travels start to end, then loops */
.bo-onboarding-wrap .flow-dot{
  position:absolute; top:50%; left:0;
  transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%;
  background: var(--ob-flow-color, var(--ob-accent));
  box-shadow:
    0 0 0 4px rgba(16,131,230,.16),
    0 0 14px 2px rgba(16,131,230,.55);
  animation: bo-ob-flow-move var(--ob-flow-duration) cubic-bezier(.45,0,.55,1) infinite;
}

/* Trailing chevrons — reinforce direction, staggered behind the dot */
.bo-onboarding-wrap .flow-chevron{
  position:absolute; top:50%; left:0;
  transform:translate(-50%,-50%);
  width:0; height:0;
  border-top:3.5px solid transparent;
  border-bottom:3.5px solid transparent;
  border-left:5px solid var(--ob-flow-color, var(--ob-accent));
  opacity:0;
  animation: bo-ob-flow-move var(--ob-flow-duration) cubic-bezier(.45,0,.55,1) infinite;
}
.bo-onboarding-wrap .flow-chevron-1{ animation-delay: calc(var(--ob-flow-duration) * -0.06); opacity:.65; }
.bo-onboarding-wrap .flow-chevron-2{ animation-delay: calc(var(--ob-flow-duration) * -0.10); opacity:.4; }
.bo-onboarding-wrap .flow-chevron-3{ animation-delay: calc(var(--ob-flow-duration) * -0.14); opacity:.22; }

@keyframes bo-ob-flow-move{
  0%   { left:0%;   opacity:0; }
  6%   { opacity:1; }
  94%  { opacity:1; }
  100% { left:100%; opacity:0; }
}

@keyframes bo-ob-flow-move-vertical{
  0%   { top:0%;   opacity:0; }
  6%   { opacity:1; }
  94%  { opacity:1; }
  100% { top:100%; opacity:0; }
}

/* Static arrowhead at the very end — always visible, signals overall direction */
.bo-onboarding-wrap .flow-arrow-end{
  position:absolute; top:50%; right:-1px;
  transform:translateY(-50%);
  width:0; height:0;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:6px solid var(--ob-line-color, var(--ob-line-strong));
  transition: border-left-color .3s var(--ob-ease);
}
.bo-onboarding-wrap .process-grid:hover .flow-arrow-end{
  border-left-color: var(--ob-flow-color, var(--ob-accent));
}

@media (prefers-reduced-motion: reduce){
  .bo-onboarding-wrap .flow-dot,
  .bo-onboarding-wrap .flow-chevron{ animation:none; opacity:0; }
}

/* ---------- Stagger reveal (unchanged) ---------- */
.bo-onboarding-wrap .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ob-ease), transform .8s var(--ob-ease);
}
.bo-onboarding-wrap .reveal.in{ opacity:1; transform:translateY(0); }

.bo-onboarding-wrap .stagger-children > *{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--ob-ease), transform .7s var(--ob-ease);
}
.bo-onboarding-wrap .stagger-children.in > *{ opacity:1; transform:translateY(0); }
.bo-onboarding-wrap .stagger-children.in > *:nth-child(1){ transition-delay:0ms; }
.bo-onboarding-wrap .stagger-children.in > *:nth-child(2){ transition-delay:90ms; }
.bo-onboarding-wrap .stagger-children.in > *:nth-child(3){ transition-delay:180ms; }
.bo-onboarding-wrap .stagger-children.in > *:nth-child(4){ transition-delay:270ms; }
.bo-onboarding-wrap .stagger-children.in > *:nth-child(5){ transition-delay:360ms; }
.bo-onboarding-wrap .stagger-children.in > *:nth-child(6){ transition-delay:450ms; }

@media (prefers-reduced-motion: reduce){
  .bo-onboarding-wrap .reveal,
  .bo-onboarding-wrap .stagger-children > *{ opacity:1; transform:none; transition:none; }
}

/* ---------- Editor-active safety net ----------
   Elementor adds this class to the preview iframe <body> so plugins can
   force-show scroll-reveal content while editing, independent of any
   JS timing race. */
body.elementor-editor-active .bo-onboarding-wrap .reveal,
body.elementor-editor-active .bo-onboarding-wrap .stagger-children,
body.elementor-editor-active .bo-onboarding-wrap .stagger-children > * {
  opacity: 1 !important;
  transform: none !important;
}

/* ================= RESPONSIVE (unchanged from original site rules) ================= */
@media (max-width:980px){
  .bo-onboarding-wrap .process-grid{ grid-template-columns:1fr 1fr; gap:36px 0; }
  .bo-onboarding-wrap .process-grid::before,
  .bo-onboarding-wrap .process-line-track{ display:none; }
}

@media (max-width:640px){
  .bo-onboarding-wrap .ob-wrap{ padding:0 20px; }
  .bo-onboarding-wrap .ob-section-head{ margin-bottom:32px; }
  .bo-onboarding-wrap .ob-section-head h2{ font-size:24px; }

  /* Single column stack, compact — circle in its own column, text stacks beside it */
  .bo-onboarding-wrap .process-grid{
    grid-template-columns:1fr;
    gap:32px;
    position:relative;
  }
  .bo-onboarding-wrap .process-grid::before{ display:none; }

  /* Vertical dashed connector replaces the horizontal one */
  .bo-onboarding-wrap .process-grid::after{
    content:'';
    position:absolute;
    top:21px; bottom:21px; left:21px;
    width:1px;
    background:repeating-linear-gradient(to bottom, var(--ob-line-strong) 0 8px, transparent 8px 16px);
    z-index:0;
  }

  .bo-onboarding-wrap .process-step{
    display:grid;
    grid-template-columns:42px 1fr;
    column-gap:16px;
    row-gap:5px;
    align-items:start;
    padding:0;
  }
  .bo-onboarding-wrap .process-num{
    grid-column:1;
    grid-row:1 / span 2;
    width:42px; height:42px;
    font-size:14px;
    margin-bottom:0;
    flex-shrink:0;
  }
  .bo-onboarding-wrap .process-step h4{
    grid-column:2;
    grid-row:1;
    font-size:15px;
    line-height:1.35;
    margin-bottom:0;
  }
  .bo-onboarding-wrap .process-step p{
    grid-column:2;
    grid-row:2;
    font-size:12.5px;
    line-height:1.55;
  }

  /* Flow animation switches from left→right to top→bottom */
  .bo-onboarding-wrap .process-line-track{
    display:block;
    top:21px; bottom:21px; left:21px; right:auto;
    width:1px; height:auto;
  }
  .bo-onboarding-wrap .flow-dot{
    left:50%; top:0;
    animation-name: bo-ob-flow-move-vertical;
  }
  .bo-onboarding-wrap .flow-chevron{
    left:50%; top:0;
    border-left:3.5px solid transparent;
    border-right:3.5px solid transparent;
    border-top:5px solid var(--ob-flow-color, var(--ob-accent));
    border-bottom:none;
    animation-name: bo-ob-flow-move-vertical;
  }
  .bo-onboarding-wrap .flow-arrow-end{
    top:auto; right:auto;
    bottom:-1px; left:50%;
    transform:translateX(-50%);
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:6px solid var(--ob-line-color, var(--ob-line-strong));
    border-bottom:none;
  }
}