/* BrokerBolo brand stylesheet: tokens + marketing components.
   Source of truth: the BrokerBolo Design System (claude.ai/artifact/PcbVCXasU5GpQCJvR98QL3).
   Change a value here and mirror it there. Never use pure white; cream-50 is the lightest surface.
   CACHE: browsers may reuse an old copy of this file for up to a day, so every page links it as
   /brand/brand.css?v=<version>. After ANY change here, bump that version in public/landing.html,
   public/pricing.html and src/components/legal/legal-page.tsx (first 8 chars of its sha1). */

@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("/brand/fonts/Poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("/brand/fonts/Poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("/brand/fonts/Poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Hind"; font-weight: 400; font-style: normal; font-display: swap; src: url("/brand/fonts/Hind-400.woff2") format("woff2"); }
@font-face { font-family: "Hind"; font-weight: 500; font-style: normal; font-display: swap; src: url("/brand/fonts/Hind-500.woff2") format("woff2"); }
@font-face { font-family: "Hind"; font-weight: 600; font-style: normal; font-display: swap; src: url("/brand/fonts/Hind-600.woff2") format("woff2"); }

/* Tokens are scoped to .bb-page (not :root) so they never leak into the dashboard app,
   which shares some names (e.g. --radius-sm/md/lg) and may keep this stylesheet loaded. */
.bb-page {
  /* colour */
  --purple-800:     #1b0857;
  --purple-700:     #250c77;
  --purple-100:     #e9e4f5;
  --orange-400:     #f27a47;
  --orange-500:     #ed642b;
  --orange-700:     #a23c14;
  --orange-100:     #fbe3d6;
  --cream-50:       #fdfbf7;
  --cream-100:      #f8f4ec;
  --cream-200:      #efe7d8;
  --ink-900:        #1d1736;
  --ink-600:        #5b5571;
  --line-200:       rgba(37, 12, 119, 0.14);
  --line-400:       #8c84a8;
  --success-700:    #1f7a4d;
  --danger-700:     #b3261e;
  /* type */
  --font-display:        "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:           "Hind", "Segoe UI", system-ui, sans-serif;
  /* spacing */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        24px;
  --space-6:        32px;
  --space-7:        48px;
  --space-8:        64px;
  --space-9:        96px;
  /* radius */
  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --radius-pill:    999px;
  /* shadow */
  --shadow-card:    0 1px 2px rgba(37, 12, 119, 0.06), 0 8px 24px rgba(37, 12, 119, 0.08);
  /* breakpoint */
  --bp-sm:          480px;
  --bp-md:          768px;
  --bp-lg:          1024px;
  --bp-xl:          1280px;
  /* layout */
  --container-max:  1200px;
  --measure:        680px;
  --gutter-mobile:  20px;
  --gutter-desktop: 40px;
  --tap-min:        44px;
  --header-h:       64px;
}

/* BrokerBolo marketing components. Mobile-first: base rules are the phone layout;
   .bb-page (put it on <body>) is the outermost size container, so every
   @container query below acts like a screen-width query on a real page and
   follows the space a component is given when it sits in a narrower box.
   wider layouts come from fluid clamp() type (cqi units: the nearest container's width, else the screen's), auto-fit grids and a few container
   queries, so a component adapts to the space it is given, not only the screen. */

/* ── Base ─────────────────────────────────────────────────────────── */
.bb-page {
  container-type: inline-size;
  margin: 0;
  background: var(--cream-100);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: clamp(16px, 15.4px + 0.16cqi, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bb-page *, .bb-page *::before, .bb-page *::after { box-sizing: border-box; }
.bb-page img { max-width: 100%; height: auto; }

.bb-container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--gutter-desktop));
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
.bb-section { padding-block: var(--space-7); }
.bb-section--alt { background: var(--cream-200); }
.bb-measure { max-width: var(--measure); }
.bb-stack > * + * { margin-top: var(--space-3); }

@container (min-width: 768px) {
  .bb-container { padding-inline: var(--gutter-desktop); }
  .bb-section { padding-block: var(--space-9); }
}

/* ── Type (phone size at 375px wide → desktop size at 1000px wide) ─── */
.bb-display, .bb-h1, .bb-h2, .bb-h3 {
  font-family: var(--font-display);
  color: var(--purple-700);
  margin: 0;
  text-wrap: balance;
}
.bb-display { font-size: clamp(40px, 25.6px + 3.84cqi, 64px); line-height: 1.07; font-weight: 700; letter-spacing: -0.02em; }
.bb-h1      { font-size: clamp(32px, 22.4px + 2.56cqi, 48px); line-height: 1.12; font-weight: 700; letter-spacing: -0.015em; }
.bb-h2      { font-size: clamp(26px, 20px + 1.6cqi, 36px);    line-height: 1.17; font-weight: 600; letter-spacing: -0.01em; }
.bb-h3      { font-size: clamp(20px, 17.6px + 0.64cqi, 24px); line-height: 1.3;  font-weight: 600; }
.bb-lead    { font-size: clamp(18px, 16.8px + 0.32cqi, 20px); line-height: 1.55; color: var(--ink-900); margin: 0; text-wrap: pretty; }
.bb-body    { font-size: inherit; line-height: 1.6; margin: 0; text-wrap: pretty; }
.bb-small   { font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--ink-600); margin: 0; }
.bb-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(12px, 11.4px + 0.16cqi, 13px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-700);
  margin: 0;
}
.bb-brand-accent { color: var(--orange-700); }
.bb-link { color: var(--orange-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.bb-link:hover { color: var(--purple-700); }

/* ── Focus: purple ring on light grounds, orange ring on purple grounds ─ */
.bb-page :focus-visible { outline: 2px solid var(--purple-700); outline-offset: 2px; }
.bb-on-purple :focus-visible { outline-color: var(--orange-500); }

/* ── Button ───────────────────────────────────────────────────────── */
.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bb-btn--primary   { background: var(--purple-700); color: var(--cream-100); }
.bb-btn--primary:hover { background: var(--purple-800); }
.bb-btn--accent    { background: var(--orange-500); color: var(--purple-700); }
.bb-btn--accent:hover { background: var(--orange-400); }
.bb-btn--secondary { background: transparent; color: var(--purple-700); border-color: var(--purple-700); }
.bb-btn--secondary:hover { background: var(--purple-100); }
.bb-on-purple .bb-btn--secondary { color: var(--cream-100); border-color: var(--cream-100); }
.bb-on-purple .bb-btn--secondary:hover { background: var(--purple-800); }
.bb-btn--sm { min-height: 40px; padding: 8px 16px; font-size: 15px; }
.bb-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* full-width stacked buttons when the row itself is narrower than 440px */
.bb-btn-row-wrap { container-type: inline-size; }
@container (max-width: 439px) { .bb-btn-row--stack .bb-btn { width: 100%; } }

/* ── Badge ────────────────────────────────────────────────────────── */
.bb-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--purple-100);
  color: var(--purple-700);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.bb-badge--orange { background: var(--orange-100); color: var(--purple-700); }

/* ── Card + grid ──────────────────────────────────────────────────── */
.bb-grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-4);
}
@container (min-width: 768px) { .bb-grid { gap: var(--space-5); } }
.bb-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4);
  background: var(--cream-50);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
}
@container (min-width: 768px) { .bb-card { padding: var(--space-5); } }
.bb-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--purple-100);
  color: var(--purple-700);
}
/* Lucide icons (lucide.dev, ISC), inlined as <svg class="bb-icon">; their stroke style lives here */
.bb-icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Callout ──────────────────────────────────────────────────────── */
.bb-callout {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--orange-100);
  color: var(--purple-700);
}
.bb-callout strong { font-weight: 600; }

