/*
 * Helpers for the Kadence sections: only what Kadence has no setting for.
 * Section padding lives on the Kadence Row Layout blocks, never here.
 */

/* Body text: the site font at 400 with normal letter spacing. Twenty
   Twenty-Five's global styles set body to 300 / -0.1px and load later,
   hence `html body`. */
html body.sp-bf-site {
	font-family: var(--sp-bf-font);
	font-weight: 400;
	letter-spacing: normal;
}

/* Section H2s wrap balanced (no Kadence setting). */
body.sp-bf-site .sp-bf-wave {
	text-wrap: balance;
}

/* Hero (design: aurora + dot grid behind the content; the header overlays the
   top 68px, so the row's top padding includes it). */
body.sp-bf-site .sp-bf-sec-hero,
body.sp-bf-site .sp-bf-sec-final {
	position: relative;
	overflow: hidden;
	color: #fff;
}

body.sp-bf-site .sp-bf-sec-hero::before,
body.sp-bf-site .sp-bf-sec-hero::after,
body.sp-bf-site .sp-bf-sec-final::before,
body.sp-bf-site .sp-bf-sec-final::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

body.sp-bf-site .sp-bf-sec-hero::before,
body.sp-bf-site .sp-bf-sec-final::before {
	inset: -20%;
	background:
		radial-gradient(40% 50% at 20% 40%, rgba(var(--sp-bf-primary-rgb), 0.55), transparent 70%),
		radial-gradient(35% 45% at 80% 30%, rgba(var(--sp-bf-primary-dark-rgb), 0.7), transparent 70%),
		radial-gradient(50% 40% at 50% 100%, rgba(var(--sp-bf-primary-border-rgb), 0.18), transparent 70%);
	background-size: 160% 160%, 160% 160%, 140% 140%;
	filter: blur(20px);
	animation: sp-bf-aurora var(--sp-bf-aurora) ease-in-out infinite;
}

body.sp-bf-site .sp-bf-sec-final::after,
body.sp-bf-site .sp-bf-sec-hero::after {
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 24px 24px;
}

body.sp-bf-site .sp-bf-sec-hero > .kt-row-column-wrap,
body.sp-bf-site .sp-bf-sec-final > .kt-row-column-wrap,
body.sp-bf-site .sp-bf-sec-pricing-final > .kt-row-column-wrap {
	position: relative;
	z-index: 1;
}

@keyframes sp-bf-aurora {

	0%,
	100% {
		background-position: 0% 50%, 100% 50%, 50% 0%;
	}

	50% {
		background-position: 100% 30%, 0% 70%, 50% 100%;
	}
}

@media (prefers-reduced-motion: reduce) {

	body.sp-bf-site .sp-bf-sec-hero::before,
	body.sp-bf-site .sp-bf-sec-final::before {
		animation: none;
	}
}

/* Pricing hero: the design's 2-layer aurora (22s), narrow centred column,
   fluid H1; the empty slot holds the P3 billing tabs. */
body.sp-bf-site .sp-bf-sec-pricing-hero::before {
	background:
		radial-gradient(40% 50% at 20% 40%, rgba(var(--sp-bf-primary-rgb), 0.5), transparent 70%),
		radial-gradient(35% 45% at 80% 30%, rgba(var(--sp-bf-primary-dark-rgb), 0.65), transparent 70%);
	background-size: 160% 160%, 160% 160%;
	animation-name: sp-bf-aurora-2;
	animation-duration: 22s;
}

@keyframes sp-bf-aurora-2 {

	0%,
	100% {
		background-position: 0% 50%, 100% 50%;
	}

	50% {
		background-position: 100% 30%, 0% 70%;
	}
}

body.sp-bf-site .sp-bf-pricing-hero-inner {
	max-width: 832px;
	margin-inline: auto;
}

body.sp-bf-site .sp-bf-pricing-sub {
	max-width: 620px;
}

body.sp-bf-site.sp-bf-site h1.sp-bf-pricing-title {
	font-size: clamp(40px, 6vw, 72px);
}

body.sp-bf-site .sp-bf-pricing-tabs-slot:empty {
	display: none;
}

/* Hero (v3): the design's layered background. Row background = dot grid
   (faded into the dark base), ::before = animated aurora, ::after = 3D grid
   floor; the glows and the dark ellipse are extra layers of the aurora. */
