/*
 * IFA Workshop — Beaver Builder GRANULAR layout (like the homepage).
 * Each section row carries class "ifa-native" so the existing ifa-native.css styles
 * both the widgets (HTML modules) AND the split-out Heading/Rich-Text modules that
 * reuse the original 2-level classes (ifa-hero-h2, ifa-matrix-h2, ifa-eyebrow,
 * ifa-clients-label, ifa-faq-title, ifa-btn-*). This file adds: BB wrapper flatten +
 * full-bleed, section row backgrounds/padding/inner max-width (the old section
 * wrappers are gone), 2-column layouts, and explicit styling for the wrapped-head
 * sections (exp/rm-hero/rm-step/lc/out/inv/cta) whose selectors were .X-head h2.
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Geist:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,600;1,600&family=Inter:wght@400;500;600&display=swap');

/* ── BB wrapper flatten + full-bleed ── */
body.ifa-page #content { background:#FEFBF5; }
body.ifa-page #content > .ast-container { max-width:100% !important; padding-left:0 !important; padding-right:0 !important; width:100% !important; }
body.ifa-page .fl-builder-content .ifab-sec { width:100% !important; max-width:100% !important; margin:0 !important; padding-left:0 !important; padding-right:0 !important; }
/* Horizontal gutter lives on the content-wrap (not the row) so a native BB Row Background covers the
   section edge-to-edge; the per-section vertical padding rules below are longhand and don't touch it. */
body.ifa-page .fl-builder-content .ifab-sec .fl-row-content-wrap { width:100% !important; max-width:100% !important; margin:0 !important; padding-top:0 !important; padding-bottom:0 !important; padding-left:24px !important; padding-right:24px !important; }
/* Section backgrounds are now native BB Row Backgrounds (admin-editable) on the content-wrap, so it
   must NOT be forced transparent. Sections without a BB background stay naturally transparent. */
body.ifa-page .fl-builder-content .ifab-sec .fl-row-content { margin:0 auto; }
body.ifa-page .fl-builder-content .ifab-sec .fl-col-content { padding:0 !important; }
body.ifa-page .fl-builder-content .ifab-sec .fl-module { margin:0 !important; }

/* ── section rows: bg + vertical padding + inner max-width (replace old section wrappers) ── */
/* Hero: NO horizontal padding + NO light fallback bg on the ROW. The dark background is a native BB
   Row Background painted on the inner .fl-row-content-wrap; the horizontal gutter moved to that wrapper
   (below) so the dark bg reaches edge-to-edge (was: 24px row padding exposed a light strip at the edges). */
