/* ==========================================================================
   Radio Workflow website: inner pages (pages/*.php)

   Loaded after site-chrome.css and home.css. The inner pages reuse the
   homepage's components as they are (sections, eyebrows, cards, panels,
   stat cards, feature rows, the peeking Buddy, the leaderboard, the closing
   call to action, Buddy's parts and every keyframe), so they look and move
   like the homepage. This file only adds what the inner pages have and the
   homepage does not: page heroes, the features jump nav, the timeline,
   people cards, contact cards, the FAQ, the map, the docs browser and the
   long-form prose of the docs and the privacy policy.

   The inner pages no longer load Tailwind or assets/css/styles.css, so
   home.css's element resets reach them, as they do the homepage. Everything
   here is still prefixed bw-, like the rest of the site's new CSS.

   Motion follows the homepage's two switches: every animation is inside
   prefers-reduced-motion: no-preference, and anything hidden until it is
   revealed hangs off html.bw-motion-ok (set by assets/js/home.js). Colours
   are the family green only. Lime is the bright end of each page's one
   gradient (the H1's .bw-h1-accent in home.css) and otherwise appears only
   in Buddy's own details, exactly as on the homepage: his sparkles, wave
   lines, trophy and confetti. Props and panels use #109875 and #33CFA7.
   ========================================================================== */

/* home.css resets h1 to h3; the inner pages use a few deeper headings. */
h4,
h5,
h6 {
  margin: 0;
}

/* Deep links (features.php#gamification, network.php#distribution and the
   rest) jump straight to their target on load. home.css turns on smooth
   scrolling for the homepage, and that also animates the browser's
   load-time jump to a #fragment, from the top of the page. A web font
   swapping in during that animation left the target short (up to about
   110px on a phone). pages.js turns smooth scrolling back on once the page
   has loaded, for in-page links such as the features jump nav. */
html {
  scroll-behavior: auto;
}

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

:root {
  --bw-page-orb: rgb(16 152 117 / 0.32);
  --bw-page-orb-edge: rgb(16 152 117 / 0.06);
  --bw-steam: rgb(255 255 255 / 0.5);
}

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

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

/* A link inside running text: green and underlined, so it reads as a link
   without relying on colour alone. */
.bw-inline-link {
  color: var(--bw-color-brand-400);
  text-decoration: underline;
  text-decoration-color: rgb(51 207 167 / 0.4);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.bw-inline-link:hover {
  color: var(--bw-color-brand-300);
  text-decoration-color: currentColor;
}

/* A link that should not break a phone layout (long addresses). */
.bw-break-anywhere {
  overflow-wrap: anywhere;
}

/* Wider container for the booking embed, which lays itself out side by side
   only when its frame is at least 1024px wide. */
.bw-container-wide {
  max-width: 80rem;
}

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

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

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

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

/* Copy only, left-aligned like the homepage's hero copy. */
.bw-page-hero-solo {
  position: relative;
  max-width: 50rem;
  padding-block: 2.5rem 3.5rem;
}

@media (min-width: 640px) {
  .bw-page-hero-solo {
    padding-block: 4rem 4.5rem;
  }
}

/* Centred: the booking, docs and privacy pages. */
.bw-page-hero-center {
  position: relative;
  max-width: 48rem;
  margin-inline: auto;
  padding-block: 2.5rem 3rem;
  text-align: center;
}

@media (min-width: 640px) {
  .bw-page-hero-center {
    padding-block: 4rem;
  }
}

.bw-page-hero-center .bw-page-lede {
  margin-inline: auto;
}

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

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

.bw-page-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-page-title {
    font-size: 2.75rem;
  }
}

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

/* A shorter second line under the H1 (the sales team page). */
.bw-page-subtitle {
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--bw-color-neutral-100);
  text-wrap: balance;
}

@media (min-width: 640px) {
  .bw-page-subtitle {
    font-size: 1.375rem;
  }
}

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

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

