/* ===========================================================
   RewardRace — About Us (rrAbout)
   Centered head (eyebrow chip + 2-line title + paragraph), then
   a soft-tint inset panel: left rail = mission, right rail = 3
   icon/title/description rows divided by hairline rules.
   Color tokens mirror "How It Works" and "Pricing" so the page
   reads as part of the same system.
   =========================================================== */

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

	/* Inset mission panel — white surface with an evenly distributed
	   halo shadow. All stops use 0 0 offsets so the shadow radiates
	   the same amount on top / right / bottom / left. No border —
	   the shadow alone defines the edge. */
	--rrab-panel-bg:       #FFFFFF;
	--rrab-panel-border:   transparent;
	--rrab-panel-shadow:
		0 0 0 1px rgba(11, 10, 20, .03),
		0 0 14px rgba(11, 10, 20, .04),
		0 0 36px rgba(11, 10, 20, .05),
		0 0 72px rgba(11, 10, 20, .05);

	--rrab-divider:        rgba(11, 10, 20, .08);

	/* Pillar icon tile — soft lavender square with a brand-purple
	   glyph, matching the Hero brand chips. */
	--rrab-icon-bg:        #EEEAFB;
	--rrab-icon-color:     var(--rr-brand);

	/* Eyebrow chip — mirrors the Hero "#1 Rewards & Loyalty App
	   for Shopify" badge: white → soft lavender wash, hairline
	   purple-tinted border, faint shadow, yellow star icon. */
	--rrab-eyebrow-bg:     linear-gradient(135deg, rgba(255, 255, 255, .85) 0%, rgba(238, 234, 251, .85) 100%);
	--rrab-eyebrow-border: rgba(87, 63, 211, .15);
	--rrab-eyebrow-color:  #2D2A3D;
	--rrab-eyebrow-star:   #FFB300;
	--rrab-eyebrow-shadow: 0 1px 2px rgba(11, 10, 20, .04);

	position: relative;
	font-family: var(--rr-font-sans);
	color: var(--rrab-text);
	background: var(--rrab-section-bg);
	box-sizing: border-box;
	border-top: 0 !important;
	overflow: hidden;
}
.rrAbout *, .rrAbout *::before, .rrAbout *::after { box-sizing: border-box; }

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

	--rrab-panel-bg:       #14122A;
	--rrab-panel-border:   transparent;
	--rrab-panel-shadow:
		0 0 0 1px rgba(255, 255, 255, .04),
		0 0 14px rgba(0, 0, 0, .35),
		0 0 36px rgba(0, 0, 0, .35),
		0 0 72px rgba(0, 0, 0, .30);

	--rrab-divider:        rgba(255, 255, 255, .08);

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

	--rrab-eyebrow-bg:     linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(139, 115, 255, .14) 100%);
	--rrab-eyebrow-border: rgba(255, 255, 255, .12);
	--rrab-eyebrow-color:  #FFFFFF;
	--rrab-eyebrow-star:   #FFB300;
	--rrab-eyebrow-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ===========================================================
   Layout
   =========================================================== */
.rrAbout__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
   =========================================================== */
.rrAbout__head {
	margin: 0 auto var(--rr-space-12);
	max-width: 760px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Eyebrow chip — 1:1 with the Hero "#1 Rewards & Loyalty App for
   Shopify" badge: subtle white→lavender wash, hairline purple
   border, yellow star, no uppercase, no letter-spacing.
   Overrides the base.css editorial baseline because the About chip
   is not part of the system-wide eyebrow list. */
.rrAbout .rrAbout__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px 8px 14px;
	background: var(--rrab-eyebrow-bg);
	border: 1px solid var(--rrab-eyebrow-border);
	border-radius: var(--rr-radius-pill);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--rrab-eyebrow-color);
	margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
	box-shadow: var(--rrab-eyebrow-shadow);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	line-height: 1;
}

.rrAbout__eyebrowStar {
	display: inline-flex;
	width: 16px;
	height: 16px;
	align-items: center;
	justify-content: center;
	color: var(--rrab-eyebrow-star);
	flex-shrink: 0;
	line-height: 0;
}
.rrAbout__eyebrowStar svg { width: 16px; height: 16px; display: block; }

.rrAbout__eyebrowText {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
	line-height: 1;
}

.rrAbout .rrAbout__title {
	font-size: var(--rr-fs-h2);
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: var(--rr-lh-snug);
	margin: 0;
	color: var(--rrab-heading);
	text-wrap: balance;
}
.rrAbout__titleLead { color: inherit; }

.rrAbout .rrAbout__titleAccent {
	color: var(--rrab-accent) !important;
	font-weight: 800;
	font-style: normal !important;
}

