/*
 * bb-free-audit.css
 * Scope: /free-audit/ only
 * Load via functions.php: is_page('free-audit')
 * Depends on: globals.css, bb-pillar.css, bb-confirm-package.css
 *
 * REUSED FROM GLOBALS / PILLAR (no redeclaration):
 *   bb-wrap, bb-label, bb-lead, bb-or, bb-btn-*,
 *   bb-page-hero, bb-page-hero-sub, bb-page-hero-qualifier,
 *   bb-page-hero-actions, bb-insight-box, bb-soft-cta,
 *   bb-section-cta, bb-proof-aggregate, bb-proof-agg-*,
 *   bb-faq-section, bb-faq-inner, bb-faq-*, bb-final-*,
 *   bb-scarce, bb-scarce-dot
 *
 * REUSED FROM BB-CONFIRM-PACKAGE (load that file on this page too):
 *   bb-cp-how-grid, bb-cp-how-step, bb-cp-how-node, bb-cp-how-label
 *   NOTE: Add 'free-audit' to bb_pillar_styles() in functions.php
 *   AND ensure bb-confirm-package.css loads here, OR move
 *   bb-cp-how-* into bb-pillar.css if used on 3+ pages.
 *
 * NEW CLASSES IN THIS FILE:
 *   bb-fa-hero-copy, bb-fa-hero-commitment,
 *   bb-fa-form-header, bb-fa-form-eyebrow, bb-fa-form-sub,
 *   bb-fa-covers, bb-fa-cover-grid, bb-fa-cover-item,
 *   bb-fa-cover-icon, bb-fa-cover-title, bb-fa-cover-sub,
 *   bb-fa-who, bb-fa-who-grid, bb-fa-who-panel,
 *   bb-fa-who-panel--yes, bb-fa-who-panel--no,
 *   bb-fa-who-heading, bb-fa-who-list, bb-fa-who-list--yes,
 *   bb-fa-who-list--no,
 *   bb-fa-steps, bb-fa-steps-note,
 *   bb-fa-proof
 */

/* ═══════════════════════════════════════════════════════════
   S2: WHAT YOU'LL RECEIVE: 4-col cover grid
═══════════════════════════════════════════════════════════ */
.bb-fa-covers {
  background: #ffffff;
  padding: 88px 0;
}

.bb-fa-cover-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.bb-fa-cover-item {
  padding: 24px 20px;
  background: #f9f9fb;
  border: 1px solid #E2E5EC;
  border-top: 3px solid #FF6A00;
  border-radius: 0 0 8px 8px;
}

.bb-fa-cover-icon {
  width: 36px;
  height: 36px;
  background: rgba(255,106,0,0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.bb-fa-cover-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px;
  line-height: 1.3;
}

.bb-fa-cover-sub {
  font-size: 0.82rem;
  color: #374049;
  line-height: 1.65;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   S3: WHO THIS IS FOR: split panel
═══════════════════════════════════════════════════════════ */
.bb-fa-who {
  background: #F7F8FA;
  padding: 88px 0;
}

.bb-fa-who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
}

.bb-fa-who-panel {
  border-radius: 10px;
  padding: 28px 26px;
}

.bb-fa-who-panel--yes {
  background: #ffffff;
  border: 1px solid rgba(255,106,0,0.2);
  border-left: 3px solid #FF6A00;
}

.bb-fa-who-panel--no {
  background: #F0F2F5;
  border: 1px solid #DDE1E8;
  border-left: 3px solid #D1D5DB;
}

.bb-fa-who-heading {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.bb-fa-who-panel--yes .bb-fa-who-heading { color: #FF6A00; }
.bb-fa-who-panel--no  .bb-fa-who-heading { color: #9CA3AF; }

.bb-fa-who-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bb-fa-who-list li {
  font-size: 0.875rem;
  line-height: 1.55;
  padding-left: 20px;
  position: relative;
  color: #2B3542;
}

.bb-fa-who-list--yes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #FF6A00;
  font-weight: 700;
  font-size: 0.8rem;
}

.bb-fa-who-list--no li::before {
  content: '✕';
  position: absolute;
  left: 0;
  top: 0;
  color: #9CA3AF;
  font-weight: 700;
  font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════
   S4: WHAT HAPPENS AFTER
   Uses bb-cp-how-* from bb-confirm-package.css
═══════════════════════════════════════════════════════════ */
.bb-fa-steps {
  background: #ffffff;
  padding: 88px 0;
}

.bb-fa-steps-note {
  margin-top: 36px;
  font-size: 0.88rem;
  color: #4F5B68;
  line-height: 1.7;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════
   S5: PROOF STRIP
   Uses bb-proof-aggregate from bb-pillar.css
═══════════════════════════════════════════════════════════ */
.bb-fa-proof {
  background: #F7F8FA;
  padding: 48px 0;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .bb-fa-cover-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .bb-fa-who-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .bb-cp-page-header { padding: 56px 0 36px; }
  .bb-fa-cover-grid { grid-template-columns: 1fr; }
  .bb-fa-covers,
  .bb-fa-who,
  .bb-fa-steps { padding: 56px 0; }
  .bb-fa-hero-copy h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .bb-fa-cover-item { padding: 20px 16px; }
  .bb-fa-who-panel { padding: 22px 18px; }
  .bb-fa-steps-note { font-size: 0.84rem; }
}

/* ─── Who This Is For — 3-col grid ─── */
.bb-fa-who-grid--3 {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* New/pre-launch panel — same visual as yes panel, distinct label color */
.bb-fa-who-panel--new {
  background: #ffffff;
  border: 1px solid rgba(255,106,0,0.2);
  border-left: 3px solid #FF6A00;
  border-radius: 10px;
  padding: 28px 26px;
}

.bb-fa-who-panel--new .bb-fa-who-heading {
  color: #FF6A00;
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.bb-fa-who-panel--new .bb-fa-who-list--yes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #FF6A00;
  font-weight: 700;
  font-size: 0.8rem;
}

@media (max-width: 900px) {
  .bb-fa-who-grid--3 { grid-template-columns: 1fr !important; }
}