/* ==========================================================================
   Budding Futures — CRO assets (2026-06-23)
   Additive conversion modules layered on top of the optimized pages.
   Self-contained with brand-var fallbacks so it works on the homepage
   (inline-CSS hero) AND the city pages (research-assets.css).
   Brand: --teal #1F4D4C  --teal-mid #2A6260  --lime #8DC21F  --lime-dark #6EA018
   ========================================================================== */

.bf-cro {
  --bf-teal: var(--teal, #1F4D4C);
  --bf-teal-mid: var(--teal-mid, #2A6260);
  --bf-lime: var(--lime, #8DC21F);
  --bf-lime-dark: var(--lime-dark, #6EA018);
  --bf-mid: var(--mid, #445555);
  --bf-border: var(--border, #D5E0E0);
  --bf-panel: var(--panel, #F7F9FE);
}

/* ---------- Outcomes strip (the emotional hook) ---------- */
.bf-outcomes { max-width: 36rem; margin: 0 0 1.6rem; }
.bf-outcomes-label {
  display: block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lime-dark, #6EA018); margin-bottom: 0.7rem;
}
.bf-outcomes-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bf-outcome {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--panel, #F7F9FE);
  border: 1px solid rgba(141,194,31,0.45);
  color: var(--teal, #1F4D4C);
  font-size: 0.82rem; font-weight: 600;
  padding: 0.45rem 0.8rem; border-radius: 0.6rem;
}
.bf-outcome svg { flex-shrink: 0; color: var(--lime-dark, #6EA018); }

/* ---------- Trust cluster (beside a CTA) ---------- */
.bf-trust-cluster {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem;
  margin: 1rem 0;
}
.bf-trust-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 600; color: var(--mid, #445555);
}
.bf-trust-chip svg { flex-shrink: 0; color: var(--lime-dark, #6EA018); }
.bf-trust-chip strong { color: var(--teal, #1F4D4C); font-weight: 700; }

/* ---------- Review quote by the form ---------- */
.bf-hero-quote {
  background: #fff; border: 1px solid var(--border, #D5E0E0);
  border-left: 4px solid var(--lime, #8DC21F);
  border-radius: 0.7rem; padding: 0.95rem 1.1rem; margin-top: 1rem;
  box-shadow: 0 6px 18px rgba(31,77,76,0.06);
}
.bf-hero-quote .bf-q-stars { color: #f5a623; font-size: 0.85rem; letter-spacing: 1px; }
.bf-hero-quote p {
  font-size: 0.86rem; line-height: 1.55; color: var(--teal, #1F4D4C);
  margin: 0.35rem 0 0.4rem; font-style: italic;
}
.bf-hero-quote cite {
  font-size: 0.72rem; font-weight: 700; color: var(--mid, #445555);
  font-style: normal;
}

/* ---------- What happens next (1-2-3) ---------- */
.bf-steps { display: grid; gap: 0.75rem; margin: 1.1rem 0 0; }
@media (min-width: 720px) { .bf-steps.bf-steps--row { grid-template-columns: repeat(3, 1fr); } }
.bf-step { display: flex; align-items: flex-start; gap: 0.6rem; }
.bf-step-num {
  flex-shrink: 0; width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: var(--lime, #8DC21F); color: var(--teal, #1F4D4C);
  font-size: 0.82rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.bf-step-text { font-size: 0.82rem; line-height: 1.45; color: var(--mid, #445555); }
.bf-step-text strong { color: var(--teal, #1F4D4C); font-weight: 700; }

/* ---------- $0 out-of-pocket callout ---------- */
.bf-zero-cost {
  display: flex; align-items: flex-start; gap: 0.6rem;
  background: rgba(141,194,31,0.10);
  border: 1px solid rgba(141,194,31,0.4);
  border-radius: 0.7rem; padding: 0.85rem 1rem; margin: 1.1rem 0;
}
.bf-zero-cost svg { flex-shrink: 0; color: var(--lime-dark, #6EA018); margin-top: 1px; }
.bf-zero-cost p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--teal, #1F4D4C); }
.bf-zero-cost strong { font-weight: 800; }

/* ---------- EEAT / credentials grid (city pages) ---------- */
.bf-eeat { display: grid; gap: 1rem; }
@media (min-width: 720px) { .bf-eeat { grid-template-columns: 1fr 1fr; } }
.bf-eeat-item {
  display: flex; align-items: flex-start; gap: 0.85rem;
  background: #fff; border: 1px solid var(--border, #D5E0E0);
  border-radius: 0.85rem; padding: 1.15rem;
  box-shadow: 0 2px 14px rgba(31,77,76,0.05);
}
.bf-eeat-ico {
  flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 0.6rem;
  background: rgba(31,77,76,0.08); color: var(--teal, #1F4D4C);
  display: flex; align-items: center; justify-content: center;
}
.bf-eeat-item h3 { margin: 0 0 0.3rem; font-size: 0.97rem; font-weight: 800; color: var(--teal, #1F4D4C); }
.bf-eeat-item p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--mid, #445555); }
.bf-eeat-item a { color: var(--teal, #1F4D4C); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Spanish chip ---------- */
.bf-es-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #fff; border: 1px solid var(--border, #D5E0E0);
  color: var(--teal, #1F4D4C); font-size: 0.76rem; font-weight: 700;
  padding: 0.3rem 0.7rem; border-radius: 50px;
}
.bf-es-chip .bf-es-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime, #8DC21F); }

/* ---------- City hero: 2-column + form card (namespaced, no homepage collision) ---------- */
.bf-hero-2col { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .bf-hero-2col { grid-template-columns: 1fr; gap: 2rem; } }
.bf-hero-main { min-width: 0; }
.bf-hero-formcard {
  background: #fff; border-radius: 20px; padding: 1.75rem; position: relative;
  box-shadow: 0 20px 60px rgba(31,77,76,0.12), 0 0 0 1px rgba(31,77,76,0.04);
}
.bf-hero-formcard::before {
  content: ''; position: absolute; top: 0; left: 1.75rem; right: 1.75rem; height: 4px;
  background: linear-gradient(90deg, var(--lime, #8DC21F), #a9d94a); border-radius: 0 0 4px 4px;
}
.bf-hff-title { font-size: 1.2rem; font-weight: 800; color: var(--teal, #1F4D4C); margin: 0 0 0.2rem; }
.bf-hff-sub { font-size: 0.78rem; color: var(--mid, #445555); margin: 0 0 1.1rem; line-height: 1.5; }
.bf-ff { margin-bottom: 0.8rem; }
.bf-ff label { display: block; font-size: 0.66rem; font-weight: 700; color: var(--mid, #445555); margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.08em; }
.bf-ff input, .bf-ff select {
  width: 100%; padding: 0.62rem 0.85rem; border: 1.5px solid var(--border, #D5E0E0);
  border-radius: 9px; font-family: inherit; font-size: 0.86rem; color: var(--ink, #1A2E2E);
  background: #fff; outline: none; transition: border-color 0.2s;
}
.bf-ff input:focus, .bf-ff select:focus { border-color: var(--teal, #1F4D4C); }
.bf-ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.bf-form-btn {
  width: 100%; padding: 0.85rem; background: var(--lime, #8DC21F); color: var(--teal, #1F4D4C);
  border: none; border-radius: 9px; font-family: inherit; font-size: 0.9rem; font-weight: 800;
  cursor: pointer; transition: all 0.2s; margin-top: 0.2rem;
}
.bf-form-btn:hover { filter: brightness(1.03); transform: translateY(-1px); }
.bf-form-note { font-size: 0.66rem; color: var(--mid, #445555); text-align: center; margin: 0.6rem 0 0; }
.bf-sms { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.64rem; color: var(--mid, #445555); line-height: 1.4; margin: 0.3rem 0; }
.bf-sms input { margin-top: 0.15rem; }

/* Relocated answer-first summary paragraphs */
.reloc-summary p { color: var(--mid, #445555); font-size: 0.97rem; line-height: 1.78; margin: 0 0 0.85rem; }
.reloc-summary p:last-child { margin-bottom: 0; }

/* Related-paths relocated band (below hero) */
.bf-paths-band { background: var(--panel, #F7F9FE); border-top: 1px solid var(--border, #D5E0E0); border-bottom: 1px solid var(--border, #D5E0E0); }
.bf-paths-band .hero-pathways { max-width: 1280px; margin: 0 auto; background: transparent; box-shadow: none; border: none; backdrop-filter: none; padding: 1.4rem 2rem; }

/* ---------- Reviews section (What Families Tell Us) ---------- */
.bf-reviews-head { text-align: center; margin-bottom: 1.8rem; }
.bf-reviews-summary { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; font-size: 0.9rem; color: var(--mid, #445555); }
.bf-reviews-summary .bf-rs-stars { color: #f5a623; letter-spacing: 1px; }
.bf-reviews-summary strong { color: var(--teal, #1F4D4C); }
.bf-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; max-width: 1040px; margin: 0 auto; }
@media (max-width: 860px) { .bf-reviews-grid { grid-template-columns: 1fr; } }
.bf-review-card { background: #fff; border: 1px solid var(--border, #D5E0E0); border-radius: 14px; padding: 1.4rem; box-shadow: 0 2px 14px rgba(31,77,76,0.05); }
.bf-review-card .bf-rc-stars { color: #f5a623; font-size: 0.9rem; letter-spacing: 1px; }
.bf-review-card p { font-size: 0.88rem; line-height: 1.65; color: var(--mid, #445555); margin: 0.5rem 0 0.85rem; font-style: italic; }
.bf-review-card cite { font-size: 0.78rem; font-weight: 700; color: var(--teal, #1F4D4C); font-style: normal; }
.bf-reviews-link { text-align: center; margin-top: 1.6rem; }

/* ---------- Mobile sticky CTA bar (mobile only) ---------- */
.bf-mobile-cta { display: none; }
.bf-mobile-cta-spacer { display: none; }
@media (max-width: 768px) {
  .bf-mobile-cta-spacer { display: block; height: 4.75rem; }
  .bf-mobile-cta {
    display: flex; align-items: center; gap: 0.6rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,0.97);
    border-top: 1px solid var(--border, #D5E0E0);
    box-shadow: 0 -4px 20px rgba(31,77,76,0.12);
    backdrop-filter: blur(6px);
  }
  .bf-mobile-cta a {
    flex: 1; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    font-family: inherit; font-weight: 800; font-size: 0.9rem;
    border-radius: 50px; text-decoration: none;
  }
  .bf-mobile-cta a.bf-mc-call {
    flex: 1; color: var(--teal, #1F4D4C);
    border: 1.5px solid rgba(31,77,76,0.35); background: #fff;
  }
  .bf-mobile-cta a.bf-mc-form {
    flex: 1.4; color: var(--teal, #1F4D4C); background: var(--lime, #8DC21F);
  }
  .bf-mobile-cta svg { flex-shrink: 0; }
}