/* ============================================================
   RocketX onboarding sections
     .rx-steps      — "open an account" 4-step workflow
     .rx-platforms  — "trade on any device" download tiles
   Dark glass, matches the homepage. Reuses design tokens.
   ============================================================ */

/* ---------- Shared section heading ---------- */
.rx-onb { position: relative; }
.rx-onb__head { text-align: center; max-width: 720px; margin: 0 auto var(--rx-s-6); }
.rx-onb__eyebrow {
	display: inline-block;
	font-size: var(--rx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rx-orange-300);
	padding: 6px 16px;
	border: 1px solid rgba(240, 133, 102, 0.35);
	border-radius: var(--rx-r-pill);
	margin-bottom: var(--rx-s-3);
}
.rx-onb__title {
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	font-weight: 800;
	line-height: 1.08;
	color: #fff;
	margin: 0 0 var(--rx-s-2);
}
.rx-onb__title em { color: var(--rx-orange); font-style: normal; }
.rx-onb__sub { font-size: var(--rx-fs-md); line-height: 1.6; color: rgba(255, 255, 255, 0.6); margin: 0; }

/* ============================================================
   Steps
   ============================================================ */
.rx-steps__track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--rx-s-3);
}
/* connecting line behind the number nodes.
   It must thread through the centre of the 68px number circles, which sit
   below each card's top padding (--rx-s-4). So: padding + half the circle
   (34px). Without the padding offset the line floats above the numbers. */
.rx-steps__track::before {
	content: "";
	position: absolute;
	top: calc(var(--rx-s-4) + 34px);
	left: 12%;
	right: 12%;
	height: 2px;
	background: linear-gradient(90deg, rgba(220, 79, 44, 0.15), rgba(220, 79, 44, 0.6), rgba(220, 79, 44, 0.15));
	z-index: 0;
}

.rx-step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--rx-s-4) var(--rx-s-3) var(--rx-s-3);
	border-radius: var(--rx-r-lg);
	border: 1px solid var(--rx-stroke-light);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%),
		var(--rx-surface-dark);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 50px -30px rgba(0, 0, 0, 0.6);
}

.rx-step__num {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin-bottom: var(--rx-s-3);
	border-radius: 50%;
	font-size: 1.5rem;
	font-weight: 800;
	color: #fff;
	background: radial-gradient(120% 120% at 30% 20%, var(--rx-orange-300), var(--rx-orange-600));
	box-shadow: 0 0 30px rgba(220, 79, 44, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.rx-step__num svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 2; }

.rx-step__title { font-size: var(--rx-fs-md); font-weight: 700; color: #fff; margin: 0 0 8px; }
.rx-step__text  { font-size: var(--rx-fs-sm); line-height: 1.6; color: rgba(255, 255, 255, 0.62); margin: 0; }

.rx-steps__cta { text-align: center; margin-top: var(--rx-s-6); }

/* ============================================================
   Platforms
   ============================================================ */
.rx-platforms__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--rx-s-3);
}
.rx-platform {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: var(--rx-s-4);
	border-radius: var(--rx-r-lg);
	border: 1px solid var(--rx-stroke-light);
	background:
		linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01) 60%),
		var(--rx-surface-dark);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: inherit;
	text-decoration: none;
	transition: transform var(--rx-dur-fast) var(--rx-ease-out), border-color var(--rx-dur-fast);
}
a.rx-platform:hover { transform: translateY(-4px); border-color: rgba(240, 133, 102, 0.5); }
.rx-platform__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: var(--rx-r-md);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--rx-line);
}
.rx-platform__icon svg { width: 26px; height: 26px; fill: #fff; }
.rx-platform__name { font-size: var(--rx-fs-md); font-weight: 700; color: #fff; }
.rx-platform__cap  { font-size: var(--rx-fs-xs); line-height: 1.5; color: rgba(255, 255, 255, 0.55); }

/* Official store badges (mobile apps) */
.rx-platforms__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: var(--rx-s-4);
}
.rx-store-link {
	color: #fff;
	display: inline-flex;
	border-radius: 8px;
	transition: transform var(--rx-dur-fast) var(--rx-ease-out);
}
.rx-store-link:hover { transform: translateY(-3px); }
.rx-store-badge { display: block; height: 48px; width: auto; }

.rx-platforms__more { text-align: center; margin-top: var(--rx-s-4); }
.rx-platforms__more a {
	color: var(--rx-orange-300);
	font-size: var(--rx-fs-sm);
	font-weight: 600;
	text-decoration: none;
}
.rx-platforms__more a:hover { text-decoration: underline; }

/* Downloads page — one card per device, each carrying a caption and its own
   action label. Deliberately NOT .rx-platform: that class is the compact
   horizontal teaser tile (see the compact block below, which forces
   flex-direction:row), whereas these are taller stacked cards whose action row
   pins to the bottom so the labels line up across a row of uneven captions. */
.rx-downloads.rx-section { padding-top: var(--rx-s-5); padding-bottom: var(--rx-s-5); }
.rx-downloads .rx-onb__head { margin-bottom: var(--rx-s-4); }
/* Centred flex-wrap rather than an auto-fit grid: a full row still fills the
   width, but a sparse trailing row (e.g. 2 cards under a row of 4) centres
   instead of left-aligning, which CSS grid can't do for orphan items. Cards
   are pinned to exactly a quarter-row width (no grow), so every card is the
   SAME size and the trailing pair centres at that width rather than stretching.
   Column count drops to 2 then 1 in the responsive block below. */
.rx-downloads__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rx-s-3);
}
.rx-dl-card {
	flex: 0 1 calc((100% - 3 * var(--rx-s-3)) / 4);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: var(--rx-s-4);
	border-radius: var(--rx-r-lg);
	border: 1px solid var(--rx-stroke-light);
	background:
		linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01) 60%),
		var(--rx-surface-dark);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: inherit;
	text-decoration: none;
	transition: transform var(--rx-dur-fast) var(--rx-ease-out), border-color var(--rx-dur-fast);
}
a.rx-dl-card:hover { transform: translateY(-4px); border-color: rgba(240, 133, 102, 0.5); }
.rx-dl-card__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: var(--rx-r-md);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--rx-line);
}
.rx-dl-card__icon svg { width: 26px; height: 26px; fill: #fff; }
.rx-dl-card__name { font-size: var(--rx-fs-md); font-weight: 700; color: #fff; }
.rx-dl-card__cap {
	font-size: var(--rx-fs-xs);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.55);
}
/* margin-top:auto pins the action to the card foot regardless of caption length */
.rx-dl-card__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
	font-size: var(--rx-fs-xs);
	font-weight: 600;
	color: var(--rx-orange-300);
}
.rx-dl-card__arrow {
	width: 14px;
	height: 14px;
	transition: transform var(--rx-dur-fast) var(--rx-ease-out);
}
a.rx-dl-card:hover .rx-dl-card__arrow { transform: translateX(3px); }

