/* Store badges (header + page) + Android waitlist popup. Shared by index.html and contact.html; uses each page's color tokens. */

/* store badges: black with a thin grey edge, like the official App Store / Google Play badges, in every theme */
.store{background:#000!important;color:#fff!important;border:1px solid #A6A6A6!important;border-radius:10px;font-family:var(--f-body)}
.store:hover{transform:translateY(-2px)}
.store svg{opacity:1!important}
.store small{opacity:1;font-size:11px;font-weight:500;letter-spacing:.02em}
button.store{font:inherit;font-family:var(--f-body);text-align:left;cursor:pointer}

/* header: the same two badges, smaller */
.navapps{display:flex;gap:8px;margin-left:24px}
.store.sm{min-width:0;height:40px;gap:7px;padding:0 12px 0 9px;border-radius:8px}
.store.sm svg{width:20px;height:20px}
.store.sm small{font-size:8.5px;letter-spacing:.03em}
.store.sm b{font-size:14.5px;line-height:1.05}
@media (max-width:720px){.navapps{margin-left:auto}}
@media (max-width:440px){.store.sm span{display:none}.store.sm{width:40px;padding:0;justify-content:center}}

/* popup */
.wl{
  --wl-edge:var(--card-edge,var(--ink));
  --wl-press:var(--press,color-mix(in srgb,var(--accent) 62%,#000));
  --wl-err:var(--err,#C2362F);
  width:min(480px,calc(100% - 32px));max-width:none;padding:0;border:2px solid var(--wl-edge);border-radius:28px;
  background:var(--surface);color:var(--ink);box-shadow:0 10px 0 var(--wl-edge);overflow:visible;
  font-family:var(--f-body);
}
.wl[open]{animation:wl-in .22s ease-out}
.wl::backdrop{background:rgba(8,17,27,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
@keyframes wl-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.wl-in{position:relative;padding:44px clamp(20px,5vw,36px) 32px;text-align:center}
.wl-cat{position:absolute;left:50%;top:-46px;width:76px;height:auto;transform:translateX(-50%);filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.wl-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer}
.wl-x:hover{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}
.wl-x svg{width:16px;height:16px}
.wl h2{font-family:var(--f-display);font-weight:900;font-size:clamp(26px,5vw,32px);line-height:1.15;margin:0}
.wl h2 em{font-style:normal;color:var(--accent)}
.wl p{color:var(--muted);font-size:16px;line-height:1.55;margin:12px auto 0;max-width:36ch}
.wl-form{display:flex;gap:10px;margin-top:24px}
.wl-form input{flex:1;min-width:0;height:54px;padding:0 16px;border:2px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);font:500 16px var(--f-body);transition:border-color .15s}
.wl-form input::placeholder{color:var(--muted)}
.wl-form input:focus{outline:none;border-color:var(--accent)}
.wl-form input.bad{border-color:var(--wl-err)}
.wl-btn{flex:none;height:54px;padding:0 20px;border:0;border-radius:14px;background:var(--accent);color:var(--on-accent);font:700 17px var(--f-display);cursor:pointer;box-shadow:0 5px 0 var(--wl-press);transition:transform .1s,box-shadow .1s,opacity .15s}
.wl-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--wl-press)}
.wl-btn:disabled{opacity:.7;cursor:progress}
.wl-msg:empty{display:none}
.wl-msg{margin-top:12px!important;font-size:14px!important;color:var(--wl-err)!important}
.wl-done .big{font-family:var(--f-jp);font-weight:900;font-size:40px;color:var(--accent);line-height:1;margin-bottom:12px}
.wl-done .wl-btn{margin-top:24px;width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:460px){.wl-form{flex-direction:column}.wl-form input{flex:none;width:100%}.wl-btn{width:100%}}