/*
 * /markets/stocks/ — Figma "SPM Aug26" Stocks frame (node 3297:6469), 1920px.
 * Shared tokens, buttons, section heads, ready banner, stats, payments and the
 * final CTA come from home-reference.css (enqueued before this file). This
 * file only holds what is specific to the Stocks screen.
 */

/* ---------- Breadcrumb bar (93–149px) ---------- */
html body .sp-page-market-stocks .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-market-stocks .sp-breadcrumb::before {
	border-top: 0 !important;
}

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

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

/* ---------- Hero ---------- */
html body .sp-page-market-stocks > .sp-market-cta-hero {
	padding: 80px 0 !important;
	border: 0 !important;
	background: #000 !important;
}

html body .sp-page-market-stocks > .sp-market-cta-hero .sp-platshow__row {
	display: grid !important;
	grid-template-columns: minmax(0, 771px) minmax(0, 561px) !important;
	justify-content: space-between;
	align-items: center !important;
	gap: 48px !important;
	width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

html body .sp-page-market-stocks > .sp-market-cta-hero .sp-platshow__copy {
	order: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

html body .sp-page-market-stocks > .sp-market-cta-hero .sp-figma-eyebrow {
	margin: 0 0 20px !important;
	color: var(--spf-accent) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 18px !important;
	letter-spacing: 2.88px !important;
	text-transform: uppercase;
}

html body .sp-page-market-stocks > .sp-market-cta-hero h1 {
	margin: 0 !important;
	font-size: 48px !important;
	line-height: 56px !important;
	letter-spacing: -0.96px !important;
}

html body .sp-page-market-stocks > .sp-market-cta-hero .sp-platshow__copy > p:not(.sp-figma-eyebrow) {
	max-width: none !important;
	margin: 32px 0 0 !important;
	color: var(--spf-text) !important;
	font-size: 20px !important;
	line-height: 32px !important;
	letter-spacing: -0.4px !important;
}

html body .sp-page-market-stocks > .sp-market-cta-hero .sp-hero__ctas {
	justify-content: flex-start !important;
	margin: 40px 0 0 !important;
}

html body .sp-page-market-stocks .sp-stocks-reference-hero-art {
	order: 1 !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 561 / 449;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

html body .sp-page-market-stocks .sp-stocks-reference-hero-art img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 0 !important;
}

/* ---------- What is share CFD trading ---------- */
html body .sp-page-market-stocks > .sp-stocks-reference-overview {
	padding: 0 !important;
	border: 0 !important;
	background: #000 !important;
}

html body .sp-page-market-stocks .sp-stocks-reference-copy {
	width: 1145px !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	text-align: center !important;
}

html body .sp-page-market-stocks .sp-stocks-reference-copy::before {
	display: none !important;
	content: none !important;
}

html body .sp-page-market-stocks .sp-stocks-reference-copy h2 {
	margin: 0 !important;
	font-size: 48px !important;
	line-height: 56px !important;
	letter-spacing: -0.96px !important;
}

html body .sp-page-market-stocks .sp-stocks-reference-copy > p:not(.sp-home-eyebrow) {
	max-width: none !important;
	margin: 32px 0 0 !important;
	color: var(--spf-text) !important;
	font-size: 20px !important;
	line-height: 32px !important;
	letter-spacing: -0.4px !important;
}

html body .sp-page-market-stocks .sp-stocks-reference-overview .sp-whygrid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 24px !important;
	margin: 48px 0 0 !important;
	padding: 0 !important;
}

html body .sp-page-market-stocks .sp-stocks-reference-overview .sp-whygrid__item {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: left !important;
}

html body .sp-page-market-stocks .sp-stocks-reference-overview .sp-whygrid__icon {
	display: block !important;
	width: auto !important;
	height: 32px !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

html body .sp-page-market-stocks .sp-stocks-reference-overview .sp-whygrid__icon img {
	display: block !important;
	width: auto !important;
	max-width: 40px !important;
	height: 32px !important;
	margin: 0 !important;
	object-fit: contain !important;
	object-position: left center !important;
}

html body .sp-page-market-stocks .sp-whygrid__icon::before,
html body .sp-page-market-stocks .sp-whygrid__icon::after {
	display: none !important;
}

html body .sp-page-market-stocks .sp-stocks-reference-overview .sp-whygrid__item h3,
html body .sp-page-market-stocks .sp-whychoose__item h3 {
	margin: 0 !important;
	font-size: 24px !important;
	line-height: 32px !important;
	letter-spacing: -0.48px !important;
}

html body .sp-page-market-stocks .sp-stocks-reference-overview .sp-whygrid__item > p,
html body .sp-page-market-stocks .sp-whychoose__item > p {
	margin: 24px 0 0 !important;
	color: var(--spf-text) !important;
	font-size: 16px !important;
	line-height: 24px !important;
	letter-spacing: -0.32px !important;
}

html body .sp-page-market-stocks .sp-stocks-reference-showcase {
	display: block !important;
	width: 912px !important;
	max-width: 100% !important;
	margin: 80px auto 0 !important;
	padding: 0 !important;
	background: none !important;
	overflow: hidden !important;
}

html body .sp-page-market-stocks .sp-stocks-reference-showcase__image {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 912 / 513;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	object-fit: cover;
}

/* ---------- Why trade (1751–2654px) ---------- */
html body .sp-page-market-stocks > .sp-whychoose {
	padding: 80px 0 !important;
	border-top: 1px solid var(--spf-line) !important;
	border-bottom: 1px solid var(--spf-line) !important;
	background:
		radial-gradient(ellipse 760px 600px at 0% 50%, rgba(150, 18, 26, .34), transparent 70%),
		#000 !important;
}

html body .sp-page-market-stocks .sp-whychoose__head {
	width: 678px !important;
	max-width: 100% !important;
	margin: 0 !important;
	text-align: left !important;
}

html body .sp-page-market-stocks .sp-whychoose__head::before {
	display: none !important;
	content: none !important;
}

html body .sp-page-market-stocks .sp-whychoose__head h2 {
	margin: 0 !important;
	font-size: 48px !important;
	line-height: 56px !important;
	letter-spacing: -0.96px !important;
}

html body .sp-page-market-stocks .sp-whychoose__head > p:not(.sp-home-eyebrow) {
	margin: 32px 0 0 !important;
	color: var(--spf-text) !important;
	font-size: 20px !important;
	line-height: 32px !important;
	letter-spacing: -0.4px !important;
}

html body .sp-page-market-stocks .sp-whychoose__items {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 48px 24px !important;
	width: 1029px !important;
	max-width: 100% !important;
	margin: 48px 0 0 auto !important;
	padding: 0 !important;
}

html body .sp-page-market-stocks .sp-whychoose__spacer {
	display: none !important;
}

html body .sp-page-market-stocks .sp-whychoose__item {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: left !important;
}

html body .sp-page-market-stocks .sp-whychoose__item .sp-whygrid__icon {
	display: block !important;
	width: 88px !important;
	height: 88px !important;
	margin: 0 0 32px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

html body .sp-page-market-stocks .sp-whychoose__item:nth-child(n + 5) .sp-whygrid__icon {
	margin-bottom: 24px !important;
}

html body .sp-page-market-stocks .sp-whychoose__item .sp-whygrid__icon img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

/* ---------- Section heads specific to this frame ---------- */
html body .sp-page-market-stocks .sp-section__head h2 {
	max-width: 100%;
}

html body .sp-page-market-stocks .sp-companies-section .sp-section__head h2,
html body .sp-page-market-stocks .sp-platmarkets .sp-section__head h2 {
	width: 447px !important;
}

html body .sp-page-market-stocks .sp-companies-section .sp-section__head > p:not(.sp-home-eyebrow) {
	max-width: 795px !important;
}

html body .sp-page-market-stocks .sp-live-section .sp-section__head {
	max-width: 1146px !important;
}

html body .sp-page-market-stocks .sp-live-section .sp-section__head > p:not(.sp-home-eyebrow) {
	max-width: none !important;
}

html body .sp-page-market-stocks .sp-platmarkets .sp-section__head > p:not(.sp-home-eyebrow) {
	max-width: 472px !important;
}

/* ---------- Access leading global companies ---------- */
html body .sp-page-market-stocks .sp-companies {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body .sp-page-market-stocks .sp-companies__col {
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

html body .sp-page-market-stocks .sp-companies__col h3 {
	display: flex !important;
	height: 51px;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 0 32px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #fd404d !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 32px !important;
	letter-spacing: -0.32px !important;
	text-align: center;
	text-transform: none !important;
}

html body .sp-page-market-stocks .sp-companies__col ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

html body .sp-page-market-stocks .sp-companies__col li {
	display: flex !important;
	height: 51px;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 0 32px !important;
	border: 0 !important;
	background: #000 !important;
	color: #fff !important;
	font-size: 16px !important;
	line-height: 24px !important;
	letter-spacing: -0.32px !important;
	text-align: center;
}

html body .sp-page-market-stocks .sp-companies__col li:nth-child(even) {
	background: #111 !important;
}

/* ---------- Live prices ---------- */
html body .sp-page-market-stocks .sp-marketwidget {
	width: 1146px !important;
	max-width: 100% !important;
	height: 622px;
	margin: 0 auto !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 0 !important;
	border-radius: 16px !important;
	background: #111 !important;
}

html body .sp-page-market-stocks .sp-marketwidget .tradingview-widget-container,
html body .sp-page-market-stocks .sp-marketwidget iframe {
	height: 622px !important;
}

html body .sp-page-market-stocks .sp-marketwidget__note {
	width: 1029px !important;
	max-width: 100% !important;
	margin: 48px auto 0 !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--spf-muted) !important;
	font-size: 12px !important;
	line-height: 18px !important;
	letter-spacing: -0.24px !important;
	text-align: center !important;
}

html body .sp-page-market-stocks .sp-marketwidget__note::before {
	display: none !important;
}

/* ---------- Explore other markets ---------- */
html body .sp-page-market-stocks .sp-platmarkets__grid {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px 25px !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body .sp-page-market-stocks .sp-platmarket {
	display: flex !important;
	width: calc((100% - 50px) / 3) !important;
	flex-direction: column;
	align-items: flex-start;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: left !important;
}

html body .sp-page-market-stocks .sp-platmarket__art {
	display: flex !important;
	width: 100% !important;
	height: 300px !important;
	aspect-ratio: auto !important;
	align-items: center;
	justify-content: center;
	margin: 0 0 12px !important;
	padding: 0 !important;
	overflow: hidden;
	border: 0 !important;
	border-radius: 0 !important;
	background: #000 !important;
}

html body .sp-page-market-stocks .sp-platmarket__img {
	display: block !important;
	width: auto !important;
	max-width: 100% !important;
	height: 100% !important;
	aspect-ratio: 378 / 300;
	margin: 0 !important;
	border-radius: 0 !important;
	object-fit: cover !important;
}

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

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

html body .sp-page-market-stocks .sp-platmarket > a {
	display: inline-block !important;
	margin: 24px 0 0 !important;
	color: var(--spf-text) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	letter-spacing: -0.32px;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

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

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

html body .sp-page-market-stocks .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-market-stocks .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-market-stocks .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-market-stocks .sp-faq__item summary::-webkit-details-marker {
	display: none;
}

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

html body .sp-page-market-stocks .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-market-stocks .sp-faq__item[open] summary::after {
	top: 5px !important;
	transform: rotate(-135deg) !important;
}

html body .sp-page-market-stocks .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-market-stocks .sp-stocks-stats .sp-stats {
	margin-top: 0 !important;
}

html body .sp-page-market-stocks > .sp-stocks-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-market-stocks .sp-stocks-backbar .sp-container {
	display: flex;
	min-height: 54px;
	align-items: center;
}

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

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

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

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

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
	html body .sp-page-market-stocks > .sp-market-cta-hero .sp-platshow__row {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
	}

	html body .sp-page-market-stocks > .sp-market-cta-hero h1,
	html body .sp-page-market-stocks .sp-stocks-reference-copy h2,
	html body .sp-page-market-stocks .sp-whychoose__head h2 {
		font-size: 40px !important;
		line-height: 48px !important;
	}

	html body .sp-page-market-stocks .sp-stocks-reference-overview .sp-whygrid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 40px 24px !important;
	}

	html body .sp-page-market-stocks .sp-whychoose__items {
		width: 100% !important;
	}

	html body .sp-page-market-stocks .sp-platmarket {
		width: calc((100% - 25px) / 2) !important;
	}
}

@media (max-width: 900px) {
	html body .sp-page-market-stocks .sp-whychoose__items,
	html body .sp-page-market-stocks .sp-companies {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 720px) {
	html body .sp-page-market-stocks > .sp-market-cta-hero {
		padding: 48px 0 56px !important;
	}

	html body .sp-page-market-stocks > .sp-market-cta-hero .sp-platshow__row {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	html body .sp-page-market-stocks > .sp-market-cta-hero h1,
	html body .sp-page-market-stocks .sp-stocks-reference-copy h2,
	html body .sp-page-market-stocks .sp-whychoose__head h2,
	html body .sp-page-market-stocks .sp-stocks-faq .sp-section__head h2 {
		font-size: 32px !important;
		line-height: 40px !important;
	}

	html body .sp-page-market-stocks > .sp-market-cta-hero .sp-platshow__copy > p:not(.sp-figma-eyebrow),
	html body .sp-page-market-stocks .sp-stocks-reference-copy > p:not(.sp-home-eyebrow),
	html body .sp-page-market-stocks .sp-whychoose__head > p:not(.sp-home-eyebrow) {
		font-size: 16px !important;
		line-height: 24px !important;
	}

	html body .sp-page-market-stocks .sp-companies-section .sp-section__head h2,
	html body .sp-page-market-stocks .sp-platmarkets .sp-section__head h2 {
		width: auto !important;
	}

	html body .sp-page-market-stocks .sp-stocks-reference-overview .sp-whygrid,
	html body .sp-page-market-stocks .sp-whychoose__items,
	html body .sp-page-market-stocks .sp-companies {
		grid-template-columns: 1fr !important;
	}

	html body .sp-page-market-stocks > .sp-whychoose {
		padding: 56px 0 !important;
	}

	html body .sp-page-market-stocks .sp-stocks-reference-showcase {
		margin-top: 48px !important;
	}

	html body .sp-page-market-stocks .sp-marketwidget,
	html body .sp-page-market-stocks .sp-marketwidget .tradingview-widget-container,
	html body .sp-page-market-stocks .sp-marketwidget iframe {
		height: 520px !important;
	}

	html body .sp-page-market-stocks .sp-platmarket {
		width: 100% !important;
	}

	html body .sp-page-market-stocks .sp-platmarket__art {
		height: auto !important;
		aspect-ratio: 444 / 300 !important;
	}

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

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

/* Content column: override legacy 71.25rem stock-page containers. */
html body .sp-page-market-stocks > .sp-section > .sp-container,
html body .sp-page-market-stocks > .sp-stocks-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;
}

/* Legacy stock-page rules in main.css shrink these; restore Figma metrics. */
html body .sp-page-market-stocks .sp-btn {
	padding: 19px 20px !important;
	border-radius: 8px !important;
	font-size: 16px !important;
	line-height: 24px !important;
}

html body .sp-page-market-stocks .sp-ready-banner .sp-btn,
html body .sp-page-market-stocks .sp-final-cta .sp-btn {
	border-radius: 12px !important;
}

html body .sp-page-market-stocks > .sp-market-cta-hero .sp-platshow__copy h1 {
	max-width: none !important;
}

html body .sp-page-market-stocks .sp-stocks-reference-showcase__image {
	aspect-ratio: 912 / 513 !important;
}

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

html body .sp-page-market-stocks .sp-companies__col ul {
	border: 0 !important;
	border-radius: 0 !important;
}