/* ==================================================================
   Joboxy — How it works (agent walkthrough)
   Every rule is scoped to .jbx-hiw so the shared nav/footer and all
   other pages keep their styling from app.css. Design tokens are
   namespaced --hw-* so they never shadow the global tokens.
   ================================================================== */

.jbx-hiw{
  --hw-brand:#4F46E5; --hw-brand-d:#4338CA; --hw-brand-t:#EEF0FE; --hw-brand-ink:#1E1B4B;
  --hw-ink:#0F172A; --hw-body:#475569; --hw-muted:#8A97AC;
  --hw-line:#E7EAF0; --hw-line2:#F1F4F8;
  --hw-bg:#FFFFFF; --hw-soft:#F7F9FC;
  --hw-green:#12A06E; --hw-rose:#E4483D;

  /* stage (dark) */
  --hw-st-bg:#0E1330; --hw-st-2:#171D46; --hw-st-3:#28306B;
  --hw-st-txt:#EDEEF6; --hw-st-dim:#98A0CE;

  --hw-s1:4px;--hw-s2:8px;--hw-s3:12px;--hw-s4:16px;--hw-s5:24px;
  --hw-s6:32px;--hw-s7:48px;--hw-s8:64px;--hw-s9:96px;
  --hw-r:14px; --hw-r-lg:20px; --hw-r-xl:28px;
  --hw-sh2:0 4px 12px rgba(15,23,42,.06),0 12px 32px -12px rgba(15,23,42,.14);
  --hw-sh3:0 8px 24px rgba(15,23,42,.08),0 32px 64px -24px rgba(15,23,42,.22);
  --hw-font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --hw-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --hw-pad:clamp(20px,5vw,48px); --hw-maxw:1200px;

  display:block;
  font-family:var(--hw-font);
  background:var(--hw-bg);
  color:var(--hw-body);
  font-size:17px;
  line-height:1.68;
}

