/* ================================================================
   Burnrate — landing page, v2 "dither + hard edges"
   Backgrounds: OpenAI-style ordered-dither gradient blooms
   (assets/dither-hero.png, generated — same Bayer dissolve as the
   app icon). Components: Gumroad-style neo-brutalism — 2px black
   borders, hard offset shadows, chunky press-down buttons.
   Type: Syne (display) / Space Grotesk (body) / IBM Plex Mono.
   ================================================================ */

:root {
  --bg: #f5f2e9;
  --surface: #fffdf8;
  --ink: #141310;
  --muted: #555146;
  --faint: #6a6558;
  --accent: #ff7a45;
  --accent-deep: #e4581f;

  --dark: #0c0c0e;
  --dark-ink: #f5f2e9;
  --dark-muted: #a9a399;
  --dark-faint: #8f8a7d;

  --line: rgba(20, 19, 16, 0.12);
  --line-dark: rgba(245, 242, 233, 0.16);

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-pill: 999px;

  --shadow-sm: 4px 4px 0 var(--ink);
  --shadow-md: 6px 6px 0 var(--ink);
  --shadow-lg: 10px 10px 0 var(--ink);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 104px;
  --space-7: 160px;

  --font: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Syne", "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 104px; }

body {
  position: relative;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Halftone flames in the margins: scripts/flames.py. They rise as the
   user scrolls (script.js) and float off the top of the page. */
.flames {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: clip;
}

.flame {
  position: absolute;
  opacity: 0.85;
  will-change: transform;
}

.flame img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.flame img + img {
  position: absolute;
  left: 0;
  top: 0;
}

.flame img:not(:first-child) { opacity: 0; }

/* Persistent pixel-level flicker: three dither frames per flame cycle
   with stepped opacity — the same individual-pixel fluctuation as the
   hero sun. Active scrolling doubles the flicker rate. */
.flames .flame img:nth-child(1) { animation: flame-f1 0.9s steps(1, end) infinite; }
.flames .flame img:nth-child(2) { animation: flame-f2 0.9s steps(1, end) infinite; }
.flames .flame img:nth-child(3) { animation: flame-f3 0.9s steps(1, end) infinite; }

.flames.scrolling .flame img { animation-duration: 0.45s; }

@keyframes flame-f1 {
  0%, 32.9% { opacity: 1; }
  33%, 100% { opacity: 0; }
}

@keyframes flame-f2 {
  0%, 32.9% { opacity: 0; }
  33%, 65.9% { opacity: 1; }
  66%, 100% { opacity: 0; }
}

@keyframes flame-f3 {
  0%, 65.9% { opacity: 0; }
  66%, 100% { opacity: 1; }
}

@media (max-width: 1140px) {
  .flames { display: none; }
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 120ms ease, box-shadow 120ms ease;
  white-space: nowrap;
}

.btn .ico { width: 17px; height: 17px; flex: none; }

.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }

.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }

.btn-light { background: var(--accent); color: var(--ink); }

.btn-dark { background: var(--ink); color: var(--dark-ink); }

.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-lg { padding: 14px 26px; font-size: 16px; }

/* ---------------- Nav ---------------- */

.nav-wrap {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 var(--space-2);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 8px 10px 8px 16px;
  box-shadow: 5px 5px 0 var(--ink);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
}

.nav-brand img { border-radius: 7px; border: 1.5px solid var(--ink); }

.nav-links { display: flex; gap: 4px; }

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  padding: 7px 12px;
  border-radius: 9px;
  transition: background 120ms ease, color 120ms ease;
}

.nav-links a:hover { background: var(--ink); color: var(--dark-ink); }

/* ---------------- Hero ---------------- */

.hero {
  position: relative;
  padding: 132px var(--space-2) var(--space-6);
  text-align: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: -120px;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  will-change: transform;
  /* static / no-JS / reduced-motion framing (original sun position) */
  transform: translate3d(0, 120px, 0);
}

@media (prefers-reduced-motion: no-preference) {
  /* sunrise: the sun loads low; script.js raises it as the user scrolls */
  .hero-bg { transform: translate3d(0, 190px, 0); }
}

.hero-bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  opacity: 0;
}

.hero-bg img.on { opacity: 1; }

/* standalone sky sprites, each on its own parallax depth */
.sky-sprites {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sky-sprites .sky-el { position: absolute; will-change: transform; }

.sky-el img { image-rendering: pixelated; }

.sky-ufo { --flip: 1.6s; }
.sky-bird { --flip: 0.7s; }

/* the abductee rides the beam as its own layer so the first bit of
   scroll can tug it downward while the birds lift away */
.sky-el img.ufo-cow {
  animation: none;
  opacity: 1;
  position: absolute;
  left: 25%;
  top: 66%;
  width: 62%;
  height: auto;
  will-change: transform;
}

.hero-inner, .mock { position: relative; }

.hero-inner { max-width: 880px; margin: 0 auto; }

.hero-icon {
  width: 108px;
  height: 108px;
  margin: 0 auto var(--space-4);
  border-radius: 24px;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-md);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.1vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: var(--space-3);
}

.hero-sub {
  color: var(--ink);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto var(--space-4);
}

.hero-cta { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }

.hero-note { font-family: var(--font-mono); color: var(--muted); font-size: 12.5px; }

/* ---------------- Product screenshot ---------------- */

.mock {
  max-width: 1040px;
  margin: var(--space-6) auto 0;
  padding: 0 var(--space-2);
}

.screen {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--dark);
  box-shadow: var(--shadow-lg);
}

/* ---------------- Mascot (Pip, the walking meter) ----------------
   Two-frame pixel sprites: both frames stacked, stepped opacity
   animations in opposite phase flip between them. */

.sprite { position: relative; display: inline-block; line-height: 0; }

.sprite img {
  image-rendering: pixelated;
  height: auto;
  animation: sprite-a var(--flip, 1.1s) steps(1) infinite;
}

.sprite img:nth-of-type(2) {
  position: absolute;
  left: 0;
  top: 0;
  animation-name: sprite-b;
}

