/* OmniClient Store, in the website's design (Website/src/styles: Starscape Studios' design language with
   OmniClient's indigo, pixel labels and block marks). The store's pages use no JavaScript, so the
   website's moving parts (starfield, sliding nav pill, reveals) are still pictures here. */

/* The website's faces (fonts/LICENSES.txt): Geist for text, Instrument Serif for accents, Monocraft for labels. */
@font-face { font-family: "Geist"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../fonts/geist.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); }
@font-face { font-family: "Monocraft"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/monocraft.woff") format("woff"); }

:root {
  color-scheme: dark;
  /* As on the website (globals.css). */
  --void: #04050a;
  --space: #070811;
  --surface: #0b0d17;
  --surface-raised: #10131e;
  --surface-hover: #141826;
  --line: rgb(255 255 255 / 0.07);
  --line-strong: rgb(255 255 255 / 0.12);
  --line-bright: rgb(255 255 255 / 0.22);
  --text: #f4f4fb;
  --text-muted: #a4a9be;
  --text-dim: #80879f;
  --violet-soft: #cbc8ff;
  --violet: #8d89ff;
  --violet-strong: #6d6af5;
  --indigo: #4b5be6;
  --cyan: #7fa2ff;
  --focus: #b4b1ff;
  --accent-soft: rgb(109 106 245 / 0.14);
  --accent-line: rgb(141 137 255 / 0.42);
  --success: #5ee0a0;
  --warn: #ffc067;
  /* Rarities, as in the mod (cosmetics/Rarity.java). */
  --common: #a4a9be;
  --rare: #5b9bff;
  --epic: #b77bff;
  --legendary: #ffae4d;
  /* Plans */
  --plan-pro: #46e0d0;
  --plan-max: #b77bff;
  --plan-ultra: #ffd36b;
  --discord: #5865f2;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pixel: "Monocraft", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --pill: 999px;
  --gutter: 24px;
  --max: 1200px;
  --nav-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; color: var(--text-muted);
  /* The website's starfield, still: a few scattered points over the void. */
  background:
    radial-gradient(1px 1px at 12% 18%, rgb(255 255 255 / 0.5), transparent 60%),
    radial-gradient(1px 1px at 78% 9%, rgb(255 255 255 / 0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 32%, rgb(203 200 255 / 0.45), transparent 60%),
    radial-gradient(1px 1px at 30% 44%, rgb(255 255 255 / 0.3), transparent 60%),
    radial-gradient(1px 1px at 90% 52%, rgb(255 255 255 / 0.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 6% 70%, rgb(127 162 255 / 0.4), transparent 60%),
    radial-gradient(1px 1px at 46% 86%, rgb(255 255 255 / 0.3), transparent 60%),
    var(--void);
  background-attachment: fixed;
  font-family: var(--font); font-size: 16px; line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p a, li a, .small a, td a { color: var(--violet-soft); text-decoration-color: rgb(203 200 255 / 0.35); text-underline-offset: 3px; }
p a:hover, li a:hover, .small a:hover, td a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { color: var(--text); margin: 0; line-height: 1.08; font-weight: 560; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); letter-spacing: -0.04em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); letter-spacing: -0.03em; }
h3 { font-size: 1.0625rem; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
b, strong { color: var(--text); font-weight: 600; }
code, kbd { font-family: var(--mono); font-size: 0.875em; }
code { padding: 0.1em 0.4em; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-raised); color: var(--text); }
kbd { padding: 1px 7px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-raised); color: var(--text); font-family: var(--pixel); font-size: 0.75em; }
::selection { background: rgb(109 106 245 / 0.4); color: #fff; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--violet-strong); color: #fff; padding: 10px 16px; border-radius: var(--pill); text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 12px; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
.muted { color: var(--text-dim); }
.mono { font-family: var(--mono); font-size: 0.8125rem; }
.small { font-size: 0.8125rem; color: var(--text-dim); margin-top: 14px; }
.center-text { text-align: center; max-width: 680px; margin-left: auto; margin-right: auto; }

.dev-bar { margin: 0; padding: 7px 16px; background: rgb(255 192 103 / 0.1); border-bottom: 1px solid rgb(255 192 103 / 0.3); color: var(--warn); font-family: var(--pixel); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
.soon-bar { background: var(--accent-soft); border-bottom-color: var(--accent-line); color: var(--violet-soft); }
.notice-bar { margin: 18px 0 0; padding: 12px 18px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--text); border-radius: var(--radius-sm); font-size: 0.9375rem; }

/* Header: the website's pill navigation ------------------------------------------------------ */

.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: rgb(5 6 11 / 0.72); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid var(--line); }
.nav .container { height: 100%; display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 640; font-size: 1.0625rem; letter-spacing: -0.02em; white-space: nowrap; }
.brand img { width: 28px; height: 28px; filter: drop-shadow(0 0 12px rgb(124 108 246 / 0.45)); }
.brand .omni { background: linear-gradient(100deg, var(--violet-soft), var(--violet) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-store { margin-left: 2px; padding: 3px 8px; border: 1px solid var(--accent-line); border-radius: 6px; background: var(--accent-soft); color: var(--violet-soft); font-family: var(--pixel); font-size: 0.625rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; vertical-align: 2px; }
.nav-links { display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 4px; list-style: none; border: 1px solid var(--line); border-radius: var(--pill); background: rgb(255 255 255 / 0.02); }
.nav-links a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--pill); color: var(--text-muted); text-decoration: none; font-size: 0.875rem; font-weight: 500; white-space: nowrap; transition: color 0.2s var(--ease), background-color 0.2s var(--ease); }
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--text); background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px var(--line-strong); }
.nav-account { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 6px; border: 1px solid var(--line-strong); border-radius: var(--pill); background: rgb(255 255 255 / 0.02); color: var(--text); text-decoration: none; font-weight: 560; font-size: 0.875rem; white-space: nowrap; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); }
.nav-account:hover, .nav-account[aria-current="page"] { background: var(--surface-hover); border-color: var(--line-bright); }
.avatar { position: relative; overflow: hidden; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, var(--violet-strong), var(--indigo)); color: #fff; font-family: var(--pixel); font-size: 0.75rem; flex: none; }
.avatar.big { width: 64px; height: 64px; border-radius: 16px; font-size: 1.5rem; box-shadow: 0 0 0 1px var(--line-strong), 0 12px 40px -12px rgb(109 106 245 / 0.6); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }

