:root {
  --sky: #8dbee3;
  --sky-deep: #74acd8;
  --ink: #0b0b0b;
  --paper: #f5f5f5;
  --sun: #ffe45c;
  --coral: #ff6f59;
  --line: 2.5px;
  --display: "Bricolage Grotesque", ui-sans-serif, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --bounce: cubic-bezier(.3, 1.6, .5, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Film grain (borrowed from the Stuut playbook) ---------- */
.grain {
  position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;
  pointer-events: none; z-index: 100; opacity: .2; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .5s steps(4) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-1%, 3%); }
}

/* ---------- Announcement ---------- */
.announce {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 38px; padding: 8px 16px;
  background: var(--ink); color: var(--paper);
  font: 500 14px/1.3 var(--display); text-decoration: none; text-align: center;
}
.announce b { color: var(--sun); font-weight: 700; }
.announce .arrow { display: inline-block; transition: transform .25s var(--bounce); }
.announce:hover .arrow { transform: translateX(5px); }

/* ---------- Nav ---------- */
.nav {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 1360px; margin: 0 auto; padding: 18px 40px;
  animation: fadeDown .6s var(--ease-out) backwards;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 27px/1 var(--display); letter-spacing: -.03em; text-decoration: none;
}
.brand svg { width: 38px; height: 36px; transition: transform .4s var(--bounce); }
.brand:hover svg { transform: rotate(-8deg) translateY(-2px); }
.nav-links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font: 600 16px var(--display); text-decoration: none;
  background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 2px no-repeat;
  transition: background-size .3s var(--ease-out); padding-bottom: 3px;
}
.nav-links a:hover { background-size: 100% 2px; }
.nav-actions { display: flex; gap: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border: var(--line) solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink);
  font: 700 16px/1 var(--display); text-decoration: none; cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn-ink { background: var(--ink); color: var(--sun); }
.btn:focus-visible, .signup button:focus-visible, .nav-links a:focus-visible, .brand:focus-visible {
  outline: 3px dashed var(--ink); outline-offset: 4px;
}

/* ---------- Hero ---------- */
.hero-wrap { position: relative; overflow: hidden; }
.hero {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center; gap: 32px;
  max-width: 1360px; margin: 0 auto; padding: 8px 40px 48px;
  min-height: calc(100svh - 38px - 80px - 60px);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  padding: 7px 14px 7px 12px; border: var(--line) solid var(--ink); border-radius: 999px;
  background: var(--paper); font: 600 14px var(--display);
  animation: rise .6s .1s var(--ease-out) backwards;
}
.eyebrow .sep { opacity: .4; }
.eyebrow time { font-variant-numeric: tabular-nums; }
.dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--coral);
  animation: ping 1.6s ease-out infinite;
}
@keyframes ping { to { transform: scale(2.8); opacity: 0; } }

h1 {
  margin: 22px 0 24px;
  font: 800 clamp(44px, 6.2vw, 96px)/.93 var(--display);
  letter-spacing: -.04em;
}
h1 .w { display: inline-block; animation: rise .75s var(--ease-out) backwards; animation-delay: calc(var(--i) * 70ms + 180ms); }
h1 em {
  font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.03em;
  display: inline-block; transition: transform .4s var(--bounce);
}
h1 em:hover { transform: rotate(-4deg) scale(1.04); }
.hl { position: relative; z-index: 0; white-space: nowrap; }
.hl::before {
  content: ""; position: absolute; z-index: -1;
  left: -.08em; right: -.1em; bottom: .02em; height: .46em;
  background: var(--sun); border: var(--line) solid var(--ink);
  transform-origin: left center; transform: scaleX(0) skewX(-10deg);
  animation: swipe .55s 1.05s cubic-bezier(.65, 0, .25, 1) forwards;
}
@keyframes swipe { to { transform: scaleX(1) skewX(-10deg); } }

.lede {
  max-width: 33ch; margin: 0 0 30px;
  font: 400 clamp(18px, 1.55vw, 22px)/1.45 var(--serif);
  animation: rise .7s .75s var(--ease-out) backwards;
}

