/* ========================================================================
   BONUSBANK FEATURE / STRATEGY v2 TEMPLATE STYLES
   Loaded ONLY on page-features-v2.php and page-strategies-v2.php
   (enqueued conditionally in functions/bonusbank_enqueue.php).

   Every rule is scoped under .bb-fp and uses bb-fp-* class names, so it
   shares nothing with the original .bonusbank-feature__* templates and
   cannot affect any other page on the site.

   Design tokens match the New homepage: Bebas Neue headings, Work Sans body,
   #0d3d22 / #2D8659 / #40B67A. Fonts are already loaded site-wide via the
   theme's consolidated Google Fonts request (Bebas Neue + Work Sans).

   Dark mode uses the 9-selector pattern on every colour rule:
   .dark-mode / .theme-dark / [data-theme="dark"], each bare / body. / html.
   ======================================================================== */

/* ---- Page shell -------------------------------------------------------- */
.bb-fp {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Work Sans', sans-serif;
  color: #1a1a1a;
  background: #ffffff;
  overflow-x: hidden;
}
.dark-mode .bb-fp, .theme-dark .bb-fp, [data-theme="dark"] .bb-fp,
body.dark-mode .bb-fp, body.theme-dark .bb-fp, body[data-theme="dark"] .bb-fp,
html.dark-mode .bb-fp, html.theme-dark .bb-fp, html[data-theme="dark"] .bb-fp {
  color: #e0e0e0 !important;
  background: #0d0d0d !important;
}

.bb-fp .bb-fp-wrp {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Force Bebas Neue on headings, matching the homepage */
.bb-fp h1, .bb-fp h2, .bb-fp h3 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
}

