/* Tixbox V3.5 · Service pages · stat cards, feature scenes, reporting dashboard (12 Nov 2026).
   Each service page sets its palette colour on <main>: --c (colour), --ct (text-safe shade), --cs (soft wash). */
.sp2{--c:var(--sv-ticketing);--ct:var(--sv-ticketing-ink);--cs:var(--sv-ticketing-soft)}

/* ── Stat cards ─────────────────────────────────── */
.svs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:calc(-1*clamp(28px,4vw,56px));position:relative;z-index:2}
.svs-c{--mx:50%;--my:0%;position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:6px;min-width:0;padding:22px 24px 26px;border-radius:var(--tv-r-card-in,22px);background:var(--tv-card,var(--sv-paint-fff));border:1px solid var(--tv-line);box-shadow:var(--tv-sh-card);transition:transform .35s var(--tv-ease),box-shadow .35s,border-color .35s}
.svs-c::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s var(--tv-ease);background:radial-gradient(320px circle at var(--mx) var(--my),color-mix(in srgb,var(--c) 16%,transparent),transparent 65%)}
.svs-c::after{content:"";position:absolute;z-index:-1;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:var(--cs);transition:transform .6s var(--tv-ease)}
.svs-c:hover{transform:translateY(-4px);box-shadow:var(--tv-sh-lift);border-color:color-mix(in srgb,var(--c) 30%,transparent)}
.svs-c:hover::before{opacity:1}.svs-c:hover::after{transform:scale(1.6)}
.svs-ic{display:grid;place-items:center;width:42px;height:42px;margin-bottom:8px;border-radius:13px;background:var(--cs);color:var(--ct);transition:transform .35s var(--tv-ease),background .25s,color .25s}
.svs-c:hover .svs-ic{transform:rotate(-8deg) scale(1.06);background:var(--c);color:var(--sv-paint-fff)}
.svs-c b{display:flex;align-items:baseline;gap:1px;font:800 clamp(28px,2.7vw,40px)/1.05 var(--tv-font);letter-spacing:-.035em;color:var(--tv-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.svs-c:first-child b{color:var(--ct)}
.svs-c b small{font:inherit;font-size:.62em;letter-spacing:-.02em}
.svs-c b em{font-style:normal;color:var(--ct)}
.svs-l{font:700 11px var(--tv-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tv-mute-2)}
.svs-n{font:500 13px var(--tv-font);color:var(--tv-mute)}
.svs-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 45%,var(--sv-paint-fff)));transform:scaleX(.18);transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.svs-c:hover .svs-bar{transform:scaleX(1)}
/* word values reveal letter by letter */
.svs-c [data-w] i{display:inline-block;font-style:normal}
.svs.is-in [data-w] i{animation:svsWord .55s var(--tv-ease) both;animation-delay:calc(var(--k)*45ms + 150ms)}
.svs-c:hover [data-w] i{animation:svsWave .6s var(--tv-ease) both;animation-delay:calc(var(--k)*35ms)}
@keyframes svsWord{from{opacity:0;transform:translateY(60%) rotate(8deg)}to{opacity:1;transform:none}}
@keyframes svsWave{0%,100%{transform:none}40%{transform:translateY(-14%)}}
.svs-live{display:inline-block;width:10px;height:10px;margin-left:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 50%,transparent);animation:svsPing 2.4s ease-out infinite;align-self:center}
@keyframes svsPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent)}70%,100%{box-shadow:0 0 0 12px transparent}}
@media (prefers-reduced-motion:no-preference){.svs .svs-c{opacity:0;transform:translateY(14px)}.svs.is-in .svs-c{opacity:1;transform:none;transition:opacity .6s var(--tv-ease) calc(var(--i)*90ms),transform .6s var(--tv-ease) calc(var(--i)*90ms),box-shadow .35s,border-color .35s}.svs.is-in .svs-c:hover{transform:translateY(-4px);transition-delay:0s}}

@media (max-width:1000px){.svs{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}}
@media (max-width:620px){.svs{grid-template-columns:minmax(0,1fr)}}

