/* TurboUGC landing · v3 draft
   Tokens mirror studio-kai/src/app/globals.css, "Warm ground (2026-09-29)" block:
   warm ivory ground, white cards on it, warm charcoal ink, cream fills, violet
   accent under ~5% of pixels, ring + tight shadow for depth, rounded-rectangle
   controls (--r-control). */

:root {
  --bg: #fcf9f5;
  --surface: #ffffff;
  --cream: #f7f0e8;
  --fill: #f7f1ea;
  --lavender: #f1eafe;
  --ink: #29252d;
  --ink-hover: #3b3640;
  --text-2: rgba(41, 37, 45, 0.72);
  --muted-fg: #6f6875;          /* AA on ivory and white */
  --border: rgba(41, 37, 45, 0.11);
  --border-subtle: rgba(41, 37, 45, 0.07);
  --accent: #7c3aed;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --money: #15803d;             /* app green #16a34a, one step darker for AA text */
  --amber: #f4a261;

  --e-card: 0 0 0 1px rgba(41, 37, 45, 0.1), 0 3px 4px -2px rgba(41, 37, 45, 0.12);
  --e-raised: 0 0 0 1px rgba(41, 37, 45, 0.1), 0 2px 4px -1px rgba(41, 37, 45, 0.08), 0 16px 32px -20px rgba(41, 37, 45, 0.28);
  --e-chip: 0 0 0 0.5px rgba(41, 37, 45, 0.14), 0 1px 2px rgba(41, 37, 45, 0.08);
  --e-press: 0 1px 2px rgba(41, 37, 45, 0.28), inset 0 1px rgba(255, 255, 255, 0.14), inset 0 -1px rgba(0, 0, 0, 0.1);

  --r-card: 16px;
  --r-control: 10px;
  --r-control-sm: 8px;
  --r-chip: 6px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 24px;
  /* One content width for every section · the same left and right edge all
     the way down (Kai, 2026-10-18: the tools section ran wider). */
  --content: 1120px;
  --section: 136px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, ol, ul, dl, dd { margin: 0; }
h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-control-sm); }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 10px 14px;
  border-radius: var(--r-control); text-decoration: none; font-weight: 700;
}
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 800px; }

/* ── Buttons · rounded rectangles, never pills ─────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px;
  border: 0; border-radius: var(--r-control);
  font-size: 15px; font-weight: 700; letter-spacing: -0.1px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 150ms var(--ease), background-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.btn:hover { transform: scale(1.02); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--ink); color: var(--bg); box-shadow: var(--e-press); }
.btn-primary:hover { background: var(--ink-hover); }
.btn-secondary { background: var(--surface); color: var(--ink); box-shadow: var(--e-card); }
.btn-secondary:hover { box-shadow: 0 0 0 1px rgba(41, 37, 45, 0.18), 0 3px 6px -2px rgba(41, 37, 45, 0.14); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: var(--r-control-sm); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: rgba(41, 37, 45, 0.06); }
.nav-actions { display: flex; align-items: center; gap: 6px; }
.nav-signout { display: contents; }
.nav-signout[hidden] { display: none; }
.btn-block { width: 100%; }

/* ── Nav ───────────────────────────────────────────────────────────────── */
/* Not sticky: it sits on the hero's gradient and scrolls away with the page */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 50; }
.nav-inner {
  max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; height: 64px; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 32px;
}
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 20px; font-weight: 700; letter-spacing: -0.4px; }
.wordmark img { border-radius: 8px; }
.wordmark-ugc { color: var(--accent); }
.nav-links { display: flex; gap: 4px; margin-right: auto; }
.nav-links a {
  text-decoration: none; font-size: 15px; color: var(--text-2);
  padding: 8px 12px; border-radius: var(--r-control-sm);
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.nav-links a:hover { color: var(--ink); background: rgba(41, 37, 45, 0.05); }

/* ── Hero · centered copy on a soft gradient, a logo strip, the bunny ───── */
.hero {
  position: relative; isolation: isolate; overflow-x: clip;
  padding: calc(72px + clamp(32px, 4.5vw, 64px)) 0 0;
  text-align: center;
  background:
    linear-gradient(180deg, transparent 45%, var(--bg) 100%),
    linear-gradient(90deg, var(--bg) 0%, #f6efe9 18%, #efe7f8 50%, #f6efe9 82%, var(--bg) 100%);
}
.hero-copy { max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font-size: 15px; font-weight: 700; color: var(--muted-fg); margin-bottom: 16px; }
.hero h1 {
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; text-wrap: balance;
}
/* two lines on a wide screen; on a narrow one each line wraps as it needs */
.hero h1 .line { display: block; }
@media (min-width: 900px) { .hero h1 .line { white-space: nowrap; } }
/* the two things to read first: who it's for, and the hours */
.h1-tech { color: var(--accent); font-style: italic; font-weight: 700; white-space: nowrap; padding-right: 0.06em; -webkit-text-stroke: 0.028em currentColor; paint-order: stroke fill; }
/* heavier than the rest of the line · Satoshi's 900 would thicken every heading on the page, so a thin stroke does it here */
.h1-hl { color: var(--accent); white-space: nowrap; -webkit-text-stroke: 0.028em currentColor; paint-order: stroke fill; }
.h1-mark { position: relative; display: inline-block; }
.h1-mark svg { position: absolute; left: -2%; right: -2%; bottom: -0.16em; width: 104%; height: 0.24em; overflow: visible; }
.h1-mark path { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: h1-draw 900ms cubic-bezier(0.55, 0.1, 0.35, 1) 350ms forwards; }
@keyframes h1-draw { to { stroke-dashoffset: 0; } }
.lede { margin: 18px auto 0; font-size: 19px; line-height: 1.5; color: var(--text-2); max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
.offer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 16px; font-size: 15px; color: var(--text-2); }
.offer b { font-weight: 800; color: var(--ink); }
.offer-dot { color: var(--muted-fg); }
.offer-price { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); border-radius: 6px; transition: color 150ms var(--ease), text-decoration-color 150ms var(--ease); }
.offer-price:hover, .offer-price:hover b { color: var(--accent); }
.offer-price:hover { text-decoration-color: var(--accent); }
.offer-discord { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink); text-decoration: none; border-radius: 6px; transition: color 150ms var(--ease); }
.offer-discord svg { color: #5865f2; }
.offer-discord:hover { color: #5865f2; }

/* "Our creators have worked with" · a slow strip of brand wordmarks */
.logos { margin: clamp(36px, 4.5vw, 52px) auto 0; max-width: 1040px; padding: 0 var(--gutter); }
.logos-label { font-size: 14px; color: var(--muted-fg); }
.logos-strip {
  margin-top: 20px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logos-track { display: flex; width: max-content; animation: logos 40s linear infinite; }
.logos-strip:hover .logos-track { animation-play-state: paused; }
.logos-track ul { display: flex; align-items: center; gap: clamp(40px, 5vw, 64px); padding-right: clamp(40px, 5vw, 64px); }
.logos-track li { height: 40px; display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: rgba(41, 37, 45, 0.5); white-space: nowrap; transition: color 200ms var(--ease); }
.logos-track li img { width: 28px; height: 28px; border-radius: 7px; filter: grayscale(1); opacity: 0.7; transition: filter 200ms var(--ease), opacity 200ms var(--ease); }
.logos-track li:hover { color: var(--ink); }
.logos-track li:hover img { filter: none; opacity: 1; }
@keyframes logos { to { transform: translateX(-50%); } }

/* The peeking bunny · stands behind the hero's bottom line; only his ears,
   head and eyes clear it */
.peek {
  --hover-rise: 0px;
  position: absolute; left: 78%; bottom: 0;
  --pw: clamp(120px, 10vw, 150px);
  width: var(--pw); height: calc(var(--pw) * 1.42);   /* shows ears, eyes and the waving paw */
  transform: translateX(-50%);
  clip-path: inset(-400px -60px 0 -60px);
}
.peek img {
  display: block; width: 100%; height: auto;
  transform: translateY(calc(10px - var(--hover-rise))) rotate(-6deg);
  transform-origin: 50% 100%;
  transition: transform 600ms var(--ease-out);
  animation: bob 3.8s ease-in-out infinite alternate;
}
.peek:hover { --hover-rise: 42px; }
@keyframes bob { from { translate: 0 0; } to { translate: 0 -3px; } }

/* Phone frame · the cut demo in How it works */
.phone {
  position: relative;
  aspect-ratio: 9 / 16;
  padding: 5px;
  border-radius: 20px;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(41, 37, 45, 0.18), 0 18px 30px -18px rgba(41, 37, 45, 0.55);
}
.screen { position: relative; width: 100%; height: 100%; border-radius: 15px; overflow: hidden; background: #3b3640; }
.screen video, .screen img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(var(--zoom, 1)); }
.phone-lg { width: 100%; border-radius: 26px; padding: 6px; }
.phone-lg .screen { border-radius: 20px; }

/* ── Sections ─────────────────────────────────────────────────────────── */
.section { padding: var(--section) 0; }
/* a jump to #pricing lands on its heading, not on the section's top padding, so the
   cards fit on screen (Kai, 2026-10-17) */
#pricing { scroll-margin-top: calc(var(--section) * -1 + 8px); }
.section-tint { background: var(--fill); box-shadow: inset 0 1px 0 var(--border-subtle), inset 0 -1px 0 var(--border-subtle); }
.section-head { max-width: 720px; margin-bottom: 72px; }
.section-head-row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.label { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 16px; }
.section h2, .final h2 {
  font-size: clamp(34px, 4.4vw, 54px); font-weight: 800;
  line-height: 1.04; letter-spacing: -0.035em;
}
.section-sub { margin-top: 16px; font-size: 17px; color: var(--text-2); max-width: 36em; }

/* ── The problem · the same week without and with TurboUGC, side by side ── */
.problem .section-head { margin-bottom: 48px; }
/* position: relative · the flying hours (.ba-fly) are placed inside it; without
   it they were placed against the page and showed up in the hero. */
.ba { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; align-items: stretch; }
.ba-col { display: flex; flex-direction: column; padding: 28px 28px 24px; border-radius: 20px; }
.ba-without { position: relative; background: var(--fill); box-shadow: inset 0 0 0 1px var(--border-subtle); }

/* Once you've read past the section: a red line is drawn through each chore and the
   week, one after another (Filming stays, it's still yours); then a BURNOUT stamp
   slams down hard, the card is knocked back by it, and it fades behind the stamp. */
.ba-without .ba-row, .ba-without .ba-total { position: relative; }
.ba-without .ba-row:not(.ba-keep)::after, .ba-without .ba-total::after {
  content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px;
  background: #dc2626; transform: scaleX(0); transform-origin: left center; pointer-events: none;
}
.ba-without .ba-total::after { top: 58%; height: 4px; }
.ba-without.is-crossed .ba-row:not(.ba-keep)::after { animation: ba-strike 260ms cubic-bezier(0.6, 0, 0.3, 1) calc(var(--i) * 120ms) both; }
.ba-without.is-crossed .ba-total::after { animation: ba-strike 300ms cubic-bezier(0.6, 0, 0.3, 1) 640ms both; }
@keyframes ba-strike { to { transform: scaleX(1); } }

.ba-without::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: var(--fill); opacity: 0; pointer-events: none; transition: opacity 600ms var(--ease) 1500ms; }
.ba-without.is-crossed::after { opacity: 0.45; }
.ba-stamp { position: absolute; top: 52%; left: 50%; z-index: 2; width: 82%; height: auto; pointer-events: none; overflow: visible; mix-blend-mode: multiply;
  opacity: 0; transform: translate(-50%, -50%) rotate(-12deg); }
.ba-flecks { opacity: 0; }
.ba-without.is-crossed .ba-stamp { animation: ba-stamp 360ms cubic-bezier(0.55, 0, 0.75, 0) 1050ms both, ba-settle 260ms cubic-bezier(0.2, 0.9, 0.3, 1.4) 1410ms both; }
.ba-without.is-crossed .ba-flecks { animation: ba-flecks 200ms ease-out 1400ms both; }
.ba-without.is-crossed { animation: ba-hit 420ms cubic-bezier(0.2, 0.7, 0.2, 1) 1400ms; }
/* falls in from big and high, accelerating, then hits */
@keyframes ba-stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(4deg) scale(3); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(0.94); }
}
/* the bounce off the paper */
@keyframes ba-settle {
  0% { transform: translate(-50%, -50%) rotate(-12deg) scale(0.94); }
  45% { transform: translate(-50%, -50%) rotate(-13deg) scale(1.04); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
}
@keyframes ba-flecks { from { opacity: 0; } to { opacity: 1; } }
/* the card takes the hit */
@keyframes ba-hit {
  0% { transform: none; }
  18% { transform: translate(3px, 6px) scale(0.985) rotate(0.4deg); }
  42% { transform: translate(-3px, -2px) rotate(-0.3deg); }
  66% { transform: translate(2px, 1px); }
  100% { transform: none; }
}
/* Still version (Kai, trying it): the card as it is, with no lines through it,
   no fade and no stamp; it only rises in with the other card. Take "ba-static" off the card in index.html
   to go back to the animated version. */
.problem.is-live .ba-without.ba-static .ba-row, .problem.is-live .ba-without.ba-static .ba-total { opacity: 1; transform: none; transition: none; }
.ba-static .ba-row:not(.ba-keep)::after, .ba-static .ba-total::after { display: none; }
.ba-static .ba-stamp { display: none; }
.ba-static::after { display: none; }
.ba-without.ba-static { animation: none; }
.ba-end { height: 1px; }
/* each chore's hours fly across to the row that takes it over and turn into its
   "Handled" chip, one row at a time (js/main.js · desktop only, the cards side
   by side). The hours left behind go pale: off your plate. */
.ba-fly { position: absolute; z-index: 5; font-size: 17px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #dc2626; pointer-events: none; white-space: nowrap; }
@media (min-width: 961px) {
  .problem.is-live .ba-with .ba-ok { opacity: 0; transform: scale(0.5); transition: opacity 200ms var(--ease-out), transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1.5); }
  .problem.is-live .ba-with .ba-row.is-handled .ba-ok { opacity: 1; transform: none; }
  .ba-without .ba-h { transition: opacity 300ms var(--ease-out); }
  .ba-without .ba-row.is-gone .ba-h { opacity: 0.3; }
}
.ba-with { background: var(--surface); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent), 0 20px 44px -26px color-mix(in srgb, var(--accent) 55%, transparent); }

