/*
 * BoogieBoard public website: layout + components.
 *
 * Framework-free on purpose: no Bootstrap classes are used by the public site
 * components, and every value comes from a token below so the move to Tailwind
 * is a 1:1 mapping (see static/marketing/README.md). Illustration tokens and
 * primitives live in ../illustrated/bb-illustrated.css.
 *
 * Everything is scoped under .bbw (the public page wrapper) so app/Argon
 * globals never leak in.
 */

:root {
  --bbw-ink: #1e2a4a;
  --bbw-text: #4a5677;
  --bbw-muted: #627090;
  --bbw-line: #e9edf6;
  --bbw-bg: #ffffff;
  --bbw-bg-soft: #f7f8fd;
  --bbw-bg-navy: #141c36;
  --bbw-max: 1200px;
  --bbw-gutter: 24px;
  --bbw-section-y: 112px;
  --bbw-radius: 16px;
  --bbw-radius-lg: 24px;
  --bbw-pill: 999px;
  --bbw-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bbw-nav-h: 72px;
  --bbw-accent-text: #4a5bd0;
}

@media (max-width: 767px) {
  :root {
    --bbw-gutter: 16px;
    --bbw-section-y: 72px;
  }
}

/* ---------- Base ---------- */

.bbw {
  font-family: var(--bbw-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--bbw-text);
  background: var(--bbw-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

.bbw h1,
.bbw h2,
.bbw h3,
.bbw h4 {
  margin: 0;
  font-family: var(--bbw-font);
  color: var(--bbw-ink);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.bbw-lead { text-wrap: pretty; }

/*
 * Element resets. Resource library pages (.bbw-resources, templates/resources/*)
 * ship their own article/card styles that expect browser defaults here, so the
 * resets skip them; :where() keeps the specificity at .bbw <element>.
 */
.bbw p:where(:not(.bbw-resources *)) { margin: 0; }
.bbw ul:where(:not(.bbw-resources *)) { margin: 0; padding: 0; list-style: none; }
.bbw a:where(:not(.bbw-resources *)) { color: inherit; text-decoration: none; }
.bbw img { max-width: 100%; height: auto; display: block; }

.bbw-wrap {
  width: 100%;
  max-width: calc(var(--bbw-max) + var(--bbw-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--bbw-gutter);
}

.bbw-wrap--narrow { max-width: calc(820px + var(--bbw-gutter) * 2); }

.bbw-skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--bbw-pill);
  background: var(--bbw-ink);
  color: #fff;
}

.bbw-skip:focus { left: 8px; }

.bbw :focus-visible {
  outline: 3px solid rgba(94, 114, 228, 0.55);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Type ---------- */

.bbw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--bbw-accent-text);
}

.bbw-eyebrow::before {
  content: '';
  width: 18px;
  height: 3px;
  border-radius: 3px;
  background: var(--bbi-grad-cta);
}

.bbw-h1 {
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.035em !important;
}

.bbw-h2 {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em !important;
}

.bbw-h3 {
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
}

.bbw-lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--bbw-text);
}

.bbw-grad-text {
  background: var(--bbi-grad-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bbw-grad-text--brand { background-image: var(--bbi-grad-brand); }

.bbw-prose p + p { margin-top: 14px; }
.bbw-prose strong { color: var(--bbw-ink); font-weight: 700; }

.bbw-prose a,
.bbw-link {
  color: var(--bbw-accent-text);
  font-weight: 700;
  border-bottom: 2px solid rgba(94, 114, 228, 0.25);
  transition: border-color 0.2s ease;
}

.bbw-prose a:hover,
.bbw-link:hover { border-color: var(--bbi-indigo); }

/* ---------- Buttons ---------- */

.bbw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--bbw-pill);
  font-family: var(--bbw-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--bbi-ease), box-shadow 0.2s ease, background-color 0.2s ease;
}

.bbw-btn:hover { transform: translateY(-2px); }
.bbw-btn:active { transform: translateY(0) scale(0.98); }
.bbw-btn i { font-size: 15px; }

.bbw-btn--primary {
  background: var(--bbi-grad-cta);
  color: #fff !important;
  box-shadow: var(--bbi-shadow-cta);
}

.bbw-btn--primary:hover { box-shadow: 0 18px 30px -10px rgba(255, 2, 108, 0.55); }

.bbw-btn--secondary {
  background: #fff;
  color: var(--bbw-ink) !important;
  box-shadow: inset 0 0 0 2px var(--bbw-line), var(--bbi-shadow-sm);
}

.bbw-btn--secondary:hover { box-shadow: inset 0 0 0 2px rgba(94, 114, 228, 0.35), var(--bbi-shadow); }

.bbw-btn--light {
  background: #fff;
  color: var(--bbw-ink) !important;
}

.bbw-btn--ghost {
  background: transparent;
  color: var(--bbw-ink) !important;
  padding: 0 10px;
}

.bbw-btn--ghost:hover { transform: none; color: var(--bbi-indigo) !important; }
.bbw-btn--sm { height: 42px; padding: 0 20px; font-size: 14px; }

.bbw-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* ---------- Nav ---------- */

.bbw-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--bbw-nav-h);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.bbw-nav.is-scrolled {
  border-color: var(--bbw-line);
  box-shadow: 0 8px 24px -18px rgba(30, 42, 74, 0.35);
}

.bbw-nav__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
}

.bbw-nav__logo img { height: 34px; width: auto; }

.bbw-nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
}

.bbw-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--bbw-pill);
  background: transparent;
  font-family: var(--bbw-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--bbw-ink);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.bbw-nav__trigger:hover,
.bbw-nav__trigger.is-open { background: var(--bbw-bg-soft); }
.bbw-nav__trigger i { font-size: 10px; transition: transform 0.2s ease; }
.bbw-nav__trigger.is-open i { transform: rotate(180deg); }

.bbw-nav__end {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bbw-nav__login {
  font-size: 15px;
  font-weight: 600;
  color: var(--bbw-ink);
  padding: 0 12px;
}

.bbw-nav__login:hover { color: var(--bbi-indigo); }

.bbw-mega {
  position: absolute;
  top: calc(var(--bbw-nav-h) - 6px);
  left: 0;
  right: 0;
  width: min(940px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 22px;
  border-radius: var(--bbw-radius-lg);
  background: #fff;
  border: 1px solid var(--bbw-line);
  box-shadow: var(--bbi-shadow-lg);
}

.bbw-mega--sm { width: min(560px, calc(100vw - 32px)); }

/* Menus drop in quickly from just above; swapping between open menus is instant */
.bbw-mega-enter { transition: opacity 0.14s ease-out, translate 0.14s ease-out; }
.bbw-mega-leave { transition: opacity 0.09s ease-in, translate 0.09s ease-in; }
.bbw-mega-from { opacity: 0; translate: 0 -6px; }
.bbw-nav.is-switching .bbw-mega { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  :root[data-reduced-motion="honor"] .bbw-mega-enter,
  :root[data-reduced-motion="honor"] .bbw-mega-leave { transition: opacity 0.1s linear; }
  :root[data-reduced-motion="honor"] .bbw-mega-from { translate: none; }
}

/* Invisible bridge over the gap between the triggers and the panel, so moving the
   pointer down into the menu never leaves it (see bbw-nav.js for the hover grace period). */
.bbw-mega::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(var(--bbw-nav-h) / 2 - 25px);
}

.bbw-mega__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.bbw-mega--sm .bbw-mega__grid { grid-template-columns: repeat(2, 1fr); }

.bbw-mega__label {
  grid-column: 1 / -1;
  padding: 4px 12px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bbw-muted);
}

.bbw-mega__item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  transition: background-color 0.2s ease;
}

.bbw-mega__item:hover { background: var(--bbw-bg-soft); }
.bbw-mega__item--wide { grid-column: 1 / -1; background: var(--bbw-bg-soft); }
.bbw-mega__item--wide:hover { background: #eef1f9; }

.bbw-mega__text b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bbw-ink);
}

.bbw-mega__desc {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bbw-muted);
}

.bbw-mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bbw-bg-soft);
  font-size: 14px;
  font-weight: 600;
  color: var(--bbw-ink);
}

.bbw-tile {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  color: #fff;
  font-size: 16px;
  background: var(--bbi-grad-brand);
  box-shadow: 0 8px 16px -10px rgba(94, 114, 228, 0.8);
}

.bbw-tile--pink { background: linear-gradient(135deg, #ff5fb5, #ff026c); box-shadow: 0 8px 16px -10px rgba(255, 2, 108, 0.8); }
.bbw-tile--orange { background: linear-gradient(135deg, #fc8453, #fc5f08); box-shadow: 0 8px 16px -10px rgba(252, 95, 8, 0.8); }
.bbw-tile--teal { background: linear-gradient(135deg, #2dcecc, #11a7c4); box-shadow: 0 8px 16px -10px rgba(17, 167, 196, 0.8); }
.bbw-tile--green { background: var(--bbi-grad-good); box-shadow: 0 8px 16px -10px rgba(26, 174, 111, 0.8); }
.bbw-tile--navy { background: linear-gradient(135deg, #344767, #1e2a4a); box-shadow: 0 8px 16px -10px rgba(30, 42, 74, 0.8); }
.bbw-tile--lg { width: 52px; height: 52px; border-radius: 16px; font-size: 21px; }

.bbw-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--bbw-bg-soft);
  color: var(--bbw-ink);
  font-size: 18px;
}

/* ---------- Mobile menu: a floating card under a floating header, with drill-down panels ---------- */

.bbw-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 58;
  background: rgba(16, 22, 40, 0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.bbw-drawer {
  position: fixed;
  top: calc(var(--bbw-nav-h) - 2px);
  left: 10px;
  right: 10px;
  z-index: 59;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--bbw-nav-h) - 10px);
  overflow: hidden;
  border: 1px solid var(--bbw-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 60px -24px rgba(16, 22, 40, 0.45);
  transform-origin: top center;
}

.bbw-drawer-enter { transition: opacity 0.18s ease-out, translate 0.18s ease-out, scale 0.18s ease-out; }
.bbw-drawer-leave { transition: opacity 0.12s ease-in, translate 0.12s ease-in, scale 0.12s ease-in; }
.bbw-drawer-from { opacity: 0; translate: 0 -8px; scale: 0.98; }

.bbw-drawer__panel { display: flex; flex-direction: column; min-height: 0; }
.bbw-drawer-slide { transition: opacity 0.2s ease-out, translate 0.2s ease-out; }
.bbw-drawer-slide-from { opacity: 0; translate: 24px 0; }
.bbw-drawer-slide-back { opacity: 0; translate: -24px 0; }

.bbw-drawer__rows { display: grid; padding: 10px 10px 4px; }

.bbw-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  font-family: var(--bbw-font);
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  color: var(--bbw-ink);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.bbw-drawer a.bbw-drawer__row { color: var(--bbw-ink); }
.bbw-drawer__row i { font-size: 13px; color: var(--bbw-muted); }
.bbw-drawer__row:hover,
.bbw-drawer__row:focus-visible { outline: none; background: var(--bbw-bg-soft); }

.bbw-drawer__actions { display: grid; gap: 10px; padding: 18px 20px 20px; }
.bbw-drawer__actions .bbw-btn { width: 100%; height: 50px; font-size: 16px; }
.bbw-drawer__actions .bbw-btn i { font-size: 13px; }

.bbw-drawer__back {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--bbw-line);
  background: #fff;
  font-family: var(--bbw-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--bbw-ink);
  cursor: pointer;
}

.bbw-drawer__back span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--bbw-line);
  border-radius: 10px;
  font-size: 12px;
  color: var(--bbw-ink);
}

.bbw-drawer__scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 10px 16px;
}

.bbw-drawer__label {
  padding: 16px 12px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bbw-muted);
}

.bbw-drawer__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border-radius: 14px;
  transition: background-color 0.15s ease;
}

