/* ===========================================================
   RewardRace — FAQ Groups v2
   3-column grouped Q&A + purple gradient help panel.
   =========================================================== */

.rrFaqGrid {
	--rrfg-bg:        var(--rr-bg);
	--rrfg-text:      var(--rr-heading);
	--rrfg-body:      var(--rr-text);
	--rrfg-soft:      var(--rr-muted);
	--rrfg-border:    var(--rr-border);
	--rrfg-pill-bg:   transparent;
	--rrfg-card-bg:   var(--rr-bg);
	--rrfg-accent:    var(--rr-brand);

	background: var(--rrfg-bg);
	color: var(--rrfg-body);
	box-sizing: border-box;
	padding: var(--rr-section-y) 0;
}
.rrFaqGrid *, .rrFaqGrid *::before, .rrFaqGrid *::after { box-sizing: border-box; }

.rrFaqGrid--bg-white       { --rrfg-bg: var(--rr-bg); --rrfg-card-bg: var(--rr-surface); }
.rrFaqGrid--bg-cream       { --rrfg-bg: var(--rr-surface); --rrfg-card-bg: var(--rr-bg); }
.rrFaqGrid--bg-transparent { background: transparent; }

.rrFaqGrid__wrap {
	max-width: var(--rr-container);
	margin: 0 auto;
	padding: 0 var(--rr-section-x);
}

/* ----- Heading ----- */
.rrFaqGrid__head {
	text-align: center;
	margin: 0 auto var(--rr-head-mb);
	max-width: var(--rr-head-max-width);
}

.rrFaqGrid__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-2);
	padding: 7px 16px 7px 12px;
	background: var(--rrfg-pill-bg);
	border: 1px solid transparent;
	border-radius: var(--rr-radius-pill);
	font-size: var(--rr-fs-2xs);
	font-weight: 700;
	letter-spacing: var(--rr-tracking-wide);
	text-transform: uppercase;
	color: var(--rrfg-accent);
	margin-bottom: var(--rr-space-5);
}

.rrFaqGrid__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--rrfg-accent);
	display: inline-block;
	animation: rrPulse 2s var(--rr-ease-out) infinite;
}

.rrFaqGrid__title {
	font-size: var(--rr-fs-h1);
	font-weight: 800;
	letter-spacing: var(--rr-tracking-tight);
	line-height: var(--rr-lh-tight);
	margin: 0;
	color: var(--rrfg-text);
	text-wrap: balance;
}
.rrFaqGrid__titleLead { display: inline; color: inherit; }
.rrFaqGrid__titleAccent {
	display: inline;
	color: var(--rrfg-accent);
	font-weight: 800;
	margin-left: .12em;
}

/* ----- Columns card ----- */
.rrFaqGrid__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--rr-space-12);
	margin-bottom: var(--rr-space-10);
	background: var(--rrfg-card-bg);
	border: 1px solid var(--rrfg-border);
	border-radius: var(--rr-panel-radius);
	padding: var(--rr-space-10) var(--rr-space-10) var(--rr-space-8);
	box-shadow: var(--rr-shadow-md);
}

.rrFaqGrid__col { min-width: 0; }

.rrFaqGrid__colTitle {
	font-size: var(--rr-fs-h4);
	font-weight: 800;
	letter-spacing: var(--rr-tracking-snug);
	color: var(--rrfg-text);
	padding-bottom: var(--rr-space-4);
	margin-bottom: var(--rr-space-6);
	position: relative;
}
.rrFaqGrid__colTitle::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 40px;
	height: 3px;
	background: var(--rr-brand-gradient);
	border-radius: 2px;
	transition: width var(--rr-dur-base) var(--rr-ease-spring);
}
.rrFaqGrid__col:hover .rrFaqGrid__colTitle::after { width: 64px; }

.rrFaqGrid__items {
	display: flex;
	flex-direction: column;
	gap: var(--rr-space-6);
}
.rrFaqGrid__item { min-width: 0; }

.rrFaqGrid__q {
	font-size: var(--rr-fs-md);
	font-weight: 700;
	letter-spacing: var(--rr-tracking-snug);
	color: var(--rrfg-text);
	margin-bottom: var(--rr-space-2);
	line-height: var(--rr-lh-snug);
}
.rrFaqGrid__a {
	font-size: var(--rr-fs-sm);
	color: var(--rrfg-soft);
	line-height: var(--rr-lh-relaxed);
}

