/* ==========================================================================
   Rewards Plus V2  —  page-specific styles (.rp-*)
   Depends on home-v2.css for @font-face, .hv2, .hv-shell, .hv-tag, .hv-sechead
   All values sourced from Figma 13:10244 (desktop) / 13:11905 (mobile).
   ========================================================================== */

/* ---- shared bits ---------------------------------------------------------- */
.rp-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	padding: 8px 20px 8px 16px;
}
.rp-tag__dot {
	width: 8px;
	height: 8px;
	border-radius: 1px;
	background: #2ad9c4;
	flex: none;
}
.rp-tag__label {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.16px;
	color: #fff;
}

.rp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 2px;
	background: #2ad9c4;
	color: #0a0a0a;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.16px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.rp-btn:hover { background: #24c3b0; }

/* ==========================================================================
   1. HERO  (Figma 13:10245)
   ========================================================================== */
.rp-hero {
	/* The teal glow is a background layer, not a ::before. ::before is the
	   global left frame rail (home-v2.css) — overriding it here erased the
	   rail for this section and broke the continuous line down the page. */
	background:
		radial-gradient(50% 50% at 50% 50%, rgba(42, 217, 196, 0.10) 0%, rgba(42, 217, 196, 0) 70%)
			center -200px / 1400px 900px no-repeat,
		#0e0e0e;
	padding: 48px 0 120px;
}
.rp-hero__inner {
	max-width: min(1600px, 100%);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
}
.rp-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
	/* Figma splits the 1600 hero row 737 copy / 839 visual. Holding the copy at
	   a fixed 737 with flex:none meant the visual absorbed every pixel lost as
	   the viewport narrowed — it fell to 290px, 29% of the animation's natural
	   size, and the text in it became unreadable. Both sides now carry their
	   Figma width as a flex basis and grow/shrink together, so the split stays
	   at the design ratio whatever the width. */
	flex: 1 1 737px;
	min-width: 0;
}
.rp-hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
.rp-hero__title {
	margin: 0;
	max-width: 663px;
	font-size: 64px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -1.28px;
	color: #fff;
}
.rp-hero__lede {
	margin: 0;
	max-width: 663px;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.56px;
	color: rgba(255, 255, 255, 0.6);
}
.rp-hero__visual {
	flex: 1 1 839px;
	min-width: 0;
	/* Was a flat 800px. `contain` inside an 800-tall box left up to 280px of dead
	   space under it at narrow widths, so the box tracks the artwork's own ratio
	   and is exactly as tall as what it draws. Now 942x800: the hero is a Lottie
	   animation (components/rp/HeroLottie) rather than the old 1007x800 SVG. */
	aspect-ratio: 942 / 800;
	height: auto;
	border-radius: 32px;
}
.rp-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

/* ==========================================================================
   2. ONE LOYALTY VIEW  (Figma 13:10637)
   ========================================================================== */
