/* =========================================================
   Stack Pips Markets — main.css
   Dark-only mode while the light theme is intentionally paused.
   Colors remain overridable from Customizer tokens.

   CSS NAVIGATION GUIDE FOR DEVELOPERS
   01. Global tokens, reset, container, buttons
   02. Global header and navigation
   03. Homepage sections
   04. Global footer
   05. Resource and legal pages
   06. Platform pages
   07. Contact, About, Partnership and Account pages
   08. Market and Crypto pages
   09. Figma/PRD alignment overrides and responsive rules

   Search for "PAGE:" or "GLOBAL COMPONENT:" to jump to a section.
   ========================================================= */

:root {
	--sp-accent: #fd404c;
	--sp-accent-soft: #2a1618;
	--sp-dark: #000000;
	--sp-light: #ffffff;

	/* Dark mode is the visual baseline, even before JavaScript runs. */
	--bg: #000000;
	--bg-alt: #131417;
	--surface: #1a1b1f;
	--text: #f4f4f5;
	--text-muted: #a3a6ad;
	--border: #26272c;
	--hero-bg: #000000;
	--hero-text: #ffffff;

	--radius: 12px;
	--radius-lg: 32px;
	--container: 1280px;
	--font: 'SN Pro', Arial, sans-serif;
}

[data-theme="dark"] {
	--bg: #000000;
	--bg-alt: #131417;
	--surface: #1a1b1f;
	--text: #f4f4f5;
	--text-muted: #a3a6ad;
	--border: #26272c;
	--sp-accent-soft: #2a1618;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: dark; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
	font-family: var(--font);
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	transition: background .25s ease, color .25s ease;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.sp-container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.sp-center { text-align: center; }
.sp-center-flex { justify-content: center; }

/* ---------- Buttons ---------- */
.sp-btn {
	display: inline-block;
	padding: 12px 26px;
	border-radius: 999px;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.sp-btn:hover { transform: translateY(-1px); }
.sp-btn:focus-visible { outline: 3px solid var(--sp-accent); outline-offset: 2px; }
.sp-btn--accent { background: var(--sp-accent); color: #fff; }
.sp-btn--accent:hover { box-shadow: 0 8px 22px rgba(240, 84, 84, .35); }
.sp-btn--white { background: #fff; color: #17181c; }
.sp-btn--outline { border-color: rgba(255,255,255,.6); color: #fff; background: transparent; }
.sp-btn--outline-light { border-color: rgba(255,255,255,.7); color: #fff; background: transparent; }
.sp-btn--outline-dark { border-color: var(--text); color: var(--text); background: transparent; }
.sp-btn--block { display: block; text-align: center; width: 100%; }

/* ---------- Header ---------- */
.sp-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--bg);
	/* Figma header is a continuous surface; no divider line below it. */
	border: 0;
	box-shadow: none;
}
.sp-header__inner {
	display: flex;
	align-items: center; gap: 28px;
	height: 76px;
}
.sp-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.35rem; letter-spacing: -.02em; }
.sp-logo__mark { display: inline-flex; align-items: flex-end; gap: 3px; height: 24px; }
.sp-logo__mark i { width: 5px; border-radius: 2px; background: var(--sp-accent); display: block; }
.sp-logo__mark i:nth-child(1) { height: 40%; }
.sp-logo__mark i:nth-child(2) { height: 60%; }
.sp-logo__mark i:nth-child(3) { height: 80%; }
.sp-logo__mark i:nth-child(4) { height: 100%; }

/* Logo side gets a minimum reserved width so it isn't drastically narrower
   than the actions side — this keeps the centered nav visually balanced
   without ever risking overlap (unlike absolute positioning, flex layout
   can never let siblings collide: the nav only ever gets the space that's
   actually left over after the logo and actions reserve theirs). */
.sp-logo-wrap, .sp-logo { flex-shrink: 0; }

.sp-nav { flex: 1 1 auto; min-width: 0; height: 100%; }
.sp-nav__list { display: flex; gap: 20px; height: 100%; list-style: none; justify-content: center; flex-wrap: nowrap; }
.sp-nav__list a { text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--text); opacity: .85; }
.sp-nav__list a:hover { opacity: 1; color: var(--sp-accent); }

.sp-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sp-theme-toggle {
	background: var(--bg-alt); border: 1px solid var(--border); color: var(--text);
	width: 40px; height: 40px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
[data-theme="light"] .sp-icon-moon, html:not([data-theme="dark"]) .sp-icon-moon { display: none; }
[data-theme="dark"] .sp-icon-sun { display: none; }
[data-theme="dark"] .sp-icon-moon { display: block; }

.sp-lang select { background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-family: inherit; }

.sp-burger { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; }
.sp-burger span { width: 22px; height: 2px; background: var(--text); display: block; border-radius: 2px; }

/* ---------- Hero ---------- */
.sp-hero { background: var(--hero-bg); color: var(--hero-text); overflow: hidden; }
.sp-hero__inner {
	display: grid; grid-template-columns: 1.1fr 1fr; align-items: center;
	gap: 40px; padding: 90px 24px 70px;
}
.sp-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.12; letter-spacing: -.02em; font-weight: 600; }
.sp-hero__copy p { margin: 20px 0 28px; color: rgba(255,255,255,.78); max-width: 46ch; }
.sp-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.sp-hero__bars { display: flex; align-items: flex-end; gap: 26px; height: 340px; justify-content: center; }
.sp-hero__bars i {
	display: block; width: 64px; height: var(--h);
	border-radius: 8px;
	background: linear-gradient(180deg, rgba(240,84,84,.95), rgba(240,84,84,.25));
	box-shadow: 0 0 40px rgba(240,84,84,.45), inset 0 0 18px rgba(255,255,255,.25);
	animation: sp-rise 1s ease both;
}
.sp-hero__bars i:nth-child(2) { animation-delay: .12s; }
.sp-hero__bars i:nth-child(3) { animation-delay: .24s; }
.sp-hero__bars i:nth-child(4) { animation-delay: .36s; }
@keyframes sp-rise { from { height: 0; opacity: 0; } to { opacity: 1; } }

.sp-ticker { background: #0a0a0c; border-top: 1px solid #1e1f24; min-height: 46px; }

/* ---------- Sections ---------- */
.sp-section { padding: 90px 0; }
.sp-section__head { text-align: center; max-width: 640px; margin: 0 auto 54px; }
.sp-section__head h2, .sp-features__intro h2 {
	font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
}
.sp-section__head p { margin-top: 14px; color: var(--text-muted); }
.sp-section__head mark { background: none; color: var(--sp-accent); text-decoration: underline; }

/* ---------- Features ---------- */
.sp-features__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; }
.sp-features__intro p { margin: 16px 0 26px; color: var(--text-muted); }
.sp-features__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 36px; }
.sp-feature h3 { font-size: 1.05rem; margin: 16px 0 8px; font-weight: 600; }
.sp-feature p { font-size: .92rem; color: var(--text-muted); }
.sp-feature__icon {
	display: inline-flex; width: 54px; height: 54px; border-radius: 12px;
	border: 2px dashed var(--sp-accent); background: var(--sp-accent-soft);
	position: relative;
}
.sp-feature__icon::after {
	content: ''; position: absolute; inset: 12px; border-radius: 50%;
	background: var(--sp-accent); opacity: .85;
	mask: radial-gradient(circle at 50% 50%, #000 55%, transparent 56%);
}
.sp-partner-line { margin-top: 64px; text-align: center; font-weight: 600; }
.sp-partner-line a { color: var(--text); }
.sp-partner-line a:hover { color: var(--sp-accent); }

/* ---------- Markets ---------- */
.sp-markets { background: var(--bg); }
.sp-markets__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 54px 44px; }
.sp-market__art {
	position: relative; height: 190px; overflow: hidden; margin-bottom: 18px;
	background: radial-gradient(circle at 50% 60%, var(--sp-accent-soft), transparent 70%);
	font-size: 4rem;
}
.sp-market h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 8px; }
.sp-market p { font-size: .93rem; color: var(--text-muted); margin-bottom: 10px; }
.sp-market a { font-weight: 600; font-size: .93rem; color: var(--text); }
.sp-market a:hover { color: var(--sp-accent); }

.sp-ready-banner {
	margin-top: 80px; border-radius: var(--radius-lg);
	background: linear-gradient(100deg, #000000 0%, #1a1013 60%, #2a1417 100%);
	color: #fff; padding: 64px 56px;
}
.sp-ready-banner h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; }
.sp-ready-banner p { margin: 14px 0 26px; color: rgba(255,255,255,.78); max-width: 44ch; }

/* ---------- Accounts ---------- */
.sp-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sp-tier {
	border: 1px solid var(--border); border-radius: var(--radius-lg);
	background: var(--surface); padding: 34px 30px;
	display: flex; flex-direction: column;
	transition: box-shadow .2s ease, transform .2s ease;
}
.sp-tier:hover { box-shadow: 0 16px 40px rgba(0,0,0,.08); transform: translateY(-3px); }
.sp-tier--featured { border-color: var(--sp-accent); background: var(--sp-accent-soft); }
.sp-tier h3 { font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-tier__badge {
	font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
	background: var(--sp-accent); color: #fff; padding: 4px 10px; border-radius: 999px;
}
.sp-tier__sub { color: var(--text-muted); font-size: .92rem; margin: 8px 0 20px; }
.sp-tier ul { list-style: none; margin-bottom: 26px; flex: 1; }
.sp-tier li {
	padding: 12px 0 12px 30px; border-bottom: 1px solid var(--border);
	font-size: .93rem; position: relative;
}
.sp-tier li::before {
	content: '✓'; position: absolute; left: 0; top: 12px;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--sp-accent); color: #fff;
	font-size: .7rem; display: flex; align-items: center; justify-content: center;
}
.sp-demo-line { text-align: center; margin-top: 40px; font-weight: 600; }
.sp-demo-line a { color: var(--text); }
.sp-demo-line a:hover { color: var(--sp-accent); }

/* ---------- Steps ---------- */
.sp-steps { border-top: 1px solid var(--border); }
.sp-steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; list-style: none; margin-bottom: 48px; }
.sp-step__num {
	display: inline-flex; width: 40px; height: 40px; border-radius: 50%;
	background: var(--sp-accent); color: #fff; font-weight: 600;
	align-items: center; justify-content: center; margin-bottom: 16px;
}
.sp-step h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.sp-step p { font-size: .92rem; color: var(--text-muted); }

/* ---------- Funded banner & stats ---------- */
.sp-funded {
	border-radius: var(--radius-lg); padding: 64px 56px; color: #fff;
	background: linear-gradient(110deg, #000000 30%, #201014 100%);
	position: relative; overflow: hidden;
}
.sp-funded::after {
	content: ''; position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
	width: 320px; height: 320px; border-radius: 50%;
	border: 14px solid var(--sp-accent);
	box-shadow: 0 0 60px rgba(240,84,84,.6);
	opacity: .8;
}
.sp-funded h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; max-width: 20ch; }
.sp-funded p { margin: 14px 0 26px; color: rgba(255,255,255,.78); max-width: 48ch; }

.sp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; }
.sp-stat {
	background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
	text-align: center; padding: 30px 16px;
}
.sp-stat strong { display: block; font-size: 1.9rem; font-weight: 600; color: var(--sp-accent); }
.sp-stat span { color: var(--text-muted); font-size: .92rem; }

/* ---------- Calendar ---------- */
.sp-calendar { border-top: 1px solid var(--border); }

/* ---------- Payments ---------- */
.sp-payments { background: var(--bg-alt); }
.sp-payments__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: nowrap; }
.sp-payments h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.25; flex-shrink: 0; }
.sp-payments__logos {
	display: flex; flex-wrap: wrap;
	gap: 16px 32px;
	max-width: 480px;
	list-style: none;
}
.sp-payments__logos li {
	font-weight: 600; font-size: 1.1rem; color: var(--text-muted);
}

/* ---------- Final CTA ---------- */
.sp-final-cta {
	background: var(--sp-accent); color: #fff; padding: 100px 0;
	position: relative; overflow: hidden;
}
.sp-final-cta h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 600; line-height: 1.2; }
.sp-final-cta p { margin: 16px 0 30px; opacity: .92; }
.sp-final-cta__points {
	display: flex; gap: 28px; justify-content: center; list-style: none;
	margin-top: 34px; flex-wrap: wrap; font-size: .92rem; font-weight: 600;
}
.sp-final-cta__points li { display: inline-flex; align-items: center; gap: 6px; }
.sp-final-cta__points li::before {
	content: ''; display: block; width: 14px; height: 14px; flex: 0 0 14px;
	background: url('/wp-content/uploads/2026/08/tick-bullet.svg') center / contain no-repeat;
}

/* =========================================================
   GLOBAL COMPONENT: FOOTER
   Used on every page. Markup lives in footer.php.
   Footer text/email: WP Admin -> Appearance -> Customize.
   Footer columns: WP Admin -> Appearance -> Menus.
   ========================================================= */

/* Entire dark footer surface and its desktop outer spacing. */
.sp-footer {
	background: #1a1a1a;
	color: #d5d6da;
	padding: 40px 0 24px;
}

/* Brand column on the left and six navigation columns on the right. */
.sp-footer__top {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	align-items: start;
	gap: 72px;
}

