/* ==========================================================================
   COMPLIANCE LOGGER (page /compliance-logger/, 2026-09-29)
   Scoped .cl* prefixes. Shares kat.js (html.kat-js + [data-kat] -> .kat-on,
   [data-kc] count-up). Same motion contract as kat.css: defaults are the
   FINAL static state, motion only in prefers-reduced-motion:no-preference,
   pre-reveal hiding gated on .kat-js. Mocks = dark instruments; status
   badges keep the severity canon (red critical / amber investigating /
   green resolved). No glow.
   ========================================================================== */
:root{--cl-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cld,.clp,.cla,.clc{font-family:Inter,system-ui,sans-serif;color:#e9e4f3;font-size:12.5px;line-height:1.45}
.cl-k{font-family:var(--cl-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8d86a0}
.cl-n{font-family:var(--cl-mono);font-size:10.5px;letter-spacing:.14em;color:#8d86a0}
.cl-st{justify-self:start;display:inline-block;font-family:var(--cl-mono);font-size:10px;letter-spacing:.05em;padding:3px 7px;border-radius:3px;border:1px solid rgba(255,255,255,.16);color:#cfc8dd;white-space:nowrap}
.cl-st.cr{border-color:rgba(193,73,83,.6);color:#e98a93;background:rgba(193,73,83,.1)}
.cl-st.ui{border-color:rgba(240,180,41,.5);color:#f0b429}
.cl-st.rs{border-color:rgba(74,222,128,.45);color:#4ade80}
.cl-st.nw{border-color:rgba(177,105,255,.5);color:#bc83f7}
.tg{display:inline-block;flex:none;width:26px;height:14px;border-radius:7px;background:#8b2fe6;position:relative;vertical-align:middle}
.tg:after{content:"";position:absolute;top:2px;left:14px;width:10px;height:10px;border-radius:50%;background:#fff}
.cl-hero-art .app-frame,.cl-ai-sec .app-frame,.clp .app-frame,.clt .app-frame{box-shadow:none}
.cl-head{max-width:800px;margin:0 auto 48px}

/* ======================= 1. HERO: COMMAND CENTER ======================= */
.cl-hero-art{position:relative}
.hero-art .app-body:has(.cld){padding:0}
.cld{background:#0c0918;padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px}
.cld-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cld-top b{display:block;font-size:16px;color:#fff}
.cld-top span{font-size:11.5px;color:#8d86a0}
.cld-bell{position:relative;width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:3px;color:#cfc8dd;flex:none}
.cld-bell svg{width:16px;height:16px}
.cld-bell em{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;border-radius:8px;background:#c14953;color:#fff;font-style:normal;font-size:9.5px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.cld-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)}
.cld-kpis div{background:#120e22;padding:10px 10px 9px}
.cld-kpis b{display:block;font-size:21px;font-weight:300;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cld-kpis b.rd{color:#e98a93}
.cld-kpis span{font-family:var(--cl-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#8d86a0}
.cld-chart{background:#120e22;border:1px solid rgba(255,255,255,.07);padding:11px 12px 8px}
.cld-chart .cl-k{display:block;margin-bottom:6px}
.cld-chart svg{display:block;width:100%;height:62px}
.cld-area{fill:rgba(177,105,255,.12)}
.cld-line{fill:none;stroke:#b169ff;stroke-width:2;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
.cld-tbl{border:1px solid rgba(255,255,255,.08)}
.cld-r{display:grid;grid-template-columns:86px minmax(0,1fr) 128px;gap:10px;align-items:center;padding:8px 11px;border-top:1px solid rgba(255,255,255,.06);font-size:12px}
.cld-r span:first-child{font-family:var(--cl-mono);font-size:11px;color:#bc83f7}
.cld-r span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cld-r.th{border-top:0;background:#120e22;font-family:var(--cl-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8d86a0}
.cld-r.th span:first-child{color:#8d86a0;font-size:9.5px}
.cld-toast{position:absolute;left:-28px;bottom:-46px;z-index:3;display:flex;align-items:center;gap:11px;padding:10px 14px;background:#161127;border:1px solid rgba(193,73,83,.45);border-radius:3px;font-family:Inter,sans-serif;width:262px}
.cld-toast i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;background:rgba(193,73,83,.18);color:#e98a93}
.cld-toast b{display:block;color:#fff;font-size:13px;line-height:1.3}
.cld-toast span{font-family:var(--cl-mono);font-size:10.5px;color:#a59fb6}

/* ======================= 1b. PRODUCT VIDEO (2026-10-12) ======================= */
.cl-cine{max-width:1100px;margin:0 auto}
.cl-vid{position:relative;background:#0c0918;border:1px solid rgba(107,19,175,.25);padding:10px}
.cl-vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#070615;border:0}
.cl-tick{position:absolute;width:18px;height:18px;border-color:#8b2fe6;border-style:solid;border-width:0;pointer-events:none}
.cl-tick.tl{top:-6px;left:-6px;border-top-width:2px;border-left-width:2px}
.cl-tick.tr{top:-6px;right:-6px;border-top-width:2px;border-right-width:2px}
.cl-tick.bl{bottom:-6px;left:-6px;border-bottom-width:2px;border-left-width:2px}
.cl-tick.br{bottom:-6px;right:-6px;border-bottom-width:2px;border-right-width:2px}
.cl-vid-cap{display:flex;justify-content:space-between;gap:12px;padding:11px 4px 1px;font-family:var(--cl-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8d86a0}
.cl-vid-cap b{color:#bc83f7;font-weight:500}
.cl-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(107,19,175,.18)}
.cl-cine-pts li{padding:22px 26px 4px 0;position:relative}
.cl-cine-pts li+li{padding-left:26px;border-left:1px solid rgba(107,19,175,.18)}
.cl-cine-pts li:before{content:"";position:absolute;top:-1px;left:0;height:2px;width:44px;background:#8b2fe6}
.cl-cine-pts li+li:before{left:26px}
.cl-cine-pts .cl-n{color:#8b2fe6}
.cl-cine-pts b{display:block;color:#14101f;font-size:17px;font-weight:700;margin:8px 0 4px;font-family:Inter,sans-serif}
.cl-cine-pts p{margin:0;color:#3f3f46;font-size:15px;line-height:1.55}
@media (prefers-reduced-motion:no-preference){
  .kat-js .cl-cine:not(.kat-on) .cl-vid{clip-path:inset(0 50% 0 50%)}
  .kat-js .cl-cine:not(.kat-on) .cl-cine-pts li{opacity:0;transform:translateY(14px)}
  .cl-vid{transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
  .cl-cine-pts li{transition:opacity .6s ease .7s,transform .6s cubic-bezier(.2,.7,.2,1) .7s}
  .cl-cine-pts li:nth-child(2){transition-delay:.82s}.cl-cine-pts li:nth-child(3){transition-delay:.94s}
}
@media(max-width:760px){
  .cl-cine-pts{grid-template-columns:minmax(0,1fr)}
  .cl-cine-pts li,.cl-cine-pts li+li{padding:20px 0 4px;border-left:0}
  .cl-cine-pts li+li{border-top:1px solid rgba(107,19,175,.18)}
  .cl-cine-pts li+li:before{left:0}
}

/* ======================= 2. PROBLEM -> SOLUTION LEDGER ======================= */
.cl-ledger{max-width:1120px;margin:0 auto}
.cl-lg-h,.cl-lg-r{display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);gap:0 18px;align-items:center}
.cl-lg-h{padding-bottom:12px}
.cl-lg-h span{font-family:var(--cl-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8d86a0}
.cl-lg-h span:last-child{color:#bc83f7}
.cl-lg-r{border-top:1px solid rgba(255,255,255,.12);padding:26px 0}
.cl-lg-r:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.cl-lg-p .cl-n{display:block;margin-bottom:8px}
.cl-lg-p b,.cl-lg-s b{display:block;font-family:Inter,sans-serif;font-size:18px;font-weight:700;margin-bottom:5px}
.cl-lg-p b{color:rgba(255,255,255,.78)}
.cl-lg-p p{margin:0;color:rgba(255,255,255,.6);font-size:15px;line-height:1.55}
.cl-lg-s{border-left:2px solid #b169ff;padding-left:20px}
.cl-lg-s b{color:#fff}
.cl-lg-s p{margin:0;color:rgba(255,255,255,.8);font-size:15px;line-height:1.55}
.cl-lg-a{position:relative;height:14px}
.cl-lg-a i{position:absolute;left:0;right:8px;top:6px;height:2px;background:#b169ff;transform-origin:left}
.cl-lg-a:after{content:"";position:absolute;right:0;top:2px;border:5px solid transparent;border-left:8px solid #b169ff;border-right:0}

/* ======================= 3. PUBLIC PORTAL ======================= */
.cl-portal-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}
.cl-pts{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:14px}
.cl-pts li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.55;color:#3f3f46}
.cl-pts li:before{content:"";position:absolute;left:0;top:.55em;width:12px;height:2px;background:#8b2fe6}
.cl-pts li b{color:#14101f}
.clp-stage{display:grid;background:#0c0918;min-height:392px}
.clp-scr{grid-area:1/1;padding:20px;display:flex;flex-direction:column;gap:13px}
.clp-scr.s2,.clp-scr.s3{opacity:0;visibility:hidden}
.clp-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.clp-h b{font-size:17px;color:#fff}
.clp-h span{font-size:11.5px;color:#8d86a0}
.clp-h code,.clp-code code{font-family:var(--cl-mono);color:#bc83f7;background:none;padding:0}
.clp-modes{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.clp-modes span{font-size:12px;text-align:center;padding:9px 8px;border:1px solid rgba(255,255,255,.12);border-radius:3px;color:#a59fb6}
.clp-modes span.on{border-color:#b169ff;background:rgba(177,105,255,.12);color:#fff;font-weight:600}
.clp-anon{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#fff}
.clp-anon em{font-style:normal;margin-left:auto;font-size:11px;color:#8d86a0}
.clp-fld{background:#120e22;border:1px solid rgba(255,255,255,.08);padding:11px 13px}
.clp-fld .cl-k{display:block;margin-bottom:6px}
.clp-fld p{margin:0;font-size:12.5px;color:#e9e4f3;line-height:1.55;min-height:58px}
.clp-att{display:flex;align-items:center;gap:10px}
.clp-att span{font-family:var(--cl-mono);font-size:11px;color:#e9e4f3;border:1px dashed rgba(177,105,255,.45);padding:5px 9px;border-radius:3px}
.clp-att em{font-style:normal;font-size:11px;color:#8d86a0}
.clp-btn{align-self:flex-end;font-size:12px;font-weight:600;padding:9px 15px;border-radius:3px;background:#8b2fe6;color:#fff;margin-top:auto}
.clp-ok{display:grid;justify-items:center;text-align:center;gap:4px;padding-top:14px}
.clp-ok i{width:44px;height:44px;border-radius:50%;background:#b169ff;color:#0c0918;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:20px;margin-bottom:6px}
.clp-ok b{font-size:17px;color:#fff}
.clp-ok span{font-size:12px;color:#8d86a0}
.clp-code{border:1px solid rgba(177,105,255,.4);background:rgba(177,105,255,.07);padding:16px;text-align:center;display:grid;gap:6px}
.clp-code code{font-size:26px;letter-spacing:.12em;color:#fff}
.clp-code em{font-style:normal;font-size:11.5px;color:#a59fb6}
.clp-s2-btn{align-self:center}
.clp-scr.s2 .clp-btn{align-self:center}
.clp-tl{list-style:none;margin:0;padding:0 0 0 18px;display:grid;gap:14px;position:relative}
.clp-tl:before{content:"";position:absolute;left:4px;top:6px;bottom:8px;width:1px;background:rgba(177,105,255,.4)}
.clp-tl li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
.clp-tl li:before{content:"";position:absolute;left:-18px;top:4px;width:9px;height:9px;border-radius:50%;background:#b169ff}
.clp-tl b{font-size:13px;color:#fff}
.clp-tl span{font-family:var(--cl-mono);font-size:10.5px;color:#8d86a0}
.clp-tl li.msg{grid-template-columns:minmax(0,1fr) auto;background:#120e22;border:1px solid rgba(255,255,255,.08);padding:10px 12px;margin-left:-6px}
.clp-tl li.msg:before{left:-12px;top:14px}
.clp-tl li.msg p{grid-column:1/-1;grid-row:2;margin:2px 0 0;font-size:12.5px;color:#cfc8dd}
.clp-tl li.msg span{grid-column:2;grid-row:1}
.clp-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.clp-steps li{font-family:var(--cl-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#14101f;border-top:2px solid #8b2fe6;padding-top:9px}
.clp-steps li span{color:#8b2fe6;margin-right:8px}

/* ======================= 4. AI POLICY GAP ANALYZER ======================= */
.cla{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr) 54px minmax(0,1.15fr);align-items:stretch}
.cla-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.cla-col>.cl-k{color:#bc83f7}
.cla-card,.cla-docs,.cla-f{background:#0f0b1d;border:1px solid rgba(255,255,255,.09)}
.cla-card{padding:16px;display:flex;flex-direction:column;gap:7px;flex:1}
.cla-ref{display:flex;justify-content:space-between;align-items:center}
.cla-ref code{font-family:var(--cl-mono);font-size:12px;color:#bc83f7;background:none;padding:0}
.cla-card b{font-size:17px;color:#fff}
.cla-dept{font-size:11.5px;color:#8d86a0}
.cla-card p{margin:0;font-size:13px;color:#cfc8dd;line-height:1.55}
.cla-go{margin-top:auto;align-self:flex-start;font-size:12px;font-weight:600;padding:9px 14px;border-radius:3px;background:#8b2fe6;color:#fff;display:inline-flex;align-items:center;gap:7px}
.cla-go:before{content:"\2726";font-size:11px}
.cla-docs{position:relative;padding:12px;display:grid;grid-auto-rows:40px;gap:6px;flex:1;align-content:start}
.cla-docs div{position:relative;z-index:1;display:flex;align-items:center;gap:9px;padding:0 11px;border:1px solid rgba(255,255,255,.07);border-radius:3px;font-size:12.5px;color:#cfc8dd;white-space:nowrap;overflow:hidden}
.cla-docs div i{flex:none;width:11px;height:14px;border:1.3px solid #8d86a0;border-radius:1px;position:relative}
.cla-docs div i:after{content:"";position:absolute;left:2px;right:2px;top:4px;height:1px;background:#8d86a0;box-shadow:0 3px 0 #8d86a0}
.cla-docs div em{font-style:normal;margin-left:auto;font-family:var(--cl-mono);font-size:10.5px;color:#fff;background:#8b2fe6;padding:2px 6px;border-radius:3px}
.cla-docs div.hit{border-color:#b169ff;background:rgba(177,105,255,.12);color:#fff}
.cla-docs div.hit i,.cla-docs div.hit i:after{border-color:#bc83f7}
.cla-scan{position:absolute;left:12px;right:12px;top:12px;height:40px;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(177,105,255,.22),transparent);opacity:0;z-index:0}
.cla-wire{position:relative}
.cla-wire:before{content:"";position:absolute;left:6px;right:6px;top:50%;height:1px;background:rgba(177,105,255,.45)}
.cla-wire:after{content:"";position:absolute;right:4px;top:calc(50% - 4px);border:4px solid transparent;border-left:6px solid rgba(177,105,255,.7);border-right:0}
.cla-wire i{position:absolute;top:calc(50% - 3px);left:6px;width:6px;height:6px;border-radius:50%;background:#bc83f7;opacity:0}
.cla-out{gap:10px}
.cla-f{padding:12px 14px;display:grid;gap:3px}
.cla-f b{font-size:14px;color:#fff}
.cla-f p{margin:0;font-size:12.5px;color:#cfc8dd;line-height:1.5}
.cla-tag{font-family:var(--cl-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#bc83f7}
.cla-f.br{border-left:3px solid #c14953}
.cla-f.br .cla-tag{color:#e98a93}
.cla-f.gp{border-left:3px solid #f0b429}
.cla-f.gp .cla-tag{color:#f0b429}
.cla-f.ac{border-left:3px solid #b169ff}
.cla-val{list-style:none;margin:46px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.12)}
.cla-val li{padding:20px 24px 0 0}
.cla-val li+li{padding-left:24px;border-left:1px solid rgba(255,255,255,.12)}
.cla-val b{display:block;color:#fff;font-family:Inter,sans-serif;font-size:17px;font-weight:700;margin-bottom:4px}
.cla-val span{color:rgba(255,255,255,.72);font-size:15px;line-height:1.55}

/* ======================= 5. WORKSPACE TOUR ======================= */
.clt{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,4.4vw,64px);align-items:center;margin-top:10px}
.clt-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.clt-list li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 8px;padding:13px 16px;border-left:2px solid rgba(107,19,175,.16);border-radius:0 6px 6px 0}
.clt-list .cl-n{color:#8b2fe6;padding-top:3px}
.clt-list b{display:block;font-family:Inter,sans-serif;font-size:16.5px;font-weight:700;color:#14101f;margin-bottom:2px}
.clt-list span:not(.cl-n){font-size:14.5px;line-height:1.5;color:#3f3f46}
.clc{background:#0c0918;padding:16px;display:flex;flex-direction:column;gap:8px}
.clc-z{border:1px solid rgba(255,255,255,.06);border-radius:4px;padding:10px 12px;background:#100c1e}
.clc-z>.cl-k{display:block;margin-bottom:6px}
.clc-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.clc-hd b{display:block;font-size:15px;color:#fff}
.clc-hd span:not(.cl-st){font-family:var(--cl-mono);font-size:10.5px;color:#8d86a0}
.clc-ev{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.clc-ev span{font-family:var(--cl-mono);font-size:10.5px;color:#cfc8dd;border:1px solid rgba(255,255,255,.12);padding:3px 7px;border-radius:3px}
.clc-note{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:6px 0;border-top:1px dashed rgba(255,255,255,.08)}
.clc-note:first-of-type{border-top:0;padding-top:0}
.clc-note p{margin:0;font-size:12px;color:#e9e4f3}
.clc-note em{font-style:normal;flex:none;font-family:var(--cl-mono);font-size:9.5px;letter-spacing:.06em;color:#8d86a0;display:flex;align-items:center;gap:6px}
.clc-note em.vis{color:#bc83f7}
.clc-note .tg{width:22px;height:12px}
.clc-note .tg:after{width:8px;height:8px;left:12px}
.clc-as{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.clc-as b{font-size:13px;color:#fff}
.clc-as span{font-size:11.5px;color:#a59fb6}
.clc-as em{font-style:normal;margin-left:auto;font-family:var(--cl-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#bc83f7;border:1px solid rgba(177,105,255,.4);padding:2px 6px;border-radius:3px}
.clc-log{display:grid;gap:3px}
.clc-log span{font-family:var(--cl-mono);font-size:10.5px;color:#cfc8dd;display:flex;gap:10px}
.clc-log em{font-style:normal;color:#8d86a0;flex:none}
.clc-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:8px}
.clc-dp b{display:block;font-size:13px;color:#fff}
.clc-dp span{font-size:11px;color:#a59fb6}
.clc-ex{display:flex;gap:6px;flex-wrap:wrap}
.clc-ex span{font-size:11px;font-weight:600;padding:6px 10px;border-radius:3px;border:1px solid rgba(255,255,255,.16);color:#e9e4f3}
.clc-ex span:first-child{background:#8b2fe6;border-color:#8b2fe6;color:#fff}
.clt-ux{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.clt-ux li{font-family:var(--cl-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6b13af;border:1px solid rgba(107,19,175,.25);background:#fff;padding:7px 11px;border-radius:3px}

/* ======================= MOTION ======================= */
@media (prefers-reduced-motion:no-preference){
  /* pre-reveal (JS running, block not yet in view) */
  .kat-js .cl-hero-art:not(.kat-on) .cld-line{stroke-dashoffset:100}
  .kat-js .cl-hero-art:not(.kat-on) .cld-area{opacity:0}
  .kat-js .cl-hero-art:not(.kat-on) .cld-r:not(.th),
  .kat-js .cl-ledger:not(.kat-on) .cl-lg-p,
  .kat-js .cl-ledger:not(.kat-on) .cl-lg-s,
  .kat-js .cla:not(.kat-on) .cla-col{opacity:0;transform:translateY(12px)}
  .kat-js .cl-hero-art:not(.kat-on) .cld-toast{opacity:0;transform:translateY(12px)}
  .kat-js .cl-ledger:not(.kat-on) .cl-lg-a i{transform:scaleX(0)}
  .kat-js .clt:not(.kat-on) .clt-list li{opacity:0;transform:translateX(-14px)}
  .kat-js .clt:not(.kat-on) .clt-stage{opacity:0;transform:translateY(14px)}

  /* reveal transitions */
  .cld-line{transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .3s}
  .cld-area{transition:opacity .8s ease 1.2s}
  .cld-r,.cl-lg-p,.cl-lg-s,.cla-col,.clt-list li,.clt-stage{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .cld-r:nth-child(2){transition-delay:.5s}.cld-r:nth-child(3){transition-delay:.62s}.cld-r:nth-child(4){transition-delay:.74s}.cld-r:nth-child(5){transition-delay:.86s}
  .cld-toast{transition:opacity .5s ease 1.8s,transform .5s cubic-bezier(.2,.7,.2,1) 1.8s}
  .cl-lg-a i{transition:transform .6s cubic-bezier(.6,0,.2,1)}
  .cl-lg-r:nth-child(2) .cl-lg-p{transition-delay:.05s}.cl-lg-r:nth-child(2) .cl-lg-a i{transition-delay:.45s}.cl-lg-r:nth-child(2) .cl-lg-s{transition-delay:.85s}
  .cl-lg-r:nth-child(3) .cl-lg-p{transition-delay:.35s}.cl-lg-r:nth-child(3) .cl-lg-a i{transition-delay:.75s}.cl-lg-r:nth-child(3) .cl-lg-s{transition-delay:1.15s}
  .cl-lg-r:nth-child(4) .cl-lg-p{transition-delay:.65s}.cl-lg-r:nth-child(4) .cl-lg-a i{transition-delay:1.05s}.cl-lg-r:nth-child(4) .cl-lg-s{transition-delay:1.45s}
  .cla-col:nth-child(3){transition-delay:.2s}.cla-col:nth-child(5){transition-delay:.4s}
  .clt-list li:nth-child(2){transition-delay:.07s}.clt-list li:nth-child(3){transition-delay:.14s}.clt-list li:nth-child(4){transition-delay:.21s}.clt-list li:nth-child(5){transition-delay:.28s}.clt-list li:nth-child(6){transition-delay:.35s}
  .clt-stage{transition-delay:.25s}

  /* hero loops */
  .kat-on .cld-r.nw{animation:clFlash 4.5s ease 2.4s infinite}
  .kat-on .cld-bell em{animation:clBadge 2.4s ease-in-out 2s infinite}
  /* portal: 12s story (submit 0-33 / code 34-65 / track 66-96) */
  .kat-on .clp-scr.s1{animation:clS1 12s ease infinite}
  .kat-on .clp-scr.s2{animation:clS2 12s ease infinite}
  .kat-on .clp-scr.s3{animation:clS3 12s ease infinite}
  .kat-on .clp-anon .tg{animation:clTgBg 12s ease infinite}
  .kat-on .clp-anon .tg:after{animation:clTgKn 12s ease infinite}
  .kat-on .clp-fld .l1{animation:clL1 12s ease infinite}
  .kat-on .clp-fld .l2{animation:clL2 12s ease infinite}
  .kat-on .clp-fld .l3{animation:clL3 12s ease infinite}
  .kat-on .clp-att{animation:clAtt 12s ease infinite}
  .kat-on .clp-scr.s1 .clp-btn{animation:clPress 12s ease infinite}
  .kat-on .clp-tl li{animation:clTl 12s ease infinite}
  .kat-on .clp-tl li:nth-child(2){animation-name:clTl2}
  .kat-on .clp-tl li:nth-child(3){animation-name:clTl3}
  .kat-on .clp-steps .p1{animation:clSt1 12s ease infinite}
  .kat-on .clp-steps .p2{animation:clSt2 12s ease infinite}
  .kat-on .clp-steps .p3{animation:clSt3 12s ease infinite}
  /* analyzer: 10s story */
  .cla.kat-on .cla-go{animation:clGo 10s ease infinite}
  .cla.kat-on .cla-scan{animation:clScan 10s ease-in-out infinite}
  .cla.kat-on .cla-docs .d3{animation:clHit 10s ease infinite}
  .cla.kat-on .cla-docs .d3 em{animation:clEm 10s ease infinite}
  .cla.kat-on .cla-wire:nth-child(2) i{animation:clWire1 10s linear infinite}
  .cla.kat-on .cla-wire:nth-child(4) i{animation:clWire2 10s linear infinite}
  .cla.kat-on .cla-f.br{animation:clF1 10s ease infinite}
  .cla.kat-on .cla-f.gp{animation:clF2 10s ease infinite}
  .cla.kat-on .cla-f.ac{animation:clF3 10s ease infinite}
  /* workspace tour: 18s, 3s per feature */
  .clt.kat-on .clt-list li,.clt.kat-on .clc-z{animation:clTour 18s ease infinite}
  .clt.kat-on .clc-z{animation-name:clZone}
  .clt.kat-on :is(.clt-list .t2,.clc-z.z2){animation-delay:3s}
  .clt.kat-on :is(.clt-list .t3,.clc-z.z3){animation-delay:6s}
  .clt.kat-on :is(.clt-list .t4,.clc-z.z4){animation-delay:9s}
  .clt.kat-on :is(.clt-list .t5,.clc-z.z5){animation-delay:12s}
  .clt.kat-on :is(.clt-list .t6,.clc-z.z6){animation-delay:15s}
}
@keyframes clFlash{0%,100%{background:transparent}12%,30%{background:rgba(193,73,83,.14)}}
@keyframes clBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes clS1{0%,30%{opacity:1;visibility:visible}34%,95%{opacity:0;visibility:hidden}99%,100%{opacity:1;visibility:visible}}
@keyframes clS2{0%,32%{opacity:0;visibility:hidden}36%,62%{opacity:1;visibility:visible}66%,100%{opacity:0;visibility:hidden}}
@keyframes clS3{0%,64%{opacity:0;visibility:hidden}68%,95%{opacity:1;visibility:visible}99%,100%{opacity:0;visibility:hidden}}
@keyframes clTgBg{0%,5%{background:rgba(255,255,255,.18)}8%,100%{background:#8b2fe6}}
@keyframes clTgKn{0%,5%{left:2px}8%,100%{left:14px}}
@keyframes clL1{0%,9%{opacity:0}12%,92%{opacity:1}94%,100%{opacity:0}}
@keyframes clL2{0%,13%{opacity:0}16%,92%{opacity:1}94%,100%{opacity:0}}
@keyframes clL3{0%,17%{opacity:0}20%,92%{opacity:1}94%,100%{opacity:0}}
@keyframes clAtt{0%,21%{opacity:0;transform:translateY(6px)}24%,92%{opacity:1;transform:none}94%,100%{opacity:0}}
@keyframes clPress{0%,27%{transform:none;filter:none}29%{transform:scale(.95);filter:brightness(1.25)}31%,100%{transform:none;filter:none}}
@keyframes clTl{0%,67%{opacity:0;transform:translateY(6px)}70%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes clTl2{0%,72%{opacity:0;transform:translateY(6px)}75%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes clTl3{0%,78%{opacity:0;transform:translateY(6px)}81%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes clSt1{0%,33%{color:#14101f;border-top-color:#8b2fe6}34%,100%{color:#9b95a8;border-top-color:rgba(107,19,175,.2)}}
@keyframes clSt2{0%,33%{color:#9b95a8;border-top-color:rgba(107,19,175,.2)}34%,65%{color:#14101f;border-top-color:#8b2fe6}66%,100%{color:#9b95a8;border-top-color:rgba(107,19,175,.2)}}
@keyframes clSt3{0%,65%{color:#9b95a8;border-top-color:rgba(107,19,175,.2)}66%,97%{color:#14101f;border-top-color:#8b2fe6}100%{color:#9b95a8;border-top-color:rgba(107,19,175,.2)}}
@keyframes clGo{0%,4%{filter:none;transform:none}7%{filter:brightness(1.3);transform:scale(.96)}10%,100%{filter:none;transform:none}}
@keyframes clScan{0%,11%{opacity:0;top:12px}14%{opacity:1;top:12px}24%{top:58px}34%{top:104px}40%{opacity:1;top:104px}46%,100%{opacity:0;top:104px}}
@keyframes clHit{0%,38%{border-color:rgba(255,255,255,.07);background:transparent;color:#cfc8dd}42%,94%{border-color:#b169ff;background:rgba(177,105,255,.12);color:#fff}100%{border-color:rgba(255,255,255,.07);background:transparent}}
@keyframes clEm{0%,40%{opacity:0;transform:scale(.6)}44%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes clWire1{0%,6%{opacity:0;left:6px}8%{opacity:1}14%{opacity:1;left:calc(100% - 12px)}15%,100%{opacity:0;left:calc(100% - 12px)}}
@keyframes clWire2{0%,42%{opacity:0;left:6px}44%{opacity:1}50%{opacity:1;left:calc(100% - 12px)}51%,100%{opacity:0;left:calc(100% - 12px)}}
@keyframes clF1{0%,49%{opacity:.14;transform:translateX(8px)}53%,95%{opacity:1;transform:none}100%{opacity:.14}}
@keyframes clF2{0%,57%{opacity:.14;transform:translateX(8px)}61%,95%{opacity:1;transform:none}100%{opacity:.14}}
@keyframes clF3{0%,65%{opacity:.14;transform:translateX(8px)}69%,95%{opacity:1;transform:none}100%{opacity:.14}}
@keyframes clTour{0%,15%{border-left-color:#8b2fe6;background:rgba(139,47,230,.06)}18%,100%{border-left-color:rgba(107,19,175,.16);background:transparent}}
@keyframes clZone{0%,15%{border-color:#b169ff;background:rgba(177,105,255,.1)}18%,100%{border-color:rgba(255,255,255,.06);background:#100c1e}}

/* ======================= RESPONSIVE ======================= */
@media(max-width:1100px){
  .cla{grid-template-columns:minmax(0,1fr);gap:22px}
  .cla-wire{display:none}
  .clt{grid-template-columns:minmax(0,1fr)}
  .clt-stage{max-width:680px}
  .cld-toast{left:-10px}
}
@media(max-width:760px){
  .cl-lg-h{display:none}
  .cl-lg-r{grid-template-columns:minmax(0,1fr);gap:16px}
  .cl-lg-a{display:none}
  .cla-val{grid-template-columns:minmax(0,1fr)}
  .cla-val li,.cla-val li+li{padding:18px 0 0;border-left:0}
  .cla-val li+li{border-top:1px solid rgba(255,255,255,.12);margin-top:18px}
}
@media(max-width:640px){
  .cld-toast{display:none}
  .cld-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cld-r{grid-template-columns:74px minmax(0,1fr);row-gap:4px}
  .cld-r .cl-st{grid-column:2}
  .cld-r.th span:last-child{display:none}
  .clp-modes{grid-template-columns:minmax(0,1fr)}
  .clp-anon em{display:none}
  .clc-row{grid-template-columns:minmax(0,1fr)}
  .clc-note{flex-direction:column;align-items:flex-start;gap:4px}
}