/**
 * Firm Comparison New — page styles
 *
 * Scoped to body.firm-comparison-new to avoid leaking into other pages.
 * Loaded only on page-firm-comparsion-new.php via wp_enqueue_style.
 */

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root {
	--fcn-black: #141313;
	--fcn-bg: #141313;
	--fcn-bg-dark: #191817;
	--fcn-white: #fff;
	--fcn-muted: #b3afa9;
	--fcn-orange: #f3981f;
	--fcn-orange-dark: #e57625;
	--fcn-orange-border: #d96c00;
	--fcn-cta-gradient: linear-gradient(105.97deg, #f3981f 0%, #e57625 100%);
	--fcn-cta-shadow: 0 2px 21.2px rgba(243, 152, 31, 0.39);
	--fcn-red: #ff0000;
	--fcn-gray: #979797;
	--fcn-gray-dark: #8a8a8a;
	--fcn-badge-bg: #201914;
	--fcn-badge-border: #57221e;
	--fcn-gold: #feb868;
	--fcn-card-bg: #211c14;
	--fcn-card-border: rgba(255, 255, 255, 0.2);
	--fcn-title-gradient: linear-gradient(90deg, #ffc271 0%, #ff9242 100%);
	--fcn-radius: 12px;
	--fcn-radius-sm: 7px;

	--fcn-ct-green: #60a718;
	--fcn-ct-red: #c06767;
	--fcn-ct-header-bg: #251e12;
	--fcn-ct-row-border: rgba(116, 116, 116, 0.2);
	--fcn-ct-col-border: #2c2a2a;
	--fcn-ct-divider-bg: rgba(255, 191, 0, 0.05);
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
body.firm-comparison-new {
	margin: 0;
	background: var(--fcn-bg);
	font-family: "Figtree", sans-serif;
	color: var(--fcn-white);
}

body.firm-comparison-new *,
body.firm-comparison-new *::before,
body.firm-comparison-new *::after {
	box-sizing: border-box;
}

body.firm-comparison-new img {
	max-width: 100%;
	height: auto;
}

body.firm-comparison-new .wrapper {
	max-width: calc(var(--fcn-wrapper-max, 1200px) + 24px);
	padding-inline: 12px;
	margin-inline: auto;
}

/*--------------------------------------------------------------
# Headings
--------------------------------------------------------------*/
body.firm-comparison-new .fcn-heading-lg,
body.firm-comparison-new .fcn-heading-sm {
	text-align: center;
	color: var(--fcn-white);

	span {
		background: var(--fcn-title-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}
}

body.firm-comparison-new .fcn-heading-lg {
	font-weight: 600;
	font-size: 40px;
	line-height: 1;

	@media (min-width: 992px) {
		font-size: 68px;
	}
}

body.firm-comparison-new .fcn-heading-sm {
	font-weight: 400;
	font-size: 40px;
	line-height: 1;
	text-shadow: 0 14px 24px rgba(0, 0, 0, 0.6);

	@media (min-width: 992px) {
		font-size: 47px;
	}
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
body.firm-comparison-new .fcn-header {
	position: relative;
	padding-block: 14px;
	background: var(--fcn-bg);

	&.is-menu-open {
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0px);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 200;
	}

	@media (min-width: 992px) {
		padding-block: 30px;
	}

	.wrapper {
		--fcn-wrapper-max: 800px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}

body.firm-comparison-new .fcn-header__logo {
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

body.firm-comparison-new .fcn-header__logo-icon {
	display: block;
	width: 39px;
	height: 39px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	object-fit: cover;

	@media (min-width: 992px) {
		display: none;
	}
}

body.firm-comparison-new .fcn-header__logo-full {
	display: none;
	width: 62px;
	height: auto;

	@media (min-width: 992px) {
		display: block;
	}
}

body.firm-comparison-new .fcn-header__nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px;
	background: var(--fcn-bg);
	visibility: hidden;
	opacity: 0;
	transition:
		opacity 0.25s ease,
		visibility 0.25s ease;

	&.is-open {
		visibility: visible;
		opacity: 1;
	}

	@media (min-width: 992px) {
		position: static;
		flex-direction: row;
		gap: 30px;
		padding: 0;
		background: none;
		visibility: visible;
		opacity: 1;
		transition: none;
	}

	a {
		font-weight: 300;
		font-size: 24px;
		line-height: 1.5;
		color: var(--fcn-white);
		text-decoration: none;
		white-space: nowrap;
		transform: translateY(10px);
		transition:
			opacity 0.2s,
			transform 0.3s ease;

		@media (min-width: 992px) {
			font-size: 16px;
			transform: none;
		}
	}

	&.is-open a {
		transform: translateY(0);

		&:hover,
		&:focus-visible {
			opacity: 0.7;
			color: var(--fcn-white);
			text-decoration: none;
		}
	}
}

body.firm-comparison-new .fcn-header__nav a.fcn-header__nav-cta {
	display: none;
	margin-top: 8px;
	font-weight: 600;
}

body.firm-comparison-new .fcn-header__nav.is-open a.fcn-header__nav-cta {
	display: inline-flex;
}

body.firm-comparison-new .fcn-header .btn-secondary {
	display: none;

	@media (min-width: 992px) {
		display: inline-flex;
	}
}

@media (min-width: 992px) {
	body.firm-comparison-new .fcn-header__nav-cta {
		display: none !important;
	}
}

body.firm-comparison-new .fcn-header__burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 38px;
	padding: 0;
	position: relative;
	z-index: 1;
	border: none;
	border-radius: 10px;
	background: var(--fcn-bg);
	box-shadow: none;
	overflow: hidden;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		padding: 1px;
		background: linear-gradient(
			70.53deg,
			rgba(243, 152, 31, 0.5) 0%,
			rgba(116, 116, 116, 0.3) 50%,
			rgba(255, 255, 255, 0.08) 100%
		);
		-webkit-mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
		mask-composite: exclude;
		pointer-events: none;
	}
	cursor: pointer;

	@media (min-width: 992px) {
		display: none;
	}

	span {
		display: block;
		width: 20px;
		height: 2.5px;
		background: var(--fcn-orange-dark);
		border-radius: 2px;
		transition:
			transform 0.3s,
			opacity 0.3s;
	}

	&.is-active {
		span:nth-child(1) {
			transform: translateY(7.5px) rotate(45deg);
		}
		span:nth-child(2) {
			opacity: 0;
		}
		span:nth-child(3) {
			transform: translateY(-7.5px) rotate(-45deg);
		}
	}
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
body.firm-comparison-new .btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 28px;
	border: none;
	border-radius: var(--fcn-radius);
	background: var(--fcn-cta-gradient);
	box-shadow: var(--fcn-cta-shadow);
	font-family: "Figtree", sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	color: var(--fcn-black);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: box-shadow 0.2s;

	&:hover,
	&:focus-visible {
		box-shadow: 0 2px 30px rgba(243, 152, 31, 0.6);
		color: var(--fcn-black);
		text-decoration: none;
	}
}

body.firm-comparison-new .btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 5px 10px;
	border: 1px solid var(--fcn-orange-border);
	border-radius: var(--fcn-radius-sm);
	background: var(--fcn-orange-dark);
	font-family: "Figtree", sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	color: var(--fcn-white);
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.2s;

	&:hover,
	&:focus-visible {
		box-shadow: 0 2px 20px rgba(243, 152, 31, 0.45);
		color: var(--fcn-white);
		text-decoration: none;
	}

	.arrow {
		font-weight: 400;
	}
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
body.firm-comparison-new .fcn-hero {
	margin-top: 28px;
	margin-bottom: 50px;
	text-align: center;

	.wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	@media (min-width: 992px) {
		margin-top: 60px;

		.wrapper {
			--fcn-wrapper-max: 809px;
		}
	}
}

body.firm-comparison-new .fcn-hero__title {
	margin: 0 0 16px;
	font-weight: 400;
	font-size: 54px;
	line-height: 1.1;
	color: var(--fcn-white);
	text-shadow: 0 14px 24px rgba(0, 0, 0, 0.6);

	@media (min-width: 992px) {
		margin-bottom: 20px;
		font-size: 68px;
		line-height: 1;
	}
}

body.firm-comparison-new .fcn-hero__badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding: 14px 20px 20px;
	background: var(--fcn-badge-bg);
	border: 1px solid var(--fcn-badge-border);
	border-radius: 20px;

	@media (min-width: 992px) {
		flex-direction: row;
		padding: 10px 20px;
		border-radius: 30px;
	}
}

body.firm-comparison-new .fcn-hero__badge-icon {
	flex-shrink: 0;
	width: 32px;
	height: 30px;

	@media (min-width: 992px) {
		width: 25px;
		height: 23px;
	}
}

body.firm-comparison-new .fcn-hero__badge p {
	max-width: 275px;
	margin: 0;
	font-weight: 600;
	font-size: 24px;
	line-height: 1;
	color: var(--fcn-white);

	@media (min-width: 992px) {
		max-width: none;
		font-size: 26px;
	}
}

body.firm-comparison-new .fcn-hero__badge-highlight {
	color: var(--fcn-red);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.09em;
}

body.firm-comparison-new .fcn-hero__desc {
	max-width: 323px;
	margin: 0 0 26px;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.1;
	color: var(--fcn-gray);

	strong {
		font-weight: 400;
		color: var(--fcn-white);
	}

	@media (min-width: 992px) {
		max-width: 705px;
		margin-bottom: 32px;
		font-size: 22px;
		line-height: 1.2;
	}
}

/*--------------------------------------------------------------
# Trust Bar
--------------------------------------------------------------*/
body.firm-comparison-new .fcn-trust-bar {
	margin-bottom: 0;

	@media (min-width: 768px) {
		margin-bottom: 0;
	}

	.wrapper {
		--fcn-wrapper-max: 800px;
	}
}

body.firm-comparison-new .fcn-trust-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 13px;

	@media (min-width: 768px) {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: 16px;
	}

	p {
		margin-bottom: 0;
	}
}

body.firm-comparison-new .fcn-hero-card {
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: linear-gradient(
		165deg,
		rgba(255, 255, 255, 0.04) 0%,
		rgba(255, 255, 255, 0.01) 100%
	);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* Combined card (mobile) */
body.firm-comparison-new .fcn-hero-card-combined {
	.fcn-hero-card-stats-row {
		display: flex;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);

		.fcn-hero-stat {
			flex: 1;
			position: relative;
			padding: 15px 10px;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 4px;

			&::after {
				content: "";
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 90%;
				width: 1px;
				background: linear-gradient(
					180deg,
					rgba(255, 255, 255, 0) 0%,
					rgba(255, 255, 255, 0.2) 50%,
					rgba(255, 255, 255, 0) 100%
				);
			}

			&:last-child::after {
				display: none;
			}

			p {
				font-size: 11px;
				line-height: 1.2;
				color: var(--fcn-muted);
				margin: 0;

				span {
					display: block;
					font-size: 16px;
					font-weight: 600;
					color: var(--fcn-white);
					margin-bottom: 2px;
				}
			}

			.fcn-hero-stat-icon {
				width: 20px;
				height: 20px;
				margin-bottom: 2px;
			}
		}

		.fcn-hero-stat-trustpilot {
			flex: 1.2;
			padding: 10px;

			.trustpilot-widget {
				height: 100px;
				transform: scale(0.85);
				transform-origin: center;
			}
		}
	}
}

body.firm-comparison-new .fcn-hero-card-partnership-mobile {
	padding: 16px;
	display: flex;
	gap: 20px;
	text-decoration: none;
	align-items: start;
	color: inherit;

	&:hover,
	&:focus-visible {
		color: inherit;
		text-decoration: none;
	}

	.fcn-hero-partnership-logos {
		display: flex;
		align-items: center;
		flex-shrink: 0;

		img {
			width: 78px;
		}
	}

	h2 {
		font-size: 14px;
		line-height: 1.2;
		font-weight: 600;
		color: #e3e0e0;
		margin-bottom: 4px;
	}

	p {
		font-size: 12px;
		line-height: 1.4;
		color: var(--fcn-muted);

		strong {
			color: var(--fcn-white);
			font-weight: 600;
		}
	}
}

/* Stats card (desktop) */
body.firm-comparison-new .fcn-hero-card-stats {
	height: 124px;
	grid-template-columns: 1.1fr 1fr 1fr;

	.fcn-hero-stat {
		position: relative;
		padding: 10px 15px;
		text-align: center;

		&::after {
			content: "";
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			height: 75%;
			width: 1px;
			background: linear-gradient(
				269.86deg,
				rgba(116, 116, 116, 0.2) 0.01%,
				rgba(255, 255, 255, 0.2) 99.99%
			);
		}

		&:last-child::after {
			display: none;
		}

		p {
			font-size: 13px;
			line-height: 1;
			font-weight: 500;
			color: var(--fcn-white);
		}

		span {
			display: block;
			font-size: 20px;
			font-weight: 600;
			line-height: 1;
			color: var(--fcn-white);
		}
	}

	.fcn-hero-stat-trustpilot {
		.trustpilot-widget {
			max-height: 85px;
		}
	}

	.fcn-hero-stat-icon {
		width: 20px;
		height: 20px;
		margin-bottom: 5px;
	}

	.fcn-hero-stat-customers,
	.fcn-hero-stat-rewards {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 6px;
	}

	.fcn-hero-stat-customers p span,
	.fcn-hero-stat-rewards p span {
		margin-bottom: 4px;
	}

	.fcn-hero-stat-rewards p {
		max-width: 145px;
	}

	.fcn-hero-stat-customers p {
		max-width: 140px;
	}

	@media (min-width: 992px) {
		.fcn-hero-stat {
			p {
				font-size: 16px;
			}

			span {
				font-size: 24px;
			}
		}

		.fcn-hero-stat-icon {
			width: 30px;
			height: 30px;
		}
	}
}

/* Partnership card (desktop) */
body.firm-comparison-new .fcn-hero-card-partnership {
	padding: 17px 20px;
	flex-direction: column;
	gap: 11px;
	transition: border-color 0.2s ease;
	height: 124px;
	text-decoration: none;
	color: inherit;

	&:hover,
	&:focus-visible {
		border-color: rgba(243, 152, 31, 0.38);
		text-decoration: none;
		color: inherit;
	}

	.fcn-hero-partnership-logo {
		width: 85px;
		height: auto;
	}

	h2 {
		font-size: 12px;
		line-height: 1.2;
		font-weight: 600;
		color: #e3e0e0;
		margin-bottom: 6px;
	}

	p {
		font-size: 7px;
		line-height: 1.4;
		color: var(--fcn-muted);
		max-width: 290px;
	}

	@media (min-width: 992px) {
		h2 {
			font-size: 15px;
		}

		p {
			font-size: 8px;
		}
	}
}

body.firm-comparison-new .fcn-hero-partnership-content {
	margin-top: auto;
}

/*--------------------------------------------------------------
# Reasons
--------------------------------------------------------------*/
body.firm-comparison-new .fcn-reasons {
	padding-top: 80px;
	padding-bottom: 80px;
	text-align: center;
	background: url("../img/benefits-bg_mobile.webp") center / cover no-repeat;

	@media (min-width: 992px) {
		padding-top: 60px;
		padding-bottom: 105px;
		background-image: url("../img/benefits-bg.webp");
		background-size: 100% 100%;
	}

	.wrapper {
		--fcn-wrapper-max: 1014px;
	}
}

body.firm-comparison-new .fcn-reasons__title {
	max-width: 301px;
	margin: 0 auto 20px;

	@media (min-width: 992px) {
		max-width: 575px;
		margin-bottom: 50px;
	}
}

body.firm-comparison-new .fcn-reasons__cards {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;

	@media (min-width: 992px) {
		flex-direction: row;
		gap: 36px;
		justify-content: center;
	}
}

body.firm-comparison-new .fcn-reasons__card {
	position: relative;
	width: 100%;
	max-width: 312px;
	min-height: 154px;

	@media (min-width: 992px) {
		max-width: none;
		flex: 1;
	}
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 20px 30px;
	border-radius: 10px;
	border: none;
	background:
		linear-gradient(0deg, var(--fcn-card-bg) 0%, var(--fcn-card-bg) 100%),
		linear-gradient(
			180deg,
			rgba(123, 84, 8, 0.15) 0%,
			rgba(29, 29, 27, 0.15) 100%
		);
	overflow: hidden;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		padding: 1px;
		background: linear-gradient(
			to bottom left,
			#f3981f 0%,
			rgba(116, 116, 116, 0.2) 50%,
			rgba(255, 255, 255, 0.2) 100%
		);
		-webkit-mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
		mask-composite: exclude;
		pointer-events: none;
	}

	&:nth-child(2)::before {
		background: linear-gradient(
			to bottom,
			#f3981f 0%,
			rgba(116, 116, 116, 0.2) 50%,
			rgba(255, 255, 255, 0.2) 100%
		);
	}

	&:nth-child(3)::before {
		background: linear-gradient(
			to bottom right,
			#f3981f 0%,
			rgba(116, 116, 116, 0.2) 50%,
			rgba(255, 255, 255, 0.2) 100%
		);
	}
}

