/* ==========================================================================
   Radio Workflow homepage (index.php) and the shared components

   Loaded after site-chrome.css, whose tokens and primitives (bw-container,
   bw-btn, bw-pill, bw-icon, the lockup) it uses. index.php loads it, and so
   does every inner page (partials/page-head.php), as is: pages.css builds on
   its components and class names, and on home.js's effects, so renaming a
   class here means checking the inner pages too. No page loads Tailwind, so
   the global element resets below reach every page. Namespaced bw-.

   Two switches keep the motion safe:
   - every CSS animation sits inside prefers-reduced-motion: no-preference;
   - anything hidden until JavaScript reveals it is scoped to
     html.bw-motion-ok, which assets/js/home.js sets when it starts and
     motion is allowed. No JavaScript, or reduced motion, shows the final
     page.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Smooth scrolling for in-page links, but only once the page has loaded
   (home.js adds html.bw-smooth-scroll then). With it on from the start, the
   browser also animates its load-time jump to a deep link's #fragment
   (/#automation, features.php#gamification), and a web font swapping in
   during the glide left the target up to about 110px short. */
html {
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html.bw-smooth-scroll {
    scroll-behavior: smooth;
  }
}

/* Focus lands here after the announcement is dismissed; the ring would only
   outline the whole page. */
main:focus {
  outline: none;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bw-color-neutral-950);
  color: var(--bw-color-neutral-200);
  font-family: var(--bw-font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

/* Global focus ring (WCAG 2.4.7), visible on both themes. */
:focus-visible {
  outline: 2px solid var(--bw-color-brand-400);
  outline-offset: 2px;
}

::selection {
  background: var(--bw-color-brand-400);
  color: var(--bw-color-neutral-950);
}

* {
  scrollbar-color: var(--bw-color-neutral-700) transparent;
}

.bw-mono {
  font-family: var(--bw-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Sections (page.tsx pattern) ---------- */
.bw-section {
  border-top: 1px solid var(--bw-color-neutral-800);
  padding-block: 4rem;
}

.bw-section-alt {
  background: var(--bw-color-neutral-900);
  background: color-mix(in srgb, var(--bw-color-neutral-900) 30%, transparent);
}

@media (min-width: 640px) {
  .bw-section {
    padding-block: 5rem;
  }
}

.bw-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bw-color-brand-400);
}

.bw-section-title {
  margin-top: 0.5rem;
  max-width: 48rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--bw-color-white);
  text-wrap: balance;
}

.bw-section-intro {
  margin-top: 0.75rem;
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--bw-color-neutral-400);
}

@media (min-width: 640px) {
  .bw-section-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .bw-section-intro {
    font-size: 1rem;
  }
}

.bw-section-head-center {
  text-align: center;
}

.bw-section-head-center .bw-eyebrow {
  justify-content: center;
}

.bw-section-head-center .bw-section-title,
.bw-section-head-center .bw-section-intro {
  margin-inline: auto;
}

.bw-fine-print {
  margin-top: 1.5rem;
  max-width: 48rem;
  font-size: 0.75rem;
  line-height: 1.625;
  color: var(--bw-color-neutral-500);
}

.bw-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bw-color-brand-400);
}

.bw-link-arrow:hover {
  color: var(--bw-color-brand-300);
}

.bw-button-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .bw-button-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* ---------- Cards ---------- */
.bw-card {
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 0.75rem;
  background: var(--bw-color-neutral-900);
  padding: 1.25rem;
  box-shadow: var(--bw-shadow-card);
}

.bw-card-hover {
  transition: border-color 0.15s ease;
}

.bw-card-hover:hover {
  border-color: var(--bw-color-neutral-700);
}

.bw-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  background: rgb(16 152 117 / 0.1);
  color: var(--bw-color-brand-400);
}

.bw-icon-chip-mono {
  font-family: var(--bw-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
}

.bw-card-title {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--bw-color-white);
}

.bw-card-body {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--bw-color-neutral-400);
}

.bw-card-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .bw-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .bw-card-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Short cards (the three direct connections) fit three across sooner. */
@media (min-width: 768px) {
  .bw-card-grid-short {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bw-card-link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px dashed var(--bw-color-neutral-800);
  border-radius: 0.75rem;
  background: var(--bw-color-neutral-900);
  background: color-mix(in srgb, var(--bw-color-neutral-900) 40%, transparent);
  padding: 1.25rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bw-card-link:hover {
  border-color: rgb(16 152 117 / 0.45);
  background: var(--bw-color-neutral-900);
}

.bw-card-link .bw-link-arrow {
  margin-top: 0.375rem;
}

.bw-panel {
  overflow: hidden;
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 0.75rem;
  background: var(--bw-color-neutral-900);
  box-shadow: var(--bw-shadow-card);
}

.bw-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bw-color-neutral-800);
}

.bw-panel-kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bw-color-neutral-500);
}

.bw-panel-body {
  padding: 1rem;
}

.bw-panel-foot {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--bw-color-neutral-800);
  background: var(--bw-color-neutral-950);
  background: color-mix(in srgb, var(--bw-color-neutral-950) 40%, transparent);
}

.bw-check-list {
  display: grid;
  gap: 0.625rem;
}

.bw-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--bw-color-neutral-400);
}

.bw-check-list .bw-icon {
  margin-top: 0.1875rem;
  color: var(--bw-color-brand-400);
}

/* ---------- Hero ---------- */
.bw-hero {
  position: relative;
  overflow: hidden;
}

/* The faint green wash. Radial gradients rather than blur(): the live site
   found blur-3xl bands into rings on Windows, so these fade in stops. */
.bw-hero-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side, var(--bw-wash-strong), var(--bw-wash-soft) 55%, transparent) 50% -22rem / 44rem 44rem no-repeat,
    radial-gradient(closest-side, var(--bw-wash-soft), transparent) -12rem 100% / 30rem 30rem no-repeat;
}

.bw-hero-grid {
  position: relative;
  display: grid;
  align-items: center;
  gap: 3rem;
  padding-block: 3.5rem 4rem;
}

@media (min-width: 640px) {
  .bw-hero-grid {
    padding-block: 5rem;
  }
}

@media (min-width: 1024px) {
  .bw-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

.bw-hero-copy {
  min-width: 0;
}

.bw-hero-badge {
  margin-bottom: 1.25rem;
  white-space: normal;
}

.bw-hero-title {
  font-size: 2.25rem;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--bw-color-white);
  text-wrap: balance;
}

@media (min-width: 640px) {
  .bw-hero-title {
    font-size: 3rem;
  }
}

@media (min-width: 1280px) {
  .bw-hero-title {
    font-size: 3.5rem;
  }
}

.bw-hero-lede {
  margin-top: 1.25rem;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--bw-color-neutral-400);
}

@media (min-width: 640px) {
  .bw-hero-lede {
    font-size: 1.125rem;
  }
}

.bw-hero-note {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--bw-color-neutral-500);
}

.bw-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 32rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bw-color-neutral-800);
}

.bw-hero-stats div,
.bw-case-metrics div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.bw-hero-stats dd {
  font-family: var(--bw-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--bw-color-white);
}

.bw-hero-stats dt {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--bw-color-neutral-500);
}

.bw-log-card {
  position: relative;
  overflow: hidden;
  container: log-card / inline-size;
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 1rem;
  background: var(--bw-color-neutral-900);
  box-shadow: var(--bw-shadow-card);
}

.bw-log-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--bw-color-neutral-800);
}

.bw-log-station {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.bw-log-station-text {
  min-width: 0;
}

.bw-log-card-head .bw-pill {
  flex-shrink: 0;
}

.bw-log-station-icon {
  width: 2rem;
  height: 2rem;
}

.bw-log-station-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bw-color-neutral-200);
}