/* Keeps the fallback text logo readable on the dark footer. */
.sp-footer .sp-logo { color: #ffffff; }

/* Short Axi introducer statement directly below the logo. */
.sp-footer__tagline {
	max-width: 260px;
	margin-top: 10px;
	font-size: .625rem;
	line-height: 1rem;
	color: #a3a6ad;
}

/* Compact language control shown below the introducer statement. */
.sp-footer__language {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	margin-top: 14px;
	padding: 6px 10px;
	border: 1px solid #303136;
	border-radius: 8px;
	color: #f4f4f5;
	font-size: .75rem;
	line-height: 1rem;
}

/* Globe icon inside the footer language control. */
.sp-footer__language-icon,
.sp-footer__language-icon svg { width: 18px; height: 18px; flex: 0 0 18px; }

/* Polylang select inherits the compact dark footer styling. */
.sp-footer__language select {
	appearance: none;
	min-width: 66px;
	border: 0;
	outline: 0;
	background: transparent;
	color: inherit;
	font: inherit;
}

/* Small downward caret used by the static language fallback. */
.sp-footer__language-caret {
	width: 7px;
	height: 7px;
	margin-left: 2px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

/* Six equal navigation columns: Markets through Legal. */
.sp-footer__cols {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 30px;
}

/* Footer navigation column titles. */
.sp-footer__col h3 {
	margin-bottom: 12px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5rem;
	color: #f4f4f5;
}

/* Removes WordPress menu list bullets. */
.sp-footer__col ul { list-style: none; }

/* Vertical rhythm between individual footer links. */
.sp-footer__col li { margin-bottom: 7px; }

/* Footer navigation link typography. */
.sp-footer__col a {
	color: #d5d6da;
	font-size: .75rem;
	line-height: 1.125rem;
	text-decoration: none;
}

/* Visible hover and keyboard-focus state for footer links. */
.sp-footer__col a:hover,
.sp-footer__col a:focus-visible { color: #ffffff; text-decoration: underline; }

/* Regulatory copy separated from the navigation by a subtle divider. */
.sp-footer__legal {
	margin-top: 32px;
	padding-top: 18px;
	border-top: 1px solid #2b2c30;
}

/* Each blank-line-separated disclosure becomes its own paragraph. */
.sp-footer__legal p {
	margin: 0 0 12px;
	color: #a3a6ad;
	font-size: .625rem;
	line-height: .9375rem;
}
.sp-footer__legal p:last-child { margin-bottom: 0; }

/* Final row: copyright on the left, both email contacts on the right. */
.sp-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	margin-top: 14px;
	padding-top: 18px;
	border-top: 1px solid #2b2c30;
	color: #a3a6ad;
	font-size: .625rem;
	line-height: .9375rem;
}

/* Groups general email and Axi support email in the bottom-right corner. */
.sp-footer__contacts { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* Contact links stay legible and are underlined like the Figma reference. */
.sp-footer__bottom a { color: #d5d6da; text-decoration: underline; }

/* ---------- Responsive (PRD 6.4: no horizontal clipping) ---------- */
@media (max-width: 1024px) {
	.sp-features__grid { grid-template-columns: 1fr; }
	.sp-features__items { grid-template-columns: repeat(2, 1fr); }
	.sp-markets__grid { grid-template-columns: repeat(2, 1fr); }
	.sp-tiers { grid-template-columns: 1fr; }
	.sp-steps__grid { grid-template-columns: repeat(2, 1fr); }
	.sp-stats { grid-template-columns: repeat(2, 1fr); }
	.sp-footer__top { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
	.sp-nav { display: none; position: absolute; top: 76px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 20px 24px; }
	.sp-nav.is-open { display: block; }
	.sp-nav__list { flex-direction: column; gap: 14px; }
	.sp-burger { display: flex; }
	.sp-header__actions .sp-btn { display: none; }
	.sp-hero__inner { grid-template-columns: 1fr; padding: 60px 24px 50px; }
	.sp-hero__bars { height: 220px; }
	.sp-features__items,
	.sp-markets__grid,
	.sp-steps__grid,
	.sp-stats { grid-template-columns: 1fr; }
	.sp-ready-banner, .sp-funded { padding: 44px 28px; }
	.sp-funded::after { display: none; }
	.sp-payments__inner { flex-direction: column; align-items: flex-start; flex-wrap: wrap; }
}

/* =========================================================
   v1.1 fixes — logo, dropdowns, admin bar, platforms section
   ========================================================= */

/* ---------- Logo: separate light & dark versions (own uploader, no cropping) ---------- */
.sp-logo-wrap { display: inline-flex; align-items: center; flex-shrink: 0; }
.sp-logo-link, .custom-logo-link { display: inline-flex; align-items: center; }
.sp-logo-img, .custom-logo { display: block; height: 40px; width: auto; max-width: 220px; }

/* When a dark-mode logo is uploaded: swap by theme */
.sp-logo-link--dark { display: none; }
[data-theme="dark"] .has-dark-logo .sp-logo-link--light,
[data-theme="dark"] .has-dark-logo .custom-logo-link { display: none; }
[data-theme="dark"] .has-dark-logo .sp-logo-link--dark { display: inline-flex; }

/* Fallback when NO dedicated dark-mode logo is uploaded: wrap the light logo
   in a small white card so it stays legible on dark backgrounds. We do NOT
   use CSS filters (invert) here -- inverting a raster logo with an opaque
   background produces a solid blank block, and inverting a transparent
   colored logo shifts its brand colors (red -> cyan). A plain white card
   is the only approach that works for any logo file type. */
[data-theme="dark"] .sp-logo-wrap:not(.has-dark-logo) .sp-logo-link--light,
[data-theme="dark"] .sp-logo-wrap:not(.has-dark-logo) .custom-logo-link {
	background: #fff;
	padding: 6px 16px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
}

/* Footer logo (footer is always dark) */
.sp-footer__logo img, .sp-footer__logo .custom-logo { max-height: 40px; width: auto; }
.sp-footer__logo--inverted .custom-logo-link {
	background: #fff;
	padding: 6px 16px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
}

/* ---------- Generic light/dark image swap (markets, platforms, payments, nav icons) ---------- */
.sp-dual-img { display: contents; }
.sp-dual-img__dark { display: none; }
[data-theme="dark"] .sp-dual-img.has-dark .sp-dual-img__light { display: none; }
[data-theme="dark"] .sp-dual-img.has-dark .sp-dual-img__dark { display: block; }

/* Admin bar offset for logged-in users (sticky header was hidden under it) */
body.admin-bar .sp-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .sp-header { top: 46px; } }

/* ---------- Dropdown submenus ---------- */
.sp-nav__list > li {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
}
.sp-nav__list .sub-menu {
	/* Slight overlap removes the dead hover gap between parent and submenu. */
	position: absolute; top: calc(100% - 8px); left: 50%; transform: translateX(-50%) translateY(4px);
	min-width: 220px; padding: 10px;
	background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
	box-shadow: 0 18px 44px rgba(0,0,0,.14);
	list-style: none;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
	z-index: 90;
}
.sp-nav__list > li:hover > .sub-menu,
.sp-nav__list > li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.sp-nav__list .sub-menu li { display: block; }
.sp-nav__list .sub-menu a {
	display: block; padding: 9px 12px; border-radius: 8px;
	font-size: .9rem; font-weight: 600; opacity: 1;
}
.sp-nav__list .sub-menu a:hover { background: var(--bg-alt); color: var(--sp-accent); }

/* Language switcher select: compact */
.sp-lang select { max-width: 140px; font-size: .85rem; cursor: pointer; }

/* Feature icons v2: filled soft square with inline SVG */
.sp-feature__icon {
	border: 0; background: var(--sp-accent-soft);
	width: 56px; height: 56px; border-radius: 14px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--sp-accent);
	outline: 1.5px dashed color-mix(in srgb, var(--sp-accent) 55%, transparent);
	outline-offset: 4px;
}
.sp-feature__icon::after { content: none; }

/* Market cards: glyph placeholder until real illustrations are uploaded */
/* (legacy .sp-market__art img rule removed — all market images now carry
   the .sp-market__img class and are sized via the rule near the bottom
   of this file; the old rule's max-height:160px was clipping them.) */
.sp-market__glyph {
	font-weight: 600; font-size: 2.2rem; letter-spacing: .04em;
	color: var(--sp-accent);
	text-shadow: 0 6px 26px color-mix(in srgb, var(--sp-accent) 45%, transparent);
}

/* Platforms section */
.sp-platforms { border-top: 1px solid var(--border); }
.sp-platforms__img { margin: 0 auto 36px; max-height: 460px; object-fit: contain; }

/* Ticker strip min-height so hero doesn't jump while widget loads */
.sp-ticker { min-height: 72px; }
#sp-tv-ticker { min-height: 72px; }

/* ---------- Mobile nav v2 (breakpoint aligned with JS: 860px) ---------- */
@media (max-width: 860px) {
	.sp-nav {
		display: none; position: absolute; top: 100%; left: 0; right: 0;
		background: var(--bg); border-bottom: 1px solid var(--border);
		padding: 18px 24px; max-height: calc(100vh - 120px); overflow-y: auto;
	}
	.sp-nav.is-open { display: block; }
	.sp-nav__list { flex-direction: column; gap: 4px; height: auto; }
	.sp-nav__list > li { display: block; height: auto; }
	.sp-nav__list a { display: block; padding: 10px 4px; }
	.sp-burger { display: flex; }
	.sp-header__cta { display: none; }

	/* Submenus become accordions */
	.sp-nav__list .sub-menu {
		position: static; transform: none; opacity: 1; visibility: hidden;
		display: none; box-shadow: none; border: 0; border-left: 2px solid var(--border);
		border-radius: 0; padding: 0 0 0 14px; margin: 2px 0 8px; min-width: 0;
		pointer-events: auto;
	}
	.sp-nav__list li.is-open > .sub-menu { display: block; visibility: visible; }
}

/* =========================================================
   v2.0 — real client assets wired in
   ========================================================= */

/* Feature icons: now real SVG images instead of drawn brackets */
.sp-feature__icon {
	background: transparent; outline: none;
	width: 56px; height: 56px; padding: 0;
}
.sp-feature__icon img { width: 44px; height: 44px; }

/* Market card artwork: real light/dark photography */
.sp-market__art img.sp-market__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}

/* Platforms section image wrapper */
.sp-platforms__imgwrap { display: flex; justify-content: center; }

/* Partner logos row (MetaTrader 4/5, Axi, etc.) */
.sp-platforms__logos {
	display: flex; align-items: center; justify-content: center;
	gap: 40px; flex-wrap: wrap; list-style: none;
	margin-bottom: 40px;
}
.sp-platforms__logos img.sp-platforms__logo { height: 44px; width: auto; }
.sp-platforms__logos a { display: inline-flex; align-items: center; transition: opacity .15s ease; }
.sp-platforms__logos a:hover { opacity: .8; }

/* Small gap after the logos, bigger gap before the laptop screenshot below */
.sp-platforms__cta { margin: 8px 0 56px; }
.sp-platforms__cta .sp-btn { border-radius: 12px; }

/* Steps: icon + numbered badge, badge overlaps icon's corner */
.sp-step__iconwrap {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; margin-bottom: 18px;
}
.sp-step__icon { width: 40px; height: 40px; }
.sp-step__badge {
	position: absolute; top: -6px; left: -6px; width: 26px; height: 26px;
}

/* Tier checklist: real tick icon instead of CSS pseudo-check */
.sp-tier ul.has-icon-bullets li::before { content: none; }
.sp-tier ul.has-icon-bullets li { padding-left: 30px; display: flex; align-items: center; gap: 10px; }
.sp-tier__bullet-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* "Most Popular" badge as a graphic instead of plain text */
.sp-tier__badge { background: none; padding: 0; display: inline-flex; }
.sp-tier__badge img { height: 17px; width: auto; }

/* Payment logos row: real brand marks, swap by theme */
.sp-payments__logos li {
	background: none; border: none; padding: 0;
	display: flex; align-items: center;
}
.sp-payments__logos img.sp-payments__logo { height: 32px; width: auto; }

/* Nav: theme toggle + dropdown arrow now driven by uploaded icons */
/* Figma: moon icon sits inside a dark rounded square with a subtle border */
.sp-theme-toggle {
	width: 44px; height: 44px; border-radius: 12px;
	background-color: var(--surface); border: 1px solid var(--border);
	background-repeat: no-repeat; background-position: center;
	background-size: 20px 20px; background-image: var(--nav-toggle-light);
	cursor: pointer;
}
[data-theme="dark"] .sp-theme-toggle { background-image: var(--nav-toggle-dark); }

/* Figma shows a chevron on EVERY top-level nav item. Drawn with plain CSS
   borders (currentColor) instead of an SVG background-image: zero external
   dependencies, so it renders in every browser no matter what. */
.sp-nav__list > li > a::after {
	content: ''; display: inline-block;
	width: 7px; height: 7px; margin-left: 8px; margin-bottom: 2px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	border-top: none; border-left: none;
	transform: rotate(45deg);
	opacity: .7;
	vertical-align: middle;
}
/* ...but not inside dropdown panels or the mobile accordion */
.sp-nav__list .sub-menu a::after { content: none; }

/* Language selector — Figma shows just globe + small caret. The real
   <select> (from Polylang/WPML) is stretched invisibly over the icons so
   clicking the globe still opens the native language picker. */
.sp-lang { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 4px; color: var(--text); }
.sp-lang__glyph { display: inline-flex; width: 20px; height: 20px; }
.sp-lang__glyph svg { width: 100%; height: 100%; }
.sp-lang__caret {
	display: inline-block; width: 7px; height: 7px; margin-bottom: 2px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: rotate(45deg);
	opacity: .7;
}
.sp-lang select {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	opacity: 0; cursor: pointer; max-width: none; border: none;
}

/* =========================================================
   Resources page (Figma node 1289-5319)
   ========================================================= */

/* ---------- Breadcrumb ---------- */
.sp-breadcrumb { padding: 26px 0 0; font-size: .85rem; color: var(--text-muted); }
.sp-breadcrumb a { text-decoration: none; color: var(--text-muted); }
.sp-breadcrumb a:hover { color: var(--sp-accent); }
.sp-breadcrumb .sp-breadcrumb__sep { margin: 0 6px; opacity: .5; }
.sp-breadcrumb .sp-breadcrumb__current { color: var(--sp-accent); font-weight: 600; }

/* ---------- Page header (title + intro) ---------- */
.sp-page-head { text-align: center; padding: 48px 0 20px; max-width: 680px; margin: 0 auto; }
.sp-page-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.sp-page-head p { margin-top: 16px; color: var(--text-muted); }

/* ---------- Resource list (alternating image/content rows) ---------- */
.sp-resources__list { display: flex; flex-direction: column; gap: 24px; margin-top: 44px; }
.sp-resource {
	display: grid; grid-template-columns: 1fr 1fr;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
	overflow: hidden;
}
.sp-resource__art {
	position: relative; order: 2; min-height: 280px;
	background: radial-gradient(circle at 38% 42%, var(--sp-accent-soft), var(--bg-alt) 72%);
}
.sp-resource__art img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.sp-resource__body {
	order: 1; padding: 50px 54px;
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.sp-resource.is-reverse .sp-resource__art { order: 1; }
.sp-resource.is-reverse .sp-resource__body { order: 2; }
.sp-resource__body h3 { font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 14px; }
.sp-resource__body p { color: var(--text-muted); max-width: 46ch; margin-bottom: 26px; }

.sp-resources__top { text-align: center; margin-top: 40px; font-size: .85rem; }
.sp-resources__top a { color: var(--text-muted); text-decoration: none; font-weight: 600; }
.sp-resources__top a:hover { color: var(--sp-accent); }

/* ---------- Resource detail page (e.g. /resources/economic-calendar) ---------- */
.sp-resource-detail__embed { max-width: 700px; margin: 10px auto 0; }

.sp-faq { max-width: 780px; margin: 20px auto 0; display: flex; flex-direction: column; gap: 14px; }
.sp-faq__item {
	border: 1px solid color-mix(in srgb, var(--sp-accent) 32%, var(--border));
	background: var(--bg-alt); border-radius: 12px; padding: 4px 22px;
}
.sp-faq__item summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 18px 0; font-weight: 600;
}
.sp-faq__item summary::-webkit-details-marker { display: none; }
.sp-faq__item summary::after {
	content: ''; flex-shrink: 0; width: 8px; height: 8px;
	border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
	transform: rotate(45deg); transition: transform .2s ease;
}
.sp-faq__item[open] summary::after { transform: rotate(-135deg); }
.sp-faq__item p { color: var(--text-muted); font-size: .92rem; padding-bottom: 20px; margin-top: -4px; max-width: 68ch; }

/* ---------- Trading Calculators page ---------- */
.sp-calc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 54px 70px; margin-top: 50px; }
.sp-calc__icon {
	position: relative; width: 60px; height: 60px; margin-bottom: 18px;
	display: inline-flex; align-items: center; justify-content: center; color: var(--sp-accent);
}
.sp-calc__icon i { position: absolute; width: 16px; height: 16px; display: block; }
.sp-calc__icon i:nth-child(1) { top: 0; left: 0; border-top: 2px solid currentColor; border-left: 2px solid currentColor; border-radius: 5px 0 0 0; }
.sp-calc__icon i:nth-child(2) { top: 0; right: 0; border-top: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 0 5px 0 0; }
.sp-calc__icon i:nth-child(3) { bottom: 0; left: 0; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; border-radius: 0 0 0 5px; }
.sp-calc__icon i:nth-child(4) { bottom: 0; right: 0; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 0 0 5px 0; }
.sp-calc__icon svg { width: 26px; height: 26px; position: relative; }
.sp-calc h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.sp-calc p { font-size: .92rem; color: var(--text-muted); max-width: 44ch; margin-bottom: 20px; }

@media (max-width: 720px) {
	.sp-calc-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 720px) {
	.sp-resource, .sp-resource.is-reverse { grid-template-columns: 1fr; }
	.sp-resource__art, .sp-resource.is-reverse .sp-resource__art { order: 1; min-height: 200px; }
	.sp-resource__body, .sp-resource.is-reverse .sp-resource__body { order: 2; padding: 32px 26px; }
}

/* ---------- Legal Documentations page ---------- */
.sp-legal-list { max-width: 900px; margin: 44px auto 0; }
.sp-legal-list__item {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 26px 4px; border-bottom: 1px solid var(--border);
}
.sp-legal-list__item:first-child { border-top: 1px solid var(--border); }
.sp-legal-list__title { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.sp-legal-list__meta { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.sp-legal-list__item .sp-btn { flex-shrink: 0; }

@media (max-width: 640px) {
	.sp-legal-list__item { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Legal doc body (Complaints / Privacy / Terms) ---------- */
.sp-legal-doc__body h1 { font-size: 1.6rem; font-weight: 600; margin-bottom: 20px; }
.sp-legal-doc__body h2 { font-size: 1.1rem; font-weight: 600; margin: 34px 0 12px; }
.sp-legal-doc__body p { color: var(--text-muted); line-height: 1.75; margin-bottom: 16px; }
.sp-legal-doc__updated { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); font-size: .82rem; color: var(--text-muted); }

.sp-platshow__row {
	display: grid; grid-template-columns: 1fr 1fr; align-items: center;
	gap: 56px; padding: 48px 0; border-bottom: 1px solid var(--border);
}
.sp-platshow__row:first-child { padding-top: 0; }
.sp-platshow__row:last-child { border-bottom: none; padding-bottom: 0; }
.sp-platshow__row--reverse .sp-platshow__copy { order: 2; }
.sp-platshow__row--reverse .sp-platshow__media { order: 1; }
 
.sp-platshow__badge {
	display: inline-flex; align-items: center; gap: 8px;
	margin-bottom: 14px; font-weight: 600; font-size: .88rem; color: var(--text-muted);
}
.sp-platshow__badge-icon { height: 22px; width: auto; }
.sp-platshow__copy h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.sp-platshow__copy p { margin: 14px 0 24px; color: var(--text-muted); max-width: 46ch; }
 
.sp-platshow__media { display: flex; justify-content: center; }
.sp-platshow__img { width: 100%; max-width: 480px; border-radius: var(--radius-lg); object-fit: cover; }
.sp-platshow__placeholder {
	width: 100%; max-width: 480px; aspect-ratio: 4/3; border-radius: var(--radius-lg);
	background: var(--bg-alt); border: 1px dashed var(--border);
}
 
@media (max-width: 860px) {
	.sp-platshow__row { grid-template-columns: 1fr; gap: 28px; text-align: center; }
	.sp-platshow__row--reverse .sp-platshow__copy,
	.sp-platshow__row--reverse .sp-platshow__media { order: initial; }
	.sp-platshow__copy p { margin-left: auto; margin-right: auto; }
	.sp-platshow__badge { justify-content: center; }
}

/* Soft gradient wash behind the Platforms page title — contained with
   overflow:hidden so nothing can bleed or clip oddly outside the box. */
.sp-platforms-hero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(circle at 75% 20%, var(--sp-accent-soft), transparent 55%);
}

/* =========================================================
   MetaTrader 4 page (/platforms/metatrader-4/)
   ========================================================= */

/* ---------- Download banner ---------- */
.sp-dlband { background: var(--sp-accent); color: #fff; padding: 56px 0; }
.sp-dlband h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; }
.sp-dlband p { margin: 12px auto 28px; max-width: 620px; opacity: .92; font-size: .93rem; }
.sp-dlband__list {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; list-style: none;
}
.sp-dlband__list a {
	display: inline-block; padding: 10px 20px; border-radius: 999px;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4);
	color: #fff; text-decoration: none; font-weight: 600; font-size: .88rem;
	transition: background .15s ease;
}
.sp-dlband__list a:hover { background: rgba(255,255,255,.26); }

/* ---------- "Why trade" 4-item feature grid ---------- */
.sp-whygrid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
	margin-top: 48px;
}
.sp-whygrid__icon {
	display: block; width: 40px; height: 40px; margin-bottom: 14px;
	border-radius: 10px; background: var(--sp-accent-soft);
	position: relative;
}
.sp-whygrid__icon::after {
	content: ''; position: absolute; inset: 10px; border-radius: 50%;
	border: 2px solid var(--sp-accent);
}
.sp-whygrid__item h3 { font-size: .98rem; font-weight: 600; margin-bottom: 6px; }
.sp-whygrid__item p { font-size: .86rem; color: var(--text-muted); }

/* ---------- Small icon-style market grid (reuses homepage market content) ---------- */
.sp-platmarkets__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.sp-platmarket__art {
	position: relative; width: 84px; height: 84px; margin-bottom: 16px;
	border-radius: 50%; overflow: hidden;
	background: var(--bg-alt);
}
.sp-platmarket__art img.sp-platmarket__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.sp-platmarket h3 { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.sp-platmarket p { font-size: .88rem; color: var(--text-muted); margin-bottom: 8px; }
.sp-platmarket a { font-weight: 600; font-size: .88rem; color: var(--text); }
.sp-platmarket a:hover { color: var(--sp-accent); }

@media (max-width: 860px) {
	.sp-whygrid { grid-template-columns: repeat(2, 1fr); }
	.sp-platmarkets__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.sp-whygrid { grid-template-columns: 1fr; text-align: center; }
	.sp-whygrid__icon { margin-left: auto; margin-right: auto; }
	.sp-platmarkets__grid { grid-template-columns: 1fr; text-align: center; }
	.sp-platmarket__art { margin-left: auto; margin-right: auto; }
}

/* Small "Available on ..." footnote under the hero buttons */
.sp-platshow__avail { margin-top: 16px; font-size: .78rem; color: var(--text-muted); }

/* "‹ Back to Platforms" link before the payments section */
.sp-back-link { text-align: center; padding: 30px 0 0; }
.sp-back-link a { font-size: .85rem; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.sp-back-link a:hover { color: var(--sp-accent); }

/* Icon-only badge variant (Axi Trading Platform hero — just the logo mark,
   no text label beside it). No extra background here: the axi-app.png
   asset already has its own red rounded-square background baked in. */
.sp-platshow__badge--icononly { display: inline-flex; margin-bottom: 18px; }
.sp-platshow__badge--icononly .sp-platshow__badge-icon {
	height: 44px; width: 44px; object-fit: contain; border-radius: 10px;
}

/* "How copy trading works" — 3-column numbered steps, reusing the same
   red circle number style already defined for .sp-step__num on the homepage. */
.sp-copysteps__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;
	list-style: none; margin-top: 48px;
}

/* Small fine-print / risk-disclaimer note under a feature grid */
.sp-finenote {
	margin-top: 28px; font-size: .78rem; color: var(--text-muted);
	text-align: center; max-width: 700px; margin-left: auto; margin-right: auto;
}

@media (max-width: 720px) {
	.sp-copysteps__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   MetaTrader 4 page (/platforms/metatrader-4/)
   ========================================================= */

/* ---------- Download banner ---------- */
.sp-dlband { background: var(--sp-accent); color: #fff; padding: 56px 0; }
.sp-dlband h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; }
.sp-dlband p { margin: 12px auto 28px; max-width: 620px; opacity: .92; font-size: .93rem; }
.sp-dlband__list {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; list-style: none;
}
.sp-dlband__list a {
	display: inline-block; padding: 10px 20px; border-radius: 999px;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4);
	color: #fff; text-decoration: none; font-weight: 600; font-size: .88rem;
	transition: background .15s ease;
}
.sp-dlband__list a:hover { background: rgba(255,255,255,.26); }

/* ---------- "Why trade" 4-item feature grid ---------- */
.sp-whygrid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
	margin-top: 48px;
}
.sp-whygrid__icon {
	display: block; width: 40px; height: 40px; margin-bottom: 14px;
	border-radius: 10px; background: var(--sp-accent-soft);
	position: relative;
}
.sp-whygrid__icon::after {
	content: ''; position: absolute; inset: 10px; border-radius: 50%;
	border: 2px solid var(--sp-accent);
}
.sp-whygrid__item h3 { font-size: .98rem; font-weight: 600; margin-bottom: 6px; }
.sp-whygrid__item p { font-size: .86rem; color: var(--text-muted); }

/* ---------- Small icon-style market grid (reuses homepage market content) ---------- */
.sp-platmarkets__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.sp-platmarket__art {
	position: relative; width: 84px; height: 84px; margin-bottom: 16px;
	border-radius: 50%; overflow: hidden;
	background: var(--bg-alt);
}
.sp-platmarket__art img.sp-platmarket__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.sp-platmarket h3 { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.sp-platmarket p { font-size: .88rem; color: var(--text-muted); margin-bottom: 8px; }
.sp-platmarket a { font-weight: 600; font-size: .88rem; color: var(--text); }
.sp-platmarket a:hover { color: var(--sp-accent); }

@media (max-width: 860px) {
	.sp-whygrid { grid-template-columns: repeat(2, 1fr); }
	.sp-platmarkets__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.sp-whygrid { grid-template-columns: 1fr; text-align: center; }
	.sp-whygrid__icon { margin-left: auto; margin-right: auto; }
	.sp-platmarkets__grid { grid-template-columns: 1fr; text-align: center; }
	.sp-platmarket__art { margin-left: auto; margin-right: auto; }
}

/* Small "Available on ..." footnote under the hero buttons */
.sp-platshow__avail { margin-top: 16px; font-size: .78rem; color: var(--text-muted); }

/* "‹ Back to Platforms" link before the payments section */
.sp-back-link { text-align: center; padding: 30px 0 0; }
.sp-back-link a { font-size: .85rem; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.sp-back-link a:hover { color: var(--sp-accent); }

/* Icon-only badge variant (Axi Trading Platform hero — just the logo mark,
   no text label beside it). No extra background here: the axi-app.png
   asset already has its own red rounded-square background baked in. */
.sp-platshow__badge--icononly { display: inline-flex; margin-bottom: 18px; }
.sp-platshow__badge--icononly .sp-platshow__badge-icon {
	height: 44px; width: 44px; object-fit: contain; border-radius: 10px;
}

/* "How copy trading works" — 3-column numbered steps, reusing the same
   red circle number style already defined for .sp-step__num on the homepage. */
.sp-copysteps__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;
	list-style: none; margin-top: 48px;
}

/* Small fine-print / risk-disclaimer note under a feature grid */
.sp-finenote {
	margin-top: 28px; font-size: .78rem; color: var(--text-muted);
	text-align: center; max-width: 700px; margin-left: auto; margin-right: auto;
}

@media (max-width: 720px) {
	.sp-copysteps__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Contact Us page (/contact-us/)
   ========================================================= */

.sp-contact-hero { text-align: center; }
.sp-contact-hero__inner { padding: 20px 0 56px; }
.sp-contact-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 600; }
.sp-contact-hero p { margin: 16px auto 0; max-width: 560px; color: var(--text-muted); }

/* Success / error notice above the form */
.sp-form-notice {
	max-width: 720px; margin: 0 auto 24px; padding: 14px 20px; border-radius: var(--radius);
	font-size: .92rem; font-weight: 600; text-align: left;
}
.sp-form-notice--success { background: #e9f8ee; color: #1e7a3d; border: 1px solid #b6e6c4; }
[data-theme="dark"] .sp-form-notice--success { background: #123b23; color: #7fe3a3; border-color: #1c5c34; }
.sp-form-notice--error { background: #fdecec; color: #b3261e; border: 1px solid #f3c2c0; }
[data-theme="dark"] .sp-form-notice--error { background: #3a1414; color: #ff9d97; border-color: #5c2320; }

/* Contact form */
.sp-contact-form {
	max-width: 720px; margin: 0 auto; text-align: left;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
	padding: 44px;
}
.sp-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 20px; }
.sp-field { display: flex; flex-direction: column; gap: 8px; font-size: .88rem; font-weight: 600; margin-bottom: 20px; }
.sp-contact-form__row .sp-field { margin-bottom: 0; }
.sp-field input, .sp-field textarea {
	font-family: inherit; font-size: .95rem; font-weight: 400;
	padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
	background: var(--bg); color: var(--text); resize: vertical;
}
.sp-field input:focus, .sp-field textarea:focus { outline: 2px solid var(--sp-accent); outline-offset: 1px; }
.sp-contact-form button[type="submit"] { margin-top: 6px; }

/* Honeypot field — visually hidden, still reachable by simple bots that fill every field */
.sp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Offices grid */
.sp-offices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 48px; }
.sp-office__flag {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%; font-size: 1.3rem;
	background: var(--bg-alt); border: 1px solid var(--border); margin-bottom: 14px;
}
.sp-office h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 6px; }
.sp-office p { font-size: .88rem; color: var(--text-muted); }

/* Two red contact boxes */
.sp-contactboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sp-contactbox {
	background: var(--sp-accent); color: #fff; border-radius: var(--radius-lg);
	padding: 40px; position: relative; overflow: hidden;
}
.sp-contactbox h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: 10px; }
.sp-contactbox a { color: #fff; text-decoration: none; font-weight: 600; opacity: .95; }
.sp-contactbox a:hover { text-decoration: underline; }

@media (max-width: 860px) {
	.sp-contact-form { padding: 28px 22px; }
	.sp-contact-form__row { grid-template-columns: 1fr; gap: 20px; }
	.sp-offices__grid { grid-template-columns: 1fr; text-align: center; }
	.sp-office__flag { margin-left: auto; margin-right: auto; }
	.sp-contactboxes { grid-template-columns: 1fr; }
}

/* =========================================================
   About Us page (/about-us/)
   ========================================================= */

/* Vision / Mission two-box row */
.sp-visionmission__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sp-vm-box {
	border: 1px solid var(--border); border-radius: var(--radius-lg);
	background: var(--surface); padding: 34px 36px;
}
.sp-vm-box h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 10px; }
.sp-vm-box p { color: var(--text-muted); font-size: .92rem; }

/* Powered by Axi */
.sp-poweredby__icon { width: 56px; height: 56px; margin: 0 auto 20px; object-fit: contain; border-radius: 12px; }
.sp-poweredby h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 600; }
.sp-poweredby p { margin: 14px auto 0; max-width: 620px; color: var(--text-muted); }
.sp-poweredby__banner {
	width: 100%; max-width: 900px; margin: 40px auto 0; border-radius: var(--radius-lg);
	object-fit: cover; max-height: 460px;
}

@media (max-width: 720px) {
	.sp-visionmission__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Partnerships page (/about-us/partnerships/)
   ========================================================= */

.sp-partnerwhy h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 600; margin-bottom: 44px; }
.sp-partnerwhy h2 mark { background: none; color: var(--sp-accent); }
.sp-partnerwhy__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.sp-partnerwhy__item h3 { font-size: .98rem; font-weight: 600; margin: 14px 0 6px; }
.sp-partnerwhy__item p { font-size: .87rem; color: var(--text-muted); }

/* Small extra icon between the numbered badge and the title, seen on the
   Partnerships "Start earning" steps (homepage steps don't have this). */
.sp-step__extra-icon { display: inline-flex; width: 26px; height: 26px; margin: 4px 0 12px; }

@media (max-width: 860px) {
	.sp-partnerwhy__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.sp-partnerwhy__grid { grid-template-columns: 1fr; text-align: center; }
	.sp-step__extra-icon { margin-left: auto; margin-right: auto; }
}

/* =========================================================
   Accounts page (/accounts/)
   ========================================================= */

/* Comparison table */
.sp-comparetable__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sp-comparetable__table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .88rem; }
.sp-comparetable__table thead th {
	background: var(--sp-accent); color: #fff; font-weight: 600;
	padding: 14px 16px; text-align: left;
}
.sp-comparetable__table thead th:first-child { background: transparent; }
.sp-comparetable__table tbody th {
	text-align: left; font-weight: 600; padding: 12px 16px;
	background: var(--sp-accent-soft); white-space: nowrap;
}
.sp-comparetable__table tbody td {
	padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-muted);
}
.sp-comparetable__table tbody tr:nth-child(even) td { background: var(--bg-alt); }
.sp-comparetable__ctas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; min-width: 640px; }
.sp-comparetable__ctas .sp-btn { width: 100%; text-align: center; }
.sp-comparetable__footnote { margin-top: 18px; font-size: .8rem; color: var(--text-muted); }
.sp-comparetable__footnote a { color: var(--sp-accent); }