.rx-downloads__note {
	margin-top: var(--rx-s-4);
	text-align: center;
	font-size: var(--rx-fs-sm);
	color: rgba(255, 255, 255, 0.55);
}
.rx-downloads__note strong { color: #fff; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
	a.rx-dl-card:hover { transform: none; }
	a.rx-dl-card:hover .rx-dl-card__arrow { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.rx-steps__track { grid-template-columns: repeat(2, 1fr); }
	.rx-steps__track::before { display: none; }
	/* 2 equal cards per row; a trailing single card centres. */
	.rx-dl-card { flex-basis: calc((100% - var(--rx-s-3)) / 2); }
}
@media (max-width: 560px) {
	.rx-steps__track { grid-template-columns: 1fr; }
	.rx-dl-card { flex-basis: 100%; }
}

/* ============================================================
   Platforms — compact (horizontal tiles, tighter rhythm)
   ============================================================ */
.rx-platforms.rx-section { padding-top: var(--rx-s-5); padding-bottom: var(--rx-s-5); }
.rx-platforms .rx-onb__head { margin-bottom: var(--rx-s-4); }
.rx-platforms__grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--rx-s-2); }
.rx-platform { flex-direction: row; align-items: center; gap: 12px; padding: var(--rx-s-3); }
.rx-platform__icon { width: 40px; height: 40px; flex: 0 0 40px; }
.rx-platform__icon svg { width: 22px; height: 22px; }
.rx-platform__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rx-platform__name { font-size: var(--rx-fs-sm); }

/* ============================================================
   Deposit methods strip
   ============================================================ */
.rx-deposit.rx-section { padding-top: var(--rx-s-5); padding-bottom: var(--rx-s-5); }
.rx-deposit .rx-onb__head { margin-bottom: var(--rx-s-4); }
.rx-deposit__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--rx-s-3); }
.rx-deposit__item {
	display: inline-flex;
	transition: transform var(--rx-dur-fast) var(--rx-ease-out);
}
.rx-deposit__item:hover { transform: translateY(-3px); }

/* Light "logo chip" — uniform white card so mixed-brand logos (and Capitec's
   opaque JPG) all read cleanly against the dark section. */
.rx-deposit__chip {
	display: grid;
	place-items: center;
	height: 60px;
	min-width: 156px;
	padding: 0 26px;
	border-radius: 14px;
	background: #fff;
	box-shadow:
		0 14px 34px -18px rgba(0, 0, 0, 0.7),
		inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.rx-deposit__logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 30px;
	max-width: 132px;
	object-fit: contain;
}
.rx-deposit__eft {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #11224A;
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
}
.rx-deposit__eft svg { width: 22px; height: 22px; fill: #11224A; }
.rx-deposit__note { text-align: center; margin-top: var(--rx-s-3); font-size: var(--rx-fs-xs); color: rgba(255, 255, 255, 0.45); }