body.sp-bf-site .sp-bf-sec-hero {
	background-image: linear-gradient(#030712, #030712);
	background-repeat: no-repeat;
}

body.sp-bf-site .sp-bf-sec-hero::before {
	display: block;
	inset: -20%;
	background:
		radial-gradient(38% 42% at 18% 30%, rgba(var(--sp-bf-primary-rgb), 0.4), transparent 70%),
		radial-gradient(34% 40% at 82% 26%, rgba(var(--sp-bf-primary-dark-rgb), 0.5), transparent 70%);
	background-size: 160% 160%, 160% 160%;
	filter: blur(30px);
	animation: sp-bf-aurora-hero 26s ease-in-out infinite;
}

body.sp-bf-site .sp-bf-sec-hero::after {
	left: -50%;
	right: -50%;
	top: 48%;
	height: 373px;
	background-image:
		linear-gradient(rgba(var(--sp-bf-primary-border-rgb), 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--sp-bf-primary-border-rgb), 0.12) 1px, transparent 1px);
	background-size: 64px 64px;
	transform: perspective(520px) rotateX(68deg);
	transform-origin: 50% 0;
	/* The design masks the projected floor (26% / 72% / 100% of its 52% box); these are the same stops in the element's own pre-projection pixels. */
	mask-image: linear-gradient(180deg, transparent 0, #000 190px, #000 330px, transparent 373px);
	animation: sp-bf-grid 6s linear infinite;
}

/* Dark ellipse behind the text and the two glows at the bottom, as layers
   of one full-width pseudo (the wrap carries the row padding). */
body.sp-bf-site .sp-bf-sec-hero > .kt-row-column-wrap::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	width: 100vw;
	top: 0;
	bottom: 0;
	transform: translateX(-50%);
	pointer-events: none;
	background:
		radial-gradient(min(450px, 45vw) 90px at 50% calc(100% - 30px), rgba(var(--sp-bf-primary-border-rgb), 0.55), transparent),
		radial-gradient(min(900px, 80vw) 230px at 50% calc(100% - 50px), rgba(var(--sp-bf-primary-rgb), 0.9), rgba(var(--sp-bf-primary-dark-rgb), 0.45) 50%, transparent),
		radial-gradient(min(500px, 55vw) 30% at 32% 46%, rgba(3, 7, 18, 0.75), rgba(3, 7, 18, 0.35) 60%, transparent);
}

/* Dot grid above the ellipse and glows, faded out downwards (own pseudo for
   the mask); the glows sit at the bottom, clear of the dots. */
body.sp-bf-site .sp-bf-sec-hero > .kt-row-column-wrap::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	width: 100vw;
	top: 0;
	height: 62%;
	transform: translateX(-50%);
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.4px);
	background-size: 22px 22px;
	mask-image: radial-gradient(70% 90% at 50% 0%, #000 30%, transparent 80%);
}

/* Tablet keeps the desktop two columns (user 2026-11-04); Kadence "inherit" gives 50/50. */
@media (min-width: 768px) and (max-width: 1024px) {

	body.sp-bf-site .sp-bf-sec-hero > .kt-row-column-wrap {
		grid-template-columns: minmax(0, calc(55.56% - 24px)) minmax(0, calc(44.44% - 24px));
	}
}

@keyframes sp-bf-aurora-hero {

	0%,
	100% {
		background-position: 0% 50%, 100% 50%;
	}

	50% {
		background-position: 100% 30%, 0% 70%;
	}
}

@keyframes sp-bf-grid {

	from {
		background-position: 0 0, 0 0;
	}

	to {
		background-position: 0 64px, 0 0;
	}
}

body.sp-bf-site .sp-bf-hero-badge {
	width: fit-content;
	box-shadow: inset 0 0 0 1px rgba(var(--sp-bf-primary-border-rgb), 0.4);
}

/* Fluid H2 (Kadence has no clamp setting). */
body.sp-bf-site.sp-bf-site h2.sp-bf-hero-title {
	font-size: clamp(40px, 5vw, 72px);
	letter-spacing: -0.04em;
	white-space: nowrap;
}

/* Mobile: the longest line ("WordPress Plugin" = 8.03em) fills the column
   (user 2026-11-04). */
@media (max-width: 767px) {

	body.sp-bf-site.sp-bf-site h2.sp-bf-hero-title {
		font-size: calc((100vw - 48px) / 8.1);
	}
}

body.sp-bf-site .sp-bf-hero-proof {
	margin-top: 40px;
}

/* At 320 the eyebrow wraps and spills out of its 32px pill; tighten spacing to one line (min 12px). */
@media (max-width: 360px) {

	body.sp-bf-site.sp-bf-site h1.sp-bf-hero-badge {
		font-size: 12px;
		letter-spacing: 0.02em;
		padding-right: 10px;
		padding-left: 10px;
	}
}

body.sp-bf-site .sp-bf-hero-btn {
	box-shadow: 0 12px 30px -10px rgba(var(--sp-bf-primary-rgb), 0.7);
	transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 180ms ease, box-shadow 200ms ease;
}

body.sp-bf-site .sp-bf-hero-btn:hover {
	transform: translateY(-3px) scale(1.06);
	box-shadow: 0 20px 40px -12px rgba(var(--sp-bf-primary-rgb), 0.85);
}

/* Click: the arrow slides out and back in (anchor-scroll.js: is-arrow). */
body.sp-bf-site .sp-bf-hero-btn .kb-svg-icon-wrap {
	overflow: hidden;
}

