/* ===========================================================
   RewardRace — Powerful Features (rrPow)
   Bento-style grid of feature cards. Pulls colour tokens from
   the shared "How It Works" palette: brand purple, soft
   lavender icon tints, hairline borders, white card surface.
   =========================================================== */

.rrPow {
	--rrpw-bg:              #FFFFFF;
	--rrpw-section-bg:      #FFFFFF;
	--rrpw-heading:         var(--rr-heading);
	--rrpw-text:            var(--rr-text);
	--rrpw-muted:           var(--rr-muted);
	--rrpw-subtle:          var(--rr-subtle);
	--rrpw-accent:          var(--rr-brand);
	--rrpw-accent-soft:     var(--rr-brand-soft);
	--rrpw-accent-tint:     var(--rr-brand-tint);
	--rrpw-card-bg:         #FFFFFF;
	--rrpw-card-border:     var(--rr-border);
	--rrpw-card-shadow:     0 1px 2px rgba(11, 10, 20, .04), 0 6px 18px rgba(11, 10, 20, .04);
	--rrpw-card-shadow-hover: 0 4px 14px rgba(87, 63, 211, .12), 0 12px 32px rgba(11, 10, 20, .08);
	--rrpw-icon-bg:         var(--rr-brand-gradient);
	--rrpw-icon-color:      #FFFFFF;

	position: relative;
	font-family: var(--rr-font-sans);
	color: var(--rrpw-text);
	background: var(--rrpw-section-bg);
	box-sizing: border-box;
	overflow: hidden;
}
.rrPow *, .rrPow *::before, .rrPow *::after { box-sizing: border-box; }

/* Dark-mode theming */
.rrPow--dark,
html[data-theme="dark"] .rrPow--auto {
	--rrpw-bg:              #0A0912;
	--rrpw-section-bg:      #0A0912;
	--rrpw-card-bg:         #14122A;
	--rrpw-card-border:     rgba(255, 255, 255, .08);
	--rrpw-card-shadow:     0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
	--rrpw-card-shadow-hover: 0 6px 22px rgba(139, 115, 255, .22), 0 18px 38px rgba(0, 0, 0, .45);
	--rrpw-accent:          #8B73FF;
	--rrpw-icon-bg:         linear-gradient(135deg, #8B73FF 0%, #A894FF 100%);
}

/* ===========================================================
   Decorative dot cluster (left edge only)
   A fine uniform halftone grid masked into an organic ellipse —
   gives the soft, designer-quality fade in the reference (dots
   stay perfectly round and evenly sized, density appears to
   "swell" thanks to the radial mask vignette).
   =========================================================== */
.rrPow__dots {
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(180px, 20vw, 340px);
	height: 100%;
	pointer-events: none;
	z-index: 0;
	display: block;

	/* Fine halftone — small uniform dots on a tight grid. */
	background-image: radial-gradient(
		circle at center,
		var(--rr-brand-light) 1px,
		transparent 1.4px
	);
	background-size: 12px 12px;
	background-position: 0 0;
	opacity: .55;

	/* Tight, defined cluster — sharper falloff than a soft
	   wash, but still organic. Slightly elongated vertically
	   so it reads as a designed accent next to the cards. */
	-webkit-mask-image: radial-gradient(
		ellipse 48% 56% at 44% 50%,
		#000 0%,
		rgba(0, 0, 0, .92) 28%,
		rgba(0, 0, 0, .5) 54%,
		rgba(0, 0, 0, .15) 76%,
		transparent 92%
	);
	mask-image: radial-gradient(
		ellipse 48% 56% at 44% 50%,
		#000 0%,
		rgba(0, 0, 0, .92) 28%,
		rgba(0, 0, 0, .5) 54%,
		rgba(0, 0, 0, .15) 76%,
		transparent 92%
	);
}

/* Hide the pattern on narrow viewports so it never crowds the
   stacked cards. */
@media (max-width: 720px) {
	.rrPow__dots { display: none; }
}

html[data-theme="dark"] .rrPow__dots {
	opacity: .3;
}

/* ===========================================================
   Layout
   =========================================================== */
.rrPow__wrap {
	max-width: var(--rr-container);
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 3vw, 2.5rem);
	position: relative;
	z-index: 1;
}

/* ===========================================================
   Heading block
   =========================================================== */
