/* "Your job hunt, all in one view." — one spotlit Klep mascot walking through
   the 4 stages (scan & match → bust ghosts → tailor → ready to apply).
   Fully scoped under .qkf-root / .qkf; every class + keyframe is qk/qp/qkf-
   prefixed so it can't collide with the site or the sf-* live-scan styles.
   Fonts (Bricolage / Familjen / JetBrains Mono) are already loaded by the page,
   so there is no @import here. Dropped into a .sf-section so the page's klepıfy
   watermark + glow sit behind the dark card. */
.qkf-root{--ink:#0E0E0C;--ink2:#17170f;--paper:#F4EFE6;--cream:#FAF5EB;--white:#FFFEF8;--acid:#D4FF3D;--acid-deep:#BFE82D;--coral:#FF6B47;--muted:#9b988c;--spring:cubic-bezier(.34,1.36,.5,1);--ease:cubic-bezier(.45,.05,.25,1);font-family:'Inter','Familjen Grotesk',system-ui,sans-serif;text-align:left}
.qkf-root *{box-sizing:border-box;margin:0;padding:0}.qkf-root .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.qkf{position:relative;background:radial-gradient(80% 120% at 50% -20%,rgba(212,255,61,.14),transparent 55%),linear-gradient(160deg,var(--ink),var(--ink2));border:2.5px solid var(--ink);border-radius:22px;box-shadow:10px 13px 0 rgba(14,14,12,.5);padding:22px 22px 26px;overflow:hidden;color:var(--paper)}
.qkf::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;background-image:radial-gradient(rgba(244,239,230,.10) 1px,transparent 1.3px);background-size:18px 18px;-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}
.qkf-head{position:relative;z-index:1;margin-bottom:16px}
.qkf-kick{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acid);margin-bottom:6px}
.qkf-title{font-family:'Satoshi','Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(18px,2.2vw,26px);letter-spacing:-.02em;line-height:1}.qkf-title em{font-style:normal;color:var(--acid)}
.qkf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;z-index:1}
@media(max-width:820px){.qkf-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:430px){.qkf-grid{grid-template-columns:1fr}}
.qp{display:flex;flex-direction:column}
.qp-stage{position:relative;height:244px;margin-bottom:11px}
.qp-bw{position:absolute;left:0;right:0;bottom:0;background:var(--white);border:2px solid var(--ink);border-radius:11px;box-shadow:4px 5px 0 rgba(0,0,0,.5);overflow:hidden;color:var(--ink)}
.qp-chrome{display:flex;gap:4px;align-items:center;padding:5px 8px;border-bottom:1.5px solid var(--ink);background:var(--cream)}
.qp-chrome i{width:6px;height:6px;border-radius:50%;border:1px solid var(--ink)}
.qp-chrome i:nth-child(1){background:var(--coral)}.qp-chrome i:nth-child(2){background:var(--acid)}.qp-chrome i:nth-child(3){background:var(--paper)}
.qp-screen{position:relative;padding:8px;height:186px}
.qp-status{position:absolute;left:0;right:0;bottom:0;height:19px;border-top:1.5px solid rgba(14,14,12,.12);background:var(--cream);font-family:'JetBrains Mono',monospace;font-size:8px;color:#6b6960;display:flex;align-items:center;padding:0 8px;overflow:hidden}
.qp-status span{position:absolute;left:8px;right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.qp-status .led{width:5px;height:5px;border-radius:50%;flex:none;background:var(--acid-deep)}
.qp-s2{opacity:0}.qp-s2 b{color:var(--ink);font-weight:700}
.qp-cap{display:flex;gap:9px;align-items:flex-start}
.qp-num{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(212,255,61,.2);color:var(--acid);display:grid;place-items:center;font-family:'Satoshi','Bricolage Grotesque',sans-serif;font-weight:700;font-size:13px}
.qp-cl b{display:block;font-size:12.5px;font-weight:700;line-height:1.15;margin-bottom:3px;min-height:1.15em}.qp-cl p{font-size:10.5px;line-height:1.35;color:#c7c4b9}
.qp1 .qp-num{animation:qk-num1 24s steps(1) infinite}.qp2 .qp-num{animation:qk-num2 24s steps(1) infinite}.qp3 .qp-num{animation:qk-num3 24s steps(1) infinite}.qp4 .qp-num{animation:qk-num4 24s steps(1) infinite}
@keyframes qk-num1{0%,24%{background:var(--acid);color:var(--ink);box-shadow:0 0 0 3px rgba(212,255,61,.25)}25%,100%{background:rgba(212,255,61,.2);color:var(--acid);box-shadow:none}}
@keyframes qk-num2{0%,26%{background:rgba(212,255,61,.2);color:var(--acid)}27%,49%{background:var(--acid);color:var(--ink);box-shadow:0 0 0 3px rgba(212,255,61,.25)}50%,100%{background:rgba(212,255,61,.2);color:var(--acid);box-shadow:none}}
@keyframes qk-num3{0%,51%{background:rgba(212,255,61,.2);color:var(--acid)}52%,77.5%{background:var(--acid);color:var(--ink);box-shadow:0 0 0 3px rgba(212,255,61,.25)}78%,100%{background:rgba(212,255,61,.2);color:var(--acid);box-shadow:none}}
@keyframes qk-num4{0%,77%{background:rgba(212,255,61,.2);color:var(--acid)}78%,99%{background:var(--acid);color:var(--ink);box-shadow:0 0 0 3px rgba(212,255,61,.25)}100%{background:rgba(212,255,61,.2);color:var(--acid)}}
.qp1 .qp-bw{animation:qk-bw1 24s steps(1) infinite}.qp2 .qp-bw{animation:qk-bw2 24s steps(1) infinite}.qp3 .qp-bw{animation:qk-bw3 24s steps(1) infinite}.qp4 .qp-bw{animation:qk-bw4 24s steps(1) infinite}
@keyframes qk-bw1{0%,24%{box-shadow:0 0 0 2px var(--acid),4px 5px 0 rgba(0,0,0,.5)}25%,100%{box-shadow:4px 5px 0 rgba(0,0,0,.5)}}
@keyframes qk-bw2{0%,26%{box-shadow:4px 5px 0 rgba(0,0,0,.5)}27%,49%{box-shadow:0 0 0 2px var(--acid),4px 5px 0 rgba(0,0,0,.5)}50%,100%{box-shadow:4px 5px 0 rgba(0,0,0,.5)}}
@keyframes qk-bw3{0%,51%{box-shadow:4px 5px 0 rgba(0,0,0,.5)}52%,77.5%{box-shadow:0 0 0 2px var(--acid),4px 5px 0 rgba(0,0,0,.5)}78%,100%{box-shadow:4px 5px 0 rgba(0,0,0,.5)}}
@keyframes qk-bw4{0%,77%{box-shadow:4px 5px 0 rgba(0,0,0,.5)}78%,99%{box-shadow:0 0 0 2px var(--acid),4px 5px 0 rgba(0,0,0,.5)}100%{box-shadow:4px 5px 0 rgba(0,0,0,.5)}}
.qp1 .qp-s2{animation:qk-v1 24s steps(1) infinite}.qp2 .qp-s2{animation:qk-v2 24s steps(1) infinite}.qp3 .qp-s2{animation:qk-v3 24s steps(1) infinite}.qp4 .qp-s2{animation:qk-v4 24s steps(1) infinite}
.qp1 .qp-s1{animation:qk-x1 24s steps(1) infinite}.qp2 .qp-s1{animation:qk-x2 24s steps(1) infinite}.qp3 .qp-s1{animation:qk-x3 24s steps(1) infinite}.qp4 .qp-s1{animation:qk-x4 24s steps(1) infinite}
@keyframes qk-v1{0%,18%{opacity:0}19%,99%{opacity:1}100%{opacity:0}}@keyframes qk-x1{0%,18%{opacity:1}19%,100%{opacity:0}}
@keyframes qk-v2{0%,43%{opacity:0}44%,99%{opacity:1}100%{opacity:0}}@keyframes qk-x2{0%,43%{opacity:1}44%,100%{opacity:0}}
@keyframes qk-v3{0%,69%{opacity:0}70%,99%{opacity:1}100%{opacity:0}}@keyframes qk-x3{0%,69%{opacity:1}70%,100%{opacity:0}}
@keyframes qk-v4{0%,92%{opacity:0}93%,99%{opacity:1}100%{opacity:0}}@keyframes qk-x4{0%,92%{opacity:1}93%,100%{opacity:0}}

/* ===== THE STAR ===== */
.qk-klep{position:absolute;z-index:10;width:66px;height:68px;left:13%;top:64px;margin-left:-33px;will-change:left;animation:qk-travel 24s var(--ease) infinite}
.qk-glow{position:absolute;left:50%;top:46%;width:130px;height:130px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(212,255,61,.5),rgba(212,255,61,.2) 34%,rgba(212,255,61,.06) 52%,transparent 66%);animation:qk-glowp 2.4s ease-in-out infinite}
@keyframes qk-glowp{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
.qk-shadow{position:absolute;left:50%;bottom:-9px;width:52px;height:11px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.42),transparent 70%);transform:translateX(-50%) scaleX(1);animation:qk-shadow 24s var(--ease) infinite}
@keyframes qk-shadow{0%,100%{opacity:.5;transform:translateX(-50%) scaleX(1)}10%{opacity:.32;transform:translateX(-50%) scaleX(.72)}35%{opacity:.6;transform:translateX(-50%) scaleX(1.18)}90%{opacity:.55;transform:translateX(-50%) scaleX(1.14)}95%{opacity:.28;transform:translateX(-50%) scaleX(.68)}}
.ksvg{position:relative;width:100%;height:100%;transform-origin:bottom center;will-change:transform;animation:qk-act 24s var(--ease) infinite}
.qk-mk{fill:var(--coral);opacity:0;animation:qk-mk 24s steps(1) infinite}
@keyframes qk-mk{0%,51%{opacity:0;fill:var(--coral)}52%,74%{opacity:1;fill:var(--acid-deep)}75%,100%{opacity:0}}
.qk-catch{position:absolute;left:54%;top:22%;width:56px;height:56px;transform:translate(-50%,-50%);opacity:0;animation:qk-catch 24s var(--ease) infinite}.qk-catch svg{width:100%;height:100%}
@keyframes qk-catch{0%,8%{opacity:0;transform:translate(-50%,-50%) scale(.4)}11%{opacity:1;transform:translate(-50%,-50%) scale(1)}15%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}100%{opacity:0}}
@keyframes qk-travel{0%,23%{left:13%}27%,48%{left:38%}52%,73%{left:62%}77%,98%{left:87%}100%{left:13%}}
@keyframes qk-act{
  0%{transform:translateY(0) rotate(0) scale(1)}
  6%{transform:translateY(-2px) rotate(-6deg)}
  10%{transform:translateY(-11px) rotate(6deg) scale(1.12)}
  13%{transform:translateY(-4px) rotate(2deg) scale(1.04)}
  16%{transform:translateY(0) rotate(0) scale(1)}
  20%{transform:translateY(3px) rotate(2deg)}
  23%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(-8px) rotate(0)}
  27%{transform:translateY(0) rotate(0)}
  30%{transform:translateY(-8px) rotate(14deg)}
  33%{transform:translateY(20px) rotate(-8deg)}
  35%{transform:translateY(42px) rotate(-24deg) scale(1.04)}
  38%{transform:translateY(20px) rotate(-10deg)}
  41%{transform:translateY(6px) rotate(-3deg)}
  44%{transform:translateY(0) rotate(0)}
  48%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-8px) rotate(0)}
  52%{transform:translateY(0) rotate(0)}
  56%{transform:translateY(20px) rotate(7deg)}
  60%{transform:translateY(32px) rotate(8deg)}
  64%{transform:translateY(30px) rotate(3deg)}
  68%{transform:translateY(32px) rotate(7deg)}
  72%{transform:translateY(26px) rotate(3deg)}
  74%{transform:translateY(8px) rotate(2deg)}
  75%{transform:translateY(-8px) rotate(0)}
  77%{transform:translateY(0) rotate(0)}
  84%{transform:translateY(-8px) rotate(5deg)}
  87%{transform:translateY(42px) rotate(3deg)}
  89%{transform:translateY(122px) rotate(2deg) scale(.97)}
  92%{transform:translateY(74px) rotate(-2deg)}
  95%{transform:translateY(-18px) rotate(0) scale(1.14)}
  98%{transform:translateY(0) rotate(0) scale(1)}
  100%{transform:translateY(0) rotate(0)}}

