/**
 * FNF Homepage Redesign — shared widget stylesheet.
 * Progressive: sections added per widget shipped.
 */

/* ─── Homepage redesign safety net: zero the gap between header and first section ─ */

/*
 * The `template-homepage.php` (parent theme) already skips the theme's
 * content-wrapper padding, but as a belt-and-braces, zero any residual
 * gap for the redesign draft AND the live homepage post-swap.
 * Scoped to the specific post IDs to avoid affecting other pages.
 */
body.page-id-8207 #primary,
body.page-id-8207 #main,
body.page-id-169 #primary,
body.page-id-169 #main {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

body.page-id-8207 .elementor-8207 > .e-con:first-child,
body.page-id-169 .elementor-169 > .e-con:first-child,
body.page-id-8207 .elementor > .elementor-element:first-child,
body.page-id-169 .elementor > .elementor-element:first-child {
	margin-top: 0 !important;
}

/* ─── Global site-width for the redesigned homepage: 1300px ─ */

/*
 * Set the maximum content width across the redesigned homepage to 1300px.
 * Scoped to the draft and future live homepage post IDs.
 */
body.page-id-8207 .elementor-section-boxed > .elementor-container,
body.page-id-169  .elementor-section-boxed > .elementor-container,
body.page-id-8207 .e-con.e-con-boxed,
body.page-id-169  .e-con.e-con-boxed {
	max-width: 1300px !important;
}

/* ─── Banner Slider (fnf-banner-builder): full-bleed on desktop ── */

/*
 * Mobile: banner is naturally responsive, full viewport width.
 * Desktop: full-bleed edge-to-edge (per user 2026-07-09 — "adjust width").
 * We used to cap at 1300px but user wants max visual impact + no cropping.
 * Swiper re-computes slide widths on window resize automatically.
 */