.jbx-hiw a{color:inherit;text-decoration:none}
.jbx-hiw button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.jbx-hiw a,.jbx-hiw button{-webkit-tap-highlight-color:rgba(79,70,229,.12)}
.jbx-hiw :focus-visible{outline:3px solid var(--hw-brand);outline-offset:2px;border-radius:8px}
.jbx-hiw h1,.jbx-hiw h2,.jbx-hiw h3,.jbx-hiw h4{margin:0;color:var(--hw-ink);font-weight:700;letter-spacing:-.028em;line-height:1.15;font-family:var(--hw-font)}
.jbx-hiw h1{font-size:clamp(2.1rem,4.3vw,3.2rem);letter-spacing:-.036em;line-height:1.1}
.jbx-hiw h2{font-size:clamp(1.65rem,3vw,2.3rem);letter-spacing:-.032em}
.jbx-hiw h3{font-size:1.14rem;letter-spacing:-.02em;line-height:1.35}
.jbx-hiw p{margin:0}
.jbx-hiw strong{color:var(--hw-ink);font-weight:700}
.jbx-hiw .grad{background:linear-gradient(100deg,var(--hw-brand),#7C6BFF 60%,#9B7BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.jbx-hiw .wrap{max-width:var(--hw-maxw);margin:0 auto;padding-inline:var(--hw-pad)}
.jbx-hiw .sec{padding:clamp(52px,6.5vw,92px) 0}
.jbx-hiw .sec-soft{background:var(--hw-soft)}
.jbx-hiw .center{text-align:center}
.jbx-hiw .lead{font-size:clamp(1.02rem,1.25vw,1.14rem);line-height:1.68}
.jbx-hiw .sec-head{max-width:46rem;margin-inline:auto}
.jbx-hiw .ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.jbx-hiw .ic-16{width:16px;height:16px}
.jbx-hiw .ic-24{width:24px;height:24px}
.jbx-hiw .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.jbx-hiw [id]{scroll-margin-top:76px}

.jbx-hiw .hw-eyebrow{display:inline-flex;align-items:center;gap:var(--hw-s2);padding:8px 15px 8px 12px;border-radius:100px;background:var(--hw-brand-t);color:var(--hw-brand-d);font-size:.82rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin:0}
.jbx-hiw .hw-eyebrow .ic{width:15px;height:15px}

/* ---------------- buttons ---------------- */
.jbx-hiw .hw-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--hw-s2);min-height:52px;padding:15px 28px;border-radius:12px;font-weight:700;font-size:1rem;border:2px solid transparent;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s,color .16s;white-space:nowrap;font-family:var(--hw-font);cursor:pointer;text-decoration:none}
.jbx-hiw .hw-btn:hover{transform:translateY(-1.5px)}
.jbx-hiw .hw-btn-primary{background:var(--hw-brand);color:#fff;box-shadow:0 4px 14px -4px rgba(79,70,229,.5)}
.jbx-hiw .hw-btn-primary:hover{background:var(--hw-brand-d);color:#fff}
.jbx-hiw .hw-btn-line{border-color:var(--hw-line);background:#fff;color:var(--hw-ink)}
.jbx-hiw .hw-btn-line:hover{border-color:var(--hw-ink)}
.jbx-hiw .hw-btn-white{background:#fff;color:var(--hw-brand-d)}
.jbx-hiw .hw-btn-white:hover{color:var(--hw-brand-d)}
.jbx-hiw .hw-btn-ow{border-color:rgba(255,255,255,.4);color:#fff}
.jbx-hiw .hw-btn-ow:hover{background:rgba(255,255,255,.14);color:#fff}

/* ---------------- hero ---------------- */
.jbx-hiw .hw-hero{position:relative;overflow:hidden;padding:calc(62px + clamp(28px,4vw,54px)) 0 clamp(28px,3.5vw,44px);text-align:center}
.jbx-hiw .hw-hero::before{content:"";position:absolute;left:50%;top:-320px;transform:translateX(-50%);width:1000px;height:640px;border-radius:50%;background:radial-gradient(closest-side,rgba(79,70,229,.10),transparent);pointer-events:none}
.jbx-hiw .hw-hero .in{position:relative;z-index:2;max-width:44rem;margin:0 auto}
.jbx-hiw .hw-hero h1{margin-top:var(--hw-s5)}
.jbx-hiw .hw-hero .lead{margin-top:var(--hw-s4)}

/* ---------------- the stage (animated player) ---------------- */
.jbx-hiw .player-sec{padding-bottom:clamp(40px,5vw,72px)}
.jbx-hiw .player{max-width:1040px;margin:0 auto;background:var(--hw-st-bg);border-radius:var(--hw-r-xl);overflow:hidden;box-shadow:0 40px 90px -40px rgba(14,19,48,.75);border:1px solid var(--hw-st-3)}
.jbx-hiw .pbar{display:flex;align-items:center;gap:var(--hw-s3);padding:14px 20px;border-bottom:1px solid var(--hw-st-3);background:rgba(255,255,255,.03)}
.jbx-hiw .pbar .dot3{display:flex;gap:6px}
.jbx-hiw .pbar .dot3 i{width:10px;height:10px;border-radius:50%;background:var(--hw-st-3);display:block}
.jbx-hiw .pbar .ttl{font-family:var(--hw-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hw-st-dim)}
.jbx-hiw .pbar .live{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--hw-mono);font-size:.74rem;color:#5FE0A8}
.jbx-hiw .pbar .live i{width:8px;height:8px;border-radius:50%;background:#5FE0A8;animation:hwBlip 1.8s ease-in-out infinite}
@keyframes hwBlip{0%,100%{opacity:1}50%{opacity:.3}}

.jbx-hiw .tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid var(--hw-st-3)}
.jbx-hiw .tab{position:relative;padding:16px 14px;text-align:left;color:var(--hw-st-dim);transition:background .2s,color .2s;min-height:64px;font-family:var(--hw-font)}
.jbx-hiw .tab:hover{background:rgba(255,255,255,.04);color:var(--hw-st-txt)}
.jbx-hiw .tab[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.05)}
.jbx-hiw .tab .n{font-family:var(--hw-mono);font-size:.7rem;letter-spacing:.12em;display:block;margin-bottom:3px;opacity:.75}
.jbx-hiw .tab .t{font-size:.94rem;font-weight:700;letter-spacing:-.015em;line-height:1.25;display:block}
.jbx-hiw .tab .fill{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--hw-brand),#8B7BF0);border-radius:0 3px 3px 0}
.jbx-hiw .tab[aria-selected="true"] .fill{width:var(--p,0%)}

.jbx-hiw .screen{position:relative;min-height:430px;padding:clamp(22px,3vw,34px);color:var(--hw-st-txt)}
.jbx-hiw .slide{display:none}
.jbx-hiw .slide.on{display:block;animation:hwFadein .45s ease both}
@keyframes hwFadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.jbx-hiw .slide-h{display:flex;align-items:baseline;gap:var(--hw-s3);margin-bottom:var(--hw-s5);flex-wrap:wrap}
.jbx-hiw .slide-h h3{color:#fff;font-size:1.22rem}
.jbx-hiw .slide-h .sub{font-family:var(--hw-mono);font-size:.76rem;color:var(--hw-st-dim);letter-spacing:.06em}

/* stage 1 — crawling */
.jbx-hiw .crawl{display:grid;grid-template-columns:1fr 240px;gap:var(--hw-s5);align-items:start}
.jbx-hiw .nodes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.jbx-hiw .node{background:var(--hw-st-2);border:1px solid var(--hw-st-3);border-radius:12px;padding:12px 10px;text-align:center;position:relative;overflow:hidden}
.jbx-hiw .node .lbl{display:block;font-size:.78rem;color:var(--hw-st-dim);font-weight:600}
.jbx-hiw .node .num{display:block;font-family:var(--hw-mono);font-size:.94rem;font-weight:600;color:#fff;margin-top:4px}
.jbx-hiw .node.hit{border-color:var(--hw-brand);background:rgba(79,70,229,.18)}
.jbx-hiw .node.hit::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(139,123,240,.35),transparent);animation:hwSweep .7s ease}
@keyframes hwSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.jbx-hiw .term{background:#0A0E27;border:1px solid var(--hw-st-3);border-radius:12px;padding:14px;font-family:var(--hw-mono);font-size:.72rem;line-height:1.85;color:#7FE8B8;height:206px;overflow:hidden}
.jbx-hiw .term div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jbx-hiw .term .u{color:var(--hw-st-dim)}
.jbx-hiw .term .f{color:#8B7BF0}
.jbx-hiw .counter{margin-top:var(--hw-s4);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.jbx-hiw .counter b{font-family:var(--hw-mono);font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:600;color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.jbx-hiw .counter span{font-size:.9rem;color:var(--hw-st-dim)}

/* stage 2 — reading */
.jbx-hiw .read{display:grid;grid-template-columns:1fr 1fr;gap:var(--hw-s5)}
.jbx-hiw .doc{background:var(--hw-st-2);border:1px solid var(--hw-st-3);border-radius:14px;padding:18px;position:relative;overflow:hidden;height:280px}
.jbx-hiw .doc .dt{font-size:.95rem;font-weight:700;color:#fff;margin-bottom:12px}
.jbx-hiw .doc .dt .em{color:var(--hw-st-dim);font-weight:500;font-style:normal}
.jbx-hiw .doc .ln{height:9px;border-radius:99px;background:rgba(255,255,255,.10);margin-bottom:9px}
.jbx-hiw .doc .ln.s{width:62%}
.jbx-hiw .doc .ln.m{width:88%}
.jbx-hiw .doc .ln.l{width:100%}
.jbx-hiw .doc .ln.hl{background:linear-gradient(90deg,rgba(255,154,51,.55),rgba(255,154,51,.15));box-shadow:0 0 0 1px rgba(255,154,51,.35)}
.jbx-hiw .scanline{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#8B7BF0,transparent);box-shadow:0 0 14px 2px rgba(139,123,240,.6);animation:hwScan 2.6s linear infinite}
@keyframes hwScan{0%{top:12%}100%{top:92%}}
.jbx-hiw .pulls{display:grid;gap:9px;align-content:start}
.jbx-hiw .pull{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--hw-st-2);border:1px solid var(--hw-st-3);border-radius:11px;padding:12px 14px;opacity:0;transform:translateX(14px);animation:hwPop .4s ease forwards}
@keyframes hwPop{to{opacity:1;transform:none}}
.jbx-hiw .pull .k{font-family:var(--hw-mono);font-size:.7rem;color:var(--hw-st-dim);letter-spacing:.06em;text-transform:uppercase}
.jbx-hiw .pull .v{font-size:.92rem;font-weight:600;color:#fff}
.jbx-hiw .pull .tick{color:#5FE0A8;display:inline-flex}

/* stage 3 — matching */
.jbx-hiw .match{display:grid;grid-template-columns:1fr 1fr;gap:var(--hw-s5)}
.jbx-hiw .cvcard{background:var(--hw-st-2);border:1px solid var(--hw-st-3);border-radius:14px;padding:18px}
.jbx-hiw .cvcard .who{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--hw-st-3);margin-bottom:14px}
.jbx-hiw .cvcard .who.bare{border:0;padding:0;margin:0}
.jbx-hiw .cvcard .av{width:42px;height:42px;border-radius:12px;background:var(--hw-brand);display:grid;place-items:center;font-weight:800;color:#fff;font-size:.9rem;flex:none}
.jbx-hiw .cvcard .av.alt{background:var(--hw-st-3)}
.jbx-hiw .cvcard .nm{display:block;font-weight:700;color:#fff;font-size:.98rem}
.jbx-hiw .cvcard .rl{display:block;font-size:.8rem;color:var(--hw-st-dim)}
.jbx-hiw .chk{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:9px 0;font-size:.9rem;color:var(--hw-st-dim);border-bottom:1px solid rgba(40,48,107,.5)}
.jbx-hiw .chk:last-child{border-bottom:0}
.jbx-hiw .chk .i{width:22px;height:22px;border-radius:7px;background:var(--hw-st-3);display:grid;place-items:center;font-family:var(--hw-mono);font-size:.68rem;font-weight:600;color:var(--hw-st-dim);transition:background .3s,color .3s}
.jbx-hiw .chk.done .i{background:rgba(18,160,110,.22);color:#5FE0A8}
.jbx-hiw .chk.done{color:#fff}
.jbx-hiw .chk .st{font-family:var(--hw-mono);font-size:.72rem;color:var(--hw-st-dim)}
.jbx-hiw .chk.done .st{color:#5FE0A8}
.jbx-hiw .verdict{margin-top:var(--hw-s4);background:rgba(18,160,110,.12);border:1px solid rgba(18,160,110,.32);border-radius:12px;padding:16px;opacity:0;transition:opacity .45s}
.jbx-hiw .verdict.on{opacity:1}
.jbx-hiw .verdict b{color:#5FE0A8;display:block;font-size:.95rem;margin-bottom:4px}
.jbx-hiw .verdict span{font-size:.88rem;color:var(--hw-st-dim);line-height:1.5}

/* stage 4 — cleaning + feed */
.jbx-hiw .clean{display:grid;grid-template-columns:1fr 1fr;gap:var(--hw-s5)}
.jbx-hiw .pile{display:grid;gap:9px;align-content:start}
.jbx-hiw .jcard{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:var(--hw-st-2);border:1px solid var(--hw-st-3);border-radius:11px;padding:13px 15px;transition:opacity .5s,transform .5s,border-color .3s,background .3s}
.jbx-hiw .jcard .ti{display:block;font-size:.92rem;font-weight:600;color:#fff;line-height:1.3}
.jbx-hiw .jcard .mt{display:block;font-size:.76rem;color:var(--hw-st-dim);margin-top:2px}
.jbx-hiw .jcard .flag{font-family:var(--hw-mono);font-size:.7rem;font-weight:600;letter-spacing:.05em;white-space:nowrap}
.jbx-hiw .jcard.killed{border-color:rgba(228,72,61,.4);background:rgba(228,72,61,.10);opacity:.35;transform:translateX(-10px)}
.jbx-hiw .jcard.killed .flag{color:#FF8B82}
.jbx-hiw .jcard.kept{border-color:rgba(18,160,110,.4);background:rgba(18,160,110,.10)}
.jbx-hiw .jcard.kept .flag{color:#5FE0A8}
.jbx-hiw .feedbox{background:var(--hw-st-2);border:1px solid var(--hw-st-3);border-radius:14px;padding:16px}
.jbx-hiw .feedbox .fh{display:flex;align-items:center;gap:9px;font-family:var(--hw-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hw-st-dim);padding-bottom:12px;border-bottom:1px solid var(--hw-st-3);margin-bottom:12px}
.jbx-hiw .frow{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(40,48,107,.5);opacity:0;transform:translateY(8px);animation:hwPop2 .45s ease forwards}
.jbx-hiw .frow:last-child{border-bottom:0}
@keyframes hwPop2{to{opacity:1;transform:none}}
.jbx-hiw .frow .rk{width:24px;height:24px;border-radius:8px;background:var(--hw-brand);display:grid;place-items:center;font-family:var(--hw-mono);font-size:.7rem;font-weight:600;color:#fff}
.jbx-hiw .frow .ti{display:block;font-size:.92rem;font-weight:600;color:#fff}
.jbx-hiw .frow .cm{display:block;font-size:.76rem;color:var(--hw-st-dim)}

/* role gate */
.jbx-hiw .gate{position:absolute;inset:0;z-index:5;background:linear-gradient(180deg,rgba(14,19,48,.96),rgba(14,19,48,.99));display:grid;place-items:center;padding:clamp(22px,4vw,44px);text-align:center}
.jbx-hiw .gate.off{display:none}
.jbx-hiw .gate .gin{max-width:520px;width:100%}
.jbx-hiw .gate h2{color:#fff;font-size:clamp(1.2rem,2.4vw,1.55rem);margin-bottom:var(--hw-s3)}
.jbx-hiw .gate p{color:var(--hw-st-dim);font-size:.98rem;margin-bottom:var(--hw-s5)}
.jbx-hiw .gfield{display:grid;grid-template-columns:1fr auto;gap:10px}
.jbx-hiw .gfield input{width:100%;min-height:54px;padding:14px 18px;border-radius:12px;border:2px solid var(--hw-st-3);background:var(--hw-st-2);color:#fff;font:inherit;font-family:var(--hw-font);font-size:1rem;outline:0;transition:border-color .18s}
.jbx-hiw .gfield input::placeholder{color:#6E76AE}
.jbx-hiw .gfield input:focus{border-color:var(--hw-brand)}
.jbx-hiw .gfield button{min-height:54px;padding:14px 24px;border-radius:12px;background:var(--hw-brand);color:#fff;font-weight:700;font-size:1rem;font-family:var(--hw-font);transition:background .18s,transform .16s}
.jbx-hiw .gfield button:hover{background:#5B52EA;transform:translateY(-1px)}
.jbx-hiw .gerr{display:none;margin-top:10px;font-size:.88rem;color:#FF8B82;font-weight:600}
.jbx-hiw .gerr.on{display:block}
.jbx-hiw .gsug{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:var(--hw-s5)}
.jbx-hiw .gsug button{min-height:44px;padding:11px 16px;border-radius:100px;border:1px solid var(--hw-st-3);color:var(--hw-st-dim);font-size:.88rem;font-weight:600;font-family:var(--hw-font);transition:border-color .18s,color .18s,background .18s}
.jbx-hiw .gsug button:hover{border-color:var(--hw-brand);color:#fff;background:rgba(79,70,229,.18)}
.jbx-hiw .gsug .lb{display:block;width:100%;font-family:var(--hw-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#6E76AE;margin-bottom:4px}
.jbx-hiw .role-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:100px;background:rgba(79,70,229,.22);border:1px solid #3E4790;color:#C9CCF7;font-size:.8rem;font-weight:700}

/* controls */
.jbx-hiw .ctrl{display:flex;align-items:center;gap:var(--hw-s3);padding:14px 20px;border-top:1px solid var(--hw-st-3);background:rgba(255,255,255,.03);flex-wrap:wrap}
.jbx-hiw .ctrl button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 18px;border-radius:10px;border:1px solid var(--hw-st-3);color:var(--hw-st-txt);font-size:.88rem;font-weight:600;font-family:var(--hw-font);transition:background .18s,border-color .18s}
.jbx-hiw .ctrl button:hover{background:rgba(255,255,255,.07);border-color:#3E4790}
.jbx-hiw .ctrl .note{margin-left:auto;font-family:var(--hw-mono);font-size:.72rem;color:var(--hw-st-dim)}
.jbx-hiw .stage-note{max-width:1040px;margin:var(--hw-s4) auto 0;text-align:center;font-size:.86rem;color:var(--hw-muted)}

/* ---------------- reveal on scroll ---------------- */
.jbx-hiw .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.jbx-hiw .rv.in{opacity:1;transform:none}

/* ---------------- explainer strips ---------------- */
.jbx-hiw .strip{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.jbx-hiw .strip+.strip{margin-top:clamp(44px,6vw,84px)}
.jbx-hiw .strip.flip .txt{order:2}
.jbx-hiw .strip .txt .k{font-family:var(--hw-mono);font-size:.76rem;letter-spacing:.14em;color:var(--hw-brand);text-transform:uppercase}
.jbx-hiw .strip .txt h3{font-size:clamp(1.4rem,2.4vw,1.85rem);margin:var(--hw-s3) 0 var(--hw-s4);letter-spacing:-.028em;line-height:1.2}
.jbx-hiw .strip .txt p{font-size:1.04rem}
.jbx-hiw .viz{background:#fff;border:1px solid var(--hw-line);border-radius:var(--hw-r-xl);box-shadow:var(--hw-sh2);padding:clamp(20px,2.6vw,28px);overflow:hidden}
.jbx-hiw .viz .cap{margin-top:var(--hw-s4);font-size:.92rem;color:var(--hw-muted)}

.jbx-hiw .morph{text-align:center;padding:var(--hw-s5) 0}
.jbx-hiw .morph .w{display:inline-block;font-size:clamp(1.05rem,2vw,1.3rem);font-weight:700;color:var(--hw-ink);padding:12px 20px;border-radius:12px;background:var(--hw-soft);border:1px solid var(--hw-line)}
.jbx-hiw .morph .eqs{display:block;margin:var(--hw-s4) 0;font-family:var(--hw-mono);font-size:.8rem;color:var(--hw-green);letter-spacing:.1em}
.jbx-hiw .morph .w.b{background:var(--hw-brand-t);border-color:#CBD0FB;color:var(--hw-brand-d)}

.jbx-hiw .race{display:grid;gap:var(--hw-s5)}
.jbx-hiw .lane .lh{display:flex;justify-content:space-between;gap:var(--hw-s3);font-size:.92rem;font-weight:700;color:var(--hw-ink);margin-bottom:8px}
.jbx-hiw .lane .lh span+span{color:var(--hw-muted);font-weight:600;font-family:var(--hw-mono);font-size:.84rem;text-align:right}
.jbx-hiw .lane .tr{height:14px;border-radius:99px;background:var(--hw-line2);overflow:hidden}
.jbx-hiw .lane .tr i{display:block;height:100%;width:0;border-radius:99px;transition:width 1.6s cubic-bezier(.2,.8,.3,1)}
.jbx-hiw .lane.you .tr i{background:var(--hw-muted)}
.jbx-hiw .lane.ai .tr i{background:linear-gradient(90deg,var(--hw-brand),#8B7BF0)}

/* ---------------- stats ---------------- */
.jbx-hiw .stats{background:var(--hw-brand-ink);border-radius:var(--hw-r-xl);padding:clamp(30px,4vw,48px);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--hw-s5)}
.jbx-hiw .stats .s b{display:block;font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:800;color:#fff;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.jbx-hiw .stats .s span{display:block;margin-top:var(--hw-s2);font-size:.92rem;color:#A5A8D4;line-height:1.45}

/* ---------------- cta ---------------- */
.jbx-hiw .cta{position:relative;overflow:hidden;background:var(--hw-brand);border-radius:var(--hw-r-xl);padding:clamp(40px,5.5vw,76px) clamp(24px,4vw,56px);text-align:center;color:#fff}
.jbx-hiw .cta::before{content:"";position:absolute;left:50%;top:-50%;transform:translateX(-50%);width:900px;height:900px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.17),transparent);pointer-events:none}
.jbx-hiw .cta .in{position:relative;z-index:2;max-width:40rem;margin:0 auto}
.jbx-hiw .cta h2{color:#fff}
.jbx-hiw .cta p{margin-top:var(--hw-s4);color:rgba(255,255,255,.88);font-size:1.06rem}
.jbx-hiw .cta .row{display:flex;gap:var(--hw-s3);justify-content:center;margin-top:var(--hw-s5);flex-wrap:wrap}

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  .jbx-hiw .crawl,.jbx-hiw .read,.jbx-hiw .match,.jbx-hiw .clean{grid-template-columns:1fr}
  .jbx-hiw .term{height:150px}
  .jbx-hiw .doc{height:220px}
  .jbx-hiw .strip,.jbx-hiw .strip.flip .txt{grid-template-columns:1fr;order:0}
  .jbx-hiw .stats{grid-template-columns:1fr 1fr}
  .jbx-hiw .screen{min-height:0}
}
@media (max-width:680px){
  .jbx-hiw{font-size:16.5px;--hw-s6:26px;--hw-s7:34px;--hw-s8:42px;--hw-s9:54px;--hw-pad:18px}
  .jbx-hiw .sec{padding:46px 0}
  .jbx-hiw .hw-hero{padding-top:calc(62px + 22px)}
  .jbx-hiw .tabs{grid-template-columns:1fr 1fr}
  .jbx-hiw .tab{min-height:58px;padding:12px 12px}
  .jbx-hiw .tab .t{font-size:.86rem}
  .jbx-hiw .nodes{grid-template-columns:1fr 1fr}
  .jbx-hiw .stats{grid-template-columns:1fr}
  .jbx-hiw .cta .row .hw-btn{width:100%}
  .jbx-hiw .ctrl{flex-wrap:wrap}
  .jbx-hiw .ctrl .note{margin-left:0;width:100%}
  .jbx-hiw .gfield{grid-template-columns:1fr}
  /* no iOS zoom-on-focus */
  .jbx-hiw input{font-size:16px!important}
}
@media (max-width:360px){
  .jbx-hiw{--hw-pad:15px}
}
@media (prefers-reduced-motion:reduce){
  .jbx-hiw *{animation:none!important;transition-duration:.01ms!important}
  .jbx-hiw .rv{opacity:1;transform:none}
  .jbx-hiw .slide{display:block;border-bottom:1px solid var(--hw-st-3);padding-bottom:var(--hw-s5);margin-bottom:var(--hw-s5)}
  .jbx-hiw .slide:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
  .jbx-hiw .scanline{display:none}
  .jbx-hiw .pull,.jbx-hiw .frow{opacity:1;transform:none}
}