body.firm-comparison-new .fcn-reasons__card-title {
	margin: 0;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.1;
	color: var(--fcn-white);
}

body.firm-comparison-new .fcn-reasons__card-desc {
	max-width: 252px;
	margin: 0;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	color: var(--fcn-white);

	span {
		color: var(--fcn-gold);
	}
}

/*--------------------------------------------------------------
# Comparison
--------------------------------------------------------------*/
body.firm-comparison-new .fcn-comparison {
	margin-block: 0;
}

body.firm-comparison-new .fcn-comparison .wrapper {
	--fcn-wrapper-max: 800px;
	padding-inline: 0;

	@media (min-width: 768px) {
		padding-inline: 12px;
	}
}

body.firm-comparison-new .fcn-comparison__title {
	max-width: 400px;
	margin-inline: auto;
	text-align: center;
	margin-bottom: 25px;

	@media (min-width: 768px) {
		margin-bottom: 35px;
	}
}

/* Tabs */
body.firm-comparison-new .fcn-ct-tabs {
	display: flex;
	justify-content: center;
	padding-right: 10px;
	margin-bottom: 30px;

	@media (min-width: 768px) {
		margin-bottom: 35px;
	}
}

body.firm-comparison-new .fcn-ct-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 30px;
	border-radius: var(--fcn-radius-sm);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.1;
	text-align: center;
	cursor: pointer;
	transition:
		background-color 0.2s,
		color 0.2s;

	@media (min-width: 768px) {
		font-size: 16px;
		padding: 10px 40px;
	}
}

