/* /software/scout/ page layout: extractor, bento grid, supply-chain plate, Hudson theatre. */
/* --hud resolves to --violet via bodyAcc; the page keeps the local name. */
body{--acc:var(--teal);--acc-txt:var(--teal-txt);--hud:#a78bfa}
/* watching strip */
.watch{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:1.125rem 0}
.watch .wrap{display:flex;align-items:center;gap:.75rem 2rem;flex-wrap:wrap}
.watch .lb{color:var(--t4)}
.watch span.it{display:inline-flex;align-items:center;gap:.6rem;color:var(--t2);font-size:.875rem}
.watch span.it::before{content:'';width:5px;height:5px;background:var(--acc);flex:none}

/* ============ 01 SOC 2 EXTRACTOR ============ */
.ex{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);border:1px solid var(--rule-2);background:linear-gradient(180deg,#111116,#0c0c0f);margin-top:clamp(3rem,5vw,4.5rem)}
@media(max-width:940px){.ex{grid-template-columns:1fr}}
.ex-l{display:flex;flex-direction:column;min-width:0}
.ex-r{border-left:1px solid var(--rule-2);display:flex;flex-direction:column;min-width:0;position:relative}
@media(max-width:940px){.ex-r{border-left:0;border-top:1px solid var(--rule-2)}}
.ex-head{display:flex;align-items:center;gap:.875rem;padding:1.125rem 1.25rem;border-bottom:1px solid var(--rule-2);flex:none}
.ex-ic{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;color:var(--t3);border:1px solid var(--rule);padding:.4rem .45rem;flex:none}
.ex-fm{min-width:0;flex:1}
.ex-fm b{display:block;font-size:.875rem;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-fm i{display:block;font-style:normal;font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t4);margin-top:.25rem}
.ex-run{display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 .875rem;white-space:nowrap;background:var(--t1);color:var(--ink);font-size:.75rem;font-weight:600;letter-spacing:-.01em;flex:none;transition:background .25s,opacity .25s}
.ex-run:hover{background:#f2f2f4}
.ex-run:disabled{background:transparent;color:var(--t4);border:1px solid var(--rule-2);cursor:default}
.ex-sp{width:.6rem;height:.6rem;border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;display:none;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ex.is-analyzing .ex-sp{display:block}
.ex-doc{position:relative;overflow:hidden;padding:1.25rem;border-bottom:1px solid var(--rule-2);flex:none}
.ex-page{display:flex;flex-direction:column;gap:.5rem}
.ex-page i{display:block;height:6px;background:rgba(255,255,255,.06)}
.ex-scan{position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 18%,transparent),transparent);opacity:0;pointer-events:none}
.ex.is-analyzing .ex-scan{opacity:1;animation:scan 1.15s cubic-bezier(.5,0,.5,1) infinite}
@keyframes scan{to{top:100%}}
.ex-ctrls{padding:1.125rem 1.25rem;flex:1;min-height:0;display:flex;flex-direction:column}
.ex-ch{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--rule-2);flex:none;font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t4)}
.ex-ch b{color:var(--acc-txt);font-weight:500}
.ex-ctrl{display:grid;grid-template-columns:2.75rem minmax(0,1fr) auto;align-items:baseline;gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--rule-3);opacity:0;transform:translateY(5px);transition:opacity .45s var(--e),transform .45s var(--e)}
.ex.is-done .ex-ctrl{opacity:1;transform:none}
.ex-ctrl .cc{font-family:var(--mono);font-size:.6875rem;color:var(--t4)}
.ex-ctrl .nm{font-size:.8125rem;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-ctrl .st{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.ex-ctrl .st::before{content:'';width:5px;height:5px;background:currentColor;flex:none}
.st.ok{color:#4fc98a}.st.warn{color:#d99a2b}.st.bad{color:#ff7a6b}
.ex-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;padding:2rem;text-align:center;transition:opacity .4s}
.ex.is-done .ex-empty{opacity:0;pointer-events:none}
.ex-empty svg{width:34px;height:34px;color:var(--hud)}
.ex-empty p{font-size:.875rem;line-height:1.6;color:var(--t3);max-width:30ch}
.ex-empty p b{color:var(--t1);font-weight:500}
.ex-res{padding:1.25rem;display:flex;flex-direction:column;gap:1.125rem;opacity:0;pointer-events:none;transition:opacity .5s .1s}
.ex.is-done .ex-res{opacity:1;pointer-events:auto}
.ex-rh{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--hud);flex:none}
.ex-rh svg{width:15px;height:15px}
.ex-sum{font-size:.9375rem;line-height:1.6;color:var(--t2)}
.ex-sum b{color:var(--t1);font-weight:500}
.ex-bh{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);padding-bottom:.5rem;border-bottom:1px solid var(--rule-2);margin-bottom:.625rem}
.ex-bh em{font-style:normal;color:var(--acc-txt)}
.ex-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.ex-chip{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--rule-2);padding:.4rem .6rem;font-size:.8125rem;color:var(--t2);transition:border-color .25s,color .25s,background .25s}
.ex-chip .cat{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t4)}
.ex-chip .pl{font-family:var(--mono);font-size:.75rem;color:var(--t4);width:.75rem;text-align:center}
.ex-chip:hover{border-color:var(--t3);color:var(--t1)}
.ex-chip.added{border-color:color-mix(in srgb,var(--acc) 55%,transparent);color:var(--t1);background:color-mix(in srgb,var(--acc) 8%,transparent)}
.ex-chip.added .pl{color:var(--acc-txt)}
.ex-conn{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--rule-3)}
.ex-conn .path{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--t3);min-width:0}
.ex-conn .path b{color:var(--t2);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-conn .ar{color:var(--t4)}
.ex-conn .rt{display:flex;align-items:center;gap:.75rem;flex:none}
.ex-conn .ty{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;color:var(--t4)}
.ex-add{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--rule);padding-bottom:.15rem;transition:color .25s,border-color .25s}
.ex-add:hover{color:var(--t1);border-color:var(--t2)}
.ex-conn.added .ex-add{color:var(--acc-txt);border-color:transparent}
.ex-find{border-left:2px solid #d99a2b;padding:.5rem 0 .5rem .8rem;margin-bottom:.625rem}
.ex-find .top{display:flex;align-items:center;gap:.75rem;margin-bottom:.3rem}
.ex-find .sev{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:#d99a2b}
.ex-find .cat{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t4)}
.ex-find b{display:block;font-size:.875rem;font-weight:500;color:var(--t1);margin-bottom:.25rem}
.ex-find p{font-size:.8125rem;line-height:1.55;color:var(--t3);margin-bottom:.5rem}
.ex-cbtn{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--rule);padding-bottom:.15rem;transition:color .25s}
.ex-cbtn:hover{color:var(--t1)}
.ex-cbtn.done{color:var(--acc-txt);border-color:transparent}
.ex-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.875rem;border-top:1px solid var(--rule-2);font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t4)}
.ex-reset{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);transition:color .25s}
.ex-reset:hover{color:var(--t1)}

