@property --bf-fb { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --bf-compare-tt { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --bf-compare-tb { syntax: "<length>"; inherits: false; initial-value: 0px; }

.bf-compare,
#top #wrap_all .bf-compare.bf-compare {
	--asc: 0.96875;
	--desc: 0.2412109375;
	--cap: 0.7275390625;
	--asc-t: var(--asc);
	--desc-t: var(--desc);
	--cap-t: var(--cap);

	--bf-compare-font: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--bf-compare-mt: 0px;
	--bf-compare-mb: 0px;
	--bf-compare-gap-max: 8px;
	--bf-compare-pad-max: 64px;
	--bf-compare-block-gap-max: 64px;
	--bf-compare-colmin: 360px;
	--bf-compare-radius: 8px;
	--bf-compare-pill-radius: 4px;
	--bf-compare-bullet-gap: 8px;
	--bf-compare-bg: rgba(232, 232, 232, 0.4);
	--bf-compare-bg: color-mix(in srgb, #E8E8E8 40%, transparent);
	--bf-compare-bg-hover: #FFFFFF;
	--bf-compare-heading-colour: #1C1C1C;
	--bf-compare-text-colour: #595959;
	--bf-compare-dur: 300ms;
	--bf-compare-pill-bg: #024EA3;
	--bf-compare-pill-fg: #FFFFFF;
	--bf-compare-shadow:
		-25px 12px 30.5px rgba(0, 0, 0, 0.08),
		-100px 49px 56px rgba(0, 0, 0, 0.07),
		-226px 110px 75.5px rgba(0, 0, 0, 0.04),
		-401px 196px 89.5px rgba(0, 0, 0, 0.01),
		-627px 306px 97.5px rgba(0, 0, 0, 0);

	--bf-compare-mt-now: var(--bf-compare-mt);
	--bf-compare-dur-now: var(--bf-compare-dur);

	container-type: inline-size;
	box-sizing: border-box;
	display: block;
	margin-block-start: var(--bf-compare-mt-now);
	margin-block-end: var(--bf-compare-mb);
	margin-inline-start: 0;
	margin-inline-end: 0;
	font-family: var(--bf-compare-font);
	font-style: normal;
	letter-spacing: 0px;
	color: var(--bf-compare-text-colour);
}

.bf-compare .bf-compare__grid,
#top #wrap_all .bf-compare .bf-compare__grid {
	--bf-compare-gap: min(var(--bf-compare-gap-max), max(4px, 0.5681818cqi));
	--bf-compare-pad: min(var(--bf-compare-pad-max), max(32px, 4.5454545cqi));
	--bf-compare-block-gap: min(var(--bf-compare-block-gap-max), max(32px, 4.5454545cqi));

	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	column-gap: var(--bf-compare-gap);
	row-gap: var(--bf-compare-gap);
	font-family: var(--bf-compare-font);
	font-style: normal;
	letter-spacing: 0px;
	color: var(--bf-compare-text-colour);
}

.bf-compare .bf-compare__col,
#top #wrap_all .bf-compare .bf-compare__col {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex-grow: 1;
	flex-shrink: 1;
	min-width: min(100%, var(--bf-compare-colmin));
	row-gap: var(--bf-compare-block-gap);
	padding-block-start: var(--bf-compare-pad);
	padding-block-end: var(--bf-compare-pad);
	padding-inline-start: var(--bf-compare-pad);
	padding-inline-end: var(--bf-compare-pad);
	border-radius: var(--bf-compare-radius);
	background-color: var(--bf-compare-bg);
	box-shadow: none;
	transition-property: background-color, box-shadow;
	transition-duration: var(--bf-compare-dur-now);
	transition-timing-function: ease;
	font-family: var(--bf-compare-font);
	font-style: normal;
	letter-spacing: 0px;
	color: var(--bf-compare-text-colour);
}

.bf-compare--n1 .bf-compare__col,
#top #wrap_all .bf-compare--n1 .bf-compare__col {
	flex-basis: 100%;
}

.bf-compare--n2 .bf-compare__col,
#top #wrap_all .bf-compare--n2 .bf-compare__col {
	flex-basis: calc(50% - var(--bf-compare-gap) / 2);
}

.bf-compare .bf-compare__col:hover,
#top #wrap_all .bf-compare .bf-compare__col:hover {
	background-color: var(--bf-compare-bg-hover);
}

.bf-compare--lift .bf-compare__col:hover,
#top #wrap_all .bf-compare--lift .bf-compare__col:hover {
	box-shadow: var(--bf-compare-shadow);
}

.bf-compare--flat .bf-compare__col:hover,
#top #wrap_all .bf-compare--flat .bf-compare__col:hover {
	box-shadow: none;
}

.bf-compare .bf-compare__pill,
#top #wrap_all .bf-compare .bf-compare__pill {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	max-width: 100%;
	padding-block-start: 6px;
	padding-block-end: 6px;
	padding-inline-start: 10px;
	padding-inline-end: 10px;
	border-radius: var(--bf-compare-pill-radius);
	background-color: var(--bf-compare-pill-bg);
	font-family: var(--bf-compare-font);
	font-style: normal;
	letter-spacing: 0px;
	color: var(--bf-compare-pill-fg);
}

