/* FAQs (21518) — Elementor adapter. Each group h2 is now :first-child of
   its own widget wrapper, so the original
   .velp-cf-faqgroup:first-child { margin-top: 0 } zeroes EVERY group;
   restore the 44px gap and re-zero only the true first group. The bottom
   margin drops to 0 because flex items don't margin-collapse (originally
   the h2's 4px collapsed into the list's 8px top margin → 8px gap). */
.velp-cf-faqs .velp-cf-faqgroup { margin-top: 44px; margin-bottom: 0; }
.velp-cf-faqs .elementor-widget:first-child .velp-cf-faqgroup { margin-top: 0; }

/* The CTA paragraph is descendant-styled (.velp-cf-faqcta p) — keydesign's
   text-editor p{inherit} rule outranks its font metrics; restore them plus
   the light-on-navy color on the wrapper. No margin restore: the p keeps
   its own 26px because .velp-cf-faqcta p outranks p:last-child by load
   order. */
.e-con.velp-cf-faqcta .elementor-widget-text-editor:has(p) {
	font-size: 15.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}

/* The design renders the hero-sub link as plain body text — no bold. Only the
   sub's line-height needs re-asserting: keydesign's wrapper rule (0-1-1) beats
   the copied class (0-1-0). */
.elementor-widget.velp-cf-faqhero-sub a { font-weight: 400; }
.e-con .elementor-widget.velp-cf-faqhero-sub { line-height: 1.6; }

/* keydesign sets line-height:var(--line-height-paragraph) on every
   text-editor wrapper; the PHP page inherited the body value — restore
   normal inheritance for widgets without classed/descendant paragraphs. */
.vel-main .elementor-widget-text-editor:not(:has(p)) { line-height: inherit; }

/* ---------- CTA full-bleed: margins, never transform ----------
   The container was widened out of its 868px parent with
   `width:1080px; margin-left:410px; transform:translateX(-540px)`. That breaks
   under the fadeInUp entrance animation: the keyframes animate `transform` and
   end on `transform:none`, so the -540px half of the offset disappears while
   the +410px margin stays — the block flies 540px right, then snaps back once
   Elementor re-applies its inline style. Reloading shows it mid-flight.

   Same failure documented in adapter-customers.css for the quote wall: never
   position with `transform` on an element carrying an Elementor animation.

   Negative symmetric margins reproduce the identical full-bleed geometry with
   no transform at all, so the animation has nothing to fight over.

   NOTE: the width/margin/transform above are set in Elementor (custom CSS on
   the container), not in this repo — they must be cleared there for these
   rules to take effect. */
.vel-main .e-con.velp-cf-faqcta {
	width: auto;
	max-width: none;
	/* (1080 - 868) / 2 = 106px of bleed on each side */
	margin-left: -106px;
	margin-right: -106px;
	transform: none;
}

/* Below ~1240px the bleed would push the card off-screen; collapse it back to
   the content column and let the parent's own padding hold it. */
@media (max-width: 1240px) {
	.vel-main .e-con.velp-cf-faqcta {
		margin-left: 0;
		margin-right: 0;
	}
}