body.sp-bf-site .sp-bf-hero-btn.is-arrow .kb-svg-icon-wrap > svg {
	animation: sp-bf-arr-down 700ms cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes sp-bf-arr-down {

	0% {
		transform: none;
	}

	45% {
		transform: translateY(120%);
	}

	46% {
		transform: translateY(-120%);
	}

	100% {
		transform: none;
	}
}

/* Final CTA: the arrow points up, so it slides up and back in. */
body.sp-bf-site .sp-bf-hero-btn--up.is-arrow .kb-svg-icon-wrap > svg {
	animation-name: sp-bf-arr-up;
}

@keyframes sp-bf-arr-up {

	0% {
		transform: none;
	}

	45% {
		transform: translateY(-120%);
	}

	46% {
		transform: translateY(120%);
	}

	100% {
		transform: none;
	}
}

/* Partial SVG star (review ratings): grey star with a clipped coloured copy. */
body.sp-bf-site .sp-bf-star-part {
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
}

body.sp-bf-site .sp-bf-star-part > span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

body.sp-bf-site .sp-bf-review-ratings svg,
body.sp-bf-site .sp-bf-reviews-wall svg {
	display: block;
}

@media (prefers-reduced-motion: reduce) {

	body.sp-bf-site .sp-bf-hero-btn.is-arrow .kb-svg-icon-wrap > svg {
		animation: none;
	}
}

/* Entrance: the left column fades up in turn, the ticket after it
   (transform + opacity only). */
body.sp-bf-site .sp-bf-hero-live > :where(.kt-inside-inner-col) > *,
body.sp-bf-site .sp-bf-hero-aside > :where(.kt-inside-inner-col) > * {
	animation: sp-bf-up 700ms var(--sp-bf-ease-up) both;
}

body.sp-bf-site .sp-bf-hero-live > .kt-inside-inner-col > :nth-child(2) {
	animation-delay: 80ms;
}

body.sp-bf-site .sp-bf-hero-live > .kt-inside-inner-col > :nth-child(3) {
	animation-delay: 180ms;
}

body.sp-bf-site .sp-bf-hero-live > .kt-inside-inner-col > :nth-child(4) {
	animation-delay: 240ms;
}

body.sp-bf-site .sp-bf-hero-live > .kt-inside-inner-col > :nth-child(5) {
	animation-delay: 300ms;
}

body.sp-bf-site .sp-bf-hero-aside > :where(.kt-inside-inner-col) > * {
	animation-delay: 200ms;
	animation-duration: 900ms;
}

@keyframes sp-bf-up {

	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	body.sp-bf-site .sp-bf-sec-hero::before,
	body.sp-bf-site .sp-bf-sec-hero::after,
	body.sp-bf-site .sp-bf-hero-live > :where(.kt-inside-inner-col) > *,
	body.sp-bf-site .sp-bf-hero-aside > :where(.kt-inside-inner-col) > * {
		animation: none;
	}
}

/* Plugins (#plugins): sits 64px over the hero's bottom edge with a violet glow
   on its rounded top (Kadence has no z-index or multi-shadow option). */
body.sp-bf-site .sp-bf-sec-deals {
	position: relative;
	z-index: 2;
	box-shadow: 0 -1px 0 rgba(196, 181, 253, 0.5), 0 -40px 100px -30px rgba(124, 58, 237, 0.55);
}

/* Logos section: 1px line under the white strip (design inset shadow). */
body.sp-bf-site .sp-bf-sec-logos {
	box-shadow: inset 0 -1px 0 var(--sp-bf-border);
}

/* Urgency: dot grid behind the content, columns centred, and the
   deal-ended swap (the countdown adds sp-bf-ended to body). */
body.sp-bf-site .sp-bf-sec-urgency {
	position: relative;
	overflow: hidden;
}

body.sp-bf-site .sp-bf-sec-urgency::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 24px 24px;
}

body.sp-bf-site .sp-bf-sec-urgency > .kt-row-column-wrap {
	position: relative;
	align-items: center;
}

body.sp-bf-site .sp-bf-urgency-ended {
	display: none;
}

body.sp-bf-site.sp-bf-ended .sp-bf-urgency-ended {
	display: block;
}

body.sp-bf-site.sp-bf-ended .sp-bf-urgency-live {
	display: none;
}

body.sp-bf-site.sp-bf-ended .sp-bf-sec-urgency > .kt-row-column-wrap {
	grid-template-columns: minmax(0, 1fr);
}

/* 06 reviews: thin top line (Kadence rows have no inset line option). */
body.sp-bf-site .sp-bf-sec-reviews {
	box-shadow: inset 0 1px 0 #eef0f3;
}

/* 07 why upgrade now: icon cards. */
body.sp-bf-site .sp-bf-why-title {
	margin-bottom: 40px;
}

body.sp-bf-site .sp-bf-why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

body.sp-bf-site .sp-bf-why-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 28px;
	background: var(--sp-bf-white);
	border-radius: 6px;
	box-shadow: inset 0 0 0 1px var(--sp-bf-border);
}

body.sp-bf-site .sp-bf-why-card > * {
	margin: 0;
}

body.sp-bf-site .sp-bf-why-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 6px;
	color: var(--sp-bf-primary);
	background: var(--sp-bf-primary-fill);
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px var(--sp-bf-primary-border);
}

body.sp-bf-site .sp-bf-why-card h3 {
	font-family: Inter, system-ui, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--sp-bf-heading);
}

body.sp-bf-site .sp-bf-why-card p {
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sp-bf-caption);
}