.bbw-drawer__item:hover,
.bbw-drawer__item:focus-visible { outline: none; background: var(--bbw-bg-soft); }
.bbw-drawer__item .bbw-tile { width: 38px; height: 38px; border-radius: 11px; font-size: 15px; }
.bbw-drawer__item-text { flex: 1; font-size: 16px; font-weight: 700; color: var(--bbw-ink); }

.bbw-drawer__item--feature { margin-top: 4px; padding: 12px; background: var(--bbw-bg-soft); }
.bbw-drawer__item--feature > i { font-size: 13px; color: var(--bbi-indigo); }

.bbw-btn--soft,
.bbw a.bbw-btn--soft { background: var(--bbw-bg-soft); color: var(--bbw-ink); box-shadow: inset 0 0 0 1px var(--bbw-line); }
.bbw-btn--soft:hover { background: #eef1f9; }

@media (prefers-reduced-motion: reduce) {
  :root[data-reduced-motion="honor"] .bbw-drawer-enter,
  :root[data-reduced-motion="honor"] .bbw-drawer-leave,
  :root[data-reduced-motion="honor"] .bbw-drawer-slide { transition: opacity 0.1s linear; }
  :root[data-reduced-motion="honor"] .bbw-drawer-from,
  :root[data-reduced-motion="honor"] .bbw-drawer-slide-from,
  :root[data-reduced-motion="honor"] .bbw-drawer-slide-back { translate: none; scale: none; }
}

@media (max-width: 1023px) {
  .bbw-nav__menu,
  .bbw-nav__login { display: none; }
  .bbw-nav__end { margin-left: auto; }
  .bbw-burger { display: grid; place-items: center; }

  /* The header becomes a floating rounded bar, inset from the screen edges. */
  .bbw-nav,
  .bbw-nav.is-scrolled {
    padding: 8px 10px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .bbw-nav__inner {
    position: relative;
    z-index: 60; /* stays bright above the menu's dim overlay */
    max-width: none;
    padding: 0 8px 0 16px;
    border: 1px solid var(--bbw-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    box-shadow: 0 10px 30px -18px rgba(16, 22, 40, 0.35);
  }

  .bbw-burger { width: 42px; height: 42px; border: 1px solid var(--bbw-line); }
}

@media (max-width: 479px) {
  .bbw-nav__logo img { height: 28px; }
  .bbw-nav__end { gap: 6px; }
  .bbw-nav__end .bbw-btn { height: 40px; padding: 0 14px; font-size: 13px; }
}

/* ---------- Sections ---------- */

.bbw-section {
  position: relative;
  padding: var(--bbw-section-y) 0;
}

.bbw-section--tight { padding: calc(var(--bbw-section-y) * 0.6) 0; }
.bbw-section--flush-top { padding-top: 0; }
.bbw-section--soft { background: var(--bbw-bg-soft); }

.bbw-section--navy {
  background:
    radial-gradient(circle at 12% 0%, rgba(94, 114, 228, 0.35), transparent 40%),
    radial-gradient(circle at 92% 100%, rgba(255, 2, 108, 0.25), transparent 40%),
    var(--bbw-bg-navy);
  color: #c9d1ea;
}

.bbw-section--navy h2,
.bbw-section--navy h3 { color: #fff; }
.bbw-section--navy .bbw-lead { color: #c9d1ea; }
.bbw-section--navy .bbw-eyebrow { color: #a9b6ff; }

.bbw-head {
  max-width: 760px;
  margin-bottom: 56px;
}

.bbw-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.bbw-head .bbw-lead { margin-top: 18px; }

/* ---------- Hero ---------- */

.bbw-hero {
  position: relative;
  z-index: 0;
  padding: 72px 0 40px;
}

.bbw-hero::before { z-index: -1; }

.bbw-hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto;
  height: 640px;
  background:
    radial-gradient(circle at 18% 30%, rgba(94, 114, 228, 0.18), transparent 40%),
    radial-gradient(circle at 82% 20%, rgba(255, 2, 108, 0.13), transparent 38%),
    radial-gradient(circle at 60% 70%, rgba(252, 95, 8, 0.1), transparent 40%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
  pointer-events: none;
}

.bbw-hero__copy {
  position: relative;
  max-width: 1080px;
}

.bbw-h1 .bbw-line { display: block; }

.bbw-hero--center .bbw-hero__copy {
  margin: 0 auto;
  text-align: center;
}

.bbw-hero--center .bbw-actions,
.bbw-hero--center .bbw-trust { justify-content: center; }

.bbw-hero .bbw-lead {
  max-width: 720px;
  margin-top: 22px;
}

.bbw-hero--center .bbw-lead { margin-left: auto; margin-right: auto; }
.bbw-hero .bbw-actions { margin-top: 32px; }

.bbw-hero__art {
  position: relative;
  max-width: 1120px;
  margin: 56px auto 0;
}

.bbw-hero__art .bbi-stage { box-shadow: 0 40px 80px -40px rgba(30, 42, 74, 0.35); }

/* Split hero: copy left, scene right (feature pages) */
.bbw-hero--split { padding: 56px 0 72px; }

.bbw-hero--split .bbw-wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 56px;
}

.bbw-hero--split .bbw-h1 { font-size: clamp(38px, 4.2vw, 56px); }
.bbw-hero--split .bbw-hero__art { margin: 0; max-width: none; }
.bbw-hero--split .bbw-lead { font-size: 18px; }

@media (max-width: 991px) {
  .bbw-hero--split .bbw-wrap { grid-template-columns: 1fr; gap: 36px; }
}

.bbw-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 26px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bbw-muted);
}

.bbw-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bbw-trust__item i { color: var(--bbi-good); }
.bbw-trust__stars { color: #ffb400; letter-spacing: 1px; }

/* ---------- Split (text + illustration) ---------- */

.bbw-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 64px;
}

.bbw-split + .bbw-split { margin-top: 120px; }
.bbw-split--reverse .bbw-split__copy { order: 2; }

.bbw-split__copy .bbw-lead,
.bbw-split__copy .bbw-prose { margin-top: 16px; }
.bbw-split__copy .bbw-actions { margin-top: 26px; }

.bbw-checks { margin-top: 22px !important; display: grid; gap: 12px; }

.bbw-checks li {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  line-height: 1.55;
}

.bbw-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bbi-good-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231aae6f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.bbw-checks li b { color: var(--bbw-ink); }

@media (max-width: 991px) {
  .bbw-split { grid-template-columns: 1fr; gap: 36px; }
  .bbw-split--reverse .bbw-split__copy { order: 0; }
  .bbw-split + .bbw-split { margin-top: 88px; }
}

/* ---------- Illustration frame ---------- */

.bbw-art { position: relative; }
.bbw-art .bbi-stage { width: 100%; }

.bbw-art__caption {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bbw-muted);
  text-align: center;
}

/* ---------- Cards ---------- */

.bbw-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(var(--bbw-cols, 3), minmax(0, 1fr));
}

.bbw-grid--2 { --bbw-cols: 2; }
.bbw-grid--4 { --bbw-cols: 4; }

@media (max-width: 991px) {
  .bbw-grid,
  .bbw-grid--4 { --bbw-cols: 2; }
}

@media (max-width: 639px) {
  .bbw-grid,
  .bbw-grid--2,
  .bbw-grid--4 { --bbw-cols: 1; }
}

.bbw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: var(--bbw-radius-lg);
  background: #fff;
  border: 1px solid var(--bbw-line);
  box-shadow: var(--bbi-shadow-sm);
  transition: transform 0.25s var(--bbi-ease), box-shadow 0.25s ease, border-color 0.25s ease;
}

a.bbw-card:hover {
  transform: translateY(-4px);
  border-color: rgba(94, 114, 228, 0.28);
  box-shadow: var(--bbi-shadow);
}

.bbw-card .bbw-h3 { margin-top: 6px; }
.bbw-card p { font-size: 15px; line-height: 1.6; }

.bbw-card__more {
  margin-top: auto;
  padding-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bbw-accent-text);
}

.bbw-card__more i { margin-left: 4px; font-size: 12px; transition: transform 0.2s ease; }
a.bbw-card:hover .bbw-card__more i { transform: translateX(4px); }

.bbw-section--navy .bbw-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.bbw-section--navy .bbw-card p { color: #c9d1ea; }

/* Pain → fix card */
.bbw-pain {
  display: flex;
  flex-direction: column;
  border-radius: var(--bbw-radius-lg);
  background: #fff;
  border: 1px solid var(--bbw-line);
  box-shadow: var(--bbi-shadow-sm);
  overflow: hidden;
}

.bbw-pain__problem {
  display: flex;
  gap: 14px;
  padding: 22px 24px;
  background: linear-gradient(180deg, #fff6f8, #fff);
  border-bottom: 1px dashed var(--bbi-bad-edge);
}

.bbw-pain__problem i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--bbi-bad-bg);
  color: var(--bbi-bad);
  font-size: 15px;
}

.bbw-pain__problem b {
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--bbw-ink);
}

.bbw-pain__fix {
  display: flex;
  gap: 14px;
  padding: 20px 24px 24px;
  font-size: 15px;
  line-height: 1.6;
}

.bbw-pain__fix i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--bbi-good-bg);
  color: var(--bbi-good);
  font-size: 15px;
}

/* ---------- Steps ---------- */

.bbw-steps {
  display: grid;
  grid-template-columns: repeat(var(--bbw-cols, 4), minmax(0, 1fr));
  gap: 20px;
  counter-reset: bbw-step;
}

.bbw-step {
  position: relative;
  padding: 26px 24px 28px;
  border-radius: var(--bbw-radius-lg);
  background: #fff;
  border: 1px solid var(--bbw-line);
  counter-increment: bbw-step;
}

.bbw-step::before {
  content: counter(bbw-step, decimal-leading-zero);
  display: inline-grid;
  place-items: center;
  height: 30px;
  padding: 0 12px;
  margin-bottom: 18px;
  border-radius: var(--bbw-pill);
  background: rgba(94, 114, 228, 0.1);
  font-size: 13px;
  font-weight: 800;
  color: var(--bbw-accent-text);
}

.bbw-step p { margin-top: 8px; font-size: 15px; line-height: 1.6; }