/* 4-column feature grid variant (reuses .sp-whygrid, just centers it) */
.sp-whygrid--4col { margin-top: 40px; }
.sp-whygrid--4col .sp-whygrid__icon { margin-left: auto; margin-right: auto; }

@media (max-width: 720px) {
	.sp-comparetable__ctas { grid-template-columns: repeat(3, 1fr); } /* keep aligned to table columns while scrolling */
}

/* 6-column stages table (Funded Trader page) needs more room than the
   3-column account comparison table */
.sp-comparetable__table--stages { min-width: 820px; }

/* =========================================================
   Market detail pages (/markets/forex/ etc.)
   ========================================================= */

.sp-marketwidget { max-width: 900px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.sp-marketwidget__note { max-width: 700px; margin: 16px auto 0; font-size: .8rem; color: var(--text-muted); }

/* 3-column companies list (Stocks market page) */
.sp-companies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; text-align: left; }
.sp-companies__col h3 {
	background: var(--sp-accent); color: #fff; text-align: center;
	font-size: .92rem; font-weight: 600; padding: 12px; border-radius: 10px 10px 0 0;
}
.sp-companies__col ul { list-style: none; border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; overflow: hidden; }
.sp-companies__col li { padding: 12px 16px; font-size: .9rem; text-align: center; border-bottom: 1px solid var(--border); }
.sp-companies__col li:last-child { border-bottom: none; }
.sp-companies__col li:nth-child(even) { background: var(--bg-alt); }

