/* ===========================================================
   RewardRace — Our Values (rrVal)
   4-up grid of centered value cards with a soft-lavender icon
   tile, title, and short description. Color tokens mirror the
   "How It Works", "Pricing" and "Powerful Features" widgets so
   the About page reads as part of the same system.
   =========================================================== */

.rrVal {
	--rrvl-bg:              #FFFFFF;
	--rrvl-section-bg:      #FFFFFF;
	--rrvl-heading:         var(--rr-heading);
	--rrvl-text:            var(--rr-text);
	--rrvl-muted:           var(--rr-muted);
	--rrvl-subtle:          var(--rr-subtle);
	--rrvl-accent:          var(--rr-brand);
	--rrvl-accent-soft:     var(--rr-brand-soft);
	--rrvl-accent-tint:     var(--rr-brand-tint);

	--rrvl-card-bg:         #FFFFFF;
	--rrvl-card-border:     var(--rr-border);
	--rrvl-card-shadow:     0 1px 2px rgba(11, 10, 20, .04), 0 6px 18px rgba(11, 10, 20, .04);
	--rrvl-card-shadow-hover: 0 4px 14px rgba(87, 63, 211, .12), 0 12px 32px rgba(11, 10, 20, .08);

	--rrvl-icon-bg:         #EEEAFB;
	--rrvl-icon-color:      var(--rr-brand);

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

/* Dark-mode theming — mirrors hero/how-it-works/pricing dark tokens. */
.rrVal--dark,
html[data-theme="dark"] .rrVal--auto {
	--rrvl-bg:              #0A0912;
	--rrvl-section-bg:      #0A0912;

	--rrvl-card-bg:         #14122A;
	--rrvl-card-border:     rgba(255, 255, 255, .08);
	--rrvl-card-shadow:     0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
	--rrvl-card-shadow-hover: 0 6px 22px rgba(139, 115, 255, .22), 0 18px 38px rgba(0, 0, 0, .45);

	--rrvl-accent:          #8B73FF;
	--rrvl-icon-bg:         rgba(139, 115, 255, .16);
	--rrvl-icon-color:      #B8A6FF;
}

/* ===========================================================
   Layout
   =========================================================== */
.rrVal__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
   =========================================================== */
.rrVal__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;
}

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

.rrVal .rrVal__title {
	font-size: var(--rr-fs-h2);
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: var(--rr-lh-snug);
	margin: 0;
	color: var(--rrvl-heading);
	text-wrap: balance;
}

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

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

/* ===========================================================
   Value card — centered icon, title, description
   =========================================================== */
.rrVal__card {
	flex: 1;
	min-width: 0;
	background: var(--rrvl-card-bg);
	border: 1px solid var(--rrvl-card-border);
	border-radius: var(--rr-radius-xl);
	padding: clamp(1.5rem, 2.2vw, 2rem) clamp(1.25rem, 1.8vw, 1.75rem);
	box-shadow: var(--rrvl-card-shadow);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	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);
}
.rrVal__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--rrvl-card-shadow-hover);
	border-color: color-mix(in srgb, var(--rrvl-accent) 24%, var(--rrvl-card-border));
}

/* ----- Icon tile ----- */
.rrVal__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--rr-radius-md);
	background: var(--rrvl-icon-bg);
	color: var(--rrvl-icon-color);
	flex-shrink: 0;
	margin-bottom: var(--rr-space-2);
	transition: transform var(--rr-dur-base) var(--rr-ease-spring);
}
.rrVal__icon svg {
	width: 28px;
	height: 28px;
	display: block;
}
.rrVal__card:hover .rrVal__icon {
	transform: scale(1.06) rotate(-3deg);
}

/* ----- Body ----- */
.rrVal .rrVal__cardTitle {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
	margin: 0;
	color: var(--rrvl-heading);
}

.rrVal .rrVal__cardDesc {
	font-size: .9375rem;
	line-height: var(--rr-lh-relaxed);
	margin: 0;
	color: var(--rrvl-muted);
	font-weight: 400;
	max-width: 220px;
	text-wrap: balance;
}

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

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

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

/* Phone — single column */
@media (max-width: 520px) {
	.rrVal__grid {
		grid-template-columns: 1fr;
	}
	.rrVal__card { padding: 1.25rem; }
	.rrVal .rrVal__cardDesc { max-width: none; }
}

/* Below 360 — tighten icon tile */
@media (max-width: 360px) {
	.rrVal__icon { width: 50px; height: 50px; }
	.rrVal__icon svg { width: 24px; height: 24px; }
}

/* Reduced-motion — no hover lift */
@media (prefers-reduced-motion: reduce) {
	.rrVal__card:hover { transform: none; }
	.rrVal__card:hover .rrVal__icon { transform: none; }
}