/* Finale · "Xây nền kiểm soát. Từng bước trao quyền cho AI."
   #s-final[data-k]: 1 the RFQ sinks into one control foundation (source, context, rules, authority, audit) — in the product
   2 AI rises out of the foundation: what AI could do (dashed ghost) vs what it is allowed to do (filled envelope under the boundary)
   3 the promotion gate: evaluated conditions widen the envelope by one bounded task type — a simulated principle, not a pilot result
   4 the same layer over operations: OMEN, VANTIS · 5 closing lockup.
   Status language: solid = in the product · striped = partial · dashed = direction. #s-final.gv-sunk = the RFQ has sunk (set by KBC.final.go). */
#s-final .ag{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s var(--io),visibility 0s .6s}
#s-final:is([data-k="1"],[data-k="2"],[data-k="3"],[data-k="4"]) .ag{opacity:1;visibility:visible;transition:opacity .7s var(--io),visibility 0s}
#s-final .ag .head .h1{font-size:56px}
#s-final .ag-key{position:absolute;right:160px;top:212px;display:flex;gap:26px;font-size:17px;color:var(--steel)}
#s-final .ag-key span{display:flex;align-items:center;gap:10px}
#s-final .ag-key span::before{content:"";width:30px;height:10px;box-sizing:border-box;border-radius:3px;border:2px solid var(--blue);background:rgba(42,99,230,.35)}
#s-final .ag-key .part::before{background:repeating-linear-gradient(135deg,rgba(127,176,255,.55) 0 3px,transparent 3px 6px);border-color:rgba(127,176,255,.6)}
#s-final .ag-key .next::before{border:2px dashed var(--amber);background:none}

/* ---------- beats 1–3: the governed-AI model ---------- */
#s-final .gv{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s var(--io),visibility 0s .6s}
#s-final:is([data-k="1"],[data-k="2"],[data-k="3"]) .gv{opacity:1;visibility:visible;transition:opacity .6s var(--io),visibility 0s}