/* Gradient headline - used on the hero h1 */
.bb-fp .bb-gradient-text {
  background: linear-gradient(135deg, #0a3d22 0%, #2D8659 60%, #40B67A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dark-mode .bb-fp .bb-gradient-text, .theme-dark .bb-fp .bb-gradient-text, [data-theme="dark"] .bb-fp .bb-gradient-text,
body.dark-mode .bb-fp .bb-gradient-text, body.theme-dark .bb-fp .bb-gradient-text, body[data-theme="dark"] .bb-fp .bb-gradient-text,
html.dark-mode .bb-fp .bb-gradient-text, html.theme-dark .bb-fp .bb-gradient-text, html[data-theme="dark"] .bb-fp .bb-gradient-text {
  background: linear-gradient(135deg, #a8d5b8 0%, #2D8659 55%, #40B67A 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ---- Primary / ghost CTA buttons -------------------------------------- */
.bb-fp .bb-fp-btn {
  display: inline-block;
  background: linear-gradient(135deg, #2D8659, #40B67A);
  color: #ffffff !important;
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  padding: 17px 42px;
  border-radius: 50px;
  text-decoration: none !important;
  letter-spacing: 0.2px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 6px 24px rgba(45, 134, 89, 0.38);
  border: none;
}
.bb-fp .bb-fp-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(45, 134, 89, 0.48);
  color: #ffffff !important;
  text-decoration: none !important;
}
.bb-fp .bb-fp-btn-ghost {
  display: inline-block;
  background: transparent;
  color: #2D8659;
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 36px;
  border-radius: 50px;
  text-decoration: none;
  border: 2px solid rgba(45, 134, 89, 0.5);
  transition: all 0.2s;
}
.bb-fp .bb-fp-btn-ghost:hover {
  border-color: #2D8659;
  background: rgba(45, 134, 89, 0.06);
  color: #2D8659;
  text-decoration: none;
}
.dark-mode .bb-fp .bb-fp-btn-ghost, .theme-dark .bb-fp .bb-fp-btn-ghost, [data-theme="dark"] .bb-fp .bb-fp-btn-ghost,
body.dark-mode .bb-fp .bb-fp-btn-ghost, body.theme-dark .bb-fp .bb-fp-btn-ghost, body[data-theme="dark"] .bb-fp .bb-fp-btn-ghost,
html.dark-mode .bb-fp .bb-fp-btn-ghost, html.theme-dark .bb-fp .bb-fp-btn-ghost, html[data-theme="dark"] .bb-fp .bb-fp-btn-ghost {
  color: #40B67A !important;
  border-color: rgba(64, 182, 122, 0.4) !important;
}

/* ---- HERO -------------------------------------------------------------- */
.bb-fp .bb-fp-hero {
  display: block;
  width: 100%;
  padding: 80px 48px 40px;
  position: relative;
  overflow: hidden;
  background: #ffffff;
}
.dark-mode .bb-fp .bb-fp-hero, .theme-dark .bb-fp .bb-fp-hero, [data-theme="dark"] .bb-fp .bb-fp-hero,
body.dark-mode .bb-fp .bb-fp-hero, body.theme-dark .bb-fp .bb-fp-hero, body[data-theme="dark"] .bb-fp .bb-fp-hero,
html.dark-mode .bb-fp .bb-fp-hero, html.theme-dark .bb-fp .bb-fp-hero, html[data-theme="dark"] .bb-fp .bb-fp-hero {
  background: #0d0d0d !important;
}

/* Ambient glow behind the hero */
.bb-fp .bb-fp-hero::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -120px;
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(64, 182, 122, 0.10) 0%, transparent 68%);
  pointer-events: none;
}

.bb-fp .bb-fp-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 64px;
  align-items: center;
}
.bb-fp .bb-fp-hero-copy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bb-fp .bb-fp-hero-media {
  flex: 1 1 0;
  min-width: 0;
}
.bb-fp .bb-fp-hero-media-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 24px 60px rgba(13, 61, 34, 0.12);
}
.dark-mode .bb-fp .bb-fp-hero-media-img, .theme-dark .bb-fp .bb-fp-hero-media-img, [data-theme="dark"] .bb-fp .bb-fp-hero-media-img,
body.dark-mode .bb-fp .bb-fp-hero-media-img, body.theme-dark .bb-fp .bb-fp-hero-media-img, body[data-theme="dark"] .bb-fp .bb-fp-hero-media-img,
html.dark-mode .bb-fp .bb-fp-hero-media-img, html.theme-dark .bb-fp .bb-fp-hero-media-img, html[data-theme="dark"] .bb-fp .bb-fp-hero-media-img {
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important;
}

/* Single-column hero (no featured image) - Strategies only.
   page-strategies-v2.php adds .bb-fp-hero--single when has_post_thumbnail() is
   false. Content is LEFT-aligned, and the wrapper is matched to the "How
   Bonusbank Helps" card-grid container (.bb-fp-about): same max-width (1100px)
   and horizontal padding (24px), centred - so the hero's eyebrow / h1 /
   paragraphs / CTA row share the exact left and right edges as the card grid
   below. The hero section's own horizontal padding (48px, 24px on mobile) is
   zeroed here - with higher specificity than the responsive rule - so the two
   boxes line up at every width instead of the hero sitting wider. The paragraph
   text keeps its readable ~760px cap, so its extra width is right-side
   whitespace within the shared column. Features always renders its screenshot,
   never gets this modifier, so its two-column hero is unaffected. */
