/* ==========================================================================
   Business Brain — project layer
   Loaded after the Webbloom base. Put BB-specific overrides here rather than
   editing webbloom-base.css / style-components.css, so the base stays shared.
   ========================================================================== */

/* Skip link — keyboard users shouldn't have to tab the whole nav on every page. */
.wb-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75em 1.25em;
  background: var(--wb-dark);
  color: #fff;
  text-decoration: none;
  border-radius: 0 0 var(--wb-radius-md) 0;
}
.wb-skip-link:focus {
  left: 0;
  outline: 3px solid var(--wb-secondary);
  outline-offset: 2px;
}

/* Inline SVG icons (replacing the Font Awesome icon font). Sized to the text
   they sit beside and aligned to the baseline rather than the box. */
.wb-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: none;
}
.wb-icon-sm { width: 0.875em; height: 0.875em; }
.wb-icon-lg { width: 1.5em;   height: 1.5em; }

/* Buttons and links that carry a trailing arrow. */
.wb-btn .wb-icon,
.blog-card-link .wb-icon { margin-left: 0.4em; }

/* ── "Sound familiar?" scenarios ──────────────────────────────────────────
   A readable grid, not the auto-rotating carousel from .co.im. These lines are
   the strongest copy on the site; a rotator hides most of them from the reader
   and from search engines. Styled as overheard remarks rather than feature cards. */
.bb-scenario {
  background: var(--wb-white);
  border-left: 3px solid var(--wb-primary);
  border-radius: 0 var(--wb-radius-md) var(--wb-radius-md) 0;
  padding: 1.5em 1.6em;
  text-align: left;
  height: 100%;
  box-shadow: 0 1px 3px rgba(26, 26, 46, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bb-scenario:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(26, 26, 46, 0.09);
}
.bb-scenario p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--wb-dark);
}
/* Opening quote mark, set outside the measure so the text stays flush. */
.bb-scenario p::before {
  content: "“";
  display: block;
  font-size: 2.2rem;
  line-height: 0.6;
  margin-bottom: 0.35em;
  color: var(--wb-primary);
}

/* Section headings sit tighter to their standfirst than the base allows. */
.wb-section h2 + .wb-lead,
.wb-section h2 + .wb-subtitle { margin-top: 0.45em; }

/* ── Lists in body copy ────────────────────────────────────────────────────
   webbloom-base.css resets padding to 0 on every element but leaves
   `list-style: disc`, so markers render OUTSIDE the content box and lists sit
   flush against the paragraph beneath them. Scoped to content areas; nav and
   footer lists set `list-style: none` and live outside .wb-section, so they
   are untouched. */
.wb-section ul,
.wb-section ol,
.blog-post-content ul,
.blog-post-content ol {
  padding-left: 1.4em;
  margin-bottom: 1.5em;
}
.wb-section li,
.blog-post-content li { margin-bottom: 0.45em; line-height: 1.65; }
.wb-section li::marker,
.blog-post-content li::marker { color: var(--wb-primary); }

/* Card and grid children opt out — they aren't prose. */
.wb-card ul, .bb-step ul, .bb-trust-item ul, .bb-scenario ul {
  padding-left: 1.2em;
  margin-bottom: 0;
}

/* ── Measure ───────────────────────────────────────────────────────────────
   The base container is 1100px, which at 16px runs body copy to ~138 characters
   per line — roughly double a comfortable measure. The copy is the product on
   this site, so it gets constrained. Applies only to direct children of the
   container, leaving grids, cards and feature rows full width. */
.wb-section > .wb-inner > p,
.wb-section > .wb-inner > ul,
.wb-section > .wb-inner > ol,
.wb-section > .wb-narrow > p { max-width: 66ch; }

.wb-section.wb-text-center > .wb-inner > p,
.wb-section.wb-text-center > .wb-inner > ul,
.wb-section.wb-text-center > .wb-inner > ol { margin-inline: auto; }

/* Headings: let the browser even out the line lengths rather than us guessing a
   max-width per headline. Stops orphans like "…someone near / you" without
   hard-capping the width. Falls back harmlessly where unsupported. */
h1, h2, h3,
.wb-h1, .wb-h2, .wb-h3,
.cta-title { text-wrap: balance; }

/* Standfirsts and short centred paragraphs read better balanced too. */
.wb-lead, .wb-subtitle { text-wrap: pretty; }

.wb-section.wb-text-center > .wb-inner > h2 { max-width: 26ch; margin-inline: auto; }

/* ── Prose sections ────────────────────────────────────────────────────────
   `{{< section class="bb-prose" >}}`. Constraining the measure alone leaves the
   text hugging the left of a 1100px container with a dead right half. Instead
   narrow the whole column and centre it, so heading and body share one edge and
   the block reads as a considered piece of text rather than a truncated one. */
.bb-prose > .wb-inner { max-width: 760px; }
.bb-prose > .wb-inner > p { max-width: none; }
.bb-prose > .wb-inner > h2 { max-width: none; }
.bb-prose > .wb-inner > .wb-lead { color: var(--wb-text-light); }

/* ── Dark header ───────────────────────────────────────────────────────────
   The logo reads better on navy than on white (Brad, 2026-07-31), so the header
   matches the footer. header.css sets a white background and dark text; every
   override lives here so the shared base stays untouched. */
.wb-header {
  background: var(--wb-dark);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}
.wb-header-brand { color: var(--wb-white); }
.wb-header-nav a { color: #c3cad9; white-space: nowrap; }
.wb-header-nav a:hover,
.wb-header-nav a.active { color: var(--wb-primary); }
.wb-menu-toggle { color: #c3cad9; }
.wb-menu-toggle:hover { color: var(--wb-white); }

/* Mobile drop-down panel is white in the base; match the bar. */
/* Six items plus the button wrap below ~920px, so the mobile menu takes over there
   rather than at the theme's 767 (New business joined the menu, Brad 2026-09-09).
   Structural rules mirror header.css so this block stands on its own. */
@media (max-width: 919px) {
  .wb-menu-toggle { display: block; }
  .wb-header-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 1em; }
  .wb-header-nav.open { display: block; }
  .wb-header-nav ul { flex-direction: column; gap: 0; text-align: center; }
  .wb-header-nav ul li { padding: 0.75em 0; }
  .wb-header-nav {
    background: var(--wb-dark);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .wb-header-nav ul li + li { border-top: 1px solid rgba(255, 255, 255, 0.06); }
  /* The CTA is a button, not a row — give it breathing room in the stack. */
  .wb-header-nav .wb-header-cta { margin: 0.9em 0 0.3em; margin-left: 0; }
  .wb-header-nav .wb-header-cta a { display: inline-block; }
}

/* ── Header CTA ────────────────────────────────────────────────────────────
   `.wb-header-nav a` (0,1,1) beats `.wb-btn` (0,1,0), so the button's own colour
   loses without this. Scoped to the CTA item rather than weakening the nav rule. */
/* The nav list had no vertical alignment, so the text links sat at the top of the
   row set by the taller button (Brad, 2026-09-11). Button ~10% smaller. */
.wb-header-nav ul { align-items: center; }
.wb-header-nav .wb-header-cta a,
.wb-header-nav .wb-header-cta a:hover {
  color: var(--wb-button-text, #1A1A2E);
  background: var(--wb-primary);
  font-size: 0.82rem;
  padding: 0.5em 1.05em;
  border-radius: var(--wb-radius-sm);
  font-weight: 600;
}
.wb-header-nav .wb-header-cta a:hover { background: var(--wb-primary-hover); }
.wb-header-nav .wb-header-cta { margin-left: 0.9em; }

/* ── Feature rows ──────────────────────────────────────────────────────────
   Alternating image/text. The homepage was previously all centred text blocks,
   which read as an essay rather than a landing page. */
.bb-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.bb-feature + .bb-feature { margin-top: 5.5rem; }
.bb-feature-flip .bb-feature-media { order: 2; }

.bb-feature-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--wb-radius-lg);
  box-shadow: 0 18px 45px rgba(26, 26, 46, 0.18);
}
.bb-feature-text > p { max-width: 52ch; }
.bb-feature-text > p:last-child { margin-bottom: 0; }
.bb-feature-title { margin: 0 0 0.6em; font-size: clamp(1.5rem, 2.6vw, 2rem); }

.bb-eyebrow {
  display: inline-block;
  margin-bottom: 0.85em;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--wb-primary) 78%, black);
}
.wb-dark .bb-eyebrow { color: var(--wb-accent); }

@media (max-width: 860px) {
  .bb-feature { grid-template-columns: 1fr; gap: 2rem; }
  /* Image always leads on mobile, whatever the desktop order. */
  .bb-feature-flip .bb-feature-media { order: 0; }
  .bb-feature + .bb-feature { margin-top: 3.5rem; }
}

/* ── Trust row ─────────────────────────────────────────────────────────────*/
.bb-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  margin-top: 2.5rem;
  text-align: left;
}
.bb-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.9rem;
  border-radius: var(--wb-radius-md);
  background: color-mix(in srgb, var(--wb-accent) 16%, transparent);
  color: var(--wb-accent);
}
.bb-trust-icon .wb-icon { width: 1.35rem; height: 1.35rem; }
.bb-trust-title { margin: 0 0 0.4em; font-size: 1.05rem; }
.bb-trust-body p { margin: 0; font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 900px) { .bb-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (max-width: 520px) { .bb-trust-grid { grid-template-columns: 1fr; } }

/* ── Before / after the Ability ────────────────────────────────────────────
   The switch is the pivot of the whole product, so it gets a two-column contrast
   rather than a paragraph. */
.bb-ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 820px;
  margin: 2.5rem auto 0;
  text-align: left;
}
.bb-ba-col {
  padding: 1.9rem;
  border-radius: var(--wb-radius-lg);
  background: var(--wb-white);
  border: 1px solid rgba(26, 26, 46, 0.08);
}
.bb-ba-col h3 {
  margin: 0 0 1em;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wb-text-light);
}
.bb-ba-col ul { margin: 0; padding-left: 1.2em; }
.bb-ba-col li { margin-bottom: 0.55em; }
.bb-ba-col li:last-child { margin-bottom: 0; }

/* The "after" side is the one being sold — give it the brand weight. */
.bb-ba-after {
  background: var(--wb-dark);
  border-color: transparent;
}
.bb-ba-after h3 { color: var(--wb-accent); }
.bb-ba-after li { color: #dfe4ee; }
.bb-ba-after li::marker { color: var(--wb-primary); }
.bb-ba-after li strong { color: var(--wb-primary); font-weight: 600; }
.bb-ba-note {
  margin: 1.6rem auto 0;
  max-width: 52ch;
  text-align: center;
  font-size: 0.95rem;
  color: var(--wb-text-light);
}
.bb-beforeafter > .wb-inner > h2 strong { color: #00ADEE; font-weight: inherit; }
.bb-beforeafter > .wb-inner > .wb-lead { max-width: 54ch; margin-inline: auto; }

@media (max-width: 700px) { .bb-ba-grid { grid-template-columns: 1fr; } }

/* Six-up tool grid reuses the trust-item card; just needs a third column. */
@media (min-width: 901px) { .bb-tools { grid-template-columns: repeat(3, 1fr); } }
.bb-tools-note {
  max-width: 62ch;
  margin: 2.2rem auto 0;
  font-size: 0.92rem;
  color: var(--wb-text-light);
}

/* ── Numbered steps ────────────────────────────────────────────────────────
   Used for "what actually happens" sequences. The number is decorative — the
   heading carries the meaning, so it's aria-hidden in the markup. */
.bb-step {
  background: var(--wb-white);
  border-radius: var(--wb-radius-md);
  padding: 2em 1.8em;
  text-align: left;
  height: 100%;
  box-shadow: 0 1px 3px rgba(26, 26, 46, 0.06);
}
.bb-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  margin-bottom: 0.9em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wb-primary) 16%, transparent);
  color: color-mix(in srgb, var(--wb-primary) 72%, black);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}
.bb-step-title { margin: 0 0 0.5em; font-size: 1.15rem; }
.bb-step-body p { margin: 0; color: var(--wb-text-light); line-height: 1.6; }
.bb-step-body p + p { margin-top: 0.7em; }

.wb-dark .bb-step { background: var(--wb-primary-light, #1E2545); }
.wb-dark .bb-step-body p { color: #b8c0d0; }

/* ── Forms ─────────────────────────────────────────────────────────────────
   Constrained to a readable column and centred, so the form doesn't sprawl
   across a 1100px container. */
.bb-form-wrap {
  max-width: 620px;
  margin-inline: auto;
}
.bb-form-wrap > h2 { text-align: left; }
.bb-form { margin-top: 1.5em; }
.bb-field-help {
  margin: 0.45em 0 0;
  font-size: 0.875rem;
  color: var(--wb-text-light);
  line-height: 1.5;
}
.bb-optional {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--wb-text-muted);
  margin-left: 0.4em;
}
.bb-form select {
  width: 100%;
  padding: 0.75em;
  border: 1px solid #d5d9e0;
  border-radius: var(--wb-radius-sm);
  background: var(--wb-white);
  font-family: inherit;
  font-size: 1rem;
}
.bb-form button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Submission error, shown when the handler redirects back with ?error=… */
.bb-form-error {
  margin-bottom: 1.5em;
  padding: 0.95em 1.15em;
  border-left: 3px solid #b91c1c;
  background: #fef2f2;
  color: #7f1d1d;
  font-size: 0.95rem;
  line-height: 1.55;
  border-radius: 0 var(--wb-radius-sm) var(--wb-radius-sm) 0;
}

/* Build-time notice — visible on purpose, so an unwired form can't be mistaken
   for a working one during review. Remove when form_action is set. */
.bb-form-notice {
  margin-top: 1em;
  padding: 0.9em 1.1em;
  border-left: 3px solid #d97706;
  background: #fffbeb;
  color: #78350f;
  font-size: 0.875rem;
  line-height: 1.55;
  border-radius: 0 var(--wb-radius-sm) var(--wb-radius-sm) 0;
}
.bb-form-notice code {
  background: rgba(120, 53, 15, 0.1);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  /* Long identifiers must not push past a narrow viewport. */
  overflow-wrap: anywhere;
}

/* Blog card headings moved h3 → h2 for a correct outline; header.css styles
   `.blog-card h3`, so the size and link colour are restored here. */
.blog-card .blog-card-title {
  margin: 0.3em 0;
  font-size: 1.2rem;
  line-height: 1.35;
}
.blog-card .blog-card-title a { color: var(--wb-text); text-decoration: none; }
.blog-card .blog-card-title a:hover { color: var(--wb-primary); }

/* ── Cost calculator ───────────────────────────────────────────────────────*/
.bb-calc, .bb-calc-results { max-width: 720px; margin-inline: auto; }
.bb-calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 620px) { .bb-calc-fields { grid-template-columns: 1fr; } }

.bb-calc-field { margin-bottom: 1.5rem; }
.bb-calc-field label {
  display: block;
  margin-bottom: 0.45em;
  font-weight: 600;
  font-size: 0.95rem;
}
.bb-calc-field input[type="number"] {
  width: 100%;
  padding: 0.7em 0.85em;
  border: 1px solid #d5d9e0;
  border-radius: var(--wb-radius-sm);
  font: inherit;
  background: var(--wb-white);
}
.bb-calc-field input[type="range"] { width: 100%; accent-color: var(--wb-primary); }
.bb-calc-slider output {
  float: right;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--wb-primary) 75%, black);
}
.bb-calc-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--wb-text-muted);
  margin-top: 0.3em;
}
.bb-calc-scale small { opacity: 0.8; }

.bb-calc-results {
  margin-top: 2rem;
  padding: 2rem;
  background: var(--wb-dark);
  color: #fff;
  border-radius: var(--wb-radius-lg);
}
.bb-calc-headline { text-align: center; margin-bottom: 1.6rem; }
.bb-calc-label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8f9bb3;
  margin-bottom: 0.4em;
}
.bb-calc-big {
  display: block;
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--wb-primary);
  font-variant-numeric: tabular-nums;
}
.bb-calc-detail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin: 0 0 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}
@media (max-width: 560px) { .bb-calc-detail { grid-template-columns: 1fr; gap: 0.9rem; } }
.bb-calc-detail dt {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8f9bb3;
  margin-bottom: 0.25em;
}
.bb-calc-detail dd {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bb-calc-note {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.6;
  color: #9aa5bb;
}

/* Honest proportion bar — 5% is drawn as 5%, no zoomed axis. */
.bb-calc-bar { margin: 0 0 1.4rem; }
.bb-calc-bar-track {
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.bb-calc-bar-fill {
  height: 100%;
  min-width: 3px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--wb-primary), var(--wb-accent));
  transition: width 0.35s ease;
}
.bb-calc-bar-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 0.45em;
  font-size: 0.78rem;
  color: #8f9bb3;
}

/* ── Scroll reveal as progressive enhancement ─────────────────────────────
   style-components.css sets opacity:0 on these unconditionally and relies on JS
   to reveal them, with a 4-second timeout as the only safety net. That means
   no-JS visitors never see the copy, and slow-JS visitors stare at blank blocks.
   (The kit's `.no-js` rule only covers .wb-gsap-target, and nothing ever sets
   that class — it's dead code.)

   So: visible by default, and only armed when JS is confirmed present via
   html.js, which head.html sets before first paint. */
.wb-fade-in,
.wb-slide-up,
.wb-slide-left,
.wb-slide-right,
.wb-zoom-in,
.wb-gsap-target { opacity: 1; transform: none; }