.rp-loyalty {
	background: #0e0e0e;
}
.rp-loyalty__head {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 80px 0;
	text-align: center;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.rp-loyalty__eyebrow,
.rp-loyalty__title,
.rp-loyalty__sub {
	position: relative;
	z-index: 1;
	margin: 0;
}
.rp-loyalty__eyebrow {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.32px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}
.rp-loyalty__title {
	max-width: min(1050px, 100%);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.72px;
	color: #fff;
}
.rp-loyalty__sub {
	max-width: min(1104px, 100%);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.48px;
	color: rgba(255, 255, 255, 0.7);
}
.rp-loyalty__diagram {
	max-width: min(1920px, 100%);
	margin: 0 auto;
	/* keep the diagram comfortably inside the content-column frame lines + space on top */
	padding: 72px 180px 96px;
}
.rp-loyalty__diagram img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- reusable centered section header ------------------------------------- */
.rp-head {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	padding: 80px 0 48px;
	overflow: hidden;
}
.rp-head--bordered {
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.rp-light .rp-head--bordered { border-color: rgba(17, 17, 17, 0.2); }
.rp-head > * { position: relative; z-index: 1; }
.rp-head__eyebrow {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.32px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}
.rp-head__title {
	margin: 0;
	max-width: min(1050px, 100%);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.72px;
	color: #fff;
}
.rp-head__sub {
	margin: 0;
	max-width: min(1104px, 100%);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.48px;
	color: rgba(255, 255, 255, 0.7);
}
.rp-light .rp-head__eyebrow { color: rgba(0, 0, 0, 0.7); }
.rp-light .rp-head__title { color: #111; }
.rp-light .rp-head__sub { color: rgba(0, 0, 0, 0.7); }

/* ==========================================================================
   4. BUILT FOR BANKING COMPLEXITY  (Figma 13:11421, light)
   ========================================================================== */
/* The glow section above ends in the arc, and that arc IS the transition into
   this section — stacking a top padding on it as well read as one huge gap.
   Zeroed here (not in home-v2.css, which this sheet loads after). */
/* Bank-Grade Controls sits flush against its neighbours — no gap either side.
   Two things were holding it apart:
     - the shared `main > section [class*="-head--dots"]` rule in home-v2.css,
       which gives every dotted header band a 64px margin top and bottom;
     - this section's own 140px bottom padding.
   Both are cleared here rather than globally, so every other page's dotted
   band keeps its breathing room. The section above ends in its glow and the
   one below opens with its own dotted band, and both share this background,
   so the join reads as continuous. */
.rp-complex {
	background: #f6f6f6;
	padding: 0;
}
.rp-complex .rp-head {
	margin-top: 0;
	margin-bottom: 0;
	padding: 80px 0;
}
/* ==========================================================================
   Bank-grade controls map — rebuilt from Figma 13:11432 (a 1600x677 frame).
   Positions are percentages of that frame and lengths are cqw against the same
   box, so it scales like the flat image it replaced, with no breakpoints.
   ========================================================================== */
.rpc-map {
	position: relative;
	container-type: inline-size;
	width: 100%;
	aspect-ratio: 1600 / 677;
}
/* Behind the panels — this is what keeps a pulse from crossing a card. */
.rpc-map__wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}
/* Figma's own connector: 8-on/8-off dashes carrying a teal-to-dark gradient.
   Animating the dash offset by exactly one 16-unit cycle makes the dashes march
   towards the panels and loop seamlessly — the dotted line itself moves, rather
   than a separate solid pulse gliding over a static one. */
.rpc-map__rails line {
	stroke-width: 2;
	stroke-dasharray: 8 8;
	animation: rpc-flow 1.4s linear infinite;
}
.rpc-map__rails line:nth-child(2) { animation-delay: 0.2s; }
.rpc-map__rails line:nth-child(3) { animation-delay: 0.4s; }
@keyframes rpc-flow {
	from { stroke-dashoffset: 16; }
	to   { stroke-dashoffset: 0; }
}
.rpc-panel,
.rpc-engine { position: absolute; z-index: 1; background: #fff; }
.rpc-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2cqw;
	padding: 1.5cqw;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 2px;
}
/* Figma geometry, as a share of the 1600x677 frame. */
.rpc-panel--ops   { left: 27.531%; top: 7.681%;  width: 45%;     height: 36.632%; }
.rpc-panel--users { left: 0;       top: 54.062%; width: 26.875%; height: 36.041%; }
.rpc-panel--txn   { left: 71.313%; top: 53.471%; width: 28.688%; height: 36.632%; }
.rpc-panel__head { display: flex; align-items: center; gap: 1cqw; }
.rpc-panel__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5cqw;
	background: #1d403c;
	border-radius: 1px;
	flex: none;
}
.rpc-panel__icon img { width: 2cqw; height: 2cqw; display: block; }
.rpc-panel__title {
	margin: 0;
	font-size: 1.75cqw;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #000;
	white-space: nowrap;
}
.rpc-panel__items {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1.5cqw;
}
/* space-between puts the gap where Figma's differing row widths leave it */
.rpc-panel__row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}
.rpc-chip {
	width: var(--rpc-chip-w);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75cqw;
	text-align: center;
	background: rgba(42, 217, 196, 0.2);
	border: 1px dashed rgba(29, 64, 60, 0.5);
	font-size: 1.125cqw;
	font-weight: 500;
	line-height: 1.2;
	color: #1d403c;
	/* Figma marks these nowrap. Without it four labels broke to two lines even
	   though they fit — measured overflow with nowrap is 0px. */
	white-space: nowrap;
}
.rpc-engine {
	left: 41.375%;
	top: 61.891%;
	width: 17.25%;
	height: 18.316%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5cqw;
	border: 1px solid #2ad9c4;
}
.rpc-engine__label {
	margin: 0;
	font-size: 2cqw;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-align: center;
	color: #2ad9c4;
}
.rpc-engine__handle {
	position: absolute;
	width: 0.75cqw;
	height: 0.75cqw;
	background: #e1e1e1;
	border: 2px solid #d4d4d4;
	border-radius: 4px;
}
.rpc-engine__handle--tl { left: -0.375cqw; top: -0.375cqw; }
.rpc-engine__handle--tr { right: -0.375cqw; top: -0.375cqw; }
.rpc-engine__handle--bl { left: -0.375cqw; bottom: -0.375cqw; }
.rpc-engine__handle--br { right: -0.375cqw; bottom: -0.375cqw; }
.rpc-link { display: none; }
@media (prefers-reduced-motion: reduce) {
	.rpc-map__rails line,
	.rpc-link { animation: none; }
}

