/* ===========================================================
   RewardRace — Why We Built RewardRace (rrWhy)
   Two-part About-page section:
     1. Centered head (purple eyebrow + headline) above a 3-up
        row of "reason" rows — each with a circular check icon,
        title and short description (no individual card surfaces).
     2. Inset soft-lavender team panel — left rail (people icon +
        eyebrow + title + body), right rail (4 trait columns).
   Color tokens mirror the "How It Works", "Pricing", "Proven
   Results", "Our Values" and "About Us" widgets so the About
   page reads as part of the same system.
   =========================================================== */

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

	/* Reason row — bare brand-purple check glyph (no tile/background),
	   sitting flush beside the title like the reference. */
	--rrwhy-reason-icon-color: var(--rr-brand);

	/* Team panel — lavender wash that matches the "Proven Results"
	   widget surface exactly (--rrprov-bg-color), hairline brand-tinted
	   border. Stays lighter than the icon tiles so the soft-lavender
	   tiles read clearly against it. */
	--rrwhy-panel-bg:        #FAF8FF;
	--rrwhy-panel-border:    rgba(87, 63, 211, .10);
	--rrwhy-panel-shadow:
		0 1px 2px rgba(11, 10, 20, .03),
		0 8px 24px rgba(87, 63, 211, .04);

	/* Icon tiles — flat soft-lavender fill (no white surface / shadow),
	   the team tile circular and the trait tiles rounded squares. */
	--rrwhy-team-icon-bg:    var(--rr-brand-soft);
	--rrwhy-team-icon-color: var(--rr-brand);

	--rrwhy-trait-icon-bg:   var(--rr-brand-soft);
	--rrwhy-trait-icon-color: var(--rr-brand);

	--rrwhy-reason-divider:  var(--rr-divider);

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

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

	--rrwhy-accent:          #8B73FF;
	--rrwhy-reason-icon-color: #B8A6FF;

	--rrwhy-panel-bg:        #0F0C22;
	--rrwhy-panel-border:    rgba(255, 255, 255, .08);
	--rrwhy-panel-shadow:
		0 1px 2px rgba(0, 0, 0, .4),
		0 8px 24px rgba(0, 0, 0, .35);

	--rrwhy-team-icon-bg:    rgba(139, 115, 255, .18);
	--rrwhy-team-icon-color: #B8A6FF;

	--rrwhy-trait-icon-bg:   rgba(139, 115, 255, .18);
	--rrwhy-trait-icon-color: #B8A6FF;

	--rrwhy-reason-divider:  rgba(255, 255, 255, .10);
}

/* ===========================================================
   Layout
   =========================================================== */
.rrWhy__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
   =========================================================== */
.rrWhy__head {
	margin: 0 auto var(--rr-space-10);
	max-width: var(--rr-head-max-width);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

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

/* Heading — sized to the reference: noticeably smaller than the
   system-wide --rr-fs-h2 hero scale, since this is a sub-section
   headline rather than a top-level section title. */
.rrWhy .rrWhy__title {
	font-size: clamp(1.625rem, 1rem + 1.4vw, 2rem);
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: var(--rr-lh-snug);
	margin: 0;
	color: var(--rrwhy-heading);
	text-wrap: balance;
}

/* ===========================================================
   Reasons row — 3-up grid of icon + title + description
   =========================================================== */
.rrWhy__reasons {
	/* Equal horizontal inset applied to every reason column. The
	   hairline dividers sit ON the column boundaries (gap: 0), so this
	   inset is the breathing room between a divider and its neighbours'
	   content — identical on both sides, so each rule is optically
	   centred between the two cards rather than hugging the next icon. */
	--rrwhy-reason-pad: clamp(1.25rem, 2.2vw, 1.75rem);

	list-style: none;
	margin: 0 auto var(--rr-space-12);
	padding: 0;
	max-width: 1160px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	/* Equal-height columns so the hairline dividers all match. */
	align-items: stretch;
}

.rrWhy__reason {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--rr-space-4);
	min-width: 0;
	/* Symmetric inset: content clears the column-boundary dividers by
	   the same amount on every side, keeping each card's columns equal
	   width and every divider visually centred. */
	padding-inline: var(--rrwhy-reason-pad);
}

