/* LMAI-1603. The approved canvas (Employer Page v3: Main, LockDesktop, LockPhone) as one
   stylesheet. One layout for desktop and phone; the breakpoint is the canvas's 820px. */
:root{--bg:#0b0d1a;--panel:#161a31;--panel2:#0f1226;--line:#252a48;--line2:#3a4068;--fg:#e8eaf6;--soft:#b9bdd8;--soft2:#c9cde3;--muted:#9296c2;--dim:#7d84b0;--accent:#e68e4a;--accent2:#ff7a45;--ok:#38d39f;--violet:#9d8cf0;--err:#ff9f9f;--errline:#ff8b8b;--mono:'JetBrains Mono',ui-monospace,monospace;--display:Poppins,Inter,system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.55}
a{color:var(--accent)}a:hover{color:var(--accent2)}
[hidden]{display:none!important}
.mono{font-family:var(--mono)}
.accent{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(56,211,159,.35)}70%{box-shadow:0 0 0 10px rgba(56,211,159,0)}100%{box-shadow:0 0 0 0 rgba(56,211,159,0)}}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes driftA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.08)}100%{transform:translate(0,0) scale(1)}}
@keyframes driftB{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,-6vh) scale(1.1)}100%{transform:translate(0,0) scale(1)}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes botjump{0%{transform:none}30%{transform:translateY(-10px) rotate(-14deg) scale(1.08)}60%{transform:translateY(-3px) rotate(10deg)}100%{transform:none}}
@keyframes spark{from{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.3);opacity:0}}
@keyframes botsay{0%{opacity:0;transform:translateY(4px)}12%,80%{opacity:1;transform:none}100%{opacity:0}}
@keyframes botblink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}

.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orbA{position:absolute;width:62vw;height:62vw;left:-18vw;top:-22vw;border-radius:50%;background:radial-gradient(circle,rgba(230,142,74,.16),rgba(230,142,74,0) 62%);filter:blur(20px);animation:driftA 38s ease-in-out infinite}
.orbB{position:absolute;width:52vw;height:52vw;right:-16vw;top:32vh;border-radius:50%;background:radial-gradient(circle,rgba(120,110,230,.14),rgba(120,110,230,0) 62%);filter:blur(24px);animation:driftB 46s ease-in-out infinite}
.orbC{position:absolute;width:48vw;height:48vw;left:20vw;bottom:-28vw;border-radius:50%;background:radial-gradient(circle,rgba(56,211,159,.08),rgba(56,211,159,0) 62%);filter:blur(24px);animation:driftA 54s ease-in-out infinite reverse}
.gridbg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 30% 20%,#000 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 30% 20%,#000 20%,transparent 70%)}
.in1{animation:rise .5s cubic-bezier(.2,0,0,1) both}.in2{animation:rise .5s cubic-bezier(.2,0,0,1) .08s both}.in3{animation:rise .5s cubic-bezier(.2,0,0,1) .16s both}.in4{animation:rise .5s cubic-bezier(.2,0,0,1) .9s both}
.rv{opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.2,0,0,1),transform .5s cubic-bezier(.2,0,0,1)}.rv.on{opacity:1;transform:none}

