/* ==========================================================================
   PC Pals: site layout + scene (design lead). Uses tokens.css only.
   Motion: transform + opacity only.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; overflow-x: clip;
  font: 400 var(--t-md)/var(--lh-body) var(--f-body);
  color: var(--c-ink); background: var(--blue);
  -webkit-font-smoothing: antialiased;
  /* Pixelify's fi ligature reads as an A. font-feature-settings inherits and survives the font: shorthand. */
  font-feature-settings: "liga" 0, "clig" 0; font-synthesis: none;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
.px, .scene img, .marq img, .wave__spr img { image-rendering: pixelated; image-rendering: crisp-edges; }
.px { image-rendering: pixelated; }
:focus-visible { outline: var(--px) solid var(--c-focus); outline-offset: var(--px); }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: var(--s4); top: -100px; z-index: 200; background: var(--c-cta); padding: var(--s2) var(--s4); font-family: var(--f-pixel); text-decoration: none; box-shadow: var(--ring); }
.skip:focus { top: var(--s4); }

/* scene cell: 1 art pixel of the pixel world */
:root { --cell: 3px; --cell-far: 3px; }
@media (min-width: 1440px) and (min-height: 900px) { :root { --cell: 4px; --cell-far: 3px; } }
@media (max-width: 900px) { :root { --cell: 3px; --cell-far: 2px; } }
@media (max-width: 560px) { :root { --cell: 2px; --cell-far: 2px; } }

/* ---------------------------------------------------------------- Header */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  height: var(--nav-h); color: var(--c-ink-inv);
}
.nav::before {                          /* solid bar fades in once scrolled */
  content: ""; position: absolute; inset: 0;
  background: var(--blue);
  box-shadow: 0 var(--px) 0 0 var(--k);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
}
.nav.is-solid::before { opacity: 1; }
.nav__in {
  position: relative; height: 100%;
  width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto;
  display: flex; align-items: center; gap: var(--s6);
}
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; margin-right: auto; }
.brand__pal { width: 36px; height: 50px; overflow: hidden; position: relative; flex: none; margin-top: -6px; }
.brand__pal img { position: absolute; left: 0; top: 0; width: 400%; max-width: none; height: 100%; }
.brand:hover .brand__pal img { animation: frames 480ms steps(4) infinite; }
.brand__word { font: 700 24px/1 var(--f-display); letter-spacing: .02em; text-shadow: 0 var(--px) 0 var(--k); }
.nav__links { display: flex; gap: var(--s5); }
.nav__links a, .nav__cta { font: 400 var(--t-pixel)/1 var(--f-pixel); text-decoration: none; }
.nav__links a { padding: var(--s2) 0; position: relative; text-shadow: 0 2px 0 rgba(10,10,12,.5); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--px);
  background: var(--c-cta); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out);
}
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); }
.nav__cta {
  background: var(--c-cta); color: var(--c-cta-ink); padding: var(--s3) var(--s4);
  box-shadow: var(--ring), 4px 6px 0 0 rgba(10,10,12,.35); transition: transform var(--dur-1) var(--ease-out);
}
.nav__cta:hover { transform: translateY(calc(var(--px) * -1)); }
.nav__cta:active { transform: translateY(var(--px)); }
@media (max-width: 760px) {
  .nav__links { display: none; }
  .brand__word { font-size: 20px; }
}

/* ---------------------------------------------------------------- Hero */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: max(100svh, 640px);
  padding: calc(var(--nav-h) + var(--s5)) 0 calc(var(--cell) * 60);
  background: var(--blue); color: var(--c-ink-inv);
}
.hero__in {
  position: relative; z-index: var(--z-content);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--s7); align-items: start;
}
.hero__copy { padding-top: var(--s4); max-width: 560px; }
.boot {
  display: inline-flex; gap: var(--s3); align-items: center; margin-bottom: var(--s5);
  font: 400 var(--t-pixel)/1 var(--f-pixel); color: var(--c-ink-inv);
  background: var(--screen); padding: var(--s2) var(--s3); box-shadow: var(--ring);
}
.boot__line { color: var(--glow-cyan); }
.boot__line::after { content: "_"; animation: caret 900ms steps(1) infinite; }
.boot__ok { color: var(--glow-green); animation: boot-ok 1ms 700ms both; }
@keyframes caret { 50% { opacity: 0; } }
@keyframes boot-ok { from { opacity: 0; } to { opacity: 1; } }
.hero__title {
  font: 700 var(--t-3xl)/var(--lh-tight) var(--f-display);
  letter-spacing: -.01em; max-width: 12ch;
  text-shadow: 0 6px 0 var(--k);
}
.hero__lede { margin-top: var(--s5); font-size: var(--t-lg); line-height: 1.5; max-width: 36ch; color: rgba(255,255,255,.92); }
.hero__chips { list-style: none; padding: 0; margin: var(--s5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s4); }
.hero__chips li {
  font: 400 var(--t-pixel)/1 var(--f-pixel); background: var(--c-panel); color: var(--c-ink);
  padding: var(--s2) var(--s3); box-shadow: var(--ring), 4px 6px 0 0 rgba(10,10,12,.3);
}
.hero__chips b { font-weight: 400; color: var(--blue); }