.qk-doc{position:absolute;z-index:9;left:13%;top:176px;width:34px;height:44px;background:#fff;border:1.5px solid #0E0E0C;border-radius:4px;box-shadow:2px 2px 0 rgba(14,14,12,.4);padding:4px;display:flex;flex-direction:column;gap:2.5px;margin-left:-17px;opacity:0;will-change:transform,opacity;animation:qk-docfly 24s var(--ease) infinite}
.qk-doc .dt{font-family:'JetBrains Mono',monospace;font-size:5.4px;font-weight:700;letter-spacing:.05em;color:#0E0E0C;line-height:1;border-bottom:1px solid rgba(14,14,12,.4);padding-bottom:2px}
.qk-doc .dl{height:2.4px;background:rgba(14,14,12,.22);border-radius:2px}.qk-doc .dl.s{width:58%}
.qk-doc .dc{display:flex;gap:2px;margin-top:auto}.qk-doc .dc i{width:8px;height:4px;background:var(--acid);border-radius:1px}
@keyframes qk-docfly{0%{opacity:0;transform:translateY(16px) rotate(-10deg) scale(.92)}2%{opacity:1;transform:translateY(0) rotate(-10deg) scale(1)}5%{transform:translateY(-44px) rotate(-2deg) scale(.96)}8%{transform:translateY(-90px) rotate(10deg) scale(.72)}11%{opacity:1;transform:translateY(-96px) rotate(5deg) scale(.3)}13%{opacity:0;transform:translateY(-96px) scale(.1)}100%{opacity:0}}

/* P1 */
.qp1 .qp-rzbar{display:flex;align-items:center;gap:3px;background:#0E0E0C;border-radius:6px;padding:3px 5px;margin-bottom:5px;opacity:0;transform:translateY(-150%);animation:qk-rz 24s var(--spring) infinite}
@keyframes qk-rz{0%,11%{opacity:0;transform:translateY(-150%)}15%,99%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-150%)}}
.qp1 .rzlbl{font-family:'JetBrains Mono',monospace;font-size:6.5px;font-weight:700;letter-spacing:.06em;color:var(--acid);flex:none}
.qp1 .rzc{font-family:'JetBrains Mono',monospace;font-size:6.5px;font-weight:700;color:#0E0E0C;background:var(--acid);border-radius:3px;padding:1px 4px}
.qp1 .qp-ph{font-size:9px;font-weight:700;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;animation:qk-ph 24s var(--ease) infinite}
@keyframes qk-ph{0%,13%{opacity:0}16%,99%{opacity:1}100%{opacity:0}}
.qp1 .qp-req{position:relative;font-family:'JetBrains Mono',monospace;font-size:8px;color:#3a3833;padding:2px 5px;border-radius:5px;margin-bottom:2px;display:flex;justify-content:space-between;z-index:0}
.qp1 .qp-req::before{content:"";position:absolute;inset:0;background:rgba(212,255,61,.22);border-radius:5px;transform:scaleX(0);transform-origin:left;z-index:-1}
.qp1 .qp-req .rk{font-weight:700;color:#3a7a00;opacity:0}
.qp1 .l1::before{animation:qk-rd1 24s var(--ease) infinite}.qp1 .l2::before{animation:qk-rd2 24s var(--ease) infinite}.qp1 .l3::before{animation:qk-rd3 24s var(--ease) infinite}
@keyframes qk-rd1{0%,14%{transform:scaleX(0)}17%,99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes qk-rd2{0%,17%{transform:scaleX(0)}20%,99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes qk-rd3{0%,20%{transform:scaleX(0)}23%,99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.qp1 .l1 .rk{animation:qk-tk1 24s steps(1) infinite}.qp1 .l2 .rk{animation:qk-tk2 24s steps(1) infinite}.qp1 .l3 .rk{animation:qk-tk3 24s steps(1) infinite}
@keyframes qk-tk1{0%,16%{opacity:0}17%,99%{opacity:1}100%{opacity:0}}@keyframes qk-tk2{0%,19%{opacity:0}20%,99%{opacity:1}100%{opacity:0}}@keyframes qk-tk3{0%,22%{opacity:0}23%,99%{opacity:1}100%{opacity:0}}
.qp1 .qp-meter{position:absolute;left:8px;right:8px;bottom:23px;display:flex;align-items:center;gap:6px}
.qp1 .qp-meter .bar{flex:1;height:6px;border-radius:99px;background:rgba(14,14,12,.1);overflow:hidden}
.qp1 .qp-meter .bar i{display:block;height:100%;width:100%;background:var(--acid-deep);border-radius:99px;transform-origin:left;transform:scaleX(0);animation:qk-fill 24s var(--ease) infinite}
@keyframes qk-fill{0%,14%{transform:scaleX(0)}23%,99%{transform:scaleX(.94)}100%{transform:scaleX(0)}}
.qp1 .qp-meter b{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;color:#384e06;opacity:0;animation:qk-mb 24s var(--spring) infinite}
@keyframes qk-mb{0%,21%{opacity:0;transform:scale(.6)}24%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}

/* P2 */
.qp2 .qp-row{position:relative;border:1.4px solid rgba(14,14,12,.14);border-radius:7px;background:#fff;padding:5px 6px;overflow:hidden;margin-bottom:6px}
.qp2 .qp-rh{display:flex;align-items:center;gap:6px}
.qp2 .qp-ic{width:16px;height:16px;border-radius:4px;flex:none;display:grid;place-items:center;font-weight:700;font-size:8px;background:#ffd9cb;color:#8a2b0f}.qp2 .qp-ic.ok{background:#0E0E0C;color:var(--acid)}
.qp2 .qp-rt{flex:1;min-width:0;font-size:9px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qp2 .qp-rt small{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:7.5px;color:#8a877d}
.qp2 .qp-ev{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.qp2 .qp-evc{font-family:'JetBrains Mono',monospace;font-size:7px;font-weight:600;background:#fff2ec;color:#a23a18;border:1px solid #f3c3b2;border-radius:4px;padding:1px 4px;opacity:0}
.qp2 .e1{animation:qk-e1 24s var(--ease) infinite}.qp2 .e2{animation:qk-e2 24s var(--ease) infinite}.qp2 .e3{animation:qk-e3 24s var(--ease) infinite}
@keyframes qk-e1{0%,28%{opacity:0}30%,98%{opacity:1}100%{opacity:0}}@keyframes qk-e2{0%,30%{opacity:0}32%,98%{opacity:1}100%{opacity:0}}@keyframes qk-e3{0%,32%{opacity:0}34%,98%{opacity:1}100%{opacity:0}}
.qp2 .qp-gv{font-family:'JetBrains Mono',monospace;font-size:7px;font-weight:700;background:#ffd9cb;color:#8a2b0f;border:1px solid var(--coral);border-radius:99px;padding:2px 5px;opacity:0;animation:qk-gv 24s var(--spring) infinite}
@keyframes qk-gv{0%,31%{opacity:0;transform:scale(.6)}34%,98%{opacity:1;transform:scale(1)}100%{opacity:0}}
.qp2 .qp-strike{position:absolute;left:5px;right:5px;top:18px;height:2px;background:var(--coral);border-radius:2px;transform:scaleX(0);transform-origin:left;z-index:3;animation:qk-cut 24s var(--ease) infinite}
@keyframes qk-cut{0%,33%{transform:scaleX(0)}35.5%,38%{transform:scaleX(1)}40%,100%{transform:scaleX(1);opacity:0}}
.qp2 .gho{animation:qk-fly 24s var(--ease) infinite}
@keyframes qk-fly{0%,35%{transform:translateX(0) rotate(0);opacity:1}41%{transform:translateX(135%) rotate(12deg);opacity:0}99%{transform:translateX(135%);opacity:0}100%{transform:translateX(0);opacity:1}}
.qp2 .real{animation:qk-keep 24s var(--ease) infinite}
@keyframes qk-keep{0%,39%{transform:translateY(0);border-color:rgba(14,14,12,.14)}45%,99%{transform:translateY(-44px);border-color:var(--ink)}100%{transform:translateY(0);border-color:rgba(14,14,12,.14)}}
.qp2 .qp-rv{font-family:'JetBrains Mono',monospace;font-size:7px;font-weight:700;background:var(--acid);color:#384e06;border:1px solid #0E0E0C;border-radius:99px;padding:2px 5px;opacity:0;animation:qk-rv 24s var(--spring) infinite}
@keyframes qk-rv{0%,43%{opacity:0;transform:scale(.6)}46%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}
.qp2 .qp-imp{position:absolute;left:10px;top:16px;width:42px;height:42px;opacity:0;z-index:5;animation:qk-imp 24s var(--spring) infinite}.qp2 .qp-imp svg{width:100%;height:100%}
@keyframes qk-imp{0%,34%{opacity:0;transform:scale(.3) rotate(-10deg)}36.5%{opacity:1;transform:scale(1.1) rotate(0)}40%{opacity:0;transform:scale(1.45) rotate(8deg)}100%{opacity:0}}

/* P3 */
.qp3 .qp-bul{font-size:9.5px;line-height:1.7;color:#2c2b27}
.qp3 .qp-swap{position:relative;display:inline-block;font-weight:700}
.qp3 .qp-swap .old{position:relative;color:#a23a18}
.qp3 .qp-swap .old::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.6px;background:#c0392b;transform:scaleX(0);transform-origin:left}
.qp3 .qp-swap .new{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;color:#0E0E0C;background:var(--acid);outline:1.4px solid var(--ink);border-radius:3px;padding:0 2px}
.qp3 .s1 .old::after{animation:qk-str1 24s var(--ease) infinite}.qp3 .s1 .old{animation:qk-fd1 24s var(--ease) infinite}.qp3 .s1 .new{animation:qk-nw1 24s var(--spring) infinite}
.qp3 .s2 .old::after{animation:qk-str2 24s var(--ease) infinite}.qp3 .s2 .old{animation:qk-fd2 24s var(--ease) infinite}.qp3 .s2 .new{animation:qk-nw2 24s var(--spring) infinite}
@keyframes qk-str1{0%,56%{transform:scaleX(0)}59%,99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes qk-fd1{0%,59%{opacity:1}62%,99%{opacity:0}100%{opacity:1}}
@keyframes qk-nw1{0%,61%{opacity:0;transform:translateY(3px) scale(.92)}64%,99%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0}}
@keyframes qk-str2{0%,64%{transform:scaleX(0)}67%,99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes qk-fd2{0%,67%{opacity:1}70%,99%{opacity:0}100%{opacity:1}}
@keyframes qk-nw2{0%,69%{opacity:0;transform:translateY(3px) scale(.92)}72%,99%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0}}
.qp3 .qp-lock{position:absolute;left:8px;bottom:24px;font-family:'JetBrains Mono',monospace;font-size:7.5px;font-weight:700;color:#384e06;background:rgba(212,255,61,.5);border:1px solid var(--acid-deep);border-radius:4px;padding:1px 5px;opacity:0;animation:qk-lk 24s var(--spring) infinite}
@keyframes qk-lk{0%,72%{opacity:0;transform:scale(.7)}75%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}

/* P4 */
.qp4 .qp-rc{font-family:'JetBrains Mono',monospace;font-size:8px;color:#2c2b27;display:flex;align-items:center;gap:5px;margin-bottom:4px;opacity:0}
.qp4 .qp-rc b{color:var(--ink);font-weight:700}.qp4 .qp-rc .ck{color:#3a7a00;font-weight:700}
.qp4 .c1{animation:qk-c1 24s var(--ease) infinite}.qp4 .c2{animation:qk-c2 24s var(--ease) infinite}.qp4 .c3{animation:qk-c3 24s var(--ease) infinite}.qp4 .c4{animation:qk-c4 24s var(--ease) infinite}
@keyframes qk-c1{0%,78%{opacity:0}80%,99%{opacity:1}100%{opacity:0}}@keyframes qk-c2{0%,80%{opacity:0}82%,99%{opacity:1}100%{opacity:0}}@keyframes qk-c3{0%,82%{opacity:0}84%,99%{opacity:1}100%{opacity:0}}@keyframes qk-c4{0%,84%{opacity:0}86%,99%{opacity:1}100%{opacity:0}}
.qp4 .qp-applybtn{position:absolute;left:8px;right:8px;bottom:25px;background:var(--ink);color:var(--paper);text-align:center;font-weight:700;font-size:9px;padding:6px;border-radius:7px;opacity:0;animation:qk-ab 24s var(--ease) infinite}
@keyframes qk-ab{0%,80%{opacity:0;transform:translateY(6px);box-shadow:0 0 0 0 rgba(212,255,61,0)}84%,88%{opacity:1;transform:translateY(0)}89%{transform:scale(.92);box-shadow:0 0 0 7px rgba(212,255,61,.55)}91%{transform:scale(1)}91.5%{opacity:1}92%,100%{opacity:0}}
.qp4 .qp-sent{position:absolute;left:8px;right:8px;bottom:25px;text-align:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:9px;color:#0E0E0C;background:var(--acid);border:2px solid #0E0E0C;border-radius:7px;padding:5px;opacity:0;animation:qk-sent 24s var(--spring) infinite}
@keyframes qk-sent{0%,91%{opacity:0;transform:scale(.7)}93%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}
.qp4 .qp-conf{position:absolute;top:82px;left:50%;width:6px;height:6px;border-radius:1px;opacity:0;animation:qk-burst 24s var(--ease) infinite}
@keyframes qk-burst{0%,89%{opacity:0;transform:translate(0,0) scale(.4)}92%{opacity:1}98%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(220deg) scale(1.1)}100%{opacity:0}}

/* ── per-panel Klep for stacked (mobile / tablet) layouts ──────────────────
   The single travelling Klep only reads in a horizontal 4-up row (his whole
   path is left→right at a fixed height). Once the grid stacks at ≤820px we
   hide him and give EACH square its own Klep that DROPS IN from above on its
   turn and LEAPS DOWN toward the next — so Klep visibly hops down the stack in
   order (1→2→3→4), never random, never a dead gap. Each panel runs the same
   24s clock offset by +6s, so exactly one Klep is on screen at a time and the
   exit of one overlaps the entrance of the next. POSITIVE delays are critical:
   negative ones run the order backwards (1→4→3→2). No pixel math — each Klep
   lives inside its own panel. */
.qp-klep{display:none}
@keyframes qpk{
  0%{opacity:0;transform:translateY(-15px) scale(.78)}   /* drop in from above */
  4%{opacity:1;transform:translateY(0) scale(1.07)}      /* land in this box */
  8%{transform:translateY(0) scale(1)}
  13%{transform:translateY(-5px) scale(1)}               /* idle bob */
  18%{transform:translateY(0) scale(1)}
  22%{transform:translateY(-3px) scale(1.03)}
  24%{opacity:1;transform:translateY(2px) scale(1)}
  27%{opacity:0;transform:translateY(18px) scale(.84)}   /* leap DOWN toward next box */
  100%{opacity:0;transform:translateY(18px) scale(.84)}}
@media(max-width:820px){
  .qk-klep,.qk-doc{display:none!important}
  .qkf-grid{gap:30px}
  .qp-klep{display:block;position:absolute;z-index:12;left:50%;top:-16px;width:50px;height:51px;margin-left:-25px;
    transform-origin:bottom center;pointer-events:none;opacity:0;
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.28));animation:qpk 24s linear infinite}
  .qp-klep svg{width:100%;height:100%;display:block}
  .qp2 .qp-klep{animation-delay:6s}
  .qp3 .qp-klep{animation-delay:12s}
  .qp4 .qp-klep{animation-delay:18s}
}

@media(prefers-reduced-motion:reduce){.qkf *{animation:none!important}.qk-klep{left:13%}.qk-doc{display:none}.qp-klep{opacity:1!important}}

/* ── HUGE "This is how it works" focal band: full-bleed width + giant frame ── */
#klep-flows{padding-left:clamp(16px,2.4vw,40px);padding-right:clamp(16px,2.4vw,40px)}
#klep-flows .sf-wrap{max-width:min(1560px,97vw)}
#klep-flows .kf-eyebrow{margin-bottom:2px}
#klep-flows .kf-mega{font-size:clamp(42px,9vw,108px);line-height:.98;white-space:normal;margin-top:22px}
#klep-flows .kf-sub{font-size:clamp(16px,2.1vw,25px);max-width:32em;margin-top:24px}
/* Demo breaks out to the full viewport width (edge to edge) ... */
#klep-flows .qkf-root{margin-top:48px;width:100vw;margin-left:calc(50% - 50vw);display:flex;justify-content:center}
#klep-flows .qkf{width:min(1120px,92vw);padding:26px 26px 32px;border-radius:30px;box-shadow:16px 20px 0 rgba(14,14,12,.5)}
/* Desktop: 2x2 grid of big panels, scaled up as one unit. The single walking Klep
   only reads in a horizontal row, so retire it here and give EACH box its own Klep
   that drops in on its turn (1→2→3→4, staggered +6s) — Klep visibly hops to all
   four boxes. margin-bottom reserves the extra visual height transform can't reflow. */
@media(min-width:821px){
  #klep-flows .qkf-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  /* One interactive Klep (with the catch/kick/tailor/apply actions) that TRAVELS
     the 2x2 — hops box1→2→3→4 and performs each stage's action on its card, not a
     static per-panel figure. Retire the per-panel Klep + the flying résumé doc. */
  #klep-flows .qk-klep{display:block!important;will-change:left,top;animation:qk-travel22 24s var(--ease) infinite,qk-kvis 24s linear infinite}
  #klep-flows .qp-klep{display:none!important}
  /* the résumé-ingest opening beat: the doc flies up into Klep's hands at box 1
     (same flight as the original — only the x position moved to box 1's centre) */
  #klep-flows .qk-doc{left:25.7%}
  #klep-flows .qkf{width:min(1200px,80vw);transform:scale(1.2);transform-origin:top center;margin-bottom:180px}
}
/* Travel path for the 2x2 (measured box centres/tops): TL→TR→BL→BR, then reset. */
@keyframes qk-travel22{
  0%,23%{left:25.7%;top:64px}
  27%,48%{left:74.4%;top:64px}
  52%,75.5%{left:25.7%;top:408px}
  78%,98%{left:74.4%;top:408px}
  100%{left:25.7%;top:64px}
}

/* More detail per card: a faux browser address bar in the chrome (fills the wider
   panels + tells the mini-story of each step). CSS-only — doesn't touch the tuned
   animation layout. */
#klep-flows .qp-chrome{gap:5px}
#klep-flows .qp-chrome::after{content:"klepify.com";flex:1;min-width:0;margin-left:5px;font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:600;letter-spacing:.01em;color:#9b988c;background:#fff;border:1px solid rgba(14,14,12,.14);border-radius:5px;padding:3px 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}
#klep-flows .qp1 .qp-chrome::after{content:"⚲ klepify.com/match · Backend Eng — Ramp"}
#klep-flows .qp2 .qp-chrome::after{content:"⚲ klepify.com/ghost-check · is this real?"}
#klep-flows .qp3 .qp-chrome::after{content:"⚲ klepify.com/tailor · building your résumé for Ramp…"}
#klep-flows .qp4 .qp-chrome::after{content:"⚲ klepify.com/apply · one click"}

/* ===== Detailed card interiors — two-column "product screenshots" ===== */
.qp-screen .qd-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:1px}
.qp-screen .qd-hd b{font-size:11px;font-weight:700;color:#0E0E0C;line-height:1.1}
.qp-screen .qd-mt{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10px;color:#fff;background:#E9633A;border-radius:5px;padding:2px 6px;flex:none}
.qp-screen .qd-metaline{font-family:'JetBrains Mono',monospace;font-size:7px;color:#9b988c;margin-bottom:9px}
.qp-screen .qd-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qp-screen .qd-lbl{font-family:'JetBrains Mono',monospace;font-size:6.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9b988c;margin-bottom:5px}
.qp-screen .qd-li{display:flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:8px;color:#2c2b27;padding:3.5px 0;border-bottom:1px dashed rgba(14,14,12,.1);white-space:nowrap;overflow:hidden}
.qp-screen .qd-li.qd-last{border-bottom:0}
.qp-screen .qd-chk{color:#2f7a0c;font-weight:700;margin-left:auto;flex:none}
.qp-screen .qd-bar{height:5px;border-radius:99px;background:rgba(14,14,12,.1);overflow:hidden;margin-top:9px}
.qp-screen .qd-bar i{display:block;height:100%;background:#BFE82D;border-radius:99px}
.qp-screen .qd-foot{font-family:'JetBrains Mono',monospace;font-size:7.5px;color:#384e06;margin-top:8px;line-height:1.4}
.qp-screen .qd-foot b{color:#0E0E0C}
/* step 2 — verdict rows */
.qp-screen .qd-vrow{display:flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:8px;padding:4.5px 0;border-bottom:1px dashed rgba(14,14,12,.1)}
.qp-screen .qd-vrow .co{font-weight:700;color:#0E0E0C;flex:none}
.qp-screen .qd-vrow .dead{text-decoration:line-through;color:#8a877d;flex:none}
.qp-screen .qd-vrow .ev{font-size:6.5px;color:#8a877d;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}
.qp-screen .qd-pill{font-family:'JetBrains Mono',monospace;font-size:6.5px;font-weight:700;border-radius:99px;padding:1px 6px;flex:none}
.qp-screen .qd-pill.g{background:#ffd9cb;color:#8a2b0f;border:1px solid #FF6B47}
.qp-screen .qd-pill.r{background:#D4FF3D;color:#384e06;border:1px solid #0E0E0C}
/* step 3 — before/after docs */
.qp-screen .qd-doc{background:#fff;border:1px solid rgba(14,14,12,.18);border-radius:5px;padding:7px 8px;font-family:'JetBrains Mono',monospace;font-size:7px;line-height:1.55;color:#3a382f}
.qp-screen .qd-doc .dl{height:2.5px;background:rgba(14,14,12,.14);border-radius:2px;margin:4px 0}
.qp-screen .qd-old{color:#a23a18;text-decoration:line-through}
.qp-screen .qd-new{color:#0E0E0C;background:#D4FF3D;outline:1px solid #0E0E0C;border-radius:2px;padding:0 2px;font-weight:700}
/* step 4 — receipt */
.qp-screen .qd-rr{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:8px;color:#2c2b27;margin-bottom:5px}
.qp-screen .qd-rr b{color:#0E0E0C}
.qp-screen .qd-applyb{background:#0E0E0C;color:#F4EFE6;text-align:center;font-weight:700;font-size:9px;padding:7px;border-radius:6px;margin-top:9px;font-family:'Inter','Familjen Grotesk',sans-serif}
/* taller screens to hold the richer content (stage stays 264px — set below — so
   Klep's measured travel path is unchanged) */
#klep-flows .qp-screen{height:222px}
#klep-flows .qkf-head{margin-bottom:24px}
#klep-flows .qkf-kick{font-size:13px;letter-spacing:.16em}
#klep-flows .qkf-grid{gap:22px}
/* Slightly taller stage so the bigger panels breathe (bottom-anchored art + row-relative
   animations are unaffected by stage/screen height — only the frame grows). */
#klep-flows .qp-stage{height:264px}
#klep-flows .qp-bw{border-radius:13px}
#klep-flows .qp-cap{gap:14px;margin-top:2px}
#klep-flows .qp-num{width:38px;height:38px;font-size:20px}
#klep-flows .qp-cl b{font-size:18px;margin-bottom:5px}
#klep-flows .qp-cl p{font-size:14px;line-height:1.4}
@media(max-width:820px){ #klep-flows .qkf{padding:24px 20px 28px} #klep-flows .qkf-root{margin-top:34px} #klep-flows .sf-wrap{max-width:96vw} }

/* ═══ THE FILM — the detailed cards act out the story on the same 24s clock ═══
   Klep dwells: box1 0–23% · box2 27–48% · box3 52–73% · box4 77–98%.
   Rule: BASE STYLES = the completed state; keyframes rewind the early frames.
   (So prefers-reduced-motion, which kills animation, shows finished cards.) */

/* Spotlight — the card Klep is working runs bright, the others dim (desktop). */
@media(min-width:821px){
  #klep-flows .qp1{animation:qk-dim1 24s var(--ease) infinite}
  #klep-flows .qp2{animation:qk-dim2 24s var(--ease) infinite}
  #klep-flows .qp3{position:relative;z-index:6;transform-origin:0 100%;will-change:transform;animation:qk-dim3 24s var(--ease) infinite,qk-zoom3 24s var(--ease) infinite}
  #klep-flows .qp4{animation:qk-dim4 24s var(--ease) infinite}
}
@keyframes qk-dim1{0%,24%{opacity:1}27%,96%{opacity:.5}100%{opacity:1}}
@keyframes qk-dim2{0%,24%{opacity:.5}27%,49%{opacity:1}52%,100%{opacity:.5}}
@keyframes qk-dim3{0%,49%{opacity:.5}52%,78%{opacity:1}79.5%,100%{opacity:.5}}
@keyframes qk-dim4{0%,76%{opacity:.5}78%,98%{opacity:1}100%{opacity:.5}}

/* Card 1 (0–23%): Klep catches the résumé, then cross-checks — the posting's
   asks tick in first, then your résumé answers them, the bar fills, 94% pops. */
.qp1 .ql1{animation:qk-ql1 24s var(--ease) infinite}.qp1 .ql2{animation:qk-ql2 24s var(--ease) infinite}
.qp1 .ql3{animation:qk-ql3 24s var(--ease) infinite}.qp1 .ql4{animation:qk-ql4 24s var(--ease) infinite}
.qp1 .qr1{animation:qk-qr1 24s var(--ease) infinite}.qp1 .qr2{animation:qk-qr2 24s var(--ease) infinite}
.qp1 .qr3{animation:qk-qr3 24s var(--ease) infinite}.qp1 .qr4{animation:qk-qr4 24s var(--ease) infinite}
@keyframes qk-ql1{0%,9.5%{opacity:0;transform:translateX(-5px)}11%,99%{opacity:1;transform:none}100%{opacity:0}}
@keyframes qk-ql2{0%,11%{opacity:0;transform:translateX(-5px)}12.5%,99%{opacity:1;transform:none}100%{opacity:0}}
@keyframes qk-ql3{0%,12.5%{opacity:0;transform:translateX(-5px)}14%,99%{opacity:1;transform:none}100%{opacity:0}}
@keyframes qk-ql4{0%,14%{opacity:0;transform:translateX(-5px)}15.5%,99%{opacity:1;transform:none}100%{opacity:0}}
@keyframes qk-qr1{0%,15.5%{opacity:0;transform:translateX(5px)}17%,99%{opacity:1;transform:none}100%{opacity:0}}
@keyframes qk-qr2{0%,17%{opacity:0;transform:translateX(5px)}18.5%,99%{opacity:1;transform:none}100%{opacity:0}}
@keyframes qk-qr3{0%,18.5%{opacity:0;transform:translateX(5px)}20%,99%{opacity:1;transform:none}100%{opacity:0}}
@keyframes qk-qr4{0%,20%{opacity:0;transform:translateX(5px)}21.5%,99%{opacity:1;transform:none}100%{opacity:0}}
.qp1 .qd-bar i{transform-origin:left;animation:qk-qbar 24s var(--ease) infinite}
@keyframes qk-qbar{0%,19%{transform:scaleX(0)}23%,99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.qp1 .qd-mt{animation:qk-qmt 24s var(--spring) infinite}
@keyframes qk-qmt{0%,21%{opacity:0;transform:scale(.5)}23.5%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}
.qp1 .qd-foot{animation:qk-qf1 24s var(--ease) infinite}
@keyframes qk-qf1{0%,22.5%{opacity:0}24%,99%{opacity:1}100%{opacity:0}}

/* Klep's LIMBS act too: his right leg thrusts out on the kick (card 2), his arms
   reach up to catch the résumé (card 1) and shoot up celebrating (card 4).
   The body SVG's direct rects are: 1=left arm · 2=right arm · 3=left foot ·
   4=right foot · 5=body. transform-box:fill-box makes the origins local. */
.qk-klep .ksvg>rect:nth-of-type(1){transform-box:fill-box;transform-origin:top right;animation:qk-armL 24s var(--ease) infinite}
.qk-klep .ksvg>rect:nth-of-type(2){transform-box:fill-box;transform-origin:top left;animation:qk-armR 24s var(--ease) infinite}
.qk-klep .ksvg>rect:nth-of-type(4){transform-box:fill-box;transform-origin:top center;animation:qk-leg 24s var(--ease) infinite}
@keyframes qk-armL{0%,8%{transform:none}10%,12.5%{transform:translate(-3px,-9px) rotate(38deg)}15%,92%{transform:none}93.5%,96.5%{transform:translate(-4px,-11px) rotate(42deg)}98%,100%{transform:none}}
@keyframes qk-armR{0%,8%{transform:none}10%,12.5%{transform:translate(3px,-9px) rotate(-38deg)}15%,92%{transform:none}93.5%,96.5%{transform:translate(4px,-11px) rotate(-42deg)}98%,100%{transform:none}}
@keyframes qk-leg{0%,31.5%{transform:none}33.5%{transform:translate(7px,-5px) rotate(-20deg)}35%{transform:translate(16px,-11px) rotate(-46deg)}37%{transform:translate(9px,-5px) rotate(-22deg)}39%,100%{transform:none}}

/* Card 2 (27–48%): the exorcism. GHOST pill slams → name struck → Klep's kick
   PUNTS the row clean out of the card (impact star flashes) → the real rows
   slide up into the space → REAL ticks land → payoff line. */
.qp2 .gp1{animation:qk-gp1 24s var(--spring) infinite}.qp2 .gp2{animation:qk-gp2 24s var(--spring) infinite}
.qp2 .rp1{animation:qk-rp1 24s var(--spring) infinite}.qp2 .rp2{animation:qk-rp2 24s var(--spring) infinite}
@keyframes qk-gp1{0%,29.5%{opacity:0;transform:scale(.5)}31%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes qk-gp2{0%,33%{opacity:0;transform:scale(.5)}35%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes qk-rp1{0%,44%{opacity:0;transform:scale(.5)}45.5%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes qk-rp2{0%,45.5%{opacity:0;transform:scale(.5)}47%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}
.qp2 .qd-vrow .dead{text-decoration:none;position:relative;font-weight:700}
.qp2 .qd-vrow .dead::after{content:"";position:absolute;left:-1px;right:-1px;top:52%;height:1.4px;background:#c0392b;transform-origin:left;transform:scaleX(1)}
.qp2 .d1{animation:qk-gd1 24s var(--ease) infinite}.qp2 .d1::after{animation:qk-gs1 24s var(--ease) infinite}
.qp2 .d2{animation:qk-gd2 24s var(--ease) infinite}.qp2 .d2::after{animation:qk-gs2 24s var(--ease) infinite}
@keyframes qk-gd1{0%,31.5%{color:#0E0E0C}33%,99%{color:#8a877d}100%{color:#0E0E0C}}
@keyframes qk-gs1{0%,31.5%{transform:scaleX(0)}33%,99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes qk-gd2{0%,35%{color:#0E0E0C}36.5%,99%{color:#8a877d}100%{color:#0E0E0C}}
@keyframes qk-gs2{0%,35%{transform:scaleX(0)}36.5%,99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
/* the punts — rows fly out of the card (clipped by the browser window) */
.qp2 .gr1{animation:qk-punt1 24s var(--ease) infinite}
.qp2 .gr2{animation:qk-punt2 24s var(--ease) infinite}
@keyframes qk-punt1{0%,33.5%{transform:none;opacity:1}35%{transform:translateX(9%) rotate(2deg)}38%,99%{transform:translateX(155%) rotate(13deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes qk-punt2{0%,36.5%{transform:none;opacity:1}38%{transform:translateX(9%) rotate(2deg)}41%,99%{transform:translateX(155%) rotate(13deg);opacity:0}100%{transform:none;opacity:1}}
/* the real rows slide up into the vacated space */
.qp2 .rr1,.qp2 .rr2{animation:qk-rise 24s var(--ease) infinite}
@keyframes qk-rise{0%,40.5%{transform:none}43.5%,99%{transform:translateY(-42px)}100%{transform:none}}
/* impact star back in — flashes right as the first punt connects */
#klep-flows .qp2 .qp-imp{left:auto;right:26px;top:6px}
.qp2 .qd-foot{animation:qk-qf2 24s var(--ease) infinite}
@keyframes qk-qf2{0%,47%{opacity:0;transform:none}48.5%,99%{opacity:1;transform:translateY(-42px)}100%{opacity:0;transform:none}}

/* Card 3 (52–73%): the "reworded" doc slides in while Klep works, then the acid
   terms stamp in one at a time. */
.qp3 .qd-two>div:nth-child(2){animation:qk-aft 24s var(--ease) infinite}
@keyframes qk-aft{0%,55%{opacity:0;transform:translateY(6px)}57.5%,99%{opacity:1;transform:none}100%{opacity:0}}
.qp3 .qd-new{display:inline-block}
.qp3 .n1{animation:qk-n1 24s var(--spring) infinite}.qp3 .n2{animation:qk-n2 24s var(--spring) infinite}.qp3 .n3{animation:qk-n3 24s var(--spring) infinite}
@keyframes qk-n1{0%,59.5%{opacity:0;transform:scale(.7)}61.5%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes qk-n2{0%,63%{opacity:0;transform:scale(.7)}65%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes qk-n3{0%,66.5%{opacity:0;transform:scale(.7)}68.5%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}
.qp3 .qd-foot{animation:qk-qf3 24s var(--ease) infinite}
@keyframes qk-qf3{0%,73.9%{opacity:0}74.8%,99%{opacity:1}100%{opacity:0}}

/* ── Klep's VOICE — a speech bubble pops beside him at each stage's payoff ── */
.qk-say{position:absolute;z-index:11;background:#fff;border:2px solid var(--ink);border-radius:10px;border-bottom-left-radius:2px;padding:5px 10px;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;color:var(--ink);white-space:nowrap;box-shadow:3px 3px 0 rgba(0,0,0,.4);opacity:0;transform-origin:bottom left}
.qk-say b{background:var(--acid);padding:0 3px;border-radius:2px}
.qk-say::after{content:"";position:absolute;left:8px;bottom:-7px;border:6px solid transparent;border-top-color:var(--ink);border-left-width:3px;border-right-width:3px}
.qk-say1{left:calc(25.7% + 26px);top:40px;animation:qk-say1 24s var(--spring) infinite}
.qk-say2{left:calc(74.4% + 26px);top:40px;animation:qk-say2 24s var(--spring) infinite}
.qk-say3{left:54%;top:118px;z-index:12;animation:qk-say3 24s var(--spring) infinite}
.qk-say4{left:calc(74.4% + 26px);top:384px;animation:qk-say4 24s var(--spring) infinite}
@keyframes qk-say1{0%,16.5%{opacity:0;transform:scale(.6)}18%,23.5%{opacity:1;transform:scale(1)}25%,100%{opacity:0;transform:scale(.6)}}
@keyframes qk-say2{0%,41%{opacity:0;transform:scale(.6)}42.5%,48%{opacity:1;transform:scale(1)}49.5%,100%{opacity:0;transform:scale(.6)}}
@keyframes qk-say3{0%,74.3%{opacity:0;transform:scale(.6)}75.5%,78%{opacity:1;transform:scale(1)}79.5%,100%{opacity:0;transform:scale(.6)}}
@keyframes qk-say4{0%,92%{opacity:0;transform:scale(.6)}93.5%,98.5%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6)}}
@media(max-width:820px){.qk-say{display:none}}

/* ── Card 1 extra: an acid scanline sweeps the screen while Klep reads it ── */
.qp1 .qp-screen::after{content:"";position:absolute;left:6px;right:6px;top:4px;height:3px;border-radius:99px;background:linear-gradient(90deg,transparent,var(--acid) 20%,var(--acid) 80%,transparent);box-shadow:0 0 10px rgba(212,255,61,.8);opacity:0;pointer-events:none;animation:qk-scan 24s linear infinite}
@keyframes qk-scan{0%,9.5%{opacity:0;transform:translateY(0)}10.5%{opacity:1}15%{opacity:1;transform:translateY(196px)}16%,100%{opacity:0;transform:translateY(196px)}}

/* ── Card 2 extras: the card SHAKES on kick impact + ghost spirits float off ── */
#klep-flows .qp2 .qp-bw{animation:qk-bw2 24s steps(1) infinite,qk-shake2 24s linear infinite}
@keyframes qk-shake2{0%,34.8%{transform:none}35.1%{transform:translate(-3px,1px) rotate(-.5deg)}35.4%{transform:translate(3px,-1px) rotate(.4deg)}35.7%{transform:translate(-2px,0)}36%{transform:none}38.3%{transform:none}38.6%{transform:translate(-3px,1px) rotate(-.4deg)}38.9%{transform:translate(2px,-1px)}39.2%,100%{transform:none}}
.qp2 .qp-gh{position:absolute;z-index:6;font-size:13px;line-height:1;opacity:0;pointer-events:none}
.qp2 .gh1{left:38%;top:36px;animation:qk-gh1 24s var(--ease) infinite}
.qp2 .gh2{left:38%;top:58px;animation:qk-gh2 24s var(--ease) infinite}
@keyframes qk-gh1{0%,34.5%{opacity:0;transform:translate(0,0) scale(.5)}36%{opacity:1;transform:translate(14px,-12px) scale(1)}41%{opacity:.7;transform:translate(46px,-34px) rotate(14deg)}43%,100%{opacity:0;transform:translate(62px,-46px) rotate(20deg) scale(.8)}}
@keyframes qk-gh2{0%,38%{opacity:0;transform:translate(0,0) scale(.5)}39.5%{opacity:1;transform:translate(14px,-12px) scale(1)}44.5%{opacity:.7;transform:translate(46px,-34px) rotate(14deg)}46.5%,100%{opacity:0;transform:translate(62px,-46px) rotate(20deg) scale(.8)}}

/* ── Card 3 extra: the OLD words get struck live, right before each new term
   stamps in on the right — cause meets effect ── */
.qp3 .qd-old{text-decoration:none;position:relative;opacity:.55}
.qp3 .qd-old::after{content:"";position:absolute;left:-1px;right:-1px;top:52%;height:1.3px;background:#c0392b;transform-origin:left;transform:scaleX(1)}
.qp3 .o1{animation:qk-of1 24s var(--ease) infinite}.qp3 .o1::after{animation:qk-os1 24s var(--ease) infinite}
.qp3 .o2{animation:qk-of2 24s var(--ease) infinite}.qp3 .o2::after{animation:qk-os2 24s var(--ease) infinite}
.qp3 .o3{animation:qk-of3 24s var(--ease) infinite}.qp3 .o3::after{animation:qk-os3 24s var(--ease) infinite}
@keyframes qk-of1{0%,57.5%{opacity:1}59%,99%{opacity:.55}100%{opacity:1}}
@keyframes qk-os1{0%,57.5%{transform:scaleX(0)}59%,99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes qk-of2{0%,61%{opacity:1}62.5%,99%{opacity:.55}100%{opacity:1}}
@keyframes qk-os2{0%,61%{transform:scaleX(0)}62.5%,99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes qk-of3{0%,64.5%{opacity:1}66%,99%{opacity:.55}100%{opacity:1}}
@keyframes qk-os3{0%,64.5%{transform:scaleX(0)}66%,99%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* ── Card 4 extra: the tailored résumé LAUNCHES off to the employer — the doc
   that flew in at the start flies out at the end. Full circle. ── */
.qp4 .qp-sendoc{position:absolute;right:18px;bottom:36px;width:15px;height:19px;background:#fff;border:1.5px solid var(--ink);border-radius:2px;box-shadow:2px 2px 0 rgba(14,14,12,.35);background-image:repeating-linear-gradient(180deg,transparent 0 4px,rgba(14,14,12,.18) 4px 5.5px);opacity:0;z-index:6;pointer-events:none;animation:qk-sendoc 24s var(--ease) infinite}
@keyframes qk-sendoc{0%,92.5%{opacity:0;transform:translate(0,0) rotate(0)}93.5%{opacity:1;transform:translate(2px,-6px) rotate(-8deg)}97.5%{opacity:0;transform:translate(96px,-116px) rotate(22deg) scale(.85)}100%{opacity:0}}

/* Card 4 (77–98%): the résumé slides in, receipts tick, Klep dives onto Apply —
   press, "✓ Applied!", confetti. */
.qp4 .qd-two>div:nth-child(1){animation:qk-cv 24s var(--ease) infinite}
@keyframes qk-cv{0%,78%{opacity:0;transform:translateY(6px)}80%,99%{opacity:1;transform:none}100%{opacity:0}}
.qp4 .qd-rr.c1{animation:qk-c1 24s var(--ease) infinite}.qp4 .qd-rr.c2{animation:qk-c2 24s var(--ease) infinite}
.qp4 .qd-rr.c3{animation:qk-c3 24s var(--ease) infinite}.qp4 .qd-rr.c4{animation:qk-c4 24s var(--ease) infinite}
.qp4 .qd-rr.c5{animation:qk-c5 24s var(--ease) infinite}
@keyframes qk-c5{0%,86%{opacity:0}88%,99%{opacity:1}100%{opacity:0}}
.qp4 .qd-applyb{position:relative;animation:qk-qab 24s var(--ease) infinite}
@keyframes qk-qab{0%,80%{opacity:0;transform:translateY(6px);box-shadow:0 0 0 0 rgba(212,255,61,0)}83%,88%{opacity:1;transform:translateY(0)}89.5%{transform:scale(.94);box-shadow:0 0 0 8px rgba(212,255,61,.55)}91%,99%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(212,255,61,0)}100%{opacity:0}}
.qp4 .qd-sent{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--acid);color:#0E0E0C;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:9px;border-radius:6px;animation:qk-qsent 24s var(--spring) infinite}
@keyframes qk-qsent{0%,91.5%{opacity:0;transform:scale(.8)}93.5%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}
#klep-flows .qp4 .qp-conf{top:150px}

/* ═══ CARD 3 — "Klep builds you a new résumé" (the rewrite flow, live) ═══
   The card ZOOMS over the grid when Klep's tour arrives (52–73%), a worker Klep
   carries each posting keyword onto the résumé lines, the match climbs 54→94,
   the title flips to the new résumé, then the card returns to its slot.
   Base styles = completed state; keyframes rewind (reduced-motion safe). */

/* the zoom takeover (desktop only — .qp3's animation list is set in the
   min-width block above; travel Klep hides via qk-kvis while "inside") */
@keyframes qk-zoom3{0%,52%{transform:none}53.5%,76.2%{transform:scale(1.97)}78%,100%{transform:none}}
@keyframes qk-kvis{0%,51.5%{opacity:1}53%,76.5%{opacity:0}76.6%,100%{opacity:1}}

/* the job posting (source of truth) */
.qp3 .q3-post{position:absolute;left:10px;top:46px;width:34%;background:var(--cream);border:1.2px solid var(--ink);border-radius:7px;padding:7px 8px;z-index:1}
.qp3 .q3-pt{font-size:9px;font-weight:700;color:var(--ink);line-height:1.2}
.qp3 .q3-lbl{font-family:'JetBrains Mono',monospace;font-size:5.5px;font-weight:700;letter-spacing:.06em;color:#9b988c;margin:4px 0 3px}
.qp3 .q3-chips{display:flex;flex-wrap:wrap;gap:3px}
.qp3 .q3-chip{font-family:'JetBrains Mono',monospace;font-size:7px;font-weight:700;background:var(--acid);color:var(--ink);border:1px solid var(--ink);border-radius:3px;padding:1px 4px;opacity:.25}
.qp3 .q3c1{animation:qk-3c1 24s steps(1) infinite}
.qp3 .q3c2{animation:qk-3c2 24s steps(1) infinite}
.qp3 .q3c3{animation:qk-3c3 24s steps(1) infinite}
@keyframes qk-3c1{0%,55.8%{opacity:1}55.9%,99%{opacity:.25}100%{opacity:1}}
@keyframes qk-3c2{0%,62.9%{opacity:1}63%,99%{opacity:.25}100%{opacity:1}}
@keyframes qk-3c3{0%,69.8%{opacity:1}69.9%,99%{opacity:.25}100%{opacity:1}}

/* your résumé (the work surface) */
.qp3 .q3-doc{position:absolute;right:10px;top:42px;width:56%;background:#fff;border:1.2px solid var(--ink);border-radius:7px;padding:7px 9px;z-index:1;box-shadow:2px 2px 0 rgba(14,14,12,.25)}
.qp3 .q3-dt{position:relative;height:11px;border-bottom:1px solid rgba(14,14,12,.3);margin-bottom:4px}
.qp3 .q3-dt span{position:absolute;left:0;top:0;font-family:'JetBrains Mono',monospace;font-size:6.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.qp3 .q3-dt b{background:var(--acid);padding:0 2px;border-radius:2px;outline:1px solid var(--ink)}
.qp3 .q3t1{opacity:0;animation:qk-3t1 24s steps(1) infinite}
.qp3 .q3t2{animation:qk-3t2 24s steps(1) infinite}
@keyframes qk-3t1{0%,73.7%{opacity:1}73.8%,99%{opacity:0}100%{opacity:1}}
@keyframes qk-3t2{0%,73.7%{opacity:0}73.8%,99%{opacity:1}100%{opacity:0}}
.qp3 .q3-ln{display:flex;align-items:center;gap:3px;height:10px;margin:5px 0}
.qp3 .q3-bar{height:3px;background:rgba(14,14,12,.16);border-radius:2px;flex:1}
.qp3 .q3-tok{position:relative;font-family:'JetBrains Mono',monospace;font-size:6.5px;font-weight:700;white-space:nowrap}
.qp3 .q3-old{color:#a23a18;position:relative;opacity:.35}
.qp3 .q3-old::after{content:"";position:absolute;left:-1px;right:-1px;top:52%;height:1.1px;background:#c0392b;transform-origin:left;transform:scaleX(1)}
.qp3 .q3-new{position:absolute;left:0;top:-2px;background:var(--acid);color:var(--ink);outline:1px solid var(--ink);border-radius:2px;padding:0 3px;white-space:nowrap}
.qp3 .q3o1{animation:qk-3f1 24s steps(1) infinite}.qp3 .q3o1::after{animation:qk-3s1 24s var(--ease) infinite}
.qp3 .q3o2{animation:qk-3f2 24s steps(1) infinite}.qp3 .q3o2::after{animation:qk-3s2 24s var(--ease) infinite}
.qp3 .q3o3{animation:qk-3f3 24s steps(1) infinite}.qp3 .q3o3::after{animation:qk-3s3 24s var(--ease) infinite}
.qp3 .q3n1{animation:qk-3n1 24s var(--spring) infinite}
.qp3 .q3n2{animation:qk-3n2 24s var(--spring) infinite}
.qp3 .q3n3{animation:qk-3n3 24s var(--spring) infinite}
@keyframes qk-3f1{0%,59.5%{opacity:1}59.6%,99%{opacity:.35}100%{opacity:1}}
@keyframes qk-3s1{0%,59.2%{transform:scaleX(0)}60%,99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes qk-3n1{0%,59.5%{opacity:0;transform:scale(.5)}60.5%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes qk-3f2{0%,66.6%{opacity:1}66.7%,99%{opacity:.35}100%{opacity:1}}
@keyframes qk-3s2{0%,66.3%{transform:scaleX(0)}67.1%,99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes qk-3n2{0%,66.6%{opacity:0;transform:scale(.5)}67.6%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes qk-3f3{0%,73.3%{opacity:1}73.4%,99%{opacity:.35}100%{opacity:1}}
@keyframes qk-3s3{0%,73%{transform:scaleX(0)}73.8%,99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes qk-3n3{0%,73.3%{opacity:0;transform:scale(.5)}74.3%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}

/* match meter */
.qp3 .q3-m{display:flex;align-items:center;gap:4px;margin-top:6px}
.qp3 .q3-mlbl{font-family:'JetBrains Mono',monospace;font-size:5px;font-weight:700;letter-spacing:.08em;color:#9b988c}
.qp3 .q3-mbar{flex:1;height:4px;border-radius:99px;background:rgba(14,14,12,.12);overflow:hidden}
.qp3 .q3-mbar i{display:block;height:100%;background:var(--acid-deep);border-radius:99px;transform-origin:left;transform:scaleX(.94);animation:qk-3m 24s var(--ease) infinite}
@keyframes qk-3m{0%,59.4%{transform:scaleX(.54)}60.4%,66.4%{transform:scaleX(.68)}67.4%,73.1%{transform:scaleX(.81)}74.1%,99%{transform:scaleX(.94)}100%{transform:scaleX(.54)}}
.qp3 .q3-mnum{position:relative;width:22px;height:9px}
.qp3 .q3-mnum span{position:absolute;right:0;top:0;font-family:'JetBrains Mono',monospace;font-size:7px;font-weight:700;color:#384e06;opacity:0}
.qp3 .qm94{opacity:1}
.qp3 .qm54{animation:qk-m54 24s steps(1) infinite}
.qp3 .qm68{animation:qk-m68 24s steps(1) infinite}
.qp3 .qm81{animation:qk-m81 24s steps(1) infinite}
.qp3 .qm94{animation:qk-m94 24s steps(1) infinite}
@keyframes qk-m54{0%{opacity:1}60%{opacity:0}100%{opacity:1}}
@keyframes qk-m68{0%,60%{opacity:0}60.1%,66.9%{opacity:1}67%,100%{opacity:0}}
@keyframes qk-m81{0%,67%{opacity:0}67.1%,73.6%{opacity:1}73.7%,100%{opacity:0}}
@keyframes qk-m94{0%,73.7%{opacity:0}73.8%,99%{opacity:1}100%{opacity:0}}

/* the worker Klep — hops posting → line → posting, carrying each keyword */
.qp3 .q3-klep{position:absolute;left:38%;top:2px;width:34px;height:35px;z-index:4;opacity:0;will-change:left,top,transform;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));animation:qk-3k 24s var(--ease) infinite,qk-3kv 24s steps(1) infinite}
.qp3 .q3-klep svg{position:absolute;left:0;top:0;width:100%;height:100%}
.qp3 .q3ka{animation:qk-3pa 24s steps(1) infinite}
.qp3 .q3kb{opacity:0;animation:qk-3pb 24s steps(1) infinite}
@keyframes qk-3pa{0%,73.6%{opacity:1}73.7%,99%{opacity:0}100%{opacity:1}}
@keyframes qk-3pb{0%,73.6%{opacity:0}73.7%,99%{opacity:1}100%{opacity:0}}
@keyframes qk-3kv{0%,53.1%{opacity:0}53.2%,76.4%{opacity:1}76.5%,100%{opacity:0}}
@keyframes qk-3k{
  0%,53.1%{left:38%;top:2px;transform:none}
  54.6%{left:8%;top:48px;transform:none}
  55.4%{left:8%;top:48px;transform:none}
  55.8%{left:8%;top:40px;transform:scale(1.08);animation-timing-function:ease-out}
  57.6%{left:29%;top:16px;transform:rotate(4deg);animation-timing-function:ease-in}
  59.4%{left:52%;top:28px;transform:none}
  59.75%{left:52%;top:33px;transform:scale(1.08,.9)}
  60.2%{left:52%;top:29px;transform:none}
  61.9%{left:8%;top:48px;transform:none}
  62.5%{left:8%;top:48px;transform:none}
  62.9%{left:8%;top:40px;transform:scale(1.08);animation-timing-function:ease-out}
  64.7%{left:29%;top:34px;transform:rotate(4deg);animation-timing-function:ease-in}
  66.5%{left:52%;top:48px;transform:none}
  66.85%{left:52%;top:53px;transform:scale(1.08,.9)}
  67.3%{left:52%;top:49px;transform:none}
  68.9%{left:8%;top:48px;transform:none}
  69.4%{left:8%;top:48px;transform:none}
  69.8%{left:8%;top:40px;transform:scale(1.08);animation-timing-function:ease-out}
  71.5%{left:29%;top:52px;transform:rotate(4deg);animation-timing-function:ease-in}
  73.2%{left:52%;top:68px;transform:none}
  73.55%{left:52%;top:73px;transform:scale(1.08,.9)}
  74%{left:52%;top:69px;transform:none}
  74.5%{left:52%;top:62px;transform:none}
  74.9%{left:52%;top:69px;transform:none}
  75.7%{left:52%;top:62px;transform:none}
  76.1%,100%{left:52%;top:69px;transform:none}}

/* the carried keyword chips (ride the worker's trips) */
.qp3 .q3-carry{position:absolute;left:0;top:0;font-family:'JetBrains Mono',monospace;font-size:7px;font-weight:700;background:var(--acid);color:var(--ink);border:1px solid var(--ink);border-radius:3px;padding:1px 4px;z-index:5;opacity:0}
.qp3 .q3y1{animation:qk-3y1 24s var(--ease) infinite}
.qp3 .q3y2{animation:qk-3y2 24s var(--ease) infinite}
.qp3 .q3y3{animation:qk-3y3 24s var(--ease) infinite}
@keyframes qk-3y1{0%,55.7%{opacity:0;transform:translate(60px,62px)}56%{opacity:1;transform:translate(60px,62px);animation-timing-function:ease-out}57.6%{opacity:1;transform:translate(147px,42px) rotate(6deg);animation-timing-function:ease-in}59.5%{opacity:1;transform:translate(235px,68px)}59.9%,100%{opacity:0;transform:translate(235px,68px)}}
@keyframes qk-3y2{0%,62.9%{opacity:0;transform:translate(60px,62px)}63.2%{opacity:1;transform:translate(60px,62px);animation-timing-function:ease-out}64.7%{opacity:1;transform:translate(147px,60px) rotate(6deg);animation-timing-function:ease-in}66.6%{opacity:1;transform:translate(235px,88px)}67%,100%{opacity:0;transform:translate(235px,88px)}}
@keyframes qk-3y3{0%,69.8%{opacity:0;transform:translate(60px,62px)}70.1%{opacity:1;transform:translate(60px,62px);animation-timing-function:ease-out}71.5%{opacity:1;transform:translate(147px,78px) rotate(6deg);animation-timing-function:ease-in}73.3%{opacity:1;transform:translate(235px,108px)}73.7%,100%{opacity:0;transform:translate(235px,108px)}}

/* header badge pops when the résumé is done */
.qp3 .q3-badge{animation:qk-3bg 24s var(--spring) infinite}
@keyframes qk-3bg{0%,73.8%{opacity:0;transform:scale(.6)}74.6%,99%{opacity:1;transform:scale(1)}100%{opacity:0}}