.pill{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;line-height:1;font-size:12px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok);display:block;animation:pulse 2.4s ease-out infinite}
.btn-pill{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:50px;padding:0 28px;border-radius:999px;background:var(--accent);color:var(--bg);font-family:var(--display);font-weight:600;font-size:16px;text-decoration:none}
.btn-pill:hover{background:#f0a868;color:var(--bg)}

/* lock screen */
.lock{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;overflow:hidden}
.lock-main{position:relative;flex:1;display:flex;align-items:center;padding:clamp(56px,10vh,120px) clamp(20px,6vw,96px) 40px}
.lock-col{width:100%;max-width:760px;display:flex;flex-direction:column;gap:22px}
.lock-block{display:flex;flex-direction:column;gap:22px}
.lock-title{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,1.4rem + 5vw,5.6rem);line-height:.98;letter-spacing:-.03em;max-width:12ch;text-wrap:balance}
.lock-lead{margin:0;font-size:clamp(1.05rem,.95rem + .5vw,1.25rem);line-height:1.55;color:var(--soft);max-width:46ch}
.lock-form{display:flex;flex-direction:column;gap:10px;margin:6px 0 0;max-width:560px}
.label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lock-row{display:flex;flex-wrap:wrap;gap:10px}
.codebox{flex:1 1 260px;min-width:0;min-height:52px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--fg);font-family:var(--mono);font-size:16px;letter-spacing:.04em}
.codebox:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(230,142,74,.16)}
.codebox.filled{border-color:var(--accent);background:rgba(230,142,74,.10);color:#f0a868}
.codebox.bad{border-color:var(--errline)}.codebox.shake{animation:shake .32s ease-in-out 2}
.openbtn{flex:0 0 auto;min-height:52px;padding:0 26px;border:0;border-radius:12px;background:var(--accent);color:var(--bg);font-family:var(--display);font-weight:600;font-size:16px;cursor:pointer}
.openbtn:hover{background:#f0a868}.openbtn:disabled{opacity:.45;cursor:default}
.hint{margin:2px 0 0;min-height:1.5em;font-size:14px;line-height:1.5;color:var(--muted)}.hint.bad{color:var(--err)}
.lock-foot{position:relative;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;padding:20px clamp(20px,6vw,96px) 28px;border-top:1px solid rgba(37,42,72,.6);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.lock-foot a{color:var(--muted);text-decoration:none}
.noscript{padding:24px}

/* page */
#page{position:relative;z-index:1}
.band{position:relative;padding:56px 0}
.wrap{position:relative;max-width:1120px;margin:0 auto;padding:0 24px;width:100%}
.col{display:flex;flex-direction:column;gap:18px}.center{align-items:center;text-align:center}
.hero{overflow:hidden;padding:104px 0 96px;min-height:560px;display:flex;align-items:center}
.hero-col{display:flex;flex-direction:column;gap:26px}
.hero-title{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(3rem,1.5rem + 6vw,7.5rem);line-height:.98;letter-spacing:-.03em;max-width:12ch;text-wrap:balance}
.hero-lead{margin:0;font-size:clamp(1.1rem,1rem + .6vw,1.45rem);color:var(--soft);max-width:64ch}
.cue-row{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.16em;color:var(--muted);margin-top:12px;text-transform:uppercase}
.cue{display:inline-block;animation:cue 1.8s ease-in-out infinite}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--accent);display:inline-block}
.why{margin:0 0 20px;font-size:18px;color:var(--soft);max-width:64ch}
.h2{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,1.2rem + 2vw,2.8rem);line-height:1.1;letter-spacing:-.02em;max-width:22ch;text-wrap:balance}
.intro{margin:0 0 14px;font-size:17px;color:var(--soft);max-width:62ch}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.qbox{margin-top:4px;padding:24px;border-radius:20px;background:var(--panel2);border:1px solid var(--line);display:flex;flex-direction:column;gap:20px}
.qhead{display:flex;align-items:center;gap:14px}
.qtitle{display:flex;flex-direction:column;gap:2px;font-family:var(--display);font-weight:600;font-size:20px}
.byline{font-weight:400;font-size:11px;letter-spacing:.1em;color:var(--muted)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px}
.qcat{display:flex;align-items:center;gap:12px;font-family:var(--display)}
.qcat span{font-weight:600;font-size:22px;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.qcat i{width:1px;height:18px;background:var(--line2);display:inline-block}.qcat b{font-weight:500;font-size:14px;letter-spacing:.01em;color:var(--soft)}
.qtext{margin:0;font-size:16px;line-height:1.5;color:var(--soft2);text-wrap:pretty}

/* factory bot (easter egg) */
.fbot{position:relative;flex:none;width:60px;height:60px;border-radius:12px;border:1px solid rgba(230,142,74,.35);background:rgba(230,142,74,.06);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .25s,background-color .25s,transform .25s;touch-action:manipulation}
.fbot:hover{border-color:var(--accent);background:rgba(230,142,74,.14);transform:translateY(-1px) rotate(-4deg)}
.fbot svg{transition:transform .25s ease-out}
.fbot.jump svg{animation:botjump .9s cubic-bezier(.3,1.6,.5,1)}
.boteyes{transform-box:view-box;transform-origin:16px 15.5px;animation:botblink 5s infinite}
.pupils{transition:transform .12s ease-out}
.spark{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;pointer-events:none;animation:spark .85s ease-out forwards}
.botsay{position:absolute;bottom:calc(100% + 10px);left:0;white-space:nowrap;background:var(--accent);color:var(--bg);font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:5px 9px;border-radius:8px;pointer-events:none;animation:botsay 1.5s ease forwards}
.botsay::after{content:"";position:absolute;top:100%;left:16px;border:5px solid transparent;border-top-color:var(--accent)}
/* five stages */
.pipe{display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;align-items:start;margin-top:18px}
.rail{position:sticky;top:24px;display:flex;flex-direction:column;gap:8px;z-index:2}
.stage{display:flex;align-items:center;gap:12px;text-align:left;width:100%;font:inherit;cursor:pointer;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--muted);transition:border-color .35s,background-color .35s,color .35s}
.stage.done{border-color:var(--line2);color:var(--soft2)}.stage.on{background:#1b2040;border-color:var(--accent);color:var(--fg)}
.snum{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;border:1px solid var(--line);color:var(--muted)}
.stage.done .snum{border-color:var(--accent);color:var(--accent)}.stage.on .snum{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.sname{font-family:var(--display);font-weight:600;font-size:15px}.ssub{font-family:var(--mono);font-size:10px;opacity:.8}
.cap{display:flex;align-items:center;padding:14px 0 14px 24px;border-left:2px solid #1c2140;transition:opacity .35s,border-color .35s}
.cap.dim{opacity:.42}.cap.on{border-left-color:var(--accent)}
.cap .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:8px}
.lbl-p,.sdots{display:none}
.cap p{margin:0;font-size:19px;max-width:56ch}
.capstat{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);margin-top:10px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;background:rgba(11,13,26,.6)}

/* measured results */
.kpi{padding:26px 24px;gap:8px}
.klabel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.big{font-family:var(--display);font-weight:700;font-size:56px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--accent)}
.vs{display:flex;align-items:flex-start;gap:12px}.vs .sep{font-size:20px;color:var(--muted);font-weight:600;line-height:56px}
.vs .side{display:flex;flex-direction:column}.vs .side small{font-family:var(--mono);font-size:10px;letter-spacing:.1em;font-weight:400;margin-top:6px;text-transform:uppercase}
.vs .plain{color:var(--dim)}.vs .plain small{color:var(--muted)}
.khead{font-family:var(--display);font-weight:600;font-size:20px;color:var(--accent)}
.ksub{font-size:16px;font-weight:600}
.knote{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:auto;padding-top:8px}
.bars{display:flex;flex-direction:column;gap:12px;margin-top:6px;padding:14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line)}
.barrow{flex:1;display:flex;flex-direction:column;gap:4px}
.barlab{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);display:flex;justify-content:space-between;text-transform:uppercase}
.bar{height:14px;border-radius:4px;background:#5d6590}
.barsplit{display:flex;height:14px;gap:3px}.barsplit .on{border-radius:4px;background:var(--accent)}
.barsplit .saved{flex:1;border:1px dashed var(--accent);border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--accent);text-transform:uppercase}
.single .barlab{color:var(--accent)}
.relchart{margin-top:6px;padding:12px 10px 8px;border-radius:12px;background:var(--panel2);border:1px solid var(--line)}
.relchart svg{display:block;width:100%}
.btnp{align-self:flex-start;margin-top:10px;border:1px solid var(--accent);background:var(--accent);color:var(--bg);font:inherit;font-size:14px;font-weight:600;padding:0 16px;min-height:42px;border-radius:999px;cursor:pointer}
.opt{border:1px solid var(--line);background:var(--panel);color:var(--fg);font:inherit;font-size:14px;padding:0 14px;min-height:40px;min-width:64px;border-radius:999px;cursor:pointer}.opt:hover{border-color:var(--accent)}

