/* 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: 0; }
.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; }
.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: minmax(0, 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: minmax(0, 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-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; }
}

/* ---------- mail first: the front page, the address picker, the Mail tab ---------- */
.mhero { padding: 40px 0 8px; display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 48px; align-items: center; }
.mhero-art { height: 410px; border-radius: var(--r); background: var(--deep) image-set(url("../img/art/island-800.a1e05ba54a24.webp") 1x, url("../img/art/island.b5579185cfc0.webp") 2x) center / cover no-repeat; }
.mailhome .foot-art { display: none; }
.mailhome section[id] { scroll-margin-top: 88px; }
.mhero h1 { font-size: 64px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.0; text-wrap: balance; }
.mhero .hero-sub { max-width: 640px; }
.mailpick { margin-top: 32px; max-width: 720px; }
.mp-row { display: flex; gap: 10px; }
.mp-addr { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; height: 58px; padding: 0 6px 0 20px; background: var(--card); border-radius: var(--r-ctl); transition: background .15s; }
.mp-addr:focus-within { background: var(--raise); }
.mp-addr:has(input:focus-visible) { box-shadow: 0 0 22px rgba(43, 94, 248, .38); }
.mp-addr input:focus, .mp-addr input:focus-visible { background: transparent; box-shadow: none; }
.mp-addr input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; background: transparent; border: 0; border-radius: 0; color: var(--text); font: 500 18px/1 var(--ui); outline: none; }
.mp-addr input::placeholder { color: var(--faint); }
.mp-at { flex: none; padding: 0 4px 0 6px; color: var(--muted); font: 500 18px/1 var(--ui); }
.mp-dom { flex: none; position: relative; }
.mp-dom select { appearance: none; -webkit-appearance: none; height: 44px; padding: 0 38px 0 12px; background: var(--deep) url("../img/icons/chev-d.248a6f81a6f7.svg") no-repeat right 12px center / 16px; border: 0; border-radius: 10px; color: var(--text); font: 500 17px/1 var(--ui); cursor: pointer; }
.mp-dom select:hover, .mp-dom select:focus { background-color: var(--hover); outline: none; }
.mp-go { height: 58px; padding: 0 26px; font-size: 15.5px; flex: none; }
.mp-status { margin-top: 12px; min-height: 22px; color: var(--muted); font-size: 14.5px; }
.mp-status[data-state="ok"] { color: var(--ok); }
.mp-status[data-state="no"] { color: var(--bad); }
.mp-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; color: var(--muted); font-size: 14.5px; }
.mp-facts li { display: inline-flex; align-items: center; gap: 8px; }
.mp-facts img { width: 16px; height: 16px; opacity: .9; }
.mp-held { margin-top: 32px; max-width: 720px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: var(--card); border-radius: var(--r); }
.mp-held-addr { font: 600 22px/1.2 var(--display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.mp-held .mp-status { margin-top: 4px; min-height: 0; }
.step-at { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: radial-gradient(120% 150% at 50% 0%, var(--s1, #1b2433) 0%, var(--s2, #0f1520) 72%); }
.step-at .st-x { font-size: 17px; }
.msec { margin-top: 80px; }
.msec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.msec-head h2 { font-size: 28px; letter-spacing: -0.03em; }
.msec-head .more { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.msec-head .more:hover { color: var(--text); }
.msec-head .more img { width: 16px; height: 16px; opacity: .8; }
.mcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mcard { background: var(--card); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.mcard-ic { width: 40px; height: 40px; margin-bottom: 6px; }
.mcard-ic img { width: 40px; height: 40px; }
.mcard h3 { font-size: 18px; }
.mcard p { color: var(--muted); font-size: 14.5px; text-wrap: pretty; }
.draft-note { color: var(--warn); font-size: 13.5px; font-style: italic; }
.mcard .draft-note { margin-top: 4px; }
.mcard .draft-note, .faq-item .draft-note { color: var(--warn); }
.draft-lead { margin: -8px 0 16px; }
.mtiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mtier { background: var(--card); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.mtier h3 { font-size: 17px; color: var(--muted); font-weight: 500; }
.mtier-price { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
.mtier-price strong { font: 700 40px/1 var(--display); letter-spacing: -0.04em; }
.mtier-price span { color: var(--muted); font-size: 15px; }
.mtier-storage { font-weight: 500; margin-top: 8px; }
.mtier-note { color: var(--muted); font-size: 14px; }
.faq-item .draft-note { padding: 0 20px 18px; margin-top: -8px; }
.auth-note { color: var(--muted); font-size: 14.5px; margin: -4px 0 4px; }
.auth-note strong { color: var(--text); }
.mailtab { align-items: start; }
.mail-card { display: flex; flex-direction: column; gap: 14px; }
.mail-card .card-head { margin-bottom: 0; }
.mail-addr { font: 600 26px/1.15 var(--display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.mail-card .kv { margin: 0; }
.mail-card .mailpick { margin-top: 0; }
.mail-card .mp-addr { background: var(--deep); height: 52px; }
.mail-card .mp-addr:focus-within { background: var(--hover); }
.mail-card .mp-dom select { background-color: var(--raise); }
.mail-card .mp-go { height: 52px; }
.mail-side { display: flex; flex-direction: column; gap: 16px; }
.mail-side > .card { background: var(--card); border-radius: var(--r); padding: 22px 24px; }
.mail-release summary { list-style: none; width: fit-content; }
.mail-release summary::-webkit-details-marker { display: none; }
.mail-release p { margin: 12px 0 10px; }
.email-draft { margin: 0 0 16px; }
@media (max-width: 1200px) { .bar .topsearch { display: none !important; } .search-link { display: inline-flex !important; } .head-badge { display: none; } }
@media (max-width: 1060px) { .mhero { grid-template-columns: minmax(0, 1fr); } .mhero-art { display: none; } }
@media (max-width: 1000px) { .mcards { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .mtiers { grid-template-columns: 1fr; } .mailhome section[id] { scroll-margin-top: 138px; } }
@media (max-width: 480px) { .msec .prod-buy { display: none; } }
@media (max-width: 640px) {
  .mhero { padding-top: 20px; }
  .mhero h1 { font-size: 44px; }
  .mp-row { flex-direction: column; }
  .mp-addr { height: 54px; padding-left: 16px; }
  .mp-addr input, .mp-at { font-size: 17px; }
  .mp-dom select { font-size: 16px; padding-right: 34px; background-position: right 10px center; }
  .mp-go { width: 100%; height: 52px; }
  .mp-held { flex-direction: column; align-items: flex-start; }
  .msec { margin-top: 64px; }
  .msec-head { flex-wrap: wrap; }
  .msec-head h2 { font-size: 24px; }
}

/* ================= the one identity =================
   Nick, 2026-11-11: "Deprecate the old look, stick to the identity we have now." The store now wears the landing's
   look (directions15/site/style.css): near-black, warm off-white, mint used sparingly, Geist, pill buttons, dark rounded
   plates, big tight headlines. This block sits last so it wins; the rules above stay as the layout. */

@font-face { font-family: "Geist Var"; src: url("../fonts/Geist-var.a147f99cd533.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #07080C; --deep: #0B0C11; --card: #0F1116; --raise: #15181F; --hover: #1C1F27; --hover-2: #242833;
  --text: #F3F1EC; --muted: #CFCAC1; --faint: #B9B4AA;
  --ring: rgba(243, 241, 236, .3); --ring-2: rgba(243, 241, 236, .52); --mint: #93E6C8;
  /* the one action colour is the ink itself: light pills on the dark ground */
  --blue: #F3F1EC; --blue-2: #FFFFFF; --blue-ink: #F3F1EC; --blue-wash: #1C1F27;
  --lamp: #93E6C8; --up: #93E6C8; --ok: #93E6C8; --down: #FFB4A2; --bad: #FFB4A2; --warn: #F2CF8A;
  --r: 28px; --r-ctl: 999px; --r-sm: 999px;
  --display: "Geist Var", "Geist", system-ui, sans-serif;
  --ui: "Geist Var", "Geist", system-ui, sans-serif;
  --shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
html { font: 500 16px/1.5 var(--ui); letter-spacing: -.012em; scrollbar-color: var(--hover) var(--bg); }
body { background: var(--bg); }
::selection { background: rgba(243, 241, 236, .25); color: #fff; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 999px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -.035em; }
h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1; letter-spacing: -.05em; }
h2 { font-size: 24px; letter-spacing: -.03em; }
h3 { font-size: 19px; }

/* no small grey text: the smallest reading size is 15px, in the second ink */
.small, .hint, label, .flabel, .notice, .label, dt, .table th, .price-table th, .count, .foot-copy, .prod-meta, .prod-offer,
.qs-l, .qs-usd, .qs-note, .coin-src, .ts-all, .card-head a, .price span, .oc-price span, .offer-tag, .offer-note, .alt, .pill,
.side-h .age, .coin-name span, .coin-px span, .ntile-from, .fe-more, .htmlsw, .html-badge, .head-badge, label.check, .chip-f,
.chip, .buy-p span, .srow-chips .chip, .label, input[readonly], select.mini, .draft, .draft-note, .table.records td, .gtile-amt,
.swapcard .qs-l, .swapcard .qs-usd, .chip-net, .order-price .muted, h2.section { font-size: 15px; }
.hint, .faint, .foot-copy, .count, .coin-src, .qs-note, .qs-usd, .foot-brand p { color: var(--muted); }
label, .flabel { color: var(--text); font-weight: 600; }
.muted { color: var(--muted); }

/* ---------- header: the landing's bar ---------- */
.top { position: sticky; top: 0; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cat-tabs { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.bar { gap: 32px; }
.brand { font: 650 22px/1 var(--display); letter-spacing: -.045em; }
.brand-mark { display: none; }
.brand-word { font-weight: 650; }
.mainnav a { padding: 8px 14px; border-radius: 999px; color: var(--muted); font-size: 16px; font-weight: 500; }
.mainnav a.on { background: var(--card); color: var(--text); }
.mainnav.cats a { font-size: 15px; }
nav.user > a:not(.btn), nav.user .linkbtn { color: var(--text); font-size: 16px; }
nav.user .btn.deposit, nav.user .btn.primary { background: var(--text); color: var(--bg); }
.topsearch input[type=search] { height: 44px; background: var(--card); }
.ts-key { top: 12px; border-radius: 7px; background: var(--hover); color: var(--muted); }
.ts-results { border-radius: 22px; background: var(--raise); }
.ts-row { border-radius: 14px; }
.search-link { border-radius: 50%; }

/* ---------- pills ---------- */
.btn { height: 46px; padding: 0 22px; border-radius: 999px; background: var(--raise); font: 600 15.5px/1 var(--ui); letter-spacing: -.02em; }
.btn:hover { background: var(--hover); }
.btn.primary, .opt.buy { background: var(--text); color: var(--bg); }
.btn.primary:hover, .opt.buy:hover { background: #fff; }
.btn.small { height: 40px; padding: 0 18px; font-size: 15px; border-radius: 999px; }
.btn.big { height: 56px; padding: 0 30px; font-size: 17px; }
.btn.danger { color: var(--bad); }
.chip, .chip-f, .spot-tab, .banner-tabs a, .buy-p, .premium-tag, .head-badge, .html-badge { border-radius: 999px; }
.chip-f.on, .amt-chips .chip-f.on { background: var(--hover); }
.buy:hover .buy-p { background: var(--text); color: var(--bg); }

/* ---------- fields: the landing's pill well ---------- */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], select {
  height: 52px; padding: 0 22px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--ring); font: 500 16px var(--ui); }
textarea { border-radius: 20px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--ring); font: 500 16px/1.5 var(--ui); padding: 14px 18px; }
input:hover, select:hover, textarea:hover { box-shadow: inset 0 0 0 1px var(--ring-2); }
input:focus, select:focus, textarea:focus { background: var(--bg); }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: inset 0 0 0 1.5px var(--text); }
select { padding-right: 44px; background-position: right 18px center; }
select.mini { height: 38px; padding: 0 34px 0 14px; }
input.code { height: 56px; font-size: 22px; }
.money > span { left: 22px; height: 52px; }
.money input { padding-left: 36px; }
.money.big > span { height: 60px; left: 24px; }
.money.big input { height: 60px; padding-left: 42px; }
.copyrow .btn { height: 52px; }
label.check { color: var(--muted); font-weight: 500; }
label.check input { width: 24px; height: 24px; border-radius: 8px; background: transparent; box-shadow: inset 0 0 0 1px var(--ring-2); }
label.check input:checked { background-color: var(--text); box-shadow: none; filter: none; }
label.segopt { border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--ring); color: var(--muted); }
label.segopt.on, label.segopt.on:hover { background: var(--text); color: var(--bg); box-shadow: none; }
label.segopt.optrow { border-radius: 16px; box-shadow: none; }
label.segopt.optrow.on, label.segopt.optrow.on:hover { background: var(--hover); color: var(--text); }
label.tier.on, label.tier.on:hover, a.tile.on { background: var(--hover); }
.htmlsw.on .sw { background: var(--mint); }

/* ---------- plates ---------- */
.pcard, .spot, .banner, .side-card, .faq-item, .stage { border-radius: var(--r); }
.pcard { background: var(--card); padding: 28px; }
/* the coloured washes behind slides and banners go: plates are plain, the art carries the colour */
.spot-slide[data-key] { background: var(--card); }
.banner::before, .stage::before { background: none; }
.spot-tab::after { background: var(--hover); }
.spot-endings span:nth-child(1) { background: var(--text); color: var(--bg); }
.num-code { background: var(--raise); border-radius: 20px; }
.step-at { background: var(--raise); border-radius: 50%; }

/* ---------- headlines: big and tight, as on the info page ---------- */
.hero h1 { font-size: clamp(44px, 5.8vw, 88px); font-weight: 600; letter-spacing: -.05em; line-height: .98; }
.hero-sub { font-size: clamp(18px, 1.5vw, 22px); color: var(--muted); }
h2.section { margin: 64px 0 16px; color: var(--text); font: 600 24px var(--display); letter-spacing: -.03em; }
.card-head h2 { font-size: 22px; }

/* ---------- footer: the landing's footer, no island art ---------- */
.foot { color: var(--muted); font-size: 16px; padding: 72px 0 64px; }
.foot-art { display: none; }
.foot-head .brand { font-size: 26px; }
.index-col h4 { font: 600 16px var(--ui); color: var(--text); }
.index-col li a { color: var(--muted); font-size: 16px; padding: 4px 0; }
.index-col li a:hover, .index-col h4 a:hover { color: var(--text); }

/* ---------- prose pages (terms, privacy, guides) ---------- */
.doc, .legal { font-size: 17px; line-height: 1.6; color: var(--muted); }
.doc h1, .legal h1 { color: var(--text); }
.doc h2, .legal h2 { margin-top: 40px; color: var(--text); font-size: 26px; }
.doc a, .legal a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ring-2); }

@media (max-width: 760px) {
  .bar { gap: 16px; }
  .hero h1 { font-size: clamp(38px, 10.6vw, 56px); }
  .btn { height: 50px; }
  .btn.small { height: 40px; }
  .pcard { padding: 22px; border-radius: 24px; }
  /* no scroll snapping on touch screens (Nick) */
  .spot-tabs, .spot-tab, .chips, .mainnav, .mainnav.cats, .cat-tabs { scroll-snap-type: none !important; scroll-snap-align: none !important; }
}
/* the quick swap box: a plate with the figure in it, not a field in a field */
.qs-box, .swapcard .qs-box { border-radius: 20px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hover); }
.qs-box:focus-within { box-shadow: inset 0 0 0 1.5px var(--text); }
.qs input.qs-amt, .swapcard input.qs-amt { height: 40px; padding: 0; border-radius: 0; background: none; box-shadow: none; font: 600 24px var(--ui); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.swapcard input.qs-amt { height: 52px; font-size: 32px; }
.qs-flip { border-radius: 50%; }
/* fields that live inside their own plate (swap addresses, the mail address picker, order addresses): bare inputs */
.swap-field, .addr { border-radius: 20px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hover); }
.swap-field:focus-within, .addr:focus-within { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--text); }
.swap-field span { font-size: 15px; color: var(--muted); }
.swapcard .swap-field input, .addr input[type=text], .mp-addr input { height: 34px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.mp-addr { background: var(--bg); box-shadow: inset 0 0 0 1px var(--ring); }
.mp-addr:has(input:focus-visible) { box-shadow: inset 0 0 0 1.5px var(--text); }
.qs-out { font-family: var(--ui); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
@media (min-width: 861px) { .bar { height: 76px; } }
@media (max-width: 860px) { .bar { height: auto; } }
/* the store's own products (not a brand's) sit on the identity's teal night, not purple */
[data-b="vps"] { --s1: #1E4A50; --s2: #0B1A22; }
[data-b="bot"] { --s1: #23436B; --s2: #0B1523; }
[data-b="email"] { --s1: #2E5A55; --s2: #0C1A19; }
.legal-nav a { text-decoration: none; }

/* the signed-in address beside the balance (wide screens; phones keep the balance) */
.top .user .who { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
@media (max-width: 760px) { .top .user .who { display: none; } }

/* ================= mail plans: the landing's pricing section, as a page ================= */
.pricing { padding: 24px 0 8px; }
.pr-head { max-width: 900px; }
.pr-h { font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -.05em; text-wrap: balance; }
.pr-h .mute { color: #8D9099; }
.pr-note { margin-top: 18px; font-size: 18px; color: var(--muted); }
.pr-grid { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.pr-card { display: flex; flex-direction: column; padding: 32px; border-radius: 28px; background: var(--card); }
.pr-card.rec { background: var(--text); color: var(--bg); }
.pr-n { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 24px; letter-spacing: -.03em; }
.pr-yours { height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--hover); color: var(--mint); font: 600 14px var(--ui); letter-spacing: -.01em; }
.pr-card.rec .pr-yours { background: rgba(7, 8, 12, .08); color: #1E6B52; }
.pr-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.pr-price b { font-size: clamp(56px, 5vw, 76px); font-weight: 600; line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.pr-price span { font-size: 20px; color: #8D9099; }
.pr-card.rec .pr-price span { color: #55575E; }
.pr-alt { margin-left: 6px; }
.pr-ticks { display: flex; flex-direction: column; gap: 12px; margin: 30px 0 34px; }
.pr-ticks li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.35; color: var(--muted); }
.pr-card.rec .pr-ticks li { color: #3D3F46; }
.pr-ticks li::before { content: ""; position: absolute; left: 2px; top: .25em; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pr-cta { margin-top: auto; }
.pr-buy { display: flex; flex-direction: column; gap: 8px; }
.btn.wide { width: 100%; height: 54px; font-size: 16.5px; }
.btn.dark { background: var(--bg); color: var(--text); }
.btn.dark:hover { background: #1A1D24; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--ring); }
.pr-card.rec .btn.ghost { box-shadow: inset 0 0 0 1px rgba(7, 8, 12, .25); color: var(--bg); }
.pr-off { cursor: default; background: var(--raise); color: var(--muted); }
.pr-card.rec .pr-off { background: rgba(7, 8, 12, .08); color: #3D3F46; }
.pr-handle { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 24px; margin-top: 12px; padding: 26px 32px; border-radius: 24px; background: var(--card); }
.pr-handle strong { display: block; font-size: 22px; letter-spacing: -.03em; }
.pr-handle span { color: var(--muted); }
.pr-hp { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr-hp b { font-size: 32px; font-weight: 600; letter-spacing: -.04em; }
.pr-hp i { font-style: normal; font-size: 18px; color: #8D9099; }
.pr-foot { margin-top: 24px; color: var(--muted); font-size: 17px; }
.pr-foot a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ring-2); }
@media (max-width: 960px) {
  .pr-grid { grid-template-columns: minmax(0, 1fr); }
  .pr-card.rec { order: -1; }
  .pr-card { padding: 26px 22px 22px; border-radius: 24px; }
  .pr-handle { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 22px; }
}

/* ================= the marketplace's opening: the info page's store statement, with its drawing ================= */
.mk-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: 24px 0 clamp(32px, 4vw, 56px); }
.mk-h { font-size: clamp(42px, 5.2vw, 80px); line-height: .98; letter-spacing: -.05em; text-wrap: balance; }
.mk-h .mute { color: #8D9099; }
.mk-soon { margin-top: 18px; font-size: 18px; color: var(--text, #F3F1EC); }
.mk-soon a { text-decoration: underline; text-underline-offset: 3px; }
.mk-sub { margin-top: 22px; max-width: 30em; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.mk-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 24px; }
.mk-facts li { display: flex; align-items: center; gap: 9px; font-size: 16px; color: var(--text); }
.mk-facts li::before { content: ""; width: 16px; height: 12px; flex: none; background: var(--mint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.5l4 4 9-9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.5l4 4 9-9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.mk-art { margin: 0; aspect-ratio: 4 / 3; border-radius: 28px; background: var(--card); display: grid; place-items: center; overflow: hidden; }
.mk-art img { width: 90%; height: 90%; object-fit: contain; }
@media (max-width: 860px) {
  .mk-hero { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
  .mk-art { order: -1; border-radius: 24px; }
  .mk-facts { flex-direction: column; gap: 8px; }
}

/* ================= account: one plate on top, pill tabs under it ================= */
.acct-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 32px; padding: 28px 32px; border-radius: 28px; background: var(--card); margin-bottom: 14px; }
.acct-h { font-size: clamp(34px, 3.4vw, 48px); line-height: 1; letter-spacing: -.045em; }
.acct-login { margin-top: 10px; font-size: 17px; color: var(--muted); overflow-wrap: anywhere; }
.acct-login span { margin-left: 12px; }
.acct-confirm { display: inline-block; margin-top: 8px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ring-2); }
.acct-bal { display: flex; flex-direction: column; align-items: flex-end; }
.acct-bal-l { font-size: 15px; color: var(--muted); }
.acct-bal-v { font-size: clamp(36px, 3.4vw, 52px); font-weight: 600; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.acct-acts { display: flex; align-items: center; gap: 8px; }
.acct-acts .acct-logout { margin: 0; }
.tabs { gap: 6px; margin-bottom: 28px; padding: 2px 0; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { height: 42px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; font-size: 16px; color: var(--muted); }
.tabs a.on { background: var(--text); color: var(--bg); }
.tabs a:not(.on):hover { background: var(--card); color: var(--text); }
@media (max-width: 860px) {
  .acct-top { grid-template-columns: minmax(0, 1fr) auto; padding: 22px; border-radius: 24px; gap: 18px; }
  .acct-acts { grid-column: 1 / -1; flex-wrap: wrap; }
  .acct-acts .btn { flex: 1 1 auto; }
  .acct-acts .acct-logout { flex: 1 1 auto; } .acct-acts .acct-logout .btn { width: 100%; }
  .tabs { margin: 0 -16px 22px; padding: 2px 16px; }
}

/* account tables on a plate, and designed empty states */
.tablecard { padding: 10px 14px; border-radius: 24px; background: var(--card); overflow-x: auto; }
.tablecard .table { margin: 0; }
.empty-state { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: center; gap: 32px; padding: 24px 40px 24px 24px; border-radius: 28px; background: var(--card); }
.empty-state img { width: 100%; height: auto; }
.empty-state h2 { font-size: 30px; letter-spacing: -.04em; }
.empty-state p { margin: 10px 0 22px; max-width: 32em; color: var(--muted); font-size: 17px; line-height: 1.45; }
@media (max-width: 760px) {
  .empty-state { grid-template-columns: minmax(0, 1fr); padding: 18px 20px 24px; gap: 8px; border-radius: 24px; }
  .empty-state img { max-width: 260px; margin: 0 auto; }
  .tablecard { margin: 0 -4px; border-radius: 20px; }
}

/* phone: the banner's tabs stay on one line and scroll sideways instead of wrapping onto the art */
@media (max-width: 600px) {
  .banner-tabs { right: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 16px; }
  .banner-tabs::-webkit-scrollbar { display: none; }
  .banner-tabs a { flex: none; }
}
.inline-link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* a closed product or payment method: one wording everywhere, and one thing to do instead */
.closed-note { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--text); }
.closed-note a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* the short footer (account, legal, pricing, sign-in pages, 404): the landing's labels in one row */
.foot-c { padding: 48px 0 56px; }
.foot-c-in { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; }
.foot-c-w { font-size: 17px; }
.foot-c-links { display: flex; flex-wrap: wrap; gap: 6px 22px; flex: 1; min-width: 0; }
.foot-c-links a { padding: 4px 0; font-size: 15px; color: var(--muted); transition: color .15s; }
.foot-c-links a:hover { color: var(--text); }
.foot-c .foot-tools { margin-left: auto; }
@media (max-width: 760px) {
  .foot-c { padding: 36px 0 calc(40px + env(safe-area-inset-bottom)); }
  .foot-c-in { flex-direction: column; align-items: flex-start; gap: 16px; }
  .foot-c-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; width: 100%; }
  .foot-c-links a { padding: 8px 0; }
  .foot-c .foot-tools { margin-left: 0; }
}

/* deposits before anything can be bought: one plate, no empty form */
.dep-closed { padding: 28px 32px; }
.dep-closed h2 { margin-bottom: 10px; }
.dep-why { margin-top: 12px; max-width: 46em; font-size: 15px; line-height: 1.5; color: var(--muted); }
.dep-coins { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; }
.dep-coins li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); }
.dep-coins strong { color: var(--text); font-weight: 600; }
@media (max-width: 760px) { .dep-closed { padding: 22px 20px; } .dep-coins { flex-direction: column; } }

/* account sections: a left column on desktop (as Proton and Fastmail), a swipeable row with an edge fade below that */
@media (min-width: 1001px) {
  main.wrap:has(> nav.acct-nav) { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 40px; align-content: start; }
  main.wrap:has(> nav.acct-nav) > * { grid-column: 2; min-width: 0; }
  main.wrap:has(> nav.acct-nav) > .acct-top { grid-column: 1 / -1; margin-bottom: 28px; }
  main.wrap:has(> nav.acct-nav) > .acct-nav { grid-column: 1; grid-row: 2 / span 30; align-self: start; position: sticky; top: calc(var(--head-h, 68px) + 16px);
    flex-direction: column; gap: 2px; margin: 0; padding: 0; overflow: visible; }
  .acct-nav a { justify-content: flex-start; height: 44px; padding: 0 16px; }
  main.wrap:has(> nav.acct-nav) > :not(.acct-top):not(.acct-nav) + :not(.acct-top):not(.acct-nav) { margin-top: 14px; }
}
@media (max-width: 1000px) {
  .acct-nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); padding-right: 40px; }
}
.empty-state.plain { grid-template-columns: minmax(0, 1fr); padding: 32px; }
.acct-facts { margin-top: 16px; padding: 22px 28px; border-radius: var(--r); background: var(--card); }
.acct-facts .facts { margin: 0; }
/* the two-factor key wraps between its groups of four, never inside one */
.totp-key.mono { word-break: normal; overflow-wrap: normal; }

/* ================= phones: one header row (wordmark, search, menu); sections and account in the menu ================= */
.phmenu { display: none; }
@media (max-width: 760px) {
  .bar, .wrap.bar { flex-wrap: nowrap; height: 60px; padding-top: 0; padding-bottom: 0; row-gap: 0; gap: 12px; }
  .bar > .mainnav.site, .bar > .grow { display: none; }
  nav.user { margin-left: auto; gap: 8px; }
  nav.user > a.login, nav.user > a.btn, nav.user > a.who, nav.user > a.balance, nav.user > .htmlsw-form { display: none; }
  .phmenu { display: block; position: static; }
  .phmenu-btn { list-style: none; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--card);
    color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; }
  .phmenu-btn::-webkit-details-marker { display: none; }
  .phmenu[open] .phmenu-btn { background: var(--text); color: var(--bg); }
  .phmenu-panel { position: fixed; z-index: 40; left: 0; right: 0; top: 60px; max-height: calc(100dvh - 60px); overflow-y: auto; padding: 8px 16px 24px;
    background: var(--bg); border-radius: 0 0 24px 24px; box-shadow: 0 0 0 100vmax rgba(4, 5, 8, .62); }
  .phmenu-links { display: flex; flex-direction: column; }
  .phmenu-links a { display: flex; align-items: center; height: 52px; padding: 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
  .phmenu-links a[aria-current="page"] { color: var(--text); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
  .phmenu-acct { margin-top: 14px; padding: 16px; border-radius: 20px; background: var(--card); }
  .phmenu-who { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; color: var(--muted); }
  .phmenu-who span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .phmenu-who b { color: var(--text); font-variant-numeric: tabular-nums; }
  .phmenu-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .phmenu-acts .btn { flex: 1 1 auto; height: 48px; justify-content: center; }
  .catbar { margin-top: 0; }
}

/* legal rule lists: one rule per line, a dot before each, reading width */
.rule-list { gap: 2px; max-width: 68ch; }
.rule-list > div { position: relative; padding: 7px 0 7px 22px; font-size: 15px; line-height: 1.6; }
.rule-list > div::before { content: ""; position: absolute; left: 4px; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }

/* gift card pages on phones: the card small beside the name, all amounts on one row, then price and button */
.gc-redeem { font-size: 15px; line-height: 1.5; color: var(--text); }
@media (max-width: 760px) {
  .banner.gc-banner { grid-template-columns: minmax(0, 1fr) 118px; grid-template-rows: auto; align-items: center; }
  .gc-banner .banner-body { grid-area: 1 / 1; padding: 22px 0 22px 20px; }
  .gc-banner .banner-visual { grid-area: 1 / 2; padding: 18px 18px 18px 0; min-height: 0; }
  .gc-banner .gtile-large { padding: 10px 11px; border-radius: 11px; transform: rotate(-4deg); }
  .gc-banner .gtile-large .gtile-logo { height: 22px; }
  .gc-banner .gtile-large .gtile-name { font-size: 13px; }
  .gc-banner .gtile-large .gtile-amt { display: none; }
  .gc-banner h1 { font-size: 28px; }
  .gc-order .seg-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .gc-order .seg-opts .segopt { min-width: 0; padding: 0 6px; justify-content: center; }
  .gc-order .order { display: flex; flex-direction: column; }
  .gc-order .order > .order-kv, .gc-order .order > .gc-redeem { order: 2; }
  .gc-order .pd-block h2 { font-size: 19px; }
}

/* swap: the lists hold the common coins; any other coin is found by name */
.coin-find { margin-top: 18px; padding-top: 4px; }
.coin-find-l { display: block; margin-bottom: 8px; font-size: 15px; color: var(--muted); }
.coin-find-row { display: flex; gap: 8px; }
.coin-find-row input { flex: 1; min-width: 0; height: 44px; }
.coin-find-row .btn { height: 44px; }
.coin-find-say { margin-top: 10px; font-size: 15px; color: var(--text); }
@media (min-width: 761px) and (max-width: 1199px) {
  .foot-c-in { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px 24px; }
  .foot-c .foot-tools { grid-column: 2; grid-row: 1; justify-self: end; }
  .foot-c-links { grid-column: 1 / -1; grid-row: 2; }
}