/**
 * Suite selector — chip rail over one shared panel.
 *
 * The markup comes from an Elementor loop: each product is a chip and a panel
 * side by side inside a `suite-item` wrapper that is `display: contents`, so in
 * the two panel forms the chips and panels become direct children of the rail.
 * `order` then lifts every panel below every chip. On a phone the wrapper stops
 * dissolving and each panel opens under its own chip, as an accordion.
 *
 * Classes are DOUBLED throughout. This sheet loads around index 7 while
 * Elementor's global and per-widget sheets land at 25-34, so a single class
 * ties on specificity and loses on source order.
 *
 * Form is set by suite-selector.js from the rail's own measured width, never
 * from the viewport — so this is also correct inside a narrow column.
 */

/*
 * The section sits in the page's WIDE measure (`measure-wide`, a 1648 cap), which
 * put the panel 140px wider than the closing CTA card underneath it. Matching that
 * card means matching `audience-measure` exactly: a 1300 cap against the same 24px
 * gutter, so the two resolve to the same content box at every width.
 *
 * It belongs here on `:has()` rather than on the wrapper itself -- `measure-wide`
 * is shared with the four-up section above and must not move -- and `:has()` lifts
 * this to (0,3,0), so it beats the global class whatever the sheet order.
 *
 * 1252 is still above the script's FOUR_COL threshold of 1250, so the panel keeps
 * its four-column header down to the same viewport width it did before.
 */
.elementor .measure-wide:has( .suite-selector ) {
	max-width: 1300px;
}

.elementor .suite-selector.suite-selector {
	--suite-gap: 12px;
	--suite-tint: #F7F5FD; /* NOT a kit token — purple at ~4% over white. */

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --suite-gap );
	align-items: flex-start;
	padding: 0;
	grid-template-columns: none;
	grid-auto-rows: auto;
}

/* The loop wraps every item in its own box; it has to dissolve. */
.elementor .suite-selector.suite-selector > .e-collection-loop-item-base,
.elementor .suite-selector.suite-selector > [data-element_type="e-collection-loop-item"],
.elementor .suite-item.suite-item {
	display: contents;
}

/* ---- the chip ---------------------------------------------------------- */
.elementor .suite-head.suite-head {
	order: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	width: auto;
	padding: 12px 22px 12px 12px;
	background-color: var( --white );
	border: 1px solid var( --grey );
	border-radius: var( --radius-pill );
	cursor: pointer;
	text-align: start;
	transition: border-color .2s var( --ease, ease ),
	            box-shadow .2s var( --ease, ease ),
	            transform .2s var( --ease, ease ),
	            background-color .2s var( --ease, ease );
}

.elementor .suite-head.suite-head:hover {
	transform: translateY( -2px );
	box-shadow: 0 4px 16px rgba( 0, 0, 0, .10 );
}

.elementor .suite-head.suite-head:focus-visible {
	outline: 2px solid var( --purple );
	outline-offset: 2px;
}

.elementor .suite-mark.suite-mark {
	width: 38px;
	height: 38px;
	min-width: 38px;
	border-radius: 12px;
	overflow: hidden;
	flex: 0 0 38px;
}

/* name over descriptor */
.elementor .suite-head.suite-head > div {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: auto;
	padding: 0;
	min-width: 0;
}

.elementor .suite-head.suite-head > div > span:first-child {
	font-family: var( --font-display );
	font-weight: 600;
	font-size: 17px;
	line-height: 1.15;
	color: var( --onyx );
	white-space: nowrap;
}

.elementor .suite-head.suite-head > div > span:last-child {
	font-family: var( --font-body );
	font-weight: 400;
	font-size: 14px;
	line-height: 1.25;
	color: var( --ui-text-muted );
	margin-top: 1px;
	white-space: nowrap;
}

/* the selected chip */
.elementor .suite-head.suite-head[aria-expanded="true"] {
	background-color: var( --onyx );
	border-color: var( --onyx );
	box-shadow: 0 8px 32px rgba( 0, 0, 0, .10 );
}

