/* Front-page section styles — c-channels-compare. Merged into main.css at the end of the pass.
 *
 * Two sections, two different tempos — the pass that produced this file was a
 * response to three reviews that all read the page as "still generic": six
 * bands within 150px of each other, every one opening with the same eyebrow →
 * two-line H2 → one big white rounded card.
 *
 *  5. Channels — the band that carries the product's central claim, so it is
 *     the one that gets the extra width (.sf-section--bleed). Free pair as two
 *     product cards; Pro as a bento of family cards — Google and Social take
 *     the top row, the four smaller families share the row beneath.
 *  7. Free vs Pro — the short beat (.sf-section--compact, .sf-section--narrow).
 *     The Pro column used to be inset from its card with a white gutter on its
 *     top and right, which read as a rendering bug, and its saturation lived
 *     only in the 74px header cell. It now runs flush to the card edges — the
 *     card clips it, so it inherits the 24px radius — as one violet lane with a
 *     2px rule down both sides, top to bottom.
 *
 * Everything here builds on the v3 tokens and the elevation scale in main.css;
 * nothing is redefined and no new box-shadow is invented.
 */

/* ===========================================================================
 * 5. Channels
 * ======================================================================== */

/* .sf-section--bleed widens the container to 1560px, which is the point of
   this band — but below 1200 its `100% - 2 * gutter` would eat 32px that the
   normal container keeps. Restore the normal container until the extra width
   is actually available. */
@media (max-width: 1199px) {
	.sf-channels.sf-section--bleed > .sf-container {
		max-width: calc(var(--sf-max) + 2 * var(--sf-gutter));
	}
}

/* --- Header: intro left, the two tier counts and the guides link right ---- */
.sf-channels .sf-chx__top {
	display: grid;
	gap: var(--sf-space-4);
	margin-bottom: var(--sf-space-5);
}
.sf-channels .sf-chx__intro .sf-lead { max-width: 68ch; }

@media (min-width: 1000px) {
	.sf-channels .sf-chx__top {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--sf-space-6);
		align-items: end;
		margin-bottom: var(--sf-space-5);
	}
}

.sf-chx__aside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sf-space-4) var(--sf-space-5);
}
@media (min-width: 1000px) {
	.sf-chx__aside {
		flex-direction: column;
		align-items: flex-end;
		gap: var(--sf-space-4);
		/* The header grid end-aligns this cell with the intro's box, which
		   puts the pill's text baseline ~7px above the lead's last-line
		   baseline (the pill's padding hangs below its text). Register the
		   two baselines instead of the two boxes. */
		margin-bottom: -7px;
	}
}
/* The FREE/PRO legend is anchored as one bordered chip on the heading's
   baseline row, not two badges floating in space. */
.sf-chx__tiers {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 7px 14px;
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .16);
	border-radius: 999px;
	box-shadow: var(--sf-e1);
}
.sf-chx__tier { display: inline-flex; align-items: center; gap: var(--sf-space-2); }
.sf-chx__tier + .sf-chx__tier {
	margin-inline-start: 12px;
	padding-inline-start: 14px;
	border-inline-start: 1px solid var(--sf-line);
}
.sf-chx__n {
	font-family: var(--sf-font-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--sf-brand-ink);
}
.sf-chx__link { margin-inline-end: -6px; }

/* --- Free pair: two product cards, then the Pro directory --------------- */

.sf-chx-featured {
	display: grid;
	gap: var(--sf-space-4);
	list-style: none;
	margin: 0 0 var(--sf-space-5);
	padding: 0;
}
@media (min-width: 800px) {
	.sf-chx-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sf-chx-feature {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-height: 100%;
	padding: 22px 22px 20px;
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .22);
	border-radius: var(--sf-r-xl);
	box-shadow: var(--sf-e2);
	color: inherit;
	text-decoration: none;
	transition: transform .16s var(--sf-ease), box-shadow .16s var(--sf-ease), border-color .16s var(--sf-ease);
}
a.sf-chx-feature:hover {
	transform: translateY(-2px);
	box-shadow: var(--sf-e3);
	border-color: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 55%, #fff);
	color: inherit;
}
.sf-chx-feature__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 16%, #fff);
	border: 1px solid color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 36%, #fff);
}
.sf-chx-feature__mark svg {
	width: 26px;
	height: 26px;
	color: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 70%, #0F172A);
}
.sf-chx-feature__body { min-width: 0; flex: 1 1 auto; }
.sf-chx-feature__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
}
.sf-chx-feature__name {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--sf-ink);
}
.sf-chx-feature__desc {
	display: block;
	margin-top: 8px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--sf-ink-2);
}
.sf-chx-feature__fmts {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 12px;
}

