/* ==========================================================================
   capes.pro - shared design system (every page)

   Type    Figtree for everything (Google Fonts, loaded in base.html) - headings
           and prices at 700-800, text at 400-600. Swap it in --font-*.
   Colour  black, white, grey #B3B3B3, green #7DF241 - surfaces and lines are
           white at low opacity over the black. Red only for errors.
   Motion  one easing for everything, a spring for things you touch, and the
           record grooves turning behind the top of every page.

   The landing page layers assets/css/home.css (Tailwind) on top of this.
   ========================================================================== */
:root {
  --bg: #000;
  --surface: #0B0B0B;
  --surface-2: #131313;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .16);
  --text: #FFFFFF;
  --muted: #B3B3B3;
  --dim: rgba(255, 255, 255, .42);
  --primary: #7DF241;
  --primary-hover: #98F766;
  --primary-soft: rgba(125, 242, 65, .12);
  --danger: #F2555A;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  --font-display: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font: var(--font-body);

  --maxw: 1120px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.34, 1.56, .44, 1);

  /* legacy aliases (base.html injects the configured colours over these) */
  --color-primary: var(--primary);
  --color-primary-dark: var(--primary);
  --color-primary-light: var(--primary);
  --color-surface: var(--surface);
  --color-neutral-50: var(--bg);
  --color-neutral-900: var(--text);
  --color-neutral-600: var(--muted);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.1; text-wrap: balance;
}
p { margin: 0 0 .9rem; text-wrap: pretty; }
strong { font-weight: 600; }
code {
  font-family: var(--font-mono); font-size: .84em; color: var(--text);
  padding: .12em .4em; border-radius: 6px; background: rgba(255, 255, 255, .07);
}
::selection { background: var(--primary); color: #000; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
[id] { scroll-margin-top: 96px; }

/* Links inside running text: white, with a quiet underline that firms up. */
#page-content a:not([class]), .footer .disclaimer a {
  color: var(--text); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
#page-content a:not([class]):hover { text-decoration-color: var(--text); }

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 300; padding: .6rem 1.1rem;
  border-radius: 999px; background: #fff; color: #000; font-weight: 600; font-size: .9rem;
  transform: translateY(-160%); transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

/* --- layout -------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: 860px; }
.section { padding-top: 5rem; }
/* Section heads sit centred, title over note over link, like the landing page. */
.section-head {
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  margin-bottom: 2rem; text-align: center;
}
.section-title { font-size: clamp(1.65rem, 3vw, 2.2rem); letter-spacing: -.03em; }
.section-note { margin: .45rem auto 0; color: var(--muted); font-size: .95rem; max-width: 56ch; }
.section-link {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--muted); font-size: .9rem; font-weight: 600; transition: color .2s;
}
.section-link svg { width: 15px; height: 15px; transition: transform .45s var(--spring); }
.section-link:hover { color: var(--text); }
.section-link:hover svg { transform: translateX(3px); }

