/* ==========================================================================
   HoodCat CTO
   The brand is not a dark dashboard, it is black line art on flat green.
   So the page is built that way: thick ink strokes, hard offset shadows,
   nothing rounded evenly, stickers that sit slightly crooked, and the wink
   cat stamped through it. Colour is committed and explicit, so the page
   never borrows a host background.
   ========================================================================== */

:root {
  --green: #0EC225;
  --green-deep: #0A9A1D;
  --green-pale: #BEEFC4;
  --ink: #0A0D0A;
  --ink-2: #141A13;
  --paper: #F3F7F1;
  --amber: #F2B02E;
  --red: #E4695E;

  --display: "Archivo Black", "Archivo", Impact, sans-serif;
  --marker: "Permanent Marker", "Archivo Black", cursive;
  --body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1180px;
  --pad: clamp(18px, 4vw, 40px);
  --edge-w: 3px;
  --pop: 6px 6px 0 var(--edge);

  /* band defaults, overridden per section below */
  --bg: var(--ink);
  --fg: var(--paper);
  --muted: #8E9A8C;
  --card: var(--ink-2);
  --edge: var(--ink);
  --accent: var(--green);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* ---------- bands ---------- */
.band-green {
  --bg: var(--green);
  --fg: var(--ink);
  --muted: #0C4715;
  --card: var(--paper);
  --edge: var(--ink);
  --accent: var(--ink);
  background: var(--bg);
  color: var(--fg);
}
.band-ink {
  --bg: var(--ink);
  --fg: var(--paper);
  --muted: #8E9A8C;
  --card: var(--ink-2);
  --edge: #2A332A;
  --accent: var(--green);
  background: var(--bg);
  color: var(--fg);
}
.band-paper {
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: #56604F;
  --card: #FFFFFF;
  --edge: var(--ink);
  --accent: var(--green-deep);
  background: var(--bg);
  color: var(--fg);
}

section { padding-block: clamp(56px, 8vw, 100px); position: relative; }
.band-green + .band-ink, .band-ink + .band-paper,
.band-paper + .band-green, .band-paper + .bleed,
.band-ink + .band-green { border-top: var(--edge-w) solid var(--ink); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); position: relative; z-index: 2; }

/* ---------- page furniture ---------- */
.progress {
  position: fixed; top: 0; left: 0;
  height: 4px; width: 0%;
  background: var(--green);
  border-bottom: 2px solid var(--ink);
  z-index: 60;
}
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--green); color: var(--ink);
  border: var(--edge-w) solid var(--ink);
  padding: 10px 16px; font-weight: 700; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- the cat mark ---------- */
.cat { width: 34px; height: 34px; flex: none; color: currentColor; }
.cat-sm { width: 30px; height: 30px; }
.cat-head { width: 0.9em; height: 0.9em; vertical-align: -0.08em; color: var(--accent); }
.cat-card { width: 36px; height: 36px; color: var(--accent); margin-bottom: 12px; }
.cat-foot { width: 52px; height: 52px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 10px var(--pad);
  background: var(--green);
  color: var(--ink);
  border-bottom: var(--edge-w) solid var(--ink);
}
.nav-brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display);
  font-size: 21px; letter-spacing: -0.01em; text-transform: uppercase;
}
.nav-links { display: flex; gap: 20px; margin-left: auto; }
.nav-links a {
  font-size: 13.5px; font-weight: 700;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px;
  border: var(--edge-w) solid var(--ink);
  border-radius: 10px 4px 12px 5px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body); font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.1s, box-shadow 0.1s, background 0.14s;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); background: var(--green-pale); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.btn-sm { padding: 8px 14px; font-size: 13px; box-shadow: 4px 4px 0 var(--ink); }
