/* JustLink - gold + ink + paper (from JD Studio). Gold is a fill, never text on paper. */
:root{
  --bg:#F2F1EE; --surface:#FBFAF8; --surface2:#E8E6E0; --fg:#1E1E21; --muted:#66645F;
  --line:#DAD7D0; --line-strong:#B9B6AD;
  --gold:#F2C062; --ink:#1E1E21;
  --btn-bg:#1E1E21; --btn-fg:#F2F1EE;
  --good:#2E7D5B; --warn:#9A5A12; --bad:#B3402F; --logo-gap:#F2F1EE;
  --f-display:'Bricolage Grotesque','Noto Sans SC',system-ui,sans-serif;
  --f-body:'Instrument Sans','Noto Sans SC',system-ui,sans-serif;
  --f-mono:'DM Mono',ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141416; --surface:#1D1D20; --surface2:#2A2A2E; --fg:#F2F1EE; --muted:#A5A39C;
    --line:#32323A; --line-strong:#52525A; --btn-bg:#F2C062; --btn-fg:#1E1E21;
    --good:#5CC39A; --warn:#E3A459; --bad:#E88876; --logo-gap:#141416; color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:400 15px/1.55 var(--f-body);margin:0;min-height:100vh}
button,input{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-display);margin:0;letter-spacing:-.015em;line-height:1.1;text-wrap:balance}
p{margin:0}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono)}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
[hidden]{display:none!important}

/* top bar */
.nav{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0)}
.nav-in{max-width:880px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px}
.brand{display:flex;align-items:center;gap:9px;background:none;border:0;padding:0;cursor:pointer;text-decoration:none;color:inherit}
.wm{font:800 21px/1 var(--f-display);letter-spacing:-.03em}
.sp{flex:1}
.pillbtn{background:none;border:1px solid var(--line-strong);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:13px;color:var(--muted)}
.pillbtn b{color:var(--fg)}
.page{max-width:560px;margin:0 auto;padding:22px 16px 80px}
.page.wide{max-width:880px}

/* buttons + fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.ghost{background:transparent;border-color:var(--fg);color:var(--fg)}
.btn.sm{padding:8px 14px;font-size:13px}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:13px;font-weight:600}
.field input{width:100%;padding:12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--fg);font-size:16px}
.err{color:var(--bad);font-size:13px;min-height:1em}
.phone-in{display:flex;min-width:0}
.phone-in i{font:500 15px var(--f-mono);font-style:normal;display:grid;place-items:center;padding:0 12px;border:1px solid var(--line-strong);border-right:0;border-radius:10px 0 0 10px;background:var(--surface2)}
.phone-in input{border-radius:0 10px 10px 0;min-width:0}
.row .btn{flex:none;white-space:nowrap}
.codein{letter-spacing:.35em;font:500 22px var(--f-mono);text-align:center}

.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:10px}
.eyebrow{font:500 12px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.hero h1{font-size:clamp(2rem,9vw,3rem);font-weight:800;margin:10px 0 12px}
.hero p{color:var(--muted);font-size:17px}

/* stamp card face */
.face{background:var(--cbg);color:var(--cfg);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px;text-align:left;width:100%;border:0;cursor:pointer}
.face.static{cursor:default}
.face-top{display:flex;gap:11px;align-items:center}
.face-badge{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--cfg) 16%,transparent);font:700 14px var(--f-display);flex:none}
.face-name{font:700 17px/1.15 var(--f-display)}
.face-cat{font-size:12px;opacity:.75}
.face-mid{display:flex;align-items:baseline;gap:6px}
.face-n{font:800 44px/1 var(--f-display);letter-spacing:-.03em}
.face-of{font:500 15px var(--f-mono);opacity:.7}
.face-bar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--cfg) 22%,transparent);overflow:hidden}
.face-bar i{display:block;height:100%;background:var(--cfg);border-radius:99px}
.face-reward{font-size:13px;font-weight:600}
.tag{position:absolute;top:14px;right:14px;background:var(--fg)!important;color:var(--bg)!important;border:0!important}
.facewrap{position:relative}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font:600 12px var(--f-body);background:var(--surface2);color:var(--fg)}
.pill.ready{background:var(--gold);color:var(--ink)}
.pill.wait{background:transparent;border:1px solid var(--warn);color:var(--warn)}
.pill.flag{background:transparent;border:1px solid var(--bad);color:var(--bad)}
.stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.st{aspect-ratio:1;border-radius:50%;border:1.5px dashed var(--line-strong);display:grid;place-items:center;color:var(--muted);font:500 13px var(--f-mono)}
.st.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.st svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.st.pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.3)}100%{transform:scale(1)}}

