/* =====================================================================
   Marketing Automation page — section styles (loads after bpa.css)
   ===================================================================== */
@keyframes mkSpin{to{transform:rotate(360deg)}}
@keyframes mkPulse{0%{transform:scale(1);opacity:.35}100%{transform:scale(1.6);opacity:0}}

/* ---------- 1. Hero journey ---------- */
.mk-hx{display:block;width:100%;height:auto;font-family:inherit}
.mh-track{fill:none;stroke:rgba(127,198,221,.25);stroke-width:10;stroke-linecap:round}
.mh-line{fill:none;stroke:#7FC6DD;stroke-width:2.2;stroke-dasharray:1 8;stroke-linecap:round}
.mh-n circle{fill:#0F3352;stroke:#5BFBC2;stroke-width:1.6}
.mh-n .halo{fill:#5BFBC2;stroke:none;opacity:0;transform-box:fill-box;transform-origin:center}
.mh-n text{fill:#fff;font-size:12px;font-weight:800}
.mh-n .halo{animation:mhHalo 8s ease infinite}
.mh-n.n1 .halo{animation-delay:1.2s}.mh-n.n2 .halo{animation-delay:3.4s}.mh-n.n3 .halo{animation-delay:5.2s}.mh-n.n4 .halo{animation-delay:6.6s}
@keyframes mhHalo{0%{opacity:.4;transform:scale(.8)}12%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
.mh-bub rect{fill:#fff}
.mh-bub{opacity:0;animation:mhBub 8s ease infinite}
.mh-bub.b1{animation-delay:.35s}.mh-bub.b2{animation-delay:.7s}
@keyframes mhBub{0%,14%{opacity:0;transform:translateY(8px)}18%,40%{opacity:1;transform:none}46%,100%{opacity:0}}
.mh-tag rect{fill:#5BFBC2}
.mh-tag text{font-size:11.5px;font-weight:800;fill:#102B46}
.mh-tag{opacity:0;animation:mhTag 8s ease infinite}
.mh-tag.t0{animation-name:mhTag0}.mh-tag.t1{animation-name:mhTag1}
@keyframes mhTag0{0%,40%{opacity:0}45%,62%{opacity:1}68%,100%{opacity:0}}
@keyframes mhTag1{0%,64%{opacity:0}68%,90%{opacity:1}95%,100%{opacity:0}}
.mh-dot{fill:#5BFBC2;stroke:#102B46;stroke-width:2.5;filter:drop-shadow(0 0 6px rgba(91,251,194,.9))}
@media (prefers-reduced-motion:reduce){.mh-n .halo,.mh-bub,.mh-tag{animation:none}.mh-bub,.mh-tag{opacity:1}.mh-dot{display:none}}

/* ---------- 2. Signs: phone notifications ---------- */
.mk-signs{background:var(--white)}
.sn{display:grid;gap:34px;align-items:center}
@media (min-width:980px){.sn{grid-template-columns:minmax(0,1fr) 420px;gap:64px}}
.sn .sec-head{margin-bottom:0}
.ph{position:relative;width:100%;max-width:420px;margin:0 auto;padding:14px 14px 22px;border-radius:44px;background:#0E2A45;
  box-shadow:0 0 0 2px #1C4466 inset,0 40px 80px -40px rgba(16,43,70,.7)}
.ph::before{content:"";position:absolute;inset:8px;border-radius:38px;background:linear-gradient(180deg,#EEF6F9,#E4EEF2);z-index:0}
.ph>*{position:relative;z-index:1}
.ph-top{display:flex;align-items:center;justify-content:space-between;padding:10px 22px 6px;font-size:.78rem;font-weight:800;color:var(--navy)}
.ph-top i{width:90px;height:22px;border-radius:999px;background:#0E2A45}
.ph-ic{display:flex;gap:3px;align-items:flex-end}.ph-ic b{display:block;width:4px;border-radius:1px;background:var(--navy)}
.ph-ic b:nth-child(1){height:6px}.ph-ic b:nth-child(2){height:9px}.ph-ic b:nth-child(3){height:12px}
.ph-h{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 10px;font-size:1.05rem;font-weight:800;color:var(--navy)}
.ph-h span{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--navy);color:var(--mint);font-size:.74rem}
.ph-n{display:grid;grid-template-columns:auto 1fr;gap:12px;margin:0 6px 9px;padding:13px 14px;border-radius:18px;background:rgba(255,255,255,.92);
  box-shadow:0 10px 22px -18px rgba(16,43,70,.55);backdrop-filter:blur(6px);opacity:0;transform:translateY(-14px) scale(.98);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i) * 140ms + 200ms)}
.ph.in .ph-n{opacity:1;transform:none}
.ph-app{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--navy);color:var(--mint)}
.ph-app svg{width:19px;height:19px}
.ph-n b{display:block;font-size:.94rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.ph-n p{margin:3px 0 0;font-size:.82rem;line-height:1.5;color:#000}
@media (prefers-reduced-motion:reduce){.ph-n{opacity:1;transform:none;transition:none}}

/* ---------- 3. Services: slider ---------- */
.sl2-top{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.sl2-ctl{display:flex;gap:8px}
.sl2-b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:#fff;color:var(--navy);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.sl2-b:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.sl2-b svg{width:16px;height:16px}
.sl2-b:focus-visible,.sl2-track:focus-visible{outline:2.5px solid var(--turq);outline-offset:3px}
.sl2-bar{flex:1;height:3px;border-radius:2px;background:var(--line-2);overflow:hidden}
.sl2-bar i{display:block;height:100%;width:30%;background:linear-gradient(90deg,var(--turq),var(--mint));border-radius:2px;transition:width .3s,transform .3s}
.sl2-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(400px,84%);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 18px;scrollbar-width:none}
.sl2-track::-webkit-scrollbar{display:none}
.sl2-c{scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 44px -34px rgba(16,43,70,.5);transition:transform .35s var(--ease)}
.sl2-c:hover{transform:translateY(-4px)}
.sl2-art{position:relative;padding:14px 14px 0;background:linear-gradient(180deg,#F3FAFB,#E9F4F7)}
.sv-art{display:block;width:100%;height:auto}
.sl2-n{position:absolute;right:16px;top:12px;font-size:.78rem;font-weight:800;letter-spacing:.08em;color:var(--turq)}
.sl2-c h3{margin:20px 22px 0;font-size:1.18rem;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--navy)}
.sl2-c p{margin:10px 22px 24px;font-size:.93rem;line-height:1.65;color:#000}
.sl2-note{margin:8px 0 0;font-size:.9rem;line-height:1.6;color:#000}

/* ---------- 5. Outcomes: stacking cards ---------- */
.mk-out{position:relative;color:#fff;background:linear-gradient(160deg,#133C5E 0%,#0C2642 50%,#07192C 100%)}
.mk-out .clabel{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.mk-out .h2{color:#fff}
.mk-out .hi{padding:0 3px;background:linear-gradient(var(--mint),var(--mint)) 0 88%/100% .3em no-repeat}
.mk-out .lede{color:rgba(255,255,255,.78)}
.mo{display:grid;gap:30px}
@media (min-width:1000px){.mo{grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:56px;align-items:start}.mo-l{position:sticky;top:calc(var(--nav-h) + 50px)}}
.stk{display:grid;gap:22px;padding-bottom:10px}
.stk-c{position:sticky;top:calc(var(--nav-h) + 30px + var(--i) * 22px);display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:start;min-height:170px;padding:30px 30px;border-radius:26px;
  background:linear-gradient(135deg,#FFFFFF 0%,#F1FAFC 100%);color:var(--navy);box-shadow:0 -10px 40px -18px rgba(0,0,0,.45)}
.stk-c:nth-child(even){background:linear-gradient(135deg,#E2FBF2 0%,#F4FDFA 100%)}
.stk-ic{grid-row:span 2;display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:var(--navy);color:var(--mint)}
.stk-ic svg{width:26px;height:26px}
.stk-c h3{margin:4px 0 0;font-size:1.3rem;font-weight:800;letter-spacing:-.025em;line-height:1.25;color:var(--navy)}
.stk-c p{margin:10px 0 0;font-size:.97rem;line-height:1.65;color:#000;max-width:56ch}
@media (max-width:620px){.stk-c{grid-template-columns:1fr;padding:22px}.stk-ic{grid-row:auto;margin-bottom:12px;width:48px;height:48px}}

/* ---------- 6. Industries: flip cards ---------- */
.mk-ind{background:var(--white)}
.fl{display:grid;gap:18px}
@media (min-width:640px){.fl{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.fl{grid-template-columns:repeat(6,1fr)}.fl-c{grid-column:span 2}.fl-c:nth-child(4){grid-column:2/span 2}}
.fl-c{perspective:1200px}
.fl-in{position:relative;display:block;width:100%;min-height:330px;padding:0;border:0;background:none;cursor:pointer;font:inherit;text-align:left;transform-style:preserve-3d;transition:transform .7s var(--ease)}
.fl-in:focus-visible{outline:2.5px solid var(--turq);outline-offset:4px;border-radius:22px}
.fl-f,.fl-b{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fl-f{background:#fff;border:1px solid var(--line);box-shadow:0 22px 44px -34px rgba(16,43,70,.55)}
.fl-f img{display:block;width:100%;aspect-ratio:700/466;height:auto;object-fit:cover}
.fl-nm{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px}
.fl-nm b{font-size:1.12rem;font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1.25}
.fl-nm i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--paper);color:var(--turq)}
.fl-nm i svg{width:15px;height:15px}
.fl-b{transform:rotateY(180deg);justify-content:center;padding:28px;background:radial-gradient(120% 120% at 0% 0%,#1D6A90 0%,#102B46 55%,#0B2038 100%);color:#fff}
.fl-b b{font-size:1.2rem;font-weight:800;letter-spacing:-.02em;color:var(--mint)}
.fl-b span{margin-top:12px;font-size:.95rem;line-height:1.65;color:#fff}
.fl-c:hover .fl-in,.fl-in:focus-visible,.fl-in[aria-pressed="true"]{transform:rotateY(180deg)}
@media (hover:none){.fl-c:hover .fl-in{transform:none}.fl-in[aria-pressed="true"]{transform:rotateY(180deg)}}
@media (prefers-reduced-motion:reduce){.fl-in{transition:none}}
.fl-cta{display:flex;justify-content:center;margin-top:28px}

/* ---------- 10. Technology: stacked layers ---------- */
.tc{display:grid;gap:30px;align-items:center}
@media (min-width:960px){.tc{grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:56px}}
.tc-v{max-width:440px;margin:0 auto;width:100%}
.ly{display:block;width:100%;height:auto;overflow:visible;font-family:inherit}
.ly-p path{stroke-width:2}
.ly-p.p0 path{fill:#fff;stroke:var(--turq)}
.ly-p.p1 path{fill:var(--navy);stroke:var(--navy)}
.ly-p.p2 path{fill:#E2FBF2;stroke:#7FE9C4}
.ly-chips rect{fill:var(--navy)}
.ly-chips text{fill:#fff;font-size:11.5px;font-weight:800}
.ly-l{stroke:var(--turq);stroke-width:2;stroke-dasharray:2 5}
.ly-p{transition:transform .45s var(--ease)}
.tc-v:hover .ly-p.p0{transform:translate(210px,80px)}
.tc-v:hover .ly-p.p2{transform:translate(210px,312px)}
.tc-i{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.tc-i:last-child{border-bottom:0}
.tc-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px}
.tc-ic svg{width:22px;height:22px}
.tc-i.p0 .tc-ic{background:#fff;border:2px solid var(--turq);color:var(--turq)}
.tc-i.p1 .tc-ic{background:var(--navy);color:var(--mint)}
.tc-i.p2 .tc-ic{background:#E2FBF2;border:2px solid #7FE9C4;color:var(--turq)}
.tc-i h3{margin:2px 0 0;font-size:1.14rem;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.tc-i p{margin:6px 0 0;font-size:.93rem;line-height:1.62;color:#000}

/* ---------- 11. After go-live: control panel ---------- */
.mk-agl{position:relative;overflow:hidden;color:#fff;background:linear-gradient(160deg,#0E2A45 0%,#0B2038 55%,#081829 100%)}
.mk-agl::before{content:"";position:absolute;right:-160px;top:-200px;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(91,251,194,.13),transparent)}
.ag{position:relative;display:grid;gap:30px;align-items:center}
@media (min-width:980px){.ag{grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:60px}}
.mk-agl .clabel{background:var(--mint);border-color:var(--mint);color:var(--navy)}
.mk-agl .clabel em{background:var(--navy)}
.ag-l h2{margin:16px 0 0;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.15;color:#fff}
.mk-agl .hi{padding:0 3px;background:linear-gradient(var(--mint),var(--mint)) 0 88%/100% .3em no-repeat}
.ag-lede{margin:16px 0 0;font-size:1.02rem;line-height:1.6;color:rgba(255,255,255,.82)}
.ag-note{margin:18px 0 0;padding:12px 14px;border-radius:12px;border:1px dashed rgba(91,251,194,.5);font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.78)}
.cp{border-radius:24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);overflow:hidden;box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.cp-h{display:flex;align-items:center;gap:12px;padding:14px 20px;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.1)}
.cp-h b{font-size:.92rem;font-weight:800;color:#fff}
.cp-dots{display:flex;gap:5px}.cp-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25)}
.cp-r{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.cp-r:last-child{border-bottom:0}
.cp-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(91,251,194,.12);color:var(--mint)}
.cp-ic svg{width:20px;height:20px}
.cp-r b{display:block;font-size:1rem;font-weight:800;color:#fff}
.cp-r p{margin:4px 0 0;font-size:.87rem;line-height:1.55;color:rgba(255,255,255,.82)}
.cp-sw{position:relative;width:46px;height:26px;border-radius:999px;background:var(--mint)}
.cp-sw i{position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--navy)}

/* ---------- 13. Close: ring CTA ---------- */
.mc{display:grid;gap:34px;align-items:center}
@media (min-width:900px){.mc{grid-template-columns:1fr auto;gap:60px}}
.mc-l .h2{margin-top:14px}
.mc-l p{margin:14px 0 0;font-size:1.02rem;line-height:1.6;color:#000;max-width:52ch}
.mc-ring{position:relative;display:grid;place-items:center;width:230px;height:230px;margin:0 auto;border-radius:50%;color:var(--navy)}
.mc-ring>svg{position:absolute;inset:0;width:100%;height:100%;animation:mkSpin 18s linear infinite}
.mc-ring text{font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;fill:var(--turq)}
.mc-core{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:150px;height:150px;border-radius:50%;background:var(--navy);color:#fff;text-align:center;padding:18px;box-shadow:0 20px 40px -20px rgba(16,43,70,.7);transition:background .3s,transform .3s var(--ease)}
.mc-core b{font-size:.92rem;font-weight:800;line-height:1.25}
.mc-core .chev{color:var(--mint)}
.mc-ring:hover .mc-core{background:var(--turq);transform:scale(1.04)}
.mc-ring:focus-visible{outline:2.5px solid var(--turq);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.mc-ring>svg{animation:none}}

/* hero caption pill (same as other inner pages) */
.mk-hx .ah-foot rect{fill:rgba(91,251,194,.12);stroke:rgba(91,251,194,.5)}
.mk-hx .ah-foot text{fill:#fff;font-size:13px;font-weight:700}
.mc-core .chev{display:inline-grid;width:auto;height:auto}
.mc-core .chev svg{width:16px;height:16px}
.mc-ring text{font-size:11.5px;letter-spacing:.1em}
.mc-core .chev{position:static;transform:none;margin:0;background:none;box-shadow:none}

/* =====================================================================
   v2: scroll animation everywhere + redesigned sections
   ===================================================================== */
.rv.sr-l{transform:translateX(-46px)}
.rv.sr-r{transform:translateX(46px)}
.rv.sr-z{transform:scale(.94)}
.rv.sr-l.in,.rv.sr-r.in,.rv.sr-z.in{transform:none}
.mk-svc .rv,.stk-c.rv{transition-duration:.8s}
.cp.rv .cp-r{opacity:0;transform:translateX(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.cp.rv.in .cp-r{opacity:1;transform:none}
.cp.rv.in .cp-r:nth-child(3){transition-delay:.12s}.cp.rv.in .cp-r:nth-child(4){transition-delay:.24s}.cp.rv.in .cp-r:nth-child(5){transition-delay:.36s}
.cp-sw{transition:background .4s .5s}.cp.rv:not(.in) .cp-sw{background:rgba(255,255,255,.2)}
.cp-sw i{transition:right .4s .5s}.cp.rv:not(.in) .cp-sw i{right:23px}

/* ---------- 2. Signs: leaky journey on the left ---------- */
.lk{margin-top:30px;padding:18px 18px 14px;border-radius:24px;background:linear-gradient(180deg,#F3FAFB,#E9F4F7);border:1px solid var(--line)}
.lk-svg{display:block;width:100%;height:auto;overflow:visible;font-family:inherit}
.lk-bg{fill:none;stroke:#D5E4EA;stroke-width:12;stroke-linecap:round}
.lk-ln{fill:none;stroke:var(--turq);stroke-width:2.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease) .2s}
.lk.in .lk-ln{stroke-dashoffset:0}
.lk-g circle{fill:var(--navy);stroke:#fff;stroke-width:3}
.lk-g .pl{fill:var(--mint);stroke:none;opacity:0;transform-box:fill-box;transform-origin:center}
.lk-g text{fill:var(--mint);font-size:13px;font-weight:800}
.lk-g{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .4s,transform .5s var(--ease)}
.lk.in .lk-g{opacity:1;transition-delay:calc(.5s + var(--i) * .28s)}
.lk.in .lk-g .pl{animation:mkPulse 2.4s ease-out infinite;animation-delay:calc(1.8s + var(--i) * .3s)}
.lk-e circle{fill:var(--mint);stroke:var(--navy);stroke-width:3}
.lk-t{font-size:12.5px;font-weight:800;fill:var(--navy)}
.lk-cap{display:flex;align-items:center;gap:10px;margin:6px 0 0;font-size:.9rem;font-weight:700;color:var(--navy)}
.lk-cap span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--navy);color:var(--mint);font-size:.8rem;font-weight:800}
.ph-app{position:relative}
.ph-app em{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--mint);color:var(--navy);font-style:normal;font-size:.64rem;font-weight:800;box-shadow:0 0 0 2px #fff}
@media (min-width:980px){.sn{align-items:center}.sn-l{align-self:center}}

/* ---------- 3. Services: pinned horizontal scroll ---------- */
.mk-svc.band{padding-block:0}
.hs{position:relative}
.hs-pin{padding-block:clamp(64px,8vw,104px)}
.hs-view{overflow:hidden;margin-top:10px}
.hs-track{display:grid;gap:18px}
.hs-c{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.hs-c.in{opacity:1;transform:none}
.hs-foot{margin-top:18px}
.hs-bar{display:none;height:3px;border-radius:2px;background:var(--line-2);overflow:hidden;margin-bottom:14px}
.hs-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--turq),var(--mint))}
@media (min-width:640px){.hs-track{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){
  .hs.on .hs-pin{position:sticky;top:calc(var(--nav-h) + 0px);height:calc(100vh - var(--nav-h));display:flex;align-items:center;padding-block:28px}
  .hs.on .hs-pin>.wrap{width:100%}
  .hs.on .hs-pin .sec-head{margin-bottom:22px}
  .hs.on .hs-view{overflow:visible}
  .hs.on .hs-track{display:flex;gap:22px;width:max-content;will-change:transform}
  .hs.on .hs-c{width:380px;flex:none}
  .hs.on .hs-bar{display:block}
}
@media (prefers-reduced-motion:reduce){.hs-c{opacity:1;transform:none}}

/* ---------- 4. In practice: scrollytelling ---------- */
.mk-ip{background:var(--white)}
.sy{display:grid;gap:26px}
@media (min-width:1000px){.sy{grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:56px;align-items:start}}
.sy .tagline{display:inline-flex;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--turq-d);margin-bottom:14px}
.sy-card{border-radius:24px;padding:22px;background:radial-gradient(120% 120% at 0% 0%,#1D6A90 0%,#102B46 55%,#0B2038 100%);color:#fff;box-shadow:0 30px 60px -36px rgba(16,43,70,.7)}
@media (min-width:1000px){.sy-l{position:sticky;top:calc(var(--nav-h) + 40px)}}
@media (max-width:999px){.sy-card{display:none}}
.sy-h{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12)}
.sy-av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(91,251,194,.16);color:var(--mint)}.sy-av svg{width:22px;height:22px}
.sy-h b{display:block;font-size:1.05rem;font-weight:800}
.sy-h span:not(.sy-av){display:block;font-size:.78rem;font-weight:700;color:var(--mint)}
.sy-card dl{margin:8px 0 0}
.sy-f{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.12)}
.sy-f dt{font-size:.82rem;font-weight:700;color:rgba(255,255,255,.72)}
.sy-f dd{margin:0;font-size:.84rem;font-weight:800;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;white-space:nowrap;transition:background .4s,color .4s}
.sy-f dd.on{background:var(--mint);color:var(--navy)}
.sy-f dd.flash{animation:syFlash .6s var(--ease)}
@keyframes syFlash{0%{transform:scale(.9);opacity:.3}100%{transform:none;opacity:1}}
.sy-prog{height:4px;margin-top:16px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.sy-prog i{display:block;height:100%;width:16.6%;background:var(--mint);transition:width .5s var(--ease)}
.sy-r{display:grid;gap:18px}
.sy-s{position:relative;display:grid;grid-template-columns:auto 1fr;gap:16px;padding:22px 22px 22px 18px;border-radius:22px;background:#F6FBFC;border:1px solid var(--line);opacity:.45;transform:translateX(18px);transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .4s,box-shadow .4s,background .4s}
@media (min-width:1000px){.sy-s{min-height:220px;align-content:center}}
.sy-s.seen{opacity:.6;transform:none}
.sy-s.on{opacity:1;transform:none;background:#fff;border-color:var(--mint);box-shadow:0 24px 44px -30px rgba(16,43,70,.55)}
.sy-n{position:absolute;right:20px;top:16px;font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:transparent;-webkit-text-stroke:1.3px rgba(27,118,153,.45)}
.sy-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#EAF4F7;color:var(--turq);transition:background .4s,color .4s}
.sy-ic svg{width:22px;height:22px}
.sy-s.on .sy-ic{background:var(--navy);color:var(--mint)}
.sy-s h3{margin:2px 50px 0 0;font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.sy-s p{margin:8px 0 0;font-size:.93rem;line-height:1.65;color:#000}
.sy-u{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-style:normal;font-size:.76rem;font-weight:800;padding:5px 11px;border-radius:999px;background:var(--navy);color:#fff}
.sy-u svg{width:13px;height:13px;color:var(--mint)}
@media (min-width:1000px){.sy-u{display:none}}
.sy-exit{margin-top:34px;padding:20px 22px;border-radius:22px;background:var(--navy);color:#fff;display:grid;gap:14px}
@media (min-width:900px){.sy-exit{grid-template-columns:auto 1fr;align-items:center;gap:26px}}
.sy-exit>b{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:800;color:var(--mint);white-space:nowrap}
.sy-exit>b span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--mint);color:var(--navy)}.sy-exit>b svg{width:19px;height:19px}
.sy-exit ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:900px){.sy-exit ul{grid-template-columns:repeat(3,1fr);gap:18px}}
.sy-exit li{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;line-height:1.55;color:#fff}
.sy-exit li svg{flex:none;width:17px;height:17px;margin-top:2px;color:var(--mint)}
@media (prefers-reduced-motion:reduce){.sy-s{opacity:1;transform:none}}

/* ---------- 7. Starting point: journey card ---------- */
.mk-start{background:linear-gradient(180deg,#FFFFFF 0%,#EEF8F9 100%)}
.ms{max-width:980px;margin:0 auto;padding:clamp(28px,4vw,46px);border-radius:30px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(16,43,70,.55);display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden}
.ms::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--turq),var(--mint))}
.ms-route{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0}
.ms-route li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:118px;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.25s + var(--i) * .14s)}
.ms.in .ms-route li{opacity:1;transform:none}
.ms-route li+li::before{content:"";position:absolute;right:calc(50% + 28px);top:24px;width:62px;border-top:2px dotted var(--turq)}
.ms-route span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--navy);color:var(--mint)}
.ms-route li:last-child span{background:var(--mint);color:var(--navy)}
.ms-route span svg{width:21px;height:21px}
.ms-route b{font-size:.78rem;font-weight:800;color:var(--navy)}
.ms h2{margin:14px 0 0;font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;letter-spacing:-.035em;line-height:1.15;color:var(--navy);max-width:22ch}
.ms p{margin:12px 0 24px;font-size:1rem;line-height:1.6;color:#000;max-width:50ch}
@media (max-width:620px){.ms-route li{width:92px}.ms-route li+li::before{width:40px;right:calc(50% + 26px)}}

/* ---------- 8. Approach: columns + scroll-linked progress ---------- */
.pg{position:relative}
.pg-bar{position:absolute;left:23px;top:24px;bottom:24px;width:3px;border-radius:2px;background:var(--line-2)}
.pg-bar i{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;background:linear-gradient(180deg,var(--turq),var(--mint))}
.pg-l{list-style:none;margin:0;padding:0 0 0 68px;display:grid;gap:22px}
.pg-i{position:relative;padding:4px 0 6px;opacity:.4;transition:opacity .5s var(--ease)}
.pg-i.on{opacity:1}
.pg-m{position:absolute;left:-68px;top:0;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--line-2);color:#9AAAB4;transition:background .4s,border-color .4s,color .4s,box-shadow .4s}
.pg-m svg{width:21px;height:21px}
.pg-i.on .pg-m{background:var(--navy);border-color:var(--navy);color:var(--mint);box-shadow:0 0 0 6px rgba(91,251,194,.3)}
.pg-n{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--turq);padding-top:4px}
.pg-i h3{margin:4px 0 0;font-size:1.12rem;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.pg-i p{margin:8px 0 0;font-size:.9rem;line-height:1.62;color:#000}
@media (min-width:1000px){
  .pg-bar{left:10%;right:10%;top:23px;bottom:auto;width:auto;height:3px}
  .pg-bar i{height:100%;width:0}
  .pg-l{padding:0;grid-template-columns:repeat(5,1fr);gap:24px}
  .pg-i{text-align:center;padding:0 4px}
  .pg-m{position:relative;left:auto;margin:0 auto 18px}
  .pg-i p{font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){.pg-i{opacity:1}}

/* ---------- 9. Why: Venn ---------- */
.mk-why{background:var(--white)}
.vn{display:grid;gap:24px;align-items:center}
@media (min-width:1080px){.vn{grid-template-columns:minmax(0,1fr) minmax(0,440px) minmax(0,1fr);gap:34px}}
.vn-col{display:grid;gap:22px}
.vn-v{max-width:440px;margin:0 auto;width:100%}
@media (max-width:1079px){.vn-v{order:-1}.vn{grid-template-columns:1fr}.vn-col{grid-template-columns:1fr}}
@media (min-width:640px) and (max-width:1079px){.vn-col{grid-template-columns:1fr 1fr}}
.vn-svg{display:block;width:100%;height:auto;overflow:visible;font-family:inherit}
.vn-c circle{stroke-width:2}
.vn-c.v0 circle{fill:rgba(27,118,153,.14);stroke:rgba(27,118,153,.5)}
.vn-c.v1 circle{fill:rgba(91,251,194,.24);stroke:rgba(16,140,110,.45)}
.vn-c.v2 circle{fill:rgba(16,43,70,.1);stroke:rgba(16,43,70,.35)}
.vn-c.v3 circle{fill:rgba(127,198,221,.22);stroke:rgba(27,118,153,.4)}
.vn-c text{font-size:15px;font-weight:800;fill:var(--navy)}
.vn-c{transform:translate(var(--dx),var(--dy));opacity:0;transition:transform 1.1s var(--ease),opacity .8s var(--ease)}
.vn-v.in .vn-c{transform:none;opacity:1}
.vn-core{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;transition:opacity .5s .9s,transform .6s var(--ease) .9s}
.vn-v.in .vn-core{opacity:1;transform:none}
.vn-core circle{fill:var(--navy);stroke:var(--mint);stroke-width:3}
.vn-core text{fill:#fff;font-size:13px;font-weight:800}
.vn-i{padding:22px 22px;border-radius:22px;background:#F6FBFC;border:1px solid var(--line)}
@media (min-width:1080px){.vn-col:first-child .vn-i{text-align:right}.vn-col:first-child .vn-ic{margin-left:auto}}
.vn-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--navy);color:var(--mint)}
.vn-ic svg{width:22px;height:22px}
.vn-i h3{margin:14px 0 0;font-size:1.14rem;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.vn-i p{margin:8px 0 0;font-size:.92rem;line-height:1.62;color:#000}
@media (prefers-reduced-motion:reduce){.vn-c,.vn-core{transform:none;opacity:1}}

/* ---------- 12. FAQ: two-column accordion, all closed ---------- */
.mk-faq{background:var(--white)}
.qa2{display:grid;gap:14px;align-items:start}
@media (min-width:900px){.qa2{grid-template-columns:1fr 1fr;gap:16px 22px}}
.qa2-i.faq{border:1px solid var(--line);border-radius:18px;background:#F6FBFC;transition:background .3s,border-color .3s,box-shadow .3s}
.qa2-i.faq.is-open{background:#fff;border-color:var(--mint);box-shadow:0 20px 40px -30px rgba(16,43,70,.5)}
.qa2-i .faq-q{grid-template-columns:auto minmax(0,1fr) 22px;gap:14px;padding:18px 20px;font-size:1rem}
.qa2-i .qa-q{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--navy);color:var(--mint);font-size:.8rem;font-weight:800}
.qa2-i .faq-a>p{padding:0 22px 0 64px;color:#000;font-size:.93rem}
.qa2-i.is-open .faq-a{padding-bottom:20px}
.mk-svc{overflow-x:clip}.hs-view{overflow-x:clip}
main>section{overflow-x:clip}

/* Why You Need It: notifications show their title; the one in focus opens */
.ph-n{cursor:pointer;transition:background .3s,box-shadow .3s!important}
.ph-n p{display:grid;grid-template-rows:0fr;margin:0;overflow:hidden;transition:grid-template-rows .4s var(--ease),margin .3s}
.ph-n p>span{min-height:0}
.ph-n.open p{grid-template-rows:1fr;margin-top:4px}
.ph-n.open{box-shadow:0 0 0 2px var(--mint),0 14px 26px -18px rgba(16,43,70,.5)}
.ph-n:focus-visible{outline:2.5px solid var(--turq);outline-offset:2px}
.lk-g.on circle:not(.pl){fill:var(--mint)!important}
.lk-g.on text{fill:var(--navy)!important}
@media (prefers-reduced-motion:reduce){.ph-n p{transition:none}}
/* Why You Need It: team photo instead of the journey line (the banner already shows the journey) */
.sn-ph{margin:22px 0 0;border-radius:24px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 60px -42px rgba(16,43,70,.6)}
.sn-ph img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:999px){.sn-ph{aspect-ratio:16/9}}
/* Why You Need It: showcase of the benefit that is open in the phone */
.sx{position:relative;display:grid;margin-top:22px;border-radius:24px;background:linear-gradient(160deg,#F2FBF8 0%,#E6F4F8 100%);border:1px solid var(--line);box-shadow:0 30px 60px -46px rgba(16,43,70,.5);overflow:hidden}
.sx-p{grid-area:1/1;display:flex;flex-direction:column;padding:18px 18px 22px;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.sx-p.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.sx-p svg{display:block;width:100%;height:auto;font-family:inherit}
.sx-p b{display:block;margin-top:6px;text-align:center;font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.sx-flow{animation:sxFlow 1.2s linear infinite}
@keyframes sxFlow{to{stroke-dashoffset:-20}}
.sx-spin{transform-origin:260px 150px;animation:sxSpin 18s linear infinite}
@keyframes sxSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sx-p{transition:none}.sx-flow,.sx-spin{animation:none}}
.sx-dash{animation:sxDash 2s linear infinite}
@keyframes sxDash{to{stroke-dashoffset:-48}}
@media (prefers-reduced-motion:reduce){.sx-dash{animation:none}}

/* ---------- Why You Need It v3: benefit tabs with a showcase panel ---------- */
.mb-tabs{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.mb-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.mb-tabs{grid-template-columns:repeat(6,minmax(0,1fr))}}
.mb-tabs button{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:14px 10px;border-radius:16px;border:1px solid var(--line);background:#fff;font:inherit;text-align:center;cursor:pointer;transition:background .3s,border-color .3s,transform .3s var(--ease),box-shadow .3s}
.mb-tabs button:hover{border-color:var(--turq);transform:translateY(-2px)}
.mb-tabs button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);box-shadow:0 16px 30px -20px rgba(16,43,70,.7)}
.mb-tabs button:focus-visible{outline:2.5px solid var(--turq);outline-offset:2px}
.mb-tabs span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#EAF4F7;color:var(--turq)}
.mb-tabs span svg{width:19px;height:19px}
.mb-tabs button[aria-selected="true"] span{background:var(--mint);color:var(--navy)}
.mb-tabs b{font-size:.84rem;font-weight:800;line-height:1.3;color:var(--navy);min-width:0;overflow-wrap:break-word}
.mb-tabs button[aria-selected="true"] b{color:#fff}
.mb-ps{display:grid;margin-top:16px}
.mb-p{grid-area:1/1;display:grid;gap:0;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -46px rgba(16,43,70,.55);overflow:hidden;visibility:hidden;opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.mb-p.on{visibility:visible;opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
@media (min-width:900px){.mb-p{grid-template-columns:minmax(0,58fr) minmax(0,42fr);align-items:center}}
.mb-art{background:linear-gradient(160deg,#F2FBF8 0%,#E6F4F8 100%);padding:16px}
.mb-art svg{display:block;width:100%;height:auto;font-family:inherit}
.mb-tx{padding:26px 28px}
.mb-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--navy);color:var(--mint)}
.mb-ic svg{width:22px;height:22px}
.mb-tx h3{margin:16px 0 0;font-size:1.35rem;font-weight:800;letter-spacing:-.025em;line-height:1.25;color:var(--navy)}
.mb-tx p{margin:10px 0 0;font-size:1rem;line-height:1.7;color:#000}
@media (prefers-reduced-motion:reduce){.mb-p{transition:none}}
/* desktop: the benefit panel stays on screen and each benefit gets a full stretch of scrolling */
@media (min-width:1000px){
  html.mb-pin .mb-wrap{height:calc(100vh * 3.4)}
  html.mb-pin .mb-wrap .mb{position:sticky;top:calc(var(--nav-h) + 24px)}
}