body.firm-comparison-new .fcn-ct-tab:first-child {
	position: relative;
	z-index: 2;
	margin-right: -10px;
	background: var(--fcn-orange-dark);
	border: 1px solid var(--fcn-orange-border);
	color: var(--fcn-white);
	font-weight: 600;
}

body.firm-comparison-new .fcn-ct-tab:last-child {
	position: relative;
	z-index: 1;
	padding-left: 40px;
	background: rgba(229, 118, 37, 0.04);
	border: 1px solid rgba(217, 108, 0, 0.1);
	color: var(--fcn-gray);
	font-weight: 400;

	@media (min-width: 768px) {
		padding-left: 50px;
	}
}

body.firm-comparison-new .fcn-ct-tab.active:first-child {
	background: var(--fcn-orange-dark);
	border-color: var(--fcn-orange-border);
	color: var(--fcn-white);
	font-weight: 600;
}

body.firm-comparison-new .fcn-ct-tab.active:last-child {
	z-index: 2;
	padding-left: 40px;
	padding-right: 40px;
	background: var(--fcn-orange-dark);
	border-color: var(--fcn-orange-border);
	color: var(--fcn-white);
	font-weight: 600;
}

body.firm-comparison-new .fcn-ct-tab:not(.active):first-child {
	z-index: 1;
	padding-left: 40px;
	padding-right: 40px;
	margin-right: -10px;
	background: rgba(229, 118, 37, 0.04);
	border-color: rgba(217, 108, 0, 0.1);
	color: var(--fcn-gray);
	font-weight: 400;

	@media (min-width: 768px) {
		padding-right: 50px;
	}
}

