@font-face {
  font-family: "Chivo";
  src: url("/fonts/Chivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* HKC – Horse Killing Coffee · pre-launch site
   Hero: taste-skill "counter object" (product centred like a watch counter), chosen because the client asked for
   the tin as the centred highlight with the action beneath it. Layout system: one container, one spacing scale,
   one section rhythm, five type sizes (impeccable layout pass). */

:root {
  --bg: #0b0b0c;
  --surface: #141416;
  --surface-2: #1c1c1f;
  --ink: #ebeae6;
  --muted: #a8a196;
  --accent: #ff6a1f;
  --accent-ink: #0b0b0c;
  --bad: #ff5a4e;
  --bone: #e7e5e0;
  --bone-ink: #0b0b0c;

  /* type: five sizes */
  --t-small: 0.9375rem;
  --t-body: 1.125rem;
  --t-lead: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  --t-head: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
  --t-display: clamp(3.5rem, 1rem + 8vw, 8rem);

  /* spacing scale (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-6: 1.5rem;
  --s-8: 2rem; --s-12: 3rem; --s-16: 4rem; --s-24: 6rem; --s-32: 8rem;
  --section: clamp(6rem, 3rem + 7vw, 10rem);
  --margin: clamp(1.25rem, 3vw, 2.5rem);
  --max: 80rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: #3a3a3f var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Chivo", system-ui, sans-serif; font-size: var(--t-body); line-height: 1.55; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { margin: 0; font-weight: 900; letter-spacing: -0.03em; line-height: 1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
table { font-variant-numeric: tabular-nums; }

.container { width: min(100% - 2 * var(--margin), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section); }
.head { display: grid; gap: var(--s-3); margin-bottom: var(--s-8); }
.head h2 { font-size: var(--t-head); }
.head p { color: var(--muted); max-width: 52ch; }
.fine { margin-top: var(--s-6); color: var(--muted); font-size: var(--t-small); max-width: 70ch; }

/* ---------- Buttons (one shape: square) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3rem; padding: 0 var(--s-6);
  background: var(--accent); color: var(--accent-ink);
  font: 900 var(--t-small)/1 "Chivo", sans-serif; letter-spacing: -0.005em; text-decoration: none;
  border: 0; border-radius: 0; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms;
}
.btn:hover { background: #ff8340; transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--big { min-height: 3.75rem; padding: 0 var(--s-8); font-size: var(--t-body); }
.btn--ink { background: var(--bone-ink); color: var(--bone); }
.btn--ink:hover { background: #26262a; }
.link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.link:hover { color: var(--accent); }
.link-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; padding: var(--s-2) 0; }
.link-btn:hover { color: var(--accent); }
.link-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- Announcement + navigation (laid over the top of the scene) ---------- */
.top { position: absolute; inset: 0 0 auto; z-index: 30; }
.announce { color: var(--muted); text-align: center; font-size: var(--t-small); font-weight: 700; padding: var(--s-2) var(--margin); background: var(--surface); }
.nav { display: flex; align-items: center; gap: var(--s-8); padding-block: var(--s-4); position: relative; }
.nav__mark { display: flex; align-items: center; gap: var(--s-3); margin-right: auto; font-size: var(--t-lead); font-weight: 900; letter-spacing: 0.32em; text-decoration: none; }
.logo { width: auto; height: 3rem; }
.nav__mark:hover .logo, .legal__home:hover .logo { animation: tremble 0.12s linear 4; }
.nav__links { display: flex; align-items: center; gap: var(--s-6); font-size: var(--t-small); font-weight: 700; }
.nav__links a { text-decoration: none; padding: var(--s-3) 0; transition: color 160ms; }
.nav__links a:hover { color: var(--accent); }
.nav__links .nav__lang { color: var(--muted); padding-inline: var(--s-2); margin-inline: calc(-1 * var(--s-2)); }
.nav__menu { display: none; }

/* ---------- Hero: one scene in planes (stone wall, tin, scoop on slate, flying beans and dust).
   Scrolling on, the wall falls away, the lid flies off and the tin empties itself into the air. ---------- */
.hero { position: relative; --top: 7.25rem; }
.hero__pin { position: relative; height: 100svh; min-height: 38rem; display: flex; flex-direction: column; overflow: clip; }
.hero__scene { position: relative; flex: 1 1 0; min-height: 15rem; margin-top: var(--top); container-type: size; }
.hero__art { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 1376 / 768; transform: translateX(-50%); }
.hero__far, .hero__mid, .hero__group { position: absolute; inset: 0; }
.hero__plate, .hero__group img { width: 100%; height: 100%; }
.hero__group { pointer-events: none; }
.hero__tin { position: absolute; left: calc(460 / 1376 * 100%); top: calc(70 / 768 * 100%); width: calc(458 / 1376 * 100%); height: calc(630 / 768 * 100%); }
.hero__tin-in { position: absolute; inset: 0; }
/* a hand slams the shaker onto the slate right of the scoop (in the still's 1376 x 768 pixels): it drops,
   speeding up, lands at 78 % and settles; hero.js throws the water off the slate at that moment */
.hero__slam { position: absolute; left: calc(1001 / 1376 * 100%); top: calc(72 / 768 * 100%); width: calc(382 / 1376 * 100%); pointer-events: none; transform-origin: 30% 100%; }
.hero__slam img { width: 100%; height: auto; }
.js .hero__slam { opacity: 0; }
.js .hero.is-slam .hero__slam { animation: slam-drop 600ms both; }
@keyframes slam-drop {
  0% { opacity: 0; transform: translateY(-120%) rotate(-6deg); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.35); }
  12% { opacity: 1; }
  78% { opacity: 1; transform: translateY(0) rotate(0); animation-timing-function: var(--ease-out); }
  86% { transform: translateY(-1.2%) rotate(0.6deg) scaleY(1.01); }
  100% { opacity: 1; transform: none; }
}
.hero__body { position: absolute; left: 0; top: calc(84 / 630 * 100%); width: 100%; height: calc(546 / 630 * 100%); }
.hero__lid { position: absolute; left: 0; top: 0; width: 100%; height: calc(90 / 630 * 100%); transform-origin: 50% 100%; z-index: 2; }
.hero__sheen { position: absolute; left: 1%; right: 1%; top: 1%; bottom: 3%; overflow: hidden; border-radius: 4% / 2.5%; mix-blend-mode: screen; pointer-events: none; z-index: 3; }
.hero__sheen i { position: absolute; top: -10%; bottom: -10%; left: 0; width: 20%; background: rgba(255, 255, 255, 0.2); filter: blur(22px); transform: translateX(-180%) skewX(-12deg); }
.hero__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.hero__copy { position: relative; z-index: 6; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: calc(-1 * var(--s-6)); padding-bottom: var(--s-8); }
.hero__title { font-size: var(--t-head); }
.hero__lead { margin-top: var(--s-3); color: var(--muted); font-size: var(--t-lead); line-height: 1.35; max-width: 34ch; }
.hero__row { margin-top: var(--s-6); display: flex; align-items: center; justify-content: center; gap: var(--s-12); }
/* the next free tin number sits on the hero button like a sticker and counts up live */
.hero__cta { position: relative; }
.hero__no { position: absolute; top: -0.95rem; right: -1.1rem; padding: var(--s-1) var(--s-3); background: var(--bone); color: var(--bone-ink); border: 3px solid var(--bone-ink); font-size: var(--t-small); font-weight: 900; line-height: 1.2; white-space: nowrap; rotate: 6deg; pointer-events: none; }
.hero__no.is-new { animation: pop 380ms var(--ease-spring) both; }
.hero__play { margin-top: var(--s-2); color: var(--muted); font-size: var(--t-small); }

/* the two notes beside the tin; the art is 1376/768 as wide as the scene is high and the tin's side sits
   29.5% of that height from the centre, so they hug the tin at every desktop size */
.hero__note { position: absolute; top: 36%; z-index: 3; display: grid; gap: var(--s-1); max-width: 14rem; }
.hero__note b { font-size: var(--t-lead); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.hero__note span { font-size: var(--t-small); font-weight: 700; color: var(--muted); }
.hero__note--l { left: var(--margin); right: calc(50% + 29.5cqh + var(--s-8)); margin-left: auto; justify-items: end; text-align: right; }
.hero__note--l b { color: var(--accent); }
/* both notes sit left of the tin, the second under the first: right of the tin the shaker gets slammed down */
.hero__note--r { top: calc(36% + 7rem); left: var(--margin); right: calc(50% + 29.5cqh + var(--s-8)); margin-left: auto; justify-items: end; text-align: right; }
@media (max-width: 1024px) { .hero__note b { font-size: var(--t-body); } }
@media (min-width: 721px) { .hero__facts { display: none; } }

/* opening: the scene comes up out of the dark once its layers have loaded */
.js .hero__plate { opacity: 0; transform: scale(1.12); transition: opacity 1.4s var(--ease-out), transform 2.4s var(--ease-out); }
.js .hero__tin-in { opacity: 0; transform: translateY(6%) scale(0.96); filter: brightness(0.2); transition: opacity 0.9s var(--ease-out) 0.15s, transform 1.5s var(--ease-out) 0.15s, filter 1.6s var(--ease-out) 0.25s; }
.js .hero__group img { opacity: 0; transition: opacity 1.1s var(--ease-out) 0.35s; }
.js .hero__copy > * { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.js .hero__copy > :nth-child(1) { transition-delay: 0.55s; }
.js .hero__copy > :nth-child(2) { transition-delay: 0.65s; }
.js .hero__copy > :nth-child(3) { transition-delay: 0.75s; }
.js .hero__copy > :nth-child(4) { transition-delay: 0.85s; }
.js .hero__note { opacity: 0; transition: opacity 0.9s var(--ease-out) 1s, transform 0.9s var(--ease-out) 1s; }
.js .hero__note--l { transform: translateX(-24px); }
.js .hero__note--r { transform: translateX(-24px); }
.js .hero.is-on .hero__plate, .js .hero.is-on .hero__group img, .js .hero.is-on .hero__copy > *, .js .hero.is-on .hero__note { opacity: 1; transform: none; }
.js .hero.is-on .hero__tin-in { opacity: 1; transform: none; filter: none; }
.hero.is-on .hero__sheen i { animation: sheen 7.5s var(--ease-out) 1.1s infinite; }
@keyframes sheen { 0% { transform: translateX(-180%) skewX(-12deg); } 26%, 100% { transform: translateX(620%) skewX(-12deg); } }

/* clickable X eyes on the tin (no hint: they are found) */
/* placed by their centre; never smaller than a thumb, whatever size the picture is drawn at */
.eye-spot { position: absolute; z-index: 5; width: max(var(--w, 10%), 2.75rem); aspect-ratio: 1; translate: -50% -50%; border: 0; border-radius: 50%; padding: 0; margin: 0; background: transparent; cursor: pointer; }
.eye-spot:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
.eye-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; overflow: visible; }
.eye-white { fill: #f4f2ec; stroke: #0b0b0c; stroke-width: 3; }
.eye-x { stroke: #0b0b0c; stroke-width: 5; stroke-linecap: round; }
.eye-spring { stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.eye-spring--shadow { stroke: #0b0b0c; stroke-width: 8; }
.eye-socket { fill: #0b0b0c; stroke: var(--ink); stroke-width: 2; }

/* full-screen eye pop when jumping to a section */
.pop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; pointer-events: none; }
.pop svg { width: min(86vw, 46rem); overflow: visible; }

/* ---------- Comparison: a fight poster. HKC in the orange corner, the rest in the dark one, "VS" in between.
   The pricing page's picked plan uses the same offset block, here in bone behind the orange card. ---------- */
#vergleich .head { justify-items: center; text-align: center; }
#vergleich .head p { max-width: 46ch; color: var(--ink); }
.tape {
  --vs: clamp(6.5rem, 4rem + 4vw, 8.5rem);
  display: grid; grid-template-columns: minmax(0, 1.5fr) calc(var(--vs) * 0.5) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-8);
  align-items: center; max-width: 72rem; margin: 0 auto; padding-top: var(--s-12);
}
.fighter { position: relative; display: grid; rotate: var(--tilt, 0deg); }
.fighter--1 { --tilt: -1.5deg; z-index: 1; }
.fighter--1::before { content: ""; position: absolute; inset: 0; translate: 12px 12px; background: var(--bone); }
.fighter--2 { --tilt: 1.2deg; }
.fighter--3 { --tilt: -0.8deg; }
.fighter__card { position: relative; display: grid; align-content: start; gap: var(--s-6); padding: var(--s-6); background: var(--surface); border: 3px solid #3a3a3f; }
.fighter--1 .fighter__card { padding: var(--s-8); background: var(--accent); color: var(--accent-ink); border: 4px solid var(--bone-ink); }
.fighter__name { font-size: var(--t-lead); line-height: 1.1; color: var(--bone); }
.fighter--1 .fighter__name { font-size: clamp(3rem, 1.5rem + 4.4vw, 5.5rem); color: var(--accent-ink); letter-spacing: -0.04em; }
.fighter__tin { position: absolute; top: calc(var(--s-16) * -1); right: calc(var(--s-6) * -1); width: clamp(6rem, 3.5rem + 5vw, 9.5rem); height: auto; rotate: 9deg; }
.fighter__stats { margin: 0; display: grid; gap: var(--s-3); }
.fighter__name span { white-space: nowrap; }
.fighter--1 .fighter__stats { grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-6); }
.stat { display: grid; justify-items: start; gap: var(--s-2); }
.stat dd { order: -1; }
.stat dt { font-size: var(--t-small); font-weight: 700; line-height: 1.3; color: var(--muted); }
.stat dd { margin: 0; display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-body); font-weight: 900; line-height: 1.2; }
.stat.is-bad dd span { color: var(--muted); font-weight: 700; }
.stat .mark { flex: none; width: 1.15rem; height: 1.15rem; }
.stat .mark--yes { color: var(--accent); }
.stat .mark--no { color: var(--bad); }
.fighter--1 .stat dt { color: var(--accent-ink); }
.fighter--1 .stat dd { font-size: clamp(1.75rem, 1rem + 1.7vw, 2.5rem); line-height: 1; white-space: nowrap; letter-spacing: -0.03em; }
.tape__vs { position: relative; z-index: 2; width: var(--vs); max-width: none; margin-inline: calc(var(--vs) / -4); rotate: -10deg; overflow: visible; }
.tape__vs polygon { fill: var(--bone); stroke: var(--bone-ink); stroke-width: 4; stroke-linejoin: round; }
.tape__vs text { font-family: inherit; font-size: 46px; font-weight: 900; letter-spacing: -0.04em; fill: var(--bone-ink); }
.js .tape__vs.reveal { transform: scale(2.4); transition: opacity 200ms linear, transform 520ms var(--ease-spring); transition-delay: var(--d, 0ms); }
.js .tape__vs.reveal.is-in { transform: none; }
.inside { margin: var(--s-8) auto 0; max-width: 46rem; display: grid; gap: var(--s-2); text-align: center; text-wrap: balance; font-size: var(--t-lead); line-height: 1.35; }
#vergleich .fine { margin-inline: auto; max-width: 62ch; text-align: center; text-wrap: balance; }
.inside b { font-weight: 900; }
.inside s { color: var(--muted); text-decoration-color: var(--accent); text-decoration-thickness: 0.12em; }

/* ---------- Story: the horse comic on a hazard-orange print field. Panels slam in one after another, the
   page jolts on the hits, the sound words burst out of the frames, the last panel never stops buzzing. ---------- */
.comic {
  position: relative; z-index: 1; overflow-x: clip; padding-block: var(--section); color: var(--ink);   /* BAM may hang over the next section */
  /* the same concrete wall, lit in hazard orange: the colour arrives as light, and fades to black at every edge */
  background: var(--bg) url("/img/wall-orange.jpg") center / cover no-repeat;
}
.comic__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-6); margin-bottom: var(--s-24); }
.comic__title {
  font-size: var(--t-display); line-height: 0.9; letter-spacing: -0.05em; text-transform: uppercase; max-width: 11ch;
  color: var(--bone); -webkit-text-stroke: 0.06em var(--bone-ink); paint-order: stroke fill;   /* comic lettering: reads on the lit and the dark parts of the wall */
}
.comic__tag { flex: none; padding: var(--s-2) var(--s-4); background: var(--bone-ink); color: var(--bone); font-weight: 900; transform: rotate(-4deg); }
.comic__strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); align-items: center; }
.panel { position: relative; rotate: var(--tilt, 0deg); transition: scale 220ms var(--ease-out); }
.panel:hover { scale: 1.03; }
.panel--1 { --tilt: -2.5deg; } .panel--2 { --tilt: 2deg; } .panel--3 { --tilt: -1.5deg; }
.panel--4 { --tilt: 2.5deg; scale: 1.12; z-index: 2; }
.panel--4:hover { scale: 1.15; }
/* a solid ink block behind each panel, offset like a misregistered print */
.panel::before { content: ""; position: absolute; inset: 0; translate: 10px 10px; background: var(--bone-ink); }
.panel__in { position: relative; aspect-ratio: 1; overflow: hidden; border: 4px solid var(--bone-ink); background: var(--bone-ink); }
.panel__in img { width: 100%; height: 100%; object-fit: cover; }
.panel__cap { position: absolute; left: -6px; top: -14px; z-index: 3; padding: var(--s-1) var(--s-3); background: var(--bone); color: var(--bone-ink); border: 3px solid var(--bone-ink); font-size: var(--t-small); font-weight: 900; rotate: -3deg; }
.panel__say {
  position: absolute; z-index: 3; left: 6%; bottom: 7%; max-width: 78%; padding: var(--s-2) var(--s-4);
  background: var(--bone); color: var(--bone-ink); border: 3px solid var(--bone-ink); border-radius: 1.4rem;
  font-size: var(--t-small); font-weight: 900; line-height: 1.15; text-transform: uppercase;
}
/* the bubble's tail: a small drawn triangle whose open base sits on the bubble's edge */
.panel__say::after {
  content: ""; position: absolute; left: 1.2rem; top: -13px; width: 22px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M2 16 L8 2 L20 16' fill='%23e7e5e0' stroke='%230b0b0c' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
}
.panel__sfx {
  position: absolute; z-index: 4; right: -8%; top: -10%; color: var(--bone); font-size: var(--t-head); font-weight: 900; font-style: italic;
  letter-spacing: -0.04em; line-height: 1; rotate: -10deg; -webkit-text-stroke: 3px var(--bone-ink); paint-order: stroke fill;
}
.panel--1 .panel__sfx { right: auto; left: -6%; top: 46%; rotate: -14deg; }
.panel--2 .panel__say::after { left: auto; right: 1.4rem; }
.panel--3 .panel__say { left: auto; right: 5%; }
.panel--4 .panel__say { left: 34%; top: -9%; bottom: auto; rotate: 3deg; }
.panel--4 .panel__say::after { top: auto; bottom: -13px; rotate: 180deg; }
.panel--4 .panel__sfx { top: auto; bottom: -12%; right: -10%; font-size: var(--t-display); rotate: -8deg; color: var(--bone); }
.bolt { position: absolute; z-index: 3; width: 2.4rem; fill: var(--bone); stroke: var(--bone-ink); stroke-width: 2; }
.bolt--1 { left: -1.6rem; top: 8%; rotate: -20deg; }
.bolt--2 { right: -1.4rem; top: 30%; rotate: 15deg; width: 1.8rem; }
.bolt--3 { left: 14%; top: -2.4rem; rotate: -8deg; width: 1.6rem; }

/* the sequence: runs once when the comic comes into view (JS adds .is-live) */
.js .comic .panel { opacity: 0; }
.js .comic .panel__cap, .js .comic .panel__say, .js .comic .panel__sfx, .js .comic .bolt { opacity: 0; }
.comic.is-live .panel { animation: slam 520ms var(--ease-spring) calc(var(--i) * 420ms) both; }
.comic.is-live .panel__cap, .comic.is-live .panel__say { animation: pop 380ms var(--ease-spring) calc(var(--i) * 420ms + 300ms) both; }
.comic.is-live .panel__sfx { animation: burst 460ms var(--ease-spring) calc(var(--i) * 420ms + 180ms) both; }
.comic.is-live .comic__strip { animation: jolt 260ms linear 1150ms, jolt 340ms linear 1570ms; }
.comic.is-live .panel--4 .panel__in img { animation: buzz 90ms linear 1900ms infinite; }
.comic.is-live .bolt { animation: pop 300ms var(--ease-spring) 1600ms both, flicker 1.2s steps(2, jump-none) 1900ms infinite; }
.comic.is-live .bolt--2 { animation-delay: 1700ms, 2100ms; }
.comic.is-live .bolt--3 { animation-delay: 1800ms, 2300ms; }
@keyframes slam {
  0% { opacity: 0; transform: translateY(-60px) scale(1.5) rotate(calc(var(--tilt) * -4)); }
  60% { opacity: 1; transform: translateY(4px) scale(0.97) rotate(0deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes pop { 0% { opacity: 0; transform: scale(0.2); } 100% { opacity: 1; transform: none; } }
@keyframes burst { 0% { opacity: 0; transform: scale(2.6) rotate(-12deg); } 100% { opacity: 1; transform: none; } }
@keyframes jolt {
  0%, 100% { transform: none; } 20% { transform: translate(-8px, 5px) rotate(-0.4deg); }
  40% { transform: translate(7px, -4px) rotate(0.4deg); } 60% { transform: translate(-5px, 3px); } 80% { transform: translate(3px, -2px); }
}
@keyframes buzz { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1px, 1px); } 50% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, -1px); } }
@keyframes flicker { 0% { opacity: 1; } 50% { opacity: 0.25; } 100% { opacity: 1; } }