.bw-log-station-meta {
  font-family: var(--bw-font-mono);
  font-size: 0.6875rem;
  color: var(--bw-color-neutral-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bw-log-daypart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.25rem;
}

.bw-log-breaks {
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem 1rem 1rem;
}

.bw-log-break {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 2.25rem;
  align-items: center;
  gap: 0.625rem;
}

.bw-log-time {
  font-family: var(--bw-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--bw-color-neutral-400);
}

.bw-log-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
}

.bw-slot {
  overflow: hidden;
  padding: 0.3125rem 0.4375rem;
  border: 1px solid rgb(16 152 117 / 0.3);
  border-radius: 0.375rem;
  background: rgb(16 152 117 / 0.12);
  color: var(--bw-color-brand-200);
  font-size: 0.6875rem;
  line-height: 1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bw-slot-len {
  font-family: var(--bw-font-mono);
  color: var(--bw-color-neutral-400);
}

.bw-slot-open {
  border-style: dashed;
  border-color: rgb(245 158 11 / 0.55);
  background: rgb(245 158 11 / 0.06);
  color: var(--bw-color-amber-text);
}

.bw-log-count {
  font-family: var(--bw-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  text-align: right;
  color: var(--bw-color-neutral-400);
}

.bw-log-count-full {
  color: var(--bw-color-brand-400);
}

/* Sized by the card, not the viewport: the card is narrowest at 1024px (two
   columns) and on phones, widest on a tablet where the hero stacks. */
@container log-card (max-width: 479px) {
  .bw-slot-len {
    display: none;
  }
}

@container log-card (max-width: 379px) {
  /* A phone keeps the shape of each break (filled, filled, open) and drops
     the category names, which would only truncate to a letter or two. The
     names stay in the markup for screen readers. */
  .bw-slot {
    height: 1.25rem;
    padding: 0;
    color: transparent;
  }
  .bw-log-break {
    grid-template-columns: 2.75rem minmax(0, 1fr) 2rem;
    gap: 0.5rem;
  }
}

.bw-log-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--bw-color-neutral-800);
  background: var(--bw-color-neutral-950);
  background: color-mix(in srgb, var(--bw-color-neutral-950) 40%, transparent);
}

.bw-summary-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bw-color-neutral-500);
}

.bw-summary-value {
  margin-top: 0.25rem;
  font-family: var(--bw-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--bw-color-neutral-200);
}

.bw-summary-value-good {
  color: var(--bw-color-brand-400);
}

.bw-summary-of {
  color: var(--bw-color-neutral-500);
}

.bw-fill-meter {
  display: block;
  width: 100%;
  height: 0.375rem;
  margin-top: 0.5rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bw-color-neutral-800);
  -webkit-appearance: none;
  appearance: none;
}

.bw-fill-meter::-webkit-progress-bar {
  background: var(--bw-color-neutral-800);
  border-radius: 999px;
}

.bw-fill-meter::-webkit-progress-value {
  background: var(--bw-color-brand-500);
  border-radius: 999px;
}

.bw-fill-meter::-moz-progress-bar {
  background: var(--bw-color-brand-500);
  border-radius: 999px;
}

.bw-log-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  padding: 0 1rem 0.875rem;
  background: var(--bw-color-neutral-950);
  background: color-mix(in srgb, var(--bw-color-neutral-950) 40%, transparent);
  font-size: 0.6875rem;
  color: var(--bw-color-neutral-500);
}

.bw-log-checks li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.bw-log-checks .bw-icon {
  color: var(--bw-color-brand-400);
}

/* ---------- Proof band ---------- */
.bw-proof-band {
  border-top: 1px solid var(--bw-color-neutral-800);
  background: var(--bw-color-neutral-900);
  background: color-mix(in srgb, var(--bw-color-neutral-900) 30%, transparent);
  padding-block: 2.5rem;
}

/* The original site's header logo (Radio Workflow with the Local Radio
   Networks mark), pale and made for dark backgrounds, shown as it is. The
   width and height attributes (300 x 102) reserve its space. */
.bw-proof-logo {
  display: block;
  width: 11.25rem;
  height: auto;
  margin: 0 auto 1.5rem;
}

@media (min-width: 640px) {
  .bw-proof-logo {
    width: 15rem;
    margin-bottom: 1.75rem;
  }
}

.bw-proof-band-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bw-color-neutral-500);
  text-align: center;
}

.bw-proof-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}

@media (min-width: 768px) {
  .bw-proof-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.bw-stat-card {
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 0.75rem;
  background: var(--bw-color-neutral-900);
  padding: 1rem;
  box-shadow: var(--bw-shadow-card);
}

.bw-stat-value {
  font-family: var(--bw-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  color: var(--bw-color-white);
}

.bw-stat-value-accent {
  color: var(--bw-color-brand-400);
}

/* A word, not a figure: the sans face (mono is for numbers). */
.bw-stat-value-word {
  font-family: var(--bw-font-sans);
}

@media (max-width: 479px) {
  .bw-proof-stats .bw-stat-value {
    font-size: 1.25rem;
  }
}

.bw-stat-label {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bw-color-neutral-500);
}

.bw-stat-detail {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--bw-color-neutral-500);
}

.bw-capability {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 999px;
  background: var(--bw-color-neutral-900);
  font-size: 0.8125rem;
  color: var(--bw-color-neutral-300);
}

.bw-capability .bw-icon {
  color: var(--bw-color-brand-400);
}

/* ---------- Features ---------- */
.bw-network-note {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 0.75rem;
  background: var(--bw-color-neutral-900);
  font-size: 0.875rem;
  color: var(--bw-color-neutral-400);
}

.bw-network-note .bw-button-row {
  margin-top: 0;
}

.bw-network-note-text {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .bw-network-note {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .bw-network-note-text {
    align-items: center;
  }
}

/* ---------- Two-column feature layout (AI, Voice Buddy, TaaS) ---------- */
.bw-split {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .bw-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 3.5rem;
  }
  .bw-split-top {
    align-items: start;
  }
}

.bw-feature-list {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

.bw-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.bw-feature-row .bw-card-title {
  margin-top: 0.4375rem;
}

.bw-mini-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .bw-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bw-mini-grid .bw-card {
  padding: 1rem;
}

/* ---------- Broadcast Buddy chat ---------- */
.bw-chat-who {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.bw-chat-avatar {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  color: var(--bw-buddy-ink);
  filter: var(--bw-buddy-rim);
}

.bw-chat-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bw-color-neutral-200);
}

.bw-chat-role {
  font-size: 0.6875rem;
  color: var(--bw-color-neutral-500);
}

.bw-chat-thread {
  display: grid;
  gap: 0.75rem;
}

.bw-bubble {
  max-width: 88%;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.55;
}

.bw-bubble-user {
  justify-self: end;
  border-bottom-right-radius: 0.25rem;
  background: rgb(16 152 117 / 0.16);
  color: var(--bw-color-neutral-200);
}

.bw-bubble-buddy {
  justify-self: start;
  border: 1px solid var(--bw-color-neutral-800);
  border-bottom-left-radius: 0.25rem;
  background: var(--bw-color-neutral-950);
  color: var(--bw-color-neutral-300);
}

.bw-bubble-script {
  margin-top: 0.5rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--bw-color-brand-500);
  color: var(--bw-color-neutral-200);
}

.bw-spot-player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 0.5rem;
  background: var(--bw-color-neutral-900);
}

.bw-spot-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--bw-btn-primary-bg);
  color: var(--bw-btn-primary-fg);
}

.bw-spot-wave {
  flex: 1 1 4rem;
  min-width: 4rem;
  height: 1.5rem;
}

.bw-spot-wave rect {
  fill: var(--bw-color-brand-500);
}

.bw-spot-meta {
  font-family: var(--bw-font-mono);
  font-size: 0.6875rem;
  color: var(--bw-color-neutral-500);
  white-space: nowrap;
}

