/* ============================================================
   Florence component styles
   See docs/COMPONENTS.md for the catalog.
   See docs/DESIGN_TOKENS.md for the token system.
   ============================================================ */

:root {
  /* Brand colors — values harvested from Figma "Product Page Template v1.1" (2026-05-01).
     Token names mirror Figma's: text/secondary, background/overlay, etc. */
  --flo-color-coral: #ff7859;             /* Figma: text/secondary, brand coral on dark */
  --flo-color-coral-dark: #e85f44;
  --flo-color-plum: #4a236d;              /* Figma: colors/secondary/structured-plum */
  --flo-color-plum-dark: #361950;
  --flo-color-purple: #564787;            /* legacy MVP purple — retained for stat-card defaults */
  --flo-color-purple-dark: #3e3361;
  --flo-color-bg-overlay: #211236;        /* Figma: background/overlay, hero bg */
  --flo-color-text: #211236;              /* Figma: text/primary */
  --flo-color-text-muted: #6b7280;
  --flo-color-text-inverse: #f5edff;      /* Figma: text/inverse, body on dark */
  --flo-color-link: #b582ff;              /* Figma: text/link — light lavender accent on dark */
  --flo-color-bg: #ffffff;
  --flo-color-bg-alt: #f7f5fb;
  --flo-color-bg-subtle: #fffaf0;          /* Figma: background/subtle (hero cream top) */

  /* Typography — family names match the fonts loaded by Avada Custom Fonts.
     PPFrama-Semibold is a single-weight face (always renders semibold);
     don't override font-weight on display elements or you'll trigger
     synthetic bolding. Google Sans Flex is a variable font — weights 300-900
     work as expected. */
  --flo-font-display: 'PPFrama-Semibold', 'Times New Roman', serif;
  --flo-font-body: 'Google Sans Flex', 'Arial', 'Helvetica', sans-serif;
  --flo-size-h1: 48px;
  --flo-size-h2: 36px;
  --flo-size-h3: 30px;
  --flo-size-h4: 24px;
  --flo-size-body-lg: 18px;
  --flo-size-body-md: 16px;
  --flo-size-body: 16px;
  --flo-leading-display: 1.2;
  --flo-leading-body: 1.4;

  /* Spacing — 4px base scale */
  --flo-space-1: 0.25rem;   /* 4 */
  --flo-space-2: 0.5rem;    /* 8 */
  --flo-space-3: 1rem;      /* 16 */
  --flo-space-4: 1.5rem;    /* 24 */
  --flo-space-5: 2rem;      /* 32 */
  --flo-space-6: 3rem;      /* 48 */
  --flo-space-7: 4.5rem;    /* 72 */
  --flo-space-8: 6rem;      /* 96 */
  --flo-space-10: 10rem;    /* 160 — Figma hero side padding */

  /* Radius */
  --flo-radius-sm: 6px;
  --flo-radius-md: 12px;
  --flo-radius-lg: 24px;
  --flo-radius-pill: 999px;

  /* Breakpoints (referenced via media queries; CSS vars don't work inside @media) */
}

.fusion-sticky-container.fusion-builder-row-2 {
  box-shadow: none !important;
}

.fusion-sticky-container.fusion-builder-row-2.fusion-container-stuck {
  top: 0 !important;
}

.fusion-sticky-container.fusion-builder-row-1.fusion-container-stuck.fusion-sticky-transition {
  display: none !important;
}

/* ------------------------------------------------------------
   Header / nav overrides — Avada Header Layout is configured
   in the admin UI; these rules tweak what we can't reach there.
   Per Figma 2104:10978 (utility nav) + 2104:10987 (mega nav).
   ------------------------------------------------------------ */

/* More breathing room between the utility row and the mega-nav pill. */
.fusion-body .fusion-builder-row-2 {
  margin-top: 24px;
}

/* Logo — shrink from native ~154px display down to 120px per Figma. */
.fusion-body .fusion-tb-header .fusion-logo img {
  max-width: 120px;
  width: 120px;
  height: auto;
}

/* Avada applies 20px horizontal margin to every layout column by default,
   which adds 80px of dead space inside the mega-nav pill and squeezes the
   menu enough that the CTA wraps to a second row. Zero it out. */
.fusion-body .fusion-builder-row-2 .fusion-column-wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* UberMenu's <ul> is `display: block` with floated items, so when content
   exceeds the column width the last item wraps. Convert it to flex so all
   items stay on one row, the CTA pushes to the far right, and the gap is
   consistent across items. */
.fusion-body .ubermenu .ubermenu-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px;
  width: 100%;
}
.fusion-body .ubermenu .ubermenu-nav > li.ubermenu-item-level-0 {
  float: none !important;
  flex: 0 0 auto !important;
}
.fusion-body .ubermenu .ubermenu-nav > li.ubermenu-align-right {
  margin-left: auto !important;
}
/* UberMenu wraps custom-content items (the CTA <li>) in a padded container.
   Strip its 15px/20px padding so the CTA li sizes to its button. */
.fusion-body .ubermenu .ubermenu-align-right .ubermenu-custom-content-padded {
  padding: 0 !important;
}

/* Mega-nav menu items — Google Sans Flex Medium 14px in plum, no uppercase,
   minimal padding (Figma 2104:10988 sets gap:24px between items via the
   parent flex container, so each item only carries inline padding for the
   click target). */
.fusion-body .ubermenu .ubermenu-item-level-0 > .ubermenu-target {
  font-family: var(--flo-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--flo-color-plum) !important;
  padding: 8px 12px !important;
}
.fusion-body .ubermenu .ubermenu-item-level-0 > .ubermenu-target:hover,
.fusion-body .ubermenu .ubermenu-item-level-0.ubermenu-active > .ubermenu-target,
.fusion-body .ubermenu .ubermenu-item-level-0.ubermenu-current-menu-item > .ubermenu-target {
  color: var(--flo-color-plum-dark) !important;
}

/* Dropdown chevron — simple angular chevron-down icon (matches Figma 2866:12648,
   assets/icons/nav-down-arrow.svg). Rendered as a currentColor mask. */
.fusion-body .ubermenu .ubermenu-item-has-children.ubermenu-item-level-0 > .ubermenu-target .ubermenu-target-text::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%206L8%2010L4%206%22%20stroke%3D%22%234A236D%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%206L8%2010L4%206%22%20stroke%3D%22%234A236D%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

/* CTA item ("Request Demo") in the mega nav — outline pill per Figma
   2104:10996: lavender border (#b582ff), plum text + arrow, lavender hover
   fill. Avada writes inline `--button_*` custom properties (gradient top/
   bottom for normal AND hover, accent color, etc.) on the <a>, and its own
   stylesheet uses those vars. We redeclare the same vars on our selector so
   the hover doesn't flash coral/orange. */
.fusion-body .ubermenu .ubermenu-align-right .fusion-button {
  background: transparent !important;
  background-image: none !important;
  border: 2px solid var(--flo-color-link) !important; /* lavender #b582ff */
  color: var(--flo-color-plum) !important;
  border-radius: var(--flo-radius-pill) !important;
  padding: 10px 24px !important;
  font-family: var(--flo-font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: none !important;
  /* Neutralize Avada's inline gradient/hover colors so its own hover CSS
     (which reads these vars) doesn't paint coral. */
  --button_gradient_top_color: transparent !important;
  --button_gradient_bottom_color: transparent !important;
  --button_gradient_top_color_hover: var(--flo-color-link) !important;
  --button_gradient_bottom_color_hover: var(--flo-color-link) !important;
  --button_accent_color: var(--flo-color-plum) !important;
  --button_accent_hover_color: #fff !important;
  --button_border_hover_color: var(--flo-color-link) !important;
  --button_margin-top: -2px !important;
}
.fusion-body .ubermenu .ubermenu-align-right .fusion-button .fusion-button-text,
.fusion-body .ubermenu .ubermenu-align-right .fusion-button > span {
  color: var(--flo-color-plum) !important;
  text-transform: none !important;
}
/* The Avada button renders a Font Awesome <i.fa-arrow-right> arrow icon at
   the end. Color it plum to match the text, restyle hover to white. */
.fusion-body .ubermenu .ubermenu-align-right .fusion-button .awb-button__icon {
  color: var(--flo-color-plum) !important;
  font-size: 16px !important;
  margin-left: 0 !important;
}
.fusion-body .ubermenu .ubermenu-align-right .fusion-button:hover .awb-button__icon {
  color: #fff !important;
}
.fusion-body .ubermenu .ubermenu-align-right .fusion-button:hover {
  background: var(--flo-color-link) !important; /* lavender fill on hover */
  background-image: none !important;
  border-color: var(--flo-color-link) !important;
  color: #fff !important;
  transform: none !important;
}
.fusion-body .ubermenu .ubermenu-align-right .fusion-button:hover .fusion-button-text,
.fusion-body .ubermenu .ubermenu-align-right .fusion-button:hover > span {
  color: #fff !important;
}


/* ------------------------------------------------------------
   Mega-menu dropdown panels — Figma desktop frames
   2423:7319 (Products) / 7384 (Solutions) / 7425 (Resources) /
   7535 (Company). The content is authored as clean .flo-nav-*
   markup inside the UberMenu items (see nav-menu backup); these
   rules supply all the styling so no inline styles are needed.
   ------------------------------------------------------------ */

/* Active top-level trigger gets the lavender pill from Figma
   (the base rule above only changes text color). */
.fusion-body .ubermenu .ubermenu-item-level-0.ubermenu-active > .ubermenu-target {
  background: var(--flo-color-text-inverse) !important; /* insight-lavender #f5edff */
  border-radius: 8px !important;
}

/* Floating panel chrome — white card, soft plum shadow, 24px padding.
   Shrink to the width of its columns (Figma panels are detached and
   content-sized, not full-bleed) while never overflowing the viewport. */
.fusion-body .ubermenu .ubermenu-submenu.ubermenu-submenu-drop {
  background: var(--flo-color-bg) !important;
  border: 0 !important;
  border-radius: var(--flo-radius-md) !important;
  box-shadow: 0 2px 3px rgba(33, 18, 54, 0.2) !important;
  padding: 24px !important;
  width: -moz-max-content !important;
  width: max-content !important;
  max-width: calc(100vw - 48px) !important;
  /* 16px gap between the bottom of the nav pill and the top of the panel
     (Figma). UberMenu anchors the panel to the item bottom, which leaves it
     overlapping the pill's bottom padding; +30px clears that padding and adds
     the 16px gap. */
  margin-top: 30px !important;
  /* Only Products wraps its columns in a .ubermenu-row; the others place
     columns as direct children. Make the panel the flex container so both
     shapes lay out as a row of independent-height columns. */
  display: flex !important;
  gap: 24px !important;
  align-items: flex-start !important;
}

/* Products' explicit row is itself the column track. */
.fusion-body .ubermenu .ubermenu-submenu-drop > .ubermenu-row {
  display: flex !important;
  gap: 24px !important;
  align-items: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
}
.fusion-body .ubermenu .ubermenu-submenu-drop .ubermenu-item-type-column {
  width: 320px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important; /* drop UberMenu's inter-column divider rule */
  box-shadow: none !important;
  /* UberMenu equalises column heights, which inflates the panel; let columns
     size to their own content. */
  min-height: 0 !important;
  height: auto !important;
}
.fusion-body .ubermenu .ubermenu-submenu-drop .ubermenu-submenu-type-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
/* No dividers in the Figma dropdowns. */
.fusion-body .ubermenu .ubermenu-submenu-drop .ubermenu-divider {
  display: none !important;
}
.fusion-body .ubermenu .ubermenu-submenu-drop .ubermenu-submenu-type-stack > .ubermenu-item,
.fusion-body .ubermenu .ubermenu-submenu-drop .ubermenu-content-block {
  padding: 0 !important;
  margin: 0 !important;
}

/* Column header chip. */
.fusion-body .ubermenu .flo-nav-colhead {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 8px 16px;
  background: var(--flo-color-bg-subtle); /* #fffaf0 */
  border-radius: 8px;
  font-family: var(--flo-font-body);
  /* Section titles bold per design QA. !important guards against UberMenu/Avada
     typography rules overriding it in the dropdown. */
  font-weight: 700 !important;
  font-size: 18px;
  line-height: 1.4;
  color: var(--flo-color-text); /* #211236 */
}

/* Link card (title + description) — Products & Solutions. */
.fusion-body .ubermenu .flo-nav-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
  text-decoration: none;
}
.fusion-body .ubermenu .flo-nav-card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--flo-font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  color: var(--flo-color-plum); /* #4a236d */
}
.fusion-body .ubermenu .flo-nav-card__desc {
  font-family: var(--flo-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--flo-color-plum);
}
.fusion-body .ubermenu .flo-nav-card:hover .flo-nav-card__title {
  color: var(--flo-color-plum-dark);
}

/* FREE badge on a card title. */
.fusion-body .ubermenu .flo-nav-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--flo-radius-pill);
  background: #ffc7bf; /* Figma colors/Coral/care-rose */
  font-family: var(--flo-font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: var(--flo-color-text);
  text-transform: none;
}

/* Plain link rows — Resources & Company (no description). */
.fusion-body .ubermenu .ubermenu-submenu-drop .ubermenu-item-normal > .ubermenu-target {
  padding: 0 12px !important;
  background: transparent !important;
  font-family: var(--flo-font-body) !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  color: var(--flo-color-plum) !important;
}
.fusion-body .ubermenu .ubermenu-submenu-drop .ubermenu-item-normal > .ubermenu-target:hover {
  background: transparent !important;
  color: var(--flo-color-plum-dark) !important;
}

/* Solutions (15692): stack the 3 single-item columns into one
   320px column per Figma 2423:7384. */
.fusion-body .ubermenu .ubermenu-submenu-id-15692 {
  flex-direction: column !important;
}
/* Anchor the Solutions panel under its own trigger: make the item the
   positioning context so the panel's (UberMenu-set) left:0 lines up with the
   trigger rather than the menu column's left edge. */
.fusion-body .ubermenu .ubermenu-nav > li.ubermenu-item-15692 {
  position: relative !important;
}

/* Resources (13310): full nav-pill width, 3 columns, 40px gutter (Figma
   2423:7425). The panel's offset parent is the menu column (starts ~213px
   right of the pill's left edge), so pull it back to align the panel's left
   edge with the pill and span the pill's 1120px width. */
.fusion-body .ubermenu .ubermenu-submenu-id-13310.ubermenu-submenu-drop {
  gap: 40px !important;
  left: -213px !important;
  width: 1120px !important;
  max-width: calc(100vw - 320px) !important;
  justify-content: space-between !important;
}
/* Resources columns share the row evenly rather than fixed 320px. */
.fusion-body .ubermenu .ubermenu-submenu-id-13310 .ubermenu-item-type-column {
  width: auto !important;
  flex: 1 1 0 !important;
}

/* Company (12174): single 280px column per Figma 2423:7535. */
.fusion-body .ubermenu .ubermenu-submenu-id-12174 .ubermenu-item-type-column {
  width: 280px !important;
}

/* The retractor (mobile close X) has no place on desktop. */
.fusion-body .ubermenu .ubermenu-retractor {
  display: none !important;
}


/* ============================================================
   Mobile collapsed bar — Figma 2423:6484. A short white pill:
   logo left, hamburger right, no "Menu" label. UberMenu's
   responsive toggle appears at <=800px.
   ============================================================ */
@media (max-width: 800px) {
  /* Utility links (Contact Sales / Customer Support / …) don't belong on the
     collapsed bar — they live in the open menu instead. */
  .fusion-body .fusion-tb-header .fusion-builder-row-1 {
    display: none !important;
  }

  /* The collapsed bar lives in row-3 (row-2 is the desktop nav pill, hidden at
     mobile and still hosting the UberMenu the modal opens from — leave it).
     Force row-3's two stacked columns back into one flex bar: logo left,
     hamburger right, floating above the hero that bleeds up behind it. */
  .fusion-body .fusion-tb-header .fusion-builder-row-3 {
    margin-top: 0 !important;
    /* Drop Avada's black --awb-box-shadow halo on the sticky container; the
       pill's own shadow lives on the inner row. */
    box-shadow: none !important;
    padding-top: 16px !important;
  }
  .fusion-body .fusion-tb-header .fusion-builder-row-3 > .fusion-builder-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 16px !important;
    padding: 8px 16px !important;
    min-height: 52px !important;
    background: var(--flo-color-bg) !important;
    border-radius: var(--flo-radius-md) !important;
    box-shadow: 0 2px 3px rgba(33, 18, 54, 0.2) !important;
    position: relative !important;
    z-index: 100 !important;
  }
  .fusion-body .fusion-tb-header .fusion-builder-row-3 > .fusion-builder-row > .fusion-layout-column {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    align-self: center !important;
  }
  /* Push the hamburger column to the right edge. */
  .fusion-body .fusion-tb-header .fusion-builder-row-3 > .fusion-builder-row > .fusion-layout-column:last-child {
    margin-left: auto !important;
  }
  /* Logo sized to the Figma 36px height. */
  .fusion-body .fusion-tb-header .fusion-builder-row-3 img {
    height: 36px !important;
    width: auto !important;
    max-width: none !important;
  }
  /* Hamburger toggle: icon only (zero the "Menu" text node), 48px tap target. */
  .fusion-body .ubermenu-responsive-toggle {
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    width: 48px !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: var(--flo-color-plum) !important;
  }
  .fusion-body .ubermenu-responsive-toggle .fas,
  .fusion-body .ubermenu-responsive-toggle i {
    font-size: 24px !important;
    margin: 0 !important;
    color: var(--flo-color-plum) !important;
  }
}


/* ============================================================
   Mobile navigation — modal overlay + drill-in.
   Figma 2423:6927 / 6960 / 7187 / 7020 / 7140. UberMenu runs in
   mobile-modal mode; the `.ubermenu-mobile-view` class is only
   present at mobile widths, so these rules don't touch desktop.
   Drill-in (one panel at a time, back arrow) is driven by
   nav-mobile.js toggling .flo-drill-* classes.
   ============================================================ */

/* Full-screen dark scrim laid out as a stack of three cards (header / menu /
   footer) with an 8px gap, per Figma 2423:6927. Only force the flex layout
   while the menu is OPEN — UberMenu marks the closed state with
   .ubermenu-responsive-collapse and hides the modal, which we must not
   override or the overlay can never close. */
.fusion-body .ubermenu.ubermenu-mobile-view.ubermenu-mobile-modal:not(.ubermenu-responsive-collapse) {
  background: var(--flo-color-bg-overlay) !important; /* #211236 */
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  /* Fill the whole screen. UberMenu's own height left a gap at the bottom on
     iOS; pinning all four edges (position:fixed + inset:0) stretches the overlay
     to the full viewport regardless of UberMenu's height or Safari's toolbar.
     height:auto lets top/bottom drive the height; content taller than the
     viewport still scrolls via overflow-y. */
  position: fixed !important;
  inset: 0 !important;
  height: auto !important;
  min-height: 100dvh !important;
}

/* The injected chrome lives in the shared .ubermenu-main element; only show it
   in the mobile modal (the mobile-view rules below re-display it). */
.fusion-body .ubermenu .flo-mnav-header,
.fusion-body .ubermenu .flo-mnav-footer {
  display: none;
}

/* UberMenu's own footer ("Close" retractor) is replaced by the header X. */
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-mobile-footer,
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-retractor {
  display: none !important;
}