/* Buttons: pills, the primary one in OmniClient's indigo -------------------------------------- */

.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--pill); font: inherit; font-weight: 560; font-size: 0.9375rem; line-height: 1; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.15s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s var(--ease); }
.btn:active { transform: scale(0.97); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 0.875rem; }
.btn-primary { background: linear-gradient(180deg, #8784ff, var(--violet-strong) 55%, #5653e0); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 0 0 1px rgb(139 134 255 / 0.5), 0 14px 40px -12px rgb(109 106 245 / 0.75); }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.22) 50%, transparent 70%); transform: translateX(-110%); transition: transform 0.75s var(--ease); }
.btn-primary:hover { background: linear-gradient(180deg, #9592ff, #7774f7 55%, #5d5ae6); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.32), 0 0 0 1px rgb(160 156 255 / 0.65), 0 18px 50px -10px rgb(109 106 245 / 0.9); }
.btn-primary:hover::after { transform: translateX(110%); }
.btn-ghost { border-color: var(--line-strong); background: rgb(255 255 255 / 0.025); color: var(--text); }
.btn-ghost:hover { border-color: var(--line-bright); background: rgb(255 255 255 / 0.07); }
.btn-quiet { color: var(--text-dim); }
.btn-quiet:hover { color: var(--text); }
.btn-discord { background: var(--discord); color: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 12px 36px -12px rgb(88 101 242 / 0.8); }
.btn-discord:hover { background: #6b77ff; }
.btn[aria-disabled="true"] { cursor: not-allowed; color: var(--text-dim); box-shadow: none; filter: saturate(0.3); }
form { margin: 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Hero ---------------------------------------------------------------------------------------- */

.hero { position: relative; padding: 104px 0 32px; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -72px 0 auto; height: 620px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 46% 56% at 50% 34%, rgb(109 106 245 / 0.3), transparent 70%),
              radial-gradient(ellipse 26% 36% at 74% 22%, rgb(255 211 107 / 0.1), transparent 70%),
              radial-gradient(ellipse 26% 36% at 26% 28%, rgb(70 224 208 / 0.1), transparent 70%); }
/* The website's frame: faint lines either side of the content. */
.hero::after { content: ""; position: absolute; inset: 0 max(var(--gutter), calc(50% - var(--max) / 2)); z-index: -1; pointer-events: none; border-inline: 1px solid var(--line); -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.hero-copy { text-align: center; max-width: 820px; margin: 0 auto; }
.hero h1 { font-size: clamp(2.75rem, 1rem + 6.4vw, 5.5rem); letter-spacing: -0.045em; line-height: 0.98; }
/* The website's accent: serif italic with a soft gradient. */
.gradient-text { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; font-size: 1.08em; line-height: 0.9; padding-right: 0.06em; background: linear-gradient(100deg, #ffffff 0%, var(--violet-soft) 45%, var(--cyan) 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px; color: var(--text-muted); font-family: var(--pixel); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; }
.eyebrow b { color: var(--violet); font-weight: 400; }
.eyebrow b::after { content: ""; display: inline-block; width: 36px; height: 1px; margin-left: 12px; vertical-align: middle; background: linear-gradient(90deg, var(--line-bright), transparent); }
.lede { margin-top: 18px; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.6; color: var(--text-muted); }
.hero .lede { margin: 24px auto 0; max-width: 600px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.hero-actions.left { justify-content: flex-start; }

/* Sections ------------------------------------------------------------------------------------ */

.section { padding-top: 72px; padding-bottom: 8px; }
.section-head { margin-bottom: 32px; max-width: 760px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head.row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; max-width: none; }
.section-head p:not(.kicker) { margin-top: 14px; color: var(--text-muted); }
.section-text { margin-top: 14px; color: var(--text-muted); }
/* Labels, as the website's eyebrows: a pixel face, wide tracking and a fading rule. */
.kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--violet); font-family: var(--pixel); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; }
.kicker::after { content: ""; width: 36px; height: 1px; background: linear-gradient(90deg, var(--line-bright), transparent); }
.section-head.center .kicker { justify-content: center; }
.back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 26px; color: var(--text-dim); text-decoration: none; font-size: 0.9375rem; }
.back:hover { color: var(--text); }
.table-title { margin: 44px 0 16px; font-size: 1.25rem; }

/* Cards: the website's thin-lined surfaces ---------------------------------------------------- */

.panel, .steps > div, .faq details, .badge-list li, .plan, .item { background: linear-gradient(180deg, rgb(255 255 255 / 0.03), rgb(255 255 255 / 0.01)), var(--surface); border: 1px solid var(--line); }

/* Plans --------------------------------------------------------------------------------------- */

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plan { --plan: var(--violet); position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius-lg); }
.plan::before { content: ""; position: absolute; inset: 0 0 auto; height: 160px; pointer-events: none; background: radial-gradient(ellipse 70% 100% at 50% 0%, color-mix(in srgb, var(--plan) 16%, transparent), transparent 70%); }
.plan::after { content: ""; position: absolute; inset: 0 24px auto; height: 1px; background: linear-gradient(90deg, transparent, var(--plan), transparent); opacity: 0.8; }
.plan > * { position: relative; }
.plan-pro { --plan: var(--plan-pro); }
.plan-max { --plan: var(--plan-max); }
.plan-ultra { --plan: var(--plan-ultra); }
.plan-current { border-color: color-mix(in srgb, var(--plan) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--plan) 35%, transparent) inset, 0 24px 60px -30px color-mix(in srgb, var(--plan) 60%, transparent); }
.plan-head { display: flex; align-items: center; gap: 12px; }
.badge-icon { image-rendering: pixelated; flex: none; }
.plan-head h3 { font-size: 1.3125rem; letter-spacing: -0.02em; }
.pill { margin-left: auto; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--plan) 40%, transparent); border-radius: var(--pill); background: color-mix(in srgb, var(--plan) 12%, transparent); color: var(--plan); font-family: var(--pixel); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; }
.plan-price { margin-top: 18px; color: var(--text-dim); }
.plan-price b { color: var(--text); font-size: 2.5rem; font-weight: 560; letter-spacing: -0.04em; }
.plan-trial { margin-top: 4px; color: var(--plan); font-weight: 560; font-size: 0.9375rem; }
.perks { flex: 1; margin: 20px 0 24px; padding: 20px 0 0; border-top: 1px solid var(--line); list-style: none; display: grid; gap: 11px; font-size: 0.9375rem; }
.perks li { position: relative; padding-left: 24px; }
/* A block mark, like the website's section rules. */
.perks li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 8px; height: 8px; background: var(--plan); box-shadow: 0 0 10px color-mix(in srgb, var(--plan) 70%, transparent); }
.plan .btn { width: 100%; }
.btn-plan { background: var(--plan); color: #07080f; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 14px 36px -14px var(--plan); }
.btn-plan:hover { filter: brightness(1.08); }

/* Items --------------------------------------------------------------------------------------- */

.tabs { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; margin: 0 0 24px; padding: 4px; list-style: none; border: 1px solid var(--line); border-radius: var(--pill); background: rgb(255 255 255 / 0.02); }
.tabs a { display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border-radius: var(--pill); color: var(--text-muted); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: color 0.2s var(--ease), background-color 0.2s var(--ease); }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text); }

