/* HK Connect: the HK Upload Desk look (dark warm glass, gold gradient, Instrument Serif + Manrope), as HK Checkout.
   Layout: client page = one column on phones; each step is "instructions | 3D phone" side by side from 860px.
   Desk = KPI tiles, filter pills, client cards, one sheet per client. */
:root{
  --bg:#0b0a09; --panel:rgba(26,23,20,.62); --panel2:rgba(34,30,26,.55); --line:rgba(222,196,152,.13);
  --text:#f4efe6; --muted:#a39a8b; --gold:#d6b27a; --cream:#efdcb3; --bronze:#a9793f; --green:#9ccaa6;
  --amber:#e7b866; --red:#e38b7f; --r:22px; --grad:linear-gradient(120deg,#f6e6c3,#d6b27a 48%,#9d7444);
  --ink:#17130e; --shadow:0 24px 60px -24px rgba(0,0,0,.85), 0 0 0 1px var(--line) inset;
  --f-display:"Instrument Serif",Georgia,serif; --f-body:"Manrope",system-ui,-apple-system,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  font-family:var(--f-body); color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1100px 700px at 85% -10%,rgba(214,178,122,.14),transparent 60%),
             radial-gradient(900px 600px at -10% 110%,rgba(169,121,63,.11),transparent 60%),var(--bg);background-attachment:fixed}
.noise{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
h1,h2{font-family:var(--f-display);font-weight:400;letter-spacing:0}
p{margin:0}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:10px}
.hidden{display:none!important}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.center{text-align:center}
.mono{font-family:var(--f-mono)}
.mt{margin-top:16px}.mt-s{margin-top:8px}
.glass{background:var(--panel);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:var(--shadow);border-radius:var(--r)}
.pad{padding:24px 22px}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);padding:.38rem .75rem;border-radius:99px;background:rgba(214,178,122,.1);box-shadow:0 0 0 1px rgba(214,178,122,.28) inset}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 6s linear infinite;font-style:italic}
@keyframes shine{to{background-position:200% 0}}