.bf-compare .bf-compare__pill-label,
#top #wrap_all .bf-compare .bf-compare__pill-label {
	--fs: 16px;
	--lh: 24px;
	display: block;
	font-family: var(--bf-compare-font);
	font-size: var(--fs);
	font-style: normal;
	font-weight: 400;
	line-height: var(--lh);
	letter-spacing: 0px;
	color: var(--bf-compare-pill-fg);
	text-decoration-line: none;
}

.bf-compare .bf-compare__heading,
#top #wrap_all .bf-compare .bf-compare__heading {
	--fs: 24px;
	--lh: 28px;
	display: block;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-block-start: 0;
	padding-block-end: 0;
	padding-inline-start: 0;
	padding-inline-end: 0;
	font-family: var(--bf-compare-font);
	font-size: var(--fs);
	font-style: normal;
	font-weight: 500;
	line-height: var(--lh);
	letter-spacing: -0.02em;
	color: var(--bf-compare-heading-colour);
}

.bf-compare .bf-compare__list,
#top #wrap_all .bf-compare .bf-compare__list {
	box-sizing: border-box;
	display: flow-root;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-block-start: 0;
	padding-block-end: 0;
	padding-inline-start: 0;
	padding-inline-end: 0;
	list-style-type: disc;
	list-style-position: outside;
	font-family: var(--bf-compare-font);
	font-style: normal;
	letter-spacing: 0px;
	color: var(--bf-compare-text-colour);
}

.bf-compare .bf-compare__item,
#top #wrap_all .bf-compare .bf-compare__item {
	--fs: 16px;
	--lh: 24px;
	display: list-item;
	margin-inline-start: 24px;
	margin-inline-end: 0;
	padding-block-start: 0;
	padding-block-end: 0;
	padding-inline-start: 0;
	padding-inline-end: 0;
	font-family: var(--bf-compare-font);
	font-size: var(--fs);
	font-style: normal;
	font-weight: 400;
	line-height: var(--lh);
	letter-spacing: 0px;
	color: var(--bf-compare-text-colour);
}

.bf-compare .bf-compare__item + .bf-compare__item,
#top #wrap_all .bf-compare .bf-compare__item + .bf-compare__item {
	margin-block-start: var(--bf-compare-bullet-gap);
}

.bf-compare .bf-compare-t,
.bf-compare .bf-compare-ts,
.bf-compare .bf-compare-te,
#top #wrap_all .bf-compare .bf-compare-t,
#top #wrap_all .bf-compare .bf-compare-ts,
#top #wrap_all .bf-compare .bf-compare-te {
	--lead: calc((var(--lh) - (var(--asc-t) + var(--desc-t)) * var(--fs)) / 2);
	--bf-compare-tt: calc(var(--bf-fb) * (var(--lead) + (var(--asc-t) - var(--cap-t)) * var(--fs)));
	--bf-compare-tb: calc(var(--bf-fb) * (var(--lead) + var(--desc-t) * var(--fs)));
	text-box-edge: cap alphabetic;
}

.bf-compare .bf-compare-t,
#top #wrap_all .bf-compare .bf-compare-t {
	text-box-trim: trim-both;
	text-box: trim-both cap alphabetic;
	margin-block-start: calc(-1 * var(--bf-compare-tt));
	margin-block-end: calc(-1 * var(--bf-compare-tb));
}

.bf-compare .bf-compare-ts,
#top #wrap_all .bf-compare .bf-compare-ts {
	text-box-trim: trim-start;
	text-box: trim-start cap alphabetic;
	margin-block-start: calc(-1 * var(--bf-compare-tt));
}

.bf-compare .bf-compare-te,
#top #wrap_all .bf-compare .bf-compare-te {
	text-box-trim: trim-end;
	text-box: trim-end cap alphabetic;
	margin-block-end: calc(-1 * var(--bf-compare-tb));
}

.bf-compare .bf-compare-ts.bf-compare-te,
#top #wrap_all .bf-compare .bf-compare-ts.bf-compare-te {
	text-box-trim: trim-both;
	text-box: trim-both cap alphabetic;
}

@supports not ((text-box: trim-both cap alphabetic) or (text-box-trim: trim-both)) {
	.bf-compare,
	#top #wrap_all .bf-compare.bf-compare {
		--bf-fb: 1;
	}
}

@media (min-width: 900px) and (max-width: 1199px) {
	.bf-compare--scale,
	#top #wrap_all .bf-compare--scale.bf-compare--scale {
		--bf-compare-mt-now: calc(var(--bf-compare-mt) * 0.75);
	}
}

@media (max-width: 899px) {
	.bf-compare--scale,
	#top #wrap_all .bf-compare--scale.bf-compare--scale {
		--bf-compare-mt-now: calc(var(--bf-compare-mt) * 0.6);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bf-compare,
	#top #wrap_all .bf-compare.bf-compare {
		--bf-compare-dur-now: 0s;
	}
}

@media (hover: none) {
	.bf-compare .bf-compare__col,
	#top #wrap_all .bf-compare .bf-compare__col {
		background-color: var(--bf-compare-bg-hover);
	}

	.bf-compare--lift .bf-compare__col,
	#top #wrap_all .bf-compare--lift .bf-compare__col {
		box-shadow: var(--bf-compare-shadow);
	}

	.bf-compare--flat .bf-compare__col,
	#top #wrap_all .bf-compare--flat .bf-compare__col {
		box-shadow: none;
	}
}