/* ═══════════════════════════════════════════════════════════════
   Humanuity - join flow (joinflow.js). While it is open, the page
   content fades away and only the sky remains behind one centred
   column: constant title, an animated scene, a caption, progress
   dots and one large button.
   ═══════════════════════════════════════════════════════════════ */

html.jf-open{overflow:hidden;}
html.jf-open .shell,html.jf-open .page,html.jf-open .topnav,html.jf-open .sky-pick{
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease-standard),visibility 0s linear .35s;}
.shell,.page,.topnav{transition:opacity .45s var(--ease-standard),visibility 0s;}
html.jf-open .dim{opacity:.32!important;transition:opacity .6s var(--ease-standard);}

.jf{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:72px 16px 32px;overflow-y:auto;opacity:0;transform:scale(.985);
  transition:opacity .5s var(--ease-standard),transform .6s var(--ease-standard);}
.jf.on{opacity:1;transform:none;}
.jf[hidden]{display:none;}

.jf-top{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:18px max(16px,calc((100vw - 1200px)/2 + 24px));}
.jf-back,.jf-replay{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 10px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:#C4C4CC;font-family:var(--font-text);font-size:14px;font-weight:500;
  transition:color .2s,background .2s,border-color .2s;}
.jf-back svg,.jf-replay svg{width:17px;height:17px;}
.jf-back:hover{color:#fff;background:rgba(255,255,255,0.06);}
.jf-replay{margin-left:auto;border-color:rgba(255,255,255,0.16);background:rgba(16,16,22,0.6);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.jf-replay:hover{color:#fff;border-color:rgba(255,255,255,0.3);}
.jf-back[hidden],.jf-replay[hidden]{display:none;}

.jf-col{width:min(560px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;}
.jf-title{font-family:var(--font-display);font-weight:600;letter-spacing:-0.03em;line-height:1.1;
  font-size:clamp(26px,3.4vw,40px);color:#F5F5F7;text-wrap:balance;min-height:1.1em;}

.jf-stage{position:relative;margin-top:36px;width:100%;height:300px;display:grid;place-items:center;
  transition:opacity .28s var(--ease-standard),transform .32s var(--ease-standard),filter .28s;}
.jf-stage[data-k="result"]{height:auto;min-height:300px;}
.jf-stage.out{opacity:0;transform:translateX(-28px);filter:blur(6px);}
.jf-stage.out-r{opacity:0;transform:translateX(28px);filter:blur(6px);}
.jf-stage.in{opacity:0;transform:translateX(28px);filter:blur(6px);transition:none;}
.jf-stage.in-r{opacity:0;transform:translateX(-28px);filter:blur(6px);transition:none;}

.jf-cap{margin-top:26px;font-size:18px;line-height:1.5;color:#E4E4E7;min-height:1.5em;transition:opacity .25s;}
.jf-cap.fade{opacity:0;}
.jf-dots{margin-top:22px;display:flex;gap:8px;height:6px;}
.jf-dots.off{visibility:hidden;}
.jf-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,0.24);transition:width .4s var(--ease-standard),background .3s;}
.jf-dots i.on{width:22px;background:#F5F5F7;}
.jf-next{margin-top:30px;width:min(420px,100%);height:54px;border:none;border-radius:999px;cursor:pointer;
  background:#F5F5F7;color:#0A0A0B;font-family:var(--font-text);font-size:16px;font-weight:600;letter-spacing:-0.01em;
  box-shadow:0 10px 30px -12px rgba(0,0,0,0.6),inset 0 -1px 0 rgba(0,0,0,0.08);
  transition:background .2s,transform .15s var(--ease-standard);}
.jf-next:hover{background:#fff;}
.jf-next:active{transform:scale(0.98);}
.jf-next[hidden]{display:none;}
.jf :focus-visible{outline:2px solid var(--acc);outline-offset:3px;}

/* shared surfaces inside the scenes */
.jx-card{width:min(420px,100%);text-align:left;border-radius:16px;border:1px solid rgba(255,255,255,0.12);
  background:rgba(16,16,22,0.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -30px rgba(0,0,0,0.8),inset 0 1px 0 rgba(255,255,255,0.05);}
.jx-send{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:none;
  background:rgba(255,255,255,0.16);color:#fff;transition:background .35s,color .35s,transform .35s var(--ease-standard);}
.jx-send svg{width:17px;height:17px;}
.jx-send.on{background:#F5F5F7;color:#0A0A0B;transform:scale(1.06);}

/* email step */
.jx-email{width:min(440px,100%);display:flex;align-items:center;gap:8px;height:58px;padding:0 9px 0 22px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);background:rgba(16,16,22,0.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .2s,box-shadow .2s;}
.jx-email:focus-within{border-color:var(--acc);box-shadow:0 0 0 4px rgba(174,140,247,0.16);}
.jx-email input:focus-visible{outline:none;}
.jx-email input{flex:1;min-width:0;height:100%;border:none;background:transparent;outline:none;color:#F5F5F7;font-family:var(--font-text);font-size:16px;}
.jx-email input::placeholder{color:#8A8A93;}
.jx-email .jx-send{cursor:pointer;background:#F5F5F7;color:#0A0A0B;}
.jx-email .jx-send:hover{transform:scale(1.06);}
.jx-err{position:absolute;bottom:62px;left:0;right:0;font-size:14px;color:var(--neg);}

/* 1 · typing */
.jx-type{display:inline-flex;align-items:center;gap:6px;height:56px;max-width:100%;padding:0 9px 0 22px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);background:rgba(16,16,22,0.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-size:16px;color:#F5F5F7;white-space:nowrap;}
.jx-type .txt{overflow:hidden;text-overflow:ellipsis;}
.jx-type .caret{width:1.5px;height:20px;background:#F5F5F7;margin-right:8px;animation:jfCaret 1s steps(1) infinite;}
@keyframes jfCaret{50%{opacity:0;}}

/* 2 · plan */
.jx-plan{padding:18px 20px 10px;}
.jx-plan .hd{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#C4C4CC;padding-bottom:12px;}
.jx-plan .hd svg{width:16px;height:16px;color:var(--acc);}
.jx-plan .bar{margin-left:auto;width:84px;height:3px;border-radius:2px;background:rgba(255,255,255,0.1);overflow:hidden;}
.jx-plan .bar i{display:block;height:100%;width:0;background:var(--acc);transition:width 2.4s cubic-bezier(.4,0,.2,1) .2s;}
.play .jx-plan .bar i{width:100%;}
.jx-plan .row{display:grid;grid-template-columns:96px 1fr 20px;align-items:center;gap:10px;padding:11px 0;border-top:1px solid rgba(255,255,255,0.08);
  font-size:14px;opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease-standard),transform .45s var(--ease-standard);transition-delay:calc(.3s + var(--i) * .45s);}
.jx-plan .row .w{color:#8A8A93;font-size:12.5px;}
.jx-plan .row .x{color:#F5F5F7;}
.jx-plan .row .ok{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--acc-soft);color:var(--acc);
  transform:scale(0);transition:transform .4s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.6s + var(--i) * .45s);}
.jx-plan .row .ok svg{width:11px;height:11px;}
.play .jx-plan .row{opacity:1;transform:none;}
.play .jx-plan .row .ok{transform:scale(1);}

/* 3 · match */
.jx-match{width:min(460px,100%);display:grid;grid-template-columns:1fr 150px 1fr;align-items:center;row-gap:26px;}
.jx-match .p{display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--ease-standard);}
.jx-match .p.b{transition-delay:.25s;}
.play .jx-match .p{opacity:1;transform:none;}
.jx-match .av{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-size:22px;font-weight:600;
  border:1px solid rgba(255,255,255,0.16);background:rgba(16,16,22,0.85);color:#F5F5F7;}
.jx-match .p.a .av{border-color:rgba(174,140,247,0.5);}
.jx-match .p b{font-size:15px;font-weight:600;color:#F5F5F7;}
.jx-match .p small{font-size:12.5px;color:#8A8A93;}
.jx-match .mid{position:relative;height:60px;align-self:start;display:grid;place-items:center;}
.jx-match .ln{position:absolute;left:0;right:0;top:29px;width:100%;height:2px;overflow:visible;}
.jx-match .ln line{stroke:var(--acc);stroke-width:1.5;stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset .8s var(--ease-standard) .5s;}
.play .jx-match .ln line{stroke-dashoffset:0;}
.jx-match .score{position:relative;padding:4px 12px;border-radius:999px;background:#0A0A0E;border:1px solid rgba(174,140,247,0.4);
  opacity:0;transform:scale(.9);transition:opacity .4s .7s,transform .4s cubic-bezier(.34,1.56,.64,1) .7s;}
.play .jx-match .score{opacity:1;transform:none;}
.jx-match .score b{font-family:var(--font-mono);font-size:20px;font-weight:500;color:#F5F5F7;font-variant-numeric:tabular-nums;}
.jx-match .score small{font-size:12px;color:var(--acc);}
.jx-match .why{grid-column:1 / -1;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;}
.jx-match .why span{font-size:13px;color:#E4E4E7;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.14);background:rgba(16,16,22,0.8);
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ease-standard);transition-delay:calc(1.5s + var(--i) * .18s);}
.play .jx-match .why span{opacity:1;transform:none;}

/* 4 · board */
.jx-board{position:relative;width:min(480px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:left;}
.jx-board .col{padding:10px;border-radius:12px;background:rgba(16,16,22,0.72);border:1px solid rgba(255,255,255,0.08);min-height:180px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.jx-board .ch{font-size:12px;color:#8A8A93;height:16px;}
.jx-board .tk{margin-top:8px;height:38px;display:flex;align-items:center;padding:0 10px;border-radius:9px;font-size:12.5px;color:#E4E4E7;
  background:rgba(30,30,40,0.9);border:1px solid rgba(255,255,255,0.08);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jx-board .tk.slot{visibility:hidden;}
.jx-board .mover{position:absolute;left:10px;top:34px;margin:0;width:calc((100% - 20px) / 3 - 20px);justify-content:space-between;gap:6px;
  border-color:rgba(174,140,247,0.45);background:rgba(36,30,56,0.95);z-index:2;
  transition:transform .9s cubic-bezier(.65,0,.35,1);}
.jx-board .mover.s1{transform:translateX(calc(100% + 30px));}
.jx-board .mover.s2{transform:translateX(calc(200% + 60px));border-color:rgba(174,140,247,0.8);}
.jx-board .avs{display:flex;flex:none;}
.jx-board .avs i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:9.5px;font-weight:600;
  background:#2A2540;color:#E4E4E7;border:1px solid #0A0A0E;margin-left:-5px;}
.jx-board .msg{position:absolute;right:-6px;bottom:-18px;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:14px 14px 4px 14px;
  background:rgba(245,245,247,0.96);color:#0A0A0B;font-size:13px;font-weight:500;box-shadow:0 14px 30px -10px rgba(0,0,0,0.6);
  opacity:0;transform:translateY(8px) scale(.96);transition:opacity .4s,transform .45s cubic-bezier(.34,1.56,.64,1);}
.jx-board .msg.on{opacity:1;transform:none;}
.jx-board .msg i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;background:#7C3AED;color:#fff;}

/* 5 · showcase */
.jx-show{position:relative;width:min(400px,100%);overflow:visible;}
.jx-show .cover{height:104px;border-radius:15px 15px 0 0;
  background:radial-gradient(120% 140% at 15% 0%,rgba(124,58,237,0.55),rgba(124,58,237,0) 60%),
             radial-gradient(90% 120% at 100% 100%,rgba(59,130,246,0.35),rgba(59,130,246,0) 60%),#141420;}
.jx-show .bd{padding:16px 18px 18px;}
.jx-show .badge{display:inline-block;font-size:12px;font-weight:600;color:var(--acc);background:var(--acc-soft);padding:4px 10px;border-radius:999px;}
.jx-show .nm{display:block;margin-top:10px;font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-0.02em;color:#F5F5F7;}
.jx-show .stats{margin-top:10px;display:flex;gap:18px;font-size:13px;color:#8A8A93;}
.jx-show .stats b{color:#F5F5F7;font-weight:600;font-variant-numeric:tabular-nums;}
.jx-show .chip{position:absolute;top:84px;right:-12px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  background:rgba(16,16,22,0.95);border:1px solid rgba(174,140,247,0.6);font-size:12.5px;font-weight:600;color:#F5F5F7;
  box-shadow:0 12px 30px -10px rgba(124,58,237,0.6);opacity:0;transform:translateY(6px) scale(.9);
  transition:opacity .4s,transform .5s cubic-bezier(.34,1.56,.64,1);}
.jx-show .chip svg{width:14px;height:14px;color:var(--acc);}
.jx-show .chip.on{opacity:1;transform:none;}

/* result */
.jx-result{width:100%;display:flex;flex-direction:column;align-items:center;gap:20px;}
.rs-check{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#7C3AED;color:#fff;
  box-shadow:0 14px 40px -12px rgba(124,58,237,0.8);animation:jfPop .6s cubic-bezier(.34,1.56,.64,1);}
.rs-check svg{width:26px;height:26px;}
.rs-check.soft{background:rgba(255,255,255,0.12);box-shadow:none;}
.rs-check.warn{background:rgba(240,120,90,0.16);color:var(--neg);box-shadow:none;}
@keyframes jfPop{from{transform:scale(.5);opacity:0;}to{transform:none;opacity:1;}}
.rs-place small{display:block;font-size:13px;color:#8A8A93;}
.rs-place b{display:block;margin-top:2px;font-family:var(--font-display);font-size:56px;font-weight:700;letter-spacing:-0.03em;line-height:1;color:#F5F5F7;font-variant-numeric:tabular-nums;}
.rs-link{width:min(440px,100%);text-align:left;}
.rs-link small{font-size:13px;color:#8A8A93;}
.rs-field{margin-top:8px;display:flex;align-items:center;gap:6px;height:50px;padding:0 5px 0 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);background:rgba(16,16,22,0.85);}
.rs-field input{flex:1;min-width:0;border:none;background:transparent;outline:none;color:#C4C4CC;font-family:var(--font-text);font-size:14px;}
.rs-field button{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;cursor:pointer;
  border:none;background:#F5F5F7;color:#0A0A0B;font-family:var(--font-text);font-size:13.5px;font-weight:600;transition:background .2s;}
.rs-field button svg{width:15px;height:15px;}
.rs-field button.done{background:#7C3AED;color:#fff;}
.rs-link p{margin-top:10px;font-size:13.5px;line-height:1.5;color:#8A8A93;}
.rs-share{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.rs-share a,.rs-share button{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,0.16);background:rgba(16,16,22,0.7);color:#E4E4E7;text-decoration:none;
  font-family:var(--font-text);font-size:13.5px;font-weight:500;transition:border-color .2s,color .2s;}
.rs-share a:hover,.rs-share button:hover{border-color:rgba(255,255,255,0.32);color:#fff;}
.rs-share svg{width:15px;height:15px;}
.rs-text{font-size:16px;line-height:1.6;color:#C4C4CC;max-width:40ch;}
.rs-retry{height:46px;padding:0 22px;border-radius:999px;border:none;cursor:pointer;background:#F5F5F7;color:#0A0A0B;font-family:var(--font-text);font-size:15px;font-weight:600;}
.rs-spin{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,0.15);border-top-color:#F5F5F7;animation:jfSpin .8s linear infinite;}
@keyframes jfSpin{to{transform:rotate(360deg);}}

@media (max-width:640px){
  .jf{align-items:flex-start;padding-top:84px;}
  .jf-stage{height:280px;margin-top:28px;}
  .jf-cap{font-size:16px;}
  .jx-match{grid-template-columns:1fr 104px 1fr;}
  .jx-board .tk{font-size:11.5px;padding:0 7px;}
  .jx-board .avs{display:none;}
  .jx-show .chip{right:0;}
  .rs-place b{font-size:46px;}
}
@media (prefers-reduced-motion:reduce){
  .jf,.jf-stage,.jf-cap,.jf-dots i{transition:none;}
  .jf-stage *{transition:none!important;animation:none!important;}
}