@media (max-width: 767px) {

	body.sp-bf-site .sp-bf-why-title {
		margin-bottom: 30px;
	}
}

/* 07 FAQ (v3): separate rounded cards, ring + violet open state. */
body.sp-bf-site .sp-bf-sec-faq {
	box-shadow: inset 0 1px 0 #eef0f3;
}

body.sp-bf-site .sp-bf-faq-acc .kt-accordion-pane {
	overflow: hidden;
	border-radius: 12px;
	background: var(--sp-bf-white);
	box-shadow: 0 0 0 1px #e5e7eb;
	transition: box-shadow 0.36s ease;
}

/* Let the Tab focus outline show outside the rounded pane. */
body.sp-bf-site .sp-bf-faq-acc .kt-accordion-pane:has(.kt-blocks-accordion-header:focus-visible) {
	overflow: visible;
}

body.sp-bf-site .sp-bf-faq-acc .kt-accordion-pane + .kt-accordion-pane {
	margin-top: 8px;
}

body.sp-bf-site .sp-bf-faq-acc .kt-accordion-pane:has(.kt-accordion-panel-active) {
	box-shadow: 0 0 0 1px #c4b5fd, 0 8px 24px rgba(124, 58, 237, 0.12);
}

body.sp-bf-site .sp-bf-faq-acc .kt-accordion-panel-inner p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

/* FAQ (Home + Pricing): pointer cursor on the question headers. */
body.sp-bf-site .sp-bf-faq-acc .kt-blocks-accordion-header {
	cursor: pointer;
}

/* FAQ (Home + Pricing): "+" icon. Bars stay fixed (0/90deg); only the wrapper rotates 45deg to an "x". */
body.sp-bf-site .sp-bf-faq-acc .kt-blocks-accordion-icon-trigger {
	width: 20px;
	min-width: 20px;
	height: 20px;
	transform: rotate(0deg);
	transform-origin: 50% 50%;
	transition: transform 0.36s ease;
}

body.sp-bf-site .sp-bf-faq-acc .kt-blocks-accordion-icon-trigger::before,
body.sp-bf-site .sp-bf-faq-acc .kt-blocks-accordion-icon-trigger::after {
	top: 9.2px;
	left: 4px;
	width: 12px;
	height: 1.6px;
	background: #6a7282;
	transform-origin: 50% 50%;
	transition: background-color 0.36s ease;
}

body.sp-bf-site .sp-bf-faq-acc .kt-blocks-accordion-icon-trigger::before {
	transform: rotate(90deg);
}

body.sp-bf-site .sp-bf-faq-acc .kt-blocks-accordion-icon-trigger::after {
	transform: rotate(0deg);
}

body.sp-bf-site .sp-bf-faq-acc .kt-accordion-pane:has(.kt-accordion-panel-active) .kt-blocks-accordion-icon-trigger {
	transform: rotate(45deg);
}

body.sp-bf-site .sp-bf-faq-acc .kt-accordion-pane:has(.kt-accordion-panel-active) .kt-blocks-accordion-icon-trigger::before,
body.sp-bf-site .sp-bf-faq-acc .kt-accordion-pane:has(.kt-accordion-panel-active) .kt-blocks-accordion-icon-trigger::after {
	background: #7c3aed;
}

body.sp-bf-site .sp-bf-faq-acc .kt-accordion-pane:has(.kt-accordion-panel-active) .kt-blocks-accordion-icon-trigger::before {
	transform: rotate(90deg);
}

body.sp-bf-site .sp-bf-faq-acc .kt-accordion-pane:has(.kt-accordion-panel-active) .kt-blocks-accordion-icon-trigger::after {
	transform: rotate(0deg);
}

/* 09 final CTA: aurora shared with the hero; fluid H2; deal-ended swap. */
body.sp-bf-site.sp-bf-site h2.sp-bf-final-title {
	font-size: clamp(26px, 5.6vw, 72px);
	color: #fff;
	text-wrap: balance;
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.sp-bf-site .sp-bf-sec-final {
	color: #fff;
}

/* Design: ::before = one centred aurora (80% x 60%, blur 30), ::after = the
   perspective grid floor (64px lines, 6s drift) in the bottom 60%. Mask
   stops are the design's, in the element's own pre-projection pixels. */
body.sp-bf-site .sp-bf-sec-final::before {
	inset: auto;
	left: 50%;
	top: 40%;
	width: 80%;
	height: 60%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(var(--sp-bf-primary-rgb), 0.4), transparent);
	filter: blur(30px);
	animation: none;
}

body.sp-bf-site .sp-bf-sec-final::after {
	inset: auto;
	left: -50%;
	right: -50%;
	top: 40%;
	height: 639px;
	background-image:
		linear-gradient(rgba(var(--sp-bf-primary-border-rgb), 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--sp-bf-primary-border-rgb), 0.12) 1px, transparent 1px);
	background-size: 64px 64px;
	transform: perspective(520px) rotateX(68deg);
	transform-origin: 50% 0;
	mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.5) 26%, #000 74%, rgba(0, 0, 0, 0.93) 100%);
	animation: sp-bf-grid 6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {

	body.sp-bf-site .sp-bf-sec-final::after {
		animation: none;
	}
}