/* --- Pro catalogue: bento of family cards -------------------------------- */

.sf-chx-catalog { margin-top: var(--sf-space-2); }
.sf-chx-catalog__head {
	margin-bottom: var(--sf-space-5);
	max-width: 58ch;
}
.sf-chx-catalog__title {
	margin: 0;
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
	letter-spacing: -0.02em;
	color: var(--sf-ink);
}
.sf-chx-catalog__lead {
	margin: 8px 0 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--sf-ink-2);
}

.sf-chx-bento {
	display: grid;
	gap: var(--sf-space-4);
	grid-template-columns: 1fr;
}
@media (min-width: 700px) {
	.sf-chx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sf-chx-fam--google { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
	.sf-chx-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.sf-chx-fam--google { grid-column: 1 / 7; grid-row: 1; }
	.sf-chx-fam--social { grid-column: 7 / 13; grid-row: 1; }
	.sf-chx-fam--advertising { grid-column: 1 / 4; grid-row: 2; }
	.sf-chx-fam--marketplace { grid-column: 4 / 7; grid-row: 2; }
	.sf-chx-fam--ai { grid-column: 7 / 10; grid-row: 2; }
	.sf-chx-fam--custom { grid-column: 10 / 13; grid-row: 2; }
}

.sf-chx-fam {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .16);
	border-radius: var(--sf-r-xl);
	box-shadow: var(--sf-e2);
	overflow: hidden;
}
.sf-chx-fam__head {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: start;
	padding: 18px 18px 14px;
	background: linear-gradient(180deg, #F7F8FF 0%, #fff 100%);
	border-bottom: 1px solid rgba(79, 70, 229, .10);
}
.sf-chx-fam__glyph {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--sf-brand-tint);
	color: var(--sf-brand-ink);
}
.sf-chx-fam__glyph svg { width: 20px; height: 20px; }
.sf-chx-fam__titles { min-width: 0; padding-top: 2px; }
.sf-chx-fam__name {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--sf-ink);
}
.sf-chx-fam__blurb {
	margin: 4px 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--sf-muted);
}
.sf-chx-fam__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .16);
	font-family: var(--sf-font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--sf-brand-ink);
}

.sf-chx-fam__list {
	list-style: none;
	margin: 0;
	padding: 8px 10px 12px;
	flex: 1 1 auto;
}
.sf-chx-fam__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 40px;
	padding: 8px 10px;
	border-radius: 10px;
	background: #F7F8FF;
	border: 1px solid rgba(79, 70, 229, .08);
	color: inherit;
	text-decoration: none;
	transition: background .16s var(--sf-ease), border-color .16s var(--sf-ease);
}
.sf-chx-fam__list > li + li { margin-top: 6px; }
a.sf-chx-fam__item:hover {
	background: var(--sf-brand-tint);
	border-color: rgba(79, 70, 229, .18);
	color: inherit;
}
.sf-chx-fam__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-top: 1px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 14%, #fff);
	border: 1px solid color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 28%, #fff);
}
.sf-chx-fam__mark svg {
	width: 15px;
	height: 15px;
	color: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 70%, #0F172A);
}
.sf-chx-fam__item-body { min-width: 0; }
.sf-chx-fam__item-name {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.3;
	color: var(--sf-ink);
}
.sf-chx-fam__item-desc {
	display: block;
	margin-top: 4px;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--sf-muted);
}

@media (min-width: 700px) {
	.sf-chx-fam--google .sf-chx-fam__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
		padding: 10px 12px 14px;
	}
	.sf-chx-fam--google .sf-chx-fam__list > li + li { margin-top: 0; }
}
@media (min-width: 1100px) {
	.sf-chx-fam--social .sf-chx-fam__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
		align-content: center;
		flex: 1 1 auto;
		padding: 10px 12px 14px;
	}
	.sf-chx-fam--social .sf-chx-fam__list > li + li { margin-top: 0; }
	.sf-chx-fam--advertising .sf-chx-fam__list,
	.sf-chx-fam--marketplace .sf-chx-fam__list,
	.sf-chx-fam--spot .sf-chx-fam__list {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1 1 auto;
	}
	.sf-chx-fam--spot .sf-chx-fam__item {
		align-items: flex-start;
		padding: 12px;
	}
	.sf-chx-fam--spot .sf-chx-fam__mark {
		width: 36px;
		height: 36px;
		border-radius: 10px;
	}
	.sf-chx-fam--spot .sf-chx-fam__mark svg {
		width: 18px;
		height: 18px;
	}
}

