/*
 * bb-pm.css — Performance Marketing Pillar Page
 * NEW classes only. All existing bb-* classes live in bb-pillar.css.
 * Load order: globals.css → bb-pillar.css → Additional.css → bb-pm.css
 * Scope: /performance-marketing/ only
 */


/* ═══════════════════════════════════════════════════════════
   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;
}

/* ═══════════════════════════════════════════════════════════
   VERTICAL HUB — 2×2 grid override
   Default bb-svc-grid is 3-col. Verticals use 2-col.
═══════════════════════════════════════════════════════════ */
.bb-vert-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* Verticals section bg */
.bb-pm-verticals {
  padding: 96px 0;
  background: #ffffff;
}


/* ═══════════════════════════════════════════════════════════
   COMPARISON — v7 final
═══════════════════════════════════════════════════════════ */
.bb-pm-compare {
  padding: 96px 0;
  background: #ffffff;
}
 
/* Outer wrapper — no border on top, border handled per-column */
.bb-cmp {
  margin-top: 16px;
  border-radius: 12px;
  overflow: visible;
  position: relative;
}
 
/* Badge row — above table, third column only */
.bb-cmp-badge-row {
  display: grid;
  grid-template-columns: 30% 1fr 1fr;
}
 
.bb-cmp-badge-spacer { /* empty */ }
 
.bb-cmp-badge-wrap {
  display: flex;
  justify-content: flex-start;
  padding: 0 0 8px 2px;
}
 
.bb-cmp-recommended-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FF6A00;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
}
 
/* Row grid */
.bb-cmp-row {
  display: grid;
  grid-template-columns: 30% 1fr 1fr;
  border-bottom: 1px solid #E2E5EC;
}
 
.bb-cmp-row-last { border-bottom: none; }
 
/* Header row */
.bb-cmp-header-row {
  border-bottom: 2px solid #E2E5EC;
}
 
/* Base cell */
.bb-cmp-cell {
  padding: 14px 18px;
  font-size: 0.83rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
}
 
/* Feature label column */
.bb-cmp-feature-header {
  background: #F9FAFB;
  border-right: 1px solid #E2E5EC;
  border-top: 1px solid #E2E5EC;
  border-left: 1px solid #E2E5EC;
}
 
.bb-cmp-feature {
  font-weight: 600;
  color: #374151;
  font-size: 0.81rem;
  background: #F9FAFB;
  border-right: 1px solid #E2E5EC;
  border-left: 1px solid #E2E5EC;
}
 
.bb-cmp-row-last .bb-cmp-feature {
  border-bottom: 1px solid #E2E5EC;
  border-radius: 0 0 0 10px;
}
 
/* Agency header */
.bb-cmp-agency-header {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9CA3AF;
  border-right: 1px solid #E2E5EC;
  border-top: 1px solid #E2E5EC;
  background: #F9FAFB;
  justify-content: flex-start;
}
 
