/* ============================================================
   RocketX — Mobile centre-alignment layer
   ------------------------------------------------------------
   Client direction (2026-07-21): on mobile the site must read as
   centre-aligned throughout. Once the marketing layouts stack into
   a single column, left-aligned copy/cards sitting under centred
   section headings looks inconsistent ("left and centre don't go").

   This layer flips the marketing / display components to centre at
   the mobile breakpoint. Section headers, the CTA band, the steps
   track, the deposit strip and the 404 card are already centred, so
   they're not repeated here.

   Deliberately NOT centred (long-form reading + structured data —
   centring these hurts readability, so they keep their left edge):
     · .rx-prose            legal / policy / blog body copy
     · .rx-faq              Q&A accordion answers
     · .rx-glossary         term list + definitions
     · blog article body    (blog.css)
     · legal pages          (legal.css)
     · compare tables + .rx-acct spec grids (tabular label/value data)
     · Market Pulse dashboard (markets.css) — left-aligned "cockpit"
     · Calculator Bay (calculators.css) — functional form / masthead

   Selectors are body-prefixed (specificity 0,1,1) so they reliably
   beat each component's own base rule (0,1,0) regardless of which
   stylesheet — sitewide or page-specific — loads last. The explicit
   .rx-page-hero--center variant (0,2,0) still wins where a hero is
   deliberately centred; we only add the CTA centring it was missing.

   Breakpoint 768px = phones + large phones. At/above it the two-column
   layouts survive and are left exactly as designed.
   ============================================================ */

@media (max-width: 768px) {

	/* ---- Interior page hero (rx_page_hero) ----
	   Centre the copy for the non-"center" variant, and — for every
	   variant — centre the CTA row. The CTA row is an equal-track inline-grid
	   (sections.css) sized to its content, so centring it is align-self, not
	   justify-content — and it has to be restated here because the base rule
	   pins the left-aligned variant to flex-start, which would otherwise beat
	   the inner's align-items:center. */
	body .rx-page-hero__inner {
		align-items: center;
		text-align: center;
	}
	body .rx-page-hero__eyebrow { align-self: center; }
	body .rx-page-hero__ctas {
		align-self: center;
		justify-content: center;
	}

	/* ---- Split (text + media), once the copy stacks above the media ---- */
	body .rx-split__copy {
		align-items: center;
		text-align: center;
	}

	/* ---- Feature / 3D tilt cards ---- */
	body .rx-card-3d { text-align: center; }
	body .rx-card-3d__icon {
		margin-left: auto;
		margin-right: auto;
	}

	/* ---- Key Highlights split — copy column (the stat rows are centred
	        at all widths in components.css, so only the copy needs it here) ---- */
	body .rx-highlights__copy {
		align-items: center;
		text-align: center;
	}

	/* ---- Account summary cards (marketing grid — NOT the interactive
	        two-step spec table, which is tabular data and stays left) ---- */
	body .rx-account-card {
		align-items: center;
		text-align: center;
	}

	/* ---- Download / device cards (Platforms page) ---- */
	body .rx-dl-card {
		align-items: center;
		text-align: center;
	}

	/* ---- Campaign / migration notice card ---- */
	body .rx-cmp__card { text-align: center; }
	body .rx-cmp__actions { justify-content: center; }
}