/* Pages may set --bbw-cols inline, which outranks these rules, so set the columns themselves. */
@media (max-width: 991px) {
  .bbw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .bbw-steps { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Two-season band (annual vs in-year) ---------- */

.bbw-seasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.bbw-season {
  position: relative;
  padding: 34px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--bbw-line);
  background: #fff;
}

.bbw-season--annual { background: linear-gradient(160deg, #f3f4ff 0%, #fff 55%); }
.bbw-season--inyear { background: linear-gradient(160deg, #fff3f1 0%, #fff 55%); }

.bbw-season__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--bbw-pill);
  font-size: 13px;
  font-weight: 800;
  color: var(--bbi-indigo);
  background: rgba(94, 114, 228, 0.12);
}

.bbw-season--inyear .bbw-season__tag { color: #e5484d; background: rgba(255, 2, 108, 0.1); }
.bbw-season .bbw-h3 { margin-top: 16px; font-size: 26px; letter-spacing: -0.02em; }
.bbw-season > p { margin-top: 10px; }
.bbw-season .bbw-checks { margin-top: 20px !important; }
.bbw-season .bbw-actions { margin-top: 24px; }

@media (max-width: 991px) {
  .bbw-seasons { grid-template-columns: 1fr; }
}

/* ---------- Compare (old way vs BoogieBoard) ---------- */

.bbw-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 28px;
  border: 1px solid var(--bbw-line);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--bbi-shadow);
}

.bbw-compare__col { padding: 34px; }
.bbw-compare__col--old { background: #fbfbfd; border-right: 1px solid var(--bbw-line); }

.bbw-compare__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 18px;
  font-weight: 800;
  color: var(--bbw-ink);
}

.bbw-compare__col li {
  position: relative;
  padding: 12px 0 12px 32px;
  border-top: 1px solid var(--bbw-line);
  font-size: 15px;
  line-height: 1.55;
}

.bbw-compare__col li::before {
  position: absolute;
  left: 0;
  top: 13px;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 15px;
}

.bbw-compare__col--old li { color: var(--bbw-muted); }
.bbw-compare__col--old li::before { content: '\f00d'; color: #e5484d; }
.bbw-compare__col--new li::before { content: '\f00c'; color: var(--bbi-good); }

@media (max-width: 767px) {
  .bbw-compare { grid-template-columns: 1fr; }
  .bbw-compare__col--old { border-right: 0; border-bottom: 1px solid var(--bbw-line); }
  .bbw-compare__col { padding: 24px; }
}

/* ---------- Stats ---------- */

.bbw-stats {
  display: grid;
  grid-template-columns: repeat(var(--bbw-cols, 4), minmax(0, 1fr));
  gap: 20px;
}

.bbw-stat {
  padding: 26px;
  border-radius: var(--bbw-radius-lg);
  background: #fff;
  border: 1px solid var(--bbw-line);
}

.bbw-stat__value {
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--bbi-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bbw-stat__label { margin-top: 10px; font-size: 15px; line-height: 1.5; }

@media (max-width: 991px) {
  .bbw-stats { --bbw-cols: 2; }
}

/* Very small phones: one stat per row, so labels are not squeezed into narrow columns. */
@media (max-width: 379px) {
  .bbw .bbw-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Quotes / reviews ---------- */

.bbw-quote {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
  border-radius: var(--bbw-radius-lg);
  background: #fff;
  border: 1px solid var(--bbw-line);
  box-shadow: var(--bbi-shadow-sm);
}

.bbw-quote blockquote {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--bbw-ink);
  font-weight: 600;
}

.bbw-quote blockquote::before {
  content: '\201C';
  display: block;
  height: 34px;
  font-size: 64px;
  line-height: 1;
  font-weight: 800;
  background: var(--bbi-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bbw-quote__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.bbw-quote__who b { display: block; font-size: 15px; color: var(--bbw-ink); }
.bbw-quote__role { display: block; font-size: 13px; color: var(--bbw-muted); }

.bbw-quote__initials {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--bbi-grad-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
}

.bbw-quote__initials img { width: 100%; height: 100%; object-fit: cover; }

.bbw-quote__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bbw-muted);
}

.bbw-quote__stars { color: #ffb400; font-size: 13px; letter-spacing: 1px; }

.bbw-quote--feature {
  padding: 44px;
  background: var(--bbi-grad-brand);
  border: 0;
  color: #fff;
}

.bbw-quote--feature blockquote { color: #fff; font-size: clamp(20px, 2vw, 26px); line-height: 1.45; }
.bbw-quote--feature blockquote::before { background: none; color: rgba(255, 255, 255, 0.5); }
.bbw-quote--feature .bbw-quote__who b { color: #fff; }
.bbw-quote--feature .bbw-quote__role { color: rgba(255, 255, 255, 0.75); }
.bbw-quote--feature .bbw-quote__initials { background: rgba(255, 255, 255, 0.2); }

/* ---------- Logos ---------- */

.bbw-logos { display: grid; gap: 28px; }

.bbw-logos__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--bbw-muted);
}

/* Logos are trimmed to their ink, then fitted to one box so every mark carries the same weight */
.bbw-logos__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 32px 40px;
}

.bbw-logos__grid img {
  width: 100%;
  max-width: 168px;
  height: 42px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.bbw-logos__grid img:hover { filter: none; opacity: 1; }

@media (max-width: 991px) {
  .bbw-logos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
  .bbw-logos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .bbw-logos__grid img { height: 30px; }
}

/* ---------- FAQ ---------- */

.bbw-faq { display: grid; gap: 12px; }

.bbw-faq details {
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--bbw-line);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.bbw-faq details[open] {
  border-color: rgba(94, 114, 228, 0.25);
  box-shadow: var(--bbi-shadow-sm);
}

.bbw-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-size: 17px;
  font-weight: 700;
  color: var(--bbw-ink);
  cursor: pointer;
  list-style: none;
}

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

.bbw-faq summary::after {
  content: '+';
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--bbw-bg-soft);
  font-size: 20px;
  font-weight: 600;
  color: var(--bbi-indigo);
  transition: transform 0.25s ease;
}

.bbw-faq details[open] summary::after { transform: rotate(45deg); }
.bbw-faq__answer { padding: 0 24px 22px; font-size: 16px; line-height: 1.65; }
.bbw-faq__answer p + p { margin-top: 10px; }

/* Help desk FAQ: topic rail + search + grouped answers (see bbw-faq.js) */
.bbw-helpfaq {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}

.bbw-helpfaq__topics {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--bbw-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--bbi-shadow-sm);
}

.bbw-helpfaq__topic {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font-family: var(--bbw-font);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  color: var(--bbw-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bbw-helpfaq__topic i { width: 18px; text-align: center; color: var(--bbw-muted); transition: color 0.15s ease; }
.bbw-helpfaq__topic span { flex: 1; }

.bbw-helpfaq__topic small {
  min-width: 24px;
  padding: 1px 7px;
  border-radius: var(--bbw-pill);
  background: var(--bbw-bg-soft);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  color: var(--bbw-muted);
}

.bbw-helpfaq__topic:hover { background: var(--bbw-bg-soft); color: var(--bbw-ink); }
.bbw-helpfaq__topic:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.3); }
.bbw-helpfaq__topic.is-active { background: rgba(94, 114, 228, 0.1); color: var(--bbi-indigo); }
.bbw-helpfaq__topic.is-active i { color: var(--bbi-indigo); }
.bbw-helpfaq__topic.is-active small { background: var(--bbi-indigo); color: #fff; }

.bbw-helpfaq__search { position: relative; margin-bottom: 22px; }

.bbw-helpfaq__search > i {
  position: absolute;
  top: 50%;
  left: 18px;
  margin-top: -8px;
  font-size: 16px;
  color: var(--bbw-muted);
  pointer-events: none;
}

.bbw-helpfaq__search .bbw-input { min-height: 54px; padding-left: 48px; padding-right: 120px; border-radius: 16px; }

.bbw-helpfaq__results {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 700;
  color: var(--bbw-muted);
}

.bbw-helpfaq__list { gap: 32px; }
.bbw-helpfaq__group { display: grid; gap: 10px; scroll-margin-top: 110px; }

.bbw-helpfaq__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--bbw-ink);
}

.bbw-helpfaq__heading .bbw-tile { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; }
.bbw-helpfaq .bbw-faq summary { padding: 17px 22px; font-size: 16px; }
.bbw-helpfaq .bbw-faq summary::after { width: 28px; height: 28px; }
.bbw-helpfaq .bbw-faq__answer { padding: 0 22px 20px; font-size: 15px; color: var(--bbw-text); }

.bbw-helpfaq__empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 36px 24px;
  border: 1.5px dashed #d5dcec;
  border-radius: 18px;
  background: #fff;
  text-align: center;
}

.bbw-helpfaq__empty b { font-size: 17px; color: var(--bbw-ink); }
.bbw-helpfaq__empty p { margin: 4px 0 0; font-size: 15px; color: var(--bbw-text); }

@media (max-width: 900px) {
  .bbw-helpfaq { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .bbw-helpfaq__topics {
    position: static;
    display: flex;
    gap: 8px;
    padding: 0 0 4px;
    border: 0;
    background: none;
    box-shadow: none;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .bbw-helpfaq__topic {
    flex: none;
    width: auto;
    padding: 8px 12px;
    border: 1px solid var(--bbw-line);
    border-radius: var(--bbw-pill);
    background: #fff;
  }

  .bbw-helpfaq__topic span { flex: none; }
}

/* ---------- CTA band ---------- */

.bbw-cta {
  position: relative;
  overflow: hidden;
  padding: 64px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.18), transparent 35%),
    radial-gradient(circle at 90% 90%, rgba(252, 95, 8, 0.45), transparent 45%),
    linear-gradient(120deg, #5e72e4 0%, #825ee4 45%, #ff026c 100%);
  color: #fff;
  text-align: center;
}

.bbw-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, transparent 30%, #000 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 90%);
  pointer-events: none;
}

.bbw-cta > * { position: relative; z-index: 1; }
.bbw-cta .bbw-h2 { color: #fff; max-width: 760px; margin: 0 auto; }
.bbw-cta .bbw-lead { color: rgba(255, 255, 255, 0.88); max-width: 640px; margin: 18px auto 0; }
.bbw-cta .bbw-actions { justify-content: center; margin-top: 30px; }
.bbw-cta .bbw-btn--primary { background: #fff; color: var(--bbw-ink) !important; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.35); }
.bbw-cta .bbw-btn--secondary { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45); }

@media (max-width: 767px) {
  .bbw-cta { padding: 44px 22px; border-radius: 24px; }
}

/* ---------- Chip nav (in-page anchors) ---------- */

.bbw-chipnav {
  position: sticky;
  top: calc(var(--bbw-nav-h) + 10px);
  z-index: 20;
  display: flex;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 56px;
  padding: 6px;
  border-radius: var(--bbw-pill);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--bbw-line);
  box-shadow: var(--bbi-shadow-sm);
  overflow-x: auto;
  scrollbar-width: none;
}

.bbw-chipnav::-webkit-scrollbar { display: none; }

