/* ============================================================
   Armzz & Buzz — "Memphis Pop" (M2a)
   Buzz-purple lead; bands alternate purple, dotted white, lime,
   yellow, split by zigzag edges. The hero scatter is a Memphis
   pattern: squiggles, zigzags, triangles, half-circles, dashes,
   dot grids and rings, all with thick ink outlines. Chunky cards,
   hard offset shadows that squash on press, tilted counter tiles.
   Dark: same pop on deep navy.
   ============================================================ */

:root {
  /* palette */
  --purple: #7b3fe4;
  --lime: #9be22d;
  --coral: #ff5e5b;
  --sun: #ffd23f;
  --cyan: #22c3f3;
  --ink: #17172b;
  --paper: #ffffff;
  --card: #ffffff;
  --text: #17172b;
  --text-soft: #43435e;

  /* dark lidar panel (dark in both themes — it glows) */
  --night: #17172b;
  --night-2: #0d0d24;

  --dot: rgba(123, 63, 228, 0.16);

  /* pop card edges / shadows (light: ink) */
  --card-edge: var(--ink);
  --pop-shadow: 6px 6px 0 var(--ink);

  /* lidar canvas colours */
  --radar-grid: rgba(123, 63, 228, 0.4);
  --radar-blind: rgba(123, 63, 228, 0.35);
  --radar-beam-rgb: 255, 94, 91;
  --radar-point: #22c3f3;
  --radar-cart: #ffffff;
  --radar-head: #ffd23f;
  --radar-label: #9be22d;

  --font-display: "Lilita One", "Arial Black", sans-serif;
  --font-body: "Nunito", "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121232;
    --card: #1c1c52;
    --text: #f0efff;
    --text-soft: #b9b7e0;
    --ink: #17172b; /* ink stays for text ON bright bands */

    --dot: rgba(155, 226, 45, 0.22);
    --night: #0d0d2e;
    --night-2: #080820;
  }
  /* glowing pop edges on dark cards */
  .nav { border-bottom-color: #060624; }
  .btn { box-shadow: 6px 6px 0 #060624; }
  .btn:active { box-shadow: 2px 2px 0 #060624; }
  .btn-nav { box-shadow: 4px 4px 0 #060624; }
  .btn-nav:active { box-shadow: 1px 1px 0 #060624; }
  .day-chip { border-color: var(--sun); box-shadow: 4px 4px 0 #060624, 0 0 16px rgba(255, 210, 63, 0.28); }
  .hi-count { border-color: #060624; box-shadow: 4px 4px 0 #060624; }
  .sticker, .tile-n, .step-n, .nowpin, .nowtag, .stamp, .counter, .mini-burst {
    box-shadow: 4px 4px 0 #060624;
  }
  .hero-sun { border-color: #060624; }
  .plinth { border-color: #060624; box-shadow: 0 10px 0 #060624; }
  .pop-card { border-color: var(--card-edge); }
  .h1a { color: #b79bff; }
  .card-purple h3 { color: #b79bff; }
  .card-cyan h3 { color: #53d1f5; }
  .hb-line b { color: #b79bff; }
  .tile .doodle, .next-card .doodle { color: #a985ef; }
  .card-purple { --card-edge: #a985ef; box-shadow: 6px 6px 0 #0a0a26, 0 0 22px rgba(123, 63, 228, 0.55); }
  .card-cyan   { --card-edge: #22c3f3; box-shadow: 6px 6px 0 #0a0a26, 0 0 22px rgba(34, 195, 243, 0.5); }
  .tile, .step, .next-card, .badge, .review, .mile {
    box-shadow: 6px 6px 0 #0a0a26, 0 0 18px rgba(34, 195, 243, 0.22);
  }
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
section[id], main[id] { scroll-margin-top: 84px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.04; margin: 0; }
p { margin: 0 0 0.6em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--sun); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; font-weight: 800;
  padding: 10px 16px; border-radius: 12px; transition: top 0.2s;
}
.skip:focus { top: 12px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 860px; text-align: center; }

/* ============ BUTTONS: chunky, wobble on hover, squash on press ============ */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.08rem;
  letter-spacing: 0.5px;
  color: var(--ink);
  background: var(--sun);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 13px 26px 12px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--pop-shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { animation: wobble 0.5s ease; }
.btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }
@keyframes wobble {
  0% { transform: rotate(0); } 25% { transform: rotate(-2.4deg) scale(1.04); }
  55% { transform: rotate(2deg) scale(1.04); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0); }
}
.btn-lime { background: var(--lime); }
.btn-coral { background: var(--coral); color: #fff; }
.btn-purple { background: var(--purple); color: #fff; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-nav { font-size: 0.95rem; padding: 9px 18px 8px; box-shadow: 4px 4px 0 var(--ink); }
.btn-nav:active { box-shadow: 1px 1px 0 var(--ink); }

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 22px;
  padding: 10px 22px;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 1.25rem;
  text-decoration: none; color: var(--text);
}
.brand .amp { color: var(--coral); font-style: normal; }
.nav-links { display: flex; gap: 20px; margin-left: auto; }
.nav-links a {
  font-weight: 900; font-size: 0.95rem; text-decoration: none; color: var(--text);
  padding: 4px 2px;
}
.nav-links a:hover { text-decoration: underline wavy var(--coral) 2px; text-underline-offset: 5px; }
@media (max-width: 940px) {
  .nav-links { display: none; }
  .nav .btn-nav { margin-left: auto; }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: 48px 0 48px;
  overflow: clip;
}

/* ---- Memphis scatter: shapes sit still, a few bob, all drift ≤ 6 px with the pointer ---- */
.memfield {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.band > .wrap, .section > .wrap { position: relative; z-index: 1; }
.mem { position: absolute; display: block; will-change: transform; }
.m-squig { aspect-ratio: 64 / 36; }
.m-zig   { aspect-ratio: 64 / 36; }
.m-tri   { aspect-ratio: 64 / 56; }
.m-half  { aspect-ratio: 64 / 34; }
.m-dash  { aspect-ratio: 64 / 26; }
.m-dots, .m-ring { aspect-ratio: 1; }
.mem-bob { animation: membob 7s ease-in-out infinite alternate; }
@keyframes membob {
  from { translate: 0 -4px; }
  to   { translate: 0 4px; }
}

/* hero shapes hug the edges: nothing crosses the headline or the robots */
.mem-1  { top: 7%;    left: 2.5%;  width: 84px; color: var(--purple); rotate: 6deg;  animation-delay: -2s; }
.mem-2  { top: 6%;    right: 7%;   width: 52px; color: var(--coral);  rotate: 10deg; }
.mem-3  { top: 40%;   left: 1.2%;  width: 54px; color: var(--cyan); }
.mem-4  { top: 26%;   right: 1.5%; width: 60px; color: var(--lime); }
.mem-5  { bottom: 5%; left: 9%;    width: 64px; color: var(--sun);    rotate: -12deg; animation-delay: -5s; }
.mem-6  { bottom: 7%; right: 3%;   width: 86px; color: var(--purple); rotate: 4deg;  animation-delay: -4s; }
.mem-7  { top: 3%;    left: 34%;   width: 56px; color: var(--coral);  rotate: 22deg; }
.mem-8  { top: 2%;    right: 24%;  width: 44px; color: var(--sun); }
.mem-9  { bottom: 1.5%; left: 42%; width: 66px; color: var(--cyan);   rotate: 8deg;  animation-delay: -1s; }
.mem-10 { top: 58%;   left: 2%;    width: 42px; color: var(--lime);   rotate: -10deg; }
.mem-11 { top: 48%;   right: 2%;   width: 50px; color: var(--purple); rotate: -24deg; }
/* later sections: a light scatter in the corners */
.cm-1 { top: 26px;   right: 3%;   width: 54px; color: var(--sun);    rotate: 8deg; }
.cm-2 { bottom: 30px; left: 2.5%; width: 50px; color: var(--purple); animation-delay: -3s; }
.cm-3 { bottom: 36px; right: 4%;  width: 54px; color: var(--coral);  rotate: -18deg; }
.hm-1 { top: 26px;   left: 2.5%;  width: 78px; color: var(--lime);   rotate: -4deg; }
.hm-2 { top: 40px;   right: 3%;   width: 72px; color: var(--purple); rotate: 6deg;  animation-delay: -2.5s; }
.hm-3 { bottom: 34px; left: 4%;   width: 58px; color: var(--cyan);   rotate: 10deg; }
.sm-1 { top: 28px;   right: 4%;   width: 52px; color: var(--coral); }
.sm-2 { bottom: 30px; left: 3%;   width: 48px; color: var(--sun);    animation-delay: -4.5s; }
.nm-1 { top: 24px;   left: 3%;    width: 76px; color: var(--lime);   rotate: -6deg; animation-delay: -2s; }
.nm-2 { top: 30px;   right: 4%;   width: 46px; color: var(--sun); }
.nm-3 { bottom: 30px; right: 5%;  width: 48px; color: var(--cyan);   rotate: 12deg; }

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 28px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.hero-grid > * { min-width: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--purple);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 7px 16px 6px;
  box-shadow: 4px 4px 0 var(--ink);
  rotate: -2deg;
  margin: 0 0 18px;
}
.hero h1 {
  font-size: clamp(46px, 6.6vw, 92px);
  letter-spacing: 0.5px;
  margin: 0 0 14px;
}
.h1a { color: var(--purple); text-shadow: 5px 5px 0 var(--sun); }
.h1b { color: var(--coral); text-shadow: 5px 5px 0 var(--cyan); }
.hero-sub {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 700;
  max-width: 26em;
  color: var(--text);
}
.hero-btns { display: flex; flex-wrap: wrap; gap: 16px; }

/* the hi counter: a small chip under the hero buttons, shown only once
   /api/hi has answered (hidden from then on if the counter goes away) */
.hi-count {
  display: inline-block;
  margin: 18px 0 0;
  padding: 6px 16px 5px;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text-soft);
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
}
.hi-count[hidden] { display: none; }

.mood-dot {
  width: 14px; height: 14px; flex: none;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: #cfcfe6;
  display: inline-block;
}

/* hero scene: sun circle + plinth + robots + stickers + bubbles */
.scene-wrap { position: relative; min-width: 0; padding-top: 6px; }
.stage { position: relative; }
.scene { position: relative; z-index: 1; width: 100%; height: auto; display: block; overflow: visible; }
.hero-sun {
  position: absolute; z-index: 0;
  top: -9%; right: -2%;
  width: 76%; aspect-ratio: 1;
  background: var(--sun);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.plinth {
  position: absolute; z-index: 0;
  left: 4%; right: 4%; bottom: 1.6%; height: 6.4%;
  background: var(--lime);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 10px 0 var(--ink);
}
.scene-hint {
  text-align: center; font-family: var(--font-display);
  font-size: 1.05rem; color: var(--text-soft); margin: 8px 0 0;
}

.sticker {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 0.98rem;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 7px 14px 6px;
  box-shadow: 4px 4px 0 var(--ink);
}
.sticker-duo { top: -8px; right: 3%; background: var(--purple); color: #fff; rotate: 7deg; font-size: 1.05rem; letter-spacing: 0.5px; }
.sticker-mood { top: -14px; left: 1%; rotate: -6deg; }
.sticker-day { position: static; background: var(--sun); rotate: 4deg; }
.sticker-nocloud { position: static; background: var(--cyan); rotate: -5deg; }

.bubble {
  position: absolute; z-index: 5;
  max-width: 74%;
  background: var(--card);
  color: var(--text);
  border: 3px solid var(--purple);
  border-radius: 16px;
  padding: 10px 14px;
  font-weight: 800; font-size: 0.98rem;
  opacity: 0; transform: translateY(8px) scale(0.94);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.bubble::before, .bubble::after {
  content: ""; position: absolute; bottom: -13.5px; left: 26px;
  border: 7px solid transparent; border-top: 9px solid var(--purple);
}
.bubble::after { bottom: -8px; left: 28.5px; border-top-color: var(--card); border-width: 4.5px 4.5px 0; }
.bubble.show { opacity: 1; transform: none; }
.bubble-buzz { left: 3%; bottom: 92%; }
.bubble-armzz { right: 3%; bottom: 88%; background: var(--ink); color: #fff; border-color: var(--cyan); }
.bubble-armzz::before { border-top-color: var(--cyan); }
.bubble-armzz::after { border-top-color: var(--ink); }
.bubble-mini {
  bottom: 100%; left: 70%;
  border-color: var(--coral);
  white-space: nowrap; max-width: none;
}
.bubble-mini::before { border-top-color: var(--coral); left: 18px; }
.bubble-mini::after { left: 20.5px; }

/* star burst on Buzz click */
.star-burst { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.star-burst .zap {
  position: absolute;
  width: 22px; height: 22px;
  background: var(--sun);
  clip-path: polygon(50% 0,63% 35%,98% 35%,70% 57%,80% 92%,50% 71%,20% 92%,30% 57%,2% 35%,37% 35%);
  animation: zap 0.75s ease-out forwards;
}
@keyframes zap {
  0% { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.25) rotate(160deg); opacity: 0; }
}

/* phone: bubbles live above the art */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-copy { text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-btns { justify-content: center; }
  .scene-wrap { padding-top: 78px; }
  .bubble { top: -4px; bottom: auto; max-width: 62%; font-size: 0.92rem; }
  .bubble-buzz { left: 0; }
  .bubble-armzz { right: 0; }
  .bubble::before { bottom: auto; top: -13.5px; border-top: 0; border-bottom: 9px solid var(--purple); }
  .bubble::after { bottom: auto; top: -8px; border-bottom-color: var(--card); border-top: 0; border-width: 0 4.5px 4.5px; }
  .bubble-armzz::before { border-bottom-color: var(--cyan); }
  .bubble-armzz::after { border-bottom-color: var(--ink); }
  .sticker-duo { top: 6px; right: 2%; }
  .sticker-mood { top: 44px; left: 2%; font-size: 0.85rem; }
  /* hero shapes: smaller, corners only */
  .mem-3, .mem-4, .mem-10, .mem-11 { display: none; }
  .hm-1, .hm-2 { display: none; } /* they'd clash with the two-line heading */
  .memfield .mem { scale: 0.72; }
  .mem-hero .mem { scale: 0.62; }
}

/* hero at least 90vh on wide desktops */
@media (min-width: 961px) {
  .hero { min-height: min(calc(100vh - 70px), 980px); display: flex; align-items: center; }
  .hero-grid { width: 100%; }
}

/* ============ TOY CARDS ============ */
.pop-card {
  position: relative;
  background: var(--card);
  color: var(--text);
  border: 3px solid var(--card-edge, var(--ink));
  border-radius: 22px;
  box-shadow: var(--pop-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover) {
  .pop-card:hover { transform: translate(-2px, -5px) rotate(-0.6deg); box-shadow: 10px 11px 0 var(--ink); }
  .card-purple:hover { box-shadow: 10px 11px 0 #0a0a26, 0 0 26px rgba(123, 63, 228, 0.6); }
  .card-cyan:hover { box-shadow: 10px 11px 0 #0a0a26, 0 0 26px rgba(34, 195, 243, 0.55); }
}

/* ============ COUNTERS: chunky rounded tiles, tilted ============ */
.counter {
  display: grid; place-items: center;
  width: clamp(116px, 12.5vw, 156px); aspect-ratio: 1;
  font-family: var(--font-display); line-height: 1;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  border: 3px solid var(--ink); border-radius: 26px;
  box-shadow: 7px 7px 0 var(--ink);
}
.c-sun { background: var(--sun); color: var(--ink); }
.c-lime { background: var(--lime); color: var(--ink); }
.c-cyan { background: var(--cyan); color: var(--ink); }
.c-coral { background: var(--coral); color: #fff; }
.c-purple { background: var(--purple); color: #fff; }
.stat:nth-child(odd) .counter { rotate: -3deg; }
.stat:nth-child(even) .counter { rotate: 2.5deg; }
@media (hover: hover) {
  .stat .counter { transition: rotate 0.18s ease, translate 0.18s ease; }
  .stat:hover .counter { rotate: 0deg; translate: 0 -4px; }
}

/* ============ ZIGZAG DIVIDERS + COLOUR BANDS ============ */
.band { position: relative; padding: 58px 0 66px; }
.wave { position: absolute; left: 0; width: 100%; height: 30px; display: block; z-index: 1; }
.wave-down { top: -29px; }
.wave-up { bottom: -29px; }
.band-sun { background: var(--sun); color: var(--ink); }
.band-lime { background: var(--lime); color: var(--ink); }
.band-cyan { background: var(--cyan); color: var(--ink); }
.band-purple { background: var(--purple); color: #fff; }
.band-coral { background: var(--coral); color: #fff; }
.band-ink { background: var(--night); color: #f0efff; }
.band .wave-down, .band .wave-up { fill: currentColor; }
.band-sun .wave-down, .band-sun .wave-up { fill: var(--sun); }
.band-lime .wave-down, .band-lime .wave-up { fill: var(--lime); }
.band-cyan .wave-down, .band-cyan .wave-up { fill: var(--cyan); }
.band-purple .wave-down, .band-purple .wave-up { fill: var(--purple); }
.band-ink .wave-down, .band-ink .wave-up { fill: var(--night); }

.sec-title {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  text-align: center;
  margin-bottom: 34px;
}
.sec-head { position: relative; text-align: center; margin-bottom: 30px; }
.sec-head h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.hl { display: inline; padding: 0 0.18em; background-image: linear-gradient(transparent 62%, var(--hl, var(--sun)) 62%, var(--hl, var(--sun)) 94%, transparent 94%); }
.hl-sun { --hl: var(--sun); }
.hl-lime { --hl: var(--lime); }
.hl-cyan { --hl: var(--cyan); }

/* sections on white — the dotted ones carry the Memphis dot-grid */
.section { position: relative; padding: 74px 0; }
.section-plain { background: var(--paper); }
.dots {
  background-image: radial-gradient(var(--dot) 3px, transparent 3.5px);
  background-size: 30px 30px;
}

/* ============ STAT STRIP (on purple) ============ */
.stats { padding: 74px 0 84px; }
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 18px;
  max-width: 1080px;
  margin: 0 auto;
}
.stat { display: grid; justify-items: center; gap: 14px; text-align: center; }
.stat-label { font-size: 0.98rem; font-weight: 700; max-width: 21ch; }
@media (max-width: 900px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counter { width: 128px; font-size: 2rem; }
}
@media (max-width: 430px) {
  .counter { width: 106px; font-size: 1.55rem; border-radius: 20px; box-shadow: 5px 5px 0 var(--ink); }
}

/* ============ CLICK-LINE MARQUEE STRIPES ============ */
.stripe {
  position: relative; z-index: 2;
  width: 104%; margin-left: -2%;
  padding: 13px 0;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  margin-top: 58px;
  margin-bottom: 50px;
}
.stripe-purple { background: var(--purple); color: #fff; rotate: -1.3deg; }
.stripe-coral { background: var(--coral); color: #fff; rotate: 1.2deg; }
.stripe-cyan { background: var(--cyan); color: var(--ink); rotate: -1deg; }
.stripe-sun { background: var(--sun); color: var(--ink); rotate: -1.2deg; }
.marquee { overflow: hidden; }
.marquee-track { display: flex; gap: 44px; width: max-content; animation: slide 36s linear infinite; padding-right: 44px; }
.marquee-track.mq-rev { animation-direction: reverse; }
.mq { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: 0.4px; white-space: nowrap; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ============ MEET THE CREW ============ */
.crew-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}
.crew-card { padding: 26px 26px 22px; }
.card-purple { border-color: var(--purple); }
.card-cyan { border-color: var(--cyan); }
.crew-head { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; }
.crew-photo {
  width: 92px; height: 134px; object-fit: contain; flex: none;
  filter: drop-shadow(4px 4px 0 rgba(23, 23, 43, 0.18));
}
.crew-doodle { width: 96px; height: 96px; flex: none; }
.crew-card h3 { font-size: 1.65rem; color: var(--purple); }
.card-cyan h3 { color: #0891c4; }
.crew-sub { font-weight: 700; color: var(--text-soft); margin: 4px 0 0; }
.crew-list { display: grid; gap: 10px; }
.crew-list li {
  position: relative; padding-left: 30px; font-weight: 600;
}
.crew-list li::before {
  content: "✦"; position: absolute; left: 4px; top: 0;
  font-size: 1.15rem;
}
.card-purple .crew-list li::before { color: var(--purple); }
.card-cyan .crew-list li::before { color: var(--cyan); }
.crew-note {
  text-align: center; font-weight: 800; color: var(--text-soft);
  margin-top: 30px;
}
@media (max-width: 880px) {
  .crew-grid { grid-template-columns: 1fr; }
}

/* ============ WHAT THEY DO ============ */
.do .wrap { position: relative; z-index: 2; }
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.tile { padding: 30px 22px 20px; }
.tile .doodle { width: 42px; height: 42px; color: var(--purple); margin-bottom: 10px; }
.tile h3 { font-size: 1.3rem; margin-bottom: 6px; }
.tile p { margin: 0; font-weight: 600; color: var(--text-soft); }
.tile-n {
  position: absolute; top: -16px; left: -12px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.2rem;
  border: 3px solid var(--ink); border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink);
  rotate: -8deg;
}
.tn-coral { background: var(--coral); color: #fff; }
.tn-cyan { background: var(--cyan); color: var(--ink); }
.tn-purple { background: var(--purple); color: #fff; }
.tn-sun { background: var(--sun); color: var(--ink); }
.tn-lime { background: var(--lime); color: var(--ink); }
@media (max-width: 900px) { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .tile { padding: 26px 12px 14px; }
  .tile .doodle { width: 32px; height: 32px; margin-bottom: 6px; }
  .tile h3 { font-size: 1.05rem; }
  .tile p { font-size: 0.85rem; }
  .tile-n { width: 36px; height: 36px; font-size: 1rem; top: -12px; left: -8px; }
}

/* ============ SAY "HEY BUZZ" ============ */
.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}
.step {
  padding: 40px 14px 18px;
  text-align: center;
  border-width: 3px;
}
.step .doodle { width: 40px; height: 40px; color: var(--text-soft); margin-bottom: 8px; transition: transform 0.25s, color 0.25s; }
.step h3 { font-size: 1.25rem; margin-bottom: 4px; }
.step p { margin: 0; font-weight: 700; font-size: 0.92rem; color: var(--text-soft); }
.step-n {
  position: absolute; top: -15px; left: 50%; translate: -50%;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1rem;
  background: var(--card); color: var(--text);
  border: 3px solid var(--ink); border-radius: 50%;
}
.step.lit { animation: step-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); border-color: var(--sc, var(--coral)); }
.step.lit .doodle { color: var(--sc-ink, var(--coral)); transform: scale(1.25) rotate(-8deg); }
.step.lit .step-n { background: var(--sc, var(--coral)); color: var(--sc-txt, #fff); }
@keyframes step-pop {
  0% { transform: scale(0.94); } 55% { transform: scale(1.06) rotate(-1deg); } 100% { transform: scale(1); }
}
.step[data-c="sun"] { --sc: var(--sun); --sc-ink: #b8860b; --sc-txt: var(--ink); }
.step[data-c="lime"] { --sc: var(--lime); --sc-ink: #5a9414; --sc-txt: var(--ink); }
.step[data-c="cyan"] { --sc: var(--cyan); --sc-ink: #0891c4; --sc-txt: var(--ink); }
.step[data-c="purple"] { --sc: var(--purple); --sc-ink: var(--purple); --sc-txt: #fff; }
.step[data-c="coral"] { --sc: var(--coral); --sc-ink: var(--coral); --sc-txt: #fff; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .step { padding: 30px 10px 12px; }
  .step .doodle { width: 30px; height: 30px; }
  .step h3 { font-size: 1.08rem; }
  .step p { font-size: 0.8rem; }
  .step-n { width: 28px; height: 28px; font-size: 0.9rem; top: -13px; }
}

.hb-row {
  display: flex; align-items: center; justify-content: center;
  gap: 26px; flex-wrap: wrap;
  padding-top: 8px;
}
.mini-buzz { position: relative; }
.hb-line {
  text-align: center; font-weight: 800; font-size: 1.08rem;
  margin-top: 18px;
}
.hb-line b { color: var(--purple); }

/* ============ LIDAR ============ */
.lidar { text-align: center; }
.lidar h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  margin-bottom: 14px;
  color: #fff;
}
.glow-cyan { color: var(--cyan); text-shadow: 0 0 24px rgba(34, 195, 243, 0.8); }
.lidar-text { max-width: 46em; margin: 0 auto 30px; font-weight: 700; font-size: 1.1rem; color: #cfcfee; }
.radar-panel {
  max-width: 860px; margin: 0 auto;
  border: 3px solid var(--cyan);
  border-radius: 26px;
  background: var(--night-2);
  box-shadow: 0 0 40px rgba(34, 195, 243, 0.45), inset 0 0 60px rgba(34, 195, 243, 0.08);
  overflow: hidden;
}
.radar-panel canvas { display: block; width: 100%; height: 430px; }
.caption { margin-top: 14px; font-weight: 700; color: #8f8fc0; font-size: 0.95rem; }
@media (max-width: 640px) { .radar-panel canvas { height: 300px; } }

/* ============ THEIR DAY ============ */
.day-chip {
  display: flex; width: fit-content; align-items: center; gap: 10px;
  margin: -6px auto 34px;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 9px 18px;
  font-weight: 800;
}
.daytrack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  padding-top: 52px;
  max-width: 1000px;
  margin: 0 auto;
}
.pill {
  position: relative;
  border: 3px solid var(--ink);
  border-radius: 999px;
  min-height: 92px;
  display: grid; place-content: center; gap: 2px;
  text-align: center;
  padding: 12px 10px;
  box-shadow: var(--pop-shadow);
  transition: transform 0.2s;
}
.pill b { font-family: var(--font-display); font-size: 1.18rem; font-weight: 400; }
.pill span { font-size: 0.82rem; font-weight: 800; opacity: 0.85; }
.pill-waking { background: var(--sun); color: var(--ink); }
.pill-lively { background: var(--lime); color: var(--ink); }
.pill-calm { background: var(--cyan); color: var(--ink); }
.pill-sleepy { background: var(--purple); color: #fff; }
.pill-asleep { background: var(--ink); color: #fff; }
.pill.now { transform: translateY(-5px) scale(1.04); }
.nowtag {
  display: none;
  position: absolute; right: 10px; top: -14px;
  font-family: var(--font-display); font-size: 0.8rem;
  background: #fff; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 999px;
  padding: 2px 10px 1px;
  box-shadow: 3px 3px 0 var(--ink);
}
.pill.now .nowtag { display: block; animation: tagbob 0.8s ease-in-out infinite alternate; }
@keyframes tagbob { from { translate: 0 -2px; } to { translate: 0 3px; } }
.nowpin {
  position: absolute; top: 0; left: var(--x, 10%);
  translate: -50%;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink); border-radius: 999px;
  padding: 4px 13px 3px;
  box-shadow: 3px 3px 0 var(--ink);
  animation: pinbounce 0.7s ease-in-out infinite alternate;
  transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
  white-space: nowrap;
}
.nowpin::after {
  content: ""; position: absolute; bottom: -11px; left: 50%; translate: -50%;
  border: 6px solid transparent; border-top: 8px solid var(--ink);
}
.pin-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: #cfcfe6; display: inline-block;
}
@keyframes pinbounce { from { margin-top: 0; } to { margin-top: 8px; } }
.day-line { text-align: center; font-weight: 700; max-width: 44em; margin: 30px auto 0; }
@media (max-width: 760px) {
  .daytrack { grid-template-columns: 1fr; gap: 12px; padding-top: 0; }
  .nowpin { display: none; }
  .pill { min-height: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; text-align: left; }
  .pill.now { transform: none; outline: 4px dashed var(--coral); outline-offset: 3px; }
}

/* ============ GOOD HOUSEMATES ============ */
.mates { color: #fff; }
.mates .sec-title { color: #fff; text-shadow: 3px 3px 0 rgba(23, 23, 43, 0.45); }
.badge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  max-width: 1060px;
  margin: 0 auto;
}
.badge {
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 26px;
  box-shadow: 6px 6px 0 rgba(23, 23, 43, 0.55);
  padding: 26px 20px 22px;
  text-align: center;
  rotate: -1.6deg;
  transition: transform 0.18s;
}
.badge-alt { rotate: 1.8deg; }
.badge .doodle { width: 46px; height: 46px; color: var(--purple); margin-bottom: 10px; }
.badge h3 { font-size: 1.22rem; }
.badge-stop .doodle { color: var(--coral); }
@media (hover: hover) {
  .badge:hover { transform: translateY(-6px) rotate(0deg) scale(1.03); }
}
@media (max-width: 900px) { .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .badge { rotate: 0deg; padding: 18px 10px 14px; }
  .badge .doodle { width: 34px; height: 34px; margin-bottom: 6px; }
  .badge h3 { font-size: 1rem; }
}

/* ============ STORY SO FAR ============ */
.mile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 22px;
}
.mile { padding: 36px 20px 28px; text-align: center; }
.counter-sm { width: 54px; height: 54px; border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); font-size: 1.35rem; }
.mini-burst { position: absolute; top: -20px; left: -14px; }
.mile:nth-child(even) .mini-burst { rotate: 5deg; }
.mile p { margin: 0; font-size: 1.1rem; color: var(--text); }
@media (max-width: 900px) { .mile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .mile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; }
  .mile { padding: 34px 10px 18px; }
  .mini-burst { width: 44px; height: 44px; top: -16px; left: -10px; }
  .counter-sm { font-size: 1.1rem; }
  .mile p { font-size: 0.9rem; }
}

/* ============ REVIEWS (on lime) ============ */
.rev-label { text-align: center; font-weight: 800; color: var(--ink); margin: -14px 0 30px; }
.rev-label b { text-decoration: underline wavy var(--coral) 2.5px; text-underline-offset: 4px; }
.rev-marquee { overflow: hidden; display: grid; gap: 22px; padding-bottom: 8px; }
.rev-row { overflow: hidden; }
.rev-track {
  display: flex; gap: 22px;
  width: max-content;
  padding-right: 22px;
  animation: slide 46s linear infinite;
}
.rev-track.rev-rev { animation-direction: reverse; animation-duration: 52s; }
.rev-marquee:hover .rev-track,
.rev-marquee:focus-within .rev-track { animation-play-state: paused; }
.review {
  width: 320px; flex: none;
  padding: 22px 22px 18px;
}
.review .stars { color: var(--coral); font-size: 1.15rem; letter-spacing: 3px; margin-bottom: 8px; }
.review blockquote { margin: 0 0 10px; font-weight: 700; font-size: 1.02rem; }
.review .cite { margin: 0; font-weight: 800; color: var(--text-soft); font-size: 0.92rem; }

/* ============ COMING NEXT ============ */
.next .wrap { position: relative; z-index: 2; }
.stamp {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--coral);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 8px 16px 7px;
  rotate: 5deg;
}
.next-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.next-card { padding: 30px 22px 22px; }
.next-card .doodle { width: 44px; height: 44px; color: var(--purple); margin-bottom: 10px; }
.next-card h3 { font-size: 1.35rem; margin-bottom: 6px; }
.next-card p { margin: 0; font-weight: 600; color: var(--text-soft); }
@media (max-width: 900px) { .next-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* ============ FINAL CTA (on purple) ============ */
.cta { overflow: clip; }
.cta .wrap-narrow { position: relative; z-index: 1; padding-top: 10px; padding-bottom: 10px; }
.cta h2 {
  position: relative;
  font-size: clamp(3.2rem, 8vw, 6rem);
  color: #fff;
  text-shadow: 5px 5px 0 var(--lime);
  margin-bottom: 12px;
}
.cta-text {
  position: relative;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 800;
  color: #fff;
  max-width: 24em;
  margin: 0 auto 26px;
}
.cta .hero-btns { position: relative; justify-content: center; }
.fine-print {
  position: relative;
  margin-top: 22px;
  font-weight: 800;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

/* ============ FOOTER ============ */
.footer {
  background: var(--ink);
  color: #e8e7fa;
  text-align: center;
  padding: 40px 24px 46px;
  font-size: 0.95rem;
}
.footer a { color: var(--sun); font-weight: 800; }
.foot-brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 12px;
}
.footer p { max-width: 62em; margin-inline: auto; }

/* ============ SCENE (pop restyle of the toy box) ============ */
.scene .floor, .scene .shadow { display: none; } /* the plinth grounds them now */

.tire { fill: #17172b; stroke: #3a3a5e; stroke-width: 4; }
.rim { fill: #33335c; }
.hub { fill: var(--sun); }
.caster { fill: #17172b; stroke: #4a4a72; stroke-width: 2; }
.post { fill: #ffffff; stroke: var(--ink); stroke-width: 2; }
.tray { fill: url(#trayG); stroke: var(--ink); stroke-width: 2.5; }
.mount { fill: #26264a; stroke: #4a4a72; stroke-width: 1.5; }
.mast { fill: #26264a; }
.brick { fill: #17172b; stroke: #4a4a72; stroke-width: 1.5; }
.cable { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.cable-red { stroke: var(--coral); }
.cable-dark { stroke: #33335c; }
.board { fill: var(--purple); stroke: #a985ef; stroke-width: 1.5; }
.chip { fill: #0f0f22; }
.wbox { fill: #ffffff; stroke: var(--ink); stroke-width: 2; }
.led-green { fill: #4dff88; }
.led-red { fill: var(--coral); }
.led { animation: blink 2.4s infinite steps(1); }
@keyframes blink { 50% { opacity: 0.35; } }

.lidar-body { fill: #17172b; stroke: #4a4a72; stroke-width: 2; }
.lidar-top { fill: #33335c; }
.laser { fill: var(--coral); }

.head { fill: #17172b; stroke: #4a4a72; stroke-width: 2.5; }
.vent { stroke: #4a4a72; stroke-width: 2.5; stroke-linecap: round; }
.lens-ring { fill: #0f0f22; stroke: var(--cyan); stroke-width: 3; }
.lens { fill: #05050f; }
.pupil { fill: var(--cyan); }
.glint { fill: #fff; opacity: 0.9; }

.link { fill: url(#linkG); stroke: #17172b; stroke-width: 1.5; }
.servo { fill: #17172b; stroke: var(--purple); stroke-width: 1.8; }
.jaw { fill: #ffffff; stroke: #9a9ac0; stroke-width: 1.5; }

.pi-box { fill: #ffffff; stroke: var(--ink); stroke-width: 2.5; }
.pi-label { font-family: var(--font-display); font-size: 13px; fill: var(--ink); }
.pi-tiny { font-family: var(--font-body); font-weight: 800; font-size: 8.5px; fill: #6a6a90; }
.pi-dot { fill: #33335c; }
.pi-cable { fill: none; stroke: var(--coral); stroke-width: 2; stroke-dasharray: 4 5; stroke-linecap: round; }

.bz-white { fill: url(#suitG); stroke: #8f8fc0; stroke-width: 1.6; }
.bz-green { fill: url(#greenG); stroke: #5a9414; stroke-width: 1.6; }
.bz-purple { fill: url(#purpleG); stroke: #56309f; stroke-width: 1.2; }
.bz-black { fill: #17172b; stroke: #4a4a72; stroke-width: 1.4; }
.bz-pack { fill: #eceafc; stroke: #8f8fc0; stroke-width: 1.6; }
.bz-belt { fill: #26264a; }
.bz-buckle { fill: var(--cyan); }
.bz-panel { fill: #eef1f8; stroke: #8f8fc0; stroke-width: 1.4; }
.bz-blue { fill: #3d86f0; }
.bz-greenlight { fill: #35c95c; }
.bz-red { fill: var(--coral); }
.bz-badge { fill: #b9dcff; stroke: #6f9dd6; stroke-width: 1; }
.bz-badge-mark { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bz-label { fill: var(--sun); }
.bz-button { fill: var(--coral); stroke: #a8231a; stroke-width: 1; }
.bz-glove { fill: #f1dcd6; stroke: #cdb3ab; stroke-width: 1.2; }
.bz-hinge { fill: #b9a6e8; stroke: #7d68b8; stroke-width: 1; }
.bz-skin { fill: #f8d7c0; }
.bz-brow { fill: none; stroke: #3b2a20; stroke-width: 2.6; stroke-linecap: round; }
.bz-eyewhite { fill: #fff; }
.bz-iris { fill: #3f78d8; }
.bz-pupil { fill: #111; }
.bz-line { fill: none; stroke: #d29d82; stroke-width: 1.3; stroke-linecap: round; }
.bz-mouth { fill: #7a3434; }
.bz-wing { fill: #ffffff; stroke: #8f8fc0; stroke-width: 1.6; }
.bz-wing-stripe { stroke: var(--purple); stroke-width: 4.5; stroke-linecap: round; }
.helmet { stroke: #bfe9ff; stroke-opacity: 0.75; stroke-width: 2; }
.helmet-shine { fill: none; stroke: #fff; stroke-opacity: 0.85; stroke-width: 4; stroke-linecap: round; }

/* sticker numbers on the drawing */
.co-line { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 4; }
.co-num circle { fill: var(--sun); stroke: var(--ink); stroke-width: 2.5; }
.co-num text {
  font-family: var(--font-display); font-size: 13px;
  fill: var(--ink); text-anchor: middle;
}
@media (max-width: 700px) { .co-line { display: none; } }

.bot { cursor: pointer; }
.bot:focus-visible { outline: none; }
.bot:focus-visible .tray, .bot:focus-visible .bz-pack { stroke: var(--coral); stroke-width: 4; }

/* mini buzz talking mouth */
#miniMouth { transform-box: fill-box; transform-origin: center; transition: transform 0.1s; }
.mini-buzz.talking #miniMouth { animation: chat 0.28s ease-in-out infinite alternate; }
@keyframes chat { from { transform: scaleY(0.5); } to { transform: scaleY(3.4); } }

/* ============ SCROLL REVEALS (JS adds .pre only below the fold) ============ */
.reveal { transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1); }
.reveal.pre { opacity: 0; transform: translateY(20px); }

/* ============ REDUCED MOTION: static but still loud ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .led, .marquee-track, .rev-track,
  .nowpin, .pill.now .nowtag, .mini-buzz.talking #miniMouth, .mem-bob { animation: none !important; }
  .btn:hover { animation: none; }
  .btn, .pop-card, .badge, .pill { transition: none; }
  .reveal, .reveal.pre { opacity: 1; transform: none; transition: none; }
  .bubble { transition: none; }
  /* reviews become a plain grid */
  .rev-marquee { display: grid; gap: 22px; max-width: 1000px; margin: 0 auto; padding: 0 24px; }
  .rev-row { overflow: visible; }
  .rev-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); width: auto; padding: 0; }
  .rev-clone { display: none; }
  .review { width: auto; }
  /* click-line stripes: one quiet static line */
  .marquee { display: flex; justify-content: center; }
  .mq-clone { display: none; }
  .marquee-track { width: auto; animation: none; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
  .mq { white-space: normal; }
}

/* tight phones: compact everything, straight stripes, centred mini bubble */
@media (max-width: 700px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 16px; }
  .hero-grid { padding: 0 16px; }
  .hero { padding-top: 36px; }
  .section { padding: 46px 0; }
  .band { padding: 42px 0 50px; }
  .wave { height: 18px; }
  .wave-down { top: -17px; }
  .wave-up { bottom: -17px; }
  .stripe { width: 100%; margin-left: 0; rotate: 0deg; margin-top: 42px; margin-bottom: 38px; padding: 10px 0; }
  .sec-head { margin-bottom: 22px; }
  .sec-title { margin-bottom: 24px; }
  .crew-card { padding: 18px 16px 14px; }
  .crew-head { gap: 12px; margin-bottom: 10px; }
  .crew-photo { width: 62px; height: 92px; }
  .crew-doodle { width: 64px; height: 64px; }
  .crew-card h3 { font-size: 1.3rem; }
  .crew-sub { font-size: 0.88rem; }
  .crew-list { gap: 7px; }
  .crew-list li { font-size: 0.92rem; padding-left: 24px; }
  .crew-note { margin-top: 18px; }
  .stat .counter { width: 118px; font-size: 1.7rem; }
  .stat-label { font-size: 0.85rem; }
  .day-chip { margin-bottom: 24px; }
  .pill { min-height: 0; padding: 10px 16px; }
  .pill b { font-size: 1.05rem; }
  .pill span { font-size: 0.75rem; }
  .day-line { margin-top: 20px; }
  .steps { margin-bottom: 22px; }
  .hb-row { flex-direction: column; gap: 20px; }
  .bubble-mini {
    white-space: normal;
    width: 250px; max-width: 86vw;
    left: 50%; margin-left: -125px;
    bottom: calc(100% + 12px);
  }
  .bubble-mini::before, .bubble-mini::after { left: 50%; translate: -50%; }
  .hb-line { margin-top: 4px; }
  .lidar-text { font-size: 0.98rem; margin-bottom: 20px; }
  .radar-panel canvas { height: 250px; }
  .rev-label { margin: -6px 0 20px; }
  .next-card { padding: 20px 16px 14px; }
  .next-card .doodle { width: 34px; height: 34px; margin-bottom: 6px; }
  .next-card h3 { font-size: 1.2rem; }
  .next-card p { font-size: 0.92rem; }
  .cta h2 { font-size: clamp(2.9rem, 15vw, 4rem); }
  .eyebrow { font-size: 0.85rem; }
  .sticker { font-size: 0.85rem; padding: 6px 11px 5px; }
  .sticker-duo { font-size: 0.9rem; }
  .review { width: 272px; }
}

/* review fixes (Claude, round 3) */
/* single mood readout in the hero: the sticker (chip removed in M2a) */

/* review fixes (Claude, round 4): a fuller Memphis field on desktop */
.mem-12 { top: 15%;   left: 20%;  width: 72px; color: var(--coral);  rotate: -8deg; }
.mem-13 { bottom: 9%; left: 27%;  width: 58px; color: var(--lime); }
.mem-14 { top: 13%;   left: 49%;  width: 60px; color: var(--cyan);   rotate: 14deg; animation-delay: -3s; }
.mem-15 { bottom: 3%; right: 31%; width: 48px; color: var(--purple); rotate: -18deg; }
.mem-16 { top: 66%;   right: 1%;  width: 58px; color: var(--coral);  rotate: 30deg; }
@media (min-width: 900px) { .mem-hero .mem { scale: 1.3; } }
@media (max-width: 899px) { .mem-x { display: none; } }
.mem-10 { top: 86%; left: 4%; }              /* was touching the start of the subhead */

/* round 5 (the pick): M2a plus M2b's comic caption headline */
:root { --font-lettering: "Bangers", "Lilita One", "Arial Black", sans-serif; }
.caption-box {
  position: relative;
  display: inline-block;
  text-align: left;
  background-color: var(--sun);
  background-image: radial-gradient(rgba(23, 23, 43, 0.07) 1.6px, transparent 2.2px);
  background-size: 15px 15px;
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 16px;
  box-shadow: 10px 10px 0 var(--ink);
  padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 30px);
  margin-bottom: 30px;
  rotate: -0.6deg;
}
.hero h1 {
  font-family: var(--font-lettering);
  font-size: clamp(2.7rem, 5.6vw, 5.3rem);
  text-transform: uppercase;
}
.hero .h1a, .hero .h1b { display: inline-block; color: var(--ink); }
.hero .h1a { rotate: -1.1deg; --halo: var(--coral); }
.hero .h1b { rotate: 0.8deg; --halo: var(--purple); }
.hero .h1a, .hero .h1b {
  text-shadow:
    0.055em 0 0 var(--halo), -0.055em 0 0 var(--halo),
    0 0.055em 0 var(--halo), 0 -0.055em 0 var(--halo),
    0.045em 0.045em 0 var(--halo), -0.045em 0.045em 0 var(--halo),
    0.045em -0.045em 0 var(--halo), -0.045em -0.045em 0 var(--halo),
    0.1em 0.12em 0 rgba(23, 23, 43, 0.9);
}
.caption-box .hero-sub { color: var(--ink); font-weight: 800; max-width: 24em; margin: 0; }
@media (prefers-color-scheme: dark) {
  .caption-box { border-color: #060624; box-shadow: 10px 10px 0 #060624, 0 0 26px rgba(255, 210, 63, 0.3); }
}
@media (max-width: 960px) { .caption-box { margin-bottom: 24px; } }
@media (max-width: 700px) {
  .caption-box { padding: 18px 14px 16px; border-radius: 12px; box-shadow: 7px 7px 0 var(--ink); }
  .hero h1 { font-size: clamp(2.5rem, 13.5vw, 4rem); }
}
@media (max-width: 700px) and (prefers-color-scheme: dark) {
  .caption-box { box-shadow: 7px 7px 0 #060624, 0 0 20px rgba(255, 210, 63, 0.3); }
}
/* small phones: keep the nav on one line */
@media (max-width: 400px) {
  .nav { gap: 10px; padding: 10px 14px; }
  .brand { font-size: 1.1rem; gap: 8px; white-space: nowrap; }
  .btn-nav { font-size: 0.85rem; padding: 8px 13px 7px; white-space: nowrap; margin-left: auto; }
}
/* the newest milestone sits alone, centred, in the last row */
.mile-latest { grid-column: 1 / -1; justify-self: center; width: min(100%, calc((100% - 44px) / 3)); }
@media (max-width: 900px) { .mile-latest { width: calc((100% - 22px) / 2); } }
@media (max-width: 520px) { .mile-latest { width: calc((100% - 16px) / 2); } }