@keyframes sprite-a { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sprite-b { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }

.sprite-center { display: block; width: fit-content; margin: 0 auto var(--space-3); }

/* three-frame work loop (computer -> papers -> cabinet), and he takes
   a few stepped paces between the stations */
.sprite-tri img:nth-child(1) { animation: flame-f1 8.4s steps(1, end) infinite, pip-patrol 8.4s infinite; }
.sprite-tri img:nth-child(2) { animation: flame-f2 8.4s steps(1, end) infinite, pip-patrol 8.4s infinite; }
.sprite-tri img:nth-child(3) { animation: flame-f3 8.4s steps(1, end) infinite, pip-patrol 8.4s infinite; }
.sprite-tri img:nth-child(3) { position: absolute; left: 0; top: 0; opacity: 0; }

.sprite-tri img { transform-origin: 50% 60%; }

/* four-station patrol: desk -> chair spin -> cabinet -> library ladder */
@keyframes pip-patrol {
  0% { transform: translate(-92px, 0) rotate(0); animation-timing-function: steps(1, end); }
  16% { transform: translate(-92px, 0) rotate(0); animation-timing-function: steps(5, end); }
  22% { transform: translate(0, 0) rotate(0); animation-timing-function: steps(1, end); }
  26% { transform: translate(0, 0) rotate(0); animation-timing-function: steps(8, end); }
  33% { transform: translate(0, 0) rotate(360deg); animation-timing-function: steps(1, end); }
  40% { transform: translate(0, 0) rotate(360deg); animation-timing-function: steps(5, end); }
  46% { transform: translate(92px, 0) rotate(360deg); animation-timing-function: steps(1, end); }
  64% { transform: translate(92px, 0) rotate(360deg); animation-timing-function: steps(4, end); }
  70% { transform: translate(182px, 0) rotate(360deg); animation-timing-function: steps(2, end); }
  76% { transform: translate(182px, -52px) rotate(360deg); animation-timing-function: steps(1, end); }
  86% { transform: translate(182px, -52px) rotate(360deg); animation-timing-function: steps(2, end); }
  90% { transform: translate(182px, 0) rotate(360deg); animation-timing-function: steps(8, end); }
  100% { transform: translate(-92px, 0) rotate(360deg); }
}

/* four-beat sequence (bare -> wad out -> shades on -> thug-life dump) */
.sprite-quad img:nth-child(1) { animation: q4-f1 4.8s steps(1, end) infinite; }
.sprite-quad img:nth-child(2) { animation: q4-f2 4.8s steps(1, end) infinite; }
.sprite-quad img:nth-child(3) { animation: q4-f3 4.8s steps(1, end) infinite; }
.sprite-quad img:nth-child(4) { animation: q4-f4 4.8s steps(1, end) infinite; }
.sprite-quad img:nth-child(3), .sprite-quad img:nth-child(4) { position: absolute; left: 0; top: 0; opacity: 0; }

@keyframes q4-f1 { 0%, 24.9% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes q4-f2 { 0%, 24.9% { opacity: 0; } 25%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes q4-f3 { 0%, 49.9% { opacity: 0; } 50%, 74.9% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes q4-f4 { 0%, 74.9% { opacity: 0; } 75%, 100% { opacity: 1; } }

/* on the dump beat, bills keep falling down into the card */
.money-fall {
  position: absolute;
  left: 4px;
  top: calc(100% - 8px);
  width: 4px;
  height: 4px;
  background: #7dbb7a;
  opacity: 0;
  z-index: 3;
  box-shadow:
    12px 3px 0 #7dbb7a, 26px -2px 0 #4f9a4c, 40px 5px 0 #7dbb7a,
    54px 0 0 #7dbb7a, 20px 10px 0 #4f9a4c, 44px 12px 0 #7dbb7a,
    8px -5px 0 #ffc24b, 33px 7px 0 #ffc24b, 50px -4px 0 #ffc24b;
  animation: money-fall 4.8s infinite;
}

@keyframes money-fall {
  0%, 74.9% { opacity: 0; transform: translateY(0); }
  75% { opacity: 1; transform: translateY(4px); animation-timing-function: steps(3, end); }
  90% { opacity: 1; transform: translateY(34px); animation-timing-function: steps(2, end); }
  100% { opacity: 0; transform: translateY(52px); }
}

/* his bubble lights up money-green on the dump beat */
.pc-mascot .bubble { animation: bubble-money 4.8s steps(1, end) infinite; }
.pc-mascot .bubble::after { animation: bubble-money-tail 4.8s steps(1, end) infinite; }

@keyframes bubble-money {
  0%, 74.9% { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
  75%, 100% { border-color: #4f9a4c; box-shadow: 3px 3px 0 #4f9a4c; }
}

@keyframes bubble-money-tail {
  0%, 74.9% { border-right-color: var(--ink); border-bottom-color: var(--ink); }
  75%, 100% { border-right-color: #4f9a4c; border-bottom-color: #4f9a4c; }
}

/* the greyhound leads on the leash, sniffing ahead of the detective */
img.det-dog {
  position: absolute;
  bottom: 0;
  right: calc(100% - 30px);
}

img.det-dog-1 { animation: sprite-a 0.6s steps(1, end) infinite, det-pace 7s infinite; }
img.det-dog-2 { animation: sprite-b 0.6s steps(1, end) infinite, det-pace 7s infinite; opacity: 0; }

/* static scenery props beside a sprite (no frame-flip) */
.sprite img.prop {
  animation: none;
  opacity: 1;
  position: absolute;
  bottom: 0;
}

.prop-desk { right: calc(100% + 56px); }
.prop-cabinet { left: calc(100% + 56px); }

/* the pointer above the computer: he drives it while he's at the desk
   (first leg of the patrol), then it settles to an idle hover */
.sprite img.prop-cursor {
  right: calc(100% + 90px);
  bottom: 94px;
  animation: cursor-nav 8.4s infinite;
}

@keyframes cursor-nav {
  0% { transform: translate(0, 0); animation-timing-function: steps(1, end); }
  3% { transform: translate(-10px, -6px); animation-timing-function: steps(1, end); }
  6% { transform: translate(6px, -12px); animation-timing-function: steps(1, end); }
  9% { transform: translate(-4px, -2px); animation-timing-function: steps(1, end); }
  13% { transform: translate(8px, -8px); animation-timing-function: steps(1, end); }
  16% { transform: translate(0, 0); animation-timing-function: ease-in-out; }
  60% { transform: translate(0, -5px); animation-timing-function: ease-in-out; }
  100% { transform: translate(0, 0); }
}

/* the cabinet drawer opens while he's standing at it, then shuts */
.sprite img.cab-1 { animation: cab-closed 8.4s steps(1, end) infinite; }
.sprite img.cab-2 { animation: cab-open 8.4s steps(1, end) infinite; opacity: 0; }

@keyframes cab-closed {
  0%, 47.9% { opacity: 1; }
  48%, 61.9% { opacity: 0; }
  62%, 100% { opacity: 1; }
}

@keyframes cab-open {
  0%, 47.9% { opacity: 0; }
  48%, 61.9% { opacity: 1; }
  62%, 100% { opacity: 0; }
}

/* the library he browses from the ladder */
.sprite img.prop-shelf { left: calc(100% + 196px); }

/* office dressing: plant past the desk, bin at the far left corner */
.sprite img.prop-plant { right: calc(100% + 142px); }
.sprite img.prop-trash { right: calc(100% + 200px); z-index: 2; }

/* the paper toss: fresh off the library ladder, Pip lobs a crumpled
   draft clear across the office and it drops behind the bin's rim */
.paper-ball {
  position: absolute;
  left: 220px;
  bottom: 52px;
  width: 10px;
  height: 10px;
  background: #ffc24b;
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 #ffe08a;
  opacity: 0;
  z-index: 1;
  animation: paper-throw 8.4s infinite;
}

@keyframes paper-throw {
  0%, 90.9% { opacity: 0; transform: translate(0, 0); animation-timing-function: steps(1, end); }
  91% { opacity: 1; transform: translate(0, -6px); animation-timing-function: steps(2, end); }
  92% { transform: translate(-81px, -30px); animation-timing-function: steps(2, end); }
  93% { transform: translate(-162px, -45px); animation-timing-function: steps(2, end); }
  94% { transform: translate(-243px, -48px); animation-timing-function: steps(2, end); }
  95% { transform: translate(-324px, -36px); animation-timing-function: steps(2, end); }
  96% { transform: translate(-396px, -12px); animation-timing-function: steps(2, end); }
  96.5%, 96.9% { transform: translate(-441px, 27px); }
  97%, 100% { opacity: 0; transform: translate(-441px, 27px); }
}

/* the office chair sits behind him at center and kicks into a swivel
   whenever he pushes off to switch stations */
.prop-chair {
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  transform-origin: 50% 78%;
  animation: chair-swivel 8.4s infinite;
}

@keyframes chair-swivel {
  0%, 15% { transform: translateX(-50%) rotate(0); }
  19% { transform: translateX(-50%) rotate(-14deg); animation-timing-function: ease-out; }
  22% { transform: translateX(-50%) rotate(0); animation-timing-function: steps(1, end); }
  26% { transform: translateX(-50%) rotate(0); animation-timing-function: steps(8, end); }
  33%, 39% { transform: translateX(-50%) rotate(360deg); }
  43% { transform: translateX(-50%) rotate(372deg); animation-timing-function: ease-out; }
  46%, 88% { transform: translateX(-50%) rotate(360deg); }
  93% { transform: translateX(-50%) rotate(350deg); animation-timing-function: ease-out; }
  100% { transform: translateX(-50%) rotate(360deg); }
}
.prop-prints {
  right: calc(100% + 128px);
  animation: prints-appear 5s steps(4, end) infinite;
}

/* the detective paces his beat, turning at each end */
.sprite-det img:nth-of-type(1) { animation: sprite-a var(--flip, 1.1s) steps(1, end) infinite, det-pace 7s infinite; }
.sprite-det img:nth-of-type(2) { animation: sprite-b var(--flip, 1.1s) steps(1, end) infinite, det-pace 7s infinite; }

@keyframes det-pace {
  0% { transform: translateX(-44px) scaleX(1); animation-timing-function: steps(7, end); }
  45% { transform: translateX(44px) scaleX(1); animation-timing-function: steps(1, end); }
  50% { transform: translateX(44px) scaleX(-1); animation-timing-function: steps(7, end); }
  95% { transform: translateX(-44px) scaleX(-1); animation-timing-function: steps(1, end); }
  100% { transform: translateX(-44px) scaleX(1); }
}

/* footprints pop in one at a time along the trail */
@keyframes prints-appear {
  0% { clip-path: inset(0 100% 0 0); }
  80% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.prop-wall { left: calc(100% + 40px); }
.prop-product { left: calc(100% + 148px); }

/* pixel impact burst, flashing at the moment he hits the bricks */
.bonk-fx {
  position: absolute;
  left: calc(100% + 30px);
  top: 28px;
  width: 4px;
  height: 4px;
  background: var(--accent-deep);
  opacity: 0;
  box-shadow:
    0 -10px 0 var(--accent-deep), 10px 0 0 var(--accent-deep),
    0 10px 0 var(--accent-deep), -10px 0 0 var(--accent-deep),
    7px -7px 0 #ffc24b, 7px 7px 0 #ffc24b,
    -7px -7px 0 #ffc24b, -7px 7px 0 #ffc24b;
  animation: bonk-flash 2.8s steps(1, end) infinite;
}

@keyframes bonk-flash {
  0%, 28% { opacity: 0; }
  29%, 38% { opacity: 1; }
  39%, 100% { opacity: 0; }
}

/* he keeps running at the wall and bonking off it, the finished
   product forever out of reach on the other side */
.sprite-alarm img:nth-of-type(1) { animation: sprite-a var(--flip, 0.5s) steps(1, end) infinite, pip-bonk 2.8s infinite; }
.sprite-alarm img:nth-of-type(2) { animation: sprite-b var(--flip, 0.5s) steps(1, end) infinite, pip-bonk 2.8s infinite; }

@keyframes pip-bonk {
  0%, 18% { transform: translateX(-72px); animation-timing-function: steps(5, end); }
  30% { transform: translateX(36px) scaleX(0.94); animation-timing-function: ease-out; }
  42% { transform: translateX(-16px) scaleX(1); animation-timing-function: steps(6, end); }
  74% { transform: translateX(-72px); }
  100% { transform: translateX(-72px); }
}

.sprite-alarm { --flip: 0.5s; }
.sprite-thumbs { --flip: 1.3s; }
.sprite-shrug { --flip: 1.8s; }

.mascot-peek {
  position: absolute;
  top: -84px;
  right: 8%;
  transform-origin: 50% 100%;
  --flip: 0.55s;
  /* entrance: dropped off by aliens — the saucer sinks in, the beam
     flares down and out, glowing-green Pip levitates down it, lands
     with the double bounce, and the saucer bails */
  animation: pip-landbounce 0.7s ease-out 3s,
    mascot-bob 2.2s 3.75s infinite;
}

/* the drop-off saucer hovers above his landing spot */
.mascot-peek .abduct-ufo {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 96px);
  width: 84px;
  margin-left: -42px;
  animation: ufo-in 0.8s steps(12, end) backwards,
    ufo-hover 1.1s steps(2, end) 0.8s infinite,
    ufo-out 0.6s steps(10, end) 3.1s forwards;
}

.mascot-peek .abduct-ufo img { display: block; width: 100%; height: auto; animation: sprite-a 0.8s steps(1) infinite; }

.mascot-peek .abduct-ufo img + img {
  position: absolute;
  left: 0;
  top: 0;
  animation-name: sprite-b;
}

@keyframes ufo-in { from { transform: translateY(-200px); } to { transform: translateY(0); } }

@keyframes ufo-hover { 0%, 49.9% { transform: translateY(0); } 50%, 100% { transform: translateY(-3px); } }

@keyframes ufo-out {
  from { transform: translateY(0); opacity: 1; }
  99% { opacity: 1; }
  to { transform: translate(70px, -240px); opacity: 0; }
}

/* the tractor beam: shoots down and flares out, then snaps back up */
.mascot-peek .abduct-beam {
  position: absolute;
  left: 50%;
  top: -102px;
  bottom: -2px;
  width: 104px;
  margin-left: -52px;
  background: rgba(125, 187, 122, 0.3);
  clip-path: polygon(37% 0, 63% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  animation: beam-in 0.4s steps(8, end) 0.85s backwards,
    beam-out 0.35s steps(7, end) 3.05s forwards;
}

@keyframes beam-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@keyframes beam-out {
  from { transform: scaleY(1); }
  to { transform: scaleY(0); visibility: hidden; }
}

/* mid-beam he rides down glowing alien green */
.mascot-peek img.green {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  animation: sprite-a 0.55s steps(1) 1.3s infinite,
    green-down 1.7s steps(16, end) 1.3s forwards;
}

.mascot-peek img.green-b { animation-name: sprite-b, green-down; }

@keyframes green-down {
  0% { visibility: visible; transform: translateY(-104px); }
  99.9% { visibility: visible; transform: translateY(0); }
  100% { visibility: hidden; transform: translateY(0); }
}

/* the real Pip holds until the beam sets him down */
.mascot-peek img:nth-of-type(1) { animation: pip-hidden 3s steps(1, end) backwards, sprite-a var(--flip) steps(1) 3s infinite; }
.mascot-peek img:nth-of-type(2) { animation: pip-hidden 3s steps(1, end) backwards, sprite-b var(--flip) steps(1) 3s infinite; }
.mascot-peek .bubble { animation: pip-hidden 3.2s steps(1, end) backwards; }

@keyframes pip-hidden {
  0%, 99.9% { opacity: 0; }
  100% { opacity: 1; }
}

/* station B: he ducks behind the frame, then pops out of the
   screenshot's right side to keep narrating */
.mascot-peek.station-b {
  top: 360px;
  right: -6px;
  z-index: 2;
  transform-origin: 0% 80%;
  animation: station-pop 0.45s cubic-bezier(0.5, 1.6, 0.4, 1) 0.3s both,
    mascot-bob 2.2s 0.9s infinite;
}

@keyframes station-pop {
  from { transform: translateX(-34px) scale(0.3); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes pip-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes pip-landbounce {
  0% { transform: translateY(0); }
  30% { transform: translateY(-12px); }
  55% { transform: translateY(0); }
  75% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

@keyframes mascot-bob {
  0%, 49.9% { transform: translateY(0); }
  50%, 100% { transform: translateY(-5px); }
}

.bubble {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 4px 9px;
  box-shadow: 3px 3px 0 var(--ink);
}

.bubble::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--surface);
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.bubble-left { right: calc(100% + 12px); top: 2px; }
.bubble-left::after { right: -7px; top: 50%; transform: translateY(-50%) rotate(-45deg); }

.bubble-right { left: calc(100% + 12px); top: 2px; }
.bubble-right::after { left: -7px; top: 50%; transform: translateY(-50%) rotate(135deg); }

.bubble-top {
  left: 50%;
  bottom: calc(100% + 12px);
  top: auto;
  transform: translateX(-50%);
  white-space: normal;
  width: max-content;
  max-width: min(300px, 74vw);
  text-align: center;
  line-height: 1.45;
}

.bubble-top::after { left: 50%; bottom: -7px; transform: translateX(-50%) rotate(45deg); }

/* guide vignettes need headroom for the bubble above Pip */
.sprite-guide { margin-top: 58px; }

/* the hero peek Pip narrates in multiple lines */
.mascot-peek .bubble {
  white-space: normal;
  width: max-content;
  max-width: 240px;
  text-align: left;
  line-height: 1.45;
  top: -6px;
}

/* Typewriter dialog: an invisible span holds the full line for sizing;
   the visible span types over it with a blinking pixel caret. */
.bubble .b-size { visibility: hidden; }

.bubble .b-type {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 4px;
  bottom: 4px;
  text-align: inherit;
}

.bubble .b-type::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 10px;
  margin-left: 2px;
  vertical-align: -1px;
  background: var(--ink);
  animation: caret-blink 0.7s steps(1, end) infinite;
}

.bubble .b-type.done::after { display: none; }

@keyframes caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Empty-meter chip beside the out-of-usage Pip: the product panel at 0% */
.meter-chip {
  position: absolute;
  right: calc(100% + 12px);
  top: 6px;
  width: 138px;
  display: block;
  background: var(--dark);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 9px 10px;
  font-family: var(--font-mono);
  text-align: left;
  line-height: 1;
}

.mc-top {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--dark-muted);
  margin-bottom: 7px;
}

.mc-top b { color: var(--accent); font-weight: 600; }

.mc-bar { display: block; width: 100%; height: 7px; margin-bottom: 7px; }

.mc-sub { display: block; font-size: 9.5px; color: var(--dark-faint); }

/* the drained session meter, unbound like the terminal */
.term-free { right: calc(100% + 100px); }

.term-free.meter-free { top: 4px; width: 150px; }

.mf-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--ink);
  margin-bottom: 6px;
}

.mf-top b { font-size: 18px; color: var(--accent-deep); }

.meter-free .mc-bar { display: block; width: 100%; height: 8px; margin-bottom: 6px; }

/* the old ritual: typing the usage command over and over — unbound
   mono text, no card */
.term-free {
  position: absolute;
  top: 96px;
  right: calc(100% + 12px);
  width: max-content;
  font-family: var(--font-mono);
  text-align: left;
  line-height: 1.2;
}

.term-line {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
}

.term-cmd {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  animation: term-type 2.4s steps(5, end) infinite;
}

.term-line::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 15px;
  margin-left: 3px;
  vertical-align: -2px;
  background: currentColor;
  animation: caret-blink 0.7s steps(1, end) infinite;
}

.term-note {
  display: block;
  font-size: 11px;
  color: var(--faint);
}

@keyframes term-type {
  0% { width: 0ch; }
  55% { width: 5ch; }
  100% { width: 5ch; }
}

.screen img { width: 100%; height: auto; display: block; }

/* ---------------- Sections ---------------- */

.section-head { text-align: center; max-width: 720px; margin: 0 auto var(--space-5); }

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.45rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: var(--space-2);
}

.section-head p { color: var(--muted); font-size: 1.06rem; line-height: 1.65; }

/* ---------------- Features / bento ---------------- */

.features { padding: var(--space-6) var(--space-2) var(--space-7); }

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  max-width: 1060px;
  margin: 0 auto;
}

.card {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-md);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }

.card-viz {
  height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--dark);
  border: 2px solid var(--ink);
  color: var(--dark-ink);
  padding: 0 22px;
  overflow: hidden;
}

.card-viz .heatmap-card { align-self: center; }

.card-viz-num { align-items: flex-start; }

.big-num {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.big-num em {
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  color: var(--dark-faint);
  margin-left: 6px;
  letter-spacing: 0;
}

.card h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }

.card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* ---------------- Hairline (dissolving bar) ---------------- */

.hairline { display: block; width: 200px; height: 8px; }

.hairline svg { display: block; width: 100%; height: 100%; }

.hairline-card { width: 100%; height: 12px; }

@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.hairline svg .hl-solid { animation: breathe 4.5s ease-in-out infinite; }

/* ---------------- Heatmap ---------------- */

.heatmap {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 11px);
  grid-auto-columns: 11px;
  gap: 3px;
  justify-content: space-between;
  width: 100%;
}