/* ── Site header (sticky; inline nav from 1024px of header width) ─── */
.bb-header {
  container-type: inline-size;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream-100);
  border-bottom: 1px solid var(--line-200);
}
.bb-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
}
.bb-header__logo { display: inline-flex; flex-shrink: 0; }
.bb-header__logo img { display: block; height: 28px; width: auto; }
.bb-header__nav { display: none; }
.bb-header__cta { margin-left: auto; }
.bb-menu { position: relative; }
.bb-menu > summary {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-pill);
  list-style: none;
  cursor: pointer;
  color: var(--purple-700);
}
.bb-menu > summary::-webkit-details-marker { display: none; }
.bb-menu > summary::before { content: ""; width: 20px; height: 14px; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; }
.bb-menu[open] > summary { background: var(--purple-100); }
.bb-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  display: grid;
  min-width: 260px;
  padding: var(--space-2);
  background: var(--cream-50);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.bb-nav-link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-900);
  text-decoration: none;
}
.bb-nav-link:hover, .bb-nav-link[aria-current="page"] { color: var(--purple-700); background: var(--purple-100); }
.bb-menu__cta { display: none; margin-top: var(--space-2); white-space: nowrap; }
/* Phones: the header CTA moves into the menu so the full logo keeps its room */
@container (max-width: 519px) {
  .bb-header__cta { display: none; }
  .bb-menu { margin-left: auto; }
  .bb-menu__cta { display: flex; }
}
@container (min-width: 1024px) {
  .bb-header__nav { display: flex; gap: var(--space-1); margin-left: var(--space-5); }
  .bb-menu { display: none; }
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.bb-hero {
  container-type: inline-size;
  padding-block: var(--space-8) var(--space-7);
}
.bb-hero__grid { display: grid; gap: var(--space-6); align-items: center; }
.bb-hero__copy { display: grid; gap: var(--space-4); min-width: 0; }
.bb-hero__media {
  position: relative;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-200);
  background: var(--cream-200);
}
.bb-hero__media img, .bb-hero__media video { display: block; width: 100%; height: auto; }
.bb-hero__media video { aspect-ratio: 16 / 9; }
/* Play/pause for the looping hero video (shown by script; icons swap on .is-paused) */
.bb-hero__toggle {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 1px solid var(--line-200);
  border-radius: 50%;
  background: var(--cream-50);
  color: var(--purple-700);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.bb-hero__toggle:hover { background: var(--purple-100); }
.bb-hero__toggle[hidden], .bb-hero__toggle .bb-i-play, .bb-hero__toggle.is-paused .bb-i-pause { display: none; }
.bb-hero__toggle.is-paused .bb-i-play { display: inline; }
@container (min-width: 900px) {
  .bb-hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-8); }
}
@container (min-width: 768px) { .bb-hero { padding-block: var(--space-9); } }