/* boot-up: content slides in, never blocked */
.hero__copy > *, .hero__mint { animation: rise 640ms var(--ease-out) both; }
.hero__copy > :nth-child(2) { animation-delay: 80ms; }
.hero__copy > :nth-child(3) { animation-delay: 160ms; }
.hero__copy > :nth-child(4) { animation-delay: 240ms; }
.hero__mint { animation-delay: 200ms; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Windows: OS chrome around component roots */
.win { position: relative; background: var(--c-panel); color: var(--c-ink); box-shadow: var(--ring-2), 12px 16px 0 0 rgba(10,10,12,.3); }
.win__bar {
  display: flex; align-items: center; gap: var(--s3); height: 40px; padding: 0 var(--s3);
  background: var(--c-titlebar); color: var(--c-ink-inv); box-shadow: 0 var(--px) 0 0 var(--k);
  position: relative; z-index: 1;
}
.win__dots { display: flex; gap: 6px; }
.win__dots i { width: 12px; height: 12px; background: var(--pink); box-shadow: var(--ring); }
.win__dots i:nth-child(2) { background: var(--yellow); }
.win__dots i:nth-child(3) { background: var(--glow-green); }
.win__title { font: 400 var(--t-pixel)/1 var(--f-pixel); letter-spacing: .04em; }
.win__body { padding: var(--s5); }
.hero__mint { position: relative; margin-top: var(--s2); }
#mint-root:empty { min-height: 360px; }

/* ---------------------------------------------------------------- Scene (parallax pixel world) */
.scene { position: absolute; inset: 0; z-index: var(--z-scene); pointer-events: none; overflow: hidden; }
.scene__layer { position: absolute; left: 0; right: 0; will-change: transform; }
.scene__sky {
  inset: 0;
  background:
    linear-gradient(to bottom,
      var(--blue) 0 58%, #1484FD 58% 64%, #218DFD 64% 70%, #2C96FE 70% 76%, #36A0FE 76% 100%);
}
.scene__clouds { top: calc(var(--nav-h) + 8px); height: calc(44 * var(--cell)); }
.clouds__track {
  position: absolute; inset: 0 auto 0 0; width: calc(320 * var(--cell) * 4);
  background: url("/art/scene-clouds.png") repeat-x 0 0 / calc(320 * var(--cell)) calc(44 * var(--cell));
  image-rendering: pixelated; opacity: .95;
  animation: drift calc(90s * var(--loop)) linear infinite;
}
@keyframes drift { to { transform: translateX(calc(-320 * var(--cell))); } }
.scene__far {
  bottom: calc(24 * var(--cell)); height: calc(110 * var(--cell-far));
  background: url("/art/scene-far.png") repeat-x 0 100% / calc(192 * var(--cell-far)) calc(110 * var(--cell-far));
  image-rendering: pixelated;
}
.scene__mid {
  bottom: calc(26 * var(--cell)); height: calc(84 * var(--cell-far));
  background: url("/art/scene-mid.png") repeat-x 40px 100% / calc(256 * var(--cell-far)) calc(84 * var(--cell-far));
  image-rendering: pixelated;
}
.scene__street {
  bottom: 0; height: calc(28 * var(--cell));
  background: url("/art/scene-street.png") repeat-x 0 0 / calc(64 * var(--cell)) calc(28 * var(--cell));
  image-rendering: pixelated;
}
.scene__front { display: none; }
.street__walkers { position: absolute; inset: auto 0 0 0; height: 0; }

/* walkers: 4-frame strips from the art's own layers */
.walker {
  --fw: calc(var(--frame-w) * var(--cell));
  position: absolute; left: 0; bottom: calc(var(--lane, 12) * var(--cell));
  width: var(--fw); height: calc(var(--frame-h) * var(--cell));
  animation: stroll calc(var(--t, 40s) * var(--loop)) linear infinite;
  animation-delay: calc(var(--d, 0s) * var(--loop));
  will-change: transform;
}
@keyframes stroll {
  from { transform: translate3d(calc(-1 * var(--fw)), 0, 0); }
  to   { transform: translate3d(calc(100vw + 8px), 0, 0); }
}
.walker__spr { position: absolute; inset: 0; overflow: hidden; }
.walker__spr img {
  position: absolute; left: 0; top: 0; width: 400%; max-width: none; height: 100%;
  animation: frames calc(var(--step, 560ms) * var(--loop)) steps(4) infinite;
}
.walker__spr .g { animation: frames calc(var(--step, 560ms) * var(--loop)) steps(4) infinite, pulse calc(1.6s * var(--loop)) ease-in-out infinite alternate; }
.walker__spr .s { opacity: 0; animation: frames calc(var(--step, 560ms) * var(--loop)) steps(4) infinite, flicker var(--fl, 5.2s) steps(1) infinite; }
@keyframes frames { to { transform: translateX(-100%); } }
@keyframes pulse { from { opacity: .25; } to { opacity: 1; } }
@keyframes flicker {
  0%, 70% { opacity: 0; } 71% { opacity: 1; } 72% { opacity: .15; } 74% { opacity: .9; } 77%, 100% { opacity: 0; }
}

/* CRT power-on (boot). Decorative, above the scene, below content. */
.scene__crt { position: absolute; inset: 0; pointer-events: none; }
.scene__crt::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; background: #fff;
  transform-origin: center; animation: crt-on 700ms var(--ease-out) both;
}
@keyframes crt-on {
  0% { transform: scaleX(0); opacity: 1; }
  40% { transform: scaleX(1) scaleY(1); opacity: 1; }
  100% { transform: scaleX(1) scaleY(260); opacity: 0; }
}

@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; gap: var(--s6); }
  .hero__copy { padding-top: var(--s4); max-width: none; }
  .hero__mint { max-width: 480px; }
}
@media (max-width: 560px) {
  .hero { padding-bottom: calc(var(--cell) * 104); }
  .hero__lede { font-size: var(--t-md); }
  .hero__chips { gap: var(--s3); }
  .hero__chips li { font-size: var(--t-pixel-s); padding: var(--s2); }
  .hero__chips li { font-size: 16px; }
  .win__body { padding: var(--s4); }
}