.bw-mock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.bw-mock-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--bw-color-neutral-700);
  border-radius: 0.375rem;
  font-size: 0.75rem;
  color: var(--bw-color-neutral-300);
}

.bw-mock-btn-accent {
  border-color: rgb(16 152 117 / 0.45);
  color: var(--bw-color-brand-300);
}

/* ---------- Automation ---------- */
.bw-systems {
  margin-top: 1.5rem;
}

.bw-systems summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bw-color-white);
}

.bw-systems summary::-webkit-details-marker {
  display: none;
}

/* .panel clips its overflow, so an outside focus ring would be cut off. */
.bw-systems summary:focus-visible,
.bw-table-scroll:focus-visible {
  outline-offset: -2px;
}

.bw-systems summary .bw-icon {
  color: var(--bw-color-neutral-500);
  transition: transform 0.15s ease;
}

.bw-systems[open] summary {
  border-bottom: 1px solid var(--bw-color-neutral-800);
}

.bw-systems[open] summary .bw-icon {
  transform: rotate(180deg);
}

.bw-systems-count {
  margin-left: 0.5rem;
}

.bw-systems-list {
  columns: 1;
  column-gap: 1.5rem;
  padding: 1rem;
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--bw-color-neutral-400);
}

@media (min-width: 480px) {
  .bw-systems-list {
    columns: 2;
  }
}

@media (min-width: 768px) {
  .bw-systems-list {
    columns: 3;
  }
}

@media (min-width: 1024px) {
  .bw-systems-list {
    columns: 4;
  }
}

.bw-systems-list li {
  break-inside: avoid;
}

.bw-systems-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--bw-color-neutral-400);
}

/* ---------- Steps (page.tsx How it works) ---------- */
.bw-steps {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .bw-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bw-step-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bw-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border: 1px solid rgb(16 152 117 / 0.4);
  border-radius: 999px;
  background: rgb(16 152 117 / 0.1);
  font-family: var(--bw-font-mono);
  font-size: 0.875rem;
  color: var(--bw-color-brand-400);
}

.bw-step-line {
  display: none;
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgb(16 152 117 / 0.4), transparent);
}

@media (min-width: 768px) {
  .bw-step-line {
    display: block;
  }
}

.bw-step .bw-card-title {
  margin-top: 1rem;
}

.bw-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.875rem;
}

.bw-steps-foot {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.5rem;
  padding: 1.25rem;
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 0.75rem;
  background: var(--bw-color-neutral-900);
  box-shadow: var(--bw-shadow-card);
}

.bw-steps-foot p {
  font-size: 0.875rem;
  color: var(--bw-color-neutral-400);
}

.bw-steps-foot strong {
  color: var(--bw-color-white);
  font-weight: 600;
}

@media (min-width: 768px) {
  .bw-steps-foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------- Plan panels (Voice Buddy, Traffic as a Service) ---------- */
.bw-plan {
  position: relative;
}

.bw-plan .bw-panel-body {
  padding: 1.5rem;
}

.bw-plan-lockup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bw-plan-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bw-color-white);
}

.bw-plan-sub {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  color: var(--bw-color-neutral-400);
}

.bw-plan .bw-check-list {
  margin-top: 1.25rem;
  padding-block: 1.25rem;
  border-block: 1px solid var(--bw-color-neutral-800);
}

.bw-plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.625rem;
  margin-top: 1.25rem;
}

.bw-plan-price-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bw-color-white);
}

.bw-plan-price-note {
  font-size: 0.75rem;
  color: var(--bw-color-neutral-500);
}

.bw-plan .bw-btn-block {
  margin-top: 1.25rem;
}

.bw-plan-featured {
  border-color: rgb(16 152 117 / 0.5);
}

/* ---------- Comparison ---------- */
.bw-compare-panel {
  margin-top: 2.5rem;
}

.bw-table-hint {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem 0;
  font-size: 0.75rem;
  color: var(--bw-color-neutral-500);
}

@media (min-width: 640px) {
  .bw-table-hint {
    display: none;
  }
}

.bw-table-scroll {
  overflow-x: auto;
}

.bw-compare {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: left;
}

.bw-compare caption {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bw-color-neutral-800);
  text-align: left;
}

.bw-compare th,
.bw-compare td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bw-color-neutral-800);
  border-bottom: 1px solid color-mix(in srgb, var(--bw-color-neutral-800) 70%, transparent);
  vertical-align: top;
}

.bw-compare thead th {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bw-color-neutral-500);
}

.bw-compare thead .bw-compare-us {
  color: var(--bw-color-brand-400);
}

.bw-compare tbody th {
  font-weight: 500;
  color: var(--bw-color-neutral-200);
}

.bw-compare td {
  color: var(--bw-color-neutral-400);
}

.bw-compare tbody tr:last-child th,
.bw-compare tbody tr:last-child td {
  border-bottom: 0;
}

.bw-compare td.bw-compare-us {
  background: rgb(16 152 117 / 0.06);
  color: var(--bw-color-neutral-100);
}

.bw-compare-yes {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.bw-compare-yes .bw-icon {
  color: var(--bw-color-brand-400);
}

.bw-compare-cta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-top: 1px solid var(--bw-color-neutral-800);
  background: var(--bw-color-neutral-950);
  background: color-mix(in srgb, var(--bw-color-neutral-950) 40%, transparent);
}

.bw-compare-cta p {
  font-size: 0.875rem;
  color: var(--bw-color-neutral-400);
}

.bw-compare-cta .bw-button-row {
  margin-top: 0;
}

@media (min-width: 768px) {
  .bw-compare-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------- Results ---------- */
.bw-results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 2.5rem;
}

@media (min-width: 1024px) {
  .bw-results-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}

.bw-results-grid .bw-stat-label {
  color: var(--bw-color-neutral-200);
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.875rem;
}

.bw-case {
  display: grid;
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  .bw-case {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
  }
}

.bw-case-quote {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--bw-color-neutral-200);
}

@media (min-width: 640px) {
  .bw-case-quote {
    font-size: 1.125rem;
  }
}

.bw-case-quote .bw-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--bw-color-brand-400);
}

.bw-cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.8125rem;
  font-style: normal;
  color: var(--bw-color-neutral-500);
}

.bw-case-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.bw-case-metrics div {
  padding: 0.875rem;
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 0.5rem;
  background: var(--bw-color-neutral-950);
}

.bw-case-metrics dd {
  font-family: var(--bw-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  color: var(--bw-color-brand-400);
}

.bw-case-metrics dt {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--bw-color-neutral-500);
}

/* ---------- ROI calculator ---------- */
.bw-roi {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (min-width: 1024px) {
  .bw-roi {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

.bw-roi-field + .bw-roi-field {
  margin-top: 1.5rem;
}

.bw-roi-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.bw-roi-field label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bw-color-neutral-500);
}

.bw-roi-field output {
  font-family: var(--bw-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem;
  color: var(--bw-color-white);
}

.bw-roi-range {
  width: 100%;
  margin: 0.625rem 0 0;
  accent-color: var(--bw-color-brand-500);
  cursor: pointer;
}

.bw-roi-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.bw-roi-results .bw-stat-card {
  box-shadow: none;
  background: var(--bw-color-neutral-950);
}

.bw-roi-results-title {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bw-color-white);
}

.bw-roi .bw-panel-body {
  padding: 1.25rem;
}

.bw-roi-quote {
  margin-top: 1.75rem;
}

/* ---------- Gamification ---------- */
.bw-leader-list {
  display: grid;
}

.bw-leader {
  display: grid;
  grid-template-columns: 1.5rem 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bw-color-neutral-800);
  border-bottom: 1px solid color-mix(in srgb, var(--bw-color-neutral-800) 70%, transparent);
}

