/* SITE10: round 4/5 visuals, scoped (generated by scratchpad site10.py from the CMO's r4.css / r5.css) */
.v4{--bg:#FFFFFF;--ink:#0B1220;--body:#3F4757;--label:#5E6778;--hair:#E3E8F0;--blue:#2C6DF4;--deep:#1A4FD6;--soft:#EEF4FE;--mint:#0E8C74;--mintsoft:#E3F7F2;
--display:"Jost",system-ui,sans-serif;--sans:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;color-scheme:light}
.v4 .lab{font:600 12px var(--mono);letter-spacing:.04em;color:#6C7586}
.v4 .ttl{font:400 24px/1.15 var(--display);color:var(--ink)}
@keyframes v4-fade{from{opacity:0;transform:translateY(8px)}}
.v4 /* marks */
.mrow{display:grid;grid-template-columns:210px minmax(0,1fr);gap:16px;align-items:center;border-top:1px solid var(--hair);padding-top:14px}
.v4 .mhero{display:grid;place-items:center;height:210px;border-radius:14px;background:#fff;border:1px solid var(--hair)}
.v4 .mmeta{display:grid;gap:10px;min-width:0}
.v4 .mmeta h4{margin:0;font:400 22px var(--display);color:var(--ink)}
.v4 .mmeta h4 span{font:600 12px var(--mono);color:var(--blue);margin-right:8px}
.v4 .mmeta p{margin:0}
.v4 .msm{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.v4 .mlock{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;background:#fff;border:1px solid var(--hair)}
.v4 .wm{font:400 15px 'Michroma',var(--sans);letter-spacing:.2em;color:#0B1220}
.v4 .tile-i{width:32px;height:32px;border-radius:8px;background:#fff;border:1px solid var(--hair);display:grid;place-items:center}
.v4 .av{width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--hair);display:grid;place-items:center}
.v4 .pulse{animation:v4-pulse 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes v4-pulse{50%{opacity:.5;transform:scale(1.3)}}
.v4 .flare{transform-box:fill-box;transform-origin:center;animation:v4-flare 2.2s ease-in-out infinite}
@keyframes v4-flare{0%,100%{opacity:.75;transform:scale(.9)}50%{opacity:1;transform:scale(1.2)}}
.v4 .spark{animation:v4-spark 1.6s calc(var(--k)*.12s) ease-out infinite}
@keyframes v4-spark{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.v4 /* agent */
.ag{padding:20px;display:grid;gap:12px}
.v4 .ag-h,.v4 .ag-f{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.v4 .badge{font:600 12px var(--sans);color:var(--deep);background:var(--soft);border-radius:99px;padding:5px 12px}
.v4 .seqlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.v4 .seq{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--hair);box-shadow:0 8px 24px -18px #0B1220;animation:v4-rowin .5s calc(var(--i)*.6s) backwards}
@keyframes v4-rowin{from{opacity:0;transform:translateX(-14px)}}
.v4 .tx{min-width:0}
.v4 .tx b{display:block;color:var(--ink);font:600 15px var(--sans)}
.v4 .tx span{display:block;color:var(--blue);font:600 13px var(--sans)}
.v4 .tx small{display:block;color:#6C7586;font:600 11.5px var(--mono)}
.v4 .st{grid-column:2;grid-row:1;font:600 12px var(--sans);border-radius:99px;padding:5px 12px;white-space:nowrap}
.v4 .st.chk{color:var(--deep);background:var(--soft);animation:v4-chk 2.6s calc(var(--i)*.6s + .4s) both}
@keyframes v4-chk{0%{opacity:0}10%,40%{opacity:1}55%,100%{opacity:0}}
.v4 .st.plc{color:#fff;background:var(--blue);opacity:0;animation:v4-plc .4s calc(var(--i)*.6s + 1.5s) both}
.v4 .st.plc i{font-style:normal;margin-right:4px}
@keyframes v4-plc{to{opacity:1}}
.v4 .seq{position:relative;overflow:hidden}
.v4 .seq::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#4FC8FF22,transparent);transform:translateX(-100%);animation:v4-scan .9s calc(var(--i)*.6s + .4s) ease-out both}
@keyframes v4-scan{to{transform:translateX(100%)}}
.v4 .pill{font:600 12px var(--sans);color:var(--deep);background:var(--soft);border-radius:99px;padding:5px 12px}
.v4 /* oi */
.oi{padding:20px;display:grid;gap:14px}
.v4 .oi-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:12px}
.v4 .tile{border:1px solid var(--hair);border-radius:14px;padding:14px;display:grid;gap:10px;align-content:start;background:#fff;box-shadow:0 10px 28px -22px #0B1220;min-width:0;position:relative}
.v4 .tile.hot{border-color:#BFD3FB}
.v4 .field{position:relative;height:96px;border-radius:10px;background:linear-gradient(180deg,#F5F9FF,#fff)}
.v4 .d{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--blue);opacity:0;animation:v4-pop .4s calc(var(--n)*.05s + .3s) both}
@keyframes v4-pop{from{opacity:0;transform:scale(0)}to{opacity:.8;transform:scale(1)}}
.v4 .sparkline{width:100%;height:54px}
.v4 .line{stroke-dasharray:420;stroke-dashoffset:420;animation:v4-draw 2s .4s ease-out forwards}
@keyframes v4-draw{to{stroke-dashoffset:0}}
.v4 .area{animation:v4-fade 1s 1.6s backwards}
.v4 .trend{font:600 13px var(--sans);color:var(--blue)}
.v4 .gauge{height:10px;border-radius:99px;background:#EEF2F7;overflow:hidden}
.v4 .g{display:block;height:100%;width:7%;background:#B9C6DA;border-radius:99px;animation:v4-shrink 1.6s .6s ease-out both}
@keyframes v4-shrink{from{width:60%}}
.v4 .gv{font:400 20px/1.2 var(--display);color:#6C7586}
.v4 .gv.blue{color:var(--blue)}
.v4 .units{display:flex;gap:8px}
.v4 .u{font:600 13px var(--sans);color:#fff;background:var(--blue);border-radius:8px;padding:10px 12px;animation:v4-fade .5s calc(2.2s + var(--u)*.3s) backwards}
.v4 .foot{font:600 11px var(--mono);color:#9AA3B2}
.v4 /* web */
.web{width:100%;height:auto;display:block;padding:10px}
.v4 .flow{stroke:#2C6DF4;stroke-width:2.4;stroke-opacity:.85;stroke-dasharray:6 10;animation:v4-flow 1.4s linear infinite,v4-fadein .6s calc(var(--k)*.12s) both}
.v4 .flow.soon{stroke:#8FA8D4;stroke-dasharray:3 9;stroke-opacity:.6}
.v4 .flow.out{stroke:#1A4FD6}
@keyframes v4-flow{to{stroke-dashoffset:-32}}
@keyframes v4-fadein{from{opacity:0}}
.v4 .node rect{fill:#fff;stroke:#BFD3FB;stroke-width:1.4}
.v4 .node text{font:600 13.5px var(--sans);fill:#0B1220}
.v4 .node.soon rect{stroke:#D5DDEA;stroke-dasharray:4 4}
.v4 .node.soon text{fill:#6C7586}
.v4 .node{animation:v4-fade .5s calc(var(--k)*.12s) backwards}
.v4 .hubglow{transform-box:fill-box;transform-origin:center;animation:v4-pulse 2.4s ease-in-out infinite}
.v4 .hubt{font:400 15px 'Michroma',var(--sans);letter-spacing:.24em;fill:#0B1220}
.v4 .legend{display:flex;gap:16px;flex-wrap:wrap;font:600 12.5px var(--sans);color:var(--body);padding:0 14px 14px}
.v4 .legend i{display:inline-block;width:26px;height:0;border-top:2px solid #2C6DF4;vertical-align:middle;margin-right:6px}
.v4 .legend i.s{border-top:2px dashed #9DB3D8}
@media (max-width:860px){.v4 .mrow{grid-template-columns:1fr}.v4 .oi-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.v4 *,.v4 *::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important}}
.v4 .shock{animation:v4-shock 1.2s calc(var(--k)*.18s) ease-out infinite}
@keyframes v4-shock{0%{opacity:0;transform:translate(0,0)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.v4 .streak{animation:v4-streak .9s calc(var(--k)*.15s) linear infinite}
@keyframes v4-streak{0%{opacity:0;transform:translate(0,0)}30%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.v4 .band{animation:v4-band 1.6s calc(var(--k)*.15s) ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes v4-band{50%{transform:translateY(-2px)}}
.v4 /* approve */
.approve{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--soft);border:1px solid #BFD3FB}
.v4 .ap-btn{font:600 15px var(--sans);color:#fff;background:var(--blue);border:0;border-radius:99px;padding:11px 22px;animation:v4-press .35s 1s backwards;pointer-events:none}
@keyframes v4-press{50%{transform:scale(.94);background:#1A4FD6}}
.v4 .tap{position:absolute;left:70px;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:#2C6DF4;opacity:0;animation:v4-tap .8s .95s ease-out both}
@keyframes v4-tap{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(6)}}
.v4 .stamp{font:600 15px var(--sans);color:#0E8C74;background:#E3F7F2;border:1.5px solid #0E8C74;border-radius:10px;padding:7px 12px;transform-origin:left;animation:v4-stampin .45s 1.3s cubic-bezier(.2,1.6,.4,1) backwards}
@keyframes v4-stampin{from{opacity:0;transform:scale(1.4) rotate(-4deg)}}
.v4 .st.wait{grid-column:2;grid-row:1;color:#6C7586;background:#F1F4F8;animation:v4-chkw 1.8s calc(var(--i)*.55s) both}
@keyframes v4-chkw{0%,85%{opacity:1}100%{opacity:0}}
.v4 .st.chk{animation:v4-chk 2.2s calc(1.8s + var(--i)*.55s) both}
.v4 .st.plc{animation:v4-plc .4s calc(2.8s + var(--i)*.55s) both}
.v4 .seq{animation:v4-rowin .4s calc(var(--i)*.12s) backwards}
.v4 .seq::after{animation:v4-scan .9s calc(1.8s + var(--i)*.55s) ease-out both}
.v4 /* radar */
.radar{padding:20px;display:grid;gap:12px}
.v4 .rd-h .ttl span{color:var(--blue)}
.v4 .radar .field{position:relative;height:380px;border-radius:16px;background:radial-gradient(circle at 50% 52%,#F2F7FF,#fff 70%);border:1px solid var(--hair);overflow:hidden}
.v4 .ring{position:absolute;left:50%;top:52%;border:1px solid #DCE6F5;border-radius:50%;transform:translate(-50%,-50%)}
.v4 .r1{width:28%;aspect-ratio:1}
.v4 .r2{width:56%;aspect-ratio:1}
.v4 .r3{width:86%;aspect-ratio:1}
.v4 .sweep{position:absolute;left:50%;top:52%;width:46%;height:2px;background:linear-gradient(90deg,#2C6DF4,transparent);transform-origin:0 50%;animation:v4-sweep 4s linear infinite;opacity:.5}
@keyframes v4-sweep{to{transform:rotate(360deg)}}
.v4 .ping{position:absolute;width:8px;height:8px;margin:-4px;border-radius:50%;background:#4FC8FF;opacity:0;animation:v4-ping 2.4s calc(var(--p)*.25s + .4s) ease-out infinite}
@keyframes v4-ping{0%{opacity:0;transform:scale(.4)}20%{opacity:.9}100%{opacity:0;transform:scale(2.2)}}
.v4 .store{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;animation:v4-fade .4s calc(.6s + var(--s)*.12s) backwards}
.v4 .store .sd{width:12px;height:12px;border-radius:50%;background:#C7D3E6;border:2px solid #fff;box-shadow:0 0 0 1px #C7D3E6}
.v4 .store b{font:600 11px var(--sans);color:#6C7586;white-space:nowrap}
.v4 .store em{font:600 11px var(--mono);font-style:normal;color:#9AA3B2;background:#F4F6F9;border-radius:6px;padding:1px 6px}
.v4 .you{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:4px}
.v4 .yd{width:22px;height:22px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 2px #2C6DF4,0 0 0 10px #2C6DF41f;animation:v4-youp 1.6s 2.4s ease-out both}
@keyframes v4-youp{0%{box-shadow:0 0 0 2px #2C6DF4,0 0 0 0 #2C6DF466}100%{box-shadow:0 0 0 2px #2C6DF4,0 0 0 18px #2C6DF400}}
.v4 .you b{font:700 13px var(--sans);color:var(--ink)}
.v4 .inb{font:600 12px var(--sans);font-style:normal;color:#fff;background:var(--blue);border-radius:99px;padding:3px 10px;animation:v4-fade .5s 2.6s backwards}
.v4 .legend2{display:flex;gap:16px;flex-wrap:wrap;font:600 12.5px var(--sans);color:var(--body)}
.v4 .legend2 i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.v4 .pg{background:#4FC8FF}
.v4 .sd2{background:#C7D3E6}
.v4 /* web extras */
.webtitle{font:500 22px var(--mono);letter-spacing:.06em;fill:#2C6DF4}
.v4 .bgtrail{animation:v4-fade 1.2s backwards}
.v4 .node text.ot{font:700 15px var(--sans);fill:#1A4FD6}
.v4 .node.o rect{stroke:#2C6DF4;stroke-width:1.8}
.v4 .hubt{font-size:17px}
.v5{--bg:#FFFFFF;--ink:#0B1220;--body:#3F4757;--label:#5E6778;--hair:#E3E8F0;--blue:#2C6DF4;--deep:#1A4FD6;--soft:#EEF4FE;--mint:#0E8C74;--mintsoft:#E3F7F2;
--display:"Jost",system-ui,sans-serif;--sans:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;color-scheme:light}
.v5 .lab{font:600 12px var(--mono);letter-spacing:.04em;color:#6C7586}
.v5 .ttl{font:400 24px/1.15 var(--display);color:var(--ink)}
@keyframes v5-fade{from{opacity:0;transform:translateY(8px)}}
.v5 /* marks */
.mrow{display:grid;grid-template-columns:210px minmax(0,1fr);gap:16px;align-items:center;border-top:1px solid var(--hair);padding-top:14px}
.v5 .mhero{display:grid;place-items:center;height:210px;border-radius:14px;background:#fff;border:1px solid var(--hair)}
.v5 .mmeta{display:grid;gap:10px;min-width:0}
.v5 .mmeta h4{margin:0;font:400 22px var(--display);color:var(--ink)}
.v5 .mmeta h4 span{font:600 12px var(--mono);color:var(--blue);margin-right:8px}
.v5 .mmeta p{margin:0}
.v5 .msm{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.v5 .mlock{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;background:#fff;border:1px solid var(--hair)}
.v5 .wm{font:400 15px 'Michroma',var(--sans);letter-spacing:.2em;color:#0B1220}
.v5 .tile-i{width:32px;height:32px;border-radius:8px;background:#fff;border:1px solid var(--hair);display:grid;place-items:center}
.v5 .av{width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--hair);display:grid;place-items:center}
.v5 .pulse{animation:v5-pulse 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes v5-pulse{50%{opacity:.5;transform:scale(1.3)}}
.v5 .flare{transform-box:fill-box;transform-origin:center;animation:v5-flare 2.2s ease-in-out infinite}
@keyframes v5-flare{0%,100%{opacity:.75;transform:scale(.9)}50%{opacity:1;transform:scale(1.2)}}
.v5 .spark{animation:v5-spark 1.6s calc(var(--k)*.12s) ease-out infinite}
@keyframes v5-spark{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.v5 /* agent */
.ag{padding:20px;display:grid;gap:12px}
.v5 .ag-h,.v5 .ag-f{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.v5 .badge{font:600 12px var(--sans);color:var(--deep);background:var(--soft);border-radius:99px;padding:5px 12px}
.v5 .seqlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.v5 .seq{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--hair);box-shadow:0 8px 24px -18px #0B1220;animation:v5-rowin .5s calc(var(--i)*.6s) backwards}
@keyframes v5-rowin{from{opacity:0;transform:translateX(-14px)}}
.v5 .tx{min-width:0}
.v5 .tx b{display:block;color:var(--ink);font:600 15px var(--sans)}
.v5 .tx span{display:block;color:var(--blue);font:600 13px var(--sans)}
.v5 .tx small{display:block;color:#6C7586;font:600 11.5px var(--mono)}
.v5 .st{grid-column:2;grid-row:1;font:600 12px var(--sans);border-radius:99px;padding:5px 12px;white-space:nowrap}
.v5 .st.chk{color:var(--deep);background:var(--soft);animation:v5-chk 2.6s calc(var(--i)*.6s + .4s) both}
@keyframes v5-chk{0%{opacity:0}10%,40%{opacity:1}55%,100%{opacity:0}}
.v5 .st.plc{color:#fff;background:var(--blue);opacity:0;animation:v5-plc .4s calc(var(--i)*.6s + 1.5s) both}
.v5 .st.plc i{font-style:normal;margin-right:4px}
@keyframes v5-plc{to{opacity:1}}
.v5 .seq{position:relative;overflow:hidden}
.v5 .seq::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#4FC8FF22,transparent);transform:translateX(-100%);animation:v5-scan .9s calc(var(--i)*.6s + .4s) ease-out both}
@keyframes v5-scan{to{transform:translateX(100%)}}
.v5 .pill{font:600 12px var(--sans);color:var(--deep);background:var(--soft);border-radius:99px;padding:5px 12px}
.v5 /* oi */
.oi{padding:20px;display:grid;gap:14px}
.v5 .oi-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:12px}
.v5 .tile{border:1px solid var(--hair);border-radius:14px;padding:14px;display:grid;gap:10px;align-content:start;background:#fff;box-shadow:0 10px 28px -22px #0B1220;min-width:0;position:relative}
.v5 .tile.hot{border-color:#BFD3FB}
.v5 .field{position:relative;height:96px;border-radius:10px;background:linear-gradient(180deg,#F5F9FF,#fff)}
.v5 .d{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--blue);opacity:0;animation:v5-pop .4s calc(var(--n)*.05s + .3s) both}
@keyframes v5-pop{from{opacity:0;transform:scale(0)}to{opacity:.8;transform:scale(1)}}
.v5 .sparkline{width:100%;height:54px}
.v5 .line{stroke-dasharray:420;stroke-dashoffset:420;animation:v5-draw 2s .4s ease-out forwards}
@keyframes v5-draw{to{stroke-dashoffset:0}}
.v5 .area{animation:v5-fade 1s 1.6s backwards}
.v5 .trend{font:600 13px var(--sans);color:var(--blue)}
.v5 .gauge{height:10px;border-radius:99px;background:#EEF2F7;overflow:hidden}
.v5 .g{display:block;height:100%;width:7%;background:#B9C6DA;border-radius:99px;animation:v5-shrink 1.6s .6s ease-out both}
@keyframes v5-shrink{from{width:60%}}
.v5 .gv{font:400 20px/1.2 var(--display);color:#6C7586}
.v5 .gv.blue{color:var(--blue)}
.v5 .units{display:flex;gap:8px}
.v5 .u{font:600 13px var(--sans);color:#fff;background:var(--blue);border-radius:8px;padding:10px 12px;animation:v5-fade .5s calc(2.2s + var(--u)*.3s) backwards}
.v5 .foot{font:600 11px var(--mono);color:#9AA3B2}
.v5 /* web */
.web{width:100%;height:auto;display:block;padding:10px}
.v5 .flow{stroke:#2C6DF4;stroke-width:2.4;stroke-opacity:.85;stroke-dasharray:6 10;animation:v5-flow 1.4s linear infinite,v5-fadein .6s calc(var(--k)*.12s) both}
.v5 .flow.soon{stroke:#8FA8D4;stroke-dasharray:3 9;stroke-opacity:.6}
.v5 .flow.out{stroke:#1A4FD6}
@keyframes v5-flow{to{stroke-dashoffset:-32}}
@keyframes v5-fadein{from{opacity:0}}
.v5 .node rect{fill:#fff;stroke:#BFD3FB;stroke-width:1.4}
.v5 .node text{font:600 13.5px var(--sans);fill:#0B1220}
.v5 .node.soon rect{stroke:#D5DDEA;stroke-dasharray:4 4}
.v5 .node.soon text{fill:#6C7586}
.v5 .node{animation:v5-fade .5s calc(var(--k)*.12s) backwards}
.v5 .hubglow{transform-box:fill-box;transform-origin:center;animation:v5-pulse 2.4s ease-in-out infinite}
.v5 .hubt{font:400 15px 'Michroma',var(--sans);letter-spacing:.24em;fill:#0B1220}
.v5 .legend{display:flex;gap:16px;flex-wrap:wrap;font:600 12.5px var(--sans);color:var(--body);padding:0 14px 14px}
.v5 .legend i{display:inline-block;width:26px;height:0;border-top:2px solid #2C6DF4;vertical-align:middle;margin-right:6px}
.v5 .legend i.s{border-top:2px dashed #9DB3D8}
@media (max-width:860px){.v5 .mrow{grid-template-columns:1fr}.v5 .oi-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.v5 *,.v5 *::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important}}
.v5 .shock{animation:v5-shock 1.2s calc(var(--k)*.18s) ease-out infinite}
@keyframes v5-shock{0%{opacity:0;transform:translate(0,0)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.v5 .streak{animation:v5-streak .9s calc(var(--k)*.15s) linear infinite}
@keyframes v5-streak{0%{opacity:0;transform:translate(0,0)}30%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.v5 .band{animation:v5-band 1.6s calc(var(--k)*.15s) ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes v5-band{50%{transform:translateY(-2px)}}
.v5 /* approve */
.approve{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--soft);border:1px solid #BFD3FB}
.v5 .ap-btn{font:600 15px var(--sans);color:#fff;background:var(--blue);border:0;border-radius:99px;padding:11px 22px;animation:v5-press .35s 1s backwards;pointer-events:none}
@keyframes v5-press{50%{transform:scale(.94);background:#1A4FD6}}
.v5 .tap{position:absolute;left:70px;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:#2C6DF4;opacity:0;animation:v5-tap .8s .95s ease-out both}
@keyframes v5-tap{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(6)}}
.v5 .stamp{font:600 15px var(--sans);color:#0E8C74;background:#E3F7F2;border:1.5px solid #0E8C74;border-radius:10px;padding:7px 12px;transform-origin:left;animation:v5-stampin .45s 1.3s cubic-bezier(.2,1.6,.4,1) backwards}
@keyframes v5-stampin{from{opacity:0;transform:scale(1.4) rotate(-4deg)}}
.v5 .st.wait{grid-column:2;grid-row:1;color:#6C7586;background:#F1F4F8;animation:v5-chkw 1.8s calc(var(--i)*.55s) both}
@keyframes v5-chkw{0%,85%{opacity:1}100%{opacity:0}}
.v5 .st.chk{animation:v5-chk 2.2s calc(1.8s + var(--i)*.55s) both}
.v5 .st.plc{animation:v5-plc .4s calc(2.8s + var(--i)*.55s) both}
.v5 .seq{animation:v5-rowin .4s calc(var(--i)*.12s) backwards}
.v5 .seq::after{animation:v5-scan .9s calc(1.8s + var(--i)*.55s) ease-out both}
.v5 /* radar */
.radar{padding:20px;display:grid;gap:12px}
.v5 .rd-h .ttl span{color:var(--blue)}
.v5 .radar .field{position:relative;height:380px;border-radius:16px;background:radial-gradient(circle at 50% 52%,#F2F7FF,#fff 70%);border:1px solid var(--hair);overflow:hidden}
.v5 .ring{position:absolute;left:50%;top:52%;border:1px solid #DCE6F5;border-radius:50%;transform:translate(-50%,-50%)}
.v5 .r1{width:28%;aspect-ratio:1}
.v5 .r2{width:56%;aspect-ratio:1}
.v5 .r3{width:86%;aspect-ratio:1}
.v5 .sweep{position:absolute;left:50%;top:52%;width:46%;height:2px;background:linear-gradient(90deg,#2C6DF4,transparent);transform-origin:0 50%;animation:v5-sweep 4s linear infinite;opacity:.5}
@keyframes v5-sweep{to{transform:rotate(360deg)}}
.v5 .ping{position:absolute;width:8px;height:8px;margin:-4px;border-radius:50%;background:#4FC8FF;opacity:0;animation:v5-ping 2.4s calc(var(--p)*.25s + .4s) ease-out infinite}
@keyframes v5-ping{0%{opacity:0;transform:scale(.4)}20%{opacity:.9}100%{opacity:0;transform:scale(2.2)}}
.v5 .store{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;animation:v5-fade .4s calc(.6s + var(--s)*.12s) backwards}
.v5 .store .sd{width:12px;height:12px;border-radius:50%;background:#C7D3E6;border:2px solid #fff;box-shadow:0 0 0 1px #C7D3E6}
.v5 .store b{font:600 11px var(--sans);color:#6C7586;white-space:nowrap}
.v5 .store em{font:600 11px var(--mono);font-style:normal;color:#9AA3B2;background:#F4F6F9;border-radius:6px;padding:1px 6px}
.v5 .you{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:4px}
.v5 .yd{width:22px;height:22px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 2px #2C6DF4,0 0 0 10px #2C6DF41f;animation:v5-youp 1.6s 2.4s ease-out both}
@keyframes v5-youp{0%{box-shadow:0 0 0 2px #2C6DF4,0 0 0 0 #2C6DF466}100%{box-shadow:0 0 0 2px #2C6DF4,0 0 0 18px #2C6DF400}}
.v5 .you b{font:700 13px var(--sans);color:var(--ink)}
.v5 .inb{font:600 12px var(--sans);font-style:normal;color:#fff;background:var(--blue);border-radius:99px;padding:3px 10px;animation:v5-fade .5s 2.6s backwards}
.v5 .legend2{display:flex;gap:16px;flex-wrap:wrap;font:600 12.5px var(--sans);color:var(--body)}
.v5 .legend2 i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.v5 .pg{background:#4FC8FF}
.v5 .sd2{background:#C7D3E6}
.v5 /* web extras */
.webtitle{font:500 22px var(--mono);letter-spacing:.06em;fill:#2C6DF4}
.v5 .bgtrail{animation:v5-fade 1.2s backwards}
.v5 .node text.ot{font:700 15px var(--sans);fill:#1A4FD6}
.v5 .node.o rect{stroke:#2C6DF4;stroke-width:1.8}
.v5 .hubt{font-size:17px}
.v5 .flame{transform-box:fill-box;transform-origin:50% 0;animation:v5-flick .25s ease-in-out infinite alternate}
@keyframes v5-flick{to{transform:scaleY(1.25) scaleX(.85)}}
.v5 .plumeb{transform-box:fill-box;transform-origin:center;animation:plume 1s ease-in-out infinite alternate}
.v5 .mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.v5 .mcard{border:1px solid var(--hair);border-radius:14px;background:#fff;padding:16px;display:grid;gap:12px;align-content:start}
.v5 .mcard .hero{display:grid;place-items:center;height:180px}
.v5 .mcard h4{margin:0;font:400 21px var(--display);color:var(--ink)}
.v5 .mcard h4 span{font:600 12px var(--mono);color:var(--blue);margin-right:8px}
.v5 .mcard p{margin:0;font-size:14px}
.v5 .sizes-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:10px;border-top:1px solid var(--hair)}
.v5 .hubt{font-size:19px}
/* the site's form .field is flex; the radar's .field is a positioned box, clipped like the review frame */
.v4 .field{display:block;gap:0;overflow:hidden}

/* animations wait until the visual is on screen (the site's .reveal adds .in) */
.v4.reveal:not(.in) *,.v5.reveal:not(.in) *{animation-play-state:paused!important}
/* reduced motion: the CMO's own rule (scoped above) jumps every animation to its end state */
/* phones: the approval stamp wraps under the button; the data web keeps readable labels and scrolls inside its box */
.v4 .approve{flex-wrap:wrap}
@media(max-width:480px){.v4 .stamp{font-size:13px}}

/* radar: a square field so every ring fits (rings are % of width), centred; the sweep stays inside the outer ring */
.v4 .radar .field{height:auto;aspect-ratio:1/1;width:100%;max-width:600px;margin:0 auto}
.v4 .ring,.v4 .sweep,.v4 .you{top:50%}
.v4 .sweep{width:42%}
.v4 .radar .rd-h,.v4 .legend2,.v4 .radar .foot{max-width:600px;width:100%;margin-left:auto;margin-right:auto}
@media(max-width:520px){.v4 .store b{white-space:normal;max-width:64px;text-align:center;font-size:10px;line-height:1.2}.v4 .store em{font-size:9.5px}}
/* text never sits on a fractional transform once the visual has settled */
.v4,.v5{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* SITE11: data web in the site's own type: Jost for the title (the site's heading face), Inter for every pill;
   the hub is the real nav logo (an <image> of assets/aetova-lockup-ink.svg). Phones get the vertical layout. */
.v5 svg .webtitle{font:400 28px 'Jost',system-ui,sans-serif;letter-spacing:.01em;fill:#0B1220}
.v5 svg .webtitle-sm{font-size:19px}
.v5 svg .node text{font-family:'Inter',system-ui,sans-serif}
.v5 svg .nt-sm{font-size:11.5px}.v5 svg .ot-sm{font-size:12.5px}
.v5-web .web-phone{display:none}
@media(max-width:640px){.v5-web .web-desktop{display:none}.v5-web .web-phone{display:block;max-width:420px;margin:0 auto}}