/* ---------- The whole page stands on the concrete wall from the hero. Each dark section carries the wall under
   its own soft spot, full-bleed behind its content; the plate fades into the page black at every edge, so one
   section melts into the next instead of meeting it at a line. ---------- */
.wall { position: relative; isolation: isolate; }
.wall::before {
  content: ""; position: absolute; z-index: -1; inset: 0 auto; left: 50%; width: 100vw; translate: -50% 0;
  background: var(--bg) url("/img/wall-dark.jpg") center / cover no-repeat; pointer-events: none;
}

/* ---------- Scoop / Shake / Go: three verbs stacked huge, next to the hoof slam as a framed comic panel with an
   orange print offset. The verbs slam in one by one and the panel takes the hit when GO lands. ---------- */
.ritual { width: min(100% - 2 * var(--margin), var(--max)); margin-inline: auto; padding-block: calc(var(--section) * 0.5) var(--section); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-12); align-items: center; }
.ritual__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.ritual__steps b { display: block; font-size: var(--t-display); font-weight: 900; letter-spacing: -0.05em; line-height: 0.85; text-transform: uppercase; }
.ritual__steps li:last-child b { color: var(--accent); }
.ritual__steps p { margin-top: var(--s-3); max-width: 32ch; }
.ritual__img { position: relative; margin: 0; rotate: 1.5deg; }
.ritual__img::before { content: ""; position: absolute; inset: 0; translate: 14px 14px; background: var(--accent); }
.ritual__panel { position: relative; aspect-ratio: 1; overflow: hidden; border: 4px solid var(--bone); background: var(--bone-ink); }
.ritual__panel img { width: 100%; height: 100%; object-fit: cover; }
.ritual__img .panel__sfx { right: 3%; top: 3%; font-size: var(--t-head); rotate: -9deg; }
.js .ritual__steps li, .js .ritual__img .panel__sfx { opacity: 0; }
.ritual.is-live .ritual__steps li { animation: slam-x 520ms var(--ease-spring) calc(var(--i) * 260ms) both; }
.ritual.is-live .ritual__panel img { animation: impact 700ms var(--ease-out) 760ms both; }
.ritual.is-live .ritual__img .panel__sfx { animation: burst 460ms var(--ease-spring) 760ms both; }
@keyframes slam-x { 0% { opacity: 0; transform: translateX(-80px) skewX(-10deg); } 100% { opacity: 1; transform: none; } }
@keyframes impact {
  0% { transform: scale(1.12); } 30% { transform: scale(1.02) translate(-6px, 4px); } 45% { transform: scale(1.03) translate(5px, -3px); }
  60% { transform: scale(1.02) translate(-3px, 2px); } 100% { transform: scale(1); }
}