.elementor .suite-head.suite-head[aria-expanded="true"] > div > span:first-child {
	color: var( --white );
}

.elementor .suite-head.suite-head[aria-expanded="true"] > div > span:last-child {
	color: rgba( 255, 255, 255, .6 );
}

/* the chevron is only drawn in the accordion */
.elementor .suite-head.suite-head > div + div {
	display: none;
}

/* ---- the panel --------------------------------------------------------- */
.elementor .suite-drawer.suite-drawer {
	order: 2;
	flex: 0 0 100%;
	width: 100%;
	display: none;
	padding: 46px;
	margin-block-start: 28px;
	background-color: var( --white );
	border: 1px solid var( --grey );
	border-radius: var( --radius-lg );
	box-shadow: 0 14px 31px 5px rgba( 0, 0, 0, .05 );
	overflow: hidden;
}

.elementor .suite-selector.suite-selector [data-open="true"] > .suite-drawer,
.elementor .suite-drawer.suite-drawer[data-open="true"] {
	display: block;
}

@media ( prefers-reduced-motion: no-preference ) {
	.elementor .suite-drawer.suite-drawer[data-open="true"] {
		animation: suite-panel-in .22s cubic-bezier( .22, .61, .36, 1 ) both;
	}
}

@keyframes suite-panel-in {
	from { opacity: 0; transform: translateY( 5px ); }
}

/*
 * Four columns across the top — mark, lede, what-you-get, action — with the
 * dividers as borders on the columns that follow, so they stretch to the row's
 * height on their own. The columns own the spacing; the grid has no gap.
 */
.elementor .suite-inner.suite-inner {
	display: grid;
	grid-template-columns: auto minmax( 0, 1.1fr ) minmax( 0, 1fr ) auto;
	align-items: stretch;
	padding: 0;
}

.elementor .suite-art.suite-art {
	align-self: start;
	width: 148px;
	height: 148px;
	max-width: 148px;
	flex: 0 0 auto;
	border-radius: 28px;
	overflow: hidden;
}

/*
 * The gutters were cut 48 -> 32 when the panel came in to the CTA card's measure:
 * at 1158 of inner width the old ones left the body column 359px, which wrapped
 * `A stable, ready-to-use ticker signal built for earnings and nowcasting.` to
 * four lines where it had been two. Taking 84px out of the padding and giving it
 * to the two text columns puts it back to three. The dividers still read -- they
 * are the row's full height -- and nothing here widens the panel.
 */
.elementor .suite-lede-col.suite-lede-col {
	padding: 0 32px 0 36px;
	min-width: 0;
}

.elementor .suite-get-col.suite-get-col,
.elementor .suite-cta-col.suite-cta-col {
	border-inline-start: 1px solid var( --grey );
	padding-inline-start: 32px;
	min-width: 0;
}

.elementor .suite-get-col.suite-get-col {
	padding-inline-end: 32px;
}

.elementor .suite-cta-col.suite-cta-col {
	padding-block: 0;
}

/* the two purple labels */
.elementor .suite-lede-col.suite-lede-col > span,
.elementor .suite-get-col.suite-get-col > span {
	display: block;
	font-family: var( --font-display );
	font-size: 14px;
	font-weight: 600;
	color: var( --purple );
	margin-block-end: 10px;
}

/* "Choose it when" is redundant beside a lede that begins "Choose X when" */
.elementor .suite-lede-col.suite-lede-col > span {
	display: none;
}

.elementor .suite-lede-col.suite-lede-col > h3 {
	font-family: var( --font-display );
	font-weight: 600;
	font-size: 36px;
	line-height: 1.15;
	color: var( --onyx );
	margin: 0;
	max-width: 20ch;
}

.elementor .suite-get-col.suite-get-col > p {
	font-family: var( --font-body );
	font-weight: 400;
	font-size: var( --size-body-lg );
	line-height: 1.45;
	color: var( --onyx );
	margin: 0;
	max-width: 30ch;
}