.bw-page-lede-strong {
  color: var(--bw-color-neutral-200);
}

/* Supporting paragraphs under a lede, a step quieter. */
.bw-page-body {
  margin-top: 1rem;
  max-width: 40rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--bw-color-neutral-400);
}

.bw-page-meta {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--bw-color-neutral-500);
}

.bw-page-notice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid rgb(245 158 11 / 0.35);
  border-radius: 0.5rem;
  background: rgb(245 158 11 / 0.08);
  font-size: 0.875rem;
  color: var(--bw-color-amber-text);
}

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

/* ---------- Hero Buddy stage ---------- */
.bw-page-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

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

.bw-page-buddy {
  position: relative;
  display: block;
  width: auto;
  height: 14rem;
  overflow: visible;
  filter: var(--bw-buddy-glow);
}

@media (min-width: 640px) {
  .bw-page-buddy {
    height: 16rem;
  }
}

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

.bw-page-buddy-about {
  aspect-ratio: 170 / 235;
}

.bw-page-buddy-contact {
  aspect-ratio: 175 / 240;
}

.bw-page-buddy-sales {
  aspect-ratio: 210 / 245;
}

.bw-page-buddy-features {
  aspect-ratio: 140 / 212;
}

/* Speech bubble: above Buddy on a phone, beside his head from 640px. */
.bw-speech {
  position: relative;
  z-index: 2;
  max-width: 15rem;
  margin-bottom: 1rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid rgb(16 152 117 / 0.35);
  border-radius: 0.875rem;
  background: var(--bw-glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--bw-shadow-overlay);
  font-size: 0.875rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--bw-color-neutral-100);
  text-align: center;
}

.bw-speech::after {
  content: "";
  position: absolute;
  bottom: -0.4375rem;
  left: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: -0.375rem;
  border-right: 1px solid rgb(16 152 117 / 0.35);
  border-bottom: 1px solid rgb(16 152 117 / 0.35);
  background: var(--bw-color-neutral-900);
  transform: rotate(45deg);
}

@media (min-width: 640px) {
  .bw-speech {
    position: absolute;
    top: 0.5rem;
    right: 0;
    max-width: 13rem;
    margin-bottom: 0;
    text-align: left;
  }
  .bw-speech::after {
    left: 2rem;
  }
}

@media (min-width: 1024px) {
  .bw-speech {
    right: -0.5rem;
  }
}

/* Above Buddy, centred, at every width: beside him it would cover his
   headphones or his raised arm somewhere between 640 and 1440px. */
@media (min-width: 640px) {
  .bw-speech-top {
    position: relative;
    top: auto;
    right: auto;
    max-width: 16rem;
    margin-bottom: 1rem;
    text-align: center;
  }
  .bw-speech-top::after {
    left: 50%;
  }
}

/* The features hero: Buddy at the keyboard with three of his jobs stacked
   beside him (feature names from the page; aria-hidden), in the homepage's
   glass chip. Hidden on a phone, where they would crowd him. */
.bw-stage-chips {
  display: none;
}

@media (min-width: 640px) {
  .bw-page-stage-row {
    flex-direction: row;
    gap: 1.5rem;
  }
  .bw-stage-chips {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
  }
  .bw-stage-chips .bw-float-chip {
    position: relative;
  }
  .bw-stage-chip-2 {
    margin-left: 1.5rem;
  }
}

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

/* ---------- Buddy's extra props and limbs (inner-page poses) ---------- */
.bw-prop-band {
  fill: #109875;
}

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

.bw-prop-board {
  fill: var(--bw-prop-darker);
  stroke: var(--bw-color-neutral-700);
}

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

.bw-prop-dot {
  fill: var(--bw-color-neutral-600);
}

.bw-prop-bar-top {
  fill: var(--bw-color-brand-400);
}

.bw-prop-trend {
  stroke: var(--bw-color-brand-400);
}

.bw-pose-steam {
  stroke: var(--bw-steam);
}

