/* tokenway.io · site styles · built 2026-09-30 */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/inter-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}

:root{
  --navy:#0B1E3D; --navy9:#081733; --navy8:#12294B; --blue:#2E5BFF; --mint:#00C49A; --mintb:#2EE6C0;
  --ice:#C7D2E6; --steel:#8FA3C4; --slate:#5A6B85; --soft:#EEF2FF; --white:#fff;
  --font:'Inter',-apple-system,'Segoe UI',Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --T:15s;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--navy);color:#fff;font-family:var(--font);-webkit-font-smoothing:antialiased}
.section{max-width:1160px;margin:0 auto;padding:96px 24px 120px;position:relative}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--mintb);text-transform:uppercase}
h2{font-size:clamp(32px,4.4vw,50px);font-weight:800;letter-spacing:-.025em;line-height:1.04;margin:14px 0 14px}
h2 span{color:var(--mintb)}
.lead{font-size:18px;line-height:1.5;color:var(--ice);max-width:720px}

/* tabs */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:30px 0 26px}
.tab{appearance:none;border:1px solid rgba(199,210,230,.16);background:rgba(255,255,255,.03);font:inherit;color:var(--ice);padding:14px 16px;border-radius:12px;cursor:pointer;text-align:left;transition:border-color .2s,background .2s}
.tab b{display:block;font-size:15px;color:#fff}
.tab small{display:block;font-size:12px;color:var(--steel);margin-top:3px;line-height:1.35}
.tab:hover{background:rgba(255,255,255,.06)}
.tab[aria-selected="true"]{border-color:var(--mintb);background:rgba(46,230,192,.07);box-shadow:0 0 0 1px rgba(46,230,192,.25) inset}

/* panel */
.panel{display:none;gap:26px}
.panel.active{display:grid}
.head h3{font-size:clamp(26px,3.4vw,40px);font-weight:800;letter-spacing:-.025em;line-height:1.08;max-width:900px}
.head h3 em{font-style:normal;color:var(--mintb)}
.head p{font-size:16px;line-height:1.55;color:var(--ice);max-width:760px;margin-top:10px}

/* stage */
.stagewrap{position:relative;width:100%;aspect-ratio:1000/500;border-radius:18px;overflow:hidden;border:1px solid rgba(199,210,230,.14);
  background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(46,91,255,.22),transparent 70%),linear-gradient(180deg,#0E2348,#081733)}
.stagewrap::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(199,210,230,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(199,210,230,.05) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 100%)}
.stage{position:absolute;left:0;top:0;width:1000px;height:500px;transform-origin:0 0}

/* the line */
.rail{position:absolute;left:290px;top:249px;width:420px;height:2px;background:linear-gradient(90deg,transparent,rgba(46,91,255,.9) 20%,rgba(46,91,255,.9) 80%,transparent)}
.rail::after{content:"";position:absolute;inset:-1px;background:inherit;filter:blur(6px);opacity:.7}

/* the ring: the connection */
.ring{position:absolute;left:430px;top:180px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(46,91,255,.35),rgba(46,91,255,0) 65%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px}
.ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(46,230,192,.9);box-shadow:0 0 30px rgba(46,230,192,.35),inset 0 0 30px rgba(46,91,255,.25)}
.ring::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(199,210,230,.35);animation:spin 24s linear infinite}
.ring small{font-size:9px;letter-spacing:.24em;color:var(--mintb);font-weight:700}
.ring b{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.01em}
.ring i{font-style:normal;font-size:10px;color:var(--ice)}
@keyframes spin{to{transform:rotate(360deg)}}
.flash{position:absolute;left:500px;top:250px;width:10px;height:10px;border-radius:50%;background:#fff;opacity:0;transform:translate(-50%,-50%) scale(1);box-shadow:0 0 40px 20px rgba(46,230,192,.6)}

/* actor card, light */
.actor{position:absolute;left:40px;top:150px;width:260px;height:200px;border-radius:16px;background:#fff;color:var(--navy);box-shadow:0 20px 60px rgba(0,0,0,.45);padding:18px 20px}
.actor .who{font-size:10px;letter-spacing:.2em;color:var(--blue);font-weight:800;text-transform:uppercase}
.actor .name{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-top:4px}
.actor .sub{font-size:11.5px;color:var(--slate);margin-top:2px}
.actor .slot{margin-top:16px;height:64px;border:1px dashed #D6DEEA;border-radius:10px;position:relative}
.actor .slot .hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--steel)}
.chip{position:absolute;left:20px;bottom:16px;font-size:11px;font-weight:700;color:#0B8F6F;background:#E3FAF3;border-radius:999px;padding:5px 10px;opacity:0}


/* the distributor's name cycles with the orders */
.names{position:relative;height:30px}
.names span{position:absolute;left:0;top:0;opacity:0;white-space:nowrap}
.anim .n1{animation:n1 var(--T) infinite}.anim .n2{animation:n2 var(--T) infinite}.anim .n3{animation:n3 var(--T) infinite}
@keyframes n1{0%,42%{opacity:1}45%,100%{opacity:0}}
@keyframes n2{0%,43%{opacity:0}46%,86%{opacity:1}89%,100%{opacity:0}}
@keyframes n3{0%,87%{opacity:0}90%,100%{opacity:1}}


/* a phone on the distributor's card: it is their app, digital, in the client's hand */
.miniphone{position:absolute;right:14px;top:14px;width:56px;height:86px;border-radius:12px;border:2px solid var(--navy);background:#fff;padding:8px 6px}
.miniphone::before{content:"";position:absolute;left:50%;top:4px;width:18px;height:3px;border-radius:99px;background:var(--navy);transform:translateX(-50%)}
.miniphone .scr{display:grid;gap:4px;margin-top:6px}
.miniphone .scr i{display:block;height:5px;border-radius:3px;background:#E1E7F2}
.miniphone .scr em{display:block;margin-top:4px;height:13px;border-radius:5px;background:var(--mint);color:#fff;font-style:normal;font-size:8px;font-weight:800;text-align:center;line-height:14px}
.anim .miniphone .scr em{animation:tap var(--T) infinite}
@keyframes tap{0%,8%{transform:scale(1)}10%{transform:scale(.9);background:#0B8F6F}12%,44%{transform:scale(1)}46%{transform:scale(.9);background:#0B8F6F}48%,100%{transform:scale(1)}}
.actor .slot{width:150px;margin-top:20px;height:60px}
#p-dist .actor .sub{max-width:150px;font-size:10.5px;line-height:1.25}
#p-dist .sec{top:252px}

/* the security: the hero card */
.sec{position:absolute;left:52px;top:236px;width:236px;height:64px;border-radius:12px;padding:10px 14px;
  background:linear-gradient(180deg,#14305E,#0B1E3D);border:1px solid rgba(46,230,192,.85);color:#fff;
  box-shadow:0 10px 40px rgba(46,230,192,.18);opacity:0;transform-origin:center}
.sec .k{font-size:9px;letter-spacing:.2em;color:var(--mintb);font-weight:700;white-space:nowrap}
.sec .v{font-size:13.5px;font-weight:700;margin-top:3px;white-space:nowrap}
.sec .w{font-size:10px;color:var(--ice);margin-top:1px;font-family:var(--mono);white-space:nowrap}

/* register plate, right */
.reg{position:absolute;left:700px;top:150px;width:260px;height:200px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(199,210,230,.22);padding:18px 20px;color:#fff}
.reg .who{font-size:10px;letter-spacing:.2em;color:var(--mintb);font-weight:800;text-transform:uppercase}
.reg .name{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-top:4px}
.reg .sub{font-size:11.5px;color:var(--ice);margin-top:2px}
.reg .rows{margin-top:14px;display:grid;gap:6px}
.reg .row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--ice);border-bottom:1px solid rgba(199,210,230,.14);padding-bottom:5px}
.reg .row.new{color:#fff;opacity:0}
.reg .row .st{color:var(--mintb);font-family:var(--font);font-weight:700;font-size:10px;letter-spacing:.08em}
.stamp{position:absolute;left:812px;top:120px;font-size:10px;letter-spacing:.2em;font-weight:800;color:var(--mintb);border:1.5px solid var(--mintb);border-radius:6px;padding:4px 8px;opacity:0;transform:rotate(-6deg) scale(1.4)}

/* the confirmation dot */
.dot{position:absolute;left:700px;top:243px;width:14px;height:14px;border-radius:50%;background:var(--mintb);box-shadow:0 0 18px 6px rgba(46,230,192,.55);opacity:0;transform:translate(-50%,0)}

/* payoff: the app */
.app{position:absolute;left:400px;top:392px;width:200px;height:74px;border-radius:14px;background:#fff;color:var(--navy);box-shadow:0 16px 50px rgba(0,0,0,.45);padding:10px 12px;opacity:0;transform:translateY(10px)}
.app .t{font-size:9px;letter-spacing:.16em;color:var(--steel);font-weight:800}
.app .l{margin-top:5px;display:flex;justify-content:space-between;align-items:center;font-size:11.5px;font-weight:700}
.app .l span{font-size:10px;font-weight:700;color:#0B8F6F;background:#E3FAF3;border-radius:999px;padding:3px 8px}
.app .n{font-size:10px;color:var(--slate);margin-top:2px}
.applabel{position:absolute;left:620px;top:410px;width:220px;font-size:12px;color:var(--ice);opacity:0;line-height:1.4}

/* captions */
.caption{position:absolute;left:0;right:0;bottom:20px;text-align:center;font-size:17px;font-weight:600;color:#fff;pointer-events:none;letter-spacing:-.01em}
.caption span{position:absolute;left:0;right:0;opacity:0}

/* chips: what you can do */
.can{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.can div{border:1px solid rgba(199,210,230,.16);border-radius:12px;padding:14px 16px;background:rgba(255,255,255,.03)}
.can b{display:block;font-size:15px;color:#fff}
.can code{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;color:var(--mintb);letter-spacing:.04em}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fact{border-left:3px solid var(--blue);padding:2px 0 2px 14px}
.fact.mint{border-left-color:var(--mintb)}
.fact b{display:block;font-size:14.5px;color:#fff}
.fact span{font-size:13px;color:var(--ice);line-height:1.45}
.soon{padding:60px;border:1px dashed rgba(199,210,230,.2);border-radius:18px;color:var(--steel);text-align:center;font-size:15px}

/* ---------------- timeline, 12 s ---------------- */
.anim .order{animation:order var(--T) infinite}
.anim .sec{animation:sec var(--T) infinite}
.anim .flash{animation:flash var(--T) infinite}
.anim .ring{animation:ringpulse var(--T) infinite}
.anim .row.new{animation:rownew var(--T) infinite}
.anim .stamp{animation:stamp var(--T) infinite}
.anim .dot{animation:dot var(--T) infinite}
.anim .chip{animation:chip var(--T) infinite}
.anim .app{animation:app var(--T) infinite}
.anim .applabel{animation:app var(--T) infinite}
.anim .c1{animation:c1 var(--T) infinite}.anim .c2{animation:c2 var(--T) infinite}.anim .c3{animation:c3 var(--T) infinite}.anim .c4{animation:c4 var(--T) infinite}

@keyframes order{0%,6%{opacity:0}10%,100%{opacity:1}}
/* the security card: born in the actor's slot, travels to the ring, shrinks through it, lands on the register */
@keyframes sec{
  0%,12%{opacity:0;left:60px;top:236px;transform:scale(.96)}
  15%{opacity:1;left:60px;top:236px;transform:scale(1)}
  22%{opacity:1;left:60px;top:236px;transform:scale(1)}
  36%{opacity:1;left:390px;top:218px;transform:scale(.9)}
  40%{opacity:0;left:500px;top:218px;transform:scale(.4)}
  41%{opacity:0;left:500px;top:218px;transform:scale(.4)}
  44%{opacity:1;left:610px;top:218px;transform:scale(.9)}
  54%{opacity:1;left:720px;top:236px;transform:scale(1)}
  57%,100%{opacity:0;left:720px;top:236px;transform:scale(1)}
}
@keyframes flash{0%,38%{opacity:0;transform:translate(-50%,-50%) scale(.2)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.6)}46%,100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
@keyframes ringpulse{0%,37%{filter:brightness(1)}40%{filter:brightness(1.8)}46%,100%{filter:brightness(1)}}
@keyframes rownew{0%,54%{opacity:0;transform:translateY(4px)}57%,100%{opacity:1;transform:translateY(0)}}
@keyframes stamp{0%,56%{opacity:0;transform:rotate(-6deg) scale(1.5)}59%,100%{opacity:1;transform:rotate(-6deg) scale(1)}}
@keyframes dot{0%,60%{opacity:0;left:700px}62%{opacity:1;left:700px}76%{opacity:1;left:300px}78%,100%{opacity:0;left:300px}}

@keyframes app{0%,81%{opacity:0;transform:translateY(10px)}85%,100%{opacity:1;transform:translateY(0)}}
@keyframes c1{0%,10%{opacity:0}13%,36%{opacity:1}39%,100%{opacity:0}}
@keyframes c2{0%,39%{opacity:0}42%,56%{opacity:1}59%,100%{opacity:0}}
@keyframes c3{0%,59%{opacity:0}62%,80%{opacity:1}83%,100%{opacity:0}}
@keyframes c4{0%,83%{opacity:0}86%,98%{opacity:1}100%{opacity:0}}


/* ---------- multi-register: the plates, the fan, two orders ---------- */
.plates{position:absolute;left:700px;top:80px;width:260px;display:grid;gap:10px}
.plate{height:50px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(199,210,230,.2);padding:8px 14px;display:flex;justify-content:space-between;align-items:center;color:#fff;position:relative}
.plate b{font-size:14px;font-weight:800;letter-spacing:-.01em;display:block}
.plate small{font-size:9.5px;color:var(--ice);display:block;margin-top:1px}
.plate .st{font-size:9.5px;font-weight:800;letter-spacing:.14em;color:var(--mintb);opacity:0}
.plate.next{border-style:dashed;color:var(--ice)}
.plate.next b{color:var(--ice)}
.plates .who{font-size:10px;letter-spacing:.2em;color:var(--mintb);font-weight:800;text-transform:uppercase;margin-bottom:-2px}
.fan{position:absolute;left:0;top:0;width:1000px;height:500px;pointer-events:none}
.fan path{fill:none;stroke:rgba(199,210,230,.22);stroke-width:1.5}
.fan path.hot{stroke:var(--mintb);stroke-width:2;opacity:0;filter:drop-shadow(0 0 6px rgba(46,230,192,.7))}
.sec2 .k{color:#8FB0FF}.sec2{border-color:rgba(46,91,255,.9);box-shadow:0 10px 40px rgba(46,91,255,.25)}
.anim .sec1{animation:sec1 var(--T) infinite}
.anim .sec2{animation:sec2 var(--T) infinite}
.anim .flash{animation:flash2 var(--T) infinite}
.anim .ring{animation:ringpulse2 var(--T) infinite}
.anim .lu .st{animation:st1 var(--T) infinite}
.anim .de .st{animation:st2 var(--T) infinite}
.anim .hot1{animation:hot1 var(--T) infinite}
.anim .hot2{animation:hot2 var(--T) infinite}
.anim .dot1{animation:dot1 var(--T) infinite}
.anim .dot2{animation:dot2 var(--T) infinite}
.anim .chip{animation:chip2 var(--T) infinite}
.anim .app,.anim .applabel{animation:app2 var(--T) infinite}
.anim .c1{animation:k1 var(--T) infinite}.anim .c2{animation:k2 var(--T) infinite}.anim .c3{animation:k3 var(--T) infinite}.anim .c4{animation:k4 var(--T) infinite}.anim .c5{animation:k5 var(--T) infinite}
@keyframes sec1{
  0%,5%{opacity:0;left:60px;top:252px;transform:scale(.96)} 8%,15%{opacity:1;left:60px;top:252px;transform:scale(1)}
  25%{opacity:1;left:390px;top:218px;transform:scale(.9)} 28%{opacity:0;left:500px;top:218px;transform:scale(.4)}
  29%{opacity:0;left:520px;top:218px;transform:scale(.4)} 31%{opacity:1;left:600px;top:200px;transform:scale(.7)}
  38%{opacity:1;left:690px;top:120px;transform:scale(.55)} 40%,100%{opacity:0;left:690px;top:120px;transform:scale(.4)} }
@keyframes sec2{
  0%,44%{opacity:0;left:60px;top:252px;transform:scale(.96)} 47%,53%{opacity:1;left:60px;top:252px;transform:scale(1)}
  62%{opacity:1;left:390px;top:218px;transform:scale(.9)} 65%{opacity:0;left:500px;top:218px;transform:scale(.4)}
  66%{opacity:0;left:520px;top:218px;transform:scale(.4)} 68%{opacity:1;left:600px;top:220px;transform:scale(.7)}
  74%{opacity:1;left:690px;top:180px;transform:scale(.55)} 76%,100%{opacity:0;left:690px;top:180px;transform:scale(.4)} }
@keyframes flash2{0%,26%{opacity:0;transform:translate(-50%,-50%) scale(.2)}28%{opacity:1;transform:translate(-50%,-50%) scale(1.6)}33%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}
  63%{opacity:0;transform:translate(-50%,-50%) scale(.2)}65%{opacity:1;transform:translate(-50%,-50%) scale(1.6)}70%,100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
@keyframes ringpulse2{0%,26%{filter:brightness(1)}28%{filter:brightness(1.8)}33%{filter:brightness(1)}63%{filter:brightness(1)}65%{filter:brightness(1.8)}70%,100%{filter:brightness(1)}}
@keyframes st1{0%,38%{opacity:0}40%,100%{opacity:1}}
@keyframes st2{0%,74%{opacity:0}76%,100%{opacity:1}}
@keyframes hot1{0%,29%{opacity:0}31%,40%{opacity:1}44%,100%{opacity:.35}}
@keyframes hot2{0%,66%{opacity:0}68%,76%{opacity:1}80%,100%{opacity:.35}}
@keyframes dot1{0%,40%{opacity:0;left:700px;top:124px}42%{opacity:1;left:700px;top:124px}46%{opacity:1;left:575px;top:243px}52%{opacity:1;left:300px;top:243px}54%,100%{opacity:0;left:300px;top:243px}}
@keyframes dot2{0%,76%{opacity:0;left:700px;top:184px}78%{opacity:1;left:700px;top:184px}82%{opacity:1;left:575px;top:243px}88%{opacity:1;left:300px;top:243px}90%,100%{opacity:0;left:300px;top:243px}}
@keyframes chip2{0%,52%{opacity:0;transform:translateY(4px)}55%,100%{opacity:1;transform:translateY(0)}}
@keyframes app2{0%,89%{opacity:0;transform:translateY(10px)}92%,100%{opacity:1;transform:translateY(0)}}
@keyframes k1{0%,6%{opacity:0}9%,26%{opacity:1}29%,100%{opacity:0}}
@keyframes k2{0%,30%{opacity:0}33%,43%{opacity:1}46%,100%{opacity:0}}
@keyframes k3{0%,46%{opacity:0}49%,63%{opacity:1}66%,100%{opacity:0}}
@keyframes k4{0%,67%{opacity:0}70%,86%{opacity:1}89%,100%{opacity:0}}
@keyframes k5{0%,90%{opacity:0}93%,99%{opacity:1}100%{opacity:0}}


/* ---------- asset managers scene: orders arrive ---------- */
.dcol{position:absolute;left:40px;top:96px;width:230px;display:grid;gap:22px}
.dcol .who{position:absolute;top:-26px;left:0;margin:0;white-space:nowrap}
.dcard{height:66px;border-radius:12px;background:#fff;color:var(--navy);box-shadow:0 14px 40px rgba(0,0,0,.4);padding:9px 12px;position:relative}
.dcard b{display:block;font-size:12.5px}
.dcard small{display:block;font-size:10px;color:var(--slate)}
.dcard .oc{position:absolute;right:10px;top:10px;font-size:9.5px;font-weight:700;color:var(--blue);background:#EEF2FF;border-radius:999px;padding:3px 8px;opacity:0}
.dcol .who{font-size:10px;letter-spacing:.2em;color:var(--mintb);font-weight:800;text-transform:uppercase;margin-bottom:-10px}
.ord{position:absolute;width:150px;height:34px;border-radius:9px;background:linear-gradient(180deg,#14305E,#0B1E3D);border:1px solid rgba(46,230,192,.85);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;opacity:0;box-shadow:0 8px 30px rgba(46,230,192,.2);white-space:nowrap}
.ord i{font-style:normal;color:var(--mintb);font-family:var(--mono);font-weight:500;font-size:10px}
.mgr{position:absolute;left:660px;top:96px;width:300px;height:248px;border-radius:16px;background:#fff;color:var(--navy);box-shadow:0 20px 60px rgba(0,0,0,.45);padding:16px 18px}
.mgr .who{font-size:10px;letter-spacing:.2em;color:var(--blue);font-weight:800;text-transform:uppercase}
.mgr .name{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.mgr .sub{font-size:11px;color:var(--slate);margin-top:1px}
.q{margin-top:12px;border:1px solid #E1E7F2;border-radius:10px;overflow:hidden}
.q .qh{display:flex;justify-content:space-between;gap:10px;font-size:8.5px;letter-spacing:.14em;color:var(--steel);font-weight:800;padding:6px 10px;background:#F5F7FC;text-transform:uppercase}
.q .qr{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-top:1px solid #EEF2FF;font-size:10.5px;opacity:0;position:relative;height:30px}
.q .qr b{font-weight:700}
.q .qr .sa,.q .qr .sb{position:absolute;right:10px;top:7px;font-size:9px;font-weight:800;border-radius:999px;padding:3px 8px;letter-spacing:.06em}
.q .qr .sa{color:#9A6B00;background:#FFF4DA}
.q .qr .sb{color:#0B8F6F;background:#E3FAF3;opacity:0}
.regp{position:absolute;left:660px;top:368px;width:300px;height:56px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(199,210,230,.22);padding:9px 14px;display:flex;justify-content:space-between;align-items:center;color:#fff}
.regp b{font-size:13px;display:block}.regp small{font-size:9.5px;color:var(--ice)}
.regp .st{font-size:9.5px;font-weight:800;letter-spacing:.14em;color:var(--mintb);opacity:0}
.hold{position:absolute;left:300px;top:352px;width:330px;height:118px;border-radius:14px;background:#fff;color:var(--navy);box-shadow:0 16px 50px rgba(0,0,0,.45);padding:10px 14px;opacity:0;transform:translateY(10px)}
.hold .t{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.16em;color:var(--steel);font-weight:800;text-transform:uppercase}
.hold .t span{color:#0B8F6F}
.hold .hr{display:flex;justify-content:space-between;font-size:11px;padding:5px 0;border-bottom:1px solid #EEF2FF;font-variant-numeric:tabular-nums}
.hold .hr b{font-family:var(--mono);font-weight:500}
.svc2{position:absolute;left:40px;top:360px;width:240px}
.svc2 .t{font-size:9px;letter-spacing:.12em;color:var(--mintb);font-weight:800;opacity:0;white-space:nowrap}
.svc2 .row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.svc2 .s{font-size:9.5px;font-weight:700;color:#fff;border:1px solid rgba(46,230,192,.6);border-radius:999px;padding:3px 8px;opacity:0;background:rgba(46,230,192,.08)}
.vline{position:absolute;left:0;top:0;width:1000px;height:500px;pointer-events:none}
.vline path{fill:none;stroke:rgba(199,210,230,.25);stroke-width:1.5}
.vline path.hot{stroke:var(--mintb);stroke-width:2;opacity:0;filter:drop-shadow(0 0 6px rgba(46,230,192,.7))}
.am .oc1{animation:oc1 var(--T) infinite}.am .oc2{animation:oc2 var(--T) infinite}.am .oc3{animation:oc3 var(--T) infinite}
.am .o1{animation:o1 var(--T) infinite}.am .o2{animation:o2 var(--T) infinite}.am .o3{animation:o3 var(--T) infinite}
.am .flash{animation:amflash var(--T) infinite}.am .ring{animation:amring var(--T) infinite}
.am .qr1{animation:qr1 var(--T) infinite}.am .qr2{animation:qr2 var(--T) infinite}.am .qr3{animation:qr3 var(--T) infinite}
.am .sb{animation:sb var(--T) infinite}.am .sa{animation:sa var(--T) infinite}
.am .regdot{animation:regdot var(--T) infinite}.am .regp .st{animation:regst var(--T) infinite}.am .hotv{animation:hotv var(--T) infinite}
.am .hold{animation:hold var(--T) infinite}.am .h1{animation:h1 var(--T) infinite}.am .h2{animation:h2 var(--T) infinite}.am .h3{animation:h3 var(--T) infinite}
.am .svc2 .t{animation:amsvc0 var(--T) infinite}.am .s1{animation:amsvc1 var(--T) infinite}.am .s2{animation:amsvc2 var(--T) infinite}.am .s3{animation:amsvc3 var(--T) infinite}.am .s4{animation:amsvc4 var(--T) infinite}
.am .c1{animation:amk1 var(--T) infinite}.am .c2{animation:amk2 var(--T) infinite}.am .c3{animation:amk3 var(--T) infinite}.am .c4{animation:amk4 var(--T) infinite}.am .c5{animation:amk5 var(--T) infinite}
@keyframes oc1{0%,4%{opacity:0}6%,100%{opacity:1}}
@keyframes oc2{0%,7%{opacity:0}9%,100%{opacity:1}}
@keyframes oc3{0%,10%{opacity:0}12%,100%{opacity:1}}
/* three orders: from each distributor, through the ring, into the queue */
@keyframes o1{0%,10%{opacity:0;left:120px;top:145px;transform:scale(.9)}12%{opacity:1;left:120px;top:145px;transform:scale(1)}20%{opacity:1;left:420px;top:233px;transform:scale(.85)}22%{opacity:0;left:500px;top:233px;transform:scale(.3)}23%{opacity:0;left:520px;top:233px}25%{opacity:1;left:600px;top:200px;transform:scale(.8)}30%{opacity:1;left:700px;top:176px;transform:scale(.7)}32%,100%{opacity:0;left:700px;top:176px}}
@keyframes o2{0%,14%{opacity:0;left:120px;top:233px;transform:scale(.9)}16%{opacity:1;left:120px;top:233px;transform:scale(1)}24%{opacity:1;left:420px;top:233px;transform:scale(.85)}26%{opacity:0;left:500px;top:233px;transform:scale(.3)}27%{opacity:0;left:520px;top:233px}29%{opacity:1;left:600px;top:220px;transform:scale(.8)}34%{opacity:1;left:700px;top:206px;transform:scale(.7)}36%,100%{opacity:0;left:700px;top:206px}}
@keyframes o3{0%,18%{opacity:0;left:120px;top:321px;transform:scale(.9)}20%{opacity:1;left:120px;top:321px;transform:scale(1)}28%{opacity:1;left:420px;top:233px;transform:scale(.85)}30%{opacity:0;left:500px;top:233px;transform:scale(.3)}31%{opacity:0;left:520px;top:233px}33%{opacity:1;left:600px;top:240px;transform:scale(.8)}38%{opacity:1;left:700px;top:236px;transform:scale(.7)}40%,100%{opacity:0;left:700px;top:236px}}
@keyframes amflash{0%,20%{opacity:0;transform:translate(-50%,-50%) scale(.2)}22%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}24%{opacity:0;transform:translate(-50%,-50%) scale(2)}26%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}28%{opacity:0;transform:translate(-50%,-50%) scale(2)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}33%,100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}
@keyframes amring{0%,20%{filter:brightness(1)}22%{filter:brightness(1.7)}24%{filter:brightness(1)}26%{filter:brightness(1.7)}28%{filter:brightness(1)}30%{filter:brightness(1.7)}33%,100%{filter:brightness(1)}}
@keyframes qr1{0%,30%{opacity:0}32%,100%{opacity:1}}
@keyframes qr2{0%,34%{opacity:0}36%,100%{opacity:1}}
@keyframes qr3{0%,38%{opacity:0}40%,100%{opacity:1}}
@keyframes sa{0%,45%{opacity:1}48%,100%{opacity:0}}
@keyframes sb{0%,45%{opacity:0}48%,100%{opacity:1}}
@keyframes regdot{0%,50%{opacity:0;top:344px}52%{opacity:1;top:344px}57%{opacity:1;top:376px}59%,100%{opacity:0;top:376px}}
@keyframes hotv{0%,50%{opacity:0}52%,60%{opacity:1}64%,100%{opacity:.35}}
@keyframes regst{0%,58%{opacity:0}60%,100%{opacity:1}}
@keyframes hold{0%,63%{opacity:0;transform:translateY(10px)}66%,100%{opacity:1;transform:translateY(0)}}
@keyframes h1{0%,66%{opacity:0}68%,100%{opacity:1}}
@keyframes h2{0%,69%{opacity:0}71%,100%{opacity:1}}
@keyframes h3{0%,72%{opacity:0}74%,100%{opacity:1}}
@keyframes amsvc0{0%,80%{opacity:0}83%,100%{opacity:1}}
@keyframes amsvc1{0%,82%{opacity:0}85%,100%{opacity:1}}
@keyframes amsvc2{0%,84%{opacity:0}87%,100%{opacity:1}}
@keyframes amsvc3{0%,86%{opacity:0}89%,100%{opacity:1}}
@keyframes amsvc4{0%,88%{opacity:0}91%,100%{opacity:1}}
@keyframes amk1{0%,9%{opacity:0}12%,40%{opacity:1}43%,100%{opacity:0}}
@keyframes amk2{0%,43%{opacity:0}46%,58%{opacity:1}61%,100%{opacity:0}}
@keyframes amk3{0%,61%{opacity:0}64%,79%{opacity:1}82%,100%{opacity:0}}
@keyframes amk4{0%,82%{opacity:0}85%,93%{opacity:1}96%,100%{opacity:0}}
@keyframes amk5{0%,96%{opacity:0}98%,100%{opacity:1}}

/* ---------- issuers scene: a calmer design language ---------- */
.is.stagewrap{aspect-ratio:1000/520;background:radial-gradient(ellipse 50% 60% at 50% 42%,rgba(46,91,255,.20),transparent 70%),#0A1B38}
.is.stagewrap::before{display:none}
.is .stage{height:520px}
.is .g{position:absolute;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(199,210,230,.16);padding:22px 24px;color:#fff}
.is .g .lab{font-size:11px;letter-spacing:.2em;color:var(--mintb);font-weight:700;text-transform:uppercase}
.is .g .big{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:6px;line-height:1.15}
.is .g .sm{font-size:13px;color:var(--ice);margin-top:4px}
.is .g .line{height:1px;background:rgba(199,210,230,.16);margin:16px 0}
.is .g .kv{display:flex;justify-content:space-between;font-size:13px;color:var(--ice);padding:6px 0}
.is .g .kv b{color:#fff;font-weight:600}
.is .ring2{position:absolute;left:440px;top:150px;width:120px;height:120px;border-radius:50%;border:1.5px solid rgba(46,230,192,.9);box-shadow:0 0 40px rgba(46,230,192,.25),inset 0 0 40px rgba(46,91,255,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.is .ring2 small{font-size:9.5px;letter-spacing:.24em;color:var(--mintb);font-weight:700}
.is .ring2 b{font-size:14px;font-weight:800}
.is .path{position:absolute;left:0;top:0;width:1000px;height:520px;pointer-events:none}
.is .path line,.is .path path{stroke:rgba(199,210,230,.2);stroke-width:1.5;fill:none}
.is .hero{position:absolute;left:84px;top:232px;width:212px;height:60px;border-radius:12px;background:linear-gradient(180deg,#17356A,#0B1E3D);border:1px solid rgba(46,230,192,.9);box-shadow:0 12px 40px rgba(46,230,192,.2);padding:10px 14px;opacity:0;color:#fff}
.is .hero .k{font-size:10px;letter-spacing:.18em;color:var(--mintb);font-weight:700}
.is .hero .v{font-size:15px;font-weight:700;margin-top:3px;white-space:nowrap}
.is .flash2{position:absolute;left:500px;top:210px;width:10px;height:10px;border-radius:50%;background:#fff;opacity:0;transform:translate(-50%,-50%);box-shadow:0 0 40px 18px rgba(46,230,192,.6)}
.is .rec{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--mintb);border:1.5px solid var(--mintb);border-radius:6px;padding:5px 10px;opacity:0}
.is .tag{position:absolute;left:322px;top:222px;width:118px;text-align:center;font-size:11px;color:var(--steel);line-height:1.3}
.is .drow{position:absolute;left:0;top:352px;width:1000px;display:flex;justify-content:center;gap:14px}
.is .dp{font-size:13px;font-weight:600;color:#fff;border:1px solid rgba(199,210,230,.25);border-radius:999px;padding:8px 16px;opacity:0;background:rgba(255,255,255,.03)}
.is .field{position:absolute;left:150px;top:452px;width:700px;height:40px;display:grid;grid-template-columns:repeat(28,1fr);gap:8px;align-content:start}
.is .field i{display:block;width:6px;height:6px;border-radius:50%;background:var(--mintb);opacity:0;justify-self:center}
.is .fl{position:absolute;left:0;top:496px;width:1000px;text-align:center;font-size:12px;letter-spacing:.2em;color:var(--mintb);font-weight:700;opacity:0}
.is .cap{position:absolute;left:0;right:0;top:310px;text-align:center;font-size:18px;font-weight:600;color:#fff;pointer-events:none}
.is .cap span{position:absolute;left:0;right:0;opacity:0}
.is .hero{animation:ishero var(--T) infinite}.is .flash2{animation:isflash var(--T) infinite}.is .ring2{animation:isring var(--T) infinite}
.is .rec2{animation:isrec var(--T) infinite}.is .regs .rr.de{animation:ddlit1 var(--T) infinite}
.is .dp:nth-child(1){animation:isdp var(--T) infinite 0s}.is .dp:nth-child(2){animation:isdp var(--T) infinite .35s}.is .dp:nth-child(3){animation:isdp var(--T) infinite .7s}.is .dp:nth-child(4){animation:isdp var(--T) infinite 1.05s}.is .dp:nth-child(5){animation:isdp var(--T) infinite 1.4s}
.is .field i{animation:isdot var(--T) infinite}
.is .fl{animation:isfl var(--T) infinite}
.is .c1{animation:isk1 var(--T) infinite}.is .c2{animation:isk2 var(--T) infinite}.is .c3{animation:isk3 var(--T) infinite}.is .c4{animation:isk4 var(--T) infinite}
@keyframes ishero{0%,6%{opacity:0;left:84px;top:232px;transform:scale(.96)}9%,16%{opacity:1;left:84px;top:232px;transform:scale(1)}26%{opacity:1;left:394px;top:182px;transform:scale(.85)}29%{opacity:0;left:500px;top:182px;transform:scale(.35)}30%{opacity:0;left:520px;top:182px;transform:scale(.35)}32%{opacity:1;left:600px;top:182px;transform:scale(.85)}41%{opacity:1;left:704px;top:176px;transform:scale(.8)}44%,100%{opacity:0;left:704px;top:176px;transform:scale(.8)}}
@keyframes isflash{0%,27%{opacity:0;transform:translate(-50%,-50%) scale(.2)}29%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}34%,100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
@keyframes isring{0%,27%{box-shadow:0 0 40px rgba(46,230,192,.25),inset 0 0 40px rgba(46,91,255,.2)}29%{box-shadow:0 0 70px rgba(46,230,192,.6),inset 0 0 60px rgba(46,91,255,.4)}34%,100%{box-shadow:0 0 40px rgba(46,230,192,.25),inset 0 0 40px rgba(46,91,255,.2)}}
@keyframes isrec{0%,43%{opacity:0}46%,100%{opacity:1}}
@keyframes isdp{0%,50%{opacity:0;transform:translateY(6px)}53%,100%{opacity:1;transform:translateY(0)}}
@keyframes isdot{0%,62%{opacity:0}78%,100%{opacity:.9}}
@keyframes isfl{0%,76%{opacity:0}80%,100%{opacity:1}}
@keyframes isk1{0%,7%{opacity:0}10%,28%{opacity:1}31%,100%{opacity:0}}
@keyframes isk2{0%,31%{opacity:0}34%,48%{opacity:1}51%,100%{opacity:0}}
@keyframes isk3{0%,51%{opacity:0}54%,72%{opacity:1}75%,100%{opacity:0}}
@keyframes isk4{0%,77%{opacity:0}80%,98%{opacity:1}100%{opacity:0}}


/* registers list panel, shared by the calm scenes */
.is .regs{padding:18px 22px}
.is .regs .rr{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--ice);padding:7px 0;border-bottom:1px solid rgba(199,210,230,.12)}
.is .regs .rr:last-child{border-bottom:0}
.is .regs .rr b{color:#fff;font-weight:600}
.is .regs .rr.next{color:var(--steel)}.is .regs .rr.next b{color:var(--steel);font-weight:500}
.is .regs .rr .st{font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--mintb);opacity:0}
.is .regs .rr.lit{background:rgba(46,230,192,.07);margin:0 -10px;padding:7px 10px;border-radius:8px}
/* distributors, calm */
.is .pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.is .pill{font-size:11.5px;font-weight:600;color:var(--ice);border:1px solid rgba(199,210,230,.25);border-radius:999px;padding:4px 10px;transition:all .3s}
.is .pill.on{color:var(--navy);background:var(--mintb);border-color:var(--mintb)}
.is .appcard{position:absolute;left:340px;top:370px;width:320px;border-radius:14px;background:#fff;color:var(--navy);box-shadow:0 20px 60px rgba(0,0,0,.5);padding:14px 18px;opacity:0;transform:translateY(8px)}
.is .appcard .t{font-size:10px;letter-spacing:.18em;color:var(--steel);font-weight:800}
.is .appcard .l{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;margin-top:8px}
.is .appcard .l span{font-size:10px;font-weight:800;color:#0B8F6F;background:#E3FAF3;border-radius:999px;padding:3px 9px;letter-spacing:.06em}
.is .appnote{position:absolute;left:0;width:1000px;top:470px;text-align:center;font-size:12px;letter-spacing:.2em;color:var(--mintb);font-weight:700;opacity:0}
.dd .h1{animation:ddh1 var(--T) infinite}.dd .h2{animation:ddh2 var(--T) infinite}
.dd .flash2{animation:ddflash var(--T) infinite}.dd .ring2{animation:ddring var(--T) infinite}
.dd .lu .st{animation:ddst1 var(--T) infinite}.dd .de .st{animation:ddst2 var(--T) infinite}
.dd .lu{animation:ddlit1 var(--T) infinite}.dd .de{animation:ddlit2 var(--T) infinite}
.dd .p1{animation:ddp1 var(--T) infinite}
.dd .appcard,.dd .appnote{animation:ddapp var(--T) infinite}
.dd .c1{animation:ddk1 var(--T) infinite}.dd .c2{animation:ddk2 var(--T) infinite}.dd .c3{animation:ddk3 var(--T) infinite}.dd .c4{animation:ddk4 var(--T) infinite}.dd .c5{animation:ddk5 var(--T) infinite}
@keyframes ddh1{0%,5%{opacity:0;left:70px;top:150px;transform:scale(.7)}8%,15%{opacity:1;left:84px;top:130px;transform:scale(1)}24%{opacity:1;left:394px;top:166px;transform:scale(.85)}26%{opacity:0;left:500px;top:166px;transform:scale(.35)}27%{opacity:0;left:520px;top:166px;transform:scale(.35)}29%{opacity:1;left:600px;top:166px;transform:scale(.85)}37%{opacity:1;left:704px;top:160px;transform:scale(.8)}40%,100%{opacity:0;left:704px;top:160px;transform:scale(.8)}}
@keyframes ddh2{0%,45%{opacity:0;left:200px;top:150px;transform:scale(.7)}48%,55%{opacity:1;left:110px;top:130px;transform:scale(1)}64%{opacity:1;left:394px;top:166px;transform:scale(.85)}66%{opacity:0;left:500px;top:166px;transform:scale(.35)}67%{opacity:0;left:520px;top:166px;transform:scale(.35)}69%{opacity:1;left:600px;top:166px;transform:scale(.85)}77%{opacity:1;left:704px;top:189px;transform:scale(.8)}80%,100%{opacity:0;left:704px;top:189px;transform:scale(.8)}}
@keyframes ddflash{0%,24%{opacity:0;transform:translate(-50%,-50%) scale(.2)}26%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}31%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}64%{opacity:0;transform:translate(-50%,-50%) scale(.2)}66%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}71%,100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
@keyframes ddring{0%,24%{box-shadow:0 0 40px rgba(46,230,192,.25),inset 0 0 40px rgba(46,91,255,.2)}26%{box-shadow:0 0 70px rgba(46,230,192,.6),inset 0 0 60px rgba(46,91,255,.4)}31%,64%{box-shadow:0 0 40px rgba(46,230,192,.25),inset 0 0 40px rgba(46,91,255,.2)}66%{box-shadow:0 0 70px rgba(46,230,192,.6),inset 0 0 60px rgba(46,91,255,.4)}71%,100%{box-shadow:0 0 40px rgba(46,230,192,.25),inset 0 0 40px rgba(46,91,255,.2)}}
@keyframes ddst1{0%,39%{opacity:0}42%,100%{opacity:1}}
@keyframes ddst2{0%,79%{opacity:0}82%,100%{opacity:1}}
@keyframes ddlit1{0%,39%{background:rgba(46,230,192,0)}42%,100%{background:rgba(46,230,192,.08)}}
@keyframes ddlit2{0%,79%{background:rgba(46,230,192,0)}82%,100%{background:rgba(46,230,192,.08)}}
@keyframes ddp1{0%,5%{color:var(--ice);background:transparent;border-color:rgba(199,210,230,.25)}8%,42%{color:var(--navy);background:var(--mintb);border-color:var(--mintb)}46%,100%{color:var(--ice);background:transparent;border-color:rgba(199,210,230,.25)}}
@keyframes ddp4{0%,45%{color:var(--ice);background:transparent;border-color:rgba(199,210,230,.25)}48%,100%{color:var(--navy);background:var(--mintb);border-color:var(--mintb)}}
@keyframes ddapp{0%,84%{opacity:0;transform:translateY(8px)}88%,100%{opacity:1;transform:translateY(0)}}
@keyframes ddk1{0%,6%{opacity:0}9%,25%{opacity:1}28%,100%{opacity:0}}
@keyframes ddk2{0%,28%{opacity:0}31%,44%{opacity:1}47%,100%{opacity:0}}
@keyframes ddk3{0%,47%{opacity:0}50%,65%{opacity:1}68%,100%{opacity:0}}
@keyframes ddk4{0%,68%{opacity:0}71%,85%{opacity:1}88%,100%{opacity:0}}
@keyframes ddk5{0%,87%{opacity:0}90%,99%{opacity:1}100%{opacity:0}}


/* the shelf: the products a distributor can put in front of clients */
.is .shelf{position:absolute;left:60px;top:262px;width:262px}
.is .shelf .lab{font-size:10px;letter-spacing:.2em;color:var(--mintb);font-weight:700;text-transform:uppercase}
.is .shelf .tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.is .tile{font-size:11.5px;font-weight:600;color:var(--ice);border:1px solid rgba(199,210,230,.18);background:rgba(255,255,255,.03);border-radius:9px;padding:9px 10px;line-height:1.2}
.is .tile.wide{grid-column:1/3}
.dd .t1{animation:ddt1 var(--T) infinite}.dd .t2{animation:ddt2 var(--T) infinite}
@keyframes ddt1{0%,5%{border-color:rgba(199,210,230,.18);color:var(--ice)}8%,42%{border-color:var(--mintb);color:#fff;box-shadow:0 0 18px rgba(46,230,192,.25)}46%,100%{border-color:rgba(199,210,230,.18);color:var(--ice);box-shadow:none}}
@keyframes ddt2{0%,45%{border-color:rgba(199,210,230,.18);color:var(--ice)}48%,100%{border-color:var(--mintb);color:#fff;box-shadow:0 0 18px rgba(46,230,192,.25)}}
.dd .cap{top:350px;font-size:18px}
.dd .appcard{left:340px;top:400px;width:320px}


/* ---------- asset managers, calm: orders arrive, you accept, everyone reads the same record ---------- */
.is .queue{margin-top:12px}
.is .queue .qh{font-size:10px;letter-spacing:.18em;color:var(--mintb);font-weight:700;text-transform:uppercase;margin-bottom:4px}
.is .queue .qr{display:grid;grid-template-columns:1fr auto 66px;gap:8px;align-items:center;font-size:12.5px;color:#fff;padding:5px 0;border-top:1px solid rgba(199,210,230,.12);height:27px;opacity:0;position:relative}
.is .queue .qr span{color:var(--ice);font-size:11.5px}
.is .queue .qr .sa,.is .queue .qr .sb{position:absolute;right:0;top:7px;font-size:9.5px;letter-spacing:.12em;font-weight:800;text-align:right}
.is .queue .qr .sa{color:#F2C879}.is .queue .qr .sb{color:var(--mintb);opacity:0}
.is .from{position:absolute;left:0;top:66px;width:1000px;text-align:center;font-size:11px;letter-spacing:.18em;color:var(--steel);font-weight:700}
.is .from b{color:var(--ice);font-weight:700;margin:0 6px}
.is .ordc{position:absolute;left:500px;top:196px;width:150px;height:30px;border-radius:9px;background:linear-gradient(180deg,#17356A,#0B1E3D);border:1px solid rgba(46,230,192,.9);color:#fff;font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;opacity:0;box-shadow:0 8px 30px rgba(46,230,192,.2);white-space:nowrap;transform:translate(-50%,0)}
.is .ordc i{font-style:normal;color:var(--mintb);font-weight:500}
.is .dot2{position:absolute;left:322px;top:203px;width:14px;height:14px;border-radius:50%;background:var(--mintb);box-shadow:0 0 18px 6px rgba(46,230,192,.5);opacity:0;transform:translate(-50%,0)}
.is .readp{position:absolute;left:320px;top:372px;width:360px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(46,230,192,.35);padding:14px 18px;color:#fff;opacity:0}
.is .readp .lab{font-size:10px;letter-spacing:.18em;color:var(--mintb);font-weight:700;text-transform:uppercase}
.is .readp .rw{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-top:1px solid rgba(199,210,230,.12);opacity:0}
.is .readp .rw:first-of-type{border-top:0}
.is .readp .rw span{color:var(--ice)}
.is .readp .rw b{font-weight:600;color:#fff}
.is .readline2{position:absolute;left:0;top:0;width:1000px;height:520px;pointer-events:none}
.is .readline2 path{fill:none;stroke:var(--mintb);stroke-width:1.5;stroke-dasharray:5 6;opacity:0}
.am2 .o1{animation:amo1 var(--T) infinite}.am2 .o2{animation:amo2 var(--T) infinite}.am2 .o3{animation:amo3 var(--T) infinite}
.am2 .flash2{animation:am2flash var(--T) infinite}.am2 .ring2{animation:am2ring var(--T) infinite}
.am2 .qr1{animation:amq1 var(--T) infinite}.am2 .qr2{animation:amq2 var(--T) infinite}.am2 .qr3{animation:amq3 var(--T) infinite}
.am2 .sa{animation:am2sa var(--T) infinite}.am2 .sb{animation:am2sb var(--T) infinite}
.am2 .dot2{animation:am2dot var(--T) infinite}.am2 .lu .st{animation:am2st var(--T) infinite}.am2 .lu{animation:am2lit var(--T) infinite}
.am2 .readline2 path{animation:am2rl var(--T) infinite}
.am2 .readp{animation:am2rp var(--T) infinite}.am2 .r1{animation:am2r1 var(--T) infinite}.am2 .r2{animation:am2r2 var(--T) infinite}.am2 .r3{animation:am2r3 var(--T) infinite}.am2 .r4{animation:am2r4 var(--T) infinite}
.am2 .c1{animation:am2k1 var(--T) infinite}.am2 .c2{animation:am2k2 var(--T) infinite}.am2 .c3{animation:am2k3 var(--T) infinite}.am2 .c4{animation:am2k4 var(--T) infinite}.am2 .c5{animation:am2k5 var(--T) infinite}
@keyframes amo1{0%,8%{opacity:0;left:290px;top:380px;transform:translate(-50%,0) scale(.7)}10%{opacity:1;left:290px;top:370px;transform:translate(-50%,0) scale(1)}15%{opacity:1;left:500px;top:250px;transform:translate(-50%,0) scale(.8)}16%{opacity:0;left:500px;top:210px;transform:translate(-50%,0) scale(.3)}17%{opacity:0;left:430px;top:196px;transform:translate(-50%,0) scale(.6)}18%{opacity:1;left:420px;top:196px;transform:translate(-50%,0) scale(.9)}22%{opacity:1;left:200px;top:196px;transform:translate(-50%,0) scale(.9)}25%,100%{opacity:0;left:200px;top:196px;transform:translate(-50%,0) scale(.9)}}
@keyframes amo2{0%,16%{opacity:0;left:430px;top:380px;transform:translate(-50%,0) scale(.7)}18%{opacity:1;left:430px;top:370px;transform:translate(-50%,0) scale(1)}23%{opacity:1;left:500px;top:250px;transform:translate(-50%,0) scale(.8)}24%{opacity:0;left:500px;top:210px;transform:translate(-50%,0) scale(.3)}25%{opacity:0;left:430px;top:222px;transform:translate(-50%,0) scale(.6)}26%{opacity:1;left:420px;top:222px;transform:translate(-50%,0) scale(.9)}30%{opacity:1;left:200px;top:222px;transform:translate(-50%,0) scale(.9)}33%,100%{opacity:0;left:200px;top:222px;transform:translate(-50%,0) scale(.9)}}
@keyframes amo3{0%,24%{opacity:0;left:570px;top:380px;transform:translate(-50%,0) scale(.7)}26%{opacity:1;left:570px;top:370px;transform:translate(-50%,0) scale(1)}31%{opacity:1;left:500px;top:250px;transform:translate(-50%,0) scale(.8)}32%{opacity:0;left:500px;top:210px;transform:translate(-50%,0) scale(.3)}33%{opacity:0;left:430px;top:248px;transform:translate(-50%,0) scale(.6)}34%{opacity:1;left:420px;top:248px;transform:translate(-50%,0) scale(.9)}38%{opacity:1;left:200px;top:248px;transform:translate(-50%,0) scale(.9)}41%,100%{opacity:0;left:200px;top:248px;transform:translate(-50%,0) scale(.9)}}
@keyframes am2flash{0%,14%{opacity:0;transform:translate(-50%,-50%) scale(.2)}16%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}19%{opacity:0;transform:translate(-50%,-50%) scale(2)}22%{opacity:0;transform:translate(-50%,-50%) scale(.2)}24%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}27%{opacity:0;transform:translate(-50%,-50%) scale(2)}30%{opacity:0;transform:translate(-50%,-50%) scale(.2)}32%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}35%,100%{opacity:0;transform:translate(-50%,-50%) scale(2)}}
@keyframes am2ring{0%,14%{box-shadow:0 0 40px rgba(46,230,192,.25),inset 0 0 40px rgba(46,91,255,.2)}16%{box-shadow:0 0 70px rgba(46,230,192,.6),inset 0 0 60px rgba(46,91,255,.4)}19%,22%{box-shadow:0 0 40px rgba(46,230,192,.25),inset 0 0 40px rgba(46,91,255,.2)}24%{box-shadow:0 0 70px rgba(46,230,192,.6),inset 0 0 60px rgba(46,91,255,.4)}27%,30%{box-shadow:0 0 40px rgba(46,230,192,.25),inset 0 0 40px rgba(46,91,255,.2)}32%{box-shadow:0 0 70px rgba(46,230,192,.6),inset 0 0 60px rgba(46,91,255,.4)}35%,100%{box-shadow:0 0 40px rgba(46,230,192,.25),inset 0 0 40px rgba(46,91,255,.2)}}
@keyframes amq1{0%,23%{opacity:0}25%,100%{opacity:1}}
@keyframes amq2{0%,31%{opacity:0}33%,100%{opacity:1}}
@keyframes amq3{0%,39%{opacity:0}41%,100%{opacity:1}}
@keyframes am2sa{0%,42%{opacity:1}45%,100%{opacity:0}}
@keyframes am2sb{0%,42%{opacity:0}45%,100%{opacity:1}}
@keyframes am2dot{0%,47%{opacity:0;left:322px}49%{opacity:1;left:322px}53%{opacity:1;left:440px}54%{opacity:0;left:440px}55%{opacity:0;left:560px}56%{opacity:1;left:560px}60%{opacity:1;left:678px}62%,100%{opacity:0;left:678px}}
@keyframes am2st{0%,60%{opacity:0}63%,100%{opacity:1}}
@keyframes am2lit{0%,60%{background:rgba(46,230,192,0)}63%,100%{background:rgba(46,230,192,.08)}}
@keyframes am2rl{0%,64%{opacity:0}68%,100%{opacity:.9}}
@keyframes am2rp{0%,66%{opacity:0}70%,100%{opacity:1}}
@keyframes am2r1{0%,70%{opacity:0}73%,100%{opacity:1}}
@keyframes am2r2{0%,73%{opacity:0}76%,100%{opacity:1}}
@keyframes am2r3{0%,76%{opacity:0}79%,100%{opacity:1}}
@keyframes am2r4{0%,79%{opacity:0}82%,100%{opacity:1}}
@keyframes am2k1{0%,5%{opacity:0}8%,36%{opacity:1}39%,100%{opacity:0}}
@keyframes am2k2{0%,39%{opacity:0}42%,64%{opacity:1}67%,100%{opacity:0}}
@keyframes am2k3{0%,67%{opacity:0}70%,88%{opacity:1}91%,100%{opacity:0}}
@keyframes am2k4{0%,91%{opacity:0}94%,99%{opacity:1}100%{opacity:0}}
@keyframes am2k5{0%,89%{opacity:0}92%,99%{opacity:1}100%{opacity:0}}


/* the client's phone: where digital distribution happens */
.is .phone2{position:absolute;left:60px;top:262px;width:160px;height:160px;border-radius:22px;border:1.5px solid rgba(199,210,230,.35);background:rgba(255,255,255,.04);padding:26px 10px 10px;color:#fff}
.is .phone2::before{content:"";position:absolute;left:50%;top:9px;width:40px;height:5px;border-radius:99px;background:rgba(199,210,230,.35);transform:translateX(-50%)}
.is .phone2 .pl{font-size:9px;letter-spacing:.18em;color:var(--mintb);font-weight:700;margin-bottom:8px}
.is .phone2 .pr{border:1px solid rgba(199,210,230,.18);border-radius:9px;padding:8px 10px;margin-bottom:8px;font-size:11px;line-height:1.3;position:relative;height:66px;white-space:nowrap;color:var(--ice)}
.is .phone2 .pr b{display:block;color:#fff;font-weight:600}
.is .phone2 .pr .buy,.is .phone2 .pr .held{position:absolute;left:9px;bottom:7px;font-size:8.5px;font-weight:800;letter-spacing:.1em;border-radius:999px;padding:2px 7px}
.is .phone2 .pr .buy{background:var(--mintb);color:var(--navy)}
.is .phone2 .pr .held{background:rgba(46,230,192,.15);color:var(--mintb);opacity:0}
.is .phone2 .pnote{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:8.5px;color:var(--steel);letter-spacing:.1em}
.dd .b1{animation:ddb1 var(--T) infinite}.dd .b2{animation:ddb2 var(--T) infinite}
.dd .held1{animation:ddheld1 var(--T) infinite}.dd .held2{animation:ddheld2 var(--T) infinite}
@keyframes ddb1{0%,6%{transform:scale(1)}8%{transform:scale(.88)}10%,50%{transform:scale(1)}52%,100%{opacity:0}}
@keyframes ddb2{0%,46%{transform:scale(1)}48%{transform:scale(.88)}50%,80%{transform:scale(1)}82%,100%{opacity:0}}
@keyframes ddheld1{0%,51%{opacity:0}54%,100%{opacity:1}}
@keyframes ddheld2{0%,81%{opacity:0}84%,100%{opacity:1}}
.dd .cap{top:460px}


/* issuers payoff: the bond in the apps of every distributor */
.is .mps{position:absolute;left:0;top:344px;width:1000px;display:flex;justify-content:center;gap:16px}
.is .mp{width:124px;height:92px;border-radius:14px;border:1.5px solid rgba(199,210,230,.35);background:rgba(255,255,255,.04);padding:18px 9px 8px;position:relative;opacity:0;transform:translateY(8px)}
.is .mp::before{content:"";position:absolute;left:50%;top:6px;width:28px;height:4px;border-radius:99px;background:rgba(199,210,230,.35);transform:translateX(-50%)}
.is .mp .an{font-size:8.5px;letter-spacing:.14em;color:var(--mintb);font-weight:700}
.is .mp .bd{margin-top:5px;border:1px solid rgba(199,210,230,.18);border-radius:8px;padding:5px 7px;font-size:10px;color:#fff;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.is .mp .bd i{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.1em;background:var(--mintb);color:var(--navy);border-radius:999px;padding:2px 6px}
.is .mp:nth-child(1){animation:isdp var(--T) infinite 0s}.is .mp:nth-child(2){animation:isdp var(--T) infinite .3s}.is .mp:nth-child(3){animation:isdp var(--T) infinite .6s}.is .mp:nth-child(4){animation:isdp var(--T) infinite .9s}


/* asset managers: the orders come from the distributors' apps */
.am2 .mps{top:352px}
.am2 .mp:nth-child(1),.am2 .mp:nth-child(2),.am2 .mp:nth-child(3),.am2 .mp:nth-child(4){opacity:0;animation:am2mp var(--T) infinite;animation-delay:0s}
.am2 .mp .bd i{animation:none}
.am2 .mp:nth-child(1) .bd i{animation:am2tap1 var(--T) infinite}.am2 .mp:nth-child(2) .bd i{animation:am2tap2 var(--T) infinite}.am2 .mp:nth-child(3) .bd i{animation:am2tap3 var(--T) infinite}
.am2 .reads{position:absolute;left:0;top:466px;width:1000px;text-align:center;font-size:12px;color:var(--ice);opacity:0}
.am2 .reads b{font-size:10px;letter-spacing:.16em;color:var(--mintb);font-weight:700;margin-right:10px}
.am2 .reads span{display:inline-block;border:1px solid rgba(46,230,192,.5);border-radius:999px;padding:4px 10px;margin:0 3px;font-size:11.5px;font-weight:600;color:#fff}
.am2 .reads{animation:am2rp var(--T) infinite}
@keyframes am2mp{0%,2%{opacity:0;transform:translateY(8px)}5%,100%{opacity:1;transform:translateY(0)}}
@keyframes am2tap1{0%,7%{transform:scale(1)}9%{transform:scale(.85)}11%,100%{transform:scale(1)}}
@keyframes am2tap2{0%,15%{transform:scale(1)}17%{transform:scale(.85)}19%,100%{transform:scale(1)}}
@keyframes am2tap3{0%,23%{transform:scale(1)}25%{transform:scale(.85)}27%,100%{transform:scale(1)}}


/* ---------- digital registers: the mirror image ---------- */
.rg .heroR{position:absolute;left:702px;top:244px;width:212px;height:60px;border-radius:12px;background:linear-gradient(180deg,#17356A,#0B1E3D);border:1px solid rgba(46,230,192,.9);box-shadow:0 12px 40px rgba(46,230,192,.2);padding:10px 14px;opacity:0;color:#fff}
.rg .heroR .k{font-size:10px;letter-spacing:.18em;color:var(--mintb);font-weight:700}
.rg .heroR .v{font-size:15px;font-weight:700;margin-top:3px;white-space:nowrap}
.rg .dl{position:absolute;left:440px;top:203px;width:14px;height:14px;border-radius:50%;background:var(--mintb);box-shadow:0 0 18px 6px rgba(46,230,192,.5);opacity:0;transform:translate(-50%,0)}
.rg .heroR{animation:rghero var(--T) infinite}
.rg .flash2{animation:rgflash var(--T) infinite}.rg .ring2{animation:rgring var(--T) infinite}
.rg .rr.d1 .st{animation:rgst1 var(--T) infinite}.rg .rr.d2 .st{animation:rgst2 var(--T) infinite}.rg .rr.d3 .st{animation:rgst3 var(--T) infinite}.rg .rr.d4 .st{animation:rgst4 var(--T) infinite}
.rg .rr.d1{animation:rglit1 var(--T) infinite}.rg .rr.d2{animation:rglit2 var(--T) infinite}.rg .rr.d3{animation:rglit3 var(--T) infinite}.rg .rr.d4{animation:rglit4 var(--T) infinite}
.rg .dl.k1{animation:rgd1 var(--T) infinite}.rg .dl.k2{animation:rgd2 var(--T) infinite}.rg .dl.k3{animation:rgd3 var(--T) infinite}.rg .dl.k4{animation:rgd4 var(--T) infinite}
.rg .mps{top:352px}
.rg .mp:nth-child(1){animation:rgmp var(--T) infinite 0s}.rg .mp:nth-child(2){animation:rgmp var(--T) infinite .3s}.rg .mp:nth-child(3){animation:rgmp var(--T) infinite .6s}.rg .mp:nth-child(4){animation:rgmp var(--T) infinite .9s}
.rg .fl{top:468px;animation:rgfl var(--T) infinite}
.rg .c1{animation:rgk1 var(--T) infinite}.rg .c2{animation:rgk2 var(--T) infinite}.rg .c3{animation:rgk3 var(--T) infinite}.rg .c4{animation:rgk4 var(--T) infinite}
@keyframes rghero{0%,5%{opacity:0;left:702px;top:244px;transform:scale(.96)}8%,14%{opacity:1;left:702px;top:244px;transform:scale(1)}24%{opacity:1;left:600px;top:182px;transform:scale(.85)}27%{opacity:0;left:500px;top:182px;transform:scale(.3)}28%,100%{opacity:0;left:500px;top:182px;transform:scale(.3)}}
@keyframes rgflash{0%,25%{opacity:0;transform:translate(-50%,-50%) scale(.2)}27%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}32%,100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
@keyframes rgring{0%,25%{box-shadow:0 0 40px rgba(46,230,192,.25),inset 0 0 40px rgba(46,91,255,.2)}27%{box-shadow:0 0 70px rgba(46,230,192,.6),inset 0 0 60px rgba(46,91,255,.4)}32%,100%{box-shadow:0 0 40px rgba(46,230,192,.25),inset 0 0 40px rgba(46,91,255,.2)}}
@keyframes rgd1{0%,32%{opacity:0;left:440px;top:203px}34%{opacity:1;left:440px;top:203px}40%{opacity:1;left:322px;top:131px}42%,100%{opacity:0;left:322px;top:131px}}
@keyframes rgd2{0%,40%{opacity:0;left:440px;top:203px}42%{opacity:1;left:440px;top:203px}48%{opacity:1;left:322px;top:165px}50%,100%{opacity:0;left:322px;top:165px}}
@keyframes rgd3{0%,48%{opacity:0;left:440px;top:203px}50%{opacity:1;left:440px;top:203px}56%{opacity:1;left:322px;top:199px}58%,100%{opacity:0;left:322px;top:199px}}
@keyframes rgd4{0%,56%{opacity:0;left:440px;top:203px}58%{opacity:1;left:440px;top:203px}64%{opacity:1;left:322px;top:233px}66%,100%{opacity:0;left:322px;top:233px}}
@keyframes rgst1{0%,40%{opacity:0}42%,100%{opacity:1}}@keyframes rgst2{0%,48%{opacity:0}50%,100%{opacity:1}}@keyframes rgst3{0%,56%{opacity:0}58%,100%{opacity:1}}@keyframes rgst4{0%,64%{opacity:0}66%,100%{opacity:1}}
@keyframes rglit1{0%,40%{background:rgba(46,230,192,0)}42%,100%{background:rgba(46,230,192,.08)}}
@keyframes rglit2{0%,48%{background:rgba(46,230,192,0)}50%,100%{background:rgba(46,230,192,.08)}}
@keyframes rglit3{0%,56%{background:rgba(46,230,192,0)}58%,100%{background:rgba(46,230,192,.08)}}
@keyframes rglit4{0%,64%{background:rgba(46,230,192,0)}66%,100%{background:rgba(46,230,192,.08)}}
@keyframes rgmp{0%,68%{opacity:0;transform:translateY(8px)}71%,100%{opacity:1;transform:translateY(0)}}
@keyframes rgfl{0%,76%{opacity:0}80%,100%{opacity:1}}
@keyframes rgk1{0%,6%{opacity:0}9%,29%{opacity:1}32%,100%{opacity:0}}
@keyframes rgk2{0%,32%{opacity:0}35%,64%{opacity:1}67%,100%{opacity:0}}
@keyframes rgk3{0%,67%{opacity:0}70%,84%{opacity:1}87%,100%{opacity:0}}
@keyframes rgk4{0%,87%{opacity:0}90%,99%{opacity:1}100%{opacity:0}}


/* distributors: four apps, four kinds of client, different products in each */
.dd .mps{top:346px}
.dd .mp{height:104px;width:150px;padding:18px 9px 6px}
.dd .mp .an{font-size:8.5px}
.dd .mp .bd{margin-top:4px;font-size:10px;padding:4px 7px;white-space:nowrap}
.dd .mp .bd i{font-size:7.5px;padding:2px 5px}
.dd .mp .bd i.held{background:rgba(46,230,192,.15);color:var(--mintb)}
.dd .mp:nth-child(1),.dd .mp:nth-child(2),.dd .mp:nth-child(3),.dd .mp:nth-child(4){opacity:1;transform:none;animation:none}
.dd .bb1{animation:ddbb1 var(--T) infinite}.dd .bb2{animation:ddbb2 var(--T) infinite}
@keyframes ddbb1{0%,6%{background:var(--mintb);color:var(--navy)}8%{transform:scale(.85)}10%,40%{transform:scale(1);background:var(--mintb);color:var(--navy)}43%,100%{background:rgba(46,230,192,.15);color:var(--mintb)}}
@keyframes ddbb2{0%,46%{background:var(--mintb);color:var(--navy)}48%{transform:scale(.85)}50%,80%{transform:scale(1);background:var(--mintb);color:var(--navy)}83%,100%{background:rgba(46,230,192,.15);color:var(--mintb)}}
.dd .ring2{top:134px}.dd .flash2{top:194px}
.dd .cap{top:326px;font-size:17px;line-height:1.3}
.dd .p4{animation:ddp4 var(--T) infinite}


.can.opp div{padding:16px 18px}
.can.opp b{font-size:16px;letter-spacing:-.01em}
.can.opp code{font-family:var(--font);font-size:12.5px;color:var(--ice);letter-spacing:0;margin-top:5px}

.dd .mps{top:366px}
.dd .field{top:500px;height:30px;left:150px;width:700px;grid-template-columns:repeat(56,1fr);gap:6px}
.dd .field i{width:4px;height:4px}
.dd .field i{animation:dddot var(--T) infinite}
.dd .fl{top:548px;animation:ddfl var(--T) infinite;font-size:11px}
.dd.stagewrap{aspect-ratio:1000/580}.dd .stage{height:580px}
@keyframes dddot{0%,80%{opacity:.18}90%,100%{opacity:.95}}
@keyframes ddfl{0%,82%{opacity:0}88%,100%{opacity:1}}

/* under the diagram: one paragraph, four bullets, then the CTA */
.sum{display:grid;grid-template-columns:1fr 1fr;gap:28px 48px;align-items:start;padding:6px 4px}
.sum p{font-size:17px;line-height:1.5;color:#fff;max-width:520px;text-wrap:balance}
.sum ul{list-style:none;display:grid;gap:10px}
.sum li{position:relative;padding-left:22px;font-size:15px;line-height:1.45;color:var(--ice)}
.sum li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--mintb)}
@media (max-width:820px){.sum{grid-template-columns:1fr}}

/* the order book fills as the clients buy; confirmations come back */
.dd .queue .qr{grid-template-columns:auto 1fr 40px;gap:8px}
.dd .queue .qr span{white-space:nowrap;font-size:11px}
.dd .queue .qr b{font-size:11.5px}
.dd .ob1{animation:ddob1 var(--T) infinite}.dd .ob2{animation:ddob2 var(--T) infinite}
.dd .ob1 .sa{animation:ddsa1 var(--T) infinite}.dd .ob1 .sb{animation:ddsb1 var(--T) infinite}
.dd .ob2 .sa{animation:ddsa2 var(--T) infinite}.dd .ob2 .sb{animation:ddsb2 var(--T) infinite}
.dd .dot2{top:187px}
.dd .ret1{animation:ddret1 var(--T) infinite}.dd .ret2{animation:ddret2 var(--T) infinite}
@keyframes ddob1{0%,15%{opacity:0}18%,100%{opacity:1}}
@keyframes ddob2{0%,55%{opacity:0}58%,100%{opacity:1}}
@keyframes ddsa1{0%,49%{opacity:1}52%,100%{opacity:0}}@keyframes ddsb1{0%,49%{opacity:0}52%,100%{opacity:1}}
@keyframes ddsa2{0%,89%{opacity:1}92%,100%{opacity:0}}@keyframes ddsb2{0%,89%{opacity:0}92%,100%{opacity:1}}
@keyframes ddret1{0%,41%{opacity:0;left:678px}43%{opacity:1;left:678px}46%{opacity:1;left:560px}47%{opacity:0;left:560px}48%{opacity:0;left:440px}49%{opacity:1;left:440px}51%{opacity:1;left:322px}53%,100%{opacity:0;left:322px}}
@keyframes ddret2{0%,81%{opacity:0;left:678px}83%{opacity:1;left:678px}86%{opacity:1;left:560px}87%{opacity:0;left:560px}88%{opacity:0;left:440px}89%{opacity:1;left:440px}91%{opacity:1;left:322px}93%,100%{opacity:0;left:322px}}

/* distributors: the four apps ARE the distributor, on the left */
.dd .mps{top:80px;left:56px;width:268px;display:grid;grid-template-columns:1fr 1fr;gap:8px;justify-content:start}
.dd .mp{width:130px;height:108px;padding:18px 8px 6px}
.dd .mp .an{font-size:8px}
.dd .mp .bd{font-size:9.5px;padding:4px 7px;min-height:22px}
.dd .mp .bd i{font-size:7px;padding:2px 4px}
.dd .cap{top:440px}
.dd .links line{stroke:rgba(46,230,192,.45);stroke-width:1.5}
.dd .field{top:326px;left:56px;width:268px;height:40px;grid-template-columns:repeat(24,1fr);gap:5px}
.dd .fl{top:378px;left:56px;width:268px;text-align:left;letter-spacing:.14em;font-size:9.5px;line-height:1.5}
.dd.stagewrap{aspect-ratio:1000/520}.dd .stage{height:520px}
.dd .dot2{display:none}
/* the call to action, one per card */
.cta{display:grid;grid-template-columns:1.4fr auto;gap:24px;align-items:center;border-radius:16px;padding:26px 28px;background:linear-gradient(135deg,rgba(46,91,255,.22),rgba(46,230,192,.10));border:1px solid rgba(46,230,192,.35)}
.cta h3{font-size:clamp(18px,2.2vw,24px);font-weight:800;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.cta p{font-size:14px;color:var(--ice);margin-top:6px;line-height:1.45}
.cta .btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.btn1,.btn2{display:inline-block;font-weight:700;font-size:14px;border-radius:999px;padding:12px 20px;text-decoration:none;white-space:nowrap}
.btn1{background:var(--mintb);color:var(--navy)}
.btn1:hover{background:#5CF0D2}
.btn2{color:#fff;border:1px solid rgba(199,210,230,.4)}
.btn2:hover{border-color:#fff}
@media (max-width:820px){.cta{grid-template-columns:1fr}.cta .btns{justify-content:flex-start}}

@media (max-width:820px){.tabs,.can{grid-template-columns:1fr 1fr}.facts{grid-template-columns:1fr}}


/* white section between the hero and the tabs */
.intro{background:#F5F7FC;color:var(--navy)}
.intro .in{max-width:1160px;margin:0 auto;padding:96px 24px 90px}
.intro .eyebrow{color:var(--blue)}
.intro h2{color:var(--navy)}
.intro h2 span{color:var(--blue)}
.intro .lead{color:var(--slate);max-width:760px}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.four a{display:block;text-decoration:none;color:var(--navy);background:#fff;border:1px solid #E1E7F2;border-radius:16px;padding:22px 22px 20px;box-shadow:0 6px 24px rgba(11,30,61,.06);transition:transform .2s,box-shadow .2s}
.four a:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(11,30,61,.12)}
.four small{display:block;font-size:11px;letter-spacing:.18em;font-weight:700;color:var(--blue);text-transform:uppercase}
.four b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:8px;line-height:1.2}
.four p{font-size:13.5px;color:var(--slate);margin-top:8px;line-height:1.45}
.four i{display:block;font-style:normal;font-size:13px;font-weight:700;color:var(--blue);margin-top:14px}
.intro .never{margin-top:40px;font-size:15px;color:var(--slate);border-top:1px solid #E1E7F2;padding-top:22px}
.intro .never b{color:var(--navy);font-weight:700}
@media (max-width:820px){.four{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.four{grid-template-columns:1fr}}

/* ---------- page ---------- */
html{scroll-behavior:smooth}
body{background:var(--navy)}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;backdrop-filter:blur(10px);background:rgba(11,30,61,.97);border-bottom:1px solid rgba(199,210,230,.14)}
.nav .in{max-width:1160px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:26px}
.nav .wm{font-size:19px;font-weight:800;letter-spacing:-.03em;color:#fff}
.nav a{color:var(--ice);text-decoration:none;font-size:14px;font-weight:600}
.nav a:hover{color:#fff}
.nav .sp{flex:1}
.nav .go{background:var(--mintb);color:var(--navy);border-radius:999px;padding:9px 16px}
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#0A1B38 0%,#10254D 60%,#0B1E3D 100%)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 80% at 24% 45%,rgba(11,30,61,.92) 0%,rgba(11,30,61,.55) 45%,rgba(11,30,61,0) 75%)}
.hero .in{position:relative;z-index:2;max-width:1160px;margin:0 auto;padding:110px 24px 120px}
.hero h1{font-size:clamp(40px,6vw,76px);font-weight:800;letter-spacing:-.04em;line-height:1;text-wrap:balance;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--mintb)}
.hero .heroline{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:17px;font-weight:600;color:var(--mintb);letter-spacing:-.005em}
.hero .heroline i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--mintb);box-shadow:0 0 12px var(--mintb)}
@media (max-width:600px){.hero .heroline{font-size:15px;align-items:flex-start}.hero .heroline i{margin-top:6px}}
.hero .sub{margin-top:18px;max-width:56ch;font-size:19px;line-height:1.5;color:var(--ice)}
.hero .sub b{color:#fff;font-weight:600}
.hero .btns{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero .kick{font-size:12px;letter-spacing:.2em;font-weight:700;color:var(--mintb);text-transform:uppercase;margin-bottom:22px}
/* why now */
.why{background:#081733;border-top:1px solid rgba(199,210,230,.1)}
.why .in{max-width:1160px;margin:0 auto;padding:96px 24px 100px}
.tl{position:relative;margin:56px 0 26px;padding:0 20px}
.tl .line{position:absolute;left:20px;right:20px;top:52px;height:1px;background:rgba(199,210,230,.25)}
.tl .items{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;position:relative}
.tl .it{text-align:center}
.tl .it b{display:block;font-size:15px;font-weight:700;color:#fff;height:44px;display:flex;align-items:flex-end;justify-content:center;text-wrap:balance;line-height:1.15}
.tl .it i{display:block;width:12px;height:12px;border-radius:50%;background:var(--blue);margin:10px auto 8px;border:2px solid #081733;box-shadow:0 0 0 1px rgba(199,210,230,.3)}
.tl .it.eu i{background:var(--mintb)}
.tl .it small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--blue)}
.tl .it.eu small{color:var(--mintb)}
.tl .grp{display:grid;grid-template-columns:5fr 2fr;gap:6px;margin-top:18px}
.tl .grp span{text-align:center;font-size:10px;letter-spacing:.2em;color:var(--steel);font-weight:700}
.why .big{font-size:clamp(24px,3.2vw,36px);font-weight:800;letter-spacing:-.02em;margin-top:40px}
.why .after{font-size:16px;color:var(--ice);margin-top:8px;max-width:70ch;line-height:1.5}
.why .after b{color:var(--mintb);font-weight:600}
.src{margin-top:8px;margin-bottom:0;font-size:12px;color:var(--steel);line-height:1.8}
.src a{color:var(--steel);text-decoration:underline;text-underline-offset:3px}
.src a:hover{color:#fff}
/* light half placeholder */
.soonwrap{background:#F5F7FC;color:var(--navy)}
.soonwrap .in{max-width:1160px;margin:0 auto;padding:80px 24px}
.soonwrap h2{color:var(--navy)}
.soonwrap .sm{color:var(--slate);font-size:15px;margin-top:8px}
.foot{background:#0A1B38;color:var(--steel);font-size:12.5px}
.foot .in{max-width:1160px;margin:0 auto;padding:44px 24px 34px;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px 40px}
.foot .fcol{display:grid;gap:9px;align-content:start;line-height:1.5}
.foot .fcol b{color:#fff;font-size:13.5px;font-weight:700}
.foot .fcopy{grid-column:1/-1;padding-top:22px;border-top:1px solid rgba(199,210,230,.12);font-size:12px}
@media (max-width:820px){.foot .in{grid-template-columns:1fr;gap:22px}}
@media (max-width:820px){.tl .items{grid-template-columns:repeat(4,1fr);row-gap:22px}.tl .line,.tl .grp{display:none}.nav a.hide{display:none}}
/* why now, in white, right under the hero */
.why{background:#F5F7FC;color:var(--navy);border-top:0}
.why .eyebrow{color:var(--blue)}
.why h2{color:var(--navy)}.why h2 span{color:var(--blue)}
.why .lead{color:var(--slate)}
.tl .line{background:#D6DEEA}
.tl .it b{color:var(--navy)}
.tl .it i{border-color:#F5F7FC;box-shadow:0 0 0 1px #D6DEEA}
.tl .it.eu i{background:var(--mint)}
.tl .it.eu small{color:#0B8F6F}
.tl .grp span{color:var(--steel)}
.why .big{color:var(--navy)}
.why .after{color:var(--slate)}.why .after b{color:var(--blue)}
.src,.src a{color:var(--steel)}.src a:hover{color:var(--navy)}
.seats{margin-top:56px;padding-top:26px;border-top:1px solid #E1E7F2;display:flex;flex-wrap:wrap;gap:12px 36px;align-items:center;font-size:13px;color:var(--slate)}
.seats b{color:var(--navy);font-weight:700}
.seats .k{font-size:10.5px;letter-spacing:.18em;font-weight:700;color:var(--steel);text-transform:uppercase;margin-right:8px}

/* DLTBridge, introduced once, before the four sides */
.prod{margin:34px 0 10px;border-radius:18px;border:1px solid rgba(46,230,192,.3);background:linear-gradient(135deg,rgba(46,91,255,.16),rgba(46,230,192,.06));padding:28px 30px;display:grid;grid-template-columns:1.1fr 2fr;gap:28px;align-items:center}
.prod .nm small{display:block;font-size:11px;letter-spacing:.22em;color:var(--mintb);font-weight:700}
.prod .nm b{display:block;font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin-top:8px}
.prod .nm p{font-size:14.5px;color:var(--ice);margin-top:10px;line-height:1.5}
.prod .three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prod .three div{border-left:2px solid rgba(46,230,192,.5);padding-left:14px}
.prod .three b{display:block;font-size:15px;font-weight:700;color:#fff}
.prod .three span{display:block;font-size:13px;color:var(--ice);margin-top:5px;line-height:1.45}
@media (max-width:820px){.prod{grid-template-columns:1fr}.prod .three{grid-template-columns:1fr}}

.why .prod{background:#fff;border-color:#E1E7F2;box-shadow:0 10px 36px rgba(11,30,61,.08);margin-top:30px}
.why .prod .nm small{color:var(--blue)}
.why .prod .nm b{color:var(--navy)}
.why .prod .nm p{color:var(--slate)}
.why .prod .three div{border-left-color:var(--blue)}
.why .prod .three b{color:var(--navy)}
.why .prod .three span{color:var(--slate)}

/* the four cards: closed by default, each with its own accent */
.tabs{grid-template-columns:repeat(4,1fr);gap:14px;margin:36px 0 0}
.tab{padding:22px 20px 18px;border-radius:16px;position:relative;overflow:hidden;min-height:170px;display:flex;flex-direction:column}
.tab::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--acc)}
.tab b{font-size:17px}
.tab small{font-size:12px;margin-top:4px}
.tab .op{font-size:14.5px;font-weight:600;color:#fff;margin-top:14px;line-height:1.35;flex:1}
.tab .more{font-size:13px;font-weight:700;color:var(--acc);margin-top:14px}
.tab[aria-selected="true"]{border-color:var(--acc);background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--acc) inset}
.tab[aria-selected="true"] .more::after{content:" · close"}
.tab.t-dist{--acc:#2EE6C0}.tab.t-am{--acc:#6F8DFF}.tab.t-iss{--acc:#F0B458}.tab.t-reg{--acc:#C7D2E6}
.panel{margin-top:26px;padding-top:26px;border-top:1px solid rgba(199,210,230,.12)}
@media (max-width:820px){.tabs{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.tabs{grid-template-columns:1fr}}

/* the map, animated: everyone on the left, every register on the right, one ring between */
.map.stagewrap{aspect-ratio:1000/380;margin-top:34px}
.map .stage{height:400px}
.map .side{position:absolute;top:52px;width:262px;display:grid;gap:12px}
.map .side .lab{font-size:10px;letter-spacing:.2em;color:var(--mintb);font-weight:700;text-transform:uppercase;margin-bottom:2px}
.map .who{border-radius:12px;border:1px solid rgba(199,210,230,.18);background:rgba(255,255,255,.04);padding:12px 16px;color:#fff;display:flex;justify-content:space-between;align-items:center}
.map .who b{font-size:15px;font-weight:700;display:block}
.map .who small{font-size:11px;color:var(--ice);display:block;margin-top:2px;line-height:1.35}
.map .who i{width:8px;height:8px;border-radius:50%;background:var(--acc,#2EE6C0);box-shadow:0 0 12px var(--acc,#2EE6C0)}
.map .ring2{top:140px}
.map .fanl,.map .fanr{position:absolute;left:0;top:0;width:1000px;height:400px;pointer-events:none}
.map path{fill:none;stroke:rgba(199,210,230,.22);stroke-width:1.5}
.map .pulse{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--mintb);box-shadow:0 0 14px 4px rgba(46,230,192,.5);opacity:0;offset-rotate:0deg}
.map .pulse.b{background:#6F8DFF;box-shadow:0 0 14px 4px rgba(111,141,255,.5)}
.map .pulse.a{background:#F0B458;box-shadow:0 0 14px 4px rgba(240,180,88,.5)}
.issline{display:block;width:100%;text-align:left;margin-top:16px;padding:16px 20px;border-radius:14px;border:1px solid rgba(240,180,88,.35);background:rgba(240,180,88,.07);color:var(--ice);font:inherit;font-size:15px;line-height:1.5;cursor:pointer;transition:border-color .2s,background .2s}
.issline:hover,.issline.on{border-color:#F0B458;background:rgba(240,180,88,.12)}
.issline b{color:#fff;font-weight:700}
.issline em{font-style:normal;font-weight:700;color:#F0B458;margin-left:6px;white-space:nowrap}
.map .tag{position:absolute;left:0;width:1000px;top:352px;text-align:center;font-size:13px;color:var(--ice)}
.map .tag b{color:#fff;font-weight:600}
@keyframes travel{0%{opacity:0;offset-distance:0%}8%{opacity:1}92%{opacity:1}100%{opacity:0;offset-distance:100%}}

/* ---------- the light half ---------- */
.light{background:#F5F7FC;color:var(--navy)}
.dark{background:var(--navy);color:#fff}
.dark .in{max-width:1160px;margin:0 auto;padding:96px 24px}
.dark .road{border-top-color:rgba(199,210,230,.18)}
.dark .road div::before{background:rgba(199,210,230,.3)}
.dark .road div.now::before{background:var(--mintb);box-shadow:0 0 0 4px rgba(46,230,192,.18)}
.dark .road div.now small{color:var(--mintb)}
.dark .road p{color:var(--ice)}
.dark .regnote{color:var(--steel)}
.road-cta{margin-top:48px}
.light.alt{background:#fff}
.light .in{max-width:1160px;margin:0 auto;padding:96px 24px}
.light .eyebrow{color:var(--blue)}
.light h2{color:var(--navy)}.light h2 span{color:var(--blue)}
.light .lead{color:var(--slate)}
.never{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.never div{background:#fff;border:1px solid #E1E7F2;border-radius:14px;padding:20px 22px}
.never b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em}
.never p{font-size:13.5px;color:var(--slate);margin-top:6px;line-height:1.45}
.sec3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;padding-top:32px;border-top:1px solid #E1E7F2}
.sec3 b{display:block;font-size:15px;font-weight:700}
.sec3 p{font-size:13.5px;color:var(--slate);margin-top:6px;line-height:1.5}
.regt{margin-top:40px;border:1px solid #E1E7F2;border-radius:16px;overflow:hidden;background:#fff}
.regt .row{display:grid;grid-template-columns:1.2fr 1.6fr 1fr;gap:16px;padding:18px 22px;border-top:1px solid #EEF2FF;align-items:center;font-size:15px}
.regt .row:first-child{border-top:0;background:#F5F7FC;font-size:10.5px;letter-spacing:.18em;font-weight:700;color:var(--steel);text-transform:uppercase}
.regt .row b{font-weight:700}
.regt .row span{color:var(--slate)}
.regt .st{display:inline-block;font-size:11px;letter-spacing:.12em;font-weight:800;border-radius:999px;padding:5px 10px;text-transform:uppercase}
.st.build{background:#E3FAF3;color:#0B8F6F}.st.prep{background:#EEF2FF;color:var(--blue)}.st.dial{background:#FFF4DA;color:#9A6B00}.st.next{background:#F1F3F8;color:var(--steel)}
.regnote{font-size:13px;color:var(--steel);margin-top:14px}
.faq{margin-top:36px;display:grid;gap:0;border-top:1px solid #E1E7F2}
.faq details{border-bottom:1px solid #E1E7F2}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-size:17px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--blue);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 22px;font-size:15px;line-height:1.55;color:var(--slate);max-width:72ch}
.team{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.team>div{background:#fff;border:1px solid #E1E7F2;border-radius:16px;padding:24px 26px;display:flex;gap:20px;align-items:flex-start}
.team img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;background:#EEF2FF}
.team a{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--blue);text-decoration:none}
.team a:hover{text-decoration:underline}
.bdcard a{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;color:var(--blue);text-decoration:none}
.bdcard a:hover{text-decoration:underline}
.marks{margin-top:8px}
.marks .logos{margin-top:22px;padding:0 26px;align-items:center}
.marks .logos img{height:46px}
.marks .logos .tx{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.2}
.marks .logos .tx b{color:var(--navy);font-weight:700}
.marks .logos .tx small{font-size:11px;letter-spacing:.14em;color:var(--steel);font-weight:700;text-transform:uppercase}
.belt{margin-top:38px;padding:26px 26px 0;border-top:1px solid #E1E7F2}
.belt .k{font-size:10.5px;letter-spacing:.18em;font-weight:700;color:var(--slate);text-transform:uppercase}
.beltwrap{margin-top:18px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.belttrack{display:flex;width:max-content;animation:belt 38s linear infinite}
.beltwrap:hover .belttrack{animation-play-state:paused}
.beltgroup{display:flex;align-items:center;gap:64px;padding-right:64px}
.belttrack img{height:27px;width:auto;filter:grayscale(1);opacity:.6;transition:filter .2s,opacity .2s}
.belttrack img.big{height:34px}
.belttrack img.wide{height:19px}
.belttrack img:hover{filter:none;opacity:1}
@keyframes belt{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.belttrack{animation:none}}
.attrib{font-size:12px;color:var(--slate);margin-top:18px;line-height:1.45;max-width:78ch}
.team b{display:block;font-size:18px;font-weight:800;letter-spacing:-.01em}
.team small{display:block;font-size:11px;letter-spacing:.16em;color:var(--blue);font-weight:700;text-transform:uppercase;margin-top:6px}
.team p{font-size:14.5px;color:var(--slate);margin-top:10px;line-height:1.5}
.filmsec{background:#F5F7FC;color:var(--navy)}.filmsec .eyebrow{color:var(--blue)}.filmsec h3 span{color:var(--blue)}
.filmsec .in{max-width:1160px;margin:0 auto;padding:72px 24px 88px}
.fhead{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
.fhead h3{font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.02em}
.fhead h3 span{color:var(--mintb)}
.player{margin:22px auto 0;max-width:920px;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16/9;border:1px solid rgba(199,210,230,.14)}
.player video{width:100%;height:100%;display:block}
.contact{margin-top:40px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;border-radius:16px;padding:26px 28px;background:var(--navy);color:#fff}
.contact h3{font-size:clamp(18px,2.2vw,24px);font-weight:800;letter-spacing:-.02em}
.contact p{font-size:14px;color:var(--ice);margin-top:6px}
@media (max-width:820px){.never,.sec3{grid-template-columns:1fr}.regt .row{grid-template-columns:1fr;gap:6px}.team,.contact{grid-template-columns:1fr}}

.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.badge2{background:#fff;border:1px solid #E1E7F2;border-radius:14px;padding:22px 20px;text-align:center}
.badge2 .mark{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 18px;border-radius:10px;border:2px solid var(--navy);font-weight:800;letter-spacing:.06em;font-size:15px;color:var(--navy)}
.badge2 .mark.soft{border-color:var(--blue);color:var(--blue)}
.badge2 b{display:block;font-size:14px;margin-top:14px}
.badge2 p{font-size:12.5px;color:var(--slate);margin-top:5px;line-height:1.45}
@media (max-width:820px){.badges{grid-template-columns:1fr 1fr}}
.road{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid #E1E7F2;position:relative}
.road div{padding:22px 18px 0;position:relative}
.road div::before{content:"";position:absolute;left:18px;top:-7px;width:12px;height:12px;border-radius:50%;background:#D6DEEA}
.road div.now::before{background:var(--mint);box-shadow:0 0 0 4px #E3FAF3}
.road small{display:block;font-size:10.5px;letter-spacing:.18em;font-weight:800;color:var(--steel);text-transform:uppercase}
.road div.now small{color:#0B8F6F}
.road b{display:block;font-size:17px;font-weight:800;margin-top:6px;letter-spacing:-.01em}
.road p{font-size:13.5px;color:var(--slate);margin-top:6px;line-height:1.5}
@media (max-width:820px){.road{grid-template-columns:1fr 1fr}}

.badge2 .logo{height:64px;display:flex;align-items:center;justify-content:center}
.badge2 .logo img{max-height:64px;max-width:150px;width:auto;height:auto}
.logos{display:flex;flex-wrap:wrap;gap:28px 40px;align-items:center;margin-top:22px}
.logos img{height:44px;width:auto;filter:grayscale(1);opacity:.85;transition:filter .2s,opacity .2s}
.logos img:hover{filter:none;opacity:1}
.logos .k{font-size:10.5px;letter-spacing:.18em;font-weight:700;color:var(--steel);text-transform:uppercase;width:100%}
.regcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.regcard{background:#F5F7FC;border:1px solid #E1E7F2;border-radius:14px;padding:20px}
.regcard small{display:block;font-size:10.5px;letter-spacing:.18em;font-weight:800;color:var(--steel);text-transform:uppercase}
.regcard b{display:block;font-size:19px;font-weight:800;margin-top:6px;letter-spacing:-.01em}
.regcard .st{display:inline-block;font-size:10.5px;letter-spacing:.12em;font-weight:800;border-radius:999px;padding:5px 10px;text-transform:uppercase;margin-top:10px}
#registers .regcard{background:#fff}
#registers .regcards{margin-top:44px}
.regcard p{font-size:13px;color:var(--slate);margin-top:8px;line-height:1.5}
.regcard .nm{margin-top:12px;font-size:11px;color:var(--steel);border-top:1px dashed #D6DEEA;padding-top:8px}
@media (max-width:820px){.regcards{grid-template-columns:1fr 1fr}}

.publicity{margin-top:30px;padding-top:22px;border-top:1px solid #E1E7F2}
.publicity .k{font-size:10.5px;letter-spacing:.18em;font-weight:700;color:var(--steel);text-transform:uppercase;display:block;margin-bottom:10px}
.publicity img{width:100%;max-width:560px;height:auto;display:block}
.publicity p{font-size:11.5px;color:var(--steel);margin-top:8px;line-height:1.45}

/* what we never touch, redesigned: a list and two seals */
.trust2{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;margin-top:36px;align-items:start}
.nolist{list-style:none;margin-top:26px;display:grid;gap:14px}
.nolist li{position:relative;padding-left:30px;font-size:16px;line-height:1.5;color:var(--slate)}
.nolist li b{color:var(--navy);font-weight:700}
.nolist li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:2px;background:var(--blue)}
.tr2{background:#F5F7FC;border:1px solid #E1E7F2;border-radius:18px;padding:26px 28px}
.seal{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid #E1E7F2}
.seal:first-child{padding-top:0}
.seal img{max-width:120px;max-height:64px;width:auto;height:auto;justify-self:center}
.seal b{display:block;font-size:15.5px;font-weight:800;color:var(--navy)}
.seal p{font-size:13px;color:var(--slate);margin-top:4px;line-height:1.45}
.tr2note{font-size:13px;color:var(--slate);line-height:1.5;padding-top:16px}
@media (max-width:820px){.trust2{grid-template-columns:1fr}.seal{grid-template-columns:90px 1fr}}

.hero .aud{margin-top:26px;font-size:14px;color:var(--steel)}
.hero .aud a{color:var(--ice);text-decoration:none;border-bottom:1px solid rgba(199,210,230,.35);padding-bottom:1px}
.hero .aud a:hover{color:#fff;border-bottom-color:#fff}

/* the four card names, big enough to catch a scroller */
.tab b{font-size:24px;letter-spacing:-.02em;line-height:1.1}
.tab small{font-size:12.5px;margin-top:6px}
.tab .op{margin-top:16px}
.tab{min-height:196px;padding:24px 22px 20px}
@media (max-width:820px){.tab b{font-size:22px}}

/* the map is the menu */
.map .side{top:52px}
.map .who{appearance:none;font:inherit;text-align:left;cursor:pointer;width:100%;transition:transform .2s,border-color .2s,background .2s;position:relative}
.map .who:hover,.map .who.on{transform:translateX(4px);border-color:var(--acc);background:rgba(255,255,255,.07)}
.map .who em{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--acc);margin-top:6px;opacity:.9}
.map .who b{font-size:16px;line-height:1.2}
.map .regbtn{appearance:none;font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.map .regbtn:hover,.map .regbtn.on{border-color:var(--acc);background:rgba(255,255,255,.07)}
.map .regbtn .lab{display:flex;justify-content:space-between;align-items:baseline}
.map .regbtn .see{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--acc);margin-top:12px}
.tabs{display:none}
@media (max-width:820px){.tabs{display:grid}.map .who em,.map .regbtn .see{display:none}.map .who,.map .regbtn{pointer-events:none}}
/* each side keeps its colour inside its scene */
#p-dist{--acc:#2EE6C0}#p-am{--acc:#6F8DFF}#p-iss{--acc:#F0B458}#p-reg{--acc:#C7D2E6}
.panel .head h3 em{color:var(--acc)}
.panel .hero,.panel .heroR,.panel .ordc{border-color:var(--acc);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.panel .hero .k,.panel .heroR .k,.panel .ordc i{color:var(--acc)}
.panel .dot2,.panel .dl{background:var(--acc);box-shadow:0 0 18px 6px rgba(255,255,255,.18)}
.panel .field i{background:var(--acc)}
.panel .fl,.panel .regs .rr .st,.panel .phone2 .pl,.panel .mp .an,.panel .queue .qh,.panel .readp .lab,.panel .reads b{color:var(--acc)}
.panel .phone2 .pr .buy,.panel .mp .bd i{background:var(--acc);color:var(--navy)}
.panel .flash2{box-shadow:0 0 40px 18px var(--acc)}
.panel .cta{border-color:var(--acc);background:linear-gradient(135deg,rgba(46,91,255,.18),rgba(255,255,255,.04))}
.panel .btn1{background:var(--acc);color:var(--navy)}
.panel .sum li::before{background:var(--acc)}
.panel .pill.on,.panel .p1{color:var(--navy);background:var(--acc);border-color:var(--acc)}

/* ---------- simple scenes: the map, with one side alive ---------- */
.sim.stagewrap{aspect-ratio:1000/400;background:radial-gradient(ellipse 50% 60% at 50% 45%,rgba(46,91,255,.18),transparent 70%),#0A1B38}
.sim.stagewrap::before{display:none}
.sim .stage{height:400px}
.sim .actor2{position:absolute;left:60px;top:96px;width:262px;border-radius:14px;border:1px solid var(--acc);background:rgba(255,255,255,.05);padding:18px 20px;color:#fff}
.sim .actor2 .lab{font-size:10px;letter-spacing:.2em;color:var(--acc);font-weight:700;text-transform:uppercase}
.sim .actor2 b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:6px;line-height:1.1}
.sim .actor2 p{font-size:13px;color:var(--ice);margin-top:8px;line-height:1.45}
.sim .actor2 .chip2{display:inline-block;margin-top:12px;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--navy);background:var(--acc);border-radius:999px;padding:5px 10px;opacity:0}
.sim .ring2{top:120px}
.sim .regs{padding:16px 20px}
.sim .regs .rr{padding:6px 0;font-size:13px}
.sim .regs .rr .st{color:var(--acc)}
.sim .regs .rr.lit{background:rgba(255,255,255,.06);margin:0 -10px;padding:6px 10px;border-radius:8px}
.sim .pl{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--acc);box-shadow:0 0 16px 5px rgba(255,255,255,.18);opacity:0;offset-rotate:0deg}
.sim .pl.back{background:#2EE6C0}
.sim .lines{position:absolute;left:0;top:0;width:1000px;height:400px;pointer-events:none}
.sim .lines path{fill:none;stroke:rgba(199,210,230,.22);stroke-width:1.5}
.sim .cap2{position:absolute;left:0;right:0;top:34px;text-align:center;font-size:19px;font-weight:600;color:#fff;pointer-events:none}
.sim .cap2 span{position:absolute;left:0;right:0;opacity:0}
.sim .c1{animation:sk1 12s infinite}.sim .c2{animation:sk2 12s infinite}.sim .c3{animation:sk3 12s infinite}
@keyframes sk1{0%,2%{opacity:0}5%,32%{opacity:1}35%,100%{opacity:0}}
@keyframes sk2{0%,35%{opacity:0}38%,62%{opacity:1}65%,100%{opacity:0}}
@keyframes sk3{0%,65%{opacity:0}68%,97%{opacity:1}100%{opacity:0}}
/* one pulse out, the row lights, one pulse back, the chip appears */
.sim .out{animation:pout 12s infinite}
.sim .ret{animation:pret 12s infinite}
.sim .rr.tgt{animation:rlit 12s infinite}.sim .rr.tgt .st{animation:rst 12s infinite}
.sim .chip2{animation:chip 12s infinite}
@keyframes pout{0%,6%{opacity:0;offset-distance:0%}11%{opacity:1;offset-distance:12%}30%{opacity:1;offset-distance:100%}32%,100%{opacity:0;offset-distance:100%}}
@keyframes pret{0%,38%{opacity:0;offset-distance:0%}43%{opacity:1;offset-distance:12%}60%{opacity:1;offset-distance:100%}62%,100%{opacity:0;offset-distance:100%}}
@keyframes rlit{0%,30%{background:rgba(255,255,255,0)}33%,100%{background:rgba(255,255,255,.06)}}
@keyframes rst{0%,30%{opacity:0}33%,100%{opacity:1}}
@keyframes chip{0%,60%{opacity:0;transform:translateY(4px)}64%,100%{opacity:1;transform:translateY(0)}}
/* small payoffs */
.sim .pay{position:absolute;left:60px;top:296px;width:262px;font-size:12px;color:var(--ice);opacity:0;animation:chip 12s infinite;line-height:1.4}
.sim .pay b{color:#fff}
.sim .fieldlab{position:absolute;left:60px;top:326px;width:262px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);opacity:.9}
.sim .field2{position:absolute;left:60px;top:352px;width:262px;display:grid;grid-template-columns:repeat(18,1fr);gap:6px}
.sim .field2 i{display:block;width:5px;height:5px;border-radius:50%;background:var(--acc);opacity:.15;animation:fdot 12s infinite}
@keyframes fdot{0%,62%{opacity:.15}72%,100%{opacity:.95}}
/* asset managers: orders arrive first */
.sim .in1{animation:pin 12s infinite}.sim .in2{animation:pin 12s infinite .8s}.sim .in3{animation:pin 12s infinite 1.6s}
@keyframes pin{0%,2%{opacity:0;offset-distance:0%}7%{opacity:1;offset-distance:12%}20%{opacity:1;offset-distance:100%}22%,100%{opacity:0;offset-distance:100%}}
.sim .q2{margin-top:10px;display:grid;gap:4px}
.sim .q2 span{font-size:12px;color:#fff;border-top:1px solid rgba(199,210,230,.14);padding-top:4px;opacity:0}
.sim .q2 .o1{animation:qrow 12s infinite}.sim .q2 .o2{animation:qrow 12s infinite .8s}.sim .q2 .o3{animation:qrow 12s infinite 1.6s}
@keyframes qrow{0%,20%{opacity:0}23%,100%{opacity:1}}
.sim .am .out{animation:pout2 12s infinite}
@keyframes pout2{0%,36%{opacity:0;offset-distance:0%}38%{opacity:1;offset-distance:0%}58%{opacity:1;offset-distance:100%}60%,100%{opacity:0;offset-distance:100%}}
.sim .am .rr.tgt{background:rgba(255,255,255,.06)}.sim .am .rr.tgt .st{opacity:1}
@keyframes rlit2{0%,58%{background:rgba(255,255,255,0)}61%,100%{background:rgba(255,255,255,.06)}}
@keyframes rst2{0%,58%{opacity:0}61%,100%{opacity:1}}
.sim .am .pay{animation:chip2b 12s infinite}
@keyframes chip2b{0%,70%{opacity:0}74%,100%{opacity:1}}
/* registers: the mirror */
.sim .dl2{position:absolute;left:60px;top:104px;width:262px;border-radius:14px;border:1px solid rgba(199,210,230,.2);background:rgba(255,255,255,.04);padding:16px 20px;color:#fff}
.sim .dl2 .lab{font-size:10px;letter-spacing:.2em;color:var(--steel);font-weight:700;text-transform:uppercase;margin-bottom:6px}
.sim .dl2 .rr{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-top:1px solid rgba(199,210,230,.12)}
.sim .dl2 .rr .st{font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--acc);opacity:0}
.sim .rg .r1{animation:rlt 12s infinite 0s}.sim .rg .r2{animation:rlt 12s infinite 1.2s}.sim .rg .r3{animation:rlt 12s infinite 2.4s}.sim .rg .r4{animation:rlt 12s infinite 3.6s}
.sim .rg .r1 .st{animation:rls 12s infinite 0s}.sim .rg .r2 .st{animation:rls 12s infinite 1.2s}.sim .rg .r3 .st{animation:rls 12s infinite 2.4s}.sim .rg .r4 .st{animation:rls 12s infinite 3.6s}
@keyframes rlt{0%,24%{background:rgba(255,255,255,0)}27%,100%{background:rgba(255,255,255,.06)}}
@keyframes rls{0%,24%{opacity:0}27%,100%{opacity:1}}
.sim .rg .k1{animation:pk 12s infinite 0s}.sim .rg .k2{animation:pk 12s infinite 1.2s}.sim .rg .k3{animation:pk 12s infinite 2.4s}.sim .rg .k4{animation:pk 12s infinite 3.6s}
@keyframes pk{0%,6%{opacity:0;offset-distance:0%}11%{opacity:1;offset-distance:12%}26%{opacity:1;offset-distance:100%}28%,100%{opacity:0;offset-distance:100%}}
/* the panel head: say where you are */
.panel .head .whoami{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.panel .head .where{display:inline-block;font-size:12px;letter-spacing:.2em;font-weight:800;color:var(--navy);background:var(--acc);border-radius:999px;padding:6px 12px;text-transform:uppercase}
.panel .head .roles{font-size:14px;color:var(--ice);font-weight:500}
.panel .head h3{font-size:clamp(22px,2.6vw,30px)}
/* phones: the map gives way to the tabs; the scenes get bigger type so they stay readable when scaled */
@media (max-width:820px){
  .map.stagewrap{display:none}
  .tl .items{grid-template-columns:repeat(4,1fr);row-gap:22px}
}
@media (max-width:600px){
  .tl .items{grid-template-columns:repeat(3,1fr)}
  .sim .cap2{font-size:34px;top:22px}
  .sim .actor2 .lab,.sim .regs .lab,.sim .dl2 .lab{font-size:15px;letter-spacing:.14em}
  .sim .actor2 b{font-size:30px}
  .sim .actor2 p,.sim .q2 span{font-size:19px}
  .sim .regs .rr,.sim .dl2 .rr{font-size:19px;padding:8px 0}
  .sim .regs .rr .st,.sim .dl2 .rr .st{font-size:11px;white-space:nowrap;letter-spacing:.08em}
  .sim .regs .rr b,.sim .dl2 .rr b{white-space:nowrap}
  .sim .field2{display:none}
  .sim .actor2 .chip2{white-space:nowrap;font-size:13px;padding:6px 10px}
  .sim .ring2 small{font-size:14px}.sim .ring2 b{font-size:19px}
  .sim .pl{width:18px;height:18px}
  .hero .in{padding:72px 24px 80px}
}

/* ============ fixes pass, 21 Sep ============ */
/* 1. the sticky nav must not cover the top of an opened panel */
.panel{scroll-margin-top:88px}

/* 2. the verb tag on each side of the market */
.map .who u,.tab u,.map .regbtn .vtag{display:block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);text-decoration:none;margin-bottom:5px}
.tab u{font-size:11px;margin-bottom:7px}
.map .regbtn .vtag{margin:0 0 5px;color:var(--acc)}
.map .regbtn .lab{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;color:#fff;text-transform:none;margin-bottom:4px}

/* 3. the scenes carried a dead band under the cards */
.sim.stagewrap{aspect-ratio:1000/360}
.sim .stage{height:360px}
#p-iss .sim.stagewrap{aspect-ratio:1000/394}
#p-iss .sim .stage{height:394px}
#p-reg .sim.stagewrap{aspect-ratio:1000/334}
#p-reg .sim .stage{height:334px}

/* 4. the scenes, rebuilt for a phone: one column, full size type, no scaling */
@media (max-width:760px){
  .sim.stagewrap{aspect-ratio:auto!important;height:auto;overflow:visible;border:0;background:none;border-radius:0}
  .sim .stage{position:static!important;width:auto!important;height:auto!important;transform:none!important;
    display:flex;flex-direction:column;gap:24px;
    border-radius:16px;border:1px solid rgba(199,210,230,.14);
    background:radial-gradient(ellipse 90% 45% at 50% 48%,rgba(46,91,255,.20),transparent 70%),#0A1B38;
    padding:20px 16px 22px}
  .sim .lines,.sim .pl,.sim .field2,.sim .fieldlab{display:none!important}
  .sim .cap2{position:relative!important;order:-1;left:auto!important;right:auto!important;top:auto!important;
    text-align:left;font-size:17px!important;line-height:1.35;min-height:3.7em;margin:0 0 -6px}
  .sim .cap2 span{position:absolute;left:0;right:0;top:0}
  .sim .actor2,.sim .regs,.sim .dl2{position:relative!important;left:auto!important;top:auto!important;
    width:auto!important;height:auto!important;margin:0}
  .sim .actor2 .lab,.sim .regs .lab,.sim .dl2 .lab{font-size:10.5px!important;letter-spacing:.16em!important}
  .sim .actor2 b{font-size:21px!important}
  .sim .actor2 p,.sim .q2 span{font-size:13.5px!important}
  .sim .regs .rr,.sim .dl2 .rr{font-size:14.5px!important;padding:7px 0!important}
  .sim .regs .rr .st,.sim .dl2 .rr .st{font-size:9.5px!important;letter-spacing:.1em!important}
  .sim .regs .rr b,.sim .dl2 .rr b{white-space:normal!important}
  .sim .actor2 .chip2{font-size:10.5px!important;padding:5px 9px!important;white-space:normal!important}
  .sim .ring2{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;
    border-radius:999px;padding:9px 18px;flex-direction:row!important;gap:9px;align-self:center;
    animation:none!important;box-shadow:0 0 26px rgba(46,230,192,.22),inset 0 0 26px rgba(46,91,255,.2)}
  .sim .ring2 small{font-size:9.5px!important}
  .sim .ring2 b{font-size:15px!important}
  /* the two connectors, with one travelling dot each */
  .sim .ring2::before,.sim .ring2::after{content:"";position:absolute;left:50%;margin-left:-5px;width:10px;height:24px;
    background-image:radial-gradient(circle at 50% 50%,var(--acc) 0 42%,transparent 46%),linear-gradient(rgba(199,210,230,.26),rgba(199,210,230,.26));
    background-size:10px 10px,2px 100%;background-position:50% -10px,50% 0;background-repeat:no-repeat;
    animation:mdot 2.6s linear infinite;animation-direction:var(--mdir,normal)}
  .sim .ring2::before{top:-24px}
  .sim .ring2::after{bottom:-24px;animation-delay:1.3s}
  #p-am .sim .stage,#p-reg .sim .stage{--mdir:reverse}
}
@keyframes mdot{from{background-position:50% -10px,50% 0}to{background-position:50% 26px,50% 0}}

/* the map is a menu: a label and a name, nothing else */
.map.stagewrap{aspect-ratio:1000/424}
.map .stage{height:424px}
.map .fanl{height:424px}
.map .side{top:36px;left:36px!important;width:286px;gap:14px}
.map .who{padding:16px 18px 15px}
.map .who em{margin-top:8px}
.map .regbtn{padding:18px 20px 16px}
.map .regbtn .rr{padding:8px 0}
.map .ring2{top:152px}

/* the side-of-market label stands alone, under the title */
.panel .head .whoami{margin:0 0 16px}

/* everything in a panel hangs off one left edge: label, title, paragraph, summary, bullets */
.sum{display:block;padding:6px 0 0}
.sum p{font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.02em;text-align:left;max-width:820px;margin:0 0 24px}
.sum ul{grid-template-columns:1fr;gap:16px;max-width:880px}
.sum li{font-size:16px;line-height:1.5;padding-left:26px}
.sum li::before{top:10px}
.panel .cta{margin-top:26px}
@media (max-width:820px){.sum p{font-size:20px;margin-bottom:18px}.sum li{font-size:15px}.panel .cta{margin-top:12px}}

/* the fund services card carries three rows: it needs the room */
#p-am .sim.stagewrap{aspect-ratio:1000/382}
#p-am .sim .stage{height:382px}

/* security and compliance: a schedule, not a badge wall */
.trows{margin-top:40px;border-top:1px solid #E1E7F2}
.trow{display:grid;grid-template-columns:340px 1fr;gap:36px;padding:20px 0;border-bottom:1px solid #E1E7F2;align-items:baseline}
.trow b{font-size:16.5px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.trow span{font-size:15.5px;line-height:1.55;color:var(--slate)}
.tframe{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:40px;background:#F5F7FC;border:1px solid #E1E7F2;border-radius:16px;padding:30px 34px}
.tframe .tmark{display:flex;align-items:center;height:46px;margin-bottom:14px}
.tframe .tmark img{max-height:46px;max-width:128px;width:auto;height:auto;opacity:.92}
.tframe u{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);text-decoration:none;margin-bottom:8px}
.tframe p{font-size:14px;line-height:1.55;color:var(--slate)}
@media (max-width:820px){
  .trow{grid-template-columns:1fr;gap:6px}
  .tframe{grid-template-columns:1fr;gap:24px;padding:24px 22px}
}

/* one call to action per card, and a quiet way to the detail */
.panel .cta .lnk{align-self:center;font-size:15px;font-weight:700;color:var(--acc);text-decoration:none;padding:10px 2px;border-bottom:1px solid transparent}
.panel .cta .lnk:hover{border-bottom-color:var(--acc)}

/* the memberships sit still: a static row, no carousel */
.beltwrap{mask-image:none;-webkit-mask-image:none;overflow:visible}
.belttrack{animation:none!important;width:auto;flex-wrap:wrap}
.belttrack .beltgroup+.beltgroup{display:none}
.beltgroup{gap:56px;padding-right:0;flex-wrap:wrap;row-gap:22px}
.belttrack img{filter:grayscale(1);opacity:.62}
@media (max-width:820px){.beltgroup{gap:32px;row-gap:20px}}

/* the timeline's last step is the one happening now */
.tl .it.now i{background:#0B8F6F;box-shadow:0 0 0 5px rgba(11,143,111,.16);width:14px;height:14px;margin-top:9px}
.tl .it.now small{color:#0B8F6F;font-weight:800}
.tl .it em{display:block;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#0B8F6F;margin-top:5px}
.tlnow{margin-top:30px;font-size:18px;line-height:1.55;color:var(--slate);max-width:860px}
.tlnow b{color:var(--navy);font-weight:700}
@media (max-width:820px){.tlnow{font-size:17px}}

/* the white paper sits at the end of the timeline, where the reader wants the detail */
.wp{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:44px;padding:26px 30px;
  border:1px solid #D9E1F0;border-radius:16px;background:#fff}
.wp .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.wp h3{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--navy);margin-top:8px}
.wp p{font-size:15px;line-height:1.55;color:var(--slate);margin-top:6px;max-width:640px}
.wp .wpbtn{flex:none;font-size:15px;font-weight:700;color:var(--navy);background:var(--mintb);border-radius:999px;padding:13px 24px;text-decoration:none;transition:background .2s}
.wp .wpbtn:hover{background:#5CF0D2}
@media (max-width:820px){.wp{flex-direction:column;align-items:flex-start;gap:20px;padding:22px 20px}}

/* the map says where each register stands, in the roadmap's own words */
.map .regbtn .rr .st{opacity:1;white-space:nowrap;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.foot a{color:var(--ice);text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* the map names a register once its connection is in build */
.map .regbtn .rr{align-items:center}
.map .regbtn .rr>div,.map .regbtn .rr>span:first-child{display:flex;flex-direction:column;gap:1px}
.map .regbtn .rr small{font-size:11px;line-height:1.2;color:var(--steel);font-weight:500;letter-spacing:0;text-transform:none}
.map .regbtn .rr.next b{color:var(--steel);font-weight:500}
/* the registers panel: the table a capital markets reader wants */
.rtab{border-top:1px solid rgba(199,210,230,.16);font-size:14px}
.rtab-h,.rtab-r{display:grid;grid-template-columns:1.5fr .9fr 2.2fr .6fr;gap:18px;padding:13px 0;border-bottom:1px solid rgba(199,210,230,.12);align-items:baseline}
.rtab-h span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.rtab-r b{color:#fff;font-weight:700}
.rtab-r span{color:var(--ice);line-height:1.45}
.rtab-r em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.rtab-note{font-size:12.5px;color:var(--steel);padding-top:12px;line-height:1.5}
@media (max-width:820px){
  .rtab-h{display:none}
  .rtab-r{grid-template-columns:1fr;gap:4px;padding:14px 0}
}

.wp .wpbtns{display:flex;align-items:center;gap:22px;flex:none}
.wp .wplnk{font-size:14.5px;font-weight:700;color:var(--navy);text-decoration:none;border-bottom:1px solid transparent;white-space:nowrap}
.wp .wplnk:hover{border-bottom-color:var(--navy)}
@media (max-width:820px){.wp .wpbtns{flex-direction:column;align-items:flex-start;gap:14px}}

/* about: the view, then the people, then who backs them */
.vision{margin-top:34px;max-width:860px;border-left:3px solid var(--blue);padding-left:22px}
.vision h3{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:800}
.vision p{font-size:17px;line-height:1.6;color:var(--navy);margin-top:10px}
.backers{margin-top:40px}
.backers .k{display:block;font-size:10.5px;letter-spacing:.18em;font-weight:700;color:var(--slate);text-transform:uppercase}
.backers .bk{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}
.bkcard{background:#fff;border:1px solid #E1E7F2;border-radius:16px;padding:24px 26px}
.bkcard img{height:40px;width:auto;display:block;margin-bottom:16px;filter:grayscale(1);opacity:.85}
.bkcard b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--navy)}
.bkcard small{display:block;font-size:11px;letter-spacing:.16em;color:var(--slate);font-weight:700;text-transform:uppercase;margin-top:4px}
.bkcard p{font-size:14.5px;line-height:1.5;color:var(--slate);margin-top:10px}.strip{display:flex;flex-wrap:wrap;justify-content:center;gap:24px 72px;align-items:flex-end;margin-top:48px;padding:26px 0 24px;border-top:1px solid #E1E7F2;border-bottom:1px solid #E1E7F2}.strip .sg{display:flex;flex-direction:column;gap:12px;align-items:center}.strip .k{display:block;font-size:10.5px;letter-spacing:.18em;font-weight:700;color:var(--slate);text-transform:uppercase}.strip .lg{display:flex;gap:26px;align-items:center;height:40px}.strip .lg img{height:28px;width:auto;filter:grayscale(1);opacity:.7;mix-blend-mode:multiply}.strip .lg img[alt="The Venture Dept"]{height:40px;opacity:.9}.strip .lg img.wide{height:18px}.strip .lg img.big{height:38px}.attrib{font-size:12.5px;line-height:1.5;color:var(--steel);margin:12px auto 0;text-align:center;max-width:720px}@media(max-width:820px){.strip{justify-content:flex-start;gap:22px 32px;align-items:flex-start}.strip .lg{flex-wrap:wrap;height:auto}.strip .lg img.big{max-width:100%;height:auto;width:100%}}
@media (max-width:820px){.backers .bk{grid-template-columns:1fr}.vision p{font-size:16px}}

/* advisory board: compact cards between the founders and the backers */
.board{margin-top:40px}
.board .k{display:block;font-size:10.5px;letter-spacing:.18em;font-weight:700;color:var(--slate);text-transform:uppercase}
.board .bd{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.bdcard{background:#fff;border:1px solid #E1E7F2;border-radius:16px;padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.bdcard i{flex:none;width:46px;height:46px;border-radius:50%;background:#EEF2FF;color:var(--blue);font-style:normal;font-weight:800;font-size:15px;letter-spacing:.04em;display:flex;align-items:center;justify-content:center}
.bdcard b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:var(--navy)}
.bdcard small{display:block;font-size:11px;letter-spacing:.16em;color:var(--blue);font-weight:700;text-transform:uppercase;margin-top:4px}
.bdcard p{font-size:13.5px;line-height:1.5;color:var(--slate);margin-top:8px}
.board .bd.two{grid-template-columns:repeat(2,1fr)}
.board.team2{margin-top:16px}.board .kintro{font-size:13.5px;color:var(--slate);margin:6px 0 0}
.board.team1{margin-top:40px}
.board.team1+.team{margin-top:16px}
@media (max-width:820px){.board .bd,.board .bd.two{grid-template-columns:1fr}}

/* why now: three layers, left to right, rising */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;align-items:start;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:0;height:0}
.stp{background:#fff;border:1px solid #E1E7F2;border-radius:16px;padding:22px 24px 20px;position:relative;box-shadow:0 10px 36px rgba(11,30,61,.06);min-height:236px}
.stp::before{content:"";position:absolute;left:24px;top:-1px;width:44px;height:3px;border-radius:3px;background:var(--blue)}
.stp.s3::before{background:var(--mint)}
.stp small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--blue);font-weight:600}
.stp.s3 small{color:#087A5E}
.stp b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--navy);margin-top:8px}
.stp p{font-size:14.5px;line-height:1.5;color:var(--slate);margin-top:8px}
.stp .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.stp .chips span{font-size:11.5px;font-weight:600;color:var(--navy);background:#EEF2FF;border-radius:999px;padding:4px 10px}
.stp .chips .live{background:#E3FAF3;color:#06664E;font-weight:800;letter-spacing:.02em}
.stp.s1{margin-top:64px}.stp.s2{margin-top:32px}.stp.s3{margin-top:0}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:12px;margin-top:32px}.stp{min-height:0;padding:18px 20px 18px}.stp.s1,.stp.s2,.stp.s3{margin-top:0}}
.map .who .wrap{display:block}.map .regbtn .lab,.map .regbtn .regrows,.map .regbtn .rr{display:block}.map .regbtn .regrows .rr,.map .regbtn .rr{display:flex}.map .regbtn .rr>span:first-child{display:flex;flex-direction:column;gap:1px}
.panel .head .plab,.sum .plab{display:block;font-family:inherit;font-size:clamp(19px,1.9vw,23px);font-weight:700;letter-spacing:-.015em;text-transform:none;text-decoration:none;color:var(--ice);margin:0 0 10px;line-height:1.2}
.panel .head .plab.sol,.sum .plab.sol{color:var(--acc)}
.panel .head .ps{display:grid;grid-template-columns:1fr 72px 1fr;gap:0 20px;align-items:start;margin-top:6px;padding:28px 0 32px;border-top:1px solid rgba(199,210,230,.14);border-bottom:1px solid rgba(199,210,230,.14)}
.panel .head .ps-p,.panel .head .ps-s{border:0;background:none;padding:0;border-radius:0;box-shadow:none}
.panel .head .ps h3{font-size:16.5px;line-height:1.55;font-weight:500;color:rgba(199,210,230,.78);letter-spacing:0;max-width:none;margin:0}
.panel .head .ps h3 em{color:#fff;font-weight:600;font-style:normal}
.panel .head .ps p.chg{font-size:16.5px;line-height:1.55;font-weight:500;color:#fff;letter-spacing:0;margin:0;max-width:none}
.panel .head .ps-a{display:flex;align-items:center;justify-content:center;color:var(--acc);margin-top:2px}
.panel .head .ps-a svg{width:40px;height:40px;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);border-radius:50%;padding:11px;box-sizing:border-box}
@media (max-width:820px){
  .panel .head .ps{grid-template-columns:1fr;gap:18px;padding:22px 0 24px}
  .panel .head .ps-a{margin:0;justify-content:flex-start}
  .panel .head .ps-a svg{transform:rotate(90deg);width:36px;height:36px;padding:9px}
}
.sim .cap2 span.one{opacity:1!important;animation:none!important;position:static}
.sum{display:grid;grid-template-columns:280px 1fr;gap:0 24px;align-items:start;padding:26px 28px;border:1px solid rgba(199,210,230,.14);border-radius:16px;background:rgba(255,255,255,.025)}
.sum .plab{grid-column:1;margin:0}
.sum ul{grid-column:2;display:grid;grid-template-columns:1fr;gap:12px;max-width:none;margin-top:5px}
@media (max-width:820px){.sum{grid-template-columns:1fr;gap:14px;padding:20px 20px}.sum .plab,.sum ul{grid-column:1}.sum ul{margin-top:0}}
.sum li{position:relative;padding:0 0 0 24px;border:0;font-size:16.5px;line-height:1.45;font-weight:600;color:#fff;letter-spacing:-.01em}
.sum li::before{display:block;content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--acc)}
.panel .cta{margin-top:30px}
@media (max-width:820px){.sum li{font-size:15.5px}.panel .cta{margin-top:20px}}

/* the map is the stage: a selected side plays its own flow on the map; the panel below carries the words */
.map .hotl{position:absolute;left:0;top:0;width:1000px;height:424px;pointer-events:none}
.map .hotl path{fill:none;stroke-width:2.2;stroke-linecap:round;opacity:0}
.map .hotl path.o{animation:mfhot1 12s infinite}
.map .hotl path.r{animation:mfhot2 12s infinite}
.map .hotl path.d{stroke-dasharray:5 6}
.map .mdot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 16px 5px var(--c);opacity:0;offset-rotate:0deg}
.map .mdot.o{animation:mfo 12s infinite}
.map .mdot.r{animation:mfr 12s infinite}
.map.flowing .pulse{display:none}
.map.flowing .fanl{opacity:.3}
.map.flowing .who:not(.on):not(.inv){opacity:.4}
.map .who,.map .regbtn{transition:opacity .3s,transform .2s,border-color .2s,background .2s}
.map .who.lit{animation:mfcard 12s infinite}
.map .regbtn .rr.tgt{margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:8px;animation:mflit 12s infinite}
.map .regbtn .rr.tgt .st{opacity:0;color:var(--mc);animation:mfst 12s infinite}
.mapcap{position:relative;height:28px;margin-top:18px;text-align:center;font-size:18px;font-weight:600;color:#fff;letter-spacing:-.01em}
.mapcap span{position:absolute;left:0;right:0;opacity:0}
.mapcap .m1{animation:mfc1 12s infinite}.mapcap .m2{animation:mfc2 12s infinite}.mapcap .m3{animation:mfc3 12s infinite}
@keyframes mfo{0%,5%{opacity:0;offset-distance:0%}9%{opacity:1}30%{opacity:1;offset-distance:100%}32%,100%{opacity:0;offset-distance:100%}}
@keyframes mfr{0%,38%{opacity:0;offset-distance:0%}42%{opacity:1}62%{opacity:1;offset-distance:100%}64%,100%{opacity:0;offset-distance:100%}}
@keyframes mfhot1{0%,5%{opacity:0}9%,100%{opacity:.85}}
@keyframes mfhot2{0%,38%{opacity:0}42%,100%{opacity:.85}}
@keyframes mflit{0%,30%{background:rgba(255,255,255,0)}33%,100%{background:rgba(255,255,255,.08)}}
@keyframes mfst{0%,30%{opacity:0}33%,100%{opacity:1}}
@keyframes mfcard{0%,62%{border-color:rgba(199,210,230,.18);background:rgba(255,255,255,.04)}65%,100%{border-color:var(--acc);background:rgba(255,255,255,.08)}}
@keyframes mfc1{0%,2%{opacity:0}5%,33%{opacity:1}36%,100%{opacity:0}}
@keyframes mfc2{0%,36%{opacity:0}39%,62%{opacity:1}65%,100%{opacity:0}}
@keyframes mfc3{0%,65%{opacity:0}68%,97%{opacity:1}100%{opacity:0}}
@media (min-width:821px){.panel .stagewrap.sim{display:none}}
@media (max-width:820px){.mapcap{display:none}}
@media (prefers-reduced-motion:reduce){
  .map .mdot{display:none}
  .map .hotl path{animation:none;opacity:.85}
  .map .regbtn .rr.tgt{animation:none;background:rgba(255,255,255,.08)}
  .map .regbtn .rr.tgt .st{animation:none;opacity:1}
  .map .who.lit{animation:none;border-color:var(--acc)}
  .mapcap{height:auto}.mapcap span{position:static;display:block;opacity:1;animation:none;font-size:15px}
}

/* investors: a band of dots along the bottom of the map; everyone on it serves them */
.map.stagewrap{aspect-ratio:1000/494}
.map .stage{height:494px}
.map .fanl,.map .hotl{height:494px}
.map .invb{position:absolute;left:36px;top:414px;width:904px;pointer-events:none}
.map .invb u{display:block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ice);text-decoration:none;opacity:.75;margin-bottom:10px}
.map .invb .dots{display:grid;grid-template-columns:repeat(76,1fr);row-gap:7px}
.map .invb i{display:block;width:5px;height:5px;border-radius:50%;background:var(--ice);opacity:.22;justify-self:center}
.map.inv-on .invb u,.map.inv-one .invb u{color:var(--mc);opacity:1}
.map.inv-on .invb i{animation:mfinv 12s infinite}
.map.inv-one .invb i.me{animation:mfme 12s infinite}
@keyframes mfinv{0%,63%{opacity:.22;background:var(--ice);box-shadow:none}68%,100%{opacity:.95;background:var(--mc);box-shadow:0 0 6px var(--mc)}}
@keyframes mfme{0%,2%{opacity:.22;transform:scale(1)}6%,30%{opacity:1;background:var(--mc);transform:scale(1.9);box-shadow:0 0 10px 2px var(--mc)}34%,63%{opacity:.22;background:var(--ice);transform:scale(1);box-shadow:none}68%,100%{opacity:.95;background:var(--mc);box-shadow:0 0 6px var(--mc)}}
@media (prefers-reduced-motion:reduce){.map.inv-on .invb i,.map.inv-on .invb i.me,.map.inv-one .invb i.me{animation:none;opacity:.95;background:var(--mc)}}

/* the investors' line: only banks, brokers and platforms face them */
.map .mdot.u{animation:mfu 12s infinite}
.map .mdot.d{animation:mfd 12s infinite}
.map .mdot.o.late{animation:mfo2 12s infinite}
.map .hotl path.r3{animation:mfhot3 12s infinite}
@keyframes mfu{0%,2%{opacity:0;offset-distance:0%}4%{opacity:1}11%{opacity:1;offset-distance:100%}12%,100%{opacity:0;offset-distance:100%}}
@keyframes mfd{0%,61%{opacity:0;offset-distance:0%}63%{opacity:1}69%{opacity:1;offset-distance:100%}70%,100%{opacity:0;offset-distance:100%}}
@keyframes mfo2{0%,11%{opacity:0;offset-distance:0%}14%{opacity:1}31%{opacity:1;offset-distance:100%}33%,100%{opacity:0;offset-distance:100%}}
@keyframes mfhot3{0%,61%{opacity:0}63%,100%{opacity:.85}}

/* compact panels: problem over solution on the left, what you get and the action on the right */
.panel .duo{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:stretch}
.panel .dleft,.panel .dright{border:1px solid rgba(199,210,230,.14);border-radius:18px;background:rgba(255,255,255,.025);padding:26px 28px}
.panel .dright{border-color:color-mix(in srgb,var(--acc) 55%,transparent);display:flex;flex-direction:column}
.panel .duo .plab{display:block;font-family:inherit;font-size:20px;font-weight:700;letter-spacing:-.015em;text-transform:none;text-decoration:none;color:var(--ice);margin:0 0 8px;line-height:1.2}
.panel .duo .plab.sol{color:var(--acc)}
.panel .duo .ps-p h3{font-size:16px;line-height:1.55;font-weight:500;color:rgba(199,210,230,.8);letter-spacing:0;max-width:none;margin:0}
.panel .duo .ps-p h3 em{color:#fff;font-weight:600;font-style:normal}
.panel .duo .ps-s p.chg{font-size:16px;line-height:1.55;font-weight:500;color:#fff;letter-spacing:0;margin:0;max-width:none}
.panel .duo .ps-a{display:flex;color:var(--acc);margin:14px 0}
.panel .duo .ps-a svg{width:34px;height:34px;transform:rotate(90deg);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);border-radius:50%;padding:8px;box-sizing:border-box}
.panel .dright ul{list-style:none;display:grid;gap:12px;margin:4px 0 0}
.panel .dright li{position:relative;padding-left:22px;font-size:16px;line-height:1.45;font-weight:600;color:#fff}
.panel .dright li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--acc)}
.panel .dcta{margin-top:auto;padding-top:22px}
.panel .dcta .dline{border-top:1px solid rgba(199,210,230,.14);padding-top:18px}
.panel .dcta h3{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:#fff}
.panel .dcta p{font-size:14px;line-height:1.45;color:var(--ice);margin-top:4px}
.panel .dcta .btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:14px}
.panel .dcta .lnk{font-size:15px;font-weight:700;color:var(--acc);text-decoration:none}
.panel .dcta .lnk:hover{text-decoration:underline}
@media (max-width:820px){.panel .duo{grid-template-columns:1fr;gap:14px}.panel .dleft,.panel .dright{padding:22px 20px}}

/* the action stands out: its own tinted block at the foot of the right box */
.panel .dcta{padding-top:22px}
.panel .dcta .dline{border-top:0;padding:20px 22px 22px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 22%,transparent),rgba(255,255,255,.03) 70%);border:1px solid color-mix(in srgb,var(--acc) 60%,transparent);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.panel .dcta h3{font-size:21px}
.panel .dcta p{color:#DCE4F2}
.panel .dcta .btn1{padding:13px 22px;font-size:15px;font-weight:800;box-shadow:0 6px 18px color-mix(in srgb,var(--acc) 35%,transparent)}

/* the action sits under both boxes, full width */
.panel .duo+.cta{margin-top:0}
.panel .cta{box-shadow:0 10px 30px rgba(0,0,0,.25);background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 20%,transparent),rgba(255,255,255,.03) 70%)}
.panel .cta h3{font-size:22px}
.panel .cta .btn1{padding:13px 22px;font-size:15px;font-weight:800;box-shadow:0 6px 18px color-mix(in srgb,var(--acc) 35%,transparent)}

/* portraits on the smaller cards: same circle as the initials */
.bdcard i{width:56px;height:56px;overflow:hidden}
.bdcard i img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* phones: the four steps become a vertical timeline, dots on the line */
@media (max-width:820px){
  .road{grid-template-columns:1fr;border-top:0;border-left:2px solid #E1E7F2;margin-left:6px}
  .dark .road{border-left-color:rgba(199,210,230,.18)}
  .road div{padding:0 0 24px 24px}
  .road div:last-child{padding-bottom:4px}
  .road div::before{left:-7px;top:2px}
}

/* phones: each register becomes a small card, with the country as a tag */
@media (max-width:820px){
  .rtab{border-top:0}
  .rtab-body{display:grid;gap:10px}
  .rtab-r{border:1px solid rgba(199,210,230,.16);border-radius:14px;background:rgba(255,255,255,.03);padding:16px 18px;gap:6px}
  .rtab-r b{font-size:15.5px}
  .rtab-r span:nth-of-type(1){font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
  .rtab-r span:nth-of-type(2){font-size:13.5px}
  .rtab-r span:nth-of-type(3){font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--steel)}
  .rtab-note{padding-top:14px}
}

/* policy page */
.pol{max-width:860px}
.pol h3{font-size:20px;font-weight:800;letter-spacing:-.015em;color:var(--navy);margin:38px 0 12px}
.pol ul{list-style:none;display:grid;gap:12px}
.pol li{position:relative;padding-left:22px;font-size:16px;line-height:1.55;color:var(--slate)}
.pol li b{color:var(--navy);font-weight:700}
.pol li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.pol .pol-p{font-size:16px;line-height:1.55;color:var(--slate);margin-top:18px;max-width:760px}
.pol .pol-p b{color:var(--navy)}
.pol .pol-meta{margin-top:34px;padding-top:18px;border-top:1px solid #E1E7F2;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.pol .pol-back{margin-top:22px;font-size:14.5px}
.pol .pol-back a{color:var(--blue);text-decoration:none;font-weight:700}

/* accessibility */
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--mintb);color:var(--navy);padding:10px 16px;font-weight:700;border-radius:0 0 10px 0}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--mintb);outline-offset:3px}
.light a:focus-visible,.light button:focus-visible,.light summary:focus-visible,.why a:focus-visible{outline-color:var(--blue)}
@media (prefers-reduced-motion:reduce){
  .map .pulse,.sim .pl{animation:none!important;opacity:0!important}
  .sim .cap2 span,.sim .actor2 .chip2,.sim .regs .rr .st,.sim .dl2 .rr .st,.sim .pay,.sim .q2 span,.sim .field2 i{animation:none!important;opacity:1!important}
  .sim .cap2 span:not(:first-child){display:none}
  .sim .ring2::before,.sim .ring2::after{animation:none!important}
  html{scroll-behavior:auto}
}