.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.items.featured { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.item { --rarity: var(--common); display: flex; flex-direction: column; height: 100%; padding: 12px 12px 14px; border-radius: var(--radius); text-decoration: none; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.item:hover { border-color: color-mix(in srgb, var(--rarity) 50%, var(--line)); transform: translateY(-3px); box-shadow: 0 20px 50px -28px color-mix(in srgb, var(--rarity) 70%, transparent); }
.item-icon { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rarity) 24%, transparent), transparent 70%), var(--space); }
.item-icon img { width: 74%; height: auto; image-rendering: pixelated; transition: transform 0.35s var(--ease); }
.item:hover .item-icon img { transform: scale(1.05); }
.item-name { margin-top: 12px; color: var(--text); font-weight: 560; font-size: 0.9375rem; line-height: 1.3; }
.item-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-size: 0.8125rem; }
.rarity { color: var(--rarity); font-family: var(--pixel); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; }
.state { color: var(--text); font-weight: 600; text-align: right; }
.state-owned .state, .state-free .state { color: var(--success); }
.state-locked .state { color: var(--text-dim); font-weight: 500; }
.rarity-common { --rarity: var(--common); }
.rarity-rare { --rarity: var(--rare); }
.rarity-epic { --rarity: var(--epic); }
.rarity-legendary { --rarity: var(--legendary); }
.rarity-text-common { color: var(--common); }
.rarity-text-rare { color: var(--rare); }
.rarity-text-epic { color: var(--epic); }
.rarity-text-legendary { color: var(--legendary); }