/* ---------------------------------------------------------------- Sections */
.sec {
  position: relative; scroll-margin-top: var(--nav-h);
  padding: clamp(72px, 9vw, 120px) 0;
  box-shadow: inset 0 var(--px) 0 0 var(--k);
}
.sec__head { max-width: 640px; margin-bottom: var(--s7); }
.kicker {
  display: inline-block; margin-bottom: var(--s4);
  font: 400 var(--t-pixel)/1 var(--f-pixel); letter-spacing: .04em;
  background: var(--k); color: var(--c-ink-inv); padding: var(--s2) var(--s3);
}
.sec h2 { font: 700 var(--t-2xl)/1.05 var(--f-display); letter-spacing: -.01em; }
/* Pixelify's bold 5 reads as S: numbers in headings use Silkscreen in a chip */
.numchip { display: inline-block; font: 400 .8em/1 var(--f-pixel); background: var(--yellow); color: var(--k); padding: 6px 8px 4px; box-shadow: var(--ring); vertical-align: .08em; margin-right: .1em; }
.sec__lede { margin-top: var(--s4); font-size: var(--t-lg); line-height: 1.5; max-width: 52ch; }
@media (max-width: 560px) {
  .sec h2 { font-size: 32px; }
  .sec__lede { font-size: var(--t-md); }
}
.reveal-up { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.reveal-up.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- Waves (yellow) */
.sec--waves { background: var(--yellow); }
.sec--waves .sec__head { margin-left: 0; }
.dl { background: var(--c-panel); box-shadow: var(--ring-2), 12px 16px 0 0 rgba(10,10,12,.22); }
.dl__body { padding: var(--s5) var(--s5) var(--s6); }
.dl__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.dl__count { font: 400 32px/1 var(--f-pixel); }
.dl__count small { font: 400 var(--t-pixel)/1 var(--f-pixel); color: var(--c-ink-soft); margin-left: var(--s2); }
.dl__status { font: 400 var(--t-pixel)/1.3 var(--f-pixel); display: flex; align-items: center; gap: var(--s2); }
.dl__status i { width: 12px; height: 12px; background: var(--st, var(--c-soon)); box-shadow: var(--ring); flex: none; }
.dl__status.is-live i, .dl__status.is-cool i { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.segs { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s2); padding: var(--s2); background: var(--screen); box-shadow: var(--ring); }
.seg { position: relative; height: 32px; background: var(--screen-2); overflow: hidden; }
.seg__fill { position: absolute; inset: 0; background: var(--st, var(--glow-cyan)); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--dur-3) var(--ease-out); }
.seg__fill::after { /* pixel "chunks" like a DOS progress bar */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(10,10,12,.35) 12px 16px);
}
.seg.is-live .seg__fill { --st: var(--glow-green); }
.seg.is-done .seg__fill { --st: var(--pink); }
.seg.is-live::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 24%;
  background: rgba(255,255,255,.35); animation: sheen 1.4s linear infinite;
}
@keyframes sheen { from { transform: translateX(-100%); } to { transform: translateX(420%); } }
.seg-labels { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s2); padding: var(--s2) var(--s2) 0; font: 400 var(--t-pixel-s)/1 var(--f-pixel); }
.seg-labels span { font-size: 16px; }