.bbw-chipnav a {
  flex: none;
  padding: 8px 16px;
  border-radius: var(--bbw-pill);
  font-size: 14px;
  font-weight: 700;
  color: var(--bbw-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.bbw-chipnav a:hover,
.bbw-chipnav a.is-active { background: var(--bbw-ink); color: #fff; }

/* ---------- Breadcrumbs ---------- */

.bbw-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bbw-muted);
}

.bbw-crumbs a:hover { color: var(--bbi-indigo); }
.bbw-crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--bbw-line); }
.bbw-hero--center .bbw-crumbs { justify-content: center; }

/* ---------- Related links ---------- */

.bbw-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.bbw-related a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--bbw-line);
  font-weight: 700;
  color: var(--bbw-ink);
  transition: transform 0.2s var(--bbi-ease), box-shadow 0.2s ease;
}

.bbw-related a:hover { transform: translateY(-3px); box-shadow: var(--bbi-shadow-sm); }
.bbw-related__text { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--bbw-ink); }
.bbw-related__sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--bbw-muted); }

@media (max-width: 767px) {
  .bbw-related { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */

.bbw-footer {
  padding: 80px 0 40px;
  background: var(--bbw-bg-navy);
  color: #aab4d4;
  font-size: 14px;
}

.bbw-footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
}

.bbw-footer__brand img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.bbw-footer__brand p { margin-top: 16px; max-width: 300px; line-height: 1.6; }

.bbw-footer h4 {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.bbw-footer li + li { margin-top: 10px; }
.bbw-footer a:hover { color: #fff; }

.bbw-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
}

.bbw-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }

.bbw-footer__social {
  display: flex;
  gap: 10px;
}

.bbw-footer__social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 991px) {
  .bbw-footer__top { grid-template-columns: repeat(2, 1fr); }
  .bbw-footer__brand { grid-column: 1 / -1; }
}

/* ---------- Reveal on scroll ---------- */

.bbw-js .bbw-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--bbi-ease), transform 0.7s var(--bbi-ease);
}

.bbw-js .bbw-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .bbw-js[data-reduced-motion="honor"] .bbw-reveal { opacity: 1; transform: none; transition: none; }
  :root[data-reduced-motion="honor"] .bbw-btn:hover,
  :root[data-reduced-motion="honor"] a.bbw-card:hover { transform: none; }
}

/* ---------- Utilities used by page copy ---------- */

.bbw-center { text-align: center; }
.bbw-mt-sm { margin-top: 16px !important; }
.bbw-mt { margin-top: 32px !important; }
.bbw-mt-lg { margin-top: 64px !important; }
.bbw-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--bbw-pill);
  background: rgba(94, 114, 228, 0.1);
  color: var(--bbw-accent-text);
  font-size: 13px;
  font-weight: 700;
}

.bbw-badge--new { background: rgba(255, 2, 108, 0.1); color: #e0115f; }

/* ---------- Feature explorer (tabs) ---------- */

.bbw-tabs__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 auto 40px;
}

.bbw-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 18px 0 8px;
  border: 1px solid var(--bbw-line);
  border-radius: var(--bbw-pill);
  background: #fff;
  font-family: var(--bbw-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--bbw-ink);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.bbw-tabs__tab .bbw-tile { width: 32px; height: 32px; border-radius: 50%; font-size: 13px; box-shadow: none; }
.bbw-tabs__tab:hover { border-color: rgba(94, 114, 228, 0.35); }

.bbw-tabs__tab.is-active {
  background: var(--bbw-ink);
  border-color: var(--bbw-ink);
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(30, 42, 74, 0.7);
}

.bbw-tabs__panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
  padding: 40px;
  border-radius: 32px;
  background: #fff;
  border: 1px solid var(--bbw-line);
  box-shadow: var(--bbi-shadow);
}

.bbw-tabs__panel .bbw-h3 { font-size: 28px; letter-spacing: -0.02em; }
.bbw-tabs__panel .bbw-lead { margin-top: 14px; font-size: 17px; }
.bbw-tabs__panel .bbw-actions { margin-top: 26px; }

@media (max-width: 991px) {
  .bbw-tabs__list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .bbw-tabs__list::-webkit-scrollbar { display: none; }
  .bbw-tabs__tab { flex: none; }
  .bbw-tabs__panel { grid-template-columns: 1fr; gap: 28px; padding: 24px; }
}

/* ---------- G2 review card ---------- */

.bbw-g2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-bottom: 36px;
  font-size: 15px;
  font-weight: 700;
  color: var(--bbw-ink);
}

.bbw-g2__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: var(--bbw-pill);
  background: #fff;
  border: 1px solid var(--bbw-line);
  box-shadow: var(--bbi-shadow-sm);
}

.bbw-g2__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ff492c;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.bbw-review__title { font-size: 16px; font-weight: 800; color: var(--bbw-ink); }

/* ---------- Video facade ---------- */

.bbw-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  border-radius: var(--bbw-radius-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.22), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(252, 95, 8, 0.5), transparent 46%),
    linear-gradient(120deg, #5e72e4 0%, #825ee4 50%, #ff026c 100%);
  cursor: pointer;
  box-shadow: var(--bbi-shadow);
  isolation: isolate;
}

/* A product screen rising from the bottom of the card */
.bbw-video__screen {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 11%;
  bottom: -8%;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 30px 60px -20px rgba(20, 28, 54, 0.6);
  transition: transform 0.35s var(--bbi-ease);
}

.bbw-video__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  background: #f4f6fb;
  border-bottom: 1px solid #e6eaf3;
}

.bbw-video__bar i { width: 7px; height: 7px; border-radius: 50%; background: #dfe4ee; }
.bbw-video__bar i:nth-child(1) { background: #ff8a8a; }
.bbw-video__bar i:nth-child(2) { background: #ffcf6e; }
.bbw-video__bar i:nth-child(3) { background: #7fdca3; }

.bbw-video__screen img {
  display: block;
  width: 100%;
  height: calc(100% - 22px);
  object-fit: cover;
  object-position: top center;
}

/* YouTube thumbnails are 4:3 with letterbox bars; scale past them */
.bbw-video__screen--yt img { object-position: center; transform: scale(1.14); }

/* Darken toward the title so it always reads */
.bbw-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 28, 54, 0.08) 0%, rgba(20, 28, 54, 0.28) 45%, rgba(20, 28, 54, 0.82) 100%);
  transition: opacity 0.3s ease;
}

.bbw-video__play {
  position: absolute;
  top: 46%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: var(--bbi-grad-cta);
  color: #fff;
  font-size: 24px;
  box-shadow: var(--bbi-shadow-cta), 0 0 0 10px rgba(255, 255, 255, 0.16);
  transition: transform 0.25s var(--bbi-ease), box-shadow 0.25s ease;
}

.bbw-video__play i { margin-left: 4px; }

.bbw-video__play::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  animation: bbw-video-pulse 2.4s ease-out infinite;
}

@keyframes bbw-video-pulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0; }
}

.bbw-video:hover .bbw-video__screen { transform: translateY(-6px); }
.bbw-video:hover .bbw-video__play { transform: scale(1.08); box-shadow: var(--bbi-shadow-cta), 0 0 0 14px rgba(255, 255, 255, 0.2); }
.bbw-video:focus-visible { outline: 3px solid var(--bbi-indigo); outline-offset: 3px; }

.bbw-video__label {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 8px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
  color: #fff;
  text-shadow: 0 2px 12px rgba(20, 28, 54, 0.45);
}

.bbw-video__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: none;
}

@media (max-width: 575px) {
  .bbw-video__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; font-size: 20px; }
  .bbw-video__label { left: 16px; right: 16px; bottom: 14px; font-size: 15px; }
  .bbw-video__chip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-reduced-motion="honor"] .bbw-video__play::before { animation: none; }
}

.bbw-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Once playing, the player owns every click: no poster overlay over its controls */
.bbw-video--playing { cursor: auto; background: #0b1020; }
.bbw-video--playing::after { display: none; }
.bbw-video--playing iframe { z-index: 1; }

/* ---------- Integration pills ---------- */

.bbw-pills { display: flex; flex-wrap: wrap; gap: 10px; }

.bbw-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--bbw-pill);
  background: #fff;
  border: 1px solid var(--bbw-line);
  font-size: 14px;
  font-weight: 700;
  color: var(--bbw-ink);
}

.bbw-pill i { color: var(--bbi-indigo); }

/* ---------- Pricing ---------- */

.bbw-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.bbw-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--bbw-line);
  box-shadow: var(--bbi-shadow-sm);
}

.bbw-plan--featured {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #5e72e4, #825ee4 50%, #ff026c) border-box;
  box-shadow: var(--bbi-shadow-lg);
  transform: translateY(-10px);
}

.bbw-plan__ribbon {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: var(--bbw-pill);
  background: var(--bbi-grad-cta);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--bbi-shadow-cta);
}

.bbw-plan__name { font-size: 20px; font-weight: 800; color: var(--bbw-ink); }
.bbw-plan__for { margin-top: 4px; font-size: 14px; color: var(--bbw-muted); }

.bbw-plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 22px 0 4px;
}

.bbw-plan__price b {
  font-size: 48px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bbw-ink);
}

.bbw-plan__price span { font-size: 15px; font-weight: 600; color: var(--bbw-muted); }

.bbw-plan__limit {
  display: inline-flex;
  align-self: flex-start;
  margin: 10px 0 20px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--bbw-bg-soft);
  font-size: 14px;
  font-weight: 700;
  color: var(--bbw-ink);
}

.bbw-plan .bbw-checks { margin: 0 0 26px !important; }
.bbw-plan .bbw-btn { margin-top: auto; width: 100%; }
.bbw-plan__note { margin-top: 10px; font-size: 13px; text-align: center; color: var(--bbw-muted); }

@media (max-width: 991px) {
  .bbw-plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .bbw-plan--featured { transform: none; }
}

/* Pricing calculator: territories in, plan and monthly cost out (priced by the server) */

.bbw-calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: 28px;
  border: 1px solid var(--bbw-line);
  background: #fff;
  box-shadow: var(--bbi-shadow-sm);
  overflow: hidden;
}

.bbw-calc__ask { padding: 44px 48px; }
.bbw-calc__ask .bbw-eyebrow { margin-bottom: 10px; }
.bbw-calc__title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--bbw-ink); }
/* .bbw-calc prefixes outrank the site's .bbw p reset */
.bbw-calc .bbw-calc__lead { margin: 10px 0 28px; font-size: 16px; line-height: 1.6; color: var(--bbw-text); }

.bbw-calc__label {
  display: block;
  margin: 0 0 10px; /* the app stylesheet gives every label a left margin */
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bbw-muted);
}

.bbw-calc__stepper { display: flex; gap: 10px; }