/* Legacy chip/board rules kept inert; homepage uses .sf-chx-catalog now. */

.sf-chx-board__kicker {
	margin: 0;
	padding: 16px var(--sf-space-5) 4px;
	font-family: var(--sf-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sf-brand-ink);
}

.sf-chx-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sf-chx-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 8px 12px 8px 8px;
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .16);
	border-radius: 999px;
	box-shadow: var(--sf-e1);
	color: inherit;
	text-decoration: none;
	transition: transform .16s var(--sf-ease), box-shadow .16s var(--sf-ease), border-color .16s var(--sf-ease);
}
a.sf-chx-chip:hover {
	transform: translateY(-1px);
	box-shadow: var(--sf-e2);
	border-color: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 48%, #fff);
	color: inherit;
}
.sf-chx-chip__mark {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 16%, #fff);
	border: 1px solid color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 32%, #fff);
}
.sf-chx-chip__mark svg {
	width: 14px;
	height: 14px;
	color: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 65%, #0F172A);
}
.sf-chx-chip__name {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--sf-ink);
	white-space: nowrap;
}

/* Chip rows don't need the 148px label rail — the family name is a small
   caption above a wrapping pill row. */
@media (min-width: 900px) {
	.sf-chx-group:has(.sf-chx-chips) {
		display: grid;
		grid-template-columns: 132px minmax(0, 1fr);
		column-gap: var(--sf-space-5);
		align-items: center;
		padding: 14px var(--sf-space-5);
	}
	.sf-chx-group:has(.sf-chx-chips) .sf-chx-group__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		margin: 0;
		padding-top: 0;
	}
}

/* --- The directory: ONE panel, family rows separated by hairlines --------- */
.sf-chx-board {
	background: color-mix(in srgb, var(--sf-surface) 45%, var(--sf-surface-2));
	border: 1px solid rgba(79, 70, 229, .18);
	border-radius: var(--sf-r-xl);
	box-shadow: var(--sf-e2);
	overflow: hidden;
}
.sf-chx-group { padding: 14px var(--sf-space-4) var(--sf-space-4); }
.sf-chx-group + .sf-chx-group { border-top: 1px solid rgba(79, 70, 229, .12); }

.sf-chx-group__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 10px;
}
.sf-chx-group__label {
	margin: 0;
	font-family: var(--sf-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sf-brand-ink);
}
.sf-chx-group__n {
	font-family: var(--sf-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--sf-muted);
}
/* auto-fill (not auto-fit) keeps empty tracks, so every family shares the
   same column rhythm and a one-channel family stays one compact tile. */
.sf-chx-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sf-chx-row > li { display: flex; min-width: 0; }

/* ≥900px: label rail left, tiles right. The rail's top padding sets the
   label on the first tile row's name line. */
@media (min-width: 900px) {
	.sf-chx-group {
		display: grid;
		grid-template-columns: 148px minmax(0, 1fr);
		column-gap: var(--sf-space-5);
		align-items: start;
		padding: var(--sf-space-4) var(--sf-space-5);
	}
	.sf-chx-group__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		margin: 0;
		padding-top: 13px;
	}
	.sf-chx-group__label { line-height: 1.2; }
	/* A family's only channel gets a double track so its formats + tier mark
	   resolve on one line; ≥900px the grid always has at least two tracks. */
	.sf-chx-row > li:only-child { grid-column: span 2; }
}
/* Two tracks is also the cap on wide viewports: at span 3+ the lone
   AI-shopping and Custom tiles open a void between their left-anchored text
   and the right-anchored tier mark, instead of reading as one unit. */

/* Tiles in a row are equal height (grid stretch), so the internal anchors can
   be absolute: name on the top line, meta pinned to the bottom edge, icon chip
   centred on the row's vertical middle. A wrapped name then never pushes its
   badges/tier mark below the neighbours' meta line. */