/* ---- Header card (logo + X close) — Figma 2423:6938. ---- */
.fusion-body .ubermenu.ubermenu-mobile-view .flo-mnav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 8px 16px;
  background: var(--flo-color-bg-subtle); /* #fffaf0 */
  border-radius: var(--flo-radius-md);
  box-shadow: 0 2px 3px rgba(33, 18, 54, 0.2);
}
.fusion-body .ubermenu.ubermenu-mobile-view .flo-mnav-logo {
  height: 36px;
  width: auto;
  display: block;
}
.fusion-body .ubermenu.ubermenu-mobile-view .flo-mnav-close {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fusion-body .ubermenu.ubermenu-mobile-view .flo-mnav-close::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: var(--flo-color-plum);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M5%205l14%2014M19%205L5%2019'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M5%205l14%2014M19%205L5%2019'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

/* ---- Menu card (white) — Figma 2423:6942. ---- */
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-nav {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  gap: 0 !important;
  margin: 0 !important;
  background: var(--flo-color-bg) !important;
  border-radius: var(--flo-radius-md) !important;
  box-shadow: 0 2px 3px rgba(33, 18, 54, 0.2) !important;
  padding: 16px 12px 24px !important;
  /* UberMenu turns the modal nav into its own fixed-height scroll container;
     let it grow with content and scroll the whole overlay instead. */
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-nav > li.ubermenu-item-level-0 {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}
/* The CTA lives in the footer card, not the menu list. */
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-nav > li.ubermenu-align-right {
  display: none !important;
}

/* Item rows: 48px, label left / right-arrow right. */
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-item-level-0 > .ubermenu-target {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 8px 12px !important;
  border-radius: var(--flo-radius-pill) !important;
  background: transparent !important;
}
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-item-level-0 > .ubermenu-target .ubermenu-target-text {
  font-family: var(--flo-font-body) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: var(--flo-color-plum) !important;
}
/* Suppress UberMenu's own indicators and the desktop curved chevron. */
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-item-level-0 > .ubermenu-target .ubermenu-target-text::after,
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-sub-indicator,
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-sub-indicator-close {
  display: none !important;
}
/* Right arrow on expandable items — the shared button-arrow.svg, like every
   other CTA (Figma 2423:6944). */
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-item-has-children.ubermenu-item-level-0 > .ubermenu-target::after {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background-color: var(--flo-color-plum);
  transition: transform 0.2s ease;
  -webkit-mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
          mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
}
/* Customer Stories (no children) — left-aligned, no arrow. */
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-item-level-0:not(.ubermenu-item-has-children) > .ubermenu-target {
  justify-content: flex-start !important;
}
/* The desktop panel's 16px-gap top margin has no place in the mobile drawer. */
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-submenu.ubermenu-submenu-drop {
  margin-top: 0 !important;
}

/* ---- Footer card (CTA + utility links) — Figma 2423:6959. ---- */
.fusion-body .ubermenu.ubermenu-mobile-view .flo-mnav-footer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 0 0 auto;
  padding: 16px 16px 24px;
  background: var(--flo-color-bg-subtle); /* #fffaf0 */
  border-radius: var(--flo-radius-md);
  box-shadow: 0 2px 3px rgba(33, 18, 54, 0.2);
}
.fusion-body .ubermenu.ubermenu-mobile-view .flo-mnav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding: 16px 24px;
  border-radius: var(--flo-radius-pill);
  background: rgba(181, 130, 255, 0.5);
  font-family: var(--flo-font-display);
  font-weight: 400; /* only the PPFrama semibold face is loaded */
  font-size: 18px;
  color: var(--flo-color-text);
  text-decoration: none;
}
.fusion-body .ubermenu.ubermenu-mobile-view .flo-mnav-cta__arrow {
  width: 24px;
  height: 24px;
  background-color: var(--flo-color-text);
  -webkit-mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
          mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
}
.fusion-body .ubermenu.ubermenu-mobile-view .flo-mnav-util {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fusion-body .ubermenu.ubermenu-mobile-view .flo-mnav-util__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-family: var(--flo-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: var(--flo-color-plum);
  text-decoration: none;
  text-align: center;
}
.fusion-body .ubermenu.ubermenu-mobile-view .flo-mnav-util__split {
  display: flex;
  align-items: stretch;
}
.fusion-body .ubermenu.ubermenu-mobile-view .flo-mnav-util__split .flo-mnav-util__link {
  flex: 1 1 0;
}
.fusion-body .ubermenu.ubermenu-mobile-view .flo-mnav-util__split .flo-mnav-util__link + .flo-mnav-util__link {
  border-left: 1px solid rgba(181, 130, 255, 0.5);
}
/* Horizontal rules above the stacked full-width links. */
.fusion-body .ubermenu.ubermenu-mobile-view .flo-mnav-util > .flo-mnav-util__link {
  border-top: 1px solid rgba(181, 130, 255, 0.5);
}

/* ---- Drill-in panels ---------------------------------------
   By default every submenu is hidden on mobile; .flo-drill-open
   on the active level-0 item reveals its panel full-bleed and the
   nav scrolls it into view. Back control is injected by JS. */
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-item-level-0 > .ubermenu-submenu {
  display: none !important;
}
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-item-level-0.flo-drill-open > .ubermenu-submenu {
  display: block !important;
  position: static !important;
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 16px 0 0 !important;
  /* UberMenu collapses mobile submenus via these props keyed on its own
     .ubermenu-active class, which the drill-in intentionally suppresses —
     re-assert visibility here. */
  opacity: 1 !important;
  visibility: visible !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
}
/* When drilled in, hide the sibling rows so only the active section shows. */
.fusion-body .ubermenu.ubermenu-mobile-view.flo-drilled .ubermenu-item-level-0:not(.flo-drill-open) {
  display: none !important;
}
/* Active section header row gets the lavender highlight + back chevron
   (Figma: tapping the highlighted header returns to the top level). */
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-item-level-0.flo-drill-open > .ubermenu-target {
  background: var(--flo-color-text-inverse) !important; /* #f5edff */
  border-radius: var(--flo-radius-md) !important;
}
/* Open/active section: the same right arrow flips to point left (Figma
   2423:6977) — it stays on the right edge, just rotated. */
.fusion-body .ubermenu.ubermenu-mobile-view .ubermenu-item-level-0.flo-drill-open > .ubermenu-target::after {
  transform: rotate(180deg);
}
/* Stack mega columns vertically inside the drilled panel. */
.fusion-body .ubermenu.ubermenu-mobile-view .flo-drill-open .ubermenu-submenu-drop,
.fusion-body .ubermenu.ubermenu-mobile-view .flo-drill-open .ubermenu-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  width: 100% !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.fusion-body .ubermenu.ubermenu-mobile-view .flo-drill-open .ubermenu-item-type-column,
.fusion-body .ubermenu.ubermenu-mobile-view .flo-drill-open .ubermenu-submenu-type-stack {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important; /* UberMenu equalises column heights; let them be natural when stacked */
}


/* ------------------------------------------------------------
   flo-cta — Tier 1 primary button
   ------------------------------------------------------------ */

.fusion-button.flo-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-radius: var(--flo-radius-pill);
  font-family: var(--flo-font-display);
  font-weight: 400; /* PPFrama-Semibold has only the semibold face loaded */
  font-size: var(--flo-size-body-lg);
  letter-spacing: 0.01em;
  text-transform: none;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.fusion-button.flo-cta::after {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  /* Avada's `body a::after { color: var(--link_color) }` (coral) wins over
     `currentColor` here, so explicitly inherit the parent button's color. */
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
          mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
}

/* White-on-plum — Figma default (hero, integrations footer, global reach) */
.fusion-button.flo-cta--white,
.fusion-button.flo-cta--white:visited {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--flo-color-plum);
}

.fusion-button.flo-cta--white:hover {
  background: var(--flo-color-text-inverse);
  border-color: var(--flo-color-text-inverse);
  color: var(--flo-color-plum-dark);
  transform: translateY(-1px);
}

.fusion-button.flo-cta--coral,
.fusion-button.flo-cta--coral:visited {
  background: var(--flo-color-coral);
  border-color: var(--flo-color-coral);
  color: #ffffff;
}

.fusion-button.flo-cta--coral:hover {
  background: var(--flo-color-coral-dark);
  border-color: var(--flo-color-coral-dark);
  transform: translateY(-1px);
}

.fusion-button.flo-cta--plum,
.fusion-button.flo-cta--plum:visited {
  background: var(--flo-color-plum);
  border-color: var(--flo-color-plum);
  color: #ffffff;
}

.fusion-button.flo-cta--plum:hover {
  background: var(--flo-color-plum-dark);
  border-color: var(--flo-color-plum-dark);
  transform: translateY(-1px);
}

.fusion-button.flo-cta--purple,
.fusion-button.flo-cta--purple:visited {
  background: var(--flo-color-purple);
  border-color: var(--flo-color-purple);
}

/* Accessible violet — Figma colors/accessible/violet-bold #ad74ff (CTA-band) */
.fusion-button.flo-cta--violet,
.fusion-button.flo-cta--violet:visited {
  background: #ad74ff;
  border-color: #ad74ff;
  color: #fff;
}
.fusion-button.flo-cta--violet:hover {
  background: #9961e8;
  border-color: #9961e8;
  color: #fff;
  transform: translateY(-1px);
}

/* Outline button on light bg (plum outline + plum text) */
.fusion-button.flo-cta--outline-plum,
.fusion-button.flo-cta--outline-plum:visited {
  background: transparent;
  border: 2px solid var(--flo-color-text);
  color: var(--flo-color-plum);
}
.fusion-button.flo-cta--outline-plum:hover {
  background: var(--flo-color-plum);
  border-color: var(--flo-color-plum);
  color: #fff;
  transform: translateY(-1px);
}

/* Small CTA — tighter padding + body-md font, for in-card buttons. */
.fusion-button.flo-cta--sm {
  padding: 0.5rem 1rem;
  font-size: var(--flo-size-body-md);
  gap: 0.5rem;
}
.fusion-button.flo-cta--sm::after {
  width: 1rem;
  height: 1rem;
}

/* Ghost button on dark bg (lavender outline + lavender text) */
.fusion-button.flo-cta--ghost-light,
.fusion-button.flo-cta--ghost-light:visited {
  background: transparent;
  border: 2px solid var(--flo-color-text-inverse);
  color: var(--flo-color-text-inverse);
}
.fusion-button.flo-cta--ghost-light:hover {
  background: var(--flo-color-text-inverse);
  color: var(--flo-color-plum);
}

.fusion-button.flo-cta--purple:hover {
  background: var(--flo-color-purple-dark);
  border-color: var(--flo-color-purple-dark);
  color: #fff;
  transform: translateY(-1px);
}

/* ------------------------------------------------------------
   flo-stat-ribbon — Tier 3 horizontal stat strip
   Rendered by [flo_stat_ribbon] (see includes/shortcodes.php)
   ------------------------------------------------------------ */

.fusion-body .flo-stat-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flo-space-6);
  justify-content: center;
  padding: var(--flo-space-6) var(--flo-space-4);
  background: var(--flo-color-bg-alt);
  border-radius: var(--flo-radius-md);
}

.fusion-body .flo-stat-ribbon__item {
  flex: 1 1 200px;
  text-align: center;
}

.fusion-body .flo-stat-ribbon__value {
  display: block;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--flo-color-purple);
}

.fusion-body .flo-stat-ribbon__unit {
  font-size: 0.6em;
  font-weight: 600;
  margin-left: 0.05em;
  color: var(--flo-color-purple);
}

.fusion-body .flo-stat-ribbon__label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--flo-color-text-muted);
}

/* ------------------------------------------------------------
   flo-stat-card — Tier 4 registered Avada element
   Rendered by fusion_element_flo_stat_card (see includes/elements.php)
   ------------------------------------------------------------ */

.fusion-body .flo-stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--flo-space-5);
  background: var(--flo-color-bg);
  border-radius: var(--flo-radius-md);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-top: 4px solid var(--flo-stat-card-accent, var(--flo-color-coral));
  box-shadow: 0 1px 2px rgba(20, 20, 50, 0.04), 0 8px 24px rgba(20, 20, 50, 0.04);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.fusion-body .flo-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(20, 20, 50, 0.04), 0 12px 32px rgba(20, 20, 50, 0.08);
}

.fusion-body .flo-stat-card__value {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--flo-stat-card-accent, var(--flo-color-coral));
}

.fusion-body .flo-stat-card__label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--flo-color-text-muted);
}

/* ============================================================
   PHASE 3 — PRODUCT PAGE COMPONENTS
   Tokens & sources from Figma "Product Page Template v1.1"
   (file l2HNfitRsatffOfm1qJkLD, node 2104:10976).
   ============================================================ */

/* ------------------------------------------------------------
   Full-bleed breakout
   Avada wraps page content in `.fusion-row` with a max-width
   (the site_width Global Option, currently 1100px). Phase 3
   sections need to be edge-to-edge, so each top-level component
   uses the viewport-relative negative-margin trick to escape any
   constrained ancestor. The trick: margin-left:calc(50% - 50vw)
   pulls the element to the viewport's left edge regardless of
   the parent's width or padding.
   ------------------------------------------------------------ */
.fusion-body .flo-hero-product,
.fusion-body .flo-hero-home,
.fusion-body .flo-home-wrapper,
.fusion-body .flo-solution-grid,
.fusion-body .flo-how-it-works,
.fusion-body .flo-testimonial-feature,
.fusion-body .flo-real-stories,
.fusion-body .flo-testimonials,
.fusion-body .flo-video-tiles,
.fusion-body .flo-global-reach,
.fusion-body .flo-map-compliance,
.fusion-body .flo-product-spotlight-grid,
.fusion-body .flo-resource-grid-section,
.fusion-body .flo-integration-panel,
.fusion-body .flo-panel {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}
/* When .flo-panel is the full-bleed wrapper, child sections no longer need
   their own full-bleed trick — they sit inside the panel and are constrained
   by .flo-content. */
.fusion-body .flo-panel .flo-feature-trio,
.fusion-body .flo-panel .flo-logo-grid-block,
.fusion-body .flo-home-wrapper .flo-solution-trio,
.fusion-body .flo-home-wrapper .flo-compliance-tagline,
.fusion-body .flo-home-wrapper .flo-what-we-offer,
.fusion-body .flo-home-wrapper .flo-integration-panel,
.fusion-body .flo-home-wrapper .flo-products-grid,
.fusion-body .flo-home-wrapper .flo-cta-band {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.flo-feature-trio + .flo-logo-grid-block {
  margin-bottom: 80px;
}
/* Stand-alone (no .flo-panel parent) — original full-bleed behaviour. */
.fusion-body .flo-feature-trio:not(.flo-panel *),
.fusion-body .flo-logo-grid-block:not(.flo-panel *) {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}
/* Prevent horizontal scrollbar from rounding error on calc(50% - 50vw) */
body { overflow-x: clip; }

/* ------------------------------------------------------------
   .flo-tab-card — reusable folder-tab card primitive.
   Pattern: small tab on top-LEFT (or top-RIGHT) + body below, both
   the same color. The tab/body share a continuous silhouette with a
   concave elbow at the inner corner, achieved via a radial-gradient
   pseudo-element (no SVG / clip-path).
   Knobs (override per-instance via inline style or modifier class):
     --tab-w       width of the tab (default 96px)
     --tab-h       height of the tab (default 80px)
     --radius      outer corner radius (default var(--flo-radius-lg))
     --elbow       concave inner-corner radius (default = --radius)
     --bg          fill color (default --flo-color-plum)
   Modifiers:
     .flo-tab-card--right   tab on top-RIGHT instead of default top-LEFT
   Sub-elements:
     .flo-tab-card__tab     content inside the tab (label or icon)
     .flo-tab-card__body    main card content
     .flo-tab-card__icon    optional decoration in the OPPOSITE top
                            corner from the tab (sits on parent bg)
   ------------------------------------------------------------ */
.fusion-body .flo-tab-card {
  --tab-w: 96px;
  --tab-h: 15px;
  --radius: var(--flo-radius-lg, 24px);
  --elbow: var(--radius);
  --bg: var(--flo-color-plum);
  position: relative;
  padding-top: var(--tab-h);
  isolation: isolate; /* contain the pseudo-element to this card */
}
.fusion-body .flo-tab-card__tab {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tab-w);
  /* +1px so the tab overlaps the body's top edge: tab and body share --bg, so
     the overlap is invisible but closes the sub-pixel seam that otherwise shows
     the section background as a hairline at fractional card positions. */
  height: calc(var(--tab-h) + 1px);
  background: var(--bg);
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.fusion-body .flo-tab-card__body {
  position: relative;
  background: var(--bg);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 24px;
  z-index: 0;
  height: 100%;
}
/* Concave elbow at the bottom-RIGHT of the tab (= top-LEFT of body).
   Painted on the body's top-left corner with a radial gradient that
   goes from transparent (inside the curve) to bg-color (outside). */
.fusion-body .flo-tab-card__body::before {
  content: "";
  position: absolute;
  top: calc(var(--elbow) * -1);
  /* 1px bleed into the tab (left) and body (height) closes the elbow seam —
     same technique the map-stat variant proved. */
  left: calc(var(--tab-w) - 1px);
  width: calc(var(--elbow) + 1px);
  height: calc(var(--elbow) + 1px);
  background:
    radial-gradient(circle at bottom right,
      transparent calc(var(--elbow) - 0.5px),
      var(--bg) var(--elbow));
  pointer-events: none;
  transform: scaleY(-1);
}
/* Mirror to top-RIGHT */
.fusion-body .flo-tab-card--right .flo-tab-card__tab {
  left: auto;
  right: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.fusion-body .flo-tab-card--right .flo-tab-card__body {
  border-radius: var(--radius) 0 var(--radius) var(--radius);
}
.fusion-body .flo-tab-card--right .flo-tab-card__body::before {
  left: auto;
  right: calc(var(--tab-w) - 1px); /* 1px bleed, mirrors the left variant */
  background:
    radial-gradient(circle at bottom left,
      transparent calc(var(--elbow) - 0.5px),
      var(--bg) var(--elbow));
}

/* ------------------------------------------------------------
   flo-pager — shared vertical pager primitive.
   Vertical pill (lavender @ 15%) with chevron-up + dots + chevron-down.
   Markup is rendered by florence_render_pager_vertical() in
   includes/partials/pager-vertical.php; behavior wired by
   assets/components.js. Used by .flo-how-it-works AND .flo-what-we-offer
   so the two carousels always look + act the same.
   ------------------------------------------------------------ */
.fusion-body .flo-pager--vertical {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  border-radius: var(--flo-radius-pill);
  background: rgba(181, 130, 255, 0.15); /* figma data-violet @ 15% */
}
@media (min-width: 800px) {
  .fusion-body .flo-pager--vertical { display: flex; }
}
.fusion-body .flo-pager__arrow {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--flo-color-text-inverse);
  width: 16px;
  height: 16px;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fusion-body .flo-pager__arrow::before {
  content: "";
  width: 12px;
  height: 12px;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url(/wp-content/themes/fh-avada-child/assets/icons/chevron.svg) no-repeat center / contain;
          mask: url(/wp-content/themes/fh-avada-child/assets/icons/chevron.svg) no-repeat center / contain;
}
.fusion-body .flo-pager__arrow--down::before { transform: rotate(180deg); }
.fusion-body .flo-pager__arrow:hover { color: var(--flo-color-link); }
.fusion-body .flo-pager__dots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fusion-body .flo-pager__dot {
  background: rgba(245, 237, 255, 0.4);
  border: 0;
  cursor: pointer;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  padding: 0;
}
.fusion-body .flo-pager__dot--active { background: var(--flo-color-text-inverse); }

/* Avada default: every .fusion-layout-column has margin-bottom: 20px, which
   creates a visible gap between every top-level section. Zero it for any
   column that hosts one of our flo-* sections so wrappers sit flush. */
.fusion-body .fusion-layout-column:has(> .fusion-column-wrapper > .flo-hero-product),
.fusion-body .fusion-layout-column:has(> .fusion-column-wrapper > .flo-feature-trio),
.fusion-body .fusion-layout-column:has(> .fusion-column-wrapper > .flo-solution-grid),
.fusion-body .fusion-layout-column:has(> .fusion-column-wrapper > .flo-how-it-works),
.fusion-body .fusion-layout-column:has(> .fusion-column-wrapper > .flo-testimonial-feature),
.fusion-body .fusion-layout-column:has(> .fusion-column-wrapper > .flo-video-tiles),
.fusion-body .fusion-layout-column:has(> .fusion-column-wrapper > .flo-global-reach),
.fusion-body .fusion-layout-column:has(> .fusion-column-wrapper > .flo-product-spotlight-grid),
.fusion-body .fusion-layout-column:has(> .fusion-column-wrapper > .flo-resource-grid-section),
.fusion-body .fusion-layout-column:has(> .fusion-column-wrapper > .flo-logo-grid-block),
.fusion-body .fusion-layout-column:has(> .fusion-column-wrapper > .flo-integration-panel),
.fusion-body .fusion-layout-column:has(> .fusion-column-wrapper > .flo-real-stories),
.fusion-body .flo-panel .fusion-layout-column {
  margin-bottom: 0 !important;
}

/* ------------------------------------------------------------
   flo-content — shared inner content container.
   Pairs with each section's __inner class to constrain content
   inside a full-bleed background. Pattern:
     <section class="flo-X">                 <- full-bleed bg + vertical padding
       <div class="flo-content flo-X__inner"> <- centered content + section layout
         …
       </div>
     </section>
   Override `--flo-content-max` on a parent to widen/narrow per section.
   ------------------------------------------------------------ */
.fusion-body .flo-content {
  max-width: var(--flo-content-max, 1280px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--flo-space-4);
  padding-right: var(--flo-space-4);
}
@media (min-width: 1024px) {
  .fusion-body .flo-content {
    padding-left: var(--flo-space-7);
    padding-right: var(--flo-space-7);
  }
}
/* Mobile gutter is 16px per the figma mobile frames (content x=16 on a 390
   frame). Scoped to <=800 so tablet keeps the roomier 24px. */
@media (max-width: 800px) {
  .fusion-body .flo-content {
    padding-left: var(--flo-space-3);
    padding-right: var(--flo-space-3);
  }
}

/* ------------------------------------------------------------
   flo-hero-product — Tier 3 product-page hero
   Layout: 2-col (text+CTA, screenshot+play-overlay).
   Renders inside [fusion_code]; styling owned here.
   ------------------------------------------------------------ */
.fusion-body .flo-hero-product {
  position: relative;
  padding: var(--flo-space-6) 0 var(--flo-space-8);
  background: var(--flo-color-bg-overlay);
  color: var(--flo-color-text-inverse);
  overflow: hidden;
}
@media (min-width: 800px) {
  .fusion-body .flo-hero-product {
    padding: 48px 0 160px;
  }
}
.fusion-body .flo-hero-product::before {
  /* yellow gradient blob accent — pure CSS, mirrors the rotated radial blob in figma */
  content: "";
  position: absolute;
  left: 38%;
  width: 820px;
  height: 620px;
  background:
    radial-gradient(ellipse 55% 45% at 35% 50%,
      rgba(255, 213, 120, 0.55) 0%,
      rgba(255, 168, 110, 0.32) 35%,
      rgba(255, 120, 89, 0.16) 60%,
      transparent 82%);
  transform: rotate(150deg);
  filter: blur(24px);
  z-index: 0;
  pointer-events: none;
}
.fusion-body .flo-hero-product__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--flo-space-6);
  align-items: center;
}
@media (min-width: 800px) {
  .fusion-body .flo-hero-product__inner {
    grid-template-columns: 360px 1fr;
    gap: var(--flo-space-8);
  }
}
.fusion-body .flo-hero-product__title {
  font-family: var(--flo-font-display);
  font-weight: 400; /* PPFrama-Semibold has only the semibold face loaded */
  font-size: var(--flo-size-h1);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-coral);
  margin: 0 0 var(--flo-space-5) 0;
}
.fusion-body .flo-hero-product__lede {
  font-family: var(--flo-font-body);
  font-size: var(--flo-size-body-lg);
  line-height: var(--flo-leading-body);
  margin: 0 0 var(--flo-space-5) 0;
}
.fusion-body .flo-hero-product__media {
  position: relative;
  aspect-ratio: 680 / 399;
  background: rgba(245, 237, 255, 0.06);
  -webkit-mask: url(/wp-content/themes/fh-avada-child/assets/images/hero-product-mask.svg) no-repeat center / 100% 100%;
          mask: url(/wp-content/themes/fh-avada-child/assets/images/hero-product-mask.svg) no-repeat center / 100% 100%;
}
.fusion-body .flo-hero-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Client-logo strip inside the product hero (figma 2867:17415) — coral-tinted
   logos on the plum band. Static (no marquee): a centered ~900px band so the
   7-logo set wraps to 5 on top + 2 centered below, matching the figma. */
