/* ═══════════════════════════════════════════════════════════
   bb-sstk.css  —  /server-side-tracking-setup/  ONLY
   Load order: globals.css > additional.css > bb-pillar.css > bb-sstk.css
   Scope: this page only. Never redeclare any bb-pillar.css class here.

   The page is built entirely on existing bb-pillar.css components
   (explainer-grid, conseq-grid, compare-grid, process-track,
   unlock-grid, pricing-grid, cases-grid, faq, etc.). This file holds
   only the small set of page-scoped overrides + section scaffolding
   needed to make those components render correctly on this page.

   Contents:
     1. Section scaffolding (padding + page backgrounds)
     2. OVERRIDE — Proof 2-col cases grid
     3. OVERRIDE — Related card text on dark bg
     4. OVERRIDE — Server-panel ul/li (out of scope in bb-pillar)
═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   1. SECTION SCAFFOLDING
   bb-pillar.css has no base .bb-section rule, and bb-audit ships
   without padding, so these defensive rules guarantee vertical
   rhythm and backgrounds without relying on Elementor section
   settings. Scoped to page-specific classes only, so semantic
   classes (bb-proof, bb-related, bb-pricing, bb-method, etc.)
   keep their own padding/background from bb-pillar.css.
═══════════════════════════════════════════════════════════ */
.bb-sstk-white,
.bb-sstk-light {
  padding-bottom: 96px;
}

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

/* Heading + lead defaults for the page-specific light/white sections
   (these blocks carry no semantic class that would set them). */
.bb-sstk-white h2,
.bb-sstk-light h2 {
  color: #111827;
}
.bb-sstk-white .bb-lead,
.bb-sstk-light .bb-lead {
  color: #4F5B68;
}


/* ═══════════════════════════════════════════════════════════
   2. OVERRIDE — Proof 2-col cases grid
   bb-cases-grid defaults differently; force 2-col on this page.
═══════════════════════════════════════════════════════════ */
.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; }
}


/* ═══════════════════════════════════════════════════════════
   3. OVERRIDE — Related card text on dark bg
   Related section uses #080a0e; ensure card text is legible.
═══════════════════════════════════════════════════════════ */
.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;
}


/* ═══════════════════════════════════════════════════════════
   4. OVERRIDE — Server-panel ul/li
   bb-server-panel ships without list styling in bb-pillar.css.
   Retained for any server-panel lists used on this page.
═══════════════════════════════════════════════════════════ */
.bb-server-panel ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.bb-server-panel li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #4F5B68;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.bb-server-panel li:last-child { border-bottom: none; }
.bb-server-panel li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF6A00;
}
.bb-server-panel--clean li { color: #2B3542; }

.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;
}


/* Testimonial strip — 3 cards in a row below case studies */
.bb-ecom-testimonial-strip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-top: 40px !important;
}

.bb-ecom-testimonial-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 10px !important;
  padding: 22px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.bb-ecom-testimonial-text {
  font-size: 0.86rem !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.8) !important;
  font-style: italic !important;
  margin: 0 !important;
  flex: 1 !important;
}

.bb-ecom-testimonial-attr {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #FF6A00 !important;
}

/* ═══════════════════════════════════════════════════════════
   5. S5 FALSE CONFIDENCE — light myth cards
   bb-conseq-card is hardcoded dark (#0D1117) because its native
   home is the black S4 Consequences section. On S5 (light grey)
   those dark cards look heavy and disjointed. This modifier,
   applied ONLY to .bb-sstk-myth, converts the same grid to a
   clean light card treatment. S4's dark cards are untouched.
═══════════════════════════════════════════════════════════ */
.bb-sstk-myth .bb-conseq-card {
  background: #ffffff;
  border: 1px solid #E8EBF0;
  border-left: 3px solid #DC2626;       /* red accent = the myth/warning */
  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-sstk-myth .bb-conseq-card:hover {
  box-shadow: 0 6px 18px rgba(16,24,40,0.08);
  transform: translateY(-2px);
}
 
/* "Myth" tag — small red pill above the quote */
.bb-sstk-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;
}
 
/* The quoted assumption — dark, readable, slightly muted */
.bb-sstk-myth .bb-conseq-card-label {
  color: #4B5563;
  font-style: italic;
  font-size: 0.92rem;
  font-weight: 600;
}
 
/* Reality body — dark text on white */
.bb-sstk-myth .bb-conseq-card p {
  color: #4F5B68;
}
.bb-sstk-myth .bb-conseq-card p strong {
  color: #111827;
}
 
/* The closing punch line — orange, the BlazeByte answer */
.bb-sstk-myth .bb-conseq-card-strong {
  color: #C2410C;
  font-weight: 700;
}
 
.bb-final-inner { max-width: 820px; }

@media (max-width: 900px) {
  .bb-ecom-testimonial-strip { grid-template-columns: 1fr !important; }
  .bb-ct-attrib-strip   { gap: 8px !important; }
}

 
@media (max-width: 600px) {
  .bb-ct-attrib-strip          { flex-direction: column !important; align-items: flex-start !important; }
  .bb-ct-consequence-strip     { gap: 6px !important; }
}