.signup {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; padding: 8px;
  background: var(--sun); border: var(--line) solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
  animation: popIn .6s .95s var(--bounce) backwards;
}
.signup:focus-within { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.signup input {
  flex: 1 1 140px; min-width: 0; padding: 12px 12px;
  background: transparent; border: 0; border-bottom: 2px solid rgba(11, 11, 11, .35);
  font: 400 18px var(--serif); color: var(--ink); outline: none;
}
.signup input::placeholder { color: rgba(11, 11, 11, .55); font-style: italic; }
.signup input:focus { border-bottom-color: var(--ink); }
.signup button {
  flex: none; padding: 14px 22px; border: var(--line) solid var(--ink);
  background: var(--ink); color: var(--sun); cursor: pointer;
  font: 700 17px/1 var(--display);
  transition: transform .15s ease, background .2s ease;
}
.signup button:hover { transform: rotate(-2deg) scale(1.03); }
.signup.is-done button { background: var(--paper); color: var(--ink); }
.signup button:disabled { cursor: progress; opacity: .7; }
/* Honeypot field for bots, kept off-screen rather than display:none so they still fill it */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 14px 0 0; font: 600 15px/1.4 var(--display); }
.form-status:empty { display: none; }
.signup.shake { animation: shake .4s ease; }
@keyframes shake {
  20%, 60% { transform: translateX(-8px) rotate(-1deg); }
  40%, 80% { transform: translateX(8px) rotate(1deg); }
}

.fineprint {
  margin: 16px 0 0; font: italic 400 15px/1.4 var(--serif); opacity: .78;
  animation: rise .6s 1.15s var(--ease-out) backwards;
}

/* ---------- Clouds ---------- */
.sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cloud {
  position: absolute; left: 0; top: var(--top); width: var(--w); fill: var(--paper); opacity: var(--o, .7);
  animation: drift var(--dur) linear infinite; animation-delay: var(--delay);
}
@keyframes drift {
  from { transform: translateX(-30vw); }
  to { transform: translateX(110vw); }
}

/* ---------- Scene ---------- */
.scene { position: relative; height: min(620px, 72svh); min-height: 500px; }

.bubble {
  position: absolute; z-index: 3; top: 0; left: 0; width: min(380px, 66%);
  padding: 14px 18px 18px; background: var(--paper);
  border: var(--line) solid var(--ink); border-radius: 20px;
  box-shadow: 5px 5px 0 var(--ink);
  transform-origin: 80% 100%;
  animation: popIn .55s 1.5s var(--bounce) backwards;
}
.bubble::before, .bubble::after {
  content: ""; position: absolute; width: 0; height: 0; border-style: solid;
}
/* Tail: ink outline triangle with paper triangle on top */
.bubble::before { right: 54px; bottom: -26px; border-width: 26px 26px 0 0; border-color: var(--ink) transparent transparent; }
.bubble::after { right: 58.5px; bottom: -18px; border-width: 19px 19px 0 0; border-color: var(--paper) transparent transparent; }
.bubble.pop { animation: bubblePop .45s var(--bounce); }
@keyframes bubblePop {
  0% { transform: scale(.9) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
.bubble-meta {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font: 600 13px var(--display); letter-spacing: .02em; text-transform: uppercase; opacity: .7;
}
.bubble-meta svg { width: 16px; height: 16px; }
.bubble-text {
  margin: 0; min-height: 2.3em;
  font: 700 clamp(19px, 1.75vw, 25px)/1.15 var(--display); letter-spacing: -.02em;
}
.caret {
  display: inline-block; width: .5em; height: .9em; margin-left: 2px; vertical-align: -.08em;
  background: var(--ink); animation: caret .9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* Channel chips */
.chip-pos {
  position: absolute; z-index: 2; left: var(--x); top: var(--y); right: var(--r, auto);
  animation: bob var(--bob) ease-in-out infinite alternate; animation-delay: var(--phase);
}
.chip {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 10px 16px 10px 12px; background: var(--paper);
  border: var(--line) solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
  font: 700 16px var(--display); white-space: nowrap;
  transition: transform .3s var(--bounce), background .2s ease, box-shadow .3s var(--bounce);
  animation: popIn .5s var(--bounce) backwards; animation-delay: var(--in);
}
.chip-ico {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--sky); border: 2px solid var(--ink);
}
.chip-ico svg { width: 17px; height: 17px; }
.chip-pos.active .chip { background: var(--sun); transform: translateY(-4px) scale(1.08) rotate(-3deg); box-shadow: 6px 6px 0 var(--ink); }
.chip-pos.active .chip-ico { background: var(--paper); animation: ring .45s ease-in-out infinite; }
.chip-badge {
  position: absolute; top: -12px; right: -10px; padding: 3px 7px;
  background: var(--coral); color: var(--paper); border: 2px solid var(--ink); border-radius: 999px;
  font: 800 12px var(--display); opacity: 0; transform: scale(.4);
}
.chip-pos.done .chip-badge { animation: badge 1.2s var(--bounce); }
@keyframes badge {
  0% { opacity: 0; transform: scale(.4); }
  25%, 70% { opacity: 1; transform: scale(1) rotate(8deg); }
  100% { opacity: 0; transform: translateY(-14px) scale(.9); }
}
@keyframes ring {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-14deg); }
  75% { transform: rotate(14deg); }
}
@keyframes bob { to { transform: translateY(-10px); } }