.big{font:800 54px/1 var(--f-mono);letter-spacing:.12em;text-align:center;padding:14px 0}
.center{text-align:center}
.notice{border-radius:14px;padding:14px 16px;background:var(--surface2);font-size:14px}
.notice.good{border-left:4px solid var(--good)}
.notice.warn{border-left:4px solid var(--warn)}
.notice.bad{border-left:4px solid var(--bad)}
.back{background:none;border:0;padding:0;color:var(--muted);cursor:pointer;font-size:14px}
.spin{width:22px;height:22px;border:3px solid var(--line-strong);border-top-color:var(--fg);border-radius:50%;animation:rot .8s linear infinite;margin:0 auto}
@keyframes rot{to{transform:rotate(360deg)}}

/* desk */
.deskhead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.deskhead h1{font-size:clamp(1.6rem,6vw,2.3rem)}
.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.subtab{background:none;border:0;padding:10px 14px;cursor:pointer;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;position:relative}
.subtab[aria-current="page"]{color:var(--fg);border-bottom-color:var(--fg)}
.badge{background:var(--gold);color:var(--ink);border-radius:99px;font:600 11px var(--f-mono);padding:1px 7px;margin-left:4px}
.list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.li:last-child{border-bottom:0}
.li .grow{flex:1;min-width:140px}
.li b{font-weight:600}
.li small{color:var(--muted);display:block}
.flags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.codebig{font:700 26px var(--f-mono);letter-spacing:.14em}
.sec-h{display:flex;justify-content:space-between;align-items:center;margin:22px 0 10px}
.sec-h h2{font-size:18px}
.empty{padding:22px;text-align:center;color:var(--muted);font-size:14px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:11px 18px;border-radius:999px;font-size:14px;z-index:50;max-width:92vw;text-align:center}
.linkbox{font:500 14px var(--f-mono);background:var(--surface2);border-radius:12px;padding:14px;word-break:break-all}
@media (max-width:640px){
  .subtabs{position:fixed;left:0;right:0;bottom:0;margin:0;background:var(--bg);border-top:1px solid var(--line);border-bottom:0;z-index:30;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0));justify-content:space-around}
  .subtab{flex:1;text-align:center;border-bottom:0;padding:10px 4px;border-radius:12px;font-size:13px}
  .subtab[aria-current="page"]{background:var(--fg);color:var(--bg)}
  .page.wide{padding-bottom:96px}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom,0))}
}

.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden}
.seg button{background:none;border:0;padding:6px 11px;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg);font-weight:600}

.pillbtn{white-space:nowrap}