.bb-fp .bb-fp-hero.bb-fp-hero--single {
  padding-left: 0;
  padding-right: 0;
}
.bb-fp .bb-fp-hero--single .bb-fp-hero-inner {
  max-width: 1100px;   /* same as .bb-fp-about */
  padding-left: 24px;  /* same as .bb-fp-about */
  padding-right: 24px;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.bb-fp .bb-fp-hero--single .bb-fp-hero-copy {
  align-items: flex-start;
  width: 100%;
}
.bb-fp .bb-fp-hero--single .bb-fp-hero-desc {
  max-width: none; /* fill the shared container width so the right edge matches the card grid (overrides the base 560px cap) */
  text-align: left;
}
.bb-fp .bb-fp-hero--single .bb-fp-hero-ctas {
  justify-content: center;
  width: 100%;
}

/* Eyebrow */
.bb-fp .bb-fp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #2D8659;
  margin-bottom: 20px;
}
.dark-mode .bb-fp .bb-fp-eyebrow, .theme-dark .bb-fp .bb-fp-eyebrow, [data-theme="dark"] .bb-fp .bb-fp-eyebrow,
body.dark-mode .bb-fp .bb-fp-eyebrow, body.theme-dark .bb-fp .bb-fp-eyebrow, body[data-theme="dark"] .bb-fp .bb-fp-eyebrow,
html.dark-mode .bb-fp .bb-fp-eyebrow, html.theme-dark .bb-fp .bb-fp-eyebrow, html[data-theme="dark"] .bb-fp .bb-fp-eyebrow {
  color: #40B67A !important;
}
.bb-fp .bb-fp-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

/* Hero headline.
   line-height must be >= 1 and a small padding-bottom is needed: this h1 uses
   -webkit-background-clip: text (gradient fill), which only paints inside the
   element box. With the old line-height: 0.94 the box was shorter than the
   glyphs (scrollHeight overflowed by ~0.11em), so descenders on g/y/j fell
   outside the painted area and rendered transparent (clipped). line-height:
   1.05 plus padding-bottom: 0.12em makes the box cover the full glyphs; both
   are relative units so it holds across the clamp() range (desktop + mobile).
   margin-bottom is reduced to keep the original spacing below the heading. */
.bb-fp .bb-fp-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 1.05;
  letter-spacing: 1px;
  font-weight: 400;
  margin-bottom: 10px;
  padding-bottom: 0.12em;
  border-bottom: none;
}

/* Benefit-led subhead */
.bb-fp .bb-fp-subhead {
  font-size: 18px;
  font-weight: 600;
  color: #0d3d22;
  line-height: 1.5;
  max-width: 520px;
  margin-bottom: 14px;
}
.dark-mode .bb-fp .bb-fp-subhead, .theme-dark .bb-fp .bb-fp-subhead, [data-theme="dark"] .bb-fp .bb-fp-subhead,
body.dark-mode .bb-fp .bb-fp-subhead, body.theme-dark .bb-fp .bb-fp-subhead, body[data-theme="dark"] .bb-fp .bb-fp-subhead,
html.dark-mode .bb-fp .bb-fp-subhead, html.theme-dark .bb-fp .bb-fp-subhead, html[data-theme="dark"] .bb-fp .bb-fp-subhead {
  color: rgba(255,255,255,0.85) !important;
}

/* Hero description - replaces the old subhead + standalone About section.
   Renders $clean_content (Features) or the full content HTML (Strategies),
   so it styles both a plain string and block markup (<p>, <a>). The
   .bb-fp-subhead rules above are now unused but kept as harmless dead CSS. */
.bb-fp .bb-fp-hero-desc {
  font-size: 16px;
  line-height: 1.7;
  color: #555555;
  max-width: 560px;
  margin-bottom: 26px;
}
.bb-fp .bb-fp-hero-desc p {
  margin-bottom: 12px;
}
.bb-fp .bb-fp-hero-desc p:last-child {
  margin-bottom: 0;
}
.bb-fp .bb-fp-hero-desc a {
  color: #2D8659;
  text-decoration: underline;
}
.dark-mode .bb-fp .bb-fp-hero-desc, .theme-dark .bb-fp .bb-fp-hero-desc, [data-theme="dark"] .bb-fp .bb-fp-hero-desc,
body.dark-mode .bb-fp .bb-fp-hero-desc, body.theme-dark .bb-fp .bb-fp-hero-desc, body[data-theme="dark"] .bb-fp .bb-fp-hero-desc,
html.dark-mode .bb-fp .bb-fp-hero-desc, html.theme-dark .bb-fp .bb-fp-hero-desc, html[data-theme="dark"] .bb-fp .bb-fp-hero-desc {
  color: rgba(255,255,255,0.75) !important;
}
.dark-mode .bb-fp .bb-fp-hero-desc a, .theme-dark .bb-fp .bb-fp-hero-desc a, [data-theme="dark"] .bb-fp .bb-fp-hero-desc a,
body.dark-mode .bb-fp .bb-fp-hero-desc a, body.theme-dark .bb-fp .bb-fp-hero-desc a, body[data-theme="dark"] .bb-fp .bb-fp-hero-desc a,
html.dark-mode .bb-fp .bb-fp-hero-desc a, html.theme-dark .bb-fp .bb-fp-hero-desc a, html[data-theme="dark"] .bb-fp .bb-fp-hero-desc a {
  color: #40B67A !important;
}

