.nsc-cmp {
	--nsc-cmp-label-w: 150px;
	--nsc-cmp-col-min-w: 170px;
	--nsc-cmp-radius: 0px;
	--nsc-cmp-border-color: #E2E8EE;
	--nsc-cmp-header-bg: #F5F8FA;
	--nsc-cmp-featured-bg: #125FD3;
	--nsc-cmp-featured-header-start: #4C2EFF;
	--nsc-cmp-featured-header-end: #1A6CE7;
	--nsc-cmp-featured-text: #FFFFFF;
	--nsc-cmp-featured-subtext: #C2F4FF;
	--nsc-cmp-featured-border-color: #1A63D1;
	--nsc-cmp-featured-border-w: 4px;
	--nsc-cmp-featured-bleed: 10px;
	--nsc-cmp-featured-gap-right: 0px;
	--nsc-cmp-featured-radius: 16px;
	--nsc-cmp-featured-shadow: rgba(2, 20, 43, 0.22);
	width: 100%;
}

.nsc-cmp__heading {
	margin: 0 0 24px;
}

/*
 * overflow-y is deliberately set, not left to default — per the CSS spec,
 * an element with overflow-x: auto and no explicit overflow-y computes the
 * latter to auto as well (not visible), which would clip the featured
 * column's top/bottom bleed and shadow exactly at this box's edges instead
 * of letting them show past it. The vertical padding gives that bleed +
 * shadow room to render without visually touching the heading above or the
 * footer box below.
 */
.nsc-cmp__scroll {
	overflow-x: auto;
	overflow-y: visible;
	padding: 20px 0;
	margin: -20px 0;
}

/*
 * min-width is derived from the same two variables the columns themselves
 * use (not a separate hardcoded number) so the two can never drift out of
 * sync — this grid is meant to fit down to the narrowest width Elementor
 * actually gives this section on a real "laptop" breakpoint screen
 * (~871px here, well above where the mobile view below takes over at the
 * tablet breakpoint), not just on a phone.
 */
.nsc-cmp__grid {
	display: grid;
	grid-template-columns: var(--nsc-cmp-label-w) repeat(4, minmax(var(--nsc-cmp-col-min-w), 1fr));
	min-width: calc(var(--nsc-cmp-label-w) + (4 * var(--nsc-cmp-col-min-w)));
}