.btn-ink { background: var(--ink); color: var(--green); }
.btn-ink:hover { background: #000; color: var(--green); }
.btn-copy { padding: 9px 14px; font-size: 12px; box-shadow: 4px 4px 0 var(--ink); }
.btn-copy.done { background: var(--green); }
.band-ink .btn { box-shadow: 5px 5px 0 #000; }

/* ---------- tags + scribbles ---------- */
.tag {
  display: inline-block;
  margin: 0 0 16px;
  padding: 5px 12px 6px;
  background: var(--ink);
  color: var(--green);
  border-radius: 8px 3px 9px 4px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.band-ink .tag { background: var(--green); color: var(--ink); }
.tag-tilt { transform: rotate(-1.6deg); }

.scribble {
  font-family: var(--marker);
  font-size: 16px;
  color: var(--muted);
  margin: 18px 0 0;
  transform: rotate(-0.8deg);
}
.marker-note {
  font-family: var(--marker);
  font-size: 15px;
  color: var(--green-deep);
  margin-left: 8px;
  display: inline-block;
  transform: rotate(-2.4deg);
  white-space: nowrap;
}

.sec-head { max-width: 64ch; margin-bottom: 34px; }
.sec-head h2 {
  font-family: var(--display);
  font-size: clamp(30px, 5.4vw, 56px);
  line-height: 0.98; letter-spacing: -0.015em; text-transform: uppercase;
  margin: 0 0 12px; text-wrap: balance;
}
.sec-head p { margin: 0; color: var(--muted); font-size: 16px; }
.sec-head .tag + h2 { margin-top: 0; }

/* ---------- hero ---------- */
.hero { overflow: hidden; padding-bottom: 0; padding-top: clamp(40px, 5vw, 64px); }
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0.5;
}
.hero-grid {
  position: relative; z-index: 2;
  max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 60px); align-items: center;
  padding-bottom: clamp(44px, 6vw, 76px);
}
h1 {
  font-family: var(--display);
  font-size: clamp(40px, 8.6vw, 96px);
  line-height: 0.9; letter-spacing: -0.022em; text-transform: uppercase;
  margin: 0 0 22px;
}
.hl {
  background: var(--ink);
  color: var(--green);
  padding: 0 0.14em 0.04em;
  border-radius: 12px 5px 14px 6px;
  display: inline-block;
  transform: rotate(-1.1deg);
}
.lede { margin: 0 0 26px; font-size: clamp(16px, 1.9vw, 19px); color: var(--muted); max-width: 50ch; font-weight: 500; }
.lede strong { color: var(--fg); font-weight: 700; }

.ca {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 13px;
  background: var(--paper);
  color: var(--ink);
  border: var(--edge-w) solid var(--ink);
  border-radius: 12px 5px 13px 6px;
  box-shadow: 5px 5px 0 var(--ink);
  margin-bottom: 22px;
}
.band-ink .ca { box-shadow: 5px 5px 0 #000; }
.ca-inline { margin: 16px 0 0; }
.ca-k { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #5B6858; }
.ca-v { font-family: var(--mono); font-size: 12.5px; font-weight: 700; word-break: break-all; flex: 1 1 250px; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-art { margin: 0; position: relative; }
.hero-art img {
  width: 100%;
  border: var(--edge-w) solid var(--ink);
  border-radius: 22px 8px 24px 10px;
  box-shadow: 12px 12px 0 var(--ink);
  transform: rotate(1.4deg);
}
.sticker {
  position: absolute;
  font-family: var(--marker);
  font-size: clamp(13px, 1.6vw, 17px);
  background: var(--paper);
  color: var(--ink);
  border: var(--edge-w) solid var(--ink);
  border-radius: 9px 4px 10px 5px;
  padding: 6px 13px 7px;
  box-shadow: 4px 4px 0 var(--ink);
  white-space: nowrap;
}
.sticker-a { top: -14px; left: -12px; transform: rotate(-7deg); }
.sticker-b { bottom: -16px; right: -10px; transform: rotate(5deg); background: var(--ink); color: var(--green); }

/* live market strip: sticker cards sitting on the green, not a spreadsheet row */
.market {
  position: relative; z-index: 3;
  padding: 0 var(--pad) clamp(28px, 4vw, 44px);
  max-width: var(--wrap);
  margin: 0 auto;
}
.market-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 12px;
}
.mk {
  background: var(--ink);
  color: var(--paper);
  border: var(--edge-w) solid var(--ink);
  border-radius: 12px 5px 13px 6px;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.32);
  padding: 13px 15px 15px;
}
.mk:nth-child(3n+1) { transform: rotate(-0.9deg); }
.mk:nth-child(3n+2) { transform: rotate(0.7deg); }
.mk:nth-child(3n)   { transform: rotate(-0.35deg); }
.mk-k {
  display: block; font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: #7E8A7C; margin-bottom: 7px;
}
.mk-v {
  font-family: var(--display); font-size: clamp(16px, 2vw, 21px);
  color: var(--green); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em; word-break: break-all;
}
.mk-v.up { color: var(--green); }
.mk-v.down { color: var(--red); }
.mk-src { background: var(--green); border-color: var(--ink); }
.mk-src .mk-k { color: #0C4715; }
.mk-src .mk-v { font-size: 15px; color: var(--ink); }
.mk-src a { border-bottom: 3px solid var(--ink); }

/* ---------- ticker ---------- */
.ticker {
  overflow: hidden;
  background: var(--ink);
  border-block: var(--edge-w) solid var(--ink);
  padding: 10px 0;
}
.ticker-track { display: flex; width: max-content; animation: slide 32s linear infinite; }
.ticker-track span {
  font-family: var(--display);
  font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--green);
  padding-inline: 18px;
  white-space: nowrap;
}
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- tracker ---------- */
.example-banner {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  padding: 13px 16px; margin-bottom: 24px;
  background: var(--amber); color: var(--ink);
  border: var(--edge-w) solid var(--ink);
  border-radius: 11px 4px 12px 5px;
  box-shadow: 5px 5px 0 #000;
  font-size: 14px; font-weight: 600;
  transform: rotate(-0.5deg);
}
.example-banner strong { font-weight: 900; }
.example-banner code { font-family: var(--mono); font-size: 12.5px; }

.bignum {
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(22px, 4vw, 42px);
  background: var(--green);
  color: var(--ink);
  border: var(--edge-w) solid var(--ink);
  border-radius: 20px 7px 22px 8px;
  box-shadow: 10px 10px 0 #000;
}
.bignum-k { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #0C4715; }
.bignum-v {
  font-family: var(--display);
  font-size: clamp(46px, 12vw, 130px);
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.bignum-sym { font-size: 0.3em; letter-spacing: 0; }
.bignum-sub { font-size: 14.5px; font-weight: 600; color: #0C4715; }

.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px; margin-top: 20px;
}
.stat {
  background: var(--card);
  border: var(--edge-w) solid var(--edge);
  border-radius: 10px 4px 11px 5px;
  padding: 14px 16px 16px;
}
.stat-k { display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.stat-v { font-family: var(--mono); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

.table-wrap {
  margin-top: 22px; overflow-x: auto;
  background: var(--card);
  border: var(--edge-w) solid var(--edge);
  border-radius: 14px 5px 15px 6px;
}
table.rounds { width: 100%; border-collapse: collapse; min-width: 680px; }
.rounds th {
  text-align: left; padding: 12px 16px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); border-bottom: 2px solid var(--edge); white-space: nowrap;
}
.rounds td { padding: 13px 16px; border-bottom: 1px solid var(--edge); font-size: 14.5px; color: var(--muted); vertical-align: top; }
.rounds tr:last-child td { border-bottom: 0; }
.rounds tbody tr:hover { background: rgba(14,194,37,0.07); }
.rounds .num { text-align: right; font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.rounds td.num { color: var(--fg); }
.rounds td.date { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.rounds td.tx { font-family: var(--mono); font-size: 12.5px; }
.rounds td.tx a { color: var(--green); border-bottom: 2px solid var(--green); }
.rounds td.tx .nohash { color: var(--amber); }
.rounds .empty { text-align: center; color: var(--muted); padding: 30px 16px; }

.table-foot { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }
.table-foot code { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.table-foot a { color: var(--green); border-bottom: 2px solid var(--green); }

/* ---------- how to buy ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.step {
  display: grid; grid-template-columns: 84px 1fr;
  background: var(--card);
  border: var(--edge-w) solid var(--ink);
  border-radius: 16px 6px 17px 7px;
  box-shadow: 6px 6px 0 var(--ink);
}
.step:nth-child(even) { transform: rotate(-0.35deg); }
.step:nth-child(odd) { transform: rotate(0.3deg); }
.step-n {
  font-family: var(--display);
  font-size: 34px; line-height: 1;
  color: var(--ink);
  background: var(--green);
  border-right: var(--edge-w) solid var(--ink);
  border-radius: 13px 0 0 4px;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 20px;
}
.step-key { background: var(--green-pale); }
.step-key .step-n { background: var(--ink); color: var(--green); }
.step-body { padding: 20px 22px 24px; }
.step-body h3 { margin: 0 0 8px; font-family: var(--display); font-size: 19px; text-transform: uppercase; letter-spacing: -0.01em; }
.step-body p { margin: 0; color: var(--muted); font-size: 15px; max-width: 66ch; }
.step-body a { color: var(--green-deep); font-weight: 700; border-bottom: 2px solid var(--green); }
.step-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

.net {
  margin-top: 14px; max-width: 520px;
  border: var(--edge-w) solid var(--ink);
  border-radius: 10px 4px 11px 5px;
  background: var(--paper);
  overflow: hidden;
}
.net-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 13px; border-bottom: 2px solid var(--ink); font-size: 13px; }
.net-row:last-child { border-bottom: 0; }
.net-row span { color: #5B6858; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.net-row code { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink); word-break: break-all; text-align: right; }

.buy-warn {
  margin: 22px 0 0; padding: 14px 17px;
  background: var(--amber); color: var(--ink);
  border: var(--edge-w) solid var(--ink);
  border-radius: 12px 5px 13px 6px;
  box-shadow: 5px 5px 0 var(--ink);
  font-size: 14px; font-weight: 600;
  transform: rotate(0.4deg);
}

/* ---------- full bleed break ---------- */
.bleed { position: relative; padding: 0; overflow: hidden; border-block: var(--edge-w) solid var(--ink); }
.bleed img { width: 100%; height: clamp(300px, 44vw, 540px); object-fit: cover; object-position: center 26%; }
.bleed::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,13,10,0.35) 0%, rgba(10,13,10,0.25) 40%, rgba(10,13,10,0.92) 100%);
}
.bleed-copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--pad) clamp(24px, 4vw, 44px);
  color: var(--paper);
}
.bleed-copy .tag { background: var(--green); color: var(--ink); }
.bleed-copy h2 { font-family: var(--display); font-size: clamp(34px, 8.4vw, 96px); line-height: 0.88; text-transform: uppercase; margin: 0; letter-spacing: -0.025em; }

/* ---------- story ---------- */
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.story-shot { margin: 0; }
.story-shot img {
  border: var(--edge-w) solid var(--ink);
  border-radius: 14px 5px 15px 6px;
  box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(-1deg);
}
.story-shot figcaption { margin-top: 20px; font-size: 14px; color: var(--muted); font-family: var(--marker); }
.story-copy p { margin: 0 0 16px; color: var(--muted); font-weight: 500; }
.story-copy .lead { color: var(--fg); font-size: 21px; font-family: var(--display); text-transform: uppercase; line-height: 1.1; }
.story-copy em { font-style: normal; background: var(--ink); color: var(--green); padding: 0 6px; border-radius: 6px 3px 7px 3px; }
.disclaim {
  margin-top: 22px !important; padding: 13px 15px;
  background: var(--paper); color: var(--ink);
  border: var(--edge-w) solid var(--ink);
  border-radius: 10px 4px 11px 5px;
  font-size: 13.5px;
}

/* ---------- gallery belts ---------- */
.gallery { padding-bottom: clamp(44px, 6vw, 72px); }
.belt { overflow: hidden; margin-top: 12px; }
.belt-track { display: flex; gap: 12px; width: max-content; animation: slide linear infinite; animation-duration: 52s; }
.belt-rev .belt-track { animation-direction: reverse; animation-duration: 64s; }
.belt:hover .belt-track { animation-play-state: paused; }
.belt figure {
  margin: 0; flex: none; width: clamp(200px, 24vw, 300px);
  border: var(--edge-w) solid var(--green);
  border-radius: 14px 5px 15px 6px;
  overflow: hidden; background: var(--ink-2);
}
.belt figure:nth-child(odd) { transform: rotate(-0.8deg); }
.belt figure:nth-child(even) { transform: rotate(0.7deg); }
.belt img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2,0.7,0.3,1); }
.belt figure:hover img { transform: scale(1.05); }

/* ---------- cto ---------- */
.cto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 16px; }
.cto-card {
  padding: 20px 20px 22px;
  background: var(--card);
  border: var(--edge-w) solid var(--ink);
  border-radius: 16px 6px 17px 7px;
  box-shadow: 6px 6px 0 var(--ink);
}
.cto-card:nth-child(2) { transform: rotate(-0.7deg); }
.cto-card:nth-child(3) { transform: rotate(0.6deg); }
.cto-card-warn { background: var(--green); }
.cto-card-warn .cat-card, .cto-card-warn .card-k { color: var(--ink); }
.cto-card-warn p { color: #0C4715; }
.card-k { display: block; font-family: var(--display); font-size: 15px; text-transform: uppercase; color: var(--green-deep); margin-bottom: 9px; letter-spacing: -0.005em; }
.cto-card p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- verify ---------- */
.fact-ca-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: var(--green);
  color: var(--ink);
  border: var(--edge-w) solid var(--ink);
  border-radius: 14px 5px 15px 6px;
  box-shadow: 7px 7px 0 #000;
}
.fact-ca-row .ca-k { color: #0C4715; }
.fact-ca-row .ca-v {
  flex: 1 1 420px;
  font-size: clamp(12px, 1.5vw, 16px);
  font-weight: 700;
  word-break: break-all;
}

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 22px; }
.facts > div {
  background: var(--card);
  border: var(--edge-w) solid var(--edge);
  border-radius: 11px 4px 12px 5px;
  padding: 14px 16px 16px;
}
.facts dt { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.facts dd { margin: 0; font-family: var(--mono); font-size: 13px; font-weight: 700; word-break: break-all; }
.link-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- footer + toast ---------- */
.foot { padding-block: 36px; border-top: var(--edge-w) solid var(--ink); }
.foot-inner { display: flex; gap: 20px; align-items: flex-start; }
.foot-copy { max-width: 78ch; }
.foot-legal { margin: 0; font-size: 13.5px; line-height: 1.6; color: #0C4715; font-weight: 500; }
.foot-legal strong { color: var(--ink); font-weight: 900; }
.foot-cto { margin: 10px 0 0; font-family: var(--marker); font-size: 14px; color: #0C4715; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) rotate(-1.2deg);
  z-index: 80;
  background: var(--green); color: var(--ink);
  border: var(--edge-w) solid var(--ink);
  border-radius: 10px 4px 11px 5px;
  box-shadow: 6px 6px 0 var(--ink);
  font-weight: 800; font-size: 14px;
  padding: 11px 20px;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 280px; margin-inline: auto; }
  .story-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 62px 1fr; }
  .step-n { font-size: 26px; padding-top: 18px; }
  .step-body { padding: 18px 18px 22px; }
  .net-row { flex-direction: column; gap: 4px; }
  .net-row code { text-align: left; }
  .mk { border-right: 0; border-bottom: 2px solid #222B21; padding-right: 0; }
  .marker-note { display: block; margin: 6px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- flat line-art placements ----------
   These are transparent cutouts of the same drawing style as the mark, so
   they sit inside a band as artwork rather than as a photograph pasted on it.
   No borders, no shadows, nothing that reads as a picture in a frame. */
.bignum { position: relative; overflow: hidden; }
.bignum-coin {
  position: absolute;
  right: -34px; bottom: -46px;
  width: clamp(160px, 24vw, 300px);
  height: auto;
  opacity: 0.5;
  pointer-events: none;
  transform: rotate(-6deg);
}
.bignum-k, .bignum-v, .bignum-sub { position: relative; z-index: 2; }

.cto-toy {
  width: clamp(150px, 19vw, 230px);
  margin: 0 0 6px;
  transform: rotate(-1.5deg);
}
@media (max-width: 700px) {
  .bignum-coin { right: -46px; bottom: -34px; width: 170px; opacity: 0.34; }
  .cto-toy { width: 132px; }
}
.bignum-k, .bignum-v, .bignum-sub { position: relative; z-index: 2; }

.cto-toy {
  width: clamp(180px, 22vw, 260px);
  border: var(--edge-w) solid var(--ink);
  border-radius: 18px 6px 19px 7px;
  box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(-2deg);
  margin: 0 0 22px;
}
@media (max-width: 700px) {
  .bignum-coin { right: -60px; bottom: -60px; opacity: 0.5; }
  .cto-toy { width: 150px; }
}

/* gallery tiles download on click */
.belt figure a { display: block; position: relative; }
.belt .dl {
  position: absolute; right: 8px; bottom: 8px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--green); color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 7px 3px 8px 3px;
  padding: 5px 9px;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.16s, transform 0.16s;
  pointer-events: none;
}
.belt figure:hover .dl, .belt figure a:focus-visible .dl { opacity: 1; transform: translateY(0); }
@media (hover: none) { .belt .dl { opacity: 1; transform: none; } }

/* the flat pattern as a background texture, not as a picture */
.story { position: relative; overflow: hidden; }
.story::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/cat-pattern.jpg") center / cover no-repeat;
  opacity: 0.16;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.story .wrap { position: relative; z-index: 2; }

/* market values never wrap: the number is the whole point of the card */
.mk-v { white-space: nowrap; word-break: normal; }
.mk-src .mk-v { white-space: normal; }
.market-inner { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }

/* ==========================================================================
   Mobile pass
   The page is read on a phone far more than on a desktop, so the small
   screen gets its own decisions rather than a shrunk copy of the big one.
   ========================================================================== */

@media (max-width: 860px) {
  /* the nav keeps its links, it just scrolls sideways instead of vanishing */
  .nav { gap: 12px; padding: 9px 0 9px var(--pad); flex-wrap: nowrap; }
  .nav-brand { font-size: 18px; flex: none; }
  .nav-brand .cat-sm { width: 26px; height: 26px; }
  .nav-links {
    margin-left: 0;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 84%, transparent);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; font-size: 13px; }
  #nav-chart { flex: none; margin-right: var(--pad); }
}

@media (max-width: 620px) {
  :root { --edge-w: 2.5px; }

  /* stickers were tuned for a wide hero and hang off the screen on a phone */
  .hero-art { max-width: 240px; }
  .sticker { font-size: 12px; padding: 5px 10px 6px; box-shadow: 3px 3px 0 var(--ink); }
  .sticker-a { top: -10px; left: -4px; }
  .sticker-b { bottom: -12px; right: -2px; }

  .hero-actions { gap: 9px; }
  .hero-actions .btn { flex: 1 1 auto; min-width: 92px; }

  .ca { gap: 9px; padding: 10px 11px; }
  .ca-v { flex-basis: 100%; font-size: 11.5px; }

  /* two up rather than one long column of market cards */
  .market-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .mk { padding: 11px 12px 13px; }
  .mk-v { font-size: 16px; }
  .mk-src { grid-column: span 2; }

  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .facts { grid-template-columns: 1fr; gap: 9px; }
  .link-row { gap: 9px; }
  .link-row .btn { flex: 1 1 44%; }

  .bignum { padding: 20px 18px 22px; border-radius: 16px 6px 17px 7px; }
  .bignum-v { font-size: clamp(40px, 14vw, 62px); }

  /* the payouts table scrolls, so say so instead of letting it look cut off */
  .table-wrap { position: relative; }
  .table-wrap::after {
    content: "swipe 92";
    position: absolute; right: 8px; top: 8px;
    font-family: var(--mono); font-size: 9px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted);
    background: var(--card);
    padding: 3px 7px; border-radius: 5px;
    pointer-events: none;
  }

  .ticker-track span { font-size: 13px; padding-inline: 13px; }
  .belt figure { width: 168px; }
  .belt-track, .belt-rev .belt-track { animation-duration: 34s; }

  .foot-inner { flex-direction: column; gap: 12px; }
  .cat-foot { width: 42px; height: 42px; }

  .toast { left: 14px; right: 14px; bottom: 14px; transform: none; text-align: center; }
}