/* ============ 03 BENTO ============ */
/* Two-layer containment: an outer card holds an inner screen. The inner screen
   is its own container, so type scales with its width and density holds.
   Two-up, so each drawn screen is large enough to read as a real product. */
/* subgrid needs EXPLICIT parent rows: implicit tracks cannot be subgridded,
   so the row pairs are declared here, one pair per card row. */
.bx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto auto);gap:var(--gut);margin-top:clamp(3rem,5vw,4.5rem)}
/* two-up needs real width; below 1080 the drawn screens get their own row */
@media(max-width:1080px){.bx{grid-template-columns:1fr;grid-template-rows:repeat(6,auto auto)}}
@supports not (grid-template-rows:subgrid){.bx-c{display:flex;flex-direction:column}.bx-vw{display:flex;flex-direction:column}}
.bx-c{display:grid;grid-template-rows:subgrid;grid-row:span 2;min-width:0;border:1px solid var(--rule-2);background:linear-gradient(180deg,#0e0e12,#0b0b0e);padding:clamp(1.25rem,2.2vw,2rem);transition:border-color .4s var(--e),background .4s var(--e)}
.bx-c:hover{border-color:var(--rule);background:linear-gradient(180deg,#101016,#0c0c10)}
.bx-vw{container-type:inline-size;min-width:0;display:flex}
.bx-v{flex:1 1 auto;font-size:clamp(9px,2.32cqw,13.5px);border:1px solid var(--rule-3);background:#08080b;padding:1.35em;min-height:17.5em;display:flex;flex-direction:column;overflow:hidden;position:relative}
.bx-cap{padding-top:clamp(1.25rem,2vw,1.75rem)}
.bx-cap h3{font-size:1.125rem;font-weight:500;letter-spacing:-.028em;color:var(--t1);margin-bottom:.5rem}
.bx-cap p{font-size:.9375rem;line-height:1.6;color:var(--t3);max-width:44ch}
/* shared inner header */
.bx-h{display:flex;align-items:flex-start;justify-content:space-between;gap:1em;flex:none;margin-bottom:1.1em}
.bx-h .t{font-size:1.02em;font-weight:500;letter-spacing:-.02em;color:var(--t1);white-space:nowrap}
.bx-h .n{font-family:var(--mono);font-size:.74em;letter-spacing:.1em;color:var(--t4);border:1px solid var(--rule-3);padding:.3em .55em;flex:none}
/* trend */
.bx-sc{display:flex;align-items:baseline;gap:.5em;flex:none}
.bx-sc b{font-size:3.4em;font-weight:500;letter-spacing:-.05em;color:var(--t1);line-height:.82}
.bx-sc u,.bx-sc s{text-decoration:none;font-family:var(--mono);font-size:.78em}
.bx-sc u{color:#4fc98a}
.bx-sc s{color:var(--t4)}
.bx-chart{flex:1 1 auto;min-height:6em;position:relative;margin-top:1em}
.bx-chart svg{position:absolute;inset:0;width:100%;height:100%}
.bx-pin{position:absolute;width:.62em;height:.62em;border-radius:50%;background:var(--pc);transform:translate(-50%,-50%);box-shadow:0 0 0 .3em color-mix(in srgb,var(--pc) 20%,transparent),0 0 0 .34em rgba(8,8,11,.9)}
.bx-pin::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--pc);animation:pinPulse 2.8s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:var(--pd,0s)}
@keyframes pinPulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(3.4);opacity:0}100%{transform:scale(3.4);opacity:0}}
.bx-tip{position:absolute;left:50%;bottom:calc(100% + .85em);transform:translateX(-50%) translateY(.3em);min-width:9.5em;background:#15151b;border:1px solid var(--rule);padding:.6em .7em;opacity:0;pointer-events:none;transition:opacity .22s var(--e),transform .22s var(--e);z-index:4;text-align:left}
.bx-tip::after{content:'';position:absolute;left:50%;top:100%;width:.5em;height:.5em;margin-left:-.25em;margin-top:-.26em;background:#15151b;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);transform:rotate(45deg)}
.bx-pin:hover .bx-tip,.bx-pin:focus-visible .bx-tip{opacity:1;transform:translateX(-50%) translateY(0)}
/* flip below when the pin sits high in the frame, so the tip cannot clip out */
.bx-pin.dn .bx-tip{bottom:auto;top:calc(100% + .85em);transform:translateX(-50%) translateY(-.3em)}
.bx-pin.dn .bx-tip::after{top:-.26em;bottom:auto;margin-top:0;border:0;border-left:1px solid var(--rule);border-top:1px solid var(--rule)}
.bx-pin.dn:hover .bx-tip,.bx-pin.dn:focus-visible .bx-tip{transform:translateX(-50%) translateY(0)}
/* anchor right when the pin is near the right edge */
.bx-pin.rt .bx-tip{left:auto;right:-.45em;transform:translateX(0) translateY(-.3em)}
.bx-pin.rt .bx-tip::after{left:auto;right:.55em;margin-left:0}
.bx-pin.rt:hover .bx-tip,.bx-pin.rt:focus-visible .bx-tip{transform:translateX(0) translateY(0)}
.bx-tip b{display:flex;align-items:center;gap:.5em;color:var(--t1);font-weight:500;line-height:1.3;white-space:nowrap;padding-bottom:.5em;margin-bottom:.5em;border-bottom:1px solid var(--rule-2)}
.bx-tip b .pd{width:.42em;height:.42em;border-radius:50%;background:var(--pc);flex:none}
.bx-tip .row{display:flex;align-items:baseline;justify-content:space-between;gap:1.4em;white-space:nowrap;padding:.16em 0}
.bx-tip .row span{font-family:var(--mono);font-size:.8em;letter-spacing:.08em;text-transform:uppercase;color:var(--t4)}
.bx-tip .row em{font-style:normal;color:var(--t2);font-weight:500}
.bx-tip .row em.neg{color:var(--pc)}
.bx-chart:hover .bx-pin::before{animation-play-state:paused}
/* flowing data on the connection wires */
.bx-wire .fl{stroke-dasharray:2.5 13;stroke-linecap:round;animation:flowRun 2.1s linear infinite}
.bx-wire .fl.f2{animation-duration:2.7s;animation-delay:-.7s}
.bx-wire .fl.f3{animation-duration:2.4s;animation-delay:-1.4s}
@keyframes flowRun{to{stroke-dashoffset:-15.5}}
/* cascade impact */
.bx-cas{display:flex;flex-direction:column;gap:.55em;flex:1 1 auto;min-height:0}
.bx-cas-h{display:flex;align-items:center;gap:.6em;flex:none}
.bx-cas-h .bolt{width:1.65em;height:1.65em;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(255,122,107,.14);border:1px solid rgba(255,122,107,.4);color:#ff7a6b}
.bx-cas-h .bolt svg{width:.9em;height:.9em}
.bx-cas-h b{font-size:1.05em;font-weight:500;letter-spacing:-.02em;color:var(--t1);line-height:1.25;white-space:nowrap}
.bx-cas-s{color:var(--t3);flex:none;margin-bottom:.2em}
.bx-cas-s b{color:#ff7a6b;font-weight:500}
.bx-cas-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75em;padding:.62em .7em;border:1px solid var(--rule-3);background:#0c0c10;flex:none}
.bx-cas-r .lg{width:1.75em;height:1.75em;display:flex;align-items:center;justify-content:center;background:#1a1a21;border:1px solid var(--rule-2);color:var(--t2);font-size:.82em;font-weight:600;flex:none}
.bx-cas-r .nm{min-width:0;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-cas-r .bg{font-family:var(--mono);font-size:.76em;letter-spacing:.1em;text-transform:uppercase;padding:.25em .5em;border:1px solid currentColor;white-space:nowrap}
.bx-cas-r .bg.med{color:#4fc98a}
.bx-cas-r .bg.high{color:#e2a84f}
.bx-cas-r .bg.crit{color:#ff7a6b}
/* vendor read */
.bx-vh{display:flex;align-items:center;gap:.85em;flex:none;margin-bottom:1.1em}
.bx-vh .lg{width:2.5em;height:2.5em;background:color-mix(in srgb,var(--acc) 20%,transparent);color:var(--acc-txt);display:flex;align-items:center;justify-content:center;font-size:.95em;font-weight:600;flex:none}
.bx-vh .m{min-width:0;flex:1}
.bx-vh .m b{display:block;font-size:1.15em;font-weight:500;letter-spacing:-.025em;color:var(--t1)}
.bx-vh .m i{display:block;font-style:normal;font-size:.78em;color:var(--t4);margin-top:.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-vh .gr{width:2.5em;height:2.5em;display:flex;align-items:center;justify-content:center;font-size:1.05em;font-weight:600;color:#e2a84f;border:1px solid color-mix(in srgb,#e2a84f 42%,transparent);background:rgba(226,168,79,.09);flex:none}
.bx-read{flex:1 1 auto;min-height:0;border:1px solid var(--rule-3);background:rgba(255,255,255,.018);padding:1.05em;display:flex;flex-direction:column;justify-content:center;gap:.75em;font-size:.98em;line-height:1.5;color:var(--t3)}
.bx-read .hd{display:flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:.74em;letter-spacing:.16em;text-transform:uppercase;color:#4fc98a}
.bx-read .hd::before{content:'';width:.42em;height:.42em;background:currentColor;flex:none}
.bx-read em{font-style:normal;color:#e2a84f}
/* queue: each row is an object, not a ruled line */
.bx-q{display:flex;align-items:center;gap:.9em;padding:.7em .9em;border:1px solid var(--rule-3);background:rgba(255,255,255,.018);flex:1 1 auto;min-height:0;margin-bottom:.6em}
.bx-q:last-of-type{margin-bottom:0}
.bx-q .s{width:.5em;height:.5em;flex:none}
.bx-q .m{min-width:0;flex:1}
.bx-q .m b{display:block;font-size:.98em;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-q .m i{display:block;font-style:normal;font-size:.78em;color:var(--t4);margin-top:.12em}
.bx-q .d{font-family:var(--mono);font-size:.74em;letter-spacing:.06em;white-space:nowrap;flex:none}
/* connections */
.bx-flow{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 3.5em minmax(0,1fr);align-items:center;gap:.6em}
.bx-sys{display:flex;flex-direction:column;gap:.5em}
.bx-sev{font-family:var(--mono);font-size:.7em;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:.5em}
.bx-sev::before{content:'';width:.4em;height:.4em;background:currentColor;flex:none}
.bx-sev.crit{color:#ff7a6b}
.bx-sev.med{color:#e2a84f}
.node{display:flex;align-items:center;gap:.7em;border:1px solid var(--rule-3);background:rgba(255,255,255,.02);padding:.6em .7em;min-width:0}
.node.crit{border-left:.18em solid #ff7a6b}
.node.med{border-left:.18em solid #e2a84f}
.tile{width:1.9em;height:1.9em;display:flex;align-items:center;justify-content:center;flex:none;background:color-mix(in srgb,var(--indigo) 22%,transparent)}
.tile svg{width:1em;height:1em;color:#a5a7fa}
.tile.tl{background:color-mix(in srgb,var(--teal) 22%,transparent)}
.tile.tl svg{color:#5eead4}
.node .nm,.bx-tgt .nm{min-width:0}
.node .nm b,.bx-tgt .nm b{display:block;font-size:.95em;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node .nm i,.bx-tgt .nm i{display:block;font-style:normal;font-size:.75em;color:var(--t4);margin-top:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-wire{position:relative;height:100%;min-height:5em}
.bx-wire svg{position:absolute;inset:0;width:100%;height:100%}
.bx-tgt{display:flex;align-items:center;gap:.7em;border:1px solid color-mix(in srgb,var(--acc) 38%,transparent);background:color-mix(in srgb,var(--acc) 9%,transparent);padding:.8em .75em;min-width:0}
/* coverage */
.bx-bar{display:flex;flex-direction:column;justify-content:center;gap:.5em;flex:1 1 auto}
.bx-bar .r{display:flex;justify-content:space-between;align-items:baseline;gap:.75em;font-size:.95em;color:var(--t3)}
.bx-bar .r span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bx-bar .r u{text-decoration:none;font-family:var(--mono);color:var(--t1);flex:none}
.bx-bar .tr{height:.26em;background:rgba(255,255,255,.07)}
.bx-bar .tr i{display:block;height:100%;background:var(--acc)}
.bx-bar .tr i.am{background:#e2a84f}
.bx-gap{margin-top:1em;padding-top:.85em;border-top:1px solid var(--rule-3);font-family:var(--mono);font-size:.74em;letter-spacing:.12em;text-transform:uppercase;color:#e2a84f;flex:none}
/* --- scroll-in motion. Scoped to [data-mo], which pylon adds only when the
   script runs, so the screens render fully drawn without JS. --- */
[data-mo] .bx-v .st{opacity:0;transform:translateY(10px)}
[data-mo] .bx-v.play .st{opacity:1;transform:none;transition:opacity .5s var(--e) var(--d,0s),transform .55s var(--e) var(--d,0s)}
[data-mo] .bx-v .sl{opacity:0;transform:translateX(-12px)}
[data-mo] .bx-v.play .sl{opacity:1;transform:none;transition:opacity .5s var(--e) var(--d,0s),transform .55s var(--e) var(--d,0s)}
/* reveal by clip, not by dash: the chart uses preserveAspectRatio="none" with
   non-scaling-stroke, and a pathLength dash is measured against a differently
   scaled length, so the stroke stops short of the right edge. inset() resolves
   against the element's bounding box and is immune to that. */
[data-mo] .bx-chart .ln{clip-path:inset(-6px 100% -6px -6px)}
[data-mo] .bx-v.play .bx-chart .ln{clip-path:inset(-6px -6px -6px -6px);transition:clip-path 1.5s var(--e) .1s}
[data-mo] .bx-chart .ar{opacity:0}
[data-mo] .bx-v.play .bx-chart .ar{opacity:1;transition:opacity 1s var(--e) .5s}
[data-mo] .bx-pin{opacity:0;transform:translate(-50%,-50%) scale(.2)}
[data-mo] .bx-pin::before{animation:none}
[data-mo] .bx-v.play .bx-pin{opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity .3s var(--e) var(--d,0s),transform .5s cubic-bezier(.34,1.56,.64,1) var(--d,0s)}
[data-mo] .bx-v.play .bx-pin::before{animation:pinPulse 2.8s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:var(--d,0s)}
[data-mo] .bx-bar .tr i{transform:scaleX(0);transform-origin:left}
[data-mo] .bx-v.play .bx-bar .tr i{transform:scaleX(1);transition:transform 1s var(--e) var(--d,0s)}
[data-mo] .bx-wire{opacity:0}
[data-mo] .bx-v.play .bx-wire{opacity:1;transition:opacity .7s var(--e) .4s}
[data-mo] .bx-tgt{opacity:0;transform:scale(.94)}
[data-mo] .bx-v.play .bx-tgt{opacity:1;transform:none;transition:opacity .5s var(--e) .6s,transform .6s cubic-bezier(.34,1.4,.64,1) .6s}
[data-mo] .bx-vh .gr{opacity:0;transform:scale(.55)}
[data-mo] .bx-v.play .bx-vh .gr{opacity:1;transform:none;transition:opacity .4s var(--e) .35s,transform .55s cubic-bezier(.34,1.56,.64,1) .35s}
@media(prefers-reduced-motion:reduce){[data-mo] .bx-v .st,[data-mo] .bx-v .sl,[data-mo] .bx-chart .ar,[data-mo] .bx-wire,[data-mo] .bx-tgt,[data-mo] .bx-vh .gr,[data-mo] .bx-pin{opacity:1;transform:none}[data-mo] .bx-chart .ln{clip-path:none}[data-mo] .bx-bar .tr i{transform:scaleX(1)}}

/* ============ 04 HUDSON ============ */
.hz{border:1px solid var(--rule-2);background:linear-gradient(180deg,#111116,#0c0c0f);margin-top:clamp(3rem,5vw,4.5rem)}
.hz-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.875rem 1.25rem;border-bottom:1px solid var(--rule-2);font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase}
.hz-live{display:inline-flex;align-items:center;gap:.5rem;color:#ff7a6b}
.hz-live i{width:5px;height:5px;background:currentColor;animation:blip 1.6s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.hz-alert{color:var(--t2)}
.hz-on{margin-left:auto;color:var(--t4)}
.hz-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
@media(max-width:940px){.hz-body{grid-template-columns:1fr}}
.hz-thread{padding:1.25rem;display:flex;flex-direction:column;gap:1.5rem;min-width:0}
.hz-msg .who{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t4);margin-bottom:.5rem}
.hz-msg .who.hud{color:var(--hud)}
.hz-msg .who svg{width:14px;height:14px}
.hz-msg .bub{font-size:.9375rem;line-height:1.6;color:var(--t2);border-left:2px solid var(--rule);padding-left:.875rem}
.hz-msg.hud .bub{border-left-color:var(--hud);color:var(--t1)}
.hz-msg.hud .bub b{color:var(--t1);font-weight:500}
.hz-typing{display:none;gap:.3rem;padding-left:.875rem}
.hz.is-running .hz-typing{display:flex}
.hz-typing i{width:5px;height:5px;background:var(--hud);animation:blip 1s ease-in-out infinite}
.hz-typing i:nth-child(2){animation-delay:.15s}
.hz-typing i:nth-child(3){animation-delay:.3s}
.hz-rev{opacity:0;transform:translateY(6px);transition:opacity .5s var(--e),transform .5s var(--e)}
.hz.is-done .hz-rev{opacity:1;transform:none}
.hz-detail{border-left:1px solid var(--rule-2);padding:1.25rem;display:flex;flex-direction:column;gap:1rem;min-width:0}
@media(max-width:940px){.hz-detail{border-left:0;border-top:1px solid var(--rule-2)}}
.hz-h{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);padding-bottom:.5rem;border-bottom:1px solid var(--rule-2)}
.hz-finds{list-style:none;display:flex;flex-direction:column;gap:.625rem}
.hz-finds li{display:grid;grid-template-columns:6px minmax(0,1fr);gap:.75rem;align-items:baseline;font-size:.875rem;line-height:1.55;color:var(--t3)}
.hz-finds li .dt{width:6px;height:6px;background:var(--t4);margin-top:.45rem}
.hz-finds li.crit .dt{background:#ff7a6b}
.hz-finds li b{color:var(--t1);font-weight:500}
.hz-act{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:.75rem 0;border-bottom:1px solid var(--rule-3)}
.hz-act .lb{font-size:.875rem;color:var(--t3);min-width:0}
.hz-act .lb b{color:var(--t2);font-weight:500}
.hz-do{font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);border:1px solid var(--rule-2);padding:.4rem .55rem;flex:none;transition:color .25s,border-color .25s,background .25s}
.hz-do:hover{color:var(--t1);border-color:var(--t3)}
.hz-do.done{color:var(--acc-txt);border-color:color-mix(in srgb,var(--acc) 45%,transparent);background:color-mix(in srgb,var(--acc) 8%,transparent)}
.hz-srcs{font-family:var(--mono);font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t4)}
.hz-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.875rem 1.25rem;border-top:1px solid var(--rule-2)}
.hz-run{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);transition:color .25s}
.hz-run:hover{color:var(--t1)}
.hz-run svg{width:13px;height:13px}
.hz-prog{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t4)}

/* managed */
.mg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--rule-2);margin-top:clamp(2.5rem,4vw,3.5rem)}
@media(max-width:820px){.mg{grid-template-columns:1fr}}
.mg-l{padding:clamp(1.75rem,3vw,2.5rem);display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.mg-r{border-left:1px solid var(--rule-2);padding:clamp(1.75rem,3vw,2.5rem);display:flex;flex-direction:column;justify-content:center}
@media(max-width:820px){.mg-r{border-left:0;border-top:1px solid var(--rule-2)}}
.mg-r ul{list-style:none;display:flex;flex-direction:column;gap:.875rem}
.mg-r li{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:.5rem;font-size:.9375rem;color:var(--t3);line-height:1.5}
.mg-r li span{font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;color:var(--t4);padding-top:.2rem}

/* ---- supply chain mockup ---- */
.sd-h{display:flex;align-items:baseline;justify-content:space-between;gap:1em;flex:none;padding-bottom:.6em}
.sd-h b{font-family:var(--mono);font-size:.74em;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);font-weight:500}
.sd-h em{font-style:normal;font-family:var(--mono);font-size:.72em;color:var(--t4)}
.sc-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5em;flex:none;margin-bottom:1.2em}
.sc-hd .tt b{display:block;font-size:1.65em;font-weight:500;letter-spacing:-.035em;color:var(--t1);line-height:1.1}
.sc-hd .tt i{display:block;font-style:normal;font-size:.92em;color:var(--t4);margin-top:.3em}
.sc-tog{display:flex;flex:none;border:1px solid var(--rule-2)}
.sc-tog span{font-family:var(--mono);font-size:.72em;letter-spacing:.12em;text-transform:uppercase;color:var(--t4);padding:.55em .85em;white-space:nowrap}
.sc-tog span.on{background:var(--acc);color:#04231f;font-weight:500}
.sc-add{font-family:var(--mono);font-size:.72em;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);padding:.55em .85em;white-space:nowrap;flex:none}
/* logo tiles stand in for vendor marks */
/* grid-column:auto cancels pylon.css's .lg{grid-column:1/9} — that is the legal
   page's layout class, under-scoped, and it would otherwise span these tiles. */
.lg{grid-column:auto;width:2em;height:2em;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-style:normal;font-size:.82em;font-weight:600;color:#0b0b0e;background:var(--lc,#6b6b75)}
.lg.big{width:3.4em;height:3.4em;font-size:1.15em}
.lg.im{background:#f4f4f5;padding:.24em}
.lg.im img{width:100%;height:100%;object-fit:contain;display:block}
.sc-st{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8em;flex:none}
.sc-st div{display:flex;align-items:center;gap:.85em;border:1px solid var(--rule-2);background:linear-gradient(180deg,#17171e,#101014);box-shadow:inset 0 1px 0 rgba(255,255,255,.055);padding:.8em}
.sc-st .ic{width:2em;height:2em;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule-2);color:var(--t3)}
.sc-st .ic svg{width:1em;height:1em}
.sc-st b{display:block;font-size:1.6em;font-weight:500;letter-spacing:-.04em;color:var(--t1);line-height:1}
.sc-st span{display:block;margin-top:.3em;font-family:var(--mono);font-size:.66em;letter-spacing:.12em;text-transform:uppercase;color:var(--t4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-warn{border-left:2px solid #d99a2b;background:linear-gradient(90deg,rgba(217,154,43,.07),transparent 70%);padding:.85em 1em;flex:none}
.sc-warn>b{display:flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.74em;letter-spacing:.16em;text-transform:uppercase;color:#d99a2b;margin-bottom:.75em}
.sc-warn>b svg{width:1em;height:1em;flex:none}
.sc-wl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7em 1.4em}
.sc-wl>span{display:flex;align-items:center;gap:.65em;min-width:0}
.sc-wl .tx{display:flex;flex-direction:column;gap:.15em;min-width:0}
.sc-wl b{font-size:.98em;font-weight:500;letter-spacing:-.02em;color:var(--t1);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-wl i{font-style:normal;font-size:.84em;color:#d99a2b;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.95fr);gap:1.1em;flex:1;min-height:0}
.sc-col{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:clip;border:1px solid var(--rule-2);background:#0b0b0e;padding:.9em}
.sd-h{display:flex;align-items:center;justify-content:space-between;gap:.8em;padding-bottom:.7em;border-bottom:1px solid var(--rule-2);margin-bottom:.5em;flex:none}
.sd-h b{display:flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.74em;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);font-weight:500}
.sd-h b svg{width:.95em;height:.95em;color:#ff7a6b}
.sd-h em{font-style:normal;font-family:var(--mono);font-size:.72em;color:var(--t4)}
/* sub-processor rows */
.sc-r{display:flex;align-items:center;gap:.7em;padding:.5em .45em;border-bottom:1px solid var(--rule-3);flex:none;min-width:0}
.sc-r .tx{display:flex;flex-direction:column;gap:.12em;min-width:0;flex:1}
.sc-r b{font-weight:400;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
.sc-r i{font-style:normal;font-family:var(--mono);font-size:.74em;color:var(--t4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-r u{text-decoration:none;color:var(--t4);flex:none;font-size:.9em}
.sc-r.on{background:color-mix(in srgb,var(--acc) 10%,transparent);border-left:2px solid var(--acc);padding-left:.55em;margin-left:-.45em}
.sc-r.on b{color:var(--t1);font-weight:500}
.sc-r.on i{color:var(--acc)}
/* focused sub-processor */
.sc-mid{align-items:center;text-align:center}
.sc-focus{display:flex;flex-direction:column;align-items:center;gap:.45em;padding:.5em 0 .9em;flex:none}
.sc-focus b{font-size:1.2em;font-weight:500;letter-spacing:-.03em;color:var(--t1);margin-top:.3em}
.sc-focus i{font-style:normal;font-size:.9em;color:var(--t4)}
.sc-focus u{text-decoration:none;font-family:var(--mono);font-size:.7em;letter-spacing:.14em;text-transform:uppercase;color:#d99a2b;border:1px solid color-mix(in srgb,#d99a2b 45%,transparent);padding:.28em .6em;margin-top:.2em}
.sc-used{width:100%;display:flex;align-items:center;gap:.8em;font-family:var(--mono);font-size:.7em;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);flex:none;margin-bottom:.8em}
.sc-used::before,.sc-used::after{content:'';flex:1;height:1px;background:var(--rule-3)}
.sc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6em;width:100%;text-align:left;min-height:0}
.sc-cards div{border:1px solid var(--rule-2);background:linear-gradient(180deg,#17171e,#101014);padding:.6em;min-width:0}
.sc-cards .n{display:flex;align-items:center;gap:.55em;min-width:0}
.sc-cards .lg{width:1.6em;height:1.6em;font-size:.7em}
.sc-cards b{font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-cards i{display:block;font-style:normal;font-size:.84em;color:var(--t4);margin:.4em 0 .35em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* cascade column */
.sc-cs{font-size:.9em;line-height:1.5;color:var(--t3);flex:none;margin-bottom:.7em}
.sc-cs b{color:var(--t1);font-weight:500}
.sc-cas{display:flex;align-items:center;gap:.7em;padding:.5em .45em;border-bottom:1px solid var(--rule-3);flex:none;min-width:0}
.sc-cas b{flex:1;min-width:0;font-weight:400;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@container (max-width:900px){.sc-wl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:700px){.sc-g{grid-template-columns:1fr}.sc-st{grid-template-columns:repeat(2,minmax(0,1fr))}.sc-hd{flex-direction:column}.sc-cards{grid-template-columns:1fr}}
@container (max-width:440px){.sc-cards{grid-template-columns:1fr}}