/* BlazeByte header — clean light, orange text, orange border top */
.bb-cmp-bb-header {
  font-size: 0.88rem;
  font-weight: 700;
  color: #FF6A00;
  justify-content: flex-start;
  letter-spacing: -0.01em;
  background: #F9FAFB;
  border: 2px solid #FF6A00;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}
 
/* Agency data cells */
.bb-cmp-agency {
  color: #4B5563;
  font-size: 0.81rem;
  border-right: 1px solid #E2E5EC;
  background: #ffffff;
}
 
/* BlazeByte data cells — dark text, faint orange tint, orange border sides */
.bb-cmp-bb {
  color: #111827;
  font-size: 0.81rem;
  font-weight: 500;
  background: rgba(255,106,0,0.03);
  border-left: 2px solid #FF6A00;
  border-right: 2px solid #FF6A00;
}
 
.bb-cmp-row-last .bb-cmp-bb {
  border-bottom: 2px solid #FF6A00;
  border-radius: 0 0 10px 10px;
}
 
/* ✗ icon */
.bb-cmp-no {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(239,68,68,0.08);
  color: #EF4444;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
/* ✓ icon — green */
.bb-cmp-yes {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(22,163,74,0.15);
  color: #15803D;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   PRICING — 4-col grid
   bb-pricing-grid defaults to 3 cols. PM page uses 4.
═══════════════════════════════════════════════════════════ */
.bb-pm-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 40px;
}

/* bb-plan cards inherit from Additional.css.
   We only override the title size for 4-col layout */
.bb-pm-pricing-grid .bb-plan__title {
  font-size: 1.1rem !important;
}

.bb-pm-pricing-grid .bb-price__num {
  font-size: 1.4rem !important;
}


/* ═══════════════════════════════════════════════════════════
   FAQ — Group labels and inline CTAs
═══════════════════════════════════════════════════════════ */
.bb-pm-faq-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FF6A00;
  margin: 40px 0 0;
  display: block;
}

/* First group label — no top margin */
.bb-faq-inner > .bb-pm-faq-group-label:first-of-type {
  margin-top: 20;
}

.bb-faq-inline-cta {
  padding: 16px 20px;
  background: #F7F8FA;
  border-left: 3px solid #FF6A00;
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
  color: #2B3542;
  font-weight: 500;
  margin: 8px 0 0;
}

.bb-faq-inline-cta a {
  color: #FF6A00 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.bb-faq-inline-cta a:hover {
  text-decoration: underline !important;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .bb-pm-pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .bb-pm-pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
 
@media (max-width: 900px) {
  .bb-audit-inner { grid-template-columns: 1fr; gap: 36px; padding-top: 64px; padding-bottom: 64px; }
  .bb-flow-track--3 { grid-template-columns: 1fr !important; }
  .bb-vert-grid { grid-template-columns: 1fr !important; }
  .bb-pm-pricing-grid { grid-template-columns: 1fr !important; }
  .bb-compare-table tbody td:first-child { width: auto; }
}
 
@media (max-width: 600px) {
  .bb-pm-verticals,
  .bb-pm-compare { padding: 60px 0; }
  .bb-cmp-badge-row { grid-template-columns: 1fr 1fr !important;}
  .bb-cmp-badge-wrap { grid-column: 2 / 3 !important; justify-content: center !important; padding: 0 0 8px 0 !important; }
  .bb-cmp-recommended-badge { font-size: 0.62rem !important; padding: 5px 11px !important; line-height: 1 !important; white-space: nowrap !important; }
  .bb-cmp-row { grid-template-columns: 1fr 1fr !important; }
  .bb-cmp-feature,
  .bb-cmp-feature-header { display: none !important; }
  .bb-cmp-badge-spacer { display: none !important; }
  .bb-cmp-badge-wrap { padding: 0 0 8px 2px; }
  .bb-cmp-cell { padding: 11px 13px !important; font-size: 0.76rem !important; gap: 7px; }
  .bb-cmp-agency-header { border-radius: 10px 0 0 0; }
  .bb-cmp-row-last .bb-cmp-agency { border-bottom: 1px solid #E2E5EC; border-radius: 0 0 0 10px; }
}

/* ═══════════════════════════════════════════════════════════
   PM PILLAR — VISUAL SYSTEM COMPONENTS
   Used on /performance-marketing/
═══════════════════════════════════════════════════════════ */

/* Problem cost impact chips inside bb-prob-item */
.bb-pm-prob-cost {
  margin-top: 12px;
  padding: 9px 14px;
  background: rgba(239,68,68,0.06);
  border-left: 2px solid rgba(239,68,68,0.3);
  border-radius: 0 6px 6px 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
}

.bb-pm-prob-cost-label {
  display: inline;
  font-weight: 700;
  color: rgba(239,68,68,0.8);
  margin-right: 4px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Budget efficiency bars (methodology section) */
.bb-pm-efficiency-bars {
  margin-top: 36px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #E2E5EC;
  border-radius: 10px;
}

.bb-pm-eff-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9CA3AF;
  margin-bottom: 20px;
}

.bb-pm-eff-row {
  display: grid;
  grid-template-columns: 160px 1fr 200px;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.bb-pm-eff-row:last-child { margin-bottom: 0; }

.bb-pm-eff-phase {
  font-size: 0.78rem;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

.bb-pm-eff-track {
  height: 8px;
  background: #F3F4F6;
  border-radius: 999px;
  overflow: hidden;
}

.bb-pm-eff-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(255,106,0,0.5), #FF6A00);
  border-radius: 999px;
}

.bb-pm-eff-fill--full {
  background: linear-gradient(90deg, #FF6A00, #22c55e);
}

.bb-pm-eff-note {
  font-size: 0.76rem;
  color: #9CA3AF;
  text-align: right;
}

.bb-pm-eff-note--full {
  color: #22c55e;
  font-weight: 600;
}

/* Before/After metric blocks in case cards (dark section)
   Note: bb-before-after is the new standardised name in bb-pillar.css
   bb-pm-before-after kept here for backward compatibility with
   existing PM page HTML that uses the old class name */
.bb-pm-before-after {
  margin: 14px 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

.bb-pm-ba-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 14px;
}

.bb-pm-ba-row--before { background: rgba(255,255,255,0.03); }
.bb-pm-ba-row--after  { background: rgba(255,106,0,0.07); }

.bb-pm-ba-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  padding-top: 1px;
  min-width: 36px;
}

.bb-pm-ba-row--before .bb-pm-ba-label { color: rgba(255,255,255,0.3); }
.bb-pm-ba-row--after  .bb-pm-ba-label { color: #FF6A00; }

.bb-pm-ba-stat { font-size: 0.78rem; line-height: 1.5; }
.bb-pm-ba-row--before .bb-pm-ba-stat { color: rgba(255,255,255,0.4); }
.bb-pm-ba-row--after  .bb-pm-ba-stat { color: rgba(255,255,255,0.85); font-weight: 500; }

/* Responsive */
@media (max-width: 768px) {
  .bb-pm-eff-row  { grid-template-columns: 120px 1fr; }
  .bb-pm-eff-note { display: none; }
}