.bw-leader-rank {
  font-family: var(--bw-font-mono);
  font-size: 0.875rem;
  color: var(--bw-color-neutral-500);
  text-align: center;
}

.bw-leader-first .bw-leader-rank {
  color: var(--bw-color-brand-400);
}

.bw-leader-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--bw-color-neutral-800);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bw-color-neutral-200);
}

.bw-leader-first .bw-leader-avatar {
  background: rgb(16 152 117 / 0.2);
  color: var(--bw-color-brand-300);
}

.bw-leader-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bw-color-neutral-200);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bw-leader-sales {
  font-size: 0.75rem;
  color: var(--bw-color-neutral-500);
}

.bw-leader-xp {
  font-family: var(--bw-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--bw-color-neutral-200);
  text-align: right;
}

.bw-leader-today {
  display: block;
  font-size: 0.6875rem;
  color: var(--bw-color-brand-400);
}

.bw-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.bw-game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 2rem;
}

.bw-game-grid .bw-card {
  padding: 1rem;
}

.bw-game-grid .bw-card-title {
  margin-top: 0.75rem;
}

.bw-game-grid .bw-card-body {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
}

.bw-section-link {
  margin-top: 1.75rem;
}

/* ---------- Testimonials ---------- */
.bw-quote-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .bw-quote-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bw-quote-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
}

.bw-stars {
  display: flex;
  gap: 0.125rem;
  color: var(--bw-color-brand-400);
}

.bw-quote-card blockquote {
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: var(--bw-color-neutral-300);
}

.bw-quote-card strong {
  font-weight: 600;
  color: var(--bw-color-white);
}

.bw-quote-card figcaption {
  font-size: 0.8125rem;
  color: var(--bw-color-neutral-500);
}

/* ---------- Closing CTA ---------- */
.bw-closing {
  text-align: center;
}

.bw-closing .bw-container {
  max-width: 48rem;
}

.bw-closing .bw-section-title {
  margin-top: 1.5rem;
  margin-inline: auto;
}

.bw-closing .bw-section-intro {
  margin-inline: auto;
}

.bw-closing .bw-button-row {
  justify-content: center;
}

/* ==========================================================================
   Broadcast Buddy layer (revision 2)

   Brings back the live page's personality inside the Buddy system: the DJ
   Buddy hero, his poses through the page, the marquee, reveals, count-ups,
   the typing chat, tilt, magnetic buttons, parallax, cursor glow, confetti.

   Two switches keep it safe:
   - Every CSS animation sits inside prefers-reduced-motion: no-preference.
   - Anything hidden until JavaScript reveals it is scoped to
     html.bw-motion-ok, which home.js sets only when motion is allowed and
     IntersectionObserver exists. So no JS and reduced motion both show the
     finished page. (The hero Buddy's loading state is the one exception:
     it hangs off html.bw-js, see "Hero Buddy" below.)
   Pointer effects (tilt, magnetic, cursor glow) only start in home.js when
   the device matches (hover: hover) and (pointer: fine).
   ========================================================================== */

:root {
  --bw-buddy-mic: #4a4a4a;
  --bw-buddy-mic-grille: #5c5c5c;
  --bw-prop-dark: #2a2a2a;
  --bw-prop-darker: #1a1a1a;
  --bw-prop-clip: #444444;
  --bw-orb-core: rgb(16 152 117 / 0.45);
  --bw-orb-lime: rgb(128 255 68 / 0.18);
  --bw-orb-edge: rgb(16 152 117 / 0.07);
  --bw-blob-green: rgb(16 152 117 / 0.22);
  --bw-blob-lime: rgb(128 255 68 / 0.14);
  --bw-closing-glow: rgb(16 152 117 / 0.16);
  --bw-buddy-glow: drop-shadow(0 0 30px rgb(16 152 117 / 0.4));
  --bw-glass-bg: rgb(23 23 23 / 0.72);
  --bw-glass-border: rgb(255 255 255 / 0.1);
  --bw-confetti-white: #ffffff;
}

/* ---------- Buddy's parts, shared by every pose ---------- */
.bw-buddy-ink {
  fill: var(--bw-buddy-ink);
}

.bw-buddy-ink-stroke {
  stroke: var(--bw-buddy-ink);
}

.bw-buddy-mic {
  fill: var(--bw-buddy-mic);
}

.bw-buddy-mic-grille {
  fill: var(--bw-buddy-mic-grille);
}

.bw-prop-dark {
  fill: var(--bw-prop-dark);
}

.bw-prop-darker {
  fill: var(--bw-prop-darker);
}

.bw-prop-clip {
  fill: var(--bw-prop-clip);
}

.bw-buddy-note {
  font-family: var(--bw-font-sans);
  opacity: 0.5;
}

.bw-buddy-note-late {
  opacity: 0.4;
}

.bw-buddy-sparkle {
  opacity: 0.6;
}

.bw-confetti-fill-green {
  fill: #109875;
}

.bw-confetti-fill-lime {
  fill: #80ff44;
}

.bw-confetti-fill-white {
  fill: var(--bw-confetti-white);
}

/* Each moving limb turns about its shoulder, which is a corner of its own
   bounding box, so fill-box keeps the pivot right whatever the viewBox. */
.bw-buddy-rock-arm,
.bw-pose-dance-left,
.bw-pose-trophy-left,
.bw-pose-cheer-left {
  transform-box: fill-box;
  transform-origin: 100% 100%;
}

.bw-pose-wave-arm,
.bw-pose-dance-right,
.bw-pose-trophy-right,
.bw-pose-cheer-right {
  transform-box: fill-box;
  transform-origin: 0% 100%;
}

.bw-pose-confetti-spin {
  transform-box: fill-box;
  transform-origin: center;
}

.bw-pose-keyboard {
  fill: var(--bw-prop-darker);
}

.bw-pose-keyboard-deck {
  fill: var(--bw-prop-dark);
}

.bw-pose-key {
  fill: var(--bw-prop-clip);
}

.bw-eyebrow-buddy {
  width: 1.25rem;
  height: auto;
  aspect-ratio: 108 / 92;
  flex-shrink: 0;
  color: var(--bw-buddy-ink);
  filter: var(--bw-buddy-rim);
}

/* ---------- Hero ---------- */
.bw-hero-blob {
  position: absolute;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  pointer-events: none;
  transform: translate3d(0, var(--bw-parallax-y, 0px), 0);
}

.bw-hero-blob-green {
  top: 10%;
  left: 4%;
  background: radial-gradient(circle closest-side, var(--bw-blob-green), transparent);
}

.bw-hero-blob-lime {
  right: 8%;
  bottom: 6%;
  width: 22rem;
  height: 22rem;
  background: radial-gradient(circle closest-side, var(--bw-blob-lime), transparent);
}

@media (max-width: 639px) {
  .bw-hero-grid {
    padding-top: 2rem;
    gap: 2.5rem;
  }
  .bw-hero-badge {
    margin-bottom: 1rem;
  }
}

/* The page's one lime gradient, with the live page's slow 8s shimmer. On the
   light theme it shimmers between deep greens instead: lime on white has no
   contrast. */
.bw-h1-accent {
  display: block;
  padding-bottom: 0.08em;
  background-image: linear-gradient(135deg, #33cfa7 0%, #80ff44 50%, #33cfa7 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (forced-colors: active) {
  .bw-h1-accent {
    background: none;
    color: CanvasText;
  }
}

.bw-live-dot {
  position: relative;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--bw-color-brand-400);
}

.bw-live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  opacity: 0;
}