body.firm-comparison-new .fcn-ct-tab:not(.active):last-child {
	z-index: 1;
	padding-left: 40px;
	background: rgba(229, 118, 37, 0.04);
	border-color: rgba(217, 108, 0, 0.1);
	color: var(--fcn-gray);
	font-weight: 400;

	@media (min-width: 768px) {
		padding-left: 50px;
	}
}

/* Scroll container */
body.firm-comparison-new .fcn-ct-scroll {
	overflow-x: auto;
	overflow-y: clip;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}

	@media (min-width: 768px) {
		overflow: visible;
	}
}

body.firm-comparison-new .fcn-ct-group > .fcn-ct-scroll:first-child {
	border-radius: 10px 10px 0 0;

	@media (min-width: 768px) {
		border-radius: 0;
	}
}

/* Table */
body.firm-comparison-new .fcn-ct {
	width: 100%;
	min-width: 530px;
	border-collapse: separate;
	border-spacing: 0;

	@media (min-width: 768px) {
		min-width: 0;
	}
}

/* Header row */
body.firm-comparison-new .fcn-ct__header {
	background: var(--fcn-ct-header-bg);
}

body.firm-comparison-new .fcn-ct__hcell {
	padding: 15px 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	white-space: nowrap;
	color: var(--fcn-white);
	vertical-align: middle;
	min-width: 140px;
	width: 140px;

	@media (min-width: 768px) {
		padding: 18px 20px;
		font-size: 16px;
		min-width: auto;
		width: auto;
	}
}