/* ----- Help panel (purple gradient) ----- */
.rrFaqGrid__help {
	background: var(--rr-brand-gradient);
	color: #FFFFFF;
	border-radius: var(--rr-panel-radius);
	padding: var(--rr-space-10);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rr-space-8);
	flex-wrap: wrap;
	position: relative;
	overflow: hidden;
	box-shadow: var(--rr-shadow-brand-md);
}
.rrFaqGrid__help::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 10% 0%, rgba(255,255,255,.22), transparent 45%),
		radial-gradient(circle at 90% 100%, rgba(0,0,0,.22), transparent 55%);
	pointer-events: none;
}
.rrFaqGrid__help > * { position: relative; z-index: 1; }

.rrFaqGrid__helpText { min-width: 0; }

.rrFaqGrid__helpTitle {
	font-size: var(--rr-fs-h3);
	font-weight: 800;
	letter-spacing: var(--rr-tracking-snug);
	color: #FFFFFF;
	margin-bottom: var(--rr-space-2);
	line-height: var(--rr-lh-snug);
}
.rrFaqGrid__helpSub {
	font-size: var(--rr-fs-md);
	color: rgba(255,255,255,.82);
	line-height: var(--rr-lh-normal);
}

.rrFaqGrid__helpActions {
	display: inline-flex;
	gap: var(--rr-space-3);
	flex-wrap: wrap;
}

.rrFaqGrid .rrFaqGrid__helpBtn,
.rrFaqGrid a.rrFaqGrid__helpBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rr-space-2);
	padding: 14px 24px;
	border-radius: var(--rr-radius-pill);
	text-decoration: none;
	font-size: var(--rr-fs-sm);
	font-weight: 700;
	letter-spacing: var(--rr-tracking-snug);
	white-space: nowrap;
	border: 1px solid transparent;
	transition: background-color var(--rr-dur-fast) var(--rr-ease-out),
	            color var(--rr-dur-fast) var(--rr-ease-out),
	            border-color var(--rr-dur-fast) var(--rr-ease-out),
	            transform var(--rr-dur-fast) var(--rr-ease-out);
	line-height: 1;
	cursor: pointer;
}

.rrFaqGrid .rrFaqGrid__helpBtn--outlined {
	background: transparent;
	color: #FFFFFF;
	border-color: rgba(255,255,255,.3);
}
.rrFaqGrid .rrFaqGrid__helpBtn--outlined:hover {
	border-color: rgba(255,255,255,.6);
	background: rgba(255,255,255,.08);
	transform: translateY(-1px);
}

.rrFaqGrid .rrFaqGrid__helpBtn--primary {
	background: #FFFFFF;
	color: var(--rrfg-accent);
}
.rrFaqGrid .rrFaqGrid__helpBtn--primary:hover {
	background: var(--rr-ink);
	color: #FFFFFF;
	transform: translateY(-1px);
	box-shadow: var(--rr-shadow-lg);
}

.rrFaqGrid__helpArrow { transition: transform var(--rr-dur-base) var(--rr-ease-out); }
.rrFaqGrid__helpBtn:hover .rrFaqGrid__helpArrow { transform: translateX(3px); }

@media (max-width: 1024px) {
	.rrFaqGrid__cols { gap: var(--rr-space-10); padding: var(--rr-space-8); }
}

@media (max-width: 880px) {
	.rrFaqGrid { padding: var(--rr-space-10) 0 var(--rr-space-12); }
	.rrFaqGrid__wrap { padding: 0 var(--rr-space-4); }
	.rrFaqGrid__head { margin-bottom: var(--rr-space-10); }

	.rrFaqGrid__cols {
		grid-template-columns: 1fr;
		gap: var(--rr-space-8);
		margin-bottom: var(--rr-space-8);
		padding: var(--rr-space-6);
	}

	.rrFaqGrid__help {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--rr-space-5);
		padding: var(--rr-space-6);
	}
	.rrFaqGrid__helpActions { width: 100%; }
}

@media (max-width: 480px) {
	.rrFaqGrid { padding: var(--rr-space-8) 0 var(--rr-space-10); }
	.rrFaqGrid__colTitle { font-size: var(--rr-fs-md); }
	.rrFaqGrid__q { font-size: var(--rr-fs-sm); }
	.rrFaqGrid__a { font-size: var(--rr-fs-sm); }
	.rrFaqGrid__helpTitle { font-size: var(--rr-fs-h4); }
	.rrFaqGrid__helpActions { flex-direction: column; width: 100%; }
	.rrFaqGrid .rrFaqGrid__helpBtn { width: 100%; padding: 13px 20px; }
}