.bbw-calc__step {
  flex: none;
  display: grid;
  place-items: center;
  width: 60px;
  border: 1.5px solid #dfe4f0;
  border-radius: 16px;
  background: #fff;
  color: var(--bbw-ink);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.bbw-calc__step:hover { border-color: var(--bbi-indigo); color: var(--bbi-indigo); }
.bbw-calc__step:active { transform: scale(0.95); }
.bbw-calc__step:disabled { opacity: 0.4; cursor: default; border-color: #dfe4f0; color: var(--bbw-ink); }
.bbw-calc__step:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(94, 114, 228, 0.16); border-color: var(--bbi-indigo); }

.bbw-calc__count {
  flex: 1;
  min-width: 0;
  height: 68px;
  margin: 0;
  padding: 0 16px;
  border: 1.5px solid #dfe4f0;
  border-radius: 16px;
  background: #fff;
  font-family: var(--bbw-font);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--bbw-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -moz-appearance: textfield;
  appearance: textfield;
}

.bbw-calc__count::-webkit-outer-spin-button,
.bbw-calc__count::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.bbw-calc__count:hover { border-color: #c5cde3; }
.bbw-calc__count:focus { outline: none; border-color: var(--bbi-indigo); box-shadow: 0 0 0 4px rgba(94, 114, 228, 0.16); }

.bbw-calc__range {
  display: block;
  width: 100%;
  height: 6px;
  margin: 28px 0 10px;
  border-radius: var(--bbw-pill);
  background:
    linear-gradient(90deg, #5e72e4, #825ee4) 0 0 / var(--fill, 0%) 100% no-repeat,
    var(--bbw-line);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.bbw-calc__range::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  border: 3px solid #5e72e4;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px -2px rgba(94, 114, 228, 0.45);
  -webkit-appearance: none;
  appearance: none;
}

.bbw-calc__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #5e72e4;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px -2px rgba(94, 114, 228, 0.45);
}

.bbw-calc__range:focus-visible { outline: none; }
.bbw-calc__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(94, 114, 228, 0.2); }

.bbw-calc__ends {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--bbw-muted);
}

.bbw-calc .bbw-calc__hint {
  display: flex;
  gap: 10px;
  margin: 26px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bbw-bg-soft);
  font-size: 13px;
  line-height: 1.55;
  color: var(--bbw-text);
}

.bbw-calc__hint i { margin-top: 3px; color: var(--bbi-indigo); }

.bbw-calc__out {
  display: flex;
  flex-direction: column;
  padding: 44px 48px;
  border-left: 1px solid var(--bbw-line);
  background: linear-gradient(160deg, #f7f8fd 0%, #fbf6fb 100%);
}

.bbw-calc__result { transition: opacity 0.2s ease, transform 0.2s ease; }
.bbw-calc__result.htmx-added { opacity: 0.35; transform: translateY(4px); }

.bbw-calc__planrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--bbw-muted);
}

.bbw-calc__badge {
  padding: 5px 12px;
  border-radius: var(--bbw-pill);
  background: var(--bbi-grad-brand);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bbw-calc__total { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 24px; }

.bbw-calc__total b {
  font-size: 56px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--bbw-ink);
}

.bbw-calc__total span { font-size: 16px; font-weight: 600; color: var(--bbw-muted); }

.bbw-calc__lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(30, 42, 74, 0.08); }

.bbw-calc__lines li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(30, 42, 74, 0.08);
  font-size: 15px;
  font-weight: 700;
  color: var(--bbw-ink);
}

.bbw-calc__lines small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--bbw-muted); }
.bbw-calc__lines b { flex: none; font-variant-numeric: tabular-nums; }

.bbw-calc .bbw-calc__cover {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--bbw-text);
}

.bbw-calc__cover i { color: #1aae6f; }
.bbw-calc__out .bbw-btn { align-self: flex-start; margin-top: 28px; }

@media (max-width: 991px) {
  .bbw-calc { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .bbw-calc__out { border-left: 0; border-top: 1px solid var(--bbw-line); }
}

@media (max-width: 575px) {
  .bbw-calc__ask,
  .bbw-calc__out { padding: 30px 22px; }
  .bbw-calc__title { font-size: 22px; }
  .bbw-calc__total b { font-size: 46px; }
  .bbw-calc__out .bbw-btn { align-self: stretch; }
}

/* A backdrop-filter makes the header the containing block for the fixed drawer; drop it while open. */
.bbw-nav.is-drawer {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Step icons + connector line (desktop) */
.bbw-step__icon { position: absolute; top: 22px; right: 22px; }

@media (min-width: 992px) {
  .bbw-steps { position: relative; }

  .bbw-steps::before {
    content: '';
    position: absolute;
    top: 41px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(94, 114, 228, 0.35) 0 8px, transparent 8px 16px);
    z-index: 0;
  }

  .bbw-step { z-index: 1; }
}

/* In-page anchors land below the sticky nav */
.bbw [id] { scroll-margin-top: calc(var(--bbw-nav-h) + 16px); }

html:has(.bbw) { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html[data-reduced-motion="honor"]:has(.bbw) { scroll-behavior: auto; }
}

/* ==========================================================================
   Customer stories: /case-studies/ index and each case study page.
   .bbw-storycard   hero art: customer logo over the headline metrics
   .bbw-glance      "At a glance" facts band under the hero
   .bbw-story       long-form story prose (headings, lists, pull quotes, stats)
   .bbw-stories     customer story cards (index grid and "more stories")
   ========================================================================== */

.bbw-logo-img {
  height: var(--bbw-logo-h, 36px) !important;
  width: auto !important;
  max-width: 100%;
}

/* Initials avatar on quotes: the `.bbw-quote__who span` rule would otherwise turn it into a small grey block. */
.bbw-quote__who .bbw-quote__initials {
  display: grid;
  font-size: 15px;
  color: #fff;
}

.bbw-wordmark {
  font-size: calc(var(--bbw-logo-h, 36px) * 0.86);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--bbw-ink);
  white-space: nowrap;
}

/* Hero art card */
.bbw-storycard {
  position: relative;
  padding: 34px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--bbw-line);
  box-shadow: var(--bbi-shadow-lg);
  overflow: hidden;
}

.bbw-storycard::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--bbi-grad-cta);
}

.bbw-storycard__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  min-height: 44px;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--bbw-line);
}

.bbw-storycard__with {
  font-size: 13px;
  font-weight: 700;
  color: var(--bbw-muted);
}

.bbw-storycard__brand .bbw-badge { margin-left: auto; }
.bbw-storycard .bbw-stats { --bbw-cols: 2; gap: 12px; }

.bbw-storycard .bbw-stat {
  padding: 20px 22px;
  border-color: transparent;
  background: var(--bbw-bg-soft);
}

.bbw-storycard .bbw-stat__value { font-size: clamp(30px, 3vw, 40px); }
.bbw-storycard .bbw-stat__label { margin-top: 8px; font-size: 14px; }

.bbw-storycard__quote {
  margin: 22px 0 0;
  padding: 0 0 0 18px;
  border-left: 3px solid rgba(94, 114, 228, 0.35);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--bbw-ink);
}

.bbw-storycard__quote cite {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  color: var(--bbw-muted);
}

@media (max-width: 479px) {
  .bbw-storycard { padding: 24px 20px; border-radius: 22px; }
  .bbw-storycard .bbw-stat { padding: 14px; }
  .bbw-storycard .bbw-stat__value { font-size: 24px; }
  .bbw-storycard__brand .bbw-badge { margin-left: 0; }
}

/* At a glance */
.bbw-glance {
  border-radius: var(--bbw-radius-lg);
  background: #fff;
  border: 1px solid var(--bbw-line);
  box-shadow: var(--bbi-shadow-sm);
  overflow: hidden;
}

.bbw-glance__title {
  padding: 18px 26px;
  border-bottom: 1px solid var(--bbw-line);
  background: var(--bbw-bg-soft);
  font-size: 13px !important;
  font-weight: 800;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--bbw-ink);
}

.bbw-glance__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--bbw-line);
}

.bbw-glance__grid > div { padding: 24px 26px; background: #fff; }

.bbw-glance dt {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bbi-indigo);
}

.bbw-glance dd { margin: 0; font-size: 15px; line-height: 1.6; }
.bbw-glance .bbw-pills { gap: 8px; }
.bbw-glance .bbw-pill { height: 32px; padding: 0 12px; font-size: 13px; transition: border-color 0.2s ease, color 0.2s ease; }
.bbw-glance a.bbw-pill:hover { border-color: rgba(94, 114, 228, 0.45); color: var(--bbi-indigo); }

@media (max-width: 991px) {
  .bbw-glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .bbw-glance__grid { grid-template-columns: 1fr; }
  .bbw-glance__grid > div { padding: 20px; }
}

/* Story prose. `.bbw .bbw-story` outranks the `.bbw p` / `.bbw h3` resets. */
.bbw-story { font-size: 18px; line-height: 1.75; }
.bbw-story p { font-size: inherit; }
.bbw .bbw-story > * + * { margin-top: 20px; }
.bbw .bbw-story > :first-child { margin-top: 0; }
.bbw-story strong { color: var(--bbw-ink); }

.bbw .bbw-story > .bbw-eyebrow { margin: 80px 0 0; }
.bbw .bbw-story > .bbw-eyebrow:first-child { margin-top: 0; }

.bbw-story h2 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.03em !important;
}

.bbw .bbw-story > .bbw-eyebrow + h2 { margin-top: 12px; }
.bbw .bbw-story > h2 + p { margin-top: 22px; }
.bbw .bbw-story > h3 { margin-top: 48px; font-size: 22px; line-height: 1.3; font-weight: 700; }
.bbw .bbw-story > h3 + * { margin-top: 12px; }
.bbw-story ul { display: grid; gap: 12px; }
.bbw-story ul li { position: relative; padding-left: 28px; }

.bbw-story ul li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0.68em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bbi-grad-brand);
}

.bbw-story > .bbw-quote { margin-top: 44px !important; margin-bottom: 44px !important; }
.bbw .bbw-story > .bbw-quote + * { margin-top: 0; }
.bbw .bbw-story > .bbw-stats { --bbw-cols: 3; margin: 36px 0; }
.bbw .bbw-story > .bbw-stats + * { margin-top: 0; }

.bbw-story__note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bbw-muted);
}

@media (min-width: 1100px) {
  .bbw-story > .bbw-quote--feature { margin-left: -56px !important; margin-right: -56px !important; }
}

@media (max-width: 767px) {
  .bbw-story { font-size: 17px; }
  .bbw .bbw-story > .bbw-eyebrow { margin-top: 56px; }
  .bbw .bbw-story > .bbw-stats { --bbw-cols: 1; }
  .bbw-story > .bbw-quote--feature { padding: 30px 24px; }
}

/* Customer story cards */
.bbw-stories {
  display: grid;
  grid-template-columns: repeat(var(--bbw-cols, 2), minmax(0, 1fr));
  gap: 24px;
}

.bbw-stories--3 { --bbw-cols: 3; }
.bbw-storytile { gap: 14px; padding: 32px; }

.bbw-storytile__logo {
  display: flex;
  align-items: center;
  height: 52px;
}

.bbw-storytile__metric {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-bottom: 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--bbw-line);
}

.bbw-storytile__metric b {
  font-size: 32px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--bbi-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bbw-storytile__metric span {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--bbw-muted);
}