.item-layout { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 56px; align-items: start; }
.item-art { --rarity: var(--common); display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-lg); border: 1px solid var(--line); background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rarity) 28%, transparent), transparent 70%), var(--space); box-shadow: 0 40px 90px -50px color-mix(in srgb, var(--rarity) 80%, transparent); }
.item-art img { width: 70%; height: auto; image-rendering: pixelated; }
.item-info .lede { margin-top: 14px; }
.panel { margin-top: 28px; padding: 24px; border-radius: var(--radius); }
.panel.wide { margin: 0 0 28px; }
.panel h2 { display: flex; align-items: center; gap: 10px; font-size: 1.1875rem; margin-bottom: 8px; }
.panel > p { color: var(--text-muted); }
.panel .btn { margin-top: 18px; }
.price { color: var(--text); font-size: 2.25rem; font-weight: 560; letter-spacing: -0.04em; margin-bottom: 14px; }
.price s { color: var(--text-dim); font-size: 1.125rem; font-weight: 400; margin-left: 8px; }
.owned-line { color: var(--text); }
.locked-line { color: var(--text-muted); }

/* Welcome picks ------------------------------------------------------------------------------- */

.callout { border: 1px dashed var(--accent-line); background: linear-gradient(120deg, rgb(109 106 245 / 0.14), rgb(75 91 230 / 0.04)), var(--surface); }
.callout h2 { font-size: 1.25rem; }
.pick { display: block; height: 100%; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick .item { position: relative; }
.pick input:checked + .item { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet) inset, 0 20px 50px -28px rgb(109 106 245 / 0.9); }
.pick input:checked + .item::after { content: "\2713"; position: absolute; top: 8px; right: 10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--violet-strong); color: #fff; font-size: 0.8125rem; font-weight: 700; }
.pick input:focus-visible + .item { outline: 2px solid var(--focus); outline-offset: 3px; }
.pick-bar { position: sticky; top: calc(var(--nav-h) + 10px); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 0 16px; padding: 10px 10px 10px 20px; border: 1px solid var(--line-strong); border-radius: var(--pill); background: rgb(11 13 23 / 0.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* Gifts and forms ----------------------------------------------------------------------------- */

.gift-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.gift-form label { display: block; color: var(--text); font-weight: 560; margin-bottom: 10px; }
.gift-row { display: flex; flex-wrap: wrap; gap: 10px; }
.gift-row input, .gift-select, .gift-form input { flex: 1 1 180px; height: 48px; padding: 0 18px; border-radius: var(--pill); border: 1px solid var(--line-strong); background: var(--space); color: var(--text); font: inherit; }
.gift-row input:focus, .gift-select:focus, .gift-form input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgb(109 106 245 / 0.25); }
.gift-panel > .gift-form { border-top: 0; padding-top: 0; }
.gift-panel .gift-select { flex: 0 1 220px; margin-bottom: 10px; }

/* Badges -------------------------------------------------------------------------------------- */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.badge-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.badge-list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--text-dim); }
.badge-list img, .badge-chips img { image-rendering: pixelated; flex: none; }
.badge-list b { display: block; color: var(--text); }
.badge-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.badge-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--pill); background: var(--surface-raised); border: 1px solid var(--line-strong); color: var(--text); font-size: 0.875rem; font-weight: 560; }
.badge-chips li.muted { padding: 6px 12px; color: var(--text-dim); font-weight: 500; }