/* ---------- Floating Telegram ---------- */
.sp-floating-telegram{position:fixed;right:20px;bottom:20px;z-index:9998;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#229ed9;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.26);transition:transform .2s ease,box-shadow .2s ease}
.sp-floating-telegram:hover{color:#fff;transform:translateY(-3px);box-shadow:0 15px 34px rgba(0,0,0,.32)}
.sp-floating-telegram svg{width:29px;height:29px}.sp-floating-telegram img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}@media(max-width:640px){.sp-floating-telegram{right:14px;bottom:14px;width:50px;height:50px}}

/* ---------- Crypto access table: separate-card grid (Buy Crypto / Crypto CFDs / Perpetual Futures) ---------- */
.sp-cryptoaccess {
	padding: 32px 0 46px;
}

.sp-cryptoaccess .sp-section__head {
	max-width: none;
	margin-bottom: 40px;
	text-align: center;
}

.sp-cryptoaccess .sp-section__head h2 {
	white-space: nowrap;
	font-size: 2.5rem;
	line-height: 3rem;
	letter-spacing: -.03em;
}

.sp-cryptoaccess .sp-section__head p {
	max-width: 980px;
	margin: 16px auto 0;
	font-size: 1rem;
	line-height: 1.5rem;
}

.sp-cryptoaccess__table-scroll {
	width: 100%;
}

.sp-cryptoaccess__grid {
	display: grid;
	grid-template-columns: 24% repeat(3, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 0;
	align-items: stretch;
	margin-top: 0;
}

.sp-cryptoaccess__labelhead,
.sp-cryptoaccess__labelcell,
.sp-cryptoaccess__btnrow {
	margin-right: -24px;
}

.sp-cryptoaccess__labelhead { min-height: 1px; }

.sp-cryptoaccess__colhead {
	background: var(--sp-accent);
	color: #fff;
	font-weight: 600;
	text-align: center;
	padding: 14px 20px;
	border-radius: 0;
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.sp-cryptoaccess__labelcell {
	background: color-mix(in srgb, var(--sp-accent) 24%, var(--bg));
	font-weight: 600;
	padding: 13px 20px;
	font-size: 1rem;
	line-height: 1.5rem;
	display: flex;
	align-items: center;
}
.sp-cryptoaccess__labelcell.is-alt {
	background: color-mix(in srgb, var(--sp-accent) 12%, var(--bg));
}

.sp-cryptoaccess__cell {
	background: var(--bg-alt);
	text-align: center;
	padding: 13px 20px;
	color: var(--text-muted);
	font-size: 1rem;
	line-height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sp-cryptoaccess__cell.is-alt {
	background: var(--bg);
}

.sp-cryptoaccess__btnrow { min-height: 1px; }

.sp-cryptoaccess__btnwrap {
	display: flex;
	justify-content: center;
	padding-top: 32px;
}
.sp-cryptoaccess__btnwrap .sp-btn { width: auto; }

@media (max-width: 860px) {
	.sp-cryptoaccess { padding: 48px 0; }
	.sp-cryptoaccess .sp-section__head h2 { white-space: normal; }
	.sp-cryptoaccess__table-scroll {
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		-webkit-overflow-scrolling: touch;
	}
	.sp-cryptoaccess__grid {
		grid-template-columns: 180px repeat(3, minmax(240px, 1fr));
		min-width: 972px;
	}
}

/* ---------- Crypto page: TradingView live prices frame (Crypto homepage only) ---------- */
.sp-marketwidget--dark {
	background: #0d0d0f; border-color: #232327;
}

/* ---------- Why-choose section (Crypto / CFDs / Perpetual Futures — full-width header + spacer-column grid) ---------- */
.sp-whychoose__head { max-width: 760px; }
.sp-whychoose__head p { margin-top: 14px; color: var(--text-muted); }

.sp-whychoose__items {
	display: grid;
	grid-template-columns: minmax(220px, 340px) repeat(3, 1fr);
	gap: 40px 32px;
	margin-top: 48px;
}
.sp-whychoose__spacer { grid-row: 1 / span 2; }
.sp-whychoose__item h3 { font-size: .98rem; font-weight: 600; margin: 14px 0 6px; }
.sp-whychoose__item p { font-size: .87rem; color: var(--text-muted); }

@media (max-width: 980px) {
	.sp-whychoose__items { grid-template-columns: repeat(2, 1fr); }
	.sp-whychoose__spacer { display: none; }
}
@media (max-width: 560px) {
	.sp-whychoose__items { grid-template-columns: 1fr; text-align: center; }
	.sp-whychoose__item .sp-whygrid__icon { margin-left: auto; margin-right: auto; }
}

/* ---------- Perpetual Futures / CFDs sub-page hero (centered, no side image) ---------- */
.sp-cryptofutures-hero {
	position: relative;
	overflow: hidden;
	padding: 56px 0 64px;
	background: radial-gradient(circle at 50% 0%, var(--sp-accent-soft), transparent 60%);
}
.sp-cryptofutures-hero h1 {
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.15;
	max-width: 820px;
	margin: 0 auto;
}
.sp-cryptofutures-hero p {
	margin: 16px auto 30px;
	max-width: 620px;
	color: var(--text-muted);
}

.sp-marketwidget--dark {
	background: #0d0d0f; border-color: #232327;
}

/* Why-choose section: title/subtitle sit on their OWN full-width row
   (never squeezed into a narrow column — that's what caused the
   unwanted wrapping). Only the card grid below gets an empty spacer
   column, which is what visually pushes the cards to the right while
   leaving them a wide, comfortable 3-column area to breathe in. */
.sp-whychoose__head { max-width: 760px; }
.sp-whychoose__head p { margin-top: 14px; color: var(--text-muted); }

.sp-whychoose__items {
	display: grid;
	grid-template-columns: minmax(220px, 340px) repeat(3, 1fr);
	gap: 40px 32px;
	margin-top: 48px;
}
.sp-whychoose__spacer { grid-row: 1 / span 2; }
.sp-whychoose__item h3 { font-size: .98rem; font-weight: 600; margin: 14px 0 6px; }
.sp-whychoose__item p { font-size: .87rem; color: var(--text-muted); }

/* ---------- Crypto Perpetual Futures page hero (centered, no side image) ---------- */
.sp-cryptofutures-hero {
	position: relative;
	overflow: hidden;
	padding: 56px 0 64px;
	background: radial-gradient(circle at 50% 0%, var(--sp-accent-soft), transparent 60%);
}
.sp-cryptofutures-hero h1 {
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.15;
	max-width: 820px;
	margin: 0 auto;
}
.sp-cryptofutures-hero p {
	margin: 16px auto 30px;
	max-width: 620px;
	color: var(--text-muted);
}

@media (max-width: 980px) {
	.sp-whychoose__items { grid-template-columns: repeat(2, 1fr); }
	.sp-whychoose__spacer { display: none; }
}
@media (max-width: 560px) {
	.sp-whychoose__items { grid-template-columns: 1fr; text-align: center; }
	.sp-whychoose__item .sp-whygrid__icon { margin-left: auto; margin-right: auto; }
}

@media (max-width: 720px) {
	.sp-companies { grid-template-columns: 1fr; }
}

/* =========================================================
   v2.3 — Figma/PRD visual alignment
   Source of truth: Figma desktop frames (1920px) + PRD appendix B.
   ========================================================= */

html { font-size: 16px; }
body {
	font-family: var(--font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5rem;
	letter-spacing: -.02em;
}
h1, h2, h3, h4, h5, h6, strong, b { font-weight: 600; }

.sp-container {
	width: min(calc(100% - 48px), var(--container));
	max-width: var(--container);
	padding-inline: 0;
}

/* Shared type scale from PRD, with the display size used by Figma heroes. */
.sp-hero h1,
.sp-page-head h1,
.sp-contact-hero h1,
.sp-cryptofutures-hero h1 {
	font-size: clamp(3rem, 3vw, 3.5rem);
	font-weight: 600;
	line-height: 4rem;
	letter-spacing: -.03em;
}
.sp-section__head h2,
.sp-features__intro h2,
.sp-ready-banner h2,
.sp-funded h2,
.sp-poweredby h2,
.sp-partnerwhy h2,
.sp-final-cta h2,
.sp-payments h2,
.sp-dlband h2,
.sp-platshow__copy h2 {
	font-size: clamp(2.5rem, 2.55vw, 3rem);
	font-weight: 600;
	line-height: 3.5rem;
	letter-spacing: -.03em;
}
.sp-feature h3,
.sp-market h3,
.sp-step h3,
.sp-tier h3,
.sp-resource__body h3,
.sp-whygrid__item h3,
.sp-partnerwhy__item h3,
.sp-office h3,
.sp-contactbox h3,
.sp-vm-box h3,
.sp-calc h3,
.sp-platmarket h3,
.sp-whychoose__item h3 {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 2rem;
	letter-spacing: -.03em;
}

/* Buttons are 51px high in the desktop frames. */
.sp-btn {
	min-height: 51px;
	padding: 13px 20px;
	border-width: 1px;
	border-radius: 12px;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5rem;
	letter-spacing: -.02em;
}
.sp-btn--accent { background: #fd404c; }

/* Header: 1380px content area, 120px total height. */
.sp-header { border: 0; box-shadow: none; }
.sp-header__inner {
	display: grid;
	grid-template-columns: 266px minmax(420px, 1fr) 252px;
	align-items: center;
	gap: clamp(32px, 7.86vw, 151px);
	height: 120px;
}
.sp-logo-img, .custom-logo { width: 266px; max-width: 266px; height: 48px; object-fit: contain; object-position: left center; }
.sp-nav__list { gap: 32px; }
.sp-nav__list a { font-size: 1rem; font-weight: 400; line-height: 1.5rem; opacity: 1; }
.sp-nav__list > li > a::after { margin-left: 12px; }
.sp-header__actions { gap: 12px; }
.sp-theme-toggle { width: 50px; height: 51px; border-radius: 12px; }
.sp-header__cta { width: 136px; text-align: center; }
.sp-lang { width: 42px; justify-content: space-between; padding-inline: 0; }

/* Homepage hero: 640px high beneath the desktop header. */
.sp-hero { position: relative; min-height: 640px; }
.sp-hero__inner {
	grid-template-columns: 561px minmax(0, 1fr);
	gap: 48px;
	min-height: 640px;
	padding-block: 0;
	padding-inline: 0;
}
.sp-hero__copy { max-width: 561px; }
.sp-hero__copy p {
	max-width: 561px;
	margin: 32px 0 40px;
	font-size: 1.25rem;
	line-height: 2rem;
	letter-spacing: -.02em;
}
.sp-hero__ctas { gap: 24px; }
.sp-ticker {
	position: absolute;
	right: 0;
	bottom: 22px;
	left: 0;
	min-height: 55px;
}
#sp-tv-ticker { min-height: 55px; }

/* Shared desktop section rhythm. */
.sp-section { padding: 80px 0; }
.sp-section__head { max-width: 795px; margin-bottom: 64px; }
.sp-section__head p,
.sp-features__intro p,
.sp-page-head p,
.sp-contact-hero p,
.sp-ready-banner p,
.sp-funded p,
.sp-poweredby p,
.sp-platshow__copy p {
	font-size: 1.25rem;
	line-height: 2rem;
	letter-spacing: -.02em;
	color: var(--text-muted);
}
.sp-section__head p { margin-top: 32px; }

/* Homepage feature composition. */
.sp-features__grid { display: block; }
.sp-features__intro { width: min(795px, 100%); }
.sp-features__intro p { margin: 32px 0; }
.sp-features__items {
	width: min(1029px, calc(100% - 351px));
	margin: 48px 0 0 351px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 24px;
}
.sp-feature__icon, .sp-feature__icon img { width: 88px; height: 88px; }
.sp-feature h3 { margin: 32px 0 24px; }
.sp-feature p { font-size: 1rem; line-height: 1.5rem; }
.sp-partner-line { margin: 48px 0 0 351px; text-align: left; font-size: 1.25rem; line-height: 2rem; font-weight: 400; }
.sp-partner-line a { font-weight: 600; }

/* Homepage market cards use the 12-column/24px grid. */
.sp-markets__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.sp-market { display: flex; flex-direction: column; align-items: flex-start; }
.sp-market__art { width: 303px; max-width: 100%; height: 240px; margin: 0 auto 12px; }
.sp-market h3 { width: 100%; margin: 0 0 24px; }
.sp-market p { margin-bottom: 24px; font-size: 1rem; line-height: 1.5rem; }
.sp-market a { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }

.sp-ready-banner, .sp-funded {
	min-height: 560px;
	padding: 128px 64px;
	border-radius: 32px;
}
.sp-ready-banner { margin-top: 80px; }
.sp-ready-banner__copy, .sp-funded__copy { max-width: 560px; }
.sp-ready-banner p, .sp-funded p { margin: 32px 0; color: rgba(255,255,255,.88); }

/* Listing-page header block. */
.sp-platforms-hero { min-height: 398px; }
.sp-breadcrumb { padding-top: 24px; font-size: .75rem; line-height: 1.125rem; }
.sp-page-head { max-width: 912px; padding: 56px 0 96px; }
.sp-page-head p { margin-top: 32px; }
.sp-contact-hero__inner { max-width: 912px; padding: 56px 0 96px; }
.sp-contact-hero p { max-width: 678px; margin-top: 32px; }
.sp-contact-hero .sp-hero__ctas { margin-top: 40px; }
.sp-market-detail-title {
	font-size: clamp(3rem, 3vw, 3.5rem);
	font-weight: 600;
	line-height: 4rem;
	letter-spacing: -.03em;
	white-space: pre-line;
}

/* Resource cards: 1380 x 384px, 690px per half in Figma. */
.sp-resources { padding-top: 64px; }
.sp-resources__list { gap: 48px; margin-top: 0; }
.sp-resource { grid-template-columns: 1fr 1fr; min-height: 384px; border-radius: 32px; }
.sp-resource__art { min-height: 384px; }
.sp-resource__body { padding: 64px; }
.sp-resource__body h3 { font-size: 3rem; line-height: 3.5rem; margin-bottom: 32px; }
.sp-resource__body p { margin-bottom: 32px; font-size: 1.25rem; line-height: 2rem; }

/* Alternating platforms/markets rows use two 678px columns and a 24px gutter. */
.sp-platshow__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 80px 0; }
.sp-platshow__copy { max-width: 678px; }
.sp-platshow__copy p { max-width: 678px; margin: 32px 0 40px; }
.sp-platshow__img, .sp-platshow__placeholder { width: 100%; max-width: 678px; border-radius: 32px; }
.sp-platshow__badge { margin-bottom: 32px; }

/* Common cards and content grids. */
.sp-tiers { gap: 24px; }
.sp-tier, .sp-vm-box, .sp-contact-form, .sp-contactbox, .sp-marketwidget { border-radius: 32px; }
.sp-tier { padding: 48px; }
.sp-steps__grid { gap: 24px; }
.sp-step h3 { margin: 24px 0; }
.sp-step p, .sp-tier__sub, .sp-tier li, .sp-office p, .sp-vm-box p,
.sp-whygrid__item p, .sp-partnerwhy__item p, .sp-calc p, .sp-platmarket p,
.sp-whychoose__item p { font-size: 1rem; line-height: 1.5rem; }
.sp-stats { gap: 24px; }

/* Payment band and final CTA follow the desktop frame spacing. */
.sp-payments { padding: 64px 0; }
.sp-payments__inner { gap: 64px; }
.sp-final-cta { padding: 96px 0; }

@media (max-width: 1500px) {
	.sp-header__inner { grid-template-columns: 220px minmax(420px, 1fr) auto; gap: 32px; }
	.sp-logo-img, .custom-logo { width: 220px; max-width: 220px; }
	.sp-nav__list { gap: 20px; }
	.sp-nav__list > li > a::after { margin-left: 7px; }
}

@media (max-width: 1100px) {
	.sp-header__inner { display: flex; height: 96px; }
	.sp-nav { display: none; }
	.sp-burger { display: flex; }
	.sp-features__items { width: 100%; margin-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-partner-line { margin-left: 0; }
	.sp-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 860px) {
	.sp-container { width: min(calc(100% - 40px), var(--container)); }
	.sp-header__inner { height: 80px; }
	.sp-logo-img, .custom-logo { width: auto; max-width: 190px; height: 40px; }
	.sp-nav { top: 100%; }
	.sp-header__actions { margin-left: auto; }
	.sp-hero { min-height: auto; }
	.sp-hero__inner { grid-template-columns: 1fr; min-height: auto; padding: 72px 0 96px; }
	.sp-hero__copy { max-width: 680px; }
	.sp-ticker { position: static; min-height: 55px; }
	.sp-section { padding: 64px 0; }
	.sp-markets__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-resource { min-height: 0; }
	.sp-resource__art { min-height: 300px; }
	.sp-resource__body { padding: 48px 40px; }
	.sp-resource__body h3 { font-size: 2.5rem; line-height: 3rem; }
	.sp-ready-banner, .sp-funded { min-height: 0; padding: 80px 48px; }
	.sp-footer__top { grid-template-columns: 1fr; gap: 48px; }
	.sp-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.sp-hero h1, .sp-page-head h1, .sp-contact-hero h1, .sp-cryptofutures-hero h1 {
		font-size: 2.5rem;
		line-height: 3rem;
	}
	.sp-market-detail-title { font-size: 2.5rem; line-height: 3rem; }
	.sp-section__head h2, .sp-features__intro h2, .sp-ready-banner h2,
	.sp-funded h2, .sp-poweredby h2, .sp-partnerwhy h2, .sp-final-cta h2,
	.sp-payments h2, .sp-dlband h2, .sp-platshow__copy h2 {
		font-size: 2rem;
		line-height: 2.5rem;
	}
	.sp-hero__copy p, .sp-section__head p, .sp-features__intro p,
	.sp-page-head p, .sp-contact-hero p, .sp-ready-banner p, .sp-funded p,
	.sp-poweredby p, .sp-platshow__copy p { font-size: 1rem; line-height: 1.5rem; }
	.sp-features__items, .sp-markets__grid { grid-template-columns: 1fr; }
	.sp-feature__icon, .sp-feature__icon img { width: 72px; height: 72px; }
	.sp-market__art { height: 220px; }
	.sp-resource, .sp-resource.is-reverse { grid-template-columns: 1fr; }
	.sp-resource__body, .sp-resource.is-reverse .sp-resource__body { padding: 40px 28px; }
	.sp-resource__body h3 { font-size: 2rem; line-height: 2.5rem; }
	.sp-resource__body p { font-size: 1rem; line-height: 1.5rem; }
	.sp-ready-banner, .sp-funded { padding: 64px 28px; }
	.sp-page-head, .sp-contact-hero__inner { padding: 40px 0 64px; }
	.sp-platforms-hero { min-height: 0; }
	.sp-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-footer__bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
	.sp-header__actions .sp-theme-toggle { display: none; }
	.sp-logo-img, .custom-logo { max-width: 160px; }
	.sp-hero__ctas { flex-direction: column; align-items: stretch; }
	.sp-hero__ctas .sp-btn { text-align: center; }
	.sp-footer__cols { grid-template-columns: 1fr; }
	.sp-footer__contacts { align-items: flex-start; flex-direction: column; gap: 6px; }
}

/* =========================================================
   v2.3.7 — Detail alignment, account composition & language
   ========================================================= */

/* DETAIL PAGES: breadcrumbs always follow the left edge of the 1380px
   content container. The surrounding contact hero may remain centered. */
.sp-contact-hero .sp-breadcrumb,
.sp-platforms-hero .sp-breadcrumb {
	text-align: left;
}

/* DETAIL PAGES: return links belong to the left edge beneath the FAQ rather
   than floating in the visual centre of the page. */
.sp-back-link {
	width: 100%;
	max-width: none;
	margin: 0;
	padding-top: 32px;
	text-align: left;
}

/* PLATFORM/MARKET PAGES: artwork uses the source image's rectangular 606:480
   ratio. This intentionally removes the old 84px circular crop. */
.sp-platmarket__art {
	position: relative;
	width: 212px;
	height: 168px;
	margin: 0 0 24px;
	overflow: visible;
	border-radius: 0;
	background: transparent;
}
.sp-platmarket__art img.sp-platmarket__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}
.sp-platmarket h3 { margin-bottom: 12px; }
.sp-platmarket p { max-width: 42ch; margin-bottom: 16px; }

/* HEADER LANGUAGE: the real select covers the globe/caret hit area. A high
   z-index keeps it clickable above adjacent header actions. */
.sp-lang { cursor: pointer; }
.sp-lang select,
.sp-language-select--header {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

/* FOOTER LANGUAGE: native selector remains visible and inherits the compact
   dark control style. */
.sp-footer__language { position: relative; cursor: pointer; }
.sp-footer__language select,
.sp-language-select--footer {
	min-width: 112px;
	max-width: 150px;
	margin: 0;
	padding: 0 20px 0 0;
	border: 0;
	outline: 0;
	appearance: none;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.sp-footer__language-caret {
	position: absolute;
	right: 12px;
	pointer-events: none;
}

/* ACCOUNTS PAGE: compact Figma composition shown in the approved full-page
   reference. Every rule is scoped to /accounts/ to avoid changing shared
   cards and banners on other pages. */
.sp-page-accounts .sp-accounts-page-hero {
	background-color: #fff;
	background-image:
		linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.94)),
		var(--sp-accounts-hero-light, none);
	background-position: center;
	background-size: cover;
}

/* ACCOUNTS HERO — DARK MODE FALLBACK
   Dark artwork is intentionally optional because the final asset set is not
   ready yet. With no --sp-accounts-hero-dark value, this becomes solid black
   and visually continues into the following section. Once an admin uploads a
   dark asset, the same rule adds a dark readability overlay automatically. */
[data-theme="dark"] .sp-page-accounts .sp-accounts-page-hero {
	background-color: #000;
	background-image:
		linear-gradient(180deg, rgba(0,0,0,.90), rgba(0,0,0,.96)),
		var(--sp-accounts-hero-dark, none);
	color: #fff;
}
[data-theme="dark"] .sp-page-accounts .sp-accounts-page-hero .sp-breadcrumb,
[data-theme="dark"] .sp-page-accounts .sp-accounts-page-hero .sp-breadcrumb a,
[data-theme="dark"] .sp-page-accounts .sp-accounts-page-hero p {
	color: rgba(255,255,255,.68);
}
[data-theme="dark"] .sp-page-accounts .sp-accounts-page-hero .sp-breadcrumb__current {
	color: var(--sp-accent);
}
[data-theme="dark"] .sp-page-accounts .sp-accounts-page-hero .sp-btn--outline-dark {
	border-color: #fff;
	color: #fff;
}
.sp-page-accounts .sp-platforms-hero {
	min-height: 398px;
	background-position: center;
}
.sp-page-accounts .sp-accounts-hero__inner {
	padding: 48px 0 88px;
}
.sp-page-accounts .sp-accounts-hero__inner p {
	max-width: 760px;
	margin-inline: auto;
}
.sp-page-accounts .sp-section { padding: 72px 0; }
.sp-page-accounts .sp-section__head {
	max-width: 840px;
	margin-bottom: 40px;
}
.sp-page-accounts .sp-section__head p { margin-top: 16px; }

/* ACCOUNTS: three product cards. */
.sp-page-accounts .sp-tiers { gap: 24px; }
.sp-page-accounts .sp-tier {
	padding: 28px;
	border-radius: 12px;
}
.sp-page-accounts .sp-tier h3 { margin-bottom: 8px; }
.sp-page-accounts .sp-tier__sub { margin-bottom: 20px; }
.sp-page-accounts .sp-tier ul { margin-bottom: 24px; }
.sp-page-accounts .sp-demo-line { margin-top: 32px; }

/* ACCOUNTS: four-step row and its centered CTA. */
.sp-page-accounts .sp-steps__grid { gap: 32px; }
.sp-page-accounts .sp-step { text-align: left; }
.sp-page-accounts .sp-step h3 { margin: 16px 0 8px; }

/* ACCOUNTS: comparison table is intentionally dense like the reference. */
.sp-page-accounts .sp-comparetable__scroll,
.sp-page-accounts .sp-comparetable__ctas,
.sp-page-accounts .sp-comparetable__footnote {
	width: min(100%, 1120px);
	margin-inline: auto;
}
.sp-page-accounts .sp-comparetable__table { font-size: .8125rem; }
.sp-page-accounts .sp-comparetable__table thead th,
.sp-page-accounts .sp-comparetable__table tbody th,
.sp-page-accounts .sp-comparetable__table tbody td {
	padding: 10px 14px;
}
.sp-page-accounts .sp-comparetable__ctas {
	grid-template-columns: 25% repeat(3, 1fr);
	gap: 16px;
	margin-top: 24px;
}
.sp-page-accounts .sp-comparetable__ctas::before { content: ''; }
.sp-page-accounts .sp-comparetable__footnote { margin-top: 16px; }

/* ACCOUNTS: the two dark photo banners are shorter and squarer than the
   generic homepage banners. */
.sp-page-accounts .sp-ready-banner,
.sp-page-accounts .sp-funded {
	min-height: 384px;
	margin-top: 0;
	padding: 64px;
	border-radius: 20px;
}

/* ACCOUNTS: heading stays centered, while each benefit card aligns left. */
.sp-page-accounts .sp-whygrid--4col { text-align: left; }
.sp-page-accounts .sp-whygrid--4col .sp-whygrid__icon {
	margin-right: 0;
	margin-left: 0;
}

/* ACCOUNTS: FAQ width follows the screenshot instead of the narrow generic
   resource-detail accordion. */
.sp-page-accounts .sp-faq { max-width: 1120px; }
.sp-page-accounts .sp-back-link { width: 100%; max-width: none; margin-inline: 0; }
.sp-page-accounts .sp-faq__item { border-radius: 10px; }

@media (max-width: 860px) {
	.sp-platmarket__art { width: 190px; height: 150px; }
	.sp-page-accounts .sp-comparetable__ctas {
		width: 640px;
		grid-template-columns: repeat(3, 1fr);
		padding-left: 0;
	}
	.sp-page-accounts .sp-comparetable__ctas::before { content: none; }
	.sp-page-accounts .sp-ready-banner,
	.sp-page-accounts .sp-funded { padding: 48px 40px; }
}

@media (max-width: 560px) {
	/* Market cards remain edge-aligned on mobile; only the number of columns
	   changes. */
	.sp-platmarkets__grid { text-align: left; }
	.sp-platmarket__art { width: min(100%, 260px); height: auto; aspect-ratio: 606 / 480; margin-inline: 0; }
	.sp-page-accounts .sp-section { padding: 56px 0; }
	.sp-page-accounts .sp-tier { padding: 24px; }
	.sp-page-accounts .sp-step { text-align: left; }
	.sp-page-accounts .sp-ready-banner,
	.sp-page-accounts .sp-funded { padding: 48px 24px; border-radius: 16px; }
}

/* =========================================================
   v2.3.9 — HOME: TRADINGVIEW MARKET CARD RAIL
   Replaces the small third-party ticker-tape frame with theme-owned,
   rectangular quote cards matching the approved desktop reference.
   ========================================================= */

/* TICKER: full-width dark strip at the bottom of the homepage hero. */
.sp-ticker {
	min-height: 132px;
	padding: 16px 0;
	border: 0;
	background:
		radial-gradient(circle at 94% 0%, rgba(253,64,76,.18), transparent 30%),
		#050505;
	overflow: hidden;
}

/* TICKER VIEWPORT: touch users can swipe the rail manually. */
#sp-tv-ticker.sp-ticker__viewport {
	min-height: 100px;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
#sp-tv-ticker.sp-ticker__viewport::-webkit-scrollbar { display: none; }

/* TICKER TRACK: two identical groups create a seamless moving loop. */
.sp-ticker__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: sp-ticker-card-loop 42s linear infinite;
}
.sp-ticker__viewport:hover .sp-ticker__track,
.sp-ticker__viewport:focus-within .sp-ticker__track { animation-play-state: paused; }

/* TICKER GROUP: one full set of symbols from the Customizer. */
.sp-ticker__group {
	display: flex;
	flex: none;
	gap: 24px;
	padding-right: 24px;
}

/* TICKER CARD: one complete live quote surface; no duplicate theme heading. */
.sp-ticker-card {
	position: relative;
	width: 382px;
	height: 126px;
	flex: 0 0 382px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #1b1b1b;
	color: #f7f7f7;
	overflow: hidden;
}

/* TICKER DATA STATUS: small overlay outside TradingView's own title area. */
.sp-ticker-card__status {
	position: absolute;
	top: 12px;
	right: 14px;
	z-index: 2;
	font-size: .625rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #a7a7a7;
}
.sp-ticker-card__status.is-live { color: #5fd38d; }
.sp-ticker-card__status.is-error { color: #ff8c94; }

/* TICKER LIVE QUOTE: full-height widget so price/change are never cropped. */
.sp-ticker-card__quote {
	height: 126px;
	margin: 0;
	overflow: hidden;
}
.sp-ticker-card__quote .tradingview-widget-container,
.sp-ticker-card__quote iframe {
	width: 100% !important;
	height: 126px !important;
	max-width: 100% !important;
}
.sp-ticker-card__quote .tradingview-widget-container { height: 126px; }

/* TICKER LOADING PLACEHOLDER: visible only while TradingView initializes. */
.sp-ticker-card__skeleton {
	display: block;
	width: 72%;
	height: 16px;
	margin: 54px 0 0 20px;
	background: linear-gradient(90deg, #292929 20%, #383838 50%, #292929 80%);
	background-size: 200% 100%;
	animation: sp-ticker-loading 1.25s ease-in-out infinite;
}

@keyframes sp-ticker-card-loop {
	to { transform: translateX(-50%); }
}

@keyframes sp-ticker-loading {
	to { background-position: -200% 0; }
}

/* =========================================================
   v2.3.9 — HEADER: MOBILE / TABLET NAVIGATION
   One final breakpoint owns every mobile-nav property. Keeping these rules
   together prevents desktop dropdown transforms and widths from leaking into
   the hamburger accordion.
   ========================================================= */
@media (max-width: 1100px) {
	/* MOBILE HEADER: logo left, language + hamburger right. */
	.sp-header { position: sticky; border: 0; box-shadow: none; }
	.sp-header__inner {
		display: flex;
		width: 100%;
		height: 88px;
		padding: 0 24px;
		gap: 16px;
	}
	.sp-logo-wrap,
	.sp-logo { flex: 1 1 auto; min-width: 0; }
	.sp-logo-img,
	.custom-logo { width: auto; max-width: 220px; height: 42px; }
	.sp-header__actions { margin-left: auto; gap: 14px; }
	.sp-header__cta,
	.sp-theme-toggle { display: none; }
	.sp-lang { width: 44px; height: 44px; flex: 0 0 44px; padding: 9px 2px; }
	.sp-lang__glyph { width: 26px; height: 26px; }

	/* MOBILE HAMBURGER: large touch target and animated close state. */
	.sp-burger {
		display: inline-flex;
		width: 48px;
		height: 48px;
		flex: 0 0 48px;
		align-items: center;
		justify-content: center;
		gap: 7px;
		padding: 7px;
		border-radius: 8px;
	}
	.sp-burger:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }
	.sp-burger span {
		width: 32px;
		height: 3px;
		flex: none;
		transition: transform .2s ease, opacity .2s ease;
	}
	.sp-burger.is-open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
	.sp-burger.is-open span:nth-child(2) { opacity: 0; }
	.sp-burger.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
	body.sp-nav-open { overflow: hidden; }

	/* MOBILE MENU PANEL: full viewport width below the sticky header. */
	.sp-nav,
	.sp-header__inner > .sp-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		height: auto;
		max-height: calc(100dvh - 88px);
		margin: 0;
		padding: 16px 24px 28px;
		overflow-x: hidden;
		overflow-y: auto;
		background: var(--bg);
		border: 0;
		box-shadow: 0 18px 30px rgba(0,0,0,.18);
		z-index: 120;
	}
	.sp-nav.is-open { display: block; }

	/* MOBILE MENU LIST: vertical accordion with no desktop centering. */
	.sp-nav__list {
		display: flex;
		width: 100%;
		height: auto;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
	}
	.sp-nav__list > li {
		display: block;
		width: 100%;
		height: auto;
		border-bottom: 1px solid var(--border);
	}
	.sp-nav__list > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 56px;
		padding: 14px 4px;
		font-size: 1.05rem;
		line-height: 1.5;
		color: var(--text);
	}
	.sp-nav__list a:focus-visible {
		outline: 2px solid var(--sp-accent);
		outline-offset: -2px;
		border-radius: 6px;
	}
	.sp-nav__list > li > a::after {
		margin: 0 5px 5px 12px;
		transition: transform .2s ease;
	}
	.sp-nav__list > li.is-open > a { color: var(--sp-accent); }
	.sp-nav__list > li.is-open > a::after { transform: rotate(225deg); }
	.sp-nav__list > li:not(.menu-item-has-children) > a::after { display: none; }

	/* MOBILE SUBMENU: in-flow accordion; never absolute or translated. */
	.sp-nav__list .sub-menu,
	.sp-nav__list > li:hover > .sub-menu,
	.sp-nav__list > li:focus-within > .sub-menu {
		display: none;
		position: static;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0 0 12px 16px;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		transition: none;
	}
	.sp-nav__list li.is-open > .sub-menu:not([hidden]) { display: block; }
	.sp-nav__list .sub-menu li { width: 100%; }
	.sp-nav__list .sub-menu a {
		display: block;
		width: 100%;
		padding: 11px 12px;
		font-size: .95rem;
		font-weight: 400;
		color: var(--text-muted);
		background: transparent;
	}
}

@media (max-width: 720px) {
	/* MOBILE TICKER: shorter cards reveal the next item as a swipe cue. */
	.sp-ticker { min-height: 134px; padding: 12px 0; }
	#sp-tv-ticker.sp-ticker__viewport { min-height: 110px; }
	.sp-ticker-card { width: 300px; height: 110px; flex-basis: 300px; }
	.sp-ticker-card__quote,
	.sp-ticker-card__quote .tradingview-widget-container,
	.sp-ticker-card__quote iframe { height: 110px !important; }
	.sp-ticker-card__status { top: 10px; right: 12px; }

	/* MOBILE HEADER: matches the compact composition in reference image #1. */
	.sp-header__inner { height: 80px; padding-inline: 24px; gap: 10px; }
	.sp-logo-img,
	.custom-logo { max-width: 190px; height: 38px; }
	.sp-header__actions { gap: 10px; }
	.sp-nav,
	.sp-header__inner > .sp-nav { max-height: calc(100dvh - 80px); padding-inline: 24px; }
}

@media (max-width: 420px) {
	.sp-header__inner { padding-inline: 18px; }
	.sp-logo-img,
	.custom-logo { max-width: 154px; height: 34px; }
	.sp-lang { width: 38px; flex-basis: 38px; }
	.sp-lang__glyph { width: 23px; height: 23px; }
	.sp-burger { width: 44px; height: 44px; flex-basis: 44px; }
	.sp-burger span { width: 29px; }
	.sp-nav,
	.sp-header__inner > .sp-nav { padding-inline: 18px; }
}

/* =========================================================
   v2.3.12 — HOME: COMPACT LIVE MARKET TICKER
   Final override for the homepage ticker. The ticker participates in normal
   document flow, so it can never cover or crop the hero CTA buttons.
   ========================================================= */

/* TICKER STRIP: intentionally compact, fixed-height and edge-to-edge. */
#sp-tv-ticker.sp-ticker {
	position: relative;
	inset: auto;
	display: block;
	width: 100%;
	height: 54px;
	min-height: 54px;
	max-height: 54px;
	margin: 0;
	padding: 4px 0;
	border-top: 1px solid #242424;
	border-bottom: 1px solid #161616;
	background: #0b0b0c;
	overflow: hidden;
}

/* TICKER EMBED: constrain every TradingView layer to one slim row. */
#sp-tv-ticker .tradingview-widget-container,
#sp-tv-ticker .tradingview-widget-container__widget,
#sp-tv-ticker iframe {
	display: block;
	width: 100% !important;
	height: 46px !important;
	min-height: 46px !important;
	max-height: 46px !important;
	border: 0 !important;
}

/* TICKER LOADING: small neutral fallback before the live embed initializes. */
.sp-ticker__loading {
	display: flex;
	align-items: center;
	height: 46px;
	padding-inline: 20px;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .03em;
	color: #8f8f94;
}

@media (max-width: 720px) {
	#sp-tv-ticker.sp-ticker {
		height: 52px;
		min-height: 52px;
		max-height: 52px;
		padding-block: 3px;
	}
}

/* =========================================================
   v2.3.13 — MOBILE HERO + RELIABLE TRADINGVIEW STRIP
   The background is controlled by CSS (not an inline desktop crop), and the
   ticker is a sibling of the hero so third-party iframe sizing cannot enlarge
   or cover the hero content.
   ========================================================= */

/* HOME HERO: dark base first; optional artwork sits behind a readability
   gradient and may be repositioned safely at responsive breakpoints. */
.sp-hero {
	background-color: #050505;
	background-image:
		linear-gradient(90deg, rgba(5,5,5,.98) 0%, rgba(5,5,5,.88) 42%, rgba(5,5,5,.18) 100%),
		var(--sp-home-hero-image, none);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center, center;
}

/* LIVE MARKET STRIP: use the official widget's natural 72px canvas. This is
   still compact, but it leaves enough room for symbol, price and attribution
   on Safari instead of clipping everything except the TradingView badge. */
#sp-tv-ticker.sp-ticker.sp-ticker--home {
	position: relative !important;
	inset: auto !important;
	display: block !important;
	width: 100% !important;
	height: 72px !important;
	min-height: 72px !important;
	max-height: 72px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: #0b0b0c !important;
	overflow: hidden !important;
	z-index: 1;
}
#sp-tv-ticker.sp-ticker--home .tradingview-widget-container,
#sp-tv-ticker.sp-ticker--home .tradingview-widget-container__widget,
#sp-tv-ticker.sp-ticker--home iframe {
	display: block !important;
	width: 100% !important;
	height: 72px !important;
	min-height: 72px !important;
	max-height: 72px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