.js .wb-fade-in:not(.wb-visible),
.js .wb-zoom-in:not(.wb-visible)    { opacity: 0; }
.js .wb-slide-up:not(.wb-visible)   { opacity: 0; transform: translateY(30px); }
.js .wb-slide-left:not(.wb-visible) { opacity: 0; transform: translateX(-30px); }
.js .wb-slide-right:not(.wb-visible){ opacity: 0; transform: translateX(30px); }

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN REFRESH — 2026-07-31
   A polish layer over the Webbloom base: type scale, depth, light. The base
   stays untouched; everything here wins by loading later.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Type scale ──────────────────────────────────────────────────────────── */
.wb-section h2,
.wb-section .wb-h2 {
  font-size: clamp(1.75rem, 3.1vw, 2.5rem);
  letter-spacing: -0.018em;
  line-height: 1.12;
}
.wb-lead { font-size: clamp(1.08rem, 1.5vw, 1.25rem); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.wb-hero {
  position: relative;
  overflow: hidden;
}
/* Light and depth over the flat photo: a brand-blue bloom top-right, and a
   gentle darkening toward the base so the type always sits on solid ground. */
.wb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* vignette behind the centred text, so per-page hero art never fights the
       headline — the image reads as ambience, the type always sits on ground */
    radial-gradient(52% 62% at 50% 52%, rgba(14, 15, 28, 0.62), transparent 72%),
    radial-gradient(55% 75% at 72% 18%, rgba(0, 173, 238, 0.16), transparent 65%),
    radial-gradient(40% 55% at 15% 85%, rgba(78, 205, 196, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(26, 26, 46, 0.10) 0%, rgba(16, 17, 32, 0.55) 100%);
  pointer-events: none;
}
.wb-hero .wb-inner { position: relative; z-index: 1; }
.wb-hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.1rem);
  letter-spacing: -0.028em;
  line-height: 1.06;
  max-width: 19ch;
  margin-inline: auto;
}
/* The bright accent blue shouted; a soft slate reads calmer and keeps the
   accent for things that are actually interactive. 7.2:1 on navy. */
.wb-hero .wb-subtitle {
  color: #aab6cc;
  font-size: clamp(1.05rem, 1.65vw, 1.3rem);
  max-width: 54ch;
  margin-inline: auto;
  line-height: 1.6;
}

/* ── Question-sequence hero ────────────────────────────────────────────────
   One beat at a time in large type. Without JS (or with reduced motion, where
   bb-motion exits) only the resolution beat shows — the complete message with
   its CTA — so the story is enhancement, never a gate. */
.bb-hseq-hero {
  min-height: 82vh;
  display: flex;
  align-items: center;
  padding: 6em 1.5em 4.5em;
}
.bb-hseq { position: relative; z-index: 1; width: 100%; }
.bb-hseq-stage { position: relative; min-height: 11em; }

.bb-beat { display: none; text-align: center; }
.bb-beat-final { display: block; }              /* no-JS / reduced-motion default */
.js .bb-hseq.bb-hseq-live .bb-beat { display: none; }
.js .bb-hseq.bb-hseq-live .bb-beat.is-active { display: block; }