/* ── Pricing card ─────────────────────────────────────────────────── */
.bb-price-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5) var(--space-4);
  background: var(--cream-50);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
}
@container (min-width: 768px) { .bb-price-card { padding: var(--space-6); } }
.bb-price-card--featured {
  background: var(--purple-700);
  color: var(--cream-100);
  border-color: var(--purple-700);
  box-shadow: var(--shadow-card);
}
.bb-price-card--featured .bb-h3 { color: var(--cream-100); }
.bb-price-card--featured .bb-label { color: var(--orange-500); }
.bb-price-card--featured .bb-small { color: var(--purple-100); }
.bb-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
.bb-price__amount { font-size: clamp(40px, 30.4px + 2.56cqi, 56px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.bb-price__period { font-size: 16px; font-weight: 500; }
.bb-ticks { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.bb-ticks li { position: relative; padding-left: 28px; }
.bb-ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.45em;
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--success-700);
  border-bottom: 2.5px solid var(--success-700);
  transform: rotate(-45deg);
}
.bb-price-card--featured .bb-ticks li::before { border-color: var(--orange-500); }

/* ── Comparison table (scrolls sideways on phones, first column pinned) */
.bb-table-wrap {
  container-type: inline-size;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-400);
  border-radius: var(--radius-md);
  background: var(--cream-50);
}
.bb-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.bb-table th, .bb-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-200); }
.bb-table thead th { background: var(--cream-200); font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--purple-700); }
.bb-table tbody tr:last-child > * { border-bottom: 0; }
.bb-table th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--cream-50); font-weight: 600; color: var(--ink-900); min-width: 150px; }
.bb-table thead th:first-child { position: sticky; left: 0; z-index: 2; }
.bb-table .bb-col-us { background: var(--purple-100); }
.bb-yes { color: var(--success-700); font-weight: 600; }
.bb-no  { color: var(--danger-700); font-weight: 600; }
/* Narrow: each feature becomes a block, each cell a labelled line (td data-label) */
@container (max-width: 599px) {
  .bb-table, .bb-table tbody, .bb-table tr, .bb-table th, .bb-table td { display: block; }
  .bb-table { min-width: 0; }
  .bb-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bb-table tbody tr { padding: 14px 16px; border-bottom: 1px solid var(--line-200); }
  .bb-table tbody tr:last-child { border-bottom: 0; }
  .bb-table th[scope="row"] { position: static; min-width: 0; padding: 0 0 8px; border: 0; background: none; font-family: var(--font-display); color: var(--purple-700); }
  .bb-table td { padding: 6px 0; border: 0; }
  .bb-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink-600); }
  .bb-table td.bb-col-us { margin-top: 4px; padding: 8px 10px; border-radius: var(--radius-sm); }
  .bb-table td.bb-col-us::before { color: var(--purple-700); }
}

