/* ===================================================================
   BEACON — Kingon registration UI mockups (static, mock data)
   Mobile-first (QR scan). Kingon brand: deep blue + oxygen cyan.
   Type: Fraunces (display) / Hanken Grotesk (UI) / Geist Mono (serials)
   =================================================================== */
:root{
  --navy:#00357a; --navy-700:#0a4a9c; --navy-900:#062a5e;
  --ink:#0f1b2d; --ink-soft:#5a6b82; --ink-faint:#8794a7;
  --air:#eef5fd; --air-2:#dcebfb; --air-line:#e2eaf4;
  --cyan:#10b3c6; --cyan-soft:#e2f6f8;
  --green:#0f7a48; --green-bg:#e4f5ec;
  --amber:#9a6b00; --amber-bg:#fbf0d6;
  --red:#b42330; --red-bg:#fbe7e8;
  --line:#e6ecf4; --card:#ffffff; --screen-bg:#f3f7fc;
  --radius:18px; --shadow:0 1px 2px rgba(15,27,45,.05), 0 8px 24px rgba(15,27,45,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:"Hanken Grotesk",system-ui,sans-serif; color:var(--ink);
  background:#0a1830;
  background-image:
    radial-gradient(1200px 700px at 12% -8%, #173a6e 0%, transparent 55%),
    radial-gradient(1100px 700px at 100% 0%, #0e2c57 0%, transparent 50%),
    linear-gradient(180deg, #0a1830 0%, #060f22 100%);
  background-attachment:fixed;
}
/* faint grid + grain over the board */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(900px 600px at 50% 12%, #000 0%, transparent 80%);
          mask-image:radial-gradient(900px 600px at 50% 12%, #000 0%, transparent 80%);
}

/* ---------- gallery chrome ---------- */
.board{position:relative; z-index:1; max-width:1320px; margin:0 auto; padding:48px 24px 90px}
.masthead{text-align:center; color:#eaf2ff; margin-bottom:14px}
.masthead .kicker{
  font-family:"Geist Mono",monospace; font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:#7fa8df; margin:0 0 14px;
}
.masthead h1{
  font-family:"Fraunces",serif; font-weight:600; font-size:clamp(1.9rem,4.4vw,3rem);
  margin:0 0 12px; line-height:1.05; letter-spacing:-.01em;
}
.masthead p{max-width:640px; margin:0 auto; color:#a9c0e0; font-size:1.02rem; line-height:1.6}
.legend{display:flex; flex-wrap:wrap; gap:8px 10px; justify-content:center; margin:22px auto 0; max-width:760px}
.legend span{
  font-size:.78rem; color:#bcd0ec; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  padding:5px 11px; border-radius:999px; font-weight:500;
}
.legend b{color:#fff; font-weight:600}

.grid{
  margin-top:54px; display:grid; gap:30px 26px;
  grid-template-columns:repeat(auto-fill, minmax(348px,1fr));
  align-items:start;
}
.plate{display:flex; flex-direction:column; gap:16px}
.plate-head{color:#dde9fb}
.plate-head .pn{
  display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 8px;
  font-family:"Geist Mono",monospace; font-size:.78rem; font-weight:600; color:#0a1830;
  background:#7fc7d4; border-radius:7px; margin-right:10px;
}
.plate-head h2{display:inline; font-family:"Hanken Grotesk"; font-size:1.06rem; font-weight:600; letter-spacing:-.01em}
.plate-head p{margin:9px 0 0; font-size:.86rem; line-height:1.5; color:#9fb6d8}
.plate-head .tag{
  display:inline-block; margin-top:9px; font-size:.7rem; font-weight:600; letter-spacing:.04em;
  padding:3px 9px; border-radius:6px; background:rgba(127,199,212,.14); color:#9bdfe9; border:1px solid rgba(127,199,212,.25);
}

/* ---------- device frame ---------- */
.device{
  width:100%; max-width:380px; margin:0 auto; background:#0c1424;
  border-radius:46px; padding:11px; box-shadow:0 30px 60px -22px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.05);
}
.screen{
  position:relative; background:var(--screen-bg); border-radius:36px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.statusbar{
  position:relative; height:42px; display:flex; align-items:center; justify-content:space-between;
  padding:0 26px; font-size:.78rem; font-weight:600; color:var(--ink); background:#fff;
}
.statusbar .nub{position:absolute; left:50%; top:9px; transform:translateX(-50%); width:96px; height:23px; background:#0c1424; border-radius:0 0 16px 16px}
.statusbar .ic{display:flex; gap:5px; align-items:center}
.statusbar svg{display:block}

/* ---------- app shell ---------- */
.app{padding:0 0 20px}
.appbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px 12px; background:#fff; border-bottom:1px solid var(--line);
}
.logo{display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:.12em; font-size:.96rem; color:var(--navy)}
.logo img{height:21px; width:auto; display:block}
.logo .o{
  width:15px; height:15px; border-radius:50%; position:relative;
  background:radial-gradient(circle at 35% 30%, #54d6e6, var(--cyan) 60%, #0a8fa0);
  box-shadow:0 0 0 3px rgba(16,179,198,.18);
}
.appbar .sub{font-size:.74rem; color:var(--ink-faint); font-weight:500; letter-spacing:.02em}

.body{padding:22px 20px 4px}

/* ---------- hero ---------- */
.hero{
  position:relative; margin:2px -4px 4px; border-radius:22px; overflow:hidden;
  background:
    radial-gradient(120% 95% at 50% 12%, #ffffff 0%, #eaf4fe 42%, #dcecfb 100%);
  padding:18px 12px 8px; min-height:210px; display:grid; place-items:center;
}
.hero .halo{
  position:absolute; width:230px; height:230px; left:50%; top:54%; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, rgba(16,179,198,.20) 0%, rgba(16,179,198,0) 62%);
  animation:breathe 6s ease-in-out infinite;
}
.hero .ring{position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); border:1px solid rgba(0,53,122,.10); border-radius:50%}
.hero .ring.r1{width:150px;height:150px} .hero .ring.r2{width:208px;height:208px} .hero .ring.r3{width:266px;height:266px}
@keyframes breathe{0%,100%{opacity:.65;transform:translate(-50%,-50%) scale(.94)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.hero img{position:relative; max-height:180px; width:auto; max-width:78%; object-fit:contain; filter:drop-shadow(0 16px 22px rgba(8,40,90,.20)); animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* fallback silhouette */
.hero.fallback{background:radial-gradient(120% 95% at 50% 18%, #fff 0%, #eef3fa 55%, #e3ebf5 100%)}
.silho{position:relative; width:120px; height:150px; display:grid; place-items:center; color:#a9bdd8}
.silho svg{width:120px;height:120px}
.silho .cap{position:absolute; bottom:-6px; font-size:.7rem; color:var(--ink-faint); font-weight:500}

/* ---------- text blocks ---------- */
.eyebrow{font-family:"Geist Mono",monospace; font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--cyan); margin:18px 0 8px; font-weight:600}
.pname{font-family:"Fraunces",serif; font-weight:600; font-size:1.62rem; line-height:1.08; letter-spacing:-.015em; margin:0 0 6px; color:var(--ink)}
.pcat{margin:0 0 14px; color:var(--ink-soft); font-size:.92rem}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:600; padding:5px 11px; border-radius:999px; letter-spacing:.01em}
.chip .d{width:7px; height:7px; border-radius:50%}
.chip-green{background:var(--green-bg); color:var(--green)} .chip-green .d{background:var(--green)}
.chip-amber{background:var(--amber-bg); color:var(--amber)} .chip-amber .d{background:var(--amber)}
.chip-grey{background:#eef1f6; color:#5a6b82} .chip-grey .d{background:#9aa7ba}
.chip-cyan{background:var(--cyan-soft); color:#0a7f8e} .chip-cyan .d{background:var(--cyan)}

/* ---------- passport rows ---------- */
.passport{margin:0 0 18px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; overflow:hidden}
.passport .row{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line)}
.passport .row:last-child{border-bottom:0}
.passport dt{margin:0; color:var(--ink-soft); font-size:.85rem; font-weight:500}
.passport dd{margin:0; text-align:right; font-weight:600; font-size:.92rem; color:var(--ink)}
.passport dd.mono{font-family:"Geist Mono",monospace; font-weight:500; letter-spacing:.02em}

/* ---------- warranty bar ---------- */
.warranty{margin:0 0 22px; padding:15px 16px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,#fff, #fbfdff)}
.warranty .wh{display:flex; justify-content:space-between; align-items:center; margin-bottom:11px}
.warranty .wh .lbl{display:flex; align-items:center; gap:7px; font-weight:600; font-size:.86rem; color:var(--ink)}
.warranty .wh .rem{font-size:.78rem; font-weight:600; color:var(--green)}
.warranty .wh .rem.exp{color:var(--amber)}
.track{position:relative; height:8px; border-radius:999px; background:#e9eff7; overflow:hidden}
.fill{position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg,var(--cyan),#39c9d9)}
.fill.exp{background:linear-gradient(90deg,#d8a23a,#c98a17)}
.wfoot{display:flex; justify-content:space-between; margin-top:9px; font-size:.74rem; color:var(--ink-faint); font-weight:500}

/* ---------- buttons & links ---------- */
.btn{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:15px 18px; border-radius:14px;
  font-family:"Hanken Grotesk"; font-size:1rem; font-weight:600; text-decoration:none; cursor:pointer; border:0; transition:transform .12s ease, box-shadow .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg,var(--navy-700),var(--navy)); color:#fff; box-shadow:0 10px 22px -10px rgba(0,53,122,.7)}
.btn-primary:hover{box-shadow:0 14px 26px -10px rgba(0,53,122,.75)}
.btn-ghost{background:#fff; color:var(--navy); border:1.5px solid #cfdcee}
.btn-ghost:hover{background:#f6f9fe}
.btn-cyan{background:linear-gradient(180deg,#16bccf,#0a93a4); color:#fff; box-shadow:0 10px 22px -10px rgba(16,179,198,.7)}
.btnrow{display:flex; flex-direction:column; gap:10px; margin-top:4px}
.btn-sub{display:block; text-align:center; margin-top:11px; font-size:.82rem; color:var(--ink-faint)}

.links{list-style:none; margin:20px 0 0; padding:0; border-top:1px solid var(--line)}
.links li a{display:flex; align-items:center; gap:13px; padding:14px 2px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line); font-size:.93rem; font-weight:500}
.links li:last-child a{border-bottom:0}
.links .li-ic{width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:10px; background:var(--air); color:var(--navy)}
.links .li-tx{flex:1} .links .li-tx small{display:block; color:var(--ink-faint); font-weight:500; font-size:.76rem; margin-top:1px}
.links .li-ch{color:var(--ink-faint)}

.appfoot{margin:22px 20px 4px; padding-top:16px; border-top:1px solid var(--line); display:flex; align-items:center; gap:9px; font-size:.74rem; color:var(--ink-faint); line-height:1.4}
.appfoot svg{flex:none; color:var(--green)}

/* ---------- product strip (auth/confirm/amend headers) ---------- */
.pstrip{display:flex; align-items:center; gap:13px; padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:20px}
.pstrip .thumb{width:54px; height:54px; flex:none; border-radius:12px; background:radial-gradient(circle at 50% 35%,#fff,#e6f0fb); display:grid; place-items:center; overflow:hidden}
.pstrip .thumb img{max-width:84%; max-height:84%; object-fit:contain}
.pstrip .meta b{display:block; font-size:.92rem; font-weight:600; line-height:1.2}
.pstrip .meta span{font-family:"Geist Mono",monospace; font-size:.76rem; color:var(--ink-soft)}

/* ---------- generic card / form ---------- */
.h-lead{font-family:"Fraunces",serif; font-weight:600; font-size:1.4rem; line-height:1.12; margin:4px 0 8px; letter-spacing:-.01em}
.p-lead{margin:0 0 18px; color:var(--ink-soft); font-size:.92rem; line-height:1.5}
.field{margin:0 0 14px}
.field label{display:block; font-size:.8rem; font-weight:600; color:var(--ink-soft); margin-bottom:6px}
.field input{width:100%; padding:13px 14px; border:1.5px solid #d4deec; border-radius:12px; font-family:"Hanken Grotesk"; font-size:1rem; color:var(--ink); background:#fff}
.field input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(16,179,198,.15)}
.field.mono input{font-family:"Geist Mono",monospace; letter-spacing:.06em}
.note{display:flex; gap:9px; align-items:flex-start; font-size:.82rem; line-height:1.45; color:var(--ink-soft); background:var(--air); border-radius:12px; padding:11px 13px; margin:14px 0}
.note svg{flex:none; margin-top:1px; color:var(--navy)}
.alert{display:flex; gap:9px; align-items:flex-start; font-size:.85rem; line-height:1.45; color:var(--red); background:var(--red-bg); border:1px solid #f1c4c8; border-radius:12px; padding:11px 13px; margin:0 0 16px; font-weight:500}
.alert svg{flex:none; margin-top:1px}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}

/* ---------- centered states (notfound / nolink) ---------- */
.state{padding:46px 26px 40px; text-align:center}
.state .icwrap{width:74px; height:74px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center}
.state.err .icwrap{background:var(--red-bg); color:var(--red)}
.state.info .icwrap{background:var(--air); color:var(--navy)}
.state.ok .icwrap{background:var(--green-bg); color:var(--green)}
.state h2{font-family:"Fraunces",serif; font-weight:600; font-size:1.5rem; margin:0 0 10px; letter-spacing:-.01em}
.state p{margin:0 auto 8px; color:var(--ink-soft); font-size:.93rem; line-height:1.55; max-width:280px}
.state .ser{font-family:"Geist Mono",monospace; background:#eef3fa; padding:2px 8px; border-radius:6px; font-size:.85rem; color:var(--ink)}
.state .acts{margin-top:24px; display:flex; flex-direction:column; gap:10px}

/* ---------- success ---------- */
.success-top{background:linear-gradient(180deg,#0a4a9c,#00357a); color:#fff; padding:34px 22px 26px; text-align:center; position:relative; overflow:hidden}
.success-top::after{content:""; position:absolute; inset:0; background:radial-gradient(220px 120px at 50% 0%, rgba(16,179,198,.45), transparent 70%)}
.success-top .badge{position:relative; width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:rgba(255,255,255,.14); display:grid; place-items:center; border:1px solid rgba(255,255,255,.3)}
.success-top h2{position:relative; font-family:"Fraunces",serif; font-weight:600; font-size:1.55rem; margin:0 0 6px}
.success-top p{position:relative; margin:0; color:#bfe0ff; font-size:.9rem}
.svc{display:flex; align-items:center; gap:13px; padding:15px 16px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; margin:18px 0}
.svc .ic{width:42px;height:42px;flex:none;border-radius:12px;background:var(--cyan-soft);color:#0a7f8e;display:grid;place-items:center}
.svc b{display:block; font-size:1rem; line-height:1.2}
.svc span{font-size:.8rem; color:var(--ink-faint)}

.scrim{height:18px}

/* ---------- revision-2 additions ---------- */
.email-blue{color:#1769d6; font-weight:600}
.pstrip .meta .ser-line{font-family:"Hanken Grotesk"; font-size:.76rem; color:var(--ink-soft)}
.pstrip .meta .ser-line i{font-family:"Geist Mono",monospace; font-style:normal; color:var(--ink); letter-spacing:.02em}
/* camera / QR scanner screen */
.cam{position:relative; background:#0b1016; min-height:548px; display:flex; flex-direction:column; color:#fff}
.cam .cam-top{display:flex; align-items:center; justify-content:space-between; padding:15px 18px; position:relative; z-index:2}
.cam .cam-top a{color:#fff; font-size:.9rem; font-weight:600; text-decoration:none}
.cam .cam-top .t{font-size:.92rem; font-weight:600; color:#dfe7f2}
.cam .view{position:relative; flex:1; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(120% 80% at 50% 40%, #243244 0%, #131a24 60%, #0b1016 100%)}
.cam .frame{position:relative; width:208px; height:208px}
.cam .frame i{position:absolute; width:34px; height:34px; border:3px solid var(--cyan)}
.cam .frame i.tl{top:0;left:0;border-right:0;border-bottom:0;border-radius:9px 0 0 0}
.cam .frame i.tr{top:0;right:0;border-left:0;border-bottom:0;border-radius:0 9px 0 0}
.cam .frame i.bl{bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 9px}
.cam .frame i.br{bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 9px 0}
.cam .scan{position:absolute; left:7px; right:7px; top:8px; height:2px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); box-shadow:0 0 12px var(--cyan); animation:scanmove 2.4s ease-in-out infinite}
@keyframes scanmove{0%,100%{transform:translateY(0)}50%{transform:translateY(188px)}}
.cam .hint{position:absolute; bottom:120px; left:0; right:0; text-align:center; font-size:.85rem; line-height:1.45; color:#c4d0e0; padding:0 34px}
.cam .cam-bottom{position:relative; z-index:2; padding:16px 18px 26px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center}
.cam .album{justify-self:start; display:flex; flex-direction:column; align-items:center; gap:6px; color:#dfe7f2; text-decoration:none; font-size:.72rem; font-weight:600}
.cam .album .ph{width:48px; height:48px; border-radius:13px; background:#1c2738; border:1px solid #2c3a4f; display:grid; place-items:center}
.cam .shutter{justify-self:center; width:62px; height:62px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.28), 0 0 0 6px #0b1016}
/* Inline scanner: the camera lives inside the page card (not a full-screen takeover). */
.cam.cam-inline{min-height:0; height:308px; border-radius:18px; overflow:hidden; margin:6px 0 2px; box-shadow:0 8px 26px rgba(11,16,22,.16)}
.cam.cam-inline .view{flex:1; min-height:0}
.cam.cam-inline .hint{bottom:12px}
/* in-app info / FAQ article */
.art{margin-top:4px}
.art h3{font-size:.98rem; font-weight:700; color:var(--ink); margin:18px 0 6px}
.art p{font-size:.92rem; line-height:1.55; color:var(--ink-soft); margin:0 0 6px}
.art p.q{font-weight:700; color:var(--ink); margin:16px 0 4px}
.art ul{margin:6px 0 8px; padding-left:20px}
.art li{font-size:.92rem; line-height:1.5; color:var(--ink-soft); margin:5px 0}
.art b{color:var(--ink); font-weight:650}
/* modal / prompt sheet */
.modal-scrim{position:absolute; inset:0; z-index:5; background:rgba(8,16,30,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); display:flex; align-items:flex-end; justify-content:center; padding:12px}
.modal{background:#fff; border-radius:22px; width:100%; padding:22px 20px 18px; box-shadow:0 22px 50px rgba(0,0,0,.42); text-align:center}
.modal .m-ic{width:58px; height:58px; margin:2px auto 14px; border-radius:50%; background:var(--air); color:var(--navy); display:grid; place-items:center}
.modal h3{font-family:"Fraunces",serif; font-weight:600; font-size:1.26rem; margin:0 0 9px; color:var(--ink); letter-spacing:-.01em}
.modal p{margin:0 0 18px; font-size:.89rem; line-height:1.5; color:var(--ink-soft)}
/* appbar back button (flow screens) */
.appbar .lead{display:flex; align-items:center; gap:8px}
.backbtn{display:grid; place-items:center; width:30px; height:30px; margin-left:-4px; border-radius:9px; color:var(--navy); text-decoration:none}
.backbtn:hover{background:var(--air)}

@media (max-width:420px){ .board{padding:30px 12px 60px} .grid{grid-template-columns:1fr} }

/* ===================================================================
   STANDALONE SCREEN OVERRIDES  (BEACON build — not in the gallery)
   Renders one screen as a real mobile page: light backdrop, centered,
   no gallery board, no phone bezel, no fake iOS status bar.
   =================================================================== */
html,body{background:#eef2f8}
body{min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding:24px 16px}
.screen{
  width:100%; max-width:412px; min-height:760px;
  display:flex; flex-direction:column;
  border-radius:28px; background:var(--screen-bg);
  box-shadow:0 20px 50px -20px rgba(8,22,48,.45);
}
.app,.cam{flex:1 0 auto}
@media (max-width:480px){
  body{padding:0}
  .screen{max-width:none; min-height:100vh; border-radius:0; box-shadow:none}
}