.rrPow__head {
	margin: 0 auto var(--rr-space-12);
	max-width: var(--rr-head-max-width);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.rrPow .rrPow__eyebrow {
	display: inline-flex;
	align-items: center;
	font-size: var(--rr-fs-2xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rrpw-subtle);
	margin-bottom: var(--rr-space-4);
}

.rrPow .rrPow__title {
	font-size: var(--rr-fs-h2);
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: var(--rr-lh-snug);
	margin: 0;
	color: var(--rrpw-heading);
	text-wrap: balance;
}
.rrPow__titleLead,
.rrPow__titleTail { color: inherit; }

.rrPow .rrPow__titleAccent {
	color: var(--rrpw-accent) !important;
	font-weight: 800;
	font-style: normal !important;
}

.rrPow .rrPow__subtitle {
	margin: var(--rr-space-4) 0 0;
	color: var(--rrpw-muted);
	font-size: var(--rr-fs-lg);
	line-height: var(--rr-lh-relaxed);
	font-weight: 400;
}

/* ===========================================================
   Grid of feature cards
   =========================================================== */
.rrPow__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1180px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.875rem, 1.4vw, 1.25rem);
	align-items: stretch;
}

.rrPow__item {
	display: flex;
	min-width: 0;
}

/* ===========================================================
   Feature card — icon left, text right
   =========================================================== */
.rrPow__card {
	flex: 1;
	min-width: 0;
	background: var(--rrpw-card-bg);
	border: 1px solid var(--rrpw-card-border);
	border-radius: var(--rr-radius-lg);
	padding: clamp(1rem, 1.4vw, 1.25rem);
	box-shadow: var(--rrpw-card-shadow);
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--rr-space-3);
	transition:
		transform var(--rr-dur-base) var(--rr-ease-out),
		box-shadow var(--rr-dur-base) var(--rr-ease-out),
		border-color var(--rr-dur-base) var(--rr-ease-out);
}
.rrPow__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--rrpw-card-shadow-hover);
	border-color: color-mix(in srgb, var(--rrpw-accent) 24%, var(--rrpw-card-border));
}

/* ----- Icon ----- */
.rrPow__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--rr-radius-md);
	background: var(--rrpw-icon-bg);
	color: var(--rrpw-icon-color);
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(87, 63, 211, .22);
	transition: transform var(--rr-dur-base) var(--rr-ease-spring);
}
.rrPow__icon svg {
	width: 22px;
	height: 22px;
	display: block;
}
.rrPow__card:hover .rrPow__icon {
	transform: scale(1.06) rotate(-3deg);
}

/* ----- Body ----- */
.rrPow__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rrPow .rrPow__cardTitle {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
	margin: 0;
	color: var(--rrpw-heading);
}

.rrPow .rrPow__cardDesc {
	font-size: .875rem;
	line-height: 1.5;
	margin: 0;
	color: var(--rrpw-muted);
	font-weight: 400;
}

/* ===========================================================
   CTA link
   =========================================================== */
.rrPow__ctaWrap {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	display: flex;
	justify-content: center;
}

.rrPow .rrPow__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--rrpw-accent);
	font-weight: 600;
	font-size: var(--rr-fs-md);
	text-decoration: none;
	letter-spacing: -.01em;
	padding: 6px 10px;
	border-radius: var(--rr-radius-pill);
	transition:
		color var(--rr-dur-fast) var(--rr-ease-out),
		gap var(--rr-dur-fast) var(--rr-ease-out),
		background-color var(--rr-dur-fast) var(--rr-ease-out);
}
.rrPow .rrPow__cta:hover {
	gap: 10px;
	background: var(--rr-brand-ghost);
}
.rrPow__ctaArrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--rr-dur-fast) var(--rr-ease-out);
}
.rrPow__cta:hover .rrPow__ctaArrow {
	transform: translateX(2px);
}

/* ===========================================================
   Responsive
   =========================================================== */

/* Tablet — 2 columns */
@media (max-width: 1024px) {
	.rrPow__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Below tablet — tighten padding */
@media (max-width: 720px) {
	.rrPow__wrap {
		padding: clamp(2.5rem, 8vw, 4rem) clamp(1rem, 5vw, 1.5rem);
	}
	.rrPow__head {
		margin-bottom: var(--rr-space-8);
	}
	.rrPow .rrPow__title {
		font-size: clamp(1.625rem, 5.5vw, 2.25rem);
	}
}

/* Phone — single column */
@media (max-width: 520px) {
	.rrPow__grid {
		grid-template-columns: 1fr;
	}
	.rrPow__card { padding: 1rem; }
}

/* Below 360 — tighten icon */
@media (max-width: 360px) {
	.rrPow__icon { width: 40px; height: 40px; }
	.rrPow__icon svg { width: 20px; height: 20px; }
}

/* Reduced-motion — no hover lift */
@media (prefers-reduced-motion: reduce) {
	.rrPow__card:hover { transform: none; }
	.rrPow__card:hover .rrPow__icon { transform: none; }
	.rrPow__cta:hover .rrPow__ctaArrow { transform: none; }
}