:root{--ground:#0B0F17;--accent:#2E7BF6;--accent-d:#1D5FD6;--accent-dd:#174CB0;--ink:#1A2130;--muted:#5A6375;
  --line:#E3E7EE;--soft:#EAF1FE;--err:#B3261E;--card:#fff;--page:#F4F6FA;--ok:#216030;--ok-soft:#EAF4EC;--warn:#8A5A00}
*{box-sizing:border-box}
html{background:var(--ground)}
body{margin:0;min-height:100vh;background:var(--ground);color:var(--ink);line-height:1.5;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.wrap{max-width:520px;margin:0 auto;padding:20px 16px 48px}
.brand{color:#fff;font-weight:700;font-size:20px;letter-spacing:.2px;margin:4px 4px 16px}
.brand span{color:#2E7BF6}
.labnote{background:#FFF6D6;color:#5A4500;border-radius:10px;padding:10px 12px;font-size:13px;margin:0 0 12px}
.card{background:var(--card);border-radius:16px;padding:24px 20px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
@media (min-width:560px){.card{padding:32px 30px}}
.step{color:var(--muted);font-size:13px;margin:0 0 6px;min-height:1.2em}
h1{font-size:24px;line-height:1.25;margin:0 0 6px}
.lede{color:var(--muted);margin:0 0 20px;font-size:15px}
label{display:block;font-size:14px;font-weight:600;margin:14px 0 6px}
label[hidden]{display:none}
.opt{font-weight:400;color:var(--muted)}
input{width:100%;font:inherit;font-size:16px;padding:12px 13px;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--ink);outline:none}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,123,246,.15)}
.acts{display:flex;flex-direction:column;gap:10px;margin-top:18px}
button,.btn{font:inherit;font-size:16px;border-radius:10px;padding:13px 16px;cursor:pointer;border:0;text-align:center;text-decoration:none}
.go{background:var(--accent-d);color:#fff;font-weight:600}
.go:hover{background:var(--accent-dd)}
.go:disabled{opacity:.6;cursor:default}
.skip,.back,.back-sec,.back-cam{background:#fff;color:var(--accent-d);border:1px solid var(--line)}
.skip:hover,.back:hover,.back-sec:hover,.back-cam:hover{border-color:var(--accent)}
.link{background:none;color:var(--accent-d);text-decoration:underline;padding:6px}
.err{color:var(--err);font-size:14px;margin:10px 0 0;min-height:0}
.err:empty{display:none}
.hint{color:var(--muted);font-size:13.5px;margin:8px 0 0}
.hint.ok{color:var(--accent-d);font-weight:600}
.hint.bad{color:var(--err)}
.foot{font-size:14px;color:var(--muted);margin:18px 0 0}
.foot a,.hint a{color:var(--accent-d)}
.closed{background:var(--soft);border:1px solid var(--accent);color:var(--ink);border-radius:10px;padding:14px;font-weight:600;margin:16px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:10px 14px;font-size:15px}
.chip[aria-pressed="true"]{background:var(--soft);border-color:var(--accent);color:var(--accent-d);font-weight:600}
.prefix{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.prefix:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,123,246,.15)}
.prefix span{color:var(--muted);padding:12px 0 12px 13px;font-size:15px;white-space:nowrap}
.prefix input{border:0;box-shadow:none;padding-left:2px;min-width:0}
.sugg{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.sugg button{background:var(--soft);color:var(--accent-d);font-size:14px;padding:8px 12px;border:1px solid var(--line)}
.teamlink{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:16px 0 0}
.tl-title{margin:0;font-size:13px;color:var(--muted)}
.tl-link{margin:2px 0 0;font-weight:600;word-break:break-all}
.teamlink.on{border-color:var(--accent);background:var(--soft)}
.sentto{color:var(--muted);font-size:14px;margin:0}
.choices{display:flex;flex-direction:column;gap:10px}
.choice{display:block;text-align:left;background:#fff;color:var(--ink);border:1px solid var(--line);padding:14px 16px}
.choice b{display:block;font-size:16px}
.choice span{display:block;color:var(--muted);font-size:14px;margin-top:2px;font-weight:400}
.choice:hover,.choice[aria-pressed="true"]{border-color:var(--accent);background:var(--soft)}
.ways{display:flex;flex-direction:column;gap:10px}
.way{background:#fff;color:var(--accent-d);border:1px solid var(--accent);font-weight:600}
.camera video{width:100%;max-height:320px;border-radius:12px;background:#000;margin-top:14px}
.sig{border:1px dashed var(--accent);border-radius:10px;padding:12px 14px;margin-top:14px;font-size:14px}
.key{font-family:ui-monospace,Menlo,monospace;font-size:15px;word-break:break-all;background:var(--soft);padding:8px 10px;border-radius:8px}
.previewlabel{font-size:13px;color:var(--muted);margin:20px 0 6px}
.contact{display:flex;gap:14px;align-items:flex-start;background:var(--ground);border-radius:14px;padding:16px;color:#fff}
.contact .face{width:64px;height:64px;border-radius:50%;flex:0 0 auto;object-fit:cover;border:2px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600}
.contact .nm{font-weight:600;font-size:16px}
.contact .bt{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.contact .bt span{background:#fff;color:var(--accent-d);border-radius:8px;padding:5px 10px;font-size:13px;font-weight:600}
.contact .ln{color:rgba(255,255,255,.8);font-size:12.5px;margin-top:8px}
.standin{border:2px dashed #C99A00;background:#FFF9E6;border-radius:12px;padding:12px 14px}
.standin .tag{display:inline-block;margin:0 0 6px;background:#C99A00;color:#fff;font-size:12px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;border-radius:6px;padding:2px 8px}
.standin p{margin:0;font-size:14px}
.badge{width:64px;height:64px;border-radius:50%;background:var(--soft);color:var(--accent-d);font-size:34px;
  display:flex;align-items:center;justify-content:center;margin:0 0 14px}
.live{margin:16px 0 0}
.live dt{font-size:13px;color:var(--muted);margin-top:12px}
.live dd{margin:2px 0 0;font-weight:600;word-break:break-all}
/* ONBOARD-2: the tiles, the one-time address and the live page */
.tiles{display:flex;flex-direction:column;gap:12px}
.tile{display:block;text-align:left;background:#fff;color:var(--ink);border:1px solid var(--line);padding:18px 18px;border-radius:14px}
.tile b{display:block;font-size:17px}
.tile span{display:block;color:var(--muted);font-size:14px;margin-top:4px;font-weight:400}
.tile.first{border:2px solid var(--green);background:var(--soft)}
.tile:hover{border-color:var(--green)}
.addr{font-family:ui-monospace,Menlo,monospace;font-size:17px;word-break:break-all;background:var(--soft);
  border:1px solid var(--green);border-radius:10px;padding:14px;margin:0;text-align:center;font-weight:600}
.acts.row{flex-direction:row}
.acts.row>*{flex:1}
.ticks{list-style:none;padding:0;margin:18px 0 0}
.ticks li{padding:8px 0 8px 30px;position:relative;font-size:15px;border-bottom:1px solid var(--line)}
.ticks li:before{content:"";position:absolute;left:4px;top:12px;width:14px;height:14px;border-radius:50%;border:2px solid var(--line)}
.ticks li.ok:before{background:var(--green);border-color:var(--green)}
.ticks li.wait:before{border-color:var(--green);border-top-color:transparent;animation:spin 1s linear infinite}
.ticks li.no:before{background:var(--err);border-color:var(--err)}
@keyframes spin{to{transform:rotate(360deg)}}
.checks{width:100%;border-collapse:collapse;font-size:14px}
.checks td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.checks td.res{font-weight:700;white-space:nowrap}
.checks td.res.ok{color:var(--green-d)}
.checks td.res.no{color:var(--err)}
.freebie{background:#FFF9E6;border:1px solid #E7C65A;border-radius:12px;padding:12px 14px;margin-top:14px;font-size:14px}
.freebie h2{font-size:16px;margin:0 0 6px}
.freebie ol{padding-left:20px;margin:6px 0 0}
.pics{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 6px}
.pic{border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:13px;flex:1 1 140px}
.pic img{max-width:100%;max-height:120px;object-fit:contain}
.pic img.face{width:96px;height:96px;border-radius:50%;object-fit:cover}
.pic label{margin:0;font-weight:400;display:flex;gap:6px;align-items:center}
.pic input{width:auto}
.sigbuild{margin-top:18px;border-top:1px solid var(--line);padding-top:10px}
.sigpreview{border:1px solid var(--line);border-radius:10px;padding:14px;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
html,body{background:var(--page)}
.brand{display:flex;align-items:center;color:var(--ground);font-weight:600;font-size:20px;letter-spacing:0;line-height:1;
  margin:-20px 0 18px;padding:12px 4px;background:#fff;box-shadow:0 0 0 100vmax #fff,0 1px 0 100vmax var(--line);clip-path:inset(0 -100vmax -1px)}
.brand .knot{width:30px;height:30px;margin-right:6px;flex:0 0 auto}
.brand span{color:var(--accent);font-weight:300;margin-left:.25em}
.card{box-shadow:0 1px 4px rgba(11,15,23,.08);border:1px solid var(--line)}
.contact{background:#fff;border:1px solid var(--line);color:var(--ink)}
.contact .face{border-color:var(--line);background:var(--soft);color:var(--accent-d)}
.contact .bt span{background:var(--accent-d);color:#fff}
.contact .ln{color:var(--muted)}
.hint.ok,.checks td.res.ok,td.st-paid{color:var(--ok)}
.ticks li.ok:before{background:var(--ok);border-color:var(--ok)}
.headline{border-left-color:var(--ok)}