.fusion-body .flo-hero-product__logos {
  position: relative;
  z-index: 1;
  margin-top: 56px;
}
.fusion-body .flo-hero-product__logos .flo-logo-grid-block {
  background: transparent;
  padding: 0;
}
.fusion-body .flo-hero-product__logos .flo-logo-grid-block__inner {
  max-width: 960px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.fusion-body .flo-hero-product__logos .flo-logo-grid__heading {
  color: #ffffff;
  text-align: center;
  font-family: var(--flo-font-display);
  font-weight: 400;
  margin-bottom: 32px;
}
.fusion-body .flo-hero-product__logos .flo-logo-grid--tinted.flo-logo-grid--strip {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px 40px;
  padding: 0;
  overflow: visible;
}
/* 5 logos per row (row 1 full, row 2's 2 items centered by justify-content).
   Silhouette scales within its column preserving aspect ratio, so uneven logo
   widths don't change the count per row. */
.fusion-body .flo-hero-product__logos .flo-logo-grid--tinted .flo-logo-grid__item {
  opacity: 1;
  flex: 0 0 calc((100% - 4 * 40px) / 5);
  height: 44px;
  padding: 0;
}
/* Silhouette fills its fixed column box; mask-size:contain scales the logo
   shape to fit (preserving its own aspect ratio) so wide logos never overflow.
   aspect-ratio:auto overrides the PHP inline aspect-ratio, which would
   otherwise size the box from the logo and blow out the 5-per-row columns. */
.fusion-body .flo-hero-product__logos .flo-logo-grid__silhouette {
  background-color: var(--flo-color-coral);
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}
@media (max-width: 800px) {
  .fusion-body .flo-hero-product__logos { margin-top: 40px; }
  .fusion-body .flo-hero-product__logos .flo-logo-grid-block__inner {
    max-width: 420px;
  }
  /* 3 per row on mobile → 3 + 3 + 1, or tune as needed. */
  .fusion-body .flo-hero-product__logos .flo-logo-grid--tinted.flo-logo-grid--strip {
    gap: 28px 32px;
  }
  .fusion-body .flo-hero-product__logos .flo-logo-grid--tinted .flo-logo-grid__item {
    flex: 0 0 calc((100% - 2 * 32px) / 3);
    height: 38px;
  }
}
@media (max-width: 800px) {
  /* figma 2104-12694: h1 36px on mobile (h-tag → !important beats Avada's
     shrink), 80px bottom padding. */
  .fusion-body .flo-hero-product__title { font-size: 36px !important; }
  .fusion-body .flo-hero-product { padding-bottom: 80px; }
}

/* ------------------------------------------------------------
   Avada Theme Builder header — re-style as a floating pill.
   The header is built in Avada's TB layout (we can't change its
   HTML), so we style what it emits:
     .fusion-tb-header                 <- outermost wrapper (transparent)
       .fusion-builder-row-1           <- utility links row (transparent)
       .fusion-builder-row-2           <- primary nav row (floating pill)
   Sections may extend BEHIND the nav with .flo-behind-nav so the
   section's bg appears as the nav's full-bleed background.
   ------------------------------------------------------------ */
:root {
  --flo-nav-height: 130px;       /* utility row 26px + 24px gap + primary pill 80px (Avada TB header rendered height) */
}
.fusion-tb-header,
.fusion-tb-header > .fusion-fullwidth {
  background: transparent !important;
  background-color: transparent !important;
}
/* Utility links: plum text per Figma 2104:10978. */
.fusion-tb-header .fusion-builder-row-1 a,
.fusion-tb-header .fusion-builder-row-1 p {
  color: var(--flo-color-plum) !important;
}
.flo-has-product-hero .fusion-tb-header .fusion-builder-row-1 a,
.flo-has-product-hero .fusion-tb-header .fusion-builder-row-1 p {
  color: white !important;
}
/* Legacy templates: small top gap so the content clears the redesigned fixed
   nav. The new flo templates (product + home hero) manage their own nav spacing
   (their heroes bleed up under the nav), so they are excluded and unchanged. */
.fusion-body:not(.flo-has-product-hero):not(.flo-has-home-hero) .post-content {
  margin-top: 20px;
}
/* Primary nav row: convert the inner .fusion-builder-row into a centered
   white pill with shadow + rounded corners. Cap at 1120px per Figma. */
.fusion-tb-header .fusion-builder-row-2 > .fusion-builder-row {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #fff;
  border-radius: var(--flo-radius-md);
  box-shadow: 0 2px 12px rgba(33, 18, 54, 0.2);
  padding: 12px 40px;
  width: calc(100% - 80px);
}
.fusion-tb-header .fusion-builder-row-2 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ------------------------------------------------------------
   .flo-behind-nav — opt-in: section extends UP behind the fixed
   nav so the section's background acts as the nav's bg.
   Add to a fusion_builder_container's class attr (e.g. on the
   hero) for sections that should "host" the nav.
   Also zero out Avada's MAIN padding-top spacer so the section
   sits flush at viewport top.
   ------------------------------------------------------------ */
.fusion-body main.clearfix:has(.flo-behind-nav:first-child),
.fusion-body main.clearfix:has(> :first-child .flo-behind-nav:first-child) {
  padding-top: 0 !important;
}
.fusion-body .flo-behind-nav {
  margin-top: calc(var(--flo-nav-height) * -1);
}
/* The wrapper itself is transparent, so the SECTION INSIDE must absorb the
   nav-height as extra top padding — that way its bg fills the area behind
   the nav, not body's white. */
.fusion-body .flo-behind-nav .flo-hero-product {
  padding-top: calc(var(--flo-nav-height) + var(--flo-space-6));
}
@media (min-width: 800px) {
  .fusion-body .flo-behind-nav .flo-hero-product {
    padding-top: calc(var(--flo-nav-height) + var(--flo-space-8));
  }
}

/* ------------------------------------------------------------
   flo-panel — shared decorative wrapper for stacked sections.
   Applied to a fusion_builder_container so two child shortcodes
   (e.g. feature-trio + logo-grid-partner) share one background.
   Pattern mirrors hero: full-bleed bg with .flo-content inner.
   ------------------------------------------------------------ */
.fusion-body .flo-panel {
  margin-top: 0;
  margin-bottom: 0;
  padding: var(--flo-space-6) 0;
  overflow: hidden;
}
@media (max-width: 800px) {
  /* figma 2104-12710: the gradient panel uses 80px top/bottom on mobile so its
     content (e.g. "Drive results faster") clears the hero and the partner logos
     get the figma 160px before the next section (80 panel + 80 strip). */
  .fusion-body .flo-panel { padding: 80px 0; }
}
@media (min-width: 1024px) {
  .fusion-body .flo-panel { padding: var(--flo-space-8) 0; }
}
.fusion-body .flo-panel--light-gradient {
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 0% 30%,  rgba(180, 158, 245, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 90% 70% at 100% 25%, rgba(255, 200, 175, 0.65) 0%, transparent 70%),
    radial-gradient(ellipse 75% 70% at 100% 100%, rgba(255, 220, 145, 0.65) 0%, transparent 75%),
    linear-gradient(180deg, #f6e8ff 0%, #ffe5d8 50%, #fff1cc 100%);
}
/* Bottom-tab decoration: a wide dark-plum bar pinned to the bottom-RIGHT
   of the panel. Same silhouette pattern as .flo-tab-card — convex outer
   rounded corner at the bar's top-LEFT + concave elbow extending UP into
   the gradient panel, smoothing the transition. The elbow is added via
   .flo-panel--light-gradient::before; the bar itself is the ::after. */
/* Ending tab applies at ALL widths — the bottom-right plum bar that folds into
   the next (plum) section. Was gated to >=1024px, which dropped it on mobile
   (figma 2423:6036 shows it on mobile too). Same dimensions read correctly at
   phone width. */
.fusion-body .flo-panel--light-gradient {
  --bar-w: 65%;
  --bar-h: 80px;
  --bar-elbow: 32px;
}
/* Bar with a convex outer rounded TOP-LEFT corner. */
.fusion-body .flo-panel--light-gradient::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: var(--bar-w);
  height: var(--bar-h);
  background: var(--flo-color-bg-overlay);
  border-top-left-radius: var(--bar-elbow);
  pointer-events: none;
}
/* Concave elbow — same pattern as .flo-tab-card. The pseudo sits in the
   empty space just above the bar's top-LEFT corner, painting plum in a
   quarter-circle that extends UP-LEFT from the corner POINT, so the
   transition into the gradient panel forms a smooth S-curve next to the
   bar's outer rounded corner. */
.fusion-body .flo-panel--light-gradient::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: var(--bar-w);
  width: var(--bar-elbow);
  height: var(--bar-elbow);
  background:
    radial-gradient(circle at bottom left,
      transparent calc(var(--bar-elbow) - 0.5px),
      var(--flo-color-bg-overlay) var(--bar-elbow));
  transform: scaleY(-1);
  pointer-events: none;
}
/* Stack the panel's child sections vertically with a clear gap. The
   .fusion-column-wrapper is the immediate parent of the section markup
   inside Avada's container layout. */
.fusion-body .flo-panel .fusion-column-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--flo-space-7);
}

/* ------------------------------------------------------------
   flo-feature-trio — Tier 3, section 3
   "Drive results faster" panel: heading + 3 folder-tab cards.
   Background is owned by the parent .flo-panel wrapper so the
   trio + sibling logo strip share one gradient.
   ------------------------------------------------------------ */
.fusion-body .flo-feature-trio {
  position: relative;
  color: var(--flo-color-plum);
}
.fusion-body .flo-feature-trio__inner { position: relative; }
.fusion-body .flo-feature-trio__title {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, var(--flo-size-h1));
  line-height: var(--flo-leading-display);
  color: var(--flo-color-plum);
  margin: 0 0 var(--flo-space-6) 0;
}
.fusion-body .flo-feature-trio__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--flo-space-5);
}
@media (min-width: 800px) {
  .fusion-body .flo-feature-trio__cards { grid-template-columns: repeat(3, 1fr); gap: var(--flo-space-5); }
}
@media (max-width: 800px) {
  /* figma 2104-12721: 36px section title, 40px between cards, 24px card titles
     (h-tags → !important beats Avada's responsive shrink). */
  .fusion-body .flo-feature-trio__title { font-size: 36px !important; }
  .fusion-body .flo-feature-trio__cards { gap: 40px; }
  .fusion-body .flo-feature-card__title { font-size: 24px !important; }
}

/* flo-feature-card — built on .flo-tab-card (--right modifier).
   Tab on top-RIGHT is decorative (empty); icon overlays empty top-LEFT
   space showing the parent panel gradient through. */
.fusion-body .flo-feature-card {
  /* Tab knobs */
  --tab-w: 60%;     /* tab covers most of the top-right area */
  --tab-h: 80px;    /* tall enough to align with the icon size */
  --radius: var(--flo-radius-lg);
  --bg: var(--flo-color-plum);
  color: var(--flo-color-text-inverse);
}
.fusion-body .flo-feature-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--flo-space-3);
  padding: 32px 40px 40px;
}
.fusion-body .flo-feature-card__icon {
  position: absolute;
  top: 8px;
  left: 24px;
  width: 64px;
  height: 64px;
  z-index: 2; /* sit above tab + body */
  background-color: var(--flo-color-plum);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.fusion-body .flo-feature-card__title {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h3, 30px);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-text-inverse);
  margin: 0;
}
.fusion-body .flo-feature-card__copy {
  font-family: var(--flo-font-body);
  font-size: var(--flo-size-body-lg);
  line-height: var(--flo-leading-body);
  color: var(--flo-color-text-inverse);
  margin: 0;
}

/* ------------------------------------------------------------
   flo-logo-grid — Tier 3
   Renders [flo_logo_grid kind="partner|integration|compliance"]
   Has a default tile layout AND a horizontal-strip modifier.
   ------------------------------------------------------------ */
.fusion-body .flo-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--flo-space-4) var(--flo-space-5);
  align-items: center;
  justify-items: center;
  padding: var(--flo-space-5) 0;
}
@media (min-width: 640px) {
  .fusion-body .flo-logo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .fusion-body .flo-logo-grid { grid-template-columns: repeat(6, 1fr); }
}
.fusion-body .flo-logo-grid__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  width: 100%;
  padding: var(--flo-space-2);
}
.fusion-body .flo-logo-grid__item img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 150ms ease;
}
.fusion-body .flo-logo-grid__item:hover img { opacity: 1; }
/* Text fallback when a logo post has no featured image */
.fusion-body .flo-logo-grid__item--text {
  font-family: var(--flo-font-display);
  font-weight: 400; /* PPFrama-Semibold has only the semibold face loaded */
  font-size: 1.05rem;
  color: var(--flo-color-plum);
  opacity: 0.55;
  white-space: nowrap;
}
.fusion-body .flo-logo-grid--on-dark .flo-logo-grid__item--text { color: var(--flo-color-text-inverse); opacity: 0.7; }
/* Strip variant — single row, looser spacing, scrolls horizontally on small */
.fusion-body .flo-logo-grid--strip {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: var(--flo-space-7);
  padding: var(--flo-space-4) var(--flo-space-3);
  justify-content: flex-start;
}
.fusion-body .flo-logo-grid--strip .flo-logo-grid__item { flex: 0 0 auto; height: 64px; width: auto; }

/* Tinted variant — recolors logos to a single solid color via mask-image.
   Used by the partner-logo strip on the light gradient panel. The PNG's
   alpha channel becomes the silhouette; background-color provides the fill.
   The .flo-logo-grid__silhouette span is a colored block; the source PNG
   is applied as mask, so only the alpha shape shows in plum. */