/* Mascot */
.mascot-float {
  position: absolute; z-index: 2; left: 50%; top: 56%; width: min(52%, 340px);
  translate: -42% -50%;
  animation: float 3.6s ease-in-out infinite;
}
.mascot-drop { animation: drop 1s .55s var(--ease-out) backwards; }
.mascot { display: block; width: 100%; height: auto; overflow: visible; cursor: pointer; transform-origin: 50% 100%; }
.mascot.hop { animation: hop .65s var(--bounce); }
.mascot.squish { animation: squish .5s var(--bounce); }
.eyes { transition: transform .22s var(--ease-out); }
.eye { transform-box: fill-box; transform-origin: center; transition: transform .07s ease; }
.eyes.blink .eye { transform: scaleY(.1); }
.shadow {
  width: 70%; height: 18px; margin: 18px auto 0; border-radius: 50%;
  background: rgba(11, 11, 11, .2);
  animation: shadow 3.6s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-12px); } }
@keyframes shadow { 50% { transform: scaleX(.82); opacity: .7; } }
@keyframes drop {
  0% { transform: translateY(-140%); opacity: 0; }
  45% { transform: translateY(0) scale(1.08, .9); opacity: 1; }
  65% { transform: translateY(-6%) scale(.97, 1.04); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes hop {
  0% { transform: scale(1.1, .88); }
  35% { transform: translateY(-22%) scale(.94, 1.07); }
  65% { transform: translateY(0) scale(1.1, .9); }
  100% { transform: scale(1); }
}
@keyframes squish {
  0% { transform: scale(1); }
  30% { transform: scale(1.12, .86); }
  60% { transform: scale(.95, 1.06); }
  100% { transform: scale(1); }
}

.quip {
  position: absolute; z-index: 4; left: 82%; top: 17%;
  padding: 8px 14px; background: var(--sun); border: var(--line) solid var(--ink); border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink); font: 700 15px var(--display); white-space: nowrap;
  opacity: 0; transform: translate(-50%, 8px) scale(.8); pointer-events: none;
  transition: opacity .2s ease, transform .35s var(--bounce);
}
.quip.show { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(-3deg); }

.tally {
  position: absolute; z-index: 2; left: 54%; bottom: 0; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  font: 600 15px var(--display);
  animation: rise .6s 2s var(--ease-out) backwards;
}
.tally-num {
  display: inline-grid; place-items: center; min-width: 44px; padding: 4px 10px;
  background: var(--paper); border: var(--line) solid var(--ink); border-radius: 10px;
  box-shadow: 2px 2px 0 var(--ink);
  font: 800 20px var(--display); font-variant-numeric: tabular-nums;
}
.tally-num.bump { animation: squish .45s var(--bounce); }

/* ---------- Ticker ---------- */
.ticker {
  position: relative; z-index: 3; overflow: hidden;
  background: var(--ink); color: var(--paper); border-top: var(--line) solid var(--ink);
  height: 60px; display: flex; align-items: center;
}
.ticker-track {
  display: flex; flex: none; gap: 44px; padding-right: 44px;
  animation: marquee 60s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 12px; font: 600 17px var(--display); white-space: nowrap; }
.ticker-item svg { width: 20px; height: 19px; flex: none; }
.tick {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sun); color: var(--ink); font: 800 13px var(--display);
}
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- Confetti ---------- */
.confetti {
  position: absolute; z-index: 10; width: 10px; height: 10px; pointer-events: none;
  border: 2px solid var(--ink); background: var(--c);
  animation: burst .9s var(--ease-out) forwards;
}
@keyframes burst {
  to { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); opacity: 0; }
}