.heatmap i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 2.5px;
  background: rgba(255, 255, 255, 0.06);
}

.heatmap i.q1 { background: rgba(255, 122, 69, 0.18); }
.heatmap i.q2 { background: rgba(255, 122, 69, 0.34); }
.heatmap i.q3 { background: rgba(255, 122, 69, 0.52); }
.heatmap i.q4 { background: rgba(255, 138, 92, 0.8); }

.heatmap-card {
  width: auto;
  justify-content: center;
  grid-template-rows: repeat(7, 8px);
  grid-auto-columns: 8px;
  gap: 2.5px;
}

.heatmap-card i { width: 8px; height: 8px; border-radius: 2px; }

/* ---------------- Privacy band (dark strip) ---------------- */

.privacy {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: var(--dark-ink);
  padding: var(--space-6) var(--space-2);
  text-align: center;
}

.privacy-inner {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 5vw, 64px);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.privacy-word {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.privacy-note {
  font-family: var(--font-mono);
  color: #fff;
  max-width: 580px;
  margin: 0 auto;
  font-size: 12.5px;
  line-height: 1.8;
}

/* ---------------- Pricing ---------------- */

.pricing {
  border-top: 2px solid var(--ink);
  padding: var(--space-7) var(--space-2);
}

.price-wrap { position: relative; max-width: 430px; margin: 104px auto 0; }

.pc-mascot { position: absolute; top: -82px; right: 20px; width: 76px; }

.price-card {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4) var(--space-3);
  box-shadow: var(--shadow-lg);
}

