/* ==========================================================================
   TextCRM Benefits Widget  —  "Numbers wall" (Real benefits. Measurable growth.)
   --------------------------------------------------------------------------
   A premium proof / metrics section: a centered editorial header (optional pill
   badge → two-line display headline with an Instrument-Serif italic highlight →
   mono caption) above a "wall" of indexed benefit rows. Each row counts up its
   big number when it scrolls into view and lights up in the brand accent on
   hover — a full-height left border plus a soft tint and number glow.

   Layout : centered container; rows are a 3-column grid (index · label · number)
            that collapses to a stacked card on small screens.
   Type   : Space Grotesk (display) · Manrope (body + labels)
            · Instrument Serif (italic highlight accent).
   Palette: accent #42c67a · bg #0b1326 · surface #0f1a32 (shared with the Hero).
   Motion : GSAP count-up + staggered scroll reveal. Degrades to the static
            resting state without JS and under prefers-reduced-motion.

   Every visual token is a CSS custom property so the Elementor Style tab (and the
   global Light color-mode layer) can re-skin the section without forking this file.
   ========================================================================== */

.textcrm-benefits {
	/* ---- Theme tokens (overridable from the Elementor Style tab) ---- */
	--tb-bg:         #0b1326;
	--tb-surface:    #0f1a32;
	--tb-text:       #eaf0fb;
	--tb-muted:      #93a1bd;
	--tb-muted-2:    #5e6d8c;
	--tb-accent:     #42c67a;
	--tb-accent-2:   #00c98a;
	--tb-accent-dim: rgba(66, 198, 122, 0.10);
	--tb-ink:        #04211a; /* readable text on the accent */
	--tb-line:       rgba(255, 255, 255, 0.07);
	--tb-line-2:     rgba(255, 255, 255, 0.13);
	--tb-glow:       rgba(66, 198, 122, 0.13);

	--tb-font-display: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--tb-font-body:    'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--tb-font-mono:    'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--tb-font-accent:  'Instrument Serif', 'Times New Roman', Georgia, serif;

	--tb-maxw:   1200px;
	--tb-gutter: 24px;
	--tb-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);

	position: relative;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	padding-block: clamp(72px, 11vh, 140px);
	background-color: var(--tb-bg);
	color: var(--tb-text);
	font-family: var(--tb-font-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.textcrm-benefits *,
.textcrm-benefits *::before,
.textcrm-benefits *::after {
	box-sizing: border-box;
}

.textcrm-benefits ::selection {
	background: var(--tb-accent);
	color: var(--tb-ink);
}

/* --------------------------------------------------------------------------
   Soft brand background glow — bleeds in from the top-right for depth.
   -------------------------------------------------------------------------- */
.textcrm-benefits__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.textcrm-benefits__glow {
	position: absolute;
	top: -18%;
	right: -8%;
	width: 680px;
	height: 520px;
	max-width: 90vw;
	border-radius: 50%;
	background: var(--tb-glow);
	filter: blur(150px);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.textcrm-benefits__container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--tb-maxw);
	margin: 0 auto;
	padding-left: var(--tb-gutter);
	padding-right: var(--tb-gutter);
}

/* --------------------------------------------------------------------------
   Header — a stacked editorial column (eyebrow → title → caption). Centered by
   default (matches the Hero); the --left modifier left-aligns it.
   -------------------------------------------------------------------------- */
.textcrm-benefits__head {
	margin-bottom: clamp(38px, 5vw, 56px);
}

.textcrm-benefits__head-main {
	min-width: 0;
}

.textcrm-benefits__head--center {
	text-align: center;
}

.textcrm-benefits__head--center .textcrm-benefits__title {
	margin-left: auto;
	margin-right: auto;
}

/* Eyebrow / badge pill (mirrors the Hero badge). */
.textcrm-benefits__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 20px;
	padding: 7px 14px;
	border: 1px solid rgba(66, 198, 122, 0.24);
	border-radius: 999px;
	background: rgba(66, 198, 122, 0.10);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-family: var(--tb-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #bfe9d2;
	line-height: 1;
}

.textcrm-benefits__eyebrow-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tb-accent);
	box-shadow: 0 0 0 0 rgba(66, 198, 122, 0.55);
	animation: textcrm-benefits-pulse 2.4s ease-out infinite;
	flex-shrink: 0;
}

@keyframes textcrm-benefits-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(66, 198, 122, 0.5); }
	70%  { box-shadow: 0 0 0 8px rgba(66, 198, 122, 0); }
	100% { box-shadow: 0 0 0 0 rgba(66, 198, 122, 0); }
}

.textcrm-benefits__title {
	margin: 0;
	max-width: 20ch;
	font-family: var(--tb-font-display);
	font-weight: 700;
	font-size: clamp(34px, 4.6vw, 60px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--tb-text);
}

/* Elegant italic highlight — same treatment as the Hero headline accent. */
.textcrm-benefits__title-accent {
	font-family: var(--tb-font-accent);
	font-style: italic;
	font-weight: 400;
	font-size: 1.1em;
	letter-spacing: 0;
	color: var(--tb-accent);
}

.textcrm-benefits__caption {
	margin: 16px 0 0;
	font-family: var(--tb-font-mono);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tb-muted-2);
}