@media (max-width: 720px) {
	.sp-hero {
		min-height: auto;
		background-image:
		linear-gradient(180deg, rgba(5,5,5,.18) 0%, rgba(5,5,5,.72) 45%, #050505 100%),
		var(--sp-home-hero-image, none);
		background-size: 100% 100%, auto 58%;
		background-position: center, left bottom;
		background-repeat: no-repeat;
	}
	.sp-hero__inner {
		min-height: 0;
		padding: 52px 24px 72px;
	}
	.sp-hero__copy { max-width: none; }
	.sp-hero h1 {
		font-size: clamp(2.35rem, 11vw, 3.15rem);
		line-height: 1.08;
	}
	.sp-hero__copy p {
		max-width: 34ch;
		font-size: 1rem;
		line-height: 1.6;
	}
	.sp-hero__ctas { gap: 14px; }
	.sp-hero__ctas .sp-btn { min-height: 54px; }

	#sp-tv-ticker.sp-ticker.sp-ticker--home,
	#sp-tv-ticker.sp-ticker--home .tradingview-widget-container,
	#sp-tv-ticker.sp-ticker--home .tradingview-widget-container__widget,
	#sp-tv-ticker.sp-ticker--home iframe {
		height: 72px !important;
		min-height: 72px !important;
		max-height: 72px !important;
	}
}