.about{padding-top:30px}
.about h1{font-size:34px;margin:10px 0 12px}
.about .lead{font-size:17px;color:var(--muted);margin:0 0 8px}
.about section{margin-top:26px}
.about h2{font-size:20px;margin-bottom:8px}
.about p{margin:0 0 10px}
.about a:not(.btn){color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.about .btn{text-decoration:none}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:14px 0 0;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.facts dt{color:var(--muted)}
.facts dd{margin:0;overflow-wrap:anywhere}
.about .row{margin-top:30px}
@media(max-width:480px){.facts{grid-template-columns:1fr}.facts dd{margin-bottom:8px}}



/* ---------- website (landing page) ---------- */
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
body[data-route=land] .nav-in{max-width:1120px;padding-inline:20px}
.navlinks{display:flex;gap:22px;margin-left:26px}
.navlinks a{color:var(--muted);text-decoration:none;font-weight:600;font-size:14px}
.navlinks a:hover{color:var(--fg)}
@media(max-width:860px){.navlinks{display:none!important}}
@media(max-width:620px){body[data-route=land] #out{display:none}}
.btn.sm{padding:8px 14px;font-size:13px;min-height:0}
.btn{text-decoration:none}
.page.land{max-width:none;padding:0}
.wrapx{flex-wrap:wrap}
.small{font-size:13px}
.land .hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:56px 72px}
.land .hero h1{font-size:clamp(2.3rem,5.4vw,4rem);margin:12px 0 16px;line-height:1.04}
.land .hero .lead{font-size:18px;color:var(--muted);max-width:52ch;margin:0 0 10px}
.land .hero-copy{gap:6px}
@media(max-width:900px){.land .hero-in{grid-template-columns:1fr;gap:34px;padding-block:34px 52px}}
.stage{position:relative;display:grid;place-items:center;min-width:0;padding-block:14px}
.disc{position:absolute;inset:0;margin:auto;width:min(100%,430px);aspect-ratio:1;border-radius:50%;background:var(--gold)}
.phone{position:relative;width:min(100%,310px);background:var(--surface);color:var(--fg);border:9px solid #1E1E21;border-radius:36px;padding:18px 14px 16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 0 0 1px var(--line-strong),0 30px 50px -24px rgba(30,30,33,.55)}
.phone .face{padding:14px}
.phone .face-n{font-size:34px}
.ph-head{display:flex;justify-content:space-between;align-items:center;font:700 15px var(--f-display)}
.tagl{font:500 11px var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.sec{padding-block:64px}
.sec.alt{background:var(--surface2)}
.sec h2{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:700;margin-top:12px;max-width:24ch}
.how{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;margin-top:32px;align-items:stretch}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px;min-width:0}
.panel h3{font-size:22px;margin-bottom:18px}
.items{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.item{display:flex;gap:14px}
.item .num{width:26px;height:26px;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center;font:500 12px var(--f-mono);flex:none;margin-top:1px}
.item b{display:block;font-weight:600}
.item div span{color:var(--muted);font-size:14px}
.nfc-node{background:var(--gold);color:var(--ink);border-radius:22px;padding:24px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;width:140px}
.nfc-node svg{width:44px;height:44px}
.nfc-node b{font:700 18px var(--f-display)}
@media(max-width:900px){.how{grid-template-columns:1fr}.nfc-node{width:auto;flex-direction:row;padding:16px}}
.cats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:32px;border-top:1px solid var(--line-strong)}
.cat{padding:22px 20px 22px 0;border-bottom:1px solid var(--line-strong)}
.cat b{display:block;font:600 19px var(--f-display);margin-bottom:6px}
.cat span{color:var(--muted);font-size:14px}
@media(max-width:760px){.cats{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.cats{grid-template-columns:1fr}}
.pilot{background:#1E1E21;color:#F2F1EE;padding-block:60px}
.pilot .eyebrow{color:var(--gold)}
.pilot h2{font-size:clamp(1.8rem,4vw,2.7rem);margin-top:12px;max-width:20ch}
.pilot-in{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.pilot p{opacity:.8;margin:16px 0 0;max-width:48ch}
.pilot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.pilot li{display:flex;gap:12px;align-items:center;font-weight:600}
.pilot li svg{color:var(--gold);flex:none}
@media(max-width:760px){.pilot-in{grid-template-columns:1fr;gap:26px}}
.apply{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.apply>*{min-width:0}
@media(max-width:900px){.apply{grid-template-columns:1fr;gap:26px}}
.field select,.field textarea{width:100%;padding:12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--fg);font:inherit;font-size:16px}
.field textarea{resize:vertical}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.okbox h3{font-size:24px}
.face-pw{display:flex;align-items:center;gap:6px;font-size:11px;opacity:.72;margin-top:2px}
.face-pw b{font-weight:700}
.foot{max-width:none;border-top:1px solid var(--line);padding:26px 16px 96px;text-align:center}
.foot-in{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.foot a{color:var(--muted);font-size:13px;text-decoration:none}
.foot a:hover{color:var(--fg)}
.foot p{margin:10px 0 0;font-size:12px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}