.bw-hero-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.bw-buddy-orb {
  position: absolute;
  top: 7.5rem;
  left: 50%;
  width: 22rem;
  height: 22rem;
  margin: -11rem 0 0 -11rem;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--bw-orb-core) 0%, var(--bw-orb-lime) 30%, var(--bw-orb-edge) 60%, transparent 100%);
  transform: translate3d(0, var(--bw-parallax-y, 0px), 0);
  pointer-events: none;
}

.bw-buddy-float {
  position: relative;
}

.bw-hero-buddy {
  display: block;
  width: auto;
  height: 15rem;
  aspect-ratio: 190 / 236;
  overflow: visible;
  filter: var(--bw-buddy-glow);
}

.bw-work-chips {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  margin-top: 1.25rem;
}

.bw-work-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--bw-glass-border);
  border-radius: 0.75rem;
  background: var(--bw-glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--bw-shadow-overlay);
}

.bw-work-chip > span:last-child {
  min-width: 0;
}

.bw-work-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  background: rgb(16 152 117 / 0.15);
  color: var(--bw-color-brand-400);
}

.bw-work-chip-title,
.bw-work-chip-detail {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bw-work-chip-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bw-color-white);
}

.bw-work-chip-detail {
  font-size: 0.6875rem;
  color: var(--bw-color-neutral-400);
}

@media (max-width: 639px) {
  /* Two per row on a phone: let the words wrap rather than truncate. */
  .bw-work-chip-title,
  .bw-work-chip-detail {
    white-space: normal;
  }
}

@media (min-width: 640px) {
  .bw-buddy-orb {
    top: 50%;
    width: 34rem;
    height: 34rem;
    margin: -17rem 0 0 -17rem;
  }
  .bw-hero-stage {
    padding-block: 1.5rem;
  }
  .bw-hero-buddy {
    height: 24rem;
  }
  /* Around Buddy rather than under him: clear of his face, mic and waves. */
  .bw-work-chips {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    pointer-events: none;
  }
  .bw-work-chip {
    position: absolute;
    max-width: 15rem;
  }
  .bw-work-chip-1 {
    top: 0;
    left: 0;
  }
  .bw-work-chip-2 {
    top: 46%;
    right: 0;
  }
  .bw-work-chip-3 {
    top: 62%;
    left: 0;
  }
  .bw-work-chip-4 {
    right: 4%;
    bottom: 2%;
  }
}

@media (min-width: 1024px) {
  .bw-hero-buddy {
    height: 29rem;
  }
}

/* The grin: hover on Buddy, or keyboard focus on the hero's buttons, and the
   smirk becomes a grin while the rock arm waves. Nothing depends on it. */
.bw-buddy-smirk,
.bw-buddy-grin {
  transition: opacity 0.15s ease;
}

.bw-buddy-grin {
  opacity: 0;
}

.bw-hero-stage:hover .bw-buddy-smirk,
.bw-hero-copy:focus-within ~ .bw-hero-stage .bw-buddy-smirk {
  opacity: 0;
}

.bw-hero-stage:hover .bw-buddy-grin,
.bw-hero-copy:focus-within ~ .bw-hero-stage .bw-buddy-grin {
  opacity: 1;
}

.bw-scroll-cue {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  display: none;
  margin-left: -0.5rem;
  color: var(--bw-color-neutral-500);
}

@media (min-width: 1024px) and (min-height: 760px) {
  .bw-scroll-cue {
    display: block;
  }
}

/* ---------- Marquee (proof band) ---------- */
.bw-marquee {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: var(--bw-container);
  margin: 1.25rem auto 0;
  padding-inline: 1rem;
}

.bw-marquee-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.bw-marquee-track {
  display: flex;
  width: max-content;
}

.bw-marquee-group {
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
  padding-right: 0.5rem;
}

.bw-marquee-group .bw-capability {
  flex-shrink: 0;
  white-space: nowrap;
}

.bw-marquee-icon-play {
  display: none;
}

.bw-marquee.bw-is-paused .bw-marquee-icon-pause {
  display: none;
}

.bw-marquee.bw-is-paused .bw-marquee-icon-play {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  /* A still list: one copy, wrapped, no mask, no pause button. */
  .bw-marquee-copy,
  .bw-marquee-toggle {
    display: none;
  }
  .bw-marquee-viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .bw-marquee-track {
    width: auto;
  }
  .bw-marquee-group {
    flex-wrap: wrap;
    justify-content: center;
    flex-shrink: 1;
    width: 100%;
    padding-right: 0;
  }
}

.bw-spotlight-list {
  margin-top: 1.5rem;
}

/* ---------- Peeking Buddy (log card, chat) ---------- */
.bw-peek-wrap {
  position: relative;
  min-width: 0;
  padding-top: 3.25rem;
}

.bw-peek-head {
  position: absolute;
  top: 0;
  right: 2.5rem;
  z-index: 0;
  width: 5rem;
  height: auto;
  aspect-ratio: 108 / 92;
  color: var(--bw-buddy-ink);
  filter: var(--bw-buddy-rim);
}

.bw-peek-wrap > .bw-log-card,
.bw-peek-wrap > .bw-panel {
  position: relative;
  z-index: 1;
}

.bw-peek-hands {
  position: absolute;
  top: calc(3.25rem - 0.37rem);
  right: 2.5rem;
  z-index: 2;
  width: 5rem;
  height: auto;
  aspect-ratio: 108 / 16;
}

.bw-peek-wrap-chat .bw-peek-head,
.bw-peek-wrap-chat .bw-peek-hands {
  right: auto;
  left: 2.5rem;
}

/* ---------- Chat mock ---------- */
.bw-chat-wrap {
  position: relative;
  padding-block: 0.5rem 1.75rem;
}

.bw-chat {
  display: flex;
  flex-direction: column;
}

.bw-float-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--bw-glass-border);
  border-radius: 999px;
  background: var(--bw-glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--bw-shadow-overlay);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bw-color-neutral-200);
  white-space: nowrap;
  pointer-events: none;
}

.bw-float-chip-top {
  top: 1.5rem;
  right: 0.5rem;
}

.bw-float-chip-bottom {
  bottom: 0;
  left: 0.5rem;
}

@media (min-width: 1024px) {
  .bw-float-chip-top {
    right: -0.75rem;
  }
  .bw-float-chip-bottom {
    left: -0.75rem;
  }
}

.bw-typed {
  position: relative;
}

.bw-typed-live {
  display: none;
}

.bw-motion-ok .bw-typed.bw-is-typing .bw-typed-full {
  color: transparent;
}

.bw-motion-ok .bw-typed.bw-is-typing .bw-typed-live {
  position: absolute;
  top: 0;
  right: 0;
  left: 0.75rem;
  display: block;
  color: var(--bw-color-neutral-200);
}

.bw-typed-live::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--bw-color-brand-400);
}

.bw-motion-ok .bw-chat-after {
  opacity: 0;
  translate: 0 6px;
  transition: opacity 0.4s ease, translate 0.4s ease;
}

.bw-motion-ok .bw-chat.bw-is-typed .bw-chat-after {
  opacity: 1;
  translate: 0 0;
}

.bw-chat-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 1rem 1rem;
  padding: 0.375rem 0.375rem 0.375rem 0.875rem;
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 999px;
  background: var(--bw-color-neutral-950);
}

.bw-chat-input-field {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 0.8125rem;
  color: var(--bw-color-neutral-500);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bw-chat-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--bw-btn-primary-bg);
  color: var(--bw-btn-primary-fg);
}

/* ---------- Setup steps: a pose per step ---------- */
.bw-step-art {
  display: block;
  width: auto;
  height: 6.5rem;
  margin-bottom: 1rem;
  overflow: visible;
}

@media (min-width: 768px) {
  .bw-step-art {
    height: 8rem;
  }
}