.pc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: var(--space-3);
}

.pc-head img { border-radius: 6px; border: 1.5px solid var(--ink); }

.pc-price {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-3);
}

.pc-once {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  margin-left: 10px;
}

.pc-list { list-style: none; margin-bottom: var(--space-3); }

.pc-list li {
  position: relative;
  padding: 9px 0 9px 32px;
  font-size: 14.5px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.pc-list li:last-child { border-bottom: none; }

.pc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background:
    var(--accent)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23141310" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>')
    center / 10px no-repeat;
}

.pc-btn { width: 100%; justify-content: center; }

/* attention wiggle, fired once shortly after the card scrolls in —
   the border and shadow flash accent while it shakes */
.price-card.wiggle { animation: card-wiggle 0.9s ease-in-out 1; }

@keyframes card-wiggle {
  0%, 100% { transform: rotate(0); border-color: var(--ink); box-shadow: var(--shadow-lg); }
  15% { transform: rotate(-1.6deg); border-color: var(--accent-deep); box-shadow: 10px 10px 0 var(--accent-deep); }
  35% { transform: rotate(1.4deg); border-color: var(--accent-deep); box-shadow: 10px 10px 0 var(--accent-deep); }
  55% { transform: rotate(-1deg); border-color: var(--accent-deep); box-shadow: 10px 10px 0 var(--accent-deep); }
  75% { transform: rotate(0.6deg); border-color: var(--ink); box-shadow: var(--shadow-lg); }
}