/* ---------------------------------------------------------------------------
   Mobile map (Figma 13:13010, a 353px frame). Same component, restacked into a
   single column: engine, then each panel under a dashed run, with all four
   chips full width instead of two rows of two. This replaced a flat PNG, so the
   labels are now real text — selectable, translatable and legible at any zoom.
   Lengths are the design's own px on a 360px cap rather than cqw, because the
   frame is fixed-width and the panels stop growing past it.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.rpc-map {
		display: flex;
		flex-direction: column;
		align-items: center;
		aspect-ratio: auto;
		container-type: normal;
		max-width: 360px;
		margin: 0 auto;
	}
	.rpc-map__wires { display: none; }
	/* relative, not static: the engine's four corner handles are absolutely
	   positioned and would otherwise anchor to .rpc-map. `inset: auto` drops the
	   desktop percentage placement that comes with it. */
	.rpc-engine,
	.rpc-panel { position: relative; inset: auto; }

	.rpc-engine {
		width: 260px;
		max-width: 100%;
		height: auto;
		padding: 16px;
	}
	.rpc-engine__label { font-size: 24px; }
	.rpc-engine__handle { width: 12px; height: 12px; }
	.rpc-engine__handle--tl { left: -7px; top: -7px; }
	.rpc-engine__handle--tr { right: -7px; top: -7px; }
	.rpc-engine__handle--bl { left: -7px; bottom: -7px; }
	.rpc-engine__handle--br { right: -7px; bottom: -7px; }

	/* The connector run: the desktop's 8/8 dashes and teal-to-dark fade, turned
	   vertical. The mask supplies the fade, so the dashes can keep marching. */
	.rpc-link {
		display: block;
		flex: none;
		width: 2px;
		height: 46px;
		background-image: repeating-linear-gradient(to bottom, #2ad9c4 0 8px, transparent 8px 16px);
		-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), #000);
		mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), #000);
		animation: rpc-flow-v 1.4s linear infinite;
	}

	.rpc-panel {
		width: 100%;
		height: auto;
		gap: 16px;
		padding: 12px;
	}
	.rpc-panel__head { gap: 8px; }
	.rpc-panel__icon { padding: 4px; }
	.rpc-panel__icon img { width: 16px; height: 16px; }
	.rpc-panel__title { font-size: 20px; white-space: normal; text-align: center; }
	.rpc-panel__items { gap: 12px; }
	.rpc-panel__row { flex-direction: column; gap: 12px; }
	.rpc-chip { width: 100%; padding: 8px 12px; font-size: 12px; white-space: normal; }
}
@keyframes rpc-flow-v {
	from { background-position: 0 -16px; }
	to   { background-position: 0 0; }
}

.rp-complex__diagram {
	max-width: min(1600px, 100%);
	margin: 56px auto 0;
	position: relative;
}
.rp-complex__diagram img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   5. MODERNISE REWARDS  (Figma 13:11509, light)
   ========================================================================== */
