/* foldoy marketplace: the island after dark.
   Quiet night surfaces; colour and warmth come from the scene art. One action colour. */

@font-face { font-family: "Geist"; src: url("../fonts/GeistSans-400-normal-latin.c7c6c5403943.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/GeistSans-500-normal-latin.217fdb926a60.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/GeistSans-600-normal-latin.dc87336aed76.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-400-normal-latin.c9c1cc18a772.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-500-normal-latin.c15c192528ff.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/SchibstedGrotesk-400.5386d37a2778.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/SchibstedGrotesk-500.28e9c39982c3.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/SchibstedGrotesk-600.979c93d531b9.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/SchibstedGrotesk-700.70a47f952873.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* night surfaces, darkest to lightest */
  --bg: #0a0e15;
  --deep: #0f1520;
  --card: #141b27;
  --raise: #1b2433;
  --hover: #222d3f;
  --hover-2: #2a374d;
  /* ink */
  --text: #f3f1ec;
  --muted: #9aa6b8;
  --faint: #7d889c;
  /* one action colour, plus state */
  --blue: #2b5ef8;
  --blue-2: #4170ff;
  --blue-ink: #a9bdff;
  --blue-wash: #18264a;
  --lamp: #ffb85c;
  --up: #4cc38a;
  --down: #ef6b62;
  --warn: #e8b04f;
  --bad: #ef6b62;
  --ok: #4cc38a;
  /* shape */
  --r: 20px;
  --r-ctl: 12px;
  --r-sm: 9px;
  --sec: 96px;
  --display: "Schibsted Grotesk", "Geist", system-ui, sans-serif;
  --ui: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --shadow: 0 24px 60px rgba(2, 4, 9, .55);
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); color: var(--text); font: 15px/1.55 var(--ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scrollbar-color: var(--hover) var(--bg); text-rendering: optimizeLegibility; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
::selection { background: rgba(43, 94, 248, .5); color: #fff; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: 36px; letter-spacing: -0.03em; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
p, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 600; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; border-radius: 6px; }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.warn { color: var(--warn); }
.bad { color: var(--bad); }
.ok { color: var(--text); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--mono); letter-spacing: .02em; word-break: break-all; }
.grow { flex: 1; }
.spaced { margin-bottom: 24px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
main.wrap { flex: 1; padding-top: 28px; padding-bottom: var(--sec); }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(10, 14, 21, .86); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); }
.bar { height: 68px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--display); font-size: 19px; line-height: 1; letter-spacing: -0.02em; }
.brand-mark { width: 26px; height: 26px; flex: none; }
.brand-word { font-weight: 700; color: var(--text); }
.brand-sub { font-weight: 400; color: var(--muted); margin-left: -3px; }
.mainnav { display: flex; align-items: center; gap: 4px; }
.mainnav a { padding: 8px 12px; border-radius: var(--r-sm); color: var(--muted); font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: color .15s, background .15s; }
.mainnav a:hover { color: var(--text); }
.mainnav a.on { color: var(--text); background: var(--card); }
.topsearch { position: relative; flex: 1 1 280px; max-width: 360px; margin-left: auto; }
.topsearch input[type=search] { height: 40px; padding-left: 40px; padding-right: 40px; background: var(--card); border-radius: var(--r-ctl); }
.topsearch input[type=search]:focus { background: var(--raise); }
.ts-icon { position: absolute; left: 13px; top: 12px; width: 16px; height: 16px; pointer-events: none; opacity: .8; }
.ts-key { position: absolute; right: 10px; top: 10px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--hover); color: var(--muted); font: 500 12px/20px var(--ui); text-align: center; pointer-events: none; transition: opacity .15s; }
.topsearch:focus-within .ts-key { opacity: 0; }
.ts-results { position: absolute; top: 48px; left: 0; right: 0; z-index: 30; background: var(--raise); border-radius: 14px; padding: 6px; box-shadow: var(--shadow); max-height: 70vh; overflow-y: auto; }
.topsearch .ts-results { left: auto; width: max(100%, 380px); }
.ts-results[hidden] { display: none; }
.ts-row { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 8px 10px; border-radius: var(--r-sm); }
.ts-row.on, .ts-row:hover { background: var(--hover); }
.ts-ic { width: 32px; height: 32px; border-radius: 20%; }
.ts-ic.blank { background: var(--hover); width: 56px; height: 30px; border-radius: 8px; }
.ts-ic.st { width: 56px; height: 30px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 150% at 50% 0%, var(--s1, #1b2433) 0%, var(--s2, #0f1520) 72%); }
.ts-ic.st img { max-width: 44px; max-height: 18px; width: auto; height: auto; }
.st-x { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -0.02em; color: #fff; }
.ts-txt { display: flex; flex-direction: column; min-width: 0; }
.ts-txt strong { font-weight: 500; font-size: 14px; }
.ts-all { display: block; padding: 10px; font-size: 13px; color: var(--muted); }
nav.user { display: flex; align-items: center; gap: 18px; }
.search-link { display: none; width: 36px; height: 36px; border-radius: 10px; align-items: center; justify-content: center; background: var(--card); }
.search-link img { width: 17px; height: 17px; opacity: .85; }
@media (max-width: 1000px) { .search-link { display: inline-flex; } }
nav.user > a:not(.btn), nav.user .linkbtn { color: var(--muted); font-size: 14.5px; font-weight: 500; transition: color .15s; }
nav.user > a:not(.btn):hover, nav.user .linkbtn:hover { color: var(--text); }
nav.user .balance { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
nav.user .btn.deposit { background: var(--blue); color: #fff; }
nav.user .btn.deposit:hover { background: var(--blue-2); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; }
.linkbtn:hover { color: var(--text); }
form.inline { display: inline-flex; gap: 4px; }

/* ---------- buttons, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: var(--r-ctl); background: var(--raise); color: var(--text); font: 500 14.5px/1 var(--ui); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, transform .15s; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-2); }
.btn.small { height: 34px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn.big { height: 50px; padding: 0 24px; font-size: 15.5px; }
.btn.wide { width: 100%; }
.btn.danger { background: transparent; color: var(--bad); padding: 0 8px; }
.btn.danger:hover { background: transparent; opacity: .8; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn img { width: 16px; height: 16px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; background: var(--raise); color: var(--text); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background .15s; }
.chip:hover { background: var(--hover); }
.chip span { color: var(--muted); font-weight: 400; }
.chip-f { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 10px; color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; background: transparent; border: 0; cursor: pointer; transition: color .15s, background .15s; }
.chip-f:hover { color: var(--text); }
.chip-f.on { background: var(--raise); color: var(--text); }
.chips { display: flex; gap: 8px; overflow-x: auto; }

/* ---------- forms ---------- */
label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 500; }
.hint { font-size: 12.5px; color: var(--faint); font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], select, textarea {
  width: 100%; height: 42px; padding: 0 14px; border: 0; border-radius: var(--r-ctl); background: var(--deep); color: var(--text); font: 400 14.5px var(--ui); outline: none; transition: background .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
textarea { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { background: var(--hover); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 22px rgba(43, 94, 248, .38); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[readonly] { color: var(--muted); font-size: 13px; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
input.code { font-size: 20px; letter-spacing: .4em; text-align: center; height: 50px; font-variant-numeric: tabular-nums; }
select { background-image: url("../img/icons/chev-d.248a6f81a6f7.svg"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; padding-right: 38px; }
select.mini { height: 30px; width: auto; max-width: 180px; font-size: 13px; padding: 0 30px 0 8px; background-position: right 8px center; }
label.check { flex-direction: row; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 13.5px; font-weight: 400; text-wrap: balance; }
label.check input { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; background: var(--hover); cursor: pointer; transition: background .15s; }
label.check input:checked { background: var(--blue) url("../img/icons/check-white.6363ff376d8a.svg") center / 14px 14px no-repeat; }
label.check input:focus-visible { box-shadow: 0 0 18px rgba(43, 94, 248, .45); }
label.check a, .alt a, .doc a { color: var(--text); }
.field { display: flex; flex-direction: column; gap: 8px; }
.flabel { font-size: 13px; font-weight: 500; color: var(--muted); }
.notice { font-size: 13.5px; color: var(--muted); }
.notice.bad { color: var(--bad); }
.notice.warn { color: var(--warn); }
.seg-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
label.segopt { position: relative; flex-direction: row; align-items: center; justify-content: center; height: 42px; border-radius: var(--r-ctl); background: var(--deep); font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
label.segopt:hover { color: var(--text); background: var(--raise); }
label.segopt.on:hover { background: var(--blue-wash); }
label.segopt.on { background: var(--blue-wash); color: var(--text); }
label.segopt:has(input:focus-visible) { box-shadow: 0 0 18px rgba(43, 94, 248, .4); color: var(--text); }
label.tier input, label.segopt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opt-rows { display: flex; flex-direction: column; gap: 4px; margin: 0 -10px; }
label.segopt.optrow { display: grid; grid-template-columns: 1fr 22px; justify-content: stretch; align-items: center; gap: 12px; height: auto; padding: 11px 10px; border-radius: 12px; background: transparent; color: var(--text); text-align: left; }
label.segopt.optrow:hover { background: var(--raise); }
label.segopt.optrow.on, label.segopt.optrow.on:hover { background: var(--blue-wash); }
.optrow .tier-main strong { font-size: 14.5px; }
.optrow.on .tier-check { opacity: 1; }
.money { position: relative; display: block; color: var(--text); }
.money > span { position: absolute; left: 14px; top: 0; height: 42px; display: flex; align-items: center; color: var(--muted); }
.money input { padding-left: 28px; }
.money.big > span { height: 54px; font-size: 18px; left: 16px; }
.money.big input { height: 54px; font-size: 20px; padding-left: 34px; }
.amt-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.amt-chips .chip-f { background: var(--deep); }
.amt-chips .chip-f.on { background: var(--hover); color: var(--text); }
.copyrow { display: flex; gap: 8px; }
.copyrow .btn { height: 42px; flex: none; }

/* ---------- surfaces ---------- */
.pcard { background: var(--card); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.card { min-width: 0; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.card-head h2 { font-size: 19px; }
.card-head a { color: var(--muted); font-size: 13.5px; font-weight: 500; }
.card-head a:hover { color: var(--text); }
.more { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 14px; font-weight: 500; transition: color .15s; }
.more img { width: 16px; height: 16px; opacity: .7; transition: transform .15s, opacity .15s; }
.more:hover { color: var(--text); }
.more:hover img { opacity: 1; transform: translateX(2px); }
.price { white-space: nowrap; }
.price span { color: var(--muted); font-size: 13px; font-weight: 400; }
.price strong { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--text); }
.oc-price { font-family: var(--display); font-size: 17px; font-weight: 600; white-space: nowrap; letter-spacing: -0.01em; }
.oc-price span { color: var(--muted); font: 400 13px var(--ui); letter-spacing: 0; }
.chg-up { color: var(--up); font-variant-numeric: tabular-nums; }
.chg-down { color: var(--down); font-variant-numeric: tabular-nums; }
.offer-tag, .offer-note { color: var(--lamp); font-size: 13.5px; font-weight: 500; }
.offer-note.muted-note { color: var(--muted); font-weight: 400; }
.offer-note a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.pc-icon { width: 40px; height: 40px; border-radius: 20%; display: block; flex: none; }
.pc-icon.big { width: 52px; height: 52px; }
.pc-icon.blank { background: var(--hover); }
.coin-ic { width: 28px; height: 28px; flex: none; }
.coin-ic.big { width: 32px; height: 32px; }

/* ---------- lander ---------- */
.hero { padding: 28px 0 28px; }
.hero h1 { font-size: 64px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.0; text-wrap: balance; }
.hero-sub { margin-top: 18px; color: var(--muted); font-size: 18px; line-height: 1.5; max-width: 720px; text-wrap: balance; }


.top-row { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 16px; align-items: stretch; }

/* spotlight: real products on a lit stage, title and actions on the left */
.spot { position: relative; border-radius: var(--r); overflow: hidden; background: var(--card); min-height: 476px; isolation: isolate; }
.spot-stage { position: absolute; inset: 0; display: grid; }
.spot-slide { grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; overflow: hidden; }
.spot-slide[data-key="games"] { background: radial-gradient(70% 90% at 80% 40%, rgba(79, 150, 55, .42), transparent 64%), radial-gradient(60% 80% at 100% 100%, rgba(40, 110, 50, .28), transparent 60%), var(--card); }
.spot-slide[data-key="gifts"] { background: radial-gradient(70% 90% at 78% 40%, rgba(120, 70, 220, .45), transparent 62%), radial-gradient(60% 70% at 100% 100%, rgba(0, 112, 209, .35), transparent 60%), radial-gradient(40% 50% at 55% 0%, rgba(230, 0, 18, .18), transparent 60%), var(--card); }
.spot-slide[data-key="bot"] { background: radial-gradient(70% 90% at 78% 40%, rgba(88, 101, 242, .5), transparent 62%), radial-gradient(50% 70% at 100% 100%, rgba(145, 70, 255, .35), transparent 60%), var(--card); }
.spot-slide[data-key="web"] { background: radial-gradient(70% 90% at 78% 40%, rgba(95, 160, 78, .42), transparent 62%), radial-gradient(55% 70% at 100% 100%, rgba(55, 118, 171, .38), transparent 60%), var(--card); }
.spot-slide[data-key="crypto"] { background: radial-gradient(70% 90% at 78% 40%, rgba(247, 147, 26, .34), transparent 62%), radial-gradient(55% 70% at 100% 100%, rgba(52, 93, 157, .34), transparent 60%), radial-gradient(40% 50% at 60% 0%, rgba(80, 175, 149, .2), transparent 60%), var(--card); }
.spot-slide[data-key="domains"] { background: radial-gradient(70% 90% at 78% 40%, rgba(43, 94, 248, .5), transparent 62%), radial-gradient(50% 60% at 100% 100%, rgba(0, 173, 216, .25), transparent 60%), var(--card); }
.spot-visual { grid-area: 1 / 2; align-self: center; justify-self: center; position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 56px 32px 32px 0; }
.spot-body { grid-area: 1 / 1; position: relative; padding: 0 0 32px 32px; display: flex; flex-direction: column; gap: 10px; }
.spot-title { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; color: #fff; }
.spot-meta { color: rgba(243, 241, 236, .8); font-size: 16px; max-width: 34ch; text-wrap: balance; }
.spot-price { color: rgba(243, 241, 236, .7); font-size: 14px; margin-top: 2px; }
.spot-price strong { font-family: var(--display); font-size: 28px; font-weight: 600; color: #fff; letter-spacing: -0.02em; margin: 0 1px; }
.spot-price strong.free { color: var(--lamp); }
.spot-note { color: rgba(243, 241, 236, .6); font-size: 14px; margin-left: 6px; }
.spot-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.spot-actions .btn { height: 42px; }
.spot-tabs { position: absolute; top: 22px; left: 32px; right: 32px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.spot-tab { position: relative; overflow: hidden; height: 32px; padding: 0 13px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06); color: rgba(243, 241, 236, .72); font-size: 13px; font-weight: 500; cursor: pointer; isolation: isolate; transition: color .15s, background .15s; }
.spot-tab:hover { color: #fff; }
.spot-tab.on { color: #fff; background: rgba(255, 255, 255, .1); }
.spot-tab::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; z-index: -1; background: linear-gradient(90deg, rgba(255, 255, 255, .1) calc(100% - 10px), rgba(255, 255, 255, 0)); }
.spot.running .spot-tab.on::after { animation: spotfill var(--spot-ms, 7000ms) linear forwards; }
.spot.paused .spot-tab.on::after { animation-play-state: paused; }
@keyframes spotfill { to { width: 100%; } }
.spot.js .spot-slide { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.spot.js .spot-slide.on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.spot:not(.js) .spot-slide:not(.on) { display: none; }
.spot-slide:not(.on) { pointer-events: none; }
.spot-visual > * { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); transform: translateY(10px) scale(.98); }
.spot-slide.on .spot-visual > * { transform: none; }

/* game board: the four games on their own stages */
.spot-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, 430px); }
.spot-board .stage { border-radius: 16px; box-shadow: 0 18px 44px rgba(2, 4, 9, .45); }
/* gift card fan */
.spot-fan { position: relative; width: 100%; height: 280px; }
.spot-fan .gtile { position: absolute; left: 50%; top: 50%; width: 176px; margin: -55px 0 0 -88px; padding: 14px 16px; border-radius: 15px; box-shadow: 0 20px 50px rgba(2, 4, 9, .55); }
.spot-fan .gtile-logo { height: 28px; }
.spot-fan .gtile-foot { visibility: hidden; }
.spot-fan .gtile:last-child .gtile-foot { visibility: visible; }
.spot-fan .gtile-amt { display: none; }
.spot-fan .gtile:nth-child(1) { transform: translate(-118px, 26px) rotate(-18deg); z-index: 1; }
.spot-fan .gtile:nth-child(2) { transform: translate(-66px, 4px) rotate(-11deg); z-index: 2; }
.spot-fan .gtile:nth-child(3) { transform: translate(-14px, -10px) rotate(-4deg); z-index: 3; }
.spot-fan .gtile:nth-child(4) { transform: translate(38px, -18px) rotate(3deg); z-index: 4; }
.spot-fan .gtile:nth-child(5) { transform: translate(90px, -20px) rotate(10deg); z-index: 5; }
.spot-fan .gtile-name { font-size: 15px; }
.spot-fan .gtile-amt { font-size: 12px; }
/* platform and runtime badges */
.spot-badges { display: grid; grid-template-columns: repeat(2, 108px); gap: 18px; }
.spot-badges:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, 108px); }
.spot-badges:has(> :nth-child(3):last-child) .badge:nth-child(3) { grid-column: 1 / -1; justify-self: center; }
.spot-badges:has(> :nth-child(3):last-child) .badge { transform: none; }
.badge { width: 108px; height: 108px; border-radius: 32px; display: grid; place-items: center; background: var(--c, #222d3f); box-shadow: 0 18px 44px rgba(2, 4, 9, .5); }
.badge img { width: 50px; height: 50px; }
.spot-badges .badge:nth-child(2), .spot-badges .badge:nth-child(4) { transform: translateY(28px); }
/* coins */
.spot-coins { display: grid; grid-template-columns: repeat(2, 104px); gap: 18px; }
.spot-coins img { width: 104px; height: 104px; filter: drop-shadow(0 18px 36px rgba(2, 4, 9, .5)); }
.spot-coins img:nth-child(2), .spot-coins img:nth-child(4) { transform: translateY(26px); }
/* domain endings */
.spot-endings { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 340px; }
.spot-endings span { font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: -0.03em; color: #fff; padding: 10px 18px; border-radius: 18px; background: rgba(255, 255, 255, .08); }
.spot-endings span:nth-child(1) { background: var(--blue); }

/* brand stages: one surface per maker, logo centred */
.stage { position: relative; aspect-ratio: 2 / 1; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden; isolation: isolate; container-type: inline-size; background: radial-gradient(120% 150% at 50% 0%, var(--s1, #1b2433) 0%, var(--s2, #0f1520) 72%); }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 45%, rgba(255, 255, 255, .09), transparent 70%); }
.stage-logo.word { max-width: 58%; max-height: 44%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .35)); }
.stage-logo.mark { height: 40%; width: auto; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .3)); }
.stage-row { display: flex; gap: min(12px, 3.4cqw); }
.stage-chip { width: min(62px, 19cqw); height: min(62px, 19cqw); border-radius: min(19px, 5.8cqw); display: grid; place-items: center; background: var(--c, rgba(255, 255, 255, .12)); box-shadow: 0 10px 26px rgba(2, 4, 9, .35); }
.stage-chip img { width: 50%; height: 50%; }
.stage-type { font-family: var(--display); font-size: min(68px, 24cqw); font-weight: 700; letter-spacing: -0.045em; color: #fff; line-height: 1; text-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.stage.mini .stage-logo.word { max-width: 64%; max-height: 46%; }

[data-b="minecraft"] { --s1: #5b9a3c; --s2: #1a3512; }
[data-b="palworld"] { --s1: #2a9bb0; --s2: #0a2f45; }
[data-b="swap"] { --s1: #c46a1d; --s2: #1e1309; }
[data-b="hytale"] { --s1: #3b6fd0; --s2: #0e2141; }
[data-b="project-zomboid"] { --s1: #7a2a2a; --s2: #1b1012; }
[data-b="terraria"] { --s1: #3e8c3a; --s2: #0e281d; }
[data-b="enshrouded"] { --s1: #2a6d88; --s2: #0a1c2a; }
[data-b="satisfactory"] { --s1: #c9761f; --s2: #28190b; }
[data-b="factorio"] { --s1: #9c5220; --s2: #221108; }
[data-b="7-days-to-die"] { --s1: #8c1f1f; --s2: #140a0a; }
[data-b="core-keeper"] { --s1: #2a7cb2; --s2: #13102d; }
[data-b="rust"] { --s1: #4a3328; --s2: #140d0a; }
[data-b="valheim"] { --s1: #3b2f34; --s2: #0d0a0c; }
[data-b="bot"] { --s1: #4652c8; --s2: #161a44; }
[data-b="web"] { --s1: #2f6f52; --s2: #0c241b; }
[data-b="vps"] { --s1: #5c3fb8; --s2: #160f33; }
[data-b="domains"] { --s1: #3a6dff; --s2: #0e2066; }
[data-b="email"] { --s1: #8a3e66; --s2: #2a1022; }
[data-b="steam"] { --s1: #2a475e; --s2: #12161e; }
[data-b="amazon"] { --s1: #3a4b60; --s2: #131921; }
[data-b="playstation"] { --s1: #0a6fd6; --s2: #00266e; }
[data-b="xbox"] { --s1: #1f9a1f; --s2: #0a4a0a; }
[data-b="nintendo"] { --s1: #f0273a; --s2: #8a000b; }
[data-b="apple"] { --s1: #4a4a4f; --s2: #0c0c0e; }
[data-b="google-play"] { --s1: #1a73e8; --s2: #0b6b45; }
[data-b="netflix"] { --s1: #46161b; --s2: #170c0e; }
[data-b="discord"] { --c: #5865f2; }
[data-b="telegram"] { --c: #26a5e4; }
[data-b="x"] { --c: #2a3039; }
[data-b="twitch"] { --c: #9146ff; }
[data-b="node"] { --c: #4f8f42; }
[data-b="python"] { --c: #3776ab; }
[data-b="php"] { --c: #6a6fb0; }
[data-b="ubuntu"] { --c: #e95420; }
[data-b="debian"] { --c: #a81d33; }
[data-b="fedora"] { --c: #3c6eb4; }
[data-b="archlinux"] { --c: #1793d1; }
[data-b="almalinux"] { --c: #0f4266; }
[data-b="rockylinux"] { --c: #10b981; }
[data-b="go"] { --c: #0096be; }

/* gift cards, shaped like the cards */
.gtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gtile { position: relative; aspect-ratio: 1.586; border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; overflow: hidden; isolation: isolate; background: radial-gradient(140% 130% at 0% 0%, var(--s1, #1b2433) 0%, var(--s2, #0f1520) 78%); transition: transform .25s ease, box-shadow .25s ease; }
.gtile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 42%); }
.gtile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(2, 4, 9, .5); }
.gtile-logo { height: 30px; width: auto; max-width: 42%; object-fit: contain; object-position: left center; align-self: flex-start; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .25)); }
.gtile-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gtile-name { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.gtile-amt { font-size: 13.5px; color: rgba(255, 255, 255, .82); white-space: nowrap; }

/* sidebar */
.lside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.side-card { background: var(--card); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.side-card h2 { font-size: 19px; }
.side-card h2 a:hover { color: var(--blue-ink); }
.side-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.side-h .age { display: flex; gap: 10px; color: var(--faint); font-size: 12.5px; }
.dsearch { display: flex; gap: 8px; }
.dsearch input { background: var(--deep); }
.coins { flex: 1; }
.coin-list { display: flex; flex-direction: column; margin: 0 -8px; }
.coin-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 84px auto; gap: 12px; align-items: center; padding: 9px 8px; border-radius: var(--r-ctl); }
.coin-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.coin-name strong { font-size: 14px; }
.coin-name span { color: var(--muted); font-size: 12.5px; }
.coin-px { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; min-width: 78px; }
.coin-px strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.coin-px span { font-size: 12.5px; }
.coin-px em { font-style: normal; color: var(--faint); margin-left: 4px; }
.spark.down .spark-day { stroke: var(--down); }
.spark { width: 84px; height: 30px; overflow: visible; }
.spark-week { fill: none; stroke: rgba(154, 166, 184, .45); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-day { fill: none; stroke: var(--up); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-x { stroke: rgba(243, 241, 236, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark-tip { position: fixed; z-index: 40; pointer-events: none; background: var(--raise); color: var(--text); border-radius: 9px; padding: 6px 9px; font-size: 12.5px; line-height: 1.3; box-shadow: var(--shadow); white-space: nowrap; }
.spark-tip span { color: var(--muted); display: block; }
.spark-tip[hidden] { display: none; }

/* shelves of art cards */
.shelf { margin-top: 80px; }
/* All products: tabs and a filter over the shelves */
.catalog { margin-top: 80px; }
.cat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cat-head h2 { font-size: 32px; letter-spacing: -0.03em; }
.cat-head input[type=search].cat-filter { width: 240px; height: 40px; background: var(--card); }
.cat-tabs { display: flex; gap: 4px; margin: 10px -12px 0; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 1001px) {
  .cat-tabs { position: sticky; top: var(--head-h, 68px); z-index: 10; background: rgba(10, 14, 21, .86); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); }
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab { flex: none; height: 38px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); font: 500 15px var(--ui); white-space: nowrap; cursor: pointer; transition: color .15s, background .15s; }
.cat-tab:hover { color: var(--text); }
.cat-tab.on { color: var(--text); background: var(--card); }
.cat-tab:focus-visible { outline: none; box-shadow: 0 0 18px rgba(43, 94, 248, .4); }
.cat-none { margin-top: 26px; }
@media (max-width: 1000px) {
  .cat-tabs { margin: 10px -16px 0; padding: 10px 16px; scroll-padding: 0 24px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); }
  .cat-tabs .cat-tab:first-child { margin-left: -14px; }
}
@media (max-width: 640px) {
  .cat-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .cat-head h2 { font-size: 28px; }
  .cat-head input[type=search].cat-filter { width: 100%; }
}
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.shelf-head h2 { font-size: 28px; letter-spacing: -0.03em; }

/* how buying works */
.how { margin-top: 80px; }
.how > h2, .faq > h2 { font-size: 28px; letter-spacing: -0.03em; margin-bottom: 20px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps li { padding: 4px 0; display: flex; flex-direction: column; gap: 6px; }
.step-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.step-n { font-family: var(--display); font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--text); }
.step-art { display: flex; align-items: center; gap: 6px; }
.step-art img { width: 34px; height: 34px; }
.step-art .step-app { width: 34px; height: 34px; }
.step-art .stage-chip { width: 34px; height: 34px; border-radius: 10px; box-shadow: none; }
.step-art .stage-chip img { width: 18px; height: 18px; }
[data-b="steam"], [data-b="playstation"], [data-b="netflix"] { --c: var(--s1); }
.steps h3 { font-size: 18px; }
.steps p { color: var(--muted); font-size: 14.5px; text-wrap: pretty; }

/* questions */
.faq { margin-top: 80px; }
.how + .faq { margin-top: 68px; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; align-items: start; }
.faq-item { background: var(--card); border-radius: 16px; transition: background .15s; }
.faq-item:hover, .faq-item[open] { background: var(--raise); }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 500; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-wrap: balance; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--muted); font-size: 20px; line-height: 1; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 20px 18px; color: var(--muted); font-size: 14.5px; max-width: 62ch; text-wrap: pretty; }

/* ---------- footer: an index of everything on sale ---------- */
.foot { position: relative; padding: 0 0 56px; color: var(--muted); font-size: 13.5px; }
.foot-art { position: relative; height: 300px; overflow: hidden; margin: -24px 0 8px; pointer-events: none; }
.foot-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; opacity: .6; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 58%, transparent 92%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 58%, transparent 92%); }
.index, .foot-base { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 36px 24px; }
.index { padding-bottom: 56px; }
.index-col { min-width: 0; }
.index-col h4 { margin: 0 0 12px; font: 600 14px var(--ui); letter-spacing: 0; color: var(--text); }
.index-col h4 a:hover { color: var(--blue-ink); }
.index-col ul { display: flex; flex-direction: column; gap: 1px; }
.index-col li a { display: inline-block; padding: 4px 0; color: var(--muted); line-height: 1.35; transition: color .15s; }
.index-col li a:hover { color: var(--text); }
.foot-base { padding-top: 40px; }
.foot-base .foot-brand { grid-column: 1 / -4; }
.foot-base .index-col h4 { color: var(--muted); font-weight: 500; }
.foot-brand .brand { display: inline-flex; margin-bottom: 12px; font-size: 17px; }
.foot-brand .brand-mark { width: 22px; height: 22px; }
.foot-brand p { color: var(--faint); }

/* ---------- product pages ---------- */
.pd { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 16px; align-items: start; }
.pd-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pd-head { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.coin-stack { display: flex; }
.coin-stack img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px var(--bg); }
.coin-stack img + img { margin-left: -12px; }
.pd-head h1 { font-size: 34px; }
.pd-head .muted { font-size: 14.5px; margin-top: 4px; }
.pd-block { padding: 24px; gap: 14px; }
.pd-block h2 { font-size: 19px; }
.game-field { gap: 12px; }
.game-field + h2 { margin-top: 24px; }
.pd-block > h2 + .tier-list { margin-top: -2px; }
.pd-main > .pd-block:not(:has(input, .opt, .btn, a.tile)) { background: transparent; padding: 8px 0 0; }
.pd-side { position: sticky; top: calc(var(--head-h, 116px) + 24px); display: flex; flex-direction: column; gap: 16px; }
.pd-side > .pcard:not(.keep):not(:has(input, button, .btn)) { background: transparent; padding: 4px 0 0; }
.tier-list { display: flex; flex-direction: column; gap: 4px; margin: 0 -10px; }
label.tier { position: relative; display: grid; grid-template-columns: 1fr auto 22px; gap: 16px; align-items: center; padding: 14px 12px; border-radius: 14px; color: var(--text); font-size: 15px; font-weight: 400; cursor: pointer; transition: background .15s; }
label.tier:hover { background: var(--raise); }
label.tier.on, label.tier.on:hover { background: var(--blue-wash); }
label.tier:has(input:focus-visible) { box-shadow: 0 0 22px rgba(43, 94, 248, .4); }
.tier-main { display: flex; flex-direction: column; gap: 1px; }
.tier-main strong { font-weight: 600; font-size: 15.5px; }
.tier-check { width: 22px; height: 22px; opacity: 0; transition: opacity .15s; }
.tier.on .tier-check { opacity: 1; }
.inc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.inc-grid li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; padding: 6px 0; }
.inc-grid img { width: 18px; height: 18px; flex: none; }
.pd-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px; }
dt { color: var(--muted); font-size: 13px; }
dd { font-size: 14.5px; margin-top: 2px; }
.kv { display: flex; flex-direction: column; gap: 10px; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; }
.kv dt { font-size: 14px; }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.facts.inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px 48px; margin: 56px 0 0; }
.order { padding: 24px; gap: 18px; }
.order h2 { font-size: 19px; }
.order-sel { display: flex; flex-direction: column; gap: 2px; }
.order-sel strong { font-weight: 600; font-size: 15.5px; }
.order-price { font-family: var(--display); font-size: 38px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin-top: 6px; }
.order-price .muted { font: 400 14px var(--ui); letter-spacing: 0; }
.order input[type=text] { background: var(--deep); }
.order-kv { gap: 8px; font-size: 14px; }
.addr { display: flex; align-items: center; background: var(--deep); border-radius: var(--r-ctl); padding-right: 14px; transition: background .15s; }
.addr:focus-within { background: var(--hover); }
.order .addr input[type=text] { background: transparent; }
.addr-dom { color: var(--muted); font-size: 14px; white-space: nowrap; }
.order label[hidden] { display: none; }
.pd-block[hidden], .js-conf-row[hidden] { display: none; }

/* page banner: the product's stage, title on the left, logo on the right */
.banner { position: relative; border-radius: var(--r); overflow: hidden; min-height: 280px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; isolation: isolate; margin-bottom: 16px; background: radial-gradient(75% 150% at 84% 40%, var(--s1, #1b2433) 0%, var(--s2, #0f1520) 62%, var(--card) 100%); }
.banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 60% at 78% 42%, rgba(255, 255, 255, .08), transparent 70%); }
.banner-body { grid-area: 1 / 1; padding: 0 32px 28px; display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.banner h1 { font-size: 44px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; color: #fff; }
.banner p { color: rgba(243, 241, 236, .8); font-size: 16px; max-width: 46ch; text-wrap: pretty; }
.banner-visual { grid-area: 1 / 2; align-self: stretch; display: grid; place-items: center; padding: 56px 32px 28px 0; min-width: 0; }
.banner-visual .stage-logo.word { max-width: 82%; max-height: 132px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .4)); }
.banner-visual .stage-logo.mark { height: 120px; width: auto; filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .35)); }
.banner-visual .stage-row { gap: 16px; }
.banner-visual .stage-chip { width: 76px; height: 76px; border-radius: 24px; }
.banner-visual .stage-chip img { width: 38px; height: 38px; }
.banner-visual .stage-type { font-family: var(--display); font-size: 120px; font-weight: 700; letter-spacing: -0.05em; color: #fff; line-height: 1; text-shadow: 0 12px 36px rgba(0, 0, 0, .3); }
.banner-tabs { position: absolute; top: 16px; left: 16px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.banner-tabs a { height: 32px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 10px; background: rgba(255, 255, 255, .07); color: rgba(243, 241, 236, .78); font-size: 13px; font-weight: 500; transition: color .15s, background .15s; }
.banner-tabs a:hover { color: #fff; }
.banner-tabs a.on { background: rgba(255, 255, 255, .14); color: #fff; }
.banner .spot-fan { height: 230px; }
.banner .spot-fan .gtile { width: 176px; margin: -55px 0 0 -88px; padding: 14px 16px; border-radius: 15px; }
.banner .spot-fan .gtile-logo { height: 26px; }
.banner .spot-fan .gtile-name { font-size: 15px; }
.banner .spot-fan .gtile-amt { display: none; }
.banner .spot-fan .gtile:nth-child(1) { transform: translate(-96px, 22px) rotate(-18deg); z-index: 1; }
.banner .spot-fan .gtile:nth-child(2) { transform: translate(-50px, 2px) rotate(-11deg); z-index: 2; }
.banner .spot-fan .gtile:nth-child(3) { transform: translate(-6px, -10px) rotate(-4deg); z-index: 3; }
.banner .spot-fan .gtile:nth-child(4) { transform: translate(38px, -18px) rotate(3deg); z-index: 4; }
.banner .spot-fan .gtile:nth-child(5) { transform: translate(82px, -20px) rotate(10deg); z-index: 5; }
.banner .banner .banner .banner .banner [data-b="gifts"] { --s1: #5b3ccc; --s2: #150f30; }

/* logo tiles to pick a game */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
a.tile { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 10px; border-radius: 14px; color: var(--muted); font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
a.tile .stage { border-radius: 10px; transition: filter .2s; }
a.tile:not(.on) .stage { filter: saturate(.7) brightness(.82); }
a.tile span:last-child { padding: 0 4px; }
a.tile:hover { color: var(--text); background: var(--raise); }
a.tile:hover .stage { filter: none; }
a.tile.on { color: var(--text); background: var(--blue-wash); }

/* domains */
.dsearch.big input { height: 54px; font-size: 17px; padding: 0 18px; }
.dsearch.big .btn { height: 54px; padding: 0 26px; font-size: 15.5px; }
.banner .dsearch.big { width: 100%; max-width: 560px; margin-top: 14px; }
.banner .dsearch.big input { background: rgba(10, 14, 21, .62); }
.banner .dsearch.big input:focus { background: rgba(10, 14, 21, .85); }
.dom-list { display: flex; flex-direction: column; gap: 4px; margin: 0 -10px; }
.dom-row { display: grid; grid-template-columns: 1fr auto 100px; gap: 20px; align-items: center; padding: 12px; border-radius: 14px; transition: background .15s; }
.dom-row:hover { background: var(--raise); }
.dom-name strong { font-weight: 600; font-size: 15.5px; }
.dom-row.taken .dom-name strong, .dom-row.taken .oc-price { color: var(--muted); }
.opt { display: inline-flex; align-items: center; justify-content: center; height: 38px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.opt.buy { background: var(--blue); color: #fff; }
.opt.buy:hover { background: var(--blue-2); }
.opt.off { background: transparent; color: var(--faint); cursor: default; }
.tld-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tld-card { gap: 4px; padding: 22px; transition: background .15s; }
.tld-card:hover { background: var(--raise); }
.tld-big { font-family: var(--display); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.tld-card .pc-price { margin-top: 8px; }
.pc-price { font-family: var(--display); font-size: 18px; font-weight: 600; }
.pc-price span { color: var(--muted); font: 400 13px var(--ui); }
.price-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.price-table th { text-align: left; font-weight: 400; color: var(--muted); font-size: 13px; padding: 0 0 8px; }
.price-table th.num { text-align: right; }
.price-table td { padding: 7px 0; }

/* gift card pages */
.gtile-large { width: 100%; max-width: 360px; padding: 22px 24px; border-radius: 20px; box-shadow: 0 24px 60px rgba(2, 4, 9, .5); transform: rotate(-4deg); }
.gtile-large:hover { transform: rotate(-4deg); }
.gtile-large .gtile-logo { height: 46px; }
.gtile-large .gtile-name { font-size: 24px; }
.gtile-large .gtile-amt { font-family: var(--display); font-size: 30px; font-weight: 600; color: #fff; letter-spacing: -0.03em; }
.gc-facts { margin-top: 40px; grid-template-columns: repeat(3, 1fr); }
.gc-pick { align-items: flex-start; gap: 22px; }
.gc-pick .field { width: 100%; }

/* checkout */
.co { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 16px; align-items: start; }
.co-sum { padding: 0; gap: 0; overflow: hidden; }
.stage.co-art { aspect-ratio: 3.4 / 1; }
.co-art .stage-logo.word { max-width: 46%; max-height: 52%; }
.co-art .stage-logo.mark { height: 48%; }
.co-art .stage-type { font-size: 76px; }
.co-inner { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 20px; position: relative; }
.co-back { position: absolute; top: 22px; right: 22px; }
.co-sum .pd-head { grid-template-columns: 1fr; }
.co-sum .pd-head h1 { font-size: 30px; padding-right: 100px; }
.co-kv { gap: 12px; font-size: 14.5px; }
.co-kv > div { justify-content: flex-start; }
.co-kv dt { flex: 0 0 150px; }
.co-kv dd { text-align: left; }
.co-total { display: flex; align-items: baseline; justify-content: space-between; }
.co-total > span:first-child { color: var(--muted); }
.co-pay .btn + .btn { margin-top: -6px; }
.co-after { margin-top: 4px; font-size: 16px; font-weight: 600; }
.co-after dt { color: var(--text); }
.co-coin { display: flex; align-items: center; gap: 12px; }
.fe-more { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 13.5px; font-weight: 500; padding: 6px 10px 6px 4px; border-radius: 10px; transition: color .15s, background .15s; }
.fe-more:hover { color: var(--text); background: var(--raise); }
.fe-more img { width: 16px; height: 16px; }
.card-pay { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px 0; }

/* ---------- account ---------- */
.acct-head { display: flex; align-items: flex-end; gap: 48px; margin-bottom: 32px; }
.acct-head .btn { margin-left: auto; }
.label { color: var(--muted); font-size: 13px; }
.big { font-family: var(--display); font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin-top: 4px; }
.acct-meta div:last-child { font-size: 14.5px; margin-top: 4px; }
.acct-logout { display: block; }
.tabs { display: flex; gap: 4px; margin-bottom: 32px; overflow-x: auto; }
.tabs a { padding: 8px 14px; border-radius: 10px; color: var(--muted); font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: color .15s, background .15s; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--text); background: var(--card); }
.seg { display: flex; gap: 24px; }
.seg a { color: var(--muted); font-size: 14px; white-space: nowrap; }
.seg a:hover, .seg a.on { color: var(--text); }
.grid { display: grid; gap: 16px; }
.grid > * { min-width: 0; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid > .card { background: var(--card); border-radius: var(--r); padding: 22px 24px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.page-head h1 { font-size: 34px; }
h2.section { margin: 56px 0 14px; color: var(--muted); font: 500 14px var(--ui); letter-spacing: 0; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-weight: 400; font-size: 13px; color: var(--muted); padding: 0 12px 12px; }
.table th.num { text-align: right; }
.table td { padding: 12px; vertical-align: middle; font-size: 14.5px; }
.table td:first-child, .table th:first-child { padding-left: 0; }
.table td:last-child, .table th:last-child { padding-right: 0; }
.table td a { color: var(--text); }
.table .act { text-align: right; white-space: nowrap; }
.table.compact td { padding: 9px 12px; }
.table.compact td:first-child { padding-left: 0; }
.table.compact td:last-child { padding-right: 0; }
.card .table { display: block; overflow-x: auto; }
.card .table tbody { display: table; width: 100%; }
.ref-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pill.warn { color: var(--warn); }
.pill.bad { color: var(--bad); }
.inv-pay { flex-direction: row; gap: 28px; align-items: flex-start; }
.inv-fields { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.inv-state { font-size: 20px; font-weight: 600; }
.inv-state.warn { color: var(--warn); }
.qr-img { width: 180px; height: 180px; border-radius: 12px; background: #fff; padding: 8px; display: block; }
.qr-img.small { width: 150px; height: 150px; margin-bottom: 10px; }
.qr-svg { width: 180px; height: 180px; border-radius: 12px; background: #fff; padding: 8px; }
.qr-svg.small { width: 150px; height: 150px; margin-bottom: 10px; }
.qr-svg svg { display: block; width: 100%; height: 100%; }
.totp-key { margin-bottom: 14px; letter-spacing: .04em; overflow-wrap: anywhere; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin-top: 12px; list-style: none; font-size: 15px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.verify-card { max-width: 480px; }
.verify-more { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.htmlsw-form { display: inline-flex; margin: 0; }
button.htmlsw, button.head-badge { border: 0; font: inherit; cursor: pointer; }
button.htmlsw { padding: 0; background: none; }
button.head-badge { font-size: 13px; font-weight: 500; }
.auth-more { display: flex; align-items: center; gap: 16px; margin-top: 12px; padding-top: 0; }
.sessions { display: grid; gap: 14px; margin-bottom: 14px; list-style: none; }
.sessions li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.sessions li form { grid-column: 2; grid-row: 1 / 3; }
.qr-empty { width: 180px; height: 180px; border-radius: 12px; background: var(--hover); }
.danger-zone { margin-top: 56px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.stack { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.stack .btn { align-self: flex-start; }
.search { display: flex; gap: 8px; max-width: 480px; }
.search.small { max-width: 320px; }
.search.small input, .search.small .btn { height: 34px; }

/* ---------- sign in ---------- */
.auth { max-width: 380px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 20px; background: var(--card); border-radius: var(--r); padding: 32px; }
.auth h1 { font-size: 28px; margin-bottom: 4px; }
.alt { color: var(--muted); font-size: 13.5px; text-align: center; }

/* ---------- documents ---------- */
.doc { max-width: 640px; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; }
.doc h2 { margin-top: 24px; }
.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.legal-nav { position: sticky; top: calc(var(--head-h, 116px) + 24px); display: flex; flex-direction: column; gap: 2px; margin-left: -12px; }
.legal-nav a { padding: 9px 12px; border-radius: 10px; color: var(--muted); font-size: 14.5px; font-weight: 500; transition: color .15s, background .15s; }
.legal-nav a:hover { color: var(--text); }
.legal-nav a.on { background: var(--card); color: var(--text); }
.legal-doc { padding: 36px 40px; gap: 28px; }
.legal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.legal-head h1 { font-size: 32px; }
.draft { font-size: 13px; color: var(--warn); background: rgba(232, 176, 79, .12); padding: 4px 10px; border-radius: 8px; }
.legal-doc section { display: flex; flex-direction: column; gap: 10px; }
.legal-doc h2 { font-size: 18px; }
.legal-doc p { font-size: 15px; line-height: 1.7; color: #cdd3dc; max-width: 68ch; }
.legal-doc a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.rule-list { display: flex; flex-direction: column; }
.rule-list > div { padding: 10px 0; font-size: 14.5px; }
.legal-kv { gap: 0; }
.legal-kv > div { padding: 10px 0; gap: 24px; align-items: baseline; justify-content: flex-start; }
.legal-kv dt { flex: 0 0 160px; color: var(--muted); }
.legal-kv dd { text-align: left; flex: 1; font-size: 14.5px; line-height: 1.6; max-width: 64ch; }
.abuse-form { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- search, not found ---------- */
.sresults { display: flex; flex-direction: column; gap: 4px; max-width: 760px; margin: 0 -14px; }
.srow { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: transparent; flex-direction: row; transition: background .15s; }
.srow:hover { background: var(--card); }
.sr-chev { width: 18px; height: 18px; opacity: .4; transition: opacity .15s, transform .15s; }
.srow-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px 84px; margin-top: -4px; }
.srow-chips .chip { height: 28px; padding: 0 10px; font-size: 13px; color: var(--muted); background: rgba(255, 255, 255, .04); }
.srow-chips .chip:hover { color: var(--text); background: var(--hover); }
.srow:hover .sr-chev { opacity: 1; transform: translateX(2px); }
.nf { max-width: 560px; margin: 40px auto 0; padding: 32px; gap: 18px; }
.nf h1 { font-size: 30px; }
.nf-links { display: flex; gap: 8px; flex-wrap: wrap; }
.nf-links .chip-f { background: var(--deep); }

/* ---------- admin ---------- */
.panel-wrap { display: grid; grid-template-columns: 160px 1fr; gap: 48px; max-width: 1240px; }
.side nav { position: sticky; top: calc(var(--head-h, 116px) + 24px); display: flex; flex-direction: column; gap: 12px; }
.side a { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 14px; }
.side a:hover, .side a.on { color: var(--text); }
.count { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.count.warn { color: var(--warn); }
.panel-main { display: flex; flex-direction: column; gap: 48px; min-width: 0; }
.panel-main .page-head { margin-bottom: 0; }
.panel-main h2.section { margin: 0 0 -32px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat .big { font-size: 30px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .top-row { grid-template-columns: 1fr; }
  .lside { display: grid; grid-template-columns: 1fr 1fr; }
  .mainnav a { padding: 8px 9px; }
  .lside { grid-template-columns: 1fr; }
  .coin-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
  .coin-row { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "ic name" "px px" "sp sp"; row-gap: 10px; padding: 12px; background: var(--deep); }
  .coin-row .coin-ic { grid-area: ic; }
  .coin-row .coin-name { grid-area: name; }
  .coin-row .coin-px { grid-area: px; align-items: flex-start; }
  .coin-row .spark { grid-area: sp; width: 100%; height: 34px; }
  .bar { gap: 18px; }
}
@media (max-width: 1000px) {
  .pd, .co { grid-template-columns: 1fr; }
  .pd-side { position: static; }
  .pd { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
  .pd.pd-order .pd-main { display: contents; }
  .pd.pd-order .banner { order: 1; }
  .pd.pd-order .pd-head { order: 1; }
  .pd.pd-order .pd-main > .pd-block:nth-of-type(1) { order: 3; }
  .pd.pd-order .pd-side { order: 4; }
  .pd.pd-order .pd-main > .pd-block:nth-of-type(2) { order: 5; }
  .pd.pd-order .pd-main > .pd-block:nth-of-type(3) { order: 6; }
  .topsearch { display: none; }
  .legal { grid-template-columns: 1fr; }
  .legal-nav { position: static; flex-direction: row; flex-wrap: wrap; margin-left: 0; }
}
@media (max-width: 900px) {
  .gtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .mainnav { order: 3; flex-basis: calc(100% + 32px); overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; scroll-padding: 0 24px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); }
  .mainnav a:first-child { margin-left: -12px; }
  .mainnav::-webkit-scrollbar { display: none; }
  .bar { flex-wrap: wrap; height: auto; row-gap: 10px; }
  .wrap.bar { padding-top: 14px; padding-bottom: 10px; }
  nav.user { margin-left: auto; }
  .steps { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .index, .foot-base { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-base .foot-brand { grid-column: 1 / -1; }
  .grid.two { grid-template-columns: 1fr; }
  .invoice { grid-template-columns: 1fr; }
  .panel-wrap { grid-template-columns: 1fr; gap: 32px; }
  .side nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 20px; }
  .form-2 { grid-template-columns: 1fr; }
  .legal-doc { padding: 24px; }
  .legal-kv > div { flex-direction: column; gap: 4px; }
  .legal-kv dt { flex: none; }
}
@media (max-width: 640px) {
  :root { --sec: 64px; }
  .wrap { padding: 0 16px; }
  main.wrap { padding-top: 16px; }
  .brand { font-size: 17px; }
  .brand-mark { width: 24px; height: 24px; }
  .hero { padding: 16px 0 20px; }
  .hero h1 { font-size: 40px; }
  .hero-sub { font-size: 16px; margin-top: 12px; }
  .spot { min-height: 560px; }
  .spot-slide { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .spot-visual { grid-area: 1 / 1; padding: 60px 16px 0; }
  .spot-body { grid-area: 2 / 1; padding: 0 20px 22px; }
  .spot-title { font-size: 32px; }
  .spot-board { width: min(100%, 300px); gap: 8px; }
  .spot-fan { height: 220px; }
  .spot-fan .gtile { width: 150px; margin: -47px 0 0 -75px; padding: 12px 14px; border-radius: 14px; }
  .spot-fan .gtile .gtile-logo { height: 24px; }
  .spot-fan .gtile .gtile-name { font-size: 14px; }
  .spot-fan .gtile .gtile-amt { display: none; }
  .spot-fan .gtile:nth-child(1) { transform: translate(-76px, 18px) rotate(-18deg); z-index: 1; }
  .spot-fan .gtile:nth-child(2) { transform: translate(-38px, 4px) rotate(-11deg); z-index: 2; }
  .spot-fan .gtile:nth-child(3) { transform: translate(0px, -6px) rotate(-4deg); z-index: 3; }
  .spot-fan .gtile:nth-child(4) { transform: translate(38px, -12px) rotate(3deg); z-index: 4; }
  .spot-fan .gtile:nth-child(5) { transform: translate(76px, -14px) rotate(10deg); z-index: 5; }
            .spot-badges { grid-template-columns: repeat(4, 64px); gap: 10px; }
  .badge { width: 64px; height: 64px; border-radius: 20px; }
  .badge img { width: 30px; height: 30px; }
  .spot-badges .badge:nth-child(2), .spot-badges .badge:nth-child(4) { transform: translateY(12px); }
  .spot-badges:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 64px); }
  .spot-badges:has(> :nth-child(3):last-child) .badge:nth-child(3) { grid-column: auto; }
  .spot-endings span { font-size: 24px; padding: 8px 14px; border-radius: 14px; }
  .spot-coins { grid-template-columns: repeat(4, 64px); gap: 10px; }
  .spot-coins img { width: 64px; height: 64px; }
  .spot-coins img:nth-child(2), .spot-coins img:nth-child(4) { transform: translateY(12px); }
  .spot-meta { font-size: 15px; }
  .spot-tabs { top: 12px; left: 12px; right: 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .spot-tabs::-webkit-scrollbar { display: none; }
  .spot-tab { flex: none; }
  .lside { grid-template-columns: 1fr; }
  .prod-offer { font-size: 12.5px; }
  .gtile-foot { flex-direction: column; align-items: flex-start; gap: 0; }
  .spot-tab { height: 30px; padding: 0 10px; font-size: 12.5px; scroll-snap-align: start; scroll-margin-left: 14px; }
  .spot-tabs { left: 0; right: 0; padding: 0 20px; scroll-snap-type: x proximity; scroll-padding-left: 20px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 24px), transparent 100%); }
  .coin-list { display: flex; flex-direction: column; gap: 0; margin: 0 -8px; }
  .coin-row { grid-template-columns: 28px minmax(0, 1fr) 84px auto; grid-template-areas: none; row-gap: 0; padding: 9px 8px; background: transparent; }
  .coin-row .coin-ic, .coin-row .coin-name, .coin-row .coin-px, .coin-row .spark { grid-area: auto; }
  .coin-row .coin-px { align-items: flex-end; }
  .coin-row .spark { width: 84px; height: 30px; }
  .gtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gtile { padding: 12px 14px; border-radius: 14px; }
  .gtile-logo { height: 26px; }
  .gtile-name { font-size: 15px; }
  .gtile-amt { font-size: 12px; }
  .shelf-head h2, .how > h2, .faq > h2 { font-size: 24px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage.co-art { aspect-ratio: 2.4 / 1; }
  .banner { min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .banner-visual { grid-area: 1 / 1; padding: 60px 20px 8px; min-height: 150px; }
  .banner-body { grid-area: 2 / 1; padding: 8px 20px 20px; }
  .banner h1 { font-size: 32px; }
  .banner-visual .stage-logo.word { max-height: 84px; }
  .banner-visual .stage-logo.mark { height: 80px; }
  .banner-visual .stage-chip { width: 58px; height: 58px; border-radius: 18px; }
  .banner-visual .stage-chip img { width: 28px; height: 28px; }
  .banner-visual .stage-type { font-size: 80px; }
  .banner .spot-fan { height: 180px; }
  .banner .spot-fan .gtile { width: 130px; margin: -41px 0 0 -65px; padding: 10px 12px; border-radius: 12px; }
  .banner .spot-fan .gtile-logo { height: 20px; }
  .banner .spot-fan .gtile-name { font-size: 12px; }
  .banner .spot-fan .gtile:nth-child(1) { transform: translate(-66px, 14px) rotate(-18deg); z-index: 1; }
  .banner .spot-fan .gtile:nth-child(2) { transform: translate(-34px, 2px) rotate(-11deg); z-index: 2; }
  .banner .spot-fan .gtile:nth-child(3) { transform: translate(-2px, -6px) rotate(-4deg); z-index: 3; }
  .banner .spot-fan .gtile:nth-child(4) { transform: translate(30px, -12px) rotate(3deg); z-index: 4; }
  .banner .spot-fan .gtile:nth-child(5) { transform: translate(62px, -14px) rotate(10deg); z-index: 5; }
  .banner   .banner   .banner   .banner   .banner   .banner-search .spot-endings span { font-size: 20px; }
  .inc-grid, .pd-facts, .gc-facts { grid-template-columns: 1fr; }
  .pd-head { grid-template-columns: 44px 1fr; }
  .pd-head .pc-icon.big { width: 44px; height: 44px; }
  .pd-head h1, .page-head h1 { font-size: 28px; }
  .pd-block, .order, .co-inner { padding: 18px; }
  .co-back { position: static; align-self: flex-start; }
  .co-sum .pd-head h1 { padding-right: 0; font-size: 24px; }
  .tld-grid { grid-template-columns: 1fr 1fr; }
  .dom-row { grid-template-columns: 1fr auto; }
  .dom-row .opt { grid-column: 1 / -1; }
  .acct-head { flex-wrap: wrap; gap: 24px; }
  .acct-head .btn { margin-left: 0; }
  .table { display: block; overflow-x: auto; }
  .stats { grid-template-columns: 1fr 1fr; }
  .inv-pay { flex-direction: column; align-items: center; }
  .inv-fields { width: 100%; }
  .foot-art { height: 200px; margin-bottom: -30px; }
  .index, .foot-base { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  nav.user { gap: 14px; }
  nav.user.signed .acct-link, nav.user.signed form.inline { display: none; }
  .acct-logout { display: block; margin-left: auto; }
  .auth { padding: 22px; margin-top: 8px; }
}
@media (max-width: 440px) {
  .bar > .brand .brand-sub { display: none; }
  nav.user { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .spot.js .spot-slide { transition: none; }
  .spot-visual > *, .prod .stage-logo, .prod .stage-row, .prod .stage-type { transition: none; transform: none; }
}

/* search banner */
.banner-search { min-height: 320px; }
.banner-search .spot-endings span { font-size: 30px; }
.coins { justify-content: flex-start; }
.coin-src { margin-top: auto; color: var(--faint); font-size: 12.5px; }
.coin-src a { color: var(--muted); }
.coin-src a:hover { color: var(--text); }

/* ---------- phone numbers ---------- */
[data-b="numbers"] { --s1: #138a8a; --s2: #062a2e; }
.spot-slide[data-key="numbers"] { background: radial-gradient(70% 90% at 78% 40%, rgba(37, 211, 102, .32), transparent 62%), radial-gradient(55% 70% at 100% 100%, rgba(38, 165, 228, .36), transparent 60%), var(--card); }
[data-b="telegram"] { --s1: #26a5e4; --s2: #0b3550; }
[data-b="whatsapp"] { --c: #25d366; --s1: #1fa855; --s2: #0b3d22; }
[data-b="signal"] { --c: #3b45fd; --s1: #3b45fd; --s2: #12164f; }
[data-b="discord"] { --s1: #5865f2; --s2: #1a1e5c; }
[data-b="google"] { --c: #4285f4; --s1: #4285f4; --s2: #0f2a5e; }
[data-b="x"] { --s1: #2a2f37; --s2: #0b0d10; }
[data-b="instagram"] { --c: linear-gradient(45deg, #f58529, #dd2a7b 50%, #8134af); --s1: #c13584; --s2: #3b0f2e; }
[data-b="facebook"] { --c: #0866ff; --s1: #0866ff; --s2: #04245c; }
[data-b="tiktok"] { --c: #2a3039; --s1: #2a2f37; --s2: #0b0d10; }
[data-b="snapchat"] { --c: #fffc00; --s1: #e6e200; --s2: #5c5a00; }
[data-b="twitch"] { --s1: #9146ff; --s2: #2c1460; }
[data-b="reddit"] { --c: #ff4500; --s1: #ff4500; --s2: #6b1d00; }
[data-b="viber"] { --c: #7360f2; --s1: #7360f2; --s2: #241c63; }
[data-b="wechat"] { --c: #07c160; --s1: #07c160; --s2: #03401f; }
[data-b="protonmail"] { --c: #6d4aff; --s1: #6d4aff; --s2: #22145c; }

/* service picker */
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.block-head input[type=search].svc-filter { width: 200px; height: 36px; background: var(--deep); }
.co-country { display: flex; align-items: center; gap: 12px; }
.co-country strong { font-weight: 600; font-size: 15px; }
.flag { width: 26px; height: 26px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
@media (max-width: 1000px) {
}

/* lander shelf: one tile per service */
.ntiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ntile { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r); background: var(--card); transition: background .15s; }
.ntile:hover { background: var(--raise); }
.ntile .stage-chip { grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 14px; box-shadow: none; }
.ntile .stage-chip img { width: 24px; height: 24px; }
.ntile-name { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; align-self: end; }
.ntile-from { color: var(--muted); font-size: 13.5px; align-self: start; }

/* one number and its code */
.num-page { max-width: 760px; margin: 0 auto; }
.num-card .co-inner { gap: 18px; }
.num-big { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 16px; background: var(--deep); }
.num-big span { font-family: var(--mono); font-size: 30px; font-weight: 500; letter-spacing: .02em; word-break: break-all; }
.num-state { display: flex; align-items: baseline; gap: 12px; }
.num-state strong { font-size: 16px; }
.num-code { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; background: var(--blue-wash); }
.num-code-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.num-from { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.num-from strong { font-size: 15px; font-weight: 600; }
.num-digits { font-family: var(--mono); font-size: 36px; font-weight: 500; letter-spacing: .12em; line-height: 1.1; }
label.tier.country[hidden] { display: none; }
.mailbox { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; }
.mailbox form.inline input[type=password] { width: 170px; height: 34px; }
.mail-at { display: flex; align-items: center; gap: 8px; }
.mail-at input { flex: 1; min-width: 0; }
.table.records td { font-size: 13px; }
.card.invite { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; background: var(--card); border-radius: var(--r); padding: 22px 24px; }
.card.invite .card-head { margin-bottom: 0; }
.card.invite .kv { margin: 0; }
.invite-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 16px; border-radius: 14px; background: var(--deep); }
.invite-link .mono { font-size: 14px; min-width: 0; }
.swap-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px; align-items: center; }
.swap-row input[type=text], .swap-row select, .swap-out { height: 52px; }
.swap-row input[type=text] { font: 600 20px var(--mono); }
.swap-out { display: flex; align-items: center; padding: 0 16px; border-radius: var(--r-ctl); background: var(--deep); font: 600 18px var(--mono); color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.swap-flip { display: flex; justify-content: center; margin: 4px 0; }
.swap-send { display: flex; flex-direction: column; gap: 12px; }
.swap-send strong.mono { display: block; font-size: 26px; margin-top: 2px; }
.swap-qr { width: 180px; height: 180px; border-radius: 14px; background: #fff; padding: 8px; }
@media (max-width: 640px) { .swap-row { grid-template-columns: 1fr; } }
pre.delivery { margin: 0; padding: 16px 18px; border-radius: 16px; background: var(--deep); font: 400 13.5px/1.7 var(--mono); white-space: pre; overflow-x: auto; max-height: 420px; }
.seg-opts.lens { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 2px; }
label.segopt.len { flex-direction: column; gap: 2px; height: auto; padding: 9px 4px; font-size: 13.5px; white-space: nowrap; }
label.segopt.len .len-price { font-size: 12.5px; font-weight: 400; color: var(--muted); min-height: 1.2em; }
label.segopt.len.on .len-price { color: var(--text); }
label.segopt.len.off { opacity: .38; pointer-events: none; }
@media (max-width: 1100px) { .ntiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ntiles { gap: 10px; }
  .ntile { grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; padding: 12px; border-radius: 16px; }
  .ntile .stage-chip { width: 40px; height: 40px; border-radius: 12px; }
  .ntile .stage-chip img { width: 20px; height: 20px; }
  .ntile-name { font-size: 15px; }
  .ntile-from { font-size: 12.5px; }
  .block-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .block-head input[type=search].svc-filter { width: 100%; }
  .num-big span { font-size: 24px; }
  .num-digits { font-size: 30px; }
}

/* ---------- top-ups and proxies ---------- */
[data-b="roblox"] { --c: #3a3f47; --s1: #4a505a; --s2: #0e1013; }
[data-b="spotify"] { --c: #1db954; --s1: #1db954; --s2: #0b3d1f; }
[data-b="fortnite"] { --c: #6b2fbf; --s1: #7a3ad6; --s2: #1d0b3a; }
[data-b="riot"] { --c: #d32936; --s1: #d32936; --s2: #4a0a10; }
[data-b="pubg"] { --c: #f4b942; --s1: #d9a23a; --s2: #3b2a0a; }
[data-b="proxies"] { --s1: #3b5bdb; --s2: #101a45; }
.spot-slide[data-key="proxies"], .banner[data-b="proxies"] { --s1: #3b5bdb; --s2: #101a45; }
.flagchip { background: transparent !important; box-shadow: 0 10px 26px rgba(2, 4, 9, .35); }
.coinchip { background: transparent !important; box-shadow: 0 10px 26px rgba(2, 4, 9, .35); border-radius: 50% !important; }
.coinchip img { width: 100% !important; height: 100% !important; }
.flagchip img { width: 100% !important; height: 100% !important; border-radius: inherit; }
.banner-visual .flagchip img { width: 100% !important; height: 100% !important; }
#top-ups { margin-top: 64px; }
@media (max-width: 1280px) { .mainnav a { padding: 8px 9px; } .bar { gap: 20px; } }
@media (max-width: 1200px) { .topsearch { display: none; } .search-link { display: inline-flex; } nav.user { margin-left: auto; } }

/* header: links never wrap; the search box gives way; signed in, the mark stands alone */
nav.user > a, nav.user .linkbtn, nav.user .btn { white-space: nowrap; flex: none; }
.topsearch { min-width: 200px; }

/* phones: long top-up names get a full row */
@media (max-width: 640px) {
  .ntiles.long { grid-template-columns: 1fr; }
}
.acct-head .acct-logout { margin-left: -36px; }
@media (max-width: 640px) { .acct-head .acct-logout { margin-left: auto; } }

/* one footer: the lockup on top, then every column in a single grid */
.foot-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
.foot-head .brand { font-size: 17px; }
.foot-head .brand-mark { width: 22px; height: 22px; }
.foot-copy { color: var(--faint); font-size: 13px; }
.index { padding-bottom: 0; }

/* page swaps: no loading line; a slow page dims slightly after a short wait */
.turbo-progress-bar { display: none !important; }
html[aria-busy="true"] main.wrap { opacity: .62; transition: opacity .2s ease .3s; }

.premium-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-left: 6px; border-radius: 7px; background: rgba(255, 184, 92, .14); color: var(--lamp); font-size: 12px; font-weight: 600; vertical-align: 2px; }

/* header, two rows: the brand, a wide search and the account; under it every category */
:root { --head-h: 116px; }
.bar { gap: 24px; }
.bar .topsearch { flex: 1 1 auto; max-width: 620px; margin: 0 auto; min-width: 220px; }
.catbar { display: flex; align-items: center; height: 48px; margin-top: -8px; }
.mainnav.cats { gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
.mainnav.cats::-webkit-scrollbar { display: none; }
.mainnav.cats a { padding: 7px 12px; font-size: 14.5px; }
@media (max-width: 1200px) { .topsearch { display: block; } .search-link { display: none; } }
@media (max-width: 1000px) {
  .catbar { height: 44px; margin-top: -4px; }
  .mainnav.cats { margin: 0 -16px; padding: 0 16px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); }
  .mainnav.cats a:first-child { margin-left: 0; }
}
@media (max-width: 760px) { .topsearch { display: none !important; } .search-link { display: inline-flex !important; } }

/* All products: one card for every product, two quick buys on each */
.prods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.prod { position: relative; display: flex; flex-direction: column; background: var(--card); border-radius: var(--r); overflow: hidden; transition: background .2s; }
.prod:hover { background: var(--raise); }
.catalog .prod[hidden], .cat-group[hidden] { display: none; }
.cat-group { margin-top: 40px; }
.cat-sort + .cat-group, .catalog.picked .cat-group { margin-top: 12px; }
.cat-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cat-group-head h3 { font-size: 22px; letter-spacing: -0.02em; }
.catalog.picked .cat-group-head { display: none; }
/* each section shows two rows until its category is opened */
.cat-group:not(.open) .prod:nth-child(n+9) { display: none; }
.prods.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prod .stage-logo, .prod .stage-row, .prod .stage-type { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.prod:hover .stage-logo, .prod:hover .stage-row, .prod:hover .stage-type { transform: scale(1.06); }
.prod-body { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px 14px; flex: 1; }
.prod-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.prod-top h3 { font-size: 18px; letter-spacing: -0.02em; min-width: 0; }
.prod-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r); }
.prod-link:focus-visible { outline: none; }
.prod-link:focus-visible::after { box-shadow: inset 0 0 0 2px var(--blue-2); }
.prod-meta { color: var(--muted); font-size: 13.5px; text-wrap: pretty; }
.prod-offer { color: var(--lamp); font-size: 13.5px; font-weight: 500; }
.prod-buy { position: relative; z-index: 2; display: flex; flex-direction: column; margin: auto -8px 0; padding-top: 8px; }
.buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 0 0 0 8px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 500; transition: color .15s; }
.buy-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buy-p { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; margin-right: 8px; border-radius: 10px; background: var(--blue-wash); color: var(--blue-ink); font: 600 14px var(--display); letter-spacing: -0.01em; white-space: nowrap; transition: background .15s, color .15s; }
.buy-p span { color: inherit; opacity: .72; font: 400 12.5px var(--ui); letter-spacing: 0; }
.buy:hover .buy-p { background: var(--blue); color: #fff; }
.buy:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue-2); }

[data-b="discord"] { --s1: #5865f2; --s2: #1d2160; }
[data-b="telegram"] { --s1: #229ed9; --s2: #0a3150; }

@media (max-width: 1000px) {
  .prods, .prods.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* an odd last card takes the whole row */
  .prods.three .prod:nth-child(3):last-child { grid-column: 1 / -1; }
  .prods.three .prod:nth-child(3):last-child .stage { aspect-ratio: 4 / 1; }
  .prods.three .prod:nth-child(3):last-child .stage-type { font-size: 42px; }
  .cat-sort { margin: 10px 0 0; padding: 10px 0; -webkit-mask-image: none; mask-image: none; }
  .cat-sort .cat-tab:first-child { margin-left: 0; }
}
@media (max-width: 640px) {
  .cat-group:not(.open) .prod:nth-child(n+7) { display: none; }
  .cat-group { margin-top: 32px; }
  .cat-group-head h3 { font-size: 20px; }
  .prods { gap: 10px; }
  .prod { border-radius: 16px; }
  .prod-link::after { border-radius: 16px; }
  .prod-body { padding: 12px 12px 8px; gap: 3px; }
  .prod-top { flex-direction: column; align-items: flex-start; gap: 0; }
  .prod-top h3 { font-size: 16px; }
  .prod-top .price strong { font-size: 15px; }
  .prod-meta { font-size: 12.5px; }
  .prod-buy { margin: auto -4px 0; padding-top: 6px; }
  .buy { min-height: 38px; padding-left: 4px; gap: 6px; font-size: 13px; }
  .buy-p { height: 30px; padding: 0 8px; margin-right: 4px; font-size: 13px; }
  .buy-p span { font-size: 11.5px; }
}
@media (min-width: 1101px) {
  /* beside the featured box: coin prices as one line each, under Popular */
  .coin-row { grid-template-columns: 24px 44px minmax(0, 1fr) auto; gap: 10px; padding: 5px 8px; }
  .coin-row .coin-ic { width: 24px; height: 24px; }
  .coin-name span { display: none; }
  .coin-px { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }
  .coin-row .spark { width: 100%; height: 22px; }
  .lside .side-card { gap: 10px; padding: 16px 20px; }
}

/* the swap box beside the featured box */
.qs { display: flex; flex-direction: column; }
.qs-box { display: flex; flex-direction: column; padding: 8px 12px 6px; border-radius: var(--r-ctl); background: var(--deep); transition: background .15s; }
.qs-box:focus-within { background: var(--hover); }
.qs-l { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.qs-line { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.qs input.qs-amt { flex: 1; min-width: 0; width: auto; height: 36px; padding: 0; background: none; font: 600 21px var(--mono); letter-spacing: -0.02em; }
.qs input.qs-amt:focus, .qs input.qs-amt:focus-visible { background: none; box-shadow: none; }
.qs-out { flex: 1; min-width: 0; font: 600 21px var(--mono); letter-spacing: -0.02em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.qs-coin { position: relative; flex: none; display: inline-flex; align-items: center; height: 34px; border-radius: 10px; background: var(--raise); transition: background .15s; }
.qs-coin:hover { background: var(--hover-2); }
.qs-coin img { position: absolute; left: 8px; width: 20px; height: 20px; pointer-events: none; }
.qs .qs-coin select { width: auto; height: 34px; padding: 0 30px 0 34px; background-color: transparent; background-position: right 8px center; font: 600 14px var(--ui); cursor: pointer; }
.qs .qs-coin select:focus { background-color: transparent; }
.qs-usd { min-height: 17px; font-size: 12.5px; line-height: 17px; color: var(--faint); font-variant-numeric: tabular-nums; }
.qs-flip { position: relative; z-index: 1; align-self: center; display: grid; place-items: center; width: 30px; height: 30px; margin: -9px 0; border: 0; border-radius: 10px; background: var(--raise); box-shadow: 0 0 0 4px var(--card); cursor: pointer; transition: background .15s; }
.qs-flip:hover { background: var(--hover-2); }
.qs-flip img { width: 16px; height: 16px; }
.qs-go { width: 100%; margin-top: 8px; }
.qs-note { margin-top: 6px; font-size: 12.5px; color: var(--faint); text-align: center; }
@media (min-width: 641px) and (max-width: 1100px) {
  /* under the featured box: the swap box and coin prices side by side */
  .lside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lside .coin-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the Swap button beside the account links: the way to the swap page from every store page */
nav.user .btn.swap-btn img { width: 15px; height: 15px; }
@media (max-width: 440px) { nav.user .btn.swap-btn { padding: 0 11px; } nav.user .btn.swap-btn img { display: none; } }

/* the Swap button while on a swap page, and the 'HTML only' switch (footer, swap card) and badge (header) */
nav.user .btn.swap-btn.on { background: var(--blue-wash); color: var(--blue-ink); }
.htmlsw { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; white-space: nowrap; transition: color .15s; }
.htmlsw:hover { color: var(--text); }
.htmlsw .sw { position: relative; flex: none; width: 30px; height: 18px; border-radius: 9px; background: var(--hover-2); transition: background .15s; }
.htmlsw .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--text); transition: transform .15s; }
.htmlsw.on { color: var(--text); }
.htmlsw.on .sw { background: var(--blue); }
.htmlsw.on .sw::after { transform: translateX(12px); }
.html-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 8px; background: var(--blue-wash); color: var(--blue-ink); font: 500 12px/1 var(--ui); white-space: nowrap; }
.head-badge { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.foot-tools { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px 20px; }
@media (max-width: 760px) {
  .head-badge { display: none; }
  .foot-head { flex-direction: column; align-items: flex-start; }
  .foot-tools { justify-content: flex-start; }
}