/*
 * Buggie v5, "Watch it work".
 * Colours come from kit/tokens.css only: near-white grounds, ink, grey, hairlines, graphite controls,
 * red only for recording, and one extra colour, violet (#6F50D9, the app's accent picker), used only
 * for the agent side: the terminal prompt glyph and the "agent is working" state.
 */
:root {
  color-scheme: light;
  --page: #ffffff;
  --tile: var(--bk-selected-fill);          /* #F1EFF1, a calm light-graphite tile */
  --tile-line: var(--bk-project-row-line);  /* #E6E3E8 */
  --ink: var(--bk-ink);                     /* #242327 */
  --muted: var(--bk-muted);                 /* #77757D */
  --line: var(--bk-line);                   /* #DEDDE1 */
  --graphite: var(--bk-accent);             /* #39343D */
  --graphite-strong: var(--bk-accent-strong);
  --violet: var(--bk-swatch-violet);        /* #6F50D9: the agent side only */
  --wrap: 1312px;
  --gut: clamp(16px, 4.4vw, 64px);
  --win-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 22px 60px rgba(44, 39, 48, 0.2), 0 4px 14px rgba(44, 39, 48, 0.1);
}

/* ---- Base ---------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 17px/1.5 var(--bk-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
img, svg { display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.3em;
  margin: 0 0.08em;
  border-radius: 5px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 var(--line);
  font: 600 0.8em/1 var(--bk-font);
  color: var(--graphite);
  vertical-align: 0.1em;
}
code { font: 500 0.88em var(--bk-font-mono); }
:focus-visible { outline: 2px solid var(--graphite); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.bk-row__title > i.is-hidden { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 14px; border-radius: 8px; background: var(--graphite); color: #fff; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }

/* The kit's eyebrow grey (#8B8790) is under 4.5:1 on white at 12 px, so eyebrows use --muted. */
.eyebrow { color: var(--muted); }

/* ---- Type ---------------------------------------------------------------------------------- */
.h1 {
  font: 700 clamp(34px, 1.55vw + 24px, 50px)/1.04 var(--bk-font-display);
  letter-spacing: -0.042em;
  text-wrap: balance;
  margin-top: 14px;
}
.h1 .grey, .two .grey { color: var(--muted); }
.h2 {
  font: 700 clamp(28px, 1.6vw + 18px, 44px)/1.08 var(--bk-font-display);
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.h3 {
  font: 700 clamp(25px, 0.7vw + 20px, 32px)/1.1 var(--bk-font-display);
  letter-spacing: -0.032em;
  margin-top: 12px;
  text-wrap: balance;
}
.cont {
  margin-top: 10px;
  font: 500 clamp(17px, 0.35vw + 15px, 20px)/1.45 var(--bk-font);
  letter-spacing: -0.012em;
  color: var(--muted);
  text-wrap: pretty;
}
.lead {
  margin-top: 20px;
  max-width: 34em;
  font: 400 clamp(17px, 0.3vw + 15.5px, 19px)/1.5 var(--bk-font);
  color: var(--muted);
  text-wrap: pretty;
}
.fine { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.num {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--bk-accent-soft);
  color: var(--bk-selected-ink);
  font-size: 11px;
  letter-spacing: 0;
}
.eyebrow:has(.num) { display: flex; align-items: center; }

/* ---- Buttons ------------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 24px;
  border-radius: 12px;
  background: var(--graphite);
  color: #fff;
  font: 600 16px/1 var(--bk-font);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 8px 20px var(--bk-accent-shadow);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: var(--graphite-strong); }
.btn:active { transform: translateY(1px); }
.btn--small { height: 34px; padding: 0 15px; border-radius: 8px; font-size: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.btn--big { height: 54px; padding: 0 32px; font-size: 18px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.cta__note { font-size: 14px; color: var(--muted); }
.cta--center { justify-content: center; }

/* ---- Nav ----------------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: inset 0 -1px 0 transparent;
  transition: box-shadow 0.2s ease;
}
.nav.is-scrolled { box-shadow: inset 0 -1px 0 var(--line); }
.nav__in { display: flex; align-items: center; gap: 24px; height: 60px; }
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav__name { font: 700 17px/1 var(--bk-font-display); letter-spacing: -0.02em; }
.nav__links { display: flex; gap: 26px; margin-left: auto; font-size: 14px; }
.nav__links a { color: var(--muted); text-decoration: none; }
.nav__links a:hover { color: var(--ink); }
@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__in .btn { margin-left: auto; }
}

/* ---- Stages: a calm tile holding a fixed-size canvas of app windows ------------------------- */
/* The canvas (.cv) is drawn at a design size and scaled to the tile with `zoom` (JS sets --fit),
   so text stays crisp. Each window (.el) is placed in design px; .z zooms a kit component. On
   phones the canvas switches to its own layout (--pw/--ph, --px/--py/--pz) and windows are cropped
   at the right edge instead of being shrunk. */
.stage {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--tile-line);
  isolation: isolate;
}
.cv { position: relative; width: var(--w); height: var(--h); margin-inline: auto; zoom: var(--fit, 1); }
.el { position: absolute; left: var(--x, 0); top: var(--y, 0); }
.z { zoom: var(--z, 1); }
.el--menubar { left: 0; right: 0; z-index: 5; }
.el--menubar .bk-menubar { width: 100%; }
@media (max-width: 640px) {
  .cv { width: var(--pw, var(--w)); height: var(--ph, var(--h)); }
  .el { left: var(--px, var(--x, 0)); top: var(--py, var(--y, 0)); }
  .z { zoom: var(--pz, var(--z, 1)); }
  .mb-x { display: none; }
  /* Phones: the tile keeps the page gutters; every window fits the tile or is cropped on purpose. */
  .stage .bk-latest { width: 334px; }
}