.bbw-stories--3 .bbw-storytile { padding: 26px; }
.bbw-stories--3 .bbw-storytile .bbw-h3 { font-size: 19px; }
.bbw-stories--3 .bbw-storytile__metric b { font-size: 28px; }

@media (max-width: 991px) {
  .bbw-stories--3 { --bbw-cols: 1; }
}

@media (max-width: 767px) {
  .bbw-stories { --bbw-cols: 1; }
  .bbw-storytile { padding: 24px; }
}

/* ==========================================================================
   Utility pages: About, Help desk, Referral, Legal documents.
   Everything below is bbw- prefixed and only used by those templates
   (templates/web/pages/resources/*, templates/web/pages/legal/*,
   templates/web/components/website_help_desk_form.html and
   website_referral_form.html).
   ========================================================================== */

/* ---------- Screen-reader only ---------- */

.bbw-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Photo frame (content photography) ---------- */

.bbw-photo {
  margin: 0;
  border-radius: var(--bbw-radius-lg);
  overflow: hidden;
  background: var(--bbw-bg-soft);
  box-shadow: var(--bbi-shadow-lg);
}

.bbw-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Founders (About) ---------- */

.bbw-founders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.bbw-founder {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--bbw-radius-lg);
  background: #fff;
  border: 1px solid var(--bbw-line);
  box-shadow: var(--bbi-shadow-sm);
  overflow: hidden;
  transition: transform 0.25s var(--bbi-ease), box-shadow 0.25s ease;
}

.bbw-founder:hover,
.bbw-founder:focus-within { transform: translateY(-4px); box-shadow: var(--bbi-shadow); }

.bbw-founder__photo {
  position: relative;
  aspect-ratio: 994 / 1260;
  background: var(--bbw-bg-soft);
}

.bbw-founder__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Second image is the monochrome variant, revealed on hover/focus. */
.bbw-founder__photo img + img {
  opacity: 0;
  filter: grayscale(1);
  transition: opacity 0.5s ease;
}

.bbw-founder:hover .bbw-founder__photo img + img,
.bbw-founder:focus-within .bbw-founder__photo img + img { opacity: 1; }

.bbw-founder__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px 24px;
}

.bbw-founder__role { font-size: 14px; font-weight: 700; color: var(--bbi-indigo); }
.bbw-founder__bio { font-size: 15px; line-height: 1.6; }

.bbw-founder__links {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}

.bbw-founder__links a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bbw-bg-soft);
  color: var(--bbw-ink);
  font-size: 16px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.bbw-founder__links a:hover { background: var(--bbi-indigo); color: #fff; }

@media (max-width: 767px) {
  .bbw-founders { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-reduced-motion="honor"] .bbw-founder:hover,
  :root[data-reduced-motion="honor"] .bbw-founder:focus-within { transform: none; }
  :root[data-reduced-motion="honor"] .bbw-founder__photo img + img { transition: none; }
}

/* ---------- Three-up steps ---------- */

.bbw-steps--3 { --bbw-cols: 3; }

@media (max-width: 767px) {
  .bbw-steps--3 { --bbw-cols: 1; }
}

/* ---------- Forms (help desk, referral) ---------- */

.bbw-form-card {
  position: relative;
  padding: 32px;
  border-radius: var(--bbw-radius-lg);
  background: #fff;
  border: 1px solid var(--bbw-line);
  box-shadow: var(--bbi-shadow-lg);
  text-align: left;
}

.bbw-form-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 24px;
  right: 24px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--bbi-grad-brand);
}

.bbw-form-card__title { font-size: 22px; font-weight: 800; line-height: 1.25; }
.bbw-form-card__lead { margin: 6px 0 24px !important; font-size: 15px; color: var(--bbw-muted); }

.bbw-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.bbw-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.bbw-field--full { grid-column: 1 / -1; }

.bbw-label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bbw-ink);
}

.bbw-label__req { margin-left: 2px; color: var(--bbi-pink); }
.bbw-label__opt { font-weight: 600; color: var(--bbw-muted); }