/* layout */
.wrap{max-width:1180px;margin:0 auto;padding:0 18px 48px}
.wrap.tiny{max-width:460px;padding-top:44px}
.top{max-width:1180px;margin:12px auto 0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-family:var(--f-display);font-size:1.45rem;white-space:nowrap}
.brand img{border-radius:50%;box-shadow:0 0 22px rgba(214,178,122,.35)}
.brand b{font-weight:400;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.topacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;cursor:pointer;color:var(--text);
  font:700 .95rem var(--f-body);letter-spacing:.01em;padding:.85rem 1.25rem;border-radius:14px;text-decoration:none;
  transition:transform .2s,box-shadow .3s,background .3s;overflow:hidden;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.primary{color:var(--ink);background:var(--grad);background-size:180% 100%;box-shadow:0 10px 30px -8px rgba(214,178,122,.75)}
.btn.primary:hover{background-position:100% 0}
.btn.ghost{background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.danger{background:rgba(227,139,127,.1);color:#f3cbc5;box-shadow:0 0 0 1px rgba(227,139,127,.35) inset}
.btn.small{padding:.6rem .95rem;font-size:.85rem;border-radius:12px}
.btn.tiny{padding:.42rem .7rem;font-size:.78rem;border-radius:10px}
.btn.wide{width:100%}
.btn.big{padding:1.05rem 1.3rem;font-size:1.05rem;border-radius:16px}
.btn[disabled],.btn.busy{opacity:.5;pointer-events:none}
.btn.glow::after{content:"";position:absolute;inset:-2px;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45),transparent 70%);
  transform:translateX(-120%);animation:sweep 3.2s ease-in-out infinite}
@keyframes sweep{60%,100%{transform:translateX(120%)}}
.btn .ext{width:15px;height:15px}

/* icons (CSS masks) */
[class^="i-"],[class*=" i-"]{display:inline-block;width:18px;height:18px;background:currentColor;flex:none;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.i-arrow{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.i-check{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")}
.i-lock{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='3'/%3E%3Cpath d='M8 10V7a4 4 0 018 0v3'/%3E%3C/svg%3E")}
.i-chat{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.4-4A8 8 0 1112 20a8 8 0 01-3.9-1z'/%3E%3C/svg%3E")}
.i-ext{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M19 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V6a1 1 0 011-1h5'/%3E%3C/svg%3E")}
.i-clock{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.i-play{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5l12 7-12 7z'/%3E%3C/svg%3E")}
.i-pause{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 5h4v14H6zM14 5h4v14h-4z'/%3E%3C/svg%3E")}
.i-laptop{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='2'/%3E%3Cpath d='M2 19h20'/%3E%3C/svg%3E")}
.i-copy{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='3'/%3E%3Cpath d='M16 8V6a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2'/%3E%3C/svg%3E")}

/* fields */
.fld{display:flex;flex-direction:column;gap:6px;font-size:.84rem;font-weight:600;color:var(--cream)}
.fld small{color:var(--muted);font-weight:500;font-size:.76rem}
.fld input,.fld select,.fld textarea{font:500 1rem var(--f-body);color:var(--text);background:rgba(0,0,0,.28);border:0;border-radius:12px;
  padding:.8rem .9rem;box-shadow:0 0 0 1px var(--line) inset;outline:0;transition:box-shadow .2s;width:100%;min-width:0}
.fld select{appearance:none;-webkit-appearance:none;cursor:pointer}
.fld select option{color:#17130e;background:#fff}
.fld input::placeholder{color:#6f675b}
.fld input:focus,.fld select:focus{box-shadow:0 0 0 1.5px var(--gold) inset}
.fld input.bad{box-shadow:0 0 0 1.5px var(--red) inset}
.form{padding:26px 22px}
.form h2{font-size:2rem}
.err{color:var(--red);min-height:1.2em;font-size:.9rem;margin-top:10px}
.note{border-radius:14px;padding:12px 14px;font-size:.9rem}
.note.warn{background:rgba(227,139,127,.1);box-shadow:0 0 0 1px rgba(227,139,127,.35) inset;color:#f3cbc5}
.note.info{background:rgba(214,178,122,.07);box-shadow:0 0 0 1px rgba(214,178,122,.25) inset;color:var(--cream)}
.note.ok{background:rgba(156,202,166,.08);box-shadow:0 0 0 1px rgba(156,202,166,.35) inset;color:#cfe8d5}
.copyrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.28);box-shadow:0 0 0 1px var(--line) inset}
.copyrow b{flex:1;min-width:0;overflow-wrap:anywhere;font:600 .95rem var(--f-mono)}
.copy{flex:none;display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.06);color:var(--text);border:0;box-shadow:0 0 0 1px var(--line) inset;border-radius:10px;padding:.5rem .8rem;
  font:700 .8rem var(--f-body);cursor:pointer}
.copy i{width:14px;height:14px}
.toast{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translate(-50%,16px);opacity:0;pointer-events:none;z-index:90;
  background:#f4efe6;color:var(--ink);padding:12px 16px;border-radius:14px;font-size:.92rem;font-weight:600;transition:.25s;width:max-content;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:#f3cbc5}

/* ============================================================ client page: one step at a time
   Layout: a stage rail, then one card: instruction on the left, a big screen picture on the right (stacked on phones,
   picture first). The picture carries a pulsing highlight box and a hand-drawn gold arrow on the button to tap. */
.cwrap{max-width:1340px}
.p-client .top{max-width:1340px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hello{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:30px 4px 22px}
.hello h1{font-size:clamp(2.3rem,5.6vw,3.6rem);line-height:1.04}
.hello .lead{color:var(--muted);font-size:1.05rem;max-width:620px}
.trust{display:flex;flex-wrap:wrap;gap:8px}
.trust span{display:inline-flex;align-items:center;gap:.45rem;font-size:.84rem;font-weight:600;padding:.45rem .75rem;border-radius:99px;
  background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset;color:#e9e2d6}
.trust i{width:15px;height:15px;color:var(--gold)}

.stages{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:0;margin:0 0 14px;counter-reset:s}
.stages li{min-width:0;position:relative}
.stages li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-6px;width:6px;height:2px;background:var(--line)}
.stages li.done:not(:last-child)::after{background:rgba(156,202,166,.5)}
.stages button{width:100%;display:flex;align-items:center;gap:.5rem;padding:9px 10px;border-radius:14px;border:0;cursor:pointer;
  background:rgba(255,255,255,.035);box-shadow:0 0 0 1px var(--line) inset;color:var(--muted);font:600 .82rem var(--f-body);text-align:left;min-width:0;transition:.25s}
.stages button:disabled{cursor:default;opacity:.7}
.stages .dot{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;font-size:.76rem;font-weight:800;box-shadow:0 0 0 1px var(--line) inset}
.stages .dot i{width:13px;height:13px}
.stages .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stages li.done button{color:var(--cream)}
.stages li.done .dot{background:rgba(156,202,166,.18);box-shadow:0 0 0 1px rgba(156,202,166,.5) inset;color:var(--green)}
.stages li.on button{color:var(--text);background:rgba(214,178,122,.09);box-shadow:0 0 0 1.5px rgba(214,178,122,.6) inset}
.stages li.on .dot{background:var(--grad);color:var(--ink);box-shadow:none}

.wiz{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:32px;padding:30px 28px;align-items:center}
.wl{display:flex;flex-direction:column;gap:16px;min-width:0}
.kick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:.8rem;font-weight:700;color:var(--cream)}
.kick .sp{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--grad);padding:.28rem .6rem;border-radius:99px}
.kick .ss{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}
.subbar{display:flex;gap:5px}
.subbar i{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.08)}
.subbar i.d{background:rgba(214,178,122,.55)}
.subbar i.on{background:var(--grad)}
.wt{font-size:clamp(2rem,4.2vw,2.8rem);line-height:1.06;outline:0}
.wx{display:flex;flex-direction:column;gap:8px;font-size:1.08rem;line-height:1.55;color:#e9e2d6;max-width:46ch}
.wa{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.wa .btn.big{min-width:min(100%,300px)}
.copyrow.big{width:100%;padding:12px 14px}
.copyrow.big b{font-size:1.02rem}
.choice .row{display:flex;flex-wrap:wrap;gap:10px}
.choice .btn{flex:1 1 220px}
.tip{display:flex;gap:.55rem;align-items:flex-start;color:var(--muted);font-size:.88rem}
.laptop{display:flex;gap:.55rem;align-items:flex-start;font-size:.88rem;color:var(--cream);padding:9px 12px;border-radius:12px;background:rgba(214,178,122,.07);box-shadow:0 0 0 1px rgba(214,178,122,.22) inset}
.laptop i{width:16px;height:16px;color:var(--gold);margin-top:2px}
.tip i{width:15px;height:15px;color:var(--gold);margin-top:3px}
.wn{display:flex;justify-content:space-between;gap:10px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.wn .btn{min-width:120px}
.i-arrow.back{transform:scaleX(-1)}
.helpline{color:var(--muted);font-size:.86rem}
.helpline a{color:var(--cream);font-weight:600}
.waitline{display:flex;align-items:center;gap:10px;color:var(--cream);font-weight:600}
.spin{width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(214,178,122,.25);border-top-color:var(--gold);animation:rot 1s linear infinite;flex:none}
@keyframes rot{to{transform:rotate(360deg)}}
.link-btn{background:none;border:0;color:var(--cream);font:600 .88rem var(--f-body);cursor:pointer;padding:2px 0;border-bottom:1px solid rgba(239,220,179,.35)}
.fine{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;color:var(--muted);font-size:.84rem}
.fine i{width:14px;height:14px;color:var(--gold)}

/* the big screen picture */
.wr{min-width:0}
.shot-wrap{margin:0;display:flex;flex-direction:column;gap:12px}
.browser{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(222,196,152,.22),0 40px 80px -36px rgba(0,0,0,.95),0 0 60px -30px rgba(214,178,122,.35)}
.bbar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#ececec;border-bottom:1px solid #dcdcdc}
.bbar>i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.bbar>i:nth-child(2){background:#febc2e}.bbar>i:nth-child(3){background:#28c840}
.addr{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;margin-left:10px;padding:4px 10px;border-radius:8px;background:#fff;
  color:#3c3c3c;font:600 .78rem var(--f-body);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addr i{width:11px;height:11px;color:#6b6b6b}
.shot{position:relative;width:100%;background:#f3f4f6;overflow:hidden;isolation:isolate;contain:paint}
/* the camera layer: crossfade, then a slow zoom / pan toward the button (only transform and opacity) */
.cam{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform,opacity;
  transform:translate3d(var(--sx,0%),var(--sy,0%),0) scale(var(--ss,1))}
.shot.p2 .cam{transform:translate3d(var(--tx,0%),var(--ty,0%),0) scale(var(--s,1));transition:transform .9s cubic-bezier(.22,.8,.2,1)}
.cam img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transition:opacity .38s ease}
.shot.p1 .cam img{opacity:1}
.cam.leaving{z-index:3;transition:opacity .42s ease}
.cam.leaving.out{opacity:0}
.cam.leaving *{animation:none!important;transition:none!important}
.cam.leaving img{opacity:1}
.cam.leaving.lit .hl,.cam.leaving.lit .hl .num,.cam.leaving.lit .hl .lab{opacity:1;transform:none}
.cam.leaving.lit .hl .arrow path{stroke-dashoffset:0}
.cam.leaving.lit .hl .lab.c{transform:translateX(-50%)}
/* the highlight: a steady gold ring, a soft glow that breathes, the arrow drawing itself, the label chip, one ripple */
.hl{position:absolute;border-radius:10px;box-shadow:0 0 0 3px #e2a64a,0 0 0 7px rgba(226,166,74,.22);opacity:0;transition:opacity .3s ease;pointer-events:none}
.shot.p3 .hl{opacity:1}
.hl .glow{position:absolute;inset:-8px;border-radius:16px;box-shadow:0 0 30px 8px rgba(226,166,74,.5);opacity:0;will-change:opacity,transform}
.shot.p3 .hl .glow{animation:breathe 2.6s ease-in-out .35s infinite}
@keyframes breathe{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.85;transform:scale(1.025)}}
.hl .ripple{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid rgba(255,255,255,.95);
  box-shadow:0 0 12px rgba(226,166,74,.6);opacity:0;will-change:opacity,transform}
.shot.p4 .hl .ripple{animation:tapripple .8s cubic-bezier(.22,.8,.2,1) .05s 1}
@keyframes tapripple{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(2.3)}}
.hl .arrow{position:absolute;width:clamp(54px,9vw,96px);color:#e2a64a;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.hl .arrow svg{display:block;width:100%;height:auto;overflow:visible}
.hl .arrow path{stroke-dasharray:1;stroke-dashoffset:1}
.shot.p3 .hl .arrow .a1{stroke-dashoffset:0;transition:stroke-dashoffset .45s cubic-bezier(.4,0,.2,1) .12s}
.shot.p3 .hl .arrow .a2{stroke-dashoffset:0;transition:stroke-dashoffset .2s ease-out .55s}
.hl .num{position:absolute;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--grad);color:var(--ink);font:800 .9rem var(--f-body);
  box-shadow:0 6px 16px rgba(0,0,0,.45);opacity:0;transition:opacity .25s ease .1s}
.shot.p3 .hl .num{opacity:1}
.hl .lab{position:absolute;white-space:nowrap;max-width:min(260px,70vw);overflow:hidden;text-overflow:ellipsis;padding:.38rem .7rem;border-radius:9px;
  background:rgba(23,19,14,.92);color:#f6e6c3;font:700 .78rem var(--f-body);box-shadow:0 0 0 1px rgba(226,166,74,.55),0 10px 24px -10px rgba(0,0,0,.8);
  opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .45s cubic-bezier(.22,.8,.2,1)}
.hl .lab.down{top:calc(100% + 12px)}
.hl .lab.up{bottom:calc(100% + 12px);transform:translateY(-6px)}
.hl .lab.c{left:50%;transform:translate(-50%,6px)}
.hl .lab.up.c{transform:translate(-50%,-6px)}
.hl .lab.l{left:0}
.hl .lab.r{right:0}
.shot.p4 .hl .lab{opacity:1;transform:none}
.shot.p4 .hl .lab.c{transform:translateX(-50%)}
.hl.from-left .arrow{right:calc(100% + 6px);top:50%;transform:translateY(-62%)}
.hl.from-left .num{right:calc(100% + 6px + clamp(54px,9vw,96px));top:50%;transform:translate(-2px,-90%)}
.hl.from-right .arrow{left:calc(100% + 6px);top:50%;transform:translateY(-62%) scaleX(-1)}
.hl.from-right .num{left:calc(100% + 6px + clamp(54px,9vw,96px));top:50%;transform:translate(2px,-90%)}
.hl.from-top .arrow{bottom:calc(100% + 4px);left:50%;transform:translateX(-30%) rotate(64deg)}
.hl.from-top .num{bottom:calc(100% + 4px + clamp(54px,9vw,96px) * .8);left:50%;transform:translateX(-50%)}
.hl.from-bottom .arrow{top:calc(100% + 4px);left:50%;transform:translateX(-30%) rotate(-64deg)}
.hl.from-bottom .num{top:calc(100% + 4px + clamp(54px,9vw,96px) * .8);left:50%;transform:translateX(-50%)}
.shot.ph{display:grid;place-items:center;background:repeating-linear-gradient(135deg,#f6f6f7 0 14px,#f0f1f3 14px 28px)}
.phc{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px;text-align:center;color:#2b2b2b}
.phc small{font:700 .72rem var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:#7a7a7a}
.phc span{font-size:1rem;color:#4a4a4a}
.phc em{font-style:normal;font:800 1.15rem var(--f-body);padding:.6rem 1.1rem;border-radius:12px;background:#fff;color:#141414;
  box-shadow:0 0 0 3px #e2a64a,0 0 26px 4px rgba(226,166,74,.4)}
.shot-wrap figcaption{display:flex;align-items:center;gap:10px;font-size:1rem;color:#e9e2d6}
.shot-wrap figcaption .num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--grad);color:var(--ink);font:800 .85rem var(--f-body);flex:none}
.shot-wrap figcaption strong{color:var(--cream)}

.keypanel{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:20px;background:rgba(0,0,0,.25);box-shadow:0 0 0 1.5px rgba(214,178,122,.4) inset}
.keypanel .eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.keypanel textarea{width:100%;resize:none;font:600 1rem var(--f-mono);color:var(--text);background:rgba(0,0,0,.35);border:0;border-radius:14px;padding:1rem;
  box-shadow:0 0 0 1px var(--line) inset;outline:0;line-height:1.5}
.keypanel textarea:focus{box-shadow:0 0 0 1.5px var(--gold) inset}
.keypanel textarea.bad{box-shadow:0 0 0 1.5px var(--red) inset}
.keypanel .row{display:flex;gap:10px;flex-wrap:wrap}
.keypanel .row .btn{flex:1 1 140px}

.taskcard{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:24px 26px;margin-bottom:14px;
  box-shadow:var(--shadow),0 0 0 1.5px rgba(231,184,102,.45) inset}
.taskcard h3{font-family:var(--f-display);font-weight:400;font-size:1.9rem;margin:4px 0}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.waitcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:28px;padding:32px 28px;align-items:center}
.waitcard h2{font-size:clamp(2rem,4.6vw,2.8rem);line-height:1.05}
.teamlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.teamlist li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.035);box-shadow:0 0 0 1px var(--line) inset;color:var(--muted);font-weight:600}
.teamlist li .dot{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;box-shadow:0 0 0 1px var(--line) inset}
.teamlist li.done{color:var(--text)}
.teamlist li.done .dot{background:rgba(156,202,166,.18);box-shadow:0 0 0 1px rgba(156,202,166,.5) inset;color:var(--green)}
.teamlist li.done .dot i{width:14px;height:14px}
.teamlist li.now{color:var(--text);box-shadow:0 0 0 1px rgba(214,178,122,.45) inset;background:rgba(214,178,122,.06)}
.teamlist li.now .dot{border:2.5px solid rgba(214,178,122,.25);border-top-color:var(--gold);animation:rot 1s linear infinite;box-shadow:none}
.orb{position:relative;width:min(280px,64vw);aspect-ratio:1;margin:auto;perspective:900px}
.orb .ringx{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(214,178,122,.35);transform-style:preserve-3d;animation:spin3d 14s linear infinite}
.orb .ringx:nth-child(2){inset:12%;animation-duration:10s;animation-direction:reverse;border-color:rgba(239,220,179,.25)}
.orb .ringx:nth-child(3){inset:24%;animation-duration:7s;border-color:rgba(169,121,63,.45)}
.orb img{position:absolute;inset:34%;width:32%;height:32%;border-radius:50%;box-shadow:0 0 60px rgba(214,178,122,.55)}
@keyframes spin3d{from{transform:rotateX(68deg) rotateZ(0)}to{transform:rotateX(68deg) rotateZ(360deg)}}
.readycard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:44px 24px}
.readycard h2{font-size:clamp(2.4rem,6vw,3.4rem)}
.readycard p{max-width:560px}
.bigtick{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:var(--ink);box-shadow:0 0 70px rgba(214,178,122,.55);animation:pop .6s cubic-bezier(.2,.9,.3,1.4) both}
.bigtick i{width:40px;height:40px}
@keyframes pop{from{transform:scale(.4);opacity:0}}

.faq{margin:40px 0 0}
.faq h3{font-family:var(--f-display);font-weight:400;font-size:1.8rem;margin:0 4px 10px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:15px 4px;font-weight:600;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding:0 4px 15px;max-width:760px}
.foot{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;color:var(--muted);font-size:.8rem;padding:30px 18px 36px;text-align:center}
.foot img{border-radius:50%}

.demobar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:18px 0 0;padding:12px 14px;border-radius:16px;
  background:rgba(231,184,102,.08);box-shadow:0 0 0 1px rgba(231,184,102,.35) inset;font-size:.88rem}
.demobar b{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--grad);padding:.25rem .55rem;border-radius:99px}
.demobar span{color:var(--cream)}
.demochips{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.demochips button{border:0;cursor:pointer;font:700 .8rem var(--f-body);color:var(--text);padding:.45rem .75rem;border-radius:10px;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset}
.demochips button.on{background:var(--grad);color:var(--ink)}

/* ============================================================ desk */
.deskhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:26px 4px 18px}
.deskhead h1{font-size:clamp(2.2rem,5vw,3.2rem);line-height:1}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi{position:relative;overflow:hidden;border-radius:22px;padding:16px 18px;background:linear-gradient(160deg,rgba(34,30,26,.75),rgba(14,12,10,.75));box-shadow:var(--shadow);text-align:left;border:0;color:var(--text);cursor:pointer;font:inherit}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--glow,var(--gold));filter:blur(40px);opacity:.3}
.kpi small{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;font-weight:700}
.kpi b{display:block;font-size:2.3rem;font-weight:800;margin-top:4px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi.on{box-shadow:var(--shadow),0 0 0 1.5px rgba(214,178,122,.6) inset}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar input{flex:1 1 220px;font:500 .95rem var(--f-body);color:var(--text);background:rgba(0,0,0,.28);border:0;border-radius:12px;padding:.7rem .9rem;box-shadow:0 0 0 1px var(--line) inset;outline:0;min-width:0}
.seg{display:inline-flex;background:rgba(255,255,255,.05);border-radius:12px;padding:3px;box-shadow:0 0 0 1px var(--line) inset;flex-wrap:wrap}
.seg button{border:0;background:transparent;color:var(--muted);font:600 .82rem var(--f-body);padding:.5rem .8rem;border-radius:9px;cursor:pointer;transition:.25s}
.seg button.on{background:var(--grad);color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px}
.cc{padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:transform .2s,box-shadow .3s;text-align:left;border:0;color:var(--text);font:inherit}
.cc:hover{transform:translateY(-2px)}
.cc:target,.cc.flash{box-shadow:0 0 0 1.5px var(--gold) inset,var(--shadow)}
.cc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cc-top h3{font-size:1.08rem}
.cc-top small{display:block;color:var(--muted);font-size:.8rem;font-weight:500;margin-top:2px}
.who{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .6rem;border-radius:99px;white-space:nowrap;flex:none}
.w-team{color:var(--amber);background:rgba(231,184,102,.12);box-shadow:0 0 0 1px rgba(231,184,102,.38) inset}
.w-auto{color:var(--cream);background:rgba(214,178,122,.12);box-shadow:0 0 0 1px rgba(214,178,122,.4) inset}
.w-client{color:var(--muted);background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset}
.w-error{color:var(--red);background:rgba(227,139,127,.12);box-shadow:0 0 0 1px rgba(227,139,127,.4) inset}
.w-ready{color:var(--green);background:rgba(156,202,166,.12);box-shadow:0 0 0 1px rgba(156,202,166,.42) inset}
.w-archived{color:var(--muted);box-shadow:0 0 0 1px var(--line) inset}
.next{font-weight:700;font-size:.95rem}
.dots8{display:flex;gap:4px}
.dots8 span{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.07)}
.dots8 span.d{background:var(--grad)}
.dots8 span.c{background:rgba(214,178,122,.25);animation:hlp 1.6s ease-in-out infinite}
.cc-meta{display:flex;flex-wrap:wrap;gap:6px 12px;color:var(--muted);font-size:.8rem}
.cc-meta b{color:#e9e2d6;font-weight:600}
.cc-err{color:#f3cbc5;font-size:.82rem}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}

.sheet{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(6,5,4,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:14px;animation:fade .25s both}
@keyframes fade{from{opacity:0}}
.sheet-panel{width:min(760px,100%);max-height:92vh;overflow:auto;display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:26px;animation:popin .35s cubic-bezier(.2,.8,.2,1) both;overscroll-behavior:contain}
@keyframes popin{from{transform:translateY(14px) scale(.98);opacity:0}}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sheet-head h3{font-family:var(--f-display);font-weight:400;font-size:2rem;line-height:1.05}
.sheet-head small{display:block;color:var(--muted);font-size:.84rem;margin-top:4px}
.xbtn{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--line) inset;color:var(--text);font-size:1.2rem;cursor:pointer}
.box{border-radius:18px;padding:16px;background:rgba(0,0,0,.2);box-shadow:0 0 0 1px var(--line) inset;display:flex;flex-direction:column;gap:10px}
.box h4{font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.box .acts{display:flex;gap:8px;flex-wrap:wrap}
.box.focus{box-shadow:0 0 0 1.5px rgba(214,178,122,.55) inset;background:rgba(214,178,122,.05)}
.ms{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ms li{padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.03);box-shadow:0 0 0 1px var(--line) inset;font-size:.8rem;font-weight:700;color:var(--muted)}
.ms li small{display:block;font-weight:500;font-size:.7rem;margin-top:2px}
.ms li.d{color:var(--text);box-shadow:0 0 0 1px rgba(156,202,166,.35) inset;background:rgba(156,202,166,.06)}
.ms li.d small{color:var(--green)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.plan{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.plan li{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.03);box-shadow:0 0 0 1px var(--line) inset;font-size:.88rem}
.plan li input{width:17px;height:17px;accent-color:var(--gold);flex:none}
.plan li span{flex:1;min-width:0;overflow-wrap:anywhere}
.plan li em{font-style:normal;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.plan li em.hk{color:var(--green)}
.log{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto;font-size:.82rem}
.log li{display:grid;grid-template-columns:118px 52px minmax(0,1fr);gap:8px;padding:6px 4px;border-bottom:1px solid var(--line)}
.log li time{color:var(--muted);font-variant-numeric:tabular-nums}
.log li em{font-style:normal;color:var(--gold);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.tgl{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:.92rem}
.tgl:first-of-type{border-top:0}
.tgl small{display:block;color:var(--muted);font-size:.8rem}
.tgl input{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:99px;background:rgba(255,255,255,.12);position:relative;cursor:pointer;flex:none;transition:.25s}
.tgl input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#f4efe6;transition:.25s}
.tgl input:checked{background:var(--gold)}
.tgl input:checked::after{left:23px;background:var(--ink)}
.logins{display:flex;flex-direction:column;gap:8px}
.logins .lr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:8px}
.logins input{font:500 .92rem var(--f-body);color:var(--text);background:rgba(0,0,0,.28);border:0;border-radius:10px;padding:.65rem .8rem;box-shadow:0 0 0 1px var(--line) inset;outline:0;min-width:0}
.confirm{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.confirm input{font:500 .92rem var(--f-body);color:var(--text);background:rgba(0,0,0,.28);border:0;border-radius:10px;padding:.62rem .8rem;box-shadow:0 0 0 1px var(--line) inset;outline:0;min-width:0}
.confirm input:focus{box-shadow:0 0 0 1.5px var(--gold) inset}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (max-width:980px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .wiz{grid-template-columns:minmax(0,1fr);gap:20px;padding:20px 16px}
  .wr{order:-1}
  .waitcard{grid-template-columns:minmax(0,1fr);padding:24px 16px}
  .stages{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
  .stages button{justify-content:center;padding:8px 4px}
  .stages .lbl{display:none}
  .stages li.on{grid-column:span 1}
  .ms{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .top{margin:8px 6px 0;padding:8px 12px}
  .brand{font-size:1.25rem}
  .wrap{padding:0 12px 36px}
  .hello{margin:20px 2px 16px}
  .hello .lead{font-size:1rem}
  .wt{font-size:2rem}
  .wx{font-size:1.02rem}
  .wa .btn.big{width:100%}
  .wn .btn{min-width:0;flex:1}
  .hl .num{width:24px;height:24px;font-size:.75rem}
  .hl .lab{font-size:.68rem;padding:.3rem .55rem}
  .taskcard{padding:20px 16px}
  .taskcard .btn{width:100%}
  .grid2{grid-template-columns:1fr}
  .logins .lr{grid-template-columns:1fr 1fr;}
  .logins .lr button{grid-column:1/-1}
  .log li{grid-template-columns:1fr;gap:0}
}

/* the veil while a login window is open (24 Oct 2026) */
.veil{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:18px;background:rgba(8,7,6,.62);
  backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);opacity:0;transition:opacity .3s ease}
.veil.on{opacity:1}
.veil-card{width:min(440px,100%);padding:28px 24px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;
  transform:translateY(12px) scale(.98);transition:transform .45s cubic-bezier(.22,.8,.2,1)}
.veil.on .veil-card{transform:none}
.veil-card h3{font-family:var(--f-display);font-weight:400;font-size:1.9rem;line-height:1.1}
.veil-card p{color:var(--muted);font-size:1rem;max-width:34ch}
.veil-card small{color:var(--muted);font-size:.78rem}
.veil-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.veil-ic{position:relative;width:76px;height:76px;display:grid;place-items:center;margin-bottom:4px}
.veil-ic i{width:28px;height:28px;color:var(--gold);position:relative;z-index:1}
.veil-ic span{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(214,178,122,.55);animation:veilring 2.4s cubic-bezier(.22,.8,.2,1) infinite}
.veil-ic span+span{animation-delay:1.2s}
.veil-ic::before{content:"";position:absolute;inset:14px;border-radius:50%;background:rgba(214,178,122,.12);box-shadow:0 0 30px rgba(214,178,122,.35)}
@keyframes veilring{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){.veil,.veil-card{transition:none}.veil-ic span{animation:none;opacity:.5}}

/* voice guide bar (Gemini voice per step, 24 Oct 2026) */
.voicebar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 8px 6px;border-radius:18px;background:rgba(214,178,122,.08);
  box-shadow:0 0 0 1px rgba(214,178,122,.3) inset;max-width:100%;width:fit-content;margin:2px 0 4px}
.vplay{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--grad);color:var(--ink);font:700 .86rem var(--f-body);
  padding:.45rem .85rem;border-radius:999px;cursor:pointer;white-space:nowrap}
.vplay .vpi{width:12px;height:12px}
.voicebar.on .vplay .vpi{display:none}
.voicebar:not(.on) .eq{display:none}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:13px}
.eq i{width:3px;height:100%;border-radius:2px;background:var(--ink);transform-origin:bottom;animation:eq 0.9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}.eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.vprog{order:9;flex-basis:100%;height:3px;border-radius:3px;background:rgba(239,220,179,.15);overflow:hidden}
.vprog i{display:block;height:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .25s linear}
.vmute{border:0;background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--line) inset;color:var(--cream);font:700 .78rem var(--f-body);
  padding:.42rem .7rem;border-radius:999px;cursor:pointer;white-space:nowrap}
.vmute[aria-pressed="true"]{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.eq i{animation:none;transform:scaleY(.7)}}
.vlang{display:inline-flex;padding:2px;border-radius:999px;background:rgba(0,0,0,.25);box-shadow:0 0 0 1px var(--line) inset}
.vlang button{border:0;background:transparent;color:var(--muted);font:700 .74rem var(--f-body);padding:.36rem .6rem;border-radius:999px;cursor:pointer}
.vlang button.on{background:rgba(239,220,179,.16);color:var(--cream)}