/* "Included in [tier]" line */
.bb-fp .bb-fp-tier {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #2D8659;
  margin-bottom: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bb-fp .bb-fp-tier::before {
  content: '\2713';
  font-weight: 700;
}
.dark-mode .bb-fp .bb-fp-tier, .theme-dark .bb-fp .bb-fp-tier, [data-theme="dark"] .bb-fp .bb-fp-tier,
body.dark-mode .bb-fp .bb-fp-tier, body.theme-dark .bb-fp .bb-fp-tier, body[data-theme="dark"] .bb-fp .bb-fp-tier,
html.dark-mode .bb-fp .bb-fp-tier, html.theme-dark .bb-fp .bb-fp-tier, html[data-theme="dark"] .bb-fp .bb-fp-tier {
  color: #40B67A !important;
}

/* Hero CTA row: primary button + reviews link side by side
   (homepage .bb-hero-ctas pattern). Stacks on mobile - see media query. */
.bb-fp .bb-fp-hero-ctas {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* Reviews link (plain text, no rating / score / logo) */
.bb-fp .bb-fp-reviews-link {
  font-size: 13px;
  font-weight: 600;
  color: #555555;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bb-fp .bb-fp-reviews-link:hover {
  color: #2D8659;
  text-decoration: underline;
}
.dark-mode .bb-fp .bb-fp-reviews-link, .theme-dark .bb-fp .bb-fp-reviews-link, [data-theme="dark"] .bb-fp .bb-fp-reviews-link,
body.dark-mode .bb-fp .bb-fp-reviews-link, body.theme-dark .bb-fp .bb-fp-reviews-link, body[data-theme="dark"] .bb-fp .bb-fp-reviews-link,
html.dark-mode .bb-fp .bb-fp-reviews-link, html.theme-dark .bb-fp .bb-fp-reviews-link, html[data-theme="dark"] .bb-fp .bb-fp-reviews-link {
  color: rgba(255,255,255,0.6) !important;
}

/* ---- Trust strip ------------------------------------------------------- */
.bb-fp .bb-fp-trust {
  width: 100%;
  background: linear-gradient(135deg, #0a3322 0%, #0d3d22 50%, #1a5438 100%);
  padding: 16px 24px 12px;
}
.bb-fp .bb-fp-trust-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.bb-fp .bb-fp-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  position: relative;
}
.bb-fp .bb-fp-trust-item + .bb-fp-trust-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.15);
}
.bb-fp .bb-fp-trust-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.bb-fp .bb-fp-trust-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.2px;
}
.bb-fp .bb-fp-trust-stat {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 20px !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
}
.bb-fp .bb-fp-trust-text span {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}