/* the foundation slab */
#s-final .gv-slab{position:absolute;inset:0;width:1920px;height:1080px;overflow:visible;pointer-events:none}
#s-final .gv-slab .top{fill:url(#gvTop);stroke:rgba(127,176,255,.35);stroke-width:1.5;opacity:0;transition:opacity .9s var(--io)}
#s-final .gv-slab .front{fill:url(#gvFront);stroke:rgba(127,176,255,.28);stroke-width:1.5;opacity:0;transition:opacity .9s var(--io)}
#s-final .gv-slab .sep{stroke:rgba(127,176,255,.18);stroke-width:1.5;opacity:0;transition:opacity .9s}
#s-final .gv-slab .edge{fill:none;stroke:#8FBAFF;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;filter:drop-shadow(0 0 8px rgba(127,176,255,.7));transition:stroke-dashoffset 1.2s var(--io)}
#s-final .gv-slab .rim{fill:none;stroke:rgba(156,195,255,.45);stroke-width:1.5;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--io) .15s}
#s-final:is([data-k="1"],[data-k="2"],[data-k="3"]) .gv-slab :is(.top,.front,.sep){opacity:1}
#s-final:is([data-k="1"],[data-k="2"],[data-k="3"]) .gv-slab :is(.edge,.rim){stroke-dashoffset:0}
#s-final .gv-seg{position:absolute;left:220px;top:826px;width:1480px;height:70px;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,1fr)}
#s-final .gv-seg li{display:flex;align-items:center;justify-content:center;gap:12px;font-size:21px;font-weight:600;color:rgba(142,163,192,.55);transition:color .6s,opacity .6s;opacity:0}
#s-final .gv-seg svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:color .6s,filter .6s}
#s-final:is([data-k="1"],[data-k="2"],[data-k="3"]) .gv-seg li{opacity:1}
#s-final.gv-sunk .gv-seg li{color:var(--white)}
#s-final.gv-sunk .gv-seg svg{color:#9CC3FF;filter:drop-shadow(0 0 6px rgba(127,176,255,.6))}
#s-final.gv-sunk[data-k="1"] .gv-seg li:nth-child(1),#s-final.gv-sunk[data-k="1"] .gv-seg li:nth-child(1) svg{transition-delay:.25s}
#s-final.gv-sunk[data-k="1"] .gv-seg li:nth-child(2),#s-final.gv-sunk[data-k="1"] .gv-seg li:nth-child(2) svg{transition-delay:.4s}
#s-final.gv-sunk[data-k="1"] .gv-seg li:nth-child(3),#s-final.gv-sunk[data-k="1"] .gv-seg li:nth-child(3) svg{transition-delay:.55s}
#s-final.gv-sunk[data-k="1"] .gv-seg li:nth-child(4),#s-final.gv-sunk[data-k="1"] .gv-seg li:nth-child(4) svg{transition-delay:.7s}
#s-final.gv-sunk[data-k="1"] .gv-seg li:nth-child(5),#s-final.gv-sunk[data-k="1"] .gv-seg li:nth-child(5) svg{transition-delay:.85s}
#s-final .gv-chip{position:absolute;left:960px;top:777px;transform:translate(-50%,6px);padding:6px 16px;border-radius:999px;background:rgba(243,246,250,.96);color:#0E1727;font-size:16px;white-space:nowrap;box-shadow:0 8px 24px -8px rgba(0,0,0,.6);opacity:0;transition:opacity .5s,transform .6s var(--out)}
#s-final .gv-chip b{margin-right:6px}
#s-final.gv-sunk:is([data-k="1"],[data-k="2"],[data-k="3"]) .gv-chip{opacity:1;transform:translate(-50%,0);transition-delay:.3s}
#s-final .gv-base{position:absolute;left:220px;top:914px;width:1480px;margin:0;display:flex;justify-content:space-between;align-items:center;font-size:19px;color:var(--steel);opacity:0;transition:opacity .6s}
#s-final .gv-base b{font-size:20px;letter-spacing:.12em;color:var(--blue)}
#s-final .gv-base .r{display:flex;align-items:center;gap:10px;color:#CFE0FF}
#s-final .gv-base .r svg{width:24px;height:24px;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#s-final:is([data-k="1"],[data-k="2"],[data-k="3"]) .gv-base{opacity:1}
#s-final[data-k="1"] .gv-base{transition-delay:1.2s}

/* the RFQ from the story; it sinks into the foundation (.gs) */
#s-final .gv-rfq{position:absolute;left:770px;top:410px;width:380px;box-sizing:border-box;padding:16px 20px 10px;border-radius:16px;background:var(--card,#F3F6FA);color:var(--card-ink,#0E1727);box-shadow:var(--shadow);opacity:0;transform:translateY(18px);transform-origin:50% 100%;transition:opacity .6s var(--out),transform .8s var(--out)}
#s-final .gv-rfq header{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(11,23,48,.1)}
#s-final .gv-rfq header b{font-size:20px} #s-final .gv-rfq header span{font-size:16px;color:#33445C}
#s-final .gv-rfq p{margin:0;height:46px;display:flex;align-items:center;padding:0 12px;font-size:19px;font-weight:600;border-radius:8px;transition:background .45s,box-shadow .45s}
#s-final[data-k="1"] .gv-rfq{opacity:1;transform:none}
#s-final[data-k="1"] .gv-rfq p{background:rgba(42,99,230,.09);box-shadow:inset 0 0 0 1px rgba(42,99,230,.3)}
#s-final[data-k="1"] .gv-rfq p:nth-of-type(1){transition-delay:.5s}#s-final[data-k="1"] .gv-rfq p:nth-of-type(2){transition-delay:.75s}
#s-final[data-k="1"] .gv-rfq p:nth-of-type(3){transition-delay:1s}#s-final[data-k="1"] .gv-rfq p:nth-of-type(4){transition-delay:1.25s}
#s-final.gv-sunk .gv-rfq{opacity:0;transform:translateY(118px) scale(.5,.1);transition:opacity .4s ease-in .38s,transform .75s var(--io)}

