/* MagTag public site — frosted glass over amber + teal light; follows the phone's light/dark setting. */
:root{
  --bg:#e6ecee; --ink:#0f1b1f; --muted:#4c5f65; --faint:#6b7d82;
  --glass:rgba(255,255,255,.58); --glass-2:rgba(255,255,255,.84); --glass-line:rgba(255,255,255,.8);
  --line:rgba(15,27,31,.13); --shadow:rgba(20,44,52,.22);
  --accent:#f2a21f; --accent-ink:#8a5200; --on-accent:#1d1400;
  --teal:#0d7a72; --orb1:#f7b84a; --orb2:#40b8ad; --orb3:#a7c6d2;
  --good:#16804a; --good-bg:rgba(22,128,74,.12); --crit:#bf3428; --crit-bg:rgba(191,52,40,.1);
  --bar:rgba(255,255,255,.92);
  --f-display:"Unbounded",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#091013; --ink:#e6eef0; --muted:#9aaeb3; --faint:#7d9095;
  --glass:rgba(22,36,41,.58); --glass-2:rgba(30,46,52,.84); --glass-line:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.11); --shadow:rgba(0,0,0,.55);
  --accent:#ffb53d; --accent-ink:#ffc96b; --on-accent:#1d1400;
  --teal:#47c5b9; --orb1:#a86a0c; --orb2:#0d665e; --orb3:#1a3a47;
  --good:#52d08c; --good-bg:rgba(82,208,140,.14); --crit:#ff7d70; --crit-bg:rgba(255,125,112,.12);
  --bar:rgba(14,24,28,.94); color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 15px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.01em;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orbs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.7}