.bbw-input,
.bbw-select,
.bbw-textarea,
.bbw-file {
  display: block;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 12px 16px;
  border: 1.5px solid #dfe4f0;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(30, 42, 74, 0.04);
  font-family: var(--bbw-font);
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  line-height: 1.4;
  color: var(--bbw-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.bbw-input::placeholder,
.bbw-textarea::placeholder { color: #a3adc6; opacity: 1; }

.bbw-input:hover,
.bbw-select:hover,
.bbw-textarea:hover,
.bbw-file:hover { border-color: #c5cde3; }

.bbw-input:focus,
.bbw-select:focus,
.bbw-textarea:focus,
.bbw-file:focus,
.bbw-input:focus-visible,
.bbw-select:focus-visible,
.bbw-textarea:focus-visible,
.bbw-file:focus-visible {
  outline: none;
  border-color: var(--bbi-indigo);
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(94, 114, 228, 0.16);
}

.bbw-textarea { min-height: 140px; resize: vertical; }

.bbw-select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237d8aa8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 16px;
  cursor: pointer;
}

/* Line-height matches the button so it sits centered in the field */
.bbw-file { padding: 7px 8px; font-size: 14px; line-height: 34px; cursor: pointer; }

.bbw-file::file-selector-button {
  height: 34px;
  margin-right: 12px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--bbw-pill);
  background: var(--bbw-bg-soft);
  font-family: var(--bbw-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--bbw-ink);
  vertical-align: middle;
  cursor: pointer;
}

.bbw-input[aria-invalid="true"],
.bbw-select[aria-invalid="true"],
.bbw-textarea[aria-invalid="true"],
.bbw-file[aria-invalid="true"] { border-color: var(--bbi-bad); }

/* Screenshot picker (help desk): drop zone + running list of previews, see bbw-attachments.js */
.bbw-attach-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.bbw-attach-count {
  padding: 2px 10px;
  border-radius: var(--bbw-pill);
  background: rgba(94, 114, 228, 0.1);
  font-size: 12px;
  font-weight: 800;
  color: var(--bbi-indigo);
  font-variant-numeric: tabular-nums;
}

.bbw-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 22px 16px 20px;
  border: 1.5px dashed #c9d1e6;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfcff, #f6f8fd);
  text-align: center;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.bbw-drop:hover,
.bbw-drop.is-dragging { border-color: var(--bbi-indigo); background: rgba(94, 114, 228, 0.06); }
.bbw-drop.is-dragging { box-shadow: 0 0 0 4px rgba(94, 114, 228, 0.16); }
.bbw-drop:focus-within { border-color: var(--bbi-indigo); box-shadow: 0 0 0 4px rgba(94, 114, 228, 0.16); }
.bbw-drop.is-full { border-style: solid; opacity: 0.7; }

/* The real input covers the zone, so a click anywhere opens the picker and it stays keyboard-focusable */
.bbw-drop__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.bbw-drop__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 16px -8px rgba(30, 42, 74, 0.35);
  font-size: 17px;
  color: var(--bbi-indigo);
  transition: transform 0.2s ease;
}

.bbw-drop.is-dragging .bbw-drop__icon { transform: translateY(-3px); }
.bbw-drop__text { font-size: 15px; font-weight: 700; color: var(--bbw-ink); }
.bbw-drop__browse { color: var(--bbi-indigo); text-decoration: underline; text-underline-offset: 3px; }
.bbw-drop__hint { font-size: 13px; color: var(--bbw-muted); }
.bbw-drop:has(.bbw-drop__input[aria-invalid="true"]) { border-color: var(--bbi-bad); }

.bbw-attach-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.bbw-attach {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 36px 8px 8px;
  border: 1px solid var(--bbw-line, #edf0f7);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(30, 42, 74, 0.04);
}

.bbw-attach__thumb {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bbw-bg-soft);
}

.bbw-attach__meta { display: grid; min-width: 0; }

.bbw-attach__name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  color: var(--bbw-ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bbw-attach__size { font-size: 12px; color: var(--bbw-muted); }

.bbw-attach__remove {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bbw-bg-soft);
  font-size: 12px;
  color: var(--bbw-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bbw-attach__remove:hover,
.bbw-attach__remove:focus-visible { outline: none; background: #ffe0e8; color: var(--bbi-bad); }

.bbw-help { font-size: 13px; line-height: 1.5; color: var(--bbw-muted); }
.bbw-help--strong { font-weight: 700; color: var(--bbw-text); }

.bbw-field__error {
  display: grid;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: #d0204f;
}

.bbw-form-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.bbw-form-alert i { margin-top: 3px; }
.bbw-form-alert--error { background: var(--bbi-bad-bg); color: #b0123f; }
.bbw-form-alert--success { margin: 0; background: var(--bbi-good-bg); color: #0d7347; }

.bbw-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.bbw-fieldset + .bbw-fieldset {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px dashed #dfe4f0;
}

/* Floated so the legend sits inside the fieldset instead of on its top border. */
.bbw .bbw-fieldset legend {
  float: left;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--bbw-ink);
}

.bbw-fieldset legend + * { clear: left; }
.bbw-fieldset legend .bbw-tile { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }

.bbw-form__actions { align-items: stretch; margin-top: 6px; }
.bbw-form > .bbw-form__actions { margin-top: 30px; }
.bbw-form__actions .bbw-btn { width: 100%; }

.bbw-btn:disabled,
.bbw-btn[disabled] { opacity: 0.7; cursor: progress; transform: none; }

.bbw-form-note {
  margin-top: 18px !important;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  color: var(--bbw-muted);
}

@media (max-width: 639px) {
  .bbw-form__grid { grid-template-columns: 1fr; }
  .bbw-form-card { padding: 26px 18px 22px; }
}

/* ---------- Referral map (hero art with animated pins) ---------- */

.bbw-refmap { position: relative; margin: 0; }

.bbw-refmap__pins {
  position: absolute;
  top: 14%;
  left: 3%;
  width: 88%;
  height: 47%;
  border-radius: 33% 61% 20% 45%;
  pointer-events: none;
}

/* ---------- Legal documents ---------- */

.bbw-legal-page .bbw-hero { padding-bottom: 36px; }
.bbw-legal-page .bbw-h1 { font-size: clamp(34px, 4.2vw, 54px); }
.bbw-legal-page .bbw-trust__item i { color: var(--bbw-muted); }

.bbw-legal-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.bbw-legal-toc {
  position: sticky;
  top: calc(var(--bbw-nav-h) + 24px);
  max-height: calc(100vh - var(--bbw-nav-h) - 48px);
  overflow-y: auto;
  padding: 18px 12px 14px;
  border-radius: 20px;
  background: var(--bbw-bg-soft);
  border: 1px solid var(--bbw-line);
  scrollbar-width: thin;
}

.bbw-legal-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bbw-muted);
  list-style: none;
  cursor: pointer;
}

.bbw-legal-toc summary::-webkit-details-marker { display: none; }

.bbw-legal-toc summary::after {
  content: '+';
  font-size: 18px;
  font-weight: 600;
  color: var(--bbi-indigo);
  transition: transform 0.2s ease;
}

.bbw-legal-toc[open] summary::after { transform: rotate(45deg); }

.bbw-legal-toc ol {
  display: grid;
  gap: 2px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.bbw-legal-toc a {
  display: block;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bbw-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.bbw-legal-toc a.is-sub { padding-left: 22px; font-size: 13px; font-weight: 500; }
.bbw-legal-toc a:hover { background: #fff; color: var(--bbw-ink); }

.bbw-legal-toc a.is-active {
  background: #fff;
  color: var(--bbi-indigo);
  box-shadow: var(--bbi-shadow-sm);
}

@media (min-width: 992px) {
  .bbw-legal-toc summary { cursor: default; pointer-events: none; }
  .bbw-legal-toc summary::after { display: none; }
}

@media (max-width: 991px) {
  .bbw-legal-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bbw-legal-toc { position: static; max-height: none; padding: 16px 10px; }
}

.bbw-legal {
  max-width: 760px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--bbw-text);
  overflow-wrap: anywhere;
}

.bbw-legal section[id] { scroll-margin-top: calc(var(--bbw-nav-h) + 24px); }
.bbw-legal > section + section { margin-top: 48px; }
.bbw-legal section section { margin-top: 28px; }

.bbw-legal h2 {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 800;
  line-height: 1.3;
}

.bbw-legal h3 { margin: 0 0 10px; font-size: 19px; font-weight: 700; line-height: 1.35; }
.bbw-legal h4 { margin: 22px 0 8px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.bbw-legal p { margin: 0 0 16px; }
.bbw-legal p:last-child { margin-bottom: 0; }
.bbw-legal strong { font-weight: 700; color: var(--bbw-ink); }

.bbw-legal ul,
.bbw-legal ol {
  margin: 0 0 16px;
  padding-left: 1.4em;
  list-style: disc;
}

.bbw-legal ol { list-style: decimal; }
.bbw-legal li + li { margin-top: 6px; }
.bbw-legal li::marker { color: var(--bbi-indigo); }

.bbw-legal a {
  color: var(--bbi-indigo);
  font-weight: 600;
  border-bottom: 1px solid rgba(94, 114, 228, 0.3);
  transition: border-color 0.2s ease;
}

.bbw-legal a:hover { border-color: var(--bbi-indigo); }

.bbw-legal hr {
  margin: 56px 0;
  border: 0;
  border-top: 1px solid var(--bbw-line);
  opacity: 1;
}

.bbw-legal-table {
  overflow-x: auto;
  border: 1px solid var(--bbw-line);
  border-radius: 16px;
}

@media (max-width: 639px) {
  .bbw-legal table { min-width: 620px; }
}

.bbw-legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.bbw-legal th {
  padding: 12px 16px;
  background: var(--bbw-bg-soft);
  border-bottom: 1px solid var(--bbw-line);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--bbw-ink);
  white-space: nowrap;
}

.bbw-legal td {
  padding: 12px 16px;
  border-top: 1px solid var(--bbw-line);
  vertical-align: top;
}

.bbw-legal tbody tr:first-child td { border-top: 0; }
.bbw-legal td:first-child { font-weight: 700; color: var(--bbw-ink); }

.bbw-legal__revised {
  margin-top: 48px !important;
  padding-top: 20px;
  border-top: 1px solid var(--bbw-line);
  font-size: 14px;
  color: var(--bbw-muted);
}

/* Video poster for providers without a public thumbnail (Wistia) */

/* Public pages: no app-grey canvas below the footer */
body:has(> .bbw) { background-color: #fff !important; }

/* ---------- Compact capability grid ---------- */

.bbw-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 20px;
}

.bbw-features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1080px; margin: 0 auto; gap: 12px 28px; }

.bbw-feature {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  transition: background-color 0.2s ease, transform 0.2s var(--bbi-ease);
}

a.bbw-feature:hover { background: #fff; box-shadow: var(--bbi-shadow-sm); transform: translateY(-2px); }
.bbw-feature .bbw-tile { width: 38px; height: 38px; border-radius: 11px; font-size: 15px; }
.bbw-feature__text b { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--bbw-ink); }
.bbw-feature__text span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--bbw-text); }

@media (max-width: 991px) {
  .bbw-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .bbw-features { grid-template-columns: 1fr; }
}

/* Large feature showcase rows: give the illustration more room */
.bbw-split--wide { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }

@media (max-width: 991px) {
  .bbw-split--wide { grid-template-columns: 1fr; }
}

.bbw-split__feature {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 800;
  color: var(--bbw-ink);
}

.bbw-split__feature .bbw-tile { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }

/* ---------- Feature tiles (still visual, plays on hover) ---------- */

.bbw-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.bbw-tile-card {
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--bbw-line);
  box-shadow: var(--bbi-shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s var(--bbi-ease);
}

.bbw-tile-card:hover { box-shadow: var(--bbi-shadow); transform: translateY(-3px); }
.bbw-tile-card__art { border-radius: 0; }
.bbw-tile-card__body { padding: 24px 28px 28px; }
.bbw-tile-card__body p { margin-top: 8px; font-size: 15px; line-height: 1.6; }
.bbw-tile-card__body .bbw-card__more { display: inline-block; margin-top: 14px; }

@media (max-width: 767px) {
  .bbw-tiles { grid-template-columns: 1fr; }
}

/* Category header used on the features page */
.bbw-cat {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.bbw-cat .bbw-h2 { font-size: clamp(28px, 2.8vw, 38px); }
.bbw-cat .bbw-lead { max-width: 560px; margin-top: 10px; font-size: 17px; }

@media (max-width: 767px) {
  .bbw-cat { flex-direction: column; align-items: flex-start; }
}

/* Reversed splits keep the illustration in the wide column */
.bbw-split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.bbw-split--wide.bbw-split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }

@media (max-width: 991px) {
  .bbw-split,
  .bbw-split--reverse,
  .bbw-split--wide,
  .bbw-split--wide.bbw-split--reverse { grid-template-columns: 1fr; }
}

/* ---------- Feature explorer (Features page) ----------
 * A calm list of features beside one large scene that follows the selection.
 */

.bbw [x-cloak] { display: none !important; }

.bbw-explorer {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}

.bbw-explorer--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.bbw-explorer--flip .bbw-explorer__list { order: 2; }
.bbw-explorer__list { display: flex; flex-direction: column; gap: 4px; }

.bbw-explorer__item {
  border: 1px solid transparent;
  border-radius: 18px;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.bbw-explorer__item.is-active {
  background: #fff;
  border-color: var(--bbw-line);
  box-shadow: var(--bbi-shadow-sm);
}

.bbw-explorer__tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
  color: var(--bbw-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.bbw-explorer__tab:hover,
.bbw-explorer__item.is-active .bbw-explorer__tab { color: var(--bbw-ink); }
.bbw-explorer__tab:focus-visible { outline: 2px solid var(--bbi-indigo); outline-offset: 2px; border-radius: 16px; }

.bbw-explorer__tab .bbw-tile {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 14px;
  box-shadow: none;
  filter: grayscale(1) opacity(0.4);
  transition: filter 0.25s ease;
}

.bbw-explorer__tab:hover .bbw-tile,
.bbw-explorer__item.is-active .bbw-tile { filter: none; }

.bbw-explorer__body { padding: 0 18px 18px 68px; }
.bbw-explorer__body p { font-size: 15px; line-height: 1.6; color: var(--bbw-text); }

.bbw-explorer__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--bbw-accent-text);
}

.bbw-explorer__more i { font-size: 12px; transition: transform 0.2s ease; }
.bbw-explorer__more:hover i { transform: translateX(3px); }

/* Scenes share one grid cell so they crossfade instead of stacking */
.bbw-explorer__stage { display: grid; }
.bbw-explorer__scene { grid-area: 1 / 1; min-width: 0; }
.bbw-fade-enter { transition: opacity 0.35s ease; }
.bbw-fade-leave { transition: opacity 0.2s ease; }
.bbw-fade-from { opacity: 0; }

.bbw-explorer__extras { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--bbw-line); }

.bbw-explorer__extras-label {
  margin-bottom: 12px;
  padding-left: 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bbw-muted);
}

@media (max-width: 991px) {
  .bbw-explorer,
  .bbw-explorer--flip { grid-template-columns: 1fr; gap: 24px; }
  .bbw-explorer__stage { order: -1; }
  .bbw-explorer--flip .bbw-explorer__list { order: 0; }
}

/* ---------- Product screenshots (real UI, demo data) ---------- */

.bbw-shot { margin: 0; }

.bbw-shot__frame {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--bbw-line);
  background: #fff;
  box-shadow: 0 30px 60px -30px rgba(30, 42, 74, 0.35), 0 12px 24px -16px rgba(30, 42, 74, 0.2);
}

.bbw-shot__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--bbw-line);
  background: #f6f8fc;
}

.bbw-shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: #dfe4ee; }
.bbw-shot__bar i:nth-child(1) { background: #ff8a8a; }
.bbw-shot__bar i:nth-child(2) { background: #ffcf6e; }
.bbw-shot__bar i:nth-child(3) { background: #7fdca3; }

.bbw-shot__bar span {
  margin: 0 auto;
  padding: 4px 14px;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: var(--bbw-muted);
  transform: translateX(-20px);
}

.bbw-shot img { display: block; width: 100%; height: auto; }

.bbw-shot figcaption {
  margin-top: 14px;
  font-size: 14px;
  text-align: center;
  color: var(--bbw-muted);
}

/* Tabbed screenshots */
.bbw-shots__tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}

.bbw-shots__tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--bbw-line);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  color: var(--bbw-muted);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bbw-shots__tabs button { white-space: nowrap; }
.bbw-shots__tabs button:hover { color: var(--bbw-ink); }
.bbw-shots__tabs button.is-active { background: var(--bbw-ink); border-color: var(--bbw-ink); color: #fff; }
.bbw-shots__stage { display: grid; }
.bbw-shots__stage > * { grid-area: 1 / 1; min-width: 0; }
.bbw-section--navy .bbw-shots__tabs button { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: #c9d1ea; }
.bbw-section--navy .bbw-shots__tabs button:hover { color: #fff; }
.bbw-section--navy .bbw-shots__tabs button.is-active { background: #fff; border-color: #fff; color: var(--bbw-ink); }

@media (max-width: 639px) {
  .bbw-shots__tabs { margin-bottom: 20px; }
  .bbw-shots__tabs button { height: 38px; gap: 6px; padding: 0 14px; font-size: 13px; }
}

@media (max-width: 400px) {
  .bbw-shots__tabs button i { display: none; }
}
.bbw-section--navy .bbw-shot__frame { border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); }
.bbw-section--navy .bbw-shot figcaption { color: #8f9bc2; }

/* ---------- Website modals: demo request and contact ---------- */

#demoModal .modal-content { border: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(20, 28, 54, 0.55); }
@media (min-width: 992px) { .bbw-modal-dialog { max-width: 720px; } }

.bbw-modal__main { padding: 28px 30px 24px; }

.bbw-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.bbw-modal__head > div { flex: 1; min-width: 0; }
.bbw-modal__head--bar { margin: 0; padding: 20px 24px; border-bottom: 1px solid var(--bbw-line); }

.bbw .bbw-modal__title { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--bbw-ink); }
.bbw .bbw-modal__lead { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--bbw-muted); }
.bbw .bbw-modal__lead a { color: var(--bbw-accent-text); font-weight: 700; }

.bbw-modal__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--bbw-bg-soft);
  color: var(--bbw-muted);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.bbw-modal__close:hover { background: #e6eaf4; color: var(--bbw-ink); }
.bbw-modal__form .bbw-form-alert { margin-bottom: 16px; }

.bbw-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--bbw-line);
}

.bbw-modal__foot--bar { margin: 0; padding: 14px 24px; }

/* Two-step progress (details, then pick a time) */
.bbw .bbw-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.bbw-stepper li {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bbw-muted);
}

