/* fx.css: the line art and motion fx.js adds below the hero (DIG-1241).
   Every rule is scoped to an fx- class or a section id. Draw-ons wait for
   .fx-in, loops run only under .fx-live, and html.rm shows every drawing
   finished and still. Eases are smooth in-out curves only: no overshoot. */

/* ---------- shared ---------- */
.fx-host{pointer-events:none}
.fx-draw{stroke-dasharray:1 1}
html.fx-armed .fx-host:not(.fx-in) .fx-draw{stroke-dashoffset:1; opacity:0}
html.fx-armed .fx-host.fx-in .fx-draw{
  transition:stroke-dashoffset var(--dur,1.4s) cubic-bezier(.65,0,.35,1) calc(var(--d,0s) + .15s), opacity .01s linear calc(var(--d,0s) + .15s)}
html.fx-armed .fx-host:not(.fx-in) .fx-fade{opacity:0}
html.fx-armed .fx-host.fx-in .fx-fade{transition:opacity .7s cubic-bezier(.37,0,.63,1) calc(var(--d,0s) + .5s)}
@keyframes fx-spin{to{transform:rotate(360deg)}}
@keyframes fx-fadein{from{opacity:0}}

/* ---------- what you get: voice strands in the header ---------- */
#what-you-get .wrap{position:relative}
#what-you-get .fx-strands{position:absolute; top:16px; right:0; width:clamp(320px,42%,520px); z-index:0}
.fx-strands svg{display:block; width:100%; height:auto; overflow:visible; fill:none; stroke-linecap:round}
.fx-sw path{stroke:#056187; stroke-opacity:.7; stroke-width:2; stroke-linejoin:round}
.fx-sw{transform-box:fill-box; transform-origin:50% 50%}
.fx-word{stroke:#9dbccc; stroke-width:4}
.fx-strands.fx-in .fx-sw{animation:fx-breathe 3.4s cubic-bezier(.37,0,.63,1) calc(var(--k) * -.8s) infinite alternate paused}
.fx-strands.fx-in .fx-word{animation:fx-fadein .6s cubic-bezier(.37,0,.63,1) calc(1.1s + var(--i) * .07s) backwards paused, fx-type 4.8s cubic-bezier(.37,0,.63,1) calc(2s + var(--i) * .22s) infinite paused}
@keyframes fx-breathe{to{transform:scaleY(.5)}}
@keyframes fx-type{0%,60%,100%{opacity:1} 30%{opacity:.35}}
@media (max-width:999px){
  #what-you-get .fx-strands{position:relative; top:auto; width:100%; max-width:480px; margin-top:28px}
}

/* ---------- what you get: the wire ---------- */
#what-you-get .vc-fab{position:relative}
.fx-rip{position:absolute; inset:0; border-radius:50%; border:1.5px solid #056187; opacity:0; pointer-events:none}
#wygFlow.fx-in .fx-rip{animation:fx-rip 3s cubic-bezier(.33,1,.68,1) infinite paused}
#wygFlow.fx-in .fx-rip + .fx-rip{animation-delay:1.5s}
@keyframes fx-rip{0%{opacity:0; transform:scale(1)} 6%{opacity:.5} 100%{opacity:0; transform:scale(1.95)}}

#what-you-get .fx-hubring{position:absolute; inset:-9px; pointer-events:none}
#what-you-get .fx-hubring svg{display:block; width:100%; height:100%; fill:none; stroke:#00a3e0; stroke-width:1.6; stroke-dasharray:2.5 6.5; stroke-linecap:round; opacity:.8}
#wygFlow.fx-in .fx-hubring{animation:fx-spin 16s linear infinite paused}
.fx-hubflash{position:absolute; inset:0; border-radius:50%; border:2px solid #00a3e0; opacity:0; pointer-events:none}
#what-you-get .rep-ico{position:relative}
.fx-ping{position:absolute; inset:-1px; border-radius:12px; border:2px solid #056187; opacity:0; pointer-events:none}

#wygFlow{position:relative}
#wygFlow .fx-wire{position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:2}
.fx-pk{position:absolute; left:-11px; top:-9px; width:22px; height:18px; opacity:0; will-change:transform,opacity}
.fx-pk svg{display:block; width:100%; height:100%; overflow:visible; fill:none; stroke:#056187; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.fx-pk .fx-halo{stroke:#f8fafc; stroke-width:5}
.fx-pk .fx-chip{fill:#fff; stroke:#056187; stroke-width:1.2}
.fx-pk .fx-chip + path{stroke-width:1.4}

/* ---------- what you get: crew icons ---------- */
#what-you-get .crew-ico .fx-ico{width:24px; height:24px; overflow:visible; fill:none; stroke:#056187; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.fx-ico .fx-btn{transform-box:view-box; transform-origin:12px 12px}
.fx-ico.fx-in .fx-btn{animation:fx-push 3s cubic-bezier(.65,0,.35,1) 1.2s infinite paused}
.fx-ico.fx-in .fx-arcs{animation:fx-hold 3s cubic-bezier(.37,0,.63,1) 1.2s infinite paused}
@keyframes fx-push{0%,12%,86%,100%{transform:none} 26%,72%{transform:scale(.72)}}
@keyframes fx-hold{0%,22%,84%,100%{opacity:0} 34%,72%{opacity:1}}
.fx-glove{transform-box:view-box; transform-origin:12px 22px}
.fx-ico.fx-in .fx-glove{animation:fx-wave 4.2s cubic-bezier(.37,0,.63,1) 1.4s infinite paused}
/* one smooth sway out and back, then rest: no back-and-forth */
@keyframes fx-wave{0%,40%,100%{transform:none} 20%{transform:rotate(-8deg)}}
.fx-talk{fill:#056187; stroke:none}
.fx-ico.fx-in .fx-talk circle{animation:fx-dot 3.2s cubic-bezier(.37,0,.63,1) infinite paused}
.fx-ico.fx-in .fx-talk circle:nth-child(2){animation-delay:.18s}
.fx-ico.fx-in .fx-talk circle:nth-child(3){animation-delay:.36s}
.fx-ico.fx-in .fx-talk-b circle{animation-delay:1.6s}
.fx-ico.fx-in .fx-talk-b circle:nth-child(2){animation-delay:1.78s}
.fx-ico.fx-in .fx-talk-b circle:nth-child(3){animation-delay:1.96s}
@keyframes fx-dot{0%,34%,100%{opacity:.25} 12%{opacity:1}}
.fx-scan{stroke:#056187; stroke-width:1.4; opacity:0}
.fx-ico.fx-in .fx-scan{animation:fx-scan 2.8s cubic-bezier(.37,0,.63,1) 1.2s infinite alternate paused}
@keyframes fx-scan{0%{transform:translateY(-6.5px); opacity:0} 15%,85%{opacity:.9} 100%{transform:translateY(6.5px); opacity:0}}

/* ---------- who it's for: trade icons and a drifting topo band ---------- */
#who{position:relative; overflow:hidden}
#who .who-in{position:relative; z-index:1}
#who .fx-topo{position:absolute; inset:0; z-index:0; overflow:hidden}
#who .fx-topo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,#fff 8%,rgba(255,255,255,0) 45%,rgba(255,255,255,0) 80%,#fff)}
.fx-topo-in{display:block; fill:none; stroke:#bcd3df; stroke-width:1; opacity:.6}
.fx-topo.fx-in .fx-topo-in{animation:fx-drift 70s linear infinite paused}
@keyframes fx-drift{to{transform:translateX(-720px)}}
#who .trades li{display:inline-flex; align-items:center; gap:8px; padding-left:13px}
#who .fx-trade{width:20px; height:20px; flex:none; overflow:hidden; fill:none; stroke:#056187; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.fx-trade .fx-flowring, .fx-trade .fx-drum, .fx-trade .fx-ball{transform-box:view-box}
.fx-flowring{transform-origin:12px 14.5px}
.fx-trade.fx-in .fx-flowring{animation:fx-flow 2.6s cubic-bezier(.37,0,.63,1) infinite paused}
@keyframes fx-flow{0%{transform:scale(.3); opacity:1} 100%{transform:scale(2.4); opacity:0}}
.fx-trade.fx-in .fx-contour{animation:fx-slide 3.2s linear infinite paused}
@keyframes fx-slide{to{transform:translateX(-12px)}}
.fx-trade.fx-in .fx-lane{animation:fx-lane 1.3s linear infinite paused}
@keyframes fx-lane{to{transform:translateY(6px)}}
.fx-drum{transform-origin:9px 11px}
.fx-trade.fx-in .fx-drum{animation:fx-spin 5s linear infinite paused}
.fx-ball{transform-origin:17px 3.5px}
.fx-trade.fx-in .fx-ball{animation:fx-swing 2.8s cubic-bezier(.37,0,.63,1) infinite alternate paused}
@keyframes fx-swing{from{transform:rotate(16deg)} to{transform:rotate(-16deg)}}
@media (max-width:760px){ #who .trades li{padding-left:11px; gap:7px} }

/* ---------- pricing ---------- */
#pricing .fx-grid{position:absolute; inset:0; z-index:0; overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 58% 52% at 50% 58%,#000 10%,transparent 78%);
  mask-image:radial-gradient(ellipse 58% 52% at 50% 58%,#000 10%,transparent 78%)}
.fx-grid i{position:absolute; inset:0;
  background-image:linear-gradient(to right,rgba(5,97,135,.075) 1px,transparent 1px),linear-gradient(to bottom,rgba(5,97,135,.075) 1px,transparent 1px);
  background-size:48px 48px}
#pricing .fx-radar{position:absolute; width:560px; height:560px; right:-280px; bottom:-300px; border-radius:50%; overflow:hidden; z-index:0}
.fx-radar i{position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg,rgba(5,97,135,0) 0deg,rgba(5,97,135,.14) 64deg,rgba(5,97,135,0) 64.5deg)}
.fx-radar.fx-in i{animation:fx-spin 11s linear infinite paused}
#pricing .dg-plans{position:relative}
#pricing .fx-dim{position:absolute; left:0; top:-32px; width:100%; height:16px; overflow:visible; stroke:#056187; stroke-width:1}
.fx-dimline{stroke-dasharray:2 5; opacity:.45; transform-box:fill-box; transform-origin:0 50%}
.fx-tk{opacity:.5; transform-box:fill-box; transform-origin:50% 50%}
html.fx-armed .fx-dim:not(.fx-in) .fx-dimline{transform:scaleX(0)}
html.fx-armed .fx-dim:not(.fx-in) .fx-tk{transform:scaleY(0)}
html.fx-armed .fx-dim.fx-in .fx-dimline{transition:transform 1.6s cubic-bezier(.65,0,.35,1) .1s}
html.fx-armed .fx-dim.fx-in .fx-tk{transition:transform .6s cubic-bezier(.65,0,.35,1) calc(.2s + var(--i) * .45s)}
#pricing .dg-plan--featured{isolation:isolate}
.fx-sheen{position:absolute; inset:0; border-radius:inherit; overflow:hidden; z-index:-1}
.fx-sheen i{position:absolute; top:0; bottom:0; left:0; width:45%;
  background:linear-gradient(105deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 80%);
  transform:translateX(-110%)}
.fx-sheen.fx-in i{animation:fx-sheen 8s cubic-bezier(.65,0,.35,1) 1.2s infinite paused}
@keyframes fx-sheen{0%{transform:translateX(-110%)} 26%,100%{transform:translateX(240%)}}
#pricing .fx-tg{position:relative}
.fx-thumb{position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:999px; background:#fff; border:1px solid #e3e7eb;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 14px -8px rgba(5,97,135,.35); transform-origin:0 50%; pointer-events:none}
#pricing .fx-tg .dg-toggle__btn{position:relative; z-index:1}
#pricing .fx-tg .dg-toggle__btn[aria-pressed='true']{background:transparent; border-color:transparent; box-shadow:none}
/* the roll's window is the digits' own band (cap top to baseline, Bebas at
   line-height 1), so a digit on its way in or out never shows above or
   below the price line */
#pricing .fx-dg{position:relative; display:inline-block; overflow:hidden; vertical-align:top; line-height:1; clip-path:inset(.07em 0 .19em)}
#pricing .fx-dg-new{display:inline-block; animation:fx-roll-in .6s cubic-bezier(.65,0,.35,1) calc(var(--n) * 80ms) both}
#pricing .fx-dg-old{position:absolute; left:0; top:0; animation:fx-roll-out .6s cubic-bezier(.65,0,.35,1) calc(var(--n) * 80ms) both}
@keyframes fx-roll-in{from{transform:translateY(100%); opacity:0} to{transform:none; opacity:1}}
@keyframes fx-roll-out{from{transform:none; opacity:1} to{transform:translateY(-100%); opacity:0}}
@media (max-width:960px){ #pricing .fx-dim{display:none} }
@media (max-width:600px){ #pricing .fx-radar{display:none} }

/* ---------- FAQ ---------- */
#faq .fx-bubbles{display:block; width:min(100%,230px); height:auto; margin-top:44px; overflow:visible; fill:none; stroke-linecap:round; stroke-linejoin:round}
.fx-bubbles .fx-draw{stroke:#056187; stroke-width:2}
.fx-bubbles .fx-q{stroke:#bcd3df; stroke-width:5}
.fx-bubbles .fx-abub{fill:#e8f1f5; stroke:none}
.fx-bubbles .fx-bar{stroke:#056187; stroke-width:4; transform-box:fill-box; transform-origin:50% 50%}
.fx-bubbles.fx-in .fx-bar{animation:fx-level 1.2s cubic-bezier(.37,0,.63,1) calc(var(--i) * -.23s) infinite alternate paused}
.fx-bubbles.fx-in .fx-bar:nth-child(odd){animation-duration:.9s}
@keyframes fx-level{from{transform:scaleY(.3)} to{transform:scaleY(1.2)}}
@media (min-width:901px){ #faq.fx-faq .faq-grid > div:first-child{position:sticky; top:112px} }
@media (max-width:900px){ #faq .fx-bubbles{display:none} }
#faq.fx-faq .faq-item summary .pm{transition:transform .55s cubic-bezier(.65,0,.35,1), background-color .3s ease, border-color .3s ease, color .3s ease}
#faq.fx-faq .faq-item summary:hover .pm{border-color:#056187}
#faq.fx-faq .faq-item[open] summary .pm{transform:rotate(180deg)}
#faq.fx-faq .pm svg{width:12px; height:12px; overflow:visible; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round}
.fx-pm-v{transform-box:fill-box; transform-origin:50% 50%; transition:transform .55s cubic-bezier(.65,0,.35,1)}
#faq.fx-faq .faq-item[open] .fx-pm-v{transform:scaleY(0)}
#faq .fx-a-rule{display:block; height:1px; margin:0 0 14px; background:linear-gradient(90deg,#056187,rgba(5,97,135,.25) 40%,rgba(5,97,135,0) 85%); transform-origin:0 50%}

/* ---------- final band ---------- */
#demo .fx-contours{position:absolute; inset:0; overflow:hidden}
.fx-hill{position:absolute; width:660px; height:660px; margin:-330px 0 0 -330px; fill:none; stroke:#fff; stroke-opacity:.1; stroke-width:1.2}
.fx-hill-a{left:14%; top:20%}
.fx-hill-b{left:88%; top:92%}
.fx-contours.fx-in .fx-hill{animation:fx-spin 180s linear infinite paused}
.fx-contours.fx-in .fx-hill-b{animation-duration:240s; animation-direction:reverse}
#demo .fx-digger, #demo .fx-site{position:absolute; bottom:0; height:auto; overflow:visible; fill:none; stroke:#fff; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.5}
#demo .fx-digger{right:max(16px,4%); width:clamp(165px,19.5vw,270px); --dur:1.2s}
#demo .fx-site{left:max(16px,5%); width:clamp(110px,13vw,180px)}
/* the band teal: a nearer part hides the lines behind it */
.fx-digger .fx-xsolid{fill:#056187}
.fx-digger .fx-xload{stroke-width:1.3}
.fx-digger .fx-xdot{fill:#fff; stroke:none}
.fx-flag{transform-box:view-box; transform-origin:128px 100px}
.fx-flag[style]{transform-origin:148px 100px}
.fx-site.fx-in .fx-flag{animation:fx-sway 3.4s cubic-bezier(.37,0,.63,1) calc(var(--f,0) * -1.3s) infinite alternate paused}
@keyframes fx-sway{from{transform:rotate(-2.5deg)} to{transform:rotate(2.5deg)}}
#demo.fx-marked .fmark{display:none}
#demo .fx-mark{display:block; margin:0 auto 22px; width:56px; height:49px; overflow:visible; --dur:2.2s}
.fx-mark .fx-mark-line{fill:none; stroke:#fff; stroke-width:22; stroke-linejoin:round}
.fx-mark .fx-mark-fill{fill:#fff}
html.fx-armed .fx-mark:not(.fx-in) .fx-mark-fill{opacity:0}
html.fx-armed .fx-mark.fx-in .fx-mark-fill{transition:opacity 1s cubic-bezier(.37,0,.63,1) 1.7s}
#demo .final-ctas .btn{position:relative; overflow:hidden; isolation:isolate}
#demo .final-ctas .btn-white:hover{box-shadow:0 12px 26px -12px rgba(2,32,48,.55)}
.fx-cta{position:absolute; top:0; bottom:0; left:0; width:55%; z-index:-1; pointer-events:none; transform:translateX(-120%);
  background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.22) 50%,rgba(255,255,255,0))}
#demo .btn-white .fx-cta{background:linear-gradient(105deg,rgba(5,97,135,0),rgba(5,97,135,.12) 50%,rgba(5,97,135,0))}
#demo .final-ctas .btn:hover .fx-cta{transform:translateX(260%); transition:transform .9s cubic-bezier(.65,0,.35,1)}
@media (max-width:600px){
  #demo .final-in{padding-bottom:128px}
  #demo .fx-digger{width:168px}
  #demo .fx-site{width:112px}
}

/* ---------- footer ---------- */
footer .fx-rule{display:block; width:100%; height:28px; margin:0 0 -7px; overflow:visible; fill:none; stroke:#cbd5e1; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round}
footer .fx-rule + .foot-legal{border-top-color:transparent}
.fx-rule .fx-knock{fill:#fff; stroke:none}
.fx-rule .fx-draw{stroke:#94a3b8}
.fx-rule .fx-fpipe{stroke:#056187; stroke-width:1.5}
.fx-rule .fx-fdot{fill:#056187; stroke:none}
.fx-rule .fx-ground{transform-box:fill-box; transform-origin:0 50%}
html.fx-armed .fx-rule:not(.fx-in) .fx-ground{transform:scaleX(0)}
html.fx-armed .fx-rule.fx-in .fx-ground{transition:transform 1.8s cubic-bezier(.65,0,.35,1)}
.fx-rule.fx-in .fx-fdot{animation:fx-glow 2.6s cubic-bezier(.37,0,.63,1) infinite alternate paused}
@keyframes fx-glow{from{opacity:.25} to{opacity:1}}

/* ---------- play only on screen; nothing moves in static mode ---------- */
.fx-live .fx-loop, .fx-live.fx-loop{animation-play-state:running !important}
html.rm .fx-loop, html.rm .fx-loop *, html.rm .fx-host *{animation:none !important; transition:none !important}
html.rm #faq.fx-faq .faq-item summary .pm, html.rm #faq.fx-faq .pm *{transition:none !important}
html.rm .fx-scan, html.rm .fx-pk, html.rm .fx-rip{display:none}