/* --- utilities ----------------------------------------------------------- */
.hidden { display: none !important; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1rem; }
.spinner { width: 16px; height: 16px; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* a small grey label */
.eyebrow { font-size: .78rem; font-weight: 600; color: var(--muted); }

/* --- background: the pixel sky ------------------------------------------- */
/* A grid of block-sized cells glowing over the top of every page and fading out
   below, drifting slowly sideways, with a light that sweeps across it. The rest
   of the page is plain black. (The class names are the old record's.) */
.page-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); pointer-events: none; }
.grooves {
  position: absolute; left: 50%; top: -1000px; width: 1800px; height: 1800px; margin-left: -900px;
  border-radius: 50%; overflow: hidden;
  -webkit-mask-image: radial-gradient(circle, #000 32%, transparent 66%);
          mask-image: radial-gradient(circle, #000 32%, transparent 66%);
}
.grooves__lines {
  position: absolute; inset: -32px;
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 32px 32px;
  animation: grid-pan 24s linear infinite;
}
@keyframes grid-pan { to { transform: translate(32px, 32px); } }
.grooves__light {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 200deg,
    transparent 0deg, rgba(255, 255, 255, .075) 20deg, transparent 46deg,
    transparent 180deg, rgba(125, 242, 65, .065) 200deg, transparent 228deg);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes turn { to { transform: rotate(1turn); } }
@keyframes drift { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }

/* --- scroll progress ----------------------------------------------------- */
.progress {
  position: fixed; top: 0; left: 0; z-index: 120; height: 2px; width: 100%;
  background: var(--primary); transform: scaleX(0); transform-origin: 0 50%;
}

/* the level meter: three green bars, always moving a little (account rows) */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; margin-right: .6rem; flex: none; }
.eq i { width: 2px; height: 100%; border-radius: 1px; background: var(--primary); transform-origin: 50% 100%; animation: eq .9s ease-in-out infinite alternate; }
.eq i:nth-child(1) { animation-duration: .7s; animation-delay: -.3s; }
.eq i:nth-child(2) { animation-duration: 1s; animation-delay: -.6s; }
.eq i:nth-child(3) { animation-duration: .8s; animation-delay: -.1s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* a still green dot ("online", "available now") */
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex: none; }

/* --- header -------------------------------------------------------------- */
/* The sale alert: dressed like the featured pack - the surface black, a green
   outline and glow, the green label, the code on a green chip - centred just under
   the header. It floats over the top of the page and scrolls away with it. site.js
   adds .is-in once the page has opened: the card drops out from behind the header,
   settles with a small bounce, its lines follow, and its edge lights up once.
   Without JS it is simply there. */
.promo {
  position: absolute; top: 78px; left: 50%; translate: -50% 0; z-index: 55;
  display: flex; align-items: center; gap: 1.5rem; width: min(720px, calc(100% - 28px));
  padding: .85rem .85rem .85rem 1.35rem; border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(125, 242, 65, .45), 0 30px 70px -30px rgba(125, 242, 65, .2), 0 30px 60px -24px #000;
}
.banner-off .promo { display: none; }
.promo-text { display: grid; gap: .15rem; min-width: 0; margin: 0; }
.promo-label { color: var(--primary); font-size: .78rem; font-weight: 600; line-height: 1.2; }
.promo-title { color: var(--text); font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.15; }
.promo-meta { display: flex; align-items: center; gap: 1rem; margin-left: auto; white-space: nowrap; }
.promo-code {
  display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .85rem; cursor: pointer;
  border: 0; border-radius: 12px; background: var(--primary); color: #000;
  font-family: var(--font-mono); font-size: .86rem; font-weight: 700; letter-spacing: .1em;
  transition: transform .3s var(--spring), background .2s;
}
.promo-code:hover { transform: scale(1.04); background: var(--primary-hover); }
.promo-code svg { width: 13px; height: 13px; opacity: .55; }
.promo-code.is-copied { background: var(--primary-hover); }
.promo-ends { color: var(--muted); font-size: .84rem; }
.promo-go {
  display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .95rem; border-radius: 999px;
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text); font-size: .86rem; font-weight: 600; transition: background .2s, box-shadow .2s;
}
.promo-go:hover { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.promo-go svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.promo-go:hover svg { transform: translateX(3px); }
.promo-close {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px;
  border: 0; border-radius: 50%; background: none; color: var(--dim); cursor: pointer; transition: color .2s, background .2s;
}
.promo-close:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.promo-close svg { width: 16px; height: 16px; }

/* the entrance (only with JS, so the alert is never stuck hidden) */
.js .promo { opacity: 0; visibility: hidden; transform: translateY(-150%); transition: transform .45s var(--spring), opacity .2s, visibility 0s .45s; }
.js .promo.is-in { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; animation: promo-edge 1.2s ease-out .3s 1 both; }
.js .promo.is-out { opacity: 0; transform: translateY(-40%); transition: transform .35s var(--ease), opacity .3s; }
.js .promo .promo-text, .js .promo .promo-meta { opacity: 0; translate: 0 -6px; transition: opacity .3s var(--ease), translate .3s var(--ease); }
.js .promo.is-in .promo-text { opacity: 1; translate: none; transition-delay: .15s; }
.js .promo.is-in .promo-meta { opacity: 1; translate: none; transition-delay: .22s; }
@keyframes promo-edge {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(125, 242, 65, .45), 0 30px 70px -30px rgba(125, 242, 65, .2), 0 30px 60px -24px #000; }
  35% { box-shadow: inset 0 0 0 1px rgba(125, 242, 65, .9), 0 30px 90px -30px rgba(125, 242, 65, .35), 0 30px 60px -24px #000; }
}
@media (max-width: 700px) {
  .promo { top: 70px; flex-wrap: wrap; gap: .65rem 1rem; padding: .9rem .75rem .95rem 1.05rem; border-radius: 20px; }
  .promo-text { flex: 1 1 0; }
  .promo-title { font-size: 1.1rem; }
  .promo-meta { order: 3; flex-basis: 100%; margin-left: 0; gap: .8rem; }
  .promo-go { margin-left: auto; margin-right: .3rem; }
  .promo-close { align-self: flex-start; }
}

/* A plain, full-width bar in three parts: the brand on the left, the shop's
   sections in the middle, Contact and the buy button on the right. The page you
   are on is underlined in green where the link meets the bar's bottom edge.
   site.js adds .is-scrolled once the page moves, which draws the bottom line. */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(0, 0, 0, .9); border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: border-color .3s;
}
.topbar.is-scrolled { border-bottom-color: var(--line); }
.topbar-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: 64px; }
.topbar-start { display: flex; align-items: center; gap: 1rem; justify-self: start; min-width: 0; }
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.04em;
}
/* the mark: four pixels of a block - they spread apart when you point at the brand */
.brand-mark { display: inline-grid; grid-template-columns: repeat(2, 9px); grid-auto-rows: 9px; gap: 2px; flex: none; }
.brand-mark i { border-radius: 2px; background: var(--primary); transition: transform .5s var(--spring), opacity .3s; }
.brand-mark i:nth-child(2) { opacity: .55; }
.brand-mark i:nth-child(3) { opacity: .3; }
.brand-mark i:nth-child(4) { opacity: .8; }
.brand:hover .brand-mark i:nth-child(1) { transform: translate(-2px, -2px); }
.brand:hover .brand-mark i:nth-child(2) { transform: translate(2px, -2px); opacity: 1; transition-delay: .04s; }
.brand:hover .brand-mark i:nth-child(3) { transform: translate(-2px, 2px); opacity: 1; transition-delay: .08s; }
.brand:hover .brand-mark i:nth-child(4) { transform: translate(2px, 2px); transition-delay: .12s; }
.brand-tld { color: var(--primary); }
.footer-about .brand-tld { color: var(--dim); }