.waves {
  list-style: none; padding: 0; margin: var(--s7) 0 0;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s4);
}
.wave {
  position: relative; display: flex; flex-direction: column;
  background: var(--c-panel); box-shadow: var(--ring), 6px 8px 0 0 rgba(10,10,12,.22);
  padding: var(--s3); min-width: 0;
}
.wave.is-now { grid-column: span 2; background: var(--purple); color: var(--c-ink-inv); }
.wave.is-now .chip--wait { background: var(--paper); color: var(--k); }
.wave__spr { position: relative; height: calc(62 * 2px); margin: 0 auto var(--s3); width: calc(39 * 2px); overflow: hidden; }
.wave__spr img { position: absolute; left: 0; bottom: 0; height: 100%; width: 400%; max-width: none; }
.wave__spr .m { width: calc(34 * 2px); height: calc(39 * 2px); left: 2px; }
.wave.is-now .wave__spr img:not(.m) { animation: frames 560ms steps(4) infinite; }
.wave.is-now .wave__spr { width: calc(39 * 3px); height: calc(62 * 3px); }
.wave.is-now .wave__spr .m { width: calc(34 * 3px); height: calc(39 * 3px); left: 3px; }
.wave.is-cool .wave__spr .m { animation: reboot 1.2s steps(2) infinite; }
@keyframes reboot { 50% { opacity: .35; } }
.wave__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.wave__n { font: 400 var(--t-pixel)/1 var(--f-pixel); }
.chip { font: 400 var(--t-pixel-s)/1 var(--f-pixel); font-size: 8px; padding: 4px 6px; background: var(--k); color: var(--c-ink-inv); white-space: nowrap; }
.chip--live { background: var(--glow-green); color: var(--k); }
.chip--head { background: var(--glow-cyan); color: var(--k); }
.chip--cool { background: var(--glow-orange); color: var(--k); }
.chip--done { background: var(--pink); color: var(--k); }
.chip--wait { background: var(--c-panel-2); color: var(--c-ink-soft); }
.wave__price { margin-top: var(--s3); font: 400 24px/1 var(--f-pixel); letter-spacing: -.02em; }
.wave.is-now .wave__price { font-size: 32px; color: var(--glow-yellow); }
.wave__eth { font: 500 var(--t-xs)/1.3 var(--f-body); color: var(--c-ink-soft); }
.wave.is-now .wave__eth { color: var(--c-ink-inv-soft); }
.wave__bar { margin-top: var(--s3); height: 8px; background: var(--c-panel-2); position: relative; overflow: hidden; }
.wave.is-now .wave__bar { background: var(--purple-deep); height: 12px; box-shadow: var(--ring); }
.wave__bar i { position: absolute; inset: 0; background: var(--st, var(--pink)); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--dur-3) var(--ease-out); }
.wave.is-now .wave__bar i { --st: var(--glow-green); }
.wave__foot { margin-top: auto; padding-top: var(--s3); font: 500 var(--t-xs)/1.35 var(--f-body); color: var(--c-ink-soft); }
.wave.is-now .wave__foot { color: var(--c-ink-inv); font: 400 var(--t-pixel)/1.3 var(--f-pixel); }
.wave.is-now .wave__foot b { color: var(--glow-green); font-weight: 400; }
.wave.is-cool .wave__foot b { color: var(--glow-orange); }
@media (max-width: 1000px) {
  .waves { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .waves { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .wave.is-now { grid-column: 1 / -1; }
  .dl__body { padding: var(--s4); }
  .seg { height: 24px; }
  .seg-labels span { font-size: 8px; }
}

/* ---------------------------------------------------------------- Pot (purple) */
.sec--pot { background: var(--purple); color: var(--c-ink-inv); }
.sec--pot .kicker { background: var(--yellow); color: var(--k); }
.sec--pot .sec__lede { color: var(--c-ink-inv-soft); }
.pot-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: start; }
@media (max-width: 900px) { .pot-grid { grid-template-columns: 1fr; } }

#pot-root:empty { min-height: 320px; }

/* ---------------------------------------------------------------- Pals (pink) */
.sec--pals { background: var(--pink); overflow: clip; }
.marquee { display: grid; gap: var(--s5); }
.marq { overflow: hidden; }
.marq__track { display: flex; gap: var(--s5); width: max-content; padding: var(--s3) var(--s5) var(--s5); animation: marq calc(var(--t, 70s) * var(--loop)) linear infinite; }
.marq--rev .marq__track { animation-direction: reverse; }
.marq:hover .marq__track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.pal { flex: none; width: 192px; background: var(--c-panel); box-shadow: var(--ring), 6px 8px 0 0 rgba(10,10,12,.25); transition: transform var(--dur-2) var(--ease-snap); }
.pal:hover { transform: translateY(-8px); }
.pal img { width: 192px; height: 192px; }
.pal figcaption { padding: var(--s2) var(--s3); font: 400 8px/1.4 var(--f-pixel); font-size: 8px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 calc(var(--px) * -1) 0 0 var(--k); }
.pal figcaption { font-size: 16px; font-size: 8px; }
@media (max-width: 560px) {
  .pal { width: 128px; }
  .pal img { width: 128px; height: 128px; }
  .marq__track { gap: var(--s4); }
}

/* ---------------------------------------------------------------- FAQ (mint) */
.sec--faq { background: var(--mint); }
.faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s7); align-items: start; }
.faq-wrap .sec__head { position: sticky; top: calc(var(--nav-h) + var(--s5)); }
.faq { display: grid; gap: var(--s4); }
.qa { background: var(--c-panel); box-shadow: var(--ring), 6px 8px 0 0 rgba(10,10,12,.2); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5); font: 700 var(--t-lg)/1.3 var(--f-body);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  font: 400 16px/1 var(--f-pixel); background: var(--yellow); box-shadow: var(--ring);
  transition: transform var(--dur-2) var(--ease-snap);
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 var(--s5) var(--s5); color: var(--c-ink-soft); max-width: 60ch; }
@media (max-width: 900px) {
  .faq-wrap { grid-template-columns: 1fr; gap: 0; }
  .faq-wrap .sec__head { position: static; }
}
@media (max-width: 560px) { .qa summary { font-size: var(--t-md); padding: var(--s4); } .qa p { padding: 0 var(--s4) var(--s4); } }