.sf-chx-tile {
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
	gap: 12px;
	min-height: 62px;
	padding: 10px 12px;
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .16);
	border-radius: 12px;
	box-shadow: var(--sf-e1);
	color: inherit;
	text-decoration: none;
	transition: transform .16s var(--sf-ease), box-shadow .16s var(--sf-ease), border-color .16s var(--sf-ease);
}
a.sf-chx-tile:hover {
	transform: translateY(-1px);
	box-shadow: var(--sf-e2);
	border-color: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 48%, #fff);
	color: inherit;
}

.sf-chx-tile__mark {
	flex: none;
	align-self: center;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 16%, #fff);
	border: 1px solid color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 32%, #fff);
	transition: background .16s var(--sf-ease), border-color .16s var(--sf-ease);
}
.sf-chx-tile__mark svg {
	display: block;
	width: 18px;
	height: 18px;
	color: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 55%, #0F172A);
	transition: color .16s var(--sf-ease);
}
a.sf-chx-tile:hover .sf-chx-tile__mark {
	background: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 22%, #fff);
	border-color: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 50%, #fff);
}
a.sf-chx-tile:hover .sf-chx-tile__mark svg {
	color: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 78%, #0F172A);
}

.sf-chx-tile__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.sf-chx-tile__name {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--sf-ink);
}
/* Formats are micro-badges; the tier mark pins to the tile's right edge and
   the whole meta line pins to the tile's bottom edge, so every tile in a row
   shares the same anchor points whether or not its name wrapped. */
.sf-chx-tile__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin-top: auto;
	padding-top: 5px;
	min-width: 0;
}
.sf-chx-tile__fmts { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.sf-chx-tile__fmt {
	display: inline-block;
	padding: 2px 4px;
	border: 1px solid var(--sf-line);
	border-radius: 5px;
	background: var(--sf-surface);
	font-family: var(--sf-font-mono);
	font-size: 0.625rem;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0.02em;
	color: var(--sf-muted);
}
.sf-chx-tile__pro {
	font-family: var(--sf-font-mono);
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sf-accent, var(--sf-violet));
}
.sf-chx-tile__meta > .sf-badge,
.sf-chx-tile__meta > .sf-chx-tile__pro { margin-inline-start: auto; }
.sf-chx-tile--free {
	border-color: rgba(79, 70, 229, .7);
	background: linear-gradient(180deg, #fff 0%, #F5F3FF 100%);
	box-shadow: inset 3px 0 0 var(--sf-brand);
}
.sf-chx-tile .sf-badge {
	min-height: 18px;
	padding: 1px 7px;
	font-size: 0.625rem;
	letter-spacing: 0.05em;
}
.sf-chx-tile .sf-badge::before { display: none; }

@media (max-width: 599px) {
	.sf-chx-group { padding: 12px 12px 14px; }
	.sf-chx-tile { padding: 10px; gap: 10px; }
	.sf-chx-tile__name { font-size: 0.8125rem; }
}

/* ===========================================================================
 * 7. Free vs Pro
 * ======================================================================== */

.sf-compare .sf-cmp__head {
	display: grid;
	gap: var(--sf-space-4);
	margin-bottom: var(--sf-space-5);
}
.sf-compare .sf-cmp__head-lead { max-width: 46ch; }
@media (min-width: 900px) {
	.sf-compare .sf-cmp__head {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--sf-space-7);
		align-items: end;
	}
	.sf-compare .sf-cmp__head-lead { padding-bottom: 4px; }
}

/* The card. No inner padding: the table runs to the card's edges so the Pro
   column can be flush with them, and `overflow: hidden` makes the card clip
   the column to its own 24px radius. */
.sf-cmp .sf-cmp__wrap {
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .16);
	border-radius: var(--sf-r-xl);
	box-shadow: var(--sf-shadow-card);
	padding: 0;
	overflow: hidden;
}
.sf-cmp .sf-table { background: transparent; font-size: 0.9375rem; }
.sf-cmp .sf-table-wrap > table { min-width: 520px; }

.sf-cmp .sf-table th,
.sf-cmp .sf-table td {
	padding: 11px 18px;
	text-align: start;
	vertical-align: middle;
	border-bottom: 1px solid var(--sf-line);
}
/* Flush edges need their own inset back from the card border. */
.sf-cmp .sf-table th:first-child { padding-inline-start: var(--sf-space-5); }
.sf-cmp .sf-table th:last-child,
.sf-cmp .sf-table td:last-child { padding-inline-end: var(--sf-space-5); }

/* Header row: every column's content block is vertically centred in the cap
   ("Pro / everything in Free, plus" included), so the three columns share one
   optical centre instead of hanging from the first baseline. */