/* --------------------------------------------------------------------------
   The wall + rows
   -------------------------------------------------------------------------- */
.textcrm-benefits__wall {
	border-top: 1px solid var(--tb-line-2);
}

.textcrm-benefits__row {
	position: relative;
	display: grid;
	grid-template-columns: clamp(44px, 5vw, 56px) 1fr auto;
	grid-template-areas: "idx label num";
	gap: clamp(18px, 3vw, 32px);
	align-items: center;
	padding-block: clamp(24px, 3vw, 32px);
	padding-inline: 0;
	border-bottom: 1px solid var(--tb-line);
	transition: background-color 0.35s var(--tb-ease), padding-left 0.4s var(--tb-ease);
}

/* Rows without the leading index drop the first column. */
.textcrm-benefits__row--no-index {
	grid-template-columns: 1fr auto;
	grid-template-areas: "label num";
}

/* Full-height left accent border, revealed on hover/focus to reinforce the slide. */
.textcrm-benefits__row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(180deg, var(--tb-accent), var(--tb-accent-2));
	transform: scaleY(0);
	transform-origin: center;
	opacity: 0;
	transition: transform 0.4s var(--tb-ease), opacity 0.4s var(--tb-ease);
}

.textcrm-benefits__row:hover,
.textcrm-benefits__row:focus-within {
	background: linear-gradient(90deg, var(--tb-accent-dim), transparent 72%);
	padding-left: 16px;
}

.textcrm-benefits__row:hover::before,
.textcrm-benefits__row:focus-within::before {
	transform: scaleY(1);
	opacity: 1;
}

/* Index */
.textcrm-benefits__idx {
	grid-area: idx;
	font-family: var(--tb-font-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--tb-muted-2);
	transition: color 0.35s var(--tb-ease);
}

.textcrm-benefits__row:hover .textcrm-benefits__idx,
.textcrm-benefits__row:focus-within .textcrm-benefits__idx {
	color: var(--tb-accent);
}

/* Label + description */
.textcrm-benefits__label {
	grid-area: label;
	min-width: 0;
	font-family: var(--tb-font-display);
	font-size: clamp(17px, 1.7vw, 23px);
	font-weight: 600;
	line-height: 1.25;
	color: var(--tb-text);
}

.textcrm-benefits__desc {
	display: block;
	margin-top: 5px;
	max-width: 48ch;
	font-family: var(--tb-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	color: var(--tb-muted);
}

/* Number */
.textcrm-benefits__num {
	grid-area: num;
	display: inline-flex;
	align-items: baseline;
	justify-content: flex-end;
	font-family: var(--tb-font-display);
	font-weight: 700;
	letter-spacing: -0.03em;
	font-size: clamp(46px, 7.5vw, 104px);
	line-height: 0.9;
	color: var(--tb-text);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	white-space: nowrap;
	transition: text-shadow 0.35s var(--tb-ease);
}

.textcrm-benefits__row:hover .textcrm-benefits__num,
.textcrm-benefits__row:focus-within .textcrm-benefits__num {
	text-shadow: 0 0 38px rgba(66, 198, 122, 0.30);
}

.textcrm-benefits__prefix,
.textcrm-benefits__suffix {
	font-size: 0.5em;
	font-weight: 600;
}

.textcrm-benefits__suffix {
	color: var(--tb-accent);
	margin-left: 0.04em;
}

.textcrm-benefits__prefix {
	color: var(--tb-muted);
	margin-right: 0.02em;
}

/* --------------------------------------------------------------------------
   Entrance motion — pre-hidden states apply only while JS has NOT claimed the
   section (`:not(.is-gsap)`). Once the script runs it adds `.is-gsap` and drives
   everything via GSAP inline styles. The <noscript> failsafe (printed by PHP)
   and the reduced-motion block both force the resting state, so the section is
   always visible without JS.
   -------------------------------------------------------------------------- */
.textcrm-benefits--reveal:not(.is-gsap) .textcrm-benefits__animate {
	opacity: 0;
	transform: translateY(26px);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
	.textcrm-benefits {
		--tb-gutter: 18px;
	}
	.textcrm-benefits__title {
		max-width: 100%;
	}
	/* Stack: index + label on top, big number below-left. */
	.textcrm-benefits__row {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"idx label"
			"num num";
		gap: 6px 16px;
		padding-block: 24px;
	}
	.textcrm-benefits__row--no-index {
		grid-template-columns: 1fr;
		grid-template-areas:
			"label"
			"num";
	}
	.textcrm-benefits__row:hover,
	.textcrm-benefits__row:focus-within {
		padding-left: 10px;
	}
	.textcrm-benefits__idx  { grid-area: idx; align-self: center; }
	.textcrm-benefits__label { grid-area: label; }
	.textcrm-benefits__num {
		grid-area: num;
		justify-content: flex-start;
		margin-top: 10px;
		font-size: clamp(52px, 17vw, 76px);
	}
}

@media (max-width: 420px) {
	.textcrm-benefits__num {
		font-size: 60px;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion — show the resting state immediately, no motion.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.textcrm-benefits *,
	.textcrm-benefits *::before,
	.textcrm-benefits *::after {
		animation: none !important;
		transition: none !important;
	}
	.textcrm-benefits--reveal .textcrm-benefits__animate {
		opacity: 1 !important;
		transform: none !important;
	}
}