/* ── FAQ (native details/summary, no script) ──────────────────────── */
.bb-faq { display: grid; gap: var(--space-3); }
.bb-faq__item { border: 1px solid var(--line-200); border-radius: var(--radius-md); background: var(--cream-100); }
.bb-faq__item[open] { background: var(--cream-50); }
.bb-faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(16px, 15.4px + 0.16cqi, 17px);
  font-weight: 600;
  color: var(--purple-700);
  cursor: pointer;
  list-style: none;
}
.bb-faq__item > summary::-webkit-details-marker { display: none; }
.bb-faq__item > summary::after {
  content: "";
  flex: 0 0 14px;
  height: 14px;
  background: linear-gradient(var(--orange-700) 0 0) center / 100% 2px no-repeat, linear-gradient(var(--orange-700) 0 0) center / 2px 100% no-repeat;
  transition: transform 0.2s ease;
}
.bb-faq__item[open] > summary::after { transform: rotate(45deg); }
.bb-faq__answer { padding: 0 var(--space-4) var(--space-4); color: var(--ink-900); }

/* ── CTA band ─────────────────────────────────────────────────────── */
.bb-cta-band {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--purple-700);
  color: var(--cream-100);
}
.bb-cta-band .bb-h2 { color: var(--cream-100); }
.bb-cta-band__copy { display: grid; gap: var(--space-3); flex: 1 1 420px; min-width: 0; }
.bb-cta-band__actions { flex: 1 1 260px; max-width: 420px; }
.bb-cta-band .bb-lead { color: var(--purple-100); }
@container (min-width: 768px) { .bb-cta-band { padding: var(--space-8); } }

/* ── Footer ───────────────────────────────────────────────────────── */
.bb-footer { background: var(--cream-200); padding-block: var(--space-7) var(--space-5); }
.bb-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: var(--space-6) var(--space-5);
}
.bb-footer__brand { grid-column: 1 / -1; display: grid; align-content: start; gap: var(--space-3); max-width: 360px; }
.bb-footer__brand img { height: 28px; width: auto; }
.bb-footer__col { display: grid; align-content: start; gap: 0; }
.bb-footer__col h4 { margin: 0 0 var(--space-1); font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple-700); }
.bb-footer__col a { display: flex; align-items: center; min-height: var(--tap-min); font-size: 15px; color: var(--ink-600); text-decoration: none; }
.bb-footer__col a:hover { color: var(--purple-700); text-decoration: underline; }
.bb-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line-200); }
@container (min-width: 900px) {
  .bb-footer__grid { grid-template-columns: 2fr repeat(3, 1fr); }
  .bb-footer__brand { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-page * { transition: none !important; }
}

/* ── Page patterns shared by the marketing pages ──────────────────── */
.bb-section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); max-width: var(--measure); }
.bb-section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.bb-section-head .bb-lead { color: var(--ink-600); }
.bb-narrow { max-width: 1000px; margin-inline: auto; }
.bb-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.bb-card .bb-body { color: var(--ink-600); }
.bb-cmd {
  margin-top: var(--space-2);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--purple-100);
  color: var(--purple-700);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.bb-quote { display: grid; gap: var(--space-4); max-width: 840px; margin: 0 auto; }