.fnf-banner-slider,
.fnf-banner-slider.swiper {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.fnf-banner-slider .fnf-hero-banner img {
	width: 100%;
	height: auto;
	display: block;
}

/* CRITICAL LAYOUT FIX — theme's .site-content-page + .col-fluid wrappers get
   height:0 from parent Teapoz CSS. Because Elementor content sits inside them
   as a relative-positioned child that overflows visibly, and the theme's
   .fnf-reviews-slider is a SIBLING of .site-content-page (rendered right
   after it in normal flow), the reviews slider ended up occupying the same
   vertical space (y=219 onwards) as the banner + all Elementor content.
   Result: user saw the reviews-slider__btn--prev/next arrows overlapping
   the banner arrows — the "arrows loading 2 times" complaint.
   Fix: force the wrappers to grow with their content so the reviews slider
   flows AFTER the content, not on top of it. */
body.page-id-8207 .site-content-page,
body.page-id-169  .site-content-page,
body.page-id-8207 .col-fluid,
body.page-id-169  .col-fluid {
	display: block !important;
	height: auto !important;
	min-height: 0;
}

/* Smooth-motion easing for Swiper slide transitions. Default is `linear`
   which feels abrupt; cubic-bezier(0.4, 0, 0.2, 1) is Material's standard
   emphasized-decelerate curve — the slide starts fast then eases into place. */
.fnf-banner-slider .swiper-wrapper {
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Compositor hints — smoother slide grab feel */
.fnf-banner-slider .swiper-slide {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform;
}

/* CRITICAL: DO NOT override `width` on .swiper-slide — Swiper sets it inline
   (`style="width: 1300px"`) and its internal transform math depends on that
   value. Overriding with `!important` from CSS breaks slide positioning and
   renders slides as invisible ghosts. Only touch:
   - display (block on wrappers/picture that default to inline)
   - height (via the desktop media query below)
   - object-fit on the img itself
*/

/* Force wrapper elements to display:block so height rules apply.
   <picture> is display:inline by default which collapses to line-height. */
.fnf-banner-slider .fnf-banner-link,
.fnf-banner-slider picture,
.fnf-banner-slider .fnf-hero-banner,
.fnf-banner-slider picture.fnf-hero-banner {
	display: block !important;
	width: 100%;  /* NOT !important — allow parent (.swiper-slide) to constrain */
}

/* Desktop banner — FULL image visible, no crop.
   Banner PNGs are 1600×900 (16:9). We match container aspect to image
   aspect so object-fit stays natural. Slide width is 1300px (Swiper owns
   this via inline style — DO NOT override), height becomes 1300*9/16=731px.
   That plus ~130px header stays under most laptop 900px viewports. */
@media (min-width: 1024px) {
	.fnf-banner-slider .swiper-slide,
	.fnf-banner-slider .fnf-banner-link,
	.fnf-banner-slider .fnf-hero-banner,
	.fnf-banner-slider picture.fnf-hero-banner {
		aspect-ratio: 16 / 9;
		height: auto !important;
		max-height: 78vh;   /* safety cap on super-tall images */
	}
	.fnf-banner-slider .swiper-slide img,
	.fnf-banner-slider .fnf-hero-banner img,
	.fnf-banner-slider picture img {
		width: 100% !important;
		height: 100% !important;
		max-height: 78vh;
		object-fit: contain !important;     /* NO CROP */
		object-position: center;
		display: block !important;
		max-width: none;
	}
}

/* Kill any horizontal padding an Elementor Shortcode widget wrapper may add */
.elementor-widget-shortcode:has(.fnf-banner-slider) > .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
}

/* Break the banner out of Elementor's boxed 1300px container cap.
   Full-bleed edge-to-edge on desktop. Uses the classic
   `margin-left: calc(50% - 50vw)` trick — extends the widget beyond its
   parent container's width to hit the actual viewport edges. */
@media (min-width: 1024px) {
	body.page-id-8207 .elementor-widget-shortcode:has(.fnf-banner-slider),
	body.page-id-169  .elementor-widget-shortcode:has(.fnf-banner-slider) {
		max-width: 100vw !important;
		width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
	/* Same treatment on the parent Elementor container of the banner section */
	body.page-id-8207 .elementor-element[data-id="70a1ddf"],
	body.page-id-169  .elementor-element[data-id="70a1ddf"] {
		max-width: 100vw !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	body.page-id-8207 .elementor-element[data-id="70a1ddf"] > .e-con-inner,
	body.page-id-169  .elementor-element[data-id="70a1ddf"] > .e-con-inner {
		max-width: 100vw !important;
	}
}

/* ─── Announcement Bar (Section 0) ────────────────────────── */

.fnf-ab-wrap {
	position: relative;
	overflow: hidden;
}

.fnf-ab {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	line-height: 1.4;
	font-size: 14px;
	text-align: center;
}

.fnf-ab__stage {
	position: relative;
	width: 100%;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fnf-ab__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	opacity: 0;
	will-change: opacity, transform;
}

.fnf-ab__link {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.fnf-ab__link:hover .fnf-ab__msg {
	text-decoration: underline;
}

.fnf-ab__msg {
	font-weight: 500;
	letter-spacing: 0.01em;
}

.fnf-ab__code {
	appearance: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	color: #1a1a1a;
	background: #c8943e;
	padding: 3px 10px;
	border-radius: 999px;
	line-height: 1.4;
	transition: transform 120ms ease, background 120ms ease;
}

.fnf-ab__code:hover,
.fnf-ab__code:focus-visible {
	transform: translateY(-1px);
	outline: 0;
}

.fnf-ab__code.fnf-copied::after {
	content: " ✓ Copied";
	font-weight: 600;
	margin-left: 4px;
}

.fnf-ab-wrap[data-pause-hover="1"]:hover .fnf-ab__slide {
	animation-play-state: paused !important;
}

@media (max-width: 640px) {
	.fnf-ab {
		font-size: 12.5px;
		min-height: 36px;
	}
	.fnf-ab__stage { height: 22px; }
	.fnf-ab__code  { padding: 2px 8px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.fnf-ab__slide {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.fnf-ab__slide:not(:first-child) { display: none; }
}

/* ─── Hero Split (Section 2) ──────────────────────────────── */

.fnf-hero-wrap {
	background-color: #faf5eb;
	overflow: hidden;
}

.fnf-hero {
	display: grid;
	grid-template-columns: 6fr 5fr;
	align-items: center;
	gap: 48px;
	max-width: 1200px;
	margin: 0 auto;
}

.fnf-hero--img-left           { grid-template-columns: 5fr 6fr; }
.fnf-hero--img-left  .fnf-hero__col--copy  { order: 2; }
.fnf-hero--img-left  .fnf-hero__col--image { order: 1; }

/* Ratio helpers (desktop) */
.fnf-hero--ratio-7-4 { grid-template-columns: 7fr 4fr; }
.fnf-hero--ratio-6-5 { grid-template-columns: 6fr 5fr; }
.fnf-hero--ratio-5-6 { grid-template-columns: 5fr 6fr; }
.fnf-hero--ratio-4-7 { grid-template-columns: 4fr 7fr; }
.fnf-hero--ratio-stack { grid-template-columns: 1fr; }
.fnf-hero--ratio-stack .fnf-hero__col--image { order: 2; }

/* ---- Copy column ---- */

.fnf-hero__col--copy {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.fnf-hero__eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #568f31;
}

.fnf-hero__title {
	margin: 0;
	font-size: clamp( 32px, 4.6vw, 56px );
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: #1a1a1a;
}

.fnf-hero__sub {
	margin: 0;
	font-size: clamp( 15px, 1.4vw, 18px );
	line-height: 1.55;
	color: #3a3a3a;
	max-width: 46ch;
}

/* ---- CTAs ---- */

.fnf-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 4px;
}

.fnf-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border-radius: 10px;
	border: 2px solid transparent;
	transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
	cursor: pointer;
	min-height: 44px;   /* mobile tap target */
}

.fnf-hero__cta:hover,
.fnf-hero__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -8px rgba(0,0,0,0.25);
	outline: 0;
}

.fnf-hero__cta--primary {
	background-color: #568f31;
	color: #faf5eb;
}

.fnf-hero__cta--secondary {
	background-color: transparent;
	color: #1a1a1a;
	border-color: #1a1a1a;
}

.fnf-hero__cta--secondary:hover {
	background-color: #1a1a1a;
	color: #faf5eb;
}

.fnf-hero__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.fnf-hero__cta-icon svg,
.fnf-hero__cta-icon i {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* ---- Trust badge ---- */

.fnf-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	color: #3a3a3a;
	margin-top: 4px;
}

.fnf-hero__stars {
	color: #c8943e;
	font-size: 15px;
	letter-spacing: 0.05em;
}

.fnf-hero__badge-sep {
	opacity: 0.5;
}

/* ---- Image column ---- */

.fnf-hero__col--image {
	position: relative;
}

.fnf-hero__img-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(135deg, #f0e8d8 0%, #dcc9a0 100%);
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.28);
}

.fnf-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.fnf-hero__img-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: #c8943e;
	color: #1a1a1a;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	padding: 6px 12px;
	border-radius: 999px;
	text-transform: uppercase;
	z-index: 2;
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
	.fnf-hero {
		grid-template-columns: 1fr !important;
		gap: 32px;
	}
	.fnf-hero__col--image { order: 2; }
	.fnf-hero--img-left .fnf-hero__col--copy { order: 1; }
	.fnf-hero__title { font-size: clamp( 28px, 7.5vw, 40px ); }
	.fnf-hero__sub   { max-width: 100%; }
}

@media (max-width: 480px) {
	.fnf-hero__cta { padding: 12px 18px; font-size: 14px; }
}

/* ─── Category Grid (Section 3) — modern bento cards ─────── */

.fnf-cg {
	width: 100%;
}

.fnf-cg__header {
	text-align: center;
	margin-bottom: 32px;
}

.fnf-cg__title {
	margin: 0 0 8px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-size: clamp( 24px, 3vw, 34px );
}

.fnf-cg__subtitle {
	margin: 0;
	opacity: 0.75;
	font-size: 15px;
}

.fnf-cg__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
}

