/* SIXPASS design system: asphalt, paper and one sodium-amber accent */
:root {
  --bg: #15171c;
  --bg-elevated: #1a1d23;
  --panel: #1d2027;
  --panel-2: #262a33;
  --ink: #edeae2;
  --muted: #b0b3bc;
  --faint: #9a9ea8;
  --line: #343945;
  --line-strong: #4a5060;
  --acid: #f5b23c;
  --acid-ink: #1c1405;
  --orange: #f5b23c;
  --red: #ff7a70;
  --blue: #c9ccd6;
  --paper: #edeae2;
  --paper-ink: #1c1d21;
  --surface: var(--panel);
  --sub: var(--muted);
  --line2: var(--line-strong);
  --shadow: 0 18px 50px rgba(0, 0, 0, .35);
  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--sans);
  --serif: var(--sans);
  --code: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, monospace;
  --shell: 1240px;
  --gutter: clamp(18px, 4vw, 48px);
  --radius: 10px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url(/fonts/atkinson-mono.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background:
    var(--bg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
}
::selection { background: var(--acid); color: var(--acid-ink); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .46; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: .96; }
p { color: var(--muted); }
strong { color: var(--ink); }
::placeholder { color: var(--faint); }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }

.shell { width: min(var(--shell), 100% - var(--gutter) * 2); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 10000; background: var(--acid); color: var(--acid-ink); padding: 12px 18px; font-weight: 800; transition: top .2s; }
.skip-link:focus { top: 12px; }
.noscript { padding: 32px; background: var(--orange); color: #1a100a; text-align: center; font-weight: 700; }

.announcement {
  min-height: 36px;
  padding: 7px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  background: #11150b;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.announcement-inner { display: flex; align-items: center; gap: 10px; min-width: 0; }
.announcement-inner strong { color: var(--acid); font-size: 12px; }
.announcement-side { color: var(--faint); text-align: right; white-space: nowrap; }
.signal { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 4px rgba(255, 255, 255, .09); flex: 0 0 auto; }
.signal-warn { background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); }
.offline-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: #2a1b14; color: #ffd9cb; padding: 10px var(--gutter); font-size: 13px;
  position: sticky; top: 0; z-index: 80;
}
.offline-banner[hidden] { display: none; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid var(--line);
  background: rgba(21, 23, 28, .84);
  backdrop-filter: blur(18px) saturate(135%);
}
.header-inner { display: flex; align-items: center; gap: 36px; min-height: 78px; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.logo-mark { width: 32px; height: 36px; display: grid; place-items: center; color: var(--acid); }
.logo-mark svg { width: 25px; fill: currentColor; }
.wordmark-text { font-family: var(--display); font-weight: 900; font-size: 25px; letter-spacing: -.045em; line-height: 1; }
.wordmark-text span { color: var(--acid); }
.top-nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.top-nav a {
  padding: 11px 13px; color: var(--muted); font-size: 12px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; border-radius: 2px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.top-nav a:hover, .top-nav a.active { color: var(--ink); background: rgba(255, 255, 255, .045); }
.top-nav a.active::after { content: ""; display: block; height: 2px; margin-top: 6px; background: var(--acid); }
.header-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.icon-button {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  color: var(--muted); background: transparent; border: 1px solid var(--line);
  border-radius: 50%; transition: color .2s, border-color .2s, background .2s;
}
.icon-button:hover { color: var(--ink); border-color: var(--line-strong); background: rgba(255, 255, 255, .04); }
.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.wallet-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 40px; padding: 0 17px; border-radius: 999px;
  background: var(--acid); color: var(--acid-ink); border: 1px solid var(--acid);
  font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  transition: transform .2s var(--ease), background .2s;
}
.wallet-button:hover { transform: translateY(-1px); background: #e4ff80; }
.wallet-button.connected { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.wallet-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wallet-button.connected .wallet-dot { background: var(--acid); box-shadow: 0 0 0 3px rgba(255, 255, 255, .1); }
.menu-button { display: none; width: 42px; height: 42px; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: 50%; }
.menu-button span { display: block; width: 16px; height: 1.5px; margin: 4px auto; background: var(--ink); }

.mobile-dock, .mobile-drawer, .drawer-scrim { display: none; }

main { min-height: 64vh; outline: 0; }
.page { animation: page-in .5s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } }

.eyebrow, .kicker {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--acid); font-size: 12px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
}
.kicker { color: var(--faint); }
.kicker::before { content: "//"; color: var(--acid); letter-spacing: 0; }
.eyebrow .slash { color: var(--faint); }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12px; }
.tiny { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.acid { color: var(--acid); }
.orange { color: var(--orange); }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; }
.hr { height: 1px; background: var(--line); border: 0; margin: 28px 0; }

.btn {
  min-height: 46px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font-size: 12px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase;
  transition: background .2s var(--ease), color .2s, border-color .2s, transform .2s var(--ease);
}
.btn:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-1px); }
.btn-primary { background: var(--acid); border-color: var(--acid); color: var(--acid-ink); }
.btn-primary:hover:not(:disabled) { background: #e5ff83; border-color: #e5ff83; }
.btn-ink { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-quiet { border-color: var(--line); color: var(--muted); }
.btn-quiet:hover:not(:disabled) { color: var(--ink); }
.btn-danger { border-color: rgba(255, 128, 120, .45); color: var(--red); }
.btn-danger:hover:not(:disabled) { border-color: var(--red); background: rgba(255, 128, 120, .07); }
.btn-small { min-height: 36px; padding: 0 13px; font-size: 12px; }
.btn-wide { width: 100%; }
.text-button {
  padding: 0; border: 0; background: transparent; color: var(--acid);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.text-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.link-arrow::after { content: "↗"; color: var(--acid); font-size: 14px; transition: transform .2s; }
.link-arrow:hover::after { transform: translate(2px, -2px); }
button.link-arrow { border: 0; background: transparent; padding: 0; }

.panel { background: linear-gradient(160deg, rgba(255, 255, 255, .025), transparent 60%), var(--panel); border: 1px solid var(--line); }
.panel-pad { padding: clamp(22px, 3vw, 34px); }
.panel-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 22px; }
.panel-head h2, .panel-head h3 { font-size: clamp(24px, 3vw, 34px); }
.panel-head p { margin-top: 7px; font-size: 13px; max-width: 500px; }
.panel-label { font-size: 12px; color: var(--faint); letter-spacing: .16em; text-transform: uppercase; font-weight: 800; }
.panel-label .dot { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--acid); vertical-align: 1px; }

.tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px;
  border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.tag-acid { color: var(--acid); border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); }
.tag-orange { color: var(--orange); border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); }
.tag-red { color: var(--red); border-color: rgba(255, 128, 120, .35); background: rgba(255, 128, 120, .06); }
.tag-blue { color: var(--blue); border-color: rgba(157, 189, 255, .35); background: rgba(157, 189, 255, .06); }
.tag-muted { color: var(--faint); }

/* hero */
.hero { position: relative; padding: clamp(54px, 8vw, 108px) 0 clamp(44px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(380px, .98fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.hero::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 78%); opacity: .24; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { margin: 24px 0 25px; font-size: clamp(66px, 9.6vw, 148px); letter-spacing: -.068em; line-height: .79; text-transform: uppercase; }
.hero h1 .line { display: block; }
.hero h1 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.05em; color: var(--acid); }
.hero-copy > p { max-width: 540px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 34px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 42px; padding-top: 20px; border-top: 1px solid var(--line); }
.hero-proof > div { min-width: 96px; }
.hero-proof span { display: block; color: var(--faint); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.hero-proof strong { display: block; margin-top: 5px; font-family: var(--display); font-size: 21px; letter-spacing: -.03em; }
.hero-proof .tag { margin-top: 7px; }

.hero-stage { position: relative; min-height: 590px; display: grid; place-items: center; isolation: isolate; }
.hero-stage::before {
  content: ""; position: absolute; width: min(520px, 100%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .33), rgba(255, 255, 255, .07) 44%, transparent 68%);
  filter: blur(2px); z-index: -2;
}
.stage-sun { position: absolute; top: 45px; width: 270px; height: 270px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .18) 0 1px, transparent 1px 8px); z-index: -1; }
.stage-sun::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255, 255, 255, .2); border-radius: inherit; }
.city { position: absolute; inset: auto 0 35px; height: 285px; display: flex; align-items: flex-end; gap: 4px; padding: 0 2%; opacity: .85; z-index: -1; mask-image: linear-gradient(to top, #000 22%, rgba(0,0,0,.72) 70%, transparent); }
.tower { flex: 1; border: 1px solid rgba(232, 237, 207, .13); border-bottom: 0; background: linear-gradient(to top, rgba(19, 22, 14, .95), rgba(31, 34, 23, .38)); position: relative; }
.tower::after { content: ""; position: absolute; inset: 10px 24% auto; height: 54%; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .24) 0 2px, transparent 2px 11px); opacity: .38; }
.tower:nth-child(1) { height: 36%; } .tower:nth-child(2) { height: 54%; } .tower:nth-child(3) { height: 44%; }
.tower:nth-child(4) { height: 76%; } .tower:nth-child(5) { height: 57%; } .tower:nth-child(6) { height: 88%; }
.tower:nth-child(7) { height: 64%; } .tower:nth-child(8) { height: 46%; } .tower:nth-child(9) { height: 70%; }
.tower:nth-child(10) { height: 38%; } .tower:nth-child(11) { height: 61%; } .tower:nth-child(12) { height: 32%; }
.stage-road { position: absolute; bottom: 26px; width: 105%; height: 34px; border-top: 1px solid var(--line-strong); background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(255, 255, 255, .38) 34px 58px) center 12px / 100% 2px no-repeat; z-index: -1; }
.club-pass {
  position: relative; width: min(390px, 82%); aspect-ratio: .67; padding: 26px;
  background: linear-gradient(145deg, #ece5d2, #d8cfba); color: var(--paper-ink);
  border-radius: 3px; box-shadow: 0 45px 90px rgba(0, 0, 0, .56), 0 0 0 1px rgba(255,255,255,.2) inset;
  transform: rotate(-5deg); display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.club-pass::before, .club-pass::after { content: ""; position: absolute; left: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); top: 54%; }
.club-pass::after { left: auto; right: -11px; }
.club-pass::before { left: -11px; }
.pass-stripe { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent 0 18px, rgba(32, 33, 22, .035) 18px 19px); pointer-events: none; }
.pass-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 15px; border-bottom: 1px solid rgba(32, 33, 22, .26); }
.pass-brand { font-family: var(--display); font-weight: 900; font-size: 24px; letter-spacing: -.05em; line-height: 1; }
.pass-brand span { display: block; margin-top: 5px; font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: .19em; }
.pass-season { text-align: right; font-size: 12px; font-weight: 800; letter-spacing: .13em; line-height: 1.7; }
.pass-stamp { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(32,33,22,.4); border-radius: 50%; font-size: 20px; }
.pass-mid { position: relative; padding: 26px 0; }
.pass-kicker { font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; opacity: .68; }
.pass-title { margin: 14px 0 10px; font-family: var(--display); font-size: clamp(35px, 4.2vw, 55px); font-weight: 900; letter-spacing: -.065em; line-height: .84; text-transform: uppercase; }
.pass-title em { font-family: var(--serif); font-weight: 400; }
.pass-level { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 11px; border-top: 1px solid rgba(32,33,22,.22); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pass-level strong { font-size: 12px; }
.pass-bottom { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 15px; }
.barcode { height: 35px; background: repeating-linear-gradient(90deg, var(--paper-ink) 0 1px, transparent 1px 3px, var(--paper-ink) 3px 5px, transparent 5px 8px, var(--paper-ink) 8px 9px, transparent 9px 13px); opacity: .75; }
.pass-serial { margin-top: 7px; font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; opacity: .72; }
.pass-qr { width: 55px; height: 55px; background: conic-gradient(from 90deg, var(--paper-ink) 25%, transparent 0 50%, var(--paper-ink) 0 75%, transparent 0) 0 0 / 13px 13px; border: 4px solid var(--paper); box-shadow: 0 0 0 1px var(--paper-ink); }
.hero-sticker { position: absolute; right: 1%; bottom: 18%; width: 105px; height: 105px; border: 1px solid var(--acid); border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: 12px; font-weight: 900; letter-spacing: .13em; line-height: 1.5; color: var(--acid); text-transform: uppercase; transform: rotate(8deg); background: rgba(15,17,12,.78); backdrop-filter: blur(6px); }
.hero-sticker::before { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(216,245,106,.35); border-radius: 50%; }
.hero-corner { position: absolute; left: 0; bottom: 12px; color: var(--faint); font-size: 12px; letter-spacing: .18em; writing-mode: vertical-rl; transform: rotate(180deg); }

.ticker { border-block: 1px solid var(--line); overflow: hidden; background: rgba(255, 255, 255, .015); }
.ticker-track { display: flex; width: max-content; animation: ticker 32s linear infinite; }
.ticker-track span { padding: 11px 32px; font-size: 12px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.ticker-track b { color: var(--acid); font-weight: 800; }
@keyframes ticker { to { transform: translateX(-50%); } }

.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); margin: clamp(32px, 5vw, 64px) auto 0; }
.stat { min-height: 135px; padding: 22px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.stat:last-child { border-right: 0; }
.stat-label { color: var(--faint); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 10px; }
.stat-value { font-family: var(--display); font-size: clamp(29px, 3.2vw, 45px); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.stat-value small { font-family: var(--sans); color: var(--faint); font-size: 12px; letter-spacing: .12em; vertical-align: 5px; margin-left: 4px; }
.stat-foot { color: var(--faint); font-size: 12px; }
.stat.accent { background: var(--acid); color: var(--acid-ink); }
.stat.accent .stat-label, .stat.accent .stat-foot, .stat.accent .stat-value small { color: rgba(22, 26, 8, .62); }

.section { padding: clamp(62px, 9vw, 126px) 0 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: clamp(26px, 4vw, 46px); }
.section-head h2 { margin-top: 12px; font-size: clamp(42px, 6.6vw, 88px); text-transform: uppercase; }
.section-head h2 em { font-family: var(--serif); font-weight: 400; color: var(--acid); }
.section-head p { max-width: 440px; margin-top: 13px; font-size: 14px; }
.section-side { max-width: 390px; text-align: right; padding-bottom: 8px; }
.section-side p { font-size: 13px; }
.section-side .micro { color: var(--faint); margin-top: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }

.split-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(16px, 2.2vw, 28px); }
.split-grid.equal { grid-template-columns: 1fr 1fr; }
.three-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.two-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.feature-card { padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); background: var(--panel); min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; position: relative; overflow: hidden; }
.feature-card .number { color: var(--faint); font-size: 12px; letter-spacing: .14em; }
.feature-card h3 { font-size: clamp(25px, 2.6vw, 36px); margin-bottom: 12px; }
.feature-card p { font-size: 13px; max-width: 380px; }
.feature-card .feature-foot { display: flex; justify-content: space-between; align-items: end; gap: 14px; }
.feature-card.acid { background: var(--acid); color: var(--acid-ink); border-color: var(--acid); }
.feature-card.acid p, .feature-card.acid .number, .feature-card.acid .faint { color: rgba(22,26,8,.64); }
.feature-card.acid .link-arrow::after { color: var(--acid-ink); }