/* ---- Demo shop (the product being tested; built simply, neutral) --------------------------- */
.browser {
  width: var(--bw);
  height: var(--bh);
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--win-shadow);
  font-family: var(--bk-font);
}
@media (max-width: 640px) {
  .browser { width: var(--pbw, var(--bw)); height: var(--pbh, var(--bh)); }
  .browser--stack .shop__cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .browser--stack .shop__side { padding-top: 12px; box-shadow: inset 0 1px 0 var(--line); }
}
.browser__bar { position: relative; height: 32px; background: var(--bk-project-titlebar); box-shadow: inset 0 -1px 0 var(--bk-project-line); }
.browser__url {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46%;
  height: 20px;
  border-radius: 6px;
  background: #e5e2e7;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  color: var(--bk-icon);
  white-space: nowrap;
}
.shop { height: calc(100% - 32px); padding: 14px 22px 18px; background: #f8f6f2; color: #29262d; }
.shop__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 11px; box-shadow: inset 0 -1px 0 var(--line); }
.shop__logo { font: 800 19px/1 var(--bk-font-display); letter-spacing: -0.06em; }
.shop__bag { padding: 5px 10px; border-radius: 999px; background: var(--bk-accent-soft); font-size: 11px; line-height: 1; }
.shop__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; padding-top: 14px; }
.shop__h { margin-bottom: 6px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.shop__row { position: relative; display: flex; justify-content: space-between; padding: 4px 0; font-size: 12.5px; color: var(--bk-icon); }
.shop__row > span { position: relative; z-index: 1; }
.shop__total {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 12px;
  box-shadow: inset 0 1px 0 var(--line);
  font-size: 13px;
  font-weight: 600;
}
.shop__amount { position: relative; z-index: 1; font: 700 24px/1 var(--bk-font-display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; transition: color 0.3s ease; }
.shop__amount.is-new { animation: amount-in 0.5s ease-out; }
.shop__amount.is-fixed { color: var(--ink); }
.ring { transition: opacity 0.5s ease; }
.ring.is-gone { opacity: 0; }

@keyframes amount-in { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.shop__side { display: flex; flex-direction: column; gap: 7px; padding-top: 26px; }
.shop__code { display: flex; gap: 6px; font-size: 11.5px; }
.shop__code span { flex: 1; height: 28px; padding: 0 9px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); line-height: 28px; }
.shop__code b { height: 28px; padding: 0 10px; border-radius: 6px; background: var(--bk-accent-soft); font-weight: 600; line-height: 28px; }
.shop__ok { font-size: 10.5px; color: var(--bk-icon); }
.shop__cta { margin-top: 2px; height: 32px; border-radius: 7px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 32px; text-align: center; }

/* Marks drawn on screen, in the app's pen colours. */
.ring {
  position: absolute;
  right: -26px;
  top: calc(50% + 6px);
  width: 158px;
  height: 58px;
  transform: translateY(-50%);
  stroke-width: 6.4;          /* ≈ 3.4 px at this size, the app's pen at the shop's scale */
  stroke-dasharray: 612;
  stroke-dashoffset: 0;
  pointer-events: none;
}
.hl { position: absolute; left: -3px; width: calc(100% - 8px); top: 50%; height: 20px; overflow: hidden; transform: translateY(-50%) scaleX(var(--draw, 1)); transform-origin: left center; }
.hl path { stroke-width: 17px; vector-effect: non-scaling-stroke; }

/* ---- Terminal (a coding agent, Claude Code style, light) ----------------------------------- */
.term {
  width: var(--ww);
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--win-shadow);
  font: 400 12px/1.55 var(--bk-font-mono);
  color: var(--ink);
}
@media (max-width: 640px) { .term { width: var(--pww, var(--ww)); } }
.term__bar { position: relative; display: grid; place-items: center; height: 28px; background: var(--bk-project-titlebar); box-shadow: inset 0 -1px 0 var(--bk-project-line); }
.term__bar .bk-lights > i { width: 11px; height: 11px; }
.term__title { font: 400 11px/1 var(--bk-font); color: #77737b; }
.term__body { padding: 11px 14px 13px; }
.term__body > p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term__prompt { margin-bottom: 6px; padding: 5px 8px; border-radius: 6px; background: #f5f4f6; box-shadow: inset 0 0 0 1px var(--tile-line); }
.term__glyph { color: var(--violet); font-weight: 700; }
.term__line > i { margin-right: 6px; font-style: normal; color: var(--graphite); }
.term__line > b { font-weight: 700; }
.term__line > em { font-style: normal; color: var(--muted); }
.term__out { padding-left: 14px; color: var(--muted); }
.term__busy { display: none; margin-top: 4px; color: var(--violet); }
.term__done { margin-top: 4px; color: var(--ink); font-weight: 700; }
.is-live .term__done:not(.is-on) { display: none; }
@media (max-width: 640px) {
  /* A small terminal on phones: it scrolls like a real one, newest line at the bottom. */
  .term--hero .term__body, .term--dock .term__body { height: 172px; overflow: hidden; }
  .term--dock .term__body { height: 150px; }
}
.term__busy.is-on { display: block; }
.term__busy > i { display: inline-block; font-style: normal; }
@media (prefers-reduced-motion: no-preference) { .term__busy > i { animation: spin 1.6s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
.is-live .term__line:not(.is-on), .is-live .term__out:not(.is-on) { display: none; }
.term__line.is-on, .term__out.is-on { animation: line-in 0.22s ease-out; }
@keyframes line-in { from { opacity: 0; } to { opacity: 1; } }

/* The "agent is working" state and the fixed tick, on kit statuses. */
.bk-status.is-agent, .bk-card__status.is-agent { color: var(--violet); }
.bk-card__status.is-agent { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.bk-card__status .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: bk-pulse 0.5s ease-in-out infinite alternate; }
.tick { flex: none; width: 8px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bk-status .tick { display: none; }
.bk-status.is-fixed .tick { display: block; }
.bk-status.is-fixed > i { display: none; }
.bk-card__status { display: inline-flex; align-items: center; gap: 4px; }
.bk-card__status .tick { color: var(--graphite); }
@media (prefers-reduced-motion: no-preference) {
  .is-flash .tick path, .bk-status.is-fixed .tick path { stroke-dasharray: 12; animation: tick-in 0.4s ease-out both; }
}
@keyframes tick-in { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .bk-card__status .dot { animation: none; } }

/* A little screenshot of the circled total, used as the capture's thumbnail. */
.shot { position: relative; display: block; overflow: hidden; background: #f8f6f2; }
.bk-row__thumb.shot { background: #f8f6f2; box-shadow: inset 0 0 0 1px var(--tile-line); }
.shot__label { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); font-size: 7px; font-weight: 600; color: var(--bk-icon); }
.shot__amount { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font: 700 11px/1 var(--bk-font-display); letter-spacing: -0.03em; color: var(--ink); }
.shot__ring { position: absolute; right: -3px; top: calc(50% + 1px); width: 58px; height: 23px; transform: translateY(-50%); stroke-width: 11; }
/* The other two demo clips: the bag (a saved-cart spot) and the guest-checkout form. */
.shot--bag .shot__item { position: absolute; left: 7px; top: 8px; display: grid; grid-template-columns: 12px auto; column-gap: 5px; align-items: center; }
.shot--bag .shot__item > i { grid-row: 1 / 3; width: 12px; height: 12px; border-radius: 3px; background: #e2ddd5; }
.shot--bag .shot__item > b { font-size: 6.5px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.shot--bag .shot__item > em { font-size: 6px; font-style: normal; line-height: 1.1; color: var(--bk-icon); }
.shot__save { position: absolute; right: 6px; bottom: 9px; padding: 2px 4px; border-radius: 3px; box-shadow: inset 0 0 0 0.75px var(--bk-faint); font-size: 5.5px; font-weight: 600; color: var(--bk-icon); white-space: nowrap; }
.shot__ring--save { right: -2px; top: auto; bottom: 1px; width: 46px; height: 21px; transform: none; }
.shot--form .shot__h { position: absolute; left: 7px; top: 6px; font-size: 6.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.shot__field { position: absolute; left: 7px; right: 7px; height: 9px; padding-left: 3px; border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 0.75px var(--line); font-size: 5.5px; line-height: 9px; color: var(--bk-icon); }
.shot__field:nth-of-type(2) { top: 15px; }
.shot__field.is-empty { top: 26px; color: var(--bk-faint); }
.shot__ring--form { left: 2px; right: auto; top: 30.5px; width: 58px; height: 17px; transform: translateY(-50%); }
.shot__time { position: absolute; left: 4px; bottom: 4px; padding: 1px 3px; border-radius: 3px; background: rgba(36, 35, 39, 0.72); color: #fff; font-size: 6.5px; font-weight: 600; line-height: 1.2; }

/* ---- Hero ---------------------------------------------------------------------------------- */
.hero__in {
  display: grid;
  grid-template-columns: minmax(340px, 410px) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
  padding-top: clamp(20px, 3vw, 44px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.hero__demo { margin: 0; min-width: 0; }
.hero__text { padding-bottom: 36px; }
@media (max-width: 1099px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__text { max-width: 680px; padding-bottom: 0; }
}

/* What you say, shown as your words (not app UI). */
.say { width: var(--ww); }
@media (max-width: 640px) { .say { width: var(--pww, var(--ww)); } }
.say__who { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font: 700 11px/1 var(--bk-font); letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.say__who > i { width: 7px; height: 7px; border-radius: 50%; background: var(--bk-faint); transition: background-color 0.2s ease; }
.say.is-live .say__who > i { background: var(--bk-red); }
.say__text { min-height: 3.9em; font: 600 19px/1.32 var(--bk-font-display); letter-spacing: -0.018em; color: var(--ink); text-wrap: pretty; }
@media (max-width: 640px) {
  .say__text { min-height: 2.7em; font-size: 17px; }
  .stage--hero .shop__cols { grid-template-columns: minmax(0, 1fr); }
  .stage--hero .shop__side { display: none; }
  .stage--hero .shop, .browser--stack .shop { padding-right: 34px; }
  .stage--hero .ring, .browser--stack .ring { right: -24px; }
  /* The markup strip keeps its drawing tools and colours on phones. */
  .bk-markup__divider, .bk-markup__divider ~ * { display: none; }
}

.js-latest, .js-term { transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.is-live .js-latest:not(.is-in) { opacity: 0; transform: translateY(12px); }
.is-live .js-term:not(.is-in) { opacity: 0; transform: translateY(16px); }
.js-latest { z-index: 2; }
.js-term { z-index: 3; }
.stage--hero .bk-row__note.is-empty { color: var(--bk-faint); }
.js-newbadge.is-hidden { display: none; }
/* The payoff: the task's status becomes a clear "Fixed" chip. */
.stage--hero .bk-status.is-fixed { gap: 4px; padding: 2px 7px 2px 6px; border-radius: 999px; background: var(--graphite); color: #fff; font-size: 9.5px; }
.stage--hero .bk-status.is-fixed .tick { width: 8px; height: 7px; }
.stage--hero .bk-row.is-flash { animation: row-flash 1.2s ease-out; }
@keyframes row-flash { 0% { background-color: var(--bk-accent-soft); } 100% { background-color: transparent; } }
.js-step1 { transition: opacity 0.35s ease; }
@media (max-width: 640px) { .is-live .js-step1.is-out { opacity: 0; } }

/* Step rail and pause (hero). */
.rail { display: flex; align-items: flex-start; gap: 16px; margin-top: 14px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; flex: 1; margin: 0; padding: 0; list-style: none; }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px 8px;
  width: 100%;
  padding: 4px 0 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: 500 14px/1.25 var(--bk-font);
  text-align: left;
  cursor: pointer;
}
.step__n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bk-accent-soft); color: var(--bk-selected-ink); font-size: 11px; font-weight: 700; transition: background-color 0.2s ease, color 0.2s ease; }
.step__bar { grid-column: 1 / -1; height: 2px; overflow: hidden; border-radius: 2px; background: var(--line); }
.step__bar > i { display: block; width: 100%; height: 100%; background: var(--graphite); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.step.is-on { color: var(--ink); }
.step.is-on .step__n { background: var(--graphite); color: #fff; }
.step--agent.is-on .step__n, .step--agent .step__bar > i { background: var(--violet); }
.step:hover { color: var(--ink); }
.pause {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px 0 9px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--graphite);
  font: 500 13px/1 var(--bk-font);
  cursor: pointer;
}
.pause:hover { background: var(--bk-selected-fill); }
.pause__icon { width: 12px; height: 12px; fill: currentColor; }
.pause__icon .pl { display: none; }
.pause[aria-pressed="true"] .pause__icon .pl { display: block; }
.pause[aria-pressed="true"] .pause__icon :is(.p1, .p2) { display: none; }
.no-motion .pause { display: none; }
.l-short { display: none; }
@media (max-width: 640px) {
  .steps { gap: 10px; }
  .step { grid-template-columns: auto minmax(0, 1fr); gap: 8px 6px; font-size: 13px; white-space: nowrap; }
  .step__n { width: 18px; height: 18px; font-size: 10px; }
  .l-long { display: none; }
  .l-short { display: inline; }
  .rail { gap: 10px; }
  .pause { width: 30px; padding: 0; justify-content: center; }
  .pause .js-pauselabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.hero__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 14px; }
.hero__foot .fine { margin: 0; }

.film-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 5px;
  border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(44, 39, 48, 0.06);
  color: var(--ink); font: 500 13.5px/1 var(--bk-font); cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.film-btn:hover { background: var(--bk-selected-fill); }
.film-btn__play { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--graphite); color: #fff; }
.film-btn__play svg { width: 10px; height: 10px; fill: currentColor; }
.film-btn__len { color: var(--muted); font-variant-numeric: tabular-nums; }
.film-btn__len::before { content: "·"; margin-right: 8px; }
.film-btn--quiet { margin-top: 24px; }

/* The launch film, on demand, in a calm overlay. */
.film { width: min(92vw, 78vh, 820px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: var(--win-shadow); overflow: hidden; }
.film::backdrop { background: rgba(36, 35, 39, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.film__head { position: relative; display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 44px; background: var(--bk-project-titlebar); box-shadow: inset 0 -1px 0 var(--bk-project-line); }
.film__title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.film__title span { color: var(--muted); font-weight: 500; }
.film__close { position: absolute; right: 8px; top: 6px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--graphite); cursor: pointer; }
.film__close:hover { background: rgba(0, 0, 0, 0.06); }
.film__close svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.film__frame { aspect-ratio: 1 / 1; background: #f4f3f5; }
.film__frame video { display: block; width: 100%; height: 100%; }

/* ---- How it works: rows ---------------------------------------------------------------------- */
.how { padding-top: clamp(24px, 4vw, 56px); }
.how > .wrap > .h2 { max-width: 20em; padding-bottom: clamp(32px, 4vw, 56px); }
.row {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: clamp(28px, 4.4vw, 72px);
  align-items: start;
  padding: clamp(36px, 4.6vw, 64px) 0;
  box-shadow: inset 0 1px 0 var(--line);
}
.row__text { position: sticky; top: 96px; padding-top: 6px; }
.row__fig { margin: 0; min-width: 0; }
@media (max-width: 960px) {
  .row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .row__text { position: static; max-width: 620px; }
}

/* Row 1: spoken lines. */
.lines { width: var(--ww); display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 640px) { .lines { width: var(--pww, var(--ww)); } }
.lines__li { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: baseline; font: 500 21px/1.35 var(--bk-font-display); letter-spacing: -0.018em; color: var(--muted); transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease; }
.lines__li time { font: 500 12px/1 var(--bk-font-mono); color: var(--muted); letter-spacing: 0; }
.lines__li.is-hot { color: var(--ink); font-weight: 600; }
.is-live .lines__li:not(.is-on) { opacity: 0; transform: translateY(8px); }
@media (max-width: 640px) { .lines__li { grid-template-columns: 38px minmax(0, 1fr); font-size: 17px; } }

/* Row 3: the "What you said / What Buggie wrote" toggle. */
.stage--write { padding-top: 64px; }
.seg {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 4;
  display: inline-flex;
  padding: 3px;
  border-radius: 9px;
  background: #e6e3e8;
  box-shadow: inset 0 0 0 1px var(--bk-project-card-line);
  transform: translateX(-50%);
  white-space: nowrap;
}
.seg__btn {
  height: 28px;
  padding: 0 13px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--bk-selected-ink);
  font: 500 13px/1 var(--bk-font);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.seg__btn[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.1); }
.said, .js-task { transition: opacity 0.35s ease, transform 0.4s ease, visibility 0s linear 0s; }
.stage--write:not([data-view="said"]) .said { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.25s ease, transform 0.3s ease, visibility 0s linear 0.3s; }
.stage--write[data-view="said"] .js-task { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.3s ease, visibility 0s linear 0.3s; }
.said { width: var(--ww); padding: 22px 24px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--tile-line); }
@media (max-width: 640px) { .said { width: var(--pww, var(--ww)); padding: 16px 16px 18px; } }
.said__who { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.said__text { font: 500 23px/1.4 var(--bk-font-display); letter-spacing: -0.02em; color: var(--ink); }
.said__text .um { color: var(--bk-faint); }
@media (max-width: 640px) { .said__text { font-size: 18px; } }

.task {
  width: var(--ww);
  padding: 12px 14px 14px;
  border-radius: 11px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--bk-project-card-line), 0 10px 28px rgba(44, 39, 48, 0.1);
  font-family: var(--bk-font);
  color: var(--bk-project-ink);
}
@media (max-width: 640px) { .task { width: var(--pww, var(--ww)); } }
.task__head { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.task__project { font-weight: 600; color: #4f4a53; }
.task__kind { padding: 2px 6px; border-radius: 999px; background: var(--bk-accent-soft); color: var(--bk-selected-ink); font-size: 8.5px; font-weight: 700; letter-spacing: 0.02em; }
.task__spacer { flex: 1; }
.task__time { color: var(--bk-project-faint); font-size: 9px; }
.task__title { min-height: 1.2em; margin: 8px 0 5px; font: 700 15px/1.2 var(--bk-font-display); letter-spacing: -0.025em; }
.task__desc { font-size: 10.5px; line-height: 1.42; color: #5f5c64; transition: opacity 0.35s ease; }
.task__att { display: flex; gap: 10px; margin-top: 11px; padding-top: 11px; box-shadow: inset 0 1px 0 var(--bk-project-row-line); }
.task__clip { flex: none; width: 92px; height: 58px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--tile-line); }
.task__clip .shot__amount { font-size: 13px; }
.task__clip .shot__ring { width: 70px; height: 28px; }
.task__clip .shot__label { font-size: 8px; }
.task__list { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px 5px; margin: 0; padding: 0; list-style: none; }
.task__list li { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 6px; background: var(--bk-surface-menu); box-shadow: inset 0 0 0 1px var(--bk-project-row-line); color: #5f5c64; font-size: 9px; font-weight: 500; white-space: nowrap; transition: opacity 0.3s ease, transform 0.3s ease; }
.task__list .bk-sf { width: 10px; height: 9px; color: var(--bk-icon); }
.task__list .bk-i { color: var(--bk-icon); }
.is-live .task__list li:not(.is-on) { opacity: 0; transform: translateY(4px); }
.is-live .task__desc:not(.is-on) { opacity: 0; }
.task__title.is-typing::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -0.12em; background: var(--ink); }

/* Row 4: one remark, three tasks. */
.split { width: var(--ww); font: 500 21px/1.5 var(--bk-font-display); letter-spacing: -0.018em; color: var(--ink); }
@media (max-width: 640px) { .split { width: var(--pww, var(--ww)); font-size: 16.5px; } }
.split__s { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--graphite); transition: color 0.3s ease, text-decoration-color 0.3s ease; }
.split__s sup {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--graphite);
  color: #fff;
  font: 700 10px/1 var(--bk-font);
  vertical-align: 0.35em;
  transition: opacity 0.3s ease;
}
.is-live .split__s:not(.is-on) { color: var(--muted); text-decoration-color: transparent; }
.is-live .split__s:not(.is-on) sup { opacity: 0; }
.is-live .splitrows .bk-row:not(.is-on) { display: none; }
.splitrows .bk-row.is-on { animation: row-in 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes row-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Row 5: agents, tools, destinations. */
.agents { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.agents li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; }
.agents__mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--graphite); color: #fff; }
.agents__mark svg { width: 12px; height: 12px; }
.agents__mark .g-stroke { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.agents__mark--text { font: 700 10px/1 var(--bk-font-mono); letter-spacing: -0.04em; }
.agents__mark--bare { background: none; }
.agents__mark--bare svg { width: 22px; height: 22px; }
.tools { margin-top: 24px; }
.tools__h, .dest__h { font-size: 13px; font-weight: 600; color: var(--ink); }
.tools__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.tools__list code { display: inline-block; padding: 4px 8px; border-radius: 6px; background: var(--bk-selected-fill); box-shadow: inset 0 0 0 1px var(--tile-line); color: var(--graphite); font-size: 12.5px; }
.dest { margin-top: 24px; }
.dest__list { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.45; color: var(--muted); }
.dest__list li { display: flex; align-items: flex-start; gap: 12px; }
.dest__list b { color: var(--ink); font-weight: 600; }
.dest__marks { display: flex; flex: none; gap: 6px; padding-top: 2px; color: var(--graphite); }
.dest__marks svg { width: 17px; height: 17px; fill: currentColor; }
.row--wide .row__text { position: static; }
.pj { width: var(--pjw); height: var(--pjh); }
@media (max-width: 640px) {
  .pj { width: var(--ppjw, var(--pjw)); height: var(--ppjh, var(--pjh)); }
  .pj .bk-project__content { padding: 24px 16px 20px; }
  .pj .bk-cards { margin-top: 16px; }
}

/* Row 6: the pointer that answers. */
.pointer { position: absolute; left: var(--cx, 600px); top: var(--cy, 300px); z-index: 6; width: 17px; height: 25px; fill: #111; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25)); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.pointer.is-on { opacity: 1; }
.bk-macbtn.is-pressed { background: #e8e6ea; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(0, 0, 0, 0.12); }
.qwrap { padding: 2px 12px 10px; }
.term--small .term__body > p { white-space: normal; }
.js-flash { animation: row-in 0.4s ease-out; }
.answered { color: var(--bk-muted); font-weight: 500; }
.answered::before { content: "·"; margin-right: 6px; color: var(--bk-faint); }

/* ---- Privacy ------------------------------------------------------------------------------- */
.privacy { padding: 0 0 clamp(40px, 5vw, 72px); }
.privacy .split-row { padding-top: clamp(56px, 7vw, 104px); box-shadow: inset 0 1px 0 var(--line); }
.split-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.split-row__p { font: 500 clamp(17px, 0.35vw + 15px, 20px)/1.45 var(--bk-font); letter-spacing: -0.012em; color: var(--muted); text-wrap: pretty; }
@media (max-width: 860px) { .split-row { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

.buffer { margin: clamp(32px, 4vw, 48px) 0 0; }
.buffer__tile { display: flex; justify-content: center; overflow: hidden; padding: 44px clamp(20px, 4vw, 56px) 40px; border-radius: 16px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tile-line); }
.buffer__track { display: grid; grid-template-columns: auto auto auto; align-items: end; gap: 12px 6px; }
.buffer__gone, .buffer__kept { display: flex; gap: 6px; grid-row: 2; }
.buffer__gone { grid-column: 1; }
.buffer__kept { grid-column: 2; }
.buffer__track i { display: block; width: 40px; height: 28px; flex: none; border-radius: 5px; }
.buffer__gone i { border: 1px dashed var(--bk-faint); opacity: 0.7; }
.buffer__gone i:nth-child(1) { opacity: 0.2; } .buffer__gone i:nth-child(2) { opacity: 0.3; } .buffer__gone i:nth-child(3) { opacity: 0.45; } .buffer__gone i:nth-child(4) { opacity: 0.6; }
.buffer__kept i { background: #fff; box-shadow: inset 0 0 0 1px var(--tile-line), 0 1px 2px rgba(44, 39, 48, 0.06); }
.buffer__kept i.is-clip { box-shadow: inset 0 0 0 2px var(--graphite); }
.buffer__tag { grid-row: 1; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--muted); }
.buffer__tag--gone { grid-column: 1; }
.buffer__tag--kept { grid-column: 2; padding-bottom: 8px; box-shadow: inset 0 -1px 0 var(--graphite); color: var(--ink); }
.buffer__clip { grid-column: 2; grid-row: 3; justify-self: end; margin-right: 46px; font-size: 13px; font-weight: 600; color: var(--graphite); white-space: nowrap; }
.buffer__now { grid-column: 3; grid-row: 2; align-self: center; display: flex; align-items: center; gap: 7px; margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.buffer__now > i { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: var(--bk-red); box-shadow: 0 0 0 4px var(--bk-red-soft) !important; }
@media (max-width: 1200px) { .buffer__kept i:nth-child(n+11):nth-child(-n+13) { display: none; } }
@media (max-width: 900px) { .buffer__kept i:nth-child(-n+6) { display: none; } .buffer__gone i:nth-child(-n+3) { display: none; } }
@media (max-width: 560px) {
  .buffer__tile { padding: 32px 14px 30px; }
  .buffer__track { gap: 10px 5px; }
  .buffer__gone, .buffer__kept { gap: 5px; }
  .buffer__track i { width: 22px; height: 18px; border-radius: 4px; }
  .buffer__kept i:nth-child(-n+10) { display: none; }
  .buffer__kept i:nth-child(n+11):nth-child(-n+13) { display: block; }
  .buffer__tag, .buffer__clip, .buffer__now { font-size: 12px; }
  .buffer__tag--gone { max-width: 76px; }
  .buffer__clip { margin-right: 27px; }
  .buffer__now { margin-left: 4px; gap: 6px; }
}
@media (max-width: 380px) { .buffer__kept i:nth-child(11) { display: none; } }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.fact { padding: 20px 0 24px; box-shadow: inset 0 1px 0 var(--line); }
.fact__h { font: 700 17px/1.3 var(--bk-font-display); letter-spacing: -0.015em; }
.fact p { margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 960px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* ---- Try ----------------------------------------------------------------------------------- */
.try { padding: clamp(24px, 4vw, 48px) 0 clamp(48px, 6vw, 88px); }
.try__card { display: flex; flex-direction: column; align-items: center; padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 56px); border-radius: 16px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--tile-line); text-align: center; }
.try__icon { width: 112px; height: 112px; margin-bottom: 18px; }
.try__card .h2 { max-width: 18em; }
.try__card .cta { margin-top: 30px; }
.cta--stack { flex-direction: column; gap: 14px; }
.keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.keys li { display: flex; align-items: center; gap: 10px; }
.keys__caps { display: flex; gap: 4px; }
.keys kbd { min-width: 28px; height: 28px; margin: 0; border-radius: 6px; font-size: 14px; }

/* ---- FAQ ----------------------------------------------------------------------------------- */
.faq { padding: clamp(24px, 4vw, 48px) 0 clamp(64px, 8vw, 112px); }
.faq__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(24px, 5vw, 80px); }
@media (max-width: 860px) { .faq__in { grid-template-columns: minmax(0, 1fr); } }
.faq__list { box-shadow: inset 0 -1px 0 var(--line); }
.q { box-shadow: inset 0 1px 0 var(--line); }
.q summary { position: relative; display: block; padding: 18px 40px 18px 0; font: 600 18px/1.35 var(--bk-font); letter-spacing: -0.012em; cursor: pointer; list-style: none; }
.q summary::-webkit-details-marker { display: none; }
.q summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.6px solid var(--graphite); border-bottom: 1.6px solid var(--graphite); transform: rotate(45deg); transition: transform 0.2s ease; }
.q[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.q summary:focus-visible { outline-offset: 2px; }
.q p { padding: 0 40px 20px 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.q p code { color: var(--graphite); }

/* ---- Footer -------------------------------------------------------------------------------- */
.foot { padding: 40px 0 56px; box-shadow: inset 0 1px 0 var(--line); }
.foot__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: start; }
.foot__brand { display: flex; align-items: center; gap: 12px; }
.foot__name { font: 700 16px/1.2 var(--bk-font-display); }
.foot__tag { font-size: 14px; color: var(--muted); }
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14px; }
.foot__links a { color: var(--muted); text-decoration: none; }
.foot__links a:hover { color: var(--ink); }
.foot__fine { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
@media (max-width: 720px) { .foot__in { grid-template-columns: minmax(0, 1fr); } }

/* ---- Reduced motion: everything shows its finished state ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}