/* =========================================================
   Web Agency Club homepage (the "story" page, live since 2026-10-27)
   Black and white UI, new WAC wordmark, full-colour media.
   Mood board hero that opens up into the VSL on scroll.
   Self-contained: does not share styles.css with the live page.
   ========================================================= */

:root {
  --bg: #000;
  --bg-2: #0b0b0b;
  --bg-3: #151515;
  --fg: #fff;
  --mute: #8c8c8c;
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.22);
  --paper: #efefec;
  --ink: #000;
  --ink-mute: #5d5d5a;
  --ink-line: rgba(0, 0, 0, 0.12);
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --wrap: 1240px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Lenis smooth scroll (story.js) takes over from the native smooth scroll */
html.lenis, html.lenis body { height: auto; }
/* the CSS smooth scroll fights Lenis and cancels jumps, so it goes off */
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
section[id] { scroll-margin-top: 64px; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; } /* width/height attrs are only there to reserve space */
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, .wins-big { text-wrap: balance; }
p, li, figcaption, summary { text-wrap: pretty; }
.nowrap { white-space: nowrap; }
::selection { background: #fff; color: #000; }
.section-light ::selection { background: #000; color: #fff; }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.wrap.narrow { width: min(780px, 100% - 32px); }
.center { text-align: center; }

/* ---------- type ---------- */

.tag {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 1.1rem;
}
.section-light .tag { color: var(--ink-mute); }

.h-big, .wins-big {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.015em;
}
.h-big { font-size: clamp(2.1rem, 5vw, 4.4rem); max-width: 15ch; }
.center .h-big, .h-big.center { margin-inline: auto; }
.lede { color: var(--mute); font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 54ch; margin-top: 1.3rem; }
.section-light .lede { color: var(--ink-mute); }
.lede.center { margin-inline: auto; }

.mono-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mono-label span { color: var(--mute); }

/* ---------- buttons ----------
   Hover: an ink wipe fills the button from the left, the arrow nudges,
   the button lifts a touch. Press: a quick springy squeeze. */

.btn {
  --h: 54px;
  --wipe: #000;
  --wipe-fg: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: var(--h);
  padding: 0 1.5rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0;
  transition: color 0.22s, box-shadow 0.3s, transform 0.35s var(--spring);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wipe);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.38s var(--ease);
}
.btn::after { content: "\2192"; font-family: var(--body); font-weight: 400; transition: transform 0.35s var(--spring); }
@media (hover: hover) {
  .btn:hover { color: var(--wipe-fg); transform: translateY(-2px); }
  .btn:hover::before { transform: scaleX(1); transform-origin: left; }
  .btn:hover::after { transform: translateX(5px); }
}
.btn:active { transform: translateY(0) scale(0.96); transition-duration: 0.08s; }
.btn-sm { --h: 40px; padding: 0 1rem; font-size: 0.7rem; }
.btn-sm::after { display: none; }
.btn-white { background: #fff; color: #000; }
.btn-white:hover { box-shadow: inset 0 0 0 1px #fff, 0 10px 34px rgba(255, 255, 255, 0.16); }
.btn-dark { --wipe: #fff; --wipe-fg: #000; background: #000; color: #fff; }
.btn-dark:hover { box-shadow: inset 0 0 0 1px #000, 0 12px 30px rgba(0, 0, 0, 0.18); }
.btn-line { --wipe: #fff; --wipe-fg: #000; box-shadow: inset 0 0 0 1px var(--line-2); color: #fff; }
.btn-line:hover { box-shadow: inset 0 0 0 1px #fff, 0 10px 34px rgba(255, 255, 255, 0.12); }
.btn-line-dark { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); color: #000; }
.btn-line-dark:hover { box-shadow: inset 0 0 0 1px #000, 0 12px 30px rgba(0, 0, 0, 0.14); }
.btn-full { width: 100%; }
.btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
/* "Copy" buttons pop and tick when the brief lands on the clipboard */
.btn.is-copied { animation: pop 0.45s var(--spring); }
.btn.is-copied::after { content: "\2713"; display: inline; }
@keyframes pop { 40% { transform: scale(1.07); } }
.btn:focus-visible, .files li:focus-visible, summary:focus-visible, .rail:focus-visible, .rail-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------- progress + nav ---------- */

.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--read, 0)); mix-blend-mode: difference; }

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0 max(16px, calc((100vw - var(--wrap)) / 2));
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
/* frosted layer lives on a pseudo so it never traps fixed children */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.3s;
}
.nav.is-solid { border-color: var(--line); }
.nav.is-solid::before { opacity: 1; }
.nav-logo { display: block; color: #fff; }
.nav-logo svg { display: block; width: 100px; height: auto; }
.nav-links { display: flex; gap: 1.8rem; }
.nav-links a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mute);
  transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }
.nav-actions { display: flex; gap: 0.6rem; align-items: center; justify-self: end; }

@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
}
@media (max-width: 700px) {
  .nav { height: 60px; }
  .nav-logo svg { width: 76px; }
  .nav-actions .btn-line { display: none; }
}

/* =========================================================
   HERO: mood board that opens up into the VSL (pinned, scroll driven)
   JS sets --t (tiles), --h (copy) and --v (video) from 0 to 1.
   ========================================================= */

.board { position: relative; height: 300vh; }
.board-stick {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(70% 60% at 50% 60%, #161616, #000 70%);
}

.tile {
  position: absolute;
  z-index: 1;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 60px rgba(0, 0, 0, 0.6);
  transform:
    translate(calc(var(--dx) * var(--t, 0) * 1vw), calc(var(--dy) * var(--t, 0) * 1vh))
    rotate(var(--r))
    scale(calc(1 + var(--t, 0) * 0.3));
  opacity: calc(1 - var(--t, 0) * 1.3);
  will-change: transform, opacity;
  animation: tile-in 0.9s var(--ease) both;
}
@keyframes tile-in { from { opacity: 0; translate: 0 40px; } }
/* tiles sit beside and below the video, never behind the headline */
.t1 { left: 3vw; top: 45%; width: 11vw; --r: -4deg; --dx: -40; --dy: -10; animation-delay: 0.05s; }
.t3 { left: 16.5vw; top: 41%; width: 9vw; --r: 3deg; --dx: -30; --dy: -20; animation-delay: 0.2s; }
.t4 { left: 4.5vw; top: 73%; width: 11.5vw; --r: 2deg; --dx: -40; --dy: 30; animation-delay: 0.3s; }
.t2 { left: 19vw; top: 72%; width: 8.5vw; --r: -3deg; --dx: -25; --dy: 35; animation-delay: 0.4s; }
.t5 { right: 3vw; top: 41%; width: 10vw; --r: 3deg; --dx: 40; --dy: -20; animation-delay: 0.1s; }
.t6 { right: 16.5vw; top: 45%; width: 9vw; --r: -3deg; --dx: 30; --dy: -10; animation-delay: 0.25s; }
.t7 { right: 4.5vw; top: 72%; width: 12vw; --r: -2deg; --dx: 40; --dy: 30; animation-delay: 0.35s; }
.t8 { right: 19vw; top: 74%; width: 8.5vw; --r: 4deg; --dx: 25; --dy: 35; animation-delay: 0.45s; }

.hero-copy {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 14%;
  width: min(1240px, 100% - 32px);
  text-align: center;
  transform: translate(-50%, calc(var(--h, 0) * -70px));
  opacity: calc(1 - var(--h, 0));
}
.hero-copy .tag { color: #bdbdbd; margin-bottom: 1.4rem; }
.hero-big {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-size: clamp(2.2rem, 4.6vw, 5rem);
  text-wrap: balance;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
}
.hero-sub { margin: 1.4rem auto 0; max-width: 54ch; color: #cfcfcf; font-size: clamp(1rem, 1.3vw, 1.2rem); }
/* each sentence gets its own line, so "We show you how" never hangs off the end */
.hero-sub span { display: block; text-wrap: balance; }

/* The video grows by width (not scale) so the player controls stay crisp */
.vsl {
  --w0: min(460px, 32vw);
  --w1: min(66vw, (100svh - 150px) * 1.6);
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(63% - var(--v, 0) * 9%);
  width: calc(var(--w0) + (var(--w1) - var(--w0)) * var(--v, 0));
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  background: #111;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 40px 100px rgba(0, 0, 0, 0.8);
}
.vsl-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vsl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.6)); pointer-events: none; transition: opacity 0.3s; }
.vsl.is-playing::after { opacity: 0; }

.vsl-start {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(12px, 2vw, 22px);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
}
.vsl-label { display: flex; gap: 8px; padding: 6px 10px; background: rgba(0, 0, 0, 0.55); text-shadow: none; }
.vsl-label em { font-style: normal; color: #bdbdbd; font-weight: 500; }
.vsl-play { width: 62px; height: 62px; flex: none; background: #fff; display: grid; place-items: center; transition: transform 0.3s var(--ease); }
.vsl-play::after { content: ""; border-left: 16px solid #000; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 5px; }
.vsl-play { transition: transform 0.35s var(--spring); }
.vsl-start:hover .vsl-play { transform: scale(1.12); }
.vsl-start:active .vsl-play { transform: scale(0.94); transition-duration: 0.08s; }
.vsl.is-playing .vsl-start { display: none; }
.vsl-loop, .vp-poster { z-index: 1; transition: opacity 0.4s; }
.vsl.is-started .vsl-loop, .is-started > .vp-poster { opacity: 0; pointer-events: none; }
.video-facade .vp-poster { position: absolute; inset: 0; }
.video-facade.has-player:hover img { transform: none; }

/* ---------- custom player ----------
   .vp-stage holds the iframe or video, fitted to the video's own shape
   (--ar) inside whatever box it sits in, full screen included.
   YouTube's iframe is drawn 3x taller so its title and logo get cropped. */

.vsl, .video-facade { --ar: 1.7778; container-type: size; }
.t-card .video-facade, .feat-reel .video-facade { --ar: 0.5625; }
.vp-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100cqw, 100cqh * var(--ar));
  height: min(100cqh, 100cqw / var(--ar));
  transform: translate(-50%, -50%);
  overflow: hidden;
  pointer-events: none;
  background: #000;
}
.vp-stage iframe, .vp-stage video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }
.vp-stage.is-yt iframe { top: -100%; height: 300%; }
.vsl:fullscreen, .video-facade:fullscreen { width: 100% !important; height: 100% !important; top: 0; left: 0; transform: none; border-radius: 0; aspect-ratio: auto; background: #000; }
.video-facade.has-player { cursor: default; }
.video-facade.has-player:hover img { transform: none; }

.vp { position: absolute; inset: 0; z-index: 2; }
.vp-hit { position: absolute; inset: 0; cursor: pointer; }
.vp-hit:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.vp-big {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  display: grid;
  place-items: center;
  background: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s, transform 0.4s var(--spring);
}
.vp-big::after { content: ""; border-left: 16px solid #000; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.vp.is-paused .vp-big { opacity: 1; transform: none; }
.vp.is-paused .vp-hit:hover .vp-big { transform: scale(1.1); }
.vp.is-paused .vp-hit:active .vp-big { transform: scale(0.94); transition-duration: 0.08s; }
.vp.is-loading .vp-big { opacity: 1; transform: none; width: 44px; height: 44px; margin: -22px 0 0 -22px; background: none; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; border-radius: 50%; animation: spin 0.75s linear infinite; }
.vp.is-loading .vp-big::after { display: none; }
@keyframes spin { to { rotate: 360deg; } }

.vp-sound {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 10px;
  background: #fff;
  color: #000;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: pop-in 0.45s var(--spring);
  transition: transform 0.3s var(--spring);
}
.vp-sound:hover { transform: scale(1.05); }
.vp-sound[hidden] { display: none; }
.vp-sound .ico-sound { position: relative; display: block; width: 14px; height: 14px; filter: invert(1); }
@keyframes pop-in { from { opacity: 0; transform: scale(0.7); } }

.vp-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 8px 0 4px;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: #fff;
  transition: opacity 0.3s, transform 0.35s var(--ease);
}
.vp.is-idle .vp-bar { opacity: 0; transform: translateY(8px); }
.vp.is-idle { cursor: none; }
.vp-btn { position: relative; width: 38px; height: 38px; display: grid; place-items: center; flex: none; transition: background 0.15s, transform 0.3s var(--spring); }
.vp-btn:hover { background: rgba(255, 255, 255, 0.14); }
.vp-btn:active { transform: scale(0.88); transition-duration: 0.06s; }
.vp-btn[hidden] { display: none; }
.vp-btn i { position: relative; display: block; width: 14px; height: 14px; }
.ico-pause::before, .ico-pause::after { content: ""; position: absolute; top: 0; width: 4px; height: 14px; background: #fff; }
.ico-pause::before { left: 2px; } .ico-pause::after { right: 2px; }
.ico-play { width: 0 !important; height: 0 !important; border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.ico-sound::before { content: ""; position: absolute; left: 0; top: 4px; width: 5px; height: 6px; background: #fff; }
.ico-sound::after { content: ""; position: absolute; left: 3px; top: 0; border-right: 7px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.vp-mute::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 20px; margin: -10px 0 0 -1px; background: #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.7); transform: rotate(-45deg) scaleY(0); transition: transform 0.25s var(--spring); }
.vp-mute.is-muted::after { transform: rotate(-45deg) scaleY(1); }
.ico-full { border: 2px solid #fff; border-radius: 1px; -webkit-mask: linear-gradient(#000 0 0) top left / 5px 5px no-repeat, linear-gradient(#000 0 0) top right / 5px 5px no-repeat, linear-gradient(#000 0 0) bottom left / 5px 5px no-repeat, linear-gradient(#000 0 0) bottom right / 5px 5px no-repeat; mask: linear-gradient(#000 0 0) top left / 5px 5px no-repeat, linear-gradient(#000 0 0) top right / 5px 5px no-repeat, linear-gradient(#000 0 0) bottom left / 5px 5px no-repeat, linear-gradient(#000 0 0) bottom right / 5px 5px no-repeat; }
.vp-btn:hover .ico-full { transform: scale(1.15); }
.ico-full { transition: transform 0.3s var(--spring); }
.vp-time, .vp-dur { font-variant-numeric: tabular-nums; color: #cfcfcf; min-width: 3.2em; }
.vp-dur { text-align: right; }
.vp-track { position: relative; flex: 1; height: 26px; cursor: pointer; touch-action: none; }
.vp-track::before, .vp-fill { position: absolute; left: 0; top: 12px; height: 2px; transition: height 0.15s, top 0.15s; }
.vp-track::before { content: ""; right: 0; background: rgba(255, 255, 255, 0.25); }
.vp-fill { width: var(--pct, 0%); background: #fff; }
.vp-fill::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: #fff; transform: scale(0.75); transition: transform 0.25s var(--spring); }
.vp-track:hover::before, .vp-track:hover .vp-fill, .vp.is-seeking .vp-track::before, .vp.is-seeking .vp-fill { top: 11px; height: 4px; }
.vp-track:hover .vp-fill::after, .vp.is-seeking .vp-fill::after { transform: scale(1.15); }

/* volume: the slider slides out of the speaker button on hover */
.vp-vol { display: flex; align-items: center; }
.vp-range {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 26px;
  margin: 0;
  opacity: 0;
  background: transparent;
  cursor: pointer;
  transition: width 0.3s var(--ease), opacity 0.2s, margin 0.3s var(--ease);
}
.vp-vol:hover .vp-range, .vp-vol:focus-within .vp-range { width: 74px; margin: 0 8px 0 2px; opacity: 1; }
.vp-range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, #fff var(--vol, 100%), rgba(255, 255, 255, 0.25) 0); }
.vp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px; background: #fff; border: 0; }
.vp-range::-moz-range-track { height: 2px; background: rgba(255, 255, 255, 0.25); }
.vp-range::-moz-range-progress { height: 2px; background: #fff; }
.vp-range::-moz-range-thumb { width: 10px; height: 10px; background: #fff; border: 0; border-radius: 0; }
@media (hover: none) { .vp-range { display: none; } }

/* small vertical cards: keep only the essentials */
@container (max-width: 340px) {
  .vp-bar { left: 6px; right: 6px; bottom: 6px; gap: 2px; height: 40px; padding: 0 4px 0 2px; }
  .vp-time, .vp-dur, .vp-range { display: none; }
  .vp-btn { width: 34px; height: 34px; }
  .vp-sound { left: 8px; top: 8px; }
  .vp-big { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
}

.hero-foot {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 12px;
  opacity: calc(1 - var(--h, 0) * 1.4);
}
.hero-foot p { text-align: center; white-space: nowrap; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.board.is-late .hero-foot { pointer-events: none; }

/* Short laptop screens (1366x768 and the like): smaller headline, the
   video sits a little lower and starts smaller so it never covers the sub */
@media (min-width: 701px) and (max-height: 780px) {
  .hero-copy { top: 11%; }
  .hero-copy .tag { margin-bottom: 1rem; }
  .hero-big { font-size: clamp(2rem, min(4.6vw, 7.4svh), 5rem); }
  .hero-sub { margin-top: 1rem; }
  .vsl { --w0: min(460px, 32vw, (100svh - 420px) * 1.78); top: calc(66% - var(--v, 0) * 12%); }
  .hero-foot { bottom: 3%; gap: 8px; }
}

/* Laptops and up: one paragraph balanced over two even lines */
@media (min-width: 901px) {
  .hero-sub { max-width: 60ch; text-wrap: balance; }
  .hero-sub span { display: inline; }
}

/* Phones: copy, video and button stack in normal flow (so short and tall
   screens both fit). The video starts a little smaller with 4 tiles
   tucked behind its corners, like the laptop layout. On scroll the tiles
   fly out, the copy lifts away and the video grows into the middle of
   the screen (story.js measures --vt0/--vb0/--vl0/--vr0 and --vshift). */
@media (max-width: 700px) {
  .board { height: 190vh; }
  .board-stick {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(26px, 4svh, 40px);
    padding: 72px 16px 22px;
  }
  .br-wide { display: none; }
  .hero-copy, .vsl, .hero-foot { position: relative; left: auto; top: auto; bottom: auto; }
  .hero-copy { width: 100%; transform: translateY(calc(var(--h, 0) * -40px)); }
  .hero-copy .tag { margin-bottom: 0.9rem; }
  .hero-big { font-size: min(7.6vw, 2.6rem); font-stretch: 118%; line-height: 0.95; }
  .hero-sub { margin-top: 0.9rem; font-size: 0.98rem; max-width: 34ch; }
  .vsl {
    flex: none;
    width: 100%;
    margin-block: 14px;
    transform: translateY(calc(var(--v, 0) * var(--vshift, 0px))) scale(calc(0.78 + var(--v, 0) * 0.22));
  }
  .vsl-play { width: 50px; height: 50px; }
  .vp-bar { left: 6px; right: 6px; bottom: 6px; gap: 6px; }
  .vp-dur { display: none; }
  .hero-foot { transform: translateY(calc(var(--h, 0) * 30px)); }
  /* 4 tiles hug the video's corners, half tucked behind it */
  .tiles { position: absolute; inset: 0; }
  .tile { --tw: 21vw; width: var(--tw); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 5px; }
  .t1 { left: calc(var(--vl0, 14vw) - var(--tw) * 0.6); top: calc(var(--vt0, 50%) - var(--tw) * 0.62); right: auto; --r: -7deg; --dx: -45; --dy: -18; }
  .t5 { left: calc(var(--vr0, 86vw) - var(--tw) * 0.42); top: calc(var(--vt0, 50%) - var(--tw) * 0.7); right: auto; --r: 6deg; --dx: 45; --dy: -18; }
  .t4 { left: calc(var(--vl0, 14vw) - var(--tw) * 0.56); top: calc(var(--vb0, 70%) - var(--tw) * 0.62); right: auto; --r: 5deg; --dx: -45; --dy: 18; }
  .t7 { left: calc(var(--vr0, 86vw) - var(--tw) * 0.46); top: calc(var(--vb0, 70%) - var(--tw) * 0.68); right: auto; --r: -5deg; --dx: 45; --dy: 18; }
  .t2, .t3, .t6, .t8 { display: none; }
}
/* short phones (iPhone SE and similar): tighter so it all still fits */
@media (max-width: 700px) and (max-height: 740px) {
  .board-stick { gap: 16px; padding-top: 66px; }
  .tile { --tw: 18vw; }
  .vsl { margin-block: 8px; }
  .hero-big { font-size: min(7vw, 2.6rem); }
}

/* ---------- statement sections: big line over a full-bleed photo ---------- */

.statement { position: relative; overflow: hidden; min-height: clamp(520px, 92vh, 900px); display: grid; align-items: center; padding: clamp(110px, 12vw, 180px) 0; }
.statement-bg { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; transform: translateY(var(--py, 0px)); will-change: transform; }
.statement::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.85)); }
.statement-inner { position: relative; z-index: 1; }
.statement .tag { color: #cfcfcf; }
.statement-big {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.015em;
  font-size: clamp(2.2rem, 6.2vw, 6rem);
  max-width: 20ch;
  margin: 0 auto;
  text-wrap: balance;
}

/* =========================================================
   Sections
   ========================================================= */

.section { position: relative; padding: clamp(84px, 11vw, 150px) 0; }
.section-light { background: var(--paper); color: var(--ink); }

/* reveals drift up slowly and land softly, so nothing snaps in */
.reveal { opacity: 0; transform: translateY(46px) scale(0.985); transition: opacity 1.3s cubic-bezier(0.25, 0.6, 0.3, 1), transform 1.6s cubic-bezier(0.19, 1, 0.22, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 01 you: pain questions ----------
   The section pins while you scroll. story.js turns each question on in
   turn (.is-on), dims the older ones (.is-past), then clears them all
   for the payoff line (.pain.is-done). --pp (0 to 1) turns the big "?". */

.pain { position: relative; height: calc(100svh + 6 * 70vh); background: var(--paper); color: var(--ink); }
.pain-stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.pain-head {
  position: absolute;
  z-index: 2;
  top: 100px;
  left: 0;
  right: 0;
  width: min(var(--wrap), 100% - 32px);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.pain-head .tag { margin: 0; }
.pain-count { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; color: var(--ink-mute); }
.pain-count b { color: var(--ink); font-weight: 700; }
.pain.is-done .pain-head { opacity: 0; transition: opacity 0.6s; }

.pain-mark {
  position: absolute;
  right: -3vw;
  bottom: -16vh;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 92vh;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.07);
  transform: rotate(calc(var(--pp, 0) * 28deg - 12deg));
  pointer-events: none;
  user-select: none;
}

.pain-qs { position: absolute; inset: 0; width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.q {
  --r: 0deg;
  position: absolute;
  width: min(500px, 44%);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 26px 24px;
  background: #000;
  color: #fff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), 0 30px 70px rgba(0, 0, 0, 0.2);
  font-family: var(--display);
  font-stretch: 110%;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.85vw, 1.65rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(50px) scale(0.72) rotate(calc(var(--r) * 3));
  transition: opacity 0.6s var(--ease), transform 1s var(--spring), filter 0.8s var(--ease);
}
.q i { flex: none; font-style: normal; font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; color: var(--mute); padding-top: 0.5em; }
.q b { font-weight: 800; background: #fff; color: #000; padding: 0 0.18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.q.is-on { opacity: 1; transform: rotate(var(--r)); }
.q.is-past { opacity: 0.3; transform: rotate(var(--r)) scale(0.96); }
.q1 { left: 0; top: 24%; --r: -2deg; }
.q2 { right: 0; top: 33%; --r: 1.5deg; }
.q3 { left: 7%; top: 49%; --r: 1deg; }
.q4 { right: 5%; top: 61%; --r: -1.5deg; }
.q5 { left: 22%; top: 75%; --r: -0.6deg; }
/* the payoff: questions blow away, one after another */
.pain.is-done .q { opacity: 0; filter: blur(8px); transform: translateY(-40px) scale(0.86) rotate(var(--r)); transition-duration: 0.7s, 0.9s, 0.7s; }
.pain.is-done .q2 { transition-delay: 0.05s; }
.pain.is-done .q3 { transition-delay: 0.1s; }
.pain.is-done .q4 { transition-delay: 0.15s; }
.pain.is-done .q5 { transition-delay: 0.2s; }

.pain-end {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.4rem;
  padding: 0 16px;
  text-align: center;
  pointer-events: none;
}
.pain-end > * { opacity: 0; transform: translateY(36px); transition: opacity 0.9s var(--ease), transform 1.2s var(--out); }
.pain.is-done .pain-end { pointer-events: auto; }
.pain.is-done .pain-end > * { opacity: 1; transform: none; }
.pain.is-done .pain-end > :nth-child(1) { transition-delay: 0.3s; }
.pain.is-done .pain-end > :nth-child(2) { transition-delay: 0.45s; }
.pain.is-done .pain-end > :nth-child(3) { transition-delay: 0.7s; }
.pain.is-done .pain-end > :nth-child(4) { transition-delay: 0.85s; }
.pain-yes { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.pain-big {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-size: clamp(2.4rem, 7vw, 6.4rem);
}
.pain-big span { display: block; }
.pain-big, .pain-big span { white-space: nowrap; }
.pain-sub { color: var(--ink-mute); font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 40ch; }

@media (max-width: 700px) {
  .pain { height: calc(100svh + 6 * 60vh); }
  .pain-head { top: 84px; }
  .pain-mark { font-size: 70vh; right: -18vw; bottom: -8vh; }
  .pain-big { font-size: 8.4vw; font-stretch: 115%; }
  .q { width: calc(100% - 22px); gap: 12px; padding: 16px 18px 18px; font-size: 1.12rem; }
  .q i { font-size: 0.64rem; padding-top: 0.45em; }
  .q1 { left: 0; top: 17%; }
  .q2 { right: 0; top: 31%; }
  .q3 { left: 0; top: 45%; }
  .q4 { right: 0; top: 59%; }
  .q5 { left: 0; top: 73%; }
}
@media (max-width: 700px) and (max-height: 740px) {
  .q { font-size: 1rem; padding: 13px 16px 14px; }
  .q1 { top: 16%; } .q2 { top: 30%; } .q3 { top: 44%; } .q4 { top: 58%; } .q5 { top: 72%; }
}

/* ---------- 02 proof ---------- */

.featured {
  display: grid;
  /* 3.16 = (16/9)^2, so the 16:9 case study and the 9:16 reels are the same height */
  grid-template-columns: 1fr 3.16fr 1fr;
  gap: 14px;
  margin-top: clamp(40px, 6vw, 70px);
  align-items: start;
}
.featured figure, .t-card { display: grid; gap: 10px; }
.featured figcaption, .t-card figcaption {
  font-family: var(--mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
}

.video-facade {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-3);
}
.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.video-facade:hover img { transform: scale(1.03); }
.feat-reel .video-facade { aspect-ratio: 9 / 16; }
.feat-case .video-facade { aspect-ratio: 16 / 9; }
.play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  display: grid;
  place-items: center;
  transition: transform 0.3s var(--ease);
}
.play::after { content: ""; width: 0; height: 0; border-left: 16px solid #000; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.play { transition: transform 0.35s var(--spring); }
.video-facade:hover .play { transform: translate(-50%, -50%) scale(1.12); }
.video-facade:active .play { transform: translate(-50%, -50%) scale(0.94); transition-duration: 0.08s; }
.feat-reel .play, .t-card .play { width: 48px; height: 48px; }
.feat-reel .play::after, .t-card .play::after { border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; }

@media (max-width: 900px) {
  .featured { grid-template-columns: 1fr 1fr; }
  .featured .feat-case { grid-column: 1 / -1; order: -1; }
}

.rail-wrap { margin-top: clamp(34px, 4vw, 52px); }
.rail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.rail-btns { display: flex; gap: 6px; }
.rail-btn { width: 44px; height: 44px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 1.1rem; transition: box-shadow 0.2s, background 0.2s, color 0.2s; }
.rail-btn { transition: box-shadow 0.2s, background 0.2s, color 0.2s, transform 0.3s var(--spring); }
.rail-btn:hover { background: #fff; color: #000; transform: translateY(-2px); }
.rail-btn:active { transform: scale(0.9); transition-duration: 0.06s; }
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(200px, 22vw, 280px);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(16px, calc((100vw - var(--wrap)) / 2));
  padding: 0 max(16px, calc((100vw - var(--wrap)) / 2)) 10px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.t-card { scroll-snap-align: start; }
.t-card .video-facade { aspect-ratio: 9 / 16; }
/* phones: no sideways scroll, just two columns going down */
@media (max-width: 700px) {
  .rail-btns { display: none; }
  .rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 18px 10px;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0 16px;
  }
  .t-card-desk { display: none; }
}

.wins { margin-top: clamp(80px, 10vw, 130px); }
.wins-title { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 28px; flex-wrap: wrap; }
.wins-big { font-size: clamp(1.6rem, 3.2vw, 2.8rem); text-align: right; }
/* masonry: story.js deals the screenshots into real column boxes (3 on
   desktop, 2 below 900px). CSS multi-column made hovered shots vanish. */
.wins-grid { display: flex; gap: 14px; align-items: flex-start; }
.wins-col { flex: 1; min-width: 0; display: grid; gap: 14px; }
.wins-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
/* the hover spring only takes over once the slow reveal has finished */
.wins-grid img.is-settled { transition: transform 0.35s var(--spring), border-color 0.2s, box-shadow 0.3s, opacity 0.7s var(--ease); }
.wins-grid img:hover { transform: translateY(-4px) scale(1.015); border-color: var(--line-2); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); }
/* phones keep two columns: one column made the wall ~4,000px long */
@media (max-width: 600px) {
  .wins-big { text-align: left; }
  .wins-grid, .wins-col { gap: 10px; }
  .wins-grid img { border-radius: 7px; }
}
@media (max-width: 700px) {
  .section { padding: 72px 0; }
  .featured { gap: 10px; }
  .bc-media { height: 180px; }
}

/* ---------- 03 inside ----------
   Bento grid like the live site: one wide feature card up top,
   then real screenshots in every card, blueprints strip at the end. */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(40px, 6vw, 70px);
}
.bc {
  grid-column: span 2;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 16px 16px 26px;
  background: #000;
  color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 20px 50px rgba(0, 0, 0, 0.1);
}
.bc:nth-child(5), .bc:nth-child(6) { grid-column: span 3; }
.bc-feature, .bc-wide { grid-column: 1 / -1; }
.bc.is-settled { transition: opacity 0.7s var(--ease), transform 0.45s var(--spring), box-shadow 0.35s; }
@media (hover: hover) {
  .bc:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 34px 70px rgba(0, 0, 0, 0.24); }
  .bc:hover .bc-media img { transform: scale(1.05); }
  .bc:hover .bc-num em { background: #fff; color: #000; }
}

.bc-media { height: 220px; overflow: hidden; background: var(--bg-2); margin-bottom: 0.5rem; }
.bc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.bc-num { display: flex; align-items: center; gap: 10px; padding: 0 6px; font-family: var(--mono); font-size: 0.72rem; color: var(--mute); }
.bc-num em { font-style: normal; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; padding: 0.28rem 0.5rem; box-shadow: inset 0 0 0 1px var(--line-2); transition: background 0.2s, color 0.2s; }
.bc h3 { padding: 0 6px; font-family: var(--display); font-stretch: 118%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.05; }
.bc > p:not(.bc-num), .bc-copy > p:not(.bc-num), .bc-wide-copy > p:not(.bc-num) { padding: 0 6px; color: #a9a9a9; font-size: 0.95rem; line-height: 1.5; max-width: 46ch; }

.bc-vault { display: grid; align-content: center; gap: 8px; padding: 0 9%; font-family: var(--mono); font-size: 0.76rem; }
.vault-search { padding: 12px 14px; border: 1px solid var(--line-2); margin-bottom: 6px; }
.vault-search span { color: var(--mute); margin-right: 8px; }
.vault-hit { padding: 10px 14px; background: var(--bg-3); color: #bbb; transition: background 0.2s, color 0.2s, transform 0.35s var(--spring); }
.vault-hit b { color: #fff; margin-right: 10px; }
.bc:hover .vault-hit:nth-child(2) { background: #fff; color: #000; transform: translateX(6px); }
.bc:hover .vault-hit:nth-child(2) b { color: #000; }

/* feature card: the AI Systems Pack */
.bc-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 60px);
  padding: clamp(24px, 4vw, 52px);
}
.bc-feature h3 { font-size: clamp(1.8rem, 3.4vw, 3rem); margin: 0.6rem 0 0.8rem; }
.bc-feature .bc-copy > p:not(.bc-num) { font-size: 1.02rem; color: #bdbdbd; }
.bc-feature .bc-num em { background: #fff; color: #000; box-shadow: none; }
.bc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.4rem; padding: 0 6px; }
.bc-chips li { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; padding: 0.45rem 0.7rem; border: 1px solid var(--line-2); transition: background 0.2s, color 0.2s, transform 0.3s var(--spring); }
.bc-chips li:hover { background: #fff; color: #000; transform: translateY(-2px); }

.pack-collage { position: relative; padding: 0 0 26% 16%; }
.pack-dash { position: relative; z-index: 1; border: 1px solid var(--line-2); background: var(--bg-2); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); }
.pack-dash .bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.pack-dash .bar span { width: 8px; height: 8px; border-radius: 50%; background: #3a3a3a; }
.pack-dash .bar em { font-style: normal; font-family: var(--mono); font-size: 0.66rem; color: var(--mute); margin-left: 8px; }
.pack-page {
  position: absolute;
  z-index: 2;
  width: 33%;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.7);
  transition: transform 0.5s var(--spring);
}
.pp-1 { left: 0; bottom: 2%; transform: rotate(-7deg); }
.pp-2 { left: 24%; bottom: 0; transform: rotate(-1deg); z-index: 3; }
.pp-3 { left: 48%; bottom: 3%; transform: rotate(5deg); z-index: 4; }
.bc-feature:hover .pp-1 { transform: translate(-10px, -8px) rotate(-11deg); }
.bc-feature:hover .pp-2 { transform: translateY(-14px) rotate(-1deg); }
.bc-feature:hover .pp-3 { transform: translate(12px, -8px) rotate(9deg); }

/* wide card: blueprints strip */
.bc-wide { padding: clamp(22px, 3vw, 40px); gap: 1.6rem; }
.bc-wide-copy { display: grid; gap: 0.7rem; }
.bp-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.bp-strip img { width: 100%; border-radius: 4px; border: 1px solid var(--line-2); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); transition: transform 0.4s var(--spring); }
.bp-strip img:hover { transform: translateY(-10px) rotate(-1.5deg) scale(1.03); }

@media (max-width: 900px) {
  .bc, .bc:nth-child(5), .bc:nth-child(6) { grid-column: 1 / -1; }
  .bento { grid-template-columns: 1fr; }
  .bc-feature { grid-template-columns: 1fr; }
  .bc-media { height: 200px; }
  .bp-strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 40%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .bp-strip::-webkit-scrollbar { display: none; }
  .bp-strip img { scroll-snap-align: start; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc { grid-column: span 1 !important; }
  .bc-feature, .bc-wide { grid-column: 1 / -1 !important; }
}

/* ---------- 04 receipt (same receipt, monochrome ink) ---------- */

.receipt-wrap {
  max-width: 470px;
  margin: clamp(40px, 6vw, 64px) auto 0;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 70px rgba(255, 255, 255, 0.08));
  /* painted once into its own layer, so the shadows aren't redrawn every
     frame while it fades in (that's what made it stutter on phones) */
  will-change: transform, opacity;
}
.receipt {
  --paper-r: #f4f4f1;
  --ink-soft: #66665f;
  position: relative;
  background: var(--paper-r);
  color: #0d0d0d;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 2.6rem 2rem 2.4rem;
  transform: rotate(-1deg);
  --tooth: 10px;
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--tooth) * 2) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - var(--tooth) * 2 + 1px) no-repeat;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--tooth) * 2) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - var(--tooth) * 2 + 1px) no-repeat;
}
.receipt ul { list-style: none; }
.receipt-head { text-align: center; padding-bottom: 1.1rem; margin-bottom: 1rem; border-bottom: 1.5px dashed rgba(0, 0, 0, 0.35); }
.receipt-logo { width: 120px; height: auto; color: #000; margin: 0 auto 0.6rem; display: block; }
.receipt-head p { color: var(--ink-soft); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.receipt-items li, .receipt-zero li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.32rem 0; }
.receipt-items em, .receipt-zero em { font-style: normal; white-space: nowrap; font-weight: 700; }
.receipt-items em { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: #000; padding: 0.05rem 0.35rem; box-shadow: inset 0 0 0 1px #000; }
.receipt-zero { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1.5px dashed rgba(0, 0, 0, 0.35); color: var(--ink-soft); }
.receipt-total {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  margin-top: 1rem;
  padding: 1.1rem 0 0.9rem;
  border-top: 3px double #000;
  border-bottom: 3px double #000;
}
.receipt-total > span { font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; align-self: start; padding-top: 0.4rem; }
.receipt-total strong {
  justify-self: end;
  display: flex;
  align-items: flex-start;
  font-family: var(--display);
  font-stretch: 125%;
  font-size: clamp(3.8rem, 12vw, 5.2rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.receipt-total sup { font-size: 0.4em; margin: 0.12em 0.06em 0 0; letter-spacing: 0; }
.receipt-total b { font-weight: inherit; display: inline-block; min-width: 3ch; text-align: right; }
/* phones: one lighter shadow, cheaper to draw */
@media (max-width: 700px) { .receipt-wrap { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6)); } }
.receipt-total small { grid-column: 1 / -1; justify-self: end; color: var(--ink-soft); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.4rem; }
.receipt-week { text-align: center; color: var(--ink-soft); margin: 1rem 0 1.2rem; }
.receipt-barcode {
  height: 46px;
  margin: 0 auto 1.4rem;
  width: 82%;
  background: repeating-linear-gradient(90deg,
    #000 0 2px, transparent 2px 4px, #000 4px 5px, transparent 5px 8px,
    #000 8px 11px, transparent 11px 12px, #000 12px 13px, transparent 13px 17px);
}
.receipt-foot { text-align: center; margin-top: 1rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.receipt-stamp {
  position: absolute;
  left: -0.2rem;
  bottom: 1.1rem;
  z-index: 2;
  padding: 0.45rem 0.7rem;
  border: 2.5px solid #000;
  border-radius: 2px;
  color: #000;
  font-weight: 800;
  font-size: 0.68rem;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  mix-blend-mode: multiply;
  opacity: 0;
  transform: rotate(-12deg) scale(1.6);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
  pointer-events: none;
}
.receipt.is-stamped .receipt-stamp { opacity: 0.85; transform: rotate(-12deg) scale(1); }
@media (max-width: 640px) {
  .receipt { padding: 2.4rem 1.3rem 2.2rem; transform: none; font-size: 0.76rem; }
  .receipt-stamp { font-size: 0.6rem; bottom: 1.3rem; }
}

/* ---------- 05 agent band ---------- */

.agent-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 70px); align-items: center; }
.agent-btns { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }
.agent-chat { background: #000; color: #fff; padding: clamp(20px, 3vw, 32px); display: grid; gap: 14px; font-size: 0.95rem; }
.ac-row { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ac-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ac-row b { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); padding-top: 0.2rem; }
.ac-row.you span { color: #bbb; }
@media (max-width: 900px) { .agent-inner { grid-template-columns: 1fr; } }

/* ---------- founder ---------- */

.founder { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.founder-img { position: relative; }
.founder-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.founder-img figcaption { position: absolute; left: 0; bottom: 0; background: #fff; color: #000; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.55rem 0.8rem; }
.facts { list-style: none; margin-top: 2rem; border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: minmax(7.5rem, auto) 1fr; gap: 1.4rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.facts b { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 1.5rem; text-transform: uppercase; }
.facts span { color: var(--mute); }
@media (max-width: 900px) { .founder { grid-template-columns: 1fr; } .founder-img { max-width: 420px; } }

/* ---------- FAQ ----------
   story.js animates the open and close; the line underneath draws in
   on hover and stays drawn while a question is open. */

.faq { margin-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--ink-line); }
.faq details { position: relative; border-bottom: 1px solid var(--ink-line); }
.faq details::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #000; transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
.faq details:hover::after, .faq details.is-open::after { transform: scaleX(1); }
.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  font-family: var(--display);
  font-stretch: 110%;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  transition: transform 0.35s var(--spring);
}
.faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .faq summary:hover { transform: translateX(6px); } }
.faq summary:active { transform: translateX(3px) scale(0.99); transition-duration: 0.08s; }
.faq summary i { position: relative; width: 34px; height: 34px; flex: none; box-shadow: inset 0 0 0 1px var(--ink-line); transition: background 0.2s, box-shadow 0.2s, transform 0.4s var(--spring); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 10px; top: 16px; width: 14px; height: 2px; background: #000; transition: transform 0.4s var(--spring), background 0.2s; }
.faq summary i::after { transform: rotate(90deg); }
.faq summary:hover i { box-shadow: inset 0 0 0 1px #000; }
.faq details.is-open summary i { background: #000; box-shadow: none; transform: rotate(180deg); }
.faq details.is-open summary i::before, .faq details.is-open summary i::after { background: #fff; }
.faq details.is-open summary i::after { transform: rotate(0); }
.faq details p { overflow: hidden; color: var(--ink-mute); padding: 0 3.5rem 1.5rem 0; max-width: 62ch; }

/* ---------- final ---------- */

.final-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.7rem; margin-top: 2.6rem; }
.final-note { margin-top: 1.2rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: #cfcfcf; }

.foot { border-top: 1px solid var(--line); padding: 26px 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--mute); }
.foot-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: #fff; }
.foot nav { display: flex; gap: 1.4rem; }

/* ---------- agent modal + toast ---------- */

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.78); animation: fade 0.25s; }
.modal[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.modal-card { width: min(720px, 100%); max-height: calc(100svh - 32px); display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line-2); padding: clamp(20px, 3vw, 32px); }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head .tag { margin: 0; }
.modal-x { width: 40px; height: 40px; font-size: 1.6rem; line-height: 1; box-shadow: inset 0 0 0 1px var(--line-2); }
.modal-card h2 { font-family: var(--display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0.9rem 0 0.4rem; }
.modal-sub { color: var(--mute); max-width: 56ch; }
.modal-pre { flex: 1; min-height: 140px; overflow: auto; margin: 1.2rem 0; padding: 16px; background: #000; border: 1px solid var(--line); font-family: var(--mono); font-size: 0.74rem; line-height: 1.6; color: #cfcfcf; white-space: pre-wrap; }
.modal-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; transform: translate(-50%, calc(100% + 40px)); visibility: hidden; background: #fff; color: #000; padding: 0.9rem 1.2rem; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.04em; max-width: calc(100vw - 32px); transition: transform 0.4s var(--ease), visibility 0s 0.4s; pointer-events: none; }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform 0.4s var(--ease); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
  .pain { height: auto; }
  .pain-stick { position: relative; height: auto; padding: 130px 16px 90px; display: grid; gap: 14px; }
  .pain-head, .pain-qs, .pain-end { position: relative; top: auto; inset: auto; width: min(var(--wrap), 100%); }
  .pain-qs { display: grid; gap: 14px; }
  .q { position: relative; inset: auto; width: 100%; opacity: 1; transform: none; }
  .pain-end { margin-top: 60px; pointer-events: auto; }
  .pain-end > * { opacity: 1; transform: none; }
  .logo-draw path { stroke-dashoffset: 0; fill-opacity: 1; }
}