/* ── Feature cards ──────────────────────────────── */
.sp2-feats li{position:relative;overflow:hidden;isolation:isolate}
.sp2-feats li:hover{transform:translateY(-4px)!important;border-color:color-mix(in srgb,var(--c) 28%,transparent)}
.sp2-feats li .sp-ic{background:var(--cs);color:var(--ct)}
.sp2-feats li:hover .sp-ic{background:var(--c);color:var(--sv-paint-fff)}
.sp2-feats li::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.sp2-feats li:hover::after{transform:scaleX(1)}
.sp-fx{position:relative;display:grid;place-items:center;height:108px;margin:-8px -8px 14px;border-radius:16px;background:var(--cs);overflow:hidden;color:var(--ct);--ink:var(--tv-ink,var(--sv-paint-1a1a1a));transition:transform .45s var(--tv-ease)}
.sp-fx::before{content:"";position:absolute;inset:0;background:radial-gradient(160px circle at 80% 0%,rgba(255,255,255,.75),transparent 70%)}
.sp2-feats li:hover .sp-fx{transform:scale(1.02)}
.sp-fx>*{position:relative}
.sp-fx svg{width:120px;height:80px;overflow:visible}
.sp-fx i,.sp-fx em{font-style:normal}
.sp2-feats li:not(.sfx-on) .sp-fx *,.sp2-feats li:not(.sfx-on) .sp-fx::after{animation-play-state:paused!important}
.sfx-still .sp-fx *{animation:none!important}
.sfx-ln{display:block;height:6px;border-radius:3px;background:currentColor;opacity:.22}
/* chat */
.fxs-chat{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 18px;place-items:stretch}
.sfx-b{max-width:78%;padding:6px 10px;border-radius:12px;background:var(--sv-paint-fff);color:var(--ink);font:600 11.5px var(--tv-font);box-shadow:0 4px 10px -6px rgba(0,0,0,.25);animation:fxBub 4.8s var(--tv-ease) infinite;animation-delay:calc(var(--n,0)*.5s)}
.sfx-b.is-l{align-self:flex-start;border-bottom-left-radius:4px}.sfx-b.is-r{align-self:flex-end;background:var(--c);color:var(--sv-paint-fff);border-bottom-right-radius:4px}
.sfx-b:nth-child(2){--n:1}.sfx-b:nth-child(3){--n:2}
@keyframes fxBub{0%{opacity:0;transform:translateY(8px) scale(.9)}10%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-4px)}}
/* push */
.sfx-ph{width:64px;height:92px;margin-top:30px;border-radius:14px;border:2px solid var(--ink);background:var(--sv-paint-fff);padding:22px 7px 0;display:flex;flex-direction:column;gap:6px}
.sfx-nt{position:absolute;left:-46px;right:-46px;top:6px;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:10px;background:var(--sv-paint-fff);color:var(--ink);font:700 10.5px var(--tv-font);box-shadow:0 8px 18px -8px rgba(0,0,0,.35);animation:fxDrop 3.6s var(--tv-ease) infinite;white-space:nowrap}
.sfx-nt b{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--c);color:var(--sv-paint-fff);font-size:9px}
@keyframes fxDrop{0%,8%{opacity:0;transform:translateY(-26px)}20%,78%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-10px)}}
/* mail */
.sfx-env{width:84px;height:54px;margin-top:20px;border-radius:8px;background:var(--sv-paint-fff);border:2px solid var(--ink)}
.sfx-lt{position:absolute;left:8px;right:8px;top:6px;height:46px;padding:8px;border-radius:5px;background:var(--sv-paint-fff);border:1.5px solid var(--c);display:flex;flex-direction:column;gap:5px;animation:fxRise 3.2s var(--tv-ease) infinite}
.sfx-flap{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 60%);background:var(--cs);border-radius:6px}
@keyframes fxRise{0%,15%{transform:translateY(0)}45%,70%{transform:translateY(-34px)}95%,100%{transform:translateY(0)}}
/* social */
.sfx-path{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:4 4;opacity:.5;animation:fxDash 1.4s linear infinite}
.sfx-node{fill:var(--sv-paint-fff);stroke:var(--c);stroke-width:3}
.sfx-heart{position:absolute;left:calc(30% + var(--k)*20%);bottom:18px;width:12px;height:12px;background:var(--c);transform:rotate(45deg);border-radius:2px;animation:fxFloat 2.6s ease-in infinite;animation-delay:calc(var(--k)*.8s)}
.sfx-heart::before,.sfx-heart::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--c)}.sfx-heart::before{left:-6px}.sfx-heart::after{top:-6px}
@keyframes fxFloat{0%{opacity:0;transform:translateY(0) rotate(45deg) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translateY(-70px) rotate(45deg) scale(1)}}
@keyframes fxDash{to{stroke-dashoffset:-16}}
/* donut */
.sfx-ring0{fill:none;stroke:var(--sv-paint-fff);stroke-width:12}
.sfx-seg{fill:none;stroke-width:12;transform-origin:60px 40px;transform:rotate(-90deg);stroke-dasharray:0 100;animation:fxSeg 4s var(--tv-ease) infinite}
.sfx-seg.is-1{stroke:var(--c);--a:45;--o:0}.sfx-seg.is-2{stroke:var(--ink);--a:30;--o:-45;animation-delay:.2s}.sfx-seg.is-3{stroke:color-mix(in srgb,var(--c) 40%,var(--sv-paint-fff));--a:25;--o:-75;animation-delay:.4s}
.sfx-seg{stroke-dashoffset:var(--o)}
@keyframes fxSeg{0%{stroke-dasharray:0 100}30%,80%{stroke-dasharray:var(--a) 100}100%{stroke-dasharray:0 100}}
.sfx-tag{position:absolute;right:12px;top:12px;padding:3px 8px;border-radius:99px;background:var(--sv-paint-fff);font:700 10px var(--tv-mono);color:var(--ink)}
/* ad */
.sfx-ad{width:150px;height:62px;padding:12px 12px 12px 54px;border-radius:12px;background:var(--sv-paint-fff);display:flex;flex-direction:column;justify-content:center;gap:7px;overflow:hidden;box-shadow:0 10px 22px -14px rgba(0,0,0,.35)}
.sfx-ad em{position:absolute;left:10px;top:12px;bottom:12px;width:34px;display:grid;place-items:center;border-radius:8px;background:var(--c);color:var(--sv-paint-fff);font:800 11px var(--tv-mono)}
.sfx-ad .sfx-ln:nth-of-type(2){width:60%}
.sfx-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.8) 50%,transparent 65%);transform:translateX(-100%);animation:fxShine 2.8s ease-in-out infinite}
@keyframes fxShine{0%,30%{transform:translateX(-100%)}70%,100%{transform:translateX(100%)}}
/* scan */
.sfx-qr{width:68px;height:68px;padding:6px;border-radius:10px;background:var(--sv-paint-fff);box-shadow:0 8px 18px -10px rgba(0,0,0,.35)}
.sfx-qrg{display:block;width:100%;height:100%;background:conic-gradient(var(--ink) 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0) 0 0/12px 12px;opacity:.85;border-radius:3px}
.sfx-beam{position:absolute;left:-6px;right:-6px;height:3px;top:8px;background:var(--c);box-shadow:0 0 12px 2px color-mix(in srgb,var(--c) 70%,transparent);border-radius:2px;animation:fxBeam 2.2s ease-in-out infinite alternate}
@keyframes fxBeam{to{top:58px}}
.sfx-ok{position:absolute;right:12px;bottom:12px;padding:3px 9px;border-radius:99px;background:var(--sv-paint-1f8a5b);color:var(--sv-paint-fff);font:700 10.5px var(--tv-font);animation:fxOk 2.2s ease-in-out infinite alternate}
@keyframes fxOk{0%,70%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:none}}
/* gate */
.sfx-gate{width:110px;height:60px;display:flex;align-items:center;justify-content:center}
.sfx-post{width:12px;height:52px;border-radius:4px;background:var(--ink)}
.sfx-arm{width:40px;height:6px;border-radius:3px;background:var(--c);transform-origin:right center;animation:fxArm 3s var(--tv-ease) infinite}
.sfx-arm.is-b{transform-origin:left center;animation-name:fxArmB}
@keyframes fxArm{0%,30%,90%,100%{transform:none}45%,75%{transform:rotate(80deg)}}
@keyframes fxArmB{0%,30%,90%,100%{transform:none}45%,75%{transform:rotate(-80deg)}}
.sfx-walker{position:absolute;bottom:14px;left:-10px;width:9px;height:9px;border-radius:50%;background:var(--ink);animation:fxWalk 3s linear infinite;animation-delay:calc(var(--k)*-1s)}
@keyframes fxWalk{to{transform:translateX(calc(100cqw + 20px))}}
.sp-fx{container-type:inline-size}
/* bars */
.sfx-bars{display:flex;align-items:flex-end;gap:7px;height:62px}
.sfx-bar{width:12px;border-radius:4px 4px 2px 2px;background:var(--c);height:30%;animation:fxEq 1.8s ease-in-out infinite alternate;animation-delay:calc(var(--k)*-.3s)}
.sfx-bar:nth-child(even){background:var(--ink)}
@keyframes fxEq{0%{height:18%}50%{height:90%}100%{height:45%}}
.sfx-live{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;background:var(--sv-paint-fff);font:700 10px var(--tv-mono);text-transform:uppercase;color:var(--ink)}
.sfx-live i{width:7px;height:7px;border-radius:50%;background:var(--sv-paint-1f8a5b);animation:svsPing 2.4s ease-out infinite;--c:var(--sv-paint-1f8a5b)}
/* shield */
.sfx-sh{fill:var(--sv-paint-fff);stroke:var(--c);stroke-width:3}
.sfx-chk{fill:none;stroke:var(--sv-paint-1f8a5b);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;animation:fxChk 3s ease infinite}
@keyframes fxChk{0%,20%{stroke-dashoffset:40}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}
.sfx-tk.is-bad{position:absolute;left:14px;top:50%;margin-top:-14px;width:40px;height:28px;display:grid;place-items:center;border-radius:6px;background:var(--sv-paint-fff);border:1.5px dashed var(--sv-paint-c70032);color:var(--sv-paint-c70032);font:800 13px var(--tv-font);animation:fxReject 3s var(--tv-ease) infinite}
@keyframes fxReject{0%{transform:translateX(-30px);opacity:0}20%{transform:translateX(16px);opacity:1}35%{transform:translateX(6px) rotate(-8deg)}60%,100%{transform:translateX(-50px) rotate(-20deg);opacity:0}}
/* lanes */
.sfx-lanes{display:flex;flex-direction:column;gap:12px;width:80%}
.sfx-lane{position:relative;display:block;height:14px;border-radius:99px;background:rgba(255,255,255,.75)}
.sfx-lane::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--ink);animation:fxLane 2.6s linear infinite}
.sfx-lane:nth-child(2)::after{background:var(--c);animation-duration:1.3s;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent)}
.sfx-lane:nth-child(3)::after{animation-duration:3.4s}
@keyframes fxLane{to{left:calc(100% - 12px)}}
/* id card */
.sfx-id{width:120px;height:70px;padding:12px 12px 12px 58px;border-radius:12px;background:var(--sv-paint-fff);display:flex;flex-direction:column;justify-content:center;gap:6px;box-shadow:0 10px 22px -14px rgba(0,0,0,.35)}
.sfx-face{position:absolute;left:12px;top:14px;width:36px;height:42px;border-radius:8px;overflow:hidden;background:radial-gradient(circle at 50% 38%,var(--c) 0 8px,transparent 9px),radial-gradient(18px 12px at 50% 100%,var(--c) 98%,transparent),var(--cs)}
.sfx-id .sfx-ln:nth-of-type(2){width:70%}.sfx-id .sfx-ln:nth-of-type(3){width:50%}
.sfx-pop{position:absolute;right:-8px;top:-8px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--sv-paint-1f8a5b);color:var(--sv-paint-fff);font:800 12px var(--tv-font);animation:fxPop 2.6s var(--tv-ease) infinite}
@keyframes fxPop{0%,35%{transform:scale(0)}50%,90%{transform:scale(1)}100%{transform:scale(0)}}
/* people */
.sfx-ppl{display:flex;gap:6px}
.sfx-p{width:22px;height:30px;border-radius:11px 11px 6px 6px;background:radial-gradient(circle at 50% 30%,var(--sv-paint-fff) 0 4px,transparent 5px),var(--ink);animation:fxHop 2s var(--tv-ease) infinite;animation-delay:calc(var(--k)*.15s)}
.sfx-p:nth-child(odd){background:radial-gradient(circle at 50% 30%,var(--sv-paint-fff) 0 4px,transparent 5px),var(--c)}
@keyframes fxHop{0%,40%,100%{transform:none}20%{transform:translateY(-10px)}}
/* orbit */
.sfx-orb{width:80px;height:80px;display:grid;place-items:center}
.sfx-me{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 50% 38%,var(--sv-paint-fff) 0 6px,transparent 7px),var(--c)}
.sfx-ring{position:absolute;inset:6px;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--c) 50%,transparent);animation:fxSpin 6s linear infinite}
.sfx-ring.is-2{inset:-6px;animation-duration:9s;animation-direction:reverse}
.sfx-ring i{position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--ink)}
@keyframes fxSpin{to{transform:rotate(360deg)}}
/* printer */
.sfx-prn{width:110px;height:80px}
.sfx-slot{position:absolute;left:0;right:0;top:8px;height:22px;border-radius:8px;background:var(--ink)}
.sfx-slot::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:3px;border-radius:2px;background:var(--sv-paint-000)}
.sfx-tix{position:absolute;left:22px;right:22px;top:22px;height:48px;padding:10px 8px;border-radius:0 0 6px 6px;background:var(--sv-paint-fff);border-top:3px dashed var(--c);display:flex;flex-direction:column;gap:6px;clip-path:inset(0 0 0 0);animation:fxPrint 2.6s steps(12) infinite;transform-origin:top}
@keyframes fxPrint{0%{transform:scaleY(0);opacity:1}60%,90%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
/* devices */
.sfx-devs{display:flex;gap:12px}
.sfx-dev{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--sv-paint-fff);animation:fxDev 3s var(--tv-ease) infinite;animation-delay:calc(var(--k)*1s)}
.sfx-dev svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes fxDev{0%,40%,100%{transform:none;background:var(--sv-paint-fff)}15%,25%{transform:translateY(-6px) scale(1.12);background:var(--c)}}
.sfx-dev:nth-child(1){animation-name:fxDev}
/* van */
.sfx-road{position:absolute;left:0;right:0;bottom:22px;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 20px);opacity:.35;animation:fxRoad .6s linear infinite}
@keyframes fxRoad{to{background-position:-20px 0}}
.sfx-van{position:absolute;bottom:24px;left:0;animation:fxDrive 4s var(--tv-ease) infinite}
.sfx-van svg{width:62px;height:36px;fill:var(--c);stroke:var(--ink);stroke-width:1.6}
@keyframes fxDrive{0%{transform:translateX(-70px)}45%,55%{transform:translateX(calc(50cqw - 31px))}100%{transform:translateX(calc(100cqw + 10px))}}
/* zones */
.sfx-zones{display:grid;grid-template-columns:repeat(3,34px);gap:6px}
.sfx-z{height:26px;border-radius:7px;background:rgba(255,255,255,.8);animation:fxZone 3.6s ease infinite;animation-delay:calc(var(--k)*.3s)}
@keyframes fxZone{0%,100%{background:rgba(255,255,255,.8)}20%,40%{background:var(--c)}}
/* form */
.sfx-form{width:150px;display:flex;flex-direction:column;gap:6px}
.sfx-fld{display:block;height:12px;border-radius:99px;background:var(--sv-paint-fff);position:relative;overflow:hidden}
.sfx-fld::after{content:"";position:absolute;left:5px;top:4px;height:4px;border-radius:2px;background:var(--ink);opacity:.5;width:0;animation:fxType 3.6s steps(10) infinite;animation-delay:calc(var(--k)*.5s)}
@keyframes fxType{0%,10%{width:0}50%,100%{width:60%}}
.sfx-send{align-self:flex-end;padding:4px 10px;border-radius:99px;background:var(--c);color:var(--sv-paint-fff);font:700 10px var(--tv-font);animation:fxPress 3.6s ease infinite}
@keyframes fxPress{0%,70%{transform:none}78%{transform:scale(.9)}86%,100%{transform:none;background:var(--sv-paint-1f8a5b)}}
/* badge */
.sfx-badge{width:70px;height:96px;margin-top:-14px;transform-origin:50% 0;animation:fxSwing 3s ease-in-out infinite}
.sfx-strap{position:absolute;left:50%;top:0;width:6px;height:30px;margin-left:-3px;background:var(--c);border-radius:2px}
.sfx-card{position:absolute;left:5px;right:5px;top:26px;height:64px;border-radius:9px;background:var(--sv-paint-fff);box-shadow:0 10px 20px -12px rgba(0,0,0,.4);padding:30px 8px 0}
.sfx-card .sfx-face{left:50%;top:6px;width:22px;height:22px;margin-left:-11px;border-radius:50%}
.sfx-card i{display:block;height:4px;margin:3px 6px;border-radius:2px;background:var(--ink);opacity:.25}
.sfx-card em{position:absolute;left:0;right:0;bottom:0;height:12px;border-radius:0 0 9px 9px;background:var(--c);color:var(--sv-paint-fff);font:800 8px/12px var(--tv-mono);text-align:center}
@keyframes fxSwing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
/* quota */
.sfx-quota{width:150px;display:flex;flex-direction:column;gap:9px}
.sfx-q{display:block;height:12px;border-radius:99px;background:var(--sv-paint-fff);position:relative;overflow:hidden}
.sfx-q::after{content:"";position:absolute;inset:0;border-radius:99px;background:var(--c);transform-origin:left;animation:fxFill 3.2s var(--tv-ease) infinite}
.sfx-q:nth-child(1)::after{--w:.85}.sfx-q:nth-child(2)::after{--w:.55;background:var(--ink)}.sfx-q:nth-child(3)::after{--w:.3}
@keyframes fxFill{0%{transform:scaleX(0)}45%,85%{transform:scaleX(var(--w))}100%{transform:scaleX(0)}}
/* car */
.sfx-bar-gate{position:absolute;right:28%;bottom:22px;width:6px;height:34px}
.sfx-pole{position:absolute;inset:0;border-radius:3px;background:var(--ink)}
.sfx-boom{position:absolute;right:3px;top:2px;width:40px;height:5px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--c) 0 8px,var(--sv-paint-fff) 8px 14px);transform-origin:right center;animation:fxBoom 4s var(--tv-ease) infinite}
@keyframes fxBoom{0%,25%,85%,100%{transform:none}38%,72%{transform:rotate(80deg)}}
.sfx-car{position:absolute;left:0;bottom:16px;animation:fxCar 4s var(--tv-ease) infinite}
.sfx-car svg{width:58px;height:30px;fill:var(--sv-paint-fff);stroke:var(--ink);stroke-width:1.6}
.sfx-car em{position:absolute;left:24px;top:8px;width:13px;height:13px;border-radius:3px;background:var(--c);color:var(--sv-paint-fff);font:800 8px/13px var(--tv-font);text-align:center}
@keyframes fxCar{0%{transform:translateX(-60px)}30%{transform:translateX(calc(50cqw - 70px))}40%{transform:translateX(calc(50cqw - 70px))}80%,100%{transform:translateX(calc(100cqw + 10px))}}
/* wristband */
.sfx-band{width:96px;height:36px;border-radius:18px;background:var(--ink);display:grid;place-items:center}
.sfx-chip{width:34px;height:22px;border-radius:7px;background:var(--c)}
.sfx-arc{position:absolute;top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:2px solid var(--c);opacity:0;animation:fxNfc 2.4s ease-out infinite;animation-delay:calc(var(--k)*.6s)}
@keyframes fxNfc{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(2.2)}}
/* coins */
.sfx-coin{display:block;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--sv-paint-fff6) 0 4px,transparent 5px),var(--c);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--c) 60%,var(--sv-paint-000))}
.sfx-stack{display:flex;flex-direction:column-reverse;margin-top:28px}
.sfx-coin.is-s{width:46px;height:12px;border-radius:50%;margin-top:-4px}
.sfx-coin.is-drop{position:absolute;left:50%;margin-left:-15px;top:-30px;animation:fxCoin 2.4s ease-in infinite;animation-delay:calc(var(--k)*1.2s)}
@keyframes fxCoin{0%{transform:translateY(0) rotateY(0)}60%{transform:translateY(58px) rotateY(540deg);opacity:1}70%,100%{transform:translateY(58px) rotateY(540deg);opacity:0}}
/* refund */
.sfx-loop{fill:none;stroke:var(--c);stroke-width:5;stroke-linecap:round}
.sfx-head{fill:none;stroke:var(--c);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.fxs-refund svg{animation:fxSpin 3s linear infinite reverse}
.sfx-coin.is-mid{position:absolute;width:26px;height:26px}
/* stars */
.sfx-stars{display:flex;gap:6px}
.sfx-star{width:22px;height:22px;background:var(--sv-paint-fff);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:fxStar 3.2s var(--tv-ease) infinite;animation-delay:calc(var(--k)*.18s)}
@keyframes fxStar{0%,10%{background:var(--sv-paint-fff);transform:none}25%,80%{background:var(--sv-paint-f0a500);transform:scale(1.15)}100%{background:var(--sv-paint-fff)}}
/* code */
.sfx-code{width:150px;height:70px;padding:12px 12px 12px 46px;border-radius:12px;background:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:7px}
.sfx-code em{position:absolute;left:12px;top:50%;margin-top:-9px;color:var(--c);font:800 14px var(--tv-mono)}
.sfx-cl{display:block;height:5px;border-radius:3px;background:var(--sv-paint-fff);opacity:.35;width:0;animation:fxType 3s steps(8) infinite;animation-delay:calc(var(--k)*.6s)}
.sfx-cl:nth-of-type(2){background:var(--c);opacity:.8}
.sfx-cur{position:absolute;right:16px;bottom:14px;width:7px;height:12px;background:var(--c);animation:fxBlink 1s steps(1) infinite}
@keyframes fxBlink{50%{opacity:0}}
/* gear */
.sfx-g{position:absolute;width:52px;height:52px}
.sfx-g svg{width:100%;height:100%;fill:var(--c);stroke:none}
.sfx-g svg circle{fill:var(--cs)}
.sfx-g.is-a{left:calc(50% - 46px);top:22px;animation:fxSpin 5s linear infinite}
.sfx-g.is-b{left:calc(50% - 4px);top:38px;width:40px;height:40px;animation:fxSpin 3.8s linear infinite reverse}
.sfx-g.is-b svg{fill:var(--ink)}
/* lock */
.sfx-shk{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;animation:fxShk 3s var(--tv-ease) infinite}
@keyframes fxShk{0%,20%{transform:translateY(-8px)}40%,100%{transform:none}}
.sfx-body{fill:var(--c)}.sfx-kh{fill:var(--sv-paint-fff)}
.fxs-lock .sfx-ok{animation:fxOk2 3s ease infinite}
@keyframes fxOk2{0%,40%{opacity:0;transform:scale(.8)}55%,90%{opacity:1;transform:none}100%{opacity:0}}
/* send */
.sfx-dash{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:4 5;opacity:.5}
.sfx-wrap{display:block;width:120px;height:80px}.sfx-plane{position:absolute;left:0;top:0;color:var(--c);font-size:18px;line-height:1;offset-path:path("M20 60 C45 10 75 10 100 60");animation:fxFly 2.6s var(--tv-ease) infinite}
@keyframes fxFly{0%{offset-distance:0%;opacity:0}10%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
/* swap */
.sfx-tk2{position:absolute;width:64px;height:38px;border-radius:8px;background:var(--sv-paint-fff);box-shadow:0 10px 20px -12px rgba(0,0,0,.4);border-left:8px solid var(--c);animation:fxSwapA 3.2s var(--tv-ease) infinite}
.sfx-tk2.is-b{border-left-color:var(--ink);animation-name:fxSwapB}
@keyframes fxSwapA{0%,20%{transform:translate(-40px,-6px)}50%,70%{transform:translate(40px,6px) rotate(4deg)}100%{transform:translate(-40px,-6px)}}
@keyframes fxSwapB{0%,20%{transform:translate(40px,6px) rotate(4deg)}50%,70%{transform:translate(-40px,-6px)}100%{transform:translate(40px,6px) rotate(4deg)}}
/* list */
.sfx-list{width:160px;height:76px;overflow:hidden;border-radius:12px;background:var(--sv-paint-fff);padding:0 10px}
.sfx-rows{display:flex;flex-direction:column;animation:fxRows 6s steps(6) infinite}
.sfx-row{display:flex;align-items:center;gap:8px;height:25px;flex:none;font:600 11px var(--tv-font);color:var(--ink);border-bottom:1px solid var(--tv-line)}
.sfx-row i{width:8px;height:8px;border-radius:50%;background:var(--c)}
@keyframes fxRows{to{transform:translateY(-150px)}}
/* tap */
.sfx-scr{width:96px;height:76px;padding:8px;border-radius:12px;background:var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sfx-tile{border-radius:6px;background:var(--sv-paint-fff);opacity:.2;animation:fxTile 4s ease infinite;animation-delay:calc(var(--k)*1s)}
@keyframes fxTile{0%,10%,30%,100%{opacity:.2;background:var(--sv-paint-fff)}15%,25%{opacity:1;background:var(--c)}}
.sfx-finger{position:absolute;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:fxFinger 4s var(--tv-ease) infinite}
@keyframes fxFinger{0%{transform:translate(18px,14px)}25%{transform:translate(58px,14px)}50%{transform:translate(18px,46px)}75%{transform:translate(58px,46px)}100%{transform:translate(18px,14px)}}
/* calendar */
.sfx-cal{width:120px;padding:24px 8px 8px;border-radius:12px;background:var(--sv-paint-fff);display:grid;grid-template-columns:repeat(7,1fr);gap:4px;box-shadow:0 10px 20px -14px rgba(0,0,0,.4)}
.sfx-cal-h{position:absolute;left:0;right:0;top:0;height:16px;border-radius:12px 12px 0 0;background:var(--c)}
.sfx-day{height:10px;border-radius:3px;background:var(--tv-line-3,var(--sv-paint-e6e3dc));animation:fxDay 5.6s steps(1) infinite;animation-delay:calc(var(--k)*-.4s)}
@keyframes fxDay{0%{background:var(--ink)}7%,100%{background:var(--tv-line-3,var(--sv-paint-e6e3dc))}}
/* cart */
.sfx-cart{width:58px;height:58px;margin-top:20px}
.sfx-cart svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sfx-item{position:absolute;left:calc(50% - 8px);top:2px;font-size:18px;animation:fxDropIn 3.6s ease-in infinite;animation-delay:calc(var(--k)*1.2s)}
@keyframes fxDropIn{0%{transform:translateY(0);opacity:0}15%{opacity:1}45%{transform:translateY(44px);opacity:1}55%,100%{transform:translateY(44px) scale(.4);opacity:0}}
/* line */
.sfx-grid{stroke:var(--sv-paint-fff);stroke-width:1.5}
.sfx-area{fill:color-mix(in srgb,var(--c) 18%,transparent)}
.sfx-stroke{fill:none;stroke:var(--c);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;animation:fxDraw 3.6s var(--tv-ease) infinite}
@keyframes fxDraw{0%{stroke-dashoffset:100;opacity:1}55%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.sfx-dot{fill:var(--sv-paint-fff);stroke:var(--c);stroke-width:3;animation:fxOk 3.6s ease infinite}
/* price */
.sfx-ptag{position:absolute;left:0;top:0;padding:4px 9px;border-radius:99px;background:var(--ink);color:var(--sv-paint-fff);font:700 11px var(--tv-mono);offset-path:path("M6 60 C30 60 36 22 60 30 S96 56 114 18");offset-rotate:0deg;animation:fxPrice 4s ease-in-out infinite alternate}
.sfx-ptag b{color:var(--c)}
@keyframes fxPrice{from{offset-distance:0%}to{offset-distance:100%}}
/* browser */
.sfx-win{width:160px;height:84px;margin-top:16px;border-radius:10px;background:var(--sv-paint-fff);box-shadow:0 10px 22px -14px rgba(0,0,0,.4);padding:22px 8px 8px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:26px 1fr;gap:5px;overflow:hidden}
.sfx-bar-t{position:absolute;left:0;right:0;top:0;height:16px;display:flex;align-items:center;gap:3px;padding:0 6px;background:var(--tv-skin,var(--sv-paint-f3f1ec))}
.sfx-bar-t i{width:5px;height:5px;border-radius:50%;background:var(--tv-line-3,var(--sv-paint-ccc))}
.sfx-url{margin-left:6px;font:600 8px var(--tv-mono);color:var(--ink);overflow:hidden;white-space:nowrap;width:0;animation:fxUrl 4s steps(14) infinite}
@keyframes fxUrl{0%,10%{width:0}50%,100%{width:70px}}
.sfx-hero{grid-column:1/-1;border-radius:5px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 50%,var(--sv-paint-fff)))}
.sfx-blk{border-radius:4px;background:var(--tv-skin,var(--sv-paint-f3f1ec));animation:fxLoad 1.6s ease-in-out infinite alternate;animation-delay:calc(var(--k)*.2s)}
@keyframes fxLoad{from{opacity:.4}to{opacity:1}}
/* palette */
.sfx-pal{display:flex;gap:8px}
.sfx-sw{width:26px;height:38px;border-radius:8px;animation:fxHop 2s var(--tv-ease) infinite;animation-delay:calc(var(--k)*.14s)}
.sfx-sw:nth-child(1){background:var(--c)}.sfx-sw:nth-child(2){background:var(--ink)}.sfx-sw:nth-child(3){background:var(--sv-paint-fff)}.sfx-sw:nth-child(4){background:color-mix(in srgb,var(--c) 45%,var(--sv-paint-fff))}
/* ticket */
.sfx-ticket{width:150px;height:62px;border-radius:10px;overflow:hidden;background:var(--sv-paint-fff);box-shadow:0 10px 22px -14px rgba(0,0,0,.4);animation:fxTilt 4s ease-in-out infinite}
.sfx-pat{position:absolute;inset:0 44px 0 0;background:repeating-linear-gradient(45deg,var(--c) 0 6px,color-mix(in srgb,var(--c) 70%,var(--sv-paint-fff)) 6px 12px);background-size:34px 34px;animation:fxPat 2s linear infinite}
@keyframes fxPat{to{background-position:34px 0}}
.sfx-stub{position:absolute;right:0;top:0;bottom:0;width:44px;border-left:2px dashed var(--tv-line-3,var(--sv-paint-ddd));background:radial-gradient(circle at 50% 50%,var(--ink) 0 2px,transparent 3px) 0 0/8px 8px;opacity:.5}
@keyframes fxTilt{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(3deg)}}
/* seats */
.sfx-stage{position:absolute;top:16px;left:50%;width:70px;height:8px;margin-left:-35px;border-radius:0 0 40px 40px;background:var(--ink)}
.sfx-seats{display:grid;grid-template-columns:repeat(8,11px);gap:4px;margin-top:20px}
.sfx-seat{height:10px;border-radius:3px 3px 2px 2px;background:var(--sv-paint-fff);animation:fxSeat 4.8s steps(1) infinite;animation-delay:calc(var(--k)*.12s)}
@keyframes fxSeat{0%,60%{background:var(--sv-paint-fff)}10%,55%{background:var(--c)}}
/* play */
.sfx-vid{width:150px;height:78px;border-radius:12px;background:linear-gradient(135deg,var(--ink),color-mix(in srgb,var(--c) 70%,var(--sv-paint-000)));display:grid;place-items:center}
.sfx-pl{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sv-paint-fff);color:var(--c);font-size:13px;padding-left:3px;animation:svsPing 2.4s ease-out infinite;--c:var(--sv-paint-fff)}
.sfx-vid .sfx-pl{color:var(--ink)}
.sfx-prog{position:absolute;left:10px;right:10px;bottom:9px;height:4px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.sfx-prog i{position:absolute;inset:0;background:var(--sv-paint-fff);transform-origin:left;animation:fxProg 5s linear infinite}
@keyframes fxProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* globe */
.sfx-gl{fill:none;stroke:var(--ink);stroke-width:2}
.sfx-mer{fill:none;stroke:var(--c);stroke-width:2.5;transform-origin:60px 40px;animation:fxMer 3s linear infinite}
@keyframes fxMer{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
.sfx-lang{position:absolute;right:10px;top:12px;height:20px;overflow:hidden;border-radius:99px;background:var(--sv-paint-fff);display:flex;flex-direction:column}
.sfx-lang b{flex:none;height:20px;padding:0 8px;font:700 10px/20px var(--tv-font);color:var(--ink);animation:fxLang 6s steps(1) infinite}
@keyframes fxLang{0%{transform:translateY(0)}25%{transform:translateY(-20px)}50%{transform:translateY(-40px)}75%{transform:translateY(-60px)}}
/* plug */
.sfx-plug{position:absolute;top:50%;width:44px;height:24px;margin-top:-12px;border-radius:6px;background:var(--ink)}
.sfx-plug.is-a{left:calc(50% - 56px);animation:fxPlugA 3s var(--tv-ease) infinite}
.sfx-plug.is-b{right:calc(50% - 56px);background:var(--c);animation:fxPlugB 3s var(--tv-ease) infinite}
.sfx-plug.is-a::after{content:"";position:absolute;right:-10px;top:5px;width:10px;height:4px;background:var(--ink);box-shadow:0 10px 0 var(--ink)}
@keyframes fxPlugA{0%,100%{transform:translateX(-14px)}40%,70%{transform:none}}
@keyframes fxPlugB{0%,100%{transform:translateX(14px)}40%,70%{transform:none}}
.sfx-spark{width:14px;height:14px;border-radius:50%;background:var(--sv-paint-f0a500);box-shadow:0 0 14px 4px var(--sv-paint-f0a50088);animation:fxSpark 3s ease infinite}
@keyframes fxSpark{0%,38%,75%,100%{transform:scale(0)}45%,65%{transform:scale(1)}}
/* cloud */
.sfx-cloud{width:96px;height:44px;border-radius:22px;background:var(--sv-paint-fff);box-shadow:0 10px 22px -14px rgba(0,0,0,.4)}
.sfx-cloud::before,.sfx-cloud::after{content:"";position:absolute;border-radius:50%;background:var(--sv-paint-fff)}
.sfx-cloud::before{width:44px;height:44px;left:16px;top:-20px}.sfx-cloud::after{width:32px;height:32px;right:14px;top:-12px}
.sfx-up{position:absolute;bottom:10px;left:calc(38% + var(--k)*12%);width:6px;height:16px;border-radius:3px;background:var(--c);animation:fxUp 1.8s ease-in infinite;animation-delay:calc(var(--k)*.5s)}
@keyframes fxUp{0%{transform:translateY(20px);opacity:0}30%{opacity:1}100%{transform:translateY(-40px);opacity:0}}
/* cycle */
.sfx-cyc{width:56px;height:56px;border-radius:16px;background:var(--sv-paint-fff);box-shadow:0 10px 22px -14px rgba(0,0,0,.4)}
.sfx-cyc i{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;opacity:0;animation:fxCyc 6s steps(1) infinite;animation-delay:calc(var(--k)*1s)}
@keyframes fxCyc{0%{opacity:1;transform:none}16.6%,100%{opacity:0}}
.sfx-cyc i:first-child{opacity:1}
.sfx-still .sfx-cyc i:not(:first-child){opacity:0}
/* still (reduced motion): show the finished picture */
.sfx-still .sfx-chk,.sfx-still .sfx-stroke{stroke-dashoffset:0}
.sfx-still .sfx-seg.is-1{stroke-dasharray:45 100}.sfx-still .sfx-seg.is-2{stroke-dasharray:30 100}.sfx-still .sfx-seg.is-3{stroke-dasharray:25 100}
.sfx-still .sfx-q::after{transform:scaleX(var(--w))}
.sfx-still .sfx-heart,.sfx-still .sfx-walker,.sfx-still .sfx-coin.is-drop,.sfx-still .sfx-item,.sfx-still .sfx-up,.sfx-still .sfx-arc,.sfx-still .sfx-tk.is-bad{display:none}
.sfx-still .sfx-url{width:70px}.sfx-still .sfx-fld::after,.sfx-still .sfx-cl{width:60%}
.sfx-still .sfx-van{transform:translateX(calc(50cqw - 31px))}.sfx-still .sfx-car{transform:translateX(calc(50cqw - 70px))}
.sfx-still .sfx-plane{offset-distance:50%}.sfx-still .sfx-ptag{offset-distance:60%}
.sfx-still .sfx-tk2.is-a{transform:translate(-40px,-6px)}.sfx-still .sfx-tk2.is-b{transform:translate(40px,6px) rotate(4deg)}
.sfx-still .sfx-plug.is-a,.sfx-still .sfx-plug.is-b{transform:none}.sfx-still .sfx-spark{transform:scale(1)}
.sfx-still .sfx-tix{transform:none}.sfx-still .sfx-pop{transform:scale(1)}

/* ── Specialized Reporting hero dashboard ─────────── */
.sp2-float .svc3-viz.rp{overflow:visible;height:auto;padding:16px 16px 14px;justify-content:flex-start;gap:12px;background:var(--sv-paint-fff);border:1px solid var(--tv-line)}
.rp-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rp-live{display:inline-flex;align-items:center;gap:6px;font:700 10.5px var(--tv-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tv-mute)}
.rp-live i{width:8px;height:8px;border-radius:50%;background:var(--sv-paint-1f8a5b);--c:var(--sv-paint-1f8a5b);animation:svsPing 2.4s ease-out infinite}
.rp-tabs{display:flex;gap:3px;padding:3px;border-radius:99px;background:var(--tv-skin,var(--sv-paint-f3f1ec))}
.rp-tabs b{padding:3px 9px;border-radius:99px;font:700 10px var(--tv-font);color:var(--tv-mute)}.rp-tabs b.on{background:var(--tv-ink);color:var(--sv-paint-fff)}
.rp-tot{display:flex;align-items:baseline;gap:8px}
.rp-tot b{font:800 30px/1 var(--tv-font);letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--tv-ink)}
.rp-tot small{font:700 13px var(--tv-font);color:var(--tv-mute)}
.rp-tot em{font:700 11px var(--tv-mono);font-style:normal;color:var(--sv-paint-1f6b46);background:var(--sv-paint-e7f3ea);padding:2px 7px;border-radius:99px}
.rp-g{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:12px;align-items:stretch}
.rp-chart{position:relative;height:96px;border-radius:12px;background:linear-gradient(var(--tv-line) 1px,transparent 1px) 0 0/100% 24px,var(--cs);overflow:hidden}
.rp-chart svg{position:absolute;inset:0;width:100%;height:100%}
.rp-area{fill:color-mix(in srgb,var(--c) 22%,transparent)}
.rp-line{fill:none;stroke:var(--c);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400;animation:rpDraw 1.6s .4s var(--tv-ease) forwards}
.rp-line2{fill:none;stroke:var(--tv-ink);stroke-width:1.6;stroke-dasharray:3 4;opacity:.35}
@keyframes rpDraw{to{stroke-dashoffset:0}}
.rp-dot{position:absolute;right:6px;top:10px;width:10px;height:10px;border-radius:50%;background:var(--sv-paint-fff);border:3px solid var(--c);box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 50%,transparent);animation:svsPing 2.4s ease-out infinite 1.6s}
.rp-ring{position:relative;display:grid;place-items:center;border-radius:12px;background:var(--tv-skin,var(--sv-paint-f3f1ec))}
.rp-ring svg{width:70px;height:70px;transform:rotate(-90deg)}
.rp-ring circle{fill:none;stroke-width:8}
.rp-ring .rp-r0{stroke:var(--sv-paint-fff)}.rp-ring .rp-r1{stroke:var(--c);stroke-linecap:round;stroke-dasharray:calc(var(--sold,78)*1.76) 176;transition:stroke-dasharray .6s var(--tv-ease)}
.rp-ring span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:800 15px/1 var(--tv-font);color:var(--tv-ink)}
.rp-ring span small{display:block;margin-top:2px;font:700 8.5px var(--tv-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tv-mute)}
.rp-bars{display:flex;align-items:flex-end;gap:5px;height:34px}
.rp-bars i{flex:1;border-radius:3px 3px 1px 1px;background:color-mix(in srgb,var(--c) 30%,var(--sv-paint-fff));height:var(--h);transform-origin:bottom;animation:rpBar 2.8s ease-in-out infinite alternate;animation-delay:calc(var(--k)*-.35s)}
.rp-bars i:nth-last-child(-n+3){background:var(--c)}
@keyframes rpBar{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
.rp-ax{display:flex;justify-content:space-between;font:600 9px var(--tv-mono);color:var(--tv-mute-2)}
.rp-toast{position:absolute;z-index:3;right:18px;top:-30px;display:flex;flex-direction:column;padding:8px 12px;border-radius:14px;background:var(--tv-ink);color:var(--sv-paint-fff);box-shadow:0 14px 28px -14px rgba(0,0,0,.55);opacity:0;transform:translateY(6px) scale(.96)}
.rp-toast b{font:800 13px var(--tv-font)}.rp-toast span{font:600 10.5px var(--tv-font);color:var(--sv-paint-bdb9b0)}
.rp-toast.is-show{animation:rpToast 2.4s var(--tv-ease) forwards}
@keyframes rpToast{0%{opacity:0;transform:translateY(8px) scale(.96)}12%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.sp2-float.svc3:has(.rp){overflow:visible}
.rp.is-still .rp-line{animation:none;stroke-dashoffset:0}.rp.is-still .rp-bars i,.rp.is-still .rp-dot{animation:none}
@media (max-width:620px){.rp-g{grid-template-columns:minmax(0,1fr) 78px}.rp-tot b{font-size:24px}.rp-tabs{display:none}.rp-toast{right:-4px}}
@media (prefers-reduced-motion:reduce){.svs-live,.rp-live i,.rp-dot{animation:none}.svs.is-in [data-w] i,.svs-c:hover [data-w] i{animation:none}}
/* inquiry drawer: service chips are multi-select */
.svq .svq-svc button{display:inline-flex;align-items:center;gap:6px}
.svq .svq-t{display:inline-grid;place-items:center;font-style:normal}
@media (max-width:620px){.svs{gap:10px}.svs-c{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;padding:16px 18px 18px}.svs-ic{grid-row:1/span 3;margin:0}.svs-c b{font-size:28px}}
/* Services page · In numbers: full numbers (12,000,000+) need a smaller size */
.o5 .sv-numsec .oh-stat b[data-count]{font-size:clamp(24px,2.3vw,34px)!important;letter-spacing:-.04em;white-space:nowrap}
@media (max-width:620px){.o5 .sv-numsec .oh-stat b[data-count]{font-size:21px!important}}
.sfx-still .sfx-seat:nth-child(-n+11){background:var(--c)}

/* Pause dashboard decoration when the illustration is outside the viewport. */
.rp:not(.rp-visible) *,.rp:not(.rp-visible)::before,.rp:not(.rp-visible)::after{animation-play-state:paused!important}
.svs:not(.is-in) .svs-live{animation-play-state:paused}

/* Visibility and reduced motion apply to pseudo-elements as well as their owning shapes. */
.sp2-feats li:not(.sfx-on) .sp-fx *::before,.sp2-feats li:not(.sfx-on) .sp-fx *::after{animation-play-state:paused!important}
.sfx-still .sp-fx *::before,.sfx-still .sp-fx *::after{animation:none!important}
.sv-pv:not(.sv-loop-visible) *,.sp2-float:not(.sv-loop-visible) *,.svs:not(.sv-loop-visible) .svs-live{animation-play-state:paused!important}
.sv-pv:not(.sv-loop-visible) *::before,.sv-pv:not(.sv-loop-visible) *::after,.sp2-float:not(.sv-loop-visible) *::before,.sp2-float:not(.sv-loop-visible) *::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.sv-pv *,.sp2-float *,.sv-pv *::before,.sv-pv *::after,.sp2-float *::before,.sp2-float *::after{animation:none!important}}

/* The supplied audience relay also pauses while outside the viewport. */
.sp2-marq:not(.sv-loop-visible) .sp2-marq-t{animation-play-state:paused!important}