@media (max-width: 400px) {
  .market-inner { grid-template-columns: 1fr; }
  .mk-src { grid-column: span 1; }
  .stat-row { grid-template-columns: 1fr; }
  h1 { font-size: 38px; }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* a phone in landscape should not get a hero taller than the screen */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-grid { padding-bottom: 28px; }
  .hero-art { max-width: 180px; }
}

/* ==========================================================================
   Wallet checker and the two addresses behind the payouts
   ========================================================================== */

.checker {
  margin-top: 20px;
  background: var(--green);
  color: var(--ink);
  border: var(--edge-w) solid var(--ink);
  border-radius: 18px 6px 19px 7px;
  box-shadow: 8px 8px 0 #000;
  padding: clamp(18px, 3vw, 26px);
}
.checker-head .card-k { color: var(--ink); font-size: 17px; }
.checker-head p { margin: 0 0 16px; color: #0C4715; font-size: 14.5px; max-width: 62ch; font-weight: 500; }

.checker-form { display: flex; gap: 10px; flex-wrap: wrap; }
.checker-input {
  flex: 1 1 320px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 14px;
  padding: 13px 15px;
  color: var(--ink);
  background: var(--paper);
  border: var(--edge-w) solid var(--ink);
  border-radius: 11px 4px 12px 5px;
  box-shadow: 4px 4px 0 var(--ink);
}
.checker-input::placeholder { color: #7C8879; }
.checker-input:focus { outline: none; box-shadow: 4px 4px 0 var(--ink), 0 0 0 3px rgba(10,13,10,0.25); }
.checker-form .btn { flex: 0 0 auto; }

.checker-out {
  margin-top: 16px;
  padding: 15px 17px;
  background: var(--paper);
  color: var(--ink);
  border: var(--edge-w) solid var(--ink);
  border-radius: 12px 5px 13px 6px;
  font-size: 14.5px;
}
.checker-out.bad { background: #F6DCD8; }
.checker-out.none { background: var(--paper); }
.checker-out.good { background: var(--ink); color: var(--paper); }
.checker-out strong { font-weight: 900; }
.checker-amt {
  display: block;
  font-family: var(--display);
  font-size: clamp(28px, 6vw, 48px);
  line-height: 1;
  color: var(--green);
  letter-spacing: -0.02em;
}
.checker-amt em { font-style: normal; font-size: 0.4em; color: var(--paper); letter-spacing: 0.02em; }
.checker-sub { display: block; margin-top: 9px; font-size: 13.5px; color: #A9B6A7; }
.checker-out.good a { color: var(--green); border-bottom: 2px solid var(--green); }
.checker-out a { color: var(--green-deep); border-bottom: 2px solid currentColor; }

.how-paid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.hp {
  background: var(--card);
  border: var(--edge-w) solid var(--edge);
  border-radius: 12px 5px 13px 6px;
  padding: 15px 17px 17px;
}
.hp-k {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.hp code {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  word-break: break-all;
  color: var(--fg);
  margin-bottom: 9px;
}
.hp code a { color: var(--green); border-bottom: 2px solid var(--green); }
.hp-note { display: block; font-size: 13px; color: var(--muted); }

@media (max-width: 620px) {
  .checker-form .btn { flex: 1 1 100%; }
  .checker { border-radius: 14px 5px 15px 6px; }
}