body.firm-comparison-new .fcn-ct__hcell:first-child {
	border-radius: 10px 0 0 10px;
	text-align: left;
	text-transform: uppercase;
	min-width: 90px;
	width: 90px;
	position: sticky;
	left: 0;
	z-index: 3;
	background: var(--fcn-ct-header-bg);

	@media (min-width: 768px) {
		width: 28%;
		min-width: auto;
		position: static;
		z-index: auto;
	}
}

body.firm-comparison-new .fcn-ct__hcell:last-child {
	border-radius: 0 10px 10px 0;
}

body.firm-comparison-new .fcn-ct__hcell span {
	display: block;
}

body.firm-comparison-new .fcn-ct__hcell--highlight span {
	background: var(--fcn-title-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Data rows */
body.firm-comparison-new .fcn-ct__row td {
	padding: 15px 10px;
	border-bottom: 1px solid var(--fcn-ct-row-border);
	font-size: 14px;
	line-height: 1.1;
	vertical-align: middle;

	@media (min-width: 768px) {
		padding: 15px 20px;
		font-size: 16px;
		opacity: 0.9;
	}
}

body.firm-comparison-new .fcn-ct__label {
	text-align: left;
	color: var(--fcn-white);
	font-weight: 400;
	min-width: 90px;
	width: 90px;
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--fcn-bg);

	@media (min-width: 768px) {
		width: 28%;
		min-width: auto;
		position: static;
		z-index: auto;
		background: transparent;
	}
}

body.firm-comparison-new .fcn-ct__subtitle {
	display: block;
	font-style: italic;
	font-size: 12px;
	color: var(--fcn-gray);
	margin-top: 2px;

	@media (min-width: 768px) {
		font-size: 14px;
	}
}

body.firm-comparison-new .fcn-ct__cell {
	text-align: center;
	min-width: 140px;
	width: 140px;

	@media (min-width: 768px) {
		width: 24%;
		min-width: auto;
	}
}

body.firm-comparison-new .fcn-ct__cell--green {
	color: var(--fcn-ct-green);
}

body.firm-comparison-new .fcn-ct__cell--red {
	color: var(--fcn-ct-red);
}

/* Vertical column borders */
body.firm-comparison-new .fcn-ct__row td:nth-child(2) {
	border-left: 1px solid var(--fcn-ct-col-border);
	border-right: 1px solid var(--fcn-ct-col-border);
}

body.firm-comparison-new .fcn-ct__row td:nth-child(3) {
	border-right: 1px solid var(--fcn-ct-col-border);
}

/* Divider (block element between scroll containers) */
body.firm-comparison-new .fcn-ct__divider {
	background: var(--fcn-ct-divider-bg);
	border-radius: 10px;
	text-align: center;
	padding: 15px 20px;
}

body.firm-comparison-new .fcn-ct__divider-title {
	display: block;
	font-size: 22px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.3;
	background: var(--fcn-title-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

body.firm-comparison-new .fcn-ct__divider-subtitle {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--fcn-white);
	text-transform: capitalize;
}

/* Remove border-bottom on last row only when divider follows */
body.firm-comparison-new
	.fcn-ct-scroll:has(+ .fcn-ct__divider)
	.fcn-ct
	tbody
	tr:last-child
	td {
	border-bottom: none;
}

/* CTA button */
body.firm-comparison-new .fcn-comparison__cta {
	display: block;
	margin: 50px auto 0;
	text-align: center;
	width: fit-content;

	@media (min-width: 768px) {
		margin-top: 67px;
	}
}

/*--------------------------------------------------------------
# FAQ
--------------------------------------------------------------*/
body.firm-comparison-new .fcn-faq {
	margin-block: 80px;

	@media (min-width: 992px) {
		margin-block: 100px;
	}

	.wrapper {
		--fcn-wrapper-max: 800px;
	}
}

body.firm-comparison-new .fcn-faq__title {
	max-width: 642px;
	margin-inline: auto;
	text-align: center;
	margin-bottom: 30px;

	@media (min-width: 992px) {
		margin-bottom: 55px;
	}
}

body.firm-comparison-new .fcn-faq__item {
	background: rgba(25, 24, 23, 0.4);
	border: 1px solid rgba(44, 43, 42, 1);
	border-radius: var(--fcn-radius);
	margin-bottom: 10px;
	transition: border-color 0.3s ease;

	&:not(:has(.collapsed)) {
		border-color: rgba(127, 119, 114, 1);
	}

	@media (min-width: 768px) {
		margin-bottom: 16px;
	}
}

body.firm-comparison-new .fcn-faq__header {
	position: relative;
	z-index: 5;
	margin: 0;
}

body.firm-comparison-new .fcn-faq__button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;
	width: 100%;
	padding: 18px 20px;
	border: none;
	border-radius: 0 !important;
	background: transparent;
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.3;
	color: #fff;
	text-align: left;
	cursor: pointer;
	box-shadow: none;

	&::after {
		display: none;
	}

	@media (min-width: 768px) {
		gap: 30px;
		padding: 19px 24px;
	}
}

body.firm-comparison-new .fcn-faq__chevron {
	flex-shrink: 0;
	width: 10px;
	color: var(--fcn-muted);
	transition: all 0.3s ease;
}

body.firm-comparison-new .fcn-faq__button:not(.collapsed) .fcn-faq__chevron {
	rotate: 180deg;

	path {
		stroke: #e3e0e0;
	}
}

body.firm-comparison-new .fcn-faq__body {
	position: relative;
	padding: 20px;
	font-size: 16px;
	line-height: 170%;
	color: var(--fcn-muted);
	text-wrap: pretty;

	&::before {
		content: "";
		position: absolute;
		left: 20px;
		right: 20px;
		top: 0;
		height: 1px;
		background: rgba(44, 43, 42, 1);
		transition: all 0.3s ease;
	}

	@media (min-width: 768px) {
		padding-inline: 24px;

		&::before {
			left: 24px;
			right: 24px;
		}
	}
}

body.firm-comparison-new .fcn-faq__body p {
	margin: 0 0 10px;
	font-weight: 400;
	font-size: 16px;
	line-height: 170%;
	color: var(--fcn-gray-dark);
	text-align: left;
	text-wrap: pretty;

	&:last-of-type {
		margin-bottom: 0;
	}
}

body.firm-comparison-new .fcn-faq__body strong {
	color: var(--fcn-white);
	font-weight: inherit;
}

/* ==========================================================================
   Pricing
========================================================================== */

body.firm-comparison-new .fcn-pricing {
	margin-block: 80px;

	@media (min-width: 992px) {
		margin-block: 100px;
	}
}

body.firm-comparison-new .fcn-pricing__title {
	text-align: center;
	max-width: 642px;
	margin-inline: auto;
	text-align: center;
	margin-bottom: 84px;

	@media (min-width: 992px) {
		margin-bottom: 92px;
	}
}

/*--------------------------------------------------------------
# CTA
--------------------------------------------------------------*/
.fcn-cta {
	margin-block: 80px;
	text-align: center;

	@media (min-width: 992px) {
		margin-block: 100px;
	}

	.wrapper {
		--fcn-wrapper-max: 642px;
	}
}

.fcn-cta__main {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fcn-cta__title {
	margin-bottom: 20px;
	max-width: 266px;
	margin-inline: auto;

	@media (min-width: 992px) {
		max-width: 100%;
		margin-bottom: 30px;
	}
}

.fcn-cta__desc {
	max-width: 319px;
	margin-bottom: 20px;
	font-size: 18px;
	line-height: 1.2;
	color: var(--fcn-gray);

	@media (min-width: 992px) {
		max-width: 605px;
		font-size: 22px;
		margin-bottom: 30px;
	}

	strong {
		color: var(--fcn-white);
		font-weight: 400;
	}
}

.fcn-cta__links {
	max-width: 451px;
	margin-inline: auto;
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;

	@media (min-width: 992px) {
		margin-top: 80px;
	}
}

.fcn-cta__links-title {
	margin-bottom: 20px;
	font-size: 18px;
	line-height: 1.2;
	color: var(--fcn-gray);

	@media (min-width: 992px) {
		font-size: 22px;
	}

	strong {
		color: var(--fcn-white);
		font-weight: 400;
	}
}

.fcn-cta__links-list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	max-width: 320px;
	width: 100%;
}

.fcn-cta__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 21px;
	border: none;
	border-radius: var(--fcn-radius);
	box-shadow: 0 2px 21.2px rgba(243, 152, 31, 0.05);
	font-size: 18px;
	line-height: normal;
	color: #f2961f;
	text-decoration: none;
	transition:
		background 0.2s,
		color 0.2s;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		padding: 1px;
		background: linear-gradient(
			to top right,
			rgba(243, 152, 31, 0.4) 0%,
			rgba(116, 116, 116, 0.28) 50%,
			rgba(255, 255, 255, 0.08) 100%
		);
		-webkit-mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
		mask-composite: exclude;
		pointer-events: none;
	}

	&:hover {
		background: var(--fcn-orange);
		color: var(--fcn-black);
	}
}