/* The kit's scoped button default is (0,3,0), so this has to clear it. */
.elementor .suite-cta-col.suite-cta-col a.e-button-base {
	margin-top: 0;
	white-space: nowrap;
}

/* ---- the stats --------------------------------------------------------- */
.elementor .suite-stats.suite-stats {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	column-gap: 36px;
	border-block-start: 1px solid var( --grey );
	margin-block-start: 44px;
	padding: 40px 0 0;
}

.elementor .suite-stat.suite-stat {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0;
	min-width: 0;
}

.elementor .suite-stat.suite-stat > span:first-child {
	display: block;
	font-family: var( --font-display );
	font-weight: 600;
	font-size: 40px;
	line-height: 1.05;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	color: var( --onyx );
	flex: 0 0 auto;
}

.elementor .suite-stat.suite-stat > span:last-child {
	display: block;
	font-family: var( --font-body );
	font-size: var( --size-body-lg );
	line-height: 1.35;
	color: var( --onyx );
	min-width: 0;
	overflow-wrap: break-word;
}

/* =========================  mid — the action drops  ====================== */
.elementor .suite-selector.suite-selector[data-size="mid"] .suite-inner {
	grid-template-columns: auto minmax( 0, 1.1fr ) minmax( 0, 1fr );
	row-gap: 30px;
}

.elementor .suite-selector.suite-selector[data-size="mid"] .suite-cta-col {
	grid-column: 2 / -1;
	border-inline-start: 0;
	padding-inline-start: 0;
}

.elementor .suite-selector.suite-selector[data-size="mid"] .suite-lede-col > h3 {
	font-size: 32px;
}

/* =========================  narrow — two columns  ======================== */
.elementor .suite-selector.suite-selector[data-size="narrow"] .suite-inner {
	grid-template-columns: auto minmax( 0, 1fr );
	row-gap: 30px;
}

.elementor .suite-selector.suite-selector[data-size="narrow"] .suite-art {
	width: 104px;
	height: 104px;
	max-width: 104px;
}

.elementor .suite-selector.suite-selector[data-size="narrow"] .suite-lede-col {
	padding: 0 0 0 28px;
}

.elementor .suite-selector.suite-selector[data-size="narrow"] .suite-get-col,
.elementor .suite-selector.suite-selector[data-size="narrow"] .suite-cta-col {
	grid-column: 1 / -1;
	border-inline-start: 0;
	padding-inline: 0;
}

.elementor .suite-selector.suite-selector[data-size="narrow"] .suite-lede-col > h3 {
	font-size: 28px;
	max-width: 22ch;
}

.elementor .suite-selector.suite-selector[data-size="narrow"] .suite-drawer {
	padding: 32px;
}

/* The three-up stat row needs ~980 at Body/Large: a figure has no break
   opportunity, so the column has a hard minimum. */
.elementor .suite-selector.suite-selector[data-stats="inline"] .suite-stats {
	grid-template-columns: 1fr;
	column-gap: 0;
	border-block-start: 0;
	padding-block-start: 0;
}

.elementor .suite-selector.suite-selector[data-stats="inline"] .suite-stat {
	gap: 14px;
	border-block-start: 1px solid var( --grey );
	padding-block: 14px;
}

.elementor .suite-selector.suite-selector[data-stats="inline"] .suite-stat > span:first-child {
	font-size: 26px;
}

.elementor .suite-selector.suite-selector[data-stats="inline"] .suite-stat > span:last-child {
	font-size: var( --size-body );
}

/* =========================  stack — the accordion  ======================= */
.elementor .suite-selector.suite-selector[data-form="stack"] {
	display: block;
	background-color: var( --white );
	border: 1px solid var( --grey );
	border-radius: var( --radius-lg );
	box-shadow: 0 14px 31px 5px rgba( 0, 0, 0, .05 );
	overflow: hidden;
}