body.sp-bf-site .sp-bf-final-ended {
	display: none;
}

body.sp-bf-site.sp-bf-ended .sp-bf-final-ended {
	display: flex;
}

body.sp-bf-site.sp-bf-ended .sp-bf-final-live {
	display: none;
}

/* Footer */
body.sp-bf-site .sp-bf-footer {
	box-shadow: inset 0 1px 0 #e5e7eb;
}

/* Footer globe is pinned to the row top: the outer column must not be
   its containing block */
body.sp-bf-site .sp-bf-footer > .kt-row-column-wrap > .wp-block-kadence-column,
body.sp-bf-site .sp-bf-footer > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
	position: static;
}

/* Coming-soon footer: logo link is a block (no inline line box) */
body.sp-bf-site .sp-bf-cs-footer-logo .kb-advanced-image-link {
	display: block;
	line-height: 0;
}

/* Coming-soon footer: Kadence nav goes vertical only <=719;
   stack it up to 767 too */
@media (min-width: 720px) and (max-width: 767px) {

	body.sp-bf-site .kadence-columncsf-ft-14 > .kt-inside-inner-col > .wp-block-kadence-navigation .menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	body.sp-bf-site .kadence-columncsf-ft-14 > .kt-inside-inner-col > .wp-block-kadence-navigation .menu > li {
		margin: 0;
	}
}

/* Coming-soon footer <=767: stacked items left-aligned with the links
   (vertical align centres them in a column) */
@media (max-width: 767px) {

	body.sp-bf-site .wp-block-kadence-column.kb-section-sm-dir-vertical:not(.kb-section-sm-dir-horizontal):not(.kb-section-sm-dir-specificity) > .kt-inside-inner-col > .kadence-columncsf-ft-13,
	body.sp-bf-site .wp-block-kadence-column.kb-section-sm-dir-vertical:not(.kb-section-sm-dir-horizontal):not(.kb-section-sm-dir-specificity) > .kt-inside-inner-col > .kadence-columncsf-ft-03 {
		margin-inline: 0;
		max-width: none;
	}

	body.sp-bf-site .kadence-columncsf-ft-13 > .kt-inside-inner-col,
	body.sp-bf-site .kadence-columncsf-ft-14 > .kt-inside-inner-col {
		align-items: flex-start;
	}
}

/* Tap area 44px on mobile; negative margin keeps the visible spacing */
@media (max-width: 767px) {

	body.sp-bf-site .sp-bf-footer a:not(.kb-advanced-image-link) {
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		min-height: 44px;
		padding-block: 10px;
		margin-block: -10px;
	}
}

/* Mouse focus: no ring (keyboard Tab keeps :focus-visible ring) */
body.sp-bf-site :is(a, button, summary, input, select, textarea, [role="button"], [role="tab"], [tabindex], .kb-button, .kt-blocks-accordion-header):focus:not(:focus-visible) {
	outline: 0;
}

body.sp-bf-site .sp-bf-sec-faq .kt-blocks-accordion-header:focus-visible,
body.sp-bf-site .sp-bf-sec-pricing-faq .kt-blocks-accordion-header:focus-visible {
	outline: 2px solid #7c3aed;
	outline-offset: 2px;
}

body.sp-bf-site .sp-bf-sec-faq .kt-blocks-accordion-header:focus:not(:focus-visible),
body.sp-bf-site .sp-bf-sec-pricing-faq .kt-blocks-accordion-header:focus:not(:focus-visible) {
	border-color: transparent;
	box-shadow: none;
	outline: 0;
}

/* Pricing: guarantee card ring */
body.sp-bf-site .sp-bf-guarantee > .kt-inside-inner-col {
	box-shadow: inset 0 0 0 1px var(--sp-bf-primary-border);
	border-radius: 12px;
}

/* Buttons: smooth hover (Kadence + core buttons) */
body.sp-bf-site .kb-button,
body.sp-bf-site .wp-block-button__link,
body.sp-bf-site .wp-element-button {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Header menu trigger + drawer close (Kadence off-canvas) */
body.sp-bf-site .wp-block-kadence-off-canvas-trigger,
body.sp-bf-site .wp-block-kadence-off-canvas .kb-off-canvas-close {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Reduced motion: no hover transitions on interactive elements */
@media (prefers-reduced-motion: reduce) {

	body.sp-bf-site :is(a, button, [role="button"], [role="tab"], summary, input[type="submit"], .ff-btn) {
		transition: none !important;
	}
}

/* Pricing: bundle upsell banner (card clickable via the button link) */
body.sp-bf-site .sp-bf-upsell > .kt-inside-inner-col {
	--sp-bf-upsell-glow: radial-gradient(60% 140% at 0% 50%, color-mix(in srgb, var(--sp-bf-primary) 35%, transparent), transparent 70%);
	background-image: var(--sp-bf-upsell-glow);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	transition: box-shadow 200ms ease;
}

body.sp-bf-site .sp-bf-upsell > .kt-inside-inner-col:hover,
body.sp-bf-site .sp-bf-upsell > .kt-inside-inner-col:has(:focus-visible) {
	box-shadow: inset 0 0 0 1px rgba(var(--sp-bf-primary-border-rgb), 0.5);
}

body.sp-bf-site .sp-bf-upsell__icons {
	flex: 0 0 auto;
}

body.sp-bf-site .sp-bf-upsell__icon {
	margin: 0 -10px 0 0;
}

body.sp-bf-site .sp-bf-upsell__icon img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	box-shadow: 0 0 0 3px #030712;
}

body.sp-bf-site .sp-bf-upsell__text {
	flex: 1 1 240px;
	min-width: 240px;
	padding-left: 10px;
}

body.sp-bf-site .sp-bf-upsell .kb-buttons-wrap {
	flex: 0 0 auto;
}

body.sp-bf-site .sp-bf-upsell .kb-button {
	position: static;
}

body.sp-bf-site .sp-bf-upsell .kb-button::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
}

