/* V12.9.10 - SPMB motion timeline. Scoped: safe for the CMS /spmb-online page and /ppdb/. */
.spmb-motion-flow{--flow-green:#071a3d;--flow-dark:#04122c;--flow-gold:#efd18a;position:relative;isolation:isolate;margin:42px auto 68px;padding:58px 0 40px;overflow:hidden;color:#fff9df;background:radial-gradient(ellipse at 8% 2%,rgba(212,169,0,.33),transparent 40%),radial-gradient(ellipse at 100% 100%,rgba(219,175,85,.15),transparent 38%),linear-gradient(135deg,#04122c 0%,#04122c 100%);border-radius:30px;box-shadow:0 28px 70px rgba(4,18,44,.21)}
.spmb-motion-flow:before,.spmb-motion-flow:after{content:"";position:absolute;border:1px solid rgba(242,213,143,.10);width:340px;height:340px;border-radius:50%;pointer-events:none}.spmb-motion-flow:before{top:-240px;right:-65px;box-shadow:0 0 0 75px rgba(242,213,143,.025),0 0 0 150px rgba(242,213,143,.016)}.spmb-motion-flow:after{bottom:-295px;left:-105px;box-shadow:0 0 0 80px rgba(244,196,48,.025)}
.spmb-motion-flow-inner{position:relative;z-index:1;width:min(1150px,calc(100% - 54px));margin:auto}.spmb-motion-flow-top{text-align:center;max-width:810px;margin:0 auto 42px}.spmb-motion-flow-kicker{display:inline-flex;align-items:center;gap:9px;color:var(--flow-gold);font-size:.72rem;font-weight:800;letter-spacing:.15em}.spmb-motion-flow-kicker-dot{height:8px;width:8px;border-radius:50%;background:#e6bd61;box-shadow:0 0 0 5px rgba(230,189,97,.15),0 0 20px rgba(236,195,106,.5)}
.spmb-motion-flow .spmb-motion-flow-top h2{color:#fff!important;font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.16;font-weight:800;margin:14px 0 12px;letter-spacing:-.035em}.spmb-motion-flow .spmb-motion-flow-top p{color:#f4df8a;font-size:.96rem;line-height:1.8;max-width:720px;margin:0 auto}.spmb-motion-flow-meta{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px auto 0;color:#eccd81;font-size:.69rem;font-weight:800;letter-spacing:.14em}.spmb-motion-flow-meta-line{width:24px;height:1px;background:#eccd81}
.spmb-motion-flow-journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;position:relative;isolation:isolate}.spmb-motion-flow-track{position:absolute;top:29px;left:12.5%;right:12.5%;height:3px;border-radius:999px;background:rgba(226,216,173,.21);z-index:0;pointer-events:none}.spmb-motion-flow-track-fill{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#daaf59,#f8e8ae,#f4c430);box-shadow:0 0 14px rgba(245,210,131,.55)}
.spmb-motion-flow-stage{min-width:0;position:relative;z-index:1}.spmb-motion-flow-node{width:60px;height:60px;margin:0 auto 23px;border-radius:21px;display:flex;align-items:center;justify-content:center;color:#04122c;font-size:1.45rem;background:linear-gradient(140deg,#ffeeb7,#c9a456);border:4px solid #071a3d;box-shadow:0 10px 26px rgba(0,0,0,.22),0 0 0 1px rgba(237,207,136,.3);position:relative}.spmb-motion-flow-node-halo{position:absolute;inset:-10px;border-radius:26px;border:1px solid rgba(248,218,146,.24);pointer-events:none}
.spmb-motion-flow-card{position:relative;min-height:195px;height:100%;border:1px solid rgba(245,224,165,.19);border-radius:22px;padding:24px 21px 28px;background:linear-gradient(150deg,rgba(255,255,255,.115),rgba(255,255,255,.035));box-shadow:0 18px 35px rgba(0,0,0,.10);backdrop-filter:blur(8px);overflow:hidden;transition:border-color .28s ease,transform .28s ease,box-shadow .28s ease}.spmb-motion-flow-card:before{content:"";position:absolute;inset:-120% auto auto -65%;height:300%;width:42%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);pointer-events:none}.spmb-motion-flow-stage:hover .spmb-motion-flow-card{transform:translateY(-7px);border-color:rgba(247,211,138,.54);box-shadow:0 28px 48px rgba(0,0,0,.2)}.spmb-motion-flow-stage:hover .spmb-motion-flow-card:before{left:115%;transition:left .7s ease}.spmb-motion-flow-card-top{display:flex;align-items:center;justify-content:space-between;color:#e5c77c;font-size:.7rem;letter-spacing:.15em;font-weight:800;margin-bottom:19px}.spmb-motion-flow-card-top i{font-size:.92rem;color:#f4df8a}.spmb-motion-flow .spmb-motion-flow-card h3{color:#fff!important;font-size:1.08rem;line-height:1.4;margin:0 0 9px;letter-spacing:-.02em;font-weight:800}.spmb-motion-flow .spmb-motion-flow-card p{font-size:.81rem;line-height:1.72;color:#f4df8a;margin:0}.spmb-motion-flow-card-accent{position:absolute;left:21px;bottom:0;width:58px;height:3px;background:linear-gradient(90deg,#f0d48f,#f4c430);border-radius:3px 3px 0 0}
.spmb-motion-flow-footer{border-top:1px solid rgba(255,255,255,.13);margin-top:29px;padding-top:27px;display:flex;align-items:center;justify-content:space-between;gap:20px}.spmb-motion-flow-footer>div{display:flex;align-items:center;gap:11px;font-size:.84rem;color:#fff3bf}.spmb-motion-flow-footer-sparkle{width:35px;height:35px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;color:#eaca7b;background:rgba(238,202,118,.09)}.spmb-motion-flow-button{white-space:nowrap;display:inline-flex;justify-content:center;align-items:center;gap:12px;text-decoration:none;font-size:.8rem;font-weight:800;background:linear-gradient(120deg,#f1d999,#d4ac58);color:#04122c!important;padding:13px 18px;border-radius:12px;transition:transform .2s ease,box-shadow .2s ease}.spmb-motion-flow-button:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(230,185,96,.28)}.spmb-motion-flow-button:focus-visible{outline:3px solid #fff;outline-offset:4px}
/* Content stays readable with JavaScript disabled or reduced motion active. */
@media (prefers-reduced-motion:no-preference){
.spmb-motion-flow.motion-enabled.motion-ready .spmb-motion-flow-stage{opacity:0;transform:translate3d(0,28px,0) scale(.965);transition:opacity 620ms ease,transform 720ms cubic-bezier(.2,.9,.2,1);transition-delay:var(--spmb-flow-reveal-delay,0ms)}
.spmb-motion-flow.motion-enabled.motion-ready .spmb-motion-flow-stage.is-revealed{opacity:1;transform:translate3d(0,0,0) scale(1)}
.spmb-motion-flow.motion-enabled.motion-ready .spmb-motion-flow-track-fill{width:0;transition:width var(--spmb-flow-fill-duration,1700ms) cubic-bezier(.16,1,.3,1)}
.spmb-motion-flow.motion-enabled.motion-ready.is-journey-visible .spmb-motion-flow-track-fill{width:100%}
.spmb-motion-flow.motion-enabled.motion-ready.is-journey-visible .spmb-motion-flow-node-halo{animation:spmbFlowGlow 2.9s ease-in-out infinite;animation-delay:var(--spmb-flow-reveal-delay,0ms)}
.spmb-motion-flow.motion-enabled.motion-ready.is-journey-visible .spmb-motion-flow-kicker-dot{animation:spmbFlowDot 2.3s ease-in-out infinite}
}
@keyframes spmbFlowGlow{0%,100%{opacity:.28;transform:scale(.92)}50%{opacity:1;transform:scale(1.16)}}@keyframes spmbFlowDot{0%,100%{box-shadow:0 0 0 4px rgba(230,189,97,.15)}50%{box-shadow:0 0 0 9px rgba(230,189,97,.05),0 0 19px rgba(230,189,97,.48)}}
@media (max-width:970px){.spmb-motion-flow-journey{grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 18px}.spmb-motion-flow-track{display:none}.spmb-motion-flow-stage .spmb-motion-flow-node{margin:0 0 15px}.spmb-motion-flow-card{min-height:174px}}
@media (max-width:580px){.spmb-motion-flow{border-radius:21px;padding:43px 0 32px;margin:28px auto 42px}.spmb-motion-flow-inner{width:calc(100% - 32px)}.spmb-motion-flow-top{margin-bottom:30px}.spmb-motion-flow-journey{grid-template-columns:1fr;gap:15px}.spmb-motion-flow-stage{display:grid;grid-template-columns:50px minmax(0,1fr);gap:12px}.spmb-motion-flow-node{width:46px;height:46px;border-radius:15px;margin:9px 0 0!important;font-size:1.16rem}.spmb-motion-flow-node-halo{inset:-6px;border-radius:19px}.spmb-motion-flow-card{min-height:0;padding:18px 18px 25px;border-radius:16px}.spmb-motion-flow-card-top{margin-bottom:11px}.spmb-motion-flow-footer{flex-direction:column;align-items:stretch;margin-top:24px;padding-top:22px}.spmb-motion-flow-button{width:100%}}
@media (prefers-reduced-motion:reduce){.spmb-motion-flow *,.spmb-motion-flow *:before,.spmb-motion-flow *:after{animation:none!important;transition:none!important}.spmb-motion-flow .spmb-motion-flow-stage{opacity:1!important;transform:none!important}.spmb-motion-flow .spmb-motion-flow-track-fill{width:100%!important}}

/* V12.9.11 overlap repair: include node + gap in grid item height. */
.spmb-motion-flow{max-width:1400px;width:100%;box-sizing:border-box;clear:both}
.spmb-motion-flow,.spmb-motion-flow *{box-sizing:border-box}
.spmb-motion-flow-inner,.spmb-motion-flow-top,.spmb-motion-flow-journey,.spmb-motion-flow-stage,.spmb-motion-flow-card{min-width:0}
.spmb-motion-flow-stage{display:flex;flex-direction:column;align-items:stretch;height:auto}
.spmb-motion-flow-card{height:auto;flex:1 1 auto;overflow:hidden;overflow-wrap:anywhere}
.spmb-motion-flow-node{flex:0 0 60px}
.spmb-motion-flow-top h2,.spmb-motion-flow-card h3,.spmb-motion-flow-card p{overflow-wrap:anywhere}
.spmb-motion-flow-footer>div{min-width:0;flex:1 1 auto}
@media(max-width:970px){
  .spmb-motion-flow-stage .spmb-motion-flow-node{margin:0 0 15px}
}
@media(max-width:580px){
  .spmb-motion-flow-stage{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start}
  .spmb-motion-flow-stage .spmb-motion-flow-node{width:46px;height:46px;min-height:46px;min-width:46px;margin:8px 0 0!important}
  .spmb-motion-flow-card{min-height:0;width:100%;height:auto;overflow-wrap:anywhere}
  .spmb-motion-flow-footer>div{flex:1 1 auto}
  .spmb-motion-flow-button{white-space:normal;text-align:center;min-width:0}
}