.fnf-cg__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	border-radius: 20px;
	padding: 20px 22px 18px;
	min-height: 240px;
	text-decoration: none;
	transition: transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 260ms ease;
	isolation: isolate;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.fnf-cg__card::before {
	/* subtle inner ring for depth */
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
	pointer-events: none;
	z-index: 1;
}

.fnf-cg__card:hover,
.fnf-cg__card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -18px rgba(0,0,0,0.32);
	outline: 0;
}

.fnf-cg__count {
	position: absolute;
	top: 16px;
	left: 16px;
	background: rgba(255,255,255,0.85);
	color: inherit;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	z-index: 3;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.fnf-cg__img {
	position: absolute;
	top: -14px;
	right: -22px;
	width: 62%;
	max-width: 260px;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	transform: rotate(6deg);
	transition: transform 380ms ease;
	z-index: 2;
	filter: drop-shadow(0 20px 24px rgba(0,0,0,0.18));
}

.fnf-cg__card:hover .fnf-cg__img {
	transform: rotate(-2deg) scale(1.05) translateY(-4px);
}

.fnf-cg__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: auto;
	padding-right: 40%;   /* keeps text clear of floating image on wide cards */
}

.fnf-cg__label {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.fnf-cg__sublabel {
	font-size: 13px;
	opacity: 0.75;
	line-height: 1.35;
}

.fnf-cg__cta {
	position: relative;
	z-index: 2;
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(0,0,0,0.9);
	color: #faf5eb;
	font-size: 12px;
	font-weight: 700;
	padding: 8px 14px;
	border-radius: 999px;
	align-self: flex-start;
	transition: gap 200ms ease, transform 200ms ease, background 200ms ease;
}

.fnf-cg__card:hover .fnf-cg__cta {
	gap: 10px;
	background: #000;
}

.fnf-cg__arrow {
	font-weight: 400;
	transition: transform 200ms ease;
}

.fnf-cg__card:hover .fnf-cg__arrow {
	transform: translateX(2px);
}

@media (max-width: 900px) {
	.fnf-cg__grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.fnf-cg__card    { min-height: 200px; padding: 16px 18px 14px; border-radius: 18px; }
	.fnf-cg__label   { font-size: 18px; }
	.fnf-cg__img     { top: -8px; right: -18px; width: 58%; }
	.fnf-cg__body    { padding-right: 34%; }
}

@media (max-width: 480px) {
	.fnf-cg__card  { min-height: 170px; }
	.fnf-cg__label { font-size: 16px; }
	.fnf-cg__sublabel { font-size: 12px; }
	.fnf-cg__cta   { font-size: 11px; padding: 6px 12px; }
}

/* ─── Reviews Carousel (Section 7) ────────────────────────── */

.fnf-rc {
	width: 100%;
}

.fnf-rc__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 28px;
}