.nav-links { display: flex; align-items: stretch; align-self: stretch; gap: 2rem; }
.nav-link {
  position: relative; display: flex; align-items: center;
  color: var(--muted); font-size: .94rem; font-weight: 500; transition: color .15s;
}
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--primary); transform: scaleX(0); transition: transform .35s var(--ease);
}
.nav-link.active::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; justify-self: end; gap: .6rem; }
.nav-plain {
  display: inline-flex; align-items: center; height: 38px; padding: 0 1.05rem; border-radius: 999px;
  background: rgba(255, 255, 255, .07); color: #fff; font-size: .9rem; font-weight: 500;
  transition: background-color .15s;
}
.nav-plain:hover, .nav-plain.active { background: rgba(255, 255, 255, .13); }
.nav-cta {
  display: inline-flex; align-items: center; gap: .4rem; height: 38px; padding: 0 1.1rem;
  border-radius: 999px; background: #fff; color: #000;
  font-size: .9rem; font-weight: 600; white-space: nowrap;
  transition: transform .45s var(--spring), background-color .15s;
}
.nav-cta svg { width: 15px; height: 15px; transition: transform .45s var(--spring); }
.nav-cta:hover svg { transform: translateX(2px); }
.nav-cta:hover { transform: scale(1.04); background: #EDEDED; }
.nav-cta:active { transform: scale(.97); transition-duration: .12s; }
.nav-toggle {
  display: none; width: 40px; height: 40px; margin-right: -8px; padding: 0; cursor: pointer;
  background: transparent; border: 0; border-radius: 10px; color: #fff;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .07); }
.nav-toggle svg { width: 22px; height: 22px; }
/* the phone menu: a plain panel under the bar, one link per row */
.drawer { display: none; border-top: 1px solid var(--line); background: #000; }
.drawer.open { display: block; animation: drawerIn .3s var(--ease); }
@keyframes drawerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.drawer .container { display: grid; padding-block: .5rem 1rem; }
.drawer-link {
  display: flex; align-items: center; justify-content: space-between; padding: .95rem 0;
  border-bottom: 1px solid var(--line); color: #fff; font-size: 1.05rem; font-weight: 600;
}
.drawer-link:last-child { border-bottom: 0; color: var(--muted); font-size: .92rem; font-weight: 500; }
.drawer-link:hover { color: var(--primary); }

/* --- buttons ------------------------------------------------------------- */
/* .pill is the one button on the site. .btn (the chat widget's markup) maps
   onto the same look so the two never drift apart. */
.pill, .btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 48px; padding: 0 1.5rem; border-radius: 999px; border: 0;
  font: 600 .95rem/1 var(--font-body); color: #fff; background: transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap; text-align: center;
  -webkit-appearance: none; appearance: none;
  transition: transform .45s var(--spring), background-color .2s, box-shadow .2s, color .2s;
}
.pill svg, .btn svg { width: 17px; height: 17px; flex: none; transition: transform .45s var(--spring); }
.pill:hover, .btn:hover { transform: translateY(-2px); }
.pill:hover svg[data-lucide^="arrow"], .pill:hover .lucide-arrow-right { transform: translateX(3px); }
.pill:active, .btn:active { transform: scale(.97); transition-duration: .12s; }
.pill--green, .btn-primary { background: var(--primary); color: #000; }
.pill--green:hover, .btn-primary:hover { background: var(--primary-hover); box-shadow: 0 14px 34px -14px rgba(125, 242, 65, .7); }
.pill--white { background: #fff; color: #000; }
.pill--white:hover { background: #EDEDED; }
.pill--line, .btn-outline { background: rgba(255, 255, 255, .04); color: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.pill--line:hover, .btn-outline:hover { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.pill--sm { height: 38px; padding: 0 1rem; font-size: .875rem; }
.pill--block, .btn-block { width: 100%; }
.pill:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.ripple {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: rgba(255, 255, 255, .32); pointer-events: none;
  animation: ripple-out .62s var(--ease) forwards;
}
.pill--green .ripple, .pill--white .ripple { background: rgba(0, 0, 0, .2); }
@keyframes ripple-out { to { transform: scale(14); opacity: 0; } }

/* --- page head (every page but the landing) ------------------------------ */
.page-head { padding: 4.5rem 0 1rem; text-align: center; }
.page-title { font-size: clamp(2.6rem, 6.4vw, 4.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.page-sub { margin: 1.15rem auto 0; max-width: 60ch; color: var(--muted); font-size: 1.08rem; }
.page-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.9rem; }

/* Keys | Accounts - the shop's two shelves, above both shop pages. */
.tabs {
  display: inline-flex; gap: 2px; padding: 4px; margin-bottom: 1.6rem;
  border-radius: 999px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line);
}
.tab {
  display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: 999px;
  color: var(--muted); font-size: .875rem; font-weight: 600; transition: color .2s, background-color .2s;
}
.tab svg { width: 15px; height: 15px; }
.tab:hover { color: #fff; }
.tab.is-active { background: #fff; color: #000; }

/* --- tiles: the plain card ----------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile {
  position: relative; display: flex; flex-direction: column;
  padding: 1.5rem; border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .45s var(--spring), background-color .2s, box-shadow .2s;
}
a.tile:hover, .tile--hover:hover { transform: translateY(-4px); background: #101010; box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 50px -24px rgba(0, 0, 0, .9); }
.tile-icon {
  width: 44px; height: 44px; margin-bottom: 1.15rem; border-radius: 13px;
  display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line);
}
.tile-icon svg { width: 20px; height: 20px; }
.tile h3 { font-size: 1.15rem; margin-bottom: .45rem; }
.tile p { margin: 0; color: var(--muted); font-size: .94rem; }
.tile .pill { margin-top: 1.4rem; align-self: flex-start; }

/* --- key packs: cards that lean toward the pointer ----------------------- */
/* site.js eases --rx/--ry toward the pointer and puts a soft light at --px/--py;
   the art and the buy row float above the card (translateZ). */
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.packs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* narrower cards: the price sits over a full-width button */
.packs--4 .pack-foot { flex-direction: column; align-items: stretch; gap: 1rem; }
.packs--4 .pack-foot .pill { justify-content: center; }
@media (max-width: 1140px) { .packs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pack {
  position: relative; display: flex; flex-direction: column; height: 100%; padding: 1.25rem;
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, .9);
  transition: box-shadow .3s var(--ease);
}
.pack:hover { box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 80px -30px rgba(0, 0, 0, .95); }
.pack::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--px, 50%) var(--py, 0%), rgba(255, 255, 255, .07), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.pack:hover::before { opacity: 1; }
.pack--featured { box-shadow: inset 0 0 0 1px rgba(125, 242, 65, .45), 0 30px 70px -30px rgba(125, 242, 65, .2); }
.pack--featured:hover { box-shadow: inset 0 0 0 1px rgba(125, 242, 65, .8), 0 40px 90px -30px rgba(125, 242, 65, .3); }
.pack > * { transform: translateZ(14px); }
.pack-art, .pack-foot { transform: translateZ(28px); }

/* The art: a green sleeve with the pack size pressed into it. */
.pack-art {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; padding: 1rem;
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: 14px; background: var(--primary); color: #000;
  container-type: inline-size;
}
.pack-art .brand-mark { position: relative; height: 16px; gap: 2px; }
.pack-art .brand-mark i { width: 3px; background: #000; }
.pack-art::before {                      /* faint grooves in the corner */
  content: ''; position: absolute; right: -28%; bottom: -60%; width: 90%; aspect-ratio: 1; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(0, 0, 0, .09) 0 1px, transparent 1px 6px);
}
.pack-art::after {                       /* a sheen crosses it on hover */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .4) 48%, transparent 62%);
  transform: translateX(-120%);
}
.pack:hover .pack-art::after { transform: translateX(120%); transition: transform 1s var(--ease); }
.pack-n {
  position: relative; font-family: var(--font-display); font-size: 3.6rem; font-weight: 800;
  letter-spacing: -.05em; line-height: .78;
  font-size: min(3.6rem, 20cqi);         /* "×120 upgrades" still fits a narrow sleeve */
}
.pack-n small { font-size: .42em; letter-spacing: -.02em; margin-left: .3em; }
.pack-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; }
.pack-name { font-size: 1.3rem; letter-spacing: -.035em; }
.pack-tag { font-size: .75rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pack-tag--green { color: var(--primary); }
.pack-each { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
.pack-feats { list-style: none; padding: 0; margin: 1.15rem 0 0; display: grid; gap: .5rem; }
.pack-feats li { display: flex; align-items: flex-start; gap: .55rem; color: var(--muted); font-size: .92rem; }
.pack-feats svg { width: 16px; height: 16px; margin-top: .2rem; flex: none; color: var(--primary); }
.pack-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: 1.5rem; }
.price { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.price small { font-family: var(--font-body); font-size: .8rem; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: .25rem; }

/* --- account cards ------------------------------------------------------- */
.acards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.acards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.acard {
  position: relative; display: flex; flex-direction: column; height: 100%; padding: 1.25rem;
  border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .45s var(--spring), background-color .2s, box-shadow .2s;
}
.acard:hover { transform: translateY(-4px); background: #101010; box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 50px -24px rgba(0, 0, 0, .9); }
.acard-logo {
  width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
/* Logos sit in grey and only take their own colour under the pointer. */
.acard-logo img { width: 26px; height: 26px; filter: grayscale(1) brightness(1.6); opacity: .85; transition: filter .35s var(--ease), opacity .35s, transform .45s var(--spring); }
.acard-logo svg { width: 24px; height: 24px; color: rgba(255, 255, 255, .8); transition: color .35s, transform .45s var(--spring); }
.acard:hover .acard-logo img { filter: none; opacity: 1; transform: scale(1.08); }
.acard:hover .acard-logo svg { transform: scale(1.08); color: var(--tint, #fff); }
.acard-name { margin-top: 1rem; font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.acard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .45rem; }
.acard-desc { margin: .8rem 0 0; color: var(--muted); font-size: .9rem; }
.acard-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: 1.25rem; }
.acard .price { font-size: 1.35rem; }
.tag {
  display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 500; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2);
}
.tag svg { width: 12px; height: 12px; }
.tag--green { color: var(--primary); box-shadow: inset 0 0 0 1px rgba(125, 242, 65, .35); }
.tag[title] { cursor: help; }

/* --- timed sale card at the top of the landing hero (index.html) --------
   Sits up in the hero's top padding, above the headline: the offer on the left,
   a live hours/mins/secs countdown, then the code and a link. */
.hero-sale {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1rem 1.6rem;
  width: min(880px, 100%); margin: -120px 0 2.75rem; padding: 1rem 1rem 1rem 1.4rem; text-align: left;
  border-radius: 22px; background: rgba(8, 8, 8, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(125, 242, 65, .45), 0 30px 70px -30px rgba(125, 242, 65, .25), 0 30px 60px -24px #000;
}
.hero-sale-text { display: grid; gap: .25rem; min-width: 0; }
.hero-sale-label { display: inline-flex; align-items: center; gap: .35rem; color: var(--primary); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hero-sale-label svg { width: 14px; height: 14px; fill: currentColor; }
.hero-sale-title { color: var(--text); font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.countdown { display: flex; align-items: flex-start; gap: .3rem; font-variant-numeric: tabular-nums; }
.countdown-unit { display: grid; justify-items: center; gap: .3rem; }
.countdown-unit b {
  display: block; min-width: 2.7ch; padding: .38rem .45rem; border-radius: 10px; overflow: hidden;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  color: #fff; font: 800 1.6rem/1 var(--font-display); letter-spacing: -.02em; text-align: center;
}
.countdown-unit b.is-tick { animation: count-tick .35s var(--ease); }
@keyframes count-tick { from { opacity: .2; transform: translateY(-35%); } }
.countdown-unit small { color: var(--dim); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.countdown-sep { padding-top: .32rem; color: var(--dim); font-size: 1.35rem; font-weight: 700; line-height: 1; }
.hero-sale-actions { display: flex; align-items: center; gap: .6rem; }
.hero-sale-code {
  display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .85rem; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff;
  font: 800 .88rem/1 var(--font-body); letter-spacing: .08em; cursor: pointer; transition: background-color .2s, color .2s;
}
.hero-sale-code:hover { background: rgba(255, 255, 255, .1); }
.hero-sale-code small { color: var(--dim); font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hero-sale-code svg { width: 13px; height: 13px; opacity: .6; }
.hero-sale-code.is-copied { color: var(--primary); }
.hero-sale-over { display: none; margin: 0; color: var(--muted); font-size: .95rem; }
.hero-sale.is-over .countdown, .hero-sale.is-over .hero-sale-actions { display: none; }
.hero-sale.is-over .hero-sale-over { display: block; }
.promo-clock { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .hero-sale { grid-template-columns: minmax(0, 1fr); justify-items: center; margin-top: -110px; padding: 1.1rem 1rem 1.15rem; text-align: center; }
  .hero-sale-text { justify-items: center; }
}
@media (max-width: 520px) {
  .hero-sale { margin-top: -120px; margin-bottom: 2rem; }
  .countdown-unit b { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .countdown-unit b.is-tick { animation: none; } }

/* --- account sale: the regular price struck out beside the sale one ----- */
.price-was { margin-right: .3em; color: var(--dim); font-size: .5em; font-weight: 600; letter-spacing: -.01em; text-decoration-thickness: 2px; }
.tracks-price s { display: block; color: var(--dim); font-size: .75rem; font-weight: 500; }

/* --- featured panels: a second one (the cape) sits under the first ------- */
.feature + .feature { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
@media (min-width: 901px) {
  /* One column width for logo and player, so the two panels' text lines up. */
  article.feature { grid-template-columns: 140px minmax(0, 1fr) auto; }
  article.feature > .acard-logo { justify-self: center; }
}
/* On the home page the cape panel stands alone above the list, so it gets a card. */
.features-home { max-width: 920px; margin: 0 auto 3rem; padding: 1.75rem 2rem; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

/* The live Minecraft player (assets/js/mc-viewer.js). Sized to sit inside the
   panel or card it sits in. */
.mc-stage {
  position: relative; display: grid; place-items: center; width: 140px; height: 186px; overflow: hidden;
  border-radius: 18px; cursor: grab;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.mc-stage:active { cursor: grabbing; }
.mc-stage > svg { width: 28px; height: 28px; color: rgba(255, 255, 255, .6); }
.mc-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .6s var(--ease); }
.mc-stage.is-live canvas { opacity: 1; }
.mc-stage.is-live > svg { display: none; }
@media (max-width: 900px) {
  .mc-stage { width: 104px; height: 138px; border-radius: 14px; }
  .features-home { padding: 1.25rem; }
}
@media (pointer: coarse) { .mc-stage { cursor: default; } }
@media (prefers-reduced-motion: reduce) { .mc-stage canvas { transition: none; } }

/* --- capes (landing page): one card per cape, the player on a tall stage --
   The stage fills the card's width; mc-viewer.js sizes the player to it. A
   faint record turns behind each player, in the site's grooves. */
.capes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: center; gap: 1.25rem; }
.cape {
  position: relative; display: flex; flex-direction: column; height: 100%; padding: .75rem;
  border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, .9);
  transition: box-shadow .3s var(--ease);
}
.cape:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glow, var(--primary)) 50%, transparent), 0 30px 70px -30px color-mix(in srgb, var(--glow, var(--primary)) 25%, transparent); }
.cape--featured { box-shadow: inset 0 0 0 1px rgba(125, 242, 65, .4), 0 30px 70px -30px rgba(125, 242, 65, .2); }
.cape .mc-stage {
  width: 100%; height: 300px; border-radius: 16px;
  background:
    radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--glow, var(--primary)) 18%, transparent), transparent 60%),
    repeating-radial-gradient(circle at 50% 62%, rgba(255, 255, 255, .035) 0 1px, transparent 1px 7px),
    #050505;
}
.cape .mc-stage > svg { width: 34px; height: 34px; }
.cape-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem .6rem .5rem; }
.cape-name { margin-top: .8rem; font-size: 1.3rem; letter-spacing: -.035em; }
.cape-desc { margin: .45rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.cape-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: 1.25rem; }
.cape .price { font-size: 1.6rem; }
/* a single cape: a wider card, the player beside the words */
@media (min-width: 761px) {
  .capes--one { grid-template-columns: minmax(0, 760px); }
  .capes--one .cape { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: stretch; gap: .5rem; }
  .capes--one .cape .mc-stage { height: 340px; }
  .capes--one .cape-body { padding: 1.5rem 1.25rem 1rem; }
  .capes--one .cape-name { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; }
  .capes--one .cape .price { font-size: 2.2rem; }
}
@media (max-width: 560px) { .cape .mc-stage { height: 260px; } }

/* The account we push hardest gets its own wide panel above the grid. */
.spot {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem 1.75rem;
  padding: 1.75rem; border-radius: 26px; background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(125, 242, 65, .4), 0 30px 70px -34px rgba(125, 242, 65, .25);
}
.spot::after {                             /* grooves bleeding off the right edge */
  content: ''; position: absolute; right: -180px; top: 50%; width: 420px; aspect-ratio: 1; margin-top: -210px;
  border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .05) 0 1px, transparent 1px 7px);
  -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 70%); mask-image: radial-gradient(circle, #000 40%, transparent 70%);
}
.spot > * { position: relative; z-index: 1; }
.spot .acard-logo { width: 68px; height: 68px; border-radius: 18px; }
.spot .acard-logo img { width: 36px; height: 36px; filter: none; opacity: 1; }
.spot h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.03em; }
.spot p { margin: .5rem 0 0; color: var(--muted); max-width: 60ch; }
.spot-buy { display: flex; flex-direction: column; align-items: flex-end; gap: .8rem; }
.spot .price { font-size: 2.4rem; }

/* --- steps --------------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.step {
  position: relative; padding: 1.5rem; border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.step-n {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  font-family: var(--font-display); font-size: .95rem; font-weight: 700;
}
.step h3 { margin: 1.1rem 0 .45rem; font-size: 1.15rem; }
.step p { margin: 0; color: var(--muted); font-size: .94rem; }
/* a hairline that joins the steps on wide screens */
.step:not(:last-child)::after {
  content: ''; position: absolute; top: calc(1.5rem + 17px); left: calc(1.5rem + 46px); right: -1rem; height: 1px;
  background: linear-gradient(90deg, rgba(125, 242, 65, .35), var(--line));
}

/* --- notes --------------------------------------------------------------- */
.note {
  display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.15rem;
  border-radius: var(--radius); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted); font-size: .93rem;
}
.note > svg { width: 17px; height: 17px; margin-top: .2rem; flex: none; color: #fff; }
.note strong { color: var(--text); }
.notes { display: grid; gap: .75rem; }

/* --- CTA band ------------------------------------------------------------ */
.band {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem 2rem;
  padding: 2rem 2.1rem; border-radius: 26px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.band::before {                            /* a record's edge rising from the corner */
  content: ''; position: absolute; left: -140px; bottom: -260px; width: 380px; aspect-ratio: 1; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .045) 0 1px, transparent 1px 7px);
  -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 70%); mask-image: radial-gradient(circle, #000 40%, transparent 70%);
  pointer-events: none;
}
.band--green { box-shadow: inset 0 0 0 1px rgba(125, 242, 65, .5), 0 30px 70px -34px rgba(125, 242, 65, .25); }
.band > * { position: relative; }
.band h2 { font-size: clamp(1.45rem, 2.8vw, 1.9rem); letter-spacing: -.03em; }
.band p { margin: .45rem 0 0; color: var(--muted); max-width: 52ch; }
.band-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* --- facts: a quiet row of short promises -------------------------------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact { padding: 1.4rem 1.5rem 1.4rem 0; }
.fact + .fact { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.fact strong { display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.fact strong svg { width: 17px; height: 17px; color: var(--primary); }
.fact span { display: block; margin-top: .3rem; color: var(--muted); font-size: .9rem; }

/* --- faq ----------------------------------------------------------------- */
/* Questions arrive in turn as the list scrolls in (data-animate, staggered). A
   question nudges right under the pointer; the open one gets a green bar down
   its left edge and the rest dim, so the eye stays on it; its answer slides
   down (details-content) and the text rises into place. */
.faq { border-top: 1px solid var(--line); interpolate-size: allow-keywords; }
.faq details { position: relative; border-bottom: 1px solid var(--line); }
.faq details::before {
  content: ''; position: absolute; left: -1.25rem; top: 1.2rem; bottom: 1.2rem; width: 2px; border-radius: 2px;
  background: var(--primary); transform: scaleY(0); transform-origin: 50% 0; transition: transform .55s var(--ease);
}
.faq details[open]::before { transform: scaleY(1); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  font-size: 1.02rem; font-weight: 600; transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
/* summary is a flex row: inline markup (code, strong) must sit inside one span, or
   each bare text node becomes its own flex item and the question spreads apart. */
.faq summary > span { flex: 1 1 auto; transition: transform .5s var(--spring), color .3s; }
.faq summary:hover > span { transform: translateX(6px); }
.faq:has(details[open]) details:not([open]) summary { color: var(--muted); }
.faq:has(details[open]) details:not([open]) summary:hover { color: #fff; }
.faq summary::after {                      /* a drawn plus that turns into an x */
  content: ''; width: 13px; height: 13px; flex: none; color: var(--muted);
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform .45s var(--spring), color .2s;
}
.faq summary:hover::after { color: #fff; }
.faq details[open] summary::after { transform: rotate(135deg); color: var(--primary); }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq-body { padding: 0 2.25rem 1.3rem 0; color: var(--muted); font-size: .96rem; }
.faq-body p:last-child { margin-bottom: 0; }
.faq details[open] .faq-body > * { animation: faq-in .6s var(--ease) both; }
.faq details[open] .faq-body > *:nth-child(2) { animation-delay: 80ms; }
@keyframes faq-in { from { opacity: 0; translate: 0 -10px; } }

/* --- terms: contents on the left, the text on the right ------------------ */
.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 3rem; align-items: start; }
.toc { position: sticky; top: 100px; display: grid; gap: 1px; font-size: .86rem; counter-reset: toc; }
#page-content .toc a {
  padding: .3rem 0 .3rem .85rem; border-left: 1px solid var(--line); color: var(--dim);
  text-decoration: none; transition: color .2s, border-color .2s;
}
#page-content .toc a:hover { color: #fff; border-left-color: rgba(255, 255, 255, .5); }
#page-content .toc a.is-current { color: #fff; border-left-color: var(--primary); }
.prose h2 { margin: 2.6rem 0 .7rem; font-size: 1.3rem; letter-spacing: -.03em; }
.prose h2:first-child { margin-top: 0; }
.prose h2 span { color: var(--dim); font-weight: 600; margin-right: .4rem; }
.prose p { color: var(--muted); }
.prose strong { color: var(--text); }

/* --- forms & alerts (contact form, chat) --------------------------------- */
.input, .textarea {
  width: 100%; padding: .75rem .9rem; font: inherit; font-size: .92rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  transition: border-color .18s, box-shadow .18s;
}
.input::placeholder, .textarea::placeholder { color: var(--dim); }
.input:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(125, 242, 65, .15); }
.hint { font-size: .8rem; color: var(--muted); }
/* honeypot: hidden from people, tempting to bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.alerts:empty { display: none; }
.alert {
  display: flex; gap: .7rem; align-items: flex-start; padding: .9rem 1rem; margin-bottom: .85rem;
  border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-size: .9rem;
}
.alert svg { width: 18px; height: 18px; margin-top: .1rem; flex: 0 0 auto; }
.alert strong { display: block; margin-bottom: .1rem; }
.alert-success { box-shadow: inset 0 0 0 1px rgba(125, 242, 65, .35); }
.alert-error { box-shadow: inset 0 0 0 1px rgba(242, 85, 90, .4); }

.input.is-invalid, .textarea.is-invalid { border-color: var(--danger); }
.textarea { resize: vertical; min-height: 84px; font-family: var(--font-mono); font-size: .82rem; word-break: break-all; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- checkout (/checkout/<pack>) ------------------------------------------ */
/* One short column in the landing page's frame: email, how to apply it, pay.
   No sidebar - the pack and the price are in the head and on the button. */
.back-link { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: 1.4rem; color: var(--muted); font-size: .9rem; font-weight: 600; transition: color .2s; }
.back-link svg { width: 16px; height: 16px; transition: transform .45s var(--spring); }
.back-link:hover { color: #fff; }
.back-link:hover svg { transform: translateX(-3px); }
.co-wrap { padding: 3rem 1.5rem 6rem; }
/* the whole checkout is one card, dressed like a pack: the surface black, a faint
   line, the pack on top, the fields sunk into the black below it */
.co-form {
  display: grid; gap: .5rem; max-width: 500px; margin: 0 auto; padding: 1.5rem;
  border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, .9);
}

/* the pack, as a now-playing row: a mini sleeve with its record turning */
.co-item { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.co-thumb { position: relative; flex: none; width: 88px; height: 60px; }
.co-thumb-sleeve {
  position: absolute; left: 0; top: 0; z-index: 1; width: 60px; height: 60px; padding: 7px 8px; border-radius: 6px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--primary); color: #000; font-size: 1.15rem; font-weight: 800; letter-spacing: -.05em; line-height: .9;
  box-shadow: 6px 0 14px -6px rgba(0, 0, 0, .7);
}
.co-thumb-sleeve .brand-mark { height: 10px; gap: 1.5px; }
.co-thumb-sleeve .brand-mark i { width: 2px; background: #000; }
.co-thumb-record {
  position: absolute; left: 30px; top: 2px; width: 56px; height: 56px; border-radius: 50%;
  background: repeating-radial-gradient(circle, #0E0E0E 0 1.5px, #2C2C2C 1.5px 2.5px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 16px -6px #000; animation: spin 6s linear infinite;
}
.co-thumb-record i { position: absolute; inset: 34%; border-radius: 50%; background: var(--primary); }
.co-thumb-record::after {                  /* the light lying across it - turns with it, so the turn shows */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 30deg, transparent, rgba(255, 255, 255, .14) 25deg, transparent 60deg, transparent 200deg, rgba(255, 255, 255, .1) 220deg, transparent 250deg);
}
.co-item-text { flex: 1; display: grid; min-width: 0; line-height: 1.35; }
.co-item-text strong { font-size: 1.1rem; letter-spacing: -.02em; }
.co-item-text span { color: var(--muted); font-size: .86rem; }
.co-item-price { font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em; }

/* a coupon sale, right under the pack: the code on a green chip, one line beside it */
.co-sale {
  display: flex; align-items: center; gap: .75rem; margin: .75rem 0 0; padding: .6rem .7rem;
  border-radius: 14px; background: var(--primary-soft); color: var(--muted); font-size: .86rem; line-height: 1.4;
}
.co-sale-code {
  flex: none; padding: .35rem .65rem; border-radius: 9px; background: var(--primary); color: #000;
  font-family: var(--font-mono); font-size: .82rem; font-weight: 700; letter-spacing: .1em; user-select: all;
}
.co-sale strong { color: var(--text); font-weight: 700; }

.co-body { display: grid; gap: .5rem; margin-top: 1.25rem; }
.co-field { display: block; }
.co-body > div.co-field { margin-top: .9rem; }
.co-label { display: block; margin-bottom: .5rem; font-size: .85rem; font-weight: 600; color: var(--muted); }
.co-form .input, .co-form .textarea { background: var(--bg); border-color: var(--line-2); }
.co-err { margin: 0; color: var(--danger); font-size: .84rem; }
.co-err:empty { display: none; }
.co-small { margin: .4rem 0 0; color: var(--dim); font-size: .82rem; line-height: 1.55; }
.co-small a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; transition: color .2s; }
.co-small a:hover { color: var(--text); }
.co-reveal { margin-top: .6rem; }
.co-reveal[hidden] { display: none; }
.co-reveal .textarea { min-height: 0; resize: none; }
.co-reveal .textarea::placeholder { font-family: var(--font-body); font-size: .92rem; }
.co-turnstile { display: flex; justify-content: center; }
.co-turnstile:empty { display: none; }

/* the two ways to apply it, as one switch - the chosen side lifts a shade, the
   way an outline pill does; green stays on the Pay button */
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: .55rem 1rem; border-radius: 999px; text-align: center; color: var(--dim); font-size: .88rem; font-weight: 600; transition: background-color .25s, color .25s, box-shadow .25s; }
.seg label:hover span { color: var(--text); }
.seg input:checked + span { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
.seg input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

.co-agree { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); cursor: pointer; color: var(--muted); font-size: .86rem; }
.co-agree a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.co-agree input { width: 16px; height: 16px; margin: .15rem 0 0; accent-color: var(--primary); flex: none; }
.co-submit { margin-top: .75rem; height: 52px; font-size: 1rem; }
.co-submit > span { display: inline-flex; align-items: center; gap: .5rem; }
.co-was { margin-right: -.15rem; opacity: .45; font-weight: 500; text-decoration-thickness: 1.5px; }
.co-foot { margin-top: .5rem; text-align: center; }
.co-saved { margin: .6rem 0 0; color: var(--muted); font-size: .88rem; text-align: center; overflow-wrap: anywhere; }
.co-saved strong { color: #fff; }
.co-saved a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
#coPay[hidden] { display: none; }
#coPay { gap: .9rem; }
@media (max-width: 560px) {
  .co-wrap { padding: 2rem 14px 4rem; }
  .co-form { padding: 1.1rem; }
  .co-sale { align-items: flex-start; }
}

/* The "Ordered in our Discord" pop-up, a card like the checkout's own over a
   dimmed page. Steps are a numbered list with green numbers, one line of title
   and one of detail each - nothing else competes with them. */
.guide {
  width: min(480px, calc(100% - 28px)); max-height: calc(100dvh - 32px); padding: 0; margin: auto;
  border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 90px -30px #000; overflow: auto; overscroll-behavior: contain;
}
.guide::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(6px); }
.guide[open] { animation: guide-in .35s var(--spring); }
.guide[open]::backdrop { animation: guide-fade .25s ease-out; }
@keyframes guide-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes guide-fade { from { opacity: 0; } }
html:has(.guide[open]) { overflow: hidden; }
.guide-box { padding: 1.5rem; outline: none; }      /* takes the focus on open, so no button wears a ring */
.guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.guide-label { margin: 0 0 .3rem; color: var(--primary); font-size: .78rem; font-weight: 600; }
.guide h2 { font-size: 1.35rem; letter-spacing: -.035em; }
.guide h2 code { font-size: .8em; }
.guide-close {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin: -.25rem -.4rem 0 0;
  border: 0; border-radius: 50%; background: none; color: var(--dim); cursor: pointer; transition: color .2s, background .2s;
}
.guide-close:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.guide-close svg { width: 18px; height: 18px; }
.guide-steps { counter-reset: step; list-style: none; display: grid; gap: 1rem; margin: 0; padding: 0; }
.guide-steps li { counter-increment: step; display: grid; grid-template-columns: 26px 1fr; column-gap: .8rem; line-height: 1.4; }
.guide-steps li::before {
  content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: .78rem; font-weight: 700;
}
.guide-steps strong { font-size: .95rem; font-weight: 700; letter-spacing: -.015em; }
.guide-steps span { margin-top: .15rem; color: var(--muted); font-size: .86rem; }
.guide-steps a, .guide-help { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.guide-note {
  display: flex; gap: .6rem; margin: 1.25rem 0 0; padding: .7rem .8rem; border-radius: 12px;
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: .82rem; line-height: 1.5;
}
.guide-note svg { flex: none; width: 16px; height: 16px; margin-top: .1rem; color: var(--dim); }
.guide-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.guide-help { color: var(--muted); font-size: .86rem; transition: color .2s; }
.guide-help:hover { color: var(--text); }
@media (max-width: 560px) {
  .guide-box { padding: 1.15rem; }
}
/* Closing eases out too (site.js adds .is-closing, then closes on animationend). */
.guide.is-closing { animation: guide-out .22s ease-in forwards; }
.guide.is-closing::backdrop { animation: guide-fade-out .22s ease-in forwards; }
@keyframes guide-out { to { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes guide-fade-out { to { opacity: 0; } }

/* "Delivered in our Discord" - the pop-up behind Buy on accounts sold there. */
.dbuy { width: min(440px, calc(100% - 28px)); }
.dbuy .guide-label { display: inline-flex; align-items: center; gap: .4rem; }
.dbuy .guide-label svg { width: 14px; height: 14px; }
.dbuy-meta { margin: .4rem 0 0; color: var(--muted); font-size: .85rem; }
.dbuy-lead { margin: 0 0 1.25rem; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.dbuy .guide-steps b { color: var(--text); font-weight: 600; }
.dbuy-invite {
  display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; padding: .7rem .7rem .7rem .8rem;
  border-radius: 14px; background: rgba(88, 101, 242, .08); box-shadow: inset 0 0 0 1px rgba(88, 101, 242, .32);
}
.dbuy-invite-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #5865F2; color: #fff; }
.dbuy-invite-icon svg { width: 18px; height: 18px; }
.dbuy-invite-text { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.dbuy-invite-text small { color: var(--dim); font-size: .72rem; }
.dbuy-invite-text strong { overflow: hidden; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.dbuy-copy {
  display: inline-flex; align-items: center; gap: .35rem; flex: none; height: 32px; padding: 0 .8rem;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--text);
  font: 600 .8rem/1 var(--font-body); cursor: pointer; transition: background-color .2s, color .2s;
}
.dbuy-copy:hover { background: rgba(255, 255, 255, .12); }
.dbuy-copy.is-copied { color: var(--primary); background: var(--primary-soft); }
.dbuy-copy svg { width: 14px; height: 14px; }
.dbuy-later { padding: 0; border: 0; background: none; font: inherit; font-size: .86rem; text-decoration: none; cursor: pointer; }
.order-wrap { max-width: 720px; margin: 0 auto; }
.order-wrap .band { margin-bottom: 2.5rem; }
/* --- order page (/order/<id>) -------------------------------------------- */
.label-sm { margin: 0 0 1rem; color: var(--muted); font-size: .9rem; }
.label-sm strong { color: #fff; font-family: var(--font-mono); font-weight: 600; letter-spacing: .02em; }
.order-steps { position: relative; display: grid; gap: 0; margin: 1rem 0 0; padding: 0; list-style: none; }
.order-step { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .9rem; padding: 0 0 1.6rem; }
.order-step:not(:last-child)::before {                /* the line down to the next step */
  content: ''; position: absolute; left: calc(1rem - 1px); top: 22px; bottom: 2px; width: 2px; border-radius: 1px;
  background: var(--line-2);
}
.order-step.is-done:not(:last-child)::before { background: var(--primary); }
.order-dot { width: 20px; height: 20px; margin: 2px auto 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); }
.order-step.is-done .order-dot { background: var(--primary); box-shadow: none; }
.order-step.is-now .order-dot { box-shadow: inset 0 0 0 2px var(--primary); animation: live 2.4s var(--ease) infinite; }
.order-step strong { display: block; font-size: 1.05rem; }
.order-step span { color: var(--muted); font-size: .92rem; }
.order-step:not(.is-done):not(.is-now) strong { color: var(--muted); }

/* --- footer -------------------------------------------------------------- */
.footer { margin-top: 7rem; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .015)); }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2.5rem; padding: 3.5rem 0 2.75rem; }
.footer-about p { margin: .9rem 0 1.2rem; max-width: 32ch; color: var(--muted); font-size: .92rem; }
.footer-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer-actions .pill { flex: none; }
.footer-col h4 { margin: .2rem 0 .9rem; font-family: var(--font-body); font-size: .85rem; font-weight: 600; letter-spacing: 0; }
.footer-col a:not(.brand):not(.pill) { display: block; width: fit-content; padding: .25rem 0; color: var(--muted); font-size: .9rem; transition: color .18s; }
.footer-col a:not(.brand):not(.pill):hover { color: #fff; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem;
  padding: 1.25rem 0; border-top: 1px solid var(--line); color: var(--dim); font-size: .84rem;
}
.footer .disclaimer { margin: 0 0 1.4rem; max-width: 80ch; font-size: .78rem; line-height: 1.55; color: var(--dim); }
/* The name, huge and faint, sinking off the bottom of every page. Each letter
   carries --p (0..1, how close the pointer is - set by site.js): it rises out
   of the fade and turns green. Without the script, the letter under the
   pointer still lights on its own. */
.footer { overflow: hidden; }
.footer-word {
  display: flex; justify-content: center; margin: .5rem 0 -.2em; white-space: nowrap; user-select: none;
  font-family: var(--font-display); font-size: clamp(6rem, 25vw, 23rem); font-weight: 800;
  letter-spacing: -.06em; line-height: .8;
  -webkit-mask-image: linear-gradient(#000 30%, transparent 92%); mask-image: linear-gradient(#000 30%, transparent 92%);
}
.footer-word span {
  --p: 0;
  /* faint white (p = 0) to the brand lime #7DF241 (p = 1) */
  display: block;
  color: rgba(calc(255 - var(--p) * 130), calc(255 - var(--p) * 13), calc(255 - var(--p) * 190), calc(.075 + var(--p) * .925));
  transform: translateY(calc(var(--p) * -18%));
  transition: color .3s, transform .6s var(--spring);
}
.footer-word span:hover { --p: 1; }

/* ==========================================================================
   Scroll reveals (only with JS). They animate translate/opacity, never
   `transform`, so cards keep `transform` for their own lean and lift; site.js
   drops data-animate once the reveal has played.
   ========================================================================== */
.js [data-animate] {
  opacity: 0; translate: 0 28px;
  transition: opacity .9s var(--ease), translate .9s var(--ease), scale .9s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js [data-animate="fade"]  { translate: none; }
.js [data-animate="zoom"]  { translate: 0 18px; scale: .97; }
.js [data-animate].in { opacity: 1; translate: none; scale: none; }

/* The page head on inner pages rises in a stagger as the page opens. */
.js .page-head > * { animation: head-in .9s var(--ease) both; }
.js .page-head > *:nth-child(2) { animation-delay: 70ms; }
.js .page-head > *:nth-child(3) { animation-delay: 140ms; }
.js .page-head > *:nth-child(4) { animation-delay: 210ms; }
@keyframes head-in { from { opacity: 0; translate: 0 18px; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .nav-links, .nav-plain { display: none; }
  .topbar-inner { grid-template-columns: 1fr auto; }
  .nav-actions { gap: .75rem; }
  .nav-toggle { display: inline-grid; place-items: center; }
}
@media (max-width: 700px) {
  .topbar-inner { height: 58px; }
}
@media (max-width: 900px) {
  .packs, .steps, .tiles { grid-template-columns: 1fr; }
  .step:not(:last-child)::after { display: none; }
  .acards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
  .legal { grid-template-columns: 1fr; gap: 1.5rem; }
  .toc { display: none; }
  .spot { grid-template-columns: auto 1fr; }
  .spot-buy { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 620px) {
  .section { padding-top: 3.75rem; }
  .page-head { padding-top: 3rem; }
  .facts { grid-template-columns: 1fr; }
  .fact, .fact + .fact { padding: 1.1rem 0; border-left: 0; }
  .fact + .fact { border-top: 1px solid var(--line); }
  .band { padding: 1.6rem; }
  .spot { grid-template-columns: 1fr; padding: 1.4rem; }
  .acards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .acard { padding: 1rem; }
  .acard-desc { display: none; }
  .acard-foot { flex-direction: column; align-items: stretch; gap: .6rem; }
  .acard-foot .pill { width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(125, 242, 65, .5); } 70%, 100% { box-shadow: 0 0 0 6px rgba(125, 242, 65, 0); } }

/* ==========================================================================
   capes.pro: flat capes, pixel labels, checkout and order bits
   ========================================================================== */
/* A cape's outer face, flat and pixel-sharp: the 10x16 block at (1,1) of its
   64x32 texture. --s is the size of one texture pixel. */
.cape-flat {
  --s: 6px;
  display: block; flex: none; width: calc(var(--s) * 10); height: calc(var(--s) * 16);
  background: var(--tex) calc(var(--s) * -1) calc(var(--s) * -1) / calc(var(--s) * 64) calc(var(--s) * 32) no-repeat;
  image-rendering: pixelated; image-rendering: crisp-edges;
  border-radius: 2px; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .9);
}
.cape-flat--icon { --s: 2px; box-shadow: none; }
.cape-flat--tick { --s: 1.6px; box-shadow: none; opacity: .85; }
.track .acard-logo .cape-flat--icon { --s: 2px; }
/* the still cape inside a 3D stage, until the player has drawn (and for good
   when WebGL is unavailable) */
.mc-stage > .mc-fallback { --s: 7px; }
.mc-stage.is-live > .mc-fallback { display: none; }
.mc-stage--order { width: 100%; height: 240px; border-radius: 18px; }
.order-cape { margin-bottom: 2rem; }

/* small pixel-font labels (Silkscreen) - the one blocky voice on the site */
.pixel-label {
  margin: 0 0 1rem; color: var(--primary);
  font-family: 'Silkscreen', var(--font-mono); font-size: .8rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
}

/* checkout: the cape as the item's thumbnail, the username field */
.co-thumb--cape { display: grid; place-items: center; width: 60px; height: 72px; border-radius: 10px; background: #050505; box-shadow: inset 0 0 0 1px var(--line); }
.co-thumb--cape .cape-flat { --s: 4px; }
.co-field--gap { margin-top: .9rem; }
.co-username .input { font-family: var(--font-mono); letter-spacing: .02em; }

/* ==========================================================================
   Reduced motion: everything rests in its finished state
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grooves__lines, .grooves__light, .eq i,
  .drawer.open, .js .page-head > *, .guide[open], .guide[open]::backdrop, .guide.is-closing, .guide.is-closing::backdrop { animation: none !important; }
  .js [data-animate] { opacity: 1 !important; translate: none !important; scale: none !important; transition: none !important; }
  .pill, .btn, .tile, .acard, .pack, .pack::before, .acard-logo img, .acard-logo svg,
  .faq details::details-content, .faq summary::after, .faq summary > span, .faq details::before { transition: none !important; }
  .faq details[open] .faq-body > * { animation: none !important; }
  .pack { transform: none !important; }
  .acard:hover, a.tile:hover, .tile--hover:hover, .pill:hover, .btn:hover { transform: none; }
  .pack:hover .pack-art::after { transition: none; }
  .co-thumb-record { animation: none; }
  .js .promo, .js .promo * { transition: none !important; }
  .js .promo.is-in { animation: none !important; }
  .footer-word span { transform: none !important; }
}