/* Limbs turn about the shoulder: the corner of their own box. */
.bw-pose-thumb-arm {
  transform-box: fill-box;
  transform-origin: 0% 100%;
}

.bw-pose-present-arm {
  transform-box: fill-box;
  transform-origin: 100% 100%;
}

/* ---------- Section helpers ---------- */
.bw-section-head {
  margin-bottom: 0;
}

/* A small centred line of links or notes under a section's grid. */
.bw-section-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--bw-color-neutral-400);
  text-align: center;
}

.bw-section-foot-sep {
  color: var(--bw-color-neutral-700);
}

.bw-subhead {
  margin-top: 3.5rem;
}

.bw-subhead-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--bw-color-white);
}

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

.bw-split-top {
  align-items: start;
}

/* Content that follows a section's head (eyebrow, title, intro). */
.bw-section-body {
  margin-top: 2.5rem;
}

/* Paragraph pairs under a section title (the sales team page). */
.bw-section-intro + .bw-section-intro {
  margin-top: 0.75rem;
}

/* ---------- Card extras ---------- */
.bw-card-grid-flush {
  margin-top: 0;
}

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

.bw-card {
  position: relative;
}

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

.bw-card-kicker {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bw-color-brand-400);
}

.bw-card-kicker + .bw-card-title {
  margin-top: 0.375rem;
}

.bw-card-role {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bw-color-brand-400);
}

.bw-card-points {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bw-color-neutral-800);
}

.bw-card-points li {
  font-size: 0.8125rem;
}

.bw-card-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--bw-color-neutral-500);
}

.bw-card-note .bw-icon {
  margin-top: 0.125rem;
  color: var(--bw-color-brand-400);
}

.bw-card-link-row {
  margin-top: 1rem;
}

/* The whole card is the target of its one action (contact options). */
.bw-card-action::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
}

.bw-card-action:focus-visible {
  outline: none;
}

.bw-card-action:focus-visible::after {
  outline: 2px solid var(--bw-color-brand-400);
  outline-offset: 2px;
}

/* A card across the whole row of a grid (Network Distribution). */
.bw-card-wide {
  grid-column: 1 / -1;
}

.bw-card-wide-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .bw-card-wide-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: 2.5rem;
  }
  .bw-card-wide-grid .bw-card-points {
    margin-top: 0;
    padding-top: 0;
    padding-left: 2rem;
    border-top: 0;
    border-left: 1px solid var(--bw-color-neutral-800);
  }
}

/* A tile: a short card with an icon, a title and a line. */
.bw-tile .bw-card-title {
  margin-top: 0.75rem;
}

.bw-tile .bw-card-body {
  font-size: 0.8125rem;
}

/* ---------- Buttons that look like links ---------- */
.bw-link-button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}

.bw-link-button.bw-link-arrow {
  font-size: 0.875rem;
  font-weight: 500;
}

/* ---------- Features: jump nav ---------- */
.bw-jump-nav {
  position: sticky;
  top: calc(var(--bw-header-h) + 1px);
  z-index: 30;
  border-block: 1px solid var(--bw-color-neutral-800);
  background: var(--bw-header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* One row at every width, so the bar is always 3.5rem tall (the page's
   scroll padding below counts on it). Centred when it fits; when it does
   not, it scrolls sideways and pages.js fades its right edge. */
.bw-jump-list {
  display: flex;
  justify-content: flex-start;
  justify-content: safe center;
  gap: 0.375rem;
  padding-block: 0.625rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.bw-jump-list.bw-is-scrollable {
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}

.bw-jump-list::-webkit-scrollbar {
  display: none;
}

.bw-jump-link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  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;
  font-weight: 500;
  color: var(--bw-color-neutral-300);
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.bw-jump-link:hover {
  border-color: var(--bw-color-neutral-700);
  color: var(--bw-color-white);
}

.bw-jump-link.bw-is-current {
  border-color: rgb(16 152 117 / 0.5);
  background: rgb(16 152 117 / 0.12);
  color: var(--bw-color-brand-300);
}

.bw-jump-list :focus-visible {
  outline-offset: -2px;
}

/* On a page with the jump nav, everything scrolled into view (anchor jumps,
   deep links and keyboard focus, WCAG 2.4.11) clears the sticky header and
   this bar, not just the header (site-chrome.css sets that default). */
html:has(.bw-jump-nav) {
  scroll-padding-top: calc(var(--bw-header-h) + 3.5rem + 1rem);
}

/* ---------- Integrations and provider chips ---------- */
.bw-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bw-chip-list-center {
  justify-content: center;
}

.bw-chip-group + .bw-chip-group {
  margin-top: 1.25rem;
}

.bw-chip-group-title {
  margin-bottom: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bw-color-neutral-500);
}

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

.bw-provider-grid li {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 0.5rem;
  background: var(--bw-color-neutral-950);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--bw-color-neutral-200);
}

.bw-provider-grid .bw-provider-more {
  border-style: dashed;
  color: var(--bw-color-neutral-500);
}

/* ---------- Panels ---------- */
.bw-panel-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bw-color-white);
}

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