.fusion-body .flo-logo-grid__silhouette {
  display: block;
  height: 100%;
  background-color: var(--flo-color-plum);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.fusion-body .flo-logo-grid--tinted .flo-logo-grid__item {
  height: 56px;
  width: auto;
  opacity: 0.5;
}
.fusion-body .flo-logo-grid--tinted.flo-logo-grid--strip {
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 88px;
  padding: var(--flo-space-3) 0;
  overflow: visible;
}
@media (max-width: 800px) {
  /* Partner logos on the product panel form a tidy 2-col grid per figma
     2104-12756 (the 88px flex gap leaves them ragged / mostly 1-up at 375).
     Scoped to .flo-panel so the home hero's own strip override is untouched. */
  .fusion-body .flo-panel .flo-logo-grid--tinted.flo-logo-grid--strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px;
    justify-items: center;
    align-items: center;
  }
  .fusion-body .flo-panel .flo-logo-grid--tinted.flo-logo-grid--strip .flo-logo-grid__item {
    width: 100%;
    min-width: 0; /* let the two 1fr tracks stay equal; logos scale to fit */
  }
  .fusion-body .flo-panel .flo-logo-grid--tinted.flo-logo-grid--strip .flo-logo-grid__silhouette {
    width: 100%;
  }
}
/* Heading lines for sections that include the logo grid */
.fusion-body .flo-logo-grid__heading {
  text-align: center;
  font-family: var(--flo-font-display);
  font-weight: 400; /* PPFrama-Semibold has only the semibold face loaded */
  font-size: var(--flo-size-h4);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-plum);
  margin: 0 0 var(--flo-space-4) 0;
}
.fusion-body .flo-logo-grid-block--on-dark .flo-logo-grid__heading { color: var(--flo-color-text-inverse); }
/* logo-grid-block is the full-bleed shim; __inner constrains the heading + grid. */
.fusion-body .flo-logo-grid-block__inner { position: relative; }

/* ------------------------------------------------------------
   flo-solution-grid + flo-solution-card — Tier 3, section 4
   "Other tools promise…" — 1 wide card on top + 2 narrow below.
   Section is a full-bleed dark-plum band; inside sits a folder-shape
   panel with a light gradient fill + a tab extruding UP at top-left
   and a tab extruding DOWN at bottom-right. The tabs share the gradient
   palette of the .flo-panel above (and the section below), creating a
   visual interlock between adjacent stripes.
   ------------------------------------------------------------ */
.fusion-body .flo-solution-grid {
  background: var(--flo-color-bg-overlay);
  color: var(--flo-color-text-inverse);
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  /* margin-left/right are owned by the shared full-bleed rule above. */
}
.fusion-body .flo-solution-grid__folder {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  background:
    radial-gradient(ellipse 70% 60% at 0% 30%,  rgba(180, 158, 245, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 90% 70% at 100% 25%, rgba(255, 200, 175, 0.65) 0%, transparent 70%),
    radial-gradient(ellipse 75% 70% at 100% 100%, rgba(255, 220, 145, 0.65) 0%, transparent 75%),
    linear-gradient(180deg, #f6e8ff 0%, #ffe5d8 50%, #fff1cc 100%);
  border-radius: var(--flo-radius-lg) var(--flo-radius-lg) 0 0;
  padding: var(--flo-space-8) var(--flo-space-7) var(--flo-space-8);
}
@media (min-width: 1024px) {
  .fusion-body .flo-solution-grid__folder {
    padding: 160px 112px;
    border-radius: 0; /* clip-path provides the rounded silhouette on desktop */
    -webkit-clip-path: url(#flo-solution-folder-mask);
            clip-path: url(#flo-solution-folder-mask);
  }
}
.fusion-body .flo-solution-grid__inner {
  position: relative;
  max-width: none;
  padding: 0;
}
.fusion-body .flo-solution-grid__title {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h2);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-text); /* #211236 — figma text/primary */
  margin: 0 0 var(--flo-space-7) 0;
  max-width: 1100px;
}
.fusion-body .flo-solution-grid__title em {
  color: var(--flo-color-plum); /* #4a236d — figma text/tertiary */
  font-style: normal;
}
.fusion-body .flo-solution-grid__rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--flo-space-4);
}
@media (min-width: 800px) {
  .fusion-body .flo-solution-grid__rows { grid-template-columns: 1fr 1fr; }
  /* Wide cards span both columns; narrow cards sit side-by-side. */
  .fusion-body .flo-solution-grid__rows > .flo-solution-card--wide { grid-column: 1 / -1; }
}
.fusion-body .flo-solution-card {
  background: #fff;
  color: var(--flo-color-text);
  border-radius: var(--flo-radius-md);
  padding: var(--flo-space-6);
  display: grid;
  gap: var(--flo-space-4);
}
.fusion-body .flo-solution-card--wide {
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .fusion-body .flo-solution-card--wide { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--flo-space-6); }
}
.fusion-body .flo-solution-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--flo-space-3);
}
.fusion-body .flo-solution-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--flo-space-4);
}
.fusion-body .flo-solution-card__title {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h3, 30px);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-plum);
  margin: 0;
  flex: 1 1 auto;
}
.fusion-body .flo-solution-card__icon {
  display: block;
  width: 60px;
  height: 73px;
  flex-shrink: 0;
  background-color: var(--flo-color-plum);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.fusion-body .flo-solution-card__icon--text {
  font-size: 36px;
  background: none;
  width: auto;
  height: auto;
}
.fusion-body .flo-solution-card__copy {
  font-family: var(--flo-font-body);
  font-size: var(--flo-size-body-md);
  line-height: var(--flo-leading-body);
  color: var(--flo-color-text);
  margin: 0;
}
.fusion-body .flo-solution-card__media {
  border-radius: var(--flo-radius-md);
  overflow: hidden;
  background: #eff2f6;
  aspect-ratio: 508 / 231;
}
.fusion-body .flo-solution-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 800px) {
  /* figma 2104-12791: 16px gutters (the desktop 72px folder padding squished
     content to ~231px at 375), 36px title, 24px card padding, 24px card titles
     (h-tags → !important beats Avada's responsive shrink). */
  .fusion-body .flo-solution-grid__folder {
    padding: 114px 16px 64px;
    --notch-w: 53%;
    --notch-h: 64px;
    --notch-elbow: 28px;
  }
  .fusion-body .flo-solution-grid__title { font-size: 36px !important; }
  .fusion-body .flo-solution-card { padding: 24px; }
  .fusion-body .flo-solution-card__title { font-size: 24px !important; }
  /* Top-left folder tab on mobile (figma 2423:6104): the desktop clip-path is
     dropped <1024px (folder is just a rounded rect), so the interlock with the
     section above is missing. Paint the plum notch on the top-RIGHT with a
     pseudo (same technique as the client-logos bar) — robust vs a clip-path
     distorting on this very tall folder. The section's plum bg shows through,
     so the light folder reads as a tab extruding UP on the top-LEFT. */
  .fusion-body .flo-solution-grid__folder::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: var(--notch-w);
    height: var(--notch-h);
    background: var(--flo-color-bg-overlay);
    border-bottom-left-radius: var(--notch-elbow);
    z-index: 2;
    pointer-events: none;
  }
  /* Concave elbow just left of the notch so the folder's top edge curves into
     it (smooth S-curve, mirroring the client-logos ::before elbow). */
  .fusion-body .flo-solution-grid__folder::before {
    content: "";
    position: absolute;
    top: 0;
    right: var(--notch-w);
    width: var(--notch-elbow);
    height: var(--notch-elbow);
    background:
      radial-gradient(circle at bottom left,
        transparent calc(var(--notch-elbow) - 0.5px),
        var(--flo-color-bg-overlay) var(--notch-elbow));
    z-index: 2;
    pointer-events: none;
  }
}

/* ------------------------------------------------------------
   flo-integration-panel — Tier 3, section 6
   Full-bleed lavender/coral mesh-gradient bg with an inner cream
   "folder" shape (clip-path) housing heading + body + logo grid,
   then a CTA heading + button below the folder on the gradient.
   ------------------------------------------------------------ */
.fusion-body .flo-integration-panel {
  position: relative;
  padding: 80px 0 120px;
  overflow: hidden;
  /* Gradient bg approximates figma's mesh-gradient image: lavender
     top-left, coral mid-right, plum bottom-right. */
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(181, 130, 255, 0.6) 0%, transparent 70%),
    radial-gradient(ellipse 60% 70% at 100% 30%, rgba(255, 145, 110, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(86, 71, 135, 0.7) 0%, transparent 70%),
    linear-gradient(160deg, #4a236d 0%, #564787 50%, #6e3a8a 100%);
}
.fusion-body .flo-integration-panel__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
}
.fusion-body .flo-integration-panel__folder {
  width: 100%;
  background: #fff; /* white folder on every instance (matches home) */
  -webkit-clip-path: url(#flo-integration-folder-mask);
          clip-path: url(#flo-integration-folder-mask);
}
.fusion-body .flo-integration-panel__folder-inner {
  padding: 64px 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.fusion-body .flo-integration-panel__heading {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h3, 30px);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-plum); /* #4a236d */
  margin: 0;
}
.fusion-body .flo-integration-panel__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 800px) {
  .fusion-body .flo-integration-panel__row {
    grid-template-columns: 1fr 524px;
  }
}
/* Home media layout (figma 2866:9897): heading+body left, image right, both
   vertically centred. 1-col stacked below 800px. */
.fusion-body .flo-integration-panel__row--media {
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 800px) {
  .fusion-body .flo-integration-panel__row--media {
    grid-template-columns: 1fr 1fr;
  }
}
.fusion-body .flo-integration-panel__copy {
  display: flex;
  flex-direction: column;
  gap: 24px; /* figma Frame 72 gap */
}
.fusion-body .flo-integration-panel__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--flo-radius-lg);
}
.fusion-body .flo-integration-panel__body {
  font-family: var(--flo-font-body);
  font-size: var(--flo-size-body-md);
  line-height: var(--flo-leading-body);
  color: var(--flo-color-text); /* #211236 */
  margin: 0;
}
/* Inner placeholder tile grid: 3-col, 2-row */
.fusion-body .flo-integration-panel__logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.fusion-body .flo-integration-panel__tile {
  height: 102px;
  background: #dee5ed; /* figma neutral/2 */
  border-radius: var(--flo-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a236d;
}
.fusion-body .flo-integration-panel__tile svg {
  width: 42px;
  height: 42px;
}
@media (max-width: 800px) {
  /* Figma 2423:6611: section uses a tight 48px top padding and no bottom
     padding on mobile (the following section owns the gap below) — down from
     the desktop 80/120. */
  .fusion-body .flo-integration-panel { padding: 48px 0 0; }
  /* Product variant (figma 2423:6200): the section's plum-MESH bg was showing
     through the 48px top padding as a stray multicolour band between this and
     the full-bleed plum section above. Drop the top padding so the light folder
     sits flush — the home variant keeps 48px (its bg is transparent, so the top
     padding just shows clean wrapper-plum, not a mesh band). */
  .fusion-body .flo-integration-panel:not(.flo-integration-panel--home) {
    padding: 0 0 80px;
    /* Accurate mesh bg (figma 2423:6215) anchored to the CTA promo at the
       bottom; folder/light logos cover the top. */
    background: var(--flo-color-bg-overlay) url(/wp-content/themes/fh-avada-child/assets/images/product-cta-bg.png) no-repeat center bottom / 100% auto;
  }
  /* 16px content gutters for the CTA promo (figma px-16) — was edge-to-edge. */
  .fusion-body .flo-integration-panel__cta { padding-left: 16px; padding-right: 16px; }
  /* Figma 2118-16219: heading 30px (h-tag, so !important beats Avada's shrink),
     content near the left edge (16px folder padding so it tracks the section
     gutter and the tiles get their figma ~150px width), logos 2-up. */
  .fusion-body .flo-integration-panel__heading { font-size: 30px !important; }
  .fusion-body .flo-integration-panel__folder-inner { padding: 32px 16px; }
  .fusion-body .flo-integration-panel__logos { grid-template-columns: repeat(2, 1fr); }
}
/* CTA section sitting on the gradient under the folder */
.fusion-body .flo-integration-panel__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 940px;
  text-align: center;
}
.fusion-body .flo-integration-panel__cta-heading {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h3, 30px);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-text-inverse); /* white */
  margin: 0;
}
/* CTA button: dark-plum text on the coral fill per figma 2423:6215 (the coral
   default is white text). Same treatment as the global-reach promo CTA. The
   arrow inherits via currentColor. */
.fusion-body .flo-integration-panel__cta .flo-cta--coral,
.fusion-body .flo-integration-panel__cta .flo-cta--coral:visited {
  color: var(--flo-color-text);
}
/* Homepage variant — sits inside .flo-home-wrapper's gradient mesh, so the
   panel itself drops its own background. Folder fill becomes light lavender
   (figma colors/Plum/insight-lavender) and the silhouette is rotated 180°
   so tabs land at bottom-LEFT and top-RIGHT. */
.fusion-body .flo-integration-panel--home {
  background: transparent;
}
.fusion-body .flo-integration-panel--home .flo-integration-panel__folder {
  background: #fff;
  -webkit-clip-path: url(#flo-integration-folder-mask--home);
          clip-path: url(#flo-integration-folder-mask--home);
}

@media (max-width: 800px) {
  .fusion-body .flo-integration-panel__folder {
    -webkit-clip-path: none !important;
    clip-path: none !important;
  }

  .fusion-body .flo-integration-panel__inner {
    padding: 0;
  }
}

/* ------------------------------------------------------------
   flo-how-it-works — Tier 3, section 5
   "See how it works" — title + 2-col carousel (text + bullets +
   case-study link on the left, vertical pager middle, screenshot
   right). At <800px viewport, all steps stack vertically with the
   screenshot above each step's text and the pager hidden.
   ------------------------------------------------------------ */
.fusion-body .flo-how-it-works {
  background: var(--flo-color-bg-overlay);
  color: var(--flo-color-text-inverse);
  /* Asymmetric vertical padding: only top. Image bleeds to the bottom of the
     section per figma. */
  padding: var(--flo-space-7) 0 0;
  /* Override the shared 1280px content cap. Figma indents the section ~80px
     from the left and lets the screenshot bleed to the viewport's right edge
     — that's asymmetric padding, not the standard symmetric .flo-content. */
  --flo-content-max: 1440px;
  overflow: hidden; /* image can bleed past container without horizontal scroll */
}
@media (min-width: 1024px) {
  .fusion-body .flo-how-it-works .flo-content {
    padding-left: var(--flo-space-7);  /* 72px ≈ Figma's ~80px left indent */
    padding-right: 0;                   /* screenshot column reaches the viewport right edge */
  }
}
@media (min-width: 1024px) {
  .fusion-body .flo-how-it-works { padding: 120px 0 0; }
}
.fusion-body .flo-how-it-works__inner { position: relative; }
.fusion-body .flo-how-it-works__title {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h1, 48px);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-link, #b582ff); /* figma text/link */
  margin: 0 0 var(--flo-space-7) 0;
  max-width: 720px;
}
/* Mobile (default): stack all steps vertically; each step is its own block. */
.fusion-body .flo-how-it-works__viewport {
  display: block;
}
.fusion-body .flo-how-it-works__steps { display: contents; }

/* Desktop: viewport becomes a 3-column grid with named areas for text / pager
   / screen. Step wrappers dissolve via display:contents so each step's __text
   and __media land directly in their named grid areas. All __text elements
   overlap in the "text" area; all __media in the "screen" area. Only the
   active step's children are visible (opacity toggling below). */
@media (min-width: 800px) {
  .fusion-body .flo-how-it-works__viewport {
    display: grid;
    grid-template-areas: "text pager screen";
    grid-template-columns: 360px 40px 1fr;
    grid-template-rows: 1fr;
    gap: var(--flo-space-6);
    align-items: start;
  }
}

/* Per-component placement for the shared .flo-pager partial.
   Visual styling lives in the .flo-pager block (search for "flo-pager —"). */
.fusion-body .flo-how-it-works .flo-pager--vertical {
  align-self: start;
  margin-top: 40px;
}

/* Steps — at desktop, stack absolutely so they overlay; only the active one is visible.
   At mobile, all steps render flowing vertically. */
.fusion-body .flo-how-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--flo-space-5);
  margin: 0 0 var(--flo-space-7) 0;
}
.fusion-body .flo-how-step__media {
  /* Mobile: rounded card with shadow. Desktop overrides to full-bleed. */
  border-radius: var(--flo-radius-md);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
@media (min-width: 800px) {
  .fusion-body .flo-how-step__media {
    border-radius: var(--flo-radius-lg) 0 0 0; /* only top-left rounded; right + bottom bleed */
    box-shadow: none;
  }
}
@media (min-width: 1024px) {
  /* Bleed the screenshot past the right viewport edge for the "running off" feel
     per Figma 2423:4006. Image is wider than its 1fr grid cell; .flo-how-it-works's
     overflow:hidden clips the overflow at the viewport edge. */
  .fusion-body .flo-how-step__media {
    width: 1100px;
    max-width: none;
  }
}
.fusion-body .flo-how-step__media img { display: block; width: 100%; height: auto; }
.fusion-body .flo-how-step__text {
  display: flex;
  flex-direction: column;
  gap: var(--flo-space-3);
}
.fusion-body .flo-how-step__subheading {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h4);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-text-inverse);
  margin: 0;
}
.fusion-body .flo-how-step__body {
  font-family: var(--flo-font-body);
  font-size: var(--flo-size-body-md);
  line-height: var(--flo-leading-body);
  color: var(--flo-color-text-inverse);
  margin: 0;
}
.fusion-body .flo-how-step__bullets {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--flo-space-2);
}
.fusion-body .flo-how-step__bullets li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--flo-space-2);
  align-items: baseline;
  font-family: var(--flo-font-body);
  font-size: var(--flo-size-body-md);
  color: var(--flo-color-text-inverse);
}
.fusion-body .flo-how-step__bullet-arrow {
  color: var(--flo-color-link);
  font-weight: 700;
}
.fusion-body .flo-how-step__divider {
  border: 0;
  border-top: 1px solid var(--flo-color-link);
  margin: var(--flo-space-4) 0 var(--flo-space-3) 0;
}
.fusion-body .flo-how-step__case-study {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--flo-space-3);
  font-family: var(--flo-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--flo-color-text-inverse);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.fusion-body .flo-how-step__case-study::after {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
          mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
}

@media (max-width: 800px) {
  /* figma 2423:6142: 80px section top padding, 36px section title, 20px step
     subheadings (h-tags → !important beats Avada's shrink). 80px between the
     case-study CTA and the next step's screenshot (figma leaves ~40px below the
     link + ~40px between step frames) — up from the cramped 40px. */
  .fusion-body .flo-how-it-works { padding-top: 80px; }
  .fusion-body .flo-how-it-works__title { font-size: 36px !important; }
  .fusion-body .flo-how-step__subheading { font-size: 20px !important; }
  .fusion-body .flo-how-step { margin-bottom: 80px; }
}

/* Desktop layout: each step's wrapper dissolves via display:contents so
   __text and __media land directly in the parent grid's named areas. All
   text blocks overlap in the "text" area; all media in the "screen" area.
   Toggle visibility via the parent's data-active attribute. */
