/* About page (was an inline <style> in pages/about).
   Spacing snapped to the 9-step scale in frnd-tokens.css. Text styles (size, weight, case) come from frnd.css; this file sets layout, color and spacing only. */
.about-hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }
	.about-hero-ctas .thm-btn { margin: 0; }
	.about-hero-note { margin-top: var(--space-4); font-size: 0.8125rem; color: var(--thm-muted, #a1aac9); }
	#about-benefits .about-biz { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-8); padding: var(--space-6) var(--space-6); border-radius: 14px; border: 1px dashed var(--thm-border, #3c3c77); background: rgba(255,255,255,.02); }
	#about-benefits .about-biz__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(107,33,239,.18); color: #a78bfa; font-size: 1.25rem; }
	#about-benefits .about-biz__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-1); }
	#about-benefits .about-biz__text strong { color: var(--thm-white, #fff); }
	#about-benefits .about-biz__text span { font-size: 0.9375rem; }
	#about-benefits .about-biz .thm-btn { margin: 0; flex: 0 0 auto; }
	@media (max-width: 47.9375em) { #about-benefits .about-biz { flex-direction: column; align-items: flex-start; } }

/* Section spacing for #about-benefits on pages without the landing template (Events, Promotions, Locations) */
#about-benefits { padding: var(--space-8) 0; position: relative; }
@media (max-width: 61.9375em) { #about-benefits { padding: var(--space-8) 0; } }

/* Card eyebrows (.lp-eyebrow inside .fcard): size the pill to its text instead of stretching, and let the card's gap handle spacing */
.fcard .lp-eyebrow { align-self: flex-start; margin-bottom: 0; }
.fcard--center .lp-eyebrow { align-self: center; }