.sf-cmp .sf-table thead th,
.sf-cmp .sf-compare__summary th[scope="col"] {
	background: transparent;
	border-bottom: 1px solid var(--sf-line-strong);
	vertical-align: middle;
	padding-block: 16px;
}
.sf-cmp .sf-compare__tier {
	font-family: var(--sf-font-sans);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	text-transform: none;
	color: var(--sf-ink);
}
.sf-cmp .sf-compare__tier-note { color: var(--sf-muted); }

/* The Pro column is one violet lane from the top of the header to the bottom
   of the last row: a gradient cap, a tint at a saturation you can actually
   see, and a 2px rule down both edges so the eye tracks it top to bottom. */
.sf-cmp .sf-table thead .sf-table__col-pro {
	background: linear-gradient(135deg, #3730A3 0%, #4F46E5 52%, #6D28D9 100%);
	border: 0;
	border-radius: 0;
	box-shadow: inset 2px 0 0 var(--sf-violet), inset -2px 0 0 var(--sf-violet);
	color: #fff;
}
.sf-cmp .sf-table thead .sf-table__col-pro .sf-compare__tier { color: #fff; }
.sf-cmp .sf-table thead .sf-table__col-pro .sf-compare__tier-note { color: #EEF2FF; }

.sf-cmp .sf-table tbody .sf-compare__pro {
	background: linear-gradient(90deg, rgba(124, 58, 237, .13), rgba(99, 102, 241, .10));
	border-bottom-color: rgba(124, 58, 237, .22);
	box-shadow: inset 2px 0 0 var(--sf-violet), inset -2px 0 0 var(--sf-violet);
	color: var(--sf-ink);
	font-weight: 600;
}
.sf-cmp .sf-table tbody .sf-cmp__last .sf-compare__pro { border-bottom: 0; }

.sf-cmp .sf-table tbody th[scope="row"] { color: var(--sf-ink); font-weight: 600; }
.sf-cmp .sf-table tbody .sf-compare__free { color: var(--sf-ink-2); font-weight: 400; }
.sf-cmp .sf-table tbody tr:last-child th,
.sf-cmp .sf-table tbody tr:last-child .sf-compare__free { border-bottom: 0; }

/* Hover has to survive the Pro column's own fill. */
.sf-cmp .sf-table tbody tr:hover th,
.sf-cmp .sf-table tbody tr:hover td { background: rgba(79, 70, 229, .05); }
.sf-cmp .sf-table tbody tr:hover .sf-compare__pro {
	background: linear-gradient(90deg, rgba(124, 58, 237, .2), rgba(99, 102, 241, .16));
}

@media (min-width: 760px) {
	.sf-cmp .sf-table th[scope="row"] { width: 27%; }
	.sf-cmp .sf-table .sf-compare__free { width: 30%; }
	.sf-cmp .sf-table .sf-compare__pro { width: 43%; }
	/* Uniform row height: a one-line row and its neighbours share it, a
	   wrapped row still grows. (height on a table cell acts as min-height.) */
	.sf-cmp .sf-table tbody th,
	.sf-cmp .sf-table tbody td { height: 48px; }
	/* The lane's own 2px rules sit inside the cell, so its text needs the
	   inset back. */
	.sf-cmp .sf-table .sf-compare__pro,
	.sf-cmp .sf-table thead .sf-table__col-pro { padding-inline-start: 22px; }
}

/* The mobile key labels only exist below 760px, where the column headers are
   no longer above the value. */
.sf-cmp .sf-cmp__k { display: none; }

/* ---------------------------------------------------------------------------
 * Below 760px three text columns cannot share the width without shredding the
 * Pro values into one word per line, and a horizontally scrolling comparison
 * is worse than no comparison. Each row becomes a block: the feature name, then
 * the two tier values side by side, Pro still the accented one, with the same
 * 2px violet edge the desktop lane has.
 *
 * Overriding `display` on table elements drops their implicit ARIA roles, so
 * compare.php declares table/rowgroup/row/rowheader/columnheader/cell
 * explicitly and the header row is only visually hidden — never display:none —
 * so a screen reader keeps the full table.
 * ------------------------------------------------------------------------ */
@media (max-width: 759px) {
	.sf-cmp .sf-cmp__wrap { overflow: visible; padding: var(--sf-space-2) var(--sf-space-4) var(--sf-space-4); }
	.sf-cmp .sf-table,
	.sf-cmp .sf-table tbody,
	.sf-cmp .sf-table tr,
	.sf-cmp .sf-table th,
	.sf-cmp .sf-table td { display: block; width: auto; }
	.sf-cmp .sf-table-wrap > table { min-width: 0; }

	.sf-cmp .sf-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.sf-cmp .sf-table tbody tr {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sf-space-2);
		padding: var(--sf-space-3) 0 var(--sf-space-4);
		border-bottom: 1px solid var(--sf-line);
	}
	.sf-cmp .sf-table tbody tr:first-child { padding-top: var(--sf-space-2); }
	.sf-cmp .sf-table tbody tr:last-child { border-bottom: 0; padding-bottom: var(--sf-space-2); }

	.sf-cmp .sf-table tbody th[scope="row"] {
		grid-column: 1 / -1;
		padding: 0 0 10px;
		border: 0;
		font-size: 0.9375rem;
		font-weight: 700;
		letter-spacing: -0.01em;
	}

	.sf-cmp .sf-table tbody td {
		padding: 10px 12px;
		border: 0;
		border-radius: var(--sf-r-sm);
		font-size: 0.8125rem;
		line-height: 1.45;
	}
	/* A transparent edge of the same width keeps the two tiles on one
	   baseline: the Pro tile's violet edge would otherwise offset it. */
	.sf-cmp .sf-table tbody .sf-compare__free {
		background: var(--sf-ground-1);
		border-inline-start: 2px solid transparent;
		box-shadow: none;
	}
	.sf-cmp .sf-table tbody .sf-compare__pro,
	.sf-cmp .sf-table tbody .sf-cmp__last .sf-compare__pro {
		background: linear-gradient(160deg, rgba(124, 58, 237, .15), rgba(99, 102, 241, .09));
		border-inline-start: 2px solid var(--sf-violet);
		border-radius: var(--sf-r-sm);
		box-shadow: none;
	}
	.sf-cmp .sf-table tbody tr:hover th,
	.sf-cmp .sf-table tbody tr:hover td { background: none; }
	.sf-cmp .sf-table tbody tr:hover .sf-compare__free { background: var(--sf-ground-1); }
	.sf-cmp .sf-table tbody tr:hover .sf-compare__pro {
		background: linear-gradient(160deg, rgba(124, 58, 237, .15), rgba(99, 102, 241, .09));
	}

	.sf-cmp .sf-cmp__k {
		display: block;
		margin-bottom: 5px;
		font-family: var(--sf-font-mono);
		font-size: 0.625rem;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.09em;
		text-transform: uppercase;
	}
	.sf-cmp .sf-compare__free .sf-cmp__k { color: var(--sf-muted); }
	.sf-cmp .sf-compare__pro .sf-cmp__k { color: var(--sf-accent-ink); }
}

/* Footnote and the link to the full matrix, on one line under the card. */
.sf-compare .sf-cmp__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sf-space-4) var(--sf-space-6);
	margin-top: var(--sf-space-5);
}
.sf-compare .sf-cmp__notes {
	flex: 1 1 30rem;
	max-width: 76ch;
	margin: 0;
	/* The note's text edge lines up with the table's Feature-column text
	   (var(--sf-space-5) inset); the marker hangs in the remaining gutter. */
	margin-inline-start: calc(var(--sf-space-5) - 1.3em);
	padding-inline-start: 1.3em;
	color: var(--sf-ink-2);
	font-size: var(--sf-text-small);
	line-height: 1.55;
}
.sf-compare .sf-cmp__notes li::marker { color: var(--sf-muted); }
.sf-compare .sf-cmp__cta { flex: none; }
.sf-compare .sf-footnote-ref {
	margin-inline-start: 3px;
	color: var(--sf-brand);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.sf-compare .sf-footnote-ref sup { font-size: 0.7em; font-weight: 700; }
.sf-compare .sf-footnote-ref:hover sup,
.sf-compare .sf-footnote-ref:focus-visible sup { text-decoration: underline; }

/* Decoration and motion are optional by contract. */
@media (prefers-reduced-motion: reduce) {
	.sf-chx-tile,
	.sf-chx-tile__mark,
	.sf-chx-tile__mark svg,
	.sf-chx-fam__item,
	.sf-chx-feature { transition: none; }
	a.sf-chx-tile:hover,
	a.sf-chx-feature:hover { transform: none; }
}