/*
 * /platforms/copy-trading-app/ — Figma "SPM Aug26" Copy Trading frame
 * (node 3297:3405), 1920px. Shared tokens and components come from
 * home-reference.css; this file holds the page-specific sections.
 */

/* ---------- Breadcrumb bar (93–149px) ---------- */
html body .sp-page-copytrade .sp-breadcrumb {
	display: flex !important;
	min-height: 56px !important;
	align-items: center;
	gap: 12px;
	padding: 0 !important;
	font-size: 12px !important;
	line-height: 18px !important;
	letter-spacing: -0.24px;
}

html body .sp-page-copytrade .sp-breadcrumb::before {
	border-top: 0 !important;
}

html body .sp-page-copytrade .sp-breadcrumb__sep {
	margin: 0 !important;
}

html body .sp-page-copytrade .sp-breadcrumb__current {
	color: #fc404d !important;
	font-weight: 600;
}

/* ---------- Hero (149–756px) ---------- */
html body .sp-page-copytrade > .sp-ct-hero {
	position: relative;
	padding: 96px 0 !important;
	border-bottom: 1px solid var(--spf-line);
	background-color: #000;
	background-image: linear-gradient(rgba(0, 0, 0, .88), rgba(0, 0, 0, .88)), var(--sp-ct-hero-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}

html body .sp-page-copytrade .sp-ct-hero__copy {
	display: flex;
	width: 912px;
	max-width: 100%;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
}

html body .sp-page-copytrade .sp-ct-hero .sp-home-eyebrow {
	margin: 0 0 20px !important;
}

html body .sp-page-copytrade .sp-ct-hero__icon {
	display: block;
	width: 64px !important;
	height: 64px !important;
	margin: 0 0 20px;
	border-radius: 8px;
	object-fit: cover;
}

html body .sp-page-copytrade .sp-ct-hero h1 {
	margin: 0 !important;
	font-size: 56px !important;
	line-height: 64px !important;
	letter-spacing: -1.12px !important;
}

html body .sp-page-copytrade .sp-ct-hero__text,
html body .sp-page-copytrade .sp-ct-hero__text > p {
	margin: 0 !important;
	color: var(--spf-text) !important;
	font-size: 20px !important;
	line-height: 32px !important;
	letter-spacing: -0.4px !important;
}

html body .sp-page-copytrade .sp-ct-hero__text {
	margin-top: 32px !important;
}

html body .sp-page-copytrade .sp-ct-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin-top: 40px;
}

html body .sp-page-copytrade .sp-ct-hero .sp-hero__ctas {
	justify-content: center;
}

html body .sp-page-copytrade .sp-ct-hero__avail {
	display: flex;
	gap: 4px 8px;
	margin: 0;
	color: var(--spf-muted);
	font-size: 12px;
	line-height: 18px;
	letter-spacing: -0.24px;
}

html body .sp-page-copytrade .sp-ct-hero__avail a {
	color: inherit !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- What is copy trading ---------- */
html body .sp-page-copytrade .sp-ct-what__head {
	max-width: 1146px !important;
}

html body .sp-page-copytrade .sp-ct-what__head > p:not(.sp-home-eyebrow) {
	max-width: none !important;
}

html body .sp-page-copytrade .sp-ct-features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

html body .sp-page-copytrade .sp-ct-feature {
	text-align: left;
}

html body .sp-page-copytrade .sp-ct-feature__icon {
	display: block;
	height: 32px;
	margin: 0 0 20px;
}

html body .sp-page-copytrade .sp-ct-feature__icon img {
	display: block;
	width: auto !important;
	max-width: 40px;
	height: 32px !important;
	object-fit: contain;
	object-position: left center;
}

html body .sp-page-copytrade .sp-ct-feature h3 {
	margin: 0 !important;
	font-size: 24px !important;
	line-height: 32px !important;
	letter-spacing: -0.48px !important;
}

html body .sp-page-copytrade .sp-ct-feature > p {
	margin: 24px 0 0 !important;
	color: var(--spf-text) !important;
	font-size: 16px !important;
	line-height: 24px !important;
	letter-spacing: -0.32px !important;
}

/* ---------- How copy trading works (3 cards) + showcase ---------- */
html body .sp-page-copytrade > .sp-ct-steps {
	padding-top: 64px !important;
}

html body .sp-page-copytrade .sp-ct-steps .sp-section__head {
	max-width: none !important;
}

html body .sp-page-copytrade .sp-ct-steps .sp-steps__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	margin: 0 !important;
}