@media (min-width: 640px) {
  .bw-panel-body-lg {
    padding: 1.75rem;
  }
}

.bw-panel-text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--bw-color-neutral-400);
}

.bw-panel-lead {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.bw-panel-lead .bw-card-title {
  margin-top: 0;
  font-size: 1rem;
}

.bw-panel-stack > * + * {
  margin-top: 1rem;
}

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

.bw-panel-center {
  text-align: center;
}

.bw-panel-center .bw-icon-chip {
  margin-inline: auto;
}

/* Numbered steps inside a panel (network week, Log Transfer Service). */
.bw-step-list {
  display: grid;
  gap: 0.5rem;
}

.bw-step-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 0.5rem;
  background: var(--bw-color-neutral-950);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--bw-color-neutral-300);
}

.bw-step-row .bw-step-num {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.8125rem;
}

.bw-step-row > span:last-child {
  padding-top: 0.1875rem;
}

.bw-step-num-final {
  border-color: var(--bw-btn-primary-bg);
  background: var(--bw-btn-primary-bg);
  color: var(--bw-btn-primary-fg);
  font-weight: 600;
}

/* ---------- About: numbers, timeline, people ---------- */
.bw-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

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

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

.bw-timeline {
  position: relative;
  display: grid;
  gap: 2rem;
  padding-left: 2.25rem;
}

.bw-timeline::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.6875rem;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--bw-color-brand-500), rgb(16 152 117 / 0.15));
}

.bw-timeline-item {
  position: relative;
}

.bw-timeline-item::before {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: -2.25rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--bw-color-brand-400);
  border-radius: 999px;
  background: var(--bw-color-neutral-950);
  box-shadow: 0 0 0 4px rgb(16 152 117 / 0.12);
}

.bw-timeline-item .bw-card-title {
  margin-top: 0;
  font-size: 1rem;
  line-height: 1.5rem;
}

.bw-timeline-item .bw-card-body {
  font-size: 0.9375rem;
}

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

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

.bw-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.bw-person .bw-card-title {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.bw-person .bw-card-body {
  margin-top: 0.875rem;
}

.bw-person-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.bw-person-role {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bw-color-brand-400);
}

.bw-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  flex-shrink: 0;
  border: 2px solid rgb(16 152 117 / 0.55);
  border-radius: 999px;
  background: radial-gradient(circle at 30% 25%, rgb(16 152 117 / 0.3), var(--bw-color-neutral-950) 70%);
  box-shadow: 0 0 0 6px rgb(16 152 117 / 0.08);
  font-family: var(--bw-font-mono);
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--bw-color-brand-300);
}

/* Leaderboard on the about page: amounts instead of XP, no trophy offset. */
.bw-leader-amount {
  font-family: var(--bw-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bw-color-white);
  text-align: right;
}

.bw-leader-first .bw-leader-amount {
  color: var(--bw-color-brand-300);
}