/* each side's bunny over its title, the same height so the rows below line up */
.ba-head { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 18px; }
.ba-bunny { height: 150px; width: auto; }
.ba-bed { position: relative; height: 150px; aspect-ratio: 900 / 867; }
.ba-bed img { width: 100%; height: 100%; }
.ba-z { position: absolute; font-weight: 800; color: var(--accent); line-height: 1; opacity: 0.8; animation: pb-z-drift 3.6s var(--ease) infinite; }
.ba-z1 { left: 62%; bottom: 71%; font-size: 14px; }
.ba-z2 { left: 69%; bottom: 79%; font-size: 19px; animation-delay: 0.5s; }
.ba-z3 { left: 77%; bottom: 88%; font-size: 26px; animation-delay: 1s; }
@keyframes pb-z-drift {
  0%, 100% { transform: translateY(0) rotate(-8deg); opacity: 0.8; }
  50% { transform: translateY(-6px) rotate(-3deg); opacity: 0.45; }
}
.ba-title { font-size: 27px; font-weight: 800; letter-spacing: -0.03em; }
.ba-without .ba-title { color: var(--muted-fg); }
.ba-with .ba-title { color: var(--accent); }

/* the rows: one per chore, the same height on both sides */
.ba-rows { display: flex; flex-direction: column; }
.ba-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; box-shadow: inset 0 -1px 0 var(--border); }
.ba-name { display: flex; flex-direction: column; gap: 2px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.ba-name small { font-size: 13px; font-weight: 600; color: var(--muted-fg); }
.ba-without .ba-name { color: var(--text-2); }
.ba-h { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ba-without .ba-h { color: #dc2626; }
.ba-keep .ba-h, .ba-keep .ba-name { color: var(--ink); }
.ba-ok { flex: none; padding: 4px 9px; border-radius: 7px; font-size: 12px; font-weight: 800; color: var(--money); background: color-mix(in srgb, var(--money) 12%, transparent); }

/* the week, totalled */
.ba-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 16px; padding-top: 14px; box-shadow: inset 0 2px 0 var(--ink); font-size: 18px; font-weight: 800; }
.ba-total b { font-size: 34px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ba-without .ba-total b { color: #dc2626; }
.ba-with .ba-total b { color: var(--money); }

/* on screen: each side's rows come in one by one, the "with" side a beat behind,
   then the totals (js/main.js adds .is-live, then .is-in on each column) */
.problem.is-live .ba-row, .problem.is-live .ba-total { opacity: 0; transform: translateY(8px); transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out); }
.problem.is-live .ba-without .ba-row { transition-delay: calc(var(--i) * 90ms); }
.problem.is-live .ba-with .ba-row { transition-delay: calc(var(--i) * 90ms + 260ms); }
.problem.is-live .ba-total { transition-delay: 900ms; }
.problem.is-live .ba-col.is-in .ba-row, .problem.is-live .ba-col.is-in .ba-total { opacity: 1; transform: none; }
/* and the cards themselves rise in as they come on screen, the "with" one a beat behind */
.problem.is-live .ba-col { opacity: 0; transform: translateY(32px) scale(0.98); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
.problem.is-live .ba-with { transition-delay: 160ms; }
.problem.is-live .ba-col.is-in { opacity: 1; transform: none; }

/* ── Benefits (draft) · three big outcomes, alternating sides ──────────── */
.benefits .container { display: flex; flex-direction: column; gap: clamp(72px, 9vw, 120px); }
.bn-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.bn-flip .bn-visual { order: 2; }
.bn-frame { overflow: hidden; border-radius: 18px; background: var(--surface); box-shadow: var(--e-raised); }
.bn-chrome { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: var(--fill); box-shadow: inset 0 -1px 0 var(--border-subtle); }
.bn-chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(41, 37, 45, 0.16); }
.bn-chrome span { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--muted-fg); }
.bn-shot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; aspect-ratio: 16 / 10; padding: 24px;
  text-align: center; background: linear-gradient(160deg, #f4effa 0%, #efe9e2 100%); }
.bn-shot p { max-width: 26em; font-size: 14px; font-weight: 600; color: var(--muted-fg); }
.bn-play { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--e-raised); }
.bn-eyebrow { margin-bottom: 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.bn-copy h2 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -0.035em; }
.bn-body { margin: 16px 0 28px; max-width: 30em; font-size: 18px; line-height: 1.55; color: var(--text-2); }
/* three short lines under each headline · small dots, like the pricing cards */
.bn-points { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 30px; }
.bn-points li { position: relative; padding-left: 22px; font-size: 18px; line-height: 1.4; color: var(--text-2); }
.bn-points li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.bn-points b { font-weight: 800; color: var(--ink); }
/* each row's button says what it gets you, in the brand violet (the hero's Get Turbo stays dark) */
.bn-cta { background: var(--accent); color: #fff; box-shadow: var(--e-press), 0 8px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.bn-cta:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }

/* Benefit mockups · small copies of the app's own pages, animated (js/main.js).
   Everything is sized in em off one font size that follows the frame's width, so
   they scale down as one picture on a phone. */
.bn-frame { container-type: inline-size; }
.mk { display: flex; aspect-ratio: 16 / 10; font-size: clamp(8px, 2.3cqw, 14px); line-height: 1.3; color: #202020; background: #fafafa; text-align: left; }
.mk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.9em; padding: 1.4em 1.5em; overflow: hidden; }
.mk-top { display: flex; align-items: center; gap: 0.5em; }
.mk-top b { margin-right: auto; font-size: 1.5em; font-weight: 800; letter-spacing: -0.02em; }
.mk-pill { padding: 0.3em 0.7em; border-radius: 0.5em; font-size: 0.9em; font-weight: 600; background: #fff; box-shadow: 0 0 0 1px rgba(41, 37, 45, 0.1); }
.mk-btn { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.35em 0.8em 0.35em 0.65em; border-radius: 0.5em; font-size: 0.9em; font-weight: 700; color: #fff; background: #202020; }
.mk-btn svg { width: 0.8em; height: 0.8em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mk-logo { width: 1.75em; height: 1.75em; flex: none; border-radius: 0.45em; }
.mk-av { width: 1.35em; height: 1.35em; flex: none; border-radius: 0.35em; object-fit: cover; }
.mk-sub { margin-top: -0.4em; font-size: 0.9em; color: var(--muted-fg); }
.mk-sub span { font-weight: 800; color: #202020; font-variant-numeric: tabular-nums; }

/* Editing board · three columns, one ticket moving across them */
.mk-board { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7em; }
.mk-col { display: flex; flex-direction: column; gap: 0.5em; min-width: 0; padding: 0.6em; border-radius: 0.9em; background: rgba(41, 37, 45, 0.045); }
.mk-colh { display: flex; align-items: center; gap: 0.4em; font-weight: 700; }
.mk-colh i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--c); }
.mk-colh span { color: var(--muted-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-card { display: flex; flex-direction: column; gap: 0.4em; padding: 0.55em 0.65em; border-radius: 0.7em; background: #fff;
  box-shadow: inset 0.22em 0 0 var(--c), 0 0 0 1px rgba(41, 37, 45, 0.07), 0 0.5em 1em -0.7em rgba(41, 37, 45, 0.4); }
.mk-card small { font-size: 0.85em; color: var(--muted-fg); }
.mk-th { display: flex; align-items: center; gap: 0.4em; font-size: 1em; }
.mk-th b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-segs { display: flex; gap: 1px; height: 0.32em; border-radius: 99px; overflow: hidden; background: rgba(41, 37, 45, 0.1); }
.mk-segs i { flex: 1; transition: background-color 250ms var(--ease); }
.mk-segs i.on { background: var(--c); }
.mk-done i, .mk-ticket[data-stage="2"] .mk-segs i { background: #16a34a; }
.mk-tag { align-self: flex-start; padding: 0.1em 0.45em; border-radius: 0.35em; font-size: 0.82em; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.mk-tag.mk-ok, .mk-ticket[data-stage="2"] .mk-tag { color: #16a34a; background: rgba(22, 163, 74, 0.12); }
.mk-board > .mk-ticket { display: none; }
.mk-ticket { --c: inherit; }
.mk-clock { font-size: 0.85em; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-cta { padding: 0.35em 0; border-radius: 0.45em; text-align: center; font-size: 0.85em; font-weight: 700; color: #fff; background: var(--accent); }
.mk-ticket[data-stage="0"] .mk-cta, .mk-ticket[data-stage="1"] .mk-clock, .mk-ticket[data-stage="2"] .mk-clock, .mk-ticket[data-stage="2"] .mk-cta { display: none; }
.mk-ticket.is-land { animation: mk-land 460ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes mk-land { from { opacity: 0; transform: translateY(-0.9em) scale(0.95); } }

/* Scheduler · a week of posts filling in, today's going out */
.mk-week { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5em; }
.mk-day { display: flex; flex-direction: column; gap: 0.5em; min-width: 0; padding: 0.6em; border-radius: 0.9em; background: #fff; box-shadow: 0 0 0 1px rgba(41, 37, 45, 0.08); }
.mk-today { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent); }
.mk-dayh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.15em; }
.mk-dayh b { font-weight: 700; }
.mk-dayh span { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; font-size: 0.85em; font-weight: 700; color: var(--muted-fg); }
.mk-today .mk-dayh b { color: var(--accent); }
.mk-today .mk-dayh span { color: #fff; background: var(--accent); }
.mk-post { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.45em 0.4em; padding: 0.5em; border-radius: 0.6em;
  box-shadow: 0 0 0 1px rgba(41, 37, 45, 0.08); font-size: 0.85em; transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); }
.mk-post > span:not(.mk-pfs) { display: flex; flex-direction: column; min-width: 0; }
.mk-post b { font-weight: 700; white-space: nowrap; }
.mk-post small { color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-pfs { grid-column: 1 / -1; display: flex; gap: 0.25em; }
.mk-pf { width: 1.25em; height: 1.25em; background: #cfc9d3; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; transition: background 250ms var(--ease); }
.mk-pf-tiktok { --logo: url(../assets/platforms/tiktok.svg); }
.mk-pf-instagram { --logo: url(../assets/platforms/instagram.svg); }
.mk-pf-youtube { --logo: url(../assets/platforms/youtube.svg); }
.mk-pf-facebook { --logo: url(../assets/platforms/facebook.svg); }
.mk-pf.is-done.mk-pf-tiktok { background: #111; }
.mk-pf.is-done.mk-pf-instagram { background: #e1306c; }
.mk-pf.is-done.mk-pf-youtube { background: #ff0000; }
.mk-pf.is-done.mk-pf-facebook { background: #0866ff; }
.mk.is-live .mk-post:not(.is-on) { opacity: 0; transform: translateY(0.4em) scale(0.96); }

/* Autopilot · an earnings card floating over the Scheduler's corner */
.mk-sched { position: relative; }
.mk-float { position: absolute; right: 1.2em; bottom: 1.2em; z-index: 2; display: flex; flex-direction: column; gap: 0.1em; padding: 0.8em 1em; border-radius: 0.9em;
  background: #fff; box-shadow: 0 0 0 1px rgba(41, 37, 45, 0.08), 0 1em 2em -1em rgba(41, 37, 45, 0.45); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.mk-float small { font-size: 0.72em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-fg); }
.mk-earn b { font-size: 1.9em; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mk-earn span { font-size: 0.8em; color: var(--muted-fg); }
.mk-green { color: #16a34a; }
.mk.is-live:not(.is-paid) .mk-earn, .mk.is-live:not(.is-dm) .mk-dm { opacity: 0; transform: translateY(0.6em); }
/* and an Auto-DM going out, in the other corner */
.mk-dm { right: auto; left: 1.2em; gap: 0.5em; width: 15em; padding-bottom: 1em; }
.mk-dm small { margin-bottom: 0.45em; }
.mk-dm-r, .mk-dm-in { max-width: 85%; padding: 0.4em 0.7em; font-size: 0.85em; font-weight: 600; }
.mk-dm-r { align-self: flex-end; border-radius: 0.9em 0.9em 0.25em 0.9em; color: #fff; background: var(--accent); }
.mk-dm-in { align-self: flex-start; border-radius: 0.9em 0.9em 0.9em 0.25em; color: #202020; background: #ececee; }
/* our DM comes in, then his reply */
.mk-dm-r, .mk-dm-in { transition: opacity 300ms var(--ease-out), transform 380ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.mk-dm-r { transform-origin: right bottom; }
.mk-dm-in { transform-origin: left bottom; }
.mk.is-live:not(.is-dm-out) .mk-dm-r, .mk.is-live:not(.is-dm-reply) .mk-dm-in { opacity: 0; transform: translateY(0.5em) scale(0.85); }

/* Community · a Discord-style channel, messages coming in */
.mk-chans { flex: none; display: flex; flex-direction: column; gap: 0.35em; width: 9.5em; padding: 1.3em 0.8em; background: #f3efe9; box-shadow: inset -1px 0 0 rgba(41, 37, 45, 0.06); }
.mk-chans b { display: flex; align-items: center; gap: 0.45em; margin: 0 0.4em 0.6em; font-weight: 800; }
.mk-server .mk-logo { width: 1.5em; height: 1.5em; }
.mk-chans p { padding: 0.35em 0.5em; border-radius: 0.45em; font-size: 0.9em; font-weight: 600; color: var(--muted-fg); white-space: nowrap; }
.mk-chans p.on { color: #202020; background: rgba(41, 37, 45, 0.08); }
.mk-feed { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.75em; overflow: hidden;
  -webkit-mask: linear-gradient(transparent, #000 1.5em); mask: linear-gradient(transparent, #000 1.5em); }
.mk-msg { display: flex; gap: 0.6em; align-items: flex-start; transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); }
.mk-msg > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25em; }
.mk-face { flex: none; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; font-size: 0.9em; font-weight: 800; color: #fff; background: var(--f); }
.mk-who { display: flex; align-items: center; gap: 0.4em; }
.mk-who b { font-weight: 700; }
.mk-who small { font-size: 0.78em; color: var(--muted-fg); }
.mk-badge { padding: 0.05em 0.4em; border-radius: 0.3em; font-size: 0.72em; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mk-text { font-size: 0.95em; color: #3b3640; }
.mk-deal { display: flex; align-items: center; gap: 0.5em; max-width: 22em; padding: 0.5em 0.6em; border-radius: 0.7em; background: #fff; box-shadow: inset 0.22em 0 0 var(--accent), 0 0 0 1px rgba(41, 37, 45, 0.08); }
.mk-deal > span:not(.mk-apply) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-deal b { font-weight: 700; }
.mk-deal small { font-size: 0.8em; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-apply { padding: 0.3em 0.7em; border-radius: 0.45em; font-size: 0.8em; font-weight: 700; color: #fff; background: var(--accent); }
.mk-reacts { display: flex; gap: 0.3em; }
.mk-reacts i { padding: 0.1em 0.5em; border-radius: 0.5em; font-size: 0.78em; font-style: normal; font-weight: 700; color: #3b3640; background: rgba(41, 37, 45, 0.06); }
.mk-reacts i.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.mk.is-live .mk-msg:not(.is-on) { display: none; }
.mk-msg.is-on { animation: mk-msg 340ms var(--ease-out); }
@keyframes mk-msg { from { opacity: 0; transform: translateY(0.6em); } }

/* ── How it works · alternating rows, each with one small, quiet piece of UI
   floating on a soft glow over a faint grid ─────────────────────────────── */
.section-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.hw-label { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 14px; color: var(--muted-fg); }
.hw-label::before { content: ""; width: 28px; height: 1px; background: var(--accent); }
/* four cards side by side: a live mockup on top, the step below */
.hw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0 auto; }
.hw-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; background: var(--surface);
  box-shadow: 0 0 0 1px rgba(41, 37, 45, 0.1), 0 3px 4px -2px rgba(41, 37, 45, 0.12);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.hw-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(41, 37, 45, 0.1), 0 2px 4px -1px rgba(41, 37, 45, 0.08), 0 18px 36px -22px rgba(41, 37, 45, 0.35); }
.hw-card .hw-vis { order: -1; min-height: 236px; padding: 0 18px; background: var(--fill); overflow: hidden; }
.hw-card .hw-copy { padding: 22px 22px 26px; }
.hw-num { margin-right: 10px; font-weight: 800; letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.hw-copy h3 { font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; }
.hw-copy p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--text-2); }

.hw-vis { position: relative; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hw-vis::before, .hw-vis::after { content: ""; position: absolute; inset: -8% -6%; pointer-events: none; }
.hw-vis::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 9%, transparent), transparent); }
.hw-vis::after {
  background-image: linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
  mask-image: radial-gradient(closest-side, #000, transparent);
}
.hw-ui { position: relative; z-index: 1; width: min(100%, 400px); }
.hw-field {
  display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px;
  border-radius: var(--r-card); background: var(--surface); box-shadow: var(--e-raised);
  font-size: 17px; font-weight: 600; color: var(--ink);
}
.hw-field svg { flex: none; color: var(--muted-fg); }
.hw-bar { height: 6px; margin-top: 14px; border-radius: 3px; background: var(--border-subtle); overflow: hidden; }
.hw-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width 500ms var(--ease); }
.hw-hint { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted-fg); }
.hw-hint-c { position: relative; z-index: 1; justify-content: center; }
[data-hw-editor] { transition: opacity 200ms var(--ease); }
[data-hw-editor].is-swap { opacity: 0; }
.hw-edited.is-pop { animation: hw-pop 420ms var(--ease-out); }
@keyframes hw-pop { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
.hw-spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--border); border-top-color: var(--accent); animation: hw-spin 900ms linear infinite; }
@keyframes hw-spin { to { transform: rotate(360deg); } }

/* step 1: who the clips are for */
.hw-field .hw-brand { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 4px; border-radius: 9999px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--border-subtle); font-size: 12px; font-weight: 700; }
.hw-brand img { width: 14px; height: 14px; border-radius: 4px; }

/* raw → edited */
.hw-cut { display: flex; align-items: center; justify-content: center; gap: 18px; }
.hw-thumb { position: relative; width: 140px; aspect-ratio: 9 / 16; margin: 0; border-radius: 14px; overflow: hidden; background: #3b3640; box-shadow: var(--e-raised); }
.hw-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hw-raw img { filter: saturate(0.35) brightness(0.92); }
.hw-thumb figcaption {
  position: absolute; left: 8px; top: 8px; margin: 0; padding: 3px 7px; border-radius: 6px;
  font-size: 11px; font-weight: 700; color: var(--ink); background: rgba(255, 255, 255, 0.92);
}
.hw-caption {
  position: absolute; left: 10px; right: 10px; bottom: 30%; text-align: center;
  font-size: 12px; font-weight: 800; line-height: 1.2; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.hw-arrow { flex: none; color: var(--muted-fg); }
/* step 2: the edit's slot waits (finding an editor, editing, uploading), then the cut lands */
.hw-slot { position: relative; flex: none; width: 140px; aspect-ratio: 9 / 16; border-radius: 14px; }
.hw-wait {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border-radius: inherit; background: #2f2a34; box-shadow: var(--e-raised); transition: opacity 250ms var(--ease);
}
.hw-wait .hw-spin { width: 20px; height: 20px; border-width: 2px; border-color: rgba(255, 255, 255, 0.18); border-top-color: #fff; }
.hw-wait-bar { width: 62%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.hw-wait-bar i { display: block; width: 0; height: 100%; border-radius: 2px; background: #a78bfa; transition: width 100ms linear; }
.hw-slot .hw-edited { position: absolute; inset: 0; width: auto; opacity: 0; transition: opacity 300ms var(--ease); }
.hw-slot.is-ready .hw-edited { opacity: 1; }
.hw-slot.is-ready .hw-wait { opacity: 0; }
[data-hw-clock] { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* posted to every account */
.hw-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 340px; margin: 0 auto; }
.hw-chips li {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
  border-radius: var(--r-control); background: var(--surface); box-shadow: var(--e-raised);
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.hw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: background-color 250ms var(--ease), box-shadow 250ms var(--ease); }
.hw-chips li { transition: transform 250ms var(--ease-out); }
.hw-chips li.is-posted .hw-dot { background: var(--money); box-shadow: 0 0 0 3px color-mix(in srgb, var(--money) 18%, transparent); }
.hw-chips li.is-pop { transform: scale(1.06); }
.hw-chips + .hw-hint { justify-content: center; }

/* step 3: the platforms as logo tiles, coloured in as each one posts */
.hw-plats { grid-template-columns: repeat(2, 76px); justify-content: center; }
.hw-chips.hw-plats li { position: relative; justify-content: center; width: 76px; height: 76px; padding: 0; border-radius: var(--r-card); }
.hw-logo { width: 32px; height: 32px; background: #cfc9d3; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; transition: background 250ms var(--ease); }
.hw-tiktok { --logo: url(../assets/platforms/tiktok.svg); }
.hw-instagram { --logo: url(../assets/platforms/instagram.svg); }
.hw-youtube { --logo: url(../assets/platforms/youtube.svg); }
.hw-facebook { --logo: url(../assets/platforms/facebook.svg); }
.hw-plats li.is-posted .hw-tiktok { background: #111; }
.hw-plats li.is-posted .hw-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.hw-plats li.is-posted .hw-youtube { background: #ff0000; }
.hw-plats li.is-posted .hw-facebook { background: #0866ff; }
.hw-plats li::after {
  content: ""; position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--money) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 0 0 2px var(--surface); opacity: 0; transform: scale(0.5); transition: opacity 200ms var(--ease), transform 250ms var(--ease-out);
}
.hw-plats li.is-posted::after { opacity: 1; transform: none; }

/* every deal, tracked */
.hw-ledger { padding: 8px 20px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--e-raised); }
.hw-row { display: flex; align-items: center; gap: 12px; height: 50px; font-size: 15px; color: var(--text-2); }
.hw-row span { display: flex; align-items: center; gap: 10px; flex: 1; font-weight: 600; color: var(--ink); }
.hw-row span img { width: 20px; height: 20px; border-radius: 5px; }
.hw-row em { font-style: normal; font-size: 13px; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.hw-row b { min-width: 56px; text-align: right; }
.hw-row + .hw-row { box-shadow: inset 0 1px 0 var(--border-subtle); }
.hw-row b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.hw-total span { font-weight: 700; color: var(--ink); }
.hw-total b { color: var(--money); }
.hw-ledger .hw-row { transition: opacity 300ms var(--ease-out), transform 420ms var(--ease-out); }
.hw-ledger.is-anim .hw-row:not(.is-in) { opacity: 0; transform: translateX(-24px); }

figcaption, .panel-note { margin-top: 12px; font-size: 12px; color: var(--muted-fg); }

/* mockups at card size */
.hw-card .hw-ui { width: 100%; }
.hw-card .hw-field { height: 48px; padding: 0 14px; font-size: 14px; border-radius: 12px; gap: 10px; }
.hw-card .hw-cut { gap: 10px; }
.hw-card .hw-thumb, .hw-card .hw-slot { width: 82px; border-radius: 10px; }
.hw-card .hw-wait .hw-spin { width: 16px; height: 16px; }
.hw-card .hw-thumb figcaption { font-size: 9px; left: 5px; top: 5px; padding: 2px 5px; }
.hw-card .hw-caption { font-size: 9px; left: 5px; right: 5px; }
.hw-card .hw-chips { max-width: none; gap: 8px; }
.hw-card .hw-chips li { height: 36px; padding: 0 10px; font-size: 13px; }
.hw-card .hw-plats { grid-template-columns: repeat(2, 72px); gap: 10px; }
.hw-card .hw-chips.hw-plats li { width: 72px; height: 72px; padding: 0; }
.hw-card .hw-ledger { padding: 2px 12px; }
.hw-card .hw-row { height: 38px; gap: 8px; font-size: 13px; }
.hw-card .hw-row em { display: none; }
.hw-card .hw-row b { min-width: 0; }
.hw-card .hw-hint { font-size: 12px; margin-top: 10px; }

/* ── Tools · along a creator's week: set up, plan, film, edit, post (2026-10-17) ── */
.tools { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0 auto; padding: 0; }
.flow-step { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.flow-rail { display: flex; align-items: center; }
.flow-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); }
.flow-line { flex: 1; height: 2px; background: var(--border); }
/* The rail runs through every dot · nothing before the first or after the last. */
.flow-step:first-child .flow-line:first-child, .flow-step:last-child .flow-line:last-child { background: transparent; }
.flow-verb { margin: 0; text-align: center; font-size: 26px; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); }
.flow-tools { list-style: none; margin: 0; padding: 0 7px; display: flex; flex-direction: column; gap: 10px; }
.tools .tool { align-items: flex-start; gap: 12px; padding: 14px; }
.tools .tool-icon { width: 48px; height: 48px; border-radius: 13px; }
.tools .tool-icon svg { width: 38px; height: 38px; }
.tools .tool-text b { font-size: 15px; font-weight: 800; }
.tools .tool-text > span:last-child { font-size: 13.5px; }
.tool { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--e-card); transition: transform 150ms var(--ease), box-shadow 150ms var(--ease); }
.tool:hover { transform: translateY(-2px); box-shadow: var(--e-raised); }
.tool-icon {
  position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 15px;
  background: linear-gradient(160deg, #a78bfa 0%, #7c3aed 55%, #5b21b6 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 8px 16px -10px rgba(91, 33, 182, 0.7);
  overflow: hidden;
}
/* Glossy app icon (Kai picked A, 2026-10-22; mockups in research/icon-styles.html):
   a top shine, and a layered 64×64 drawing whose parts carry a role class. */
.tool-icon::after { content: ""; position: absolute; inset: 0 0 55% 0; border-radius: inherit; background: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)); pointer-events: none; }
.tool-icon svg { position: relative; width: 44px; height: 44px; overflow: visible; filter: drop-shadow(0 2px 2px rgba(40, 10, 90, 0.35)); }
.tool-icon .bg { fill: #fff; } .tool-icon .mid { fill: #e4dbff; } .tool-icon .acc { fill: #7c3aed; } .tool-icon .acc2 { fill: #f4a261; }
.tool-icon .dk { fill: #2a2140; } .tool-icon .hi { fill: #fff; } .tool-icon .tx { fill: #2a2140; opacity: 0.28; }
.tool-icon .ln { fill: none; stroke: #f4a261; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tool-icon .lnd { fill: none; stroke: #2a2140; stroke-width: 2.6; stroke-linecap: round; }
.tool-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.tool-text b { font-size: 16px; font-weight: 700; color: var(--ink); }
.tool-text > span:last-child { flex-basis: 100%; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.tool-soon { padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; color: var(--muted-fg); background: rgba(41, 37, 45, 0.06); }
.tool.is-soon { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.tool.is-soon .tool-icon { filter: grayscale(1); opacity: 0.55; }

/* ── Video testimonials · tap a card to play it with sound ──────────────── */
.vt-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 880px; margin: 0 auto; }
.vt { margin: 0; }
.vt-media { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-card); overflow: hidden; background: #3b3640; box-shadow: var(--e-raised); }
.vt-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-play {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink); background: rgba(255, 255, 255, 0.92); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform 150ms var(--ease), opacity 200ms var(--ease);
}
.vt-play:hover { transform: scale(1.06); }
.vt.is-playing .vt-play { opacity: 0; pointer-events: none; }
.vt figcaption { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 15px; }
.vt figcaption b { font-weight: 700; color: var(--ink); }
.vt figcaption span { color: var(--muted-fg); }
.vt q { flex-basis: 100%; margin-top: 4px; color: var(--text-2); line-height: 1.45; }

/* ── Payouts · two slow strips running opposite ways ─────────────────────── */
.po-strips {
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.po-track { display: flex; gap: 16px; width: max-content; animation: po-run 60s linear infinite; }
.po-track:nth-child(2) { animation-direction: reverse; animation-duration: 70s; }
.po-strips:hover .po-track { animation-play-state: paused; }
@keyframes po-run { to { transform: translateX(calc(-50% - 8px)); } }
.po {
  flex: none; width: 280px; display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--e-raised);
}
.po-top { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.po-top .pb-note-icon { width: 30px; height: 30px; }
.pb-note-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--r-control-sm); display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; }
.pb-tone-ink { background: var(--ink); } .pb-tone-slate { background: #5b5262; } .pb-tone-orange { background: #c2410c; }
.pb-tone-green { background: var(--money); } .pb-tone-red { background: #b91c1c; } .pb-tone-violet { background: #6d28d9; }
.po-amt { font-size: 32px; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.po-meta { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted-fg); }
.po-paid { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--money); }
.po-paid::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--money); }
.po-note { margin-top: 24px; text-align: center; font-size: 13px; color: var(--muted-fg); }

/* ── App panels · HTML renders of the product UI ──────────────────────── */
.app {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--e-raised);
  overflow: hidden;
  font-size: 14px;
}
.app-bar {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px;
  font-size: 13px; font-weight: 700;
  box-shadow: inset 0 -1px 0 var(--border-subtle);
  background: color-mix(in srgb, var(--fill) 55%, var(--surface));
  white-space: nowrap; overflow: hidden;
}
.crumb { color: var(--muted-fg); font-weight: 500; }
.crumb-sep { color: var(--border); }
.bar-right { margin-left: auto; color: var(--muted-fg); font-weight: 500; }
.bar-right b { color: var(--ink); font-weight: 700; margin-left: 4px; }
.app-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.meta { font-size: 13px; color: var(--muted-fg); }
.field-label { font-size: 12px; font-weight: 700; color: var(--muted-fg); display: flex; align-items: center; gap: 6px; }
.count { color: var(--ink); }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; font-weight: 700; border-radius: var(--r-control-sm); box-shadow: var(--e-chip); }
.brand-dot {
  display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--c, var(--ink)); color: #fff;
  font-size: 11px; font-weight: 800; font-style: normal;
}
.brief { background: var(--fill); border-radius: 12px; padding: 12px 14px; }
.brief p { margin-top: 4px; font-size: 14px; color: var(--ink); }
.clips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.clip { position: relative; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: var(--fill); }
.clip img { width: 100%; height: 100%; object-fit: cover; }
.tag { position: absolute; top: 6px; left: 6px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-chip); background: rgba(255, 255, 255, 0.92); }
.tag-hook { color: #9d174d; }
.tag-demo { color: #0e7a56; }
.app-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fake-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--r-control-sm); background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 700; box-shadow: var(--e-press); white-space: nowrap; }
.fake-btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }

.timeline { padding: 20px 20px 4px; display: flex; flex-direction: column; }
.timeline li { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.timeline li:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 1.5px; background: var(--border); }
.timeline .dot { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border); background: var(--surface); position: relative; z-index: 1; }
.timeline .done .dot { background: var(--ink); box-shadow: none; }
.timeline .current .dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.timeline b { display: block; font-size: 14px; }
.timeline li:not(.done):not(.current) b { color: var(--muted-fg); }
.timeline span:not(.dot) { font-size: 13px; color: var(--muted-fg); }
.note { margin: 0 20px 20px; background: var(--fill); border-radius: 12px; padding: 12px 14px; }
.note p { margin-top: 4px; font-size: 14px; }

.week { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.week-full { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.day { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: var(--fill); min-width: 0; }
.day b { font-size: 12px; color: var(--muted-fg); }
.day-today { background: var(--lavender); }
.day-today b { color: var(--accent); }
.slot { display: flex; flex-direction: column; padding: 7px 8px; border-radius: var(--r-control-sm); background: var(--surface); box-shadow: var(--e-chip); font-size: 12px; font-weight: 700; min-width: 0; }
.slot i { font-style: normal; font-weight: 500; color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-open { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--muted-fg); font-weight: 500; align-items: center; justify-content: center; min-height: 47px; }
.ledger { display: flex; flex-direction: column; }
.ledger-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; box-shadow: inset 0 -1px 0 var(--border-subtle); }
.ledger-row:last-child { box-shadow: none; }
.ledger-row div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ledger-row div span { font-size: 13px; color: var(--muted-fg); }
.money { color: var(--money); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── What's inside · list + one large panel ───────────────────────────── */
.inside { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.inside-list { display: flex; flex-direction: column; gap: 4px; }
.inside-list [role="tab"] {
  text-align: left; border: 0; background: transparent; cursor: pointer;
  padding: 14px 16px; border-radius: 12px;
  display: flex; flex-direction: column; gap: 2px;
  transition: background-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.inside-list [role="tab"] b { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
.inside-list [role="tab"] span { font-size: 14px; color: var(--muted-fg); }
.inside-list [role="tab"]:hover { background: rgba(41, 37, 45, 0.04); }
.inside-list [role="tab"][aria-selected="true"] { background: var(--surface); box-shadow: var(--e-card); }
.inside-list [role="tab"][aria-selected="true"] b { color: var(--ink); }
.inside-list [role="tab"][aria-selected="true"] span { color: var(--text-2); }
.inside-panels { position: sticky; top: 96px; }
.app-panel { min-height: 380px; display: flex; flex-direction: column; }
.app-panel[hidden] { display: none; }
.app-panel > .app-body { flex: 1; }
.board { flex: 1; }
.app-panel:focus-visible { outline-offset: 4px; border-radius: var(--r-card); }
.app-panel:not([hidden]) { animation: rise 280ms var(--ease-out) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.col { display: flex; flex-direction: column; gap: 10px; background: var(--fill); padding: 10px; border-radius: 12px; min-width: 0; }
.col h4 { font-size: 12px; font-weight: 700; color: var(--muted-fg); display: flex; gap: 6px; padding: 2px 2px 0; }
.col h4 i { font-style: normal; color: var(--ink); }
.tcard { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 4px; align-items: center; background: var(--surface); border-radius: 10px; padding: 10px; box-shadow: var(--e-chip); font-size: 13px; min-width: 0; }
.tcard b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard > span:not(.brand-dot):not(.bar) { grid-column: 1 / -1; color: var(--muted-fg); font-size: 12px; }
.tcard-rev { box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 70%, transparent), 0 1px 2px rgba(41, 37, 45, 0.08); }
.tcard-ready { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent), 0 1px 2px rgba(41, 37, 45, 0.08); }
.bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 9999px; background: var(--border-subtle); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ink); border-radius: inherit; }
.tthumbs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; }
.tthumbs img { aspect-ratio: 9 / 16; width: 100%; object-fit: cover; border-radius: 6px; }

.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-fg); padding: 0 8px 10px; }
.mini-table td { padding: 12px 8px; box-shadow: inset 0 1px 0 var(--border-subtle); white-space: nowrap; }
.mini-table td:first-child { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cycle { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13px; color: var(--muted-fg); background: var(--fill); padding: 12px 14px; border-radius: 12px; }
.cycle .bar { grid-row: 2; }
.cycle .bar i { background: var(--money); }
.panel-foot { font-size: 13px; color: var(--muted-fg); }

.dm { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: start; }
.dm-thumb { width: 72px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; }
.dm b { font-size: 15px; }
.kw { font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 1px 6px; border-radius: var(--r-chip); }
.dm-msg { margin-top: 12px; background: var(--fill); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border); }
.stats div { padding: 14px; text-align: center; }
.stats div + div { box-shadow: inset 1px 0 0 var(--border); }
.stats dt { font-size: 12px; color: var(--muted-fg); }
.stats dd { font-size: 24px; font-weight: 800; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; }

.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sday { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 12px; background: var(--fill); font-size: 17px; font-weight: 700; }
.sday i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted-fg); text-transform: uppercase; letter-spacing: 0.04em; }
.sday-today { background: var(--lavender); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.sday-today i { color: var(--accent); }
.insp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.insp figure { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 9 / 16; }
.insp img { width: 100%; height: 100%; object-fit: cover; }
.insp span { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(41, 37, 45, 0.72); padding: 2px 6px; border-radius: var(--r-chip); }

.tx-input { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 46px; padding: 0 8px 0 14px; border-radius: var(--r-control); box-shadow: inset 0 0 0 1px var(--border); color: var(--muted-fg); font-size: 14px; }
.tx-input span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transcript { display: flex; flex-direction: column; gap: 2px; }
.transcript li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--border-subtle); font-size: 15px; }
.transcript li:last-child { box-shadow: none; }
.transcript time { font-size: 12px; color: var(--muted-fg); font-variant-numeric: tabular-nums; padding-top: 3px; }

/* ── Pricing · one comparison table rendered from PRICING ─────────────── */
.seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: rgba(41, 37, 45, 0.06);
  border-radius: var(--r-control);
}
.seg button {
  border: 0; background: transparent; cursor: pointer;
  height: 36px; padding: 0 14px; border-radius: var(--r-control-sm);
  font-size: 14px; font-weight: 700; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--e-chip); }
.seg small { margin-left: 6px; padding: 2px 7px; border-radius: 6px; font-size: 12px; font-weight: 800; color: var(--money); background: color-mix(in srgb, var(--money) 13%, transparent); }

/* Plan cards · the recommended one is dark, a little taller, and sits on top */
.bill-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 20px; margin: -24px 0 56px; }
.bill-hint { font-size: 14px; font-weight: 600; color: var(--text-2); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 20px; margin: 0 auto; }
.plan {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 32px 28px 28px; border-radius: var(--r-card); background: var(--surface);
  box-shadow: var(--e-raised), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* Shine (Kai, 2026-10-17) · a soft band of light sweeps a card on hover; the
   recommended one catches it on its own every few seconds and glows purple. */
.plan::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.5) 48%, transparent 64%);
  transform: translateX(-130%);
}
.plan:hover::after { transform: translateX(130%); transition: transform 900ms var(--ease); }
.plan.is-featured {
  z-index: 1; margin: -20px 0; padding-top: 52px; padding-bottom: 48px; border-radius: 20px;
  color: #f5f2f8;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(124, 58, 237, 0.28) 0%, rgba(124, 58, 237, 0) 70%),
    linear-gradient(165deg, #3b3640 0%, #29252d 45%, #1f1b24 100%);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 56px -22px rgba(124, 58, 237, 0.55);
}
.plan.is-featured::after {
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.13) 48%, transparent 64%);
  animation: plan-shine 5s cubic-bezier(0.4, 0, 0.2, 1) 1.2s infinite;
}
.plan.is-featured:hover::after { transition: none; }
@keyframes plan-shine { 0% { transform: translateX(-130%); } 38%, 100% { transform: translateX(130%); } }
.plan-tag {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 0 0 8px 8px;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--accent);
}
.plan-name { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.plan-blurb { margin-top: 8px; min-height: 2.6em; font-size: 16px; color: var(--text-2); }
.price-ea { margin-top: 24px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent); }
.plan.is-featured .price-ea { color: #c4b5fd; }
.price-ea-left { white-space: nowrap; }
.price { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; }
.price-main { align-items: baseline; margin-top: 6px; }
.price-now { font-size: 52px; font-weight: 800; letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; }
.price-per { font-size: 15px; font-weight: 500; color: var(--muted-fg); }
.price-list {
  position: relative; display: inline-block; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: #ef4444;
  font-variant-numeric: tabular-nums; line-height: 1;
}
/* a thick slash through the middle of the old price (Kai, 2026-10-17: red, centred) · the
   digits sit a touch below the middle of a line-height 1 box, hence 54% */
/* A straight strike through the old price, in the price's own red (Kai, 2026-10-17) */
.price-list::after { content: ""; position: absolute; left: -3%; right: -3%; top: 54%; height: 2.5px; margin-top: -1.25px; border-radius: 2px; background: currentColor; }
/* where supported, trim the line box to the digits so the slash and the % off badge centre on them exactly */
@supports (text-box: trim-both cap alphabetic) {
  .price-list { text-box: trim-both cap alphabetic; }
  .price-list::after { top: 50%; }
}
.price-off { padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 800; color: #0b2614; background: #22c55e; }
/* the strike-through plays when the cards come on screen (js/main.js adds .is-play) */
.price-now { display: inline-block; transform-origin: left bottom; }
.plans.is-play .price-list::after { transform-origin: left center; animation: price-slash 420ms cubic-bezier(0.6, 0, 0.3, 1) calc(var(--d) + 250ms) both; }
.plans.is-play .price-off { animation: price-pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.4) calc(var(--d) + 700ms) both; }
.plans.is-play .price-now { animation: price-thump 320ms var(--ease-out) calc(var(--d) + 1220ms); }
.plans.is-play .price-save { animation: price-in 400ms var(--ease-out) calc(var(--d) + 1300ms) both; }
@keyframes price-slash { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes price-pop { from { opacity: 0; transform: scale(0.4) rotate(-10deg); } }
@keyframes price-thump { 40% { transform: scale(1.08); } }
@keyframes price-in { from { opacity: 0; transform: translateY(6px); } }
.price-note { margin-top: 12px; font-size: 15px; color: var(--text-2); }
.price-save { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--money); }
.plan-rule { height: 1px; margin: 24px 0; background: var(--border); }
.plan-list { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.plan-list li { position: relative; padding-left: 22px; font-size: 17px; font-weight: 500; line-height: 1.4; }
.plan-list b { font-weight: 800; }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--money); }
.plan-cta { width: 100%; margin-top: 32px; }
.btn-accent { background: var(--accent); color: #fff; box-shadow: var(--e-press), 0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
.btn-accent:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
.plan.is-featured .plan-blurb, .plan.is-featured .price-note, .plan.is-featured .plan-plus { color: rgba(245, 242, 248, 0.72); }
.plan.is-featured .price-per { color: rgba(245, 242, 248, 0.55); }
.plan.is-featured .price-list { color: #f87171; }
.plan.is-featured .price-off { background: #22c55e; color: #0b2614; }
.plan.is-featured .price-list::after { background: currentColor; }
.plan.is-featured .price-save { color: #4ade80; }
.plan.is-featured .plan-rule { background: rgba(255, 255, 255, 0.14); }
.plan.is-featured .plan-list li::before { background: #4ade80; }
.pricing-notes { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 40px; }
.pricing-notes li { font-size: 14px; color: var(--text-2); padding-left: 14px; box-shadow: inset 2px 0 0 var(--border); }
.pricing-notes b { color: var(--ink); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; }
.faq details { box-shadow: inset 0 -1px 0 var(--border); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.2px;
  border-radius: var(--r-control-sm);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.75px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.75px 14px no-repeat;
  color: var(--muted-fg);
  transition: transform 150ms var(--ease), color 150ms var(--ease);
}
.faq summary:hover::after { color: var(--ink); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 4px 24px; font-size: 16px; color: var(--text-2); max-width: 40em; }
.faq a { color: var(--accent); text-underline-offset: 3px; }

/* ── Sign in · a small popup over the page ─────────────────────────────── */
.signin {
  width: min(400px, calc(100vw - 32px)); padding: 40px 32px 28px; border: 0; border-radius: 20px;
  background: var(--surface); color: var(--ink); text-align: center;
  box-shadow: 0 0 0 1px rgba(41, 37, 45, 0.08), 0 32px 64px -24px rgba(41, 37, 45, 0.45);
}
.signin::backdrop { background: rgba(41, 37, 45, 0.38); backdrop-filter: blur(4px); }
.signin[open] { animation: signin-in 260ms var(--ease-out); }
.signin[open]::backdrop { animation: signin-fade 260ms var(--ease-out); }
@keyframes signin-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@keyframes signin-fade { from { opacity: 0; } }
.signin-close-form { position: absolute; top: 12px; right: 12px; margin: 0; }
.signin-close { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted-fg); cursor: pointer; transition: background 150ms var(--ease), color 150ms var(--ease); }
.signin-close:hover { background: rgba(41, 37, 45, 0.06); color: var(--ink); }
.signin-logo { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 14px; }
.signin h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.signin p { margin-top: 6px; font-size: 15px; color: var(--text-2); }
.signin-google { width: 100%; gap: 10px; margin-top: 24px; }

/* ── Final CTA ────────────────────────────────────────────────────────── */
.final { padding: 0 0 72px; }
.final-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px;
  background: var(--cream); border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(41, 37, 45, 0.06);
  padding: 44px clamp(28px, 6vw, 72px) 0;
}
.final-copy { padding-bottom: 44px; max-width: 620px; }
.final-copy p { margin-top: 12px; font-size: 18px; color: var(--text-2); }
.final-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn-discord { gap: 10px; background: #5865f2; color: #fff; box-shadow: var(--e-press), 0 6px 16px -6px rgba(88, 101, 242, 0.6); }
.btn-discord:hover { background: #4752c4; }
.final-bunny { width: clamp(110px, 12vw, 150px); height: auto; margin-bottom: -10%; transition: transform 300ms var(--ease-out); }
.final-card:hover .final-bunny { transform: translateY(-6px) rotate(-2deg); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer { padding: 40px 0 56px; box-shadow: inset 0 1px 0 var(--border-subtle); }
.footer-inner { display: flex; align-items: center; gap: 24px 40px; flex-wrap: wrap; }
.footer .wordmark { font-size: 18px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-right: auto; }
.footer-links a { font-size: 14px; color: var(--text-2); text-decoration: none; padding: 4px 0; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.copyright { font-size: 14px; color: var(--muted-fg); }


/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
  .nav-links { display: none; }
  .nav-inner { justify-content: space-between; }
  .inside { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .inside-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .inside-list [role="tab"] { padding: 0 14px; height: 38px; justify-content: center; border-radius: var(--r-control); box-shadow: inset 0 0 0 1px var(--border); }
  .inside-list [role="tab"] span { display: none; }
  .inside-list [role="tab"] b { font-size: 14px; }
  .inside-list [role="tab"][aria-selected="true"] { box-shadow: var(--e-card); }
  .inside-panels { position: static; }
}

@media (max-width: 960px) {
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .vt-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(62vw, 260px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-bottom: 8px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scrollbar-width: none; }
  .vt { scroll-snap-align: start; }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 460px; gap: 16px; }
  .plan.is-featured { margin: 0; padding-top: 48px; padding-bottom: 32px; }
  .plan-blurb { min-height: 0; }
  .ba { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 16px; }
  .bn-row { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 560px; margin: 0 auto; }
  .bn-flip .bn-visual { order: 0; }
}

@media (max-width: 860px) {
  :root { --section: 96px; }
  .section-head { margin-bottom: 48px; }
  .final-card { grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
  .final-copy { padding-bottom: 0; }
  .final-bunny { justify-self: end; margin: -24px 0 -12%; width: 120px; }
}

@media (max-width: 640px) {
  .hw-grid { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
  .tools { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .flow-tools { padding: 0; }
  .flow-line { background: transparent !important; }
  .ledge { margin-top: 48px; }
  .peek { left: 74%; --pw: 104px; }
  .nav-actions .btn { padding: 0 10px; }
  :root { --gutter: 16px; --section: 80px; }
  body { font-size: 15px; }
  .hero { padding-top: 104px; }
  .hero h1 { font-size: clamp(34px, 9.6vw, 46px); }
  .lede { font-size: 17px; margin-top: 18px; }
  .cta-row { margin-top: 28px; }
  .cta-row .btn { flex: 1 1 100%; }
  .logos-track li { font-size: 18px; }
  .nav-inner { height: 58px; }
  .wordmark { font-size: 18px; }
  .hw-copy p { font-size: 16px; }
  .hw-vis { min-height: 240px; }
  .hw-thumb { width: 112px; }
  .app-body { padding: 16px; }
  .clips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .week { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .week-full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .day-hide-sm, .day-hide-md, .hide-sm, .col-hide-sm { display: none; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .insp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-panel { min-height: 0; }

  .seg button { padding: 0 10px; white-space: nowrap; }
  .seg small { font-size: 11px; }
  .faq summary { font-size: 17px; padding: 18px 2px; }
  .final-card { padding: 36px 24px 0; }
  .problem .section-head { margin-bottom: 40px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
  .hide-xs { display: none; }
}

/* ── Scroll reveals (js/main.js "Scroll reveals") · the same rise as the
   9-to-5 cards. The animation only fills backwards, so once it's done hover
   effects own the transform again. */
.rv-on [data-rv]:not(.is-rv):not(.is-rv-now) { opacity: 0; }
.rv-on [data-rv].is-rv { animation: rv-rise 700ms var(--ease-out) var(--rv-d, 0ms) backwards; }
.rv-on [data-rv="pop"].is-rv { animation: rv-pop 620ms cubic-bezier(0.2, 0.9, 0.3, 1.3) var(--rv-d, 0ms) backwards; }
@keyframes rv-rise { from { opacity: 0; transform: translateY(32px) scale(0.98); } }
@keyframes rv-pop { from { opacity: 0; transform: translateY(28px) scale(0.85); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .peek img, .logos-track, .hw-spin, .po-track, .app-panel:not([hidden]) { animation: none !important; }
  .peek img, .final-bunny { transition: none; }
  .peek:hover { --hover-rise: 0px; }
  .btn:hover, .btn:active { transform: none; }
  .ba-z, .ba-stamp, .ba-flecks, .ba-without, .ba-without *::after, .plans *, .plans *::after, .signin, .signin::backdrop { animation: none !important; }
  .hw-card { transition: none; }
  .plan::after { display: none; }
  .problem *, .problem *::before, .problem *::after { transition: none !important; }
}


/* ── Dark mode (Kai, 2026-10-21) · the same tokens, the app's dark ground ── */
[data-theme="dark"] {
  --bg: #09090b;
  --surface: #141417;
  --cream: #19191d;
  --fill: #1c1c20;
  --lavender: rgba(124, 58, 237, 0.2);
  --ink: #f4f6f8;
  --ink-hover: #ffffff;
  --text-2: rgba(244, 246, 248, 0.72);
  --muted-fg: #9ea2aa;
  --border: rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.07);
  --accent: #8b5cf6;
  --money: #4ade80;
  --e-card: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 3px 4px -2px rgba(0, 0, 0, 0.5);
  --e-raised: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.4), 0 16px 32px -20px rgba(0, 0, 0, 0.8);
  --e-chip: 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}
[data-theme="dark"] .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.theme-toggle { width: 36px; padding: 0; display: inline-grid; place-items: center; }
.theme-toggle .tt-sun { display: none; }
[data-theme="dark"] .theme-toggle .tt-sun { display: block; }
[data-theme="dark"] .theme-toggle .tt-moon { display: none; }
/* Pieces with their own light colours · dark versions so nothing goes white on white. */
[data-theme="dark"] .hero {
  background:
    linear-gradient(180deg, transparent 45%, var(--bg) 100%),
    linear-gradient(90deg, var(--bg) 0%, #110f15 18%, #1c1430 50%, #110f15 82%, var(--bg) 100%);
}
[data-theme="dark"] .bn-shot { background: linear-gradient(160deg, #1a1525 0%, #141312 100%); }
/* The hiring strip · light names, and each logo on a light tile so a dark
   mark still shows (Kai, 2026-10-21). */
[data-theme="dark"] .logos-track li { color: rgba(255, 255, 255, 0.6); }
[data-theme="dark"] .logos-track li:hover { color: #fff; }
[data-theme="dark"] .logos-track li img { box-sizing: border-box; padding: 3px; background: #f4f4f5; filter: grayscale(1); opacity: 0.85; }
[data-theme="dark"] .logos-track li:hover img { filter: none; opacity: 1; }
/* The mock app screens stay the light app in both modes · their text is the
   app's own dark ink (Kai, 2026-10-21: unreadable in dark). */
[data-theme="dark"] :is(.vt-play, .hw-thumb figcaption, .tag) { color: #29252d; }

/* Apple's own look: black with the white mark (white on black in dark mode). */
.signin-apple { width: 100%; gap: 10px; margin-top: 10px; background: #000; color: #fff; }
.signin-apple:hover { background: #262626; }
.signin-apple[hidden] { display: none; }
[data-theme="dark"] .signin-apple { background: #fff; color: #000; }
[data-theme="dark"] .signin-apple:hover { background: #e6e6e6; }

/* ── Join the waitlist · the popup every purchase button opens (Kai,
   2026-10-26). A cream stage with the bunny on his phone, waiting; once
   you're in he jumps and a little confetti goes up. ────────────────────── */
.waitlist {
  width: min(420px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 22px; overflow: hidden;
  background: var(--surface); color: var(--ink); text-align: center;
  box-shadow: 0 0 0 1px rgba(41, 37, 45, 0.08), 0 40px 80px -28px rgba(41, 37, 45, 0.5);
}
.waitlist::backdrop { background: rgba(41, 37, 45, 0.4); backdrop-filter: blur(6px); }
.waitlist[open] { animation: wl-in 420ms cubic-bezier(0.2, 0.9, 0.25, 1.15); }
.waitlist[open]::backdrop { animation: signin-fade 260ms var(--ease-out); }
@keyframes wl-in { from { opacity: 0; transform: translateY(18px) scale(0.94); } }
.waitlist .signin-close-form { z-index: 3; }
.waitlist .signin-close { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(6px); }

.wl-stage {
  position: relative; height: 196px; overflow: hidden;
  background:
    radial-gradient(120px 90px at 50% 62%, rgba(255, 255, 255, 0.95), transparent 70%),
    radial-gradient(260px 160px at 50% 110%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--cream), #fbf5ee);
  border-bottom: 1px solid var(--border-subtle);
}
.wl-ring {
  position: absolute; left: 50%; bottom: 20px; width: 150px; height: 26px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(41, 37, 45, 0.18), transparent);
}
.wl-bunny { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; height: auto; pointer-events: none; user-select: none; }
.wl-wait { width: 118px; transform-origin: 50% 100%; animation: wl-bob 3.2s ease-in-out infinite; }
.wl-yay { width: 102px; opacity: 0; transform: translateY(40px) scale(0.8); }
@keyframes wl-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-5px) rotate(1.5deg); } }

.wl-spark {
  position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; opacity: 0;
  background: var(--accent); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: wl-twinkle 3.2s var(--d) ease-in-out infinite;
}
.wl-spark:nth-child(odd) { background: var(--amber); width: 8px; height: 8px; }
@keyframes wl-twinkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 45% { opacity: 0.9; transform: scale(1) rotate(45deg); } 70% { opacity: 0; } }

.wl-confetti { position: absolute; inset: 0; pointer-events: none; }
.wl-confetti i {
  position: absolute; left: 50%; bottom: 70px; width: 7px; height: 11px; border-radius: 2px; opacity: 0;
  background: var(--accent);
}
.wl-confetti i:nth-child(3n) { background: var(--amber); }
.wl-confetti i:nth-child(4n) { background: #22c55e; width: 8px; height: 8px; border-radius: 50%; }
.wl-confetti i:nth-child(5n) { background: var(--ink); }

.wl-body { padding: 26px 30px 26px; }
.wl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 5px 11px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
}
.wl-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.wl-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: wl-ping 1.8s ease-out infinite; }
@keyframes wl-ping { to { transform: scale(2.6); opacity: 0; } }
.waitlist h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.wl-sub { margin: 8px auto 0; max-width: 30ch; font-size: 15px; color: var(--text-2); }
.wl-sub b { color: var(--ink); font-weight: 700; word-break: break-all; }

.wl-form {
  display: flex; gap: 6px; margin-top: 22px; padding: 6px; border-radius: 14px;
  background: var(--fill); box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.wl-form:focus-within { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-soft); }
.wl-has-error .wl-form { box-shadow: inset 0 0 0 1.5px #dc2626, 0 0 0 4px rgba(220, 38, 38, 0.12); animation: wl-shake 360ms var(--ease); }
@keyframes wl-shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.wl-form input {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; outline: 0; background: transparent;
  color: var(--ink); font: inherit; font-size: 16px; font-weight: 600;
}
.wl-form input::placeholder { color: var(--muted-fg); font-weight: 500; }
.wl-form .btn { height: 44px; padding: 0 20px; border-radius: var(--r-control); font-size: 15px; position: relative; flex: none; }
.wl-spin {
  position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; opacity: 0;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
}
.wl-busy .wl-label { opacity: 0; }
.wl-busy .wl-spin { opacity: 1; animation: wl-rot 700ms linear infinite; }
@keyframes wl-rot { to { transform: rotate(360deg); } }
.wl-error { min-height: 0; margin: 0; font-size: 13px; font-weight: 600; color: #dc2626; }
.wl-error:not(:empty) { margin-top: 10px; }
.wl-fine { margin: 14px 0 0; font-size: 12.5px; color: var(--muted-fg); }
.wl-done { animation: wl-rise 420ms 120ms var(--ease-out) both; }
.wl-done .wl-close { width: 100%; margin-top: 22px; }
@keyframes wl-rise { from { opacity: 0; transform: translateY(10px); } }

/* You're in · he swaps for the jump, and the confetti goes up. */
.wl-is-done .wl-wait { animation: wl-out 220ms var(--ease) forwards; }
.wl-is-done .wl-yay { animation: wl-jump 900ms 140ms cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards, wl-hop 1.6s 1.1s ease-in-out infinite; }
.wl-is-done .wl-spark { animation-duration: 1.6s; }
.wl-is-done .wl-confetti i { animation: wl-burst 1100ms 220ms cubic-bezier(0.15, 0.7, 0.3, 1) forwards; }
@keyframes wl-out { to { opacity: 0; transform: translateY(14px) scale(0.85); } }
@keyframes wl-jump { 0% { opacity: 0; transform: translateY(40px) scale(0.8); } 45% { opacity: 1; transform: translateY(-22px) scale(1.04); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes wl-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes wl-burst {
  0% { opacity: 1; transform: translate(-50%, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), var(--dy)) rotate(var(--r)); }
}
.wl-confetti i:nth-child(1)  { --dx: -150px; --dy: -60px;  --r: 220deg; }
.wl-confetti i:nth-child(2)  { --dx: -110px; --dy: -120px; --r: -160deg; }
.wl-confetti i:nth-child(3)  { --dx: -60px;  --dy: -150px; --r: 300deg; }
.wl-confetti i:nth-child(4)  { --dx: -20px;  --dy: -130px; --r: -90deg; }
.wl-confetti i:nth-child(5)  { --dx: 30px;   --dy: -155px; --r: 180deg; }
.wl-confetti i:nth-child(6)  { --dx: 75px;   --dy: -125px; --r: -240deg; }
.wl-confetti i:nth-child(7)  { --dx: 120px;  --dy: -100px; --r: 140deg; }
.wl-confetti i:nth-child(8)  { --dx: 160px;  --dy: -50px;  --r: -300deg; }
.wl-confetti i:nth-child(9)  { --dx: -170px; --dy: -10px;  --r: 90deg; }
.wl-confetti i:nth-child(10) { --dx: 170px;  --dy: -5px;   --r: -120deg; }
.wl-confetti i:nth-child(11) { --dx: -90px;  --dy: -40px;  --r: 260deg; }
.wl-confetti i:nth-child(12) { --dx: 95px;   --dy: -35px;  --r: -200deg; }

[data-theme="dark"] .waitlist { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -28px rgba(0, 0, 0, 0.9); }
[data-theme="dark"] .waitlist::backdrop { background: rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .wl-stage {
  background:
    radial-gradient(130px 95px at 50% 60%, rgba(255, 255, 255, 0.16), transparent 70%),
    radial-gradient(260px 160px at 50% 110%, rgba(139, 92, 246, 0.22), transparent 70%),
    linear-gradient(180deg, #1d1c22, #16151a);
}
[data-theme="dark"] .wl-ring { background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent); }
[data-theme="dark"] .waitlist .signin-close { background: rgba(0, 0, 0, 0.35); }
[data-theme="dark"] .wl-confetti i:nth-child(5n) { background: #fff; }

@media (max-width: 480px) {
  .wl-body { padding: 22px 20px 22px; }
  .waitlist h2 { font-size: 25px; }
  .wl-form .btn { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .waitlist, .waitlist::backdrop, .waitlist *, .waitlist *::after { animation: none !important; }
  .wl-is-done .wl-wait { opacity: 0; }
  .wl-is-done .wl-yay { opacity: 1; transform: none; }
}

/* ── /waitlist · the popup as a page of its own (Kai, 2026-10-26) · one
   screen, no scrolling, the card popping in over a soft glow. ──────────── */
html:has(body.wlp) { height: 100%; overflow: hidden; }
body.wlp { height: 100dvh; overflow: hidden; display: grid; place-items: center; padding: 16px; }
.wlp-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background-image: radial-gradient(rgba(41, 37, 45, 0.09) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 85%); }
.wlp-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(80px); opacity: 0.55; }
.wlp-glow-a { left: 50%; top: 42%; translate: -78% -50%; background: color-mix(in srgb, var(--accent) 22%, transparent); animation: wlp-drift 14s ease-in-out infinite alternate; }
.wlp-glow-b { left: 50%; top: 58%; translate: -22% -50%; background: color-mix(in srgb, var(--amber) 26%, transparent); animation: wlp-drift 17s ease-in-out infinite alternate-reverse; }
@keyframes wlp-drift { to { transform: translate(40px, -30px) scale(1.08); } }
.wlp-main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.wlp-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
  animation: wl-rise 500ms var(--ease-out) both; }
.wlp-brand img { border-radius: 8px; }
.wlp-brand b { color: var(--accent); font-weight: 700; }
.wlp-card { display: block; width: min(440px, 100%); animation: wl-in 620ms 80ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
  box-shadow: 0 0 0 1px rgba(41, 37, 45, 0.08), 0 50px 100px -30px rgba(41, 37, 45, 0.45), 0 18px 36px -18px rgba(124, 58, 237, 0.25); }
.wlp-card h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.wlp-card .wl-sub { max-width: 34ch; }
.wlp-card .wl-close { text-decoration: none; }
.wlp-foot { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted-fg); animation: wl-rise 500ms 320ms var(--ease-out) both; }
[data-theme="dark"] .wlp-bg { background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); }
[data-theme="dark"] .wlp-card { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 50px 100px -30px rgba(0, 0, 0, 0.9), 0 18px 40px -18px rgba(139, 92, 246, 0.35); }
@media (max-height: 700px) {
  body.wlp .wl-stage { height: 150px; }
  body.wlp .wl-wait { width: 92px; }
  body.wlp .wl-yay { width: 80px; }
  body.wlp .wl-body { padding-top: 18px; padding-bottom: 18px; }
  .wlp-main { gap: 12px; }
}
@media (max-height: 560px) { .wlp-foot { display: none; } body.wlp .wl-fine { display: none; } }
@media (max-width: 480px) { .wlp-card h1 { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .wlp-card, .wlp-brand, .wlp-foot, .wlp-glow { animation: none !important; } }
.wl-sub-2 { margin-top: 10px; font-size: 14px; color: var(--muted-fg); }