/* Caution Hot Club · one type size, black and white, pure white app.
   Font: Helvetica World is licensed for desktop use only, so the site uses the system Helvetica
   until a web licence is bought. Swap --f when it is. */
:root{
  --surface:#FFFFFF; --surface-2:#F6F6F6; --ink:#000000; --muted:#8C8C8C; --line:#EEEEEE;
  --accent:#000000; --accent-ink:#FFFFFF; --accent-hover:#262626;
  --hair:rgba(0,0,0,.09); --hair-2:rgba(0,0,0,.16); --glass:rgba(255,255,255,.82);
  --f:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --fs:14px;
  color-scheme:light;
}
*{box-sizing:border-box;font-size:var(--fs)}
html,body{margin:0;background:#FFFFFF;color:var(--ink)}
body{font-family:var(--f);line-height:1.344;letter-spacing:.06em;font-weight:400;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;min-height:100dvh}
h1,h2,h3,p{margin:0;font-weight:inherit}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
a{color:inherit}
.cap{text-transform:uppercase;letter-spacing:.06em}
.muted{color:var(--muted)}
.mono{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

.app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;position:relative}
.scroll{flex:1;padding:calc(env(safe-area-inset-top,0px) + 18px) max(18px,env(safe-area-inset-right,0px)) 28px max(18px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px}
.scroll.has-nav{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.center-col{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px}

.brand{display:flex;align-items:center;gap:9px;text-transform:uppercase}
.logo{height:10px;width:auto;display:block;flex:none;color:var(--ink)}
.head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.btn{display:block;border:0;border-radius:0;padding:14px 16px;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);width:100%;text-align:center;text-decoration:none;transition:background .2s,transform .1s}
.btn:active:not(:disabled){transform:scale(.985)}
.btn:hover:not(:disabled){background:var(--accent-hover)}
.btn.ghost{background:transparent;border:1px solid var(--hair-2);color:var(--ink)}
.btn.ghost:hover:not(:disabled){background:var(--surface-2)}
.btn:disabled{opacity:.25;cursor:not-allowed}
.btn.sm{padding:8px 12px;width:auto}
.link{background:none;border:0;padding:0;color:var(--muted);text-decoration:none;display:inline-block;text-align:left}
.link:hover{color:var(--ink)}
.link.ink{color:var(--ink)}
.u{text-decoration:underline;text-underline-offset:3px}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field .lbl{color:var(--muted)}
.field input{border:1px solid var(--hair-2);background:#fff;border-radius:10px;padding:12px;width:100%;-webkit-appearance:none;appearance:none}
.field input.code{font-variant-numeric:tabular-nums;letter-spacing:.3em;text-align:center}
.check{display:flex;gap:10px;align-items:flex-start;color:var(--muted)}
.check input{margin-top:3px;accent-color:#000;flex:none}
.list{display:flex;flex-direction:column}
.list .r{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.list .r:last-child{border-bottom:0}
.list .r > div{min-width:0}
.list .r .s{display:block;color:var(--muted)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--hair-2)}
.seg button{border:0;background:transparent;padding:10px 4px;text-transform:uppercase;color:var(--muted)}
.seg button[aria-pressed="true"]{background:#000;color:#fff}
.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);border:1px solid var(--hair)}
.note{padding:12px 14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;border-radius:14px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sw{flex:none;width:42px;height:24px;border-radius:12px;border:0;background:#E3E3E3;position:relative;transition:background .2s;padding:0}
.sw i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.sw[aria-checked="true"]{background:#000}
.sw[aria-checked="true"] i{transform:translateX(18px)}

/* receipt card */
.card{position:relative;border-radius:6px;padding:18px 18px 16px;aspect-ratio:1.586/1;display:flex;flex-direction:column;justify-content:flex-start;gap:14px;color:#000;background:#fff;border:1px solid #E2E2E2;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y;transition:transform .35s cubic-bezier(.2,.9,.3,1)}
.card:active{transform:scale(.985)}
.card::before,.card::after{content:"";position:absolute;top:66%;width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid #E2E2E2;transform:translateY(-50%)}
.card::before{left:-10px;clip-path:inset(0 0 0 50%)}
.card::after{right:-10px;clip-path:inset(0 50% 0 0)}
.card .tl{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-transform:uppercase;margin-top:auto;position:relative;z-index:1}
.card .m{color:rgba(0,0,0,.45)}
.goal{position:absolute;left:0;right:0;bottom:0;height:2px;background:#EEEEEE;border-radius:0 0 6px 6px;overflow:hidden}
.goal i{display:block;height:100%;background:#000;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.pts-flash{animation:flash .9s ease}
@keyframes flash{0%,100%{opacity:1}30%{opacity:.35}}
.hint{display:flex;justify-content:center;color:var(--muted)}
.goalrow{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.voucher{border-radius:14px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}

/* bottom nav: words only */
.nav{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:480px;bottom:0;z-index:3;display:flex;justify-content:space-evenly;align-items:center;padding:16px 0 calc(16px + env(safe-area-inset-bottom,0px));border-left:0;border-right:0;border-bottom:0}
.nav button{border:0;background:none;color:var(--muted);padding:4px 0;text-transform:uppercase;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.nav button[aria-pressed="true"]{color:var(--ink)}
.nav .badge{color:var(--ink)}
.nav .badge::before{content:"("}
.nav .badge::after{content:")"}

/* sheets */
.scrim{position:fixed;inset:0;z-index:5;background:rgba(0,0,0,.12);animation:fade .25s ease}
.sheet{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:480px;bottom:0;z-index:6;border-radius:26px 26px 0 0;padding:10px 20px calc(26px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;animation:up .42s cubic-bezier(.2,1.1,.3,1);border-bottom:0;box-shadow:0 -20px 40px -20px rgba(0,0,0,.15);max-height:92dvh;overflow:auto}
.sheet .grab{width:38px;height:4px;border-radius:2px;background:rgba(0,0,0,.15);align-self:center;margin-bottom:4px}
.sheet.center{align-items:center;text-align:center}
.qrbox{background:#fff;border-radius:16px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px;color:#000;border:1px solid var(--hair)}
.qrbox .q{width:230px;height:230px;max-width:70vw;max-height:70vw}
.qrbox .q svg{width:100%;height:100%;display:block}
@keyframes up{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 10px);transform:translate(-50%,-160%);width:calc(100% - 20px);max-width:460px;z-index:9;border-radius:20px;padding:13px 15px;transition:transform .45s cubic-bezier(.2,1.1,.3,1);box-shadow:0 14px 30px rgba(0,0,0,.12)}
.toast.show{transform:translate(-50%,0)}

/* shop + rewards */
.rw{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rw button{border:1px solid var(--hair);background:linear-gradient(180deg,#FFFFFF,#F7F7F7);border-radius:14px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:18px;justify-content:space-between;min-height:92px;transition:border-color .2s,transform .1s}
.rw button:active{transform:scale(.98)}
.rw button.on{border-color:#000}
.ach .r{align-items:flex-start}
.prog{display:flex;gap:3px;margin-top:7px}
.prog i{width:12px;height:3px;background:var(--line)}
.prog i.on{background:#000}
.claimcol{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.claimcol .btn.sm{padding:7px 12px}
.who{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px}
.av{width:40px;height:40px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;flex:none;text-transform:uppercase}
.who .bal{margin-left:auto;text-align:right}
.steps{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{display:flex;gap:12px;align-items:center;padding:12px;counter-increment:s;border-radius:12px}
.steps li::before{content:counter(s);flex:none;width:24px;height:24px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center}
.steps svg{width:18px;height:18px;vertical-align:-3px}
.linkcopy{display:flex;gap:8px;align-items:center;border:1px solid var(--hair);border-radius:10px;padding:6px 6px 6px 12px;width:100%}
.linkcopy code{flex:1;min-width:0;font-family:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.opts button,.pick{border:1px solid var(--hair-2);background:transparent;padding:10px 4px;text-transform:uppercase}
.opts button[aria-pressed="true"],.pick[aria-pressed="true"]{background:#000;color:#fff;border-color:#000}
.opts button:disabled{opacity:.3;cursor:not-allowed}
.spin{width:18px;height:18px;border:1px solid #000;border-right-color:transparent;border-radius:50%;animation:rot .8s linear infinite;align-self:center}
@keyframes rot{to{transform:rotate(360deg)}}

/* counter */
.scanbtn{border:1px solid rgba(0,0,0,.07);border-radius:18px;padding:30px 18px;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;color:#000;text-transform:uppercase;
  background:linear-gradient(155deg,#FFFFFF 0%,#F2F2F2 46%,#FAFAFA 68%,#EBEBEB 100%);box-shadow:inset 0 1px 0 #fff,0 22px 40px -26px rgba(0,0,0,.28)}
.scanbtn svg{width:48px;height:48px}
.finder{flex:1;min-height:360px;border-radius:18px;background:#0a0a0a;position:relative;overflow:hidden;display:grid;place-items:center;color:#fff}
.finder video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.finder .box{width:62%;aspect-ratio:1;position:relative;z-index:1}
.finder .box i{position:absolute;width:34px;height:34px;border:2px solid #fff}
.finder .box i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.finder .box i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.finder .box i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 12px}
.finder .box i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 12px 0}
.finder p{position:absolute;bottom:18px;left:0;right:0;text-align:center;z-index:1;padding:0 16px}
.amount{text-align:center;display:flex;flex-direction:column;gap:2px;padding:8px 0;border-block:1px solid var(--line)}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.keys button{border:0;border-radius:12px;background:var(--surface-2);padding:13px 0;font-variant-numeric:tabular-nums}
.keys button:active{background:#E6E6E6}
.extras{display:flex;gap:6px;flex-wrap:wrap}
.extras .pick{padding:7px 10px}
.done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.done .ok{width:64px;height:64px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;animation:pop .5s cubic-bezier(.2,.9,.3,1.4)}
.done .ok svg{width:30px;height:30px}
.done .note{width:100%;text-align:left}
@keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}
.err{text-align:center;color:var(--muted)}
.pindots{display:flex;gap:14px}
.pindots i{width:12px;height:12px;border-radius:50%;border:1px solid #000}
.pindots i.on{background:#000}
.pindots.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* owner */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{padding:12px;display:flex;flex-direction:column;gap:2px;border-radius:14px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
b,strong{font-weight:400}
.list .r > .link,.list .r > a.link{white-space:nowrap;flex:none}