/* =====================================================================
   SBS Process Flow — stylesheet
   This is the ORIGINAL section CSS, preserved as-is, with only three
   additive, non-visual changes:
     1. The Google Fonts @import was removed — the font is now enqueued
        properly in PHP (wp_register_style 'sbspf-manrope') for performance
        and so it loads only when the widget is on the page.
     2. The top radial glow colour now reads from a --glow variable so it
        can be edited from Elementor. Default value is unchanged (#140d06).
     3. Two opt-in helper rules at the very bottom (.sbs--no-flow and
        .sbs--paused) — they do nothing unless those classes are present.
   Everything else is byte-for-byte the original design.
   ===================================================================== */

.sbs{
  --yellow:#FCB415;
  --umber:#EACEA9;
  --end-accent:#FCB415;
  --node-bg:#160d08;
  --title:#ffffff;
  --muted:#9c968c;
  --glow:#140d06;
  font-family:'Manrope',sans-serif;
  background:#000000;
  background-image:radial-gradient(120% 80% at 50% -8%, var(--glow) 0%, rgba(0,0,0,0) 58%);
  padding:24px 20px 78px;
  color:var(--title);
  -webkit-font-smoothing:antialiased;
}
.sbs *{box-sizing:border-box;margin:0;padding:0;}
.sbs__inner{max-width:1200px;margin:0 auto;}

/* ===================== DESKTOP : SERPENTINE ===================== */
.sbs__diagram{
  position:relative;width:100%;max-width:1200px;margin:0 auto;
  aspect-ratio:1200/760;container-type:inline-size;overflow:visible;
}
.sbs__ribbon{
  position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 0 14px rgba(252,180,21,.18));
}

.sbs__flow{
  stroke-dasharray:7 30;stroke-dashoffset:0;
  animation:sbsFlow 5.5s linear infinite;
}
@keyframes sbsFlow{to{stroke-dashoffset:-222;}}

.sbs__step{
  position:absolute;transform:translateX(-50%);
  width:18.3cqi;max-width:230px;text-align:center;
  transition:transform .32s cubic-bezier(.34,1.4,.5,1);z-index:2;
}
.sbs__step:hover{transform:translateX(-50%) translateY(-1.1cqi);}

.sbs__node{
  width:6.5cqi;height:6.5cqi;margin:0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--node-bg);border:.33cqi solid var(--ac);color:var(--ac);
  box-shadow:0 .5cqi 1.1cqi rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03);
  transition:background .3s ease,color .3s ease,box-shadow .3s ease;
}
.sbs__node svg{width:3.3cqi;height:3.3cqi;}
.sbs__step:hover .sbs__node{
  background:var(--ac);color:#0a0a0a;
  box-shadow:0 1cqi 2cqi color-mix(in srgb,var(--ac) 55%,transparent);
}

.sbs__no{
  margin-top:1cqi;font-size:1.08cqi;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ac);
}
.sbs__sub{
  margin-top:.25cqi;font-size:1.5cqi;font-weight:700;color:var(--title);line-height:1.15;
}
.sbs__p{
  margin-top:.55cqi;font-size:1.08cqi;font-weight:400;line-height:1.42;color:var(--muted);
}

.sbs__step.is-y{--ac:var(--yellow);}
.sbs__step.is-u{--ac:var(--umber);}

/* start / end pills */
.sbs__pill{
  position:absolute;transform:translate(-50%,-50%);
  width:11.5cqi;height:9.3cqi;border-radius:1.9cqi;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:800;font-size:1.5cqi;line-height:1.22;letter-spacing:.03em;text-transform:uppercase;
  padding:1cqi;z-index:1;transition:transform .3s ease,box-shadow .3s ease;
}
.sbs__pill:hover{transform:translate(-50%,-50%) translateY(-.6cqi);}
.sbs__pill--start{
  background:var(--yellow);color:#0a0a0a;
  box-shadow:0 .8cqi 1.8cqi rgba(252,180,21,.3);
}
.sbs__pill--end{
  background:var(--end-accent);color:#0a0a0a;
  border:.25cqi solid color-mix(in srgb,var(--umber) 55%,transparent);
  box-shadow:0 .8cqi 1.8cqi rgba(252,180,21,.3);
}

/* ===================== MOBILE : VERTICAL TIMELINE ===================== */
.sbs__mobile{display:none;position:relative;max-width:520px;margin:0 auto;}
.sbs__mobile::before{
  content:"";position:absolute;left:27px;top:14px;bottom:14px;width:3px;
  background:linear-gradient(var(--yellow),var(--umber));border-radius:3px;
}
.sbs-m{display:flex;gap:16px;padding:14px 0;position:relative;}
.sbs-m__node{
  flex:0 0 auto;width:54px;height:54px;border-radius:50%;background:var(--node-bg);
  border:3px solid var(--ac);color:var(--ac);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 14px rgba(0,0,0,.5);z-index:1;
  transition:transform .3s ease,background .3s ease,color .3s ease,box-shadow .3s ease;
}
.sbs-m__node svg{width:26px;height:26px;}
.sbs-m:hover .sbs-m__node{
  transform:translateY(-5px) scale(1.04);background:var(--ac);color:#0a0a0a;
  box-shadow:0 12px 24px color-mix(in srgb,var(--ac) 55%,transparent);
}
.sbs-m.is-y{--ac:var(--yellow);}
.sbs-m.is-u{--ac:var(--umber);}
.sbs-m__body{padding-top:3px;}
.sbs-m__no{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ac);}
.sbs-m__sub{font-size:17px;font-weight:700;color:var(--title);margin-top:1px;}
.sbs-m__p{font-size:14px;color:var(--muted);line-height:1.45;margin-top:4px;}

@media (max-width:992px){
  .sbs__diagram{display:none;}
  .sbs__mobile{display:block;}
  .sbs{padding:28px 18px 58px;}
}
@media (prefers-reduced-motion:reduce){
  .sbs__flow{animation:none;}
}

/* ---------------------------------------------------------------------
   Opt-in helper classes (added by the widget / the JS).
   Harmless unless the class is present — they never affect the default look.
   --------------------------------------------------------------------- */
.sbs.sbs--no-flow .sbs__flow{animation:none;}        /* "Flowing Animation" toggle = Off */
.sbs.sbs--paused .sbs__flow{animation-play-state:paused;} /* off-screen perf pause (JS) */