.pc-fine {
  font-family: var(--font-mono);
  margin-top: var(--space-3);
  text-align: center;
  color: var(--faint);
  font-size: 11.5px;
  line-height: 1.7;
}

.pricing-roadmap {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  max-width: 480px;
  margin: var(--space-4) auto 0;
}

/* ---------------- FAQ ---------------- */

.faq {
  border-top: 2px solid var(--ink);
  padding: var(--space-7) var(--space-2);
}

.faq .section-head { margin-bottom: var(--space-4); }

/* headroom so the floating bubbles clear their scenes */
.faq .sprite-center, .features .sprite-center { margin-top: 46px; }

/* the stacked chips reach below the sprite; keep the headline clear */
.features .sprite-center { margin-bottom: 72px; }

.faq-list { max-width: 680px; margin: 0 auto; }

.faq-list details {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 150ms ease;
}

.faq-list details[open] { box-shadow: 6px 6px 0 var(--accent-deep); }

.faq-list summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: 17px 20px;
  font-weight: 700;
  font-size: 15.5px;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-x {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 180ms ease;
}

.faq-x::before, .faq-x::after {
  content: "";
  position: absolute;
  background: var(--ink);
  border-radius: 2px;
}

.faq-x::before { left: 0; right: 0; top: 6px; height: 2.5px; }
.faq-x::after { top: 0; bottom: 0; left: 5.75px; width: 2.5px; }