@media (min-width: 800px) {
  .fusion-body .flo-how-step {
    display: contents;
    margin: 0;
  }
  .fusion-body .flo-how-step__text {
    grid-area: text;
    grid-row: 1;
    grid-column: text;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .fusion-body .flo-how-step__media {
    grid-area: screen;
    grid-row: 1;
    grid-column: screen;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .fusion-body .flo-how-it-works .flo-pager--vertical { grid-area: pager; }
  .fusion-body .flo-how-it-works[data-active="1"] .flo-how-step[data-step="1"] > *,
  .fusion-body .flo-how-it-works[data-active="2"] .flo-how-step[data-step="2"] > *,
  .fusion-body .flo-how-it-works[data-active="3"] .flo-how-step[data-step="3"] > *,
  .fusion-body .flo-how-it-works[data-active="4"] .flo-how-step[data-step="4"] > *,
  .fusion-body .flo-how-it-works[data-active="5"] .flo-how-step[data-step="5"] > * {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ------------------------------------------------------------
   flo-real-stories — compound testimonial section.
   Full-bleed plum bg holding three stacked sub-sections:
     1. Heading + testimonial carousel + logo nav
     2. 2 white resource cards
     3. Capterra/G2 ratings + tagline + ghost CTA
   ------------------------------------------------------------ */
.fusion-body .flo-real-stories {
  background: var(--flo-color-bg-overlay);
  color: var(--flo-color-text-inverse);
  padding: 160px 0 120px;
}
@media (max-width: 800px) {
  .fusion-body .flo-real-stories { padding: var(--flo-space-7) 0; }
}
.fusion-body .flo-real-stories__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.fusion-body .flo-real-stories__heading {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h2);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-text-inverse);
  text-align: center;
  margin: 0;
}
/* Carousel */
.fusion-body .flo-real-stories__carousel {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 var(--flo-space-5);
}
.fusion-body .flo-real-stories__slides {
  position: relative;
}
.fusion-body .flo-real-stories__slide {
  display: none;
  flex-direction: column;
  gap: var(--flo-space-4);
}
.fusion-body .flo-real-stories__slide:not([aria-hidden="true"]) {
  display: flex;
}
.fusion-body .flo-real-stories__quote {
  font-family: var(--flo-font-body);
  font-weight: 600;
  font-size: var(--flo-size-h1, 48px);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-link); /* lavender #b582ff */
  margin: 0;
  /* Override Avada's blockquote default styling */
  background: transparent;
  padding: 0;
  border: 0;
  font-style: normal;
}
.fusion-body .flo-real-stories__attribution-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--flo-space-5);
  flex-wrap: wrap;
}
.fusion-body .flo-real-stories__attribution {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.6;
  color: var(--flo-color-text-inverse);
  margin: 0;
}
.fusion-body .flo-real-stories__case-study {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--flo-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--flo-color-text-inverse);
  text-decoration: none;
}
.fusion-body .flo-real-stories__case-study:hover { color: var(--flo-color-link); }
.fusion-body .flo-real-stories__case-study::after {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
          mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
}
.fusion-body .flo-real-stories__divider {
  border: 0;
  border-top: 2px solid var(--flo-color-text-inverse);
  opacity: 0.3;
  margin: 0;
}
/* Logo nav */
.fusion-body .flo-real-stories__pager {
  display: flex;
  align-items: center;
  gap: var(--flo-space-5);
}
.fusion-body .flo-real-stories__nav {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--flo-color-text-inverse);
  width: 40px;
  height: 40px;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fusion-body .flo-real-stories__nav::before {
  content: "";
  width: 40px;
  height: 40px;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url(/wp-content/themes/fh-avada-child/assets/icons/chevron-right.svg) no-repeat center / contain;
          mask: url(/wp-content/themes/fh-avada-child/assets/icons/chevron-right.svg) no-repeat center / contain;
}
.fusion-body .flo-real-stories__nav--prev::before { transform: scaleX(-1); }
.fusion-body .flo-real-stories__nav:hover { color: var(--flo-color-link); }
.fusion-body .flo-real-stories__logos {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--flo-space-7);
  flex: 1 1 auto;
}
.fusion-body .flo-real-stories__logo {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  opacity: 0.4;
  transition: opacity 200ms ease, transform 200ms ease;
  filter: brightness(0) invert(1);
}
.fusion-body .flo-real-stories__logo img {
  height: 36px;
  width: auto;
  display: block;
}
.fusion-body .flo-real-stories__logo--active {
  opacity: 1;
  transform: scale(1.4);
}
.fusion-body .flo-real-stories__logo-text {
  color: var(--flo-color-text-inverse);
  font-family: var(--flo-font-display);
  font-size: 18px;
  white-space: nowrap;
}
/* Resource cards */
.fusion-body .flo-real-stories__resources {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 800px) {
  .fusion-body .flo-real-stories__resources { grid-template-columns: 1fr 1fr; }
}
.fusion-body .flo-real-stories__resource {
  background: #fff;
  border-radius: var(--flo-radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--flo-color-text);
}
.fusion-body .flo-real-stories__resource-thumb {
  display: block;
  aspect-ratio: 536 / 231;
  background: #eff2f6;
  overflow: hidden;
}
.fusion-body .flo-real-stories__resource-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.fusion-body .flo-real-stories__resource-body {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: var(--flo-space-3);
}
.fusion-body .flo-real-stories__resource-title {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h4);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-plum);
  margin: 0;
}
.fusion-body .flo-real-stories__resource-excerpt {
  font-family: var(--flo-font-body);
  font-size: var(--flo-size-body-md);
  line-height: var(--flo-leading-body);
  color: var(--flo-color-text);
  margin: 0;
}
.fusion-body .flo-real-stories__resource-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--flo-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--flo-color-plum);
  text-decoration: none;
}
.fusion-body .flo-real-stories__resource-link:hover { color: var(--flo-color-plum-dark); }
.fusion-body .flo-real-stories__resource-link::after {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
          mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
}
/* Ratings + CTA */
.fusion-body .flo-real-stories__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--flo-space-4);
}
.fusion-body .flo-real-stories__ratings {
  height: 48px;
  width: auto;
  display: block;
}
.fusion-body .flo-real-stories__tagline {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h4);
  color: var(--flo-color-text-inverse);
  text-align: center;
  margin: 0;
}
@media (max-width: 800px) {
  /* figma 2104-12905/12907: heading 30px, pull-quote uses the mobile h1 (36px,
     not the desktop 48), 18px case-study link, 20px resource-card titles.
     (h-tags get !important to beat Avada's responsive shrink.) */
  .fusion-body .flo-real-stories__heading { font-size: 30px !important; }
  .fusion-body .flo-real-stories__quote { font-size: 36px; }
  .fusion-body .flo-real-stories__case-study { font-size: 18px; }
  .fusion-body .flo-real-stories__resource-title { font-size: 20px !important; }
}

/* ------------------------------------------------------------
   flo-testimonial-feature — Tier 3, section 7
   Big-quote treatment from flo_testimonial CPT.
   ------------------------------------------------------------ */
.fusion-body .flo-testimonial-feature {
  background: var(--flo-color-bg-overlay);
  color: var(--flo-color-text-inverse);
  padding: var(--flo-space-8) 0;
}
.fusion-body .flo-testimonial-feature__inner { text-align: center; }
.fusion-body .flo-testimonial-feature__eyebrow {
  font-family: var(--flo-font-display);
  font-weight: 400; /* PPFrama-Semibold has only the semibold face loaded */
  font-size: var(--flo-size-h4);
  color: var(--flo-color-coral);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--flo-space-5);
}
.fusion-body .flo-testimonial-feature__quote {
  font-family: var(--flo-font-display);
  font-weight: 400; /* PPFrama-Semibold has only the semibold face loaded */
  font-size: clamp(1.25rem, 2.4vw, var(--flo-size-h3));
  line-height: 1.3;
  max-width: 1000px;
  margin: 0 auto var(--flo-space-5);
  color: var(--flo-color-text-inverse);
}
.fusion-body .flo-testimonial-feature__quote::before { content: "\201C"; }
.fusion-body .flo-testimonial-feature__quote::after { content: "\201D"; }
.fusion-body .flo-testimonial-feature__attribution {
  font-family: var(--flo-font-body);
  font-size: var(--flo-size-body-md);
  color: var(--flo-color-text-inverse);
  opacity: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--flo-space-3);
  flex-wrap: wrap;
}
.fusion-body .flo-testimonial-feature__attribution strong {
  font-weight: 600;
  opacity: 1;
}

/* ------------------------------------------------------------
   flo-video-tile — Tier 3, section 7
   2-up tiles below the testimonial. Reads from native `video` CPT.
   ------------------------------------------------------------ */
/* flo-video-tiles is a transparent full-bleed shim; content is constrained
   by its __inner wrapper (matches the section / inner pattern of other
   Phase 3 components). */
.fusion-body .flo-video-tiles__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--flo-space-5);
}
@media (min-width: 800px) {
  .fusion-body .flo-video-tiles__inner { grid-template-columns: 1fr 1fr; }
}
.fusion-body .flo-video-tile {
  display: block;
  position: relative;
  border-radius: var(--flo-radius-md);
  overflow: hidden;
  background: var(--flo-color-bg-overlay);
  aspect-ratio: 16 / 9;
  text-decoration: none;
}
.fusion-body .flo-video-tile__thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
  transition: transform 200ms ease, filter 200ms ease;
}
.fusion-body .flo-video-tile:hover .flo-video-tile__thumb { transform: scale(1.04); filter: brightness(0.55); }
.fusion-body .flo-video-tile__overlay {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--flo-space-5);
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.65) 100%);
  color: #fff;
}
.fusion-body .flo-video-tile__title {
  font-family: var(--flo-font-display);
  font-weight: 400; /* PPFrama-Semibold has only the semibold face loaded */
  font-size: var(--flo-size-h4);
  line-height: var(--flo-leading-display);
  margin: 0;
}
.fusion-body .flo-video-tile__play {
  position: absolute;
  left: var(--flo-space-5); top: var(--flo-space-5);
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.85);
  color: var(--flo-color-plum);
  border-radius: 50%;
  font-size: 1.1rem;
}

/* ------------------------------------------------------------
   flo-global-reach — Tier 3, section 8
   World map composition + impact heading + compliance strip.
   The "map" itself is rendered as an inline SVG in markup, with
   ~40 dot markers; the gradient blobs come from the bg here.
   ------------------------------------------------------------ */
.fusion-body .flo-global-reach {
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%,    rgba(74, 35, 109, 0.55) 0%, transparent 65%),
    radial-gradient(ellipse 70% 60% at 100% 30%, rgba(255, 120, 89, 0.30) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(74, 35, 109, 0.55) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 0% 100%,  rgba(255, 120, 89, 0.25) 0%, transparent 70%),
    var(--flo-color-bg-overlay);
  color: var(--flo-color-text-inverse);
  padding: 160px 0;
  overflow: hidden;
}
.fusion-body .flo-global-reach__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.fusion-body .flo-global-reach__heading {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h2);
  line-height: var(--flo-leading-display);
  max-width: 1100px;
  margin: 0;
  color: var(--flo-color-text-inverse);
}
.fusion-body .flo-global-reach__heading em {
  color: var(--flo-color-link); /* lavender accent */
  font-style: normal;
}
.fusion-body .flo-global-reach__map {
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 1040 / 506;
}
.fusion-body .flo-global-reach__map-img {
  width: 100%; height: 100%; display: block;
}
/* Compliance card — plum rounded panel inside the section */
.fusion-body .flo-global-reach__compliance {
  background: var(--flo-color-plum); /* #4a236d */
  border-radius: var(--flo-radius-md);
  padding: 48px 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 800px) {
  .fusion-body .flo-global-reach__compliance { grid-template-columns: 1fr 1fr; }
}
.fusion-body .flo-global-reach__compliance-text {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h4);
  line-height: var(--flo-leading-display);
  color: #fff;
  margin: 0;
}
/* Single PNG (840x541) tinted lavender via mask-image — keeps aspect ratio */
.fusion-body .flo-global-reach__compliance-grid {
  aspect-ratio: 840 / 541;
  width: 100%;
  background-color: var(--flo-color-text-inverse);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
/* Product Tour CTA — folder shape with cream bg, heading + button */
.fusion-body .flo-global-reach__cta {
  position: relative;
  min-height: 312px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fusion-body .flo-global-reach__cta-bg {
  position: absolute;
  inset: 0;
  background: #fff2cf; /* surface/hover cream */
  -webkit-clip-path: url(#flo-global-reach-cta-mask);
          clip-path: url(#flo-global-reach-cta-mask);
  z-index: 0;
}
.fusion-body .flo-global-reach__cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 100px 80px 60px;
  max-width: 960px;
}
.fusion-body .flo-global-reach__cta-heading {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h3, 30px);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-plum);
  text-align: center;
  margin: 0;
}
/* Decorative florence-icon stand-in on the bottom-right of the CTA folder.
   Hidden until the real florence-logo-icon SVG is supplied. */
.fusion-body .flo-global-reach__cta-icon { display: none; }
@media (max-width: 800px) {
  /* figma 2104-12955: ~80px section padding (vs desktop 160), lead is h3 30px
     centered (2104-12963). h-tags → !important beats Avada's responsive shrink. */
  .fusion-body .flo-global-reach { padding: 80px 0; }
  .fusion-body .flo-global-reach__heading { font-size: 30px !important; text-align: center; }
  /* CTA on mobile (figma 2104-12889): a flat block on the section's dark
     gradient — drop the cream folder, white centered 30px heading, coral button
     with dark text. */
  .fusion-body .flo-global-reach__cta { min-height: 0; }
  .fusion-body .flo-global-reach__cta-bg { display: none; }
  .fusion-body .flo-global-reach__cta-inner { padding: 0; gap: 40px; max-width: none; }
  .fusion-body .flo-global-reach__cta-heading {
    font-size: 30px !important;
    color: var(--flo-color-text-inverse);
  }
  .fusion-body .flo-global-reach__cta .flo-cta--coral { color: var(--flo-color-text); }
}

/* ------------------------------------------------------------
   flo-product-spotlight — Tier 3, section 9
   2 product cards: image left, copy right, CTA below.
   Static content per page (shortcode attrs, no CPT).
   ------------------------------------------------------------ */
.fusion-body .flo-product-spotlight-grid {
  background: var(--flo-color-bg-overlay);
  color: var(--flo-color-text-inverse);
  padding: 160px 0;
}
.fusion-body .flo-product-spotlight-grid__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.fusion-body .flo-product-spotlight-grid__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.fusion-body .flo-product-spotlight-grid__heading {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h2);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-text-inverse);
  margin: 0;
}
.fusion-body .flo-product-spotlight-grid__sub {
  font-family: var(--flo-font-body);
  font-size: var(--flo-size-body-lg);
  line-height: var(--flo-leading-body);
  color: #fff;
  margin: 0;
}
.fusion-body .flo-product-spotlight-grid__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 800px) {
  .fusion-body .flo-product-spotlight-grid__cards { grid-template-columns: 1fr 1fr; }
}
/* Product card — uses the .flo-tab-card primitive with cream bg per figma
   (background/subtle = #fffaf0). Tab + body + elbow all share --bg, so the
   silhouette is a single continuous cream folder. The audience label sits
   inside the tab area as plum text on cream. */
.fusion-body .flo-product-spotlight {
  --tab-w: 200px;
  --tab-h: 64px;
  --radius: var(--flo-radius-lg);
  --bg: #fffaf0;
  margin: 0;
  color: var(--flo-color-text);
}
@media (min-width: 800px) {
  .fusion-body .flo-product-spotlight {
    --tab-w: 400px;
  }
}
/* Empty plum tab on the RIGHT — body cream extends below + around it via
   the elbow pseudo. Tab itself has no content; the label sits separately
   in the empty top-LEFT space. */
.fusion-body .flo-product-spotlight .flo-tab-card__tab {
  background: #fffaf0;
}
/* Audience label in the empty top-LEFT space, NEXT TO the tab shape */
.fusion-body .flo-product-spotlight__label {
  position: absolute;
  top: 16px;
  left: 24px;
  z-index: 2;
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  color: var(--flo-color-text-inverse);
}
/* Body content layout — text + icon side-by-side */
.fusion-body .flo-product-spotlight__body {
  padding: 40px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.fusion-body .flo-product-spotlight__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.fusion-body .flo-product-spotlight__name {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h3, 30px);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-plum);
  margin: 0;
}
.fusion-body .flo-product-spotlight__copy {
  font-family: var(--flo-font-body);
  font-size: var(--flo-size-body-md);
  line-height: var(--flo-leading-body);
  color: var(--flo-color-text);
  margin: 0;
}
.fusion-body .flo-product-spotlight__icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background-color: var(--flo-color-coral);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
@media (max-width: 800px) {
  /* figma 2104-13045: 80px section padding (vs desktop 160), centered 36px
     heading, 48px card gap, 30px card titles, 64px icons, 16px card top padding
     (h-tags → !important beats Avada's responsive shrink). */
  .fusion-body .flo-product-spotlight-grid { padding: 80px 0; }
  .fusion-body .flo-product-spotlight-grid__heading { font-size: 36px !important; text-align: center; }
  .fusion-body .flo-product-spotlight-grid__cards { gap: 48px; }
  .fusion-body .flo-product-spotlight__name { font-size: 30px !important; }
  .fusion-body .flo-product-spotlight__icon { width: 64px; height: 64px; }
  .fusion-body .flo-product-spotlight__body { padding: 16px 40px 40px; }
}

@media only screen and (max-device-width: 640px) {
  #content {
    margin-bottom: 0 !important;
  }
}

/* ------------------------------------------------------------
   flo-resource-grid — Tier 3, section 10
   3-up cards across multiple native resource post types.
   Mirrors legacy [latest_resources] query shape with
   Florence-styled markup.
   ------------------------------------------------------------ */
.fusion-body .flo-resource-grid-section {
  padding: 160px 0;
  background: #ffebe8; /* figma colors/coral/flow-blush */
}
.fusion-body .flo-resource-grid-section__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.fusion-body .flo-resource-grid__heading {
  text-align: center;
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h2);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-text); /* #211236 figma text/primary */
  margin: 0;
}
.fusion-body .flo-resource-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  width: 100%;
}
@media (min-width: 800px) {
  .fusion-body .flo-resource-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  /* figma 2118-14718: ~80px section padding (vs the desktop 160), 30px centered
     heading (h-tag → !important), 48px between stacked cards. */
  .fusion-body .flo-resource-grid-section { padding: 80px 0; }
  .fusion-body .flo-resource-grid__heading { font-size: 30px !important; }
  .fusion-body .flo-resource-grid { gap: 48px; }
}
.fusion-body .flo-resource-card {
  background: #fff;
  border-radius: var(--flo-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--flo-color-text);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.fusion-body .flo-resource-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(20, 20, 50, 0.08);
  color: var(--flo-color-text);
}
.fusion-body .flo-resource-card__thumb {
  aspect-ratio: 347 / 181;
  background: #fff;
  overflow: hidden;
}
.fusion-body .flo-resource-card__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.fusion-body .flo-resource-card__body {
  padding: 40px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
}
.fusion-body .flo-resource-card__title {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: 18px; /* figma h6 */
  line-height: var(--flo-leading-display);
  color: var(--flo-color-plum); /* #4a236d */
  margin: 0;
}
.fusion-body .flo-resource-grid__cta { align-self: center; }
.fusion-body .flo-resource-card__more {
  font-family: var(--flo-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--flo-color-coral);
  margin-top: var(--flo-space-3);
}

/* ============================================================
   HOMEPAGE COMPONENTS (Phase 4)
   See pages/homepage-qa.shortcodes.txt + docs/COMPONENTS.md.
   ============================================================ */

/* ------------------------------------------------------------
   flo-home-wrapper — Tier 0, sections 2–7 shared container
   Plum body with a folder-tab silhouette: tab extruding UP from
   the top-LEFT edge into the hero above. Same SVG-clipPath
   technique as flo-solution-grid + flo-integration-panel — the
   clipPath def is injected by includes/shortcodes/home-wrapper-defs.php.
   Path silhouette per Figma 2118:15675; the body's gradient flows
   continuously into the tab area for seamless coloring.
   ------------------------------------------------------------ */
.fusion-body .flo-home-wrapper {
  position: relative;
  /* Outer fill = hero plum so the area OUTSIDE the folder silhouette
     reads as a continuation of the hero above. The folder silhouette
     itself (with the gradient mesh) is painted by ::before below. */
  background: var(--flo-color-bg-overlay);
  color: var(--flo-color-text-inverse);
  padding-bottom: 96px;
}
/* Folder layer — clipped to the home-wrapper silhouette (tab on top-LEFT
   extruding UP, body below). The gradient mesh sits ONLY inside this
   silhouette so the cutout area flows into the surrounding plum.
   clipPath def is injected by includes/shortcodes/home-wrapper-defs.php. */
