/*!
 * SVMPForge — pages.css
 * Page-specific styles for the Pricing, Features, Free vs Pro and Channels
 * templates. Depends on main.css tokens and components; enqueued only by
 * those templates (handle: svmpforge-pages).
 *
 * INDEX
 *  01 Shared         .sf-subnav (sticky anchor chips) .sf-checklist .sf-chips .sf-page-facts
 *  02 Pricing        product shell: .sf-pr-hero, .sf-pricing__flow, chapters
 *  03 Features       .sf-feature sections, mini tables, graphics slots
 *  04 Compare        product shell: .sf-cmp-hero, sticky chips, 76-row matrix
 *  05 Channels       .sf-filter radio chips (pure CSS), .sf-channel cards
 *  06 Section bands  per-band spacing resets for the alternating page tones
 */

/* ==========================================================================
   01 Shared
   ========================================================================== */

/* Mono fact row under a page header ("2 channels free · 19 in Pro") */
.sf-page-facts { margin-top: var(--sf-space-4); }
.sf-page-header + .sf-page-facts { margin-top: calc(-1 * var(--sf-space-3)); margin-bottom: var(--sf-space-6); }

/* Sticky in-page navigation: chips in a horizontally scrollable row. Never
   wider than the container, so the page itself never scrolls sideways. */