.faq-list details[open] .faq-x { transform: rotate(45deg); }

.faq-list details[open] summary { color: var(--accent-deep); }

.faq-list details[open] .faq-x::before,
.faq-list details[open] .faq-x::after { background: var(--accent-deep); }

.faq-list details p {
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 600px;
}

/* ---------------- Footer ---------------- */

.footer { background: var(--ink); color: var(--dark-ink); border-top: 2px solid var(--ink); }

.footer-mark { position: relative; padding: var(--space-5) 12px 0; overflow: hidden; }

/* the letterforms are dithered natively: an SVG halftone pattern
   fills the type (see #markdither in the markup) */
.mark-text {
  position: relative;
  display: block;
}

/* As Pip runs he draws an orange highlight behind the letters — its
   edge tracks his position exactly, so it fills outbound and drains on
   the way back. Sits under the SVG text: letters knock out in cream. */
.burn-highlight {
  position: absolute;
  left: -4%;
  top: 34%;
  bottom: 8%;
  width: 0;
  background: url("assets/hl-fill.png") left top / 48px 48px repeat;
  image-rendering: pixelated;
  pointer-events: none;
  animation: highlight-sweep 34s linear infinite;
}

/* the highlight's leading edge dissolves in ordered dither */
.burn-highlight::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  width: 120px;
  background: url("assets/hl-edge.png") left top / 120px 24px repeat-y;
  image-rendering: pixelated;
}

@keyframes highlight-sweep {
  0% { width: 0; }
  44% { width: 104.5%; }
  49% { width: 104.5%; }
  100% { width: 0; }
}

/* Pip marches across the wordmark, leaving a cooling ember trail on the
   letter tops. Both animations share one stepped timeline so the trail's
   hot edge always ends right at his feet. */
.footer-pip {
  position: absolute;
  left: -4%;
  bottom: 57%;
  --flip: 0.5s;
  transform-origin: 50% 100%;
  animation: pip-walk 34s linear infinite;
}

/* Constant runner's gait: the sprite frames themselves bounce, layered
   over the terrain path so the whole run feels springy. */
.footer-pip img { animation-name: sprite-a, pip-gait; animation-duration: var(--flip), 0.5s; animation-timing-function: steps(1, end), ease-in-out; animation-iteration-count: infinite, infinite; }
.footer-pip img:nth-of-type(2) { animation-name: sprite-b, pip-gait; }

@keyframes pip-gait {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-5px); }
  65% { transform: translateY(-1px); }
}

/* Ping-pong across BURNRATE: a straight springy run along the letter
   tops, two bounce-jumps at the E, flip, and run back. `left`
   interpolates linearly across each leg. The un-flip at 100% happens
   off-screen past the left edge. */
@keyframes pip-walk {
  0% { left: -4%; transform: none; }
  /* two springy bounce-jumps at the E */
  44% { left: 94%; transform: none; }
  44.4% { transform: translateY(3px) scaleY(0.8); animation-timing-function: ease-out; }
  45.2% { transform: translateY(-28px) scaleY(1.1); animation-timing-function: ease-in; }
  46% { transform: translateY(2px) scaleY(0.82); animation-timing-function: ease-out; }
  46.8% { transform: translateY(-20px) scaleY(1.08); animation-timing-function: ease-in; }
  47.6% { transform: translateY(2px) scaleY(0.85); }
  48.2% { transform: none; }
  49% { left: 94%; transform: scaleX(-1); }
  100% { left: -4%; transform: scaleX(-1); }
}

.burn-trail {
  position: absolute;
  left: -4%;
  bottom: 57%;
  height: 12px;
  width: 0;
  pointer-events: none;
  background: url("assets/trail-r.png") right center no-repeat;
  image-rendering: pixelated;
  animation: trail-grow 34s linear infinite;
}

/* Return-leg trail: anchored at his turnaround point by the E, grows
   leftward tight behind him, dissolving toward the turnaround. */
.burn-trail-b {
  left: auto;
  right: 3%;
  background: url("assets/trail-l.png") left center no-repeat;
  animation-name: trail-return;
}

/* Outbound trail mirrors pip-walk out (hot edge at his feet), holds
   through the bounces, then cools and fades while he runs back. */
@keyframes trail-grow {
  0% { width: 0; opacity: 1; }
  44% { width: 99.5%; }
  49% { width: 99.5%; opacity: 1; }
  62% { width: 99.5%; opacity: 0; }
  62.1% { width: 0; opacity: 0; }
  100% { width: 0; opacity: 1; }
}

@keyframes trail-return {
  0% { width: 101%; opacity: 1; }
  12% { width: 101%; opacity: 0; }
  12.1% { width: 0; opacity: 1; }
  49% { width: 0; }
  100% { width: 101%; opacity: 1; }
}

.footer-mark svg { width: 100%; height: auto; display: block; }