/* dialogs */
.overlay{position:fixed;inset:0;background:rgba(6,8,18,.82);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.dlg{background:#101227;border:1px solid var(--line);border-radius:18px;max-width:760px;width:100%;max-height:90vh;overflow:auto;padding:28px 28px 22px;display:flex;flex-direction:column;gap:18px}
.dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dkick{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.dtitle{margin:0;font-family:var(--display);font-weight:600;font-size:22px;line-height:1.25;max-width:28ch;text-wrap:balance}
.dtext{margin:0;font-size:14px;color:var(--soft);max-width:70ch}
.drow{display:flex;flex-direction:column;gap:6px}.drow b{font-size:13px}
.dbar{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px}.dbar span:first-child{width:52px;color:var(--muted)}.dbar span:last-child{width:28px}
.dtrack{flex:1;height:10px;background:#1f2440;border-radius:5px;overflow:hidden}.dtrack i{display:block;height:100%;background:var(--accent)}.dtrack i.p{background:#5d6590}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--muted)}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle;background:var(--accent)}.sw.p{background:#5d6590}

.closing{padding:72px 0 104px}
.aside{margin:0;font-family:Caveat,cursive;font-size:30px;color:var(--accent);max-width:34ch;line-height:1.25}
.closing .btn-pill{align-self:center}

@media (max-width:820px){
  .pipe{display:block}
  .rail{position:sticky;top:0;z-index:5;flex-direction:row;gap:6px;background:rgba(11,13,26,.94);padding:10px 0;border-top:1px solid var(--panel);border-bottom:1px solid var(--panel)}
  .stage{flex:1;min-height:56px;flex-direction:column;justify-content:center;gap:4px;text-align:center;padding:6px 2px;border-radius:10px;-webkit-tap-highlight-color:transparent}
  .stage.done{border-color:var(--line);color:var(--muted)}.stage.done .snum{border-color:var(--line2);color:var(--muted)}
  .ssub{display:none}.sname{font-size:12px}.snum{width:22px;height:22px;font-size:11px}
  /* the captions become the canvas's swipe carousel */
  .caps{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin:16px -24px 0;padding:0 32px 0 24px;scroll-padding-left:24px}
  .caps::-webkit-scrollbar{display:none}
  .cap{flex:0 0 calc(100% - 52px);min-height:280px;scroll-snap-align:start;scroll-snap-stop:always;align-items:stretch;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
  .cap.dim{opacity:1}.cap.on{border-color:var(--line)}
  .cap>div{display:flex;flex-direction:column;gap:10px}
  .cap .lbl{margin:0}.cap p{font-size:16px;line-height:1.55}.capstat{margin-top:auto;align-self:flex-start}
  .lbl-d{display:none}.lbl-p{display:inline}
  .sdots{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px;font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
  .dots{display:flex;gap:6px}.dots span{height:6px;width:6px;border-radius:3px;background:var(--line2);transition:width .2s,background-color .2s}.dots span.on{width:18px;background:var(--accent)}
  .hero{padding:72px 0 64px;min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .in1,.in2,.in3,.in4,.dot,.cue,.orbA,.orbB,.orbC,.boteyes,.fbot.jump svg,.codebox.shake{animation:none!important}
  .spark{display:none}.rv{opacity:1;transform:none;transition:none}.stage,.cap{transition:none}
}