/* "See it move" scenes: connection ring, signal grid, one report every screen, approval chain. Markup is the final frame (visible without JS);
   scenes3.js plays a loop only while on screen. All sizes are fixed or aspect-ratio based, so nothing shifts layout (CLS 0). */
.s3sec{padding:72px 0}
.s3sec .sec-h{margin-bottom:32px}
.s3{--ok:#34a853;--bad:#ea4335;--warn:#fbbc05;--blue:#4b9bff;margin:0;position:relative;border-radius:var(--r-xl);background:linear-gradient(180deg,#0e1424,#0a0f1b);border:1px solid var(--line2);box-shadow:0 50px 100px -50px rgb(0 0 0/.9),0 0 90px -50px var(--cg,rgb(66 133 244/.5));overflow:hidden}
.s3-in{padding:clamp(14px,2.4vw,28px)}
.s3-h{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:clamp(14px,2vw,22px);min-height:34px}
.s3-t{font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.s3-ct{font-size:15px;color:var(--t2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.s3-ct b{font:700 clamp(22px,2.6vw,30px)/1 Onest;letter-spacing:-.03em;color:var(--t);font-variant-numeric:tabular-nums}
.s3-sl{color:var(--t3);margin:0 4px}
.s3-ex{font:600 12px/1 Onest;font-style:normal;padding:4px 8px;border-radius:999px;background:rgb(255 255 255/.08);color:var(--t2);margin-left:6px}
.s3-cap{padding:0 clamp(14px,2.4vw,28px) 18px;font-size:13.5px;color:var(--t3);max-width:60em}
.s3-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:clamp(12px,2vw,20px) 0 0;font-size:14px;color:var(--t2)}
.s3-lock{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgb(52 168 83/.14);color:#7ee2a0;font-weight:600}

/* ---------- 1. ring ---------- */
.rg-stage{position:relative;width:min(100%,540px);aspect-ratio:1;margin:0 auto}
.rg-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rg-sp{fill:none;stroke:rgb(255 255 255/.12);stroke-width:1.5;stroke-dasharray:.04 .03;vector-effect:non-scaling-stroke}
.rg-sp.on{stroke:var(--ok);stroke-dasharray:1;stroke-width:2}
.rg-hub{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;display:grid;justify-items:center;gap:2px;padding:14px 18px;min-width:140px;border-radius:var(--r-lg);background:#fff;color:#0d1220;box-shadow:0 30px 60px -20px rgb(0 0 0/.9),0 0 0 1px rgb(255 255 255/.2)}
.rg-hub b{font:700 17px/1.1 Onest;letter-spacing:-.03em}.rg-hub small{font-size:12px;color:#5c6478}
.rg-mk{width:34px;height:34px;display:block}.rg-mk svg{width:100%;height:100%}
.rg-ring{position:absolute;inset:-10px;border-radius:calc(var(--r-lg) + 8px);border:1.5px solid rgb(52 168 83/.55);pointer-events:none}
.rg-n{position:absolute;z-index:2;translate:-50% -50%;width:clamp(44px,12%,66px);aspect-ratio:1;display:grid;place-items:center;border-radius:18px;background:#121a2e;border:1px solid var(--line2);transition:border-color .4s,box-shadow .4s,opacity .4s}
.rg-n img{width:52%;height:52%;object-fit:contain;filter:grayscale(1) opacity(.45);transition:filter .4s}
.rg-n.on{border-color:rgb(52 168 83/.8);box-shadow:0 0 0 4px rgb(52 168 83/.14),0 14px 30px -12px rgb(52 168 83/.6)}
.rg-n.on img,.rg-n.lit img{filter:none}
.rg-n.pl{opacity:.55;border-style:dashed}
.rg-d{position:absolute;right:-4px;top:-4px;width:12px;height:12px;border-radius:50%;background:var(--ok);border:2px solid #0a0f1b;scale:0;transition:scale .35s var(--ease)}
.rg-n.on .rg-d{scale:1}
.rg-nm{position:absolute;top:calc(100% + 6px);left:50%;translate:-50% 0;font:600 12px/1 Onest;font-style:normal;color:var(--t2);white-space:nowrap}
.rg-pt{position:absolute;top:calc(100% + 6px);left:50%;translate:-50% 0;font:600 12px/1 Onest;padding:3px 8px;border-radius:999px;border:1px dashed rgb(255 255 255/.3);color:var(--t3);white-space:nowrap}
.rg-n.pl .rg-nm{display:none}
.rg-stage::before{content:"";position:absolute;inset:13%;border-radius:50%;border:1px dashed rgb(255 255 255/.1)}
.rg-stage::after{content:"";position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(closest-side,rgb(52 168 83/.12),rgb(75 155 255/.06) 55%,transparent);pointer-events:none}
@media (max-width:640px){.rg-nm{display:none}.rg-n.pl{width:44px}.rg-hub{min-width:112px;padding:10px 12px}.rg-hub small{display:none}}
@media (prefers-reduced-motion:no-preference){.rg-ring{animation:s3pulse 2.6s ease-in-out infinite}@keyframes s3pulse{50%{scale:1.06;opacity:.4}}}