/* ═══════════════════════════════════════════════════════════
   bb-mpc.css  —  /meta-pixel-capi-setup/  ONLY
   Load order: globals.css > additional.css > bb-pillar.css > bb-mpc.css
   Scope: this page only. Never redeclare any bb-pillar.css class here.

   Built on the proven server-side template. The page uses existing
   bb-pillar.css components throughout. This file holds only:
     1. Section scaffolding (padding + page backgrounds)
     2. S5 myth cards — light treatment + 2x2 layout (4 cards)
     3. OVERRIDE — Proof 2-col cases grid
     4. OVERRIDE — Related card text on dark bg
═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   1. SECTION SCAFFOLDING
   bb-pillar.css has no base .bb-section rule, and bb-audit ships
   without padding. Scoped to page-specific classes only, so
   semantic classes (bb-proof, bb-pricing, bb-method, etc.) keep
   their own padding/background from bb-pillar.css.
═══════════════════════════════════════════════════════════ */
.bb-mpc-white,
.bb-mpc-light {
  padding: 96px 0;
}

.bb-mpc-white { background: #ffffff; }
.bb-mpc-light { background: #F7F8FA; }

.bb-mpc-white h2,
.bb-mpc-light h2 {
  color: #111827;
}
.bb-mpc-white .bb-lead,
.bb-mpc-light .bb-lead {
  color: #4F5B68;
}


/* ═══════════════════════════════════════════════════════════
   2. S5 FALSE CONFIDENCE — light myth cards, 2x2 layout
   bb-conseq-card is hardcoded dark (#0D1117) for its native black
   S4 section. On S5 (light grey) those dark cards look heavy and
   disjointed. This modifier converts the grid to a clean light
   treatment AND forces a 2x2 layout for four cards (bb-conseq-grid
   is 3-col by default, which would orphan the 4th card).
   Scoped to .bb-mpc-myth only — S4's dark cards are untouched.
═══════════════════════════════════════════════════════════ */
.bb-mpc-myth {
  grid-template-columns: 1fr 1fr !important;
}

.bb-mpc-myth .bb-conseq-card {
  background: #ffffff;
  border: 1px solid #E8EBF0;
  border-left: 3px solid #DC2626;
  border-radius: 12px;
  padding: 26px 24px;
  box-shadow: 0 1px 3px rgba(16,24,40,0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.bb-mpc-myth .bb-conseq-card:hover {
  box-shadow: 0 6px 18px rgba(16,24,40,0.08);
  transform: translateY(-2px);
}

.bb-mpc-myth-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #DC2626;
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.2);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 14px;
}

.bb-mpc-myth .bb-conseq-card-label {
  color: #4B5563;
  font-style: italic;
  font-size: 0.92rem;
  font-weight: 600;
}

.bb-mpc-myth .bb-conseq-card p {
  color: #4F5B68;
}
.bb-mpc-myth .bb-conseq-card p strong {
  color: #111827;
}

.bb-mpc-myth .bb-conseq-card-strong {
  color: #C2410C;
  font-weight: 700;
}

.bb-server-dec-block {
  background: #fff8f2 !important;
  border: 1px solid rgba(255,106,0,0.15) !important;
  border-left: 3px solid #FF6A00 !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 20px 24px !important;
}

.bb-server-dec-block p {
  font-size: 0.9rem !important;
  color: #374151 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

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


/* ═══════════════════════════════════════════════════════════
   3. OVERRIDE — Proof 2-col cases grid
═══════════════════════════════════════════════════════════ */
.bb-proof .bb-cases-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (max-width: 600px) {
  .bb-proof .bb-cases-grid { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════════════
   4. OVERRIDE — Related card text on dark bg (#080a0e)
═══════════════════════════════════════════════════════════ */
.bb-related .bb-related-card h3 {
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 10px 0 12px !important;
  line-height: 1.3 !important;
}
.bb-related .bb-related-card p {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.84rem !important;
  line-height: 1.65 !important;
  flex: 1 !important;
  margin-bottom: 18px !important;
}
.bb-related .bb-related-card .bb-case-pill {
  color: #FF6A00 !important;
  background: rgba(255,106,0,0.1) !important;
  border: 1px solid rgba(255,106,0,0.2) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: fit-content !important;
  margin-bottom: 12px !important;
}

.bb-final-inner { max-width: 720px; }