/*
 * bb-cro.css v3 — Full fixes applied
 * Changes from v2:
 *   - Is This You: intro text full-width, insight box #fef8f3, CTA centered
 *   - Flow diagram: high-contrast on dark bg, step backgrounds visible
 *   - ROI cards: before=white/grey, after=orange accent, gain=deep dark
 *   - Bench cards: clear grey/amber/green-adjacent differentiation
 *   - Bench note: max-width: 100%
 *   - Outcome grid: white cards, strong text contrast
 *   - Added bb-cro-insight-warm (fef8f3 highlight block for all pillars)
 *   - All layout !important guards retained
 */


/* ═══════════════════════════════════════════════════════════
   METHODOLOGY — 3-col override
   bb-flow-track defaults to 4 cols. PM page uses 3.
═══════════════════════════════════════════════════════════ */
.bb-flow-track--3 {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* ═══════════════════════════════════════════════════════════
   1. PRICING GRID — 4-column override
═══════════════════════════════════════════════════════════ */
.bb-cro-pricing-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1100px) {
  .bb-cro-pricing-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .bb-cro-pricing-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════
   2. ROI CALLOUT — pre-pricing box
═══════════════════════════════════════════════════════════ */
.bb-cro-roi-callout {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 36px !important;
  padding: 18px 22px !important;
  background: rgba(255,106,0,0.06) !important;
  border: 1px solid rgba(255,106,0,0.2) !important;
  border-left: 4px solid #FF6A00 !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #2B3542 !important;
  line-height: 1.65 !important;
}
.bb-cro-roi-callout__check {
  color: #FF6A00 !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

/* ═══════════════════════════════════════════════════════════
   3. FAQ INLINE CTA
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   4. WARM INSIGHT BOX — #fef8f3 (used in Is This You across all pillars)
   Replace black insight box with this warmer tone
═══════════════════════════════════════════════════════════ */

/* Is This You — intro text and CTA alignment fixes */

.bb-proof .bb-lead { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════
   5. FLOW DIAGRAM — high contrast on dark bg
═══════════════════════════════════════════════════════════ */
.bb-cro-flow {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 40px 0 12px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.bb-cro-flow__step {
  flex: 1 !important;
  padding: 22px 20px !important;
  border-right: 1px solid rgba(255,255,255,0.1) !important;
  position: relative !important;
  background: #111111 !important;
}
.bb-cro-flow__step:last-child { border-right: none !important; }

/* Highlighted step — orange tint, clearly visible on dark */
.bb-cro-flow__step--highlight {
  background: rgba(255,106,0,0.14) !important;
  border-left: 2px solid rgba(255,106,0,0.5) !important;
  border-right: 1px solid rgba(255,106,0,0.25) !important;
}
.bb-cro-flow__num {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important;
  display: block !important;
  margin-bottom: 6px !important;
}
.bb-cro-flow__step--highlight .bb-cro-flow__num {
  color: #FF6A00 !important;
}
.bb-cro-flow__title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 6px !important;
  line-height: 1.2 !important;
}
.bb-cro-flow__step--highlight .bb-cro-flow__title {
  color: #FF6A00 !important;
}
.bb-cro-flow__sub {
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.5) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.bb-cro-flow__step--highlight .bb-cro-flow__sub {
  color: rgba(255,150,60,0.85) !important;
}
.bb-cro-flow__arrow {
  position: absolute !important;
  right: -9px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  width: 17px !important;
  height: 17px !important;
  background: #FF6A00 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.55rem !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
.bb-cro-flow__step:last-child .bb-cro-flow__arrow { display: none !important; }
.bb-cro-flow__note {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.28) !important;
  text-align: center !important;
  margin-top: 10px !important;
  margin-bottom: 40px !important;
  font-style: italic !important;
}
@media (max-width: 768px) {
  .bb-cro-flow { flex-direction: column !important; }
  .bb-cro-flow__step {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  .bb-cro-flow__step:last-child { border-bottom: none !important; }
  .bb-cro-flow__step--highlight { border-left: 3px solid #FF6A00 !important; }
  .bb-cro-flow__arrow { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   6. ROI MATH CARDS — redesigned colors
   Before: neutral white/light. After: orange accent. Gain: deep charcoal.
═══════════════════════════════════════════════════════════ */
.bb-cro-roi-section {
  padding: 88px 0 !important;
  background: #ffffff !important;
}
.bb-cro-roi-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 20px !important;
  margin-top: 40px !important;
}
.bb-cro-roi-card {
  border-radius: 12px !important;
  padding: 36px 28px !important;
  text-align: center !important;
}
/* Before — neutral, de-emphasised */
.bb-cro-roi-card--before {
  background: #f4f5f7;
  border: 1px solid rgba(0,0,0,0.06);
}
/* After — orange hero card, clearly the win */
.bb-cro-roi-card--after {
  background: #fff7f0;
  border: 2px solid #FF6A00;
  box-shadow: 0 0 0 5px rgba(255,106,0,0.07), 0 10px 32px rgba(255,106,0,0.1) !important;
}
/* Gain — deep charcoal, premium feel */
.bb-cro-roi-card--gain {
  background: #122035;
  border: 1px solid rgba(255,255,255,0.08);
}
.bb-cro-roi-card__label {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 16px !important;
  display: block !important;
}
.bb-cro-roi-card--before .bb-cro-roi-card__label { color: #6b7280; !important; }
.bb-cro-roi-card--after  .bb-cro-roi-card__label { color: #FF6A00 !important; font-weight: 800; }
.bb-cro-roi-card--gain   .bb-cro-roi-card__label { color: rgba(255,255,255,1) !important; }
.bb-cro-roi-card__number {
  font-size: 3.2rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.03em !important;
  display: block !important;
}
.bb-cro-roi-card--before .bb-cro-roi-card__number { color: #6B7280 !important; }
.bb-cro-roi-card--after  .bb-cro-roi-card__number { color: #FF6A00 !important; }
.bb-cro-roi-card--gain   .bb-cro-roi-card__number { color: #FF6A00 !important; }
.bb-cro-roi-card__sub {
  font-size: 0.8rem !important;
  line-height: 1.55 !important;
  display: block !important;
}
.bb-cro-roi-card--before .bb-cro-roi-card__sub { color: rgba(0,0,0,0.5) !important; }
.bb-cro-roi-card--after  .bb-cro-roi-card__sub { color: rgba(255,106,0,1) !important; font-weight: 550; }
.bb-cro-roi-card--gain   .bb-cro-roi-card__sub { color: rgba(255,255,255,1) !important; }
.bb-cro-roi-footnote {
  margin-top: 28px !important;
  padding: 20px 24px !important;
  background: #fef8f3 !important;
  border: 1px solid rgba(255,106,0,0.15) !important;
  border-left: 4px solid #FF6A00 !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  color: #2B3542 !important;
}
.bb-cro-roi-footnote strong { color: #111827 !important; font-weight: 700 !important; }
@media (max-width: 768px) {
  .bb-cro-roi-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .bb-cro-roi-card__number { font-size: 2.6rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   7. BENCHMARK TIERS — clear differentiation
   Low: grey/muted. Mid: amber. High: orange/green warmth.
═══════════════════════════════════════════════════════════ */
.bb-cro-bench-section {
  padding: 88px 0 !important;
  background: #F7F8FA !important;
}
.bb-cro-bench-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-top: 40px !important;
}
.bb-cro-bench-card {
  border-radius: 12px !important;
  padding: 36px 24px !important;
  text-align: center !important;
}
/* Below target — muted, clearly bad */
.bb-cro-bench-card--low {
  background: #EDEEF0 !important;
  border: 1.5px solid #D1D5DB !important;
}
/* Functional — amber warmth, middle ground */
.bb-cro-bench-card--mid {
  background: #FFF8EE !important;
  border: 1.5px solid #FBC97A !important;
}
/* High-performing — orange/warm, clearly aspirational */
.bb-cro-bench-card--high {
  background: #ffffff !important;
  border: 2.5px solid #FF6A00 !important;
  box-shadow: 0 4px 24px rgba(255,106,0,0.1) !important;
}
.bb-cro-bench-card__tier {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 12px !important;
  display: block !important;
}
.bb-cro-bench-card--low  .bb-cro-bench-card__tier { color: #9CA3AF !important; }
.bb-cro-bench-card--mid  .bb-cro-bench-card__tier { color: #D97706 !important; }
.bb-cro-bench-card--high .bb-cro-bench-card__tier { color: #FF6A00 !important; }
.bb-cro-bench-card__rate {
  font-size: 2.8rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 14px !important;
  letter-spacing: -0.03em !important;
  display: block !important;
}
.bb-cro-bench-card--low  .bb-cro-bench-card__rate { color: #9CA3AF !important; }
.bb-cro-bench-card--mid  .bb-cro-bench-card__rate { color: #D97706 !important; }
.bb-cro-bench-card--high .bb-cro-bench-card__rate { color: #FF6A00 !important; }
.bb-cro-bench-card__desc {
  font-size: 0.82rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}
.bb-cro-bench-card--low  .bb-cro-bench-card__desc { color: #6B7280 !important; }
.bb-cro-bench-card--mid  .bb-cro-bench-card__desc { color: #78350F !important; }
.bb-cro-bench-card--high .bb-cro-bench-card__desc { color: #2B3542 !important; }
/* Fix: bench note full width */
.bb-cro-bench-note {
  margin-top: 28px !important;
  font-size: 0.88rem !important;
  color: #4F5B68 !important;
  line-height: 1.7 !important;
  max-width: 100% !important;
  width: 100% !important;
}
@media (max-width: 768px) {
  .bb-cro-bench-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .bb-cro-bench-card__rate { font-size: 2.2rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   8. SPLIT PANEL — CRO NOT vs IS
═══════════════════════════════════════════════════════════ */
.bb-cro-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  margin-top: 40px !important;
}
.bb-cro-split__panel {
  border-radius: 10px !important;
  padding: 28px 26px !important;
}
.bb-cro-split__panel--no {
  background: #F7F8FA !important;
  border: 1px solid #E2E5EC !important;
}
.bb-cro-split__panel--yes {
  background: rgba(255,106,0,0.04) !important;
  border: 1.5px solid #FF6A00 !important;
}
.bb-cro-split__heading {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 18px !important;
  display: block !important;
}
.bb-cro-split__panel--no  .bb-cro-split__heading { color: #9CA3AF !important; }
.bb-cro-split__panel--yes .bb-cro-split__heading { color: #FF6A00 !important; }
.bb-cro-split__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bb-cro-split__list li {
  font-size: 0.875rem !important;
  color: #2B3542 !important;
  line-height: 1.55 !important;
  padding: 8px 0 8px 28px !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  position: relative !important;
}
.bb-cro-split__list li:last-child { border-bottom: none !important; }
.bb-cro-split__panel--no .bb-cro-split__list li::before {
  content: '✕' !important;
  position: absolute !important;
  left: 0 !important;
  top: 9px !important;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(239,68,68,0.08) !important;
  color: #EF4444 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bb-cro-split__panel--yes .bb-cro-split__list li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important;
  top: 9px !important;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(22,163,74,0.15) !important;
  color: #15803D !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .bb-cro-split { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════
   9. INTERACTIVE CHECKLIST
═══════════════════════════════════════════════════════════ */
.bb-cro-check {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
}
.bb-cro-check__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  background: #F7F8FA !important;
  border: 1px solid #E2E5EC !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.bb-cro-check__item:hover {
  background: #ffffff !important;
  border-color: rgba(255,106,0,0.3) !important;
}
.bb-cro-check__item.is-checked {
  background: rgba(255,106,0,0.05) !important;
  border-color: rgba(255,106,0,0.35) !important;
}
.bb-cro-check__box {
  width: 20px !important;
  height: 20px !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.bb-cro-check__item.is-checked .bb-cro-check__box {
  background: #FF6A00 !important;
  border-color: #FF6A00 !important;
	color: #111827;
  font-weight: 500;
}
.bb-cro-check__tick { display: none !important; width: 10px !important; height: 10px !important; }
.bb-cro-check__item.is-checked .bb-cro-check__tick { display: block !important;}
.bb-cro-check__text {
  font-size: 0.875rem !important;
  color: #2B3542 !important;
  line-height: 1.5 !important;
}

.bb-cro-score-bar {
  height: 5px !important;
  background: #E2E5EC !important;
  border-radius: 3px !important;
  margin: 20px 0 8px !important;
  overflow: hidden !important;
}
.bb-cro-score-fill {
  height: 100% !important;
  background: #FF6A00 !important;
  border-radius: 3px !important;
  width: 0% !important;
  transition: width 0.3s ease !important;
}
.bb-cro-score-label {
  font-size: 0.75rem !important;
  color: #9CA3AF !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.bb-cro-score-verdict {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  min-height: 22px !important;
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════
   10. 10-DIMENSION AUDIT GRID
═══════════════════════════════════════════════════════════ */
.bb-cro-dim-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 40px !important;
}
.bb-cro-dim-card {
  padding: 20px 20px 20px 17px !important;
  border-radius: 8px !important;
  border: 1px solid #E2E5EC !important;
  border-left: 3px solid #FF6A00 !important;
  background: #ffffff !important;
  transition: box-shadow 0.15s !important;
}
.bb-cro-dim-card:hover {
  box-shadow: 0 2px 16px rgba(255,106,0,0.08) !important;
}
.bb-cro-dim-card__num {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #FF6A00 !important;
  margin-bottom: 5px !important;
  display: block !important;
}
.bb-cro-dim-card__title {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 4px !important;
  line-height: 1.3 !important;
}
.bb-cro-dim-card__sub {
  font-size: 0.78rem !important;
  color: #4F5B68 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
@media (max-width: 768px) {
  .bb-cro-dim-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .bb-cro-flow { flex-direction: column !important; }

}

/* ═══════════════════════════════════════════════════════════
   11. OUTCOME GRID — white cards, strong contrast
   Override bb-pillar.css .bb-unlock-item default grey tones
═══════════════════════════════════════════════════════════ */
.bb-unlock {
  background: #F7F8FA;
}
.bb-unlock .bb-unlock-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2px !important;
}
.bb-unlock .bb-unlock-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 24px 22px !important;
  background: #ffffff;
  border: 1px solid #E8ECF0 !important;
  border-radius: 0 !important;
}
.bb-unlock .bb-unlock-icon {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  background: rgba(255,106,0,0.08) !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  flex-basis: 36px !important;
  margin-top: 2px !important;
}
.bb-unlock .bb-unlock-icon svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}
.bb-unlock .bb-unlock-item > div {
  flex: 1 !important;
  min-width: 0 !important;
}
.bb-unlock .bb-unlock-item strong {
  display: block !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #FF6A00 !important;
  margin-bottom: 5px !important;
}
.bb-unlock .bb-unlock-item b {
  color: #111827 !important;
  font-weight: 600 !important;
}
@media (max-width: 768px) {
  .bb-unlock .bb-unlock-grid { grid-template-columns: 1fr !important; }
}

.bb-final-inner {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.bb-cro-false-fix-section h2 {
  color: #ffffff !important;
}

/* Background rhythm corrections */

.bb-cro-false-fix-section {
  background: #000000 !important;
}

.bb-cro-false-fix-section .bb-lead {
  color: rgba(255,255,255,0.7) !important;
}
.bb-cro-false-fix-section .bb-insight-box {
  background: rgba(255,106,0,0.1) !important;
  border-color: rgba(255,106,0,0.3) !important;
}
.bb-cro-false-fix-section .bb-insight-box p {
  color: rgba(255,255,255,0.85) !important;
}
.bb-cro-false-fix-section .bb-insight-box p strong {
  color: #ffffff !important;
}

/* False Fix cards: styles now in .bb-cro-false-fix-card */


/* ─── FALSE FIX GRID — 3 cards, dark background ─── */
.bb-cro-false-fix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
}

.bb-cro-false-fix-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 26px 22px;
}

.bb-cro-false-fix-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  margin: 0 0 12px;
}

.bb-cro-false-fix-card p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  margin: 0;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.bb-cro-false-fix-card p strong {
  color: #ffffff;
  font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════
   COST TABLE — "What This Is Costing You" section
   2-column grid: 220px label | 1fr body
   Replaces inline-style grid from section 2B HTML
═══════════════════════════════════════════════════════════ */
.bb-cro-cost-table {
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  border: 1px solid #E2E5EC !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-top: 36px !important;
}

.bb-cro-cost-label {
  background: #FEF8F3;
  padding: 22px 20px;
  border-right: 1px solid #E2E5EC;
  border-bottom: 1px solid #F0F0F0;
  display: flex;
  align-items: center;
}

.bb-cro-cost-label--last {
  border-bottom: none;
}

.bb-cro-cost-label strong {
  font-size: 0.9rem;
  color: #FF6A00;
  font-weight: 700;
  line-height: 1.3;
}

.bb-cro-cost-body {
  padding: 22px 24px;
  background: #ffffff;
  border-bottom: 1px solid #F0F0F0;
}

.bb-cro-cost-body--last {
  border-bottom: none;
}

.bb-cro-cost-body p {
  margin: 0;
  font-size: 0.875rem;
  color: #2B3542;
  line-height: 1.65;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE OVERRIDES — CRO page
═══════════════════════════════════════════════════════════ */

/* 1100px — pricing 4→2 col */
@media (max-width: 1100px) {
  .bb-cro-pricing-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* 900px — tablet collapses */
@media (max-width: 900px) {
  .bb-flow-track--3    { grid-template-columns: 1fr !important; }
  .bb-cro-pricing-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .bb-cro-roi-grid     { grid-template-columns: 1fr !important; gap: 14px !important; }
  .bb-cro-bench-grid   { grid-template-columns: 1fr !important; gap: 12px !important; }
  .bb-cro-split        { grid-template-columns: 1fr !important; gap: 14px !important; }
  .bb-cro-dim-grid     { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}

/* 768px — flow diagrams collapse */
@media (max-width: 768px) {
  .bb-cro-flow         { flex-direction: column !important; border-radius: 8px !important; }

  .bb-cro-flow__step:last-child { border-bottom: none !important; }
  .bb-cro-flow__step--highlight { border-left: 3px solid #FF6A00 !important; }
  .bb-cro-flow__arrow  { display: none !important; }
  .bb-cro-dim-grid     { grid-template-columns: 1fr !important; gap: 8px !important; }
}

/* 600px — full mobile */
@media (max-width: 600px) {
  /* Cost table — collapse to single column */
  .bb-cro-cost-table {
    grid-template-columns: 1fr !important;
  }
  .bb-cro-cost-label {
    border-right: none !important;
    border-bottom: 1px solid #E2E5EC !important;
    padding: 16px 18px !important;
  }
  .bb-cro-cost-body {
    padding: 16px 18px !important;
  }
  .bb-cro-cost-label--last {
    border-bottom: 1px solid #E2E5EC !important;
  }

  /* False Fix grid — collapse to single column */
  .bb-cro-false-fix-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .bb-cro-false-fix-card {
    padding: 20px 18px !important;
  }

  /* Pricing */
  .bb-cro-pricing-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* ROI callout */
  .bb-cro-roi-callout  {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 16px 18px !important;
  }

  /* ROI math cards */
  .bb-cro-roi-card     { padding: 24px 18px !important; }
  .bb-cro-roi-card__number { font-size: 2.4rem !important; }

  /* Benchmark cards */
  .bb-cro-bench-card   { padding: 24px 18px !important; }
  .bb-cro-bench-card__rate { font-size: 2rem !important; }
  .bb-cro-bench-note   { font-size: 0.84rem !important; }

  /* ROI footnote */
  .bb-cro-roi-footnote { padding: 16px 18px !important; font-size: 0.85rem !important; }

  /* Section padding */
  .bb-cro-roi-section  { padding: 56px 0 !important; }
  .bb-cro-bench-section { padding: 56px 0 !important; }

  /* Split panels */
  .bb-cro-split        { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Dim grid */
  .bb-cro-dim-grid     { grid-template-columns: 1fr !important; gap: 8px !important; }
  .bb-cro-dim-card     { padding: 16px 16px 16px 14px !important; }

  /* Checklist */
  .bb-cro-check__item  { padding: 12px 14px !important; gap: 12px !important; }
  .bb-cro-check__text  { font-size: 0.84rem !important; }

  /* Final CTA inner — side padding so text doesn't hit walls */
  .bb-final-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }
  .bb-final h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.2 !important; }
  .bb-final-body { font-size: 0.9rem !important; }
  .bb-final-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .bb-final-actions .bb-btn { width: 100% !important; justify-content: center !important; }
  .bb-scarce { font-size: 0.72rem !important; }





/* 390px — very small */
@media (max-width: 390px) {
  .bb-cro-roi-card__number { font-size: 2rem !important; }
  .bb-cro-bench-card__rate { font-size: 1.7rem !important; }
  .bb-final-inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}