.orbs i:nth-child(1){width:46vmax;height:46vmax;left:-12vmax;top:-10vmax;background:var(--orb1);animation:drift 26s ease-in-out infinite alternate}
.orbs i:nth-child(2){width:40vmax;height:40vmax;right:-14vmax;top:18vh;background:var(--orb2);animation:drift 32s ease-in-out infinite alternate-reverse}
.orbs i:nth-child(3){width:36vmax;height:36vmax;left:20vw;bottom:-18vmax;background:var(--orb3);animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(4vmax,3vmax) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.orbs i{animation:none}*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.glass{background:var(--glass);border:1px solid var(--glass-line);border-radius:22px;
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 24px 48px -30px var(--shadow)}
.wrap{max-width:1120px;margin:0 auto}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding-block:12px}
.bar{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:999px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 17px var(--f-display);letter-spacing:-.02em}
.brand svg{width:32px;height:32px;flex:none}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{text-decoration:none;padding:8px 13px;border-radius:999px;font-weight:700;font-size:14px;color:var(--muted);white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--glass-2)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.install{display:none;border:0;border-radius:999px;padding:8px 14px;font-weight:800;font-size:13.5px;background:var(--accent);color:var(--on-accent);cursor:pointer;margin-left:auto}
.install.show{display:inline-flex}
.nav + .install.show{margin-left:6px}
.demo-banner{font-size:12.5px;color:var(--muted);text-align:center;margin:-6px 0 10px}
.demo-banner b{color:var(--accent-ink)}
.tabbar{display:none}
@media (max-width:820px){
  .nav{display:none}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--bar);
    backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-top:1px solid var(--line);
    padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;font-size:11px;font-weight:800;color:var(--faint);padding:6px 2px;border-radius:12px}
  .tabbar svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a[aria-current="page"]{color:var(--ink)}
  .tabbar a[aria-current="page"] svg{stroke:var(--accent-ink)}
  main{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))!important}
}
main{position:relative;z-index:1;padding-block:16px 64px}
footer{position:relative;z-index:1;padding-block:28px 40px;color:var(--muted);font-size:13.5px}
footer .wrap{display:flex;gap:12px 24px;flex-wrap:wrap;justify-content:space-between}
footer nav{display:flex;gap:16px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
@media (max-width:820px){footer{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:13px 22px;font-weight:800;font-size:15px;cursor:pointer;text-decoration:none;transition:transform .15s,filter .15s,opacity .15s;min-height:44px}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 24px -12px var(--accent)}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{background:var(--glass-2);border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--glass)}
.btn-danger{background:var(--crit);color:#fff}
.btn-sm{padding:9px 16px;font-size:14px;min-height:38px}
.btn-block{width:100%}
.lbl{display:block;font-weight:700;font-size:13.5px}
.hint{font-size:13px;color:var(--muted)}
.err{font-size:13px;color:var(--crit);font-weight:600}
.err:empty{display:none}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.input{width:100%;min-width:0;background:var(--glass-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:16px;transition:border-color .15s}
.input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 22%,transparent)}
.input[aria-invalid="true"]{border-color:var(--crit)}
textarea.input{resize:vertical;min-height:80px}
.mono{font-family:var(--f-mono)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:800;background:var(--glass-2);border:1px solid var(--line);white-space:nowrap}
.chip.good{background:var(--good-bg);color:var(--good);border-color:transparent}
.chip.soon{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent-ink);border-color:transparent}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ok{padding:14px 16px;border-radius:14px;background:var(--good-bg);color:var(--good);font-weight:700}
.sec{padding-block:30px}
.sec-head{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;max-width:64ch}
.sec-head h2{font-size:clamp(22px,2.8vw,30px)}
.sec-head p{color:var(--muted)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted)}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--teal);flex:none}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14.5px;margin:0}
.kv dt{color:var(--muted);font-weight:600}
.kv dd{margin:0;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.divider{grid-column:1/-1;height:1px;background:var(--line);border:0;margin:2px 0}
.loading{display:inline-block;width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
.prose{max-width:72ch}
.prose h2{font-size:20px;margin:26px 0 8px}
.prose p,.prose li{color:var(--muted)}
.prose p+p{margin-top:10px}

/* number plate */
.plate{display:inline-flex;align-items:stretch;background:#fbfbf6;color:#111;border:2px solid #111;border-radius:7px;overflow:hidden;box-shadow:0 6px 18px -10px rgba(0,0,0,.5);max-width:100%}
.plate .ind{background:#1a4fa8;color:#fff;font:700 9px/1 var(--f-body);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 6px;letter-spacing:.06em}
.plate .ind i{width:9px;height:9px;border-radius:50%;border:1.5px solid #fff;display:block}
.plate .num{font:700 22px/1 var(--f-mono);letter-spacing:.06em;padding:9px 14px;white-space:nowrap}

/* the physical card (fixed print colours) */
.mcard-wrap{container-type:inline-size;width:100%}
.mcard{position:relative;aspect-ratio:85.6/54;width:100%;border-radius:4.2cqi;overflow:hidden;font-family:var(--f-body);box-shadow:0 2cqi 6cqi -2cqi rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.08)}
.qrbox{background:#fff;border-radius:2.4cqi;padding:2.2cqi;display:flex;flex-direction:column;align-items:center;gap:1.4cqi}
.qrbox svg{width:100%;height:auto;display:block}
.qrbox svg path{fill:#111}
.scanme{font:800 2.5cqi/1 var(--f-display);letter-spacing:.12em;background:#f2a21f;color:#1d1400;padding:1.3cqi 2.6cqi;border-radius:99cqi}
.cf{position:absolute;inset:0;padding:5.4cqi 5.6cqi 4.6cqi 6.4cqi;display:grid;grid-template-columns:minmax(0,1fr) 30cqi;grid-template-rows:auto 1fr auto;column-gap:5cqi;row-gap:1.6cqi}
.cf-top{display:flex;align-items:center;gap:2cqi;min-width:0}
.cf-top .bm{width:6.4cqi;height:6.4cqi;flex:none;color:#f2a21f}
.cf-top .bm svg{width:100%;height:100%;display:block}
.cf-top b{font:800 3.3cqi/1 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slogo{width:8.6cqi;height:8.6cqi;border-radius:2cqi;overflow:hidden;flex:none;background:#fff;display:grid;place-items:center;border:.3cqi dashed #9aa3a8;color:#6f7a7f;font:800 1.8cqi var(--f-body)}
.slogo img{width:100%;height:100%;object-fit:contain}
.slogo.has{border:0}
.cf-head{align-self:center;min-width:0}
.cf-head h4{margin:0;font:800 6.2cqi/1.04 var(--f-display);letter-spacing:-.01em;text-transform:uppercase;overflow-wrap:anywhere}
.cf-head h4 span{color:var(--hl)}
.cf-head p{margin-top:2cqi;font-size:2.9cqi;line-height:1.38;font-weight:600;opacity:.88;max-width:46cqi}
.cf-qr{grid-column:2;grid-row:1/3;align-self:start}
.cf-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font-size:2.2cqi;font-weight:700;opacity:.65;gap:2cqi}
.cf-foot .mono{font-family:var(--f-mono)}
.cb{position:absolute;inset:0;padding:5.6cqi 6cqi 4.6cqi 6.4cqi;display:flex;flex-direction:column;gap:3cqi}
.cb h5{margin:0;font:800 4.2cqi/1.15 var(--f-display)}
.cb-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3cqi;margin:0;padding:0;list-style:none}
.cb-steps li{display:flex;flex-direction:column;gap:1.6cqi;font-size:2.9cqi;line-height:1.35;font-weight:700}
.cb-steps li i{font:800 3.2cqi/1 var(--f-display);font-style:normal;width:7.4cqi;height:7.4cqi;border-radius:50%;display:grid;place-items:center;background:#f2a21f;color:#1d1400}
.cb-steps li small{display:block;font-size:2.4cqi;font-weight:600;opacity:.7;margin-top:.4cqi}
.cb-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:3cqi;font-size:2.3cqi;font-weight:700;opacity:.72}
.cb-msg{font-size:3.6cqi;line-height:1.4;font-weight:700;max-width:88%}
.cb-contact{font-size:2.8cqi;line-height:1.45;opacity:.85}
.cb-pill{align-self:flex-start;background:var(--c);color:var(--on-c);font-weight:800;font-size:2.8cqi;padding:1.5cqi 2.8cqi;border-radius:99cqi;max-width:70%}
.cb-mini{font-size:2.3cqi;font-weight:700;opacity:.75;border-top:.3cqi solid rgba(127,127,127,.4);padding-top:1.6cqi;display:flex;justify-content:space-between;gap:2cqi;margin-top:auto}
.mcard.t-generic,.mcard.t-studio{--hl:#f2a21f;background:radial-gradient(120% 140% at 100% 0%,#24303a 0%,#14181b 55%);color:#f4efe6}
.mcard.back.t-generic,.mcard.back.t-studio{background:#f6f3ec;color:#14181b}
.mcard.t-studio::after{content:"";position:absolute;left:0;top:0;bottom:0;width:1.6cqi;background:#f2a21f}
.mcard.t-custom[data-tpl="solid"]{background:var(--c);color:var(--on-c);--hl:var(--on-c)}
.mcard.t-custom[data-tpl="split"]{background:linear-gradient(112deg,var(--c) 0 61%,color-mix(in srgb,var(--c) 70%,#000) 61%);color:var(--on-c);--hl:var(--on-c)}
.mcard.t-custom[data-tpl="light"]{background:#fbfaf7;color:#16181b;--hl:var(--c)}
.mcard.t-custom[data-tpl="light"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2.4cqi;background:var(--c)}
.mcard.t-custom[data-tpl="solid"] .cb-pill,.mcard.t-custom[data-tpl="split"] .cb-pill{background:var(--on-c);color:var(--c)}

/* home */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;padding-block:24px 36px}
.hero h1{font-size:clamp(30px,4.8vw,54px);line-height:1.05;margin:14px 0 16px}
.hero h1 em{font-style:normal;color:var(--accent-ink)}
.hero .lead{font-size:17px;color:var(--muted);max-width:52ch}
.hero .row{margin-top:24px}
.hero-cards{position:relative;padding:6% 2% 16% 2%}
.hero-cards .back{position:absolute;width:76%;right:0;top:0;transform:rotate(6deg)}
.hero-cards .front{position:relative;width:86%;transform:rotate(-4deg)}
.hero-stat{position:absolute;left:0;bottom:0;padding:12px 16px;border-radius:16px;display:flex;gap:10px;align-items:center;font-weight:800;font-size:13.5px}
.hero-stat .dot{width:10px;height:10px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px var(--good-bg)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s;padding:0;margin:0}
.steps li{list-style:none;padding:22px}
.steps li::before{counter-increment:s;content:counter(s);font:800 13px var(--f-display);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);margin-bottom:14px}
.steps h3{font-size:15.5px;margin-bottom:6px}
.steps p{color:var(--muted);font-size:14.5px}
.types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.type{padding:18px;display:flex;flex-direction:column;gap:14px}
.type h3{font-size:16px}
.type p{font-size:14px;color:var(--muted)}
.type .from{font:800 15px var(--f-display);margin-top:auto}
.type .from small{font:600 12.5px var(--f-body);color:var(--muted)}
.price-wrap{padding:6px;overflow-x:auto}
table.price{width:100%;border-collapse:collapse;min-width:620px;font-variant-numeric:tabular-nums}
table.price th,table.price td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
table.price th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800}
table.price tbody tr:last-child td{border-bottom:0}
table.price td.num{font:700 17px var(--f-display);white-space:nowrap}
table.price td.na{color:var(--faint)}
table.price td b{display:block}
table.price td small{color:var(--muted);font-size:12.5px}
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.notes .glass{padding:18px 20px}
.notes b{display:block;font-family:var(--f-display);font-size:15px;margin-bottom:4px}
.notes p{font-size:14px;color:var(--muted)}
.biz{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;padding:28px;align-items:start}
.biz ul{margin:12px 0 0;padding-left:18px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.biz form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.biz form .full{grid-column:1/-1}
.bike-teaser{padding:22px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center}
.bike-teaser .art{width:96px}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:8px}.hero-cards{max-width:520px;margin-top:28px}.steps,.types,.notes{grid-template-columns:1fr}.biz{grid-template-columns:1fr;padding:20px}.bike-teaser{grid-template-columns:auto minmax(0,1fr)}.bike-teaser .btn{grid-column:1/-1}}
@media (max-width:480px){.biz form{grid-template-columns:1fr}}

/* cards page */
.page-head{padding-block:8px 20px}
.page-head h1{font-size:clamp(26px,3.6vw,38px);margin-top:10px}
.page-head p{color:var(--muted);max-width:62ch;margin-top:8px}
.design{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;padding:24px;align-items:center}
.design + .design{margin-top:18px}
.design .meta{display:flex;flex-direction:column;gap:12px}
.design .meta h2{font-size:22px}
.design .meta ul{margin:0;padding-left:18px;color:var(--muted);font-size:14.5px;display:flex;flex-direction:column;gap:4px}
.design .faces{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.design figure{margin:0;display:flex;flex-direction:column;gap:8px}
.design figcaption{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.design{grid-template-columns:1fr;padding:18px}}
@media (max-width:560px){.design .faces{grid-template-columns:1fr}}
.bikes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bike{padding:20px;display:flex;flex-direction:column;gap:12px;position:relative}
.bike .art{display:grid;place-items:center;min-height:190px;padding:8px}
.bike .art svg{max-width:100%;height:auto}
.bike h3{font-size:16px}
.bike p{font-size:14px;color:var(--muted)}
.bike .chip.soon{position:absolute;top:14px;right:14px}
.waitlist{padding:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:end;margin-top:16px}
.waitlist form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.waitlist form .field{flex:1 1 200px}
@media (max-width:860px){.bikes{grid-template-columns:1fr}.waitlist{grid-template-columns:1fr}}

/* scan / activate / manage (phone-sized) */
.phone{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.issuer{padding:14px 16px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
.issuer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--issuer,var(--accent))}
.issuer .il{width:46px;height:46px;border-radius:13px;overflow:hidden;flex:none;display:grid;place-items:center;background:#14181b;color:#f2a21f;padding:7px}
.issuer .il.img{background:#fff;padding:0}
.issuer .il img,.issuer .il svg{width:100%;height:100%;display:block;object-fit:contain}
.issuer small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.issuer strong{font:700 17px var(--f-display);display:block;line-height:1.2}
.issuer .shield{margin-left:auto;width:32px;height:32px;flex:none;stroke:var(--teal);fill:none;stroke-width:1.8}
.card-pad{padding:20px}
.plate-row{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.plate-row .lead{color:var(--muted);font-size:14.5px;max-width:38ch}
.reasons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.reason{display:flex;align-items:center;gap:10px;text-align:left;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--glass-2);cursor:pointer;font-weight:700;font-size:14.5px;line-height:1.25;min-height:56px}
.reason svg{width:22px;height:22px;flex:none;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reason[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--glass-2));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.reason.other{grid-column:1/-1}
.sos{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--faint);font-weight:700}
.sos i{width:8px;height:8px;border-radius:50%;background:var(--faint);display:block}
.counter{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;margin-left:auto}
.codebox{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:12px 14px;border-radius:14px;background:var(--glass-2);border:1px dashed var(--teal);flex-wrap:wrap}
.codebox code{font:700 16px var(--f-mono);letter-spacing:.04em;user-select:all;overflow-wrap:anywhere}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.timeline li{display:flex;gap:12px;align-items:center;font-weight:700;color:var(--faint)}
.timeline .tick{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:none}
.timeline .tick svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:3;opacity:0}
.timeline li.done{color:var(--ink)}
.timeline li.done .tick{background:var(--good);border-color:var(--good);color:#fff}
.timeline li.done .tick svg{opacity:1}
.chat{display:flex;flex-direction:column;gap:8px}
.chat-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--muted)}
.bubble{max-width:84%;padding:10px 14px;border-radius:18px;font-size:14.5px;line-height:1.4;overflow-wrap:anywhere}
.bubble.me{align-self:flex-end;background:color-mix(in srgb,var(--teal) 22%,var(--glass-2));border-bottom-right-radius:6px}
.bubble.them{align-self:flex-start;background:var(--glass-2);border:1px solid var(--line);border-bottom-left-radius:6px}
.bubble.sys{align-self:center;font-size:12.5px;color:var(--muted);background:transparent;padding:2px}
.bubble small{display:block;font-size:11.5px;font-weight:800;color:var(--muted);margin-bottom:2px}
.reply{display:flex;gap:8px}
.reply .input{border-radius:999px;padding:10px 16px}
.cta-card{padding:16px 18px;display:flex;gap:14px;align-items:center}
.cta-card .big{font:800 19px var(--f-display);color:var(--accent-ink);flex:none}
.cta-card p{font-size:14px}
.cta-card p span{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.cta-card .btn{margin-left:auto;flex:none}
.state-box{padding:28px 22px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.state-box .big{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--crit-bg);color:var(--crit)}
.state-box .big.warn{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-ink)}
.state-box .big svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2}
.state-box h2{font-size:19px}
.state-box p{color:var(--muted);font-size:14.5px;max-width:36ch}
.footnote{font-size:12px;color:var(--faint);text-align:center}
.step-tag{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.vtype{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vt{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--glass-2);font-weight:800;cursor:pointer;min-height:48px}
.vt svg{width:24px;height:24px;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vt[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.vt:disabled{cursor:not-allowed;opacity:.7}
.vt .chip{margin-left:auto;padding:3px 8px;font-size:10.5px}

/* order */
.order-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:22px;align-items:start}
.order-form{padding:22px;display:flex;flex-direction:column;gap:24px}
.order-form fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.order-form legend{font:700 15px var(--f-display);margin-bottom:10px;padding:0}
.pick3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pick2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pick{position:relative;cursor:pointer;display:block}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick > span{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--glass-2);height:100%}
.pick b{font-size:14px}
.pick small{font-size:12.5px;color:var(--muted);line-height:1.35}
.pick em{font-style:normal;font:800 13px var(--f-display);color:var(--accent-ink)}
.pick input:checked + span{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.pick input:focus-visible + span{outline:2px solid var(--teal);outline-offset:2px}
.pick input:disabled + span{opacity:.5;cursor:not-allowed}
.sw{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sw button{width:32px;height:32px;border-radius:50%;border:2px solid var(--glass-line);cursor:pointer;box-shadow:0 0 0 1px var(--line)}
.sw button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ink)}
.sw input[type=color]{width:40px;height:34px;border:1px solid var(--line);border-radius:10px;background:var(--glass-2);padding:2px;cursor:pointer}
.upload{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.upload .thumb{width:52px;height:52px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;flex:none;color:#7a858a;font-weight:800;font-size:10px}
.upload .thumb img{width:100%;height:100%;object-fit:contain}
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px);display:flex;flex-direction:column;gap:16px}
.preview{padding:20px;display:flex;flex-direction:column;gap:12px}
.preview .cap{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sum{padding:20px;display:flex;flex-direction:column;gap:12px}
.sum .total{font:800 18px var(--f-display);color:var(--ink)}
.notice{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--accent) 14%,transparent);font-size:13.5px;font-weight:600}
@media (max-width:900px){.order-grid{grid-template-columns:1fr}.side{position:static}}
@media (max-width:520px){.pick3{grid-template-columns:1fr}.pick2{grid-template-columns:1fr}.reasons{gap:8px}.reason{padding:12px;font-size:13.5px}.plate .num{font-size:19px}}

/* tracking */
.track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.track li{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--faint);text-align:center}
.track li i{width:100%;height:6px;border-radius:99px;background:var(--line)}
.track li.done{color:var(--ink)}
.track li.done i{background:var(--good)}
.track li.now i{background:var(--accent)}
.proof img{width:100%;border-radius:14px;border:1px solid var(--line);background:#fff}