/* Pricing: guarantee card */
body.sp-bf-site .sp-bf-guarantee__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 48px;
	align-items: center;
}

body.sp-bf-site .sp-bf-guarantee__badge-cell {
	display: flex;
	justify-content: center;
}

body.sp-bf-site .sp-bf-guarantee__badge {
	position: relative;
	margin: 0;
	line-height: 0;
}

body.sp-bf-site .sp-bf-guarantee__badge img {
	display: block;
	width: 280px;
	max-width: 100%;
	height: auto;
}

body.sp-bf-site .sp-bf-guarantee__badge::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sp-bf-primary);
	mix-blend-mode: color;
	pointer-events: none;
}

body.sp-bf-site .sp-bf-guarantee__body {
	grid-column: span 2;
	min-width: 0;
}

body.sp-bf-site .sp-bf-guarantee__body > * {
	align-self: stretch;
}

body.sp-bf-site .sp-bf-guarantee__title {
	text-wrap: balance;
}

body.sp-bf-site .sp-bf-guarantee__text {
	text-wrap: pretty;
}

body.sp-bf-site .sp-bf-guarantee__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

body.sp-bf-site .sp-bf-guarantee__foot {
	padding-top: 20px;
	border-top: 1px dashed var(--sp-bf-primary-border);
}

body.sp-bf-site .sp-bf-guarantee__shield,
body.sp-bf-site .sp-bf-guarantee__apple {
	margin: 0;
	line-height: 0;
}

body.sp-bf-site .sp-bf-guarantee__cards-img {
	margin: 0;
	line-height: 0;
}

body.sp-bf-site .sp-bf-guarantee__cards-img img {
	display: block;
	height: 22px;
	width: auto;
}

body.sp-bf-site .sp-bf-guarantee__applepay {
	height: 22px;
	padding: 0 6px;
	border-radius: 3px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--sp-bf-border);
}

@media (max-width: 1079px) {

	body.sp-bf-site .sp-bf-guarantee__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	body.sp-bf-site .sp-bf-guarantee__body {
		grid-column: auto;
	}
}

/* Pricing: FAQ two-column layout, top hairline, accordion tweaks. */
body.sp-bf-site .sp-bf-sec-pricing-faq {
	box-shadow: inset 0 1px 0 var(--sp-bf-border);
}

body.sp-bf-site .sp-bf-pricing-faq {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px 64px;
	align-items: start;
}

body.sp-bf-site .sp-bf-pricing-faq__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	max-width: 360px;
}

body.sp-bf-site .sp-bf-pricing-faq__acc {
	min-width: 0;
}

body.sp-bf-site .sp-bf-pricing-faq__acc .kt-accordion-wrap {
	border-radius: 8px;
}

body.sp-bf-site .sp-bf-pricing-faq__acc .kt-accordion-panel-inner p {
	max-width: 620px;
}

@media (min-width: 1025px) {

	body.sp-bf-site .sp-bf-pricing-faq {
		grid-template-columns: calc((100% - 128px) / 3) minmax(0, 1fr);
	}
}

/* Pricing final CTA: the design's 2-layer aurora (22s, reversed), fluid H2. */
body.sp-bf-site .sp-bf-sec-pricing-final {
	position: relative;
	overflow: hidden;
	color: #fff;
}

body.sp-bf-site .sp-bf-sec-pricing-final::before {
	content: "";
	position: absolute;
	inset: -20%;
	pointer-events: none;
	background:
		radial-gradient(40% 50% at 20% 40%, rgba(var(--sp-bf-primary-rgb), 0.5), transparent 70%),
		radial-gradient(35% 45% at 80% 30%, rgba(var(--sp-bf-primary-dark-rgb), 0.65), transparent 70%);
	background-size: 160% 160%, 160% 160%;
	filter: blur(20px);
	animation: sp-bf-aurora-2 22s ease-in-out infinite reverse;
}

