/*!
 * Firm Comparison Landing Page
 * Scoped to body.firm-comparison — loads before wp_head()
 * @package TradeScale
 */

/*--------------------------------------------------------------
# Reset / Base
--------------------------------------------------------------*/
body.firm-comparison {
	margin: 0;
	font-family:
		"Figtree",
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #fff;
	background: #141313;
}

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

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

body.firm-comparison a {
	color: inherit;
	text-decoration: none;
}

body.firm-comparison h1,
body.firm-comparison h2,
body.firm-comparison h3,
body.firm-comparison h4,
body.firm-comparison h5,
body.firm-comparison h6,
body.firm-comparison p {
	margin: 0;
	padding: 0;
}

body.firm-comparison .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
body.firm-comparison .firm-comparison-lp {
	min-height: 60vh;
}

body.firm-comparison .wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;

	@media (max-width: 767px) {
		padding: 0 12px;
	}
}

body.firm-comparison .sticky-header .wrapper {
	max-width: 1167px;
}

/*--------------------------------------------------------------
# Header Bar
--------------------------------------------------------------*/
body.firm-comparison .header {
	background: #141313;
}

body.firm-comparison .top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
}

/* Bulletin Pro bar stays above sticky header to mask slide-in animation */
body.firm-comparison .bulletinwp-bulletins {
	z-index: 1000 !important;
}

body.firm-comparison .sticky-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: rgba(20, 19, 19, 0.7);
	z-index: 999;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition:
		transform 0.25s ease,
		opacity 0.25s ease,
		visibility 0s linear 0.25s;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(40px);
	box-shadow: 0px 10px 15px 0px rgba(21, 20, 20, 1);
}

body.firm-comparison .sticky-header.is-sticky {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition:
		transform 0.25s ease,
		opacity 0.25s ease,
		visibility 0s linear 0s;
}

body.firm-comparison .sticky-header .top-bar {
	padding: 20px 0;
}

body.firm-comparison .sticky-header .btn-custom-lp {
	padding: 12px 20px;
	font-size: 14px;
	border-radius: 12px;
	font-weight: 400;
}

@media (max-width: 767px) {
	body.firm-comparison .sticky-header .btn-custom-lp {
		padding: 8px 16px;
		font-size: 13px;
		border-radius: 8px;
	}
}

body.firm-comparison .logo img {
	height: 60px;
	width: auto;
}

body.firm-comparison .logo img.mob {
	display: none;
}