.sf-subnav { position: sticky; top: var(--sf-header-h); z-index: 50; margin-inline: calc(-1 * var(--sf-gutter)); padding-inline: var(--sf-gutter); background: var(--sf-paper); border-bottom: var(--sf-border); }
.sf-subnav__list { display: flex; gap: 6px; list-style: none; margin: 0; padding: 10px 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sf-subnav__list::-webkit-scrollbar { display: none; }
.sf-subnav__list li { flex: none; }
.sf-subnav__link { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border: 1px solid var(--sf-line); border-radius: 999px; background: var(--sf-surface); color: var(--sf-ink-2); font-size: 0.8125rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.sf-subnav__link:hover { border-color: var(--sf-line-strong); color: var(--sf-ink); }
.sf-subnav__link.is-active, .sf-subnav__link[aria-current] { background: var(--sf-grad-brand, var(--sf-brand)); border-color: transparent; color: #fff; }
.sf-subnav__num { font-family: var(--sf-font-mono); font-size: 0.6875rem; color: var(--sf-muted); }
.sf-subnav__link.is-active .sf-subnav__num, .sf-subnav__link[aria-current] .sf-subnav__num { color: var(--sf-brand-tint); }
@media (min-width: 900px) { .sf-subnav__list { padding: 12px 0; } }

/* Two-column checklist ("Every plan includes") */
.sf-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px var(--sf-space-6); }
.sf-checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: var(--sf-border); color: var(--sf-ink-2); font-size: 0.9375rem; }
.sf-checklist li .sf-check { flex: none; margin-top: 2px; }
@media (min-width: 600px) { .sf-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Chip cloud (channel names with identity dots, format tags) */
.sf-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sf-chips li, .sf-chips__item { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 10px; border: var(--sf-border); border-radius: 999px; background: var(--sf-surface); font-size: 0.8125rem; color: var(--sf-ink); }
.sf-chips .sf-dot { margin-inline-end: 0; }
.sf-chips .sf-badge { margin-inline-start: 2px; }

/* Definition list stacked (facts inside cards) */
.sf-dl--stack { grid-template-columns: 1fr; gap: 2px; }
.sf-dl--stack dd + dt { margin-top: var(--sf-space-3); }

/* ==========================================================================
   02 Pricing — product shell
   --------------------------------------------------------------------------
   Dark split hero (facts + section map) → canvas of chapter cards. Plan
   cards still get homepage structure from .sf-pricing-section (d-pricing).
   ========================================================================== */
.sf-pricing-page .sf-pr-hero {
	padding-block: clamp(36px, 4.5vw, 64px) clamp(40px, 5vw, 72px);
}
.sf-pr-hero__grid { align-items: center; }
@media (min-width: 600px) and (max-width: 899px) {
	.sf-pr-hero__grid { grid-template-columns: 1fr; }
}
.sf-pr-hero__copy { min-width: 0; }
.sf-pr-hero__head {
	display: block;
	max-width: 38rem;
	margin-bottom: 0;
}
.sf-pr-hero__head .sf-h1 {
	font-size: clamp(2.35rem, 1.5rem + 2.6vw, 3.55rem);
	letter-spacing: -0.04em;
	color: #fff;
}
.sf-pr-hero__head .sf-lead {
	margin-top: var(--sf-space-4);
	max-width: 48ch;
	font-size: 1.0625rem;
}
.sf-pr-hero__facts { margin-top: var(--sf-space-5); }
.sf-pr-hero__actions { margin-top: var(--sf-space-6); }
.sf-pr-hero .sf-btn--secondary {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .16);
	color: #fff;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.sf-pr-hero .sf-btn--secondary:hover {
	background: rgba(255, 255, 255, .13);
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
}
.sf-pr-hero .sf-fx-map a.sf-fx-map__card { color: var(--sf-ink); }

.sf-pricing__flow {
	background:
		radial-gradient(900px 420px at 8% 0%, rgba(99, 102, 241, .08), transparent 70%),
		radial-gradient(700px 380px at 100% 12%, rgba(124, 58, 237, .06), transparent 70%),
		var(--sf-ground-2, #F3F4FB);
	padding-block: clamp(24px, 3vw, 40px) clamp(40px, 5vw, 72px);
}
.sf-pr-chapter {
	background: #fff;
	border: 1px solid rgba(79, 70, 229, .14);
	border-radius: 24px;
	box-shadow: var(--sf-e2, var(--sf-shadow-card));
	padding: clamp(22px, 3vw, 40px);
	margin-bottom: 20px;
	scroll-margin-top: calc(var(--sf-header-h) + 24px);
	overflow: visible;
}
.sf-pr-chapter:last-of-type { margin-bottom: 0; }

.sf-pricing-page .sf-pricing { margin-top: 0; }
.sf-pricing-page .sf-home-plans { padding-top: 16px; }
.sf-pricing-page .sf-pricing__card--featured .sf-pricing__flag { z-index: 1; }
.sf-pricing-page .sf-pr-chapter.sf-pricing-section { padding-bottom: clamp(22px, 3vw, 40px); }

/* "Not ready for Pro?" free plan strip */
.sf-free-strip { display: grid; gap: var(--sf-space-3); margin-top: var(--sf-space-5); padding: var(--sf-space-4) var(--sf-space-5); border: var(--sf-border); border-radius: var(--sf-r); background: var(--sf-surface); }
.sf-free-strip__text { color: var(--sf-ink-2); font-size: 0.9375rem; }
.sf-free-strip__text strong { color: var(--sf-ink); }
@media (min-width: 900px) { .sf-free-strip { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* Every plan includes */
.sf-includes { margin-top: 0; padding-top: 0; border-top: 0; }
.sf-includes__head { max-width: 62ch; margin-bottom: var(--sf-space-5); }
.sf-includes__head p { margin-top: var(--sf-space-3); color: var(--sf-ink-2); }

/* Licence facts: three cards */
.sf-licence-facts { margin-top: 0; padding-top: 0; border-top: 0; }
.sf-licence-facts .sf-card { display: flex; flex-direction: column; }
.sf-licence-facts .sf-card p + p { margin-top: var(--sf-space-3); }
.sf-licence-facts .sf-card__footer { margin-top: auto; padding-top: var(--sf-space-4); }
.sf-licence-facts .sf-card__footer a { font-weight: 600; font-size: var(--sf-text-small); }

/* Pricing FAQ */
.sf-pricing-faq { margin-top: 0; padding-top: 0; border-top: 0; }
.sf-pricing-faq .sf-faq { margin-top: var(--sf-space-5); }
.sf-pricing-page .sf-pr-chapter.sf-faq-section .sf-faq {
	margin-top: var(--sf-space-4);
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}
.sf-pricing-faq__more { margin-top: var(--sf-space-4); font-size: var(--sf-text-small); color: var(--sf-muted); }

/* ==========================================================================
   03 Features — product shell
   --------------------------------------------------------------------------
   Dark cinematic hero (metrics + jump map) → sticky index rail + chapter
   canvas. Layout types: cinema (full-width mockup), wall (channel grid),
   bento (format cards), spec (copy + table).
   ========================================================================== */

.sf-features .sf-fx-hero {
	padding-block: clamp(36px, 4.5vw, 64px) clamp(40px, 5vw, 72px);
}
.sf-fx-hero__grid { align-items: center; }
@media (min-width: 600px) and (max-width: 899px) {
	.sf-fx-hero__grid { grid-template-columns: 1fr; }
}
.sf-fx-hero__copy { min-width: 0; }
.sf-fx-hero__head {
	display: block;
	max-width: 38rem;
	margin-bottom: 0;
}
.sf-fx-hero__head .sf-h1 {
	font-size: clamp(2.35rem, 1.5rem + 2.6vw, 3.55rem);
	letter-spacing: -0.04em;
	color: #fff;
}
.sf-fx-hero__head .sf-lead {
	margin-top: var(--sf-space-4);
	max-width: 48ch;
	font-size: 1.0625rem;
}

.sf-fx-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	list-style: none;
	margin: var(--sf-space-6) 0 0;
	padding: 0;
}
.sf-fx-metrics li {
	padding: 14px 16px;
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 16px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.sf-fx-metrics__value {
	display: block;
	font-family: var(--sf-font-display);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: #fff;
}
.sf-fx-metrics__label {
	display: block;
	margin-top: 4px;
	font-family: var(--sf-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sf-on-dark-muted);
}
@media (max-width: 419px) {
	.sf-fx-metrics { grid-template-columns: 1fr; }
}

.sf-fx-hero__actions { margin-top: var(--sf-space-6); }
.sf-fx-hero .sf-btn--secondary {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .16);
	color: #fff;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.sf-fx-hero .sf-btn--secondary:hover {
	background: rgba(255, 255, 255, .13);
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
}

/* Right-hand directory: light admin window on the dark hero, same role as
   the homepage product shot. */
.sf-fx-map { min-width: 0; }
.sf-fx-map__panel {
	margin: 0;
	box-shadow: var(--sf-shadow-window, 0 24px 48px -24px rgba(15, 18, 40, .55));
}
.sf-fx-map__list {
	display: grid;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sf-fx-map__list li { min-width: 0; }
.sf-fx-map__list li + li .sf-fx-map__card {
	border-top: 1px solid var(--sf-line);
}
.sf-fx-hero .sf-fx-map a.sf-fx-map__card { color: var(--sf-ink); }
.sf-fx-map__card {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 14px;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	text-decoration: none;
	transition: background .16s var(--sf-ease);
}
.sf-fx-map__num {
	font-family: var(--sf-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--sf-brand);
}
.sf-fx-map__name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sf-ink);
	line-height: 1.25;
}
.sf-fx-map__count {
	font-family: var(--sf-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--sf-muted);
	font-variant-numeric: tabular-nums;
}
.sf-fx-map__card:hover,
.sf-fx-map__card:focus-visible,
.sf-fx-map__list li:first-child .sf-fx-map__card:hover,
.sf-fx-map__list li:first-child .sf-fx-map__card:focus-visible {
	background: var(--sf-brand-tint, #EEF2FF);
	transform: none;
}
.sf-fx-map__list li:first-child .sf-fx-map__card {
	background: linear-gradient(90deg, rgba(79, 70, 229, .06), transparent 70%);
}
@media (min-width: 520px) {
	.sf-fx-map__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sf-fx-map__list li:nth-child(2) .sf-fx-map__card { border-top: 0; }
	.sf-fx-map__list li:nth-child(odd) .sf-fx-map__card {
		border-inline-end: 1px solid var(--sf-line);
	}
}

/* --- Flow: rail + canvas (not full-bleed alternating bands) ------------- */
.sf-features__flow {
	background:
		radial-gradient(900px 420px at 8% 0%, rgba(99, 102, 241, .08), transparent 70%),
		radial-gradient(700px 380px at 100% 12%, rgba(124, 58, 237, .06), transparent 70%),
		var(--sf-ground-2, #F3F4FB);
	padding-bottom: clamp(40px, 5vw, 72px);
}
.sf-features__canvas {
	padding-inline: var(--sf-gutter);
	padding-top: 12px;
	min-width: 0;
}
.sf-fx-rail { display: none; }

.sf-features .sf-fx-nav {
	position: sticky;
	top: var(--sf-header-h);
	z-index: 50;
	margin: 0 calc(-1 * var(--sf-gutter)) 16px;
	padding-inline: var(--sf-gutter);
	background: color-mix(in srgb, var(--sf-paper) 78%, #fff);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(79, 70, 229, .12);
	box-shadow: 0 8px 24px -20px rgba(30, 27, 75, .35);
}
.sf-fx-nav .sf-subnav__list { padding: 10px 0; gap: 8px; }
.sf-fx-nav .sf-subnav__link {
	min-height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	box-shadow: var(--sf-e1);
	transition: background .16s var(--sf-ease), color .16s var(--sf-ease), border-color .16s var(--sf-ease), transform .16s var(--sf-ease);
}
.sf-fx-nav .sf-subnav__link:hover { transform: translateY(-1px); }

@media (min-width: 1100px) {
	.sf-features__flow {
		display: grid;
		grid-template-columns:
			minmax(var(--sf-gutter), 1fr)
			208px
			minmax(0, var(--sf-max))
			minmax(var(--sf-gutter), 1fr);
		column-gap: 40px;
		align-items: start;
		padding: 40px 0 72px;
	}
	.sf-features__canvas { grid-column: 3; padding: 0; }
	.sf-features .sf-fx-nav { display: none; }
	.sf-fx-rail {
		display: block;
		grid-column: 2;
		position: sticky;
		top: calc(var(--sf-header-h) + 20px);
		max-height: calc(100vh - var(--sf-header-h) - 40px);
		overflow-y: auto;
		padding-block: 4px 24px;
	}
}

.sf-fx-rail__label {
	margin: 0 0 12px;
	font-family: var(--sf-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sf-muted);
}
.sf-fx-rail__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-inline-start: 1px solid rgba(79, 70, 229, .18);
}
.sf-fx-rail__list a {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 8px;
	align-items: baseline;
	padding: 7px 10px 7px 14px;
	margin-inline-start: -1px;
	border-inline-start: 2px solid transparent;
	color: var(--sf-ink-2);
	font-size: 0.8125rem;
	line-height: 1.35;
	text-decoration: none;
	border-radius: 0 8px 8px 0;
}
.sf-fx-rail__list a:hover { color: var(--sf-ink); background: rgba(79, 70, 229, .05); }
.sf-fx-rail__list a.is-active,
.sf-fx-rail__list a[aria-current] {
	color: var(--sf-brand);
	font-weight: 600;
	border-inline-start-color: var(--sf-brand);
	background: color-mix(in srgb, var(--sf-brand) 8%, transparent);
}
.sf-fx-rail__num {
	font-family: var(--sf-font-mono);
	font-size: 0.6875rem;
	color: var(--sf-muted);
}
.sf-fx-rail__list a.is-active .sf-fx-rail__num,
.sf-fx-rail__list a[aria-current] .sf-fx-rail__num { color: var(--sf-brand); }

/* --- Chapters ----------------------------------------------------------- */
.sf-fx {
	scroll-margin-top: calc(var(--sf-header-h) + 72px);
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .14);
	border-radius: 24px;
	box-shadow: var(--sf-e2, var(--sf-shadow-card));
	padding: clamp(22px, 3vw, 40px);
	margin-bottom: 20px;
}
.sf-fx:last-of-type { margin-bottom: 0; }
@media (min-width: 1100px) {
	.sf-fx { scroll-margin-top: calc(var(--sf-header-h) + 24px); }
}

.sf-fx__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--sf-space-3);
	font-family: var(--sf-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sf-ink-2);
}
.sf-fx__num {
	display: inline-grid;
	place-items: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border-radius: 10px;
	background: var(--sf-grad-brand);
	color: #fff;
	letter-spacing: 0;
	font-weight: 600;
}
.sf-fx .sf-h2,
.sf-fx__mast .sf-h2 {
	margin: 0;
	font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.15rem);
	letter-spacing: -0.03em;
}
.sf-fx__text {
	margin-top: var(--sf-space-4);
	color: var(--sf-ink-2);
	font-size: 1.0625rem;
	line-height: 1.65;
	max-width: 62ch;
}
.sf-fx__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sf-space-4); }