body.sp-bf-site.sp-bf-site h2.sp-bf-pricing-final-title {
	font-size: clamp(32px, 4.8vw, 56px);
	text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {

	body.sp-bf-site .sp-bf-sec-pricing-final::before {
		animation: none;
	}
}

/* Guarantee card: inset ring + violet drop shadow like the design. */
body.sp-bf-site .kb-row-layout-wrap.sp-bf-guarantee {
	box-shadow: inset 0 0 0 1px #e5e7eb, 0 30px 60px -40px rgba(22, 163, 74, 0.35);
}

/* Guarantee card: badge + text stay side by side down to 705px (design wraps at a 320px text basis). */
@media (min-width: 705px) {
	body.sp-bf-site .sp-bf-guarantee > .kt-row-column-wrap {
		grid-template-columns: 200px minmax(0, 1fr);
		column-gap: 48px;
	}
}

/* Guarantee badge: violet tint like the design. The colour overlay is masked to the badge shape, because Kadence columns are stacking contexts and the blend would paint a solid square. */
body.sp-bf-site .sp-bf-guarantee-badge {
	position: relative;
	width: 200px;
	max-width: 100%;
	margin: 0 auto;
	line-height: 0;
}

body.sp-bf-site .sp-bf-guarantee-badge::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #16a34a;
	mix-blend-mode: color;
	pointer-events: none;
	-webkit-mask: url("../images/ui/money-back-guarantee-badge.svg") center / contain no-repeat;
	mask: url("../images/ui/money-back-guarantee-badge.svg") center / contain no-repeat;
}

body.sp-bf-site .sp-bf-guarantee-badge img {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
}

/* Coming soon (page "coming-soon"): hero. Kadence builds the row, badge, H1
   and the countdown; this is only what Kadence has no setting for. */
body.sp-bf-site .sp-bf-cs-hero {
	position: relative;
	overflow: hidden;
	min-height: min(100vh, 980px);
}

/* Drifting dot grid (3 layers as in the design); the 24px drift loops. */
body.sp-bf-site .sp-bf-cs-hero::before,
body.sp-bf-site .sp-bf-cs-hero::after,
body.sp-bf-site .sp-bf-cs-hero > .kt-row-column-wrap::before {
	content: "";
	position: absolute;
	inset: -48px;
	background-size: 24px 24px;
	pointer-events: none;
	animation: sp-bf-cs-drift 18s linear infinite;
}

body.sp-bf-site .sp-bf-cs-hero::before {
	background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1.1px, transparent 1.5px);
}

body.sp-bf-site .sp-bf-cs-hero::after {
	background-image: radial-gradient(rgba(196, 181, 253, 0.95) 1.4px, transparent 1.9px);
	mask-image: radial-gradient(closest-side, #000, transparent);
	mask-size: 520px 520px;
	mask-repeat: no-repeat;
	mask-position: var(--sp-bf-cs-mx, 50%) var(--sp-bf-cs-my, 30%);
}

body.sp-bf-site .sp-bf-cs-hero > .kt-row-column-wrap::before {
	z-index: -1;
	inset: -100px calc(50% - 50vw - 48px);
	background-image: radial-gradient(rgba(167, 139, 250, 0.08) 1px, transparent 1.4px);
	mask-image: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%);
	mask-size: 300% 100%;
	animation: sp-bf-cs-drift 18s linear infinite, sp-bf-cs-sweep 9s ease-in-out infinite;
}

body.sp-bf-site .sp-bf-cs-hero > .kt-row-column-wrap {
	position: relative;
	z-index: 1;
}

@keyframes sp-bf-cs-drift {

	to {
		background-position: 24px 24px;
	}
}

@keyframes sp-bf-cs-sweep {

	0% {
		mask-position: 100% 0;
	}

	100% {
		mask-position: 0 0;
	}
}

body.sp-bf-site .sp-bf-cs-reveal > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.sp-bf-site .sp-bf-cs-reveal {
	animation: sp-bf-up 800ms var(--sp-bf-ease-up) both;
}

body.sp-bf-site .sp-bf-cs-reveal:nth-child(2) {
	animation-delay: 240ms;
}

body.sp-bf-site .sp-bf-cs-reveal:nth-child(3) {
	animation-delay: 320ms;
}

/* Plugin sheet: lifted white sheet over the hero (Kadence rows have no box-shadow). */
body.sp-bf-site .sp-bf-cs-sheet {
	position: relative;
	box-shadow: 0 -1px 0 rgba(196, 181, 253, 0.5), 0 -40px 100px -30px rgba(124, 58, 237, 0.55);
}

/* Badge: a pill that hugs its text, with the year in an inner pill. */
body.sp-bf-site .sp-bf-cs-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	width: fit-content;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(10px);
}

body.sp-bf-site .sp-bf-cs-badge.sp-bf-cs-badge mark.kt-highlight {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 14px;
	border-radius: 999px;
	background: rgba(124, 58, 237, 0.25);
	box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.45);
	color: #e9d5ff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
}

body.sp-bf-site .sp-bf-cs-badge.sp-bf-cs-badge mark.kt-highlight::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fb7185;
	animation: sp-bf-pulse 1.6s ease-in-out infinite;
}

/* H1: fluid size (Kadence has no clamp), no wrap, gradient on "Coming Soon". */
body.sp-bf-site.sp-bf-site h1.sp-bf-cs-title {
	font-size: clamp(30px, 5.8vw, 68px);
	letter-spacing: -0.05em;
	white-space: nowrap;
}