/* the item stops dissolving, so chip and panel stack per product */
.elementor .suite-selector.suite-selector[data-form="stack"] > .e-collection-loop-item-base,
.elementor .suite-selector.suite-selector[data-form="stack"] > [data-element_type="e-collection-loop-item"],
.elementor .suite-selector.suite-selector[data-form="stack"] .suite-item {
	display: block;
}

.elementor .suite-selector.suite-selector[data-form="stack"] > * + * {
	border-block-start: 1px solid var( --grey );
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-head {
	width: 100%;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 18px 20px;
	gap: 14px;
	transform: none;
	box-shadow: none;
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-head[aria-expanded="true"] {
	background-color: var( --suite-tint );
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-head[aria-expanded="true"] > div > span:first-child {
	color: var( --onyx );
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-head[aria-expanded="true"] > div > span:last-child {
	color: var( --ui-text-muted );
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-mark {
	width: 46px;
	height: 46px;
	min-width: 46px;
	flex-basis: 46px;
	border-radius: 14px;
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-head > div > span:first-child {
	font-size: 21px;
	white-space: normal;
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-head > div > span:last-child {
	font-size: 15px;
	white-space: normal;
}

/* the chevron */
.elementor .suite-selector.suite-selector[data-form="stack"] .suite-head > div + div {
	display: block;
	width: 10px;
	height: 10px;
	min-width: 10px;
	flex: 0 0 10px;
	margin-inline-start: auto;
	padding: 0;
	border-inline-end: 2px solid var( --line );
	border-block-end: 2px solid var( --line );
	transform: rotate( 45deg );
	transition: transform .26s ease, border-color .2s ease;
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-head[aria-expanded="true"] > div + div {
	transform: rotate( 225deg );
	border-color: var( --purple );
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-drawer {
	width: auto;
	margin: 0;
	padding: 0 20px 22px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: var( --suite-tint );
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-inner {
	display: block;
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-art {
	display: none;
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-lede-col,
.elementor .suite-selector.suite-selector[data-form="stack"] .suite-get-col,
.elementor .suite-selector.suite-selector[data-form="stack"] .suite-cta-col {
	border: 0;
	padding: 0;
	grid-column: auto;
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-lede-col {
	margin-block-end: 22px;
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-lede-col > span {
	display: block;
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-lede-col > h3 {
	font-size: 17px;
	max-width: none;
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-get-col > p {
	font-size: var( --size-body );
	max-width: none;
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-cta-col {
	margin-block-start: 22px;
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-cta-col a.e-button-base {
	display: flex;
	justify-content: center;
	width: 100%;
}

.elementor .suite-selector.suite-selector[data-form="stack"] .suite-stats {
	margin-block-start: 24px;
}

/*
 * Fail-open: with no JavaScript every panel is simply open and readable. The
 * script adds `data-js` and only then does the one-at-a-time behaviour apply.
 */
.elementor .suite-selector.suite-selector[data-js] .suite-drawer {
	display: none;
}

.elementor .suite-selector.suite-selector[data-js] .suite-drawer[data-open="true"] {
	display: block;
}

.elementor .suite-selector.suite-selector:not([data-js]) .suite-drawer {
	display: block;
}

/* Match the inset active fill to the accordion's outer edge only.
 * The current item inset is 10px inside its 1px border. Middle joins stay square. */
.elementor .suite-selector.suite-selector[data-form="stack"] > :first-child .suite-head.suite-head {
	border-start-start-radius: max( 0px, calc( var( --radius-lg ) - 11px ) );
	border-start-end-radius: max( 0px, calc( var( --radius-lg ) - 11px ) );
}

.elementor .suite-selector.suite-selector[data-form="stack"] > :last-child .suite-drawer.suite-drawer {
	border-end-start-radius: max( 0px, calc( var( --radius-lg ) - 11px ) );
	border-end-end-radius: max( 0px, calc( var( --radius-lg ) - 11px ) );
}