/* ---- ABOUT + BENEFITS -------------------------------------------------- */
.bb-fp .bb-fp-about {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  padding: 90px 24px 20px;
  gap: 0;
}
.bb-fp .bb-fp-about h2 {
  font-size: clamp(34px, 4.5vw, 52px);
  letter-spacing: 0.5px;
  color: #0d3d22;
  text-align: center;
  margin-bottom: 18px;
}
.dark-mode .bb-fp .bb-fp-about h2, .theme-dark .bb-fp .bb-fp-about h2, [data-theme="dark"] .bb-fp .bb-fp-about h2,
body.dark-mode .bb-fp .bb-fp-about h2, body.theme-dark .bb-fp .bb-fp-about h2, body[data-theme="dark"] .bb-fp .bb-fp-about h2,
html.dark-mode .bb-fp .bb-fp-about h2, html.theme-dark .bb-fp .bb-fp-about h2, html[data-theme="dark"] .bb-fp .bb-fp-about h2 {
  color: #40B67A !important;
}
.bb-fp .bb-fp-prose {
  font-size: 17px;
  line-height: 1.75;
  color: #555555;
  text-align: center;
  max-width: 720px;
  margin-bottom: 64px;
}
.dark-mode .bb-fp .bb-fp-prose, .theme-dark .bb-fp .bb-fp-prose, [data-theme="dark"] .bb-fp .bb-fp-prose,
body.dark-mode .bb-fp .bb-fp-prose, body.theme-dark .bb-fp .bb-fp-prose, body[data-theme="dark"] .bb-fp .bb-fp-prose,
html.dark-mode .bb-fp .bb-fp-prose, html.theme-dark .bb-fp .bb-fp-prose, html[data-theme="dark"] .bb-fp .bb-fp-prose {
  color: #b8b8b8 !important;
}

/* 3-column benefits cards */
.bb-fp .bb-fp-benefits {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  justify-content: center;
}
.bb-fp .bb-fp-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  background: #f5f7f5;
  border: 1px solid #eaeeea;
  border-radius: 18px;
  padding: 36px 26px;
  font-size: 16px;
  line-height: 1.6;
  color: #444444;
  transition: transform 0.22s, box-shadow 0.22s;
}
.bb-fp .bb-fp-benefit:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.dark-mode .bb-fp .bb-fp-benefit, .theme-dark .bb-fp .bb-fp-benefit, [data-theme="dark"] .bb-fp .bb-fp-benefit,
body.dark-mode .bb-fp .bb-fp-benefit, body.theme-dark .bb-fp .bb-fp-benefit, body[data-theme="dark"] .bb-fp .bb-fp-benefit,
html.dark-mode .bb-fp .bb-fp-benefit, html.theme-dark .bb-fp .bb-fp-benefit, html[data-theme="dark"] .bb-fp .bb-fp-benefit {
  background: #1a1a1a !important;
  border-color: rgba(255,255,255,0.07) !important;
  color: #b8b8b8 !important;
}
.bb-fp .bb-fp-benefit img {
  height: 64px;
  width: auto;
}

/* ---- VIDEO / SCREENSHOT ------------------------------------------------ */
.bb-fp .bb-fp-video {
  width: 100%;
  max-width: 1100px;
  padding: 40px 24px 20px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.bb-fp .bb-fp-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 24px 60px rgba(13, 61, 34, 0.12);
}
.dark-mode .bb-fp .bb-fp-video iframe, .theme-dark .bb-fp .bb-fp-video iframe, [data-theme="dark"] .bb-fp .bb-fp-video iframe,
body.dark-mode .bb-fp .bb-fp-video iframe, body.theme-dark .bb-fp .bb-fp-video iframe, body[data-theme="dark"] .bb-fp .bb-fp-video iframe,
html.dark-mode .bb-fp .bb-fp-video iframe, html.theme-dark .bb-fp .bb-fp-video iframe, html[data-theme="dark"] .bb-fp .bb-fp-video iframe {
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important;
}