html body .sp-page-copytrade .sp-ct-showcase {
	width: 1146px;
	max-width: 100%;
	margin: 80px auto 0;
	overflow: hidden;
}

html body .sp-page-copytrade .sp-ct-showcase img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1146 / 644;
	object-fit: cover;
}

/* ---------- Download band (386px, #fc414d) ---------- */
html body .sp-page-copytrade > .sp-ct-download {
	padding: 96px 0;
	background: #fc414d;
	color: #fff;
	text-align: center;
}

html body .sp-page-copytrade .sp-ct-download .sp-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

html body .sp-page-copytrade .sp-ct-download h2 {
	max-width: 912px;
	margin: 0 !important;
	font-size: 48px !important;
	line-height: 56px !important;
	letter-spacing: -0.96px !important;
}

html body .sp-page-copytrade .sp-ct-download__text,
html body .sp-page-copytrade .sp-ct-download__text > p {
	max-width: 912px;
	margin: 0 !important;
	color: #fff !important;
	font-size: 20px !important;
	line-height: 32px !important;
	letter-spacing: -0.4px !important;
}

html body .sp-page-copytrade .sp-ct-download__text {
	margin-top: 32px !important;
}

html body .sp-page-copytrade .sp-ct-download__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

html body .sp-page-copytrade .sp-ct-download__badges a {
	display: block;
}

html body .sp-page-copytrade .sp-ct-download__badges img {
	display: block;
	width: auto !important;
	height: 53px !important;
}

html body .sp-page-copytrade .sp-ct-download__fallback {
	display: inline-flex;
	height: 53px;
	align-items: center;
	padding: 0 20px;
	border: 1px solid #fff;
	border-radius: 8px;
	background: #000;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-box: none;
}

/* ---------- Ready banner, markets ---------- */
html body .sp-page-copytrade .sp-ready-banner {
	margin-top: 0 !important;
}

html body .sp-page-copytrade .sp-ct-markets .sp-section__head h2 {
	max-width: 569px;
}

html body .sp-page-copytrade .sp-ct-markets .sp-section__head > p:not(.sp-home-eyebrow) {
	max-width: 725px !important;
}

html body .sp-page-copytrade .sp-market__art img {
	width: auto !important;
}

/* ---------- FAQ ---------- */
html body .sp-page-copytrade .sp-ct-faq .sp-section__head h2 {
	font-size: 40px !important;
	line-height: 48px !important;
	letter-spacing: -0.8px !important;
}