.bw-leader-trend {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.125rem;
  width: 100%;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--bw-color-brand-400);
}

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

/* ---------- Contact ---------- */
.bw-contact-value {
  display: inline-block;
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--bw-color-brand-400);
  overflow-wrap: anywhere;
}

.bw-card:hover .bw-contact-value {
  color: var(--bw-color-brand-300);
}

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

.bw-chat-panel .bw-btn-block {
  margin-top: 1.5rem;
}

.bw-reach-list {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.75rem;
}

.bw-reach-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-inline: -0.625rem;
  padding: 0.625rem;
  border-radius: 0.5rem;
}

.bw-reach-item .bw-card-title {
  margin-top: 0.4375rem;
}

.bw-reach-item-link {
  transition: background-color 0.15s ease;
}

.bw-reach-item-link:hover {
  background: rgb(255 255 255 / 0.04);
}

.bw-faq {
  display: grid;
  gap: 0.75rem;
  max-width: 48rem;
  margin-top: 2rem;
}

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

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

.bw-faq-item summary:focus-visible {
  outline-offset: -2px;
}

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

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

.bw-faq-answer {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--bw-color-neutral-400);
}

.bw-hq {
  display: grid;
  margin-top: 2.5rem;
}

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

.bw-map {
  position: relative;
  min-height: 16rem;
  background: var(--bw-color-neutral-950);
}

@media (min-width: 768px) {
  .bw-map {
    min-height: 20rem;
  }
}

/* The map tiles are light; this turns them dark like the page. Fully
   grey: inverting any colour left in them turns parks purple. */
.bw-map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(100%) invert(92%) contrast(90%);
}

.bw-hq-info {
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .bw-hq-info {
    padding: 2rem;
  }
}

.bw-hq-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.bw-hq-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--bw-color-neutral-300);
}

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

.bw-hq-list a:hover {
  color: var(--bw-color-brand-300);
}

.bw-hq-hours {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bw-color-neutral-800);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--bw-color-neutral-400);
}

.bw-hq-hours .bw-card-title {
  margin-top: 0;
  margin-bottom: 0.375rem;
}

/* A section-sized heading inside a panel. Not .bw-section-title, which
   home.js would reveal on its own inside an already revealed panel. */
.bw-panel-heading {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--bw-color-white);
  text-wrap: balance;
}

@media (min-width: 640px) {
  .bw-panel-heading {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

/* ---------- Book a demo ---------- */
/* The booking card follows the hero closely, so more of the scheduler is on
   screen at load. */
.bw-section-tight {
  padding-top: 2rem;
}

/* The scheduler is the page's whole job: it never waits for a scroll reveal.
   Buddy's head still pops up once the card is in view (home.js). */
.bw-motion-ok .bw-booking-peek.bw-reveal {
  opacity: 1;
  translate: 0 0;
}

.bw-booking-body {
  padding: 0.75rem;
}

@media (min-width: 640px) {
  .bw-booking-body {
    padding: 1.5rem;
  }
}

/* No JavaScript: the booking page's own link. */
.bw-booking-fallback {
  padding: 3rem 1rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--bw-color-neutral-400);
}

.bw-booking-fallback .bw-btn {
  margin-top: 1.5rem;
}

.bw-booking-foot {
  margin-top: 2.5rem;
  font-size: 0.875rem;
  color: var(--bw-color-neutral-500);
  text-align: center;
}

/* ---------- Features: billing, gamification ---------- */
.bw-mini-grid-flush {
  margin-top: 0;
}

/* The integrations panel keeps pace with the eight finance cards beside it,
   under the sticky header and the jump nav. */
@media (min-width: 1024px) {
  .bw-integrations {
    position: sticky;
    top: calc(var(--bw-header-h) + 4.5rem);
  }
}

.bw-gamification {
  margin-top: 1rem;
}

.bw-gamification .bw-subhead-title {
  margin-top: 0.5rem;
}

.bw-gamification-badges {
  margin-top: 0;
}

@media (min-width: 768px) {
  .bw-gamification-badges {
    justify-content: flex-end;
  }
}

/* ---------- Features: production mock ---------- */
.bw-project-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bw-project-head > div {
  flex: 1;
  min-width: 0;
}

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

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

.bw-project-progress {
  margin-top: 1.5rem;
}

.bw-project-progress .bw-fill-meter {
  margin-top: 0.5rem;
}

.bw-project-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--bw-color-neutral-500);
}

