/* ==========================================================================
   BuyMeTokens — stylesheet
   Everything visual lives here. Colours and spacing come from the tokens in
   :root, so a palette change is a one-line edit at the top of this file.
   ========================================================================== */

:root {
  --paper:      #f8f9fb;   /* pearl-white page background */
  --card:       #ffffff;
  --ink:        #181b22;   /* primary text */
  --ink-2:      #4c535f;   /* body text */
  --muted:      #656d79;   /* secondary text */
  --faint:      #727b88;   /* labels, meta */
  --line:       #e8ebef;   /* hairlines */
  --line-2:     #e0e5eb;   /* card borders */
  --line-3:     #cbd2dc;   /* input borders */
  --dash:       #cbd2dc;   /* upload borders */
  --gold:       #c99a2e;
  --gold-soft:  #f2d27a;
  --gold-ink:   #8a6a1f;
  --wash:       #f0f3f7;

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:  'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --wrap: 1120px;         /* page max width */
  --pad: 24px;            /* page gutter */
  --r-lg: 16px;           /* card radius */
  --r-md: 12px;
  --shadow-rest: 0 2px 3px rgba(24, 35, 52, .025), 0 8px 22px -16px rgba(24, 35, 52, .16);
  --shadow-tile: 0 4px 8px -4px rgba(24, 35, 52, .08), 0 18px 32px -18px rgba(24, 35, 52, .24);

  /* Tile padding and gaps track viewport height so the wall keeps its
     proportions as it shrinks to fit one screen. */
  --tile-pad-y: clamp(9px, 1.5vh, 18px);
  --tile-gap: clamp(5px, 0.95vh, 12px);
}

* { box-sizing: border-box; }

/* A display: value on a class would otherwise beat the browser default for
   [hidden] — this keeps the hidden attribute authoritative everywhere. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(ellipse 75% 520px at 50% 0, #fff 15%, transparent 100%), var(--paper);
}
::selection { background: #eee4ca; color: var(--ink); }

/* THE ONE-SCREEN FIT.
   The wall and the mascot lane below it are sized to fill exactly one viewport:
   nav + headline + every spot + the running strip, with nothing to scroll.
   The footer deliberately sits just past the fold — that is the scroll cue.
   It works by giving the home view a definite height (the viewport minus
   everything above it — the navigation — measured into --chrome-h by
   js/app.js) so the grid rows can shrink into whatever is left over; a
   min-height alone lets them grow past the screen.
   The fit is only attempted where the tiles can still be read: a window at
   least 700px tall and wider than the phone breakpoint. Anywhere else the page
   falls back to ordinary scrolling. */
@media (min-height: 700px) and (min-width: 761px) {
  body.is-home .view[data-view="home"] {
    /* flex:none matters — the .view rule's flex-basis:0 would otherwise win
       over this height and the view would size to its content instead. */
    flex: none;
    height: calc(100dvh - var(--chrome-h, 65px));
  }
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--muted); }
.ul { border-bottom: 1px solid var(--line-3); }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

img { max-width: 100%; }

input, textarea, button { font-family: inherit; }
input:focus, textarea:focus { outline: none; border-color: var(--ink); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.right { text-align: right; }

/* --------------------------------------------------------------- buttons */
.btn {
  border: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--r-md);
  padding: 14px;
  transition: background .18s, opacity .18s, border-color .18s;
}
.btn--dark {
  background: linear-gradient(180deg, #303641, #181b22); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 6px rgba(24, 35, 52, .12);
}
.btn--dark:hover { background: #343b47; }
.btn--ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line-3); font-weight: 500; padding: 14px 18px; }
.btn--ghost:hover { border-color: var(--ink); }
.btn--pill { border-radius: 999px; padding: 10px 18px; font-size: 14px; white-space: nowrap; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--ink); }