/* ---------------------------------------------------------------- Footer (blue, the street again) */
.foot { position: relative; background: var(--blue); color: var(--c-ink-inv); padding: var(--s8) 0 calc(28 * var(--cell) + var(--s6)); overflow: hidden; box-shadow: inset 0 var(--px) 0 0 var(--k); }
.foot__in { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s5); }
.foot__word { font: 700 var(--t-2xl)/1 var(--f-display); text-shadow: 0 6px 0 var(--k); }
.foot__word + p { margin-top: var(--s3); color: var(--c-ink-inv-soft); max-width: 40ch; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--s3); }
.foot__links a {
  font: 400 var(--t-pixel)/1 var(--f-pixel); text-decoration: none; background: var(--c-panel); color: var(--c-ink);
  padding: var(--s3) var(--s4); box-shadow: var(--ring), 4px 6px 0 0 rgba(10,10,12,.3); transition: transform var(--dur-1) var(--ease-out);
}
.foot__links a:hover { transform: translateY(calc(var(--px) * -1)); }
.foot__street { position: absolute; left: 0; right: 0; bottom: 0; height: calc(28 * var(--cell)); background: url("/art/scene-street.png") repeat-x 0 0 / calc(64 * var(--cell)) calc(28 * var(--cell)); image-rendering: pixelated; }
.foot__street .walker { --lane: 10; }

/* ==========================================================================
   Integration layer: light-touch harmonisation of the builders' components
   (their own files stay untouched; these rules only adjust layout to the page)
   ========================================================================== */
.hero__mint .pm { box-shadow: var(--ring-2), 12px 16px 0 0 rgba(10,10,12,.3); }
.pp-stat--hero { grid-template-columns: minmax(0, 1fr); }
.pp-stat--hero .pp-stat__usd { text-align: left; }
.pp-stat--hero dd b { font-size: 24px; white-space: nowrap; }