/* the three levels of responsibility */
#s-final .gv-rule{position:absolute;left:240px;width:1460px;height:0;border-top:1px solid rgba(142,163,192,.16);opacity:0;transition:opacity .6s}
#s-final .gv-rule.u1{top:640px}#s-final .gv-rule.u2{top:520px}#s-final .gv-rule.u3{top:380px}
#s-final .gv-lv{position:absolute;left:240px;display:grid;grid-template-columns:44px auto;grid-template-rows:auto auto;row-gap:6px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--out),transform .7s var(--out)}
#s-final .gv-lv.v1{top:662px}#s-final .gv-lv.v2{top:542px}#s-final .gv-lv.v3{top:402px}
#s-final .gv-lv b{grid-row:1/3;font-size:19px;font-weight:700;color:var(--blue);padding-top:8px;font-variant-numeric:tabular-nums}
#s-final .gv-lv strong{font-size:31px;font-weight:700;color:var(--white);line-height:1.1}
#s-final .gv-lv.v3 strong{color:#CFE0FF}
#s-final .gv-pill{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:3px 12px 3px 10px;border-radius:999px;font-style:normal;font-size:16px;white-space:nowrap}
#s-final .gv-pill::before{content:"";width:9px;height:9px;border-radius:50%;box-sizing:border-box}
#s-final .gv-pill.on{border:1.5px solid rgba(127,176,255,.7);color:#CFE0FF}#s-final .gv-pill.on::before{background:var(--blue)}
#s-final .gv-pill.part{border:1.5px solid rgba(127,176,255,.45);color:#BFD0EA}#s-final .gv-pill.part::before{border:1.5px solid var(--blue);background:linear-gradient(90deg,var(--blue) 50%,transparent 50%)}
#s-final .gv-pill.dir{border:1.5px dashed rgba(240,166,58,.75);color:var(--amber)}#s-final .gv-pill.dir::before{border:1.5px dashed var(--amber)}
#s-final:is([data-k="2"],[data-k="3"]) :is(.gv-rule,.gv-lv){opacity:1;transform:none}
#s-final[data-k="2"] .gv-lv.v1{transition-delay:.2s}#s-final[data-k="2"] .gv-lv.v2{transition-delay:.35s}#s-final[data-k="2"] .gv-lv.v3{transition-delay:.5s}