@media (max-width: 420px) {
	.sp-hero {
		background-size: 100% 100%, auto 46%;
		background-position: center, left bottom;
	}
	.sp-hero__inner { padding: 44px 18px 64px; }
}

/* =========================================================
   v2.3.14 — FINAL MOBILE HOME COMPOSITION
   One authoritative block intentionally overrides the accumulated ticker and
   hero experiments above. The desktop artwork is not used on small screens
   until a dedicated mobile asset exists.
   ========================================================= */

#sp-tv-ticker.sp-ticker.sp-ticker--home {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 54px !important;
	min-height: 54px !important;
	max-height: 54px !important;
	padding: 0 !important;
	border-top: 1px solid #202024 !important;
	border-bottom: 1px solid #202024 !important;
	background: #0b0b0d !important;
	overflow: hidden !important;
}

/* Platforms overview: keep the description and availability line distinct. */
.sp-platshow__copy .sp-platshow__description {
	margin: 14px 0 24px;
	font-size: inherit;
	color: var(--text-muted);
}
.sp-platshow__copy .sp-platshow__avail {
	margin: 16px 0 0;
	font-size: .78rem;
	line-height: 1.45;
	color: var(--text-muted);
}

#sp-tv-ticker.sp-ticker--home .tradingview-widget-container,
#sp-tv-ticker.sp-ticker--home .tradingview-widget-container__widget,
#sp-tv-ticker.sp-ticker--home iframe {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 52px !important;
	min-height: 52px !important;
	max-height: 52px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

@media (max-width: 720px) {
	.sp-hero {
		min-height: 0 !important;
		background-color: #050505 !important;
		background-image: linear-gradient(180deg, #090909 0%, #050505 100%) !important;
		background-position: center !important;
		background-size: cover !important;
	}

	.sp-hero__inner {
		display: block !important;
		min-height: 0 !important;
		padding: 42px 20px 44px !important;
	}

	.sp-hero__copy {
		width: 100% !important;
		max-width: 520px !important;
	}

	.sp-hero h1 {
		max-width: 11ch;
		margin: 0;
		font-size: clamp(2.35rem, 10.4vw, 2.8rem) !important;
		line-height: 1.08 !important;
		letter-spacing: -.035em !important;
	}

	.sp-hero__copy p {
		max-width: 34ch !important;
		margin: 18px 0 24px !important;
		font-size: .96rem !important;
		line-height: 1.55 !important;
	}

	.sp-hero__ctas {
		display: grid !important;
		gap: 10px !important;
	}

	.sp-hero__ctas .sp-btn {
		width: 100% !important;
		min-height: 50px !important;
		padding: 13px 18px !important;
	}

	.sp-hero__art { display: none !important; }

	#sp-tv-ticker.sp-ticker.sp-ticker--home {
		height: 54px !important;
		min-height: 54px !important;
		max-height: 54px !important;
	}

	#sp-tv-ticker.sp-ticker--home .tradingview-widget-container,
	#sp-tv-ticker.sp-ticker--home .tradingview-widget-container__widget,
	#sp-tv-ticker.sp-ticker--home iframe {
		height: 52px !important;
		min-height: 52px !important;
		max-height: 52px !important;
	}
}

@media (max-width: 380px) {
	.sp-hero__inner { padding-inline: 16px !important; }
	.sp-hero h1 { font-size: 2.25rem !important; }
}

/* =========================================================
   v2.4.0 - FIGMA ALL-PAGE DESIGN SYNC
   One final, authoritative responsive layer shared by the Homepage,
   Platforms, Resources, About, Contact, Partnerships and Legal pages.
   ========================================================= */

