/* ===========================================================
   RewardRace — Section Heading
   Eyebrow chip + bold display title + lede.
   =========================================================== */

.rrSecHead {
	--rrsh-bg:       transparent;
	--rrsh-text:     var(--rr-heading);
	--rrsh-soft:     var(--rr-muted);
	--rrsh-border:   var(--rr-border);
	--rrsh-pill-bg:  var(--rr-surface);
	--rrsh-accent:   var(--rr-brand);

	background: var(--rrsh-bg);
	color: var(--rrsh-text);
	box-sizing: border-box;
	padding: var(--rr-section-y) var(--rr-section-x);
}
.rrSecHead *, .rrSecHead *::before, .rrSecHead *::after { box-sizing: border-box; }

.rrSecHead--bg-white       { --rrsh-bg: var(--rr-bg); --rrsh-pill-bg: var(--rr-surface); }
.rrSecHead--bg-cream       { --rrsh-bg: var(--rr-surface); --rrsh-pill-bg: var(--rr-bg); }
.rrSecHead--bg-transparent { background: transparent; }

.rrSecHead__wrap {
	max-width: var(--rr-container-narrow);
	margin: 0 auto;
}
.rrSecHead--center .rrSecHead__wrap { text-align: center; }
.rrSecHead--left   .rrSecHead__wrap { text-align: left; }
.rrSecHead--center .rrSecHead__desc { margin-left: auto; margin-right: auto; }

/* ----- Eyebrow pill ----- */
.rrSecHead__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-2);
	padding: 7px 16px 7px 12px;
	background: var(--rr-brand-tint);
	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(--rrsh-accent);
	margin-bottom: var(--rr-space-6);
}

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

@keyframes rrsh-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.3); opacity: .75; }
}

/* ----- Title ----- */
.rrSecHead__title {
	font-size: var(--rr-fs-display);
	font-weight: 800;
	letter-spacing: var(--rr-tracking-tight);
	line-height: var(--rr-lh-tight);
	margin: 0 0 var(--rr-space-5);
	color: var(--rrsh-text);
	text-wrap: balance;
}

.rrSecHead__titleLead,
.rrSecHead__titleAccent,
.rrSecHead__titleTail { color: inherit; }

.rrSecHead--accent-block .rrSecHead__titleLead,
.rrSecHead--accent-block .rrSecHead__titleAccent,
.rrSecHead--accent-block .rrSecHead__titleTail { display: block; }
.rrSecHead--accent-block .rrSecHead__titleAccent { margin-top: .05em; }
.rrSecHead--accent-block .rrSecHead__titleTail   { margin-top: .05em; }

.rrSecHead--accent-inline .rrSecHead__titleLead,
.rrSecHead--accent-inline .rrSecHead__titleAccent,
.rrSecHead--accent-inline .rrSecHead__titleTail { display: inline; }
.rrSecHead--accent-inline .rrSecHead__titleAccent { margin: 0 .12em; }
.rrSecHead--accent-inline .rrSecHead__titleTail   { margin-left: .12em; }

/* Accent word = purple + bold (no italic) */
.rrSecHead__titleAccent {
	color: var(--rrsh-accent);
	font-weight: 800;
}

.rrSecHead__desc {
	font-size: var(--rr-fs-lg);
	line-height: var(--rr-lh-relaxed);
	color: var(--rrsh-soft);
	margin: 0;
	max-width: 60ch;
	text-wrap: pretty;
}

@media (max-width: 768px) {
	.rrSecHead__eyebrow { margin-bottom: var(--rr-space-5); }
	.rrSecHead__desc    { font-size: var(--rr-fs-md); }
}

@media (max-width: 480px) {
	.rrSecHead__title { font-size: clamp(2rem, 10vw, 2.75rem); }
}