/* --------------------------------------------------------------- nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(24, 35, 52, .025);
}
.nav__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.brand__mark { display: block; width: 40px; height: 44px; flex-shrink: 0; }
.nav__links { display: flex; gap: 6px; font-size: 14px; }
.nav__links a { color: var(--muted); padding: 8px 12px; border-radius: 8px; transition: background .18s, color .18s; }
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-active { color: var(--ink); background: var(--wash); }

/* --------------------------------------------------------------- live counter */
/* The visitor counter shares the wall's legend row to leave room for the art. */
.pulse { display: flex; align-items: center; padding: 0; }
.pulse__bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: clamp(3px, .5vh, 5px) 13px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--card);
  font-size: clamp(11px, 1.3vh, 12px);
  box-shadow: var(--shadow-rest);
  color: var(--muted);
  line-height: 1.4;
  white-space: nowrap;
}
.pulse__stat { display: inline-flex; align-items: center; gap: 5px; }
.pulse__bar b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pulse__sep { color: var(--line-3); }
.pulse__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2f9e5b;
  box-shadow: 0 0 0 0 rgba(47, 158, 91, .5);
  animation: bmt-pulse 2.4s ease-out infinite;
}

/* --------------------------------------------------------------- views */
.view { flex: 1; }

/* The wall is meant to be taken in at a glance, so the home view is laid out to
   fill exactly one viewport: nav, hero, every spot, the chase strip and the
   footer, no scrolling. The grid rows flex, so the tiles give up height
   together as the window gets shorter. Below --grid-floor the page scrolls
   again rather than crushing the tiles. */
.view[data-view="home"] { display: flex; flex-direction: column; min-height: 0; }
.view[data-view="info"], .view[data-view="activity"] { animation: bmt-fade .3s ease; }