body.sp-bf-site .sp-bf-cs-title mark {
	background: linear-gradient(180deg, #e9d5ff 0%, #a78bfa 100%);
	background-clip: text;
	color: transparent;
}

/* Notify form (Fluent form 9): pill with the field and the button inside. */
body.sp-bf-site .sp-bf-cs-form .fluentform {
	width: min(500px, 100%);
	margin: 0 auto;
}

/* The pill is the form: Fluent puts !important styles on the fieldset. */
body.sp-bf-site .sp-bf-cs-form .frm-fluent-form {
	position: relative;
	padding: 6px;
	border-radius: 999px;
	background: #151029;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
	transition: box-shadow 200ms ease;
}

body.sp-bf-site .sp-bf-cs-form .frm-fluent-form:focus-within {
	box-shadow: inset 0 0 0 1px #c4b5fd, 0 0 0 3px rgba(124, 58, 237, 0.3);
}

body.sp-bf-site .sp-bf-cs-form .frm-fluent-form fieldset {
	display: flex;
	align-items: center;
	gap: 6px;
}

body.sp-bf-site .sp-bf-cs-form .ff-el-group {
	flex: 1;
	min-width: 0;
	margin: 0;
}

body.sp-bf-site .sp-bf-cs-form .ff-el-form-control {
	width: 100%;
	height: 48px;
	padding: 0 18px;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font: inherit;
	font-size: 16px;
	outline: none;
}

body.sp-bf-site .sp-bf-cs-form .ff-el-form-control:focus {
	background: transparent;
	color: #fff;
}

body.sp-bf-site .sp-bf-cs-form .ff-el-form-control::placeholder {
	color: #99a1af;
}

body.sp-bf-site .sp-bf-cs-form .ff_submit_btn_wrapper {
	flex: none;
	margin: 0;
}

body.sp-bf-site .sp-bf-cs-form .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	margin: 0;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: #7c3aed;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 30px -10px rgba(124, 58, 237, 0.8);
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	transition: background 180ms ease, transform 240ms var(--sp-bf-ease-up);
}

body.sp-bf-site .sp-bf-cs-form .ff-btn-submit::after {
	content: "→";
}

@media (min-width: 420px) {

	body.sp-bf-site .sp-bf-cs-form .ff-btn-submit {
		gap: 4px;
		padding: 0 26px;
	}

	body.sp-bf-site .sp-bf-cs-form .ff-btn-submit::after {
		content: "me →";
	}
}

body.sp-bf-site .sp-bf-cs-form .ff-btn-submit:hover {
	background: #6d28d9;
	transform: translateY(-1px);
}

body.sp-bf-site .sp-bf-cs-form .ff-btn-submit:active {
	transform: scale(0.97);
}

/* Validation note under the pill. */
body.sp-bf-site .sp-bf-cs-form .ff-el-is-error .error {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	margin-top: 10px;
	text-align: center;
	color: #fda4af;
	font-size: 13px;
	line-height: 1.4;
}

/* Note under the pill; hidden once the success card shows. */
body.sp-bf-site .sp-bf-cs-form:has(.ff-message-success) .sp-bf-cs-note {
	display: none;
}

/* Success card (replaces the form). */
body.sp-bf-site .sp-bf-cs-form .ff-message-success {
	display: flex;
	align-items: center;
	gap: 14px;
	width: min(500px, 100%);
	margin: 0 auto;
	padding: 11px 18px;
	border: 0;
	border-radius: 18px;
	background: #151029;
	box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.45);
	color: #d1d5dc;
	font-size: 14px;
	text-align: left;
	overflow-wrap: anywhere;
}

body.sp-bf-site .sp-bf-cs-form .ff-message-success::before {
	content: "";
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #7c3aed url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	box-shadow: 0 10px 24px -8px rgba(124, 58, 237, 0.9);
}

body.sp-bf-site .sp-bf-cs-form .ff-message-success p {
	margin: 0;
}

body.sp-bf-site .sp-bf-cs-form .ff-message-success strong {
	color: #fff;
	font-size: 16px;
	font-weight: 600;
}

@media (max-width: 480px) {

	body.sp-bf-site .sp-bf-cs-badge.sp-bf-cs-badge {
		gap: 12px;
		max-width: calc(100vw - 48px);
		padding-left: 20px;
		font-size: 14.5px;
		white-space: nowrap;
	}

	body.sp-bf-site .sp-bf-cs-badge mark.kt-highlight {
		flex: none;
	}
}

@media (max-width: 359px) {

	body.sp-bf-site .sp-bf-cs-badge.sp-bf-cs-badge {
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {

	body.sp-bf-site .sp-bf-cs-hero::before,
	body.sp-bf-site .sp-bf-cs-hero::after,
	body.sp-bf-site .sp-bf-cs-hero > .kt-row-column-wrap::before,
	body.sp-bf-site .sp-bf-cs-reveal,
	body.sp-bf-site .sp-bf-cs-badge.sp-bf-cs-badge mark.kt-highlight::before {
		animation: none;
	}
}