/**
 * SignalMind — Why SignalMind
 *
 * A transparency panel beside four capability cards, a metrics band, and a
 * capability comparison. Loaded on the front page only.
 *
 * The comparison reuses `.sm-compare-table` from the component library; only
 * the brand-column emphasis and the cell treatments are added here.
 *
 * @package SignalMind
 */

/* ==========================================================================
   Section
   ========================================================================== */

.sm-why {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.sm-why__bg {
	position: absolute;
	inset: 0;
	z-index: var(--sm-z-behind);
	pointer-events: none;
}

.sm-why__orb {
	position: absolute;
	top: 6%;
	left: 50%;
	width: min(64rem, 130%);
	aspect-ratio: 2 / 1;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, var(--sm-alpha-primary-8) 0%, transparent 66%);
}

.sm-why__head {
	margin-bottom: var(--sm-space-14);
}

/* ==========================================================================
   Transparency panel + capability cards
   ========================================================================== */

.sm-why__layout {
	display: grid;
	gap: var(--sm-grid-gap);
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
}

@media (min-width: 1100px) {
	.sm-why__layout {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--sm-space-8);
	}
}

/* Shared glass shell with a masked gradient hairline. */
.sm-trust,
.sm-wcard {
	position: relative;
	border-radius: var(--sm-radius-2xl);
	background-color: var(--sm-color-surface-glass);
	backdrop-filter: blur(var(--sm-blur-md));
	-webkit-backdrop-filter: blur(var(--sm-blur-md));
	box-shadow: var(--sm-shadow-lg);
	transition: transform var(--sm-duration-base) var(--sm-ease-out),
		box-shadow var(--sm-duration-base) var(--sm-ease-standard);
}

.sm-trust::before,
.sm-wcard::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(150deg, var(--sm-alpha-white-16), var(--sm-alpha-white-4) 42%, transparent 64%, var(--sm-alpha-primary-24));
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	pointer-events: none;
}

.sm-trust:hover,
.sm-wcard:hover {
	transform: translateY(-3px);
	box-shadow: var(--sm-shadow-xl), 0 0 38px -16px var(--sm-alpha-primary-40);
}

/* Transparency panel */

.sm-trust {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-6);
	padding: var(--sm-space-8);
}

.sm-trust__head {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
}

.sm-trust__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--sm-space-1);
	border-radius: var(--sm-radius-lg);
	border: var(--sm-border-width) solid var(--sm-color-border);
	background-image: var(--sm-gradient-brand-soft);
	color: var(--sm-color-primary);
}

.sm-trust__title {
	font-size: var(--sm-text-h3);
	font-weight: var(--sm-weight-bold);
	letter-spacing: var(--sm-tracking-tight);
	color: var(--sm-color-text);
}

.sm-trust__text {
	max-width: 34rem;
	font-size: var(--sm-text-sm);
	line-height: var(--sm-leading-relaxed);
	color: var(--sm-color-text-muted);
}

.sm-trust__list {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
	margin-top: auto;
}

.sm-trust__list li + li {
	margin-top: 0;
}

/*
 * Four-part row: mark, label, value, tick. The value column is the one that
 * flexes, so the ticks stay in a single line down the right edge whatever the
 * labels do.
 */
.sm-trust__row {
	display: grid;
	grid-template-columns: 30px minmax(0, auto) minmax(0, 1fr) 20px;
	align-items: center;
	gap: var(--sm-space-3);
	padding: var(--sm-space-3) var(--sm-space-3-5);
	border: var(--sm-border-width) solid transparent;
	border-radius: var(--sm-radius-lg);
	transition: var(--sm-transition-colors);
}

.sm-trust__row:hover {
	border-color: var(--sm-color-border-subtle);
	background-color: var(--sm-alpha-white-2);
}

.sm-trust__row-icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: var(--sm-radius-md);
	background-color: var(--sm-alpha-white-4);
	border: var(--sm-border-width) solid var(--sm-color-border-subtle);
	color: var(--sm-color-primary);
}

.sm-trust__row-label {
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-medium);
	color: var(--sm-color-text-secondary);
	white-space: nowrap;
}

.sm-trust__row-value {
	font-size: var(--sm-text-xs);
	color: var(--sm-color-text-subtle);
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sm-trust__row-check {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: var(--sm-radius-circle);
	background-color: var(--sm-color-primary-subtle);
	color: var(--sm-color-primary);
	box-shadow: inset 0 0 0 1px var(--sm-alpha-primary-24);
}

/* Capability cards */

.sm-why__cards {
	display: grid;
	gap: var(--sm-grid-gap);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
	.sm-why__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* These cards stretch to match the transparency panel beside them, and their
   copy is short. Centring the content spreads the slack above and below, so it
   reads as generous padding rather than an empty lower half. */
.sm-wcard {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--sm-space-3);
	padding: var(--sm-space-6);
}

.sm-wcard__icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-bottom: var(--sm-space-1);
	border-radius: var(--sm-radius-lg);
	border: var(--sm-border-width) solid var(--sm-color-border);
	background-image: var(--sm-gradient-brand-soft);
	color: var(--sm-color-primary);
}