/* --------------------------------------------------------------- hero */
.hero {
  /* width:100% matters here — an auto cross-axis margin on a flex item
     otherwise shrinks it to fit-content instead of stretching. */
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px var(--pad) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.hero__copy { max-width: 560px; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 5px;
}
.hero h1 em { font-style: italic; color: var(--gold-ink); }

.raised { flex: 0 1 320px; min-width: 260px; }
.raised__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 7px;
  white-space: nowrap;
}
.raised__row strong { color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.raised__track { height: 6px; border-radius: 999px; background: #e7ebf0; box-shadow: inset 0 1px 2px rgba(24, 35, 52, .05); overflow: hidden; display: flex; }
.raised__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #e4bd5c, var(--gold));
  border-radius: 999px;
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}

/* --------------------------------------------------------------- wall */
.wall {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(10px, 1.8vh, 16px) var(--pad) clamp(12px, 2.2vh, 20px);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.wall__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(8px, 1.3vh, 12px);
  flex: none;
}
.wall__head .pulse { grid-column: 2; justify-self: center; }
.wall__head .legend { grid-column: 3; justify-self: end; }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); }
.legend__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }
.legend__swatch--taken { background: var(--ink); }
.legend__swatch--open { border: 1px solid #bbc4cf; background: #fff; }

.grid {
  display: grid;
  padding: 12px;
  border: 1px solid #e2e7ed;
  border-radius: 24px;
  background: linear-gradient(145deg, #f0f3f7, #e9edf2);
  box-shadow: inset 0 1px 0 #fff, 0 16px 40px -30px rgba(24, 35, 52, .28);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* Two full rows for the hero and large tiles, a shorter one for the small
     squares along the bottom. */
  grid-template-rows: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px;
  flex: 1;
  min-height: 0;
}

/* A taken tile: logo, name, what they paid. Nothing else — the whole tile is
   the link, so the URL does not need to be spelled out. */
.tile {
  background: var(--card);
  box-shadow: var(--shadow-rest);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: var(--tile-pad-y) 14px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-items: center;
  justify-items: center;
  text-align: center;
  gap: clamp(4px, .65vh, 8px);
  position: relative;
  overflow: hidden;
  min-height: 0;
  transition: transform .2s, box-shadow .2s;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-tile); color: var(--ink); }

.tile__logo {
  height: var(--logo-h);
  width: var(--logo-h);
  max-height: 100%;
  max-width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: calc(var(--logo-h) * .44);
  flex-shrink: 0;
  border-radius: 22%;
  overflow: hidden;
}
/* Uploaded artwork brings its own shape and background, so the tint and the
   rounding go, and it may run wide — a wordmark fills the box, a square mark
   sits centred in it. Nothing is cropped. */
.tile__logo.has-image, .table__logo.has-image,
.summary__logo.has-image, .logo-drop__preview.has-image {
  background: none;
  /* A definite track, so the image's height:100% resolves — otherwise a square
     mark sizes to the box's width and spills out the bottom. */
  grid-template-columns: 100%;
  grid-template-rows: 100%;
}
.tile__logo.has-image { width: 92%; height: 100%; max-height: var(--logo-h); border-radius: 0; }
.tile__logo svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.tile__logo img, .table__logo img, .summary__logo img, .logo-drop__preview img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.tile__name {
  font-weight: 600; letter-spacing: -.01em; line-height: 1.15; max-width: 100%;
  overflow-wrap: anywhere; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.tile__paid {
  font-family: var(--serif);
  color: var(--muted);
  letter-spacing: -.01em;
  line-height: 1;
}

.tile.is-hero     { --logo-h: 280px; }
.tile.is-large    { --logo-h: 150px; }
.tile.is-standard { --logo-h: 105px; }

.tile.is-hero     .tile__name { font-size: clamp(18px, 2.5vh, 28px); }
.tile.is-large    .tile__name { font-size: clamp(15px, 1.9vh, 20px); }
.tile.is-standard .tile__name { font-size: clamp(12px, 1.5vh, 15px); }

.tile.is-hero     .tile__paid { font-size: clamp(16px, 2.3vh, 26px); }
.tile.is-large    .tile__paid { font-size: clamp(14px, 1.8vh, 20px); }
.tile.is-standard .tile__paid { font-size: clamp(12px, 1.5vh, 16px); }

/* an open (claimable) tile */
.slot {
  background: linear-gradient(160deg, #fff 40%, #fafbfd);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-rest);
  border-radius: var(--r-lg);
  padding: var(--tile-pad-y) 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--tile-gap);
  overflow: hidden;
  min-height: 0;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.slot:hover { border-color: #aab5c3; background: var(--card); transform: translateY(-2px); box-shadow: var(--shadow-tile); }
.slot.is-hero, .tile.is-hero { border-color: #c9d1dc; background: linear-gradient(145deg, #fff 55%, #f3f6fa); }
/* One pulse after "Claim a spot", so the button visibly points somewhere even
   when the wall was already on screen. */
.slot.is-hunting { animation: bmt-hunt 1.15s ease-in-out; }
.slot__body { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(3px, 0.5vh, 6px); line-height: 1.35; }
.slot__price { font-family: var(--serif); line-height: 1; letter-spacing: -.02em; }
.slot.is-hero     .slot__price { font-size: clamp(28px, 4.8vh, 56px); }
.slot.is-large    .slot__price { font-size: clamp(22px, 2.9vh, 40px); }
.slot.is-standard .slot__price { font-size: clamp(17px, 2.6vh, 30px); }
.slot__desc { font-size: clamp(11px, 1.35vh, 13px); color: var(--muted); line-height: 1.45; }
.slot__cta { margin-top: 1px; font-size: clamp(11px, 1.35vh, 13px); font-weight: 600; border-bottom: 1px solid var(--ink); }

/* --------------------------------------------------------------- mascot chase */
/* Two packs share one lane. The first runs off to the right and vanishes, then
   the second enters from the right, mirrored, and runs back — so the loop reads
   as the same pair going out and coming home rather than teleporting. Every
   timing below is a share of --chase-loop, so the two stay in step. */
.chase {
  --chase-loop: 15s;
  --lane-h: clamp(92px, 13.5vh, 168px);
  --pack-w: calc(var(--lane-h) * 1.94);
  position: relative;
  width: 100%;
  height: var(--lane-h);
  flex: none;
  overflow: hidden;
}
.chase__ground {
  position: absolute; left: 0; right: 0; bottom: 17%; height: 1px;
  background: linear-gradient(90deg, rgba(20,18,15,0), #e4e0da 8%, #e4e0da 92%, rgba(20,18,15,0));
}

.chase__pack {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--pack-w);
  height: 100%;
  animation-duration: var(--chase-loop);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.chase__pack--out  { animation-name: bmt-run-out; }
.chase__pack--back { animation-name: bmt-run-back; }

/* The art faces right, so the return trip is mirrored. */
.chase__flip { position: relative; width: 100%; height: 100%; }
.chase__pack--back .chase__flip { transform: scaleX(-1); }

/* Blender supplies limb motion, expressions, and contact shadows.
   Only the enclosing pack moves across the lane. The transparent 600:264
   export keeps the original mascot height and baseline at every screen size. */
.chase__film {
  position: absolute;
  left: 0;
  bottom: 11%;
  display: block;
  width: 100%;
  pointer-events: none;
  /* Feather the distant shadow-catcher edges without clipping the characters. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 94%, transparent);
  mask-composite: intersect;
}
.chase__film img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(.76) saturate(1.9) contrast(1.13);
}

.chase__shout {
  position: absolute;
  bottom: 76%;
  left: 4%;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 5px 11px; font-size: 11px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 6px 16px -10px rgba(20, 18, 15, .4);
  opacity: 0;
  animation-duration: var(--chase-loop);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.chase__pack--out  .chase__shout { animation-name: bmt-shout-out; }
/* Un-mirror the text inside the mirrored pack. */
.chase__pack--back .chase__shout { animation-name: bmt-shout-back; transform: scaleX(-1); }

/* --------------------------------------------------------------- how it works */
.backlink-wrap { max-width: var(--wrap); margin: 0 auto; padding: 32px var(--pad) 0; }
.backlink { font-size: 14px; color: var(--muted); }

.band { background: var(--card); border-top: 1px solid var(--line); margin-top: 28px; }
.band__inner { max-width: var(--wrap); margin: 0 auto; padding: 64px var(--pad); }

.split-1-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
.split-1-1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }

.band h2, .buys h2, .faq h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.lede { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.steps li { background: var(--card); box-shadow: var(--shadow-rest); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 22px; }
.steps__num { font-family: var(--serif); font-size: 32px; color: var(--gold); line-height: 1; }
.steps h3 { font-size: 17px; font-weight: 600; margin: 14px 0 6px; letter-spacing: -.01em; }
.steps p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.buys { max-width: var(--wrap); margin: 0 auto; padding: 72px var(--pad); }
.buys h2 { margin-bottom: 14px; }
.buys__body { margin: 0 0 18px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.buys__note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.subs { display: grid; gap: 12px; }
.sub {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.sub__name { font-weight: 600; font-size: 16px; }
.sub__desc { color: var(--muted); font-size: 13px; margin-top: 3px; }
.sub__price { font-family: var(--serif); font-size: 28px; letter-spacing: -.02em; white-space: nowrap; }
.sub__total { display: flex; justify-content: space-between; padding: 6px 22px 0; font-size: 14px; color: var(--muted); }
.sub__total span:last-child { font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--line); background: var(--card); }
.faq__inner { max-width: 760px; margin: 0 auto; padding: 72px var(--pad); }
.faq h2 { margin-bottom: 28px; }
.faq__item { padding: 20px 0; border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.faq__item p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }

/* --------------------------------------------------------------- activity */
.activity { max-width: 900px; margin: 0 auto; padding: 72px var(--pad) 80px; }
.activity h1 { font-family: var(--serif); font-weight: 400; font-size: 48px; letter-spacing: -.02em; margin: 18px 0 8px; }
.activity__lede { margin: 0 0 32px; color: var(--muted); font-size: 16px; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 36px; }
.stat { background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; padding: 18px 20px; }
.stat__label { font-size: 12px; color: var(--muted); }
.stat__value { font-family: var(--serif); font-size: 34px; letter-spacing: -.02em; margin-top: 4px; }

.table { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.table__head, .table__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 90px 110px;
  gap: 12px;
  align-items: center;
}
.table__head {
  padding: 12px 20px;
  font-size: 12px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--line);
}
.table__row { padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 14px; }
.sub, .stat, .table { box-shadow: var(--shadow-rest); }
.table__head { background: #fafbfd; }
.table__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.table__logo {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px; color: #fff; flex-shrink: 0;
  overflow: hidden;
}
.table__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table__name a { font-weight: 600; }
.table__name span { color: var(--faint); }
.table__spot { color: var(--ink-2); }
.table__paid { font-weight: 600; }
.table__when { color: var(--faint); }
.table__foot { padding: 14px 20px; font-size: 13px; color: var(--faint); display: flex; justify-content: space-between; gap: 12px; }
.table__empty { padding: 28px 20px; text-align: center; color: var(--faint); font-size: 14px; }

/* --------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--line); background: rgba(255, 255, 255, .7); }
.footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 26px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.footer__who { display: flex; align-items: center; gap: 12px; }
.footer__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: repeating-linear-gradient(135deg, var(--line-2) 0 4px, var(--wash) 4px 8px);
}
.footer__links { display: flex; gap: 18px; }
.footer__links a { color: var(--muted); }
.footer__legal { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad) 22px; font-size: 12px; color: var(--faint); }

/* ------------------------------------------------------ policy pages */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 18px; background: #fff; border: 1px solid var(--line-3); border-radius: 8px; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.policy-layout { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 52px var(--pad) 80px; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 48px; flex: 1; }
.policy-sidebar { align-self: start; position: sticky; top: 105px; }
.policy-sidebar nav { display: grid; gap: 6px; margin-top: 28px; }
.policy-sidebar nav a { padding: 11px 12px; border-radius: 10px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.policy-sidebar nav a:hover, .policy-sidebar nav a[aria-current="page"] { background: #eaf0f6; color: var(--ink); }
.policy-sidebar > p { font-size: 12px; color: var(--muted); line-height: 1.6; padding: 12px; }
.policy-article { padding: clamp(24px, 4vw, 48px); background: var(--card); border: 1px solid var(--line-2); border-radius: 22px; box-shadow: var(--shadow-rest); min-width: 0; }
.policy-header { padding-bottom: 28px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.policy-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.policy-header h1 { font-family: var(--serif); font-size: clamp(36px, 4vw, 50px); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; margin: 12px 0; }
.policy-header > p { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin: 0 0 16px; }
.policy-date { color: var(--muted); font-size: 12px; }
.policy-article section { margin: 30px 0 0; }
.policy-article h2 { font-size: 18px; line-height: 1.4; letter-spacing: -.015em; margin: 0 0 10px; }
.policy-article section p, .policy-article li, .contact-card > p, .policy-notice p { font-size: 14px; color: var(--ink-2); line-height: 1.75; margin: 0 0 12px; overflow-wrap: anywhere; }
.policy-article ul { padding-left: 20px; }
.policy-article li { padding-left: 4px; margin-bottom: 7px; }
.policy-article p a, .policy-article li a { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.policy-notice { background: var(--wash); border: 1px solid var(--line-2); border-radius: 12px; padding: 18px 20px; margin-top: 24px; }
.policy-notice strong { display: block; font-size: 13px; margin-bottom: 6px; }
.policy-notice p { margin: 0; font-size: 13px; }
.contact-card { padding: 26px; border: 1px solid var(--line-2); border-radius: 16px; background: linear-gradient(135deg, #fff, #f2f5f9); }
.contact-layout { width: 100%; max-width: 800px; margin: 0 auto; padding: 52px var(--pad) 80px; flex: 1; }
.contact-card h1 { margin: 12px 0 16px; font-family: var(--serif); font-size: 36px; line-height: 1.2; font-weight: 400; }
.contact-button { display: inline-flex; gap: 16px; align-items: center; margin-top: 6px; }
.contact-card .contact-caption { font-size: 12px; margin: 12px 0 0; color: var(--muted); }
.footer__links { flex-wrap: wrap; row-gap: 10px; }
.footer__status { display: block; margin-bottom: 12px; color: var(--ink-2); }
.checkout-policy { font-size: 12px; line-height: 1.6; color: var(--muted); margin-top: 16px; }
.checkout-policy a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 760px) {
  .contact-layout { padding-top: 24px; padding-bottom: 40px; }
  .policy-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 24px; }
  .policy-sidebar { position: static; }
  .policy-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
  .policy-sidebar > p { display: none; }
  .policy-article { padding: 24px 20px; }
  .contact-card { padding: 20px; }
}

/* --------------------------------------------------------------- modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(22, 21, 20, .35);
  backdrop-filter: blur(6px);
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  animation: bmt-fade .2s ease;
  overflow-y: auto;
}
.modal__card {
  background: var(--card);
  border-radius: 22px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 30px 80px -20px rgba(20, 18, 15, .35);
  animation: bmt-pop .25s cubic-bezier(.2, .8, .2, 1);
  overflow: hidden;
}
.modal__top { padding: 22px 26px 0; display: flex; justify-content: space-between; align-items: center; }
.modal__steps { display: flex; gap: 6px; }
.modal__bar { height: 4px; width: 28px; border-radius: 2px; background: var(--line-2); }
.modal__bar.is-on { background: var(--ink); }
.modal__close {
  border: 0; background: var(--wash);
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 16px; color: var(--ink-2);
}
.modal__close:hover { background: var(--line-2); }
.modal__pane { padding: 20px 26px 26px; }
.modal__eyebrow { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.modal__title { font-family: var(--serif); font-weight: 400; font-size: 32px; letter-spacing: -.02em; margin: 6px 0 4px; }
.modal__sub { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.modal__fine { margin: 14px 0 0; font-size: 12px; color: var(--faint); text-align: center; }
.modal__actions { display: flex; gap: 10px; margin-top: 20px; }
.modal__actions .btn:last-child { flex: 1; }

.fields { display: grid; gap: 12px; }
.field { display: grid; gap: 6px; font-size: 13px; font-weight: 500; }
.field__hint { color: var(--faint); font-weight: 400; }
.field input {
  border: 1px solid var(--line-3);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  background: var(--paper);
  color: var(--ink);
}
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.logo-drop {
  display: flex; align-items: center; gap: 14px;
  border: 1.5px dashed var(--line-3); border-radius: var(--r-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.logo-drop:hover { border-color: var(--muted); }
.logo-drop.is-dragging { border-color: var(--ink); background: var(--wash); }
.logo-drop:focus-within { border-color: var(--ink); }
/* Visually hidden, but still focusable and still the thing that opens the
   picker when the label is clicked. */
.logo-drop__input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.logo-drop__preview {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 18px; color: #fff; flex-shrink: 0;
  overflow: hidden;
}
.logo-drop__text { font-size: 13px; color: var(--muted); line-height: 1.4; min-width: 0; }
.logo-drop__text strong { color: var(--ink); font-weight: 600; }
.logo-drop__note.is-error { color: #b4472f; }
.logo-drop__file {
  display: block; color: var(--ink); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.logo-drop__actions { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.logo-drop__dot { color: var(--line-3); }
.logo-drop__link {
  border: 0; background: none; padding: 0;
  font-size: 13px; color: var(--muted); cursor: pointer;
  border-bottom: 1px solid var(--line-3);
}
.logo-drop__link:hover { color: var(--ink); border-bottom-color: var(--ink); }

.summary {
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.summary__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.summary__logo {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px; color: #fff; flex-shrink: 0;
  overflow: hidden;
}
.summary__name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary__meta { font-size: 12px; color: var(--muted); }
.summary__price { font-family: var(--serif); font-size: 26px; letter-spacing: -.02em; }

.done { padding: 28px 26px 30px; text-align: center; }
.done__check {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px;
  background: linear-gradient(160deg, var(--gold-soft), var(--gold));
  display: grid; place-items: center; color: #fff; font-size: 28px; font-weight: 700;
}
.done h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; letter-spacing: -.02em; margin: 0 0 8px; }
.done p { margin: 0 0 22px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.done p strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- animations */
@keyframes bmt-hunt {
  0%, 100% { border-color: var(--dash); background: transparent; }
  40%      { border-color: var(--ink); background: var(--card); }
}
@keyframes bmt-pulse {
  0%       { box-shadow: 0 0 0 0 rgba(47, 158, 91, .45); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(47, 158, 91, 0); }
}
@keyframes bmt-pop  { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bmt-fade { from { opacity: 0; } to { opacity: 1; } }
/* One lap of the lane. The pack is only visible while it is actually running:
   out from 0-46%, then hidden; back in from 50-96%, then hidden. */
@keyframes bmt-run-out {
  0%          { transform: translateX(calc(-1 * var(--pack-w) - 40px)); opacity: 1; }
  46%         { transform: translateX(calc(100vw + 40px)); opacity: 1; }
  46.1%, 100% { transform: translateX(calc(100vw + 40px)); opacity: 0; }
}
@keyframes bmt-run-back {
  0%, 49.9%   { transform: translateX(calc(100vw + 40px)); opacity: 0; }
  50%         { transform: translateX(calc(100vw + 40px)); opacity: 1; }
  96%         { transform: translateX(calc(-1 * var(--pack-w) - 40px)); opacity: 1; }
  96.1%, 100% { transform: translateX(calc(-1 * var(--pack-w) - 40px)); opacity: 0; }
}
/* Each shout fires while its own pack is mid-lane. */
@keyframes bmt-shout-out {
  0%, 8%    { opacity: 0; transform: translateY(6px) scale(.7); }
  13%, 28%  { opacity: 1; transform: translateY(0) scale(1); }
  33%, 100% { opacity: 0; transform: translateY(-4px) scale(.95); }
}
@keyframes bmt-shout-back {
  0%, 58%   { opacity: 0; transform: scaleX(-1) translateY(6px) scale(.7); }
  63%, 78%  { opacity: 1; transform: scaleX(-1) translateY(0) scale(1); }
  83%, 100% { opacity: 0; transform: scaleX(-1) translateY(-4px) scale(.95); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .chase { display: none; }
  .pulse__dot { animation: none; box-shadow: none; }
  .slot.is-hunting { animation: none; border-color: var(--ink); }
}

/* --------------------------------------------------------------- responsive */
@media (min-width: 761px) {
  .nav__inner { padding-top: 10px; padding-bottom: 10px; }
  .hero { padding-top: 10px; gap: 16px; flex-wrap: nowrap; flex-shrink: 0; }
  .hero h1 { font-size: clamp(22px, 2.2vw, 27px); }
  .raised { flex-basis: clamp(260px, 27vw, 320px); }
  .wall { padding-top: 4px; padding-bottom: 0; }
  .wall__head { margin-bottom: 6px; }
  .grid { min-height: 460px; }
}

@media (max-height: 699px) and (min-width: 761px) {
  .grid { height: 460px; flex: none; }
}

@media (max-width: 900px) {
  .split-1-2, .split-1-1 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .band__inner { padding: 48px var(--pad); }
  .buys, .faq__inner { padding: 48px var(--pad); }
  .nav__links { display: none; }
}

@media (max-width: 760px) {
  .wall__head { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .wall__head .pulse, .wall__head .legend { grid-column: 1; }
  /* Below this width the hand-placed grid areas stop making sense — every
     tile becomes a single column block, in numeric order. Ten stacked tiles
     can't share one screen, so the one-viewport fit is off here. */
  .wall { flex: none; }
  .grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: minmax(140px, auto);
    flex: none;
    min-height: 0;
  }
  .tile.is-hero { height: 280px; --logo-h: 200px; }
  .tile.is-large { height: 220px; --logo-h: 140px; }
  .tile.is-standard { height: 190px; --logo-h: 112px; }
  .grid > * { grid-column: auto !important; grid-row: auto !important; }
  .slot__price { font-size: 40px !important; }
  .tile__name { font-size: 20px !important; }

  .hero { padding-top: 28px; }
  .activity h1 { font-size: 38px; }
  .band h2, .buys h2, .faq h2 { font-size: 32px; }

  .table__head, .table__row { grid-template-columns: minmax(0, 1.6fr) 70px 90px; }
  .table__head span:nth-child(2), .table__spot { display: none; }

  .footer__inner { align-items: flex-start; }
}