.rp-deploy {
	background: #f6f6f6;
	/* No trailing padding: the next section already opens with 140px plus
	   its dotted band's 64px margin, which is the whole gap. Doubling up put
	   344px between them. */
	padding: 140px 0 0;
}
.rp-deploy .rp-head { padding: 80px 0; }
.rp-deploy__row {
	display: flex;
	align-items: stretch;
	gap: 40px;
	max-width: min(1600px, 100%);
	margin: 56px auto 0;
}
.rp-deploy__visual {
	position: relative;
	/* 757x646 is the Figma size; flex-shrink lets the pair (757 + 40 + 771 =
	   1568px) fit rows narrower than that instead of pushing the page out. */
	width: 757px;
	flex: 0 1 auto;
	min-width: 0;
	height: auto;
	aspect-ratio: 757 / 646;
	border: 1px solid #c7c7c7;
	overflow: hidden;
	box-sizing: border-box;
	padding: 64px;
	background-color: #f6f6f6;
	background-image: repeating-linear-gradient(135deg, #e3e3e3 0, #e3e3e3 1px, transparent 1px, transparent 28px);
}
.rp-deploy__visual img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rp-deploy__visual img.rp-deploy__vis--mobile { display: none; }

/* ---- Deployment isometric ------------------------------------------------
   The artwork is inlined SVG so each slab can move on its own. All three float
   continuously, on their own clock: nothing about the artwork depends on the
   scroll position any more. It used to dim the two inactive slabs to 0.55 and
   lift the one matching the highlighted feature, which read as greyed-out artwork
   with one piece popping rather than as an animation. The scroll-driven highlight
   now lives entirely in the copy beside it.
   Group ids come from the file: 2147238808 = plug slab, 2147240916 = shield,
   2147238812 = lightning. */
.rp-deploy__iso { width: 100%; height: 100%; display: flex; }
/* No overflow:visible — the viewBox carries its own headroom for the lift, so
   the artwork stays clipped to its box the way the old <img> was. Letting it
   paint outside pushed the slabs over the card's border. */
.rp-deploy__iso svg { width: 100%; height: 100%; display: block; }
/* The artwork animates continuously, on its own clock — nothing here is tied to
   scroll.

   The exported file ships its own keyframes (six tracks, 4s linear infinite) but
   they are not usable as motion: each slab jumps 36 units up and back inside the
   first 1.5s, holds still for the remaining 2.5s, and two icons blink 0.4 -> 1 on
   the same beat. Linear timing plus a dead pause reads as a twitch, so those tracks
   are switched off and the three slabs get a slow, even float instead: one 6s
   ease-in-out cycle with no hold, staggered so they never move as one block.

   Both rules need !important because the export's keyframes are declared in a
   <style> inside the SVG, which sits later in document order than this sheet. The
   float wins over the blanket `none` on specificity (an attribute selector and
   three type selectors against one class and two types).

   The float uses the `translate` property, not `transform`: each slab carries its
   placement in a transform="translate(x y)" attribute, and `transform` would
   REPLACE that and fling the slab to the origin, whereas `translate` composes with
   it. -10 is in SVG user units against a 262-unit viewBox that already carries 14
   units of headroom at the top, so the travel never clips. */
.rp-deploy__iso svg * { animation: none !important; }
@keyframes rp-slab-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -10px; }
}
.rp-deploy__iso svg > g > g[id] {
	animation: rp-slab-float 6s ease-in-out infinite !important;
}
.rp-deploy__iso #Frame_2147240916 { animation-delay: -2s !important; }
.rp-deploy__iso #Frame_2147238812 { animation-delay: -4s !important; }
@media (prefers-reduced-motion: reduce) {
	.rp-deploy__iso svg > g > g[id] { animation: none !important; }
}
.rp-deploy__handle {
	position: absolute;
	width: 16px;
	height: 16px;
	background: #e0e0e0;
	border: 2px solid #c7c7c7;
	border-radius: 4px;
	z-index: 2;
}
.rp-deploy__handle--tl { left: -9px; top: -9px; }
.rp-deploy__handle--tr { right: -9px; top: -9px; }
.rp-deploy__handle--bl { left: -9px; bottom: -9px; }
.rp-deploy__handle--br { right: -9px; bottom: -9px; }
.rp-deploy__feats {
	/* 771px is the Figma width, but the panel is narrower than that until ~1670px
	   viewport, so the fixed value pushed the page out (+228px at 1440). min()
	   keeps the Figma size where it fits and scales below it — no breakpoint. */
	width: 771px;
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 24px 10px;
}
.rp-deploy__feat { display: flex; flex-direction: column; gap: 16px; }
/* Dimmed until scroll picks it out. Only the copy carries the highlight — the
   artwork beside it runs its own animation and never reacts. */
.rp-deploy__feat-title {
	font-size: 32px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.64px;
	color: rgba(14, 14, 14, 0.4);
	transition: color 0.35s ease;
}
.rp-deploy__feat-desc {
	margin: 0;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.48px;
	color: rgba(14, 14, 14, 0.6);
	transition: color 0.35s ease;
}
/* A feature takes this as its own top crosses the middle of the viewport. */
.rp-deploy__feat.is-active .rp-deploy__feat-title,
.rp-deploy__feat.is-active .rp-deploy__feat-desc {
	color: #1d403c;
}
@media (prefers-reduced-motion: reduce) {
	.rp-deploy__feat-title,
	.rp-deploy__feat-desc { transition: none; }
}

/* ==========================================================================
   6. REWARDS PLUS VS LEGACY  (Figma 13:11640, light table)
   ========================================================================== */
.rp-vs {
	background: #f6f6f6;
	/* No trailing padding: the next section already opens with 140px plus
	   its dotted band's 64px margin, which is the whole gap. Doubling up put
	   344px between them. */
	padding: 140px 0 0;
}
.rp-vs .rp-head { padding: 80px 0; }
.rp-vs__table {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	max-width: min(1600px, 100%);
	margin: 56px auto 0;
}
.rp-vs__row {
	display: flex;
	/* 160px wherever the viewport can afford it (>= 1600px), scaled down below. */
	gap: min(160px, 10vw);
	align-items: center;
}
.rp-vs__row--head { background: rgba(42, 217, 196, 0.2); }
.rp-vs__row--data {
	border-bottom: 1px solid #c7c7c7;
	align-items: flex-end;
}
.rp-vs__row--data:last-child { border-bottom: none; }
.rp-vs__cell {
	display: flex;
	align-items: center;
	min-height: 89px;
}
/* The row is 410 + 160 gap + 420 + 160 gap + 420 = 1570px of content, which the
   table only has room for at roughly a 1920px viewport. This was gated on a
   `max-width: 1799px` breakpoint, which was 120px optimistic — at exactly 1800px
   the fixed cells still ran 60px past the right rail. Shrinkable bases hold the
   Figma widths wherever they fit and give way smoothly where they don't, so
   there is no breakpoint left to get wrong. */