.bb-beat-text {
  margin: 0 auto;
  max-width: 22ch;
  font-size: clamp(2rem, 4.8vw, 3.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--wb-white);
  text-wrap: balance;
}
/* The turn is a statement of fact, so it speaks in the trust colour. */
.bb-beat-turn .bb-beat-text { color: #00ADEE; }
/* Chosen words carry the logo blue — colour only, no weight change. */
.bb-beat-text .bb-em,
.bb-beat-text strong { color: #00ADEE; font-weight: inherit; }
.bb-beat-sub {
  margin: 1.1em auto 0;
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: #aab6cc;
  text-wrap: pretty;
}
.bb-beat-cta { margin-top: 2rem; }

/* Word-stagger targets (wrapped by bb-motion.js) */
.bb-beat .bb-w { display: inline-block; }

.bb-hseq-controls {
  margin-top: 3rem;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.js .bb-hseq-live .bb-hseq-controls { display: flex; }
.bb-hseq-ticks { display: flex; gap: 0.5rem; }
.bb-tick {
  width: 20px;
  height: 5px;
  border: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, width 0.3s ease;
}
.bb-tick.is-active { background: var(--wb-primary); width: 34px; }
.bb-tick.is-done { background: rgba(78, 205, 196, 0.45); }
.bb-hseq-skip {
  border: 0;
  background: none;
  color: #7e8aa5;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.25s ease;
}
.bb-hseq-skip:hover { color: var(--wb-white); }
.bb-hseq-live.bb-hseq-ended .bb-hseq-skip { visibility: hidden; }

/* ── Ability switch hero ───────────────────────────────────────────────────
   The Ability page's concept performed in the hero: it opens in the Brain
   state, then the switch flips and the headline resolves to Ability. The
   switch is a real button so visitors can flip it themselves. The ON state is
   the markup/CSS default — no-JS and reduced-motion get the full message. */
.bb-asw-hero {
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 6.5em 1.5em 4.5em;
  background: radial-gradient(90% 130% at 50% -10%, #212a4e 0%, var(--wb-dark) 62%);
  text-align: center;
}
.bb-asw-stage { display: grid; }
.bb-asw-state {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.bb-asw-hero:not(.is-on) .bb-asw-state-off,
.bb-asw-hero.is-on .bb-asw-state-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.bb-asw-title {
  margin: 0 auto;
  max-width: 24ch;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--wb-white);
  text-wrap: balance;
}
.bb-asw-title strong { color: #00ADEE; font-weight: inherit; }
.bb-asw-sub {
  margin: 1.1em auto 0;
  max-width: 54ch;
  font-size: clamp(1.02rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: #aab6cc;
  text-wrap: pretty;
}

.bb-asw-switch {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2.6rem;
  padding: 0.4rem 0.8rem;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
}
.bb-asw-switch:focus-visible { outline: 3px solid var(--wb-primary); outline-offset: 4px; }
.bb-asw-word {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4b5677;
  transition: color 0.4s ease;
}
.bb-asw-hero:not(.is-on) .bb-asw-word-off { color: #00ADEE; }
.bb-asw-hero.is-on .bb-asw-word-on { color: var(--wb-primary); }
.bb-asw-track {
  position: relative;
  display: inline-block;
  width: 116px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}
.bb-asw-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #3a4565;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.45s ease, box-shadow 0.45s ease;
}
.bb-asw-hero.is-on .bb-asw-track {
  background: rgba(78, 205, 196, 0.16);
  border-color: var(--wb-primary);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 46px rgba(78, 205, 196, 0.3);
}
.bb-asw-hero.is-on .bb-asw-knob {
  transform: translateX(62px);
  background: var(--wb-primary);
  box-shadow: 0 0 20px rgba(78, 205, 196, 0.55);
}

.bb-asw-cta {
  margin-top: 2.2rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}
.bb-asw-hero.is-on .bb-asw-cta { opacity: 1; transform: none; }

@media (max-width: 600px) {
  .bb-asw-hero { min-height: 70vh; }
  .bb-asw-track { width: 96px; height: 48px; }
  .bb-asw-knob { width: 38px; height: 38px; }
  .bb-asw-hero.is-on .bb-asw-knob { transform: translateX(46px); }
}

/* ── Rotating-word hero ────────────────────────────────────────────────────
   A fixed statement whose final word cycles, then rests on the landing word.
   The landing word is the CSS/markup default — no-JS and reduced-motion read
   the complete final sentence. bb-motion.js drives the cycle and animates the
   word's width so the centred line re-centres smoothly at each swap. */
.bb-rot-hero {
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 6.5em 1.5em 4.5em;
  background: var(--wb-dark) url('/images/hero-ability-power.jpg') center 65% / cover no-repeat;
  text-align: center;
}
.bb-rot-hero .bb-rot-title {
  margin: 0 auto;
  max-width: none;
  font-size: clamp(1.5rem, 4.2vw, 3.3rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--wb-white);
}
.bb-rot-line { display: block; }
.bb-rot-word { color: #00ADEE; display: inline-block; white-space: nowrap; }
.bb-rot-sub {
  margin: 1.2em auto 0;
  max-width: 56ch;
  font-size: clamp(1.02rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: #aab6cc;
  text-wrap: pretty;
}
.bb-rot-cta { margin-top: 2.4rem; }
/* Large screens: the statement reads best as two lines — the opener on its own,
   then the whole rotating sentence on one. Sized so the longest cycle word
   never wraps it. */
@media (min-width: 1100px) {
  .bb-rot-hero .bb-rot-title { font-size: clamp(2.7rem, 3.6vw, 3.4rem); }
  .bb-rot-hero .bb-rot-line { display: inline; }
  .bb-rot-hero .bb-rot-line:first-child { display: block; margin-bottom: 0.25em; }
}
@media (max-width: 480px) {
  /* The longest cycle word must never wrap the rotating line mid-swap. */
  .bb-rot-hero .bb-rot-title { font-size: 1.42rem; }
}

/* Anchor targets clear the sticky header. */
[id] { scroll-margin-top: 90px; }

/* ── The Big Six ───────────────────────────────────────────────────────────
   Six oversized strengths. The type IS the visual: big statements with the
   hero's blue-keyword system, quiet support lines, a hairline that warms on
   hover. No icons, no cards — conviction in large print. */
/* Statement heading: wider than the default centred cap, blue keywords like
   the hero, and a lead that holds the sovereignty clause. */
.bb-six > .wb-inner > h2 { max-width: 32ch; }
.bb-six > .wb-inner > h2 strong,
.bb-six > .wb-inner > .wb-lead strong { color: #00ADEE; font-weight: inherit; }
.bb-six > .wb-inner > .wb-lead { max-width: 58ch; margin-inline: auto; }

.bb-six-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.2rem 3rem;
  margin-top: 3rem;
  text-align: left;
}
@media (max-width: 980px) { /* Statement heading: wider than the default centred cap, blue keywords like
   the hero, and a lead that holds the sovereignty clause. */
.bb-six > .wb-inner > h2 { max-width: 32ch; }
.bb-six > .wb-inner > h2 strong,
.bb-six > .wb-inner > .wb-lead strong { color: #00ADEE; font-weight: inherit; }
.bb-six > .wb-inner > .wb-lead { max-width: 52ch; margin-inline: auto; }

.bb-six-grid { grid-template-columns: 1fr 1fr; gap: 2.6rem 2.2rem; } }
@media (max-width: 600px) { /* Statement heading: wider than the default centred cap, blue keywords like
   the hero, and a lead that holds the sovereignty clause. */
.bb-six > .wb-inner > h2 { max-width: 32ch; }
.bb-six > .wb-inner > h2 strong,
.bb-six > .wb-inner > .wb-lead strong { color: #00ADEE; font-weight: inherit; }
.bb-six > .wb-inner > .wb-lead { max-width: 52ch; margin-inline: auto; }

.bb-six-grid { grid-template-columns: 1fr; gap: 2.2rem; } }

.bb-six-item {
  padding-top: 1.4rem;
  border-top: 2px solid rgba(26, 26, 46, 0.10);
  transition: border-color 0.3s ease;
}
.bb-six-item:hover { border-top-color: var(--wb-primary); }
.bb-six-title {
  margin: 0 0 0.55em;
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--wb-dark);
  text-wrap: balance;
}
.bb-six-title strong { color: #00ADEE; font-weight: inherit; }
.bb-six-line {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--wb-text-light);
  max-width: 34ch;
}

/* ── Scenario slider ───────────────────────────────────────────────────────
   One overheard moment at a time. Without JS (or reduced motion) the same
   markup falls back to the three-column grid. Controller in bb-motion.js. */
.bb-sslider { margin-top: 2.5rem; }
.js .bb-sslider.bb-sslider-live {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  min-height: 9.5em;
}
.js .bb-sslider-live .bb-scenario { display: none; }
.js .bb-sslider-live .bb-scenario.is-active { display: block; }
.js .bb-sslider-live .bb-scenario {
  background: transparent;
  border-left: 0;
  box-shadow: none;
  text-align: center;
}
.js .bb-sslider-live .bb-scenario:hover { transform: none; box-shadow: none; }
.js .bb-sslider-live .bb-scenario p {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  color: var(--wb-dark);
  font-weight: 500;
}
.js .bb-sslider-live .bb-scenario p::before {
  display: block;
  margin: 0 auto 0.4em;
  font-size: 3rem;
}
/* Grid fallback when JS is absent */
.bb-sslider {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 860px) { .bb-sslider { grid-template-columns: 1fr; } }
.js .bb-sslider-live { display: block; }

.bb-sslider-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
}
.bb-sslider-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(26, 26, 46, 0.18);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.bb-sslider-dots button.is-active { background: var(--wb-primary); transform: scale(1.25); }

/* ── The Brain: onboarding showcase ────────────────────────────────────────
   A capture board building itself while the steps light up. Board content is
   drawn from the product's real capture screen. Final state is the CSS default;
   bb-motion.js rewinds and plays it when the section enters. */
.bb-onb .bb-eyebrow,
.bb-abl .bb-eyebrow { display: block; text-align: center; }
.bb-onb-title {
  text-align: center;
  max-width: 22ch;
  margin: 0 auto 0.4em;
}
.bb-onb-title strong { color: #00ADEE; font-weight: inherit; }
.bb-onb-lead {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto;
  color: #aab6cc;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
}
.bb-onb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-top: 3.4rem;
}
@media (max-width: 900px) { .bb-onb-grid { grid-template-columns: 1fr; gap: 2.6rem; } }

/* Steps — genuinely a sequence, so the numbers earn their place. */
.bb-onb-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.bb-onb-step {
  position: relative;
  padding-left: 3.4rem;
  opacity: 0.38;
  transition: opacity 0.45s ease;
}
.bb-onb-step.is-on { opacity: 1; }
.bb-onb-num {
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--wb-primary);
  border: 1px solid rgba(78, 205, 196, 0.35);
  border-radius: 999px;
  padding: 0.28em 0.6em;
  transition: background 0.45s ease, color 0.45s ease;
}
.bb-onb-step.is-on .bb-onb-num { background: var(--wb-primary); color: var(--wb-dark); }
.bb-onb-step h3 {
  margin: 0 0 0.3em;
  font-size: 1.15rem;
  color: var(--wb-white);
}
.bb-onb-step p { margin: 0; color: #9fabc4; line-height: 1.6; font-size: 0.97rem; }

/* The board */
.bb-onb-board {
  background: linear-gradient(160deg, #202a4d 0%, #1B2240 60%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--wb-radius-lg);
  padding: 1.6rem 1.7rem 1.4rem;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(0, 173, 238, 0.08);
}
.bb-onb-board-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.3rem;
}
.bb-onb-board-title { color: var(--wb-white); font-weight: 600; font-size: 0.95rem; }
.bb-onb-board-status {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-primary);
}
.bb-onb-cursor {
  display: inline-block;
  width: 7px;
  height: 0.9em;
  margin-left: 0.3em;
  background: var(--wb-primary);
  vertical-align: -0.1em;
  animation: bb-blink 1.1s steps(1) infinite;
}
@keyframes bb-blink { 50% { opacity: 0; } }

.bb-onb-row { padding: 0.85rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.bb-onb-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.bb-onb-area { color: #e8ecf5; font-weight: 600; font-size: 0.95rem; }
.bb-onb-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.22em 0.6em;
  border-radius: 999px;
  flex: none;
}
.bb-tag-critical { background: rgba(248, 113, 113, 0.16); color: #F8A8A8; }
.bb-tag-high     { background: rgba(251, 191, 36, 0.14);  color: #FCD34D; }
.bb-tag-medium   { background: rgba(148, 163, 184, 0.14); color: #B7C2D4; }
.bb-onb-row-meta {
  display: flex;
  justify-content: space-between;
  margin: 0.45rem 0 0.4rem;
  font-size: 0.8rem;
  color: #8f9bb3;
}
.bb-onb-pct { font-variant-numeric: tabular-nums; color: #aab6cc; }
.bb-onb-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.bb-onb-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--wb-primary), #00ADEE);
}
.bb-onb-board-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.2rem;
}
.bb-onb-import {
  font-size: 0.75rem;
  color: #9fabc4;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.3em 0.75em;
}

.bb-onb-payoff {
  margin: 3.2rem auto 0;
  max-width: 30ch;
  text-align: center;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--wb-white);
  text-wrap: balance;
}
.bb-onb-payoff strong { color: #00ADEE; font-weight: inherit; }
.bb-onb-more { text-align: center; margin: 1.2rem 0 0; }
.bb-onb-more a { color: var(--wb-primary); text-decoration: none; font-weight: 600; }
.bb-onb-more a:hover { color: var(--wb-white); }

/* ── The Ability: live work feed ───────────────────────────────────────────
   Mirror of the Brain showcase: switch flips, work flows out, capabilities
   light as their items land. Final state is the CSS default. */
.bb-abl-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-top: 3.4rem;
}
@media (max-width: 900px) { .bb-abl-grid { grid-template-columns: 1fr; gap: 2.6rem; } }

.bb-abl-board {
  background: linear-gradient(200deg, #202a4d 0%, #1B2240 60%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--wb-radius-lg);
  padding: 1.6rem 1.7rem 1.2rem;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(78, 205, 196, 0.08);
}
.bb-abl-board-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.1rem;
}

/* The switch — the product's whole idea, so it gets to be a real control
   visually (though decorative here: tabindex -1, animated by the timeline). */
.bb-abl-switch {
  width: 52px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.10);
  position: relative;
  padding: 0;
  cursor: default;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.bb-abl-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #8f9bb3;
  transition: transform 0.35s ease, background 0.35s ease;
}
.bb-abl-switch.is-on { background: rgba(78, 205, 196, 0.25); border-color: var(--wb-primary); }
.bb-abl-switch.is-on .bb-abl-knob { transform: translateX(24px); background: var(--wb-primary); }

.bb-abl-feed { display: flex; flex-direction: column; }
.bb-abl-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.bb-abl-text { color: #dfe4ee; font-size: 0.92rem; line-height: 1.45; }
.bb-abl-chip {
  flex: none;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wb-primary);
  border: 1px solid rgba(78, 205, 196, 0.35);
  border-radius: 999px;
  padding: 0.25em 0.65em;
}

.bb-abl-caps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.bb-abl-cap {
  padding-left: 1.1rem;
  border-left: 2px solid rgba(255, 255, 255, 0.10);
  opacity: 0.42;
  transition: opacity 0.45s ease, border-color 0.45s ease;
}
.bb-abl-cap.is-on { opacity: 1; border-left-color: var(--wb-primary); }
.bb-abl-cap h3 {
  margin: 0 0 0.25em;
  font-size: 1.12rem;
  color: var(--wb-white);
}
.bb-abl-cap h3 strong { color: #00ADEE; font-weight: inherit; }
.bb-abl-cap p { margin: 0; color: #9fabc4; font-size: 0.95rem; line-height: 1.55; }

/* ── Workspace & Workers: the handover ─────────────────────────────────────
   A week's dull tasks move from a person to Worker lanes; the person is
   promoted from doing to directing. Final state is the CSS default. */
.bb-ww .bb-eyebrow { display: block; text-align: center; }
.bb-ww-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 3.2rem;
  align-items: start;
  margin-top: 3.4rem;
}
@media (max-width: 900px) { .bb-ww-grid { grid-template-columns: 1fr; gap: 2.4rem; } }

.bb-ww-person,
.bb-ww-lane {
  background: linear-gradient(170deg, #202a4d 0%, #1B2240 65%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--wb-radius-lg);
}
.bb-ww-person { padding: 1.5rem 1.6rem 1.2rem; box-shadow: 0 26px 60px rgba(0, 0, 0, 0.4); }
.bb-ww-person-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}
.bb-ww-who { color: var(--wb-white); font-weight: 600; font-size: 0.95rem; }

/* Role badge crossfades between its two states. */
.bb-ww-role {
  position: relative;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.3em 0.75em;
  border: 1px solid rgba(78, 205, 196, 0.4);
  color: var(--wb-primary);
  white-space: nowrap;
}
.bb-ww-role-before, .bb-ww-role-after { transition: opacity 0.4s ease; }
.bb-ww-role-before { position: absolute; inset: 0.3em 0.75em; opacity: 0; }
.bb-ww-role-after { opacity: 1; }
.bb-ww.bb-ww-doing .bb-ww-role-before { opacity: 1; }
.bb-ww.bb-ww-doing .bb-ww-role-after { opacity: 0; }
.bb-ww.bb-ww-doing .bb-ww-role { border-color: rgba(255, 255, 255, 0.25); color: #aab6cc; }

.bb-ww-tasks { list-style: none; padding: 0; margin: 0; }
.bb-ww-task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.62rem 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}
.bb-ww-task span { color: #dfe4ee; font-size: 0.93rem; transition: color 0.4s ease, text-decoration-color 0.4s ease; }
.bb-ww-task em {
  flex: none;
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8f9bb3;
}
.bb-ww-task.is-done span {
  color: #7e8aa5;
  text-decoration: line-through;
  text-decoration-color: rgba(78, 205, 196, 0.6);
}
.bb-ww-task.is-scan { background: rgba(0, 173, 238, 0.10); }
.bb-ww-kept {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--wb-primary);
}

.bb-ww-lanes { display: flex; flex-direction: column; gap: 1.1rem; }
.bb-ww-lane { padding: 1rem 1.2rem 1.1rem; }
.bb-ww-lane-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7rem;
}
.bb-ww-lane-name { color: var(--wb-white); font-weight: 600; font-size: 0.9rem; }
.bb-ww-slot {
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: var(--wb-radius-sm);
  padding: 0.45rem 0.6rem;
  margin-top: 0.5rem;
  min-height: 2.1em;
}
.bb-ww-chip {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--wb-dark);
  background: linear-gradient(90deg, var(--wb-primary), #59d6ce);
  border-radius: 4px;
  padding: 0.22em 0.6em;
  font-weight: 600;
}
.bb-ww-tick { border-color: rgba(78, 205, 196, 0.5); }

.bb-ww-stat {
  margin: 1.4rem auto 0;
  max-width: 54ch;
  text-align: center;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.55;
  color: #aab6cc;
  text-wrap: pretty;
}
.bb-ww-stat strong { color: var(--wb-primary); font-weight: 700; }
.bb-ww-sep { margin: 0 0.7em; color: #5c6784; }

/* ── "And there's more" capability ledger ───────────────────────────────────
   Brad's six capabilities (2026-08-03) as one bordered panel: a 3×2 grid of
   cells with hairline dividers (1px gap over a tinted background), and a
   closing band for "…and so much more". Deliberately not another card grid —
   the homepage already has three — and no lift-on-hover, so it reads as a
   single fixed piece of furniture rather than six floating tiles. */
.bb-more > .wb-inner > h2 strong { color: #00ADEE; font-weight: inherit; }
.bb-more-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 1040px;
  margin: 2.8rem auto 0;
  background: rgba(26, 26, 46, 0.10);
  border: 1px solid rgba(26, 26, 46, 0.10);
  border-radius: var(--wb-radius-lg);
  overflow: hidden;
  text-align: left;
}
.bb-more-cell {
  background: var(--wb-white);
  padding: 1.8rem 1.7rem 1.9rem;
}
.bb-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 1rem;
  border-radius: var(--wb-radius-md);
  background: color-mix(in srgb, var(--wb-accent) 14%, transparent);
  color: var(--wb-accent);
}
.bb-more-icon .wb-icon { width: 1.3rem; height: 1.3rem; }
.bb-more-cell h3 { margin: 0 0 0.45em; font-size: 1.08rem; letter-spacing: -0.01em; }
.bb-more-cell p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--wb-text-light); }
.bb-more-cell a,
.bb-more-band a { color: var(--wb-primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bb-more-cell a:hover,
.bb-more-band a:hover { color: var(--wb-dark); }
.bb-more-band {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.4rem 2.2rem;
  padding: 1.5rem 1.7rem;
  background: var(--wb-light);
}
.bb-more-band p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--wb-text-light); }
.bb-more-band-title {
  font-family: var(--wb-font-heading);
  font-size: 1.15rem !important;
  font-weight: 700;
  color: #00ADEE !important;
  letter-spacing: -0.01em;
}
@media (max-width: 900px) {
  .bb-more-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bb-more-ledger { grid-template-columns: 1fr; border-radius: var(--wb-radius-md); }
  .bb-more-cell { padding: 1.5rem 1.35rem; }
  .bb-more-band { grid-template-columns: 1fr; padding: 1.4rem 1.35rem; }
}

/* ── Deployment & ownership ──────────────────────────────────────────────── */
.bb-deploy > .wb-inner > h2 strong { color: #00ADEE; font-weight: inherit; }
.bb-deploy-sub {
  margin: 2.8rem 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wb-text-light);
}
.bb-deploy-row { margin-top: 1.2rem; }

/* ── Through your existing agency ─────────────────────────────────────────── */
.bb-agency > .wb-inner > h2 strong { color: #00ADEE; font-weight: inherit; }
.bb-agency-row { margin-top: 2.4rem; }
.bb-agency-cta { margin-top: 2.6rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.bb-agency-alt { color: var(--wb-dark); border-color: rgba(26, 26, 46, 0.3); }
.bb-agency-alt:hover { border-color: var(--wb-primary); color: var(--wb-primary); }

/* ── Built for tomorrow ────────────────────────────────────────────────────
   Two time horizons as two panels: Today in teal (action, now), Tomorrow in
   blue (trust, horizon) — the two-blues system carrying meaning. */
.bb-tomorrow > .wb-inner > h2 strong { color: #00ADEE; font-weight: inherit; }
.bb-tmw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  margin-top: 2.8rem;
  text-align: left;
  position: relative;
}
@media (max-width: 860px) { .bb-tmw-grid { grid-template-columns: 1fr; gap: 1.8rem; } }

.bb-tmw-col {
  border-radius: var(--wb-radius-lg);
  padding: 2rem 2.1rem;
  background: var(--wb-white);
  border: 1px solid rgba(26, 26, 46, 0.09);
  border-top: 4px solid transparent;
  box-shadow: 0 2px 5px rgba(26, 26, 46, 0.05), 0 14px 34px rgba(26, 26, 46, 0.07);
}
.bb-tmw-today  { border-top-color: var(--wb-primary); }
.bb-tmw-future { border-top-color: #00ADEE; }

.bb-tmw-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.8em;
}
.bb-tmw-today .bb-tmw-eyebrow  { color: color-mix(in srgb, var(--wb-primary) 75%, black); }
.bb-tmw-future .bb-tmw-eyebrow { color: #0089BC; }

.bb-tmw-col h3 {
  margin: 0 0 0.8em;
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  letter-spacing: -0.01em;
}
.bb-tmw-col ul { margin: 0; padding-left: 1.25em; }
.bb-tmw-col li { margin-bottom: 0.6em; line-height: 1.6; color: var(--wb-text-light); }
.bb-tmw-col li:last-child { margin-bottom: 0; }
.bb-tmw-today  li::marker { color: var(--wb-primary); }
.bb-tmw-future li::marker { color: #00ADEE; }

/* The seam: where the two horizons meet. */
.bb-tmw-seam {
  margin: 2.4rem auto 0;
  max-width: 56ch;
  font-size: 1.02rem;
  color: var(--wb-text-light);
  position: relative;
  padding-top: 1.6rem;
}
.bb-tmw-seam::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--wb-primary), #00ADEE);
}

/* ── Ability page: toolkit with flagship cards ────────────────────────────── */
.bb-tk .bb-eyebrow { display: block; text-align: center; }
.bb-tk > .wb-inner > h2 strong,
.bb-control > .wb-inner > h2 strong { color: #00ADEE; font-weight: inherit; }

.bb-tk-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2.6rem 0 2rem;
  text-align: left;
}
@media (max-width: 860px) { .bb-tk-featured { grid-template-columns: 1fr; gap: 1.6rem; } }

.bb-tk-card {
  background: linear-gradient(170deg, #212b4f 0%, #1B2240 70%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top: 4px solid transparent;
  border-radius: var(--wb-radius-lg);
  padding: 2.1rem 2.2rem;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.4);
}
.bb-tk-crm  { border-top-color: #00ADEE; }
.bb-tk-plan { border-top-color: var(--wb-primary); }
.bb-tk-name {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.9em;
}
.bb-tk-crm .bb-tk-name  { color: #00ADEE; }
.bb-tk-plan .bb-tk-name { color: var(--wb-primary); }
.bb-tk-card h3 {
  margin: 0 0 0.6em;
  color: var(--wb-white);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: -0.01em;
}
.bb-tk-card p { margin: 0; color: #aab6cc; line-height: 1.65; }

/* Assistant — spans both flagship columns, blue-to-teal seam */
.bb-tk-asst {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 1.5rem 2.5rem;
  align-items: start;
  position: relative;
  overflow: hidden;
}
.bb-tk-asst::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00ADEE, var(--wb-primary));
}
.bb-tk-asst .bb-tk-name { color: var(--wb-white); }
@media (max-width: 860px) { .bb-tk-asst { grid-template-columns: 1fr; gap: 0.4rem; } }

.bb-tk-also {
  max-width: 52ch;
  margin: 2.4rem auto 0;
  color: #aab6cc;
}
.bb-tk-also strong { color: var(--wb-white); }

/* Control section payoff spacing */
.bb-control .bb-onb-payoff { margin-top: 2.6rem; }

/* ── Ability page: knowledge diff, Web Design showpiece, checkable claims, Voice ── */
.bb-voice > .wb-inner > h2 strong,
.bb-wd > .wb-inner > h2 strong,
.bb-checkable > .wb-inner > h2 strong { color: #00ADEE; font-weight: inherit; }

/* ── "The difference your knowledge makes" — one ask, answered twice ─────── */
.bb-kd .bb-eyebrow { display: block; text-align: center; }
.bb-kd-title { margin: 0 0 0.5em; }
.bb-kd-title strong { color: #00ADEE; font-weight: inherit; }
.bb-kd-lead { color: var(--wb-text-light); max-width: 46ch; margin-left: auto; margin-right: auto; }

.bb-kd-board { margin-top: 2.6rem; }
.bb-kd-ask {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.75em 1.3em;
  border-radius: 999px;
  background: var(--wb-dark);
  color: var(--wb-white);
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(26, 26, 46, 0.22);
}
.bb-kd-ask-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wb-primary);
}

.bb-kd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2.2rem;
  text-align: left;
}
@media (max-width: 860px) { .bb-kd-grid { grid-template-columns: 1fr; gap: 1.6rem; } }

.bb-kd-card {
  display: flex;
  flex-direction: column;
  background: var(--wb-white);
  border: 1px solid rgba(26, 26, 46, 0.10);
  border-top: 4px solid rgba(26, 26, 46, 0.18);
  border-radius: var(--wb-radius-lg);
  padding: 1.9rem 2rem;
  box-shadow: 0 14px 38px rgba(26, 26, 46, 0.08);
}
.bb-kd-yours { border-top-color: var(--wb-primary); }
.bb-kd-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 1.1em;
  color: #8a90a3;
}
.bb-kd-yours .bb-kd-tag { color: var(--wb-primary-hover); }
.bb-kd-line { margin: 0 0 0.8em; line-height: 1.65; }
.bb-kd-any .bb-kd-line { color: #6a7080; }
.bb-kd-yours .bb-kd-line { color: var(--wb-dark); }
.bb-kd-line mark {
  background: color-mix(in srgb, var(--wb-primary) 18%, transparent);
  color: inherit;
  border-radius: 4px;
  padding: 0.05em 0.14em;
  margin: 0 -0.14em;
  transition: background-color 0.45s ease;
}
.bb-kd-line mark.is-off { background: transparent; }
.bb-kd-verdict {
  margin: auto 0 0;
  padding-top: 1em;
  border-top: 1px dashed rgba(26, 26, 46, 0.14);
  font-size: 0.92rem;
  color: #8a90a3;
}
.bb-kd-verdict-yours { color: var(--wb-primary-hover); font-weight: 600; }

.bb-kd-chips { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0 0 1.2em; }
.bb-kd-chip {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.32em 0.85em;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #00ADEE 40%, transparent);
  background: color-mix(in srgb, #00ADEE 10%, transparent);
  color: #0077a8;
  white-space: nowrap;
}
.bb-kd-payoff { color: var(--wb-dark); }

.bb-wd .bb-eyebrow { display: block; text-align: center; }

.bb-wd-flex {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 2.6rem;
}

/* Web Design build — browser frame assembled by two cursors */
.bb-wdb svg { width: 100%; height: auto; display: block; }
.bb-wdb-frame {
  fill: var(--wb-white);
  stroke: rgba(26, 26, 46, 0.14);
  stroke-width: 1.5;
  filter: drop-shadow(0 14px 30px rgba(26, 26, 46, 0.10));
}
.bb-wdb-bar { stroke: rgba(26, 26, 46, 0.10); stroke-width: 1.2; }
.bb-wdb-dot { fill: rgba(26, 26, 46, 0.16); }
.bb-wdb-url { fill: rgba(26, 26, 46, 0.05); }
.bb-wdb-urltext {
  font-family: var(--wb-font-body);
  font-size: 10px;
  fill: #8a90a3;
}
.bb-wdb-tag {
  font-family: var(--wb-font-body);
  font-size: 10px;
  font-weight: 700;
  fill: #fff;
}
@media (max-width: 960px) { .bb-wdb { max-width: 330px; margin: 0 auto; } }
.bb-wdg svg { width: 100%; height: auto; display: block; }
.bb-wdg-sphere { stroke: rgba(26, 26, 46, 0.30); stroke-width: 1.5; }
.bb-wdg-lat, .bb-wdg-mer { stroke: rgba(26, 26, 46, 0.18); stroke-width: 1; }
.bb-wdg-arc { stroke: #00ADEE; stroke-width: 1.6; stroke-linecap: round; opacity: 0.8; }
.bb-wdg-node { fill: var(--wb-primary); }
@media (max-width: 960px) {
  .bb-wd-flex { grid-template-columns: 1fr; gap: 1.8rem; }
  .bb-wdg { max-width: 250px; margin: 0 auto; }
}

/* Ability-page devices: when JS is on its way and motion is allowed, start
   hidden so the replay never flashes its ending before rewinding. No-JS keeps
   the finished scene in the HTML (crawlers, AI search); reduced-motion users
   get the finished scene instantly instead of a page stuck hidden. */
@media (prefers-reduced-motion: no-preference) {
  .js .bb-kd-ask, .js .bb-kd-any, .js .bb-kd-yours, .js .bb-kd-payoff,
  .js .bb-wds { opacity: 0; visibility: hidden; }
}

/* Web Design session — you raise it, the Brain feeds it, Webb answers with work */
.bb-wds {
  max-width: 640px;
  margin: 2.6rem auto 0;
  padding: 1.5rem 1.7rem 1.8rem;
  background: linear-gradient(170deg, #212b4f 0%, #1B2240 70%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--wb-radius-lg);
  box-shadow: 0 24px 55px rgba(26, 26, 46, 0.35);
  text-align: left;
}
.bb-wds-head {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 1.2rem;
}
.bb-wds-title { color: var(--wb-white); font-weight: 700; font-size: 1.02rem; }
.bb-wds-type {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #7fd6f7;
  border: 1px solid rgba(0, 173, 238, 0.45);
  background: rgba(0, 173, 238, 0.12);
  padding: 0.25em 0.8em;
  border-radius: 999px;
  white-space: nowrap;
}
.bb-wds-turn {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.35em 0.95em;
  border-radius: 999px;
  background: var(--wb-primary);
  color: #0b3835;
  white-space: nowrap;
}
.bb-wds-turn.is-webb { background: rgba(255, 255, 255, 0.12); color: #aab6cc; }
.bb-wds-msg {
  border-radius: 12px;
  padding: 0.85em 1.1em 0.95em;
  line-height: 1.55;
  font-size: 0.95rem;
  margin: 0.9rem 0;
  max-width: 88%;
}
.bb-wds-you {
  margin-left: auto;
  background: #00ADEE;
  color: #06283a;
  font-weight: 500;
  border-bottom-right-radius: 4px;
}
.bb-wds-webb {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #dfe4ee;
  border-bottom-left-radius: 4px;
}
.bb-wds-who {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5em;
  opacity: 0.75;
}
.bb-wds-know {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 1rem 0;
}
.bb-wds-know-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wb-primary);
}
.bb-wds-chip {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3em 0.85em;
  border-radius: 999px;
  border: 1px solid rgba(78, 205, 196, 0.5);
  background: rgba(78, 205, 196, 0.12);
  color: #8fe6df;
  white-space: nowrap;
}
.bb-wds-typing { display: none; gap: 0.35em; padding: 0.5em 1em 0.2em; }
.bb-wds-typing span { width: 7px; height: 7px; border-radius: 50%; background: #aab6cc; }

/* ── "Ask your Brain" scene (/knowledge/) ─────────────────────────────────
   Same physical language as the Web Design session panel: a dark card on a
   light section, one exchange, sources as chips. Finished state by default. */
.bb-ask {
  max-width: 640px;
  margin: 2.6rem auto 0;
  padding: 1.5rem 1.7rem 1.8rem;
  background: linear-gradient(170deg, #212b4f 0%, #1B2240 70%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--wb-radius-lg);
  box-shadow: 0 24px 55px rgba(26, 26, 46, 0.35);
  text-align: left;
}
.bb-ask-head { display: flex; align-items: center; gap: 0.7em; margin-bottom: 1.2rem; }
.bb-ask-title { color: var(--wb-white); font-weight: 700; font-size: 1.02rem; }
.bb-ask-type {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: #7fd6f7;
  border: 1px solid rgba(0, 173, 238, 0.45); background: rgba(0, 173, 238, 0.12);
  padding: 0.25em 0.8em; border-radius: 999px; white-space: nowrap;
}
.bb-ask-status {
  margin-left: auto; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.35em 0.95em; border-radius: 999px; background: var(--wb-primary); color: #0b3835; white-space: nowrap;
}
.bb-ask-status.is-working { background: rgba(255, 255, 255, 0.12); color: #aab6cc; }
.bb-ask-msg { border-radius: 12px; padding: 0.85em 1.1em 0.95em; line-height: 1.55; font-size: 0.95rem; margin: 0.9rem 0; max-width: 88%; }
.bb-ask-you { margin-left: auto; background: #00ADEE; color: #06283a; font-weight: 500; border-bottom-right-radius: 4px; }
.bb-ask-brain { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); color: #dfe4ee; border-bottom-left-radius: 4px; max-width: 94%; }
.bb-ask-brain .bb-ask-line { margin: 0 0 0.6em; }
.bb-ask-who { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5em; opacity: 0.75; }
.bb-ask-know { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em; margin: 1rem 0; }
.bb-ask-know-label, .bb-ask-src-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wb-primary); }
.bb-ask-chip, .bb-ask-src {
  font-size: 0.78rem; font-weight: 600; padding: 0.3em 0.85em; border-radius: 999px;
  border: 1px solid rgba(78, 205, 196, 0.5); background: rgba(78, 205, 196, 0.12); color: #8fe6df; white-space: nowrap;
}
.bb-ask-typing { display: none; gap: 0.35em; padding: 0.5em 1em 0.2em; }
.bb-ask-typing span { width: 7px; height: 7px; border-radius: 50%; background: #aab6cc; }
.bb-ask-sources { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em; margin-top: 0.9em; padding-top: 0.8em; border-top: 1px solid rgba(255, 255, 255, 0.10); }
.bb-ask-approved {
  margin-left: auto; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #0b3835; background: var(--wb-primary); padding: 0.3em 0.8em; border-radius: 999px; white-space: nowrap;
}
.bb-ask-note { max-width: 56ch; margin: 1.6rem auto 0; color: var(--wb-text-light); }
/* ── /knowledge/ — follows the homepage's lines ───────────────────────────
   Centred statement headings with one blue keyword, dark/white bands, the
   six-point grid for the opener, tiles on dark, the two-panel contrast for
   "Held properly", and a payoff line closing each dark band. */
.bb-kn > .wb-inner > h2 { max-width: 24ch; margin-inline: auto; text-wrap: balance; }
.bb-kn > .wb-inner > h2 strong,
.bb-kn .bb-feature-title strong { color: #00ADEE; font-weight: inherit; }
.bb-kn > .wb-inner > .wb-lead { max-width: 56ch; margin-inline: auto; }
.bb-kn-note { max-width: 62ch; margin: 2.8rem auto 0; color: var(--wb-text-light); text-align: center; }
.bb-kn-tiles { grid-template-columns: repeat(3, 1fr); margin-top: 3rem; }
@media (max-width: 900px) { .bb-kn-tiles { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.wb-dark .bb-ask { background: linear-gradient(170deg, #232d52 0%, #1c2346 70%); border-color: rgba(255, 255, 255, 0.13); box-shadow: 0 24px 55px rgba(0, 0, 0, 0.35); }
.wb-dark .bb-ask-note { color: #aab6cc; }
.bb-kn .bb-onb-payoff strong { color: #00ADEE; font-weight: inherit; }
.bb-kn .bb-ba-grid { max-width: 860px; }
/* ── "Two kinds of knowledge" convergence scene (/knowledge/) ─────────────
   General knowledge left, your knowledge right, one Brain in the middle that
   holds both. Blue = general (the world's), teal = yours (action, ownership). */
.bb-two {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 1.6rem;
  align-items: center;
  max-width: 1040px;
  margin: 3rem auto 0;
  text-align: left;
}
.bb-two-side {
  padding: 1.5rem 1.4rem 1.6rem;
  border-radius: var(--wb-radius-lg);
  background: var(--wb-white);
  border: 1px solid rgba(26, 26, 46, 0.08);
  box-shadow: 0 1px 2px rgba(26, 26, 46, 0.05), 0 8px 24px rgba(26, 26, 46, 0.06);
}
.bb-two-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.bb-two-general .bb-two-label { color: #0077a8; }
.bb-two-yours .bb-two-label { color: #0f6f68; }
.bb-two-sub { margin: 0.35em 0 1em; font-size: 0.9rem; color: var(--wb-text-light); }
.bb-two-chips { display: flex; flex-wrap: wrap; gap: 0.45em; }
.bb-two-chip, .bb-two-cchip {
  font-size: 0.8rem; font-weight: 600; padding: 0.3em 0.8em; border-radius: 999px; white-space: nowrap;
}
.bb-two-general .bb-two-chip { color: #0077a8; background: rgba(0, 173, 238, 0.10); border: 1px solid rgba(0, 173, 238, 0.35); }
.bb-two-yours .bb-two-chip { color: #0f6f68; background: rgba(78, 205, 196, 0.14); border: 1px solid rgba(78, 205, 196, 0.5); }
.bb-two-core {
  position: relative;
  padding: 1.9rem 1.6rem 1.7rem;
  border-radius: var(--wb-radius-lg);
  background: linear-gradient(170deg, #232d52 0%, #1A1A2E 70%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 55px rgba(26, 26, 46, 0.35);
  text-align: center;
  overflow: hidden;
}
.bb-two-ring {
  position: absolute; inset: -40% -20%; pointer-events: none;
  background: radial-gradient(45% 45% at 50% 50%, rgba(0, 173, 238, 0.22), transparent 70%),
              radial-gradient(35% 35% at 50% 55%, rgba(78, 205, 196, 0.18), transparent 70%);
}
.bb-two-core-label { position: relative; display: block; color: var(--wb-white); font-weight: 700; font-size: 1.15rem; margin-bottom: 1rem; }
.bb-two-core-chips { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45em; }
.bb-two-cg { color: #7fd6f7; background: rgba(0, 173, 238, 0.14); border: 1px solid rgba(0, 173, 238, 0.45); }
.bb-two-cy { color: #8fe6df; background: rgba(78, 205, 196, 0.14); border: 1px solid rgba(78, 205, 196, 0.5); }
.bb-two-status {
  position: relative; display: inline-block; margin-top: 1.2rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.35em 1em; border-radius: 999px; background: var(--wb-primary); color: #0b3835;
}
.bb-two-status.is-working { background: rgba(255, 255, 255, 0.12); color: #aab6cc; }
@media (max-width: 900px) {
  .bb-two { grid-template-columns: 1fr; max-width: 560px; }
  .bb-two-core { order: 3; }
}
/* Yesterday / today contrast on dark */
.wb-dark .bb-ba-col { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.09); color: #dfe4ee; }
.wb-dark .bb-ba-col h3 { color: #aab6cc; }
.wb-dark .bb-ba-col li::marker { color: #6b7a99; }
.wb-dark .bb-ba-col.bb-ba-after { background: rgba(78, 205, 196, 0.08); border-color: rgba(78, 205, 196, 0.35); }
.wb-dark .bb-ba-col.bb-ba-after h3 { color: var(--wb-primary); }
.wb-dark .bb-ba-note { color: #aab6cc; }
.bb-kn-hire { font-size: 0.82rem; color: var(--wb-text-light); margin-top: 0.9em; }
.wb-dark .bb-kn-hire { color: #8f98ad; }
/* ── "A conversation becomes knowledge" capture scene (/knowledge/) ──────── */
.bb-cap {
  display: grid;
  grid-template-columns: 1.15fr auto 1fr auto 0.9fr;
  gap: 0.9rem;
  align-items: stretch;
  max-width: 1080px;
  margin: 3rem auto 0;
  padding: 1.4rem;
  border-radius: var(--wb-radius-lg);
  background: var(--wb-light);
  border: 1px solid rgba(26, 26, 46, 0.07);
  text-align: left;
}
.bb-cap-step { display: flex; flex-direction: column; min-width: 0; }
.bb-cap-label { display: flex; align-items: center; gap: 0.55em; margin-bottom: 0.9rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wb-text-light); }
.bb-cap-label i {
  display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 999px;
  font-style: normal; font-size: 0.72rem; color: #0b3835; background: var(--wb-primary);
}
.bb-cap-msg { border-radius: 12px; padding: 0.75em 0.95em 0.85em; font-size: 0.9rem; line-height: 1.5; margin-bottom: 0.7rem; }
.bb-cap-brain { background: var(--wb-dark); color: #dfe4ee; border-bottom-left-radius: 4px; margin-right: 1.4rem; }
.bb-cap-person { background: rgba(78, 205, 196, 0.16); border: 1px solid rgba(78, 205, 196, 0.45); color: var(--wb-dark); border-bottom-right-radius: 4px; margin-left: 1.4rem; }
.bb-cap-who { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.4em; opacity: 0.7; }
.bb-cap-typing { display: none; gap: 0.3em; padding: 0.3em 0.9em 0.6em; margin-left: 1.4rem; }
.bb-cap-typing span { width: 6px; height: 6px; border-radius: 50%; background: #8f98ad; }
.bb-cap-arrow { display: flex; align-items: center; color: rgba(26, 26, 46, 0.22); }
.bb-cap-arrow .wb-icon { width: 1.6rem; height: 1.6rem; }
.bb-cap-arrow.is-on { color: var(--wb-primary); }
.bb-cap-card {
  flex: 1; padding: 1rem 1.1rem 1.05rem; border-radius: var(--wb-radius-md);
  background: var(--wb-white); border: 1px solid rgba(26, 26, 46, 0.09);
  box-shadow: 0 1px 2px rgba(26, 26, 46, 0.05), 0 8px 24px rgba(26, 26, 46, 0.06);
}
.bb-cap-doc-title { font-weight: 700; font-size: 0.98rem; margin-bottom: 0.55em; color: var(--wb-dark); }
.bb-cap-doc-lines { list-style: none; margin: 0 0 0.8em; padding: 0; font-size: 0.86rem; line-height: 1.45; }
.bb-cap-doc-lines li { position: relative; padding-left: 1em; margin-bottom: 0.3em; color: var(--wb-text); }
.bb-cap-doc-lines li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: #00ADEE; }
.bb-cap-meta { display: flex; flex-wrap: wrap; gap: 0.4em; }
.bb-cap-area, .bb-cap-owner, .bb-cap-src { font-size: 0.7rem; font-weight: 600; padding: 0.25em 0.7em; border-radius: 999px; white-space: nowrap; }
.bb-cap-area { color: #0077a8; background: rgba(0, 173, 238, 0.10); border: 1px solid rgba(0, 173, 238, 0.35); }
.bb-cap-owner { color: var(--wb-text-light); background: rgba(26, 26, 46, 0.05); border: 1px solid rgba(26, 26, 46, 0.10); }
.bb-cap-ok { background: rgba(78, 205, 196, 0.10); border-color: rgba(78, 205, 196, 0.45); display: flex; flex-direction: column; }
.bb-cap-badge { align-self: flex-start; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35em 0.9em; border-radius: 999px; background: var(--wb-primary); color: #0b3835; margin-bottom: 0.7em; }
.bb-cap-ok-text { margin: 0 0 0.8em; font-size: 0.88rem; line-height: 1.5; color: var(--wb-dark); flex: 1; }
.bb-cap-src { align-self: flex-start; color: #0f6f68; background: rgba(78, 205, 196, 0.14); border: 1px solid rgba(78, 205, 196, 0.5); }
.bb-cap-note { max-width: 58ch; margin: 1.6rem auto 0; color: var(--wb-text-light); text-align: center; }
@media (max-width: 900px) {
  .bb-cap { grid-template-columns: 1fr; max-width: 520px; }
  .bb-cap-arrow { justify-content: center; }
  .bb-cap-arrow .wb-icon { transform: rotate(90deg); }
}
/* ── Quick read ───────────────────────────────────────────────────────────
   The pill under a presentation page's hero, and the plain-words page itself. */
.bb-qr-bar { text-align: center; padding: 1.1rem 1.5em 0; background: var(--wb-white); }
.bb-qr-pill {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.62em 1.25em 0.62em 1.1em; border-radius: 999px;
  font-size: 0.95rem; font-weight: 600; text-decoration: none;
  color: var(--wb-dark); background: var(--wb-white); border: 1.5px solid var(--wb-dark);
  box-shadow: 0 2px 8px rgba(26, 26, 46, 0.08);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.bb-qr-pill > .wb-icon { color: #00ADEE; }
.bb-qr-pill:hover { border-color: var(--wb-primary); background: rgba(78, 205, 196, 0.10); box-shadow: 0 6px 16px rgba(26, 26, 46, 0.12); }
/* Double chevron that nudges right, one after the other — a beckon, not a strobe. */
.bb-qr-arrows { display: inline-flex; align-items: center; margin-left: 0.1em; color: var(--wb-primary); }
.bb-qr-arrows .wb-icon { width: 0.95em; height: 0.95em; margin-left: -0.35em; animation: bb-qr-beckon 1.8s ease-in-out infinite; }
.bb-qr-arrows .wb-icon:first-child { margin-left: 0; }
.bb-qr-arrows .wb-icon:last-child { animation-delay: 0.18s; }
@keyframes bb-qr-beckon {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  40% { transform: translateX(3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .bb-qr-arrows .wb-icon { animation: none; opacity: 1; } }
.bb-qr > .wb-inner { max-width: 680px; text-align: left; }
.bb-qr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; flex-wrap: wrap; margin-bottom: 0.4rem; }
.bb-qr-top .bb-eyebrow { margin-bottom: 0; }
.bb-qr-back-top { font-size: 0.88rem; font-weight: 600; color: var(--wb-primary); text-decoration: none; white-space: nowrap; }
.bb-qr-back-top:hover { color: var(--wb-dark); }
.bb-qr-title { margin: 0 0 0.4em; font-size: clamp(2rem, 3.6vw, 2.8rem); letter-spacing: -0.02em; line-height: 1.1; }
.bb-qr-lead { color: var(--wb-text-light); margin-bottom: 2.2rem; }
.bb-qr-body { font-size: 1.08rem; line-height: 1.7; }
.bb-qr-body h2 { font-size: 1.15rem; margin: 2rem 0 0.6rem; letter-spacing: -0.01em; }
.bb-qr-body p { max-width: none; margin-bottom: 1.1em; }
.bb-qr-body ul { padding-left: 1.3em; margin-bottom: 1.2em; }
.bb-qr-body li { margin-bottom: 0.5em; }
.bb-qr-body li::marker { color: var(--wb-primary); }
.bb-qr-one { padding: 1.1em 1.3em; border-left: 3px solid var(--wb-primary); background: var(--wb-light); border-radius: 0 var(--wb-radius-md) var(--wb-radius-md) 0; font-size: 1.15rem; font-weight: 500; }
.bb-qr-foot { display: flex; justify-content: space-between; align-items: center; gap: 1em; flex-wrap: wrap; margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid rgba(26, 26, 46, 0.10); }
.bb-qr-back { color: var(--wb-text-light); font-weight: 600; text-decoration: none; }
.bb-qr-back:hover { color: var(--wb-dark); }
.bb-qr-next {
  display: inline-block; padding: 0.6em 1.3em; border-radius: 999px; font-weight: 600; text-decoration: none;
  color: var(--wb-button-text, #1A1A2E); background: var(--wb-primary); box-shadow: 0 6px 18px rgba(78, 205, 196, 0.28);
  transition: background 0.2s ease, transform 0.2s ease;
}
.bb-qr-next:hover { background: var(--wb-primary-hover); color: var(--wb-button-text, #1A1A2E); transform: translateY(-1px); }
/* ── "A week with the Ability" (/ability/) ─────────────────────────────────
   Five day-columns of work items. Tool tag = brand blue (a keyword), state
   chip = teal (an action waiting for a person). */
.bb-wk {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.9rem;
  max-width: 1100px;
  margin: 3rem auto 0;
  text-align: left;
}
.bb-wk-day { display: flex; flex-direction: column; gap: 0.7rem; transition: opacity 0.4s ease; }
.bb-wk-day.is-off { opacity: 0.35; }
.bb-wk-dn {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wb-text-light); padding-bottom: 0.5rem; border-bottom: 2px solid rgba(26, 26, 46, 0.10);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.bb-wk-day.is-on .bb-wk-dn { color: var(--wb-dark); border-bottom-color: var(--wb-primary); }
.bb-wk-item {
  display: flex; flex-direction: column; gap: 0.5rem; flex: 1;
  padding: 0.95rem 1rem 1rem; border-radius: var(--wb-radius-md);
  background: var(--wb-white); border: 1px solid rgba(26, 26, 46, 0.08);
  box-shadow: 0 1px 2px rgba(26, 26, 46, 0.05), 0 8px 24px rgba(26, 26, 46, 0.06);
}
.bb-wk-item p { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--wb-text); flex: 1; }
.bb-wk-tool { align-self: flex-start; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0077a8; }
.bb-wk-st {
  align-self: flex-start; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #0b3835; background: var(--wb-primary); padding: 0.3em 0.75em; border-radius: 999px; white-space: nowrap;
}
.bb-wk-st-quiet { color: #0f6f68; background: rgba(78, 205, 196, 0.14); border: 1px solid rgba(78, 205, 196, 0.45); }
.wb-light .bb-onb-payoff, .wb-white .bb-onb-payoff { color: var(--wb-dark); }
@media (max-width: 1000px) { .bb-wk { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; } }
@media (max-width: 560px) { .bb-wk { grid-template-columns: 1fr; max-width: 480px; } }
/* ── Product map (/features/) ───────────────────────────────────────────── */
.bb-hero-title strong { color: #00ADEE; font-weight: inherit; }
.bb-map { max-width: 1040px; margin: 3rem auto 0; text-align: left; }
.bb-map-row { display: grid; grid-template-columns: 1fr auto 1.25fr; gap: 1.2rem; align-items: stretch; }
.bb-map-box, .bb-map-base {
  display: block; text-decoration: none; color: inherit;
  padding: 1.4rem 1.4rem 1.5rem; border-radius: var(--wb-radius-lg);
  background: var(--wb-white); border: 1px solid rgba(26, 26, 46, 0.09);
  box-shadow: 0 1px 2px rgba(26, 26, 46, 0.05), 0 8px 24px rgba(26, 26, 46, 0.06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.bb-map-box:hover, .bb-map-base:hover { border-color: var(--wb-primary); transform: translateY(-3px); box-shadow: 0 2px 4px rgba(26, 26, 46, 0.05), 0 18px 40px rgba(26, 26, 46, 0.12); }
.bb-map-brain { background: linear-gradient(170deg, #232d52 0%, #1A1A2E 70%); color: #dfe4ee; border-color: rgba(255, 255, 255, 0.12); }
.bb-map-label { display: block; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--wb-dark); }
.bb-map-brain .bb-map-label { color: var(--wb-white); }
.bb-map-sub { display: block; margin: 0.15em 0 0.9em; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #0077a8; }
.bb-map-brain .bb-map-sub { color: #7fd6f7; }
.bb-map-chips { display: flex; flex-wrap: wrap; gap: 0.4em; }
.bb-map-chip { font-size: 0.78rem; font-weight: 600; padding: 0.3em 0.8em; border-radius: 999px; white-space: nowrap; color: #0f6f68; background: rgba(78, 205, 196, 0.14); border: 1px solid rgba(78, 205, 196, 0.5); }
.bb-map-brain .bb-map-chip { color: #7fd6f7; background: rgba(0, 173, 238, 0.14); border-color: rgba(0, 173, 238, 0.45); }
.bb-map-base { margin-top: 1.2rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; background: var(--wb-light); }
.bb-map-base .bb-map-label { font-size: 0.95rem; }
.bb-map-base .bb-map-chip { color: var(--wb-dark); background: var(--wb-white); border-color: rgba(26, 26, 46, 0.14); }
.bb-map-switch { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.4rem; }
.bb-map-track { position: relative; display: block; width: 3.2rem; height: 1.7rem; border-radius: 999px; background: var(--wb-primary); box-shadow: 0 6px 18px rgba(78, 205, 196, 0.35); transition: background 0.3s ease; }
.bb-map-knob { position: absolute; top: 0.2rem; left: 1.7rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--wb-white); transition: left 0.35s cubic-bezier(.2,.8,.2,1); }
.bb-map-switch.is-off .bb-map-track { background: rgba(26, 26, 46, 0.18); box-shadow: none; }
.bb-map-switch.is-off .bb-map-knob { left: 0.2rem; }
.bb-map-switch-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wb-text-light); }
.bb-map-ability.is-off { opacity: 0.45; }
.bb-map-ability { transition: opacity 0.5s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
@media (max-width: 800px) {
  .bb-map-row { grid-template-columns: 1fr; }
  .bb-map-switch { flex-direction: row; justify-content: center; padding: 0.2rem 0; }
}
.bb-ft-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .bb-ft-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .bb-ft-grid-4 { grid-template-columns: 1fr; } }
/* Centred-heading band with a readable prose body (about) */
.bb-prose-wide > .wb-inner > p:not(.wb-lead):not(.bb-kn-note):not(.bb-onb-payoff) { max-width: 62ch; margin-left: auto; margin-right: auto; text-align: left; }
.bb-prose-wide > .wb-inner > p:not(.wb-lead) a { color: var(--wb-primary); font-weight: 600; text-decoration: none; }
/* Two-up card row (sign-off + vault) */
.bb-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }
@media (max-width: 600px) {
  .bb-ask { padding: 1.2rem 1.1rem 1.4rem; }
  .bb-ask-msg { max-width: 100%; }
  .bb-ask-approved { margin-left: 0; }
  .bb-grid-2 { grid-template-columns: 1fr; }
}
.bb-wds-shots { display: flex; gap: 0.9em; margin-top: 1rem; }
.bb-wds-shot {
  width: 132px;
  height: 92px;
  border-radius: 8px;
  background: var(--wb-white);
  padding: 9px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.bb-wds-shot .m-bar {
  height: 9px;
  border-radius: 3px;
  background: #1A1A2E;
  margin-bottom: 7px;
  position: relative;
}
.bb-wds-shot .m-bar::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 2.5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wb-primary);
}
.bb-wds-shot .m-hero {
  height: 36px;
  border-radius: 4px;
  background: linear-gradient(135deg, #4ECDC4, #2BA8A0);
}
.bb-wds-shot .m-line {
  height: 5px;
  border-radius: 2.5px;
  background: rgba(26, 26, 46, 0.16);
  margin-top: 6px;
  width: 85%;
}
.bb-wds-shot .m-line-short { width: 60%; }
.bb-wds-shot .m-cols { display: flex; gap: 6px; }
.bb-wds-shot .m-colA {
  flex: 1;
  height: 52px;
  border-radius: 4px;
  background: linear-gradient(135deg, #00ADEE, #0077C8);
}
.bb-wds-shot .m-colB { flex: 1; }
.bb-wds-shot .m-colB .m-line { width: 100%; }
.bb-wds-shot .m-colB .m-line-short { width: 70%; }
@media (max-width: 520px) {
  .bb-wds { padding: 1.2rem 1.1rem 1.4rem; }
  .bb-wds-title { display: none; }
}

.bb-wd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-top: 2.6rem;
  text-align: left;
}
@media (max-width: 760px) { .bb-wd-grid { grid-template-columns: 1fr; } }
.bb-wd-card {
  background: var(--wb-white);
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: var(--wb-radius-lg);
  padding: 1.8rem 2rem;
  box-shadow: 0 10px 30px rgba(26, 26, 46, 0.06);
}
.bb-wd-card h3 { margin: 0 0 0.5em; font-size: 1.15rem; }
.bb-wd-card p { margin: 0; color: var(--wb-text-light); line-height: 1.65; }
.bb-wd-note {
  max-width: 58ch;
  margin: 2.4rem auto 0;
  color: var(--wb-text-light);
}

/* Three checkable claims — 3-up on the same grid bones as the toolkit tiles */
.bb-check-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .bb-check-grid { grid-template-columns: 1fr; gap: 2rem; } }


/* ── Ambient hero orbs (injected by bb-motion.js) ────────────────────────── */
.bb-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(46px);
  will-change: transform;
}
.bb-orb-0 { width: 300px; height: 300px; top: 12%; right: 14%;
  background: radial-gradient(circle, rgba(0, 173, 238, 0.20), transparent 70%); }
.bb-orb-1 { width: 200px; height: 200px; bottom: 16%; left: 10%;
  background: radial-gradient(circle, rgba(78, 205, 196, 0.13), transparent 70%); }
.bb-orb-2 { width: 150px; height: 150px; top: 55%; right: 32%;
  background: radial-gradient(circle, rgba(0, 173, 238, 0.10), transparent 70%); }

/* ── Header compacts on scroll (class from bb-motion.js) ─────────────────── */
.wb-header-inner { transition: padding 0.3s ease; }
.wb-header { transition: box-shadow 0.3s ease; }
.wb-header.bb-compact .wb-header-inner { padding-top: 0.45em; padding-bottom: 0.45em; }
.wb-header.bb-compact { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); }

/* ── Dark sections: depth instead of flat navy ───────────────────────────── */
.wb-section.wb-dark {
  background:
    radial-gradient(90% 120% at 50% -10%, #212a4e 0%, var(--wb-dark) 60%);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.wb-btn {
  border-radius: var(--wb-radius-md);
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
/* Every primary (teal) button carries the navy text the header and footer buttons
   already use, not the theme's white (Brad, 2026-09-11). */
.wb-btn-primary, .wb-btn-primary:hover, .wb-btn-primary:focus-visible { color: var(--wb-button-text, #1A1A2E); }
.wb-btn-primary { box-shadow: 0 6px 18px rgba(78, 205, 196, 0.28); }
.wb-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(78, 205, 196, 0.38);
}
.wb-btn-primary:active { transform: translateY(0); }
:focus-visible {
  outline: 3px solid var(--wb-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Cards: one physical language everywhere ─────────────────────────────── */
.bb-scenario,
.bb-step,
.bb-ba-col,
.bb-tools .bb-trust-item {
  border-radius: var(--wb-radius-md);
  box-shadow: 0 1px 2px rgba(26, 26, 46, 0.05), 0 8px 24px rgba(26, 26, 46, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bb-scenario:hover,
.bb-step:hover,
.bb-tools .bb-trust-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(26, 26, 46, 0.05), 0 18px 40px rgba(26, 26, 46, 0.12);
}
/* Tool cards were bare text in a grid; give them the card treatment. */
.bb-tools .bb-trust-item {
  background: var(--wb-white);
  border: 1px solid rgba(26, 26, 46, 0.07);
  padding: 1.7rem;
  text-align: left;
  height: 100%;
}
.wb-dark .bb-tools .bb-trust-item {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
}
.wb-dark .bb-tools .bb-trust-item:hover {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.wb-dark .bb-tools .bb-trust-body p { color: #b8c0d0; }

/* ── Feature imagery: light bleeds off the render ────────────────────────── */
.bb-feature-media img {
  box-shadow:
    0 24px 60px rgba(26, 26, 46, 0.22),
    0 10px 30px rgba(0, 173, 238, 0.10);
}

/* Product screenshots get UI framing, not the art-glow treatment: a hairline
   border and a flatter shadow, so they read as the real interface. */
.bb-feature-shot .bb-feature-media img {
  border: 1px solid rgba(26, 26, 46, 0.12);
  box-shadow: 0 16px 44px rgba(26, 26, 46, 0.14);
  background: #fff;
}

/* ── CTA band: a destination, not another dark stripe ────────────────────── */
.cta-block {
  background:
    radial-gradient(70% 100% at 80% 0%, rgba(0, 173, 238, 0.14), transparent 60%),
    linear-gradient(135deg, #10142a 0%, var(--wb-dark) 55%, #14304a 100%);
}

/* ── Footer ────────────────────────────────────────────────────────────────
   Bespoke layout over the base surface colours: a brand column with the one
   CTA, three link groups from the footer menu (config.toml, parent/child
   entries), and a bottom bar for the legal pages. The base .wb-footer rules
   still supply background, text colour and link hover (teal = action). */
.bb-footer {
  padding: 4.5em 0 0;
  border-top: 1px solid rgba(0, 173, 238, 0.16);
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(0, 173, 238, 0.08), transparent 70%),
    var(--wb-dark);
}
.bb-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 3em 2.4em;
  /* Wider than the page column on desktop (Brad, 2026-09-11): five columns need the room. */
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5em 3.5em;
}

/* Brand column */
.bb-footer-brand { max-width: 24rem; }
.bb-footer-logo { display: inline-block; margin-bottom: 1.4em; }
.bb-footer-logo img { display: block; width: 190px; max-width: 100%; height: auto; }
.bb-footer-wordmark {
  display: inline-block;
  margin-bottom: 1em;
  font-family: var(--wb-font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--wb-white);
}
.bb-footer-tagline {
  margin: 0 0 0.6em;
  font-family: var(--wb-font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--wb-white);
}
.bb-footer-desc { margin: 0 0 1.6em; line-height: 1.65; color: #8f98ad; }
/* Same dark-on-teal as the header CTA (bb.css "Header CTA"). */
.bb-footer .bb-footer-cta,
.bb-footer .bb-footer-cta:hover { color: var(--wb-button-text, #1A1A2E); }
.bb-footer-contact {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: 1.5em 0 0;
}
.bb-footer-contact .wb-icon { color: var(--wb-primary); }
.bb-footer-contact a { color: #d6dcea; }

/* Link groups */
.bb-footer-nav { display: contents; }
.bb-footer-heading {
  margin: 0.35em 0 1.1em;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00ADEE;
}
.bb-footer-group ul { list-style: none; margin: 0; padding: 0; }
.bb-footer-group li { margin: 0 0 0.75em; line-height: 1.45; }
.bb-footer-group a {
  display: inline-block;
  color: #c3cad9;
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}
.bb-footer-group a:hover,
.bb-footer-group a:focus-visible { color: var(--wb-primary); transform: translateX(2px); }
.bb-footer-group a[aria-current="page"] { color: var(--wb-white); font-weight: 600; }

/* Bottom bar */
.bb-footer-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: color-mix(in srgb, var(--wb-dark) 85%, black);
  font-size: 0.82rem;
  color: #8f98ad;
}
.bb-footer-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6em 2em;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.2em 1.5em;
}
.bb-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bb-footer-legal li + li::before { content: "\00B7"; margin: 0 0.7em; opacity: 0.45; }
.bb-footer-bar a { color: #c3cad9; }
.bb-footer-bar a:hover { color: var(--wb-primary); }
.bb-footer-by { margin: 0; }

@media (max-width: 1023px) {
  .bb-footer-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bb-footer-brand { grid-column: 1 / -1; max-width: 30rem; }
}
@media (max-width: 767px) {
  .bb-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .bb-footer { padding-top: 3.5em; }
  .bb-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5em 1.5em; padding-bottom: 2.5em; }
  .bb-footer-brand { grid-column: 1 / -1; }
  /* Clear the fixed Talk to Corvin pill (bottom-left) so the last policy links stay clickable. */
  .bb-footer-bar-inner { flex-direction: column; align-items: flex-start; padding-bottom: 4.25rem; }
  /* Copyright on its own line, then the four legal links as a plain row —
     a middot-separated list wraps with a stray dot at the start of line two. */
  .bb-footer-legal { gap: 0.5em 1.25em; }
  .bb-footer-legal li:first-child { flex-basis: 100%; }
  .bb-footer-legal li + li::before { content: none; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-footer-group a { transition: none; }
  .bb-footer-group a:hover,
  .bb-footer-group a:focus-visible { transform: none; }
}

/* ── Hero secondary CTA: quiet ghost next to the solid teal ──────────────── */
.wb-hero .wb-btn-white {
  background: transparent;
  color: #d6dcea;
  border: 1px solid rgba(214, 220, 234, 0.35);
}
.wb-hero .wb-btn-white:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

/* ── Blog article typography ─────────────────────────────────────────────── */
.blog-post-content { font-size: 1.05rem; }
.blog-post-content p { line-height: 1.75; margin-bottom: 1.35em; }
.blog-post-content h2 {
  margin: 1.8em 0 0.6em;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -0.01em;
}
.blog-post-content > p:first-child {
  font-size: 1.15rem;
  color: var(--wb-text-light);
}

/* ── Nav: six items + CTA need a little less air below 1120px ────────────── */
@media (min-width: 768px) and (max-width: 1120px) {
  .wb-header-nav ul { gap: 1.1em; }
}

/* ── Legal pages — /terms/ /privacy/ /cookies/ /acceptable-use/ ───────────
   Long formal documents inside a bb-prose section: left-aligned, numbered h3
   clauses, bordered tables that scroll sideways on a phone rather than
   forcing the page wide, and an amber mark for every [BLANK] still owed —
   visible on preview so nothing publishes with a bracket left in. */
.bb-legal .wb-inner { text-align: left; }
.bb-legal h3 {
  margin: 2.4rem 0 0.8rem;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}
.bb-legal table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: 0.92rem;
  line-height: 1.5;
}
.bb-legal th,
.bb-legal td {
  border: 1px solid #dde3ea;
  padding: 0.55em 0.8em;
  text-align: left;
  vertical-align: top;
  min-width: 7em;
}
.bb-legal th { background: var(--wb-light); font-weight: 600; }
.bb-legal .bb-blank {
  background: #fff3cd;
  color: #7a5d00;
  padding: 0.05em 0.25em;
  border-radius: 3px;
  font-weight: 600;
}
.bb-legal .bb-draft-flag {
  background: #fff3cd;
  border: 1px solid #e6cf87;
  border-radius: var(--wb-radius-sm);
  color: #7a5d00;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.7em 1em;
  margin-bottom: 2.2rem;
}

/* Respect a user's reduced-motion preference — GSAP/ScrollTrigger animations
   and CSS transitions both stand down, and nothing is hidden waiting to animate. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .wb-fade-in,
  .js .wb-slide-up,
  .js .wb-slide-left,
  .js .wb-slide-right,
  .js .wb-zoom-in { opacity: 1 !important; transform: none !important; }
}

/* Payoff follow-on link on light/white bands: the default hover goes white. */
.wb-white .bb-onb-more a:hover, .wb-light .bb-onb-more a:hover { color: var(--wb-dark); }

/* ── Principles page ───────────────────────────────────────────────────────
   Numbered list of commitments: big blue numeral, title, meaning, proof line.
   Text sits left inside a centred section, so the column re-aligns itself. */
.bb-pr-list { max-width: 820px; margin: 3rem auto 0; text-align: left; display: grid; gap: 0; }
.bb-pr { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0 1.4rem; padding: 1.8rem 0; border-top: 1px solid rgba(26, 26, 46, 0.1); align-items: start; }
.bb-pr:last-child { border-bottom: 1px solid rgba(26, 26, 46, 0.1); }
.bb-pr-num { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 800; line-height: 1; color: #00ADEE; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; padding-top: 0.1rem; }
.bb-pr-title { margin: 0 0 0.45em; font-size: clamp(1.2rem, 1.9vw, 1.45rem); line-height: 1.25; letter-spacing: -0.01em; }
.bb-pr-text { margin: 0; max-width: 58ch; }
.bb-pr-proof { margin: 0.7em 0 0; max-width: 58ch; font-size: 0.9rem; color: var(--wb-text-light); padding-left: 0.9rem; border-left: 2px solid var(--wb-primary); }
.wb-dark .bb-pr { border-color: rgba(255, 255, 255, 0.1); }
.wb-dark .bb-pr-proof { color: #aab6cc; }
.bb-pr-section .bb-kn-note { margin-top: 2.6rem; }
/* Lockdown feature row on the dark band: text left, colours for the surface. */
.bb-pr-lock .bb-feature { margin-top: 2.6rem; text-align: left; }
.bb-pr-lock .bb-feature-text { color: #dfe4ee; }
.bb-pr-lock .bb-feature-title { color: var(--wb-white); }
.bb-pr-lock .bb-onb-payoff { margin-top: 3rem; }
@media (max-width: 600px) {
  .bb-pr { grid-template-columns: 3rem 1fr; gap: 0 1rem; padding: 1.4rem 0; }
}

/* ── "The first month" (/how-it-works/) ─────────────────────────────────────
   Four columns of what tends to happen. Tag = brand blue (a keyword), state
   chip = teal. Same visual language as the Ability week, on the light band. */
.bb-mo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; max-width: 1100px; margin: 3rem auto 0; text-align: left; }
.bb-mo-col { display: flex; flex-direction: column; gap: 0.7rem; align-self: start; transition: opacity 0.4s ease; }
.bb-mo-col.is-off { opacity: 0.35; }
.bb-mo-wk { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wb-text-light); padding-bottom: 0.5rem; border-bottom: 2px solid rgba(26, 26, 46, 0.10); transition: color 0.3s ease, border-color 0.3s ease; }
.bb-mo-col.is-on .bb-mo-wk { color: var(--wb-dark); border-bottom-color: var(--wb-primary); }
.bb-mo-col-you.is-on .bb-mo-wk { border-bottom-color: #00ADEE; }
.bb-mo-item { display: flex; flex-direction: column; gap: 0.5rem; flex: 0 0 auto; padding: 0.95rem 1rem 1rem; border-radius: var(--wb-radius-md); background: var(--wb-white); border: 1px solid rgba(26, 26, 46, 0.08); box-shadow: 0 1px 2px rgba(26, 26, 46, 0.05), 0 8px 24px rgba(26, 26, 46, 0.06); }
.bb-mo-col-you .bb-mo-item { border-color: rgba(0, 173, 238, 0.35); }
.bb-mo-item p { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--wb-text); flex: 1; }
.bb-mo-tag { align-self: flex-start; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0077a8; }
.bb-mo-st { align-self: flex-start; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #0b3835; background: var(--wb-primary); padding: 0.3em 0.75em; border-radius: 999px; white-space: nowrap; }
.bb-mo-st-quiet { color: #0f6f68; background: rgba(78, 205, 196, 0.14); border: 1px solid rgba(78, 205, 196, 0.45); }
.bb-mo-section .bb-kn-note { margin-top: 2.4rem; }
.bb-mo-section .bb-onb-payoff { margin-top: 2.4rem; }
@media (max-width: 1000px) { .bb-mo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; } }
@media (max-width: 560px) { .bb-mo { grid-template-columns: 1fr; max-width: 480px; } }

/* ── "Grows from real questions" (/how-it-works/), dark band ──────────────── */
.bb-gap { max-width: 1120px; margin: 3rem auto 0; text-align: left; }
.bb-gap-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap: 0.6rem; align-items: stretch; }
.bb-gap-node { display: flex; flex-direction: column; padding: 1rem 1.05rem 1.05rem; border-radius: var(--wb-radius-md); background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.10); color: #dfe4ee; transition: border-color 0.3s ease; }
.bb-gap-node.is-on { border-color: rgba(78, 205, 196, 0.45); }
.bb-gap-num { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #0b3835; background: var(--wb-primary); margin-bottom: 0.7rem; }
.bb-gap-node h3 { margin: 0 0 0.4em; font-size: 0.98rem; color: var(--wb-white); letter-spacing: -0.01em; }
.bb-gap-node p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: #c3cad8; }
.bb-gap-n1 p { font-style: italic; color: #dfe4ee; }
.bb-gap-ok { background: rgba(78, 205, 196, 0.10); border-color: rgba(78, 205, 196, 0.35); }
.bb-gap-ok.is-on { border-color: rgba(78, 205, 196, 0.7); }
.bb-gap-ok .bb-gap-num { background: #00ADEE; color: #fff; }
.bb-gap-arrow { display: flex; align-items: center; color: rgba(255, 255, 255, 0.18); transition: color 0.3s ease; }
.bb-gap-arrow .wb-icon { width: 1.4rem; height: 1.4rem; }
.bb-gap-arrow.is-on { color: var(--wb-primary); }
.bb-gap-return { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-top: 1.2rem; }
.bb-gap-return-line { display: block; width: 100%; height: 0; border-top: 2px dashed rgba(78, 205, 196, 0.45); }
.bb-gap-return-text { font-size: 0.82rem; font-weight: 600; color: var(--wb-primary); letter-spacing: 0.02em; }
.bb-gap-section .bb-kn-note { margin-top: 2.4rem; }
@media (max-width: 1000px) {
  .bb-gap-row { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .bb-gap-arrow { justify-content: center; }
  .bb-gap-arrow .wb-icon { transform: rotate(90deg); }
  .bb-gap-return { max-width: 520px; margin: 1.2rem auto 0; }
}

/* ── How it works: onboarding with Alex (bb-ob) ───────────────────────────── */
.bb-ob { max-width: 1040px; margin: 3rem auto 0; text-align: left; }
.bb-ob-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 1.2rem; align-items: start; }
.bb-ob-pane { border-radius: var(--wb-radius-lg); padding: 1.3rem 1.4rem 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.bb-ob-old { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); }
.bb-ob-new { background: linear-gradient(160deg, #202a4d 0%, #1B2240 60%); border: 1px solid rgba(78, 205, 196, 0.45); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(78, 205, 196, 0.10); }
.bb-ob-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
.bb-ob-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9fabc4; }
.bb-ob-new .bb-ob-label { color: var(--wb-primary); }
.bb-ob-clock { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #0b3835; background: var(--wb-primary); padding: 0.3em 0.75em; border-radius: 999px; white-space: nowrap; }
.bb-ob-msg { display: flex; flex-direction: column; gap: 0.2rem; max-width: 88%; }
.bb-ob-msg p { margin: 0; font-size: 0.92rem; line-height: 1.45; padding: 0.65rem 0.9rem; border-radius: 14px; color: #e8ecf5; background: rgba(255, 255, 255, 0.08); }
.bb-ob-who { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8f9bb3; padding: 0 0.3rem; }
.bb-ob-you { align-self: flex-end; align-items: flex-end; }
.bb-ob-you p { background: rgba(255, 255, 255, 0.14); border-bottom-right-radius: 4px; }
.bb-ob-ai p { border-bottom-left-radius: 4px; color: #b7c2d4; font-style: italic; }
.bb-ob-alex p { background: rgba(78, 205, 196, 0.16); border: 1px solid rgba(78, 205, 196, 0.35); border-bottom-left-radius: 4px; }
.bb-ob-alex .bb-ob-who { color: var(--wb-primary); }
.bb-ob-dots { display: inline-flex; gap: 0.3em; align-items: center; height: 1em; }
.bb-ob-dots i { width: 6px; height: 6px; border-radius: 50%; background: #c7d0e0; opacity: 0.5; animation: bb-ob-dot 1.2s ease-in-out infinite; }
.bb-ob-dots i:nth-child(2) { animation-delay: 0.2s; }
.bb-ob-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes bb-ob-dot { 50% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .bb-ob-dots i { animation: none; opacity: 1; } }
.bb-ob-verdict { margin: 0.8rem 0 0; padding-top: 0.8rem; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.86rem; color: #9fabc4; }
.bb-ob-new .bb-ob-verdict { color: #e8ecf5; font-weight: 600; }
.bb-ob-section .bb-kn-note { margin-top: 2.4rem; color: #b7c2d4; }
.bb-ob-section .bb-onb-payoff { margin-top: 2.4rem; }
@media (max-width: 820px) { .bb-ob-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* ── How it works: the knowledge plan (bb-kp) ─────────────────────────────── */
.bb-kp { max-width: 980px; margin: 3rem auto 0; text-align: left; background: linear-gradient(160deg, #202a4d 0%, #1B2240 60%); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--wb-radius-lg); padding: 1.5rem 1.7rem 1.3rem; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 173, 238, 0.08); }
.bb-kp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.bb-kp-title { color: var(--wb-white); font-weight: 600; font-size: 0.95rem; }
.bb-kp-status { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wb-primary); }
.bb-kp-status.is-building { color: #9fabc4; }
.bb-kp-cols, .bb-kp-row { display: grid; grid-template-columns: 1.25fr 0.9fr 1.35fr 7.2rem; gap: 0.6rem 1rem; align-items: center; }
.bb-kp-cols { padding: 0 0 0.6rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8f9bb3; border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
.bb-kp-row { padding: 0.75rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.9rem; transition: opacity 0.4s ease; }
.bb-kp-row:first-of-type { border-top: 0; }
.bb-kp-row.is-off { opacity: 0.18; }
.bb-kp-area { color: #e8ecf5; font-weight: 600; }
.bb-kp-who { color: #aab6cc; }
.bb-kp-where { color: #9fabc4; }
.bb-kp-tag { justify-self: start; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.25em 0.65em; border-radius: 999px; white-space: nowrap; }
.bb-kp-tag.is-head { background: rgba(248, 113, 113, 0.16); color: #F8A8A8; }
.bb-kp-tag.is-scattered, .bb-kp-tag.is-partial { background: rgba(251, 191, 36, 0.14); color: #FCD34D; }
.bb-kp-tag.is-stale { background: rgba(148, 163, 184, 0.14); color: #B7C2D4; }
.bb-kp-tag.is-doc { background: rgba(78, 205, 196, 0.16); color: var(--wb-primary); }
.bb-kp-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.10); }
.bb-kp-foot span { font-size: 0.75rem; color: #9fabc4; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 0.3em 0.75em; }
.bb-kp-foot span:last-child { color: #F8A8A8; border-color: rgba(248, 113, 113, 0.35); }
.bb-kp-section .bb-kn-note { margin-top: 2.4rem; }
.bb-kp-section .bb-onb-payoff { margin-top: 2.4rem; }
@media (max-width: 720px) {
  .bb-kp { padding: 1.2rem 1.1rem 1rem; }
  .bb-kp-cols { display: none; }
  .bb-kp-row { grid-template-columns: 1fr auto; gap: 0.25rem 0.8rem; }
  .bb-kp-area { grid-column: 1; }
  .bb-kp-tag { grid-column: 2; grid-row: 1; }
  .bb-kp-who, .bb-kp-where { grid-column: 1 / -1; font-size: 0.82rem; }
  .bb-kp-who::before { content: "Held by "; color: #6f7c96; }
  .bb-kp-where::before { content: "Lives in "; color: #6f7c96; }
}

/* ── How it works: it spreads person to person (bb-ts) ────────────────────── */
.bb-ts { max-width: 900px; margin: 3rem auto 0; }
.bb-ts-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem 0.8rem; }
.bb-ts-p { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; transition: opacity 0.4s ease; }
.bb-ts-p.is-off { opacity: 0.28; }
.bb-ts-av { position: relative; width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); border: 2px solid rgba(255, 255, 255, 0.14); transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; overflow: hidden; }
.bb-ts-av::before { content: ""; position: absolute; left: 50%; top: 22%; width: 34%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #7f8ba6; transition: background 0.4s ease; }
.bb-ts-av::after { content: ""; position: absolute; left: 50%; top: 62%; width: 70%; aspect-ratio: 2 / 1.1; transform: translateX(-50%); border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #7f8ba6; transition: background 0.4s ease; }
.bb-ts-p.is-on .bb-ts-av { background: rgba(78, 205, 196, 0.16); border-color: var(--wb-primary); box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.12); }
.bb-ts-p.is-on .bb-ts-av::before, .bb-ts-p.is-on .bb-ts-av::after { background: var(--wb-primary); }
.bb-ts-p[data-wave="1"].is-on .bb-ts-av { border-color: #00ADEE; box-shadow: 0 0 0 4px rgba(0, 173, 238, 0.16); }
.bb-ts-p[data-wave="1"].is-on .bb-ts-av::before, .bb-ts-p[data-wave="1"].is-on .bb-ts-av::after { background: #00ADEE; }
.bb-ts-role { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: #9fabc4; }
.bb-ts-p.is-on .bb-ts-role { color: #e8ecf5; }
.bb-ts-caps { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 2rem; }
.bb-ts-cap { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: #9fabc4; transition: color 0.4s ease, opacity 0.4s ease; }
.bb-ts-cap b { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: 0.7rem; font-weight: 700; color: #0b3835; background: var(--wb-primary); }
.bb-ts-cap[data-wave="1"] b { color: var(--wb-white); background: #00ADEE; }
.bb-ts-cap.is-off { opacity: 0.35; }
.bb-ts-cap.is-on { color: #e8ecf5; }
.bb-ts-section .bb-kn-tiles { margin-top: 2.8rem; }
.bb-ts-section .bb-onb-payoff { margin-top: 2.6rem; }
@media (max-width: 720px) { .bb-ts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bb-ts-av { width: 50px; height: 50px; } }
@media (max-width: 440px) { .bb-ts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── New business: Business Brain becomes your team (bb-tm) ───────────────── */
.bb-tm { max-width: 900px; margin: 3rem auto 0; text-align: left; background: linear-gradient(160deg, #202a4d 0%, #1B2240 60%); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--wb-radius-lg); padding: 1.5rem 1.7rem 1.3rem; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(78, 205, 196, 0.08); }
.bb-tm-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
.bb-tm-title { color: var(--wb-white); font-weight: 600; font-size: 0.95rem; }
.bb-tm-status { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wb-primary); }
.bb-tm-row { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 1rem; align-items: center; padding: 0.8rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06); transition: opacity 0.4s ease; }
.bb-tm-row.is-off { opacity: 0.18; }
.bb-tm-role { color: #e8ecf5; font-weight: 600; font-size: 0.92rem; }
.bb-tm-job { color: #aab6cc; font-size: 0.9rem; }
.bb-tm-st { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #0b3835; background: var(--wb-primary); padding: 0.3em 0.75em; border-radius: 999px; white-space: nowrap; }
.bb-tm-st-quiet { color: var(--wb-primary); background: rgba(78, 205, 196, 0.14); border: 1px solid rgba(78, 205, 196, 0.45); }
.bb-tm-foot { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.8rem; padding-top: 1rem; border-top: 1px solid rgba(0, 173, 238, 0.35); color: #e8ecf5; font-size: 0.9rem; transition: opacity 0.4s ease; }
.bb-tm-foot.is-off { opacity: 0; }
.bb-tm-you { flex: none; display: inline-grid; place-items: center; min-width: 7.5rem; padding: 0.35em 0.75em; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wb-white); background: #00ADEE; }
.bb-tm-section .bb-kn-note { margin-top: 2.4rem; color: #b7c2d4; }
.bb-tm-section .bb-onb-payoff { margin-top: 2.4rem; }
@media (max-width: 640px) {
  .bb-tm { padding: 1.2rem 1.1rem 1rem; }
  .bb-tm-row { grid-template-columns: 1fr auto; gap: 0.2rem 0.8rem; }
  .bb-tm-job { grid-column: 1 / -1; font-size: 0.84rem; }
  .bb-tm-foot { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ── Partners: your client book (bb-pb) ───────────────────────────────────── */
.bb-pb { max-width: 900px; margin: 3rem auto 0; text-align: left; background: linear-gradient(160deg, #202a4d 0%, #1B2240 60%); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--wb-radius-lg); padding: 1.5rem 1.7rem 1.3rem; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(78, 205, 196, 0.08); }
.bb-pb-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
.bb-pb-title { color: var(--wb-white); font-weight: 600; font-size: 0.95rem; }
.bb-pb-status { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wb-primary); font-variant-numeric: tabular-nums; }
.bb-pb-status b { font-weight: 700; }
.bb-pb-row { display: grid; grid-template-columns: 11rem 1fr auto; gap: 1rem; align-items: center; padding: 0.8rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06); transition: opacity 0.4s ease; }
.bb-pb-row.is-off { opacity: 0.22; }
.bb-pb-client { color: #e8ecf5; font-weight: 600; font-size: 0.92rem; }
.bb-pb-note { color: #aab6cc; font-size: 0.88rem; }
.bb-pb-st { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #0b3835; background: var(--wb-primary); padding: 0.3em 0.75em; border-radius: 999px; white-space: nowrap; transition: background 0.4s ease, color 0.4s ease; }
.bb-pb-row.is-off .bb-pb-st { background: rgba(255, 255, 255, 0.08); color: #9fabc4; }
.bb-pb-foot { display: flex; align-items: center; gap: 1rem; margin-top: 0.8rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.10); }
.bb-pb-line { flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.bb-pb-line i { display: block; height: 100%; width: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--wb-primary), #00ADEE); transform-origin: left center; }
.bb-pb-foot-text { flex: none; color: #e8ecf5; font-size: 0.86rem; font-weight: 600; }
.bb-pb-section .bb-kn-note { margin-top: 2.4rem; color: #b7c2d4; }
.bb-pb-section .bb-onb-payoff { margin-top: 2.4rem; }
@media (max-width: 640px) {
  .bb-pb { padding: 1.2rem 1.1rem 1rem; }
  .bb-pb-row { grid-template-columns: 1fr auto; gap: 0.2rem 0.8rem; }
  .bb-pb-note { grid-column: 1 / -1; font-size: 0.82rem; }
  .bb-pb-foot { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .bb-pb-foot-text { text-align: center; }
}

/* ── Alex: the conversation page (bb-ax) ──────────────────────────────────── */
.bb-ax { max-width: 760px; margin: 0 auto; text-align: left; }
.bb-ax-panel { background: linear-gradient(160deg, #202a4d 0%, #1B2240 60%); border: 1px solid rgba(78, 205, 196, 0.45); border-radius: var(--wb-radius-lg); padding: 1.3rem 1.4rem 1.2rem; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(78, 205, 196, 0.10); }
.bb-ax-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.bb-ax-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wb-primary); }
.bb-ax-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #0b3835; background: var(--wb-primary); padding: 0.3em 0.75em; border-radius: 999px; white-space: nowrap; }
.bb-ax-log { display: flex; flex-direction: column; gap: 0.8rem; padding: 1rem 0; }
.bb-ax-msg { display: flex; flex-direction: column; gap: 0.2rem; max-width: 88%; }
.bb-ax-msg p { margin: 0; font-size: 0.97rem; line-height: 1.5; padding: 0.7rem 0.95rem; border-radius: 14px; color: #e8ecf5; background: rgba(255, 255, 255, 0.08); }
.bb-ax-who { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8f9bb3; padding: 0 0.3rem; }
.bb-ax-alex .bb-ax-who { color: var(--wb-primary); }
.bb-ax-alex p { background: rgba(78, 205, 196, 0.16); border: 1px solid rgba(78, 205, 196, 0.35); border-bottom-left-radius: 4px; }
.bb-ax-you { align-self: flex-end; align-items: flex-end; }
.bb-ax-you p { background: rgba(255, 255, 255, 0.14); border-bottom-right-radius: 4px; }
.bb-ax-form { display: flex; gap: 0.6rem; align-items: flex-end; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.bb-ax-form textarea { flex: 1; resize: vertical; min-height: 2.8rem; padding: 0.7rem 0.9rem; border-radius: var(--wb-radius-md); border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #e8ecf5; font: inherit; font-size: 0.97rem; line-height: 1.45; }
.bb-ax-form textarea::placeholder { color: #7f8ba6; }
.bb-ax-form textarea:focus { outline: 2px solid var(--wb-primary); outline-offset: 1px; }
.bb-ax-form button { flex: none; }
.bb-ax-form[hidden] { display: none; }
.bb-ax-summary { margin-top: 1rem; padding: 1.1rem 1.2rem; border-radius: var(--wb-radius-md); background: rgba(0, 173, 238, 0.08); border: 1px solid rgba(0, 173, 238, 0.35); color: #e8ecf5; }
.bb-ax-sum-eyebrow { margin: 0 0 0.5rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #00ADEE; }
.bb-ax-sum-head { margin: 0 0 0.9rem; font-size: 1.12rem; font-weight: 600; line-height: 1.4; color: var(--wb-white); }
.bb-ax-sum-label { margin: 0.9rem 0 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9fabc4; }
.bb-ax-summary ul, .bb-ax-summary ol { margin: 0; padding-left: 1.3em; font-size: 0.95rem; line-height: 1.5; }
.bb-ax-summary li { margin-bottom: 0.4em; }
.bb-ax-sum-three strong { color: var(--wb-white); }
.bb-ax-sum-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.bb-ax-alt { color: #e8ecf5; border-color: rgba(255, 255, 255, 0.35); }
.bb-ax-alt:hover { border-color: var(--wb-primary); color: var(--wb-primary); }
.bb-ax-correct { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
.bb-ax-correct textarea { width: 100%; padding: 0.7rem 0.9rem; border-radius: var(--wb-radius-md); border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #e8ecf5; font: inherit; font-size: 0.95rem; }
.bb-ax-correct button { align-self: flex-start; }
.bb-ax-state { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--wb-radius-md); background: rgba(255, 255, 255, 0.05); color: #dfe4ee; font-size: 0.97rem; line-height: 1.5; }
.bb-ax-state p { margin: 0 0 0.8rem; }
.bb-ax-privacy { max-width: 60ch; margin: 1.4rem auto 0; text-align: center; font-size: 0.85rem; line-height: 1.55; color: #9fabc4; }
.bb-ax-section > .wb-inner { padding-top: 2.5rem; padding-bottom: 3rem; }
.wb-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The start form on /getting-started/ */
.bb-ax-start { margin-top: 1.2em; }
.bb-ax-fallback { margin-top: 2rem; }
.bb-ax-fallback > summary { cursor: pointer; font-weight: 600; color: var(--wb-text-light); }
.bb-ax-fallback > summary:hover { color: var(--wb-dark); }
.bb-ax-fallback .bb-form { margin-top: 1em; }
@media (max-width: 560px) { .bb-ax-panel { padding: 1rem 0.9rem; } .bb-ax-form { flex-direction: column; align-items: stretch; } .bb-ax-log { max-height: none; } }

/* ── Partner application form ─────────────────────────────────────────────── */
.bb-form-wrap-wide { max-width: 720px; }
.bb-apply-set { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
.bb-apply-set > legend { padding: 0; margin: 0 0 0.8rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wb-primary); }
.bb-apply-set + .bb-apply-set { padding-top: 1.4rem; border-top: 1px solid rgba(26, 26, 46, 0.08); }
.bb-apply-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.bb-apply-terms label { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 400; font-size: 0.95rem; line-height: 1.5; cursor: pointer; }
.bb-apply-terms input { margin-top: 0.3em; flex: none; width: 1.1em; height: 1.1em; }
.bb-apply > .bb-field-help { margin-top: 0.9rem; }
@media (max-width: 560px) { .bb-apply-row { grid-template-columns: 1fr; } }

/* ── Pricing: the price card ─────────────────────────────────────────────── */
.bb-price { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2rem; align-items: center; max-width: 860px; margin: 2.6rem auto 0; text-align: left; }
.bb-price-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 1.8rem 2rem; border-radius: var(--wb-radius-lg); background: linear-gradient(160deg, #202a4d 0%, #1B2240 60%); border: 1px solid rgba(78, 205, 196, 0.45); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25), 0 10px 30px rgba(78, 205, 196, 0.10); color: #e8ecf5; }
.bb-price-from { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wb-primary); }
.bb-price-amount { font-size: clamp(3rem, 6vw, 4.4rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--wb-white); font-variant-numeric: tabular-nums; }
.bb-price-per { font-size: 1rem; color: #b7c2d4; }
.bb-price-cur { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; font-size: 0.85rem; color: #9fabc4; }
.bb-price-cur select { padding: 0.45em 0.7em; border-radius: var(--wb-radius-sm); border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: #e8ecf5; font: inherit; font-size: 0.9rem; color-scheme: dark; }
/* The open list is drawn by the browser: without this it's a white panel with the
   inherited light text (Brad, 2026-09-10). */
.bb-price-cur select option { color: #e8ecf5; background: #1B2240; }
.bb-price-where { margin-top: 0.4rem; font-size: 0.82rem; color: #9fabc4; }
.bb-price-points { margin: 0; padding-left: 1.2em; font-size: 1.02rem; line-height: 1.55; color: var(--wb-text); }
.bb-price-points li { margin-bottom: 0.55em; }
@media (max-width: 720px) { .bb-price { grid-template-columns: 1fr; gap: 1.4rem; } .bb-price-card { align-items: center; text-align: center; } .bb-price-cur { justify-content: center; } }

/* ── Pricing: locations ─────────────────────────────────────────────────── */
.bb-loc { max-width: 1040px; margin: 2.6rem auto 0; text-align: left; }
.bb-loc-region + .bb-loc-region { margin-top: 1.8rem; }
.bb-loc-region > h3 { margin: 0 0 0.7rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9fabc4; }
.bb-loc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.bb-loc-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.95rem; border-radius: var(--wb-radius-md); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); color: #e8ecf5; text-align: left; cursor: pointer; font: inherit; transition: border-color 0.2s ease, background 0.2s ease; }
.bb-loc-item:hover { border-color: var(--wb-primary); background: rgba(78, 205, 196, 0.08); }
.bb-loc-item.is-cur { border-color: rgba(78, 205, 196, 0.45); }
.bb-loc-item.is-on { border-color: var(--wb-primary); background: rgba(78, 205, 196, 0.14); box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.15); }
.bb-loc-flag { font-size: 1.7rem; line-height: 1; flex: none; width: 2.1rem; text-align: center; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; }
.bb-loc-cc { display: none; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(0, 173, 238, 0.18); color: #7fd6f7; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; line-height: 2.1rem; text-align: center; }
.bb-noflags .bb-loc-flag { display: none; }
.bb-noflags .bb-loc-cc { display: inline-block; }
.bb-loc-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.bb-loc-city { font-weight: 600; font-size: 0.95rem; }
.bb-loc-country { font-size: 0.8rem; color: #9fabc4; }
.bb-loc-section .bb-kn-note { margin-top: 2.4rem; color: #b7c2d4; }
@media (max-width: 1000px) { .bb-loc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .bb-loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .bb-loc-grid { grid-template-columns: 1fr; } }


/* ── Listen instead: Corvin reads the page (bottom-left player) ──────────── */
.bb-qr-bar { display: flex; justify-content: center; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.bb-listen-pill { cursor: pointer; font: inherit; }
.bb-listen-pill > .wb-icon { color: var(--wb-primary); }
.bb-listen-pill[aria-expanded="true"] { border-color: var(--wb-primary); background: rgba(78, 205, 196, 0.12); }
.bb-listen { position: fixed; left: 1rem; bottom: 1rem; z-index: 60; width: 320px; max-width: calc(100vw - 2rem); border-radius: var(--wb-radius-lg); overflow: hidden; background: #1B2240; border: 1px solid rgba(78, 205, 196, 0.45); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(78, 205, 196, 0.12); }
.bb-listen[hidden] { display: none; }
.bb-listen-head { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0.5rem 0.55rem 0.9rem; }
.bb-listen-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wb-primary); }
.bb-listen-close { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #e8ecf5; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.bb-listen-close:hover { background: rgba(255, 255, 255, 0.16); }
/* Soundwave player (replaces the video, 2026-09-11) */
.bb-listen-wave { display: block; width: 100%; height: 100px; background: #1a1a2e; }
.bb-listen-ctl { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem 0.2rem; }
.bb-listen-play { position: relative; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: var(--wb-primary); cursor: pointer; box-shadow: 0 6px 18px rgba(78, 205, 196, 0.28); }
.bb-listen-play:hover { background: var(--wb-primary-hover); }
.bb-listen-ico-play, .bb-listen-ico-pause { position: absolute; inset: 0; margin: auto; }
.bb-listen-ico-play { width: 0; height: 0; border-left: 0.75rem solid #0b3835; border-top: 0.45rem solid transparent; border-bottom: 0.45rem solid transparent; transform: translateX(2px); }
.bb-listen-ico-pause { width: 0.7rem; height: 0.8rem; border-left: 0.22rem solid #0b3835; border-right: 0.22rem solid #0b3835; display: none; }
.bb-listen.is-playing .bb-listen-ico-play { display: none; }
.bb-listen.is-playing .bb-listen-ico-pause { display: block; }
.bb-listen-track { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); cursor: pointer; overflow: hidden; }
.bb-listen-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--wb-primary), #00ADEE); }
.bb-listen-time { flex: none; font-size: 0.74rem; color: #9fabc4; font-variant-numeric: tabular-nums; }
.bb-listen-note { margin: 0; padding: 0.55rem 0.9rem 0.7rem; font-size: 0.74rem; line-height: 1.45; color: #9fabc4; }
.bb-listen-note a { color: var(--wb-primary); text-decoration: none; font-weight: 600; }
@media (max-width: 560px) { .bb-listen { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; width: auto; max-width: none; } }

/* ── Blog: the day's energy split figure (sustainable AI post) ─────────── */
.bb-post-split { margin: 2rem 0; padding: 1.3rem 1.4rem 1rem; border-radius: var(--wb-radius-lg); background: var(--wb-light); border: 1px solid rgba(26, 26, 46, 0.08); }
.bb-post-split-row { display: grid; grid-template-columns: 9rem 1fr; grid-template-rows: auto auto; column-gap: 1rem; align-items: baseline; margin-bottom: 0.9rem; }
.bb-post-split-n { grid-row: 1 / 3; white-space: nowrap; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--wb-dark); font-variant-numeric: tabular-nums; }
.bb-post-split-l { font-size: 0.9rem; color: var(--wb-text-light); }
.bb-post-split-bar { height: 10px; width: var(--w); max-width: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--wb-primary), #00ADEE); margin-top: 0.35rem; }
.bb-post-split-bar-wait { background: rgba(26, 26, 46, 0.22); }
.bb-post-split figcaption { margin-top: 0.4rem; font-size: 0.82rem; color: var(--wb-text-light); }
@media (max-width: 480px) { .bb-post-split-row { grid-template-columns: 1fr; } .bb-post-split-n { grid-row: auto; } }

/* ── Homepage: How we see things (writing, two across) ───────────────────── */
.bb-writing > .wb-inner { text-align: center; }
.bb-writing-h2 { margin: 0.2em 0 1.6em; font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: -0.02em; }
.bb-writing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; text-align: left; }
.bb-writing-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--wb-radius-lg); background: var(--wb-white); border: 1px solid rgba(26, 26, 46, 0.08); box-shadow: 0 1px 2px rgba(26, 26, 46, 0.05), 0 12px 32px rgba(26, 26, 46, 0.07); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.bb-writing-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(26, 26, 46, 0.06), 0 22px 44px rgba(26, 26, 46, 0.12); }
.bb-writing-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wb-dark); }
.bb-writing-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-writing-body { padding: 1.3rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; }
.bb-writing-meta { margin: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wb-text-light); }
.bb-writing-meta span { color: var(--wb-primary); }
.bb-writing-title { margin: 0; font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.015em; }
.bb-writing-title a { color: var(--wb-dark); text-decoration: none; }
.bb-writing-title a:hover { color: var(--wb-primary); }
.bb-writing-desc { margin: 0; color: var(--wb-text); line-height: 1.55; }
.bb-writing-link { margin-top: 0.4rem; font-weight: 600; color: var(--wb-primary); text-decoration: none; }
.bb-writing-more { margin: 2rem 0 0; }
.bb-writing-more a { font-weight: 600; color: var(--wb-primary); text-decoration: none; }
/* One post: a wide feature row, image left. */
.bb-writing-grid > .bb-writing-card:only-child { grid-column: 1 / -1; flex-direction: row; }
.bb-writing-grid > .bb-writing-card:only-child .bb-writing-img { flex: 0 0 52%; aspect-ratio: auto; }
.bb-writing-grid > .bb-writing-card:only-child .bb-writing-body { justify-content: center; padding: 2rem 2.2rem; }
.bb-writing-grid > .bb-writing-card:only-child .bb-writing-title { font-size: 1.7rem; }
@media (max-width: 820px) { .bb-writing-grid { grid-template-columns: 1fr; } .bb-writing-grid > .bb-writing-card:only-child { flex-direction: column; } .bb-writing-grid > .bb-writing-card:only-child .bb-writing-img { flex: none; aspect-ratio: 16 / 9; } }

/* ── Blog post images ─────────────────────────────────────────────────────── */
.bb-post-img { margin: 2rem 0; }
.bb-post-img img { display: block; width: 100%; height: auto; border-radius: var(--wb-radius-lg); }
.bb-post-img figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--wb-text-light); }

/* ── Voice: the dictation panel scene (bb-vp) ─────────────────────────────── */
.bb-vp { max-width: 960px; margin: 3rem auto 0; text-align: left; }
.bb-vp-screen { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 380px; border-radius: var(--wb-radius-lg); overflow: hidden; background: #0f1530; border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
.bb-vp-app { padding: 2rem 2rem 2rem 2.2rem; display: flex; flex-direction: column; gap: 0.9rem; }
.bb-vp-app-line { display: block; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); }
.bb-vp-app-line.w60 { width: 60%; } .bb-vp-app-line.w40 { width: 40%; } .bb-vp-app-line.w80 { width: 80%; } .bb-vp-app-line.w30 { width: 30%; }
.bb-vp-app-field { margin-top: 1rem; padding: 0.8rem 1rem; border-radius: var(--wb-radius-md); border: 1px dashed rgba(78, 205, 196, 0.45); color: #9fabc4; font-size: 0.85rem; }
.bb-vp-tab { position: absolute; right: 340px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; padding: 0.7em 0.35em; border-radius: 0 6px 6px 0; background: var(--wb-primary); color: #0b3835; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.bb-vp-panel { background: linear-gradient(160deg, #202a4d 0%, #1B2240 60%); border-left: 1px solid rgba(78, 205, 196, 0.35); padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.bb-vp-head { display: flex; align-items: center; gap: 0.6rem; }
.bb-vp-mic { position: relative; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(78, 205, 196, 0.16); border: 1px solid rgba(78, 205, 196, 0.5); flex: none; }
.bb-vp-mic i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(78, 205, 196, 0.6); animation: bb-vp-pulse 1.8s ease-out infinite; }
@keyframes bb-vp-pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bb-vp-mic i { animation: none; } }
.bb-vp-title { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wb-primary); }
.bb-vp-chip { margin-left: auto; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3em 0.7em; border-radius: 999px; color: #0b3835; background: var(--wb-primary); white-space: nowrap; transition: opacity 0.3s ease; }
.bb-vp-chip.is-off { opacity: 0; }
.bb-vp-chip.is-raw { color: #9fabc4; background: rgba(255, 255, 255, 0.08); }
.bb-vp-text { min-height: 7.5rem; padding: 0.9rem 1rem; border-radius: var(--wb-radius-md); background: rgba(255, 255, 255, 0.06); color: #e8ecf5; font-size: 0.95rem; line-height: 1.55; }
.bb-vp-raw { display: none; color: #b7c2d4; }
.bb-vp-raw span { opacity: 1; }
.bb-vp-raw.is-live { display: block; }
.bb-vp-raw.is-live span { opacity: 0; transition: opacity 0.12s ease; }
.bb-vp-raw.is-live span.is-on { opacity: 1; }
.bb-vp-tidy { display: block; }
.bb-vp-tidy.is-off { display: none; }
.bb-vp-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bb-vp-btn { font-size: 0.78rem; font-weight: 600; padding: 0.45em 0.9em; border-radius: var(--wb-radius-sm); color: #c3cad9; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.bb-vp-btn-primary { color: #0b3835; background: var(--wb-primary); border-color: var(--wb-primary); }
.bb-vp-btn-clean.is-hot { color: #0b3835; background: #00ADEE; border-color: #00ADEE; }
.bb-vp-note { margin: 1.4rem auto 0; max-width: 46ch; text-align: center; font-size: 1.02rem; font-weight: 600; color: #e8ecf5; transition: opacity 0.4s ease; }
.bb-vp-note.is-off { opacity: 0; }
.bb-vp-section .bb-kn-note { margin-top: 2.4rem; color: #b7c2d4; }
.bb-vp-section .bb-onb-payoff { margin-top: 2.4rem; }
@media (max-width: 760px) { .bb-vp-screen { grid-template-columns: 1fr; } .bb-vp-app { display: none; } .bb-vp-tab { display: none; } .bb-vp-panel { border-left: 0; } }

/* ── Insights: how an answer is made (bb-ia) ──────────────────────────────── */
.bb-ia { max-width: 860px; margin: 3rem auto 0; text-align: left; display: flex; flex-direction: column; gap: 0.9rem; }
.bb-ia-who { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8f9bb3; margin-bottom: 0.3rem; }
.bb-ia-q, .bb-ia-engine, .bb-ia-chart, .bb-ia-f, .bb-ia-action { border-radius: var(--wb-radius-md); transition: opacity 0.4s ease, transform 0.4s ease; }
.bb-ia-q { align-self: flex-end; max-width: 78%; padding: 0.9rem 1.1rem; background: rgba(255, 255, 255, 0.10); border-bottom-right-radius: 4px; }
.bb-ia-q p, .bb-ia-engine p, .bb-ia-f p, .bb-ia-action p { margin: 0; color: #e8ecf5; font-size: 0.97rem; line-height: 1.5; }
.bb-ia-engine { padding: 0.9rem 1.1rem; background: rgba(0, 173, 238, 0.08); border: 1px solid rgba(0, 173, 238, 0.35); }
.bb-ia-engine .bb-ia-who { color: #7fd6f7; }
.bb-ia-bar { display: block; height: 6px; margin-top: 0.7rem; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.bb-ia-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #00ADEE, var(--wb-primary)); transform-origin: left; }
.bb-ia-chart { padding: 1rem 1.1rem 0.8rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); }
.bb-ia-bars { display: flex; align-items: flex-end; gap: 0.45rem; height: 120px; }
.bb-ia-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: rgba(255, 255, 255, 0.22); transform-origin: bottom; }
.bb-ia-bars i.is-trade { background: var(--wb-primary); }
.bb-ia-chart-cap { display: block; margin-top: 0.6rem; font-size: 0.78rem; color: #9fabc4; }
.bb-ia-findings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.bb-ia-f { padding: 0.9rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); }
.bb-ia-f p { font-size: 0.9rem; }
.bb-ia-tag { display: inline-block; margin-bottom: 0.5rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25em 0.65em; border-radius: 999px; }
.bb-ia-tag.is-fact { color: #0b3835; background: var(--wb-primary); }
.bb-ia-tag.is-proj { color: #7fd6f7; background: rgba(0, 173, 238, 0.16); border: 1px solid rgba(0, 173, 238, 0.4); }
.bb-ia-tag.is-judg { color: #FCD34D; background: rgba(251, 191, 36, 0.14); border: 1px solid rgba(251, 191, 36, 0.4); }
.bb-ia-tag.is-act { color: var(--wb-white); background: #00ADEE; }
.bb-ia-action { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; padding: 0.9rem 1.1rem; background: rgba(0, 173, 238, 0.08); border: 1px solid rgba(0, 173, 238, 0.35); }
.bb-ia-action .bb-ia-tag { margin: 0; }
.bb-ia-action p { flex: 1; min-width: 12rem; }
.bb-ia-st { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #0b3835; background: var(--wb-primary); padding: 0.3em 0.75em; border-radius: 999px; white-space: nowrap; }
.bb-ia .is-off { opacity: 0; transform: translateY(10px); }
.bb-ia-section .bb-kn-note { margin-top: 2.4rem; color: #b7c2d4; max-width: 66ch; }
.bb-ia-section .bb-onb-payoff { margin-top: 2.4rem; }
@media (max-width: 700px) { .bb-ia-findings { grid-template-columns: 1fr; } .bb-ia-q { max-width: 100%; } }

/* ── Workspace: Mira builds a Worker (bb-mb) ──────────────────────────────── */
.bb-mb { max-width: 820px; margin: 3rem auto 0; text-align: left; display: flex; flex-direction: column; gap: 0.9rem; }
.bb-mb-who { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8f9bb3; margin-bottom: 0.35rem; }
.bb-mb-say { align-self: flex-end; max-width: 80%; padding: 0.9rem 1.1rem; border-radius: var(--wb-radius-md); border-bottom-right-radius: 4px; background: rgba(255, 255, 255, 0.10); transition: opacity 0.4s ease, transform 0.4s ease; }
.bb-mb-say p, .bb-mb-row p, .bb-mb-worker p { margin: 0; color: #e8ecf5; font-size: 0.95rem; line-height: 1.5; }
.bb-mb-build { padding: 1rem 1.2rem 0.6rem; border-radius: var(--wb-radius-lg); background: linear-gradient(160deg, #202a4d 0%, #1B2240 60%); border: 1px solid rgba(78, 205, 196, 0.35); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); transition: opacity 0.4s ease, transform 0.4s ease; }
.bb-mb-head { display: flex; justify-content: space-between; align-items: baseline; }
.bb-mb-head .bb-mb-who { color: var(--wb-primary); margin: 0; }
.bb-mb-status { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wb-primary); }
.bb-mb-status.is-building { color: #9fabc4; }
.bb-mb-row { display: grid; grid-template-columns: 7rem 1fr auto; gap: 0.9rem; align-items: center; padding: 0.7rem 0; border-top: 1px solid rgba(255, 255, 255, 0.07); transition: opacity 0.4s ease; }
.bb-mb-row.is-off { opacity: 0.18; }
.bb-mb-row p { font-size: 0.9rem; color: #dfe4ee; }
.bb-mb-tag { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7fd6f7; }
.bb-mb-st { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wb-primary); background: rgba(78, 205, 196, 0.14); border: 1px solid rgba(78, 205, 196, 0.45); padding: 0.28em 0.7em; border-radius: 999px; white-space: nowrap; }
.bb-mb-worker { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.9rem 1.2rem; border-radius: var(--wb-radius-md); background: rgba(0, 173, 238, 0.08); border: 1px solid rgba(0, 173, 238, 0.4); transition: opacity 0.4s ease, transform 0.4s ease; }
.bb-mb-worker p { flex: 1; min-width: 14rem; font-size: 0.92rem; }
.bb-mb-tag-w { color: var(--wb-white); background: #00ADEE; padding: 0.3em 0.75em; border-radius: 999px; }
.bb-mb-st-you { color: #0b3835; background: var(--wb-primary); border-color: var(--wb-primary); }
.bb-mb .is-off.bb-mb-say, .bb-mb .is-off.bb-mb-build, .bb-mb .is-off.bb-mb-worker { opacity: 0; transform: translateY(10px); }
.bb-mb-section .bb-kn-note { margin-top: 2.4rem; color: #b7c2d4; }
.bb-mb-section .bb-onb-payoff { margin-top: 2.4rem; }
@media (max-width: 640px) { .bb-mb-say { max-width: 100%; } .bb-mb-row { grid-template-columns: 1fr auto; } .bb-mb-row p { grid-column: 1 / -1; } }

/* Two big points side by side (walkthrough "two other doors"). */
.bb-six-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
.bb-six-grid-2 .bb-six-line a { color: var(--wb-primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (max-width: 600px) { .bb-six-grid-2 { grid-template-columns: 1fr; } }

/* ── Cost calculator: three fields, and the Business Brain comparison ─────── */
.bb-calc-fields-3 { grid-template-columns: 1fr 1.2fr 0.6fr; }
@media (max-width: 620px) { .bb-calc-fields-3 { grid-template-columns: 1fr; } }
.bb-calc-field select { width: 100%; padding: 0.75em; border: 1px solid #d5d9e0; border-radius: var(--wb-radius-sm); background: var(--wb-white); font: inherit; font-size: 1rem; }
.bb-calc-vs { margin: 1.4rem 0; padding: 1rem 1.1rem; border-radius: var(--wb-radius-md); background: rgba(0, 173, 238, 0.08); border: 1px solid rgba(0, 173, 238, 0.35); text-align: center; }
.bb-calc-vs-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.35rem 0.6rem; }
.bb-calc-vs-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #7fd6f7; }
.bb-calc-vs-row strong { font-size: 1.6rem; letter-spacing: -0.02em; color: var(--wb-white); font-variant-numeric: tabular-nums; }
.bb-calc-vs-sub { font-size: 0.82rem; color: #9fabc4; }
.bb-calc-ratio { margin: 0.6rem 0 0; font-size: 1rem; font-weight: 600; color: #e8ecf5; }
.bb-calc-section .bb-calc { margin-top: 2.4rem; text-align: left; }

/* ── Jump right in: the two-route choice ──────────────────────────────────── */
.bb-jump-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 1.2rem 0 0.9rem; }
.bb-jump-tab { padding: 0.85rem 1rem; border-radius: var(--wb-radius-md); border: 1px solid rgba(26, 26, 46, 0.18); background: var(--wb-white); color: var(--wb-dark); font: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }
.bb-jump-tab:hover { border-color: var(--wb-primary); }
.bb-jump-tab.is-on { border-color: var(--wb-primary); background: rgba(78, 205, 196, 0.12); box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.16); }
.bb-jump-help { margin: 0 0 0.6rem; color: var(--wb-text-light); line-height: 1.55; }
@media (max-width: 560px) { .bb-jump-choice { grid-template-columns: 1fr; } }

/* ── Talk to Corvin: site-wide bottom-left dock ───────────────────────────── */
.bb-talk-pill { position: fixed; left: 1rem; bottom: 1rem; z-index: 59; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.95rem; border-radius: 999px; border: 1px solid rgba(78, 205, 196, 0.5); background: #1B2240; color: #e8ecf5; font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
.bb-talk-pill > .wb-icon { color: var(--wb-primary); }
.bb-talk-pill:hover { border-color: var(--wb-primary); background: #202a4d; }
.bb-talk-pill[aria-expanded="true"] { display: none; }
.bb-talk { width: 360px; }
.bb-talk .bb-listen-wave { height: 80px; }
.bb-talk-log { max-height: 240px; overflow-y: auto; padding: 0.7rem 0.9rem 0.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.bb-talk-msg { display: flex; flex-direction: column; gap: 0.15rem; max-width: 92%; }
.bb-talk-msg p { margin: 0; font-size: 0.9rem; line-height: 1.45; padding: 0.55rem 0.8rem; border-radius: 12px; color: #e8ecf5; background: rgba(255, 255, 255, 0.08); }
.bb-talk-who { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8f9bb3; padding: 0 0.3rem; }
.bb-talk-corvin .bb-talk-who { color: var(--wb-primary); }
.bb-talk-corvin p { background: rgba(78, 205, 196, 0.16); border: 1px solid rgba(78, 205, 196, 0.35); border-bottom-left-radius: 4px; }
.bb-talk-you { align-self: flex-end; align-items: flex-end; }
.bb-talk-you p { border-bottom-right-radius: 4px; }
.bb-talk-form { display: flex; gap: 0.5rem; align-items: center; padding: 0.7rem 0.9rem 0.2rem; }
.bb-talk-form input { flex: 1; min-width: 0; padding: 0.6rem 0.8rem; border-radius: var(--wb-radius-md); border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #e8ecf5; font: inherit; font-size: 0.9rem; }
.bb-talk-form input::placeholder { color: #7f8ba6; }
.bb-talk-form input:focus { outline: 2px solid var(--wb-primary); outline-offset: 1px; }
.bb-talk-mic { position: relative; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(78, 205, 196, 0.5); background: rgba(78, 205, 196, 0.12); cursor: pointer; }
.bb-talk-mic span { position: absolute; left: 50%; top: 50%; width: 0.6rem; height: 0.95rem; border-radius: 0.3rem; background: var(--wb-primary); transform: translate(-50%, -60%); }
.bb-talk-mic span::after { content: ""; position: absolute; left: 50%; bottom: -0.45rem; width: 1.1rem; height: 0.55rem; border: 2px solid var(--wb-primary); border-top: 0; border-radius: 0 0 0.6rem 0.6rem; transform: translateX(-50%); }
.bb-talk-mic.is-on { background: #00ADEE; border-color: #00ADEE; box-shadow: 0 0 0 6px rgba(0, 173, 238, 0.25); }
.bb-talk-mic.is-on span, .bb-talk-mic.is-on span::after { background: var(--wb-white); border-color: var(--wb-white); }
.bb-talk-mic[hidden] { display: none; }
@media (max-width: 560px) { .bb-talk { width: auto; } .bb-talk-log { max-height: 36vh; } }