/* fallow-ignore-file unused-file */
/* Code-built animations + card hover (docs/ANIM.md). Pure BluSignal blue (#2f7bff / #62b6ff), uses site.css variables.
   The CSS DEFAULT is the finished scene (no JS, or reduced motion, shows it). assets/anim.js adds .anim-dyn, which sets the
   animated START state, then adds .ph-q/.ph-t/.ph-o + .is-lit (street) or .is-on/.is-sent (route, hand-off) as it plays. */

/* ---- shared ---- */
.anim{--a-ln:#62b6ff;--a-core:#2f7bff;--a-dim:rgba(98,182,255,.24);--a-faint:rgba(98,182,255,.09);--a-panel:#0d1628;--a-stage:radial-gradient(70% 90% at 50% 40%,rgba(47,123,255,.13),rgba(10,17,32,.5) 70%),#080e1b;--a-ink:var(--ink);--a-mute:var(--muted);--a-edge:rgba(98,182,255,.2);margin-top:46px;position:relative}
.tone-light .anim{--a-ln:#2f7bff;--a-core:#2f7bff;--a-dim:rgba(47,123,255,.3);--a-faint:rgba(47,123,255,.1);--a-panel:#fff;--a-stage:radial-gradient(70% 90% at 50% 40%,rgba(47,123,255,.1),rgba(255,255,255,0) 70%),#fff;--a-ink:var(--ink-d);--a-mute:var(--muted-d);--a-edge:rgba(10,18,34,.1)}
.anim-stage{border:1px solid var(--a-edge);border-radius:var(--radius);background:var(--a-stage);overflow:hidden;box-shadow:0 30px 70px -44px var(--glow)}
.anim svg{display:block;max-width:100%}
.anim-stage>svg{width:100%;height:auto}
.anim-reset,.anim-reset *{transition:none!important;animation:none!important}
.anim-replay{margin:22px auto 0;display:block;background:transparent;border:1px solid var(--a-edge);color:var(--a-ink);border-radius:999px;padding:10px 20px;font:600 14px/1 var(--font);cursor:pointer;transition:border-color .2s,background .2s}
.anim-replay[hidden]{display:none}
.anim-replay:hover{border-color:var(--a-ln);background:var(--a-faint)}
.svg-lbl{font:600 18px/1 var(--font);fill:var(--a-mute);transition:fill .5s ease;paint-order:stroke;stroke:#080e1b;stroke-width:6px;stroke-linejoin:round}
.tone-light .svg-lbl{stroke:#fff}

.r1{--r:1}.r2{--r:2}.r0{--r:0}
.i0{--i:0}.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}.i5{--i:5}.i6{--i:6}.i7{--i:7}

/* captions: real HTML, the current state lights */
.anim-states{list-style:none;counter-reset:st;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.anim-states li{counter-increment:st;position:relative;padding:18px 18px 18px 58px;border:1px solid var(--a-edge);border-radius:14px;background:var(--a-faint);transition:opacity .6s ease,border-color .6s ease,background .6s ease}
.anim-states li::before{content:counter(st);position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--font);color:#fff;background:var(--a-core);box-shadow:0 0 18px var(--glow)}
.anim-states b{font-weight:650;font-size:17px;line-height:1.45;color:var(--a-ink)}

/* ---- SignalHops = the STREET (anim_street.py): a looping side-scroll. The CSS default is the cycle's first frame, QUIET
   (device dim, no links, no cue): no JS and reduced motion show that. anim.js (Street) moves the layers and sets the phase
   class on the root: ph-q (quiet) -> ph-t ('Theft reported', is-lit) -> ph-o (pickups) -> is-found -> ph-q (fade back). ---- */
.ss-stage{position:relative;aspect-ratio:16/9;background:#060b16;border-color:rgba(98,182,255,.3);box-shadow:0 0 0 1px rgba(47,123,255,.08),0 50px 120px -50px rgba(47,123,255,.6)}
.anim .ss-stage>svg{width:100%;height:100%}
.ss-sky-b{fill:#0b1730;opacity:.9}
.ss-walk{fill:#0f1b33}
.ss-road{fill:#070c18}
.ss-dash rect{fill:rgba(143,203,255,.16)}
.ss-bldg{fill:#0e1a31;stroke:rgba(98,182,255,.14);stroke-width:1}
.ss-tall{fill:#101d37}
.ss-win{fill:rgba(98,182,255,.07)}
.ss-win.on{fill:rgba(169,214,255,.32)}
.ss-trunk,.ss-pole,.ss-limb{fill:none;stroke:#1b2c4b;stroke-width:5;stroke-linecap:round}
.ss-limb{stroke:#22385e;stroke-width:4}
.ss-pole{stroke:#22385e;stroke-width:4}
.ss-leaf{fill:#0c1a2e}
.ss-lamphead{fill:#2a4470}
.ss-lampglow{fill:#cfe6ff;opacity:.16;filter:blur(6px)}
.ss-fig{fill:#22385e}
.ss-phone{fill:#2a4470;transition:fill .5s ease}
.ss-sign{fill:rgba(98,182,255,.22)}
.ss-awning{fill:#183056}
.ss-glass{fill:rgba(98,182,255,.1);stroke:rgba(98,182,255,.2)}
.ss-door{fill:#0a1426;stroke:rgba(98,182,255,.2)}
.ss-body{fill:#12213d;stroke:rgba(143,203,255,.45);stroke-width:1.5}
.ss-cabin{fill:#081120;stroke:rgba(143,203,255,.25)}
.ss-trim{fill:none;stroke:rgba(143,203,255,.18);stroke-width:1.5}
.ss-head{fill:#e6f2ff}
.ss-tail{fill:#ff4d6a;opacity:.75}
.ss-tyre{fill:#05080f;stroke:#1d2f50;stroke-width:3}
.ss-hub circle{fill:#1d2f50}
.ss-hub path{fill:none;stroke:#3b5a8c;stroke-width:2}
.ss-oncoming .ss-body{fill:#0f1c34;stroke:rgba(143,203,255,.3)}
/* the device marker: quiet = dim grey; lit = the card glowing, rings going out */
.ss-dev-bg{fill:#0b1426;stroke:var(--a-dim);stroke-width:2;transition:stroke .8s ease,filter .8s ease}
.ss-dev-img{opacity:.4;filter:grayscale(1) brightness(.55);transition:opacity .8s ease,filter .8s ease}
.ss-halo{fill:#2f7bff;opacity:0;filter:blur(10px);transition:opacity .8s ease}
.ss-tether{fill:none;stroke:var(--a-dim);stroke-width:1.5;stroke-dasharray:2 4}
.ss-ring{fill:none;stroke:#62b6ff;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.is-lit .ss-dev-bg{stroke:#62b6ff;filter:drop-shadow(0 0 10px rgba(47,123,255,.9))}
.is-lit .ss-dev-img{opacity:1;filter:none}
.is-lit .ss-halo{opacity:.45}
.is-lit .ss-ring{animation:ss-ring 3.3s ease-out calc(var(--r)*1.1s) infinite}
@keyframes ss-ring{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(4.6)}}
/* pickups: opacity / geometry come from anim.js per frame (attributes); here only the look */
.ss-link{fill:none;stroke:#8fcbff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1 8;filter:drop-shadow(0 0 4px #2f7bff)}
.ss-trail{fill:none;stroke:#62b6ff;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1 7}
.ss-echo{fill:none;stroke:#8fcbff;stroke-width:2}
.ss-dot{fill:#cfe6ff;filter:drop-shadow(0 0 6px #2f7bff)}
.ss-lbl{font:650 18px/1 var(--font);fill:#fff;paint-order:stroke;stroke:#060b16;stroke-width:6px;stroke-linejoin:round}
/* the cue pills over the device */
.ss-cue,.ss-found{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.ss-pill-bg{fill:rgba(8,14,27,.88);stroke:rgba(98,182,255,.55);stroke-width:1.2}
.ss-pill-t{font:650 15px/1 var(--font);fill:#fff}
.ss-alert-dot{fill:#ff5d73;filter:drop-shadow(0 0 5px #ff5d73)}
.ss-check{fill:none;stroke:#8fcbff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ph-t .ss-cue,.is-found .ss-found{opacity:1;transform:none}
/* the drone FILM (StreetFilm, 10-29): the poster still (frame 0), the clip fades in over it once it plays; our only layer is
   the 'Theft reported' pill, hidden by default (no JS / reduced motion / the quiet low shot) and shown by anim.js (is-pill) */
.sf-stage{position:relative;aspect-ratio:16/9;background:#05080f;border-color:rgba(98,182,255,.3);box-shadow:0 0 0 1px rgba(47,123,255,.08),0 50px 120px -50px rgba(47,123,255,.6)}
.sf-poster,.sf-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sf-video{opacity:0;transition:opacity .6s ease}
.is-playing .sf-video{opacity:1}
.sf-pill{position:absolute;left:50%;top:7%;display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 13px;border-radius:999px;background:rgba(8,14,27,.82);border:1px solid rgba(98,182,255,.55);box-shadow:0 10px 30px -10px rgba(0,0,0,.7),0 0 24px -6px rgba(47,123,255,.6);color:#fff;font:650 15px/1 var(--font);white-space:nowrap;opacity:0;transform:translate(-50%,-6px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.sf-dot{width:9px;height:9px;border-radius:50%;background:#ff5d73;box-shadow:0 0 8px #ff5d73}
.is-pill .sf-pill{opacity:1;transform:translate(-50%,0)}
/* captions: the current phase lights (no JS: all three read as text) */
/* the CSS default is the quiet frame (Knox #29446: no caption flash on first paint, no JS, reduced motion): only st1 lights */
.anim-street .anim-states li{opacity:.38;background:transparent}
.anim-street:not(.ph-t):not(.ph-o) .anim-states .st1,.ph-t .anim-states .st2,.ph-o .anim-states .st3{opacity:1;border-color:var(--a-ln);background:var(--a-faint)}
@media (max-width:600px){
  .ss-stage{aspect-ratio:1/1}
  .sf-stage{aspect-ratio:4/3}
  .sf-pill{font-size:14px;padding:8px 14px 8px 11px}
  .ss-lbl{font-size:22px}
  .ss-pill-t{font-size:16px}
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- RouteDraw: the map panel is always dark (both tones) ---- */
.rt-wrap{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:32px;align-items:center}
.rt-map{background:#070d1a;border-color:rgba(98,182,255,.22)}
.rt-bg{fill:#070d1a}
.rt-park{fill:rgba(47,123,255,.08)}
.rt-block{fill:rgba(98,182,255,.045)}
.rt-street{fill:none;stroke:rgba(98,182,255,.11);stroke-width:2}
.rt-alt{stroke:rgba(98,182,255,.07);stroke-width:5}
.rt-major{fill:none;stroke:rgba(98,182,255,.2);stroke-width:6}
.rt-glow,.rt-route{fill:none;stroke-linejoin:round;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:0}
.rt-glow{stroke:#2f7bff;stroke-width:16;opacity:.28}
.rt-route{stroke:#62b6ff;stroke-width:4.5}
.rt-pin{fill:#0a1120;stroke:#62b6ff;stroke-width:2.2;transition:stroke .4s,fill .4s}
.rt-num{font:700 19px/1 var(--font);fill:#eef2f8}
.rt-mark{transition:opacity .5s ease}
.rt-last .rt-pin{fill:#2f7bff;stroke:#a9d6ff}
.rt-dot-halo{fill:#62b6ff;opacity:.28}
.rt-dot-core{fill:#eef6ff;stroke:#2f7bff;stroke-width:3;filter:drop-shadow(0 0 7px #62b6ff)}
.rt-steps{list-style:none;display:grid;gap:12px;counter-reset:rt}
.rt-steps li{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--a-edge);border-radius:14px;background:var(--a-faint);color:var(--a-ink);font-weight:600;font-size:16px;line-height:1.4;transition:opacity .5s ease,border-color .5s ease,transform .5s ease}
.rt-steps b{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--font);color:#fff;background:var(--a-core);box-shadow:0 0 16px var(--glow)}
.anim-dyn .rt-glow,.anim-dyn .rt-route{stroke-dashoffset:1.01}
.anim-dyn .rt-mark{opacity:.3}
.anim-dyn .rt-mark.is-on{opacity:1}
.anim-dyn .rt-dot{opacity:0}
.anim-dyn.is-go .rt-dot{opacity:1}
.anim-dyn .rt-steps li{opacity:.38;background:transparent}
.anim-dyn .rt-steps li.is-on{opacity:1;background:var(--a-faint);border-color:var(--a-ln);transform:translateX(4px)}

/* ---- responsive ---- */
@media (max-width:900px){
  .rt-wrap{grid-template-columns:minmax(0,1fr)}
  .anim-states{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .svg-lbl{display:none}
  .anim-states li{padding:14px 14px 14px 52px}
  .anim{margin-top:32px}
}

/* ---- reduced motion: finished scene, no moving parts ---- */
@media (prefers-reduced-motion:reduce){
  .anim *{animation:none!important;transition:none!important}
  .anim-replay{display:none}
}

/* ---- card hover for every site: a blue glow follows the cursor, the card lifts and tilts a touch. anim.js sets --mx/--my/--rx/--ry
   via the CSSOM (CSP-safe) on fine pointers only; touch, coarse pointers and reduced motion keep the plain site.css card. ---- */
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(98,182,255,.2),rgba(47,123,255,.07) 45%,transparent 70%)}
.card:hover::after{opacity:1}
.tone-light .card::after{background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(47,123,255,.15),rgba(47,123,255,.05) 45%,transparent 70%)}
.card svg{transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .4s ease}
.card:hover svg{transform:translateY(-2px) scale(1.12)}
@media (hover:hover) and (pointer:fine){
  .card.has-tilt:hover{transform:perspective(900px) translateY(-5px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .12s ease-out,box-shadow .35s ease,border-color .35s ease;border-color:rgba(98,182,255,.55)}
  .tone-light .card.has-tilt:hover{border-color:rgba(47,123,255,.5)}
}
@media (prefers-reduced-motion:reduce){.card::after{display:none}.card:hover svg{transform:none}}

/* ---- SignalHops (street) inset (home, am.#4 B7): the heading + the stage caption sit INSIDE the scene and change with it ---- */
.hops-inset .anim{margin-top:0}
.hop-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:30px 18px 20px}
.hop-copy h2{font-size:clamp(28px,3.3vw,46px);margin:.3em 0 .35em;max-width:15ch}
.hop-copy .lead{font-size:16px;margin-top:0;color:var(--muted)}
.hop-cap{grid-template-columns:minmax(0,1fr);margin-top:20px}
.hop-cap li{padding:16px 18px}
.hop-cap li::before{display:none}
.hop-in .hop-cap li{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.hop-in:not(.ph-t):not(.ph-o) .hop-cap .st1,.hop-in.ph-t .hop-cap .st2,.hop-in.ph-o .hop-cap .st3{opacity:1;transform:none;border-color:var(--a-ln);background:var(--a-faint)}
.hop-scene{min-width:0}
@media(max-width:959px){.hop-copy{display:contents}.hop-panel .hop-cap{order:2}}  /* phones: heading, the street, then its caption */
@media(min-width:960px){.hop-panel{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center;gap:24px;padding:52px 30px 52px 52px}}

/* ======================================================================================================================
   NUMBERED SEQUENCES (docs/ANIM.md): each has its OWN treatment. The CSS default is the finished scene (no JS / reduced motion);
   anim.js adds .anim-dyn for the animated start state. The deck, cruiser and map panels are dark in every tone.
   ====================================================================================================================== */

/* ---- DeviceDemo (INSTALL): a pinned, scroll-driven demo. The CSS DEFAULT below is the FINISHED state of all three steps side by side
   (no JS / reduced motion). anim.js adds .anim-dyn: one step at a time, every scene is a set of PAUSED keyframe animations whose
   position is set by one number, --k (0..1, set on each panel through the CSSOM), so scroll (or PLAY) scrubs it both ways. ---- */
.dd-tabs{display:none}
.dd-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dd-panel{display:flex;flex-direction:column;border:1px solid var(--a-edge);border-radius:var(--radius);overflow:hidden;background:var(--a-panel)}
.dd-scene{background:radial-gradient(80% 90% at 50% 40%,rgba(47,123,255,.2),rgba(8,14,27,.2) 70%),#080e1b;padding:14px}
.dd-svg{display:block;width:100%;height:auto;max-height:280px;margin:0 auto}
.dd-copy{position:relative;padding:20px 20px 24px 66px}
.dd-num{position:absolute;left:20px;top:20px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 16px/1 var(--font);color:#fff;background:var(--a-core);box-shadow:0 0 20px var(--glow)}
.dd-copy h3{font-size:20px;color:var(--a-ink)}
.dd-copy p{font-size:15px;line-height:1.55;color:var(--a-mute);margin-top:6px}
.dd-phone{fill:#0d1424;stroke:#62b6ff;stroke-width:2.5}
.dd-screen{fill:#060b16;stroke:rgba(98,182,255,.25)}
.dd-dev{fill:#0f1a30;stroke:#62b6ff;stroke-width:2;filter:drop-shadow(0 0 10px rgba(47,123,255,.55))}
.dd-qr{fill:#cfe6ff}
.dd-ln{fill:rgba(169,214,255,.45)}
.dd-dot{fill:#2f7bff}
.dd-beam{fill:rgba(98,182,255,.12);stroke:rgba(98,182,255,.4);stroke-dasharray:3 5}
.dd-scan{fill:#8fcbff;opacity:0;filter:drop-shadow(0 0 6px #62b6ff) drop-shadow(0 0 12px #2f7bff)}
.dd-vf{fill:none;stroke:#8fcbff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.dd-ok{transform-box:fill-box;transform-origin:center}
.dd-ok circle{fill:#2f7bff;filter:drop-shadow(0 0 8px #2f7bff)}
.dd-ok path{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.dd-plate{fill:#0b1426;stroke:rgba(98,182,255,.6);stroke-width:2;filter:drop-shadow(0 0 6px rgba(47,123,255,.35))}
.dd-bars{fill:#bfe0ff;filter:drop-shadow(0 0 4px rgba(98,182,255,.7))}
.dd-cover{fill:#0b1426;transform:translateX(232px)}
.dd-vs{opacity:0;transform:translateX(232px)}
.dd-vsh{fill:url(#dd-vsh)}
.dd-vscan{fill:#bfe3ff;filter:drop-shadow(0 0 4px #62b6ff)}
.dd-vin{font:700 15px/1 var(--font);letter-spacing:.3em;fill:#8fcbff}
.dd-ico{fill:none;stroke:#a9d6ff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dd-link{fill:none;stroke:#62b6ff;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:0;filter:drop-shadow(0 0 5px #2f7bff)}
/* the coupe: dim outline, then a bright stroke draws round it and the glass, the shoulder line and the wheels light, a sweep crosses */
.dd-cdim{fill:none;stroke:rgba(98,182,255,.3);stroke-width:1.4;stroke-linejoin:round}
.dd-cf{fill:url(#dd-cfg)}
.dd-cg{fill:rgba(95,180,255,.38);stroke:none}
.dd-cb{fill:none;stroke:#a6dbff;stroke-width:2;stroke-linejoin:round;stroke-linecap:butt;stroke-dasharray:1 2;stroke-dashoffset:0;filter:drop-shadow(0 0 3px #2f7bff) drop-shadow(0 0 9px rgba(47,123,255,.75))}
.dd-cd{fill:none;stroke:#8fcbff;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.dd-cw{fill:none;stroke:#8fcbff;stroke-width:1.6}
.dd-hub{stroke-width:1.1}
.dd-cgl{fill:url(#dd-cgg)}
.dd-chl{fill:url(#dd-cgg)}
.dd-csw{fill:url(#dd-swg);opacity:0}
.dd-void{fill:url(#dd-void);stroke:rgba(98,182,255,.9);stroke-width:2;stroke-dasharray:4 6;filter:drop-shadow(0 0 7px rgba(47,123,255,.5))}
.dd-eye{stroke:#a9d6ff}
.dd-trail{fill:none;stroke:rgba(98,182,255,.3);stroke-width:2;stroke-linecap:round;stroke-dasharray:4 8}
.dd-slide{transform-box:fill-box;transform-origin:center;opacity:.4}

/* ---- JS: one step at a time; tabs; the pinned track ---- */
.anim-dyn .dd-tabs{display:flex;gap:10px;align-items:stretch;margin-bottom:16px}
.dd-tab{flex:1 1 0;min-width:0;position:relative;display:flex;align-items:center;gap:10px;text-align:left;padding:14px 14px 18px;border:1px solid var(--a-edge);border-radius:14px;background:transparent;color:var(--a-mute);font:600 15px/1.3 var(--font);cursor:pointer;overflow:hidden;transition:border-color .3s,background .3s,color .3s}
.dd-tab:hover{border-color:var(--a-ln)}
.dd-tab .dd-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--font);border:1.5px solid var(--a-dim);color:var(--a-ln)}
.dd-tab[aria-selected=true]{color:var(--a-ink);border-color:var(--a-ln);background:var(--a-faint)}
.dd-tab[aria-selected=true] .dd-n,.dd-tab.is-done .dd-n{background:var(--a-core);border-color:var(--a-core);color:#fff;box-shadow:0 0 18px var(--glow)}
.dd-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--a-dim)}
.dd-bar b{display:block;height:100%;width:calc(var(--kp,0) * 100%);background:linear-gradient(90deg,var(--a-core),var(--a-ln));box-shadow:0 0 10px var(--glow)}
.dd-toggle{flex:none;align-self:center;min-width:84px;border:1px solid var(--a-edge);background:transparent;color:var(--a-ink);border-radius:999px;padding:9px 16px;font:600 13px/1 var(--font);cursor:pointer}
.dd-toggle:hover{border-color:var(--a-ln);background:var(--a-faint)}
.dd-toggle[hidden]{display:none}
.anim-dyn .dd-stage{display:grid;grid-template-columns:minmax(0,1fr)}
.anim-dyn .dd-panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;opacity:0;visibility:hidden;transform:translateY(10px) scale(.985);filter:blur(4px);transition:opacity .4s ease,transform .55s cubic-bezier(.2,.7,.2,1),filter .4s ease,visibility 0s .45s}
.anim-dyn .dd-panel.is-on{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:0s}
.anim-dyn .dd-copy{padding:28px 32px 28px 76px}
.anim-dyn .dd-num{left:28px;top:28px}
.anim-dyn .dd-copy h3{font-size:24px}
.anim-dyn .dd-copy p{font-size:17px}
/* pinned: the section is the track (height set by anim.js), the .wrap sticks for its length */
.anim-sec.dd-pin{padding:0}
.dd-pin>.wrap{position:sticky;top:0;height:100vh;height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding-top:84px;padding-bottom:30px}
.dd-pin .anim{margin-top:24px}
.dd-pin h2{font-size:clamp(28px,3.2vw,44px);margin:.25em 0 .3em}
.dd-pin .lead{margin-top:4px}

/* scrub: every animated part of a scene is paused and set to --k (animation-delay = -k of a 1 s run) */
.anim-dyn .dd-svg *{animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both;animation-play-state:paused;animation-delay:calc(var(--k,1) * -1s)}
/* 1  scan the device */
.anim-dyn .dd-beam{animation-name:dd-s-beam}
.anim-dyn .dd-vf{animation-name:dd-s-vf}
.anim-dyn .dd-scan{animation-name:dd-s-scan}
.anim-dyn .dd-qr{animation-name:dd-s-qr}
.anim-dyn .dd-ok{animation-name:dd-s-ok}
.anim-dyn .dd-panel[data-i="0"] .dd-dev{animation-name:dd-s-dev}
/* 2  scan the VIN, pair, the coupe lights */
.anim-dyn .dd-cover{animation-name:dd-v-read;animation-timing-function:ease-in-out}
.anim-dyn .dd-vs{animation-name:dd-v-read,dd-v-vs;animation-timing-function:ease-in-out,linear}
.anim-dyn .dd-bars{animation-name:dd-v-bars}
.anim-dyn .dd-plate{animation-name:dd-v-plate}
.anim-dyn .dd-vin{animation-name:dd-v-vin}
.anim-dyn .dd-link{animation-name:dd-v-link}
.anim-dyn .dd-ok2{animation-name:dd-v-pop}
.anim-dyn .dd-cb{animation-name:dd-c-draw}
.anim-dyn .dd-cf,.anim-dyn .dd-cg{animation-name:dd-c-fill}
.anim-dyn .dd-cd,.anim-dyn .dd-cw{animation-name:dd-c-det}
.anim-dyn .dd-csw{animation-name:dd-c-sw}
.anim-dyn .dd-cgl,.anim-dyn .dd-chl{animation-name:dd-c-gl}
/* 3  place it discreetly */
.anim-dyn .dd-slide{animation-name:dd-h-slide}
.anim-dyn .dd-void{animation-name:dd-h-void}
.anim-dyn .dd-eye{animation-name:dd-h-eye}
.anim-dyn .dd-trail{animation-name:dd-h-trail}
@keyframes dd-s-beam{0%{opacity:0}12%,100%{opacity:1}}
@keyframes dd-s-vf{0%{opacity:0;transform:scale(1.3)}14%,100%{opacity:1;transform:none}}
@keyframes dd-s-scan{0%,12%{opacity:0;transform:translateY(0)}18%{opacity:1}48%{transform:translateY(50px)}70%{opacity:1;transform:translateY(0)}78%,100%{opacity:0;transform:translateY(0)}}
@keyframes dd-s-qr{0%,12%{opacity:.3}50%,100%{opacity:1}}
@keyframes dd-s-ok{0%,72%{opacity:0;transform:scale(.5)}84%{opacity:1;transform:scale(1.14)}92%,100%{opacity:1;transform:scale(1)}}
@keyframes dd-s-dev{0%,70%{filter:drop-shadow(0 0 3px rgba(47,123,255,.25))}88%,100%{filter:drop-shadow(0 0 10px rgba(47,123,255,.55))}}
@keyframes dd-v-read{0%,4%{transform:translateX(0)}46%,100%{transform:translateX(232px)}}
@keyframes dd-v-vs{0%,3%{opacity:0}6%,44%{opacity:1}48%,100%{opacity:0}}
@keyframes dd-v-bars{0%,40%{filter:drop-shadow(0 0 0 rgba(98,182,255,0))}56%,100%{filter:drop-shadow(0 0 4px rgba(98,182,255,.7))}}
@keyframes dd-v-plate{0%,38%{stroke:rgba(98,182,255,.38);filter:drop-shadow(0 0 0 rgba(47,123,255,0))}52%{stroke:#a6dbff;filter:drop-shadow(0 0 10px rgba(47,123,255,.8))}100%{stroke:rgba(98,182,255,.6);filter:drop-shadow(0 0 6px rgba(47,123,255,.35))}}
@keyframes dd-v-vin{0%,40%{fill:#4a6f9c}56%,100%{fill:#8fcbff}}
@keyframes dd-v-link{0%,48%{stroke-dashoffset:1.2}62%,100%{stroke-dashoffset:0}}
@keyframes dd-v-pop{0%,62%{opacity:0;transform:scale(.4)}71%{opacity:1;transform:scale(1.15)}78%,100%{opacity:1;transform:scale(1)}}
@keyframes dd-c-draw{0%,57%{opacity:0;stroke-dashoffset:1.2}58%{opacity:1;stroke-dashoffset:1.2}90%,100%{opacity:1;stroke-dashoffset:0}}
@keyframes dd-c-fill{0%,78%{opacity:0}96%,100%{opacity:1}}
@keyframes dd-c-det{0%,60%{stroke:rgba(98,182,255,.28)}90%,100%{stroke:#8fcbff}}
@keyframes dd-c-sw{0%,76%{opacity:0;transform:translateX(0)}78%{opacity:1}96%{opacity:1;transform:translateX(196px)}98%,100%{opacity:0;transform:translateX(196px)}}
@keyframes dd-c-gl{0%,62%{opacity:0}95%,100%{opacity:1}}
@keyframes dd-h-slide{0%{opacity:0;transform:translateX(-14px)}8%,20%{opacity:1;transform:none}70%,100%{opacity:0;transform:translateX(160px) scale(.5)}}
@keyframes dd-h-void{0%,25%{stroke-opacity:.3;filter:drop-shadow(0 0 0 rgba(47,123,255,0))}62%,100%{stroke-opacity:.9;filter:drop-shadow(0 0 7px rgba(47,123,255,.5))}}
@keyframes dd-h-eye{0%,60%{opacity:.2}85%,100%{opacity:1}}
@keyframes dd-h-trail{0%,14%{opacity:0}30%,60%{opacity:1}78%,100%{opacity:.4}}
@media (max-width:760px){
  .dd-stage{grid-template-columns:minmax(0,1fr)}
  .anim-dyn .dd-panel{grid-template-columns:minmax(0,1fr)}
  .anim-dyn .dd-copy{padding:14px 18px 18px 62px}
  .anim-dyn .dd-num{left:18px;top:14px}
  .anim-dyn .dd-copy h3{font-size:20px}
  .anim-dyn .dd-copy p{font-size:15px}
  .dd-copy{padding:20px 20px 24px 66px}
  .dd-tab{padding:12px 10px 16px;gap:8px;font-size:13px}
  .dd-tab .dd-n{width:24px;height:24px;font-size:12px}
  .anim-dyn .dd-tabs{flex-wrap:wrap}
  .dd-toggle{order:5;flex:1 1 100%;padding:8px 16px}
  .dd-pin>.wrap{padding-top:78px;padding-bottom:72px}
  .dd-pin .anim{margin-top:14px}
  .dd-pin .lead{display:none}
  .dd-pin h2{font-size:clamp(24px,6.4vw,32px)}
  .anim-dyn .dd-tabs{margin-bottom:12px}
  .dd-pin .dd-svg{max-height:210px}
}

/* ---- CardSteps (PROCESS): the dealt deck. Cards are dark and glowing in every tone ---- */
.cxm2_5{--c:-2.5}.cxm2{--c:-2}.cxm1_5{--c:-1.5}.cxm1{--c:-1}.cxm0_5{--c:-.5}.cx0{--c:0}.cx0_5{--c:.5}.cx1{--c:1}.cx1_5{--c:1.5}.cx2{--c:2}.cx2_5{--c:2.5}
.dk-cards{list-style:none;position:relative;height:420px;--dx:196px;--w:208px}
.dk-slot{position:absolute;left:50%;top:40px;width:var(--w);margin-left:calc(var(--w)/-2);z-index:calc(var(--i) + 1);transform-origin:50% 130%;
  transform:translate(calc(var(--c)*var(--dx)),calc(var(--c)*var(--c)*9px)) rotate(calc(var(--c)*5deg));
  transition:transform .75s cubic-bezier(.2,.9,.25,1.05) calc(var(--i)*.09s),opacity .4s ease}
.dk-card{position:relative;height:318px;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;color:#eef2f8;cursor:default;
  background:linear-gradient(165deg,#13223f,#0a1221 62%);border:1px solid rgba(98,182,255,.38);
  box-shadow:0 0 0 1px rgba(47,123,255,.12),0 26px 46px -16px rgba(0,0,0,.85),0 0 42px -10px var(--glow);transition:box-shadow .4s,border-color .4s,filter .4s}
.dk-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#8fcbff,transparent);opacity:.8;z-index:2}
.dk-art{position:relative;flex:1 1 auto;min-height:0;display:grid;place-items:center;overflow:hidden}
.dk-big{font:800 148px/1 var(--display,var(--font));color:transparent;-webkit-text-stroke:2px rgba(98,182,255,.6);filter:drop-shadow(0 0 14px rgba(47,123,255,.65))}
.dk-art svg{position:absolute;right:14px;top:14px;width:30px;height:30px;stroke:#8fcbff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dk-photo .media,.dk-photo .standin{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
/* card 2 (garage walk): she crosses x 52-80% of the frame, so the crop is centred on her (76%: she reaches 84% of the frame; still and clip; !important beats the inline framing loop.js sets) */
.dk-slot.i1 .dk-photo .media,.dk-slot.i1 .dk-photo .lp-v{object-position:76% 50%!important}
/* card 3: the Home phone (home.css .app) sized to the card, over the dimmed garage still; the label type is set larger since the phone is small here */
.dk-app .vx-app{position:absolute;inset:0}
/* card 3 is CLEAN (10-29): the phone on a plain dark-blue card, no photo behind it */
.dk-app{background:radial-gradient(80% 70% at 50% 42%,rgba(47,123,255,.32),rgba(47,123,255,.06) 60%,transparent 80%),linear-gradient(180deg,#0c1a3a,#060c1c)}
.dk-app .app-phone{width:84%;height:94%;aspect-ratio:auto;border-radius:14% / 8%}
.dk-app .app-lbl{font-size:6.4cqw}
.dk-app .app-sw{margin:0 5cqw 6cqw}
.dk-foot{flex:none;display:flex;gap:10px;align-items:center;padding:14px 16px 18px;border-top:1px solid rgba(98,182,255,.2);background:rgba(5,9,18,.6);position:relative;z-index:1}
.dk-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--display,var(--font));color:#fff;background:var(--signal);box-shadow:0 0 16px var(--glow)}
.dk-title{font:650 15px/1.3 var(--font);color:#eef2f8}
.dk-title .proposed{color:inherit}
.dk-card:focus-visible{outline:2px solid #8fcbff;outline-offset:3px}
.dk-slot.is-on{z-index:30;transform:translate(calc(var(--c)*var(--dx)),-30px) rotate(0deg) scale(1.07)}
.dk-slot.is-on .dk-card{border-color:#9bd0ff;box-shadow:0 0 0 1px rgba(155,208,255,.35),0 34px 60px -18px rgba(0,0,0,.9),0 0 64px -6px rgba(47,123,255,.75)}
.anim-dyn .dk-card{cursor:pointer}
.anim-dyn .dk-slot:not(.is-on) .dk-card{filter:brightness(.78)}
.anim-dyn:not(.is-dealt) .dk-slot{transform:translate(calc(var(--c)*3px),calc(var(--i)*-2px)) rotate(calc(var(--c)*1.2deg));transition:none}
.dk-nav{display:none}
.dk-caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:22px}
.dk-cap{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;border-radius:18px;border:1px solid rgba(98,182,255,.32);background:linear-gradient(160deg,#10203b,#0a1221);box-shadow:0 0 50px -24px var(--glow)}
.dk-capn{flex:none;font:800 46px/1 var(--display,var(--font));color:transparent;-webkit-text-stroke:1.5px rgba(98,182,255,.7)}
.dk-cap h3{color:#eef2f8;font-size:20px}
.dk-cap p{color:#a9b6cc;margin-top:6px;font-size:16px;line-height:1.55}
.anim-dyn .dk-caps{display:block;margin-top:14px}
.anim-dyn .dk-cap:not(.is-on){display:none}
.anim-dyn .dk-cap.is-on{animation:dk-cap .5s ease both}
@keyframes dk-cap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:1100px){.dk-cards{--dx:150px;--w:190px}}
@media (max-width:900px){.dk-cards{--dx:118px;--w:170px;height:400px}.dk-card{height:298px}.dk-big{font-size:120px}}
@media (min-width:701px) and (max-width:900px){.dk-cards{--dx:126px;--w:150px;transform:scale(.92);transform-origin:50% 0;margin-bottom:-32px}.dk-foot{padding:12px 9px 16px;gap:7px}.dk-title{font-size:13.5px}.dk-n{width:24px;height:24px;font-size:12px}}
@media (max-width:700px){
  .dk-cards{height:auto;display:grid;gap:14px}
  .dk-slot{position:static;width:auto;margin:0;transform:none!important;transition:none}
  .dk-card{height:auto;min-height:250px}
  .dk-art{min-height:170px}
  .dk-photo{aspect-ratio:16/10}
  .dk-slot.i1 .dk-photo .media,.dk-slot.i1 .dk-photo .lp-v{object-position:62% 50%!important}
  .dk-app .app-phone{width:68%;height:92%}
  .dk-app .app-lbl{font-size:6.6cqw}
  .dk-caps{grid-template-columns:minmax(0,1fr)}
  .anim-dyn .dk-stage{touch-action:pan-y}
  .anim-dyn .dk-cards{display:block;position:relative;height:390px}
  .anim-dyn .dk-slot{position:absolute;left:50%;top:44px;width:min(78vw,290px);margin-left:calc(min(78vw,290px)/-2);transform-origin:50% 100%;z-index:calc(10 - var(--d,0));
    transform:translateY(calc(var(--d,0)*-15px)) scale(calc(1 - var(--d,0)*.06))!important;transition:transform .5s cubic-bezier(.2,.9,.25,1),opacity .4s ease!important}
  .anim-dyn .dk-slot.is-far{opacity:0;pointer-events:none}
  .anim-dyn .dk-slot.is-toss{transform:translateX(125%) rotate(16deg)!important;opacity:0}
  .anim-dyn .dk-slot.is-toss-l{transform:translateX(-125%) rotate(-16deg)!important;opacity:0}
  .anim-dyn .dk-slot.is-snap{transition:none!important}
  .anim-dyn .dk-card{height:310px}
  .anim-dyn .dk-slot.is-on{transform:none}
  .anim-dyn .dk-slot:not(.is-on) .dk-card{filter:brightness(.7)}
  .dk-nav:not([hidden]){display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px}
  .dk-nav button{background:transparent;border:1px solid var(--a-edge,rgba(98,182,255,.3));color:var(--a-ink);border-radius:999px;padding:11px 22px;min-width:92px;font:600 15px/1 var(--font);cursor:pointer}
  .dk-nav button:active{background:var(--a-faint)}
  .dk-count{font:700 15px/1 var(--font);color:var(--a-ink);min-width:54px;text-align:center}
}

/* ---- Handoff: the relay. A packet travels station to station; a handshake glow where it lands ---- */
.anim-relay{margin-top:46px}
.rl-list{list-style:none;display:flex;align-items:flex-start}
.rl-st{position:relative;flex:1 1 0;min-width:0;padding:0 14px;text-align:center}
.rl-node{position:relative;z-index:2;display:grid;place-items:center;width:72px;height:72px;margin:0 auto 18px;border-radius:50%;background:var(--a-panel);border:1.5px solid var(--a-ln);box-shadow:0 0 0 7px var(--a-faint),0 0 34px -4px var(--glow);transition:border-color .5s ease,box-shadow .5s ease}
.rl-node svg{width:30px;height:30px;stroke:var(--a-ln);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s}
.rl-node>b{font:700 24px/1 var(--font);color:var(--a-ln)}
.rl-badge{position:absolute;right:-8px;top:-8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--font);color:#fff;background:var(--a-core);box-shadow:0 0 12px var(--glow)}
.rl-node::before,.rl-node::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--a-ln);opacity:0;pointer-events:none}
.rl-hop{position:absolute;z-index:1;top:35px;left:50%;width:100%;height:2px;background:var(--a-dim)}
.rl-fill{position:absolute;left:0;top:0;height:100%;width:100%;background:linear-gradient(90deg,var(--a-core),var(--a-ln))}
.rl-pk{display:none;position:absolute;top:-6px;left:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;box-shadow:0 0 16px 4px var(--a-ln),0 0 32px 8px var(--glow)}
.rl-detail{transition:opacity .6s ease,transform .6s ease}
.rl-detail h3{font-size:18px;color:var(--a-ink)}
.rl-detail p{font-size:15px;line-height:1.55;color:var(--a-mute);margin-top:4px}
.anim-dyn .rl-node{cursor:pointer}
.anim-dyn .rl-node:focus-visible{outline:2px solid var(--a-ln);outline-offset:4px}
.anim-dyn .rl-fill{width:0;transition:width 1.1s linear}
.anim-dyn .rl-pk{display:block;opacity:0;left:0;transition:left 1.1s linear,opacity .25s ease}
.anim-dyn .rl-st.is-sending .rl-pk{opacity:1;left:100%}
.anim-dyn .rl-st.is-sending .rl-fill,.anim-dyn .rl-st.is-sent .rl-fill{width:100%}
.anim-dyn .rl-st.is-sent .rl-pk{opacity:0;left:100%}
.anim-dyn .rl-st:not(.is-lit) .rl-node{border-color:var(--a-dim);box-shadow:0 0 0 7px transparent}
.anim-dyn .rl-st:not(.is-lit) .rl-node svg{stroke:var(--a-dim)}
.anim-dyn .rl-st:not(.is-lit) .rl-node>b{color:var(--a-dim)}
.anim-dyn .rl-st:not(.is-lit) .rl-detail{opacity:0;transform:translateY(14px)}
.anim-dyn .rl-st.is-lit .rl-node::before{animation:rl-shake 1.1s ease-out 1}
.anim-dyn .rl-st.is-lit .rl-node::after{animation:rl-shake 1.1s ease-out .25s 1}
.anim-dyn .rl-st.is-ack .rl-node::before{animation:rl-shake .9s ease-out 1}
@keyframes rl-shake{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}
@media (max-width:700px){
  .rl-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 18px}
  .rl-st{padding:0}
  .rl-hop{width:calc(100% + 18px)}
  .rl-st:nth-child(2n) .rl-hop{display:none}
  .rl-detail h3{font-size:16px}
  .rl-detail p{font-size:14px}
}

/* ---- RouteDraw 'auto': the night-city map, drawn by scroll ---- */
.anim-journey{margin-top:36px}
.jn-pin-box{max-width:1120px;margin:0 auto}
.jn-map{background:#060b15;border-color:rgba(98,182,255,.28);box-shadow:0 40px 100px -50px rgba(47,123,255,.85)}
.anim-stage>.jn-svg{max-height:calc(100vh - 230px);max-height:calc(100svh - 230px);min-height:200px}
.jn-bg{fill:#060b15}
.jn-shadow rect{fill:#000;opacity:.5}
.jn-b0{fill:#0c1527;stroke:rgba(98,182,255,.1)}
.jn-b1{fill:#0e1a31;stroke:rgba(98,182,255,.15)}
.jn-b2{fill:#122342;stroke:rgba(98,182,255,.2)}
.jn-lot{fill:rgba(47,123,255,.05)}
.jn-street{fill:none;stroke:rgba(98,182,255,.07);stroke-width:2}
.jn-art{fill:none;stroke:rgba(98,182,255,.2);stroke-width:5}
.jn-art-glow{fill:none;stroke:#2f7bff;stroke-width:16;opacity:.1}
.jn-vig{pointer-events:none}
.jn-base{fill:none;stroke:rgba(98,182,255,.2);stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.jn-glow,.jn-route{fill:none;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.jn-glow{stroke:#2f7bff;stroke-width:18;opacity:.3}
.jn-route{stroke:#62b6ff;stroke-width:5;filter:drop-shadow(0 0 5px #2f7bff)}
.jn-tr{display:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.anim-dyn .jn-tr{display:inline}
.jn-tr1{stroke:#2f7bff;stroke-width:13;opacity:.3;stroke-dasharray:.18 2}
.jn-tr2{stroke:#8fcbff;stroke-width:8;opacity:.55;stroke-dasharray:.1 2}
.jn-tr3{stroke:#fff;stroke-width:4;opacity:.95;stroke-dasharray:.045 2}
.jn-head{display:none}
.anim-dyn .jn-head{display:inline}
.jn-head-halo{fill:rgba(98,182,255,.35)}
.jn-head-core{fill:#fff;filter:drop-shadow(0 0 8px #62b6ff) drop-shadow(0 0 16px #2f7bff)}
.jn-pin-halo{fill:rgba(47,123,255,.18)}
.jn-pin{fill:#0a1120;stroke:#62b6ff;stroke-width:2.4}
.jn-num{font:700 17px/1 var(--font);fill:#eef2f8}
.jn-last .jn-pin{fill:#2f7bff;stroke:#a9d6ff}
.jn-lbl{font:650 17px/1 var(--font);fill:#eef2f8;paint-order:stroke;stroke:#060b15;stroke-width:6px;stroke-linejoin:round}
.jn-mark,.jn-lg{transition:opacity .5s ease}
.anim-dyn .jn-mark:not(.is-on){opacity:.35}
.anim-dyn .jn-lg:not(.is-on){opacity:.22}
.jn-gw-bg{fill:#0b1426;stroke:#62b6ff;stroke-width:2;filter:drop-shadow(0 0 6px rgba(47,123,255,.7));transition:stroke .4s,filter .4s}
.jn-gw .ic{stroke:#a9d6ff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.jn-gl{fill:none;stroke:#62b6ff;stroke-width:1.6;stroke-dasharray:3 5;opacity:.6;transition:opacity .4s}
.jn-wave{fill:none;stroke:#62b6ff;stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center}
.anim-dyn .jn-gw:not(.is-on) .jn-gw-bg{stroke:rgba(98,182,255,.28);filter:none}
.anim-dyn .jn-gw:not(.is-on) .ic{stroke:rgba(98,182,255,.3)}
.anim-dyn .jn-gw:not(.is-on) .jn-gl{opacity:0}
.anim-dyn .jn-gw.is-on .jn-wave{animation:jn-wave 1.6s ease-out 1}
.anim-dyn .jn-gw.is-on .jn-wave2{animation-delay:.35s}
@keyframes jn-wave{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3.4)}}
.jn-end-ring{fill:none;stroke:#fff;stroke-width:2.5;stroke-dasharray:5 6;opacity:.85;transform-box:fill-box;transform-origin:center}
.jn-end-pulse{fill:none;stroke:#62b6ff;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.jn-endlbl{fill:#fff}
.anim-dyn .jn-end{opacity:0;transition:opacity .8s ease}
.anim-dyn.is-arrive .jn-end{opacity:1}
.anim-dyn.is-arrive .jn-end-pulse{animation:jn-wave 2.2s ease-out infinite}
.anim-dyn.is-arrive .jn-end-ring{animation:spin 18s linear infinite}
.jn-sr{opacity:.16}
.anim-dyn .jn-sr{opacity:0;transition:opacity .8s}
.anim-dyn.is-arrive .jn-sr-r{animation:jn-red 1.2s ease-in-out infinite}
.anim-dyn.is-arrive .jn-sr-b{animation:jn-blue 1.2s ease-in-out infinite}
@keyframes jn-red{0%,100%{opacity:.04}50%{opacity:.5}}
@keyframes jn-blue{0%,100%{opacity:.5}50%{opacity:.04}}
.jn-cr-sh{fill:#000;opacity:.5}
.jn-cr-body{fill:#1a2538;stroke:#8fa6c6;stroke-width:1.5}
.jn-cr-glass{fill:#0a1020}
.jn-bar-b{fill:#3d8bff;filter:drop-shadow(0 0 5px #3d8bff)}
.jn-bar-r{fill:#ff3b4a;filter:drop-shadow(0 0 5px #ff3b4a)}
.jn-halo{opacity:.28}
.anim-dyn .jn-cr{transition:transform 1.8s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.anim-dyn .jn-cr-a{transform:translateY(-190px);opacity:0}
.anim-dyn .jn-cr-b{transform:translateY(190px);opacity:0}
.anim-dyn.is-arrive .jn-cr{transform:none;opacity:1}
.anim-dyn.is-arrive .jn-cr-b{transition-delay:.25s}
.anim-dyn.is-arrive .jn-hb,.anim-dyn.is-arrive .jn-bar-b{animation:jn-blue 1.2s ease-in-out infinite}
.anim-dyn.is-arrive .jn-hr,.anim-dyn.is-arrive .jn-bar-r{animation:jn-red 1.2s ease-in-out infinite}
.jn-steps{list-style:none;display:flex;gap:10px;margin-top:14px}
.jn-steps li{flex:1 1 0;min-width:0;display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--a-edge);border-radius:14px;background:var(--a-faint);color:var(--a-ink);font-weight:600;font-size:14.5px;line-height:1.35;transition:opacity .5s ease,border-color .5s ease,background .5s ease}
.jn-steps b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--font);color:#fff;background:var(--a-core);box-shadow:0 0 14px var(--glow)}
.anim-dyn .jn-steps li{opacity:.4;background:transparent}
.anim-dyn .jn-steps li.is-on{opacity:.8}
.anim-dyn .jn-steps li.is-cur{opacity:1;background:var(--a-faint);border-color:var(--a-ln)}
.anim-dyn .jn-track{height:320vh}
.anim-dyn .jn-pin-box{position:sticky;top:84px}
@media (max-width:900px){.jn-steps{flex-wrap:wrap}.jn-steps li{flex:1 1 calc(33% - 10px)}}
@media (max-width:700px){
  .jn-lg,.jn-lbl{display:none}
  .jn-steps{flex-direction:column;gap:6px;flex-wrap:nowrap}
  .jn-steps li{flex:none;padding:8px 12px;font-size:13.5px}
  .anim-dyn .jn-track{height:260vh}
  .anim-stage>.jn-svg{max-height:none;min-height:0}
}

/* VALUE GRID MOTION (ValueGrid motion=True; For Dealers 'Simple to deploy. Easy to present.'): the clean
   white/blue look, animated. Soft blue rings drift out behind the cards, the cards lift in one after another as they reveal, and each
   icon moves (the clock ticks, the tag swings, the store bobs, a scan line runs over the QR) with a soft halo behind it. CSS only;
   icons wait until their card is in view. Reduced motion (site.css kills every animation) = the static white/blue grid + one still ring. */
.vg-motion{position:relative;overflow:hidden;isolation:isolate}
.vg-rings{position:absolute;inset:0;z-index:-1;pointer-events:none}
.vg-rings i{position:absolute;left:50%;top:62%;width:min(1100px,160vw);aspect-ratio:1;border-radius:50%;border:1px solid rgba(47,123,255,.22);box-shadow:inset 0 0 60px rgba(47,123,255,.05);transform:translate(-50%,-50%) scale(.15);opacity:0;animation:vg-ring 13s cubic-bezier(.22,.61,.36,1) infinite}
.vg-rings i:nth-child(2){left:30%;top:40%;animation-delay:-4.3s}
.vg-rings i:nth-child(3){left:72%;top:78%;animation-delay:-8.6s}
@keyframes vg-ring{0%{transform:translate(-50%,-50%) scale(.15);opacity:0}15%{opacity:.9}100%{transform:translate(-46%,-54%) scale(1);opacity:0}}
.vg-motion .card.reveal{transform:translateY(46px) scale(.97);transition:opacity .8s,transform .9s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
.vg-motion .card.reveal.in{transform:none}
.vg-motion .card.reveal.in:hover{transform:translateY(-6px)}
.vg-motion .card:nth-child(2){transition-delay:.12s}.vg-motion .card:nth-child(3){transition-delay:.24s}.vg-motion .card:nth-child(4){transition-delay:.36s}
.vg-motion .card.in:hover{transition-delay:0s}
.vg-ico{position:relative;display:inline-block;width:30px;height:30px;margin-bottom:18px}
.vg-ico svg{display:block;margin:0;overflow:visible}
.vg-ico>i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:1px solid rgba(47,123,255,.4);opacity:0;pointer-events:none}
.vg-motion .card.in .vg-ico>i{animation:vg-halo 3.6s ease-out infinite}
.vg-motion .card:nth-child(2).in .vg-ico>i{animation-delay:.9s}.vg-motion .card:nth-child(3).in .vg-ico>i{animation-delay:1.8s}.vg-motion .card:nth-child(4).in .vg-ico>i{animation-delay:2.7s}
@keyframes vg-halo{0%{transform:scale(.5);opacity:.9}70%,100%{transform:scale(1.5);opacity:0}}
.vg-ico-clock path{transform-origin:12px 12px;transform-box:view-box}
.vg-motion .card.in .vg-ico-clock path{animation:vg-tick 6s steps(12) infinite}
@keyframes vg-tick{to{transform:rotate(360deg)}}
.vg-ico-tag svg{transform-origin:25% 25%}
.vg-motion .card.in .vg-ico-tag svg{animation:vg-swing 3.4s ease-in-out infinite}
@keyframes vg-swing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.vg-motion .card.in .vg-ico-store svg{animation:vg-bob 2.8s ease-in-out infinite}
@keyframes vg-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.vg-ico-qr::after{content:"";position:absolute;left:-3px;right:-3px;top:2px;height:2px;border-radius:2px;background:var(--signal2);box-shadow:0 0 8px var(--signal2);opacity:0}
.vg-motion .card.in .vg-ico-qr::after{animation:vg-scan 2.4s ease-in-out infinite}
@keyframes vg-scan{0%{top:2px;opacity:0}15%,85%{opacity:1}100%{top:26px;opacity:0}}
@media(prefers-reduced-motion:reduce){.vg-rings i:first-child{opacity:.6;transform:translate(-50%,-50%) scale(.7)}.vg-motion .card.reveal,.vg-motion .card.reveal.in:hover{transform:none}}

/* GROUP (schema Group: For Dealers 'Get A Lot More'): ONE block. The outer <section> owns the tone; the parts
   keep their own markup but sit closer together, so the leads film, compliance and products read as one band. */
.group>section.pad+section.pad{padding-top:24px}
.group>section.pad:not(:last-child){padding-bottom:72px}
@media(max-width:700px){.group>section.pad+section.pad{padding-top:8px}.group>section.pad:not(:last-child){padding-bottom:56px}}