/*--------------------------------------------------------------
# Legal
--------------------------------------------------------------*/
body.firm-comparison-new .legal {
	margin-block: 80px;

	@media (min-width: 768px) {
		margin-block: 100px;
	}

	.legal-inner {
		max-width: 700px;
		margin-inline: auto;
	}

	.legal-label {
		font-size: 14px;
		line-height: 170%;
		color: var(--fcn-white);
		margin-bottom: 10px;
		font-style: normal;

		@media (min-width: 768px) {
			font-size: inherit;
		}
	}

	p {
		font-size: 14px;
		line-height: 130%;
		color: var(--fcn-muted);
		margin-bottom: 10px;
		font-style: italic;

		@media (min-width: 768px) {
			font-size: inherit;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}
}

/*--------------------------------------------------------------
# Trusted Brand
--------------------------------------------------------------*/
body.firm-comparison-new .trusted-brand {
	padding-block: 25px;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	background:
		linear-gradient(322.21deg, rgba(25, 24, 23, 1) 0%, rgba(25, 24, 23, 1) 100%)
			padding-box,
		linear-gradient(
				269.86deg,
				rgba(116, 116, 116, 0.2) 0.01%,
				rgba(255, 255, 255, 0.2) 99.99%
			)
			border-box;

	@media (width >= 992px) {
		padding-block: 20px;
	}

	.trusted-content {
		margin-inline: auto;
		max-width: 770px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px;

		@media (width >= 992px) {
			flex-direction: row;
			gap: 30px;
		}

		img {
			flex-shrink: 0;
			width: 188px;
		}

		p {
			margin: 0;
			font-weight: 400;
			font-size: 1.25rem;
			line-height: 1.42;
			color: var(--fcn-white);
			text-align: center;
			text-wrap: pretty;

			@media (width >= 992px) {
				text-align: left;
			}

			@media (width >= 1200px) {
				font-size: 1.5rem;
			}
		}
	}
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
body.firm-comparison-new .comp-footer {
	font-family: "Figtree", sans-serif;
	padding-block: 27px 36px;
	background: var(--fcn-bg-dark);

	@media (min-width: 768px) {
		padding-block: 70px;
	}

	.wrapper {
		width: min(calc(100% - 28px), 1274px);
		max-width: none;
		padding: 0;
		margin-inline: auto;
	}

	p {
		margin: 0 0 20px;
		font-weight: 300;
		font-size: 0.875rem;
		line-height: 1.57;
		color: var(--fcn-muted);

		&:last-child {
			margin-bottom: 0;
		}
	}

	.top-row {
		@media (min-width: 992px) {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 55px;
		}
	}

	.sec-menu-wrapper {
		@media (min-width: 992px) {
			order: 2;
		}

		ul {
			margin: 0 0 24px;
			padding: 0;
			list-style: none;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			gap: 18px 40px;

			@media (min-width: 768px) {
				gap: 18px 30px;
			}

			@media (min-width: 992px) {
				order: 1;
				margin-bottom: 0;
			}
		}

		a {
			text-decoration: none;
			font-weight: 500;
			font-size: 1rem;
			line-height: 1.03;
			color: var(--fcn-white);

			&:hover,
			&:focus-visible {
				color: var(--fcn-white);
				text-decoration: none;
			}

			@media (min-width: 768px) {
				line-height: 1.3;
			}
		}
	}

	.payment-wrapper {
		margin-bottom: 24px;

		@media (min-width: 992px) {
			margin-bottom: 0;
			order: 3;
		}

		p {
			margin-bottom: 8px;
			font-weight: 400;
			color: var(--fcn-white);
			text-align: center;

			@media (min-width: 992px) {
				text-align: right;
			}
		}

		.payment-image {
			display: block;
			width: 100%;
			max-width: 256px;
			margin: 0 auto;

			@media (min-width: 992px) {
				max-width: 246px;
				margin-inline: auto 0;
			}
		}
	}

	.copy-text-wrapper {
		margin-bottom: 24px;

		@media (min-width: 992px) {
			margin-bottom: 0;
			order: 1;
		}

		p {
			text-align: center;

			@media (min-width: 992px) {
				text-align: left;
			}
		}
	}
}