.rrAbout .rrAbout__subtitle {
	margin: var(--rr-space-5) 0 0;
	color: var(--rrab-muted);
	font-size: var(--rr-fs-md);
	line-height: var(--rr-lh-relaxed);
	font-weight: 400;
	/* Narrower so the copy breaks to ~3 short lines like the reference. */
	max-width: 540px;
	text-wrap: balance;
}

/* ===========================================================
   Mission panel — left rail (mission copy) + right rail (pillars)
   =========================================================== */
.rrAbout__panel {
	max-width: 1180px;
	margin: 0 auto;
	background: var(--rrab-panel-bg);
	border: 1px solid var(--rrab-panel-border);
	border-radius: var(--rr-radius-2xl);
	box-shadow: var(--rrab-panel-shadow);
	padding: clamp(2rem, 4vw, 3.5rem) clamp(1.75rem, 4vw, 3.5rem);
	display: grid;
	/* Left rail (mission) ~ 0.95fr, right rail (pillars) ~ 1.15fr —
	   gives the right column the wider breathing room seen in
	   the reference. */
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	/* Center-align the mission column with the pillars block so
	   the two rails feel balanced vertically. */
	align-items: center;
}

/* ----- Left: Mission ----- */
.rrAbout__mission {
	display: flex;
	flex-direction: column;
	gap: var(--rr-space-4);
	max-width: 380px;
}

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

.rrAbout .rrAbout__missionTitle {
	font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.18;
	margin: 0;
	color: var(--rrab-heading);
	text-wrap: balance;
}

.rrAbout .rrAbout__missionBody {
	margin: var(--rr-space-2) 0 0;
	color: var(--rrab-muted);
	font-size: var(--rr-fs-md);
	line-height: var(--rr-lh-relaxed);
	font-weight: 400;
}

/* ----- Right: Pillars ----- */
.rrAbout__pillars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.rrAbout__pillar {
	display: flex;
	/* Center the square tile against the row's title + description
	   block — flex stretch + aspect-ratio doesn't reliably yield a
	   square in flex layouts, so we use a fixed-size square instead. */
	align-items: center;
	gap: clamp(1rem, 1.8vw, 1.5rem);
	padding: clamp(1.25rem, 2vw, 1.5rem) 0;
}

.rrAbout__pillar + .rrAbout__pillar {
	border-top: 1px solid var(--rrab-divider);
}

.rrAbout__pillar:first-child { padding-top: 0; }
.rrAbout__pillar:last-child  { padding-bottom: 0; }

.rrAbout__pillarIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Explicit square — width and height locked together so the
	   tile is always a true square regardless of row height. */
	width: 80px;
	height: 80px;
	border-radius: var(--rr-radius-lg);
	background: var(--rrab-icon-bg);
	color: var(--rrab-icon-color);
	flex-shrink: 0;
	transition: transform var(--rr-dur-base) var(--rr-ease-spring);
}
.rrAbout__pillarIcon svg { width: 36px; height: 36px; display: block; }
.rrAbout__pillar:hover .rrAbout__pillarIcon {
	transform: scale(1.04) rotate(-3deg);
}

.rrAbout__pillarBody {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
}

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

.rrAbout .rrAbout__pillarDesc {
	font-size: .9375rem;
	line-height: var(--rr-lh-relaxed);
	margin: 0;
	color: var(--rrab-muted);
	font-weight: 400;
	/* Wraps to ~2 lines like the reference at desktop widths,
	   which sets the row height the icon tile stretches to match. */
	max-width: 360px;
}

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

/* Tablet — collapse to single column inside the panel */
@media (max-width: 900px) {
	.rrAbout__panel {
		grid-template-columns: 1fr;
		gap: clamp(1.5rem, 4vw, 2.25rem);
		padding: clamp(1.5rem, 5vw, 2.25rem);
		border-radius: var(--rr-radius-xl);
	}
	.rrAbout__mission { max-width: none; }
}

/* Phone — tighten paddings */
@media (max-width: 600px) {
	.rrAbout__wrap {
		padding: clamp(2.5rem, 8vw, 4rem) clamp(1rem, 5vw, 1.5rem);
	}
	.rrAbout__head { margin-bottom: var(--rr-space-8); }

	.rrAbout .rrAbout__title {
		font-size: clamp(1.625rem, 6vw, 2.25rem);
	}

	.rrAbout__pillar {
		gap: var(--rr-space-3);
	}

	.rrAbout__pillarIcon {
		width: 60px;
		height: 60px;
	}
	.rrAbout__pillarIcon svg { width: 28px; height: 28px; }

	.rrAbout .rrAbout__pillarDesc {
		max-width: none;
	}
}

/* Reduced-motion — no hover transforms */
@media (prefers-reduced-motion: reduce) {
	.rrAbout__pillar:hover .rrAbout__pillarIcon {
		transform: none;
	}
}