.bb-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 17.2px + 1.28cqi, 30px);
  line-height: 1.35;
  color: var(--purple-700);
  text-wrap: balance;
}
.bb-quote cite { font-style: normal; display: grid; gap: var(--space-1); }
.bb-quote cite strong { font-family: var(--font-display); font-weight: 600; color: var(--ink-900); }
.bb-rows { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-200); }
.bb-rows > li { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-bottom: 1px solid var(--line-200); }
.bb-rows__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); font-family: var(--font-display); font-weight: 600; color: var(--purple-700); }
.bb-rows__title .bb-small { font-family: var(--font-body); }
.bb-kv { display: grid; margin: 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--cream-200); max-width: 520px; margin-inline: auto; }
.bb-kv > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); padding-block: var(--space-2); font-variant-numeric: tabular-nums; }
.bb-kv dt, .bb-kv dd { margin: 0; }
.bb-kv > div:last-child { font-weight: 600; color: var(--purple-700); border-top: 1px solid var(--line-200); }
.bb-center { text-align: center; }
.bb-mt-6 { margin-top: var(--space-6); }
/* Copy beside a visual: stacked on phones, two columns from 900px of page width */
.bb-split { display: grid; gap: var(--space-7); align-items: center; }
@container (min-width: 900px) { .bb-split { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.bb-price-card .bb-btn { margin-top: auto; }
.bb-muted { color: var(--ink-600); }
.bb-section--flush-top { padding-top: 0; }
.bb-section-head--flush { margin-bottom: 0; }
.bb-measure--center { margin-inline: auto; }
.bb-card--center { align-items: center; text-align: center; }
/* Long feature lists: flow down balanced columns (no lone last item), one column on phones */
.bb-feature-list { columns: 320px 3; column-gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.bb-feature-list > li { display: grid; gap: var(--space-1); break-inside: avoid; padding-block: var(--space-4); border-top: 1px solid var(--line-200); }
.bb-feature-list h3 { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--purple-700); }
.bb-feature-list h3 .bb-icon { margin-top: 2px; color: var(--orange-700); } /* centred on the first line */
.bb-feature-list .bb-body { color: var(--ink-600); }
/* In-page links (#hubs, #founder…) land below the sticky header, not under it */
.bb-page [id] { scroll-margin-top: calc(var(--header-h) + var(--space-2)); }

/* ── Long-form text (legal pages) ─────────────────────────────────── */
.bb-prose { max-width: var(--measure); }
.bb-prose__head { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line-200); }
.bb-prose h2 { margin: var(--space-7) 0 0; font-family: var(--font-display); font-size: clamp(20px, 17.6px + 0.64cqi, 24px); font-weight: 600; line-height: 1.3; color: var(--purple-700); text-wrap: balance; }
.bb-prose h2:first-child { margin-top: 0; }
.bb-prose p, .bb-prose ul { margin: var(--space-3) 0 0; }
.bb-prose ul { padding-left: 1.25em; display: grid; gap: var(--space-2); list-style: disc; }
.bb-prose li::marker { color: var(--orange-700); }
.bb-back { display: inline-flex; align-items: center; min-height: var(--tap-min); font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--orange-700); text-decoration: none; }
.bb-back:hover { color: var(--purple-700); text-decoration: underline; }

/* ── WhatsApp demo (landing): a runner's command and the dashboard alert it raises.
   The markup on its own is the finished conversation (what reduced-motion and
   no-JS visitors see); the Motion section replays it. Bubble green and read-tick
   blue are WhatsApp's own, so the mock reads as WhatsApp at a glance. ─────── */