.sf-fx__stage { min-width: 0; position: relative; margin-top: var(--sf-space-5); }
.sf-fx__frame {
	position: relative;
	border-radius: 20px;
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .14);
	box-shadow: var(--sf-e3, var(--sf-shadow-card));
	overflow: hidden;
}
.sf-fx__frame::after {
	content: "";
	position: absolute;
	inset: auto 8% -30% 8%;
	height: 55%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(124, 92, 255, .28), transparent 70%);
	filter: blur(40px);
	pointer-events: none;
}
.sf-fx__frame--pad { padding: var(--sf-space-5); }
.sf-fx__frame--dark {
	background: var(--sf-dark);
	color: var(--sf-on-dark);
	border-color: transparent;
}
.sf-fx__frame--dark::after { content: none; }
.sf-fx__frame--dark .sf-runbox {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.sf-fx__frame .sf-window { border: 0; box-shadow: none; border-radius: 0; }
.sf-fx__frame .sf-feature__window { max-width: none; }

.sf-fx__sheet { margin-top: var(--sf-space-5); }
.sf-fx__sheet-kicker {
	margin: 0 0 10px;
	font-family: var(--sf-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sf-brand-ink);
}

/* Cinema: intro, then mockup flush to the card, then the sheet. */
.sf-fx--cinema {
	padding: clamp(22px, 3vw, 36px) 0 0;
	overflow: hidden;
}
.sf-fx--cinema .sf-fx__mast { padding-inline: clamp(22px, 3vw, 40px); max-width: 54rem; }
.sf-fx--cinema .sf-fx__stage { margin-top: 28px; }
.sf-fx--cinema .sf-fx__frame {
	border-radius: 0;
	border-inline: 0;
	border-bottom: 0;
	box-shadow: none;
}
.sf-fx--cinema .sf-fx__frame--dark {
	background: var(--sf-dark);
}
.sf-fx--cinema .sf-fx__sheet {
	padding: 24px clamp(22px, 3vw, 40px) 32px;
	margin-top: 0;
	background: linear-gradient(180deg, #F7F8FF 0%, #fff 40%);
	border-top: 1px solid rgba(79, 70, 229, .12);
}

/* Wall: channel grid is the section. */
.sf-fx--wall .sf-fx__mast { max-width: 54rem; }
.sf-fx--wall .sf-fx__stage { margin-top: var(--sf-space-5); }
.sf-chips--wall {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}
.sf-chips--wall li {
	min-height: 56px;
	padding: 12px 14px 12px 10px;
	border-radius: 14px;
	box-shadow: var(--sf-e1);
}

/* Bento: format cards, Free formats span wider. */
.sf-fx--bento .sf-fx__mast { max-width: 54rem; }
.sf-format-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.sf-format-grid__item {
	padding: 16px 16px 14px;
	border: 1px solid rgba(79, 70, 229, .14);
	border-radius: 16px;
	background: linear-gradient(180deg, #fff 0%, #F7F8FF 100%);
	box-shadow: var(--sf-e1);
	transition: transform .16s var(--sf-ease), box-shadow .16s var(--sf-ease);
}
.sf-format-grid__item:hover { transform: translateY(-2px); box-shadow: var(--sf-e2); }
.sf-format-grid__name {
	font-family: var(--sf-font-mono);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--sf-ink);
}
.sf-format-grid__for { margin-top: 6px; font-size: 0.8125rem; line-height: 1.45; color: var(--sf-ink-2); }
.sf-format-grid__item .sf-badge { margin-top: 12px; }
.sf-format-grid--bento {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.sf-format-grid--bento .sf-format-grid__item {
	min-height: 148px;
	padding: 22px 20px 18px;
}
.sf-format-grid--bento .sf-format-grid__name { font-size: 1.5rem; }
@media (min-width: 720px) {
	.sf-format-grid--bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.sf-format-grid--bento .sf-format-grid__item { grid-column: span 2; min-height: 156px; }
	.sf-format-grid--bento .sf-format-grid__item--free { grid-column: span 3; min-height: 176px; }
}

/* Spec: copy and table as peers — no fake screenshot. */
@media (min-width: 900px) {
	.sf-fx--spec {
		display: grid;
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		gap: clamp(28px, 4vw, 48px);
		align-items: start;
	}
	.sf-fx--spec .sf-fx__mast { max-width: none; }
	.sf-fx--spec .sf-fx__sheet { margin-top: 0; }
	.sf-fx--spec .sf-fx__text { max-width: none; }
}

.sf-feature__table .sf-table thead th { position: static; }
.sf-feature__table .sf-table th, .sf-feature__table .sf-table td { padding: 10px 14px; font-size: 0.875rem; overflow-wrap: normal; }
.sf-feature__table .sf-table-wrap > table { min-width: 0; }
.sf-feature__table .sf-table__col-free, .sf-feature__table .sf-table__col-pro { width: 120px; min-width: 104px; }
.sf-feature__table .sf-cell-text { white-space: nowrap; }
@media (max-width: 599px) {
	.sf-feature__table .sf-table__col-free, .sf-feature__table .sf-table__col-pro { width: 84px; min-width: 76px; }
	.sf-feature__table .sf-cell-text { white-space: normal; }
	.sf-feature__table .sf-table--tight th, .sf-feature__table .sf-table--tight td { padding: 8px 10px; }
}
.sf-feature__table .sf-check, .sf-compare-table .sf-check { color: var(--sf-brand); }
.sf-feature__table .sf-table .sf-table__group th, .sf-compare-table .sf-table .sf-table__group th,
.sf-feature__table .sf-table tbody tr.sf-table__group:hover th, .sf-compare-table .sf-table tbody tr.sf-table__group:hover th { background: var(--sf-surface-2); color: var(--sf-brand-ink); }
.sf-fx__frame .sf-mock-table th, .sf-fx__frame .sf-mock-table td,
.sf-fx__frame .sf-mock-select, .sf-fx__frame .sf-chip { overflow-wrap: normal; }

.sf-features__foot { margin-top: var(--sf-space-8); }
.sf-feature .sf-batches,
.sf-fx .sf-batches { margin-top: 0; }
.sf-feature__window { max-width: 560px; }
.sf-feature__window .sf-mock-url { flex-wrap: wrap; }
.sf-feature__window .sf-mock-url code { flex-basis: 100%; }
@media (min-width: 600px) {
	.sf-feature__window .sf-mock-url { flex-wrap: nowrap; }
	.sf-feature__window .sf-mock-url code { flex-basis: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.sf-fx-nav .sf-subnav__link,
	.sf-fx-nav .sf-subnav__link:hover,
	.sf-fx-map__card,
	.sf-fx-map__card:hover,
	.sf-format-grid__item,
	.sf-format-grid__item:hover { transform: none; transition: none; }
}

/* ==========================================================================
   04 Compare — product shell
   --------------------------------------------------------------------------
   Dark split hero (counts + group map) → sticky group chips → 76-row matrix
   on a tinted canvas. Table facts, order and wording are unchanged.
   ========================================================================== */
.sf-compare-page .sf-cmp-hero {
	padding-block: clamp(36px, 4.5vw, 64px) clamp(40px, 5vw, 72px);
}
.sf-cmp-hero__grid { align-items: center; }
@media (min-width: 600px) and (max-width: 899px) {
	.sf-cmp-hero__grid { grid-template-columns: 1fr; }
}
.sf-cmp-hero__copy { min-width: 0; }
.sf-cmp-hero__head {
	display: block;
	max-width: 38rem;
	margin-bottom: 0;
}
.sf-cmp-hero__head .sf-h1 {
	font-size: clamp(2.35rem, 1.5rem + 2.6vw, 3.55rem);
	letter-spacing: -0.04em;
	color: #fff;
}
.sf-cmp-hero__head .sf-lead {
	margin-top: var(--sf-space-4);
	max-width: 48ch;
	font-size: 1.0625rem;
}
.sf-cmp-hero__note {
	margin: var(--sf-space-4) 0 0;
	max-width: 54ch;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--sf-on-dark-muted);
}
.sf-cmp-hero__actions { margin-top: var(--sf-space-6); }
.sf-cmp-hero .sf-btn--secondary {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .16);
	color: #fff;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.sf-cmp-hero .sf-btn--secondary:hover {
	background: rgba(255, 255, 255, .13);
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
}
.sf-cmp-hero .sf-fx-map a.sf-fx-map__card { color: var(--sf-ink); }

.sf-compare__flow {
	background:
		radial-gradient(900px 420px at 8% 0%, rgba(99, 102, 241, .08), transparent 70%),
		radial-gradient(700px 380px at 100% 12%, rgba(124, 58, 237, .06), transparent 70%),
		var(--sf-ground-2, #F3F4FB);
	padding-block: clamp(16px, 2.4vw, 28px) clamp(40px, 5vw, 72px);
}
.sf-compare-page .sf-cmp-nav {
	position: sticky;
	top: var(--sf-header-h);
	z-index: 50;
	margin: 0 calc(-1 * var(--sf-gutter)) 16px;
	padding-inline: var(--sf-gutter);
	background: color-mix(in srgb, var(--sf-paper) 78%, #fff);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(79, 70, 229, .12);
	box-shadow: 0 8px 24px -20px rgba(30, 27, 75, .35);
}
.sf-compare-page .sf-cmp-nav .sf-subnav__list { padding: 10px 0; gap: 8px; }

/* The 76-row table: fits 360px without scrolling (narrow tier columns);
   the header sticks under the site header from 900px. */
.sf-compare-table.sf-table-wrap { overflow-x: auto; }
.sf-compare-table.sf-table-wrap > table { min-width: 0; }
.sf-compare-table .sf-table th, .sf-compare-table .sf-table td { padding: 11px 10px; overflow-wrap: normal; }
.sf-compare-table .sf-table tbody th { padding-inline-start: 14px; }
.sf-compare-table .sf-table__col-free, .sf-compare-table .sf-table__col-pro { width: 78px; min-width: 64px; }
.sf-compare-table .sf-table thead th { vertical-align: bottom; padding-block: 12px; }
.sf-compare-table .sf-table thead th:first-child { padding-inline-start: 14px; }
.sf-compare-table .sf-table__group th { padding-inline-start: 14px; scroll-margin-top: calc(var(--sf-header-h) + 8px); }
.sf-compare-table .sf-table__group { scroll-margin-top: calc(var(--sf-header-h) + 8px); }
.sf-compare__tier { display: block; font-family: var(--sf-font-sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--sf-ink); }
.sf-compare__price { display: block; margin-top: 2px; font-family: var(--sf-font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--sf-muted); white-space: normal; }
.sf-table thead .sf-table__col-pro .sf-compare__tier { color: var(--sf-accent-ink); }
.sf-table thead .sf-table__col-pro .sf-compare__price { color: var(--sf-accent-ink); }
.sf-compare-table .sf-table__group th a { color: inherit; text-decoration: none; }
.sf-compare-table .sf-table__group th a:hover { color: var(--sf-brand); }
.sf-compare-table .sf-table__group th .sf-subnav__num { margin-inline-end: 10px; }
@media (min-width: 600px) {
	.sf-compare-table .sf-table th, .sf-compare-table .sf-table td { padding: 12px 16px; }
	.sf-compare-table .sf-table__col-free, .sf-compare-table .sf-table__col-pro { width: 22%; min-width: 120px; }
	.sf-compare-table .sf-table thead th:first-child, .sf-compare-table .sf-table tbody th, .sf-compare-table .sf-table__group th { padding-inline-start: 16px; }
}
@media (min-width: 900px) {
	.sf-compare-table.sf-table-wrap { overflow: visible; }
	.sf-compare-table .sf-table thead th { position: sticky; top: var(--sf-header-h); z-index: 2; background: var(--sf-surface); box-shadow: 0 1px 0 var(--sf-line), 0 8px 16px -10px rgba(15, 23, 42, .10); border-bottom: 0; }
	.sf-compare-table .sf-table thead th:first-child { border-start-start-radius: var(--sf-r); }
	.sf-compare-table .sf-table thead th:last-child { border-start-end-radius: var(--sf-r); }
	.sf-compare-table .sf-table__group, .sf-compare-table .sf-table__group th { scroll-margin-top: calc(var(--sf-header-h) + 64px); }
	.sf-compare-page .sf-compare-table .sf-table thead th { top: calc(var(--sf-header-h) + 52px); }
	.sf-compare-page .sf-compare-table .sf-table__group,
	.sf-compare-page .sf-compare-table .sf-table__group th { scroll-margin-top: calc(var(--sf-header-h) + 72px); }
}
.sf-compare__foot { margin-top: var(--sf-space-8); }
.sf-compare__legend { display: flex; flex-wrap: wrap; gap: var(--sf-space-2) var(--sf-space-5); margin-top: var(--sf-space-4); font-size: 0.8125rem; color: var(--sf-muted); list-style: none; padding: 0; }
.sf-compare__legend li { display: inline-flex; align-items: center; gap: 6px; }

/* ==========================================================================
   05 Channels — product catalogue
   --------------------------------------------------------------------------
   Dark split hero (metrics + family index) → sticky CSS radio filter →
   family-grouped cards → formats legend. Filter radios stay siblings of
   .sf-channel-board so the :checked rules keep working without JS.
   ========================================================================== */

.sf-channels .sf-ch-hero {
	padding-block: clamp(36px, 4.5vw, 64px) clamp(40px, 5vw, 72px);
}
.sf-ch-hero__grid { align-items: center; }
@media (min-width: 600px) and (max-width: 899px) {
	.sf-ch-hero__grid { grid-template-columns: 1fr; }
}
.sf-ch-hero__copy { min-width: 0; }
.sf-ch-hero__head {
	display: block;
	max-width: 38rem;
	margin-bottom: 0;
}
.sf-ch-hero__head .sf-h1 {
	font-size: clamp(2.35rem, 1.5rem + 2.6vw, 3.55rem);
	letter-spacing: -0.04em;
	color: #fff;
}
.sf-ch-hero__head .sf-lead {
	margin-top: var(--sf-space-4);
	max-width: 48ch;
	font-size: 1.0625rem;
}

.sf-ch-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	list-style: none;
	margin: var(--sf-space-6) 0 0;
	padding: 0;
}
.sf-ch-metrics li {
	padding: 14px 16px;
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 16px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.sf-ch-metrics__value {
	display: block;
	font-family: var(--sf-font-display);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: #fff;
}
.sf-ch-metrics__label {
	display: block;
	margin-top: 4px;
	font-family: var(--sf-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sf-on-dark-muted);
	line-height: 1.35;
}
@media (max-width: 419px) {
	.sf-ch-metrics { grid-template-columns: 1fr; }
}

.sf-ch-hero__actions { margin-top: var(--sf-space-6); }
.sf-ch-hero .sf-btn--secondary {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .16);
	color: #fff;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.sf-ch-hero .sf-btn--secondary:hover {
	background: rgba(255, 255, 255, .13);
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
}

.sf-ch-map { min-width: 0; }
.sf-ch-map__panel {
	margin: 0;
	box-shadow: var(--sf-shadow-window, 0 24px 48px -24px rgba(15, 18, 40, .55));
}
.sf-ch-hero .sf-ch-map a.sf-ch-map__card { color: var(--sf-ink); }
.sf-ch-map__list {
	display: grid;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sf-ch-map__list li { min-width: 0; }
.sf-ch-map__list li + li .sf-ch-map__card { border-top: 1px solid var(--sf-line); }
.sf-ch-map__card {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 10px 16px;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	text-decoration: none;
	transition: background .16s var(--sf-ease);
}
.sf-ch-map__num {
	font-family: var(--sf-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--sf-brand);
}
.sf-ch-map__name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sf-ink);
	line-height: 1.25;
}
.sf-ch-map__count {
	font-family: var(--sf-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--sf-muted);
	font-variant-numeric: tabular-nums;
}
.sf-ch-map__card:hover,
.sf-ch-map__card:focus-visible,
.sf-ch-map__list li:first-child .sf-ch-map__card:hover,
.sf-ch-map__list li:first-child .sf-ch-map__card:focus-visible {
	background: var(--sf-brand-tint, #EEF2FF);
}
.sf-ch-map__list li:first-child .sf-ch-map__card {
	background: linear-gradient(90deg, rgba(79, 70, 229, .06), transparent 70%);
}
@media (min-width: 520px) {
	.sf-ch-map__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sf-ch-map__list li:nth-child(2) .sf-ch-map__card { border-top: 0; }
	.sf-ch-map__list li:nth-child(odd) .sf-ch-map__card {
		border-inline-end: 1px solid var(--sf-line);
	}
}

/* --- Catalogue flow ----------------------------------------------------- */
.sf-channels__flow {
	background:
		radial-gradient(900px 420px at 8% 0%, rgba(99, 102, 241, .08), transparent 70%),
		radial-gradient(700px 380px at 100% 12%, rgba(124, 58, 237, .06), transparent 70%),
		var(--sf-ground-2, #F3F4FB);
	padding-block: clamp(24px, 3vw, 40px) clamp(40px, 5vw, 72px);
}

.sf-filter { position: relative; }
.sf-filter__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sf-filter__chips {
	position: sticky;
	top: var(--sf-header-h);
	z-index: 40;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 4px;
	margin: 0 0 var(--sf-space-5);
	padding: 6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .14);
	border-radius: 18px;
	box-shadow: var(--sf-e2, var(--sf-shadow-card));
}
.sf-filter__chips::-webkit-scrollbar { display: none; }
.sf-filter__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1 1 0;
	min-width: max-content;
	min-height: 42px;
	padding: 0 12px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--sf-ink-2);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	box-shadow: none;
	transition: background-color .15s var(--sf-ease), color .15s var(--sf-ease);
}
.sf-filter__chip:hover { background: var(--sf-brand-tint, #EEF2FF); color: var(--sf-ink); }
.sf-filter__count {
	display: inline-grid;
	place-items: center;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 5px;
	border-radius: 999px;
	background: rgba(79, 70, 229, .08);
	font-family: var(--sf-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--sf-brand-ink);
}

#sf-ch-all:checked ~ .sf-filter__chips [for="sf-ch-all"],
#sf-ch-google:checked ~ .sf-filter__chips [for="sf-ch-google"],
#sf-ch-social:checked ~ .sf-filter__chips [for="sf-ch-social"],
#sf-ch-advertising:checked ~ .sf-filter__chips [for="sf-ch-advertising"],
#sf-ch-marketplace:checked ~ .sf-filter__chips [for="sf-ch-marketplace"],
#sf-ch-ai:checked ~ .sf-filter__chips [for="sf-ch-ai"],
#sf-ch-custom:checked ~ .sf-filter__chips [for="sf-ch-custom"] { background: var(--sf-grad-brand, var(--sf-brand)); border-color: transparent; color: #fff; }
#sf-ch-all:checked ~ .sf-filter__chips [for="sf-ch-all"] .sf-filter__count,
#sf-ch-google:checked ~ .sf-filter__chips [for="sf-ch-google"] .sf-filter__count,
#sf-ch-social:checked ~ .sf-filter__chips [for="sf-ch-social"] .sf-filter__count,
#sf-ch-advertising:checked ~ .sf-filter__chips [for="sf-ch-advertising"] .sf-filter__count,
#sf-ch-marketplace:checked ~ .sf-filter__chips [for="sf-ch-marketplace"] .sf-filter__count,
#sf-ch-ai:checked ~ .sf-filter__chips [for="sf-ch-ai"] .sf-filter__count,
#sf-ch-custom:checked ~ .sf-filter__chips [for="sf-ch-custom"] .sf-filter__count {
	color: #fff;
	background: rgba(255, 255, 255, .22);
}
#sf-ch-all:focus-visible ~ .sf-filter__chips [for="sf-ch-all"],
#sf-ch-google:focus-visible ~ .sf-filter__chips [for="sf-ch-google"],
#sf-ch-social:focus-visible ~ .sf-filter__chips [for="sf-ch-social"],
#sf-ch-advertising:focus-visible ~ .sf-filter__chips [for="sf-ch-advertising"],
#sf-ch-marketplace:focus-visible ~ .sf-filter__chips [for="sf-ch-marketplace"],
#sf-ch-ai:focus-visible ~ .sf-filter__chips [for="sf-ch-ai"],
#sf-ch-custom:focus-visible ~ .sf-filter__chips [for="sf-ch-custom"] { outline: 2px solid var(--sf-focus); outline-offset: 2px; }

#sf-ch-google:checked ~ .sf-channel-board .sf-ch-group:not([data-family="google"]),
#sf-ch-social:checked ~ .sf-channel-board .sf-ch-group:not([data-family="social"]),
#sf-ch-advertising:checked ~ .sf-channel-board .sf-ch-group:not([data-family="advertising"]),
#sf-ch-marketplace:checked ~ .sf-channel-board .sf-ch-group:not([data-family="marketplace"]),
#sf-ch-ai:checked ~ .sf-channel-board .sf-ch-group:not([data-family="ai"]),
#sf-ch-custom:checked ~ .sf-channel-board .sf-ch-group:not([data-family="custom"]) { display: none; }

.sf-channel-board { display: grid; gap: var(--sf-space-5); }
.sf-ch-group {
	scroll-margin-top: calc(var(--sf-header-h) + 64px);
	padding: clamp(18px, 2.4vw, 28px);
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .14);
	border-radius: 24px;
	box-shadow: var(--sf-e2, var(--sf-shadow-card));
}
.sf-ch-group__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 var(--sf-space-4);
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(79, 70, 229, .12);
}
.sf-ch-group__label {
	margin: 0;
	font-family: var(--sf-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--sf-ink);
}
.sf-ch-group__n {
	font-family: var(--sf-font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--sf-muted);
}