/* ---- FAQs -------------------------------------------------------------- */
.bb-fp .bb-fp-faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  padding: 90px 24px 20px;
  gap: 0;
}
.bb-fp .bb-fp-faq > h2 {
  font-size: clamp(34px, 4.5vw, 52px);
  letter-spacing: 0.5px;
  color: #0d3d22;
  text-align: center;
  margin-bottom: 40px;
}
.dark-mode .bb-fp .bb-fp-faq > h2, .theme-dark .bb-fp .bb-fp-faq > h2, [data-theme="dark"] .bb-fp .bb-fp-faq > h2,
body.dark-mode .bb-fp .bb-fp-faq > h2, body.theme-dark .bb-fp .bb-fp-faq > h2, body[data-theme="dark"] .bb-fp .bb-fp-faq > h2,
html.dark-mode .bb-fp .bb-fp-faq > h2, html.theme-dark .bb-fp .bb-fp-faq > h2, html[data-theme="dark"] .bb-fp .bb-fp-faq > h2 {
  color: #40B67A !important;
}
.bb-fp .bb-fp-faqs {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bb-fp .bb-fp-faq-item {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s;
}
.bb-fp .bb-fp-faq-item:hover {
  border-color: rgba(45, 134, 89, 0.35);
}
.dark-mode .bb-fp .bb-fp-faq-item, .theme-dark .bb-fp .bb-fp-faq-item, [data-theme="dark"] .bb-fp .bb-fp-faq-item,
body.dark-mode .bb-fp .bb-fp-faq-item, body.theme-dark .bb-fp .bb-fp-faq-item, body[data-theme="dark"] .bb-fp .bb-fp-faq-item,
html.dark-mode .bb-fp .bb-fp-faq-item, html.theme-dark .bb-fp .bb-fp-faq-item, html[data-theme="dark"] .bb-fp .bb-fp-faq-item {
  background: rgba(45, 134, 89, 0.06) !important;
  border-color: rgba(45, 134, 89, 0.15) !important;
}
.bb-fp .bb-fp-faq-q {
  cursor: pointer;
  display: flex;
  font-weight: 700;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.bb-fp .bb-fp-faq-q p {
  font-size: 17px;
  font-weight: 700;
  color: #0d3d22;
  margin-bottom: 0;
}
.dark-mode .bb-fp .bb-fp-faq-q p, .theme-dark .bb-fp .bb-fp-faq-q p, [data-theme="dark"] .bb-fp .bb-fp-faq-q p,
body.dark-mode .bb-fp .bb-fp-faq-q p, body.theme-dark .bb-fp .bb-fp-faq-q p, body[data-theme="dark"] .bb-fp .bb-fp-faq-q p,
html.dark-mode .bb-fp .bb-fp-faq-q p, html.theme-dark .bb-fp .bb-fp-faq-q p, html[data-theme="dark"] .bb-fp .bb-fp-faq-q p {
  color: #40B67A !important;
}
.bb-fp .bb-fp-faq-q img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.bb-fp .bb-fp-faq-a {
  display: none;
  padding-top: 14px;
}
.bb-fp .bb-fp-faq-a.active {
  display: flex;
}
.bb-fp .bb-fp-faq-a p {
  font-size: 15px;
  line-height: 1.7;
  color: #555555;
  margin-bottom: 0;
}
.dark-mode .bb-fp .bb-fp-faq-a p, .theme-dark .bb-fp .bb-fp-faq-a p, [data-theme="dark"] .bb-fp .bb-fp-faq-a p,
body.dark-mode .bb-fp .bb-fp-faq-a p, body.theme-dark .bb-fp .bb-fp-faq-a p, body[data-theme="dark"] .bb-fp .bb-fp-faq-a p,
html.dark-mode .bb-fp .bb-fp-faq-a p, html.theme-dark .bb-fp .bb-fp-faq-a p, html[data-theme="dark"] .bb-fp .bb-fp-faq-a p {
  color: #9ca3af !important;
}

/* ---- OTHER FEATURES / STRATEGIES cross-link cards --------------------- */
.bb-fp .bb-fp-more {
  width: 100%;
  max-width: 1100px;
  padding: 90px 24px;
  margin: 0 auto;
  background: #ffffff;
}
.dark-mode .bb-fp .bb-fp-more, .theme-dark .bb-fp .bb-fp-more, [data-theme="dark"] .bb-fp .bb-fp-more,
body.dark-mode .bb-fp .bb-fp-more, body.theme-dark .bb-fp .bb-fp-more, body[data-theme="dark"] .bb-fp .bb-fp-more,
html.dark-mode .bb-fp .bb-fp-more, html.theme-dark .bb-fp .bb-fp-more, html[data-theme="dark"] .bb-fp .bb-fp-more {
  background: #0d0d0d !important;
}
.bb-fp .bb-fp-more > h2 {
  font-size: clamp(34px, 4.5vw, 52px);
  letter-spacing: 0.5px;
  color: #0d3d22;
  text-align: center;
  margin-bottom: 40px;
}
.dark-mode .bb-fp .bb-fp-more > h2, .theme-dark .bb-fp .bb-fp-more > h2, [data-theme="dark"] .bb-fp .bb-fp-more > h2,
body.dark-mode .bb-fp .bb-fp-more > h2, body.theme-dark .bb-fp .bb-fp-more > h2, body[data-theme="dark"] .bb-fp .bb-fp-more > h2,
html.dark-mode .bb-fp .bb-fp-more > h2, html.theme-dark .bb-fp .bb-fp-more > h2, html[data-theme="dark"] .bb-fp .bb-fp-more > h2 {
  color: #40B67A !important;
}
.bb-fp .bb-fp-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  align-items: stretch;
  justify-content: center;
}
.bb-fp .bb-fp-more-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  background: #f5f7f5;
  border: 1px solid #eaeeea;
  border-radius: 18px;
  padding: 28px 22px;
  text-decoration: none !important;
  transition: transform 0.22s, box-shadow 0.22s;
}
.bb-fp .bb-fp-more-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.dark-mode .bb-fp .bb-fp-more-card, .theme-dark .bb-fp .bb-fp-more-card, [data-theme="dark"] .bb-fp .bb-fp-more-card,
body.dark-mode .bb-fp .bb-fp-more-card, body.theme-dark .bb-fp .bb-fp-more-card, body[data-theme="dark"] .bb-fp .bb-fp-more-card,
html.dark-mode .bb-fp .bb-fp-more-card, html.theme-dark .bb-fp .bb-fp-more-card, html[data-theme="dark"] .bb-fp .bb-fp-more-card {
  background: #1a1a1a !important;
  border-color: rgba(255,255,255,0.07) !important;
}
.dark-mode .bb-fp .bb-fp-more-card:hover, .theme-dark .bb-fp .bb-fp-more-card:hover, [data-theme="dark"] .bb-fp .bb-fp-more-card:hover,
body.dark-mode .bb-fp .bb-fp-more-card:hover, body.theme-dark .bb-fp .bb-fp-more-card:hover, body[data-theme="dark"] .bb-fp .bb-fp-more-card:hover,
html.dark-mode .bb-fp .bb-fp-more-card:hover, html.theme-dark .bb-fp .bb-fp-more-card:hover, html[data-theme="dark"] .bb-fp .bb-fp-more-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}
.bb-fp .bb-fp-more-card img {
  height: 90px;
  width: auto;
}
.bb-fp .bb-fp-more-card span {
  color: #0d3d22;
  font-size: 16px;
  font-weight: 700;
}
.dark-mode .bb-fp .bb-fp-more-card span, .theme-dark .bb-fp .bb-fp-more-card span, [data-theme="dark"] .bb-fp .bb-fp-more-card span,
body.dark-mode .bb-fp .bb-fp-more-card span, body.theme-dark .bb-fp .bb-fp-more-card span, body[data-theme="dark"] .bb-fp .bb-fp-more-card span,
html.dark-mode .bb-fp .bb-fp-more-card span, html.theme-dark .bb-fp .bb-fp-more-card span, html[data-theme="dark"] .bb-fp .bb-fp-more-card span {
  color: #40B67A !important;
}