/* ---------- Voice Buddy panel ---------- */
.bw-plan-buddy-stage {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.bw-plan-buddy {
  width: auto;
  height: 7rem;
  aspect-ratio: 130 / 228;
  filter: var(--bw-buddy-glow);
}

/* ---------- ROI: thinking Buddy and his bubble ---------- */
.bw-roi-results-wrap {
  position: relative;
  min-width: 0;
  padding-top: 3.5rem;
}

.bw-roi-buddy {
  position: absolute;
  top: 0;
  right: 0.75rem;
  z-index: 2;
  width: auto;
  height: 7.5rem;
  aspect-ratio: 190 / 240;
  filter: var(--bw-buddy-glow);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .bw-roi-results-wrap {
    padding-top: 0;
  }
  .bw-roi-buddy {
    top: -5.25rem;
    right: 1rem;
  }
}

.bw-roi-results-wrap > .bw-panel {
  height: 100%;
}

.bw-roi-results-panel {
  position: relative;
}

.bw-roi-results-panel .bw-panel-body {
  position: relative;
  z-index: 1;
}

.bw-buddy-says {
  position: relative;
  max-width: calc(100% - 5rem);
  margin: 0 0 1.25rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid rgb(16 152 117 / 0.3);
  border-radius: 0.875rem;
  background: rgb(16 152 117 / 0.1);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--bw-color-neutral-200);
}

/* Thought-bubble dots, drifting up towards Buddy. */
.bw-buddy-says::before,
.bw-buddy-says::after {
  content: "";
  position: absolute;
  border: 1px solid rgb(16 152 117 / 0.3);
  border-radius: 999px;
  background: rgb(16 152 117 / 0.1);
}

.bw-buddy-says::before {
  top: 0.25rem;
  right: -1rem;
  width: 0.625rem;
  height: 0.625rem;
}

.bw-buddy-says::after {
  top: -0.375rem;
  right: -1.75rem;
  width: 0.4375rem;
  height: 0.4375rem;
}

/* ---------- Confetti ---------- */
.bw-confetti-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.bw-confetti-bit {
  position: absolute;
  top: var(--bw-confetti-y, 20%);
  left: var(--bw-confetti-x, 50%);
  width: 7px;
  height: 10px;
  border-radius: 2px;
  opacity: 0;
}

.bw-confetti-bit.bw-is-green {
  background: #109875;
}

.bw-confetti-bit.bw-is-lime {
  background: #80ff44;
}

.bw-confetti-bit.bw-is-white {
  background: var(--bw-confetti-white);
}

/* ---------- Gamification ---------- */
.bw-leaders-wrap {
  position: relative;
  min-width: 0;
  padding-top: 5rem;
}

.bw-trophy-buddy {
  position: absolute;
  top: 0;
  left: 0.5rem;
  z-index: 3;
  width: auto;
  height: 8.5rem;
  aspect-ratio: 175 / 260;
  filter: var(--bw-buddy-glow);
  pointer-events: none;
}

.bw-leaders {
  position: relative;
}

.bw-leaders .bw-panel-head {
  padding-left: 6.5rem;
}

.bw-leader-main {
  min-width: 0;
}

.bw-xp-bar {
  display: block;
  height: 4px;
  margin-top: 0.375rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bw-color-neutral-800);
}

.bw-xp-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--bw-color-brand-500);
  transform-origin: left center;
}

.bw-xp-fill-1 {
  width: 85%;
}

.bw-xp-fill-2 {
  width: 73%;
}

.bw-xp-fill-3 {
  width: 65%;
}

.bw-streak {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.bw-streak-days {
  display: flex;
  gap: 0.25rem;
}

.bw-streak-day {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 999px;
  background: var(--bw-color-brand-500);
}

.bw-badge-unlock {
  position: relative;
}

/* ---------- Closing ---------- */
.bw-closing {
  position: relative;
  overflow: hidden;
}

.bw-closing .bw-container {
  position: relative;
}

.bw-closing-glow {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 40rem;
  height: 40rem;
  margin-left: -20rem;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--bw-closing-glow), transparent);
  transform: translate3d(0, var(--bw-parallax-y, 0px), 0);
  pointer-events: none;
}

.bw-closing-buddy-float {
  display: flex;
  justify-content: center;
}

.bw-closing-buddy {
  width: auto;
  height: 9rem;
  aspect-ratio: 120 / 195;
  filter: var(--bw-buddy-glow);
}

@media (min-width: 1024px) {
  .bw-closing-buddy {
    height: 11rem;
  }
}

/* ---------- Pointer effects (driven by home.js) ---------- */
.bw-btn.bw-magnetic {
  transform: translate3d(var(--bw-mag-x, 0px), var(--bw-mag-y, 0px), 0);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bw-tilt {
  transform: perspective(900px) rotateX(var(--bw-tilt-x, 0deg)) rotateY(var(--bw-tilt-y, 0deg));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s ease;
}

.bw-tilt.bw-is-tilting {
  transition: transform 0.08s linear, border-color 0.15s ease;
}

.bw-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 28rem;
  height: 28rem;
  margin: -14rem 0 0 -14rem;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgb(16 152 117 / 0.14), transparent);
  opacity: 0;
  transform: translate3d(var(--bw-glow-x, -100vw), var(--bw-glow-y, -100vh), 0);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.bw-cursor-glow.bw-is-on {
  opacity: 1;
}

/* ---------- Scroll reveal (single IntersectionObserver in home.js) ---------- */
.bw-motion-ok .bw-reveal {
  opacity: 0;
  translate: 0 1.5rem;
  transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--bw-reveal-delay, 0ms);
}

.bw-motion-ok .bw-reveal.bw-tilt {
  transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s ease;
  transition-delay: var(--bw-reveal-delay, 0ms);
}

.bw-motion-ok .bw-reveal.bw-tilt.bw-is-tilting {
  transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.08s linear, border-color 0.15s ease;
}

.bw-motion-ok .bw-reveal.bw-is-visible {
  opacity: 1;
  translate: 0 0;
}

/* Buddy pops up behind the card once it has arrived. */
.bw-motion-ok .bw-peek-wrap .bw-peek-head {
  translate: 0 55%;
  transition: translate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s;
}

.bw-motion-ok .bw-peek-wrap.bw-is-visible .bw-peek-head {
  translate: 0 0;
}

/* The leaderboard comes alive: rows slide in, XP bars fill, the streak
   lights up day by day, then a badge unlocks with a pop. */