/* Page hero artwork is theme-aware. Templates pass only the image URL. */
.sp-contact-hero {
	background-color: #faf7f7;
	background-image:
		linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.94)),
		var(--sp-page-hero-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.sp-scroll-anchor { position: relative; top: -96px; height: 0; }
.sp-resource-detail__blurb { max-width: 820px; margin: 24px auto 56px; text-align: center; }
[data-theme="dark"] .sp-contact-hero {
	background-color: #0b0b0d;
	background-image:
		linear-gradient(180deg, rgba(5,5,6,.86), rgba(5,5,6,.94)),
		var(--sp-page-hero-image, none);
}

/* Embedded Figma media keeps the same rounded 3:2 presentation as the
   desktop frames instead of falling back to differently sized placeholders. */
.sp-platshow__media { min-width: 0; }
.sp-platshow__img,
.sp-platshow__placeholder {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: #1d1d1f;
}
.sp-poweredby__banner {
	width: 100%;
	aspect-ratio: 44 / 22.5;
	object-fit: cover;
	border-radius: 32px;
}
.sp-resource__art { background: #fbf6f6; }
.sp-resource__img { width: 100%; height: 100%; object-fit: cover; opacity: .18; }
[data-theme="dark"] .sp-resource__img { opacity: .28; filter: invert(1); }

/* The official TradingView ticker uses a 72px canvas. Never crop its iframe;
   the strip stays in normal document flow and cannot cover the hero CTA. */
#sp-tv-ticker.sp-ticker.sp-ticker--home,
#sp-tv-ticker.sp-ticker--home .tradingview-widget-container,
#sp-tv-ticker.sp-ticker--home .tradingview-widget-container__widget,
#sp-tv-ticker.sp-ticker--home iframe {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 72px !important;
	min-height: 72px !important;
	max-height: 72px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
#sp-tv-ticker.sp-ticker.sp-ticker--home {
	position: relative !important;
	inset: auto !important;
	overflow: hidden !important;
	background: #0b0b0d !important;
	z-index: 1;
}

/* Desktop homepage remains a direct match for the 1920px Figma frame. */
.sp-hero {
	background-color: #050505;
	background-image:
		linear-gradient(90deg, rgba(5,5,5,.76) 0%, rgba(5,5,5,.30) 48%, rgba(5,5,5,.04) 100%),
		var(--sp-home-hero-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

@media (max-width: 1100px) {
	/* Compact mobile/tablet header and a real in-flow accordion menu. */
	.sp-header__inner {
		display: flex;
		height: 72px;
		padding-inline: 20px;
		gap: 12px;
	}
	.sp-logo-img,
	.custom-logo { width: auto; max-width: 156px; height: 34px; }
	.sp-header__actions { gap: 8px; }
	.sp-lang { width: 36px; height: 36px; flex: 0 0 36px; padding: 7px 0; }
	.sp-lang__glyph { width: 22px; height: 22px; }
	.sp-burger {
		width: 40px;
		height: 40px;
		flex: 0 0 40px;
		gap: 5px;
		padding: 8px;
	}
	.sp-burger span { width: 24px; height: 2px; }
	.sp-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.sp-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.sp-nav,
	.sp-header__inner > .sp-nav {
		max-height: calc(100dvh - 72px);
		padding: 10px 20px 22px;
	}

	/* Alternating desktop rows become predictable mobile cards: copy first,
	   media second, regardless of the desktop reverse modifier. */
	.sp-platshow__row,
	.sp-platshow__row--reverse {
		display: flex;
		flex-direction: column;
		gap: 32px;
		padding: 56px 0;
	}
	.sp-platshow__copy { order: 1; max-width: none; }
	.sp-platshow__media { order: 2; width: 100%; }
	.sp-platshow__img,
	.sp-platshow__placeholder { max-width: none; }
	.sp-whygrid,
	.sp-partnerwhy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.sp-container { width: calc(100% - 40px); }
	.sp-section { padding: 56px 0; }
	.sp-section__head { margin-bottom: 40px; }

	/* Dedicated portrait crop preserves the Figma artwork without a giant
	   rocket or a blank black hero. */
	.sp-hero {
		min-height: 620px !important;
		background-image:
			linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.02) 58%, rgba(0,0,0,.20) 100%),
			var(--sp-home-hero-mobile-image, var(--sp-home-hero-image, none)) !important;
		background-position: center !important;
		background-size: cover !important;
	}
	.sp-hero__inner {
		display: block !important;
		min-height: 620px !important;
		padding: 44px 0 250px !important;
	}
	.sp-hero__copy { width: 100%; max-width: 520px !important; }
	.sp-hero h1 {
		max-width: 12ch;
		font-size: clamp(2.35rem, 10.5vw, 2.75rem) !important;
		line-height: 1.08 !important;
		letter-spacing: -.035em !important;
	}
	.sp-hero__copy p {
		max-width: 34ch !important;
		margin: 18px 0 24px !important;
		font-size: .95rem !important;
		line-height: 1.5 !important;
	}
	.sp-hero__ctas {
		display: flex !important;
		flex-flow: row nowrap !important;
		gap: 10px !important;
	}
	.sp-hero__ctas .sp-btn {
		width: auto !important;
		min-height: 46px !important;
		padding: 10px 14px !important;
		font-size: .875rem;
		text-align: center;
	}
	.sp-hero__art { display: none !important; }

	/* Listing/detail heroes, including About Us, stay compact and readable. */
	.sp-platforms-hero { min-height: 0; }
	.sp-page-head,
	.sp-contact-hero__inner { padding: 36px 0 52px; }
	.sp-page-head h1,
	.sp-contact-hero h1,
	.sp-market-detail-title { font-size: 2.35rem; line-height: 2.75rem; }
	.sp-page-head p,
	.sp-contact-hero p { margin-top: 18px; }
	.sp-contact-hero .sp-hero__ctas { margin-top: 24px; justify-content: center; }

	.sp-platshow__row,
	.sp-platshow__row--reverse { padding: 44px 0; gap: 28px; }
	.sp-platshow__copy p { margin: 18px 0 24px; }
	.sp-platshow__badge { margin-bottom: 18px; }
	.sp-platshow__img,
	.sp-platshow__placeholder,
	.sp-poweredby__banner { border-radius: 18px; }

	.sp-resource,
	.sp-resource.is-reverse { grid-template-columns: 1fr; border-radius: 20px; overflow: hidden; }
	.sp-resource__art { min-height: 220px; order: 1; }
	.sp-resource__body,
	.sp-resource.is-reverse .sp-resource__body { order: 2; padding: 30px 24px; }
	.sp-resource__body h3 { font-size: 1.75rem; line-height: 2.15rem; margin-bottom: 16px; }
	.sp-resources__list { gap: 28px; }

	.sp-features__items,
	.sp-markets__grid,
	.sp-tiers,
	.sp-whygrid,
	.sp-partnerwhy__grid,
	.sp-offices__grid,
	.sp-calc-grid,
	.sp-copysteps__grid { grid-template-columns: 1fr; }
	.sp-features__items { gap: 36px; }
	.sp-partner-line { margin-top: 36px; }

	.sp-contact-form__row { grid-template-columns: 1fr; }
	.sp-contact-form { padding: 28px 20px; border-radius: 20px; }
	.sp-visionmission__grid { grid-template-columns: 1fr; }

	.sp-ready-banner,
	.sp-funded { padding: 44px 24px; border-radius: 18px; background-position: 62% center !important; }
	.sp-payments { padding: 48px 0; }
	.sp-payments__inner { flex-direction: column; align-items: flex-start; gap: 30px; }
	.sp-payments__logos { width: 100%; max-width: none; justify-content: flex-start; gap: 16px 22px; }
	.sp-payments__logo { max-height: 34px; max-width: 112px; }
	.sp-final-cta { padding: 64px 0; }
	.sp-final-cta__points { gap: 12px 18px; font-size: .78rem; }

	.sp-footer { padding-top: 36px; }
	.sp-footer__top { gap: 36px; }
	.sp-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
	.sp-footer__legal { font-size: .68rem; line-height: 1.1rem; }
}

@media (max-width: 420px) {
	.sp-header__inner { padding-inline: 16px; }
	.sp-logo-img,
	.custom-logo { max-width: 142px; height: 31px; }
	.sp-container { width: calc(100% - 32px); }
	.sp-hero__inner { padding-inline: 0 !important; }
	.sp-hero h1 { font-size: 2.25rem !important; }
	.sp-hero__ctas .sp-btn { flex: 1 1 0; }
	.sp-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   v2.5.0 — FIGMA ACCOUNTS + MARKETS BATCH
   Desktop reference: exported 1920px Figma pages supplied 2026-08-06.
   This layer owns the Accounts, Funded Trader, Markets overview and every
   market-detail page, including their small-screen behaviour.
   ========================================================= */

.sp-page-markets .sp-platforms-hero {
	min-height: 300px;
	background:
		radial-gradient(circle at 18% 78%, rgba(253,64,76,.08), transparent 32%),
		radial-gradient(circle at 82% 28%, rgba(253,64,76,.06), transparent 36%),
		var(--bg) !important;
}
.sp-page-markets .sp-page-head {
	max-width: 900px;
	padding-top: 44px;
	padding-bottom: 72px;
}
.sp-page-markets .sp-page-head h1 { font-size: clamp(2.25rem, 4vw, 3rem); }
.sp-page-markets .sp-page-head p { max-width: 760px; margin-inline: auto; }
.sp-page-markets > .sp-platshow { padding: 48px 0 88px; }
.sp-page-markets .sp-platshow__row {
	min-height: 540px;
	padding: 72px 0;
	gap: 80px;
	border: 0;
}
.sp-page-markets .sp-platshow__copy h2 {
	max-width: 15ch;
	font-size: clamp(2.15rem, 3.6vw, 3rem);
	line-height: 1.08;
}
.sp-page-markets .sp-platshow__copy p {
	max-width: 54ch;
	font-size: 1rem;
	line-height: 1.65;
}
.sp-page-markets .sp-platshow__media { min-height: 360px; align-items: center; }
.sp-page-markets .sp-platshow__img {
	width: 100%;
	max-width: 590px;
	aspect-ratio: 1.25 / 1;
	object-fit: contain;
	border-radius: 0;
}
.sp-page-markets .sp-dlband { padding: 80px 0; }
.sp-page-markets .sp-ready-banner { margin-top: 0; }
.sp-page-markets .sp-faq { max-width: 1000px; }

.sp-page-funded-trader .sp-contact-hero {
	min-height: 410px;
	background-position: center 42% !important;
}
.sp-page-funded-trader .sp-contact-hero__inner { padding: 52px 0 84px; }
.sp-page-funded-trader .sp-contact-hero__inner p { max-width: 820px; margin-inline: auto; }
.sp-page-funded-trader .sp-section { padding: 72px 0; }
.sp-page-funded-trader .sp-section__head { max-width: 900px; margin-bottom: 44px; }
.sp-page-funded-trader .sp-whygrid--4col { text-align: left; }
.sp-page-funded-trader .sp-copysteps__grid { max-width: 1120px; margin-inline: auto; }
.sp-page-funded-trader .sp-comparetable__scroll,
.sp-page-funded-trader .sp-faq { max-width: 1120px; margin-inline: auto; }
.sp-page-funded-trader .sp-comparetable__table { font-size: .8rem; }
.sp-page-funded-trader .sp-comparetable__table th,
.sp-page-funded-trader .sp-comparetable__table td { padding: 10px 12px; }
.sp-page-funded-trader .sp-ready-banner { min-height: 380px; margin-top: 0; }

.sp-page-market-detail > .sp-container:first-child,
.sp-page-market-detail > .sp-breadcrumb { margin-top: 0; }
.sp-page-market-detail > .sp-container:first-child .sp-breadcrumb { padding-block: 24px; }
.sp-page-market-detail > .sp-section.sp-platshow:first-of-type { padding: 32px 0 72px; }
.sp-page-market-detail > .sp-section.sp-platshow:first-of-type .sp-platshow__row {
	min-height: 440px;
	padding: 28px 0;
	border: 0;
}
.sp-page-market-detail .sp-platshow__copy h1,
.sp-page-market-detail .sp-market-detail-title {
	max-width: 15ch;
	font-size: clamp(2.4rem, 4vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -.035em;
	font-weight: 600;
}
.sp-page-market-detail > .sp-section.sp-platshow:first-of-type .sp-platshow__img {
	max-width: 590px;
	aspect-ratio: 1.25 / 1;
	object-fit: contain;
	border-radius: 0;
}
.sp-page-market-detail > .sp-section.sp-platshow:nth-of-type(2) {
	padding-top: 48px;
	padding-bottom: 72px;
}
.sp-page-market-detail > .sp-section.sp-platshow:nth-of-type(2) .sp-platshow__row {
	padding: 0 0 56px;
	border: 0;
}
.sp-page-market-detail > .sp-section.sp-platshow:nth-of-type(2) .sp-platshow__img {
	max-width: 560px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 28px;
}
.sp-page-market-detail .sp-whygrid { gap: 34px; }
.sp-page-market-detail .sp-whychoose { padding: 72px 0 88px; }
.sp-page-market-detail .sp-whychoose__head { max-width: 760px; }
.sp-page-market-detail .sp-whychoose__head h2 { font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.15; }
.sp-page-market-detail .sp-marketwidget { max-width: 1120px; border-radius: 26px; }
.sp-page-market-detail .sp-marketwidget iframe { max-width: 100%; }
.sp-page-market-detail .sp-platmarkets__grid,
.sp-page-market-detail .sp-markets__grid { gap: 44px 34px; }
.sp-page-market-detail .sp-platmarket__art,
.sp-page-market-detail .sp-market__art {
	width: 100%;
	height: auto;
	aspect-ratio: 1.25 / 1;
	border-radius: 0;
	background: transparent;
}
.sp-page-market-detail .sp-platmarket__img,
.sp-page-market-detail .sp-market__art img { width: 100%; height: 100%; object-fit: contain; }
.sp-page-market-detail .sp-ready-banner { min-height: 380px; margin-top: 64px; }
.sp-page-market-detail .sp-faq { max-width: 1000px; }

.sp-page-market-crypto-cfds .sp-cryptofutures-hero,
.sp-page-market-crypto-futures .sp-cryptofutures-hero {
	padding: 72px 0 80px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.94)),
		url('../img/markets/detail/crypto-coins.jpg') center 48% / cover no-repeat;
}
[data-theme="dark"] .sp-page-market-crypto-cfds .sp-cryptofutures-hero,
[data-theme="dark"] .sp-page-market-crypto-futures .sp-cryptofutures-hero {
	background:
		linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.92)),
		url('../img/markets/detail/crypto-coins.jpg') center 48% / cover no-repeat;
}
.sp-page-market-crypto-cfds .sp-cryptofutures-hero p,
.sp-page-market-crypto-futures .sp-cryptofutures-hero p { max-width: 850px; }
.sp-page-market-crypto-cfds > .sp-section.sp-platshow:first-of-type,
.sp-page-market-crypto-futures > .sp-section.sp-platshow:first-of-type { padding: 72px 0; }
.sp-page-market-crypto-cfds > .sp-section.sp-platshow:first-of-type .sp-platshow__img,
.sp-page-market-crypto-futures > .sp-section.sp-platshow:first-of-type .sp-platshow__img {
	max-width: 560px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 28px;
}