/* ---------- Shared entrances ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-14px); } }
@keyframes popIn {
  from { opacity: 0; transform: scale(.6) rotate(-4deg); }
}

/* ---------- Sections (shared) ---------- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.section { position: relative; padding: clamp(80px, 10vw, 136px) 40px; border-top: var(--line) solid var(--ink); }
.wrap { max-width: 1280px; margin: 0 auto; }
.label {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font: 700 13px var(--display); letter-spacing: .14em; text-transform: uppercase;
}
.label::before { content: ""; width: 9px; height: 9px; background: currentColor; border-radius: 2px; transform: rotate(45deg); }
.h2 { margin: 0; font: 800 clamp(40px, 5.4vw, 78px)/.95 var(--display); letter-spacing: -.04em; }
.h2 em { font-family: var(--serif); font-weight: 500; letter-spacing: -.03em; }
.intro {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: end;
  margin-bottom: 64px;
}
.intro p { margin: 0; max-width: 36ch; font: 400 20px/1.5 var(--serif); }

.js .reveal {
  opacity: 0; translate: 0 28px;
  transition: opacity .7s var(--ease-out), translate .7s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js .reveal.in { opacity: 1; translate: 0 0; }

/* ---------- How it works ---------- */
.how { background: var(--paper); }
.steps {
  --gap: 20px;
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
  padding-top: 84px;
}
.track {
  position: absolute; top: 58px; height: 0; border-top: 3px dashed var(--ink);
  left: calc((100% - 3 * var(--gap)) / 8); right: calc((100% - 3 * var(--gap)) / 8);
}
.walker {
  position: absolute; z-index: 2; top: 2px; width: 60px; translate: -50% 0;
  left: calc((100% - 3 * var(--gap)) / 8 * (2 * var(--step, 0) + 1) + var(--step, 0) * var(--gap));
  transition: left .8s var(--bounce);
}
.walker svg { display: block; width: 100%; height: auto; color: var(--ink); overflow: visible; transform-origin: 50% 100%; }
.walker svg.hop { animation: hop .6s var(--bounce); }
.step {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 22px 22px 22px; background: #fff;
  border: var(--line) solid var(--ink); border-radius: 20px; box-shadow: 4px 4px 0 var(--ink);
  transition: transform .35s var(--bounce), box-shadow .35s var(--bounce), background .25s ease;
}
.step::before {
  content: ""; position: absolute; top: -33px; left: 50%; translate: -50% 0;
  width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink);
  transition: background .25s ease;
}
.step.active { background: var(--sun); transform: translateY(-6px) rotate(-1deg); box-shadow: 7px 7px 0 var(--ink); }
.step.active::before { background: var(--sun); }
.step-num {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--sky); border: var(--line) solid var(--ink); font: 800 15px var(--display);
}
.step h3 { margin: 0; font: 800 28px/1 var(--display); letter-spacing: -.03em; }
.step p { margin: 0; font: 400 17px/1.45 var(--serif); }
.snip {
  display: grid; gap: 7px; margin-top: auto; padding: 12px 14px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 12px;
  font: 600 14px/1.35 var(--display);
}
.snip-row { display: flex; align-items: center; gap: 8px; }
.snip-row svg { width: 16px; height: 16px; flex: none; }
.snip .muted { opacity: .6; font-weight: 500; }
.snip q { font: italic 400 15px/1.35 var(--serif); }
.tag {
  display: inline-block; padding: 2px 9px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--sky); font: 700 12px var(--display);
}
.tag.sun { background: var(--sun); }
.ok {
  display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: var(--ink); color: var(--sun); font: 800 11px var(--display);
}
.how-foot { display: flex; align-items: center; gap: 14px; margin: 56px 0 0; font: italic 400 19px/1.4 var(--serif); }
.how-foot svg { width: 34px; height: 32px; flex: none; color: var(--ink); }