.bw-motion-ok .bw-leaders .bw-leader {
  opacity: 0;
  translate: 1.5rem 0;
  transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.bw-motion-ok .bw-leaders .bw-xp-fill {
  scale: 0 1;
  transition: scale 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.bw-motion-ok .bw-leaders .bw-streak-day {
  opacity: 0.25;
  scale: 0.5;
  transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bw-motion-ok .bw-leaders .bw-badge-unlock {
  opacity: 0;
  scale: 0.6;
}

.bw-motion-ok .bw-leaders.bw-is-live .bw-leader {
  opacity: 1;
  translate: 0 0;
}

.bw-motion-ok .bw-leaders.bw-is-live .bw-leader:nth-child(2) {
  transition-delay: 0.12s;
}

.bw-motion-ok .bw-leaders.bw-is-live .bw-leader:nth-child(3) {
  transition-delay: 0.24s;
}

.bw-motion-ok .bw-leaders.bw-is-live .bw-xp-fill {
  scale: 1 1;
  transition-delay: 0.35s;
}

.bw-motion-ok .bw-leaders.bw-is-live .bw-leader:nth-child(2) .bw-xp-fill {
  transition-delay: 0.47s;
}

.bw-motion-ok .bw-leaders.bw-is-live .bw-leader:nth-child(3) .bw-xp-fill {
  transition-delay: 0.59s;
}

.bw-motion-ok .bw-leaders.bw-is-live .bw-streak-day {
  opacity: 1;
  scale: 1;
}

.bw-motion-ok .bw-leaders.bw-is-live .bw-streak-day:nth-child(1) { transition-delay: 0.7s; }
.bw-motion-ok .bw-leaders.bw-is-live .bw-streak-day:nth-child(2) { transition-delay: 0.78s; }
.bw-motion-ok .bw-leaders.bw-is-live .bw-streak-day:nth-child(3) { transition-delay: 0.86s; }
.bw-motion-ok .bw-leaders.bw-is-live .bw-streak-day:nth-child(4) { transition-delay: 0.94s; }
.bw-motion-ok .bw-leaders.bw-is-live .bw-streak-day:nth-child(5) { transition-delay: 1.02s; }
.bw-motion-ok .bw-leaders.bw-is-live .bw-streak-day:nth-child(6) { transition-delay: 1.1s; }
.bw-motion-ok .bw-leaders.bw-is-live .bw-streak-day:nth-child(7) { transition-delay: 1.18s; }

.bw-motion-ok .bw-leaders.bw-is-live .bw-badge-unlock {
  animation: bw-badge-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s forwards;
}

.bw-motion-ok .bw-buddy-says.bw-is-reacting {
  animation: bw-bubble-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Keyframes ---------- */
@keyframes bw-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes bw-ping {
  0% { opacity: 0.7; transform: scale(1); }
  75%, 100% { opacity: 0; transform: scale(2.4); }
}

@keyframes bw-hero-in {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes bw-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -20px; }
}

@keyframes bw-float-small {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes bw-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes bw-blob-pulse {
  0%, 100% { opacity: 1; scale: 1; }
  50% { opacity: 0.55; scale: 1.08; }
}

@keyframes bw-rock-sway {
  0%, 100% { rotate: 0deg; }
  33% { rotate: -5deg; }
  66% { rotate: 5deg; }
}

@keyframes bw-rock-wave {
  0%, 100% { rotate: 0deg; }
  30% { rotate: -18deg; }
  70% { rotate: 10deg; }
}

@keyframes bw-arm-wave {
  0%, 100% { rotate: 0deg; }
  33% { rotate: -10deg; }
  66% { rotate: 10deg; }
}

@keyframes bw-arm-dance {
  0%, 100% { rotate: 0deg; }
  33% { rotate: -8deg; }
  66% { rotate: 8deg; }
}

@keyframes bw-arm-dance-back {
  0%, 100% { rotate: 0deg; }
  33% { rotate: 8deg; }
  66% { rotate: -8deg; }
}

@keyframes bw-pulse-opacity {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes bw-blink-in {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes bw-sparkle {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.8; }
}

@keyframes bw-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@keyframes bw-key-flash {
  50% { fill: #80ff44; }
}

@keyframes bw-confetti-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes bw-spin {
  to { rotate: 360deg; }
}

@keyframes bw-caret {
  50% { opacity: 0; }
}

@keyframes bw-marquee {
  from { translate: 0 0; }
  to { translate: -50% 0; }
}

@keyframes bw-cue-bounce {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 8px; }
}

@keyframes bw-badge-pop {
  0% { opacity: 0; scale: 0.6; box-shadow: 0 0 0 0 rgb(128 255 68 / 0.5); }
  70% { opacity: 1; scale: 1.15; box-shadow: 0 0 0 6px rgb(128 255 68 / 0); }
  100% { opacity: 1; scale: 1; box-shadow: none; }
}

@keyframes bw-bubble-pop {
  0% { scale: 1; }
  40% { scale: 1.035; }
  100% { scale: 1; }
}

@keyframes bw-confetti-fly {
  0% { opacity: 1; translate: 0 0; rotate: 0deg; }
  100% { opacity: 0; translate: var(--bw-confetti-dx, 0px) var(--bw-confetti-dy, 80px); rotate: var(--bw-confetti-r, 180deg); }
}

/* ---------- Animations: only when the visitor allows motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .bw-hero-enter {
    animation: bw-hero-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .bw-hero-enter-1 { animation-delay: 0.05s; }
  .bw-hero-enter-2 { animation-delay: 0.15s; }
  .bw-hero-enter-3 { animation-delay: 0.25s; }
  .bw-hero-enter-4 { animation-delay: 0.35s; }
  .bw-hero-enter-5 { animation-delay: 0.45s; }

  .bw-h1-accent {
    animation: bw-shimmer 8s ease infinite;
  }
  .bw-live-dot::after {
    animation: bw-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
  .bw-hero-blob {
    animation: bw-blob-pulse 4s ease-in-out infinite;
  }
  .bw-hero-blob-lime {
    animation-delay: 2s;
  }
  .bw-buddy-float,
  .bw-closing-buddy-float {
    animation: bw-float 6s ease-in-out infinite;
  }
  .bw-plan-buddy,
  .bw-roi-buddy,
  .bw-trophy-buddy {
    animation: bw-float-small 5s ease-in-out infinite;
  }
  .bw-work-chip,
  .bw-float-chip {
    animation: bw-bob 4s ease-in-out infinite;
  }
  .bw-work-chip-2 { animation-delay: 0.7s; }
  .bw-work-chip-3 { animation-delay: 1.4s; }
  .bw-work-chip-4 { animation-delay: 2.1s; }
  .bw-float-chip-bottom { animation-delay: 0.5s; }

  .bw-buddy-rock-arm {
    animation: bw-rock-sway 2s ease-in-out infinite;
  }
  .bw-hero-stage:hover .bw-buddy-rock-arm,
  .bw-hero-copy:focus-within ~ .bw-hero-stage .bw-buddy-rock-arm {
    animation: bw-rock-wave 0.5s ease-in-out infinite;
  }
  .bw-buddy-led {
    animation: bw-pulse-opacity 1s ease-in-out infinite;
  }
  .bw-prop-bulb {
    animation: bw-pulse-opacity 2s ease-in-out infinite;
  }
  .bw-buddy-soundwave {
    animation: bw-blink-in 0.8s ease-in-out infinite;
  }
  .bw-buddy-soundwave-late {
    animation-delay: 0.3s;
  }
  .bw-buddy-sparkle {
    animation: bw-sparkle 2s ease-in-out infinite;
  }
  .bw-buddy-sparkle-late {
    animation-delay: 0.7s;
  }
  .bw-buddy-note {
    animation: bw-drift 3s ease-in-out infinite;
  }
  .bw-buddy-note-late {
    animation-delay: 1.5s;
  }

  .bw-pose-wave-arm {
    animation: bw-arm-wave 0.8s ease-in-out infinite;
  }
  .bw-pose-dance-left,
  .bw-pose-trophy-left {
    animation: bw-arm-dance 0.5s ease-in-out infinite;
  }
  .bw-pose-dance-right,
  .bw-pose-trophy-right {
    animation: bw-arm-dance-back 0.5s ease-in-out infinite;
  }
  .bw-pose-cheer-left {
    animation: bw-arm-dance 1.2s ease-in-out infinite;
  }
  .bw-pose-cheer-right {
    animation: bw-arm-dance-back 1.2s ease-in-out infinite;
  }
  .bw-pose-key-1 { animation: bw-key-flash 0.3s linear infinite; }
  .bw-pose-key-2 { animation: bw-key-flash 0.4s linear 0.15s infinite; }
  .bw-pose-key-3 { animation: bw-key-flash 0.35s linear 0.25s infinite; }
  .bw-pose-key-4 { animation: bw-key-flash 0.38s linear 0.1s infinite; }
  .bw-pose-key-5 { animation: bw-key-flash 0.42s linear 0.2s infinite; }
  .bw-pose-confetti {
    animation: bw-confetti-blink 0.6s ease-in-out infinite;
  }
  .bw-pose-confetti-late {
    animation-direction: reverse;
  }
  .bw-pose-confetti-spin {
    animation: bw-spin 1.5s linear infinite;
  }
  .bw-pose-confetti-spin-back {
    animation-direction: reverse;
  }

  .bw-typed-live::after {
    animation: bw-caret 1s steps(1) infinite;
  }
  .bw-confetti-bit {
    animation: bw-confetti-fly 1.2s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  }
  .bw-marquee-track {
    animation: bw-marquee 40s linear infinite;
  }
  .bw-marquee:hover .bw-marquee-track,
  .bw-marquee:focus-within .bw-marquee-track,
  .bw-marquee.bw-is-paused .bw-marquee-track {
    animation-play-state: paused;
  }
  .bw-scroll-cue {
    animation: bw-cue-bounce 2s ease-in-out infinite;
  }
}

/* ---------- Hero pause (WCAG 2.2.2) ---------- */
/* A small round button at the stage's corner: top left on a phone (the
   chips sit under Buddy there), bottom left from 640px (the chips sit round
   him). Absolutely placed, so showing it shifts nothing. It only appears
   when motion runs (html.bw-motion-ok, set by home.js). */
.bw-hero-pause {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--bw-glass-border);
  border-radius: 999px;
  background: var(--bw-glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.bw-hero-pause .bw-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.bw-motion-ok .bw-hero-pause {
  display: inline-flex;
}

.bw-hero-play-icon,
.bw-hero.bw-is-paused .bw-hero-pause-icon {
  display: none;
}

.bw-hero.bw-is-paused .bw-hero-play-icon {
  display: block;
}

@media (min-width: 640px) {
  .bw-hero-pause {
    top: auto;
    bottom: 0.5rem;
  }
}

/* Paused: the looping motion stops where it is; one-off entrances still
   finish. The 3D loop stops too (buddy3d.js draws a still frame). */
.bw-hero.bw-is-paused .bw-live-dot::after,
.bw-hero.bw-is-paused .bw-h1-accent,
.bw-hero.bw-is-paused .bw-hero-blob,
.bw-hero.bw-is-paused .bw-buddy-float,
.bw-hero.bw-is-paused .bw-hero-buddy *,
.bw-hero.bw-is-paused .bw-work-chip,
.bw-hero.bw-is-paused .bw-scroll-cue {
  animation-play-state: paused;
}

/* The chips run two animations once Buddy is in: the pop finishes, the bob
   pauses. */
.bw-js .bw-hero.bw-is-paused .bw-hero-stage.bw-is-3d .bw-work-chip,
.bw-js .bw-hero.bw-is-paused .bw-hero-stage.bw-is-2d .bw-work-chip {
  animation-play-state: running, paused;
}

/* A still Buddy cannot be dragged or danced. */
.bw-buddy-canvas.bw-is-held {
  cursor: default;
  touch-action: auto;
}

/* ---------- Hero Buddy: loading, entrance, 3D or 2D (buddy3d.js) ---------- */
/* The stage's state classes (set by buddy3d.js, with the 2D backstop timer
   in home.js):
   - neither class, with html.bw-js: loading. The SVG is hidden but still lays
     out the box, so nothing shifts; only the glow orb shows, breathing; the
     work chips wait.
   - .bw-is-3d: the canvas shows and Buddy enters (drops in, overshoots,
     settles), then the chips pop in one by one.
   - .bw-is-2d: the SVG Buddy enters the same way instead, for the rest of the
     page view.
   Without html.bw-js (no scripts) none of this applies and the SVG shows.
   The canvas covers the SVG's box plus 20% at each side, 8% above and 6%
   below, so turns, jumps and the sound waves are never clipped. It is
   absolutely positioned, so it cannot shift the layout. */
.bw-buddy-box {
  position: relative;
  transform-origin: 50% 88%;
}

.bw-js .bw-hero-stage:not(.bw-is-3d):not(.bw-is-2d) .bw-buddy-box,
.bw-js .bw-hero-stage:not(.bw-is-3d):not(.bw-is-2d) .bw-work-chip {
  opacity: 0;
}

.bw-js .bw-hero-stage:not(.bw-is-3d):not(.bw-is-2d) .bw-work-chip {
  animation: none;
}

.bw-js .bw-hero-stage:not(.bw-is-2d) .bw-buddy-box .bw-buddy-float {
  visibility: hidden;
}

/* Stronger than every SVG animation rule above (the hover and focus-within
   waves included), so the hidden SVG never animates. */
.bw-js .bw-hero-stage:not(.bw-is-2d) .bw-buddy-box .bw-buddy-float,
.bw-js .bw-hero-stage:not(.bw-is-2d) .bw-buddy-box .bw-hero-buddy * {
  animation: none;
}

.bw-work-chip-1 { --bw-chip-in: 0.45s; --bw-chip-bob: 0.95s; }
.bw-work-chip-2 { --bw-chip-in: 0.6s; --bw-chip-bob: 1.8s; }
.bw-work-chip-3 { --bw-chip-in: 0.75s; --bw-chip-bob: 2.65s; }
.bw-work-chip-4 { --bw-chip-in: 0.9s; --bw-chip-bob: 3.5s; }

.bw-buddy-canvas {
  position: absolute;
  top: -8%;
  left: -20%;
  width: 140%;
  height: 114%;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

.bw-buddy-canvas.bw-is-dragging {
  cursor: grabbing;
}

/* Reduced motion: one still frame, nothing to drag. */
.bw-buddy-canvas.bw-is-static {
  cursor: default;
  touch-action: auto;
}

.bw-hero-stage:not(.bw-is-3d) .bw-buddy-canvas {
  visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .bw-js .bw-hero-stage:not(.bw-is-3d):not(.bw-is-2d) .bw-buddy-orb {
    animation: bw-orb-wait 1.6s ease-in-out infinite;
  }
  /* Scoped to html.bw-js: without it the SVG was already on screen, and
     must not blink out to enter again. */
  .bw-js .bw-hero-stage.bw-is-3d .bw-buddy-box,
  .bw-js .bw-hero-stage.bw-is-2d .bw-buddy-box {
    animation: bw-buddy-enter 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .bw-js .bw-hero-stage.bw-is-3d .bw-buddy-orb,
  .bw-js .bw-hero-stage.bw-is-2d .bw-buddy-orb {
    animation: bw-orb-settle 0.6s ease-out both;
  }
  /* The bob is its own keyframe here, so it starts after the pop rather
     than carrying on from page load. */
  .bw-js .bw-hero-stage.bw-is-3d .bw-work-chip,
  .bw-js .bw-hero-stage.bw-is-2d .bw-work-chip {
    animation: bw-chip-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--bw-chip-in, 0.45s) both, bw-chip-bob 4s ease-in-out var(--bw-chip-bob, 1s) infinite;
  }
}

@keyframes bw-orb-wait {
  0%, 100% { opacity: 0.55; scale: 0.94; }
  50% { opacity: 1; scale: 1; }
}

@keyframes bw-buddy-enter {
  0% { opacity: 0; scale: 0.9; translate: 0 -18px; }
  55% { opacity: 1; scale: 1.035; translate: 0 3px; }
  78% { scale: 0.99; translate: 0 0; }
  100% { opacity: 1; scale: 1; translate: 0 0; }
}

@keyframes bw-orb-settle {
  from { opacity: 0.75; scale: 0.97; }
  to { opacity: 1; scale: 1; }
}

@keyframes bw-chip-pop {
  0% { opacity: 0; scale: 0.7; }
  100% { opacity: 1; scale: 1; }
}

@keyframes bw-chip-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.bw-hero-confetti {
  inset: -12% -16%;
}

/* Sections off screen pause their decorative animations (home.js toggles
   .bw-fx-paused from the page's one IntersectionObserver). */
.bw-fx-paused *,
.bw-fx-paused *::before,
.bw-fx-paused *::after {
  animation-play-state: paused;
}