@media (max-width: 767px) {
	body.firm-comparison .logo img.desk {
		display: none;
	}
	body.firm-comparison .logo img.mob {
		display: block;
		height: 58px;
		width: auto;
	}
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
body.firm-comparison .hero {
	padding-top: 40px;

	margin-bottom: 100px;

	@media (max-width: 991px) {
		margin-bottom: 80px;
	}

	@media (max-width: 767px) {
		padding-top: 32px;
		margin-bottom: 60px;
	}

	.hero-inner {
		max-width: 800px;
		margin-inline: auto;
	}

	.hero-main {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px 42px;
		align-items: center;
		margin-bottom: 80px;

		@media (max-width: 991px) {
			margin-bottom: 48px;
		}

		@media (max-width: 767px) {
			grid-template-columns: 1fr;
			margin-bottom: 40px;
		}
	}

	.hero-copy {
		p {
			font-size: 16px;
			line-height: 120%;
			color: #e3e0e0;
			margin-bottom: 12px;

			@media (max-width: 991px) {
				font-size: 18px;
				max-width: 100%;
			}

			@media (max-width: 767px) {
				font-size: 16px;
				line-height: 135%;
				margin-bottom: 14px;
			}

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

	.hero-title {
		max-width: 1080px;
		font-size: 60px;
		line-height: 120%;
		color: #fff;
		text-align: center;
		margin-bottom: 70px;

		@media (max-width: 991px) {
			font-size: 50px;
			margin-bottom: 26px;
		}

		@media (max-width: 767px) {
			font-size: 34px;
			line-height: 106%;
			margin-bottom: 20px;
		}

		span {
			display: block;
			font-weight: 600;
			background: linear-gradient(92.95deg, #f3981f 0%, #e57625 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			color: transparent;
		}
	}

	.hero-cta {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;

		.btn-custom-lp.large-text {
			width: 100%;
			max-width: 414px;
			font-size: 22px;
			line-height: 1;
			padding: 20px 34px;
			font-weight: 700;
		}
	}

	.hero-meta {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 10px 20px;
	}

	.hero-meta-item {
		display: flex;
		align-items: center;
		gap: 5px;
		color: #ffffff;
		font-size: 14px;
		line-height: 150%;

		img {
			width: 11px;
			height: 11px;
		}
	}

	.hero-cards {
		display: grid;
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: 16px;

		@media (max-width: 991px) {
			gap: 13px;
		}

		@media (max-width: 767px) {
			grid-template-columns: 1fr;
		}
	}

	.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);
	}

	.hero-card-stats {
		height: 124px;
		display: grid;
		grid-template-columns: 1.1fr 1fr 1fr;

		@media (max-width: 767px) {
			display: none;
		}

		.hero-stat {
			position: relative;
			padding: 20px 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%
				);
			}

			@media (max-width: 767px) {
				&::after {
					right: 50%;
					top: auto;
					bottom: 0;
					transform: translateX(50%);
					height: 1px;
					width: 80%;
				}
			}

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

			p {
				font-size: 16px;
				line-height: 1;
				font-weight: 500;
				color: #fff;
			}

			span {
				display: block;
				font-size: 24px;
				font-weight: 600;
				line-height: 1;
				color: #fff;
			}
		}

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

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

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

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

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

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

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

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

			img {
				width: 78px;
			}
		}

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

		p {
			font-size: 12px;
			line-height: 140%;
			color: #b3afa9;

			strong {
				color: #fff;
				font-weight: 600;
			}
		}
	}

	.hero-card-combined {
		display: none;

		@media (max-width: 767px) {
			display: block;
		}

		.hero-card-stats-row {
			display: flex;
			border-bottom: 1px solid rgba(255, 255, 255, 0.12);

			.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: #b3afa9;
					margin: 0;

					span {
						display: block;
						font-size: 16px;
						font-weight: 600;
						color: #fff;
						margin-bottom: 2px;
					}
				}

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

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

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

	.hero-partnership-content {
		margin-top: auto;
	}

	.hero-card-partnership {
		padding: 17px 20px;
		display: flex;
		flex-direction: column;
		gap: 11px;
		transition: border-color 0.2s ease;
		height: 124px;

		@media (max-width: 767px) {
			display: none;
		}

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

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

		h2 {
			font-size: 15px;
			line-height: 120%;
			font-weight: 600;
			color: #e3e0e0;
			margin-bottom: 6px;
		}

		p {
			font-size: 8px;
			line-height: 140%;
			color: #b3afa9;
			max-width: 290px;
		}
	}

	@media (max-width: 991px) {
		.hero-title {
			font-size: 50px;
		}

		.hero-copy p {
			font-size: 18px;
		}

		.hero-card-stats {
			.hero-stat-icon {
				width: 20px;
				height: 20px;
			}
		}

		.hero-cta {
			padding-top: 0;

			.btn-custom-lp.large-text {
				max-width: 100%;
				font-size: 18px;
				padding: 18px 30px;
			}
		}

		.hero-meta {
			gap: 6px;
		}

		.hero-meta-item {
			font-size: 11px;
		}

		.hero-card-stats .hero-stat {
			p {
				font-size: 13px;
			}

			span {
				font-size: 20px;
			}
		}

		.hero-card-partnership {
			h2 {
				font-size: 12px;
			}

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

	@media (max-width: 767px) {
		.hero-title {
			font-size: 42px;
			line-height: 110%;
		}

		.hero-copy {
			max-width: 277px;
			margin-inline: auto;
		}
		.hero-copy p {
			font-size: 16px;
			line-height: 120%;
		}

		.hero-cta {
			align-items: center;
			justify-content: center;
			gap: 10px;
			max-width: 300px;
			margin-inline: auto;
			.btn-custom-lp.large-text {
				font-size: 18px;
				padding: 16px 16px;
				border-radius: 10px;
			}
		}

		.hero-meta-item {
			font-size: 11px;
			gap: 6px;
		}

		.hero-card-stats .hero-stat {
			padding: 20px;

			p {
				font-size: 16px;
			}

			span {
				font-size: 34px;
				margin-bottom: 6px;
			}
		}

		.hero-card-partnership {
			padding: 18px 20px;

			h2 {
				font-size: 20px;
			}

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

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
body.firm-comparison .btn-custom-lp {
	display: block;
	width: fit-content;
	padding: 18px 25px;
	background: linear-gradient(92.95deg, #f3981f 0%, #e57625 100%);
	border: none;
	border-radius: 12px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	color: rgba(20, 19, 19, 1);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.3s ease;
	box-shadow: 0px 2px 21.2px 0px rgba(243, 152, 31, 0.39);
}

body.firm-comparison .btn-custom-lp:hover,
body.firm-comparison .btn-custom-lp:focus-visible,
body.firm-comparison .btn-custom-lp:active {
	color: rgba(20, 19, 19, 1) !important;
	box-shadow: 0px 0px 15px 0px rgba(243, 152, 31, 0.4);
}

@media (min-width: 768px) {
	body.firm-comparison .btn-custom-lp {
		padding-inline: 30px;
		font-size: 1.125rem;
	}
}

@media (min-width: 992px) {
	body.firm-comparison .btn-custom-lp {
		padding: 23px 46px;
	}
}

body.firm-comparison .btn-custom-lp.large-text {
	font-size: 1.125rem;
}

@media (min-width: 768px) {
	body.firm-comparison .btn-custom-lp.large-text {
		padding: 20px 35px;
		font-size: 1.25rem;
	}
}

@media (min-width: 992px) {
	body.firm-comparison .btn-custom-lp.large-text {
		padding-inline: 55px;
		font-size: 1.375rem;
	}
}

body.firm-comparison .btn {
	display: inline-block;
	padding: 12px 24px;
	font-family: "Figtree", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	border-radius: 12px;
	border: none;
	cursor: pointer;
	transition: opacity 0.2s;
	text-decoration: none;
}

body.firm-comparison .btn-primary {
	background: linear-gradient(135deg, #f3981f 0%, #e57625 100%);
	color: #fff;
	box-shadow: 0 2px 21px rgba(243, 152, 31, 0.39);
}

body.firm-comparison .btn-primary:hover {
	opacity: 0.85;
	color: #fff;
}

body.firm-comparison .btn-outline {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 12px 21px;
	font-size: 14px;
	color: #e67825;
	border-radius: 12px;
	width: 130px;
	height: 41px;
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.3s ease;

	background-image:
		linear-gradient(#141313, #141313),
		linear-gradient(
			70.53deg,
			rgba(243, 152, 31, 0.4) 2.72%,
			rgba(116, 116, 116, 0.28) 57.73%,
			rgba(255, 255, 255, 0.08) 112.73%
		);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	border: 1px solid transparent;
}

body.firm-comparison .btn-outline:hover {
	background-image:
		linear-gradient(#141313, #141313),
		linear-gradient(
			70.53deg,
			rgba(243, 152, 31, 0.8) 2.72%,
			rgba(116, 116, 116, 0.5) 57.73%,
			rgba(255, 255, 255, 0.2) 112.73%
		);
	box-shadow: 0px 0px 15px 0px rgba(243, 152, 31, 0.4);
}

/*--------------------------------------------------------------
# Title
--------------------------------------------------------------*/

body.firm-comparison .title {
	text-align: center;
	font-size: 60px;
	line-height: 120%;
	font-weight: 500;
	margin-bottom: 40px;
	color: #e3e0e0;

	@media (max-width: 991px) {
		font-size: 40px;
	}

	@media (max-width: 767px) {
		font-size: 28px;
	}
}

/*--------------------------------------------------------------
# Subtitle
--------------------------------------------------------------*/
body.firm-comparison .subtitle {
	font-size: 24px;
	line-height: 150%;
	font-weight: 400;
	color: #fff;
	font-weight: 300;
	text-align: center;

	@media (max-width: 991px) {
		font-size: 20px;
	}

	@media (max-width: 767px) {
		font-size: 16px;
	}
}

/*--------------------------------------------------------------
# Steps
--------------------------------------------------------------*/
body.firm-comparison .steps {
	margin-top: 100px;

	@media (max-width: 991px) {
		margin-top: 80px;
	}

	@media (max-width: 767px) {
		margin-top: 60px;
		margin-bottom: 10px;
	}

	.title {
		color: #fff;
		margin-bottom: 13px;

		@media (max-width: 991px) {
			margin-bottom: 7px;
		}
	}

	.subtitle {
		margin-bottom: 40px;

		@media (max-width: 991px) {
			margin-bottom: 30px;
		}

		@media (max-width: 767px) {
			margin-bottom: 20px;
		}
	}

	.steps-inner {
		max-width: 720px;
		margin-inline: auto;
	}

	.steps-card {
		padding: 60px 90px 90px 90px;
		border-radius: 12px;
		position: relative;

		background: linear-gradient(
			180deg,
			rgba(20, 19, 19, 0.2) 0%,
			rgba(20, 19, 19, 0.4) 70%,
			#2b1f16 100%
		);

		backdrop-filter: blur(25px);
		-webkit-backdrop-filter: blur(25px);

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: 12px;
			padding: 1px;
			background: linear-gradient(180deg, #454444 0%, #f3981f 100%);
			-webkit-mask:
				linear-gradient(#fff 0 0) content-box,
				linear-gradient(#fff 0 0);
			-webkit-mask-composite: xor;
			mask-composite: exclude;
			pointer-events: none;
		}

		@media (max-width: 991px) {
			padding: 60px 56px 90px 56px;
		}

		@media (max-width: 767px) {
			padding: 30px 20px 50px 20px;
		}
	}

	.steps-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 30px;
		position: relative;

		&::after {
			content: "";
			position: absolute;
			left: 30px;
			top: 60px;
			bottom: 110px;
			width: 1px;
			background: linear-gradient(
				180deg,
				rgba(255, 255, 255, 0.2) 0%,
				#e57625 100%
			);
			z-index: 0;

			@media (max-width: 767px) {
				left: 20px;
				top: 40px;
				bottom: 80px;
			}
		}
	}

	.step-item {
		position: relative;
		z-index: 1;

		&:last-child {
			.step-number {
				color: #e3e0e0;

				&::before {
					background: #e57625;
				}
			}
		}
	}

	.step-header {
		display: flex;
		align-items: center;
		gap: 25px;

		@media (max-width: 767px) {
			gap: 16px;
		}
	}

	.step-number {
		font-size: 32px;
		color: #e3e0e0;
		line-height: 1;
		flex-shrink: 0;
		width: 60px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #1a1715;
		position: relative;
		&::before {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: 50%;
			padding: 1px;
			background: linear-gradient(
				269.86deg,
				rgba(116, 116, 116, 0.2) 0.01%,
				rgba(255, 255, 255, 0.2) 99.99%
			);
			-webkit-mask:
				linear-gradient(#fff 0 0) content-box,
				linear-gradient(#fff 0 0);
			-webkit-mask-composite: xor;
			mask-composite: exclude;
			pointer-events: none;
		}

		@media (max-width: 767px) {
			height: 40px;
			width: 40px;
			font-size: 22px;
		}
	}

	.step-title {
		font-size: 24px;
		font-weight: 500;
		color: #fff;
		line-height: 150%;
		margin: 0;
		text-transform: uppercase;
		vertical-align: middle;

		@media (max-width: 767px) {
			font-size: 20px;
		}
	}

	.step-bullets {
		list-style: none;
		padding: 0;
		margin: 0;
		padding-left: 85px;
		display: flex;
		flex-direction: column;
		gap: 4px;

		@media (max-width: 767px) {
			padding-left: 55px;
		}

		li {
			position: relative;
			font-size: 16px;
			font-weight: 300;
			line-height: 150%;
			color: #fff;
			display: flex;
			align-items: flex-start;
			gap: 12px;

			&::before {
				content: "→";
				color: #e57625;
				font-weight: 400;
				font-size: 20px;
				line-height: 1;
				margin-top: 2px;
			}

			@media (max-width: 767px) {
				line-height: 120%;
				gap: 8px;
			}
		}
	}
}

/*--------------------------------------------------------------
# Comparison Tables (Shared)
--------------------------------------------------------------*/
body.firm-comparison .comparison-section {
	margin-top: 100px;
	margin-bottom: 100px;

	.title {
		margin-bottom: 80px;

		@media (max-width: 991px) {
			margin-bottom: 70px;
		}

		@media (max-width: 767px) {
			margin-bottom: 54px;
		}
	}

	@media (max-width: 991px) {
		margin-top: 80px;
		margin-bottom: 80px;
	}

	@media (max-width: 767px) {
		margin-top: 60px;
		margin-bottom: 60px;
	}

	.comparison-inner {
		max-width: 950px;
		margin-inline: auto;
		.table-both-steps-wrapper {
			background: linear-gradient(
				180deg,
				rgba(20, 19, 19, 0.2) 0%,
				rgba(20, 19, 19, 0.4) 70%,
				#2b1f16 100%
			);
			border-radius: 12px;
			position: relative;
			backdrop-filter: blur(25px);
			-webkit-backdrop-filter: blur(25px);
			padding: 20px;

			@media (max-width: 767px) {
				padding: 15px 10px;
			}

			&::before {
				content: "";
				position: absolute;
				inset: 0;
				border-radius: 12px;
				padding: 1px;
				background: linear-gradient(
					163.19deg,
					rgba(255, 255, 255, 0.2) 11.66%,
					rgba(116, 116, 116, 0.2) 51.15%,
					#f3981f 88.34%
				);
				-webkit-mask:
					linear-gradient(#fff 0 0) content-box,
					linear-gradient(#fff 0 0);
				-webkit-mask-composite: xor;
				mask-composite: exclude;
				pointer-events: none;
			}

			.steps-button-wrapper {
				border: none;
			}

			.button-wrapper.steps {
				margin-bottom: 22px;

				@media (width >= 576px) {
					margin-top: -60px;
				}
			}

			.table-button.big {
				color: #e3e0e0;
				font-size: 21px;
				font-weight: 600;
				padding: 15px 30px;
				white-space: nowrap;
				display: block;
				text-align: center;

				&.active {
					background: rgba(255, 255, 255, 0.05);
					border: 1px solid #f3981f;
					box-shadow: 0 0 15px rgba(243, 152, 31, 0.3);
				}

				@media (max-width: 767px) {
					font-size: 16px;
					padding: 10px 15px;
				}
			}

			.table-responsive {
				overflow: visible;

				@media (max-width: 767px) {
					padding-inline: 10px;
				}
			}
		}

		.comparison-header-row {
			background: rgba(25, 24, 23, 0.4);
			border-radius: 12px;
			margin-bottom: 0;
			border: 1px solid rgba(255, 255, 255, 0.1);
			max-width: 818px;
			margin-inline: auto;

			@media (max-width: 767px) {
				max-width: 100%;
			}

			.comparison-header-inner {
				display: flex;
				align-items: center;
				padding: 15px 30px;
				width: 100%;
				max-width: 710px;
				margin-inline: auto;
			}

			.comp-header-col {
				font-weight: 700;
				font-size: 16px;
				color: #fff;
				width: 33.333%;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;

				.comp-logo {
					height: 24px;
					margin: 0 auto;
				}

				&:first-child {
					justify-content: flex-start;
					text-align: left;
				}
			}

			@media (max-width: 767px) {
				.comparison-header-inner {
					padding: 12px;
				}
				.comp-header-col {
					font-size: 14px;
				}
			}
		}

		.steps-content-wrapper {
			max-width: 720px;
			margin-inline: auto;

			@media (max-width: 767px) {
				max-width: 100%;
			}

			small {
				letter-spacing: 0;
			}

			.plans td,
			.plans th {
				width: 33.333% !important;
				text-align: center;
				font-weight: 500;
				vertical-align: middle;
				line-height: 1.2;
			}

			.plans sup {
				font-size: 0.75em;
				line-height: 0;
				margin-left: 0.05em;
			}

			.plans td:first-child {
				text-align: left;
			}
		}

		.plans td:first-child {
			display: table-cell !important;
			position: relative !important;
			background: transparent !important;
			border-right: none !important;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
			padding-right: 35px !important;
		}

		.plans th:first-child {
			position: static !important;
			background: transparent !important;
		}

		.plans td:has(.tip-holder):not(:first-child) {
			position: relative;
		}

		.plans .tip-holder {
			position: absolute;
			top: 50%;
			right: 10px;
			transform: translateY(-50%);

			.tip-info {
				position: relative;
				display: block;
				border-radius: 50%;
				width: 16px;
				height: 16px;
				background: gray
					url("https://www.traderscale.com/wp-content/uploads/2025/02/info.svg")
					center center no-repeat;
				opacity: 0.4;
				cursor: pointer;
				transition: all 0.2s ease-in;

				&:hover {
					opacity: 1;

					.tooltip-text {
						visibility: visible;
					}
				}
			}

			.tooltip-text {
				position: absolute;
				top: -12px;
				right: -228px;
				visibility: hidden;
				width: 220px;
				color: rgba(227, 224, 224, 1);
				border: 1px solid rgba(116, 116, 116, 0.2);
				border-radius: 8px;
				padding: 7px 12px;
				background: #242424;
				text-align: center;
				font-size: 14px;
				line-height: 17px;
				z-index: 100;
			}
		}

		.plans td.tip-left .tip-holder .tooltip-text {
			right: auto;
			left: -228px;
		}

		.table-bottom {
			background: transparent;
		}
	}
}

/*--------------------------------------------------------------
# Target Comparison
--------------------------------------------------------------*/
body.firm-comparison .target-comparison {
	.target-comparison-text {
		max-width: 600px;
		margin-inline: auto;
		margin-top: 40px;

		font-weight: 300;
		font-size: 24px;
		line-height: 120%;

		background: linear-gradient(90deg, #ffc271 0%, #ff9242 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;

		@media (max-width: 991px) {
			margin-top: 30px;
			font-size: 20px;
		}

		@media (max-width: 767px) {
			margin-top: 20px;
			font-size: 18px;
		}
	}
}

/*--------------------------------------------------------------
# FAQ
--------------------------------------------------------------*/
body.firm-comparison .faq {
	margin-top: 100px;
	margin-bottom: 60px;

	.title {
		margin-bottom: 48px;

		@media (max-width: 767px) {
			margin-bottom: 32px;
		}
	}

	.faq-inner {
		max-width: 970px;
		margin-inline: auto;
	}

	.collapse:not(.show) {
		display: none !important;
	}

	.accordion-item {
		background: rgba(25, 24, 23, 0.4);
		border: 1px solid rgba(44, 43, 42, 1);
		border-radius: 12px;
		margin-bottom: 10px;
		transition: all 0.3s ease;

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

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

	.accordion-header {
		position: relative;
		z-index: 5;
	}

	.accordion-button {
		position: relative;
		padding: 18px 20px;
		border-radius: 0 !important;
		background: transparent;
		color: rgba(227, 224, 224, 1);
		font-weight: 400;
		font-size: 1.125rem;
		line-height: 1.3;
		box-shadow: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 25px;

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

		&::after {
			display: none;
		}

		svg {
			flex-shrink: 0;
			width: 10px;
			transition: all 0.3s ease;
		}

		&:not(.collapsed) svg {
			rotate: 180deg;
			path {
				stroke: #e3e0e0;
			}
		}
	}

	.accordion-body {
		position: relative;
		padding: 20px;
		font-size: 16px;
		line-height: 170%;
		color: #b3afa9;

		@media (width >= 768px) {
			padding-inline: 24px;
		}

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

		@media (width >= 768px) {
			&::before {
				left: 24px;
				right: 24px;
			}
		}

		p {
			margin: 0 0 10px;
			font-weight: 400;
			font-size: 16px;
			line-height: 170%;
			color: #b3afa9;
			text-align: left;
			text-wrap: pretty;

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

		ol {
			margin: 28px 0 10px;
			padding-left: 1.25em;
			font-size: 16px;
			line-height: 170%;
			color: #fff;
			list-style: decimal;
		}

		li {
			margin-bottom: 28px;
			color: #b3afa9;

			span {
				display: inline-block;
				color: #fff;
				margin-bottom: 10px;
			}

			&::marker {
				color: #fff;
			}

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

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/

body.firm-comparison .pricing {
	margin-top: 100px;
	margin-bottom: 60px;

	.title {
		margin-bottom: 80px;
	}
}

/*--------------------------------------------------------------
# Why Structure
--------------------------------------------------------------*/

body.firm-comparison .why-structure {
	margin-block: 60px;

	@media (max-width: 991px) {
		margin-block: 40px;
	}

	@media (max-width: 767px) {
		margin-block: 20px;
	}

	.why-structure-inner {
		max-width: 550px;
		margin-inline: auto;
	}

	.why-structure-header {
		text-align: center;
		margin-bottom: 35px;

		@media (max-width: 991px) {
			margin-bottom: 32px;
		}

		@media (max-width: 767px) {
			margin-bottom: 26px;
			text-align: left;
		}

		.why-structure-title {
			text-align: center;
			font-weight: 300;
			font-size: 24px;
			line-height: 130%;
			background: linear-gradient(90deg, #ffc271 0%, #ff9242 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-fill-color: transparent;

			@media (max-width: 991px) {
				font-size: 20px;
				max-width: 422px;
				margin-inline: auto;
			}

			@media (max-width: 767px) {
				font-size: 18px;
				line-height: 120%;
			}
		}

		.why-structure-title {
			span {
				display: block;

				@media (max-width: 767px) {
					display: inline;
				}
			}
		}
	}

	.why-structure-points {
		display: flex;
		flex-direction: column;
		gap: 8px;
		max-width: 277px;
		margin-inline: auto;
		margin-bottom: 40px;

		@media (max-width: 991px) {
			margin-bottom: 30px;
		}

		.why-structure-point {
			position: relative;
			border: 1px solid #334e18;
			box-shadow: 0px 0px 20px rgba(25, 104, 41, 0.55);
			border-radius: 10px;
			padding: 10px 30px;

			.why-structure-icon {
				position: absolute;
				top: 10px;
				left: -10px;

				width: 22px;
				height: 22px;

				backdrop-filter: blur(2.63px);
				-webkit-backdrop-filter: blur(2.63px);
			}

			.why-structure-text {
				font-size: 18px;
				line-height: 120%;
				color: #e3e0e0;
			}
		}
	}

	.why-structure-actions {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 22px;

		@media (max-width: 991px) {
			gap: 12px;
		}

		.why-structure-meta {
			display: flex;
			justify-content: center;
			gap: 14px;

			.why-structure-meta-item {
				display: flex;
				align-items: center;
				gap: 8px;
				font-size: 14px;
				line-height: 140%;

				@media (max-width: 991px) {
					font-size: 11px;
					line-height: 150%;
				}

				@media (max-width: 767px) {
					font-size: 10px;
				}
			}
		}
	}
}

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

	@media (max-width: 767px) {
		margin-block: 80px;
	}

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

	.legal-label {
		line-height: 170%;
		color: #fff;
		margin-bottom: 10px;
	}

	p {
		line-height: 130%;
		color: #b3afa9;
		margin-bottom: 10px;

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

	@media (max-width: 767px) {
		.legal-label,
		p {
			font-size: 14px;
		}
	}
}

/*--------------------------------------------------------------
# Trusted Brand
--------------------------------------------------------------*/
body.firm-comparison .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: #fff;
			text-align: center;
			text-wrap: pretty;

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

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

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
body.firm-comparison .comp-footer {
	font-family: "Figtree", sans-serif;
	padding-block: 27px 36px;
	background: #191817;

	@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: #b3afa9;

		&: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: #fff;

			&:hover,
			&:focus-visible {
				color: #fff;
				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: #fff;
			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;
			}
		}
	}
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 767px) {
	body.firm-comparison .logo img {
		height: 32px;
	}

	body.firm-comparison .btn {
		padding: 10px 18px;
		font-size: 13px;
	}
}