/* Faint hairline divider between reason columns — matches the subtle
   vertical rules in the reference. Sits on the shared column boundary
   (horizontally centred between the equally-inset cards) and spans the
   full equal-height row, so every divider is identical and aligned. */
.rrWhy__reason + .rrWhy__reason::before {
	content: "";
	position: absolute;
	left: -0.5px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--rrwhy-reason-divider);
}

.rrWhy__reasonIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--rrwhy-reason-icon-color);
	flex-shrink: 0;
	/* Nudge down a touch so the glyph centres against the title line. */
	margin-top: 1px;
	transition: transform var(--rr-dur-base) var(--rr-ease-spring);
}
.rrWhy__reasonIcon svg { width: 30px; height: 30px; display: block; }
.rrWhy__reason:hover .rrWhy__reasonIcon {
	transform: scale(1.06);
}

.rrWhy__reasonBody {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rrWhy .rrWhy__reasonTitle {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
	margin: 0;
	color: var(--rrwhy-heading);
}

.rrWhy .rrWhy__reasonDesc {
	font-size: .9375rem;
	line-height: var(--rr-lh-relaxed);
	margin: 0;
	color: var(--rrwhy-muted);
	font-weight: 400;
	/* Fill the column width so each reason's content block spans the
	   full column — keeps the gutter dividers visually centred. */
	max-width: none;
}

/* ===========================================================
   Team panel — left rail (team copy) + right rail (traits)
   =========================================================== */
.rrWhy__panel {
	max-width: 1180px;
	margin: 0 auto;
	background: var(--rrwhy-panel-bg);
	border: 1px solid var(--rrwhy-panel-border);
	border-radius: var(--rr-radius-2xl);
	box-shadow: var(--rrwhy-panel-shadow);
	padding: clamp(1.5rem, 2.4vw, 2rem) clamp(1.5rem, 2.6vw, 2.25rem);
	display: grid;
	/* Left rail (team) ~ 1fr, right rail (traits) ~ 1.7fr — matches the
	   reference: a compact left column, the 4 trait columns given the
	   bulk of the width so each trait's copy stays on two lines. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
	gap: clamp(1.5rem, 3vw, 2.25rem);
	align-items: center;
	transition:
		transform var(--rr-dur-base) var(--rr-ease-out),
		box-shadow var(--rr-dur-base) var(--rr-ease-out);
}

/* ----- Left: Team copy ----- */
.rrWhy__team {
	display: flex;
	flex-direction: column;
	gap: var(--rr-space-3);
	max-width: 340px;
}

.rrWhy__teamIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	/* Circular tile — matches the reference's round team badge. */
	border-radius: 50%;
	background: var(--rrwhy-team-icon-bg);
	color: var(--rrwhy-team-icon-color);
	flex-shrink: 0;
	margin-bottom: var(--rr-space-2);
	transition: transform var(--rr-dur-base) var(--rr-ease-spring);
}
.rrWhy__teamIcon svg { width: 28px; height: 28px; display: block; }
.rrWhy__panel:hover .rrWhy__teamIcon {
	transform: scale(1.04) rotate(-3deg);
}

.rrWhy .rrWhy__teamEyebrow {
	display: inline-block;
	font-size: var(--rr-fs-2xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rrwhy-accent);
}

.rrWhy .rrWhy__teamTitle {
	font-size: clamp(1.5rem, 1rem + 1vw, 1.875rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
	margin: 0;
	color: var(--rrwhy-heading);
	/* Honour explicit line breaks in the Team Title control, and cap
	   the width so the headline still wraps to "A passionate team /
	   on a mission" even when the stored value has no line break. */
	white-space: pre-line;
	max-width: 9.5em;
}

.rrWhy .rrWhy__teamBody {
	margin: var(--rr-space-1) 0 0;
	color: var(--rrwhy-muted);
	font-size: var(--rr-fs-sm);
	line-height: var(--rr-lh-relaxed);
	font-weight: 400;
	/* Justified body copy — even line edges, mirroring the reference. */
	text-align: justify;
}

/* ----- Right: Traits grid ----- */
.rrWhy__traits {
	/* Gap exposed as a custom property so the hairline column dividers
	   can be centred precisely inside the gutter. */
	--rrwhy-trait-gap: clamp(1rem, 1.6vw, 1.5rem);

	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--rrwhy-trait-gap);
	/* Equal-height columns so the hairline dividers all match. */
	align-items: stretch;
}

.rrWhy__trait {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--rr-space-2);
	min-width: 0;
}