.hero-panel { overflow: hidden; }
.vault-visual { display: grid; place-items: center; padding: 10px 0 26px; }
.vault-ring { width: 210px; height: 210px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; display: grid; place-items: center; background: radial-gradient(circle, rgba(216,245,106,.08), transparent 62%); }
.vault-ring::before, .vault-ring::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed rgba(216,245,106,.22); }
.vault-ring::before { inset: 12px; } .vault-ring::after { inset: 28px; border-style: solid; border-color: rgba(216,245,106,.14); }
.vault-center { text-align: center; position: relative; z-index: 1; }
.vault-center strong { display: block; font-family: var(--display); font-size: 36px; letter-spacing: -.05em; line-height: 1; }
.vault-center span { display: block; margin-top: 6px; color: var(--faint); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.vault-center .signal { margin: 0 auto 9px; }
.vault-mini { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.vault-mini div { padding: 15px 12px 0; border-right: 1px solid var(--line); }
.vault-mini div:last-child { border-right: 0; }
.vault-mini span { display: block; color: var(--faint); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.vault-mini strong { display: block; margin-top: 5px; font-size: 14px; }

.feed { }
.feed-list { display: flex; flex-direction: column; }
.feed-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.feed-row:last-child { border-bottom: 0; }
.feed-icon { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--faint); font-size: 12px; }
.feed-main { min-width: 0; }
.feed-main strong { display: block; font-size: 12px; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-main small { display: block; margin-top: 2px; color: var(--faint); font-size: 12px; letter-spacing: .05em; }
.feed-amount { text-align: right; font-family: ui-monospace, monospace; font-size: 12px; }
.feed-amount small { display: block; color: var(--faint); font-size: 12px; margin-top: 2px; }

.leader-list { display: flex; flex-direction: column; }
.leader-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.leader-row:last-child { border-bottom: 0; }
.leader-rank { font-family: var(--display); font-size: 18px; color: var(--faint); letter-spacing: -.02em; }
.leader-row.top .leader-rank { color: var(--acid); }
.leader-wallet { font-size: 12px; }
.leader-wallet small { display: block; color: var(--faint); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.leader-score { text-align: right; font-family: ui-monospace, monospace; font-size: 12px; }
.leader-score small { color: var(--faint); font-size: 12px; }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.product-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); overflow: hidden; transition: transform .28s var(--ease), border-color .28s; }
.product-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.product-art { position: relative; min-height: 228px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: #14150f; background: var(--paper); }
.product-art::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent 0 13px, rgba(0,0,0,.035) 13px 14px); }
.product-art::after { content: ""; position: absolute; width: 220px; height: 220px; right: -75px; bottom: -95px; border: 1px solid rgba(20,21,15,.22); border-radius: 50%; box-shadow: 0 0 0 22px rgba(20,21,15,.04), 0 0 0 44px rgba(20,21,15,.03); }
.product-art.xbox { background: #d9f1c9; }
.product-art.ps5 { background: #ced9ef; }
.product-art.muted { background: #b9b3a5; }
.product-art .art-label { position: relative; z-index: 1; display: flex; justify-content: space-between; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.product-art .art-platform { position: relative; z-index: 1; font-family: var(--display); font-size: clamp(39px, 4.2vw, 56px); font-weight: 900; letter-spacing: -.06em; line-height: .8; text-transform: uppercase; }
.product-art .art-platform em { display: block; font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; }
.product-art .art-value { position: relative; z-index: 1; font-family: var(--display); font-size: 32px; font-weight: 900; letter-spacing: -.06em; align-self: flex-end; }
.product-body { padding: 19px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.product-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.product-body h3 { font-size: 25px; }
.product-body h3 a:hover { color: var(--acid); }
.product-body p { font-size: 12px; line-height: 1.5; }
.product-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.product-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.price { font-family: var(--display); font-size: 25px; font-weight: 800; letter-spacing: -.04em; }
.price small { font-family: var(--sans); color: var(--faint); font-size: 12px; letter-spacing: .1em; margin-left: 2px; }
.product-card.unavailable .product-art { filter: grayscale(.5); opacity: .7; }

.filter-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.chip { min-height: 34px; padding: 0 13px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip[aria-pressed="true"], .chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip .count { color: var(--faint); margin-left: 6px; }
.filter-bar { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.field-inline { display: flex; align-items: center; gap: 8px; }
.field-inline label { color: var(--faint); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }

.store-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding-bottom: 34px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.store-intro h1 { font-size: clamp(52px, 8vw, 106px); text-transform: uppercase; margin-top: 12px; }
.store-intro h1 em { font-family: var(--serif); font-weight: 400; color: var(--acid); }
.store-intro p { max-width: 380px; margin-top: 12px; font-size: 14px; }
.store-side { max-width: 300px; padding: 18px; border-left: 1px solid var(--line); }
.store-side strong { display: block; font-size: 12px; }
.store-side p { margin-top: 5px; font-size: 12px; }
.notice { border: 1px solid var(--line); padding: 14px 16px; color: var(--muted); font-size: 12px; line-height: 1.65; display: flex; gap: 12px; align-items: flex-start; }
.notice .signal { margin-top: 6px; }
.notice strong { color: var(--ink); }
.notice.warn { border-color: rgba(234,121,81,.3); background: rgba(234,121,81,.05); }
.notice.acid { border-color: rgba(216,245,106,.25); background: rgba(216,245,106,.045); }
.banner-stack { display: grid; gap: 8px; padding-top: 16px; }
.banner-stack .notice { margin: 0; }
.small-outline-btn { min-height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.small-outline-btn:hover { border-color: var(--acid); color: var(--acid); }
.section-kicker { color: var(--faint); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.detail-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(22px, 4vw, 54px); align-items: start; padding-top: 34px; }
.detail-art { min-height: 430px; }
.detail-copy h1 { font-size: clamp(48px, 6.6vw, 84px); text-transform: uppercase; margin: 15px 0 18px; }
.detail-copy > p { font-size: 15px; max-width: 550px; }
.detail-block { border-top: 1px solid var(--line); padding: 18px 0; }
.detail-block h3 { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; }
.detail-block p, .detail-block li { font-size: 12px; line-height: 1.65; color: var(--muted); }
.detail-block ul { margin: 0; padding-left: 17px; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.price-row { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 18px 0; border-block: 1px solid var(--line); margin: 22px 0; }
.price-row .price { font-size: 38px; }

.account-hero { padding: clamp(40px, 6vw, 72px) 0 34px; display: flex; justify-content: space-between; gap: 30px; align-items: flex-end; }
.account-hero h1 { font-size: clamp(52px, 8vw, 100px); text-transform: uppercase; margin-top: 13px; }
.account-hero h1 em { font-family: var(--serif); font-weight: 400; color: var(--acid); }
.account-hero .account-id { text-align: right; }
.account-id span { display: block; color: var(--faint); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.account-id strong { font-family: ui-monospace, monospace; font-size: 12px; }
.account-badge { margin-top: 9px; }
.garage-grid { display: grid; grid-template-columns: 1.1fr .9fr .9fr; gap: 14px; }
.balance-card { grid-row: span 2; padding: clamp(24px, 3vw, 35px); background: var(--acid); color: var(--acid-ink); border: 1px solid var(--acid); display: flex; flex-direction: column; justify-content: space-between; min-height: 330px; position: relative; overflow: hidden; }
.balance-card::after { content: ""; position: absolute; width: 280px; height: 280px; right: -110px; bottom: -150px; border: 1px solid rgba(22,26,8,.24); border-radius: 50%; box-shadow: 0 0 0 30px rgba(22,26,8,.045), 0 0 0 60px rgba(22,26,8,.03); }
.balance-card .panel-label { color: rgba(22,26,8,.62); }
.balance-amount { margin: 20px 0; font-family: var(--display); font-size: clamp(66px, 7.5vw, 104px); font-weight: 900; letter-spacing: -.07em; line-height: .8; }
.balance-amount small { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; vertical-align: 13px; margin-left: 7px; }
.balance-sub { font-size: 12px; color: rgba(22,26,8,.7); }
.balance-foot { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.balance-foot .btn { border-color: rgba(22,26,8,.35); color: var(--acid-ink); }
.balance-foot .btn:hover { border-color: var(--acid-ink); }
.balance-foot .btn-primary { background: var(--acid-ink); color: var(--acid); border-color: var(--acid-ink); }
.heat-card { padding: 24px; border: 1px solid var(--line); background: var(--panel); }
.heat-level { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 13px 0 18px; }
.heat-level strong { font-family: var(--display); font-size: 31px; letter-spacing: -.04em; }
.heat-level span { color: var(--faint); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-align: right; }
.progress { height: 5px; background: rgba(255,255,255,.07); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--acid); }
.progress-foot { display: flex; justify-content: space-between; margin-top: 8px; color: var(--faint); font-size: 12px; }
.heat-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }
.heat-stats span { display: block; color: var(--faint); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.heat-stats strong { display: block; margin-top: 3px; font-size: 14px; }
.mini-card { padding: 24px; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.mini-card .big { font-family: var(--display); font-size: 34px; letter-spacing: -.04em; line-height: 1; }
.mini-card .label { color: var(--faint); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.garage-lower { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; margin-top: 14px; }

.data-list { display: flex; flex-direction: column; }
.data-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.data-row:last-child { border-bottom: 0; }
.data-row .row-main { min-width: 0; }
.data-row strong { display: block; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.data-row small { display: block; margin-top: 2px; color: var(--faint); font-size: 12px; }
.data-row .row-end { text-align: right; flex: 0 0 auto; }
.data-row .row-end strong { font-family: ui-monospace, monospace; font-size: 12px; }
.empty { padding: 25px 0; color: var(--faint); font-size: 12px; line-height: 1.7; }
.empty strong { color: var(--muted); }
.gate { padding: clamp(32px, 6vw, 72px); border: 1px solid var(--line); background: radial-gradient(700px 300px at 80% 20%, rgba(216,245,106,.07), transparent), var(--panel); text-align: center; max-width: 680px; margin: 50px auto; }
.gate .gate-icon { width: 64px; height: 64px; border: 1px solid var(--acid); color: var(--acid); display: grid; place-items: center; margin: 0 auto 24px; border-radius: 50%; font-size: 24px; }
.gate h1, .gate h2 { font-size: clamp(34px, 5vw, 54px); }
.gate p { max-width: 430px; margin: 14px auto 24px; font-size: 13px; }
.gate .btn-row { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

.activity-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.activity-count { color: var(--faint); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.activity-list { border-top: 1px solid var(--line); }
.activity-row { display: grid; grid-template-columns: 44px minmax(0, 1.35fr) minmax(0, .8fr) 120px 92px; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.activity-mark { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--acid); font-size: 14px; }
.activity-mark.sell { color: var(--orange); }
.activity-main strong { display: block; font-size: 12px; }
.activity-main small { display: block; margin-top: 2px; color: var(--faint); font-size: 12px; overflow-wrap: anywhere; }
.activity-meta { font-size: 12px; color: var(--faint); }
.activity-meta strong { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.activity-amount { font-family: ui-monospace, monospace; font-size: 12px; text-align: right; }
.activity-amount small { display: block; color: var(--faint); font-size: 12px; }
.activity-actions { text-align: right; }
.activity-actions a { font-size: 12px; color: var(--acid); letter-spacing: .1em; text-transform: uppercase; font-weight: 800; white-space: nowrap; }
.activity-actions a:hover { text-decoration: underline; text-underline-offset: 3px; }
.chain-strip { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px; }
.chain-strip b { color: var(--ink); font-weight: 700; }
.chain-strip .signal { margin-right: 5px; }

.leaderboard-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.board-row { display: grid; grid-template-columns: 48px 1fr 130px 100px; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.board-row:last-child { border-bottom: 0; }
.board-rank { font-family: var(--display); font-size: 25px; color: var(--faint); letter-spacing: -.03em; }
.board-row.top .board-rank { color: var(--acid); }
.board-wallet strong { display: block; font-size: 13px; }
.board-wallet small { display: block; color: var(--faint); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
.board-heat { font-family: ui-monospace, monospace; font-size: 13px; text-align: right; }
.board-heat small { display: block; color: var(--faint); font-size: 12px; }
.board-badges { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.season-card { padding: 22px; border: 1px solid var(--line); background: var(--panel); }
.season-card + .season-card { margin-top: 10px; }
.season-card h3 { font-size: 22px; }
.season-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.season-stats span { display: block; color: var(--faint); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.season-stats strong { display: block; margin-top: 3px; font-size: 12px; }

.vault-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 14px; }
.vault-big { padding: 26px; border: 1px solid var(--line); background: radial-gradient(450px 260px at 50% 25%, rgba(216,245,106,.09), transparent), var(--panel); display: flex; flex-direction: column; align-items: center; text-align: center; }
.vault-big .vault-ring { width: 250px; height: 250px; margin: 15px 0 25px; }
.vault-big h2 { font-size: 34px; }
.vault-big p { max-width: 330px; margin-top: 10px; font-size: 12px; }
.vault-events .data-row strong { font-size: 12px; }
.vault-progress { margin-top: 20px; width: 100%; max-width: 330px; }
.vault-progress .progress { height: 6px; }
.vault-meta { display: flex; justify-content: space-between; margin-top: 8px; color: var(--faint); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

.support-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 14px; align-items: start; }
.faq-search { position: relative; margin: 16px 0; }
.faq-search input { width: 100%; padding-right: 44px; }
.faq-search svg { position: absolute; right: 16px; top: 50%; width: 17px; transform: translateY(-50%); fill: none; stroke: var(--faint); stroke-width: 1.6; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 15px 0; display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 12px; font-weight: 700; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--acid); font-size: 17px; font-weight: 400; flex: 0 0 auto; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { padding: 0 26px 15px 0; font-size: 12px; line-height: 1.65; }
.ticket-row { padding: 15px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.ticket-row:last-child { border-bottom: 0; }
.ticket-row strong { display: block; font-size: 12px; }
.ticket-row small { display: block; color: var(--faint); font-size: 12px; margin-top: 2px; }
.ticket-row .tag { flex: 0 0 auto; }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.setting-row { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.setting-row strong { display: block; font-size: 12px; }
.setting-row p { font-size: 12px; margin-top: 3px; max-width: 360px; }
.switch { position: relative; width: 42px; height: 23px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.04); transition: background .2s, border-color .2s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; width: 15px; height: 15px; top: 3px; left: 4px; border-radius: 50%; background: var(--faint); transition: transform .2s var(--ease), background .2s; }
.switch input:checked + span { background: rgba(216,245,106,.16); border-color: rgba(216,245,106,.55); }
.switch input:checked + span::after { transform: translateX(19px); background: var(--acid); }
.switch input:focus-visible + span { outline: 2px solid var(--acid); outline-offset: 3px; }

.form-grid { display: grid; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span, .field label, label.field-label { color: var(--faint); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.field-hint { color: var(--faint); font-size: 12px; line-height: 1.5; }
input, select, textarea {
  width: 100%; border: 1px solid var(--line-strong); background: rgba(0,0,0,.2);
  color: var(--ink); padding: 12px 13px; border-radius: 1px; font-size: 13px;
}
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--acid); box-shadow: 0 0 0 1px var(--acid); }
textarea { resize: vertical; min-height: 100px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%), linear-gradient(135deg, var(--faint) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--acid); flex: 0 0 auto; }
.check-line { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 12px; line-height: 1.55; }
.check-line a { color: var(--acid); text-decoration: underline; text-underline-offset: 2px; }
.form-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 5px; }
.form-error { color: var(--red); font-size: 12px; min-height: 0; }
.form-error:empty { display: none; }

.trade-box { margin-top: 44px; border: 1px solid var(--line); padding: clamp(22px, 4vw, 38px); display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; align-items: center; background: var(--panel); }
.trade-box h3 { font-size: clamp(28px, 3vw, 39px); }
.trade-box p { margin-top: 9px; font-size: 12px; }
.trade-form { display: flex; gap: 8px; }
.trade-form input { min-width: 0; font-family: ui-monospace, monospace; font-size: 12px; }
.trade-form .btn { flex: 0 0 auto; }
.rule-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 22px; }
.rule { padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rule span { display: block; color: var(--faint); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.rule strong { display: block; margin-top: 5px; font-size: 13px; }
.rule p { margin-top: 5px; font-size: 12px; line-height: 1.5; }

.season-ledger { display: grid; gap: 10px; }
.season-banner { padding: 18px 20px; border: 1px solid var(--line); background: var(--panel); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.season-banner strong { font-size: 13px; }
.season-banner span { color: var(--faint); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

.modal { width: min(620px, calc(100vw - 32px)); max-height: min(88vh, 900px); margin: auto; padding: 0; border: 1px solid var(--line-strong); background: var(--bg-elevated); color: var(--ink); box-shadow: var(--shadow); }
.modal::backdrop { background: rgba(4, 5, 3, .78); backdrop-filter: blur(6px); }
.modal-shell { position: relative; padding: clamp(26px, 5vw, 44px); overflow-y: auto; max-height: inherit; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); z-index: 2; }
.modal-close:hover { color: var(--ink); border-color: var(--line-strong); }
.modal-close svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.modal h2 { font-size: clamp(31px, 5vw, 46px); margin: 12px 0 14px; text-transform: uppercase; }
.modal h2 em { font-family: var(--serif); font-weight: 400; color: var(--acid); }
.modal h3 { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 24px 0 8px; }
.modal p { font-size: 12px; line-height: 1.7; margin-bottom: 12px; }
.modal .form-grid { margin-top: 18px; }
.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.modal-actions .btn { flex: 1 1 auto; }
.code-display { margin: 18px 0; padding: 18px; border: 1px dashed rgba(216,245,106,.5); background: rgba(216,245,106,.055); color: var(--acid); font-family: ui-monospace, monospace; font-size: clamp(16px, 3vw, 23px); letter-spacing: .08em; text-align: center; overflow-wrap: anywhere; }
.receipt-grid { display: grid; gap: 0; }
.receipt-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.receipt-row span { color: var(--faint); }
.receipt-row strong { text-align: right; overflow-wrap: anywhere; }
.wallet-option { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.wallet-option:hover { color: var(--acid); }
.wallet-option strong { display: block; font-size: 12px; }
.wallet-option small { display: block; color: var(--faint); font-size: 12px; margin-top: 2px; }
.wallet-option .tag { flex: 0 0 auto; }
.search-box { position: relative; }
.search-box input { padding-left: 42px; }
.search-box svg { position: absolute; left: 15px; top: 50%; width: 17px; transform: translateY(-50%); fill: none; stroke: var(--faint); stroke-width: 1.6; }
.search-results { margin-top: 16px; max-height: 370px; overflow-y: auto; border-top: 1px solid var(--line); }
.search-result { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.search-result:hover { color: var(--acid); }
.search-result strong { display: block; font-size: 12px; }
.search-result small { display: block; color: var(--faint); font-size: 12px; margin-top: 2px; }
.search-result .tag { flex: 0 0 auto; }
.mobile-mobile-cta { display: none; }

.toast {
  position: fixed; z-index: 200; left: 50%; bottom: 28px;
  transform: translate(-50%, 18px); opacity: 0; pointer-events: none;
  min-width: 240px; max-width: min(520px, calc(100vw - 32px)); padding: 13px 18px;
  background: var(--ink); color: var(--bg); border-left: 3px solid var(--acid);
  font-size: 12px; font-weight: 600; box-shadow: 0 18px 50px rgba(0,0,0,.35);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #3b201c; color: #ffd9d4; border-left-color: var(--red); }

.site-footer { margin-top: clamp(70px, 9vw, 130px); border-top: 1px solid var(--line); background: rgba(0,0,0,.15); }
.footer-main { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; padding-block: 50px 36px; }
.footer-brand p { margin-top: 17px; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--muted); }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer-links > div { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.footer-head { display: block; margin-bottom: 6px; color: var(--faint); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.footer-links a { color: var(--muted); font-size: 12px; }
.footer-links a:hover { color: var(--acid); }
.footer-legal { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding-block: 18px 26px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; line-height: 1.7; }
.footer-legal span:last-child { max-width: 470px; }

.legal-page { padding: clamp(44px, 7vw, 88px) 0; max-width: 850px; }
.legal-page h1 { font-size: clamp(48px, 7vw, 82px); margin: 12px 0 20px; text-transform: uppercase; }
.legal-page h1 em { font-family: var(--serif); font-weight: 400; color: var(--acid); }
.legal-page h2 { margin: 38px 0 10px; font-size: 23px; }
.legal-page p, .legal-page li { color: var(--muted); font-size: 13px; line-height: 1.8; }
.legal-page ul { padding-left: 20px; }
.legal-page .legal-warning { margin: 24px 0; padding: 16px; border: 1px solid rgba(234,121,81,.35); background: rgba(234,121,81,.06); font-size: 12px; color: #f0c5b7; }
.legal-back { display: inline-flex; gap: 7px; margin-bottom: 25px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--acid); }
.legal-nav { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }

.initial-loader { padding-top: 85px; padding-bottom: 80px; }
.skeleton { background: linear-gradient(100deg, rgba(255,255,255,.04) 20%, rgba(255,255,255,.09) 35%, rgba(255,255,255,.04) 50%); background-size: 300% 100%; animation: shimmer 1.5s infinite linear; border: 1px solid var(--line); }
.skeleton-kicker { width: 190px; height: 12px; margin-bottom: 24px; }
.skeleton-title { width: min(680px, 86%); height: 88px; margin-bottom: 25px; }
.skeleton-copy { width: min(460px, 72%); height: 22px; margin-bottom: 42px; }
.loading-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.loading-grid .skeleton { min-height: 210px; }
@keyframes shimmer { to { background-position: -150% 0; } }

.fatal { max-width: 660px; margin: 9vh auto; padding: 38px; border: 1px solid var(--line); background: var(--panel); }
.fatal h1 { font-size: 43px; margin: 14px 0; }
.fatal p { font-size: 13px; }
.fatal .btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.error-note { border: 1px solid rgba(255,128,120,.3); background: rgba(255,128,120,.05); color: #f0c3c0; padding: 12px 14px; font-size: 12px; line-height: 1.6; }
.loading-line { height: 2px; overflow: hidden; background: rgba(255,255,255,.06); }
.loading-line::after { content: ""; display: block; width: 30%; height: 100%; background: var(--acid); animation: load-line 1s var(--ease) infinite; }
@keyframes load-line { from { transform: translateX(-100%); } to { transform: translateX(430%); } }

.drawer-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.66); }
.drawer-scrim[hidden] { display: none; }
.mobile-drawer { position: fixed; z-index: 100; inset: 0 0 0 auto; width: min(390px, 88vw); background: var(--bg-elevated); border-left: 1px solid var(--line); padding: 20px; transform: translateX(100%); transition: transform .32s var(--ease); overflow-y: auto; flex-direction: column; }
.mobile-drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.drawer-nav { display: flex; flex-direction: column; padding: 14px 0; }
.drawer-nav a { display: flex; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 25px; letter-spacing: -.03em; }
.drawer-nav a span { color: var(--faint); font-family: var(--sans); font-size: 12px; letter-spacing: .12em; }
.drawer-nav a:hover, .drawer-nav a.active { color: var(--acid); }
.drawer-foot { margin-top: auto; padding-top: 25px; display: flex; flex-wrap: wrap; gap: 12px 18px; }
.drawer-foot a { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .09em; }
.drawer-foot p { width: 100%; margin-top: 9px; color: var(--faint); font-size: 12px; line-height: 1.7; }

@media (max-width: 1120px) {
  .top-nav a { padding-inline: 9px; }
  .hero { grid-template-columns: 1.12fr .88fr; }
  .hero-stage { min-height: 510px; }
  .garage-grid { grid-template-columns: 1.2fr .8fr; }
  .balance-card { grid-row: span 1; min-height: 290px; }
  .garage-grid .mini-card:nth-child(4) { display: none; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rule-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: .8fr 1.2fr; }
}
@media (max-width: 920px) {
  .top-nav { display: none; }
  .menu-button { display: block; }
  .mobile-drawer, .drawer-scrim { display: flex; }
  .header-inner { min-height: 66px; }
  .hero { grid-template-columns: 1fr; padding-top: 50px; }
  .hero-stage { min-height: 420px; max-width: 600px; width: 100%; margin: 0 auto; }
  .club-pass { width: min(300px, 68%); }
  .stage-sun { width: 210px; height: 210px; }
  .city { height: 220px; }
  .hero-sticker { right: 4%; bottom: 4%; }
  .hero h1 { font-size: clamp(62px, 14vw, 118px); }
  .section-head { align-items: flex-start; flex-direction: column; gap: 16px; }
  .section-side { text-align: left; max-width: 500px; }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .split-grid, .split-grid.equal, .leaderboard-layout, .vault-layout, .support-grid, .profile-grid, .detail-grid { grid-template-columns: 1fr; }
  .garage-grid { grid-template-columns: 1fr 1fr; }
  .balance-card { grid-column: span 2; }
  .garage-lower { grid-template-columns: 1fr; }
  .three-grid { grid-template-columns: 1fr 1fr; }
  .three-grid > :last-child { grid-column: span 2; }
  .store-intro { align-items: flex-start; flex-direction: column; gap: 18px; }
  .store-side { border-left: 0; border-top: 1px solid var(--line); max-width: none; width: 100%; }
  .activity-row { grid-template-columns: 40px 1fr auto; gap: 12px; }
  .activity-meta { display: none; }
  .activity-amount { text-align: left; }
  .activity-actions { grid-column: 2 / -1; text-align: left; }
  .footer-main { grid-template-columns: 1fr; gap: 35px; }
  .footer-links { gap: 20px; }
  .mobile-mobile-cta { display: inline-flex; }
}
@media (max-width: 640px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .announcement { justify-content: center; text-align: center; min-height: 30px; padding-block: 5px; font-size: 12px; }
  .announcement-side { display: none; }
  .header-actions .icon-button { display: none; }
  .wallet-button { min-height: 37px; padding: 0 13px; font-size: 12px; }
  .header-inner { gap: 12px; }
  .logo-mark { width: 27px; height: 32px; }
  .wordmark-text { font-size: 21px; }
  .site-header { position: relative; }
  .mobile-dock {
    position: fixed; z-index: 70; bottom: 0; left: 0; right: 0;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: rgba(16,18,13,.96); border-top: 1px solid var(--line);
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); backdrop-filter: blur(15px);
  }
  .mobile-dock a, .mobile-dock button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0; background: transparent; border: 0; color: var(--faint); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
  .mobile-dock svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-dock a.active, .mobile-dock a:hover { color: var(--acid); }
  .hero { padding-top: 35px; gap: 20px; }
  .hero-stage { min-height: 360px; }
  .club-pass { width: min(265px, 78%); padding: 19px; }
  .pass-title { font-size: 34px; }
  .pass-mid { padding: 18px 0; }
  .hero-sticker { width: 80px; height: 80px; font-size: 12px; right: -1%; bottom: 3%; }
  .stage-sun { width: 170px; height: 170px; }
  .city { height: 180px; bottom: 20px; }
  .hero h1 { margin: 17px 0 20px; font-size: clamp(54px, 19vw, 84px); }
  .hero-copy > p { font-size: 14px; }
  .hero-actions { margin-top: 25px; gap: 15px; }
  .hero-proof { margin-top: 29px; gap: 15px; }
  .hero-proof > div { min-width: 82px; }
  .hero-proof strong { font-size: 17px; }
  .stat { min-height: 110px; padding: 15px; }
  .stat-value { font-size: 28px; }
  .stat-foot { font-size: 12px; }
  .section { padding-top: 64px; }
  .section-head h2 { font-size: clamp(39px, 12vw, 58px); }
  .three-grid, .two-grid, .product-grid, .garage-grid { grid-template-columns: 1fr; }
  .three-grid > :last-child { grid-column: auto; }
  .balance-card { grid-column: auto; }
  .garage-grid .mini-card:nth-child(4) { display: flex; }
  .feature-card { min-height: 190px; }
  .trade-box { grid-template-columns: 1fr; padding: 20px; }
  .trade-form { flex-direction: column; }
  .rule-grid { grid-template-columns: 1fr 1fr; }
  .rule { padding: 13px; }
  .account-hero { align-items: flex-start; flex-direction: column; gap: 18px; padding-top: 42px; }
  .account-hero .account-id { text-align: left; }
  .activity-row { grid-template-columns: 34px 1fr; }
  .activity-amount { grid-column: 2; text-align: left; }
  .activity-actions { grid-column: 2; }
  .board-row { grid-template-columns: 35px 1fr 80px; }
  .board-badges { display: none; }
  .season-stats { grid-template-columns: 1fr 1fr; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-legal { flex-direction: column; gap: 9px; }
  .footer-legal span:last-child { max-width: none; }
  .modal { width: calc(100vw - 18px); max-height: 92vh; }
  .modal-shell { padding: 28px 19px 22px; }
  .modal-actions .btn { flex: 1 1 100%; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .loading-grid { grid-template-columns: 1fr; }
  .loading-grid .skeleton { min-height: 100px; }
  .skeleton-title { height: 66px; }
  .fatal { margin: 40px 12px; padding: 25px 18px; }
  .vault-ring, .vault-big .vault-ring { width: 190px; height: 190px; }
  .vault-big { padding: 20px; }
  .ticket-row { align-items: flex-start; }
  .legal-page { padding-top: 40px; }
  .legal-page h1 { font-size: 44px; }
  .mobile-drawer { width: 92vw; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
html[data-motion="reduced"] { scroll-behavior: auto; }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
}

/* Touch targets: WCAG 2.2 AA (2.5.8) requires >=24px; use finger-sized hit areas on phones and coarse pointers. */
@media (max-width: 768px), (pointer: coarse) {
  .link-arrow, .footer-links a, .drawer-foot a, .legal-back, .legal-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-links > div { gap: 0; }
  .footer-legal { font-size: 12px; }
}


/* ============ Redesign layer (2026-10): one accent, legible type, ticket and pass vocabulary ============ */
html { font-size: 16px; }
body { background: var(--bg); font-size: 1rem; line-height: 1.6; font-feature-settings: "tnum" 1; }
/* Text casing belongs to each component. */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
.mono, .break, .pass-id, .code-stub-code { font-family: var(--code); letter-spacing: 0; }
.tag, .stat-label, .panel-label, .number, .eyebrow, .btn, .link-arrow, .footer-head, .art-label, .pass-serial { letter-spacing: 0 !important; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }
.link-arrow::after { content: none; }
.ticker, .stage-sun, .city, .stage-road, .hero-sticker, .hero-corner, .hero-stage { display: none !important; }

/* Hero: statement left, pass right */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 7vw, 96px) clamp(28px, 4vw, 56px); }
.hero-copy h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); font-weight: 700; margin: 0; max-width: 14ch; }
.hero-copy p { max-width: 52ch; margin: 22px 0 0; font-size: 1.125rem; line-height: 1.6; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
.link-plain { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 5px; min-height: 44px; display: inline-flex; align-items: center; }
.link-plain:hover { text-decoration-color: var(--acid); }
.btn { border-radius: var(--radius); font-weight: 700; font-size: 1rem; min-height: 48px; padding-inline: 22px; }
.btn-primary { background: var(--acid); color: var(--acid-ink); border-color: var(--acid); }
.btn-primary:hover { filter: brightness(1.08); }

/* The pass: the one memorable object */
.pass { position: relative; padding: 26px 28px 24px; border-radius: 20px; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-strong); box-shadow: var(--shadow); max-width: 460px; justify-self: end; width: 100%; }
.pass::before, .pass::after { content: ""; position: absolute; top: 62%; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); }
.pass::before { left: -12px; clip-path: inset(0 0 0 50%); }
.pass::after { right: -12px; clip-path: inset(0 50% 0 0); }
.pass-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .875rem; color: var(--muted); }
.pass-brand { font-family: var(--display); font-weight: 800; font-size: 1.125rem; color: var(--ink); letter-spacing: .02em !important; }
.pass-level { margin-top: 26px; font-family: var(--display); font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.pass-heat { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; color: var(--muted); }
.pass-heat strong { font-family: var(--display); font-size: clamp(2.8rem, 6vw, 4rem); line-height: 1; color: var(--ink); font-weight: 700; }
.punch { display: grid; grid-template-columns: repeat(16, 1fr); gap: 5px; margin-top: 22px; }
.punch span { height: 26px; border-radius: 5px; background: transparent; border: 1.5px solid var(--line-strong); }
.punch span.on { background: var(--acid); border-color: var(--acid); }
.pass-next { margin: 12px 0 0; font-size: .9375rem; color: var(--muted); }
.pass-foot { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-top: 34px; padding-top: 18px; border-top: 1px dashed var(--line-strong); }
.pass-foot span { display: block; font-size: .875rem; color: var(--muted); }
.pass-foot strong { font-family: var(--display); font-size: 1.375rem; font-weight: 700; }
.pass-id { font-size: .875rem !important; }

/* Ledger: the only ruled table on the page */
.ledger { padding-block: 8px 24px; }
.ledger h2 { font-size: 1.25rem; margin: 0 0 8px; }
.ledger dl { margin: 0; border-top: 1px solid var(--line-strong); }
.ledger dl > div { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(120px, 1fr) minmax(0, 2fr); gap: 8px 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ledger dt { font-weight: 600; }
.ledger dd { margin: 0; }
.ledger dd:not(.note) { font-family: var(--display); font-size: 1.75rem; font-weight: 700; }
.ledger .note { color: var(--muted); font-size: .9375rem; }

/* Sections: plain, left aligned, no decoration */
.section-head h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); max-width: 22ch; }
.section-head p, .panel p, .feature-card p { font-size: 1rem; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.panel, .feature-card, .product-card, .trade-box, .stat { border-radius: 14px; box-shadow: none; }
.tag { font-size: .8125rem; font-weight: 600; border-radius: 999px; }
.tag-acid { color: var(--acid-ink); background: var(--acid); border-color: var(--acid); }

/* Store: ticket-shaped cards with a notch, distinct from panels */
.product-card { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line-strong); }
.product-card::before, .product-card::after { content: ""; position: absolute; top: 46%; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); z-index: 2; }
.product-card::before { left: -10px; clip-path: inset(0 0 0 50%); }
.product-card::after { right: -10px; clip-path: inset(0 50% 0 0); }
.product-art { background: var(--panel-2) !important; color: var(--ink) !important; border-bottom: 1px dashed var(--line-strong); }
.product-art .art-platform { font-family: var(--display); font-weight: 700; color: var(--ink); }
.product-art .art-label, .product-art .art-face { color: var(--muted); }

/* Leaderboard rows read as a table */
.leader-row, .feed-row { padding-block: 12px; border-bottom: 1px solid var(--line); }
.leader-wallet { font-family: var(--code); }

/* Delivered code: paper stub, unambiguous glyphs */
.code-stub { background: var(--paper); color: var(--paper-ink); border-radius: 14px; padding: 18px 20px; position: relative; }
.code-stub::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; border-bottom: 2px dashed rgba(0,0,0,.25); }
.code-stub-code { font-size: 1.375rem; font-weight: 600; word-break: break-all; user-select: all; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .pass { justify-self: stretch; max-width: none; }
  .ledger dl > div { grid-template-columns: 1fr auto; }
  .ledger .note { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Critique pass: tracking, headline fit, neutral notices */
body *:not(h1):not(h2):not(h3):not(h4) { letter-spacing: 0 !important; }
.hero h1, .hero-copy h1 { font-size: clamp(2.25rem, 4.6vw, 3.9rem); letter-spacing: -.025em !important; line-height: 1.06; max-width: none; }
.notice, .notice.warn { background: var(--panel); border-color: var(--line); color: var(--ink); }
.pass-level { font-size: 1.5rem; }
.pass-head, .pass-foot span { color: var(--muted); }
header, .site-header { border-bottom: 1px solid var(--line); }
nav a { font-weight: 600; font-size: .9375rem; }

/* Third feature card no longer shouts; the pass is the loudest object */
.feature-card.acid { background: var(--panel); color: var(--ink); border-color: var(--line-strong); }
.feature-card.acid p, .feature-card.acid .tiny { color: var(--muted); }
.feature-card.acid .link-arrow::after { color: var(--acid); }
.feature-card .number { color: var(--acid); font-weight: 700; font-size: .875rem; }
.art-platform em { font-style: normal; color: var(--muted); font-weight: 500; }
/* Delivered code uses the paper stub */
.code-display { background: var(--paper) !important; color: var(--paper-ink) !important; border: 0 !important; border-radius: 14px; font-family: var(--code); font-size: 1.375rem; font-weight: 600; letter-spacing: 0 !important; word-break: break-all; user-select: all; }

/* Money must never look struck through: plain zeros, tabular figures */
body { font-feature-settings: "tnum" 1, "zero" 0, "ss01" 0; font-variant-numeric: tabular-nums; }
.code-display, .code-stub-code, .mono, .break, .pass-id { font-feature-settings: "zero" 1; }
.announcement-inner strong { white-space: nowrap; }

/* Regression fixes after redesign */
html { overflow-x: clip; }
.link-arrow { font-size: .875rem; font-weight: 600; min-height: 44px; }
.text-button { min-height: 44px; display: inline-flex; align-items: center; }
.footer-links a, .drawer-foot a, .legal-nav a { display: inline-flex; align-items: center; min-height: 28px; }

/* ===== Page system, pass 2: compact headers, ruled sections, outlined pills ===== */

/* Page headers: plain name, one line of context, meta on the right */
.account-hero, .store-intro, .head-compact { padding: clamp(28px, 4vw, 48px) 0 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.account-hero h1, .store-intro h1, .head-compact h1, .page-head h1 { font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 700; letter-spacing: -.02em !important; line-height: 1.08; margin: 0; }
.account-hero p, .store-intro p, .head-compact p { margin: 10px 0 0; max-width: 62ch; font-size: 1.0625rem; line-height: 1.55; color: var(--muted); }
.account-hero .account-id, .head-compact .account-id, .store-intro aside { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.account-id span { font-size: .875rem; color: var(--muted); }
.account-id strong { font-family: var(--code); font-size: .9375rem; font-weight: 600; }

/* Ruled sections replace most cards; cards are reserved for the pass, tickets and code stub */
.panel, .mini-card, .heat-card, .trade-box { background: transparent; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; }
.panel-pad { padding: 18px 0 8px; }
.panel-head h2, .panel-head h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em !important; }
.panel-head p { font-size: .9375rem; color: var(--muted); }
.trade-box { padding: 22px 0; }

/* Outlined pills: status never relies on a filled amber chip */
.tag, .tag-acid, .tag-orange, .tag-muted { background: transparent !important; color: var(--muted) !important; border: 1px solid var(--line-strong) !important; padding: 3px 10px; font-size: .8125rem; font-weight: 600; }
.tag-acid, .tag-orange { color: var(--acid) !important; border-color: var(--acid) !important; }

/* Rows read as table rows at a legible size */
.data-row { padding: 14px 0; }
.data-row strong { font-size: .9375rem; font-weight: 600; }
.data-row small { font-size: .8125rem; color: var(--muted); margin-top: 3px; }
.data-row .row-end strong { font-family: var(--code); font-size: .9375rem; }
.empty { padding: 18px 0; font-size: .9375rem; color: var(--muted); }
.link-arrow { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 5px; }
.link-arrow:hover { text-decoration-color: var(--acid); }

/* Garage */
.garage-top { display: grid; grid-template-columns: minmax(300px, 460px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-block: 28px 12px; }
.garage-top .pass { justify-self: start; }
.garage-side .hero-actions { margin-top: 24px; }
.kv { margin: 0; border-top: 1px solid var(--line-strong); }
.kv > div { display: grid; grid-template-columns: minmax(130px, .9fr) minmax(90px, 1fr) minmax(0, 1.6fr); gap: 6px 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.kv dt { font-weight: 600; }
.kv dd { margin: 0; }
.kv dd:not(.note):not(.text) { font-family: var(--display); font-size: 1.375rem; font-weight: 700; }
.kv .note, .kv .text { color: var(--muted); font-size: .9375rem; }
.garage-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px clamp(24px, 4vw, 64px); padding-block: 16px 24px; }
.list-section { border-top: 1px solid var(--line-strong); padding-top: 16px; min-width: 0; margin-bottom: 20px; }
.list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.list-head h2 { font-size: 1.25rem; margin: 0; }

/* Store */
.product-art { min-height: 0 !important; padding: 18px 20px !important; gap: 14px; }
.product-art .art-label { display: none; }
.product-art .art-platform { font-size: 1.125rem !important; line-height: 1.2; }
.product-art .art-platform em { display: block; font-size: .9375rem; }
.product-art .art-face, .product-art .art-denom { font-size: 1.75rem !important; }
.detail-copy h1 { font-size: clamp(2rem, 3.6vw, 2.75rem); }

@media (max-width: 860px) {
  .garage-top, .garage-lists { grid-template-columns: 1fr; }
  .account-hero .account-id, .head-compact .account-id { align-items: flex-start; text-align: left; }
  .kv > div { grid-template-columns: 1fr auto; }
  .kv .note, .kv .text { grid-column: 1 / -1; }
}

/* Programmatic focus on <main> (route changes) must not draw a ring; interactive controls keep theirs */
main:focus, main:focus-visible { outline: none; }

/* Stat rows: ruled, not boxed or filled */
.stat-band { border: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); border-radius: 0; margin-top: 8px; }
.stat { min-height: 0; padding: 20px 20px 20px 0; border-right: 0; gap: 8px; background: transparent; }
.stat + .stat { padding-left: 20px; border-left: 1px solid var(--line); }
.stat.accent { background: transparent; color: var(--ink); }
.stat.accent .stat-label, .stat.accent .stat-foot, .stat.accent .stat-value small { color: var(--muted); }
.stat-label { font-size: .9375rem; font-weight: 600; color: var(--muted); }
.stat-value { font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -.01em !important; }
.stat-foot { font-size: .875rem; color: var(--muted); }

/* Store art is the ticket face: kind and face value only; the title sits below */
.product-art .art-platform { font-size: .9375rem !important; font-weight: 600; color: var(--muted) !important; }
.product-art .art-value { font-size: 1.75rem !important; font-family: var(--display); font-weight: 700; }
.section-head { margin-bottom: 20px; }
.section { padding-block: clamp(24px, 4vw, 48px); }
.trade-box h3 { font-size: 1.5rem; }

/* Status pills: amber means "needs attention"; normal states are neutral, problems are red */
.tag-ok { color: var(--ink) !important; border-color: var(--line-strong) !important; }
.tag-red { color: var(--red) !important; border-color: var(--red) !important; }
.tag-blue, .tag-muted { color: var(--muted) !important; }

/* Detail and notice text at reading size */
.detail-copy h3, .detail-block h3 { font-size: .9375rem; font-weight: 700; color: var(--ink); margin: 0 0 4px; letter-spacing: 0 !important; }
.detail-copy p, .detail-block p, .detail-copy li { font-size: 1rem; line-height: 1.6; color: var(--muted); }
.notice { font-size: .9375rem; line-height: 1.55; padding: 14px 16px; border-radius: 10px; }
.notice strong { color: var(--ink); }
.stats-strip, .chain-stats, .mini-stats { font-size: .9375rem; }
.filter-chip, .chip, .filter-row button { font-size: .9375rem; font-weight: 600; min-height: 40px; }
.detail-art { min-height: 220px !important; align-self: start; position: sticky; top: 24px; }
.detail-art .art-value { font-size: 2.5rem !important; }
.price-block strong, .detail-price { font-family: var(--display); }

/* Rankings, season banner, empty states */
.leader-rank { color: var(--muted); font-size: 1.125rem; font-weight: 600; }
.leader-row.top .leader-rank { color: var(--ink); }
.leader-row { border-bottom: 1px solid var(--line); }
.season-banner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-strong); background: transparent; border-inline: 0; border-bottom: 0; }
.season-banner > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.season-banner span { color: var(--muted); font-size: .9375rem; }
.gate { text-align: left; align-items: flex-start; padding: 28px 0; border: 0; border-top: 1px solid var(--line-strong); background: transparent; max-width: 62ch; }
.gate h1, .gate h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.gate p { max-width: 62ch; font-size: 1.0625rem; color: var(--muted); }
.gate .btn-row { justify-content: flex-start; }
.gate-icon { display: none; }
.hero-panel { background: transparent; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; }
.gate, .gate p, .gate h1, .gate h2 { margin-inline: 0; text-align: left; }
.stat, .stat + .stat { border-radius: 0; }

/* Settings rows and buttons */
.setting-row > div > strong, .setting-row strong { display: block; font-size: .9375rem; font-weight: 700; margin-bottom: 2px; }
.setting-row p { font-size: 1rem; }
.btn { white-space: nowrap; }

/* Legal pages: reading layout */
.legal-page { max-width: 760px; padding-block: clamp(28px, 5vw, 56px); }
.legal-page h1 { font-size: clamp(2rem, 4vw, 2.75rem); letter-spacing: -.02em !important; margin: 12px 0 20px; }
.legal-page h2 { font-size: 1.375rem; margin: 36px 0 8px; }
.legal-page p, .legal-page li { font-size: 1.0625rem; line-height: 1.7; color: var(--muted); }
.legal-page p strong, .legal-page li strong { color: var(--ink); }
.legal-page .legal-warning { background: var(--panel); border: 1px solid var(--line-strong); border-left: 3px solid var(--acid); color: var(--ink); border-radius: 8px; font-size: 1rem; }
.legal-back { font-size: .9375rem; color: var(--muted); }
.legal-back:hover { color: var(--ink); }

/* No grid, hatch or grain textures anywhere */
.hero::before, .product-art::before, .pass-stripe { content: none !important; display: none !important; background: none !important; }
.gate, .vault-big, .hero-panel, .panel { background-image: none !important; }
@font-face { font-family: "Poppins"; src: url(/fonts/poppins-400i.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(/fonts/poppins-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(/fonts/poppins-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root, [data-theme="dark"] {
  --bg: #0b0b0b; --bg-elevated: #111111; --panel: #141414; --panel-2: #1b1b1b;
  --ink: #f5f5f5; --muted: #a6a6a6; --faint: #8d8d8d; --line: #2e2e2e; --line-strong: #4a4a4a;
  --acid: #f5f5f5; --acid-ink: #0b0b0b; --orange: #f5f5f5; --red: #ff8a80; --blue: #c7c7c7;
  --paper: #f2f2f2; --paper-ink: #0b0b0b; --shadow: 0 24px 60px rgba(0, 0, 0, .5);
  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --display: var(--sans);
  color-scheme: dark;
}
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-feature-settings: normal; font-variant-numeric: normal; }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 500; letter-spacing: -.02em !important; }
::selection { background: var(--ink); color: var(--bg); }

/* Tone scopes used by landing sections: fixed palettes regardless of theme */
.tone-dark { --bg: #0b0b0b; --panel: #141414; --panel-2: #1b1b1b; --ink: #f5f5f5; --muted: #a6a6a6; --faint: #8d8d8d; --line: #2e2e2e; --line-strong: #4a4a4a; --acid: #f5f5f5; --acid-ink: #0b0b0b; background: #0b0b0b; color: #f5f5f5; color-scheme: dark; }
.tone-light { --bg: #f2f2f2; --panel: #ffffff; --panel-2: #f7f7f7; --ink: #0b0b0b; --muted: #595959; --faint: #666666; --line: #d8d8d8; --line-strong: #b0b0b0; --acid: #0b0b0b; --acid-ink: #f5f5f5; background: #f2f2f2; color: #0b0b0b; color-scheme: light; }

/* Pill header: always dark, like the reference */
.announcement { background: transparent; border: 0; padding: 10px var(--gutter) 0; text-align: center; font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.announcement-inner { display: block; }
.announcement strong { color: var(--ink); font-weight: 600; }
.site-header { position: sticky; top: 0; z-index: 60; }
.header-pill { max-width: 1200px; margin: 0 auto; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 10px 0 22px; border: 1px solid #303030; border-radius: 24px; background: rgba(14, 14, 14, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #f5f5f5; }
.header-pill, .header-pill a, .header-pill button { color: #f5f5f5; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { display: grid; place-items: center; width: 26px; height: 26px; background: none !important; color: #f5f5f5; border: 0; }
.logo-mark svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.wordmark-text { font-family: var(--sans); font-size: 1.375rem; font-weight: 600; letter-spacing: -.03em !important; text-transform: none; color: inherit; }
.wordmark-text span { color: inherit; }
.top-nav { display: flex; align-items: center; gap: 4px; }
.top-nav a { padding: 8px 14px; border-radius: 12px; font-size: .9375rem; font-weight: 400; color: #f5f5f5; border: 0; background: transparent; }
.top-nav a:hover { background: rgba(255, 255, 255, .08); }
.top-nav a.active { background: rgba(255, 255, 255, .12); font-weight: 500; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-pill .icon-button { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 0; background: #1d1d1d; }
.header-pill .icon-button:hover { background: #292929; }
.header-pill .icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
.wallet-button { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 10px; border: 0; background: #f5f5f5; color: #0b0b0b !important; font-weight: 500; font-size: .9375rem; }
.wallet-button:hover { background: #ffffff; }
.wallet-dot { display: none; }
.wallet-button.connected .wallet-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #0b0b0b; box-shadow: none; }
.cta-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.menu-button { display: none; }
@media (max-width: 900px) { .top-nav { display: none; } .menu-button { display: inline-grid; } }

/* Buttons */
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary { background: var(--acid); color: var(--acid-ink); border-color: var(--acid); }
.btn-white, .btn-ghost, .btn-black { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px; border-radius: 8px; font-size: .9375rem; font-weight: 500; border: 1px solid transparent; cursor: pointer; }
.btn-white { background: #f5f5f5; color: #0b0b0b; }
.btn-white:hover { background: #ffffff; }
.btn-ghost { background: rgba(255, 255, 255, .04); color: #f5f5f5; border-color: #3a3a3a; }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.btn-black { background: #0b0b0b; color: #f5f5f5; }
.btn-black:hover { background: #1f1f1f; }

/* Landing */
.page-home { padding: 0; }
.landing-shell { width: min(1128px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.landing-stack { position: relative; }
.landing-card { position: sticky; top: 0; perspective: 1400px; perspective-origin: 50% 0; }
.landing-card-first { z-index: 1; }
.landing-card-rise { z-index: 2; }
.landing-surface { position: relative; }
.landing-card-first .landing-surface { min-height: calc(100svh - 78px); display: flex; align-items: center; transform-origin: 50% 0; will-change: transform, opacity; }
.hero-block { padding-block: clamp(48px, 9vh, 120px) clamp(96px, 14vh, 160px); }
.display { font-family: var(--sans); font-size: clamp(2.6rem, 6.1vw, 5.5rem); line-height: 1.03; font-weight: 400; letter-spacing: -.025em !important; margin: 0; color: inherit; }
.display em { font-style: italic; font-weight: 400; }
.display-2 { font-family: var(--sans); font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1.04; font-weight: 400; letter-spacing: -.025em !important; margin: 14px 0 0; color: inherit; }
.display-2 em { font-style: italic; }
.lede { margin: 22px 0 0; max-width: 46ch; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.55; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { margin: 22px 0 0; font-size: .8125rem; color: var(--faint); max-width: 60ch; }
body .eyebrow-line:not(h1):not(h2):not(h3):not(h4) { margin: 0; font-size: .6875rem; font-weight: 600; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--muted); }

.landing-card-rise .landing-surface { min-height: calc(100svh - 78px); border-radius: 56px 56px 0 0; transform-origin: 50% 0; will-change: transform; }
.is-animated .landing-card-rise .landing-surface { transform: scale(.94) rotateX(22.5deg); }
.peekers { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
.peeker { position: absolute; bottom: 0; width: 92px; height: 76px; border-radius: 22px 22px 0 0; background: #f2f2f2; animation: peek 5.5s ease-in-out infinite; transform-origin: 50% 100%; }
.peeker:nth-child(1) { left: 14%; transform: translateY(-48px) rotate(-5deg); }
.peeker:nth-child(2) { right: 12%; animation-delay: -2.4s; transform: translateY(-52px) rotate(4deg); }
.peeker i { position: absolute; top: 26px; width: 9px; height: 18px; border-radius: 5px; background: #0b0b0b; animation: blink 5.5s infinite; }
.peeker i:first-child { left: 28px; } .peeker i:last-child { right: 28px; }
@keyframes peek { 0%, 100% { translate: 0 8px; } 50% { translate: 0 -6px; } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.preview-block { padding-block: clamp(56px, 9vh, 96px) clamp(72px, 12vh, 120px); }
.preview-line { text-align: center; margin: 0 0 clamp(32px, 6vh, 56px); font-size: 1.0625rem; color: #0b0b0b; }

/* App preview window (decorative; real numbers) */
.app-preview { display: grid; grid-template-columns: 190px 1fr; border-radius: 14px; overflow: hidden; background: #0b0b0b; color: #f5f5f5; box-shadow: 0 30px 80px rgba(0, 0, 0, .22); max-height: 560px; border: 1px solid #262626; font-size: .75rem; }
.ap-side { padding: 18px 12px; border-right: 1px solid #1f1f1f; background: #0e0e0e; }
.ap-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem; padding: 4px 8px 16px; }
.ap-mark { width: 16px; height: 16px; border-radius: 4px; background: #f5f5f5; }
.ap-nav span { display: block; padding: 9px 10px; border-radius: 8px; color: #8d8d8d; }
.ap-nav span.on { background: #1c1c1c; color: #f5f5f5; }
.ap-main { padding: 18px 22px 0; min-width: 0; }
.ap-top { display: flex; justify-content: space-between; color: #8d8d8d; padding-bottom: 14px; border-bottom: 1px solid #1f1f1f; }
.ap-balance { background: #161616; border: 1px solid #262626; border-radius: 999px; padding: 3px 10px; color: #f5f5f5; }
.ap-title { font-size: 1.625rem; font-weight: 400; letter-spacing: -.02em; margin: 18px 0 14px; }
.ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ap-card { background: #111111; border: 1px solid #222; border-radius: 12px; padding: 14px 16px; }
.ap-label { color: #8d8d8d; margin-bottom: 8px; }
.ap-big { font-size: 2rem; letter-spacing: -.02em; line-height: 1.1; }
.ap-big small { font-size: .8125rem; color: #8d8d8d; }
.ap-punch { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; margin-top: 14px; }
.ap-punch i { height: 14px; border-radius: 3px; border: 1px solid #3a3a3a; }
.ap-punch i.on { background: #f5f5f5; border-color: #f5f5f5; }
.ap-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #1c1c1c; }
.ap-row:last-child { border-bottom: 0; }
.ap-mute { color: #8d8d8d; }
.ap-pill { border: 1px solid #333; border-radius: 999px; padding: 1px 8px; color: #cfcfcf; }
.ap-table { margin-bottom: -40px; }

/* Hub */
.landing-section { padding-block: clamp(72px, 12vh, 128px); position: relative; z-index: 3; }
.landing-section.tone-dark { margin-top: 0; }
.section-intro { max-width: 760px; }
.orbit-track { height: max(2400px, 320vh); margin-top: 24px; }
.orbit-stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; }
.orbit-canvas { position: relative; width: min(960px, 100%); aspect-ratio: 1000 / 640; }
.orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-ring { stroke: #4a4a4a; }
.orbit-path { stroke: #6d6d6d; }
.orbit-dot { fill: #f5f5f5; transform-box: fill-box; transform-origin: center; }
.is-animated .orbit-path { stroke-dashoffset: 1; }
.is-animated .orbit-dot { opacity: 0; }
.is-animated .orbit-op { opacity: 0; }
.orbit-op { position: absolute; width: 24.5%; max-width: 236px; transform: translate(-50%, -50%); padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #0b0b0b; }
.orbit-op h3, .orbit-item h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: .9375rem; font-weight: 500; line-height: 1.3; letter-spacing: 0 !important; }
.orbit-op p, .orbit-item p { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--muted); }
.op-mark { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-strong); }
.op-mark svg { width: 16px; height: 16px; }
.orbit-center { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; transform: translate(-50%, -50%); perspective: 700px; display: grid; place-items: center; }
.center-float { animation: floaty 6s ease-in-out infinite; transform-style: preserve-3d; }
.center-pass { position: relative; width: 78px; height: 112px; border-radius: 14px; background: #f5f5f5; transform: rotateY(var(--turn, 0deg)); transform-style: preserve-3d; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.center-pass::before, .center-pass::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #0b0b0b; }
.center-pass::before { left: -7px; } .center-pass::after { right: -7px; }
.center-pass i { width: 12px; height: 12px; border-radius: 50%; background: #0b0b0b; }
@keyframes floaty { 0%, 100% { transform: translateY(5px); } 50% { transform: translateY(-7px); } }
.spark { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #f5f5f5; opacity: .05; animation: twinkle 4.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .05; } 50% { opacity: .55; } }
.orbit-list { display: none; }
.orbit-signoff { margin: 24px auto 0; max-width: 40ch; text-align: center; color: var(--muted); font-size: .9375rem; line-height: 1.6; }

/* Principles, FAQ, closing */
.principles-grid, .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 8vw, 112px); align-items: start; }
.principle-list { display: grid; gap: 28px; padding-top: 8px; }
.principle { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; }
.principle-mark svg { width: 24px; height: 24px; }
.principle h3 { margin: 0 0 6px; font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em !important; }
.principle p { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.6; max-width: 46ch; }
.faq-stack { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; font-size: 1rem; font-weight: 500; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { width: 20px; height: 20px; flex: 0 0 auto; transition: transform .25s; }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item p { margin: 0 0 22px; color: var(--muted); font-size: .9375rem; line-height: 1.65; max-width: 62ch; }
.closing { text-align: center; }
.closing-block { display: flex; flex-direction: column; align-items: center; padding-block: 24px; }
.closing .lede { margin-inline: auto; }
.closing .btn-black { margin-top: 28px; }

/* Footer: always dark */
.site-footer { background: #0b0b0b; color: #f5f5f5; margin-top: 0; border: 0; --muted: #a6a6a6; --line: #2e2e2e; --ink: #f5f5f5; }
.footer-main { border-top: 1px solid #2e2e2e; padding-block: 48px 36px; }
.footer-brand .wordmark { color: #a6a6a6; }
.footer-brand p { font-family: var(--sans); font-size: .9375rem; color: #a6a6a6; }
.footer-head { font-size: .9375rem; font-weight: 500; color: #f5f5f5; margin-bottom: 8px; }
.footer-links a { color: #a6a6a6; font-size: .9375rem; }
.footer-links a:hover { color: #f5f5f5; }
.footer-legal { border-top: 0; color: #8d8d8d; font-size: .75rem; }

@media (max-width: 899px) {
  .orbit-track { height: auto; margin-top: 8px; }
  .orbit-stage { position: static; height: auto; display: block; }
  .orbit-canvas { display: none; }
  .orbit-list { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 32px; }
  .orbit-item { padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; }
  .principles-grid, .faq-grid { grid-template-columns: 1fr; }
  .app-preview { grid-template-columns: 1fr; } .ap-side { display: none; }
  .peeker { width: 70px; height: 58px; } .peeker i { top: 20px; width: 7px; height: 14px; } .peeker i:first-child { left: 21px; } .peeker i:last-child { right: 21px; }
  .landing-card-rise .landing-surface { border-radius: 32px 32px 0 0; }
}
@media (max-width: 560px) { .orbit-list { grid-template-columns: 1fr; } .ap-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .peeker, .peeker i, .center-float, .spark { animation: none !important; }
  .is-animated .landing-card-rise .landing-surface { transform: none; }
}

/* Sticky header needs the viewport (not body) to own horizontal clipping */
body { overflow-x: visible; }
html { overflow-x: clip; }
.peeker { bottom: -2px; }
.peeker:nth-child(1) { transform: rotate(-5deg); }
.peeker:nth-child(2) { transform: rotate(4deg); }
@keyframes peek { 0%, 100% { translate: 0 14px; } 50% { translate: 0 -10px; } }
.faq-item summary::after, .faq-item summary::before { content: none !important; }
.header-pill { background: rgba(14, 14, 14, .95); }



/* Phones: the pill must fit, with the menu button always reachable */
body .eyebrow-line:not(h1):not(h2):not(h3):not(h4) { font-size: .75rem; }
@media (max-width: 640px) {
  .header-pill { padding: 0 8px 0 16px; gap: 10px; }
  .header-pill .icon-button[data-action="search"] { display: none; }
  .wallet-button { padding: 0 12px; font-size: .875rem; }
  .wallet-button .cta-arrow { display: none; }
}
@media (max-width: 420px) {
  .wordmark-text { display: none; }
  .header-actions { gap: 6px; }
}
.header-pill .menu-button { width: 42px; height: 42px; border-radius: 12px; border: 0; background: #1d1d1d; place-content: center; gap: 6px; padding: 0; }
.header-pill .menu-button span { display: block; width: 18px; height: 1.6px; border-radius: 2px; background: #f5f5f5; }


/* =====================================================================
   Theme parity: in light mode the landing tones swap, and nothing is hard-coded to one theme
   ===================================================================== *

/* Solid / ghost buttons follow the tone they sit in */
.btn-white, .btn-black { background: var(--ink); color: var(--bg); }
.btn-white:hover, .btn-black:hover { background: var(--ink); filter: brightness(.9); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }

/* Landing details */
.peeker { background: var(--bg); }
.peeker i { background: var(--ink); }
.preview-line { color: var(--ink); }
.orbit-op { background: var(--bg); }
.orbit-ring { stroke: var(--line-strong); }
.orbit-path { stroke: var(--faint); }
.orbit-dot { fill: var(--ink); }
.spark { background: var(--ink); }
.center-pass { background: var(--ink); }
.center-pass::before, .center-pass::after, .center-pass i { background: var(--bg); }
.hero-note { color: var(--muted); }

/* App preview window inverts against the card it sits in */
.app-preview { --ap-bg: #0b0b0b; --ap-side: #0e0e0e; --ap-card: #111111; --ap-ink: #f5f5f5; --ap-mute: #a6a6a6; --ap-line: #262626; --ap-on: #1c1c1c; background: var(--ap-bg); color: var(--ap-ink); border-color: var(--ap-line); }
.ap-side { background: var(--ap-side); border-right-color: var(--ap-line); }
.ap-mark { background: var(--ap-ink); }
.ap-nav span { color: var(--ap-mute); }
.ap-nav span.on { background: var(--ap-on); color: var(--ap-ink); }
.ap-top { color: var(--ap-mute); border-bottom-color: var(--ap-line); }
.ap-balance { background: var(--ap-card); border-color: var(--ap-line); color: var(--ap-ink); }
.ap-card { background: var(--ap-card); border-color: var(--ap-line); }
.ap-label, .ap-mute, .ap-big small { color: var(--ap-mute); }
.ap-punch i { border-color: var(--ap-mute); }
.ap-punch i.on { background: var(--ap-ink); border-color: var(--ap-ink); }
.ap-row { border-bottom-color: var(--ap-line); }
.ap-pill { border-color: var(--ap-line); color: var(--ap-ink); }

/* Footer follows its tone and keeps a rule above it */
.site-footer { background: var(--bg); color: var(--ink); border-top: 1px solid var(--line); }
.footer-main { border-top: 0; }
.footer-brand .wordmark { color: var(--muted); }
.footer-brand p, .footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--ink); }
.footer-head { color: var(--ink); }
.footer-legal { color: var(--muted); }
.site-footer .logo-mark { color: var(--muted); }

/* Contrast fixes found by the two-theme audit */
.header-pill .top-nav a, .header-pill .top-nav a.active, .header-pill .top-nav a:hover { color: #f5f5f5 !important; }
.product-art .art-platform { color: var(--ink) !important; font-weight: 500; }
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] { opacity: 1; background: var(--panel-2) !important; color: var(--muted) !important; border: 1px solid var(--line) !important; cursor: not-allowed; }

/* Forms and dock in both themes */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { border-color: var(--line-strong) !important; }
.mobile-dock { background: var(--bg); border-top: 1px solid var(--line); }
.mobile-dock a, .mobile-dock button { color: var(--muted); }
.mobile-dock a.active, .mobile-dock a[aria-current="page"], .mobile-dock a:hover, .mobile-dock button:hover { color: var(--ink); }
.mobile-dock svg { stroke: currentColor; }

/* Control outlines that read as controls (>= 3:1) in both themes */
:root, [data-theme="dark"] { --control-edge: #707070; }
.btn:not(.btn-primary):not(.btn-white):not(.btn-black), .btn-quiet, .chip, button.chip { border: 1px solid var(--control-edge) !important; }
.btn-ghost { border-color: var(--control-edge); }
.tone-dark .btn-ghost, .tone-light .btn-ghost { border-color: var(--control-edge); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { border-color: var(--control-edge) !important; }

/* ===== Legacy palette cleanup: every remaining surface follows the theme tokens ===== */
.noscript { background: var(--panel-2); color: var(--ink); }
.offline-banner { background: var(--panel-2); color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.btn-primary:hover:not(:disabled) { background: var(--acid); border-color: var(--acid); filter: brightness(.9); }
.btn-danger { border-color: color-mix(in srgb, var(--red) 60%, transparent) !important; color: var(--red); }
.btn-danger:hover:not(:disabled) { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.tag-red { color: var(--red) !important; border-color: var(--red) !important; background: transparent !important; }
.error-note { border: 1px solid color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 8%, transparent); color: var(--ink); border-radius: 10px; font-size: .875rem; }
.notice, .notice.acid, .notice.warn { border-color: var(--line-strong); background: var(--panel); color: var(--ink); }
.vault-ring { background: transparent; }
.vault-ring::before { border-color: var(--line-strong); }
.vault-ring::after { border-color: var(--line); }

/* Switch: off = outlined, on = solid ink with a contrasting knob */
.switch span { background: var(--panel-2); border-color: var(--control-edge); }
.switch span::after { background: var(--muted); }
.switch input:checked + span { background: var(--ink); border-color: var(--ink); }
.switch input:checked + span::after { background: var(--bg); }

/* Fields use the surface token, not a dark-only tint */
input, select, textarea { background-color: var(--panel); border-radius: 8px; color: var(--ink); }


/* Preview window v2: one quiet panel, no sidebar, no repeated navigation */
.app-preview { display: block; max-width: 820px; margin-inline: auto; max-height: none; padding: clamp(22px, 3.5vw, 36px); border-radius: 18px; font-size: .875rem; }
.ap-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--ap-line); }
.ap-title { font-size: 1.25rem; font-weight: 400; letter-spacing: -.01em; color: var(--ap-ink); }
.ap-mute, .ap-note, .ap-label { color: var(--ap-mute); }
.ap-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-block: 22px 18px; }
.ap-stats > div { display: flex; flex-direction: column; gap: 4px; }
.ap-stats strong { font-size: 1.625rem; font-weight: 400; letter-spacing: -.02em; line-height: 1.15; color: var(--ap-ink); }
.ap-label { font-size: .8125rem; }
.ap-punch { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; }
.ap-punch i { height: 8px; border-radius: 3px; border: 1px solid var(--ap-line); background: transparent; }
.ap-punch i.on { background: var(--ap-ink); border-color: var(--ap-ink); }
.ap-note { margin: 10px 0 0; }
.ap-section { margin-top: 26px; }
.ap-section .ap-label { display: block; margin-bottom: 4px; }
.ap-row { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ap-line); color: var(--ap-ink); }
.ap-row:last-child { border-bottom: 0; }
.ap-connect { padding-block: 28px 8px; }
.ap-connect p { margin: 0 0 18px; max-width: 42ch; font-size: 1rem; line-height: 1.55; color: var(--ap-mute); }
.ap-connect .btn-white { background: var(--ap-ink); color: var(--ap-bg); height: 46px; }
.ap-skel { display: grid; gap: 14px; padding-top: 26px; }
.ap-skel i { display: block; height: 10px; border-radius: 6px; background: var(--ap-line); opacity: .7; }
.ap-skel i:nth-child(1) { width: 62%; } .ap-skel i:nth-child(2) { width: 84%; } .ap-skel i:nth-child(3) { width: 48%; }
.ap-guest { min-height: 0; }
@media (max-width: 560px) { .ap-stats { grid-template-columns: 1fr 1fr; } .ap-stats > div:last-child { grid-column: 1 / -1; } .ap-row { grid-template-columns: 1fr auto; } .ap-row .ap-mute:nth-child(2) { display: none; } }

/* =====================================================================
   Voucher cards: face (amount), tear line, stub (price and stock). The whole card is one link.
   ===================================================================== */
.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.voucher { position: relative; }
.voucher-link { display: flex; flex-direction: column; height: 100%; color: inherit; border-radius: 22px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .2s; }
.voucher-link:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.voucher-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

.voucher-face { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 216px; padding: 22px 24px 20px; background: var(--ink); color: var(--bg); }
.voucher-face.is-game { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.vf-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vf-brand { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; }
.vf-region { font-size: .8125rem; font-weight: 500; opacity: .7; }
.vf-amount { display: flex; align-items: flex-start; gap: 6px; line-height: .9; }
.vf-cur { margin-top: .5rem; font-size: .8125rem; font-weight: 500; opacity: .7; letter-spacing: .02em !important; }
.vf-amount strong { font-family: var(--sans); font-size: clamp(3.75rem, 6vw, 5.5rem); font-weight: 400; letter-spacing: -.05em !important; line-height: .85; }
.vf-amount sup { margin-top: .45rem; font-size: 1.5rem; font-weight: 400; letter-spacing: -.02em; vertical-align: top; }
.vf-kind { font-size: .875rem; font-weight: 500; opacity: .75; }

.voucher-stub { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "price go" "stock go"; align-items: center; gap: 2px 16px; padding: 18px 24px 20px; border-top: 2px dashed var(--line-strong); }
.voucher-stub::before, .voucher-stub::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); }
.voucher-stub::before { left: -12px; clip-path: inset(0 0 0 50%); }
.voucher-stub::after { right: -12px; clip-path: inset(0 50% 0 0); }
.vs-price { grid-area: price; display: flex; align-items: baseline; gap: 6px; }
.vs-price strong { font-size: 1.75rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.vs-price span { font-size: .8125rem; font-weight: 500; color: var(--muted); }
.vs-stock { grid-area: stock; display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--muted); }
.vs-stock i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--faint); }
.vs-stock i.on { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 14%, transparent); }
.vs-go { grid-area: go; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--control-edge); transition: background .25s, color .25s, transform .35s var(--ease); }
.vs-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.voucher-link:hover .vs-go { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateX(4px); }

/* Out of stock and unavailable stay readable but step back */
.voucher.is-out .voucher-face { opacity: .55; }
.voucher.is-out .vs-price strong { color: var(--muted); }
.voucher.is-out .voucher-link:hover { transform: none; box-shadow: none; }
.voucher.is-out .voucher-link:hover .vs-go { background: transparent; color: inherit; border-color: var(--control-edge); transform: none; }

/* Detail page face */
.voucher-solo { border-radius: 22px; overflow: hidden; }
.voucher-solo .voucher-face { min-height: 320px; padding: 28px 30px 26px; }
.voucher-solo .vf-amount strong { font-size: clamp(5rem, 9vw, 8rem); }
.voucher-solo .vf-brand { font-size: 1.25rem; }

@media (max-width: 1000px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .product-grid { grid-template-columns: 1fr; } .voucher-face { min-height: 190px; } }
@media (prefers-reduced-motion: reduce) { .voucher-link, .vs-go { transition: none; } .voucher-link:hover { transform: none; } }
.voucher-face * { color: inherit; }
.voucher.is-out .voucher-face { opacity: .6; }
.voucher.is-out .voucher-face, .voucher-face.is-game { opacity: 1; background: var(--panel-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.voucher-face.is-game { color: var(--ink); }
.voucher.is-out .voucher-face .vf-brand, .voucher.is-out .voucher-face .vf-amount strong { color: var(--ink); opacity: .75; }

/* Face labels use real colours (no transparency) so they keep their contrast */
.voucher-face .vf-region, .voucher-face .vf-cur, .voucher-face .vf-kind, .voucher-face .vf-amount sup { opacity: 1; color: color-mix(in srgb, var(--bg) 78%, var(--ink)); }
.voucher.is-out .voucher-face .vf-region, .voucher.is-out .voucher-face .vf-cur, .voucher.is-out .voucher-face .vf-kind, .voucher.is-out .voucher-face .vf-amount sup,
.voucher-face.is-game .vf-region, .voucher-face.is-game .vf-cur, .voucher-face.is-game .vf-kind, .voucher-face.is-game .vf-amount sup { color: var(--muted); }
.voucher-solo { position: sticky; top: 96px; align-self: start; }
.voucher.is-out .voucher-face .vf-brand, .voucher.is-out .voucher-face .vf-amount strong { opacity: 1; }


/* =====================================================================
   Icons: Hugeicons via /icons.svg. Weight and size are set here, not baked into the sprite.
   ===================================================================== */
.icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.header-pill .icon-button .icon { width: 20px; height: 20px; stroke-width: 1.6; }
.theme-toggle .icon-sun, .theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
.cta-arrow { width: 18px; height: 18px; stroke-width: 1.6; }
.menu-button .icon { width: 22px; height: 22px; }
.mobile-dock .icon { width: 22px; height: 22px; stroke-width: 1.5; }
.drawer-head .icon, .modal-close .icon, .icon-button .icon { width: 20px; height: 20px; }
.op-mark .icon, .principle-mark .icon { width: 18px; height: 18px; stroke-width: 1.5; }
.principle-mark .icon { width: 24px; height: 24px; }
.faq-item summary .icon { width: 22px; height: 22px; transition: transform .25s var(--ease); }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.sx-chevron .icon { width: 18px; height: 18px; stroke-width: 1.7; vertical-align: 0; }
.sx-check .icon { width: 18px; height: 18px; stroke-width: 2; vertical-align: 0; }
.vs-go .icon { width: 20px; height: 20px; stroke-width: 1.6; vertical-align: 0; }
.link-arrow .icon, .legal-back .icon, .text-button .icon, .btn .icon { width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.legal-back { display: inline-flex; align-items: center; gap: 8px; }
.activity-mark .icon { width: 20px; height: 20px; vertical-align: 0; }
.faq-search .icon, label.faq-search .icon { width: 18px; height: 18px; }
.search-box .icon { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .faq-item summary .icon { transition: none; } }


/* =====================================================================
   Toast: a dark pill that matches the header, with a status icon, a dismiss button and a quiet countdown
   ===================================================================== */
.toast { position: fixed; z-index: 200; left: 50%; bottom: 28px; transform: translate(-50%, 16px) scale(.98); opacity: 0; visibility: hidden; pointer-events: none;
  display: flex; align-items: center; gap: 12px; width: max-content; min-width: 260px; max-width: min(460px, calc(100vw - 32px)); padding: 10px 10px 10px 12px; overflow: hidden;
  background: rgba(14, 14, 14, .96); color: #f5f5f5; border: 1px solid #303030; border-radius: 18px; border-left-width: 1px;
  font-size: .9375rem; font-weight: 400; line-height: 1.4; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: opacity .28s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; }
.toast.visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.toast-icon { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #1f1f1f; color: #f5f5f5; }
.toast-icon .icon { width: 18px; height: 18px; vertical-align: 0; }
.toast-text { flex: 1 1 auto; min-width: 0; padding-block: 2px; overflow-wrap: anywhere; color: #f5f5f5; }
.toast-close { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: #a6a6a6; cursor: pointer; }
.toast-close:hover { background: #1f1f1f; color: #f5f5f5; }
.toast-close:focus-visible { outline: 2px solid #f5f5f5; outline-offset: 1px; }
.toast-close .icon { width: 16px; height: 16px; vertical-align: 0; }
.toast.error { background: rgba(14, 14, 14, .96); border-color: #5a2a26; color: #f5f5f5; }
.toast.error .toast-icon { background: rgba(255, 138, 128, .14); color: #ff8a80; }
.toast-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #f5f5f5; opacity: .35; transform-origin: left; transform: scaleX(0); }
.toast.error .toast-timer { background: #ff8a80; }
.toast.visible .toast-timer { animation: toast-run 4.6s linear forwards; }
.toast.paused .toast-timer { animation-play-state: paused; }
@keyframes toast-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 760px) { .toast { bottom: calc(84px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .01s, visibility 0s; transform: translate(-50%, 0); } .toast-timer { display: none; } }


/* Arrows and refresh: one family, one rule. Right arrow = action; up-right = leaves the site; diagonals show trade direction. */
.chip, button.chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.chip .icon { width: 16px; height: 16px; stroke-width: 1.6; vertical-align: 0; }
.wallet-button.connected .cta-arrow { display: none; }
.wallet-button .cta-arrow { width: 18px; height: 18px; }
.activity-mark { color: var(--ink); }
.activity-mark.sell { color: var(--muted); }
.activity-mark .icon { width: 18px; height: 18px; stroke-width: 1.6; }
[data-action="refresh-activity"] .icon { transition: transform .5s var(--ease); }
[data-action="refresh-activity"]:hover .icon { transform: rotate(180deg); }
.link-arrow .icon { width: 1em; height: 1em; margin-left: 2px; vertical-align: -.12em; }
@media (prefers-reduced-motion: reduce) { [data-action="refresh-activity"] .icon { transition: none; } [data-action="refresh-activity"]:hover .icon { transform: none; } }


/* Wallet picker: icon tile, then name and detail, then status */
.wallet-option { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 8px; margin-inline: -8px; width: calc(100% + 16px); border-radius: 14px; border-bottom: 0; transition: background .2s; }
.wallet-option + .wallet-option { border-top: 1px solid var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }
.wallet-option:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: inherit; }
.wallet-option:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.wallet-option strong { font-size: 1rem; font-weight: 500; }
.wallet-option small { font-size: .875rem; color: var(--muted); }
.wallet-text { min-width: 0; }
.wallet-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.wallet-mark img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; display: block; }
.wallet-mark.is-glyph { color: var(--ink); }
.wallet-mark .icon { width: 22px; height: 22px; stroke-width: 1.5; vertical-align: 0; }

/* Status labels are plain text with a small dot, not bordered pills. */
.tag, .tag-acid, .tag-orange, .tag-muted, .tag-ok, .tag-red, .tag-blue {
  display: inline-flex; align-items: center; gap: 7px; min-height: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  font-size: .875rem; font-weight: 500; color: var(--muted) !important; white-space: nowrap;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }
.tag-ok::before { background: var(--ink); }
.tag-orange::before { background: var(--orange); }
.tag-red::before, .tag-red { color: var(--red) !important; }
.tag-red::before { background: var(--red); }
.tag-blue::before { background: var(--blue); }
.level-name { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.board-badges { font-size: .8125rem; color: var(--muted); text-align: right; }
/* Filter chips are rounded rectangles; pills stay reserved for buttons. */
.chip, button.chip, .filter-chip { border-radius: 10px !important; }
.board-wallet strong .tag { margin-left: 10px; }

/* ==========================================================================
   Type system. One family (Geist) with a mono companion, three weights (400, 500, 600),
   a modular scale and tighter tracking as sizes grow. Everything above this layer defers to it.
   Scale (rem): 0.75 · 0.8125 · 0.9375 (body) · 1.0625 · 1.25 · 1.75 · 2.5 · 3.5–5.5 (display)
   ========================================================================== */
@font-face { font-family: "Geist"; src: url(/fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url(/fonts/geist-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/geist-mono.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--sans); --serif: var(--sans);
  --code: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --track-display: -.045em; --track-heading: -.03em; --track-small: -.005em;
}
html { -webkit-text-size-adjust: 100%; }
html body {
  font-family: var(--sans); font-size: .9375rem; line-height: 1.6; font-weight: 400;
  font-optical-sizing: auto; font-kerning: normal; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1; font-variant-numeric: normal; letter-spacing: -.003em;
}
html body :is(p, li, dd, small) { text-wrap: pretty; }
html body :is(h1, h2, h3, h4, .display, .display-2) { text-wrap: balance; font-family: var(--sans); font-weight: 500; }

/* Headings: weight 500, large sizes tighten. */
html body :is(h1, .page-head h1, .account-hero h1, .store-intro h1) { font-size: clamp(2.25rem, 4.2vw, 3.5rem); line-height: 1.04; letter-spacing: var(--track-display) !important; }
html body :is(h2, .section-head h2) { font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.12; letter-spacing: var(--track-heading) !important; }
html body :is(h3, .panel-head h3, .list-head h2) { font-size: 1.0625rem; line-height: 1.3; font-weight: 500; letter-spacing: -.012em !important; }
html body .list-head h2, html body .panel-head h3 { font-size: 1.125rem; }
html body .display { font-size: clamp(2.75rem, 6.6vw, 5.75rem); line-height: .99; font-weight: 500; letter-spacing: var(--track-display) !important; }
html body .display-2 { font-size: clamp(2rem, 4.4vw, 3.75rem); line-height: 1.03; font-weight: 500; letter-spacing: var(--track-display) !important; }
html body :is(.display, .display-2, h1) em { font-style: normal; font-weight: 500; color: var(--muted); }

/* Reading text. */
html body .lede { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.55; letter-spacing: -.01em !important; font-weight: 400; max-width: 44ch; }
html body :is(.page-head p, .account-hero p.muted, .store-intro p) { font-size: 1.0625rem; line-height: 1.55; letter-spacing: -.008em !important; max-width: 52ch; }
html body :is(.small, .muted.small, .row-main small, .note, .kv .note) { font-size: .8125rem; line-height: 1.5; }
html body :is(.tiny, .micro) { font-size: .75rem; line-height: 1.5; letter-spacing: 0 !important; }
html body .eyebrow-line:not(h1):not(h2):not(h3):not(h4) { text-transform: none !important; letter-spacing: -.005em !important; font-size: .875rem; font-weight: 500; }

/* Interface text. */
html body :is(.btn, .chip, .nav a, .header-pill a, button) { font-weight: 500; letter-spacing: -.008em !important; }
html body .btn { font-size: .9375rem; }
html body :is(.data-row strong, .row-main strong, .kv dt, label) { font-weight: 500; letter-spacing: -.008em !important; }
html body :is(.stat-label, .ap-label, .kv dt) { font-size: .8125rem; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0 !important; }

/* Numerals: tabular, tight, set large with confidence. */
html body :is(.stat-value, .price, .pass-heat strong, .ap-stats strong, .kv dd:not(.note):not(.text), .board-heat, .season-stats strong, .board-rank, .voucher-face, .voucher-face *) {
  font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1;
  letter-spacing: -.04em !important;
}
html body .stat-value { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1; }
html body .pass-heat strong { font-size: clamp(3rem, 6vw, 4.5rem); line-height: .95; letter-spacing: -.055em !important; }
html body .pass-level { font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em !important; }
html body .ap-stats strong { font-size: 1.5rem; }
html body .price { font-size: 1.5rem; }
html body .kv dd:not(.note):not(.text) { font-size: 1.25rem; }
html body .wordmark-text { font-weight: 600; letter-spacing: -.04em !important; font-size: 1.5rem; }

/* Mono is for identifiers only. */
html body :is(code, kbd, .mono, .code-display, .pass-id, .receipt-hash, .feed-amount, .board-wallet strong, .account-id strong, .row-end strong, .stat-foot) { font-family: var(--code); font-variant-numeric: tabular-nums; }
html body :is(.row-end strong, .account-id strong, .board-wallet strong) { font-size: .875rem; font-weight: 500; letter-spacing: -.01em !important; }
html body .row-end strong { font-size: .9375rem; }

/* Navigation and chrome. */
html body .header-pill nav a, html body .nav a { font-size: .9375rem; font-weight: 500; letter-spacing: -.008em !important; }
html body .announcement, html body .announcement * { font-size: .8125rem; letter-spacing: 0 !important; }
html body :is(.footer-head) { font-size: .875rem; font-weight: 500; text-transform: none; letter-spacing: -.005em !important; }
html body .site-footer a, html body .site-footer p { font-size: .9375rem; }
@media (max-width: 640px) {
  html body .display { font-size: clamp(2.5rem, 13vw, 3.25rem); }
  html body :is(h1, .page-head h1, .account-hero h1) { font-size: 2.25rem; }
}