.bb-wa { display: grid; justify-items: center; gap: var(--space-4); }
.bb-wa__phone {
  width: min(100%, 340px);
  overflow: hidden;
  border: 8px solid var(--ink-900);
  border-radius: 32px;
  background: var(--cream-200);
  box-shadow: var(--shadow-card);
}
.bb-wa__top { display: flex; align-items: center; gap: var(--space-3); padding: 10px 14px; background: var(--purple-700); font-family: var(--font-display); line-height: 1.25; }
.bb-wa__top strong { display: block; font-size: 15px; font-weight: 600; color: var(--cream-100); }
.bb-wa__top small { font-size: 12px; color: var(--purple-100); }
.bb-wa__avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cream-100); }
.bb-wa__avatar img { width: 22px; height: auto; }
.bb-wa__chat { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2); min-height: 230px; padding: var(--space-3); }
.bb-wa__day { align-self: center; margin-bottom: auto; padding: 2px 10px; border-radius: var(--radius-sm); background: var(--cream-50); font-size: 12px; color: var(--ink-600); }
.bb-wa__msg { position: relative; max-width: 85%; margin: 0; padding: 6px 10px 20px; border-radius: 10px; font-size: 14px; line-height: 1.4; color: var(--ink-900); box-shadow: 0 1px 1px rgba(29, 23, 54, 0.08); }
.bb-wa__msg--out { align-self: flex-end; border-top-right-radius: 2px; background: #d9fdd3; }
.bb-wa__msg--in { align-self: flex-start; border-top-left-radius: 2px; background: var(--cream-50); }
.bb-wa__meta { position: absolute; right: 8px; bottom: 3px; font-family: var(--font-body); font-size: 11px; color: var(--ink-600); }
.bb-wa__ticks { margin-left: 2px; letter-spacing: -0.35em; color: #53bdeb; }
.bb-wa__mono, .bb-wa__typed { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; }
/* the reply and its "typing…" bubble share one spot, like the real thing */
.bb-wa__reply { display: grid; align-self: flex-start; max-width: 85%; }
.bb-wa__reply > * { grid-area: 1 / 1; max-width: none; }
.bb-wa__typing { display: flex; gap: 4px; justify-self: start; align-self: start; padding: 12px 14px; opacity: 0; }
.bb-wa__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--line-400); }
.bb-wa__composer { display: flex; align-items: center; gap: var(--space-2); padding: 8px; }
/* Typed text grows past the field and scrolls left like a real input: the auto
   margin keeps it left-aligned while it fits, flex-end takes over once it overflows. */
.bb-wa__field { position: relative; display: flex; justify-content: flex-end; align-items: center; flex: 1; min-width: 0; min-height: 40px; overflow: hidden; padding-inline: 14px; border-radius: var(--radius-pill); background: var(--cream-50); }
.bb-wa__placeholder { position: absolute; left: 14px; top: 50%; translate: 0 -50%; font-size: 14px; color: var(--ink-600); }
.bb-wa__typed { box-sizing: content-box; flex: none; width: 0; margin-right: auto; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--purple-700); visibility: hidden; }
.bb-wa__send { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--purple-700); color: var(--cream-100); }
.bb-wa__toast { display: flex; align-items: flex-start; gap: var(--space-3); width: min(100%, 340px); padding: var(--space-3) var(--space-4); border: 1px solid var(--line-200); border-radius: var(--radius-md); background: var(--cream-50); box-shadow: var(--shadow-card); font-size: 14px; line-height: 1.4; color: var(--ink-600); }
.bb-wa__toast small { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--orange-700); }
.bb-wa__toast strong { display: block; font-family: var(--font-display); font-weight: 600; color: var(--purple-700); }
.bb-wa__bell { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--orange-100); color: var(--orange-700); }

/* ── Motion ───────────────────────────────────────────────────────────
   Everything above is the complete, static page. These effects only run for
   visitors who haven't asked their OS for reduced motion. Scroll reveals use CSS
   scroll-driven animations (no script); browsers without them skip the effect.
   Reveals move `translate`, not `transform`, so the card hover lift still composes. */