/* Faint hairline divider between trait columns — mirrors the subtle
   vertical rules in the reference. Trait content is centre-aligned, so
   a gutter-centred rule sits evenly between adjacent traits, and it
   spans the full equal-height row. */
.rrWhy__trait + .rrWhy__trait::before {
	content: "";
	position: absolute;
	left: calc(var(--rrwhy-trait-gap) / -2 - 0.5px);
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--rrwhy-reason-divider);
}

.rrWhy__traitIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--rr-radius-lg);
	background: var(--rrwhy-trait-icon-bg);
	color: var(--rrwhy-trait-icon-color);
	flex-shrink: 0;
	margin-bottom: var(--rr-space-1);
	transition: transform var(--rr-dur-base) var(--rr-ease-spring);
}
.rrWhy__traitIcon svg { width: 26px; height: 26px; display: block; }
.rrWhy__trait:hover .rrWhy__traitIcon {
	transform: scale(1.06) rotate(-3deg);
}

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

.rrWhy .rrWhy__traitDesc {
	font-size: .875rem;
	line-height: var(--rr-lh-relaxed);
	margin: 0;
	color: var(--rrwhy-muted);
	font-weight: 400;
	/* Natural wrap so each trait's copy settles onto two lines. */
	max-width: 180px;
}

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

/* Tablet — 2-up reasons + 2x2 traits, but team panel stays side-by-side */
@media (max-width: 1024px) {
	.rrWhy__reasons {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.rrWhy__traits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		--rrwhy-trait-gap: var(--rr-space-5);
	}
	/* 2-up traits — column dividers no longer line up cleanly. */
	.rrWhy__trait + .rrWhy__trait::before { display: none; }
	.rrWhy__panel {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	}
}

/* Small tablet — stack panel vertically, reasons stay 3-up if room */
@media (max-width: 860px) {
	.rrWhy__panel {
		grid-template-columns: 1fr;
		gap: clamp(1.5rem, 4vw, 2.25rem);
		padding: clamp(1.5rem, 4vw, 2.25rem);
		border-radius: var(--rr-radius-xl);
	}
	.rrWhy__team { max-width: none; }
	.rrWhy__traits {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		--rrwhy-trait-gap: var(--rr-space-4);
	}
	/* Back to 4-up — restore the column dividers. */
	.rrWhy__trait + .rrWhy__trait::before { display: block; }
}

/* Phone — single column reasons, 2-up traits */
@media (max-width: 640px) {
	.rrWhy__wrap {
		padding: clamp(2.5rem, 8vw, 4rem) clamp(1rem, 5vw, 1.5rem);
	}
	.rrWhy__head { margin-bottom: var(--rr-space-8); }

	.rrWhy .rrWhy__title {
		font-size: clamp(1.625rem, 6vw, 2rem);
	}

	.rrWhy__reasons {
		grid-template-columns: 1fr;
		gap: var(--rr-space-6);
		margin-bottom: var(--rr-space-8);
	}
	.rrWhy .rrWhy__reasonDesc { max-width: none; }
	/* Stacked layout — drop the column inset and the vertical rules. */
	.rrWhy__reason { padding-inline: 0; }
	.rrWhy__reason + .rrWhy__reason::before { display: none; }

	.rrWhy__traits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		--rrwhy-trait-gap: var(--rr-space-5);
	}
	/* 2-up traits — hide the column dividers again. */
	.rrWhy__trait + .rrWhy__trait::before { display: none; }
	.rrWhy .rrWhy__traitDesc { max-width: none; }
}

/* Below 380 — single-column traits too */
@media (max-width: 380px) {
	.rrWhy__traits {
		grid-template-columns: 1fr;
	}
	.rrWhy__traitIcon { width: 48px; height: 48px; }
	.rrWhy__traitIcon svg { width: 24px; height: 24px; }
}

/* Reduced-motion — no hover transforms */
@media (prefers-reduced-motion: reduce) {
	.rrWhy__reason:hover .rrWhy__reasonIcon,
	.rrWhy__panel:hover .rrWhy__teamIcon,
	.rrWhy__trait:hover .rrWhy__traitIcon {
		transform: none;
	}
}