/* ==========================================================================
   KAT - Knowledge & Training (page /kat-compliance-training/)
   v1 2026-09-29 · v2 2026-09-29 "spice it up": distinct layouts + motion.
   Scoped .kat* / .kb / .kv prefixes. Mocks = dark instruments, one hue each.
   MOTION CONTRACT: every default style below is the FINAL (static) state.
   Animations only run inside @media(prefers-reduced-motion:no-preference)
   and only after kat.js adds .kat-on to a [data-kat] block; pre-reveal
   hiding is gated on html.kat-js so no-JS visitors always see content.
   No glow: movement, opacity and hairlines only.
   ========================================================================== */
:root{--kat-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@property --kp{syntax:'<number>';inherits:false;initial-value:100}

.katd,.katb,.katr{font-family:Inter,system-ui,sans-serif;color:#e9e4f3;font-size:12.5px;line-height:1.45}
.kat-k{font-family:var(--kat-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8d86a0}
.kat-n{font-family:var(--kat-mono);font-size:10.5px;letter-spacing:.14em;color:#8d86a0}
.dfeat .app-frame,.hero-art .app-frame,.kat-anno .app-frame{box-shadow:none}

/* ======================= 1. HERO DASHBOARD ======================= */
.kat-hero-art{position:relative}
.hero-art .app-body:has(.katd){padding:0}
.katd{display:grid;grid-template-columns:132px minmax(0,1fr);min-height:392px;background:#0c0918}
.katd-nav{border-right:1px solid rgba(255,255,255,.07);padding:16px 10px;display:flex;flex-direction:column;gap:3px}
.katd-brand{font-weight:800;font-size:15px;letter-spacing:-.01em;color:#fff;padding:0 8px 12px}
.katd-brand span{font-family:var(--kat-mono);font-weight:400;font-size:9px;letter-spacing:.14em;color:#8d86a0;display:block;margin-top:2px}
.katd-nav i{font-style:normal;font-size:12px;color:#a59fb6;padding:7px 8px;border-radius:3px}
.katd-nav i.on{background:rgba(177,105,255,.14);color:#fff}
.katd-main{padding:16px 18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.katd-hi{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.katd-hi b{display:block;font-size:16px;font-weight:700;color:#fff}
.katd-hi span{font-size:11.5px;color:#8d86a0}
.katd-live{font-style:normal;font-family:var(--kat-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#bc83f7;display:flex;align-items:center;gap:6px;border:1px solid rgba(177,105,255,.3);padding:4px 8px;border-radius:3px;flex:none}
.katd-live:before{content:"";width:6px;height:6px;border-radius:50%;background:#b169ff}
.katd-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.katd-kpis div{background:#120e22;padding:10px 10px 9px}
.katd-kpis b{display:block;font-size:21px;font-weight:300;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.katd-kpis b.am{color:#f0b429}
.katd-kpis b.rd{color:#e07a84}
.katd-kpis span{font-family:var(--kat-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#8d86a0}
.katd-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;flex:1}
.katd-card{background:#120e22;border:1px solid rgba(255,255,255,.07);padding:12px;display:flex;flex-direction:column}
.katd-card .kat-k{display:block;margin-bottom:10px}
.katd-bars{display:flex;align-items:flex-end;gap:5px;flex:1;min-height:92px;border-bottom:1px solid rgba(255,255,255,.1)}
.katd-bars i{flex:1;background:rgba(177,105,255,.35);height:var(--h);transform-origin:bottom}
.katd-bars i.hi{background:#b169ff}
.katd-ring{align-items:center;gap:8px}
.katd-ring .kat-k{align-self:stretch}
.katd-donut{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(#b169ff 0 calc(var(--kp)*.74%),rgba(177,105,255,.45) 0 calc(var(--kp)*.92%),#f0b429 0 calc(var(--kp)*.97%),#c14953 0 calc(var(--kp)*1%),rgba(255,255,255,.07) 0)}
.katd-donut div{width:68px;height:68px;border-radius:50%;background:#120e22;display:grid;place-items:center;align-content:center;text-align:center}
.katd-donut b{font-size:19px;font-weight:300;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.katd-donut span{font-family:var(--kat-mono);font-size:8px;letter-spacing:.12em;color:#8d86a0;text-transform:uppercase}
.katd-leg{display:grid;gap:3px;font-size:10.5px;color:#a59fb6;width:100%}
.katd-leg span{display:flex;align-items:center;gap:6px}
.katd-leg i{width:7px;height:7px;flex:none}
/* notification toasts overhanging the frame corner */
.katd-toasts{position:absolute;left:-28px;bottom:-30px;width:268px;height:58px;z-index:3}
.katd-toast{position:absolute;inset:0;display:flex;align-items:center;gap:11px;padding:10px 14px;background:#161127;border:1px solid rgba(177,105,255,.32);border-radius:3px;font-family:Inter,sans-serif}
.katd-toast i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800;background:rgba(177,105,255,.18);color:#bc83f7}
.katd-toast i.ok{background:#b169ff;color:#0c0918}
.katd-toast i.am{background:rgba(240,180,41,.16);color:#f0b429}
.katd-toast b{display:block;color:#fff;font-size:13px;line-height:1.3}
.katd-toast span{font-family:var(--kat-mono);font-size:10.5px;color:#a59fb6;letter-spacing:.04em}
.katd-toast.t2,.katd-toast.t3{opacity:0}

/* ======================= 2. CINEMATIC VIDEO ======================= */
.kat-cine-head{max-width:780px;margin:0 auto 46px}
.kat-cine{max-width:1100px;margin:0 auto}
.kat-vid{position:relative;background:#0c0918;border:1px solid rgba(255,255,255,.09);padding:10px}
.kat-vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#070615;border:0}
.kat-tick{position:absolute;width:18px;height:18px;border-color:#b169ff;border-style:solid;border-width:0;pointer-events:none}
.kat-tick.tl{top:-6px;left:-6px;border-top-width:2px;border-left-width:2px}
.kat-tick.tr{top:-6px;right:-6px;border-top-width:2px;border-right-width:2px}
.kat-tick.bl{bottom:-6px;left:-6px;border-bottom-width:2px;border-left-width:2px}
.kat-tick.br{bottom:-6px;right:-6px;border-bottom-width:2px;border-right-width:2px}
.kat-vid-cap{display:flex;justify-content:space-between;gap:12px;padding:11px 4px 1px;font-family:var(--kat-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8d86a0}
.kat-vid-cap b{color:#bc83f7;font-weight:500}
.kat-cine-pts{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.12)}
.kat-cine-pts li{padding:22px 26px 4px 0;position:relative}
.kat-cine-pts li+li{padding-left:26px;border-left:1px solid rgba(255,255,255,.12)}
.kat-cine-pts li:before{content:"";position:absolute;top:-1px;left:0;height:2px;width:44px;background:#b169ff}
.kat-cine-pts li+li:before{left:26px}
.kat-cine-pts .kat-n{color:#bc83f7}
.kat-cine-pts b{display:block;color:#fff;font-size:17px;font-weight:700;margin:8px 0 4px;font-family:Inter,sans-serif}
.kat-cine-pts p{margin:0;color:rgba(255,255,255,.72);font-size:15px;line-height:1.55}
.kat-cine-cta{text-align:center;margin-top:38px}

/* grid texture on the blue ground (user 2026-09-29) - 48px grid in the cooled blue-grey used by the
   other blue passages, layered over the .sec-blue gradient (that rule is (0,3,0) !important, so (0,4,0) here) */
.kat-cine-sec.sec-blue.sec-blue.sec-blue{background-image:linear-gradient(rgba(148,163,216,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,216,.06) 1px,transparent 1px),linear-gradient(165deg,#111725 0%,#161d2c 55%,#111725 100%) !important;background-size:48px 48px,48px 48px,auto !important}

/* ======================= 3. BENTO ======================= */
.kat-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:10px}
.kb{grid-column:span 4;background:#fff;border:1px solid rgba(107,19,175,.13);border-radius:14px;padding:26px 26px 24px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;transition:border-color .25s,transform .25s}
.kb:hover{border-color:color-mix(in srgb,var(--kc) 45%,#fff)}
.kb:before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--kc);opacity:.85}
.kb-ai{grid-column:span 7}
.kb-fair{grid-column:span 5}
.kb-cert{grid-column:1/-1}
.kb-ai,.kb-cert{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:26px;align-items:center}
.kb-txt{display:flex;flex-direction:column;gap:12px}
.kb-top{display:flex;justify-content:space-between;align-items:flex-start}
.kb .kat-ico{width:44px;height:44px;border-radius:3px;display:grid;place-items:center;background:color-mix(in srgb,var(--kc) 12%,#fff);color:var(--kc)}
.kb .kat-ico svg{width:22px;height:22px}
.kb .kat-n{color:#6b6480}
.kb h3{margin:0;font-family:Inter,sans-serif;font-size:19px;font-weight:700;color:#14101f;letter-spacing:-.01em}
.kb p{margin:0;font-size:15px;line-height:1.6;color:#3f3f46}
.kv{margin-top:auto;border:1px solid color-mix(in srgb,var(--kc) 20%,#fff);background:color-mix(in srgb,var(--kc) 5%,#fff);border-radius:10px;padding:14px;font-family:Inter,sans-serif;color:#14101f}
.kv .kat-k{color:color-mix(in srgb,var(--kc) 70%,#14101f)}
/* ai */
.kv-ai{margin-top:0;display:flex;flex-direction:column;gap:12px}
.kv-brief{background:#fff;border:1px solid color-mix(in srgb,var(--kc) 22%,#fff);border-radius:6px;padding:10px 12px}
.kv-brief .kat-k{display:block;margin-bottom:5px}
.kv-brief code{font-family:var(--kat-mono);font-size:13px;color:#14101f;background:none;padding:0;display:flex;align-items:center;white-space:nowrap}
.kv-type{display:inline-block;overflow:hidden;width:30ch;white-space:nowrap}
.kv-caret{width:2px;height:15px;background:var(--kc);margin-left:2px;opacity:0}
.kv-mods{display:grid;gap:6px}
.kv-mods span{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid color-mix(in srgb,var(--kc) 16%,#fff);border-radius:6px;padding:8px 11px;font-size:13px;color:#14101f}
.kv-mods em{font-style:normal;font-family:var(--kat-mono);font-size:10.5px;color:var(--kc)}
/* fair */
.kv-fair{display:grid;gap:7px}
.kv-fair .kat-k{margin-bottom:2px}
.kv-bar{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;align-items:center}
.kv-bar em{font-style:normal;font-family:var(--kat-mono);font-size:11px;color:#6b6480}
.kv-bar i{height:9px;border-radius:2px;background:var(--kc);width:var(--w1);opacity:.8}
.kv-ok{justify-self:start;margin-top:4px;font-family:var(--kat-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--kc);border:1px solid color-mix(in srgb,var(--kc) 40%,#fff);padding:3px 8px;border-radius:3px}
/* assign */
.kv-assign{display:grid;gap:10px}
.kv-chips{display:flex;flex-wrap:wrap;gap:6px}
.kv-chips span{font-size:12.5px;padding:6px 10px;border-radius:3px;border:1px solid color-mix(in srgb,var(--kc) 25%,#fff);background:#fff;color:#14101f}
.kv-chips span.c1{background:var(--kc);border-color:var(--kc);color:#fff}
.kv-due{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--kat-mono);font-size:10.5px;color:#6b6480;letter-spacing:.04em}
.kv-due span:before{content:"· ";color:var(--kc)}
.kv-due span:first-child:before{content:""}
/* glance */
.kv-glance{padding-bottom:10px}
.kv-gl-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.kv-gl-top b{font-size:24px;font-weight:300;color:#14101f;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kv-glance svg{display:block;width:100%;height:64px}
.kv-area{fill:color-mix(in srgb,var(--kc) 14%,transparent)}
.kv-line{fill:none;stroke:var(--kc);stroke-width:2;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
/* audit */
.kv-audit{padding:10px 12px}
.kv-tick{height:112px;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.kv-log{display:grid;gap:0}
.kv-log span{display:flex;gap:10px;font-family:var(--kat-mono);font-size:11px;color:#3f3f46;padding:5px 0;border-bottom:1px dashed color-mix(in srgb,var(--kc) 16%,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv-log em{font-style:normal;color:var(--kc);flex:none}
/* cert */
.kv-cert{margin-top:0;display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1.35fr);align-items:center;gap:12px}
.kv-in{position:relative;overflow:hidden;background:#fff;border:1px solid color-mix(in srgb,var(--kc) 25%,#fff);border-radius:6px;padding:12px 14px}
.kv-in .kat-k{display:block;margin-bottom:6px}
.kv-in code{font-family:var(--kat-mono);font-size:15px;letter-spacing:.08em;color:#14101f;background:none;padding:0}
.kv-scan{position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--kc) 16%,transparent),transparent);opacity:0}
.kv-arrow{height:1px;background:color-mix(in srgb,var(--kc) 45%,#fff);position:relative}
.kv-arrow:after{content:"";position:absolute;right:-1px;top:-4px;border:4px solid transparent;border-left:6px solid color-mix(in srgb,var(--kc) 60%,#fff);border-right:0}
.kv-res{display:grid;grid-template-columns:32px minmax(0,1fr);gap:11px;align-items:center;background:#fff;border:1px solid color-mix(in srgb,var(--kc) 30%,#fff);border-radius:6px;padding:12px 14px}
.kv-res i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--kc);color:#fff;font-style:normal;font-weight:800}
.kv-res b{display:block;font-size:14px;color:#14101f}
.kv-res span{font-size:12.5px;color:#3f3f46;line-height:1.45}

/* ======================= 4. FLOW (split: copy + vertical rail | builder) ======================= */
.kat-flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(34px,4.6vw,72px);align-items:center}
.kat-flow-copy h2{margin:0 0 16px;font-family:Inter,sans-serif;font-weight:200;font-size:clamp(1.75rem,3.5vw,2.75rem);line-height:1.1;letter-spacing:-.02em;color:#fff}
.kat-flow-copy h2 b{font-weight:800}
.kat-flow-lead{margin:0 0 30px;color:rgba(255,255,255,.75);font-size:16.5px;line-height:1.65;max-width:520px}
.kat-rail{list-style:none;margin:0 0 32px;padding:0;position:relative;display:grid;gap:0}
.kat-rail:before,.kat-rail:after{content:"";position:absolute;left:6px;top:10px;bottom:34px;width:2px;background:rgba(255,255,255,.12)}
.kat-rail:after{background:#b169ff;transform-origin:top;transform:scaleY(1)}
.kat-rail li{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 10px;padding:0 0 22px 32px}
.kat-rail li:last-child{padding-bottom:0}
.kat-rail .dot{position:absolute;top:4px;left:0;width:14px;height:14px;border-radius:50%;background:#b169ff;border:3px solid #0b0819;box-sizing:border-box;z-index:1}
.kat-rail .kat-n{color:#bc83f7;padding-top:4px}
.kat-rail b{display:block;color:#fff;font-size:17px;font-weight:700;margin:0 0 3px;font-family:Inter,sans-serif}
.kat-rail p{margin:0;color:rgba(255,255,255,.7);font-size:15px;line-height:1.55}
.kat-flow-stage{min-width:0}
.katb{background:#0c0918;padding:20px;display:flex;flex-direction:column;gap:16px;position:relative}
.katb-step{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.katb-step div{display:flex;flex-direction:column;gap:7px;font-size:11px;color:#e9e4f3}
.katb-step div:before{content:"";height:3px;background:#b169ff}
.katb-step .s5{color:#fff;font-weight:600}
.katb-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.katb-cols .katb-ok{align-content:center}
.katb-brief{background:#120e22;border:1px solid rgba(255,255,255,.08);padding:12px 14px}
.katb-brief .kat-k{display:block;margin-bottom:8px}
.katb-brief p{margin:0;font-family:var(--kat-mono);font-size:11.5px;color:#fff;line-height:1.6}
.katb-type{white-space:normal}
.katb-caret{display:inline-block;width:2px;height:14px;background:#b169ff;margin-left:2px;vertical-align:-2px;opacity:0}
.katb-gen{background:#120e22;border:1px solid rgba(255,255,255,.08);padding:12px 14px;display:grid;gap:9px}
.katb-gen-l{position:relative;height:16px;font-size:12px}
.katb-gen-l span{position:absolute;left:0;top:0;white-space:nowrap}
.katb-gen-l .g1{color:#bc83f7;opacity:0}
.katb-gen-l .g2{color:#e9e4f3}
.katb-prog{height:4px;background:rgba(255,255,255,.08);overflow:hidden}
.katb-prog i{display:block;height:100%;background:#b169ff;transform-origin:left}
.katb-ok{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;border:1px solid rgba(177,105,255,.35);background:rgba(177,105,255,.08);padding:12px 14px}
.katb-ok i{width:28px;height:28px;border-radius:50%;background:#b169ff;display:grid;place-items:center;color:#0c0918;font-style:normal;font-weight:800;font-size:14px}
.katb-ok b{display:block;color:#fff;font-size:14px}
.katb-ok span{font-size:12px;color:#a59fb6}
.katb-out{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.katb-out div{background:#120e22;padding:12px 10px}
.katb-out b{display:block;font-size:26px;font-weight:200;color:#fff;letter-spacing:-.02em;line-height:1.1}
.katb-out span{font-family:var(--kat-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8d86a0}
.katb-act{display:flex;justify-content:flex-end;gap:8px}
.katb-act span{font-size:11.5px;font-weight:600;padding:8px 13px;border:1px solid rgba(255,255,255,.16);border-radius:3px;color:#e9e4f3}
.katb-act span.pri{background:#8b2fe6;border-color:#8b2fe6;color:#fff}
.katb-toast{align-self:flex-end;display:flex;align-items:center;gap:9px;font-size:12.5px;color:#fff;background:#161127;border:1px solid rgba(177,105,255,.4);border-radius:3px;padding:9px 13px}
.katb-toast i{width:20px;height:20px;border-radius:50%;background:#b169ff;color:#0c0918;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:11px}

/* ======================= 5. ANNOTATED REPORT ======================= */
/* grid texture (user 2026-09-29) - same 48px light-purple grid as the homepage light passages, replaces .lite's default dots */
.kat-anno-sec.lite::before{background-image:linear-gradient(rgba(107,19,175,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(107,19,175,.055) 1px,transparent 1px);background-size:48px 48px}
.kat-anno-head{max-width:780px;margin:0 auto 50px}
.kat-anno{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px) minmax(0,1fr);gap:0 46px;align-items:center}
.kat-co{list-style:none;margin:0;padding:0;display:grid;gap:44px}
.kat-co li{position:relative}
.kat-co .kat-n{color:#8b2fe6;display:block;margin-bottom:8px}
.kat-co b{display:block;font-family:Inter,sans-serif;font-size:18px;font-weight:700;color:#14101f;margin-bottom:5px}
.kat-co span:not(.kat-n){font-size:15px;line-height:1.55;color:#3f3f46}
.kat-co li:after{content:"";position:absolute;top:32px;width:30px;height:1px;background:rgba(107,19,175,.4)}
.kat-co li:before{content:"";position:absolute;top:29px;width:7px;height:7px;border-radius:50%;background:#8b2fe6}
.kat-co-l{text-align:right}
.kat-co-l li:after{right:-40px}
.kat-co-l li:before{right:-46px}
.kat-co-r li:after{left:-40px}
.kat-co-r li:before{left:-46px}
.kat-anno-cta{text-align:center;margin-top:44px}
.katr{background:#0c0918;padding:18px;display:flex;flex-direction:column;gap:14px}
.katr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.katr-head b{display:block;font-size:16px;color:#fff;margin:4px 0 2px}
.katr-head span:not(.kat-k):not(.katr-stamp){font-size:11.5px;color:#8d86a0}
.katr-stamp{flex:none;font-family:var(--kat-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#bc83f7;border:1.5px solid #b169ff;padding:6px 9px;transform:rotate(-4deg);border-radius:3px}
.katr-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.katr-sum div{background:#120e22;padding:10px}
.katr-sum b{display:block;font-size:22px;font-weight:300;color:#fff;font-variant-numeric:tabular-nums}
.katr-sum b.am{color:#f0b429}
.katr-sum span{font-family:var(--kat-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#8d86a0}
.katr-tbl{border:1px solid rgba(255,255,255,.08)}
.katr-r{display:grid;grid-template-columns:minmax(0,1.6fr) 60px 118px;gap:10px;align-items:center;padding:9px 12px;border-top:1px solid rgba(255,255,255,.06);font-size:12.5px;color:#e9e4f3}
.katr-r.th{border-top:0;font-family:var(--kat-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8d86a0;background:#120e22}
.katr-r .st{justify-self:start;font-family:var(--kat-mono);font-size:10px;letter-spacing:.06em;padding:3px 7px;border-radius:3px;border:1px solid rgba(255,255,255,.16);color:#cfc8dd}
.katr-r .st.ok{border-color:rgba(177,105,255,.45);color:#bc83f7}
.katr-r .st.flip{position:relative;border-color:rgba(240,180,41,.45);color:#f0b429;min-width:98px;height:21px;padding:0}
.katr-r .st.flip em{font-style:normal;position:absolute;left:7px;top:3px;white-space:nowrap}
.katr-r .st.flip .fb{opacity:0}
.katr-act{display:flex;justify-content:flex-end;gap:8px}
.katr-act span{font-size:11.5px;font-weight:600;padding:8px 13px;border:1px solid rgba(255,255,255,.16);border-radius:3px;color:#e9e4f3}
.katr-act span.pri{background:#8b2fe6;border-color:#8b2fe6;color:#fff}

/* ======================= MOTION ======================= */
@media (prefers-reduced-motion:no-preference){
  /* --- pre-reveal hidden states (only when JS is running) --- */
  .kat-js [data-kat]:not(.kat-on) .katd-bars i{transform:scaleY(0)}
  .kat-js [data-kat]:not(.kat-on) .katd-donut{--kp:0}
  .kat-js [data-kat]:not(.kat-on) .katd-toasts{opacity:0}
  .kat-js .kat-cine:not(.kat-on) .kat-vid{clip-path:inset(0 50% 0 50%)}
  .kat-js .kat-cine:not(.kat-on) .kat-cine-pts li,
  .kat-js .kat-bento:not(.kat-on) .kb,
  .kat-js .kat-anno:not(.kat-on) .katr-tbl .katr-r:not(.th){opacity:0;transform:translateY(14px)}
  .kat-js .kat-anno:not(.kat-on) .kat-co-l li{opacity:0;transform:translateX(-18px)}
  .kat-js .kat-anno:not(.kat-on) .kat-co-r li{opacity:0;transform:translateX(18px)}
  .kat-js .kat-anno:not(.kat-on) .katr-stamp{opacity:0;transform:rotate(-4deg) scale(1.6)}
  .kat-js .kat-flow:not(.kat-on) .kat-rail:after{transform:scaleY(0)}

  /* --- reveal transitions --- */
  .katd-bars i{transition:transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--i)*55ms + .15s)}
  .katd-donut{transition:--kp 1.6s cubic-bezier(.3,.7,.2,1) .2s}
  .katd-toasts{transition:opacity .4s 1.2s}
  .kat-vid{transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
  .kat-cine-pts li,.kb,.katr-tbl .katr-r,.kat-co li{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .kat-cine-pts li{transition-delay:.7s}.kat-cine-pts li:nth-child(2){transition-delay:.82s}.kat-cine-pts li:nth-child(3){transition-delay:.94s}
  .kb:nth-child(2){transition-delay:.08s}.kb:nth-child(3){transition-delay:.16s}.kb:nth-child(4){transition-delay:.24s}.kb:nth-child(5){transition-delay:.32s}.kb:nth-child(6){transition-delay:.4s}
  .kat-co-l li:nth-child(2),.kat-co-r li:nth-child(2){transition-delay:.15s}
  .kat-co-r li:nth-child(1){transition-delay:.3s}.kat-co-r li:nth-child(2){transition-delay:.45s}
  .katr-tbl .katr-r:nth-child(2){transition-delay:.2s}.katr-tbl .katr-r:nth-child(3){transition-delay:.32s}.katr-tbl .katr-r:nth-child(4){transition-delay:.44s}.katr-tbl .katr-r:nth-child(5){transition-delay:.56s}
  .katr-stamp{transition:opacity .35s ease .9s,transform .45s cubic-bezier(.3,1.6,.5,1) .9s}

  /* --- ambient loops (start once revealed) --- */
  .kat-on .katd-live:before{animation:katPulse 1.8s ease-in-out infinite}
  .kat-on .katd-bars i.hi{animation:katBump 3.2s ease-in-out 1.6s infinite}
  .kat-on .katd-toast{animation:katToast 9s ease 1.4s infinite both}
  .kat-on .katd-toast.t2{animation-delay:4.4s}
  .kat-on .katd-toast.t3{animation-delay:7.4s}
  /* bento */
  .kat-on .kv-type{animation:katType 9s steps(30,end) infinite}
  .kat-on .kv-caret{animation:katBlink .8s step-end infinite}
  .kat-on .kv-mods span{animation:katMod 9s ease infinite both}
  .kat-on .kv-mods span:nth-child(2){animation-delay:.25s}.kat-on .kv-mods span:nth-child(3){animation-delay:.5s}.kat-on .kv-mods span:nth-child(4){animation-delay:.75s}
  .kat-on .kv-bar i{animation:katBal 7s cubic-bezier(.5,0,.2,1) infinite}
  .kat-on .kv-ok{animation:katOk 7s ease infinite}
  .kat-on .kv-chips span{animation:katChip 8s ease infinite}
  .kat-on .kv-chips span.c1{animation-name:katChip1}
  .kat-on .kv-chips span.c2{animation-delay:2s}.kat-on .kv-chips span.c3{animation-delay:4s}.kat-on .kv-chips span.c4{animation-delay:6s}
  .kat-on .kv-line{animation:katDraw 6s ease-in-out infinite}
  .kat-on .kv-log{animation:katTick 16s linear infinite}
  .kat-on .kv-scan{animation:katScan 6s ease-in-out infinite}
  .kat-on .kv-res{animation:katRes 6s ease infinite}
  /* flow: one synced 12s story */
  .kat-flow.kat-on .kat-rail:after{animation:katRail 12s linear infinite}
  .kat-flow.kat-on .kat-rail .r1 .dot{animation:katDot1 12s linear infinite}
  .kat-flow.kat-on .kat-rail .r2 .dot{animation:katDot2 12s linear infinite}
  .kat-flow.kat-on .kat-rail .r3 .dot{animation:katDot3 12s linear infinite}
  .kat-flow.kat-on .kat-rail .r4 .dot{animation:katDot4 12s linear infinite}
  .kat-flow.kat-on .kat-rail .r2 :is(.kat-n,b,p){animation:katTx2 12s linear infinite}
  .kat-flow.kat-on .kat-rail .r3 :is(.kat-n,b,p){animation:katTx3 12s linear infinite}
  .kat-flow.kat-on .kat-rail .r4 :is(.kat-n,b,p){animation:katTx4 12s linear infinite}
  .kat-flow.kat-on .katb-step .s1:before,.kat-flow.kat-on .katb-step .s2:before{animation:katSeg1 12s linear infinite}
  .kat-flow.kat-on .katb-step .s3:before{animation:katSeg2 12s linear infinite}
  .kat-flow.kat-on .katb-step .s4:before{animation:katSeg3 12s linear infinite}
  .kat-flow.kat-on .katb-step .s5:before{animation:katSeg4 12s linear infinite}
  .kat-flow.kat-on .katb-caret{animation:katBlink .8s step-end infinite}
  .kat-flow.kat-on .katb-prog i{animation:katProg 12s linear infinite}
  .kat-flow.kat-on .katb-gen-l .g1{animation:katG1 12s linear infinite}
  .kat-flow.kat-on .katb-gen-l .g2{animation:katG2 12s linear infinite}
  .kat-flow.kat-on .katb-ok{animation:katP3 12s ease infinite both}
  .kat-flow.kat-on .katb-out{animation:katP3 12s ease .15s infinite both}
  .kat-flow.kat-on .katb-act .pri{animation:katPub 12s ease infinite}
  .kat-flow.kat-on .katb-toast{animation:katP4 12s ease infinite both}
  /* anno */
  .kat-anno.kat-on .st.flip .fa{animation:katFa 6s ease 1.5s infinite}
  .kat-anno.kat-on .st.flip .fb{animation:katFb 6s ease 1.5s infinite}
  .kat-anno.kat-on .st.flip{animation:katFlipBox 6s ease 1.5s infinite}
}
/* typing only where the brief fits one line */
@media (prefers-reduced-motion:no-preference) and (min-width:1300px),(prefers-reduced-motion:no-preference) and (min-width:761px) and (max-width:1160px){
  .katb-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:74ch;max-width:100%}
  .kat-flow.kat-on .katb-type{animation:katType2 12s steps(74,end) infinite}
}

@keyframes katPulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes katBump{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.9)}}
@keyframes katToast{0%{opacity:0;transform:translateY(10px)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes katType{0%{width:0}28%,88%{width:30ch}96%,100%{width:0}}
@keyframes katBlink{50%{opacity:1}}
@keyframes katMod{0%,30%{opacity:0;transform:translateX(-10px)}36%,88%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes katBal{0%,14%{width:var(--w0);opacity:.45}46%,86%{width:var(--w1);opacity:.85}100%{width:var(--w0);opacity:.45}}
@keyframes katOk{0%,40%{opacity:0}50%,86%{opacity:1}96%,100%{opacity:0}}
@keyframes katChip{0%,24%{background:var(--kc);border-color:var(--kc);color:#fff}26%,100%{background:#fff;color:#14101f;border-color:color-mix(in srgb,var(--kc) 25%,#fff)}}
@keyframes katChip1{0%,24%{background:var(--kc);border-color:var(--kc);color:#fff}26%,98%{background:#fff;color:#14101f;border-color:color-mix(in srgb,var(--kc) 25%,#fff)}100%{background:var(--kc);color:#fff}}
@keyframes katDraw{0%{stroke-dashoffset:100}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes katTick{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes katScan{0%{opacity:0;left:-34%}10%{opacity:1}45%{opacity:1;left:100%}46%,100%{opacity:0;left:100%}}
@keyframes katRes{0%,42%{opacity:.25;transform:translateX(-6px)}52%,90%{opacity:1;transform:none}100%{opacity:.25}}
/* flow phases: P1 0-24% · P2 25-49% · P3 50-74% · P4 75-96% · reset */
@keyframes katRail{0%{transform:scaleY(0)}96%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@keyframes katDot1{0%,97%{background:#b169ff}100%{background:#2a2438}}
@keyframes katDot2{0%,24%{background:#2a2438}26%,97%{background:#b169ff}100%{background:#2a2438}}
@keyframes katDot3{0%,49%{background:#2a2438}51%,97%{background:#b169ff}100%{background:#2a2438}}
@keyframes katDot4{0%,74%{background:#2a2438}76%,97%{background:#b169ff}100%{background:#2a2438}}
@keyframes katTx2{0%,24%{opacity:.32}27%,97%{opacity:1}100%{opacity:.32}}
@keyframes katTx3{0%,49%{opacity:.32}52%,97%{opacity:1}100%{opacity:.32}}
@keyframes katTx4{0%,74%{opacity:.32}77%,97%{opacity:1}100%{opacity:.32}}
@keyframes katSeg1{0%{background:rgba(255,255,255,.1)}20%,97%{background:#b169ff}100%{background:rgba(255,255,255,.1)}}
@keyframes katSeg2{0%,25%{background:rgba(255,255,255,.1)}48%,97%{background:#b169ff}100%{background:rgba(255,255,255,.1)}}
@keyframes katSeg3{0%,50%{background:rgba(255,255,255,.1)}72%,97%{background:#b169ff}100%{background:rgba(255,255,255,.1)}}
@keyframes katSeg4{0%,75%{background:rgba(255,255,255,.1)}90%,97%{background:#b169ff}100%{background:rgba(255,255,255,.1)}}
@keyframes katType2{0%{width:0}22%,97%{width:74ch}100%{width:0}}
@keyframes katProg{0%,25%{transform:scaleX(0)}48%,97%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes katG1{0%,25%{opacity:0}26%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes katG2{0%,48%{opacity:0}50%,97%{opacity:1}100%{opacity:0}}
@keyframes katP3{0%,50%{opacity:.22}55%,97%{opacity:1}100%{opacity:.22}}
@keyframes katPub{0%,78%{background:transparent;border-color:rgba(255,255,255,.16)}80%,97%{background:#8b2fe6;border-color:#8b2fe6}100%{background:transparent}}
@keyframes katP4{0%,80%{opacity:.18}84%,97%{opacity:1}100%{opacity:.18}}
@keyframes katFa{0%,40%{opacity:1}46%,90%{opacity:0}96%,100%{opacity:1}}
@keyframes katFb{0%,40%{opacity:0}46%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes katFlipBox{0%,40%{border-color:rgba(240,180,41,.45);color:#f0b429}46%,90%{border-color:rgba(177,105,255,.45);color:#bc83f7}96%,100%{border-color:rgba(240,180,41,.45);color:#f0b429}}

/* ======================= RESPONSIVE ======================= */
@media(max-width:1160px){
  .kat-flow{grid-template-columns:minmax(0,1fr);gap:40px}
  .kat-flow-stage{max-width:680px}
}
@media(max-width:1180px){
  .kat-anno{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 36px}
  .kat-anno-stage{grid-column:1/-1;grid-row:1;max-width:640px;margin:0 auto;width:100%}
  .kat-co-l{text-align:left}
  .kat-co li:after,.kat-co li:before{display:none}
  .kat-co{gap:26px}
}
@media(max-width:1100px){
  .kb,.kb-fair{grid-column:span 6}
  .kb-ai,.kb-cert{grid-column:1/-1}
  .kb-glance{grid-column:span 6}
  .kb-audit{grid-column:1/-1}
  .katd-toasts{left:-10px}
}
@media(max-width:900px){
  .kat-cine-pts{grid-template-columns:minmax(0,1fr)}
  .kat-cine-pts li,.kat-cine-pts li+li{padding:20px 0 4px;border-left:0}
  .kat-cine-pts li+li{border-top:1px solid rgba(255,255,255,.12)}
  .kat-cine-pts li+li:before{left:0}
  .kb-ai,.kb-cert{grid-template-columns:minmax(0,1fr)}
  .kv-cert{grid-template-columns:minmax(0,1fr)}
  .kv-arrow{display:none}
}
@media(max-width:640px){
  .kb,.kb-fair,.kb-glance{grid-column:1/-1}
  .kat-anno{grid-template-columns:minmax(0,1fr)}
  .katd{grid-template-columns:minmax(0,1fr)}
  .katd-nav{display:none}
  .katd-row{grid-template-columns:minmax(0,1fr)}
  .katd-kpis,.katb-out,.katr-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .katb-step div{font-size:0;gap:0}
  .katd-toasts{display:none}
  .katr-r{grid-template-columns:minmax(0,1fr) 44px 104px;padding:9px 10px}
  .kv-type{width:auto}
}