@media (max-width: 1100px) {
	.sp-page-markets .sp-platshow__row { min-height: 0; gap: 36px; }
	.sp-page-markets .sp-platshow__media { min-height: 0; }
	.sp-page-market-detail .sp-whychoose__items { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.sp-page-market-detail .sp-whychoose__spacer { display: none; }
}

@media (max-width: 720px) {
	.sp-page-accounts .sp-platforms-hero,
	.sp-page-funded-trader .sp-contact-hero { min-height: 0; }
	.sp-page-accounts .sp-accounts-hero__inner,
	.sp-page-funded-trader .sp-contact-hero__inner { padding: 32px 0 48px; }
	.sp-page-accounts .sp-accounts-page-hero { background-position: 54% center; }
	.sp-page-accounts .sp-tiers { gap: 20px; }
	.sp-page-accounts .sp-tier { border-radius: 14px; }
	.sp-page-accounts .sp-steps__grid { gap: 30px; }
	.sp-page-accounts .sp-comparetable__scroll,
	.sp-page-funded-trader .sp-comparetable__scroll {
		margin-inline: -20px;
		padding-inline: 20px;
		width: calc(100% + 40px);
	}
	.sp-page-accounts .sp-ready-banner,
	.sp-page-accounts .sp-funded,
	.sp-page-funded-trader .sp-ready-banner { min-height: 330px; }

	.sp-page-markets .sp-platforms-hero { min-height: 0; }
	.sp-page-markets .sp-page-head { padding: 24px 0 44px; }
	.sp-page-markets > .sp-platshow { padding: 12px 0 52px; }
	.sp-page-markets .sp-platshow__row,
	.sp-page-markets .sp-platshow__row--reverse { padding: 44px 0; gap: 24px; }
	.sp-page-markets .sp-platshow__copy h2 { font-size: 2.15rem; }
	.sp-page-markets .sp-platshow__media { order: 2; }
	.sp-page-markets .sp-dlband { padding: 56px 0; }

	.sp-page-market-detail > .sp-container:first-child .sp-breadcrumb { padding-block: 18px; }
	.sp-page-market-detail > .sp-section.sp-platshow:first-of-type,
	.sp-page-market-detail > .sp-section.sp-platshow:nth-of-type(2),
	.sp-page-market-crypto-cfds > .sp-section.sp-platshow:first-of-type,
	.sp-page-market-crypto-futures > .sp-section.sp-platshow:first-of-type { padding: 28px 0 52px; }
	.sp-page-market-detail > .sp-section.sp-platshow:first-of-type .sp-platshow__row,
	.sp-page-market-detail > .sp-section.sp-platshow:nth-of-type(2) .sp-platshow__row { padding: 20px 0 36px; }
	.sp-page-market-detail .sp-platshow__copy h1,
	.sp-page-market-detail .sp-market-detail-title { font-size: 2.35rem; }
	.sp-page-market-detail .sp-whygrid { grid-template-columns: 1fr 1fr; text-align: left; gap: 28px 18px; }
	.sp-page-market-detail .sp-whygrid__icon { margin-left: 0; margin-right: 0; }
	.sp-page-market-detail .sp-whychoose { padding: 56px 0; }
	.sp-page-market-detail .sp-whychoose__items { grid-template-columns: 1fr; text-align: left; gap: 34px; }
	.sp-page-market-detail .sp-whychoose__item .sp-whygrid__icon { margin-left: 0; margin-right: 0; }
	.sp-page-market-detail .sp-companies { gap: 14px; }
	.sp-page-market-detail .sp-marketwidget { border-radius: 18px; }
	.sp-page-market-detail .sp-ready-banner { min-height: 320px; margin-top: 32px; }
	.sp-page-market-crypto-cfds .sp-cryptofutures-hero,
	.sp-page-market-crypto-futures .sp-cryptofutures-hero { padding: 48px 0 56px; }
	.sp-page-market-crypto-cfds .sp-cryptofutures-hero h1,
	.sp-page-market-crypto-futures .sp-cryptofutures-hero h1 { font-size: 2.25rem; }
	.sp-cryptoaccess__table-scroll {
		margin-inline: -20px;
		padding-inline: 20px;
		width: calc(100% + 40px);
	}
}

@media (max-width: 440px) {
	.sp-page-market-detail .sp-whygrid { grid-template-columns: 1fr; }
	.sp-page-markets .sp-platshow__copy h2,
	.sp-page-market-detail .sp-platshow__copy h1,
	.sp-page-market-detail .sp-market-detail-title { max-width: none; }
}

/* =========================================================
   v2.7.1 — AUTHORITATIVE LANGUAGE + TRADINGVIEW FIXES
   ========================================================= */

/* TradingView's ticker-tape iframe is a 46px strip. Earlier theme layers used
   several competing 54/72/134px heights, leaving an empty black band below
   the live quotes. This final rule gives every injected layer one canvas. */
#sp-tv-ticker.sp-ticker.sp-ticker--home {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 48px !important;
	min-height: 48px !important;
	max-height: 48px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-top: 1px solid #242428 !important;
	border-bottom: 1px solid #17171a !important;
	background: #1e1e20 !important;
	overflow: hidden !important;
	font-size: 0 !important;
	line-height: 0 !important;
}
#sp-tv-ticker.sp-ticker--home > .tradingview-widget-container,
#sp-tv-ticker.sp-ticker--home .tradingview-widget-container__widget,
#sp-tv-ticker.sp-ticker--home iframe {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 46px !important;
	min-height: 46px !important;
	max-height: 46px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
}

/* =========================================================
   v5.3.6 — GLOBAL DARK-MODE + CONTAINER FOUNDATION

   This is the final authoritative layer. Only global horizontal gutters
   live here; section-specific vertical rhythm remains untouched.
   Backgrounds stay on their full-width section wrappers while the inner
   .sp-container is capped or padded.
   ========================================================= */

.sp-theme-toggle {
	display: none !important;
}

/* 1280px and wider: fixed 1280px container, centered, with 3rem gutters. */
@media (min-width: 1920px) {
	.sp-container {
		width: 100%;
		max-width: 1280px;
		margin-inline: auto;
		padding-inline: 3rem;
	}
}

@media (min-width: 1280px) and (max-width: 1919.98px) {
	.sp-container {
		width: 100%;
		max-width: 1280px;
		margin-inline: auto;
		padding-inline: 3rem;
	}
}

/* 940–1279px: fluid container with 3rem horizontal gutters. */
@media (min-width: 940px) and (max-width: 1279.98px) {
	.sp-container {
		width: 100%;
		max-width: none;
		margin-inline: auto;
		padding-inline: 3rem;
	}
}

/* 640–939px: fluid container with 2rem horizontal gutters. */
@media (min-width: 640px) and (max-width: 939.98px) {
	.sp-container {
		width: 100%;
		max-width: none;
		margin-inline: auto;
		padding-inline: 2rem;
	}
}

/* Below 640px: fluid container with 1rem horizontal gutters. */
@media (max-width: 639.98px) {
	.sp-container {
		width: 100%;
		max-width: none;
		margin-inline: auto;
		padding-inline: 1rem;
	}

	/* Earlier mobile hero layers used padding-inline: 0 !important. The hero
	   remains full-bleed through its parent while its copy follows the same
	   1rem content gutter as every other section. */
	.sp-container.sp-hero__inner {
		padding-inline: 1rem !important;
	}
}

/* =========================================================
   v5.3.7 — HEADER WIDTH REPAIR + PAGE SCROLL PROGRESS

   The desktop header now fits the 1280px global container without wrapping
   labels or dropping chevrons onto a second line. Mobile navigation keeps
   the existing accordion layout.
   ========================================================= */

.sp-header {
	position: sticky;
	top: 0;
}

.sp-scroll-progress {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 140;
	height: 3px;
	pointer-events: none;
	background: rgba(255, 255, 255, .06);
}

.sp-scroll-progress__bar {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(90deg, var(--sp-accent), #ff7a84);
	box-shadow: 0 0 10px rgba(253, 64, 76, .45);
	will-change: transform;
}

@media (min-width: 1100.02px) {
	.sp-header__inner {
		display: grid;
		grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) auto;
		align-items: center;
		gap: clamp(20px, 2vw, 32px);
		height: 120px;
	}

	.sp-logo-wrap,
	.sp-logo {
		min-width: 0;
	}

	.sp-logo-img,
	.custom-logo {
		width: 100%;
		max-width: 220px;
		height: 48px;
		object-fit: contain;
		object-position: left center;
	}

	.sp-nav {
		min-width: 0;
		height: 100%;
	}

	.sp-nav__list {
		align-items: stretch;
		justify-content: center;
		gap: clamp(14px, 1.35vw, 22px);
	}

	.sp-nav__list > li {
		min-width: 0;
	}

	.sp-nav__list > li > a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		white-space: nowrap;
	}

	.sp-nav__list > li > a::after {
		flex: 0 0 auto;
		margin: 0 0 4px 8px;
	}
}

/* =========================================================
   v5.3.8 — AUGUST 2026 FIGMA EXPORT SYNC / OPTION 2

   Visual source: the supplied flattened SPM Aug26 desktop exports.
   Product constraints intentionally preserved:
   - 1280px capped content with the approved responsive gutters
   - full-bleed section backgrounds and media
   - dark theme only; theme switch remains hidden
   - the v5.3.7 page-scroll progress indicator remains active
   - no content, link, language, form or Site Settings ownership changes
   ========================================================= */

html,
body {
	background: #000;
	color: #f7f7f8;
}

.sp-theme-toggle {
	display: none !important;
}

.sp-header {
	background: rgba(13, 13, 14, .98);
	border-bottom: 1px solid #262629;
	backdrop-filter: blur(14px);
}

.sp-scroll-progress {
	height: 3px;
	background: rgba(255, 255, 255, .04);
}

.sp-scroll-progress__bar {
	background: linear-gradient(90deg, #fd404c 0%, #ff5964 72%, #ff7a84 100%);
}

.sp-section {
	position: relative;
	overflow: hidden;
}

.sp-section__head {
	max-width: 760px;
}

.sp-section__head p,
.sp-features__intro p,
.sp-feature p,
.sp-market p,
.sp-step p,
.sp-tier__sub,
.sp-tier li {
	color: #a8a8ad;
}

.sp-btn {
	border-radius: 8px;
}

.sp-btn--accent {
	background: #fd404c;
}

.sp-page-home .sp-hero {
	min-height: 560px;
	background-color: #020202;
	background-position: center;
	background-size: cover;
}

.sp-page-home .sp-hero__inner {
	min-height: 560px;
}

.sp-page-home .sp-hero__copy {
	position: relative;
	z-index: 2;
	max-width: 570px;
}

.sp-page-home .sp-features {
	background:
		radial-gradient(circle at 15% 52%, rgba(123, 10, 18, .22), transparent 38%),
		linear-gradient(90deg, #080202 0%, #040202 38%, #000 78%);
	border-bottom: 1px solid #242427;
}

.sp-page-home .sp-feature__icon,
.sp-page-home .sp-feature__icon img {
	width: 76px;
	height: 76px;
}

.sp-page-home .sp-feature h3 {
	margin: 24px 0 14px;
}

.sp-page-home .sp-partner-line {
	font-size: 1rem;
}

.sp-page-home .sp-markets {
	background: #000;
}

.sp-page-home .sp-market__art {
	width: 100%;
	height: auto;
	aspect-ratio: 303 / 240;
	margin: 0 0 18px;
	background: transparent;
}

.sp-page-home .sp-market h3 {
	margin-bottom: 14px;
}

.sp-page-home .sp-market p {
	margin-bottom: 14px;
}

.sp-page-home .sp-ready-banner,
.sp-page-home .sp-funded {
	min-height: 400px;
	padding: 72px 48px;
	border: 1px solid #303034;
	border-radius: 16px;
}

.sp-page-home .sp-ready-banner__copy,
.sp-page-home .sp-funded__copy {
	max-width: 520px;
}

.sp-page-home .sp-platforms {
	background:
		radial-gradient(circle at 50% 35%, rgba(113, 10, 17, .20), transparent 45%),
		#050101;
	border-top: 0;
	border-bottom: 1px solid #242427;
}

.sp-page-home .sp-platforms__logos {
	margin-bottom: 28px;
}

.sp-page-home .sp-platforms__cta {
	margin: 0 0 48px;
}

.sp-page-home .sp-platforms__imgwrap {
	margin: 0;
}

.sp-page-home .sp-platforms__img {
	display: block;
	width: min(100%, 1150px);
	height: auto;
	max-height: none;
	margin: 0 auto;
	border: 1px solid #303034;
	border-radius: 16px;
	object-fit: cover;
}

.sp-page-home .sp-accounts {
	background:
		radial-gradient(circle at 52% 52%, rgba(95, 8, 14, .18), transparent 42%),
		#000;
}

.sp-page-home .sp-tier {
	padding: 32px 28px;
	border: 1px solid #29292d;
	border-radius: 12px;
	background: #080809;
}

.sp-page-home .sp-tier--featured {
	border-color: #424247;
	background: #1d1d1f;
}

.sp-page-home .sp-steps {
	border-top: 0;
	background:
		radial-gradient(circle at 50% 100%, rgba(93, 7, 14, .18), transparent 45%),
		#000;
}

.sp-page-home .sp-step {
	min-height: 246px;
	padding: 28px 24px;
	border: 1px solid #2b2b2f;
	border-radius: 12px;
	background: rgba(6, 6, 7, .86);
}

.sp-page-home .sp-step__iconwrap {
	margin-bottom: 26px;
}

.sp-page-home .sp-stats {
	margin-top: 24px;
}

.sp-page-home .sp-stat {
	border-color: #303034;
	background: #0c0c0e;
}

.sp-page-home .sp-payments {
	background: #19191b;
	border-block: 1px solid #29292d;
}

.sp-page-home .sp-final-cta {
	background-color: #fd404c;
}

.sp-contact-hero,
.sp-platforms-hero,
.sp-cryptofutures-hero {
	background-color: #050506;
}

.sp-resource,
.sp-tier,
.sp-vm-box,
.sp-contact-form,
.sp-contactbox,
.sp-marketwidget,
.sp-poweredby__banner,
.sp-platshow__img,
.sp-platshow__placeholder {
	border-radius: 16px;
}

.sp-footer {
	background: #19191a;
	border-top: 1px solid #2b2b2e;
}

@media (min-width: 1100.02px) {
	.sp-header__inner {
		grid-template-columns: minmax(180px, 210px) minmax(0, 1fr) auto;
		gap: 24px;
		height: 120px;
	}

	.sp-logo-img,
	.custom-logo {
		max-width: 210px;
	}

	.sp-nav__list {
		gap: clamp(12px, 1.25vw, 20px);
	}

	.sp-nav__list > li > a {
		font-size: .94rem;
		font-weight: 400;
	}

	.sp-header__actions {
		gap: 12px;
	}

	.sp-header__actions .sp-btn {
		min-height: 48px;
		padding: 11px 18px;
	}

	.sp-page-home .sp-hero h1 {
		font-size: 3.5rem;
		line-height: 1.12;
	}

	.sp-page-home .sp-hero__copy p {
		margin: 24px 0 32px;
		font-size: 1.125rem;
		line-height: 1.75rem;
	}

	.sp-page-home .sp-section {
		padding-block: 80px;
	}

	.sp-page-home .sp-features__intro {
		width: min(720px, 100%);
	}

	.sp-page-home .sp-features__intro p {
		margin: 24px 0 30px;
	}

	.sp-page-home .sp-features__items {
		width: calc(100% - 280px);
		margin: 56px 0 0 280px;
		gap: 48px 28px;
	}

	.sp-page-home .sp-partner-line {
		margin: 48px 0 0 280px;
	}

	.sp-page-home .sp-markets__grid {
		gap: 52px 28px;
	}

	.sp-page-home .sp-tiers {
		gap: 20px;
	}

	.sp-page-home .sp-steps__grid {
		gap: 20px;
	}

	.sp-footer__top {
		grid-template-columns: 250px minmax(0, 1fr);
		gap: 56px;
	}
}

@media (min-width: 940px) and (max-width: 1100px) {
	.sp-page-home .sp-hero {
		min-height: 520px;
	}

	.sp-page-home .sp-hero__inner {
		min-height: 520px;
	}
}

@media (max-width: 939.98px) {
	.sp-page-home .sp-ready-banner,
	.sp-page-home .sp-funded {
		min-height: 340px;
		padding: 56px 36px;
	}
}

@media (max-width: 720px) {
	.sp-page-home .sp-section {
		padding-block: 56px;
	}

	.sp-page-home .sp-feature__icon,
	.sp-page-home .sp-feature__icon img {
		width: 64px;
		height: 64px;
	}

	.sp-page-home .sp-ready-banner,
	.sp-page-home .sp-funded {
		min-height: 320px;
		padding: 40px 24px;
		border-radius: 14px;
	}

	.sp-page-home .sp-platforms__img {
		border-radius: 14px;
	}

	.sp-page-home .sp-tier,
	.sp-page-home .sp-step {
		border-radius: 12px;
	}

	.sp-page-home .sp-step {
		min-height: 0;
	}
}