.fusion-body .flo-home-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-clip-path: url(#flo-home-wrapper-mask);
          clip-path: url(#flo-home-wrapper-mask);
  /* Coral + violet gradient mesh per Figma 2423:5007. Pattern reads as:
     bright peach top-left, subtle right-side warmth, central violet base,
     mid-left peach, bright peach resurging bottom-left. Positions are
     element-relative so they distribute across the wrapper's full height
     rather than clustering inside one viewport. */
  background:
    /* Top-LEFT — single bigger "momentum coral" shape per Figma 2423:5014.
       Built from two overlapping radial gradients with offset centers so
       the combined silhouette reads as a tall leaf-shape, not a clean ellipse. */
    radial-gradient(ellipse 480px 900px at 0% 10%, rgba(255,150,120,0.60) 0%, transparent 65%),
    radial-gradient(ellipse 360px 700px at 8% 16%, rgba(255,140,110,0.40) 0%, transparent 60%),
    /* Top-RIGHT — bumped visibility per QA */
    radial-gradient(ellipse 600px 500px at 105% 14%, rgba(255,120,89,0.40) 0%, transparent 60%),
    /* Lighter purple middle bloom per Figma 2423:5012 ("intergrity plum") */
    radial-gradient(ellipse 1200px 900px at 50% 50%, rgba(140,90,200,0.30) 0%, transparent 65%),
    /* Mid-left peach */
    radial-gradient(ellipse 550px 480px at -6% 60%, rgba(255,120,89,0.32) 0%, transparent 60%),
    /* Right-side mid-low */
    radial-gradient(ellipse 480px 420px at 105% 64%, rgba(255,120,89,0.18) 0%, transparent 60%),
    /* Bottom-left bright peach (Figma re-emphasizes here) */
    radial-gradient(ellipse 750px 620px at -5% 88%, rgba(255,120,89,0.50) 0%, transparent 62%),
    /* Central deeper violet warmth (sits beneath the lighter bloom) */
    radial-gradient(ellipse 800px 600px at 35% 52%, rgba(74,35,109,0.55) 0%, transparent 65%),
    /* Plum base wash */
    linear-gradient(180deg, #261541 0%, #2c1849 50%, #25143d 100%);
  z-index: 0;
  pointer-events: none;
}
.fusion-body .flo-home-wrapper > .fusion-row,
.fusion-body .flo-home-wrapper > .fusion-builder-row { /* avada inserts these */
  position: relative;
  z-index: 1;
}


/* ------------------------------------------------------------
   flo-hero-home — Tier 3, section 1
   Split-bg hero per Figma 2104:12351:
     - Top half: cream `--flo-color-bg-subtle` (#fffaf0)
     - Bottom half: plum `--flo-color-bg-overlay` (#211236)
   Two-col upper row: title (left) + body+CTA (right) on cream.
   Below: video panel with folder-tab silhouette (top center tab
   cutout) straddling the cream/plum split. On plum: cream "Read
   the Report" promo strip + full-bleed coral-tinted logo strip.
   ------------------------------------------------------------ */
.fusion-body .flo-hero-home {
  position: relative;
  background: var(--flo-color-bg-subtle); /* cream — fallback before split bg paints */
  color: var(--flo-color-text);
  padding: 0 0 120px;
  overflow: hidden;
  /* Figma frame width is 1216px, no inner side padding */
  --flo-content-max: 1216px;
}
.fusion-body .flo-hero-home .flo-content {
  padding-left: 0;
  padding-right: 0;
}
.fusion-body .flo-hero-home__bg-split {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 100%;
  background:
    linear-gradient(180deg,
      var(--flo-color-bg-subtle) 0%,
      var(--flo-color-bg-subtle) 44%,
      var(--flo-color-bg-overlay) 44%,
      var(--flo-color-bg-overlay) 100%);
  z-index: 0;
}
.fusion-body .flo-hero-home__bg-split::before {
  /* Soft coral glow centered at the split */
  content: "";
  position: absolute;
  left: 50%; top: 22%;
  transform: translateX(-50%);
  width: 90%;
  aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at center, rgba(255, 120, 89, 0.22) 0%, transparent 60%);
  pointer-events: none;
}
.fusion-body .flo-hero-home__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 96px;
}

/* Upper row — title (left, 516w) + body+CTA (right, 620w) */
.fusion-body .flo-hero-home__head {
  display: grid;
  grid-template-columns: 516px 1fr;
  gap: 80px;
  align-items: start;
}
.fusion-body .flo-hero-home__title {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.2;
  color: var(--flo-color-plum); /* structured plum #4a236d, per Figma */
  margin: 0;
  max-width: 516px;
}
.fusion-body .flo-hero-home__title em {
  color: var(--flo-color-coral);
  font-style: normal;
}
.fusion-body .flo-hero-home__head-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 620px;
}
.fusion-body .flo-hero-home__subhead {
  font-family: var(--flo-font-display);
  font-weight: 400; /* PPFrama-Semibold has only the semibold face loaded */
  font-size: 20px;
  line-height: 1.2;
  color: var(--flo-color-coral);
  margin: 0;
}
.fusion-body .flo-hero-home__lede {
  font-family: var(--flo-font-body);
  font-weight: 400;
  font-size: var(--flo-size-body-lg);
  line-height: var(--flo-leading-body);
  color: var(--flo-color-text);
  margin: 0;
}
.fusion-body .flo-hero-home__head-right .flo-cta {
  align-self: flex-start;
}

/* Video panel with folder-tab silhouette */
.fusion-body .flo-hero-home__media-wrap {
  margin-top: 40px;
}
.fusion-body .flo-hero-home__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1090 / 527; /* exact figma ratio — matches mask viewBox */
  background: var(--flo-color-text-inverse);
  -webkit-mask: url(/wp-content/themes/fh-avada-child/assets/images/hero-home-folder-mask.svg) no-repeat center / 100% 100%;
          mask: url(/wp-content/themes/fh-avada-child/assets/images/hero-home-folder-mask.svg) no-repeat center / 100% 100%;
}
.fusion-body .flo-hero-home__video,
.fusion-body .flo-hero-home__video-poster,
.fusion-body .flo-hero-home__video-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.fusion-body .flo-hero-home__video-placeholder {
  background:
    linear-gradient(180deg, #f5edff 0%, #e9deff 100%);
}
/* Video pause/play toggle — orange circle, bottom-right corner per Figma
   2866:9785. Shows the pause glyph while playing (default), swaps to the play
   triangle when .is-paused is set by components.js. */
.fusion-body .flo-hero-home__play {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--flo-color-coral); /* momentum coral #ff7859 */
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(33, 18, 54, 0.18);
  padding: 0;
}
.fusion-body .flo-hero-home__play-icon {
  display: none;
  line-height: 0;
}
.fusion-body .flo-hero-home__play-icon svg {
  display: block;
  width: 22px; height: 22px;
}
.fusion-body .flo-hero-home__play-icon--play svg {
  margin-left: 3px; /* nudge play triangle to optical center */
}
.fusion-body .flo-hero-home__play .flo-hero-home__play-icon--pause { display: flex; }
.fusion-body .flo-hero-home__play.is-paused .flo-hero-home__play-icon--pause { display: none; }
.fusion-body .flo-hero-home__play.is-paused .flo-hero-home__play-icon--play { display: flex; }

/* Promo strip — cream pill on plum bg, with folder-cut "Read the Report" CTA */
.fusion-body .flo-hero-home__promo {
  position: relative;
  z-index: 1;
  background: var(--flo-color-bg-subtle);
  border-radius: var(--flo-radius-pill);
  padding: 24px 32px;
  display: flex; align-items: center; justify-content: center;
  gap: 24px;
  margin-top: 16px;
}
.fusion-body .flo-hero-home__promo-text {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: var(--flo-leading-display);
  color: var(--flo-color-plum);
  margin: 0;
}
.fusion-body .flo-hero-home__promo-cta {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--flo-color-bg-subtle);
  border: 1px solid var(--flo-color-plum);
  border-radius: var(--flo-radius-pill);
  padding: 10px 20px;
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-body-md);
  color: var(--flo-color-plum);
  text-decoration: none;
}
.fusion-body .flo-hero-home__promo-cta:hover {
  background: var(--flo-color-plum);
  color: var(--flo-color-bg-subtle);
}
.fusion-body .flo-hero-home__promo-cta::after {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
          mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
}

/* Logo strip — full-bleed (escapes the .flo-content max-width), coral
   heading, coral-tinted logos in a single row. */
.fusion-body .flo-hero-home__logos {
  position: relative;
  z-index: 1;
  margin-top: 48px;
  background: transparent;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.fusion-body .flo-hero-home__logos .flo-logo-grid-block {
  background: transparent;
  padding: 0;
}
.fusion-body .flo-hero-home__logos .flo-logo-grid-block__inner {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.fusion-body .flo-hero-home__logos .flo-logo-grid__heading {
  color: var(--flo-color-coral);
  font-family: var(--flo-font-display);
  font-weight: 400;
  margin-bottom: 24px;
}
.fusion-body .flo-hero-home__logos .flo-logo-grid--strip {
  flex-wrap: nowrap;
  gap: 64px;
  justify-content: space-around;
  padding: 0 80px;
  overflow: hidden;
}
@media (max-width: 800px) {
  .fusion-body .flo-hero-home__logos .flo-logo-grid--strip {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 48px;
    padding: 0 24px;
  }
}
/* Coral tint on logos in the hero strip — overrides the default plum tint
   on .flo-logo-grid__silhouette so logos show coral on the plum bg. */
.fusion-body .flo-hero-home__logos .flo-logo-grid__silhouette {
  background-color: var(--flo-color-coral);
}
.fusion-body .flo-hero-home__logos .flo-logo-grid--tinted .flo-logo-grid__item {
  opacity: 1;
  height: 80px;
  padding: 0;
}

/* Behind-nav variant — pull the section UP behind the fixed Avada nav.
   Active when the parent fusion-builder-container has .flo-behind-nav.
   Both .flo-behind-nav (the container) and .flo-hero-home apply a
   -nav-height margin, so content has to absorb 2× the nav height plus the
   Figma 64px gap above the title. */
.fusion-body .flo-behind-nav .flo-hero-home {
  margin-top: calc(var(--flo-nav-height) * -1);
}
.fusion-body .flo-behind-nav .flo-hero-home__inner {
  padding-top: calc(var(--flo-nav-height) * 2 + 74px);
}

@media (max-width: 1024px) {
  .fusion-body .flo-hero-home__head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* !important defeats Avada's responsive-typography calc (a !important rule on
     .fusion-responsive-typography-calculated at <=1000px) which otherwise shrinks
     this h1 below the 36px figma mobile size. Same pattern used elsewhere. */
  .fusion-body .flo-hero-home__title { font-size: 36px !important; }
  .fusion-body .flo-hero-home__bg-split {
    background: linear-gradient(180deg,
      var(--flo-color-bg-subtle) 0%,
      var(--flo-color-bg-subtle) 60%,
      var(--flo-color-bg-overlay) 60%,
      var(--flo-color-bg-overlay) 100%);
  }
}
@media (max-width: 800px) {
  .fusion-body .flo-hero-home { padding-bottom: 64px; }
  .fusion-body .flo-hero-home__inner { padding-top: 64px; }
  /* 16px side gutters per figma 2118-14333 (px-16). High specificity beats the
     base `.flo-hero-home .flo-content { padding: 0 }`; the logo strip still
     full-bleeds via its own negative margins. */
  .fusion-body .flo-hero-home .flo-content.flo-hero-home__inner { padding-left: 16px; padding-right: 16px; }
  .fusion-body .flo-behind-nav .flo-hero-home { margin-top: -96px; }
  /* Clear the floating collapsed nav bar (bottom edge ~84px) and leave the
     ~48px gap above the title that figma 2423-14333/6487 shows. */
  .fusion-body .flo-behind-nav .flo-hero-home__inner { padding-top: 274px; }
  /* Glow drops to the cream/purple split, sitting behind the product-image
     card and reading a touch larger, per figma 2423:6487. (Base rule pins it
     at top:22% which is correct for desktop but lands behind the title on
     mobile.) */
  .fusion-body .flo-hero-home__bg-split::before {
    top: 48%;
    width: 124%;
    background: radial-gradient(ellipse at center, rgba(255, 120, 89, 0.28) 0%, transparent 62%);
  }
  .fusion-body .flo-hero-home__play { width: 48px; height: 48px; bottom: 16px; right: 16px; }
  .fusion-body .flo-hero-home__play-icon svg { width: 20px; height: 20px; }
  /* Promo card per figma 2118-15567: stacked + centered, 24/40 padding,
     32px corners (radius/xl), 12px gap. */
  .fusion-body .flo-hero-home__promo {
    flex-direction: column; align-items: center;
    padding: 24px 40px; border-radius: 32px; gap: 12px;
  }
  .fusion-body .flo-hero-home__promo-text { font-size: 20px; text-align: center; }
  .fusion-body .flo-hero-home__promo-cta { border-width: 2px; padding: 12px 24px; }
}

/* ------------------------------------------------------------
   flo-solution-trio — Tier 3, section 2
   2-col head (title + lede) above 3 white cards (image + coral
   title + dark body copy). Per Figma 2104:12415.
   ------------------------------------------------------------ */
.fusion-body .flo-solution-trio {
  padding: 96px 0 32px;
}
.fusion-body .flo-solution-trio__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.fusion-body .flo-solution-trio__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  color: var(--flo-color-text-inverse);
}
.fusion-body .flo-solution-trio__title {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h2); /* 36px */
  line-height: var(--flo-leading-display);
  color: var(--flo-color-text-inverse);
  margin: 0;
}
.fusion-body .flo-solution-trio__lede {
  font-family: var(--flo-font-body);
  font-weight: 400;
  font-size: var(--flo-size-body-lg); /* 18px */
  line-height: var(--flo-leading-body);
  color: var(--flo-color-text-inverse);
  margin: 0;
}
.fusion-body .flo-solution-trio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.fusion-body .flo-solution-trio-card {
  display: flex;
  flex-direction: column;
  background: var(--flo-color-bg); /* white */
  border-radius: var(--flo-radius-lg);
  overflow: hidden;
}
.fusion-body .flo-solution-trio-card__media {
  /* Top corners only — bottom is the seam against the body's flat top. */
  border-top-left-radius: var(--flo-radius-md); /* 12px per figma */
  border-top-right-radius: var(--flo-radius-md);
  overflow: hidden;
  aspect-ratio: 348 / 231; /* figma card image proportions */
  background: rgba(33, 18, 54, 0.06);
}
.fusion-body .flo-solution-trio-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.fusion-body .flo-solution-trio-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
}
.fusion-body .flo-solution-trio-card__title {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h2); /* 36px per figma — coral-bold display */
  line-height: var(--flo-leading-display);
  color: #ff5832; /* figma colors/accessible/coral-bold */
  margin: 0;
}
.fusion-body .flo-solution-trio-card__copy {
  font-family: var(--flo-font-body);
  font-weight: 400;
  font-size: var(--flo-size-body-md);
  line-height: var(--flo-leading-body);
  color: var(--flo-color-text); /* dark plum on white card */
  margin: 0;
}
@media (max-width: 800px) {
  /* gaps per figma 2118-15697: 48px title->lede, 40px between cards (eased to a
     consistent 40 rhythm). titles are h-tags, so !important holds them at the
     figma 30px against Avada's responsive-typography shrink. */
  .fusion-body .flo-solution-trio__head { grid-template-columns: 1fr; gap: 40px; }
  .fusion-body .flo-solution-trio__grid { grid-template-columns: 1fr; gap: 40px; }
  .fusion-body .flo-solution-trio__title { font-size: 30px !important; }
  .fusion-body .flo-solution-trio-card__body { padding: 24px; }
  .fusion-body .flo-solution-trio-card__title { font-size: 30px !important; }
}

/* ------------------------------------------------------------
   flo-compliance-tagline — Tier 1, section 3
   Single centered display-font line. <em> renders coral.
   Per Figma sub-element of 2104:12415.
   ------------------------------------------------------------ */
.fusion-body .flo-compliance-tagline {
  padding: 24px 0 56px;
  text-align: center;
}
.fusion-body .flo-compliance-tagline--left { text-align: left; }
.fusion-body .flo-compliance-tagline__text {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: var(--flo-leading-display);
  color: var(--flo-color-text-inverse);
  margin: 0;
}
.fusion-body .flo-compliance-tagline__text em {
  color: var(--flo-color-coral);
  font-style: normal;
}
@media (max-width: 800px) {
  /* figma 2118-15727 keeps this at 32px / 42px line-height / 0.5px tracking on
     mobile (2 lines) — the earlier 24px was an over-shrink. */
  .fusion-body .flo-compliance-tagline__text {
    font-size: 32px;
    line-height: 1.3125;
    letter-spacing: 0.5px;
  }
}

/* ------------------------------------------------------------
   flo-what-we-offer — Tier 3, section 4
   Numbered step nav (left) + vertical pager (mid) + two stacked
   folder-tab cards (right) + audience pill row (below).
   Per Figma 2114:10433. Behavior in components.js (initPager).
   ------------------------------------------------------------ */
.fusion-body .flo-what-we-offer {
  padding: 64px 0;
}
.fusion-body .flo-what-we-offer__inner {
  display: grid;
  grid-template-columns: minmax(0, 400px) 1fr;
  grid-template-areas:
    "nav cards"
    "pills pills";
  column-gap: 80px;
  row-gap: 48px;
  align-items: center; /* vertically center the nav-col against the stacked cards */
}
.fusion-body .flo-what-we-offer__nav-col {
  grid-area: nav;
  display: flex; flex-direction: column; gap: 40px;
  max-width: 400px;
}
.fusion-body .flo-what-we-offer__title {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h1); /* 48px per figma */
  line-height: var(--flo-leading-display);
  color: var(--flo-color-link); /* lavender per Figma "What we do/offer" */
  margin: 0;
}
/* Steps list + pager sit side-by-side inside the nav-col, with the pager
   on the RIGHT of the steps. Per Figma 2114:10436. */
.fusion-body .flo-what-we-offer__nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.fusion-body .flo-what-we-offer__steps-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 24px;
  flex: 1 1 auto;
  min-width: 0;
}
.fusion-body .flo-what-we-offer__step-btn {
  background: none; border: none;
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h3); /* 30px per figma */
  line-height: 1.2;
  color: var(--flo-color-text-inverse);
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.fusion-body .flo-what-we-offer__step-num { opacity: 0.7; }
.fusion-body .flo-what-we-offer__step-item--active .flo-what-we-offer__step-btn {
  color: var(--flo-color-link);
}
/* Per-component placement for the shared .flo-pager partial.
   Visual styling lives in the .flo-pager block (search for "flo-pager —"). */
.fusion-body .flo-what-we-offer .flo-pager--vertical {
  flex: 0 0 auto;
}
.fusion-body .flo-what-we-offer__cards {
  grid-area: cards;
  display: flex; flex-direction: column; gap: 40px;
}
/* Card structure mirrors .flo-product-spotlight EXACTLY: .flo-tab-card
   primitive with --right modifier (tab on TOP-RIGHT). The tab is a same-
   color extrusion of the body (visually invisible against the body — the
   silhouette IS the visible thing); the audience label sits in the empty
   top-LEFT space NEXT TO the tab on the section's plum bg. Sites = cream
   body, Sponsors = white body. Per Figma 2284:11620 / 2284:11607. */