/* capability (could) vs authority (allowed) */
#s-final .gv-ghost{position:absolute;left:748px;top:330px;width:424px;height:440px;box-sizing:border-box;border:2px dashed rgba(142,163,192,.55);border-bottom:0;border-radius:18px 18px 0 0;clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--io)}
#s-final .gv-ghost span{position:absolute;left:0;right:0;top:12px;text-align:center;font-size:19px;color:var(--steel)}
#s-final .gv-ghost b,#s-final .gv-env b{color:var(--white)}
#s-final .gv-env{position:absolute;left:760px;width:400px;box-sizing:border-box;border-left:2px solid rgba(127,176,255,.85);border-right:2px solid rgba(127,176,255,.85);clip-path:inset(100% 0 0 0);transition:clip-path .7s var(--io)}
#s-final .gv-env.e1{top:640px;height:130px;background:linear-gradient(180deg,rgba(42,99,230,.36),rgba(42,99,230,.16))}
#s-final .gv-env.e2{top:522px;height:118px;border-color:rgba(127,176,255,.55);background:repeating-linear-gradient(135deg,rgba(42,99,230,.26) 0 9px,rgba(42,99,230,.08) 9px 18px)}
#s-final .gv-env span{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:17px;color:#CFE0FF}
#s-final .gv-ceil{position:absolute;left:736px;top:518px;width:448px;height:4px;border-radius:2px;background:#AFCBFF;box-shadow:0 0 14px rgba(127,176,255,.8);transform:scaleX(0);transition:transform .7s var(--io),opacity .4s}
#s-final .gv-ceil span{position:absolute;left:calc(100% + 18px);top:-12px;font-size:18px;font-weight:600;color:#AFCBFF;white-space:nowrap;transition:opacity .4s}
#s-final .gv-ceil .b{opacity:0;font-size:20px;font-weight:700;color:var(--amber)}
#s-final.gv-stop .gv-ceil{background:var(--amber);box-shadow:0 0 22px rgba(240,166,58,.85);transition:transform .7s var(--io),opacity .4s,background .25s,box-shadow .25s}
#s-final.gv-stop .gv-ceil .a{opacity:0}#s-final.gv-stop:not([data-k="3"]) .gv-ceil .b{opacity:1}
#s-final.gv-reach .gv-ghost{border-color:rgba(214,229,255,.95)}
#s-final.gv-reach .gv-ghost span{color:var(--white)}
#s-final:is([data-k="2"],[data-k="3"]) :is(.gv-ghost,.gv-env){clip-path:inset(0 0 0 0)}
#s-final:is([data-k="2"],[data-k="3"]) .gv-ceil{transform:none}
#s-final[data-k="2"] .gv-ghost{transition-delay:.4s}#s-final[data-k="2"] .gv-env.e1{transition-delay:.9s}#s-final[data-k="2"] .gv-env.e2{transition-delay:1.4s}#s-final[data-k="2"] .gv-ceil{transition-delay:1.9s}
#s-final .gv-ai{position:absolute;left:904px;top:674px;display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 14px;border-radius:12px;background:rgba(12,26,58,.96);border:1.5px solid rgba(156,195,255,.85);box-shadow:0 0 24px rgba(127,176,255,.45);font-size:22px;font-weight:700;letter-spacing:.06em;color:var(--white);opacity:0;transform:translateY(80px);transition:opacity .5s var(--out),transform 1s var(--io)}
#s-final .gv-ai i{width:12px;height:12px;background:#B9D3FF;transform:rotate(45deg);box-shadow:0 0 12px rgba(156,195,255,.95)}
#s-final[data-k="2"] .gv-ai{opacity:1;transform:none;transition-delay:1.1s}
#s-final.gv-reach[data-k="2"] .gv-ai{transform:translateY(-150px);transition:opacity .5s,transform .75s cubic-bezier(.45,0,.8,.3)}
#s-final.gv-stop[data-k="2"] .gv-ai{transform:none;transition:opacity .5s,transform .9s var(--out) .2s}
#s-final .gv-ex{position:absolute;left:1200px;margin:0;font-size:18px;color:#CFE0FF;white-space:nowrap;opacity:0;transform:translateX(-8px);transition:opacity .5s var(--out),transform .7s var(--out)}
#s-final .gv-ex.x1{top:688px}#s-final .gv-ex.x2{top:580px}
#s-final .gv-ex b{color:var(--white)}
#s-final .gv-out{position:absolute;left:1200px;top:388px;width:530px;opacity:0;transition:opacity .5s}
#s-final .gv-out small{display:block;margin-bottom:8px;font-size:16px;letter-spacing:.04em;color:var(--steel)}
#s-final .gv-out span{display:inline-block;margin-right:8px;padding:5px 12px;border-radius:999px;border:1.5px dashed rgba(142,163,192,.5);font-size:16px;color:rgba(200,212,230,.62);white-space:nowrap;transition:transform 1s var(--io),color .5s,border-color .5s,background .5s}
#s-final:is([data-k="2"],[data-k="3"]) :is(.gv-ex,.gv-out){opacity:1;transform:none}
#s-final[data-k="2"] .gv-ex.x1{transition-delay:1.6s}#s-final[data-k="2"] .gv-ex.x2{transition-delay:2s}#s-final[data-k="2"] .gv-out{transition-delay:2.3s}