/* Odds Comparison icon is a light/white "OCT" asset with no dark fill, so it
   is invisible on the light card background. Add a dark rounded chip behind
   only that icon in light mode (added via a modifier class in the PHP loop
   when the linked item title contains "odds comparison"). box-sizing keeps
   the icon footprint identical to the other icons. In dark mode the chip is
   removed (transparent) so no box shows over the dark card. */
.bb-fp .bb-fp-more-card img.bb-fp-more-icon-chip {
  background: #0d3d22;
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
}
.dark-mode .bb-fp .bb-fp-more-card img.bb-fp-more-icon-chip, .theme-dark .bb-fp .bb-fp-more-card img.bb-fp-more-icon-chip, [data-theme="dark"] .bb-fp .bb-fp-more-card img.bb-fp-more-icon-chip,
body.dark-mode .bb-fp .bb-fp-more-card img.bb-fp-more-icon-chip, body.theme-dark .bb-fp .bb-fp-more-card img.bb-fp-more-icon-chip, body[data-theme="dark"] .bb-fp .bb-fp-more-card img.bb-fp-more-icon-chip,
html.dark-mode .bb-fp .bb-fp-more-card img.bb-fp-more-icon-chip, html.theme-dark .bb-fp .bb-fp-more-card img.bb-fp-more-icon-chip, html[data-theme="dark"] .bb-fp .bb-fp-more-card img.bb-fp-more-icon-chip {
  background: transparent !important;
}