.rp-vs__cell--cap { flex: 0 1 410px; min-width: 0; padding: 8px 24px; }
.rp-vs__cell--legacy,
.rp-vs__cell--rp { flex: 0 1 420px; min-width: 0; padding: 8px; }
.rp-vs__cap {
	margin: 0;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.48px;
	text-transform: uppercase;
	color: #0e0e0e;
}
.rp-vs__head-col {
	margin: 0;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.64px;
	text-transform: uppercase;
	color: #0e0e0e;
}
.rp-vs__legacy {
	margin: 0;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	/* 0.5 blended to #828282 on the table's #f6f6f6 — 3.55:1, under the 4.5:1
	   WCAG AA minimum. 0.6 lands on ~#6d6d6d for 4.8:1. */
	color: rgba(14, 14, 14, 0.6);
}
.rp-vs__rp {
	margin: 0;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	color: #1d403c;
}

/* ==========================================================================
   7. FAQ ACCORDION  (Figma 13:11707, light)
   ========================================================================== */
.rp-faq {
	background: #f6f6f6;
	padding: 140px 0;
}
.rp-faq .rp-head { padding: 80px 0; }
.rp-faq__card {
	width: 100%;
	max-width: min(1234px, 100%);
	margin: 56px auto 0;
	border: 1px solid #c7c7c7;
	padding: 0 40px;
}
.rp-faq__item { border-bottom: 1px solid #c7c7c7; }
.rp-faq__item:last-child { border-bottom: none; }
.rp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 40px 0;
	cursor: pointer;
	list-style: none;
}
.rp-faq__q::-webkit-details-marker { display: none; }
.rp-faq__q-text {
	font-size: 20px;
	font-weight: 400;
	line-height: 26px;
	color: #0e0e0e;
}
.rp-faq__chev {
	flex: none;
	width: 24px;
	height: 24px;
	color: #0e0e0e;
	transition: transform 0.2s ease;
}
.rp-faq__item[open] .rp-faq__chev { transform: scaleY(-1); }
/* Native <details> snaps open. ::details-content is the wrapper the browser puts
   around the panel, so it can be animated: interpolate-size lets `auto` take part
   in the transition (otherwise there is no end value to animate to), and
   content-visibility has to transition with allow-discrete or the panel would pop
   in fully on frame one and only its height would move. Browsers without
   ::details-content just open instantly, exactly as before. */
.rp-faq__item { interpolate-size: allow-keywords; }
.rp-faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
}
.rp-faq__item[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
	.rp-faq__item::details-content { transition: none; }
}
.rp-faq__a {
	margin: 0;
	padding: 0 0 40px;
	font-size: 18px;
	font-weight: 400;
	line-height: 26px;
	color: rgba(14, 14, 14, 0.6);
}

/* ==========================================================================
   8. CTA BANNER  (Figma 13:11751)
   ========================================================================== */