.fusion-body .flo-what-we-offer__card.flo-tab-card {
  --tab-w: 320px;
  --tab-h: 64px;
  --radius: var(--flo-radius-lg);
  --bg: #fffaf0; /* figma colors/yellow/canvas-white (sites variant) */
  margin: 0;
  color: var(--flo-color-text);
  align-self: flex-start;
  max-width: 540px;
}
.fusion-body .flo-what-we-offer__card--sponsors.flo-tab-card {
  --bg: var(--flo-color-bg); /* white */
  align-self: flex-end; /* per figma 2284:11734 `items-end` */
}
/* Empty same-color tab on the RIGHT — body fill extends below + around
   it via the elbow pseudo. Tab itself has no content. */
.fusion-body .flo-what-we-offer__card .flo-tab-card__tab {
  background: var(--bg);
}
/* Audience label in the empty top-LEFT space, NEXT TO the tab shape,
   sitting on the section's plum bg in lavender text. */
/* Body content layout — all step variants stack in a single grid cell so the
   card body sizes to the tallest step. Switching steps cross-fades via opacity
   without changing height — keeps the nav-col stable per QA. */
.fusion-body .flo-what-we-offer__card-body {
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr;
}
.fusion-body .flo-what-we-offer__card-step {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.fusion-body .flo-what-we-offer[data-active="1"] .flo-what-we-offer__card-step[data-step="1"],
.fusion-body .flo-what-we-offer[data-active="2"] .flo-what-we-offer__card-step[data-step="2"],
.fusion-body .flo-what-we-offer[data-active="3"] .flo-what-we-offer__card-step[data-step="3"],
.fusion-body .flo-what-we-offer[data-active="4"] .flo-what-we-offer__card-step[data-step="4"],
.fusion-body .flo-what-we-offer[data-active="5"] .flo-what-we-offer__card-step[data-step="5"] {
  opacity: 1;
  pointer-events: auto;
}
.fusion-body .flo-what-we-offer__card-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.fusion-body .flo-what-we-offer__card-title {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h3); /* 30px per figma */
  line-height: var(--flo-leading-display);
  color: var(--flo-color-plum); /* link-dark #4a236d */
  margin: 0;
}
.fusion-body .flo-what-we-offer__card-num { color: var(--flo-color-plum); opacity: 1; }
.fusion-body .flo-what-we-offer__card-body-text {
  font-family: var(--flo-font-body);
  font-size: var(--flo-size-body-md);
  line-height: var(--flo-leading-body);
  color: var(--flo-color-text); /* default plum #211236 */
  margin: 0;
}
.fusion-body .flo-what-we-offer__card-cta {
  font-family: var(--flo-font-body);
  font-weight: 400;
  font-size: var(--flo-size-body-md);
  color: var(--flo-color-text);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
}
.fusion-body .flo-what-we-offer__card-cta::after {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
          mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
}
.fusion-body .flo-what-we-offer__card-icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background-color: var(--flo-color-coral);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  /* mask-image is inlined per-instance via style attribute (asset SVG URL). */
}
.fusion-body .flo-what-we-offer__pills {
  grid-area: pills;
  display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
  align-items: center;
  margin-top: 32px;
  padding: 0 40px;
}
/* Pills override the global flo-cta sizing to match Figma 2114:10761
   (12px/24px padding, 16px medium font, 16px arrow icon, 8px gap). */
.fusion-body .flo-what-we-offer__pills .flo-cta {
  padding: 12px 24px;
  gap: 8px;
  font-size: var(--flo-size-body-md);
  line-height: 1;
}
.fusion-body .flo-what-we-offer__pills .flo-cta::after {
  width: 16px;
  height: 16px;
}
/* Sites pill — figma data-violet (#b582ff) bg, plum text. */
.fusion-body .flo-what-we-offer__pills .flo-cta--purple,
.fusion-body .flo-what-we-offer__pills .flo-cta--purple:visited {
  background: var(--flo-color-link);
  border-color: var(--flo-color-link);
  color: var(--flo-color-text);
}
.fusion-body .flo-what-we-offer__pills .flo-cta--purple:hover {
  background: #c79bff; /* slightly lighter data-violet */
  border-color: #c79bff;
  color: var(--flo-color-text);
}
/* Sponsors pill — momentum-coral bg, plum text (not white) per figma. */
.fusion-body .flo-what-we-offer__pills .flo-cta--coral,
.fusion-body .flo-what-we-offer__pills .flo-cta--coral:visited {
  color: var(--flo-color-text);
}
.fusion-body .flo-what-we-offer__pills .flo-cta--coral:hover {
  color: var(--flo-color-text);
}
/* Mobile (<1024) swaps the desktop nav + vertical pager + cross-fade cards for
   an in-place accordion (markup in what-we-offer.php, wired in components.js).
   Hidden on desktop. */
.fusion-body .flo-what-we-offer__accordion { display: none; }
@media (max-width: 1024px) {
  .fusion-body .flo-what-we-offer__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .fusion-body .flo-what-we-offer__nav-col,
  .fusion-body .flo-what-we-offer__cards { display: none; }

  .fusion-body .flo-what-we-offer__accordion {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .fusion-body .flo-what-we-offer__acc-title { font-size: 36px !important; } /* defeat Avada heading shrink */
  .fusion-body .flo-what-we-offer__acc-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    border-bottom: 1px solid rgba(245, 237, 255, 0.15);
  }
  .fusion-body .flo-what-we-offer__acc-item {
    border-top: 1px solid rgba(245, 237, 255, 0.15);
  }
  .fusion-body .flo-what-we-offer__acc-header {
    width: 100%;
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 16px;
    padding: 16px 0; /* figma header row ~61px tall */
    font-family: var(--flo-font-display);
    font-weight: 400;
    font-size: var(--flo-size-h3); /* 30px per figma */
    line-height: 1.2;
    color: var(--flo-color-text-inverse);
    text-align: left;
  }
  .fusion-body .flo-what-we-offer__acc-header .flo-what-we-offer__step-label { flex: 1 1 auto; }
  .fusion-body .flo-what-we-offer__acc-item--active .flo-what-we-offer__acc-header { color: var(--flo-color-link); }
  .fusion-body .flo-what-we-offer__acc-chevron {
    flex-shrink: 0;
    width: 24px; height: 24px;
    background-color: currentColor;
    /* Branded curved chevron per figma 2423:6584 (icon/arrows, 21×12.8, down).
       svg points DOWN: collapsed = no rotation, active flips it up. */
    -webkit-mask: url(/wp-content/themes/fh-avada-child/assets/icons/chevron-curved.svg) no-repeat center / 21px;
            mask: url(/wp-content/themes/fh-avada-child/assets/icons/chevron-curved.svg) no-repeat center / 21px;
    transform: rotate(0deg);
    transition: transform 200ms ease;
  }
  .fusion-body .flo-what-we-offer__acc-item--active .flo-what-we-offer__acc-chevron { transform: rotate(180deg); }
  .fusion-body .flo-what-we-offer__acc-panel {
    height: 0;
    overflow: hidden;
    transition: height 240ms ease;
  }
  .fusion-body .flo-what-we-offer__acc-cards {
    display: flex; flex-direction: column; gap: 24px;
    padding-bottom: 24px;
  }
  /* Accordion cards: full-width and always shown (the panel height gates
     visibility, not the desktop data-active cross-fade). */
  .fusion-body .flo-what-we-offer__accordion .flo-what-we-offer__card.flo-tab-card {
    align-self: stretch;
    max-width: none;
    --tab-w: 70%;
  }
  .fusion-body .flo-what-we-offer__accordion .flo-what-we-offer__card-step {
    position: static;
    opacity: 1;
    pointer-events: auto;
  }
  /* figma 2284-12346 card: 16/40/40 padding (sides eased to 24 for the narrower
     mobile card), h3 30px plum title, 48px icon. */
  .fusion-body .flo-what-we-offer__accordion .flo-what-we-offer__card-body { padding: 16px 24px 40px; }
  .fusion-body .flo-what-we-offer__accordion .flo-what-we-offer__card-title { font-size: 30px !important; }
  .fusion-body .flo-what-we-offer__accordion .flo-what-we-offer__card-icon { width: 48px; height: 48px; }
  /* Audience pills stack vertically + center on mobile per figma 2118-15780. */
  .fusion-body .flo-what-we-offer__pills { flex-direction: column; align-items: center; margin-top: 40px; }
}

/* ------------------------------------------------------------
   flo-products-grid — Tier 3, section 6
   Tabbed audience filter + 6-card folder-tab grid.
   Per Figma 2114:10801. Behavior in components.js (initFilter).
   ------------------------------------------------------------ */
.fusion-body .flo-products-grid {
  padding: 64px 0;
}
.fusion-body .flo-products-grid__inner {
  display: flex; flex-direction: column; gap: 40px;
}
/* Heading + body sit side-by-side (heading left, body right) per Figma. */
.fusion-body .flo-products-grid__head {
  display: flex; gap: 80px; align-items: start;
}
.fusion-body .flo-products-grid__title {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h2);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-link); /* lavender #b582ff */
  margin: 0;
  flex: 0 0 516px;
  max-width: 516px;
}
.fusion-body .flo-products-grid__title em { color: var(--flo-color-coral); font-style: normal; }
.fusion-body .flo-products-grid__body {
  font-family: var(--flo-font-body);
  font-size: var(--flo-size-body-lg);
  line-height: var(--flo-leading-body);
  color: var(--flo-color-text-inverse);
  margin: 0;
  flex: 1 1 auto;
}
@media (max-width: 1024px) {
  .fusion-body .flo-products-grid__head { flex-direction: column; gap: 24px; }
  .fusion-body .flo-products-grid__title { flex: 0 0 auto; max-width: none; }
}
/* Segmented-pill tab nav: centered, tabs flush together with shared borders.
   First/last get rounded outer corners; middle has straight edges. */
.fusion-body .flo-products-grid__tabs {
  display: flex; gap: 0; justify-content: center; flex-wrap: wrap;
}
.fusion-body .flo-products-grid__tab {
  background: transparent;
  border: 2px solid var(--flo-color-text-inverse);
  border-radius: 0;
  color: var(--flo-color-text-inverse);
  font-family: var(--flo-font-display);
  font-size: var(--flo-size-body-md);
  font-weight: 500;
  padding: 12px 24px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.fusion-body .flo-products-grid__tab:first-child {
  border-top-left-radius: var(--flo-radius-pill);
  border-bottom-left-radius: var(--flo-radius-pill);
  border-right: none;
}
.fusion-body .flo-products-grid__tab:last-child {
  border-top-right-radius: var(--flo-radius-pill);
  border-bottom-right-radius: var(--flo-radius-pill);
  border-left: none;
}
.fusion-body .flo-products-grid__tab--active {
  background: var(--flo-color-plum);
  color: var(--flo-color-text-inverse);
}
.fusion-body .flo-products-grid__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Card uses the .flo-tab-card primitive with cream body + a wider top-LEFT
   tab in the same cream. The audience label sits flush to the top-right of
   the card with no background — white text on the page bg. */
.fusion-body .flo-products-grid-card.flo-tab-card {
  --bg: var(--flo-color-bg-subtle); /* cream #fffaf0 */
  --tab-w: 60%;
  --tab-h: 40px;
  --radius: var(--flo-radius-md, 16px);
  filter: drop-shadow(0 24px 12px rgba(33, 18, 54, 0.25));
}
.fusion-body .flo-products-grid-card.flo-tab-card[data-audience="sites"],
.fusion-body .flo-products-grid-card.flo-tab-card[data-audience="all"] {
  --tab-w: 82%;
}
/* Per-audience card fill (figma 2423:6658 site = canvas-white cream,
   2423:6634 sponsor = white). Semantic identity, so applied at all
   breakpoints rather than mobile-only. */
.fusion-body .flo-products-grid-card.flo-tab-card[data-audience="sponsors-cros"] {
  --bg: #fff;
}
.fusion-body .flo-products-grid-card__label {
  position: absolute;
  top: 0;
  right: 16px;
  height: var(--tab-h);
  display: inline-flex; align-items: center;
  color: #fff;
  font-family: var(--flo-font-display);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 2;
}
.fusion-body .flo-products-grid-card__body {
  padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
  flex: 1 1 auto;
  color: var(--flo-color-text);
}
/* One multi-colour SVG per card type, rendered as an <img> (no mask flatten). */
.fusion-body .flo-products-grid-card__icon {
  width: 64px; height: 64px;
  object-fit: contain;
  display: block;
}
.fusion-body .flo-products-grid-card__title {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h3);
  line-height: var(--flo-leading-display);
  color: var(--flo-color-plum);
  margin: 0;
}
.fusion-body .flo-products-grid-card__copy {
  font-family: var(--flo-font-body);
  font-size: var(--flo-size-body-md);
  line-height: var(--flo-leading-body);
  color: var(--flo-color-text);
  margin: 0;
}
.fusion-body .flo-products-grid-card__cta { margin-top: auto; align-self: flex-start; }

/* Filter behavior — when a non-"all" tab is active, hide other-audience cards */
.fusion-body .flo-products-grid[data-audience-filter="sites"] .flo-products-grid-card[data-audience]:not([data-audience="sites"]),
.fusion-body .flo-products-grid[data-audience-filter="sponsors-cros"] .flo-products-grid-card[data-audience]:not([data-audience="sponsors-cros"]) {
  display: none;
}
@media (max-width: 1024px) {
  .fusion-body .flo-products-grid__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .fusion-body .flo-products-grid__cards { grid-template-columns: 1fr; }
  /* figma 2118-15806: 40px text gap, 30px lavender headline (h-tag → !important),
     and the segmented filter stays on ONE row (last segment flexes to fill). */
  .fusion-body .flo-products-grid__head { gap: 40px; }
  .fusion-body .flo-products-grid__title { font-size: 30px !important; }
  /* Filter segments per figma 2423:6629: 14px semibold, 12/24 padding. Last
     segment flexes to fill; nowrap keeps it on one row. */
  .fusion-body .flo-products-grid__tabs { flex-wrap: nowrap; }
  .fusion-body .flo-products-grid__tab { font-size: 14px; font-weight: 600; padding: 12px 24px; white-space: nowrap; }
  .fusion-body .flo-products-grid__tab:last-child { flex: 1 1 auto; }
  /* card per figma 2423:6658/6634: h3 30px title, 48px icon, 18px audience
     label, and 40px side padding (pb 40). */
  .fusion-body .flo-products-grid-card__title { font-size: 30px !important; }
  .fusion-body .flo-products-grid-card__icon { width: 48px; height: 48px; }
  .fusion-body .flo-products-grid-card__label { font-size: 18px; }
  /* The 18px sponsor label is wider, so narrow its folder tab to ~48% (figma
     2423:6634 places the label at left≈173/358) so white-on-cream clipping of
     the label's first chars can't happen. */
  .fusion-body .flo-products-grid-card.flo-tab-card[data-audience="sponsors-cros"] { --tab-w: 48%; }
  .fusion-body .flo-products-grid-card__body { padding: 24px 40px 40px; }
}

/* ------------------------------------------------------------
   flo-cta-band — Tier 1-2, section 7
   Centered heading + single button on the home wrapper bg.
   Per Figma 2114:10741.
   ------------------------------------------------------------ */
.fusion-body .flo-cta-band {
  padding: 48px 0;
  text-align: center;
}
.fusion-body .flo-cta-band--left { text-align: left; }
.fusion-body .flo-cta-band__inner {
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.fusion-body .flo-cta-band--left .flo-cta-band__inner { align-items: flex-start; }
.fusion-body .flo-cta-band__heading {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h3);
  line-height: var(--flo-leading-display);
  color: #fff;
  margin: 0;
  max-width: 800px;
}
@media (max-width: 800px) {
  /* figma 2118-15895: 40px heading->button gap, 30px heading (h-tag, so
     !important holds it against Avada's responsive-typography shrink). */
  .fusion-body .flo-cta-band__inner { gap: 40px; }
  .fusion-body .flo-cta-band__heading { font-size: 30px !important; }
}

/* ------------------------------------------------------------
   flo-testimonials — Tier 3, section 8
   Light coral-blush bg. Heading + ratings + carousel slides
   (logo + pull-quote + quote/attribution) + per-slide read CTA
   + pagination + view-more link. Per Figma 2104:12591.
   Behavior in components.js (initCarousel).
   ------------------------------------------------------------ */