.footer-mark text {
  font-family: var(--font-display);
  font-size: 128px;
  font-weight: 800;
  letter-spacing: -0.01em;
  fill: url(#markdither);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  margin-top: var(--space-5);
}

.fg-cell { padding: var(--space-4) var(--space-3); border-left: 1px solid var(--line-dark); }

.fg-cell:first-child { border-left: none; }

.fg-brand-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.fg-brand-top img { border-radius: 7px; }

.fg-brand p { color: var(--dark-faint); font-size: 13.5px; line-height: 1.65; max-width: 300px; }

.fg-cell h4 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--dark-faint);
  margin-bottom: var(--space-2);
}

.fg-links a {
  display: block;
  color: var(--dark-muted);
  font-size: 14.5px;
  padding: 6px 0;
  transition: color 120ms ease;
}

.fg-links a:hover { color: var(--dark-ink); }

.fg-cta p { color: var(--dark-muted); font-size: 13.5px; margin-bottom: var(--space-2); }

.footer .btn {
  border-color: var(--dark-ink);
  box-shadow: 4px 4px 0 rgba(245, 242, 233, 0.35);
}

.footer .btn:hover { box-shadow: 5px 5px 0 rgba(245, 242, 233, 0.35); }

.footer .btn:active { box-shadow: 1px 1px 0 rgba(245, 242, 233, 0.35); }

.footer-base {
  font-family: var(--font-mono);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3);
  color: var(--dark-faint);
  font-size: 11.5px;
}

/* ---------------- Reveal on scroll ---------------- */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 650ms ease, transform 650ms ease; }

.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hairline svg .hl-solid { animation: none; }
  .btn, .card, .faq-list details { transition: none; }
  .mascot-peek { animation: none; }
  .mascot-peek .abduct-ufo, .mascot-peek .abduct-beam, .mascot-peek img.green { display: none; }
  .brella-pip { display: none; }
  .sprite img { animation: none; }
  .sprite-tri img:nth-child(1), .sprite-tri img:nth-child(2), .sprite-tri img:nth-child(3) { animation: none; }
  .sprite-quad img:nth-child(1), .sprite-quad img:nth-child(2), .sprite-quad img:nth-child(3), .sprite-quad img:nth-child(4) { animation: none; }
  img.det-dog-1, img.det-dog-2 { animation: none; }
  .pc-mascot .bubble, .pc-mascot .bubble::after { animation: none; }
  .sprite img.prop-cursor { animation: none; }
  .sprite img.cab-1, .sprite img.cab-2 { animation: none; }
  .money-fall { animation: none; opacity: 0; }
  .sprite-alarm img:nth-of-type(1), .sprite-alarm img:nth-of-type(2) { animation: none; }
  .sprite-det img:nth-of-type(1), .sprite-det img:nth-of-type(2) { animation: none; }
  .prop-prints { animation: none; }
  .bonk-fx { animation: none; }
  .term-cmd, .term-line::after { animation: none; }
  .sprite img:not(.prop):nth-of-type(n+2) { opacity: 0; }
  .footer-pip { animation: none; left: auto; right: 10%; }
  .footer-pip img, .footer-pip img:nth-of-type(2) { animation: none; }
  .burn-highlight { display: none; }
  .burn-trail { display: none; }
  .flames .flame img:nth-child(n) { animation: none; }
}

/* ---------------- Responsive ---------------- */

@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .fg-cell { border-top: 1px solid var(--line-dark); }
  .fg-cell:nth-child(-n+2) { border-top: none; }
  .fg-cell:nth-child(odd) { border-left: none; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .hero { padding-top: 104px; }
  .mascot-peek { top: -68px; right: 5%; }
  .mascot-peek img { width: 72px; }
  .pc-mascot { top: -70px; right: 10px; }
  .pc-mascot img { width: 64px; }
  .bubble { font-size: 10.5px; }
  /* on mobile, section-guide bubbles stack above Pip so the tour reads
     like a character walking you through */
  .sprite-center .bubble-left, .sprite-center .bubble-right {
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(100% + 12px);
    transform: translateX(-50%);
    white-space: normal;
    width: max-content;
    max-width: 74vw;
    text-align: center;
    line-height: 1.45;
  }
  .sprite-center .bubble-left::after, .sprite-center .bubble-right::after {
    left: 50%;
    right: auto;
    top: auto;
    bottom: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
  .sprite-center { margin-top: 54px; }
  .bento { grid-template-columns: 1fr; }
  .features, .privacy, .pricing, .faq { padding-top: var(--space-6); padding-bottom: var(--space-6); }

  /* scenery props hang far outside their little centered scenes; on a
     phone they'd widen the page and knock it off center. Clip the
     sections, drop the far office dressing, and give Pip a patrol
     that ends at the cabinet instead of the (hidden) library. */
  .features, .faq, .pricing { overflow-x: clip; }
  .sprite img.prop-shelf, .sprite img.prop-plant, .sprite img.prop-trash, .paper-ball { display: none; }

  /* the shorter mobile hero puts the desktop UFO offsets behind the
     nav; drop the saucers down to flank the app icon instead
     (inline positions need the important) */
  .sky-sprites .sky-ufo:nth-child(1) { top: 118px !important; }
  .sky-sprites .sky-ufo:nth-child(2) { top: 96px !important; }

  @keyframes pip-patrol {
    0% { transform: translate(-92px, 0) rotate(0); animation-timing-function: steps(1, end); }
    16% { transform: translate(-92px, 0) rotate(0); animation-timing-function: steps(5, end); }
    22% { transform: translate(0, 0) rotate(0); animation-timing-function: steps(1, end); }
    26% { transform: translate(0, 0) rotate(0); animation-timing-function: steps(8, end); }
    33% { transform: translate(0, 0) rotate(360deg); animation-timing-function: steps(1, end); }
    40% { transform: translate(0, 0) rotate(360deg); animation-timing-function: steps(5, end); }
    46% { transform: translate(92px, 0) rotate(360deg); animation-timing-function: steps(1, end); }
    82% { transform: translate(92px, 0) rotate(360deg); animation-timing-function: steps(8, end); }
    100% { transform: translate(-92px, 0) rotate(360deg); }
  }
  .price-card { padding: var(--space-3); }
  .footer-grid { grid-template-columns: 1fr; }
  .fg-cell { border-left: none; border-top: 1px solid var(--line-dark); }
  .fg-cell:first-child { border-top: none; }
  .footer-base { flex-direction: column; }
}

/* ---------------- Lights on (privacy dark room) ---------------- */

.tilt-wrap { display: inline-block; }

/* full-bleed dithered light layer behind the section's content */
.lights-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  z-index: 0;
}