.fnf-rc__title {
	margin: 0 0 6px;
	font-weight: 700;
	line-height: 1.2;
}

.fnf-rc__subtitle {
	margin: 0;
	font-size: 15px;
	opacity: 0.85;
}

.fnf-rc__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.fnf-rc__viewport::-webkit-scrollbar { display: none; }

.fnf-rc__track {
	display: flex;
	gap: 20px;
	padding: 8px 24px;
	width: max-content;
}

.fnf-rc__card {
	scroll-snap-align: start;
	width: 340px;
	min-width: 340px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 6px 24px -8px rgba(0,0,0,0.16);
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: #1a1a1a;
}

.fnf-rc__stars {
	color: #c8943e;
	letter-spacing: 0.1em;
	font-size: 18px;
	line-height: 1;
}

.fnf-rc__body {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	quotes: none;
	flex: 1;
}

.fnf-rc__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	font-size: 12.5px;
	color: #3a3a3a;
}

.fnf-rc__reviewer {
	font-weight: 700;
}

.fnf-rc__sep {
	opacity: 0.4;
}

.fnf-rc__source--google {
	background: #4285f4;
	color: #fff;
	padding: 2px 7px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 11px;
}

.fnf-rc__source--verified {
	background: #568f31;
	color: #faf5eb;
	padding: 2px 7px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 11px;
}