/* ---- FINAL CTA --------------------------------------------------------- */
.bb-fp .bb-fp-finalcta {
  width: 100%;
  padding: 110px 24px;
  background: linear-gradient(155deg, #071d11 0%, #0d3d22 45%, #124d2b 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.bb-fp .bb-fp-finalcta::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(64, 182, 122, 0.12) 0%, transparent 65%);
  pointer-events: none;
}
.bb-fp .bb-fp-finalcta-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
.bb-fp .bb-fp-finalcta h2 {
  color: #ffffff !important;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 0.95;
  margin-bottom: 18px;
}
.bb-fp .bb-fp-finalcta p {
  font-size: 18px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 36px;
  line-height: 1.65;
}
.bb-fp .bb-fp-finalcta .bb-fp-btn {
  background: #ffffff !important;
  color: #0d3d22 !important;
  font-size: 18px;
  padding: 20px 56px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.bb-fp .bb-fp-finalcta .bb-fp-btn:hover {
  background: #f2f2f2 !important;
  color: #0d3d22 !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
}
.bb-fp .bb-fp-finalcta-note {
  margin-top: 22px;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .bb-fp .bb-fp-hero-inner { flex-direction: column; align-items: flex-start; gap: 40px; }
  .bb-fp .bb-fp-hero-media { width: 100%; }
  .bb-fp .bb-fp-benefits { grid-template-columns: 1fr; }
  .bb-fp .bb-fp-more-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .bb-fp .bb-fp-hero { padding: 56px 24px 32px; }
  .bb-fp .bb-fp-hero-ctas { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bb-fp .bb-fp-trust-item + .bb-fp-trust-item::before { display: none; }
  .bb-fp .bb-fp-trust-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; justify-items: center; }
  .bb-fp .bb-fp-trust-item { padding: 10px 16px; width: 100%; justify-content: center; }
  .bb-fp .bb-fp-more-grid { grid-template-columns: 1fr; }
}

/* ---- Footer flush ------------------------------------------------------
   The theme sets .site-footer { margin-top: 3em; } globally and only zeroes
   it on the homepage (inline style in footer.php). On the v2 templates that
   3em margin renders the page background as a strip between the final CTA
   and the footer (white in light mode, black in dark mode). This stylesheet
   is enqueued ONLY on the v2 templates, so overriding the footer margin here
   is safe and affects v2 pages only. The footer keeps its own dark-green
   background in both modes, so the final CTA now sits flush against it. */
.site-footer { margin-top: 0 !important; }