.bw-project-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bw-color-neutral-800);
  text-align: center;
}

.bw-project-stats dd {
  font-family: var(--bw-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bw-color-white);
}

.bw-project-stats dd.bw-text-accent {
  color: var(--bw-color-brand-400);
}

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

.bw-project-stats div {
  display: flex;
  flex-direction: column-reverse;
}

/* ---------- Network: gateways, closing badge, report files ---------- */
.bw-gateways {
  margin-top: 1rem;
}

.bw-closing-badge {
  margin-top: 1.5rem;
}

.bw-closing-badge + .bw-section-title {
  margin-top: 0.75rem;
}

.bw-file-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.bw-file-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem;
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 0.5rem;
  background: var(--bw-color-neutral-950);
}

.bw-file-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 2.25rem;
  flex-shrink: 0;
  border: 1px solid rgb(16 152 117 / 0.4);
  border-radius: 0.375rem;
  background: rgb(16 152 117 / 0.1);
  font-family: var(--bw-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--bw-color-brand-300);
}

.bw-file-name {
  font-family: var(--bw-font-mono);
  font-size: 0.8125rem;
  color: var(--bw-color-white);
}

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

/* ---------- Checked lists at body size (sales team) ---------- */
.bw-section-list {
  margin-top: 1.5rem;
}

.bw-callout-line {
  max-width: 44rem;
  margin: 2.5rem auto 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--bw-color-neutral-300);
  text-align: center;
  text-wrap: balance;
}

.bw-callout-line strong {
  font-weight: 600;
}

.bw-check-list-lg li {
  font-size: 0.9375rem;
  color: var(--bw-color-neutral-300);
}

.bw-panel .bw-check-list {
  margin-top: 1rem;
}

/* ---------- Docs ---------- */
.bw-doc-cat + .bw-doc-cat {
  margin-top: 3rem;
}

.bw-doc-cat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.bw-doc-count {
  font-size: 0.8125rem;
  color: var(--bw-color-neutral-500);
}

.bw-doc-grid {
  margin-top: 1.25rem;
}

.bw-doc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.bw-doc-card .bw-card-title {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.bw-doc-card-arrow {
  margin-top: 1rem;
  color: var(--bw-color-neutral-500);
  transition: color 0.15s ease, translate 0.15s ease;
}

.bw-doc-card:hover .bw-doc-card-arrow {
  color: var(--bw-color-brand-400);
  translate: 0.25rem 0;
}

.bw-doc-cta {
  margin-top: 2.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
}

@media (min-width: 640px) {
  .bw-doc-cta {
    padding: 2.5rem;
  }
}

.bw-doc-cta .bw-section-title,
.bw-doc-cta .bw-section-intro {
  margin-inline: auto;
}

.bw-doc-cta .bw-button-row {
  justify-content: center;
  margin-top: 1.5rem;
}

.bw-doc-cta-foot {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--bw-color-neutral-500);
}

.bw-docs-layout {
  display: grid;
  gap: 2rem;
  padding-block: 2.5rem 4rem;
}

@media (min-width: 1024px) {
  .bw-docs-layout {
    grid-template-columns: 17.5rem minmax(0, 1fr);
    gap: 3rem;
    padding-block: 3.5rem 5rem;
  }
}

.bw-docs-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .bw-docs-sidebar {
    display: block;
  }
}

/* Sticks just below the 65px sticky header (partials/nav.php). */
.bw-docs-sidebar-inner {
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  padding-right: 0.5rem;
}