html body .sp-page-copytrade .sp-faq {
	display: flex !important;
	max-width: none !important;
	flex-direction: column;
	gap: 48px !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body .sp-page-copytrade .sp-faq__item {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

html body .sp-page-copytrade .sp-faq__item summary {
	position: relative;
	display: block !important;
	margin: 0 !important;
	padding: 0 40px 24px 0 !important;
	border-bottom: 1px solid var(--spf-line) !important;
	color: #fff !important;
	font-size: 24px !important;
	font-weight: 600 !important;
	line-height: 32px !important;
	letter-spacing: -0.48px !important;
	list-style: none !important;
	cursor: pointer;
}

html body .sp-page-copytrade .sp-faq__item summary::-webkit-details-marker {
	display: none;
}

html body .sp-page-copytrade .sp-faq__item summary::before {
	display: none !important;
}

html body .sp-page-copytrade .sp-faq__item summary::after {
	content: "" !important;
	position: absolute !important;
	top: 1px !important;
	right: 2px !important;
	left: auto !important;
	width: 7px !important;
	height: 7px !important;
	margin: 0 !important;
	border: solid #fff !important;
	border-width: 0 2px 2px 0 !important;
	background: none !important;
	transform: rotate(45deg) !important;
	transition: transform .2s ease;
}

html body .sp-page-copytrade .sp-faq__item[open] summary::after {
	top: 5px !important;
	transform: rotate(-135deg) !important;
}

html body .sp-page-copytrade .sp-faq__item > p {
	margin: 24px 0 0 !important;
	padding: 0 !important;
	color: var(--spf-text) !important;
	font-size: 16px !important;
	line-height: 24px !important;
	letter-spacing: -0.32px !important;
}

/* ---------- Stats, back bar, payments ---------- */
html body .sp-page-copytrade .sp-ct-stats .sp-stats {
	margin-top: 0 !important;
}

html body .sp-page-copytrade > .sp-ct-backbar {
	margin: 80px 0 0 !important;
	border-top: 1px solid var(--spf-line);
	border-bottom: 1px solid var(--spf-line);
	background: #111;
}

html body .sp-page-copytrade .sp-ct-backbar .sp-container {
	display: flex;
	min-height: 54px;
	align-items: center;
}

html body .sp-page-copytrade .sp-ct-backbar a {
	color: var(--spf-text) !important;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: -0.24px;
	text-decoration: none;
}

html body .sp-page-copytrade .sp-ct-backbar a span {
	margin-right: 8px;
}

html body .sp-page-copytrade .sp-ct-backbar a u {
	text-underline-offset: 2px;
}

html body .sp-page-copytrade > .sp-payments {
	margin-top: 0 !important;
}

/* Content column for every section on this screen. */
html body .sp-page-copytrade > .sp-section > .sp-container,
html body .sp-page-copytrade > .sp-ct-hero > .sp-container,
html body .sp-page-copytrade > .sp-ct-download > .sp-container,
html body .sp-page-copytrade > .sp-ct-backbar > .sp-container {
	width: min(calc(100% - (var(--spf-gutter) * 2)), var(--spf-width)) !important;
	max-width: var(--spf-width) !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
	html body .sp-page-copytrade .sp-ct-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 24px;
	}

	html body .sp-page-copytrade .sp-ct-hero h1 {
		font-size: 48px !important;
		line-height: 56px !important;
	}

	html body .sp-page-copytrade .sp-ct-download h2 {
		font-size: 40px !important;
		line-height: 48px !important;
	}
}

@media (max-width: 900px) {
	html body .sp-page-copytrade .sp-ct-steps .sp-steps__grid {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 720px) {
	html body .sp-page-copytrade > .sp-ct-hero,
	html body .sp-page-copytrade > .sp-ct-download {
		padding: 56px 0 !important;
	}

	html body .sp-page-copytrade .sp-ct-hero h1 {
		font-size: 36px !important;
		line-height: 44px !important;
	}

	html body .sp-page-copytrade .sp-ct-hero h1 br {
		display: none;
	}

	html body .sp-page-copytrade .sp-ct-hero__text,
	html body .sp-page-copytrade .sp-ct-hero__text > p,
	html body .sp-page-copytrade .sp-ct-download__text,
	html body .sp-page-copytrade .sp-ct-download__text > p {
		font-size: 16px !important;
		line-height: 24px !important;
	}

	html body .sp-page-copytrade .sp-ct-download h2,
	html body .sp-page-copytrade .sp-ct-faq .sp-section__head h2 {
		font-size: 32px !important;
		line-height: 40px !important;
	}

	html body .sp-page-copytrade .sp-ct-features {
		grid-template-columns: 1fr;
	}

	html body .sp-page-copytrade .sp-ct-showcase {
		margin-top: 48px;
	}

	html body .sp-page-copytrade .sp-ct-download__badges img {
		height: 44px !important;
	}

	html body .sp-page-copytrade .sp-faq__item summary {
		font-size: 18px !important;
		line-height: 26px !important;
	}

	html body .sp-page-copytrade > .sp-ct-backbar {
		margin-top: 56px !important;
	}
}

/* Legacy platform-detail rules turn <main> into a re-ordered flex column. */
html body main.sp-page-copytrade {
	display: block !important;
}

html body main.sp-page-copytrade > * {
	order: 0 !important;
}

html body .sp-page-copytrade .sp-ct-hero__avail {
	display: block;
}

html body .sp-page-copytrade .sp-ct-hero__avail span {
	margin: 0 4px;
}

html body .sp-page-copytrade .sp-ct-download__badges li,
html body .sp-page-copytrade .sp-ct-download__badges a {
	text-box: none;
}

html body .sp-page-copytrade .sp-ct-download__fallback {
	display: flex;
}

html body .sp-page-copytrade .sp-section__head::before,
html body .sp-page-copytrade .sp-section__head::after {
	display: none !important;
	content: none !important;
}

html body .sp-page-copytrade .sp-faq__item > p {
	max-width: none !important;
}