@keyframes bb-rise { from { opacity: 0; translate: 0 24px; } }
@keyframes bb-settle { from { opacity: 0; transform: perspective(1200px) rotateX(12deg) translateY(40px) scale(0.96); } }
@keyframes bb-header-lift { to { box-shadow: 0 8px 24px rgba(37, 12, 119, 0.1); border-bottom-color: transparent; } }
@keyframes bb-wa-hide { from, to { opacity: 0; } }
@keyframes bb-wa-show { from, to { opacity: 1; } }
@keyframes bb-wa-type {
  from { visibility: visible; width: 0; animation-timing-function: steps(44, end); }
  92%, to { visibility: visible; width: 44ch; } /* 44 = characters in the command */
}
@keyframes bb-wa-press { 50% { scale: 0.86; } }
@keyframes bb-wa-pop { from { opacity: 0; scale: 0.9; } }
@keyframes bb-wa-read { from { color: var(--ink-600); } }
@keyframes bb-wa-dot { 30% { translate: 0 -4px; } 60% { translate: 0 0; } }

@supports (animation-timeline: scroll()) {
  .bb-header { animation: bb-header-lift linear both; animation-timeline: scroll(); animation-range: 0px 96px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero: copy rises in line by line, the product shot settles from a tilt */
  .bb-hero__copy > *, .bb-hero .bb-section-head > * { animation: bb-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .bb-hero__copy > :nth-child(2), .bb-hero .bb-section-head > :nth-child(2) { animation-delay: 0.08s; }
  .bb-hero__copy > :nth-child(3), .bb-hero .bb-section-head > :nth-child(3) { animation-delay: 0.16s; }
  .bb-hero__copy > :nth-child(4) { animation-delay: 0.24s; }
  .bb-hero__copy > :nth-child(5) { animation-delay: 0.32s; }
  .bb-hero__media { transform-origin: 50% 100%; animation: bb-settle 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }

  /* Cards lift under a mouse (not on touch, where hover sticks) */
  .bb-card, .bb-price-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
  @media (hover: hover) {
    .bb-card:hover, .bb-price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
  }

  /* Rise into place over the first 220px an element travels up the screen */
  @supports (animation-timeline: view()) {
    .bb-section .bb-section-head, .bb-card, .bb-price-card, .bb-feature-list > li, .bb-ticks > li,
    .bb-quote, .bb-cta-band, .bb-rows > li, .bb-faq__item, .bb-table-wrap, .bb-wa {
      animation: bb-rise linear both;
      animation-timeline: view();
      animation-range: cover 0px cover 220px;
    }
    .bb-grid > :nth-child(3n + 2) { animation-range: cover 40px cover 260px; }
    .bb-grid > :nth-child(3n + 3) { animation-range: cover 80px cover 300px; }
  }

  /* WhatsApp demo, about 5s: type, send, read, "typing…", reply, dashboard alert.
     landing.html adds .is-armed while it's on screen (holds the first frame) and
     .is-playing once 60% is visible; both are removed off screen, so it replays. */
  .bb-wa.is-armed .bb-wa__placeholder { animation: bb-wa-hide 2.33s 0.27s; }
  .bb-wa.is-armed .bb-wa__typed { animation: bb-wa-type 2.33s 0.27s; }
  .bb-wa.is-armed .bb-wa__send { animation: bb-wa-press 0.25s 2.45s; }
  .bb-wa.is-armed .bb-wa__msg--out { animation: bb-wa-pop 0.35s cubic-bezier(0.3, 1.4, 0.6, 1) 2.6s both; transform-origin: 100% 100%; }
  .bb-wa.is-armed .bb-wa__ticks { animation: bb-wa-read 0.2s 3.3s both; }
  .bb-wa.is-armed .bb-wa__typing { animation: bb-wa-show 1s 3.4s; }
  .bb-wa.is-armed .bb-wa__answer { animation: bb-wa-pop 0.35s cubic-bezier(0.3, 1.4, 0.6, 1) 4.4s both; transform-origin: 0 100%; }
  .bb-wa.is-armed .bb-wa__toast { animation: bb-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 4.8s both; }
  .bb-wa.is-armed:not(.is-playing) * { animation-play-state: paused; } /* must stay after the rules above */
  .bb-wa.is-playing .bb-wa__typing span { animation: bb-wa-dot 0.9s ease-in-out infinite; }
  .bb-wa.is-playing .bb-wa__typing span:nth-child(2) { animation-delay: 0.15s; }
  .bb-wa.is-playing .bb-wa__typing span:nth-child(3) { animation-delay: 0.3s; }
}