/* the promotion gate: three conditions, evaluated per task type (direction) — not the per-quote business gate */
#s-final .gv-gate{position:absolute;left:716px;top:486px;width:488px;height:68px;box-sizing:border-box;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;padding:0 8px;border-radius:14px;background:rgba(9,19,44,.97);border:1.5px dashed rgba(240,166,58,.8);box-shadow:0 14px 34px -14px rgba(0,0,0,.8);opacity:0;transform:scaleX(.85);transition:opacity .5s,transform .6s var(--out)}
#s-final .gv-gate p{margin:0;display:grid;grid-template-columns:34px auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;justify-content:center;opacity:.55;transition:opacity .4s}
#s-final .gv-gate i{grid-row:1/3;width:32px;height:32px;box-sizing:border-box;border-radius:9px;display:grid;place-items:center;border:1.5px dashed rgba(142,163,192,.7);color:var(--steel);transition:background .4s,border-color .4s,color .4s,box-shadow .4s}
#s-final .gv-gate svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#s-final .gv-gate b{font-size:18px;font-weight:700;color:var(--white);line-height:1.15}
#s-final .gv-gate small{font-size:16px;color:#BFD0EA;line-height:1.2}
#s-final[data-k="3"] .gv-gate{opacity:1;transform:none;transition-delay:.2s}
#s-final[data-k="3"] .gv-gate p{opacity:1}
#s-final[data-k="3"] .gv-gate i{border:1.5px solid #8FBAFF;background:rgba(42,99,230,.4);color:var(--white);box-shadow:0 0 12px rgba(127,176,255,.55)}
#s-final[data-k="3"] .gv-gate p:nth-child(1),#s-final[data-k="3"] .gv-gate p:nth-child(1) i{transition-delay:.6s}
#s-final[data-k="3"] .gv-gate p:nth-child(2),#s-final[data-k="3"] .gv-gate p:nth-child(2) i{transition-delay:1s}
#s-final[data-k="3"] .gv-gate p:nth-child(3),#s-final[data-k="3"] .gv-gate p:nth-child(3) i{transition-delay:1.4s}
#s-final[data-k="3"] .gv-ceil{opacity:0}#s-final[data-k="3"] .gv-ceil span{opacity:0}
/* the scope that would be granted to one task type: dashed, illustrative, not activated */
#s-final .gv-env3{position:absolute;left:760px;top:382px;width:400px;height:94px;box-sizing:border-box;border:2px dashed rgba(156,195,255,.7);background:rgba(42,99,230,.08);clip-path:inset(100% 0 0 0);transition:clip-path .7s var(--io)}
#s-final .gv-env3 i{position:absolute;width:18px;height:18px;border:0 solid #D6E5FF;opacity:0;transition:opacity .4s}
#s-final .gv-env3 .c1{left:-6px;top:-6px;border-left-width:3px;border-top-width:3px}#s-final .gv-env3 .c2{right:-6px;top:-6px;border-right-width:3px;border-top-width:3px}
#s-final .gv-env3 .c3{left:-6px;bottom:-6px;border-left-width:3px;border-bottom-width:3px}#s-final .gv-env3 .c4{right:-6px;bottom:-6px;border-right-width:3px;border-bottom-width:3px}
#s-final .gv-env3 small{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-size:16px;color:var(--amber);opacity:0;transition:opacity .5s}
#s-final[data-k="3"] .gv-env3{clip-path:inset(-10px -10px -10px -10px);transition-delay:1.9s}
#s-final[data-k="3"] .gv-env3 i{opacity:1;transition-delay:2.2s}
#s-final[data-k="3"] .gv-env3 small{opacity:1;transition-delay:2.8s}
#s-final[data-k="3"] .gv-out .t1{transform:translate(var(--t1x,-372px),var(--t1y,-32px));color:#DCE8FF;border:1.5px dashed #9CC3FF;background:rgba(42,99,230,.16);transition-delay:2.3s}
#s-final[data-k="3"] .gv-ai{opacity:1;transform:none}
#s-final .gv-gcap{position:absolute;left:1236px;top:490px;margin:0;font-size:19px;color:#CFE0FF;opacity:0;transform:translateX(-8px);transition:opacity .5s var(--out),transform .7s var(--out)}
#s-final .gv-gcap b{color:var(--white)}
#s-final .gv-gcap span{display:block;margin-top:4px;font-size:16px;color:var(--amber)}
#s-final[data-k="3"] .gv-gcap{opacity:1;transform:none;transition-delay:.5s}