/* ---------- Price: the bundle stands on the left (tin and shaker side by side, one baseline),
   the offer reads on the right ---------- */
.pricing { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-12); align-items: center; }
.pricing__bundle { margin: 0; }
.pricing__bundle img { width: 100%; height: auto; }
.pricing__line { font-size: var(--t-head); }
.pricing__copy > p { margin-top: var(--s-4); max-width: 44ch; }
.pricing__copy > .pricing__offer { margin-top: var(--s-6); font-size: var(--t-lead); font-weight: 900; letter-spacing: -0.02em; line-height: 1.25; }
.pricing__copy > .pricing__price { margin-top: var(--s-6); display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.pricing__price b { font-size: var(--t-display); font-weight: 900; letter-spacing: -0.05em; line-height: 0.9; color: var(--accent); }
.pricing__price span { color: var(--muted); font-weight: 700; }
.pricing__action { margin-top: var(--s-8); display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.pricing__action .fine { margin: 0; flex-basis: 100%; max-width: 44ch; }

/* ---------- FAQ: question list that opens in place ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); align-items: start; }
.faq h2 { font-size: var(--t-head); }
.faq__video { position: relative; margin: var(--s-8) 0 0; width: min(100%, 10.5rem); rotate: -2deg; }
.faq__video::before { content: ""; position: absolute; inset: 0; translate: 10px 10px; background: var(--accent); }
.faq__frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border: 4px solid var(--bone); background: var(--bone-ink); }
.faq__frame video { width: 100%; height: 100%; object-fit: cover; }
.faq__play { position: absolute; left: 50%; bottom: var(--s-3); translate: -50% 0; white-space: nowrap; border: 3px solid var(--bone); padding: 0 var(--s-3); }
.faq__item { border-bottom: 3px solid var(--surface-2); }
.faq__item:first-child { border-top: 3px solid var(--surface-2); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding-block: var(--s-4); cursor: pointer; list-style: none;
  font-size: var(--t-lead); font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; transition: color 160ms;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }
.faq__item summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.faq__item summary::after {
  content: ""; flex: none; width: 1.25rem; height: 1.25rem; transition: rotate 220ms var(--ease-out);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2v16M2 10h16' stroke='%23ff6a1f' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faq__item[open] summary::after { rotate: 45deg; }
.faq__item p { padding-bottom: var(--s-6); max-width: 60ch; }

/* ---------- Waitlist ---------- */
.cta { padding-block: var(--section); }
.cta__inner { display: grid; grid-template-columns: 6fr 5fr; gap: var(--s-16); align-items: start; }
.cta__title { font-size: var(--t-display); line-height: 0.92; letter-spacing: -0.05em; text-transform: uppercase; }
.cta__text { margin-top: var(--s-8); max-width: 44ch; }
.waitlist { display: grid; gap: var(--s-4); }
.waitlist label.field { display: grid; gap: var(--s-2); font-weight: 700; font-size: var(--t-small); }
.waitlist input[type="email"], .waitlist select {
  min-height: 3.5rem; padding: 0 var(--s-4); border: 2px solid var(--bone); border-radius: 0;
  background: var(--bone); color: var(--bone-ink); font: 400 var(--t-body)/1 "Chivo", sans-serif;
}
.waitlist input::placeholder { color: #5f5b54; }
.waitlist .consent { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-small); line-height: 1.45; }
.waitlist .consent input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--accent); flex: none; }
.waitlist .hp { position: absolute; left: -9999px; }
.waitlist__status { min-height: 1.5em; font-weight: 700; }
.waitlist__status.is-ok { color: var(--accent); }
.waitlist__status.is-err { color: #ff8a7a; }
/* after a sign-up the form gives way to this panel: bone card, ink outline, the orange offset block of the pricing page */
.waitlist__done { position: relative; align-self: center; rotate: -1.2deg; }
.waitlist__done::before { content: ""; position: absolute; inset: 0; translate: 10px 10px; background: var(--accent); }
.waitlist__done:focus { outline: none; }
.waitlist__card { position: relative; display: grid; gap: var(--s-3); padding: var(--s-8); background: var(--bone); color: var(--bone-ink); border: 4px solid var(--bone-ink); }
.waitlist__done-title { font-size: var(--t-head); font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.waitlist__done-text { font-size: var(--t-lead); line-height: 1.35; overflow-wrap: anywhere; }
.js .waitlist__done:not([hidden]) { animation: burst 460ms var(--ease-spring) both; }

/* ---------- Footer: one strip, logo, page links, legal links, then the small print ---------- */
.footer { padding-block: var(--s-12) var(--s-8); }
.footer__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4) var(--s-8); }
.footer__mark { display: flex; align-items: center; gap: var(--s-3); margin-right: auto; font-size: var(--t-lead); font-weight: 900; letter-spacing: 0.32em; text-decoration: none; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); font-size: var(--t-small); font-weight: 700; }
.footer__nav a, .footer__nav .link-btn { padding-block: var(--s-3); text-decoration: none; }
.footer__nav a:hover { color: var(--accent); }
.footer__nav--legal { color: var(--muted); }
.footer__legal { margin-top: var(--s-6); font-size: var(--t-small); color: var(--muted); }
.footer__legal p { max-width: 72ch; }
.footer__legal b { color: var(--accent); }