body.ifa-page .ifab-hero    { position:relative; overflow:hidden; }
body.ifa-page .ifab-hero    .fl-row-content { max-width:min(1440px, var(--as-fill)); }
body.ifa-page .ifab-matrix  { position:relative; overflow:hidden; padding:0 24px 96px; background:#fff; }
body.ifa-page .ifab-matrix  .fl-row-content { max-width:min(1320px, var(--as-fill)); }
body.ifa-page .ifab-exp     { position:relative; overflow:hidden; padding:24px 24px 32px; background:#FEFCF5; }
body.ifa-page .ifab-exp     .fl-row-content { max-width:min(1440px, var(--as-fill)); }
body.ifa-page .ifab-clients { background:#FEFBF5; padding:32px 24px; }
body.ifa-page .ifab-clients .fl-row-content { max-width:min(1349px, var(--as-fill)); }
body.ifa-page .ifab-rmhero  { padding:96px 24px 80px; background:#fff; }
body.ifa-page .ifab-rmhero  .fl-row-content { max-width:min(1440px, var(--as-fill)); }
body.ifa-page .ifab-tl      { padding:48px 24px; background:#fff; }
body.ifa-page .ifab-tl      .fl-row-content { max-width:min(1416px, var(--as-fill)); }
body.ifa-page .ifab-tl-last { padding-bottom:48px; }
/* timeline steps: the text column starts at the TOP of its animation/visual (not centered) */
body.ifa-page .ifab-tl.ifab-2col .fl-col-group { align-items:flex-start; }
body.ifa-page .ifab-lc      { padding:32px 24px 96px; background:#FEFCF5; }
body.ifa-page .ifab-lc      .fl-row-content { max-width:min(1416px, var(--as-fill)); }
body.ifa-page .ifab-out     { padding:0 24px 96px; }
body.ifa-page .ifab-out     .fl-row-content { max-width:min(1440px, var(--as-fill)); }
body.ifa-page .ifab-faq     { padding:8px 24px 48px; background:#FEFBF5; }
body.ifa-page .ifab-faq     .fl-row-content { max-width:min(1392px, var(--as-fill)); }
body.ifa-page .ifab-inv     { padding:32px 24px 96px; background:#fff; }
body.ifa-page .ifab-inv     .fl-row-content { max-width:min(1248px, var(--as-fill)); }
body.ifa-page .ifab-cta     { padding:96px 24px; background:#F5EEDD; }
body.ifa-page .ifab-cta     .fl-row-content { max-width:min(1320px, var(--as-fill)); }

/* centered heads */
body.ifa-page .ifab-matrix .fl-row-content, body.ifa-page .ifab-exp .fl-row-content,
body.ifa-page .ifab-rmhero .fl-row-content, body.ifa-page .ifab-lc .fl-row-content,
body.ifa-page .ifab-out .fl-row-content, body.ifa-page .ifab-faq .fl-row-content { text-align:center; }
body.ifa-page .ifab-clients .fl-row-content { text-align:center; }

/* ── 2-column rows (hero / inv / cta / timeline steps) ── */
body.ifa-page .ifab-2col .fl-col-group { display:flex; align-items:center; flex-wrap:nowrap; gap:48px; }
body.ifa-page .ifab-cta.ifab-2col .fl-col-group { align-items:center; }
@media (max-width:1023px){ body.ifa-page .ifab-2col .fl-col-group { flex-wrap:wrap; gap:32px; } }
/* HERO: text column must fit the wider heading line "with AI Adoption?" (~528px at 72px)
   + the two CTA buttons on one row (~447px), so give it 545px; poll keeps its 680px.
   space-between pushes the poll to the right edge (React look). BB's flexGrow wasn't
   filling reliably, so widths are explicit (flex:0 1 so they still shrink on smaller
   desktops before the mobile stack). */
body.ifa-page .ifab-hero .fl-row-content { max-width:min(1440px, var(--as-fill)) !important; }
body.ifa-page .ifab-hero .fl-col-group { justify-content:space-between !important; gap:0 !important; flex-wrap:nowrap !important; align-items:center; }
body.ifa-page .ifab-hero .fl-col:first-child { flex:0 1 545px !important; width:545px !important; max-width:545px !important; min-width:0 !important; }
body.ifa-page .ifab-hero .fl-col:last-child { flex:0 1 680px !important; width:680px !important; max-width:680px !important; min-width:0 !important; }
/* keep the two hero CTA buttons on one line */
body.ifa-page .ifab-hero .ifa-hero-btns { flex-wrap:nowrap; }
@media (max-width:1023px){
  body.ifa-page .ifab-hero .fl-col-group { flex-wrap:wrap !important; justify-content:center !important; gap:32px !important; }
  body.ifa-page .ifab-hero .fl-col:first-child,
  body.ifa-page .ifab-hero .fl-col:last-child { flex:0 0 100% !important; width:100% !important; max-width:100% !important; }
  body.ifa-page .ifab-hero .ifa-hero-btns { flex-wrap:wrap; }
}

/* ── explicit styling for wrapped-head sections + timeline steps ── */
body.ifa-page .fl-builder-content .ifab-h2c { margin:0; font-family:"Fraunces",serif !important; font-weight:400 !important; font-size:clamp(36px,5vw,56px) !important; line-height:1.05 !important; color:#0B1F3D !important; -webkit-text-fill-color:#0B1F3D !important; }
body.ifa-page .fl-builder-content .ifab-h2c .it { font-style:italic; color:#FF1F5B !important; -webkit-text-fill-color:#FF1F5B !important; font-family:"Fraunces",serif; }
body.ifa-page .fl-builder-content .ifab-lead { margin:20px auto 0; max-width:700px; font-family:"Geist",sans-serif; font-size:18px; line-height:1.6; color:rgba(11,31,61,.66); }
body.ifa-page .fl-builder-content .ifab-lead p { margin:0; }
/* rm-hero p is slightly different */
body.ifa-page .fl-builder-content .ifab-rmhero-p { margin:24px auto 0; max-width:640px; font-size:17px; line-height:1.55; color:#666; }
/* timeline step head (h3 pink + p) */
body.ifa-page .fl-builder-content .ifab-rm-h3 { margin:0 0 16px; font-family:"Fraunces",serif !important; font-weight:600 !important; font-size:32px !important; line-height:1.15 !important; color:#FF1F5B !important; -webkit-text-fill-color:#FF1F5B !important; text-align:left; }
body.ifa-page .fl-builder-content .ifab-rm-h3 .it { font-style:italic; }
/* the "&" in "P&L" is a not-italic span nested inside the pink italic .it; Astra's heading
   span handling was resetting its fill to ink — force it back to the heading pink (React
   keeps the whole "03. Ranking and P&L impact." heading pink). */
body.ifa-page .fl-builder-content .ifab-rm-h3 .noit { font-style:normal; color:#FF1F5B !important; -webkit-text-fill-color:#FF1F5B !important; }
/* keep each roadmap step heading on one line at desktop (e.g. "02. Score the Processes.") */
@media (min-width:1024px){ body.ifa-page .fl-builder-content .ifab-rm-h3 { white-space:nowrap; } }
body.ifa-page .fl-builder-content .ifab-rm-p { margin:0; font-family:"Geist",sans-serif; font-size:16px; line-height:1.7; color:rgba(11,31,61,.66); text-align:left; }
body.ifa-page .fl-builder-content .ifab-rm-p p { margin:0; }
/* inv text block (left-aligned, smaller h2) */
body.ifa-page .fl-builder-content .ifab-inv-h2 { margin:0; font-family:"Fraunces",serif !important; font-weight:400 !important; font-size:clamp(28px,4vw,36px) !important; line-height:1.15 !important; color:#0B1F3D !important; -webkit-text-fill-color:#0B1F3D !important; text-align:left; }
body.ifa-page .fl-builder-content .ifab-inv-h2 .it { font-style:italic; color:#FF1F5B !important; -webkit-text-fill-color:#FF1F5B !important; }
body.ifa-page .fl-builder-content .ifab-inv-p { margin:16px 0 0; font-family:"Inter",sans-serif; font-size:16px; line-height:1.6; color:#666; text-align:left; }
body.ifa-page .fl-builder-content .ifab-inv-p p { margin:0; }
body.ifa-page .fl-builder-content .ifab-inv-p strong { font-weight:600; color:#0A0A0A; }
/* cta text (h2 42/56, left on desktop) */
body.ifa-page .fl-builder-content .ifab-cta-h2 { margin:0 0 24px; font-family:"Fraunces",serif !important; font-weight:400 !important; font-size:clamp(42px,5vw,56px) !important; line-height:1.05 !important; letter-spacing:-0.025em !important; color:#0B1F3D !important; -webkit-text-fill-color:#0B1F3D !important; text-align:left; }
body.ifa-page .fl-builder-content .ifab-cta-h2 .it { font-style:italic; color:#FF1F5B !important; -webkit-text-fill-color:#FF1F5B !important; }
body.ifa-page .fl-builder-content .ifab-cta-p { margin:0 0 32px; max-width:672px; font-family:"Geist",sans-serif; font-size:19px; line-height:1.6; color:rgba(11,31,61,.66); text-align:left; }
body.ifa-page .fl-builder-content .ifab-cta-p p { margin:0; }
/* the `.ifab-sec .fl-module{margin:0!important}` flatten (line ~20) was zeroing the heading + para
   bottom margins (BB stacks `.fl-module` on the SAME element as `.ifab-cta-h2`/`-p`), so the heading,
   paragraph and buttons were all touching (0 gap). Restore generous vertical rhythm with a compound
   `.fl-module` selector so it out-specifies the flatten. */
body.ifa-page .fl-builder-content .ifab-cta .ifab-cta-h2.fl-module { margin-bottom:32px !important; }
body.ifa-page .fl-builder-content .ifab-cta .ifab-cta-p.fl-module  { margin-bottom:40px !important; }

/* hero (session 1) vertical rhythm — the .ifab-sec .fl-module{margin:0!important} flatten
   zeroed the eyebrow / heading / sub-copy bottom margins (all touching). Restore React's
   mb-6 / mb-4 / mb-8 with a compound .fl-module selector so it out-specifies the flatten. */
body.ifa-page .fl-builder-content .ifab-hero .ifa-eyebrow.fl-module  { margin-bottom:24px !important; }
body.ifa-page .fl-builder-content .ifab-hero .ifa-hero-h2.fl-module  { margin-bottom:16px !important; }
body.ifa-page .fl-builder-content .ifab-hero .ifa-hero-sub.fl-module { margin-bottom:32px !important; }

/* faq title uses Cormorant (reuse original .ifa-faq-title via .ifa-native row) — ensure left align in its centered row */
body.ifa-page .ifab-faq .fl-row-content { text-align:left; }

/* ── force pink italic on ALL heading .it spans (Astra text-fill beats ifa-native.css on split heading modules) ── */
body.ifa-page .fl-builder-content .fl-module-heading .it {
  font-family:"Fraunces",serif !important; font-style:italic !important;
  color:#FF1F5B !important; -webkit-text-fill-color:#FF1F5B !important;
}

/* ── matrix heading → grid gap (React .ifa-matrix-h2 has margin-bottom:48px) ──
   BB collapsed the heading's custom class onto the .fl-module element, so the
   .ifab-sec .fl-module{margin:0!important} flatten above was zeroing it. Restore
   with a compound override so there's clear space before the matrix zones. */
body.ifa-page .fl-builder-content .ifab-matrix .ifa-matrix-h2.fl-module { margin-bottom:48px !important; }

/* ── "voting limit reached" note ALSO at the BOTTOM of the poll form ──
   React shows the note in two places: top-right of the head (kept as-is) AND below the
   action buttons. ifa-page.js clones the .ifa-poll-limit span to the end of .ifa-poll
   (.ifa-poll-limit-bottom); render that copy as a centered note under the buttons (React:
   <p class="mt-2 text-center text-[13px] font-medium text-[#E30B5D]">). Hidden via [hidden]
   until the vote limit is hit. */
body.ifa-page .fl-builder-content .ifa-poll > .ifa-poll-limit {
  display:block; order:99; width:100%; margin-top:12px; text-align:center;
}

/* ═══ Experience IFA section (React IFAWorkshop.tsx L777-792 + ExperienceIFA.tsx) ═══
   Intro block is centered (heading + para), the interactive card content is LEFT-aligned.
   The .ifab-sec .fl-module{margin:0!important} flatten killed the para's mx-auto + top/bottom
   margins, so it rendered left-stuck with no gap; the row's text-align:center leaked into the
   card. React: <p class="mx-auto mt-5 max-w-[680px]"> inside a <div class="mb-12"> wrapper. */
body.ifa-page .fl-builder-content .ifab-exp .ifab-lead { margin:20px auto 48px !important; max-width:680px; }
body.ifa-page .fl-builder-content .ifab-exp .ifa-exp-game { text-align:left; }

/* ═══ Roadmap subtitle (React <p class="mx-auto mt-6 max-w-[640px]"> → 24px below the H1) ═══
   .ifab-rmhero-p already declares margin:24px auto 0 but the flatten zeroed it — restore. */
body.ifa-page .fl-builder-content .ifab-rmhero .ifab-rmhero-p { margin:24px auto 0 !important; }

/* ═══ Life cycle heading/subtitle (React gap-[14.90px] heading→sub, gap-[56.01px] sub→cards) ═══
   Heading + subtitle modules were flattened to margin:0, so both touched the heading above and
   the cards below. Restore ~15px under the heading and 56px under the subtitle (before cards). */
body.ifa-page .fl-builder-content .ifab-lc .ifab-h2c { margin-bottom:15px !important; }
body.ifa-page .fl-builder-content .ifab-lc .ifab-lead { margin:0 auto 56px !important; max-width:720px; }

/* ═══ Investment section (React IFAWorkshop.tsx L1896-1988) ═══
   Two columns inside a 1040px container: text (max-w-461) + dark pricing panel (w-515.43),
   gap-16 (64px). WP rendered the text col at 381px so the H2 wrapped to 3 lines (React = 2)
   and the gap was 48px. Pin the React widths; 461+515+64 = 1040 (exact fit). */
body.ifa-page .fl-builder-content .ifab-inv .fl-col-group { gap:64px !important; justify-content:space-between !important; align-items:center !important; flex-wrap:nowrap !important; }
body.ifa-page .fl-builder-content .ifab-inv .fl-col:first-child { flex:0 0 461px !important; width:461px !important; max-width:461px !important; }
body.ifa-page .fl-builder-content .ifab-inv .fl-col:last-child  { flex:0 0 515px !important; width:515px !important; max-width:515px !important; }
/* React text column is `flex flex-col gap-6` — restore the 24px between the H2 and the two
   paragraphs (the .fl-module{margin:0} flatten removed the module spacing). */
body.ifa-page .fl-builder-content .ifab-inv .fl-col:first-child .fl-col-content { display:flex; flex-direction:column; gap:24px; }

/* ═══ Drift-Zone CTA (React IFAWorkshop.tsx L1990-2055) ═══
   Text block (flex-1) + drifting car (w-320 shrink-0), justify-between so the car sits at the
   RIGHT edge. WP rendered text 554 / car-col 402 → H2 wrapped to 4 lines (React = 2) and the
   car floated 130px from the right. Let the text grow; pin the car column to 320px. */
/* BB's column flex refused to grow the text col, and its `gap` left a phantom 64px inset on
   each side (car overshot the right edge). Fix deterministically: gap:0 and size the two
   columns to sum to exactly 100% — text col = calc(100% - 320px) with the 64px visual gap
   baked into its padding-right (border-box), car col = 320px pinned flush to the right. */
body.ifa-page .fl-builder-content .ifab-cta .fl-col-group { gap:0 !important; justify-content:flex-start !important; align-items:center !important; flex-wrap:nowrap !important; }
body.ifa-page .fl-builder-content .ifab-cta .fl-col:first-child { flex:0 0 calc(100% - 320px) !important; width:calc(100% - 320px) !important; max-width:none !important; min-width:0 !important; box-sizing:border-box !important; padding-right:64px !important; }
body.ifa-page .fl-builder-content .ifab-cta .fl-col:last-child  { flex:0 0 320px !important; width:320px !important; max-width:320px !important; }

/* mobile: both 2-col sections stack full-width */
@media (max-width:1023px){
  body.ifa-page .fl-builder-content .ifab-inv .fl-col:first-child, body.ifa-page .fl-builder-content .ifab-inv .fl-col:last-child,
  body.ifa-page .fl-builder-content .ifab-cta .fl-col:first-child, body.ifa-page .fl-builder-content .ifab-cta .fl-col:last-child {
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
  }
  body.ifa-page .fl-builder-content .ifab-inv .fl-col-group, body.ifa-page .fl-builder-content .ifab-cta .fl-col-group { flex-wrap:wrap !important; gap:32px !important; }
}

/* ═══ Roadmap step 04 "Execution Plan" — alternate the columns ═══
   React alternates the visual to the LEFT and the text to the RIGHT (lg:order-1 on the
   DecisionFlow visual, lg:order-2 on the text). BB extracted the columns in DOM order
   [text, visual], so it rendered text-left / visual-right. Swap them with flex order on the
   last timeline row (steps 01-03 already match React). Applies at all widths so the mobile
   stack keeps React's visual-top / text-bottom order too. */
body.ifa-page .fl-builder-content .ifab-tl-last .fl-col:first-child { order:2 !important; }
body.ifa-page .fl-builder-content .ifab-tl-last .fl-col:last-child  { order:1 !important; }

/* MOBILE: every timeline step stacks as heading+paragraph FIRST, then its animation/GIF
   (the desktop zigzag puts the visual first in DOM for some steps / swaps step-4 via order;
   force the heading column to the top for all of them). The text column is the one holding
   a heading module; the visual column has none. */
@media (max-width:1023px){
  body.ifa-page .ifab-tl .fl-col-group { flex-direction:column; align-items:stretch; gap:22px; }
  body.ifa-page .fl-builder-content .ifab-tl .fl-col { width:100% !important; max-width:100% !important; }
  body.ifa-page .fl-builder-content .ifab-tl .fl-col:has(.fl-heading)      { order:-1 !important; }
  body.ifa-page .fl-builder-content .ifab-tl .fl-col:not(:has(.fl-heading)){ order:0 !important; }
  body.ifa-page .ifab-tl      { padding:28px 20px; }
  body.ifa-page .ifab-tl-last { padding-bottom:36px; }
}

/* ── Outcomes + lifecycle lead copy fixes (client) ──
   The lead paragraphs rendered full navy (an override beat .ifab-lead's 66% gray) and the
   OUTCOMES lead lost its auto-centering to the .ifab-sec .fl-module{margin:0} flatten (there
   was a restore for .ifab-lc/.ifab-exp but not .ifab-out). React: centered, 66% gray. */
/* body-text color now set natively on each rich-text module's BB Text Color field (admin-editable) */
body.ifa-page .fl-builder-content .ifab-out .ifab-lead { margin:20px auto 0 !important; }
/* Outcome cards: React left-aligns the card content; the row's text-align:center leaked in. */
body.ifa-page .ifab-out .ifa-out-card { text-align:left; }

/* One-flat-fee + drift-CTA paragraphs render full navy (a p-color override beats the module
   rule); React: gray body with dark-bold key phrases. Force it. */
/* body-text color now set natively on each rich-text module's BB Text Color field (admin-editable);
   the bold key-phrase (strong) stays dark for emphasis */
body.ifa-page .fl-builder-content .ifab-inv-p strong { color:#0A0A0A !important; font-weight:600; }

/* The .fl-col-group clearfix ::before/::after (content:" "; display:table) become phantom
   flex items; with gap+space-between they eat a 64px slot and shove the investment 2-col
   block to the right (uneven side spacing). Neutralize them so it centers. */
body.ifa-page .fl-builder-content .ifab-inv .fl-col-group::before,
body.ifa-page .fl-builder-content .ifab-inv .fl-col-group::after { display:none !important; }

/* body-text color now set natively on each rich-text module's BB Text Color field (admin-editable) */

/* ── EDITOR-FRIENDLY SECTION BACKGROUNDS: padding on inner wrapper so a BB editor
   Row Background fills the whole section (see daniel-bb.css). IFA forces wrapper
   padding to 0 !important, so these match that specificity. ── */
body.ifa-page .fl-builder-content .ifab-sec { padding-top:0 !important; padding-bottom:0 !important; }
body.ifa-page .fl-builder-content .ifab-hero > .fl-row-content-wrap    { padding-top:44px !important; padding-bottom:80px !important; padding-left:24px !important; padding-right:24px !important; }
body.ifa-page .fl-builder-content .ifab-matrix > .fl-row-content-wrap  { padding-top:0px !important; padding-bottom:96px !important; }
body.ifa-page .fl-builder-content .ifab-exp > .fl-row-content-wrap     { padding-top:24px !important; padding-bottom:32px !important; }
body.ifa-page .fl-builder-content .ifab-clients > .fl-row-content-wrap { padding-top:32px !important; padding-bottom:32px !important; }
body.ifa-page .fl-builder-content .ifab-rmhero > .fl-row-content-wrap  { padding-top:96px !important; padding-bottom:80px !important; }
body.ifa-page .fl-builder-content .ifab-tl > .fl-row-content-wrap      { padding-top:48px !important; padding-bottom:48px !important; }
body.ifa-page .fl-builder-content .ifab-lc > .fl-row-content-wrap      { padding-top:32px !important; padding-bottom:96px !important; }
body.ifa-page .fl-builder-content .ifab-out > .fl-row-content-wrap     { padding-top:0px !important; padding-bottom:96px !important; }
body.ifa-page .fl-builder-content .ifab-faq > .fl-row-content-wrap     { padding-top:8px !important; padding-bottom:48px !important; }
body.ifa-page .fl-builder-content .ifab-inv > .fl-row-content-wrap     { padding-top:32px !important; padding-bottom:96px !important; }
body.ifa-page .fl-builder-content .ifab-cta > .fl-row-content-wrap     { padding-top:96px !important; padding-bottom:96px !important; }

/* IFA CTA buttons converted to NATIVE Beaver Builder Button modules (editable in BB).
   Layout (left on desktop, centered mobile), font, height, hover kept to match the old .ifa-cta-btns. */
body.ifa-page .fl-builder-content .ifa-cta-col > .fl-col-content { display:block !important; text-align:center; }
@media (min-width:768px){ body.ifa-page .fl-builder-content .ifa-cta-col > .fl-col-content { text-align:left; } }
body.ifa-page .fl-builder-content .fl-module.ifa-ctabtn { display:inline-block !important; width:auto !important; vertical-align:top; margin:14px 12px 0 0 !important; }
body.ifa-page .fl-builder-content .ifa-ctabtn .fl-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:"Geist",sans-serif; font-size:15px; font-weight:500; line-height:1; white-space:nowrap; transition:background .2s, transform .2s; }
body.ifa-page .fl-builder-content .ifa-ctabtn-book .fl-button:hover { background:rgba(255,31,91,.9) !important; transform:scale(1.02); }
body.ifa-page .fl-builder-content .ifa-ctabtn-ask .fl-button:hover { background:rgba(0,0,0,.05) !important; }

/* IFA $2,900 investment card: the dark-card styling moved to the COLUMN so its 2 buttons are native BB
   Button modules INSIDE the dark card. Book (pink) + Ask (white outline), row, height 60, exact. */
body.ifa-page .fl-builder-content .ifa-inv-col > .fl-col-content { border-radius:20px; padding:47px 40px 48px !important; overflow:hidden; box-sizing:border-box; display:block; }
body.ifa-page .fl-builder-content .ifa-inv-col .ifa-inv-card { background:transparent !important; padding:0 !important; width:auto !important; }
body.ifa-page .fl-builder-content .ifa-inv-col .fl-module.ifa-invbtn { display:inline-block !important; width:auto !important; vertical-align:top; margin:19px 16px 0 0 !important; }
body.ifa-page .fl-builder-content .ifa-invbtn .fl-button { height:60px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 28px !important; font-family:"Inter",sans-serif; font-size:15px; font-weight:600; line-height:1; white-space:nowrap; transition:background .2s, transform .2s; }
body.ifa-page .fl-builder-content .ifa-invbtn-book .fl-button:hover { background:rgba(255,31,91,.9) !important; transform:scale(1.02); }
body.ifa-page .fl-builder-content .ifa-invbtn-ask .fl-button:hover { background:rgba(255,255,255,.05) !important; }
body.ifa-page .fl-builder-content .ifa-invbtn-book .fl-button { border:0 !important; }
/* IFA inv card: flex row for the 2 buttons (inline-block whitespace was wrapping the 2nd button) */
body.ifa-page .fl-builder-content .ifa-inv-col > .fl-col-content { display:flex !important; flex-direction:row; flex-wrap:wrap; align-content:flex-start; column-gap:16px; }
body.ifa-page .fl-builder-content .ifa-inv-col > .fl-col-content::before, body.ifa-page .fl-builder-content .ifa-inv-col > .fl-col-content::after { display:none !important; }
body.ifa-page .fl-builder-content .ifa-inv-col > .fl-col-content > .fl-module-html { flex:0 0 100%; max-width:100%; }
body.ifa-page .fl-builder-content .ifa-inv-col .fl-module.ifa-invbtn { display:block !important; flex:0 0 auto !important; width:auto !important; margin:19px 0 0 0 !important; }