/* ---------- beat 4: the OMEN / VANTIS layer (unchanged design, now beat 4) ---------- */
#s-final .ag-bound{position:absolute;left:160px;top:290px;width:1600px;height:520px;box-sizing:border-box;border:2px solid rgba(127,176,255,.62);border-radius:28px;background:rgba(30,79,214,.05);box-shadow:0 0 60px -10px rgba(127,176,255,.25) inset;opacity:0;transform:scale(.97);transition:opacity .7s var(--out),transform .9s var(--out)}
#s-final .ag-bound em{position:absolute;left:30px;top:-15px;padding:0 12px;background:var(--navy);font-style:normal;font-size:18px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);opacity:0;transition:opacity .5s}
#s-final .ag-rfq{position:absolute;left:280px;top:356px;width:440px;box-sizing:border-box;padding:16px 22px 10px;border-radius:16px;background:var(--card,#F3F6FA);color:var(--card-ink,#0E1727);box-shadow:var(--shadow);opacity:0;transform:translateY(16px);transition:opacity .7s var(--out),transform .9s var(--out)}
#s-final .ag-rfq header{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(11,23,48,.1)}
#s-final .ag-rfq header b{font-size:20px;font-weight:700} #s-final .ag-rfq header span{font-size:17px;color:#33445C}
#s-final .ag-rfq .r{display:flex;align-items:center;gap:12px;margin:0;height:57px;box-sizing:border-box;padding:0 10px;border-radius:9px;background:rgba(42,99,230,.08);box-shadow:inset 0 0 0 1px rgba(42,99,230,.3)}
#s-final .ag-rfq .r span{width:104px;flex:none;font-size:16px;color:#5B6B82}
#s-final .ag-rfq .r b{font-size:20px;font-weight:600;white-space:nowrap}
#s-final[data-k="4"] :is(.ag-bound,.ag-rfq){opacity:1;transform:none;transition-delay:.25s}