.rp-cta {
	background: #0e0e0e;
	padding: 140px 0;
}
.rp-cta__banner {
	position: relative;
	width: 100%;
	max-width: min(1600px, 100%);
	margin: 0 auto;
	min-height: 520px;
	border-radius: 32px;
	overflow: hidden;
	background: #0a1614 url("../img/rp-v2/cta-bg.webp") center / cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px;
}
.rp-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	max-width: min(1123px, 100%);
	text-align: center;
}
.rp-cta__copy { display: flex; flex-direction: column; gap: 12px; }
.rp-cta__title {
	margin: 0;
	font-size: 59px;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
}
.rp-cta__title em { font-style: normal; color: #2ad9c4; }
.rp-cta__sub {
	margin: 0;
	font-size: 27px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
}
.rp-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 2px;
	background: #fff;
	color: #0a0a0a;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.16px;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.rp-cta__btn:hover { opacity: 0.9; }

/* ==========================================================================
   3. ORCHESTRATE EVERY LOYALTY STATE  (Figma 13:10979)
   ========================================================================== */
.rp-orch {
	position: relative;
	background: #0e0e0e;
	overflow: hidden;
	padding-bottom: 280px;
}
/* Same treatment as .oiq-steps / .en-how / .cp-stack: the arc sits behind
   everything and every other direct child is lifted above it. Sizing comes
   from the shared rules in home-v2.css — no per-page cap. */
.rp-orch > * { position: relative; z-index: 1; }
.rp-orch .hv-section-glow { position: absolute; z-index: 0; }
/* Desktop inherits the shared 760px arc, same as .oiq-steps.
   Mobile can't: this section's bullet list runs to within 56px of the bottom,
   so the natural 405px arc sits directly over the last two bullets (1.0:1
   contrast — invisible). Lowering its opacity doesn't rescue it either (3.7:1
   even at 0.28). Instead the arc gets its own 200px band at the section foot —
   large enough to read as a proper glow, clear of the copy at 6.2:1. */
@media (max-width: 900px) {
	.rp-orch .hv-section-glow--mobile { height: 200px; }
}
.rp-orch__tabs {
	display: flex;
	max-width: min(1600px, 100%);
	margin: 0 auto;
	/* Figma 13:10991 draws this as a segmented control: a 1px frame around the
	   whole strip with a matching divider between the cells. Only the bottom
	   rule was here, so the outline and both dividers were missing. */
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.rp-orch__tab {
	flex: 1;
	padding: 24px 32px;
	background: none;
	border: none;
	border-right: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 2px solid transparent;
	/* the active underline sits on the strip's own bottom edge */
	margin-bottom: -1px;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.48px;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.rp-orch__tab:last-child { border-right: 0; }
.rp-orch__tab:hover { color: rgba(255, 255, 255, 0.85); }
.rp-orch__tab.is-active {
	color: #2ad9c4;
	border-bottom-color: #2ad9c4;
}
.rp-orch__panel { display: none; }
.rp-orch__panel.is-active {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 64px;
	max-width: min(1600px, 100%);
	margin: 0 auto;
	padding-top: 64px;
}
.rp-orch__text {
	/* Figma widths, but shrinkable (TQ-3131). With `flex: none` the two columns
	   held 716 + 64 + 760 = 1540px whatever the container gave them, so anywhere
	   between 1401px and ~1885px — a 14" laptop at 75% zoom — the visual pushed
	   straight through the right rail. Shrink is weighted by these bases, so the
	   Figma proportion is kept as the pair narrows. */
	flex: 0 1 716px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.rp-orch__subeye {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.4px;
	text-transform: uppercase;
	color: #2ad9c4;
}
.rp-orch__lead {
	margin: 0;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.48px;
	color: #fff;
}
.rp-orch__items {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.rp-orch__item { display: flex; flex-direction: column; gap: 8px; }
.rp-orch__item-h { display: flex; align-items: center; gap: 12px; }
.rp-orch__dot {
	width: 8px;
	height: 8px;
	border-radius: 1px;
	background: #2ad9c4;
	flex: none;
}
.rp-orch__item-title {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.48px;
	color: #fff;
}
.rp-orch__item-desc {
	margin: 0;
	padding-left: 20px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.32px;
	color: rgba(255, 255, 255, 0.6);
}
.rp-orch__visual {
	flex: 0 1 760px;
	min-width: 0;
	/* The three tab animations are transparent — their only full-size rect is a
	   clipPath mask — so they were floating on the flat section colour. This is
	   the panel backdrop from Figma (Frame 2147238941): same 760x545 box and the
	   same 32px radius, so it registers exactly behind whichever tab is open.
	   Sized 100% 100% rather than cover because the container takes its aspect
	   from the image inside it, so the two can never drift apart. */
	background: url("../img/rp-v2/s3-panel-bg.svg") center / 100% 100% no-repeat;
}
.rp-orch__visual img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   RESPONSIVE  (mobile ref: Figma 13:11905)
   ========================================================================== */
.rp-loyalty__diagram--mobile { display: none; }

@media (max-width: 1400px) {
	/* the flex bases above already hold the Figma ratio at every width */
	.rp-orch__text { flex: 1 1 48%; }
	.rp-orch__visual { flex: 1 1 46%; }
	.rp-deploy__visual { width: 46%; height: auto; aspect-ratio: 757 / 646; }
	.rp-deploy__feats { width: 54%; }
}

@media (max-width: 900px) {
	.hv-shell { padding-inline: 24px; }

	/* section rhythm */
	.rp-hero { padding: 56px 0; }
	.rp-orch { padding-bottom: 200px; }
	.rp-complex, .rp-deploy, .rp-vs, .rp-faq, .rp-cta { padding: 56px 0; }
	.rp-head { padding: 40px 0 28px; }
	.rp-complex .rp-head, .rp-deploy .rp-head, .rp-vs .rp-head, .rp-faq .rp-head { padding: 40px 0 28px; }
	.rp-loyalty__head { padding: 48px 0; }

	/* shared type down-scale */
	.rp-head__title, .rp-loyalty__title { font-size: 26px; letter-spacing: -0.5px; }
	.rp-head__sub, .rp-loyalty__sub { font-size: 17px; letter-spacing: -0.3px; }

	/* 1. hero — copy on top, visual below (matches Figma mobile) */
	.rp-hero__inner { flex-direction: column; align-items: stretch; gap: 36px; }
	.rp-hero__copy { flex: 1 1 100%; width: 100%; gap: 28px; }
	.rp-hero__title { font-size: 36px; letter-spacing: -0.72px; }
	.rp-hero__lede { font-size: 18px; letter-spacing: -0.36px; }
	.rp-hero__visual { flex: 1 1 100%; height: auto; }
	.rp-hero__visual img { height: auto; }

	/* 2. loyalty — swap to mobile diagram */
	.rp-loyalty__diagram--desktop { display: none; }
	/* Centred between the two hairlines it sits between: 84px of clear space above
	   the artwork and the same below — 48px here plus the 36px .rp-orch already
	   holds above its own band. It used to be 8px above and 84px below, which read
	   as the diagram being stuck to the loyalty copy. */
	.rp-loyalty__diagram--mobile { display: block; padding: 84px 0 48px; }

	/* 3. orchestrate — three equal tabs fit the width; visual above the text */
	.rp-orch__tab { flex: 1 1 0; padding: 14px 8px; font-size: 15px; line-height: 1.3; white-space: normal; text-align: center; }
	.rp-orch__panel.is-active { flex-direction: column-reverse; gap: 32px; padding-top: 40px; }
	.rp-orch__text { flex: 1 1 100%; width: 100%; }
	.rp-orch__visual { flex: 1 1 100%; width: 100%; }
	.rp-orch__lead { font-size: 18px; }
	.rp-orch__item-title { font-size: 18px; }

	/* 4. complex diagram — horizontal scroll (keeps it readable) */
	.rp-complex__diagram { margin-top: 40px; }

	/* 5. deploy — stack */
	.rp-deploy__row { flex-direction: column; gap: 28px; }
	.rp-deploy__visual { width: 100%; height: auto; aspect-ratio: auto; border: 0; overflow: visible; background: none; padding: 0; }
	.rp-deploy__visual img.rp-deploy__vis--desktop { display: none; }
	.rp-deploy__visual img.rp-deploy__vis--mobile { display: block; width: 100%; height: auto; object-fit: contain; }
	.rp-deploy__handle { display: none; }
	.rp-deploy__feats { width: 100%; padding: 0; gap: 28px; }
	.rp-deploy__feat-title { font-size: 22px; }
	.rp-deploy__feat-desc { font-size: 16px; }
	/* No scroll-driven highlight on a phone: a short screen parks two of the three
	   features in their dimmed state, which reads as greyed-out copy rather than as
	   a highlight, so every feature stays lit. The artwork animates regardless. */
	.rp-deploy__feat-title,
	.rp-deploy__feat-desc { color: #1d403c; }

	/* 6. vs table — compress to 3 fluid columns */
	.rp-vs__row { gap: 12px; }
	.rp-vs__cell--cap, .rp-vs__cell--legacy, .rp-vs__cell--rp { width: auto; flex: 1 1 0; padding: 10px 6px; min-height: 64px; }
	.rp-vs__cap { font-size: 13px; letter-spacing: 0; }
	/* Kept at a readable size even though "LEGACY PLATFORMS" then wraps: holding it
	   on one line needs ~9.8x the font size in column width, which at 393px caps
	   the heading around 10px — smaller than the 14px data text below it. */
	.rp-vs__head-col { font-size: 15px; letter-spacing: 0; }
	.rp-vs__legacy, .rp-vs__rp { font-size: 14px; }

	/* 7. faq */
	.rp-faq__card { padding: 0 20px; }
	.rp-faq__q { padding: 24px 0; gap: 16px; }
	.rp-faq__q-text { font-size: 16px; }
	.rp-faq__a { font-size: 15px; padding-bottom: 28px; }

	/* 8. cta */
/* cover, not `100% 100%`: the mobile artwork is portrait (1059x1479) and the
	   panel is landscape, so stretching squashed it AND pulled the artwork's own
	   baked black corners (48px radius, filled black rather than transparent)
	   onto the panel corners — the black blocks reported at all four corners.
	   cover keeps the aspect and crops the baked corners out of frame. */
		.rp-cta__banner { min-height: 0; padding: 48px 24px; border-radius: 20px; background: #0a1614 url("../img/rp-v2/cta-bg-mobile.webp") center / cover no-repeat; }
	.rp-cta__title { font-size: 30px; line-height: 1.35; }
	.rp-cta__sub { font-size: 18px; }
}

@media (max-width: 480px) {
	.rp-hero__title { font-size: 30px; }
	.rp-head__title, .rp-loyalty__title { font-size: 22px; }
	.rp-cta__title { font-size: 24px; }
	.rp-vs__cap { font-size: 11px; }
	.rp-vs__legacy, .rp-vs__rp { font-size: 12px; }
	.rp-vs__head-col { font-size: 13px; }
}

/* ---- mobile overflow guards --------------------------------------------- */
@media (max-width: 900px) {
	.hv2 main { overflow-x: hidden; }
	.rp-hero__inner,
	.rp-orch__tabs,
	.rp-orch__panel.is-active,
	.rp-vs__table,
	.rp-faq__card { max-width: 100%; }
	.rp-hero__visual img { max-width: 100%; }
	/* dots pattern must not force width */
	.rp-loyalty__head, .rp-head { max-width: 100%; }
	/* The section above closes with the teal glow, and this band's top hairline
	   landed ~50px below it on bare background — a line floating between the glow
	   and the dots rather than framing anything. Only that edge goes, and only
	   here; every other band keeps both rules. */
	.rp-complex .rp-head--bordered { border-top: 0; }
}

/* =========================================================================
   FLUID DESKTOP BAND (901-1919)

   The page is drawn at 1920 and, before this block, every section kept its
   1920 type and rhythm the whole way down to 901px. So on a ~1075px window
   the illustration had shrunk (it is width-driven) while a 64px hero title
   and 140px section padding had not, and the two fell out of proportion.

   Each clamp is anchored on this file's OWN two values: the max is the 1920
   design value, so 1920 and above is byte-identical; the min is the existing
   <=900px value, so the 900/901 boundary stays continuous. The coefficient is
   always design/19.2vw, which resolves to exactly the design value at 1920 and
   scales proportionally below it.

   Body copy and small UI are deliberately NOT scaled. Scaling everything at
   one ratio (what a zoom/transform would do) drops 16px body text to ~9px
   here, which trades a proportion problem for a legibility one.

   .rp-orch's 280px bottom padding is excluded on purpose: it reserves the
   mobile arc-glow band and is load-bearing (see the note at .rp-orch).
   ========================================================================= */
@media (min-width: 901px) and (max-width: 1919px) {
	/* Hero — 48px top is already small, only the 120px foot scales. */
	.rp-hero { padding-block: 48px clamp(56px, 6.25vw, 120px); }
	.rp-hero__title { font-size: clamp(36px, 3.333vw, 64px); letter-spacing: -0.02em; }
	.rp-hero__lede { font-size: clamp(18px, 1.458vw, 28px); }
	.rp-hero__copy { gap: clamp(28px, 2.5vw, 48px); }

	/* Section rhythm (vertical only — these sections have no side padding). */
	.rp-deploy,
	.rp-vs { padding-block: clamp(56px, 7.292vw, 140px) 0; }
	.rp-faq,
	.rp-cta { padding-block: clamp(56px, 7.292vw, 140px); }

	/* Dotted section heads + their type. */
	.rp-loyalty__head { padding-block: clamp(48px, 4.167vw, 80px); }
	.rp-complex .rp-head,
	.rp-deploy .rp-head,
	.rp-vs .rp-head,
	.rp-faq .rp-head { padding-block: clamp(40px, 4.167vw, 80px); }
	.rp-head__title,
	.rp-loyalty__title { font-size: clamp(26px, 1.875vw, 36px); letter-spacing: -0.02em; }
	.rp-head__sub,
	.rp-loyalty__sub { font-size: clamp(17px, 1.25vw, 24px); }

	/* Orchestration tabs + panels. */
	.rp-orch__tab { font-size: clamp(17px, 1.25vw, 24px); }
	.rp-orch__panel.is-active { gap: clamp(32px, 3.333vw, 64px); }
	.rp-orch__lead,
	.rp-orch__item-title { font-size: clamp(18px, 1.25vw, 24px); }

	/* Deploy feature rows. */
	.rp-deploy__row { gap: clamp(24px, 2.083vw, 40px); }
	.rp-deploy__feat-title { font-size: clamp(22px, 1.667vw, 32px); letter-spacing: -0.02em; }
	.rp-deploy__feat-desc { font-size: clamp(16px, 1.25vw, 24px); }

	/* Comparison table — its mobile sizes are much smaller, so these ramp
	   over a wider range than the rest. */
	.rp-vs__head-col { font-size: clamp(15px, 1.667vw, 32px); letter-spacing: -0.02em; }
	.rp-vs__cap { font-size: clamp(13px, 1.25vw, 24px); }
	.rp-vs__legacy,
	.rp-vs__rp { font-size: clamp(14px, 1.25vw, 24px); }

	/* Closing CTA. */
	.rp-cta__title { font-size: clamp(30px, 3.073vw, 59px); }
	.rp-cta__sub { font-size: clamp(18px, 1.406vw, 27px); }
}