/* ---------- Intro video dialog ---------- */
.intro { width: min(94vw, calc(88svh * 16 / 9)); max-width: none; max-height: none; padding: 0; border: 0; background: #000; color: var(--ink); overflow: hidden; }
.intro::backdrop { background: rgba(5, 5, 6, 0.9); }
.intro video { display: block; width: 100%; height: auto; background: #000; }
.intro video:focus { outline: none; }
.intro__close { position: absolute; right: var(--s-3); top: var(--s-3); z-index: 2; min-height: 2.75rem; }
@media (max-aspect-ratio: 1/1) { .intro { width: min(94vw, calc(88svh * 9 / 16)); } }
.intro.intro--portrait { width: min(94vw, calc(88svh * 9 / 16)); }

/* ---------- Legal pages ---------- */
.legal__bar { display: flex; justify-content: space-between; align-items: center; padding-block: var(--s-6); }
.legal__home { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-lead); font-weight: 900; letter-spacing: 0.32em; text-decoration: none; }
.legal__main { max-width: 46rem; padding-block: var(--s-12) var(--s-24); }
.legal__main h1 { font-size: var(--t-head); margin-bottom: var(--s-4); }
.legal__main h2 { font-size: var(--t-lead); margin: var(--s-12) 0 var(--s-3); letter-spacing: -0.02em; line-height: 1.15; }
.legal__main p { max-width: 64ch; margin-top: var(--s-3); }
.legal__draft { color: var(--accent); font-weight: 700; }
.tin-no { margin: 0 0 var(--s-6); color: var(--accent); font-size: var(--t-display); font-weight: 900; letter-spacing: -0.05em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.tin-no span { color: var(--muted); font-size: var(--t-head); }
.legal mark { background: var(--accent); color: var(--accent-ink); padding: 0 0.25em; }
.legal .wrap { width: min(100% - 2 * var(--margin), var(--max)); margin-inline: auto; }

/* ---------- Cookie note (only when analytics are configured) ---------- */
.cookie-note {
  position: fixed; z-index: 60; left: var(--margin); right: var(--margin); bottom: var(--margin);
  max-width: 34rem; padding: var(--s-6); background: var(--bone); color: var(--bone-ink); display: grid; gap: var(--s-4);
}
.cookie-note p { font-size: var(--t-small); line-height: 1.45; }
.cookie-note .row { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ---------- Motion ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
@keyframes tremble {
  0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-1.5px, 1px) rotate(-0.4deg); }
  50% { transform: translate(1.5px, -1px) rotate(0.4deg); } 75% { transform: translate(-1px, -1.5px) rotate(0); } 100% { transform: none; }
}
.hero__title:hover { animation: tremble 0.12s linear 4; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero__slam { opacity: 1; animation: none; }
  .js .tape__vs.reveal { transform: none; }
  .js .comic .panel, .js .comic .panel__cap, .js .comic .panel__say, .js .comic .panel__sfx, .js .comic .bolt, .js .ritual__steps li, .js .ritual__img .panel__sfx { opacity: 1; }
}

/* ---------- Pricing page: three comic panels, the recommended one printed on bone ---------- */
.plans-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-12); align-items: end; padding-block: calc(var(--section) + var(--s-8)) var(--s-4); }
.plans-head__img { width: 100%; max-width: 30rem; height: auto; justify-self: end; margin-bottom: calc(-1 * var(--s-12)); }
.plans-head h1 { font-size: var(--t-display); line-height: 0.9; letter-spacing: -0.05em; }
.plans-head__lead { margin-top: var(--s-6); font-size: var(--t-lead); max-width: 46ch; }
.plans-wrap { padding-top: var(--s-12); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-8) var(--s-6) var(--s-6); background: var(--surface); border: 3px solid var(--bone); }
.plan-cell { position: relative; display: flex; }
.plan-cell > .plan { flex: 1; }
.plan-cell--pick { rotate: -1.2deg; }
.plan-cell--pick::before { content: ""; position: absolute; inset: 0; translate: 10px 10px; background: var(--bone-ink); border: 3px solid var(--accent); }
/* the picked plan is solid HKC orange, ink on orange */
.plan--pick { background: var(--accent); color: var(--bone-ink); border: 4px solid var(--bone-ink); }
.plan h2 { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); }
.plan__sub { color: var(--muted); font-weight: 700; }
.plan--pick .plan__sub, .plan--pick .plan__base { color: #2b160a; }
.plan__price { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }
.plan__price b { font-size: clamp(2.75rem, 1.6rem + 3vw, 4.25rem); font-weight: 900; letter-spacing: -0.05em; line-height: 0.9; color: var(--accent); }
.plan--pick .plan__price b { color: var(--bone-ink); }
.plan__price span { font-weight: 700; color: var(--muted); }
.plan--pick .plan__price span { color: #2b160a; }
.plan__per { font-weight: 900; font-size: var(--t-body); }
.plan__base { font-size: var(--t-small); color: var(--muted); }
.plan ul { list-style: none; margin: var(--s-4) 0 var(--s-6); padding: var(--s-4) 0 0; display: grid; gap: var(--s-2); border-top: 2px solid var(--surface-2); }
.plan--pick ul { border-top-color: rgba(11, 11, 12, 0.35); }
.plan li { display: flex; gap: var(--s-2); align-items: flex-start; }
.plan li .mark { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; color: var(--accent); }
.plan--pick li .mark { color: var(--bone-ink); }
.plan .btn { margin-top: auto; width: 100%; }
.plan__img { width: auto; height: 9.5rem; max-width: 100%; object-fit: contain; align-self: center; margin: calc(-1 * var(--s-4)) 0 var(--s-2); }
.refill { margin-top: var(--s-12); padding-block: var(--s-4); border-block: 3px solid var(--surface-2); }
.refill p { max-width: 75ch; }
.refill b { margin-right: var(--s-2); }
.ledger-scroll { overflow-x: auto; }
.ledger { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ledger th, .ledger td { padding: var(--s-4); text-align: right; border-bottom: 2px solid var(--surface-2); white-space: nowrap; }
.ledger th:first-child { text-align: left; white-space: normal; }
.ledger thead th { color: var(--muted); font-size: var(--t-small); font-weight: 700; }
.ledger tbody th { font-weight: 700; }
.ledger tr.is-pick { background: var(--accent); color: var(--accent-ink); }
.ledger tr.is-pick th, .ledger tr.is-pick td { font-weight: 900; border-bottom-color: var(--accent); }
.shaker { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-12); align-items: center; }
.shaker__img { margin: 0; max-width: 16rem; justify-self: center; }
.shaker__img img { width: 100%; height: auto; }
.shaker h2 { font-size: var(--t-head); }
.shaker__copy > p { margin-top: var(--s-4); max-width: 48ch; }
.pricing__more { font-weight: 700; }

@media (max-width: 1024px) {
  .plans-head { grid-template-columns: 1fr; gap: var(--s-6); }
  .plans-head__img { justify-self: start; max-width: 20rem; margin-bottom: 0; }
  .plans { grid-template-columns: 1fr; max-width: 34rem; gap: var(--s-12); }
  .plan-cell--pick { order: -1; }
  .shaker { grid-template-columns: 1fr; gap: var(--s-8); }
  .shaker__img { max-width: 16rem; }
}
@media (max-width: 720px) {
  .plans-head { padding-top: calc(var(--section) + var(--s-8)); }
  .plan { padding-inline: var(--s-4); }
  .plan-cell--pick { rotate: -0.8deg; }
  .plan-cell--pick::before { translate: 6px 6px; }
  .ledger th, .ledger td { padding: var(--s-3) var(--s-2); font-size: var(--t-small); }
  .ledger th:nth-child(4), .ledger td:nth-child(4), .ledger th:nth-child(5), .ledger td:nth-child(5) { display: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .cta__inner, .ritual, .pricing, .faq { grid-template-columns: 1fr; gap: var(--s-12); }
  .pricing__bundle { max-width: 34rem; }
  .ritual { overflow-x: clip; }
  .ritual__img { width: min(100% - var(--s-6), 36rem); }
  .comic__strip { grid-template-columns: 1fr 1fr; gap: var(--s-12) var(--s-8); }
  .tape { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); align-items: stretch; max-width: 46rem; }
  .fighter--1 { grid-column: 1 / -1; }
  .fighter__tin { right: calc(var(--s-2) * -1); }
  .tape__vs { grid-column: 1 / -1; justify-self: center; margin: calc(var(--vs) * -0.4) 0 calc(var(--vs) * -0.25); }
  .panel--4 { scale: 1.04; }
}

/* ---------- Phone: its own composition ---------- */
@media (max-width: 720px) {
  .nav { gap: var(--s-4); }
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; min-height: 2.75rem; }
  .nav__links.is-open { display: grid; position: absolute; top: 100%; left: 0; right: 0; gap: 0; padding: var(--s-4); background: var(--surface); }
  .nav__links.is-open a { padding: var(--s-3) var(--s-2); font-size: var(--t-body); }
  .nav__cta { min-height: 2.75rem; padding: 0 var(--s-4); }
  .hero { --top: 7.5rem; }
  .hero__pin { height: auto; min-height: 100svh; }
  .hero__scene { flex: none; height: clamp(20rem, 50svh, 28rem); }
  .announce__opt { display: none; }
  .hero__scene .hero__note { display: none; }
  .hero__slam { display: none; } /* on a phone the slate right of the tin is outside the frame */
  .hero__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); width: 100%; margin-top: var(--s-6); }
  .hero__facts .hero__note { position: static; max-width: none; margin: 0; }
  .hero__facts .hero__note--l { justify-items: start; text-align: left; }
  .hero__facts .hero__note--r { justify-items: end; text-align: right; }
  .hero__pin { min-height: 34rem; }
  .hero__row { width: 100%; }
  .hero__row .btn { width: 100%; }
  .hero__no { right: var(--s-2); }
  .tape { column-gap: var(--s-3); padding-top: var(--s-16); }
  .fighter--1::before { translate: 8px 8px; }
  .fighter--1 .fighter__card { padding: var(--s-6) var(--s-4); }
  .fighter__card { gap: var(--s-4); padding: var(--s-4) var(--s-3); }
  .fighter__name { font-size: var(--t-body); }
  .fighter__tin { top: calc(var(--s-12) * -1); right: calc(var(--s-2) * -1); }
  .fighter--1 .fighter__stats { gap: var(--s-4) var(--s-3); }
  .stat dd { font-size: var(--t-small); gap: var(--s-1); }
  .stat .mark { width: 1rem; height: 1rem; }
  .ritual__img { margin-right: var(--s-3); }

  .comic__head { gap: var(--s-4); margin-bottom: var(--s-12); }
  .comic__title { font-size: var(--t-head); }
  .comic__strip { grid-template-columns: 1fr; gap: var(--s-12); padding-inline: var(--s-2); }
  .panel--4 { scale: 1; }
  .panel__sfx { right: -2%; }
  .panel--4 .panel__sfx { right: -2%; bottom: -8%; font-size: var(--t-head); }
  .panel--3 .panel__sfx { top: 34%; right: -3%; }
  .pricing__action .btn { width: 100%; text-align: center; }
  .faq__item summary { font-size: var(--t-body); }
  .faq__video { display: none; }
  .footer__row { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .logo { height: 2.5rem; }
  .nav__mark span { display: none; }
}