/* horizon: the same rule widened over operations */
#s-final[data-k="4"] .ag-bound{left:160px;top:290px;width:1600px;height:520px;transition-delay:0s,0s,.2s,.2s,.2s,.2s}
#s-final[data-k="4"] .ag-bound .b1{opacity:0} #s-final[data-k="4"] .ag-bound .b3{opacity:1;transition-delay:1s}
#s-final .ag-map{position:absolute;inset:0;width:1920px;height:1080px;overflow:visible;pointer-events:none}
#s-final .ag-map .rt{fill:none;stroke:rgba(127,176,255,.75);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--io)}
#s-final .ag-map .vz{fill:none;stroke:rgba(156,195,255,.95);stroke-width:9;stroke-linecap:round;stroke-dasharray:.03 .035;opacity:0;filter:drop-shadow(0 0 10px rgba(127,176,255,.7));transition:opacity .6s}
#s-final .ag-map .lk{fill:none;stroke:rgba(142,163,192,.6);stroke-width:2;stroke-dasharray:3 6;opacity:0;transition:opacity .5s}
#s-final .ag-map .ag-pt{fill:var(--navy);stroke:var(--blue);stroke-width:2.5;opacity:0;transition:opacity .4s}
#s-final .ag-map>g{opacity:0;transition:opacity .6s}
#s-final .ag-map g g :is(path,circle){fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#s-final .ag-map .storm .core{fill:rgba(240,166,58,.14);stroke:var(--amber);stroke-width:2}
#s-final .ag-map .storm .ring{fill:none;stroke:rgba(240,166,58,.45);stroke-width:2;transform-origin:1010px 706px;animation:agPulse 2.4s ease-out infinite}
#s-final .ag-map .storm g :is(path,circle){stroke:var(--amber)}
#s-final .ag-map .ship>circle{fill:#0E1D3D;stroke:rgba(156,195,255,.9);stroke-width:2}
#s-final .ag-map .ship g path{stroke:var(--white)}
@keyframes agPulse{0%{transform:scale(.75);opacity:.9}100%{transform:scale(1.45);opacity:0}}
#s-final[data-k="4"] .ag-map .rt{stroke-dashoffset:0;transition-delay:.5s}
#s-final[data-k="4"] .ag-map .ag-pt{opacity:1;transition-delay:.5s}
#s-final[data-k="4"] .ag-map .storm{opacity:1;transition-delay:1.6s}
#s-final[data-k="4"] .ag-map .lk1{opacity:1;transition-delay:1.6s}
#s-final[data-k="4"] .ag-map .ship{opacity:1;transition-delay:1.2s}
#s-final[data-k="4"] .ag-map .vz,#s-final[data-k="4"] .ag-map .lk2{opacity:1;transition-delay:2.4s}

#s-final .ag-place{position:absolute;top:762px;font-size:18px;font-weight:600;color:var(--white);opacity:0;transition:opacity .5s}
#s-final .ag-place.p1{left:742px}#s-final .ag-place.p2{left:1650px}
#s-final .ag-place.p3{left:1300px;font-weight:500;font-size:16px;color:var(--blue)}
#s-final[data-k="4"] .ag-place{opacity:1;transition-delay:.9s}#s-final[data-k="4"] .ag-place.p3{transition-delay:2.6s}