.bw-docs-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--bw-color-neutral-400);
  transition: color 0.15s ease;
}

.bw-docs-back:hover {
  color: var(--bw-color-white);
}

.bw-docs-back .bw-icon {
  transform: rotate(180deg);
}

.bw-docs-sidebar .bw-docs-back {
  margin-bottom: 1.5rem;
}

.bw-docs-nav-group + .bw-docs-nav-group {
  margin-top: 1.5rem;
}

.bw-docs-nav-title {
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bw-color-neutral-500);
}

.bw-docs-nav-list {
  display: grid;
  gap: 0.125rem;
  border-left: 1px solid var(--bw-color-neutral-800);
}

.bw-docs-nav-link {
  display: block;
  margin-left: -1px;
  padding: 0.3125rem 0 0.3125rem 0.875rem;
  border-left: 1px solid transparent;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--bw-color-neutral-400);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.bw-docs-nav-link:hover {
  border-left-color: var(--bw-color-neutral-600);
  color: var(--bw-color-white);
}

.bw-docs-nav-link.bw-is-current {
  border-left-color: var(--bw-color-brand-400);
  font-weight: 500;
  color: var(--bw-color-brand-400);
}

.bw-docs-signin {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bw-color-brand-400);
}

.bw-docs-signin:hover {
  color: var(--bw-color-brand-300);
}

.bw-docs-content {
  min-width: 0;
}

.bw-docs-content > .bw-docs-back {
  margin-bottom: 2rem;
}

@media (min-width: 1024px) {
  .bw-docs-content > .bw-docs-back {
    display: none;
  }
}

.bw-docs-foot {
  max-width: 48rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--bw-color-neutral-800);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--bw-color-neutral-500);
}

/* ---------- Long-form prose: docs articles and the privacy policy ---------- */
/* The markdown is rendered by Parsedown in docs.php and the policy is plain
   HTML, so the typography is set by element here, scoped to .bw-prose. */
.bw-prose {
  max-width: 48rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--bw-color-neutral-300);
  overflow-wrap: break-word;
}

.bw-prose > :first-child {
  margin-top: 0;
}

.bw-prose h1 {
  margin: 0 0 1.25rem;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--bw-color-white);
  text-wrap: balance;
}

@media (min-width: 640px) {
  .bw-prose h1 {
    font-size: 2.5rem;
  }
}

.bw-prose h2 {
  margin: 2.75rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bw-color-neutral-800);
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--bw-color-white);
}

.bw-prose h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--bw-color-brand-300);
}

.bw-prose h4,
.bw-prose h5,
.bw-prose h6 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--bw-color-white);
}

.bw-prose p {
  margin: 0 0 1.125rem;
}

.bw-prose ul,
.bw-prose ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}

.bw-prose ul {
  list-style: disc;
}

.bw-prose ol {
  list-style: decimal;
}

.bw-prose li {
  margin-bottom: 0.375rem;
  padding-left: 0.25rem;
}

.bw-prose li::marker {
  color: var(--bw-color-brand-500);
}

.bw-prose li > ul,
.bw-prose li > ol {
  margin-top: 0.375rem;
  margin-bottom: 0.5rem;
}

.bw-prose a {
  color: var(--bw-color-brand-400);
  text-decoration: underline;
  text-decoration-color: rgb(51 207 167 / 0.4);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.bw-prose a:hover {
  color: var(--bw-color-brand-300);
  text-decoration-color: currentColor;
}

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

.bw-prose em {
  color: var(--bw-color-neutral-200);
}

.bw-prose code {
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 0.3125rem;
  background: var(--bw-color-neutral-900);
  font-family: var(--bw-font-mono);
  font-size: 0.875em;
  color: var(--bw-color-brand-200);
}

.bw-prose pre {
  margin: 0 0 1.25rem;
  padding: 1rem 1.125rem;
  overflow-x: auto;
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 0.625rem;
  background: var(--bw-color-neutral-900);
  font-size: 0.875rem;
  line-height: 1.6;
}

.bw-prose pre code {
  padding: 0;
  border: 0;
  background: none;
  color: var(--bw-color-neutral-200);
}

.bw-prose blockquote {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--bw-color-brand-500);
  border-radius: 0 0.5rem 0.5rem 0;
  background: rgb(16 152 117 / 0.06);
  color: var(--bw-color-neutral-300);
}

