/* JUUCEME customer app, "Flagship" look (picked 5 Nov 2026): midnight navy like the
   business card, electric blue #1595ff with a glow, Archivo Black poster headlines,
   citrus gold #ffd23f for passes, Inter for everything else, glass panels.
   Sizes are in em off .app's font-size, the same scale as the phone screens on the
   home page (1em = 10pt of a 393pt phone), so the app and the website match. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin.c9407645.woff2) format('woff2')}
@font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-black-latin.4eca2abd.woff2) format('woff2')}
:root{
  color-scheme:dark;
  --bg-0:#03070e; --bg-1:#08111f; --bg-2:#101b2e; --bg-3:#1a2740;
  --navy:#050b14; --cyan:#6fd0ff; --gold:#ffd23f;
  --text-0:#f3f6fc; --text-1:#8f9bb2; --text-2:#5d6a80;
  --sep:rgba(255,255,255,.07); --edge:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.06);
  --panel:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
  --blue-grad:linear-gradient(180deg,#36a6ff,#1595ff 55%,#0c7cf0);
  --gold-grad:radial-gradient(90% 120% at 100% 0%,#fff1b0,transparent 55%),linear-gradient(135deg,#ffe066,#ffd23f 50%,#f0b90b);
  --poster:"Archivo","Arial Black",Impact,sans-serif;
  --r-card:2.4em; --r-field:1.5em;
  --accent:#1595ff; --accent-soft:rgba(21,149,255,.14); --accent-glow:rgba(21,149,255,.45);
  --ok:#30d158; --warn:#ff9f0a; --bad:#ff6b6b;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-std:cubic-bezier(.4,0,.2,1);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg-0);color:var(--text-0);font-family:var(--font);font-optical-sizing:auto;font-feature-settings:"cv11";-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{overflow-x:hidden}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.noscript{padding:24px;color:var(--text-1)}
[hidden]{display:none!important}

.app{position:relative;max-width:480px;min-height:100vh;min-height:100dvh;margin:0 auto;font-size:calc(min(100vw,480px)/39.3);line-height:1.25;
  padding-bottom:calc(11em + var(--safe-b));background:radial-gradient(120% 55% at 50% -4%,#0d2547 0%,#060d1a 46%,transparent 80%),var(--bg-0)}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:20;height:calc(7em + var(--safe-t));padding:var(--safe-t) 1.6em 0;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,rgba(6,14,28,.94),rgba(6,14,28,.72));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.logo{display:inline-flex;align-items:center;color:var(--text-0);text-decoration:none}
.logo .brand-logo{display:block;height:3.6em;width:auto}
.logo b{color:var(--accent);font-weight:800}
.live-pill{display:flex;align-items:center;gap:.6em;height:3.2em;padding:0 1.2em;border-radius:99px;border:0;font-size:1.3em;font-weight:600}
.live-pill .dot{width:.6em;height:.6em}

main{padding:.4em 1.6em 0}

/* ---------- shared pieces ---------- */
.i{width:2em;height:2em;display:block;flex:none}
.sec{color:var(--text-1)}
.num{font-variant-numeric:tabular-nums}
.center{text-align:center}
.dot{display:inline-block;width:.8em;height:.8em;border-radius:50%;background:var(--accent);box-shadow:0 0 .8em var(--accent-glow);flex:none}
.dot--warn{background:var(--warn);box-shadow:0 0 .8em rgba(255,159,10,.5)}
.dot--ok{background:var(--ok);box-shadow:none}
.dot--off{background:#6e6e73;box-shadow:none}
h1,h2,h3,p{margin:0}
.large{font-size:3.4em;font-weight:800;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.title{font-size:2.2em;font-weight:700;letter-spacing:-.015em;line-height:1.15}
.headline{font-size:1.7em;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.sub{font-size:1.5em;line-height:1.35}
.foot{font-size:1.3em;line-height:1.4}
.stack{display:flex;flex-direction:column;gap:1em}
.mt-xs{margin-top:.4em}.mt-sm{margin-top:1em}.mt-md{margin-top:2em}.mt-lg{margin-top:3em}

.glass{position:relative;isolation:isolate;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 48%,rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(14px) saturate(170%) brightness(1.08);backdrop-filter:blur(14px) saturate(170%) brightness(1.08);
  box-shadow:inset 0 1px .5px rgba(255,255,255,.45),inset 0 -1px .5px rgba(255,255,255,.10),inset 0 0 0 .5px rgba(255,255,255,.14),0 10px 30px -10px rgba(0,0,0,.65)}
@media (prefers-reduced-transparency:reduce){.glass{background:var(--bg-2);backdrop-filter:none;-webkit-backdrop-filter:none}}

.nav{min-height:4.4em;display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:1.2em}
.nav__title{font-size:1.7em;font-weight:600;letter-spacing:-.01em;text-align:center;flex:1}
.nav__side{min-width:4.4em;display:flex;justify-content:flex-end;flex:none}
.nav .btn--sm{white-space:nowrap;padding:0 .4em}
.nav--large{margin:.6em 0 1.6em}
.nav--large .nav__title{font-size:3.2em;font-weight:800;letter-spacing:-.03em;line-height:1.1;text-align:left}
.gbtn{width:4.4em;height:4.4em;border-radius:50%;display:grid;place-items:center;border:0;padding:0;color:var(--text-0);flex:none}

.btn{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;min-height:3.06em;padding:0 1em;border:0;border-radius:999px;background:var(--text-0);color:#000;
  font-size:1.7em;font-weight:600;letter-spacing:-.01em;text-decoration:none;transition:transform 160ms var(--ease-std),opacity 160ms}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.btn .i{width:1.2em;height:1.2em}
.btn--ghost{background:var(--bg-2);color:var(--text-0)}
.card .btn--ghost,.sheet .btn--ghost{background:var(--bg-3)}
.btn--blue{background:var(--accent);color:#fff}
.btn--link{background:none;color:var(--accent);min-height:2.4em}
.btn--wa{background:var(--bg-2);color:var(--text-0);text-decoration:none}
.btn--wa svg{width:1.3em;height:1.3em;flex:none;color:#25d366}
.btn--sm{width:auto;min-height:2.2em;font-size:1.4em;padding:0 1.1em}
.actions{display:flex;flex-direction:column;gap:.9em;margin-top:2.4em}
form .actions{margin-top:1em}

.list{background:var(--bg-2);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--edge)}
.row{position:relative;min-height:4.6em;padding:.8em 1.6em;display:flex;align-items:center;justify-content:space-between;gap:1.2em;width:100%;background:none;border:0;text-align:left;color:inherit;text-decoration:none}
.row+.row::before{content:"";position:absolute;left:1.6em;right:0;top:0;height:.5px;background:var(--sep)}
.row>span{font-size:1.6em}
.row>span:last-child{text-align:right}
.row>span:not([class])>.pill{font-size:.8125em}
.row>.pill{font-size:1.3em}
.row--tap{cursor:pointer}
.row--tap:active{background:rgba(255,255,255,.04)}
.row .chev{width:1.6em;height:1.6em;color:var(--text-2)}
.row__main{display:flex;flex-direction:column;gap:.25em;min-width:0}
.row__main b{font-size:1.6em;font-weight:500;overflow-wrap:anywhere}
.row__main small{font-size:1.25em;color:var(--text-1)}
.listhead{font-size:1.75em;font-weight:700;letter-spacing:-.015em;color:var(--text-0);padding:0 .15em;margin:1.6em 0 .6em}
.listhead--first{margin-top:0}
.card{background:var(--bg-2);border-radius:var(--r-card);padding:1.6em;box-shadow:var(--edge)}
.empty{font-size:1.4em;color:var(--text-1);padding:1.4em 1.2em;line-height:1.45}

.pill{display:inline-flex;align-items:center;gap:.7em;height:2.2em;padding:0 1em;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:1.3em;font-weight:500;white-space:nowrap}
.pill--warn{background:rgba(255,159,10,.14);color:var(--warn)}
.pill--grey{background:rgba(255,255,255,.08);color:var(--text-1)}
.pill--ok{background:rgba(48,209,88,.14);color:var(--ok)}

.field{display:block;width:100%;min-height:2.9em;padding:0 .85em;background:var(--bg-2);border:0;border-radius:calc(var(--r-field)/1.7);font-size:1.7em;color:var(--text-0);outline:none;caret-color:var(--accent);box-shadow:var(--edge)}
.card .field{background:var(--bg-3);box-shadow:none}
.field::placeholder{color:var(--text-2)}
.field:focus{box-shadow:inset 0 0 0 1.5px var(--accent)}
textarea.field{min-height:6em;padding:.7em .85em;resize:vertical;line-height:1.4}
.field--code{font-size:2.6em;min-height:1.9em;border-radius:calc(var(--r-field)/2.6);letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}
label.lbl{display:block;font-size:1.3em;font-weight:500;color:var(--text-1);margin:0 0 .5em .3em}
.err{font-size:1.3em;color:var(--bad);min-height:1.4em;margin:.5em .9em 0;line-height:1.35}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.notice{display:flex;gap:1em;align-items:flex-start;padding:1.3em 1.4em;border-radius:1.8em;background:var(--accent-soft);color:var(--text-0)}
.notice .i{width:1.8em;height:1.8em;color:var(--accent);margin-top:.1em}
.notice p{font-size:1.35em;line-height:1.45}
.notice--warn{background:rgba(255,159,10,.12)}
.notice--warn .i{color:var(--warn)}

/* ---------- scan ---------- */
.finder{position:relative;display:block;width:33em;max-width:100%;aspect-ratio:1;margin:.4em auto 0;border-radius:3.4em;overflow:hidden;border:0;padding:0;color:inherit;
  background:radial-gradient(120% 120% at 50% 45%,#121214 0%,#0a0a0b 55%,#040405 100%);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08),inset 0 0 5em rgba(0,0,0,.6)}
.finder video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 300ms}
.finder.live video{opacity:1}
.finder.live .sticker,.finder.live .finder__cta{opacity:0}
.sticker{position:absolute;left:50%;top:50%;width:48%;aspect-ratio:1;transform:translate(-50%,-56%);padding:3.4%;border-radius:1.8em;background:#fff;box-shadow:0 1.2em 3em rgba(0,0,0,.6);transition:opacity 300ms}
.sticker svg{display:block;width:100%;height:100%}
.brackets{position:absolute;inset:19%;pointer-events:none;color:var(--accent);filter:drop-shadow(0 0 .6em var(--accent-glow));transition:inset 600ms cubic-bezier(.34,1.56,.64,1)}
.finder.live .brackets{inset:14%}
.brackets i{position:absolute;width:3.2em;height:3.2em;border:0 solid currentColor}
.brackets i:nth-child(1){left:0;top:0;border-width:.4em 0 0 .4em;border-top-left-radius:1.6em}
.brackets i:nth-child(2){right:0;top:0;border-width:.4em .4em 0 0;border-top-right-radius:1.6em}
.brackets i:nth-child(3){left:0;bottom:0;border-width:0 0 .4em .4em;border-bottom-left-radius:1.6em}
.brackets i:nth-child(4){right:0;bottom:0;border-width:0 .4em .4em 0;border-bottom-right-radius:1.6em}
.scanline{position:absolute;z-index:2;left:16%;right:16%;top:14%;height:.3em;border-radius:99px;background:var(--accent);box-shadow:0 0 1.6em .3em var(--accent-glow);opacity:0}
.finder.live .scanline{animation:scan 1.8s var(--ease-std) infinite}
@keyframes scan{0%{top:14%;opacity:0}12%,88%{opacity:1}100%{top:86%;opacity:0}}
.finder__cta{position:absolute;z-index:3;left:50%;bottom:1.3em;transform:translateX(-50%);height:2.9em;padding:0 1.3em;border-radius:99px;display:flex;align-items:center;gap:.6em;white-space:nowrap;font-size:1.3em;font-weight:600;transition:opacity 300ms}
.finder__cta .i{width:1.4em;height:1.4em;color:var(--accent)}
.finder__stop{position:absolute;z-index:4;right:1.2em;top:1.2em;width:3.6em;height:3.6em;border-radius:50%;display:none;place-items:center;border:0;color:#fff}
.finder.live .finder__stop{display:grid}
.or{display:flex;align-items:center;gap:1em;margin:2.2em 0 1em;color:var(--text-1);font-size:1.3em}
.or::before,.or::after{content:"";flex:1;height:.5px;background:var(--sep)}
.code-row{display:flex;gap:.8em}
.code-row .field{flex:1;min-width:0}
.code-row .btn{width:auto;flex:none;min-width:3.4em;padding:0 1.1em;font-size:1.6em;min-height:3.08em;border-radius:calc(var(--r-field)/1.6)}
.recent{display:flex;flex-wrap:wrap;gap:.6em}
.chip{display:inline-flex;align-items:center;gap:.5em;height:2.8em;padding:0 1.1em;border-radius:99px;border:0;background:var(--bg-2);box-shadow:var(--edge);font-size:1.35em;font-weight:500;color:var(--text-0)}
.chip .i{width:1.2em;height:1.2em;color:var(--accent)}

/* ---------- how it works ---------- */
.how{display:grid;grid-template-columns:repeat(5,1fr);gap:.4em;margin-top:.2em}
.how li{list-style:none;display:flex;flex-direction:column;align-items:center;gap:.5em;text-align:center}
.how__n{width:2.6em;height:2.6em;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);font-size:1.2em;font-weight:700;color:var(--text-1)}
.how__t{font-size:1.2em;color:var(--text-1)}
.how li.on .how__n{background:var(--accent);color:#fff;box-shadow:0 0 1em var(--accent-glow)}
.how li.on .how__t{color:var(--text-0)}
.how li.done .how__n{background:var(--accent-soft);color:var(--accent)}
ol.how{padding:0;margin:0}
.card .how__n{background:var(--bg-3)}
.how--bar{gap:.5em;margin:.2em 0 .4em}
.how--bar li{gap:.7em}
.how--bar li::before{content:"";display:block;width:100%;height:.4em;border-radius:99px;background:var(--bg-3);transition:background 300ms}
.how--bar li.done::before{background:var(--accent);opacity:.55}
.how--bar li.on::before{background:var(--accent);box-shadow:0 0 1em var(--accent-glow)}
.how--bar .how__n{display:none}
.how--bar li.on .how__t{font-weight:600}

/* ---------- station ---------- */
.photo{position:relative;height:17em;margin:0 0 1.4em;display:flex;justify-content:center}
.photo img{position:relative;z-index:1;height:100%;width:auto;display:block}
.photo__glow{position:absolute;left:50%;bottom:-.8em;width:20em;height:3.6em;margin-left:-10em;border-radius:50%;background:radial-gradient(closest-side,var(--accent-glow),transparent);filter:blur(.8em);opacity:.8}
.pay{display:flex;flex-direction:column;gap:.5em;margin-top:1.6em}
.pay__icon{display:flex;align-items:center;gap:.4em;color:var(--accent);margin-bottom:.3em}
.pay__icon .i{width:2.8em;height:2.8em}
.nfc{width:2.4em;height:2.4em;display:block}
.nfc path{animation:arc 1.8s ease-in-out infinite both}
.nfc .a2{animation-delay:.25s}.nfc .a3{animation-delay:.5s}
@keyframes arc{0%,100%{opacity:.25}30%{opacity:1}}
.wait{display:flex;align-items:center;gap:1em;margin-top:.9em;padding-top:1.1em;border-top:.5px solid var(--sep)}
.wait span:last-child{font-size:1.45em}
.card>.wait:first-child{margin-top:0;padding-top:0;border-top:0}
.spin{position:relative;width:1.8em;height:1.8em;flex:none}
.spin i{position:absolute;left:50%;top:0;width:.2em;height:.5em;margin-left:-.1em;border-radius:99px;background:#fff;transform-origin:50% .9em;animation:tick .8s linear infinite both}
.spin i:nth-child(2){transform:rotate(45deg);animation-delay:-.7s}.spin i:nth-child(3){transform:rotate(90deg);animation-delay:-.6s}.spin i:nth-child(4){transform:rotate(135deg);animation-delay:-.5s}
.spin i:nth-child(5){transform:rotate(180deg);animation-delay:-.4s}.spin i:nth-child(6){transform:rotate(225deg);animation-delay:-.3s}.spin i:nth-child(7){transform:rotate(270deg);animation-delay:-.2s}.spin i:nth-child(8){transform:rotate(315deg);animation-delay:-.1s}
.spin i:nth-child(1){animation-delay:-.8s}
@keyframes tick{0%{opacity:1}100%{opacity:.25}}
.ref{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-top:1em;padding:1em 1.2em;border-radius:1.4em;background:var(--bg-1)}
.ref small{display:block;font-size:1.15em;color:var(--text-1);margin-bottom:.2em}
.ref code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.35em;letter-spacing:.06em;color:var(--text-0)}

/* ---------- station face (released / return) ---------- */
.face{position:relative;width:33em;max-width:100%;margin:2.4em auto 0;padding:1.2em 1.4em 1.6em;border-radius:3em;
  background:linear-gradient(180deg,#17171a,#0e0e10);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12),inset 0 1px .5px rgba(255,255,255,.14),0 2em 3em -1.5em rgba(0,0,0,.9)}
.face__fascia{height:2.8em;border-radius:99px;background:#050506;margin-bottom:1.3em;display:flex;align-items:center;justify-content:center}
.face__led{width:7em;height:.3em;border-radius:99px;background:var(--accent);opacity:.85;box-shadow:0 0 1em var(--accent-glow)}
.face__tier{display:flex;gap:1.2em}
.pair{flex:1;display:flex;flex-direction:column;gap:.7em;padding:.8em;border-radius:2.4em;border:.25em solid var(--accent);box-shadow:0 0 1.2em -.1em var(--accent-glow),inset 0 0 1em -.4em var(--accent-glow);background:#08080a}
.slot{position:relative;height:4em;border-radius:99px;background:#030304;box-shadow:inset 0 .2em .5em rgba(0,0,0,.9),inset 0 0 0 .5px rgba(255,255,255,.06)}
.bank{position:absolute;inset:.35em;border-radius:99px;background:linear-gradient(180deg,#26262a,#19191c);display:flex;align-items:center;justify-content:space-between;padding:0 1.1em 0 1em;color:rgba(235,235,245,.4)}
.bank .i{width:1.5em;height:1.5em}
.bank .dot{background:#4a4a50;box-shadow:none;width:.7em;height:.7em}
.slot--lit{z-index:3}
.slot--lit .bank{transform:translateX(2.4em) scale(1.12);background:linear-gradient(180deg,#303036,#1e1e22);color:var(--accent);box-shadow:0 1em 1.6em -.4em rgba(0,0,0,.85),0 0 .8em -.2em var(--accent-glow);animation:eject 800ms cubic-bezier(.34,1.56,.64,1) .3s both}
.slot--lit .bank .dot{background:var(--accent);box-shadow:0 0 .8em var(--accent-glow)}
@keyframes eject{from{transform:none;color:rgba(235,235,245,.4)}}
.slot--free{box-shadow:inset 0 0 0 .2em var(--accent),0 0 1.2em -.2em var(--accent-glow)}
.slot--free::after{content:"";position:absolute;inset:.35em;border-radius:99px;border:.15em dashed rgba(21,149,255,.6);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}

/* ---------- live rental ---------- */
.ringwrap{position:relative;display:flex;justify-content:center;margin:.6em 0 1.6em}
.ring{position:relative;width:25em;height:25em;border-radius:50%;display:grid;place-items:center}
.ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--ring,var(--accent)) calc(var(--p,0)*360deg),var(--bg-2) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5em),#000 calc(100% - 1.45em));mask:radial-gradient(farthest-side,transparent calc(100% - 1.5em),#000 calc(100% - 1.45em))}
.ringwrap::before{content:"";position:absolute;width:25em;height:25em;border-radius:50%;background:conic-gradient(var(--ring,var(--accent)) calc(var(--p,0)*360deg),transparent 0);filter:blur(1.2em);opacity:.4;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.8em),#000 calc(100% - 1.7em));mask:radial-gradient(farthest-side,transparent calc(100% - 1.8em),#000 calc(100% - 1.7em))}
.ringwrap.lost{--ring:var(--warn)}
.ring__centre{position:relative;display:flex;flex-direction:column;align-items:center;gap:.6em;text-align:center}
.ring__time{font-size:4em;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.ring__amt{font-size:2em;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ring__lbl{font-size:1.3em;color:var(--text-1);display:flex;align-items:center;gap:.5em}
.ring__marks{display:flex;justify-content:space-between;font-size:1.2em;color:var(--text-2);margin:-.6em 2.4em 0}

/* ---------- receipt ---------- */
.done-mark{width:6.4em;height:6.4em;border-radius:50%;display:grid;place-items:center;margin:1.2em 0 1.4em;background:var(--accent);color:#fff;box-shadow:0 0 3em -.4em var(--accent-glow);animation:pop 600ms cubic-bezier(.34,1.56,.64,1) both}
.done-mark .i{width:3.2em;height:3.2em;stroke-width:2.4}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.route{margin:2.4em 0 1.6em;display:flex;flex-direction:column}
.route__row{position:relative;display:flex;align-items:center;gap:1.4em;min-height:4em}
.route__name{flex:1;font-weight:500;font-size:1.7em;min-width:0}
.route__row>.num{font-size:1.6em}
.route__dot{position:relative;width:1.1em;height:1.1em;border-radius:50%;border:.15em solid rgba(255,255,255,.7);flex:none;margin:0 .15em}
.route__dot--end{border-color:var(--accent);background:var(--accent);box-shadow:0 0 .8em var(--accent-glow)}
.route__row:first-child .route__dot::after{content:"";position:absolute;left:50%;top:100%;margin-top:.15em;width:1px;height:2.4em;background:rgba(255,255,255,.35);transform:translateX(-50%)}
.total>span{font-weight:600}

/* ---------- stations ---------- */
.search{display:flex;align-items:center;gap:1em;height:4.8em;padding:0 1.6em;border-radius:99px;background:var(--bg-2)}
.search .i{width:2em;height:2em;color:var(--text-1)}
.search input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:1.7em;color:var(--text-0)}
.search input::placeholder{color:var(--text-2)}
.st{display:flex;align-items:center;gap:1.2em}
.st__icon{width:4em;height:4em;border-radius:1.2em;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.st__icon .i{width:2em;height:2em}
.st__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25em}
.st__body b{font-size:1.6em;font-weight:600}
.st__body small{font-size:1.25em;color:var(--text-1)}
.st__go{display:flex;gap:.6em;margin-top:1.1em}
.st__go .btn{flex:1;font-size:1.45em;min-height:2.7em}
.stlist{display:flex;flex-direction:column;gap:1em}
.coming{padding:2em 1.6em;border-radius:2.2em;background:linear-gradient(160deg,rgba(21,149,255,.16),rgba(21,149,255,.02) 60%),var(--bg-1);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08)}
.coming .title{margin-top:.6em}

/* ---------- account ---------- */
.profile{display:flex;align-items:center;gap:1.2em}
.avatar{width:5.2em;height:5.2em;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:1.1em;font-weight:700;flex:none}
.avatar span{font-size:2em}
.profile__main{flex:1;min-width:0}
.profile__main b{display:block;font-size:1.8em;font-weight:600}
.profile__main small{display:block;font-size:1.3em;color:var(--text-1);overflow-wrap:anywhere}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;margin-top:1.4em}
.stat{background:var(--bg-2);border-radius:1.8em;padding:1.3em 1.4em;box-shadow:var(--edge)}
.stat b{display:block;font-size:2.2em;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat small{display:block;font-size:1.15em;color:var(--text-1);margin-top:.2em}
.stat b small{display:inline;font-size:.55em;font-weight:600;margin:0 0 0 .1em}
.faq details{border-top:.5px solid var(--sep)}
.faq details:first-child{border-top:0}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1em;padding:1.3em 1.6em;font-size:1.55em;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3em;color:var(--text-2);transition:transform 200ms}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 1.6em 1.4em;font-size:1.4em;line-height:1.5;color:var(--text-1)}
.install{display:flex;gap:1.2em;align-items:center}
.install__icon{width:5em;height:5em;border-radius:1.2em;background:#000;box-shadow:0 0 0 .5px rgba(255,255,255,.2);flex:none;display:block}
.install p{font-size:1.35em;color:var(--text-1);line-height:1.4}
.install h3{font-size:1.6em;font-weight:600;margin-bottom:.2em}
.ios-steps{margin:1.2em 0 0;padding-left:1.4em;font-size:1.35em;line-height:1.6;color:var(--text-1)}

/* ---------- tab bar: Home · Passes · (Scan) · Stations · Account ---------- */
.tabs{position:fixed;z-index:30;left:50%;bottom:calc(1.6em + var(--safe-b));transform:translateX(-50%);width:calc(min(100vw,480px) - 2.4em);height:6.6em;border-radius:99px;display:flex;align-items:center;padding:0 .4em;
  background:rgba(8,14,26,.86);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 1.4em 3em rgba(0,0,0,.6)}
.tab{position:relative;flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;color:var(--text-2);border:0;background:none;padding:0;transition:color 200ms}
.tab .i{width:2.3em;height:2.3em}
.tab small{font-size:1.05em;font-weight:600}
.tab.on{color:#fff}
.tab.on .i{color:var(--accent);filter:drop-shadow(0 0 .6em rgba(21,149,255,.9))}
.tab .badge{position:absolute;top:1.1em;right:calc(50% - 1.9em);width:.8em;height:.8em;border-radius:50%;background:var(--accent);box-shadow:0 0 0 .2em #08111f,0 0 .8em var(--accent-glow)}
.tab--scan{flex:none;width:7.2em}
.tab__scan{width:5.8em;height:5.8em;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--blue-grad);box-shadow:0 0 0 .5em rgba(21,149,255,.15),0 1em 2.4em -.6em rgba(21,149,255,.95),inset 0 1px 0 rgba(255,255,255,.35);transition:transform 160ms var(--ease-std)}
.tab--scan:active .tab__scan{transform:scale(.93)}
.tab--scan .i{width:2.6em;height:2.6em}
.tab--scan.on .i{color:#fff;filter:none}

/* ---------- toast ---------- */
.toast{position:fixed;z-index:40;left:50%;top:calc(6.4em + var(--safe-t));transform:translate(-50%,-1em);max-width:calc(min(100vw,480px) - 3.2em);padding:.9em 1.4em;border-radius:1.6em;font-size:1.35em;font-weight:500;line-height:1.35;text-align:center;opacity:0;transition:opacity 260ms,transform 260ms var(--ease-out);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- screen entrance ---------- */
.enter{animation:enter 420ms var(--ease-out) both}
@keyframes enter{from{transform:translateY(1.2em)}}

@media (min-width:600px){.app{box-shadow:0 0 0 .5px rgba(255,255,255,.06)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}}

/* ======================= v2: structured app ======================= */

/* rows that hold their own sized children */
.row>.row__main,.row>.row__lead,.row>.row__end,.row>.note__icon{font-size:inherit}
.row__lead{display:flex;align-items:center;gap:1.1em;min-width:0}
.row__lead .i{width:3.2em;height:3.2em;padding:.6em;border-radius:.95em;background:var(--accent-soft);color:var(--accent)}
.row__lead b{font-weight:600}
.row__lead span{font-size:1.6em}
.row__end{display:flex;align-items:center;gap:.6em}
.badge-n{min-width:2em;height:2em;padding:0 .6em;border-radius:99px;background:var(--accent);color:#fff;font-size:1.25em;font-weight:700;display:grid;place-items:center}
a.row{color:inherit}
.row>span.row__main{text-align:left;flex:1}

/* welcome */
body.no-chrome .top,body.no-chrome .tabs,body.no-chrome .live-pill{display:none!important}
body.no-chrome .app{padding-bottom:var(--safe-b)}
.welcome{min-height:calc(100dvh - var(--safe-t) - var(--safe-b));display:flex;flex-direction:column;padding:calc(1.2em + var(--safe-t)) 0 2.4em}
.welcome__top{display:flex;align-items:center;justify-content:space-between;min-height:4.4em}
.welcome .logo .brand-logo{height:2.8em}
.welcome .large{margin-top:auto}
.welcome .actions{margin-top:2.4em}
.wl-art{display:grid;place-items:center;min-height:30em;margin:1em 0 0}
.wl-art .face{margin:0 auto;transform:scale(.92)}
.wl-art--glow{background:radial-gradient(50% 45% at 50% 55%,rgba(21,149,255,.22),transparent 70%)}
.wl-icon{width:16em;height:16em;border-radius:4.4em;display:grid;place-items:center;background:radial-gradient(70% 70% at 50% 35%,rgba(21,149,255,.28),rgba(21,149,255,.04) 70%),var(--bg-1);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12),0 2em 4em -2em var(--accent-glow);color:var(--accent)}
.wl-icon .i{width:7em;height:7em;stroke-width:1.4}
.dots{display:flex;gap:.6em;margin-top:2.4em}
.dots i{width:.8em;height:.8em;border-radius:99px;background:var(--bg-3);transition:width 300ms var(--ease-out),background 300ms}
.dots i.on{width:2.4em;background:var(--accent)}

/* stations: map screen */
.mapscreen{position:fixed;inset:0;z-index:1;max-width:480px;margin:0 auto;font-size:inherit}
.mapbox,.mapbox.maplibregl-map{position:absolute;inset:0;width:100%;height:100%;background:#0b0b0d}
.maptop{position:absolute;z-index:3;left:1.6em;right:1.6em;top:calc(6.4em + var(--safe-t));display:flex;flex-direction:column;gap:.8em}
.maptop .search{height:4.8em;padding:0 1.6em}
.maptop .seg{align-self:flex-start}
.locbtn{position:absolute;z-index:3;right:1.6em;bottom:calc(31em + var(--safe-b));width:4.6em;height:4.6em;border-radius:50%;border:0;display:grid;place-items:center;color:var(--accent)}
.locbtn .i,.gbtn .i{width:2em;height:2em}
.locbtn.busy,.gbtn.busy{animation:pulse 1s ease-in-out infinite}
.sheet{position:absolute;z-index:4;left:.8em;right:.8em;bottom:calc(9em + var(--safe-b));padding:.8em 1.6em 1.6em;border-radius:2.8em;background:linear-gradient(180deg,rgba(40,40,44,.82),rgba(14,14,16,.94))!important;max-height:40vh;overflow:auto}
.sheet .grabber{display:block;width:3.6em;height:.5em;border-radius:99px;background:rgba(235,235,245,.3);margin:0 auto 1.2em}
.sheet .coming{background:none;box-shadow:none;padding:.6em 0}
.seg{display:inline-flex;padding:.3em;border-radius:99px;background:var(--bg-2)}
.maptop .seg{background:rgba(28,28,30,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.seg button{border:0;background:none;color:var(--text-1);font-size:1.35em;font-weight:600;padding:.45em 1.1em;border-radius:99px}
.seg button.on{background:var(--bg-3);color:var(--text-0)}

/* map markers (MapLibre places these elements) */
.pin{width:3.2em;height:3.2em;border:0;padding:0;background:none;cursor:pointer;font-size:calc(min(100vw,480px)/39.3)}
.pin__dot{width:100%;height:100%;border-radius:50%;background:var(--accent);box-shadow:0 0 0 .3em #fff,0 .5em 1.2em rgba(0,0,0,.6);display:grid;place-items:center;color:#fff;transition:transform 200ms var(--ease-out)}
.pin__dot .i{width:1.7em;height:1.7em;stroke:#fff}
.pin{position:relative}
.pin__count{position:absolute;top:-.5em;right:-.6em;min-width:1.6em;height:1.6em;padding:0 .4em;border-radius:99px;background:#fff;color:#000;font-size:1em;font-weight:700;line-height:1.6em;text-align:center}
.pin--off .pin__dot{background:#6e6e73}
.pin--sel .pin__dot{transform:scale(1.35);box-shadow:0 0 0 .3em #fff,0 0 2.4em .4em var(--accent-glow)}
.me-dot{display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px var(--accent),0 0 0 12px rgba(21,149,255,.25)}
.maplibregl-ctrl-attrib{background:rgba(0,0,0,.55)!important;color:rgba(255,255,255,.7)!important}
.maplibregl-ctrl-attrib a{color:rgba(255,255,255,.8)!important}
.maplibregl-ctrl-bottom-right{bottom:calc(8.4em + var(--safe-b));font-size:11px}

.stcard .st__body small{display:flex;align-items:center;gap:.4em}
.i--xs{width:1.1em;height:1.1em;display:inline-block}
.st--tap{width:100%;border:0;text-align:left;color:inherit;cursor:pointer}

/* account */
button.profile{width:100%;border:0;background:none;padding:0;text-align:left;color:inherit;cursor:pointer}
button.profile.card{background:var(--bg-2);padding:1.4em 1.6em}
button.profile .chev{width:1.8em;height:1.8em;color:var(--text-2)}
.hint{font-size:1.2em;color:var(--text-2);margin:.5em .9em 0}
.field:disabled{opacity:.6}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:1.4em;cursor:pointer}
.card.stack>.toggle-row+.toggle-row{padding-top:1.2em;border-top:.5px solid var(--sep)}
form.stack>.toggle-row{padding:1.4em 1.6em;border-radius:var(--r-card);background:var(--bg-2);box-shadow:var(--edge)}
.toggle-row span{display:flex;flex-direction:column;gap:.3em;min-width:0}
.toggle-row b{font-size:1.6em;font-weight:500}
.toggle-row small{font-size:1.25em;color:var(--text-1);line-height:1.4}
.toggle{appearance:none;-webkit-appearance:none;flex:none;width:5.1em;height:3.1em;border-radius:99px;background:var(--bg-3);position:relative;cursor:pointer;transition:background 200ms;margin:0}
.toggle::after{content:"";position:absolute;left:.2em;top:.2em;width:2.7em;height:2.7em;border-radius:50%;background:#fff;box-shadow:0 .1em .3em rgba(0,0,0,.4);transition:transform 220ms var(--ease-out)}
.toggle:checked{background:var(--accent)}
.toggle:checked::after{transform:translateX(2em)}
.toggle:disabled{opacity:.4;cursor:default}
.btn--danger{background:var(--bad);color:#fff}
.btn--danger-text{color:var(--bad)}
.selectable{user-select:all;-webkit-user-select:all;color:var(--text-0)}

/* inbox */
.note{align-items:flex-start;padding-top:1.2em;padding-bottom:1.2em}
.note__icon{width:3.6em;height:3.6em;border-radius:1.1em;display:grid;place-items:center;background:var(--bg-3);color:var(--text-1);flex:none}
.note__icon .i{width:1.8em;height:1.8em}
.note--new .note__icon{background:var(--accent-soft);color:var(--accent)}
.note--new .row__main b{font-weight:700}
.note .row__main small{line-height:1.4}
.note__when{color:var(--text-2)!important}
.emptystate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1em;padding:6em 2em;color:var(--text-2)}
.i--xl{width:5em;height:5em}

/* ======================= Citrus Cell intro =======================
   Plays once per visit (main.js removes it when it's done, or at once if it
   already played this session). The ring draws, six cells charge one by one
   clockwise while two stay empty (the fruit is the gauge), then the
   wordmark and tagline arrive and the whole stage fades into the app. */
.intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:radial-gradient(60% 45% at 50% 46%,rgba(21,149,255,.16),transparent 70%),#02060d;color:var(--text-0);
  animation:intro-out 450ms var(--ease-out) 2.25s forwards;cursor:pointer}
.intro.skip{animation:intro-out 250ms var(--ease-out) forwards}
.intro__stage{display:flex;flex-direction:column;align-items:center;gap:22px}
.intro__mark{width:min(38vw,168px);height:auto;overflow:visible;filter:drop-shadow(0 0 0 rgba(21,149,255,0));animation:intro-glow 900ms ease-out 1.25s both}
.intro__mark .lg-ring{stroke-dasharray:271;stroke-dashoffset:271;transform:rotate(-90deg);transform-origin:50% 50%;transform-box:view-box;animation:intro-ring 650ms cubic-bezier(.6,.1,.2,1) 120ms forwards}
.intro__mark .lg-cell{transform-origin:50px 50px;transform-box:view-box;opacity:0;transform:scale(.6);animation:intro-cell 380ms cubic-bezier(.34,1.56,.64,1) forwards}
.intro__mark .lg-cell:not(.lg-empty){fill:#2a3240;animation:intro-cell 380ms cubic-bezier(.34,1.56,.64,1) forwards,intro-charge 260ms ease-out forwards}
.intro__mark .lg-cell.lg-c0{animation-delay:.55s,.85s}.intro__mark .lg-cell.lg-c1{animation-delay:.6s,.95s}.intro__mark .lg-cell.lg-c2{animation-delay:.65s,1.05s}
.intro__mark .lg-cell.lg-c3{animation-delay:.7s,1.15s}.intro__mark .lg-cell.lg-c4{animation-delay:.75s,1.25s}.intro__mark .lg-cell.lg-c5{animation-delay:.8s,1.35s}
.intro__mark .lg-cell.lg-c6{animation-delay:.85s}.intro__mark .lg-cell.lg-c7{animation-delay:.9s}
.intro__word{width:min(56vw,250px);height:auto;opacity:0;transform:translateY(10px);animation:intro-rise 520ms var(--ease-out) 1.45s forwards}
.intro__tag{margin:-6px 0 0;font-size:11px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:rgba(235,235,245,.62);opacity:0;animation:intro-tag 600ms var(--ease-out) 1.7s forwards}
@keyframes intro-ring{to{stroke-dashoffset:0}}
@keyframes intro-cell{to{opacity:1;transform:none}}
@keyframes intro-charge{to{fill:#1595ff}}
@keyframes intro-glow{40%{filter:drop-shadow(0 0 18px rgba(21,149,255,.55))}to{filter:drop-shadow(0 0 8px rgba(21,149,255,.25))}}
@keyframes intro-rise{to{opacity:1;transform:none}}
@keyframes intro-tag{from{letter-spacing:.7em}to{opacity:1;letter-spacing:.42em}}
@keyframes intro-out{to{opacity:0;transform:scale(1.04);visibility:hidden}}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* ---------- admin tab ---------- */
.grow{flex:1;min-width:0}
.grow .actions{margin-top:1em}
.block{display:block}
.rowline{display:flex;align-items:flex-start;justify-content:space-between;gap:1em}
.rowline b{font-size:1.6em;font-weight:600}
.rowline small{font-size:1.25em;margin-top:.2em}
.stat--warn b{color:var(--warn)}
.stats+.stats{margin-top:.8em}
.slotgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em;margin-top:1.4em}
.slotcell{display:flex;flex-direction:column;align-items:center;gap:.2em;padding:.9em .4em;border-radius:1.2em;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:var(--text-0)}
.slotcell b{font-size:1.5em;font-weight:600;font-variant-numeric:tabular-nums}
.slotcell small{font-size:1.1em;color:var(--text-1)}
.slotcell--available{border-color:rgba(48,209,88,.45);background:rgba(48,209,88,.1)}
.slotcell--charging{border-color:rgba(255,159,10,.45);background:rgba(255,159,10,.1)}
.slotcell--fault{border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.12)}
.slotcell--empty{opacity:.55}
.actions--row{flex-direction:row;flex-wrap:wrap;margin-top:1.2em}
.actions--row .btn{flex:1;min-width:8em}

/* Rental terms */
.keypoints{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6em;font-size:1.4em;line-height:1.45}
.keypoints li{position:relative;padding-left:1.1em}
.keypoints li::before{content:"";position:absolute;left:0;top:.6em;width:.4em;height:.4em;border-radius:50%;background:var(--accent)}
.termsbox{border-top:.5px solid var(--sep)}
.termsbox summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1em;padding-top:1.2em;font-size:1.45em;font-weight:500}
.termsbox summary::-webkit-details-marker{display:none}
.termsbox summary .chev{width:1.4em;height:1.4em;color:var(--text-2);transform:rotate(90deg);transition:transform 200ms}
.termsbox[open] summary .chev{transform:rotate(-90deg)}
.terms{counter-reset:t;list-style:none;padding:0;display:flex;flex-direction:column;gap:1em;font-size:1.35em;line-height:1.45;margin-top:1.2em;color:var(--text-1)}
.terms b{color:var(--text-0)}
.terms li{counter-increment:t;position:relative;padding-left:1.8em}
.terms li::before{content:counter(t) ".";position:absolute;left:0}
.row .num[data-elapsed]{font-size:1.5em;font-weight:600}
.num.warn{color:var(--bad)}

/* Admin: ad thumbnails, and machine chips that wrap */
.adthumb{width:4.2em;height:5.6em;border-radius:.8em;object-fit:cover;background:var(--bg-3);flex:none;margin-right:1.2em}
.seg{flex-wrap:wrap}

/* Rental terms: the first half, fading out, until "Read more" */
.termsclip{position:relative;max-height:62vh;overflow:hidden}
.termsclip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7em;background:linear-gradient(to bottom,transparent,var(--bg-2));pointer-events:none}
.termsclip.open{max-height:none}
.termsclip.open::after{display:none}

/* Passes and the "get the app" card */
.passprice{font-size:1.6em}
.passprice b{font-size:1.6em;font-weight:700;letter-spacing:-.02em}
.passprice s{color:var(--text-2);margin-right:.3em}
.passcard--deal{box-shadow:0 0 0 1px var(--accent)}
.promo s,.keypoints s{color:var(--text-2)}
.promo .pill{align-self:flex-start}

/* Rental: the secondary actions as tiles under the main one */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:.8em}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;min-height:8.4em;padding:1em .6em;border:0;border-radius:2em;background:var(--bg-2);box-shadow:var(--edge);color:var(--text-0);text-align:center;transition:transform 160ms var(--ease-std)}
.tile:active{transform:scale(.97)}
.tile .i{width:2.2em;height:2.2em;color:var(--accent)}
.tile span{font-size:1.3em;font-weight:500;line-height:1.25}
.promo-row{padding:1.2em 1.6em}


/* ======================= Flagship look =======================
   The business card's navy and glowing electric blue, poster headlines in
   Archivo Black, glass panels, gold for passes. */
.glass{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08),0 1em 3em -1em rgba(0,0,0,.7)}
.kicker{display:block;font-size:1.05em;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--text-1);line-height:1.3}
.kicker--blue{color:var(--cyan)}
.poster{font-family:var(--poster);font-weight:400;font-size:3.6em;line-height:.92;letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance}
.poster em{font-style:normal;background:linear-gradient(180deg,#8fdbff,#1595ff 60%,#0b6fe0);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 .5em rgba(21,149,255,.45))}
.poster em.gold{background:linear-gradient(180deg,#fff1b0,#ffd23f 60%,#f0b90b);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 .5em rgba(255,210,63,.3))}
.poster--xl{font-size:5.2em;margin-top:.25em}
.large{font-family:var(--poster);font-weight:400;font-size:3.6em;letter-spacing:0;line-height:1;text-transform:uppercase}
.nav--large .nav__title{font-family:var(--poster);font-weight:400;font-size:3.4em;letter-spacing:0;line-height:1;text-transform:uppercase}
.listhead{font-size:1.1em;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin:2.4em 0 1em;padding:0 .2em}
.listhead--first{margin-top:0}

/* surfaces */
.card,.list,.stat,button.profile.card,.tile,.chip,.search,.seg,form.stack>.toggle-row{background:var(--panel);box-shadow:var(--edge)}
.card .field,.card .btn--ghost,.sheet .btn--ghost{background:rgba(255,255,255,.06)}
.field{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.panel{position:relative;border-radius:var(--r-card);background:var(--panel);box-shadow:var(--edge)}
.row__lead .i,.st__icon{background:rgba(21,149,255,.14);color:var(--cyan)}
.notice{background:rgba(21,149,255,.1);box-shadow:inset 0 0 0 1px rgba(111,208,255,.16)}
.seg button.on{background:rgba(255,255,255,.12)}

/* buttons: the main action is a glowing blue pill */
.btn{background:var(--blue-grad);color:#fff;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1.2em 3em -.8em rgba(21,149,255,.8)}
.btn--blue{background:var(--blue-grad);color:#fff}
.btn--ghost,.btn--wa{background:rgba(255,255,255,.06);color:var(--text-0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.btn--link{background:none;box-shadow:none;color:var(--accent);font-weight:600}
.btn--danger{background:var(--bad);box-shadow:none}
.btn--danger-text{color:var(--bad)}
.btn:disabled{box-shadow:none}

/* home */
.home .hero{position:relative;display:flex;align-items:flex-end;justify-content:space-between;min-height:29em;margin-top:.4em}
.hero__text{position:relative;z-index:2;align-self:flex-start;padding-top:.8em}
.hero__text .poster{margin-top:.35em;font-size:3.4em}
.hero__stage{position:relative;width:52%;height:29em;display:flex;justify-content:center;align-items:flex-end}
.hero__halo{position:absolute;left:50%;top:1em;width:26em;height:26em;margin-left:-13em;border-radius:50%;background:radial-gradient(closest-side,rgba(21,149,255,.34),transparent 70%)}
.hero__plinth{position:absolute;left:50%;bottom:.2em;width:18em;height:3.2em;margin-left:-9em;border-radius:50%;background:radial-gradient(closest-side,rgba(21,149,255,.65),transparent);filter:blur(.3em)}
.hero__plinth::after{content:"";position:absolute;left:12%;right:12%;top:50%;height:1px;background:linear-gradient(90deg,transparent,#8fdbff,transparent)}
.hero__img{position:relative;z-index:1;display:block;height:27.5em;width:auto;filter:drop-shadow(0 2em 2em rgba(0,0,0,.7))}
.near{display:flex;align-items:center;justify-content:space-between;gap:1.2em;width:100%;margin-top:1.2em;padding:1.4em 1.6em;border:0;text-align:left;color:inherit;cursor:pointer}
.near__main{display:flex;flex-direction:column;gap:.35em;min-width:0}
.near__main b{font-size:1.65em;font-weight:700;overflow-wrap:anywhere}
.near__main small{font-size:1.25em;color:var(--text-1)}
.near__n{display:flex;flex-direction:column;align-items:flex-end}
.near__n b{font-family:var(--poster);font-weight:400;font-size:2.8em;line-height:1}
.near__n small{font-size:.95em;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-1);margin-top:.3em}
.near .chev{width:1.8em;height:1.8em;color:var(--text-2)}
#scanHead{margin-top:2.8em}
.cap{display:flex;align-items:center;gap:1.3em;width:100%;margin-top:1.2em;padding:1.4em 1.6em}
.cap__ico{flex:none;display:grid;place-items:center;width:4.2em;height:4.2em;border-radius:1.4em;color:#fff;background:var(--blue-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1em 2em -1em rgba(21,149,255,.9)}
.cap__ico .i{width:2.1em;height:2.1em}
.cap__main{display:flex;flex-direction:column;gap:.35em;min-width:0}
.cap__main b{font-family:var(--poster);font-weight:400;font-size:2.4em;line-height:1}
.cap__main small{font-size:1.2em;color:var(--text-1)}

/* passes promo (home, rental) */
.promo{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:1em;width:100%;margin-top:1.2em;padding:1.6em;border:0;border-radius:2.2em;text-align:left;cursor:pointer;color:#0a0a0a;background:var(--gold-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1.6em 3em -1.4em rgba(255,210,63,.6)}
.promo::after{content:"";position:absolute;right:-4em;bottom:-6em;width:17em;height:17em;border-radius:50%;border:2.2em solid rgba(255,255,255,.22);pointer-events:none}
.promo__body{position:relative;z-index:1;display:flex;flex-direction:column;gap:.4em;min-width:0}
.promo .kicker{color:#3a2c00}
.promo__title{font-family:var(--poster);font-weight:400;font-size:2.1em;line-height:1.02;text-transform:uppercase}
.promo small{font-size:1.2em;font-weight:600;color:#3a2c00}
.promo s{color:#6b5410}
.promo__go{position:relative;z-index:1;flex:none;margin-top:.4em;display:inline-flex;align-items:center;gap:.1em;height:2.6em;padding:0 .6em 0 1.1em;border-radius:99px;background:#0a0a0a;color:var(--gold);font-size:1.2em;font-weight:700}
.promo__go .i{width:1.3em;height:1.3em}
.promo--slim{flex-direction:row;align-items:center;padding:1.2em 1.4em;border-radius:1.8em;margin-top:1.6em}
.promo--slim .promo__go{margin-top:0}
.promo--slim .promo__title{font-family:var(--font);font-weight:700;font-size:1.45em;text-transform:none}
.promo--slim small{font-size:1.15em;font-weight:500}

/* passes tab */
.passes__head{margin:1.2em 0 .6em}
.passlist{display:flex;flex-direction:column;gap:1em;margin-top:1.6em}
.pass{position:relative;overflow:hidden;border-radius:2.2em;padding:1.6em 1.8em 1.8em}
.pass>*{position:relative;z-index:1}
.pass--gold{color:#0a0a0a;background:var(--gold-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2.4em 4em -1.8em rgba(255,210,63,.55)}
.pass--gold::before{content:"";position:absolute;z-index:0;right:-5em;top:-5em;width:20em;height:20em;border-radius:50%;border:2.4em solid rgba(255,255,255,.2)}
.pass--blue{color:#fff;background:radial-gradient(120% 120% at 100% 0%,rgba(143,219,255,.5),transparent 45%),linear-gradient(135deg,#1595ff,#0b4fc4 50%,#061f55);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2em 3.6em -2em rgba(21,149,255,.8)}
.pass--dark{color:#fff;background:linear-gradient(135deg,#1d2a40,#0d1524);box-shadow:var(--edge)}
.pass__top{display:flex;align-items:center;justify-content:space-between;gap:1em}
.pass--gold .kicker{color:#3a2c00}
.pass--blue .kicker{color:rgba(255,255,255,.82)}
.pass__tag{height:2.4em;padding:0 .9em;display:inline-flex;align-items:center;border-radius:99px;background:#0a0a0a;color:var(--gold);font-size:1em;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.pass__price{display:flex;align-items:baseline;gap:.4em;margin-top:.5em}
.pass__price b{font-family:var(--poster);font-weight:400;font-size:3.4em;line-height:1}
.pass__price small{font-size:1.25em;font-weight:700;opacity:.75}
.pass__price s{font-size:1.4em;font-weight:700;opacity:.55;margin-left:.4em}
.pass__points{list-style:none;padding:0;margin:1em 0 0;display:flex;flex-direction:column;gap:.45em;font-size:1.3em;line-height:1.4;font-weight:500}
.pass__points li{position:relative;padding-left:1.1em}
.pass__points li::before{content:"";position:absolute;left:0;top:.55em;width:.4em;height:.4em;border-radius:50%;background:currentColor;opacity:.7}
.pass--gold .pass__points{color:#2b2100}
.pass--dark .pass__points{color:var(--text-1)}
.pass__buy{display:flex;align-items:center;justify-content:center;width:100%;min-height:3.2em;margin-top:1.3em;border:0;border-radius:99px;font-size:1.5em;font-weight:800;background:#fff;color:#050b14}
.pass--gold .pass__buy{background:#0a0a0a;color:var(--gold)}
.pass__buy:disabled{opacity:.55}
.pass:not(.pass--lead) .pass__points li:nth-child(3){display:none}

/* live rental */
.ring::before{background:conic-gradient(var(--ring,var(--accent)) calc(var(--p,0)*360deg),rgba(111,208,255,.1) 0)}
.ringwrap::before{opacity:.7}
.ring__time{font-family:var(--poster);font-weight:400;font-size:4.4em;letter-spacing:.01em;text-shadow:0 0 .5em rgba(21,149,255,.6)}
.ring__amt{font-size:2.1em;font-weight:800}

/* account: the member card */
.member{position:relative;overflow:hidden;display:flex;flex-direction:column;width:100%;min-height:21em;padding:2em;border:0;border-radius:2.4em;text-align:left;color:#fff;cursor:pointer;
  background:radial-gradient(120% 120% at 100% 0%,rgba(143,219,255,.55),transparent 45%),linear-gradient(135deg,#1595ff 0%,#0b4fc4 45%,#061f55 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3em 5em -2.4em rgba(21,149,255,.8)}
.member::before{content:"";position:absolute;right:-7em;top:-7em;width:26em;height:26em;border-radius:50%;border:2.6em solid rgba(255,255,255,.06)}
.member::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 45%,transparent 60%);pointer-events:none}
.member>*{position:relative;z-index:1}
.member__top{display:flex;align-items:center;justify-content:space-between}
.member__top .brand-logo{height:2.2em;width:auto;color:#fff}
.member__top .lg-ring,.member__top .lg-cell:not(.lg-empty){stroke:#fff;fill:#fff}
.member__top .lg-ring{fill:none}
.member__top .kicker{color:rgba(255,255,255,.82)}
.member__name{font-size:2.2em;font-weight:700;margin-top:auto;padding-top:2em}
.member__mail{font-size:1.25em;opacity:.8;margin-top:.2em;overflow-wrap:anywhere}
.member__stats{display:flex;gap:2.4em;margin-top:1.4em}
.member__stats span{display:flex;flex-direction:column;gap:.2em}
.member__stats b{font-family:var(--poster);font-weight:400;font-size:2em;line-height:1}
.member__stats small{font-size:.9em;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.78}
.member__initials{position:absolute;right:1.6em;bottom:1.4em;font-family:var(--poster);font-size:4.4em;line-height:1;opacity:.12}

/* welcome */
.wl-art--stage{position:relative;min-height:34em;align-items:end}
.wl-art--stage .hero__img{height:32em}
.wl-art--stage .hero__halo{top:2em;width:30em;height:30em;margin-left:-15em}
.welcome .poster{margin-top:.25em}
.welcome .kicker{margin-top:auto}
.wl-icon{background:radial-gradient(70% 70% at 50% 35%,rgba(21,149,255,.34),rgba(21,149,255,.05) 70%),var(--bg-1);box-shadow:inset 0 0 0 1px rgba(111,208,255,.2),0 2em 4em -2em var(--accent-glow)}
.dots i.on{box-shadow:0 0 .8em var(--accent-glow)}
/* The owner's account has a sixth tab (Admin): a little tighter. */
.tabs:has(.tab[data-tab="admin"]:not([hidden])) .tab small{font-size:.95em}
.tabs:has(.tab[data-tab="admin"]:not([hidden])) .tab--scan{width:6.4em}
.tabs:has(.tab[data-tab="admin"]:not([hidden])) .tab__scan{width:5.2em;height:5.2em}