.bbw-stepper li + li::before {
  content: '';
  order: -1;
  flex: 0 0 32px;
  height: 2px;
  border-radius: 2px;
  background: var(--bbw-line);
}

.bbw-stepper span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--bbw-bg-soft);
  border: 1.5px solid var(--bbw-line);
  font-size: 13px;
  font-weight: 800;
}

.bbw-stepper li.is-active { color: var(--bbw-ink); }
.bbw-stepper li.is-active span { border-color: transparent; background: var(--bbi-grad-brand); color: #fff; }
.bbw-stepper li.is-done span { border-color: transparent; background: var(--bbi-good); color: #fff; font-size: 11px; }
.bbw-stepper li.is-done + li::before { background: var(--bbi-good); }
.bbw .bbw-stepper--inline { margin: 10px 0 0; }
.bbw-stepper--inline li { flex: none; }

@media (max-width: 767px) {
  .bbw-modal__main { padding: 22px 18px 18px; }
  .bbw-modal__foot .bbw-btn { flex: 1; }
}

/* Phones: the whole demo form fits on one screen without scrolling. */
@media (max-width: 639px) {
  #demoModal .modal-dialog { margin: 8px; }
  .bbw-modal__main { padding: 18px 16px 16px; }
  .bbw-modal__head { margin-bottom: 14px; }
  .bbw .bbw-modal__title { font-size: 20px; }
  .bbw .bbw-modal__lead { font-size: 14px; }
  .bbw .bbw-modal__lead--wide { display: none; }
  .bbw-modal__close { width: 32px; height: 32px; font-size: 14px; }

  .bbw .bbw-stepper { margin-bottom: 16px; gap: 8px; }
  .bbw-stepper li { gap: 8px; font-size: 13px; }
  .bbw-stepper li + li::before { flex-basis: 20px; }
  .bbw-stepper span { width: 24px; height: 24px; font-size: 12px; }

  .bbw-modal .bbw-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .bbw-modal .bbw-field { grid-column: 1 / -1; gap: 6px; }
  .bbw-modal .bbw-field--pair { grid-column: auto; justify-content: flex-end; }
  .bbw-modal .bbw-label { font-size: 13px; }
  .bbw-modal .bbw-input,
  .bbw-modal .bbw-select { min-height: 44px; padding: 9px 12px; border-radius: 11px; }
  .bbw-modal .bbw-select { padding-right: 34px; background-position: right 12px center; }

  .bbw-modal__foot { margin-top: 16px; padding-top: 14px; }
  .bbw-modal__foot .bbw-btn { height: 46px; }
  .bbw-modal__cancel { display: none; }
}

/* ---------- Scene cards (two-sided workflows) ---------- */

.bbw-scene-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }

.bbw-scene-card {
  padding: 22px 22px 18px;
  border-radius: var(--bbw-radius-lg);
  background: #fff;
  border: 1px solid var(--bbw-line);
  box-shadow: var(--bbi-shadow-sm);
}

.bbw-scene-card__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }

.bbw-scene-card__step {
  flex: none;
  padding: 5px 11px;
  border-radius: 999px;
  background: #eef1fb;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bbw-accent-text);
  white-space: nowrap;
}

.bbw-scene-card__step--pink { background: #ffe8f1; color: #c4005a; }
.bbw .bbw-scene-card h3 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--bbw-ink); }
.bbw .bbw-scene-card p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--bbw-text); }

@media (max-width: 991px) {
  .bbw-scene-pair { grid-template-columns: 1fr; }
}

/* ---------- Cycle: two scene cards joined by arcing arrows ---------- */

.bbw-cycle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  padding: 56px 0;
}

.bbw-cycle__arc {
  position: absolute;
  left: 50%;
  z-index: 1;
  width: min(440px, 44%);
  height: auto;
  overflow: visible;
  transform: translateX(-50%);
  pointer-events: none;
}

.bbw-cycle__arc--top { top: 0; }
.bbw-cycle__arc--bottom { bottom: 0; }

/* Hand-drawn look: a tapered, slightly uneven brush stroke with a swept head */
.bbw-cycle__body { opacity: 0.42; }
.bbw-cycle__head { opacity: 0.7; }

/* A short glint of colour travels along each arrow in turn */
.bbw-cycle__glint {
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 16 84;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: bbw-cycle-glint 6s ease-in-out infinite;
}

.bbw-cycle__arc--bottom .bbw-cycle__glint { animation-delay: 3s; }

@keyframes bbw-cycle-glint {
  0% { stroke-dashoffset: 100; opacity: 0; }
  6% { opacity: 0.9; }
  40% { opacity: 0.9; }
  46% { stroke-dashoffset: -2; opacity: 0; }
  100% { stroke-dashoffset: -2; opacity: 0; }
}

.bbw-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 991px) {
  .bbw-cycle { grid-template-columns: 1fr; gap: 28px; padding: 0; }
  .bbw-cycle__arc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-reduced-motion="honor"] .bbw-cycle__glint { display: none; }
}

/* ---------- Callout band (e.g. SOC 2 on Security) ---------- */

.bbw-callout {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 16px 18px;
  border-radius: var(--bbw-radius-lg);
  background: #fff;
  border: 1px solid var(--bbw-line);
  box-shadow: var(--bbi-shadow-sm);
}

.bbw-callout__badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #2dce89, #1aae6f);
  color: #fff;
  font-size: 20px;
}

.bbw-callout > div { flex: 1; min-width: 0; }
.bbw-callout b { display: block; font-size: 17px; font-weight: 800; color: var(--bbw-ink); }
.bbw-callout > div span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--bbw-text); }

@media (max-width: 575px) {
  .bbw-callout { flex-wrap: wrap; }
  .bbw-callout .bbw-btn { width: 100%; }
}

/* ---------- Customer stories: brand band, figures, highlights, steps ----------
 * A story page sets --story-accent (fills) and --story-ink (text-safe shade) on .bbw-story-theme.
 */

.bbw { --story-accent: var(--bbi-indigo); --story-ink: var(--bbw-accent-text); }
.bbw-story-theme { display: contents; }

.bbw-brand {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  max-width: 980px;
  margin: 0 auto;
  padding: 30px 34px;
  overflow: hidden;
  border-radius: var(--bbw-radius-lg);
  background: linear-gradient(120deg, color-mix(in srgb, var(--story-accent) 9%, #fff), #fff 60%);
  border: 1px solid color-mix(in srgb, var(--story-accent) 22%, var(--bbw-line));
}

.bbw-brand::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--story-accent);
}

.bbw-brand__kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--story-ink);
}

.bbw .bbw-brand__logo { display: block; height: 34px; width: auto; max-width: 100%; margin: 12px 0 10px; }
.bbw-brand__wordmark { display: block; margin: 8px 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--bbw-ink); }
.bbw .bbw-brand p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--bbw-text); }
.bbw .bbw-brand__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }

.bbw-brand__facts li {
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--story-accent) 30%, var(--bbw-line));
  font-size: 13px;
  font-weight: 700;
  color: var(--bbw-ink);
}

.bbw .bbw-brand__art img { display: block; max-height: 220px; width: auto; max-width: 260px; }
.bbw .bbw-brand--cover .bbw-brand__art img { max-height: 230px; border-radius: 6px; transform: rotate(4deg); box-shadow: 0 24px 40px -18px rgba(20, 28, 54, 0.55); }
.bbw .bbw-brand--photo .bbw-brand__art img { max-height: 210px; }
.bbw .bbw-brand--product .bbw-brand__art img { max-height: 230px; max-width: 320px; filter: drop-shadow(0 20px 30px rgba(20, 28, 54, 0.18)); }

@media (max-width: 767px) {
  .bbw-brand { grid-template-columns: 1fr; padding: 24px 22px; }
  .bbw-brand__art { justify-self: center; }
  .bbw-brand__art img { max-height: 180px; }
}

/* Highlighted phrases in story prose */
.bbw-story mark,
.bbw-hl {
  padding: 0 0.15em;
  border-radius: 4px;
  background: linear-gradient(transparent 55%, color-mix(in srgb, var(--story-accent) 28%, transparent) 55%);
  color: inherit;
  font-weight: 700;
}

/* Numbered steps */
.bbw-story h3.bbw-story__step { display: flex; align-items: center; gap: 12px; }

.bbw-story__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--story-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

/* Figures */
.bbw .bbw-story__figure { margin: 36px 0; }

.bbw-story__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--bbw-line);
  box-shadow: var(--bbi-shadow-sm);
}

.bbw-story__figure figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--bbw-muted); }
.bbw-story__figure figcaption::before { content: ''; display: inline-block; width: 18px; height: 2px; margin: 0 8px 4px 0; vertical-align: middle; background: var(--story-accent); }

@media (min-width: 992px) {
  .bbw .bbw-story__figure--side { float: right; width: 44%; margin: 6px -14% 20px 36px; }
  .bbw-story h2, .bbw-story .bbw-eyebrow { clear: both; }
}

/* Pull number */
.bbw .bbw-story__pull {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 36px 0;
  padding: 20px 24px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--story-accent) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--story-accent) 22%, var(--bbw-line));
}

.bbw-story__pull b { flex: none; font-size: clamp(36px, 4vw, 48px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--story-ink); }
.bbw-story__pull span { font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--bbw-ink); }

/* Before / after bars */
.bbw .bbw-story__compare { margin: 32px 0; padding: 20px 24px; border-radius: 18px; background: #fff; border: 1px solid var(--bbw-line); }
.bbw-story__compare-label { margin-bottom: 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bbw-muted); }

.bbw-story__bar {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bbw-text);
}

.bbw-story__bar + .bbw-story__bar { margin-top: 10px; }
.bbw-story__bar i { display: block; height: 12px; border-radius: 8px; }
.bbw-story__bar--before i { background: #d5dbea; }
.bbw-story__bar--after i { background: var(--story-accent); }
.bbw-story__bar b { min-width: 72px; font-size: 16px; font-weight: 800; color: var(--bbw-ink); }
.bbw-story__bar--after b { color: var(--story-ink); }

@media (max-width: 575px) {
  .bbw-story__bar { grid-template-columns: 1fr auto; }
  .bbw-story__bar i { grid-column: 1 / -1; grid-row: 2; }
}