/* Home blocks --------------------------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.steps > div { padding: 26px; border-radius: var(--radius); }
.steps p { margin-top: 8px; color: var(--text-muted); font-size: 0.9375rem; }
/* The website's numbered steps: a large serif numeral. */
.step { display: block; margin-bottom: 14px; font-family: var(--serif); font-style: italic; font-size: 2.75rem; line-height: 1; background: linear-gradient(100deg, #ffffff, var(--violet-soft) 50%, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fair { position: relative; overflow: hidden; padding: 36px; border-radius: var(--radius-lg); border: 1px dashed var(--accent-line); background: radial-gradient(ellipse 60% 120% at 100% 0%, rgb(109 106 245 / 0.18), transparent 70%), var(--surface); }
.fair p { margin-top: 12px; max-width: 760px; }
.sign-in-steps { margin: 28px 0 0; padding-left: 24px; display: grid; gap: 12px; color: var(--text); font-size: 1.0625rem; }
.sign-in-steps li::marker { color: var(--violet); font-family: var(--pixel); font-size: 0.8em; }

/* Tables -------------------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { color: var(--text); font-weight: 600; background: rgb(255 255 255 / 0.025); }
thead th span { display: block; color: var(--text-dim); font-weight: 500; font-size: 0.8125rem; }
.compare td { text-align: center; }
.compare tbody th { font-weight: 500; color: var(--text-muted); }
.compare .yes { color: var(--success); font-weight: 700; }
.compare .no { color: var(--text-dim); opacity: 0.6; }
.history td { color: var(--text-muted); }

.faq details { margin-top: 12px; padding: 18px 22px; border-radius: var(--radius-sm); transition: border-color 0.2s var(--ease); }
.faq details[open] { border-color: var(--line-strong); }
.faq summary { cursor: pointer; color: var(--text); font-weight: 560; }
.faq summary::marker { color: var(--violet); }
.faq details p { margin-top: 10px; color: var(--text-muted); }
.faq h2 { margin-bottom: 8px; }

/* Account ------------------------------------------------------------------------------------- */

.account-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.account-head .push { margin-left: auto; }
.account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.account-grid .panel { margin-top: 28px; }

/* Footer: the website's, with columns and the pixel wordmark ---------------------------------- */

.footer { position: relative; overflow: hidden; margin-top: 96px; padding: 72px 0 28px; border-top: 1px solid var(--line); background: radial-gradient(70% 60% at 50% 120%, rgb(124 108 246 / 0.14), transparent 70%), var(--void); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: start; }
.footer-brand p { max-width: 24rem; margin-top: 18px; color: var(--text-muted); font-size: 0.9375rem; }
.footer-studio { margin-top: 16px; color: var(--text-dim); font-family: var(--pixel); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; }
.footer-links { display: grid; grid-template-columns: repeat(3, auto); gap: 12px 56px; margin: 0; padding: 0; list-style: none; }
.footer-col { display: grid; gap: 12px; align-content: start; margin: 0; padding: 0; list-style: none; }
.footer-heading { margin-bottom: 4px; color: var(--text-dim); font-family: var(--pixel); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.9375rem; transition: color 0.2s var(--ease); }
.footer-links a:hover { color: var(--text); }
.footer-note { margin-top: 48px; padding: 20px 22px; border: 1px dashed var(--accent-line); border-radius: var(--radius); background: rgb(109 106 245 / 0.04); color: var(--text-muted); font-size: 0.875rem; }
.footer-wordmark { margin-top: 56px; user-select: none; }
.footer-wordmark svg { display: block; width: 100%; height: auto; overflow: visible; }
.footer-wordmark text { font-family: var(--pixel); font-size: 150px; fill: url(#footer-wordmark-fill); stroke: url(#footer-wordmark-stroke); stroke-width: 1.2; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--text-dim); }
.footer-legal { display: block; color: var(--text-dim); font-size: 0.75rem; }

/* Small screens ------------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .plans, .steps, .account-grid { grid-template-columns: 1fr; }
  .split, .item-layout { grid-template-columns: 1fr; gap: 28px; }
  .item-art { max-width: 380px; }
  .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; --nav-h: 64px; }
  .nav .container { gap: 10px; }
  .nav-links { margin-left: auto; margin-right: 0; padding: 3px; }
  .nav-links a { height: 34px; padding: 0 11px; }
  .nav-links li:nth-child(3) { display: none; }
  .brand > span { display: none; }
  .badge-list { grid-template-columns: 1fr; }
  .items, .items.featured { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .section-head.row { flex-direction: column; align-items: flex-start; }
  .section { padding-top: 48px; }
  .hero { padding-top: 72px; }
  .hero::after { display: none; }
  th, td { padding: 10px 12px; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .pick-bar { border-radius: var(--radius); }
}
@media (max-width: 420px) {
  .nav-name { display: none; }
  .nav-account { padding-right: 6px; }
  .nav-links a { font-size: 0.8125rem; padding: 0 9px; }
  .tabs { border-radius: var(--radius); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}