.sf-channel-grid { display: grid; gap: var(--sf-space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .sf-channel-grid { gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sf-channel-grid .sf-channel {
	grid-template-columns: 44px minmax(0, 1fr) auto;
	grid-template-rows: auto 1fr auto;
	gap: 10px 14px;
	padding: 18px 18px 16px;
	border-radius: var(--sf-r-xl);
	border: 1px solid rgba(79, 70, 229, .16);
	box-shadow: var(--sf-e1);
	transition: transform .18s var(--sf-ease), box-shadow .18s var(--sf-ease), border-color .18s var(--sf-ease);
}
.sf-channel-grid .sf-channel:hover {
	transform: translateY(-2px);
	box-shadow: var(--sf-e2);
	border-color: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 40%, #fff);
}
.sf-channel-grid .sf-channel--free {
	border-color: rgba(79, 70, 229, .75);
	box-shadow: var(--sf-e2);
}
.sf-channel__mark {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 11%, #fff);
	border: 1px solid color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 26%, #fff);
}
.sf-channel__mark svg {
	display: block;
	width: 22px;
	height: 22px;
	color: var(--sf-ink-2);
}
.sf-channel-grid .sf-channel:hover .sf-channel__mark svg {
	color: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 72%, #0F172A);
}
.sf-channel__body { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.sf-channel-grid .sf-channel__badge { grid-column: 3; grid-row: 1; }
.sf-channel__name { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }
.sf-channel-grid .sf-channel__desc { margin-top: 8px; color: var(--sf-ink-2); font-size: 0.9375rem; line-height: 1.55; }
.sf-channel__formats-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; list-style: none; padding: 0; }
.sf-channel__formats-list li {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	padding: 0 7px;
	border: var(--sf-border);
	border-radius: 4px;
	background: var(--sf-surface-2);
	font-family: var(--sf-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--sf-ink-2);
}
.sf-channel__formats-list li.is-pro {
	border-color: var(--sf-accent-tint);
	background: var(--sf-accent-tint);
	color: var(--sf-accent-ink);
}
.sf-channel__footer {
	grid-column: 1 / -1;
	grid-row: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sf-space-2) var(--sf-space-3);
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid rgba(79, 70, 229, .12);
}
.sf-channel__doc { display: inline-flex; align-items: center; gap: 6px; font-size: var(--sf-text-small); font-weight: 600; text-decoration: none; }
.sf-channel__doc:hover { text-decoration: underline; }
.sf-channel__tier { font-family: var(--sf-font-mono); font-size: 0.75rem; color: var(--sf-muted); }

.sf-channels__legend {
	margin-top: var(--sf-space-6);
	padding: clamp(22px, 3vw, 36px);
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .14);
	border-radius: 24px;
	box-shadow: var(--sf-e2, var(--sf-shadow-card));
}
.sf-channels__legend .sf-small { margin-top: var(--sf-space-3); max-width: 62ch; }
.sf-channels__legend .sf-format-grid { margin-top: var(--sf-space-5); }
.sf-channels__foot { margin-top: var(--sf-space-8); }

@media (prefers-reduced-motion: reduce) {
	.sf-ch-map__card,
	.sf-ch-map__card:hover,
	.sf-filter__chip,
	.sf-channel-grid .sf-channel,
	.sf-channel-grid .sf-channel:hover { transform: none; transition: none; }
}

/* ---------------------------------------------------------------------------
 * Matrix footnotes — used where a row is true only under a stated condition,
 * so a checkmark never overstates what the software does on its own.
 * ------------------------------------------------------------------------ */
.sf-footnote-ref {
	margin-inline-start: 4px;
	color: var(--sf-brand);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.sf-footnote-ref sup { font-size: 0.7em; font-weight: 600; }
.sf-footnote-ref:hover sup,
.sf-footnote-ref:focus-visible sup { text-decoration: underline; }

.sf-footnotes {
	max-width: 72ch;
	margin: var(--sf-space-5) 0 0;
	padding-inline-start: 1.25em;
	color: var(--sf-muted);
	font-size: var(--sf-text-small, 0.875rem);
	line-height: 1.55;
}
.sf-footnotes li + li { margin-block-start: var(--sf-space-2); }
.sf-footnotes li:target { color: var(--sf-ink-2); }

/* ≤359px: the pricing free-plugin strip stacks its text and button. */
@media (max-width: 359px) {
	.sf-free-strip { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
	.sf-free-strip .sf-btn { justify-content: center; }
}

/* ==========================================================================
   06 Section bands
   --------------------------------------------------------------------------
   The four inner pages used to be a single .sf-section--tight wrapping every
   block, which is why they read as one white slab. Each block is now its own
   full-bleed band with its own tone (main.css: --tint / --accent / --surface),
   alternating down the page. The rules below remove the separators those
   blocks used to draw for themselves — a border-top and a space-8 margin —
   because the band edge and the band padding now do that job.
   ========================================================================== */

.sf-band > .sf-container > .sf-includes,
.sf-band > .sf-container > .sf-licence-facts,
.sf-band > .sf-container > .sf-pricing-faq {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.sf-band .sf-compare__foot,
.sf-band .sf-channels__foot,
.sf-band .sf-features__foot { margin-top: 0; }

/* A brand hairline between two stacked bands replaces the band's own edge, so
   the two never draw a double line. */
.sf-rule-brand + .sf-section { border-top: 0; }

/* The 76-row matrix and the per-group mini tables are white sheets; on a tinted
   band they need a shadow to sit above the ground rather than in it. */
.sf-band--matrix .sf-compare-table.sf-table-wrap,
.sf-feature-band.sf-section--tint .sf-feature__table .sf-table-wrap { box-shadow: var(--sf-shadow-card); }

/* ---------------------------------------------------------------------------
 * Features: one band per matrix group.
 * ------------------------------------------------------------------------ */
/* .sf-feature drew its own padding and rule when every group shared one
   section. The band supplies both now. */
.sf-feature-band .sf-feature { padding-block: 0; border-bottom: 0; }
@media (min-width: 900px) { .sf-feature-band .sf-feature { padding-block: 0; } }

/* The sticky chip nav lives inside .sf-features__canvas on small screens.
   Negative inline margin (set on .sf-fx-nav) pulls it to the flow edge. */
.sf-subnav--full { margin-inline: 0; padding-inline: 0; }
.sf-subnav--full > .sf-container { padding-inline: var(--sf-gutter); }

/* ---------------------------------------------------------------------------
 * Contrast on a toned ground.
 *
 * --sf-muted (#5B6B84) is 5.41:1 on white, but a band's brand wash lifts the
 * ground: 4.10:1 where both tint radials overlap, 4.27:1 at the top of an
 * accent band — under AA for body text. Text that sits directly on a band (the
 * page-header fact row, eyebrow numbers, fact labels, the legends) therefore
 * gets a darker muted here: #4E5D76 measures 5.05:1 on the worst-case tint,
 * 5.25:1 on the accent wash, 6.37:1 on the flat slate and 6.66:1 inside the
 * white cards, so every one of those combinations clears AA.
 * ------------------------------------------------------------------------ */
.sf-page .sf-section--tint,
.sf-page .sf-section--accent { --sf-muted: #4E5D76; }

/* ---------------------------------------------------------------------------
 * The matrix band is roughly 4,000px tall, far past the 380px reach of the
 * tint wash, so all but its first screen was flat slate. A slow vertical shift
 * towards the violet tint keeps the longest block on the site alive without
 * putting colour behind the table itself, which stays a white sheet.
 * ------------------------------------------------------------------------ */
.sf-band--matrix.sf-section--tint {
	background: linear-gradient(180deg, var(--sf-ground-2) 0%, var(--sf-ground-3) 46%, var(--sf-ground-1) 100%);
}

/* ---------------------------------------------------------------------------
 * Below 900px the feature intro and body are stacked full-bleed columns, so a
 * horizontal reveal slides them under the clip edge of .sf-site. Same motion,
 * same .is-visible hook, but vertical. Gated on no-preference so it cannot
 * out-specify the prefers-reduced-motion reset in main.css.
 * ------------------------------------------------------------------------ */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
	html.js .sf-feature__intro.sf-reveal--left,
	html.js .sf-feature__body.sf-reveal--right,
	html.js .sf-fx__copy.sf-reveal--left,
	html.js .sf-fx__stage.sf-reveal--right { transform: translateY(18px); }
	html.js .sf-feature__intro.sf-reveal--left.is-visible,
	html.js .sf-feature__body.sf-reveal--right.is-visible,
	html.js .sf-fx__copy.sf-reveal--left.is-visible,
	html.js .sf-fx__stage.sf-reveal--right.is-visible { transform: none; }
}

/* ==========================================================================
   07 Homepage parity
   --------------------------------------------------------------------------
   Inner templates reuse the front-page closer (d-pricing-faq-cta.css), the
   plan-card board (.sf-pricing-section) and the FAQ panel (.sf-faq-section).
   The rules below bring page headers, the 76-row matrix, channel cards and
   default prose pages onto that same system.
   ========================================================================== */

/* --- Page header: compact two-column masthead from 900px. Docs keeps its
   own stacked header. The previous 1.15fr / 1fr split stretched a short title
   and a short lead across 1200px and left a hole in the middle. ----------- */
.sf-page .sf-band--intro,
.sf-page > .sf-section--accent,
.sf-changelog__top,
.sf-support__top {
	padding-block: clamp(24px, 3.2vw, 40px);
}
.sf-page .sf-section--tint,
.sf-page .sf-section--surface {
	padding-block: clamp(32px, 4vw, 56px);
}
.sf-page .sf-feature-band {
	padding-block: clamp(40px, 5vw, 72px);
}
.sf-page .sf-features .sf-fx-hero,
.sf-page .sf-channels .sf-ch-hero,
.sf-page .sf-pr-hero,
.sf-page .sf-cmp-hero {
	padding-block: clamp(36px, 4.5vw, 64px) clamp(40px, 5vw, 72px);
}
.sf-page .sf-page-header { margin-bottom: 0; max-width: none; }
@media (min-width: 900px) {
	.sf-page .sf-page-header:not(.sf-docs__header):not(.sf-fx-hero__head):not(.sf-ch-hero__head):not(.sf-pr-hero__head):not(.sf-cmp-hero__head) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(240px, 34ch);
		gap: 8px 28px;
		max-width: 920px;
		align-items: end;
	}
	.sf-page .sf-page-header:not(.sf-docs__header):not(.sf-fx-hero__head):not(.sf-ch-hero__head):not(.sf-pr-hero__head):not(.sf-cmp-hero__head) .sf-eyebrow { grid-column: 1; grid-row: 1; }
	.sf-page .sf-page-header:not(.sf-docs__header):not(.sf-fx-hero__head):not(.sf-ch-hero__head):not(.sf-pr-hero__head):not(.sf-cmp-hero__head) .sf-h1 { grid-column: 1; grid-row: 2; margin: 0; }
	.sf-page .sf-page-header:not(.sf-docs__header):not(.sf-fx-hero__head):not(.sf-ch-hero__head):not(.sf-pr-hero__head):not(.sf-cmp-hero__head) .sf-lead {
		grid-column: 2;
		grid-row: 2;
		margin: 0;
		padding-bottom: 2px;
	}
	.sf-page .sf-page-header:not(.sf-docs__header):not(.sf-fx-hero__head):not(.sf-ch-hero__head):not(.sf-pr-hero__head):not(.sf-cmp-hero__head) .sf-facts,
	.sf-page .sf-page-header:not(.sf-docs__header):not(.sf-fx-hero__head):not(.sf-ch-hero__head):not(.sf-pr-hero__head):not(.sf-cmp-hero__head) .sf-page-header__actions,
	.sf-page .sf-page-header:not(.sf-docs__header):not(.sf-fx-hero__head):not(.sf-ch-hero__head):not(.sf-pr-hero__head):not(.sf-cmp-hero__head) .sf-page-header__search {
		grid-column: 1 / -1;
	}
}
.sf-page .sf-h1,
.sf-single .sf-h1,
.sf-404 .sf-h1 {
	font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.4rem);
	letter-spacing: -0.03em;
}
.sf-features .sf-fx-hero__head .sf-h1,
.sf-channels .sf-ch-hero__head .sf-h1,
.sf-pricing-page .sf-pr-hero__head .sf-h1,
.sf-compare-page .sf-cmp-hero__head .sf-h1 {
	font-size: clamp(2.35rem, 1.5rem + 2.6vw, 3.55rem);
	letter-spacing: -0.04em;
	color: #fff;
}

/* Default pages (FAQ, legal): prose sits in a white panel on the tint. */
.sf-page__prose,
.sf-page .sf-page__prose,
.sf-single .sf-page__prose {
	margin-top: 0;
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .14);
	border-radius: var(--sf-r-xl);
	box-shadow: var(--sf-shadow-card);
	padding: var(--sf-space-6);
}
@media (min-width: 900px) {
	.sf-page__prose { padding: var(--sf-space-6) var(--sf-space-7); }
}

/* --- Pricing page: free strip and licence cards as homepage objects ----- */
.sf-free-strip {
	margin-top: var(--sf-space-6);
	padding: var(--sf-space-5);
	border: 1px solid rgba(79, 70, 229, .16);
	border-radius: var(--sf-r-xl);
	background: linear-gradient(180deg, #fff 0%, #F7F8FF 100%);
	box-shadow: var(--sf-e2);
}
.sf-licence-facts .sf-card {
	border-color: rgba(79, 70, 229, .16);
	border-radius: var(--sf-r-xl);
	box-shadow: var(--sf-e2);
	padding: var(--sf-space-5);
}
.sf-licence-facts .sf-card__title {
	display: flex;
	align-items: center;
	gap: 10px;
}
.sf-licence-facts .sf-card__title::before {
	content: "";
	width: 4px;
	height: 18px;
	border-radius: 2px;
	background: var(--sf-grad-brand);
	flex: none;
}
.sf-includes .sf-checklist {
	padding: var(--sf-space-5);
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .14);
	border-radius: var(--sf-r-xl);
	box-shadow: var(--sf-shadow-card);
}
.sf-pricing-page .sf-includes .sf-checklist {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/* --- Compare: Pro column as a full-height violet lane (homepage .sf-cmp) */
.sf-compare-table {
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .16);
	border-radius: var(--sf-r-xl);
	box-shadow: var(--sf-shadow-card);
	overflow: hidden;
}
.sf-compare-table .sf-table thead .sf-table__col-pro {
	background: linear-gradient(135deg, #3730A3 0%, #4F46E5 52%, #6D28D9 100%);
	border: 0;
	box-shadow: inset 2px 0 0 var(--sf-violet), inset -2px 0 0 var(--sf-violet);
	color: #fff;
}
.sf-compare-table .sf-table thead .sf-table__col-pro .sf-compare__tier { color: #fff; }
.sf-compare-table .sf-table thead .sf-table__col-pro .sf-compare__price { color: #EEF2FF; }
.sf-compare-table .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);
	font-weight: 600;
}
.sf-compare-table .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: 900px) {
	.sf-compare-table .sf-table thead th.sf-table__col-pro {
		position: sticky;
		top: var(--sf-header-h);
		background: linear-gradient(135deg, #3730A3 0%, #4F46E5 52%, #6D28D9 100%);
		box-shadow: inset 2px 0 0 var(--sf-violet), inset -2px 0 0 var(--sf-violet), 0 1px 0 rgba(255,255,255,.12);
	}
	.sf-compare-page .sf-compare-table .sf-table thead th.sf-table__col-pro {
		top: calc(var(--sf-header-h) + 52px);
	}
}

/* Mini tables on Features: same Pro lane, clipped to the wrap. */
.sf-feature__table .sf-table-wrap {
	background: var(--sf-surface);
	border: 1px solid rgba(79, 70, 229, .16);
	border-radius: var(--sf-r-lg);
	overflow: hidden;
	box-shadow: var(--sf-e1);
}
.sf-feature__table .sf-table thead .sf-table__col-pro {
	background: linear-gradient(135deg, #3730A3 0%, #4F46E5 52%, #6D28D9 100%);
	color: #fff;
}
.sf-feature__table .sf-table tbody .sf-compare__pro {
	background: linear-gradient(90deg, rgba(124, 58, 237, .12), rgba(99, 102, 241, .08));
	box-shadow: inset 2px 0 0 var(--sf-violet);
	font-weight: 600;
}
.sf-feature__graphic .sf-window::after,
.sf-fx__frame .sf-window::after {
	content: "";
	position: absolute;
	inset: 12% 6% -8% 6%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(124, 92, 255, .30), transparent 68%);
	filter: blur(56px);
	pointer-events: none;
}

/* Channel chips on the Features fallback: glyphs instead of 6px dots. */
.sf-chips--marks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px;
}
.sf-chips--marks li {
	gap: 8px;
	min-height: 44px;
	padding: 8px 12px 8px 8px;
	border-radius: 12px;
	border-color: rgba(79, 70, 229, .16);
	background: #fff;
}
.sf-chips--marks .sf-chx-tile__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 11%, #fff);
	border: 1px solid color-mix(in srgb, var(--sf-ch, var(--sf-brand)) 26%, #fff);
}
.sf-chips--marks .sf-chx-tile__mark svg {
	display: block;
	width: 16px;
	height: 16px;
	color: var(--sf-ink-2);
}

/* Compare counts: homepage fact-rail objects. */
.sf-compare__counts .sf-fact {
	padding: var(--sf-space-4);
}
.sf-compare__index a {
	border-color: rgba(79, 70, 229, .16);
	border-radius: 999px;
	box-shadow: var(--sf-e1);
}

/* Subnav sits on paper-lavender, not a hard white slab. */
.sf-subnav {
	background: color-mix(in srgb, var(--sf-paper) 82%, #fff);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom-color: rgba(79, 70, 229, .12);
}

/* --- Blog, search, 404, single: same shell as the other inner pages ------- */
.sf-single .sf-page-header { max-width: none; margin-bottom: 0; }
.sf-single__media {
	margin: 0 0 var(--sf-space-6);
	border-radius: var(--sf-r-xl);
	box-shadow: var(--sf-e2);
}
.sf-listing .sf-post-grid .sf-post-card,
.sf-listing .sf-post-grid > article {
	border-color: rgba(79, 70, 229, .16);
	border-radius: var(--sf-r-xl);
	box-shadow: var(--sf-e1);
}
.sf-comments {
	margin-top: 0;
	padding: var(--sf-space-6);
	border: 1px solid rgba(79, 70, 229, .14);
	border-radius: var(--sf-r-xl);
	background: var(--sf-surface);
	box-shadow: var(--sf-shadow-card);
}
.sf-404 .sf-page__prose { padding: var(--sf-space-6); }
.sf-404__search { margin: 0 0 var(--sf-space-5); max-width: none; }