/* ---------- Cases ---------- */
.cases { background: var(--sun); }
.receipts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; align-items: start; }
.receipt-wrap {
  transform: rotate(var(--rot));
  filter: drop-shadow(0 -2px 0 var(--ink)) drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink))
          drop-shadow(0 2px 0 var(--ink)) drop-shadow(6px 6px 0 var(--ink));
  transition: transform .4s var(--bounce);
}
.receipt-wrap:hover { transform: rotate(0) translateY(-8px); }
.receipt {
  --s: 9px;
  position: relative; padding: 22px 20px 38px; background: #fffdf6;
  font: 400 14px/1.45 "DM Mono", ui-monospace, monospace;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--s)) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--s)) 100%;
}
.r-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.r-brand { display: flex; align-items: center; gap: 7px; font: 800 15px var(--display); }
.r-brand svg { width: 20px; height: 19px; }
.r-no { font-size: 12px; opacity: .55; }
.receipt h3 { margin: 18px 0 4px; font: 800 22px/1.05 var(--display); letter-spacing: -.02em; }
.r-addr { margin: 0; font-size: 12px; opacity: .6; }
.cut { margin: 16px 0; border: 0; border-top: 2px dashed rgba(11, 11, 11, .3); }
.r-said { margin: 0 0 6px; font: 700 11px var(--display); letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
.receipt blockquote { margin: 0; font: italic 400 17px/1.35 var(--serif); }
.lines { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.lines li { display: flex; align-items: baseline; }
.lines i { flex: 1; min-width: 12px; margin: 0 6px; border-bottom: 2px dotted rgba(11, 11, 11, .3); translate: 0 -4px; }
.lines b { font-weight: 500; white-space: nowrap; }
.total { display: flex; justify-content: space-between; gap: 10px; }
.total.big { margin-top: 6px; font: 800 20px var(--display); }
.stamp {
  display: block; width: fit-content; margin: 18px auto 0;
  padding: 4px 14px; border: 3px solid var(--coral); border-radius: 8px; color: var(--coral);
  font: 800 22px var(--display); letter-spacing: .1em; mix-blend-mode: multiply;
  transform: rotate(-8deg);
  transition: opacity .2s ease .45s, transform .4s cubic-bezier(.5, 1.8, .5, 1) .45s;
}
.js .receipt-wrap:not(.in) .stamp { opacity: 0; transform: rotate(-8deg) scale(2.4); }
.note { margin: 56px 0 0; font: italic 400 15px var(--serif); opacity: .75; }

/* ---------- Company ---------- */
.company {
  background-color: var(--sky);
  background-image:
    linear-gradient(rgba(11, 11, 11, .07) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(11, 11, 11, .07) 1.5px, transparent 1.5px);
  background-size: 36px 36px;
}
.team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; align-items: start; }
.member:nth-child(even) { margin-top: 48px; }
.member-card {
  padding: 12px 12px 20px; background: var(--paper);
  border: var(--line) solid var(--ink); border-radius: 22px; box-shadow: 5px 5px 0 var(--ink);
  transition: transform .35s var(--bounce), box-shadow .35s var(--bounce);
}
.member-card:hover { transform: translateY(-6px) rotate(-1.5deg); box-shadow: 8px 8px 0 var(--ink); }
.avatar {
  position: relative; aspect-ratio: 1 / .86;
  background: var(--tile); border: var(--line) solid var(--ink); border-radius: 14px;
  transition: background .35s ease;
}
/* Duotone print look: greyscale photo multiplied onto the tile colour, full colour on hover */
.avatar img {
  display: block; width: 100%; height: 100%; border-radius: 11.5px;
  object-fit: cover; object-position: var(--pos, 50% 30%);
  filter: grayscale(1) contrast(1.1) brightness(1.06); mix-blend-mode: multiply;
  transition: filter .35s ease;
}
.member-card:hover .avatar { background: #fff; }
.member-card:hover .avatar img { filter: none; }
.badge {
  position: absolute; right: -12px; bottom: -14px; width: 54px; height: auto;
  color: var(--ink); overflow: visible; transform-origin: 50% 100%;
}
.member-card:hover .badge { animation: hop .6s var(--bounce); }
.member h3 { margin: 16px 6px 3px; font: 800 23px/1.05 var(--display); letter-spacing: -.03em; }
.role { margin: 0 6px 12px; font: 600 14px var(--display); opacity: .6; }
.bio { margin: 0 6px 14px; font: 400 15.5px/1.45 var(--serif); }
.fact {
  margin: 0 6px 16px; padding: 8px 10px; border: 2px dashed var(--ink); border-radius: 10px;
  font: 600 13px/1.35 var(--display);
}
.fact::before { content: "Fun fact · "; opacity: .55; }
.li-link {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 6px; justify-self: start;
  font: 700 14px var(--display); text-decoration: none; border-bottom: 2px solid var(--ink);
}
.li-link:hover { background: var(--sun); }

/* ---------- Outro + footer ---------- */
.outro { overflow: hidden; padding-bottom: 0; background: var(--ink); color: var(--paper); text-align: center; }
.outro p { max-width: 34ch; margin: 20px auto 34px; font: 400 20px/1.5 var(--serif); opacity: .85; }
.btn-sun { background: var(--sun); color: var(--ink); border-color: var(--paper); box-shadow: 4px 4px 0 var(--paper); }
.btn-sun:hover { box-shadow: 6px 6px 0 var(--paper); }
.btn-lg { padding: 16px 26px; font-size: 19px; }
.peek { width: min(320px, 62vw); margin: 72px auto 0; translate: 0 26%; }
.js .peek { translate: 0 75%; transition: translate 1s var(--bounce); }
.js .peek.in { translate: 0 26%; }
.peek svg { display: block; width: 100%; height: auto; color: var(--paper); overflow: visible; }
.peek .eye { fill: var(--ink); }
.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
  padding: 26px 40px; background: var(--ink); color: var(--paper);
  border-top: 2px solid rgba(245, 245, 245, .18); font: 500 14px var(--display);
}
.foot .brand { font-size: 22px; }
.foot .brand svg { width: 30px; height: 28px; color: var(--paper); }
.foot nav { display: flex; flex-wrap: wrap; gap: 24px; }
.foot a { text-decoration: none; opacity: .8; }
.foot a:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 1180px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; }
  .track, .walker, .step::before { display: none; }
  .receipts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin: 0 auto; }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .member:nth-child(even) { margin-top: 0; }
  .member:nth-child(3n + 2) { margin-top: 40px; }
}
@media (max-width: 900px) {
  .section { padding: 72px 16px; }
  .intro { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
  .foot { padding: 22px 16px; }
}
@media (max-width: 640px) {
  .steps, .receipts { grid-template-columns: 1fr; }
  .receipts { max-width: 380px; }
  .team { grid-template-columns: 1fr; }
  .member:nth-child(3n + 2) { margin-top: 0; }
  .member-card { display: grid; grid-template-columns: 108px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .avatar { grid-row: span 5; aspect-ratio: 1; }
  .badge { width: 40px; right: -8px; bottom: -10px; }
  .member h3 { margin-top: 4px; }
  .how-foot { align-items: flex-start; font-size: 17px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav-links { gap: 20px; }
}
@media (max-width: 900px) {
  .nav { padding: 14px 16px; }
  .nav-links, .nav-actions .btn:not(.btn-ink) { display: none; }
  .hero { grid-template-columns: 1fr; padding: 8px 16px 32px; min-height: 0; gap: 12px; }
  .scene { height: 470px; min-height: 0; max-width: 560px; width: 100%; margin: 0 auto; }
  .bubble { width: 78%; }
  .mascot-float { width: min(44%, 220px); top: 58%; }
}
@media (max-width: 520px) {
  .announce { font-size: 13px; }
  .announce b { display: none; }
  .brand { font-size: 23px; }
  .brand svg { width: 32px; height: 30px; }
  .nav-actions .btn { padding: 9px 13px; font-size: 15px; }
  h1 { margin: 18px 0 18px; letter-spacing: -.035em; }
  .signup { flex-direction: column; box-shadow: 5px 5px 0 var(--ink); }
  .signup input { flex-basis: auto; padding: 10px 6px; }
  .scene { height: 430px; }
  .bubble { width: 100%; padding: 12px 14px 14px; }
  .bubble::before { right: 30%; }
  .bubble::after { right: calc(30% + 4.5px); }
  .chip { padding: 7px 11px 7px 8px; font-size: 14px; gap: 7px; }
  .chip-ico { width: 24px; height: 24px; }
  .chip-ico svg { width: 14px; height: 14px; }
  .mascot-float { width: 46%; top: 60%; translate: -50% -50%; }
  .tally { font-size: 13px; left: 50%; }
  .tally-num { font-size: 17px; min-width: 38px; }
  .quip { font-size: 13px; left: 50%; top: 35%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0s !important; transition-duration: .001ms !important;
  }
  .hl::before { transform: scaleX(1) skewX(-10deg); }
  .caret { display: none; }
}