.fusion-body .flo-testimonials {
  background: #ffebe8; /* figma colors/coral/flow-blush */
  /* Top + bottom padding clear the SVG-clipped tab silhouettes (~7% of section h);
     content sits inside the body region between the two tabs. ~56px is
     consumed by each tab, so 160px leaves ~104px of true breathing room. */
  padding: 160px 0 160px;
  -webkit-clip-path: url(#flo-testimonials-mask);
          clip-path: url(#flo-testimonials-mask);
}
/* Pull the testimonials container up by the tab height so the silhouette's
   top-left tab overlaps the previous section (home-wrapper). Mirror with a
   negative margin-bottom so the bottom-right tab overlaps the next section
   (map-compliance). Tab is 0.069 × section-h: at the current padding the
   section renders ~944px, so the tab is ~65px and we use -72px for a small
   buffer against content variation. The wrapper takes position+z-index so
   the whole testimonials block paints above its next sibling container. */
.fusion-body .qa-id-testimonials {
  position: relative;
  z-index: 12;
  margin-top: -72px;
  margin-bottom: -72px;
}
.fusion-body .flo-testimonials__inner {
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.fusion-body .flo-testimonials__heading {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h2);
  color: var(--flo-color-text);
  margin: 0;
  text-align: center;
}
.fusion-body .flo-testimonials__ratings {
  display: flex; align-items: center; justify-content: center;
}
.fusion-body .flo-testimonials__ratings-img {
  display: block;
  height: 32px;
  width: auto;
  max-width: 100%;
}
.fusion-body .flo-testimonials__divider {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(74, 35, 109, 0.15);
  margin: 0;
}
.fusion-body .flo-testimonials__viewport {
  width: 100%;
  position: relative;
}
/* Each slide stacks logo, body, read-cta with the same gap used between
   slide / pager / view-more so the four vertical rhythm beats match. */
.fusion-body .flo-testimonials__slide {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.fusion-body .flo-testimonials__slide--active { display: flex; }
.fusion-body .flo-testimonials__logo img {
  max-height: 48px; width: auto; display: block;
}
.fusion-body .flo-testimonials__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  width: 100%;
  max-width: 920px;
  align-items: start;
}
.fusion-body .flo-testimonials__pullquote {
  font-family: var(--flo-font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: var(--flo-leading-body);
  color: var(--flo-color-link); /* lavender #b582ff */
  margin: 0;
}
/* Right column — quote + attribution. No bg, no border, no padding (Avada's
   default <blockquote> styles are reset here). Plum text per Figma. */
.fusion-body .flo-testimonials__quote-block {
  display: flex; flex-direction: column; gap: 16px;
}
.fusion-body .flo-testimonials__quote {
  font-family: var(--flo-font-display);
  font-weight: 600;
  font-size: 20px; /* H5 */
  line-height: var(--flo-leading-body);
  color: var(--flo-color-plum);
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}
.fusion-body .flo-testimonials__attribution {
  font-family: var(--flo-font-body);
  font-size: var(--flo-size-body-md);
  line-height: var(--flo-leading-body);
  color: var(--flo-color-plum);
  margin: 0;
}
.fusion-body .flo-testimonials__attr-name { font-weight: 600; }
.fusion-body .flo-testimonials__pager {
  display: flex; align-items: center; gap: 16px;
}
.fusion-body .flo-testimonials__nav {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--flo-color-plum);
  padding: 4px 8px;
}
.fusion-body .flo-testimonials__dots {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 12px;
}
.fusion-body .flo-testimonials__dot {
  background: var(--flo-color-plum);
  border: none; cursor: pointer;
  width: 10px; height: 10px; border-radius: 50%; padding: 0;
  opacity: 0.4;
}
.fusion-body .flo-testimonials__dot--active { opacity: 1; background: var(--flo-color-link); }
.fusion-body .flo-testimonials__view-more {
  font-family: var(--flo-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--flo-color-plum);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.fusion-body .flo-testimonials__view-more::after {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
          mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
}
@media (max-width: 800px) {
  /* figma 2423:6685/6533/6714: mobile keeps the SAME folder-tab silhouette +
     neighbour overlap as desktop — just smaller. The mask is objectBoundingBox
     so it scales to mobile width automatically; the plum home-wrapper gradient
     shows through the stepped-down notch (the "gradient" in the ticket).
     Padding clears the scaled tab (~6.9% of section height). */
  .fusion-body .flo-testimonials {
    padding: 80px 0;
    -webkit-clip-path: url(#flo-testimonials-mask--mobile);
            clip-path: url(#flo-testimonials-mask--mobile);
  }
  /* Plum backing on the wrapper: the clipped folder notches always reveal this
     plum (matches both neighbours, #211236) instead of the white page bg, so no
     white sliver can appear if the tab height and overlap drift apart. */
  .fusion-body .qa-id-testimonials { background: #211236; margin-top: -52px; margin-bottom: -52px; }
  .fusion-body .flo-testimonials__heading { font-size: 36px !important; }
  .fusion-body .flo-testimonials__body { grid-template-columns: 1fr; gap: 24px; }
  .fusion-body .flo-testimonials__pullquote { font-size: 24px; }    /* figma stat 24px */
  .fusion-body .flo-testimonials__quote { font-size: 18px; }        /* figma quote h5 18px */
}

/* ------------------------------------------------------------
   flo-map-compliance — Tier 3, section 9
   World map background + 3 stat cards floating on top + compliance
   text + tinted compliance grid + folder-CTA. Per Figma 2118:12925.
   ------------------------------------------------------------ */
.fusion-body .flo-map-compliance {
  background:
    radial-gradient(ellipse at 0% 50%, rgba(255,120,89,0.20), transparent 50%),
    radial-gradient(ellipse at 100% 50%, rgba(255,120,89,0.18), transparent 55%),
    var(--flo-color-bg-overlay);
  color: var(--flo-color-text-inverse);
  padding: 96px 0 0;
  overflow: hidden;
}
.fusion-body .flo-map-compliance__inner {
  display: flex; flex-direction: column; gap: 64px;
}
.fusion-body .flo-map-compliance__map-wrap {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 480px;
}
.fusion-body .flo-map-compliance__map {
  width: 100%; max-width: 1120px;
  opacity: 0.6;
}
.fusion-body .flo-map-compliance__map-img {
  width: 100%; height: auto;
  /* worldmap-bare.svg already strokes lavender on transparent — no recoloring */
}
.fusion-body .flo-map-compliance__stats {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: min(900px, calc(100% - 48px));
}
/* Stat callout per Figma 2866:9965 — no card background/tab; plain white
   text sitting directly on the map. Neutralize the tab-card primitive
   (transparent fill, hide the tab + concave elbow) and drop the padding. */
.fusion-body .flo-map-compliance__stat.flo-tab-card {
  --bg: transparent;
  background: none;
  opacity: 1;
}
.fusion-body .flo-map-compliance__stat .flo-tab-card__tab {
  display: none;
}
.fusion-body .flo-map-compliance__stat .flo-tab-card__body::before {
  display: none;
}
.fusion-body .flo-map-compliance__stat-body {
  display: flex; flex-direction: column;
  padding: 0;
  color: #ffffff;
  font-family: var(--flo-font-display);
  font-weight: 600;
  line-height: var(--flo-leading-display);
}
.fusion-body .flo-map-compliance__stat-value {
  font-size: 72px; /* display-xl */
  color: #ffffff;
}
.fusion-body .flo-map-compliance__stat-label {
  font-size: var(--flo-size-h3); /* 30px */
  color: #ffffff;
}
/* Compliance panel — two columns at ≥800px (text | badges) per product page. */
.fusion-body .flo-map-compliance__compliance {
  background: var(--flo-color-plum);
  border-radius: var(--flo-radius-md);
  padding: 48px 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 800px) {
  .fusion-body .flo-map-compliance__compliance { grid-template-columns: 1fr 1fr; }
}
.fusion-body .flo-map-compliance__compliance-text {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h4);
  line-height: var(--flo-leading-display);
  color: #fff;
  margin: 0;
}
.fusion-body .flo-map-compliance__compliance-grid {
  aspect-ratio: 840 / 541;
  width: 100%;
  background-color: var(--flo-color-text-inverse);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.fusion-body .flo-map-compliance__cta {
  position: relative;
  margin-top: 48px;
  margin-bottom: 80px; /* don't sit flush with the section's bottom edge */
  height: 240px;
}
.fusion-body .flo-map-compliance__cta-bg {
  position: absolute; inset: 0;
  background: var(--flo-color-bg-subtle); /* cream #fffaf0 per figma */
  -webkit-clip-path: url(#flo-map-compliance-cta-mask);
          clip-path: url(#flo-map-compliance-cta-mask);
}
.fusion-body .flo-map-compliance__cta-inner {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  padding: 72px 32px 48px;
  text-align: center;
}
.fusion-body .flo-map-compliance__cta-heading {
  font-family: var(--flo-font-display);
  font-weight: 400;
  font-size: var(--flo-size-h3);
  color: var(--flo-color-plum);
  margin: 0;
  max-width: 720px;
}
.fusion-body .flo-map-compliance__cta-mark {
  position: absolute;
  bottom: 0;
  right: 35px;
  width: 35px;
  height: 80px;
  background: url(/wp-content/themes/fh-avada-child/assets/logos/florence-logo-mark.svg) no-repeat center / contain;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 800px) {
  .fusion-body .flo-map-compliance__cta-mark { display: none; }
}
@media (max-width: 800px) {
  /* Per figma 2423:6724: on mobile the stat cards stack in one column and the
     world map renders INLINE between the stats and the compliance grid — on
     desktop the map is an absolute backdrop behind the floating stats, which
     read as "missing" on phones. Flex-column + order puts the stats first,
     then the map, then (outside the wrap) the compliance section. */
  .fusion-body .flo-map-compliance__map-wrap {
    display: flex; flex-direction: column; gap: 40px; min-height: 0;
  }
  .fusion-body .flo-map-compliance__map {
    order: 2;
    position: static; inset: auto;
    display: block; width: 100%; max-width: none; height: auto;
    pointer-events: none;
  }
  .fusion-body .flo-map-compliance__stats {
    order: 1;
    position: static; transform: none;
    grid-template-columns: 1fr;
    width: 100%; gap: 40px;          /* figma 2807: 40px between stacked cards */
    justify-items: center;
  }
  /* figma 2807:4165: cards 278w (centred, ~40px side gutters), body padding
     40px sides + 40px bottom (was 32). */
  .fusion-body .flo-map-compliance__stat { width: 100%; max-width: 278px; }
  .fusion-body .flo-map-compliance__stat-body { padding: 0; align-items: center; text-align: center; }
  /* figma 2118-16472/14674: stat value 60px, label 24px, CTA-box heading 24px
     (h-tag → !important), compliance lead 20px. */
  .fusion-body .flo-map-compliance__stat-value { font-size: 60px; }
  .fusion-body .flo-map-compliance__stat-label { font-size: 24px; }
  .fusion-body .flo-map-compliance__compliance-text { font-size: 20px; }
  .fusion-body .flo-map-compliance__cta-heading { font-size: 24px !important; }
  /* figma 2423:6827: the prod-tour CTA goes FULL BLEED on mobile (escapes the
     content gutters) and grows to ~338px tall so the heading + button aren't
     squished into a short box. */
  .fusion-body .flo-map-compliance__cta {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: 338px;
  }
  /* Swap to the mobile folder mask (the desktop one distorts at this aspect). */
  .fusion-body .flo-map-compliance__cta-bg {
    -webkit-clip-path: url(#flo-map-compliance-cta-mask--mobile);
            clip-path: url(#flo-map-compliance-cta-mask--mobile);
  }
  .fusion-body .flo-map-compliance__cta-inner {
    height: 100%;
    justify-content: center;
    padding: 72px 24px;
  }
}

/* ------------------------------------------------------------
   Compliant icons — mobile (site-wide: home map-compliance +
   product global-reach). Per figma 2423:6804 the badges are a
   2-col × 3-row grid shown LARGE directly on the section bg — not
   the desktop wide (3×2) image crammed inside the lighter-plum
   panel box. Swap to compliance-grid-mobile.png (652×810, the 2×3
   arrangement) and drop the desktop panel box + heavy padding.
   Placed after both components' base rules so it wins on cascade;
   !important on mask-image beats the inline value from the shortcodes.
   ------------------------------------------------------------ */
@media (max-width: 800px) {
  /* Keep the plum panel box (figma 2423:6804) — just trim the desktop's heavy
     80px side padding to 16px so the 2×3 badges fill the box. */
  .fusion-body .flo-map-compliance__compliance,
  .fusion-body .flo-global-reach__compliance {
    padding: 48px 16px;
    gap: 40px;
  }
  .fusion-body .flo-map-compliance__compliance-grid,
  .fusion-body .flo-global-reach__compliance-grid {
    aspect-ratio: 652 / 810;
    -webkit-mask-image: url(/wp-content/themes/fh-avada-child/assets/images/compliance-grid-mobile.png) !important;
            mask-image: url(/wp-content/themes/fh-avada-child/assets/images/compliance-grid-mobile.png) !important;
  }
}

/* ------------------------------------------------------------
   flo-resource-grid bg=lavender + featured_first variants
   Per Figma 2118:12710 — same component on lavender bg with
   a featured first card that uses a folder-tab visual and
   eyebrow text.
   ------------------------------------------------------------ */
.fusion-body .flo-resource-grid-section--bg-lavender {
  background: var(--flo-color-text-inverse); /* #f5edff */
}
.fusion-body .flo-resource-grid--featured-first .flo-resource-card--featured {
  --bg: var(--flo-color-link); /* lavender purple per Figma INTRODUCING tab */
  --tab-w: 132px;
  --tab-h: 40px;
}
.fusion-body .flo-resource-card--featured {
  background: var(--flo-color-text-inverse);
  border-radius: var(--flo-radius-md);
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.fusion-body .flo-resource-card--featured .flo-tab-card__tab {
  font-family: var(--flo-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--flo-color-text-inverse);
  background: var(--flo-color-link);
  text-transform: uppercase;
}
.fusion-body .flo-resource-card--featured .flo-resource-card__thumb {
  background: linear-gradient(135deg, #d9c5ff 0%, #f5edff 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--flo-font-display);
  font-size: 24px;
  color: var(--flo-color-plum);
}

/* ------------------------------------------------------------
   Theme Builder footer — dark color scheme override per Figma 2423:4459.
   Footer markup lives in fusion_tb_section post 12227 (Avada Theme Builder
   "Footer Section" / slug 2-rows-footer-1028). We override visually rather
   than edit the layout content to keep the change small + reversible.
   ------------------------------------------------------------ */
.fusion-tb-footer .fusion-footer-widget-area,
.fusion-tb-footer .fullwidth-box {
  background-color: var(--flo-color-bg-overlay) !important;
}
.fusion-tb-footer,
.fusion-tb-footer p,
.fusion-tb-footer li,
.fusion-tb-footer a,
.fusion-tb-footer span {
  color: var(--flo-color-text-inverse);
}
.fusion-tb-footer .fusion-title,
.fusion-tb-footer .fusion-title-heading,
.fusion-tb-footer h1,
.fusion-tb-footer h2,
.fusion-tb-footer h3,
.fusion-tb-footer h4,
.fusion-tb-footer h5,
.fusion-tb-footer h6 {
  color: var(--flo-color-link) !important;
}

/* Swap the production Florence PNG for the local white SVG via content
   replacement — no post content edit needed. .wp-image-15965 is the
   stable class Avada gives to that specific image attachment. */
.fusion-tb-footer img.wp-image-15965 {
  content: url(/wp-content/themes/fh-avada-child/assets/logos/florence-logo-white.svg);
  width: 112px;
  height: auto;
}

/* "Get in Touch" buttons → strip the Avada button chrome, render as
   text-CTA with a thin SVG arrow (same pattern as ticket #4). */
.fusion-tb-footer .fusion-button {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: var(--flo-color-text-inverse) !important;
  font-family: var(--flo-font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none !important;
  text-transform: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
}
.fusion-tb-footer .fusion-button .fusion-button-text { color: inherit !important; }
/* Avada renders an inner FontAwesome arrow via <i class="awb-button__icon"> —
   hide it so only our SVG ::after arrow is visible (avoids the double arrow). */
.fusion-tb-footer .fusion-button .awb-button__icon { display: none !important; }
.fusion-tb-footer .fusion-button::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
          mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
}
.fusion-tb-footer .fusion-button:hover { color: var(--flo-color-link) !important; }

/* Separator above the bottom logo row — white per Figma 2423:4500. */
.fusion-tb-footer .fusion-separator-border {
  border-top-color: var(--flo-color-text-inverse) !important;
}

/* Social icons (LinkedIn, email) — white per Figma. */
.fusion-tb-footer .fusion-social-network-icon {
  color: var(--flo-color-text-inverse) !important;
}
.fusion-tb-footer .fusion-social-network-icon svg,
.fusion-tb-footer .fusion-social-network-icon svg path {
  fill: currentColor !important;
}

/* Bottom logo row — vertically align the Florence logo and the copyright text
   on the same row. The column shortcodes ship inline margin_top/margin_bottom
   values (60px top on the copyright column, 20px bottom on the logo column)
   that push the two onto different baselines; zero them out and re-center. */
.fusion-tb-footer .fusion-builder-row-14 .fusion-layout-column {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: center !important;
}

/* Footer bottom breathing room per Figma 2423:4459 (pb-80). */
.fusion-tb-footer .fusion-builder-row-14 {
  padding-bottom: 80px !important;
}

/* Nav dropdown arrow flips to up when its sub-menu is open. UberMenu adds
   .ubermenu-active to the menu item when its dropdown triggers; the existing
   `transition: all` on the chevron pseudo animates the flip. */
.fusion-body .ubermenu-item.ubermenu-active > .ubermenu-target .ubermenu-target-title::after {
  transform: rotate(180deg);
}

/* Nav "Request Demo" Avada button — strip the inline FontAwesome arrow icon
   (which moves on hover) and replace with the standard 16px button-arrow.svg
   mask. Also flatten font-weight from Avada's inline 700 → regular to match
   the rest of the nav typography per QA. */
.fusion-body .ubermenu .fusion-button .awb-button__icon { display: none !important; }
.fusion-body .ubermenu .fusion-button {
  font-weight: 400 !important;
  gap: 8px;
}
.fusion-body .ubermenu .fusion-button::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
          mask: url(/wp-content/themes/fh-avada-child/assets/icons/button-arrow.svg) no-repeat center / contain;
}

/* ------------------------------------------------------------
   Logo grid marquee — infinite horizontal scroll variant.
   Opt-in via [flo_logo_grid marquee="1"]; the PHP renders the items
   twice inside a .flo-logo-grid__track div. translateX(0 → -50%) on
   the track moves exactly one full set, so when the second set lands
   where the first started, the loop restarts seamlessly.
   ------------------------------------------------------------ */
.fusion-body .flo-logo-grid--marquee {
  display: block;          /* override the flex layout from --strip */
  overflow: hidden;
  position: relative;
  padding: 0;              /* the static --strip uses inner padding which would clip the loop edges */
  gap: 0;
}
.fusion-body .flo-logo-grid--marquee .flo-logo-grid__track {
  display: flex;
  align-items: center;
  gap: 64px;               /* match the static --strip spacing */
  width: max-content;      /* let the track grow to fit both duplicated sets */
  animation: flo-logos-marquee 40s linear infinite;
}
.fusion-body .flo-logo-grid--marquee:hover .flo-logo-grid__track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .fusion-body .flo-logo-grid--marquee .flo-logo-grid__track {
    animation: none;
  }
}
@keyframes flo-logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   Footer (Avada Theme Builder) — mobile layout per figma 2104-13123.
   Avada stacks every footer column 1-per-row on mobile. Target by STRUCTURE,
   not fusion-builder-column-N IDs: Avada numbers those sequentially across the
   whole page (content + footer), so the IDs differ between the homepage and the
   product page. The footer markup itself is identical, so structural selectors
   are stable everywhere. Two non-inner footer rows:
     - link-menu row  = the one with >=5 columns
     - logo/copyright = the other one (2 columns)
   Scoped to <=800 so desktop is untouched.
   ------------------------------------------------------------ */
@media (max-width: 800px) {
  /* Link-menu row → 2-col grid. */
  .fusion-body .fusion-tb-footer .fusion-builder-row:not(.fusion-builder-row-inner):has(> .fusion-layout-column:nth-child(5)) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px 24px !important;
  }
  .fusion-body .fusion-tb-footer .fusion-builder-row:not(.fusion-builder-row-inner):has(> .fusion-layout-column:nth-child(5)) > .fusion-layout-column {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
  /* Get in Touch (5th column) + Global Offices (the column that holds the
     address inner-row) span full width below the four 2-col menu items (which
     fill grid rows 1-2). Explicit rows pin the figma order — grid auto-flow
     otherwise placed Global Offices above Get in Touch. */
  .fusion-body .fusion-tb-footer .fusion-builder-row:not(.fusion-builder-row-inner):has(> .fusion-layout-column:nth-child(5)) > .fusion-layout-column:nth-of-type(5) {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
  .fusion-body .fusion-tb-footer .fusion-builder-row > .fusion-layout-column:has(.fusion-builder-row-inner) {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }
  /* Drop the trailing empty spacer columns (7th onward). */
  .fusion-body .fusion-tb-footer .fusion-builder-row:not(.fusion-builder-row-inner):has(> .fusion-layout-column:nth-child(5)) > .fusion-layout-column:nth-of-type(n+7) {
    display: none !important;
  }

  /* Logo (left) + copyright (right) on one row. */
  .fusion-body .fusion-tb-footer .fusion-builder-row:not(.fusion-builder-row-inner):not(:has(> .fusion-layout-column:nth-child(5))) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }
  .fusion-body .fusion-tb-footer .fusion-builder-row:not(.fusion-builder-row-inner):not(:has(> .fusion-layout-column:nth-child(5))) > .fusion-layout-column {
    width: auto !important;
    max-width: 65% !important;
    margin: 0 !important;
  }
  .fusion-body .fusion-tb-footer .fusion-builder-row:not(.fusion-builder-row-inner):not(:has(> .fusion-layout-column:nth-child(5))) > .fusion-layout-column:last-child {
    text-align: right !important;
  }
}

body #toTop {
  background-color: #4A236D;
}

body .to-top-container #toTop:active, body .to-top-container #toTop:focus {
  background-color: #4A236D;
}

@media only screen and (max-width: 800px) {
  body #toTop {
    bottom: 16px;
  }

  body .to-top-right #toTop {
    right: 16px;
  }
}

.fusion-footer .awb-menu,
.fusion-footer .fusion-social-links {
  border: 0 !important;
}