/* ============================================================
   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 {
	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 — a quick link list, not a feature grid: headline-only
   rectangular cards, fixed width so rows wrap and centre naturally (a short
   last row sits in the middle of its row instead of hugging the left edge),
   tight gap so seven links read as one dense block rather than a sprawling
   grid. */
.rx-downloads.rx-section { padding-top: var(--rx-s-4); padding-bottom: var(--rx-s-4); }
.rx-downloads .rx-onb__head { margin-bottom: var(--rx-s-3); }
.rx-downloads__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.rx-downloads__grid .rx-platform {
	flex: 0 0 auto;
	width: 236px;
	padding: 14px 16px;
	border-radius: var(--rx-r-md);
}
.rx-downloads__grid .rx-platform__icon { width: 34px; height: 34px; flex: 0 0 34px; }
.rx-downloads__grid .rx-platform__icon svg { width: 18px; height: 18px; }
.rx-downloads__grid .rx-platform__name { font-size: var(--rx-fs-sm); font-weight: 700; color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.rx-steps__track { grid-template-columns: repeat(2, 1fr); }
	.rx-steps__track::before { display: none; }
}
@media (max-width: 560px) {
	.rx-steps__track { grid-template-columns: 1fr; }
}

/* ============================================================
   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); }