.sm-wcard__title {
	font-size: var(--sm-text-h5);
	font-weight: var(--sm-weight-semibold);
	line-height: var(--sm-leading-snug);
	letter-spacing: var(--sm-tracking-snug);
	color: var(--sm-color-text);
}

.sm-wcard__text {
	font-size: var(--sm-text-sm);
	line-height: var(--sm-leading-relaxed);
	color: var(--sm-color-text-muted);
}

/* ==========================================================================
   Trust metrics
   ========================================================================== */

.sm-metrics {
	display: grid;
	gap: var(--sm-space-px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: var(--sm-space-16);
	border: var(--sm-border-width) solid var(--sm-color-border);
	border-radius: var(--sm-radius-2xl);
	background-color: var(--sm-color-border);
	overflow: hidden;
}

@media (min-width: 640px) {
	.sm-metrics {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.sm-metrics {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/*
 * The band is one hairline grid: the container paints the rule colour and each
 * tile paints over it, so dividers appear between tiles without any tile
 * needing to know where it sits.
 */
.sm-metric {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-1);
	padding: var(--sm-space-6) var(--sm-space-5);
	background-color: var(--sm-color-bg);
	transition: background-color var(--sm-duration-base) var(--sm-ease-standard);
}

.sm-metric:hover {
	background-color: var(--sm-color-surface);
}

.sm-metric__value {
	display: flex;
	align-items: baseline;
	font-size: var(--sm-text-h2);
	font-weight: var(--sm-weight-extrabold);
	line-height: 1.1;
	letter-spacing: var(--sm-tracking-tighter);
	font-variant-numeric: tabular-nums;
	color: var(--sm-color-text);
}

.sm-metric__value small {
	font-size: 0.6em;
	font-weight: var(--sm-weight-bold);
	color: var(--sm-color-primary);
	margin-left: 0.04em;
}

.sm-metric__label {
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-wide);
	color: var(--sm-color-text-secondary);
}

.sm-metric__note {
	font-size: var(--sm-text-2xs);
	line-height: var(--sm-leading-normal);
	color: var(--sm-color-text-subtle);
}

/* ==========================================================================
   Comparison
   ========================================================================== */

.sm-why__compare {
	margin-top: var(--sm-space-16);
}

.sm-why__compare-head {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-2);
	margin-bottom: var(--sm-space-6);
	max-width: var(--sm-measure);
}

.sm-why__compare-title {
	font-size: var(--sm-text-h3);
	font-weight: var(--sm-weight-bold);
	letter-spacing: var(--sm-tracking-tight);
	color: var(--sm-color-text);
}

.sm-why__compare-note {
	font-size: var(--sm-text-sm);
	line-height: var(--sm-leading-relaxed);
	color: var(--sm-color-text-muted);
}

/* Fixed layout so the three approaches get equal width and read as equal
   options; auto layout hands the widest column to whichever has the longest
   label, which here would be a competitor. */
.sm-why__table {
	table-layout: fixed;
}

.sm-why__table th:first-child {
	width: 32%;
}

.sm-why__table thead th:not(:first-child) {
	width: 22.66%;
}

/* The column the page is about gets a wash and a brand-tinted header, so the
   eye lands on it without any other column being made to look deficient. */
.sm-compare-table__brand {
	background-color: var(--sm-color-primary-subtle);
}

.sm-why__table thead .sm-compare-table__brand {
	color: var(--sm-color-primary);
	box-shadow: inset 0 2px 0 var(--sm-color-primary);
}

.sm-why__table tbody tr:hover .sm-compare-table__brand {
	background-color: var(--sm-alpha-primary-16);
}

.sm-tick {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: var(--sm-radius-circle);
	background-color: var(--sm-color-primary);
	color: var(--sm-color-primary-contrast);
	box-shadow: 0 0 14px -4px var(--sm-alpha-primary-40);
}

/* Not a shortfall — a statement of how that approach works. Rendered as plain
   text rather than a cross, which is why there is no "no" icon in this table. */
.sm-cell-note {
	font-size: var(--sm-text-xs);
	color: var(--sm-color-text-subtle);
}

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

@media (max-width: 1099px) {
	.sm-why__head {
		margin-bottom: var(--sm-space-10);
	}

	.sm-metrics,
	.sm-why__compare {
		margin-top: var(--sm-space-12);
	}
}

@media (max-width: 599px) {
	.sm-trust {
		padding: var(--sm-space-5);
	}

	.sm-wcard {
		padding: var(--sm-space-5);
	}

	.sm-metric {
		padding: var(--sm-space-5) var(--sm-space-4);
	}

	/* The value column is the first thing to give up room on a phone; the label
	   and the tick carry the row on their own. */
	.sm-trust__row {
		grid-template-columns: 30px minmax(0, 1fr) 20px;
		gap: var(--sm-space-2-5);
		padding-inline: var(--sm-space-2);
	}

	.sm-trust__row-value {
		display: none;
	}

	.sm-trust__row-label {
		white-space: normal;
	}
}