.fnf-rc__hint {
	text-align: center;
	font-size: 12px;
	opacity: 0.5;
	margin-top: 12px;
}

@media (min-width: 900px) {
	.fnf-rc__hint { display: none; }
}

/* ─── WhatsApp Opt-in (Section 11) ────────────────────────── */

.fnf-wa-wrap {
	background: #faf5eb;
}

.fnf-wa {
	max-width: 1000px;
	margin: 0 auto;
	padding: 48px 24px;
}

.fnf-wa__header {
	text-align: center;
	margin-bottom: 28px;
}

.fnf-wa__title {
	margin: 0 0 8px;
	font-weight: 700;
	line-height: 1.2;
}

.fnf-wa__sub {
	margin: 0 auto;
	max-width: 640px;
	font-size: 15px;
	color: #3a3a3a;
	line-height: 1.55;
}

.fnf-wa__panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.fnf-wa__panel {
	background: #fff;
	border-radius: 16px;
	padding: 22px 22px 20px;
	box-shadow: 0 4px 20px -8px rgba(0,0,0,0.12);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fnf-wa__panel-head {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 16px;
}

.fnf-wa__icon { font-size: 20px; }

.fnf-wa__form,
.fnf-wa__email-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fnf-wa__field input {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	border: 1.5px solid #dcd6c7;
	border-radius: 10px;
	background: #faf5eb;
	color: #1a1a1a;
	transition: border-color 150ms ease;
}

.fnf-wa__field input:focus {
	border-color: #568f31;
	outline: 0;
}

.fnf-wa__cta {
	appearance: none;
	border: 0;
	cursor: pointer;
	background: #25D366;
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	padding: 13px 18px;
	border-radius: 10px;
	min-height: 44px;
	transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.fnf-wa__cta:hover,
.fnf-wa__cta:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 10px 20px -8px rgba(37, 211, 102, 0.5);
	outline: 0;
	filter: brightness(1.05);
}

.fnf-wa__cta--email {
	background: #568f31;
}

.fnf-wa__cta--email:hover {
	box-shadow: 0 10px 20px -8px rgba(86, 143, 49, 0.5);
}

.fnf-wa__cta:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.fnf-wa__consent {
	margin: 0;
	font-size: 12px;
	color: #666;
	line-height: 1.4;
}

.fnf-wa__err {
	margin: 0;
	color: #dc3232;
	font-size: 13px;
	font-weight: 600;
}

.screen-reader-text {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 720px) {
	.fnf-wa__panels { grid-template-columns: 1fr; }
	.fnf-wa { padding: 32px 16px; }
}

/* ─── FAQ Schema Accordion (Section 10) ───────────────────── */

.fnf-faq {
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
}

.fnf-faq__title {
	margin: 0 0 20px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

.fnf-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fnf-faq__item {
	border: 1px solid transparent;
	border-radius: 12px;
	background: #faf5eb;
	padding: 0;
	transition: border-color 160ms ease;
	overflow: hidden;
}

.fnf-faq__item[open] {
	border-color: #568f31;
}

.fnf-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: #1a1a1a;
	cursor: pointer;
	list-style: none;
}

/* Kill default marker across browsers */
.fnf-faq__q::-webkit-details-marker { display: none; }
.fnf-faq__q::marker { content: ''; }

.fnf-faq__q > span {
	flex: 1;
}

.fnf-faq__q::after {
	content: '+';
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	color: #568f31;
	transition: transform 200ms ease;
	flex-shrink: 0;
}

.fnf-faq__item[open] .fnf-faq__q::after {
	transform: rotate(45deg);
}

.fnf-faq__a {
	padding: 0 20px 18px;
	color: #3a3a3a;
	font-size: 15px;
	line-height: 1.6;
}

.fnf-faq__a p:first-child { margin-top: 0; }
.fnf-faq__a p:last-child  { margin-bottom: 0; }

@media (max-width: 640px) {
	.fnf-faq__q { padding: 14px 16px; font-size: 15px; }
	.fnf-faq__a { padding: 0 16px 16px; font-size: 14px; }
}