.nsc-cmp__cell {
	box-sizing: border-box;
	padding: 12px;
	background: #FFFFFF;
	border-bottom: 1px solid var(--nsc-cmp-border-color);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.nsc-cmp__cell--attribute {
	padding-right: 20px;
}

.nsc-cmp__cell--b {
	padding-left: 22px;
}

.nsc-cmp__cell--header {
	border-bottom: none;
}

.nsc-cmp__cell--header.nsc-cmp__cell--attribute,
.nsc-cmp__cell--header.nsc-cmp__cell--b,
.nsc-cmp__cell--header.nsc-cmp__cell--c,
.nsc-cmp__cell--header.nsc-cmp__cell--d {
	background: var(--nsc-cmp-header-bg);
}

.nsc-cmp__cell--corner-tl {
	border-top-left-radius: var(--nsc-cmp-radius);
}

.nsc-cmp__cell--corner-tr {
	border-top-right-radius: var(--nsc-cmp-radius);
}

.nsc-cmp__cell--corner-bl {
	border-bottom-left-radius: var(--nsc-cmp-radius);
}

.nsc-cmp__cell--corner-br {
	border-bottom-right-radius: var(--nsc-cmp-radius);
}

.nsc-cmp__attribute-heading {
	white-space: nowrap;
}

/*
 * flex: 1 1 auto matches .nsc-cmp__value-group below (the equivalent
 * wrapper in a featured body-row cell) — without it, this shrinks to its
 * own content width inside the row-direction featured header cell, and
 * that cell's inherited `justify-content: center` (see .nsc-cmp__cell)
 * then centers the whole text+checkmark group instead of pinning the text
 * flush left and the checkmark flush right against the card's edges.
 */
.nsc-cmp__col-head {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nsc-cmp__col-title,
.nsc-cmp__col-title--featured {
	margin: 0;
}

.nsc-cmp__col-subtitle,
.nsc-cmp__col-subtitle--featured {
	margin: 0;
}

/*
 * Not nowrap, unlike the attribute column heading — a longer label (e.g.
 * "SPEED / EARLY EXPOSURE") in a narrow Attribute Column Width would
 * otherwise overflow past the column and get clipped by the featured
 * card's higher z-index sitting right next to it.
 */
.nsc-cmp__row-label {
	overflow-wrap: break-word;
}

/*
 * .nsc-cmp__value--featured and .nsc-cmp__subtext--featured are deliberately
 * NOT also given the .nsc-cmp__value class in the markup, even though they
 * need the same margin/wrap reset — Elementor compiles each Style-tab
 * control into a per-instance selector like
 * ".elementor-123 .elementor-element-abc1234 .nsc-cmp__value", which
 * outweighs a plain ".nsc-cmp__value--featured" rule in this stylesheet on
 * specificity alone. Sharing the base class would let Elementor's "Value
 * Text Color" control silently repaint the featured (white-on-blue) text
 * back to the general gray value color. Keeping the classes disjoint means
 * each control only ever touches the cells it's meant to.
 */
.nsc-cmp__value,
.nsc-cmp__value--featured,
.nsc-cmp__subtext--featured {
	margin: 0;
	overflow-wrap: break-word;
}

/*
 * The featured column's cells stay normal grid participants — one per row,
 * sized by the same row-height computation as their neighbors — so text
 * that wraps to two lines in a competitor column still keeps this column's
 * checkmark/value vertically aligned with it. The "raised card" look comes
 * entirely from styling each cell (continuous background/border down the
 * column, no bottom divider, negative side margins bleeding past the grid),
 * not from pulling the column out of the grid flow.
 */
.nsc-cmp__cell--featured {
	position: relative;
	z-index: 2;
	background: var(--nsc-cmp-featured-bg);
	border-left: var(--nsc-cmp-featured-border-w) solid var(--nsc-cmp-featured-border-color);
	border-right: var(--nsc-cmp-featured-border-w) solid var(--nsc-cmp-featured-border-color);
	border-bottom: none;
	/*
	 * Right side deliberately doesn't mirror the left's negative-bleed
	 * margin — a small positive gap here (not overlap) is what separates
	 * the card from the next column instead of butting flush against it,
	 * matching the reference design's own near-zero bleed on this side.
	 */
	margin-left: calc(var(--nsc-cmp-featured-bleed) * -1);
	margin-right: var(--nsc-cmp-featured-gap-right);
	padding-left: calc(12px + var(--nsc-cmp-featured-bleed));
	padding-right: 12px;
	gap: 8px;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	/* Horizontal-only glow (0 vertical offset) so it reads as a continuous
	   side shadow without leaving a seam between stacked row cells. */
	box-shadow: -4px 0 10px -4px var(--nsc-cmp-featured-shadow), 4px 0 10px -4px var(--nsc-cmp-featured-shadow);
}

/*
 * No box-shadow here (overriding the horizontal glow every other featured
 * cell gets from .nsc-cmp__cell--featured, since this rule comes later in
 * the cascade at equal specificity) — the header/title cell reads better
 * flat against its own gradient than with a shadow competing with it.
 */
.nsc-cmp__cell--featured-top {
	background: linear-gradient(90deg, var(--nsc-cmp-featured-header-start) 0%, var(--nsc-cmp-featured-header-end) 100%);
	border-top: var(--nsc-cmp-featured-border-w) solid var(--nsc-cmp-featured-border-color);
	border-top-left-radius: var(--nsc-cmp-featured-radius);
	border-top-right-radius: var(--nsc-cmp-featured-radius);
	margin-top: calc(var(--nsc-cmp-featured-bleed) * -1);
	padding-top: calc(12px + var(--nsc-cmp-featured-bleed));
	box-shadow: none;
}

/* No box-shadow here either — see the comment on .nsc-cmp__cell--featured-top. */
.nsc-cmp__cell--featured-bottom {
	border-bottom: var(--nsc-cmp-featured-border-w) solid var(--nsc-cmp-featured-border-color);
	border-bottom-left-radius: var(--nsc-cmp-featured-radius);
	border-bottom-right-radius: var(--nsc-cmp-featured-radius);
	margin-bottom: calc(var(--nsc-cmp-featured-bleed) * -1);
	padding-bottom: calc(12px + var(--nsc-cmp-featured-bleed));
	box-shadow: none;
}

.nsc-cmp__value-group {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nsc-cmp__col-title--featured,
.nsc-cmp__col-subtitle--featured {
	color: var(--nsc-cmp-featured-text);
}

.nsc-cmp__value--featured {
	color: var(--nsc-cmp-featured-text);
}

.nsc-cmp__subtext--featured {
	color: var(--nsc-cmp-featured-subtext);
}

.nsc-cmp__check {
	flex: 0 0 auto;
	color: var(--nsc-cmp-featured-text);
}

.nsc-cmp__cell--header .nsc-cmp__check {
	align-self: flex-start;
	margin-top: 4px;
}

/*
 * Hidden on desktop; swapped in for .nsc-cmp__scroll below the tablet
 * breakpoint (see media query at the bottom of this file). It's real,
 * always-rendered markup rather than a JS-built view, so the dropdown's
 * default (first competitor) works even with JS disabled.
 */
.nsc-cmp__mobile {
	display: none;
}

.nsc-cmp__mobile-select-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 24px;
}

.nsc-cmp__mobile-select-label {
	font-size: 14px;
}

.nsc-cmp__mobile-select {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 14px;
	border: 2px solid #1A6CE7;
	border-radius: 8px;
	background: #FFFFFF;
	font-size: 15px;
	font-weight: 700;
}

.nsc-cmp__mobile-row {
	padding: 20px 0;
	border-bottom: 1px solid var(--nsc-cmp-border-color);
}

.nsc-cmp__mobile-row:first-of-type {
	padding-top: 0;
}

.nsc-cmp__mobile-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.nsc-cmp__mobile-heading {
	margin: 0 0 12px;
}

.nsc-cmp__mobile-card {
	padding: 14px 16px;
	border-radius: 10px;
}

.nsc-cmp__mobile-card + .nsc-cmp__mobile-card {
	margin-top: 10px;
}

.nsc-cmp__mobile-card-name {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	margin-bottom: 6px;
}

/*
 * Deliberately its own class, not .nsc-cmp__mobile-card-name plus a
 * ".nsc-cmp__mobile-card--featured .nsc-cmp__mobile-card-name" override —
 * the "Card Name Color" Style control compiles to a per-instance selector
 * like ".elementor-123 .elementor-element-abc1234 .nsc-cmp__mobile-card-name",
 * which outweighs a plain compound selector in this stylesheet on
 * specificity alone and would silently repaint this white label back to
 * the general gray color (same failure mode as the desktop grid's featured
 * text/border — see the comment on .nsc-cmp__value--featured above).
 */
.nsc-cmp__mobile-name--featured {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--nsc-cmp-featured-text);
}

.nsc-cmp__mobile-card--featured {
	background: var(--nsc-cmp-featured-bg);
	border: var(--nsc-cmp-featured-border-w) solid var(--nsc-cmp-featured-border-color);
}

.nsc-cmp__mobile-card--compare {
	border: 1px solid var(--nsc-cmp-border-color);
}

.nsc-cmp__footer {
	margin-top: 30px;
	border: 1px solid var(--nsc-cmp-border-color, #E2E8EE);
	border-radius: 20px;
	padding: 0 40px;
}

.nsc-cmp__targets {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px;
	padding: 20px 40px;
	border-bottom: 1px solid var(--nsc-cmp-border-color, #E2E8EE);
}

.nsc-cmp__footer-label {
	margin: 0;
	font-size: 22px;
	white-space: nowrap;
}

.nsc-cmp__target {
	max-width: 360px;
}

.nsc-cmp__target-heading {
	margin: 0;
}

.nsc-cmp__target-description {
	margin: 4px 0 0;
}

.nsc-cmp__footnotes {
	padding: 20px 40px;
}

.nsc-cmp__footnotes p {
	margin: 0 0 4px;
}

.nsc-cmp__footnotes p:last-child {
	margin-bottom: 0;
}

/*
 * Elementor's own tablet breakpoint (1024px) — below it the 5-column grid
 * no longer fits without either a tiny font or horizontal scrolling, so
 * the stacked heading-per-attribute + dropdown view (built above) takes
 * over instead.
 */
@media (max-width: 1024px) {
	.nsc-cmp__scroll {
		display: none;
	}

	.nsc-cmp__mobile {
		display: block;
	}
}

@media (max-width: 767px) {
	.nsc-cmp__targets {
		flex-direction: column;
		gap: 20px;
	}

	.nsc-cmp__footer,
	.nsc-cmp__targets,
	.nsc-cmp__footnotes {
		padding-left: 20px;
		padding-right: 20px;
	}
}