/* product cards: icon tile + name + role, three capabilities, one honest status line */
#s-final .ag-card,#s-final .ag-nq{position:absolute;opacity:0;transform:translateY(14px);transition:opacity .6s var(--out),transform .8s var(--out)}
#s-final .ag-card{top:330px;height:340px;display:flex;flex-direction:column;box-sizing:border-box;padding:20px 24px 16px;border-radius:20px;background:linear-gradient(180deg,rgba(20,36,72,.92),rgba(12,24,52,.92));border:1.5px solid rgba(127,176,255,.32);box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
#s-final .ag-om{left:790px;width:440px;border-color:rgba(240,166,58,.45)}
#s-final .ag-vt{left:1270px;width:450px;border-style:dashed;border-color:rgba(156,195,255,.6)}
#s-final .ag-card header{display:flex;align-items:center;gap:16px}
#s-final .ag .tile{flex:none;width:54px;height:54px;border-radius:15px;display:grid;place-items:center}
#s-final .ag .tile svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#s-final .ag-om .tile{color:#FFD08A;background:radial-gradient(circle at 35% 30%,rgba(240,166,58,.42),rgba(240,166,58,.1));box-shadow:inset 0 0 0 1.5px rgba(240,166,58,.6),0 0 26px rgba(240,166,58,.3)}
#s-final .ag-vt .tile,#s-final .ag-nq .tile{color:#CFE0FF;background:radial-gradient(circle at 35% 30%,rgba(127,176,255,.45),rgba(42,99,230,.14));box-shadow:inset 0 0 0 1.5px rgba(156,195,255,.6),0 0 26px rgba(127,176,255,.3)}
#s-final .ag-card header b{display:block;font-size:28px;font-weight:700;letter-spacing:.08em;color:var(--white)}
#s-final .ag-om header b{color:var(--amber)}
#s-final .ag-card header div span{display:block;font-size:18px;color:var(--steel)}
#s-final .ag-card ul{margin:14px 0 0;padding:0;list-style:none}
#s-final .ag-card li{display:grid;grid-template-columns:40px 1fr auto;align-items:center;column-gap:14px;height:50px;border-top:1px solid rgba(142,163,192,.16);opacity:0;transform:translateX(-8px);transition:opacity .45s var(--out),transform .6s var(--out)}
#s-final .ag-card li i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(127,176,255,.1);color:#BFD5FF}
#s-final .ag-om li i{background:rgba(240,166,58,.12);color:#FFC774}
#s-final .ag-card li svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#s-final .ag-card li b{font-size:20px;font-weight:600;color:var(--white);white-space:nowrap}
#s-final .ag-card li small{font-size:15px;color:var(--steel);text-align:right;white-space:nowrap}
#s-final .ag-vt li{grid-template-columns:40px 1fr;grid-template-rows:1fr 1fr;height:58px;row-gap:2px}
#s-final .ag-vt li i{grid-row:1/3}
#s-final .ag-vt li b{grid-column:2;align-self:end;font-size:19px;line-height:1.1}
#s-final .ag-vt li small{grid-column:2;text-align:left;align-self:start;font-size:14.5px;line-height:1.3}
#s-final .ag-vt li:last-child small{color:var(--amber)}
#s-final .ag-card .st{display:flex;align-items:center;gap:10px;margin:auto 0 0;white-space:nowrap;padding-top:12px;border-top:1px solid rgba(142,163,192,.16);font-size:15.5px;color:var(--steel)}
#s-final .ag-card .st em{flex:none;width:9px;height:9px;border-radius:50%}
#s-final .ag-card .st .on{background:#5BD49B;box-shadow:0 0 0 4px rgba(91,212,155,.18)}
#s-final .ag-card .st .dir{box-sizing:border-box;border:2px dashed var(--amber);width:11px;height:11px}
#s-final .ag-vt .st{color:var(--amber)}
#s-final .ag-nq{left:280px;top:672px;display:flex;align-items:center;gap:14px}
#s-final .ag-nq .tile{width:46px;height:46px;border-radius:13px}#s-final .ag-nq .tile svg{width:26px;height:26px}
#s-final .ag-nq b{font-size:22px;font-weight:700;letter-spacing:.08em;color:var(--white)}
#s-final .ag-nq>span:last-child{font-size:17px;color:var(--steel)}
#s-final[data-k="4"] :is(.ag-card,.ag-nq){opacity:1;transform:none}
#s-final[data-k="4"] .ag-nq{transition-delay:.3s}#s-final[data-k="4"] .ag-om{transition-delay:.8s}#s-final[data-k="4"] .ag-vt{transition-delay:1.9s}
#s-final[data-k="4"] .ag-card li{opacity:1;transform:none}
#s-final[data-k="4"] .ag-om li:nth-child(1){transition-delay:1.1s}#s-final[data-k="4"] .ag-om li:nth-child(2){transition-delay:1.3s}#s-final[data-k="4"] .ag-om li:nth-child(3){transition-delay:1.5s}
#s-final[data-k="4"] .ag-vt li:nth-child(1){transition-delay:2.2s}#s-final[data-k="4"] .ag-vt li:nth-child(2){transition-delay:2.4s}#s-final[data-k="4"] .ag-vt li:nth-child(3){transition-delay:2.6s}

/* the vignette would grey the card at the stage edge; soften it while the finale diagram is on */
#stage.fin-soft #shade{opacity:.26;transition:opacity .8s}   /* class set by app.js (was a :has selector) */
/* calm: was @media (prefers-reduced-motion:reduce); body.calm is set by app.js and can be turned off */
body.calm #s-final .ag *{animation:none!important;transition:none!important}