.bw-prose blockquote > :last-child {
  margin-bottom: 0;
}

.bw-prose hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--bw-color-neutral-800);
}

.bw-prose img {
  margin: 1.5rem 0;
  border: 1px solid var(--bw-color-neutral-800);
  border-radius: 0.625rem;
}

/* Wide tables scroll inside the column instead of widening the page. */
.bw-prose table {
  display: block;
  max-width: 100%;
  margin: 0 0 1.5rem;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.5;
}

.bw-prose th,
.bw-prose td {
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid var(--bw-color-neutral-800);
  text-align: left;
  vertical-align: top;
}

.bw-prose thead th {
  border-bottom-color: var(--bw-color-neutral-700);
  font-weight: 600;
  color: var(--bw-color-white);
  white-space: nowrap;
}

.bw-prose tbody tr:nth-child(even) td {
  background: rgb(255 255 255 / 0.02);
}

/* Anchor jumps inside an article clear the sticky header. */
.bw-prose [id] {
  scroll-margin-top: 1rem;
}

/* The privacy policy sits in a panel, like the homepage's cards. */
.bw-legal {
  max-width: 52rem;
  margin-inline: auto;
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .bw-legal {
    padding: 2.5rem 3rem;
  }
}

.bw-legal.bw-prose h2:first-of-type {
  margin-top: 2.5rem;
}

.bw-legal.bw-prose p {
  color: var(--bw-color-neutral-400);
}

.bw-legal.bw-prose li {
  color: var(--bw-color-neutral-400);
}

/* ---------- Scroll reveal for inner-page parts (assets/js/pages.js) ---------- */
/* home.js reveals the homepage's own components wherever they appear, and
   pages.js adds these; both use home.css's .bw-reveal / .bw-is-visible. */

/* ---------- Animations: only when the visitor allows motion ---------- */
@keyframes bw-steam-rise {
  0% { opacity: 0; translate: 0 3px; }
  40% { opacity: 1; }
  100% { opacity: 0; translate: 0 -6px; }
}

@keyframes bw-thumb-bob {
  0%, 100% { rotate: 0deg; }
  50% { rotate: -6deg; }
}

@keyframes bw-present {
  0%, 100% { rotate: 0deg; }
  50% { rotate: 4deg; }
}

@media (prefers-reduced-motion: no-preference) {
  .bw-pose-steam {
    animation: bw-steam-rise 2.2s ease-in-out infinite;
  }
  .bw-pose-steam-2 {
    animation-delay: 0.6s;
  }
  .bw-pose-steam-3 {
    animation-delay: 1.2s;
  }
  .bw-pose-thumb-arm {
    animation: bw-thumb-bob 2.4s ease-in-out infinite;
  }
  .bw-pose-present-arm {
    animation: bw-present 2.5s ease-in-out infinite;
  }
  .bw-pose-bar-live {
    animation: bw-pulse-opacity 2s ease-in-out infinite;
  }
  .bw-pose-line-2 {
    animation-delay: 0.2s;
  }
  .bw-pose-line-3 {
    animation-delay: 0.4s;
  }
  .bw-page-buddy-float {
    animation: bw-float-small 5s ease-in-out infinite;
  }
  .bw-stage-chips .bw-float-chip {
    animation: bw-bob 4s ease-in-out infinite;
  }
  .bw-stage-chips .bw-stage-chip-2 {
    animation-delay: 0.8s;
  }
  .bw-stage-chips .bw-float-chip:last-child {
    animation-delay: 1.6s;
  }
}