.privacy > :not(.lights-stage):not(.world-bg) { position: relative; z-index: 1; }

/* scene anchor: reserves the room the canvas scene plays in */
.sniff-scene {
  display: block;
  width: min(92vw, 720px);
  height: 220px;
  margin: 0 auto;
}

.sniff-scene .bubble-top { left: 50%; }
.bubble-manual { visibility: hidden; }
.bubble-manual.b-on { visibility: visible; }
.bubble-manual.b-small { transform: translateX(-50%) scale(0.65); }

/* the speaking pulse: any bubble mid-type breathes its hard shadow */
.bubble.speaking { animation: bubble-speak 0.6s steps(1, end) infinite; }

@keyframes bubble-speak {
  0%, 49.9% { box-shadow: 3px 3px 0 rgba(20, 19, 16, 0.9); }
  50%, 100% { box-shadow: 5px 5px 0 var(--accent); }
}

/* headlines step dim -> tan -> cream on ring boundaries, JS-armed so
   no-JS and reduced-motion read fully lit */
.lights-armed .privacy-word { color: rgba(245, 242, 233, 0.16); }
.lights-armed .privacy-word.w-tan { color: #f8d6b5; }
.lights-armed .privacy-word.w-lit { color: var(--dark-ink); }

/* x-ray micro-labels beside the mascot during the pass-through beat */
.xray-label {
  position: absolute;
  left: calc(50% + 64px);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #8fbbd1;
  visibility: hidden;
  white-space: nowrap;
}

.xl-1 { top: 34%; }
.xl-2 { top: 50%; }
.xl-3 { top: 66%; }
.xray-label.on { visibility: visible; }

/* x-ray mode: annotations, toggle button, film-frame cursor */
.privacy .xr-note {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #8fbbd1;
  visibility: hidden;
  white-space: nowrap;
}

.xr-note.on { visibility: visible; }

.privacy .xr-btn {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 2;
  background: none;
  border: 1px solid rgba(245, 242, 233, 0.3);
  border-radius: 6px;
  color: #8fbbd1;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 5px 9px;
  cursor: pointer;
}

.xr-btn[aria-pressed="true"] { color: var(--dark-ink); border-color: #8fbbd1; }

.privacy.xr-zone {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect x="1" y="3" width="14" height="10" fill="%23141310" stroke="%23f5f2e9"/><rect x="3" y="5" width="2" height="2" fill="%23f5f2e9"/><rect x="11" y="5" width="2" height="2" fill="%23f5f2e9"/><rect x="3" y="9" width="2" height="2" fill="%23f5f2e9"/><rect x="11" y="9" width="2" height="2" fill="%23f5f2e9"/><rect x="7" y="7" width="2" height="2" fill="%238fbbd1"/></svg>') 8 8, crosshair;
}

/* ---------------- The Descent: strata foundation ---------------- */

/* static terrain textures live behind every section's content */
.world-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  z-index: 0;
  pointer-events: none;
}

.features, .pricing, .faq { position: relative; }

.features > :not(.world-bg),
.pricing > :not(.world-bg),
.faq > :not(.world-bg) { position: relative; z-index: 1; }

/* survey markers on the left shaft wall */
.survey-label {
  position: absolute;
  left: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(20, 19, 16, 0.48);
}

.survey-label.on-dark { color: rgba(245, 242, 233, 0.42); }

.survey-label:hover { color: var(--accent-deep); }

.survey-label.on-dark:hover { color: var(--accent); }

/* the page is a Burnrate meter for itself: the menu-bar hairline
   turned vertical, filling as you descend */
.depth-rail {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 300px;
  z-index: 90;
  pointer-events: none;
}

.depth-track {
  position: absolute;
  inset: 0;
  background: rgba(20, 19, 16, 0.16);
  outline: 1px solid rgba(245, 242, 233, 0.25);
}

.depth-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--accent);
  border-bottom: 2px solid var(--accent-deep);
}

.depth-read {
  position: absolute;
  top: calc(100% + 10px);
  right: -2px;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(20, 19, 16, 0.55);
  white-space: nowrap;
}

/* hero tagline: the thesis of the descent */
.hero-under {
  font-family: var(--font-mono);
  color: var(--faint);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* the hazard sign's mono caption on the radiation shaft wall */
.privacy .rad-caption {
  position: absolute;
  left: 14px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(245, 242, 233, 0.4);
  max-width: 90px;
}

/* ARCHIVE: FAQ rows behave as book spines — hover pulls the spine
   out, open slides it off the shelf. Stepped, no easing. */
.faq-list details { transition: transform 0.12s steps(2, end); }
.faq-list details:hover { transform: translateX(3px); }
.faq-list details[open] { transform: translateX(9px); }

/* CORE content rides above the melt canvas, and the footer keeps a
   clear band at the bottom so the magma never sits behind text */
.footer > :not(.world-bg) { position: relative; z-index: 1; }
.footer { position: relative; padding-bottom: 72px; }

@media (max-width: 768px) {
  .depth-rail { right: 4px; height: 190px; }
  .survey-label { left: 8px; }
  .privacy .rad-caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-list details { transition: none; }
}

/* ---------------- The fuse (footer wordmark meter) ---------------- */

.fuse-stage {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.fuse-label {
  position: absolute;
  top: -18px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--dark-ink);
  white-space: nowrap;
}

/* Pip's landing presses the button in, same feel as a real click */
.footer .btn.pip-pressed {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 rgba(245, 242, 233, 0.35);
}

/* the umbrella float-out rides over the footer as its own layer */
.brella-pip {
  position: absolute;
  z-index: 60;
  pointer-events: none;
}

.brella-pip img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  animation: sprite-a 0.8s steps(1) infinite;
}

.brella-pip img + img {
  position: absolute;
  left: 0;
  top: 0;
  animation-name: sprite-b;
}